/* UI components, sections, page blocks (scoped), overrides */


/* Shared soft media surface */
.hero__visual-panel,
.image-placeholder {
/*   background-color: var(--surface-media-soft); */
/*   background-image: var(--surface-media-overlay), url('/wp-content/uploads/2026/06/bg.webp'); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Shared Material Symbols in icon contexts */
.icon-box .material-symbols-outlined,
.content-item--row .content-item__icon.material-symbols-outlined,
.content-item--row .content-item__icon .material-symbols-outlined,
.numbered-list__icon .material-symbols-outlined,
.process-card__icon .material-symbols-outlined,
.insight-card__date-icon {
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.icon-box .material-symbols-outlined,
.content-item--row .content-item__icon.material-symbols-outlined,
.content-item--row .content-item__icon .material-symbols-outlined,
.numbered-list__icon .material-symbols-outlined {
  font-size: var(--icon-box-icon-size);
}

.process-card__icon .material-symbols-outlined {
  font-size: var(--process-card-icon-size);
}

.doc-feature-strip__icon .material-symbols-outlined,
.op-build-card__icon .material-symbols-outlined {
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}


/* ==========================================================================
   Reusable Components
   ========================================================================== */

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  transition: all var(--transition-base);
  white-space: nowrap;
  cursor: pointer;
}

.btn[class*="outline"] {
  padding: calc(var(--btn-padding-y) - 1px) calc(var(--btn-padding-x) - 1px);
}

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

.btn--brand:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.btn--brand-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn--brand-outline:hover {
  background: rgba(var(--color-primary-rgb), 0.04);
  transform: translateY(-1px);
}

.btn--white {
  background: var(--color-white);
  color: var(--color-dark);
  box-shadow: var(--shadow-md);
}

.btn--white:hover {
  background: var(--color-bg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn__arrow {
  transition: transform var(--transition-base);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* --- Eyebrow --- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.eyebrow::before {
  content: '';
  flex-shrink: 0;
  width: var(--eyebrow-mark-width);
  height: var(--eyebrow-mark-height);
  background: var(--eyebrow-mark-color);
}

.eyebrow__label {
  text-transform: none;
  color: var(--color-text-secondary);
}

/* --- Card System / surfaces (shared border, radius, padding) --- */
.card,
.doc-when-implement__item,
.contact-info-card,
.hww-stage-card,
.insight-card {
  border: var(--surface-border);
  border-radius: var(--surface-radius);
}

.card {
  background: var(--surface-bg);
  box-shadow: var(--shadow-card);
  transition: all var(--transition-base);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
}

.card__body {
  padding: var(--space-6);
}

.card__body--lg {
  padding: var(--surface-padding);
}

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

.card--fill {
  height: 100%;
}

.card.card__body--lg {
  display: flex;
  flex-direction: column;
}

.card.card__body--lg:has(.check-list) {
  gap: var(--space-6);
}

.card.card__body--lg:has(.check-list) .eyebrow,
.card.card__body--lg:has(.check-list) .card__title {
  margin-bottom: 0;
}

.card.card__body--lg:has(.check-list) .check-list {
  gap: var(--space-3);
}

.card__icon {
  margin-bottom: var(--space-5);
}

.card__title {
  margin-bottom: var(--space-3);
}

.card__text {
  color: var(--color-body);
}

.card > hr {
  width: 100%;
  border: 0;
  height: 0;
  border-top: 1px solid var(--list-item-border);
  margin: var(--space-6) 0;
}

/* --- Icon Box --- */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-box-size);
  height: var(--icon-box-size);
  background: rgba(var(--color-primary-rgb), 0.08);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
}

.icon-box svg,
.content-item--row .content-item__icon svg,
.numbered-list__icon svg,
.process-card__icon svg {
  width: var(--icon-box-icon-size);
  height: var(--icon-box-icon-size);
  flex-shrink: 0;
}

.icon-box--sm {
  border-radius: var(--radius-md);
}

.icon-box--subtle {
  background: rgba(var(--color-primary-rgb), 0.06);
}

.icon-box--center {
  display: flex;
  margin-inline: auto;
}

/* --- Content Item --- */
.content-item {
  max-width: 260px;
}

.content-item--right {
  margin-left: auto;
  text-align: right;
}

.content-item--right .icon-box {
  margin-left: auto;
}

.content-item--row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: none;
}

.content-item--row .content-item__icon {
  margin-bottom: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.content-item--row .content-item__body {
  display: flex;
  flex-direction: column;
}

.content-item__icon {
  margin-bottom: var(--space-3);
}

.content-item__title {
  margin-bottom: var(--space-2);
}

.content-item__text {
  font-size: var(--font-body-size);
  color: var(--color-text-muted);
}

.content-grid--divided .content-item {
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--surface-divider-color);
}

/* --- Before / after check lists --- */
.split-section__content:has(.before-after-lists) {
  max-width: none;
}

.before-after-lists {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-8);
  width: 100%;
  margin-top: var(--space-6);
}

.before-after-lists::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: var(--list-item-border);
  pointer-events: none;
}

.before-after-lists__col {
  min-width: 0;
}

.before-after-lists__col:first-child {
  padding-right: calc(var(--space-8) / 2);
}

.before-after-lists__col--after {
  padding-left: calc(var(--space-8) / 2);
}

.before-after-lists__label {
  margin: 0 0 var(--space-4);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}

.before-after-lists .check-list {
  gap: var(--space-3);
}

.before-after-lists .check-list__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.compare-col-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: 0;
}

.section-panel .before-after-lists__col {
    display: flex;
    flex-direction: column;
    gap: var(--heading-content-gap);
}

@media (max-width: 36em) {
  .before-after-lists {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-6);
    column-gap: 0;
  }

  .before-after-lists::after {
    display: none;
  }

  .before-after-lists__col:first-child {
    padding-right: 0;
  }

  .before-after-lists__col--after {
    padding-left: 0;
    border-top: 1px solid var(--list-item-border);
    padding-top: var(--space-6);
  }
}

/* --- Check List --- */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.check-list__item,
.numbered-list__item {
  border-bottom: 1px solid var(--list-item-border);
}

.check-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-body);
  line-height: var(--line-height-relaxed);
  padding-bottom: var(--space-4);
}

.check-list__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.check-list__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.25rem;
  margin-top: 2px;
}

.check-list__icon img {
  display: block;
  width: 100%;
  height: auto;
}

.line__throw{
	text-decoration:line-through;
	margin-bottom:var(--space-2)
}

/* --- Accordion --- */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
	width: 100%;
    max-width: min(55rem, 100%);
    margin-inline: auto;
}

.accordion__item {
  padding-inline: var(--space-4);
  border-bottom: 1px solid var(--surface-divider-color);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-5) 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-accordion-title-size);
  line-height: var(--font-accordion-title-line-height);
  font-weight: var(--font-accordion-title-weight);
  letter-spacing: var(--font-heading-five-letter-spacing);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-base);
}

.accordion__trigger:hover {
  color: var(--color-primary);
}

.accordion__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-heading-three-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  line-height: 1;
  border: var(--surface-border);
  border-radius: var(--surface-radius-control);
	display:none;
}

.accordion__panel {
  max-height: none;
  overflow: visible;
  padding-bottom: var(--space-5);
}

.accordion__item.is-open .accordion__panel {
  max-height: 300px;
  padding-bottom: var(--space-5);
}

.accordion__content {
  font-size: var(--font-body-size);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  padding-right: var(--space-8);
}

/* --- Section Header --- */
.section-header {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--section-header-gap);
}

.section-header--left {
  text-align: left;
  margin-inline: 0;
}

.section-header__title {
  margin-bottom: var(--heading-content-gap);
}

.section-header__title-line {
  display: block;
}

.section-header:not(:has(.section-header__subtitle)) .section-header__title {
  margin-bottom: 0;
}

.section-header .eyebrow {
  justify-content: center;
}

.section-header--left .eyebrow {
  justify-content: flex-start;
}

.section-header__subtitle {
  max-width: 640px;
  margin-right: auto;
}

/* --- Numbered List --- */
.numbered-list {
  display: flex;
  flex-direction: column;
  gap: var(--heading-content-gap);
}

.numbered-list__item {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding-bottom: var(--space-5);
}

.numbered-list__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.numbered-list__icon {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  color: var(--color-primary);
}

.numbered-list__num {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing-wider);
  min-width: 28px;
}

.numbered-list__title {
  margin-bottom: var(--space-1);
}

.numbered-list__text {
  font-size: var(--font-body-size);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

/* --- Testimonial Card --- */
.testimonial-card {
  position: relative;
  border-radius: var(--surface-radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.testimonial-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 14, 20, 0.32) 0%, rgba(11, 14, 20, 0.9) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
}

.testimonial-card__category {
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-2);
}

.testimonial-card__headline {
  font-size: var(--font-heading-three-size);
  line-height: var(--font-heading-three-line-height);
  font-weight: var(--font-heading-three-weight);
  letter-spacing: var(--font-heading-three-letter-spacing);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.testimonial-card__link {
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.testimonial-card__link:hover {
  color: var(--color-white);
}

/* Shared marketing blocks (solution cards, CTA banner, footer overlap) */
.cta-section--overlap-footer {
  position: relative;
  z-index: 2;
  margin-bottom: calc(-1 * var(--cta-footer-overlap));
}

main:has(.cta-section--overlap-footer) + .footer {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--section-padding-top) + var(--cta-footer-overlap));
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: var(--solutions-grid-row-gap);
}

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

.solutions-grid--2 .solution-card:nth-child(3n) {
  border-right: none;
}

.solutions-grid--2 .solution-card:nth-child(2n),
.solutions-grid--2 .solution-card:last-child {
  border-right: 1px dashed var(--solution-card-border);
}

@media (min-width: 36.01em) {
  .solutions-grid--2 .solution-card:nth-last-child(-n+2)::after {
    display: none;
  }
}

.solution-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--card-padding);
  min-height: 100%;
  border-left: 1px dashed var(--solution-card-border);
  border-bottom: none;
  border-top: none;
  border-right: none;
  background: transparent;
}

.solution-card::after {
  content: '';
  position: absolute;
  left: var(--solution-card-border-inset);
  right: var(--solution-card-border-inset);
  bottom: 0;
  border-bottom: 1px dashed var(--solution-card-border);
  pointer-events: none;
}

.solution-card:nth-child(3n),
.solution-card:last-child {
  border-right: 1px dashed var(--solution-card-border);
}

.solution-card:last-child::after {
  display: none;
}

/* 3-column grid: remove bottom border on full last row (e.g. 5-card layout) */
.solutions-grid:not(.solutions-grid--2) .solution-card:nth-child(3n + 1):nth-last-child(-n + 3)::after,
.solutions-grid:not(.solutions-grid--2) .solution-card:nth-child(3n + 2):nth-last-child(-n + 2)::after,
.solutions-grid:not(.solutions-grid--2) .solution-card:nth-child(3n):nth-last-child(-n + 1)::after {
  display: none;
}

.solution-card__icon {
  margin-bottom: 0;
}

.solution-card__title {
  margin-bottom: var(--space-2);
}

.solution-card__text {
  flex: 1;
  margin: 0;
}

.solution-card hr {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--list-item-border);
}

.solution-card .check-list {
  width: 100%;
  margin: 0;
}

.solution-card .check-list__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.solution-card:has(.solution-card__footer) .solution-card__title {
  margin-bottom: 0;
}

.solution-card:has(.solution-card__footer) .solution-card__text {
  flex: 0 1 auto;
}

.solution-card__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  width: 100%;
  margin-top: auto;
}

.solution-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.solution-card__pills .doc-use-case-chip {
  padding: var(--space-2) var(--space-4);
}

.solution-card__pills .doc-use-case-chip__label {
  font-size: var(--font-size-sm);
}

.solution-card__cta {
  margin: 0;
}

.solution-card__link {
  font-size: var(--font-body-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  transition: color var(--transition-base);
}

.solution-card__link:hover {
  color: var(--color-primary-dark);
}

.cta-banner {
  border-radius: var(--surface-radius-panel);
  overflow: hidden;
  background: var(--gradient-primary);
  box-shadow: 0 24px 48px rgba(var(--color-primary-rgb), 0.28);
}

.cta-banner__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: center;
  gap: var(--split-section-gap);
  padding: var(--section-panel-padding);
}

.cta-banner__title {
  color: var(--color-white);
  margin-bottom: var(--heading-content-gap);
}

.cta-banner__text {
  color: rgba(255, 255, 255, 0.88);
  max-width: 60%;
  margin-bottom: var(--space-8);
}

.cta-banner__text:has(+ .cta-banner__check-list) {
  margin-bottom: var(--space-4);
}

.cta-banner__check-list {
  max-width: 32rem;
  margin-bottom: var(--space-8);
}

.cta-banner__check-list.check-list {
  gap: var(--space-3);
}

.cta-banner__check-list .check-list__item {
  color: rgba(255, 255, 255, 0.88);
  border-bottom-color: var(--list-item-border-inverse);
  padding-bottom: var(--space-3);
}

.cta-banner__check-list .check-list__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.cta-banner__check-list .check-list__icon img {
  filter: brightness(0) invert(1);
}

.cta-banner__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
	display:none;
}

.cta-banner__phone {
  width: min(100%, 17.5rem);
  height: auto;
  border-radius: var(--surface-radius);
}


.cta-banner__visual .image-placeholder {
  width: 100%;
  max-width: 100%;
  min-height: clamp(12rem, 10rem + 10vw, 20rem);
  aspect-ratio: 16 / 10;
  margin-inline: 0;
  border-radius: var(--surface-radius);
}
.cta-banner__content{
	text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
	margin:auto;
	max-width: 75%;
}

.cta-banner__text:has(+ .cta-banner__check-list),
.cta-banner__text:has(+ .cta-banner__points) {
  margin-bottom: var(--space-6);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--font-size-sm);
  letter-spacing: 0.01em;
}

.cta-banner__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
  margin: 0 auto var(--space-10);
  padding: 0;
  list-style: none;
}

.cta-banner__point {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--surface-border-inverse-strong);
  border-radius: var(--radius-lg);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
  text-align: left;
}

.cta-banner__point-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid var(--surface-border-inverse-strong);
}

.cta-banner__point-icon .material-symbols-outlined {
  font-size: 1rem;
  color: var(--color-white);
}

.cta-banner__point-text {
  padding-top: 1px;
}

.cta-banner__content:has(.cta-banner__points) .btn--lg {
  min-width: min(100%, 22rem);
}

@media (max-width: 48em) {
  .cta-banner__points {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
	.order__1{
	order: 2;
	}
	.order__2{
	order: 1;	
	}
}

 
.footer__brand-logo {
  height: var(--navbar-logo-height);
  width: auto;
  max-width: var(--navbar-logo-max-width);
  margin-bottom: var(--space-4);
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 62em) {
  .solutions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .solution-card:nth-child(3n) {
    border-right: none;
  }

  .solution-card:nth-child(2n),
  .solution-card:last-child {
    border-right: 1px dashed var(--solution-card-border);
  }

  .cta-banner .btn--lg {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 36em) {
  .solutions-grid {
    grid-template-columns: 1fr;
  }

  .solution-card {
    border-right: 1px dashed var(--solution-card-border);
  }
}

.split-section__visual img, .hero__visual img{
	border-radius:var(--surface-radius-panel);
}
/* --- Navbar --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  height: var(--header-height);
  background: transparent;
  transition: all var(--transition-base);
}

.navbar.is-scrolled {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.11);
}

.navbar__inner {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: var(--container-nav);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.navbar__logo {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.navbar__logo-icon {
  height: var(--navbar-logo-height);
  width: auto;
  max-width: min(var(--navbar-logo-max-width), 100%);
  max-height: calc(var(--header-height) - 1.25rem);
  display: block;
  object-fit: contain;
  object-position: left center;
}

.navbar__nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.navbar__actions {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}

.navbar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-3) var(--space-8);
  color: var(--color-text);
  transition: color var(--transition-base);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.navbar__link:hover,
.navbar__dropdown.is-open > .navbar__dropdown-toggle {
  color: var(--color-primary);
}

.navbar__link.is-active,
.navbar__dropdown-toggle.is-active {
  color: var(--color-primary);
  font-weight: 600;
}

.navbar__dropdown-link.is-active {
  color: var(--color-primary);
  font-weight: 600;
  background: rgba(var(--color-primary-rgb), 0.08);
}

.navbar__chevron {
  display: block;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.navbar__dropdown.is-open .navbar__chevron {
  transform: rotate(180deg);
}

.navbar__dropdown {
  position: relative;
}

.navbar__dropdown-menu {
  position: absolute;
  top: calc(100% - 0.5rem);
  left: 0;
  min-width: 15rem;
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  z-index: var(--z-dropdown);
}

.navbar__dropdown:hover .navbar__dropdown-menu,
.navbar__dropdown.is-open .navbar__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navbar__dropdown-link {
  display: block;
  padding: var(--space-3) var(--space-5);
  color: var(--color-text);
  transition: color var(--transition-base), background var(--transition-base);
  white-space: nowrap;
}

.navbar__dropdown-link:hover {
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.04);
}

.navbar__signin {
  color: var(--color-text);
  transition: color var(--transition-base);
}

.navbar__signin:hover {
  color: var(--color-primary);
}

.navbar__toggle {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
}

.navbar__toggle-bar {
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: all var(--transition-base);
}

.navbar.is-open .navbar__toggle-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.navbar.is-open .navbar__toggle-bar:nth-child(2) {
  opacity: 0;
}

.navbar.is-open .navbar__toggle-bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* --- Hero --- */
.hero {
  position: relative;
  padding-top: var(--hero-padding-top);
  padding-bottom: var(--hero-padding-bottom);
  overflow: hidden;
  /*background-color: var(--color-white);
   background-image: url('/wp-content/uploads/2026/06/hero-bg.webp'); */
  background-position: 0 0;
  background-size: cover;
}

.hero__content {
  min-width: 0;
}

.hero__visual {
  min-width: 0;
}

.hero__visual-panel {
/*   width: 100%;
  min-height: clamp(18.75rem, 12rem + 22vw, 31.25rem);
  border-radius: var(--surface-radius-media); */
	    display: flex;
    align-items: center;
    justify-content: center;
}
.hero__visual-panel img{	
	max-width:100%;
}
.hero__title {
  margin-bottom: var(--hero-title-subtitle-gap);
  max-width: none;
}

.hero__subtitle {
  max-width: 43.4375rem;
  margin-bottom: 0;
}

.hero__subtitle + .hero__subtitle {
  margin-top: var(--hero-subtitle-stack-gap);
}

.hero__subtitle:first-of-type {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
}

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--hero-actions-gap);
  padding-top: var(--hero-button-gap);
}

/* --- Split Section --- */
.split-section {
  display: grid;
  align-items: center;
}

.split-section--reverse .split-section__visual {
  order: -1;
}

/* split content max-width handled in fluid.css */

.split-section--equal .split-section__visual,
.split-section--equal .split-section__content {
  min-width: 0;
}

.split-section--stretch {
  align-items: stretch;
}

.split-section--stretch .split-section__visual {
  display: flex;
}

.split-section--stretch .image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.split-section--hero {
  gap: var(--hero-column-gap);
}

.split-section--40-60 {
  align-items: start;
}

.split-section__content .section-header__title {
  margin-bottom: var(--heading-content-gap);
}

.split-section__content .section-header__title:not(:has(+ .section-header__subtitle)) {
  margin-bottom: var(--section-header-gap);
}

.split-section__content .section-header__subtitle {
  margin-bottom: var(--section-header-gap);
}

.split-section__visual {
  position: relative;
}

/* --- Image placeholder --- */
.image-placeholder {
  display: block;
  width: 100%;
  border-radius: var(--surface-radius-media);
}

/* .image-placeholder--soft {
  background-color: #f3efff;
  background-image: linear-gradient(135deg, #e8f4ff 0%, #f3e8ff 45%, #ffe8f0 100%);
} */

.image-placeholder--full-height {
  height: 100%;
  min-height: clamp(18.75rem, 12rem + 22vw, 31.25rem);
  min-width: clamp(12rem, 40vw, 21.875rem);
  align-self: stretch;
}

.image-placeholder--on-dark {
  opacity: 0.95;
}

.split-section:has(.image-placeholder) {
  align-items: stretch;
}

.split-section:has(.image-placeholder) .split-section__visual {
  display: flex;
  justify-content: center;
}

.split-section:has(.image-placeholder) .image-placeholder {
  width: 100%;
  height: 100%;
}

.split-section--proof {
  align-items: center;
}

/* --- Section Panel --- */
.section-panel {
  background: var(--section-panel-bg);
  padding: var(--section-panel-padding);
  border: var(--surface-border);
  border-radius: var(--section-panel-radius);
}

.section-panel--dark-gradient {
  background: var(--gradient-cta);
  border-color: var(--surface-border-inverse);
}

/* --- Multi Feature --- */
.multi-feature {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--multi-feature-column-gap);
  row-gap: var(--multi-feature-row-gap);
  align-items: start;
}

.multi-feature__col,
.multi-feature > .image-placeholder {
  min-width: 0;
  width: 100%;
}

.multi-feature__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

.multi-feature > .image-placeholder--full-height {
  align-self: stretch;
  height: 100%;
  min-height: clamp(18.75rem, 12rem + 22vw, 31.25rem);
}

.multi-feature .content-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
}

.multi-feature .content-item__icon {
  margin-bottom: var(--space-4);
}

.multi-feature .content-item__text {
  text-decoration: line-through;
  margin-bottom: var(--space-2);
}

.multi-feature .content-item__title {
  margin-top: 0;
  margin-bottom: 0;
}

.multi-feature .content-item:has(.check-list) .content-item__title {
  margin-bottom: var(--space-4);
}

.multi-feature .content-item .check-list {
  width: 100%;
  gap: var(--space-3);
}

.multi-feature .content-item,
.multi-feature .content-item--right {
  margin-left: 0;
  margin-inline: 0;
  padding-left: 0;
  text-align: left;
}

.multi-feature .content-item--right .icon-box,
.multi-feature .content-item .icon-box {
  margin-left: 0;
  margin-inline: 0;
}

@media (max-width: 62em) {
  .multi-feature {
    grid-template-columns: 1fr;
  }
}

/* --- Process Cards --- */
.process-cards__grid {
  align-items: stretch;
}

.process-card {
  display: flex;
  flex-direction: column;
  background: var(--process-card-bg);
  padding: var(--surface-padding);
  text-align: left;
  height: 100%;
  border: 1px solid var(--process-card-border);
  border-radius: var(--surface-radius);
}

.process-card .check-list {
  flex: 1;
  margin: 0;
  gap: var(--space-3);
}

.process-card .check-list__item {
  font-size: var(--font-body-size);
  padding-bottom: var(--space-3);
}

.process-card__header {
  display: flex;
  align-items: center;
  gap: var(--process-card-header-gap);
  margin-bottom: var(--space-6);
}

.process-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.process-card__line {
  flex: 1;
  height: 1px;
  background: var(--process-card-line-color);
}

.process-card__num {
  flex-shrink: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-body-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-body-letter-spacing);
  color: var(--process-card-number-color);
}

.process-card__title {
  margin-bottom: var(--space-4);
}

.process-card__text {
  margin: 0;
}

.process-cards__timeline {
  display: grid;
  gap: var(--space-4);
  height: var(--process-card-timeline-height);
  position: relative;
  margin-top: var(--space-2);
}

.process-cards__timeline::before {
  content: '';
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  bottom: calc(var(--process-card-timeline-dot-size) / 2 - 1px);
  height: 2px;
  background: var(--process-card-timeline-color);
  border-radius: 1px;
}

.process-cards__timeline-item {
  position: relative;
  display: flex;
  justify-content: center;
  height: 100%;
}

.process-cards__timeline-item::before {
  content: '';
  width: 2px;
  height: calc(100% - var(--process-card-timeline-dot-size));
  background: var(--process-card-timeline-color);
  border-radius: 1px;
}

.process-cards__timeline-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: var(--process-card-timeline-dot-size);
  height: var(--process-card-timeline-dot-size);
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* --- Footer --- */
.footer {
  background: var(--color-footer);
  color: rgba(255, 255, 255, 0.65);
  padding-top: var(--space-16);
  padding-bottom: var(--space-6);
}

.footer__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.footer__grid {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--surface-border-inverse);
}

.footer__heading {
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.footer__about {
  font-size: var(--font-size-sm);
  line-height: 1.7;
  max-width: 22rem;
  color: rgba(255, 255, 255, 0.65);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__link {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-base);
}

.footer__link:hover {
  color: var(--color-white);
}

.footer__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--surface-border-inverse);
}

.footer__meta-link,
.footer__meta-text {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.72);
}

.footer__meta > * {
  position: relative;
}

.footer__meta-item {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.footer__meta-icon.material-symbols-outlined {
  font-size: 1rem;
  line-height: 1;
	margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
}

.contact-form__grid br{
	display:none;
}
.ai-error{
	color:red;
}
.footer__meta > * + * {
  padding-left: var(--space-8);
}

.footer__meta > * + *::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 1rem;
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%);
}

.footer__meta-link {
  transition: color var(--transition-base);
}

.footer__meta-link:hover {
  color: var(--color-white);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__copyright {
  color: rgba(255, 255, 255, 0.5);
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.footer__legal-link,
.footer__legal-sep {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.66);
}

.footer__legal-link {
  transition: color var(--transition-base);
}

.footer__legal-link:hover {
  color: var(--color-white);
}

/* --- Back to top --- */
.back-to-top {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: var(--z-fixed);
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, var(--surface-divider-color));
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base), background var(--transition-base);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background: rgba(var(--color-primary-rgb), 0.06);
}

.back-to-top .material-symbols-outlined {
  font-size: 1.25rem;
  line-height: 1;
}

.hero--viewport {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
}

@media (max-width: 36em) {
  .back-to-top {
    right: var(--space-4);
    bottom: var(--space-4);
  }
	.cta-banner__text{
	max-width:100%;	
	}
}

/* --- Responsive Sections --- */
@media (max-width: 992px) {
  .split-section--reverse .split-section__visual {
    order: 0;
  }

  .hero {
    padding-top: calc(var(--header-height) + var(--space-10));
  }

  .hero__visual {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
    margin-right: 0;
    margin-top: var(--space-8);
  }

  .hero__content {
    max-width: 100%;
  }

  .navbar__inner {
    justify-content: space-between;
  }

  .navbar__logo,
  .navbar__actions {
    flex: 0 1 auto;
  }

  .navbar__logo {
    max-width: calc(100% - 3rem);
  }

  .navbar__nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-6);
/*     background: var(--glass-bg); */
	  background-color:#fff;
    backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--surface-divider-color);
    gap: 0;
  }

  .navbar__link,
  .navbar__dropdown-toggle {
    padding: var(--space-4) var(--space-2);
    width: 100%;
    justify-content: space-between;
  }

  .navbar__dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 0 0 0 var(--space-4);
    margin-top: 0;
    display: none;
    background: transparent;
  }

  .navbar__dropdown.is-open .navbar__dropdown-menu {
    display: block;
  }

  .navbar__dropdown:hover .navbar__dropdown-menu {
    display: none;
  }

  .navbar__dropdown.is-open:hover .navbar__dropdown-menu {
    display: block;
  }

  .navbar__dropdown-link {
    padding: var(--space-3) var(--space-2);
  }

  .navbar.is-open .navbar__nav {
    display: flex;
  }

  .navbar__signin {
    display: none;
  }

  .navbar__toggle {
    display: flex;
  }

  .hero__logos-track {
    justify-content: center;
  }

}

@media (max-width: 768px) {
  .process-cards__timeline {
    display: none;
  }

  .footer__meta {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  .footer__meta > * + * {
    padding-left: 0;
  }

  .footer__meta > * + *::before {
    display: none;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }
}

@media (max-width: 62em) {
  .hero__actions {
    gap: var(--space-fluid-tight);
  }
}

@media (max-width: 576px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Doc / inner pages --- */
.doc-page > .section > .container > .section-panel {
  margin-top: 0;
}

.doc-page > .section .section-header {
  margin-bottom: var(--section-header-gap);
}

.doc-page > .section .section-header.section-header--left {
  margin-bottom: var(--section-header-gap);
}

.doc-feature-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: transparent;
}

.doc-feature-strip__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-fluid-md);
  padding: var(--space-fluid-strip-y) var(--card-padding);
  border-left: 1px solid var(--surface-divider-color);
}

.doc-feature-strip__item:first-child {
  border-left: none;
}

.doc-feature-strip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: clamp(3rem, 2.5rem + 1vw, 3.75rem);
  height: clamp(3rem, 2.5rem + 1vw, 3.75rem);
  background: #f3f4ff;
  border-radius: var(--radius-lg);
  color: var(--color-primary);
}

.doc-feature-strip__icon .material-symbols-outlined {
  font-size: clamp(1.375rem, 1.15rem + 0.5vw, 1.625rem);
}

.doc-feature-strip__text {
  margin: 0;
  max-width: 16rem;
  font-size: var(--font-body-size);
  line-height: var(--line-height-relaxed);
  color: var(--color-body);
}

@media (max-width: 62em) {
  .doc-feature-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .doc-feature-strip__item:nth-child(odd) {
    border-left: none;
  }

  .doc-feature-strip__item:nth-child(n + 3) {
    border-top: 1px solid var(--surface-divider-color);
  }

  .doc-feature-strip__item:nth-child(even) {
    border-left: 1px solid var(--surface-divider-color);
  }
}

@media (max-width: 36em) {
  .doc-feature-strip {
    grid-template-columns: 1fr;
  }

  .doc-feature-strip__item {
    border-left: none;
    border-top: 1px solid var(--surface-divider-color);
  }

  .doc-feature-strip__item:first-child {
    border-top: none;
  }

  .doc-feature-strip__item:nth-child(even) {
    border-left: none;
  }

  .doc-feature-strip__text {
    max-width: none;
  }
}

.doc-when-implement {
  background: transparent;
}

.doc-when-implement__title {
  margin: 0;
  color: var(--color-text); /* #1A0B54 */
}

.doc-when-implement .section-header,
.doc-page .doc-when-implement .section-header {
  margin-bottom: var(--doc-when-implement-title-gap);
}

.doc-when-implement__grid {
  display: grid;
  align-items: stretch;
  gap: var(--grid-column-gap);
  width: 100%;
}

.doc-when-implement__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.doc-when-implement__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: var(--surface-padding);
  background: var(--surface-bg-muted);
}

.doc-when-implement__line {
  width: 100%;
  height: 2px;
  margin-bottom: var(--heading-content-gap);
  background: linear-gradient(90deg, #ec4899 0%, var(--color-primary) 55%, #7b9cff 100%);
  border-radius: var(--radius-full);
}

.doc-when-implement__num {
  margin: 0 0 var(--space-5);
  font-family: var(--font-family-heading);
  font-size: var(--font-heading-five-size);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
}

.doc-when-implement__item .check-list {
  width: 100%;
  gap: var(--space-3);
}

.doc-when-implement__item .check-list__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.doc-when-implement__text {
  margin: 0;
  max-width: none;
  flex: 1;
  font-size: var(--font-body-size);
  line-height: var(--line-height-normal);
  color: var(--color-body);
}

.doc-when-implement__item:has(.check-list) .check-list {
  flex: 1;
}

@media (max-width: 62em) {
  .doc-when-implement__grid,
  .doc-when-implement__grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.doc-use-cases {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  max-width: 56rem;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.doc-use-case-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: #f0f4ff;
  border-radius: var(--radius-xl);
  border: none;
}

.doc-use-case-chip__icon {
  flex-shrink: 0;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--color-primary);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.doc-use-case-chip__label {
  font-family: var(--font-family-body);
  font-size: 1rem;
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--font-body-letter-spacing);
  color: var(--color-heading);
  white-space: nowrap;
}

@media (max-width: 36em) {
  .doc-use-case-chip {
    padding: var(--space-3) var(--space-5);
  }

  .doc-use-case-chip__label {
    white-space: normal;
  }
}

.doc-flow-panel {
  border-radius: var(--surface-radius-panel);
  overflow: hidden;
}

.doc-flow-panel__split {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
}

.doc-flow-panel__split .split-section__content {
  max-width: none;
}

.doc-flow-panel__title {
  color: var(--color-white);
}

.doc-page .doc-flow-panel__title {
  margin-bottom: var(--section-header-gap);
}

.doc-flow-panel .numbered-list__title,
.doc-flow-panel .doc-flow-step__title {
  color: var(--color-white);
}

.doc-flow-panel .numbered-list__text {
  color: rgba(255, 255, 255, 0.72);
}

.doc-flow-panel__visual .image-placeholder {
  width: 100%;
  min-height: clamp(20rem, 16rem + 12vw, 28rem);
  height: 100%;
  border-radius: var(--radius-4xl);
}

.eyebrow--light::before {
  background: rgba(255, 255, 255, 0.45);
}

.eyebrow--light .eyebrow__label {
  color: rgba(255, 255, 255, 0.72);
}

.image-placeholder--on-dark {
  box-shadow: none;
  opacity: 0.95;
}

.doc-flow-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-fluid-column);
  row-gap: var(--card-padding);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.doc-flow-list .numbered-list__item {
  padding-bottom: var(--heading-content-gap);
  border-bottom: 1px solid var(--surface-border-inverse-strong);
}

.doc-flow-list .numbered-list__item:last-child {
  padding-bottom: var(--heading-content-gap);
  border-bottom: 1px solid var(--surface-border-inverse-strong);
}

.doc-flow-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
  min-height: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.doc-flow-step__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--surface-border-inverse-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}

.doc-flow-step__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.doc-flow-step__title {
  margin: 0;
}

.doc-flow-step__text {
  margin: 0;
}

/* Odd count: lone item on the last row stays left-aligned */
.doc-flow-list .doc-flow-step:last-child:nth-child(odd) {
  grid-column: 1;
}

@media (max-width: 62em) {
  .doc-flow-panel__split {
    grid-template-columns: 1fr;
  }

  .doc-flow-list {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .doc-flow-list .doc-flow-step:last-child {
    grid-column: auto;
  }

  .doc-flow-panel__visual .image-placeholder {
    min-height: clamp(14rem, 12rem + 8vw, 18rem);
  }
}

/* Solutions page hero */
.hero--solutions {
  background-color: #eff2ff;  
}

.hero--solutions .hero__visual-panel {
/*   background: var(--gradient-dark);
  background-image: none; */
}

/* --- About Us Page --- */
.about-panel__eyebrow {
  justify-content: center;
}

.doc-page .section-panel .solutions-grid {
  margin-top: var(--space-8);
}

.about-stack-tags {
  justify-content: flex-start;
  margin-inline: 0;
  max-width: none;
}

.about-dual-grid {
  align-items: stretch;
}

.about-dual-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 14rem;
}

.about-dual-card__title {
  margin: 0 0 var(--space-6);
  color: var(--color-white);
}

.about-dual-card__text {
  margin: 0;
  font-size: var(--font-body-size);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 62em) {
  .about-dual-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Contact Us Page --- */
.contact-form-panel {
  max-width: 56rem;
  margin-inline: auto;
}

.contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--grid-column-gap);
}

.contact-form__field--full {
  grid-column: 1 / -1;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.form-field__label {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
}

.form-field__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-body);
  font-size: var(--font-body-size);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background:#f7faff;
	
  border: var(--surface-border);
  border-radius: var(--surface-radius-control);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-field__input::placeholder {
  color: var(--color-text-light);
}

.form-field__input:hover {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--surface-divider-color));
}

.form-field__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

.form-field__select {
  appearance: none;
  padding-right: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23364469' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}

.form-field__textarea {
  min-height: 9rem;
  resize: vertical;
}

.contact-form__actions {
  margin-top: var(--space-8);
}

.contact-info-grid {
  align-items: stretch;
}

.contact-info-card {
  background: #f0f4ff;
  border-color: #e2e8f8;
  box-shadow: none;
}

.contact-info-card:hover {
  box-shadow: var(--shadow-md);
  transform: none;
}

.contact-info-card__detail {
  margin: var(--space-4) 0 0;
  font-size: var(--font-body-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-relaxed);
}

.contact-info-card__link {
  color: var(--color-primary);
  transition: color var(--transition-base);
}

.contact-info-card__link:hover {
  color: var(--color-primary-dark);
}

@media (max-width: 62em) {
  .contact-form__grid {
    grid-template-columns: 1fr;
  }

  .contact-info-grid {
    grid-template-columns: 1fr;
    max-width: 28rem;
    margin-inline: auto;
  }
}

/* --- How We Work Page --- */
.hww-stage-grid {
  align-items: stretch;
}

.hww-stage-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--surface-padding);
  background: var(--process-card-bg);
  text-align: left;
}

.hww-stage-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.hww-stage-card__icon {
  margin-bottom: 0;
}

.hww-stage-card__num {
  font-family: var(--font-family-body);
  font-size: var(--font-body-size);
  font-weight: var(--font-weight-medium);
  color: var(--process-card-number-color);
}

.hww-stage-card__title {
  margin: 0 0 var(--space-4);
}

.hww-stage-card__text {
  margin: 0 0 var(--space-5);
  font-size: var(--font-body-size);
  line-height: var(--line-height-relaxed);
  color: var(--color-body);
}

.hww-stage-card__list {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-body);
}

.hww-stage-card__link {
  margin-top: auto;
  font-size: var(--font-body-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  transition: color var(--transition-base);
}

.hww-stage-card__link:hover {
  color: var(--color-primary-dark);
}

.hww-dark-panel__title {
  color: var(--color-white);
}

.hww-dark-panel__lead {
  margin: 0 0 var(--space-8);
  max-width: 36rem;
  font-size: var(--font-body-size);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.78);
}

.process-cards--3 .process-cards__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.process-cards--3 .process-cards__timeline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-8);
}

.process-cards--3 .process-cards__timeline::before {
  left: 16.666%;
  right: 16.666%;
}

@media (max-width: 62em) {
  .process-cards--3 .process-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-cards--3 .process-cards__timeline {
    display: none;
  }
}

@media (max-width: 36em) {
  .process-cards--3 .process-cards__grid {
    grid-template-columns: 1fr;
  }
	.cta-banner__content{
		max-width: 100%;
	}
	.grid--4 {
    grid-template-columns: auto;
}
}

.process-cards--5 .process-cards__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--layout-gap-cards);
}

.process-cards--5 .process-cards__timeline {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--layout-gap-cards);
}

.process-cards--5 .process-cards__timeline::before {
  left: 10%;
  right: 10%;
}

@media (max-width: 62em) {
  .process-cards--5 .process-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-cards--5 .process-cards__timeline {
    display: none;
  }
}

@media (max-width: 36em) {
  .process-cards--5 .process-cards__grid {
    grid-template-columns: 1fr;
  }
}

.hww-delivery-icons {
  margin-top: var(--space-8);
}

.hww-principles-label {
  margin-bottom: calc(var(--section-header-gap) * 0.5);
  color: var(--color-heading);
}

@media (max-width: 62em) {
  .hww-stage-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Insights Page (Taskopia blog-three style) --- */
.insights-page .insight-card__title,
.insights-page .insights-panel__title {
  font-size: var(--font-insights-h2-size);
  line-height: var(--font-insights-h2-line-height);
}

.insights-hero__inner {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.insights-hero__inner .hero__content {
  max-width: none;
}

.insights-hero__inner .eyebrow {
  justify-content: center;
}

.insights-hero__title {
  margin-inline: auto;
}

.insights-hero__inner .hero__actions {
  justify-content: center;
}

.insights-hero__inner--detail {
  max-width: min(76rem, 100%);
}

.insights-hero__inner--detail .hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

.insights-hero__inner--detail .hero__title,
.insights-hero__inner--detail .hero__subtitle {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

.insights-listing > .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-fluid-card-lg);
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-fluid-md);
  align-items: stretch;
}

.insight-card {
  height: 100%;
  background: var(--surface-bg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.insight-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.insight-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.insight-card__media {
  margin: var(--space-fluid-xs);
  overflow: hidden;
}

.insight-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  transition: transform var(--transition-slow);
}

.insight-card:hover .insight-card__img {
  transform: scale(1.02);
}

.insight-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-4);
  padding: 0 var(--space-fluid-sm) var(--space-fluid-sm);
}

.insight-card__date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-body);
}

.insight-card__date-icon {
  font-size: 1.125rem;
  color: var(--color-primary);
}

.insight-card__title {
  margin: 0;
  flex: 1;
  transition: color var(--transition-base);
}

.insight-card:hover .insight-card__title {
  color: var(--color-primary);
}

.insight-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

.insight-card__avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8f4ff 0%, #f3e8ff 100%);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.insight-card__author-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
}

.insights-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding-block: var(--space-2);
}

.insights-pagination__status {
  margin: 0;
  font-size: var(--font-body-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-heading);
}

.insights-pagination__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-body-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--btn-radius);
  transition: background var(--transition-base);
}

.insights-pagination__next:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.insights-panel {
  padding: var(--space-fluid-card-lg);
}

.insights-panel__title {
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--surface-divider-color);
}

.insights-categories {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.insights-categories__item {
  display: inline-flex;
  align-items: center;
}

.insights-categories__item:not(:last-child)::after {
  content: '•';
  margin-left: var(--space-5);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.insights-categories__link {
  font-size: var(--font-body-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-light);
  transition: color var(--transition-base);
}

.insights-categories__link:hover,
.insights-categories__link.is-active {
  color: var(--color-primary);
}

.insights-categories--stack {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
}

.insights-categories--stack .insights-categories__item {
  display: block;
  width: 100%;
}

.insights-categories--stack .insights-categories__item:not(:last-child)::after {
  display: none;
}

.insights-categories--stack .insights-categories__item + .insights-categories__item {
  border-top: 1px solid var(--surface-divider-color);
}

.insights-categories--stack .insights-categories__link {
  display: block;
  width: 100%;
  padding: var(--space-4) 0;
}

.insights-latest {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.insights-latest__link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.insights-latest__link:hover {
  opacity: 0.85;
}

.insights-latest__link:hover .insights-latest__title {
  color: var(--color-primary);
}

.insights-latest__thumb {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: #eef2ff;
}

.insights-latest__title {
  margin: 0;
  padding-top: var(--space-1);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  transition: color var(--transition-base);
}

@media (max-width: 62em) {
  .insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 36em) {
  .insights-grid {
    grid-template-columns: 1fr;
  }

  .insights-latest {
    grid-template-columns: 1fr;
  }

  .insights-categories__item:not(:last-child)::after {
    display: none;
  }
}

/* --- Insights detail (blog post) --- */
.insight-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: var(--space-fluid-section);
  align-items: start;
}

.insight-detail-article__media {
  margin-bottom: var(--space-fluid-card-lg);
  overflow: hidden;
  border-radius: var(--surface-radius);
}

.insight-detail-article__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.insight-detail-article__content {
  font-size: var(--font-body-size);
  line-height: var(--line-height-relaxed);
  color: var(--color-body);
}

.insight-detail-article__content > p {
  margin: 0 0 var(--space-6);
}

.insight-detail-article__h2 {
  margin: 0 0 var(--space-5);
}

.insight-detail-article__h3 {
  margin: var(--space-8) 0 var(--space-5);
  color: var(--color-heading);
}

.insight-detail-article__h4 {
  margin: var(--space-6) 0 var(--space-4);
  font-family: var(--font-family-heading);
  font-size: var(--font-heading-five-size);
  line-height: var(--font-heading-five-line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
}

.insight-detail-quote {
  margin: var(--space-8) 0;
  padding: var(--space-fluid-md);
  background: #f8f9ff;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.insight-detail-quote__text {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  font-style: italic;
  color: var(--color-text);
}

.insight-detail-quote__footer {
  margin: 0;
}

.insight-detail-quote__author {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-style: normal;
  color: var(--color-heading);
}

.insight-detail-article__list {
  margin: 0 0 var(--space-8);
  padding-left: var(--space-5);
}

.insight-detail-article__list li {
  margin-bottom: var(--space-3);
}

.insight-detail-article__list li:last-child {
  margin-bottom: 0;
}

.insight-detail-author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-8) 0;
  padding: var(--space-5);
  border: var(--surface-border);
  border-radius: var(--surface-radius);
  background: var(--surface-bg);
}

.insight-detail-author__avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8f4ff 0%, #f3e8ff 100%);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.insight-detail-author__name {
  margin: 0 0 var(--space-1);
  font-size: var(--font-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
}

.insight-detail-author__role {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-body);
}
.insight-detail-article__content > .insight-detail-article__h2:not(:first-child) {
    margin-top: var(--space-fluid-section);
}
.insight-detail-article__closing {
  margin: 0;
}

.insight-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-fluid-sm);
  position: sticky;
  top: 6rem;
}

.insight-detail-sidebar .insights-latest {
  grid-template-columns: 1fr;
}

@media (max-width: 62em) {
  .insight-detail-layout {
    grid-template-columns: 1fr;
  }

  .insight-detail-sidebar {
    position: static;
  }
}

/* --- Operational Platforms Page --- */
.op-shift {
  background: transparent;
}

.op-shift__title {
  margin: 0 0 var(--space-6);
  max-width: 28rem;
  color: var(--color-text);
}

.op-shift__arrow {
  color: var(--color-primary-light);
}

.op-shift__lead {
  margin: 0 0 var(--space-6);
  font-size: var(--font-body-size);
  line-height: var(--line-height-relaxed);
  color: var(--color-body);
}

.op-shift-cards {
  margin-bottom: var(--space-8);
}

.op-shift-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 4.5rem;
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-body-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-align: center;
  color: var(--color-text);
  background: var(--color-white);
  border-radius: var(--radius-xl);
}

.op-shift-card__arrow {
  color: var(--color-primary);
}

.op-shift__footnote {
  margin: 0;
  max-width: 32rem;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-body);
}

.op-shift__definition-title {
  margin: 0 0 var(--space-6);
}

.op-shift-features__intro,
.op-shift-features__outro {
  margin: 0;
  padding: var(--space-6) 0;
  font-size: var(--font-body-size);
  line-height: var(--line-height-relaxed);
  color: var(--color-body);
}

.op-shift-features__intro {
  padding-top: 0;
  border-top: 0;
}

.op-shift-features .check-list {
  margin: 0;
  gap: 0;
}

.op-shift-features .check-list__item {
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--list-item-border);
  border-bottom: 0;
  color: var(--color-text);
}

.op-shift-features .check-list__icon {
  margin-top: var(--space-1);
}

.op-shift-features__outro {
  border-top: 1px solid var(--surface-divider-color);
}

@media (max-width: 62em) {
  .op-shift__grid {
    grid-template-columns: 1fr;
  }

  .op-shift__definition {
    margin-top: var(--space-10);
  }
}

.op-principles-grid {
  align-items: stretch;
}

.op-principle-card {
  height: 100%;
}

.op-build {
  background: transparent;
}

.doc-page > .section.op-build {
  padding-block: var(--section-padding-y);
}

.op-build__eyebrow {
  justify-content: center;
}

.op-build__title {
  color: rgba(255, 255, 255, 0.88);
}

.op-build-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px dashed var(--surface-border-inverse-dashed);
}

.op-build-card {
  min-height: 13rem;
  padding: var(--space-fluid-md);
  border-right: 1px dashed var(--surface-border-inverse-dashed);
  border-bottom: 1px dashed var(--surface-border-inverse-dashed);
}

.op-build-card:nth-child(3n) {
  border-right: 0;
}

.op-build-card:nth-child(n + 4) {
  border-bottom: 0;
}

.op-build-card--empty {
  opacity: 0;
  pointer-events: none;
}

.op-build-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-primary);
}

.op-build-card__icon .material-symbols-outlined {
  font-size: 1.5rem;
}

.op-build-card__title {
  margin: 0 0 var(--space-3);
  color: rgba(255, 255, 255, 0.88);
}

.op-build-card__text {
  margin: 0;
  max-width: 24rem;
  font-size: var(--font-body-size);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.62);
}

.doc-feature-strip--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 62em) {
  .doc-feature-strip--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .op-build-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .op-build-card:nth-child(3n) {
    border-right: 1px dashed var(--surface-border-inverse-dashed);
  }

  .op-build-card:nth-child(2n) {
    border-right: 0;
  }

  .op-build-card:nth-child(n + 4) {
    border-bottom: 1px dashed var(--surface-border-inverse-dashed);
  }

  .op-build-card:nth-child(n + 5) {
    border-bottom: 0;
  }

  .op-build-card--empty {
    display: none;
  }

  .doc-feature-strip--5 .doc-feature-strip__item:nth-child(4) {
    border-top: 1px solid var(--surface-divider-color);
  }
}

@media (max-width: 36em) {
  .doc-feature-strip--5 {
    grid-template-columns: 1fr;
  }

  .op-build-grid {
    grid-template-columns: 1fr;
    border-top: 0;
  }

  .op-build-card {
    border-right: 0;
    border-bottom: 1px dashed var(--surface-border-inverse-dashed);
  }

  .op-build-card:last-child {
    border-bottom: 0;
  }
}

/* --- Liquid responsive hardening (tablet/mobile only) --- */
@media (max-width: 62em) {
  /* Prevent overflow from long tokens/URLs in cards and metadata blocks */
  .card__title,
  .card__text,
  .content-item__title,
  .content-item__text,
  .process-card__title,
  .process-card__text,
  .section-header__title,
  .section-header__subtitle,
  .footer__meta-link,
  .footer__meta-text,
  .contact-info-card__link,
  .insight-card__title,
  .insights-latest__title {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Keep pills/chips liquid before phone breakpoint */
  .doc-use-case-chip {
    max-width: 100%;
  }

  .doc-use-case-chip__label {
    white-space: normal;
  }

  /* Remove fixed media floor that can force horizontal scroll */
  .image-placeholder--full-height {
    min-width: 0;
  }
}

@media (max-width: 36em) {
  /* Buttons remain full width without clipping labels */
  .btn {
    white-space: normal;
    text-align: center;
  }
}

.op-dark-panel {
  padding: var(--space-fluid-section-pad);
}

.op-dark-panel__split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-fluid-section);
  align-items: start;
}

.op-dark-panel__lead {
  margin: 0 0 var(--space-8);
  max-width: 32rem;
  font-size: var(--font-body-size);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.78);
}

.op-dark-panel .doc-flow-panel__title,
.op-dark-panel .section-header__title {
  color: var(--color-white);
}

.op-dark-card {
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--surface-border-inverse-strong);
  border-radius: var(--radius-lg);
}

.op-dark-card__icon {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
}

.op-dark-card__title {
  margin: 0 0 var(--space-2);
  color: var(--color-white);
}

.op-dark-card__text {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.72);
}

.op-dark-benefits {
  padding: var(--space-fluid-card-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--surface-border-inverse-strong);
  border-radius: var(--surface-radius);
}

.op-dark-benefits__title {
  margin: 0 0 var(--space-6);
  font-size: var(--font-heading-five-size);
  line-height: var(--font-heading-five-line-height);
  font-weight: var(--font-heading-weight);
  color: var(--color-white);
}

.op-dark-benefits__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.op-dark-benefits__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.op-dark-benefits__item strong {
  font-size: var(--font-body-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
}

.op-dark-benefits__item span {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.72);
}

.op-comparison__col {
  padding: var(--surface-padding);
  border: var(--surface-border);
  border-radius: var(--surface-radius);
  background: var(--surface-bg);
}

.op-comparison__col--after {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--surface-divider-color));
  background: color-mix(in srgb, var(--color-primary) 4%, var(--surface-bg));
}

.op-comparison__heading {
  margin: 0 0 var(--space-6);
  font-size: var(--font-heading-five-size);
  line-height: var(--font-heading-five-line-height);
  font-weight: var(--font-heading-weight);
  color: var(--color-heading);
}

@media (max-width: 62em) {
  .op-dark-panel__split {
    grid-template-columns: 1fr;
  }

  .op-principles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 36em) {
  .op-principles-grid {
    grid-template-columns: 1fr;
  }

  .op-comparison {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Heading colors — match index.html
   Light surfaces:
     h1, h3–h6  → --color-heading (#353451)
     h2         → --color-text (#1a0b54)
     .numbered-list__title, .value-list__title → --color-text
   Dark surfaces: white (CTA, footer, testimonials, gradient panels)
   ========================================================================== */

/* Dark-surface headings (index.html patterns) */
.section-panel--dark-gradient .section-header__title,
.section-panel--dark-gradient .doc-flow-panel__title,
.doc-flow-panel .doc-flow-step__title,
.doc-flow-panel .numbered-list__title,
.cta-banner__title,
.footer__heading,
.testimonial-card__headline,
.about-dual-card__title,
.hww-dark-panel__title,
.op-dark-panel .section-header__title,
.op-dark-panel .doc-flow-panel__title,
.op-dark-card__title,
.op-build-card__title,
.op-dark-benefits__title {
  color: var(--color-white);
}

.op-build__title {
  color: rgba(255, 255, 255, 0.88);
}

/* ==========================================================================
   Images — no box shadow (loaded last to override layout/page rules)
   ========================================================================== */

img,
.hero__visual,
.hero__visual-panel,
.image-placeholder,
.image-placeholder--soft,
.image-placeholder--on-dark,
.image-placeholder--full-height,
.insight-card__img,
.insight-detail-article__img,
.insights-latest__thumb,
.cta-banner__phone,
.cta-banner__visual .image-placeholder,
.testimonial-card__img {
  box-shadow: none;
}