/* ================================================================
   CAREERS — OPPORTUNITIES TEMPLATE
   Figma: node 3238-8154 (desktop) · 3238-8341 (mobile)
   Depends on: ../../style.css (design tokens + layout utilities)
   Prefix: co-
   ================================================================ */


/* ================================================================
   S1 — HERO BANNER
   Full-bleed photo card, dark gradient, centred eyebrow + H1.
   Figma: outer section px-[32px] py-[20px] · card py-[115px] px-[283px]
   ================================================================ */

.co-hero {
  background: #fff;
  padding: 20px 32px;
}

/* Card — rounded, shadow, photo-fills the whole surface */
.co-hero__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  overflow: hidden;
  padding: 115px var(--site-px, 118px);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.09);
  min-height: 380px;
}

/* ── Background layers ───────────────────────────────────────── */

.co-hero__bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.co-hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
}

/* Top-to-bottom dark navy fade (primary depth layer) */
.co-hero__overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Secondary vignette for extra contrast at the bottom */
.co-hero__gradient {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--hero-gradient);
}

/* ── Content (centred) ───────────────────────────────────────── */

.co-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  max-width: 800px;
}

.co-hero__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* H1 — Playfair Display SemiBold, white */
.co-hero__heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: 54px;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0;
}

/* Optional subheading below H1 */
.co-hero__body {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body, 18px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
  margin: 0;
}

/* ── Pills ───────────────────────────────────────────────────── */

.co-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 99px;
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-overhead, 16px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Navy: dark navy background, white text */
.co-pill--navy {
  background: var(--color-primary, #071D49);
  color: #fff;
}

/* Teal: for use in later sections */
.co-pill--teal {
  background: var(--color-teal, #4FBEBE);
  color: var(--color-primary, #071D49);
}


/* ── Responsive — tablet ≤1024px ─────────────────────────────── */

@media (max-width: 1024px) {
  .co-hero {
    padding: 0 0 var(--site-py-flush) 0;
  }

  .co-hero__card {
    padding: 80px 48px;
    border-radius: 0;
  }

  .co-hero__heading {
    font-size: 44px;
  }
}


/* ── Responsive — mobile ≤767px ──────────────────────────────── */

@media (max-width: 767px) {
  .co-hero__card {
    border-radius: 0;
    box-shadow: none;
    padding: 80px 20px;
    min-height: auto;
  }

  .co-hero__heading {
    font-size: 36px;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .co-pill {
    font-size: 14px;
    padding: 8px 14px;
  }
}


/* ================================================================
   SECTION SPACING UTILITIES (page-builder)
   Applied per-section by the loop in single-opportunities.php,
   which compares each section's background with its neighbours:
   -flush = same background as neighbour · -full = colour change.
   Tokens shrink responsively via style.css, so no media queries.
   ================================================================ */

.co-sec--pt-flush { padding-top: var(--site-py-flush, 40px); }
.co-sec--pt-full  { padding-top: var(--site-py, 80px); }
.co-sec--pb-flush { padding-bottom: var(--site-py-flush, 40px); }
.co-sec--pb-full  { padding-bottom: var(--site-py, 80px); }


/* ================================================================
   S2 — IMAGE + TEXT (page-builder component)
   Figma: node 3238-8203 (desktop) · 3238-8363 (mobile)
   Full-bleed 16/9 image one side (rounded inner corners),
   text content the other. Variants: --left (default) / --right.
   Vertical padding comes from the co-sec-- utilities.
   ================================================================ */

.co-image-text {
  background: #fff;
  overflow: hidden;
}

.co-image-text__inner {
  display: flex;
  align-items: center;
}

.co-image-text--right .co-image-text__inner {
  flex-direction: row-reverse;
}

/* ── Image — bleeds to the viewport edge, rounded on inner side ─ */

.co-image-text__img-wrap {
  flex: 0.5;
  min-width: 0;
  aspect-ratio: 16 / 9;
  border-radius: 0 32px 32px 0;
  overflow: hidden;
  background: var(--color-stroke, #E8EDF6);
  min-height: 500px;
}

.co-image-text--right .co-image-text__img-wrap {
  border-radius: 32px 0 0 32px;
}

.co-image-text__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Text content ────────────────────────────────────────────── */

.co-image-text__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 0 var(--site-px, 118px);
  max-width: 838px;
}

/* H3 — Playfair Display SemiBold 32px */
.co-image-text__heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h3, 32px);
  font-weight: var(--fw-h3, 600);
  line-height: var(--lh-h3, 1.1);
  letter-spacing: var(--ls-h3, 0.03em);
  color: var(--color-text, #1E153D);
  margin: 0;
}

/* Body — Rubik Light 18px */
.co-image-text__body {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body, 18px);
  font-weight: var(--fw-body, 300);
  line-height: var(--lh-body, 1.4);
  letter-spacing: var(--ls-body, 0.01em);
  color: var(--color-text, #1E153D);
}

.co-image-text__body p { margin: 0 0 0.8em; }
.co-image-text__body p:last-child { margin-bottom: 0; }

.co-image-text__body a {
  color: inherit;
  text-decoration: underline;
}

/* Navy pill button with arrow */
.co-image-text__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--color-primary, #071D49);
  border-radius: 999px;
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-action, 16px);
  font-weight: var(--fw-action, 400);
  line-height: var(--lh-action, 1);
  letter-spacing: var(--ls-action, -0.01em);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
  justify-content: center;
}

.co-image-text__btn:hover { opacity: 0.80; color: #fff; }

/* ── Responsive — tablet ≤1024px ─────────────────────────────── */
/* Stacked layout. Figma mobile order: heading → image → body →
   button, so the content wrapper flattens (display: contents)
   and its children re-order alongside the image. */

   /* ── Responsive — desktop ≥1366px ─────────────────────────────── */
@media (max-width: 1366px) {
.co-image-text__img-wrap{
  flex: 1;
}
}

@media (max-width: 1024px) {
  .co-image-text__inner,
  .co-image-text--right .co-image-text__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 0 var(--site-px, 40px);
  }

  .co-image-text__content { display: contents; }

  .co-image-text__content .co-pill {
    order: 1;
    align-self: flex-start;
  }

  .co-image-text__heading { order: 2; }

  .co-image-text__img-wrap,
  .co-image-text--right .co-image-text__img-wrap {
    order: 3;
    flex: none;
    width: 100%;
    border-radius: 12px;
    min-height: 0;
  }

  .co-image-text__body { order: 4; }

  .co-image-text__btn {
    order: 5;
    align-self: flex-start;
  }

}

/* ── Responsive — mobile ≤767px ──────────────────────────────── */

@media (max-width: 767px) {
  /* Mobile/H2: 32px (token --fs-h3 drops to 22px, design keeps 32) */
  .co-image-text__heading {
    font-size: var(--fs-h2, 32px);
    line-height: 1;
    letter-spacing: 0.02em;
  }

  /* Mobile/Action: Rubik Medium */
  .co-image-text__btn { width: 100%; }
}


/* ================================================================
   S3 — REVIEWS (page-builder component)
   Careers S9 parity — carousel markup output by shortcode.
   Grey band; slides stay white. Vertical padding comes from the
   co-sec-- utilities (always -full, as neighbours are white).
   ================================================================ */

.co-reviews {
  background: var(--color-stroke, #E8EDF6);
}

section.co-reviews .carousel-slide {
  background: #fff;
}


/* ================================================================
   S5 — VALUE PROPOSITIONS (page-builder component)
   Figma: node 3305-3639 · service-child S7 (sc-vp) parity
   Two-column: eyebrow + H2 + body + CTA left, stacked horizontal
   icon cards right. Teal accent in place of --service-accent.
   Vertical padding comes from the co-sec-- utilities.
   ================================================================ */

.co-vp {
  background: #fff;
}

/* site-container provides max-width + horizontal padding */
.co-vp__layout {
  display: flex;
  align-items: center;
  gap: 48px;
}

.co-vp__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.co-vp__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.co-vp__heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h2, 44px);
  font-weight: var(--fw-h2, 600);
  line-height: var(--lh-h2, 1.1);
  letter-spacing: var(--ls-h2, 0.03em);
  color: var(--color-text, #1E153D);
  margin: 0;
}

.co-vp__body {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body, 18px);
  font-weight: var(--fw-body, 300);
  line-height: var(--lh-body, 1.4);
  letter-spacing: var(--ls-body, 0.01em);
  color: var(--color-text, #1E153D);
}

.co-vp__body p     { margin: 0; }
.co-vp__body p + p { margin-top: 1em; }

.co-vp__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--color-primary, #071D49);
  color: #fff;
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-action, 16px);
  font-weight: var(--fw-action, 400);
  line-height: var(--lh-action, 1);
  letter-spacing: var(--ls-action, -0.01em);
  text-decoration: none;
  white-space: nowrap;
  align-self: flex-start;
  transition: opacity 0.2s ease;
}

.co-vp__cta:hover { opacity: 0.82; color: #fff; }

/* ── Right: stacked cards ────────────────────────────────────── */

.co-vp__right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.co-vp__card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 32px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.10);
}

/* Teal circle icon badge */
.co-vp__icon-wrap {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-teal, #4FBEBE);
  display: flex;
  align-items: center;
  justify-content: center;
}

.co-vp__icon {
  width: 36px;
  height: 36px;
  display: block;
  color: var(--color-primary, #071D49);
}

.co-vp__card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* H4 — Playfair Display Bold 24px */
.co-vp__card-title {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h4, 24px);
  font-weight: var(--fw-h4, 700);
  line-height: var(--lh-h4, 1.1);
  letter-spacing: var(--ls-h4, 0.03em);
  color: var(--color-text, #1E153D);
  margin: 0;
}

.co-vp__card-body {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body-s, 14px);
  font-weight: var(--fw-body-s, 300);
  line-height: var(--lh-body-s, 1.4);
  letter-spacing: var(--ls-body-s, 0.01em);
  color: var(--color-text, #1E153D);
  margin: 0;
}

/* ── Responsive — tablet ≤1024px ─────────────────────────────── */

@media (max-width: 1024px) {
  .co-vp__layout { flex-direction: column; }

  .co-vp__left,
  .co-vp__right {
    flex: none;
    width: 100%;
  }
}

/* ── Responsive — mobile ≤767px ──────────────────────────────── */

@media (max-width: 767px) {
  .co-vp__layout { gap: 32px; }

  /* CTA becomes full-width pill */
  .co-vp__cta {
    align-self: stretch;
    justify-content: center;
  }

  .co-vp__card {
    padding: 24px;
    border-radius: 16px;
    gap: 12px;
  }

  .co-vp__icon-wrap {
    width: 32px;
    height: 32px;
  }

  .co-vp__icon { width: 16px; height: 16px; }

  .co-vp__card-text { gap: 8px; }
}


/* ================================================================
   S4 — TESTIMONIALS (page-builder component)
   Figma: node 3305-3237
   Grey quote card in a Swiper carousel (one slide at a time),
   teal quote mark, bold attribution, prev/next arrows right.
   Vertical padding comes from the co-sec-- utilities.
   ================================================================ */

.co-testimonials {
  background: #fff;
  overflow: hidden;
}

.co-testimonials__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 var(--site-px, 118px);
  max-width: 1440px;
    margin: 0 auto;
}

.co-testimonials__swiper {
  flex: 1;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

/* Grey quote card */
.co-testimonials__card {
  background: var(--color-stroke, #E8EDF6);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

.co-testimonials__icon {
  color: var(--color-teal, #4FBEBE);
  flex-shrink: 0;
}

/* Body Small — 14px */
.co-testimonials__quote {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body-s, 14px);
  font-weight: var(--fw-body-s, 300);
  line-height: var(--lh-body-s, 1.4);
  letter-spacing: var(--ls-body-s, 0.01em);
  color: var(--color-text-secondary, #1E153D);
  margin: 0;
}

.co-testimonials__attribution {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body-s, 14px);
  font-weight: 700;
  line-height: var(--lh-body-s, 1.4);
  letter-spacing: var(--ls-body-s, 0.01em);
  color: var(--color-text-secondary, #1E153D);
}

/* Prev/next arrows */
.co-testimonials__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.co-testimonials__arrow,
.co-people__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-text, #1E153D);
  transition: opacity 0.2s ease;
}

.co-testimonials__arrow:hover,
.co-people__arrow:hover { opacity: 0.6; }

/* Swiper adds this when there's nowhere left to go (loop off) */
.co-testimonials__arrow.swiper-button-disabled,
.co-people__arrow.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* Pagination dots — hidden on desktop, shown on mobile */
.co-testimonials__pagination {
  display: none;
}

/* ── Responsive — mobile ≤767px ──────────────────────────────── */

@media (max-width: 767px) {
  .co-testimonials__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 0 var(--site-px, 20px);
  }

  .co-testimonials__nav { display: none; }

  .co-testimonials__pagination {
    display: block;
    text-align: center;
    margin-top: 12px;
  }

  .co-testimonials__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--color-teal);
    width: 30px;
    border-radius: 999px;
  }

  .co-testimonials__pagination .swiper-pagination-bullet{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all ease 0.2s;
  }
}


/* ================================================================
   S6 — PEOPLE / HEAR FROM OUR PEOPLE (page-builder component)
   Figma: node 3305-3557
   H2 + prev/next arrows header row, then a grey card in a Swiper
   carousel: square photo left, name + multi-paragraph quote right.
   Arrow styles are shared with S4 testimonials.
   Vertical padding comes from the co-sec-- utilities.
   ================================================================ */

.co-people {
  background: #fff;
  overflow: hidden;
}

.co-people__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 0 var(--site-px, 118px);
  max-width: 1440px;
  margin: 0 auto;
}

/* Header row: H2 left, arrows right */
.co-people__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* H2 — Playfair Display SemiBold 44px */
.co-people__heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h2, 44px);
  font-weight: var(--fw-h2, 600);
  line-height: var(--lh-h2, 1.1);
  letter-spacing: var(--ls-h2, 0.03em);
  color: var(--color-text-secondary, #1E153D);
  margin: 0;
}

.co-people__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.co-people__swiper {
  width: 100%;
  min-width: 0;
}

/* Grey card: photo left, text right */
.co-people__card {
  display: flex;
  align-items: flex-start;
  background: var(--color-stroke, #E8EDF6);
  border-radius: 16px;
  overflow: hidden;
}

/* Square photo, flush to the card's left edge */
.co-people__img-wrap {
  background: var(--color-stroke, #E8EDF6);
  flex: 0.6;
    height: 100%;
}

.co-people__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.co-people__content {
  flex: 1;
  min-width: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Name — Rubik SemiBold 24px */
.co-people__name {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--color-text-secondary, #1E153D);
  margin: 0;
}

/* Quote — Body Small 14px, multiple paragraphs */
.co-people__quote {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body-s, 14px);
  font-weight: var(--fw-body-s, 300);
  line-height: var(--lh-body-s, 1.4);
  letter-spacing: var(--ls-body-s, 0.01em);
  color: var(--color-text, #1E153D);
}

.co-people__quote p     { margin: 0; }
.co-people__quote p + p { margin-top: 1em; }


/* ── Responsive — tablet ≤1024px ─────────────────────────────── */
/* Card stacks: photo on top, full width */

@media (max-width: 1024px) {

  .co-people__card { flex-direction: column; }

  .co-people__img-wrap {
    width: 100%;
    aspect-ratio: 4/3;
  }
}

/* ── Responsive — mobile ≤767px ──────────────────────────────── */

@media (max-width: 767px) {
  .co-people__inner { gap: 24px; }

  .co-people__name { font-size: 20px; }
}


/* ================================================================
   CTA BANNER — careers S10 parity (hardcoded, bottom of page)
   Figma desktop: node 1474:2130 (sustainability parity)
   White outer section. Dark rounded card with layered gradient
   glow. Teal eyebrow pill + H2 + Get in Touch + Ask William.
   Vertical padding comes from the co-sec-- utilities; horizontal
   from the global .site-band. Ask William styles live in style.css.
   ================================================================ */

/* Button utilities — scoped to co- */
.co-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-action, 16px);
  font-weight: var(--fw-action, 500);
  line-height: 1;
  letter-spacing: var(--ls-action, -0.01em);
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  width: fit-content;
  justify-content: center;
}

.co-btn:hover { opacity: 0.82; }
.co-btn__arrow { flex-shrink: 0; }

.co-btn--light {
  background: var(--color-stroke, #E8EDF6);
  color: var(--color-text, #1E153D);
}

/* Section wrapper */
.co-cta {
  background: #fff;
}

/* Card */
.co-cta__card {
  position: relative;
  width: 100%;
  border-radius: 32px;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.10);
  isolation: isolate;
}

/* Deep navy base */
.co-cta__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #060f20;
  opacity: 0.89;
  z-index: -2;
}

/* Teal-to-navy blurred glow */
.co-cta__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    129deg,
    var(--color-teal, #4FBEBE) 24%,
    var(--color-primary, #071D49) 70%,
    var(--color-text, #1E153D) 94%
  );
  filter: blur(37px);
  opacity: 0.35;
  z-index: -1;
}

.co-cta__heading {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: var(--fs-h2, 44px);
  font-weight: var(--fw-h2, 600);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  max-width: 775px;
  margin: 0;
}

.co-cta__body {
  font-family: var(--font-body, 'Rubik', sans-serif);
  font-size: var(--fs-body-s, 14px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #fff;
  max-width: 628px;
  margin: 0;
}

.co-cta__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Responsive — tablet ≤1024px ─────────────────────────────── */

@media (max-width: 1024px) {
  /* Card goes full-bleed edge-to-edge (overrides co-sec-- padding) */
  .co-cta { padding: var(--site-py-flush) 0 0 0; }
  section.co-cta.site-band.co-sec--pt-full.co-sec--pb-full {
    padding-top: 0;
}
  .co-cta__card { padding: 60px 40px; border-radius: 0; }
}

/* ── Responsive — mobile ≤767px ──────────────────────────────── */

@media (max-width: 767px) {
  .co-btn { width: 100%; }

  .co-cta__card {
    padding: 48px 24px;
    gap: 24px;
  }

  .co-cta__heading { font-size: var(--fs-h2-mob, 32px); }

  .co-cta__actions {
    flex-direction: column;
    width: fit-content;
  }

  .co-cta__actions .co-btn,
  .co-cta__actions .gradient-outline-pill {
    width: 100%;
    justify-content: center;
  }
}