/* ==========================================================================
   STARLINE LANDER — landing-page-only components
   Extends assets/css/base.css (the site design system). Tokens are inherited;
   nothing here redefines a brand token.
   ========================================================================== */

/* ---------- Sticky header: condense on scroll ---------------------------- */
.site-header { transition: min-height .25s var(--ease), box-shadow .25s var(--ease); }
.site-header.is-stuck { box-shadow: 0 10px 30px -12px rgba(0,0,0,.55); }
.site-header.is-stuck .header__inner { min-height: 68px; }
.site-header.is-stuck .brand__logo { height: 48px; }
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header .header__inner, .site-header .brand__logo { transition: none; }
}

/* Landing nav is anchor-based: no dropdown, so give links room to breathe. */
.nav__list > li > a { white-space: nowrap; }

/* Mobile nav: collapse the padding, not just the height.
   base.css closes the nav with max-height:0 + overflow:hidden but keeps its
   0.5rem/1.5rem block padding. Under box-sizing:border-box that padding cannot
   shrink below itself, so a "closed" nav still occupies ~32px and the first
   menu item shows through beneath the header. (Inherited from the source site's
   styles.css — the same bug is visible on the live site.) Collapsing the
   padding alongside max-height closes it properly. */
@media (max-width: 960px) {
  .nav {
    padding-block: 0;
    transition: max-height .35s var(--ease), padding-block .35s var(--ease);
  }
  .nav-toggle:checked ~ .nav { padding-block: 0.5rem 1.5rem; }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}

/* Header phone sits beside the CTA on desktop, hides on small screens where
   the mobile CTA bar carries the call action instead. */
.header__phone {
  font-family: var(--font-display);
  font-weight: 700; font-size: 0.86rem; letter-spacing: .06em;
  color: var(--on-dark); display: inline-flex; align-items: center; gap: .5rem;
  white-space: nowrap;
}
.header__phone svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.header__phone:hover { color: var(--accent); }
@media (max-width: 960px) { .header__phone { display: none; } }

/* ---------- Hero headline: legible accent -------------------------------
   The second line used --primary (#a01e22) over the dark hero, which measured
   about 2.3:1 against the overlay. That is below the 3:1 WCAG 1.4.3 minimum for
   large text, on the biggest and most important words on the page. --accent
   (#f0454a) is the same hue family, already used for eyebrows on dark grounds,
   and clears the threshold comfortably.
   ----------------------------------------------------------------------- */
.hero h1 .line2 { color: var(--accent); }

/* ---------- Trust strip (logos / credential row) ------------------------- */
.trust-strip { background: var(--surface); border-bottom: 1px solid var(--border); }
.trust-strip__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.2rem 2.4rem;
  padding-block: clamp(1.4rem, 3vw, 2rem);
}
.trust-strip__item {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
}
.trust-strip__item svg { width: 20px; height: 20px; color: var(--primary); flex: none; }
/* Several badges run to two lines, so the label is a block and the icon
   centres against the pair rather than the first line. */
.trust-strip__item { align-items: center; }
.trust-strip__label { display: block; line-height: 1.4; }

/* ---------- Project fit (in / out qualification) ------------------------- */
.fit { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (min-width: 820px) { .fit { grid-template-columns: 1fr 1fr; } }
.fit__col { background: var(--surface); padding: clamp(1.7rem, 3.2vw, 2.6rem); }
.fit__col--out { background: var(--bg); }
.fit__head {
  display: flex; align-items: center; gap: .7rem; margin-bottom: 1.4rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.fit__head svg { width: 26px; height: 26px; flex: none; padding: 4px; color: #fff; }
.fit__col--in .fit__head svg { background: var(--primary); }
.fit__col--out .fit__head svg { background: var(--steel); }
.fit__list { display: grid; gap: .85rem; }
.fit__list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .96rem; }
.fit__list li svg { width: 17px; height: 17px; flex: none; margin-top: 5px; }
.fit__col--in .fit__list li svg { color: var(--primary); }
.fit__col--out .fit__list li { color: var(--steel); }
.fit__col--out .fit__list li svg { color: var(--steel); }
.fit__note { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--border); font-size: .88rem; color: var(--steel); }

/* ---------- Why Starline -------------------------------------------------
   Built for a text-only section rather than adapted from the old two-column
   layout that sat beside a photograph: an intro, then a 3x2 grid of selling
   points, then the CTA under the full grid.

   Left-aligned to match the section-head of the Complete Roofing Systems
   section directly above it, so the two dark sections share one edge rather
   than alternating between centred and left copy.

   The measures are still capped: an uncapped heading on a 1240px container
   produces very long lines that are tiring to read.
   ----------------------------------------------------------------------- */
.why__intro { text-align: left; }
.why__intro h2 { max-width: 800px; margin: var(--space-3) 0 0; }
.why__lead { max-width: 680px; margin: var(--space-6) 0 0; color: var(--on-dark-muted); }

.why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 3.2vw, 2.8rem) clamp(2rem, 4vw, 3.5rem);
  max-width: 1180px;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px)  { .why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .why__grid { grid-template-columns: repeat(3, 1fr); } }

.why__item { display: flex; gap: .9rem; align-items: flex-start; text-align: left; min-width: 0; }
.why__item svg { width: 22px; height: 22px; color: var(--accent); flex: none; margin-top: 2px; }
.why__item b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; color: #fff; }
.why__item p { margin-top: .4rem; font-size: .94rem; line-height: 1.6; color: var(--on-dark-muted); max-width: none; }

.why__cta { text-align: left; margin-top: clamp(2.8rem, 5vw, 4rem); }

/* ---------- Roofing system (layer breakdown) ----------------------------- */
.system { display: grid; gap: 1px; background: var(--border-dark); border: 1px solid var(--border-dark); }
@media (min-width: 640px) { .system { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .system { grid-template-columns: repeat(4, 1fr); } }
.system__item { background: var(--charcoal-800); padding: clamp(1.5rem, 3vw, 2.1rem); border-top: 3px solid transparent; transition: border-color .25s var(--ease), background-color .25s var(--ease); }
.system__item:hover { border-top-color: var(--accent); background: var(--charcoal-700); }
.system__k { font-family: var(--font-display); font-weight: 900; font-size: .78rem; letter-spacing: .2em; color: var(--accent); }
.system__item h3 { font-size: 1.1rem; color: #fff; margin: .8rem 0 .5rem; }
.system__item p { font-size: .92rem; color: var(--on-dark-muted); }

/* ---------- Complete project scope ---------------------------------------
   Sits under the four system layers. Visually separated with a top rule so it
   reads as a second, related idea rather than more of the same list.
   ----------------------------------------------------------------------- */
.scope { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 2px solid var(--accent); }
.scope__head h3 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: #fff; }
.scope__head p { color: var(--on-dark-muted); margin-top: .8rem; }
.scope__list { display: grid; gap: 1.4rem 3rem; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 760px)  { .scope__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .scope__list { grid-template-columns: repeat(3, 1fr); } }
.scope__list li { display: flex; gap: .8rem; align-items: flex-start; }
.scope__list svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 3px; }
.scope__list b { font-family: var(--font-display); letter-spacing: .01em; color: #fff; display: block; }
.scope__list span { color: var(--on-dark-muted); font-size: .92rem; }
.scope__note { color: var(--on-dark-muted); margin-top: clamp(1.6rem, 3vw, 2.2rem); max-width: 68ch; }
.scope__kicker { margin-top: 1.2rem; max-width: 68ch; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.02rem, 1.7vw, 1.2rem); line-height: 1.35; color: #fff; }

/* ---------- Qualification band ------------------------------------------- */
.qualify { background: var(--primary-900); color: var(--on-dark); border-block: 6px solid var(--primary); }
.qualify h2 { color: #fff; }
.qualify h2 span { color: var(--accent); }
.qualify__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .qualify__grid { grid-template-columns: 1fr 1fr; } }
.qualify .checklist svg { color: var(--accent); }
.qualify .checklist span { color: rgba(255,255,255,.86); }
.qualify .checklist b { color: #fff; }

/* ---------- Enquiry section ---------------------------------------------
   No background here on purpose. Every other light section is transparent and
   shows the body colour through; this one used to restate var(--bg) itself,
   which produced identical pixels by a second mechanism and made the page's
   light/dark rhythm impossible to read from the stylesheet. */
.enquire__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 920px) { .enquire__grid { grid-template-columns: .85fr 1.15fr; } }

/* Form status messages (server-rendered after a POST round-trip) */
.form-status { padding: 1.1rem 1.3rem; border: 2px solid; margin-bottom: 1.6rem; font-size: .95rem; }
.form-status--ok { border-color: #2f7d3a; background: #eef7ef; color: #1d5426; }
.form-status--err { border-color: var(--primary); background: #fbeff0; color: var(--primary-700); }
.form-status strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: .2rem; }
.field__error { font-size: .82rem; color: var(--primary); font-weight: 600; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(160,30,34,.16);
}

/* .field is a grid, and a two-column form row stretches both fields to the
   height of the taller one. Under the default align-content:stretch that extra
   height is split evenly between the field's own rows, so the field with fewer
   rows inflates its label and its control rather than leaving the slack at the
   bottom. That is what pushed Approximate Roof Area 25px below Approximate
   Budget, which carries a help note, and stretched its input to 84px against
   the select's 59px. Packing the rows to the top keeps every label and control
   in a row on the same line whatever each field contains. */
.field { align-content: start; }

/* ---------- Utility bar CTA ---------------------------------------------
   Replaces the phone number that used to sit here. Reuses .topbar__phone so
   the bar's rhythm is unchanged. */
.topbar__phone { text-decoration: none; }

/* ---------- File input --------------------------------------------------
   The upload field is the one control most likely to be mis-set (wrong file,
   too big), so give it room and make the helper text sit close to it. */
.field input[type="file"] { line-height: 1.5; }
.field input[type="file"] + .form__note { margin-top: .1rem; }
.field__optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--steel); }

/* Selected-file list, rendered by main.js so people can see what they attached
   before submitting — the native control only ever says "N files". */
.file-list { display: grid; gap: .4rem; margin-top: .6rem; }
.file-list:empty { display: none; }
.file-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: .5rem .7rem;
  font-size: .84rem;
}
.file-list .file-list__size { color: var(--steel); flex: none; font-variant-numeric: tabular-nums; }
.file-list .file-list__name { overflow-wrap: anywhere; }
.file-list li.is-toobig { border-color: var(--primary); background: #fbeff0; }
.file-list li.is-toobig .file-list__size { color: var(--primary); font-weight: 700; }

/* ---------- Project slot awaiting real photography -----------------------
   Deliberately not a stock photo. The source site hotlinked 46 loremflickr
   images; an obvious empty slot is more honest than someone else's roof.
   ----------------------------------------------------------------------- */
.project__await {
  aspect-ratio: 4/3;
  display: grid; place-items: center;
  background: var(--charcoal-800);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px);
  border-bottom: 1px solid var(--border-dark);
}
.project__await span {
  font-family: var(--font-display); font-weight: 800;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-dark-muted); text-align: center; line-height: 1.5;
}

/* ---------- Clickable project cover + album lightbox ---------------------
   The cover is an <a> to its first full-size image (works with JS off). With
   JS, main.js intercepts the click and opens the album in the overlay below.
   ----------------------------------------------------------------------- */
/* Grid rows stretch every card to the tallest one. Without this the white body
   only occupies its own content height, so a project with a shorter
   description leaves a strip of the charcoal card background showing beneath
   it. Making the card a flex column and letting the body grow fills it. */
.project { display: flex; flex-direction: column; }
.project__body { flex: 1 1 auto; }

.project__open { display: block; position: relative; cursor: pointer; overflow: hidden; }
.project__open::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,15,15,0) 55%, rgba(15,15,15,.55));
  opacity: 0; transition: opacity .3s var(--ease);
}
.project__open:hover::after,
.project__open:focus-visible::after { opacity: 1; }
.project__count {
  position: absolute; right: .8rem; bottom: .8rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(15,15,15,.72); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  letter-spacing: .04em; padding: .35rem .6rem;
}
.project__count svg { width: 15px; height: 15px; color: var(--accent); }
.project--empty .project__await { border-bottom: 1px solid var(--border-dark); }

/* Staging-only warning strip on a project that is not finished enough to go
   live. Never rendered in production: the section simply omits those cards. */
.project__flag {
  background: var(--primary); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .7rem;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.4;
  padding: .5rem .8rem; max-width: none;
}
.project--incomplete { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Closing CTA beneath the grid. Left-aligned to the section head and the grid,
   the same as the Why Starline CTA, not centred. A centred block put the lead
   line and the button on different axes: the paragraph is width-capped at 68ch
   and sits pinned left, while the inline button centres, so the two never
   agreed. Spaced off the grid so it does not crowd the last row, and reuses the
   page's primary button. */
.projects__cta { margin-top: clamp(2.6rem, 5vw, 3.8rem); text-align: left; }
.projects__cta p {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem); line-height: 1.25;
  margin-bottom: 1.3rem;
}

html.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  animation: lb-fade .2s var(--ease);
}
.lightbox[hidden] { display: none; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }

.lightbox__backdrop { position: absolute; inset: 0; background: rgba(12,12,12,.93); cursor: zoom-out; }
.lightbox__stage { position: relative; z-index: 1; max-width: 92vw; }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.lightbox__img {
  max-width: 92vw; max-height: 78vh; width: auto; height: auto;
  object-fit: contain; background: var(--charcoal-800);
  border: 1px solid rgba(255,255,255,.14);
}
.lightbox__cap { color: var(--on-dark); font-size: .9rem; text-align: center; max-width: 70ch; }

.lightbox__btn {
  position: absolute; z-index: 2; border: 0; cursor: pointer;
  width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); color: #fff; font-size: 1.7rem; line-height: 1;
  transition: background-color .2s var(--ease);
}
.lightbox__btn:hover { background: var(--primary); }
.lightbox__close { top: 16px; right: 16px; font-size: 1.5rem; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__count {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; text-align: center;
  color: var(--on-dark-muted); font-family: var(--font-display); font-weight: 700;
  font-size: .82rem; letter-spacing: .1em;
  /* base.css caps every <p> at 68ch, which would anchor this counter to the
     left edge instead of spanning the overlay. It needs the full width to
     centre between the two arrows. */
  max-width: none;
}
@media (max-width: 560px) {
  .lightbox__btn { width: 44px; height: 44px; }
  .lightbox__prev { left: 6px; }
  .lightbox__next { right: 6px; }
  .lightbox__close { top: 8px; right: 8px; }
  .lightbox__img { max-height: 72vh; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
  .lightbox__btn, .project__open::after { transition: none; }
}

/* ---------- Footer column headings --------------------------------------
   These are h3, not h4: the preceding heading on the page is the final CTA's
   h2, so an h4 would skip a level (WCAG 2.2 AA, 1.3.1 Info and Relationships).
   base.css only styles `.footer h4`, so restate that appearance for h3 —
   the design is unchanged, only the semantics are corrected.
   ----------------------------------------------------------------------- */
.footer h3 {
  color: #fff;
  font-size: .82rem;
  letter-spacing: .14em;
  margin-bottom: 1.2rem;
}

/* The enquiry column points to the footer for phone and email rather than
   repeating them; the footer is the single place the contact details live. */
.info-item .btn { margin-top: .8rem; }
.footer__contact { line-height: 1.9; margin-bottom: .4rem; }
.footer__contact a { color: #fff; font-weight: 600; }
.footer__contact a:hover { color: var(--accent); }

/* ---------- Stats: prevent grid blowout ---------------------------------
   Grid children default to min-width:auto, so a long stat value or label
   cannot shrink below its min-content width and instead forces its column
   wider than 1fr — pushing the whole grid past the viewport on narrow
   screens. Let them shrink and wrap instead.
   ----------------------------------------------------------------------- */
/* Licence and ABN sit under the brand tagline. Slightly smaller and muted so
   they read as registration details rather than body copy. */
.footer__ids {
  margin-top: 1rem;
  font-size: .84rem;
  line-height: 1.7;
  color: var(--on-dark-muted);
}

/* ---------- Trust stats band ---------------------------------------------
   A self-contained grid rather than the base .stats component, which needed
   inline overrides to sit in this section and still came out unevenly spaced.
   Colours and type styling are unchanged; only the layout is rebuilt.
   ----------------------------------------------------------------------- */
.statband {
  /* Matches --charcoal exactly rather than sitting one step lighter. The band
     is part of the same dark block as Our System and Why Starline, and the 6px
     red rules above and below already separate it. A 9-value difference was
     too small to read as deliberate and showed as a faint seam instead. */
  background: var(--charcoal);
  border-block: 6px solid var(--primary);
  padding-block: 95px 70px;
}

.statband__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
  max-width: 1200px;
  margin-inline: auto;
}
@media (max-width: 980px) { .statband__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .statband__grid { grid-template-columns: minmax(0, 1fr); } }

.statband__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

.statband__num {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 900;
  /* The vw term is capped at 3.8 because the longest stat ("100,000m2+") must
     fit its column without wrapping and the numbers are nowrap. Measured: the
     text runs about 5.3x the font size, and at the narrow end of the
     four-column range the column is only ~207px, so a larger vw overflows
     silently between 980px and 1280px. The 3rem ceiling matters too: above
     ~1280px the grid stops growing at 1200px, so the column is fixed at 272px
     while the font would otherwise keep scaling and close the gap to 2px. */
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.statband__fig { color: #fff; }
.statband__unit { font-size: .52em; letter-spacing: 0; color: var(--accent); }

.statband__label {
  margin-top: .8rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--on-dark-muted);
}

/* Outside the grid, so it centres beneath all four columns. */
.statband__note {
  max-width: 600px;
  margin: 55px auto 0;
  text-align: center;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--on-dark-muted);
}

/* ---------- Placeholder marker ------------------------------------------
   Wraps every value awaiting client confirmation so unfilled content is
   impossible to miss in review. Removing the .is-placeholder class (or
   filling the Customizer field) reverts it to normal text.
   ----------------------------------------------------------------------- */
.is-placeholder {
  background: repeating-linear-gradient(45deg, #ffe9a8, #ffe9a8 6px, #ffd97a 6px, #ffd97a 12px);
  color: #4a3200 !important;
  outline: 2px dashed #b8860b;
  padding: 0 .3em;
  font-weight: 700;
  /* Chips sit inside display type as large as 3.6rem (.stat__num). Pin them to
     a small fixed size so a marker can never drive layout or blow out a grid,
     and so it never reads as real content. */
  font-size: .78rem;
  line-height: 1.5;
  letter-spacing: .02em;
  text-transform: none;
  display: inline-block;
  overflow-wrap: anywhere;
}
.section--dark .is-placeholder, .qualify .is-placeholder { color: #4a3200 !important; }

/* ---------- Section background rhythm ------------------------------------
   The page alternates on a stated rule: at most two consecutive light
   sections, then a dark one. Reading down the page that gives

     hero DARK / trust-strip / services / system DARK + why DARK + statband /
     projects / process / testimonials DARK / project-fit / qualify RED /
     enquire / faq / final-cta DARK

   System, Why and the stat band are one continuous dark block on purpose, as
   they are a single argument. Everything else alternates. Light sections carry
   no background of their own and show the body colour through, so the dark
   sections are the only ones that declare one. If you add a section, place it
   so no more than two light ones ever sit together.

   Testimonials is dark, which puts white .quote cards on charcoal. The
   .section--dark colour rules cascade into those cards and would paint their
   text --on-dark, giving white on white at 1.12:1. These rules put the card
   internals back to ink. Any other white card placed in a dark section will
   need the same treatment, so check contrast before moving one.
   ----------------------------------------------------------------------- */
.section--dark .quotes { background: var(--border-dark); border-color: var(--border-dark); }
.section--dark .quote { color: var(--ink); }
.section--dark .quote blockquote,
.section--dark .quote figcaption,
.section--dark .quote figcaption b { color: var(--ink); }
.section--dark .quote figcaption span { color: var(--steel); }