/* ==========================================================================
   Anna City Armoury — base, layout and components
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--on-ink);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--signal); color: var(--white); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: var(--r-xs); }

/* Film grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Helpers ---------- */
.wrap { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.signal { color: var(--signal); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.section { padding: var(--section-pad) 0; position: relative; }
.theme-bone { background: var(--bone); color: var(--on-bone); }
/* Alternate bands float as soft rounded panels */
.section.theme-bone, .section.theme-ink2 { border-radius: var(--r-band); margin-inline: clamp(6px, 0.8vw, 14px); }
.theme-bone ::selection { background: var(--black); color: var(--white); }
.theme-ink2 { background: var(--ink-2); }

h1 em, h2 em, h3 em, .manifesto__text em { font-style: normal; color: var(--signal); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* ---------- Section head: index on the left, title on the right ---------- */
.sec-head {
  display: grid;
  grid-template-columns: minmax(180px, 3fr) 9fr;
  gap: 1.5rem var(--gutter);
  align-items: end;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.sec-index {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  align-self: start;
  justify-self: start;
  padding: 0.45rem 0.95rem;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  opacity: 0.75;
}
.sec-index b { color: var(--signal); font-weight: 600; }
.sec-title { font-size: var(--fs-h2); }
.sec-title em { font-style: normal; color: var(--signal); }
.sec-note {
  grid-column: 2;
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--on-ink-dim);
}
.theme-bone .sec-note { color: var(--on-bone-dim); }

/* ---------- Buttons ---------- */
.btn {
  --btn-fg: var(--on-ink);
  --btn-bg: transparent;
  --btn-fill: var(--on-ink);
  --btn-fg-hover: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.05rem 1.4rem;
  border: 1px solid currentColor;
  color: var(--btn-fg);
  background: var(--btn-bg);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  border-radius: var(--r-pill);
  transition: color 0.45s var(--ease-out), border-color 0.45s var(--ease-out), box-shadow 0.5s var(--ease-out), translate 0.5s var(--ease-spring), scale 0.3s var(--ease-spring);
  will-change: transform;
}
.btn:hover { translate: 0 -2px; box-shadow: var(--shadow-md); }
.btn:active { scale: 0.96; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: translateY(101%);
  transition: transform 0.6s var(--ease-out), border-radius 0.6s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; border-radius: 0; }
.btn:hover, .btn:focus-visible { color: var(--btn-fg-hover); }
.btn__label { position: relative; display: inline-block; overflow: hidden; line-height: 1.2; }
.btn__label > span { display: block; transition: transform 0.55s var(--ease-out); }
.btn__label::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  transition: transform 0.55s var(--ease-out);
}
.btn:hover .btn__label > span, .btn:hover .btn__label::after { transform: translateY(-100%); }
.btn__arrow { display: inline-block; transition: transform 0.55s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px) rotate(-45deg); }

.btn--signal {
  --btn-fg: var(--ink);
  --btn-bg: var(--signal);
  --btn-fill: var(--on-ink);
  --btn-fg-hover: var(--ink);
  border-color: var(--signal);
}
.btn--signal:hover { border-color: var(--on-ink); }
.btn--signal { box-shadow: 0 0 0 rgba(255, 77, 28, 0); }
.btn--signal:hover { box-shadow: var(--shadow-signal); }
.theme-bone .btn { --btn-fg: var(--on-bone); --btn-fill: var(--black); --btn-fg-hover: var(--white); }
.theme-bone .btn--signal { --btn-fg: var(--white); --btn-fill: var(--black); --btn-fg-hover: var(--white); }
.btn--sm { padding: 0.7rem 1rem; font-size: 0.7rem; gap: 0.7rem; }
.btn--block { width: 100%; justify-content: space-between; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  padding-bottom: 3px;
  transition: background-size 0.5s var(--ease-out);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow span { transition: transform 0.4s var(--ease-out); }
.link-arrow:hover span { transform: translateX(4px); }

/* ---------- Store status pill ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}
.status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--on-ink-faint);
  position: relative;
}
.status.is-open .status__dot { background: var(--status-available); }
.status.is-open .status__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--status-available);
  animation: ping 1.8s var(--ease-out) infinite;
}
.status.is-closed .status__dot { background: var(--status-out); }

/* ---------- Brand mark ---------- */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand__mark { width: 34px; height: 34px; flex: none; color: var(--signal); transition: transform 0.8s var(--ease-out); }
.brand:hover .brand__mark { transform: rotate(90deg); }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  line-height: 0.92;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   Header
   ========================================================================== */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 500;
  height: var(--header-h);
  color: var(--on-ink);
  border: 1px solid transparent;
  border-radius: 0;
  transition: transform 0.6s var(--ease-out), background-color 0.4s, border-color 0.4s, inset 0.6s var(--ease-out), border-radius 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.hdr.is-scrolled {
  inset: 10px clamp(8px, 1.4vw, 20px) auto;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-color: var(--rule-ink);
  box-shadow: var(--shadow-md);
}
.hdr.is-hidden { transform: translateY(calc(-100% - 14px)); }
.hdr__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.hdr__progress {
  position: absolute;
  left: var(--r-lg);
  right: var(--r-lg);
  bottom: -1px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--signal);
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
}
.hdr__right { display: flex; align-items: center; gap: 1.4rem; }

.nav__list { display: flex; gap: 0.2rem; }
.nav__item { position: relative; }
.nav__link {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink-dim);
  white-space: nowrap;
  border-radius: var(--r-pill);
  transition: color 0.3s, background 0.4s var(--ease-out);
}
.nav__item:hover > .nav__link { background: var(--ink-3); }
.nav__link sup { font-size: 0.6em; color: var(--on-ink-faint); transition: color 0.3s; }
.nav__item:hover > .nav__link, .nav__item.is-active > .nav__link { color: var(--on-ink); }
.nav__item.is-active > .nav__link sup, .nav__item:hover > .nav__link sup { color: var(--signal); }
.nav__drop {
  position: absolute;
  top: 100%;
  left: 0.3rem;
  min-width: 240px;
  padding: 0.6rem;
  background: var(--ink);
  border: 1px solid var(--rule-ink);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.96);
  transform-origin: top left;
  transition: opacity 0.3s, transform 0.5s var(--ease-spring), visibility 0.3s;
}
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop { opacity: 1; visibility: visible; transform: none; }
.nav__drop a {
  display: flex;
  justify-content: space-between;
  padding: 0.7rem 0.75rem;
  font-size: 0.92rem;
  color: var(--on-ink-dim);
  border-radius: var(--r-sm);
  transition: color 0.3s, padding 0.4s var(--ease-out), background 0.3s;
}
.nav__drop a::after { content: "→"; opacity: 0; transition: opacity 0.3s; color: var(--signal); }
.nav__drop a:hover { color: var(--on-ink); padding-left: 1.1rem; background: var(--ink-3); }
.nav__drop a:hover::after { opacity: 1; }

.menu-btn {
  display: none;
  align-items: center;
  gap: 0.7rem;
  height: 40px;
  padding: 0 0.2rem;
}
.menu-btn__bars { position: relative; width: 26px; height: 10px; }
.menu-btn__bars::before, .menu-btn__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.5s var(--ease-out), top 0.5s var(--ease-out);
}
.menu-btn__bars::before { top: 0; }
.menu-btn__bars::after { top: 100%; width: 65%; }
.menu-open .menu-btn__bars::before { top: 50%; transform: rotate(45deg); }
.menu-open .menu-btn__bars::after { top: 50%; width: 100%; transform: rotate(-45deg); }

/* Full-screen mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  background: var(--ink-2);
  clip-path: inset(0 0 100% 0 round 0 0 50% 50%);
  visibility: hidden;
  transition: clip-path 0.9s var(--ease-inout), visibility 0s 0.9s;
  overflow-y: auto;
}
.menu-open .menu { clip-path: inset(0 0 0 0 round 0); visibility: visible; transition: clip-path 0.9s var(--ease-inout); }
.menu__list > li { border-bottom: 1px solid var(--rule-ink); overflow: hidden; }
.menu__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  padding: 0.55rem 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 11vw, 4.5rem);
  line-height: 1;
  text-transform: uppercase;
  text-align: left;
  transform: translateY(105%);
  transition: transform 0.9s var(--ease-out), color 0.3s;
}
.menu__link sup { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; color: var(--signal); }
.menu-open .menu__link { transform: none; }
.menu-open .menu__list > li:nth-child(2) .menu__link { transition-delay: 0.05s; }
.menu-open .menu__list > li:nth-child(3) .menu__link { transition-delay: 0.1s; }
.menu-open .menu__list > li:nth-child(4) .menu__link { transition-delay: 0.15s; }
.menu-open .menu__list > li:nth-child(5) .menu__link { transition-delay: 0.2s; }
.menu-open .menu__list > li:nth-child(6) .menu__link { transition-delay: 0.25s; }
.menu-open .menu__list > li:nth-child(7) .menu__link { transition-delay: 0.3s; }
.menu__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-out);
}
.menu__sub > div { overflow: hidden; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.menu__sub a { padding: 0 0 1rem; color: var(--on-ink-dim); }
.menu__list > li.is-open .menu__sub { grid-template-rows: 1fr; }
.menu__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 2rem; color: var(--on-ink-dim); }

/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--header-h) + 1.5rem) 0 2rem;
  display: flex;
  overflow: hidden;
  isolation: isolate;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 0 var(--gutter);
  width: 100%;
}
.hero__top {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--rule-ink);
  color: var(--on-ink-dim);
}
.hero__media {
  grid-column: 7 / -1;
  grid-row: 2 / 4;
  position: relative;
  margin: 1.5rem 0 0;
  overflow: hidden;
  min-height: 52vh;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.hero__img {
  position: absolute;
  inset: -12% 0;
  background: center / cover no-repeat;
  filter: grayscale(0.85) contrast(1.1) brightness(0.98);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(13, 14, 11, 0.7));
}
.hero__plate {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  color: var(--white);
}
.hero__title {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  position: relative;
  z-index: 3;
  font-size: var(--fs-hero);
  line-height: 0.84;
  padding: 2.5rem 0 2rem;
  color: var(--on-ink);
  pointer-events: none;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero__title .line > span { display: inline-block; }
.hero__title .indent { padding-left: 1.2em; }
.hero__title em { font-style: normal; color: var(--signal); mix-blend-mode: normal; }
.hero__bottom {
  grid-column: 1 / 7;
  grid-row: 3;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  padding-top: 1.2rem;
}
.hero__lead { max-width: 44ch; font-size: var(--fs-lead); line-height: 1.45; color: var(--on-ink-dim); }
.hero__lead strong { color: var(--on-ink); font-weight: 500; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hero__live {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-ink);
  color: var(--on-ink-dim);
}
.hero__live b { color: var(--on-ink); font-weight: 500; }

/* Reticle that tracks the cursor across the hero */
.reticle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 128px;
  height: 128px;
  margin: -64px 0 0 -64px;
  color: var(--signal);
  pointer-events: none;
  will-change: transform;
}
.reticle svg { width: 100%; height: 100%; overflow: visible; }
.reticle__ring { transform-origin: 64px 64px; animation: spin 18s linear infinite; }
.reticle__readout {
  position: absolute;
  left: 76px;
  top: 76px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--on-ink);
}
.reticle__readout span { color: var(--signal); }
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: 2rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  writing-mode: vertical-rl;
  color: var(--on-ink-dim);
}
.hero__scroll i { display: block; border-radius: var(--r-pill); width: 1px; height: 60px; background: var(--rule-ink-strong); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--signal); animation: drip 2s var(--ease-inout) infinite; }

/* ==========================================================================
   Brand ticker
   ========================================================================== */
.ticker {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule-ink);
  padding: 1.4rem 0;
  background: var(--ink);
}
.ticker__track { display: flex; width: max-content; will-change: transform; }
.ticker__group { display: flex; align-items: center; flex: none; }
.ticker__item {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  padding-right: 2.2rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.4vw, 5rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker__item:nth-child(even) { color: transparent; -webkit-text-stroke: 1.2px var(--on-ink-dim); }
.ticker__item svg { width: 0.42em; height: 0.42em; color: var(--signal); flex: none; }

/* ==========================================================================
   Manifesto (scroll-filled text)
   ========================================================================== */
.manifesto { padding: var(--section-pad) 0; }
.manifesto__grid { display: grid; grid-template-columns: minmax(180px, 3fr) 9fr; gap: 2rem var(--gutter); }
.manifesto__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 4.2rem);
  line-height: 1;
  text-transform: uppercase;
}
.manifesto__text .w { color: var(--on-ink-faint); transition: color 0.2s; }
.manifesto__text .w.is-lit { color: var(--on-ink); }
.manifesto__text .w.hl.is-lit { color: var(--signal); }
.manifesto__sign { margin-top: 2.4rem; display: flex; gap: 2rem; color: var(--on-ink-dim); }

/* ==========================================================================
   Categories — pinned horizontal scroll
   ========================================================================== */
.hscroll { position: relative; overflow: hidden; background: var(--ink-2); }
.hscroll__track {
  display: flex;
  gap: var(--gutter);
  height: 100svh;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
  width: max-content;
  will-change: transform;
}
.hscroll__intro {
  width: min(520px, 80vw);
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 2rem;
}
.hscroll__intro h2 { font-size: var(--fs-h1); }
.hscroll__intro p { max-width: 34ch; color: var(--on-ink-dim); font-size: var(--fs-lead); line-height: 1.45; }
.hscroll__hint { display: flex; align-items: center; gap: 0.8rem; color: var(--on-ink-dim); }
.hscroll__hint i { width: 60px; height: 1px; background: var(--rule-ink-strong); position: relative; overflow: hidden; }
.hscroll__hint i::after { content: ""; position: absolute; inset: 0; background: var(--signal); animation: slide 2s var(--ease-inout) infinite; }

.cat {
  position: relative;
  flex: none;
  width: min(62vw, 880px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--rule-ink);
  border-radius: var(--r-xl);
  background: var(--ink);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.6s var(--ease-out);
}
.cat:hover { box-shadow: var(--shadow-lg); }
.cat__head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid var(--rule-ink); color: var(--on-ink-dim); }
.cat__media { position: relative; overflow: hidden; min-height: 0; }
.cat__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.92);
  transform: scale(1.08);
  transition: filter 0.9s var(--ease-out), transform 1.4s var(--ease-out);
}
.cat:hover .cat__media img { filter: grayscale(0.1) contrast(1.05) brightness(1); transform: scale(1.02); }
.cat__num {
  position: absolute;
  right: 1rem;
  bottom: -0.12em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(7rem, 16vw, 15rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--white);
  opacity: 0.85;
  pointer-events: none;
}
.cat__foot { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: end; padding: 1.4rem 1.2rem 1.3rem; }
.cat__title { font-size: clamp(2.6rem, 5vw, 4.8rem); }
.cat__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cat__subs { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; position: relative; z-index: 2; }
.cat__subs a { color: var(--on-ink-dim); font-size: 0.92rem; transition: color 0.3s; }
.cat__subs a:hover { color: var(--signal); }

/* ==========================================================================
   The rack — indexed product list with floating preview
   ========================================================================== */
.rack { border-top: 1px solid var(--rule-ink-strong); }
.rack__head, .rack__row {
  display: grid;
  grid-template-columns: 4rem 1.2fr 2.6fr 0.8fr 0.9fr 0.8fr 1.4fr 2.5rem;
  gap: 1rem;
  align-items: center;
}
.rack__head { padding: 0.9rem 0; color: var(--on-ink-faint); border-bottom: 1px solid var(--rule-ink); }
.rack__row {
  position: relative;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule-ink);
  isolation: isolate;
}
.rack__row::before {
  content: "";
  position: absolute;
  inset: 0.3rem calc(var(--gutter) * -0.5);
  z-index: -1;
  background: var(--signal);
  border-radius: var(--r-lg);
  opacity: 0;
  transform: scale(0.96, 0.6);
  transition: transform 0.6s var(--ease-spring), opacity 0.3s;
}
.rack__row:hover::before { transform: none; opacity: 1; }
.rack__row:hover { color: var(--ink); }
.rack__row:hover .rack__dim { color: var(--ink); }
.rack__no { color: var(--on-ink-faint); }
.rack__dim { color: var(--on-ink-dim); transition: color 0.3s; }
.rack__model {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 0.95;
  text-transform: uppercase;
  transition: transform 0.6s var(--ease-out);
}
.rack__row:hover .rack__model { transform: translateX(0.6rem); }
.rack__thumb { display: none; }
.rack__go { justify-self: end; font-size: 1.3rem; transition: transform 0.5s var(--ease-out); }
.rack__row:hover .rack__go { transform: rotate(-45deg); }
.rack__row:hover .stock { color: var(--ink); }
.rack__row:hover .stock::before { background: var(--ink); }
.rack__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 2rem; flex-wrap: wrap; }

.rack-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 340px;
  aspect-ratio: 4 / 3;
  pointer-events: none;
  overflow: hidden;
  background: var(--ink-3);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6) rotate(-4deg);
  transition: opacity 0.35s, transform 0.7s var(--ease-spring);
  will-change: left, top;
}
.rack-preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.rack-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rack-preview .ph { position: absolute; inset: 0; }

/* ---------- Stock label ---------- */
.stock {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--status-available); transition: background 0.3s; }
.stock.limited::before { background: var(--status-limited); }
.stock.out::before { background: var(--status-out); }

/* ==========================================================================
   Product card ("plate")
   ========================================================================== */
.plates { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.8rem, 1.4vw, 1.3rem); }
.plates--3 { grid-template-columns: repeat(3, 1fr); }
.pcard, .bcard {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-bone);
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--on-bone);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.6s var(--ease-out), border-color 0.4s, translate 0.7s var(--ease-spring);
}
.pcard:hover, .bcard:hover { translate: 0 -6px; box-shadow: var(--shadow-lg); border-color: transparent; }
.pcard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0.5rem 0.5rem 0;
  border-radius: calc(var(--r-lg) - 0.4rem);
  background: var(--bone-3);
}
.pcard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
  transform: scale(1.04);
  transition: filter 0.8s var(--ease-out), transform 1.2s var(--ease-out);
}
.pcard__media img.is-wide { object-fit: contain; padding: 0 0.8rem; transform: scale(1); }
.pcard:hover .pcard__media img { filter: grayscale(0) contrast(1.05); transform: scale(1.1); }
.pcard:hover .pcard__media img.is-wide { transform: scale(1.04); }
.pcard__plate { position: absolute; top: 0.8rem; left: 0.9rem; z-index: 2; }
.pcard__tags { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; display: flex; gap: 0.3rem; }
.tag {
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--black);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tag--signal { background: var(--signal); color: var(--ink); }
.pcard__body { display: flex; flex-direction: column; gap: 1rem; padding: 1.2rem 1.1rem 1.3rem; flex: 1; }
.pcard__brand { color: var(--on-bone-dim); }
.pcard__name { font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 0.95; }
.pcard__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcard__desc { font-size: 0.9rem; line-height: 1.5; color: var(--on-bone-dim); }
.pcard__foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-bone);
}
.pcard__more { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: transform 0.4s var(--ease-out), color 0.3s; }
.pcard:hover .pcard__more { color: var(--signal-deep); transform: translateX(-4px); }
.theme-bone .stock::before { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }

/* Spec bars — velocity / weight / caliber read like a range card */
.specs { display: grid; gap: 0.45rem; }
.spec { display: grid; grid-template-columns: 3.4rem 1fr 4.4rem; align-items: center; gap: 0.6rem; }
.spec__k { color: var(--on-bone-dim); }
.spec__bar { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--rule-bone); overflow: hidden; }
.spec__bar i {
  position: absolute;
  inset: 0;
  background: var(--on-bone);
  border-radius: inherit;
  transform-origin: left;
  transform: scaleX(var(--v, 0.5));
}
.spec__bar--signal i { background: var(--signal); }
.spec__v { text-align: right; }

/* Photo placeholder for models without a photo yet */
.ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(var(--rule-bone) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--rule-bone) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bone-3);
  color: var(--on-bone-dim);
}
.ph svg { width: 54%; opacity: 0.55; }
.ph span { position: absolute; bottom: 0.8rem; left: 0.9rem; }

/* ==========================================================================
   Tally / odometer counters
   ========================================================================== */
.tally { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule-ink-strong); }
.tally__item { padding: 1.4rem 1.2rem 0 0; border-right: 1px solid var(--rule-ink); }
.tally__item + .tally__item { padding-left: 1.2rem; }
.tally__item:last-child { border-right: 0; }
.tally__label { color: var(--on-ink-dim); }
.odo {
  display: flex;
  align-items: flex-start;
  margin-top: 1.2rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 9vw, 8.5rem);
  line-height: 0.9;
  height: 0.9em;
  overflow: hidden;
}
.odo > span:not(.odo__col) { display: block; height: 0.9em; line-height: 0.9; }
.odo__col { display: flex; flex-direction: column; transition: transform 2s var(--ease-out); }
.odo__col span { height: 0.9em; display: block; }
.odo__suffix { color: var(--signal); }

/* ==========================================================================
   Visit process steps
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 var(--gutter); }
.step { position: relative; padding-top: 1.6rem; }
.step__rule { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rule-bone-strong); transform-origin: left; }
.step__rule::after { content: ""; position: absolute; left: 0; top: -5px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255, 77, 28, 0.18); background: var(--signal); }
.step__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(4.5rem, 8vw, 7.5rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 1.5px var(--on-bone); }
.step h3 { font-size: var(--fs-h3); margin: 1.6rem 0 0.8rem; }
.step p { color: var(--on-bone-dim); max-width: 32ch; }

/* ==========================================================================
   Quotes
   ========================================================================== */
.quotes { display: grid; grid-template-columns: minmax(180px, 3fr) 9fr; gap: 2rem var(--gutter); }
.quotes__stage { position: relative; min-height: 22rem; }
.quote { position: absolute; inset: 0 0 auto; visibility: hidden; }
.quote.is-active { position: relative; visibility: visible; }
.quote blockquote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 4rem);
  line-height: 1;
  text-transform: uppercase;
}
.quote blockquote .w { display: inline-block; }
.quote figcaption { display: flex; align-items: center; gap: 1.2rem; margin-top: 2.2rem; }
.quote figcaption b { font-weight: 600; font-size: 1.05rem; }
.quote figcaption span { color: var(--on-ink-dim); }
.quote figcaption i { width: 40px; height: 1px; background: var(--signal); }
.quotes__ctrl { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.quotes__count { font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; line-height: 1; }
.quotes__count span { color: var(--on-ink-faint); font-size: 0.45em; }
.quotes__btns { display: flex; gap: 0.5rem; }
.quotes__btns button {
  width: 52px;
  height: 52px;
  border: 1px solid var(--rule-ink-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background 0.3s, color 0.3s, border-color 0.3s, scale 0.4s var(--ease-spring);
}
.quotes__btns button:hover { background: var(--signal); color: var(--ink); border-color: var(--signal); scale: 1.1; }
.quotes__bar { height: 3px; border-radius: var(--r-pill); background: var(--rule-ink); position: relative; overflow: hidden; }
.quotes__bar i { position: absolute; inset: 0; background: var(--signal); transform-origin: left; transform: scaleX(0); }

/* ==========================================================================
   Collage gallery
   ========================================================================== */
.collage { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 9vw; gap: var(--gutter); }
.shot { position: relative; overflow: hidden; background: var(--ink-3); border-radius: var(--r-lg); transition: border-radius 0.8s var(--ease-out); }
.shot:hover { border-radius: var(--r-xl) var(--r-sm); }
.shot img {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(1);
  transition: filter 0.9s var(--ease-out);
}
.shot:hover img { filter: grayscale(0) contrast(1.05) brightness(1.02); }
.shot figcaption { position: absolute; left: 0.9rem; bottom: 0.8rem; z-index: 2; color: var(--white); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.shot--a { grid-column: 1 / 8; grid-row: span 5; }
.shot--b { grid-column: 8 / 13; grid-row: span 3; }
.shot--c { grid-column: 8 / 11; grid-row: span 3; }
.shot--d { grid-column: 11 / 13; grid-row: span 2; }
.shot--e { grid-column: 2 / 6; grid-row: span 3; }
.shot--f { grid-column: 6 / 11; grid-row: span 3; }
.shot--g { grid-column: 11 / 13; grid-row: span 3; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem var(--gutter); align-items: start; }
.faq__aside { position: sticky; top: calc(var(--header-h) + 2rem); }
.faq__aside h2 { font-size: var(--fs-h2); margin: 1.2rem 0 1.4rem; }
.faq__aside p { color: var(--on-bone-dim); max-width: 36ch; margin-bottom: 2rem; }
.faq-list { border-top: 1px solid var(--rule-bone-strong); }
.faq-list { display: grid; gap: 0.6rem; border-top: 0; }
.faq-item { border: 1px solid var(--rule-bone); border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.55); padding: 0 1.3rem; transition: background 0.4s, box-shadow 0.5s var(--ease-out); }
.faq-item:hover, .faq-item.is-open { background: var(--ink); box-shadow: var(--shadow-md); }
.faq-question {
  display: grid;
  grid-template-columns: 3rem 1fr 2rem;
  align-items: center;
  width: 100%;
  padding: 1.5rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.05;
  text-transform: uppercase;
  transition: color 0.3s;
}
.faq-question:hover { color: var(--signal-deep); }
.faq-question .mono { color: var(--on-bone-dim); }
.faq-icon { position: relative; width: 18px; height: 18px; justify-self: end; transition: transform 0.6s var(--ease-spring); }
.faq-item.is-open .faq-icon { transform: rotate(180deg); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; border-radius: var(--r-pill); background: currentColor; transition: transform 0.5s var(--ease-out); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item.is-open .faq-icon::after { transform: rotate(0deg); }
.faq-item.is-open .faq-icon::before { transform: rotate(180deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease-out); }
.faq-answer > div { overflow: hidden; }
.faq-answer p { padding: 0 2rem 1.6rem 3rem; color: var(--on-bone-dim); max-width: 60ch; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }

/* ==========================================================================
   Visit block + map
   ========================================================================== */
.visit { display: grid; grid-template-columns: 6fr 6fr; gap: 3rem var(--gutter); }
.visit__addr { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4.6vw, 4.4rem); line-height: 0.92; text-transform: uppercase; margin: 1.4rem 0 2rem; }
.hours { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
.hours td { padding: 0.7rem 0; border-bottom: 1px solid var(--rule-ink); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; }
.hours td:last-child { text-align: right; color: var(--on-ink-dim); }
.hours tr.is-today td { color: var(--signal); }
.hours tr.is-today td:first-child::before { content: "▸ "; }
.visit__lines { display: grid; gap: 0.3rem; margin-bottom: 2rem; }
.visit__lines a { font-size: 1.15rem; width: fit-content; background: linear-gradient(var(--signal), var(--signal)) left bottom / 0 1px no-repeat; transition: background-size 0.5s var(--ease-out); }
.visit__lines a:hover { background-size: 100% 1px; }
.visit__ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.map {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  background:
    linear-gradient(var(--rule-ink) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--rule-ink) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--ink-2);
  border: 1px solid var(--rule-ink);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.map svg.map__roads { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__roads path { fill: none; stroke: var(--on-ink-faint); stroke-width: 10; stroke-linecap: round; opacity: 0.5; }
.map__roads path.minor { stroke-width: 4; opacity: 0.35; }
.map__roads path.route { stroke: var(--signal); stroke-width: 2.5; stroke-dasharray: 8 8; opacity: 1; animation: dash 1.2s linear infinite; }
.map__pin { position: absolute; left: 58%; top: 46%; width: 70px; height: 70px; margin: -35px 0 0 -35px; color: var(--signal); }
.map__pin::before, .map__pin::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--signal); border-radius: 50%; animation: ping 2.4s var(--ease-out) infinite; }
.map__pin::after { animation-delay: 1.2s; }
.map__pin svg { position: absolute; inset: 20px; }
.map__label { position: absolute; left: calc(58% + 44px); top: calc(46% - 12px); padding: 0.4rem 0.8rem; border-radius: var(--r-pill); box-shadow: var(--shadow-signal); background: var(--signal); color: var(--ink); }
.map__coord { position: absolute; left: 1rem; bottom: 1rem; color: var(--on-ink-dim); }
.map__compass { position: absolute; right: 1rem; top: 1rem; color: var(--on-ink-dim); }

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr { position: relative; padding-top: clamp(4rem, 8vw, 7rem); background: var(--ink-2); border-radius: var(--r-band) var(--r-band) 0 0; overflow: hidden; }
.ftr__cta { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--rule-ink); }
.ftr__cta h2 { font-size: var(--fs-h1); }
.ftr__cta h2 em { font-style: normal; color: var(--signal); }
.ftr__grid { display: grid; grid-template-columns: 4fr 2fr 2fr 4fr; gap: 2.5rem var(--gutter); padding: 3rem 0; }
.ftr__head { color: var(--on-ink-faint); margin-bottom: 1.1rem; }
.ftr__about p { color: var(--on-ink-dim); max-width: 36ch; margin-top: 1.2rem; }
.ftr__links li + li { margin-top: 0.4rem; }
.ftr__links a { display: inline-block; color: var(--on-ink-dim); transition: color 0.3s, translate 0.5s var(--ease-spring); }
.ftr__links a:hover { color: var(--signal); translate: 0.4rem 0; }
.ftr__news { display: flex; align-items: center; padding: 0.25rem 0.35rem 0.25rem 1.2rem; border: 1px solid var(--rule-ink-strong); border-radius: var(--r-pill); background: var(--ink); margin-top: 0.4rem; transition: box-shadow 0.4s, border-color 0.4s; }
.ftr__news:focus-within { border-color: var(--signal); box-shadow: 0 0 0 4px rgba(255, 77, 28, 0.14); }
.ftr__news input { flex: 1; min-width: 0; padding: 0.7rem 0; background: none; border: 0; outline: 0; }
.ftr__news input::placeholder { color: var(--on-ink-faint); }
.ftr__news button { padding: 0.7rem 1.1rem; border-radius: var(--r-pill); background: var(--signal); color: var(--white) !important; transition: background 0.3s, scale 0.3s var(--ease-spring); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); }
.ftr__social { display: flex; gap: 1.2rem; margin-top: 1.6rem; }
.ftr__social a { color: var(--on-ink-dim); transition: color 0.3s; }
.ftr__social a:hover { color: var(--signal); }
.ftr__mark {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15.2vw;
  line-height: 0.78;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--on-ink);
  white-space: nowrap;
  padding: 0 calc(var(--gutter) * 0.5);
  overflow: hidden;
  user-select: none;
}
.ftr__mark span { display: inline-block; }
.ftr__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.4rem 0; color: var(--on-ink-faint); border-top: 1px solid var(--rule-ink); }
.ftr__bottom a:hover { color: var(--on-ink); }
.ftr__legal { display: flex; gap: 1.6rem; }
[data-form-feedback] { display: none; margin-top: 0.8rem; color: var(--status-available); }

/* Back-to-top with scroll progress ring */
.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: 1.6rem;
  z-index: 400;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink-2);
  color: var(--on-ink);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s, transform 0.5s var(--ease-out), background 0.3s;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; box-shadow: var(--shadow-md); }
.to-top:hover { background: var(--signal); color: var(--ink); }
.to-top svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.to-top circle { fill: none; stroke-width: 1.5; }
.to-top .track { stroke: var(--rule-ink-strong); }
.to-top .bar { stroke: var(--signal); stroke-dasharray: 163.4; stroke-dashoffset: calc(163.4 * (1 - var(--progress, 0))); }

/* ==========================================================================
   Inner page banner
   ========================================================================== */
.pbanner { position: relative; padding: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; isolation: isolate; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; color: var(--on-ink-dim); margin-bottom: clamp(2rem, 5vw, 4rem); }
.crumbs a:hover { color: var(--signal); }
.crumbs i { color: var(--on-ink-faint); font-style: normal; }
.pbanner__grid { display: grid; grid-template-columns: minmax(180px, 3fr) 9fr; gap: 2rem var(--gutter); align-items: end; }
.pbanner h1 { font-size: var(--fs-h1); }
.pbanner h1 .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.pbanner h1 .line > span { display: inline-block; }
.pbanner h1 em { font-style: normal; color: var(--signal); }
.pbanner__lead { grid-column: 2; max-width: 52ch; font-size: var(--fs-lead); line-height: 1.45; color: var(--on-ink-dim); }
.pbanner__meta { display: flex; flex-direction: column; gap: 0.4rem; color: var(--on-ink-dim); align-self: start; justify-self: start; padding: 0.8rem 1.1rem; border: 1px solid var(--rule-ink-strong); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pbanner__strip { margin-top: clamp(3rem, 6vw, 5rem); height: clamp(220px, 34vw, 480px); position: relative; overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.pbanner__strip img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; filter: grayscale(0.9) contrast(1.1) brightness(0.96); }

/* ---------- Two-column prose ---------- */
.prose-grid { display: grid; grid-template-columns: minmax(180px, 3fr) 5fr 4fr; gap: 2.5rem var(--gutter); align-items: start; }
.prose p { color: var(--on-ink-dim); margin-bottom: 1.1rem; }
.prose p:first-child { color: var(--on-ink); font-size: var(--fs-lead); line-height: 1.45; }
.theme-bone .prose p { color: var(--on-bone-dim); }
.theme-bone .prose p:first-child { color: var(--on-bone); }
.callout { position: relative; padding: 1.8rem; border: 1px solid var(--rule-ink); border-radius: var(--r-lg); background: var(--ink-2); box-shadow: var(--shadow-sm); }
.callout h3 { font-size: var(--fs-h3); margin: 1rem 0 0.8rem; }
.callout p { color: var(--on-ink-dim); margin-bottom: 1.4rem; }
.callout::before { content: ""; position: absolute; top: -1px; left: -1px; width: 24px; height: 24px; border-top: 2px solid var(--signal); border-left: 2px solid var(--signal); border-top-left-radius: var(--r-lg); }
.callout::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 24px; height: 24px; border-bottom: 2px solid var(--signal); border-right: 2px solid var(--signal); border-bottom-right-radius: var(--r-lg); }

/* Hazard notice */
.notice { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; padding: 1.8rem; background: var(--ink-2); position: relative; border-radius: var(--r-lg); overflow: hidden; }
.notice::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 10px; background: repeating-linear-gradient(-45deg, var(--signal) 0 10px, var(--black) 10px 20px); }
.notice__icon { padding-left: 1rem; font-family: var(--font-display); font-weight: 900; font-size: 3rem; line-height: 0.8; color: var(--signal); }
.notice h4 { font-size: 1.6rem; margin-bottom: 0.5rem; }
.notice p { color: var(--on-ink-dim); }
.theme-bone .notice { background: var(--ink); color: var(--on-ink); }

/* Ledger list (values / highlights) */
.ledger { border-top: 1px solid var(--rule-bone-strong); }
.ledger__row { display: grid; grid-template-columns: 4rem 4fr 6fr; gap: 1rem var(--gutter); align-items: baseline; padding: 1.8rem 0; border-bottom: 1px solid var(--rule-bone-strong); }
.ledger__row h3 { font-size: clamp(1.8rem, 3.4vw, 3rem); transition: transform 0.6s var(--ease-out), color 0.3s; }
.ledger__row:hover h3 { transform: translateX(0.6rem); color: var(--signal-deep); }
.ledger__row p { color: var(--on-bone-dim); max-width: 48ch; }
.ledger__row .mono { color: var(--on-bone-dim); }

/* Highlights chips (listing page) */
.chips { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.chip-cell { flex: 1 1 200px; padding: 1.4rem 1.3rem; border: 1px solid var(--rule-ink); border-radius: var(--r-lg); background: var(--ink); display: flex; flex-direction: column; gap: 2.4rem; transition: background 0.4s, box-shadow 0.5s var(--ease-out), translate 0.6s var(--ease-spring); }
.chip-cell:hover { translate: 0 -4px; box-shadow: var(--shadow-md); }
.chip-cell .mono { color: var(--signal); }
.chip-cell b { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1; text-transform: uppercase; }

/* ---------- About: timeline ---------- */
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 var(--gutter); padding-top: 3rem; }
.timeline__line { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rule-ink-strong); transform-origin: left; }
.tl { position: relative; }
.tl::before { content: ""; position: absolute; top: calc(-3rem - 7px); left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2px solid var(--signal); box-shadow: 0 0 0 5px rgba(255, 77, 28, 0.14); }
.tl__year { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.4rem, 6vw, 5.6rem); line-height: 0.85; color: var(--signal); }
.tl h4 { font-size: 1.5rem; margin: 1.2rem 0 0.6rem; }
.tl p { color: var(--on-ink-dim); max-width: 28ch; }

.mission { padding: clamp(3rem, 6vw, 5rem) 0; }
.mission blockquote { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 4.8rem); line-height: 0.98; text-transform: uppercase; max-width: 20ch; }
.mission blockquote em { font-style: normal; color: var(--signal); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem calc(var(--gutter) * 2); align-items: start; }
.channels { border-top: 1px solid var(--rule-ink-strong); }
.channel { display: grid; grid-template-columns: 6rem 1fr auto; gap: 1rem; align-items: baseline; padding: 1.3rem 0; border-bottom: 1px solid var(--rule-ink); border-radius: var(--r-md); transition: padding 0.5s var(--ease-out), background 0.4s; }
.channel .mono { color: var(--on-ink-faint); }
.channel b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.05; text-transform: uppercase; }
.channel span:last-child { transition: transform 0.5s var(--ease-out), color 0.3s; }
a.channel:hover { padding-left: 1rem; padding-right: 1rem; background: var(--ink-2); }
a.channel:hover span:last-child { transform: rotate(-45deg); color: var(--signal); }

.form { display: grid; gap: 1.6rem; padding: clamp(1.5rem, 3vw, 2.6rem); background: var(--bone); color: var(--on-bone); border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.form__title { font-size: var(--fs-h3); margin-bottom: 0.4rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.field { position: relative; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 1.5rem 0 0.6rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-bone-strong);
  border-radius: 0;
  outline: 0;
  font-size: 1.05rem;
  color: var(--on-bone);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23121310' stroke-width='1.5'/%3E%3C/svg%3E") right 0.2rem center / 12px no-repeat; }
.field label {
  position: absolute;
  left: 0;
  top: 1.45rem;
  color: var(--on-bone-dim);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.45s var(--ease-out), color 0.3s;
}
.field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: var(--r-pill); background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-out); }
.field:focus-within::after { transform: scaleX(1); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field--static label { transform: translateY(-1.35rem) scale(0.72); color: var(--on-bone); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.form .btn { justify-self: start; }
.form [data-form-feedback] { color: #3f6d1e; }

/* ==========================================================================
   Listing page
   ========================================================================== */
.listing { display: grid; grid-template-columns: 280px 1fr; gap: 2.5rem var(--gutter); align-items: start; }
.filters { position: sticky; top: calc(var(--header-h) + 1rem); max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; padding-right: 0.4rem; scrollbar-width: thin; }
.filter-search { display: flex; align-items: center; gap: 0.6rem; padding: 0 1rem; border: 1px solid var(--rule-bone-strong); border-radius: var(--r-pill); background: var(--ink); margin-bottom: 1rem; transition: border-color 0.3s, box-shadow 0.4s; }
.filter-search:focus-within { border-color: var(--signal); box-shadow: 0 0 0 4px rgba(255, 77, 28, 0.14); }
.filter-search input { flex: 1; min-width: 0; padding: 0.75rem 0; background: none; border: 0; outline: 0; color: var(--on-bone); }
.filter-search input::placeholder { color: var(--on-bone-dim); }
.filter-group { border-bottom: 1px solid var(--rule-bone); }
.filter-group-title { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1rem 0; cursor: pointer; user-select: none; }
.filter-group-title::after { content: "−"; font-family: var(--font-mono); font-size: 1rem; }
.filter-group.is-collapsed .filter-group-title::after { content: "+"; }
.filter-options { display: grid; gap: 0.15rem; padding-bottom: 1rem; }
.filter-group.is-collapsed .filter-options { display: none; }
.filter-option { display: flex; align-items: center; gap: 0.7rem; padding: 0.3rem 0; cursor: pointer; font-size: 0.95rem; }
.filter-option input { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border: 1px solid var(--rule-bone-strong); border-radius: 5px; display: grid; place-items: center; flex: none; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.filter-option input::after { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--black); transform: scale(0); transition: transform 0.4s var(--ease-spring); }
.filter-option input:checked { border-color: var(--black); }
.filter-option input:checked::after { transform: scale(1); }
.filter-option .count { margin-left: auto; font-family: var(--font-mono); font-size: 0.7rem; color: var(--on-bone-dim); }
.filter-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-bottom: 1rem; }
.filter-quick button { padding: 0.45rem 0.85rem; border: 1px solid var(--rule-bone-strong); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.3s, color 0.3s; }
.filter-quick button:hover { background: var(--black); color: var(--white); }
.filter-clear { margin-top: 1.2rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal-deep); }
.listing-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; }
.result-count { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-bone-dim); }
.result-count strong { color: var(--on-bone); }
.sort-select { display: flex; align-items: center; gap: 0.7rem; }
.sort-select select { padding: 0.55rem 2rem 0.55rem 0.7rem; border: 1px solid var(--rule-bone-strong); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23121310' stroke-width='1.3'/%3E%3C/svg%3E") right 0.7rem center / 10px no-repeat; -webkit-appearance: none; appearance: none; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
.active-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.active-filters:empty { display: none; }
.active-filter-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.8rem; border-radius: var(--r-pill); animation: popIn 0.5s var(--ease-spring) both; background: var(--black); color: var(--white); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.active-filter-chip i { cursor: pointer; color: var(--signal); }
.no-results { display: none; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 3rem 0; }
.no-results b { font-family: var(--font-display); font-size: 2.4rem; text-transform: uppercase; line-height: 1; }
.no-results p { color: var(--on-bone-dim); max-width: 44ch; }
.pagination { display: flex; gap: 0.4rem; margin-top: 2.5rem; }
.pagination > * { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--rule-bone-strong); border-radius: 50%; font-family: var(--font-mono); font-size: 0.8rem; transition: background 0.3s, color 0.3s; }
.pagination .is-active, .pagination button:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.listing .plates { grid-template-columns: repeat(3, 1fr); }
.filters-toggle { display: none; }

/* ==========================================================================
   Product detail
   ========================================================================== */
.pd { display: grid; grid-template-columns: 7fr 5fr; gap: 3rem calc(var(--gutter) * 1.5); align-items: start; padding-top: calc(var(--header-h) + 2rem); }
.pd .crumbs { grid-column: 1 / -1; margin-bottom: 0; }
.pd-stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-2); border: 1px solid var(--rule-ink); border-radius: var(--r-xl); cursor: zoom-in; }
.pd-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out), opacity 0.4s; transform-origin: var(--zx, 50%) var(--zy, 50%); }
.pd-stage.is-zoom img { transform: scale(1.9); }
.pd-stage .mono { position: absolute; left: 1rem; top: 1rem; z-index: 2; color: var(--white); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.pd-stage__count { left: auto !important; right: 1rem; }
.pd-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; margin-top: 0.6rem; }
.pd-thumb { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--rule-ink); border-radius: var(--r-md); opacity: 0.5; transition: opacity 0.3s, border-color 0.3s; }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.4s; }
.pd-thumb:hover, .pd-thumb.is-active { opacity: 1; }
.pd-thumb.is-active { border-color: var(--signal); }
.pd-thumb.is-active img { filter: none; }
.pd-info { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.pd-brand { color: var(--signal); }
.pd-title { font-size: clamp(2.6rem, 4.4vw, 4.4rem); margin: 0.8rem 0 1.2rem; }
.pd-meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: center; color: var(--on-ink-dim); margin-bottom: 1.4rem; }
.pd-note { padding: 1rem 1.1rem; border-radius: var(--r-md); border-left: 3px solid var(--signal); background: var(--ink-2); color: var(--on-ink-dim); font-size: 0.92rem; margin-bottom: 1.8rem; }
.spec-table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
.spec-table td { padding: 0.62rem 0; border-bottom: 1px solid var(--rule-ink); font-size: 0.92rem; vertical-align: top; }
.spec-table td:first-child { width: 42%; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-faint); padding-top: 0.8rem; }
.pd-actions { display: grid; gap: 0.6rem; }

.tabs { position: relative; display: flex; gap: 0; border-bottom: 1px solid var(--rule-ink-strong); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.pd-tab-btn { flex: none; padding: 1.1rem 1.4rem 1.1rem 0; margin-right: 1rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-faint); transition: color 0.3s; }
.pd-tab-btn:hover, .pd-tab-btn.is-active { color: var(--on-ink); }
.tabs__ink { position: absolute; bottom: -1px; left: 0; height: 3px; border-radius: var(--r-pill); background: var(--signal); transition: transform 0.6s var(--ease-out), width 0.6s var(--ease-out); }
.pd-tab-panel { display: none; padding: 2.4rem 0 0; max-width: 72ch; }
.pd-tab-panel.is-active { display: block; animation: fadeUp 0.7s var(--ease-out); }
.pd-tab-panel p { color: var(--on-ink-dim); margin-bottom: 1.1rem; font-size: 1.05rem; }
.pd-tab-panel p:first-child { color: var(--on-ink); font-size: var(--fs-lead); line-height: 1.45; }
.ticks li { display: grid; grid-template-columns: 2.6rem 1fr; padding: 0.8rem 0; border-bottom: 1px solid var(--rule-ink); color: var(--on-ink-dim); }
.ticks li::before { content: counter(tick, decimal-leading-zero); counter-increment: tick; font-family: var(--font-mono); font-size: 0.72rem; color: var(--signal); padding-top: 0.2rem; }
.ticks { counter-reset: tick; }

.filters__close { display: none; margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0 0 1rem; }
.filters-toggle { align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; border: 1px solid var(--rule-bone-strong); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* ==========================================================================
   Divisions, compliance, brands, rules
   ========================================================================== */
/* Division switcher: one row of large tabs with an underline that slides in */
.divtabs { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.4rem; border: 1px solid var(--rule-ink); border-radius: var(--r-pill); background: var(--ink-2); }
.divtab {
  position: relative;
  flex: 1 1 0;
  min-width: 180px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.4rem 0.9rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--on-ink-faint);
  transition: color 0.3s, background 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.divtab sup { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; }
.divtab::after { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; bottom: 0.45rem; height: 3px; border-radius: var(--r-pill); background: var(--signal); transform: scaleX(0); transition: transform 0.6s var(--ease-spring); }
.divtab:hover { color: var(--on-ink); background: rgba(255, 255, 255, 0.6); }
.divtab.is-active { color: var(--on-ink); background: var(--ink); box-shadow: var(--shadow-sm); }
.divtab.is-active::after { transform: scaleX(1); }
.divtab.is-active sup { color: var(--signal); }

/* Compliance strip: hazard edge + three rules + link */
.compliance { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 2.2rem; margin-top: 1.5rem; padding: 1rem 1.4rem 1rem 2.2rem; background: var(--ink-2); border-radius: var(--r-pill); overflow: hidden; }
.compliance::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8px; background: repeating-linear-gradient(-45deg, var(--signal) 0 8px, var(--black) 8px 16px); }
.compliance__item { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--on-ink); }
.compliance__item b { color: var(--signal); font-weight: 600; }
.compliance__link { margin-left: auto; color: var(--signal); }
.compliance__link:hover { color: var(--on-ink); }

/* Brand plate: monogram stamped on a ruled card */
.bcard__face {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0.5rem 0.5rem 0;
  border-radius: calc(var(--r-lg) - 0.4rem);
  background:
    linear-gradient(var(--rule-bone) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, var(--rule-bone) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--bone-3);
}
.bcard__mono {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 0.8;
  letter-spacing: -0.01em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--on-bone);
  transition: color 0.6s var(--ease-out), transform 0.9s var(--ease-out);
}
.bcard:hover .bcard__mono { color: var(--on-bone); transform: scale(1.06); }
.bcard__ring { position: absolute; width: 62%; aspect-ratio: 1; border: 1px dashed var(--rule-bone-strong); border-radius: 50%; animation: spin 40s linear infinite; }
.bcard__ring::before, .bcard__ring::after { content: ""; position: absolute; background: var(--rule-bone-strong); }
.bcard__ring::before { left: 50%; top: -12%; bottom: -12%; width: 1px; }
.bcard__ring::after { top: 50%; left: -12%; right: -12%; height: 1px; }
/* Product photo on the plate: white-ground shots multiply into the grid, photos go full-bleed */
.bcard__img {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 17%;
  bottom: 7%;
  width: 86%;
  height: 76%;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: contrast(1.04);
  animation: float 6s var(--ease-soft) infinite;
  animation-delay: calc(var(--i, 0) * -1.3s);
  transition: scale 0.9s var(--ease-spring);
}
.bcard:hover .bcard__img { scale: 1.07; }
.plates > :nth-child(2) .bcard__img { --i: 1; }
.plates > :nth-child(3) .bcard__img { --i: 2; }
.plates > :nth-child(4) .bcard__img { --i: 3; }
.plates > :nth-child(5) .bcard__img { --i: 4; }
.plates > :nth-child(6) .bcard__img { --i: 5; }
.bcard__img--full { inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; filter: none; animation: none; }
.bcard__face--full .bcard__plate { background: var(--bone); padding: 0.2rem 0.6rem; border-radius: var(--r-pill); }
.bcard__plate { position: absolute; top: 0.8rem; left: 0.9rem; z-index: 1; }
.bcard__tag { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 1; }
.bcard__body { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.2rem 1.1rem 1.3rem; flex: 1; }
.bcard__kicker { color: var(--on-bone-dim); }
.bcard__name { font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 0.95; }
.bcard__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bcard__specs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.bcard__specs span { padding: 0.3rem 0.7rem; border: 1px solid var(--rule-bone-strong); border-radius: var(--r-pill); transition: background 0.3s, border-color 0.3s; }
.bcard:hover .bcard__specs span { background: var(--bone); border-color: var(--rule-bone); }
.bcard__desc { font-size: 0.9rem; color: var(--on-bone-dim); }
.bcard__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 0.9rem; border-top: 1px solid var(--rule-bone); }
.bcard:hover .pcard__more { color: var(--signal-deep); transform: translateX(-4px); }
.plates--3 .bcard, .plates .bcard { min-width: 0; }

/* Limits: three big numbers */
.limits { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule-ink-strong); }
.limits__item { padding: 1.4rem 1.2rem 0 0; border-right: 1px solid var(--rule-ink); }
.limits__item + .limits__item { padding-left: 1.2rem; }
.limits__item:last-child { border-right: 0; }
.limits__item p { margin-top: 1rem; color: var(--on-ink-dim); max-width: 30ch; }
.theme-bone .limits { border-color: var(--rule-bone-strong); }
.theme-bone .limits__item { border-color: var(--rule-bone); }
.theme-bone .limits__item p, .theme-bone .tally__label { color: var(--on-bone-dim); }
.odo__prefix { color: inherit; }

/* Rules list */
.rules { border-top: 1px solid var(--rule-ink-strong); counter-reset: rule; }
.rule { display: grid; grid-template-columns: 6rem 5fr 6fr; gap: 1rem var(--gutter); align-items: baseline; padding: 2rem 0; border-bottom: 1px solid var(--rule-ink); }
.rule__num { font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 5vw, 4.4rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 1.2px var(--signal); transition: color 0.4s; }
.rule:hover .rule__num { color: var(--signal); }
.rule h3 { font-size: clamp(1.6rem, 2.8vw, 2.5rem); }
.rule p { color: var(--on-ink-dim); max-width: 46ch; }

/* Closing CTA strip */
.cta-strip { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2rem var(--gutter); align-items: end; padding: clamp(2rem, 5vw, 3.5rem); background: var(--signal); color: var(--black); border-radius: var(--r-xl); overflow: hidden; isolation: isolate; box-shadow: var(--shadow-signal); }
.cta-strip::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -60%; width: 55%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 65%); animation: morph 14s var(--ease-soft) infinite alternate, drift 18s var(--ease-soft) infinite alternate; }
.cta-strip h2 { font-size: var(--fs-h2); }
.cta-strip p { margin-top: 1rem; max-width: 52ch; }
.cta-strip .btn { --btn-fg: var(--black); --btn-fill: var(--black); --btn-fg-hover: var(--signal); }
.cta-strip__btns { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.steps--ink .step__rule { background: var(--rule-ink-strong); }
.steps--ink .step__num { -webkit-text-stroke-color: var(--on-ink); }
.steps--ink .step p { color: var(--on-ink-dim); }
.cta-strip h2 em { color: transparent; -webkit-text-stroke: 1.5px var(--black); }
.pbanner h1 .sub { font-size: 0.55em; vertical-align: baseline; }
.ledger__row--2 { grid-template-columns: 4rem 1fr; }