/* G21 Group brand — navy #000120, page background #FFE1C5 */
:root {
  --bz-color-heading-primary: #000120;
  --bz-color-theme-primary: #000120;
  --bz-color-theme-secondary: #000120;
  --bz-color-bg-1: #000120;
  --bz-color-page-bg: #FFE1C5;
  --bs-body-bg: #FFE1C5;
  /* Body copy: the theme grey #74787C was only 3.6:1 on the peach background */
  --bz-color-text-body: #4A4D63;
  /* Typography — matches g21realestate.com */
  --g21-font-heading: "Orbitron", sans-serif;
  --g21-font-body: "Manrope", sans-serif;
}

/* ── Global Typography — same as g21realestate.com ── */
body,
p,
span,
a,
li,
td,
th,
label,
input,
textarea,
select,
button {
  font-family: var(--g21-font-body);
}

h1, h2, h3, h4, h5, h6,
.section-title,
.sub-heading,
.widget-title,
.footer-widget .widget-header .widget-title,
.details-title,
.g21-platform-card h3,
.g21-list-box h3,
.g21-list-box h4,
.g21-job-card h3 {
  font-family: var(--g21-font-heading);
}

html,
body {
  background-color: #FFE1C5;
}

.header,
.hero-section,
.about-section,
.about-section-2,
.service-section,
.service-section-4,
.content-section,
.g21-industries-section,
.g21-clients-section,
.sponsor-section,
.contact-section,
.service-details,
.bg-grey {
  background-color: #FFE1C5;
}

.service-section {
  background-image: none !important;
}

.hero-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 136px);
  min-height: calc(100svh - 136px);
}

.hero-section .hero-mask-img {
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
  max-width: none;
  width: 100%;
  height: 100%;
  inset: 0;
  top: 0;
  right: 0;
  z-index: 0;
  display: block;
}

.hero-section .hero-mask-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  transform: scale(1.12);
  transform-origin: center;
}

.hero-section .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #FFE1C5 0%,
    rgba(255, 225, 197, 0.95) 16%,
    rgba(255, 225, 197, 0.8) 30%,
    rgba(255, 225, 197, 0.55) 46%,
    rgba(255, 225, 197, 0.1) 62%,
    transparent 82%
  );
}

.hero-section .container {
  position: relative;
  z-index: 3;
}

.hero-section .shapes {
  z-index: 2;
}

/* Theme leftovers: the Bizan "B" cube and the zigzag compete with the copy */
.hero-section .shapes .round-shape,
.hero-section .shapes .shape-1,
.hero-section .shapes .shape-3,
.hero-section .shapes .shape-4 {
  display: none;
}

.hero-section .shapes .shape-2 {
  opacity: 0.4;
}

/* Hero type scales with viewport height too, so the CTAs stay above the
   fold on short laptop screens (e.g. 1366×657, 1536×639 at 125%) */
.hero-section .hero-content {
  max-width: 640px;
  padding: clamp(12px, 3vh, 56px) 0;
}

.hero-section .hero-content .section-heading {
  margin-bottom: 0;
  text-align: justify;
  text-justify: inter-word;
}

.hero-section .hero-content .section-heading .sub-heading,
.hero-section .hero-content .section-heading .section-title {
  color: #000120;
}

.hero-section .hero-content .section-heading .section-title {
  font-size: clamp(32px, min(3.5vw, 6.6vh), 60px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: clamp(6px, 1.2vh, 12px);
  margin-bottom: clamp(14px, 2.6vh, 22px);
  text-shadow: 0 2px 18px rgba(255, 225, 197, 0.65);
}

.hero-section .hero-content .section-heading p {
  color: #000120;
  font-weight: 500;
  font-size: clamp(15px, 2.4vh, 17px);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 0;
}

.hero-section .g21-hero-journey {
  margin-top: clamp(16px, 3vh, 26px);
}

/* Hero CTAs: compact, with a clear primary / secondary pair */
.hero-content .hero-btn-wrap {
  gap: 12px;
  margin-top: clamp(20px, 3.6vh, 34px);
}

.hero-content .hero-btn-wrap .bz-primary-btn {
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  font-size: 13px;
  letter-spacing: 0.08em;
  border-radius: 6px;
  box-shadow: 0 10px 22px -12px rgba(0, 1, 32, 0.6);
}

.hero-content .hero-btn-wrap .bz-primary-btn i {
  margin-left: 0;
  font-size: 12px;
}

.hero-content .hero-btn-wrap .hero-btn {
  background-color: rgba(255, 255, 255, 0.55);
  color: #000120;
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hero-content .hero-btn-wrap .hero-btn:before {
  background-color: #000120;
}

.hero-content .hero-btn-wrap .bz-primary-btn:hover,
.hero-content .hero-btn-wrap .bz-primary-btn:focus-visible {
  box-shadow: 0 12px 24px -10px rgba(0, 1, 32, 0.5);
}

.hero-content .hero-btn-wrap .hero-btn:hover,
.hero-content .hero-btn-wrap .hero-btn:focus-visible {
  color: #FFE1C5;
}

@media only screen and (max-width: 992px) {
  .hero-section {
    min-height: calc(100vh - 168px);
    min-height: calc(100svh - 168px);
  }
}

@media only screen and (max-width: 767px) {
  .hero-section {
    min-height: calc(100vh - 136px);
    min-height: calc(100svh - 136px);
  }

  .hero-section .hero-mask-img {
    display: block;
    position: absolute;
    max-width: none;
    height: 100%;
  }

  .hero-section .hero-overlay {
    background: linear-gradient(
      180deg,
      #FFE1C5 0%,
      rgba(255, 225, 197, 0.94) 34%,
      rgba(255, 225, 197, 0.7) 58%,
      rgba(255, 225, 197, 0.25) 84%,
      rgba(255, 225, 197, 0.1) 100%
    );
  }

  .hero-section .hero-content {
    padding: 28px 0 36px;
  }

  .hero-section .hero-content .section-heading .section-title {
    font-size: 30px;
  }

  .hero-section .hero-content .section-heading p {
    max-width: 100%;
  }
}

.header .middle-header .middle-header-inner .header-logo {
  padding: 6px 72px 6px 0;
  display: flex;
  align-items: center;
}

.header .middle-header .middle-header-inner .header-logo img {
  max-height: 90px;
  width: auto;
  max-width: 180px;
}

.header .middle-header .middle-header-inner .header-logo .shape {
  background-color: #000120;
}

.header .primary-header-inner .header-logo img {
  max-width: 120px;
  max-height: 120px;
  width: auto;
}

@media (max-width: 767px) {
  .header .primary-header-inner .header-logo img {
    max-width: 88px;
    max-height: 88px;
  }
}

.header .primary-header-inner {
  flex-wrap: nowrap;
}

/* Sticky header on scroll (main.js adds .fixed past 110px) */
.header .primary-header.fixed {
  background-color: #FFE1C5;
}

.header .primary-header-inner .header-logo {
  flex-shrink: 0;
}

.header .primary-header-inner .header-menu-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.header .primary-header-inner .header-menu-wrap .mobile-menu-items {
  flex: 1 1 auto;
  min-width: 0;
}

.header .primary-header-inner .header-menu-wrap ul {
  width: 100%;
  text-align: center;
}

.header .primary-header-inner .header-right-wrap {
  flex-shrink: 0;
}

/* Logo and hamburger sit on the container edge, in line with page content.
   Tablet/phone padding lives in the responsive layer. */
.header .primary-header-inner {
  padding: 8px 0;
}

/* Top-level items: even flex gap instead of margins + inline-block whitespace */
.header .primary-header-inner .header-menu-wrap .mobile-menu-items > ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 28px;
}

.header .primary-header-inner .header-menu-wrap .mobile-menu-items > ul > li {
  margin: 0;
}

/* Room for the 18px "■/" marker plus a 10px gap before the label */
.header .primary-header-inner .header-menu-wrap ul > li > a {
  padding-left: 28px;
}

.header .primary-header-inner .header-menu-wrap ul > li > a .left-shape {
  background-color: var(--bz-color-theme-primary);
  content: "";
  height: 11px;
  width: 12px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) skew(-15deg);
}

.header .primary-header-inner .header-menu-wrap ul > li > a .left-shape:after {
  background-color: var(--bz-color-theme-primary);
  content: "";
  height: 100%;
  width: 3px;
  position: absolute;
  top: 0;
  right: -6px;
}

.header .primary-header-inner .header-menu-wrap ul li ul {
  /* Grow to fit the longest platform name instead of clipping it */
  width: max-content;
  min-width: 270px;
  top: 100%;
  margin-top: 22px;
  padding: 10px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(20, 18, 40, 0.06);
  box-shadow: 0 30px 60px -16px rgba(13, 16, 40, 0.3), 0 10px 24px -8px rgba(13, 16, 40, 0.14);
}

.header .primary-header-inner .header-menu-wrap ul li ul:before {
  content: "";
  position: absolute;
  top: -6px;
  left: 28px;
  width: 12px;
  height: 12px;
  background-color: var(--bz-color-common-white);
  border-left: 1px solid rgba(20, 18, 40, 0.06);
  border-top: 1px solid rgba(20, 18, 40, 0.06);
  transform: rotate(45deg);
}

.header .primary-header-inner .header-menu-wrap ul li li {
  padding: 0 10px;
}

.header .primary-header-inner .header-menu-wrap ul li li a {
  padding: 14px 16px;
  border-radius: 8px;
  overflow: hidden;
}

.header .primary-header-inner .header-menu-wrap ul li li:not(:last-of-type) {
  border-bottom: none;
}

.header .primary-header-inner .header-menu-wrap ul > li > a:after {
  content: "";
  position: absolute;
  left: 28px;
  right: 0;
  bottom: 21px;
  height: 2px;
  background-color: var(--bz-color-theme-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}

.header .primary-header-inner .header-menu-wrap ul > li > a:hover:after,
.header .primary-header-inner .header-menu-wrap ul > li.active > a:after {
  transform: scaleX(1);
}

/* Underline is for top-level items only; dropdown links use the fill hover */
.header .primary-header-inner .header-menu-wrap ul li li > a:after {
  content: none;
}

.header .primary-header-inner .header-menu-wrap ul li.active ul li.active a {
  color: var(--bz-color-common-white);
}

.header .primary-header-inner .header-menu-wrap ul li li.active a:before {
  width: 100%;
}

.side-menu-logo {
  max-width: 140px;
}

.side-menu-logo img {
  max-width: 100%;
  height: auto;
}

.footer-section {
  background-color: #000120;
}

/* Footer "Shaping The Future." heading — tighter vertical spacing on desktop */
@media (min-width: 993px) {
  .footer-section.pt-120 {
    padding-top: 80px;
  }

  .footer-top {
    padding-bottom: 60px;
  }
}

.footer-top .section-heading .section-title {
  margin-bottom: 24px;
}

.footer-widget .widget-header .footer-logo {
  max-width: 148px;
  background-color: #FFE1C5;
  border-radius: 20px;
  padding: 12px 14px 10px;
  display: inline-block;
}

.footer-widget .widget-header .footer-logo a {
  display: block;
}

.footer-widget .widget-header .footer-logo img {
  max-width: 100%;
  height: auto;
  display: block;
}

.footer-widget .widget-header .footer-logo:before {
  display: none;
}

.footer-widget .widget-header .widget-title:before {
  background: linear-gradient(90deg, #404162 0%, #000120 100%);
}

.header .top-bar a {
  color: inherit;
  text-decoration: underline;
}

.header .primary-header-inner .header-menu-wrap ul li a {
  font-size: 15px;
  white-space: nowrap;
  padding-top: 28px;
  padding-bottom: 28px;
}

.page-header {
  background: #000120;
}

.page-header .bg-img {
  background-image: url("../images/bg-img-1.webp");
  background-position: center;
  background-size: cover;
}

/* Compact inner-page banner (heading + breadcrumb); home hero is unchanged */
.page-header-content {
  padding: 48px 0;
}

@media only screen and (max-width: 992px) {
  .page-header-content {
    padding: 36px 0;
  }
}

@media only screen and (max-width: 767px) {
  .page-header-content {
    padding: 28px 0;
  }
}

.page-header-content .title {
  font-size: 36px;
  line-height: 1.2;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}

@media only screen and (max-width: 992px) {
  .page-header-content .title {
    font-size: 32px;
  }
}

@media only screen and (max-width: 767px) {
  .page-header-content .title {
    font-size: 20px;
    text-align: center;
    display: block;
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    align-self: stretch;
    box-sizing: border-box;
    padding: 0 8px;
    white-space: normal;
    overflow-wrap: break-word;
  }
}

.page-header-content .sub-title {
  padding: 10px 22px;
  flex-shrink: 0;
}

.g21-platform-card,
.g21-list-box,
.g21-job-card {
  background: #fff;
  border: 1px solid rgba(0, 1, 32, 0.08);
  border-radius: 16px;
  padding: 32px 28px;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0, 1, 32, 0.05);
}

.g21-platform-card__tag {
  display: inline-block;
  font-weight: 700;
  color: #000120;
  margin-bottom: 12px;
  letter-spacing: 0.08em;
}

.g21-platform-card h3,
.g21-list-box h3,
.g21-list-box h4,
.g21-job-card h3 {
  color: #000120;
  margin-bottom: 12px;
}

.g21-platform-card h3 a,
.g21-list-box a {
  color: #000120;
}

.g21-platform-card h3 a {
  font-family: inherit;
}

.g21-platform-card > p:not(.g21-platform-card__keywords) {
  text-align: left;
  hyphens: manual;
}

.g21-platform-card ul,
.g21-list-box ul {
  padding-left: 18px;
  margin: 0 0 24px;
}

.g21-platform-card ul li,
.g21-list-box ul li {
  margin-bottom: 6px;
}

.g21-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.g21-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.g21-check-list i {
  color: #000120;
  margin-top: 4px;
}

.g21-job-card__meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.g21-job-card__meta span {
  font-size: 13px;
  font-weight: 600;
  color: #000120;
  background: #f3f4f8;
  border-radius: 999px;
  padding: 4px 12px;
}

.g21-sidebar-cta {
  background: #000120;
  border-radius: 16px;
  padding: 36px 24px;
}

.g21-sidebar-cta .number,
.g21-sidebar-cta span {
  color: #fff;
  display: block;
}

.g21-sidebar-cta .number {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}

.g21-sidebar-cta span {
  margin-bottom: 8px;
}

.g21-sidebar-cta .bz-primary-btn {
  margin-top: 18px;
}

.g21-clients-section {
  background: #FFE1C5;
  scroll-margin-top: 160px;
}

.g21-client-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 48px 0 0;
  align-items: stretch;
}

.g21-client-logo {
  min-height: 160px;
}

.g21-client-logo__inner {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 160px;
  background: #fff;
  border: 1px solid rgba(0, 1, 32, 0.08);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 28px;
  box-shadow: 0 8px 20px rgba(0, 1, 32, 0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.g21-client-logo__inner img {
  width: 100%;
  max-width: 200px;
  height: 84px;
  object-fit: contain;
  filter: none;
  -webkit-filter: none;
  opacity: 1;
  transition: transform 0.4s ease;
}

.g21-client-logo__inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-22deg);
  pointer-events: none;
}

.g21-client-logo:hover .g21-client-logo__inner,
.g21-client-logo:focus-within .g21-client-logo__inner {
  transform: translateY(-8px);
  border-color: rgba(0, 1, 32, 0.16);
  box-shadow: 0 16px 36px rgba(0, 1, 32, 0.12);
}

.g21-client-logo:hover .g21-client-logo__inner img,
.g21-client-logo:focus-within .g21-client-logo__inner img {
  transform: scale(1.08);
}

.g21-client-logo:hover .g21-client-logo__inner::after,
.g21-client-logo:focus-within .g21-client-logo__inner::after {
  animation: g21-logo-shine 0.75s ease forwards;
}

@keyframes g21-logo-shine {
  to {
    left: 140%;
  }
}

@media (max-width: 991px) {
  .g21-client-logos {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 36px 0 0;
  }

  .g21-client-logo,
  .g21-client-logo__inner {
    min-height: 136px;
  }

  .g21-client-logo__inner {
    padding: 24px 20px;
  }

  .g21-client-logo__inner img {
    height: 72px;
  }
}

@media (max-width: 575px) {
  .g21-client-logos {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .g21-client-logo,
  .g21-client-logo__inner {
    min-height: 118px;
  }

  .g21-client-logo__inner {
    padding: 18px 14px;
    border-radius: 12px;
  }

  .g21-client-logo__inner img {
    height: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .g21-client-logo__inner,
  .g21-client-logo__inner img {
    transition: none;
  }

  .g21-client-logo:hover .g21-client-logo__inner,
  .g21-client-logo:focus-within .g21-client-logo__inner {
    transform: none;
  }

  .g21-client-logo:hover .g21-client-logo__inner img,
  .g21-client-logo:focus-within .g21-client-logo__inner img {
    transform: none;
  }

  .g21-client-logo:hover .g21-client-logo__inner::after,
  .g21-client-logo:focus-within .g21-client-logo__inner::after {
    animation: none;
  }
}

.category-list li.active a {
  color: #000120;
  font-weight: 700;
}

/* Ecosystem sidebar — current page uses the hover colours */
.service-widget .category-list li.active a {
  background-color: var(--bz-color-theme-primary);
  color: var(--bz-color-common-white);
}

.service-details-content .details-title {
  color: #000120;
}

#form-messages {
  margin-bottom: 16px;
}

.g21-service-strip {
  background: linear-gradient(rgba(0, 1, 32, 0.15), rgba(0, 1, 32, 0.15)), url("../images/bg-img-3.png") center top / cover no-repeat;
  background-color: #000120;
  /* Same height as the header; main.js sets the variable from the live header */
  height: var(--g21-header-h, 136px);
  position: relative;
  z-index: 4;
}

#security,
#staffing,
#facility,
#engineering {
  scroll-margin-top: 160px;
}

/* Home about — screenshot layout, G21 theme */
.g21-about-home .about-content {
  padding-left: 0;
  padding-right: 12px;
}

.g21-about-home .section-heading.heading-2 {
  margin-bottom: 28px;
}

.g21-about-home .section-heading .section-title {
  font-size: 36px;
  margin-bottom: 18px;
}

@media (max-width: 767px) {
  .g21-about-home .section-heading .section-title {
    font-size: 28px;
  }
}

.g21-about-home .section-heading p {
  color: #000120;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.75;
  max-width: 520px;
}

.g21-about-home .section-heading p strong {
  font-weight: 700;
}

/* Who We Are — Foundation → Growth → Ambition mini timeline */
.g21-who-story {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
}

.g21-who-story__item {
  position: relative;
  padding: 0 0 20px 32px;
}

.g21-who-story__item:last-child {
  padding-bottom: 0;
}

/* connector line between dots */
.g21-who-story__item::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 18px;
  bottom: -2px;
  width: 2px;
  background: rgba(0, 1, 32, 0.18);
}

.g21-who-story__item:last-child::before {
  display: none;
}

.g21-who-story__item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #000120;
  background: #FFE1C5;
}

.g21-who-story__item:last-child::after {
  background: #000120;
  box-shadow: 0 0 0 4px rgba(0, 1, 32, 0.12);
}

.g21-who-story__label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--g21-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #000120;
}

.g21-who-story__item p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--bz-color-text-body);
}

.g21-about-stats {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.g21-about-stats__item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.g21-about-stats__icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border: 1.5px solid #000120;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000120;
  background: transparent;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.g21-about-stats__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.g21-about-stats__text {
  font-family: var(--bz-ff-heading);
  font-size: 18px;
  font-weight: 600;
  color: #000120;
  line-height: 1.3;
}

.g21-about-stats__item:hover .g21-about-stats__icon {
  background-color: #000120;
  color: #FFE1C5;
  transform: translateY(-2px);
}

.g21-about-home__media {
  position: relative;
  max-width: 520px;
  width: 100%;
  margin-left: auto;
  padding: 0 16px 16px 0;
}

.g21-about-home__shape {
  background-color: rgba(0, 1, 32, 0.1);
  width: 72%;
  height: 78%;
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  z-index: 0;
  pointer-events: none;
}

.g21-about-home__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 22px 48px rgba(0, 1, 32, 0.12);
}

.g21-about-home__img img,
.g21-about-home__img.img-reveal img {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

/* Desktop: compact copy, 3-col stats, image stretched to the text column
   so the whole block fits in one screen */
@media only screen and (min-width: 992px) {
  .g21-about-home.pt-120 {
    padding-top: 90px;
  }

  .g21-about-home.pb-120 {
    padding-bottom: 90px;
  }

  .g21-about-home .section-heading.heading-2 {
    margin-bottom: 22px;
  }

  .g21-about-home .section-heading .section-title {
    font-size: 30px;
    margin-bottom: 14px;
  }

  .g21-about-home .section-heading p {
    font-size: 16px;
    line-height: 1.6;
    max-width: none;
  }

  .g21-who-story {
    margin-bottom: 26px;
  }

  .g21-who-story__item {
    padding-bottom: 14px;
  }

  .g21-who-story__item p {
    font-size: 15px;
    line-height: 1.55;
  }

  .g21-about-stats {
    gap: 16px;
    margin-bottom: 26px;
  }

  .g21-about-stats__item {
    gap: 10px;
  }

  .g21-about-stats__icon {
    width: 44px;
    height: 44px;
  }

  .g21-about-stats__icon svg {
    width: 20px;
    height: 20px;
  }

  .g21-about-stats__text {
    font-size: 15px;
  }

  .g21-about-home .about-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .g21-about-home__media {
    max-width: none;
    height: 100%;
  }

  .g21-about-home__img {
    height: 100%;
  }

  .g21-about-home__img img,
  .g21-about-home__img.img-reveal img {
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
  }
}

@media only screen and (max-width: 1199px) {
  .g21-about-home .section-heading p {
    font-size: 16px;
  }
}

@media only screen and (max-width: 992px) {
  .g21-about-home .about-content {
    padding-right: 0;
    margin-top: 0;
  }

  .g21-about-home__media {
    margin: 28px auto 0;
    max-width: 420px;
  }

  .g21-about-home__shape {
    right: -10px;
    bottom: -10px;
  }
}

@media only screen and (max-width: 767px) {
  .g21-about-home .section-heading p {
    max-width: 100%;
  }

  .g21-about-stats {
    gap: 10px;
    margin-bottom: 28px;
  }

  .g21-about-stats__item {
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    padding: 16px 8px 14px;
    text-align: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(0, 1, 32, 0.1);
  }

  .g21-about-stats__icon {
    width: 44px;
    height: 44px;
  }

  .g21-about-stats__icon svg {
    width: 20px;
    height: 20px;
  }

  .g21-about-stats__text {
    font-size: 14px;
  }

  .g21-about-home__media {
    margin-top: 12px;
  }

  .g21-about-home__img {
    border-radius: 22px;
  }

  .g21-about-home__shape {
    border-radius: 22px;
    right: -8px;
    bottom: -8px;
  }

  .g21-about-home .about-btn-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .g21-about-home .about-btn-wrap .bz-primary-btn,
  .g21-about-home .about-btn-wrap .bz-transparent-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* Home — Our Ecosystem, three platform cards */
.g21-eco-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.g21-eco-grid__item {
  display: flex;
}

.g21-eco-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 32px 30px 28px;
  background: #fff;
  border: 1px solid rgba(0, 1, 32, 0.08);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 1, 32, 0.05);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Navy accent bar that draws in on hover */
.g21-eco-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #000120;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s ease;
}

.g21-eco-card:hover,
.g21-eco-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(0, 1, 32, 0.18);
  box-shadow: 0 22px 44px rgba(0, 1, 32, 0.12);
}

.g21-eco-card:hover::before,
.g21-eco-card:focus-within::before {
  transform: scaleX(1);
}

.g21-eco-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}

.g21-eco-card__logo {
  width: 116px;
  height: 116px;
  flex-shrink: 0;
  padding: 10px;
  background: #FFE1C5;
  border: 1px solid rgba(0, 1, 32, 0.1);
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(0, 1, 32, 0.06);
  transition: transform 0.35s ease;
}

.g21-eco-card:hover .g21-eco-card__logo {
  transform: rotate(-4deg) scale(1.04);
}

.g21-eco-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.g21-eco-card__num {
  font-family: var(--g21-font-heading);
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(0, 1, 32, 0.22);
  transition: color 0.35s ease, -webkit-text-stroke-color 0.35s ease;
}

.g21-eco-card:hover .g21-eco-card__num {
  color: rgba(0, 1, 32, 0.08);
  -webkit-text-stroke-color: rgba(0, 1, 32, 0.45);
}

.g21-eco-card__role {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 1, 32, 0.7);
  margin-bottom: 8px;
}

.g21-eco-card__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
}

.g21-eco-card__title a {
  color: #000120;
  /* The global `a` rule would otherwise swap the heading to the body font */
  font-family: inherit;
}

/* Stretch the title link over the whole card */
.g21-eco-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.g21-eco-card__link:focus-visible {
  outline: none;
}

.g21-eco-card__link:focus-visible::after {
  outline: 3px solid #000120;
  outline-offset: -3px;
  border-radius: 20px;
}

.g21-eco-card__tagline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.g21-eco-card__tagline li {
  font-size: 13px;
  font-weight: 700;
  color: #000120;
}

.g21-eco-card__tagline li + li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 10px;
  vertical-align: middle;
  background: rgba(0, 1, 32, 0.35);
  border-radius: 50%;
}

.g21-eco-card__text {
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 22px;
  text-align: justify;
  hyphens: auto;
}

/* Real Estate Holdings copy: justify leaves wide gaps in this card */
.g21-eco-grid__item:nth-child(2) .g21-eco-card__text {
  text-align: left;
  hyphens: manual;
}

.g21-eco-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.g21-eco-card__tags li {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  padding: 7px 12px;
  color: #000120;
  background: rgba(0, 1, 32, 0.05);
  border: 1px solid rgba(0, 1, 32, 0.08);
  border-radius: 999px;
}

.g21-eco-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 1, 32, 0.1);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000120;
}

.g21-eco-card__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 1, 32, 0.2);
  border-radius: 50%;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.g21-eco-card__cta-icon i {
  transition: transform 0.3s ease;
}

.g21-eco-card:hover .g21-eco-card__cta-icon,
.g21-eco-card:focus-within .g21-eco-card__cta-icon {
  background: #000120;
  border-color: #000120;
  color: #fff;
}

.g21-eco-card:hover .g21-eco-card__cta-icon i {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .g21-eco-card,
  .g21-eco-card::before,
  .g21-eco-card__logo,
  .g21-eco-card__cta-icon i {
    transition: none;
  }

  .g21-eco-card:hover,
  .g21-eco-card:focus-within,
  .g21-eco-card:hover .g21-eco-card__logo,
  .g21-eco-card:hover .g21-eco-card__cta-icon i {
    transform: none;
  }
}

/* Three across: share row tracks so titles, text and tags line up
   across cards even when one title wraps to more lines */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1200px) {
    .g21-eco-grid {
      row-gap: 0;
    }

    .g21-eco-grid__item {
      display: grid;
      grid-row: span 7;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .g21-eco-card {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
}

@media (max-width: 1199px) {
  .g21-eco-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (max-width: 1199px) and (min-width: 768px) {
  .g21-eco-grid > .g21-eco-grid__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 12px);
    justify-self: center;
  }
}

@media (max-width: 767px) {
  .g21-eco-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 575px) {
  .g21-eco-card {
    padding: 26px 20px 22px;
    border-radius: 16px;
  }

  .g21-eco-card__head {
    margin-bottom: 20px;
  }

  .g21-eco-card__logo {
    width: 96px;
    height: 96px;
    border-radius: 14px;
  }

  .g21-eco-card__num {
    font-size: 38px;
  }

  .g21-eco-card__title {
    font-size: 20px;
  }
}

/* Site preloader — G21 logo on brand page background */
#preloader {
  background-color: #FFE1C5;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.preloader-logo-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: g21-loader-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.preloader-logo-wrap img {
  width: 168px;
  height: auto;
  max-width: 100%;
  position: relative;
  z-index: 2;
  animation: g21-loader-pulse 2.2s ease-in-out 0.75s infinite;
}

.preloader-glow {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 1, 32, 0.16) 0%, rgba(0, 1, 32, 0) 70%);
  z-index: 1;
  animation: g21-loader-glow 2.2s ease-in-out 0.75s infinite;
}

.preloader-logo-wrap::before,
.preloader-logo-wrap::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

.preloader-logo-wrap::before {
  inset: 8px;
  border: 2px solid rgba(0, 1, 32, 0.12);
}

.preloader-logo-wrap::after {
  inset: 0;
  border: 3px solid transparent;
  border-top-color: #000120;
  border-right-color: rgba(0, 1, 32, 0.35);
  animation: g21-loader-spin 1.15s linear infinite;
}

.preloader-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.preloader-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #000120;
  animation: g21-loader-dot 1s ease-in-out infinite;
}

.preloader-dots span:nth-child(2) {
  animation-delay: 0.16s;
}

.preloader-dots span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes g21-loader-in {
  from {
    opacity: 0;
    transform: scale(0.72);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes g21-loader-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes g21-loader-glow {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

@keyframes g21-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes g21-loader-dot {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.3;
  }
  40% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

@media only screen and (max-width: 767px) {
  .preloader-logo-wrap {
    width: 150px;
    height: 150px;
  }

  .preloader-logo-wrap img {
    width: 124px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preloader-logo-wrap,
  .preloader-logo-wrap img,
  .preloader-logo-wrap::after,
  .preloader-glow,
  .preloader-dots span {
    animation: none;
  }
}

/* Home — Industries We Serve */
.g21-industries-section {
  background-color: #FFE1C5;
  scroll-margin-top: 160px;
}

.g21-industries-section .section-heading .section-title {
  overflow: visible;
}

.g21-industries-section .section-heading p {
  color: #000120;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.g21-industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 48px 0 0;
}

.g21-industry-card {
  min-width: 0;
}

.g21-industry-card__link {
  display: block;
  position: relative;
  overflow: hidden;
  height: 420px;
  border-radius: 16px;
  text-decoration: none;
  background: #000120;
  box-shadow: 0 10px 30px rgba(0, 1, 32, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.g21-industry-card__media {
  position: absolute;
  inset: 0;
}

.g21-industry-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.02);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.g21-industry-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 1, 32, 0.05) 0%,
    rgba(0, 1, 32, 0.12) 42%,
    rgba(0, 1, 32, 0.72) 78%,
    rgba(0, 1, 32, 0.92) 100%
  );
  transition: background 0.4s ease;
}

.g21-industry-card__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.g21-industry-card__label {
  display: block;
  color: #FFE1C5;
  font-family: var(--g21-font-body);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.g21-industry-card__name::before {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  background: #FFE1C5;
  border-radius: 2px;
  transition: width 0.35s ease;
}

.g21-industry-card:hover .g21-industry-card__link,
.g21-industry-card:focus-within .g21-industry-card__link {
  transform: translateY(-10px);
  box-shadow: 0 22px 44px rgba(0, 1, 32, 0.18);
}

.g21-industry-card:hover .g21-industry-card__media img,
.g21-industry-card:focus-within .g21-industry-card__media img {
  transform: scale(1.1);
}

.g21-industry-card:hover .g21-industry-card__name::before,
.g21-industry-card:focus-within .g21-industry-card__name::before {
  width: 56px;
}

.g21-industry-card__link:focus-visible {
  outline: 2px solid #000120;
  outline-offset: 4px;
}

@media (max-width: 1199px) {
  .g21-industry-card__link {
    height: 360px;
  }

  .g21-industry-card__label {
    font-size: 21px;
  }
}

@media (max-width: 991px) {
  .g21-industries-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 36px 0 0;
  }

  .g21-industry-card__link {
    height: 320px;
  }

  .g21-industry-card__name {
    padding: 22px 20px 20px;
  }
}

@media (max-width: 575px) {
  .g21-industries-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .g21-industry-card__link {
    height: 280px;
    border-radius: 14px;
  }

  .g21-industry-card__label {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .g21-industry-card__link,
  .g21-industry-card__media img,
  .g21-industry-card__name::before {
    transition: none;
  }

  .g21-industry-card:hover .g21-industry-card__link,
  .g21-industry-card:focus-within .g21-industry-card__link {
    transform: none;
  }

  .g21-industry-card:hover .g21-industry-card__media img,
  .g21-industry-card:focus-within .g21-industry-card__media img {
    transform: scale(1.02);
  }
}

/* How we think — photographic background */
.content-section .content-wrap {
  background-image: url("../images/bg-img-2.png");
  background-position: left center;
}

/* Home counter — replace template bg with team photo */
.counter-section.g21-counter-home {
  background-image: url("../images/bg-img-1.webp");
  background-position: center;
  background-size: cover;
}

/* Values list styling */
.g21-values-list {
  padding-left: 0;
  margin-bottom: 25px;
  list-style: none;
}

.g21-values-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.6;
}

.g21-values-list li:last-child {
  margin-bottom: 0;
}

.g21-values-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--bz-color-theme-primary);
}

.g21-values-list li strong {
  color: var(--bz-color-heading-primary);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 14px;
}

/* ── Ecosystem platform pages ── */
html {
  scroll-padding-top: 140px;
}

.g21-platform-intro {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #fff;
  border: 1px solid rgba(0, 1, 32, 0.08);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 28px;
  box-shadow: 0 10px 30px rgba(0, 1, 32, 0.05);
}

.g21-platform-intro__media {
  width: 132px;
  height: 132px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  background: #e8f2fb;
}

.g21-platform-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.g21-platform-intro__media--logo {
  background: #FFE1C5;
  border: 1px solid rgba(0, 1, 32, 0.12);
  padding: 10px;
}

.g21-platform-intro__media--logo img {
  object-fit: contain;
}

.g21-platform-intro__kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000120;
  margin-bottom: 8px;
}

.g21-platform-intro .details-title {
  margin-bottom: 10px;
}

.g21-platform-intro p {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.65;
}

.g21-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 1, 32, 0.28) transparent;
}

.g21-jump-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 1, 32, 0.1);
  color: #000120;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.g21-jump-nav a i {
  font-size: 13px;
}

.g21-jump-nav a img {
  width: 24px;
  height: 24px;
  margin: -4px 0;
  object-fit: contain;
  flex-shrink: 0;
}

.g21-jump-nav a:hover,
.g21-jump-nav a:focus-visible {
  background: #000120;
  color: #FFE1C5;
  box-shadow: 0 8px 18px rgba(0, 1, 32, 0.18);
}

.g21-jump-nav a:focus-visible {
  outline: 2px solid #000120;
  outline-offset: 3px;
}

.g21-vertical {
  background: #fff;
  border: 1px solid rgba(0, 1, 32, 0.08);
  border-radius: 18px;
  padding: 28px;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0, 1, 32, 0.05);
  scroll-margin-top: 150px;
}

.g21-vertical__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 1, 32, 0.08);
}

.g21-vertical__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #000120;
  color: #FFE1C5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.g21-vertical__icon--logo {
  background: #FFE1C5;
  border: 1px solid rgba(0, 1, 32, 0.12);
  padding: 6px;
}

.g21-vertical__icon--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.g21-vertical__name {
  font-family: var(--g21-font-heading);
  color: #000120;
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}

.g21-vertical__role {
  display: block;
  font-size: 13px;
  color: rgba(0, 1, 32, 0.68);
  margin: 0;
  line-height: 1.4;
}

.g21-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.g21-service-grid:has(.g21-service-tile:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.g21-service-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff8f0;
  border: 1px solid rgba(0, 1, 32, 0.06);
  border-radius: 12px;
  padding: 14px 14px;
  min-height: 64px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.g21-service-tile:hover {
  transform: translateY(-2px);
  background: #fff;
  border-color: rgba(0, 1, 32, 0.16);
  box-shadow: 0 10px 22px rgba(0, 1, 32, 0.1);
}

.g21-service-tile__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #000120;
  color: #FFE1C5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
  transition: background 0.25s ease, color 0.25s ease;
}

.g21-service-tile:hover .g21-service-tile__icon {
  background: #FFE1C5;
  color: #000120;
}

.g21-service-tile__label {
  font-weight: 600;
  color: #000120;
  font-size: 14px;
  line-height: 1.35;
  margin: 0;
}

.g21-service-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.g21-service-group {
  background: #fff8f0;
  border: 1px solid rgba(0, 1, 32, 0.06);
  border-radius: 14px;
  padding: 18px;
  scroll-margin-top: 150px;
}

.g21-service-group__title {
  font-family: var(--g21-font-heading);
  display: flex;
  align-items: center;
  gap: 10px;
  color: #000120;
  font-size: 16px;
  line-height: 1.35;
  margin: 0 0 14px;
}

.g21-service-group__title i {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #000120;
  color: #FFE1C5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* Image + bullet list rows — facility verticals and real-estate holdings */
.g21-secure-blocks {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.g21-secure-block {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  scroll-margin-top: 150px;
}

.g21-secure-block__media {
  border-radius: 16px;
  overflow: hidden;
  background: #000120;
  display: flex;
  align-items: center;
  justify-content: center;
}

.g21-secure-block__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: grayscale(90%);
}

.g21-secure-block__copy {
  background: #fff8f0;
  border: 1px solid rgba(0, 1, 32, 0.08);
  border-radius: 16px;
  padding: 22px 22px 20px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0, 1, 32, 0.06);
}

.g21-secure-block__title {
  font-family: var(--g21-font-heading);
  color: #000120;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.g21-secure-block__list {
  list-style: disc;
  margin: 0;
  padding: 0 0 0 18px;
}

.g21-secure-block__list li {
  color: #000120;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  margin: 0;
}

.g21-secure-block__list li + li {
  margin-top: 2px;
}

.g21-secure-block__more {
  align-self: flex-start;
  margin-top: 16px;
  padding: 12px 18px;
  font-size: 13px;
}

.g21-highlight-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid rgba(0, 1, 32, 0.08);
  border-radius: 18px;
  padding: 26px 24px;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0, 1, 32, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.g21-highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 1, 32, 0.1);
}

.g21-highlight-card__icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: #000120;
  color: #FFE1C5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.g21-highlight-card h3 {
  font-family: var(--g21-font-heading);
  color: #000120;
  font-size: 22px;
  line-height: 1.3;
  margin: 0;
}

.g21-platform-card > p {
  margin-bottom: 16px;
  font-size: 14px;
  color: rgba(0, 1, 32, 0.72);
}

.g21-brand-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.g21-platform-card .g21-brand-list {
  padding-left: 0;
}

.g21-platform-card .g21-brand-list li {
  gap: 12px;
  margin-bottom: 12px;
}

.g21-platform-card .g21-brand-list li:last-child {
  margin-bottom: 0;
}

.g21-platform-card .g21-brand-list li img,
.g21-platform-card .g21-brand-list li i {
  width: 40px;
  height: 40px;
}

.g21-platform-card .g21-brand-list li img {
  padding: 4px;
  border-radius: 10px;
  background: #FFE1C5;
}

.g21-platform-card .g21-brand-list li i {
  border-radius: 10px;
  font-size: 16px;
}

.g21-brand-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #000120;
  font-weight: 600;
  font-size: 14px;
}

.g21-brand-list li i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #000120;
  color: #FFE1C5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.g21-brand-list li img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.g21-platform-card .g21-platform-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #000120;
  color: #FFE1C5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}

.g21-platform-card .g21-platform-card__icon--logo {
  width: 116px;
  height: 116px;
  border-radius: 18px;
  background: #FFE1C5;
  border: 1px solid rgba(0, 1, 32, 0.12);
  padding: 10px;
  margin-bottom: 22px;
}

.g21-platform-card__icon--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.service-details-content .about-btn-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

@media (min-width: 768px) {
  .col-md-6 > .g21-vertical .g21-service-grid,
  .col-md-6 > .g21-vertical .g21-service-grid:has(.g21-service-tile:nth-child(3):last-child) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  .g21-vertical__name {
    font-size: 18px;
  }

  .g21-highlight-card h3 {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .g21-platform-intro {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
  }

  .g21-platform-intro__media {
    width: 100%;
    height: 180px;
  }

  .g21-jump-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .g21-jump-nav a {
    white-space: nowrap;
  }

  .g21-vertical {
    padding: 22px 18px;
  }

  .g21-secure-block {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .g21-secure-block__media {
    border-radius: 16px;
  }

  .g21-secure-block__copy {
    padding: 20px 18px 18px;
  }

  .g21-service-grid,
  .g21-service-grid:has(.g21-service-tile:nth-child(3):last-child) {
    grid-template-columns: 1fr;
  }

  .g21-highlight-card {
    align-items: flex-start;
    padding: 20px 16px;
  }

  .g21-highlight-card__icon {
    width: 56px;
    height: 56px;
    font-size: 22px;
    border-radius: 14px;
  }

  .service-details-content .about-btn-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .service-details-content .about-btn-wrap a {
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .g21-service-tile,
  .g21-highlight-card,
  .g21-jump-nav a {
    transition: none;
  }

  .g21-service-tile:hover,
  .g21-highlight-card:hover {
    transform: none;
  }
}

/* Industries page — 4 images per row (does not affect home) */
.g21-industries-page-card {
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #000120;
  box-shadow: 0 10px 30px rgba(0, 1, 32, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.g21-industries-page-card img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(90%);
}

.g21-industries-page-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px rgba(0, 1, 32, 0.18);
}

@media (max-width: 767px) {
  .g21-industries-page-card {
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .g21-industries-page-card {
    transition: none;
  }

  .g21-industries-page-card:hover {
    transform: none;
  }
}

/* ── WEB3 content components ── */

/* Invisible anchor targets that keep old #hash links working */
.g21-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 150px;
}

/* Hero journey line: OPERATE → CONNECT → TRANSACT → DEVELOP → OWN */
.g21-hero-journey {
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
  margin: 22px 0 0;
  padding: 6px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 1, 32, 0.14);
  border-radius: 999px;
  box-shadow: 0 12px 30px -16px rgba(0, 1, 32, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.g21-hero-journey__step {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Chevron between steps */
.g21-hero-journey__step:not(:last-child)::after {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 8px 0 4px;
  border-top: 2px solid rgba(0, 1, 32, 0.4);
  border-right: 2px solid rgba(0, 1, 32, 0.4);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.g21-hero-journey__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-family: var(--g21-font-heading);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000120;
  animation: g21-journey-pulse 5s ease-in-out infinite;
}

.g21-hero-journey__step:nth-child(2) .g21-hero-journey__chip { animation-delay: 0.6s; }
.g21-hero-journey__step:nth-child(3) .g21-hero-journey__chip { animation-delay: 1.2s; }
.g21-hero-journey__step:nth-child(4) .g21-hero-journey__chip { animation-delay: 1.8s; }

.g21-hero-journey__num {
  font-size: 9px;
  letter-spacing: 0.04em;
  opacity: 0.5;
}

/* Destination step: solid navy */
.g21-hero-journey__step--final .g21-hero-journey__chip {
  background-color: #000120;
  color: #FFE1C5;
  box-shadow: 0 6px 16px -6px rgba(0, 1, 32, 0.6);
  animation: g21-journey-arrive 5s ease-in-out 2.4s infinite;
}

.g21-hero-journey__step--final .g21-hero-journey__num {
  opacity: 0.7;
}

/* Highlight travels along the steps, then lands on OWN */
@keyframes g21-journey-pulse {
  0%, 26%, 100% { background-color: transparent; }
  8%, 16% { background-color: rgba(0, 1, 32, 0.1); }
}

@keyframes g21-journey-arrive {
  0%, 30%, 100% { box-shadow: 0 6px 16px -6px rgba(0, 1, 32, 0.6), 0 0 0 0 rgba(0, 1, 32, 0.35); }
  12% { box-shadow: 0 6px 16px -6px rgba(0, 1, 32, 0.6), 0 0 0 7px rgba(0, 1, 32, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .g21-hero-journey__chip,
  .g21-hero-journey__step--final .g21-hero-journey__chip {
    animation: none;
  }
}

/* Hidden on phones: it wraps to two rows and pushes the CTAs down */
@media only screen and (max-width: 767px) {
  .g21-hero-journey {
    display: none;
  }
}

/* Ecosystem page — platform cards */
.g21-platform-card__tagline {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000120;
  margin-bottom: 12px;
}

.g21-platform-card p.g21-platform-card__keywords {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  color: rgba(0, 1, 32, 0.6);
  flex-grow: 0;
}

.g21-platform-card {
  display: flex;
  flex-direction: column;
  padding: 32px 30px;
}

/* One spacing scale for every block inside the card */
.g21-platform-card .g21-platform-card__tag {
  margin-bottom: 16px;
}

.g21-platform-card h3 {
  margin-bottom: 12px;
}

/* Ecosystem platform titles held to two lines at one shared size, sized so
   the longest ("G21 Integrated Facility Management") fits at each width */
.g21-platform-card h3.g21-platform-card__title--compact {
  font-size: 28px;
  font-weight: 700;
}

@media (max-width: 1399px) {
  .g21-platform-card h3.g21-platform-card__title--compact {
    font-size: 25px;
  }
}

@media (max-width: 1199px) {
  .g21-platform-card h3.g21-platform-card__title--compact {
    font-size: 20px;
  }
}

@media (max-width: 991px) {
  .g21-platform-card h3.g21-platform-card__title--compact {
    font-size: var(--bz-fs-h3);
  }
}

.g21-platform-card .g21-platform-card__tagline {
  margin-bottom: 16px;
}

.g21-platform-card > p,
.g21-platform-card .g21-brand-list {
  margin-bottom: 22px;
}

.g21-platform-card > p.g21-platform-card__keywords {
  margin-bottom: 26px;
}

.g21-platform-card .bz-primary-btn {
  align-self: flex-start;
  margin-top: auto;
}

/* Three across: share row tracks so every block lines up across the
   cards even when one title or list wraps to more lines */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 992px) {
    .g21-platform-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 24px;
      row-gap: 0;
      margin: 0;
    }

    .g21-platform-grid > [class*="col-"] {
      display: grid;
      grid-row: span 8;
      grid-template-rows: subgrid;
      row-gap: 0;
      width: auto;
      margin: 0;
      padding: 0;
    }

    .g21-platform-grid .g21-platform-card {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .g21-platform-grid .g21-platform-card .bz-primary-btn {
      align-self: end;
      justify-self: start;
    }
  }
}

.g21-brand-list a {
  color: inherit;
}

.g21-brand-list a:hover {
  text-decoration: underline;
}

/* Journey — Operate → Connect → Transact → Develop → Own
   A timeline: icon nodes joined by a track that draws in (main.js
   adds .is-pending until the band scrolls into view). Horizontal on
   desktop, vertical from 991px down. */
.g21-journey-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 0%, rgba(255, 225, 197, 0.12) 0%, rgba(255, 225, 197, 0) 45%),
    linear-gradient(135deg, #000120 0%, #1A1B43 100%);
}

.g21-journey-head {
  margin-bottom: 64px;
}

.g21-journey-intro {
  max-width: 560px;
  margin-left: auto;
  padding-left: 24px;
  border-left: 2px solid rgba(255, 225, 197, 0.45);
}

.g21-journey-intro p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 10px;
}

.g21-journey-intro p:last-child {
  margin-bottom: 0;
}

.g21-journey-intro p.g21-journey-intro__lead {
  color: #FFE1C5;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.g21-journey {
  --g21-node: 72px;
  --g21-gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--g21-gap);
}

.g21-journey__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Track segment to the next node: base line + cream fill */
.g21-journey__step:not(:last-child)::before,
.g21-journey__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--g21-node) / 2 - 1px);
  left: calc(50% + var(--g21-node) / 2 + 8px);
  width: calc(100% + var(--g21-gap) - var(--g21-node) - 16px);
  height: 2px;
  border-radius: 2px;
}

.g21-journey__step:not(:last-child)::before {
  background: rgba(255, 255, 255, 0.16);
}

.g21-journey__step:not(:last-child)::after {
  background: linear-gradient(90deg, rgba(255, 225, 197, 0.5), #FFE1C5);
  transform-origin: left center;
  transition: transform 0.6s ease calc(var(--g21-step) * 0.35s + 0.3s);
}

.g21-journey__node {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--g21-node);
  height: var(--g21-node);
  margin-bottom: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 225, 197, 0.55);
  color: #FFE1C5;
  font-size: 24px;
  transition: border-color 0.4s ease calc(var(--g21-step) * 0.35s + 0.15s),
    color 0.4s ease calc(var(--g21-step) * 0.35s + 0.15s),
    background-color 0.3s ease, transform 0.3s ease;
}

/* Destination: solid cream node with a soft halo */
.g21-journey__step--final .g21-journey__node {
  background: #FFE1C5;
  border-color: #FFE1C5;
  color: #000120;
  box-shadow: 0 0 0 8px rgba(255, 225, 197, 0.14), 0 14px 30px -10px rgba(0, 0, 0, 0.5);
  animation: g21-journey-node-arrive 3.2s ease-out 1.8s infinite;
}

.g21-journey__card {
  flex: 1;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 22px 18px 24px;
  text-align: center;
  transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.g21-journey__step--final .g21-journey__card {
  background: rgba(255, 225, 197, 0.12);
  border-color: rgba(255, 225, 197, 0.5);
}

.g21-journey__num {
  display: inline-block;
  font-family: var(--g21-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 225, 197, 0.85);
  margin-bottom: 8px;
}

.g21-journey__name {
  font-family: var(--g21-font-heading);
  color: #fff;
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.g21-journey__step--final .g21-journey__name {
  color: #FFE1C5;
}

.g21-journey__card p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

@media (hover: hover) {
  .g21-journey__step:hover .g21-journey__card {
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 225, 197, 0.5);
    box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.55);
  }

  .g21-journey__step:not(.g21-journey__step--final):hover .g21-journey__node {
    background-color: rgba(255, 225, 197, 0.16);
    transform: scale(1.06);
  }
}

/* Before the band is in view: track empty, nodes dimmed */
.g21-journey.is-pending .g21-journey__step::after {
  transform: scaleX(0);
}

.g21-journey.is-pending .g21-journey__step:not(.g21-journey__step--final) .g21-journey__node {
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 225, 197, 0.4);
}

@keyframes g21-journey-node-arrive {
  0% { box-shadow: 0 0 0 8px rgba(255, 225, 197, 0.14), 0 14px 30px -10px rgba(0, 0, 0, 0.5); }
  60%, 100% { box-shadow: 0 0 0 18px rgba(255, 225, 197, 0), 0 14px 30px -10px rgba(0, 0, 0, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .g21-journey__step--final .g21-journey__node {
    animation: none;
  }
}

@media (max-width: 1199px) {
  .g21-journey {
    --g21-node: 60px;
    --g21-gap: 16px;
  }

  .g21-journey__node {
    font-size: 20px;
  }

  .g21-journey__card {
    padding: 18px 12px 20px;
  }

  .g21-journey__name {
    font-size: 16px;
    letter-spacing: 0.04em;
  }

  .g21-journey__card p {
    font-size: 13.5px;
  }
}

/* Tablet & phone: vertical timeline, node on the left */
@media (max-width: 991px) {
  .g21-journey-head {
    margin-bottom: 40px;
    text-align: center;
  }

  .g21-journey-intro {
    max-width: 640px;
    margin: 20px auto 0;
    padding-left: 0;
    border-left: 0;
  }

  .g21-journey {
    --g21-node: 56px;
    --g21-gap: 16px;
    grid-template-columns: 1fr;
    max-width: 640px;
    margin: 0 auto;
  }

  .g21-journey__step {
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
  }

  .g21-journey__node {
    margin-bottom: 0;
    font-size: 20px;
  }

  .g21-journey__step:not(:last-child)::before,
  .g21-journey__step:not(:last-child)::after {
    top: calc(var(--g21-node) + 6px);
    left: calc(var(--g21-node) / 2 - 1px);
    width: 2px;
    height: calc(100% - var(--g21-node) + var(--g21-gap) - 12px);
  }

  .g21-journey__step:not(:last-child)::after {
    background: linear-gradient(180deg, rgba(255, 225, 197, 0.5), #FFE1C5);
    transform-origin: center top;
  }

  .g21-journey.is-pending .g21-journey__step::after {
    transform: scaleY(0);
  }

  .g21-journey__card {
    padding: 16px 18px 18px;
    text-align: left;
  }

  .g21-journey__num {
    margin-bottom: 4px;
  }

  .g21-journey__name {
    font-size: 17px;
    margin-bottom: 6px;
  }

  .g21-journey__card p {
    font-size: 14px;
  }
}

@media (max-width: 575px) {
  .g21-journey {
    --g21-node: 46px;
    --g21-gap: 14px;
  }

  .g21-journey__step {
    gap: 12px;
  }

  .g21-journey__node {
    font-size: 17px;
  }

  .g21-journey__step--final .g21-journey__node {
    box-shadow: 0 0 0 6px rgba(255, 225, 197, 0.14), 0 10px 22px -8px rgba(0, 0, 0, 0.5);
  }

  .g21-journey-intro p.g21-journey-intro__lead {
    font-size: 16px;
  }
}

/* Impact in numbers — navy stats panel (impact.php) */
.g21-impact-stats {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 64px 48px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 225, 197, 0.16) 0%, rgba(255, 225, 197, 0) 42%),
    radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(135deg, #000120 0%, #1A1B43 100%);
  box-shadow: 0 24px 50px -24px rgba(0, 1, 32, 0.55);
}

.g21-impact-stats__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.g21-impact-stat {
  padding: 8px 24px;
  text-align: center;
}

.g21-impact-stat + .g21-impact-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.g21-impact-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: rgba(255, 225, 197, 0.12);
  border: 1px solid rgba(255, 225, 197, 0.45);
  color: #FFE1C5;
  font-size: 22px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.g21-impact-stat__value {
  font-family: var(--g21-font-heading);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  margin: 0 0 12px;
}

/* Global span rule sets the body font; keep digits and suffix in Orbitron */
.g21-impact-stat__value span,
.g21-impact-stat__value .odometer * {
  font-family: var(--g21-font-heading);
  line-height: 1;
}

.g21-impact-stat__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(255, 225, 197, 0.88);
  max-width: 200px;
  margin: 0 auto;
}

@media (hover: hover) {
  .g21-impact-stat:hover .g21-impact-stat__icon {
    background-color: #FFE1C5;
    color: #000120;
    transform: translateY(-3px);
  }
}

@media (max-width: 1199px) {
  .g21-impact-stats {
    padding: 56px 32px;
  }

  .g21-impact-stat {
    padding: 8px 16px;
  }

  .g21-impact-stat__value {
    font-size: 44px;
  }
}

/* Tablet & phone: 2 × 2 grid of soft cards instead of dividers */
@media (max-width: 991px) {
  .g21-impact-stats__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .g21-impact-stat,
  .g21-impact-stat + .g21-impact-stat {
    padding: 28px 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
  }
}

@media (max-width: 575px) {
  .g21-impact-stats {
    padding: 44px 16px;
    border-radius: 18px;
  }

  .g21-impact-stats__list {
    gap: 10px;
  }

  .g21-impact-stat,
  .g21-impact-stat + .g21-impact-stat {
    padding: 20px 10px;
  }

  .g21-impact-stat__icon {
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    font-size: 18px;
  }

  .g21-impact-stat__value {
    font-size: 32px;
    margin-bottom: 8px;
  }

  .g21-impact-stat__label {
    font-size: 12px;
    letter-spacing: 0.05em;
  }
}

/* Tile grids — capabilities, why G21, environments, impact */
.g21-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.g21-tile-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.g21-service-tile--desc {
  align-items: flex-start;
  padding: 20px 18px;
  height: 100%;
}

.g21-service-tile__desc {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(0, 1, 32, 0.72);
  margin: 6px 0 0;
}

/* Chips — stakeholders, culture, teams, partners */
.g21-chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.g21-chip-list--center {
  justify-content: center;
}

.g21-chip-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff8f0;
  border: 1px solid rgba(0, 1, 32, 0.1);
  color: #000120;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.g21-chip-list li i {
  font-size: 13px;
}

/* White statement panel — ecosystem, impact, people, partner */
.g21-statement-box {
  background: #fff;
  border: 1px solid rgba(0, 1, 32, 0.08);
  border-radius: 18px;
  padding: 48px 40px;
  box-shadow: 0 10px 30px rgba(0, 1, 32, 0.05);
}

.g21-statement-box .section-heading p {
  color: rgba(0, 1, 32, 0.78);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.g21-statement-box__close {
  text-align: center;
  margin-top: 28px;
}

.g21-statement-box__close p {
  margin-bottom: 4px;
  color: #000120;
}

.g21-section-closer {
  text-align: center;
  max-width: 760px;
  margin: 40px auto 0;
  color: #000120;
  font-weight: 600;
}

.g21-section-closer p {
  margin-bottom: 4px;
}

/* "Build the …" lines */
.g21-build-lines {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
}

.g21-build-lines li {
  font-family: var(--g21-font-heading);
  color: #000120;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Home final CTA */
.g21-final-cta__box {
  background: linear-gradient(135deg, #000120 0%, #1A1B43 100%);
  border-radius: 20px;
  padding: 64px 40px;
}

.g21-final-cta__box .section-heading p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.section-heading.white-content p.g21-final-cta__lead {
  color: #FFE1C5;
  font-weight: 700;
  margin-top: 12px;
}

.g21-final-cta__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* About — approach steps */
.g21-step-box__num {
  display: inline-block;
  font-family: var(--g21-font-heading);
  font-size: 28px;
  font-weight: 800;
  color: rgba(0, 1, 32, 0.18);
  line-height: 1;
  margin-bottom: 12px;
}

.g21-step-box p {
  margin: 0;
}

/* About — leadership */
.g21-leadership-section {
  background: #fff8f0;
}

.g21-leader {
  background: #fff;
  border: 1px solid rgba(0, 1, 32, 0.08);
  border-radius: 18px;
  padding: 30px 26px;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0, 1, 32, 0.05);
}

.g21-leader__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(0, 1, 32, 0.08);
}

.g21-leader__mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #000120;
  color: #FFE1C5;
  font-family: var(--g21-font-heading);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.g21-leader__name {
  font-family: var(--g21-font-heading);
  color: #000120;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
}

.g21-leader__role {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(0, 1, 32, 0.68);
  margin: 0;
}

.g21-leader > p {
  font-size: 15px;
  line-height: 1.7;
}

.g21-leader > p:last-child {
  margin-bottom: 0;
}

/* Contact — enquiry cards */
.g21-enquiry-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(0, 1, 32, 0.08);
  border-radius: 16px;
  padding: 26px 22px;
  box-shadow: 0 10px 30px rgba(0, 1, 32, 0.05);
  color: #000120;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.g21-enquiry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 1, 32, 0.12);
  color: #000120;
}

.g21-enquiry-card h3 {
  font-family: var(--g21-font-heading);
  color: #000120;
  font-size: 17px;
  margin: 6px 0 0;
}

.g21-enquiry-card p {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
}

.g21-enquiry-card__more {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Footer — tagline, platform taglines, compact lists, journey */
.footer-widget p.g21-footer-tagline {
  font-weight: 700;
  margin-top: 24px;
}

.footer-widget .footer-list.g21-footer-platforms li span {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 8px;
  padding-left: 30px;
}

.footer-widget .footer-list.g21-footer-list--compact li:not(:last-of-type) {
  margin-bottom: 12px;
}

.footer-widget .footer-list.g21-footer-list--compact li a {
  font-size: 16px;
}

.copyright-content p.g21-footer-credit {
  text-align: right;
}

.copyright-content p.g21-footer-credit a {
  color: #fff;
  font-weight: 600;
  transition: color 0.3s ease;
}

.copyright-content p.g21-footer-credit a:hover,
.copyright-content p.g21-footer-credit a:focus-visible {
  color: #FFE1C5;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Footer list hover: theme primary is navy, same as the footer, so use peach */
.footer-widget .footer-list li a:hover,
.footer-widget .footer-list li a:focus-visible,
.footer-widget .footer-list li a:hover:before,
.footer-widget .footer-list li a:focus-visible:before {
  color: #FFE1C5;
}

@media (max-width: 1199px) {
  .g21-tile-grid,
  .g21-tile-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-widget .footer-list.g21-footer-platforms li span {
    padding-left: 20px;
  }
}

@media (max-width: 767px) {
  .g21-tile-grid,
  .g21-tile-grid--3 {
    grid-template-columns: 1fr;
  }

  .g21-statement-box,
  .g21-final-cta__box {
    padding: 32px 18px;
  }

  .g21-build-lines li {
    font-size: 16px;
  }

  .g21-final-cta__btns .bz-primary-btn {
    width: 100%;
    justify-content: center;
  }

  .g21-leader {
    padding: 24px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .g21-enquiry-card {
    transition: none;
  }

  .g21-enquiry-card:hover {
    transform: none;
  }
}

/* ── Buttons — hover & focus states ──
   Light sections: navy button inverts to white with navy text.
   Dark boxes (footer, sidebar CTA, final CTA): cream button
   turns into a navy outline with cream text. */
.bz-primary-btn,
.bz-transparent-btn {
  border: 1px solid #000120;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease,
    transform 0.3s ease, box-shadow 0.3s ease;
}

.bz-primary-btn:before,
.hero-content .hero-btn-wrap .bz-primary-btn:not(.hero-btn):before {
  background-color: #fff;
}

.bz-primary-btn i,
.bz-transparent-btn i {
  transition: transform 0.3s ease;
}

.bz-primary-btn:hover,
.bz-primary-btn:focus-visible {
  color: #000120;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 1, 32, 0.22);
}

.bz-transparent-btn:hover,
.bz-transparent-btn:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 1, 32, 0.22);
}

.bz-primary-btn:hover i,
.bz-primary-btn:focus-visible i {
  transform: translateX(4px);
}

.bz-transparent-btn:hover i,
.bz-transparent-btn:focus-visible i {
  transform: rotate(-12deg);
}

.bz-primary-btn:focus-visible,
.bz-transparent-btn:focus-visible {
  outline: 2px solid #000120;
  outline-offset: 3px;
}

.bz-primary-btn:focus-visible:before,
.bz-transparent-btn:focus-visible:before {
  transform-origin: left center;
  transform: scale(1, 1);
}

/* Buttons on dark navy boxes */
.footer-top .section-heading .bz-primary-btn,
.service-widget .g21-sidebar-cta .content .bz-primary-btn,
.g21-final-cta__btns .bz-primary-btn {
  background-color: #FFE1C5;
  border-color: #FFE1C5;
  color: #000120;
}

.footer-top .section-heading .bz-primary-btn:before,
.service-widget .g21-sidebar-cta .content .bz-primary-btn:before,
.g21-final-cta__btns .bz-primary-btn:before {
  background-color: #000120;
}

.footer-top .section-heading .bz-primary-btn:focus,
.service-widget .g21-sidebar-cta .content .bz-primary-btn:focus,
.g21-final-cta__btns .bz-primary-btn:focus {
  color: #000120;
}

.footer-top .section-heading .bz-primary-btn:hover,
.footer-top .section-heading .bz-primary-btn:focus-visible,
.service-widget .g21-sidebar-cta .content .bz-primary-btn:hover,
.service-widget .g21-sidebar-cta .content .bz-primary-btn:focus-visible,
.g21-final-cta__btns .bz-primary-btn:hover,
.g21-final-cta__btns .bz-primary-btn:focus-visible {
  color: #FFE1C5;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.footer-top .section-heading .bz-primary-btn:focus-visible,
.service-widget .g21-sidebar-cta .content .bz-primary-btn:focus-visible,
.g21-final-cta__btns .bz-primary-btn:focus-visible {
  outline-color: #FFE1C5;
}

@media (hover: none) {
  .bz-primary-btn:hover,
  .bz-transparent-btn:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bz-primary-btn,
  .bz-transparent-btn,
  .bz-primary-btn i,
  .bz-transparent-btn i {
    transition: none;
  }

  .bz-primary-btn:hover,
  .bz-transparent-btn:hover,
  .bz-primary-btn:hover i,
  .bz-transparent-btn:hover i {
    transform: none;
  }
}

/* ── UX polish — readable wrapping, focus, tap targets, mobile menu ── */

/* Balanced headings, no single-word orphans in body copy */
.section-heading .section-title,
.page-header-content .title,
.g21-section-closer,
.g21-approach-section .section-heading p,
.section-heading.text-center p {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

/* Justified paragraphs site-wide (matches the home hero). Lists stay
   left-aligned: justify only spreads the words of short bullet lines */
section p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* Centred blocks keep their centring */
.text-center p,
.g21-journey__card p,
.g21-journey-head p,
.g21-impact-stat p,
.g21-about-stats__item p,
.counter-item p,
.g21-statement-box__close p,
.g21-section-closer p,
.page-header p {
  text-align: inherit;
}

/* Short copy in tiles, labels and narrow info cards: justify leaves wide
   gaps between words, so keep it ragged-right */
section .g21-service-tile p,
section .g21-step-box p,
section .g21-leader__role,
section .g21-vertical__role,
section .g21-platform-card__keywords,
section .g21-job-card__meta,
section .g21-enquiry-card p,
section .list-item p {
  text-align: inherit;
  hyphens: manual;
}

/* Visible keyboard focus everywhere (theme removes outlines) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

.form-control:focus-visible {
  outline-color: #000120;
}

/* Hamburger: whole navy circle is the button, lines a touch heavier */
.header .primary-header-inner .header-right-wrap .header-right .sidebar-icon {
  width: 46px;
  height: 46px;
  padding: 0;
}

.header .primary-header-inner .header-right-wrap .header-right .sidebar-icon .sidebar-trigger {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  align-items: center;
  cursor: pointer;
}

.header .primary-header-inner .header-right-wrap .header-right .sidebar-icon .sidebar-trigger span {
  height: 2px;
}

.header .primary-header-inner .header-right-wrap .header-right .sidebar-icon .sidebar-trigger:focus-visible {
  outline-color: #000120;
  outline-offset: 4px;
}

/* Off-canvas menu: dimmed backdrop, larger close button, no page scroll behind */
#sidebar-overlay {
  width: 100%;
  inset: 0;
  z-index: 9998;
  visibility: hidden;
  opacity: 0;
  background: rgba(0, 1, 32, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  cursor: pointer;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.open-sidebar #sidebar-overlay {
  visibility: visible;
  opacity: 1;
  z-index: 9998;
  transition-delay: 0s;
}

body.open-sidebar {
  overflow: hidden;
}

.sidebar-area {
  overscroll-behavior: contain;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: -20px 0 50px rgba(0, 1, 32, 0.18);
}

.sidebar-area .sidebar-trigger.close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 1, 32, 0.07);
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.sidebar-area .sidebar-trigger.close:hover {
  background-color: rgba(0, 1, 32, 0.14);
  transform: rotate(90deg);
}

.sidebar-area .sidebar-trigger.close svg {
  width: 16px;
  height: 16px;
}

/* Mobile menu links: full-width rows with a comfortable tap height */
.sidebar-area .mean-bar .mean-nav.mean-nav > ul li:not(:last-of-type) {
  margin-bottom: 0;
  padding-bottom: 0;
}

.sidebar-area .mean-bar .mean-nav.mean-nav > ul li a {
  display: block;
  padding: 14px 48px 14px 0;
  font-size: 16px;
  line-height: 1.3;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.sidebar-area .mean-bar .mean-nav.mean-nav > ul li a:hover {
  padding-left: 6px;
}

.sidebar-area .mean-bar .mean-nav.mean-nav > ul li a[aria-current="page"] {
  font-weight: 800;
  box-shadow: inset 3px 0 0 #000120;
  padding-left: 12px;
}

.sidebar-area .mean-bar .mean-nav.mean-nav > ul li a.mean-expand {
  top: 7px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 8px;
}

.sidebar-area .mean-bar .mean-nav.mean-nav > ul li a.mean-expand:hover {
  padding-left: 0;
}

.sidebar-area .mean-bar .mean-nav.mean-nav > ul li ul {
  margin-top: 0;
  padding-left: 14px;
}

.sidebar-area .mean-bar .mean-nav.mean-nav > ul li ul li a {
  font-size: 15px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.side-menu-contact .side-menu-list li > p,
.side-menu-contact .side-menu-list li > a {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.side-menu-contact .side-menu-list li a,
.side-menu-social li a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

.g21-sidebar-cta .number {
  display: inline-block;
  padding: 8px 0;
}

/* Back-to-top: keyboard reachable, clear of the home indicator on phones */
#scroll-percentage {
  z-index: 50;
  box-shadow: 0 8px 22px rgba(0, 1, 32, 0.18);
}

/* Footer links: taller tap rows */
.footer-widget .footer-list li a {
  display: inline-block;
  padding-top: 4px;
  padding-bottom: 4px;
}

.footer-widget .footer-list.g21-footer-list--compact li:not(:last-of-type) {
  margin-bottom: 6px;
}

.footer-social li a {
  min-width: 40px;
  min-height: 40px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  #sidebar-overlay,
  .sidebar-area,
  .sidebar-area .sidebar-trigger.close,
  .sidebar-area .mean-bar .mean-nav.mean-nav > ul li a {
    transition: none !important;
  }

  .sidebar-area .sidebar-trigger.close:hover {
    transform: none;
  }
}

/* ============================================================
   Responsive layer — phones, tablets, laptops, desktops, large
   Breakpoints: 575 / 767 / 991 / 1199 / 1399 / 1599 / 1919
   ============================================================ */

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  max-width: 100%;
}

img,
video,
iframe,
embed,
object {
  max-width: 100%;
}

video {
  height: auto;
}

.container,
.container-2,
.content-container {
  width: 100%;
}

.content-container {
  max-width: 100%;
  overflow: hidden;
}

.page-header-content .title,
.section-heading .section-title,
.details-title,
.g21-vertical__name,
.g21-highlight-card h3,
.footer-widget p,
.contact-content .contact-list .list-item .content p {
  overflow-wrap: break-word;
}

.contact-content .contact-list .list-item .content a {
  overflow-wrap: anywhere;
}

/* Large desktops */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }

  .hero-section .hero-content {
    max-width: 680px;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1480px;
  }

  .hero-section .hero-content {
    max-width: 740px;
  }

  .g21-industry-card__link {
    height: 460px;
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 1640px;
  }

  .g21-industries-grid {
    gap: 28px;
  }
}

/* Laptops / small desktops: keep desktop nav but compress it */
@media (max-width: 1399px) {
  .header .primary-header-inner .header-menu-wrap ul li a {
    font-size: 13px;
    padding-top: 22px;
    padding-bottom: 22px;
    padding-left: 26px;
  }

  .header .primary-header-inner .header-menu-wrap .mobile-menu-items > ul {
    gap: 0 20px;
  }

  .header .primary-header-inner .header-menu-wrap ul > li > a:after {
    left: 26px;
  }

  .header .primary-header-inner .header-logo img {
    max-width: 104px;
    max-height: 104px;
  }
}

/* Tablets and below: hamburger + sidebar nav */
@media (max-width: 1199px) {
  .header {
    position: sticky !important;
    top: 0;
    height: auto !important;
    z-index: 99;
    box-shadow: 0 1px 10px rgba(0, 1, 32, 0.08);
    max-width: 100%;
  }

  .header .primary-header-inner {
    padding: 12px 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 100%;
  }

  .header .primary-header-inner .header-menu-wrap {
    display: none !important;
  }

  .header .primary-header-inner .header-right-wrap {
    display: flex !important;
    flex-shrink: 0;
    margin-left: auto;
  }

  .header .primary-header-inner .header-right-wrap .header-right .sidebar-icon {
    display: flex !important;
    margin-left: 0;
  }

  .header .primary-header-inner .header-logo img {
    max-width: 84px;
    max-height: 84px;
  }

  .sidebar-area {
    transform: translateX(110%);
  }

  .open-sidebar .sidebar-area {
    transform: translate(0);
  }

  .hero-section .shapes {
    display: none;
  }

  /* Fill the screen, but don't leave a tall empty band on portrait tablets */
  .hero-section {
    min-height: min(calc(100vh - 100px), 760px);
    min-height: min(calc(100svh - 100px), 760px);
  }

  .hero-section .hero-overlay {
    background: linear-gradient(
      180deg,
      #FFE1C5 0%,
      rgba(255, 225, 197, 0.94) 28%,
      rgba(255, 225, 197, 0.72) 52%,
      rgba(255, 225, 197, 0.28) 78%,
      rgba(255, 225, 197, 0.08) 100%
    );
  }

  .hero-section .hero-mask-img img {
    object-position: 55% center;
    transform: scale(1.06);
  }

  .hero-section .hero-content {
    max-width: 640px;
  }

  .g21-service-strip {
    overflow: hidden;
  }

  .page-header-content .title {
    font-size: 30px;
  }

  /* Counters: 4 narrow columns on small laptops — shrink icon and figure */
  .counter-item {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-gap: 14px;
  }

  .counter-item .icon,
  .counter-item .icon .icon-inner,
  .counter-item .icon .shape {
    max-width: 72px;
    width: 72px;
    height: 72px;
  }

  .counter-item .counter-content {
    min-width: 0;
  }

  .counter-item .counter-content .title {
    font-size: clamp(24px, 2.6vw, 32px);
  }

  .counter-item .counter-content p {
    line-height: 1.35;
  }

  .sponsor-text-wrap .sponsor-text {
    white-space: normal;
  }

  .sidebar-area {
    width: min(400px, 92vw);
  }

  html {
    scroll-padding-top: 100px;
  }

  #security,
  #staffing,
  #facility,
  #engineering,
  .g21-industries-section,
  .g21-clients-section,
  .g21-vertical,
  .g21-secure-block,
  .g21-service-group {
    scroll-margin-top: 120px;
  }
}

/* Tablets */
@media (max-width: 991px) {
  /* Theme heading scale (66/48/36/30/24) is sized for desktop */
  :root {
    --bz-fs-h1: clamp(32px, 5.2vw, 44px);
    --bz-fs-h2: clamp(26px, 4.2vw, 36px);
    --bz-fs-h3: clamp(22px, 3.4vw, 28px);
    --bz-fs-h4: clamp(19px, 2.8vw, 24px);
    --bz-fs-h5: clamp(17px, 2.4vw, 20px);
    --bz-fs-h6: 17px;
  }

  .service-details-content .details-title {
    font-size: clamp(22px, 3.6vw, 28px);
    line-height: 1.25;
  }

  .g21-step-box__num {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .hero-section .shapes,
  .content-wrap .shapes,
  .counter-section .shapes {
    display: none;
  }

  .hero-section .hero-content .section-heading .section-title {
    font-size: clamp(28px, 5vw, 40px);
  }

  .section-heading .section-title {
    font-size: clamp(26px, 4.2vw, 36px);
  }

  .about-img-wrap {
    margin: 0 auto 24px;
    max-width: 100%;
  }

  .about-content,
  .g21-about-home .about-content {
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
  }

  .content-wrap {
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 28px 0 28px 0;
  }

  .content-box {
    padding: 40px 28px;
    max-width: 100%;
    margin-left: 0;
  }

  .content-tab .nav-tabs {
    column-gap: 10px;
  }

  .content-tab .nav-tabs .nav-link {
    padding: 10px 18px;
  }

  .g21-jump-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    max-width: 100%;
    min-width: 0;
  }

  .g21-jump-nav a {
    white-space: nowrap;
  }

  .service-details-content,
  .blog-contact-form,
  .contact-content {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .g21-about-home__media {
    margin: 24px auto 0;
    max-width: 520px;
    padding: 0;
  }

  .g21-secure-block {
    grid-template-columns: 1fr;
  }

  .g21-platform-intro {
    gap: 18px;
  }

  .contact-content {
    padding: 28px 24px;
  }

  .counter-item {
    grid-template-columns: 72px 1fr;
    grid-gap: 14px;
  }

  .counter-item .icon,
  .counter-item .icon .icon-inner,
  .counter-item .icon .shape {
    max-width: 72px;
    width: 72px;
    height: 72px;
  }

  .footer-wrap {
    padding: 48px 0 8px;
  }

  .footer-widget {
    margin-bottom: 36px;
  }

  .footer-top {
    padding-bottom: 40px;
  }

  .page-header-content {
    padding: 32px 0;
    gap: 12px;
  }

  .blog-contact-form .request-form .form-item .form-control {
    font-size: 16px;
  }
}

/* Large phones / small tablets */
@media (max-width: 767px) {
  .hero-section br,
  .footer-top br,
  .page-header-content br {
    display: block !important;
  }

  .section-heading .section-title,
  .page-header-content .title {
    overflow: visible;
    white-space: normal;
  }

  .page-header-content .title {
    display: block !important;
  }

  .header .primary-header-inner {
    padding: 10px 0;
  }

  .header .primary-header-inner .header-logo img {
    max-width: 68px;
    max-height: 68px;
  }

  .hero-section {
    min-height: auto;
    padding: 28px 0 8px;
  }

  .hero-section .hero-content {
    max-width: 100%;
    padding: 12px 0 28px;
  }

  .hero-section .hero-content .section-heading .section-title {
    font-size: clamp(26px, 8vw, 32px);
  }

  /* On phones the copy fills the whole hero, so keep the photo as a faint
     texture behind it and only let it show through at the very bottom */
  .hero-section .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(255, 225, 197, 0.97) 0%,
      rgba(255, 225, 197, 0.9) 60%,
      rgba(255, 225, 197, 0.8) 85%,
      rgba(255, 225, 197, 0.6) 100%
    );
  }

  .hero-section .hero-content .section-heading p {
    text-shadow: 0 0 12px #FFE1C5, 0 0 2px #FFE1C5;
  }

  .hero-content .hero-btn-wrap .hero-btn {
    background-color: rgba(255, 255, 255, 0.75);
    border-color: #000120;
  }

  .page-header-content {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 24px 0;
  }

  .page-header-content .title {
    font-size: clamp(22px, 6.4vw, 28px);
    line-height: 1.25;
    text-align: center;
    width: 100%;
  }

  .page-header-content .sub-title a {
    display: inline-block;
    padding: 6px 2px;
  }

  .page-header-content .sub-title {
    justify-content: center;
    align-self: center;
    padding: 8px 16px;
    flex-wrap: wrap;
  }

  .page-header-content .sub-title .home,
  .page-header-content .sub-title .inner {
    font-size: 14px;
  }

  .content-wrap {
    padding: 0;
    border-radius: 0;
  }

  .content-box {
    padding: 32px 16px;
    border-radius: 0;
  }

  .about-btn-wrap .bz-primary-btn,
  .about-btn-wrap .bz-transparent-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Hero CTAs sit side by side as two equal halves */
  .hero-content .hero-btn-wrap {
    flex-wrap: nowrap;
  }

  .hero-content .hero-btn-wrap .bz-primary-btn {
    flex: 1 1 0;
    justify-content: center;
    padding: 0 16px;
    white-space: nowrap;
  }

  .about-btn-wrap,
  .g21-about-home .about-btn-wrap,
  .service-details-content .about-btn-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .about-img-wrap,
  .about-img-wrap .about-img {
    height: auto;
  }

  .g21-platform-card,
  .g21-list-box,
  .g21-job-card {
    padding: 22px 18px;
  }

  .g21-job-card .bz-primary-btn {
    width: 100%;
    justify-content: center;
  }

  .contact-content {
    padding: 24px 16px;
  }

  .contact-content .contact-list .list-item {
    grid-template-columns: 56px 1fr;
    grid-gap: 14px;
  }

  .contact-content .contact-list .list-item .icon {
    width: 48px;
    height: 48px;
  }

  .sidebar-area {
    width: min(100vw, 340px);
    padding: 48px 18px 32px;
  }

  .copyright-content {
    text-align: center;
    row-gap: 12px;
  }

  .copyright-content p.g21-footer-credit {
    text-align: center;
  }

  .footer-widget .footer-list li a {
    font-size: 16px;
    padding-left: 22px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .contact-content .contact-list .list-item .content a,
  .g21-platform-card .g21-brand-list li a {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .g21-industries-page-card {
    border-radius: 12px;
  }

  .bz-primary-btn,
  .bz-transparent-btn {
    min-height: 48px;
  }
}

/* Phones */
@media (max-width: 575px) {
  section p,
  .g21-eco-card p,
  .hero-section .hero-content .section-heading {
    text-align: left;
    hyphens: manual;
  }

  .container,
  .container-2 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .footer-widget .footer-list li a {
    font-size: 15px;
    padding-left: 18px;
  }

  .footer-widget .footer-list li a:before {
    font-size: 12px;
  }

  #scroll-percentage {
    width: 48px;
    height: 48px;
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
  }

  .g21-industries-grid {
    grid-template-columns: 1fr;
  }

  .g21-client-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .g21-platform-intro {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }

  .g21-platform-intro__media {
    width: 100%;
    height: 180px;
  }

  .g21-jump-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .g21-jump-nav a {
    white-space: nowrap;
    min-height: 40px;
  }

  .g21-highlight-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 16px;
  }

  .g21-vertical {
    padding: 18px 14px;
  }

  .g21-vertical__head {
    align-items: flex-start;
  }

  .g21-vertical__icon {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  /* Counters: compact 2×2 grid — icon above figure, centred */
  .g21-counter-home.pt-120 {
    padding-top: 44px;
  }

  .g21-counter-home.pb-120 {
    padding-bottom: 44px;
  }

  .counter-item {
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    grid-gap: 10px;
    height: 100%;
    padding: 16px 8px;
    text-align: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  .counter-item .icon,
  .counter-item .icon .icon-inner,
  .counter-item .icon .shape {
    max-width: 52px;
    width: 52px;
    height: 52px;
  }

  .counter-item .icon .icon-inner img {
    max-width: 26px;
  }

  .counter-item .counter-content .title {
    font-size: 24px;
  }

  .counter-item .counter-content p {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.02em;
  }

  .form-group.row {
    margin-left: 0;
    margin-right: 0;
  }

  .form-group.row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }

  .content-tab .nav-tabs .nav-link {
    width: 100%;
    text-align: center;
  }

  .g21-sidebar-cta {
    padding: 28px 18px;
  }

  .g21-sidebar-cta .number {
    font-size: 18px;
  }
}

/* Extra-small phones */
@media (max-width: 399px) {
  .container,
  .container-2 {
    padding-left: 14px;
    padding-right: 14px;
  }

  .header .primary-header-inner .header-logo img {
    max-width: 62px;
    max-height: 62px;
  }

  .hero-section .hero-content .section-heading .section-title {
    font-size: 24px;
  }

  .hero-content .hero-btn-wrap {
    gap: 8px;
  }

  .hero-content .hero-btn-wrap .bz-primary-btn {
    padding: 0 10px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .page-header-content .title {
    font-size: 21px;
  }
}

/* Short landscape phones / foldables */
@media (max-width: 991px) and (max-height: 500px) {
  .hero-section {
    min-height: auto;
    padding: 20px 0 12px;
  }

  .header {
    position: sticky !important;
  }
}

/* Safe areas (notched phones) */
@supports (padding: max(0px)) {
  .header .primary-header-inner {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .footer-section,
  .copyright-area {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}