/* =========================================================
   Qote condensed — Forest + Sage palette + compact layout
   Loaded AFTER shared-base.css. Overrides the palette and adds
   the new .qc- progressive-disclosure primitives.
   ========================================================= */

/* ---- Qote — Forest green "green energy" palette (authoritative) ----
   Aligns marketing to the Qote design handoff: forest is the anchor (ink +
   dark surfaces), an AA-safe accent green is the action colour, neutrals are
   warm paper, gold (clay) is a secondary accent. Variable names keep their
   --green-* identifiers; only the VALUES move navy/teal -> forest. All text
   pairings here meet WCAG AA on paper (see --green-mid / --text-muted). ---- */
:root {
  --green-dark:  #1e3d2c;   /* forest-700 — primary surfaces, buttons, headings */
  --green-mid:   #1c6539;   /* accent-strong — AA-safe text accent, links, em */
  --green-deep:  #14301f;   /* forest-900 — footer, deep bands */
  --green-soft:  #cfe3d0;   /* on-dark-muted — text/labels on forest surfaces */
  --clay:        #d4a76a;   /* gold — secondary accent (fills, chips, underlines) */
  --cream:       #f4f3ec;   /* paper — page background */
  --cream-warm:  #ecebe1;   /* paper-alt — alternating section bands */
  --text:        #16231a;   /* ink — body + headings on paper */
  --text-muted:  #51604f;   /* ink-muted — secondary text (AA on paper) */
  --rule:        #d7d6c9;   /* border — hairlines, dividers */
  --rule-soft:   #e6e4d8;   /* border-soft — lighter dividers */
}
html, body { background: var(--cream); }

/* =========================================================
   GLOBAL CONDENSING — halve the vertical rhythm
   ========================================================= */
.qc-page { background: var(--cream); }
.qc-sec { padding: 45px 0; position: relative; z-index: 1; }
.qc-sec--tight { padding: 33px 0; }
.qc-sec + .qc-sec { border-top: 1px solid var(--rule); }
.qc-container { max-width: 1180px; margin: 0 auto; padding: 0 56px; position: relative; z-index: 1; }

/* Section header: number + label + one headline, no lede paragraphs */
.qc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
/* Section audience eyebrow — a clear "who this section is for" label */
.qc-sec-eyebrow { flex-basis: 100%; width: 100%; font-family: "IBM Plex Mono", monospace;
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  /* AA-safe accent green on paper (~6:1). Was clay gold ~2:1 = near-invisible. */
  color: var(--green-mid, #1c6539); margin-bottom: 2px; }
.qc-head__num {
  font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; color: var(--green-mid); flex: 0 0 auto;
}
.qc-page .qc-head__h {
  font-family: "Playfair Display", serif; font-weight: 900;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--green-dark); margin: 0; text-wrap: balance;
}
.qc-head__h em { font-style: normal; color: var(--green-mid); font-weight: 900; }
.qc-head__rule { flex: 1; height: 1px; background: var(--rule); align-self: center;
  min-width: 24px; max-width: 90px; }

/* Two-door audience chooser — an unambiguous split between the people who
   NEED a costing (private owners, architects, syndics, investors) and the
   contractors who PRODUCE quotes. Both "who" labels use the AA-safe accent
   green (never clay-on-paper, which is near-invisible); the cards are told
   apart by their top-border colour + price badge, not by low-contrast text. */
.qc-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; align-items: stretch; }
.qc-door { display: flex; flex-direction: column; gap: 12px; background: var(--cream);
  border: 1px solid var(--rule); border-top: 3px solid var(--green-mid); padding: 28px 26px; }
.qc-door--con { border-top-color: var(--clay); background: var(--cream-warm); }
.qc-door__who { font-family: "IBM Plex Mono", monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-mid); }
.qc-page .qc-door__h { font-family: "Playfair Display", serif; font-weight: 900;
  font-size: clamp(20px, 2.3vw, 26px); line-height: 1.08; letter-spacing: -0.015em;
  color: var(--green-dark); margin: 0; }
.qc-door__p { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0; }
.qc-door__list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.qc-door__list li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.qc-door__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-mid); font-weight: 700; }
.qc-door__foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.qc-door__price { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--green-dark); font-weight: 600; }
.qc-door .qw-btn { width: fit-content; }
@media (max-width: 760px) { .qc-doors { grid-template-columns: 1fr; } }

/* Reveal — opacity stays 1 (visible at rest); only nudge transform */
.qc-reveal { transform: translateY(22px); transition: transform 0.7s cubic-bezier(.16,.7,.2,1); }
.qc-reveal.is-visible { transform: translateY(0); }
.qc-stagger > * { transform: translateY(16px); opacity: 0.001; transition: transform .6s cubic-bezier(.16,.7,.2,1), opacity .5s ease; }
.qc-stagger.is-visible > * { transform: translateY(0); opacity: 1; }
.qc-stagger.is-visible > *:nth-child(1){transition-delay:.00s}
.qc-stagger.is-visible > *:nth-child(2){transition-delay:.06s}
.qc-stagger.is-visible > *:nth-child(3){transition-delay:.12s}
.qc-stagger.is-visible > *:nth-child(4){transition-delay:.18s}
.qc-stagger.is-visible > *:nth-child(5){transition-delay:.24s}
.qc-stagger.is-visible > *:nth-child(6){transition-delay:.30s}
@media (prefers-reduced-motion: reduce) {
  .qc-reveal,.qc-stagger>*{transform:none!important;opacity:1!important;transition:none!important}
}

/* =========================================================
   HERO — tight: title + 1 line + 1 CTA + 3 stats + report
   ========================================================= */
.qc-hero { padding: 40px 0 36px; }
.qc-hero__grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 64px; align-items: center; }
.qc-page .qc-hero__title {
  font-family: "Playfair Display", serif; font-weight: 900;
  font-size: clamp(36px, 4.2vw, 56px); line-height: 0.98; letter-spacing: -0.025em;
  color: var(--green-dark); margin: 0 0 22px; text-wrap: pretty;
}
.qc-hero__title em { font-style: normal; color: var(--green-mid); }
.qc-page .qc-hero__lede { font-size: 17px; line-height: 1.55; color: var(--text); max-width: 460px; margin: 0 0 28px; }
.qc-hero__cta { display: flex; gap: 14px; align-items: center; margin-bottom: 30px; flex-wrap: wrap; }
.qc-hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.qc-hero__stats > div { background: var(--cream); padding: 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.qc-hero__stats strong { font-family: "Playfair Display", serif; font-weight: 900; font-size: 30px; color: var(--green-dark); line-height: 1; }
.qc-hero__stats span { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); line-height: 1.4; }
.qc-hero__right { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* the one-and-only trust micro-bar (replaces all the repeated prose claims) */
.qc-trustbar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 26px; }
.qc-trustbar__item { display: inline-flex; align-items: center; gap: 7px;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--green-dark); }
.qc-trustbar__tick { width: 15px; height: 15px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--green-mid); color: #fff; font-size: 9px; font-weight: 700; border-radius: 50%; }

/* =========================================================
   COMPACT LOGO STRIP (cited-by) — single quiet row
   ========================================================= */
/* Proper "cited by" bar — bordered strip, evenly spaced, ready for logos */
.qc-logos { display: flex; align-items: center; justify-content: flex-start; gap: 28px 38px; flex-wrap: wrap;
  padding: 18px clamp(20px, 3vw, 34px); border: 1px solid var(--rule); border-radius: 8px;
  background: color-mix(in srgb, var(--cream) 60%, #fff); }
.qc-logos__lab { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--green-mid); padding-right: 16px; margin-right: 6px;
  border-right: 1px solid var(--rule); flex: 0 0 auto; }
.qc-logos span:not(.qc-logos__lab) { font-family: "IBM Plex Mono", monospace; font-size: 12px;
  letter-spacing: 0.12em; color: var(--text-muted); font-weight: 500; white-space: nowrap; }

/* Hero stat €29 — currency sign small, number big (was the reverse) */
.qc-hero__stats .qc-cur { font-size: 0.5em; font-weight: 700; vertical-align: 0.42em; margin-right: 1px; }

/* =========================================================
   TABS — Direction A "who it's for" (merges 2 sections into 1)
   ========================================================= */
.qc-tabs__nav { display: inline-flex; gap: 4px; padding: 4px; background: var(--cream-warm);
  border: 1px solid var(--rule); border-radius: 8px; margin-bottom: 32px; }
.qc-tab { appearance: none; border: none; background: transparent; cursor: pointer;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); padding: 11px 22px; border-radius: 6px; transition: all .2s ease; }
.qc-tab:hover { color: var(--green-dark); }
.qc-tab.is-on { background: var(--green-dark); color: var(--cream); }
.qc-panel { display: none; }
.qc-panel.is-on { display: block; animation: qc-rise .45s cubic-bezier(.16,.7,.2,1) both; }
@keyframes qc-rise { from { transform: translateY(10px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .qc-panel.is-on { animation: none; } }
.qc-page .qc-panel__lede { font-size: 16px; line-height: 1.55; color: var(--text); max-width: 560px; margin: 0 0 26px; }
.qc-panel__lede em { font-style: normal; color: var(--green-mid); font-weight: 600; }
.qc-panel__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; }

/* =========================================================
   EXPAND — progressive disclosure rows (line now, detail on click)
   ========================================================= */
.qc-exps { border-top: 1px solid var(--rule); }
.qc-exp { border-bottom: 1px solid var(--rule); }
.qc-exp__head { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 16px;
  align-items: center; background: none; border: none; cursor: pointer; text-align: left;
  padding: 18px 2px; color: var(--green-dark); transition: padding-left .25s ease; }
.qc-exp__head:hover { padding-left: 6px; }
.qc-exp__n { font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; color: var(--green-mid); }
.qc-exp__t { font-family: "Playfair Display", serif; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.qc-exp__plus { font-family: "Playfair Display", serif; font-size: 22px; color: var(--green-mid); transition: transform .3s ease; line-height: 1; }
.qc-exp.is-open .qc-exp__plus { transform: rotate(45deg); }
.qc-exp__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.16,.7,.2,1); }
.qc-exp.is-open .qc-exp__body { grid-template-rows: 1fr; }
.qc-exp__inner { overflow: hidden; }
.qc-exp__pad { padding: 2px 2px 22px 44px; }
.qc-page .qc-exp__pad p { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 0 0 14px; max-width: 520px; }
.qc-exp__embed { display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: 11px;
  background: var(--green-deep); color: var(--green-soft); padding: 9px 13px; border-radius: 4px; letter-spacing: 0.02em; }

/* small inline EPC pill + mini sites (reused inside expand bodies) */
.qc-epc { display: inline-flex; align-items: center; gap: 9px; font-family: "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: 0.04em; }
.qc-epc b { background: var(--cream-warm); border: 1px solid var(--rule); padding: 4px 9px; color: var(--text-muted); font-weight: 600; }
.qc-epc b.to { border-color: var(--green-mid); color: var(--green-mid); }
.qc-epc span { color: var(--green-mid); }
.qc-sites { display: flex; gap: 8px; }
.qc-sites i { width: 46px; height: 34px; background: var(--cream-warm); border: 1px solid var(--rule);
  position: relative; display: block; }
.qc-sites i::before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; height: 4px; background: var(--green-soft); }
.qc-sites i::after { content: ""; position: absolute; top: 13px; left: 5px; width: 60%; height: 3px; background: var(--rule-soft);
  box-shadow: 0 6px 0 var(--rule-soft); }

/* =========================================================
   ACCEPTED band — banks / insurers / notaries (3-up, once)
   ========================================================= */
.qc-accepted { background: var(--green-dark); color: var(--cream); }
.qc-accepted__in { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.qc-page .qc-accepted__h { font-family: "Playfair Display", serif; font-weight: 900; font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.05; letter-spacing: -0.02em; color: var(--cream); margin: 12px 0 0; }
.qc-accepted__h em { font-style: normal; color: var(--green-soft); }
.qc-accepted__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(184,212,200,0.18);
  border: 1px solid rgba(184,212,200,0.18); }
.qc-accepted__cell { background: var(--green-dark); padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.qc-accepted__tick { width: 20px; height: 20px; display: grid; place-items: center; background: var(--green-mid);
  color: #fff; border-radius: 50%; font-size: 11px; font-weight: 700; }
.qc-accepted__cell strong { font-family: "Playfair Display", serif; font-size: 19px; font-weight: 700; color: var(--cream); }
.qc-accepted__cell span { font-size: 12.5px; color: var(--green-soft); line-height: 1.45; }
.qc-accepted__foot { display: flex; gap: 22px; margin-top: 18px; font-family: "IBM Plex Mono", monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-soft); }

/* =========================================================
   TIMELINE — Direction B "20 minutes" visual strip
   ========================================================= */
.qc-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.qc-timeline__step { padding: 26px 24px; position: relative; }
.qc-timeline__step + .qc-timeline__step { border-left: 1px solid var(--rule); }
.qc-timeline__t { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--green-mid); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.qc-timeline__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green-mid); }
.qc-page .qc-timeline__step h4 { font-family: "Playfair Display", serif; font-size: 21px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--green-dark); margin: 0 0 8px; }
.qc-page .qc-timeline__step p { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0; max-width: 280px; }
.qc-timeline__bar { grid-column: 1 / -1; height: 3px; background: var(--rule); position: relative; overflow: hidden; margin-bottom: 0; }
.qc-timeline__fill { position: absolute; inset: 0; width: 0; background: var(--green-mid); }
.is-visible .qc-timeline__fill { width: 100%; transition: width 2.4s cubic-bezier(.4,0,.2,1) .2s; }

/* =========================================================
   CHIPS — Direction B audience selector (one card at a time)
   ========================================================= */
.qc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.qc-chip { appearance: none; cursor: pointer; font-family: "IBM Plex Mono", monospace; font-size: 12px;
  letter-spacing: 0.06em; padding: 10px 16px; border: 1px solid var(--rule); background: var(--cream-warm);
  color: var(--text-muted); border-radius: 100px; transition: all .2s ease; }
.qc-chip:hover { border-color: var(--green-mid); color: var(--green-dark); }
.qc-chip.is-on { background: var(--green-dark); border-color: var(--green-dark); color: var(--cream); }
.qc-chipout { position: relative; min-height: 150px; }
.qc-chipcard { display: none; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
  background: var(--cream-warm); border: 1px solid var(--rule); border-left: 3px solid var(--green-mid);
  padding: 28px 30px; }
.qc-chipcard.is-on { display: grid; animation: qc-rise .4s cubic-bezier(.16,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .qc-chipcard.is-on { animation: none; } }
.qc-chipcard__icon { width: 54px; height: 54px; display: grid; place-items: center; background: var(--green-dark);
  color: var(--green-soft); font-family: "Playfair Display", serif; font-weight: 900; font-size: 26px; }
.qc-page .qc-chipcard h4 { font-family: "Playfair Display", serif; font-size: 24px; font-weight: 800; letter-spacing: -0.015em;
  color: var(--green-dark); margin: 0 0 6px; }
.qc-page .qc-chipcard p { font-size: 15px; line-height: 1.55; color: var(--text-muted); margin: 0; max-width: 560px; }

/* =========================================================
   CLOSE — single final CTA (kills the 4 repeated CTAs)
   ========================================================= */
.qc-close { text-align: center; padding: 64px 0; }
.qc-page .qc-close__h { font-family: "Playfair Display", serif; font-weight: 900; font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.04; letter-spacing: -0.02em; color: var(--green-dark); margin: 0 auto 26px; max-width: 720px; text-wrap: balance; }
.qc-close__h em { font-style: normal; color: var(--green-mid); }
.qc-close__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.qc-close__note { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); }

/* =========================================================
   Condense the reused base sections (footer/faq/cta-band/trust)
   ========================================================= */
.propA-footer { padding: 52px 0 26px !important; }
.faq { padding: 56px 0 !important; }
.faq__head { margin-bottom: 30px !important; }
.cta-band { padding: 24px 0 !important; }
.propA-trust { padding: 18px 0 !important; }

/* tidy: hero document doesn't need the heavy float on a short page */
.qc-hero__right .renov-doc--compact { transform: rotate(-1deg); }

/* small screens */
@media (max-width: 900px) {
  .qc-hero__grid, .qc-panel__grid, .qc-accepted__in { grid-template-columns: 1fr; gap: 36px; }
  .qc-container { padding: 0 28px; }
  .qc-timeline { grid-template-columns: 1fr; }
  .qc-timeline__step + .qc-timeline__step { border-left: none; border-top: 1px solid var(--rule); }
}

/* upright accents: keep em distinguished by color/weight, never slanted */
em, i, cite, .qc-page em { font-style: normal; }