@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* Shared typography, alignment, and contrast contract for all active pages. */
:root {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Albert Sans", Arial, sans-serif;
  --cs-font-display: "Cormorant Garamond", Georgia, serif;
  --cs-font-body: "Albert Sans", Arial, sans-serif;
  --cs-font-sans: "Albert Sans", Arial, sans-serif;
}

/* Editorial media stack: section context always leads, media follows. */
html body .site-video-feature {
  display: block !important;
  width: min(1120px, 100%) !important;
  margin-inline: auto !important;
  text-align: center !important;
}

html body .site-video-feature > :is(.video-kicker, h2, .support-section-title, .video-intro) {
  grid-column: auto !important;
  grid-row: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html body .site-video-feature > :is(h2, .support-section-title) {
  max-width: 900px !important;
}

html body .site-video-feature > .video-intro {
  max-width: 760px !important;
}

html body .site-video-feature > .site-video-carousel {
  width: 100% !important;
  margin-top: clamp(28px, 4vw, 44px) !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

html body .site-video-feature.is-single > .site-video-carousel {
  width: min(820px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Scoped exceptions to the global navigation body-font rule. */
html body .services-route-index :is(.services-route-index-label, a, a span) {
  font-family: var(--cs-font-display) !important;
}

html body.resources-support-page .book-resource-grid .book-copy > a.btn[download] {
  width: min(100%, 180px) !important;
  min-height: 48px !important;
  padding: 12px 20px !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html body,
html body p,
html body li,
html body label,
html body input,
html body select,
html body textarea,
html body .site-nav a,
html body .cs-footer,
html body .eyebrow,
html body .support-eyebrow,
html body .section-kicker,
html body .card-label,
html body .support-label,
html body .btn,
html body button,
html body .ghost-link,
html body .free-consult-banner,
html body header a,
html body nav a {
  font-family: var(--cs-font-body) !important;
  letter-spacing: 0;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .display-xxl,
html body .display-xl,
html body .display-lg,
html body .display-md,
html body .headline,
html body .support-title,
html body .support-section-title,
html body .section-title,
html body .hero-title,
html body .card-title,
html body .additional-service-price,
html body .service-price,
html body .product-price,
html body .support-price,
html body .price,
html body .price-tag,
html body .price-value,
html body [data-product-price] {
  font-family: var(--cs-font-display) !important;
  font-weight: 400;
  letter-spacing: 0;
}

html body header#site-header.page-header > .free-consult-banner,
html body .page-header > .free-consult-banner,
html body header#site-header.page-header .site-nav a,
html body header#site-header.page-header nav.primary a,
html body #site-header.page-header .site-nav.primary a,
html body .page-header .site-nav a,
html body .page-header nav.primary a {
  font-family: var(--cs-font-display) !important;
  letter-spacing: 0 !important;
}

html body header#site-header.page-header > .free-consult-banner,
html body .page-header > .free-consult-banner {
  font-family: var(--cs-font-display) !important;
}

html body header#site-header.page-header .site-nav a,
html body header#site-header.page-header nav.primary a,
html body #site-header.page-header .site-nav.primary a,
html body .page-header .site-nav a,
html body .page-header nav.primary a {
  font-weight: 500 !important;
}
html body main h1,
html body main h2,
html body main h3,
html body main h4,
html body main h5,
html body main h6,
html body section h1,
html body section h2,
html body section h3,
html body section h4,
html body section h5,
html body section h6,
html body .support-title,
html body .support-section-title,
html body .section-title,
html body .hero-title,
html body .card-title {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  text-wrap: balance;
}

html body .support-eyebrow,
html body .eyebrow,
html body .section-kicker,
html body .video-kicker,
html body .support-label,
html body .card-label,
html body .group-label,
html body .group-pill,
html body .meta-label,
html body .service-kicker,
html body .product-kicker {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html body .support-section-head,
html body .support-section-head.center,
html body .section-intro,
html body .section-heading,
html body .cs-section-head,
html body .merge-head,
html body .contact-light-head,
html body .quiz-section-head,
html body .service-decision-head,
html body .revision-decision-head {
  justify-items: center !important;
  text-align: center !important;
}

html body .support-section-head,
html body .support-section-head.center {
  display: block !important;
  max-width: 860px !important;
  margin: 0 auto clamp(34px, 5vw, 58px) !important;
}

html body :is(
  .support-section-head,
  .section-intro,
  .section-heading,
  .cs-section-head,
  .merge-head,
  .contact-light-head,
  .quiz-section-head,
  .service-decision-head,
  .revision-decision-head
) > div {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html body .support-section-head > p,
html body .section-intro > p,
html body .section-heading > p,
html body .cs-section-head > p,
html body .merge-head > p,
html body .contact-light-head > p,
html body .quiz-section-head > p,
html body .service-decision-head > p,
html body .revision-decision-head > p,
html body .support-section-copy {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Language controls belong in navigation, never over editorial hero imagery. */
html body .standalone-language-switch,
html body :is(.hero, .support-hero, .page-image-hero) :is(.language-switch, .legacy-language-toggle) {
  display: none !important;
}

html body .support-actions,
html body .hero-actions,
html body .hero-cta,
html body .cta-actions,
html body .button-row,
html body .service-card-actions,
html body .resource-actions,
html body .contact-actions,
html body .service-client-actions {
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html body main .btn,
html body section .btn,
html body main button:not(.mobile-menu-toggle),
html body section button:not(.mobile-menu-toggle) {
  justify-content: center !important;
  text-align: center !important;
}

html body .support-card,
html body .service-card,
html body .additional-service-card,
html body .cs-service-card,
html body .resource-card,
html body .receive-card,
html body .route-card,
html body .detail-card,
html body .merge-card,
html body .checkout-product-card,
html body .product-card,
html body .book-card,
html body .process-three article,
html body .testimonial-grid article,
html body .persona-framework-grid article,
html body .faq-grid details {
  text-align: center !important;
}

html body :is(
  .support-card,
  .service-card,
  .additional-service-card,
  .cs-service-card,
  .resource-card,
  .receive-card,
  .route-card,
  .detail-card,
  .merge-card,
  .checkout-product-card,
  .product-card,
  .book-card
) :is(p, li, .problem, .meta) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html body .support-card > .btn,
html body .service-card > .btn,
html body .additional-service-card > .btn,
html body .resource-card > .btn,
html body .receive-card > .btn,
html body .route-card > .btn,
html body .detail-card > .btn,
html body .merge-card > .btn,
html body .checkout-product-card > .btn,
html body .product-card > .btn {
  align-self: center !important;
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: auto !important;
}

html body .additional-service-price,
html body .service-price,
html body .product-price,
html body .support-price,
html body .price,
html body .price-tag,
html body .price-value,
html body [data-product-price] {
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html body .support-card ul,
html body .service-card ul,
html body .additional-service-card ul,
html body .product-card ul,
html body .checkout-product-card ul {
  width: 100%;
  padding-left: 0;
  list-style-position: inside;
  text-align: center !important;
}

html body.support-page.proposal-image-system-page .page-image-hero .support-hero-copy,
html body.support-page.proposal-image-system-page .support-hero .support-hero-copy {
  justify-items: center !important;
  text-align: center !important;
}

html body.support-page.proposal-image-system-page .page-image-hero .support-eyebrow,
html body.support-page.proposal-image-system-page .page-image-hero h1.support-title,
html body.support-page.proposal-image-system-page .page-image-hero .support-lede,
html body.support-page.proposal-image-system-page .page-image-hero .support-actions,
html body.support-page.proposal-image-system-page .support-hero .support-eyebrow,
html body.support-page.proposal-image-system-page .support-hero h1.support-title,
html body.support-page.proposal-image-system-page .support-hero .support-lede,
html body.support-page.proposal-image-system-page .support-hero .support-actions {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html body.services-support-page #personas .support-card,
html body.services-support-page #empresas .support-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  height: 100% !important;
  text-align: center !important;
}

html body.services-support-page #personas .support-card .support-label,
html body.services-support-page #personas .support-card h3,
html body.services-support-page #personas .support-card p,
html body.services-support-page #empresas .support-card .support-label,
html body.services-support-page #empresas .support-card h3,
html body.services-support-page #empresas .support-card p {
  max-width: 46ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html body.services-support-page #personas .support-card > .btn,
html body.services-support-page #empresas .support-card > .btn {
  align-self: center !important;
  margin: auto auto 0 !important;
}

/*
 * Heroes are the deliberate exception to the centered section rhythm.
 * Keep the copy on the protected left side of the image at every breakpoint.
 */
html body :is(.hero, .support-hero, .page-image-hero) :is(.hero-copy, .support-hero-copy) {
  align-items: flex-start !important;
  justify-items: start !important;
  text-align: left !important;
}

html body :is(.hero, .support-hero, .page-image-hero) :is(
  h1,
  .hero-title,
  .support-title,
  .hero-eyebrow,
  .support-eyebrow,
  .eyebrow,
  .hero-lede,
  .support-lede,
  .hero-cta,
  .hero-actions,
  .support-actions
) {
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* Canonical contact title: centered, legible and restrained over the image. */
html body #contacto.contact-light.proposal-image-overlay .contact-light-head {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html body #contacto.contact-light.proposal-image-overlay .contact-light-head > :is(h2, .display-lg) {
  color: #f8f8f6 !important;
  font-weight: 700 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

html body #contacto.contact-light.proposal-image-overlay .contact-light-head > .eyebrow {
  color: #e5c36a !important;
  justify-content: center !important;
}

html body #contacto.contact-light.proposal-image-overlay .contact-light-head > p {
  color: rgba(248, 248, 246, .84) !important;
  max-width: 720px !important;
}

html body.support-page.proposal-image-system-page .page-image-hero .support-hero-copy,
html body.support-page.proposal-image-system-page .support-hero .support-hero-copy,
html body.support-page.service-support-page .page-image-hero .support-hero-copy,
html body.support-page.service-support-page .support-hero .support-hero-copy,
html body.support-page.legacy-service-support-page .page-image-hero .support-hero-copy,
html body.support-page.legacy-service-support-page .support-hero .support-hero-copy {
  align-items: flex-start !important;
  justify-items: start !important;
  text-align: left !important;
}

html body.support-page.proposal-image-system-page .page-image-hero :is(
  .support-eyebrow,
  h1.support-title,
  .support-lede,
  .support-actions
),
html body.support-page.proposal-image-system-page .support-hero :is(
  .support-eyebrow,
  h1.support-title,
  .support-lede,
  .support-actions
),
html body.support-page.service-support-page .page-image-hero :is(
  .support-eyebrow,
  h1.support-title,
  .support-lede,
  .support-actions
),
html body.support-page.service-support-page .support-hero :is(
  .support-eyebrow,
  h1.support-title,
  .support-lede,
  .support-actions
),
html body.support-page.legacy-service-support-page .page-image-hero :is(
  .support-eyebrow,
  h1.support-title,
  .support-lede,
  .support-actions
),
html body.support-page.legacy-service-support-page .support-hero :is(
  .support-eyebrow,
  h1.support-title,
  .support-lede,
  .support-actions
) {
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

html body :is(.hero, .support-hero, .page-image-hero) :is(
  h1,
  .hero-title,
  .support-title
) {
  color: #f8f8f6 !important;
}

html body :is(.hero, .support-hero, .page-image-hero) :is(
  .hero-lede,
  .support-lede
) {
  color: rgba(248, 248, 246, .84) !important;
}

/* High-contrast section headings on navy, charcoal, and image-backed bands. */
html body :is(
  .dark,
  .dark-section,
  .is-dark,
  .testimonials-dark-glass,
  .section-bg-image
) :is(
  .cs-section-head,
  .support-section-head,
  .section-heading,
  .section-intro,
  .merge-head,
  .service-decision-head,
  .revision-decision-head
) > :is(h1, h2, h3, h4, .support-title, .support-section-title, .section-title) {
  color: #f8f8f6 !important;
}

html body :is(
  .dark,
  .dark-section,
  .is-dark,
  .testimonials-dark-glass,
  .section-bg-image
) :is(
  .cs-section-head,
  .support-section-head,
  .section-heading,
  .section-intro,
  .merge-head
) > :is(.eyebrow, .support-eyebrow, .section-kicker, .support-label) {
  color: #e5c36a !important;
}

/* Preserve the left-aligned hero hierarchy on mobile. */
@media (max-width: 720px) {
  html body :is(.hero, .support-hero, .page-image-hero) :is(.hero-copy, .support-hero-copy) {
    align-items: flex-start !important;
    justify-items: start !important;
    text-align: left !important;
  }

  html body :is(.hero, .support-hero, .page-image-hero) :is(
    h1,
    .hero-title,
    .support-title,
    .hero-eyebrow,
    .support-eyebrow,
    .eyebrow,
    .hero-lede,
    .support-lede,
    .hero-cta,
    .hero-actions,
    .support-actions
  ) {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  html body.support-page.service-support-page :is(.support-hero, .page-image-hero) :is(
    .support-hero-copy,
    .support-eyebrow,
    h1.support-title,
    .support-lede,
    .support-actions
  ),
  html body.support-page.legacy-service-support-page :is(.support-hero, .page-image-hero) :is(
    .support-hero-copy,
    .support-eyebrow,
    h1.support-title,
    .support-lede,
    .support-actions
  ) {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    justify-items: start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }
}