/* ==========================================================================
   About — heritage dossier
   A cinematic full-bleed hero, a magazine lede with overlapping plates,
   the split that created the product, a vertical timeline spine,
   image-led capability cards, an alternating manifesto and a washed CTA.
   Prefix: ab-
   ========================================================================== */

.ab { background: #000; position: relative; overflow: clip; }
@supports not (overflow: clip) { .ab { overflow: hidden; } }

.ab-wrap { width: 100%; max-width: 1260px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 5; }
.ab-wrap--narrow { max-width: 1060px; }

/* --------------------------------------------------------- shared pieces */

.ab-kick {
  display: inline-flex; align-items: center; gap: 13px;
  color: var(--primary);
  text-transform: uppercase; letter-spacing: .26em;
  font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 600;
}
.ab-kick:before { content: ""; width: 28px; height: 2px; background: var(--primary); flex: none; }
.ab-kick--pale { color: rgba(255,255,255,.45); }
.ab-kick--pale:before { background: rgba(255,255,255,.3); }

.ab-h2 {
  margin: 0; color: #fff; text-transform: uppercase;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.3rem); line-height: 1.02; letter-spacing: -.025em;
}
.ab-h2 em { font-style: normal; color: var(--primary); }
.ab-h2--sm { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.ab-kick + .ab-h2 { margin-top: 20px; }
.ab-lead {
  margin: 22px 0 0; max-width: 58ch;
  color: rgba(255,255,255,.55); font-weight: 300; font-size: 16px; line-height: 1.9;
}

.ab-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 17px 32px;
  border: 2px solid #fff; color: #fff;
  text-transform: uppercase; letter-spacing: .14em;
  font-family: 'Chakra Petch', sans-serif; font-size: 13px; font-weight: 600;
  transition: background .4s cubic-bezier(.22,.61,.36,1), color .4s, border-color .4s;
}
.ab-btn:hover { background: #fff; color: #000; border-color: #fff; }
.ab-btn--solid { background: #000; border-color: #000; }
.ab-btn--solid:hover { background: #fff; border-color: #fff; color: var(--primary); }

/* ------------------------------------------------------------------ hero */

.ab-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 92vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 152px 0 54px;
}
.ab-hero__bg { position: absolute; inset: 0; z-index: 0; }
.ab-hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  filter: grayscale(.55) contrast(1.12) brightness(.5);
}
.ab-hero__bg:after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.3) 34%, rgba(0,0,0,.9) 84%, #000 100%),
    linear-gradient(90deg, rgba(0,0,0,.92), rgba(0,0,0,.1) 66%);
}
.ab-hero__glow {
  position: absolute; z-index: 1; pointer-events: none;
  width: 720px; height: 720px; right: -190px; top: -250px;
  background: radial-gradient(circle, rgba(216,35,52,.5), transparent 66%);
  filter: blur(100px);
}
.ab-hero__mesh {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 112px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
}
.ab-hero__rail {
  position: absolute; z-index: 4; left: 26px; bottom: 60px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  color: rgba(255,255,255,.32);
  text-transform: uppercase; letter-spacing: .3em;
  font-family: 'Chakra Petch', sans-serif; font-size: 10px; font-weight: 600;
}
.ab-hero__in { position: relative; z-index: 5; width: 100%; }
.ab-hero h1 {
  margin: 26px 0 0; color: #fff; text-transform: uppercase;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: clamp(2.5rem, 7.2vw, 6.2rem); line-height: .9; letter-spacing: -.035em;
  max-width: 15ch;
}
.ab-hero h1 em { font-style: normal; color: var(--primary); }
.ab-hero__sub {
  margin: 28px 0 0; max-width: 50ch;
  color: rgba(255,255,255,.68); font-weight: 300; font-size: 17px; line-height: 1.85;
}

/* Glass strip of hard facts, sitting on the photograph. */
.ab-meter {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,.14);
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 52px;
}
.ab-meter > div {
  background: rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 24px 24px 22px;
}
.ab-meter b {
  display: block; color: #fff;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2.05rem); line-height: 1; letter-spacing: -.02em;
}
.ab-meter span {
  display: block; margin-top: 11px; color: rgba(255,255,255,.42);
  text-transform: uppercase; letter-spacing: .18em;
  font-family: 'Chakra Petch', sans-serif; font-size: 10px; font-weight: 600;
}

/* ------------------------------------------------------------------ lede */

.ab-lede { padding: 120px 0 0; }
.ab-lede__grid { display: grid; grid-template-columns: 250px 1fr; gap: 66px; align-items: start; }
.ab-lede__rail { position: sticky; top: 128px; }
.ab-lede__rail p {
  margin: 20px 0 0; color: rgba(255,255,255,.34);
  font-size: 13.5px; font-weight: 300; line-height: 1.9;
}
.ab-lede__mark { display: block; width: 11px; height: 11px; background: var(--primary); margin-top: 28px; }

.ab-lede__lead {
  margin: 0 0 34px; color: #fff; font-weight: 300;
  font-size: clamp(1.15rem, 2.05vw, 1.55rem); line-height: 1.58; letter-spacing: -.012em;
}
.ab-lede__lead:first-letter {
  float: left;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: 3.3em; line-height: .78; color: var(--primary);
  margin: 8px 16px 0 0;
}
.ab-lede__lead strong { color: var(--primary); font-weight: 600; }

.ab-cols { columns: 2; column-gap: 48px; }
.ab-cols p {
  margin: 0 0 20px; color: rgba(255,255,255,.58);
  font-weight: 300; font-size: 15.5px; line-height: 1.92;
  break-inside: avoid-column;
}
.ab-cols p:last-child { margin-bottom: 0; }
.ab-cols strong { color: #fff; font-weight: 600; }

/* Overlapping plates — the only photographs in the story block. */
.ab-plates { padding: 84px 0 190px; }
.ab-plates__grid { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; }
.ab-plate { position: relative; overflow: hidden; margin: 0; }
.ab-plate img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.45) contrast(1.08) brightness(.66); }
.ab-plate--a { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 3 / 2; }
.ab-plate--b {
  grid-column: 8 / 13; grid-row: 1; z-index: 3;
  aspect-ratio: 3 / 4; margin-bottom: -110px;
  box-shadow: -18px 18px 0 0 #000;
}
.ab-plates__cap {
  grid-column: 1 / 8; grid-row: 2;
  display: flex; gap: 16px; align-items: flex-start; margin-top: 26px;
}
.ab-plates__cap i { flex: none; width: 10px; height: 10px; background: var(--primary); margin-top: 6px; }
.ab-plates__cap p {
  margin: 0; color: rgba(255,255,255,.4);
  font-size: 13px; font-weight: 300; line-height: 1.8; max-width: 48ch;
}

/* --------------------------------------------------- the split that mattered */

.ab-turn {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,.1);
}
.ab-turn__side { padding: 92px 5vw; }
.ab-turn__side--was {
  background: #060606;
  padding-left: max(28px, calc(50vw - 630px + 28px));
}
.ab-turn__side--not {
  background: var(--primary);
  padding-right: max(28px, calc(50vw - 630px + 28px));
}
.ab-turn__side h3 {
  margin: 26px 0 0; text-transform: uppercase;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: clamp(1.4rem, 2.8vw, 2.1rem); line-height: 1.05; letter-spacing: -.02em;
}
.ab-turn__side--was h3 { color: #fff; }
.ab-turn__side--not h3 { color: #fff; }
.ab-turn__side--not .ab-kick { color: #fff; }
.ab-turn__side--not .ab-kick:before { background: #fff; }

.ab-turn__list { margin-top: 34px; }
.ab-turn__list div {
  display: flex; gap: 16px; align-items: baseline;
  padding: 17px 0; border-top: 1px solid rgba(255,255,255,.12);
  font-weight: 300; font-size: 16px; line-height: 1.6;
}
.ab-turn__list div:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.ab-turn__list em {
  flex: none; font-style: normal;
  font-family: 'Chakra Petch', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .16em;
}
.ab-turn__side--was .ab-turn__list div { color: rgba(255,255,255,.5); }
.ab-turn__side--was .ab-turn__list em { color: rgba(255,255,255,.28); }
.ab-turn__side--not .ab-turn__list div { color: #fff; border-color: rgba(255,255,255,.32); }
.ab-turn__side--not .ab-turn__list div:last-child { border-bottom-color: rgba(255,255,255,.32); }
.ab-turn__side--not .ab-turn__list em { color: rgba(255,255,255,.65); }

.ab-seal { background: #000; padding: 74px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.ab-seal p {
  margin: 0; color: #fff; text-transform: uppercase; text-align: center;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em;
}
.ab-seal p em { font-style: normal; color: var(--primary); }

/* ----------------------------------------------------------------- spine
   The history drawn as a tracked route — the same language as the Tracks
   screen in their own product. A dashed trace runs down a faint road,
   weaving between milestone cards set left and right, with a waypoint pin
   dropped on each one.

   The connectors are inline SVG on a 0 0 100 100 viewBox with
   preserveAspectRatio="none", so each curve stretches to whatever height the
   gap happens to be and still lands exactly on the next card's centre line —
   no fixed heights anywhere, nothing to re-tune when the copy changes. */

.ab-spine {
  position: relative; padding: 130px 0 142px;
  /* the faintest map grid, so the route reads as a route */
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 88px);
}
.ab-spine__head { margin: 0 0 58px; }
.ab-spine__head .ab-lead { margin-top: 22px; }

.ab-line { position: relative; }
/* the cards fade rather than rise — a shared upward nudge would pull each one
   off the end of its curve while the reveal was still running */
.ab-line .td-rv { transform: none; }

/* --- the road and the trace laid on it --- */
.ab-route { height: 132px; margin: 0; pointer-events: none; }
.ab-route svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ab-route__road {
  fill: none; stroke: rgba(255,255,255,.07); stroke-width: 7;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.ab-route__trace {
  fill: none; stroke: var(--primary); stroke-width: 2;
  stroke-dasharray: 7 8; stroke-linecap: round; vector-effect: non-scaling-stroke;
}

/* --- the milestones --- */
.ab-beat { position: relative; display: flex; }
.ab-beat--right { justify-content: flex-end; }

.ab-beat__card {
  position: relative; width: 48%;
  display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(168deg, #0e0e0e, #050505);
  padding: 38px 38px 40px;
}
/* the waypoint pin, dropped on the card where the route meets it */
.ab-beat__card:before {
  content: ""; position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -50%);
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--primary); border: 3px solid #000;
  box-shadow: 0 0 0 3px rgba(216,35,52,.28);
}

.ab-beat b {
  display: block; color: var(--primary); text-transform: uppercase; letter-spacing: .01em;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; line-height: .9;
  font-size: clamp(2rem, 3.4vw, 3rem);
}
.ab-beat h3 {
  margin: 16px 0 0; color: #fff; text-transform: uppercase;
  font-family: 'Chakra Petch', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: .02em;
}
.ab-beat p {
  margin: 14px 0 0;
  color: rgba(255,255,255,.56); font-weight: 300; font-size: 14.5px; line-height: 1.85;
}
/* the photo sits first in the markup but belongs under the copy, so the year
   is still the first thing read on every card */
.ab-beat__shot {
  order: 9; margin: 28px 0 0; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
}
.ab-beat__shot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.3) brightness(.88) contrast(1.04);
}

/* ----------------------------------------------------------------- craft */

.ab-craft { padding: 0 0 126px; }
.ab-craft__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 34px; flex-wrap: wrap;
  margin-bottom: 44px;
}
.ab-craft__head .ab-lead { margin-top: 18px; }
.ab-craft__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.ab-card {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  min-height: 392px; padding: 36px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ab-card__bg { position: absolute; inset: 0; z-index: 0; }
.ab-card__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.34) brightness(.86) contrast(1.04);
  transition: transform .9s cubic-bezier(.22,.61,.36,1), filter .6s ease;
}
.ab-card__bg:after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.14) 40%, rgba(0,0,0,.52) 68%, rgba(0,0,0,.87) 100%);
}
.ab-card:hover .ab-card__bg img { transform: scale(1.06); filter: grayscale(.12) brightness(1) contrast(1.02); }
.ab-card__n {
  position: absolute; z-index: 3; top: 28px; left: 36px;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 2.5rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.3px rgba(255,255,255,.55);
  transition: -webkit-text-stroke-color .45s ease, color .45s ease;
}
@supports not (-webkit-text-stroke: 1px #fff) { .ab-card__n { color: rgba(255,255,255,.5); } }
.ab-card:hover .ab-card__n { -webkit-text-stroke-color: var(--primary); color: transparent; }
.ab-card h3 {
  position: relative; z-index: 3; margin: 0; color: #fff; text-transform: uppercase;
  font-family: 'Chakra Petch', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: .02em;
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
}
.ab-card p {
  position: relative; z-index: 3; margin: 13px 0 0; max-width: 42ch;
  color: rgba(255,255,255,.8); font-weight: 300; font-size: 14.5px; line-height: 1.85;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.ab-card:before {
  content: ""; position: absolute; z-index: 4; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--primary); transition: width .55s cubic-bezier(.22,.61,.36,1);
}
.ab-card:hover:before { width: 100%; }

/* ------------------------------------------------------------- house code */

.ab-code { border-top: 1px solid rgba(255,255,255,.1); padding: 106px 0 118px; }
.ab-code__head { margin-bottom: 46px; }
/* Five cards over a six-column grid: the two that need the most explaining
   take half the top row, the three short ones sit a third each underneath —
   so an odd number never leaves a hole. */
.ab-code__list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
/* Solid red, so the rules read as the loudest thing on a page that is
   otherwise black — the gradient and the top-left sheen stop five large
   flat blocks from going dead. */
.ab-rule {
  position: relative; overflow: hidden; grid-column: span 2;
  display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(ellipse 72% 58% at 14% 0%, rgba(255,255,255,.10), transparent 62%),
    linear-gradient(158deg, #d42535 0%, #bb1c2b 54%, #9c1522 100%);
  box-shadow: 0 16px 38px rgba(216,35,52,.15);
  padding: 30px 30px 34px;
  transition: border-color .45s ease, transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
}
.ab-rule:nth-child(-n+2) { grid-column: span 3; }
.ab-rule:before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: #fff; transition: width .55s cubic-bezier(.22,.61,.36,1);
}
.ab-rule:hover {
  transform: translateY(-6px); border-color: rgba(255,255,255,.5);
  box-shadow: 0 28px 58px rgba(216,35,52,.3);
}
.ab-rule:hover:before { width: 100%; }
.ab-rule__n {
  margin-bottom: 20px;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 2.5rem; line-height: .85;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.62);
  transition: color .4s ease, -webkit-text-stroke-color .4s ease;
}
@supports not (-webkit-text-stroke: 1px #fff) { .ab-rule__n { color: rgba(255,255,255,.58); } }
.ab-rule h3 {
  margin: 0; color: #fff; text-transform: none; letter-spacing: -.012em;
  font-family: 'Chakra Petch', sans-serif; font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.3;
}
.ab-rule:nth-child(-n+2) h3 { font-size: clamp(1.15rem, 1.9vw, 1.55rem); }
.ab-rule p { margin: 12px 0 0; color: rgba(255,255,255,.95); font-weight: 300; font-size: 14.5px; line-height: 1.85; }
.ab-rule:hover .ab-rule__n { color: #fff; -webkit-text-stroke-color: #fff; }

/* ----------------------------------------------------------------- proof */

.ab-proof { background: #060606; border-top: 1px solid rgba(255,255,255,.1); padding: 104px 0 116px; }
.ab-proof__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 74px; align-items: start; }
.ab-plaques { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 36px; }
.ab-plaque {
  background: #fff; height: 118px; padding: 18px 22px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.ab-plaque:hover { transform: translateY(-5px); }
.ab-plaque:after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px;
  background: var(--primary); transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.ab-plaque:hover:after { transform: none; }
.ab-plaque img { max-height: 64px; width: auto; display: block; }
.ab-proof h3 {
  margin: 26px 0 0; color: #fff; text-transform: uppercase;
  font-family: 'Chakra Petch', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: .04em;
}
.ab-proof p { margin: 12px 0 0; color: rgba(255,255,255,.55); font-weight: 300; font-size: 15px; line-height: 1.85; }
.ab-proof p strong { color: #fff; font-weight: 600; }

.ab-registry { border-top: 1px solid rgba(255,255,255,.16); margin: 26px 0 0; }
.ab-registry > div {
  display: grid; grid-template-columns: 186px 1fr; gap: 26px;
  padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.09);
}
.ab-registry dt {
  margin: 0; color: rgba(255,255,255,.4); padding-top: 3px;
  text-transform: uppercase; letter-spacing: .14em;
  font-family: 'Chakra Petch', sans-serif; font-size: 10px; font-weight: 600;
}
.ab-registry dd { margin: 0; color: rgba(255,255,255,.82); font-weight: 300; font-size: 15px; line-height: 1.75; }
.ab-registry dd a {
  color: var(--primary); text-transform: none; letter-spacing: 0;
  font-family: inherit; font-size: inherit; font-weight: inherit; display: inline;
  border-bottom: 1px solid rgba(216,35,52,.4);
}
.ab-registry dd a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.5); }

/* ------------------------------------------------------------------ visit */

.ab-visit { position: relative; isolation: isolate; overflow: hidden; padding: 124px 0; text-align: center; }
.ab-visit__bg { position: absolute; inset: 0; z-index: 0; }
.ab-visit__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.75) brightness(.55) contrast(1.1); }
.ab-visit__bg:after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(216,35,52,.94) 0%, rgba(150,14,26,.8) 46%, rgba(0,0,0,.86) 100%);
}
.ab-visit h2 {
  margin: 22px 0 0; color: #fff; text-transform: uppercase;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: clamp(1.8rem, 4.6vw, 3.4rem); line-height: 1.02; letter-spacing: -.025em;
}
.ab-visit p { margin: 20px auto 0; max-width: 54ch; color: rgba(255,255,255,.88); font-weight: 300; font-size: 16.5px; line-height: 1.85; }
.ab-visit .ab-kick { color: #fff; }
.ab-visit .ab-kick:before { background: #fff; }
.ab-visit__acts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .ab-hero { min-height: 0; padding: 132px 0 46px; }
  .ab-hero__rail { display: none; }
  .ab-lede { padding-top: 84px; }
  .ab-lede__grid { grid-template-columns: 1fr; gap: 34px; }
  .ab-lede__rail { position: static; }
  .ab-cols { columns: 1; }
  .ab-plates { padding: 64px 0 150px; }
  .ab-turn { grid-template-columns: 1fr; }
  .ab-turn__side { padding: 70px 28px; }
  .ab-turn__side--was, .ab-turn__side--not { padding-left: 28px; padding-right: 28px; }
  .ab-spine { padding: 86px 0; }
  .ab-craft__grid { grid-template-columns: 1fr; }
  .ab-craft { padding-bottom: 88px; }
  .ab-code { padding: 80px 0 88px; }
  .ab-proof__grid { grid-template-columns: 1fr; gap: 48px; }
  .ab-visit { padding: 92px 0; }
}

@media (max-width: 1000px) {
  .ab-beat__card { width: 56%; }
  .ab-route { height: 108px; }
}

@media (max-width: 820px) {
  /* No room to weave. The cards go full width and the route straightens into
     a single dashed run — the SVG curves are dropped rather than stretched,
     since their anchors assume a card sitting at 24% or 76%. */
  .ab-beat__card { width: 100%; padding: 30px 28px 32px; }
  .ab-route { height: 62px; position: relative; }
  .ab-route svg { display: none; }
  .ab-route:before {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
    border-left: 2px dashed var(--primary);
  }
}

@media (max-width: 980px) {
  .ab-code__list { grid-template-columns: repeat(2, 1fr); }
  .ab-rule, .ab-rule:nth-child(-n+2) { grid-column: span 1; }
  .ab-rule:nth-child(5) { grid-column: span 2; }
}

@media (max-width: 700px) {
  .ab-wrap { padding: 0 20px; }
  .ab-hero { padding: 118px 0 40px; }
  .ab-meter { grid-template-columns: 1fr 1fr; margin-top: 40px; }
  .ab-meter > div { padding: 18px; }
  .ab-plates__grid { display: block; }
  .ab-plate--a { aspect-ratio: 4 / 3; }
  .ab-plate--b { aspect-ratio: 4 / 3; margin: -46px 0 0 34px; box-shadow: -14px -14px 0 0 #000; }
  .ab-plates { padding-bottom: 80px; }
  .ab-plates__cap { margin-top: 22px; }
  .ab-card { min-height: 320px; padding: 28px; }
  .ab-card__n { top: 22px; left: 28px; }
  .ab-code__list { grid-template-columns: 1fr; }
  .ab-rule, .ab-rule:nth-child(-n+2), .ab-rule:nth-child(5) { grid-column: span 1; }
  .ab-rule { padding: 26px 24px 28px; }
  .ab-rule__n { margin-bottom: 14px; font-size: 1.8rem; }
  .ab-plaques { grid-template-columns: 1fr; }
  .ab-registry > div { grid-template-columns: 1fr; gap: 6px; }
  .ab-visit__acts a { width: 100%; }
}