/* ==========================================================================
   service.css - sections shared by buyers.html and sellers.html.
   These two pages were a hero, one split and a CTA; everything that gives
   them substance now lives here. Four components, deliberately different in
   texture so the pages don't read as four stacked card grids:

     .vr-pillars   boxed cards, sand band   - "how we work"
     .vr-aud       rules only, cream band   - "who we help"
     .vr-checklist a list inside .vr-split  - seller marketing
     .vr-faq       accordion, cream band    - questions we actually get
   ========================================================================== */

/* ==========================================================================
   PILLARS - boxed card grid. Same footprint as .vr-step (process.css) but
   without the numerals: these are parallel, not sequential, and a numbered
   card implies an order the reader then tries to follow.
   ========================================================================== */
.vr-pillars{padding-block:var(--vr-section-y); background:var(--vr-sand); text-align:center;}
.vr-pillars__head{font-weight:500; font-size:clamp(1.9rem,4vw,2.6rem); color:var(--vr-teal); line-height:1.15; margin-bottom:.6rem;}
.vr-pillars__sub{font-size:1.1rem; max-width:56ch; margin:0 auto 3rem; color:var(--vr-charcoal);}
.vr-pillars__grid{
  max-width:var(--vr-maxw); margin:0 auto; padding-inline:var(--vr-gutter);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:left;
}
.vr-pillar{
  background:var(--vr-ivory); border:1px solid var(--vr-line); border-radius:8px;
  padding:1.9rem 1.6rem; display:flex; flex-direction:column;
}
/* Short peacock rule where .vr-step puts its numbered disc. Keeps the accent
   and the top-left anchor without claiming a sequence. */
.vr-pillar::before{content:''; display:block; width:34px; height:2px; background:var(--vr-blush); margin-bottom:1.2rem;}
.vr-pillar__title{font-family:var(--vr-serif); font-weight:600; font-size:1.22rem; line-height:1.25; color:var(--vr-teal); margin-bottom:.55rem;}
.vr-pillar__text{font-size:.98rem; line-height:1.55; color:var(--vr-charcoal);}

/* ==========================================================================
   AUDIENCE - "who we help". Runs immediately after .vr-pillars on the buyers
   page, so it carries no card chrome at all: a hairline over each entry, on
   cream. Two grids of boxes back to back read as one long undifferentiated
   band, which is the failure this variant exists to avoid.
   ========================================================================== */
.vr-aud{padding-block:var(--vr-section-y); background:var(--vr-cream);}
.vr-aud__wrap{max-width:var(--vr-maxw); margin:0 auto; padding-inline:var(--vr-gutter);}
.vr-aud__head{font-weight:500; font-size:clamp(1.9rem,4vw,2.6rem); color:var(--vr-teal); line-height:1.15; text-align:center; margin-bottom:.6rem;}
.vr-aud__sub{font-size:1.1rem; max-width:56ch; margin:0 auto 3rem; color:var(--vr-charcoal); text-align:center;}
.vr-aud__grid{display:grid; grid-template-columns:1fr 1fr; gap:2.6rem 3.5rem;}
.vr-aud__item{border-top:1px solid var(--vr-line); padding-top:1.4rem;}
.vr-aud__term{
  font-family:var(--vr-ui); font-weight:500; font-size:.76rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--vr-blush); margin-bottom:.7rem;
}
.vr-aud__title{font-family:var(--vr-serif); font-weight:600; font-size:clamp(1.3rem,2.4vw,1.55rem); line-height:1.2; color:var(--vr-teal); margin-bottom:.6rem;}
.vr-aud__text{font-size:1.02rem; line-height:1.6; color:var(--vr-charcoal); max-width:46ch;}

/* ==========================================================================
   CHECKLIST - drops inside a .vr-split__body, so it inherits that column's
   width and vertical centring and only needs its own marks.
   ========================================================================== */
/* Measure comes from the split body when it sits in one (see split.css), so the
   list and the paragraph above it share a right edge; 52ch is the standalone
   fallback. */
.vr-checklist{list-style:none; margin:0 0 1.8rem; padding:0; max-width:var(--vr-split-measure,52ch); display:flex; flex-direction:column; gap:.85rem;}
.vr-checklist li{position:relative; padding-left:1.7rem; font-size:1.02rem; line-height:1.5;}
.vr-checklist li::before{content:'\2713'; position:absolute; left:0; top:0; color:var(--vr-blush); font-weight:700;}

/* ==========================================================================
   FAQ - native <details>, so it works with JavaScript off and the answers
   stay in the DOM for search engines and in-page find.
   ========================================================================== */
.vr-faq{padding-block:var(--vr-section-y); background:var(--vr-cream);}
.vr-faq__wrap{max-width:820px; margin:0 auto; padding-inline:var(--vr-gutter);}
.vr-faq__head{font-weight:500; font-size:clamp(1.9rem,4vw,2.6rem); color:var(--vr-teal); line-height:1.15; text-align:center; margin-bottom:2.6rem;}
.vr-faq__item{border-bottom:1px solid var(--vr-line);}
.vr-faq__item:first-of-type{border-top:1px solid var(--vr-line);}
.vr-faq__q{
  position:relative; list-style:none; cursor:pointer;
  font-family:var(--vr-serif); font-weight:600; font-size:clamp(1.12rem,2.2vw,1.3rem);
  line-height:1.35; color:var(--vr-teal); padding:1.35rem 2.8rem 1.35rem 0;
  transition:color .2s;
}
.vr-faq__q::-webkit-details-marker{display:none;}
.vr-faq__q:hover{color:var(--vr-blush);}
/* Drawn rather than a character: the two bars are a plus that loses its
   upright to become a minus, which animates instead of swapping glyphs. */
.vr-faq__q::before,
.vr-faq__q::after{
  content:''; position:absolute; right:.35rem; top:50%; width:13px; height:1.5px;
  background:var(--vr-blush); transition:transform .25s ease;
}
.vr-faq__q::after{transform:rotate(90deg);}
.vr-faq__item[open] .vr-faq__q::after{transform:rotate(0deg);}
.vr-faq__item[open] .vr-faq__q{color:var(--vr-blush);}
.vr-faq__a{padding:0 2.8rem 1.6rem 0;}
.vr-faq__a p{font-size:1.02rem; line-height:1.65; color:var(--vr-charcoal);}
.vr-faq__a p + p{margin-top:.9rem;}
.vr-faq__a a{color:var(--vr-blush); text-decoration:none; border-bottom:1px solid currentColor;}
.vr-faq__a a:hover{color:var(--vr-teal);}
.vr-faq__note{text-align:center; margin-top:2.4rem; font-family:var(--vr-ui); font-size:.92rem; color:var(--vr-stone);}
.vr-faq__note a{color:var(--vr-blush); text-decoration:none; border-bottom:1px solid currentColor;}
.vr-faq__note a:hover{color:var(--vr-teal);}

@media (max-width:1000px){
  .vr-pillars__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:700px){
  .vr-pillars__grid{grid-template-columns:1fr;}
  .vr-aud__grid{grid-template-columns:1fr; gap:2rem;}
  .vr-aud__text{max-width:none;}
  /* The answer has no toggle to clear, so the gutter the question needs for
     its +/- is just lost measure once the column is this narrow. */
  .vr-faq__a{padding-right:0;}
  .vr-faq__q{padding-right:2.2rem;}
}

/* ==========================================================================
   BAND OVERRIDES
   Sections alternate cream/sand down a page so each one reads as its own
   block. These two pages stack components whose defaults were set for the
   homepage and your-next-move, which lands three cream bands in a row in both
   running orders. Flipping one band in each restores the alternation:

     buyers   quotes cream -> faq SAND -> listings CREAM -> photographic CTA
     sellers  steps cream  -> stats SAND -> faq cream    -> photographic CTA
   ========================================================================== */
/* Doubled class throughout: stats.css and search.css are linked AFTER this
   file on those pages, so a single-class override loses on file order the way
   .vr-pagehero--bleed did in page-hero.css. */
.vr-faq.vr-faq--sand{background:var(--vr-sand);}
.vr-stats.vr-stats--sand{background:var(--vr-sand); --vr-stats-line:#D9CBB4;}
.vr-search.vr-search--cream{background:var(--vr-cream);}