/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   AboutQuoteSection — Figma zwjE3DrysH5sY4WacmYDKy, node 6947:10049.
   Spec: AboutQuoteSection.figma.md.
   ============================================================ */

/* White ground, 64px above and below the banner (Figma's frame is
   1512 x 544 = 64 + 416 + 64). Not an `.hp-section`: its padding is 128. */
.about-quote {
  background:    var(--background-white);
  padding-block: 4rem;                          /* 64px */
  font-family:   var(--font-family-default);
}


/* ---- Banner (6947:10050) ---------------------------------- */

/* Cyan-100, 24px radius, 128px block padding, on the wide track. The inline
   padding is whatever puts the 1024 text column on `.container`'s content
   edge: (banner − 1024) / 2 at desktop — 180 at 1512 — and never less than
   3rem (owner, 2026-10-27). Below ~1216 that minimum holds, so the text
   sits 16px inside `.container`'s edge rather than on it. */
.about-quote__banner {
  margin:        0;
  padding-block: 8rem;                          /* 128px */
  padding-inline: max(3rem, calc((100% - 1024px) / 2));
  background:    var(--color-brand-blue-100);   /* #D1EFFA */
  border-radius: var(--radius-lg);              /* 24px */
  box-sizing:    border-box;
}

/* Quote → attribution 36px; both blue-700. The Copy frame's 32px right
   padding is the quote's measure (1024 − 32). */
.about-quote__inner {
  display:        flex;
  flex-direction: column;
  gap:            2.25rem;                      /* 36px */
  padding-right:  2rem;                         /* 32px */
  color:          var(--color-brand-blue-700);  /* Figma cyan-700 #186581 */
}

/* The redesign's pull quote: Rowan Light Italic 36/48. */
.about-quote__quote {
  margin:      0;
  font-family: var(--font-family-serif);
  font-style:  italic;
  font-weight: var(--font-weight-light);
  font-size:   2.25rem;                         /* 36px */
  line-height: 3rem;                            /* 48px */
}

/* The hanging opening mark — copied from DataReportQuoteSection.css, which
   documents the derivation: Rowan Light Italic's own `quotedblleft` outline
   (ink box 56,478 → 357,769 in 1000 upm) as a currentColor mask, pulled left
   by exactly its width + gap so every line starts on the same edge. In em,
   so it follows the quote's size at every breakpoint. Kept as a copy rather
   than an import of another section's stylesheet; if a third pull quote
   appears, promote it with the rest of the redesign language. */
.about-quote__quote[data-open-quote]::before {
  --about-quote-gap: 0.06em;
  content:          '';
  display:          inline-block;
  width:            0.301em;
  height:           0.291em;
  margin-left:      calc(-0.301em - var(--about-quote-gap));
  margin-right:     var(--about-quote-gap);
  vertical-align:   0.478em;
  background-color: currentColor;
  -webkit-mask:     url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%2756 -769 301 291%27%3E%3Cpath transform=%27scale%281 -1%29%27 d=%27M56 560C56 507 75 478 108 478C143 478 161 519 157 557L111 573C110 639 129 696 178 751L161 769C99 718 56 632 56 560ZM235 560C235 507 254 478 287 478C322 478 340 519 336 557L290 573C289 639 308 696 357 751L340 769C278 718 235 632 235 560Z%27/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask:     url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%2756 -769 301 291%27%3E%3Cpath transform=%27scale%281 -1%29%27 d=%27M56 560C56 507 75 478 108 478C143 478 161 519 157 557L111 573C110 639 129 696 178 751L161 769C99 718 56 632 56 560ZM235 560C235 507 254 478 287 478C322 478 340 519 336 557L290 573C289 639 308 696 357 751L340 769C278 718 235 632 235 560Z%27/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.about-quote__attribution {
  max-width:   800px;                           /* Figma text node */
  font-size:   var(--font-size-xl);             /* 20px */
  line-height: var(--line-height-xl);           /* 28px */
  font-weight: var(--font-weight-regular);
}


/* ---- Responsive ------------------------------------------- */

/* No About mobile frame yet. The pull-quote steps are the redesign's
   (36/48 → 28/40 → 24/32), as DataReportQuoteSection measured them. */
@media (max-width: 991px) {
  /* 2rem inside the banner from tablet down (owner, 2026-10-27). The text
     sits that far in from the cyan edge, like text in a card, not on
     `.container`'s edge: 76 from the viewport here, 48 on phones. */
  .about-quote__banner {
    padding-block:  5rem;                       /* 80px */
    padding-inline: 2rem;                       /* 32px */
  }

  .about-quote__inner {
    padding-right: 0;
  }

  .about-quote__quote {
    font-size:   1.75rem;                       /* 28px */
    line-height: 2.5rem;                        /* 40px */
  }
}

@media (max-width: 767px) {
  .about-quote {
    padding-block: 3rem;                        /* 48px */
  }

  .about-quote__banner {
    padding-block: 3rem;                        /* 48px */
  }

  .about-quote__quote {
    font-size:   1.5rem;                        /* 24px */
    line-height: 2rem;                          /* 32px */
  }

  .about-quote__inner {
    gap: 1.5rem;                                /* 24px */
  }

  .about-quote__attribution {
    font-size:   var(--font-size-base);         /* 16px */
    line-height: var(--line-height-base);       /* 24px */
  }
}