/* ==========================================================================
   About page (2026 UI) — shared foundation. Everything is scoped to .gt-ab so
   nothing leaks into the rest of the site (the legacy about.css still loads
   on every page and must keep working elsewhere).
   ========================================================================== */
.gt-ab {
  --ab-wrap: 1240px;
  --ab-wide: 1440px;
  --ab-gutter: clamp(16px, 4vw, 40px);
  --ab-sec: clamp(56px, 7vw, 104px);
  --ab-line: #dcdce2;
  --ab-soft: #f5f5f7;
  --ab-lav: #f3f0fc;
  --ab-text: #3b3b3b;
  display: block;
  color: var(--ab-text);
  font-family: "Inter Tight", Arial, Helvetica, sans-serif;
  overflow-x: clip;
}
.gt-ab *, .gt-ab *::before, .gt-ab *::after { box-sizing: border-box; }
.gt-ab img { max-width: 100%; height: auto; display: block; }
.gt-ab h1, .gt-ab h2, .gt-ab h3, .gt-ab h4, .gt-ab p, .gt-ab ul, .gt-ab ol, .gt-ab figure { margin: 0; }
.gt-ab ul, .gt-ab ol { padding: 0; list-style: none; }
.gt-ab a { color: inherit; }
.gt-ab-wrap { width: 100%; max-width: calc(var(--ab-wrap) + 2 * var(--ab-gutter)); margin-inline: auto; padding-inline: var(--ab-gutter); }
.gt-ab-wrap--wide { max-width: calc(var(--ab-wide) + 2 * var(--ab-gutter)); }
.gt-ab-sec { padding-block: var(--ab-sec); }
.gt-ab-sec--tight { padding-block: calc(var(--ab-sec) * .6); }
.gt-ab-soft { background: var(--ab-soft); }

.gt-ab-eyebrow { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 14px; font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: #5b5b5b; }
.gt-ab-eyebrow--line::after { content: ""; width: 56px; height: 1px; background: currentColor; opacity: .55; }
.gt-ab-h2 { margin: 0 0 14px; font-size: clamp(30px, 18px + 1.9vw, 50px); line-height: 1.1; font-weight: 600; letter-spacing: -.012em; color: var(--gt-ink, #111); }
.gt-ab-h3 { font-size: clamp(19px, 16px + .5vw, 24px); line-height: 1.25; font-weight: 600; color: var(--gt-ink, #111); }
.gt-ab-lead { font-size: clamp(15px, 14px + .25vw, 17px); line-height: 1.6; color: #555; }
.gt-ab-center { text-align: center; }
.gt-ab-center .gt-ab-lead { max-width: 62ch; margin-inline: auto; }
.gt-ab-rule { display: block; width: 120px; height: 2px; margin: 18px auto 0; border: 0; background: var(--gt-purple, #7B4FF4); }
.gt-ab-hr { height: 1px; margin: 0; border: 0; background: var(--ab-line); }

.gt-ab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 26px; border: 0; border-radius: 6px; background: var(--gt-purple, #7B4FF4); color: #fff; font: 600 15px/1.2 "Inter Tight", Arial, sans-serif; text-decoration: none; cursor: pointer; transition: background .2s, transform .2s; }
.gt-ab-btn:hover { background: var(--gt-purple-dark, #5F34D6); color: #fff; transform: translateY(-1px); }
.gt-ab-btn:focus-visible, .gt-ab-nav:focus-visible, .gt-ab a:focus-visible { outline: 3px solid var(--gt-purple, #7B4FF4); outline-offset: 3px; }
.gt-ab-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; font-size: 14px; color: var(--gt-ink, #111); text-decoration: none; }
.gt-ab-link:hover { color: var(--gt-purple, #7B4FF4); }
.gt-ab-ico { width: 20px; height: 20px; flex: 0 0 auto; }

/* round prev/next control used by every carousel */
.gt-ab-nav { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--gt-purple, #7B4FF4); color: #fff; cursor: pointer; transition: background .2s, opacity .2s; }
.gt-ab-nav:hover { background: var(--gt-purple-dark, #5F34D6); }
.gt-ab-nav[disabled] { opacity: .3; cursor: default; }

.gt-ab-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .gt-ab *, .gt-ab *::before, .gt-ab *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ===== a-intro ===== */
/* ==========================================================================
   About page — group A: hero, Giant Truss Anthem, Our Direction / Our Purpose.
   Built on base.css (.gt-ab-wrap, .gt-ab-sec, .gt-ab-h2, .gt-ab-sr …).
   Breakpoints: mobile < 768px, tablet 768–1279px, desktop ≥ 1280px.
   ========================================================================== */

/* ---------- Hero -------------------------------------------------------- */
.gt-ab .gt-ab-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* 772px at 1920 = the design's 850px band minus the sticky header above it */
  min-height: clamp(300px, 40.2vw, 780px);
  padding: 0;
  overflow: hidden;
  background: var(--gt-ink, #111);
  color: #fff;
}
.gt-ab .gt-ab-hero .gt-ab-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.gt-ab .gt-ab-hero .gt-ab-hero__img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 100%;
}
/* Dark wash measured from the design: light at the top, solid black at the foot */
.gt-ab .gt-ab-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .08) 0%,
    rgba(0, 0, 0, .14) 18%,
    rgba(0, 0, 0, .32) 40%,
    rgba(0, 0, 0, .62) 65%,
    rgba(0, 0, 0, .89) 85%,
    #000 95%);
}
.gt-ab .gt-ab-hero .gt-ab-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 48px;
  padding-bottom: clamp(16px, 2.3vw, 44px);
}
.gt-ab .gt-ab-hero .gt-ab-hero__text {
  max-width: 550px; /* three lines at 16px, broken where the design breaks them */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.44;
  color: #fff;
}
.gt-ab .gt-ab-hero .gt-ab-hero__crumbs {
  margin-top: clamp(20px, 2.4vw, 46px);
}
.gt-ab .gt-ab-hero .gt-ab-hero__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(255, 255, 255, .82);
}
.gt-ab .gt-ab-hero .gt-ab-hero__crumbs li {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.gt-ab .gt-ab-hero .gt-ab-hero__crumbs a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.gt-ab .gt-ab-hero .gt-ab-hero__crumbs a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gt-ab .gt-ab-hero .gt-ab-hero__sep {
  margin: 0 11px 0 3px;
}

/* ---------- Giant Truss Anthem ----------------------------------------- */
.gt-ab .gt-ab-anthem {
  padding-block: clamp(12px, 1.6vw, 31px) clamp(8px, 1.25vw, 24px);
}
.gt-ab .gt-ab-anthem .gt-ab-anthem__rule {
  display: block;
  width: 80px;
  height: 2px;
  margin: 0 auto clamp(20px, 1.8vw, 35px);
  background: var(--gt-ink, #111);
  opacity: .78;
}
.gt-ab .gt-ab-anthem .gt-ab-anthem__title {
  margin: 0;
  font-size: clamp(26px, 16px + 2.4vw, 62px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--gt-ink, #111);
}
.gt-ab .gt-ab-anthem .gt-ab-anthem__sub {
  max-width: 46em;
  margin: clamp(4px, .45vw, 8px) auto 0;
  font-size: clamp(14px, 12px + .33vw, 18px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--gt-body, #767676);
}
.gt-ab .gt-ab-anthem .gt-ab-anthem__media {
  position: relative;
  margin-top: clamp(20px, 4.6vw, 89px);
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gt-ink, #111);
  isolation: isolate;
}
/* The poster file (ID 859) has a 1px black column at its left and right edges;
   it is widened 3px each side so the card's overflow:hidden clips them. */
.gt-ab .gt-ab-anthem .gt-ab-anthem__poster {
  position: absolute;
  inset: 0 auto 0 -3px;
  width: calc(100% + 6px);
  height: 100%;
  max-width: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 50%;
}
/* The whole card is the link (YouTube URL without JS); the white disc is the visual button */
.gt-ab .gt-ab-anthem .gt-ab-anthem__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--gt-ink, #111);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gt-ab .gt-ab-anthem .gt-ab-anthem__btn {
  display: grid;
  place-items: center;
  width: clamp(60px, 6.8vw, 130px);
  height: clamp(60px, 6.8vw, 130px);
  border-radius: 50%;
  background: #fff;
  color: var(--gt-ink, #111);
  transition: transform .25s ease, color .2s ease, box-shadow .2s ease;
}
.gt-ab .gt-ab-anthem .gt-ab-anthem__btn .gt-ab-ico {
  width: 66%;
  height: 66%;
}
.gt-ab .gt-ab-anthem .gt-ab-anthem__play:focus-visible {
  outline: 3px solid var(--gt-purple, #7B4FF4);
  outline-offset: -6px;
}
.gt-ab .gt-ab-anthem .gt-ab-anthem__play:focus-visible .gt-ab-anthem__btn {
  box-shadow: 0 0 0 4px var(--gt-purple, #7B4FF4);
}
.gt-ab .gt-ab-anthem .gt-ab-anthem__frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (hover: hover) {
  .gt-ab .gt-ab-anthem .gt-ab-anthem__play:hover .gt-ab-anthem__btn {
    transform: scale(1.06);
    color: var(--gt-purple, #7B4FF4);
  }
}

/* ---------- Our Direction / Our Purpose -------------------------------- */
.gt-ab .gt-ab-direction {
  padding-block: clamp(8px, 1.6vw, 30px) clamp(24px, 2.8vw, 54px);
}
.gt-ab .gt-ab-direction .gt-ab-direction__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.gt-ab .gt-ab-direction .gt-ab-direction__item {
  min-width: 0;
}
.gt-ab .gt-ab-direction .gt-ab-direction__label {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--gt-ink, #111);
}
.gt-ab .gt-ab-direction .gt-ab-direction__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--gt-ink, #111);
}

/* ---------- Mobile (< 768px) ------------------------------------------- */
@media (max-width: 767px) {
  .gt-ab .gt-ab-hero::after {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, .05) 0%,
      rgba(0, 0, 0, .12) 30%,
      rgba(0, 0, 0, .5) 62%,
      rgba(0, 0, 0, .78) 100%);
  }
  /* Tight crop on the office block, as in the mobile design (roofline at the
     top, glass office front in the middle, lawn at the foot) instead of the
     whole aerial under open sky. Paired with the hero img `sizes` in
     a-intro.php so phones fetch a file big enough for the zoom. */
  .gt-ab .gt-ab-hero .gt-ab-hero__img {
    object-position: 50% 50%;
    transform: scale(2.5);
    transform-origin: 14% 68%;
  }
  .gt-ab .gt-ab-hero .gt-ab-hero__text {
    font-size: 17px;
    line-height: 1.36;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  }
  /* mobile design shows only the second sentence and no breadcrumb */
  .gt-ab .gt-ab-hero .gt-ab-hero__lead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .gt-ab .gt-ab-hero .gt-ab-hero__crumbs {
    display: none;
  }
  .gt-ab .gt-ab-anthem .gt-ab-anthem__rule {
    display: none;
  }
}

/* ---------- Tablet and up (≥ 768px) ------------------------------------ */
@media (min-width: 768px) {
  .gt-ab .gt-ab-hero {
    min-height: clamp(380px, 40.2vw, 780px);
  }
  .gt-ab .gt-ab-anthem .gt-ab-anthem__media,
  .gt-ab .gt-ab-anthem .gt-ab-anthem__poster {
    aspect-ratio: 1248 / 577;
  }
  /* the player itself always gets a true 16:9 box */
  .gt-ab .gt-ab-anthem .gt-ab-anthem__media.is-playing {
    aspect-ratio: 16 / 9;
  }
  .gt-ab .gt-ab-direction .gt-ab-direction__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 5vw, 64px);
  }
  .gt-ab .gt-ab-direction .gt-ab-direction__label {
    font-size: 20px;
  }
  .gt-ab .gt-ab-direction .gt-ab-direction__text {
    font-size: clamp(16px, 13px + .4vw, 20px);
    line-height: 1.25;
  }
}

/* ---------- Desktop (≥ 1280px): label beside body, as in the design ----- */
@media (min-width: 1280px) {
  /* the design's two statements span ~1553px at 1920 — wider than --ab-wide */
  .gt-ab .gt-ab-direction .gt-ab-direction__wrap {
    max-width: calc(1553px + 2 * var(--ab-gutter));
  }
  .gt-ab .gt-ab-direction .gt-ab-direction__grid {
    column-gap: clamp(48px, 24vw - 184px, 276px);
  }
  .gt-ab .gt-ab-direction .gt-ab-direction__item {
    display: grid;
    grid-template-columns: clamp(120px, 9.2vw, 176px) minmax(0, 1fr);
    align-items: start;
  }
  .gt-ab .gt-ab-direction .gt-ab-direction__label {
    width: min-content;
    margin: 0;
    font-size: clamp(18px, 13px + .4vw, 20px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .gt-ab .gt-ab-direction .gt-ab-direction__text {
    max-width: 470px;
    line-height: 1.2;
  }
}

/* ---------- Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gt-ab .gt-ab-anthem .gt-ab-anthem__btn {
    transition: none;
  }
  .gt-ab .gt-ab-anthem .gt-ab-anthem__play:hover .gt-ab-anthem__btn {
    transform: none;
  }
}

/* ---------- Anthem poster on phones: tall portrait frame from the video ---- */
.gt-ab .gt-ab-anthem .gt-ab-anthem__pic { display: contents; }
@media (max-width: 767px) {
  .gt-ab .gt-ab-anthem .gt-ab-anthem__media:not(.is-playing),
  .gt-ab .gt-ab-anthem .gt-ab-anthem__media:not(.is-playing) .gt-ab-anthem__poster { aspect-ratio: 9 / 16; }
  .gt-ab .gt-ab-anthem .gt-ab-anthem__media { border-radius: 15px; }
  /* the portrait frame has no black edge columns, so undo the desktop bleed */
  .gt-ab .gt-ab-anthem .gt-ab-anthem__poster { inset: 0; width: 100%; }
}

/* ===== b-numbers ===== */
/* ==========================================================================
   About (2026 UI) — group B: key company statistics, our journey, what we do.
   Every selector is scoped to .gt-ab .gt-ab-numbers | -journey | -whatwedo.
   Breakpoints follow the two designs: phone < 768 (mobile mock-up),
   tablet 768–1023, desktop ≥ 1024 (1920 mock-up).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Key company statistics — "Numbers That Build Trust"
   The design frames the band with a hairline on top and a heavier rule below,
   both narrower than the stat row. They sit on the section edges, so the
   section padding is the gap between rule and content.
   -------------------------------------------------------------------------- */
.gt-ab .gt-ab-numbers { position: relative; }
.gt-ab .gt-ab-numbers::before,
.gt-ab .gt-ab-numbers::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(1172px, 62%);
  height: 1px;
  background: var(--ab-line, #dcdce2);
  transform: translateX(-50%);
  pointer-events: none;
}
.gt-ab .gt-ab-numbers::before { top: 0; }
.gt-ab .gt-ab-numbers::after { bottom: 0; height: 3px; }

/* The design sets this heading larger than the shared .gt-ab-h2 cap (62px at
   1920); phones keep the shared 30px. */
.gt-ab .gt-ab-numbers-title {
  font-size: clamp(30px, 17.5px + 2.3vw, 62px);
  text-wrap: balance;
}
/* `.gt-ab p { margin: 0 }` outranks the shared eyebrow margin, so the gap to
   the heading is set here. */
.gt-ab .gt-ab-numbers-head .gt-ab-eyebrow {
  margin-bottom: clamp(2px, .47vw, 9px);
  font-size: clamp(12px, 10px + .36vw, 17px);
  letter-spacing: .2em;
  color: #222;
}
.gt-ab .gt-ab-numbers-head .gt-ab-lead {
  font-size: clamp(15px, 14px + .2vw, 18px);
  line-height: 1.34;
  color: #222;
}

.gt-ab .gt-ab-numbers-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: auto;
  margin: clamp(28px, 3vw, 52px) 0 0;
  padding: 0;
  list-style: none;
}
/* Each stat spans three shared rows (value / label / text) so a label that
   wraps in one column keeps every description on the same line. */
.gt-ab .gt-ab-numbers-item {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
  justify-items: center;
  min-width: 0;
  margin: 0;
  padding: clamp(10px, 1vw, 16px) clamp(6px, 1vw, 16px) clamp(6px, .6vw, 10px);
  border-left: 1px solid var(--ab-line, #dcdce2);
  text-align: center;
}
.gt-ab .gt-ab-numbers-item:first-child { border-left: 0; }

.gt-ab .gt-ab-numbers-value {
  font-size: clamp(28px, 16px + 2.2vw, 60px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gt-ink, #111);
}
.gt-ab .gt-ab-numbers-label {
  margin-top: clamp(2px, .26vw, 5px);
  font-size: clamp(11px, 9px + .4vw, 16px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gt-ink, #111);
}
.gt-ab .gt-ab-numbers-desc {
  margin-top: clamp(6px, .95vw, 18px);
  font-size: clamp(12px, 9.5px + .45vw, 18px);
  line-height: 1.3;
  color: var(--gt-title, #242424);
}

/* --------------------------------------------------------------------------
   2. Our Journey — centred title with a purple underline, one wide paragraph.
   The design hangs the title just under the stats rule and runs the paragraph
   wider than the shared 1440px wrap.
   -------------------------------------------------------------------------- */
.gt-ab .gt-ab-journey { padding-top: clamp(16px, 1.4vw, 27px); }
.gt-ab .gt-ab-journey .gt-ab-wrap--wide { max-width: calc(1640px + 2 * var(--ab-gutter, 16px)); }
.gt-ab .gt-ab-journey-title {
  margin-bottom: clamp(12px, 1.3vw, 24px);
  font-size: clamp(36px, 28px + 1.25vw, 52px);
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-color: var(--gt-purple, #7B4FF4);
  text-decoration-thickness: .075em;
  text-underline-offset: .13em;
  text-decoration-skip-ink: auto;
}
.gt-ab .gt-ab-journey-text {
  max-width: 1640px;
  margin: 0 auto;
  font-size: clamp(15px, 13.5px + .33vw, 20px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--gt-ink, #111);
  text-wrap: pretty;
}
/* The client copy runs as two paragraphs; the second sits one short beat below. */
.gt-ab .gt-ab-journey-text + .gt-ab-journey-text { margin-top: .75em; }

/* --------------------------------------------------------------------------
   3. What we do — "Complete Event Infrastructure Solutions"
   Five category columns between two wide rules. Desktop is a static row;
   below 1024px the row becomes a native scroll-snap strip (swipe works with
   JS off). b-numbers.js only reveals the "next" arrow.
   -------------------------------------------------------------------------- */
.gt-ab .gt-ab-whatwedo {
  position: relative;
  padding-top: clamp(20px, 1.5vw, 29px);
}
.gt-ab .gt-ab-whatwedo::before,
.gt-ab .gt-ab-whatwedo::after {
  content: "";
  position: absolute;
  left: 50%;
  width: min(1470px, calc(100% - 2 * var(--ab-gutter, 16px)));
  height: 5px;
  background: var(--ab-line, #dcdce2);
  transform: translateX(-50%);
  pointer-events: none;
}
.gt-ab .gt-ab-whatwedo::before { top: 0; }
.gt-ab .gt-ab-whatwedo::after { bottom: 0; }

/* Shared eyebrow/h2 margins lose to `.gt-ab p, .gt-ab h2 { margin: 0 }`, so
   this band's rhythm is set here. */
.gt-ab .gt-ab-whatwedo-head .gt-ab-eyebrow {
  margin-bottom: clamp(11px, 1.35vw, 26px);
  font-size: clamp(12px, 10.5px + .23vw, 15px);
  letter-spacing: .28em;
  color: #333;
}
.gt-ab .gt-ab-whatwedo-heading {
  margin-bottom: clamp(2px, .75vw, 14px);
  font-weight: 700;
  text-wrap: balance;
}
.gt-ab .gt-ab-whatwedo-head .gt-ab-lead {
  font-size: clamp(15px, 13.5px + .3vw, 19px);
  line-height: 1.37;
  color: #2b2b2b;
}

.gt-ab .gt-ab-whatwedo-carousel { margin-top: clamp(20px, 2.9vw, 56px); }

.gt-ab .gt-ab-whatwedo-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Shared rows (number / title / dash / text / link) keep the dashes and the
   "Learn More" links level across columns whatever the text length. */
.gt-ab .gt-ab-whatwedo-card {
  display: grid;
  grid-row: 1 / span 5;
  grid-template-rows: subgrid;
  align-content: start;
  justify-items: start;
  min-width: 0;
  margin: 0;
  padding: 4px clamp(8px, 1vw, 20px) 4px clamp(14px, 1.9vw, 36px);
  border-left: 1px solid var(--ab-line, #dcdce2);
}
.gt-ab .gt-ab-whatwedo-card:first-child { border-left: 0; }

.gt-ab .gt-ab-whatwedo-num {
  font-size: clamp(13px, 12px + .2vw, 16px);
  line-height: 1.2;
  letter-spacing: .05em;
  color: var(--gt-title, #242424);
}
/* 28px bold at 1920; the gentle slope keeps "& Crowd Control" on one line in
   the five narrow columns just above 1024. */
.gt-ab .gt-ab-whatwedo-title {
  margin-top: clamp(14px, 1.6vw, 30px);
  font-size: clamp(20px, 11px + .9vw, 28px);
  font-weight: 700;
  line-height: 1.14;
}
.gt-ab .gt-ab-whatwedo-dash {
  display: block;
  width: clamp(28px, 2vw, 38px);
  height: 2px;
  margin-top: clamp(14px, 1.4vw, 26px);
  background: var(--gt-ink, #111);
}
.gt-ab .gt-ab-whatwedo-desc {
  max-width: 11.75em;
  margin-top: clamp(14px, 1.7vw, 32px);
  font-size: clamp(14px, 13px + .16vw, 16px);
  line-height: 1.45;
  color: var(--ab-text, #3b3b3b);
}
.gt-ab .gt-ab-whatwedo-link { margin-top: clamp(10px, 1.4vw, 28px); }

/* The arrow ships hidden; .gt-ab-nav's display would otherwise beat [hidden]. */
.gt-ab .gt-ab-whatwedo-next[hidden] { display: none; }
/* WoodMart's :is(.btn, button, …) rule ties with .gt-ab-nav and loads later
   (grey square), so the mobile design's black disc is restated here. The 44px
   box stays the tap target; the disc is its content box (background-clip). */
.gt-ab .gt-ab-whatwedo-next {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 7px;
  border: 0;
  border-radius: 50%;
  background: var(--gt-ink, #111);
  background-clip: content-box;
  color: #fff;
  box-shadow: none;
}
.gt-ab .gt-ab-whatwedo-next:hover { background-color: #333; color: #fff; }
.gt-ab .gt-ab-whatwedo-next .gt-ab-ico { transition: transform .25s ease; }
.gt-ab .gt-ab-whatwedo-next.is-end .gt-ab-ico { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   Large desktop: the design's heavier rules.
   -------------------------------------------------------------------------- */
@media (max-width: 1599px) {
  .gt-ab .gt-ab-whatwedo::before,
  .gt-ab .gt-ab-whatwedo::after { height: 4px; }
}

/* --------------------------------------------------------------------------
   Tablet and phone (< 1024)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .gt-ab .gt-ab-numbers::after { height: 2px; }
  .gt-ab .gt-ab-whatwedo::before,
  .gt-ab .gt-ab-whatwedo::after { height: 3px; }

  /* Stats: three on the first row, two centred below (as wide as they need
     for "MANUFACTURING" to fit on a phone). */
  .gt-ab .gt-ab-numbers-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gt-ab .gt-ab-numbers-item { grid-column: span 2; }
  .gt-ab .gt-ab-numbers-item:nth-child(n+4) {
    grid-column: span 3;
    margin-top: clamp(18px, 3vw, 28px);
  }
  .gt-ab .gt-ab-numbers-item:nth-child(4) { border-left: 0; }

  /* What we do: horizontal strip, scrolling inside its own track only. */
  .gt-ab .gt-ab-whatwedo-track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% / 3);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--ab-line, #dcdce2) transparent;
    padding-block: 4px 10px;
  }
  .gt-ab .gt-ab-whatwedo-card { scroll-snap-align: start; }
  /* Room for the first link's focus ring inside the clipped track. */
  .gt-ab .gt-ab-whatwedo-card:first-child { padding-left: 6px; }

  /* With JS, the arrow takes its own column beside the strip (never over text). */
  .gt-ab .gt-ab-whatwedo-carousel.is-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
  }
}

/* --------------------------------------------------------------------------
   Phone (< 768) — the mobile mock-up swaps the middle rules for full-bleed
   purple bars, drops the title underline and packs the three bands tight
   against those bars.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .gt-ab .gt-ab-numbers::after {
    width: 100%;
    height: 3px;
    background: var(--gt-purple, #7B4FF4);
  }
  .gt-ab .gt-ab-whatwedo::before {
    width: 100%;
    background: var(--gt-purple, #7B4FF4);
  }
  .gt-ab .gt-ab-whatwedo::after { height: 2px; }

  /* Stats: compact band; 4px side padding lets "International Markets" hold
     one line at 390. */
  .gt-ab .gt-ab-numbers { padding-block: 12px 14px; }
  .gt-ab .gt-ab-numbers-br { display: none; }
  .gt-ab .gt-ab-numbers-list { margin-top: 8px; }
  .gt-ab .gt-ab-numbers-item { padding-top: 0; padding-inline: 4px; }
  .gt-ab .gt-ab-numbers-item:nth-child(n+4) { margin-top: 16px; }

  /* Journey: a larger, bolder title in place of the underline. */
  .gt-ab .gt-ab-journey { padding-block: 8px 12px; }
  .gt-ab .gt-ab-journey-title {
    margin-bottom: 6px;
    font-size: clamp(36px, 11.5vw, 46px);
    font-weight: 600;
    text-decoration-line: none;
  }

  .gt-ab .gt-ab-whatwedo { padding-block: 12px 4px; }
  .gt-ab .gt-ab-whatwedo-carousel { margin-top: 8px; }
  .gt-ab .gt-ab-whatwedo-br { display: none; }

  /* Each card sizes its own rows: the shared subgrid let off-screen cards'
     3-line titles and 6-line texts pad the visible pair. Links stay level. */
  .gt-ab .gt-ab-whatwedo-track { grid-template-rows: none; }
  .gt-ab .gt-ab-whatwedo-card {
    grid-row: auto;
    grid-template-rows: auto auto auto auto 1fr;
  }
  .gt-ab .gt-ab-whatwedo-link { align-self: end; }
}

@media (max-width: 599px) {
  /* Two categories per view, never narrower than the longest title word. */
  .gt-ab .gt-ab-whatwedo-track { grid-auto-columns: max(140px, 50%); }
}

/* Desktop never shows the arrow, even if the script misjudges overflow. */
@media (min-width: 1024px) {
  .gt-ab .gt-ab-whatwedo-next { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gt-ab .gt-ab-whatwedo-track { scroll-behavior: auto; }
  .gt-ab .gt-ab-whatwedo-next .gt-ab-ico { transition: none; }
}

/* ===== c-manufacturing ===== */
/* ==========================================================================
   Group C — Manufacturing Excellence (slider) + Certified to Global Standards
   Every selector is scoped to .gt-ab .gt-ab-manufacturing / .gt-ab-certified.
   ========================================================================== */

/* ── Manufacturing Excellence ───────────────────────────────────────────────
   Geometry: the track is full-bleed. A centred "stage" holds exactly
   --mfg-per full slides (2 on tablet/desktop, 1 on phones); the side zones
   (--mfg-side) either side of it show the neighbouring slides peeking in.
   At 1920 the stage is the design's 1736px (two ~856px slides).
   Sizes use container units of the section (100cqi = its width, which
   excludes the page scrollbar); 100vw is the fallback. */
.gt-ab .gt-ab-manufacturing {
  --mfg-100: 100vw;
  --mfg-per: 2;
  --mfg-gap: clamp(12px, 0.0125 * var(--mfg-100) + 4px, 24px);
  --mfg-side: max(clamp(40px, 0.06 * var(--mfg-100), 96px), (var(--mfg-100) - 1736px) / 2);
  --mfg-w: calc((var(--mfg-100) - 2 * var(--mfg-side) - (var(--mfg-per) - 1) * var(--mfg-gap)) / var(--mfg-per));
  --mfg-fade: rgba(255, 255, 255, .92);
  container-type: inline-size;
}
@supports (width: 1cqi) {
  .gt-ab .gt-ab-manufacturing { --mfg-100: 100cqi; }
}

/* heading row: title left, arrows right — aligned to the stage edges */
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: none;
  margin-bottom: clamp(10px, 1.4vw, 26px);
  padding-inline: var(--mfg-side);
}
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-title {
  min-width: 0;
  margin: 0;
  font-size: clamp(22px, 0.029 * var(--mfg-100) + 13px, 68px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--gt-ink, #111);
}
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-nav {
  position: absolute;
  z-index: 3;
  right: var(--mfg-side);
  /* sits in the heading row, bottom-aligned with the title */
  bottom: calc(100% + clamp(10px, 1.4vw, 26px));
  display: flex;
  gap: 10px;
}
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-nav[hidden] { display: none; }
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-nav .gt-ab-nav {
  /* re-assert the round purple arrow over the theme's button rules */
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gt-purple, #7B4FF4);
  color: #fff;
  line-height: 1;
  box-shadow: none;
}
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-nav .gt-ab-nav:hover {
  background: var(--gt-purple-dark, #5F34D6);
  color: #fff;
}

/* viewport + white edge fades over the side zones */
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-viewport { position: relative; }
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-viewport::before,
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: var(--mfg-side);
  pointer-events: none;
}
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--mfg-fade), rgba(255, 255, 255, 0));
}
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--mfg-fade), rgba(255, 255, 255, 0));
}

/* the scroll-snap track (works without JS) */
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-track {
  position: relative;
  display: flex;
  gap: var(--mfg-gap);
  padding-block: 10px; /* room for the peek blur, which the scroller would clip */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--mfg-side);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-track::-webkit-scrollbar { display: none; }
/* side-zone spacers (flex items, so the end space always counts as scrollable) */
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-track::before,
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-track::after {
  content: "";
  flex: 0 0 max(0px, var(--mfg-side) - var(--mfg-gap));
}
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-track:focus { outline: none; }
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-track:focus-visible {
  outline: 3px solid var(--gt-purple, #7B4FF4);
  outline-offset: -3px;
}

/* slides */
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-slide {
  position: relative;
  flex: 0 0 var(--mfg-w);
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(6px, 0.012 * var(--mfg-w), 10px);
  background: #e9e9ee;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06);
  scroll-snap-align: start;
  transition: filter .35s ease, opacity .35s ease;
}
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-slide.is-peek {
  filter: blur(3px);
  opacity: .6;
}
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  -webkit-user-drag: none;
}
/* Robotic Welding: the design crops in on the robot (shelves at the top edge) */
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-slide.is-zoom .gt-ab-manufacturing-img {
  transform: scale(1.17);
  transform-origin: 22% 50%;
}
/* subtle dark gradient behind the caption */
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-slide::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 45%, rgba(0, 0, 0, .62) 100%);
  pointer-events: none;
}
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-cap {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  margin: 0;
  padding: 0 clamp(14px, 0.057 * var(--mfg-w), 50px) clamp(12px, 0.047 * var(--mfg-w), 40px);
  font-size: clamp(15px, 0.0125 * var(--mfg-w) + 13.5px, 24px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-align: left;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
/* decorative expand badge, top-right */
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-expand {
  position: absolute;
  top: clamp(10px, 0.029 * var(--mfg-w), 25px);
  right: clamp(10px, 0.029 * var(--mfg-w), 25px);
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(32px, 0.058 * var(--mfg-w), 50px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  color: var(--gt-purple, #7B4FF4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  pointer-events: none;
}
.gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-expand .gt-ab-ico {
  width: 46%;
  height: 46%;
  stroke-width: 2.5;
}

/* JS-enhanced: drag to scroll with a mouse */
.gt-ab .gt-ab-manufacturing.is-enhanced .gt-ab-manufacturing-track {
  -webkit-user-select: none;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .gt-ab .gt-ab-manufacturing.is-enhanced .gt-ab-manufacturing-track { cursor: grab; }
}
.gt-ab .gt-ab-manufacturing.is-dragging .gt-ab-manufacturing-track {
  cursor: grabbing;
  scroll-snap-type: none;
}

/* phones: one slide, both neighbours peeking */
@media (max-width: 640px) {
  .gt-ab .gt-ab-manufacturing {
    --mfg-per: 1;
    --mfg-side: clamp(24px, 0.08 * var(--mfg-100), 48px);
    --mfg-fade: rgba(255, 255, 255, .7);
  }
  /* mobile design: small bold two-line heading */
  .gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-title { font-size: 14px; font-weight: 700; line-height: 1; }
  .gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-cap { padding: 0 8px 6px; font-size: 20px; font-weight: 600; }
  /* arrows: small white round buttons over the photo edges, centred on the tile */
  .gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-nav {
    inset: 50% calc(var(--mfg-side) + 8px) auto;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-nav .gt-ab-nav,
  .gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-nav .gt-ab-nav:hover {
    pointer-events: auto;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    background: #fff;
    color: #111;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  }
  .gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-nav .gt-ab-nav[disabled] { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-slide { transition: none; }
  .gt-ab .gt-ab-manufacturing .gt-ab-manufacturing-track { scroll-behavior: auto; }
}

/* ── Certified to Global Standards ─────────────────────────────────────────── */
.gt-ab .gt-ab-certified .gt-ab-certified-grid {
  --ab-wrap: 1300px; /* design content width: x312–1612 at 1920 */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 40px);
  align-items: start;
}
.gt-ab .gt-ab-certified .gt-ab-certified-title {
  margin: 0;
  font-size: clamp(24px, 1.8vw + 14px, 48px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--gt-ink, #111);
}
.gt-ab .gt-ab-certified .gt-ab-certified-rule {
  width: clamp(100px, 11.25vw, 216px);
  height: 3px;
  margin: clamp(14px, 1.2vw, 20px) 0 clamp(16px, 1.4vw, 24px);
}
.gt-ab .gt-ab-certified .gt-ab-certified-text {
  max-width: 32em;
  font-size: clamp(15px, .2vw + 14px, 16px);
  line-height: 1.5;
  color: #242424;
}

.gt-ab .gt-ab-certified .gt-ab-certified-card {
  min-width: 0;
  padding: clamp(22px, 2.2vw, 30px) clamp(18px, 2vw, 28px) clamp(22px, 2vw, 28px);
  border-top: 3px solid var(--gt-purple, #7B4FF4);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 12px 32px -14px rgba(17, 17, 17, .14);
}
.gt-ab .gt-ab-certified .gt-ab-certified-badge { margin-bottom: clamp(16px, 1.6vw, 24px); }
.gt-ab .gt-ab-certified .gt-ab-certified-badge-img {
  display: block;
  width: clamp(64px, 3vw + 48px, 105px);
  height: auto;
  aspect-ratio: 215 / 158;
  object-fit: contain;
  object-position: left center;
}
.gt-ab .gt-ab-certified .gt-ab-certified-card-title {
  margin: 0 0 clamp(10px, 1vw, 14px);
  font-size: clamp(18px, .7vw + 12px, 25px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #242424;
}
.gt-ab .gt-ab-certified .gt-ab-certified-card-text {
  margin: 0 0 clamp(20px, 2vw, 28px);
  font-size: clamp(15px, .2vw + 14px, 16px);
  line-height: 1.55;
  color: var(--ab-text, #3b3b3b);
}
.gt-ab .gt-ab-certified .gt-ab-certified-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 0;
  padding: 6px 16px;
  border: 2px solid rgba(123, 79, 244, .45);
  border: 2px solid color-mix(in srgb, var(--gt-purple, #7B4FF4) 45%, transparent);
  border-radius: 999px;
  background: rgba(123, 79, 244, .16);
  background: color-mix(in srgb, var(--gt-purple, #7B4FF4) 16%, transparent);
  color: var(--gt-purple-dark, #5F34D6);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

@media (min-width: 900px) {
  .gt-ab .gt-ab-certified .gt-ab-certified-grid {
    grid-template-columns: minmax(0, 660fr) minmax(0, 576fr);
    column-gap: 64px;
  }
}
/* phones: purple separator above the band (mobile design); card loses its top rule */
@media (max-width: 640px) {
  .gt-ab .gt-ab-certified { border-top: 3px solid var(--gt-purple, #7B4FF4); }
  .gt-ab .gt-ab-certified .gt-ab-certified-card { border-top: 0; }
}

/* ===== d-global ===== */
/* ==========================================================================
   d-global — "Global Presence. Global Impact." exhibition tabs + photo
   strips, "From India to the World." map, and "Countries we have exported
   to". Every selector is scoped to its own section.
   ========================================================================== */

/* The three bands share the design's 1736px stage, the one the Manufacturing
   slider above them uses: content runs x 92 → 1828 at 1920. */
.gt-ab .gt-ab-exhibitions > .gt-ab-wrap,
.gt-ab .gt-ab-world > .gt-ab-wrap,
.gt-ab .gt-ab-countries > .gt-ab-wrap { max-width: calc(1736px + 2 * var(--ab-gutter)); }

/* ---- 1. Global Presence. Global Impact. ---------------------------------- */
.gt-ab .gt-ab-exhibitions {
  /* WoodMart forces its focus ring with !important and draws it half inside
     the control by default, which vanishes on the purple tab and arrows. */
  --wd-otl-offset: 3px;
  padding-top: calc(var(--ab-sec) * .6);
  padding-bottom: calc(var(--ab-sec) * .35);
}
/* .gt-ab-nav and the tablist set their own display, so [hidden] needs help. */
.gt-ab .gt-ab-exhibitions [hidden] { display: none !important; }

.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__head { text-align: center; }
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__title {
  font-weight: 500;
  line-height: 1.04;
  text-transform: none;
}
.gt-ab .gt-ab-exhibitions .gt-ab-rule {
  width: clamp(150px, 46vw, 200px);
  margin-top: clamp(14px, 1.5vw, 20px);
}
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__intro {
  max-width: 32em; /* breaks after "showcase", as in the design */
  margin: clamp(14px, 1.5vw, 20px) auto 0;
  color: var(--gt-title, #242424);
  font-size: clamp(15px, 14px + .2vw, 16px);
  line-height: 1.5;
}

/* Tabs — revealed by d-global.js. WoodMart styles every <button>, so each
   property it touches is set here. */
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(28px, 3vw, 44px);
}
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 10px clamp(20px, 2.2vw, 32px);
  border: 0;
  border-radius: 6px;
  background: #f1f2f4;
  box-shadow: none;
  color: #666;
  font-family: inherit;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__tab:hover {
  background: #e6e7eb;
  color: var(--gt-ink, #111);
}
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__tab[aria-selected="true"] {
  background: var(--gt-purple, #7B4FF4);
  box-shadow: 0 6px 18px rgba(123, 79, 244, .25);
  color: #fff;
}
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__tab[aria-selected="true"]:hover {
  background: var(--gt-purple-dark, #5F34D6);
  color: #fff;
}

/* Panels. Without JS they stack, each under its own heading. */
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__panels { margin-top: 16px; }
.gt-ab .gt-ab-exhibitions:not(.is-tabbed) .gt-ab-exhibitions__panels { margin-top: clamp(28px, 3vw, 44px); }
.gt-ab .gt-ab-exhibitions:not(.is-tabbed) .gt-ab-exhibitions__panel + .gt-ab-exhibitions__panel { margin-top: 32px; }
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__panel-title {
  margin: 0 0 12px;
  color: var(--gt-ink, #111);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
}
.gt-ab .gt-ab-exhibitions.is-tabbed .gt-ab-exhibitions__panel-title { display: none; }

/* Photo strip: the track scrolls sideways inside itself, never the page. */
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__strip { position: relative; }
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__track {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0 0 10px; /* room for the scrollbar shown when JS is off */
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__strip.is-ready .gt-ab-exhibitions__track {
  padding-bottom: 0;
  scrollbar-width: none;
}
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__strip.is-ready .gt-ab-exhibitions__track::-webkit-scrollbar { display: none; }
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__slide {
  flex: 0 0 84%; /* phone: one photo plus a peek of the next */
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background: var(--ab-soft, #f5f5f7);
  scroll-snap-align: start;
}
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1; /* the design's short panoramic band (≈2.16:1 and 1.78:1 photos at one height) */
  object-fit: cover;
}

/* Round purple arrows (.gt-ab-nav). On the live site WoodMart's generic
   :is(.btn, button, …) rule wins the specificity tie with .gt-ab-nav and
   turned them into grey squares, so every property it sets is restated. */
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gt-purple, #7B4FF4);
  box-shadow: 0 4px 14px rgba(17, 17, 17, .25);
  color: #fff;
  line-height: 1;
  transform: translateY(-50%);
  transition: background-color .2s;
}
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__nav:hover {
  background: var(--gt-purple-dark, #5F34D6);
  color: #fff;
}
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__nav--prev { left: 10px; }
.gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__nav--next { right: 10px; }

@media (max-width: 599px) {
  /* all tabs on one row, full width, each as wide as its one-line label,
     as in the mobile design */
  .gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__tabs {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__tab {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 8px 6px;
    font-size: clamp(10.5px, 3.3vw, 13px);
    white-space: nowrap;
  }
  /* no arrows in the mobile design: the strip swipes, and the focusable
     track scrolls from the keyboard */
  .gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__nav { display: none; }
}
@media (min-width: 600px) {
  .gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__slide { flex-basis: calc((100% - 24px) / 2.3); }
}
@media (min-width: 1024px) {
  .gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__slide { flex-basis: calc((100% - 36px) / 4); }
}
@media (min-width: 1900px) {
  /* enough margin beside the 1736px stage to sit the arrows outside the
     strip, as in the design (1900, not 1880, leaves room for a scrollbar) */
  .gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__nav { box-shadow: none; }
  .gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__nav--prev { left: -64px; }
  .gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__nav--next { right: -64px; }
}

/* ---- 2. From India to the World. ---------------------------------------- */
.gt-ab .gt-ab-world {
  --wd-otl-offset: 3px;
  padding-top: calc(var(--ab-sec) * .25);
  padding-bottom: calc(var(--ab-sec) * .55);
}
/* phone: heading, map, copy, button — centred */
.gt-ab .gt-ab-world .gt-ab-world__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "map" "text" "cta";
  justify-items: center;
  text-align: center;
}
/* design: ≈19px with .35em tracking and an 84 × 2px rule, like the
   countries eyebrow below */
.gt-ab .gt-ab-world .gt-ab-world__eyebrow {
  display: none;
  grid-area: eyebrow;
  gap: clamp(14px, 1.8vw, 34px);
  margin: 0 0 clamp(20px, 3.8vw, 60px);
  font-size: clamp(12px, 1vw, 19px);
  line-height: 1.3;
  letter-spacing: .35em;
}
.gt-ab .gt-ab-world .gt-ab-world__eyebrow::after {
  width: clamp(56px, 4.4vw, 84px);
  height: 2px;
  opacity: .8;
}
.gt-ab .gt-ab-world .gt-ab-world__title {
  grid-area: title;
  margin: 0;
  color: var(--gt-ink, #111);
  font-size: clamp(24px, 10px + 3.25vw, 72px); /* design 72px, the same cap height as "Engineered in Germany." */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-transform: none;
}
.gt-ab .gt-ab-world .gt-ab-world__map {
  grid-area: map;
  width: 100%;
  max-width: 760px;
  margin: 12px 0 0;
}
.gt-ab .gt-ab-world .gt-ab-world__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2000 / 1142;
  object-fit: contain; /* the pins and labels must never be cropped */
  filter: brightness(1.02); /* the export's #fdfdfd backdrop would show as a box on white */
}
.gt-ab .gt-ab-world .gt-ab-world__text {
  grid-area: text;
  max-width: 34em;
  margin-top: 20px;
  color: #555;
  font-size: clamp(16px, 1.46vw, 28px); /* design 28/41 at 1920; pure vw keeps 19em inside the copy column */
  line-height: 1.46;
}
.gt-ab .gt-ab-world .gt-ab-world__cta {
  grid-area: cta;
  margin-top: clamp(22px, 2.6vw, 40px);
}
/* `.gt-ab a { color: inherit }` outranks .gt-ab-btn's white, so pin it. */
.gt-ab .gt-ab-world .gt-ab-world__btn {
  gap: clamp(18px, 1.5vw, 28px);
  min-height: clamp(52px, 3.8vw, 73px); /* design 294 × 73, 26px regular label */
  padding: 14px clamp(30px, 2.3vw, 44px);
  border-radius: 4px;
  color: #fff;
  font-size: clamp(16px, 1.35vw, 26px);
  font-weight: 400;
}
.gt-ab .gt-ab-world .gt-ab-world__btn:hover,
.gt-ab .gt-ab-world .gt-ab-world__btn:focus-visible { color: #fff; }

@media (max-width: 1023px) {
  .gt-ab .gt-ab-world .gt-ab-world__br { display: none; } /* one-line heading */
}
@media (min-width: 768px) {
  .gt-ab .gt-ab-world .gt-ab-world__grid { grid-template-areas: "eyebrow" "title" "map" "text" "cta"; }
  .gt-ab .gt-ab-world .gt-ab-world__eyebrow { display: inline-flex; }
}
@media (min-width: 1024px) {
  /* copy left, map right; the last 1fr row soaks up a map taller than the
     copy. 9 : 16 gives the design's ≈625px copy column and ≈1111px map. */
  .gt-ab .gt-ab-world .gt-ab-world__grid {
    grid-template-columns: minmax(0, 9fr) minmax(0, 16fr);
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
      "eyebrow map"
      "title map"
      "text map"
      "cta map"
      ". map";
    column-gap: 0;
    justify-items: start;
    text-align: left;
  }
  .gt-ab .gt-ab-world .gt-ab-world__map {
    align-self: center;
    max-width: none;
    margin: 0;
  }
  .gt-ab .gt-ab-world .gt-ab-world__text {
    max-width: 19em; /* the design's five-line measure */
    margin-top: clamp(24px, 3vw, 44px);
  }
  .gt-ab .gt-ab-world.gt-ab-world--nomap .gt-ab-world__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "title" "text" "cta" ".";
  }
}

/* ---- 3. Countries we have exported to ------------------------------------ */
.gt-ab .gt-ab-countries {
  --wd-otl-offset: 3px;
  padding-top: 0;
  padding-bottom: calc(var(--ab-sec) * .6);
}
.gt-ab .gt-ab-countries .gt-ab-countries__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: calc(var(--ab-sec) * .55);
  border-top: 1px solid var(--ab-line, #dcdce2);
}
/* design: ≈19px with .35em tracking and a 72 × 2px rule */
.gt-ab .gt-ab-countries .gt-ab-countries__title {
  gap: clamp(14px, 1.45vw, 28px);
  margin: 0;
  font-size: clamp(12px, 1vw, 19px);
  line-height: 1.4;
  letter-spacing: .35em;
}
.gt-ab .gt-ab-countries .gt-ab-countries__title::after {
  width: clamp(56px, 3.75vw, 72px);
  height: 2px;
  opacity: .8;
}
.gt-ab .gt-ab-countries .gt-ab-countries__row { margin-top: clamp(22px, 3.4vw, 52px); }
/* Every item carries a divider on its left; the list is pulled left by one
   divider slot and clipped, so the first item of each row never shows one,
   whatever the wrap. */
.gt-ab .gt-ab-countries .gt-ab-countries__clip { overflow: hidden; }
.gt-ab .gt-ab-countries .gt-ab-countries__list {
  --gt-d-sep: clamp(12px, 2.6vw, 38px); /* space either side of a divider */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: clamp(14px, 2.2vw, 40px);
  margin: 0 0 0 calc(-2 * var(--gt-d-sep) - 1px);
  padding: 0;
  list-style: none;
}
.gt-ab .gt-ab-countries .gt-ab-countries__item {
  position: relative;
  margin: 0;
  padding: 0 0 0 calc(2 * var(--gt-d-sep) + 1px);
  color: var(--gt-ink, #111);
  font-size: clamp(15px, 9px + .8vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gt-ab .gt-ab-countries .gt-ab-countries__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--gt-d-sep);
  width: 1px;
  height: 1.6em;
  background: #c8c8cc;
  transform: translateY(-50%);
}
.gt-ab .gt-ab-countries .gt-ab-countries__item--more {
  color: var(--gt-body, #767676);
  font-weight: 400;
}

/* Phones: the arrow that pages the one-row list. d-global.js shows it only
   while the row overflows; at the end it flips and rewinds, like What We Do.
   WoodMart's generic button rule is restated as for the exhibition arrows. */
.gt-ab .gt-ab-countries .gt-ab-countries__next {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gt-purple, #7B4FF4);
  box-shadow: none;
  color: #fff;
  line-height: 1;
  transition: background-color .2s;
}
.gt-ab .gt-ab-countries .gt-ab-countries__next:hover {
  background: var(--gt-purple-dark, #5F34D6);
  color: #fff;
}
.gt-ab .gt-ab-countries .gt-ab-countries__next[hidden] { display: none; }
.gt-ab .gt-ab-countries .gt-ab-countries__next .gt-ab-ico { transition: transform .25s ease; }
.gt-ab .gt-ab-countries .gt-ab-countries__next.is-end .gt-ab-ico { transform: rotate(180deg); }

/* phone/tablet: the count sits under the list, split by a hairline */
.gt-ab .gt-ab-countries .gt-ab-countries__stat {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--ab-line, #dcdce2);
}
.gt-ab .gt-ab-countries .gt-ab-countries__stat::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 18px;
  background: var(--gt-title, #242424);
}
.gt-ab .gt-ab-countries .gt-ab-countries__num {
  color: var(--gt-ink, #111);
  font-size: clamp(44px, 24px + 3.1vw, 84px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}
.gt-ab .gt-ab-countries .gt-ab-countries__label {
  margin-top: 14px;
  color: #5b5b5b;
  font-size: clamp(12px, 1.04vw, 20px);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .3em;
  text-transform: uppercase;
}

@media (max-width: 479px) {
  /* keep the eyebrow and its rule on one line on phones */
  .gt-ab .gt-ab-countries .gt-ab-countries__title { letter-spacing: .16em; }
  .gt-ab .gt-ab-countries .gt-ab-countries__title::after { width: 32px; }
}
@media (max-width: 359px) {
  .gt-ab .gt-ab-countries .gt-ab-countries__title::after { display: none; }
}
@media (max-width: 767px) {
  /* mobile design: the countries are one swipeable row with a purple next
     arrow, and a full-bleed purple bar closes the band */
  .gt-ab .gt-ab-countries { border-bottom: 3px solid var(--gt-purple, #7B4FF4); }
  .gt-ab .gt-ab-countries .gt-ab-countries__title::after { height: 1px; opacity: .55; } /* hairline, as in the mobile design */
  .gt-ab .gt-ab-countries .gt-ab-countries__row.is-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
  }
  .gt-ab .gt-ab-countries .gt-ab-countries__clip {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .gt-ab .gt-ab-countries .gt-ab-countries__row.is-nav .gt-ab-countries__clip { scrollbar-width: none; }
  .gt-ab .gt-ab-countries .gt-ab-countries__row.is-nav .gt-ab-countries__clip::-webkit-scrollbar { display: none; }
  .gt-ab .gt-ab-countries .gt-ab-countries__list { flex-wrap: nowrap; }
}
@media (min-width: 768px) {
  .gt-ab .gt-ab-countries .gt-ab-countries__next { display: none; }
}
@media (min-width: 1024px) {
  /* list left, count right of a vertical rule */
  .gt-ab .gt-ab-countries .gt-ab-countries__inner { grid-template-columns: minmax(0, 1fr) auto; }
  /* narrower dividers on small laptops so the list still breaks 6 + 6 */
  .gt-ab .gt-ab-countries .gt-ab-countries__list { --gt-d-sep: clamp(16px, 6.6vw - 48px, 58px); }
  .gt-ab .gt-ab-countries .gt-ab-countries__stat {
    margin: 0 0 0 clamp(24px, 3vw, 48px);
    padding: 4px clamp(0px, 1.5vw, 28px) 8px clamp(40px, 5vw, 96px); /* rule at x≈1498, text ≈97px right of it */
    border-top: 0;
    border-left: 1px solid var(--ab-line, #dcdce2);
  }
  .gt-ab .gt-ab-countries .gt-ab-countries__stat::after { width: 68px; height: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__tab,
  .gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__nav { transition: none; }
  .gt-ab .gt-ab-exhibitions .gt-ab-exhibitions__track { scroll-behavior: auto; }
  .gt-ab .gt-ab-world .gt-ab-world__btn,
  .gt-ab .gt-ab-world .gt-ab-world__btn:hover { transform: none; transition: none; }
  .gt-ab .gt-ab-countries .gt-ab-countries__next,
  .gt-ab .gt-ab-countries .gt-ab-countries__next .gt-ab-ico { transition: none; }
}

/* ===== e-engineered ===== */
/* ==========================================================================
   Group E — Engineered in Germany · Custom Projects · Artists who performed
   Every selector is scoped to .gt-ab + a section / gt-ab-e- class.
   ========================================================================== */

/* ---- Shared (group E) ---------------------------------------------------- */

/* Line breaks that reproduce the design's two-line copy; phones wrap freely. */
@media (max-width: 767px) {
  .gt-ab .gt-ab-e-br { display: none; }
}

/* Horizontal rails (steps on < 1024px, cards on < 1200px). The track scrolls
   inside itself; the page never scrolls sideways. */
.gt-ab .gt-ab-e-rail { position: relative; }
.gt-ab .gt-ab-e-track:focus-visible { outline: 2px solid var(--gt-purple, #7B4FF4); outline-offset: -2px; }
.gt-ab .gt-ab-e-track > li { margin: 0; }

.gt-ab .gt-ab-e-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gt-purple, #7B4FF4);
  color: #fff;
  box-shadow: 0 6px 18px rgba(17, 17, 17, .18);
  line-height: 1;
  text-transform: none;
  transform: translateY(-50%);
  transition: background-color .2s, opacity .2s, visibility .2s;
}
.gt-ab .gt-ab-e-nav:hover,
.gt-ab .gt-ab-e-nav:focus-visible {
  background: var(--gt-purple-dark, #5F34D6);
  color: #fff;
  box-shadow: 0 6px 18px rgba(17, 17, 17, .18);
}
.gt-ab .gt-ab-e-nav[hidden] { display: none; }
.gt-ab .gt-ab-e-nav[disabled] { opacity: 0; visibility: hidden; pointer-events: none; }
.gt-ab .gt-ab-e-nav--prev { left: calc(6px - var(--gt-e-bleed, 0px)); }
.gt-ab .gt-ab-e-nav--next { right: calc(6px - var(--gt-e-bleed, 0px)); }
.gt-ab .gt-ab-e-nav .gt-ab-ico { width: 20px; height: 20px; }

/* ---- 1. Engineered in Germany -------------------------------------------- */

/* No top padding: the heading sits right under the countries band. */
.gt-ab .gt-ab-engineered { padding-block: 0 clamp(20px, 2.2vw, 36px); }
/* Phones: the heading sits ~12px under the full-width purple bar. The bar is
   drawn by the countries band (d-global.css, border-bottom at <= 767px), so
   it is not repeated here; a second one would double it to 6px. */
@media (max-width: 767px) {
  .gt-ab .gt-ab-engineered { padding-top: 6px; }
}

.gt-ab .gt-ab-engineered__title {
  margin: 0;
  font-size: clamp(28px, 18.8px + 2.98vw, 76px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--gt-ink, #111);
  text-wrap: balance;
}
@media (min-width: 768px) {
  .gt-ab .gt-ab-engineered__line { display: block; }
}
.gt-ab .gt-ab-engineered__sub {
  max-width: 40em;
  margin: clamp(10px, 1.2vw, 20px) auto 0;
  font-size: clamp(16px, 11.5px + .9vw, 28px);
  line-height: 1.3;
  color: var(--gt-ink, #111);
  text-wrap: balance;
}

.gt-ab .gt-ab-engineered__body {
  max-width: calc(1700px + 2 * var(--ab-gutter));
  margin-top: clamp(28px, 4.8vw, 96px);
}
.gt-ab .gt-ab-engineered__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.gt-ab .gt-ab-engineered__rail { --gt-e-bleed: var(--ab-gutter); }

/* Phones / tablets: the four steps scroll sideways inside their own track. */
.gt-ab .gt-ab-engineered__steps {
  display: flex;
  margin: 0 calc(-1 * var(--ab-gutter));
  padding: 4px var(--ab-gutter) 10px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--ab-gutter);
  scrollbar-width: thin;
  scrollbar-color: rgba(123, 79, 244, .35) transparent;
  -webkit-overflow-scrolling: touch;
}
.gt-ab .gt-ab-engineered__step {
  flex: 0 0 clamp(150px, 40vw, 240px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(10px, 2.4vw, 48px);
  padding: 4px clamp(12px, 2vw, 30px) 12px;
  border-left: 1px solid var(--ab-line, #dcdce2);
  scroll-snap-align: start;
}
.gt-ab .gt-ab-engineered__step:first-child { padding-left: 0; border-left: 0; }
.gt-ab .gt-ab-engineered__copy { min-width: 0; }
.gt-ab .gt-ab-engineered__no {
  font-size: clamp(13px, 9px + .9vw, 26px);
  font-weight: 400;
  line-height: 1;
  color: #767676;
  font-variant-numeric: tabular-nums;
}
.gt-ab .gt-ab-engineered__icon {
  display: block;
  width: clamp(30px, 20px + 2.7vw, 72px);
  height: clamp(30px, 20px + 2.7vw, 72px);
  margin: clamp(4px, .85vw, 16px) 0 clamp(8px, .8vw, 15px);
  color: var(--gt-ink, #111);
}
.gt-ab .gt-ab-engineered__icon svg { display: block; width: 100%; height: 100%; }
.gt-ab .gt-ab-engineered__name {
  margin: 0;
  font-size: clamp(15px, 11px + .68vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--gt-ink, #111);
}
.gt-ab .gt-ab-engineered__text {
  margin-top: clamp(6px, .9vw, 16px);
  font-size: clamp(13px, 10px + .47vw, 19px);
  line-height: 1.38;
  color: #767676;
}

/* "Manufacturing →" — centred under the steps on phones, right on desktop. */
.gt-ab .gt-ab-engineered__cta {
  justify-self: center;
  gap: clamp(24px, 3vw, 58px);
  min-height: clamp(50px, 3.7vw, 71px);
  padding: 12px clamp(28px, 3vw, 58px);
  border-radius: 4px;
  font-size: clamp(16px, 8.5px + .95vw, 27px);
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  color: #fff; /* `.gt-ab a { color: inherit }` outranks .gt-ab-btn's white */
}
.gt-ab .gt-ab-engineered__cta:hover,
.gt-ab .gt-ab-engineered__cta:focus,
.gt-ab .gt-ab-engineered__cta:active { color: #fff; text-decoration: none; }
.gt-ab .gt-ab-engineered__cta .gt-ab-ico { width: clamp(18px, 1.25vw, 24px); height: clamp(18px, 1.25vw, 24px); }

@media (min-width: 768px) {
  .gt-ab .gt-ab-engineered__cta { justify-self: end; }
}

/* Desktop: four columns split by thin rules. */
@media (min-width: 1024px) {
  .gt-ab .gt-ab-engineered__rail { --gt-e-bleed: 0px; }
  .gt-ab .gt-ab-engineered__steps {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .gt-ab .gt-ab-engineered__step { padding: 2px clamp(16px, 1.8vw, 34px) 14px; }
  .gt-ab .gt-ab-engineered__step:first-child { padding-left: 0; }
}
@media (min-width: 1280px) {
  /* CTA sits beside the steps: the rules end the band. */
  .gt-ab .gt-ab-engineered { padding-bottom: 0; }
  .gt-ab .gt-ab-engineered__row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(32px, 3vw, 58px);
  }
}

/* ---- 2. Custom Projects Built for Bigger Visions ------------------------- */

.gt-ab .gt-ab-custom { padding-block: clamp(8px, 1vw, 16px) 0; }
.gt-ab .gt-ab-custom__wrap { max-width: calc(1670px + 2 * var(--ab-gutter)); }

/* Very light lavender panel — full bleed on phones. */
.gt-ab .gt-ab-custom__panel {
  --gt-e-pad: var(--ab-gutter);
  margin-inline: calc(-1 * var(--ab-gutter));
  padding: 32px var(--gt-e-pad) 24px;
  background: #faf8ff;
  background: color-mix(in srgb, var(--gt-purple, #7B4FF4) 4%, #fff);
}
.gt-ab .gt-ab-custom__eyebrow { display: none; }

.gt-ab .gt-ab-custom__title {
  margin: 0;
  font-size: clamp(34px, 26.9px + 1.83vw, 62px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--gt-ink, #111);
  text-wrap: balance;
}
.gt-ab .gt-ab-custom__line { display: block; }
.gt-ab .gt-ab-custom__line--strong { font-weight: 700; }
/* "Built for Bigger Visions" is set a step smaller than "Custom Projects". */
.gt-ab .gt-ab-custom__line:not(.gt-ab-custom__line--strong) { font-size: .9em; }
.gt-ab .gt-ab-custom__em { color: var(--gt-purple, #7B4FF4); }
.gt-ab .gt-ab-custom__em--strong { font-weight: 600; }
.gt-ab .gt-ab-custom__lead { max-width: 62ch; margin-top: clamp(12px, 1.5vw, 28px); }

.gt-ab .gt-ab-custom__rail {
  --gt-e-bleed: var(--gt-e-pad);
  max-width: 1260px;
  margin: clamp(20px, 1.9vw, 36px) auto 0;
}
.gt-ab .gt-ab-custom__cards {
  display: flex;
  gap: 12px;
  margin: 0 calc(-1 * var(--gt-e-pad));
  padding: 4px var(--gt-e-pad) 12px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gt-e-pad);
  scrollbar-width: thin;
  scrollbar-color: rgba(123, 79, 244, .35) transparent;
  -webkit-overflow-scrolling: touch;
}
.gt-ab .gt-ab-custom__card {
  flex: 0 0 max(150px, calc((100% - 12px) / 2 - 10px));
  display: flex;
  flex-direction: column;
  padding: 20px 14px 22px 16px;
  border: 1px solid rgba(17, 17, 17, .07);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(17, 17, 17, .03);
  scroll-snap-align: start;
}
.gt-ab .gt-ab-custom__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(46px, 3.6vw, 68px);
  height: clamp(46px, 3.6vw, 68px);
  border-radius: 50%;
  background: var(--ab-lav, #f3f0fc);
  color: var(--gt-purple-dark, #5F34D6);
}
.gt-ab .gt-ab-custom__badge svg { display: block; width: 64%; height: 64%; }
.gt-ab .gt-ab-custom__name {
  min-height: 2.4em;
  margin: clamp(14px, 1.3vw, 24px) 0 0;
  font-size: clamp(15px, 13px + .36vw, 20px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--gt-ink, #111);
  overflow-wrap: break-word;
}
.gt-ab .gt-ab-custom__text {
  margin-top: clamp(8px, 1vw, 16px);
  font-size: clamp(14px, 12.5px + .2vw, 16px);
  line-height: 1.32;
  color: #767676;
}

@media (min-width: 640px) {
  .gt-ab .gt-ab-custom__card { flex-basis: calc((100% - 24px) / 3 - 14px); }
}
@media (min-width: 768px) {
  .gt-ab .gt-ab-custom { padding-top: 12px; }
  .gt-ab .gt-ab-custom__panel {
    --gt-e-pad: clamp(24px, 2.8vw, 52px);
    margin-inline: 0;
    padding-block: clamp(36px, 2.4vw, 46px) clamp(24px, 1.8vw, 32px);
    border-radius: 12px;
  }
  .gt-ab .gt-ab-custom__eyebrow { display: inline-flex; margin: 0 0 clamp(12px, 2vw, 40px); }
  .gt-ab .gt-ab-custom__lead { max-width: none; }
}
/* Desktop: all five cards in one row. */
@media (min-width: 1200px) {
  .gt-ab .gt-ab-custom__rail { --gt-e-bleed: 0px; }
  .gt-ab .gt-ab-custom__cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .gt-ab .gt-ab-custom__card { padding: clamp(24px, 1.8vw, 34px) clamp(16px, 1.3vw, 26px) clamp(24px, 1.8vw, 34px) clamp(20px, 2vw, 38px); }
}

/* ---- 3. Artists Who Performed with Our Systems --------------------------- */

.gt-ab .gt-ab-artists { padding-block: clamp(24px, 1.8vw, 36px) clamp(32px, 3.2vw, 60px); }
.gt-ab .gt-ab-artists__wrap { max-width: calc(1840px + 2 * var(--ab-gutter)); }
.gt-ab .gt-ab-artists__eyebrow { display: none; }

.gt-ab .gt-ab-artists__title {
  margin: 0;
  font-size: clamp(26px, 17.5px + 1.9vw, 54px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--gt-ink, #111);
  text-wrap: balance;
}
.gt-ab .gt-ab-artists__line { display: block; }
.gt-ab .gt-ab-artists__line--strong { font-weight: 700; }
.gt-ab .gt-ab-artists__lead { max-width: 60em; margin-top: clamp(8px, .7vw, 12px); }

/* Pre-composed board: never cropped, always shown whole (names are baked in;
   the sr-only figcaption carries them). */
.gt-ab .gt-ab-artists__board { margin: clamp(18px, 2.2vw, 42px) 0 0; }
.gt-ab .gt-ab-artists__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  border-radius: clamp(10px, 1vw, 16px);
  background: var(--gt-ink, #111);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .35) transparent;
  -webkit-overflow-scrolling: touch;
}
.gt-ab .gt-ab-artists__scroller:focus-visible { outline: 3px solid var(--gt-purple, #7B4FF4); outline-offset: 3px; }
.gt-ab .gt-ab-artists__img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 2200 / 882;
  object-fit: contain;
}
/* Phones: near full-bleed with 5px side gutters, as in the mobile design. */
@media (max-width: 767px) {
  .gt-ab .gt-ab-artists__board { margin-inline: calc(5px - var(--ab-gutter)); }
  .gt-ab .gt-ab-artists__scroller { border-radius: 6px; }
}

/* Shown only if the board image is missing. */
.gt-ab .gt-ab-artists__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(18px, 2.2vw, 42px);
}
.gt-ab .gt-ab-artists__list li {
  margin: 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ab-lav, #f3f0fc);
  color: var(--gt-ink, #111);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.gt-ab .gt-ab-artists__list span { font-weight: 400; color: #767676; }

.gt-ab .gt-ab-artists__divider { display: none; }

@media (min-width: 768px) {
  /* "ARTIST EVENTS" sits just under the Custom Solutions panel. */
  .gt-ab .gt-ab-artists { padding-top: 4px; }
  .gt-ab .gt-ab-artists__eyebrow { display: inline-flex; margin: 0 0 clamp(8px, 1.6vw, 30px) clamp(0px, 1.4vw, 26px); }
  .gt-ab .gt-ab-artists__divider {
    display: block;
    width: 80px;
    height: 2px;
    margin: clamp(16px, 1.2vw, 22px) auto 0;
    background: var(--ab-line, #dcdce2);
  }
}

/* ---- Motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gt-ab .gt-ab-e-track,
  .gt-ab .gt-ab-artists__scroller { scroll-behavior: auto; }
  .gt-ab .gt-ab-e-nav,
  .gt-ab .gt-ab-engineered__cta { transition: none; }
  .gt-ab .gt-ab-engineered__cta:hover { transform: none; }
}

/* ===== f-night ===== */
/* --------------------------------------------------------------------------
   f-night · 1. Celebrating the Giant Night Awards (carousel)
   Phones and tablets: 2 slides · desktop: 3. The track scrolls on
   its own (never the page); arrows appear only once f-night.js is running.
   -------------------------------------------------------------------------- */
/* the grey rule above the heading is drawn by e-engineered (artists band);
   the heading sits right under it, and the photos run straight into
   Experiences, so the section carries no block padding of its own */
.gt-ab .gt-ab-night { padding-block: 0; }
.gt-ab .gt-ab-night__title {
  margin-bottom: 12px;
  font-weight: 400;
  line-height: 1.02;
}
.gt-ab .gt-ab-night__line { display: block; }
.gt-ab .gt-ab-night__line--strong { font-weight: 700; }
.gt-ab .gt-ab-night .gt-ab-night__sub {
  max-width: 880px;
  line-height: 1.35;
  color: var(--gt-body, #767676);
}

.gt-ab .gt-ab-night__stage {
  --gt-f-gap: 8px;
  /* WoodMart paints an !important focus outline from these variables */
  --wd-otl-width: 3px;
  --wd-otl-style: solid;
  --wd-otl-color: var(--gt-purple, #7B4FF4);
  --wd-otl-offset: 3px;
  position: relative;
  margin-top: clamp(28px, 3.2vw, 60px);
}
.gt-ab .gt-ab-night__track {
  display: flex;
  gap: var(--gt-f-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(123, 79, 244, .45) transparent;
}
.gt-ab .gt-ab-night__track:focus-visible { outline: 3px solid var(--gt-purple, #7B4FF4); outline-offset: 3px; }
.gt-ab .gt-ab-night--js .gt-ab-night__track { scrollbar-width: none; }
.gt-ab .gt-ab-night--js .gt-ab-night__track::-webkit-scrollbar { display: none; }

.gt-ab .gt-ab-night__slide {
  flex: 0 0 calc((100% - var(--gt-f-gap)) / 2);
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: clamp(8px, .55vw + 7.5px, 18px);
  background: #eceef2;
}
.gt-ab .gt-ab-night__img {
  width: 100%;
  height: auto;
  aspect-ratio: 574 / 348;
  object-fit: cover;
}

.gt-ab .gt-ab-night__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}
/* restate the base look: WoodMart's button styles otherwise win (grey square) */
.gt-ab .gt-ab-night .gt-ab-night__nav {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gt-purple, #7B4FF4);
  color: #fff;
  box-shadow: none;
}
.gt-ab .gt-ab-night .gt-ab-night__nav:hover,
.gt-ab .gt-ab-night .gt-ab-night__nav:focus-visible {
  background: var(--gt-purple-dark, #5F34D6);
  color: #fff;
}
.gt-ab .gt-ab-night__nav[hidden] { display: none; }
/* at either end the arrow is disabled and, as in the design, not shown */
.gt-ab .gt-ab-night__nav[disabled] { visibility: hidden; }
.gt-ab .gt-ab-night__nav--prev { left: calc(var(--ab-gutter) + 6px); }
.gt-ab .gt-ab-night__nav--next { right: calc(var(--ab-gutter) + 6px); }

@media (max-width: 1023.98px) {
  .gt-ab .gt-ab-night__br { display: none; }
}
/* phones: a smaller arrow overlapping the edge photo, as in the mobile design */
@media (max-width: 599.98px) {
  .gt-ab .gt-ab-night .gt-ab-night__nav { width: 36px; height: 36px; }
  .gt-ab .gt-ab-night__nav--next { right: var(--ab-gutter); }
  .gt-ab .gt-ab-night__nav--prev { left: var(--ab-gutter); }
}
@media (min-width: 600px) {
  .gt-ab .gt-ab-night__stage { --gt-f-gap: 16px; }
  .gt-ab .gt-ab-night__slide { flex-basis: calc((100% - var(--gt-f-gap)) / 2); }
}
@media (min-width: 1024px) {
  .gt-ab .gt-ab-night__stage {
    --gt-f-gap: 24px;
    --gt-f-pad: clamp(60px, 4vw, 76px);
    max-width: 1920px;
    padding-inline: var(--gt-f-pad);
  }
  .gt-ab .gt-ab-night__slide { flex-basis: calc((100% - 2 * var(--gt-f-gap)) / 3); }
  /* arrows sit in the side margins, clear of the photos */
  .gt-ab .gt-ab-night__nav--prev { left: calc((var(--gt-f-pad) - 44px) / 2); }
  .gt-ab .gt-ab-night__nav--next { right: calc((var(--gt-f-pad) - 44px) / 2); }
}

/* --------------------------------------------------------------------------
   f-night · 2. Our Experiences & Highlights
   Desktop: photo | text | photo, banner below. Tablet: text, two photos,
   banner. Phones (mobile design): text, then a mosaic with the group photo
   over the banner on the left and the catamaran filling the right column.
   -------------------------------------------------------------------------- */
.gt-ab .gt-ab-experiences {
  padding-top: clamp(14px, 3.2vw, 60px);
  padding-bottom: 4px;
}
.gt-ab .gt-ab-experiences__wrap { max-width: calc(1560px + 2 * var(--ab-gutter)); }
.gt-ab .gt-ab-experiences__head {
  margin-bottom: clamp(28px, 2.9vw, 56px);
  text-align: center;
}
.gt-ab .gt-ab-experiences__eyebrow { display: none; }
.gt-ab .gt-ab-experiences__title {
  margin-bottom: 10px;
  font-size: clamp(24px, 17.5px + 1.7vw, 50px);
  font-weight: 400;
}
.gt-ab .gt-ab-experiences__strong { font-weight: 700; }

.gt-ab .gt-ab-experiences__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "text   text"
    "group  boat"
    "banner boat";
  gap: 8px;
}
.gt-ab .gt-ab-experiences__text { grid-area: text; margin-bottom: 16px; }
.gt-ab .gt-ab-experiences__h3 {
  font-size: clamp(18px, 13.5px + 1.28vw, 38px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--gt-ink, #111);
}
.gt-ab .gt-ab-experiences__rule {
  display: block;
  width: 90px;
  height: 3px;
  margin: clamp(14px, 1.3vw, 25px) 0 12px;
  background: var(--gt-ink, #111);
}
.gt-ab .gt-ab-experiences__body {
  max-width: 34em;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gt-ink, #111);
}

.gt-ab .gt-ab-experiences__fig {
  overflow: hidden;
  border-radius: 6px;
  background: #eceef2;
}
.gt-ab .gt-ab-experiences__fig--group { grid-area: group; }
.gt-ab .gt-ab-experiences__fig--boat { grid-area: boat; position: relative; min-height: 120px; }
.gt-ab .gt-ab-experiences__fig--banner { grid-area: banner; }
.gt-ab .gt-ab-experiences__img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* phones: the banner is cropped to the boat + "Thailand Trip 2025" lettering */
.gt-ab .gt-ab-experiences__fig--banner .gt-ab-experiences__img {
  aspect-ratio: 11 / 5;
  object-position: 19% 50%;
}
/* phones: the catamaran fills the full height of its mosaic column */
.gt-ab .gt-ab-experiences__fig--boat .gt-ab-experiences__img {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
  object-position: 24% 50%;
}

@media (min-width: 600px) {
  .gt-ab .gt-ab-experiences__grid {
    grid-template-areas:
      "text   text"
      "group  boat"
      "banner banner";
    gap: 16px;
  }
  .gt-ab .gt-ab-experiences__text { margin-bottom: 8px; }
  .gt-ab .gt-ab-experiences__fig--boat { min-height: 0; }
  .gt-ab .gt-ab-experiences__fig--boat .gt-ab-experiences__img {
    position: static;
    height: auto;
    aspect-ratio: 3 / 2;
    object-position: 0 50%;
  }
  .gt-ab .gt-ab-experiences__fig--banner { border-radius: 8px; }
  /* design crop: the 1800x395 photo scaled up so the boat and lettering
     read larger and the empty sea on the right falls outside the box */
  .gt-ab .gt-ab-experiences__fig--banner { position: relative; aspect-ratio: 1602 / 378; }
  .gt-ab .gt-ab-experiences__fig--banner .gt-ab-experiences__img {
    position: absolute;
    left: -.4%;
    top: -4.2%;
    width: 116.7%;
    max-width: none;
    height: auto;
    aspect-ratio: 1800 / 395;
  }
}
/* phones: a full-width purple bar closes the block, as in the mobile design */
@media (max-width: 767.98px) {
  .gt-ab .gt-ab-experiences {
    padding-bottom: 6px;
    border-bottom: 3px solid var(--gt-purple, #7B4FF4);
  }
}
@media (min-width: 768px) {
  .gt-ab .gt-ab-experiences__eyebrow { display: inline-flex; }
}
@media (min-width: 1024px) {
  .gt-ab .gt-ab-experiences__grid {
    grid-template-columns: minmax(0, 43fr) minmax(0, 61fr) minmax(0, 43fr);
    grid-template-areas:
      "group  text   boat"
      "banner banner banner";
    column-gap: clamp(28px, 2.3vw, 44px);
    row-gap: clamp(24px, 2.1vw, 40px);
    align-items: start;
  }
  .gt-ab .gt-ab-experiences__text { margin: 0; }
  .gt-ab .gt-ab-experiences__body { line-height: 1.35; }
}
/* wide screens: eyebrow on the left, heading centred on the same line */
@media (min-width: 1280px) {
  .gt-ab .gt-ab-experiences__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    column-gap: 24px;
    text-align: left;
  }
  .gt-ab .gt-ab-experiences__eyebrow { grid-column: 1; justify-self: start; margin: 2px 0 0; }
  .gt-ab .gt-ab-experiences__intro { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .gt-ab .gt-ab-night__track { scroll-behavior: auto; }
  .gt-ab .gt-ab-night__nav { transition: none; }
}

/* ===== g-people ===== */
/* ==========================================================================
   About page — group g "people": featured leader, leadership, tell us about
   your project. Every selector is scoped to .gt-ab .gt-ab-<section>.
   Breakpoints: phone < 768 (mobile design), tablet 768–1023, desktop ≥ 1024.
   ========================================================================== */

/* ── Featured leader (Akshay) ────────────────────────────────────────────────
   Phone: white page, portrait in a grey tile beside the role + name, bio and
   signature full width below (the design's side-by-side bio is illegible at
   phone widths). ≥768: grey band, cut-out standing on the band's floor, white
   card on the right.
   ------------------------------------------------------------------------- */
.gt-ab .gt-ab-leader {
  --gt-g-studio: #ececee; /* studio grey baked into the leadership portraits */
  padding-block: 24px 36px;
  background: #fff;
}
.gt-ab .gt-ab-leader__grid {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  grid-template-areas:
    "photo head"
    "bio   bio"
    "sign  sign";
  column-gap: 16px;
  align-items: start;
}
.gt-ab .gt-ab-leader--solo .gt-ab-leader__grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "bio" "sign";
}
.gt-ab .gt-ab-leader__photo {
  grid-area: photo;
  margin: 0;
  overflow: hidden;
  background: var(--gt-g-studio);
}
.gt-ab .gt-ab-leader__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 100%;
}
.gt-ab .gt-ab-leader__card { display: contents; }
.gt-ab .gt-ab-leader__head { grid-area: head; min-width: 0; padding-top: 4px; }
.gt-ab .gt-ab-leader__role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--gt-ink, #111);
}
.gt-ab .gt-ab-leader__role::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 2px;
  background: currentColor;
}
.gt-ab .gt-ab-leader__name {
  margin-top: 10px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--gt-ink, #111);
}
.gt-ab .gt-ab-leader__bio {
  grid-area: bio;
  margin-top: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gt-body, #767676);
}
.gt-ab .gt-ab-leader__sign {
  grid-area: sign;
  margin-top: 12px;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 400;
  font-style: normal;
  color: var(--gt-ink, #111);
}
/* optional LinkedIn square (renders only when a URL is set) */
.gt-ab .gt-ab-leader__in {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 6px 0 0 -6px;
  color: #fff;
  text-decoration: none;
}
.gt-ab .gt-ab-leader__in-box {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: var(--gt-purple, #7B4FF4);
  transition: background .2s;
}
.gt-ab .gt-ab-leader__in:hover .gt-ab-leader__in-box { background: var(--gt-purple-dark, #5F34D6); }

@media (min-width: 768px) {
  .gt-ab .gt-ab-leader {
    padding-block: clamp(28px, 2.8vw, 40px) 0;
    background: var(--gt-g-studio);
  }
  .gt-ab .gt-ab-leader__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(340px, 38vw, 456px));
    grid-template-areas: "photo card";
    column-gap: clamp(32px, 6vw, 96px);
    align-items: end;
  }
  .gt-ab .gt-ab-leader--solo .gt-ab-leader__grid {
    grid-template-columns: minmax(0, 560px);
    grid-template-areas: "card";
    justify-content: center;
  }
  .gt-ab .gt-ab-leader__photo {
    justify-self: center;
    width: 100%;
    max-width: 420px;
    overflow: visible;
    background: none;
  }
  /* taller crop on tablets trims only the empty sides of the cut-out */
  .gt-ab .gt-ab-leader__photo img { aspect-ratio: 4 / 5; }
  .gt-ab .gt-ab-leader__card {
    grid-area: card;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: clamp(400px, 36vw, 545px);
    margin-bottom: clamp(28px, 2.8vw, 38px);
    padding: 32px 28px 30px;
    border-radius: 8px;
    background: #fff;
  }
  .gt-ab .gt-ab-leader--solo .gt-ab-leader__card { min-height: 0; }
  .gt-ab .gt-ab-leader__head { padding-top: 0; }
  .gt-ab .gt-ab-leader__role::before { width: 76px; height: 3px; }
  .gt-ab .gt-ab-leader__name { margin-top: 12px; font-size: clamp(20px, 17px + .35vw, 24px); }
  .gt-ab .gt-ab-leader__bio { margin-top: auto; padding-top: 36px; font-size: 14px; }
  .gt-ab .gt-ab-leader__sign { margin-top: 22px; font-size: 42px; }
}
@media (min-width: 1024px) {
  .gt-ab .gt-ab-leader__photo { max-width: 650px; }
  /* trims the empty top ninth so the figure's height matches the card */
  .gt-ab .gt-ab-leader__photo img { aspect-ratio: 9 / 8; }
}
/* design at 1920: card 456px ending 453px from the viewport edge, cut-out
   centred ~210px to its left, so the band sits slightly left of centre */
@media (min-width: 1440px) {
  .gt-ab .gt-ab-leader:not(.gt-ab-leader--solo) .gt-ab-leader__grid {
    grid-template-columns: minmax(0, 1fr) 456px;
    column-gap: 78px;
    padding-right: 113px;
  }
  .gt-ab .gt-ab-leader__photo { width: 650px; max-width: none; justify-self: end; }
}
/* phone design: full-bleed purple rule above the leader block */
@media (max-width: 767.98px) {
  .gt-ab .gt-ab-leader { border-top: 3px solid var(--gt-purple, #7B4FF4); }
}

/* ── Leadership grid ─────────────────────────────────────────────────────── */
.gt-ab .gt-ab-leadership {
  --gt-g-studio: #ececee;
  padding-block: clamp(28px, 3vw, 40px) clamp(40px, 4vw, 56px);
}
.gt-ab .gt-ab-leadership__title {
  display: inline-block;
  margin: 0 0 clamp(24px, 2.6vw, 36px);
  padding-bottom: 10px;
  border-bottom: 2px solid currentColor;
  font-size: clamp(26px, 20px + 1vw, 34px);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--gt-ink, #111);
}
/* design grid spans x 101–1833 at 1920 (four ~421px tiles) */
.gt-ab .gt-ab-leadership .gt-ab-wrap--wide { max-width: calc(1732px + 2 * var(--ab-gutter)); }
.gt-ab .gt-ab-leadership__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 12px;
}
.gt-ab .gt-ab-leadership__card { display: flex; flex-direction: column; min-width: 0; margin: 0; } /* WoodMart: :is(ul,ol) li { margin-bottom } */
.gt-ab .gt-ab-leadership__photo {
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: var(--gt-g-studio);
}
.gt-ab .gt-ab-leadership__photo--empty { aspect-ratio: 1 / 1; }
.gt-ab .gt-ab-leadership__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.gt-ab .gt-ab-leadership__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}
.gt-ab .gt-ab-leadership__who { min-width: 0; }
.gt-ab .gt-ab-leadership__name {
  font-size: clamp(17px, 15px + .35vw, 20px);
  line-height: 1.25;
  font-weight: 400;
  color: var(--gt-title, #242424);
  overflow-wrap: anywhere;
}
.gt-ab .gt-ab-leadership__role {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gt-body, #767676);
}
/* optional LinkedIn square: 32px visual, 44px hit area */
.gt-ab .gt-ab-leadership__in {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -6px -6px 0 0;
  color: #fff;
  text-decoration: none;
}
.gt-ab .gt-ab-leadership__in-box {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: var(--gt-purple, #7B4FF4);
  transition: background .2s;
}
.gt-ab .gt-ab-leadership__in:hover .gt-ab-leadership__in-box { background: var(--gt-purple-dark, #5F34D6); }
/* optional "View bio" disclosure */
.gt-ab .gt-ab-leadership__bio { margin-top: 8px; }
.gt-ab .gt-ab-leadership__bio summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: var(--gt-purple, #7B4FF4);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.gt-ab .gt-ab-leadership__bio summary::-webkit-details-marker { display: none; }
.gt-ab .gt-ab-leadership__bio summary:hover { color: var(--gt-purple-dark, #5F34D6); }
.gt-ab .gt-ab-leadership__bio summary:focus-visible { outline: 3px solid var(--gt-purple, #7B4FF4); outline-offset: 3px; }
.gt-ab .gt-ab-leadership__bio p { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--gt-body, #767676); }

@media (min-width: 768px) {
  .gt-ab .gt-ab-leadership__grid { gap: 36px 16px; }
  .gt-ab .gt-ab-leadership__meta { margin-top: 22px; }
}
@media (min-width: 1024px) {
  .gt-ab .gt-ab-leadership__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

/* ── Tell us about your project ──────────────────────────────────────────────
   Phone < 360: intro, then the contact list (tagline hidden — no room).
   360–559: compact list + tagline side by side (as the phone design).
   560–1023: intro on top, list + tagline side by side between dividers.
   ≥ 1024: intro | list | tagline, as the desktop design.
   ------------------------------------------------------------------------- */
.gt-ab .gt-ab-tellus { padding-block: clamp(40px, 5vw, 64px) clamp(56px, 6vw, 88px); }
.gt-ab .gt-ab-tellus__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "list";
  row-gap: 40px;
  max-width: 1080px;
  margin-inline: auto;
}
.gt-ab .gt-ab-tellus__intro { grid-area: intro; min-width: 0; }
.gt-ab .gt-ab-tellus__title {
  margin-top: 20px;
  font-size: clamp(30px, 21px + 1.35vw, 46px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--gt-ink, #111);
}
.gt-ab .gt-ab-tellus__line { display: block; }
.gt-ab .gt-ab-tellus__lead { max-width: 28em; margin-top: 24px; }
/* .gt-ab a { color: inherit } outranks .gt-ab-btn's white, so restate it */
.gt-ab .gt-ab-tellus__btn { min-width: 204px; margin-top: 28px; color: #fff; }
.gt-ab .gt-ab-tellus__btn:hover { color: #fff; }
.gt-ab .gt-ab-tellus__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 26px;
  overflow: hidden; /* clips the separator of an item that wraps to a new line */
  margin-top: 18px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gt-body, #767676);
}
.gt-ab .gt-ab-tellus__trust li { position: relative; margin: 0; }
.gt-ab .gt-ab-tellus__trust li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -14px;
  width: 1px;
  height: 11px;
  margin-top: -6px;
  background: currentColor;
  opacity: .7;
}
.gt-ab .gt-ab-tellus__list {
  grid-area: list;
  display: grid;
  align-content: center;
  gap: 20px;
  min-width: 0;
  padding-left: 20px;
  border-left: 1px solid var(--ab-line, #dcdce2);
}
.gt-ab .gt-ab-tellus__list > li { margin: 0; }
.gt-ab .gt-ab-tellus__item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.gt-ab .gt-ab-tellus__ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(17, 17, 17, .55);
  border-radius: 50%;
  color: var(--gt-title, #242424);
  transition: border-color .2s, color .2s;
}
.gt-ab .gt-ab-tellus__ico svg { display: block; width: 20px; height: 20px; }
.gt-ab .gt-ab-tellus__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gt-ab .gt-ab-tellus__label {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--gt-ink, #111);
  transition: color .2s;
}
.gt-ab .gt-ab-tellus__val {
  font-size: 13px;
  line-height: 1.45;
  color: var(--gt-body, #767676);
  overflow-wrap: anywhere;
}
.gt-ab .gt-ab-tellus__item:hover .gt-ab-tellus__ico { border-color: var(--gt-purple, #7B4FF4); color: var(--gt-purple, #7B4FF4); }
.gt-ab .gt-ab-tellus__item:hover .gt-ab-tellus__label { color: var(--gt-purple, #7B4FF4); }
.gt-ab .gt-ab-tellus__tag { display: none; }

@media (min-width: 560px) {
  .gt-ab .gt-ab-tellus__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "intro intro"
      "list  tag";
    align-items: center;
  }
  .gt-ab .gt-ab-tellus__list { padding-inline: 24px; border-right: 1px solid var(--ab-line, #dcdce2); }
  .gt-ab .gt-ab-tellus__tag {
    grid-area: tag;
    display: block;
    padding-left: 24px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--gt-body, #767676);
    opacity: .75;
  }
  .gt-ab .gt-ab-tellus__tag span { display: block; }
}
/* phone design keeps the tagline column; compact it for 360–559 */
@media (min-width: 360px) and (max-width: 559.98px) {
  .gt-ab .gt-ab-tellus__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "intro intro"
      "list  tag";
    align-items: center;
  }
  .gt-ab .gt-ab-tellus__list { gap: 16px; padding-inline: 14px; border-right: 1px solid var(--ab-line, #dcdce2); }
  .gt-ab .gt-ab-tellus__item { gap: 10px; }
  .gt-ab .gt-ab-tellus__ico { width: 36px; height: 36px; }
  .gt-ab .gt-ab-tellus__tag {
    grid-area: tag;
    display: block;
    padding-left: 14px;
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--gt-body, #767676);
    opacity: .75;
  }
  .gt-ab .gt-ab-tellus__tag span { display: block; }
}
@media (min-width: 1024px) {
  .gt-ab .gt-ab-tellus__grid {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "intro list tag";
  }
  .gt-ab .gt-ab-tellus__intro { padding-right: 32px; }
  .gt-ab .gt-ab-tellus__list { gap: 28px; padding-inline: 44px 32px; }
  .gt-ab .gt-ab-tellus__tag { padding-left: 38px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .gt-ab .gt-ab-leader__in-box,
  .gt-ab .gt-ab-leadership__in-box,
  .gt-ab .gt-ab-tellus__ico,
  .gt-ab .gt-ab-tellus__label { transition: none; }
}

/* ==========================================================================
   About page — one vertical rhythm for every section (client request:
   less space between sections, and the same everywhere).
   Each top-level section gets the same padding above and below, so the gap
   between any two sections is always 2 × --ab-gap. The hero keeps its own
   layout; the leader band keeps a zero bottom on ≥768 because the cut-out
   portrait stands on the band's floor.
   Loaded last so it wins over the per-section paddings in the other parts.
   ========================================================================== */
.gt-ab { --ab-gap: clamp(24px, 2.6vw, 40px); }

.gt-ab > section:not(.gt-ab-hero) {
  padding-top: var(--ab-gap) !important;
  padding-bottom: var(--ab-gap) !important;
}
@media (min-width: 768px) {
  .gt-ab > section.gt-ab-leader { padding-bottom: 0 !important; }
}

/* Phones: the "Event Infrastructure Without Borders" tagline column squeezed
   the contact list, so the list takes the full width instead. */
@media (max-width: 559.98px) {
  .gt-ab .gt-ab-tellus__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "list";
  }
  .gt-ab .gt-ab-tellus__tag { display: none; }
  .gt-ab .gt-ab-tellus__list { border-right: 0; padding-right: 0; }
}

/* /* Featured leader (≥768): with the signature removed, the quote no longer
   gets pushed to the card's floor — it follows the name, the card fits its
   content, and it sits centred beside the portrait (card width as the UI). */
@media (min-width: 768px) {
  .gt-ab .gt-ab-leader__grid { align-items: center; }
  .gt-ab .gt-ab-leader__card {
    min-height: 0;
    margin-bottom: 0;
    padding: 34px 32px 36px;
  }
  .gt-ab .gt-ab-leader__bio {
    margin-top: 0;
    padding-top: 26px;
    font-size: 15px;
    line-height: 1.7;
  }
}
@media (min-width: 1440px) {
  .gt-ab .gt-ab-leader:not(.gt-ab-leader--solo) .gt-ab-leader__grid { grid-template-columns: minmax(0, 1fr) 456px; }
}