/* =========================================================
   GULF MAARK GLOBAL DESIGN SYSTEM V20
   Final typography hierarchy + spacing lock
   Loaded LAST on every page so page-specific legacy rules
   cannot override the approved global scale.
   ========================================================= */
:root {
  --gm-type-hero: clamp(54px, 4.15vw, 64px);
  --gm-type-section: clamp(36px, 2.85vw, 46px);
  --gm-type-row: clamp(32px, 2.45vw, 40px);
  --gm-type-card: clamp(26px, 2vw, 34px);
  --gm-type-body: 16px;
  --gm-type-eyebrow: 11px;
  --gm-space-section: clamp(78px, 5.4vw, 98px);
  --gm-space-hero-top: clamp(68px, 5.4vw, 88px);
  --gm-space-hero-bottom: clamp(76px, 5.8vw, 96px);
}

/* ---------- GLOBAL HERO TYPE: EXACT SAME SCALE ---------- */
html body .hero.hero--desktop h1,
html body .gm-hero.gm-hero--about .gm-hero__title,
html body .gm-hero.gm-hero--solutions .gm-hero__title,
html body .gm-hero.gm-hero--industries .gm-hero__title,
html body .gm-hero.gm-hero--services .gm-hero__title,
html body .gm-hero.gm-hero--products .gm-hero__title,
html body .gm-hero.gm-hero--contact .gm-hero__title {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: var(--gm-type-hero) !important;
  font-weight: 600 !important;
  line-height: .94 !important;
  letter-spacing: -.052em !important;
}

/* Inner-page hero geometry stays on the approved 40 / 60 system */
@media (min-width:1081px) {
  html body .gm-hero .gm-hero__grid,
  html body .hero.hero--desktop .hero__inner {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
    gap: clamp(44px, 4vw, 72px) !important;
    align-items: center !important;
  }
  html body .gm-hero {
    padding-top: var(--gm-space-hero-top) !important;
    padding-bottom: var(--gm-space-hero-bottom) !important;
  }
}

/* ---------- EYEBROWS ---------- */
html body .eyebrow,
html body .gm-hero__eyebrow {
  font-size: var(--gm-type-eyebrow) !important;
  line-height: 1.2 !important;
  letter-spacing: .16em !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

/* ---------- NORMAL SECTION H2 ----------
   Every content-section H2 is deliberately smaller than Hero H1. */
html body main > section:not(.gm-hero):not(.hero):not(.hero-mobile):not(.capability-strip) h2,
html body .partners__head .section-title,
html body .about-partners__head .section-title,
html body .product-categories__head h2,
html body .product-library__panel h2,
html body .solutions-feature__content h2,
html body .solutions-cta__copy h2,
html body .industries-cta__copy h2,
html body .product-cta__panel h2,
html body .cta__panel h2 {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: var(--gm-type-section) !important;
  font-weight: 600 !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}

/* ---------- CONTENT ROW HEADINGS ---------- */
html body .solution-row__title,
html body .service-row__content h2,
html body .service-row h2,
html body .industry-row h3 {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: var(--gm-type-row) !important;
  font-weight: 600 !important;
  line-height: 1.04 !important;
  letter-spacing: -.042em !important;
}

/* Smaller local/card headings should never compete with page headings */
html body .contact-location h2 {
  font-size: var(--gm-type-card) !important;
  line-height: 1.03 !important;
}

/* ---------- BODY COPY ---------- */
html body .gm-hero__lead,
html body .hero--desktop .hero__lead,
html body .section-copy,
html body .product-categories__head > p,
html body .product-library__side p,
html body .about-intro__copy p,
html body .solutions-intro__copy p,
html body .service-row__lead,
html body .industry-row__content > p {
  font-size: var(--gm-type-body) !important;
  line-height: 1.68 !important;
}

/* ---------- SECTION RHYTHM ---------- */
html body main > section:not(.gm-hero):not(.hero):not(.hero-mobile):not(.capability-strip) {
  padding-top: var(--gm-space-section) !important;
  padding-bottom: var(--gm-space-section) !important;
}

/* ---------- RESPONSIVE SCALE ---------- */
@media (min-width:1081px) and (max-width:1440px) {
  :root {
    --gm-type-hero: clamp(52px, 4vw, 58px);
    --gm-type-section: clamp(34px, 2.9vw, 42px);
    --gm-type-row: clamp(30px, 2.55vw, 36px);
    --gm-type-card: 28px;
    --gm-space-section: clamp(72px, 5vw, 88px);
    --gm-space-hero-top: clamp(62px, 5vw, 76px);
    --gm-space-hero-bottom: clamp(68px, 5.4vw, 84px);
  }
}

@media (min-width:768px) and (max-width:1080px) {
  :root {
    --gm-type-hero: clamp(44px, 5.2vw, 52px);
    --gm-type-section: clamp(34px, 4vw, 40px);
    --gm-type-row: clamp(30px, 3.6vw, 36px);
    --gm-type-card: 28px;
    --gm-type-body: 15.5px;
    --gm-space-section: 68px;
  }
  html body .gm-hero .gm-hero__grid { grid-template-columns: 1fr !important; }
  html body .gm-hero { padding-top: 54px !important; padding-bottom: 68px !important; }
}

@media (max-width:767px) {
  :root {
    --gm-type-hero: clamp(34px, 9vw, 40px);
    --gm-type-section: clamp(29px, 7.8vw, 34px);
    --gm-type-row: clamp(27px, 7vw, 32px);
    --gm-type-card: 26px;
    --gm-type-body: 15px;
    --gm-type-eyebrow: 10px;
    --gm-space-section: 56px;
  }
  html body .hero-mobile__title,
  html body .gm-hero.gm-hero--about .gm-hero__title,
  html body .gm-hero.gm-hero--solutions .gm-hero__title,
  html body .gm-hero.gm-hero--industries .gm-hero__title,
  html body .gm-hero.gm-hero--services .gm-hero__title,
  html body .gm-hero.gm-hero--products .gm-hero__title,
  html body .gm-hero.gm-hero--contact .gm-hero__title {
    font-size: var(--gm-type-hero) !important;
    line-height: .94 !important;
    letter-spacing: -.05em !important;
  }
  html body .gm-hero { padding-top: 40px !important; padding-bottom: 54px !important; }
}

/* =========================================================
   GULF MAARK V21 — FINAL TARGETED CORRECTIONS
   1) Home technology partner cards: pure white surface
   2) About eyebrow lock
   3) Home CTA button contrast
   4) Product category card heading scale
   5) Home hero card positioning + subtle floating motion
   ========================================================= */

/* 1. HOME — technology ecosystem logo cards */
html body.page-home .partners .partner-card {
  background: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  border-color: rgba(17,18,20,.10) !important;
  box-shadow: 0 10px 28px rgba(17,18,20,.035) !important;
}
html body.page-home .partners .partner-card img {
  filter: grayscale(1);
  opacity: .76;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
html body.page-home .partners .partner-card:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.025);
}

/* 2. ABOUT — every eyebrow uses the exact global eyebrow scale */
html body .gm-hero--about .eyebrow,
html body .about-intro .eyebrow,
html body .about-network .eyebrow,
html body .about-approach .eyebrow,
html body .about-scope .eyebrow,
html body .about-values .eyebrow,
html body .about-partners .eyebrow {
  font-size: var(--gm-type-eyebrow) !important;
  line-height: 1.2 !important;
  letter-spacing: .16em !important;
  font-weight: 800 !important;
}

/* 3. HOME CTA — strong white + black button pair on red gradient */
html body.page-home .cta .cta__actions .button:first-child {
  background: #ffffff !important;
  color: #111214 !important;
  border-color: #ffffff !important;
}
html body.page-home .cta .cta__actions .button:first-child:hover {
  background: #111214 !important;
  color: #ffffff !important;
  border-color: #111214 !important;
}
html body.page-home .cta .cta__actions .button:last-child {
  background: #111214 !important;
  color: #ffffff !important;
  border-color: #111214 !important;
}
html body.page-home .cta .cta__actions .button:last-child:hover {
  background: #ffffff !important;
  color: #111214 !important;
  border-color: #ffffff !important;
}

/* 4. PRODUCTS — category-card titles step down from section headings */
html body .product-category h3 {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: var(--gm-type-card) !important;
  line-height: 1.00 !important;
  letter-spacing: -.042em !important;
  font-weight: 600 !important;
}

/* 5. HOME HERO — badges stay inside the image with controlled padding */
@media (min-width:1081px) {
  html body.page-home .hero__location-card {
    left: 42px !important;
    top: 62px !important;
  }
  html body.page-home .hero__badge--xl2 {
    top: 122px !important;
  }

  /* Individual translate property coexists with GSAP's transform. */
  html body.page-home .hero__badge--xl2 {
    animation: gmFloatXL2 5.4s ease-in-out 1.0s infinite;
    will-change: translate;
  }
  html body.page-home .hero__card--dxl {
    animation: gmFloatDXL 6.2s ease-in-out .35s infinite;
    will-change: translate;
  }
}

@media (min-width:768px) and (max-width:1080px) {
  html body.page-home .hero__location-card {
    left: 30px !important;
    top: 54px !important;
    color:#fff !important;
    background:var(--gm-red-gradient) !important;
    border-color:rgba(255,255,255,.18) !important;
  }
  html body.page-home .hero__location-card > span { background:#fff !important; }
  html body.page-home .hero__location-card strong { color:#fff !important; }
  html body.page-home .hero__location-card small { color:rgba(255,255,255,.82) !important; }
  html body.page-home .hero__badge--xl2 {
    top: 94px !important;
    animation: gmFloatXL2 5.4s ease-in-out 1.0s infinite;
    will-change: translate;
  }
  html body.page-home .hero__card--dxl {
    animation: gmFloatDXL 6.2s ease-in-out .35s infinite;
    will-change: translate;
  }
}

@media (max-width:767px) {
  html body.page-home .hero-mobile__location {
    left: 16px !important;
    top: 34px !important;
  }
  html body.page-home .hero-mobile__xl2-card {
    top: 72px !important;
    animation: gmFloatXL2Mobile 5.2s ease-in-out .9s infinite;
    will-change: translate;
  }
  html body.page-home .hero-mobile__dxl {
    animation: gmFloatDXLMobile 6s ease-in-out .25s infinite;
    will-change: translate;
  }
  html body .product-category h3 {
    font-size: 26px !important;
  }
}

@keyframes gmFloatXL2 {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
@keyframes gmFloatDXL {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 7px; }
}
@keyframes gmFloatXL2Mobile {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}
@keyframes gmFloatDXLMobile {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html body.page-home .hero__badge--xl2,
  html body.page-home .hero__card--dxl,
  html body.page-home .hero-mobile__xl2-card,
  html body.page-home .hero-mobile__dxl {
    animation: none !important;
    translate: 0 0 !important;
  }
}