/* ============================================================
   Donna365 — brand overrides
   This file loads AFTER the theme's style.css, so anything here
   wins. Keep brand customisations isolated here so the upstream
   theme can be updated cleanly.
   ============================================================ */

:root {
  --donna-brand:        #5B5BFF;
  --donna-brand-ink:    #0A0A1A;
  --donna-accent:       #C7FF5B;
  --donna-bg:           #0A0A1A;
  --donna-surface:      #14142A;
  --donna-text:         #F4F4FF;
  --donna-muted:        #8C8CB0;
  --donna-font-display: "Clash Display", "Inter", system-ui, sans-serif;
  --donna-font-body:    "Inter", system-ui, sans-serif;
}

body.page-home .hero__title,
.page-banner__title {
  font-family: var(--donna-font-display);
}

/* ──── FIX 1: Logo sized + spaced (no squish, room from menu) ──── */
.tf-header .logo-site {
  flex: 0 0 auto;
  margin-right: 28px;
}
.tf-header .logo-site img {
  height: 66px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
}

/* ──── FIX 2: Header pill wide enough for 8 menu items + CTA (no overlap) ──── */
.tf-header .header-inner .tf-btn {
  padding: 12px 26px;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* ADO 911 — pill hugs content (6-7 items; was fixed 1320px for old 8-item menu).
   width:fit-content collapses the pill to logo + nav + CTA; justify-content
   flex-start eliminates space-between's free-space distribution so there is
   no dead gap; max-width 90vw is a safety cap on narrower desktops. */
.tf-header .header-inner,
.tf-header.header2 .header-inner {
  width: fit-content;
  max-width: 90vw;
  gap: 20px;
  justify-content: flex-start;
}
.tf-header .box-navigation {
  flex: 0 0 auto;
}
/* Comfortable inter-item spacing for the nav links */
.tf-header .nav-menu-main {
  gap: 18px;
}
.tf-header .nav-menu-main .menu-item > .item-link {
  white-space: nowrap;
}
/* 8 menu items + logo + CTA only fit comfortably at >=1200px. Below that, collapse
   to the hamburger (markup now uses d-xl-*). Hide the inline menu under 1200px so the
   CTA never clips off-canvas at ~1024px. (Theme default hid it only under 992px.) */
@media (max-width: 1199.98px) {
  .tf-header .box-navigation {
    display: none !important;
  }
}
/* ====================================================================
   MOBILE OFFCANVAS MENU — full override.
   The theme built this for ~4 short items at a 60px editorial font,
   right-aligned + vertically centred, which clips 8 items off-screen.
   Rebuild it as a normal, readable, scrollable, left-aligned nav list.
   ==================================================================== */

/* Solid dark backdrop (was see-through; page bled behind the text) */
.offcanvas-menu {
  background-color: #0c0e12 !important;
  backdrop-filter: blur(10px);
}
.offcanvas-menu .offcanvas-content {
  background: #0c0e12;
  padding-top: 16px;
  padding-bottom: 24px;
  height: 100%;
  overflow-y: auto;            /* whole panel scrolls as one natural column */
  -webkit-overflow-scrolling: touch;
}
.offcanvas-menu .offcanvas-content_wrapin {
  gap: 12px;
  height: auto;                /* do not force 100% height -> no clipping */
  min-height: 100%;
}

/* Center column: top-aligned, natural height, never vertically centred */
.offcanvas-menu .canvas_center {
  justify-content: flex-start !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}

/* The menu list: even vertical rhythm, full width, left aligned */
.offcanvas-menu .nav-ul-mb {
  display: block !important;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.offcanvas-menu .nav-ul-mb > li {
  text-align: left !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.offcanvas-menu .nav-ul-mb > li > .item {
  width: 100%;
}
.offcanvas-menu .nav-ul-mb .has-sub-menu {
  display: block !important;
  place-items: stretch !important;
  width: 100%;
}
/* Normalise both leaf links and sub-menu toggles to identical row padding so
   every row (and its divider) has the same rhythm. */
.offcanvas-menu .nav-ul-mb > li > .item > .mb-menu-link,
.offcanvas-menu .nav-ul-mb > li > .item > .has-sub-menu > .mb-menu-link {
  padding: 15px 0 !important;
}

/* Menu links: sane size, tappable (theme set pointer-events:none), left aligned.
   Force uniform colour/weight/opacity (theme's infinite-slide effect faded some). */
.offcanvas-menu .mb-menu-link {
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  width: 100% !important;
  pointer-events: auto !important;
  padding: 15px 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  color: #ffffff !important;
  opacity: 1 !important;
  overflow: visible !important;
}
.offcanvas-menu .mb-menu-link .text {
  pointer-events: auto !important;
  color: #ffffff !important;
  opacity: 1 !important;
}
/* Kill the theme's duplicate infinite-slide text overlay inside menu links */
.offcanvas-menu .mb-menu-link .infiniteSlide_text_main,
.offcanvas-menu .mb-menu-link .infiniteSlide_text_main::before {
  display: none !important;
}
/* Disable the theme's infinite-slide hover gimmick sizing on mobile */
.offcanvas-menu .mb-menu-link > * {
  position: static !important;
}
/* Group container + label left-aligned (theme right-aligns nav-ul-mb li) */
.offcanvas-menu .mb-group,
.offcanvas-menu .mb-group * {
  text-align: left !important;
}
.offcanvas-menu .mb-group-label {
  cursor: default;
  display: block;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 15px 0 6px !important;
}

/* Sub-menu items: always visible, indented, LEFT aligned (theme right-aligns them) */
.offcanvas-menu .sub-nav-menu {
  display: block !important;
  padding: 0 0 12px 14px;
  margin: 0;
  list-style: none;
  text-align: left !important;
}
.offcanvas-menu .sub-nav-menu li {
  border: 0 !important;
  text-align: left !important;
}
.offcanvas-menu .sub-nav-link {
  display: block;
  font-size: 18px !important;
  line-height: 1.4;
  font-weight: 600;
  padding: 9px 0 !important;
  color: rgba(255, 255, 255, 0.82) !important;
}
.offcanvas-menu .sub-nav-link::after {
  content: " \2197";
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

/* CTA inside the offcanvas (theme shipped without one): white on dark, full width */
.offcanvas-menu .canvas_cta {
  margin-top: 16px;
  margin-bottom: 16px;
}
.offcanvas-menu .canvas_cta .tf-btn {
  display: flex !important;
  background: #ffffff !important;
  color: #0c0e12 !important;
  border-color: #ffffff !important;
}

/* CTA + footer flow naturally after the list (no bottom-pinning -> no overlap) */
.offcanvas-menu .canvas_cta {
  margin-top: 8px;
  margin-bottom: 16px;
  flex: 0 0 auto;
}
.offcanvas-menu .canvas_foot {
  gap: 10px;
  padding-top: 4px;
  padding-bottom: 28px;        /* clear the viewport bottom edge (socials were clipped) */
  flex: 0 0 auto;
}

/* CARD 917: constrain offcanvas logo size so it's not huge on dark menu */
.offcanvas-menu .canvas_head .logo-site img {
  max-height: 36px;
  width: auto;
}

.text-display-2 {
  letter-spacing: 0;
}

/* ── SEO Task 1 — hero h1 semantic upgrade, zero visual change ────────────
   Browsers apply a default h1 margin (0.67em top+bottom). The theme's
   .text-display-2 class already sets font-size/line-height/weight (96px),
   so we must NOT touch those — only neutralise the UA-default margin.
   (Earlier this also set font-size:inherit, which beat .text-display-2 on
   specificity and shrank every inner-page hero title to body-text size —
   the homepage only escaped via its own page-home override. Fixed: margin
   reset ONLY; the display classes now apply as intended.) */
.section-hero h1.title,
.section-page-title h1.title {
  margin: 0;
}

/* ──── FIX 3: Hero text overlay for readability ──── */
.section-hero .hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

/* ──── FIX 4: "Built by lawyers, for lawyers." — no fade on second line ──── */
.text-gradient-2 {
  background: linear-gradient(132.09deg, #43484D 11.15%, #292C2E 79.01%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ──── FIX 5: Pricing card buttons aligned at bottom (ADO 883) ──── */
/* Root cause: The featured card (Standard Rollout) has a 2-line bestFor
   paragraph vs 3-line on the other cards, making its natural flex height
   888px while the grid row is 914px. Chromium does not stretch flex
   container grid items to the row height even with align-self:stretch -
   it uses the intrinsic flex content height instead. Fix: height:100%
   resolves to the grid area (row) height of 914px for all 3 cards so
   every card is the same height; margin-top:auto on the button then
   pushes it to the bottom of each card. */
.pricing-option-grid {
  align-items: stretch !important;
}
.pricing-option-card {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  height: 100% !important;
}
.pricing-option-card > .tf-btn {
  margin-top: auto !important;
}

.section-hero .hero-image {
  background-image: url("../images/section/donna365-legal-ai-hero.webp");
}

@media (min-width: 992px) {
  body.page-home .section-hero .content-wrap {
    padding: 140px 0 120px;
  }

  body.page-home .section-hero .content-wrap .title {
    margin-bottom: 22px;
  }

  body.page-home .section-hero .text-display-2 {
    font-size: 84px;
    line-height: 88px;
  }
}

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



footer .footer-image img {
  max-width: min(520px, 86vw);
  height: auto;
  opacity: 0.14;
}

.site-footer {
  position: relative;
  overflow: hidden;
  padding: 88px 0 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(94, 234, 212, 0.22), transparent 34%),
    radial-gradient(circle at 92% 10%, rgba(240, 91, 79, 0.2), transparent 30%),
    linear-gradient(135deg, #111114 0%, #1d1d22 54%, #111114 100%);
  color: #ffffff;
}

/* ADO-908: cross-grid pattern removed — .site-footer::before deleted */

.site-footer .container {
  position: relative;
  z-index: 1;
}

.site-footer .footer-content {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr) auto;
  gap: 32px;
  align-items: center;
  padding: 0 0 46px;
  text-align: left;
}

.site-footer .footer-brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.site-footer .footer-content .footer-logo {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.site-footer .footer-content .footer-logo img {
  height: 96px;                  /* BUG-885: 2× original 48px footer logo */
  width: auto;
}


.site-footer .footer-eyebrow {
  color: #5eead4;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  text-transform: uppercase;
}

.site-footer .footer-content .title {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 42px;
  line-height: 46px;
  letter-spacing: 0;
}

.site-footer .footer-content .text {
  max-width: 640px;
  margin: 0;
  color: #d4d4d8;
  font-size: 17px;
  line-height: 28px;
}

.site-footer .footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 230px;
  padding: 18px 24px;
  border-radius: 999px;
  background: #ffffff;
  color: #18181b;
  font-weight: 800;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
}

.site-footer .footer-social-wrap {
  padding: 34px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.site-footer .tf-social-1 {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.site-footer .tf-social-1 a {
  min-width: 190px;
  justify-content: space-between;
  padding: 12px 12px 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  box-shadow: none;
}

.site-footer .tf-social-1 a .social-item {
  background: #ffffff;
  color: #18181b;
  box-shadow: none;
}

.site-footer .footer-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 28px 0;
}

.site-footer .footer-bottom::before {
  display: none;
}

.site-footer .footer-bottom > * {
  width: auto;
}

.site-footer .footer-links {
  flex-wrap: wrap;
  gap: 14px 20px !important;
}

.site-footer .footer-links a,
.site-footer .action-go-top {
  color: #f4f4f5;
}

.site-footer .coppy-rights {
  color: #a1a1aa !important;
  white-space: nowrap;
}

.site-footer .action-go-top {
  justify-self: end;
}

/* ──── CARD 918: footer contact block ──── */
.site-footer .footer-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  margin-top: 34px;
}
.site-footer .footer-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #d4d4d8;
  font-size: 15px;
  line-height: 22px;
}
.site-footer .footer-contact-item .icon {
  font-size: 14px;
  color: #5eead4;
}
.site-footer .footer-contact-item a {
  color: #d4d4d8;
  text-decoration: none;
}
.site-footer .footer-contact-item a:hover {
  color: #ffffff;
  text-decoration: underline;
}
@media (max-width: 767px) {
  .site-footer .footer-contact {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
}

/* ADO-872: hub tile enlarged 1.5x (208->312, 160->240, logo 180->270) */
.features-center {
  width: 312px;
  height: 240px;
}

.features-center img {
  max-width: 270px;
  height: auto;
  object-fit: contain;
}

@media (max-width: 767px) {
  footer .footer-links {
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 10px 16px !important;
  }
}

@media (max-width: 991px) {
  .site-footer {
    padding-top: 62px;
  }

  .site-footer .footer-content {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
    justify-items: center;
  }

  .site-footer .footer-brand-lockup {
    align-items: center;
  }

  .site-footer .footer-content .title {
    font-size: 34px;
    line-height: 40px;
  }

  .site-footer .footer-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .site-footer .action-go-top {
    justify-self: center;
  }
}

@media (max-width: 767px) {

  .site-footer .footer-content .title {
    font-size: 30px;
    line-height: 36px;
  }

  .site-footer .footer-content .text {
    font-size: 15px;
    line-height: 25px;
  }

  .site-footer .footer-cta,
  .site-footer .tf-social-1 a {
    width: 100%;
    max-width: 330px;
  }

  .site-footer .tf-social-1 {
    display: grid !important;
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .site-footer .coppy-rights {
    white-space: normal;
  }
}

.section-benefits-redesign {
  background: #f7f8f7;
}

.section-benefits-redesign .heading-section {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 48px;
}

.section-benefits-redesign .heading-title {
  letter-spacing: 0;
}

.benefits-lead {
  max-width: 760px;
  margin: 18px auto 0;
  font-size: 18px;
  line-height: 30px;
}

.benefits-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 24px;
  margin-bottom: 24px;
  align-items: stretch;
}

.benefits-visual-panel,
.benefits-decision-panel,
.benefits-card {
  border: 1px solid rgba(24, 24, 27, 0.1);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(24, 24, 27, 0.08);
}

.benefits-visual-panel {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  background: #ffffff;
  height: 100%;
}

.benefits-visual-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.benefits-visual-panel::after {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 42%, rgba(255, 255, 255, 0.18) 100%);
}

.benefits-visual-copy {
  position: relative;
  z-index: 1;
  max-width: 520px;
  padding: 40px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.benefits-kicker,
.benefits-card-kicker {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  color: #0f766e;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  text-transform: uppercase;
}

.benefits-visual-copy h3,
.benefits-decision-panel h3,
.benefits-card h3 {
  color: #18181b;
  letter-spacing: 0;
}

.benefits-visual-copy h3 {
  max-width: 460px;
  margin: 18px 0 16px;
  font-size: 38px;
  line-height: 44px;
}

.benefits-visual-copy p {
  max-width: 500px;
  color: #52525b;
  font-size: 17px;
  line-height: 29px;
}

.benefits-decision-panel {
  background: #18181b;
  color: #fafafa;
  padding: 34px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.benefits-decision-panel .benefits-kicker {
  color: #5eead4;
}

.benefits-decision-panel h3 {
  color: #ffffff;
  margin: 18px 0 24px;
  font-size: 30px;
  line-height: 36px;
}

.benefits-decision-panel ul,
.benefits-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.benefits-decision-panel li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 16px;
  line-height: 24px;
}

.benefits-decision-panel li span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(94, 234, 212, 0.65);
  position: relative;
  margin-top: 1px;
}

.benefits-decision-panel li span::after {
  position: absolute;
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid #5eead4;
  border-bottom: 2px solid #5eead4;
  transform: rotate(-45deg);
  top: 7px;
  left: 6px;
}

.benefits-decision-panel p {
  margin-top: auto;
  padding-top: 28px;
  color: #d4d4d8;
  font-size: 16px;
  line-height: 27px;
}

.benefits-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.benefits-card {
  background: #ffffff;
  padding: 26px;
  min-height: 430px;
  display: flex;
  flex-direction: column;
}

.benefits-card-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 34px;
}

.benefits-index {
  color: #f05b4f;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
}

.benefits-card h3 {
  margin-bottom: 14px;
  font-size: 24px;
  line-height: 30px;
}

.benefits-card p {
  color: #52525b;
  font-size: 15px;
  line-height: 25px;
  margin-bottom: 20px;
}

.benefits-card li {
  position: relative;
  padding-left: 18px;
  color: #3f3f46;
  font-size: 14px;
  line-height: 23px;
}

.benefits-card li + li {
  margin-top: 8px;
}

.benefits-card li::before {
  position: absolute;
  content: "";
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0f766e;
}

.benefits-proof {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(24, 24, 27, 0.1);
  color: #18181b;
  font-size: 14px;
  line-height: 20px;
  font-weight: 800;
}

@media (max-width: 1199px) {
  .benefits-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .benefits-card {
    min-height: 360px;
  }
}

@media (max-width: 991px) {
  .benefits-showcase {
    grid-template-columns: 1fr;
  }

  .benefits-visual-panel,
  .benefits-visual-copy {
    min-height: 420px;
  }

  .benefits-visual-copy h3 {
    font-size: 32px;
    line-height: 38px;
  }
}

@media (max-width: 767px) {
  .section-benefits-redesign .heading-section {
    margin-bottom: 32px;
  }

  .section-benefits-redesign .heading-title {
    font-size: 38px;
    line-height: 44px;
  }

  .benefits-lead {
    font-size: 16px;
    line-height: 26px;
  }

  .benefits-visual-copy,
  .benefits-decision-panel,
  .benefits-card {
    padding: 22px;
  }

  .benefits-visual-panel,
  .benefits-visual-copy {
    min-height: 460px;
  }

  .benefits-visual-panel::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.86) 52%, rgba(255, 255, 255, 0.26) 100%);
  }

  .benefits-card-grid {
    grid-template-columns: 1fr;
  }

  .benefits-card {
    min-height: unset;
  }
}

.section-about-redesign {
  background: #f4f4f5;
}

.section-about-redesign .heading-section {
  margin-bottom: 0;
}

.about-redesign-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  gap: 34px;
  align-items: stretch;
}

.about-redesign-copy {
  min-height: 720px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section-about-redesign .heading-title {
  max-width: 920px;
  margin-top: 28px;
  font-size: 82px;
  line-height: 88px;
  letter-spacing: 0;
}

.about-redesign-lead {
  max-width: 760px;
  margin: 28px 0 0;
  color: #3f3f46;
  font-size: 19px;
  line-height: 31px;
}

.about-redesign-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.about-proof-item {
  min-height: 146px;
  border: 1px solid rgba(24, 24, 27, 0.09);
  border-radius: 8px;
  background: #ffffff;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.about-proof-value {
  color: #ff143f;
  font-size: 28px;
  line-height: 34px;
  font-weight: 800;
}

.about-proof-label {
  color: #3f3f46;
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
}

.about-redesign-points {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  max-width: 780px;
}

.about-redesign-points li {
  position: relative;
  padding: 14px 0 14px 30px;
  border-top: 1px solid rgba(24, 24, 27, 0.11);
  color: #27272a;
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
}

.about-redesign-points li::before {
  position: absolute;
  content: "";
  left: 0;
  top: 23px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #14b8a6;
  box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.13);
}

.about-redesign-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}

.about-redesign-actions span {
  color: #52525b;
  font-size: 15px;
  line-height: 22px;
  font-weight: 800;
}

.about-redesign-visual {
  position: relative;
  min-height: 720px;
  border-radius: 8px;
  overflow: hidden;
  background: #18181b;
  box-shadow: 0 18px 60px rgba(24, 24, 27, 0.18);
}

.about-redesign-visual img {
  width: 100%;
  height: 100%;
  min-height: 720px;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.03) contrast(1.02);
}

.about-redesign-visual::after {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 24, 27, 0.02) 0%, rgba(24, 24, 27, 0.05) 42%, rgba(24, 24, 27, 0.78) 100%);
  pointer-events: none;
}

.about-visual-card {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(24, 24, 27, 0.78);
  backdrop-filter: blur(16px);
  padding: 26px;
}

.about-visual-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f4f4f5;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  text-transform: uppercase;
}

.about-visual-kicker span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff143f;
}

.about-visual-card h3,
.about-visual-card .about-visual-title {
  margin: 16px 0 10px;
  color: #ffffff;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: 0;
}

.about-visual-card p {
  max-width: 560px;
  color: #d4d4d8;
  font-size: 15px;
  line-height: 25px;
}

@media (max-width: 1199px) {
  .about-redesign-grid {
    grid-template-columns: 1fr;
  }

  .about-redesign-copy,
  .about-redesign-visual,
  .about-redesign-visual img {
    min-height: unset;
  }

  .about-redesign-visual {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 767px) {
  .section-about-redesign .heading-title {
    font-size: 44px;
    line-height: 50px;
  }

  .about-redesign-lead {
    font-size: 16px;
    line-height: 27px;
  }

  .about-redesign-proof {
    grid-template-columns: 1fr;
  }

  .about-redesign-visual {
    aspect-ratio: auto;
    min-height: 560px;
  }

  .about-redesign-visual img {
    min-height: 560px;
  }

  .about-visual-card {
    left: 18px;
    right: 18px;
    bottom: 18px;
    padding: 20px;
  }

  .about-visual-card h3,
  .about-visual-card .about-visual-title {
    font-size: 23px;
    line-height: 29px;
  }
}

.section-trust-signals {
  position: relative;
  overflow: hidden;
}

.trust-signals-head {
  max-width: 960px;
  margin: 0 auto 42px;
  text-align: center;
}

.section-trust-signals .heading-title {
  margin-top: 22px;
  font-size: 54px;
  line-height: 60px;
  letter-spacing: 0;
}

.trust-signals-lead {
  max-width: 850px;
  margin: 22px auto 0;
  color: #d4d4d8;
  font-size: 18px;
  line-height: 30px;
}

.trust-signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  gap: 18px;
  align-items: stretch;
}

.trust-signal-card {
  min-height: 450px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03));
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.24);
  height: 100%;
}

.trust-signal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
}

.trust-signal-index {
  color: #ff143f;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
}

.trust-signal-kicker {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 20, 63, 0.32);
  border-radius: 999px;
  background: rgba(255, 20, 63, 0.1);
  color: #ff4d6d;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  text-transform: uppercase;
}

.trust-signal-card h3 {
  color: #ffffff;
  margin-bottom: 14px;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: 0;
}

.trust-signal-card p {
  color: #d4d4d8;
  font-size: 16px;
  line-height: 27px;
}

.trust-signal-card ul {
  list-style: none;
  padding: 22px 0 0;
  margin: 0;
}

.trust-signal-card li {
  position: relative;
  padding-left: 22px;
  color: #f4f4f5;
  font-size: 15px;
  line-height: 25px;
}

.trust-signal-card li + li {
  margin-top: 10px;
}

.trust-signal-card li::before {
  position: absolute;
  content: "";
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #14b8a6;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.14);
}

.trust-signal-sources {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.trust-signal-source {
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  font-size: 14px;
  line-height: 20px;
  font-weight: 800;
}

.trust-signal-source:hover {
  color: #ff4d6d;
}

.trust-signals-note {
  max-width: 840px;
  margin: 28px auto 0;
  color: #a1a1aa;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
}

@media (max-width: 991px) {
  .section-trust-signals .heading-title {
    font-size: 42px;
    line-height: 48px;
  }

  .trust-signal-grid {
    grid-template-columns: 1fr;
  }

  .trust-signal-card {
    min-height: unset;
  }
}

.section-pricing-redesign {
  background: #f4f4f5;
}

.pricing-redesign-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.72fr);
  gap: 42px;
  align-items: end;
  margin-bottom: 34px;
}

.section-pricing-redesign .heading-title {
  max-width: 940px;
  margin-top: 24px;
  font-size: 70px;
  line-height: 76px;
  letter-spacing: 0;
}

.pricing-redesign-lead {
  color: #3f3f46;
  font-size: 18px;
  line-height: 30px;
  margin: 0 0 8px;
}

.pricing-redesign-brief {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.pricing-principle {
  min-height: 82px;
  border: 1px solid rgba(24, 24, 27, 0.09);
  border-radius: 8px;
  background: #ffffff;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #18181b;
  font-size: 15px;
  line-height: 22px;
  font-weight: 800;
}

.pricing-principle span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff143f;
  box-shadow: 0 0 0 5px rgba(255, 20, 63, 0.12);
  flex: 0 0 auto;
}

.pricing-option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.pricing-option-card {
  min-height: 720px;
  border: 1px solid rgba(24, 24, 27, 0.1);
  border-radius: 8px;
  background: #ffffff;
  padding: 30px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 60px rgba(24, 24, 27, 0.1);
}

.pricing-option-card.is-featured {
  background: #18181b;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 22px 70px rgba(24, 24, 27, 0.26);
}

.pricing-option-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 96px;
}

.pricing-option-status {
  display: block;
  color: #71717a;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.pricing-option-card.is-featured .pricing-option-status {
  color: #a1a1aa;
}

.pricing-option-card h3 {
  color: #18181b;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: 0;
  margin: 0;
}

.pricing-option-card.is-featured h3 {
  color: #ffffff;
}

.pricing-option-badge {
  border: 1px solid rgba(255, 20, 63, 0.32);
  border-radius: 999px;
  background: rgba(255, 20, 63, 0.1);
  color: #ff143f;
  padding: 7px 12px;
  white-space: nowrap;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
}

.pricing-option-commercial {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 28px;
  padding: 24px 0;
  border-top: 1px solid rgba(24, 24, 27, 0.1);
  border-bottom: 1px solid rgba(24, 24, 27, 0.1);
}

.pricing-option-card.is-featured .pricing-option-commercial {
  border-color: rgba(255, 255, 255, 0.14);
}

.pricing-option-label {
  color: #71717a;
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.pricing-option-card.is-featured .pricing-option-label {
  color: #a1a1aa;
}

.pricing-option-amount {
  color: #18181b;
  font-size: 42px;
  line-height: 48px;
  font-weight: 800;
  letter-spacing: 0;
}

.pricing-option-card.is-featured .pricing-option-amount {
  color: #ffffff;
}

.pricing-option-qualifier,
.pricing-option-setup {
  color: #52525b;
  font-size: 15px;
  line-height: 23px;
  font-weight: 800;
}

.pricing-option-card.is-featured .pricing-option-qualifier,
.pricing-option-card.is-featured .pricing-option-setup {
  color: #d4d4d8;
}

.pricing-option-best {
  color: #3f3f46;
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  margin: 24px 0 0;
}

.pricing-option-card.is-featured .pricing-option-best {
  color: #f4f4f5;
}

.pricing-option-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 28px;
  margin-bottom: 32px;
}

.pricing-option-card.is-featured .pricing-option-columns {
  margin-top: 54px;
}

.pricing-option-columns h4 {
  color: #18181b;
  font-size: 14px;
  line-height: 20px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.pricing-option-card.is-featured .pricing-option-columns h4 {
  color: #ffffff;
}

.pricing-option-columns ul,
.pricing-exclusions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing-option-columns li {
  position: relative;
  padding-left: 22px;
  color: #3f3f46;
  font-size: 15px;
  line-height: 24px;
}

.pricing-option-columns li + li {
  margin-top: 9px;
}

.pricing-option-card.is-featured .pricing-option-columns li {
  color: #e4e4e7;
}

.pricing-option-columns li::before,
.pricing-exclusions li::before {
  position: absolute;
  content: "";
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #14b8a6;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.13);
}

.pricing-option-card .tf-btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

.pricing-exclusions {
  margin-top: 18px;
  border: 1px solid rgba(24, 24, 27, 0.1);
  border-radius: 8px;
  background: #ffffff;
  padding: 26px;
  display: grid;
  grid-template-columns: minmax(260px, 0.46fr) minmax(0, 1fr);
  gap: 28px;
}

.pricing-exclusions span {
  color: #ff143f;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  text-transform: uppercase;
}

.pricing-exclusions h3 {
  color: #18181b;
  font-size: 26px;
  line-height: 32px;
  letter-spacing: 0;
  margin-top: 10px;
}

.pricing-exclusions ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
}

.pricing-exclusions li {
  position: relative;
  padding-left: 22px;
  color: #3f3f46;
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
}

@media (max-width: 1199px) {
  .pricing-redesign-head,
  .pricing-exclusions {
    grid-template-columns: 1fr;
  }

  .pricing-redesign-brief {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-option-grid {
    grid-template-columns: 1fr;
  }

  .pricing-option-card {
    min-height: unset;
  }
}

@media (max-width: 767px) {
  .section-pricing-redesign .heading-title {
    font-size: 42px;
    line-height: 48px;
  }

  .pricing-redesign-lead {
    font-size: 16px;
    line-height: 27px;
  }

  .pricing-redesign-brief,
  .pricing-exclusions ul {
    grid-template-columns: 1fr;
  }

  .pricing-option-card,
  .pricing-exclusions {
    padding: 22px;
  }

  .pricing-option-top {
    flex-direction: column;
    min-height: unset;
  }

  .pricing-option-amount {
    font-size: 34px;
    line-height: 40px;
  }
}

.section-contact-redesign {
  background: #f4f4f5;
  padding-top: 92px;
}

.contact-redesign-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.78fr);
  gap: 34px;
  align-items: stretch;
}

.contact-redesign-copy {
  min-height: 680px;
  padding: 56px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-redesign-copy .heading-title {
  max-width: 760px;
  margin-top: 24px;
  font-size: 72px;
  line-height: 78px;
  letter-spacing: 0;
}

.contact-redesign-lead {
  max-width: 690px;
  margin: 28px 0 0;
  color: #3f3f46;
  font-size: 19px;
  line-height: 31px;
}

.contact-redesign-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  max-width: 700px;
}

.contact-redesign-list li {
  position: relative;
  padding: 14px 0 14px 30px;
  border-top: 1px solid rgba(24, 24, 27, 0.11);
  color: #27272a;
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
}

.contact-redesign-list li::before {
  position: absolute;
  content: "";
  left: 0;
  top: 23px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #14b8a6;
  box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.13);
}

.contact-redesign-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
  max-width: 760px;
}

.contact-meta-item {
  min-height: 118px;
  border: 1px solid rgba(24, 24, 27, 0.09);
  border-radius: 8px;
  background: #ffffff;
  padding: 20px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.contact-meta-item .icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #18181b;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.contact-meta-item span {
  display: block;
  color: #71717a;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.contact-meta-item a,
.contact-meta-item strong {
  color: #18181b;
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
}

.contact-redesign-form {
  align-self: center;
  border: 1px solid rgba(24, 24, 27, 0.1);
  border-radius: 8px;
  background: #ffffff;
  padding: 46px;
  box-shadow: 0 18px 60px rgba(24, 24, 27, 0.12);
}

.contact-form-top {
  margin-bottom: 34px;
}

.contact-form-top span {
  display: inline-flex;
  color: #ff143f;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.contact-redesign-form .heading {
  margin-bottom: 0;
  color: #18181b;
  font-size: 34px;
  line-height: 40px;
  letter-spacing: 0;
}

.contact-redesign-form label {
  color: #18181b;
}

.contact-redesign-form input,
.contact-redesign-form textarea {
  color: #18181b;
}

/* BUG-884: style the new tel/phone input identically to the theme's other
   inputs. PurgeCSS dropped input[type=tel] from the trimmed theme CSS because
   no tel field existed before, so re-add the underline style here (own file,
   not vendor) so the phone field matches name/email/etc. */
form input[type=tel] {
  outline: 0;
  box-shadow: none;
  width: 100%;
  padding: 0 0 11px 0;
  border: 0;
  border-bottom: 1px solid var(--neutral-300);
  background-color: transparent;
  color: var(--primary);
  transition: all 0.3s ease;
}
form input[type=tel]::placeholder {
  color: var(--secondary);
}

.contact-redesign-form textarea {
  min-height: 126px;
}

.contact-redesign-form .tf-btn {
  margin-top: 10px;
}

@media (max-width: 1199px) {
  .contact-redesign-shell {
    grid-template-columns: 1fr;
  }

  .contact-redesign-copy {
    min-height: unset;
    padding: 20px 0 0;
  }

  .contact-redesign-form {
    align-self: stretch;
  }
}

@media (max-width: 767px) {
  .section-contact-redesign {
    padding-top: 68px;
  }

  .contact-redesign-copy .heading-title {
    font-size: 42px;
    line-height: 48px;
  }

  .contact-redesign-lead {
    font-size: 16px;
    line-height: 27px;
  }

  .contact-redesign-meta {
    grid-template-columns: 1fr;
  }

  .contact-redesign-form {
    padding: 24px;
  }

  .contact-redesign-form .heading {
    font-size: 28px;
    line-height: 34px;
  }
}

@media (max-width: 575px) {
  .section-trust-signals .heading-title {
    font-size: 34px;
    line-height: 40px;
  }

  .trust-signals-lead {
    font-size: 16px;
    line-height: 27px;
  }

  .trust-signal-card {
    padding: 22px;
  }

  .trust-signal-top {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 26px;
  }

  .trust-signal-card h3 {
    font-size: 24px;
    line-height: 30px;
  }
}

/* Statistic lead paragraph: lift muted grey one step lighter for comfortable reading
   on the dark box (neutral-400 #A1A1AA passes AA but reads faint to some readers). */
.box-black .section-statistic .statistic-slider .text {
  color: var(--neutral-300) !important;
}

/* ────────────────────────────────────────────────────────────────────
   FIX: simple content pages (about, etc.) wrapped prose in
   `.prose text-secondary` (#71717A). On the light --body bg (#EDECEC)
   that is only 4.1:1 = fails WCAG AA for body copy (Lighthouse flagged
   16 nodes on /about/). Darken prose body text to pass AA comfortably.
   Headings/strong already dark; we only lift the muted body grey. */
.prose.text-secondary,
.prose.text-secondary p,
.prose.text-secondary li,
.prose.text-secondary em {
  color: #2e2e35 !important;   /* 11.4:1 on #EDECEC */
}
.prose.text-secondary strong {
  color: var(--primary) !important;
}

/* ────────────────────────────────────────────────────────────────────
   CARD 888/889/890/891: interior content pages (solutions, compare,
   security, products) were rendering as flat "text dumps": bullets had
   list-style:none with no indent, body lines ran edge to edge (~130
   chars), and section headings sat tight against the paragraph above.
   Give .prose real reading rhythm so the content reads as a designed
   page, matching the site look and feel. Light interior theme.
   ──────────────────────────────────────────────────────────────────── */
.prose {
  max-width: 760px;          /* comfortable ~75ch measure */
  margin-inline: auto;
}
.prose > h2 {
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.95rem);  /* body-section scale, not hero */
  line-height: 1.25;
}
.prose > h2:first-child {
  margin-top: 0;
}
.prose > h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
  font-weight: 600;
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.3;
}
.prose p {
  margin-bottom: 1.1rem;
  line-height: 1.7;
}
.prose ul {
  list-style: none;          /* keep base reset, draw our own marker */
  padding-left: 0;
  margin: 0 0 1.4rem;
  display: grid;
  gap: 0.6rem;
}
.prose ul li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.6;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}
/* inline content CTA links (e.g. "View the flagship case study") so they
   read as actions, not plain body text */
.prose p > a {
  color: var(--brand) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose p > a:hover {
  color: var(--primary) !important;
}

/* ────────────────────────────────────────────────────────────────────
   Bug 884: submit button / helper-text spacing — prevent cramped layout
   Scoped to contact forms only; do not touch vendor CSS. */
.contact-form button[type="submit"] {
  margin-bottom: 20px;
}
.contact-redesign-form .tf-btn {
  margin-bottom: 16px;
}
.contact-redesign-form .tf-btn ~ p {
  margin-top: 12px;
}

/* ────────────────────────────────────────────────────────────────────
   ADO 877: Remove left-side fade on large headings.
   .text-gradient-1 (hero title) and .text-gradient-3 (services heading)
   both use background-clip:text + a horizontal/diagonal linear-gradient
   which renders as a lighter (faded) left edge.
   Override to solid dark colour; preserve sizing/spacing only remove fade. */
.text-gradient-1,
.text-gradient-3 {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #292C2E !important;
  color: #292C2E !important;
}

/* ────────────────────────────────────────────────────────────────────
   ADO 876: Full-card clickability + decorative pill tags.
   (a) Ensure the entire accordion-action header is clickable (cursor, width).
   (b) .list-tags span matches the old .list-tags a pill styling now that
       tags-item elements are <span> (non-navigating decorative labels). */
.accordion-faq_item .accordion-action {
  cursor: pointer;
  width: 100%;
}
.list-tags span.tags-item {
  display: flex;
  align-items: center;
  padding: 7px 15px;
  border-radius: 99px;
  color: var(--neutral-300);
  background: var(--neutral-700);
  border: 1px solid var(--neutral-600);
}

/* ────────────────────────────────────────────────────────────────────
   ADO 881: Stat number font-size too large -- value + unit overflow /
   overlap / get cut off at card edge at desktop sizes (240px baseline
   is wider than the 526px slider container when value + unit combine).
   Reduce all breakpoints so value + unit sit on one line without clip. */
.section-statistic .swiper .statistic-number {
  font-size: 100px;
  line-height: 1.05;
  white-space: nowrap;
  gap: 8px;
  align-items: baseline;
  overflow: visible;
}
.section-statistic .swiper .statistic-number .prefix {
  font-size: 96px;
}
@media (max-width: 1199px) {
  .section-statistic .swiper .statistic-number {
    font-size: 80px;
    line-height: 1.05;
  }
  .section-statistic .swiper .statistic-number .prefix {
    font-size: 76px;
  }
}
@media (max-width: 991px) {
  .section-statistic .swiper .statistic-number {
    font-size: 65px;
    line-height: 1.05;
  }
  .section-statistic .swiper .statistic-number .prefix {
    font-size: 62px;
  }
}
@media (max-width: 767px) {
  .section-statistic .swiper .statistic-number {
    font-size: 55px;
    line-height: 1.05;
  }
  .section-statistic .swiper .statistic-number .prefix {
    font-size: 52px;
  }
}

/* ────────────────────────────────────────────────────────────────────
   CARD 895: Blog breadcrumb contrast/visibility
   .section-page-title sits over a busy hero IMAGE (not a flat dark or
   light surface), so plain coloured text washes out. Give the trail a
   subtle dark backing pill and solid white text so it stays legible
   wherever it lands on the image. Keep the "/" separators visible too.
   ──────────────────────────────────────────────────────────────────── */
.section-page-title .breadcrumbs {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.4;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(8, 8, 10, 0.55);
  backdrop-filter: blur(2px);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.section-page-title .breadcrumbs .link1,
.section-page-title .breadcrumbs a.link1 {
  color: #ffffff;
  font-weight: 500;
}
.section-page-title .breadcrumbs a.link1:hover {
  color: var(--brand);
}
.section-page-title .breadcrumbs > div:not([class]) {
  /* the "/" separators and the final (current) crumb */
  color: rgba(255, 255, 255, 0.82);
}

/* CARD 888/889: the "View" overlay on solution/compare cards is a
   cursor-following label (tf-mouse) that often failed to register a
   click through to the sub-page. Keep the label as a visual only and
   add a stretched, full-cover link so clicking anywhere on the card
   image reliably navigates. */
.featured-works-item .image {
  position: relative;
}
.featured-works-item .image .card-stretch-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
}
.featured-works-item .image .view-project {
  z-index: 2;
  pointer-events: none;
}

/* CARD 892: interior-page breadcrumbs sit in .section-hero over the same
   busy hero imagery. Give them the identical legible pill treatment so
   the trail reads cleanly on every interior page, not just the blog. */
.section-hero .breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px auto 0;
  width: fit-content;
  max-width: 100%;
  font-size: 15px;
  line-height: 1.4;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(8, 8, 10, 0.55);
  backdrop-filter: blur(2px);
}
.section-hero .breadcrumbs .link1,
.section-hero .breadcrumbs a.link1 {
  color: #ffffff;
  font-weight: 500;
}
.section-hero .breadcrumbs a.link1:hover {
  color: var(--brand);
}
.section-hero .breadcrumbs > div:not([class]) {
  color: rgba(255, 255, 255, 0.82);
}

/* ────────────────────────────────────────────────────────────────────
   CARD 894: Blog index post-card alignment (left column)
   The horizontal post cards had ragged internal rhythm: title-to-button
   gap varied with title length and the image/text columns did not line
   up cleanly. Pin the image column to a responsive width, top-align the
   text, and give every card the same internal padding so the column
   reads as a consistent stack. No fixed pixel column (keeps tablet sane).
   ──────────────────────────────────────────────────────────────────── */
.tf-grid-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 426px) {
  .article-blog.style-horizontal {
    align-items: stretch;
  }
  .article-blog.style-horizontal .blog-image {
    flex: 0 0 38%;
    max-width: 38%;
  }
  .article-blog.style-horizontal .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1.5;
  }
  .article-blog.style-horizontal .blog-content {
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 12px;
  }
}

/* =================================================================
   ADO-878: Process section — nav arrow contrast + number contrast
   ================================================================= */

/* -- Nav arrows: higher contrast background, border, and icon -- */
.process-heading .group-btn-slider .nav-prev-swiper,
.process-heading .group-btn-slider .nav-next-swiper {
  background: #d4d4d4;
  border: 2px solid #888;
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22), 0px -3px 0px 0px #aaa inset;
}
.process-heading .group-btn-slider .nav-prev-swiper .icon,
.process-heading .group-btn-slider .nav-next-swiper .icon {
  color: #1a1a1a;
}
/* Preserve hover behaviour (dark fill slides up on :hover via ::before already defined) */
.process-heading .group-btn-slider .nav-prev-swiper:hover,
.process-heading .group-btn-slider .nav-next-swiper:hover {
  color: #fff;
  border-color: #272727;
}
.process-heading .group-btn-slider .nav-prev-swiper:hover .icon,
.process-heading .group-btn-slider .nav-next-swiper:hover .icon {
  color: #fff;
}

/* -- Step number: increase contrast from faint neutrals -- */
.process-card .bot .number .text-neutral-400 {
  color: #1a1a1a !important;
}
.process-card .bot .number .text-neutral-200 {
  color: #555555 !important;
}

/* ────────────────────────────────────────────────────────────────────
   ADO 875: "Built on" tech marquee — official product logos shown in
   GRAYSCALE at a uniform height. Greyscale signals "Donna365 is built
   on this technology" (built-on, not an endorsement/partnership claim),
   and normalises the differing brand colours/aspect ratios into one
   consistent strip. */
.partner-wrap .infiniteSlide_partner {
  align-items: center;
  gap: 20px;
}
/* ADO 875: "Built on" tech strip rendered as labelled chips. Full-colour
   official icon + product name in a soft pill, so abstract marks are
   readable and the strip reads as an intentional tech-stack statement
   (Donna365 is built on this technology) rather than floating stickers. */
.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border: 1px solid var(--neutral-200, #e4e4e7);
  border-radius: 99px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 4px 14px rgba(24, 24, 27, 0.05);
  white-space: nowrap;
}
.tech-chip img {
  height: 24px;
  width: 24px;
  object-fit: contain;
  flex: 0 0 auto;
}
.tech-chip__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary, #18181b);
  letter-spacing: -0.01em;
}

/* ── Card 898: Investors page – spacing fixes ──────────────────────────────
   Scoped to .page-investors to avoid touching any other page.
   1. Remove the 430px forced min-height that creates empty voids when a
      card only holds 2-3 lines of stat/number content.
   2. Centre content vertically in the short text-center stat cards so any
      residual space is balanced top+bottom rather than pooled at the bottom.
   ─────────────────────────────────────────────────────────────────────── */
.page-investors .benefits-card {
  min-height: auto; /* was 430px globally — content drives height on this page */
}

.page-investors .benefits-card.text-center {
  justify-content: center; /* vertically balance remaining whitespace */
  align-items: center;     /* centre short stat text horizontally too */
}

/* ── ADO 887/891: Features & Security page card + table styling ─────────────
   Scoped to .page-features / .page-security so no other page is affected.
   Reuses the existing benefits-card / features-item visual language; only
   adds an icon chip for feature cards, a dark spec table, and a compliance
   chip row that the markup needs.
   ─────────────────────────────────────────────────────────────────────── */

/* Feature cards: let content drive height (override global 430px min) and
   give the icon a branded chip so cards read as designed, not as text. */
.page-features .benefits-card {
  min-height: auto;
}

.page-features .feature-card .benefits-card-top {
  align-items: center;
  margin-bottom: 22px;
}

.page-features .feature-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 12px;
  background: #18181b;
  color: #ffffff;
}

.page-features .feature-card-icon .icon {
  font-size: 22px;
  line-height: 1;
}

.page-features .feature-card-link {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #0f766e;
  text-decoration: none;
}

.page-features .feature-card-link:hover {
  text-decoration: underline;
}

/* Dark spec table for the Security page architecture / product tables.
   Rendered as labelled rows so it stays scannable on the dark band. */
.spec-table {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  overflow: hidden;
}

.spec-table .spec-row {
  display: grid;
  grid-template-columns: minmax(160px, 28%) minmax(0, 1fr);
  gap: 24px;
  padding: 18px 26px;
}

.spec-table .spec-row + .spec-row {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.spec-table-dark {
  background: rgba(255, 255, 255, 0.03);
}

.spec-table-dark .spec-key {
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  line-height: 24px;
}

.spec-table-dark .spec-val {
  color: #a1a1aa;
  font-size: 15px;
  line-height: 24px;
}

@media (max-width: 575px) {
  .spec-table .spec-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 20px;
  }
}

/* Compliance standards: tidy chip checklist instead of a flat bullet list. */
.compliance-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.compliance-chips li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(24, 24, 27, 0.12);
  background: var(--neutral-100, #ffffff);
  color: #18181b;
  font-size: 15px;
  font-weight: 600;
}

.compliance-chips li .icon {
  font-size: 14px;
  color: #0f766e;
}


/* ================================================================
   CARD 914 — Sticky header
   Makes .tf-header position:sticky so it follows the user on scroll.
   A JS scroll listener (ado-scroll.js) adds .header-scrolled after
   50px scroll, triggering compact padding + stronger background.
   ================================================================ */

.tf-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: padding-top 0.3s ease;
}

/* Compact header when scrolled: tighten the pill's top padding. */
.tf-header.header-scrolled {
  padding-top: 8px;
}

/* Stronger background when scrolled so pill is legible over content. */
.tf-header.header-scrolled .header-inner {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 24px rgba(24, 24, 27, 0.12);
}


/* ================================================================
   CARD 912 REWORK — Featured works carousel (stable-height fix)
   CSS-Grid stacking: all slides share grid-area 1/1, so the container
   auto-sizes to the TALLEST card and NEVER reflows on slide flip.
   opacity + pointer-events control visibility; JS toggles .fw-active.
   ================================================================ */

/* All slides in the same grid cell → container height = tallest card. */
.featured-works-list > div {
  grid-area: 1 / 1 / 2 / 2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Active slide: fade in + slide up. */
.featured-works-list > div.fw-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Pre-JS fallback: first slide visible while ado-carousel.js loads. */
.featured-works-list:not(.fw-ready) > div:first-child {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Dot controls are now interactive navigation buttons. */
.featured-works-item .content .pagi-dot span {
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.2s ease;
}

.featured-works-item .content .pagi-dot span:hover {
  background-color: var(--brand);
  transform: scale(1.2);
}

/* ── Home services accordion image — enlarge but stay in the left column
   (ADO 2026-06-13). The theme default (416x240) is a tiny thumbnail with lots
   of dead vertical space above it. The element is position:absolute bottom:0
   as a sibling of BOTH columns, so width must stay well under the accordion's
   left edge (~660px on desktop) or it overlaps the text. Bigger, not wider. */
.section-services .services-image {
  max-width: 420px;
  width: 38%;
  height: 380px;
}
@media (min-width: 1400px) {
  .section-services .services-image {
    max-width: 460px;
    height: 420px;
  }
}
.section-services .services-image img {
  object-fit: cover;
  object-position: top left;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
@media (max-width: 991px) {
  .section-services .services-image {
    max-width: 520px;
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

/* ── Dropdown parent toggles are non-navigating (ADO 2026-06-13) ──────────
   "Product" and "Built by" open sub-menus on hover; they are not links.
   Rendered as <span role=button> instead of <a href="#"> so a click never
   jumps the page to the top. Keep the pointer affordance + keyboard focus. */
.nav-menu-main .item-link.menu-toggle {
  cursor: pointer;
  user-select: none;
}
.open-mb-menu[role="button"] {
  cursor: pointer;
}

/* ---- ADO-921: footer navigation grouped columns ---- */
.footer-nav-groups {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  padding: 40px 0 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

/* ADO 932: footer headings made bigger + more prominent (16->19px), and the
   gap below them tightened (6px -> 2px) so the heading sits closer to its
   links per the annotated screenshot. */
.footer-nav-heading {
  color: #ffffff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 2px;
}

.footer-nav-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav-col ul li + li {
  margin-top: 10px;
}

.footer-nav-col ul li a {
  color: #d4d4d8;
  text-decoration: none;
  font-size: 14px;
  line-height: 22px;
  transition: color 0.2s ease;
}

.footer-nav-col ul li a:hover {
  color: #ffffff;
  text-decoration: underline;
}

@media (max-width: 991px) {
  .footer-nav-groups {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .footer-nav-groups {
    grid-template-columns: 1fr;
  }
}

/* ====================================================================
   MOBILE RESPONSIVENESS — 2026-06-13
   Three issues fixed: header overflow, hero overlay, GSAP animation
   wrapper overflow. All changes are NEW rules (no vendor files touched).
   ==================================================================== */

/* ── Issue 1: Header pill horizontal overflow at ≤375px phones ───────────
   styles.trimmed.css @media (max-width:991px) sets margin:0 32px on
   .header-inner (base padding:8px 8px 8px 32px). The logo (1024×315 px,
   rendered at height:66px ≈ 215px wide) + hamburger (40px) + padding
   (40px L + 8px R) = ~355px pill, starting 32px from left edge = 387px
   right (scrollWidth=387 at 320px and 360px — verified in browser).
   Fix: tighten side margins + reduce left padding + cap logo width so
   pill fits within 320px while keeping the full pill look at ≥390px. */
@media (max-width: 575.98px) {
  .tf-header .header-inner {
    margin: 0 12px !important;      /* was 0 32px from trimmed CSS */
    padding-left: 16px !important;  /* was 32px */
  }
  .tf-header .logo-site img {
    max-width: 150px !important;    /* 1024×315 at 66px h = 215px — cap for narrow phones */
    height: auto !important;        /* override global height:66px !important */
    max-height: 52px !important;    /* keep proportional (150×315/1024 ≈ 46px) */
  }
}

/* ── Issue 2: Hero watermark overlay opacity on mobile ───────────────────
   Desktop: rgba(255,255,255,0.55) gives a light veil over the watermark.
   On mobile (≤991px) the body text of the lead paragraph competes with
   the watermark at 0.55 opacity. The ::after base rule is set earlier in
   this file (line ~239); this media query overrides opacity on mobile.
   Desktop is unaffected (keeps 0.55). The text/content-wrap comes after
   .hero-image in DOM + is position:relative, so it stacks above the
   ::after overlay — no z-index change needed. */
@media (max-width: 991px) {
  /* 0.78 wasn't enough where the lead paragraph sits over the busy teal/
     document portion of the watermark (pricing, contact). On mobile the
     hero image is purely decorative texture, so push the veil higher to
     guarantee body-text legibility. Desktop stays 0.55 (rule at ~line 239). */
  .section-hero .hero-image::after {
    background: rgba(255, 255, 255, 0.9);
  }
  /* Breathing room so the first section's eyebrow pill ("What Donna365
     does" etc.) doesn't kiss the hero card's rounded bottom edge. The
     intro section uses .flat-spacing.pt-0 (bootstrap padding-top:0!important),
     so padding can't win — use margin-top on the section after the hero. */
  .section-hero + section,
  .section-hero + .ado-fsections {
    margin-top: 2.5rem;
  }
}

/* ── Issue 3: GSAP animation wrapper overflow at small phones ────────────
   gsapAnimation.min.js wraps every .effectFade.fadeUp element in a newly
   created div.overflow-hidden. When this wrapper's child has an intrinsic
   min-content width > its containing block, the wrapper expands beyond
   its parent column — e.g. benefits-card wrapper at right=347px (320px
   screen), heading-section wrapper at right=322px — both exceed the
   viewport and contribute to document.scrollWidth after the header fix.
   Fix: cap all GSAP overflow-hidden wrappers to their parent width.
   Exception: inside .swiper the wrapper wraps .swiper-wrapper which
   legitimately needs to be N×slide-width wide; reset for that context. */
@media (max-width: 575.98px) {
  div.overflow-hidden {
    max-width: 100%;
  }
  /* Swiper JS sets .swiper-wrapper width programmatically to accommodate
     all slides; the GSAP overflow-hidden wrapper must not constrain it. */
  .swiper > div.overflow-hidden {
    max-width: none;
  }
}

/* ── Root-level horizontal overflow guard (<=575.98px) ──────────────────────
   Despite per-element and wrapper fixes, width:max-content elements (eyebrow
   badges, heading-sub pills like "Flagship case study + practice tracks")
   and swiper slide-next via CSS transforms still push scrollWidth > viewport.

   Fix: overflow-x:clip on <main> (not hidden, which leaks to scrollWidth).
   Unlike overflow-x:hidden, clip:
     - Does NOT create a BFC or scroll container
     - DOES prevent clipped content from adding to document.scrollWidth
     - Does NOT break position:sticky (which anchors to nearest scroll-container,
       not clip boundary); header remains sticky at viewport top.
   position:fixed offcanvas menu lives OUTSIDE <main>, so it is unaffected.

   Also: min-width:0 on GSAP wrappers so grid/flex track constraints win. */
@media (max-width: 575.98px) {
  main#wrapper {
    overflow-x: clip;
  }
  div.overflow-hidden {
    min-width: 0;  /* allow grid/flex compression below intrinsic min-content */
  }
  /* Hero eyebrow badge (width:max-content ~330px): let it wrap at 2 lines. */
  .section-hero .content-wrap .sub {
    max-width: 100%;
    width: auto;
    white-space: normal;
  }
}

/* =============================================================================
   ADO SEO Round 2: heading hierarchy reset
   h2.heading-title replaces div.heading-title for accessibility/SEO.
   The .heading-section .heading-title theme rule (72px) styles these; we must
   only neutralise the browser h2 default MARGIN so the visual is identical to
   the old div. (Do NOT set font-size:inherit — that beat the theme rule on
   specificity and shrank section headers to body-text size.)
   ============================================================================= */
h2.heading-title {
  margin: 0;
}

/* =============================================================================
   ADO SEO Round 2: blog post-meta byline (visible + machine-readable)
   ============================================================================= */
.post-meta {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.56);
  margin-bottom: 1.5rem;
  margin-top: 0;
}
.post-meta time {
  font-style: normal;
}

/* ── reCAPTCHA v3 badge hidden + required Google disclosure ────────────────
   Google's reCAPTCHA Terms allow hiding the floating badge ONLY if the
   required notice is shown near the form (added as .recaptcha-terms in the
   contact + home-cta form partials). Applies to staging AND production. */
.grecaptcha-badge {
  visibility: hidden !important;
}
.recaptcha-terms {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--neutral-500, #71717a);
}
.recaptcha-terms a {
  color: inherit;
  text-decoration: underline;
}

/* ── A11y: WCAG AA contrast for secondary text on tinted panels ────────────
   Theme --secondary (#71717A) is 4.83:1 on pure white (passes) but only
   4.10–4.40:1 on the off-white/grey panels (#EDECEC partner strip, #F4F4F5
   stats + process cards) — just under AA 4.5:1. Nudge these specific
   contexts to #5F5F68 (>=5.3:1 on those backgrounds). Scoped, not global. */
.partner-wrap p.text-secondary,
.bot .grid-text .item .title,
.process-card .content p.text,
.process-card .content .text {
  color: #5F5F68 !important;
}

/* ── A11y heading-order: card titles promoted to h2/h3 (from h4) for a valid
   heading outline. They had no explicit size (inherited the theme's generic
   h4 = 36px), so the tag change made them grow. Pin back to 36px so the
   visual is IDENTICAL — semantic change only. (Lesson: never let a tag swap
   change rendered size; reset to the original computed value.) */
.featured-works-item .content .bot h2.heading,
.featured-works-item .content .bot .heading {
  font-size: 36px;
  line-height: 1.2;
}
.process-card .content h3.title,
.process-card .content .title {
  font-size: 36px;
  line-height: 1.2;
}

/* ============================================================
   CARD 928 — Brand gradient scrollbar
   Like the Evocate Hugo "rainbow" scrollbar, but the thumb colour
   interpolates through the Donna365 theme:
   orange -> green -> purple -> blue as you scroll the page. Colour is
   driven by ado-scrollbar.js, which updates --donna-scrollbar on scroll.
   Falls back to the orange start colour with no JS.
   Brand stops: orange #F5772E, green #8DCA37, purple #9B7BFF, blue #13B1FF.
   ============================================================ */
:root { --donna-scrollbar: #F5772E; }

/* Firefox + modern standards: thumb colour + a dark track that suits the
   dark theme (so the black midpoint of the gradient still reads). */
html {
  scrollbar-color: var(--donna-scrollbar) #14142A;
  scrollbar-width: thin;
}

/* WebKit / Blink */
::-webkit-scrollbar { width: 11px; height: 9px; }
::-webkit-scrollbar-track { background: #14142A; }
::-webkit-scrollbar-thumb {
  background: var(--donna-scrollbar);
  border-radius: 6px;
  border: 2px solid #14142A;
  transition: background 0.25s ease;
}
::-webkit-scrollbar-thumb:hover { filter: brightness(1.18); }
::-webkit-scrollbar-corner { background: #14142A; }

/* ============================================================================
   PERF FIX — above-the-fold paint (FCP / Speed Index)
   The theme hides every .effectFade element with opacity:0 and only reveals
   them once the full deferred JS chain (jQuery → Bootstrap → Swiper → Slick →
   GSAP → ScrollTrigger → gsapAnimation) has executed. That gated the hero
   behind ~1MB of JS, pushing FCP to ~3.2s. We force the first-viewport
   (hero) content visible at first paint so it no longer depends on JS.
   The gsapAnimation viewport check leaves these elements alone, so there is
   no conflict and no entrance animation on the LCP content (by design).
   ============================================================================ */
.section-hero .effectFade {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}