/* =============================================================
   Digivate 360 — Design System
   Tokens, resets, layout primitives, and component styles.
   Built mobile-first. Port-friendly to Elementor (semantic HTML).
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --red:        #E73035;
  --red-dark:   #C71F24;
  --red-tint:   #FDE7E5;

  /* Secondary */
  --navy-900:   #0F1F3D;
  --navy-700:   #1E3A6F;

  /* Accent */
  --teal-500:   #0EA5A4;
  --teal-50:    #CCFBF1;

  /* Neutrals */
  --ink:        #0B1220;
  --headline:   #111827;
  --body:       #374151;
  --muted:      #6B7280;
  --subtle:     #9CA3AF;
  --border:     #E5E7EB;
  --surface:    #F3F4F6;
  --bg-alt:     #F9FAFB;
  --bg:         #FFFFFF;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: .8125rem;    /* 13 */
  --fs-sm: .9375rem;    /* 15 */
  --fs-base: 1rem;      /* 16 */
  --fs-md: 1.125rem;    /* 18 */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: 1.5rem;      /* 24 */
  --fs-2xl: 1.875rem;   /* 30 */
  --fs-3xl: 2.25rem;    /* 36 */
  --fs-4xl: 3rem;       /* 48 */
  --fs-5xl: 3.75rem;    /* 60 */
  --fs-display: clamp(2.5rem, 5vw + 1rem, 4.75rem); /* hero */

  /* Spacing (4px base) */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --container: 1200px;
  --gutter: 1.5rem;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(11,18,32,.04), 0 1px 3px rgba(11,18,32,.06);
  --shadow-md: 0 4px 8px rgba(11,18,32,.04), 0 8px 24px rgba(11,18,32,.06);
  --shadow-lg: 0 10px 30px rgba(11,18,32,.08), 0 20px 60px rgba(11,18,32,.08);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 220ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--headline); letter-spacing: -0.02em; line-height: 1.15; font-weight: 800; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-7); }
.section--on-navy { background: var(--navy-900); color: #DCE6F5; }
.section--on-navy h1,
.section--on-navy h2,
.section--on-navy h3 { color: #fff; }
.section--on-tint { background: var(--red-tint); }
.section--on-bg-alt { background: var(--bg-alt); }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--space-3);
}
.section--on-navy .eyebrow { color: #FF8D91; }

.lead {
  font-size: var(--fs-md);
  color: var(--body);
  max-width: 60ch;
  line-height: 1.65;
}
.section--on-navy .lead { color: #B7C4D9; }

/* Utility */
.flex { display: flex; }
.grid { display: grid; }
.center { text-align: center; }
.stack > * + * { margin-top: var(--space-5); }
.stack-sm > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-7); }
.max-prose { max-width: 62ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.35rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: -0.01em;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 6px 20px rgba(231,48,53,.28);
}
.btn--primary:hover { background: var(--red-dark); box-shadow: 0 10px 28px rgba(231,48,53,.35); }

.btn--ghost {
  background: transparent;
  color: var(--headline);
  border-color: var(--border);
}
.btn--ghost:hover { border-color: var(--headline); }

.section--on-navy .btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
.section--on-navy .btn--ghost:hover { border-color: #fff; }

.btn--link {
  padding: 0;
  background: transparent;
  color: var(--red);
  font-weight: 600;
  position: relative;
}
.btn--link::after { content: " →"; transition: transform var(--dur) var(--ease); display: inline-block; }
.btn--link:hover::after { transform: translateX(3px); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: 76px;
}
.site-header__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  color: var(--headline);
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
}
.site-header__brand-mark { width: 38px; height: 38px; border-radius: 9px; }
.site-header__brand-name .n360 { color: var(--red); margin-left: .2em; letter-spacing: .1em; font-size: .7em; font-weight: 800; }

.nav { display: none; gap: var(--space-5); align-items: center; }
.nav a { color: var(--headline); font-weight: 500; font-size: var(--fs-sm); position: relative; padding: .25rem 0; display: inline-flex; align-items: center; line-height: 1; }
.nav a:hover { color: var(--red); }
.nav .has-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav .has-dropdown > a { padding-right: .25rem; }
.nav .dropdown {
  position: absolute;
  top: 100%;
  left: -12px;
  margin-top: .5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: .75rem;
  box-shadow: var(--shadow-md);
  display: none;
  min-width: 240px;
}
.nav .has-dropdown:hover .dropdown,
.nav .has-dropdown:focus-within .dropdown { display: block; }
.dropdown a {
  display: block;
  padding: .6rem .75rem;
  border-radius: .5rem;
  font-size: var(--fs-sm);
}
.dropdown a:hover { background: var(--red-tint); color: var(--red-dark); }
.dropdown a small { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; font-size: var(--fs-xs); }

.site-header__cta { display: none; }

.nav-toggle {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.nav-toggle span { width: 18px; height: 2px; background: var(--headline); display: block; position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--headline);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

@media (min-width: 900px) {
  .nav { display: flex; }
  .site-header__cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* Mobile drawer */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 76px 0 0 0;
  background: #fff;
  padding: var(--space-5);
  z-index: 40;
  overflow-y: auto;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a { display: block; padding: .9rem 0; font-size: var(--fs-lg); font-weight: 600; color: var(--headline); border-bottom: 1px solid var(--border); }
.mobile-nav a.sub { font-size: var(--fs-md); font-weight: 500; padding-left: 1rem; color: var(--body); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(4rem, 8vw, 8rem);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
.hero__copy { position: relative; z-index: 2; }
.hero h1 {
  font-size: var(--fs-display);
  color: var(--ink);
  margin: var(--space-3) 0 var(--space-5);
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.hero__sub {
  font-size: clamp(1.05rem, 1vw + .9rem, 1.35rem);
  color: var(--body);
  max-width: 60ch;
  margin-bottom: var(--space-6);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__art {
  position: relative;
  min-height: 340px;
  display: grid;
  place-items: center;
}
.hero__tile {
  width: min(90%, 380px);
  aspect-ratio: 1 / 1;
  border-radius: 40px;
  background: linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%);
  box-shadow: 0 40px 60px -20px rgba(199,31,36,.35), 0 20px 30px -10px rgba(199,31,36,.25);
  position: relative;
  transform: rotate(-4deg);
}
.hero__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 40px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18) 0%, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.1) 0%, transparent 40%);
}
.hero__dot {
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--red-tint);
  z-index: -1;
}
.hero__dot--1 { top: -20px; left: -40px; }
.hero__dot--2 { bottom: 20px; right: -30px; width: 80px; height: 80px; background: var(--teal-50); }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.1fr .9fr; gap: var(--space-8); }
}

/* ---------- Proof bar ---------- */
.proof {
  padding-block: var(--space-7);
  border-block: 1px solid var(--border);
  background: var(--bg-alt);
}
.proof__eyebrow {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.proof__logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  align-items: center;
  justify-items: center;
}
@media (min-width: 600px) { .proof__logos { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .proof__logos { grid-template-columns: repeat(8, 1fr); } }

.logo-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1rem;
}
.logo-chip img {
  max-height: 44px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------- Meta partnership banner ---------- */
.meta-banner {
  padding-block: var(--space-7);
  background: var(--navy-900);
}
.meta-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}
.meta-banner__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.meta-banner__logo {
  height: 80px;
  width: auto;
  filter: brightness(0) invert(1);
}
@media (min-width: 900px) {
  .meta-banner__logo { height: 110px; }
}
.meta-banner__label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FF8D91;
  border: 1px solid rgba(255,255,255,.15);
  padding: .3rem .75rem;
  border-radius: 999px;
}
.meta-banner__copy h2 {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  color: #fff;
  margin-bottom: var(--space-3);
}
.meta-banner__copy p {
  font-size: var(--fs-md);
  color: #B7C4D9;
  max-width: 58ch;
  margin-inline: auto;
  line-height: 1.65;
}
@media (min-width: 700px) {
  .meta-banner__inner {
    flex-direction: row;
    text-align: left;
    gap: var(--space-7);
  }
  .meta-banner__badge { flex-shrink: 0; }
  .meta-banner__copy p { margin-inline: 0; }
}

/* ---------- Hook / diagnosis section ---------- */
.hook {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
.hook h2 {
  font-size: clamp(2rem, 2.5vw + 1rem, 3rem);
  color: #fff;
  margin-bottom: var(--space-5);
  max-width: 22ch;
}
.hook p { color: #B7C4D9; font-size: var(--fs-md); max-width: 58ch; }
.hook p strong { color: #fff; }
.hook p em { color: #fff; font-style: italic; }

.stat-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-align: center;
}
.stat-card__figure {
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 800;
  color: var(--red);
  letter-spacing: -0.04em;
  line-height: 1;
}
.stat-card__caption {
  margin-top: var(--space-3);
  font-size: var(--fs-md);
  color: #DCE6F5;
}

@media (min-width: 900px) { .hook { grid-template-columns: 1.3fr .7fr; } }

/* ---------- Pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(3, 1fr); } }

.pillar-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--red-tint); }
.pillar-card__num {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--red);
  letter-spacing: .1em;
}
.pillar-card h3 { font-size: var(--fs-xl); color: var(--headline); }
.pillar-card__promise {
  color: var(--red-dark);
  font-weight: 600;
  font-size: var(--fs-md);
}
.pillar-card p { color: var(--body); font-size: var(--fs-sm); }
.pillar-card a { margin-top: auto; color: var(--red); font-weight: 600; font-size: var(--fs-sm); }
.pillar-card a:hover { text-decoration: underline; }

/* ---------- Case cards ---------- */
.cases {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 900px) {
  .cases {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, auto);
  }
  .case-card--hero { grid-row: span 2; }
}

.case-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.case-card__tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  background: var(--red-tint);
  padding: .3rem .65rem;
  border-radius: 999px;
  width: fit-content;
}
.case-card__client {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.case-card h3 {
  font-size: var(--fs-xl);
  color: var(--headline);
  line-height: 1.25;
}
.case-card--hero h3 { font-size: var(--fs-2xl); }
.case-card p { color: var(--body); font-size: var(--fs-sm); line-height: 1.65; }
.case-card a { color: var(--red); font-weight: 600; font-size: var(--fs-sm); }

/* ---------- Work page: case study grid ---------- */
.work-grid__header {
  max-width: 720px;
  margin-bottom: var(--space-6);
}
.work-grid__header h2 {
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  margin-bottom: var(--space-3);
}
.work-grid__header .lead {
  color: var(--body);
  font-size: var(--fs-md);
}

.cases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 760px) {
  .cases-grid { grid-template-columns: 1fr 1fr; }
  .cases-grid .case-card--featured { grid-column: 1 / -1; }
}

/* Animated accent bar on hover */
.case-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
  z-index: 1;
}
.case-card:hover::before { transform: scaleX(1); }

/* Card head: logo + tags row */
.case-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.case-card__logo {
  display: flex;
  align-items: center;
  height: 40px;
}
.case-card__logo img {
  max-height: 36px;
  max-width: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.case-card--featured .case-card__logo { height: 56px; }
.case-card--featured .case-card__logo img {
  max-height: 52px;
  max-width: 150px;
}
.case-card__logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 .75rem;
  border-radius: 10px;
  background: var(--bg-alt);
  color: var(--headline);
  font-weight: 800;
  font-size: .8125rem;
  letter-spacing: -.01em;
}
.case-card__logo-mark--wide { padding: 0 .9rem; font-size: .75rem; letter-spacing: .04em; }

/* Tags row (replaces single tag) */
.case-card__tags {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.case-card__tag--sector {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

/* Stat block — the hero number */
.case-card__stat { line-height: 1; }
.case-card__stat-figure {
  display: block;
  font-size: clamp(2.5rem, 3.5vw + 1rem, 3.25rem);
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  letter-spacing: -.03em;
}
.case-card__stat-label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: .35rem;
  font-weight: 500;
  line-height: 1.4;
}
.case-card--featured .case-card__stat-figure {
  font-size: clamp(3rem, 5vw + 1rem, 4.5rem);
}
.case-card--featured h3 { font-size: var(--fs-2xl); }
.case-card--featured p { font-size: var(--fs-md); max-width: 60ch; }

/* Sub-label inside a card title */
.case-card__sub {
  font-weight: 400;
  color: var(--muted);
  font-size: .85em;
}

/* CTA link inside card */
.case-card__cta {
  margin-top: auto;
  padding-top: var(--space-3);
  display: inline-block;
}

/* ---------- Work page: beyond-the-case-studies section ---------- */
.work-beyond {
  padding-block: var(--space-7);
  background: var(--bg-alt);
}
.work-beyond__intro {
  max-width: 720px;
  margin-bottom: var(--space-6);
}
.work-beyond__intro h2 {
  font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem);
  margin-top: var(--space-2);
}
.work-beyond__groups {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 760px) {
  .work-beyond__groups { grid-template-columns: 1fr 1fr; }
}
.work-beyond__group h4 {
  font-size: .75rem;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 1rem;
  font-weight: 700;
}
.work-beyond__group ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}
.work-beyond__group li {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem .9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 96px;
  text-align: center;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.work-beyond__group li:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}
.work-beyond__group li img {
  max-height: 28px;
  max-width: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.work-beyond__group li span {
  font-size: .8125rem;
  color: var(--body);
  font-weight: 500;
  line-height: 1.3;
  display: block;
}
.work-beyond__group li.no-logo {
  background: transparent;
  border-style: dashed;
}
.work-beyond__group li.no-logo span {
  font-weight: 600;
  color: var(--headline);
}
.work-beyond__group li span small {
  display: block;
  font-size: .6875rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: .25rem;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Insights page: press grid ---------- */
.press-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 700px) { .press-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .press-grid { grid-template-columns: repeat(4, 1fr); } }

.press-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  min-height: 180px;
}
.press-card:hover { border-color: var(--red); transform: translateY(-2px); }
.press-card__source {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
}
.press-card h3 {
  font-size: 1rem;
  color: var(--headline);
  line-height: 1.35;
  margin: 0;
}
.press-card__meta {
  margin-top: auto;
  font-size: .75rem;
  color: var(--muted);
}
.press-card--placeholder {
  border-style: dashed;
}
.press-card--placeholder h3 { color: var(--body); font-weight: 600; }

/* ---------- Insights page: reports / lead magnets ---------- */
.report-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
@media (min-width: 760px) { .report-grid { grid-template-columns: 1fr 1fr 1fr; } }

.report-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.report-card h3 {
  font-size: 1.125rem;
  color: var(--headline);
  line-height: 1.3;
  margin: 0;
}
.report-card p {
  color: var(--body);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0;
}
.report-card__cta { margin-top: auto; align-self: flex-start; }

.lead-magnet {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 720px;
  margin-inline: auto;
}
.lead-magnet h3 {
  font-size: 1.25rem;
  color: var(--headline);
  margin-bottom: .5rem;
}
.lead-magnet > p {
  color: var(--body);
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin-bottom: var(--space-4);
}
.lead-magnet__form {
  display: grid;
  gap: 1rem;
}
.lead-magnet__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 600px) { .lead-magnet__row { grid-template-columns: 1fr 1fr; } }
.lead-magnet__form label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--headline);
}
.lead-magnet__form label > span { display: block; margin-bottom: .35rem; }
.lead-magnet__form input[type="text"],
.lead-magnet__form input[type="email"] {
  width: 100%;
  padding: .65rem .9rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  font-family: inherit;
  font-size: 1rem;
}
.lead-magnet__consent {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  font-weight: 500;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--body);
}
.lead-magnet__consent input { margin-top: .2rem; }
.lead-magnet__legal {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}
.lead-magnet__legal a { color: var(--red); text-decoration: underline; }

/* ---------- Insights page: documentary embed ---------- */
.doc-embed {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.doc-embed--placeholder { background: linear-gradient(135deg, var(--navy-900) 0%, #1a3060 100%); }
.doc-embed__poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  color: #fff;
}
.doc-embed__caption {
  font-size: .9375rem;
  text-align: center;
  color: rgba(255,255,255,.7);
  max-width: 32ch;
  line-height: 1.55;
}
.doc-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Process / how we work ---------- */
.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-7);
}
@media (min-width: 700px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .process { grid-template-columns: repeat(4, 1fr); } }

.step {
  padding: var(--space-5);
  border-left: 2px solid var(--red-tint);
}
.step__illus {
  width: 100%;
  max-width: 240px;
  height: auto;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-sm);
}
.step__num {
  font-size: clamp(2.5rem, 3vw, 3rem);
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);
}
.step h3 {
  font-size: var(--fs-lg);
  color: var(--headline);
  margin-bottom: var(--space-3);
}
.step p { color: var(--body); font-size: var(--fs-sm); }

/* ---------- Quote / testimonial ---------- */
.quote {
  background: var(--bg-alt);
  padding-block: var(--space-9);
}
.quote blockquote {
  margin: 0 auto;
  max-width: 780px;
  text-align: center;
  position: relative;
}
.quote__mark {
  display: block;
  font-family: Georgia, serif;
  font-size: 6rem;
  line-height: 1;
  color: var(--red);
  margin-bottom: var(--space-2);
}
.quote p {
  font-size: clamp(1.35rem, 1.5vw + .8rem, 1.75rem);
  font-weight: 700;
  color: var(--headline);
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.quote cite {
  display: block;
  margin-top: var(--space-5);
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 500;
}

/* ---------- Closing CTA band ---------- */
.cta-band {
  padding-block: var(--space-9);
  text-align: center;
  position: relative;
}
.cta-band h2 {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  color: #fff;
  margin-bottom: var(--space-3);
  max-width: 20ch;
  margin-inline: auto;
}
.cta-band__sub { color: #B7C4D9; font-size: var(--fs-md); margin-bottom: var(--space-6); }

/* ---------- Footer ---------- */
.site-footer {
  background: #070D1C;
  color: #8B9BB4;
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--fs-sm);
}
.site-footer a { color: #DCE6F5; }
.site-footer a:hover { color: var(--red); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.footer-brand { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-brand__tagline { font-size: var(--fs-sm); color: #8B9BB4; max-width: 28ch; }
.footer-col h4 { color: #fff; font-size: var(--fs-sm); margin-bottom: var(--space-4); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.footer-col ul li { margin-bottom: var(--space-2); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: #6B7A93;
}

/* ---------- Generic page hero (for inner pages) ---------- */
.page-hero {
  padding-block: clamp(4rem, 7vw, 7rem) clamp(3rem, 5vw, 5rem);
}
.page-hero h1 {
  font-size: clamp(2.25rem, 3vw + 1.5rem, 3.75rem);
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-block: var(--space-3) var(--space-5);
}
.page-hero__sub {
  font-size: clamp(1.05rem, 1vw + .9rem, 1.25rem);
  color: var(--body);
  max-width: 60ch;
}

/* ---------- Contact page ---------- */
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.6fr 1fr !important; }
}
.case-card__tag { display: inline-block; }

/* Details/FAQ open state */
details[open] > summary > span { transform: rotate(45deg); display: inline-block; transition: transform var(--dur) var(--ease); }
details > summary > span { transition: transform var(--dur) var(--ease); display: inline-block; }
details > summary::-webkit-details-marker { display: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   Elementor reconciliation (Level-3 native conversion)

   These rules apply only when Elementor renders our design-system
   classes as native widgets. Our class names live on Elementor's
   Section / Column / Widget wrappers via _css_classes, so most of
   our existing CSS continues to match. The rules below patch the
   places where Elementor's own wrapper divs add spacing or padding
   that fights our design. No visual effect on the static HTML.
   ============================================================ */

/* 1. Zero Elementor's default widget bottom-margin inside our content blocks. */
.hero .elementor-widget,
.hook__lede .elementor-widget,
.meta-banner .elementor-widget,
.meta-banner__copy .elementor-widget,
.pillar-card .elementor-widget,
.case-card .elementor-widget,
.step .elementor-widget,
.stat-card .elementor-widget,
.cta-band .elementor-widget,
.max-prose > .elementor-element > .elementor-widget {
  margin-bottom: 0;
}

/* 2. Re-add the original vertical rhythm via gap on each column's widget-wrap
      (Elementor's column inner is flex by default). */
.hero__copy.elementor-column > .elementor-widget-wrap,
.hook__lede.elementor-column > .elementor-widget-wrap,
.meta-banner__copy .elementor-column > .elementor-widget-wrap,
.pillar-card.elementor-column > .elementor-widget-wrap,
.case-card.elementor-column > .elementor-widget-wrap,
.step.elementor-column > .elementor-widget-wrap,
.stat-card .elementor-column > .elementor-widget-wrap,
.cta-band .elementor-column > .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 3. Strip Elementor's column padding from cards; we'll re-add via our own card padding. */
.pillar-card.elementor-column,
.case-card.elementor-column,
.step.elementor-column,
.stat-card .elementor-column {
  padding: 0;
}
.pillar-card.elementor-column > .elementor-widget-wrap,
.case-card.elementor-column > .elementor-widget-wrap {
  padding: var(--space-6);
}

/* 4. The Heading widget renders <h*/<div> directly with our class; ensure inline-block
      eyebrows remain inline-block (the wrapper divs are block, but the inner element
      keeps display:inline-block from our .eyebrow rule). */
.elementor-widget-heading.eyebrow .elementor-heading-title,
.elementor-widget-heading .elementor-heading-title.eyebrow {
  display: inline-block;
}

/* 5. Text Editor: collapse the wrapper margins so paragraph spacing matches the HTML. */
.elementor-widget-text-editor .elementor-widget-container > *:last-child {
  margin-bottom: 0;
}

/* 6. Push the case-card / pillar-card link to the bottom (our original CSS used
      margin-top:auto on the <a>; that still works because the <a> is inside the
      Text Editor's widget, which is a flex child of the wrap). */
.pillar-card .elementor-widget-text-editor:last-child,
.case-card .elementor-widget-text-editor:last-child {
  margin-top: auto;
}

/* 7. The hero asymmetric layout: Elementor sets column widths from our JSON (55/45);
      vertical alignment needs to be center to match the original hero__grid align. */
.hero.elementor-section > .elementor-container {
  align-items: center;
}

/* 8. Column widths — Elementor 4.x does not ship .elementor-col-XX rules in
      frontend.min.css and only generates them per-page when saved inside the
      visual editor. Since we push _elementor_data via REST API, supply them
      ourselves so multi-column layouts render at the correct percentages. */
.elementor-col-20  { width: 20%;     }
.elementor-col-25  { width: 25%;     }
.elementor-col-33  { width: 33.333%; }
.elementor-col-34  { width: 33.333%; }
.elementor-col-45  { width: 45%;     }
.elementor-col-50  { width: 50%;     }
.elementor-col-55  { width: 55%;     }
.elementor-col-66  { width: 66.666%; }
.elementor-col-100 { width: 100%;    }

/* End Elementor reconciliation. */