@charset "UTF-8";
/* ==========================================================================
   CUSTOMER REVIEWS — "rq" INK & GOLD LEAF ISLAND PASS, 20 August 2026.
   Built against docs/design-authority/DUKES_DESIGN_AUTHORITY.md v1.0 and the
   island grammar measured off /properties/tenant-fees/, /properties/tenant-guide/,
   /sales/valuation/, / and /sales/.

   ROUND 2 (Aarav, 20 Aug, on the round-1 render):
     · "the green doesn't look good here, it looks ugly"  -> the olive anchor is
       gone. This page now anchors the house NAVY, the same family as the
       Seller's Guide, the homepage and /sales/valuation/, which are the three
       pages he has approved. It keeps its own identity through the pale blue
       MIST wall field, the gold-leaf identity and its three devices.
     · "images are being scrolled down when I scroll down, make them still,
       keep it in the middle"  -> the chapter-02 media is sticky and holds the
       lane while the ledger scrolls past it.
     · "images are not placeholders"  -> every crown placeholder is filled with
       Aarav's own generated art from the repo library. Nothing sourced.
     · "add images for every review"  -> all 24 wall cards carry one.
     · "add the animation we had for the review section"  -> the archive is now
       the homepage rw2 scrolling-columns wall, ported to this page's palette.

   PREFIX
   Everything is `rq-`. That prefix appears NOWHERE in dukes.css (verified 0
   hits), which matters: dukes.css carries six retired `.page--reviews .rvw-*`
   passes across ~15,000 lines and they are all live specificity hazards.

   COLOUR HAS JOBS. The job is stated next to every token.

   THE THREE DEVICES THIS PAGE OWNS (novelty mandate, §2):
     1. THE RECORD STRIP — a monospaced, tabular provenance line
        (SOURCE / CAPTURED / RATING / REVIEWS / SHOWN). No other Dukes page
        uses a mono face. It makes the page read as an audited record.
     2. THE AGGREGATE LOCKUP — the score set as type straight on the navy,
        divided by one hairline. No plate, no box, no shadow.
     3. THE VOICE INDEX — the eight reviewer faces as NAMED, tappable chips
        with their stars, not anonymous decoration circles.
   ========================================================================== */

/* ==========================================================================
   0.1 TOKENS
   ========================================================================== */

.page--reviews {
  /* --- ink (site standard) --------------------------------------------- */
  --rq-ink: #171a20;              /* JOB: primary text on light */
  --rq-ink-soft: #4f555b;         /* JOB: secondary text, meta, captions */

  /* --- the anchor ------------------------------------------------------- */
  --rq-navy: #12203a;             /* JOB: decisive dark islands ONLY */
  --rq-navy-2: #22334f;           /* JOB: plates sitting ON a dark island */
  --rq-navy-3: #2d4163;           /* JOB: the hover step of the above */

  /* --- grounds and THE one white ---------------------------------------- */
  --rq-cream: #fbf8f2;            /* JOB: THE premium white. Plates only.
                                     One white token across the whole page. */
  --rq-paper: #f2ede4;            /* JOB: warm paper — the wall stage plate */
  --rq-linen: #ece2cf;            /* JOB: deeper warm field — the voices island */
  --rq-mist: #dbe8ec;             /* JOB: pale blue field — the review wall.
                                     The Seller's Guide blue, so the page's one
                                     full-bleed band reads as a guide chapter. */

  /* --- the accent -------------------------------------------------------- */
  --rq-oxblood: #7b2430;          /* JOB: actions + kickers ONLY. Nowhere else. */
  --rq-oxblood-dk: #5e1924;       /* JOB: hover/active of the above */

  /* --- identity ---------------------------------------------------------- */
  --rq-gold: #c5a66a;             /* JOB: crown, seal, identity on dark */
  --rq-gold-lift: #e0c48c;        /* JOB: identity TEXT on dark */
  --rq-star: #8f6520;             /* JOB: star rows on LIGHT surfaces */
  --rq-star-dark: #e0bd7a;        /* JOB: star rows on DARK surfaces */

  /* --- structure --------------------------------------------------------- */
  --rq-rule: rgb(23 26 32 / 16%);
  --rq-rule-soft: rgb(23 26 32 / 9%);
  --rq-rule-dark: rgb(251 248 242 / 20%);
  --rq-rule-dark-soft: rgb(251 248 242 / 11%);

  /* --- the width ladder. Neighbouring bands never share a width (§2). ----- */
  --rq-shell-hero: min(96vw, 1780px);
  --rq-shell-voices: min(94vw, 1560px);
  --rq-shell-feat: min(95vw, 1720px);
  --rq-shell-archive: min(94vw, 1660px);
  --rq-shell-contact: min(92vw, 1440px);
  --rq-shell-notes: min(90vw, 1180px);

  /* --- geometry: the site's two radius regimes ---------------------------- */
  --rq-r-island: 30px;
  --rq-r-plate: 22px;
  --rq-r-small: 14px;
  --rq-tap: 48px;
  --rq-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rq-lift: 0 30px 70px -50px rgb(13 20 35 / 55%);
  --rq-lift-soft: 0 22px 48px -34px rgb(13 20 35 / 45%);

  /* --- type ---------------------------------------------------------------
     Gloock and Manrope stay: they are the house language and the shared shell
     already loads them. What is new on this page is a THIRD role — a tabular
     record face for provenance, indices, counts and dates. No other Dukes page
     has one, and it is what makes the page read as an archive. */
  --rq-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono",
             "Roboto Mono", Consolas, "Liberation Mono", monospace;

  /* the site island ground */
  background: linear-gradient(180deg, #dee9e7 0%, #d9e5e5 30%, #d9e5e5 100%);
  color: var(--rq-ink);
}

.page--reviews ::selection { background: var(--rq-gold); color: var(--rq-navy); }
.page--reviews :focus-visible { outline: 3px solid #f0bd77; outline-offset: 4px; }

/* dukes.css paints .main cream on this route; that would hide the ground.

   overflow-x, not overflow: the axis that needs clipping is the horizontal
   one (the wall band is 100vw with negative margins), and leaving
   overflow-y visible keeps this ancestor out of the way of the sticky
   media in chapter 02. Measured both ways at 1440: sticky holds at 180px
   under either declaration, so this is belt and braces, not a fix. */
.page--reviews .main {
  overflow-x: clip;
  background: transparent;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.page--reviews .main h1,
.page--reviews .main h2,
.page--reviews .main h3 { text-wrap: balance; }

/* ==========================================================================
   0.2 NEUTRALISE THE RETIRED PASSES
   reviews-page.mjs binds to .rvw-feat__card, .rvw-method and .rvw-method__body,
   so those names stay on the page. dukes.css styles all of them from six
   retired designs, some at (0,3,0) via :last-child, which beats a plain
   .page--reviews .rq-* rule regardless of file order. Everything below either
   restates the plate at matching specificity or removes a legacy pseudo.
   ========================================================================== */

.page--reviews .rq-feat::after,
.page--reviews .rq-feat::before { content: none; }

.page--reviews .rq-method.rvw-method {
  max-width: var(--rq-shell-notes);
  border: 1px solid var(--rq-rule-dark-soft);
  border-radius: var(--rq-r-plate);
  background: var(--rq-navy);
  color: var(--rq-cream);
}
.page--reviews .rq-method .rvw-method__body { max-width: none; border: 0; background: transparent; }

/* ==========================================================================
   1. SHARED DEVICES — kicker, register, actions, chips, heads, record strip
   ========================================================================== */

.page--reviews .crumbs {
  margin: 0;
  max-width: none;
  padding: 0.85rem 4vw 0.4rem;
  background: transparent;
  border: 0;
}
.page--reviews .crumbs__list { width: var(--rq-shell-hero); margin-inline: auto; }
.page--reviews .crumbs__link,
.page--reviews .crumbs__current,
.page--reviews .crumbs__item::after { color: var(--rq-ink-soft); }
.page--reviews .crumbs__link:hover { color: var(--rq-ink); }

/* dukes.css line 2861 sets `p { max-width: var(--measure) }` globally. Every
   composed element below that happens to be a <p> — the register, the action
   rows, the score numeral, the index note — was being clipped to a reading
   measure and stranded left of centre. They are layout, not prose, so the
   measure is released here and re-applied only where text actually reads. */
.page--reviews .rq-register,
.page--reviews .rq-actions,
.page--reviews .rq-wall__act,
.page--reviews .rq-index__note,
.page--reviews .rq-note { max-width: none; }
.page--reviews .rq-actions--centre { justify-content: center; }

/* ---- the section register: number + label + rule ---------------------- */
.page--reviews .rq-register {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 clamp(1rem, 1.8vw, 1.6rem);
}
.page--reviews .rq-register__no {
  font-family: var(--rq-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rq-ink-soft);
}
.page--reviews .rq-register__label {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rq-oxblood);
}
/* the register rule is gone: Aarav, 20 Aug, "get rid of all the lines". The
   number and the label carry the chapter on their own. */
.page--reviews .rq-register__rule { display: none; }
.page--reviews .rq-register--dark .rq-register__no { color: rgb(251 248 242 / 62%); }
.page--reviews .rq-register--dark .rq-register__label { color: var(--rq-gold-lift); }

/* ---- display type ---------------------------------------------------- */
.page--reviews .rq-h1 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.55rem, 5.1vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--rq-cream);
}
.page--reviews .rq-h2 {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 3.15rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--rq-ink);
}
.page--reviews .rq-h2--dark { color: var(--rq-cream); }
.page--reviews .rq-lede {
  margin: 0;
  max-width: 46ch;                /* §10.4: body measure <= 46ch */
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.62;
  color: var(--rq-ink-soft);
}
.page--reviews .rq-lede--dark { color: rgb(251 248 242 / 80%); }

/* the small illustrative-imagery line that sits under a media band */
.page--reviews .rq-note {
  margin: 0.85rem 0 0;
  font-family: var(--rq-mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rq-ink-soft);
}
.page--reviews .rq-note--dark { color: rgb(251 248 242 / 66%); }

/* ---- actions --------------------------------------------------------- */
.page--reviews .rq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: var(--rq-tap);
  padding: 0.85rem 1.7rem;
  border: 0;
  border-radius: 10px;
  background: var(--rq-oxblood);
  color: var(--rq-cream);
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--rq-ease), transform 180ms var(--rq-ease);
}
.page--reviews .rq-btn:active { transform: translateY(1px); }
@media (hover: hover) {
  .page--reviews .rq-btn:hover { background: var(--rq-oxblood-dk); transform: translateY(-2px); }
}
.page--reviews .rq-btn--ghost {
  background: transparent;
  color: var(--rq-ink);
  border: 1.5px solid var(--rq-rule);
}
@media (hover: hover) {
  .page--reviews .rq-btn--ghost:hover { background: rgb(23 26 32 / 6%); border-color: var(--rq-ink); }
}
.page--reviews .rq-btn--ghost-dark {
  background: transparent;
  color: var(--rq-cream);
  border: 1.5px solid var(--rq-rule-dark);
}
@media (hover: hover) {
  .page--reviews .rq-btn--ghost-dark:hover { background: rgb(251 248 242 / 10%); border-color: var(--rq-gold); }
}
.page--reviews .rq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 0.85rem;
  margin: clamp(1.2rem, 2vw, 1.8rem) 0 0;
}

/* ---- THE RECORD STRIP (device 1) -------------------------------------- */
.page--reviews .rq-record {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 2.1rem;
  margin: clamp(1.3rem, 2.2vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--rq-mono);
  font-size: 0.715rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.page--reviews .rq-record li { display: grid; gap: 0.28rem; }
.page--reviews .rq-record .rq-record__k { margin: 0; color: rgb(251 248 242 / 62%); }
.page--reviews .rq-record .rq-record__v { margin: 0; font-weight: 700; color: var(--rq-gold-lift); }
.page--reviews .rq-record--light .rq-record__k { color: var(--rq-ink-soft); }
.page--reviews .rq-record--light .rq-record__v { color: var(--rq-oxblood); }

/* ---- stars ----------------------------------------------------------- */
.page--reviews .rq-stars {
  color: var(--rq-star);
  letter-spacing: 0.13em;
  font-size: 0.88rem;
  line-height: 1;
  white-space: nowrap;
}
.page--reviews .rq-stars--dark { color: var(--rq-star-dark); }
.page--reviews .rq-stars--lg { font-size: 1.15rem; }

/* ---- the source chip (Google) ---------------------------------------- */
.page--reviews .rq-source {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--rq-tap);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--rq-rule);
  background: transparent;
  color: var(--rq-ink);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms var(--rq-ease), border-color 180ms var(--rq-ease);
}
.page--reviews .rq-source__arrow { transition: transform 220ms var(--rq-ease); }
@media (hover: hover) {
  .page--reviews .rq-source:hover { background: rgb(23 26 32 / 5%); border-color: var(--rq-ink); }
  .page--reviews .rq-source:hover .rq-source__arrow { transform: translateX(3px); }
}
.page--reviews .rq-source--dark { border-color: var(--rq-rule-dark); color: var(--rq-cream); }
@media (hover: hover) {
  .page--reviews .rq-source--dark:hover { background: rgb(251 248 242 / 10%); border-color: var(--rq-gold); }
}
.page--reviews .rq-glogo {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rq-cream);
  flex: 0 0 auto;
}
.page--reviews .rq-glogo svg { display: block; }

/* ---- the quotation-mark device (§10.3) -------------------------------- */
.page--reviews .rq-quote { margin: 0; }
.page--reviews .rq-quote p { margin: 0; }
.page--reviews .rq-quote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 0.62;
  color: var(--rq-oxblood);
  margin-bottom: 0.3rem;
}
.page--reviews .rq-quote--dark::before { color: var(--rq-gold); }
.page--reviews .rq-quote--lead::before { font-size: 3.6rem; margin-bottom: 0.42rem; }

/* ---- the island itself ------------------------------------------------ */
.page--reviews .rq-band {
  position: relative;
  margin-inline: auto;
  margin-block: clamp(1.1rem, 2.2vw, 2rem);
  padding: clamp(2rem, 3.6vw, 3.6rem) clamp(1.3rem, 3.2vw, 3.2rem);
  border-radius: var(--rq-r-island);
  scroll-margin-top: calc(var(--head-h, 65px) + 84px);
}
.page--reviews .rq-band--dark { background: var(--rq-navy); color: var(--rq-cream); }
.page--reviews .rq-band--linen { background: var(--rq-linen); }

/* NO TEXTURE LAYER. A faint diagonal rule ran behind two bands (the §10.3
   "additional layer" device). Aarav, 20 Aug: no diagonal lines anywhere on
   this page. The bands carry their depth through colour and nesting instead.
   .rq-band--textured is left in the sheet as a no-op so any stale markup
   cannot resurrect it. */
.page--reviews .rq-band--textured::before { content: none; }

/* the three-layer nest (§4.2): band field -> frame -> plate */
.page--reviews .rq-frame {
  padding: clamp(20px, 2.6vw, 38px);
  border-radius: var(--rq-r-plate);
  background: var(--rq-cream);
  border: 1px solid var(--rq-rule-soft);
  box-shadow: var(--rq-lift);
}

/* ==========================================================================
   2. MEDIA
   Every image on this page is Aarav's own generated art from the repo
   library. Nothing is sourced, nothing is stock. The crown placeholder is
   kept for any slot that later empties.
   ========================================================================== */

.page--reviews .rq-media {
  position: relative;
  display: block;
  margin: 0;
  aspect-ratio: var(--rq-media-ar, 3 / 2);
  border-radius: var(--rq-r-plate);
  overflow: hidden;
  border: 1px solid var(--rq-rule);
  background: var(--rq-paper);
}
.page--reviews .rq-media--on-dark { border-color: var(--rq-rule-dark-soft); }
.page--reviews .rq-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  /* the house grade: never baked into the asset */
  filter: brightness(0.97) contrast(1.04) saturate(1.02);
}
.page--reviews .rq-slot {
  position: relative;
  display: block;
  margin: 0;
  aspect-ratio: var(--rq-media-ar, 3 / 2);
  border-radius: var(--rq-r-plate);
  overflow: hidden;
  border: 1px solid var(--rq-rule);
  background: linear-gradient(160deg, rgb(18 32 58 / 10%) 0%, rgb(18 32 58 / 22%) 100%), var(--rq-paper);
}
.page--reviews .rq-slot__crown {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(88px, 32%, 168px);
  height: auto;
  opacity: 0.15;
}
.page--reviews .rq-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   3. CHAPTER 01 — THE HERO ISLAND
   Aarav, 20 Aug: the hero takes a background image, the type goes in the
   middle over it, the reviewer chips stay at the foot, the right-hand block
   goes, and every hairline comes off.

   TEXT OVER PHOTOGRAPHY (§5). The scrim is measured, not assumed, and not
   eyeballed: the actual frame is composited in a canvas with these exact
   layers and every pixel scored. The first pass sat at 13.4:1 worst case,
   which is far more wash than legibility needs and was simply crushing the
   photograph, so it was tuned back four steps. Shipped: brightness(0.88)
   under a 44-74% navy gradient plus a soft radial. Brightest pixel anywhere
   behind the type is rgb(91,99,115) = 5.70:1 against cream (average 10.7:1),
   against a 4.5:1 floor. Re-measure with the canvas probe after ANY change to
   the image or the layers.
   ========================================================================== */

.page--reviews .rq-hero {
  position: relative;
  width: var(--rq-shell-hero);
  margin-top: clamp(0.5rem, 1.2vw, 1rem);
  padding: clamp(3.4rem, 6.5vw, 6.5rem) clamp(1.4rem, 4vw, 4rem) clamp(2rem, 3.4vw, 3.2rem);
  border-radius: 30px 30px 84px 30px;
  overflow: hidden;
  background: var(--rq-navy);
  color: var(--rq-cream);
  isolation: isolate;
}
.page--reviews .rq-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.page--reviews .rq-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: brightness(0.88) saturate(0.9);
}
.page--reviews .rq-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, rgb(18 32 58 / 26%) 0%, rgb(18 32 58 / 62%) 100%),
    linear-gradient(180deg, rgb(18 32 58 / 44%) 0%, rgb(18 32 58 / 50%) 55%, rgb(18 32 58 / 74%) 100%);
}
.page--reviews .rq-hero > *:not(.rq-hero__media) { position: relative; z-index: 1; }

.page--reviews .rq-hero__inner {
  display: grid;
  justify-items: center;
  text-align: center;
  width: min(100%, 62rem);
  margin-inline: auto;
}
.page--reviews .rq-hero__kicker {
  margin: 0 0 1rem;
  max-width: none;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rq-gold-lift);
}
.page--reviews .rq-hero .rq-h1 { margin: 0; max-width: 20ch; }
.page--reviews .rq-hero__score {
  margin: clamp(0.9rem, 1.6vw, 1.3rem) 0 0;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.1vw, 1.85rem);
  line-height: 1.2;
  color: var(--rq-gold-lift);
}
.page--reviews .rq-hero__score .rq-stars { font-size: 1rem; margin-right: 0.5rem; }
.page--reviews .rq-hero__lede {
  margin: clamp(1rem, 1.8vw, 1.5rem) 0 0;
  max-width: 52ch;
  color: rgb(251 248 242 / 86%);
}
.page--reviews .rq-hero .rq-actions { justify-content: center; }

/* ---- THE VOICE INDEX (device 3) --------------------------------------- */
.page--reviews .rq-index {
  margin-top: clamp(2rem, 3.2vw, 3rem);
}
.page--reviews .rq-index__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem 1.1rem;
  margin-bottom: 1rem;
  text-align: center;
}
.page--reviews .rq-index__title {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rq-gold-lift);
}
.page--reviews .rq-index__note {
  margin: 0;
  font-family: var(--rq-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(251 248 242 / 62%);
}
.page--reviews .rq-index__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page--reviews .rq-voice {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--rq-tap);
  padding: 0.35rem 1rem 0.35rem 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--rq-rule-dark-soft);
  background: rgb(251 248 242 / 6%);
  color: var(--rq-cream);
  text-decoration: none;
  transition: background-color 180ms var(--rq-ease), border-color 180ms var(--rq-ease), transform 180ms var(--rq-ease);
}
.page--reviews .rq-voice__face { width: 38px; height: 38px; flex: 0 0 auto; }
.page--reviews .rq-voice__who { display: grid; gap: 0.1rem; }
.page--reviews .rq-voice__name { font-size: 0.9rem; font-weight: 700; line-height: 1.15; }
.page--reviews .rq-voice .rq-stars { font-size: 0.72rem; }
@media (hover: hover) {
  .page--reviews .rq-voice:hover {
    background: rgb(251 248 242 / 12%);
    border-color: var(--rq-gold);
    transform: translateY(-2px);
  }
}
.page--reviews .rq-voice--more {
  padding-inline: 1.1rem;
  background: transparent;
  border-style: dashed;
  border-color: var(--rq-rule-dark);
  font-family: var(--rq-mono);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rq-gold-lift);
}

/* ==========================================================================
   4. CHAPTER 02 — THE VOICES LEDGER (linen island)
   STICKY media left (Aarav, 20 Aug: "make them still, keep it in the
   middle"), four numbered themes right.
   ========================================================================== */

.page--reviews .rq-voices { width: var(--rq-shell-voices); }
.page--reviews .rq-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  align-items: end;
  gap: clamp(1rem, 2.4vw, 2.6rem);
  margin-bottom: clamp(1.6rem, 2.6vw, 2.4rem);
}
.page--reviews .rq-head__note {
  margin: 0 0 0 auto;
  max-width: 40ch;
  text-align: right;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--rq-ink-soft);
}
.page--reviews .rq-head__note strong { display: block; color: var(--rq-ink); }
.page--reviews .rq-head--dark .rq-head__note { color: rgb(251 248 242 / 76%); }
.page--reviews .rq-head--dark .rq-head__note strong { color: var(--rq-cream); }

.page--reviews .rq-voices__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(1.4rem, 2.8vw, 2.8rem);
  align-items: start;
}
/* NOT sticky. Sticky pinned the plate to the viewport, so as the four themes
   scrolled up the image appeared to slide DOWN the column — which is exactly
   what Aarav reported twice ("the image is moving down when I scroll, keep it
   at one place in the middle"). Static and vertically centred against the
   ledger: it holds one place in the layout and scrolls with the page like
   everything else. This also restores his 19 Aug ruling on the same lane. */
.page--reviews .rq-voices__media {
  position: static;
  align-self: center;
}
.page--reviews .rq-voices__media .rq-media { --rq-media-ar: 3 / 4; }
.page--reviews .rq-voices__ledger { display: grid; gap: clamp(0.8rem, 1.3vw, 1.1rem); }

.page--reviews .rq-theme {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem clamp(0.9rem, 1.6vw, 1.5rem);
  margin: 0;
  padding: clamp(1.2rem, 1.9vw, 1.7rem) clamp(1.2rem, 2vw, 1.8rem);
  border-radius: var(--rq-r-plate);
  background: var(--rq-cream);
  border: 1px solid var(--rq-rule-soft);
  box-shadow: var(--rq-lift-soft);
  transition: transform 220ms var(--rq-ease), box-shadow 220ms var(--rq-ease);
}
@media (hover: hover) {
  .page--reviews .rq-theme:hover { transform: translateY(-3px); box-shadow: var(--rq-lift); }
}
.page--reviews .rq-theme__no {
  grid-row: 1 / span 3;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.2vw, 3rem);
  line-height: 0.86;
  color: var(--rq-oxblood);
}
.page--reviews .rq-theme__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  line-height: 1.15;
  color: var(--rq-ink);
}
.page--reviews .rq-theme__quote p { font-size: 1rem; line-height: 1.6; color: var(--rq-ink); max-width: 46ch; }
.page--reviews .rq-theme__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rq-rule-soft);
}
.page--reviews .rq-who { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; }
.page--reviews .rq-who__face { width: 40px; height: 40px; flex: 0 0 auto; }
.page--reviews .rq-who__name { font-size: 0.92rem; font-weight: 700; color: var(--rq-ink); }

/* letters variant of the shared .face — this page's own colouring */
.page--reviews .face--letters {
  background: var(--rq-navy-2);
  color: var(--rq-cream);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border: 0;
}
.page--reviews .rq-voice .face--letters { background: var(--rq-oxblood); }

/* ==========================================================================
   5. CHAPTER 03 — FEATURED (dark island)
   Portrait | the lead testimony at display size | two supports.
   ========================================================================== */

.page--reviews .rq-feature { width: var(--rq-shell-feat); }
.page--reviews .rq-feat__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr) minmax(0, 1fr);
  gap: clamp(1.1rem, 1.9vw, 1.7rem);
  align-items: stretch;
}
.page--reviews .rq-feat.rvw-feat__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: clamp(1.4rem, 2.2vw, 2.1rem);
  border-radius: var(--rq-r-plate);
  border: 1px solid var(--rq-rule-dark-soft);
  background: var(--rq-navy-2);
  color: var(--rq-cream);
  transition: transform 220ms var(--rq-ease), background-color 220ms var(--rq-ease);
}
@media (hover: hover) {
  .page--reviews .rq-feat.rvw-feat__card:hover { transform: translateY(-3px); background: var(--rq-navy-3); }
}
.page--reviews .rq-feat--lead.rvw-feat__card {
  background: var(--rq-cream);
  color: var(--rq-ink);
  border-color: var(--rq-rule-soft);
  box-shadow: var(--rq-lift);
  justify-content: center;
  gap: 1.2rem;
}
@media (hover: hover) {
  .page--reviews .rq-feat--lead.rvw-feat__card:hover { background: var(--rq-cream); transform: translateY(-3px); }
}
.page--reviews .rq-feat__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}
.page--reviews .rq-feat__face { width: 46px; height: 46px; flex: 0 0 auto; }
.page--reviews .rq-feat__who { display: grid; gap: 0.12rem; min-width: 0; }
.page--reviews .rq-feat__name {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.15;
}
.page--reviews .rq-feat__when {
  font-family: var(--rq-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(251 248 242 / 66%);
}
.page--reviews .rq-feat--lead .rq-feat__when { color: var(--rq-ink-soft); }
.page--reviews .rq-feat__quote p { font-size: 1.02rem; line-height: 1.6; color: rgb(251 248 242 / 92%); max-width: 46ch; }
.page--reviews .rq-feat--lead .rq-feat__quote p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  line-height: 1.24;
  color: var(--rq-ink);
  max-width: 22ch;
}
.page--reviews .rq-feat__stack { display: grid; gap: clamp(1.1rem, 1.9vw, 1.7rem); align-content: stretch; }
.page--reviews .rq-feat__stack .rq-feat.rvw-feat__card { height: 100%; }
.page--reviews .rq-feat__media { display: grid; align-content: start; gap: 0.7rem; }
.page--reviews .rq-feat__media .rq-media { --rq-media-ar: 2 / 3; }

/* ==========================================================================
   6. CHAPTER 04 — THE REVIEW WALL (the page's one full-bleed band)
   The homepage rw2 scrolling-columns pattern, ported here and carrying all
   24 reviews. Motion is CSS only: each column holds two identical lists and
   runs a keyframe to -50%, so the loop is seamless. The seam gap lives as
   padding-bottom on each list; a flex `gap` would offset the loop by g/2 and
   visibly jump. Hover, focus-within and the explicit pause all hold it, and
   reduced motion gets a still grid of the 24 originals with no control.
   ========================================================================== */

.page--reviews .rq-archive {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: clamp(1.6rem, 3vw, 3rem);
  padding: clamp(2.4rem, 4.2vw, 4.4rem) 0 clamp(2.4rem, 4vw, 4rem);
  background: var(--rq-mist);
  scroll-margin-top: calc(var(--head-h, 65px) + 84px);
}
.page--reviews .rq-archive__inner { width: var(--rq-shell-archive); margin-inline: auto; }
.page--reviews .rq-archive__head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: end;
  gap: clamp(1rem, 2.4vw, 2.6rem);
  margin-bottom: clamp(1.6rem, 2.6vw, 2.4rem);
}

/* ---- the marquee: two rows, opposite directions -----------------------
   Aarav, 20 Aug, on the vertical-columns build: he did not like the way the
   reviews were displayed and sent the 21st.dev `testimonial-marquee`
   component as the reference.

   Vanilla conversion, per the house pattern: this site is static HTML with
   no React, shadcn or Tailwind, so the component's stock integration steps
   do not apply. What is taken is the MECHANIC: two tracks per row, each
   `min-width: 100%`, both running the same keyframe to -100%, so the loop
   is seamless; the gap rides as padding-right on each track (a flex `gap`
   alone offsets the loop by g/2 and visibly jumps). Row one runs left, row
   two runs right. Hover, focus-within and the explicit button all pause.

   What is NOT taken: its demo data, its Unsplash avatars, and its
   `line-clamp-4`. These are real reviews, so none of them get truncated.
   ------------------------------------------------------------------- */

.page--reviews .rq-wall {
  position: relative;
  padding: clamp(1.1rem, 1.8vw, 1.8rem) 0;
  border-radius: 26px;
  background: var(--rq-paper);
  border: 1px solid var(--rq-rule-soft);
  overflow: hidden;
}
.page--reviews .rq-wall__pause {
  position: absolute;
  top: clamp(0.9rem, 1.4vw, 1.4rem);
  right: clamp(0.9rem, 1.4vw, 1.4rem);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: var(--rq-tap);
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--rq-rule);
  border-radius: 999px;
  background: var(--rq-cream);
  color: var(--rq-ink);
  font-size: 0.8rem;
  font-weight: 750;
  cursor: pointer;
}
.page--reviews .rq-wall__pause:focus-visible { outline: 3px solid #f0bd77; outline-offset: 2px; }
.page--reviews .rq-wall__glyph {
  width: 9px;
  height: 11px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.page--reviews .rq-wall[data-paused] .rq-wall__glyph {
  width: 0;
  height: 0;
  border: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.page--reviews .rq-marq {
  --rq-marq-gap: clamp(0.85rem, 1.2vw, 1.3rem);
  display: grid;
  gap: var(--rq-marq-gap);
}
.page--reviews .rq-marq__row {
  display: flex;
  overflow: hidden;
  /* 4.10: the edges FADE, they never hard-clip a card in half */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.page--reviews .rq-marq__track {
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  gap: var(--rq-marq-gap);
  min-width: 100%;
  padding-right: var(--rq-marq-gap);
  animation: rq-marq-left var(--rq-marq-dur, 64s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.page--reviews .rq-marq__row--rev .rq-marq__track { animation-name: rq-marq-right; }
@keyframes rq-marq-left {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}
@keyframes rq-marq-right {
  from { transform: translate3d(-100%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
.page--reviews .rq-marq__row:hover .rq-marq__track,
.page--reviews .rq-marq__track:focus-within,
.page--reviews .rq-wall[data-paused] .rq-marq__track { animation-play-state: paused; }

/* ---- the card ---------------------------------------------------------- */
.page--reviews .rq-card {
  display: flex;
  flex: 0 0 auto;
  width: clamp(17.5rem, 23vw, 22rem);
  flex-direction: column;
  gap: 0.9rem;
  margin: 0;
  padding: 0 0 clamp(1.05rem, 1.4vw, 1.3rem);
  overflow: hidden;
  border-radius: var(--rq-r-plate);
  background: var(--rq-cream);
  border: 1px solid var(--rq-rule-soft);
  box-shadow: var(--rq-lift-soft);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .page--reviews .rq-card { transition: transform 0.25s var(--rq-ease), box-shadow 0.25s var(--rq-ease); }
  .page--reviews .rq-card:hover { transform: translateY(-5px); box-shadow: var(--rq-lift); }
}
.page--reviews .rq-card__media {
  position: relative;
  display: block;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--rq-paper);
}
.page--reviews .rq-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the library mixes 3:2 landscape and 4:5 portrait frames. Cropping from
     the vertical centre decapitated the portraits; biasing the crop to the
     upper third keeps faces in every one of the 24. */
  object-position: 50% 32%;
  filter: brightness(0.97) contrast(1.04) saturate(1.02);
}
.page--reviews .rq-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0 clamp(1.05rem, 1.4vw, 1.3rem);
}
.page--reviews .rq-card__quote { flex: 1 1 auto; }
.page--reviews .rq-card__quote p { font-size: 0.95rem; line-height: 1.58; color: var(--rq-ink); }
.page--reviews .rq-card__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem 0.7rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rq-rule-soft);
}
.page--reviews .rq-card__meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 0.8rem;
  flex-wrap: wrap;
}
.page--reviews .rq-card__face { width: 42px; height: 42px; flex: 0 0 auto; }
.page--reviews .rq-card__who { display: grid; gap: 0.12rem; min-width: 0; }
.page--reviews .rq-card__name {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.15;
  color: var(--rq-ink);
}
.page--reviews .rq-card__when {
  font-family: var(--rq-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rq-ink-soft);
}
.page--reviews .rq-card__foot .rq-source {
  /* 40px was tidier in a 350px card and broke the 48px target rule on 48
     controls at once. The chip keeps the full tap height and gives back
     horizontal padding instead. */
  min-height: var(--rq-tap);
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
}
.page--reviews .rq-wall__act { display: flex; justify-content: center; margin: clamp(1.4rem, 2.4vw, 2.2rem) 0 0; }

/* ---- the method plate ------------------------------------------------- */
.page--reviews .rq-method {
  width: var(--rq-shell-notes);
  margin: clamp(1.6rem, 2.8vw, 2.6rem) auto 0;
  border-radius: var(--rq-r-plate);
  background: var(--rq-navy);
  color: var(--rq-cream);
  border: 1px solid var(--rq-rule-dark-soft);
  overflow: hidden;
}
.page--reviews .rq-method__summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--rq-tap);
  padding: clamp(1rem, 1.6vw, 1.4rem) clamp(1.1rem, 2vw, 1.8rem);
  cursor: pointer;
  list-style: none;
}
.page--reviews .rq-method__summary::-webkit-details-marker { display: none; }
.page--reviews .rq-method__titles { display: grid; gap: 0.18rem; flex: 1 1 auto; min-width: 0; }
.page--reviews .rq-method__label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.2;
  color: var(--rq-cream);
}
.page--reviews .rq-method__sub {
  font-family: var(--rq-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rq-gold-lift);
}
.page--reviews .rq-method__pm {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--rq-rule-dark);
}
.page--reviews .rq-method__pm::before,
.page--reviews .rq-method__pm::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--rq-gold);
  transition: transform 220ms var(--rq-ease), opacity 220ms var(--rq-ease);
}
.page--reviews .rq-method__pm::before { width: 13px; height: 1.6px; }
.page--reviews .rq-method__pm::after { width: 1.6px; height: 13px; }
.page--reviews .rq-method[open] .rq-method__pm::after { transform: rotate(90deg); opacity: 0; }
.page--reviews .rq-method__body { padding: 0 clamp(1.1rem, 2vw, 1.8rem) clamp(1.1rem, 1.8vw, 1.6rem); }
.page--reviews .rq-method__list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0 0 0 1.1rem;
  color: rgb(251 248 242 / 84%);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 62ch;
}

/* ==========================================================================
   7. CHAPTER 05 — THE CLOSE (dark bookend island)
   ========================================================================== */

.page--reviews .rq-close {
  width: var(--rq-shell-contact);
  border-radius: 30px 30px 84px 30px;
  background:
    radial-gradient(112% 130% at 12% -14%, rgb(45 65 99 / 82%) 0%, rgb(45 65 99 / 0%) 58%),
    var(--rq-navy);
  color: var(--rq-cream);
  margin-bottom: clamp(1.6rem, 3vw, 3rem);
}
.page--reviews .rq-close__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.6rem, 3vw, 3.2rem);
  align-items: center;
}
.page--reviews .rq-close__media .rq-media { --rq-media-ar: 3 / 2; }

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media (max-width: 74.99em) {
  .page--reviews .rq-feat__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page--reviews .rq-feat__media { grid-column: 1 / -1; }
  /* the display crop is capped; a 2:3 frame spanning a full tablet row would
     be 1150px of image */
  .page--reviews .rq-feat__media .rq-media { --rq-media-ar: auto; height: clamp(17rem, 40vw, 24rem); }
}

@media (max-width: 61.99em) {
  .page--reviews .rq-voices__grid,
  .page--reviews .rq-close__grid { grid-template-columns: minmax(0, 1fr); }
  .page--reviews .rq-voices__media .rq-media { --rq-media-ar: 16 / 10; }
  .page--reviews .rq-head,
  .page--reviews .rq-archive__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .page--reviews .rq-head__note { text-align: left; margin-inline: 0; }
  .page--reviews .rq-feat__grid { grid-template-columns: minmax(0, 1fr); }
  .page--reviews .rq-close__grid > .rq-close__media { order: -1; }
}

@media (max-width: 47.99em) {
  .page--reviews .rq-hero,
  .page--reviews .rq-close { border-radius: 22px 22px 52px 22px; }
  .page--reviews .rq-band { border-radius: 22px; padding-inline: clamp(1rem, 4vw, 1.5rem); }
  .page--reviews .rq-card { width: min(78vw, 20rem); }
  .page--reviews .rq-wall__pause { position: static; margin: 0 clamp(1rem, 4vw, 1.5rem) 1rem; }
  .page--reviews .rq-record { gap: 0.7rem 1.4rem; }
  .page--reviews .rq-theme { grid-template-columns: minmax(0, 1fr); }
  .page--reviews .rq-theme__no { grid-row: auto; font-size: 1.9rem; }
  .page--reviews .rq-feat--lead .rq-feat__quote p { max-width: none; }
}

@media (max-width: 30em) {
  .page--reviews .rq-btn,
  .page--reviews .rq-actions > * { width: 100%; }
}

/* ==========================================================================
   9. MOTION DISCIPLINE
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .page--reviews .rq-btn,
  .page--reviews .rq-source,
  .page--reviews .rq-source__arrow,
  .page--reviews .rq-voice,
  .page--reviews .rq-theme,
  .page--reviews .rq-card,
  .page--reviews .rq-feat,
  .page--reviews .rq-method__pm::before,
  .page--reviews .rq-method__pm::after {
    transition: none !important;
    transform: none !important;
  }
  /* the wall becomes a still grid of the 24 originals */
  .page--reviews .rq-marq__track { animation: none; }
  .page--reviews .rq-wall [data-rq-wall-dupe] { display: none; }
  .page--reviews .rq-wall { overflow: visible; padding-inline: clamp(1.1rem, 1.8vw, 1.8rem); }
  .page--reviews .rq-marq__row {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .page--reviews .rq-marq__track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    min-width: 0;
    padding-right: 0;
  }
  .page--reviews .rq-card { width: auto; }
  .page--reviews .rq-wall__pause { display: none; }
}

@media print {
  .page--reviews .rq-band,
  .page--reviews .rq-archive { box-shadow: none; }
  .page--reviews .rq-marq__track { animation: none; }
  .page--reviews .rq-marq__row { overflow: visible; mask-image: none; }
  .page--reviews .rq-wall [data-rq-wall-dupe] { display: none; }
}