/* ==========================================================================
   EVAA — ABOUT PAGE
   Built 2026-07-29 from the client's own copy doc
   (10I84WS74Z0_nGPtlqcOni77J9GUYoK3wG270SZsvHQQ), VERBATIM.

   ⚠️ THIS FILE IS ADDITIVE ONLY. Nothing is appended to site.css or v4.css —
   the same separation that the 7/28 strip taught, when deleting V2 left 54KB
   of orphans behind. About loads site.css (tokens, buttons, .reveal, .phero)
   + v4.css (.v4-sec, .v4-eyebrow, .v4-lede, .v4-spine) + this file.

   ---- WHAT IS REUSED, AND WHY ---------------------------------------------
   Brees, 7/29: "make sure that it is using the same style and elements as the
   homepage. If new elements are needed, please make sure to pull them from
   21st.dev." So the inventory came first:
     · §1 hero      → .phero--dark from site.css. This is the site's ESTABLISHED
                      interior-page hero, orphaned on 7/28 when partner-with-us
                      .html was deleted. Reusing it un-orphans that CSS rather
                      than adding a third hero pattern.
     · §2 intro     → §2's editorial column + .v4-spine, the page's continuity
                      thread.
     · §4/§5        → .v4-sec grounds, .v4-lede, .v4-eyebrow, site.css buttons.
     · §3 capability grid → THE ONLY GENUINELY NEW ELEMENT. See below.

   ---- §3, AND THE DECISION THAT WAS MADE TWICE -----------------------------
   🔴 About's "Our Partnership" list is the HOMEPAGE'S §6, reworded. Seven of
   its nine bullets are the same capability (HR, finance, marketing, IT, vendor
   sourcing, compliance, facilities), and the framing sentence is a near-copy of
   §6's lede.

   FIRST PASS (7/29 am): built as 21st.dev "Stagger Reveal Grid" (18357) —
   a three-column card grid with a scale-and-overshoot wave — chosen precisely
   BECAUSE it did not resemble §6. The reasoning was that this site's reader is
   a vet who was cold-contacted, read the homepage, and clicked About to go
   deeper, so the same list in the same treatment reads as padding.

   SECOND PASS (7/29 pm): Brees saw it live and asked for §6's treatment
   instead — "I think it could look really good with the Comprehensional
   Operational Support section that's on the home page." So §3 is now the held
   argument + travelling rows, reusing v4.css's .v4-ops__* unchanged.
   The repetition is therefore visual AS WELL AS textual, knowingly. Do not
   revert it on the strength of the first-pass reasoning above — that argument
   was heard and overruled by the person whose page it is.
   🔴 The underlying COPY duplication is a copy problem, not a design one, and
   is STILL UNRAISED with Sean/Alie.

   ⚠️ The stagger grid's CSS was deleted in the same edit that replaced it —
   no orphans. See the §3 block below.

   ---- COLOUR DISCIPLINE ----------------------------------------------------
   site.css's rule holds: red belongs to CREAM grounds, gold to NAVY, neither
   crosses. Ground order here is navy → cream → band → navy → cream, so no two
   adjacent sections share a ground.
   ⚠️ GOLD APPEARS EXACTLY ONCE on this page — the hero eyebrow's mark, which
   is the precedent set by the (deleted) Partner With Us hero. v1 died as "a
   bank or lawyer site" on navy+gold spread everywhere. Do not add a second.
   No gradients. No coloured left borders on cards.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §1 — HERO. .phero--dark + .triptych, both from site.css.

   🔴 REBUILT 7/30 AS A TRIPTYCH — AND THE OLD REASON IS WORTH KEEPING BECAUSE
   OF HOW IT DIED. This block used to say: "There is no triptych here — About's
   copy carries no image direction, and the photography audit of 7/28 found
   exactly ONE usable unused photo on disk — so the top padding has to be
   re-supplied." That was TRUE when written. The 7/29 media baseline then killed
   the constraint outright ("nothing usable on disk is a SUPPLY problem —
   license from Pexels"), but the fix was applied as "put a video behind the
   existing text-only hero" instead of "revisit the hero". So About kept a shape
   it only ever had because of a shortage — and Team copied that shape on 7/30,
   inheriting a decision nobody had actually made.
   Brees, 7/30: "is there a reason why we didn't create something unique like
   that for the Team page and the About page?"
   🔴 A CONSTRAINT THAT OUTLIVES ITS CAUSE BECOMES A FAKE DESIGN DECISION.
   This is the second time on this exact page — see the "DELIBERATELY
   UNPHOTOGRAPHED" note in about.html. When a supply problem gets fixed, go back
   and re-check everything it shaped.

   🔴 DELETED IN THE SAME EDIT, NOT ORPHANED: .ab-hero__text, .ab-hero__video
   and .ab-hero__scrim.
   ⚠️ NO padding-top here any more. .phero--dark sets `padding-block: 0 …`
   precisely BECAUSE the triptych supplies the top padding via .triptych__text.
   Only the text-only hero had to re-supply it.
   -------------------------------------------------------------------------- */
/* Centred, matching PWU — that is the hero Brees pointed at. */
.ab-hero .triptych__text { text-align: center; }
.ab-hero .phero__title,
.ab-hero .phero__lede { margin-inline: auto; }
/* site.css caps .phero__title at 16ch, tuned for "Building Exceptional
   Practices Together". This title is longer and broke badly at 16ch inside the
   560px centre column. */
.ab-hero .phero__title { max-width: 20ch; }
.ab-hero .phero__lede { margin-bottom: 0; max-width: 36ch; }

/* --------------------------------------------------------------------------
   SHARED — the About section heading
   The copy doc gives each section ONE line ("Our Partnership", "Our
   Philosophy", "Our Commitment") and no display statement beneath it, so the
   homepage's eyebrow + .v4-h2 pair has nothing to fill its second slot.
   §9's precedent was to let the eyebrow BE the h2, but §9 is quiet on purpose
   and these three are the substance of the page. So: one mid-scale heading,
   sized between .v4-eyebrow and .v4-h2. Nothing is invented to fill a slot.
   -------------------------------------------------------------------------- */
.ab-h2 {
  font-family: var(--font-head); font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2;
  color: var(--navy); max-width: 24ch; margin: 0;
}
.ab-h2::before {
  content: ""; display: block;
  width: 28px; height: 2px; background: var(--red);
  margin-bottom: 16px;
}
/* On navy the red rule measures 3.05:1 and muddies — site.css's rule. Cream at
   .35 is decorative only and carries no meaning. */
.v4-sec--dark .ab-h2 { color: var(--cream); }
.v4-sec--dark .ab-h2::before { background: rgba(251,247,239,.35); }

/* --------------------------------------------------------------------------
   §2 — PURPOSE. Editorial column on the spine, no heading.
   ⚠️ The copy doc gives this block NO heading, so none is invented and the
   markup uses a plain <div>, not a <section> — an unnamed <section> exposes an
   unnamed region to assistive tech for no benefit. Heading order across the
   page stays h1 → h2 → h2 → h2 with no skips.
   -------------------------------------------------------------------------- */
/* Two-up: copy left, image right. §3 uses a wide band and §4 mirrors this to
   the opposite side, so the three image treatments on this page never repeat. */
.ab-intro__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
.ab-intro { max-width: 780px; }
.ab-figure { margin: 0; }
.ab-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md); object-fit: cover;
}
.ab-figure--tall img { aspect-ratio: 4 / 5; }
/* NB .ab-figure--band was deleted 7/29 with the stagger grid — §3's image now
   lives inside .v4-ops__sticky and is styled by v4.css's .v4-ops__img. */
@media (max-width: 860px) {
  /* 🔴 .ab-commit__grid WAS LISTED HERE AND IT NEVER LANDED (fixed 8/14).
     Its base rule is declared BELOW this block at the same specificity, so
     source order won at every width and About's closing CTA held two columns
     down to 320px: copy at 169px / ~20ch, both buttons wrapping to two lines,
     and the right 45% of the phone empty beside a 153x96 figure.
     It is now mobile-first at .ab-commit__grid — one column by default, the
     split added at min-width:861px — which cannot be shadowed by a later rule.
     .ab-intro__grid stays here safely: it is declared ABOVE this block.
     📌 Mistake #4 from the 7/31 list, third instance in this repo. Guarded now
     by .shots/shadowed-media.js. */
  .ab-intro__grid { grid-template-columns: 1fr; }
  .ab-figure--tall img { aspect-ratio: 16 / 10; }
}

/* §5 — copy left, image right, filling a column that was blank (Brees, 7/29).
   NB .ab-phil__grid was DELETED in the same edit: §4 no longer has a side
   figure, it has a full-width background. No orphan left behind. */
.ab-commit__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
/* The two-column split is the DESKTOP case and says so, rather than being the
   default that a mobile rule then has to fight. See the note in the
   max-width:860px block above. */
@media (min-width: 861px) {
  .ab-commit__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.ab-intro__lead {
  font-family: var(--font-head); font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1.35;
  color: var(--navy); max-width: 26ch; margin: 0 0 var(--s5);
}
.ab-intro__body { display: grid; gap: var(--s3); }
.ab-intro__body p { color: var(--navy-soft); font-size: 17px; line-height: 1.72; max-width: 62ch; margin: 0; }

/* --- §2 ON NAVY (Brees, 7/30: "change this to dark blue so that way the hero
   leads into this section") -------------------------------------------------
   The two rules above were written for a CREAM ground: --navy on navy-deep is
   1.3:1 and --navy-soft is 1.9:1 — both effectively invisible. These are the
   dark-ground counterparts.
   🔴 SPECIFICITY IS DELIBERATE, DO NOT SHORTEN.
   `.ab-intro__body p` is (0,2,1), so the body override must be (0,3,1) to beat
   it. `.ab-intro__lead` sits OUTSIDE `.ab-intro__body` in the markup, so it has
   no element-selector competing with it and (0,2,0) is enough.
   ⚠️ Measured, not assumed — `node .shots/ab-measure.js`. Five separate bugs on
   this project came from a colour or size rule silently losing and looking like
   a deliberate choice.
   ⚠️ .v4-spine's rule on dark is already handled by v4.css
   (`.v4-sec--dark .v4-spine::before`), so the continuity thread needs nothing
   here. -------------------------------------------------------------------- */
.v4-sec--dark .ab-intro__lead { color: var(--cream); }
.v4-sec--dark .ab-intro__body p { color: rgba(251, 247, 239, .82); }

/* --------------------------------------------------------------------------
   §3 — OUR PARTNERSHIP  ← THE HOMEPAGE'S §6 TREATMENT, REUSED
   Brees, 7/29: "I think it could look really good with the Comprehensional
   Operational Support section that's on the home page."

   ⚠️ THIS REPLACED 21st.dev "Stagger Reveal Grid" (18357), WHICH IS GONE.
   §3 was first built as that grid specifically so it would NOT resemble §6,
   because About's nine bullets are the homepage's eight services reworded.
   Brees saw both and chose §6's treatment. Accepted trade — do not revert
   without asking him.
   🔴 Its CSS (.ab-caps, .ab-cap, .ab-cap__n, .ab-cap__t, the --ease-back
   overshoot and .ab-figure--band) was DELETED IN THE SAME EDIT, not left
   behind. That is the 7/28 lesson: deleting V2 left 54KB of orphans, and the
   PWU rules are still sitting in site.css for the same reason.

   ⚠️ ZERO NEW LAYOUT CSS. The section reuses .v4-ops__grid / __sticky / __img
   / __list and .v4-op / .v4-op__name from v4.css UNCHANGED, so retuning §6
   retunes this too. Only the numeral column is About-specific: §6's rows are
   NAME + DESCRIPTION, and the copy doc gives these nine no descriptions, so
   .8fr/1.2fr would have left every row half empty. A narrow ordinal column
   fills it and keeps §6's row rhythm.
   -------------------------------------------------------------------------- */
.ab-part .v4-op { grid-template-columns: 46px minmax(0, 1fr); align-items: baseline; }
.ab-op__n {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; color: var(--navy-soft);
}
.ab-part .v4-ops__list { list-style: none; margin: 0; padding-left: clamp(0px, 4vw, 56px); }
/* §6's .v4-op__name caps at ~1.3rem for two-word service names; these nine are
   full phrases, so the measure has to breathe or "Financial strategy,
   reporting, and performance optimization" sets as a ragged three-line block. */
.ab-part .v4-op__name { font-size: clamp(1rem, 1.45vw, 1.15rem); line-height: 1.4; max-width: 46ch; }

.ab-part__close {
  margin: var(--s5) 0 0; color: var(--navy-soft);
  font-size: 17px; line-height: 1.72; max-width: 62ch;
}

@media (max-width: 900px) { .ab-part .v4-ops__list { padding-left: 0; } }

/* --------------------------------------------------------------------------
   §4 — PHILOSOPHY (full-width image + flat dark scrim)
   Brees, 7/29: "put the Our Philosophy section on top of a full-width image
   that has the dark overlay."

   ⚠️ FLAT SCRIM, NOT A GRADIENT — gradients are a standing house rule, and
   §7 on the homepage solved the same problem the same way.
   ⚠️ OPACITY IS DERIVED. The image carries a bright sun flare top-right, so
   this was measured, not chosen by eye: .shots/ab-contrast.js finds the
   brightest pixel in the file, composites it under the scrim and checks every
   text colour that sits on top. Re-measure if either changes.
   ⚠️ deep-a11y.js resolves the SECTION's background-color and cannot see an
   image behind a scrim — it will report this section as passing no matter what
   the scrim does. That is exactly why the dedicated script exists.
   NB overflow:hidden is safe here. Homepage §7 must NOT have it, because an
   overflow container silently turns its stage's position:sticky into a no-op —
   nothing in this section is sticky, so that trap does not apply.
   -------------------------------------------------------------------------- */
/* 🔴 POSITIONING NOW LIVES IN pinned-bg.css. This section's background is
   PINNED — it stays still while the copy scrolls over it. Only the scrim
   COLOUR is page-specific here; the geometry is shared.
   ⚠️ `.ab-phil-sec { overflow: hidden }` was DELETED, not moved. Overflow on
   the section silently turns the sticky media into a no-op — the exact trap
   v4.css warns about on homepage §7. Clipping happens on .pin-bg__media now.
   Do not put overflow back on this section.
   ⚠️ `.ab-phil__bg` went with it — the image is `.pin-bg__img` now. */
.ab-phil__scrim { background: rgba(18, 29, 59, .78); }

/* CENTRED (Brees, 7/29: "if we could have all of this text centered").
   Every max-width in this section needs `margin-inline: auto` or it centres the
   TEXT inside a block that is still hard left, which looks like a bug.
   ⚠️ The measure is tightened 62ch → 54ch here. Centred text has no fixed left
   edge for the eye to return to, so a line length that reads fine ragged-right
   becomes noticeably harder centred. This is the one lever that offsets it
   without changing the type size. */
.ab-phil-sec .ab-phil { margin-inline: auto; text-align: center; }
.ab-phil-sec .ab-h2 { margin-inline: auto; }
.ab-phil-sec .ab-h2::before { margin-inline: auto; }
.ab-phil-sec .ab-phil__body p { max-width: 54ch; margin-inline: auto; }
.ab-phil-sec .ab-phil .ab-phil__turn { margin-inline: auto; }

.ab-phil { max-width: 820px; }
.ab-phil__body { display: grid; gap: var(--s3); margin-top: var(--s5); }
.ab-phil__body p { color: rgba(251,247,239,.82); font-size: 17px; line-height: 1.72; max-width: 62ch; margin: 0; }
/* The pull-statement. §2's .v4-turn does the same job on the homepage but is
   scoped to .v4-why__body, so it cannot be reused as-is.
   ⚠️ Full opacity, deliberately. Dimming body text to signal "not focused" was
   ruled the wrong mechanism on 7/28 — unfocused text is still text someone has
   to read. This lifts by SIZE, not by dimming its neighbours.

   🔴 THREE CLASSES, ON PURPOSE — DO NOT "SIMPLIFY" THIS SELECTOR.
   `.ab-phil__body p` above is specificity (0,2,1). A bare `.ab-phil__turn` is
   (0,1,0) and LOSES, so the whole rule silently collapsed to 17px Vollkorn and
   the statement rendered as body text in a serif face — which reads as a font
   choice, not a bug. Caught 7/29 by measuring computed styles, not by looking.
   (0,3,0) beats (0,2,1) on class count, so this holds regardless of source
   order. Same trap, same fix, in .ab-commit__last below. */
/* ⚠️ `auto` on the inline axis, NOT 0 — and it has to be set HERE, not in the
   centring block above. That block's `margin-inline: auto` is (0,3,0), this
   rule is also (0,3,0) and sits LATER in the file, so its `margin: … 0` won
   and the statement rendered hard left inside a centred section — its own text
   centred, its box not. Third instance of this exact cascade family in this
   file; the fix is always to look at what ELSE already targets the element. */
.ab-phil .ab-phil__body .ab-phil__turn {
  font-family: var(--font-head); font-weight: 400;
  font-size: clamp(1.35rem, 2.5vw, 1.95rem); line-height: 1.32;
  color: var(--cream); max-width: 26ch;
  margin: var(--s2) auto; padding-block: var(--s2);
}

/* --------------------------------------------------------------------------
   §5 — COMMITMENT (cream) + the page's only CTA
   ⚠️ The copy doc gives About NO call-to-action copy. Rather than invent any,
   or repeat §10's block verbatim (which would have been a THIRD duplication of
   homepage content on this page), the closing paragraph stands as written and
   only a button row is added beneath it — Brees, 7/29: "No invented copy. Just
   an exit." Both buttons point at the same mailto as every other CTA on the
   site.
   🔴 That address is info@evaofamerica.com — a DIFFERENT DOMAIN from the site
   (Brees, 8/14: excelsiorveterinaryassociates.com is the site, evaofamerica.com
   is email only). Not a typo; do not "fix" it to match the site domain.
   It is still not provisioned — Workspace has not been created. Brees owns
   that; it is not a design blocker.
   -------------------------------------------------------------------------- */
.ab-commit { max-width: 820px; }
.ab-commit__body { display: grid; gap: var(--s3); margin-top: var(--s5); }
.ab-commit__body p { color: var(--navy-soft); font-size: 17px; line-height: 1.72; max-width: 62ch; margin: 0; }
/* 🔴 Three classes for the same cascade reason as .ab-phil__turn — see the note
   there. The `!important` this rule used to carry on `color` was papering over
   exactly that specificity loss; with the selector correct it is not needed. */
.ab-commit .ab-commit__body .ab-commit__last {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.45;
  color: var(--navy); max-width: 40ch;
}
.ab-commit .btn-row { margin-top: var(--s5); }