/* TTC Services Manager — feedback patch v1.2.1
   Main Services Hero (native UX Banner) + Detail Hero + numbered sections.
   The desktop height uses the 540px Project Hero baseline in the supplied UX shortcode.
   Change the two 540px values together if the live Project Banner is later adjusted.
*/
.ttcs-main-hero-wrap,
.ttcs-detail {
  --ttcs-banner-height: 540px;
}
/* Main page: keep the UX Banner full width, with left text and image visible right. */
.ttcs-main-hero-wrap { padding: 0 !important; margin: 0 !important; }
.ttcs-main-hero-wrap > .section-content { padding: 0 !important; }
.ttcs-main-hero-wrap .ttcs-main-hero {
  min-height: var(--ttcs-banner-height);
  background-color: #142b49;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0 !important;
}
.ttcs-main-hero-wrap .ttcs-main-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #122945 0%, rgba(18,41,69,.98) 34%, rgba(18,41,69,.72) 53%, rgba(18,41,69,.06) 100%);
}
.ttcs-main-hero-wrap .ttcs-main-hero .banner-layers { position: relative; z-index: 2; }
.ttcs-main-hero-inner { max-width: 590px; }
.ttcs-main-hero-title {
  color: #fff !important; margin: 0 0 20px;
  font-size: clamp(38px, 5.25vw, 70px); line-height: 1.08;
  font-weight: 800; letter-spacing: -.035em;
}
.ttcs-main-hero-title span { color: var(--primary-color, #f0ba46); }
.ttcs-main-hero-description {
  color: rgba(255,255,255,.94) !important; font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.62; max-width: 530px; margin: 0 0 26px;
}
.ttcs-main-hero-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  border-radius: 100px; min-height: 47px; padding: 12px 22px;
  background: var(--primary-color, #f0ba46); color: #142b49 !important;
  text-decoration: none !important; font-size: 13px; font-weight: 750;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ttcs-main-hero-cta:hover, .ttcs-main-hero-cta:focus-visible {
  color: #142b49 !important; transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
#ttcs-services-start { scroll-margin-top: 105px; }
html:has(.ttcs-main-hero-wrap) { scroll-behavior: smooth; }
/* Detail pages: maintain original content-left / image-right structure,
   only the image selected on each service changes. */
.ttcs-detail__hero { min-height: var(--ttcs-banner-height); }
.ttcs-detail__hero-inner { padding: 56px clamp(28px,5.3vw,88px); }
.ttcs-detail__hero h1 {
  max-width: 52%; margin: 0 0 22px;
  font-size: clamp(48px, 5.4vw, 78px) !important;
  line-height: 1.07 !important;
}
.ttcs-detail__hero-desc { font-size: clamp(16px,1.4vw,19px); max-width: 480px; margin-bottom: 26px; }
.ttcs-detail__image-wrap { inset: 0 0 0 50%; }
.ttcs-detail__label { text-transform: none; font-size: 15px; letter-spacing: .01em; }
.ttcs-detail__intro { padding-top: clamp(48px,5vw,80px); padding-bottom: clamp(48px,5vw,80px); }
.ttcs-detail__solutions { padding-top: clamp(52px,6vw,88px); padding-bottom: clamp(52px,6vw,88px); }
@media (max-width: 849px) {
  .ttcs-detail__hero { min-height: 480px; }
  .ttcs-detail__hero-inner { padding: 48px 28px; }
  .ttcs-detail__hero h1 { font-size: clamp(43px,6.7vw,66px) !important; max-width: 60%; }
  .ttcs-detail__image-wrap { inset: 0 0 0 46%; opacity: .70; }
  .ttcs-main-hero-wrap .ttcs-main-hero { min-height: 480px; }
}
@media (max-width: 549px) {
  .ttcs-main-hero-wrap .ttcs-main-hero { min-height: 445px; }
  .ttcs-main-hero-wrap .ttcs-main-hero::after {
    background: linear-gradient(90deg,rgba(18,41,69,.95),rgba(18,41,69,.70));
  }
  .ttcs-main-hero-inner { max-width: 100%; }
  .ttcs-main-hero-title { font-size: clamp(32px,8.5vw,43px); margin-bottom: 16px; }
  .ttcs-main-hero-description { font-size: 14px; margin-bottom: 20px; }
  .ttcs-main-hero-cta { font-size: 12px; padding: 11px 19px; }
  .ttcs-detail__hero { min-height: 490px; }
  .ttcs-detail__image-wrap { inset: 0 0 45% 0; opacity: .56; }
  .ttcs-detail__hero::after { inset: auto 0 40% 0; height: 25%; width: 100%; }
  .ttcs-detail__hero-inner { padding: 205px 21px 34px; }
  .ttcs-detail__hero h1 { max-width: 100%; font-size: clamp(38px,10.2vw,50px) !important; margin: 0 0 14px; }
  .ttcs-detail__hero-desc { font-size: 15px; margin-bottom: 18px; }
  .ttcs-detail__hero-button { font-size: 13px; min-height: 42px; }
  .ttcs-detail__label { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.ttcs-main-hero-wrap) { scroll-behavior: auto; }
  .ttcs-main-hero-cta { transition: none; }
  .ttcs-main-hero-cta:hover, .ttcs-main-hero-cta:focus-visible { transform: none; }
}