/* ==========================================================================
   Huda Academy — Mission, Vision & Values  (/about/mission/)

   Loaded ONLY by about/mission/index.html, after site.css and never instead
   of it.

   WHAT THIS IS. A port of the client's concept page,
   <https://huda-academy-about-concept.ahmed206429.chatgpt.site/about/mission/>,
   captured 2026-09-18 and kept verbatim at lab/about-mission-ref.html. The
   client originally asked for it one-to-one, changing only what was clearly
   wrong. On 2026-09-19 the mission, vision, values, and related-page sections
   were deliberately redesigned from client feedback. The preserved concept
   rules remain above the final refresh block so the design history is legible.

   THIS PAGE FOLLOWS /about/, NOT site.css. Its sibling assets/css/about.css
   was built the same day from the same author's concept and settled the house
   rule for this family: keep the concept's palette and both typefaces as
   authored, and change only what actively conflicts with the real site. The
   first draft of this file mapped everything onto the locked tokens instead,
   which would have made a child page that looked nothing like its own parent.
   Matching /about/ is the whole point of the token block below.

   EVERYTHING IS NAMESPACED `abm-`, AND THAT IS NOT TIDINESS.
   site.css already owns .hero, .btn, .cta and .values for the home page, and
   — the dangerous one — `.intro` is the site-wide logo-intro OVERLAY. It is
   driven by `html.js .intro` and `html.intro-done .intro`, which position it
   fixed and then remove it once the home page's intro finishes. The concept
   names its mission section `.intro`. Unprefixed, this page's mission copy
   would have been positioned fixed and then deleted from view.

   TOKENS ARE MIRRORED FROM about.css AND MUST STAY IN STEP. They are declared
   again here rather than shared because each page loads only its own
   stylesheet. tools/verify-mission.mjs asserts every mirrored value against
   about.css, so the two cannot drift silently.
   ========================================================================== */

.abm {
  /* Mirrored from about.css. Concept values, kept as authored, because each is
     far enough from its site.css neighbour to be a real choice: the concept's
     paper is near-white where site.css's is a warm cream, and its gold is
     deeper than the hero's. */
  --abm-cream: #F4EEE4;   /* site --paper-2 is #EEE7DC — visibly deeper  */
  --abm-paper: #F8F4EE;   /* site --paper   is #F8F4EE — visibly warmer  */
  --abm-gold: #CFAF82;    /* site --gold    is #F2A33A — visibly lighter */
  --abm-sand: #EEE7DC;    /* the values band, as the concept authored it */
  --abm-ink: var(--ink);  /* #23160C vs #34231A: same colour, use the token */
  --abm-line: rgba(35,22,12,.18);

  /* DEVIATION 1 — the two reds are the site's, not the concept's.
     Concept: --rust #A72820, --deep #721E15.
     Site:    --terracotta #A83226, --terracotta-deep #86251B.
     Same call as about.css DEVIATION 1 and for the same reason: the page sits
     under the real nav, which is painted --terracotta, and two reds that close
     together on one screen read as a mistake rather than a choice. */
  --abm-rust: var(--terracotta);

  /* DEVIATION 2 — the concept's flat `--deep:#721E15` hero and closing band
     become a two-stop gradient. Standing rule in the global CLAUDE.md, not a
     preference: a perfectly flat dark solid gets spatial-dithered by the
     display pipeline and the dither shows as a diagonal hairline at slope
     ~0.13 across the whole viewport, in screenshots too.
     The stops bracket the original exactly, the same method about.css used for
     the green: #79281E is (122,39,24) and #601F16 is (100,27,16), which
     average to (111,33,20) — the concept's #721E15 to the integer. */
  --abm-deep-hi: #79281E;
  --abm-deep-lo: #601F16;

  /* HISTORICAL NOTE: the green-band explanation below describes the superseded
     concept. Its tokens were removed and the live vision now uses the Huda
     burgundy gradient in the client-directed refresh at the end of this file. */
  /* DEVIATION 3 — the concept's flat `--sage:#203429` band, same treatment.
     These are the SAME two stops about.css uses for its green band, so the two
     pages' green reads as one colour. #24392D is (36,57,45) and #1B2D23 is
     (27,45,35), averaging (31.5,51,40) against the concept's (32,52,41).

     The green is a deliberate exception the client made and confirmed on
     2026-09-18, before any of it was built. DESIGN-LIBRARY.md records the
     palette as closed after three rejected attempts at a third colour. This is
     scoped to one band per page across two pages and is not a reopening. */
  background: var(--abm-paper);
  color: var(--abm-ink);
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif;

  /* DEVIATION 4 — the concept's `body{overflow-x:hidden}` is NOT copied.
     site.css already sets `html,body{overflow-x:clip}`, and CLAUDE.md is
     explicit that `hidden` must never be used: it makes <body> a scroll
     container, which re-parents every position:sticky on the page. This page
     has one — .abm-kicker, the outlined "01" — so copying the concept
     verbatim would have broken the concept's own sticky numeral. */
}

/* DEVIATION 5 — the concept's global rules are scoped, not global.
   It ships `img{width:100%;height:100%;object-fit:cover}` unscoped. Unscoped
   here it would stretch the nav's logo lockup and the footer mark to fill
   their boxes. Same fix about.css made. */
.abm img { width: 100%; height: 100%; object-fit: cover; }
.abm a { text-decoration: none; }

/* ---------- reveals -------------------------------------------------------
   DEVIATION 6 — the concept hides content with a bare `[data-reveal]{opacity:0}`
   and an IntersectionObserver, and nothing else. If its script 404s or throws,
   the page body stays invisible forever. That is exactly what CLAUDE.md's
   "content visibility must never depend on JS or an animation firing" rule
   exists to prevent.

   Three guards, identical in shape to about.css's:
     1. gated on `html.js`, set by the shell's inline <head> script — so with
        scripting off, nothing is ever hidden in the first place;
     2. revealed per element by `.is-in`, added by this page's own small script
        as each one scrolls in, which is what preserves the staggered fade;
     3. revealed wholesale by `html.abm-revealed`, set by a 6s timer in this
        page's inline <head> script if the page script never armed.

   IT CANNOT REUSE site.css's `.rv` / `html.in` PAIR, for the reason about.css
   records: site.js block 3 adds `in` immediately on any page with no `.stat`
   elements, and this page has none by design. Everything would reveal on load
   and the concept's scroll fade would be gone.

   Only content carries these. Never a control — CLAUDE.md, the burger. */
/* `visibility:hidden` IS NOT DECORATION — IT IS THE KEYBOARD FIX.
   `opacity:0` alone still leaves descendants focusable. The proof list puts
   `data-rv` on the CONTAINER of four real links, so with opacity alone a
   keyboard user tabbing before that block reveals would land on links they
   cannot see — and permanently so if the observer never fired. `visibility`
   takes them out of the tab order and the accessibility tree with them, and it
   is transitioned at `0s` so it flips the instant the reveal starts rather
   than at the end of the fade. (Codex audit, 2026-09-18.) */
html.js .abm [data-rv] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
/* The normal path animates. */
html.js .abm [data-rv].is-in { opacity: 1; visibility: visible; transform: none; }

/* THE FAILSAFE PATH SNAPS, AND MUST NOT ANIMATE. `transition:none` here is the
   whole point of the rule, not tidiness.

   A running CSS transition sits ABOVE author !important in the cascade, so a
   transition that starts and never finishes pins its element at the START
   value and no failsafe declaration can override it. That is precisely what
   made the burger vanish on 2026-08-04, and it is not theoretical here: with
   this page open in a background tab the transition clock freezes, the
   IntersectionObserver never delivers, the 6s failsafe fires correctly — and
   every [data-rv] still measured opacity 0, because the reveal was trying to
   TRANSITION to 1 rather than simply being 1.

   Cancelling the transition makes the element jump to the end value instead of
   racing toward it, so the failsafe cannot lose. Verified in-browser after the
   change: 24/24 revealed with the observer never having run. */
html.abm-revealed .abm [data-rv] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}
.abm .delay-1 { transition-delay: .1s; }
.abm .delay-2 { transition-delay: .2s; }
.abm .delay-3 { transition-delay: .3s; }

/* Shared band padding — the concept's own ramp, unchanged. */
.abm-band {
  padding: clamp(95px, 11vw, 170px) clamp(25px, 8vw, 145px);
}

/* The noise layer that goes with every gradient above. Identical turbulence
   and opacity to .footer__noise and about.css's band — the standing fix, not a
   new effect. */
.abm-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* ---------- hero: MOVED TO THE MASTER, 2026-09-27 -------------------------
   The concept's burgundy hero - the grid, the ring, the clipped apple
   photograph, the gold seal, the crumbs, the rule and its button - is gone.
   The client decided that every interior page opens with the one master hero
   (assets/css/page-hero.css), and that stylesheet owns it. Do not restyle the
   hero here: a rule in this file that reaches into .page-hero makes this page
   the odd one out, which is exactly what the decision was made to end. Its
   parallax went with it, to assets/js/page-hero.js, and so did DEVIATION 7
   (the seal that did not spin) and DEVIATION 8 (the scale-only photo
   entrance): both described objects that no longer exist. */

/* The concept's eyebrow colour, kept rather than collapsed into --abm-gold.
   It was set for the old hero's gradient, where #E1BA7F on the lighter stop
   #79281E measured 5.43:1; the three sections that use it on paper override it
   to --abm-rust below. tools/verify-mission.mjs re-measures every pair. */
.abm-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 700;
  color: #E1BA7F;
  margin-bottom: 20px;
}

/* ---------- 01 · the mission ---------------------------------------------- */
.abm-intro {
  position: relative;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(55px, 10vw, 165px);
}
/* DEVIATION 9 — the sticky offset is derived, not guessed. The concept hard-codes
   `top:130px`, which was its own nav height. Ours is the real one, so the
   numeral cannot slide under a sticky bar of a different size. */
.abm-kicker {
  position: sticky;
  top: calc(var(--nav-h) + 2.6rem);
  height: min-content;
}
/* The outlined numeral (.abm-kicker__big) is gone - the 2026-09-19 concept
   drops the big section numbers on every page of the About family. The label
   it used to sit under is now the whole rail, so it loses the 34px of top
   margin that existed only to clear the numeral. */
.abm-kicker p {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--abm-rust);
  font-weight: 700;
  margin: 0;
}
.abm-h2 {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(44px, 5.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0 0 30px;
}
.abm-body > p {
  font-size: 18px;
  line-height: 1.8;
  color: #5C4C46;
  max-width: 720px;
}
.abm-body .abm-eyebrow { color: var(--abm-rust); }
.abm-statement {
  margin: 66px 0 0;
  border-left: 3px solid var(--abm-rust);
  padding: 4px 0 4px 30px;
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.3;
}
/* It is a <blockquote> here rather than the concept's <div>, because it is now
   a real quotation of the school's own sentence. Kill the element's default
   margins so the concept's spacing is unchanged. */
.abm-statement > p { margin: 0; }

/* DEVIATION 12 — the statement drops to statement size, not display size.
   The concept's slot held an invented 95-character line and was sized for it.
   The school's actual mission statement is 290 characters, and at
   clamp(27px,3vw,42px) a sentence that long fills the viewport — which is the
   exact failure the home page's mission section was re-opened for on
   2026-08-01 and re-cut to fix. Same lesson, applied once rather than
   re-learned: keep the slot, keep the rule and the indent, size the type to
   the sentence that is actually in it. */
.abm-statement--verbatim {
  font-size: clamp(20px, 1.95vw, 27px);
  line-height: 1.45;
}
.abm-card {
  margin-top: 72px;
  background: var(--abm-cream);
  padding: 50px;
  position: relative;
  overflow: hidden;
}
.abm-card::after {
  content: "MISSION";
  position: absolute;
  right: -16px;
  bottom: -30px;
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: 104px;
  color: rgba(168,50,38,.055);
  letter-spacing: .03em;
}
.abm-card__num {
  color: var(--abm-rust);
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 700;
}
.abm-card h3 {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-weight: 400;
  font-size: 37px;
  margin: 23px 0 14px;
}
.abm-card p {
  position: relative;
  z-index: 1;
  font-size: 16px;
  line-height: 1.75;
  color: #5C4C46;
  max-width: 630px;
}

/* ---------- 02 · the vision, on the green band ---------------------------- */
.abm-vision {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 690px;
  background: linear-gradient(145deg, var(--abm-deep-hi), var(--abm-deep-lo));
  color: #FDF8F1;
}
.abm-vision__image { position: relative; overflow: hidden; }
.abm-vision__image img {
  object-position: 52% center;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.abm-vision__image:hover img { transform: scale(1.04); }
.abm-vision__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 65%, rgba(32,52,41,.35));
}
.abm-vision__copy {
  position: relative;
  z-index: 1;
  padding: clamp(70px, 8vw, 130px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.abm-chapter {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--abm-gold);
  font-weight: 700;
  margin-bottom: 24px;
}
.abm-vision__copy p {
  color: #D0DBD7;
  font-size: 18px;
  line-height: 1.8;
  max-width: 620px;
}
/* WAS .abm-points, the Grounded / Prepared pair. The 2026-09-19 concept
   replaces both with one closing sentence, so the two-column grid and its
   rules are deleted rather than left unused. The rule above the line is kept:
   it is what separates the vision copy from its closing line, and it was
   doing that job before the pair existed. */
.abm-vision__close {
  margin: 45px 0 0;
  padding-top: 35px;
  border-top: 1px solid rgba(255,255,255,.22);
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(21px, 1.9vw, 28px);
  line-height: 1.4;
  color: #F0E8D9;
  max-width: 520px;
}

/* ---------- 03 · the values ----------------------------------------------- */
.abm-values { background: var(--abm-sand); }
.abm-values__head {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 65px;
}
.abm-values__head p { font-size: 17px; line-height: 1.75; color: #66544D; }
.abm-values__head .abm-eyebrow { color: var(--abm-rust); }
.abm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--abm-line);
  border-bottom: 1px solid var(--abm-line);
}
.abm-value {
  position: relative;
  padding: 38px 27px 34px;
  border-right: 1px solid var(--abm-line);
  min-height: 340px;
  background: transparent;
  transition: background-color .4s ease, transform .4s ease, box-shadow .4s ease;
}
.abm-value:first-child { padding-left: 0; }
.abm-value:last-child { border-right: 0; }
.abm-value__icon {
  width: 55px;
  height: 55px;
  border: 1px solid rgba(168,50,38,.35);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--abm-rust);
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: 25px;
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, transform .4s ease;
}
.abm-value h3 {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  margin: 70px 0 15px;
}
.abm-value p { font-size: 15px; line-height: 1.68; color: #65544E; }
.abm-value:hover {
  background: #FCF7EE;
  transform: translateY(-12px);
  box-shadow: 0 20px 45px rgba(71,35,19,.1);
}
.abm-value:hover .abm-value__icon {
  background: var(--abm-rust);
  color: #FFFFFF;
  border-color: var(--abm-rust);
  transform: rotate(12deg);
}

/* ---------- 04 · where purpose becomes practice --------------------------- */
.abm-proof {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(60px, 9vw, 145px);
  align-items: center;
}
.abm-proof .abm-eyebrow { color: var(--abm-rust); }
.abm-proof__intro { font-size: 17px; line-height: 1.75; color: #65544E; }
.abm-list { counter-reset: abmitem; border-top: 1px solid var(--abm-line); }
.abm-row {
  counter-increment: abmitem;
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 28px 4px;
  min-height: 44px;
  border-bottom: 1px solid var(--abm-line);
  transition: padding-left .3s ease;
}
.abm-row::before {
  content: "0" counter(abmitem);
  font-size: 12px;
  color: var(--abm-rust);
  font-weight: 700;
  letter-spacing: .12em;
}
.abm-row h3 {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-weight: 400;
  font-size: 25px;
  margin: 0;
}
.abm-row__arrow {
  width: 38px;
  height: 38px;
  border: 1px solid var(--abm-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.abm-row:hover { padding-left: 12px; }
.abm-row:hover .abm-row__arrow {
  background: var(--abm-rust);
  color: #FFFFFF;
  transform: rotate(-35deg);
}
.abm-row:focus-visible { outline: 3px solid var(--abm-rust); outline-offset: 2px; }

/* ---------- closing band --------------------------------------------------- */
.abm-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(90px, 10vw, 150px) 24px;
  background: linear-gradient(160deg, var(--abm-deep-hi), var(--abm-deep-lo));
  color: #FDF8F1;
}
.abm-cta::before,
.abm-cta::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border: 1px solid rgba(207,175,130,.18);
  border-radius: 50%;
  top: -310px;
  left: -200px;
}
.abm-cta::after { left: auto; top: auto; right: -230px; bottom: -330px; }
.abm-cta__inner { position: relative; z-index: 1; }
.abm-cta h2 {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(49px, 7vw, 94px);
  line-height: .96;
  letter-spacing: -.04em;
  max-width: 950px;
  margin: 0 auto 28px;
}
.abm-cta p {
  color: #DED3CD;
  font-size: 18px;
  line-height: 1.65;
  max-width: 600px;
  margin: 0 auto 35px;
}

/* ==========================================================================
   RESPONSIVE — the concept's own two breakpoints at its own widths, plus one.
   1080 and 760 govern the PAGE BODY, not the nav; the nav is the shell's and
   brings its own rules. Re-cutting them to this site's 1330/900 would change a
   layout the client approved, for no benefit.
   ========================================================================== */
@media (max-width: 1080px) {
  .abm-grid { grid-template-columns: 1fr 1fr; }
  .abm-value:nth-child(2) { border-right: 0; }
  .abm-value:nth-child(-n+2) { border-bottom: 1px solid var(--abm-line); }
}

@media (max-width: 760px) {
  .abm-band { padding: 90px 24px; }
  .abm-intro { display: block; padding: 95px 24px; }
  .abm-kicker { position: relative; top: auto; margin-bottom: 70px; }
  .abm-card { padding: 35px 28px; }
  .abm-vision { display: flex; flex-direction: column; min-height: 0; }
  .abm-vision__image { height: 430px; }
  .abm-vision__copy { padding: 78px 24px; }
  .abm-values { padding: 90px 18px; }
  .abm-values__head { grid-template-columns: 1fr; gap: 15px; }
  .abm-grid { grid-template-columns: 1fr; }
  .abm-value,
  .abm-value:first-child {
    padding: 30px 8px;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--abm-line);
  }
  .abm-value h3 { margin: 30px 0 12px; }
  .abm-proof { display: block; padding: 90px 24px; }
  .abm-list { margin-top: 50px; }
  .abm-row { grid-template-columns: 48px 1fr auto; }
}

/* DEVIATION 10 — a step below 420px, which the concept does not have.
   It stops at 760 and leaves a 102px-capable headline at a flat 56px, which
   overflows a 320px screen. This site has already had to re-lay the stat band
   and the values strip at 390 and below; 320px is a real screen here. The
   hero headline that first needed it left with the hero on 2026-09-27; the
   step still carries the section headings. */
@media (max-width: 420px) {
  .abm-h2 { font-size: 36px; }
  .abm-cta h2 { font-size: 38px; }
  .abm-statement { font-size: 24px; padding-left: 18px; }
  .abm-card { padding: 28px 20px; }
  .abm-card::after { font-size: 76px; }
  .abm-vision__close { margin-top: 34px; padding-top: 26px; }
}

/* DEVIATION 11 — reduced motion is scoped to this page's own objects.
   The concept ships `*,*:before,*:after{animation:none!important}` unscoped,
   which would have reached into the shell and killed the nav's own
   transitions. Nothing here depends on an animation to become visible, so
   switching them all off is safe by construction. */
@media (prefers-reduced-motion: reduce) {
  .abm-vision__image img,
  .abm-value,
  .abm-value__icon,
  .abm-row,
  .abm-row__arrow,
  html.js .abm [data-rv] {
    animation: none !important;
    transition: none !important;
  }
  html.js .abm [data-rv] { opacity: 1; transform: none; }
}

/* ========================================================================== 
   2026-09-19 client-directed refresh

   The mission, values, and related-page sections intentionally replace the
   original concept treatment above. They live at the end of the sheet so this
   redesign also wins at the concept's legacy breakpoints without broad edits
   to the preserved port.
   ========================================================================== */

/* Mission: use the full canvas instead of reserving an empty left rail. */
.abm-intro {
  display: block;
  max-width: 1600px;
  margin: 0 auto;
}
.abm-mission__head {
  display: grid;
  grid-template-columns: minmax(160px, .34fr) minmax(0, 1.66fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
  padding-bottom: clamp(32px, 4vw, 52px);
  border-bottom: 1px solid var(--abm-line);
}
.abm-kicker {
  position: static;
  display: flex;
  align-items: center;
  gap: 15px;
  padding-top: 6px;
}
.abm-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--abm-rust);
}
.abm-mission__head .abm-eyebrow {
  margin-bottom: 14px;
  color: var(--abm-rust);
}
.abm-mission__head .abm-h2 {
  max-width: 910px;
  margin-bottom: 0;
  font-size: clamp(46px, 5vw, 74px);
}
.abm-mission__layout {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
  padding-top: clamp(36px, 4.5vw, 60px);
}
.abm-mission__narrative > p {
  color: #5C4C46;
  font-size: 18px;
  line-height: 1.8;
}
.abm-mission__narrative .abm-mission__lead {
  margin-top: 0;
  color: var(--abm-ink);
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(24px, 2vw, 31px);
  line-height: 1.42;
}
.abm-mission__narrative > p + p { margin-top: 26px; }
.abm-statement,
.abm-statement--verbatim {
  position: relative;
  margin: 0;
  padding: clamp(42px, 4.8vw, 64px);
  border: 0;
  background: linear-gradient(145deg, var(--abm-deep-hi), var(--abm-deep-lo));
  color: #FCF7EE;
  box-shadow: 0 30px 70px rgba(71,35,19,.13);
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(21px, 1.75vw, 27px);
  line-height: 1.52;
}
.abm-statement::before {
  content: "“";
  display: block;
  margin-bottom: 22px;
  color: var(--abm-gold);
  font-size: 74px;
  line-height: .5;
}
.abm-statement__label {
  display: block;
  margin-bottom: 26px;
  color: #FFD27A;
  font-family: "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.abm-card {
  position: relative;
  overflow: visible;
  margin-top: clamp(40px, 5vw, 62px);
  padding: 34px 0 0;
  border-top: 1px solid var(--abm-line);
  background: transparent;
}
.abm-card::after { content: none; }
.abm-card h3 {
  margin: 19px 0 14px;
  font-size: clamp(29px, 2.6vw, 39px);
}
.abm-card p { margin-bottom: 0; }

/* Vision: stay inside Huda's established burgundy, cream, and gold palette. */
.abm-vision {
  grid-template-columns: .9fr 1.1fr;
  background: linear-gradient(145deg, var(--abm-deep-hi), var(--abm-deep-lo));
}
.abm-vision__image::after {
  background: linear-gradient(90deg, transparent 52%, rgba(64,22,5,.46));
}
.abm-vision__copy p { color: #E6DFDC; }

/* Values: an editorial scroll sequence, not four interchangeable cards. */
.abm-values { position: relative; }
.abm-values__head {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  gap: clamp(55px, 9vw, 145px);
  align-items: start;
  margin-bottom: 0;
}
.abm-values__sticky {
  position: sticky;
  top: calc(var(--nav-h) + 2.5rem);
}
.abm-values__head p {
  max-width: 520px;
  color: #66544D;
  font-size: 17px;
  line-height: 1.75;
}
.abm-values__progress {
  width: min(250px, 70%);
  height: 2px;
  margin-top: 43px;
  overflow: hidden;
  background: rgba(168,50,38,.17);
}
.abm-values__progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--abm-rust);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
.abm-grid {
  display: block;
  border-top: 1px solid var(--abm-line);
  border-bottom: 0;
}
.abm-value,
.abm-value:first-child,
.abm-value:last-child {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: clamp(24px, 4vw, 54px);
  min-height: clamp(260px, 31vw, 390px);
  padding: clamp(54px, 7vw, 90px) 0;
  border: 0;
  border-bottom: 1px solid var(--abm-line);
  background: transparent;
  box-shadow: none;
}
.abm-value:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.abm-value__index {
  padding-top: 12px;
  color: var(--abm-rust);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
}
.abm-value__word {
  position: absolute;
  top: 50%;
  right: 1vw;
  color: rgba(168,50,38,.055);
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(120px, 16vw, 235px);
  line-height: .7;
  transform: translateY(-50%);
  pointer-events: none;
}
.abm-value h3 {
  position: relative;
  margin: 0 0 20px;
  color: var(--abm-rust);
  font-size: clamp(47px, 6vw, 82px);
  line-height: 1;
  letter-spacing: -.035em;
}
.abm-value p {
  position: relative;
  max-width: 510px;
  margin: 0;
  color: #65544E;
  font-size: 17px;
  line-height: 1.75;
}
html.js .abm .abm-value[data-rv] { transform: translateX(34px); }
html.js .abm .abm-value[data-rv].is-in,
html.abm-revealed .abm .abm-value[data-rv] { transform: none; }

/* Related navigation: the same editorial tile language as /about/. */
.abm-proof {
  display: block;
  background: var(--abm-paper);
}
.abm-proof__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  margin-bottom: 54px;
}
.abm-proof__intro {
  max-width: 480px;
  color: #65544E;
  font-size: 17px;
  line-height: 1.75;
}
.abm-list {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  grid-template-rows: repeat(3, minmax(160px, 1fr));
  gap: 18px;
  /* 640, not the 590 this started at: the three stacked rows carry photographs
     now and 590/3 left each band 185px, too little for a picture and a caption
     both. 640/3 is 200px, and the feature poster grows with them. */
  min-height: 640px;
  border: 0;
}
.abm-row {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 0;
  padding: 0;
  border: 0;
  color: #FDF8F1;
  background: linear-gradient(150deg, #982620, #7B2319);
  isolation: isolate;
  transition: transform 220ms cubic-bezier(.23, 1, .32, 1), box-shadow 220ms cubic-bezier(.23, 1, .32, 1);
}
.abm-row::before { content: none; }
.abm-row--feature { grid-row: 1 / 4; }
.abm-row__media,
.abm-row__media::after { position: absolute; inset: 0; }
.abm-row__media { z-index: -2; }
.abm-row__media img { transition: transform 700ms cubic-bezier(.23, 1, .32, 1); }
.abm-row__media::after {
  content: "";
  background: linear-gradient(0deg, rgba(32,14,6,.9), rgba(32,14,6,.06) 76%);
}
.abm-row__body {
  position: relative;
  width: 100%;
  min-width: 0;
  margin-top: auto;
  padding: clamp(27px, 3.2vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 24px;
}
.abm-row small {
  grid-column: 1 / -1;
  color: #FED176;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.abm-row strong {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(25px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.1;
}
.abm-row__arrow {
  width: 45px;
  height: 45px;
  border-color: rgba(255,255,255,.55);
  color: #FDF8F1;
  transition: background-color 220ms ease, color 220ms ease, transform 220ms cubic-bezier(.23, 1, .32, 1);
}
.abm-row:hover {
  padding-left: 0;
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(70,33,17,.15);
}
.abm-row:hover .abm-row__media img { transform: scale(1.045); }
.abm-row:hover .abm-row__arrow {
  background: #FDF8F1;
  color: var(--abm-rust);
  transform: rotate(-35deg);
}
.abm-row:active { transform: scale(.985); }
.abm-row:focus-visible { outline-offset: 4px; }

/* THE THREE STACKED ROWS ARE PHOTOGRAPHS TOO (2026-09-19).
   Every row in this list now carries its DESTINATION's picture from the
   quick-link inventory (tools/quicklink-photos.json), not this page's art: the
   feature showed abt-hero.webp, which is /about/'s hero and was doing duty as
   a generic school photograph in several places at once, and the other three
   showed nothing at all. Same rule as /about/'s .abt-linkgrid, which this list
   was built to echo.

   THEY ARE NOT A SECOND KIND OF TILE. They reuse .abm-row__media, the same
   ::after scrim idiom and the same .abm-noise film as the feature; what
   changes below is only what a 200px-tall band needs and a 640px-tall poster
   does not. No new element, no thumbnail rail.

   WHY THE SCRIM AND THE TITLE ARE RE-CUT RATHER THAN INHERITED. The feature's
   ramp reaches .06 alpha at 76% of its height, which is 486px up a 640px tile
   and nowhere near its caption. On a 200px band 76% is 152px, so the same ramp
   drops the eyebrow and the first line of the title into the clear part of the
   gradient - and the seedling and the fountain pen are both bright enough
   there that cream type over them cannot be read. That is exactly what the
   first attempt looked like.
   Two changes fix it together. The scrim holds above .75 alpha across the
   whole caption and is at its .93 floor by 44%, and the title steps down one
   size so the caption is two lines rather than three. The step is also right
   on its own terms: 42px is the size for the feature's 715px column, and
   setting the 477px column at the same size wrapped every one of these three
   titles onto three lines.
   Measured at 1440 over the brightest pixel each caption can sit on, worst of
   the three: 7.4:1 for the body type and 5.5:1 for the eyebrow, against 4.5:1
   for AA. The feature row is 7.2:1 / 5.3:1 on its own untouched ramp. */
.abm-row:not(.abm-row--feature) .abm-row__media::after {
  background: linear-gradient(0deg,
    rgba(32,14,6,.95) 0%,
    rgba(32,14,6,.93) 44%,
    rgba(32,14,6,.44) 76%,
    rgba(32,14,6,.24) 100%);
}
.abm-row:not(.abm-row--feature) .abm-row__body {
  padding: clamp(20px, 1.9vw, 26px) clamp(21px, 2.1vw, 29px);
  gap: 7px 18px;
}
.abm-row:not(.abm-row--feature) strong {
  font-size: clamp(22px, 1.95vw, 28px);
  line-height: 1.14;
}
.abm-row:not(.abm-row--feature) .abm-row__arrow {
  width: 38px;
  height: 38px;
}

@media (max-width: 1080px) {
  .abm-mission__layout { grid-template-columns: minmax(0, .9fr) minmax(370px, 1.1fr); gap: 52px; }
  .abm-values__head { grid-template-columns: minmax(250px, .75fr) minmax(0, 1.25fr); gap: 55px; }
  .abm-grid { display: block; }
  .abm-value:nth-child(2),
  .abm-value:nth-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--abm-line); }
}

@media (max-width: 760px) {
  .abm-intro { padding: 90px 24px; }
  .abm-mission__head { display: block; }
  .abm-kicker { margin: 0 0 30px; }
  .abm-mission__layout { display: flex; flex-direction: column; gap: 0; }
  .abm-mission__narrative { display: contents; }
  .abm-mission__narrative .abm-mission__lead { order: 1; }
  .abm-mission__narrative > p:not(.abm-mission__lead) { order: 2; }
  .abm-statement { order: 3; margin-top: 38px; }
  .abm-card { order: 4; margin-top: 42px; }
  .abm-statement,
  .abm-statement--verbatim { padding: 42px 30px; }
  .abm-card { padding: 30px 0 0; }
  .abm-values { padding: 90px 24px; }
  .abm-values__head { display: block; }
  .abm-values__sticky { position: static; margin-bottom: 58px; }
  .abm-values__progress { display: none; }
  .abm-value,
  .abm-value:first-child { grid-template-columns: 40px 1fr; min-height: 0; padding: 50px 0; }
  .abm-value__word { right: 0; font-size: clamp(105px, 36vw, 150px); }
  .abm-proof { padding: 90px 18px; }
  .abm-proof__head { display: block; }
  .abm-proof__intro { margin-top: 24px; }
  .abm-list { display: block; min-height: 0; margin-top: 48px; }
  .abm-row,
  .abm-row--feature { min-height: 235px; margin-top: 14px; }
  .abm-row--feature { min-height: 430px; }
}

@media (max-width: 420px) {
  .abm-statement,
  .abm-statement--verbatim { padding: 38px 23px; }
  .abm-value { grid-template-columns: 34px 1fr; gap: 14px; }
  .abm-value h3 { font-size: 43px; }
  /* The `:not(.abm-row--feature)` pair above outranks a bare `.abm-row__body`
     wherever both apply, media query or not - specificity does not care which
     block it is written in. Below 420px .abm-list is a single column, so the
     geometry that split the two kinds apart on the grid no longer exists and
     the feature would have kept the phone padding while its three neighbours
     silently reverted to the desktop values. Restated here so all four rows
     take the phone values. (The TYPE step is deliberately not restated: the
     smaller title is the hierarchy between a poster and its three follow-ons
     and holds at every width.) */
  .abm-row__body,
  .abm-row:not(.abm-row--feature) .abm-row__body { padding: 25px 22px; gap: 8px 14px; }
  .abm-row__arrow,
  .abm-row:not(.abm-row--feature) .abm-row__arrow { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .abm-values__progress span { transform: none !important; }
  .abm-row,
  .abm-row__media img,
  html.js .abm .abm-value[data-rv] { transition: none !important; transform: none !important; }
}

/* Values — approved "Desk Set" direction.
   The four habits are tangible, directly interactive objects rather than a
   sticky scroll sequence. Their slight offsets are intentional: one shared
   set, handled individually, without falling back to a uniform card grid. */
.abm-values {
  padding: clamp(60px, 7vw, 95px) clamp(24px, 6vw, 96px);
  background: var(--abm-sand);
}
.abm-values__head {
  max-width: 1370px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, .68fr) minmax(600px, 1.32fr);
  gap: clamp(60px, 9vw, 145px);
  align-items: center;
}
.abm-values__intro { min-width: 0; }
.abm-values__intro .abm-h2 {
  margin: 16px 0 25px;
  font-size: clamp(48px, 5.7vw, 80px);
  line-height: .96;
  letter-spacing: -.045em;
}
.abm-values__intro > p {
  max-width: 460px;
  margin: 0;
  color: #645049;
  font-size: 16px;
  line-height: 1.7;
}
.abm-values__hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  color: #8A7166;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.abm-values__hint::before {
  content: "";
  width: 27px;
  height: 1px;
  background: var(--abm-rust);
}
.abm-values__desk {
  position: relative;
  height: 530px;
  isolation: isolate;
}
.abm-values__desk::before {
  content: "";
  position: absolute;
  left: 3%;
  right: 1%;
  bottom: 15px;
  height: 150px;
  border-radius: 50%;
  background: rgba(93,47,29,.08);
  filter: blur(28px);
  pointer-events: none;
}
.abm-value-card {
  --card-rotation: 0deg;
  position: absolute;
  width: 46%;
  min-height: 238px;
  padding: 27px 28px 25px;
  border: 1px solid rgba(62,33,19,.15);
  border-radius: 2px;
  background: var(--abm-paper);
  color: var(--abm-ink);
  text-align: left;
  font: inherit;
  box-shadow: 0 22px 42px rgba(70,33,16,.13);
  cursor: pointer;
  transform: rotate(var(--card-rotation));
  transform-origin: center;
  transition:
    transform 220ms cubic-bezier(.23, 1, .32, 1),
    box-shadow 220ms ease-out;
}
.abm-value-card:nth-child(1) { left: 1%; top: 17px; --card-rotation: -3.5deg; z-index: 2; }
.abm-value-card:nth-child(2) { right: 2%; top: 2px; --card-rotation: 2.2deg; z-index: 1; }
.abm-value-card:nth-child(3) { left: 5%; bottom: 7px; --card-rotation: 2.4deg; z-index: 3; }
.abm-value-card:nth-child(4) {
  right: 0;
  bottom: 25px;
  --card-rotation: -2.8deg;
  z-index: 4;
  border-color: rgba(255,255,255,.15);
  background: #7B291D;
  color: var(--abm-paper);
}
.abm-value-card:focus-visible,
.abm-value-card.is-active {
  z-index: 9;
  transform: translateY(-12px) rotate(0) scale(1.025);
  box-shadow: 0 30px 58px rgba(70,33,16,.2);
}
@media (hover: hover) and (pointer: fine) {
  .abm-value-card:hover {
    z-index: 9;
    transform: translateY(-12px) rotate(0) scale(1.025);
    box-shadow: 0 30px 58px rgba(70,33,16,.2);
  }
}
.abm-value-card:focus-visible {
  outline: 3px solid var(--abm-gold);
  outline-offset: 3px;
}
.abm-value-card.is-active {
  box-shadow:
    0 0 0 2px var(--abm-gold),
    0 30px 58px rgba(70,33,16,.2);
}
.abm-value-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.abm-value-card__num {
  color: var(--abm-rust);
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: 24px;
  line-height: 1;
}
.abm-value-card:nth-child(4) .abm-value-card__num { color: var(--abm-gold); }
.abm-value-card__mark {
  width: 28px;
  height: 28px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .35;
}
.abm-value-card__title {
  display: block;
  margin: 40px 0 13px;
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(34px, 3vw, 46px);
  line-height: 1;
  letter-spacing: -.03em;
}
.abm-value-card__copy {
  display: block;
  max-width: 330px;
  color: #66524B;
  font-size: 13.5px;
  line-height: 1.6;
}
.abm-value-card:nth-child(4) .abm-value-card__copy { color: rgba(248,244,238,.72); }

@media (max-width: 920px) {
  .abm-values__head { grid-template-columns: 1fr; }
  .abm-values__intro > p { max-width: 650px; }
  .abm-values__desk { margin-top: 12px; }
}

@media (max-width: 600px) {
  .abm-values { padding: 48px 20px 70px; }
  .abm-values__intro .abm-h2 { font-size: 48px; }
  .abm-values__desk {
    height: auto;
    margin-top: 42px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .abm-values__desk::before { display: none; }
  .abm-value-card,
  .abm-value-card:nth-child(n) {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 0;
    padding: 24px;
    transform: none;
  }
  .abm-value-card__title { margin-top: 28px; }
  .abm-value-card:focus-visible,
  .abm-value-card.is-active { transform: translateY(-4px) scale(1.01); }
}

@media (max-width: 600px) and (hover: hover) and (pointer: fine) {
  .abm-value-card:hover { transform: translateY(-4px) scale(1.01); }
}

@media (prefers-reduced-motion: reduce) {
  .abm-value-card { transition: none; }
}