/* ==========================================================================
   Our Member Sectors — page-scoped styles
   Figma node 11224:3198. Spec: roadmap/phase-08-content-pages/artifacts/page-our-member-sectors-spec.md

   Reuses (no overrides unless noted): page-banner (banners.css), .about-feature-intro
   (about.css), .content-block__tagline / __heading (about.css), .btn--* (buttons.css),
   accordion.js (sitewide — hooks any [data-accordion] details, no JS change needed here).

   New components: .sector-accordion__* (icon-avatar + sub-item-list accordion —
   no equivalent exists in .charity-accordion, which has no icon slot and a
   different panel shape), .member-sectors-* (intro + section wrapper),
   .sectors-cta__* (Block 6 Colour CTA — BESPOKE, built from scratch; deliberately
   NOT reusing partnerships' .colour-form-cta, whose reuse was drifting the layout).

   Desktop-first: mobile @media (max-width) blocks live AFTER desktop rules, per
   css-architecture.md. Do NOT add overflow-x:hidden here — already global in base.css.
   ========================================================================== */

/* ==========================================================================
   Block 4 — Feature Intro — .about-feature-intro--sectors modifier
   Figma node 11224:5324 (Content Wrapper 11224:5325)
   ========================================================================== */

/* Pastel 2026-07-21 #1: designer removed the tangerine 1px card border
   (was: border 1px solid var(--color-tangerine), Figma 11224:5325). The sectors
   Feature-Intro Content Wrapper now renders with no border. */

/* Section Description renders wider than the shared base cap (900px) —
   Figma box w=1024 vs about.css:124 base 900px cap. Same override technique
   as --member (become-a-member.css:18-20).
    Figma 11224:5329 box w=1024 */
.about-feature-intro--sectors .about-feature-intro__lead {
  max-width: 1024px; /* Figma 11224:5329 box w=1024 */
}


/* ==========================================================================
   Block 5 — Sections_News & Events (renamed in-page: "Our sectors")
   Figma node 11620:5740 — intro (tagline/H2/copy) + 5-sector accordion
   ========================================================================== */

/* Outer section: light navy-50% band, centers a 1280-wide content column.
    Figma 11620:5740 fill_9T1J0Z rgba(230,231,233,0.5); 11620:5741 padding 112 80 */
.member-sectors-sectors {
  display: flex;
  justify-content: center;
  padding: 112px 80px;                    /* Figma 11620:5741 padding 112 80 = --space-28/--space-20 */
  background-color: var(--color-navy-lightest-50); /* Figma 11620:5740 fill_9T1J0Z */
}

/* Content column: fixed 1280, intro block above accordion.
    Figma 11620:5742 content wrapper width 1280 fixed gap 46 */
.member-sectors-sectors__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;                              /* Rev 2026-07-17 #3: gap before cards 46 -> 48 (designer) */
  width: 100%;
  max-width: 1280px;                      /* Figma 11620:5742 width 1280 fixed */
  min-width: 0;
}

/* Intro: tagline (reused .content-block__tagline) + H2 (reused .content-block__heading,
   size token-corrected 44px per css-architecture.md) + copy paragraph (new).
    Figma 11620:5744 intro content column gap 22 — untokenized
   Note: tagline underline in cache is a single raw vector, not the ::before/::after
   tagline-hook construction .content-block__tagline reuses — reused verbatim
   (project's established tagline component), not re-derived from the raw vector. */
.member-sectors-intro {
  display: flex;
  flex-direction: column;
  gap: 22px;                              /* Figma 11620:5744 gap 22 — untokenized */
  max-width: 768px;                       /* Pastel 2026-07-21 #4: designer set section max-width 768 (was 648) */
}

/* Rev 2026-07-17 #1: "Our sectors" H2 = 48px (designer; = raw Figma 11620:5750 Heading/H2
   48/1.2em/-0.01em — reverts the earlier 44px token-correction). Scoped so it out-specifies
   the shared .content-block__heading; a mobile counterpart is added @768 to avoid leaking. */
.member-sectors-intro .content-block__heading {
  font-size: 48px;                        /* Figma 11620:5750 Heading/H2 fontSize 48 */
  line-height: 1.2;                       /* Figma 11620:5750 lineHeight 1.2em */
}

/* Intro copy: Text Large Bold 20px navy (new — no existing class matches this weight).
    Figma 11620:5752 Text Large Bold 20px #0b1628 */
.member-sectors-intro__copy {
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 20px;                        /* Figma 11620:5752 Text Large Bold */
  line-height: 1.3;                       /* 130% */
  color: var(--color-navy);               /* Figma 11620:5752 #0b1628 */
}

/* Accordion wrapper: column, gap 16. Carries [data-accordion] in markup so the
   sitewide accordion.js (functions.php:359) hooks it — no JS change needed.
    Figma 11620:5753 accordion wrapper gap 16 = --space-4 */
.sector-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;                              /* Figma 11620:5753 gap 16 = --space-4 */
}

/* Item: white card, 1px border. Border swaps navy-lighter (closed) -> tangerine
   (open) — same mechanic as .charity-accordion__item[open] (community.css:888-892).
    Figma 11620:5754(+5782/5790/5798/5806) padding 24 radius 4 border 1px */
.sector-accordion__item {
  padding: 24px;                           /* Figma padding 24 = --space-6 */
  background-color: var(--color-white);   /* Figma accordion item background */
  border: 1px solid var(--color-navy-lighter); /* Figma closed border #ced0d4 */
  border-radius: var(--radius-sm);        /* Figma corner radius 4 = --radius-sm */
  transition: border-color 0.15s ease;
}

.sector-accordion__item[open] {
  border-color: var(--color-tangerine);   /* Figma open border (Residential) #ff6600 */
}

/* Summary: row, space-between, no default marker. Focus-visible outline is a new
   accessibility rule — the reuse source (.charity-accordion__summary) has none
   either (grep-verified, community.css). */
.sector-accordion__summary {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}

.sector-accordion__summary::-webkit-details-marker {
  display: none;
}

.sector-accordion__summary:focus-visible {
  outline: 2px solid var(--color-tangerine);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Left group: icon + title, row, gap 24.
    Figma 11620:12135(+ per-sector) left-wrapper gap 24 = --space-6 */
.sector-accordion__left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;                              /* Figma gap 24 = --space-6 */
  flex: 1 1 auto;
  min-width: 0;                           /* css-architecture.md — flex child allows title wrap */
}

/* Icon wrapper: 56x56, tangerine-lightest bg, radius 4.
    Figma 11620:12136(+ per-sector) size 56x56 padding 10 radius 4 */
.sector-accordion__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;                             /* Figma size 56x56 */
  height: 56px;
  padding: 10px;                           /* Figma padding 10 — untokenized one-off */
  border-radius: var(--radius-sm);         /* Figma corner radius 4 */
  background-color: var(--color-tangerine-lightest); /* Figma icon wrapper bg #ffefe5 */
}

/* Icon: real Figma vector instances downloaded as SVG (assets/images/our-member-sectors/
   icons/icon-<sector>.svg, tangerine #ff6600 baked in) per figma-spec.md / icons rule. 36x36. */
.sector-accordion__icon img {
  width: 36px;
  height: 36px;
  display: block;
}

/* Title: H5 24px navy.
    Figma 11620:12139(+ per-sector) H5 24px #0b1628 */
.sector-accordion__title {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 24px;                        /* Figma H5 24px */
  line-height: 1.3;                       /* 130% */
  letter-spacing: -0.01em;
  color: var(--color-navy);               /* Figma #0b1628 */
}

/* Chevron: 36x36 icon glyph, rotates 180deg on open — same mechanic as
   .charity-accordion__item[open] .charity-accordion__chevron (community.css:955-956).
    Figma 11620:5761(+ per-sector, componentId 4179:9356) 36x36 */
.sector-accordion__chevron {
  font-size: 36px;                        /* Figma chevron 36x36 — exempt, icon glyph */
  line-height: 1;
  color: var(--color-tangerine);          /* Figma chevron fill #ff6600 */
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.sector-accordion__item[open] .sector-accordion__chevron {
  transform: rotate(180deg);              /* Figma chevron rotates on open state */
}

/* Panel: hidden when closed (native <details> collapse relies on this — same
   requirement as .charity-accordion__panel, community.css:962-977), row layout
   (list left, image right), gap 36.
    Figma 11620:5762 content-wrapper (panel) gap 36 = --space-9 */
.sector-accordion__panel {
  display: none;
  flex-direction: row;
  gap: 36px;                              /* Figma gap 36 = --space-9 */
  padding-top: 24px;                      /* gap between summary and panel */
  min-width: 0;
}

.sector-accordion__item[open] .sector-accordion__panel {
  display: flex;
}

/* Sub-item list: fixed 480 width, hairline padding compensation.
    Figma 11620:5763/5764 list container width 480 padding 3 1 */
.sector-accordion__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 3px 1px;                       /* Figma padding 3 1 — untokenized hairline compensation */
  flex: 0 0 480px;                        /* Figma list container width 480 fixed */
  min-width: 0;
}

/* Row: space-between, bottom divider on every row (incl. last — per spec cache).
    Figma 11620:5765(+ all rows, all 5 sectors) padding 16 0, divider 1px #ff6600 */
.sector-accordion__row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;                        /* Figma row padding 16 0 = --space-4 T/B */
  border-bottom: 1px solid var(--color-tangerine); /* Figma row divider #ff6600 */
}

/* Rev 2026-07-17 #4: drop the trailing orange divider under the last list item (designer). */
.sector-accordion__row:last-child {
  border-bottom: none;
}

/* Compound row (title + description stacked): Commercial + Civil only.
    Figma 11233:9678 (Commercial) / 11233:9697 (Civil) gap 4 = --space-1 */
.sector-accordion__row--compound {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;                               /* Figma gap 4 = --space-1 */
}

/* Row title: Text Regular Bold 16px navy — unchanged on mobile (css-architecture.md).
    Figma e.g. 11620:5766 (Residential) Text Regular Bold */
.sector-accordion__row-title {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 16px;                        /* Text Regular Bold — unchanged mobile */
  line-height: 1.4;                       /* 140% */
  color: var(--color-navy);
}

/* Row description (compound rows only): Text Small 14px navy — unchanged on mobile.
    Figma 11233:9680 (Commercial) / 11233:9699 (Civil) Text Small */
.sector-accordion__row-desc {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;                        /* Text Small — unchanged mobile */
  line-height: 1.4;                       /* 140% */
  color: var(--color-navy);
}

/* Panel image: fills remaining row width, padding 10 inset, radius 4.
    Figma 11620:5781(+ per-sector) padding 10 radius 4 */
.sector-accordion__image {
  flex: 1 1 auto;
  align-self: stretch;                    /* Rev 2026-07-17 #5: match the text-list height in the row layout */
  min-width: 0;                           /* css-architecture.md — flex child in row layout */
  margin: 0;
  padding: 10px;                          /* Figma padding 10 — untokenized one-off */
  border-radius: var(--radius-sm);        /* Figma corner radius 4 */
  box-sizing: border-box;
}

.sector-accordion__image img {
  display: block;
  width: 100%;
  height: 100%;                           /* Rev 2026-07-17 #5: fill the stretched figure so image == text height (reset to auto in the stacked ≤1024 layout) */
  border-radius: var(--radius-sm);
  object-fit: cover;
}


/* ==========================================================================
   Block 6 — Colour CTA Block — .sectors-cta (BESPOKE; built from scratch)
   Figma node 11233:11640. Deliberately NOT reusing the Partnerships
   .colour-form-cta component: that base is tuned for a form-embed card and the
   reuse was drifting the padding/gaps + mis-placing the watermark. This block
   owns every value and shares no CSS with the sibling CTA pages
   (partnerships / why-join / become-a-member / about-our-advocacy).
   ========================================================================== */

/* Section: white band, pad T112 R80 B112 L80. Figma 11233:11640 */
.sectors-cta {
  padding: 112px 80px;                    /* Figma 11233:11640 pad 112 80 */
  background-color: var(--color-white);   /* Figma 11233:11640 fill #ffffff */
}

/* Card: tangerine, pad 64, radius 4, max 1280, clips the watermark.
   Figma 11233:11641 HORIZONTAL counter=CENTER pad 64 radius 4 fill #ff6600 */
.sectors-cta__card {
  position: relative;
  display: flex;
  align-items: center;                    /* Figma 11233:11641 counter=CENTER */
  padding: 64px;                          /* Figma 11233:11641 pad 64 */
  max-width: 1280px;                      /* Figma 11233:11641 card 1280 (section 1440 − 2×80) */
  margin: 0 auto;
  background-color: var(--color-tangerine); /* Figma 11233:11641 fill #ff6600 */
  border-radius: var(--radius-sm, 4px);   /* Figma 11233:11641 cornerRadius 4 */
  overflow: hidden;                       /* clip the 704 logomark watermark */
}

/* Content (Content Wrapper 11233:11643 + Content 11233:11644 merged):
   fixed width 659, copy→actions gap 48. A single flattened flex column — the old
   reuse wrapped these in an unclassed <div> that collapsed the gap to 0. */
.sectors-cta__content {
  position: relative;                     /* stack above the watermark */
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;                              /* Figma 11233:11644 Content gap 48 (copy→actions) */
  width: 659px;                           /* Figma 11233:11643 Content Wrapper width 659 */
  max-width: 100%;
}

/* Copy: heading→desc gap 16. Figma 11233:11645 */
.sectors-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;                              /* Figma 11233:11645 Copy gap 16 */
}

/* Heading: H2 44 / 400 white. Figma 11233:11647 (LH 48.4, LS -0.44) */
.sectors-cta__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                       /* Figma 11233:11647 Roman */
  font-size: 44px;                        /* Figma 11233:11647 44 */
  line-height: 1.1;                       /* Figma 11233:11647 48.4/44 */
  letter-spacing: -0.01em;                /* Figma 11233:11647 -0.44/44 */
  color: var(--color-white);              /* Figma 11233:11647 #ffffff */
}

/* Description: Text/Large 20 / 400 white. Figma 11233:11649 (LH 26) */
.sectors-cta__desc {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                       /* Figma 11233:11649 Roman */
  font-size: 20px;                        /* Figma 11233:11649 20 */
  line-height: 1.3;                       /* Figma 11233:11649 26/20 */
  color: var(--color-white);              /* Figma 11233:11649 #ffffff */
}

/* Actions / Buttons row. Figma 11233:11650 (gap 24) / 11233:11651 (row gap 24) */
.sectors-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 24px;                              /* Figma 11233:11650 Actions gap 24 */
}

.sectors-cta__buttons {
  display: flex;
  flex-direction: row;
  align-items: center;                    /* Figma 11233:11651 counter=CENTER */
  flex-wrap: wrap;
  gap: 24px;                              /* Figma 11233:11651 Buttons gap 24 */
}

/* Buttons — both white 16/700, radius 2, NO icon, NO underline (mail/phone hidden
   in the design; deco=NONE). Join now = outline (white 2px stroke, pad 8/20,
   Figma 11233:11652). Why Join? = link (text only, pad 0, Figma 11233:11653). */
.sectors-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-weight: 700;                       /* Figma 11233:11652/653 Bold */
  font-size: 16px;                        /* Figma 16 */
  line-height: 1.5;                       /* Figma 24/16 */
  color: var(--color-white);              /* Figma #ffffff */
  text-decoration: none;                  /* Figma deco=NONE */
  border: 2px solid transparent;
  border-radius: var(--radius-xs, 2px);   /* Figma cornerRadius 2 */
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.sectors-cta__btn--outline {              /* Join now — Figma 11233:11652 */
  padding: 8px 20px;                      /* Figma 11233:11652 pad 8/20 */
  border-color: var(--color-white);       /* Figma 11233:11652 stroke #ffffff 2px */
}
.sectors-cta__btn--outline:hover,
.sectors-cta__btn--outline:focus-visible {
  background-color: var(--color-white);
  color: var(--color-tangerine);
}
.sectors-cta__btn--link {                 /* Why Join? — Figma 11233:11653 */
  padding: 0;                             /* Figma 11233:11653 pad 0 (text-only) */
  border: 0;
}
.sectors-cta__btn--link:hover {
  opacity: 0.8;
}
.sectors-cta__btn:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* Watermark: 704 logomark (White variant), NO rotation, top-right, clipped by the
   card. Figma 11233:11642 places the instance at card-rel (820,0); the 704 logomark
   art is CENTERED on the 498 box ((498−704)/2 = −103) → art top-left at card-rel
   (717,−103). Right-anchored (right = 1280 − (717+704) = −141) so it stays glued
   top-right as the card narrows. Full native 704 size — the old reuse wrongly shrank
   it to 498 (background-size:contain in a 498 box) AND rotated it −90°. */
.sectors-cta__watermark {
  position: absolute;
  z-index: 0;
  top: -103px;                            /* Figma 11233:11642 logomark art top = card-rel −103 */
  right: -141px;                          /* Figma: art left 717 in the 1280 card → right −141 */
  width: 704px;                           /* Figma 11233:11642 logomark 704×704 native (NOT shrunk) */
  height: 704px;
  background-image: url('../images/our-member-sectors/cta-watermark.svg'); /* exact Figma export I11233:11642;10210:110889 — white, no rotation */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}


/* ==========================================================================
   CTA strip — "Have your say in your sector" (Pastel 2026-07-22 #9)
   Figma 12045:2678. Shares the .cta-strip base (about.css); this override sets
   the navy-lightest-50 band, the 64px top pad, and the tighter 24px heading→body
   gap that distinguish it from the About Us (light-blue) strip.
   ========================================================================== */
.cta-strip--sectors {
  --cta-strip-bg: var(--color-navy-lightest-50); /* Figma 12045:2678 fill #e6e7e9 @50% */
  --cta-strip-pad-top: 64px;                      /* Figma 12045:2679 pad-top 64 (Section Padding medium) */
  --cta-strip-gap: 24px;                          /* Figma 12045:2680 Content wrapper gap 24 */
  --cta-strip-pad-top-m: 20px;                    /* Section Padding medium 64→20 on mobile */
}


/* ==========================================================================
   Watermark hide — max-width: 1260px
   The watermark is right-anchored (right:-141) at 704px, so as the card narrows
   below its 1280 cap its white chevrons slide left over the 659px copy column
   (they clear the text only near the full-width 1440 layout). Hide it once the
   card can no longer hold both without the logomark merging into the text.
   ========================================================================== */
@media (max-width: 1260px) {
  .sectors-cta__watermark {
    display: none;
  }
}


/* ==========================================================================
   TABLET — max-width: 1024px
   Stack the sector panel (list above image) before the fixed 480 list starves
   the image to a sliver at tablet widths (rev 2026-07-17 #14 — iPad Air etc.).
   Precedent: .charity-accordion__panel column stack (community.css:1392-1396).
   Placed before the 768 block so its typography/padding overrides still win.
   ========================================================================== */
@media (max-width: 1024px) {
  .sector-accordion__panel {
    flex-direction: column;               /* derived (mobile-catalog) — precedent community.css:1393-1396 */
    gap: 24px;
  }
  .sector-accordion__list {
    flex-basis: auto;
    width: 100%;                          /* fluid below tablet */
  }
  .sector-accordion__image {
    flex-basis: auto;                     /* full width below the list */
  }
  .sector-accordion__image img {
    height: auto;                         /* natural aspect when stacked (rev #5 equal-height only applies to the row layout) */
  }
}


/* ==========================================================================
   MOBILE — max-width: 768px
   All 768 overrides after all desktop rules (css-architecture.md).
   ========================================================================== */
@media (max-width: 768px) {

  /* --- Block 4 — Feature Intro ------------------------------------------- */
  /* Rev 2026-07-17 #6: tighten tagline->paragraph gap 36 -> 24 on mobile, scoped
     to --sectors so the shared .about-feature-intro is untouched on other pages. */
  .about-feature-intro--sectors .about-feature-intro__inner {
    gap: 24px;
  }

  /* --- Block 5 — Member sectors ------------------------------------------- */
  .member-sectors-sectors {
    padding: 50px 20px;                   /* Section Padding scale: large 112->50, horizontal 80->20 */
  }

  .member-sectors-sectors__inner {
    max-width: none;                      /* fluid at mobile widths */
  }

  .member-sectors-intro {
    max-width: none;                      /* Rev #2: fluid on mobile (desktop 648 cap drops) */
  }

  .member-sectors-intro .content-block__heading {
    font-size: 32px;                      /* Rev #1 mobile counterpart: H2 mobile token 32 (stops the scoped desktop 48 leaking to mobile) */
  }

  .member-sectors-intro__copy {
    font-size: 18px;                      /* Figma Variables mobile: Text Large 20->18 */
  }

  .sector-accordion__item {
    padding: 16px;                        /* Rev 2026-07-17 #9: card edge padding 24 -> 16 on mobile */
  }

  .sector-accordion__left {
    gap: 16px;                            /* Rev 2026-07-17 #10: icon->title gap 24 -> 16 on mobile */
  }

  .sector-accordion__title {
    font-size: 20px;                      /* Figma Variables mobile: H5 24->20 */
  }

  /* icon wrapper / icon / chevron stay 56x56 / 36x36 — icon glyph exemption */

  .sector-accordion__panel {
    padding-top: 16px;                    /* Rev 2026-07-17 #8: header->content gap 24 -> 16 on mobile (column stack handled @1024) */
  }

  .sector-accordion__row {
    padding: 8px 0;                       /* Rev 2026-07-17 #7: list-row spacing 16 -> 8 on mobile */
  }

  /* --- Block 6 — Colour CTA (bespoke .sectors-cta) ------------------------- */
  .sectors-cta {
    padding: 50px 20px;                   /* Section Padding scale: vertical 112->50, horizontal 80->20 */
  }
  .sectors-cta__card {
    padding: 24px 24px 150px;             /* Pastel 2026-07-21 #6: card padding 24; #8 (2026-07-22): 150px bottom reserves a clear band so the logomark sits BELOW all content (2030 Strategy style), not behind the buttons */
  }
  .sectors-cta__content {
    width: 100%;                          /* desktop 659 fixed doesn't fit the narrow card */
    gap: 32px;                            /* derived — tighten copy->actions on mobile */
  }
  .sectors-cta__heading {
    font-size: 32px;                      /* Figma Variables mobile: H2 44->32 */
  }
  .sectors-cta__desc {
    font-size: 18px;                      /* Figma Variables mobile: Text Large 20->18 */
  }
  /* Pastel 2026-07-21 #7 + 2026-07-22 #8: the desktop logomark shows on mobile,
     anchored to the bottom-right corner and clipped by the card radius + overflow:hidden.
     #8 asks it to sit BELOW all content like the 2030 Strategy page — the card's 150px
     bottom padding (above) reserves that band, and the logo top (bottom −50 + 190 = 140px
     above the card base) clears the content (ends 150px above). Desktop keeps it top-right;
     hidden 769–1260px. This ≤768 rule is after the ≤1260 display:none, so it wins here. */
  .sectors-cta__watermark {
    display: block;
    top: auto;
    left: auto;
    right: -50px;
    bottom: -50px;
    width: 190px;
    height: 190px;
  }
}


/* ==========================================================================
   MOBILE — 402px
   ========================================================================== */
@media (max-width: 402px) {

  /* Block 6 — Colour CTA (bespoke .sectors-cta) */
  .sectors-cta {
    padding: 50px 16px;                   /* Section Padding scale: vertical 50, horizontal narrows to 16 */
  }
  /* Pastel 2026-07-21 #6: card padding inherits 24px from the ≤768 block (dropped
     the earlier rev-#11 48px override). */
}