/****** FILE: themes/gamry/css/pages/AboutPage.css *****/
/* ===================================================================
   ABOUT US (design_handoff_about_and_primer, 2026-08)

   Tokens are the site's; the two the handoff adds beyond redesign.css are
   --gm-ghost (the oversized chapter numerals) and --gm-tint-border.
   =================================================================== */
.rd-ab {
	--gm-sky:         #7bb8dd;
	--gm-ghost:       #eaeff2;
	--gm-tint:        #f4f8fa;
	--gm-tint-border: #cfe0ea;
	--gm-ondark:      #c3d3de;
	font-family: 'IBM Plex Sans', sans-serif;
	color: var(--gm-ink, #17242b);
	background: #fff;
}
.rd-ab, .rd-ab * { box-sizing: border-box; }

/* Content cap and gutter for every band */
.rd-ab-hero,
.rd-ab-firsts-inner,
.rd-ab-mosaic-sect,
.rd-ab-record-sect,
.rd-ab-life-inner,
.rd-ab-next { max-width: 1440px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }

.rd-ab-kicker {
	font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--gm-navy, #003e69); margin-bottom: 14px;
}
.rd-ab-h2 {
	margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(28px, 3vw, 36px);
	font-weight: 700; letter-spacing: -0.028em; line-height: 1.08;
}
.rd-ab-h2--sm { font-size: clamp(24px, 2.6vw, 29px); letter-spacing: -0.024em; line-height: 1.12; }
.rd-ab-sect-head {
	display: flex; flex-wrap: wrap; gap: 16px 40px;
	align-items: flex-end; justify-content: space-between; margin-bottom: 34px;
}
.rd-ab-sect-head--tight { margin-bottom: 8px; }
.rd-ab-sect-note { margin: 0; max-width: 26em; font-size: 16px; line-height: 1.6; color: var(--gm-muted, #5f6b72); }

/* ---- 2. hero ---- */
.rd-ab-hero { padding-top: 40px; }
.rd-ab .rd-breadcrumb { margin-bottom: 34px; }
.rd-ab-hero-grid { display: flex; flex-wrap: wrap; gap: 52px 64px; align-items: flex-start; padding-bottom: 52px; }
/* min-width floors rather than fixed side columns, so the pair stacks below
   ~1000px instead of crushing its text */
.rd-ab-hero-copy  { flex: 1 1 620px; min-width: min(100%, 620px); }
.rd-ab-h1 {
	margin: 0 0 24px; font-family: 'Space Grotesk', sans-serif;
	font-size: clamp(38px, 4.2vw, 58px); font-weight: 700;
	letter-spacing: -0.032em; line-height: 1.02; text-wrap: pretty;
}
.rd-ab-lede  { margin: 0 0 20px; max-width: 32em; font-size: 19.5px; line-height: 1.6; color: var(--gm-body, #47535b); text-wrap: pretty; }
.rd-ab-lede2 { margin: 0; max-width: 32em; font-size: 17px; line-height: 1.64; color: var(--gm-muted, #5f6b72); text-wrap: pretty; }

.rd-ab-glance { flex: 1 1 360px; min-width: min(100%, 360px); border-top: 2px solid var(--gm-navy, #003e69); padding-top: 22px; }
.rd-ab-glance-label {
	font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--gm-faint, #8a969c); margin-bottom: 6px;
}
.rd-ab-glance-row {
	display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
	padding: 15px 0; border-bottom: 1px solid var(--gm-border-soft, #eef1f2);
}
.rd-ab-glance-k { font-size: 15px; color: var(--gm-muted, #5f6b72); }
.rd-ab-glance-v { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -0.016em; text-align: right; }

/* ---- 3. industry firsts ---- */
.rd-ab-firsts { background: var(--gm-navy, #003e69); }
.rd-ab-firsts-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; padding-top: 22px; padding-bottom: 22px; }
.rd-ab-firsts-label {
	font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.15em;
	text-transform: uppercase; color: var(--gm-sky); white-space: nowrap;
}
.rd-ab-first { display: flex; align-items: center; gap: 14px; font-size: 15px; color: #fff; }
.rd-ab-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gm-sky); flex: 0 0 auto; }

/* ---- 4. mosaic ---- */
.rd-ab-mosaic-sect { padding-top: 64px; }
.rd-ab-mosaic { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.rd-ab-tile { border-radius: 14px; padding: 30px 30px 28px; flex-grow: 1; flex-shrink: 1; }
.rd-ab-tile--lead  { background: var(--gm-ink, #17242b); color: #fff; }
.rd-ab-tile--tint  { background: var(--gm-tint); border: 1px solid var(--gm-border, #e6eaec); }
.rd-ab-tile--quiet { background: var(--gm-bg, #fbfbfa); border: 1px solid var(--gm-border, #e6eaec); }
.rd-ab-tile-num {
	font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.13em;
	text-transform: uppercase; margin-bottom: 14px; color: var(--gm-faint, #8a969c);
}
.rd-ab-tile--lead .rd-ab-tile-num { color: var(--gm-sky); }
.rd-ab-tile-title {
	margin: 0 0 10px; font-family: 'Space Grotesk', sans-serif; font-weight: 600;
	letter-spacing: -0.018em; line-height: 1.2; font-size: 19.5px;
}
.rd-ab-tile-body { margin: 0; max-width: 34em; font-size: 15.5px; line-height: 1.58; color: var(--gm-body, #47535b); text-wrap: pretty; }
.rd-ab-tile--lead .rd-ab-tile-body { color: var(--gm-ondark); }
/* Per-tile title sizes from the handoff's table, keyed off the weight class */
.rd-ab-tile--lead .rd-ab-tile-title { font-size: clamp(24px, 2.6vw, 30px); }
.rd-ab-tile[style*="48%"] .rd-ab-tile-title { font-size: 22px; }
.rd-ab-tile[style*="34%"] .rd-ab-tile-title { font-size: 21px; }

.rd-ab-figure {
	margin: 24px 0 0; border-radius: 10px; background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.12); padding: 18px 18px 12px;
}
.rd-ab-figure-cap {
	display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
	justify-content: space-between; margin-bottom: 6px;
}
.rd-ab-figure-what { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gm-sky); }
.rd-ab-figure-warn { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #7d909c; }
.rd-ab-figure svg { display: block; width: 100%; height: auto; }

/* ---- 5. the record ---- */
.rd-ab-record-sect { margin-top: 60px; }
.rd-ab-record {
	display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start;
	padding: 60px 0 20px; border-top: 1px solid var(--gm-border, #e6eaec);
}
/* The fixed 210px track holds the pair on one row down to ~650px. The solid
   white fill + z-index matter: if it does stack, the sticky layer must not
   collide with the chapter text beneath it (that collision shipped once, and it
   is invisible in DOM screenshots — it only shows in a real browser). */
.rd-ab-index { flex: 0 0 210px; max-width: 210px; position: sticky; top: 28px; z-index: 2; background: #fff; }
.rd-ab-index-label {
	font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--gm-faint, #8a969c); margin-bottom: 14px;
}
.rd-ab-index-links { display: flex; flex-direction: column; }
.rd-ab-index-links a {
	display: flex; gap: 12px; padding: 9px 0;
	border-top: 1px solid var(--gm-border-soft, #eef1f2);
	font-size: 14.5px; color: var(--gm-body, #47535b);
}
.rd-ab-index-links a:hover { color: var(--gm-navy, #003e69); }
.rd-ab-index-num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--gm-faint, #8a969c); }

.rd-ab-chapters { flex: 1 1 380px; min-width: min(100%, 380px); }
.rd-ab-chapter { padding: 0 0 44px; }
.rd-ab-chapter [id], .rd-ab-chapter { scroll-margin-top: 28px; }
/* No overflow:hidden here — it clips the ghost numeral's tops. */
.rd-ab-chapter-head { position: relative; padding: 0 0 16px; border-bottom: 2px solid var(--gm-navy, #003e69); }
.rd-ab-ghost {
	position: absolute; right: 0; bottom: 14px;
	font-family: 'Space Grotesk', sans-serif; font-size: 92px; font-weight: 700;
	letter-spacing: -0.05em; line-height: 1; color: var(--gm-ghost);
}
.rd-ab-chapter-titlerow { position: relative; display: flex; align-items: baseline; gap: 16px; }
.rd-ab-chapter-num { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 0.1em; color: var(--gm-navy, #003e69); }
.rd-ab-chapter-h2 {
	margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(23px, 2.4vw, 27px);
	font-weight: 700; letter-spacing: -0.022em; line-height: 1.14;
}
.rd-ab-chapter-kicker {
	position: relative; margin-top: 8px; font-family: 'IBM Plex Mono', monospace;
	font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gm-faint, #8a969c);
}
.rd-ab-row {
	display: grid; grid-template-columns: minmax(110px, 188px) minmax(0, 1fr); gap: 28px;
	padding: 20px 0; border-bottom: 1px solid var(--gm-border-soft, #eef1f2); align-items: start;
}
.rd-ab-row-label {
	font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--gm-navy, #003e69); padding-top: 4px;
}
.rd-ab-row-body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--gm-body, #47535b); text-wrap: pretty; }

.rd-ab-quote { margin: 26px 0 0; background: var(--gm-navy, #003e69); border-radius: 14px; padding: 32px 34px 30px; }
.rd-ab-quote-eyebrow {
	font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--gm-sky); margin-bottom: 14px;
}
.rd-ab-quote-text {
	margin: 0 0 14px; max-width: 30em; font-family: 'Space Grotesk', sans-serif;
	font-size: clamp(21px, 2.2vw, 25px); font-weight: 600; letter-spacing: -0.018em;
	line-height: 1.3; color: #fff; text-wrap: pretty;
}
.rd-ab-quote-by { font-size: 14.5px; color: var(--gm-ondark); }

.rd-ab-map { margin-top: 22px; border: 1px solid var(--gm-border, #e6eaec); border-radius: 12px; overflow: hidden; }
/* aspect-ratio is deliberate: the SVG's rendered height comes from its width via
   the viewBox, so a fixed pixel height fixes one viewport and breaks another. */
.rd-ab-map iframe { display: block; width: 100%; aspect-ratio: 900 / 408; height: auto; border: 0; }

/* ---- 6. life teaser ---- */
.rd-ab-life { background: var(--gm-bg, #fbfbfa); border-top: 1px solid var(--gm-border, #e6eaec); }
.rd-ab-life-inner { padding-top: 56px; padding-bottom: 56px; }
.rd-ab-life-more { font-family: 'Space Grotesk', sans-serif; font-size: 15.5px; font-weight: 600; color: var(--gm-navy, #003e69); white-space: nowrap; }
.rd-ab-life-row {
	display: grid; grid-template-columns: 52px minmax(120px, 220px) minmax(0, 1fr);
	gap: 12px 26px; align-items: baseline; padding: 20px 0;
	border-bottom: 1px solid var(--gm-border, #e6eaec); color: var(--gm-ink, #17242b);
}
/* No :hover here on purpose. The rows stopped being links — a colour change on
   hover is a click affordance, and promising one on text that does nothing is
   worse than the repetition it replaced. "Read the explainer" is the only link. */
.rd-ab-life-num   { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.1em; color: var(--gm-faint, #8a969c); }
.rd-ab-life-title { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -0.016em; }
.rd-ab-life-body  { font-size: 15.5px; line-height: 1.55; color: var(--gm-muted, #5f6b72); }

/* ---- 7. next steps ---- */
.rd-ab-next { padding-top: 56px; padding-bottom: 70px; display: flex; flex-wrap: wrap; gap: 20px; }
.rd-ab-next-card {
	flex: 1 1 380px; min-width: min(100%, 380px);
	border: 1px solid var(--gm-border, #e6eaec); border-radius: 14px; padding: 30px 30px 28px;
}
.rd-ab-next-card:hover { border-color: var(--gm-navy, #003e69); }
.rd-ab-next-label {
	font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.13em;
	text-transform: uppercase; color: var(--gm-faint, #8a969c); margin-bottom: 12px;
}
.rd-ab-next-title {
	margin: 0 0 9px; font-family: 'Space Grotesk', sans-serif; font-size: 22px;
	font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; color: var(--gm-ink, #17242b);
}
.rd-ab-next-body { margin: 0 0 14px; font-size: 15.5px; line-height: 1.58; color: var(--gm-body, #47535b); }
.rd-ab-next-cta {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; color: var(--gm-navy, #003e69);
}

@media (max-width: 700px) {
	.rd-ab-hero, .rd-ab-firsts-inner, .rd-ab-mosaic-sect,
	.rd-ab-record-sect, .rd-ab-life-inner, .rd-ab-next { padding-left: 24px; padding-right: 24px; }
	.rd-ab-record { gap: 32px; }
	.rd-ab-ghost { font-size: 68px; }
	.rd-ab-row { grid-template-columns: 1fr; gap: 6px; }
	.rd-ab-life-row { grid-template-columns: 34px 1fr; }
	.rd-ab-life-body { grid-column: 2; }
}