/* About page — page-specific layout. Reuses tokens/components from site.css. */

/* ---------- Hero ---------- */
.ab-hero { position: relative; padding-top: clamp(1rem, .5rem + 2vw, 2.5rem); padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); overflow: clip; }
.ab-hero__grid { display: grid; gap: var(--space-l); align-items: center; }
.ab-hero__copy { position: relative; z-index: 2; }
.crumbs ol { display: flex; gap: .5rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--line-strong); }
.crumbs a { color: var(--ink-2); text-decoration: none; border-radius: 4px; }
.crumbs a:hover { color: var(--blood-700); }
.ab-hero__title {
  font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: var(--fr-display);
  font-size: clamp(2.55rem, 1.05rem + 7.2vw, 7rem); line-height: .95; font-weight: 330; letter-spacing: -0.04em;
  margin-top: var(--space-s);
}
.ab-hero__title .line { display: block; }
.ab-hero__title em { font-style: italic; font-variation-settings: var(--fr-italic); font-weight: 300; color: var(--moss-700); letter-spacing: -0.03em; padding-right: .04em; }
.ab-hero__lead { margin-top: var(--space-l); max-width: 36ch; }
.ab-toc { margin-top: var(--space-xl); max-width: 34rem; }
.ab-toc__label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-bottom: .6rem; border-bottom: 1px solid var(--line-strong); }
.ab-toc ol { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-l); }
.ab-toc li { border-bottom: 1px solid var(--line); }
.ab-toc a { display: flex; align-items: baseline; gap: .75rem; padding: .7rem 0; min-height: 44px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: var(--step--1); border-radius: 4px; transition: color var(--dur-2); }
.ab-toc a span { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); letter-spacing: .06em; font-weight: 400; }
.ab-toc a:hover { color: var(--blood-700); }

.ab-hero__art { position: relative; margin: 0; color: var(--ink); }
.ab-hero__stage { position: relative; aspect-ratio: 1100 / 1210; }
.ab-hero__stage picture { display: block; width: 100%; height: 100%; }
.ab-hero__stage::before { /* soft paper halo behind the bouquet */
  content: ""; position: absolute; inset: 8% 4% 2%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(251 248 242 / .9), rgb(251 248 242 / 0)); z-index: -1;
}
.ab-hero__img { width: 100%; height: 100%; object-fit: contain; }
.ab-hero__tag { display: inline-block; position: static; margin-top: .75rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding: .3rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: rgb(244 239 229 / .8); }
.ab-hero__cap { margin-top: var(--space-s); }

/* mobile: art first, capped and faded into the paper so the headline stays near the fold */
@media (max-width: 47.99em) {
  .ab-hero__art { order: -1; display: grid; justify-items: center; }
  .ab-hero__stage { height: min(36svh, 300px); width: auto; aspect-ratio: 1100 / 1210; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
  .ab-hero__stage::before { display: none; }
  .ab-hero__tag { position: static; margin-top: .25rem; }
  .ab-hero__cap { display: none; }
  .ab-hero__copy .crumbs + .eyebrow { margin-top: var(--space-m); }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .ab-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-l); align-items: start; }
  .ab-hero__title { font-size: clamp(3rem, 1rem + 4.6vw, 4.2rem); }
  .ab-hero__art { margin-top: var(--space-2xl); margin-right: calc(var(--gutter) * -.5); }
}
@media (min-width: 64em) {
  .ab-hero__grid { grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr); gap: var(--grid-gap); min-height: min(calc(100svh - var(--header-h) - 4rem), 820px); }
  .ab-hero__title { margin-right: -4vw; }
  .ab-hero__art { width: min(100%, calc((100svh - var(--header-h) - 6rem) * .842)); justify-self: end; }
  .ab-toc ol { grid-template-columns: repeat(5, auto); column-gap: 1.25rem; }
  .ab-toc li { border-bottom: 0; }
  .ab-toc a { flex-direction: column; gap: .15rem; padding: .75rem 0 0; }
  .ab-toc { max-width: none; }
}
@keyframes ab-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Origin ---------- */
.ab-origin__grid { display: grid; gap: var(--space-2xl) var(--grid-gap); }
@media (min-width: 64em) { .ab-origin__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.chapters { border-top: 1px solid var(--line-strong); }
.chapter { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-s); padding: var(--space-l) 0; border-bottom: 1px solid var(--line-strong); }
@media (min-width: 48em) { .chapter { grid-template-columns: 6.5rem minmax(0, 1fr); padding: var(--space-xl) 0; } }
.chapter__n { font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 0; font-weight: 250; font-size: var(--step-5); line-height: .85; color: var(--blood-700); letter-spacing: -0.02em; }
.chapter__kicker { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.chapter__title { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: var(--fr-display); font-size: var(--step-3); line-height: 1.08; font-weight: 360; letter-spacing: -0.022em; margin-top: .4rem; }
.chapter__title em { font-style: italic; font-variation-settings: var(--fr-italic); }
.chapter__body > p:not(.chapter__kicker) { color: var(--text-2); margin-top: var(--space-s); max-width: 56ch; }
.chapter__body .chapter__aside { font-size: var(--step--1); color: var(--ink-3); padding-top: var(--space-s); border-top: 1px dashed var(--line-strong); max-width: none; }

.ab-origin__aside { display: grid; gap: var(--space-l); }
@media (min-width: 64em) { .ab-origin__aside { position: sticky; top: calc(var(--header-h-condensed) + 2rem); } }
.accred { margin: 0; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); position: relative; }
.accred::before { content: ""; position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem; width: 3px; background: var(--moss-500); border-radius: 0 3px 3px 0; }
.accred__quote p { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: "SOFT" 40, "WONK" 0; font-size: var(--step-2); line-height: 1.22; font-weight: 340; letter-spacing: -0.015em; color: var(--ink); }
.accred__cap { margin-top: var(--space-m); font-size: var(--step--1); color: var(--ink-3); line-height: 1.55; }
.locator { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--space-m); align-items: center; padding: var(--space-m) 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); color: var(--ink-2); }
.locator__svg { grid-row: 1 / span 2; width: 100%; height: auto; }
.locator__place { font-family: var(--font-display); font-variation-settings: var(--fr-display); font-size: var(--step-2); line-height: 1.1; color: var(--ink); align-self: end; }
.locator__coord { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; color: var(--ink-3); align-self: start; margin-top: .25rem; }

/* ---------- Herbarium index ---------- */
.hb-index { display: grid; border-top: 1px solid var(--line-strong); margin-bottom: clamp(3rem, 2rem + 5vw, 7rem); counter-reset: none; }
.hb-index li { border-bottom: 1px solid var(--line-strong); }
.hb-index a { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: .75rem; align-items: baseline; padding: .9rem 0; min-height: 44px; text-decoration: none; color: var(--ink); border-radius: 4px; transition: color var(--dur-2); }
.hb-index__n { grid-row: 1 / span 2; font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 0; font-weight: 300; font-size: var(--step-2); color: var(--moss-700); line-height: 1; }
.hb-index__latin { font-family: var(--font-display); font-style: italic; font-variation-settings: var(--fr-italic); font-size: var(--step-1); line-height: 1.15; }
.hb-index__meta > span { display: block; white-space: nowrap; }
.hb-index__meta > span[aria-hidden] { display: none; }
.hb-index__meta { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: .2rem; }
.hb-index a:hover .hb-index__latin { color: var(--blood-700); }
@media (min-width: 56em) {
  .hb-index { grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line-strong); }
  .hb-index li { border-bottom: 0; }
  .hb-index li + li { border-left: 1px solid var(--line); }
  .hb-index a { grid-template-columns: 1fr; padding: 1.1rem 1rem 1.2rem; height: 100%; align-content: start; row-gap: .35rem; }
  .hb-index li:first-child a { padding-left: 0; }
  .hb-index__n { grid-row: auto; font-size: var(--step-3); }
}

/* ---------- Specimen spreads ---------- */
.specimens { display: grid; gap: clamp(4.5rem, 3rem + 7vw, 10rem); }
.specimen { display: grid; gap: var(--space-xl) var(--grid-gap); align-items: start; scroll-margin-top: calc(var(--header-h-condensed) + 1rem); }
@media (min-width: 56em) {
  .specimen { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .specimen--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .specimen--flip .sheet { order: 2; }
  .specimen__text { position: sticky; top: calc(var(--header-h-condensed) + 3rem); align-self: center; }
}
@media (min-width: 72em) {
  .specimen { grid-template-columns: minmax(0, 6.4fr) minmax(0, 1fr) minmax(0, 4.6fr); }
  .specimen .specimen__text { grid-column: 3; }
  .specimen--flip { grid-template-columns: minmax(0, 4.6fr) minmax(0, 1fr) minmax(0, 6.4fr); }
  .specimen--flip .sheet { grid-column: 3; grid-row: 1; }
  .specimen--flip .specimen__text { grid-column: 1; grid-row: 1; }
}

.sheet { margin: 0; }
.sheet__paper {
  position: relative; aspect-ratio: 600 / 860; container-type: inline-size;
  background-color: var(--raised); border-radius: 3px;
  box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, var(--shadow-3), 0 0 0 1px rgb(27 23 20 / .08);
}
.sheet__paper::before { /* a second sheet beneath, slightly offset */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper-2); border-radius: 3px;
  transform: rotate(1.4deg) translate(6px, 4px); box-shadow: var(--shadow-1), 0 0 0 1px rgb(27 23 20 / .06);
}
.specimen--flip .sheet__paper::before { transform: rotate(-1.2deg) translate(-6px, 5px); }
.sheet__paper::after { /* paper grain over the drawing */
  content: ""; position: absolute; inset: 0; background-image: var(--grain), var(--mottle); background-size: 240px 240px, 600px 600px; opacity: .55; mix-blend-mode: multiply; pointer-events: none; border-radius: inherit;
}
.sheet__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sheet__img > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sheet__a { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); font-family: var(--font-display); font-style: italic; font-variation-settings: var(--fr-italic); font-size: max(13px, 3.4cqi); color: var(--ink); line-height: 1; background: var(--raised); padding: 0 .2em; border-radius: 50%; z-index: 1; }
.sheet__stamp { position: absolute; left: var(--x); top: var(--y); width: 19%; aspect-ratio: 1; color: var(--blood-700); opacity: .5; transform: rotate(var(--r)); mix-blend-mode: multiply; }
.ab-stamp__ring { font-family: var(--font-mono); font-size: 9.2px; letter-spacing: .14em; fill: currentColor; }
.sheet__label {
  position: absolute; right: 4.5%; bottom: 5.5%; top: auto; left: auto; width: 41%; z-index: 1;
  padding: 2.6cqi 3cqi 2.2cqi; background: #FDFBF6; border: 1px solid rgb(27 23 20 / .35);
  box-shadow: 0 1px 2px rgb(52 28 18 / .08); transform: rotate(-.6deg);
}
.sheet__label p { line-height: 1.2; }
.sheet__label-top, .sheet__label-foot { display: flex; justify-content: space-between; gap: .5em; font-family: var(--font-mono); font-size: max(11px, 1.9cqi); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.sheet__label-top { padding-bottom: 1.4cqi; border-bottom: 1px solid rgb(27 23 20 / .3); }
.sheet__label-name { margin-top: 1.8cqi; font-family: var(--font-display); font-variation-settings: var(--fr-text); font-size: max(13px, 3.2cqi); color: var(--ink); }
.sheet__label-name i { font-variation-settings: var(--fr-italic); }
.sheet__label-fam { font-family: var(--font-display); font-variation-settings: var(--fr-text); font-size: max(12px, 2.5cqi); color: var(--ink-2); margin-top: .3cqi; }
.sheet__label-foot { margin-top: 1.8cqi; padding-top: 1.2cqi; border-top: 1px dotted rgb(27 23 20 / .35); color: var(--ink-3); }
.sheet__bar { position: absolute; left: 4.5%; bottom: 3%; display: flex; align-items: center; gap: 0; z-index: 1; }
.sheet__bar i { width: max(12px, 3.6cqi); height: max(8px, 2cqi); }
.sheet__bar i:nth-child(1) { background: var(--ink); } .sheet__bar i:nth-child(2) { background: var(--blood-700); }
.sheet__bar i:nth-child(3) { background: var(--moss-500); } .sheet__bar i:nth-child(4) { background: #C9A57A; } .sheet__bar i:nth-child(5) { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sheet__bar span { margin-left: .6em; font-family: var(--font-mono); font-size: max(11px, 1.8cqi); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sheet .figcap { margin-top: var(--space-m); }
.sheet__paper[data-label="tl"] .sheet__label { left: 4.5%; top: 4%; right: auto; bottom: auto; transform: rotate(.5deg); }
.sheet__paper[data-label="tr"] .sheet__label { right: 3.5%; top: 3.5%; bottom: auto; width: 37%; }
@media (max-width: 29.99em) { /* label becomes a strip under the drawing, so it never covers roots or stems */
  .sheet { --strip: 2.9rem; }
  .sheet__paper .sheet__label, .sheet__paper[data-label] .sheet__label { top: 100%; bottom: auto; left: 0; right: 0; width: auto; transform: none; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; border-top: 0; height: var(--strip); }
  .sheet__label-name { margin: 0; order: 1; font-size: 14px; }
  .sheet__label-top { order: 2; padding: 0; border: 0; }
  .sheet__label-top span:first-child, .sheet__label-fam, .sheet__label-foot, .sheet__bar span { display: none; }
  .sheet .figcap { margin-top: calc(var(--strip) + var(--space-s)); }
  .js .sheet[data-reveal] .sheet__label, .js .sheet[data-reveal].is-in .sheet__label { transform: none; }
}

/* sheet reveal: settles onto the table, the drawing is unveiled upwards, then label and stamp land */
@media (prefers-reduced-motion: no-preference) {
  .js .sheet[data-reveal="sheet"] { opacity: 0; transform: translate3d(0, 34px, 0) rotate(-1.4deg); transition: opacity 1000ms var(--ease-out), transform 1400ms var(--ease-out); }
  .js .specimen--flip .sheet[data-reveal="sheet"] { transform: translate3d(0, 34px, 0) rotate(1.4deg); }
  .js .sheet[data-reveal="sheet"].is-in { opacity: 1; transform: none; }
  .js .sheet[data-reveal] .sheet__img { clip-path: inset(100% 0 0 0); transition: clip-path 2000ms var(--ease-in-out) 250ms; }
  .js .sheet[data-reveal].is-in .sheet__img { clip-path: inset(0 0 0 0); }
  .js .sheet[data-reveal] .sheet__label, .js .sheet[data-reveal] .sheet__a { opacity: 0; transform: translateY(10px) rotate(-.6deg); transition: opacity 700ms var(--ease-out) 1500ms, transform 900ms var(--ease-out) 1500ms; }
  .js .sheet[data-reveal] .sheet__a { transform: translate(-50%, -30%); }
  .js .sheet[data-reveal].is-in .sheet__label { opacity: 1; transform: rotate(-.6deg); }
  .js .sheet[data-reveal].is-in .sheet__a { opacity: 1; transform: translate(-50%, -50%); }
  .js .sheet[data-reveal] .sheet__stamp { opacity: 0; transform: rotate(var(--r)) scale(1.25); transition: opacity 260ms ease-out 1900ms, transform 380ms var(--ease-spring) 1900ms; }
  .js .sheet[data-reveal].is-in .sheet__stamp { opacity: .5; transform: rotate(var(--r)); }
}

.specimen__no { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding-bottom: .75rem; border-bottom: 1px solid var(--line-strong); }
.specimen__latin { margin-top: var(--space-m); font-family: var(--font-display); font-optical-sizing: auto; font-size: var(--step-5); line-height: .98; font-weight: 320; letter-spacing: -0.03em; color: var(--ink); }
.specimen__latin em { font-style: italic; font-variation-settings: var(--fr-italic); }
.specimen__auth { font-family: var(--font-display); font-variation-settings: var(--fr-text); font-size: .38em; letter-spacing: 0; color: var(--ink-3); font-weight: 400; vertical-align: .55em; white-space: nowrap; }
.specimen__common { margin-top: var(--space-s); font-size: var(--step-1); color: var(--ink); font-weight: 500; }
.specimen__fam { font-weight: 400; color: var(--ink-2); }
.specimen__drawn { margin-top: var(--space-m); color: var(--text-2); max-width: 42ch; }
.specimen__data { margin-top: var(--space-l); border-top: 1px solid var(--line-strong); }
.specimen__data > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-s); padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.specimen__data dt { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: .2em; }
.specimen__data dd { color: var(--ink-2); }
@media (max-width: 29.99em) { .specimen__data > div { grid-template-columns: 1fr; gap: .2rem; } }
.hb-note { margin-top: clamp(4rem, 3rem + 5vw, 8rem); max-width: 52rem; }

/* ---------- Timeline (night) ---------- */
.tl-head { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--on-night-2); margin-bottom: var(--space-l); display: flex; align-items: center; gap: .75rem; }
.tl-head::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blood-300); }
.tl-head--open { margin-top: var(--space-2xl); }
.tl-head--open::before { background: none; border: 1.5px dashed var(--on-night-2); }
.tl { position: relative; --p: 1; }
.tl::before, .tl::after { content: ""; position: absolute; left: calc(5rem + 5px); top: .6rem; bottom: 2rem; width: 1px; background: var(--line-night); }
.tl::after { background: linear-gradient(var(--moss-300), var(--blood-300)); transform-origin: top; transform: scaleY(var(--p)); }
.tl__item { position: relative; display: grid; grid-template-columns: 5rem minmax(0, 1fr); column-gap: 2.25rem; padding-bottom: var(--space-xl); }
.tl__item::before { content: ""; position: absolute; left: 5rem; top: .55rem; width: 11px; height: 11px; border-radius: 50%; background: var(--blood-300); box-shadow: 0 0 0 5px var(--night); z-index: 1; }
.tl__year { font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 0; font-weight: 300; font-size: var(--step-2); line-height: 1; letter-spacing: -0.02em; color: var(--on-night); font-variant-numeric: lining-nums tabular-nums; }
.tl__title { font-family: var(--font-display); font-variation-settings: var(--fr-display); font-optical-sizing: auto; font-size: var(--step-2); line-height: 1.15; font-weight: 380; letter-spacing: -0.015em; color: var(--on-night); }
.tl__body p { margin-top: .4rem; color: var(--on-night-2); font-size: var(--step--1); max-width: 54ch; }
@media (max-width: 29.99em) {
  .tl::before, .tl::after { left: calc(4rem + 5px); }
  .tl__item { grid-template-columns: 4rem minmax(0, 1fr); column-gap: 1.6rem; }
  .tl__item::before { left: 4rem; }
}
@media (min-width: 64em) {
  .tl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: var(--grid-gap); }
  .tl::before { display: block; left: 0; right: 0; top: 5px; bottom: auto; width: auto; height: 1px; }
  .tl::after { display: none; }
  .tl__item { grid-row: span 3; display: grid; grid-template-rows: subgrid; grid-template-columns: 1fr; padding: 2.25rem 0 0; row-gap: var(--space-s); }
  .tl__item::before { left: 0; top: 0; }
  .tl__year { font-size: var(--step-5); align-self: end; }
  .tl__body { display: contents; }
  .tl__title { align-self: start; }
  .tl__body p { margin-top: 0; }
}
.tl-open { display: grid; gap: var(--space-s); }
@media (min-width: 48em) { .tl-open { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } }
@media (min-width: 72em) { .tl-open { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tl-open__item { padding: 1.25rem; border: 1.5px dashed rgb(244 238 228 / .28); border-radius: var(--r-md); }
.tl-open__year { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; color: var(--on-night-2); }
.tl-open__title { margin-top: .5rem; font-family: var(--font-display); font-variation-settings: var(--fr-display); font-size: var(--step-1); line-height: 1.2; font-weight: 400; color: var(--on-night); }
.tl-open__item > p:last-child { margin-top: .35rem; font-size: var(--step--1); color: var(--on-night-2); }

/* ---------- Quality ---------- */
.ab-quality__grid { display: grid; gap: var(--space-2xl) var(--grid-gap); align-items: start; }
.nw { white-space: nowrap; }
@media (max-width: 23.4375em) { .nw { white-space: normal; } } /* QA: avoid clipping at 320px */
@media (min-width: 64em) {
  .ab-quality__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
}
.coa { margin: 0; background: rgb(255 255 255 / .6); border: 1px solid rgb(62 74 82 / .2); border-radius: var(--r-lg); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.coa::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: repeating-linear-gradient(90deg, var(--slate-700) 0 2px, transparent 2px 6px); opacity: .35; }
.coa__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid rgb(62 74 82 / .3); }
.coa__kicker { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--slate-700); font-weight: 500; }
.coa__src { font-size: var(--step--1); color: var(--slate-700); }
.coa__table { width: 100%; border-collapse: collapse; margin-top: .25rem; }
.coa__table thead th { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-700); font-weight: 500; text-align: left; padding: .75rem 0 .5rem; }
.coa__table thead th:last-child, .coa__table td { text-align: right; }
.coa__table tbody th, .coa__table td { padding: .85rem 0; border-top: 1px solid rgb(62 74 82 / .16); }
.coa__table tbody th { text-align: left; font-weight: 550; color: var(--ink); font-size: var(--step-0); }
.coa__table tbody th span { display: block; font-family: var(--font-mono); font-size: .75rem; font-weight: 400; letter-spacing: .06em; color: var(--slate-700); margin-top: .15rem; }
.coa__neg { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--moss-700); font-weight: 500; }
.coa__neg::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--moss-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%2334493B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.coa__foot { margin-top: var(--space-m); padding-top: var(--space-s); border-top: 1px dashed rgb(62 74 82 / .3); font-size: var(--step--1); color: var(--slate-700); }

.process__title, .certs__title { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--slate-700); padding-bottom: .9rem; border-bottom: 1px solid rgb(62 74 82 / .3); }
.process__list { display: grid; grid-template-columns: 1fr; counter-reset: none; }
@media (min-width: 40em) { .process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); } }
@media (min-width: 72em) { .process__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.process__step { position: relative; padding: var(--space-m) 0; border-bottom: 1px solid rgb(62 74 82 / .16); }
.process__step p:not(.process__n) { margin-top: .35rem; font-size: var(--step--1); color: var(--ink-2); line-height: 1.55; }
.process__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(62 74 82 / .3); color: var(--slate-700); background: rgb(255 255 255 / .5); }
.process__ico svg { width: 22px; height: 22px; }
.process__n { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; color: var(--slate-700); margin-top: var(--space-s); }
.process__name { font-family: var(--font-display); font-variation-settings: var(--fr-display); font-optical-sizing: auto; font-size: var(--step-1); line-height: 1.2; font-weight: 420; color: var(--ink); margin-top: .15rem; }
@media (min-width: 72em) {
  .process__step:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--space-m) + 22px); left: 52px; right: -.5rem; border-top: 1px dashed rgb(62 74 82 / .35); }
}
.certs { margin-top: var(--space-xl); padding: 1rem 1.25rem; border: 1.5px dashed rgb(62 74 82 / .35); border-radius: var(--r-md); font-size: var(--step--1); color: var(--slate-700); }
.certs > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .25rem var(--space-s); padding: .45rem 0; }
.certs > div + div { border-top: 1px dashed rgb(62 74 82 / .25); }
.certs dt { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; padding-top: .2em; }
.certs dd { color: var(--ink-2); }
@media (max-width: 29.99em) { .certs > div { grid-template-columns: 1fr; } }
.company-sub { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--ink-3); margin-bottom: .75rem; }
.company-sub ~ .company-sub { margin-top: var(--space-xl); }
.company-src { margin-top: .6rem; font-size: var(--step--2); color: var(--ink-3); }
.certs__label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; margin-right: .5rem; }

/* ---------- Company ---------- */
.ab-company__grid { display: grid; gap: var(--space-xl) var(--grid-gap); align-items: start; }
@media (min-width: 64em) { .ab-company__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.company-data { border-top: 1px solid var(--line-strong); }
.company-data > div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--space-s); padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.company-data dt { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: .2em; }
.company-data dd { color: var(--ink-2); }

/* ---------- CTA (shared .cta from site.css) — line-only sprig ---------- */
.ab-cta__art { position: absolute; right: clamp(1rem, 5vw, 5rem); top: 50%; height: 82%; width: auto; transform: translateY(-50%); color: var(--on-night-2); opacity: .14; z-index: -1; pointer-events: none; }
@media (max-width: 47.99em) { .ab-cta__art { height: 60%; top: 1.5rem; right: 1rem; transform: none; opacity: .1; } }