/* About keeps the reference composition and uses the site's shared design tokens. */
.about-page main { max-width: var(--wrap); margin-inline: auto; padding: 6rem clamp(1.25rem,4vw,3rem) 0; overflow-wrap: anywhere; }
.about-page h2 { text-wrap: balance; }
.about-page .nav-shell { container-type: inline-size; }
.about-page .page-hero { position: relative; isolation: isolate; min-height: 580px; padding: 56px clamp(24px,4vw,56px) 128px; border-radius: var(--r-card); color: #fff; background: var(--char); }
.about-hero-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.about-page .page-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(10,18,23,.88),rgba(10,18,23,.24) 72%),linear-gradient(0deg,rgba(10,18,23,.72),transparent 50%); border-radius: inherit; }
.about-page .page-hero h1 { max-width: 17ch; color: #fff; font-size: var(--t-h1); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; text-transform: none; }
.about-page .page-hero .lede { color: #e3e5e4; font-size: var(--t-md); max-width: 43ch; }
.about-meta { display: flex; justify-content: space-between; gap: 1rem; padding-top: var(--s-4); font-size: var(--t-xs); color: var(--ink-mute); }
.about-meta a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; min-height: 30px; }
.about-section { margin-block: var(--s-24); }
.about-intro-grid { display: grid; grid-template-columns: minmax(0,1fr) repeat(2,minmax(0,1.12fr)); gap: var(--s-6); align-items: start; }
.about-intro-copy { min-height: 440px; padding: 8px 16px 0 0; display: flex; flex-direction: column; align-items: flex-start; }
.about-intro-copy > p:not(.label) { max-width: 29ch; color: var(--ink-mute); margin-top: var(--s-6); }
.about-intro-copy h2 { margin-top: auto; padding-top: var(--s-12); }
.about-intro-copy .btn { margin-top: var(--s-6); }
.about-arrow { width: 32px; height: 32px; flex: none; display: inline-grid; place-items: center; background: var(--bg); color: var(--ink); border-radius: 50%; }
.about-arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; transition: transform .2s ease-out; }
.about-page a:hover .about-arrow svg { transform: translate(2px,-2px); }
.about-visual-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 8rem; min-height: 500px; padding: var(--s-6); border-radius: var(--r-card); overflow: hidden; color: #fff; background: var(--char); }
.about-visual-card:last-child { min-height: 450px; }
.about-visual-card > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease-out; }
.about-visual-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,rgba(12,16,16,.76),rgba(12,16,16,.04) 42%,rgba(12,16,16,.9)); }
.about-visual-card:hover > img { transform: scale(1.035); }
.about-visual-card h3 { max-width: 14ch; }
.about-visual-card .label { color: #fff; margin-top: var(--s-3); letter-spacing: .1em; }
.about-visual-bottom { position: relative; z-index: 1; padding-bottom: 8px; }
.about-visual-bottom p { max-width: 24ch; font-size: var(--t-sm); color: #fff; margin-bottom: var(--s-6); }
.about-visual-bottom > span { display: inline-flex; align-items: center; gap: .8rem; font-size: var(--t-sm); }
.about-card-number { position: absolute; right: 0; bottom: -15px; z-index: -1; font-family: var(--font-display); font-size: 6rem; font-weight: 400; line-height: 1; letter-spacing: -.02em; color: #fff; opacity: .2; }
.about-company { padding-block: var(--s-16) 0; border-top: 1px solid var(--line); }
.about-company h2 { max-width: 34ch; margin-inline: auto; text-align: center; line-height: 1.18; }
.about-company h2 span { color: var(--ink-mute); }
.about-company-media { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: var(--s-12); margin-top: var(--s-12); align-items: center; }
.about-page .anniv { width: 100%; max-width: 648px; margin: 0; justify-self: center; }
.about-page .anniv img { width: 100%; height: auto; border-radius: 16px; box-shadow: none; }
.about-page .anniv figcaption { margin-top: var(--s-3); color: var(--ink-mute); font-size: var(--t-xs); }
.about-philosophy { display: flex; flex-direction: column; align-items: flex-start; padding-left: var(--s-8); border-left: 1px solid var(--line); }
.about-philosophy h3 { font-size: var(--t-h2); font-weight: 400; margin-block: var(--s-6); }
.about-philosophy > p:not(.label) { font-size: var(--t-sm); color: var(--ink-mute); }
.about-philosophy a { display: inline-flex; align-items: center; gap: 1rem; min-height: 48px; font-size: var(--t-sm); margin-top: var(--s-6); }
.about-philosophy .about-arrow { border: 1px solid var(--line); }
/* the four numbers in a 2 by 2 grid, each number beside its label. A subgrid gives each column of the grid one number width
   (its widest number), so the labels of a column start together; a hairline between the columns and under each row */
.about-page .stats { display: grid; grid-template-columns: max-content minmax(0,1fr) max-content minmax(0,1fr); gap: 0; padding: 0; border-radius: 0; border-top: 1px solid var(--line); background: var(--bg); container-type: inline-size; }
.about-page .stat { grid-column: span 2; display: grid; grid-template-columns: subgrid; align-items: center; column-gap: var(--s-8); padding: var(--s-12) var(--s-12) var(--s-12) 0; border: 0; border-bottom: 1px solid var(--line); background: var(--bg); }
.about-page .stat:nth-child(even) { padding: var(--s-12) 0 var(--s-12) var(--s-12); border-left: 1px solid var(--line); }
.about-page .stat .n { grid-column: 1; grid-row: 1; font-size: clamp(2.75rem,4.5vw,4rem); font-weight: 400; letter-spacing: -.02em; line-height: 1; }
.about-page .stat .d { grid-column: 2; grid-row: 1; min-width: 0; max-width: 30ch; color: var(--ink-mute); }
.about-page .lead-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-12); align-items: start; }
.about-page .lead-copy { display: flex; flex-direction: column; align-items: flex-start; }
.about-page .lead-copy > p:not(.label) { color: var(--ink-mute); max-width: 38ch; margin-top: var(--s-6); }
.about-page .lead-copy .label { margin: 0; }
.about-page .lead-copy h2 { padding-top: var(--s-12); max-width: 18ch; }
.about-page .lead-photo { min-height: 560px; margin: 0; background: var(--char); }
.about-page .lead-photo > img { object-position: center; }
/* Trust panels: a card trigger that opens a centered overlay (see about.js). */
.about-panel-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 72px; margin: 0; padding: 0 var(--s-2) 0 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; font-size: var(--t-md); font-weight: 500; text-align: left; cursor: pointer; }
.lead-copy > .about-panel-trigger { margin-top: var(--s-6); border-top: 1px solid var(--line); }
.about-panel-glyph { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); transition: background-color .2s, color .2s, border-color .2s; }
.about-panel-glyph svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.about-panel-trigger:hover .about-panel-glyph, .about-panel-trigger:focus-visible .about-panel-glyph { background: var(--char); border-color: var(--char); color: #fff; }

/* Letter disclosures inside the overlay keep the native + toggle. The sign is a drawing the size of the circle's inside,
   so it sits on the centre and turns about it; a typed + sits where its font puts it, below the middle on Windows.
   Its stroke is --ink closed and white open. */
.about-page summary { cursor: pointer; list-style: none; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-right: var(--s-2); }
.about-page summary::-webkit-details-marker { display: none; }
.about-page summary::after { content: ""; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 8.5v11M8.5 14h11' fill='none' stroke='%23171717' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% no-repeat; flex: none; transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .2s; }
.about-page details[open] > summary::after { transform: rotate(45deg); background-color: var(--char); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 8.5v11M8.5 14h11' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E"); border-color: var(--char); }

/* Centered overlay opened from a trust panel. */
.about-modal { width: min(920px, 92vw); max-height: 86vh; margin: auto; padding: 0; border: 0; border-radius: var(--r-card); background: var(--bg); color: var(--ink); overflow: hidden; opacity: 0; transform: scale(.96); transition: opacity .22s ease-out, transform .26s cubic-bezier(.22,1,.36,1); }
.about-modal[open] { display: flex; }
.about-modal.is-open { opacity: 1; transform: none; }
.about-modal::backdrop { background: rgba(10,18,23,.55); }
.about-modal-inner { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: clamp(1.5rem, 4vw, 2.5rem); }
.about-modal-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.about-modal-title { font-size: clamp(1.15rem, 2.5vw, 1.4rem); font-weight: 500; }
.about-modal-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -6px 0 0; background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.about-modal-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.about-modal-close:hover, .about-modal-close:focus-visible { background: var(--char); border-color: var(--char); color: #fff; }
.about-modal-body { flex: 1; min-height: 0; overflow-y: auto; margin-top: var(--s-4); }
.about-modal-body img { max-width: 100%; height: auto; }
html.about-modal-open { overflow: hidden; padding-right: var(--about-sbw, 0px); }   /* lock the page, keep the scrollbar gutter so nothing shifts */
html.about-modal-open .nav-shell { inset-inline-end: var(--about-sbw, 0px); }        /* the fixed nav is not moved by root padding: pull its right edge in by the same amount */
@media (prefers-reduced-motion: reduce) { .about-modal { opacity: 1; transform: none; transition: none; } }
.about-steps { padding: 1rem 0 0; margin: 0; list-style: none; }
.about-steps li { display: grid; grid-template-columns: 1.5rem minmax(0,1fr); gap: var(--s-3); padding-block: var(--s-4); border-top: 1px solid var(--line); }
.about-steps .mnum { font-size: var(--t-xs); color: var(--ink-mute); }
.about-steps h3 { font-size: var(--t-md); }
.about-steps p { font-size: var(--t-sm); color: var(--ink-mute); margin-top: var(--s-2); }
.about-records { width: 100%; margin: 0; }
.about-page .awards-list { margin-top: var(--s-4); }
.about-page .awards-list li { grid-template-columns: 2.5rem minmax(0,1fr); font-size: var(--t-sm); padding-block: var(--s-4); }
.about-page .awards-list .y { color: var(--ink-mute); letter-spacing: 0; }
.about-page .awards-photo { margin: var(--s-6) 0 0; padding: 0; background: transparent; }
.about-page .awards-photo figcaption { font-size: var(--t-xs); margin-bottom: var(--s-4); }
.about-page .letters { display: block; margin-top: var(--s-4); }
.about-page .letter { padding: var(--s-6) 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; gap: var(--s-4); }
.about-page .letter blockquote { font-family: var(--font-body); font-style: normal; font-size: var(--t-md); line-height: 1.6; }
.about-page .letter summary { font-size: var(--t-sm); }
.about-page .letter details blockquote { margin-block: var(--s-4); }
.about-page .letter-who { font-size: var(--t-sm); }
.about-page .letter-who .role { color: var(--ink-mute); }
.about-page .page-hero :focus-visible { outline-color: #fff; }
@media (max-width:1000px) {
  .about-intro-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .about-intro-copy { grid-column: 1 / -1; min-height: 0; padding: 0 0 var(--s-4); }
  .about-intro-copy > p:not(.label) { max-width: 50ch; }
  .about-intro-copy h2 { padding-top: var(--s-8); max-width: 18ch; }
  .about-company-media { gap: var(--s-6); }
  .about-philosophy { padding-left: var(--s-6); }
  .about-page .lead-split { gap: var(--s-6); }
}
@media (max-width:760px) {
  .about-page .page-hero { min-height: 580px; padding: var(--s-8) var(--s-6) 128px; }
  .about-page .page-hero::before { background: linear-gradient(90deg,rgba(10,18,23,.82),rgba(10,18,23,.62)); }
  .about-meta { flex-wrap: wrap; }
  .about-section { margin-block: var(--s-16); }
  .about-company { padding-block: var(--s-12) 0; }
  .about-company-media { grid-template-columns: minmax(0,1fr); gap: var(--s-8); }
  .about-philosophy { padding: var(--s-8) 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .about-page .stat { gap: var(--s-6); }
  .about-page .stat .n { font-size: 2.75rem; }
  .about-page .lead-split { grid-template-columns: minmax(0,1fr); }
  .about-page .lead-photo { min-height: 480px; }
}
@media (max-width:560px) {
  .about-intro-grid { grid-template-columns: minmax(0,1fr); }
  .about-visual-card, .about-visual-card:last-child { min-height: 450px; }
}
@media (prefers-reduced-motion:reduce) { .about-visual-card:hover > img, .about-page a:hover .about-arrow svg { transform: none; } }
/* below 56rem a label in half the width wraps to three lines: one number and its label per row, the numbers in one column */
@container (max-width:56rem) {
  .about-page .stat, .about-page .stat:nth-child(even) { grid-column: 1 / -1; padding: var(--s-8) 0; border-left: 0; }
  .about-page .stat .d { grid-column: 2 / -1; }
}
/* below 30rem a full label and the widest number no longer fit side by side: the number above its label */
@container (max-width:30rem) {
  .about-page .stat, .about-page .stat:nth-child(even) { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .about-page .stat .n { max-width: 100%; overflow-wrap: anywhere; }
}
/* Collapse at the same visual size when the browser's text size is enlarged. */
@container (max-width:64rem) {
  .about-page .nav-links, .about-page .nav-cta { display: none; }
  .about-page .nav-toggle { display: flex; }
  .about-page .nav--light.menu-open .nav-links { display: flex; flex-direction: column; opacity: 1; animation: none; position: absolute; top: calc(100% + 8px); right: 0; width: min(280px,100%); background: var(--bg); padding: var(--s-3); border: 1px solid var(--line); border-radius: 16px; white-space: normal; gap: var(--s-2); }
  .about-page .nav--light.menu-open .nav-links a { width: 100%; padding: var(--s-3); min-height: 44px; opacity: 1; color: var(--ink); }
}
@media print {
  .about-page main { padding-top: 0; }
  .about-page .nav-shell { display: none; }
  .about-page .page-hero { min-height: 0; padding: 32px; }
}