/* Polished home page (Variation A) — scoped under .home-v2 so it does not
   interfere with the existing site styles. Page-level body bg is overridden
   to a slightly cooler --color-bg using a class on body. */

/* Home v2 tokens — kept in this file so the page is self-contained and never
   desyncs from theme.css. (Mirrors the additive block in theme.css.) */
:root {
  --color-border-soft: #eef1f6;
  --color-navy-deep: #070f30;
  --color-navy-mid: #0a1640;
  --color-accent-teal: #0e7a73;
  --color-sky: #9bd4ff;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --shadow-card: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -12px rgba(15,23,42,0.08);
  --shadow-card-hover: 0 1px 2px rgba(15,23,42,0.04), 0 16px 40px -12px rgba(15,23,42,0.12);
  --shadow-cta: 0 24px 48px -16px rgba(10,22,64,0.35);
  --shadow-button-light: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px -8px rgba(0,0,0,0.25);
  --content-width-v2: 1120px;
}

.home-v2-body { background: #fafbfc; }

.home-v2 {
  font-family: var(--font-stack);
  color: #334155;
  line-height: 1.65;
}

.home-v2 h1, .home-v2 h2, .home-v2 h3 {
  text-wrap: pretty;
}

.home-v2-inner {
  max-width: var(--content-width-v2);
  margin: 2em 0;
  padding: 0 80px;
  box-sizing: border-box;
  width: 100%;
}

/* ---------- HERO ---------- */

.bg-image {
  position: relative;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(125,211,252,0.18), transparent 60%),
    linear-gradient(180deg, #070f30 0%, #0a1640 70%, #0c1a4a 100%);
  color: #ffffff;
  overflow: hidden;
}

section.bg-image div.section {
  inset: 0;
  background-image: url("https://ardi.com.au/wp-content/uploads/2026/05/hero-bg-1.png");
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  //opacity: 0.85;
  //pointer-events: none;
}

.home-v2-hero-motif {
  position: absolute;
  inset: 0;
  //pointer-events: none;
  opacity: 0.85;
}

.bg-image .container {
  position: relative;
  padding: 90px 80px 110px;
  max-width: var(--content-width-v2);
  margin: 0 auto;
  box-sizing: border-box;
}

.home-v2-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.home-v2-hero-sub {
  margin: 0 0 44px 0;
  font-size: 19px;
  line-height: 1.6;
  color: #c8d2e6;
  max-width: 680px;
}

.banner .thin.light-blue {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.home-v2-eyebrow--sky { color: var(--color-sky); }
.home-v2-eyebrow--teal { color: var(--color-accent-teal); }

.home-v2-hero-eyebrow { margin-bottom: 28px; }

.bg-image .banner-text h1 {
  margin: 0 0 28px 0;
  font-size: 60px;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #ffffff;
  max-width: 880px;
  display: inline-block;
}

.bg-image h1 {
  margin: 0 0 28px 0;
  font-size: 60px;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #ffffff;
  max-width: 880px;
}

.hero-subtitle {
  margin: 0 0 44px 0;
  font-size: 19px;
  line-height: 1.6;
  color: #c8d2e6;
  max-width: 680px;
}

.home-v2-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.home-v2-btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-md);
  padding: 14px 24px;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  box-sizing: border-box;
  border: 1px solid transparent;
}

.main button {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-md);
  padding: 14px 24px;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  box-sizing: border-box;
  border: 1px solid transparent;
}

.home-v2-card button {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-md);
  padding: 14px 24px;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  box-sizing: border-box;
  border: 1px solid transparent;
}

.home-v2-btn--primary-light {
  background: #ffffff;
  color: var(--color-navy-mid);
  padding: 15px 24px;
  box-shadow: var(--shadow-button-light);
}
.home-v2-btn--primary-light:hover {
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}

.home-v2-btn--ghost-on-dark {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255,255,255,0.28);
}
.home-v2-btn--ghost-on-dark:hover {
  background: rgba(255,255,255,0.06);
}

/* spec strip */
.home-v2-spec-strip {
  margin-top: 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  row-gap: 18px;
  column-gap: 24px;
}

.home-v2-spec-item {
  padding: 0;
}

.home-v2-spec-item + .home-v2-spec-item {
  border-left: 0;
  padding-left: 0;
}

.home-v2-spec-label {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sky);
  margin-bottom: 0;
  white-space: nowrap;
}

.home-v2-spec-text {
  font-size: 14px;
  line-height: 1.5;
  color: #dbe3f3;
  margin: 0;
}

/* ---------- SECTION SHARED ---------- */

.home-v2-section {
  //padding: 82px 0 110px;
}

.home-v2-section--problem {
  padding: 105px 0 110px;
  background: #fafbfc;
}

.home-v2-section--how {
  padding: 82px 0 110px;
  background: #ffffff;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
  margin-bottom: 28px;
}

.main.whiteout {
  padding: 0px 0 0px;
  background: #ffffff;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.home-v2-section--case {
  padding: 82px 0 110px;
  background: #fafbfc;
}

.home-v2-section--cta {
  padding: 0 0 120px 0;
  background: #fafbfc;
}

.home-v2-section h2 {
  margin: 0 0 24px 0;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  max-width: 880px;
}

.home-v2-section-eyebrow { margin-bottom: 18px; }

.home-v2-lede {
  margin: 0 0 64px 0;
  font-size: 18px;
  line-height: 1.65;
  color: #475569;
  max-width: 760px;
}

.home-v2-lede--small {
  font-size: 17px;
  margin: 0 0 64px 0;
  max-width: 720px;
}

/* ---------- PROBLEM CARDS ---------- */

.home-v2-problem-image {
  margin: 0 0 36px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(155, 212, 255, 0.10);
  box-shadow:
    0 24px 56px -20px rgba(10, 22, 64, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.home-v2-problem-image img,
.home-v2-problem-image svg {
  display: block;
  width: 100%;
  height: auto;
}

.home-v2-how-image {
  margin: 0 0 36px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(155, 212, 255, 0.10);
  box-shadow:
    0 24px 56px -20px rgba(10, 22, 64, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.home-v2-how-image--issue {
  margin: 48px 0 0 0;
}

.home-v2-section--how .home-v2-lede {
  margin-bottom: 28px;
}

.home-v2-how-image img,
.home-v2-how-image svg {
  display: block;
  width: 100%;
  height: auto;
}

/* "Steps left, image right" layout — text steps on the left,
   taller / narrower image on the right. */
.home-v2-how-vertical {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: 56px;
  align-items: center;
}

.home-v2-how-vertical-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Vertical line connecting the three step-number circles */
.home-v2-how-vertical-steps::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 17.5px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--color-border) 12%, var(--color-border) 88%, transparent);
  pointer-events: none;
}

/* Each step: number sits in its own column to the left of the title block. */
.home-v2-how-vertical-steps .home-v2-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
}

.home-v2-how-vertical-steps .home-v2-step-num {
  /* Shift up so the circle centre aligns with the h3 title centre */
  margin: -7px 0 0 0;
  position: relative;
  z-index: 2;
  background: #ffffff;
}

.home-v2-how-vertical-steps .home-v2-step-body h3 {
  margin: 0 0 10px 0;
}

.home-v2-how-vertical-steps .home-v2-step-body p {
  margin: 0;
}

.home-v2-how-vertical-steps .home-v2-step-body p + p {
  margin-top: 10px;
}

.home-v2-how-vertical-image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(155, 212, 255, 0.10);
  box-shadow:
    0 24px 56px -20px rgba(10, 22, 64, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.home-v2-how-vertical-image img,
.home-v2-how-vertical-image svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 999px) {
  .home-v2-how-vertical {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .home-v2-how-vertical-image {
    max-width: 480px;
    margin: 0 auto;
  }
}

.home-v2-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.home-v2-problem-grid--2x2 {
  grid-template-columns: repeat(2, 1fr);
}

.home-v2-card {
  background: #ffffff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.home-v2-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.home-v2-card-stroke {
  width: 32px;
  height: 2px;
  background: var(--color-accent-teal);
  border-radius: 1px;
  margin-bottom: 18px;
}

.home-v2-card-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(14, 122, 115, 0.10);
  color: var(--color-accent-teal);
  margin-bottom: 18px;
}

.home-v2-card-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.home-v2-section-closing {
  margin: 40px 0 40px 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-heading);
  font-weight: 600;
  max-width: 760px;
}

.home-v2-card h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.35;
}

.home-v2-card p {
  margin: 0;
  color: var(--color-muted);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ---------- HOW IT WORKS — 4 STEPS ---------- */

.home-v2-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.home-v2-steps--3 {
  grid-template-columns: repeat(3, 1fr);
}

.home-v2-steps-line {
  position: absolute;
  top: 18px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border) 12%, var(--color-border) 88%, transparent);
  z-index: 0;
}

.home-v2-steps--3 .home-v2-steps-line {
  left: 16.67%;
  right: 16.67%;
}

.home-v2-step {
  position: relative;
  z-index: 1;
}

.home-v2-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent-teal);
  margin-bottom: 24px;
}

.home-v2-step-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-teal);
  margin-bottom: 10px;
}

.home-v2-step h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-heading);
}

.home-v2-step p + p {
  margin-top: 10px;
}

.home-v2-step p {
  margin: 0;
  color: var(--color-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---------- CASE STUDY ---------- */

.home-v2-section--case h2 {
  font-size: 34px;
  letter-spacing: -0.01em;
  line-height: 1.22;
}

.home-v2-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.home-v2-metric {
  background: #ffffff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.home-v2-metric:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.home-v2-metric-num {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 500;
  color: var(--color-heading);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1;
}

.home-v2-metric-cap {
  margin: 0;
  color: var(--color-muted);
  font-size: 14.5px;
  line-height: 1.55;
}

/* ---------- CTA BANNER ---------- */

.home-v2-cta-card {
  position: relative;
  overflow: hidden;
  max-width: var(--content-width-v2);
  margin: 0 auto;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #0a1640 0%, #14225e 100%);
  box-shadow: var(--shadow-cta);
  padding: 72px 64px;
}

.home-v2-cta-glow {
  position: absolute;
  top: -120px;
  right: -120px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(125,211,252,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.home-v2-cta-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}

.home-v2-cta-text {
  max-width: 580px;
}

.home-v2-cta-text .home-v2-eyebrow { margin-bottom: 14px; }

.home-v2-cta-text h2 {
  margin: 0 0 16px 0;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #ffffff;
  max-width: none;
}

.home-v2-cta-text p {
  margin: 0;
  font-size: 16px;
  color: #c8d2e6;
  line-height: 1.6;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1199px) {
  .home-v2-inner { padding: 0 48px; }
  .home-v2-hero-inner { padding: 72px 48px 88px; }
  .home-v2-hero h1 { font-size: 48px; }
  .home-v2-hero .banner-text { font-size: 48px; }
  .home-v2-section h2 { font-size: 36px; }
  .home-v2-cta-card { padding: 56px 48px; margin: 0 48px; max-width: none; }
}

@media (max-width: 899px) {
  .home-v2-spec-strip { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .home-v2-spec-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .home-v2-problem-grid { grid-template-columns: 1fr; }
  .home-v2-steps { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .home-v2-steps-line { display: none; }
  .home-v2-metrics { grid-template-columns: 1fr; }
  .home-v2-cta-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 599px) {
  .home-v2-inner { padding: 0 24px; }
  .home-v2-hero-inner { padding: 54px 24px 64px; }
  .home-v2-hero h1 { font-size: 36px; }
  .home-v2-hero .banner-text { font-size: 36px; }
  .home-v2-section h2 { font-size: 28px; }
  .home-v2-section { padding: 54px 0 72px; }
  .home-v2-section--problem { padding: 60px 0 72px; }
  .home-v2-spec-strip { grid-template-columns: 1fr; }
  .home-v2-spec-item + .home-v2-spec-item { border-left: 0; padding-left: 0; }
  .home-v2-steps { grid-template-columns: 1fr; }
  .home-v2-cta-card { padding: 40px 28px; margin: 0 24px; }
  .home-v2-cta-text h2 { font-size: 24px; }
}

/* ---------- HERO PRODUCT PREVIEW (option 1) ---------- */

.home-v2-hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 56px;
  align-items: center;
}

.home-v2-hero-text { min-width: 0; }

.home-v2-preview {
  position: relative;
  background: #0a1640;
  border: 1px solid rgba(155, 212, 255, 0.10);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  box-shadow:
    0 32px 64px -24px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  transition: transform 280ms ease, box-shadow 280ms ease;
}

.home-v2-preview:hover {
  transform: translateY(-3px);
  box-shadow:
    0 40px 80px -28px rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(155, 212, 255, 0.18) inset,
    0 0 64px -10px rgba(155, 212, 255, 0.18);
}

.home-v2-preview img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- KNOWLEDGE GRAPH SECTION (option 5) ---------- */

.home-v2-section--graph {
  padding: 82px 0 110px;
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(155, 212, 255, 0.10), transparent 60%),
    #fafbfc;
  border-top: 1px solid var(--color-border-soft);
}

.home-v2-graph-lede {
  margin: 0 0 36px 0;
  max-width: 760px;
}

.home-v2-graph-lede p {
  margin: 0 0 14px 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-muted);
}

.home-v2-graph-lede p:last-child {
  margin-bottom: 0;
}

.home-v2-graph-queries-intro {
  margin: 0 0 18px 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-heading);
  font-weight: 600;
  max-width: 760px;
}

.home-v2-graph-wrap {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-card);
  margin-bottom: 28px;
  overflow: hidden;
}

.home-v2-graph-wrap svg,
.home-v2-graph-wrap img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.home-v2-graph-queries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.home-v2-graph-query {
  background: #ffffff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: var(--shadow-card);
}

.home-v2-graph-query-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-teal);
  flex: 0 0 auto;
  padding-top: 2px;
}

.home-v2-graph-query-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-heading);
}

/* ---------- CASE STUDY 2-COLUMN + SERVICES CALLOUT ---------- */

.home-v2-case-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.home-v2-case-image {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(155, 212, 255, 0.10);
  box-shadow:
    0 24px 56px -20px rgba(10, 22, 64, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.home-v2-case-image img {
  display: block;
  width: 100%;
  height: auto;
}

.home-v2-case-content {
  display: grid;
  gap: 36px;
}

.home-v2-services {
  border-top: 1px solid var(--color-border-soft);
  padding-top: 28px;
}

.home-v2-services-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-teal);
  margin-bottom: 16px;
}

.home-v2-services-list {
  list-style: none;
  margin: 0 0 22px 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.home-v2-services-list li {
  position: relative;
  padding-left: 22px;
  color: var(--color-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.home-v2-services-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 1.5px;
  background: var(--color-accent-teal);
  border-radius: 1px;
}

.home-v2-services-list li strong {
  color: var(--color-heading);
  font-weight: 600;
}

.home-v2-services-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-teal);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 160ms ease;
}

.home-v2-services-link {
  color: black;
}

.home-v2-services-link:visited {
  color: black;
}

.home-v2-services-link:hover {
  color: var(--color-heading);
}

/* When the case grid is in use, the metrics inside it become 3 narrower columns */
.home-v2-case-content .home-v2-metric {
  padding: 24px 22px;
}

.home-v2-case-content .home-v2-metric-num {
  font-size: 30px;
}

@media (max-width: 999px) {
  .home-v2-case-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .home-v2-case-image {
    max-width: 480px;
  }
}

@media (max-width: 599px) {
  .home-v2-case-content .home-v2-metrics {
    grid-template-columns: 1fr;
  }
}

/* ---------- BACKGROUND MOTIF ON --case (option 6) ---------- */

.home-v2-section--case {
  position: relative;
  overflow: hidden;
}

.home-v2-section--case::before {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -80px;
  width: 640px;
  height: 400px;
  background-image: url("../images/hero-bg.png?v=6");
  background-position: right bottom;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.home-v2-section--case > .home-v2-inner {
  position: relative;
  z-index: 1;
}

/* ---------- RESPONSIVE for new sections ---------- */

@media (max-width: 1199px) {
  .home-v2-hero-top { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 40px; }
  .home-v2-section--graph { padding: 66px 0 88px; }
  .banner-image img {
     display: none;
  }
}

@media (max-width: 999px) {
  .home-v2-hero-top { grid-template-columns: 1fr; gap: 56px; }
  .home-v2-preview { transform: none; max-width: 480px; }
  .home-v2-preview:hover { transform: translateY(-3px); }
  .home-v2-graph-queries { grid-template-columns: 1fr; }
  .home-v2-spec-strip { display: none; }
  .banner-image img {
     display: none;
  }
  .banner-text.half {
     max-width: 100%;
  }
}

@media (max-width: 599px) {
  .home-v2-graph-wrap { padding: 20px; }
  .home-v2-section--graph { padding: 48px 0 64px; }
}

.banner-text.half {
   max-width: 55%;
}

.banner-image {
   position: absolute;
   top: 2em;
   right: 0px;
   display: block;
   width: 40%;
}

.banner-image img {
   width: 100%;
   height: auto;
   margin-top: 1em;
}

.home-v2-btn--primary-light {
  background: #ffffff;
  color: var(--color-navy-mid);
  padding: 15px 24px;
  box-shadow: var(--shadow-button-light);
}
.home-v2-btn--primary-light:hover {
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}

.home-v2-preview:hover {
  transform: translateY(-3px);
  box-shadow:
    0 40px 80px -28px rgba(0, 0, 0, 0.70),
    0 0 0 1px rgba(155, 212, 255, 0.18) inset,
    0 0 64px -10px rgba(155, 212, 255, 0.18);
}

section.bg-image {
   padding-bottom: 0px;
}

/* On desktop the drawer is transparent — its children participate in the
   header's flex layout exactly as if it weren't there. */
.ardi-header-drawer {
     display: contents;
}
     
/* Hamburger button — hidden on desktop, shown on mobile in the @media block. */
.ardi-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: var(--color-on-dark);
  cursor: pointer;
  transition: background 140ms ease,
  border-color 140ms ease;
}
.ardi-mobile-toggle:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.35);
}
    
.ardi-mobile-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    margin: 3px 0;
    transition: transform 220ms ease, opacity 220ms ease;
 }
		  
 /* Bars morph into an X when the drawer is open. */
.ardi-header.is-menu-open
.ardi-mobile-toggle-bar:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.ardi-header.is-menu-open .ardi-mobile-toggle-bar:nth-child(2) {
    opacity: 0;
}
.ardi-header.is-menu-open .ardi-mobile-toggle-bar:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}
      
/* Backdrop behind the drawer — hidden on desktop. */
.ardi-header-backdrop { 
   display: none; 
}
      
/* Lock body scroll while the drawer is open. */
body.ardi-no-scroll { overflow: hidden; }

@media (max-width: 880px) {

  /* ---- Header bar collapses to: logo (left) + hamburger (right)
---- */
  .ardi-header-inner {
      justify-content: space-between;
          gap: 8px;
	      padding: 10px 14px;
	        }
.ardi-mobile-toggle {
    display: inline-flex;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1300; /* stay above the drawer so the X is tappable */
  }
  
    /* ---- Drawer ----
         Spans the full viewport, slides in from the right when
.is-menu-open
     is added to .ardi-header. Padding is 0 here so a drill-in sub-menu
          panel can cover the drawer edge-to-edge. */
.ardi-header-drawer {
     display: flex;
     height: 400px;
     flex-direction: column;
     align-items: stretch;
     gap: 0;
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     width: 100vw;
     box-sizing: border-box;
     background: var(--color-header-bg);
     box-shadow:-16px 0 40px rgba(0,0,0,0.35);
     padding: 0;
     overflow: hidden;
    transform: translateX(100%);
       transition: transform 250ms ease;
    z-index: 1200;
		      }
.ardi-header.is-menu-open .ardi-header-drawer
{ transform: translateX(0); }

  /* ---- Backdrop ---- */
    .ardi-header-backdrop {
        display: block;
	    position: fixed;
	        inset: 0;
		    background: rgba(0,0,0,0.45);
		        opacity: 0;
			    pointer-events: none;
			        transition: opacity 250ms ease;
				    z-index: 1150;
				      }
				        .ardi-header.is-menu-open
.ardi-header-backdrop {
    opacity: 1;
        pointer-events: auto;
	  }
	  
	    /* ---- Level-1 nav area ----
	         position: relative makes this the containing block
for the drill-down
     sub-menu panels — so they cover only this region, leaving the
action
     buttons (.ardi-header-actions) visible below in every view. */
       .ardi-main-nav {
           width: 100%;
	       box-sizing: border-box;
	           flex: 1 1 auto;
		       padding: 0;
		           overflow: hidden;
			       position: relative;
			         }
				   /* Force every parent <li> to be
position:static so the absolute drill
     panel positions against .ardi-main-nav, not the row that opened
it. */
.ardi-main-nav .menu-item.menu-mega,
.ardi-main-nav .menu-item-has-children {
        position: static;
}
.ardi-main-nav .menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        font-size: 16px;
        list-style: none;
        margin: 0;
        padding: 0px 22px 18px; /*78px top clears the hamburger / X area */
        box-sizing: border-box;
 }
     
       /* Same row styling for level-1 AND every sub-menu item —
apply the
     identical rules to both so the secondary menu visually matches the
          root menu exactly. The padding/color overrides defeat the
desktop
     `.sub-menu .menu-item` rules that would otherwise (a) zero out the
          row padding and (b) paint the text dark navy on the dark
drawer. */
  .ardi-main-nav .menu > .menu-item,
    .ardi-main-nav .sub-menu >
.menu-item:not(.menu-item-drill-header):not(.menu-item-mega-heading),
  .ardi-main-nav .sub-menu--wide >
.menu-item:not(.menu-item-drill-header):not(.menu-item-mega-heading),
  .ardi-main-nav .sub-menu--mega >
.menu-item:not(.menu-item-drill-header):not(.menu-item-mega-heading) {
    display: block;
        width: 100%;
	    box-sizing: border-box;
	        padding: 0px 0;
		    border-bottom: 1px solid rgba(255,255,255,0.08);
		      }
		        .ardi-main-nav .menu > .menu-item > a,
			  .ardi-main-nav .sub-menu >
.menu-item:not(.menu-item-drill-header):not(.menu-item-mega-heading) >
a,
  .ardi-main-nav .sub-menu--wide >
.menu-item:not(.menu-item-drill-header):not(.menu-item-mega-heading) >
a,
  .ardi-main-nav .sub-menu--mega >
.menu-item:not(.menu-item-drill-header):not(.menu-item-mega-heading) >
a {
    display: flex;
        align-items: center;
	    justify-content: space-between;
	        gap: 0;
		    width: 100%;
		        padding: 5px 3em;
			    font-size: 17px;
			        line-height: 1.2;
				    color: var(--color-on-dark) !important;
				        background: transparent;
					    border-radius: 0;
					        border-bottom: 0;
						  }
						  
						    /* Repurpose the
desktop down-caret as a right chevron on parent items. */
  .ardi-main-nav .menu-item-has-children > a::after,
    .ardi-main-nav .menu-item-has-children.is-open > a::after {
        margin-left: auto;
	    transform: translateY(-1px) rotate(-90deg);
	      }
	      
	        /* ---- Sub-menu = drill-in panel covering the level-1
area ---- */
  .ardi-main-nav .sub-menu,
    .ardi-main-nav .sub-menu--wide,
      .ardi-main-nav .sub-menu--mega {
          position: absolute;
	      top: 0;
	          right: 0;
		      bottom: 0;
		          left: 0;
			      width: 100%;
			          min-width: 0;
				      box-sizing: border-box;
				          background: var(--color-header-bg);
					      border: 0;
					          border-radius: 0;
						      box-shadow: none;
						          //padding: 78px 22px 28px;
    overflow-y: auto;
        transform: translateX(100%);
	    opacity: 1;
	        visibility: visible;
		    pointer-events: none;
		        transition: transform 250ms ease;
			    /* Cancel desktop grid / multi-column
layout */
    display: block;
        grid-template-columns: none;
	    columns: auto;
	        column-count: auto;
		    column-gap: 0;
		        list-style: none;
			    margin: 0;
			        gap: 0;
				    z-index: 2;
				      }
				        .ardi-main-nav
.sub-menu::before { display: none; }

  /* Open state */
    .ardi-main-nav .menu-item-has-children.is-open > .sub-menu,
      .ardi-main-nav .menu-item-has-children.is-open > .sub-menu--wide,
        .ardi-main-nav .menu-item-has-children.is-open >
.sub-menu--mega {
    transform: translateX(0);
        pointer-events: auto;
	  }
	  
	    /* Disable hover-open inside the drawer (iOS sticky-tap
would otherwise
     half-open the panel). Only the JS-driven .is-open opens it. */
       .ardi-main-nav .menu-item-has-children:hover > .sub-menu,
         .ardi-main-nav .menu-item-has-children:hover > .sub-menu--wide,
	   .ardi-main-nav .menu-item-has-children:hover >
.sub-menu--mega {
    transform: translateX(100%);
        pointer-events: none;
	  }
	    .ardi-main-nav .menu-item-has-children.is-open:hover > .sub-menu,
	      .ardi-main-nav .menu-item-has-children.is-open:hover >
.sub-menu--wide,
  .ardi-main-nav .menu-item-has-children.is-open:hover >
.sub-menu--mega {
    transform: translateX(0);
        pointer-events: auto;
	  }
	  
	    /* Reset multi-column break hints from the desktop
mega-menu — otherwise
     `break-before: column` on each heading hides the rest of the
items. */
  .ardi-main-nav .sub-menu--mega .menu-item,
    .ardi-main-nav .sub-menu--mega .menu-item-mega-heading {
        break-before: auto;
	    break-inside: auto;
	        break-after: auto;
		  }
		    /* Resources mega-menu: drop the section headings,
show a flat list. */
  .ardi-main-nav .sub-menu--mega .menu-item-mega-heading { display:
none; }

  /* Hide the icons so sub-menu rows match the icon-less level-1 rows.
*/
  .ardi-main-nav .sub-menu .ardi-menu-icon,
    .ardi-main-nav .sub-menu--wide .ardi-menu-icon,
      .ardi-main-nav .sub-menu--mega .ardi-mega-icon { display: none; }
      
        /* Override the desktop sub-menu hover background. */
	  .ardi-main-nav .sub-menu >
.menu-item:not(.menu-item-drill-header):not(.menu-item-mega-heading) >
a:hover,
  .ardi-main-nav .sub-menu--wide >
.menu-item:not(.menu-item-drill-header):not(.menu-item-mega-heading) >
a:hover,
  .ardi-main-nav .sub-menu--mega >
.menu-item:not(.menu-item-drill-header):not(.menu-item-mega-heading) >
a:hover {
    background: transparent;
        color: #ffffff !important;
	    transform: none;
	      }
	      
	        /* ---- Drill header (Back button + section title) at
top of each sub-menu ---- */
  .menu-item-drill-header {
      display: flex !important;
          align-items: center;
	      gap: 14px;
	          padding: 10px 0 16px 0;
		      border-bottom: 1px solid rgba(255,255,255,0.08);
		          margin-bottom: 6px;
			      list-style: none;
			        }
				  .menu-item-drill-back {
				      display: inline-flex;
				          align-items: center;
					      gap: 6px;
					          background: transparent;
						      border: 0;
						          padding: 8px
10px 8px 4px;
    color: #cbd5e1;
        cursor: pointer;
	    font: inherit;
	        font-size: 14px;
		    border-radius: 8px;
		      }
		        .menu-item-drill-back:hover {
			    background: rgba(255,255,255,0.06);
			        color: #ffffff;
				  }
				    .menu-item-drill-back-arrow {
font-size: 18px; line-height: 1; }
  .menu-item-drill-title {
      color: #ffffff;
          font-weight: 700;
	      font-size: 17px;
	          letter-spacing: 0.2px;
		    }
		    
/* ---- Action buttons at the bottom of the
drawer ----
     Sibling of .ardi-main-nav, so it remains visible in every view
          (level-1 and any drilled-in sub-menu). Centered horizontally
with
     a comfortable max-width per button. */
     
.ardi-header-actions {
       //flex-direction: column;
       align-items: center;
       gap: 10px;
       min-width: 0;
       width: 100%;
       box-sizing: border-box;
       margin: 0;
       padding: 18px 24px 32px;
       border-top: 1px solid rgba(255,255,255,0.08);
}
.ardi-header-actions a,
.ardi-header-actions
.ardi-search-btn {
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    text-align: center;
    font-size: 15px;
    padding: 12px 14px;
}

.ardi-search-btn {
    height: 44px;
    gap: 8px;
}
}
				      
				      /* Drill header is mobile-only —
hide on desktop. */
@media (min-width: 881px) {
  .menu-item-drill-header { display: none !important; }
  }
  
.hero-subtitle + .hero-subtitle {
  margin-top: -32px;
}

@media (max-width: 1024px) {
.home-v2-body .banner-text.align-self-start {
   text-align: left;
}
}


.home-v2-section--trust {
  background: #ffffff;
  padding: 40px 0 44px;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.home-v2-trust-eyebrow {
  margin-bottom: 18px;
}

.home-v2-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
}

.home-v2-trust-tile {
  flex: 1 1 220px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  background: #fafbfc;
  color: #34405a;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
}

.home-v2-trust-tile--brand {
  color: var(--color-navy-deep);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
}

@media (max-width: 640px) {
  .home-v2-trust-strip { gap: 10px; }
  .home-v2-trust-tile { flex-basis: 100%; }
  .home-v2-trust-tile--brand { font-size: 20px; }
}

.icon img {
  max-height: 20px;
  margin-right: 1em;
  display: inline-block;
}

.contact-methods {
  list-style-type: none;
  padding: none;
}

.banner.full-width {
  margin-bottom: 0em;
}

.container .row {
   //display: block;
}

.banner-image .home-v2-preview {
   width: 100% !important;
   height: auto !important;
}

.home-v2-lede + .home-v2-lede {
  margin-top: 0px;
  position: relative;
  top: -30px;
}

.section .container .contact-methods {
   padding-left: 0px;
}
.section .container .contact-methods li {
  margin-bottom: 0.5em;
}

.ardi-footer-links a:visited {
  color: #cbd5e1;
}

.ardi-footer-legal a:visited {
  color: #94a3b8;
}

.legal h2 {
   font-weight: normal;
   font-size: 32px;
}

.home-v2 .wpdm-button-area.card a {
   color: white !important;
}

.wpdm-download-link.btn {
   background-color: blue;
}

.wpdm-download-link.btn:hover {
   background-color: cyan;
}

.row .w3eden .btn-primary {
   background-color: blue;
}

.row .w3eden .btn-primary:hover {
   background-color: #000066;
}

.w3eden .package-title {
   font-size: 20px;
}

.w3eden .text-small {
   font-size: 12px;
}

.w3eden .col-md-7 h4 {
  margin-bottom: 1em;
  margin-top: 1em;
}

.w3eden a.btn {
  background-color: blue;
}

.home-v2 .home-v2-btn--primary-light {
   color: black !important;
}

.home-v2 .home-v2-btn--ghost-on-dark {
   color: white !important;
}

.home-v2 .home-v2-btn--primary-light:visited {
   color: black !important;
}

.home-v2 .home-v2-btn--ghost-on-dark:visited {
   color: white !important;
}

.bluebgimage {
  padding: 10px;
  background-color: #000044;
  border-radius: 10px;
  margin-bottom: 0px;
}

.right-col .imagecol video {
  border-radius: 10px;
  border: 2px solid black;
}