/* Only the History page loads this stylesheet. */
/* Hero: the compass photo, with its blue tint built into the image, taller than other compact banners. */
.page-banner.history-banner { background-image: url("../images/compass-bg.jpg"); background-position: center 60%; }
.history-banner .page-banner-inner { min-height: 17rem; }
@media (min-width: 48rem) { .page-banner.history-banner .page-banner-inner { min-height: calc(13.5rem + 16vw); } }
@media (min-width: 75rem) { .page-banner.history-banner .page-banner-inner { min-height: calc(26rem + 5.5vw); } }
/* Clip sideways so the slide-in offsets never widen the page. */
.history-page { overflow-x: hidden; overflow-x: clip; --history-panel: #f3f5f9; --history-line: #dce2ef; --history-space: clamp(3.5rem, 8vw, 7rem); --history-gutter: max(1.25rem, 3vw); color: var(--ink); }
.history-wrap { width: 100%; max-width: 92rem; margin-inline: auto; padding-left: max(var(--history-gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--history-gutter), env(safe-area-inset-right, 0px)); }
.history-eyebrow { margin: 0 0 .875rem; color: var(--accent); font-size: clamp(.9375rem, 1vw, 1.0625rem); font-weight: 700; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }
.history-page h2 { margin: 0 0 1.375rem; font-size: clamp(2.125rem, 4.2vw, 3.5rem); line-height: 1.1; letter-spacing: -.032em; }
.history-page h3 { margin: 0 0 .75rem; font-size: clamp(1.3125rem, 1.7vw, 1.5625rem); line-height: 1.24; letter-spacing: -.018em; }
.history-page p { margin: 0 0 1.125rem; font-size: clamp(1.0625rem, 1.15vw, 1.1875rem); line-height: 1.68; }
.history-page p:last-child { margin-bottom: 0; }

.history-story { padding-block: clamp(2.25rem, 5.5vw, 4.5rem) var(--history-space); }
.history-intro { max-width: 54rem; margin: 0 auto clamp(3rem, 6vw, 5rem); text-align: center; }
.history-intro p:not(.history-eyebrow) { color: var(--muted); font-size: clamp(1.125rem, 1.4vw, 1.25rem); }

/* Timeline: a centre line with a red fill that follows the reader down the page.
   Phones keep the line at the left with each card and photo stacked beside it.
   Without JavaScript the line is fully red and every milestone is filled in. */
.history-timeline { --history-axis: 1.25rem; --history-progress: 1; position: relative; max-width: 80rem; margin: 0 auto; padding: 0; list-style: none; }
.history-timeline::before, .history-timeline::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--history-axis); width: 4px; border-radius: 2px; transform: translateX(-50%); }
.history-timeline::before { background: var(--history-line); }
.history-timeline::after { background: linear-gradient(180deg, #e2425e 0%, var(--accent) 100%); transform: translateX(-50%) scaleY(var(--history-progress)); transform-origin: top; }
.history-event { position: relative; display: grid; grid-template-columns: calc(var(--history-axis) * 2) minmax(0, 1fr); column-gap: 1.25rem; row-gap: 1.25rem; padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.history-event:first-child { padding-top: 0; }
.history-event:last-child { padding-bottom: 0; }
.history-card { grid-column: 2; grid-row: 1; min-width: 0; padding: clamp(1.5rem, 2.6vw, 2.5rem); border-top: 4px solid var(--accent); background: #fff; box-shadow: 0 18px 44px rgb(18 22 42 / .09); }
.history-media { grid-column: 2; grid-row: 2; min-width: 0; overflow: hidden; }
.history-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.history-media .history-media-wide { aspect-ratio: 16 / 9; }
.history-marker { position: absolute; z-index: 1; top: calc(clamp(1.5rem, 3vw, 2.5rem) + 2.25rem); left: var(--history-axis); width: 1.75rem; height: 1.75rem; border: 4px solid var(--accent); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px rgb(203 25 57 / .16); transform: translate(-50%, -50%); transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.history-event:first-child .history-marker { top: 2.25rem; }
.history-year { display: block; margin-bottom: .5rem; color: var(--accent); font-size: clamp(2.75rem, 6vw, 4.75rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; transition: color .4s ease; }
.history-title { display: block; }

/* Once the script runs, milestones start outlined and fill in as they are reached. */
.history-live .history-marker:not(.is-reached) { border-color: #b8c0d2; background: #fff; box-shadow: none; }
@supports (-webkit-text-stroke: 1px black) {
  .history-live .history-event:not(.is-reached) .history-year { color: transparent; -webkit-text-stroke: 2px var(--accent); }
}
@media (prefers-reduced-motion: no-preference) {
  .history-live .history-card, .history-live .history-media { transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
  .history-live .history-event:not(.is-visible) .history-card, .history-live .history-event:not(.is-visible) .history-media { opacity: 0; transform: translateY(2rem); }
  .history-live .history-event:not(.is-visible) .history-media { transition-delay: .12s; }
}
@media (hover: hover) and (pointer: fine) {
  .history-media:hover img { transform: scale(1.04); }
}

/* Mission and values on deep navy: a left-aligned statement, vision and purpose,
   three photo cards fading into brand blue, then the approach on the blue-pattern panel. */
.history-mission { --mission-blue: rgb(1, 51, 161); --mission-sky: #5aa9ec; padding-block: var(--history-space); background: #0e1d3f; color: #fff; }
.history-mission .history-wrap { max-width: 84rem; }
.history-mission .history-eyebrow { color: #fff; }
.history-mission h2, .history-mission h3 { color: #fff; }
.history-mission p:not(.history-eyebrow) { color: rgb(255 255 255 / .84); }
.history-mission-intro { max-width: 62rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.history-mission .history-mission-intro h2 { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); color: var(--mission-sky); font-size: clamp(2.75rem, 6.4vw, 5.5rem); font-weight: 400; line-height: 1.05; letter-spacing: -.03em; }
.history-mission-intro p:not(.history-eyebrow) { color: #fff; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.45; }
.history-mission-statements { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.history-statement { min-width: 0; padding-top: 1.25rem; border-top: 2px solid var(--mission-sky); }
.history-principles { margin-top: clamp(3rem, 6vw, 5rem); }
.history-principles > p { max-width: 48rem; }
.history-pillars { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2vw, 2rem); margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; list-style: none; }
.history-pillar { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-width: 0; min-height: 26rem; overflow: hidden; border-radius: 6px; background: var(--mission-blue); box-shadow: 0 24px 50px rgb(0 0 0 / .28); }
.history-pillar img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .5s ease; }
.history-pillar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(1 51 161 / .12) 0%, rgb(1 51 161 / .55) 40%, rgb(1 51 161 / .94) 72%, var(--mission-blue) 100%); }
.history-pillar-body { padding: clamp(1.75rem, 3vw, 2.75rem); }
.history-mission .history-pillar h3 { margin-bottom: .875rem; font-size: clamp(1.875rem, 2.6vw, 2.375rem); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; }
.history-mission .history-pillar p { color: #fff; }
.history-approach { position: relative; margin-top: clamp(3rem, 6vw, 5rem); padding: clamp(2.5rem, 7vw, 6.5rem) clamp(1.5rem, 7vw, 6.5rem); overflow: hidden; border-radius: 6px; background: var(--mission-blue) url("../images/blue-bg.jpg") center / cover no-repeat; }
.history-approach > * { max-width: 44rem; }
.history-mission .history-approach h3 { margin-bottom: clamp(1.25rem, 3vw, 2.25rem); font-size: clamp(2.125rem, 4.2vw, 3.5rem); font-weight: 400; line-height: 1.12; letter-spacing: -.03em; }
.history-mission .history-approach p { color: #fff; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.55; }
.history-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.history-pill { display: inline-flex; align-items: center; justify-content: center; gap: .875rem; min-height: 60px; padding: .625rem .75rem .625rem 1.75rem; border: 2px solid #fff; border-radius: 999px; background: #fff; box-shadow: 0 14px 30px rgb(4 18 66 / .35); color: var(--mission-blue); font-size: 1.0625rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.history-pill svg { flex: none; width: 2.5rem; height: 2.5rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.history-pill-outline { background: transparent; box-shadow: none; color: #fff; }
@media (hover: hover) and (pointer: fine) {
  /* Blur the photo on hover; the slight scale hides the soft blurred edges. */
  .history-pillar:hover img { filter: blur(8px); transform: scale(1.08); }
  .history-pill:hover { background: var(--mission-blue); color: #fff; }
  .history-pill-outline:hover { background: #fff; color: var(--mission-blue); }
  .history-pill:hover svg { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .history-media img, .history-marker, .history-year, .history-pillar img, .history-pill, .history-pill svg { transition: none; }
}
@media (max-width: 39.999rem) {
  .history-pill { flex: 1 1 100%; justify-content: space-between; padding-left: 1.5rem; font-size: 1rem; letter-spacing: .05em; }
}
@media (min-width: 64rem) {
  /* Alternate sides: card and photo swap across the centre line each step. */
  .history-timeline { --history-axis: 50%; }
  .history-event { grid-template-columns: minmax(0, 1fr) clamp(4rem, 7vw, 7rem) minmax(0, 1fr); column-gap: 0; align-items: center; }
  .history-card, .history-media { grid-row: 1; }
  .history-card { grid-column: 1; }
  .history-media { grid-column: 3; }
  .history-event:nth-child(even) .history-card { grid-column: 3; }
  .history-event:nth-child(even) .history-media { grid-column: 1; }
  .history-marker, .history-event:first-child .history-marker { top: 50%; }
  .history-event:first-child .history-marker { top: calc(50% - clamp(1.5rem, 3vw, 2.5rem) / 2); }
  .history-event:last-child .history-marker { top: calc(50% + clamp(1.5rem, 3vw, 2.5rem) / 2); }
  .history-media img { aspect-ratio: 4 / 3; }
  .history-mission-statements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .history-pillar { min-height: clamp(32rem, 40vw, 38rem); }
}
/* Side-by-side cards share row tracks, so every heading and paragraph starts at the same height. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 64rem) {
    .history-pillars { grid-template-rows: minmax(clamp(17rem, 24vw, 23rem), 1fr) auto auto; row-gap: 0; }
    .history-pillar { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-items: start; min-height: 0; }
    .history-pillar-body { display: contents; }
    .history-pillar h3, .history-pillar p { padding-inline: clamp(1.75rem, 3vw, 2.75rem); }
    .history-mission .history-pillar h3 { grid-row: 2; }
    .history-pillar p { grid-row: 3; padding-bottom: clamp(1.75rem, 3vw, 2.75rem); }
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 64rem) {
  .history-live .history-event:not(.is-visible) .history-card { transform: translateX(-3rem); }
  .history-live .history-event:not(.is-visible) .history-media { transform: translateX(3rem); }
  .history-live .history-event:nth-child(even):not(.is-visible) .history-card { transform: translateX(3rem); }
  .history-live .history-event:nth-child(even):not(.is-visible) .history-media { transform: translateX(-3rem); }
}