/* Shared visual rhythm for every public page.
   This file loads last so the mirrored Elementor pages and the Django detail
   pages use the same type and closing-CTA scales without rewriting either. */
:root {
  --gg-type-display: clamp(52px, 5.5vw, 88px);
  --gg-type-section: clamp(44px, 4.3vw, 69px);
  --gg-type-card: clamp(20px, 1.7vw, 27px);
  --gg-type-body: clamp(16px, 1.1vw, 19px);
  --gg-type-label: clamp(14px, 1.15vw, 17px);
  --gg-line-body: 1.6;
  --gg-page-gutter: clamp(22px, 5vw, 84px);
  --gg-section-space: clamp(72px, 7vw, 110px);
  --gg-cta-space: clamp(84px, 10vw, 155px);
  --gg-heading-gap: clamp(28px, 3vw, 40px);
  --gg-content-width: 1640px;
}

/* Page titles */
.videoWrap .title .elementor-heading-title,
.inrvideoWrap .title .elementor-heading-title,
.bannerWrap .title .elementor-heading-title,
.privacyWrap .title .elementor-heading-title,
.detail-hero h1 {
  font-size: var(--gg-type-display) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.015em !important;
}

/* 19.7 feedback: solution heroes drop the display tier. Without a photo behind
   it, the hero title read as oversized next to the section heading directly
   below, so it sits on the section tier instead and the two now match. */
.detail-page--solution .detail-hero h1 {
  font-size: var(--gg-type-section) !important;
}

/* Major section titles */
.scnTitle .elementor-heading-title,
.completeWrap .completeWrap__title,
.app-gallery-section .app-gallery-head h2,
.detail-section h2,
.detail-cta h2,
.gg-closing-cta h2 {
  font-family: 'HelveticaW01', Helvetica, Arial, sans-serif !important;
  font-size: var(--gg-type-section) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}

/* Eyebrows and section labels */
.bannerWrap .globalTitle .elementor-heading-title,
.subTitle .elementor-heading-title,
.subTitle.elementor-widget-text-editor p,
.detail-hero__eyebrow {
  font-size: var(--gg-type-label) !important;
  line-height: 1.35 !important;
}

/* Repeated card headings */
.environmentContent .subTitle .elementor-heading-title,
.enquiryWrap .nameTitle .elementor-heading-title,
.enquiryWrap .typeTitle .elementor-heading-title,
.mapWrap .mailBox .elementor-image-box-title,
.aboutWrap .nameTitle .elementor-heading-title,
.iconWrap .elementor-cta__title,
.detail-media-card__overlay h3,
.detail-challenge h3,
.detail-capability h3 {
  font-size: var(--gg-type-card) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
}

/* Standard reading copy. Hero lead text and numeric display copy retain their
   larger role-specific scales. */
.elementor-kit-6,
.containerWrap .elementor-widget-text-editor:not(.subTitle) p,
.containerWrap .elementor-widget-text-editor:not(.subTitle) li,
.environmentWrap .textContent p,
.enquiryWrap .box .elementor-widget-text-editor p,
.enquiryWrap .smallText p,
.privacyWrap .elementor-widget-text-editor p,
.privacyWrap .elementor-widget-text-editor li,
.detail-overview__copy p,
.detail-system__copy > p,
.detail-capability p {
  font-size: var(--gg-type-body) !important;
  line-height: var(--gg-line-body) !important;
}

/* Lead copy is the only paragraph tier above standard body copy. */
.inrvideoWrap .elementor-widget-text-editor p,
.smartBnr .elementor-widget-text-editor p,
.detail-hero__strapline {
  font-size: clamp(18px, 1.65vw, 26px) !important;
  line-height: 1.45 !important;
}

/* Replace the captured theme's blanket 30px paragraph padding with one
   predictable reading rhythm. */
.containerWrap .elementor-widget-text-editor p {
  margin: 0 !important;
  padding-bottom: 0 !important;
}

.containerWrap .elementor-widget-text-editor p + p {
  margin-top: 20px !important;
}

.containerWrap .elementor-widget-text-editor li + li {
  margin-top: 8px !important;
}

/* Consistent separation between a section title and the content it leads. */
.detail-section__heading,
.scnTitle,
.enquiryWrap .topContent,
.environmentWrap:not(.environmentContent) .scnTitle {
  margin-bottom: var(--gg-heading-gap) !important;
}

/* One closing-contact component shared by mirrored and Django pages. */
.completeWrap,
.detail-cta,
.aboutWrap .bottomContent.gg-closing-cta,
.gg-closing-cta {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding-block: var(--gg-cta-space) !important;
  color: #fff !important;
  background: #0a0a0a !important;
}

.completeWrap > .e-con-inner,
.detail-cta__inner,
.gg-closing-cta__inner {
  /* Mirrored pages have no global border-box reset, so without this the
     gutters push the inner block past the viewport and clip the heading. */
  box-sizing: border-box !important;
  width: min(100%, var(--gg-content-width)) !important;
  max-width: var(--gg-content-width) !important;
  margin-inline: auto !important;
  padding-inline: var(--gg-page-gutter) !important;
}

/* The about page's closing block sits inside Elementor's boxed container;
   pull it full-bleed so the dark band reaches the viewport edges like every
   other closing CTA. */
.aboutWrap .bottomContent.gg-closing-cta {
  width: 100vw !important;
  max-width: 100vw !important;
  /* Keep the team roles from visually running into the closing CTA. */
  margin-top: clamp(48px, 5vw, 96px) !important;
  margin-inline: calc(50% - 50vw) !important;
  padding-inline: var(--gg-page-gutter) !important;
}

.completeWrap__link,
.detail-cta a,
.aboutWrap .bottomContent.gg-closing-cta .elementor-button,
.gg-closing-cta__link {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  min-width: 0 !important;
  margin-top: 38px !important;
  padding: 18px 0 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: 'Gordita', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
}

.completeWrap__link:hover,
.detail-cta a:hover,
.aboutWrap .bottomContent.gg-closing-cta .elementor-button:hover,
.gg-closing-cta__link:hover {
  color: #72aa4a !important;
}

.gg-closing-cta__link span {
  margin-left: 10px;
}

@media (max-width: 767px) {
  :root {
    --gg-type-display: clamp(36px, 9.4vw, 48px);
    --gg-type-section: clamp(38px, 10vw, 42px);
    --gg-type-card: clamp(20px, 6vw, 24px);
    --gg-page-gutter: 22px;
    --gg-section-space: 76px;
    --gg-cta-space: 84px;
  }

  .videoWrap .title .elementor-heading-title,
  .inrvideoWrap .title .elementor-heading-title,
  .bannerWrap .title .elementor-heading-title,
  .privacyWrap .title .elementor-heading-title,
  .detail-hero h1 {
    line-height: 1.05 !important;
  }
}

/* Closing heading word reveal — one behaviour for every closing CTA.
   The host class is added by cta-reveal.js (or detail-pages.js on detail
   pages), so headings stay fully visible when JavaScript never runs. */

/* Mirrored pages load the Elementor kit, whose `.elementor-kit-6 h2` paints
   headings black and beats the section's inherited white — keep every closing
   heading explicitly white. */
.completeWrap .completeWrap__title,
.detail-cta h2,
.gg-closing-cta h2 {
  color: #fff !important;
}

/* inline-block needs !important: the theme's `.scnTitle .elementor-heading-title
   span {display:block}` otherwise stacks the words one per line (about page). */
.cta-reveal-host .cta-word {
  display: inline-block !important;
  opacity: 0;
  transform: translateY(.55em);
  /* !important out-ranks the mirrored theme's global
     "* { transition: none !important }" kill-switch, which otherwise makes
     the reveal snap instead of fade. */
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1) !important;
  transition-delay: calc(var(--w) * 55ms) !important;
}

.cta-reveal-host.is-visible .cta-word {
  opacity: 1;
  transform: none;
}