/* ==========================================================================
   Find a Member — /consumer/find-a-member/ (templates/template-find-a-member.php)
   Figma 12514:6831. Spec: roadmap/phase-11-additional-features/artifacts/page-find-a-member-spec.md
   Blocks: intro band, "How to search" card, search bar + member directory, disclaimer, and
   the listing form, which reuses .colour-form-cta (partnerships.css) and adds only deltas.
   Desktop-only frame; responsive values follow the Figma Variables scale and
   roadmap/mobile-derivation-catalog.md. Desktop-first: every media query is max-width and
   follows the desktop rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block 4 — Section_Intro (12514:7063)
   -------------------------------------------------------------------------- */
.find-a-member-intro {
  position: relative;
  isolation: isolate;
  padding: 112px 80px;                  /* Figma 12514:7063 pad T=112 R=80 B=112 L=80 */
  background-color: var(--color-navy);  /* Figma 12514:7063 SOLID #0b1628 */
}

/* The photo is the second fill, drawn at 0.2 over the navy; a layer, so the opacity does not
   reach the text. */
.find-a-member-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--fam-intro-image, none); /* Figma 12514:7063 IMAGE scaleMode=FILL */
  background-position: center;
  background-size: cover;               /* Figma 12514:7063 scaleMode=FILL */
  background-repeat: no-repeat;
  opacity: 0.2;                         /* Figma 12514:7063 IMAGE opacity=0.2 */
}

.find-a-member-intro__content {
  display: flex;
  gap: 64px;                            /* Figma 12514:7064 HORIZONTAL gap=64 */
  max-width: 1280px;                    /* Figma 12514:7064 w=1280 */
  margin: 0 auto;
}

.find-a-member-intro__col {
  display: flex;
  flex: 1 1 0;                          /* Figma 12657:17181 / 12514:7065 sizingH=FILL, 608 each */
  flex-direction: column;
  min-width: 0;
}

.find-a-member-intro__col--text {
  align-items: flex-start;
  gap: 36px;                            /* Figma 12657:17187 VERTICAL gap=36 (text -> button) */
}

.find-a-member-intro__text {
  font-size: 18px;                      /* Figma 12657:17190 size=18 */
  line-height: 1.5;                     /* Figma 12657:17190 LH=27 */
  color: var(--color-white);            /* Figma 12657:17190 #ffffff */
}

.find-a-member-intro__text p {
  margin: 0;
}

/* One text node; each "\n\n" is an empty 27px line between the paragraphs. */
.find-a-member-intro__text p + p {
  margin-top: 27px;                     /* Figma 12657:17190 empty line LH=27 */
}

.find-a-member-intro__lead {
  line-height: 1.3;                     /* Figma 12657:17190 run 1 LH=23.4 */
}

.find-a-member-intro__lead strong {
  font-weight: var(--font-weight-bold); /* Figma 12657:17190 run 1 FrutigerLTStd-Bold 700 */
}

.find-a-member-intro__text a {
  color: inherit;                       /* Figma 12657:17190 run 2 — no colour override, base #ffffff */
  text-decoration: underline;           /* Figma 12657:17190 run 2 decoration=UNDERLINE */
}

.find-a-member-intro__text a:hover {
  color: var(--color-tangerine-light);
}

.find-a-member-intro__callout {
  display: flex;
  flex-direction: column;
  gap: 8px;                             /* Figma 12657:17205 VERTICAL gap=8 */
  padding: 24px;                        /* Figma 12657:17205 pad 24 */
  background-color: var(--color-accent-soft-green); /* Figma 12657:17205 #81b9a2 */
  border-radius: var(--radius-sm);      /* Figma 12657:17205 cornerRadius 4 */
  color: var(--color-navy);             /* Figma 12657:17206 / 12657:17207 #0b1628 */
}

.find-a-member-intro__callout-title {
  margin: 0;
  font-size: 20px;                      /* Figma 12657:17206 size=20 */
  line-height: 1.3;                     /* Figma 12657:17206 LH=26 */
  font-weight: var(--font-weight-bold); /* Figma 12657:17206 Bold 700 */
}

.find-a-member-intro__callout-body {
  margin: 0;
  font-size: 16px;                      /* Figma 12657:17207 size=16 */
  line-height: 1.4;                     /* Figma 12657:17207 LH=22.4 */
}

.find-a-member-intro__callout-body a {
  color: inherit;                       /* Figma 12657:17207 run 2 — base #0b1628 */
  text-decoration: underline;           /* Figma 12657:17207 run 2 decoration=UNDERLINE */
}

.find-a-member-intro__callout-body a:hover {
  color: var(--color-tangerine-darker);
}

/* --------------------------------------------------------------------------
   Block 5 — Card "How to search" (12887:678)
   -------------------------------------------------------------------------- */
.fam-howto-band {
  padding: 80px 80px 0;                 /* measured: the card sits 80 below the intro (template docblock) */
}

.fam-howto {
  display: flex;
  flex-direction: column;
  gap: 14px;                            /* Figma 12884:8924 gap=14 */
  box-sizing: border-box;
  width: min(608px, 100%);              /* Figma 12887:678 w=608 FIXED */
  margin-left: max(0px, calc((100% - 1280px) / 2)); /* left edge on the 1280 content column */
  padding: 24px;                        /* Figma 12887:680 pad 24 */
  background-color: var(--color-navy-lightest-50); /* Figma 12887:680 #e6e7e9 a=0.5 */
  border-radius: var(--radius-sm);      /* Figma 12887:680 cornerRadius 4 */
  color: var(--color-navy);             /* Figma 12887:681 #0b1628 */
}

.fam-howto__title {
  margin: 0;
  font-size: 20px;                      /* Figma 12887:681 size=20 */
  line-height: 1.3;                     /* Figma 12887:681 LH=26 */
  font-weight: var(--font-weight-bold); /* Figma 12887:681 Bold 700 */
  letter-spacing: 0;
  color: inherit;
}

.fam-howto__list {
  display: flex;
  flex-direction: column;
  gap: 14px;                            /* Figma 12884:8924 gap=14 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.fam-howto__step {
  display: flex;
  align-items: flex-start;
  gap: 10px;                            /* Figma 12887:682 HORIZONTAL gap=10 */
  font-size: 16px;                      /* Figma 12887:685 size=16 */
  line-height: 1.4;                     /* Figma 12887:685 LH=22.4 */
}

.fam-howto__badge {
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;                          /* Figma 12887:683 22x22 */
  height: 22px;
  border-radius: 50%;                   /* Figma 12887:683 cornerRadius 11 */
  background-color: var(--color-navy);  /* Figma 12887:683 #0b1628 */
  font-family: "Inter", var(--font-family); /* Figma 12887:684 Inter-Bold */
  font-size: 12px;                      /* Figma 12887:684 size=12 */
  line-height: 1.21;                    /* Figma 12887:684 LH=14.52 */
  font-weight: var(--font-weight-bold); /* Figma 12887:684 weight 700 */
  color: var(--color-white);            /* Figma 12887:684 #ffffff */
}

.fam-howto__text strong {
  font-weight: var(--font-weight-bold); /* Figma 12887:685 bold run 700 */
}

/* --------------------------------------------------------------------------
   Block 6 — Section_FindMember (12514:6920)
   -------------------------------------------------------------------------- */
.fam-listing {
  padding: 80px 80px 64px;              /* Figma 12514:6920 pad R=80 L=80; T measured 80 from the card; B 112 -> Section Padding medium 64, Pastel oymejnwo #1 */
  background-color: var(--color-white); /* Figma 12514:6920 #ffffff */
}

.fam-listing__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;                            /* Figma 12514:6921 VERTICAL gap=48 */
  max-width: 1280px;                    /* Figma 12514:6921 w=1280 */
  margin: 0 auto;
}

.fam-listing__filter-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;                            /* Figma 12514:6922 VERTICAL gap=16 */
}

/* Search bar — 12657:17163 */
.finder-bar {
  display: flex;
  align-items: center;                  /* Figma 12657:17164 counter=CENTER */
  gap: 64px;                            /* Figma 12657:17164 HORIZONTAL gap=64 */
  margin: 0;
  padding: 17px 23px;                   /* Figma 12657:17163 pad T=17 R=23 B=17 L=23 */
  background-color: var(--color-tangerine); /* Figma 12657:17163 #ff6600 */
  border-radius: var(--radius-sm);      /* Figma 12657:17163 cornerRadius 4 */
}

.finder-bar__label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 24px;                      /* Figma 12657:17165 size=24 */
  line-height: 1.3;                     /* Figma 12657:17165 LH=31.2 */
  letter-spacing: -0.01em;              /* Figma 12657:17165 LS=-0.24 on 24 */
  font-weight: var(--font-weight-bold); /* Figma 12657:17165 Bold 700 */
  color: var(--color-white);            /* Figma 12657:17165 #ffffff */
}

.finder-bar__form {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 36px;                            /* Figma 12657:17166 gap=36 */
  min-width: 0;
}

.finder-bar__fields {
  display: flex;
  flex: 1 1 auto;
  gap: 17px;                            /* Figma 12657:17167 HORIZONTAL gap=17 */
  min-width: 0;
}

.finder-bar__field {
  position: relative;
  min-width: 0;
}

.finder-bar__field--select {
  flex: 1 1 330px;                      /* Figma 12657:17168 w=330 sizingH=FILL */
}

.finder-bar__field--keywords {
  flex: 0 1 286px;                      /* Figma 12657:17294 w=286 sizingH=FIXED */
}

.finder-bar__control {
  box-sizing: border-box;
  width: 100%;
  height: 40px;                         /* Figma 12657:17168 h=40 */
  margin: 0;
  padding: 8px 48px 8px 12px;           /* Figma 12657:17168 pad T=8 R=12 B=8 L=12; R + 24 icon + 12 */
  border: 0;
  border-radius: var(--radius-sm);      /* Figma 12657:17168 cornerRadius 4 */
  background-color: var(--color-white); /* Figma 12657:17168 #ffffff */
  font-family: var(--font-family);
  font-size: 16px;                      /* Figma I12657:17168;4179:9050 size=16 */
  line-height: 1.5;                     /* Figma I12657:17168;4179:9050 LH=24 */
  color: var(--color-navy);             /* Figma I12657:17168;4179:9050 #0b1628 */
  appearance: none;
  -webkit-appearance: none;
}

.finder-bar__control::placeholder {
  color: var(--color-navy-light);       /* Figma 12657:17295 #545b68 */
  opacity: 1;
}

.finder-bar__control::-webkit-search-cancel-button {
  display: none;                        /* the search glyph is the only affordance in Figma 12657:17294 */
}

.finder-bar__control:focus-visible {
  outline: 2px solid var(--color-navy); /* the tangerine ring would vanish on the tangerine bar (home.css precedent) */
  outline-offset: 3px;
}

.finder-bar__icon {
  position: absolute;
  top: 50%;
  right: 12px;                          /* Figma 12657:17168 pad R=12 */
  font-size: 24px;                      /* Figma I12657:17168;4179:9051 24x24 */
  line-height: 1;
  color: var(--color-navy-light);       /* Figma I12657:17168;4179:9051;7044:24627 #545b68 */
  transform: translateY(-50%);
  pointer-events: none;
}

.finder-bar__submit {
  flex: 0 0 auto;
  height: 44px;                         /* Figma 12657:17171 h=44 sizingV=FIXED */
  padding-inline: 24px;                 /* Figma 12657:17171 pad R=24 L=24 */
  border-color: var(--color-white);
  background-color: var(--color-white); /* Figma 12657:17171 #ffffff */
  line-height: 1;                       /* Figma I12657:17171;10215:112322 LH=16 */
  color: var(--color-navy);             /* Figma I12657:17171;10215:112322 #0b1628 */
}

.finder-bar__submit:hover {
  border-color: var(--color-navy);
  background-color: var(--color-navy);
  color: var(--color-white);
}

.finder-bar__submit:focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 3px;
}

/* Results bar — 12657:17297 */
.fam-results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;                  /* Figma 12657:17297 counter=CENTER */
  justify-content: flex-end;            /* Figma 12657:17297 primary=MAX */
  gap: 16px;                            /* Figma 12657:17297 gap=16 */
}

.fam-results-bar__count {
  margin: 0;
  font-size: 12px;                      /* Figma 12657:17298 size=12 */
  line-height: 1.3;                     /* Figma 12657:17298 LH=15.6 */
  color: var(--color-navy-light);       /* Figma 12657:17298 #545b68 */
}

.fam-results-bar__reset.btn--tiny.btn--secondary {
  border-color: var(--color-tangerine-dark); /* Figma 12657:17299 stroke #cc5100 */
  line-height: 1.3;                     /* Figma I12657:17299;10385:5022 LH=15.6 */
  color: var(--color-tangerine-dark);   /* Figma I12657:17299;10385:5022 #cc5100 */
}

.fam-results-bar__reset.btn--tiny.btn--secondary:hover {
  background-color: var(--color-tangerine-lightest);
  color: var(--color-tangerine-darker);
}

/* Member grid — 12514:6932 */
.member-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* Figma 12514:6932 GRID gridColumnCount=3 */
  gap: 36px;                            /* Figma 12514:6932 gridRowGap=36 gridColumnGap=36 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.member-card {
  min-width: 0;
  background-color: var(--color-white); /* Figma 12657:17269 #ffffff */
  border-radius: var(--radius-sm);      /* Figma 12657:17269 cornerRadius 4 */
  box-shadow:
    0 0 0 1px var(--color-navy-lightest), /* Figma 12657:17269 stroke #e6e7e9 1 OUTSIDE */
    var(--shadow-md);                   /* Figma 12657:17269 DROP_SHADOW y=3 blur=16 spread=-4 a=0.09 */
}

.member-card__content {
  display: flex;
  flex-direction: column;
  gap: 24px;                            /* Figma 12657:17270 gap=24 (image -> title -> contacts) */
  padding: 24px;                        /* Figma 12657:17270 pad 24 */
}

.member-card__image {
  position: relative;
  aspect-ratio: 355 / 250;              /* Figma 12657:17271 355x250 */
  overflow: hidden;
  background-color: var(--color-white);
}

/* The stroke is drawn inside the image, over it. */
.member-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-navy-lightest); /* Figma 12657:17271 stroke #e6e7e9 1 INSIDE */
  pointer-events: none;
}

.member-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                    /* Figma 12657:17271 scaleMode=FILL */
}

/* A member logo is wide artwork, not a photo: show all of it on white. */
.member-card__image--logo img {
  box-sizing: border-box;
  padding: 24px;
  object-fit: contain;
}

.member-card__body {
  display: flex;
  flex-direction: column;
  gap: 24px;                            /* Figma 12657:17270 gap=24 (title 12657:17272 -> contacts 12657:17275) */
}

.member-card__title {
  margin: 0;
  font-size: 20px;                      /* Figma 12657:17274 size=20 */
  line-height: 1.3;                     /* Figma 12657:17274 LH=26 */
  letter-spacing: -0.01em;              /* Figma 12657:17274 LS=-0.2 on 20 */
  font-weight: var(--font-weight-bold); /* Figma 12657:17274 Bold 700 */
  color: var(--color-navy);             /* Figma 12657:17274 #0b1628 */
  overflow-wrap: anywhere;
}

.member-card__contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;                             /* Figma 12657:17275 gap=8 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.member-card__contact {
  display: flex;
  align-items: center;                  /* Figma 12657:17276 counter=CENTER */
  gap: 8px;                             /* Figma 12657:17276 gap=8 */
  min-width: 0;
  font-size: 16px;                      /* Figma 12657:17278 size=16 */
  line-height: 1.4;                     /* Figma 12657:17278 LH=22.4 */
}

.member-card__contact .material-symbols-outlined {
  flex: 0 0 20px;
  font-size: 20px;                      /* Figma 12657:17277 20x20 */
  line-height: 1;
  color: var(--color-tangerine);        /* Figma I12657:17277;7044:841 #ff6600 */
}

.member-card__contact a {
  min-width: 0;
  color: var(--color-navy);             /* Figma 12657:17278 #0b1628 */
  text-decoration: none;
  overflow-wrap: anywhere;
}

.member-card__contact a:hover {
  color: var(--color-tangerine-dark);
  text-decoration: underline;
}

.fam-listing__empty {
  margin: 0;
  padding: 48px 24px;
  border-radius: var(--radius-sm);
  background-color: var(--color-navy-lightest-50);
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
  color: var(--color-navy);
}

/* Pagination — 12668:17917 (blog.css values, the same Figma component) */
.fam-pagination {
  display: flex;
  justify-content: center;              /* Figma 12668:17917 primary CENTER */
  padding: 9px 0;                       /* Figma 12668:17917 pad T=9 B=9 */
}

.fam-pagination .nav-links {
  display: flex;
  align-items: center;                  /* Figma 12668:17918 counter=CENTER */
  gap: 14px;                            /* Figma 12668:17918 SPACE_BETWEEN in w=315 — measured pitch (blog.css 12739:18207) */
  padding: 3px 9px;                     /* Figma 12668:17918 pad T=3 R=9 B=3 L=9 */
}

.fam-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 33px;                      /* Figma 12668:17920 33x29 */
  height: 29px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);      /* Figma 12668:17920 cornerRadius 2 */
  font-size: 16px;                      /* Figma 12668:17921 size=16 */
  line-height: 1.4;                     /* Figma 12668:17921 LH=22.4 */
  font-weight: var(--font-weight-bold); /* Figma 12668:17921 Bold 700 */
  color: var(--color-navy);             /* Figma 12668:17923 #0b1628 */
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.fam-pagination .page-numbers.current {
  border-color: var(--color-tangerine); /* Figma 12668:17920 stroke #ff6600 */
  color: var(--color-tangerine);        /* Figma 12668:17921 #ff6600 */
}

.fam-pagination .page-numbers.prev,
.fam-pagination .page-numbers.next {
  min-width: 24px;                      /* Figma 12668:17919 24x24 */
  padding: 0;
  color: var(--color-navy-darkest);     /* Figma I12668:17919;7044:9449 #03060c */
}

.fam-pagination .page-numbers:not(.current):hover {
  color: var(--color-tangerine-dark);
}

.fam-pagination .page-numbers:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fam-pagination .page-numbers.dots {
  border: 0;
}

.fam-pagination .page-numbers .material-symbols-outlined {
  font-size: 24px;                      /* Figma 12668:17919 24x24 */
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Block 7 — Section_Disclaimer (12514:6845)
   -------------------------------------------------------------------------- */
.fam-disclaimer {
  padding: 64px 80px;                   /* Figma 12514:6845 pad T=64 R=80 L=80; B 112 -> Section Padding medium 64, Pastel oymejnwo #2 */
  background-color: var(--color-white); /* Figma 12514:6845 #ffffff */
}

.fam-disclaimer__card {
  display: flex;
  flex-direction: column;
  gap: 22px;                            /* Figma 12514:6851 gap=22 (heading -> copy) */
  max-width: 1280px;                    /* Figma 12514:6846 w=1280 FILL */
  margin: 0 auto;
  padding: 64px;                        /* Figma 12514:6846 pad 64 */
  background-color: var(--color-accent-silver); /* Figma 12514:6846 #ebebeb */
  border-radius: var(--radius-sm);      /* Figma 12514:6846 cornerRadius 4 */
  box-sizing: border-box;
  color: var(--color-navy);             /* Figma 12514:6854 / 12514:6856 #0b1628 */
}

.fam-disclaimer__heading {
  margin: 0;
  font-size: 24px;                      /* Figma 12514:6854 size=24 */
  line-height: 1.3;                     /* Figma 12514:6854 LH=31.2 */
  letter-spacing: -0.01em;              /* Figma 12514:6854 LS=-0.24 on 24 */
  font-weight: var(--font-weight-normal); /* Figma 12514:6854 FrutigerLTStd-Roman 400 */
  color: inherit;
}

/* One text node, six lines and no paragraph spacing: the paragraphs and the list sit
   line on line. */
.fam-disclaimer__copy {
  font-size: 14px;                      /* Figma 12514:6856 size=14 */
  line-height: 1.4;                     /* Figma 12514:6856 LH=19.6 */
}

.fam-disclaimer__copy p,
.fam-disclaimer__copy ul {
  margin: 0;                            /* Figma 12514:6856 paragraphSpacing none */
}

.fam-disclaimer__copy ul {
  margin: 1.4em 0;                      /* Figma 12514:6856 trailing U+2028 on lines 1 and 5 = one empty 19.6 line above and below the list (h=180 = 9 lines) */
  padding-left: 21px;                   /* Figma 12514:6856 lineIndentations=1 on lines 2-5 */
  list-style: disc;                     /* Figma 12514:6856 lineTypes UNORDERED */
}

/* --------------------------------------------------------------------------
   Block 8 — Colour Form CTA (13037:4748) — deltas over partnerships.css
   -------------------------------------------------------------------------- */
/* GF's foundation sheet gives textarea.large a tall min-block-size; there is no textarea here,
   but the select gets GF's own chevron, border and padding. Replace them with Figma's. */
.colour-form-cta--find-a-member .colour-form-cta__form-box .gform_wrapper select {
  box-sizing: border-box;
  width: 100%;
  height: 40px;                         /* Figma 13037:4809 h=40 */
  min-block-size: 0;
  padding: 8px 48px 8px 12px;           /* Figma 13037:4809 pad T=8 R=12 B=8 L=12; R + 24 icon + 12 */
  border: 0;
  border-radius: var(--radius-xs);      /* Figma 13037:4809 cornerRadius 2 */
  box-shadow: 0 0 0 1px var(--color-navy-light); /* Figma 13037:4809 stroke #545b68 1 OUTSIDE */
  background-color: var(--color-white); /* Figma 13037:4809 #ffffff */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 15.4 6 9.4l1.4-1.4 4.6 4.6 4.6-4.6L18 9.4Z' fill='%23545b68'/></svg>"); /* Figma I13037:4809;10232:17019 keyboard_arrow_down, #545b68 */
  background-repeat: no-repeat;
  background-position: right 12px center; /* Figma I13037:4809;10232:17019 rel x=504 in 540 */
  background-size: 24px 24px;           /* Figma I13037:4809;10232:17019 24x24 */
  font-family: var(--font-family);
  font-size: 16px;                      /* Figma I13037:4809;10232:17018 size=16 */
  line-height: 1.4;                     /* Figma I13037:4809;10232:17018 LH=22.4 */
  color: var(--color-navy);             /* Figma I13037:4809;10232:17018 #0b1628 */
  appearance: none;
  -webkit-appearance: none;
}

.colour-form-cta--find-a-member .colour-form-cta__form-box .gform_wrapper select:focus-visible {
  outline: 2px solid var(--color-tangerine);
  outline-offset: 1px;
}

/* File upload — assets/js/find-a-member.js swaps the native control for Figma's Upload
   button and "No file selected" line; without the script the native input stays. */
.colour-form-cta--find-a-member .colour-form-cta__form-box .gform_wrapper .fam-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;                             /* Figma 13037:4778 VERTICAL gap=8 (button -> status) */
}

.colour-form-cta--find-a-member .colour-form-cta__form-box .gform_wrapper .fam-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.colour-form-cta--find-a-member .colour-form-cta__form-box .gform_wrapper .fam-upload__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;                            /* Figma 13037:4781 gap=10 */
  height: 40px;                         /* Figma 13037:4781 h=40 */
  box-sizing: border-box;
  padding: 8px 16px;                    /* Figma 13037:4781 pad T=8 R=16 B=8 L=16 */
  border-radius: var(--radius-xs);      /* Figma 13037:4781 cornerRadius 2 */
  box-shadow: 0 0 0 1px var(--color-navy); /* Figma 13037:4781 stroke #0b1628 1 OUTSIDE */
  background-color: var(--color-white); /* Figma 13037:4781 #ffffff */
  font-family: var(--font-family);
  font-size: 16px;                      /* Figma I13037:4781;10317:5310 size=16 */
  line-height: 1.5;                     /* Figma I13037:4781;10317:5310 LH=24 */
  font-weight: var(--font-weight-bold); /* Figma I13037:4781;10317:5310 Bold 700 */
  color: var(--color-navy);             /* Figma I13037:4781;10317:5310 #0b1628 */
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.colour-form-cta--find-a-member .colour-form-cta__form-box .gform_wrapper .fam-upload__button .material-symbols-outlined {
  font-family: 'Material Symbols Outlined'; /* the GF framework sheet repaints every span in the form in the body face */
  font-size: 24px;                      /* Figma I13037:4781;10317:5311 24x24 */
  line-height: 1;
}

.colour-form-cta--find-a-member .colour-form-cta__form-box .gform_wrapper .fam-upload__button:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.colour-form-cta--find-a-member .colour-form-cta__form-box .gform_wrapper .fam-upload input[type="file"]:focus-visible + .fam-upload__button {
  outline: 2px solid var(--color-tangerine);
  outline-offset: 3px;
}

.colour-form-cta--find-a-member .colour-form-cta__form-box .gform_wrapper .fam-upload__status {
  margin: 0;
  font-size: 12px;                      /* Figma 13037:4841 size=12 */
  line-height: 1.3;                     /* Figma 13037:4841 LH=15.6 */
  color: var(--color-navy-darkest);     /* Figma 13037:4841 #03060c */
  overflow-wrap: anywhere;
}

/* The accepted types and size stay available to screen readers (the input's
   aria-describedby); Figma draws no rules line. */
.colour-form-cta--find-a-member .colour-form-cta__form-box .gform_wrapper .gform_fileupload_rules {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Consent — 13037:4854 */
.colour-form-cta--find-a-member .colour-form-cta__form-box .gform_wrapper .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 16px;                            /* Figma 13037:4854 HORIZONTAL gap=16 */
}

.colour-form-cta--find-a-member .colour-form-cta__form-box .gform_wrapper .ginput_container_consent input[type="checkbox"] {
  --gf-ctrl-choice-check-color: var(--color-navy);
  flex: 0 0 18px;
  width: 18px;                          /* Figma I13037:4854;4179:9060 18x18 */
  height: 18px;
  margin: 2px 0 0;                      /* centres the box on the first 22.4px label line */
  border: 0;
  border-radius: 1px;                   /* Figma I13037:4854;4179:9060 cornerRadius 1 */
  box-shadow: 0 0 0 1px var(--color-navy-light); /* Figma I13037:4854;4179:9060 stroke #545b68 1 OUTSIDE */
  background-color: transparent;        /* Figma I13037:4854;4179:9060 #ffffff opacity=0 */
}

.colour-form-cta--find-a-member .colour-form-cta__form-box .gform_wrapper .ginput_container_consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-tangerine);
  outline-offset: 3px;
}

.colour-form-cta--find-a-member .colour-form-cta__form-box .gform_wrapper .gfield_consent_label {
  margin: 0;
  font-family: var(--font-family);
  font-size: 16px;                      /* Figma I13037:4854;4179:9061 size=16 */
  line-height: 1.4;                     /* Figma I13037:4854;4179:9061 LH=22.4 */
  font-weight: var(--font-weight-normal);
  color: var(--color-navy);             /* Figma I13037:4854;4179:9061 #0b1628 */
}

/* GF appends "(Required)" inside the consent label; Figma shows the sentence alone and the
   checkbox already carries aria-required. */
.colour-form-cta--find-a-member .colour-form-cta__form-box .gform_wrapper .gfield_consent_label .gfield_required {
  display: none;
}

/* After an AJAX submit the card collapses and the white watermark would ride over the copy
   (member-advice-support.css precedent). */
.colour-form-cta--find-a-member .colour-form-cta__card:has(.gform_confirmation_message) .colour-form-cta__logo-watermark,
.colour-form-cta--find-a-member .colour-form-cta__card:has([id^="gform_confirmation"]) .colour-form-cta__logo-watermark {
  display: none;
}

.colour-form-cta--find-a-member .colour-form-cta__form-box:has(.gform_confirmation_message) {
  justify-content: center;
  text-align: center;
}

/* ==========================================================================
   Responsive — no mobile frame; derived per roadmap/mobile-derivation-catalog.md
   ========================================================================== */

/* Side by side between 1025 and ~1280 the form box drops under 460px and a half-width column
   is narrower than "Organisation/company*" (MAS QA 2026-09-24 #5): sized by the box. */
.colour-form-cta--find-a-member .colour-form-cta__form-box {
  container: fam-form / inline-size;
}

@container fam-form (max-width: 460px) {
  .colour-form-cta--find-a-member .colour-form-cta__form-box .gform_wrapper .gfield.gfield--width-half {
    grid-column: 1 / -1;                /* derived: 2 -> 1 field column below a 178px label */
  }
}

@media (max-width: 1280px) {
  /* The search bar's fixed parts (label 74 + 64, 36, Find 81) leave the three fields too little
     room below 1280; the label moves above them. */
  .finder-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;                          /* derived: home.css course-finder stacked gap */
  }
}

@media (max-width: 1024px) {
  .find-a-member-intro__content {
    flex-direction: column;
    gap: 36px;                          /* derived: Padding ladder medium 36 between stacked columns */
  }

  .member-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* derived: 3 -> 2 wrap, newsroom.css precedent */
  }

  /* Base stacks the card at 1024 with a 270px content basis sized for the Partnerships copy;
     hug this copy instead (about-our-advocacy.css precedent). */
  .colour-form-cta--find-a-member .colour-form-cta__content,
  .colour-form-cta--find-a-member .colour-form-cta__form-box {
    flex: 0 1 auto;
  }
}

@media (max-width: 768px) {
  .find-a-member-intro {
    padding: 50px 20px;                 /* Section Padding large 112 -> 50; sides 80 -> 20 */
  }

  .find-a-member-intro__text {
    font-size: 16px;                    /* Text Medium 18 -> 16 */
  }

  .find-a-member-intro__text p + p {
    margin-top: 24px;                   /* the empty line follows the 16px text: 16 x 1.5 */
  }

  .find-a-member-intro__callout-title,
  .fam-howto__title,
  .member-card__title {
    font-size: 18px;                    /* H6 / Text Large 20 -> 18 */
  }

  .fam-howto-band {
    padding: 50px 20px 0;               /* Section Padding large -> 50; sides 80 -> 20 */
  }

  .fam-howto {
    width: auto;                        /* derived: the 608 card fills the column once it is narrower */
    margin-left: 0;
  }

  .fam-listing {
    padding: 50px 20px 20px;            /* T measured 80 -> 50; B Section Padding medium 64 -> 20; sides 80 -> 20 */
  }

  .fam-listing__inner {
    gap: 36px;                          /* derived: Padding x-large 48 -> 36 */
  }

  .finder-bar {
    padding: 24px;                      /* home.css course-finder mobile padding */
  }

  .finder-bar__label {
    font-size: 20px;                    /* H5 24 -> 20 */
  }

  .finder-bar__form {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;                          /* home.css course-finder mobile form gap */
  }

  .finder-bar__fields {
    flex-direction: column;
    gap: 16px;
  }

  .finder-bar__field--select,
  .finder-bar__field--keywords {
    flex: 0 0 auto;
  }

  .finder-bar__submit {
    align-self: flex-start;             /* Figma 12657:17171 sizingH=HUG */
  }

  .fam-results-bar {
    justify-content: space-between;
  }

  .fam-disclaimer {
    padding: 20px;                      /* Section Padding medium 64 -> 20 */
  }

  .fam-disclaimer__card {
    padding: 48px;                      /* Padding x-large 64 -> 48 */
  }

  .fam-disclaimer__heading {
    font-size: 20px;                    /* H5 24 -> 20 */
  }
}

@media (max-width: 640px) {
  .member-grid {
    grid-template-columns: minmax(0, 1fr); /* derived: 2 -> 1 below ~260px per card, no carousel */
    gap: 24px;
  }

  .fam-disclaimer__card {
    padding: 36px 24px;                 /* derived: Padding medium 36 -> 24 at phone width */
  }
}