/* Sterling Concrete Coatings — site styles
   No external fonts, no CDN, no frameworks. Everything loads from your own
   server, which is the fastest possible setup and the easiest to host. */

:root {
  --charcoal:   #0B0B0C;
  --gunmetal:   #24262A;
  --panel:      #16181B;
  --silver:     #ACB4BF;
  --highlight:  #E3E6E9;
  --mist:       #949494;
  --accent:     #ACB4BF;   /* Sterling Silver */
  --accent-lit: #E3E6E9;   /* Silver Highlight */
  --rule:       #2E3237;
  --measure:    68ch;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--charcoal);
  color: var(--silver);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 64px; /* room for the mobile call bar */
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-lit); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.narrow { max-width: var(--measure); }

/* ---------- Header ---------- */

.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--charcoal);
  position: sticky; top: 0; z-index: 50;
}

.head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 12px 22px; max-width: 1080px; margin: 0 auto;
}

.brand {
  font-size: 1.05rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--highlight);
}
.brand:hover { text-decoration: none; color: #fff; }
.brand small {
  display: block; font-size: 0.58rem; letter-spacing: 0.22em;
  color: var(--mist); font-weight: 400; margin-top: 2px;
}

.head-phone {
  font-weight: 700; font-size: 1.02rem; color: var(--highlight);
  white-space: nowrap;
}
.head-phone:hover { color: var(--accent-lit); text-decoration: none; }

.site-nav { border-bottom: 1px solid var(--rule); background: var(--panel); }
.site-nav ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: 4px;
  max-width: 1080px; margin: 0 auto; padding: 0 14px;
}
.site-nav a {
  display: block; padding: 11px 12px; font-size: 0.88rem;
  color: var(--silver); letter-spacing: 0.02em;
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
  color: var(--highlight); text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---------- Type ---------- */

/* Display face per the Brand Style Guide §5: the official typeface has not
   been supplied yet, and current Sterling builds font-approximate with
   Liberation Serif Bold. Matching that keeps the site consistent with the
   documents rather than introducing a fourth serif. Times New Roman is
   metrically identical and covers machines without Liberation installed. */
h1, h2 {
  font-family: 'Liberation Serif', 'Times New Roman', Times, serif;
  color: var(--highlight); line-height: 1.14; font-weight: 700;
  text-wrap: balance;
}
h1 {
  font-size: clamp(1.9rem, 4.9vw, 3rem);
  text-transform: uppercase; letter-spacing: 0.005em;
}
h2 { font-size: clamp(1.45rem, 3.3vw, 2rem); letter-spacing: -0.005em; margin-bottom: 14px; }
h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--highlight); line-height: 1.25; font-weight: 700;
  font-size: 1.1rem; margin-bottom: 6px;
}

p { margin-bottom: 1.05em; max-width: var(--measure); }
p.lede { font-size: 1.18rem; color: var(--highlight); }

section { padding: 58px 0; border-bottom: 1px solid var(--rule); }
section:last-of-type { border-bottom: none; }

.kicker {
  font-family: 'Liberation Serif', 'Times New Roman', Times, serif;
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.76rem;
  color: var(--mist); font-weight: 400; margin-bottom: 14px;
}

/* ---------- Hero ---------- */

.hero { padding: 72px 0 58px; border-bottom: 1px solid var(--rule); }
.hero h1 { margin-bottom: 20px; max-width: 20ch; }
.hero .lede { margin-bottom: 28px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block; background: var(--accent); color: var(--charcoal);
  font-weight: 700; padding: 14px 26px; border-radius: 3px;
  letter-spacing: 0.02em; border: 1px solid var(--accent);
}
.btn:hover { background: var(--accent-lit); border-color: var(--accent-lit); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--highlight); border-color: var(--rule); }
.btn.ghost:hover { border-color: var(--silver); background: transparent; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }

/* ---------- Process steps ---------- */

.steps { counter-reset: step; margin-top: 28px; }
.step {
  counter-increment: step; position: relative;
  padding: 0 0 26px 62px; border-left: 1px solid var(--rule);
  margin-left: 17px;
}
.step:last-child { border-left-color: transparent; padding-bottom: 0; }
.step::before {
  content: counter(step); position: absolute; left: -18px; top: -4px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--charcoal); border: 1px solid var(--accent);
  color: var(--accent); font-weight: 700; font-size: 0.92rem;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Cards ---------- */

.cards {
  display: grid; gap: 16px; margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}
.card {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: 4px; padding: 24px;
}
.card h3 { color: var(--highlight); }
.card p { font-size: 0.95rem; color: var(--silver); margin-bottom: 14px; }
.card a { font-weight: 600; font-size: 0.92rem; }

/* ---------- Flake swatches ----------
   The colour chart at /flake-colors/. Built by tools/build-flake-page.py.

   The chips are 124px square — crops from the supplier's own chart — so they
   are shown small on purpose. Sized much larger they go soft, and a colour
   chart that looks cheap makes the floor look cheap. Three across on a phone
   keeps each one close to its native size and reads like a real chart rather
   than a photo gallery.

   ⚠️ If the supplier ever sends the original swatch files, raise the minimum
   here — until then, do not. */
.swatches {
  display: grid; gap: 14px; margin-top: 24px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.swatch { margin: 0; }
.swatch img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 4px;
  border: 1px solid var(--rule); background: var(--panel);
}
.swatch figcaption {
  margin-top: 8px; font-size: 0.85rem; font-weight: 600;
  color: var(--highlight); letter-spacing: 0.01em; line-height: 1.25;
}

@media (min-width: 700px) {
  .swatches { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
}

/* ---------- Photo placeholders ----------
   These are deliberately obvious. Replace each one with a real photo of a
   real Sterling job. Do not substitute stock photography. */

.photo-slot {
  border: 1px dashed #3A4046; border-radius: 4px; background: var(--panel);
  padding: 40px 24px; text-align: center; color: var(--mist);
  font-size: 0.86rem; margin: 26px 0; line-height: 1.5;
}
.photo-slot strong { display: block; color: var(--silver); margin-bottom: 4px; }
.photo-slot.tall { padding: 76px 24px; }

/* ---------- FAQ ---------- */

.faq { margin-top: 24px; max-width: var(--measure); }
.faq details {
  border-bottom: 1px solid var(--rule); padding: 16px 0;
}
.faq summary {
  cursor: pointer; font-weight: 600; color: var(--highlight);
  font-size: 1.03rem; list-style: none; position: relative; padding-right: 30px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: -2px;
  color: var(--accent); font-size: 1.4rem; font-weight: 400;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 12px 0 2px; font-size: 0.98rem; }

/* ---------- Callout ---------- */

.callout {
  border-left: 3px solid var(--accent); background: var(--panel);
  padding: 22px 26px; margin: 28px 0; border-radius: 0 4px 4px 0;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- Lists ---------- */

.plain { list-style: none; max-width: var(--measure); }
.plain li { padding: 9px 0 9px 26px; position: relative; border-bottom: 1px solid var(--rule); }
.plain li:last-child { border-bottom: none; }
.plain li::before {
  content: ""; position: absolute; left: 4px; top: 19px;
  width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg);
}

/* ---------- Final CTA ---------- */

.cta-band { background: var(--panel); border-top: 1px solid var(--rule); padding: 62px 0; }
.cta-band h2 { margin-bottom: 12px; }

/* ---------- Mid-page call to action ----------
   Added 2026-09-05. Every service page previously had one button in the hero
   and one in the closing band, with the whole page in between — 1,006 words of
   it on driveways. The sticky .call-bar covers that on a phone, but it is
   display:none above 760px, so a desktop reader had nothing to act on for the
   entire length of the page.

   Deliberately quieter than .cta-band: no watermark (the closing band owns the
   rhino) and no <h2>, so it reads as an aside rather than competing with the
   section headings it sits between. */

.mid-cta {
  background: var(--panel);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 34px 0;
}
.mid-cta-lead {
  font-size: 1.12rem; font-weight: 700; color: var(--highlight);
  margin: 0 0 8px;
}
.mid-cta p { max-width: 62ch; }
.mid-cta-actions {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 18px;
}
.mid-cta-or { color: var(--mist); font-size: 0.94rem; }

@media (max-width: 560px) {
  /* Stacked, full width, thumb-sized — the same treatment the hero buttons get.
     Two buttons side by side at 360px leaves each one too narrow to hit. */
  .mid-cta-actions .btn { display: block; width: 100%; text-align: center; }
  .mid-cta-or { width: 100%; }
}

/* ---------- The door: the soft ask ----------
   Added 2026-09-05. Sits directly above the closing .cta-band on 13 pages. The
   band is the hard ask (get it quoted); this is the soft one (tell us what
   you've got). Soft above hard on purpose — somebody who was never going to
   click "request an estimate" meets a three-field question first.

   Deliberately quieter than both .cta-band and .mid-cta: no panel fill, a rule
   above it instead, and a ghost button. It is an offer, not a demand, and it
   must not out-shout the estimate button sitting underneath it. */

.door {
  border-top: 1px solid var(--rule);
  padding: 46px 0 8px;
}
.door p { max-width: 62ch; }
.door-form { margin-top: 22px; max-width: 540px; }
.door .form-field { margin-bottom: 14px; }

/* ---------- Footer ---------- */

.site-foot {
  border-top: 1px solid var(--rule); padding: 40px 0 30px;
  font-size: 0.9rem; color: var(--mist); background: var(--charcoal);
}
.site-foot a { color: var(--silver); }
.foot-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.foot-grid h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mist); margin-bottom: 10px; }
.foot-grid ul { list-style: none; }
/* break-word so the long email address wraps inside its own column instead of
   running across into the next one */
.foot-grid li { padding: 3px 0; overflow-wrap: break-word; }
.nap { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--rule); line-height: 1.8; }
.nap strong { color: var(--silver); }
.tagline { color: var(--accent); font-style: italic; }

/* ---------- Follow buttons ----------
   Icons are inline SVG, drawn from the page's own text color. No icon font,
   no sprite sheet, no third-party script — same rule as everything else here.
   That also means no social network can see who visited the site: an embedded
   Facebook or Instagram widget reports every visitor back to them, and a plain
   link does not.

   Monochrome on purpose. The palette has no blue, purple, or red in it, and
   three brand-colored badges would be the loudest thing on the page. */

.foot-follow { margin-top: 28px; }
.foot-follow h3 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--mist); margin-bottom: 12px;
}
.social-row { display: flex; flex-wrap: wrap; gap: 10px; }

.social-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px 9px 12px;
  border: 1px solid var(--rule); border-radius: 3px;
  color: var(--silver); font-size: 0.9rem; font-weight: 600;
  line-height: 1; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.social-btn svg { width: 19px; height: 19px; flex: none; }
.social-btn:hover, .social-btn:focus-visible {
  text-decoration: none;
  color: var(--highlight);
  border-color: var(--silver);
  background: var(--gunmetal);
}
.social-btn:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 2px; }

@media (max-width: 760px) {
  /* Grow to a 45px tall tap target on a phone — a thumb needs about 44. */
  .social-btn { padding: 12px 18px 12px 15px; }
}

/* ---------- Sticky mobile call bar ---------- */

.call-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
}
.call-bar a {
  padding: 17px 8px; text-align: center; font-weight: 700; font-size: 0.98rem;
}
.call-bar .call { background: var(--accent); color: var(--charcoal); }
.call-bar .quote { background: var(--gunmetal); color: var(--highlight); }
.call-bar a:hover { text-decoration: none; }

@media (min-width: 760px) {
  .call-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Form ---------- */

.form-field { margin-bottom: 18px; max-width: 540px; }
.form-field label { display: block; font-weight: 600; color: var(--highlight); margin-bottom: 6px; font-size: 0.95rem; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 12px 14px; font-size: 1rem; font-family: inherit;
  background: var(--charcoal); border: 1px solid var(--rule);
  color: var(--highlight); border-radius: 3px;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--accent);
}
.form-note { font-size: 0.86rem; color: var(--mist); }

/* ---------- Accessibility ---------- */

:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; background: var(--accent);
  color: var(--charcoal); padding: 10px 16px; z-index: 200; font-weight: 700;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- Hero background photo (optional) ----------
   Add class="hero has-photo" and set --hero-img to switch the hero from a
   flat panel to a photo with a dark scrim over it, matching the treatment
   already approved on the live site.

     <div class="hero has-photo" style="--hero-img:url('/assets/hero.jpg')">

   Use a real Sterling job. The scrim below is tuned to keep the headline
   readable over a mid-tone garage photo; check contrast if the image is
   much lighter or darker. */

/* The scrim stays heavy under the headline and clears quickly to the right, so
   the floor is actually visible instead of being a dark texture behind text.
   Measured after each change rather than eyeballed — the headline needs 3:1
   against what is behind it and the paragraph needs 4.5:1, and the right-hand
   values are the ones that go first. */
.hero.has-photo {
  position: relative;
  background-image:
    linear-gradient(to right,
      rgba(11,11,12,0.90) 0%,
      rgba(11,11,12,0.78) 38%,
      rgba(11,11,12,0.22) 72%,
      rgba(11,11,12,0.00) 100%),
    var(--hero-img);
  background-size: cover;
  background-position: center 62%;
}

/* The paragraph is what limits how far the scrim can lift, because it needs
   4.5:1 where the headline only needs 3:1. Narrowing it keeps it inside the
   dark end of the gradient so the right-hand side can go fully clear. It also
   reads better — 68ch is a body measure, not a hero one. */
.hero.has-photo .lede { max-width: 46ch; }

/* Mist grey is a body colour on charcoal, not a colour for text sitting on a
   photograph. Measured over the hero image it came out at 3.7:1, under the 4.5:1
   small text needs. Silver is the same family and clears 5:1 everywhere the
   scrim below puts it. */
.hero.has-photo .kicker { color: var(--silver); }

@media (max-width: 760px) {
  /* On a phone the text sits over the middle of the image, so the scrim runs
     top-to-bottom instead of left-to-right.

     The hero has 72px of padding above the first line and 58px below the last
     one, and nothing is written in either strip — so that is where the photo can
     show through at almost full strength with no contrast cost at all. The stops
     are anchored in pixels from each edge rather than in percentages so they
     stay locked to that padding whatever the hero's height turns out to be.

     Measured, not eyeballed: worst-case (lightest) background pixel sampled
     under every line of hero text, against that line's own colour.
       kicker 5.2   headline 5.8   paragraph 5.1
       ghost button 9.9   stars 11.0   review link 7.0
     Small text needs 4.5:1 and the headline needs 3:1, so every line clears with
     room to spare. Re-measure if the hero photograph is ever swapped — a lighter
     image moves all six numbers at once. */
  .hero.has-photo {
    background-image:
      linear-gradient(to bottom,
        rgba(11,11,12,0.16) 0px,
        rgba(11,11,12,0.80) 70px,
        rgba(11,11,12,0.62) 48%,
        rgba(11,11,12,0.82) calc(100% - 78px),
        rgba(11,11,12,0.18) 100%),
      var(--hero-img);
  }
}

/* ---------- Logo ----------
   Guide §3.3, the illustrated rhino mark, in the two variants the guide names.

   assets/sterling-rhino-black.png  source artwork as delivered
   assets/sterling-rhino-white.png  exact color inversion, built to Toby's
                                    instruction. Every visible pixel in the
                                    source is pure black (verified: one
                                    distinct RGB value across 196,710 pixels),
                                    so inverting sets RGB to pure white and
                                    copies alpha across untouched. The drawing
                                    is pixel-identical — same line weights,
                                    same hatching, same anti-aliased edges.
   assets/logo-header.png           header-sized white variant, 2x for retina

   Use black only on white/near-white, white only on charcoal/black (§3.4).

   The lockup is vertical, so the header has to be tall enough for the
   wordmark to stay legible. Shrinking it further makes STERLING mush. */

.brand-logo { display: block; line-height: 0; }
.brand-logo img { height: 124px; width: auto; }

@media (max-width: 620px) {
  .brand-logo img { height: 92px; }
}

/* ---------- Rhino watermark ----------
   The rhino is drawn as open linework with no fill, so whatever sits behind
   it shows through. That transparency is the point of the mark, and it only
   reads at scale — at header size it is just a small animal. Used large and
   faint, it becomes a ground the content stands on, which is the same idea
   the tagline states.

   Mist Grey #949494 is the watermark color set by the Brand Style Guide.

   THE RHINO IS NEVER MIRRORED, FLIPPED, OR REVERSED. Toby's rule, no
   exceptions, anywhere — watermark, logo, print, vehicle, signage, social.
   He faces the direction he was drawn facing. Do not add scaleX(-1),
   transform: scale with a negative x, or a horizontally flipped copy of the
   artwork. A version of this was tried and reverted; it is not a taste
   question that gets reopened.

   Opacity is a taste question, and it is set loud on purpose. The ceiling is
   set by the paragraph, which needs 4.5:1 against the brightest thing behind
   it. Measured against real painted pixels, the hard ceiling is about 0.37 —
   past that the copy drops below the floor. These values sit under it with
   real margin, so the mark reads clearly and the words still win. Anything
   changed here gets re-measured, not eyeballed. */

.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cta-band::before {
  content: "";
  position: absolute;
  right: -4%;
  bottom: -18%;
  width: min(620px, 78%);
  aspect-ratio: 1049 / 509;
  background: url("/assets/rhino-watermark.png") no-repeat center / contain;
  opacity: 0.32;
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 760px) {
  /* Lower on a phone, because the buttons stack into a full-width column and
     sit directly over the animal instead of beside him. */
  .cta-band::before {
    right: -14%;
    bottom: -8%;
    width: 108%;
    opacity: 0.24;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* No motion here by design — the mark is a ground, not an effect. */
}

/* ---------- Job photos ----------
   Real work, on real jobs. Captions carry the detail a visitor cannot read
   off the image, which is also what makes the photo useful in search. */

figure.job {
  margin: 30px 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel);
}

figure.job img {
  width: 100%;
  height: auto;
  display: block;
}

figure.job figcaption {
  padding: 14px 18px;
  font-size: 0.9rem;
  color: var(--silver);
  line-height: 1.5;
  border-top: 1px solid var(--rule);
}

figure.job figcaption strong { color: var(--highlight); }

/* Two photos side by side on wider screens, stacked on a phone. */
.job-pair {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin: 30px 0;
}
.job-pair figure.job { margin: 0; }

@media (min-width: 760px) {
  .job-pair { grid-template-columns: 1fr 1fr; }
}

/* Paired photos are often a portrait and a landscape shot of the same thing.
   Left to their natural sizes the grid goes lopsided, so crop both to a
   common frame — the comparison is the point, and it only reads if the two
   images are the same shape. */
.job-pair figure.job img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 58%;
}

.job-pair figure.job {
  display: flex;
  flex-direction: column;
}
.job-pair figure.job figcaption { flex: 1; }

/* ---------- Google rating ----------
   Deliberately quiet. Four reviews is a real, early number and it reads as
   honest at this size; blown up into a badge it would read as a business
   pretending to be bigger than it is, which is the opposite of the pitch.

   The count is always shown next to the score. "5 stars" on its own invites
   the reader to wonder how many. */

.rating {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.95rem;
  color: var(--silver);
}

.rating .stars {
  color: var(--accent-lit);
  letter-spacing: 0.1em;
  font-size: 1rem;
}

.rating strong { color: var(--highlight); font-weight: 700; }
.rating a { color: var(--silver); }
.rating a:hover { color: var(--accent-lit); }

/* Sitting under the hero buttons it needs a little air, but not a whole band. */
.hero .rating { margin-top: 26px; }

/* ---------- Customer quote ----------
   A real Google review, shown as words rather than a screenshot, with a link
   out so anyone can go and check it. No review schema markup: Google restricts
   self-serving review structured data, and a floor coating company marking up
   its own testimonials is exactly the case it restricts. The link is the proof.

   Quoted with the customer's permission, given in writing. */

.quote-block {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 26px;
  max-width: var(--measure);
}
.quote-block blockquote {
  font-family: 'Liberation Serif', 'Times New Roman', Times, serif;
  font-size: 1.32rem; line-height: 1.42;
  color: var(--highlight);
}
.quote-block blockquote p + p { margin-top: 0.7em; }
.quote-attrib {
  margin-top: 16px;
  font-size: 0.94rem; color: var(--mist);
}
.quote-attrib strong { color: var(--silver); font-weight: 700; }
.quote-attrib .stars { color: var(--accent-lit); letter-spacing: 0.1em; margin-right: 8px; }

@media (max-width: 620px) {
  .quote-block { padding-left: 18px; }
  .quote-block blockquote { font-size: 1.18rem; }
}