/* ==========================================================================
   BAKKAR PRINTING — THEME "INDUSTRIAL PRECISION"
   pages/about.css — about.html ONLY.
   --------------------------------------------------------------------------
   OWNER: the about.html page agent. Nothing here is shared.

   Everything reusable already lives in components.css and is REUSED here:
     .sec-head · .spec · .cap · .steps/.step · .stat · .marks · .ticker
     .note · .cta-band · .brackets · .micro · .btn
   This file adds only what the kit genuinely does not have:
     1. the static editorial hero (.ahero)
     2. the company-record split (.story)
     3. the contact-sheet proof strip (.sheet)
     4. the hairline plate grid (.plates) — one grid, two sections
     5. the 8 bag structures (.structs)
     6. the machinery split (.mline)
     7. the PRODUCTION ROUTE timeline (.aroute) — a page-level MODIFIER on the
        kit's .steps/.step, not a reimplementation of it
     8. the stats band cells (.astat)

   Geometry: sharp. Motion: 140–220ms, cubic-bezier(0.2, 0, 0, 1).
   Every box-model property is logical, so RTL works without a mirrored sheet.
   ========================================================================== */


/* ==========================================================================
   HERO — static, full-bleed. Offset editorial block over the plant photograph,
   with the spec strip welded to the bottom edge.
   --------------------------------------------------------------------------
   THE TWO MODES.
   The hero is the one place on this page that paints ON TOP of a photograph,
   so it cannot read the semantic surface tokens alone — it needs a WASH, and
   the wash has to flip with the mode. So the hero declares its own four page
   tokens and re-points them under [data-theme="dark"]:

     DARK   the plate is pulled down to graphite (brightness 0.5) and drowned
            in a near-black wash. White type. A white blueprint hatch.
     LIGHT  the same plate is printed LIGHT (brightness 1.14, heavily
            desaturated) and washed with BONE PAPER. Ink-dark type. The hatch
            inverts to a grey DRAFTING grid ruled on the sheet.

   Every other colour in the hero — the type, the rules, the buttons, the spec
   strip — comes from the zone tokens (the section carries `zone--void`), so it
   is correct in both modes with no second declaration.
   ========================================================================== */
.ahero {
  position: relative;
  overflow: hidden;
  background-color: var(--bg);          /* zone--void: bone-250 / ink-1000 */
  border-block-end: var(--bw-hair) solid var(--line);

  /* ---- LIGHT: the printed plate on a bone sheet ---- */
  --ahero-plate: grayscale(0.62) contrast(1.02) brightness(1.14);
  --ahero-wash-0: rgba(242, 241, 236, 0);      /* the transparent end        */
  --ahero-wash-1: rgba(242, 241, 236, 0.58);   /* the open, photographic end */
  --ahero-wash-2: rgba(242, 241, 236, 0.82);
  --ahero-wash-3: rgba(242, 241, 236, 0.97);   /* under the type             */
  --ahero-hatch:  rgba(12, 13, 15, 0.075);     /* drafting grid, dark on paper */
}
:root[data-theme="dark"] .ahero {
  --ahero-plate: grayscale(0.45) contrast(1.12) brightness(0.5);
  --ahero-wash-0: rgba(5, 6, 7, 0);
  --ahero-wash-1: rgba(5, 6, 7, 0.58);
  --ahero-wash-2: rgba(5, 6, 7, 0.72);
  --ahero-wash-3: rgba(5, 6, 7, 0.96);
  --ahero-hatch:  rgba(255, 255, 255, 0.05);   /* blueprint hatch on graphite */
}
/* NO-JS FALLBACK. The boot script stamps data-theme before first paint, so this
   only ever fires with scripting off — but without it a scriptless visitor on a
   dark OS would get tokens.css's white type on this file's BONE wash. Mirror of
   the block above; change one, change both. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .ahero {
    --ahero-plate: grayscale(0.45) contrast(1.12) brightness(0.5);
    --ahero-wash-0: rgba(5, 6, 7, 0);
    --ahero-wash-1: rgba(5, 6, 7, 0.58);
    --ahero-wash-2: rgba(5, 6, 7, 0.72);
    --ahero-wash-3: rgba(5, 6, 7, 0.96);
    --ahero-hatch:  rgba(255, 255, 255, 0.05);
  }
}

.ahero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ahero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Pull the packaging colours off the photograph. The red is ours to spend,
     not the picture's — in either mode. */
  filter: var(--ahero-plate);
}
.ahero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    var(--ahero-wash-3) 0%,
    var(--ahero-wash-2) 46%,
    var(--ahero-wash-1) 100%
  );
}
/* Direction-aware wash: the copy side always keeps ≥ 4.5:1, LTR or RTL,
   light or dark. */
.ahero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--ahero-wash-3) 0%,
    var(--ahero-wash-2) 46%,
    var(--ahero-wash-0) 82%
  );
}
[dir="rtl"] .ahero__scrim::after {
  background: linear-gradient(
    to left,
    var(--ahero-wash-3) 0%,
    var(--ahero-wash-2) 46%,
    var(--ahero-wash-0) 82%
  );
}

/* The hatch over the photograph: a blueprint grid on graphite, a drafting
   grid on paper. */
.ahero__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,  var(--ahero-hatch) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(to bottom, var(--ahero-hatch) 0 1px, transparent 1px 34px);
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
          mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.ahero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(3.5rem, 2rem + 6vw, 8rem) clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
}

.ahero__block {
  max-inline-size: 46rem;
  position: relative;
  padding-inline-start: var(--s-6);
}
/* The red slab that flags the headline. */
.ahero__block::before {
  content: "";
  position: absolute;
  inset-block: 4px auto;
  inset-inline-start: 0;
  inline-size: var(--bw-slab);
  block-size: clamp(3rem, 8vw, 5.5rem);
  background-color: var(--accent);
}

.ahero__crumbs { margin-block-end: var(--s-7); }

.ahero__eyebrow {
  display: inline-flex;
  color: var(--fg-muted);      /* steel-300 on graphite · #4A505A on paper */
  margin-block-end: var(--s-5);
}

.ahero__title {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-hero);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  color: var(--fg-strong);     /* pure white on graphite · near-black on bone */
  text-wrap: balance;
}
[dir="rtl"] .ahero__title { text-transform: none; letter-spacing: 0; }

.ahero__lead {
  margin-block-start: var(--s-6);
  max-inline-size: 40ch;
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--fg);
}
[dir="rtl"] .ahero__lead { line-height: 1.75; }

.ahero__body {
  margin-block-start: var(--s-5);
  max-inline-size: 58ch;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.ahero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-7);
}

/* Spec strip welded to the block-end edge of the hero. It is OPAQUE — it must
   stop the photograph dead, or the mono spec values sit on a moving ground.
   --surface-2 in the void zone = ink-950 on graphite, bone-100 on paper; the
   kit's own --line hairlines are already right in both, so they are NOT
   re-declared here. */
.ahero__specs {
  position: relative;
  z-index: 2;
  background-color: var(--surface-2);
}
.ahero__specs .specstrip { background-color: transparent; }
/* Values in this strip are short technical facts, not headline numbers. */
.ahero__specs .specstrip__v {
  font-size: var(--fs-md);
  line-height: 1.25;
}
[dir="rtl"] .ahero__specs .specstrip__v { font-size: var(--fs-base); }


/* ==========================================================================
   TICKER — the 8 bag structures, running as the theme's signature marquee.
   ========================================================================== */
.about-ticker { border-block-start: 0; }


/* ==========================================================================
   01 — THE STORY  (paper zone)
   Prose on the reading side, the COMPANY RECORD spec table on the other.
   ========================================================================== */
.story {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2.5rem, 1.4rem + 4.4vw, 5rem);
  align-items: start;
}
@media (max-width: 1023px) {
  .story { grid-template-columns: 1fr; }
}

.story__prose > p {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-inline-size: var(--measure);
}
.story__prose > p + p { margin-block-start: var(--s-5); }
.story__prose > p strong { color: var(--fg-strong); }

/* The drop cap. Cairo shapes connected script — it must be off in Arabic. */
.story__prose > p:first-child::first-letter {
  float: inline-start;
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: 0.78;
  font-weight: var(--fw-bold);
  color: var(--accent);
  padding-inline-end: var(--s-3);
  padding-block-start: 0.06em;
}
[dir="rtl"] .story__prose > p:first-child::first-letter {
  float: none;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  padding: 0;
}

.story__aside { position: relative; min-inline-size: 0; }
@media (min-width: 1024px) {
  .story__aside {
    position: sticky;
    inset-block-start: calc(var(--masthead-h-sm) + var(--s-7));
  }
}


/* -- The contact sheet: real packs, straight off the presses. -------------- */
.sheet {
  margin-block-start: var(--s-10);
  padding-block-start: var(--s-7);
  border-block-start: var(--bw-hair) solid var(--line);
}
.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-block-end: var(--s-5);
}
.sheet__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--s-4);
}
.sheet__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-align: start;
  color: inherit;
  cursor: zoom-in;
}
.sheet__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--surface-inset);
  border: var(--bw-hair) solid var(--line);
  transition: border-color var(--dur-2) var(--ease);
}
.sheet__item:hover .sheet__media,
.sheet__item:focus-visible .sheet__media { border-color: var(--accent); }
.sheet__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.05);
  transition: transform var(--dur-4) var(--ease), filter var(--dur-3) var(--ease);
}
.sheet__item:hover .sheet__img,
.sheet__item:focus-visible .sheet__img {
  transform: scale(1.04);
  filter: grayscale(0) contrast(1);
}
.sheet__ref {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1;
  padding: 5px var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  font-variant-numeric: tabular-nums;
  /* This chip sits ON a photograph, not on a surface — so it stays a dark
     scrim plate with paper type in BOTH modes (a white chip would burn a hole
     in a light pack shot). --scrim-heavy is that plate, tokenised. */
  color: var(--paper-000);
  background-color: var(--scrim-heavy);
}
.sheet__cap {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  transition: var(--t-color);
}
[dir="rtl"] .sheet__cap { text-transform: none; }
.sheet__item:hover .sheet__cap,
.sheet__item:focus-visible .sheet__cap { color: var(--fg-strong); }


/* ==========================================================================
   PLATE GRID — one hairline grid, shared by the capability plates (02) and
   the quality pledges (05). Both use the kit's .cap component inside it.
   ========================================================================== */
/* --------------------------------------------------------------------------
   HOW THE HAIRLINE GRID IS DRAWN — and why it is NOT the gap trick.
   --------------------------------------------------------------------------
   The obvious way to rule a grid is `gap: 1px` over a --line-coloured
   container, letting the container show through between opaque cells. On the
   graphite canvas that is invisible-when-wrong, so it survived: --line there is
   ink-700, near enough the card to hide any exposed container.

   On the PAPER sheet it fails twice, loudly:
     · every cell carries [data-reveal], i.e. opacity 0 until it scrolls in — so
       until then the container is bare, and a bone-300 slab sits on the sheet
       where the plates should be (a ~520ms grey hole on every scroll-in);
     · any cell the grid does not fill is not empty — it is solid --line.

   So the rules are drawn as BORDERS ON THE CELLS instead (the same idiom the kit
   uses for .marks): the container rules its block-start and inline-start edges,
   each cell rules its own inline-end and block-end. Nothing is painted behind
   the cells, so there is nothing to expose — in either mode, at any scroll
   position. The grid looks identical once revealed.
   -------------------------------------------------------------------------- */
.plates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0;
  border-block-start: var(--bw-hair) solid var(--line);
  border-inline-start: var(--bw-hair) solid var(--line);
}
.plates > .cap {
  border: 0;
  border-inline-end: var(--bw-hair) solid var(--line);
  border-block-end: var(--bw-hair) solid var(--line);
}
/* .cap's own hover darkens its border; inside the ruled grid that would light
   only two of the four edges, so it is held at the grid rule. */
.plates > .cap:hover { border-color: var(--line); }

/* AND THE GRID MUST STILL FILL. Both plate grids hold exactly SIX cells; a
   half-empty last row reads as a broken table on a spec sheet. auto-fit gave 4
   columns at ≥1280 (6 items → 2 dead cells), so the count is pinned to a
   divisor of 6 at every width: 3 · 2 · 1. */
@media (min-width: 900px) {
  .plates { grid-template-columns: repeat(3, 1fr); }
}

/* Pledge variant: the corner-bracket motif + a red tick in the head. */
.plates--pledge > .cap { padding-block-start: var(--s-5); }
.pledge__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-end: var(--s-4);
}
.pledge__head .cap__k { margin-block-end: 0; }
.pledge__tick {
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  color: var(--line-contrast);
  transition: color var(--dur-2) var(--ease);
}
.cap:hover .pledge__tick { color: var(--accent); }


/* ==========================================================================
   02 — CAPABILITIES: the 8 bag structures we can actually build.
   ========================================================================== */
.structs {
  margin-block-start: var(--s-10);
}
.structs__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding-block-end: var(--s-4);
  margin-block-end: var(--s-6);
  border-block-end: var(--bw-hair) solid var(--line);
}
.structs__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--fg-strong);
}
[dir="rtl"] .structs__title { text-transform: none; line-height: 1.35; }
.structs__sub {
  max-inline-size: 52ch;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin-block-start: var(--s-3);
}

/* Ruled with cell borders, exactly like .plates above — never a container fill.
   And there are exactly EIGHT bag structures, so the column count is pinned to a
   divisor of 8 (4 · 2 · 1) and the grid always closes. */
.structs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-block-start: var(--bw-hair) solid var(--line);
  border-inline-start: var(--bw-hair) solid var(--line);
}
@media (max-width: 559px) {
  .structs__grid { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) {
  .structs__grid { grid-template-columns: repeat(4, 1fr); }
}

.struct {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-block-size: 9rem;
  padding: var(--s-5);
  background-color: var(--bg);
  color: var(--fg);
  border-inline-end: var(--bw-hair) solid var(--line);
  border-block-end: var(--bw-hair) solid var(--line);
  transition: background-color var(--dur-2) var(--ease);
}
.struct:hover { background-color: var(--surface); color: var(--fg); }
.struct__n {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.struct__t {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--fg-strong);
}
[dir="rtl"] .struct__t { text-transform: none; line-height: 1.45; }
.struct__go {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: auto;
  padding-block-start: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  transition: var(--t-color);
}
.struct__go svg { inline-size: 11px; block-size: 11px; flex: none; }
.struct:hover .struct__go { color: var(--accent); }


/* ==========================================================================
   02b — THE MACHINERY LINE: where the company started, still in the catalogue.
   ========================================================================== */
.mline {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  align-items: center;
  margin-block-start: var(--s-10);
  padding-block-start: var(--s-8);
  border-block-start: var(--bw-hair) solid var(--line);
}
@media (max-width: 899px) {
  .mline { grid-template-columns: 1fr; }
}
.mline__body { min-inline-size: 0; }
.mline__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--fg-strong);
  margin-block: var(--s-4) var(--s-4);
}
[dir="rtl"] .mline__title { text-transform: none; line-height: 1.35; }
.mline__text {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-inline-size: var(--measure);
}
.mline__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
}
.mline__figure {
  position: relative;
  margin: 0;
  border: var(--bw-hair) solid var(--line);
  background-color: var(--surface-inset);
}
.mline__figure img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(0.3) contrast(1.06) brightness(0.95);
  transition: filter var(--dur-3) var(--ease);
}
.mline__figure:hover img { filter: none; }
.mline__figcap {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-block-start: var(--bw-hair) solid var(--line);
  background-color: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}
[dir="rtl"] .mline__figcap { text-transform: none; letter-spacing: 0; }
.mline__figcap b {
  color: var(--accent);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  flex: none;
}


/* ==========================================================================
   03 — PRODUCTION ROUTE  (paper zone)
   --------------------------------------------------------------------------
   This is a MODIFIER on the kit's .steps / .step, not a second implementation.
   The kit gives us .step__n (the hollow stroked numeral), .step__t and
   .step__d for free; this class re-lays them out as a vertical route with a
   hairline spine, and lights the spine red for the step under the cursor.
   ========================================================================== */
.aroute {
  --spine: 2.25rem;
  position: relative;
  display: block;               /* the kit's grid is replaced by a route */
  border-block-start: 0;
  border-inline-start: 0;
}
/* The spine. */
.aroute::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--spine);
  inline-size: var(--bw-hair);
  background-color: var(--line);
  pointer-events: none;
}

.aroute .step {
  display: grid;
  grid-template-columns: calc(var(--spine) * 2) 1fr;
  align-items: start;
  gap: var(--s-4) var(--s-5);
  padding-block: var(--s-6);
  padding-inline: 0;
  background-color: transparent;
  border-inline-end: 0;
  border-block-end: var(--bw-hair) solid var(--line);
}
.aroute .step:first-child { border-block-start: var(--bw-hair) solid var(--line); }
.aroute .step:hover { background-color: var(--surface-2); }

/* The spine lights up for the step under the cursor — mechanical, 180ms. */
.aroute .step::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--spine);
  inline-size: var(--bw-rule);
  block-size: auto;
  background-color: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-2) var(--ease);
}
.aroute .step:hover::before,
.aroute .step:focus-within::before { transform: scaleY(1); inline-size: var(--bw-rule); }

/* The numeral sits ON the spine, masking it — a station on the route. */
.aroute .step__n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 100%;
  margin-block-end: 0;
  padding-block: var(--s-2);
  font-size: var(--fs-2xl);
  background-color: var(--bg);
}

.aroute__body { min-inline-size: 0; }
.aroute__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-block-end: var(--s-3);
}
.aroute .step__t { margin-block-end: 0; }
.aroute .step__d { max-inline-size: var(--measure); }
.aroute__phase {
  flex: none;
  color: var(--fg-subtle);
  transition: color var(--dur-2) var(--ease);
}
.aroute .step:hover .aroute__phase { color: var(--accent); }

@media (max-width: 559px) {
  .aroute { --spine: 1.5rem; }
  .aroute .step { gap: var(--s-3) var(--s-4); }
  .aroute .step__n { font-size: var(--fs-xl); }
}

.aroute__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-block-start: var(--s-8);
}


/* ==========================================================================
   04 — STATS BAND
   Kit .stat__v / .stat__k typography, laid into a hairline grid.
   --------------------------------------------------------------------------
   The kit's .hgrid rules itself with the gap trick (a --line container showing
   between opaque cells). Its four cells here carry [data-reveal], so on the
   paper sheet the bare container flashes as a bone-300 slab before they fade in.
   Re-ruled with cell borders, page-scoped, exactly as .plates above. The kit is
   untouched — this only re-points the grid inside #numbers.
   ========================================================================== */
#numbers .hgrid {
  gap: 0;
  background-color: transparent;
  border: 0;
  border-block-start: var(--bw-hair) solid var(--line);
  border-inline-start: var(--bw-hair) solid var(--line);
}
#numbers .hgrid > .astat {
  border-inline-end: var(--bw-hair) solid var(--line);
  border-block-end: var(--bw-hair) solid var(--line);
}

.astat {
  padding: var(--s-7) var(--s-6);
  min-inline-size: 0;
}
.astat .stat__v {
  font-size: var(--fs-2xl);
  letter-spacing: var(--track-tight);
}
.astat .stat__v em {
  font-style: normal;
  color: var(--accent);
}
.astat__note {
  display: block;
  margin-block-start: var(--s-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.marks-wrap { margin-block-start: var(--s-10); }
.marks-wrap__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-block-end: var(--s-5);
}
.marks-wrap__note {
  margin-block-start: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  max-inline-size: 68ch;
}
[dir="rtl"] .marks-wrap__note { text-transform: none; letter-spacing: 0; }


/* ==========================================================================
   05 — QUALITY & GUARANTEE — foot note under the pledge plates.
   ========================================================================== */
.pledges__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-6);
  border-block-start: var(--bw-hair) solid var(--line);
}


/* ==========================================================================
   CLOSING CTA
   ========================================================================== */
.about-cta { padding-block: var(--section-y); }
/* The band must lift OFF the void zone it sits in: --surface-2 is ink-950 on
   the graphite board and bone-100 (a fresh sheet) on the drafting board. The
   hairline is the kit's --line, which is already correct in both modes. */
.about-cta .cta-band { background-color: var(--surface-2); }
.about-cta__meta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-block-end: var(--s-5);
}
.about-cta__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  color: var(--accent);
}
.about-cta__mail:hover { color: var(--accent-hover); }
.about-cta__mail svg { inline-size: 13px; block-size: 13px; flex: none; }


/* ==========================================================================
   PRINT — an about page in this theme should print like a company record.
   ========================================================================== */
@media print {
  .ahero__media,
  .ahero__grid,
  .ahero__scrim,
  .about-ticker { display: none !important; }
  /* The photograph is gone, so the hero copy prints as ink on the page —
     whichever mode the visitor happened to be reading in. */
  .ahero { background: #FFFFFF !important; }
  .ahero__title,
  .ahero__lead,
  .ahero__eyebrow,
  .ahero__body { color: #000000 !important; }
  .aroute::before,
  .aroute .step::before { display: none; }
}