/* About Us. Sections top to bottom: teal page header, white story rows,
   blue video band (fresh / legacy / people), community + carousel, closing CTA. */

.page-about-us {
  /* This page's eyebrow runs one step larger than the sitewide one. */
  --fs-about-eyebrow: 25px;
}
@media (max-width: 1366px) { .page-about-us { --fs-about-eyebrow: 18px; } }
@media (max-width: 1200px) { .page-about-us { --fs-about-eyebrow: 17px; } }
@media (max-width: 1024px) { .page-about-us { --fs-about-eyebrow: 16px; } }
@media (max-width: 880px)  { .page-about-us { --fs-about-eyebrow: 15px; } }
@media (max-width: 767px)  { .page-about-us { --fs-about-eyebrow: 14px; } }

.about-eyebrow {
  margin: 0;
  font: 700 var(--fs-about-eyebrow) / var(--lh-body) var(--font-serif);
  text-transform: uppercase; letter-spacing: 4.2px; color: var(--red);
}

/* Dotted rule under a heading. The image sits on the text baseline of a
   31px line box, exactly as it does on the live page. */
.about-rule { margin: 0; padding: 15px 0; line-height: var(--lh-body); }
.about-rule img { max-width: 100%; height: auto; }
.about-rule-plain { padding: 0; }

.about-eyebrow.eyebrow-white { color: var(--white); }
.about-eyebrow.eyebrow-navy { color: var(--navy); }

.about-copy { color: var(--body-text); }
.about-copy p { margin: 0 0 31px; }
.about-copy p:last-child { margin-bottom: 0; }
.about-copy-white { color: var(--white); }
/* Live's reset makes <strong> `bolder` against 300-weight body copy, which
   lands on 400 rather than the browser default bold. */
.about-copy strong { font-weight: 400; }

/* ---------- teal page header ---------- */
.about-hero {
  display: flex;
  background: #FFFFFF url(/assets/img/Teal-Background2.png) repeat-x top left;
}
.about-hero-text {
  width: 40%; margin-top: -50px; padding-left: 5%;
  display: flex; flex-direction: column; justify-content: center;
}
.about-hero-title {
  margin-top: 10px;
  font-size: var(--fs-hero); line-height: var(--lh-hero); color: var(--white);
}
.about-hero-photo { width: 60%; display: flex; align-items: flex-end; }
.about-hero-photo img { display: block; max-width: 100%; height: auto; }

/* Between 1201 and 1366 live gives the photo column a 50px right / 15px bottom
   margin, so the image shrinks by 50px and the band grows 15px below it. */
@media (min-width: 1201px) and (max-width: 1366px) {
  .about-hero-photo { width: calc(60% - 50px); margin: 0 50px 15px 0; }
}
/* Below 1366 live drops the heading widget's top margin back to 5px. */
@media (max-width: 1366px) { .about-hero-title { margin-top: 5px; } }
@media (max-width: 1200px) { .about-hero-photo img { width: 100%; } }
@media (max-width: 880px) {
  .about-hero { flex-direction: column; background-image: url(/assets/img/teal-250px.png); }
  .about-hero-text { width: 100%; margin-top: 50px; padding: 0 0 0 5%; align-items: center; text-align: center; }
  .about-hero-photo { width: 100%; padding: 0 150px; justify-content: center; }
}
@media (max-width: 767px) {
  .about-hero-photo { padding: 0; }
  .about-hero-photo img { width: 80%; margin: 0 auto; }
}


/* Above 1900 live switches to its desktop hero: a fixed-height band, the heading indented 13%,
   and above 1920 the columns stay 1920 wide and centred. */
@media (min-width: 1901px) {
  .about-hero { height: 440px; overflow: hidden; padding-inline: max(0px, calc((100% - 1920px) / 2)); }
  .about-hero-text { padding-left: 13%; }
}

/* ---------- white story rows ---------- */
.about-story {
  background: var(--white); padding-top: 50px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.about-row {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px;
  width: 100%; margin-top: 20px; padding: 0 13% 0 5%;
}
/* Live nudges the two-column row 5px right of the section edge; folded into the
   padding so the row never overflows the document. */
@media (min-width: 1367px) {
  .about-row { padding-right: calc(13% - 5px); padding-left: calc(5% + 5px); }
}
/* Above 1900 live indents the rows 13% on the left as well. */
@media (min-width: 1901px) { .about-row { padding-left: calc(13% + 5px); } }
.about-row-start { padding-bottom: 8%; }
.about-row-text { padding: 40px 0 0 8px; }
.about-row-text .h2 { margin-top: 10px; }
.about-row-photo img { display: block; width: 110%; max-width: 120%; height: auto; }
.about-row-start .about-row-photo { padding-top: 75px; }

@media (max-width: 1366px) {
  .about-row { grid-template-columns: 1fr; margin-top: 0; }
  /* The second row's photo keeps its 75px top inset once stacked, as live does. */
  .about-row-photo { margin-top: 20px; }
  .about-row-photo img { width: 90%; margin: 0 auto; }
}
@media (max-width: 767px) {
  /* Live drops the section's top padding once the rows stack. */
  .about-story { padding-top: 0; }
  .about-row-text { align-items: center; display: flex; flex-direction: column; text-align: left; }
  .about-rule { padding: 5px; }
  .about-rule-plain { padding: 0; }
  /* The two photos are separate live image widgets with different widths: the
     first overflows its 280px box, the second is centred inside a full-width one. */
  .about-row-photo { width: 280px; margin: 0; padding: 12px 0 2px; }
  .about-row-photo img { width: 304px; max-width: none; margin: 0 0 0 8px; }
  .about-row-start .about-row-photo { width: auto; padding: 20px 0 0; }
  .about-row-start .about-row-photo img { width: 288px; margin: 0 auto; }
}

/* ---------- blue video band ---------- */
.about-blue {
  min-height: 1900px;
  background: url(/assets/img/Background-blue_resized.jpg) repeat top left;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 20px;
}
.about-video { line-height: 0; }
.about-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }

.about-fresh { display: flex; gap: 20px; width: 100%; margin-top: 50px; padding-left: 235px; }
.about-video-fresh { width: 39%; align-self: center; }
.about-fresh-text {
  width: 56%; padding: 0 150px 0 90px;
  display: flex; flex-direction: column; justify-content: center;
}
.about-fresh-text .h2 { margin-top: 10px; }
.about-lead {
  margin: 10px 0 20px;
  font: 600 23px / var(--lh-body) var(--font-serif); color: var(--white);
}

.about-legacy { display: flex; gap: 20px; width: 77%; margin-top: 27px; }
.about-legacy-text { width: 50%; display: flex; flex-direction: column; justify-content: center; }
.about-legacy-text .h2 { margin-top: 10px; }
.about-video-legacy { width: 50%; padding: 10px; display: flex; flex-direction: column; justify-content: center; }

.about-people {
  width: 100%; min-height: 540px; background: var(--teal);
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; padding: 0 50px;
}
.about-video-people { width: 98%; align-self: center; }
.about-people-text {
  width: 100%; min-height: 580px; margin: 45px 0 0 30px; padding: 0 10px;
  display: flex; flex-direction: column; justify-content: space-evenly; align-items: flex-start;
}
.about-people-text .about-eyebrow { margin-bottom: 12px; }
.about-rule-people { padding: 30px 0; }
.about-people-copy { width: 95%; padding-bottom: 25px; }
.about-people-copy p, .about-people-copy p:last-child { margin: 0 0 17px; }

@media (max-width: 1366px) {
  /* The fresh block stays in two columns down to the mobile breakpoint, so the
     short video sits centred beside a much taller text column — as live does. */
  .about-legacy { flex-direction: column-reverse; padding-bottom: 50px; }
  .about-people { grid-template-columns: 1fr; row-gap: 20px; padding: 50px 150px 0; }
  /* Down to 1201 the stacked text keeps its desktop 45px/30px offset, left
     alignment and 30px rule padding; only the top padding changes. */
  .about-people-text { padding: 35px 0 0; }
  .about-rule-people img { width: 490px; }
}
@media (max-width: 1200px) {
  .about-people { padding: 0 100px; }
  .about-video-people { width: 100%; }
  .about-people-text { margin: 0; align-items: center; }
  .about-people-text .about-eyebrow { text-align: center; }
  .about-rule-people { padding: 5px 0; }
}
@media (max-width: 767px) {
  .about-fresh { flex-direction: column; width: 100%; margin-top: 50px; padding-left: 16px; align-items: center; }
  .about-video-fresh { width: 95%; align-self: auto; }
  .about-fresh-text { width: 100%; padding: 0 10px; align-items: center; }
  .about-legacy { width: 100%; padding: 0 0 0 8px; }
  .about-legacy-text, .about-video-legacy { width: 100%; }
  .about-legacy-text { padding: 0 10px; }
  .about-people { padding: 20px 0 0; }
  .about-people-text { width: 100%; padding: 0 10px; }
}

/* ---------- community + carousel ---------- */
.about-community {
  min-height: 1400px; padding: 10px;
  background: url(/assets/img/Background_yellowWhiteStatic1.jpg) repeat top left;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
}
.about-community-eyebrow { line-height: 1; text-align: center; }
.about-community-copy {
  width: 888px; max-width: 100%; margin: 0; padding-bottom: 14.4px; text-align: center;
}

.about-carousel { width: 1400px; max-width: 100%; padding: 50px 0 13px; }
.about-carousel-viewport { position: relative; overflow: hidden; line-height: 0; }
.about-carousel-track { display: flex; transition: transform .5s ease; }
.about-slide { flex: 0 0 100%; }
.about-slide img { display: block; width: 100%; max-width: 1000px; height: auto; margin: 0 auto; }
.about-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  padding: 8px; border-radius: 10px; background: var(--yellow); color: var(--white);
  font-size: 25px; line-height: 0;
}
.about-carousel-arrow .icon { width: .875em; height: 1em; }
.about-carousel-prev { left: 10px; }
.about-carousel-next { right: 10px; }
.about-carousel-dots {
  display: flex; justify-content: center; align-items: center; gap: 14px;
  height: 20px; margin-top: 55px;
}
.about-carousel-dots button {
  width: 20px; height: 20px; border-radius: 50%; background: var(--navy);
}
.about-carousel-dots button[aria-selected="true"] { background: var(--yellow); }

@media (max-width: 767px) {
  .about-community { min-height: 0; justify-content: flex-start; padding: 20px 16px 0 15px; }
  /* Live stops centring the eyebrow once it wraps to two lines. */
  .about-community-eyebrow { text-align: left; }
}

/* ---------- closing call to action ---------- */
.about-cta {
  background: var(--white); min-height: 551px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
}
.about-cta .h2 { text-align: center; }
/* Shrink-to-fit, like the live text widget, so the centred line lands on the
   same pixel column. */
.about-cta-copy { max-width: 100%; margin: 0; padding-bottom: 37px; text-align: center; }
/* Live colours "tradition" with a plain CSS `red`, brighter than the brand red. */
.about-cta .text-red { color: red; }
.about-cta-buttons { display: flex; justify-content: center; align-items: center; gap: 70px; padding: 10px; }
.about-cta-btn {
  display: inline-flex; align-items: flex-start; justify-content: center;
  width: 265px; height: 50px; padding: 18px 5px 0;
  background: var(--red); color: var(--white);
  font: 400 16px / 1 var(--font-display); text-align: center; text-decoration: none;
  border-radius: 7px; transition: background-color .2s ease-in-out;
}
.about-cta-btn:hover { background: var(--red-hover); }
.about-cta-btn-wide { width: 300px; }

@media (max-width: 767px) {
  .about-cta { min-height: 0; padding: 15px 18px 0 10px; }
  /* Live's closing heading is left-aligned inside a 5px-inset widget here. */
  .about-cta .h2 { padding: 0 5px; text-align: left; }
  .about-cta-buttons { flex-direction: column; }
}