/* ==========================================================================
   About Us page — MBA ACT
   Figma node 10965:6330 (phase-08)
   Desktop-first: all 1440 rules first, then @media (max-width: 768px),
   then @media (max-width: 402px). Mobile queries at end of file.
   Do NOT add overflow-x:hidden here — already global in base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Site-main: remove default max-width/padding so all sections run edge-to-edge.
   Same pattern as body.home and .page-template-template-advice-subpage.
   -------------------------------------------------------------------------- */
body.page-template-template-about-us .site-main {
  max-width: none;
  padding: 0;
}


/* ==========================================================================
   Block 4 — Feature Intro
   Figma node 10965:6520
   ========================================================================== */

/* Section: row layout, padding 112px 80px, full width.
    Figma 10965:6520 layout_10SX72 padding 112 80 
   Background: rgba(8,17,32,0.8) over CSS var(--about-hero-image) — untokenized one-off.
    Figma fill_JML5O8 rgba(8,17,32,0.8) over imageRef 07932628… — untokenized one-off 
*/
.about-feature-intro {
  position: relative;
  display: flex;                         /* Figma layout_10SX72 mode row */
  flex-direction: row;
  padding: 112px 80px;                   /* Figma 10965:6520 layout_10SX72 padding 112 80 */
  background-color: var(--color-navy-dark); /* fallback #081120 when no image */
  background-image: var(--about-hero-image, none);
  background-size: cover;
  background-position: center;
}

.about-feature-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(8, 17, 32, 0.8); /* Figma fill_JML5O8 rgba(8,17,32,0.8) — untokenized one-off */
  pointer-events: none;
}

/* Inner: column, justify center, align center, gap 36, padding 36 — fills width.
    Figma layout_ROW0VH column justify-center align-center gap 36 pad 36 
*/
.about-feature-intro__inner {
  position: relative;                    /* stack above ::before overlay */
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;               /* Figma layout_ROW0VH column */
  justify-content: center;
  align-items: center;
  gap: 36px;                            /* Figma layout_ROW0VH gap 36 */
  padding: 36px;                        /* Figma layout_ROW0VH padding 36 */
}

/* Tagline wrap: row, align center, gap 10, hug width.
    Figma layout_L05Y6X row align-center gap 10 hug 
*/
.about-feature-intro__tagline-wrap {
  display: flex;
  flex-direction: row;                  /* Figma layout_L05Y6X row */
  align-items: center;
  gap: 10px;                            /* Figma layout_L05Y6X gap 10 */
}

/* Tagline text: 16px 700 #FF6600 tangerine — Heading/Tagline.
    Figma 10965:6523 Heading/Tagline fill_V0HZNF #FF6600 
   Tangerine underline + hook reuses the same ::after/::before pattern as advice-content__tagline.
*/
.about-feature-intro__tagline {
  position: relative;
  margin: 0;
  display: block;
  width: fit-content;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 16px;                      /* Figma 10965:6523 Heading/Tagline */
  line-height: 1.3;
  color: var(--color-tangerine);        /* Figma fill_V0HZNF #FF6600 */
  text-transform: uppercase;
  padding-bottom: 14px;
}

.about-feature-intro__tagline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 8px;
  bottom: 7px;
  height: 1px;
  background-color: currentColor;
}

.about-feature-intro__tagline::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 9px;
  height: 7px;
  background-image: url('../images/tagline-hook.svg');
  background-repeat: no-repeat;
}

/* Lead text: 24px 400 #FFFFFF, text-align center — Heading/H5.
    Figma 10965:6525 Heading/H5 fill_24A334 #FFFFFF textAlign CENTER 
*/
.about-feature-intro__lead {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 24px;                      /* Figma 10965:6525 Heading/H5 */
  line-height: 1.3;                     /* 130% */
  letter-spacing: -0.01em;
  color: var(--color-white);            /* Figma fill_24A334 #FFFFFF */
  text-align: center;
  max-width: 900px;                     /* Figma layout_V2N0IQ fill width, hug — constraint for readability */
}

/* CTA wrapper (Become a Member feature-intro adds a button below the lead;
   About Us has no button child). Centres the button under the lead. */
.about-feature-intro__cta {
  display: flex;
  justify-content: center;
}


/* ==========================================================================
   Content Block — shared base (.content-block)
   Used by: Block 5 (history), Block 6 (contribution-1), Block 7 (contribution-2)
   ========================================================================== */

/* Tagline: reuses the same pattern as advice-content__tagline.
    Figma Heading/Tagline 16px 700 #FF6600 fill_V0HZNF 
*/
.content-block__tagline {
  position: relative;
  margin: 0;
  display: block;
  width: fit-content;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: 16px;                      /* Figma Heading/Tagline */
  line-height: 1.3;
  color: var(--color-tangerine);        /* Figma fill_V0HZNF */
  text-transform: uppercase;
  padding-bottom: 14px;
}

.content-block__tagline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 8px;
  bottom: 7px;
  height: 1px;
  background-color: currentColor;
}

.content-block__tagline::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 9px;
  height: 7px;
  background-image: url('../images/tagline-hook.svg');
  background-repeat: no-repeat;
}

/* H2 heading: 48px 400 #03060C — Heading/H2.
    Figma Heading/H2 fill_QVB27A #03060C 
*/
.content-block__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 44px;                      /* Pastel 2026-06-15 — H2 44px (was 48px) */
  line-height: 1.1;                     /* Pastel 2026-06-15 — H2 lh 1.1 */
  letter-spacing: -0.01em;
  color: var(--color-navy-darkest);     /* Figma fill_QVB27A #03060C */
}

/* Heading lead span: themeable, navy colored in block 5 and 6.
   ts1/ts2 spans in Figma — same navy darkest color for history; navy for contribution.
*/
.content-block__heading-lead {
  color: var(--color-navy);             /* #0B1628 — Figma ts1 fill #0B1628 (contrib1); history ts2 = same navy */
}

/* Tangerine accent span inside two-tone headings (Figma ts2 — "Our history:", "to the ACT"). */
.content-block__heading-accent {
  color: var(--color-tangerine);        /* #FF6600 */
}

.content-block__heading-wrap {
  margin-top: 0;                        /* Pastel 2026-06-15 #1/#7 — tagline→heading 24px (box gap) */
  margin-bottom: 12px;                  /* Pastel 2026-06-15 #1/#7 — heading→body 36px (24 box gap + 12) */
}

/* Copy: 16px or 18px body text — set per variant.
    Figma Text/Regular/Normal or Text/Medium/Normal 
*/
.content-block__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;                            /* Figma layout_MXYN03 gap 18 (block 5) */
}

.content-block__copy p {
  margin: 0;
  font-size: 16px;                      /* Figma 10965:6517 Text/Regular/Normal */
  line-height: 1.5;
  color: var(--color-navy-darkest);     /* Figma fill_QVB27A #03060C */
}

.content-block__copy a {
  color: var(--color-tangerine);
  text-decoration: underline;
}

/* Inner row: holds content box + image. min-width:0 prevents flex overflow.
    Figma layout_MK4RWS row gap 64 w1280 
*/
.content-block__inner {
  max-width: 1280px;                    /* Figma layout_MK4RWS w1280 */
  margin: 0 auto;
  display: flex;
  flex-direction: row;                  /* Figma layout_MK4RWS row */
  gap: 64px;                            /* Figma layout_MK4RWS gap 64 */
  align-items: stretch;
  min-width: 0;                         /* css-architecture.md: flex row whose children can overflow */
}

/* Content box: column, gap 24, width 496px.
    Figma layout_ID4YIR Content Box width 496 gap 24 
*/
.content-block__box {
  display: flex;
  flex-direction: column;
  gap: 24px;                            /* Figma layout_ID4YIR gap 24 */
  width: 496px;                         /* Figma layout_ID4YIR width 496 */
  flex-shrink: 0;
}

/* Image: fills remaining space, 4px radius (no clip-path, unlike advice.css).
    Figma layout_SZYKSM radius 4px — no corner cut for About history 
*/
.content-block__image {
  flex: 1;
  margin: 0;
  min-width: 0;                         /* QA R3 part-2 — flex item must opt out of min-width:auto, else the <img> intrinsic width stops it shrinking and it overflows under the text box */
  border-radius: var(--radius-sm);      /* Figma borderRadius 4px = --radius-sm */
  overflow: hidden;
  min-height: 400px;
  background-color: var(--color-navy-lightest); /* placeholder when no image — Figma fill_9J873Z empty (contrib1/2 are placeholders); history img covers it */
}

.content-block__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ==========================================================================
   Block 5 — Our history
   Figma node 10965:6506 — white background section.
   ========================================================================== */

/* Section: column, padding 112px 80px, bg #FFFFFF.
    Figma 10965:6506 layout_58SHKS padding 112 80 fill_24A334 #FFFFFF 
*/
.content-block--history {
  padding: 112px 80px;                  /* Figma 10965:6506 layout_58SHKS padding 112 80 */
  background-color: var(--color-white); /* Figma fill_24A334 #FFFFFF */
}

/* History image: branded 82px top-right corner cut — same technique as contribution-2.
   Figma 10965:6519 Vector 2 (IMAGE-SVG, 82×82 @ x638 y0 = top-right). */
.content-block--history .content-block__image {
  align-self: stretch;                  /* QA R4 2026-06-19 #26 — client wants the image stretched to the text-column height (supersedes R3 part-2 flex-start); img object-fit:cover fills it */
  flex: 1;                              /* shrink with the viewport */
  min-width: 0;                         /* allow the image to shrink (was overflowing under the text box) */
  min-height: 0;                        /* QA R4 — override base min-height:400 so the stretched height tracks the text column */
  border-radius: 0;                     /* clip-path supersedes radius */
  clip-path: var(--corner-cut-clip); /* QA R3 #11 — rounded non-cut corners; 82px diagonal via shared --corner-cut-clip */
}

/* History uses Heading/H2 — base .content-block__heading handles this.
   Copy: Text/Regular/Normal 16px — handled by .content-block__copy p.
*/

/* Partnerships page image corner-cut modifier.
   Figma 10966:8408 corner-cut overlay x:638 y:0 82×82 → --corner-cut-clip.
   Pattern mirrors .content-block--history (line 282) and .content-block--contribution-1 (line 407).
   Layout rules live in partnerships.css; this is the hook to apply --corner-cut-clip via about.css
   class to avoid duplicating .content-block__image base overrides. */
.content-block--partners .content-block__image {
  clip-path: var(--corner-cut-clip); /* QA R3 #11 — rounded non-cut corners; 82px diagonal via shared --corner-cut-clip */
}


/* ==========================================================================
   Block 6 — Our contribution 1
   Figma node 10965:6483 — grey band, NO bottom padding (continuous with block 7).
   ========================================================================== */

/* Section: column, padding 112px 80px 0 (no bottom), bg #EBEBEB.
    Figma 10965:6483 layout_MA2AP4 padding 112 80 0 — no bottom (continuous grey band w/ contribution 2) 
    Figma fill_SYCYPD #EBEBEB = --color-accent-silver 
*/
.content-block--contribution-1 {
  padding: 112px 80px 0;               /* Figma layout_MA2AP4 padding 112 80 0 (no bottom) */
  background-color: var(--color-accent-silver); /* Figma fill_SYCYPD #EBEBEB */
}

/* Contribution 1 copy: 18px Text/Medium/Normal.
    Figma 10965:6495 Text/Medium/Normal 18px 
*/
.content-block--contribution-1 .content-block__copy p {
  font-size: 16px;                      /* Pastel 2026-06-15 #10 — paragraph 16px (was 18px) */
  line-height: 1.5;
}

/* Content box for contribution-1: column, justify space-between.
    Figma layout_FG6FJM column justify space-between 
*/
.content-block__inner--quote .content-block__box {
  width: 496px;                         /* Pastel R2 2026-06-15 #4/#7 — fixed text column; image flexes & shrinks instead. Removed justify:space-between (was spreading children into uneven gaps) + flex:1 (was growing, crushing text to 288px). */
  flex: 0 0 496px;
}

/* Pull-quote figure.
    Figma layout_KJ4RWX row gap 10 padding 10 
   Absolutely-positioned in Figma over layout_KJ4RWX but rendered as static flex for responsiveness.
*/
.content-block__quote {
  position: relative;                   /* Figma 10965:6496 layout_KJ4RWX */
  margin: 0;
  padding: 12px 0 0 155px;              /* Figma quote-mark x:0 y:12 + content x:155 */
}

/* Decorative quote mark sits LEFT of the text (Figma 10965:6500 layout_H033VG abs x:0 y:12),
   not stacked above it. 80px ≈ Figma 92×92 mark scaled from our 40×32 viewBox. */
.content-block__quote-mark {
  position: absolute;
  left: 0;
  top: 12px;
  width: 80px;
  opacity: 0.6;
}

.content-block__quote-mark svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Quote text: 20px 700 italic #0B1628 — Emphasis style.
    Figma 10965:6498 Emphasis 20px 700 italic fill_MMJPNN #0B1628
*/
.content-block__quote-text {
  margin: 0 0 10px;                     /* Pastel R2 2026-06-15 #3 — 10px gap text→cite (an earlier margin-bottom:10px rule was zeroed by this margin:0) */
  font-family: var(--font-family);
  font-weight: 700;
  font-style: italic;
  font-size: 20px;                      /* Figma 10965:6498 Emphasis */
  line-height: 1.4;                     /* 140% */
  color: var(--color-navy);             /* Figma fill_MMJPNN #0B1628 */
}

/* Quote cite: 12px 700 #FF6600 tangerine — Tagline Small.
    Figma 10965:6499 Tagline Small 12px 700 LS 4% fill_V0HZNF #FF6600 
*/
.content-block__quote-cite {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;                      /* Figma 10965:6499 Tagline Small */
  line-height: 1.2;                     /* 120% */
  letter-spacing: 0.04em;              /* Figma LS 4% */
  color: var(--color-tangerine);        /* Figma fill_V0HZNF #FF6600 */
  text-transform: uppercase;
}


/* ==========================================================================
   Block 7 — Our contribution 2
   Figma node 10965:6454 — grey band, full padding (bottom of band).
   ========================================================================== */

/* Section: column, padding 112px 80px, bg #EBEBEB.
    Figma 10965:6454 layout_20NJ0R padding 112 80 fill_SYCYPD #EBEBEB 
*/
.content-block--contribution-2 {
  padding: 112px 80px;                  /* Figma 10965:6454 layout_20NJ0R padding 112 80 */
  background-color: var(--color-accent-silver); /* Figma fill_SYCYPD #EBEBEB */
}

/* Image-left inner: image is first child.
   min-width:0 already on .content-block__inner.
*/
.content-block__inner--image-left {
  flex-direction: row;                  /* image left — same row direction, image comes first in DOM */
}

.content-block__image--left {
  order: -1;                            /* ensure image stays left in DOM order */
  align-self: stretch;                  /* QA R4 2026-06-19 #28 — stretch contribution-2 image to text-column height (supersedes R3 flex-start); img object-fit:cover fills it */
  flex: 1;                              /* Pastel R2 2026-06-15 #5 — image flexes & shrinks (text column now fixed); was 0 1 608px */
  min-width: 0;                         /* allow the image to shrink */
  min-height: 0;                        /* QA R4 — override base min-height:400 so the stretched height tracks the text column */
  border-radius: 0;                     /* clip-path supersedes radius — Figma 10965:6459 child Vector 3 */
  clip-path: var(--corner-cut-clip); /* QA R3 #11 — rounded non-cut corners; 82px diagonal via shared --corner-cut-clip */
}

/* Contribution 1 image: Figma fixed frame 608×558, cover-crops the portrait
   source (removes white borders), top-aligned, not stretched to text height. */
.content-block--contribution-1 .content-block__image {
  align-self: stretch;                  /* QA R4 2026-06-19 #27 — stretch contribution-1 image to text-column height (supersedes R3 flex-start); img object-fit:cover fills it */
  flex: 1;                              /* Pastel R2 2026-06-15 #4 — image flexes & shrinks (text column now fixed); was 0 1 608px → image stayed 608, text crushed */
  min-width: 0;                         /* allow the image to shrink */
  min-height: 0;                        /* QA R4 — override base min-height:400 so the stretched height tracks the text column */
}

/* Content box for contrib-2: column, align center, gap 36.
    Figma layout_AN4NNX column align-center gap 36 
*/
.content-block__box--list {
  gap: 36px;                            /* Figma layout_AN4NNX gap 36 */
  width: 496px;                         /* Pastel R2 2026-06-15 #5 — fixed text column; image flexes & shrinks */
  flex: 0 0 496px;
}

/* Lead text: 20px 400 #03060C — Text/Large/Normal.
    Figma 10965:6461 Text/Large/Normal 20px fill_QVB27A #03060C 
*/
.content-block__lead {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;                      /* Pastel 2026-06-15 #11 — paragraph 16px (was 20px) */
  line-height: 1.5;
  color: var(--color-navy-darkest);     /* Figma fill_QVB27A #03060C */
}

/* Icon list: column, padding 3px 1px.
    Figma layout_AOU8ND column padding 3 1 
*/
.content-block__list {
  margin: 0;
  padding: 3px 1px;                     /* Figma layout_AOU8ND padding 3 1 */
  list-style: none;
  display: flex;
  flex-direction: column;
}

/* List row: row, align center, gap 24, padding 24px 0, bottom 1px border tangerine.
    Figma layout_VUZLG1 row align-center gap 24 pad 24 0 border-bottom 1px #FF6600 
*/
.content-block__list-row {
  display: flex;
  flex-direction: row;                  /* Figma layout_VUZLG1 row */
  align-items: center;
  gap: 24px;                            /* Figma layout_VUZLG1 gap 24 */
  padding: 24px 0;                      /* Figma layout_VUZLG1 pad 24 0 */
  border-bottom: 1px solid var(--color-tangerine); /* Figma fill_V0HZNF stroke #FF6600 */
}

.content-block__list-icon {
  font-size: 48px;                      /* Figma 10965:6464 icon 48×48 */
  color: var(--color-tangerine);        /* Figma fill #FF6600 — icons are tangerine, not navy */
  flex-shrink: 0;
}

/* List label: 20px 700 #0B1628 — Heading/H6.
    Figma 10965:6465 Heading/H6 20px 700 LS -1% fill_MMJPNN #0B1628 
*/
.content-block__list-label {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 18px;                      /* Pastel 2026-06-15 #12 — bold list items 18px (was 20px) */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-navy);             /* Figma fill_MMJPNN #0B1628 */
}


/* ==========================================================================
   Block 8 — People section
   Figma node 10965:6333
   ========================================================================== */

/* Section: column, gap 80, padding 112px 80px, bg #FFFFFF.
    Figma 10965:6333 layout_B1ZHBP gap 80 padding 112 80 fill_24A334 
*/
.people {
  padding: 112px 80px;                  /* Figma layout_B1ZHBP padding 112 80 */
  background-color: var(--color-white); /* Figma fill_24A334 #FFFFFF */
  display: flex;
  flex-direction: column;
  gap: 80px;                            /* Figma layout_B1ZHBP gap 80 */
}

/* People intro: row, space-between, full width.
   min-width:0 per css-architecture.md (flex row with text content that can overflow).
    Figma layout_VARNE4 row space-between w1280 
*/
.people__intro {
  display: flex;
  flex-direction: row;                  /* Figma layout_VARNE4 row */
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  min-width: 0;                         /* css-architecture.md: flex row that can overflow */
}

/* Intro content: column, gap 22.
    Figma layout_NYINMV column gap 22 
*/
.people__intro-content {
  display: flex;
  flex-direction: column;
  gap: 22px;                            /* Figma layout_NYINMV gap 22 */
}

/* Tagline reuses .content-block__tagline styles. */
.people__tagline {
  /* inherits from .content-block__tagline */
}

/* H2 "Our people": 48px 400 #0B1628 — Heading/H2.
    Figma 10965:6342 Heading/H2 48px 400 fill_MMJPNN #0B1628 
*/
.people__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 44px;                      /* Pastel 2026-06-15 — H2 44px (was 48px); Figma 10965:6342 */
  line-height: 1.1;                     /* Pastel 2026-06-15 — H2 lh 1.1 */
  letter-spacing: -0.01em;
  color: var(--color-navy);             /* Figma fill_MMJPNN #0B1628 */
}

/* CTA button uses existing .btn .btn--primary — no new CSS needed. */
.people__cta {
  flex-shrink: 0;
}

/* Hairline rule between subsections: 1px top border tangerine.
    Figma layout_XWFSYC hairline fill width height 0 stroke fill_V0HZNF 1px 
*/
.people__rule {
  border: none;
  border-top: 1px solid var(--color-tangerine); /* Figma fill_V0HZNF #FF6600 */
  margin: 0;
}

/* Subsection: column, gap 48 (with intro) or gap 36 (heading only).
    Figma layout_WEB54S column gap 48 (w/ intro) 
    Figma layout_NLRW55 column gap 36 (heading only) 
   Default to gap 36; intro para adds visual gap naturally.
*/
.people-subsection {
  display: flex;
  flex-direction: column;
  gap: 36px;                            /* Figma layout_NLRW55 gap 36 (default) */
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.people-subsection:has(.people-subsection__intro) {
  gap: 48px;                            /* Figma layout_WEB54S gap 48 when intro present */
}

/* Subsection heading group: column.
    Figma layout_2XIZ0K / layout_8CJ4Y6 
*/
.people-subsection__heading {
  display: flex;
  flex-direction: row;                  /* Figma 10965:6347 layout_2XIZ0K mode row */
  justify-content: space-between;       /* Figma layout_2XIZ0K justify space-between — title left, intro right */
  align-items: flex-start;
  gap: 64px;
  min-width: 0;                          /* css-architecture.md: flex row with text that can overflow */
}

/* Intro paragraph sits on the right; cap width so it reads as a column, not full-bleed. */
.people-subsection__heading .people-subsection__intro {
  max-width: 600px;
  flex: 0 1 600px;
}

/* Subsection H3: 40px 400 #FF6600 tangerine — Heading/H3.
    Figma 10965:6348 Heading/H3 40px 400 LS -1% fill_V0HZNF #FF6600 
*/
.people-subsection__title {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 36px;                      /* Pastel 2026-06-15 — H3 36px (was 40px); Figma 10965:6348 */
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-tangerine);        /* Figma fill_V0HZNF #FF6600 */
}

/* Subsection intro: 20px 400 #000000 — Text/Large/Normal.
    Figma 10965:6349 Text/Large/Normal 20px fill_MG2YY9 #000000 — untokenized one-off 
*/
.people-subsection__intro {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 18px;                      /* Pastel 2026-06-15 #14/#15 — intro text 18px (was 20px) */
  line-height: 1.4;
  color: #000000;                       /* Figma fill_MG2YY9 #000000 — untokenized one-off */
}

/* Team card grid: 4 columns desktop.
    Figma Cards Wrapper layout_V2N0IQ: derived 4-col from card x-positions 0/326/652/978/1304 
   gap derived from pitch (326px) — 4 cards in 1280px inner: (1280 - 4*290) / 3 ≈ 33.3 ≈ 24px gap.
   Using 24px.
*/
.team-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Figma 4-col from card x-positions */
  gap: 24px;                            /* derived from card pitch ~326px in 1280px row */
}

/* Team card: column layout.
    Figma 10932:4351 layout_PJJXOB column fill 
*/
.team-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
}

/* Card photo: square placeholder, bg #E6E7E9, 4px radius.
   Photo is absolutely positioned in Figma (layout_RTHP4M 355×355 x-31 y5);
   implement as object-fit cover on the container for normal flow.
    Figma layout_RCWS19 bg fill_JSCZYG #E6E7E9 radius 4px 
    Figma fill_JSCZYG #E6E7E9 = --color-navy-lightest (placeholder when no photo) 
*/
.team-card__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-navy-lightest); /* Figma fill_JSCZYG #E6E7E9 — placeholder */
  border-radius: var(--radius-sm);      /* Figma radius 4px = --radius-sm */
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card content: column, gap 12, padding 16px 0.
    Figma layout_TS6Z20 column gap 12 padding 16 0 
*/
.team-card__content {
  display: flex;
  flex-direction: column;
  gap: 12px;                            /* Figma layout_TS6Z20 gap 12 */
  padding: 16px 0;                      /* Figma layout_TS6Z20 padding 16 0 */
}

.team-card__name-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;                             /* Figma layout_GYXY85 gap 2 */
}

/* Card name: 20px 700 #0B1628 — Heading/H6.
    Figma 10932:4358 Heading/H6 20px 700 LS -1% fill_MMJPNN #0B1628 
*/
.team-card__name {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 20px;                      /* Figma 10932:4358 Heading/H6 */
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-navy);             /* Figma fill_MMJPNN #0B1628 */
}

/* Card role: 12px 400 #0B1628 — Text/Tiny/Normal.
    Figma 10932:4359 Text/Tiny/Normal 12px fill_MMJPNN #0B1628 
*/
.team-card__role {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 12px;                      /* Figma 10932:4359 Text/Tiny/Normal */
  line-height: 1.3;
  color: var(--color-navy);             /* Figma fill_MMJPNN #0B1628 */
}


/* ==========================================================================
   Block 9 — Allied Bodies subsection
   Figma node 10965:6409 / 10965:6413
   ========================================================================== */

/* Allied bodies container is a .people-subsection with extra class.
   No additional section padding needed — lives inside .people section. 
.allied-bodies {
   inherits from .people-subsection 
}

 Allied bodies row: row, align stretch, gap 24.
   min-width:0 per css-architecture.md (flex row, blurb text can overflow).
    Figma layout_A1N0GI row align-stretch gap 24 
*/
.allied-bodies__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Figma layout_A1N0GI — 4 cards in Figma */
  gap: 24px;                            /* Figma layout_A1N0GI gap 24 */
  align-items: stretch;
  min-width: 0;                         /* css-architecture.md: flex/grid row with text content */
}

/* Allied card: column, gap 18, padding 24, 4px radius, 1px border, medium shadow, bg white.
    Figma 10965:6414 layout_VCQTWB card padding 24 gap 18 radius 4px 1px border #E6E7E9 
    Figma effects "medium" boxShadow 0 3px 16px -4px rgba(0,0,0,0.09) — matches --shadow-md 
*/
.allied-card {
  display: flex;
  flex-direction: column;
  gap: 18px;                            /* Figma layout_VCQTWB gap 18 */
  padding: 24px;                        /* Figma layout_VCQTWB padding 24 */
  background-color: var(--color-white); /* Figma fill_24A334 #FFFFFF */
  border: 1px solid var(--color-navy-lightest); /* Figma fill_JSCZYG stroke #E6E7E9 */
  border-radius: var(--radius-sm);      /* Figma radius 4px = --radius-sm */
  box-shadow: var(--shadow-md);         /* Figma effects "medium" 0 3px 16px -4px rgba(0,0,0,0.09) — matches --shadow-md */
  justify-content: space-between;
}

/* Allied card content: column, center, gap 18.
    Figma layout_YRMCWQ column center gap 18 
*/
.allied-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;                            /* Figma layout_YRMCWQ gap 18 */
}

/* Logo wrapper: column center, gap 10.
    Figma layout_1EK7C2 column center gap 10 
*/
.allied-card__logo {
  width: 100%;                          /* QA R3 part-2 — fluid (was fixed 254px); fixed width forced each grid item to 304px min-content so repeat(4,1fr) overflowed the 1280 row */
  max-width: 254px;                     /* Figma layout_67PFYV 254×90 (cap) */
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #C4C4C4;           /* Figma fill_OGXIDA #C4C4C4 — untokenized one-off (logo placeholder) */
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.allied-card__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Allied card text: column, gap 12 for content-top, gap 16 for name+blurb.
    Figma layout_ZSSGFN column gap 12 / layout_ASVE60 column gap 16 
*/
.allied-card__text {
  display: flex;
  flex-direction: column;
  gap: 16px;                            /* Figma layout_ASVE60 gap 16 */
  width: 100%;
}

/* Org name: 16px 700 #FF6600 tangerine — Heading/Tagline.
    Figma 10965:6420 Heading/Tagline 5317:18184 16px 700 fill_V0HZNF #FF6600 
*/
.allied-card__name {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;                      /* Figma 10965:6420 Heading/Tagline */
  line-height: 1.3;
  color: var(--color-tangerine);        /* Figma fill_V0HZNF #FF6600 */
}

/* Blurb: 14px 400 #0B1628 navy — Text/Small/Normal.
    Figma 10965:6421 Text/Small/Normal 14px fill_MMJPNN #0B1628 
*/
.allied-card__blurb {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;                      /* Figma 10965:6421 Text/Small/Normal */
  line-height: 1.4;
  color: var(--color-navy);             /* Figma fill_MMJPNN #0B1628 */
}

/* Action row: row, justify flex-end.
    Figma layout_N6QOMF row justify-end align-center gap 10 
*/
.allied-card__action {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;            /* Figma layout_N6QOMF justify flex-end */
  align-items: center;
  gap: 10px;
}

/* Arrow link — bare tangerine arrow_outward icon, NOT a filled button.
   Figma 10965:6423 (component 10739:6581 Icon Link, Colour=Tangerine): no fill, no padding,
   hug-sized; only a 24x24 arrow_outward SVG. layout_X9JBOY row center gap 8 radius 2px.
*/
.allied-card__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;                           /* Figma layout_X9JBOY no padding */
  background: none;                     /* Figma 10965:6423 no fill */
  border: 0;
  border-radius: 2px;                   /* Figma 10965:6423 borderRadius 2px */
  color: var(--color-tangerine);        /* Figma component Colour=Tangerine #FF6600 */
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.allied-card__btn:hover,
.allied-card__btn:focus-visible {
  opacity: 0.7;
}

.allied-card__btn .material-symbols-outlined {
  font-size: 24px;                      /* Figma layout_L5AYG2 arrow 24x24 */
  line-height: 1;
}


/* ==========================================================================
   MOBILE — max-width: 768px
   All 768 overrides after all desktop rules. Desktop-first per css-architecture.md.
   ========================================================================== */

/* ==========================================================================
   TABLET — max-width: 1024px
   Stack content blocks early: the fixed 608px content-block image crushes the
   text column below ~1072px (608 image + 64 gap + ~400 text). Stack at <=1024.
   Additive — the 768 block below keeps its own extras (paddings, fonts, grids).
   ========================================================================== */
@media (max-width: 1024px) {
  /* Allied bodies: reflow 4→2 columns at ≤1024 (QA R3 part-2 — 4 fixed cards
     overflowed the viewport between 769-1024 when DevTools/narrow). 1-col at ≤402. */
  .allied-bodies__row {
    grid-template-columns: repeat(2, 1fr);
  }
  .content-block__inner {
    flex-direction: column;
    gap: 32px;
  }
  .content-block__box {
    width: 100%;
  }
  .content-block__inner--image-left {
    flex-direction: column;
  }
  .content-block__image--left {
    order: 0;                           /* natural order — image on top when stacked */
    align-self: stretch;
    flex: none;
    width: 100%;
  }
  .content-block--contribution-1 .content-block__image {
    align-self: stretch;               /* drop fixed 608px basis so text isn't crushed */
    flex: none;
    width: 100%;
  }
  /* Pastel 2026-06-17 #20 — contribution-1 text box: reset fixed 496px width so it
     fills 100% and the block is fully single-column at ≤1024px (incl. 864px). */
  .content-block__inner--quote .content-block__box {
    width: 100%;
    flex: none;
  }
  /* Pastel 2026-06-17 #19 — contribution-2 image shrinks width-only as viewport narrows,
     same technique as contribution-1 and history (text column fixed; image flexes). */
  .content-block--contribution-2 .content-block__image--left {
    flex: 1;                            /* allow image to flex-shrink with viewport */
    min-width: 0;                       /* css-architecture.md: allow image to shrink below content size */
  }
  .content-block--contribution-2 .content-block__image--left img {
    width: 100%;
    height: 100%;
  }
  .content-block__image {
    min-height: 300px;
  }
}

@media (max-width: 768px) {

  /* --- Block 4 — Feature Intro ------------------------------------------- */
  .about-feature-intro {
    padding: 50px 20px;                 /* derived — mobile-derivation-catalog (match advice.css 768 padding) */
  }

  .about-feature-intro__inner {
    padding: 24px;                      /* derived */
  }

  /* Dark 'intro' lead text: 24px → 20px on mobile (Pastel 2026-06-15 #8 —
     sitewide for every page reusing this dark intro block, incl. Community). */
  .about-feature-intro__lead {
    font-size: 20px;
  }

  /* --- Content blocks (shared) -------------------------------------------- */

  .content-block--history,
  .content-block--contribution-2 {
    padding: 50px 20px;                 /* derived — mobile-derivation-catalog */
  }

  .content-block--contribution-1 {
    padding: 50px 20px 0;              /* derived — preserve no-bottom for grey band continuity */
  }

  .content-block__inner {
    flex-direction: column;             /* derived — stack to 1 column at 768 */
    gap: 32px;                         /* derived */
  }

  .content-block__box {
    width: 100%;                        /* full width when stacked */
  }

  .content-block__heading {
    font-size: 32px;                    /* Pastel 2026-06-15 — H2 mobile 32px (was 34px) */
  }

  .content-block__image {
    min-height: 300px;                  /* derived */
  }

  /* Pastel R2 2026-06-15 #9 — History image must cover/fill on mobile. The figure
     was letterboxing (img rendered at intrinsic 374×262 inside a 300px box).
     aspect-ratio gives the figure a definite height so the img can fill it. */
  .content-block--history .content-block__image {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
  .content-block--history .content-block__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Image-left: becomes image-top when stacked */
  .content-block__inner--image-left {
    flex-direction: column;
  }

  .content-block__image--left {
    order: 0;                           /* reset — natural DOM order (image first = image top) */
  }

  /* Reset contrib-1 fixed 608px frame when stacked — else flex-basis 608 + aspect-ratio
     overflows the viewport. Full width, ratio drives height. */
  .content-block--contribution-1 .content-block__image {
    align-self: stretch;                /* full width when stacked (was flex-start for desktop top-align) */
    flex: none;                         /* drop fixed 608px basis */
    width: 100%;
  }

  /* Pastel 2026-06-17 #24 — contribution-1 image img: object-fit cover fills the
     container (removes blank edges at mobile/tablet stacked). Scoped to contribution-1
     only; history already has cover set in its own mobile block above. */
  .content-block--contribution-1 .content-block__image img {
    object-fit: cover;
  }

  /* Pastel 2026-06-17 #21/#22 — contribution-1 box on mobile:
     #21: max-width:100% + min-width:0 prevents overflow off right edge at 374px
          (css-architecture.md: flex item must opt out of min-width:auto).
     #22: padding-bottom reduced to 0 (was: implicit gap-driven 24px from .content-block__box
          desktop gap); section has no bottom padding; stacked image follows immediately. */
  .content-block--contribution-1 .content-block__box {
    max-width: 100%;
    min-width: 0;                       /* css-architecture.md: flex item must opt out of min-width:auto */
    padding-bottom: 0;                  /* Pastel 2026-06-17 #22 — was gap-driven 24px, trimmed to 0 */
  }

  /* Pastel 2026-06-17 #23 — increase gap between the 2nd image and "Our commitment…"
     text in contribution-2 when stacked (mobile + tablet). The stacked inner already
     has gap:32px from the ≤1024px block; increase row-gap for contribution-2 only. */
  .content-block--contribution-2 .content-block__inner {
    gap: 48px;                          /* was 32px (inherited from .content-block__inner @1024) */
  }

  /* Pull-quote: shrink the left quote mark + indent on small screens. */
  .content-block__quote {
    padding-left: 60px;
  }
  .content-block__quote-mark {
    width: 48px;
  }

  /* --- Block 8 — People --------------------------------------------------- */
  .people {
    padding: 50px 20px;                 /* derived */
    gap: 48px;                          /* derived */
  }

  .people__intro {
    flex-direction: column;             /* derived — stack heading then CTA */
    align-items: flex-start;
  }

  .people__heading {
    font-size: 32px;                    /* Pastel 2026-06-15 — H2 mobile 32px (was 34px) */
  }

  .people-subsection__title {
    font-size: 28px;
  }

  /* Heading row → stack title above intro on mobile (derived). */
  .people-subsection__heading {
    flex-direction: column;
    gap: 16px;
  }

  .people-subsection__heading .people-subsection__intro {
    max-width: none;
    flex: none;
  }

  /* Card grid: 4→2 columns at 768 (derived per mobile-derivation-catalog). */
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Block 9 — Allied Bodies -------------------------------------------- */
  .allied-bodies__row {
    grid-template-columns: repeat(2, 1fr); /* derived — 2 cols at 768 */
  }

  .allied-card__logo {
    width: 100%;                        /* full width on smaller cards */
    max-width: 254px;
  }

}


/* ==========================================================================
   MOBILE — max-width: 402px
   ========================================================================== */

@media (max-width: 402px) {

  /* --- Block 8 — Card grid: 2→1 column ------------------------------------ */
  /* derived per mobile-derivation-catalog (card grid → 1 col) */
  .team-grid {
    grid-template-columns: 1fr;         /* derived — 1 col at 402 */
  }

  /* --- Block 9 — Allied Bodies: 2→1 column -------------------------------- */
  .allied-bodies__row {
    grid-template-columns: 1fr;         /* derived — 1 col at 402 */
  }

}


/* ==========================================================================
   About our Advocacy — blocks 4/6/7 (reuse the .content-block__* scaffold)
   Figma 11162:6290. Spec: roadmap/phase-08-content-pages/artifacts/page-about-our-advocacy-spec.md
   Desktop rules then a trailing mobile block (self-contained). The global
   content-block mobile rules above also apply to the reused .content-block__heading
   / __lead / __list-* used here. Reused typography keeps the sitewide Pastel sizes.
   ========================================================================== */

/* Block 4 — Your voice (Figma 11162:6465) */
.content-block--yourvoice {
  padding: 112px 80px;                  /* Figma 11162:6465 layout_padding */
  background-color: var(--color-white); /* Figma 11162:6465 #FFFFFF */
}

.content-block--yourvoice .content-block__copy p:first-child {
  font-weight: 700;                     /* Figma 11162:6476 — para 1 bold, para 2 normal */
}

.content-block--yourvoice .content-block__image {
  align-self: stretch;
  min-height: 0;
  border-radius: 0;
  clip-path: var(--corner-cut-clip);    /* Figma 11162:6478 82px top-right corner cut */
}

/* Shared list sub-structure (blocks 6 + 7): icon + (label + desc sub-line) */
.content-block__list-text {
  display: flex;
  flex-direction: column;
  gap: 8px;                             /* Figma EL-2a4c1d56 gap 8 */
  flex: 1;
  min-width: 0;
}

.content-block__list-desc {
  font-family: var(--font-family);
  font-weight: 400;                     /* Figma EL-2a4c1d56 Text/Medium/Normal */
  font-size: 18px;                      /* Figma EL-2a4c1d56 18px */
  line-height: 1.5;
  color: var(--color-navy);             /* Figma #0B1628 */
}

/* Custom SVG list-row icon (Parliament House) — sized in the 48px slot;
   inherits tangerine via currentColor from .content-block__list-icon color. */
.content-block__list-icon--svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  line-height: 1;
}

.content-block__list-icon--svg svg {
  width: 42px;                          /* Figma 11176:10375 ~42×32 in 48px slot */
  height: 32px;
  display: block;
}

/* Block 6 — What We Do (Figma 11162:6442): icon list left, image right */
.what-we-do {
  padding: 112px 80px;                  /* Figma 11162:6442 layout_padding */
}

.what-we-do__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 64px;                            /* Figma 11162:6445 gap 64 */
  align-items: stretch;
  min-width: 0;
}

.what-we-do__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;                            /* Figma 11162:6446 gap 24 */
}

.what-we-do__images {
  flex: 1;
  min-width: 0;
  display: flex;
}

.what-we-do__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);      /* Figma 11162:6464 borderRadius 4 */
  display: block;
}

/* Block 7 — Our Approach (Figma 11177:751): image-left on the navy-lightest band */
.content-block--our-approach {
  padding: 112px 80px;                  /* Figma 11177:751 layout_padding */
  background-color: var(--color-navy-lightest-50); /* Figma 11177:751 rgba(230,231,233,0.5) */
}

@media (max-width: 768px) {
  .content-block--yourvoice,
  .content-block--our-approach,
  .what-we-do {
    padding: 50px 20px;                 /* derived — mobile-derivation-catalog.md container cap */
  }

  .what-we-do__inner {
    flex-direction: column;             /* derived — 2-col stacks (list above image) */
    gap: 32px;
  }
}