/*
 * Shared page-banner typography.
 * Change these variables once to keep every public banner in sync.
 */
:root {
  --roova-banner-title-size:clamp(34px,3.6vw,68px);
  --roova-banner-title-size-mobile:clamp(24px,8vw,48px);
  --roova-banner-title-line-height:.98;
  --roova-banner-title-letter-spacing:-.055em;
  --roova-banner-eyebrow-size:clamp(10px,.729167vw,15px);
  --roova-banner-copy-size:clamp(14px,1vw,19px);
  /* Section headings intentionally alias the Banner scale so one edit
   * updates every large page heading at once. */
  --roova-section-title-size:var(--roova-banner-title-size);
  --roova-section-title-size-mobile:var(--roova-banner-title-size-mobile);
  --roova-section-title-line-height:var(--roova-banner-title-line-height);
  --roova-section-title-letter-spacing:var(--roova-banner-title-letter-spacing);
  --roova-section-eyebrow-size:var(--roova-banner-eyebrow-size);
  --roova-form-support-size:13px;
  /* Keep both inquiry forms on the homepage form scale from one place. */
  --roova-form-label-size:var(--small);
  --roova-form-control-size:var(--small);
  --roova-form-button-size:10px;
}

/* Static hero shells and the editable hero block shells use the same scale. */
:where(
  .hero .hero-title,
  .topic-hero h1,
  .about-hero h1,
  .gallery-hero h1,
  .case-hero h1,
  .news-hero-content h1,
  .news-detail-hero-content h1,
  .contact-hero h1,
  .contact-page .contact-inquiry-intro h1,
  .products-hero h1,
  .catalog-hero h1,
  .product-detail-hero h1,
  .system-hero h1,
  .hero .managed-hero-copy :is(h1,h2),
  .about-hero .managed-hero-copy :is(h1,h2),
  .contact-hero .managed-hero-copy :is(h1,h2),
  .topic-hero .managed-hero-copy :is(h1,h2)
) {
  font-size:var(--roova-banner-title-size) !important;
  line-height:var(--roova-banner-title-line-height) !important;
  letter-spacing:var(--roova-banner-title-letter-spacing) !important;
  max-width:none !important;
}

/* Keep the coloured emphasis together; the surrounding hero frame controls
 * the available width, while the title itself has no artificial max-width. */
:where(
  .hero .hero-title em,
  .topic-hero h1 em,
  .about-hero h1 em,
  .gallery-hero h1 em,
  .case-hero h1 em,
  .news-hero-content h1 em,
  .news-detail-hero-content h1 em,
  .contact-hero h1 em,
  .contact-page .contact-inquiry-intro h1 em,
  .products-hero h1 em,
  .catalog-hero h1 em,
  .product-detail-hero h1 em,
  .managed-hero-copy :is(h1,h2) em
) {
  white-space:nowrap !important;
  display:block;
}

:where(
  .hero-content .eyebrow,
  .about-hero-content .eyebrow,
  .gallery-hero-content .eyebrow,
  .case-hero-content .eyebrow,
  .news-hero-content .eyebrow,
  .contact-hero-content .eyebrow,
  .contact-inquiry-intro .eyebrow,
  .catalog-hero .eyebrow,
  .products-hero .eyebrow,
  .system-hero .eyebrow,
  .managed-hero-copy .eyebrow
) {
  font-size:var(--roova-banner-eyebrow-size) !important;
}

:where(
  .hero-content .hero-detail,
  .hero-content .hero-subtitle,
  .about-hero-content>p:not(.eyebrow),
  .gallery-hero-content>p:not(.eyebrow),
  .case-hero-content>p:not(.eyebrow),
  .news-hero-content>p:not(.eyebrow),
  .news-detail-hero-content .news-detail-summary,
  .contact-hero-content>p:not(.eyebrow),
  .contact-inquiry-intro>p:not(.eyebrow),
  .topic-hero-description,
  .catalog-hero>p:not(.eyebrow),
  .catalog-hero-description,
  .products-hero>p:not(.eyebrow),
  .product-hero-summary,
  .system-hero>p:not(.eyebrow),
  .managed-hero-copy>p:not(.eyebrow)
) {
  font-size:var(--roova-banner-copy-size) !important;
}

/* Editorial section titles share one scale across the homepage, topic pages,
 * About, Gallery, News, Contact, catalogue and editable content modules. */
:where(
  .section-heading h2,
  .product-intro h2,
  .products .product-intro h2,
  .capacity .section-heading h2,
  .why .section-heading h2,
  .projects .section-heading h2,
  .about-intro-copy h2,
  .about-section-heading h2,
  .about-voices h2,
  .about-belief h2,
  .about-cta h2,
  .about-story-unified-heading h2,
  .gallery-heading h2,
  .gallery-cta h2,
  .case-heading h2,
  .news-heading h2,
  .news-cta h2,
  .contact-section-heading h2,
  .contact-intro h2,
  .contact-vietnam-panel h2,
  .topic-feature-copy h2,
  .topic-section-heading h2,
  .journey-heading h2,
  .production-heading h2,
  .catalog-intro h2,
  .product-library-heading h2,
  .product-list-cta h2,
  .product-information-heading h2,
  .product-description-heading h2,
  .product-reviews-heading h2,
  .managed-page-content .entry-content>h2,
  .roova-pattern-section .roova-pattern-title
) {
  font-size:var(--roova-section-title-size) !important;
  line-height:var(--roova-section-title-line-height) !important;
  letter-spacing:var(--roova-section-title-letter-spacing) !important;
  max-width:none !important;
}

:where(
  .section-heading h2 em,
  .product-intro h2 em,
  .about-intro-copy h2 em,
  .about-section-heading h2 em,
  .about-voices h2 em,
  .about-belief h2 em,
  .about-cta h2 em,
  .about-story-unified-heading h2 em,
  .gallery-heading h2 em,
  .gallery-cta h2 em,
  .case-heading h2 em,
  .news-heading h2 em,
  .news-cta h2 em,
  .contact-section-heading h2 em,
  .contact-intro h2 em,
  .contact-vietnam-panel h2 em,
  .topic-feature-copy h2 em,
  .topic-section-heading h2 em,
  .journey-heading h2 em,
  .production-heading h2 em,
  .catalog-intro h2 em,
  .product-library-heading h2 em,
  .product-list-cta h2 em,
  .product-information-heading h2 em,
  .product-description-heading h2 em,
  .product-reviews-heading h2 em,
  .roova-pattern-section .roova-pattern-title em
) {
  display:block !important;
  white-space:nowrap !important;
}

:where(
  .section-heading .eyebrow,
  .product-intro .eyebrow,
  .about-intro-copy .eyebrow,
  .about-section-heading .eyebrow,
  .about-voices .eyebrow,
  .about-belief .eyebrow,
  .about-cta .eyebrow,
  .about-story-unified-heading .eyebrow,
  .gallery-heading .eyebrow,
  .gallery-cta .eyebrow,
  .case-heading .eyebrow,
  .news-heading .eyebrow,
  .news-cta .eyebrow,
  .contact-section-heading .eyebrow,
  .contact-intro .eyebrow,
  .contact-vietnam-panel .eyebrow,
  .topic-section-heading .topic-kicker,
  .topic-feature-copy .topic-kicker,
  .journey-heading .topic-kicker,
  .production-heading .topic-kicker,
  .catalog-intro .eyebrow,
  .product-library-heading .eyebrow,
  .managed-page-content .entry-content .eyebrow,
  .roova-pattern-section .roova-pattern-eyebrow
) {
  font-size:var(--roova-section-eyebrow-size) !important;
}

@media(max-width:991.98px) {
  :root {
    --roova-form-label-size:var(--small);
    --roova-form-control-size:16px;
    --roova-form-button-size:11px;
  }

  :where(
    .hero .hero-title,
    .topic-hero h1,
    .about-hero h1,
    .gallery-hero h1,
    .case-hero h1,
    .news-hero-content h1,
    .news-detail-hero-content h1,
    .contact-hero h1,
    .contact-page .contact-inquiry-intro h1,
    .products-hero h1,
    .catalog-hero h1,
    .product-detail-hero h1,
    .system-hero h1,
    .hero .managed-hero-copy :is(h1,h2),
    .about-hero .managed-hero-copy :is(h1,h2),
    .contact-hero .managed-hero-copy :is(h1,h2),
    .topic-hero .managed-hero-copy :is(h1,h2)
  ) {
    font-size:var(--roova-banner-title-size-mobile) !important;
  }

  :where(
    .section-heading h2,
    .product-intro h2,
    .products .product-intro h2,
    .capacity .section-heading h2,
    .why .section-heading h2,
    .projects .section-heading h2,
    .about-intro-copy h2,
    .about-section-heading h2,
    .about-voices h2,
    .about-belief h2,
    .about-cta h2,
    .about-story-unified-heading h2,
    .gallery-heading h2,
    .gallery-cta h2,
    .case-heading h2,
    .news-heading h2,
    .news-cta h2,
    .contact-section-heading h2,
    .contact-intro h2,
    .contact-vietnam-panel h2,
    .topic-feature-copy h2,
    .topic-section-heading h2,
    .journey-heading h2,
    .production-heading h2,
    .catalog-intro h2,
    .product-library-heading h2,
    .product-list-cta h2,
    .product-information-heading h2,
    .product-description-heading h2,
    .product-reviews-heading h2,
    .managed-page-content .entry-content>h2,
    .roova-pattern-section .roova-pattern-title
  ) {
    font-size:var(--roova-section-title-size-mobile) !important;
  }
}

/* Reuse the original factory banner image behind the Contact copy.  The
 * image fades into the same solid tone used by the form panel at the right. */
.contact-page .contact-inquiry-intro {
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  background:#15181c !important;
}

.contact-page .contact-inquiry-intro::before {
  z-index:-2 !important;
  background:
    linear-gradient(90deg,rgba(21,24,28,.28) 0%,rgba(21,24,28,.5) 48%,#15181c 100%),
    var(--contact-factory-image,url('../images/contact-factory.webp')) center/cover no-repeat !important;
  opacity:.86 !important;
}

.contact-page .contact-inquiry-intro::after {
  z-index:-1 !important;
  background:linear-gradient(90deg,transparent 0%,rgba(21,24,28,.16) 48%,#15181c 100%) !important;
}

@media(max-width:991.98px) {
  .contact-page .contact-inquiry-intro::before {
    background:
      linear-gradient(90deg,rgba(21,24,28,.56) 0%,rgba(21,24,28,.68) 100%),
      var(--contact-factory-image,url('../images/contact-factory.webp')) center/cover no-repeat !important;
    opacity:.78 !important;
  }

  .contact-page .contact-inquiry-intro::after {
    background:linear-gradient(90deg,rgba(21,24,28,.22),rgba(21,24,28,.5)) !important;
  }
}

/* Give the inquiry content a calmer top offset below the fixed navigation. */
@media(min-width:992px) {
  .contact-page .contact-inquiry-intro,
  .contact-page .contact-inquiry-form-wrap {
    padding-top:clamp(132px,10vw,180px) !important;
  }
}

@media(max-width:991.98px) {
  .contact-page .contact-inquiry-intro {
    padding-top:150px !important;
  }
}

/* Center both columns with equal breathing room above and below. */
@media(min-width:992px) {
  .contact-page .contact-inquiry-intro,
  .contact-page .contact-inquiry-form-wrap {
    padding-block:clamp(112px,8vw,148px) !important;
  }

  .contact-page .contact-inquiry-form-wrap {
    align-items:center !important;
  }
}

@media(max-width:991.98px) {
  .contact-page .contact-inquiry-intro {
    padding-block:112px !important;
  }
}

/* The site header is absolutely positioned over the inquiry panel.  Include
 * its height in the top breathing room so the visible gap starts below the
 * navigation, while the bottom gap remains the same size. */
:root {
  --roova-header-height:clamp(64px,4.166667vw,96px);
  --roova-contact-balance:clamp(112px,8vw,148px);
}

@media(min-width:992px) {
  .contact-page .contact-inquiry-intro,
  .contact-page .contact-inquiry-form-wrap {
    padding-top:calc(var(--roova-contact-balance) + var(--roova-header-height)) !important;
    padding-bottom:var(--roova-contact-balance) !important;
  }
}

@media(max-width:991.98px) {
  :root {
    --roova-header-height:72px;
    --roova-contact-balance:112px;
  }

  .contact-page .contact-inquiry-intro,
  .contact-page .contact-inquiry-form-wrap {
    padding-top:calc(var(--roova-contact-balance) + var(--roova-header-height)) !important;
    padding-bottom:var(--roova-contact-balance) !important;
  }
}

/* Keep each Direct Contact number and label on one shared baseline. */
.contact-page .contact-channel {
  display:grid !important;
  grid-template-columns:max-content minmax(0,1fr) !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  column-gap:8px !important;
  align-items:start !important;
}

.contact-page .contact-channel-index {
  position:static !important;
  grid-column:1 !important;
  grid-row:1 !important;
  line-height:1.25 !important;
}

.contact-page .contact-channel-label {
  grid-column:2 !important;
  grid-row:1 !important;
  padding-left:0 !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
}

.contact-page .contact-channel strong {
  grid-column:1 / -1 !important;
  grid-row:2 !important;
  align-self:end !important;
  margin-top:16px !important;
}

/* The homepage and Contact inquiry forms use the same control typography.
 * Keep these selectors together so a later size adjustment is a single edit. */
:where(
  #inquiry-form label:not(.form-honeypot),
  #contact-inquiry-form label:not(.form-honeypot)
) {
  font-size:var(--roova-form-label-size) !important;
}

:where(
  #inquiry-form input:not([type="checkbox"]),
  #inquiry-form textarea,
  #contact-inquiry-form input:not([type="checkbox"]),
  #contact-inquiry-form textarea
) {
  font-size:var(--roova-form-control-size) !important;
  line-height:1.5 !important;
}

:where(#inquiry-form button, #contact-inquiry-form button) {
  font-size:var(--roova-form-button-size) !important;
}

/* Keep the consent copy and response note readable at the same size on both
 * inquiry forms. */
:where(
  #inquiry-form .form-consent,
  #contact-inquiry-form .form-consent,
  #inquiry-form .form-note,
  #contact-inquiry-form .contact-form-note
) {
  font-size:var(--roova-form-support-size) !important;
  line-height:1.5 !important;
}

:where(
  #inquiry-form .form-consent span,
  #contact-inquiry-form .form-consent span
) {
  font-size:inherit !important;
}

@media(min-width:992px) {
  /* The Contact reference keeps the white and red title phrases on separate
   * single lines inside the outer inquiry panel. */
  .contact-page .contact-inquiry-intro h1 {
    white-space:nowrap !important;
  }
}

/* Keep the two homepage capability cards on one shared copy grid.  The
 * legacy product rules give the suspension card a different left padding;
 * the reference layout uses the same copy width, inset and vertical rhythm
 * for both cards. */
.products .product-card.capability-card .capability-copy {
  width:53% !important;
  height:100% !important;
  padding:92px 28px 28px !important;
}

.products .product-card.capability-card .capability-button {
  width:220px !important;
  min-width:220px !important;
  white-space:nowrap !important;
}

@media(max-width:860px) {
  .products .product-card.capability-card .capability-copy {
    width:65% !important;
    padding:86px 25px 25px !important;
  }
}

@media(max-width:575.98px) {
  .products .product-card.capability-card .capability-copy {
    width:82% !important;
    padding:78px 20px 20px !important;
  }

  .products .product-card.capability-card .capability-button {
    width:168px !important;
    min-width:168px !important;
  }
}

/* Shared two-column heading treatment for sections that pair a title with
 * explanatory copy.  The case archive was missing this layout, so its copy
 * fell below the heading instead of sitting in the right column. */
:where(
  .products .product-intro,
  .capacity .section-heading,
  .why .section-heading,
  .case-heading,
  .gallery-heading,
  .news-heading,
  .contact-section-heading,
  .product-library-heading,
  .about-section-heading
) {
  display:grid !important;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr) !important;
  gap:clamp(40px,7vw,140px) !important;
  align-items:end !important;
}

:where(
  .products .product-intro .section-description,
  .capacity .section-heading .section-description,
  .why .section-heading .section-description,
  .case-heading>p,
  .gallery-heading>p,
  .news-heading>p,
  .contact-section-heading>p,
  .product-library-heading>p,
  .about-section-heading>p
) {
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  font-size:clamp(14px,.95vw,19px) !important;
  line-height:1.75 !important;
}

:where(
  .case-heading h2,
  .gallery-heading h2,
  .news-heading h2,
  .contact-section-heading h2,
  .product-library-heading h2,
  .about-section-heading h2
) {
  margin-top:clamp(22px,2.2vw,40px) !important;
}

@media(max-width:991.98px) {
  :where(
    .products .product-intro,
    .capacity .section-heading,
    .why .section-heading,
    .case-heading,
    .gallery-heading,
    .news-heading,
    .contact-section-heading,
    .product-library-heading,
    .about-section-heading
  ) {
    grid-template-columns:1fr !important;
    gap:26px !important;
  }

  :where(
    .products .product-intro .section-description,
    .capacity .section-heading .section-description,
    .why .section-heading .section-description,
    .case-heading>p,
    .gallery-heading>p,
    .news-heading>p,
    .contact-section-heading>p,
    .product-library-heading>p,
    .about-section-heading>p
  ) {
    width:auto !important;
    max-width:620px !important;
  }
}

/* Final mobile sizing for the homepage capability cards. */
@media(max-width:575.98px) {
  .products .product-card.capability-card .capability-copy {
    width:92% !important;
    box-sizing:border-box;
    padding:76px 20px 18px !important;
  }
  .products .product-card.capability-card .capability-copy h3 {
    max-width:100%;
    font-size:clamp(24px,8vw,30px) !important;
    line-height:.98;
    letter-spacing:-.06em;
    white-space:nowrap;
  }
  .products .product-card.capability-card .capability-copy .product-spec {
    max-width:100%;
    margin-top:9px;
    font-size:11px;
    line-height:1.35;
  }
  .products .product-card.capability-card .capability-highlights {
    width:100%;
    margin-top:12px;
    gap:7px;
    font-size:10px;
    line-height:1.35;
  }
  .products .product-card.capability-card .capability-highlights li {
    padding-left:11px;
  }
  .products .product-card.capability-card .capability-button {
    width:150px !important;
    min-width:0 !important;
    min-height:38px;
    margin-top:16px;
    padding:9px 12px;
    gap:8px;
    font-size:10px;
  }
}