/* Astra v0.8.1: shared hero, media and responsive refinement. */
:root { --gtl-safe-gutter: clamp(16px, 3vw, 32px); }
.gtl-container { padding-inline: var(--gtl-safe-gutter); } html { scroll-padding-top: 92px; }
.gtl-header { position: sticky; top: 0; z-index: 100; transition: background-color .2s ease, box-shadow .2s ease; }.gtl-header.is-scrolled { background: rgb(255 255 255 / 94%); box-shadow: 0 2px 12px rgb(17 17 17 / 8%); } @supports (backdrop-filter: blur(6px)) { .gtl-header.is-scrolled { backdrop-filter: blur(6px); } }
.gtl-card__media, .gtl-card__media img, .gtl-material-library figure, .gtl-material-library figure img { background: #D9D9D9; }.gtl-card__media img, .gtl-material-library figure img { display: block; width: 100%; height: 100%; object-fit: cover; }.gtl-customer-logo-strip__list { column-gap: clamp(12px, 1.5vw, 22px); }.gtl-data-workflow { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); }.gtl-data-workflow li { min-width: 0; font-size: .875rem; }
.gtl-contact-routes, .gtl-contact-includes { padding-block: clamp(48px, 7vw, 88px); }.gtl-contact-routes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }.gtl-contact-routes__grid article { display: grid; align-content: start; gap: 16px; padding: 28px; border-top: 4px solid #E2001A; background: #FFFFFF; box-shadow: 0 10px 26px rgb(17 17 17 / 8%); }.gtl-contact-includes { background: #111111; color: #FFFFFF; }.gtl-contact-includes ul { columns: 2; gap: 28px; padding-left: 1.25rem; }.gtl-contact-includes li { margin-bottom: .7rem; }
@media (max-width: 800px) { .gtl-contact-routes__grid { grid-template-columns: 1fr; }.gtl-data-workflow { grid-template-columns: repeat(3, minmax(0, 1fr)); }.gtl-contact-includes ul { columns: 1; } } @media (max-width: 520px) { .gtl-header__inner { min-height: 70px; }.gtl-data-workflow { grid-template-columns: 1fr; }.gtl-hero__sequence-controls { padding-inline: 5px; }.gtl-hero__dots { gap: 0; } } @media (prefers-reduced-motion: reduce) { .gtl-hero__timer { display: none; }.gtl-header, .gtl-hero__view { transition: none; } }
@media (max-width: 520px) { .gtl-site [data-gtl-hero-sequence] .gtl-hero__sequence-controls { width: min(100% - 24px, 320px); flex-wrap: wrap; row-gap: 2px; }.gtl-site [data-gtl-hero-sequence] .gtl-hero__dots { max-width: calc(100% - 52px); flex-wrap: wrap; }.gtl-site [data-gtl-hero-sequence] .gtl-hero__timer { flex: 0 0 44px; } }

/* One transparent control family for all heroes and customer carousels. */
.gtl-site :is(.gtl-hero__sequence-controls, .gtl-carousel-controls) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: max-content;
  max-width: 100%;
  gap: 4px;
  margin: 24px auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #FFFFFF;
  box-shadow: none;
}
/* Hero controls sit low over the image, clear of the copy and CTAs. */
.gtl-site [data-gtl-hero-sequence] .gtl-hero__content { position: static; }
.gtl-site [data-gtl-hero-sequence] .gtl-hero__sequence-controls {
  position: absolute;
  z-index: 2;
  bottom: clamp(28px, 3vw, 56px);
  left: 50%;
  margin: 0;
  padding: 0;
  background: transparent;
  transform: translateX(-50%);
}
.gtl-site [data-gtl-hero-sequence] .gtl-hero__sequence-controls button:hover { background: transparent; }
.gtl-site .gtl-carousel-controls { color: #111111; }
.gtl-site .gtl-carousel-controls :is(.gtl-playback, .gtl-testimonial-carousel__arrow) { color: #111111; }
.gtl-site .gtl-carousel-controls :is(.gtl-hero__timer-track) { stroke: rgb(17 17 17 / 32%); }
.gtl-site :is(.gtl-hero__dots, .gtl-testimonial-carousel__pagination) {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.gtl-site :is(.gtl-hero__sequence-controls, .gtl-carousel-controls) button {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #FFFFFF;
  font: inherit;
  cursor: pointer;
  box-shadow: none;
  appearance: none;
}
.gtl-site :is(.gtl-hero__sequence-controls, .gtl-carousel-controls) button:hover {
  background: rgb(255 255 255 / 12%);
}
.gtl-site :is(.gtl-hero__sequence-controls, .gtl-carousel-controls) button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #FFFFFF;
}
.gtl-site .gtl-carousel-controls button:hover { background: rgb(17 17 17 / 8%); }
.gtl-site .gtl-carousel-controls button:focus-visible { box-shadow: inset 0 0 0 2px #111111; }
.gtl-site :is(.gtl-hero__sequence-controls, .gtl-carousel-controls) :is([data-gtl-hero-select], .gtl-carousel-dot) > span[aria-hidden] {
  display: block;
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #D9D9D9;
  box-shadow: none;
}
.gtl-site :is(.gtl-hero__sequence-controls, .gtl-carousel-controls) :is([data-gtl-hero-select], .gtl-carousel-dot):is([aria-pressed="true"], [aria-current="true"], :hover, :focus-visible) > span[aria-hidden] {
  background: #E2001A;
  box-shadow: none;
}
.gtl-site :is(.gtl-hero__timer, .gtl-playback) svg {
  position: absolute;
  inset: 0;
  width: 44px;
  height: 44px;
  transform: rotate(-90deg);
  pointer-events: none;
}
.gtl-site :is(.gtl-hero__timer, .gtl-playback) circle { fill: none; stroke-width: 2; }
.gtl-hero__timer-track { stroke: rgb(255 255 255 / 32%); }
.gtl-hero__timer-progress { stroke: #E2001A; stroke-linecap: round; stroke-dasharray: 119.38; stroke-dashoffset: 119.38; }
.gtl-site :is(.gtl-hero__timer-icon, .gtl-playback__icon) {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gtl-site :is(.gtl-hero__timer-icon, .gtl-playback__icon)::before,
.gtl-site :is(.gtl-hero__timer-icon, .gtl-playback__icon)::after {
  content: '';
  position: absolute;
  top: 16px;
  width: 3px;
  height: 12px;
  background: currentcolor;
}
.gtl-site :is(.gtl-hero__timer-icon, .gtl-playback__icon)::before { left: 17px; }
.gtl-site :is(.gtl-hero__timer-icon, .gtl-playback__icon)::after { right: 17px; }
.gtl-site :is(.gtl-hero__timer.is-paused, .gtl-playback[aria-pressed="true"]) > span::before {
  top: 15px;
  left: 19px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid currentcolor;
  background: transparent;
}
.gtl-site :is(.gtl-hero__timer.is-paused, .gtl-playback[aria-pressed="true"]) > span::after { display: none; }
.gtl-testimonial-carousel__arrow span { display: block; font-size: 0; }
.gtl-testimonial-carousel__arrow span::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-top: 2px solid currentcolor;
  border-right: 2px solid currentcolor;
  transform: translateX(-2px) rotate(45deg);
}
.gtl-testimonial-carousel__arrow[data-gtl-testimonial-previous] span::before { transform: translateX(2px) rotate(-135deg); }
.gtl-site :is(.gtl-carousel-controls, .gtl-hero__sequence-controls) [hidden] { display: none; }

/* Align repeated page components with the established card and section rhythm. */
.gtl-contact-routes, .gtl-contact-includes { padding-block: var(--gtl-section-space); }
.gtl-legal-page > .gtl-content-page__section:has(> .gtl-legal-page__body):not(:has(> .gtl-legal-page__body > *)) { display: none; }
.gtl-contact-routes__grid, .gtl-material-library, .gtl-news-grid, .gtl-equipment__grid, .gtl-about-principles { gap: var(--gtl-space-3); }
.gtl-contact-routes__grid article, .gtl-equipment__body { padding: var(--gtl-space-3); }
.gtl-contact-routes__grid article { grid-template-rows: auto 1fr auto; }
.gtl-site .gtl-material-photo { aspect-ratio: auto; }
.gtl-site .gtl-material-photo img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.gtl-site .gtl-card__link { display: inline-flex; align-items: center; min-height: 44px; }
body.gtl-site .gtl-cta-section .gtl-card__link { color: #FFFFFF; }
body.gtl-site .gtl-cta-section .gtl-card__link:is(:hover, :focus-visible) { color: #FFFFFF; text-decoration-color: #FFFFFF; }
.gtl-site .gtl-process-diagram__replay {
  min-height: 44px;
  margin: 16px 8px 0 0;
  padding: 10px 18px;
  border: 2px solid #111111;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 700;
}
.gtl-site .gtl-process-diagram__replay:is(:hover, :focus-visible) { border-color: #E2001A; }
.gtl-site .gtl-legal-page__body h1 { font-size: clamp(2.25rem, 4vw, 3.35rem); line-height: 1.1; margin: 0 0 24px; }
.gtl-site .gtl-legal-page__body h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; margin: 32px 0 16px; }

/* Keep the same visible header for both customers and signed-in reviewers. */
body.admin-bar .gtl-header { top: 32px; }
@media (min-width: 601px) and (max-width: 782px) { body.admin-bar .gtl-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .gtl-header { top: 0; } }
@media (max-width: 520px) {
  .gtl-site .gtl-carousel-controls { display: grid; grid-template-columns: 44px 1fr 44px; gap: 0; }
  .gtl-testimonial-carousel__pagination { grid-column: 1 / -1; grid-row: 1; }
  .gtl-testimonial-carousel__arrow[data-gtl-testimonial-previous] { grid-column: 1; grid-row: 2; }
  .gtl-testimonial-carousel__arrow[data-gtl-testimonial-next] { grid-column: 3; grid-row: 2; }
  .gtl-testimonial-carousel__toggle { grid-column: 2; grid-row: 2; justify-self: center; }
}
@media (max-width: 900px) {
  .gtl-site .gtl-header .gtl-menu { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .gtl-submenu-toggle__state { font-size: 0; }
  .gtl-submenu-toggle::before {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 2px solid currentcolor;
    border-right: 2px solid currentcolor;
    transform: translateY(-2px) rotate(135deg);
  }
  .gtl-submenu-toggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gtl-site :is(.gtl-hero__timer, .gtl-playback) { display: none; }
}
/* Long Material hero playlists need their own row below the mobile CTAs. */
@media (max-width: 520px) {
  .gtl-site .gtl-hero--many-scenes .gtl-hero__sequence-controls {
    position: static;
    left: auto;
    bottom: auto;
    width: min(100%, 320px);
    margin: 20px auto 8px;
    transform: none;
  }
}