/* Shared reading layout for the service-area pages and homeowner guides. */
.seo-page main{overflow-wrap:break-word}
.seo-page .steps>li{grid-template-columns:44px minmax(0,1fr);gap:22px;align-items:start}
.seo-page .steps>li>:last-child{min-width:0}
.seo-page .steps>li>b{line-height:1.3;padding-top:2px}
.seo-page .steps>li p:last-child{margin-bottom:0}
.seo-page .steps ul{padding-left:1.2em;margin:14px 0 0;max-width:660px}
.seo-page .steps ul>li{display:list-item;padding:0;border:0;margin:0 0 12px;line-height:1.65}
.seo-page .steps ul>li::marker{color:var(--olive)}
.seo-page .guide .steps ul>li strong{font-weight:600}
.seo-page .tools{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.seo-page .tool{min-width:0}
.seo-page .section:not(.dark) h2 em{color:#626b43}
.seo-page .table-wrap{max-width:100%}
.seo-page .price-table{line-height:1.55}
.seo-page .dark form input,.seo-page .dark form select,.seo-page .dark form textarea{color:var(--ink)}
.seo-page .dark a:focus-visible{outline-color:#d4c394}
.seo-page a[href^="mailto:"]{overflow-wrap:anywhere}
@media(max-width:600px){
 html{scroll-padding-top:150px}
 .seo-page .wrap{width:88%}
 .seo-page .steps>li{grid-template-columns:28px minmax(0,1fr);gap:14px;padding:24px 0}
 .seo-page .steps>li>b{font-size:18px}
 .seo-page .steps h3{font-size:24px;line-height:1.2}
 .seo-page .steps ul{padding-left:1.05em}
 .seo-page .nav{gap:12px;padding:16px 0;min-height:0}
 .seo-page .navlinks{width:100%;gap:14px;justify-content:space-between}
 .seo-page .navlinks .button{padding:10px 12px;font-size:12px}
 .seo-page .price-table th,.seo-page .price-table td{padding:12px 7px}
 .seo-page .calc{padding:20px 16px}
 .seo-page .section{padding:56px 0}
}
@media print{.seo-page .quick-quote-root,.seo-page .rt-quote-launcher{display:none!important}}

/* ===== Canvas background (Nov 2026): off-white canvas, charcoal canvas where the dark green was. Delete from here down to undo. ===== */
html{--canvas:#f3efe6}
html,body{background-color:var(--canvas)!important}
/* canvas weave: fine horizontal + vertical threads, plus soft light falloff */
body{background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 1.5h6M0 4.5h6' stroke='%23a89a80' stroke-opacity='.10' stroke-width='1'/%3E%3Cpath d='M1.5 0v6M4.5 0v6' stroke='%23ffffff' stroke-opacity='.35' stroke-width='1'/%3E%3C/svg%3E"),
    radial-gradient(1200px 800px at 20% 10%,rgba(255,255,255,.55),transparent 70%),
    radial-gradient(900px 700px at 90% 80%,rgba(190,175,150,.10),transparent 70%)!important;background-attachment:scroll!important}
/* soft canvas grain, a little stretched like real cloth (ignores taps) */
html::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E")}
/* the light sections sit on the canvas; dark/photo sections stay exactly as they are */
:is(#reviews,.quiet-memory,.service-showcase,#services,#plan,.project-highlights,.model-home-section,#about,#how-it-works,#faq,.proof-strip){background-color:transparent!important}
/* every dark green band (stair story, service area, estimate form, header, footer, inner-page bands) becomes a charcoal canvas (same weave, darker cloth) */
:is(#staircase-story,.model-hook-card,.area,#estimate.contact,body > footer,body > header,.seo-page .hero,.section.dark,.cinema-contact,.collection-inquiry,.rt-portal){background-color:#2a2927!important;background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 1.5h6M0 4.5h6' stroke='%23000000' stroke-opacity='.22' stroke-width='1'/%3E%3Cpath d='M1.5 0v6M4.5 0v6' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1'/%3E%3C/svg%3E"),
    radial-gradient(900px 600px at 25% 15%,rgba(255,255,255,.06),transparent 70%),
    radial-gradient(800px 600px at 85% 90%,rgba(0,0,0,.25),transparent 70%)!important}

/* Selected warm ivory: smooth light canvas; charcoal areas retain their weave. */
html{--canvas:#f5f0e6}
body{background-image:none!important}