/* DS-09 Blueprint Service Map -- Trueline Plumbing Works, plumbing.
 *
 * Every contrast this stylesheet ships, measured at build time by
 * css.contrast() rather than asserted:
 *
 *   ink on the page ground               15.53:1
 *   ink on the title-block plane         16.93:1
 *   muted text on the page ground        8.23:1
 *   muted text on the plane              8.98:1
 *   link text on the page ground         8.45:1
 *   link text on the plane               9.21:1
 *   the accent on the page ground        11.96:1
 *   the accent on the plane              13.04:1
 *   the action label on its fill         9.45:1
 *   the action label on the hover fill   7.14:1
 *   the rule colour on the page ground   9.14:1
 *   the rule colour on the plane         9.97:1
 *   the focus ring on the page ground    8.45:1
 *   the focus ring on the plane          9.21:1
 *   ink on the highlight fill            13.33:1
 *   ink on the review panel              13.81:1
 *   ink on the staff panel               12.82:1
 *   footer text on the footer            15.80:1
 *
 * NO DEVIATION IS TAKEN. The ranked treatment names the focus ring as
 * #3F4B0C at 3px solid with 3px offset. Measured against the #F4F1F8 page
 * that is 8.45:1 and against the #FCFCFD plane 9.21:1, both far past the
 * 3:1 minimum for a non-text indicator, so the ring is drawn exactly as
 * specified at exactly the specified width and offset. The plane is kept in
 * the indicator as the outer halo, which is what makes the ring readable
 * when focus lands on a control sitting over a photograph.
 *
 * The rest of the palette is used according to what it measures:
 *
 *   - The ACTION #3F4B0C is 8.45:1 on the ground, so it carries every
 *     link and the primary fill. Its label is #FFFFFF at 9.45:1, and on
 *     the hover fill #4F5E0D still 7.14:1.
 *   - The ACCENT #391D6D is 11.96:1 on the ground. It is the drawing
 *     ink: every leader line, every callout, every key number and the
 *     waterline on each frame. It is never a large fill, because a page of
 *     it would stop being a drawing and start being a wash.
 *   - The PLANE #FCFCFD is a SURFACE, never text and never a rule. It is
 *     the title block, the drawer panel, the subscribe band and every card,
 *     and ink reads on it at 16.93:1. The footer is the one plane that is
 *     not this one: the treatment names #271E38 there, and white reads on
 *     it at 15.80:1.
 *   - The HIGHLIGHT #B7F0B2 is the selected-state fill only, with ink on
 *     it at 13.33:1. The review panel #E8E3F2 and the staff panel #E3DAEC
 *     are its two quieter relatives, at 13.81:1 and 12.82:1.
 *   - Muted prose is the named #4C445A at 8.23:1; rules and frames are the
 *     named #4A376C at 9.14:1. Neither is mixed from the ground here,
 *     because this treatment states both outright.
 *
 * THE BLUEPRINT GRID is two repeating-linear-gradients on the body: a fine
 * line every 24px in #D9D0E8 and a heavy line every 120px in #CBBEDE.
 * Both are decoration and neither is ever asked to carry meaning -- at
 * 1.33:1 and 1.57:1 against the ground they are deliberately
 * below the non-text threshold, because a grid that competes with the
 * content is a pattern, not a drawing surface. Everything that has to be
 * read sits on an opaque plane above them.
 *
 * THE TITLE BLOCK. Section 3 asks for a technical title-block header at
 * exactly 80px desktop and 56px mobile. Those heights are set in pixels on
 * the inner flex row, never in em and never on the text, so the bar cannot
 * change height when the fonts land. The wordmark, the navigation and the
 * Book control are three ruled fields of one block rather than three items
 * in a row, which is the whole difference between this header and a generic
 * one.
 */




:root {
  --bg: #F4F1F8;
  --ink: #1D1825;
  --act: #3F4B0C;
  --acc: #391D6D;
  --hi: #FCFCFD;
  --surface: #FCFCFD;
  --muted: #4C445A;
  --line: #4A376C;
  --grid-f: #D9D0E8;
  --grid-h: #CBBEDE;
  --act-h: #4F5E0D;
  --on-act: #FFFFFF;

  /* Named outright by the ranked treatment rather than mixed from the
     ground: the pressed action, the selected-state fill, the two quiet
     panels, the footer plane, and the frame geometry the treatment asks
     for (a 2px frame at an 8px radius with a 5px waterline). */
  --act-a: #2F380B;
  --hi-fill: #B7F0B2;
  --on-hi-fill: #1D1825;
  --rev-panel: #E8E3F2;
  --stf-panel: #E3DAEC;
  --foot: #271E38;
  --on-foot: #FFFFFF;
  --frame-radius: 8px;
  --frame-w: 2px;
  --waterline: 5px;
  --lift: rgba(29, 24, 37, .14);

  /* Section 4's spacing scale, entire. No length in this build is off it. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --max: 1320px;         /* the CONTENT width, section 4 */
  --measure: 68ch;        /* section 4 */
  --measure-s: 52ch;      /* section 4, review quotations */
  --radius: 16px;      /* section 4, the only radius in the build */
  --head-h:var(--catalog-font-heading);        /* section 4, the title block, mobile */
  --band-pad: 72px;       /* section 4's 72 / 112 / 144 section spacing */
  --gutter: 16px;
  --gap: var(--s5);       /* base.css reads this for every .grid */

  --hair: 1px;
  --rule: 2px;

  --font-h:var(--catalog-font-heading);
  --font-b:var(--catalog-font-body);

  /* Section 4: 220ms standard, 600ms atmospheric maximum. */
  --t: 220ms cubic-bezier(.2,.8,.2,1);
  --t-long: 600ms cubic-bezier(.2,.8,.2,1);

  /* base.css draws :focus-visible from these three, so the ring is set by
     declaring them rather than by rewriting the rule. Section 4's geometry
     exactly, and the colour is the treatment's own #3F4B0C. */
  --focus-ring: var(--act);
  --focus-width: 3px;
  --focus-offset: 3px;
}

/* Section 7's gutter ladder, and the section spacing that steps with it. */
@media (min-width: 360px)  { :root { --gutter: 18px; } }
@media (min-width: 375px)  { :root { --gutter: 20px; } }
@media (min-width: 414px)  { :root { --gutter: 24px; } }
@media (min-width: 768px)  { :root { --gutter: 36px; --band-pad: 112px; } }
@media (min-width: 1024px) {
  :root { --gutter: 48px; --band-pad: 144px; --head-h:var(--catalog-font-heading); }
}

/* The outer halo of the focus ring. The outline is base.css's and
   carries section 4's 3px/3px; this only puts the specified highlight back
   around it, which is what keeps the ring legible over a photograph. */
:focus-visible {
  box-shadow: 0 0 0 calc(var(--focus-offset) + var(--focus-width) * 2)
              var(--hi);
}

/* ---- the drawing surface ---------------------------------------------- */

body {
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(to right,
      var(--grid-h) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(to bottom,
      var(--grid-h) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(to right,
      var(--grid-f) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom,
      var(--grid-f) 0 1px, transparent 1px 24px);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 1rem;
  line-height: 1.6;
}

@media (min-width: 768px) { body { font-size: 1.0625rem; } }

h1, h2, h3 {
  font-family: var(--font-h);
  font-weight: 700;
  margin: 0;
  overflow-wrap: break-word;
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* Section 4's mobile H1, then its desktop H1 at the 768 identity change. */
h1 {
  font-size: clamp(2.25rem, 11vw, 3.75rem);
  line-height: .98;
  letter-spacing: -.02em;
}

@media (min-width: 768px) {
  h1 {
    font-size: clamp(3.25rem, 7vw, 7rem);
    line-height: .94;
    letter-spacing: -.035em;
  }
}

h2 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1.02; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15; }

p { margin: 0; }

.measure   { max-width: var(--measure); }
.measure-s { max-width: var(--measure-s); }

a { color: var(--act); text-underline-offset: .18em; }
a:hover { color: var(--act-h); }

/* Section 4 puts the metadata floor at .8125rem and labels at .875rem. This
   is the drawing-annotation voice, and it is used for every key, number and
   label in the build -- which is what makes the legends read as one system
   rather than as twenty decisions. */
.nav__no, .price__q, .svc__fitlabel, .gal__no, .rev__no, .proc__no,
.how__no, .ft__legal, .hint, .field__opt, .sub-form__status,
.cform__status, .pv__date, .revp__by, .rev__by,
.hero__eyebrow, .hero__leg-no, .sa__no, .ft__tb-k, .galp__cap, .place__cap,
.hero__cap, .sap__cap, .sa__plan-cap {
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-h);
}

/* ---- the band --------------------------------------------------------- */
/*
 * `overflow: clip` and not `hidden`: clip contains the leader rules that run
 * to the band edge without creating a scroll container, which `hidden` would,
 * and a scroll container is what silently breaks a sticky child.
 */

.sec {
  position: relative;
  overflow: clip;
  padding-block: var(--band-pad);
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sec > .wrap > * + * { margin-top: var(--s6); }

/* Every band heading carries a drawing tick above it: a short heavy rule
   with a finer one running out from it, at the same distance every time. */
.sec > .wrap > h2,
.sec > .wrap > .phead__h1,
.sec > .wrap > .nf__h1 {
  padding-top: var(--s5);
  position: relative;
}

.sec > .wrap > h2::before,
.sec > .wrap > .phead__h1::before,
.sec > .wrap > .nf__h1::before {
  content: "";
  display: block;
  width: 72px;
  height: var(--rule);
  margin-bottom: var(--s5);
  background: var(--acc);
}

/* ---- the title block -------------------------------------------------- */

.hd {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--hi);
  color: var(--ink);
  border-bottom: var(--rule) solid var(--line);
}

/* A button carries its own pair and must not inherit the bar's link colour:
   `.hd a` is (0,1,1) and `.btn--book` is (0,1,0), so without the :not() the
   bar's ink repaints the Book control's label. */
.hd a:not(.btn) { color: var(--ink); }
.hd a:not(.btn):hover { color: var(--act); }

.hd__in {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: var(--head-h);
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Field one of the block: the wordmark, ruled off from what follows. */
.mark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 auto;
  align-self: stretch;
  padding-right: var(--s3);
  border-right: var(--hair) solid var(--line);
  font-family: var(--font-h);
  text-transform: uppercase;
  text-decoration: none;
}

@media (min-width: 414px) { .mark { padding-right: var(--s5); } }

.mark__h {
  display: block;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
}

@media (min-width: 414px) { .mark__h { font-size: 1.375rem; } }

.mark__s {
  display: none;
  font-size: .8125rem;
  line-height: 1.2;
  letter-spacing: .16em;
  color: var(--muted);
}

@media (min-width: 768px) { .mark__s { display: block; margin-top: 3px; } }

/* Field two: the legend index. Hidden below the breakpoint, where the
   drawer carries the same list. */
.nav { display: none; }

@media (min-width: 1024px) {
  .nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: var(--s5);
  }

  .nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2) var(--s5);
    margin: 0;
  }

  .nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 44px;
    font-family: var(--font-h);
    font-size: .9375rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
  }

  /* Signature effect, row 6: the leader rule draws itself out. */
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 8px;
    height: var(--hair);
    background: var(--acc);
    transition: right var(--t);
  }

  .nav__link:hover::after,
  .nav__link:focus-visible::after,
  .nav__link[aria-current="page"]::after { right: 0; }

  .nav__link[aria-current="page"] { color: var(--acc); }
}

.nav__no {
  color: var(--muted);
  letter-spacing: .12em;
}

/* Field three: the action. Ruled off on its own, the way a title block
   separates the approval cell. */
.hd .btn--book {
  align-self: center;
  flex: 0 0 auto;
  margin-left: auto;
  padding-inline: var(--s3);
  font-size: .875rem;
}

@media (min-width: 414px) {
  .hd .btn--book { padding-inline: var(--s5); font-size: 1rem; }
}

@media (min-width: 1024px) {
  .hd .btn--book {
    margin-left: 0;
    padding-left: var(--s5);
  }
}

/* ---- the drawer ------------------------------------------------------- */

.drawer {
  align-self: center;
  margin-left: var(--s2);
  position: static;
}

@media (min-width: 414px) { .drawer { margin-left: var(--s3); } }

@media (min-width: 1024px) { .drawer { display: none; } }

.drawer__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding-inline: var(--s2);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-h);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (min-width: 414px) {
  .drawer__toggle { padding-inline: var(--s3); font-size: .875rem; }
}

.drawer__bars {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.drawer__word { display: block; }

.drawer__panel {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 100%;
  z-index: 40;
  padding: var(--s4);
  background: var(--hi);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px var(--lift);
}

.drawer__link {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding-inline: var(--s2);
  font-family: var(--font-h);
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: var(--hair) solid var(--line);
}

.drawer__link:last-child { border-bottom: 0; }
.drawer__link[aria-current="page"] { color: var(--acc); }

/* ---- controls --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--s3) var(--s5);   /* section 4: 24px minimum horizontal */
  border: var(--hair) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-h);
  font-size: 1rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--t), color var(--t),
              border-color var(--t);
}

.btn--primary, .btn--book, .btn--sub {
  background: var(--act);
  color: var(--on-act);
  border-color: var(--act);
}

.btn--primary:hover, .btn--book:hover, .btn--sub:hover {
  background: var(--act-h);
  border-color: var(--act-h);
  color: var(--on-act);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn--ghost:hover { border-color: var(--acc); color: var(--acc); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s5);
}

.hero__second, .svcp__link, .svc__link, .galp__all, .stfp__all, .revp__all,
.faqp__all, .rev__svc {
  font-family: var(--font-h);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---- forms ------------------------------------------------------------ */

.field > label {
  font-family: var(--font-h);
  font-size: .875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s2);
}

.field input, .field select, .field textarea {
  min-height: 44px;
  padding: var(--s3) var(--s4);
  background: var(--hi);
  color: var(--ink);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
}

.field input::placeholder, .field textarea::placeholder {
  color: var(--muted);
}

.field textarea { min-height: 9rem; }

.hint { display: block; margin-top: var(--s2); }

.err {
  display: block;
  margin-top: var(--s2);
  color: var(--acc);
  font-family: var(--font-h);
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---- the subscribe band ----------------------------------------------- */

.sub-band {
  background: var(--hi);
  border-top: var(--rule) solid var(--line);
  border-bottom: var(--hair) solid var(--line);
  padding-block: var(--s8);
}

.sub-band__in { display: grid; gap: var(--s6); }

@media (min-width: 1024px) {
  .sub-band__in {
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    gap: var(--s7);
    align-items: end;
  }
}

.sub-band__h { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.sub-band__p { margin-top: var(--s3); color: var(--muted); }

.sub-form { display: grid; gap: var(--s4); }

@media (min-width: 560px) {
  .sub-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .sub-form__status { grid-column: 1 / -1; }
}

.sub-form__field { min-width: 0; }
.sub-form__field input { width: 100%; }

/* ---- the footer ------------------------------------------------------- */

.ft {
  background: var(--hi);
  border-top: var(--rule) solid var(--line);
  padding-block: var(--s8) var(--s7);
}

.ft__in {
  display: grid;
  gap: var(--s7);
  margin-top: var(--s8);
}

@media (min-width: 768px) {
  .ft__in {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s6);
  }
}

.ft__h {
  font-family: var(--font-h);
  font-size: .875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s4);
}

.ft__addr { color: var(--ink); }

.ft__hours { margin: 0; }

.ft__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s2);
  border-bottom: var(--hair) solid var(--line);
}

.ft__row:last-child { border-bottom: 0; }

.ft__list { display: grid; gap: var(--s2); }

.ft__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-h);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}

.ft__list a:hover { color: var(--acc); }

.ft__foot {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: var(--hair) solid var(--line);
  display: grid;
  gap: var(--s3);
}

/* ---- the drawing-revision block --------------------------------------- */
/*
 * Section 3's fourth row. A revision block is a ruled strip of named cells
 * across the head of the footer, with the approval cell at the end -- so the
 * cells sit in a grid that stays a strip at every width rather than
 * collapsing into a list, and the action is pushed to the far end from 768.
 */

.ft__tb { padding-bottom: var(--s5); }

.ft__tb-in {
  display: grid;
  gap: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: var(--rule) solid var(--line);
}

@media (min-width: 768px) {
  .ft__tb-in {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s6);
    align-items: end;
  }
}

.ft__tb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s5);
  margin: 0;
}

@media (min-width: 560px) {
  .ft__tb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .ft__tb-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.ft__tb-cell {
  padding-left: var(--s3);
  border-left: var(--hair) solid var(--line);
}

.ft__tb-v {
  margin: var(--s1) 0 0;
  font-family: var(--font-h);
  font-size: 1.0625rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---- print ------------------------------------------------------------ */
/*
 * The blueprint grid is a screen surface, not a paper one: printed, it is a
 * cartridge tax and a grey page. The ground goes white, the ink goes black,
 * and the rules become something a printer will actually render.
 */

@media print {
  body { background-image: none; background-color: #FFFFFF; color: #101010; }
  .hd { position: static; background: none; border-bottom: 1px solid #000; }
  .ft { background: none; border-top: 2px solid #000; }
  .sec { padding-block: var(--s7); }
}


/* PREMIUM REALISM PASS — DS01-09
   One unmistakable signature per design; shared selectors only provide polish. */
footer, .ft { position: relative; overflow: hidden; isolation: isolate; }
footer::before, .ft::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 88% 12%, rgba(57,29,109,.10), transparent 38%), linear-gradient(110deg, transparent 0 58%, rgba(57,29,109,.10) 58% 59%, transparent 59%); }
footer a, .ft a { text-underline-offset: .28em; transition: color .2s ease, transform .2s ease; }
footer a:hover, footer a:focus-visible, .ft a:hover, .ft a:focus-visible { color: #391D6D; }
.stf, .stf__card, [class*="staff-card"] { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.stf:hover, .stf__card:hover, [class*="staff-card"]:hover { transform: translateY(-3px); border-color: #391D6D; box-shadow: 0 18px 48px rgba(57,29,109,.10); }
.field--intake { padding: 14px; border-inline-start: 3px solid #391D6D; background: rgba(57,29,109,.10); }
.field--intake label { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .stf, .stf__card, [class*="staff-card"] { transition: none; } .stf:hover, .stf__card:hover, [class*="staff-card"]:hover { transform: none; } }


/* ---- the footer plane -------------------------------------------------
 * The ranked treatment gives the footer its own ground (#271E38) and its
 * own text colour (#FFFFFF) rather than the card plane every other block
 * sits on. Only colour is restated here; every measurement above is the
 * base layout's and is left alone.
 */

.ft {
  background: var(--foot);
  color: var(--on-foot);
  border-top-color: rgba(255, 255, 255, .34);
}

.ft a:not(.btn),
.ft__addr,
.ft__list a,
.ft__tb-v { color: var(--on-foot); }

.ft__h,
.ft__tb-k,
.ft__foot { color: rgba(255, 255, 255, .82); }

.ft__row,
.ft__foot,
.ft__tb-in,
.ft__tb-grid,
.ft__tb-cell { border-color: rgba(255, 255, 255, .34); }

.ft a:not(.btn):hover,
.ft__list a:hover { color: var(--hi-fill); }

footer::before, .ft::before {
  background:
    radial-gradient(circle at 88% 12%, rgba(183, 240, 178, .16), transparent 38%),
    linear-gradient(110deg, transparent 0 58%, rgba(183, 240, 178, .16) 58% 59%, transparent 59%);
}

/* ---- the two named panels --------------------------------------------- */

.rev__card, .revp__item { background: var(--rev-panel); }
.rev__card { padding-inline: var(--s5); }

.stf__card, .stfp__card { background: var(--stf-panel); }

/* ---- the selected-state fill ------------------------------------------ */

[aria-current="page"].drawer__link,
.faqg details[open] > summary { background: var(--hi-fill); color: var(--on-hi-fill); }