/* ============================================================================
   DOC.CSS — the long-form furniture, and nothing else.

   This is what survives of interior.css. The rebuild retired that file's
   PROSE-PAGE LOOK — the pale page-head, the 76ch column, the single bottom
   CTA — because it produced documents rather than conversion pages, and Ryan
   rejected every page built on it (docs/CONVERSION-REBUILD-BRIEF.md §1).

   What genuinely IS interior-specific stays, exactly as the brief says it
   should: the sticky contents rail on the legal pages, the prose rhythm those
   pages are actually meant to read as, the wide photo band, the county lists
   and the numbered setup rail on /instructions.

   Nothing here collides with site.css or pages.css — every selector that both
   files defined (.split, .tier-card, .faq-item, .review-card, .gallery-grid,
   .stars, .count, .pattern-*) was left behind on purpose, so load order between
   them can never decide how a component looks.

   Loaded by: warranty, service-agreement, privacy-policy, our-story,
   instructions, careers, service-area, gallery, reviews.
   ============================================================================ */

.prose{padding:40px 0 56px;max-width:76ch}
.prose h2{margin:38px 0 12px;font-size:clamp(22px,3vw,29px);line-height:1.22;letter-spacing:-.015em}
.prose h2:first-child{margin-top:0}
.prose h3{margin:30px 0 10px;font-size:20px;line-height:1.3}
.prose h4{margin:22px 0 8px;font-size:17.5px;color:var(--ink-soft)}
.prose p{margin:0 0 15px;color:var(--ink-soft);white-space:pre-line}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;color:var(--ink-soft)}
.prose li{margin:0 0 7px}
.prose strong{color:var(--ink)}
.prose a{overflow-wrap:anywhere}

.gallery-section{padding:34px 0 8px}
.gallery-section h2{margin:0 0 4px;font-size:clamp(21px,2.8vw,27px)}
.gallery-section .count{margin:0 0 18px;color:var(--ink-muted);font-size:15px}

.gallery-intro{padding:34px 0 0;max-width:70ch;color:var(--ink-soft)}
/* The gallery is the one interior page that must not be measured in characters. */
.prose-wide{max-width:none}

.apply-cta{margin:32px 0 8px;padding:32px 30px;border-radius:var(--radius);
  background:var(--surface-tinted);border:1px solid var(--hairline)}
.apply-cta h2{margin:0 0 10px}
.apply-cta p{margin:0 0 20px;max-width:56ch;color:var(--ink-soft)}
.apply-cta .apply-note{margin:16px 0 0;font-size:14.5px;color:var(--ink-muted)}

.doc-layout{display:grid;gap:40px;padding:40px 0 56px}
@media (min-width:920px){ .doc-layout{grid-template-columns:230px minmax(0,1fr)} }
.doc-toc{display:none}
@media (min-width:920px){
  .doc-toc{display:block;position:sticky;top:110px;align-self:start;
    border-left:2px solid var(--hairline-strong);padding-left:16px}
  .doc-toc p{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-muted)}
  .doc-toc a{display:block;padding:4px 0;font-size:13.5px;line-height:1.4;
    color:var(--ink-soft);text-decoration:none}
  .doc-toc a:hover{color:var(--brand-blue)}
}
.doc-layout .prose{padding:0;max-width:76ch}
.doc-updated{margin:0 0 26px;font-size:14px;color:var(--ink-muted)}

.photo-band{margin:38px 0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--hairline)}
.photo-band picture{display:block;aspect-ratio:21/9;background:var(--surface-sunken)}
.photo-band img{width:100%;height:100%;object-fit:cover;display:block}
.photo-band figcaption{padding:10px 14px;font-size:13.5px;color:var(--ink-muted);

.county{margin:0 0 34px}
.county h2{margin:0 0 6px;font-size:clamp(21px,2.8vw,26px)}
.county .county-note{margin:0 0 14px;color:var(--ink-soft);max-width:70ch}
.city-pills{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none}
.city-pills li{padding:7px 14px;border-radius:999px;font-size:14px;font-weight:600;
  color:var(--ink-soft);background:var(--surface-sunken);border:1px solid var(--hairline)}

.steps{counter-reset:istep;padding:6px 0 8px}
.step{position:relative;padding:0 0 26px 52px;counter-increment:istep}
.step::before{content:counter(istep);position:absolute;left:0;top:0;
  width:34px;height:34px;border-radius:50%;background:var(--surface-tinted);
  color:var(--brand-blue);font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--brand-blue)}
.step::after{content:"";position:absolute;left:16.5px;top:40px;bottom:6px;
  width:1px;background:var(--hairline-strong)}
.step:last-child::after{display:none}
.step h3{margin:4px 0 8px;font-size:18px}
.step p{margin:0 0 10px;color:var(--ink-soft);white-space:pre-line}

.prose.flow{padding:12px 0}
.container>.prose.flow:first-of-type,
.container>*:first-child+.prose.flow{padding-top:38px}   /* first block after the hero */
.section-kicker{margin:30px 0 4px}
.section-kicker+.prose.flow{padding-top:0}
.prose.flow+.spec-list{margin-top:6px}
.photo-band{margin:26px 0}
.container>.county:first-of-type{margin-top:38px}
.container>.county:last-of-type{margin-bottom:52px}

@media (min-width:920px){
  .doc-toc{display:block;position:sticky;top:110px;align-self:start;
    border-left:2px solid var(--hairline-strong);padding-left:16px}
  .doc-toc p{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-muted)}
  .doc-toc a{display:block;padding:4px 0;font-size:13.5px;line-height:1.4;
    color:var(--ink-soft);text-decoration:none}
  .doc-toc a:hover{color:var(--brand-blue)}
}