@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-semibold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-extrabold.woff2') format('woff2');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-light.woff2') format('woff2');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-semibold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg-dark: #071116;
  --bg-navy: #0B1F26;
  --bg-panel: #102A33;
  --bg-light: #F7FAFA;
  --bg-white: #FFFFFF;

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --text-white: #FFFFFF;
  /* Body/supporting copy on dark heroes, cards, CTAs — WCAG AA+ on navy/dark */
  --text-on-dark: #C5D0DC;
  --text-on-dark-soft: #A8B8C8;

  --brand-teal: #179B9E;
  --brand-orange: #F27B36;

  --border-light: #DDE7E7;
  --border-dark: #1F3A42;

  --font-heading: 'Poppins', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;
  
  --max-width: 1200px;
  --header-height: 80px;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --border-radius: 12px;
  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --box-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);

  /* Fallback/Alias Variables used in page-specific styles */
  --accent-blue: var(--brand-teal);
  --accent-light-blue: #1ca5a8;
  --accent-glow: rgba(23, 155, 158, 0.12);
  --primary-navy: var(--bg-navy);
  --primary-orange: var(--brand-orange);
  --text-dark: var(--text-primary);
  --border-color: var(--border-light);
}

/* Reset & Global */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  font-synthesis: none;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-light);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--bg-navy);
  font-weight: 600;
  line-height: 1.25;
}

h1 {
  font-size: 3rem;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  h1 {
    font-size: 2.25rem;
  }
}

h2 {
  font-size: 2.25rem;
  margin-bottom: 1rem;
  position: relative;
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

p {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}

/* Shared Layout Containers */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

.section {
  padding: 6rem 0;
  position: relative;
  background-color: var(--bg-white);
}

.section-alt {
  background-color: var(--bg-light);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

/* Header & Navigation */
header {
  height: var(--header-height);
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  transition: var(--transition-smooth);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
}

.logo img {
  height: 40px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: var(--transition-smooth);
  position: relative;
  padding: 0.25rem 0;
}

.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--brand-teal);
  transition: var(--transition-smooth);
}

.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta).active {
  color: var(--brand-teal);
}

.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta).active::after {
  width: 100%;
}

.nav-links a.disabled,
.nav-links a.nav-disabled {
  color: #94A3B8 !important;
  opacity: 0.6;
  cursor: not-allowed !important;
  pointer-events: none;
}
.nav-links a.disabled::after,
.nav-links a.nav-disabled::after {
  display: none !important;
}

/* Mobile Menu Button */
.menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--bg-navy);
  margin: 5px 0;
  transition: var(--transition-smooth);
}

@media (max-width: 992px) {
  .menu-btn {
    display: block;
  }
  
  .nav-links {
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background-color: var(--bg-white);
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
    border-bottom: 1px solid var(--border-light);
    transform: translateY(-120%);
    opacity: 0;
    transition: var(--transition-smooth);
    pointer-events: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  }
  
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  /* Body scroll lock while mobile nav is open (class set from app.js).
     Applied on html + body so sticky header stays in viewport. */
  html.menu-open,
  html.menu-open body,
  body.menu-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .nav-links .nav-cta {
    margin-left: 0 !important;
    width: 100%;
    margin-top: 0.5rem;
    box-sizing: border-box;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition-smooth);
  border: 1px solid transparent;
  gap: 0.5rem;
}

.btn-primary {
  background-color: var(--brand-orange);
  color: var(--bg-white);
}

.btn-primary:hover {
  background-color: #d96520;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(242, 123, 54, 0.25);
}

.btn-secondary {
  background-color: transparent;
  color: var(--brand-teal);
  border: 1.5px solid var(--brand-teal);
}

.btn-secondary:hover {
  background-color: rgba(23, 155, 158, 0.05);
  transform: translateY(-2px);
}

.btn-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Hero Section Style */
.hero {
  padding: 8rem 0 6rem;
  background: radial-gradient(circle at 80% 20%, rgba(23, 155, 158, 0.08) 0%, transparent 60%), var(--bg-dark);
  border-bottom: 1px solid var(--border-dark);
  color: var(--text-white);
}

.hero h1 {
  color: var(--text-white);
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.15;
}

.hero .subheadline {
  color: var(--text-on-dark);
  font-size: 1.25rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.hero .btn-secondary {
  color: var(--text-white);
  border-color: var(--border-dark);
}

.hero .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--border-light);
}

@media (max-width: 768px) {
  .hero {
    padding: 5rem 0 4rem;
  }
  .hero h1 {
    font-size: 2.5rem;
  }
  .hero .subheadline {
    font-size: 1.1rem;
  }
}

/* Home hero — two-column photo card over full-bleed ambient video */
.hero-home {
  /* Tighten Home hero breathing room while keeping the two-column composition. */
  padding: 4rem 0 3rem;
  text-align: left;
}

/* Desktop (≥901px): smaller title + subtitle; larger image column; MR !8 bottom caption */
@media (min-width: 901px) {
  /* Top-align copy with hero photo (Diane annotation) — desktop only */
  .home-page .hero-home-grid {
    align-items: start;
  }

  .hero-home h1 {
    font-size: 2.65rem;
    margin-bottom: 1.15rem;
  }

  .hero-home .subheadline {
    font-size: 1.05rem;
    line-height: 1.65;
    margin-bottom: 2rem;
  }
}

.hero-home-grid {
  display: grid;
  /* ~35/65 copy/image — enlarge photo vs text (annotation #2) */
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.35fr);
  gap: 2rem 2.25rem;
  align-items: center;
}

.hero-home-copy {
  max-width: 30rem;
}

.hero-home-copy .btn-group {
  justify-content: flex-start;
}

.hero-home-media {
  position: relative;
  margin: 0;
  width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.hero-home-image-wrap {
  position: relative;
  width: 100%;
  /* Match source 1254×941 (~4:3); exact ratio avoids cover crop */
  aspect-ratio: 1254 / 941;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-navy);
}

.hero-home-image-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-home-image {
  display: block;
  width: 100%;
  height: 100%;
  /* Frame matches source ratio — cover shows full frame without squashing */
  object-fit: cover;
  object-position: 50% 50%;
}

/* Desktop: bottom-band overlay caption (MR !8 / annotation #3 — no redesign) */
.hero-home-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 2.25rem 1.35rem 1.15rem;
  background: linear-gradient(
    to top,
    rgba(7, 17, 22, 0.72) 0%,
    rgba(7, 17, 22, 0.35) 55%,
    rgba(7, 17, 22, 0) 100%
  );
  color: var(--text-white);
  pointer-events: none;
}

.hero-home-caption-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-white);
}

.hero-home-caption-sub {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
  color: #CBD5E1;
}

/* Full-bleed video ambience behind photo card (scoped to home hero) */
.home-page .hero-home--bleed,
.hero-home.hero-home--bleed {
  position: relative;
  overflow: hidden;
  background: #071116;
  isolation: isolate;
}

.home-page .hero-home-bleed-video,
.hero-home-bleed-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 78%;
  z-index: 0;
  pointer-events: none;
}

.home-page .hero-home--bleed > .container,
.hero-home--bleed > .container {
  position: relative;
  z-index: 1;
}

.home-page .hero-home--bleed .hero-home-copy,
.hero-home--bleed .hero-home-copy {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65);
}

/* Keep original photo card visible on top of the ambient video */
.home-page .hero-home--bleed .hero-home-media,
.hero-home--bleed .hero-home-media {
  background: var(--bg-navy);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  border: none;
  overflow: hidden;
}

.home-page .hero-home--bleed .hero-home-image-wrap,
.hero-home--bleed .hero-home-image-wrap {
  display: block;
}

.home-page .hero-home--bleed .hero-home-caption,
.hero-home--bleed .hero-home-caption {
  /* Same overlay treatment as pre-!97 photo card */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.25rem 1.35rem 1.15rem;
  background: linear-gradient(
    to top,
    rgba(7, 17, 22, 0.72) 0%,
    rgba(7, 17, 22, 0.35) 55%,
    rgba(7, 17, 22, 0) 100%
  );
  text-align: left;
  text-shadow: none;
}

@media (max-width: 900px) {
  .hero-home {
    padding: 4.5rem 0 3rem;
    text-align: left;
  }

  .hero-home-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .hero-home-copy {
    max-width: none;
  }

  .hero-home-copy .btn-group {
    justify-content: flex-start;
  }

  /* Mobile: 4:3 image after copy; caption below as text; photo on top of video bg */
  .hero-home-media {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
  }

  /* Home mobile: same 1254×941 celebration frame as desktop (not square) */
  .home-page .hero-home-image-wrap,
  .hero-home-image-wrap {
    aspect-ratio: 1254 / 941;
    min-height: 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  }

  .home-page .hero-home-image,
  .hero-home-image {
    /* Matching frame + cover = full source visible, centered */
    object-position: 50% 50%;
  }

  .hero-home-caption {
    position: static;
    padding: 0;
    background: none;
    pointer-events: auto;
  }

  .home-page .hero-home--bleed .hero-home-media,
  .hero-home--bleed .hero-home-media {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .home-page .hero-home--bleed .hero-home-caption,
  .hero-home--bleed .hero-home-caption {
    position: static;
    padding: 0;
    background: none;
    text-align: left;
    margin-top: 0;
    pointer-events: auto;
  }

  .hero-home-caption-title {
    font-size: 1.05rem;
    color: var(--text-white);
  }

  .hero-home-caption-sub {
    font-size: 0.9rem;
    color: var(--text-on-dark);
  }
}

/* Platform hero — opening collage after heading/intro */
.hero-platform {
  padding: 5rem 0 3.5rem;
  text-align: left;
}

.hero-platform-copy {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.hero-platform h1 {
  font-size: 2.75rem;
  margin-bottom: 1rem;
  color: var(--text-white);
}

.hero-platform .subheadline {
  font-size: 1.2rem;
  color: var(--text-on-dark);
  margin-bottom: 0;
  line-height: 1.65;
}


.hero-platform-media {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.hero-platform-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--bg-navy);
}

.hero-platform-image-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-platform-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Desktop: low bottom gradient so four business scenes stay visible */
.hero-platform-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  padding: 2.5rem 1.35rem 1.1rem;
  background: linear-gradient(
    to top,
    rgba(7, 17, 22, 0.68) 0%,
    rgba(7, 17, 22, 0.28) 55%,
    rgba(7, 17, 22, 0) 100%
  );
  color: var(--text-white);
  pointer-events: none;
  text-align: left;
}

.hero-platform-caption-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-white);
}

.hero-platform-caption-sub {
  display: block;
  margin-top: 0.25rem;
  max-width: 36rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
  color: #CBD5E1;
}

.hero-platform-caption-title--mobile,
.hero-platform-caption-sub--mobile {
  display: none;
}

@media (max-width: 900px) {
  .hero-platform {
    padding: 4.5rem 0 2.75rem;
  }

  .hero-platform-copy {
    max-width: none;
    margin-bottom: 1.5rem;
  }

  .hero-platform h1 {
    font-size: 2.15rem;
  }

  .hero-platform .subheadline {
    font-size: 1.05rem;
  }

  .hero-platform-media {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
  }

  .hero-platform-image-wrap {
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  }

  .hero-platform-image {
    object-position: 50% 50%;
  }

  /* Mobile: caption below 16:9 collage (not overlaid) */
  .hero-platform-caption {
    position: static;
    padding: 0;
    background: none;
    pointer-events: auto;
  }

  .hero-platform-caption-title--desktop,
  .hero-platform-caption-sub--desktop {
    display: none;
  }

  .hero-platform-caption-title--mobile {
    display: block;
    font-size: 1.05rem;
    color: var(--text-white);
  }

  .hero-platform-caption-sub--mobile {
    display: block;
    max-width: none;
    font-size: 0.9rem;
    color: var(--text-on-dark);
  }
}

/* Solutions hero — opening workflow image after heading/intro */
.hero-solutions {
  padding: 5rem 0 3.5rem;
  text-align: left;
}

.hero-solutions-copy {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.hero-solutions h1 {
  font-size: 2.75rem;
  margin-bottom: 1rem;
  color: var(--text-white);
}

.hero-solutions .subheadline {
  font-size: 1.2rem;
  color: var(--text-on-dark);
  margin-bottom: 0;
  line-height: 1.65;
}


.hero-solutions-media {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.hero-solutions-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--bg-navy);
}

.hero-solutions-image-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-solutions-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* Desktop: restrained bottom-left gradient — keep faces, Agentic AI, Human Review, arrows clear */
.hero-solutions-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  max-width: min(26rem, 58%);
  padding: 2.25rem 1.35rem 1.05rem;
  background: linear-gradient(
    to top right,
    rgba(7, 17, 22, 0.72) 0%,
    rgba(7, 17, 22, 0.42) 42%,
    rgba(7, 17, 22, 0.12) 72%,
    rgba(7, 17, 22, 0) 100%
  );
  color: var(--text-white);
  pointer-events: none;
  text-align: left;
}

.hero-solutions-caption-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-white);
}

.hero-solutions-caption-sub {
  display: block;
  margin-top: 0.25rem;
  max-width: 24rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
  color: #CBD5E1;
}

.hero-solutions-caption-title--mobile,
.hero-solutions-caption-sub--mobile {
  display: none;
}

@media (max-width: 900px) {
  .hero-solutions {
    padding: 4.5rem 0 2.75rem;
  }

  .hero-solutions-copy {
    max-width: none;
    margin-bottom: 1.5rem;
  }

  .hero-solutions h1 {
    font-size: 2.15rem;
  }

  .hero-solutions .subheadline {
    font-size: 1.05rem;
  }

  .hero-solutions-media {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
  }

  .hero-solutions-image-wrap {
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  }

  .hero-solutions-image {
    object-position: 50% 45%;
  }

  /* Mobile: caption below 16:9 image (not overlaid) */
  .hero-solutions-caption {
    position: static;
    max-width: none;
    padding: 0;
    background: none;
    pointer-events: auto;
  }

  .hero-solutions-caption-title--desktop,
  .hero-solutions-caption-sub--desktop {
    display: none;
  }

  .hero-solutions-caption-title--mobile {
    display: block;
    font-size: 1.05rem;
    color: var(--text-white);
  }

  .hero-solutions-caption-sub--mobile {
    display: block;
    max-width: none;
    font-size: 0.9rem;
    color: var(--text-on-dark);
  }
}

/* Advisors hero — opening presentation image after heading/intro */
.hero-advisors {
  padding: 5rem 0 3.5rem;
  text-align: left;
}

.hero-advisors-copy {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.hero-advisors h1 {
  font-size: 2.75rem;
  margin-bottom: 1rem;
  color: var(--text-white);
}

.hero-advisors .subheadline {
  font-size: 1.2rem;
  color: var(--text-on-dark);
  margin-bottom: 0;
  line-height: 1.65;
}

.hero-advisors-media {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.hero-advisors-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--bg-navy);
}

.hero-advisors-image-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-advisors-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep speaker, gestures and Sell Outcomes screen clear of left caption */
  object-position: 58% 42%;
}

/* Desktop: restrained bottom-left gradient — avoid speaker face/gestures, audience, screen message */
.hero-advisors-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  max-width: min(24rem, 40%);
  padding: 2.1rem 1.25rem 1rem;
  background: linear-gradient(
    to top right,
    rgba(7, 17, 22, 0.70) 0%,
    rgba(7, 17, 22, 0.38) 40%,
    rgba(7, 17, 22, 0.10) 70%,
    rgba(7, 17, 22, 0) 100%
  );
  color: var(--text-white);
  pointer-events: none;
  text-align: left;
}

.hero-advisors-caption-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-white);
}

.hero-advisors-caption-sub {
  display: block;
  margin-top: 0.25rem;
  max-width: 22rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
  color: #CBD5E1;
}

.hero-advisors-caption-title--mobile,
.hero-advisors-caption-sub--mobile {
  display: none;
}

@media (max-width: 900px) {
  .hero-advisors {
    padding: 4.5rem 0 2.75rem;
  }

  .hero-advisors-copy {
    max-width: none;
    margin-bottom: 1.5rem;
  }

  .hero-advisors h1 {
    font-size: 2.15rem;
  }

  .hero-advisors .subheadline {
    font-size: 1.05rem;
  }

  .hero-advisors-media {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
  }

  /* Mobile asset is 16:9 — preserve the supplied speaker-and-screen crop */
  .hero-advisors-image-wrap {
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  }

  .hero-advisors-image {
    object-position: 50% 45%;
  }

  /* Mobile: caption below the image (not overlaid) */
  .hero-advisors-caption {
    position: static;
    max-width: none;
    padding: 0;
    background: none;
    pointer-events: auto;
  }

  .hero-advisors-caption-title--desktop,
  .hero-advisors-caption-sub--desktop {
    display: none;
  }

  .hero-advisors-caption-title--mobile {
    display: block;
    font-size: 1.05rem;
    color: var(--text-white);
  }

  .hero-advisors-caption-sub--mobile {
    display: block;
    max-width: none;
    font-size: 0.9rem;
    color: var(--text-on-dark);
  }
}

/* Pricing checklist — desktop content-width 4:1 KV; mobile keeps full-bleed asset */
.hero-pricing {
  overflow-x: clip;
}

.hero-pricing-copy {
  margin-bottom: 0;
}

.pricing-checklist {
  margin: 2rem 0 0;
  padding: 0;
}

/* Desktop: sit in normal .container width like other page heroes (not 100vw bleed) */
.pricing-checklist-bleed {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
  background: #e8dfd0;
  line-height: 0;
}

.pricing-checklist-bleed picture {
  display: block;
  width: 100%;
}

.pricing-checklist-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
  object-fit: cover;
  object-position: center center;
}

.pricing-checklist-caption {
  margin: 1.15rem 0 0;
  padding: 0;
}

.pricing-checklist-caption-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text-white);
}

.pricing-checklist-caption-sub {
  display: block;
  margin-top: 0.35rem;
  max-width: 42rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-on-dark);
}

@media (max-width: 900px) {
  .pricing-checklist {
    margin-top: 1.5rem;
  }

  /* Mobile: restore full-bleed treatment as on main (existing asset unchanged) */
  .pricing-checklist > .container.pricing-checklist-frame {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .pricing-checklist-bleed {
    /* Avoid double horizontal scroll with 100vw on some mobile browsers */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .pricing-checklist-image {
    /* Keep original 1280×426 (~3:1) full width — no fixed-height/cover crop */
    aspect-ratio: 1280 / 426;
    height: auto;
    object-fit: contain;
    object-position: center center;
  }

  .pricing-checklist-caption {
    margin-top: 0.9rem;
  }

  .pricing-checklist-caption-title {
    font-size: 1.05rem;
  }

  .pricing-checklist-caption-sub {
    max-width: none;
    font-size: 0.9rem;
  }
}

/* DIANE logo hero — operating model intro (no human image) */
/* Desktop: title + intro left; logo centered in gap to the right. Mobile: logo stacked above title. */
.hero-diane {
  padding: 5rem 0;
  text-align: left;
}

.hero-diane-logo-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-width: 40rem;
}

.hero-diane-logo {
  display: block;
  width: auto;
  max-width: 220px;
  height: auto;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.hero-diane-copy {
  min-width: 0;
}

.hero-diane h1 {
  font-size: 2.75rem;
  margin-bottom: 1.5rem;
  color: var(--text-white);
}

.hero-diane .subheadline {
  font-size: 1.25rem;
  color: var(--text-on-dark);
  margin-bottom: 0;
  line-height: 1.6;
}

@media (min-width: 901px) {
  .hero-diane-logo-stack {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 2.5rem 3rem;
    max-width: none;
  }

  .hero-diane-copy {
    order: 1;
    flex: 0 1 38rem;
    max-width: 38rem;
  }

  .hero-diane-logo {
    order: 2;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 240px;
  }
}

@media (max-width: 900px) {
  .hero-diane {
    padding: 4rem 0 3rem;
  }

  .hero-diane-logo {
    max-width: 180px;
    margin-bottom: 1.25rem;
  }

  .hero-diane h1 {
    font-size: 2.1rem;
    margin-bottom: 1.1rem;
  }

  .hero-diane .subheadline {
    font-size: 1.05rem;
  }
}

/* DIANE before/after comparison cards — side-by-side desktop, stacked mobile */
.diane-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .diane-compare-grid {
    grid-template-columns: 1fr;
  }
}

/* DIANE practice image — after Framework E cards, before Phased Approach */
.diane-practice {
  padding-top: 0;
}

/* Keep the practice image visually connected to the framework cards. */
.section.diane-framework-section {
  padding-bottom: 2.5rem;
}

.diane-practice-media {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}

.diane-practice-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-navy);
}

.diane-practice-image-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

.diane-practice-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep facilitator + whiteboard labels visible; caption band stays low */
  object-position: 52% 42%;
}

/* Desktop: in-image caption — lower gradient band only (not over face/whiteboard) */
.diane-practice-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  max-width: min(24rem, 55%);
  padding: 2.25rem 1.35rem 1.15rem 1.35rem;
  background: linear-gradient(
    to top,
    rgba(7, 17, 22, 0.72) 0%,
    rgba(7, 17, 22, 0.34) 55%,
    rgba(7, 17, 22, 0) 100%
  );
  color: var(--text-white);
  pointer-events: none;
  text-align: left;
}

.diane-practice-caption-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-white);
}

.diane-practice-caption-sub {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.45;
  color: #CBD5E1;
}

.diane-practice-caption-sub--mobile {
  display: none;
}

@media (max-width: 900px) {
  .section.diane-practice {
    padding-top: 0 !important;
  }

  .section.diane-framework-section {
    padding-bottom: 1.75rem !important;
  }

  .diane-practice-media {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
  }

  .diane-practice-image-wrap {
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  }

  .diane-practice-image {
    object-position: 50% 50%;
  }

  /* Mobile: caption below image (not overlaid) */
  .diane-practice-caption {
    position: static;
    max-width: none;
    padding: 0.15rem 0 0;
    background: none;
    pointer-events: auto;
  }

  .diane-practice-caption-title {
    color: var(--bg-navy);
    font-size: 1.05rem;
  }

  .diane-practice-caption-sub {
    color: var(--text-muted);
    font-size: 0.9rem;
  }

  .diane-practice-caption-sub--desktop {
    display: none;
  }

  .diane-practice-caption-sub--mobile {
    display: block;
  }
}



/* Cards & Grid Utilities */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 992px) {
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Advisors: Wisdom Bridge diagram */
.wisdom-bridge {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 2rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.wisdom-bridge-step {
  flex: 1;
  min-width: 0;
  padding: 1.25rem 0.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wisdom-bridge-step + .wisdom-bridge-join + .wisdom-bridge-step,
.wisdom-bridge-join + .wisdom-bridge-step {
  border-left: 1px solid var(--border-light);
}

.wisdom-bridge-step:first-child {
  border-right: 1px solid var(--border-light);
}

.wisdom-bridge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  color: var(--brand-teal);
}

.wisdom-bridge-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--bg-navy);
  line-height: 1.3;
}

.wisdom-bridge-join {
  padding: 0.75rem 0.5rem;
  background: rgba(23, 155, 158, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wisdom-bridge-join-mark {
  font-size: 1rem;
  color: var(--brand-teal);
  font-weight: 800;
  line-height: 1;
}

.wisdom-bridge-join-text {
  font-size: 0.7rem;
  color: var(--brand-teal);
  font-weight: 700;
}

.wisdom-bridge-arrow {
  padding: 0 0.35rem;
  color: var(--brand-teal);
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wisdom-bridge-result {
  background: var(--brand-teal);
}

.wisdom-bridge-result .wisdom-bridge-icon {
  color: white;
}

.wisdom-bridge-result .wisdom-bridge-label {
  color: white;
}

.advisor-quote-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  border-left: 4px solid var(--brand-teal);
  box-sizing: border-box;
  max-width: 100%;
}

.advisor-quote-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 1rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.advisor-quote-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.advisor-quote-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-navy);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.advisor-quote-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bg-navy);
}

.advisor-quote-role {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Homepage: Introducing DIANE pillar strip */
.diane-pillar-strip-wrap {
  width: 100%;
  max-width: 100%;
}

.diane-pillar-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.diane-pillar-card {
  flex: 1;
  min-width: 0;
  padding: 2rem 1.5rem 2.75rem;
  background: var(--bg-white);
  border-right: 1px solid var(--border-light);
  position: relative;
  box-sizing: border-box;
}

.diane-pillar-card-alt {
  background: rgba(23, 155, 158, 0.04);
}

.diane-pillar-card-last {
  border-right: none;
}

.diane-pillar-kicker {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-teal);
  margin-bottom: 0.75rem;
}

.diane-pillar-icon {
  width: 44px;
  height: 44px;
  background: rgba(23, 155, 158, 0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
  color: var(--brand-teal);
}

.diane-pillar-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--bg-navy);
  margin-bottom: 0.5rem;
}

.diane-pillar-copy {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.diane-pillar-arrow {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  color: var(--border-light);
  line-height: 1;
}

@media (max-width: 768px) {
  .diane-pillar-strip {
    flex-direction: column;
  }

  .diane-pillar-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    padding: 1.1rem 1.15rem 1.6rem;
  }

  .diane-pillar-card-last {
    border-bottom: none;
  }

  .diane-pillar-kicker {
    grid-column: 1 / -1;
    margin-bottom: 0.55rem;
  }

  .diane-pillar-icon {
    margin-bottom: 0;
    width: 38px;
    height: 38px;
  }

  .diane-pillar-icon svg {
    width: 18px;
    height: 18px;
  }

  .diane-pillar-title {
    align-self: center;
    margin-bottom: 0;
  }

  .diane-pillar-copy {
    grid-column: 1 / -1;
    margin-top: 0.55rem;
  }

  /* E card list (and any extra block after icon+title) must span full card width —
     otherwise auto-placement keeps it in the narrow icon column. */
  .diane-e-dimensions,
  .diane-pillar-card > ul,
  .diane-e-card > *:not(.diane-pillar-icon):not(.diane-pillar-title):not(.diane-pillar-kicker):not(.diane-pillar-arrow) {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .diane-pillar-arrow {
    right: 50%;
    bottom: 0.55rem;
    transform: translateX(50%) rotate(90deg);
  }
}

@media (max-width: 768px) {
  .advisor-experience-grid {
    gap: 2rem !important;
  }

  .advisor-experience-photo {
    overflow: visible;
  }

  .advisor-experience-photo img {
    height: 260px !important;
  }

  .advisor-experience-badge {
    right: 0.75rem !important;
    bottom: -0.75rem !important;
    padding: 0.75rem 1rem !important;
  }

  .advisor-experience-copy {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .wisdom-bridge {
    flex-direction: column;
    align-items: stretch;
  }

  .wisdom-bridge-step,
  .wisdom-bridge-join,
  .wisdom-bridge-result,
  .wisdom-bridge-arrow {
    width: 100%;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-light) !important;
    padding: 0.9rem 1rem;
  }

  .wisdom-bridge-result {
    border-bottom: none !important;
  }

  .wisdom-bridge-arrow {
    padding: 0.35rem 0;
    transform: rotate(90deg);
    border: none !important;
    width: auto;
    align-self: center;
  }

  .wisdom-bridge-label {
    font-size: 0.85rem;
  }

  .advisor-quote-card {
    padding: 1.15rem 1rem;
  }
}

/* Common Card Styles */
.card {
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 2.5rem 2rem;
  transition: var(--transition-smooth);
  box-shadow: var(--box-shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--box-shadow-hover);
  border-color: rgba(23, 155, 158, 0.3);
}

.card-icon {
  width: 50px;
  height: 50px;
  background-color: rgba(23, 155, 158, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-teal);
  margin-bottom: 1.5rem;
}

.card-icon svg {
  width: 24px;
  height: 24px;
}

.card h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.card p {
  font-size: 0.95rem;
  margin-bottom: 0;
  flex-grow: 1;
}

/* Section Headers */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}

.section-header h2 {
  margin-bottom: 1rem;
}

.section-header p {
  font-size: 1.1rem;
  color: var(--text-muted);
}

/* Call to Action Banner */
.cta-banner {
  background-color: var(--bg-dark);
  color: var(--text-white);
  padding: 5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border-dark);
}

.cta-banner h2 {
  color: var(--text-white);
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.cta-banner p {
  color: var(--text-on-dark);
  max-width: 600px;
  margin: 0 auto 2.5rem;
  font-size: 1.1rem;
}

.cta-banner .btn-secondary {
  background-color: transparent;
  color: var(--text-white);
  border-color: var(--border-dark);
}

.cta-banner .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--border-light);
}

/* Footer styling */
footer {
  background-color: var(--bg-dark);
  color: #E2E8F0;
  padding: 4rem 0 2rem;
  border-top: 1px solid var(--border-dark);
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.footer-brand h3 {
  color: var(--text-white);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.footer-brand h3 span {
  color: var(--brand-teal);
}

.footer-brand p {
  color: var(--text-on-dark-soft);
  font-size: 0.95rem;
}

.footer-links h4 {
  color: var(--text-white);
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}


.footer-links ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  color: var(--text-on-dark-soft);
  font-size: 0.95rem;
  transition: var(--transition-smooth);
}

.footer-links a:hover {
  color: var(--brand-teal);
  padding-left: 4px;
}

.footer-bottom {
  border-top: 1px solid var(--border-dark);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--text-on-dark-soft);
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
}

.footer-legal a {
  color: var(--text-on-dark-soft);
  transition: var(--transition-smooth);
}

.footer-legal a:hover {
  color: var(--brand-teal);
}

/* Specific Page Elements styling */

/* Pillars Grid (DIANE Page & Home Page) */
.pillar-card {
  border-left: 4px solid var(--brand-teal);
}

.pillar-number {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
  color: rgba(23, 155, 158, 0.15);
  margin-bottom: 0.5rem;
  line-height: 1;
}

/* Forms styling */
.form-container {
  max-width: 600px;
  margin: 0 auto;
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 3rem;
  box-shadow: var(--box-shadow);
}

@media (max-width: 576px) {
  .form-container {
    padding: 1.5rem;
  }
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--bg-navy);
  font-size: 0.95rem;
}

.form-control {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background-color: var(--bg-light);
  color: var(--text-primary);
  transition: var(--transition-smooth);
}

.form-control:focus {
  outline: none;
  border-color: var(--brand-teal);
  background-color: var(--bg-white);
  box-shadow: 0 0 0 4px rgba(23, 155, 158, 0.08);
}

.textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

/* Platform capability sections (tabs removed — all visible) */
.platform-capability {
  display: block;
  margin-bottom: 3.5rem;
}

.platform-capability:last-child {
  margin-bottom: 0;
}

/* Platform DIANE capability — title → full-width image → body stack */

/* Platform — retailers engaged collage between Customer Learning and CTA */
.platform-retailers-banner-section {
  padding-top: 0;
  padding-bottom: 0;
}

.platform-retailers-banner {
  margin: 0;
  width: 100%;
}

.platform-retailers-banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-light);
  box-shadow: var(--box-shadow);
  background: var(--bg-white);
}

@media (max-width: 640px) {
  .platform-retailers-banner-section {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

.platform-diane-stack-title,
.platform-retail-stack-title,
.platform-bi-stack-title,
.platform-hub-stack-title {
  font-size: 1.75rem;
  color: var(--bg-navy);
  margin: 0 0 1.25rem;
}

.platform-diane-figure,
.platform-retail-figure,
.platform-bi-figure,
.platform-hub-figure {
  margin: 0 0 1.75rem;
  width: 100%;
}

.platform-diane-figure-img,
.platform-retail-figure-img,
.platform-bi-figure-img,
.platform-hub-figure-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-light);
  box-shadow: var(--box-shadow);
  background: var(--bg-white);
}

.platform-diane-body .status-support,
.platform-retail-body .status-support,
.platform-bi-body .status-support,
.platform-hub-body .status-support {
  margin-bottom: 0.85rem;
}

.platform-diane-body > p,
.platform-retail-body > p,
.platform-bi-body > p,
.platform-hub-body > p {
  margin-bottom: 0.85rem;
}

.platform-diane-bullets,
.platform-retail-bullets,
.platform-bi-bullets,
.platform-hub-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
  font-size: 0.95rem;
  list-style: none;
  padding: 0;
}

.platform-diane-bullets li,
.platform-retail-bullets li,
.platform-bi-bullets li,
.platform-hub-bullets li {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.platform-diane-bullets svg,
.platform-retail-bullets svg,
.platform-bi-bullets svg,
.platform-hub-bullets svg {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .platform-diane-stack-title,
  .platform-retail-stack-title,
  .platform-bi-stack-title,
  .platform-hub-stack-title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }

  .platform-diane-figure,
  .platform-retail-figure,
  .platform-bi-figure,
  .platform-hub-figure {
    margin-bottom: 1.25rem;
  }
}


.platform-retail-bullets-top {
  align-items: flex-start;
}

.platform-retail-bullets-top svg {
  margin-top: 2px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}







/* Pricing Switcher/Cards */
.pricing-card {
  position: relative;
  overflow: hidden;
}

.pricing-card.featured {
  border-top: 4px solid var(--accent-blue);
  box-shadow: var(--box-shadow-hover);
}

.pricing-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: var(--accent-glow);
  color: var(--accent-blue);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  text-transform: uppercase;
}

.price {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--primary-navy);
  margin: 1.5rem 0;
}

.price span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 2rem 0;
  text-align: left;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--text-dark);
}

.pricing-features svg {
  color: var(--accent-blue);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Knowledge Cards */
.article-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.article-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.article-card h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  line-height: 1.35;
}

.article-card h3 a:hover {
  color: var(--accent-blue);
}

.article-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-blue);
  gap: 0.25rem;
  transition: var(--transition-smooth);
}

.article-link:hover {
  color: var(--accent-light-blue);
}

.article-link:hover svg {
  transform: translateX(3px);
}

.article-link svg {
  width: 16px;
  height: 16px;
  transition: var(--transition-smooth);
}

/* Solutions Subheading navigation */
.solutions-nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
}

.solutions-nav-link {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-smooth);
  border-bottom: 3px solid transparent;
  padding-bottom: 0.75rem;
  margin-bottom: -1.2rem;
}

.solutions-nav-link.active,
.solutions-nav-link:hover {
  color: var(--accent-blue);
  border-bottom-color: var(--accent-blue);
}

/* Contact hero — left copy / right human-welcome image (feat/contact-human-welcome-image) */
.hero-contact {
  padding: 5rem 0 3.5rem;
  text-align: left;
}

.hero-contact-grid {
  display: grid;
  /* ~42/58 copy/image — brief 40–45% / 55–60% */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2rem 2.5rem;
  align-items: center;
}

.hero-contact-copy {
  max-width: 28rem;
}

/* Match .hero h1 specificity (0,1,1) so contact title can override the 3.5rem default */
.hero-contact h1,
.hero-contact .hero-contact-title {
  font-size: 2.55rem;
  margin-bottom: 1.1rem;
  color: var(--text-white);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Desktop: match the standard page hero title scale while keeping the copy top-aligned. */
@media (min-width: 901px) {
  .hero-contact h1,
  .hero-contact .hero-contact-title {
    font-size: 2.75rem;
    line-height: 1.15;
    margin-bottom: 1.1rem;
    max-width: 20em; /* balanced 2-line wrap for approved headline */
  }

  .hero-contact .hero-contact-caption-inline {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
  }
}

.hero-contact-lede--mobile {
  display: none;
}

.hero-contact .subheadline,
.hero-contact-lede {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--text-on-dark);
  margin-bottom: 1.25rem;
}

.hero-contact-caption-inline {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text-white);
}

.hero-contact-media {
  position: relative;
  margin: 0;
  width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.hero-contact-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 18rem;
  overflow: hidden;
  background: var(--bg-navy);
}

.hero-contact-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep the woman on the right; preserve open left space on desktop */
  object-position: 62% center;
}

@media (max-width: 900px) {
  .hero-contact {
    padding: 4.25rem 0 2.5rem;
  }

  .hero-contact-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hero-contact-copy {
    max-width: none;
  }

  .hero-contact h1,
  .hero-contact .hero-contact-title {
    font-size: 2.15rem;
    margin-bottom: 0.85rem;
  }

  .hero-contact-lede--desktop {
    display: none;
  }

  .hero-contact-lede--mobile {
    display: block;
  }

  .hero-contact .subheadline,
  .hero-contact-lede {
    font-size: 1.02rem;
    margin-bottom: 0.85rem;
  }

  .hero-contact-caption-inline {
    font-size: 0.98rem;
    margin-bottom: 0.25rem;
  }

  .hero-contact-media {
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
  }

  .hero-contact-image-wrap {
    /* Keep native 16:9 landscape like desktop — no square crop */
    aspect-ratio: 16 / 9;
    min-height: 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  }

  .hero-contact-image {
    /* Match desktop: full landscape scene + face visible */
    object-fit: contain;
    object-position: center center;
  }
}

/* Home DPTM badge — desktop keeps prior size; mobile shrinks + centers so ASSURED is fully visible */
.dptm-feature {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}

.dptm-feature-copy {
  flex: 1;
  min-width: 280px;
}

.dptm-badge-col {
  flex: 0 0 auto;
  text-align: center;
  max-width: 100%;
}

.dptm-badge-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  padding: 2.5rem 3.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  box-sizing: border-box;
}

.dptm-badge-img {
  height: 110px;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
}

@media (max-width: 900px) {
  .dptm-feature {
    flex-direction: column;
    align-items: stretch;
    gap: 1.75rem;
    margin-bottom: 2.5rem;
  }

  .dptm-feature-copy {
    min-width: 0;
  }

  .dptm-badge-col {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .dptm-badge-card {
    /* Slightly smaller card + logo so full DPTM wordmark (incl. ASSURED) fits mobile width */
    width: 100%;
    max-width: 22rem;
    padding: 1.25rem 1.35rem;
    margin: 0 auto;
  }

  .dptm-badge-img {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 72px;
    margin: 0 auto;
  }
}

/* Contact Info Box */
.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  margin-top: 2rem;
}

@media (max-width: 992px) {
  .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.contact-item-icon {
  color: var(--accent-blue);
  margin-top: 0.25rem;
}

.contact-item h4 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.contact-item p {
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* Toast Notification styling */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: var(--primary-navy);
  color: var(--bg-white);
  padding: 1rem 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 10000;
  transform: translateY(150%);
  opacity: 0;
  transition: var(--transition-smooth);
  border-left: 4px solid var(--accent-blue);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* Diagram Layouts & Custom Graphics CSS */
.diagram-card {
  background-color: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 3rem 2rem;
  box-shadow: var(--box-shadow);
  margin-top: 3rem;
  overflow: hidden;
}

/* 1. DIANE Pillars Diagram Extra Styling */
.pillars-diagram-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}

.pillars-diagram-grid .pillar-col {
  grid-column: span 2;
}

/* Centre the second-row pair (Engagement + Entrepreneurship) */
.pillars-diagram-grid .pillar-col:nth-child(4) {
  grid-column: 2 / span 2;
}

.pillars-diagram-grid .pillar-col:nth-child(5) {
  grid-column: 4 / span 2;
}

.pillar-col {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  background-color: var(--bg-light);
  transition: var(--transition-smooth);
}

.pillar-col:hover {
  border-color: var(--accent-blue);
  background-color: var(--bg-white);
  transform: translateY(-3px);
  box-shadow: var(--box-shadow);
}

.pillar-col-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: var(--primary-navy);
}

.pillar-col-header svg {
  color: var(--accent-blue);
  flex-shrink: 0;
}

.pillar-bullets {
  padding-left: 1.25rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.pillar-bullets li {
  margin-bottom: 0.5rem;
  position: relative;
  list-style: disc;
}

@media (max-width: 992px) {
  .pillars-diagram-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pillars-diagram-grid .pillar-col,
  .pillars-diagram-grid .pillar-col:nth-child(4),
  .pillars-diagram-grid .pillar-col:nth-child(5) {
    grid-column: auto;
  }

  /* Fifth card centred, same width as one column */
  .pillars-diagram-grid .pillar-col:nth-child(5) {
    grid-column: 1 / -1;
    width: calc((100% - 1.5rem) / 2);
    max-width: 100%;
    justify-self: center;
  }
}

@media (max-width: 576px) {
  .pillars-diagram-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem !important;
  }

  .pillars-diagram-grid .pillar-col,
  .pillars-diagram-grid .pillar-col:nth-child(4),
  .pillars-diagram-grid .pillar-col:nth-child(5) {
    grid-column: auto;
    width: 100%;
  }

  .pillars-diagram-grid .pillar-col {
    padding: 1.15rem 1rem;
  }

  .pillar-col-header {
    margin-bottom: 0.75rem;
    gap: 0.6rem;
  }

  .pillar-bullets {
    padding-left: 1.1rem;
    font-size: 0.88rem;
  }

  .pillar-bullets li {
    margin-bottom: 0.4rem;
  }
}

/* 2. Circular Flow Lifecycle styling */
.lifecycle-flow-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 2rem 0;
}

.lifecycle-svg-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1 / 1;
}

.lifecycle-node {
  position: absolute;
  width: 110px;
  height: 110px;
  background-color: var(--bg-white);
  border: 2px solid var(--border-light);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bg-navy);
  transition: var(--transition-smooth);
  box-shadow: var(--box-shadow);
  z-index: 10;
}

.lifecycle-node svg {
  color: var(--brand-teal);
  margin-bottom: 0.25rem;
}

.lifecycle-node:hover {
  border-color: var(--brand-teal);
  transform: scale(1.1);
  box-shadow: var(--box-shadow-hover);
}

/* Positioning lifecycle nodes in a circle */
.node-top { top: 0%; left: 50%; transform: translateX(-50%); }
.node-tr { top: 22%; left: 82%; transform: translate(-50%, -50%); }
.node-br { top: 68%; left: 82%; transform: translate(-50%, -50%); }
.node-bottom { bottom: 0%; left: 50%; transform: translateX(-50%); }
.node-bl { top: 68%; left: 18%; transform: translate(-50%, -50%); }
.node-tl { top: 22%; left: 18%; transform: translate(-50%, -50%); }

/* 3. Advisor Staircase Journey */
.staircase-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 3rem 0;
}

.staircase-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2rem;
  align-items: center;
  padding: 1.5rem 2rem;
  background-color: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  transition: var(--transition-smooth);
}

.staircase-step:hover {
  background-color: var(--bg-white);
  border-color: var(--brand-teal);
  transform: translateX(10px);
  box-shadow: var(--box-shadow);
}

.step-level {
  font-size: 1.75rem;
  font-weight: 800;
  font-family: var(--font-heading);
  color: var(--brand-teal);
  background-color: var(--bg-white);
  border: 2px solid var(--border-light);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--box-shadow);
}

.staircase-step:hover .step-level {
  border-color: var(--brand-teal);
  background-color: var(--brand-teal);
  color: white;
}

.step-details h4 {
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

/* 4. SME AI Adoption Timeline */
.timeline-path {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
  margin: 3rem 0 1rem;
}

.timeline-path::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 12.5%;
  width: 75%;
  height: 2px;
  background-color: var(--border-light);
  z-index: 1;
}

.timeline-step {
  text-align: center;
  position: relative;
  z-index: 2;
}

.timeline-dot {
  width: 60px;
  height: 60px;
  background-color: var(--bg-white);
  border: 3px solid var(--border-light);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--bg-navy);
  margin-bottom: 1.25rem;
  box-shadow: var(--box-shadow);
  transition: var(--transition-smooth);
}

.timeline-step:hover .timeline-dot {
  border-color: var(--brand-teal);
  background-color: var(--brand-teal);
  color: white;
  transform: scale(1.1);
}

.timeline-step h4 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.timeline-step p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .timeline-path {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .timeline-path::before {
    display: none;
  }
}

/* 5. Minimalist ASEAN Map styling */
.map-diagram-container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 3rem;
}

@media (max-width: 992px) {
  .map-diagram-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.asean-map-graphic {
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  box-shadow: var(--box-shadow);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: radial-gradient(circle at center, rgba(23, 155, 158, 0.02) 0%, transparent 70%);
}

.asean-map-graphic svg {
  width: 100%;
  height: auto;
  max-height: 300px;
}

.singapore-glowing-dot {
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0% {
    r: 6px;
    fill-opacity: 0.8;
  }
  50% {
    r: 12px;
    fill-opacity: 0.3;
  }
  100% {
    r: 6px;
    fill-opacity: 0.8;
  }
}

/* ==========================================
   Phase 2 Interactive Components
   ========================================== */

/* 1. Journey Selector Components */
.journey-selector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 992px) {
  .journey-selector-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .journey-selector-grid {
    grid-template-columns: 1fr;
  }
}

.persona-card {
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: var(--box-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.persona-card svg {
  color: var(--text-muted);
  transition: var(--transition-smooth);
}

.persona-card h3 {
  font-size: 1.1rem;
  margin: 0;
  color: var(--bg-navy);
}

.persona-card:hover {
  transform: translateY(-5px);
  border-color: var(--brand-teal);
  box-shadow: var(--box-shadow-hover);
}

.persona-card:hover svg {
  color: var(--brand-teal);
}

.persona-card.active {
  border-color: var(--brand-teal);
  background-color: var(--bg-light);
  box-shadow: 0 0 15px rgba(23, 155, 158, 0.15);
}

.persona-card.active svg {
  color: var(--brand-teal);
}

.journey-content-container {
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 2.5rem;
  box-shadow: var(--box-shadow);
  min-height: 250px;
}

.journey-content-block {
  display: none;
  animation: fadeIn 0.4s ease-in-out forwards;
}

.journey-content-block.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 2. Interactive Accordion (SME AI Challenge) */
.accordion-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.accordion-item {
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  background-color: var(--bg-white);
  overflow: hidden;
  transition: var(--transition-smooth);
}

.accordion-header {
  width: 100%;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bg-navy);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.accordion-header:hover {
  background-color: var(--bg-light);
  color: var(--brand-teal);
}

.accordion-icon {
  transition: transform var(--transition-smooth);
  color: var(--brand-teal);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), padding 0.3s ease;
  padding: 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.accordion-item.active {
  border-color: var(--brand-teal);
  box-shadow: var(--box-shadow);
}

.accordion-item.active .accordion-header {
  background-color: var(--bg-light);
  color: var(--brand-teal);
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
}

.accordion-item.active .accordion-content {
  max-height: 500px;
  padding: 1rem 1.5rem 1.5rem 1.5rem;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease;
}

/* Filter hub removed — all opportunity cards always visible */


/* Status Badge Styling */
.status-badge {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  align-self: flex-start;
}

.status-badge.status-available {
  background-color: #E6F4F1;
  color: #0D9488;
  border: 1px solid #B2DFDB;
}

.status-badge.status-custom {
  background-color: #FFF7ED;
  color: #C2410C;
  border: 1px solid #FED7AA;
}

.status-badge.status-pilot {
  background-color: #EDE9FE;
  color: #6D28D9;
  border: 1px solid #DDD6FE;
}

.status-badge.status-developing {
  background-color: #F1F5F9;
  color: #475569;
  border: 1px solid #E2E8F0;
}

.status-badge.status-soft {
  background-color: #EEF2FF;
  color: #4338CA;
  border: 1px solid #C7D2FE;
}

.status-badge.status-badge-inline {
  margin: 0 0 0 0.4rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.65rem;
  vertical-align: middle;
  align-self: auto;
}

.component-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.component-status-row .status-badge {
  margin-bottom: 0;
}

.status-support {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
  line-height: 1.5;
}


/* Solution dynamic styling */
.solutions-grid-interactive {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

@media (max-width: 900px) {
  .solutions-grid-interactive {
    grid-template-columns: 1fr;
  }
}

/* Solutions page — AREI full-width banner between cards and disclaimer */
.solutions-arei-banner {
  margin: 2.5rem 0 0;
  width: 100%;
}

.solutions-arei-banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-light);
  box-shadow: var(--box-shadow);
  background: var(--bg-white);
}

@media (max-width: 640px) {
  .solutions-arei-banner {
    margin-top: 1.75rem;
  }
}


.solution-card-wrapper {
  transition: all var(--transition-smooth);
}


/* 4. Interactive SME AI Adoption Timeline */
.timeline-interactive-path {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 3rem 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.timeline-interactive-path::before {
  content: '';
  position: absolute;
  top: 25px;
  left: 5%;
  width: 90%;
  height: 2px;
  background-color: var(--border-light);
  z-index: 1;
}

.timeline-interactive-dot {
  position: relative;
  z-index: 2;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--bg-white);
  border: 3px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-muted);
  transition: var(--transition-smooth);
}

.timeline-interactive-dot:hover {
  border-color: var(--brand-teal);
  color: var(--brand-teal);
  transform: scale(1.1);
}

.timeline-interactive-dot.active {
  border-color: var(--primary-orange);
  background-color: var(--primary-orange);
  color: white;
  box-shadow: 0 4px 12px rgba(242, 123, 54, 0.25);
  transform: scale(1.15);
}

.timeline-disclosure-box {
  background-color: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 2rem;
  box-shadow: var(--box-shadow);
  max-width: 700px;
  margin: 2rem auto 0;
  min-height: 150px;
  animation: fadeIn 0.4s ease;
}

.timeline-disclosure-content {
  display: none;
}

.timeline-disclosure-content.active {
  display: block;
}

@media (max-width: 768px) {
  .timeline-interactive-path {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    max-width: 100%;
    width: 100%;
    margin: 1.5rem 0 2rem;
  }
  .timeline-interactive-path::before {
    top: 50%;
    left: 8%;
    width: 84%;
    height: 2px;
    transform: translateY(-50%);
  }
  .timeline-interactive-dot {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
    flex-shrink: 0;
  }
}

/* ==========================================
   Article Page Details Styling
   ========================================== */
.article-header {
  padding: 6rem 0 4rem;
  background: radial-gradient(circle at 80% 20%, rgba(23, 155, 158, 0.08) 0%, transparent 60%), var(--bg-dark);
  border-bottom: 1px solid var(--border-dark);
  color: var(--text-white);
}

.article-header h1 {
  color: var(--text-white);
  font-size: 2.75rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.article-header-meta {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-on-dark);
  flex-wrap: wrap;
  align-items: center;
}

.article-header-meta span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.article-body-container {
  padding: 5rem 0;
  background-color: var(--bg-white);
}

.article-body-grid {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  gap: 4rem;
}

@media (max-width: 992px) {
  .article-body-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.article-content {
  max-width: 720px;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

.article-content h2 {
  font-size: 1.8rem;
  color: var(--bg-navy);
  margin: 2.5rem 0 1rem;
}

.article-content h3 {
  font-size: 1.4rem;
  color: var(--bg-navy);
  margin: 2rem 0 1rem;
}

.article-content p {
  margin-bottom: 1.5rem;
}

.article-content ul, .article-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.article-content li {
  margin-bottom: 0.5rem;
  list-style: disc;
}

.article-content blockquote {
  border-left: 4px solid var(--brand-teal);
  padding: 1rem 1.5rem;
  background: var(--bg-light);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  font-style: italic;
  margin: 2rem 0;
  color: var(--bg-navy);
}

.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sidebar-box {
  background-color: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 2rem;
}

.sidebar-box h4 {
  font-size: 1.1rem;
  color: var(--bg-navy);
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--border-light);
  padding-bottom: 0.5rem;
}

/* ==========================================
   Mobile Responsiveness & UI/UX Optimizations
   ========================================== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  /* 1. Fluid Typography for Mobile Headings & Copy (Max 3 lines constraint) */
  h1, .hero h1, .hero-title, .article-header h1, .page-header h1,
  [style*="font-size: 2.75rem"], [style*="font-size: 3rem"], [style*="font-size: 2.5rem"], [style*="font-size: 2.25rem"] {
    font-size: clamp(1.2rem, 4.4vw, 1.45rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0.75rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  h2, .section-header h2, .section h2, section h2, [style*="font-size: 2rem"] {
    font-size: clamp(1.1rem, 3.8vw, 1.28rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 0.5rem !important;
    word-wrap: break-word !important;
  }

  h3, .card h3, .persona-card h3, [style*="font-size: 1.8rem"], [style*="font-size: 1.5rem"], [style*="font-size: 1.4rem"], [style*="font-size: 1.35rem"], [style*="font-size: 1.3rem"] {
    font-size: clamp(1.0rem, 3.4vw, 1.15rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }

  p, .hero p, .subheadline, .section-header p, [style*="font-size: 1.2rem"], [style*="font-size: 1.1rem"] {
    font-size: clamp(0.85rem, 3.2vw, 0.95rem) !important;
    line-height: 1.45 !important;
    margin-bottom: 1rem !important;
  }

  /* 2. Container & Section Padding for Compact Mobile Layouts */
  .section {
    padding: 2.25rem 0 !important;
  }

  .hero {
    padding: 2.5rem 0 1.75rem !important;
  }

  .section-header {
    margin-bottom: 1.5rem !important;
  }

  .container {
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3. Single-Column Grid Collapse for Mobile (excluding selector grids) */
  .grid-4, .grid-3, .grid-2, .pillars-diagram-grid, .solutions-grid-interactive {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* 4. Compact 2x2 Layout for Journey Persona Selector Buttons on Mobile */
  .journey-selector-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
    margin-bottom: 1.25rem !important;
  }

  .persona-card {
    padding: 0.75rem 0.6rem !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.45rem !important;
    min-height: 52px !important;
    border-radius: 10px !important;
    text-align: left !important;
  }

  .persona-card svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }

  .persona-card h3 {
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    font-weight: 700 !important;
  }

  .journey-content-container {
    padding: 1.25rem 1rem !important;
    min-height: auto !important;
  }

  /* 5. Compact solutions-nav on Mobile (tab/filter chrome removed) */
  .solutions-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    margin-bottom: 1.25rem !important;
    justify-content: center !important;
  }

  .solutions-nav-link {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.82rem !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
  }

  /* 6. Flexible Fluid Card Heights in Single-Column View */
  .card, .pricing-card, .solution-card-wrapper, .pillar-col {
    height: auto !important;
    min-height: 0 !important;
  }

  .card > div[style*="height:"],
  .pricing-card > div[style*="height:"] {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 1rem !important;
  }

  .diagram-card {
    padding: 1.25rem 1rem !important;
    margin-top: 1.5rem !important;
  }

  /* 7. Interactive timeline steps stay horizontal on mobile */
  .timeline-interactive-path {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    position: relative !important;
    margin: 1.5rem 0 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .timeline-interactive-path::before {
    left: 8% !important;
    top: 50% !important;
    bottom: auto !important;
    width: 84% !important;
    height: 2px !important;
    transform: translateY(-50%) !important;
    background-color: var(--border-light) !important;
  }

  .timeline-interactive-dot {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.95rem !important;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .timeline-disclosure-box {
    padding: 1.25rem !important;
    margin-top: 1.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 8. Responsive Table & Code Block Handling */
  table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
  }

  /* 9. DIANE Hero Logo 30% Size Reduction for Mobile */
  img[src*="diane-full"],
  img[src*="diane-logo"],
  img[alt*="DIANE Logo"] {
    max-width: 195px !important;
    width: 70% !important;
    height: auto !important;
    margin: 1rem auto !important;
  }
}



/* Home vertical-tighten pass: reduce mobile hero padding without changing copy or sections. */
@media (max-width: 900px) {
  .hero-home {
    padding: 1.75rem 0 1.25rem !important;
  }
}

/* Home trust signal cards (4 tiles after Trustmark tile removal) */
.trust-signal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1100px) {
  .trust-signal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .trust-signal-grid {
    grid-template-columns: 1fr;
  }
}

/* five-pillar denser strip on homepage */
.diane-pillar-strip .diane-pillar-card {
  padding: 1.5rem 1rem 2.5rem;
}
.diane-pillar-strip .diane-pillar-title {
  font-size: 0.92rem;
}
.diane-pillar-strip .diane-pillar-copy {
  font-size: 0.76rem;
}


.diane-e-dimensions {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.diane-e-dimensions li {
  margin-bottom: 0.45rem;
}

.diane-e-dimensions strong {
  color: var(--bg-navy);
}

.diane-framework-strip .diane-e-card {
  flex: 1.35;
}

.diane-framework-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.diane-framework-grid .diane-e-component {
  grid-column: 1 / -1;
}

.diane-component {
  position: relative;
}

.diane-e-intro {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.diane-e-nest {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.diane-e-dim {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 1rem 1.1rem;
}

.diane-e-dim h4 {
  font-size: 0.95rem;
  color: var(--bg-navy);
  margin: 0 0 0.65rem;
}

@media (max-width: 900px) {
  .diane-framework-grid {
    grid-template-columns: 1fr;
  }

  .diane-e-nest {
    grid-template-columns: 1fr;
  }
}

/* Advisor consent checkboxes */
.form-consent-group {
  margin-bottom: 1.1rem;
}

.consent-option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 500;
}

.consent-option input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  accent-color: var(--brand-teal);
}

.consent-option a {
  color: var(--brand-teal);
  font-weight: 700;
  text-decoration: underline;
}

.form-error {
  margin: 0.55rem 0 0;
  font-size: 0.84rem;
  color: #DC2626;
  font-weight: 600;
}


/* Form submission confirmation and failure (contact, advisors, future architect) */
.form-confirmation {
  padding: 0.25rem 0 0.25rem;
  overflow-wrap: anywhere;
}

.form-confirmation h3,
.form-submit-error h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--bg-navy);
  margin: 0 0 0.75rem;
}

.form-confirmation p,
.form-submit-error p {
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 0.75rem;
}

.form-confirmation p:last-child,
.form-submit-error p:last-child {
  margin-bottom: 0;
}

.form-confirmation a,
.form-submit-error a {
  color: var(--brand-teal);
  font-weight: 700;
  text-decoration: underline;
}

.form-confirmation h3:focus,
.form-submit-error:focus {
  outline: 2px solid var(--brand-teal);
  outline-offset: 3px;
}

.form-submit-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin: 0 0 1.25rem;
  overflow-wrap: anywhere;
}

.form-submit-error h3 {
  color: #991B1B;
  font-size: 1.15rem;
}

.form-submit-error p {
  color: #7F1D1D;
}

button.btn-primary:disabled,
button.btn-primary[disabled] {
  background-color: var(--brand-orange);
  color: var(--text-white);
  cursor: not-allowed;
  opacity: 1;
  transform: none;
  box-shadow: none;
}

@media (max-width: 420px) {
  .form-confirmation h3,
  .form-submit-error h3 {
    font-size: 1.2rem;
  }
}



/* ===== MR1: Compact footer sitewide ===== */
footer.site-footer-compact {
  background-color: var(--bg-dark);
  color: #E2E8F0;
  padding: 2rem 0 1.5rem;
  border-top: 1px solid var(--border-dark);
  margin-top: auto;
}

.footer-compact {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto;
}

.footer-compact-name {
  color: var(--text-white);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 0.55rem;
}

.footer-compact-links {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
}

.footer-compact-links a {
  color: var(--text-on-dark);
  text-decoration: none;
  font-weight: 600;
}

.footer-compact-links a:hover {
  color: var(--brand-teal);
}

.footer-compact-sep {
  color: var(--text-on-dark-soft);
}

.footer-compact-tagline {
  margin: 0 0 0.65rem;
  font-size: 0.85rem;
  color: var(--text-on-dark-soft);
  line-height: 1.45;
}

.footer-compact-copy {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-on-dark-soft);
}


/* ===== MR1: Pricing comparison ===== */
.btn-sm {
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  min-height: 40px;
  white-space: nowrap;
}

.pricing-recommended-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem 1.75rem;
  align-items: center;
}

.pricing-recommended-cta {
  min-width: 12rem;
}

@media (max-width: 700px) {
  .pricing-recommended-grid {
    grid-template-columns: 1fr;
  }

  .pricing-recommended-cta {
    min-width: 0;
  }
}

.pricing-compare-table {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.pricing-compare-head {
  display: none;
}

.pricing-compare-row {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius);
  padding: 1rem 1.1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem 0.75rem;
}

.pricing-compare-row-recommended {
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 1px rgba(23, 155, 158, 0.15);
}

.pricing-compare-row > div {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.pricing-compare-row > div::before {
  content: attr(data-label);
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-teal);
  margin-bottom: 0.15rem;
}

.pricing-compare-row > div[data-label="Plan"]::before {
  display: none;
}

.pricing-compare-row > div[data-label="Plan"] {
  font-size: 1.05rem;
  color: var(--bg-navy);
}

.pricing-compare-row > div[data-label="Next step"] {
  padding-top: 0.25rem;
}

.pricing-inline-badge {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--brand-teal);
  color: #fff;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  vertical-align: middle;
}

@media (min-width: 960px) {
  .pricing-compare-head {
    display: grid;
    grid-template-columns: 1.2fr 1.4fr 1.3fr 1.1fr 1.1fr 0.9fr;
    gap: 0.75rem;
    padding: 0.35rem 1.1rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-teal);
  }

  .pricing-compare-row {
    grid-template-columns: 1.2fr 1.4fr 1.3fr 1.1fr 1.1fr 0.9fr;
    align-items: center;
    gap: 0.75rem;
  }

  .pricing-compare-row > div::before {
    display: none !important;
  }

  .pricing-compare-row > div[data-label="Plan"] {
    font-size: 0.95rem;
  }
}


/* Home full-page vertical tighten: compact the post-hero rhythm without changing copy or sections. */
.home-page .section {
  padding: 3.5rem 0;
}

.home-page .section-header {
  margin-bottom: 2rem;
}

.home-page .journey-selector-grid {
  margin-bottom: 1.5rem;
}

.home-page .journey-content-container {
  padding: 1.75rem;
}

.home-page .journey-content-container [style*="background-color: var(--bg-light)"] {
  padding: 1.5rem !important;
}

.home-page #platform .grid-4 {
  gap: 1rem;
}

.home-page #platform .card {
  padding: 1.75rem 1.5rem;
}

.home-page #why-different .grid-2 {
  margin-bottom: 2rem !important;
  gap: 1.5rem !important;
}

.home-page #why-different .card {
  padding: 1.5rem !important;
}

.home-page .dptm-feature {
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.home-page .dptm-badge-card {
  padding: 2rem 2.5rem;
}

.home-page .trust-signal-grid {
  gap: 1rem;
}

.home-page .trust-signal-grid > div {
  padding: 1.15rem 1rem !important;
}

@media (max-width: 900px) {
  .home-page .section {
    padding: 1.75rem 0 !important;
  }

  .home-page .section-header {
    margin-bottom: 1.25rem !important;
  }

  .home-page .journey-content-container {
    padding: 1.15rem 1rem !important;
  }

  .home-page .journey-content-container [style*="background-color: var(--bg-light)"] {
    padding: 1.25rem !important;
  }

  .home-page #platform .card,
  .home-page #why-different .card {
    padding: 1.25rem !important;
  }

  .home-page #why-different .grid-2 {
    margin-bottom: 1.5rem !important;
    gap: 1rem !important;
  }

  .home-page .dptm-feature {
    gap: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .home-page .trust-signal-grid {
    gap: 0.75rem;
  }
}

/* DIANE full-page vertical tighten: keep all spacing changes page-scoped. */
.diane-page .hero-diane {
  padding: 3rem 0;
}

.diane-page .section {
  padding: 3.5rem 0;
}

.diane-page .section-header {
  margin-bottom: 2rem !important;
}

.diane-page .diane-compare-grid {
  gap: 1rem;
}

.diane-page .diane-compare-grid > div {
  padding: 1.5rem !important;
}

.diane-page .diane-compare-grid > div > div:first-child {
  margin-bottom: 0.85rem !important;
}

.diane-page .diane-framework-section {
  padding-bottom: 1.5rem;
}

.diane-page .diane-framework-grid {
  gap: 1rem;
}

.diane-page .diane-framework-grid .pillar-col {
  padding: 1.25rem;
}

.diane-page .diane-e-nest {
  gap: 0.75rem;
}

.diane-page .diane-e-dim {
  padding: 0.85rem 1rem;
}

.diane-page .diane-practice {
  padding: 0 0 3.5rem;
}

.diane-page .diane-practice + .section > .container > .grid-2 {
  gap: 2rem !important;
  margin-bottom: 1.5rem !important;
}

.diane-page .diane-practice + .section > .container > .grid-2 > div:first-child {
  padding: 1.75rem !important;
}

.diane-page .diane-practice + .section > .container > .grid-2 > div:first-child > div[style*="flex-direction: column"] {
  gap: 1rem !important;
}

.diane-page .diane-practice + .section .diagram-card {
  margin-top: 2rem !important;
}

.diane-page .diagram-card {
  padding: 2rem 1.5rem;
}

.diane-page .diagram-card > h3 {
  margin-bottom: 0.9rem !important;
}

.diane-page .diagram-card > p {
  margin-bottom: 1.25rem !important;
}

.diane-page .timeline-interactive-path {
  margin: 2rem auto;
}

.diane-page .timeline-disclosure-box {
  padding: 1.5rem;
  margin-top: 1.25rem;
  min-height: 120px;
}

.diane-page .cta-banner {
  padding: 3rem 0;
}

.diane-page .cta-banner h2 {
  margin-bottom: 1rem;
}

.diane-page .cta-banner p {
  margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
  .diane-page .hero-diane {
    padding: 1.75rem 0 1.25rem !important;
  }

  .diane-page .section {
    padding: 1.75rem 0 !important;
  }

  .diane-page .section-header {
    margin-bottom: 1.25rem !important;
  }

  .diane-page .diane-compare-grid {
    gap: 0.75rem;
  }

  .diane-page .diane-compare-grid > div {
    padding: 1.15rem 1rem !important;
  }

  .diane-page .diane-framework-section {
    padding-bottom: 1rem !important;
  }

  .diane-page .diane-framework-grid {
    gap: 0.75rem;
  }

  .diane-page .diane-framework-grid .pillar-col {
    padding: 1.15rem 1rem !important;
  }

  .diane-page .diane-e-nest {
    gap: 0.75rem;
  }

  .diane-page .diane-e-dim {
    padding: 0.8rem 0.9rem;
  }

  .diane-page .diane-practice {
    padding: 0 0 1.75rem !important;
  }

  .diane-page .diane-practice + .section > .container > .grid-2 {
    gap: 1.25rem !important;
    margin-bottom: 1rem !important;
  }

  .diane-page .diane-practice + .section > .container > .grid-2 > div:first-child {
    padding: 1.25rem !important;
  }

  .diane-page .diane-practice + .section > .container > .grid-2 > div:first-child > div[style*="flex-direction: column"] {
    gap: 0.85rem !important;
  }

  .diane-page .diagram-card {
    padding: 1.15rem 1rem !important;
    margin-top: 1.25rem !important;
  }

  .diane-page .diagram-card > h3 {
    margin-bottom: 0.65rem !important;
  }

  .diane-page .diagram-card > p {
    margin-bottom: 0.95rem !important;
  }

  .diane-page .timeline-interactive-path {
    margin: 1rem 0 1.25rem !important;
  }

  .diane-page .timeline-disclosure-box {
    padding: 1rem !important;
    margin-top: 1rem !important;
    min-height: 0;
  }

  .diane-page .cta-banner {
    padding: 2rem 0 !important;
  }

  .diane-page .cta-banner p {
    margin-bottom: 1.25rem;
  }
}


/* DIANE hero mobile center: page-scoped so desktop layout stays left/row as today.
   On max-width 900px only, centre the Logo + “DIANE Operating Model” + body text block.
   Copy and assets unchanged. */
@media (max-width: 900px) {
  .diane-page .hero-diane {
    text-align: center;
  }

  .diane-page .hero-diane-logo-stack {
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .diane-page .hero-diane-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .diane-page .hero-diane-copy {
    text-align: center;
  }

  .diane-page .hero-diane h1,
  .diane-page .hero-diane .subheadline {
    text-align: center;
  }
}


/* Platform hero vertical tighten (Instruction 25): page-scoped so Home/DIANE/etc. stay untouched.
   Cuts hero padding, image-adjacent gap, and hero→next-section spacing by ~40–50%.
   Copy, image assets, and other pages unchanged. */
.platform-page .hero-platform {
  padding: 2.75rem 0 1.75rem;
}

.platform-page .hero-platform-copy {
  margin-bottom: 1rem;
}

.platform-page .hero-platform + .section {
  padding-top: 3.25rem;
}

@media (max-width: 900px) {
  .platform-page .hero-platform {
    padding: 1.35rem 0 0.95rem !important;
  }

  .platform-page .hero-platform-copy {
    margin-bottom: 0.75rem !important;
  }

  .platform-page .hero-platform + .section {
    padding-top: 1.2rem !important;
  }
}


/* Solutions hero vertical tighten (Instruction 26): page-scoped so Home/DIANE/Platform/etc. stay untouched.
   Cuts hero padding, image-adjacent gap, and hero→next-section spacing by ~40–50%.
   Copy, image assets, and other pages unchanged. */
.solutions-page .hero-solutions {
  padding: 2.75rem 0 1.75rem;
}

.solutions-page .hero-solutions-copy {
  margin-bottom: 1rem;
}

.solutions-page .hero-solutions + .section {
  padding-top: 3.25rem;
}

@media (max-width: 900px) {
  .solutions-page .hero-solutions {
    padding: 1.35rem 0 0.95rem !important;
  }

  .solutions-page .hero-solutions-copy {
    margin-bottom: 0.75rem !important;
  }

  .solutions-page .hero-solutions + .section {
    padding-top: 1.2rem !important;
  }
}


/* Advisors hero vertical tighten (Instruction 27): page-scoped so Home/DIANE/Platform/Solutions/etc. stay untouched.
   Cuts hero padding, image-adjacent gap, and hero→next-section spacing by ~40–50%.
   Copy, image assets, and other pages unchanged. */
.advisors-page .hero-advisors {
  padding: 2.75rem 0 1.75rem;
}

/* Advisors hero copy width: use full container width on desktop so title/subtitle
   do not wrap early against a narrow max-width (shared .hero-advisors-copy is 48rem).
   Image, CTAs, and other pages unchanged. */
.advisors-page .hero-advisors-copy {
  margin-bottom: 1rem;
  max-width: none;
}

.advisors-page .hero-advisors + .section {
  padding-top: 3.25rem;
}

@media (max-width: 900px) {
  .advisors-page .hero-advisors {
    padding: 1.35rem 0 0.95rem !important;
  }

  .advisors-page .hero-advisors-copy {
    margin-bottom: 0.75rem !important;
  }

  .advisors-page .hero-advisors + .section {
    padding-top: 1.2rem !important;
  }
}


/* Advisors wrap + marked mid/lower gaps (Diane annotations 1–6).
   Page-scoped to .advisors-page. Does not undo Advisors hero tighten.
   Not a full-page section tighten (!87 remains separate / unmerged).
   Copy text unchanged; other pages unchanged. */

/* 1 & 3 — widen section-header so Who Should Join / Journey subtitles
   do not orphan “transformation.” / “client.” on desktop (same pattern as
   Advisors hero / Pricing caption: remove narrow max-width). */
.advisors-page .section-header {
  max-width: none;
}

/* 2 — gap between Domain Experience section and Advisor Pathway (~50%). */
.advisors-page section:has(.advisor-experience-grid) {
  padding-bottom: 3rem; /* was 6rem */
}

.advisors-page #pathway {
  padding-top: 3rem; /* was 6rem */
  padding-bottom: 3rem; /* was 6rem — also feeds gap 5 */
}

/* 4 — gap between Journey subtitle and “Click on each step…” / steps UI (~50%).
   Header margin-bottom was 4rem; diagram-card margin-top 3rem collapsed to 4rem,
   plus diagram padding-top 3rem → ~7rem visual. Cut both halves. */
.advisors-page #pathway .section-header {
  margin-bottom: 2rem; /* was 4rem */
}

.advisors-page #pathway .diagram-card {
  margin-top: 1.5rem; /* was 3rem */
  padding: 1.5rem 2rem 3rem; /* top was 3rem (~50%); sides/bottom unchanged */
}

/* 5 — gap between program steps card and Register heading (~50% via pathway pb + register pt).
   6 — gap between registration form card and footer (~50% via register pb). */
.advisors-page #register {
  padding-top: 3rem; /* was 6rem */
  padding-bottom: 3rem; /* was 6rem */
}

@media (max-width: 900px) {
  .advisors-page section:has(.advisor-experience-grid) {
    padding-bottom: 1.25rem !important; /* mobile .section was 2.25rem */
  }

  .advisors-page #pathway {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .advisors-page #pathway .section-header {
    margin-bottom: 1rem !important;
  }

  .advisors-page #pathway .diagram-card {
    margin-top: 0.75rem !important;
    padding: 1rem 1.15rem 1.5rem !important;
  }

  .advisors-page #register {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
}


/* Pricing hero vertical tighten (Instruction 28): page-scoped so Home/DIANE/Platform/Solutions/Advisors/etc. stay untouched.
   Cuts hero padding, copy→image gap, and hero→next-section spacing by ~40–50%.
   Copy, image assets, and other pages unchanged. */
.pricing-page .hero-pricing {
  padding: 2.75rem 0 1.75rem !important; /* beats inline padding on pricing.html */
}

.pricing-page .pricing-checklist {
  margin-top: 1rem; /* was 2rem (~50% cut of copy→image gap) */
}

/* Pricing hero caption width: use full container width on desktop so the subtitle
   under the checklist banner does not wrap early against max-width: 42rem.
   Image, mobile rules from feat/pricing-hero-41, and other pages unchanged. */
.pricing-page .pricing-checklist-caption-sub {
  max-width: none;
}

.pricing-page .hero-pricing + .section {
  padding-top: 3.25rem;
}

@media (max-width: 900px) {
  .pricing-page .hero-pricing {
    padding: 1.35rem 0 0.95rem !important;
  }

  .pricing-page .pricing-checklist {
    margin-top: 0.75rem !important; /* was 1.5rem (~50%) */
  }

  .pricing-page .hero-pricing + .section {
    padding-top: 1.2rem !important;
  }
}


/* Pricing Specialized Pathways: desktop-only inner fee/pricing box cross-alignment
   (same idea as DIANE plan tiles). Equal header + fee box heights so left/right
   PRICING / COMPANY PROGRAM boxes share the center ADVISOR FEE Y. Mobile stays
   stacked/fluid — no fixed heights below 993px. Copy unchanged. */
@media (min-width: 993px) {
  .pricing-page .pricing-pathways-grid {
    align-items: stretch;
  }

  .pricing-page .pricing-pathway-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Tallest natural header (center Future Architect, ~243px at 1440) + buffer */
  .pricing-page .pricing-pathway-header {
    height: 250px;
    min-height: 250px;
    box-sizing: border-box;
  }

  .pricing-page .pricing-pathway-fee {
    height: 110px;
    min-height: 110px;
    box-sizing: border-box;
  }

  .pricing-page .pricing-pathway-note {
    flex: 1 1 auto;
    min-height: 95px;
  }

  .pricing-page .pricing-pathway-card > .btn {
    margin-top: auto;
  }
}



/* Pricing FAQ gaps (Diane annotations 9–11).
   Page-scoped to .pricing-page. Branched from main (not stacked on open !88
   full-page tighten). Does not undo Pricing hero tighten or pathways align.
   FAQ copy/behavior and other Pricing mid-page sections unchanged.
   9 — Disclaimer → FAQ heading: plans section pb + disclaimer mb + FAQ pt ~40–50%
   10 — FAQ subtitle → first accordion: section-header margin-bottom ~40–50%
   11 — last accordion → footer: FAQ section padding-bottom ~40–50% */
.pricing-page .section:has(.pricing-disclaimer) {
  padding-bottom: 3rem; /* was 6rem (~50%) — empty band after disclaimer */
}

.pricing-page .pricing-disclaimer {
  margin-bottom: 1rem !important; /* was 2rem inline (~50%) */
}

.pricing-page .section.section-alt {
  padding-top: 3rem; /* was 6rem (~50%) */
  padding-bottom: 2.5rem; /* was 6rem; ~50% of last-card→footer visual gap */
}

.pricing-page .section.section-alt .section-header {
  margin-bottom: 2rem; /* was 4rem (~50%) */
}

.pricing-page .section.section-alt .section-header p {
  margin-bottom: 0; /* avoid default p margin flooring the cut on mobile */
}

@media (max-width: 900px) {
  .pricing-page .section:has(.pricing-disclaimer) {
    padding-bottom: 1.15rem !important; /* was 2.25rem mobile base (~49%) */
  }

  .pricing-page .pricing-disclaimer {
    margin-bottom: 1rem !important; /* was 2rem (~50%) */
  }

  .pricing-page .section.section-alt {
    padding-top: 1.15rem !important;
    padding-bottom: 0.75rem !important; /* ~50% of last-card→footer on mobile */
  }

  .pricing-page .section.section-alt .section-header {
    margin-bottom: 0.75rem !important; /* was 1.5rem mobile (~50% of gap 10) */
  }

  .pricing-page .section.section-alt .section-header p {
    margin-bottom: 0 !important; /* beat mobile p { margin-bottom: 1rem !important } */
  }
}


/* Contact hero ambient video + desktop top-align (fix/contact-hero-video-align-andi).
   Same pattern as Home !97/!98/!103: video = black ground only; photo sits on top.
   Page-scoped to .contact-page. Form/other copy/other pages unchanged. */
.contact-page .hero-contact.hero-contact--bleed {
  position: relative;
  overflow: hidden;
  background: #071116;
  isolation: isolate;
}

.contact-page .hero-contact-bleed-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 78%;
  z-index: 0;
  pointer-events: none;
}

.contact-page .hero-contact--bleed > .container {
  position: relative;
  z-index: 1;
}

.contact-page .hero-contact--bleed .hero-contact-copy {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65);
}

/* Keep original photo card visible on top of the ambient video */
.contact-page .hero-contact--bleed .hero-contact-media {
  background: var(--bg-navy);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  border: none;
  overflow: hidden;
}

.contact-page .hero-contact--bleed .hero-contact-image-wrap {
  display: block;
}

/* Desktop: top-align title/copy with hero image (same idea as Home !103) */
@media (min-width: 901px) {
  .contact-page .hero-contact-grid {
    align-items: start;
  }
}

/* Mobile: photo card framing on image-wrap; media shell transparent over video */
@media (max-width: 900px) {
  .contact-page .hero-contact--bleed .hero-contact-media {
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
}

/* Contact hero vertical tighten (Instruction 30): page-scoped so Home/DIANE/Platform/Solutions/Advisors/Pricing/etc. stay untouched.
   Cuts hero padding, copy→image gap, and hero→next-section spacing by ~40–50%.
   Copy, image assets, and other pages unchanged. */
.contact-page .hero-contact {
  padding: 2.75rem 0 1.75rem;
}

.contact-page .hero-contact-grid {
  gap: 1rem 2.5rem; /* was 2rem 2.5rem — ~50% cut of row gap (copy→image when stacked / vertical rhythm) */
}

.contact-page .hero-contact + .section {
  padding-top: 3.25rem;
}

@media (max-width: 900px) {
  /* Further ~40–50% hero/section gap cut on Contact mobile (desktop unchanged). */
  .contact-page .hero-contact {
    padding: 0.75rem 0 0.5rem !important; /* was 1.35 / 0.95 */
  }

  .contact-page .hero-contact-grid {
    gap: 0.4rem !important; /* was 0.75rem */
  }

  .contact-page .hero-contact h1,
  .contact-page .hero-contact .hero-contact-title {
    /* Beat global ≤768px h1 clamp margin (0.75rem !important). */
    margin-bottom: 0.45rem !important;
  }

  .contact-page .hero-contact .subheadline,
  .contact-page .hero-contact-lede {
    /* Beat global ≤768px .subheadline margin (1rem !important). */
    margin-bottom: 0.45rem !important;
  }

  .contact-page .hero-contact + .section {
    padding-top: 0.65rem !important; /* was 1.2rem */
  }

  /* Mid-page / form rhythm — mobile only; keep form fields usable */
  .contact-page .section {
    padding-bottom: 1.25rem !important; /* global mobile .section was 2.25rem */
  }

  .contact-page .contact-info-grid {
    gap: 1.5rem !important; /* was 3rem at ≤992 */
    margin-top: 0.5rem !important;
  }

  .contact-page .contact-details {
    gap: 0.85rem !important; /* was 2rem base */
  }

  .contact-page .contact-details h2 {
    margin-bottom: 0.75rem !important; /* was 1.5rem inline */
  }

  .contact-page .form-container {
    padding: 1.15rem !important; /* was 1.5rem at ≤576 / 3rem desktop */
  }

  .contact-page .form-group {
    margin-bottom: 0.85rem; /* was 1.5rem — keep tappable */
  }
}


/* Platform full-page vertical tighten: compact mid/lower section rhythm.
   Page-scoped to .platform-page. Does not undo hero tighten (!71).
   Copy, images, CTAs, and other pages unchanged. */
.platform-page .section {
  padding: 3.5rem 0;
}

/* Beat Learn YouTube inline padding: 5rem → ~2.75rem (~45%). */
.platform-page .section[style*="padding: 5rem"] {
  padding: 2.75rem 0 !important;
}

/* Keep retailers collage flush — do not inherit tightened .section padding. */
.platform-page .section.platform-retailers-banner-section {
  padding-top: 0;
  padding-bottom: 0;
}

.platform-page .section-header {
  margin-bottom: 2rem !important;
}

.platform-page .platform-capability {
  margin-bottom: 1.75rem; /* was 3.5rem (~50%) */
}

.platform-page .platform-diane-stack-title,
.platform-page .platform-retail-stack-title,
.platform-page .platform-bi-stack-title,
.platform-page .platform-hub-stack-title {
  margin-bottom: 0.75rem; /* was 1.25rem (~40%) */
}

.platform-page .platform-diane-body > p,
.platform-page .platform-retail-body > p,
.platform-page .platform-bi-body > p,
.platform-page .platform-hub-body > p {
  margin-bottom: 0.55rem; /* was 0.85rem (~35%) */
}

.platform-page .platform-diane-bullets,
.platform-page .platform-retail-bullets,
.platform-page .platform-bi-bullets,
.platform-page .platform-hub-bullets {
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.platform-page .cta-banner {
  padding: 3rem 0; /* was 5rem (~40%) */
}

.platform-page .cta-banner h2 {
  margin-bottom: 1rem;
}

.platform-page .cta-banner p {
  margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
  .platform-page .section {
    padding: 1.75rem 0 !important;
  }

  .platform-page .section[style*="padding: 5rem"] {
    padding: 1.5rem 0 !important;
  }

  .platform-page .section.platform-retailers-banner-section {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .platform-page .section-header {
    margin-bottom: 1.25rem !important;
  }

  .platform-page .platform-capability {
    margin-bottom: 1.25rem;
  }

  .platform-page .cta-banner {
    padding: 2rem 0 !important;
  }

  .platform-page .cta-banner p {
    margin-bottom: 1.25rem;
  }
}


/* Solutions CTA gaps (Diane annotations 7 & 8).
   Page-scoped to .solutions-page. Branched from main (not stacked on open !86).
   Does not undo Solutions hero tighten. Copy, buttons, and other Solutions
   mid-page sections unchanged — only space after the disclaimer into the CTA
   band, and space from CTA buttons into the footer.
   7 — disclaimer → CTA heading: section padding-bottom + CTA padding-top ~40–50%
   8 — CTA buttons → footer: CTA padding-bottom ~40–50% of that visual gap */
.solutions-page .hero-solutions + .section {
  padding-bottom: 3rem; /* was 6rem (~50%) — empty band after disclaimer */
}

.solutions-page .cta-banner {
  padding-top: 2.5rem; /* was 5rem (~50%) */
  padding-bottom: 1.5rem; /* was 5rem; ~50% of buttons→footer gap (footer pad kept) */
}

@media (max-width: 900px) {
  .solutions-page .hero-solutions + .section {
    padding-bottom: 1.15rem !important; /* was 2.25rem mobile base (~49%) */
  }

  .solutions-page .cta-banner {
    padding-top: 2rem !important; /* was 5rem; proportional mobile tighten */
    padding-bottom: 1.25rem !important;
  }
}


/* Pricing full-page vertical tighten: compact mid/lower section rhythm.
   Page-scoped to .pricing-page. Does not undo hero tighten (!74),
   desktop 4:1 checklist (!82), or caption width (!84).
   Copy, images, CTAs, and other pages unchanged. */
.pricing-page .section {
  padding: 3.5rem 0;
}

.pricing-page .section-header {
  margin-bottom: 2rem !important;
}

/* Tier / add-on block headers — was margin-bottom: 2rem */
.pricing-page .section > .container > div[style*="margin-bottom: 2rem"] {
  margin-bottom: 1.15rem !important;
}

/* Tier card grid + add-on grid — was margin-bottom: 3.5rem */
.pricing-page .section > .container > .grid-4[style*="margin-bottom: 3.5rem"],
.pricing-page .section > .container > .grid-2[style*="margin-bottom: 3.5rem"] {
  margin-bottom: 1.75rem !important;
  gap: 1.15rem !important; /* was 1.5–2rem */
}

.pricing-page .section .card {
  padding: 1.5rem !important; /* was 2.5rem 2rem (~40%) — tiers + add-ons */
}

.pricing-page .section.section-alt {
  padding: 3.5rem 0;
}

@media (max-width: 900px) {
  .pricing-page .section {
    padding: 1.75rem 0 !important;
  }

  .pricing-page .section-header {
    margin-bottom: 1.25rem !important;
  }

  .pricing-page .section > .container > div[style*="margin-bottom: 2rem"] {
    margin-bottom: 0.9rem !important;
  }

  .pricing-page .section > .container > .grid-4[style*="margin-bottom: 3.5rem"],
  .pricing-page .section > .container > .grid-2[style*="margin-bottom: 3.5rem"] {
    margin-bottom: 1.25rem !important;
    gap: 0.85rem !important;
  }

  .pricing-page .section .card {
    padding: 1.15rem !important;
  }

  .pricing-page .section.section-alt {
    padding: 1.75rem 0 !important;
  }
}


/* Advisors full-page vertical tighten: compact mid/lower section rhythm.
   Page-scoped to .advisors-page. Does not undo hero tighten (!73).
   Copy, images, CTAs, and other pages unchanged. */
.advisors-page .section {
  padding: 3.5rem 0;
}

.advisors-page .section-header {
  margin-bottom: 1.5rem !important; /* was 2.5–4rem */
}

/* "How DIANE Supports You" block — was margin-top: 3.5rem */
.advisors-page .section .container > div[style*="margin-top: 3.5rem"] {
  margin-top: 1.75rem !important;
}

.advisors-page .section .container > div[style*="margin-top: 3.5rem"] > h2 {
  margin-bottom: 1.15rem !important; /* was 2rem */
}

.advisors-page .advisor-experience-grid {
  gap: 2rem !important; /* was 4rem (~50%) */
}

.advisors-page .advisor-experience-copy > p[style*="margin-bottom: 2rem"] {
  margin-bottom: 1.15rem !important;
}

.advisors-page .advisor-quote-card {
  padding: 1.1rem 1.25rem; /* was 1.5rem (~27%) */
}

.advisors-page .timeline-interactive-path {
  margin-bottom: 1.5rem !important; /* was 3rem (~50%) */
}

.advisors-page .timeline-disclosure-box {
  padding: 1.5rem;
  margin-top: 1.25rem;
  min-height: 120px;
}

.advisors-page .form-container {
  padding: 2rem; /* was 3rem (~33–40%) */
}

.advisors-page .form-group {
  margin-bottom: 1rem; /* was 1.5rem (~33%) */
}

@media (max-width: 900px) {
  .advisors-page .section {
    padding: 1.75rem 0 !important;
  }

  .advisors-page .section-header {
    margin-bottom: 1.15rem !important;
  }

  .advisors-page .section .container > div[style*="margin-top: 3.5rem"] {
    margin-top: 1.25rem !important;
  }

  .advisors-page .advisor-experience-grid {
    gap: 1.25rem !important;
  }

  .advisors-page .timeline-interactive-path {
    margin-bottom: 1rem !important;
  }

  .advisors-page .timeline-disclosure-box {
    padding: 1rem !important;
    margin-top: 1rem !important;
    min-height: 0;
  }

  .advisors-page .form-container {
    padding: 1.25rem !important;
  }

  .advisors-page .form-group {
    margin-bottom: 0.85rem;
  }
}


/* Contact full-page vertical tighten: compact mid/lower section rhythm.
   Page-scoped to .contact-page. Does not undo hero tighten (!77).
   Copy, images, CTAs, and other pages unchanged. */
.contact-page .section {
  padding: 3.5rem 0;
}

.contact-page .contact-info-grid {
  gap: 2rem; /* was 4rem (~50%) */
  margin-top: 1rem; /* was 2rem (~50%) */
}

.contact-page .contact-details {
  gap: 1.15rem; /* was 2rem (~42%) */
}

.contact-page .contact-details h2 {
  margin-bottom: 0.85rem !important; /* was 1.5rem inline */
}

.contact-page .form-container {
  padding: 1.75rem; /* was 3rem (~42%) */
}

.contact-page .form-group {
  margin-bottom: 1rem; /* was 1.5rem (~33%) */
}

@media (max-width: 900px) {
  .contact-page .section {
    padding: 1.75rem 0 !important;
  }

  .contact-page .contact-info-grid {
    gap: 1.5rem !important; /* was 3rem at ≤992 */
    margin-top: 0.75rem !important;
  }

  .contact-page .contact-details {
    gap: 1rem !important;
  }

  .contact-page .form-container {
    padding: 1.25rem !important;
  }

  .contact-page .form-group {
    margin-bottom: 0.85rem;
  }
}


/* =============================================================================
   Platform / Solutions / Advisors hero ambient video
   Same wave-beam-on-black pattern as Contact/Home (!97+ / contact bleed).
   Video is full-bleed ambience behind existing hero photos; copy/captions kept.
   Page-scoped so Home/Contact and non-bleed heroes stay unchanged.
   ============================================================================= */

/* --- Platform --- */
.platform-page .hero-platform.hero-platform--bleed {
  position: relative;
  overflow: hidden;
  background: #071116;
  isolation: isolate;
}

.platform-page .hero-platform-bleed-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 78%;
  z-index: 0;
  pointer-events: none;
}

.platform-page .hero-platform--bleed > .container {
  position: relative;
  z-index: 1;
}

.platform-page .hero-platform--bleed .hero-platform-copy {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65);
}

/* Keep original photo card visible on top of the ambient video */
.platform-page .hero-platform--bleed .hero-platform-media {
  background: var(--bg-navy);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  border: none;
  overflow: hidden;
}

.platform-page .hero-platform--bleed .hero-platform-image-wrap {
  display: block;
}

@media (max-width: 900px) {
  .platform-page .hero-platform--bleed .hero-platform-media {
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
}

/* --- Solutions --- */
.solutions-page .hero-solutions.hero-solutions--bleed {
  position: relative;
  overflow: hidden;
  background: #071116;
  isolation: isolate;
}

.solutions-page .hero-solutions-bleed-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 78%;
  z-index: 0;
  pointer-events: none;
}

.solutions-page .hero-solutions--bleed > .container {
  position: relative;
  z-index: 1;
}

.solutions-page .hero-solutions--bleed .hero-solutions-copy {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65);
}

.solutions-page .hero-solutions--bleed .hero-solutions-media {
  background: var(--bg-navy);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  border: none;
  overflow: hidden;
}

.solutions-page .hero-solutions--bleed .hero-solutions-image-wrap {
  display: block;
}

@media (max-width: 900px) {
  .solutions-page .hero-solutions--bleed .hero-solutions-media {
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
}

/* --- Advisors --- */
.advisors-page .hero-advisors.hero-advisors--bleed {
  position: relative;
  overflow: hidden;
  background: #071116;
  isolation: isolate;
}

.advisors-page .hero-advisors-bleed-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 78%;
  z-index: 0;
  pointer-events: none;
}

.advisors-page .hero-advisors--bleed > .container {
  position: relative;
  z-index: 1;
}

.advisors-page .hero-advisors--bleed .hero-advisors-copy {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65);
}

.advisors-page .hero-advisors--bleed .hero-advisors-media {
  background: var(--bg-navy);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  border: none;
  overflow: hidden;
}

.advisors-page .hero-advisors--bleed .hero-advisors-image-wrap {
  display: block;
}

@media (max-width: 900px) {
  .advisors-page .hero-advisors--bleed .hero-advisors-media {
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
}


/* =============================================================================
   DIANE hero ambient video (Diane-supplied clip on black).
   Same bleed pattern as Contact/Home/Platform/Solutions/Advisors.
   Video is full-bleed ambience behind existing DIANE logo + copy; page images unchanged.
   Page-scoped so other heroes stay unchanged.
   ============================================================================= */

.diane-page .hero-diane.hero-diane--bleed {
  position: relative;
  overflow: hidden;
  background: #071116;
  isolation: isolate;
}

.diane-page .hero-diane-bleed-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 78%;
  z-index: 0;
  pointer-events: none;
}

.diane-page .hero-diane--bleed > .container {
  position: relative;
  z-index: 1;
}

.diane-page .hero-diane--bleed .hero-diane-copy {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65);
}

/* Keep DIANE logo visible on top of the ambient video */
.diane-page .hero-diane--bleed .hero-diane-logo {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
}

/* =============================================================================
   Mobile swipe — hero-media only soft appear (visible opacity transition).
   Transition lives on the opacity:0 rule so toggling .qinet-swipe-soft-media-ready
   paints a real 0→1 ease. Page chrome stays visible; no navy/body blanking.
   ============================================================================= */

html.qinet-swipe-soft-media .hero img,
html.qinet-swipe-soft-media .hero video,
html.qinet-swipe-soft-media [class*="hero-"] img,
html.qinet-swipe-soft-media [class*="hero-"] video,
html.qinet-swipe-soft-media [class$="-bleed-video"],
html.qinet-swipe-soft-media .pricing-checklist-image {
  opacity: 0;
  transition: opacity 0.5s ease;
}

html.qinet-swipe-soft-media.qinet-swipe-soft-media-ready .hero img,
html.qinet-swipe-soft-media.qinet-swipe-soft-media-ready .hero video,
html.qinet-swipe-soft-media.qinet-swipe-soft-media-ready [class*="hero-"] img,
html.qinet-swipe-soft-media.qinet-swipe-soft-media-ready [class*="hero-"] video,
html.qinet-swipe-soft-media.qinet-swipe-soft-media-ready [class$="-bleed-video"],
html.qinet-swipe-soft-media.qinet-swipe-soft-media-ready .pricing-checklist-image {
  opacity: 1;
}