/* About Us redesign — scoped to .about-page. Do not edit the compiled style.css. */
.about-page {
  --plum: #4f0d56;
  --plum-dark: #3a0940;
  --taupe: #484741;
  --pale-yellow: #fff1ab;
  --map-orange: #e07b1e;
  --radius: 15px;              /* all rounded corners (photos, cards, buttons) */
  /* Vertical-spacing scale — the names keep the spec's 150/100/75/50/25 roles, but the pixel
     values are HALF the original spec (client request). Desktop CSS px; scaled at the breakpoints below. */
  --gap-150: 75px;    /* major boundary: last content -> footer; break between big named sections (Our People) */
  --gap-100: 50px;    /* section -> section; hero -> tabs; tabs -> content; also above & below a rule */
  --gap-75:  37.5px;  /* a section heading -> the media row it introduces */
  --gap-50:  25px;    /* an element -> its direct partner (heading/copy/button, label/photo, photo/name, row/row) */
  --gap-25:  12.5px;  /* a value label -> its own description line */
  --gap-section: var(--gap-100);   /* legacy aliases retained for existing rules */
  --gap-sub: var(--gap-50);
  --h-large: 80px;             /* marquee headline maximum; section headings use the type scale below */
  --gotham: 'HCo Gotham', 'Montserrat', 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --gotham-narrow: 'HCo Gotham Narrow', 'Arial Narrow', var(--gotham);
  /* Approved InDesign type ratios, retained across the ten-column content layout. */
  --about-type-24: clamp(16px, 1.5vw, 17.1px);
  --about-type-26: calc(var(--about-type-24) * 13 / 12);
  --about-type-28: calc(var(--about-type-24) * 7 / 6);
  --about-type-36: calc(var(--about-type-24) * 1.5);
  --about-type-50: calc(var(--about-type-24) * 25 / 12);
  --about-type-60: calc(var(--about-type-24) * 2.5);
  font-family: var(--gotham);
  color: var(--taupe);
}
.about-page .about-h2 {
  color: var(--plum);
  font-family: var(--gotham);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: none;
}
/* never underline About headings (override theme h2/h3 border) */
.about-page h2 { text-transform: none; }
.about-page h1, .about-page h2, .about-page h3, .about-page h4,
.about-page .about-h2, .about-page .about-values__title, .about-page .about-timeline__title {
  border-bottom: 0 !important;
}
.about-page .about-eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--plum);
  margin-bottom: .5rem;
}
/* rounded corners on rectangular photos (heroes/marquee stay square) */
.about-feature__media img, .about-map__media img, .about-value__img img,
.about-strip__cell img, .about-tl__img { border-radius: var(--radius); }

/* The theme's col-md-10 / col-md-offset-1 leaves one empty desktop column on each side. */
/* Full-bleed breakout for the marquee and Values background. */
.about-page .about-fullbleed {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}
/* tighten the flex-template's double .spacer between sections on About pages */
.about-page .spacer { height: .75rem; }

/* ===================================================================
   SINGLE-PAGE HUB — panels + section rhythm (100px / 50px)
   =================================================================== */
.about-panel[hidden] { display: none; }
.about-panel { animation: about-fade .25s ease; }
@keyframes about-fade { from { opacity: 0; } to { opacity: 1; } }
/* Last content element -> footer = 150 (spec: major boundary). Own that gap outright by
   zeroing BOTH structural bottom pads the theme puts below the panels — #content.site-content
   (up to 1rem) and #primary (3rem) — so only the panels' 150 margin remains (measured live:
   without this the gap is 100+48=198). */
.about-hub-page #content.site-content,
.about-hub-page #primary { padding-bottom: 0; }
.about-hub__panels { margin-bottom: var(--gap-150); }
/* Our People only: the "Our Family" section is bracketed by 150 above and below (the designer's
   original analysis). Below is the major break before "Our Leadership"; above, add +50 to the
   shared 100 tabs->content gap so this one section reads 150. Deliberately deviates from the
   100 used to open every other tab. */
.about-panel[data-tab="our-people"] { padding-top: var(--gap-50); }
/* one gap div between blocks; the modifier picks the spacing-spec value for that pair */
.about-gap { height: var(--gap-100); }               /* section -> section */
.about-gap--major { height: var(--gap-150); }        /* break before a big named section (Our People) */
.about-gap--partner { height: var(--gap-50); }       /* copy -> its own standalone button (e.g. Diversity CTA) */
.about-gap--gallery { height: var(--gap-50); }       /* a feature block -> its trailing photo strip */
.about-gap--rule { position: relative; height: calc(var(--gap-100) * 2); }  /* 100 above + 100 below, rule centered */
.about-gap--rule::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: rgba(128,129,125,.5);
}
/* neutralize the blocks' own outer margins inside panels so .about-gap owns the rhythm */
.about-hub__panels .about-feature,
.about-hub__panels .about-values,
.about-hub__panels .about-timeline,
.about-hub__panels .about-profiles,
.about-hub__panels .about-strip,
.about-hub__panels .about-cta-row,
.about-hub__panels .about-map,
.about-hub__panels .flex_content_area { margin-top: 0; margin-bottom: 0; }

/* ---------- PHOTO / VIDEO MARQUEE (wondercamp-style) ---------- */
/* only zero the vertical margins — leaving the .about-fullbleed -50vw side margins intact */
.about-hero.about-marquee { margin-top: 0; margin-bottom: 0; }
.about-hero.about-marquee > .col-xs-12 { padding-left: 0; padding-right: 0; }
.about-marquee .about-hero__bg {
  filter: none;                                   /* marquee shows in full color */
  width: 100%;                                   /* keep full width when the height cap overrides the aspect ratio */
  min-height: 0 !important;
  aspect-ratio: var(--marquee-ar, 21 / 9);        /* desktop: ultrawide 21:9 (from the poster's size, else this) */
  max-height: 84vh;                               /* large hero, but a hint of the tabs shows below */
  overflow: hidden;
  background-color: #000;
}
/* Phones: the tall portrait (2:3) marquee video/poster — a near-full-height banner. */
@media (max-width: 767px) {
  .about-marquee .about-hero__bg {
    aspect-ratio: var(--marquee-ar-m, 2 / 3);     /* from the mobile poster's size, else 2:3 */
    max-height: 100svh;                           /* never taller than the screen (crops via object-fit if it would be) */
  }
}
.about-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block; z-index: 0;
}
.about-marquee .about-hero__inner { z-index: 2; }
/* very wide screens: cap the marquee height so the tabs/content stay below the fold */
@media (min-width: 2400px) {
  .about-marquee .about-hero__bg { max-height: 70vh; }   /* preserve more below the fold on ultrawide */
}

/* ---------- HERO (still, full-bleed, square corners) ---------- */
.about-hero { margin: 0 0 1.5rem; }
.about-hero__bg {
  position: relative; background-size: cover; background-position: center;
  background-color: #2a2a2a; filter: grayscale(100%);
  display: flex; align-items: center; justify-content: center;
}
.about-hero--medium .about-hero__bg { min-height: clamp(360px, 42vh, 520px); }
.about-hero--large  .about-hero__bg { min-height: clamp(440px, 56vh, 660px); }
.about-hero--full   .about-hero__bg { min-height: clamp(520px, 82vh, 820px); }
.about-hero--dark .about-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
}
.about-hero__inner { position: relative; z-index: 2; text-align: center; padding: 1.5rem; max-width: 1000px; }
.about-hero__eyebrow { color: #fff; text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; margin-bottom: .75rem; }
.about-hero__headline { color: #fff; font-weight: 300; font-size: clamp(2.5rem, 7vw, var(--h-large)); line-height: 1.05; margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.about-hero__subhead { color: #fff; font-size: 1.1rem; margin-top: 1rem; }

/* ---------- SUB-NAV TAB BAR (grey 1px underline) ---------- */
.about-subnav { margin: var(--gap-100) -10px var(--gap-100); }   /* hero -> tabs = 100; tabs -> first content = 100 */
.about-subnav__bar {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: .35rem; border-bottom: 1px solid var(--taupe);
}
/* The page scope keeps the theme's a:focus radius reset from squaring a selected tab. */
.about-page .about-subnav__tab {
  font-family: var(--gotham); font-weight: 500; letter-spacing: normal; text-transform: uppercase; font-size: var(--about-type-24);
  color: var(--plum); padding: .6rem 1.6rem;
  border-radius: var(--radius) var(--radius) 0 0;   /* rounded top corners, square bottom corners */
  margin-bottom: -1px;          /* pill bottom sits on the 1px line below */
  text-decoration: none; cursor: pointer; transition: background .15s, color .15s;
}
.about-subnav__tab:hover { background: rgba(79,13,86,.08); color: var(--plum); text-decoration: none; }
.about-page .about-subnav__tab.is-active { background: var(--plum) !important; color: #fff !important; }
/* A native section picker on phones; revealed only after the switching script is ready. */
.about-subnav__mobile { display: none; position: relative; }
.about-subnav__mobile::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--plum); border-bottom: 2px solid var(--plum);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.about-page .about-subnav__select {
  -webkit-appearance: none; appearance: none; display: block; box-sizing: border-box;
  width: 100%; max-width: 100%; min-height: 52px; margin: 0; padding: 14px 48px 14px 18px;
  border: 1px solid var(--plum); border-radius: var(--radius); background: #fff; color: var(--plum);
  font-family: var(--gotham); font-size: var(--about-type-24); font-weight: 500; line-height: 1.4;
  text-transform: uppercase; letter-spacing: normal; cursor: pointer; box-shadow: none;
}
.about-page .about-subnav__select:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }

/* ---------- INTRO / CONTENT ---------- */
.about-page .flex_content_area { max-width: none; margin: 0 auto; text-align: center; }
.about-values__intro { margin: 0 auto 1.5rem; }
.about-profiles__intro { margin: 0 auto var(--gap-100); font-family: var(--gotham-narrow); font-weight: 400; font-size: var(--about-type-26); line-height: 1.5; }   /* Our Team intro -> first group label = 100 */
.about-profiles__intro :is(p, ul, ol) { font: inherit; }
/* Bound rich-text blocks tightly so the explicit margins around them own the vertical rhythm. */
.about-page :is(.about-feature__text, .paddme-extra, .about-profiles__intro, .about-values__intro) > :first-child { margin-top: 0; }
.about-page :is(.about-feature__text, .paddme-extra, .about-profiles__intro, .about-values__intro) > :last-child { margin-bottom: 0; }
/* §8: center the Mission Statement + Diversity Mission Statement (were flush-left). */
:is(.about-panel[data-tab="who-we-are"], .about-who-page) .paddme-extra { text-align: center; }

/* ---------- PROFILE GRID (leadership / team) ---------- */
/* Approximately 175px portraits: five 174px circles + four 19px gaps fit the ten-column area. */
.about-profiles { margin: 2rem -10px; --pw: 174px; }
.about-profile { flex: 0 0 var(--pw, 174px); width: var(--pw, 174px); margin: 0; text-align: center; }
.about-profile__img {
  width: var(--pw, 174px); height: var(--pw, 174px);
  border-radius: 50%; object-fit: cover; display: block; margin: 0 auto var(--gap-50);   /* photo -> name = 50 */
  border: 3px solid #fff; box-sizing: border-box;
  box-shadow: none;
}
.about-profile__ph { background: #e7e4dd; }
.about-profile__name { display: block; color: var(--plum); font-family: var(--gotham-narrow); font-weight: 700; text-transform: uppercase; font-size: var(--about-type-24); line-height: 1.2; letter-spacing: normal; }
/* §8: employee/exec titles a little smaller so name+title stays within ~3 lines. */
.about-profile__role { display: block; color: var(--taupe); font-family: var(--gotham-narrow); font-weight: 400; font-size: calc(var(--about-type-24) * 5 / 6); line-height: 1.2; margin-top: .25rem; }
/* Full-width group rules; fixed-size profiles keep short and wrapped rows centered. */
.about-group { width: 100%; margin: 0 auto 2.5rem; }
.about-group .about-profiles__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-50) 19px; }   /* photo row -> next photo row = 50 */
/* Stacked people-groups (Our Team): end of one group -> next group label = 100; nothing after the last. */
.about-page .about-profiles--stacked .about-group { margin-bottom: 0; }
.about-page .about-profiles--stacked .about-group:not(:last-child) { margin-bottom: var(--gap-100); }
/* A titled profile grid: heading -> its group labels = 75; heading -> intro copy (Our Team) = 50. */
.about-page .about-profiles .about-h2 { margin: 0 0 var(--gap-75); }
.about-page .about-profiles .about-h2:has(+ .about-profiles__intro) { margin-bottom: var(--gap-50); }
/* Inline leadership groups share the same portrait spacing as full and three-person rows. */
.about-profiles--inline .about-groups { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2rem 19px; }
.about-profiles--inline .about-group { flex: 0 1 auto; width: calc(var(--maxcols, 5) * var(--pw, 174px) + (var(--maxcols, 5) - 1) * 19px); max-width: 100%; margin: 0; }
/* Reference headings: text interrupts two horizontal rules, with short caps at the outer ends. */
.about-rule-heading {
  --rule-color: #80817d; --rule-weight: 1px; --rule-cap-weight: 2px; --rule-cap-height: 10px;
  display: flex; align-items: center; gap: var(--rule-gap, .75rem); padding-bottom: 0;
}
.about-rule-heading::before, .about-rule-heading::after {
  content: ""; flex: 1 1 0; min-width: 12px; height: var(--rule-cap-height);
  background: linear-gradient(var(--rule-color), var(--rule-color)) center / 100% var(--rule-weight) no-repeat;
}
.about-rule-heading::before { border-left: var(--rule-cap-weight) solid var(--rule-color); }
.about-rule-heading::after { border-right: var(--rule-cap-weight) solid var(--rule-color); }
.about-rule-heading__label { min-width: 0; }
.about-bracket { text-align: center; padding: 0; }
.about-bracket__label { display: block; color: var(--plum); font-family: var(--gotham); font-weight: 800; text-transform: uppercase; letter-spacing: normal; font-size: var(--about-type-24); line-height: 1.35; }
.about-bracket--full { margin: 0 0 var(--gap-50); }   /* group label -> headshot photos = 50 */

/* ---------- VALUE CARDS (plum band) ---------- */
/* Band top padding = 100 (section top -> heading). No bottom band padding, so the gap under the
   last row is just each card's own 75 margin — the deepest caption sits 75 above the band's
   bottom edge. (Tightened from the spec's symmetric 100 at the client's request: the uneven
   caption lengths made the full 100 read as an oversized purple void under the shorter cards.) */
.about-values { padding: var(--gap-100) 0 0; color: #fff; }
.about-values__title { text-align: center; color: #fff; font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.4rem); text-transform: none; margin: 0 0 var(--gap-75); }   /* heading -> first image row = 75 */
.about-values__title.about-rule-heading {
  --rule-color: var(--pale-yellow); --rule-weight: 2px; --rule-cap-weight: 3px; --rule-cap-height: 14px;
  --rule-gap: clamp(1rem, 4vw, 4rem);
}
.about-value { text-align: center; margin-bottom: var(--gap-75); }   /* image row -> next image row = 75 */
/* Include the 5px white border in the outer radius so the photo itself retains 15px corners. */
.about-value__img img { margin: 0 auto; border: 5px solid #fff; border-radius: calc(var(--radius) + 5px); }
.about-value__title { text-transform: uppercase; font-weight: 700; font-size: 1rem; letter-spacing: .04em; margin: var(--gap-50) 0 var(--gap-25); }   /* image -> label = 50; label -> description = 25 */
.about-value__caption { color: #fff; font-size: .85rem; line-height: 1.5; opacity: .95; }

/* ---------- WHO WE ARE TYPOGRAPHY (InDesign ratios; hub and section preview) ---------- */
:is(.about-panel[data-tab="who-we-are"], .about-who-page) .paddme-extra {
  font-family: var(--gotham-narrow); font-weight: 400; font-size: 23px; line-height: 1.5;   /* intro Mission Statement (text-only block) — fixed 23px per request */
}
:is(.about-panel[data-tab="who-we-are"], .about-who-page) .paddme-extra :is(p, ul, ol) {
  font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit;
}
:is(.about-panel[data-tab="who-we-are"], .about-who-page) .about-values__title {
  font-family: var(--gotham); font-weight: 900; font-size: var(--about-type-60); line-height: 1.1; letter-spacing: .03em;
}
:is(.about-panel[data-tab="who-we-are"], .about-who-page) .about-value__title {
  font-family: var(--gotham); font-weight: 800; font-size: var(--about-type-28); letter-spacing: normal;
}
:is(.about-panel[data-tab="who-we-are"], .about-who-page) .about-value__caption {
  font-family: var(--gotham-narrow); font-weight: 400; font-size: 16px; line-height: 1.25;   /* 16px keeps each caption to ~3 lines */
}
/* The Diversity rich-text heading gets the same capped rules as the people headings.
   Grid keeps the editor's heading text in the middle without rewriting stored content. */
:is(.about-panel[data-tab="who-we-are"], .about-who-page) .paddme-extra > h2 {
  display: grid; grid-template-columns: minmax(12px, 1fr) minmax(0, auto) minmax(12px, 1fr);
  align-items: center; gap: .75rem; margin: 0 0 var(--gap-50); padding: 0; text-align: center;   /* Diversity heading -> paragraph = 50 */
  font-family: var(--gotham); font-weight: 800; font-size: var(--about-type-28); line-height: 1.3;
  color: var(--plum);
}
:is(.about-panel[data-tab="who-we-are"], .about-who-page) .paddme-extra > h2::before,
:is(.about-panel[data-tab="who-we-are"], .about-who-page) .paddme-extra > h2::after {
  content: ""; height: 10px;
  background: linear-gradient(#80817d, #80817d) center / 100% 1.5px no-repeat;
}
:is(.about-panel[data-tab="who-we-are"], .about-who-page) .paddme-extra > h2::before { border-left: 2px solid #80817d; }
:is(.about-panel[data-tab="who-we-are"], .about-who-page) .paddme-extra > h2::after { border-right: 2px solid #80817d; }
:is(.about-panel[data-tab="who-we-are"], .about-who-page) .paddme-extra > h2 strong { font-weight: inherit; }
:is(.about-panel[data-tab="who-we-are"], .about-who-page) .paddme-extra > h2 ~ :is(p, ul, ol) {
  font-size: var(--about-type-26); line-height: 1.5;   /* DEI / Diversity copy matches the "Our Family" feature body */
}
@media (min-width: 992px) {
  /* Eight columns of copy beneath the ten-column heading; include the two 10px gutters. */
  :is(.about-panel[data-tab="who-we-are"], .about-who-page) .paddme-extra > h2 ~ :is(p, ul, ol) {
    margin-left: calc(10% + 2px); margin-right: calc(10% + 2px);
  }
}

/* ---------- FEATURE BLOCKS (alternating) ---------- */
.about-page :is(.about-feature, .about-profiles, .about-timeline) .about-h2 {
  font-family: var(--gotham); font-weight: 900; font-size: var(--about-type-60); line-height: 1.1;
}
.about-page .about-feature .about-h2 { margin: 0 0 var(--gap-50); }   /* section heading -> body copy = 50 (also the map's heading) */
/* Responsive-only heading emitted above the media for stacked What We Do sections (§8);
   hidden here, revealed by the mobile rule below. */
.about-feature__mhead { display: none; }
.about-feature { display: flex; flex-wrap: wrap; align-items: center; margin: 3rem -10px; }
.about-feature--right .about-feature__media { order: 2; }
.about-feature__media img { width: 100%; height: auto; }
.about-feature__body { padding: 1.5rem 10px 1.5rem 50px; }
.about-feature__body:first-child { padding-left: 10px; padding-right: 50px; }
.about-feature__text { font-family: var(--gotham-narrow); font-weight: 400; font-size: var(--about-type-26); line-height: 1.5; }
.about-feature__text :is(p, ul, ol) { font: inherit; }
.about-ctas { margin-top: var(--gap-50); }   /* body copy / legend -> button = 50 */
.about-page .btn-primary.about-cta {
  background: var(--plum); border-color: var(--plum); color: #fff;
  font-family: var(--gotham); text-transform: uppercase; font-weight: 500; font-size: var(--about-type-24); letter-spacing: normal;
  border-radius: var(--radius); padding: .7rem 1.7rem; margin: .25rem .35rem .25rem 0; display: inline-block;
}
.about-page .btn-primary.about-cta:hover { background: var(--plum-dark); border-color: var(--plum-dark); }
.about-page .btn-primary.about-cta--outline { background: transparent; color: var(--plum); }
.about-page .btn-primary.about-cta--outline:hover { background: var(--plum); color: #fff; }

/* ---------- DISTRIBUTION MAP ---------- */
.about-map .about-feature__body { text-align: right; }
.about-page .about-map .about-cta { max-width: 100%; white-space: normal; margin-right: 0; }
.about-map__media { text-align: center; }
.about-map__legend { list-style: none; padding: 0; margin: var(--gap-50) 0 0; font-family: var(--gotham-narrow); font-weight: 700; font-size: var(--about-type-26); line-height: 1.3; }   /* body copy -> map legend = 50 */
.about-map__legend li { margin-bottom: .4rem; }
.about-map__swatch { display: inline-block; width: 14px; height: 14px; margin-right: .5rem; vertical-align: middle; border-radius: 2px; }
/* Deterministic aspect-ratio box (matches the usa_en map's 959x593). JQVMap's resize handler reads
   the container's height and writes it back onto the SVG; with an auto height that formed a feedback
   loop that grew the map (and pushed the section down) as the window was dragged. A fixed ratio makes
   the height a stable function of width, so resizing can't compound. */
.about-usa-map { position: relative; width: 100%; aspect-ratio: 959 / 593; }
.about-usa-map svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; }

/* ---------- TIMELINE (center spine, horizontal branches, black dots) ---------- */
.about-timeline { margin: 2.5rem -10px; }
.about-tl__track {
  --tl-branch-length: 17.75%;
  --tl-dot-size: 13px;
  /* Double the previous visible gap (.9rem minus half the dot), on both sides of the year. */
  --tl-content-gap: calc(1.8rem - var(--tl-dot-size));
  --tl-media-inset: calc(var(--tl-branch-length) + var(--tl-dot-size) / 2 + var(--tl-content-gap) / 2);
  /* The desktop layout script uses row-gap as the design's 220pt year-to-year step. */
  position: relative; row-gap: calc(var(--about-type-24) * 220 / 24); margin: 1.5rem auto 0;
}
.about-tl__track::before { content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 1px; background: var(--taupe); transform: translateX(-50%); }
.about-tl { position: relative; width: 50%; box-sizing: border-box; padding: 1.1rem 0; }
.about-tl__track--positioned > .about-tl { position: absolute; top: var(--tl-top, 0px); }
.about-tl--left { left: 0; }
.about-tl--right { left: 50%; }
.about-tl__row { display: flex; align-items: center; gap: var(--tl-content-gap); }
.about-tl__branch { position: relative; flex: 0 0 var(--tl-branch-length); height: 1px; background: var(--taupe); }
.about-tl--left .about-tl__branch { margin-left: calc(var(--tl-dot-size) / 2); }
.about-tl--right .about-tl__branch { margin-right: calc(var(--tl-dot-size) / 2); }
.about-tl__dot { position: absolute; top: 50%; width: var(--tl-dot-size); height: var(--tl-dot-size); border-radius: 50%; background: var(--taupe); }
.about-tl--left .about-tl__dot { left: 0; transform: translate(-50%, -50%); }
.about-tl--right .about-tl__dot { right: 0; transform: translate(50%, -50%); }
.about-tl__year { flex: 0 0 auto; font-family: var(--gotham-narrow); font-weight: 700; font-size: var(--about-type-50); line-height: 1; color: #1a1a1a; }
.about-tl__text { flex: 1 1 0; min-width: 0; font-family: var(--gotham-narrow); font-weight: 400; font-size: var(--about-type-26); color: #555; line-height: 1.45; }
.about-tl--left .about-tl__text { text-align: right; }
.about-tl--right .about-tl__text { text-align: left; }
.about-tl__media { margin-top: 1rem; width: calc(100% - var(--tl-media-inset)); max-width: 100%; }
.about-tl--left .about-tl__media { margin-left: auto; margin-right: var(--tl-media-inset); }
.about-tl--right .about-tl__media { margin-left: var(--tl-media-inset); margin-right: auto; }
.about-tl__img { width: 100%; display: block; }

/* ---------- PHOTO STRIP ---------- */
.about-strip { margin: 2.5rem -10px; }
.about-strip__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.about-strip__cell { min-width: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.about-strip__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

.about-cta-row { margin: 1.5rem -10px 2.5rem; }

/* ---------- RESPONSIVE ---------- */
@media (min-width: 768px) {
  .about-page .about-subnav__tab { flex: 1 1 0; text-align: center; }
}
/* Ten desktop columns: empty | two columns per tab | empty; the underline spans all ten. */
@media (min-width: 992px) {
  .about-subnav__bar { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0; }
  .about-page .about-subnav__tab { grid-column: span 2; padding-left: .5rem; padding-right: .5rem; }
  .about-page .about-subnav__tab:first-child { grid-column: 2 / span 2; }
}
/* tablet portrait & down: stacked feature blocks, single-rail timeline, stacked leadership groups */
@media (max-width: 991px) {
  .about-page { --gap-150: 48px; --gap-100: 32px; --gap-75: 24px; --gap-50: 18px; --gap-25: 9px; }
  .about-page .about-subnav__tab { padding-left: .75rem; padding-right: .75rem; }
  .about-feature { margin: 2rem -10px; flex-direction: column; }
  .about-feature .about-feature__body { order: 1; padding: 1.25rem 10px; }
  .about-feature__media, .about-map__media { order: 2; }
  /* §8: What We Do stacks as heading -> image -> copy -> button (mobile only; desktop unchanged). */
  .about-panel[data-tab="what-we-do"] .about-feature__mhead { display: block; order: -1; }
  .about-panel[data-tab="what-we-do"] .about-feature > .about-feature__media,
  .about-panel[data-tab="what-we-do"] .about-map > .about-map__media { order: 0; }
  .about-panel[data-tab="what-we-do"] .about-feature > .about-feature__body { order: 1; }
  .about-panel[data-tab="what-we-do"] .about-feature__body > .about-h2 { display: none; }
  .about-page .btn-primary.about-cta { white-space: normal; max-width: 100%; padding: .7rem 1.25rem; }

  /* timeline: single left rail; year then text stacked, dot on the spine */
  .about-tl__track { max-width: 100%; }
  .about-tl__track--positioned { height: auto !important; }
  .about-tl__track--positioned > .about-tl { position: relative; top: auto; }
  .about-tl__track::before { left: 6px; }
  .about-tl { width: 100%; left: 0 !important; padding: .8rem 0 .8rem 30px; }
  .about-tl.about-tl--noimg { padding-top: .4rem; padding-bottom: .4rem; }   /* text-only entries: ~50% less vertical space */
  .about-tl__row { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .about-tl__year { order: 1; }
  .about-tl__text { order: 2; text-align: left !important; flex: 0 1 auto; max-width: 100%; }
  .about-tl .about-tl__branch { position: absolute; left: 6px; top: 1.6rem; width: 0; height: 0; margin: 0; background: none; }
  .about-tl .about-tl__dot { left: 0; right: auto; top: 0; transform: translate(-50%, -50%); }
  .about-tl__media { margin: .75rem 0 0 0 !important; width: 320px; max-width: 100%; }

  /* leadership groups stack (each keeps its own bracket + headshots) */
  .about-profiles--inline .about-groups { flex-direction: column; align-items: center; gap: 1.5rem; }
  .about-profiles--inline .about-group { flex: 0 1 auto; width: 100%; min-width: 0; }
}
/* Match the phone gutters; the selector replaces the two-column tab fallback when JS is ready. */
@media (max-width: 767px) {
  .about-page #content > .container > .row > .col-md-10 { padding-left: 20px; padding-right: 20px; }
  .about-page .about-subnav__tab { flex: 1 1 calc(50% - .35rem); text-align: center; }
  .about-subnav--enhanced .about-subnav__bar { display: none; }
  .about-subnav--enhanced .about-subnav__mobile { display: block; }
}
/* phones: tighter headshot track; photo strip wraps */
@media (max-width: 600px) {
  .about-page { --gap-150: 36px; --gap-100: 24px; --gap-75: 18px; --gap-50: 14px; --gap-25: 8px; }
  .about-profiles { --pw: 148px; }
  .about-strip__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}