@charset "UTF-8";
/* ===========================================================================
   GGIS Malaysia — GreenGarden Integrated Services
   Quiet-luxury landscape studio. Warm ivory canvas, deep forest ink.

   Structure of this file:
     1. Tokens          design variables (mirror Divi Design Variables)
     2. Reset & base
     3. Primitives      container, section, eyebrow, rules, figures, buttons
     4. Motion hooks    styles the .ggis-* motion layer depends on
     5. Sections        navbar, hero, trust, services, usp, synergy, cta, footer
     6. Responsive

   Divi port: paste 1–4 into the child theme stylesheet; sections in 5 map to
   Divi modules by class name (see README.md). No inline styles anywhere.
=========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  --ggis-green-50: #f4f7f3;
  --ggis-green-100: #e4ede2;
  --ggis-green-200: #c9dbc6;
  --ggis-green-300: #a3c09f;
  --ggis-green-400: #7aa077;
  --ggis-green-500: #587f56;
  --ggis-green-600: #40653f;
  --ggis-green-700: #345233;
  --ggis-green-800: #283f27; /* brand */
  --ggis-green-900: #1e3320;
  --ggis-green-950: #122114;
  --ggis-canvas: #faf7f0;
  --ggis-canvas-bright: #fdfbf7;
  --ggis-canvas-tint: #f3eee3;
  --ggis-ink: #171b16;
  --ggis-ink-soft: #3d423c;
  --ggis-ink-mid: #6b7066;
  --ggis-ink-faint: #9aa095;
  --ggis-gold: #b99755;
  --ggis-gold-deep: #8f6f2e;
  --ggis-gold-soft: #ebdfc2;
  --ggis-line: #e2dccc;
  --ggis-line-soft: #ede8da;

  --ggis-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ggis-font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid type scale — weight restraint is the elegance, so sizes carry it */
  --fs-display-2xl: clamp(3.25rem, 1.2rem + 7.4vw, 8rem);
  --fs-display-xl: clamp(2.75rem, 1.4rem + 4.6vw, 5.75rem);
  --fs-display-lg: clamp(2.15rem, 1.3rem + 3vw, 4rem);
  --fs-display: clamp(1.75rem, 1.2rem + 1.9vw, 2.85rem);
  --fs-title-lg: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem);
  --fs-title: 1.25rem;
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body-lg: 1.0625rem;
  --fs-body: 0.9375rem;
  --fs-meta: 0.8125rem;
  --fs-caption: 0.75rem;
  --fs-micro: 0.6875rem;

  --ggis-site: 112.5rem; /* 1800px frame */
  --ggis-radius-frame: 2.5rem;
  --ggis-shadow-frame: 0 24px 80px -24px rgba(18, 33, 20, 0.35);
  --ggis-header-h: 5rem;
}

/* --- 2. Reset & base ----------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--ggis-canvas);
  color: var(--ggis-ink);
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Scoped deliberately, not a blanket `ul` reset: in the WordPress build this
   stylesheet loads site-wide, and stripping bullets from every list would
   break Divi's Text and Blurb modules. */
.ggis-navpanel ul,
.ggis-footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--ggis-green-800);
  color: var(--ggis-canvas);
}

:focus-visible {
  outline: 2px solid var(--ggis-gold);
  outline-offset: 3px;
}

/* Lenis smooth-scroll required styles */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* --- 3. Primitives ------------------------------------------------------- */

.ggis-container {
  width: 100%;
  max-width: var(--ggis-site);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.ggis-section {
  padding-block: 6rem;
}

.ggis-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Display type — never above 560 weight */
.ggis-display,
.ggis-display-lg,
.ggis-display-xl {
  font-family: var(--ggis-font-display);
  font-weight: 380;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.ggis-display-xl {
  font-size: var(--fs-display-xl);
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.ggis-display-lg {
  font-size: var(--fs-display-lg);
  line-height: 1.08;
}

.ggis-display {
  font-size: var(--fs-display);
  line-height: 1.15;
}

.ggis-display em,
.ggis-display-lg em,
.ggis-display-xl em {
  font-style: italic;
}

.ggis-eyebrow {
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ggis-ink-mid);
}

.ggis-eyebrow--light {
  color: rgba(250, 247, 240, 0.6);
}

.ggis-meta {
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-meta);
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ggis-ink-mid);
}

.ggis-lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ggis-ink-mid);
}

.ggis-serial {
  font-family: var(--ggis-font-display);
  font-size: var(--fs-meta);
  font-style: italic;
  color: var(--ggis-gold-deep);
}

.ggis-serial--light {
  color: var(--ggis-gold);
}

/* Section heading: serial + eyebrow + drawn hairline, then oversized serif */
.ggis-heading__top {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
}

.ggis-heading__rule {
  flex: 1;
  height: 1px;
  background: var(--ggis-line);
}

.ggis-heading__rule--light {
  background: rgba(250, 247, 240, 0.15);
}

.ggis-heading__title {
  margin-top: 2rem;
  max-width: 20ch;
}

/* Figures — every image sits in a locked aspect wrapper (no CLS) */
.ggis-figure {
  position: relative;
  overflow: hidden;
  background: var(--ggis-canvas-tint);
}

.ggis-figure--4x5 {
  aspect-ratio: 4 / 5;
}

.ggis-figure--3x2 {
  aspect-ratio: 3 / 2;
}

.ggis-figure--16x10 {
  aspect-ratio: 16 / 10;
}

.ggis-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ggis-figure--rounded {
  border-radius: 1.25rem;
}

/* Viewport-capped frame — add alongside a ratio modifier.
   Ratio sizing follows the column WIDTH, so on a wide-but-short screen (the
   client works at 1366x768) a 4/5 or 16/9 frame can grow taller than the whole
   viewport. This caps the frame against viewport height and lets object-fit do
   the cropping; the ratio still drives sizing whenever it already fits. Phones
   are narrow and tall, so it only applies from 48rem up. Tune per context with
   --ggis-fig-cap. */
@media (min-width: 48rem) {
  .ggis-figure--vh {
    max-height: var(--ggis-fig-cap, 52vh);
  }
}

/* Pill buttons — the only button shape in the system */
.ggis-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.ggis-btn svg {
  transition: transform 0.3s ease;
}

.ggis-btn:hover svg {
  transform: translate(2px, -2px);
}

.ggis-btn--solid {
  background: var(--ggis-green-800);
  color: var(--ggis-canvas);
}

.ggis-btn--solid:hover {
  background: var(--ggis-green-950);
}

.ggis-btn--solid-light {
  background: var(--ggis-canvas);
  color: var(--ggis-green-950);
}

.ggis-btn--solid-light:hover {
  background: var(--ggis-canvas-tint);
}

.ggis-btn--ghost {
  border-color: var(--ggis-line);
  color: var(--ggis-ink);
}

.ggis-btn--ghost:hover {
  border-color: var(--ggis-green-700);
  color: var(--ggis-green-800);
}

.ggis-btn--ghost-light {
  border-color: rgba(250, 247, 240, 0.3);
  color: var(--ggis-canvas);
}

.ggis-btn--ghost-light:hover {
  border-color: rgba(250, 247, 240, 0.7);
}

/* Inline text link with arrow */
.ggis-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ggis-green-800);
  transition: color 0.3s ease;
}

.ggis-link svg {
  transition: transform 0.3s ease;
}

.ggis-link:hover svg {
  transform: translate(3px, -3px);
}

.ggis-link--light {
  color: var(--ggis-gold-soft);
}

.ggis-link--light:hover {
  color: var(--ggis-canvas);
}

/* --- 4. Motion hooks -----------------------------------------------------
   Styles the class-driven GSAP layer relies on. Keep names in sync with
   assets/js/ggis-motion.js — the Divi build assigns the same classes.       */

.ggis-parallax {
  overflow: hidden;
}

.ggis-parallax img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ggis-split .line,
.ggis-hero-headline .line {
  will-change: transform;
}

.ggis-ghost {
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  text-align: center;
  font-family: var(--ggis-font-display);
  font-weight: 420;
  font-size: 15vw;
  line-height: 0.78;
  color: rgba(250, 247, 240, 0.05);
}

/* --- 5. Sections --------------------------------------------------------- */

/* 5.1 Navbar — transparent over the hero, solid ivory once scrolled past */

.ggis-navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  color: var(--ggis-canvas);
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

.ggis-navbar.is-scrolled {
  background: rgba(250, 247, 240, 0.95);
  border-bottom-color: var(--ggis-line);
  color: var(--ggis-ink);
  backdrop-filter: blur(6px);
}

.ggis-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--ggis-header-h);
}

.ggis-brand {
  display: flex;
  align-items: center;
  line-height: 1;
}

.ggis-brand__mark {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.ggis-brand__name {
  font-family: var(--ggis-font-display);
  font-size: 1.35rem;
  font-weight: 480;
  letter-spacing: -0.01em;
}

.ggis-brand__suffix {
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, 0.7);
}

/* Brand lockup: the light logo rides the transparent bar over the hero; the
   ink logo takes over once the bar turns ivory (scrolled, or light-hero pages). */
.ggis-brand__logo {
  display: block;
  height: 2.75rem;
  width: auto;
}

.ggis-brand__logo--ink {
  display: none;
}

.is-scrolled .ggis-brand__logo--light {
  display: none;
}

.is-scrolled .ggis-brand__logo--ink {
  display: block;
}

.ggis-nav {
  display: none;
  align-items: center;
  gap: 2.25rem;
}

.ggis-nav a {
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.ggis-nav a:hover {
  opacity: 0.55;
}

/* Services dropdown — chevron trigger + hover/focus menu (desktop) */
.ggis-nav__group {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.ggis-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.ggis-nav__chevron {
  transition: transform 0.35s ease;
}
.ggis-nav__group:hover .ggis-nav__chevron,
.ggis-nav__group:focus-within .ggis-nav__chevron {
  transform: rotate(180deg);
}
/* invisible bridge so the pointer can cross the gap without closing the menu */
.ggis-nav__group::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 1rem;
}
.ggis-nav__menu {
  position: absolute;
  top: 100%;
  left: -0.85rem;
  margin-top: 0.9rem;
  min-width: 16rem;
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem;
  background: var(--ggis-canvas-bright);
  border: 1px solid var(--ggis-line);
  border-radius: 1rem;
  box-shadow: var(--ggis-shadow-card, 0 22px 48px -26px rgba(18, 33, 20, 0.45));
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
  z-index: 60;
}
.ggis-nav__group:hover .ggis-nav__menu,
.ggis-nav__group:focus-within .ggis-nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ggis-nav__menu a {
  display: block;
  padding: 0.7rem 0.9rem;
  border-radius: 0.6rem;
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 1;
  color: var(--ggis-ink);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ggis-nav__menu a:hover {
  background: var(--ggis-canvas-tint);
  color: var(--ggis-green-800);
  opacity: 1;
}
/* Nested submenu — Integrated FM flies out to its two pillars */
.ggis-nav__subgroup {
  position: relative;
}
/* Needs higher specificity than `.ggis-nav__menu a { display: block }` (0,1,1)
   or the block <svg> chevron drops onto its own line below the label. */
.ggis-nav__menu a.ggis-nav__subtrigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ggis-nav__subchevron {
  flex-shrink: 0;
  margin-left: 0.75rem;
  transition: transform 0.3s ease;
}
.ggis-nav__subgroup:hover .ggis-nav__subchevron,
.ggis-nav__subgroup:focus-within .ggis-nav__subchevron {
  transform: translateX(2px);
}
.ggis-nav__submenu {
  position: absolute;
  top: -0.6rem;
  right: 100%;
  margin-right: 0.45rem;
  min-width: 15rem;
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem;
  background: var(--ggis-canvas-bright);
  border: 1px solid var(--ggis-line);
  border-radius: 1rem;
  box-shadow: var(--ggis-shadow-card, 0 22px 48px -26px rgba(18, 33, 20, 0.45));
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.ggis-nav__submenu::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -0.5rem;
  width: 0.5rem;
}
.ggis-nav__subgroup:hover .ggis-nav__submenu,
.ggis-nav__subgroup:focus-within .ggis-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Mobile panel — pillars nest under Integrated FM */
.ggis-navpanel__sub2 {
  margin-top: 0.8rem;
  margin-left: 0.75rem;
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  border-left: 1px solid var(--ggis-line-soft);
}
.ggis-navpanel__sub2 a {
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
}

/* Services sub-list inside the mobile panel */
.ggis-navpanel__sub {
  margin-top: 0.9rem;
  margin-left: 0.25rem;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  border-left: 1px solid var(--ggis-line);
}
.ggis-navpanel__sub a {
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
}

.ggis-navbar__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Tablet nav fix: the hamburger hides at 48rem but the desktop nav only appears
   at 64rem, so 768-1023px had NO way to open the menu. Keep the mobile hamburger
   + slide-out panel working through that band (desktop nav still takes over at
   64rem, and .ggis-navpanel.is-open out-specifies the 48rem display:none). */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .ggis-navtoggle { display: inline-flex !important; }
  .ggis-navpanel.is-open { display: block !important; }
}

.ggis-navbar__phone {
  display: none;
  font-size: var(--fs-meta);
  opacity: 0.85;
}

/* Below the desktop breakpoint the pill would crowd out the menu button —
   the same call to action lives inside the panel instead. */
.ggis-navbar__cta {
  display: none;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: rgba(250, 247, 240, 0.15);
  box-shadow: inset 0 0 0 1px rgba(250, 247, 240, 0.4);
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.ggis-navbar__cta:hover {
  background: var(--ggis-canvas);
  color: var(--ggis-green-950);
}

.is-scrolled .ggis-navbar__cta {
  background: var(--ggis-green-800);
  color: var(--ggis-canvas);
  box-shadow: none;
}

.is-scrolled .ggis-navbar__cta:hover {
  background: var(--ggis-green-950);
}

.ggis-navtoggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  border: 0;
  background: none;
  cursor: pointer;
}

.ggis-navtoggle span {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.ggis-navtoggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.ggis-navtoggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.ggis-navtoggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.ggis-navpanel {
  display: none;
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--ggis-line-soft);
  background: var(--ggis-canvas);
  color: var(--ggis-ink);
}

.ggis-navpanel.is-open {
  display: block;
}

.ggis-navpanel ul {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ggis-navpanel a {
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title);
  font-weight: 420;
}

.ggis-navpanel__cta {
  margin-top: 2rem;
}

.ggis-navpanel__cta a {
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-meta);
}

/* 5.2 Hero — two full-bleed photographic layers, slow crossfade */

.ggis-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ggis-green-950);
  color: var(--ggis-canvas);
}

.ggis-hero__media {
  position: absolute;
  inset: 0;
}

.ggis-hero__layer {
  position: absolute;
  inset: 0;
}

.ggis-hero__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Second frame is decorative: the crossfade reveals it. Without JS (or under
   reduced motion) the first frame simply stays — nothing is lost. */
.ggis-hero__layer--alt {
  opacity: 0;
}

/* Darkest at the foot (where the copy sits), with a lighter wash at the very
   top so the transparent navbar stays legible over bright foliage. */
.ggis-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(18, 33, 20, 0.55) 0%,
    rgba(18, 33, 20, 0.2) 20%,
    rgba(18, 33, 20, 0.44) 46%,
    rgba(18, 33, 20, 0.7) 70%,
    rgba(18, 33, 20, 0.92) 100%
  );
}

.ggis-hero__content {
  position: relative;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 9rem 3rem;
}

/* Sits over photography rather than a flat panel, so it carries more weight
   than the standard light eyebrow. */
/* Chip/pill treatment so the eyebrow stays legible over any hero frame
   (the "X Nampak" fix) — a solid brand-green pill with white text. */
.ggis-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 1.75rem;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  background: var(--ggis-green-800);
  color: var(--ggis-canvas);
}

/* A long headline needs a gentler floor than the display-xl token so it does
   not run to six lines on a phone; the ceiling is unchanged. */
.ggis-hero__title {
  max-width: 16ch;
  font-size: clamp(2.15rem, 1.1rem + 4.6vw, 5.75rem);
  font-weight: 360;
  color: var(--ggis-canvas);
}

/* Reveal line-masks (GSAP SplitText mask:'lines') are `overflow: clip` at the
   line-box, but the glyphs are taller — so descenders (g, y, p) get shaved
   ("wording kena potong"). Extend each mask's clip region down with padding and
   pull it back with a matching negative margin, so descenders show and line
   spacing is unchanged. Targets .line-mask, so it fixes every masked heading. */
.line-mask {
  padding-bottom: 0.25em;
  margin-bottom: -0.25em;
}

.ggis-hero__support {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2.5rem;
}

.ggis-hero__support p {
  max-width: 54ch;
  font-size: var(--fs-lead);
  color: rgba(250, 247, 240, 0.85);
}

.ggis-hero__cue {
  flex-shrink: 0;
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, 0.6);
}

.ggis-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.ggis-hero__metastrip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 247, 240, 0.25);
}

.ggis-hero__metastrip span {
  font-size: var(--fs-meta);
  color: rgba(250, 247, 240, 0.75);
}

/* 5.3 Trust strip — four quick proofs on the tint band */

.ggis-trust {
  background: var(--ggis-canvas-tint);
  border-block: 1px solid var(--ggis-line);
  padding-block: 3.5rem;
}

.ggis-trust__grid {
  display: grid;
  gap: 2.5rem;
}

.ggis-trust__item {
  padding-top: 1.5rem;
  border-top: 1px solid var(--ggis-line);
}

.ggis-trust__figure {
  font-family: var(--ggis-font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ggis-green-900);
}

.ggis-trust__label {
  margin-top: 0.75rem;
}

.ggis-trust__note {
  margin-top: 0.5rem;
  max-width: 28ch;
  font-size: var(--fs-body);
  color: var(--ggis-ink-mid);
}

/* ===== Trust strip — stat columns (icon + label, figure, note) ===== */
.ggis-statcard {
  display: flex;
  flex-direction: column;
}

.ggis-statcard__top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.25rem;
}

.ggis-statcard__icon {
  display: inline-flex;
  color: var(--ggis-green-700);
}

.ggis-statcard__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.ggis-statcard__label {
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ggis-ink);
}

.ggis-statcard__figure {
  font-family: var(--ggis-font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ggis-green-900);
}

.ggis-statcard__sub {
  margin-top: 0.6rem;
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ggis-ink-mid);
}

.ggis-statcard__note {
  margin-top: 0.65rem;
  max-width: 28ch;
  font-size: var(--fs-body);
  color: var(--ggis-ink-mid);
}

/* 5.4 Services — three photo cards carry the section */

.ggis-services {
  background: var(--ggis-canvas);
}

.ggis-services__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.ggis-services__grid {
  display: grid;
  gap: 3rem 0;
  margin-top: 4.5rem;
  padding-inline: 0;
}

/* Full-bleed connected band: images run edge-to-edge with no gaps; captions
   sit inside a small em-based margin (scales with the text, not the root) so
   they stay readable on narrow desktop columns and never touch the seams. */
.ggis-services__grid .ggis-card__body {
  padding-inline: 2em;
}

/* The head spans the full-bleed band (no centred container cap) and is centred
   over it; the title runs on one line on wide viewports. */
.ggis-services > .ggis-container {
  max-width: none;
  padding-inline: 2em;
}

.ggis-services .ggis-heading__top {
  justify-content: center;
}

.ggis-services .ggis-heading__rule {
  display: none;
}

.ggis-services .ggis-heading__title {
  max-width: none;
  margin-inline: auto;
}

/* Image height keyed to the viewport height, not the column width — keeps the
   band from getting too tall on short screens (e.g. 1366×768). vh-driven, with
   min/max rails so it never gets absurd on very short or very tall viewports. */
.ggis-services__grid .ggis-figure {
  height: clamp(220px, 34vh, 380px);
  aspect-ratio: auto;
}

.ggis-card__body {
  margin-top: 1.75rem;
}

.ggis-card__title {
  margin-top: 0.75rem;
  max-width: 18ch;
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title-lg);
  font-weight: 440;
  line-height: 1.25;
}

.ggis-card__text {
  margin-top: 0.75rem;
  max-width: 38ch;
  font-size: var(--fs-body);
  color: var(--ggis-ink-mid);
}

.ggis-card__link {
  margin-top: 1.25rem;
}

/* 5.5 USP — three hairline-separated columns */

.ggis-usp {
  background: var(--ggis-canvas);
  border-top: 1px solid var(--ggis-line);
}

.ggis-usp__grid {
  display: grid;
  gap: 3rem;
  margin-top: 4.5rem;
}

.ggis-usp__col {
  padding-top: 2rem;
  border-top: 1px solid var(--ggis-line);
}

.ggis-usp__icon {
  color: var(--ggis-green-700);
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: 1rem;
  margin-bottom: 2.25rem;
}

.ggis-usp__title {
  margin-top: 1.5rem;
  max-width: 20ch;
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title-lg);
  font-weight: 440;
  line-height: 1.25;
}

.ggis-usp__text {
  margin-top: 1rem;
  max-width: 40ch;
  font-size: var(--fs-body);
  color: var(--ggis-ink-mid);
}

/* 5.6 Regional synergy — the page's single dark band */

.ggis-synergy {
  position: relative;
  overflow: hidden;
  background: var(--ggis-green-950);
  color: var(--ggis-canvas);
}

/* Dotted world map — texture only. Held low in opacity and faded out at the
   edges so it never competes with the type or the two discs. */
.ggis-synergy::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(210%, 132rem);
  aspect-ratio: 360 / 140;
  transform: translate(-50%, -50%);
  background: url("../img/world-dots.svg") center / contain no-repeat;
  opacity: 0.06;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 52%, transparent 86%);
  mask-image: radial-gradient(ellipse at center, #000 52%, transparent 86%);
  pointer-events: none;
}

.ggis-synergy > .ggis-container {
  position: relative;
  z-index: 1;
}

/* Centred composition: the section reads as one symmetrical artwork. */
.ggis-synergy__head {
  max-width: none;
  text-align: center;
}

.ggis-synergy .ggis-heading__top {
  justify-content: center;
}

.ggis-synergy .ggis-heading__rule {
  display: none;
}

.ggis-synergy__title {
  max-width: none;
  margin-inline: auto;
  color: var(--ggis-canvas);
}

.ggis-synergy__map {
  display: grid;
  gap: 2.5rem;
  margin-top: 4.5rem;
  align-items: center;
  justify-items: center;
}

/* Each disc is ringed by the same slow dashed orbit as the centre node, so all
   three circles share one motion language. The ring sits OUTSIDE the disc (the
   disc clips its contents) and is centred without a transform, leaving the
   transform free for the rotation. */
.ggis-synergy__orb {
  position: relative;
  width: 100%;
  text-align: center;
}

/* The image sits INSIDE the orbiting ring. The ring occupies the outer circle
   footprint (where the connector wires meet) and the photo is inset from it, so
   rings can never collide with each other or cross a neighbouring image. */
.ggis-synergy__discwrap {
  position: relative;
  width: calc(min(100%, 26rem) - 4rem);
  margin-inline: auto;
  aspect-ratio: 1;
}

.ggis-synergy__discwrap::before {
  content: "";
  position: absolute;
  inset: -2rem;
  border-radius: 50%;
  border: 1px dashed rgba(185, 151, 85, 0.38);
  pointer-events: none;
}

/* Per-image crop focus: a circular crop plus the parallax zoom was cutting the
   Petronas spires off the top and crowding the Marina Bay SkyPark against the
   edge. Each landmark is framed on its own subject rather than dead centre. */
.ggis-synergy__orb--a .ggis-synergy__disc img {
  object-position: 46% 34%;
}

.ggis-synergy__orb--b .ggis-synergy__disc img {
  object-position: 50% 26%;
}

/* The two big discs — circular crops of the regional photography. */
/* Transparent ground: photos cover it anyway, and a line-art SVG needs the
   band showing through or its light strokes sit on the tint placeholder. */
.ggis-synergy__disc {
  background: none;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.ggis-synergy__place {
  margin-top: 1.75rem;
}

.ggis-synergy__place-name {
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title-lg);
  font-weight: 440;
  color: var(--ggis-canvas);
}

.ggis-synergy__place-note {
  margin-top: 0.35rem;
  font-size: var(--fs-body);
  color: rgba(250, 247, 240, 0.6);
}

/* Connector: hairline + centre node. Vertical on mobile, horizontal above lg */
.ggis-synergy__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.ggis-synergy__wire {
  width: 0;
  height: 3rem;
  border-left: 1px dashed rgba(250, 247, 240, 0.35);
}

/* Centre node: the leaf mark in a circle, ringed by a slow dashed orbit. */
.ggis-synergy__node {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 9.5rem;
  height: 9.5rem;
  border-radius: 50%;
  border: 1px solid rgba(185, 151, 85, 0.5);
  background: rgba(250, 247, 240, 0.04);
}

.ggis-synergy__node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(185, 151, 85, 0.5);
}

.ggis-synergy__ring {
  position: absolute;
  inset: -0.85rem;
  border-radius: 50%;
  border: 1px dashed rgba(185, 151, 85, 0.3);
}

.ggis-synergy__logo {
  display: block;
  width: auto;
  height: 5.25rem;
}

/* Idle motion — slow, weightless, never bouncy. */
@media (prefers-reduced-motion: no-preference) {
  .ggis-synergy__node::after {
    animation: ggis-pulse-glow 3.6s ease-in-out infinite;
  }

  .ggis-synergy__ring {
    animation: ggis-ring-spin 28s linear infinite;
  }

  .ggis-synergy__discwrap::before {
    animation: ggis-ring-spin 28s linear infinite;
  }

  .ggis-synergy__orb--b .ggis-synergy__discwrap::before {
    animation-duration: 34s;
    animation-direction: reverse;
  }
}

@keyframes ggis-ring-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ggis-pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(185, 151, 85, 0.5);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 0.45rem rgba(185, 151, 85, 0);
    opacity: 0.65;
  }
}

.ggis-synergy__statement {
  margin-top: 4.5rem;
  margin-inline: auto;
  max-width: 68ch;
  text-align: center;
}

.ggis-synergy__lead {
  margin-inline: auto;
  max-width: 26ch;
  font-family: var(--ggis-font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ggis-canvas);
}

.ggis-synergy__lead em {
  font-style: italic;
}

.ggis-synergy__body {
  margin-top: 1.25rem;
  margin-inline: auto;
  max-width: 64ch;
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: rgba(250, 247, 240, 0.78);
}

.ggis-synergy__body strong {
  font-weight: 500;
  color: var(--ggis-canvas);
}

.ggis-synergy__cta {
  margin-top: 2rem;
  text-align: center;
}

/* 5.7 Contact CTA + enquiry form */

.ggis-cta {
  position: relative;
  overflow: hidden;
  background: var(--ggis-green-900);
  color: var(--ggis-canvas);
}
/* Botanical corner watermarks — two separate images, blended into the green */
.ggis-cta::before,
.ggis-cta::after {
  content: "";
  position: absolute;
  width: min(72%, 52rem);
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: var(--ggis-leaf-opacity, 0.5);
  mix-blend-mode: luminosity;
  pointer-events: none;
  z-index: 0;
}
.ggis-cta::before {
  top: 0;
  right: 0;
  background-image: url(../img/cta-leaves-tr.png);
  background-position: top right;
}
.ggis-cta::after {
  bottom: 0;
  left: 0;
  background-image: url(../img/cta-leaves-bl.png);
  background-position: bottom left;
}
.ggis-cta > .ggis-container {
  position: relative;
  z-index: 1;
}
/* Leaves scale in as the CTA scrolls into view. JS adds .ggis-motion (so
   no-JS / reduced motion shows them straight away) and .is-inview on entry. */
.ggis-motion .ggis-cta::before,
.ggis-motion .ggis-cta::after {
  opacity: 0;
  transform: scale(0.6);
}
.ggis-motion .ggis-cta::before { transform-origin: top right; }
.ggis-motion .ggis-cta::after { transform-origin: bottom left; }
.ggis-motion .ggis-cta.is-inview::before,
.ggis-motion .ggis-cta.is-inview::after {
  animation: ggis-leaf-scalein 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes ggis-leaf-scalein {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: var(--ggis-leaf-opacity, 0.5); transform: scale(1); }
}

/* Sample-data disclaimer under a screenshot heading */
.ggis-demo-note {
  margin-top: 1.1rem;
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-meta);
  color: var(--ggis-ink-mid);
}

.ggis-cta__grid {
  position: relative;
  display: grid;
  gap: 3.5rem;
}

/* Blur pass behind the enquiry content so the botanical watermarks never fight
   the form. Sits on its own layer, bled past the grid and feathered at the
   edges, so no hard rectangle cuts through the fronds. */
.ggis-cta__grid::before {
  content: "";
  position: absolute;
  inset: -3.5rem -2.5rem;
  z-index: -1;
  background: rgba(30, 51, 32, 0.35);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 82% at 50% 50%, #000 58%, transparent 100%);
  pointer-events: none;
}

.ggis-cta__title {
  max-width: 20ch;
  color: var(--ggis-canvas);
}

.ggis-cta__text {
  margin-top: 1.5rem;
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: rgba(250, 247, 240, 0.7);
}

.ggis-form {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.5rem;
}

.ggis-field label {
  display: block;
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, 0.92);
}

.ggis-field input,
.ggis-field select {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid rgba(250, 247, 240, 0.42);
  border-radius: 0;
  background: transparent;
  color: var(--ggis-canvas);
  font-size: var(--fs-body-lg);
  transition: border-color 0.3s ease;
}

.ggis-field select {
  appearance: none;
  cursor: pointer;
}

.ggis-field select option {
  color: var(--ggis-ink);
}

.ggis-field input::placeholder {
  color: rgba(250, 247, 240, 0.55);
}

.ggis-field input:focus,
.ggis-field select:focus {
  outline: none;
  border-bottom-color: var(--ggis-gold);
}

.ggis-field input:user-invalid,
.ggis-field select:user-invalid {
  border-bottom-color: #d99b7c;
}

.ggis-form__actions {
  margin-top: 0.5rem;
}

.ggis-form__status {
  margin-top: 1.25rem;
  font-size: var(--fs-body);
  color: var(--ggis-gold-soft);
}

.ggis-form__status:empty {
  display: none;
}

.ggis-cta__aside {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.ggis-cta__facts {
  display: grid;
  gap: 1.5rem;
}

.ggis-cta__fact dt {
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, 0.6);
}

.ggis-cta__fact dd {
  margin-top: 0.5rem;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: rgba(250, 247, 240, 0.85);
}

.ggis-cta__fact a:hover {
  color: var(--ggis-gold-soft);
}
/* Message textarea — matches the underline inputs */
.ggis-field textarea {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid rgba(250, 247, 240, 0.42);
  background: transparent;
  color: var(--ggis-canvas);
  font-family: inherit;
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  min-height: 5.5rem;
  resize: vertical;
  transition: border-color 0.3s ease;
}
.ggis-field textarea::placeholder { color: rgba(250, 247, 240, 0.55); }
.ggis-field textarea:focus { outline: none; border-bottom-color: var(--ggis-gold); }
/* Office map (replaces the aside photo) + directions link */
.ggis-cta__map {
  aspect-ratio: 3 / 2;
  border-radius: 2.5rem;
  overflow: hidden;
  border: 1px solid rgba(250, 247, 240, 0.16);
  background: rgba(250, 247, 240, 0.05);
}
.ggis-cta__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.25) contrast(0.95);
}
.ggis-cta__directions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-family: var(--ggis-font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--ggis-gold-soft);
  transition: color 0.3s ease;
}
.ggis-cta__directions:hover { color: var(--ggis-canvas); }

/* 5.8 Footer */

.ggis-footer {
  position: relative;
  overflow: hidden;
  background: var(--ggis-green-950);
  color: var(--ggis-canvas);
}

.ggis-footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3rem;
  padding-block: 5rem;
}

.ggis-footer__logo {
  display: block;
  height: 3.25rem;
  width: auto;
}

.ggis-footer__brand-name {
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title-lg);
  font-weight: 480;
}

.ggis-footer__brand-suffix {
  margin-top: 0.35rem;
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, 0.6);
}

.ggis-footer__tagline {
  margin-top: 1.5rem;
  max-width: 30ch;
  font-size: var(--fs-body);
  color: rgba(250, 247, 240, 0.55);
}

.ggis-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.ggis-footer__col p,
.ggis-footer__col li {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: rgba(250, 247, 240, 0.7);
}

.ggis-footer__col a:hover {
  color: var(--ggis-gold-soft);
}

.ggis-footer__address {
  margin-top: 1rem;
  font-style: normal;
}

.ggis-footer__bar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 2rem;
  border-top: 1px solid rgba(250, 247, 240, 0.1);
}

.ggis-footer__bar p {
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: rgba(250, 247, 240, 0.45);
}

.ggis-backtotop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, 0.6);
  transition: color 0.3s ease;
}

.ggis-backtotop:hover {
  color: var(--ggis-canvas);
}

/* --- 6. Responsive ------------------------------------------------------- */

@media (min-width: 48rem) {
  .ggis-container {
    padding-inline: 2.5rem;
  }

  .ggis-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 0;
  }

  .ggis-section {
    padding-block: 9rem;
  }

  :root {
    --ggis-header-h: 6rem;
  }

  .ggis-navtoggle {
    display: none;
  }

  .ggis-navpanel {
    display: none !important;
  }

  .ggis-navbar__cta {
    display: inline-block;
  }

  .ggis-hero__support {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .ggis-trust__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
  }

  .ggis-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ggis-usp__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .ggis-usp__col + .ggis-usp__col {
    padding-left: 2.5rem;
    border-left: 1px solid var(--ggis-line);
  }

  .ggis-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ggis-cta__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .ggis-nav {
    display: flex;
  }

  .ggis-navbar__phone {
    display: block;
  }

  .ggis-trust__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Side columns cap at the disc width and the gap closes, so the dashed wires
     stretch the whole way and meet the edge of each circle. */
  .ggis-synergy__map {
    /* Middle column must fit the node (9.5rem) plus a wire either side, or the
       node overflows and crosses the rings — it was cramping at 1024. */
    grid-template-columns: minmax(0, 26rem) minmax(15rem, 1fr) minmax(0, 26rem);
    gap: 0;
    max-width: 82rem;
    margin-inline: auto;
  }

  .ggis-synergy__connector {
    flex-direction: row;
    gap: 1.25rem;
    width: 100%;
  }

  .ggis-synergy__wire {
    flex: 1;
    width: auto;
    height: 0;
    border-left: 0;
    border-top: 1px dashed rgba(250, 247, 240, 0.35);
  }

  .ggis-cta__grid {
    grid-template-columns: 60fr 40fr;
    gap: 5rem;
  }

  .ggis-cta__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .ggis-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ggis-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ggis-field--wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 80rem) {
  .ggis-container {
    padding-inline: 4rem;
  }

  .ggis-section {
    padding-block: 11rem;
  }

  .ggis-services__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3.5rem 0;
    padding-inline: 0;
  }
}

@media (min-width: 96rem) {
  .ggis-container {
    padding-inline: 6rem;
  }
}

/* Reduced motion: the JS layer exits before any hidden state is applied;
   here we make sure the decorative second hero frame stays out of the way
   and nothing relies on transitions. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===========================================================================
   About page (about.html) — page-specific classes, composed from the grammar.
   Reuses .ggis-hero, .ggis-usp, .ggis-figure, .ggis-band, headings, buttons.
=========================================================================== */

/* Inner-page hero — a touch shorter than the full-viewport home hero. */
.ggis-hero--inner {
  min-height: 76vh;
}

/* Hero — editorial & full-bleed. A deliberate break from the home page's
   photographic crossfade hero: a centred eyebrow between rules, then a
   title/description row, a full-bleed image, and the CTA beneath it. The navbar
   carries its own light-surface treatment (see .ggis-navbar--onlight). */
.ggis-abouthero {
  position: relative;
  background: var(--ggis-canvas);
  padding-top: calc(var(--ggis-header-h) + 3.5rem);
  padding-bottom: 0;
}
.ggis-abouthero__eyebrow {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
/* Same solid brand-green chip as the home hero eyebrow — the faint micro-caps
   were not registering against the ivory ("X nampak" in the brief). */
.ggis-abouthero__eyebrow .ggis-eyebrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  background: var(--ggis-green-800);
  color: var(--ggis-canvas);
  text-align: center;
}
.ggis-abouthero__eyebrow-line {
  flex: 1;
  height: 1px;
  background: var(--ggis-line);
}
.ggis-abouthero__headrow {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.5rem;
}
.ggis-abouthero__title {
  max-width: 20ch;
  color: var(--ggis-ink);
}
.ggis-abouthero__intro {
  max-width: 40ch;
}
/* The section used to sit on 4rem of dead ivory beneath the image; that space
   is handed to the image instead, so the frame runs flush into the next band. */
.ggis-abouthero__figure {
  position: relative;
  --ggis-fig-cap: calc(52vh + 4rem);
  overflow: hidden;
  margin-top: 3rem;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--ggis-canvas-tint);
}
.ggis-abouthero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 48rem) {
  .ggis-abouthero__figure {
    aspect-ratio: 16 / 9;
  }
}
@media (min-width: 64rem) {
  .ggis-abouthero__headrow {
    grid-template-columns: 1.4fr 1fr;
    align-items: end;
    gap: 4rem;
  }
  .ggis-abouthero__intro {
    justify-self: end;
    text-align: right;
    padding-bottom: 0.5rem;
  }
}

/* Navbar over a light hero — the bar must read from load. Mirrors .is-scrolled,
   which the scroll handler only adds past 120px (and strips again near the top). */
.ggis-navbar--onlight {
  background: rgba(250, 247, 240, 0.95);
  border-bottom-color: var(--ggis-line);
  color: var(--ggis-ink);
  backdrop-filter: blur(6px);
}
.ggis-navbar--onlight .ggis-brand__logo--light {
  display: none;
}
.ggis-navbar--onlight .ggis-brand__logo--ink {
  display: block;
}
.ggis-navbar--onlight .ggis-navbar__cta {
  background: var(--ggis-green-800);
  color: var(--ggis-canvas);
  box-shadow: none;
}
.ggis-navbar--onlight .ggis-navbar__cta:hover {
  background: var(--ggis-green-950);
}

/* 1 · Our Vision — the manifesto moment: one ink-scrub statement on a deep
   green field. Static background; the text alone carries it. */
.ggis-vision {
  background: var(--ggis-green-950);
}
/* Fills the container rather than sitting on a short 28ch measure: at 2470px the
   cap left ~490px of dead space to the right of the statement and read as lopsided.
   No explicit cap needed - .ggis-container already bounds it at 1800px minus the
   gutter, so the line length is held by the frame instead. */
.ggis-vision__statement {
  margin-top: 2.5rem;
  color: var(--ggis-canvas);
}

/* 2 · Our Company — editorial stack: intro, two-up, statement, image+text.
   Composition borrowed from the reference; tokens/type/motion stay in-system. */
/* Uncapped (the old 20ch cap forced three lines); the break after
   "excellence" is set explicitly in the markup so it reads as two balanced
   lines at the full display-lg size. */
.ggis-company__headline {
  margin-top: 2rem;
  max-width: none;
}
.ggis-company__lede {
  margin-top: 1.5rem;
  max-width: 58ch;
}
.ggis-company__duo {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.5rem;
}
/* Each two-up image carries a service pillar as its caption. */
.ggis-company__figure {
  display: flex;
  flex-direction: column;
}
.ggis-company__caption {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ggis-line);
}
.ggis-company__caption .ggis-serial {
  display: block;
  margin-bottom: 0.6rem;
}
.ggis-company__pillar-title {
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title);
  font-weight: 440;
  color: var(--ggis-ink);
}
/* Full column width — the 34ch cap left the copy in a narrow ragged block
   under a much wider image ("wording x match dengan size gambar"). */
.ggis-company__pillar-text {
  margin-top: 0.35rem;
  max-width: none;
  font-size: var(--fs-body);
  color: var(--ggis-ink-mid);
}
/* Uncapped so each sentence gets a full line; the 34ch cap was splitting
   "high-precision automation" across two lines. */
.ggis-company__statement {
  margin-top: 4rem;
  max-width: none;
  color: var(--ggis-ink);
}
.ggis-company__statement em {
  font-style: italic;
  color: var(--ggis-green-800);
}

/* 2 · Our Journey — pinned horizontal timeline (the page's one allowed pin).
   Motion is the existing .ggis-process* layer in ggis-motion.js: at >=1024px
   with motion allowed, the section pins and the track scrubs sideways; below
   that (or under reduced motion) it stacks vertically and stays visible. The
   horizontal layout is gated on no-preference so reduced-motion users — who get
   no scrub — are never left with cards clipped off-screen. */
.ggis-process {
  background: var(--ggis-canvas-tint);
}
.ggis-process__headrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
}
/* The heading block fills the row so its hairline draws the full width,
   instead of stopping at the width of the title text. */
.ggis-process__headrow > div {
  flex: 1;
  min-width: 0;
}
.ggis-process-counter {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.ggis-process__rail {
  margin-top: 2.5rem;
  height: 1px;
  width: 100%;
  background: var(--ggis-line);
  overflow: hidden;
}
.ggis-process-progress {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ggis-green-800);
  transform: scaleX(0);
  transform-origin: left center;
}
.ggis-process-track {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  list-style: none;
  padding-left: 0;
}
/* Green cards on the warm tint band. The brief asked for "warna hijau pekat"
   background with "card warna hijau cerah"; the band stays tinted (About
   already carries three dark blocks and a fourth would fight the rhythm) and
   the green contrast is carried by the cards instead. */
.ggis-process-card {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  border: 1px solid var(--ggis-green-800);
  border-radius: 1.25rem;
  background: var(--ggis-green-800);
}
.ggis-process-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(250, 247, 240, 0.22);
  border-radius: 0.85rem;
  color: var(--ggis-canvas);
  margin-bottom: 1.75rem;
}
.ggis-process-card .ggis-serial {
  display: block;
}
/* Card interiors are a dark surface, so type, serial and icon flip to light. */
.ggis-process-card .ggis-serial {
  color: var(--ggis-gold);
}
.ggis-process-card__title {
  margin-top: 1rem;
  max-width: 18ch;
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title-lg);
  font-weight: 440;
  color: var(--ggis-canvas);
}
.ggis-process-card__text {
  margin-top: 0.75rem;
  max-width: 38ch;
  font-size: var(--fs-body);
  color: rgba(250, 247, 240, 0.72);
}

/* Desktop + motion allowed: one horizontal row the JS scrubs while pinned.
   64rem == the 1024px breakpoint the process JS uses — keep them in step. */
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .ggis-process {
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 0;
  }
  .ggis-process-track {
    flex-direction: row;
    width: max-content;
    gap: 2rem;
  }
  .ggis-process-track > * {
    width: 30rem;
    flex-shrink: 0;
  }
}

/* 3 · Core Values — title + note + thumb on the left, values stacked on the
   right. New .ggis-values* classes (not .ggis-usp) so the home USP is untouched. */
.ggis-values {
  background: var(--ggis-canvas);
}
.ggis-values__grid {
  display: grid;
  gap: 3rem;
}
.ggis-values__title {
  margin-top: 2rem;
  max-width: 16ch;
}
/* Thumbnail + caption. Mobile: a full-width image with the caption stacked
   beneath it. Tablet and up (>=48rem): image left, caption right on its baseline
   — the image is sized as a share of the column so it scales instead of cramping.
   On desktop the block is pushed to the foot of the column (margin-top:auto). */
.ggis-values__note {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* The photograph is masked into the full GGIS mark, so the image still carries
   the colour (the UI is near-monochrome by design) but reads as the brand.
   Capped against viewport HEIGHT below 48rem: at full column width the mark ate
   half a phone screen, and a fixed width would still be oversized on short
   handsets. Same idiom as --ggis-fig-cap on the photo frames. */
.ggis-values__media {
  width: min(100%, 27vh);
  aspect-ratio: 120 / 150;
  border-radius: 0;
  background: none;
  -webkit-mask-image: url("../img/ggis-leaf-light.svg");
  mask-image: url("../img/ggis-leaf-light.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.ggis-values__lede {
  max-width: 40ch;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ggis-ink-mid);
}
.ggis-values__list {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 0.75rem;
  align-content: start;
}
/* Each value is a light card that fills with brand green on hover. */
.ggis-values__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  border-radius: 1rem;
  background: var(--ggis-canvas-tint);
  transition: background-color 0.4s ease;
}
.ggis-values__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--ggis-line);
  border-radius: 0.85rem;
  color: var(--ggis-green-700);
  flex-shrink: 0;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.ggis-values__row-title {
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title);
  font-weight: 440;
  color: var(--ggis-ink);
  transition: color 0.4s ease;
}
/* Full row width — the 48ch cap left the longer replacement copy wrapping
   short of the card edge. */
.ggis-values__row-text {
  margin-top: 0.4rem;
  max-width: none;
  font-size: var(--fs-body);
  color: var(--ggis-ink-mid);
  transition: color 0.4s ease;
}
.ggis-values__row:hover {
  background: var(--ggis-green-800);
}
.ggis-values__row:hover .ggis-values__icon {
  border-color: rgba(250, 247, 240, 0.35);
  color: var(--ggis-canvas);
}
.ggis-values__row:hover .ggis-values__row-title {
  color: var(--ggis-canvas);
}
.ggis-values__row:hover .ggis-values__row-text {
  color: rgba(250, 247, 240, 0.78);
}

/* 4 · Solutions — index rows on the dark band */
.ggis-solutions {
  position: relative;
  overflow: hidden;
  background: var(--ggis-green-950);
  color: var(--ggis-canvas);
}
.ggis-solutions .ggis-container {
  position: relative;
  z-index: 1;
}
.ggis-solutions__title {
  color: var(--ggis-canvas);
}
.ggis-solutions__list {
  margin-top: 4rem;
}
.ggis-solutions__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-block: 1.75rem;
  border-top: 1px solid rgba(250, 247, 240, 0.12);
  color: var(--ggis-canvas);
  transition: padding-left 0.35s ease;
}
.ggis-solutions__row:last-child {
  border-bottom: 1px solid rgba(250, 247, 240, 0.12);
}
.ggis-solutions__row:hover {
  padding-left: 0.75rem;
}
.ggis-solutions__row-title {
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title-lg);
  font-weight: 440;
}
.ggis-solutions__row-meta {
  grid-column: 2;
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(250, 247, 240, 0.55);
}
.ggis-solutions__row svg {
  color: var(--ggis-gold);
}

/* 5 · Closing CTA band — centered, green-900 */
.ggis-cta-band {
  background: var(--ggis-green-900);
  padding-block: 7rem;
}
.ggis-cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ggis-cta-band__title {
  max-width: 24ch;
  margin-top: 1.5rem;
  text-align: center;
  color: var(--ggis-canvas);
}
.ggis-cta-band__title em {
  font-style: italic;
  color: var(--ggis-gold-soft);
}
.ggis-cta-band__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

@media (min-width: 48rem) {
  .ggis-company__duo {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .ggis-solutions__row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }
  .ggis-solutions__row-meta {
    grid-column: auto;
    justify-self: end;
    text-align: right;
  }
  /* Core Values note: masked mark left, caption right on its baseline. */
  .ggis-values__note {
    flex-direction: row;
    align-items: flex-end;
    gap: 1.75rem;
  }
  .ggis-values__media {
    flex: 0 0 40%;
    width: auto;
  }
}

@media (min-width: 64rem) {
  .ggis-values {
    padding-bottom: 10rem;
  }
  .ggis-values__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 5rem;
  }
  .ggis-values__intro {
    display: flex;
    flex-direction: column;
  }
  /* Pinned to the column foot. */
  .ggis-values__note {
    margin-top: auto;
  }
}

/* Wide desktop: nudge the note a little below the value stack. */
@media (min-width: 80rem) {
  .ggis-values__note {
    transform: translateY(4.5rem);
  }
}

/* ===========================================================================
   Service sub-pages (service-*.html) — composed from the grammar.
   Reuse .ggis-abouthero (inner hero), .ggis-usp (capabilities), .ggis-cta.
=========================================================================== */

/* Overview — heading + lead beside a figure */
.ggis-service-intro__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.ggis-service-intro__lede {
  margin-top: 2rem;
  max-width: 54ch;
}
@media (min-width: 64rem) {
  .ggis-service-intro__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 5rem;
  }
}

/* Capabilities — image cards (service-page variant of the USP columns; the
   home page keeps its own icon columns). */
.ggis-capabilities {
  background: var(--ggis-canvas);
}
.ggis-capabilities__grid {
  margin-top: 4.5rem;
  display: grid;
  gap: 2.5rem;
}
.ggis-capability__title {
  margin-top: 1.5rem;
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title-lg);
  font-weight: 440;
  color: var(--ggis-ink);
}
.ggis-capability__text {
  margin-top: 0.75rem;
  max-width: 40ch;
  font-size: var(--fs-body);
  color: var(--ggis-ink-mid);
}
@media (min-width: 48rem) {
  .ggis-capabilities__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}

/* Featured projects — asymmetric editorial grid (12 cols, staggered offsets),
   each figure carrying a name, micro-caps meta and an italic serif story.
   Mirrors the mockup Projects PLACEMENT. */
.ggis-projects {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5rem 0;
}
.ggis-project {
  display: flex;
  flex-direction: column;
}
.ggis-project__cap {
  margin-top: 1.5rem;
}
.ggis-project__name {
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title-lg);
  font-weight: 440;
  color: var(--ggis-ink);
}
.ggis-project__meta {
  margin-top: 0.5rem;
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ggis-ink-mid);
}
.ggis-project__story {
  margin-top: 0.85rem;
  max-width: 44ch;
  font-family: var(--ggis-font-display);
  font-size: var(--fs-body-lg);
  font-style: italic;
  line-height: 1.5;
  color: var(--ggis-ink-soft);
}
@media (min-width: 48rem) {
  .ggis-projects {
    margin-top: 7rem;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 1.5rem;
    row-gap: 7rem;
  }
  .ggis-project--p1 { grid-column: 1 / span 7; }
  .ggis-project--p2 { grid-column: 8 / span 5; margin-top: 11rem; }
  .ggis-project--p3 { grid-column: 2 / span 4; margin-top: 2rem; }
  .ggis-project--p4 { grid-column: 7 / span 6; margin-top: 10rem; }
  .ggis-project--p5 { grid-column: 1 / span 4; margin-top: 3rem; }
}

/* ===========================================================================
   IFM overview hub (service-ifm.html) — tech-led sections in the GGIS idiom.
=========================================================================== */

/* Framed screenshot ("a real screen") — shown whole, never cover-cropped.
   Locked to 16:9 so both pillar screens share one height + ratio. The CC
   dashboard is natively 16:9 and fills edge-to-edge; the wider AI composite
   sits contained + centred with a hairline ivory mat top/bottom, keeping its
   logo (far left) and login card (far right) intact — a crop would sever one. */
.ggis-screen {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ggis-line);
  border-radius: 1rem;
  background: var(--ggis-canvas-bright);
  box-shadow: var(--ggis-shadow-card, 0 24px 50px -30px rgba(18, 33, 20, 0.4));
}
.ggis-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* 1 · Flexibility assurance — two bordered stat boxes */
.ggis-assure__grid {
  margin-top: 4rem;
  display: grid;
  gap: 1.5rem;
}
.ggis-assure__box {
  padding: 2rem;
  border: 1px solid var(--ggis-line);
  border-radius: 1.25rem;
  background: var(--ggis-canvas-bright);
}
.ggis-assure__value {
  margin-top: 1rem;
  font-family: var(--ggis-font-display);
  font-size: var(--fs-display);
  font-weight: 380;
  font-style: italic;
  color: var(--ggis-green-900);
}
.ggis-assure__note {
  margin-top: 0.6rem;
  max-width: 42ch;
  font-size: var(--fs-body);
  color: var(--ggis-ink-mid);
}
@media (min-width: 48rem) {
  .ggis-assure__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* 2 · The Problem — dark band, two warning cards (the one dark moment) */
.ggis-problem {
  overflow: hidden;
  background: var(--ggis-green-950);
  color: var(--ggis-canvas);
}
.ggis-problem__title { color: var(--ggis-canvas); }
.ggis-problem__grid {
  margin-top: 4rem;
  display: grid;
  gap: 1.5rem;
}
.ggis-problem__card {
  padding: 2rem;
  border: 1px solid rgba(250, 247, 240, 0.14);
  border-radius: 1.25rem;
  background: rgba(250, 247, 240, 0.03);
}
.ggis-problem__flag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ggis-font-sans);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ggis-gold);
}
.ggis-problem__flag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ggis-gold);
}
.ggis-problem__card-title {
  margin-top: 1.25rem;
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title-lg);
  font-weight: 440;
  color: var(--ggis-canvas);
}
.ggis-problem__card-text {
  margin-top: 0.75rem;
  font-size: var(--fs-body);
  color: rgba(250, 247, 240, 0.7);
}
@media (min-width: 48rem) {
  .ggis-problem__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* 3 · AI Tech Duo — two pillars, each a framed screen + copy + link */
.ggis-duo__grid {
  margin-top: 4.5rem;
  display: grid;
  gap: 3.5rem;
}
.ggis-duo__eyebrow {
  margin-top: 1.75rem;
}
.ggis-duo__title {
  margin-top: 0.75rem;
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title-lg);
  font-weight: 440;
  color: var(--ggis-ink);
}
.ggis-duo__text {
  margin-top: 0.75rem;
  max-width: 46ch;
  font-size: var(--fs-body);
  color: var(--ggis-ink-mid);
}
.ggis-duo__link {
  margin-top: 1.25rem;
}
@media (min-width: 64rem) {
  .ggis-duo__grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

/* 4 · Impact stat strip */
.ggis-impact {
  margin-top: 4.5rem;
  display: grid;
  gap: 2.5rem;
  border-top: 1px solid var(--ggis-line);
  padding-top: 3rem;
}
.ggis-impact__value {
  font-family: var(--ggis-font-display);
  font-size: var(--fs-display);
  font-weight: 380;
  font-style: italic;
  color: var(--ggis-green-900);
}
.ggis-impact__label {
  margin-top: 0.5rem;
  max-width: 28ch;
  font-size: var(--fs-body);
  color: var(--ggis-ink-mid);
}
@media (min-width: 48rem) {
  .ggis-impact { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

/* ===========================================================================
   IFM sub-pages — Command Centre (module rows + sector index) & shared helpers.
=========================================================================== */

/* Tint-panel section helper (alternating page rhythm) */
.ggis-section--tint { background: var(--ggis-canvas-tint); }
.ggis-section--bright { background: var(--ggis-canvas-bright); }

/* Two modules, one dashboard — framed screen + numbered component list, alternating */
.ggis-modules {
  margin-top: 4rem;
  display: grid;
  gap: 4.5rem;
}
.ggis-module {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.ggis-module__eyebrow { color: var(--ggis-gold-deep); }
.ggis-module__title {
  margin-top: 0.7rem;
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title-lg);
  font-weight: 420;
  color: var(--ggis-ink);
}
.ggis-module__list {
  margin-top: 1.75rem;
  list-style: none;
  border-top: 1px solid var(--ggis-line);
}
.ggis-module__item {
  display: flex;
  gap: 1.1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--ggis-line);
}
.ggis-module__item .ggis-serial { flex-shrink: 0; line-height: 1.5; }
.ggis-module__name {
  font-family: var(--ggis-font-display);
  font-size: var(--fs-body-lg);
  font-weight: 460;
  color: var(--ggis-ink);
}
.ggis-module__desc {
  margin-top: 0.25rem;
  max-width: 44ch;
  font-size: var(--fs-body);
  color: var(--ggis-ink-mid);
}
@media (min-width: 64rem) {
  .ggis-module { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .ggis-module--flip .ggis-module__figure { order: 2; }
}

/* Industries — ruled sector index */
.ggis-sectors {
  margin-top: 3.5rem;
  list-style: none;
  /* browsers give <ul> a 40px padding-inline-start; without this reset the rows
     sit indented from the section heading above them */
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--ggis-line);
}
.ggis-sector {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* no left inset - the row must start flush with the container edge, in line
     with the section heading above it */
  padding: 1.2rem 0.25rem 1.2rem 0;
  border-bottom: 1px solid var(--ggis-line);
}
/* Sector icons replace the 01-08 serials. Gold-deep is the gold that reads on
   the ivory/tint ground; the icons are small enough to stay inside the
   accent budget. */
.ggis-sector__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--ggis-gold-deep);
}
.ggis-sector__icon svg { display: block; }
.ggis-sector__name {
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--ggis-ink);
  line-height: 1.2;
}
@media (min-width: 48rem) {
  .ggis-sectors { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}
@media (min-width: 80rem) {
  .ggis-sectors { grid-template-columns: repeat(4, 1fr); column-gap: 2.5rem; }
}

/* ===========================================================================
   IFM sub-pages — AI Attendance (versus rows, card index, tenant diagram).
=========================================================================== */

/* Problem / Solution — paired comparison rows inside the dark band */
.ggis-versus {
  margin-top: 3.5rem;
  border-top: 1px solid rgba(250, 247, 240, 0.14);
}
.ggis-versus__head { display: none; }
.ggis-versus__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(250, 247, 240, 0.14);
}
.ggis-versus__cell {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
}
.ggis-versus__cell--problem { color: rgba(250, 247, 240, 0.55); }
.ggis-versus__cell--solution { color: var(--ggis-canvas); }
.ggis-versus__mark { flex-shrink: 0; color: rgba(250, 247, 240, 0.38); transform: translateY(2px); }
.ggis-versus__mark--ok { color: var(--ggis-gold); }
.ggis-versus__label {
  font-family: var(--ggis-font-sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--fs-micro);
  color: rgba(250, 247, 240, 0.5);
}
.ggis-versus__label--ok { color: var(--ggis-gold); }
/* Row topic - the failure mode each comparison row is about (Proxy Attendance,
   Fraud Prevention, ...), from the client's 20.8 briefing table. Micro-caps in
   the foliage accent so gold stays reserved for the solution ticks; on desktop
   it spans both columns as a row-group heading. */
.ggis-versus__topic {
  font-family: var(--ggis-font-sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--fs-micro);
  color: var(--ggis-green-300);
}
@media (min-width: 64rem) {
  /* Desktop: dimension | traditional | AI across one line. No vertical rule -
     the row hairlines carry the structure, the x / check marks say which side is
     which, and the muted-vs-canvas text colour does the rest. The header keeps
     its first cell empty rather than labelling the dimension column. */
  .ggis-versus__head,
  .ggis-versus__row {
    grid-template-columns: minmax(8rem, 0.85fr) 2fr 2fr;
    column-gap: 3rem;
    row-gap: 0;
    align-items: start;
  }
  .ggis-versus { border-top: 0; }
  .ggis-versus__head {
    display: grid;
    padding: 0 0 1rem;
    border-bottom: 1px solid rgba(250, 247, 240, 0.14);
  }
  .ggis-versus__topic { grid-column: auto; padding-top: 0.15rem; }
}

/* Ruled card index — anti-fraud, features, why, tenant points */
.ggis-cards {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: 1fr;
}
.ggis-card {
  padding: 1.75rem 0;
  border-top: 1px solid var(--ggis-line);
}
.ggis-card .ggis-serial { display: block; }
.ggis-card__title {
  margin-top: 0.9rem;
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title);
  font-weight: 420;
  color: var(--ggis-ink);
  line-height: 1.15;
}
.ggis-card__text {
  margin-top: 0.55rem;
  max-width: 42ch;
  font-size: var(--fs-body);
  color: var(--ggis-ink-mid);
}
@media (min-width: 48rem) {
  .ggis-cards--two,
  .ggis-cards--three,
  .ggis-cards--quad { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}
@media (min-width: 64rem) {
  .ggis-cards--three { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; }
}
@media (min-width: 80rem) {
  .ggis-cards--quad { grid-template-columns: repeat(4, 1fr); column-gap: 2.5rem; }
}

/* Key-features framed screen — tasteful centred width */
.ggis-features__screen {
  margin: 3.5rem auto 0;
  max-width: 56rem;
}

/* Multi-tenant architecture — a quiet hairline diagram */
.ggis-tenant {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ggis-tenant__console {
  padding: 1.25rem 2.25rem;
  border: 1px solid var(--ggis-line);
  border-radius: 1rem;
  background: var(--ggis-canvas-bright);
}
.ggis-tenant__title {
  margin-top: 0.35rem;
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title);
  color: var(--ggis-ink);
}
.ggis-tenant__stem { width: 1px; height: 2.75rem; background: var(--ggis-line); }
.ggis-tenant__clients {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  width: 100%;
  max-width: 46rem;
}
.ggis-tenant__client {
  padding: 1.5rem;
  border: 1px solid var(--ggis-line);
  border-radius: 1rem;
  background: var(--ggis-canvas-bright);
}
.ggis-tenant__client .ggis-serial { font-size: var(--fs-title); }
.ggis-tenant__client-name {
  margin-top: 0.35rem;
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title);
  color: var(--ggis-ink);
}
.ggis-tenant__client-note {
  margin-top: 0.15rem;
  font-family: var(--ggis-font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-micro);
  color: var(--ggis-ink-mid);
}
@media (min-width: 48rem) {
  .ggis-tenant__clients { grid-template-columns: repeat(3, 1fr); }
}

/* Key features — three image-led highlights (centred) + horizontal icon rows */
.ggis-feature-highlights {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
.ggis-feature-highlight { text-align: center; }
.ggis-feature-highlight__title {
  margin-top: 1.5rem;
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title-lg);
  font-weight: 420;
  color: var(--ggis-ink);
}
.ggis-feature-highlight__text {
  margin: 0.6rem auto 0;
  max-width: 34ch;
  font-size: var(--fs-body);
  color: var(--ggis-ink-mid);
}
@media (min-width: 64rem) {
  .ggis-feature-highlights { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

.ggis-feature-rows {
  margin-top: 4rem;
  list-style: none;
  border-top: 1px solid var(--ggis-line);
}
.ggis-feature-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--ggis-line);
}
.ggis-feature-row__icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--ggis-line);
  border-radius: 0.85rem;
  background: var(--ggis-canvas-bright);
  color: var(--ggis-green-800);
}
.ggis-feature-row__body { flex: 1; }
.ggis-feature-row__name {
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title);
  font-weight: 420;
  color: var(--ggis-ink);
}
.ggis-feature-row__desc {
  margin-top: 0.25rem;
  font-size: var(--fs-body);
  color: var(--ggis-ink-mid);
}
@media (min-width: 48rem) {
  .ggis-feature-row { align-items: center; }
  .ggis-feature-row__body {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 2rem;
    align-items: baseline;
  }
  .ggis-feature-row__desc { margin-top: 0; }
}

/* How it works — big-number steps laid out horizontally on a green band */
.ggis-steps-section {
  overflow: hidden;
  background: var(--ggis-green-800);
  color: var(--ggis-canvas);
}
.ggis-steps-section .ggis-heading__title { color: var(--ggis-canvas); }
.ggis-steps {
  margin-top: 3.5rem;
  list-style: none;
  /* same UA <ol> padding-inline-start as .ggis-sectors - without this the whole
     step index sits 40px in from its column */
  padding: 0;
  border-top: 1px solid rgba(250, 247, 240, 0.2);
}
/* Two-column: face-scan image left, numbered steps right */
.ggis-steps-layout .ggis-steps { margin: 0; }
.ggis-steps-layout {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 64rem) {
  .ggis-steps-layout {
    grid-template-columns: 0.55fr 1fr;
    gap: 3.5rem;
    align-items: stretch;
  }
  /* The figure tracks the height of the step list beside it instead of its own
     4:5 ratio: the image is taken out of flow so the figure contributes no
     intrinsic height, the grid row is sized by the list, and object-fit crops to
     whatever height that lands on. Keeps figure and list flush top and bottom on
     every page using this layout. Below 64rem the stack keeps the 4:5 frame. */
  .ggis-steps-layout > .ggis-figure {
    aspect-ratio: auto;
    max-height: none;
    min-height: 0;
  }
  .ggis-steps-layout > .ggis-figure img {
    position: absolute;
    inset: 0;
  }
}
.ggis-step {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.5rem;
  align-items: center;
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(250, 247, 240, 0.2);
}
.ggis-step__num {
  font-family: var(--ggis-font-display);
  font-size: clamp(2.5rem, 5.5vw, 3.75rem);
  font-weight: 340;
  font-style: italic;
  line-height: 0.85;
  color: rgba(163, 192, 159, 0.25);
}
.ggis-step__body {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "icon text";
  column-gap: 1rem;
  row-gap: 0.3rem;
  align-items: center;
}
.ggis-step__icon {
  grid-area: icon;
  display: inline-flex;
  color: var(--ggis-gold);
}
.ggis-step__title {
  grid-area: title;
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title-lg);
  font-weight: 420;
  color: var(--ggis-canvas);
}
.ggis-step__text {
  grid-area: text;
  max-width: 56ch;
  font-size: var(--fs-body-lg);
  color: rgba(250, 247, 240, 0.72);
}
@media (min-width: 80rem) {
  .ggis-step { column-gap: 2.5rem; }
}
/* Three columns (icon | title | text) only once the container can carry them:
   the title track needs 20.5rem to set every step title on two lines, and the
   body copy needs ~29rem to stay at three. Below this the stacked
   title-over-text layout from the base rule is shorter and reads better. */
@media (min-width: 112rem) {
  .ggis-step__body {
    grid-template-columns: auto minmax(0, 20.5rem) minmax(0, 1fr);
    grid-template-areas: "icon title text";
    column-gap: 2rem;
  }
}

/* ---------------------------------------------------------------------------
   Landscape · Industry challenge — hairline index on the deep band.
   Adopts the .ggis-usp__col grammar from the homepage ("Why choose GGIS"): no
   card, no fill, no radius — just a top hairline per column, a bare icon, then
   title and body. Ground is green-950, the same deep band green as About > Our
   Vision, so the hairlines and icon flip to the canvas/foliage side. Icons are
   green-300 (foliage accent) rather than the charter's default gold for dark
   bands, so gold stays reserved for the serials alone. Filled and
   bordered card variants were trialled and rejected: cards inverted the band and
   made three peer risks read as objects rather than one index.
--------------------------------------------------------------------------- */
.ggis-risk {
  background: var(--ggis-green-950);
  color: var(--ggis-canvas);
}

.ggis-risk .ggis-heading__title { color: var(--ggis-canvas); }

.ggis-risk__lede {
  margin-top: 1.5rem;
  max-width: 52ch;
  color: rgba(250, 247, 240, 0.72);
}

.ggis-risk__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin: 4.5rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .ggis-risk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .ggis-risk__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The hairline is the whole card. Canvas at 18% so it holds on green-950 the way
   --ggis-line holds on ivory. */
.ggis-risk__card {
  padding-top: 2rem;
  border-top: 1px solid rgba(250, 247, 240, 0.18);
}

/* Bare icon, as on .ggis-usp__col — the span stays a block wrapper so the Divi
   port keeps a block-level leading element (wpautop splits inline runs). */
.ggis-risk__icon {
  display: block;
  margin-top: 1rem;
  margin-bottom: 2.25rem;
  color: var(--ggis-green-300);
}
.ggis-risk__icon svg {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
}

.ggis-risk__card .ggis-serial {
  display: block;
  color: var(--ggis-gold);
}

.ggis-risk__title {
  margin-top: 0.75rem;
  max-width: 20ch;
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title-lg);
  font-weight: 440;
  line-height: 1.25;
  color: var(--ggis-canvas);
}

/* Kicker is the English framing line the brief pairs with each title. */
.ggis-risk__kicker {
  margin-top: 0.5rem;
  font-family: var(--ggis-font-display);
  font-style: italic;
  font-size: var(--fs-meta);
  color: var(--ggis-green-300);
}

.ggis-risk__text {
  margin-top: 1.5rem;
  font-size: var(--fs-body);
  color: rgba(250, 247, 240, 0.72);
}

/* ---------------------------------------------------------------------------
   Landscape · What we offer — copy + brochure download beside a checked index.
   Rows-as-index grammar: hairline-separated items, micro-caps scale, gold check.
--------------------------------------------------------------------------- */
.ggis-offer__lede { margin-top: 1.5rem; max-width: 46ch; color: var(--ggis-ink-mid); }

.ggis-offer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: start;
}
@media (min-width: 64rem) {
  .ggis-offer__grid { grid-template-columns: 1fr 1fr; gap: 6rem; }
}

.ggis-offer__download { margin-top: 3rem; }
.ggis-offer__download-note {
  margin-bottom: 1.25rem;
  font-size: var(--fs-meta);
  color: var(--ggis-ink-faint);
}

.ggis-offer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ggis-line);
}

.ggis-offer__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--ggis-line);
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--ggis-ink);
}

.ggis-offer__mark {
  flex-shrink: 0;
  color: var(--ggis-gold-deep);
}

/* Workflow lede sits under the steps heading, above the two-column layout.
   .ggis-steps-section is always a deep green band, so this reads on canvas,
   not on ink - it was inheriting the light-ground body colour. */
.ggis-steps__lede { margin-top: 1.5rem; max-width: 56ch; color: var(--ggis-canvas); }

/* ---------------------------------------------------------------------------
   Screen zoom - dashboard screenshots open full-size in a modal dialog.
   Requested in the AI Attendance 20.8 briefing ("if click image than the image
   akan besar"). Applies to every .ggis-screen frame, so the Command Centre and
   IFM dashboards get it too. Scrim is green-950 at 90% (never pure black); the
   frame keeps the 1rem radius the inline screens use.
--------------------------------------------------------------------------- */
.ggis-screen--zoomable { cursor: zoom-in; }
.ggis-screen--zoomable:focus-visible {
  outline: 2px solid var(--ggis-gold);
  outline-offset: 3px;
}
.ggis-zoom {
  width: min(94vw, 1600px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
}
.ggis-zoom::backdrop { background: rgba(18, 33, 20, 0.9); }
.ggis-zoom__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 1rem;
  background: var(--ggis-canvas-bright);
}
.ggis-zoom__close {
  position: absolute;
  top: -3rem;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(250, 247, 240, 0.32);
  border-radius: 999px;
  background: transparent;
  color: var(--ggis-canvas);
  cursor: pointer;
}
.ggis-zoom__close:hover { border-color: var(--ggis-canvas); }
/* power4.out, matching the site's reveal ease. Motion only - the dialog itself
   still opens for reduced-motion visitors, it just appears without the fade. */
@media (prefers-reduced-motion: no-preference) {
  .ggis-zoom[open] { animation: ggis-zoom-in 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
  @keyframes ggis-zoom-in {
    from { opacity: 0; transform: scale(0.985); }
  }
}


/* ---------------------------------------------------------------------------
   Live demo band (Smart Dashboard). Copy left, the console preview right,
   vertically centred against the copy. The preview is a plain framed image so
   a supplied device mockup (transparent PNG) can drop straight in without a
   drawn frame around it - set .ggis-demo__preview--bare in that case.
--------------------------------------------------------------------------- */
.ggis-demo__lede { margin-top: 1.5rem; max-width: 46ch; color: var(--ggis-ink-mid); }
.ggis-demo__action {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.ggis-demo__grid { display: grid; grid-template-columns: 1fr; gap: 3.5rem; }

/* the frame comes from .ggis-screen, same as the module dashboards */
.ggis-demo__preview { display: block; }
/* for a supplied device mockup on transparency - no frame, no fill, no shadow */
.ggis-demo__preview--bare {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

@media (min-width: 64rem) {
  .ggis-demo__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 5rem;
    align-items: center;
  }
}


/* ---------------------------------------------------------------------------
   Bento cards (CMS task queuing). A widget panel at the top of each card, then
   title and description beneath, the whole unit on its own card. The widget
   SVGs are transparent, so the tinted panel behind them supplies the ground.
--------------------------------------------------------------------------- */
.ggis-bento__grid {
  margin-top: 4.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.ggis-bento {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 2rem;
  border: 1px solid var(--ggis-line);
  border-radius: 1.25rem;
  background: var(--ggis-canvas-bright);
}
.ggis-bento__widget {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: 0.85rem;
  background: var(--ggis-canvas-tint);
}
.ggis-bento__widget img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ggis-bento__title {
  margin-top: 1.75rem;
  font-family: var(--ggis-font-display);
  font-size: var(--fs-title-lg);
  font-weight: 420;
  line-height: 1.2;
  color: var(--ggis-ink);
}
.ggis-bento__text {
  margin-top: 0.75rem;
  font-size: var(--fs-body);
  color: var(--ggis-ink-mid);
}
@media (min-width: 48rem) {
  .ggis-bento__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
}

/* ---------------------------------------------------------------------------
   Before/after comparison figure (CMS quality assurance). The composite carries
   both frames whole, so the wrapper ratio matches the file exactly (1200x1520)
   and neither .ggis-parallax nor .ggis-figure--vh is applied here - both scale
   or cap the frame, and either one would crop the very thing being compared.
   The labels run vertically up the left edge, which is light wall in both
   frames, so they take ink rather than canvas.
--------------------------------------------------------------------------- */
.ggis-figure--dual {
  aspect-ratio: 15 / 19;
}
.ggis-figure__vlabel {
  position: absolute;
  left: 1.25rem;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  color: var(--ggis-ink);
  pointer-events: none;
}
.ggis-figure__vlabel--before { top: 25%; }
.ggis-figure__vlabel--after { top: 75%; }

/* ---------------------------------------------------------------------------
   IFM page — the brief grew two sections past what their grids were built for.
--------------------------------------------------------------------------- */

/* The problem band gained a lede. .ggis-lead is ink-coloured for the light
   ground, so it has to be lifted onto the dark band; 0.8 keeps it above the
   card body text (0.7) without going to full canvas. */
.ggis-problem__lede {
  margin-top: 1.5rem;
  max-width: 60ch;
  color: rgba(250, 247, 240, 0.8);
}

/* Five problem cards. A six-column track puts three across the first row and
   two across the second, both rows filling the width, rather than leaving a
   hole beside the fifth card. */
@media (min-width: 64rem) {
  .ggis-problem__grid { grid-template-columns: repeat(6, 1fr); }
  .ggis-problem__card { grid-column: span 2; }
  .ggis-problem__card:nth-child(4),
  .ggis-problem__card:nth-child(5) { grid-column: span 3; }
}

/* Three technology pillars, no longer two. */
@media (min-width: 64rem) {
  .ggis-duo__grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}