/*
 * Traina & Partners - components.
 * Requires tokens.css and base.css. One block per component; the header comment
 * names the Divi 5 module or Theme Builder element that rebuilds it.
 * Flexbox only. Transitions only on hover/focus.
 */

/* Component: site header | Divi 5: Theme Builder > Global Header (Menu module + Button module) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-h);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--container);
  min-height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: auto;
  min-height: 2.75rem;
  color: var(--color-heading);
  text-decoration: none;
}

.site-header__logo:hover {
  color: var(--color-heading);
}

.site-header__logo img,
.site-header__logo svg {
  height: 2.5rem;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list li + li {
  margin-top: 0;
}

.site-nav__item {
  position: relative;
}

.site-nav__link,
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-heading);
  font-weight: var(--weight-body-strong);
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.site-nav__link:hover,
.site-nav__toggle:hover,
.site-nav__link[aria-current="page"] {
  background: var(--color-primary-tint);
  color: var(--color-primary);
}

.site-nav__toggle svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--transition);
}

.site-nav__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.site-nav__sub {
  display: none;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
}

.site-nav__sub.is-open {
  display: block;
}

.site-nav__sub li + li {
  margin-top: 0;
}

.site-nav__sub a {
  display: block;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  color: var(--color-heading);
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.site-nav__sub a:hover {
  background: var(--color-primary-tint);
  color: var(--color-primary);
}

.site-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-heading);
  transition: background-color var(--transition), border-color var(--transition);
}

.site-header__burger:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
}

.site-header__burger svg {
  width: 1.375rem;
  height: 1.375rem;
}

.site-header__burger .icon-close {
  display: none;
}

.site-header__burger[aria-expanded="true"] .icon-open {
  display: none;
}

.site-header__burger[aria-expanded="true"] .icon-close {
  display: block;
}

/* Desktop dropdown: floats under the toggle. */
@media (min-width: 981px) {
  .site-nav__sub {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 110;
    min-width: 20rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
  }

  /* No-JS fallback: hover or keyboard focus inside the item opens the list. */
  .site-nav__item:hover > .site-nav__sub,
  .site-nav__item:focus-within > .site-nav__sub {
    display: block;
  }
}

/* Mobile: burger + full-width panel under the header bar. */
@media (max-width: 980px) {
  .site-header__burger {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: var(--space-2) var(--gutter) var(--space-3);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-2);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__link,
  .site-nav__toggle {
    width: 100%;
    justify-content: space-between;
    padding: 0.75rem 0.75rem;
  }

  .site-nav__sub {
    padding: 0 0 var(--space-1) var(--space-2);
  }

  .site-nav .btn {
    margin-top: var(--space-2);
    width: 100%;
  }
}

/* Component: site footer | Divi 5: Theme Builder > Global Footer (Section with 4 columns + bottom row) */
.site-footer {
  background: var(--color-primary-dark);
  color: var(--color-on-dark);
  padding: var(--space-8) 0 var(--space-4);
}

.site-footer a {
  color: var(--color-white);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-bg-alt);
  text-decoration: underline;
}

.site-footer__brand img,
.site-footer__brand svg {
  height: 2.5rem;
  width: auto;
  margin-bottom: var(--space-2);
}

.site-footer__tagline {
  max-width: 22rem;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading-light);
  font-size: var(--text-lead);
  line-height: var(--leading-tight);
}

.site-footer__title {
  margin: 0 0 var(--space-2);
  color: var(--color-white);
  font-size: var(--text-small);
  font-weight: var(--weight-body-strong);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list li + li {
  margin-top: 0;
}

.site-footer__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
}

.site-footer__list svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-on-dark);
  font-size: var(--text-small);
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__bottom .site-footer__partner {
  margin-left: auto;
}

@media (max-width: 767px) {
  .site-footer__bottom .site-footer__partner {
    margin-left: 0;
  }
}

/* Component: button | Divi 5: Button module, presets Primary / Secondary / Accent / Ghost (+ size variants) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.625rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-strong);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.btn:hover {
  text-decoration: none;
}

.btn svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

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

.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

.btn--secondary {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--secondary:hover {
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
}

/* Accent: white text (4.71:1 on terracotta; heading colour would be 3.74:1). Large size only. */
.btn--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
  min-height: 3.25rem;
  padding: 0.875rem 1.75rem;
  font-size: var(--text-lead);
}

.btn--accent:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-white);
}

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

.btn--ghost:hover {
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
}

.btn--sm {
  padding: 0.5rem 1rem;
  font-size: var(--text-small);
}

.btn--lg {
  min-height: 3.25rem;
  padding: 0.875rem 1.75rem;
  font-size: var(--text-lead);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn:disabled,
.btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn:disabled:hover,
.btn.is-disabled:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Buttons on dark sections. */
.section--dark .btn--secondary,
.section--dark .btn--ghost {
  border-color: var(--color-white);
  color: var(--color-white);
}

.section--dark .btn--ghost {
  border-color: transparent;
}

.section--dark .btn--secondary:hover,
.section--dark .btn--ghost:hover {
  background: var(--color-white-tint-12);
  color: var(--color-white);
}

.section--dark .btn--primary {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary-dark);
}

.section--dark .btn--primary:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-bg-alt);
  color: var(--color-primary-dark);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Component: hero | Divi 5: Section (bg) + Row 1/2 + 1/2, Text module + Button module x2 + Image module */
.hero {
  padding: var(--space-8) 0;
}

.hero .row {
  align-items: center;
}

/* Text-only hero (no media column): shorter bottom padding, the next section follows closely. */
.hero--text {
  padding-bottom: var(--space-5);
}

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

.hero__text .lead {
  max-width: 36rem;
  margin-bottom: var(--space-4);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hero__media {
  display: flex;
  justify-content: center;
}

@media (max-width: 767px) {
  .hero {
    padding: var(--space-6) 0;
  }

  .hero__actions .btn {
    width: 100%;
  }
}

/* Component: blurb card | Divi 5: Blurb module, preset "Card" (icon top, 40 px, title H3, text, link) */
.blurb {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.blurb__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-primary-tint);
  color: var(--color-primary);
}

.blurb__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Picture instead of the icon | Divi 5: Blurb "Service card" with Use Icon off and an Image instead (img/layout-*.svg) */
.blurb__figure {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.blurb__title {
  margin-bottom: var(--space-1);
  font-size: var(--text-h4);
}

.blurb__text {
  margin-bottom: 0;
}

.blurb__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  margin-top: auto;
  padding-top: var(--space-2);
  font-weight: var(--weight-body-strong);
  text-decoration: none;
}

.blurb__link:hover {
  text-decoration: underline;
}

.blurb__link svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--transition);
}

.blurb__link:hover svg {
  transform: translateX(3px);
}

/* Service card variant: the whole card is one link, arrow bottom right. */
.blurb--service {
  position: relative;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.blurb--service:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-2);
}

.blurb--service .blurb__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.blurb--plain {
  background: transparent;
  border: 0;
  padding: 0;
}

/* Component: guarantees strip "Cosa ricevi sempre" | Divi 5: Row with 3-6 Blurb modules, preset "Check inline" */
.guarantees {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guarantees li + li {
  margin-top: 0;
}

.guarantees__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1 1 calc((100% - 2 * var(--space-3)) / 3);
  min-width: 14rem;
}

.guarantees__check,
.feature-list__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-success);
  color: var(--color-white);
}

.guarantees__check svg,
.feature-list__check svg {
  width: 1rem;
  height: 1rem;
}

/* Small check (24 px) for lists beside media; .feature-list__check is an alias kept for existing markup. */
.guarantees__check--sm,
.feature-list__check {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
}

.guarantees__check--sm svg,
.feature-list__check svg {
  width: 0.875rem;
  height: 0.875rem;
}

.guarantees__item strong {
  display: block;
}

.guarantees__item p {
  margin: 0;
}

.section--dark .guarantees__check,
.section--dark .feature-list__check {
  background: var(--color-white);
  color: var(--color-primary-dark);
}

@media (max-width: 767px) {
  .guarantees__item {
    flex-basis: 100%;
    min-width: 0;
  }
}

/* Component: pricing table | Divi 5: Pricing Tables module (3 columns, featured column) */
.pricing {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-4) var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.pricing.is-featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-2);
}

.pricing__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.pricing__name {
  margin: 0;
  font-size: var(--text-h4);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pricing__from {
  display: block;
  font-size: var(--text-small);
}

.pricing__price {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-h2);
  line-height: 1.1;
  color: var(--color-heading);
}

.pricing__price small {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-body);
  color: var(--color-body);
}

.pricing__for {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.pricing__list {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.pricing__list li {
  position: relative;
  padding-left: 1.75rem;
}

.pricing__list li::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-success);
}

/* Block labels inside a card: Analisi e progettazione / Realizzazione / Messa online / Dopo la consegna. Divi 5: Text "Small caps" inside the Pricing Table body */
.pricing__group {
  margin: 0 0 var(--space-1);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
}

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

.pricing__list--grouped:last-of-type {
  margin-bottom: var(--space-4);
}

.pricing .btn {
  margin-top: auto;
}

.pricing__foot {
  margin: var(--space-2) 0 0;
  font-size: var(--text-small);
}

/* Component: comparison table | Divi 5: Code module with a table, or Table block; wrapper scrolls on phones */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
}

.compare-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.compare-table caption {
  padding: var(--space-2);
  text-align: left;
  font-weight: var(--weight-body-strong);
  color: var(--color-heading);
}

.compare-table th,
.compare-table td {
  padding: 0.75rem var(--space-2);
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--color-border);
}

.compare-table thead th {
  border-top: 0;
  background: var(--color-bg-alt);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading-light);
  font-size: var(--text-body);
}

.compare-table th[scope="row"] {
  font-weight: var(--weight-body-strong);
  color: var(--color-heading);
  min-width: 12rem;
}

.compare-table .is-featured {
  background: var(--color-primary-tint-05);
}

.compare-table .yes {
  color: var(--color-success);
  font-weight: var(--weight-body-strong);
}

.compare-table .no {
  color: var(--color-body);
  opacity: 0.6;
}

/* Component: FAQ | Divi 5: Toggle module (closed by default), preset "FAQ" */
.faq {
  border-top: 1px solid var(--color-border);
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 3.5rem;
  padding: var(--space-2) 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading-light);
  font-size: var(--text-h4);
  line-height: var(--leading-subheading);
  color: var(--color-heading);
  transition: color var(--transition);
}

.faq__q::-webkit-details-marker {
  display: none;
}

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

.faq__q svg {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-primary);
  transition: transform var(--transition);
}

.faq__item[open] .faq__q svg {
  transform: rotate(45deg);
}

.faq__a {
  padding: 0 0 var(--space-3);
  max-width: 48rem;
}

.faq__a > :last-child {
  margin-bottom: 0;
}

/* Component: tabs | Divi 5: Tabs module, preset "Underline" */
.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 var(--space-3);
  padding: 0;
  border-bottom: 1px solid var(--color-border);
}

.tabs__tab {
  min-height: 2.75rem;
  padding: 0.625rem 1rem;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--color-body);
  font-weight: var(--weight-body-strong);
  transition: color var(--transition), border-color var(--transition);
}

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

.tabs__tab[aria-selected="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

.tabs__panel[hidden] {
  display: none;
}

.tabs__panel > :last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .tabs__list {
    flex-direction: column;
    border-bottom: 0;
  }

  .tabs__tab {
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    margin-bottom: 0;
  }

  .tabs__tab[aria-selected="true"] {
    border-bottom-color: var(--color-border);
    border-left-color: var(--color-accent);
    background: var(--color-primary-tint);
  }
}

/* Component: step list "Cosa succede dopo" | Divi 5: Blurb module with number as icon (Use Icon off, number in title), preset "Step" */
.steps {
  counter-reset: step;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li + li {
  margin-top: 0;
}

.steps__item {
  flex: 1 1 calc((100% - 3 * var(--space-3)) / 4);
  min-width: 13rem;
}

.steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-lead);
}

.steps__title {
  font-size: var(--text-h4);
  margin-bottom: var(--space-1);
}

.steps__item p {
  margin: 0;
}

.section--dark .steps__num {
  background: var(--color-white);
  color: var(--color-primary-dark);
}

@media (max-width: 767px) {
  .steps__item {
    flex-basis: 100%;
    min-width: 0;
  }
}

/* Component: CTA band | Divi 5: Call To Action module on a Primary dark section, preset "Band" */
.cta-band {
  text-align: center;
}

.cta-band__inner {
  max-width: 44rem;
  margin: 0 auto;
}

.cta-band__title {
  margin-bottom: var(--space-2);
}

.cta-band p {
  margin-bottom: var(--space-4);
}

.cta-band .btn-group {
  justify-content: center;
}

/* Component: testimonial | Divi 5: Testimonial module, preset "Quote" */
.testimonial {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: var(--space-3) var(--space-3) var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* Opening quotation mark: decorative, always aria-hidden in the markup. */
.testimonial__mark {
  display: block;
  height: 2.25rem;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-accent);
}

.testimonial__quote {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--color-heading);
}

.testimonial__quote p {
  margin: 0;
}

.testimonial__quote p + p {
  margin-top: var(--space-1);
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
}

/* Optional 40 px logo or photo slot. */
.testimonial__media {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

.testimonial__media img,
.testimonial__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial__name {
  display: block;
  font-weight: var(--weight-body-strong);
  color: var(--color-heading);
}

.testimonial__role {
  display: block;
  font-size: var(--text-small);
  color: var(--color-body);
}

/* On Section "Dark": translucent card, white text. */
.testimonial--on-dark {
  background: var(--color-white-tint-06);
  border-color: var(--color-border-on-dark);
}

.testimonial--on-dark .testimonial__quote,
.testimonial--on-dark .testimonial__name {
  color: var(--color-white);
}

.testimonial--on-dark .testimonial__role {
  color: var(--color-on-dark);
}

.testimonial--on-dark .testimonial__media {
  background: var(--color-white-tint-12);
  color: var(--color-white);
}

/* Component: checklist band (lead magnet) | Divi 5: Email Optin module (or Contact Form with one field), preset "Checklist" */
.optin {
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
}

.optin__title {
  font-size: var(--text-h3);
}

.optin__form {
  margin-top: var(--space-3);
}

.optin__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: flex-start;
}

.optin__row .form__field {
  flex: 1 1 16rem;
  margin: 0;
}

.optin__row .btn {
  flex: 0 0 auto;
  /* Label line (1.6 line-height) + label margin: keeps the button level with the input. */
  margin-top: calc(1.6rem + 0.375rem);
}

.optin__privacy {
  margin: var(--space-1) 0 0;
  font-size: var(--text-small);
}

@media (max-width: 767px) {
  .optin {
    padding: var(--space-3);
  }

  .optin__row .btn {
    width: 100%;
    margin-top: 0;
  }
}

/* Component: form fields | Divi 5: Contact Form module, preset "Qualification" (field styles in Design > Fields) */
.form {
  max-width: 40rem;
}

.form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.form__row .form__field {
  flex: 1 1 15rem;
}

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

.form__label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: var(--weight-body-strong);
  color: var(--color-heading);
}

.req {
  color: var(--color-accent);
  font-weight: var(--weight-body-strong);
}

.form__input,
.form__select,
.form__textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-heading);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form__input:hover,
.form__select:hover,
.form__textarea:hover {
  border-color: var(--color-primary);
}

.form__input:focus-visible,
.form__select:focus-visible,
.form__textarea:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--focus);
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--color-body);
  opacity: 0.6;
}

.form__select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23173A2F' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

.form__textarea {
  min-height: 7rem;
  resize: vertical;
}

.form__help {
  display: block;
  margin-top: 0.375rem;
  font-size: var(--text-small);
}

.form__error {
  display: none;
  margin-top: 0.375rem;
  font-size: var(--text-small);
  font-weight: var(--weight-body-strong);
  color: var(--color-error);
}

.form__field.is-invalid .form__error {
  display: block;
}

.form__field.is-invalid .form__input,
.form__field.is-invalid .form__select,
.form__field.is-invalid .form__textarea {
  border-color: var(--color-error);
}

.form__check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.form__check input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--color-primary);
}

.form__check span {
  font-weight: var(--weight-body);
  color: var(--color-body);
}

.form__field.is-invalid .form__check input {
  outline: 2px solid var(--color-error);
  outline-offset: 1px;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.form__success {
  display: none;
  margin-top: var(--space-3);
}

/* Honeypot wrapper: off-screen, never display:none (bots skip hidden fields). Divi 5: Contact Form has its own spam options. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__success.is-visible {
  display: block;
}

/* Component: callout / note | Divi 5: Text module with left border, presets "Note", "Note accent", "Note success" */
.callout {
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout--accent {
  border-left-color: var(--color-accent);
  background: var(--color-accent-tint);
}

.callout--success {
  border-left-color: var(--color-success);
  background: var(--color-success-tint-10);
}

/* Component: badge | Divi 5: Text module inline span, presets "Badge", "Badge accent" */
.badge {
  display: inline-block;
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  font-size: var(--text-small);
  font-weight: var(--weight-body-strong);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.badge--accent {
  background: var(--color-accent);
  color: var(--color-white);
}

.badge--success {
  background: var(--color-success);
  color: var(--color-white);
}

.badge--outline {
  background: transparent;
  border: 1px solid currentColor;
}

/* Component: logo strip placeholder | Divi 5: Row with Image modules (grayscale), preset "Logo strip" */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo-strip li + li {
  margin-top: 0;
}

.logo-strip__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8rem;
  height: 3rem;
  padding: 0 var(--space-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-body);
  font-size: var(--text-small);
  opacity: 0.8;
}

/* Component: blog card | Divi 5: Blog module (grid) or Theme Builder post loop, preset "Post card" */
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.post-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-2);
}

.post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-3);
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  margin-bottom: var(--space-1);
  font-size: var(--text-small);
}

.post-card__title {
  font-size: var(--text-h4);
  margin-bottom: var(--space-1);
}

.post-card__title a {
  color: var(--color-heading);
  text-decoration: none;
}

.post-card__title a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.post-card__excerpt {
  margin-bottom: 0;
}

/* Component: article typography | Divi 5: Theme Builder > Post template, Post Content module with preset "Prose" */
.prose {
  max-width: 44rem;
}

.prose > * + * {
  margin-top: var(--space-2);
}

.prose h2 {
  margin-top: var(--space-5);
  font-size: var(--text-h3);
}

.prose h3 {
  margin-top: var(--space-4);
  font-size: var(--text-h4);
}

.prose ul,
.prose ol {
  padding-left: 1.5rem;
}

.prose blockquote {
  margin: var(--space-3) 0;
  padding: var(--space-1) var(--space-3);
  border-left: 4px solid var(--color-accent);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading-light);
  font-size: var(--text-lead);
  color: var(--color-heading);
}

.prose blockquote p {
  margin: 0;
}

.prose figure {
  margin: var(--space-3) 0;
}

.prose figcaption {
  margin-top: var(--space-1);
  font-size: var(--text-small);
}

.prose code {
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.9em;
}

.prose pre {
  padding: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-primary-dark);
  color: var(--color-white);
  overflow-x: auto;
}

.prose pre code {
  padding: 0;
  background: transparent;
}

/* Component: placeholder image box | Divi 5: Image module (replace with the real asset), ratio via Design > Sizing */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-size: var(--text-small);
  font-weight: var(--weight-body-strong);
  text-align: center;
}

.ph--16-9 {
  aspect-ratio: 16 / 9;
}

.ph--4-3 {
  aspect-ratio: 4 / 3;
}

.ph--1-1 {
  aspect-ratio: 1 / 1;
}

.ph__label {
  padding: var(--space-1) var(--space-2);
}

/* Component: logo lockup (HTML fallback) | Divi 5: Image module with ../brand/logo/tp-horizontal.svg (negative file in the footer) */
.tp-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--color-heading);
  text-decoration: none;
  white-space: nowrap;
}

.tp-lockup .tp-mark {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  color: var(--color-primary);
}

.tp-lockup .tp-wordmark {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  line-height: 1;
}

.tp-lockup .tp-amp {
  color: var(--color-accent);
}

.tp-lockup--negative,
.tp-lockup--negative .tp-mark,
.tp-lockup--negative .tp-wordmark {
  color: var(--color-white);
}

.tp-lockup--stacked {
  flex-direction: column;
  gap: 0.75rem;
  text-align: center;
}

.tp-lockup--stacked .tp-mark {
  width: 4rem;
  height: 4rem;
}

.tp-lockup--stacked .tp-tagline {
  font-size: var(--text-small);
  color: var(--color-body);
}

.tp-lockup--negative .tp-tagline {
  color: var(--color-on-dark);
}