/* ============================================================
   Hero banner: video + CTA composed as one banner keeping the
   1440:900 (16:10) proportion. The video fills the width at its
   natural aspect ratio, anchored to the top; the CTA panel fills
   the space below and overlaps the lower part of the video, whose
   glass background keeps the video softly visible behind it. The
   banner breaks out of the theme's 1200px container to run edge to
   edge across the full viewport width.
   ============================================================ */
.tobor-hero-banner {
  position: relative;
}

/* Home New page: hide the empty page-title bar so the hero sits
   directly below the fixed header (the theme's 84px header offset on
   #boxed-layout-pro is kept, so the hero starts right under it). */
body.page-id-73102 #page-title-pro {
  display: none;
}

/* Home New page, tablet + mobile (<=1024px): the theme pads #content-pro with a
   flat 100px to clear the fixed mobile header (.header-sm), but that header is
   only ~55px tall (180px logo), so ~45px of white shows between the header and
   the hero video. Trim the offset to just under the header height so the hero
   starts flush beneath it. Page-scoped, so every other page keeps the theme's
   100px offset. */
@media (max-width: 1024px) {
  body.page-id-73102 #content-pro {
    padding-top: 50px;
  }
}

/* Home New page: uniform section-title (h2) sizing.
   48px desktop / 40px tablet (<=1024px) / 32px mobile (<=767px).
   Targets the section headings only -- the blog-card title and the
   floating contact-form title (.gform_title) are intentionally left alone. */
body.page-id-73102 .tobor-cta-section h2,
body.page-id-73102 .tobor-slider-section__header h2,
body.page-id-73102 .tobor-why-teleoperation__title,
body.page-id-73102 .tobor-integrated-solution__title,
body.page-id-73102 .tobor-real-world-features__header h2,
body.page-id-73102 .tobor-teleoperation-bundle__header h2,
body.page-id-73102 .tobor-faq-section__top h2 {
  font-size: 48px;
  line-height: 1.2;
}

@media (max-width: 1024px) {
  body.page-id-73102 .tobor-cta-section h2,
  body.page-id-73102 .tobor-slider-section__header h2,
  body.page-id-73102 .tobor-why-teleoperation__title,
  body.page-id-73102 .tobor-integrated-solution__title,
  body.page-id-73102 .tobor-real-world-features__header h2,
  body.page-id-73102 .tobor-teleoperation-bundle__header h2,
  body.page-id-73102 .tobor-faq-section__top h2 {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  body.page-id-73102 .tobor-cta-section h2,
  body.page-id-73102 .tobor-slider-section__header h2,
  body.page-id-73102 .tobor-why-teleoperation__title,
  body.page-id-73102 .tobor-integrated-solution__title,
  body.page-id-73102 .tobor-real-world-features__header h2,
  body.page-id-73102 .tobor-teleoperation-bundle__header h2,
  body.page-id-73102 .tobor-faq-section__top h2 {
    font-size: 32px;
  }
}

@media (min-width: 1025px) {
  .tobor-hero-banner {
    /* full-bleed: break out of the theme's centered container and
       span the entire viewport width, edge to edge */
    width: auto;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* fill the viewport below the fixed ~84px header: header + hero = one
       full screen, with the video starting right below the header */
    height: calc(100vh - 84px);
    overflow: hidden;
    /* fallback so no bare gap can ever show behind the media */
    background: #ffffff;
  }

  /* the group's inner container carries no layout of its own here;
     it must not constrain the absolutely-positioned media/panel */
  .tobor-hero-banner .wp-block-group__inner-container {
    position: static;
    max-width: none;
  }

  .tobor-hero-banner figure.wp-block-video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    z-index: 0;
  }

  .tobor-hero-banner figure.wp-block-video video {
    display: block;
    width: 100%;
    height: auto;
  }

  .tobor-hero-banner .tobor-cta-section {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    z-index: 1;
  }
}

.tobor-cta-section {
  --tobor-cta-bg: #eef2f4;
  --tobor-cta-text: #171717;
  --tobor-cta-accent: #99c300;
  --tobor-button-hover-border: #7DA300;
  --tobor-button-hover-bg: #7DA300;
  --tobor-cta-glass-opacity: 0.58;
  --tobor-cta-blur: 22px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 211px;
  overflow: hidden;
  padding: 22px 96px;
  /* background:
    radial-gradient(circle at 11% 18%, rgba(132, 156, 166, 0.42), transparent 30%),
    radial-gradient(circle at 88% 26%, rgba(198, 204, 211, 0.58), transparent 31%),
    linear-gradient(180deg, var(--tobor-cta-bg), #f9faf9 100%); */
  color: var(--tobor-cta-text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-top: -40px;
}

.tobor-cta-section *,
.tobor-cta-section *::before,
.tobor-cta-section *::after {
  box-sizing: border-box;
}

.tobor-cta-section__glass {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, var(--tobor-cta-glass-opacity));
  backdrop-filter: blur(var(--tobor-cta-blur));
  -webkit-backdrop-filter: blur(var(--tobor-cta-blur));
  border-top: 1px solid rgba(255, 255, 255, 0.56);
  border-bottom: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.tobor-cta-section__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(624px, 624px);
    gap: 50px;
    align-items: start;
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;
}

.tobor-cta-section h2 {
  margin: 0;
  color: var(--tobor-cta-text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: 0;
}

.tobor-cta-section__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding-top: 8px;
}

.tobor-cta-section .tobor-cta-section__content p {
    width: 100%;
    margin: 0;
    color: var(--tobor-cta-text);
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0;
}

.tobor-cta-section__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.tobor-cta-section__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 128px;
  color: var(--tobor-cta-text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.tobor-cta-section__button:hover,
.tobor-cta-section__button:focus {
  color: var(--tobor-cta-text);
  text-decoration: none;
}

.tobor-cta-section__button--primary {
  border: 2px solid var(--tobor-cta-accent);
  background: var(--tobor-cta-accent);
}

.tobor-cta-section__button--primary:hover,
.tobor-cta-section__button--primary:focus {
  border: 2px solid var(--tobor-button-hover-border);
  background: var(--tobor-button-hover-bg);
}

.tobor-cta-section__button--secondary {
  border: 2px solid var(--tobor-cta-text);
  background: transparent;
}

.tobor-cta-section__button--secondary:hover,
.tobor-cta-section__button--secondary:focus {
  border: 2px solid #dddddd;
  background: #f7f7f7;
  color: var(--tobor-cta-text) !important;
}

@media (max-width: 1199px) {
  .tobor-cta-section {
    padding: 48px 56px;
  }

  .tobor-cta-section__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .tobor-cta-section h2 {
    font-size: 52px;
    line-height: 62px;
  }

  .tobor-cta-section__content p {
    font-size: 24px;
    line-height: 34px;
  }
}

@media (max-width: 767px) {
  .tobor-cta-section {
    padding: 40px 20px;
  }

  .tobor-cta-section h2 {
    font-size: 40px;
    line-height: 48px;
  }

  .tobor-cta-section__content {
    gap: 24px;
  }

  .tobor-cta-section__content p {
    font-size: 20px;
    line-height: 30px;
  }

  .tobor-cta-section__actions {
    gap: 16px;
  }

  .tobor-cta-section__button {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 16px;
    line-height: 24px;
  }
}