/* ==========================================================================
   TPG — Case Studies list
   Every value is taken from Figma node 9752:2798 ("Container") and its first
   row 9752:2799, not approximated.

   Note on color: this block uses neutral greys, NOT the TPG brand palette.
   Title #001d21, body #4e4e4e, tag fill #e6e6e2, button border #d7d7d7,
   button text #1d1d1d. That is what the design specifies.
   ========================================================================== */

.tpgcs{
  --tpgcs-media:   476px;   /* Figma image container width  */
  --tpgcs-gap:     48px;    /* image -> content             */
  --tpgcs-row-gap: 71px;    /* between case studies         */
  --tpgcs-h:       400px;   /* row height                   */

  --tpgcs-title:   #001d21;
  --tpgcs-text:    #4e4e4e;
  --tpgcs-tag-bg:  #e6e6e2;
  --tpgcs-tag-ink: #001d21;
  --tpgcs-btn-line:#d7d7d7;
  --tpgcs-btn-ink: #1d1d1d;

  --tpgcs-body: var(--tpg-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);

  display: flex;
  flex-direction: column;
  gap: var(--tpgcs-row-gap);
  width: 100%;
  max-width: 976px;
  font-family: var(--tpgcs-body);
}
.tpgcs *, .tpgcs *::before, .tpgcs *::after { box-sizing: border-box; }

/* ---------- one case study ---------- */
.tpgcs__item{
  display: flex;
  gap: var(--tpgcs-gap);
  align-items: stretch;
  width: 100%;
}

/* ---------- cover image ---------- */
.tpgcs__media{
  flex: 0 0 var(--tpgcs-media);
  width: var(--tpgcs-media);
  height: var(--tpgcs-h);
  border-radius: 24px;
  overflow: hidden;
  background: #dedede;      /* Figma placeholder fill, shows while loading */
}
.tpgcs__medialink{ display: block; width: 100%; height: 100%; }
.tpgcs .tpgcs__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.tpgcs__item:hover .tpgcs__img{ transform: scale(1.03); }

/* ---------- content column ---------- */
.tpgcs__content{
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--tpgcs-h);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;   /* button pins to the bottom, per Figma */
  padding: 16px 0;
}
.tpgcs__top{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

/* Scoped to (0,2,x) so a dark section's `.tpg-dark p` / heading rules, which
   are (0,1,1), can't repaint this block's text. */
.tpgcs .tpgcs__title{
  margin: 0;
  padding: 0;
  font-family: var(--tpgcs-body);
  font-weight: 400;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -2.16px;   /* -0.06em */
  color: var(--tpgcs-title);
  text-align: left;
}
.tpgcs .tpgcs__title a{
  color: inherit;
  text-decoration: none;
}
.tpgcs .tpgcs__title a:hover,
.tpgcs .tpgcs__title a:focus-visible{ text-decoration: underline; }

.tpgcs .tpgcs__excerpt{
  margin: 0;
  padding: 0;
  font-family: var(--tpgcs-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: normal;
  color: var(--tpgcs-text);
  text-align: left;
}

/* ---------- service tags ---------- */
.tpgcs .tpgcs__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tpgcs .tpgcs__tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--tpgcs-tag-bg);
  font-family: var(--tpgcs-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: normal;
  color: var(--tpgcs-tag-ink);
  white-space: nowrap;
}

/* ---------- learn more ----------
   Figma: 1px #d7d7d7 border, 12px radius, 12px/20px padding plus 4px on the
   inner wrap = 24px each side. Inter Medium 16/24, -0.128px.
   This is NOT a Divi button, so none of Divi's button rules apply and there is
   no ::after glyph to neutralize. */
.tpgcs .tpgcs__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Figma's frame is 134x48 with 12px/24px padding. In Figma a border sits
     inside the frame; in CSS it adds to a content-sized box, so the padding is
     pulled in by 1px each side to land on exactly 48px tall. */
  padding: 11px 23px;
  border: 1px solid var(--tpgcs-btn-line);
  border-radius: 12px;
  background: transparent;
  font-family: var(--tpgcs-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.128px;
  color: var(--tpgcs-btn-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease;
}
.tpgcs .tpgcs__btn:hover,
.tpgcs .tpgcs__btn:focus-visible{
  background: var(--tpgcs-tag-bg);
  border-color: var(--tpgcs-tag-bg);
  color: var(--tpgcs-btn-ink);
}

.tpgcs__more{ margin-top: 40px; }
.tpgcs__more .tpgcs__btn{ font-family: var(--tpgcs-body); }

/* Visually hidden, still read aloud — keeps every "Learn more" link uniquely
   labelled for screen readers without changing the visible design. */
.tpgcs .screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .tpgcs{ --tpgcs-media: 42%; --tpgcs-gap: 32px; --tpgcs-h: 360px; }
  .tpgcs .tpgcs__title{ font-size: 30px; line-height: 38px; letter-spacing: -1.8px; }
}

@media (max-width: 980px){
  .tpgcs{ --tpgcs-row-gap: 48px; }
  .tpgcs__item{ flex-direction: column; gap: 24px; }
  .tpgcs__media{
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 476 / 400;
  }
  .tpgcs__content{ min-height: 0; padding: 0; gap: 24px; justify-content: flex-start; }
}

@media (max-width: 479px){
  .tpgcs .tpgcs__title{ font-size: 26px; line-height: 34px; letter-spacing: -1.56px; }
  .tpgcs .tpgcs__tags{ gap: 8px; }
  .tpgcs__media{ border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce){
  .tpgcs .tpgcs__img{ transition: none; }
  .tpgcs__item:hover .tpgcs__img{ transform: none; }
}


/* ==========================================================================
   SINGLE CASE STUDY PAGE
   Classes used by the importable Divi layout (tpg-case-study-layout.json).
   Figma node 9752:2591 ("Internal case study").

   Palette here is the same neutral set as the list block, plus the sage card
   on the results section: page #f9f9f7 / white, ink #001d21, body #4e4e4e,
   card #607466 with #e6a838 stat rules.
   ========================================================================== */

.tpgcase-eyebrow, .tpgcase-eyebrow p{
  font-family: var(--tpg-font-mono, 'Geist Mono', ui-monospace, monospace);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.12em;      /* Figma 1.68px on 14px */
  text-transform: uppercase;
  color: #001d21;
  margin: 0;
}
.tpgcase-eyebrow--light, .tpgcase-eyebrow--light p{ color: #ffffff; }

/* ---------- hero ---------- */
.tpgcase-title, .tpgcase-title h1,
.tpgcase-hero-copy h1{
  font-family: var(--tpg-font-display, 'PP Right Grotesk Text', Arial, sans-serif);
  font-weight: 700;
  font-size: clamp(40px, 5.3125vw, 68px);
  line-height: 1.1471;         /* 78 / 68 */
  letter-spacing: -0.06em;
  color: #001d21;
  margin: 0;
}
/* The hero title and summary sit in one Text module, so these are targeted by
   element inside the module rather than by their own class. That makes them
   (0,1,1) — the same as Divi's own per-module rules — and Divi's module CSS is
   printed after plugin stylesheets, so anything set in the builder still wins
   the tie. */
.tpgcase-hero-copy p{
  margin-top: 16px;            /* Figma gap between title and summary */
}
.tpgcase-sub, .tpgcase-sub p,
.tpgcase-hero-copy p{
  font-family: var(--tpg-font-body, 'Inter', sans-serif);
  font-size: 16px;
  line-height: 24px;
  color: #4e4e4e;
  max-width: 722px;
  margin: 0;
}

.tpgcase-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tpgcase-tags li{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 4px 10px;
  border-radius: 4px;
  background: #e6e6e2;
  font-family: var(--tpg-font-body, 'Inter', sans-serif);
  font-size: 14px;
  line-height: 20px;
  color: #001d21;
  white-space: nowrap;
}

/* Hero and section images — Figma uses a 24px radius throughout. */
.tpgcase-img img, .tpgcase-img .et_pb_image_wrap{
  border-radius: 24px;
  display: block;
  width: 100%;
}
.tpgcase-img img{ object-fit: cover; }

/* ---------- section intro ---------- */
.tpgcase-lead, .tpgcase-lead p{
  font-family: var(--tpg-font-body, 'Inter', sans-serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.06em;     /* Figma -2.16px on 36px */
  color: #001d21;
  margin: 0;
}

/* ---------- challenge / solution ---------- */
.tpgcase-h2, .tpgcase-h2 h2{
  font-family: var(--tpg-font-body, 'Inter', sans-serif);
  font-weight: 400;
  font-size: clamp(32px, 3.75vw, 48px);
  line-height: 1.25;           /* 60 / 48 */
  letter-spacing: -0.06em;     /* Figma -2.88px on 48px */
  color: #001d21;
  margin: 0;
}
.tpgcase-body, .tpgcase-body p{
  font-family: var(--tpg-font-body, 'Inter', sans-serif);
  font-size: 16px;
  line-height: 24px;
  color: #4e4e4e;
  margin: 0 0 1em;
}
.tpgcase-body p:last-child{ margin-bottom: 0; }

/* ---------- the results ---------- */
.tpgcase-results{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  padding: 60px 40px;
  border-radius: 12px;
  background: #607466;
  box-sizing: border-box;
}
.tpgcase-results *, .tpgcase-results *::before, .tpgcase-results *::after{ box-sizing: border-box; }

.tpgcase-results__main{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 46px;
  max-width: 936px;
}
.tpgcase-results .tpgcase-results__text{
  font-family: var(--tpg-font-body, 'Inter', sans-serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.06em;
  color: #ffffff;
  margin: 0;
  text-align: left;
}

.tpgcase-results__stats{
  display: flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Figma draws four fixed 244px columns that overflow their 936px container;
   flexing them keeps the same look and divides the space properly instead. */
.tpgcase-results__stats > li{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 20px;
  margin: 0;
  border-left: 1px solid #e6a838;
}
.tpgcase-results .tpgcase-stat__value{
  font-family: var(--tpg-font-display, 'PP Right Grotesk Text', Arial, sans-serif);
  font-weight: 700;
  font-size: 60px;
  line-height: 72px;
  letter-spacing: -0.06em;     /* Figma -3.6px on 60px */
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
}
.tpgcase-results .tpgcase-stat__label{
  font-family: var(--tpg-font-mono, 'Geist Mono', ui-monospace, monospace);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .tpgcase-results{ padding: 48px 28px; gap: 28px; }
  .tpgcase-lead, .tpgcase-lead p,
  .tpgcase-results .tpgcase-results__text{ font-size: 30px; line-height: 38px; }
  .tpgcase-results .tpgcase-stat__value{ font-size: 44px; line-height: 54px; }
}

@media (max-width: 980px){
  .tpgcase-tags{ justify-content: flex-start; }
  .tpgcase-results{ flex-direction: column; gap: 32px; padding: 40px 24px; }
  .tpgcase-results__stats{ flex-wrap: wrap; gap: 28px 0; }
  .tpgcase-results__stats > li{ flex: 1 1 45%; }
}

@media (max-width: 600px){
  .tpgcase-results__stats > li{ flex: 1 1 100%; }
  .tpgcase-results .tpgcase-stat__value{ font-size: 40px; line-height: 48px; }
  .tpgcase-img img, .tpgcase-img .et_pb_image_wrap{ border-radius: 16px; }
}

/* ---------- column rhythm ----------
   Figma distributes the eyebrow, headline and body across the full height of
   the text column (justify-between over 469px) rather than stacking them with
   fixed gaps. Divi modules are block elements with a 30px bottom margin, so the
   column is made a flex container here to reproduce that distribution. */
.tpgcase-textcol.et_pb_column{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 469px;
}
.tpgcase-textcol.et_pb_column > .et_pb_module{ margin-bottom: 0; }

@media (max-width: 980px){
  .tpgcase-textcol.et_pb_column{
    display: block;
    min-height: 0;
  }
  .tpgcase-textcol.et_pb_column > .et_pb_module{ margin-bottom: 20px; }
}

/* ==========================================================================
   SPECIFICITY HARDENING  —  see README "Why the headings needed this"

   Every rule above is (0,1,1): one class plus one element. Divi emits exactly
   that same specificity for module settings AND for module presets
   (`.et_pb_text_0 h1 { color: #fff }`), and Divi's generated CSS is printed
   after plugin stylesheets — so on a tie Divi wins and the headings came out
   white on a light page.

   Repeating the class takes these to (0,2,1), which beats Divi's module CSS
   without resorting to !important, so a genuine !important override still
   works if one is ever needed.

   Trade-off: heading color and size for these specific modules are now locked
   to the design and can't be changed from the module's own settings. Copy,
   images and everything else edit normally.
   ========================================================================== */

.tpgcase-title.tpgcase-title h1,
.tpgcase-hero-copy.tpgcase-hero-copy h1{
  font-family: var(--tpg-font-display, 'PP Right Grotesk Text', Arial, sans-serif);
  font-weight: 700;
  font-size: clamp(40px, 5.3125vw, 68px);
  line-height: 1.1471;
  letter-spacing: -0.06em;
  color: #001d21;
}
.tpgcase-sub.tpgcase-sub p,
.tpgcase-hero-copy.tpgcase-hero-copy p{
  font-size: 16px;
  line-height: 24px;
  color: #4e4e4e;
}

.tpgcase-h2.tpgcase-h2 h2{
  font-family: var(--tpg-font-body, 'Inter', sans-serif);
  font-weight: 400;
  font-size: clamp(32px, 3.75vw, 48px);
  line-height: 1.25;
  letter-spacing: -0.06em;
  color: #001d21;
}

.tpgcase-lead.tpgcase-lead p,
.tpgcase-lead.tpgcase-lead h1,
.tpgcase-lead.tpgcase-lead h2,
.tpgcase-lead.tpgcase-lead h3{
  font-family: var(--tpg-font-body, 'Inter', sans-serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.06em;
  color: #001d21;
}

.tpgcase-eyebrow.tpgcase-eyebrow p{ color: #001d21; }
.tpgcase-eyebrow--light.tpgcase-eyebrow--light p{ color: #ffffff; }
.tpgcase-body.tpgcase-body p{ color: #4e4e4e; }

/* ==========================================================================
   BEATING DIVI'S MODULE CSS  —  measured on the live site, not assumed

   A Text module with no colour of its own inherits the site's default Text
   preset, which on a navy-dominant site sets headings to white. Divi emits
   that preset as ONE grouped rule covering every text module:

     .et-db #et-boc .et-l .et_pb_text_0 h1,
     .et-db #et-boc .et-l .et_pb_text_1 h1, ...  { color:#fff !important }

   Specificity (1,3,1) plus !important. Three earlier attempts lost to it:
   class-only rules, doubled classes, and class-only + !important — none can
   outrank an ID. Setting header_text_color on the modules in the layout JSON
   did not win either, because the preset still emits the grouped rule.

   What works, verified in the browser on the live page: match Divi's own
   prefix and add one more class. That is (1,4,1) + !important, which beats
   Divi's (1,3,1) outright regardless of source order.

   These are colour-only and namespaced to .tpgcase-*, so nothing else on the
   site is affected. Heading colour on these modules is fixed to the design and
   cannot be changed from the module settings.
   ========================================================================== */

.et-db #et-boc .et-l .tpgcase-title.tpgcase-title h1,
.et-db #et-boc .et-l .tpgcase-hero-copy.tpgcase-hero-copy h1,
.et-db #et-boc .et-l .tpgcase-h2.tpgcase-h2 h1,
.et-db #et-boc .et-l .tpgcase-h2.tpgcase-h2 h2,
.et-db #et-boc .et-l .tpgcase-h2.tpgcase-h2 h3,
.et-db #et-boc .et-l .tpgcase-lead.tpgcase-lead p,
.et-db #et-boc .et-l .tpgcase-lead.tpgcase-lead h1,
.et-db #et-boc .et-l .tpgcase-lead.tpgcase-lead h2,
.et-db #et-boc .et-l .tpgcase-lead.tpgcase-lead h3,
.et-db #et-boc .et-l .tpgcase-eyebrow.tpgcase-eyebrow p,
.et-db #et-boc .et-l .tpgcase-tagcol.tpgcase-tagcol li{
  color: #001d21 !important;
}

.et-db #et-boc .et-l .tpgcase-hero-copy.tpgcase-hero-copy p,
.et-db #et-boc .et-l .tpgcase-sub.tpgcase-sub p,
.et-db #et-boc .et-l .tpgcase-body.tpgcase-body p{
  color: #4e4e4e !important;
}

.et-db #et-boc .et-l .tpgcase-eyebrow--light.tpgcase-eyebrow--light p,
.et-db #et-boc .et-l .tpgcase-results .tpgcase-results__text,
.et-db #et-boc .et-l .tpgcase-results .tpgcase-stat__value,
.et-db #et-boc .et-l .tpgcase-results .tpgcase-stat__label{
  color: #ffffff !important;
}

/* Outside a Theme Builder layout there is no .et-db #et-boc wrapper, so the
   same colours are repeated without the prefix as a fallback. */
.tpgcase-title.tpgcase-title h1,
.tpgcase-hero-copy.tpgcase-hero-copy h1,
.tpgcase-h2.tpgcase-h2 h2,
.tpgcase-lead.tpgcase-lead p,
.tpgcase-eyebrow.tpgcase-eyebrow p{ color: #001d21; }
.tpgcase-hero-copy.tpgcase-hero-copy p,
.tpgcase-body.tpgcase-body p{ color: #4e4e4e; }

/* The Theme Builder body row width is NOT set here — it is a builder setting.
   Divi sizes it with .et-db #et-boc .et-l .et_pb_row_0_tb_body, and the right
   place to change it is Theme Builder > that row > Width 100% / Max Width 100%
   with zero padding. */


/* ==========================================================================
   CASE STUDY CARD GRID  —  [tpg_case_study_cards]
   Figma node 9905:1774 / 9905:1775.

   Card 376 x 458, 12px radius, 16px padding. Cover image fills the card, a
   dark gradient scrim sits over it so the title stays legible on any photo,
   and the amber arrow button appears on hover.

   The title font in Figma resolves through the misspelled
   "Typhography/Font family/Header" variable to Geist. That variable was an
   error in the file — Inter is TPG's body face, so Inter is used here.
   ========================================================================== */

.tpgcc{
  --tpgcc-gap:    24px;    /* Figma: 400 - 376 */
  --tpgcc-radius: 12px;
  --tpgcc-pad:    16px;
  --tpgcc-amber:  #e6a838;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tpgcc-gap);
  width: 100%;
  max-width: 1176px;
  font-family: var(--tpg-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}
.tpgcc *, .tpgcc *::before, .tpgcc *::after{ box-sizing: border-box; }

.tpgcc__card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;              /* Figma: items-end — arrow sits right */
  justify-content: space-between;     /* arrow top, title bottom */
  aspect-ratio: 376 / 458;
  padding: var(--tpgcc-pad);
  border-radius: var(--tpgcc-radius);
  overflow: hidden;
  background: #1a2131;                /* shows if a case study has no cover */
  text-decoration: none;
  isolation: isolate;
}

.tpgcc .tpgcc__img{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.tpgcc__card:hover .tpgcc__img,
.tpgcc__card:focus-visible .tpgcc__img{ transform: scale(1.04); }

/* Figma: linear-gradient(180deg, transparent 60.699%, rgba(0,0,0,.7) 100%).
   Always on, so the title never lands on a light patch of photo. */
.tpgcc__scrim{
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--tpgcc-radius);
  background: linear-gradient(180deg, rgba(0,0,0,0) 60.699%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}

/* ---------- arrow button: hidden until hover ---------- */
.tpgcc__arrow{
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 67px;
  height: 67px;
  border-radius: 67px;
  background: var(--tpgcc-amber);
  color: #ffffff;
  /* opacity rather than display, so the title never shifts position */
  opacity: 0;
  transform: scale(.88);
  transition: opacity .25s ease, transform .25s cubic-bezier(.22,.61,.36,1);
}
.tpgcc__arrow svg{ display: block; width: 33.5px; height: 33.5px; }

.tpgcc__card:hover .tpgcc__arrow,
.tpgcc__card:focus-visible .tpgcc__arrow{ opacity: 1; transform: none; }

/* Keyboard users get a visible focus ring on the card itself. */
.tpgcc__card:focus-visible{ outline: 3px solid var(--tpgcc-amber); outline-offset: 3px; }

/* ---------- title ---------- */
.tpgcc .tpgcc__title,
.et-db #et-boc .et-l .tpgcc .tpgcc__title{
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--tpg-font-body, 'Inter', sans-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.04em;     /* Figma -1.28px on 32px */
  color: #ffffff;
  text-align: left;
}

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .tpgcc .tpgcc__title,
  .et-db #et-boc .et-l .tpgcc .tpgcc__title{ font-size: 28px; line-height: 36px; }
  .tpgcc__arrow{ width: 56px; height: 56px; }
  .tpgcc__arrow svg{ width: 28px; height: 28px; }
}

@media (max-width: 980px){
  .tpgcc{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px){
  .tpgcc{ grid-template-columns: 1fr; --tpgcc-gap: 16px; }
  .tpgcc__card{ aspect-ratio: 376 / 380; }
  /* No hover on touch — show the arrow so the affordance isn't lost. */
  .tpgcc__arrow{ opacity: 1; transform: none; }
}

@media (hover: none){
  .tpgcc__arrow{ opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce){
  .tpgcc .tpgcc__img, .tpgcc__arrow{ transition: none; }
  .tpgcc__card:hover .tpgcc__img{ transform: none; }
}