/* ============================================================
   EDITORIAL  ·  the anti-box layer
   Every component used to be the same translucent rounded rectangle.
   Eleven of them, one shape, even grid. That uniformity is the single
   most recognisable tell of generated design.

   What replaces it: hairline rules, real index numbers where sequence
   is true, asymmetric spans, flush-left structure. Radius is earned.
   ============================================================ */

/* --- Index numbers ------------------------------------------
   Used ONLY where order carries meaning: the three buyer tracks are a
   self-selection, and the seller steps are an actual sequence. They are
   not applied to the Atlas, where order would be arbitrary. */
.idx {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-brand-pink);
  font-variant-numeric: tabular-nums;
}

/* --- Rule card · replaces .track ---------------------------- */

.rcard {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6) 0 var(--space-8);
  border-top: 1px solid var(--color-line-subtle);
  background: none;
  border-radius: 0;
  transition: border-color var(--duration-base) var(--ease-out-expo);
}

/* The pink hairline grows out of the left on hover — the rule itself is
   the affordance, so no box has to appear to signal interactivity. */
.rcard::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  height: 1px;
  width: 0;
  background: var(--color-brand-pink);
  transition: width var(--duration-slow) var(--ease-out-expo);
}
.rcard:hover::before,
.rcard:focus-within::before { width: 100%; }

.rcard__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}
.rcard__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink-900);
  text-wrap: balance;
}
.rcard__body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-500);
  max-width: 38ch;
}
.rcard__list { display: grid; gap: var(--space-2); }
.rcard__list li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-ink-300);
}
.rcard__list li::before {
  content: '';
  width: 8px; height: 1px;
  background: var(--color-brand-pink);
  align-self: center;
}

/* Staggered spans. A dead-even three-up grid is what makes a page read
   as a template; dropping the middle column breaks the rhythm without
   breaking the alignment. */
.rgrid { display: grid; gap: var(--space-8); }
@media (min-width: 56rem) {
  .rgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
  .rgrid > :nth-child(2) { transform: translateY(var(--space-12)); }
}

/* --- Place row · replaces the .place card grid --------------
   A price ladder is a list, not a set of tiles. Rendering it as ruled
   rows makes the ordering legible at a glance and kills twelve boxes. */

.plist { display: grid; }

.prow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-line-subtle);
  position: relative;
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              filter var(--duration-slow) var(--ease-out-expo);
}
@media (min-width: 48rem) {
  .prow { grid-template-columns: 10rem 1fr 9rem auto; gap: var(--space-6); }
}

.prow__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--color-ink-900);
}
.prow__fact {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-ink-300);
  display: none;
}
@media (min-width: 48rem) { .prow__fact { display: block; } }

.prow__price {
  font-size: var(--text-base);
  color: var(--color-ink-500);
  font-variant-numeric: tabular-nums;
}
.prow__state {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-300);
  white-space: nowrap;
}

/* In reach: the row lights from the left edge. Out of reach stays fully
   readable — honesty is the product, so nothing is hidden. */
.prow--in { }
.prow--in .prow__name { color: var(--color-ink-900); }
.prow--in .prow__price { color: var(--color-brand-pink-glow); }
.prow--in .prow__state { color: var(--color-brand-pink-glow); }
.prow--in::after {
  content: '';
  position: absolute;
  inset-block: 0;
  /* Sits ON the row's own edge. A negative gutter offset put this bar
     outside the list entirely and painted it over the map beside it. */
  inset-inline-start: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--color-brand-pink), transparent);
}
.prow { padding-inline-start: var(--space-4); }
.prow--out { opacity: 0.5; }

/* --- Quote · rule-based, no box ----------------------------- */

.qcard {
  width: min(26rem, 80vw);
  flex: none;
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-8) var(--space-6) 0;
  border-inline-end: 1px solid var(--color-line-subtle);
  background: none;
  border-radius: 0;
  backdrop-filter: none;
}
.qcard__text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-ink-700);
}
.qcard__who {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-300);
}

/* --- Market strip ------------------------------------------- */

.market {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-line-strong);
}
@media (min-width: 48rem) {
  .market { grid-template-columns: repeat(4, 1fr); border-inline-start: 1px solid var(--color-line-subtle); }
}
.market__cell {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-line-subtle);
}
@media (min-width: 48rem) {
  .market__cell { border-inline-end: 1px solid var(--color-line-subtle); border-bottom: 0; }
}
.market__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-ink-900);
  font-variant-numeric: tabular-nums;
}
.market__label {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-500);
}
.market__note { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-ink-300); }

/* --- Section bloom · pink present everywhere, never as a wall */
.bloom { position: relative; isolation: isolate; }
.bloom::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(48rem 28rem at var(--bloom-x, 80%) var(--bloom-y, 20%),
              var(--color-brand-pink-wash), transparent 68%);
}

/* --- Signature wordmark -------------------------------------
   NOT a reproduction of Jake's handwriting. A designed script logotype,
   set in the display face's italic. Forging a real person's signature
   would be an identity artifact; this is openly a wordmark.
   Replace with a real scan when available. */
.sigmark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--color-brand-pink-glow);
  letter-spacing: -0.02em;
}
.sigmark__rule {
  margin-top: var(--space-3);
  width: 7rem;
  height: 1px;
  background: linear-gradient(to right, var(--color-brand-pink), transparent);
  border: 0;
}
.sigmark__note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-300);
}

/* ============================================================
   SIDE RAIL  ·  always reachable, never interruptive
   03_ARCHITECTURE.md bans exit-intent popups and interrupting chat
   widgets. This is the opposite: a tab that sits still, waits, and
   only opens when the visitor asks it to.
   ============================================================ */

.siderail { position: fixed; inset-block-start: 50%; inset-inline-end: 0; z-index: var(--z-rail); display: none; }
@media (min-width: 64rem) { .siderail { display: block; } }

.siderail__tab {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.5rem;
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-inline-end: 0;
  border-start-start-radius: var(--radius-full);
  border-end-start-radius: var(--radius-full);
  background: rgba(19, 17, 23, 0.82);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--edge-light), var(--shadow-lg);
  color: var(--color-ink-900);
  cursor: pointer;
  font: inherit;
  transition: transform var(--duration-base) var(--ease-out-expo),
              border-color var(--duration-base) var(--ease-out-expo),
              box-shadow var(--duration-base) var(--ease-out-expo);
}
.siderail__tab:hover {
  transform: translateY(-50%) translateX(-4px);
  border-color: var(--color-brand-pink);
  box-shadow: var(--edge-light-pink), var(--shadow-glow);
}
.siderail__avatar {
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 1px solid var(--color-brand-pink);
  flex: none;
}
.siderail__label { display: grid; gap: 1px; text-align: left; white-space: nowrap; }
.siderail__label b { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.siderail__label span {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brand-pink-glow);
}

/* A live pink dot. The only always-animating element on the page, and
   it is small enough never to compete with reading. */
.siderail__dot {
  width: 7px; height: 7px; flex: none;
  border-radius: var(--radius-full);
  background: var(--color-brand-pink);
  box-shadow: 0 0 0 0 rgba(224, 19, 132, 0.6);
  animation: rail-pulse 2.6s var(--ease-out-expo) infinite;
}
@keyframes rail-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 19, 132, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(224, 19, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 19, 132, 0); }
}
@media (prefers-reduced-motion: reduce) { .siderail__dot { animation: none; } }

.siderail__panel {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: var(--space-4);
  transform: translateY(-50%) translateX(120%);
  width: 23rem;
  padding: var(--space-8);
  display: grid;
  gap: var(--space-5);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-xl);
  background: rgba(19, 17, 23, 0.94);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--edge-light), var(--shadow-lg), var(--shadow-glow);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--duration-slow) var(--ease-out-expo),
              opacity var(--duration-base) var(--ease-out-expo),
              visibility 0s linear var(--duration-slow);
}
.siderail.is-open .siderail__panel {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.siderail.is-open .siderail__tab { opacity: 0; pointer-events: none; }

.siderail__close {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-ink-300);
  cursor: pointer;
}
.siderail__close:hover { color: var(--color-ink-900); }

.siderail__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-ink-900);
  max-width: 16ch;
}
.siderail__body { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-ink-500); }
.siderail__points { display: grid; gap: var(--space-2); }
.siderail__points li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-700);
  line-height: var(--leading-snug);
}
.siderail__points li::before { content: ''; width: 7px; height: 7px; margin-top: 0.42em; border-radius: 50%; border: 1px solid var(--color-brand-pink); }
.siderail__num {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-300);
  text-align: center;
}

.hero__inner { position: relative; }

/* --- Doors as editorial type, not boxes --------------------- */

.doors {
  display: grid;
  /* Overrides the two-column rule these used to have as boxes. Stacked
     ruled rows read as a decision; side-by-side reads as navigation. */
  grid-template-columns: 1fr !important;
  gap: 0;
  max-width: 30rem;
  border-top: 1px solid var(--color-line-subtle);
}
.door {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 4.5rem;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-line-subtle);
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  text-decoration: none;
  color: var(--color-ink-900);
  overflow: hidden;
}
.door::before {
  content: '';
  position: absolute;
  inset-block-end: -1px; inset-inline-start: 0;
  height: 1px; width: 0;
  background: var(--color-brand-pink);
  transition: width var(--duration-slow) var(--ease-out-expo);
}
.door:hover::before, .door:focus-visible::before { width: 100%; }

.door__label {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  transition: transform var(--duration-base) var(--ease-out-expo);
}
.door:hover .door__label { transform: translateX(var(--space-3)); }

.door__arrow {
  flex: none;
  color: var(--color-brand-pink);
  border: 0; background: none; width: auto; height: auto;
  transition: transform var(--duration-base) var(--ease-out-expo);
}
.door:hover .door__arrow { transform: translateX(var(--space-2)); }

/* ============================================================
   PROGRESSIVE ENGINE
   ============================================================ */

.ask1 {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
  max-width: 34rem;
  padding-block: var(--space-8) var(--space-4);
}
.ask1__q {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-ink-900);
  max-width: 20ch;
}
.ask1__readout { margin: 0; }
.ask1 .range { width: 100%; }
.ask1__go { margin-top: var(--space-2); }

/* Everything past the first question is closed until asked for. Height
   is animated via grid-template-rows so nothing has to be measured in
   JS and no layout shift is possible. */
.engine__more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--duration-cinematic) var(--ease-out-expo),
              opacity var(--duration-slow) var(--ease-out-expo);
}
.engine__more > * { overflow: hidden; min-height: 0; }
.engine.is-open .engine__more { grid-template-rows: 1fr; opacity: 1; }
.engine.is-open .ask1__go { display: none; }
.engine:not(.is-open) .atlas { display: none; }

@media (min-width: 64rem) {
  .engine.is-open .engine__more {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: 1fr;
    gap: var(--space-24);
  }
}
@media (prefers-reduced-motion: reduce) {
  .engine__more { transition: none; }
}

/* --- The rule marker on the share track --------------------- */
.rulemark {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-300);
}
.rulemark__line { color: var(--color-brand-pink-glow); }

/* Past the line, the headline number turns amber. The tool bends
   without quietly abandoning the rule Jake is endorsed for. */
.engine.is-over-rule .result__price,
.engine.is-over-rule [data-out="share-pct"] { color: var(--color-accent-warm); }
.engine.is-over-rule .result__headline { border-color: rgba(255, 158, 94, 0.4); }

/* --- Atlas: map left, ladder right -------------------------- */
.atlas__split { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 64rem) {
  .atlas__split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-12); }
  .atlas__map { position: sticky; top: var(--space-8); }
}
.atlas__map canvas { height: clamp(18rem, 30vw, 24rem); }

.prow { cursor: default; transition: background-color var(--duration-fast) var(--ease-out-expo); }
.prow.is-hot { background: rgba(224, 19, 132, 0.07); }


/* --- Compact hero identity for phones and tablets ------------
   The large portrait only appears at 64rem+. Below that this puts his
   face beside the eyebrow so a referral still sees a person instantly. */
.hero__whois {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.hero__whois img {
  width: 2.75rem; height: 2.75rem;
  flex: none;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 1px solid var(--color-brand-pink);
  box-shadow: 0 0 22px -4px rgba(224, 19, 132, 0.65);
}
.hero__whois .hero__eyebrow { margin-bottom: 0; }
.hero__whois .eyebrow::before { display: none; }

@media (min-width: 64rem) {
  /* The full portrait is present, so the thumbnail would be redundant. */
  .hero__whois img { display: none; }
  .hero__whois .eyebrow::before { display: block; }
}

/* ============================================================
   MOBILE DENSITY PASS
   The page measured 13 screens tall on a 390px phone. Most of that was
   not content — it was desktop rhythm applied to a phone, where the
   same air that reads as confidence on a 27" display reads as an empty
   scroll. Vertical space is compressed on small screens only; the
   desktop composition is untouched.
   ============================================================ */

@media (max-width: 47.999rem) {
  :root {
    --section-gap-sm: 2rem;
    --section-gap-md: 2.5rem;
    --section-gap-lg: 3rem;
    --section-gap-xl: 3.5rem;
  }

  /* The hero used space-between, which on a short viewport pushed a hole
     between the copy and the doors. Stack it and let the gap be a value. */
  .hero__inner {
    justify-content: flex-end;
    gap: var(--space-8);
    padding-block: 6.5rem var(--space-8);
  }

  .section-head { margin-bottom: var(--space-8); }
  .credentials { padding-block: var(--space-12); }
  .credentials__grid { gap: var(--space-8); }
  .ramsey-plate { width: 11rem; }
  .marks { gap: var(--space-6); align-items: center; justify-content: center; }

  .rcard { padding-block: var(--space-5) var(--space-6); }
  .rgrid { gap: var(--space-2); }
  .engine__more { gap: var(--space-8); }
  .ask1 { padding-block: var(--space-4) 0; gap: var(--space-4); }
  .atlas { margin-top: var(--space-10, 2.5rem); }
  .atlas__map canvas { height: 15rem; }
  .atlas__split { gap: var(--space-6); }
  .footer { padding-block: var(--section-gap-lg) var(--space-8); }
}

/* The arrival ribbon wrapped to three lines on a phone. The second line
   is orientation, not information — it can go. */
@media (max-width: 33rem) {
  .arrival__text span { display: none; }
  .arrival__text strong { font-size: var(--text-sm); }
  .arrival { padding-block: var(--space-2); }
}

/* ============================================================
   THE PRICE LADDER, TRUNCATED
   Twelve rows is a full screen of scrolling on a phone for information
   most visitors do not need — what matters is what they CAN reach and
   the first few they cannot. The rest stays one tap away.
   ============================================================ */

.plist { position: relative; }
.plist__more {
  display: none;
  width: 100%;
  min-height: 3rem;
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 0;
  border-top: 1px solid var(--color-line-subtle);
  background: none;
  color: var(--color-brand-pink-glow);
  font: inherit;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
.plist__more:hover { color: var(--color-ink-900); }

@media (max-width: 63.999rem) {
  .plist__more { display: block; }
  .plist:not(.is-expanded) .prow--hidden { display: none; }
}

/* ============================================================
   VOICES  ·  the reviews section, given a spine
   It was a heading over a drifting row of quotes — no anchor, no reason
   to stop. The 5.0 average is the actual headline; the quotes are the
   evidence. So the score gets the weight and the marquee becomes
   supporting material.
   ============================================================ */

.voices__head {
  display: grid;
  gap: var(--space-8);
  align-items: end;
  padding-bottom: var(--space-10, 2.5rem);
  border-bottom: 1px solid var(--color-line-subtle);
  margin-bottom: var(--section-gap-sm);
}
@media (min-width: 56rem) {
  .voices__head { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-16); }
}

.voices__score { display: grid; gap: var(--space-2); justify-items: start; }
@media (min-width: 56rem) { .voices__score { justify-items: end; text-align: right; } }

.voices__num {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  line-height: 0.85;
  color: var(--color-ink-900);
}
.voices__stars svg { width: 7rem; height: auto; fill: var(--color-accent-warm); }
.voices__meta { font-size: var(--text-sm); color: var(--color-ink-300); max-width: 24ch; }

/* The marquee runs full-bleed so it reads as a continuous band rather
   than a widget sitting inside a container. */
.voices .marquee { margin-inline: calc(var(--gutter) * -1); }
.voices .marquee__track { gap: 0; }
.qcard { padding-inline: var(--space-8); border-inline-end: 1px solid var(--color-line-subtle); }
.qcard:first-child { padding-inline-start: var(--gutter); }

/* --- Credentials kicker ------------------------------------- */
.credentials__kicker {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-brand-pink-glow);
  margin-bottom: var(--space-4);
}

/* --- Market punchline --------------------------------------- */
.market__punchline {
  margin-top: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--color-ink-700);
  max-width: 44ch;
  text-wrap: pretty;
}
.market__src { margin-top: var(--space-4); }
/* Attribution required by the data licensor. Set quieter than the source
   line, but never hidden — that is the condition it ships under. */
.market__notice {
  margin-top: var(--space-3);
  max-width: 68ch;
  font-size: var(--text-2xs, var(--text-xs));
  line-height: var(--leading-normal, 1.5);
  opacity: 0.62;
}

@media (max-width: 47.999rem) {
  /* Four stacked stat cells is a whole screen for four short numbers.
     Two-up reads faster and costs half the scroll. */
  .market { grid-template-columns: 1fr 1fr; border-inline-start: 1px solid var(--color-line-subtle); }
  .market__cell {
    padding: var(--space-4);
    border-inline-end: 1px solid var(--color-line-subtle);
    border-bottom: 1px solid var(--color-line-subtle);
  }
  .market__value { font-size: var(--text-2xl); }
  .market__label { margin-top: var(--space-2); font-size: var(--text-xs); }
  .market__note { display: none; }
  .market__punchline { font-size: var(--text-xl); margin-top: var(--space-6); }

  /* Credentials: the marks sit in a row rather than a stack, so the
     band stops being a full screen of logos. */
  .credentials__grid { gap: var(--space-6); }
  .marks { flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--space-4); }
  .ramsey-plate { width: 9rem; }
  .credentials__statement { font-size: var(--text-2xl); }
}