/* ==========================================================================
   BAKKAR PRINTING — THEME "INDUSTRIAL PRECISION"
   pages/quote.css — quote.html ONLY.
   --------------------------------------------------------------------------
   Everything reusable (buttons, sec-head, spec plate, specstrip, form
   controls, check / check-grid, filedrop, note, cta-band, brackets, micro)
   comes from components.css and is used AS-IS. This file holds only what is
   genuinely unique to the RFQ:

     · the masthead + the JOB TICKET stub (no photograph: this page is a work
       surface, not a showroom)
     · the 3-step stepper and its hairline progress rail
     · the bag-type / extras choice fieldsets and the DIMENSIONS drawing row
     · the PAYLOAD plate — the read-only carbon copy of exactly what is sent
       (name · mobile · email · title · notes). No price row: no price column.
     · the reassurance rail (how quoting works · what we need · why no prices)
     · the success plate

   Direction policy: logical properties throughout. Latin codes, numbers,
   phone numbers and the literal DB column names stay LTR via dir="ltr".
   ========================================================================== */


/* ==========================================================================
   00. DARK-MODE CORRECTION FOR THE VALIDATION STATES
   --------------------------------------------------------------------------
   components.css paints the error/ok states from the RAW primitives
   (--err-500 #C6151C, --ok-500 #1F7D52) rather than the mode-aware semantic
   tokens (--err / --ok). Those primitives are the PAPER values: on graphite,
   #C6151C measures only 3.15:1 against --bg, so the inline field errors and
   the form summary are illegible in dark mode.

   This page must not edit components.css, so instead of restating a single
   component rule we simply RE-POINT the two primitives inside the RFQ's own
   scope when the dark canvas is live. Every downstream rule
   (.field--error, .field__error, .form-error, .field--ok) then resolves to a
   legible red/green with no duplicated declarations.
   TODO(core): make components.css read --err / --ok and delete this block.
   ========================================================================== */
:root[data-theme="dark"] .quote-work,
:root[data-theme="dark"] .quote-done {
  --err-500: var(--err-400);   /* #FF3B42 — 5.0:1 on the graphite canvas */
  --ok-500:  var(--ok-400);    /* #35B27C — AA on the graphite canvas    */
}


/* ==========================================================================
   01. MASTHEAD
   ========================================================================== */
.quote-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block-start: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
  border-block-end: var(--bw-hair) solid var(--line);
}

/* The blueprint net, drawn IN the section (the .blueprint utility sits at
   z-index:-1 and would fall behind the void backdrop). */
.quote-head__net {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,  var(--grid-line-major) 0 1px, transparent 1px calc(var(--grid-unit) * 5)),
    repeating-linear-gradient(to bottom, var(--grid-line-major) 0 1px, transparent 1px calc(var(--grid-unit) * 5)),
    repeating-linear-gradient(to right,  var(--grid-line) 0 1px, transparent 1px var(--grid-unit)),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px var(--grid-unit));
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 92%);
          mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.quote-head__inner { position: relative; z-index: 2; }
.quote-head__crumbs { margin-block-end: var(--s-8); }

/* The masthead sits in a VOID band. On paper that band is the drafting board
   (--bone-250), and --fg-subtle — which components.css gives the crumbs and the
   micro label — measures only 3.85:1 there. Both are real text, so they come up
   one step to --fg-muted (5.9:1 on the board, 11:1 on the graphite). */
.crumbs.quote-head__crumbs,
.crumbs.quote-head__crumbs a { color: var(--fg-muted); }
.crumbs.quote-head__crumbs a:hover { color: var(--accent); }

.quote-head__split {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--s-9) var(--s-10);
  align-items: end;
  padding-block-end: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
}
@media (max-width: 899px) {
  .quote-head__split { grid-template-columns: 1fr; gap: var(--s-7); align-items: start; }
}

.quote-head__label { display: block; margin-block-end: var(--s-5); color: var(--fg-muted); }

.quote-head__title {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-hero);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  /* NOT --paper-000: that is a white primitive and would vanish on the printed
     sheet. --fg-strong is the ink of whichever mode is live. */
  color: var(--fg-strong);
}
[dir="rtl"] .quote-head__title { text-transform: none; letter-spacing: 0; }

.quote-head__lead {
  margin-block-start: var(--s-5);
  max-inline-size: 48ch;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}


/* -- The job-ticket stub --------------------------------------------------- */
/* The stub is a PLATE laid on the drawing: it must resolve through --surface,
   which is the white sheet on paper and the raised graphite panel in the dark.
   A literal rgba(8,9,11,.72) here burned a black hole in light mode. */
.quote-ticket {
  padding: var(--s-6);
  background-color: var(--surface);
  border: var(--bw-hair) solid var(--line);
  border-block-start: var(--bw-rule) solid var(--accent);
  box-shadow: var(--shadow-2);
}
.quote-ticket__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-block-end: var(--s-4);
  border-block-end: var(--bw-hair) solid var(--line);
}
.quote-ticket__ref {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-strong);
}

.quote-ticket__kv {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3) var(--s-5);
  margin-block-start: var(--s-4);
}
.quote-ticket__kv dt {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  white-space: nowrap;
}
.quote-ticket__kv dd {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--fg);
  min-inline-size: 0;
  text-align: end;
}
.quote-ticket__price { color: var(--accent); }

/* The four facts an estimator prints at the top of a quotation sheet. */
.quote-head__specs { position: relative; z-index: 2; }
.quote-head__specs .specstrip__v { font-size: var(--fs-lg); }
.quote-head__specs .specstrip__v--accent { color: var(--accent); }


/* ==========================================================================
   02. THE WORK AREA — form column + reassurance rail
   ========================================================================== */
.quote-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: var(--s-9);
  align-items: start;
}
@media (max-width: 1023px) {
  .quote-work { grid-template-columns: 1fr; gap: var(--s-8); }
}

.quote-main { min-inline-size: 0; }


/* ==========================================================================
   03. THE STEPPER + PROGRESS RAIL
   ========================================================================== */
.qsteps { margin-block-end: var(--s-7); }

.qsteps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: var(--bw-hair) solid var(--line);
  background-color: var(--surface);
  list-style: none;
}
.qsteps__item { min-inline-size: 0; }
.qsteps__item + .qsteps__item { border-inline-start: var(--bw-hair) solid var(--line); }

.qsteps__btn {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  inline-size: 100%;
  min-block-size: 56px;
  padding: var(--s-4) var(--s-4);
  text-align: start;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--fg-subtle);
  transition: var(--t-color);
}
.qsteps__btn::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--bw-slab);
  background-color: var(--accent);
  transform: scaleX(0);           /* grows from the centre: direction-agnostic */
  transition: transform var(--dur-2) var(--ease);
}
.qsteps__btn:hover { color: var(--fg); background-color: var(--surface-3); }
.qsteps__btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
.qsteps__btn[aria-disabled="true"]:hover { background: none; color: var(--fg-subtle); }

.qsteps__item.is-active .qsteps__btn { color: var(--fg); }
.qsteps__item.is-active .qsteps__btn::before { transform: scaleX(1); }
.qsteps__item.is-done .qsteps__btn { color: var(--fg-muted); }

/* The step index is TEXT, so it may not sit on --line-contrast (a RULE colour,
   ~3.3:1 on paper). --fg-subtle is the dimmest token that still clears AA in
   both modes. */
.qsteps__n {
  flex: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: 1.2;
  color: var(--fg-subtle);
  transition: color var(--dur-1) var(--ease);
}
.qsteps__item.is-active .qsteps__n,
.qsteps__item.is-done .qsteps__n { color: var(--accent); }

.qsteps__text { display: block; min-inline-size: 0; }

.qsteps__t {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  line-height: 1.4;
  color: inherit;
}
[dir="rtl"] .qsteps__t { font-family: var(--font-body); }

.qsteps__h {
  display: block;
  margin-block-start: var(--s-2);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--fg-subtle);
}
@media (max-width: 767px) {
  .qsteps__h { display: none; }
  .qsteps__btn { padding: var(--s-3); }
}

/* Readout + rail */
.qsteps__bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-block-start: var(--s-4);
}
.qsteps__readout {
  flex: none;
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}
.qsteps__readout [data-step-now] { color: var(--accent); font-weight: var(--fw-semi); }
.qsteps__slash { padding-inline: 4px; color: var(--fg-subtle); }

.qprog {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 2px;
  background-color: var(--line);
}
.qprog__fill {
  display: block;
  block-size: 100%;
  inline-size: 33%;
  background-color: var(--accent);
  transition: inline-size var(--dur-3) var(--ease);
}


/* ==========================================================================
   04. THE PANELS
   ========================================================================== */
.quote-form { gap: var(--s-6); }

.quote-panel__row { margin-block-start: var(--s-6); }

.quote-prefill { margin-block-end: var(--s-6); }
.quote-prefill strong { color: var(--fg); }
.quote-prefill strong::after { content: " · "; color: var(--fg-subtle); }

/* Choice fieldsets (bag type · extras). A real <fieldset> for the group
   semantics, stripped of the browser's own chrome. */
.qchoice {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}
.qchoice legend.field__label {
  display: flex;
  inline-size: 100%;
  padding: 0;
  margin-block-end: var(--s-4);
}
.qchoice__grid { margin-block-start: 0; }
.qchoice__grid .check { min-block-size: 48px; align-items: center; }
.qchoice__grid .check__box { margin-block-start: 0; }

/* -- The dimensions drawing row ------------------------------------------- */
.qdims {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s-2);
  align-items: end;
}
.qdims__cell { position: relative; min-inline-size: 0; }
.qdims__k {
  display: block;
  margin-block-end: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}
[dir="rtl"] .qdims__k { font-family: var(--font-body); }

/* The measurement box is an LTR context on purpose: a millimetre reading is
   Latin technical notation and must not mirror, so the unit stays at the end
   of the NUMBER, not at the end of the sentence. Still logical properties —
   the direction is what changes, not the property. */
.qdims__box {
  position: relative;
  display: block;
  direction: ltr;
}
.qdims__in { padding-inline-end: 2.75rem; }
.qdims__u {
  position: absolute;
  inset-inline-end: var(--s-3);
  inset-block-end: 0;
  display: flex;
  align-items: center;
  block-size: 48px;
  font-size: var(--fs-2xs);
  color: var(--fg-subtle);
  pointer-events: none;
}
.qdims__x {
  padding-block-end: 14px;
  font-size: var(--fs-sm);
  color: var(--line-contrast);
}
@media (max-width: 559px) {
  .qdims { grid-template-columns: 1fr; gap: var(--s-4); }
  .qdims__x { display: none; }
}


/* ==========================================================================
   05. THE PAYLOAD PLATE — the carbon copy of the request
   --------------------------------------------------------------------------
   The order record is (name, mobile, email, title, notes). Steps 01–02 have
   no columns of their own, so they are composed into `notes`. What is drawn
   here IS the request: nothing is hidden, and nothing is priced.
   ========================================================================== */
.qpay {
  background-color: var(--surface-2);
  border-inline-start: var(--bw-slab) solid var(--accent);
}
.qpay .spec__head-ref { color: var(--fg-muted); }

.qpay__table th { inline-size: 8.5rem; vertical-align: top; }
@media (max-width: 559px) {
  .qpay__table th { inline-size: 6.5rem; }
}

/* The literal DB column names. They are not translated — they are columns. */
.qpay__col {
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  text-transform: none;
}
.qpay__v {
  font-size: var(--fs-sm);
  color: var(--fg);
  overflow-wrap: anywhere;
}
.qpay__v.is-empty { color: var(--fg-subtle); }

.qpay__notes {
  padding: var(--s-5) var(--s-6);
  border-block-start: var(--bw-hair) solid var(--line);
  background-color: var(--surface);
}
.qpay__notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-end: var(--s-3);
}
.qpay__copy { flex: none; }

.qpay__pre {
  margin: 0;
  padding: var(--s-4);
  max-block-size: 20rem;
  overflow: auto;
  font-size: var(--fs-xs);
  line-height: 1.9;
  color: var(--fg);
  background-color: var(--field-bg);
  border: var(--bw-hair) dashed var(--line-contrast);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
  /* The composed string is a machine record: it reads LTR-first even in
     Arabic, but the Arabic runs inside it must still set correctly. */
  unicode-bidi: plaintext;
}
.qpay__pre.is-empty { color: var(--fg-subtle); font-style: normal; }
.qpay__pre:focus-visible {
  outline: var(--focus-w) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}


/* ==========================================================================
   06. STEP CONTROLS
   ========================================================================== */
.quote-nav {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.quote-nav__note {
  flex: 1 1 14rem;
  min-inline-size: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
  text-align: end;
}
[dir="rtl"] .quote-nav__note { font-family: var(--font-body); text-transform: none; }

/* Loading state: freeze the button's wipe while it is busy. */
.quote-nav .btn.is-loading { pointer-events: none; }
.quote-nav .btn.is-loading::before { transform: scaleX(0); }

.quote-spin {
  inline-size: 14px;
  block-size: 14px;
  flex: none;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;               /* the ONE circle in the theme: a bearing. */
  animation: quote-spin 640ms var(--ease-lin) infinite;
}
@keyframes quote-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .quote-spin { animation-duration: 2.4s; }
}


/* ==========================================================================
   07. THE REASSURANCE RAIL
   ========================================================================== */
.quote-rail {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  min-inline-size: 0;
}

/* How quoting works — a numbered route, hairline-separated. */
.qflow { list-style: none; }
.qflow__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  border-block-end: var(--bw-hair) solid var(--line);
}
.qflow__item:last-child { border-block-end: 0; }
.qflow__n {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  line-height: 1.6;
  color: var(--accent);
}
.qflow__body { min-inline-size: 0; }
.qflow__t {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--fg);
}
.qflow__d {
  display: block;
  margin-block-start: 2px;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--fg-subtle);
}

.quote-rail__turn { display: block; }
.quote-rail__turn b {
  color: var(--accent);
  font-weight: var(--fw-semi);
  margin-inline-end: var(--s-2);
}
/* The turnaround figure is 12px mono sitting on the spec FOOT (--surface-3),
   a lighter graphite than the page: --accent (#FF2A32) measures only 4.48:1
   there and misses AA. One step up the red ramp clears it (4.74:1). On paper
   --accent is #C6151C on the white sheet (5.2:1) and needs no help. */
:root[data-theme="dark"] .quote-rail__turn b { color: var(--red-400); }

/* What we need — square-bulleted list. */
.qneed {
  list-style: none;
  padding: var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.qneed li {
  position: relative;
  padding-inline-start: var(--s-5);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--fg-muted);
}
.qneed li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 6px;
  block-size: 6px;
  background-color: var(--accent);
}

/* The numbered variant used on the success plate. */
.qneed--num { counter-reset: qn; padding: 0; margin-block-start: var(--s-4); }
.qneed--num li { counter-increment: qn; padding-inline-start: var(--s-7); }
.qneed--num li::before {
  content: counter(qn, decimal-leading-zero);
  inline-size: auto;
  block-size: auto;
  inset-block-start: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  color: var(--accent);
}

/* Rather just talk? */
.quote-talk {
  padding: var(--s-6);
  background-color: var(--surface);
  border: var(--bw-hair) solid var(--line);
}
.quote-talk__k { display: block; margin-block-end: var(--s-4); }
.quote-talk__body {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--fg-muted);
}
.quote-talk__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-block-start: var(--s-5);
}


/* ==========================================================================
   08. THE SUCCESS PLATE
   ========================================================================== */
.quote-done:focus { outline: none; }

.quote-done__plate {
  position: relative;
  padding: clamp(var(--s-7), 3vw, var(--s-10));
  background-color: var(--surface);
  border: var(--bw-hair) solid var(--line);
  border-block-start: var(--bw-slab) solid var(--accent);
}

/* A red SURFACE that carries a white glyph → --accent-solid (#D31219, 5.4:1
   with white in BOTH modes). --accent is the legible-red *text* token and
   changes value per mode; white on the dark-mode value is only 3.4:1. */
.quote-done__mark {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin-block-end: var(--s-6);
  color: var(--accent-fg);
  background-color: var(--accent-solid);
}
.quote-done__mark svg { inline-size: 22px; block-size: 22px; }

.quote-done__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  color: var(--fg-strong);
}
[dir="rtl"] .quote-done__title { text-transform: none; letter-spacing: 0; }

.quote-done__body {
  margin-block-start: var(--s-4);
  max-inline-size: 62ch;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.quote-done__ref {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-block-start: var(--s-6);
  padding: var(--s-4) var(--s-5);
  background-color: var(--surface-inset);
  border: var(--bw-hair) dashed var(--line-contrast);
}
.quote-done__ref b {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--accent);
}

.quote-done__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--s-8);
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-7);
  border-block-start: var(--bw-hair) solid var(--line);
}
@media (max-width: 899px) {
  .quote-done__grid { grid-template-columns: 1fr; gap: var(--s-7); }
}
.quote-done__k { display: block; }
.quote-done__left { min-inline-size: 0; }

/* The carbon copy of the ticket that was just sent. */
.quote-done__copy {
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-6);
  border-block-start: var(--bw-hair) solid var(--line);
}
.quote-done__copy-title {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-block: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--fg);
  overflow-wrap: anywhere;
}
.quote-done__copy-k { display: block; margin-block-end: var(--s-2); }
.quote-done__copy .qpay__pre { max-block-size: 16rem; }

.quote-done__wa {
  padding: var(--s-6);
  background-color: var(--surface-2);
  border: var(--bw-hair) solid var(--line);
}
.quote-done__wa-body {
  margin-block: var(--s-4) var(--s-5);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--fg-muted);
}
.quote-done__again { margin-block-start: var(--s-4); }

.quote-done__note {
  margin-block-start: var(--s-7);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
}
[dir="rtl"] .quote-done__note { font-family: var(--font-body); text-transform: none; }


/* ==========================================================================
   09. CLOSING BAND
   ========================================================================== */
.quote-cta { padding-block: var(--section-y); }
.quote-cta__meta { margin-block-end: var(--s-5); }

/* Same story as the masthead: the band is the drafting board and the CTA plate
   is a toned sheet on it, so the two micro-labels come up from --fg-subtle
   (4.23:1 on paper) to --fg-muted (6.5:1). Unchanged on graphite. */
.quote-cta .cta-band__note,
.quote-cta__meta .micro { color: var(--fg-muted); }

.quote-cta__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.quote-cta__mail svg { inline-size: 15px; block-size: 15px; color: var(--accent); }
.quote-cta__mail:hover { color: var(--fg-strong); }