/* Renovation Defenders, story system: the four service pages.
   Loaded after ../story-final/style.css (tokens, header, hero, FAQ, start band, footer).
   Everything below is prefixed sv- and owns its own layout, so a change to the shared sheet
   can restyle the chrome without breaking these compositions.
   Fix round 2026-10-09: per-page tail (next-job tile, start-band drawing fragments), bathroom and basement
   full-bleed photos, legibility of drawing labels, class-level text-wrap for display lines. */

/* ---------- hero photo crop per page ---------- */
.hero__media img.sv-heroimg{object-position:var(--pos,60% 60%)}
.hero .poster > span{display:block}
@media (max-width:767px){.hero__media img.sv-heroimg{object-position:var(--pos-m,50% 60%)}}

/* ---------- display lines never leave one word alone (the assembler's site.css adds the same for h1-h3) ---------- */
.hero h1,.h2,.sv-h2s,.sv-h3,.sv-curb__big,.sv-found__big,.sv-kfin__pull,.sv-notes__t,.sv-water__big,.sv-bold__h,.sv-bold__list li,
.sv-cassec__h,.sv-tb__note h3,.sv-yr__take,.sv-rooms__foot,.sv-start__close,.faq summary,.lede,.hero__sub,.sv-next__copy > p,
.sv-paper__notes h3,.sv-notes__i h3{text-wrap:balance}
p,li,dd,figcaption,.sv-kword__quote blockquote p,.sv-live__quote blockquote p{text-wrap:pretty}

/* ---------- shared pieces ---------- */
.sv-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 56px;align-items:end}
.sv-head .h2{margin-top:14px}
.sv-head .lede{padding-bottom:6px}
.sv-h2s{font-size:clamp(30px,3.2vw,46px)}
.sv-h3{font:600 clamp(22px,1.9vw,27px)/1.15 var(--serif);letter-spacing:-.012em}
.sv-cite{display:flex;align-items:center;gap:14px;margin-top:24px;font:600 12.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--pale)}
.sv-cite--ink{color:var(--stone)}
.sv-cite img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 30%;flex:none}
@media (max-width:999px){.sv-head{grid-template-columns:1fr;gap:16px}}

/* paper sheet that drawings sit on */
.sv-paper{background:#fff;color:var(--ink);padding:24px 28px 16px;box-shadow:0 40px 70px -32px rgba(16,40,26,.5);transform:rotate(-.6deg)}
.sv-paper--flat{transform:none;box-shadow:0 34px 70px -44px rgba(16,40,26,.5);border:1px solid var(--rule)}
.sv-paper__top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:12px}
.sv-paper__top b{font:600 21px/1.15 var(--serif);letter-spacing:-.01em}
.sv-paper__top span{font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--stone);white-space:nowrap}
.sv-paper__notes{display:grid;grid-template-columns:1fr 1fr;gap:18px 56px;margin-top:14px;padding:18px 0 10px;border-top:2px solid var(--ink)}
.sv-paper__notes h3{font:600 19px/1.25 var(--serif);letter-spacing:-.008em}
.sv-paper__notes p{font-size:15.5px;line-height:1.55;color:var(--body);margin-top:6px}
@media (max-width:600px){
  .sv-paper{padding:14px 12px 10px;transform:rotate(-.3deg)}
  .sv-paper--flat{transform:none}
  .sv-paper__top{flex-direction:column;gap:4px;padding-bottom:10px}
  .sv-paper__top b{font-size:18px}
  .sv-paper__notes{grid-template-columns:1fr;gap:16px;padding:16px 6px 8px}
}

/* line drawings: one desktop version with labels, one cropped phone version */
.dw{display:block;width:100%;height:auto;overflow:hidden}
.dw--m{display:none}
.dw .wall{fill:#2A332D}
.dw .ink{fill:none;stroke:#2A332D;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dw .thin{stroke-width:1;stroke:#5F6B63}
.dw .hair{stroke-width:.8;stroke:#A9B2AB}
.dw .cab{fill:#F3F5F3;stroke:#2A332D;stroke-width:1.3}
.dw .tile{fill:#FBFBFA;stroke:#CDD4CF;stroke-width:1}
.dw .memb{fill:#E4EFE7;stroke:#2E7D4F;stroke-width:1.2}
.dw .membh{fill:none;stroke:#2E7D4F;stroke-width:.9;opacity:.5}
.dw .memb-line{fill:none;stroke:#2E7D4F;stroke-width:3}
.dw .backer{fill:#EFEDE8;stroke:#8B8478;stroke-width:1}
.dw .dot{fill:#A39C90}
.dw .stud,.dw .joist{fill:#EBDDC4;stroke:#8B7355;stroke-width:1}
.dw .pipe{fill:none;stroke:#2A332D;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.dw .duct{fill:none;stroke:#2A332D;stroke-width:7;stroke-linejoin:round;opacity:.85}
.dw .soil{fill:#F1EEE7}
.dw .conc{fill:#E3E5E2;stroke:#2A332D;stroke-width:1.4}
.dw .insul{fill:#EDF1EA;stroke:#2A332D;stroke-width:1}
.dw .tri{fill:none;stroke:#8F9A92;stroke-width:1.2;stroke-dasharray:3 5}
.dw .walk{fill:none;stroke:#2E7D4F;stroke-width:1.7;stroke-dasharray:7 6;stroke-linecap:round;stroke-linejoin:round}
.dw .lead{fill:none;stroke:#7B857E;stroke-width:.9}
.dw .lbl{font:600 11.5px var(--sans);letter-spacing:.12em;fill:#4F5A53;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.dw .lbl--b{font:500 15px var(--sans);letter-spacing:0;fill:#1B231E}
.dw .lbl--fine{font:600 13px var(--sans);letter-spacing:.14em;fill:#6F7871}
.dw .red{fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dw .dash{stroke-dasharray:9 7}
/* the red pen gets the same white halo the labels have, so a tile grid or a hatch never runs through the letters */
.dw .hand{font:700 30px var(--hand);fill:var(--red);paint-order:stroke;stroke:#fff;stroke-width:6px;stroke-linejoin:round}
@media (max-width:767px){.dw--d{display:none}.dw--m{display:block}.dw .hand{font-size:34px}}

/* phone-only plain list of what a drawing shows */
.sv-keylist{display:none;list-style:none;margin:20px 0 0;padding:0}
.sv-keylist li{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15.5px;line-height:1.45;color:var(--ink)}
.sv-keylist li:first-child{border-top:2px solid var(--ink)}
.sv-keylist svg{width:18px;height:18px;color:var(--forest);margin-top:3px}
@media (max-width:767px){.sv-keylist{display:block}}

/* =====================================================================
   KITCHEN: the decisions laid out like a marked-up plan
   ===================================================================== */
.sv-kplan{background:var(--sage);padding:110px 0 1px;position:relative;z-index:2}
.sv-kplan__fig{margin:64px 0 -250px;position:relative}
.sv-kplan__fig > .note{padding-top:16px}
.sv-sheet{display:grid;grid-template-columns:minmax(0,8.4fr) minmax(0,3.6fr);background:#fff;box-shadow:0 50px 90px -40px rgba(16,40,26,.55),0 2px 0 rgba(0,0,0,.03);transform:rotate(-.45deg);border:1px solid #DCE3DE}
.sv-sheet__draw{padding:34px 34px 24px}
.sv-sheet__tb{border-left:2px solid var(--ink);display:flex;flex-direction:column}
.sv-tb__head{display:flex;align-items:center;gap:14px;padding:22px 24px 18px;border-bottom:2px solid var(--ink)}
.sv-tb__head img{width:52px}
.sv-tb__head b{display:block;font:600 21px/1.15 var(--serif);letter-spacing:-.01em}
.sv-tb__head span{display:block;font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-top:5px}
.sv-tb__note{padding:20px 24px;border-bottom:1px solid var(--rule)}
.sv-tb__note h3{font:600 19px/1.25 var(--serif);letter-spacing:-.008em}
.sv-tb__note p{font-size:15px;line-height:1.55;color:var(--body);margin-top:6px}
/* the key fills what used to be a 413 x 135 empty corner of the title block */
.sv-tb__key{padding:16px 24px 18px}
.sv-tb__key h3{font:600 10.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.sv-tb__key p{display:flex;align-items:center;gap:12px;margin-top:9px;font-size:14px;line-height:1.3;color:var(--ink)}
.sv-tb__key svg{width:44px;height:10px;flex:none;overflow:visible}
.sv-tb__key .k-walk{fill:none;stroke:#2E7D4F;stroke-width:1.7;stroke-dasharray:7 6;stroke-linecap:round}
.sv-tb__key .k-tri{fill:none;stroke:#8F9A92;stroke-width:1.4;stroke-dasharray:3 5}
.sv-tb__key .k-red{fill:none;stroke:var(--red);stroke-width:2.6;stroke-dasharray:9 7}
.sv-tb__cells{display:grid;grid-template-columns:1fr 1fr;margin:auto 0 0;border-top:2px solid var(--ink)}
.sv-tb__cells div{padding:10px 24px 12px}
.sv-tb__cells div:nth-child(odd){border-right:1px solid var(--rule)}
.sv-tb__cells div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
.sv-tb__cells dt{font:600 10px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.sv-tb__cells dd{margin:3px 0 0;font:600 15px/1.3 var(--serif)}
@media (max-width:1099px){
  .sv-sheet{grid-template-columns:1fr}
  .sv-sheet__tb{border-left:0;border-top:2px solid var(--ink);display:grid;grid-template-columns:1fr 1fr}
  .sv-tb__head{grid-column:1/-1}
  .sv-tb__note + .sv-tb__note{border-left:1px solid var(--rule)}
  .sv-tb__key{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;border-bottom:0}
  .sv-tb__key h3{width:100%}
  .sv-tb__key p{margin-top:0}
  .sv-tb__cells{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}
  .sv-tb__cells div:nth-child(-n+2){border-bottom:0}
  .sv-tb__cells div{border-right:1px solid var(--rule)}
}
@media (max-width:767px){
  .sv-kplan{padding-top:72px}
  .sv-kplan__fig{margin:40px 0 -120px}
  .sv-sheet{transform:none}
  .sv-sheet__draw{padding:14px 10px 8px}
  .sv-sheet__tb{grid-template-columns:1fr}
  .sv-tb__head{padding:16px 18px 14px}
  .sv-tb__note{padding:16px 18px}
  .sv-tb__note + .sv-tb__note{border-left:0}
  .sv-tb__key{padding:14px 18px 16px;flex-direction:column;align-items:flex-start;gap:8px}
  .sv-tb__cells{grid-template-columns:1fr 1fr}
  .sv-tb__cells div{padding:9px 18px 10px}
  .sv-tb__cells div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .sv-tb__cells div:nth-child(even){border-right:0}
}

.sv-kfin{padding:330px 0 20px}
@media (max-width:767px){.sv-kfin{padding-top:170px}}
.sv-kfin__photo img{width:100%;height:clamp(380px,50vw,720px);object-fit:cover;object-position:50% 62%}
.sv-kfin__photo .note{padding-left:var(--gut)}
.sv-kfin__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;align-items:start}
.sv-kfin__pull{grid-column:1/6;grid-row:1;padding-top:64px;max-width:500px;font:italic 500 clamp(26px,2.5vw,36px)/1.25 var(--serif);letter-spacing:-.014em}
.sv-kfin__pull span{display:block;margin-bottom:14px;font:600 12.5px/1.35 var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
.sv-kfin__card{grid-column:7/13;grid-row:1;margin-top:-300px;background:#fff;padding:50px 52px 46px;position:relative;z-index:2;box-shadow:0 40px 70px -36px rgba(16,40,26,.5)}
.sv-kfin__card .h2{margin-top:12px}
.sv-kfin__card > p{margin-top:16px;color:var(--body)}
.sv-scale{position:relative;display:block;margin:48px 0 6px}
.sv-scale__bar{display:grid;grid-template-columns:repeat(3,1fr);height:12px;border:1.5px solid var(--ink)}
.sv-scale__bar i:nth-child(1){background:#E3EEE6}
.sv-scale__bar i:nth-child(2){background:#9FC6AC;border-left:1.5px solid var(--ink)}
.sv-scale__bar i:nth-child(3){background:var(--forest);border-left:1.5px solid var(--ink)}
.sv-scale__lbl{display:grid;grid-template-columns:repeat(3,1fr);margin-top:10px;font:600 12px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.sv-scale__lbl b:nth-child(2){text-align:center}
.sv-scale__lbl b:nth-child(3){text-align:right}
.sv-scale__pen{position:absolute;right:0;top:-38px;font-size:27px;transform:rotate(-3deg)}
@media (max-width:999px){
  .sv-kfin__grid{column-gap:0}
  .sv-kfin__card{grid-column:1/13;margin:-90px 0 0 0;padding:38px 32px 34px}
  .sv-kfin__pull{grid-column:1/13;grid-row:2;padding-top:44px}
}
@media (max-width:767px){
  .sv-kfin__photo img{height:auto;aspect-ratio:4/3.4}
  .sv-kfin__card{margin-top:-40px;padding:30px 22px 28px}
  .sv-kfin__pull{font-size:24px;padding-top:36px}
}

/* deep band: the designers quote (kitchen is its only page) and the notes card crossing into the FAQ */
.sv-kword{background:var(--forest);color:#fff;padding:110px 0 0;margin-top:90px;position:relative;z-index:1}
.sv-kword--deep{background:var(--deep)}
.sv-kword__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:start}
.sv-kword__quote{padding-bottom:110px}
.sv-kword__quote blockquote p{margin-top:20px;font:italic 500 clamp(22px,2vw,29px)/1.45 var(--serif);text-indent:-.4em;color:#fff}
/* align-self:end + a negative bottom margin: the card always crosses 100px into the next section, however tall the quote is */
.sv-notes{align-self:end;background:#fff;color:var(--ink);padding:40px 42px 32px;box-shadow:0 44px 80px -30px rgba(0,0,0,.55);margin-bottom:-100px;position:relative;z-index:2;transform:rotate(.6deg)}
.sv-notes__t{font:600 24px/1.15 var(--serif);letter-spacing:-.01em;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.sv-notes__i{padding:16px 0;border-bottom:1px solid var(--rule)}
.sv-notes__i h3{font:600 17.5px/1.3 var(--serif)}
.sv-notes__i p{font-size:15px;line-height:1.55;color:var(--body);margin-top:4px}
.sv-notes__rec{font-size:14px;line-height:1.5;color:var(--stone);margin-top:14px}
@media (max-width:999px){
  .sv-kword{padding-top:76px;margin-top:60px}
  .sv-kword__grid{grid-template-columns:1fr;gap:0}
  .sv-kword__quote{padding-bottom:48px}
  .sv-notes{margin-bottom:-70px}
}
@media (max-width:600px){.sv-notes{padding:28px 20px 22px;transform:none}.sv-kword__quote blockquote p{font-size:21px}}
/* the FAQ after the card: its list starts below the card, its heading sits beside it */
@media (min-width:1000px){.sv-faq--card .faq__list{padding-top:64px}}
@media (max-width:999px){.sv-faq--card{padding-top:130px}}

/* =====================================================================
   BATHROOM: a cutaway of what is behind the tile
   ===================================================================== */
.sv-bcut{background:var(--sage);padding:110px 0 0}
.sv-peel{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);margin-top:64px;align-items:stretch}
.sv-peel__photo{position:relative;z-index:2;display:flex;flex-direction:column;filter:drop-shadow(14px 0 18px rgba(16,40,26,.18))}
.sv-peel__photo img{width:100%;flex:1 1 auto;min-height:560px;height:0;object-fit:cover;object-position:60% 50%;
  clip-path:polygon(0 0,100% 0,97.2% 6%,99.6% 12%,96.4% 19%,99.2% 26%,95.6% 33%,98.8% 41%,95.2% 48%,98.4% 56%,94.8% 63%,98% 71%,94.4% 78%,97.6% 86%,94% 93%,96.8% 100%,0 100%)}
.sv-peel__photo .note{padding:9px 0 12px var(--gut);background:var(--sage)}
.sv-peel__draw{background:#fff;margin-left:-70px;padding:34px var(--edge) 34px 104px;position:relative;z-index:1}
.sv-peel__paper .sv-paper__top{margin-bottom:18px}
.sv-peel .dw .lbl--b{font-size:18px}
.sv-peel .dw .lbl--fine{font-size:15px}
.sv-peel .dw .hand{font-size:31px}
@media (max-width:899px){
  .sv-peel{grid-template-columns:1fr;margin-top:44px}
  .sv-peel__photo{filter:drop-shadow(0 10px 14px rgba(16,40,26,.16))}
  .sv-peel__photo img{min-height:0;height:auto;aspect-ratio:4/3.2;
    clip-path:polygon(0 0,100% 0,100% 95%,93% 98.4%,86% 95.4%,78% 98.8%,70% 95.6%,62% 99%,54% 95.4%,46% 98.6%,38% 95.2%,30% 98.8%,22% 95.6%,14% 98.4%,7% 95.4%,0 98%)}
  .sv-peel__photo .note{background:none;position:relative;z-index:3}
  .sv-peel__draw{margin:-34px 0 0;padding:52px var(--gut) 40px}
}

/* charcoal statement, the floor in section, then the curbless shower itself, full bleed */
.sv-curb{background:var(--coal);color:#fff;padding:110px 0 0}
.sv-curb .label{color:#9FC6AC}
.sv-curb__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(40px,6vw,96px);align-items:end}
.sv-curb__big{margin-top:18px;font:italic 500 clamp(36px,4.4vw,66px)/1.06 var(--serif);letter-spacing:-.022em}
.sv-curb__body{color:rgba(255,255,255,.76);font-size:17.5px}
.sv-curb__draw{display:block;width:100%;height:auto;margin-top:64px}
.sv-curb__draw .w{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sv-curb__draw .w--thin{stroke-width:1;opacity:.5}
.sv-curb__draw .w--dash{stroke-dasharray:5 6;opacity:.7}
.sv-curb__draw .wl{font:600 12.5px var(--sans);letter-spacing:.14em;fill:rgba(255,255,255,.66)}
.sv-curb__photo{margin:34px 0 0}
.sv-curb__photo img{display:block;width:100%;height:clamp(420px,52vw,780px);object-fit:cover;object-position:50% 62%}
.sv-curb__photo .note{color:rgba(255,255,255,.6);padding:10px var(--gut) 16px}
@media (max-width:999px){.sv-curb__grid{grid-template-columns:1fr}.sv-curb{padding-top:80px}}
@media (max-width:600px){.sv-curb__draw{display:none}.sv-curb{padding-top:72px}.sv-curb__big{font-size:36px}.sv-curb__photo{margin-top:40px}.sv-curb__photo img{height:auto;aspect-ratio:4/3.6}}

/* older houses: the list at statement size, Stephen beside it (the quote that used to sit here is the home page's) */
.sv-bold{background:#fff;padding:110px 0 120px}
.sv-bold__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:start}
.sv-bold__h{margin-top:14px;font:600 clamp(24px,2.1vw,31px)/1.18 var(--serif);letter-spacing:-.012em;max-width:620px}
.sv-bold__list{list-style:none;margin:30px 0 0;padding:0;border-top:2px solid var(--ink)}
.sv-bold__list li{padding:16px 0 15px;border-bottom:1px solid var(--rule);font:italic 500 clamp(28px,3vw,44px)/1.14 var(--serif);letter-spacing:-.016em}
.sv-bold__body{margin-top:30px;max-width:620px;color:var(--body);font-size:17.5px}
.sv-bold__steve{justify-self:end;width:100%;max-width:400px;margin:8px 6px 0 0;position:relative;transform:rotate(1.6deg)}
.sv-bold__steve img{width:100%;aspect-ratio:720/780;object-fit:cover;border:9px solid #fff;box-shadow:0 40px 70px -30px rgba(0,0,0,.45),0 0 0 1px var(--rule)}
.sv-bold__steve figcaption{font:500 13.5px/1.4 var(--sans);color:var(--stone);margin-top:12px}
@media (max-width:999px){
  .sv-bold{padding:80px 0 80px}
  .sv-bold__grid{grid-template-columns:1fr;gap:44px}
  .sv-bold__steve{justify-self:start;max-width:320px;margin-left:6px}
}
@media (max-width:600px){.sv-bold__steve{max-width:260px}.sv-bold__list li{font-size:27px}}

.sv-bsmall{background:var(--deep);color:#fff;padding:96px 0}
.sv-bsmall__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center}
.sv-seal{display:block;width:min(100%,330px);margin:0 auto;transform:rotate(-8deg);filter:drop-shadow(0 22px 30px rgba(0,0,0,.35))}
.sv-bsmall .h2{color:#fff;margin-top:14px}
.sv-bsmall__body{margin-top:18px;color:#DCEBE0;font-size:17.5px;max-width:600px}
.sv-bsmall .btn{margin-top:28px}
@media (max-width:899px){.sv-bsmall{padding:72px 0 78px}.sv-bsmall__grid{grid-template-columns:1fr;gap:34px}.sv-seal{width:200px;margin:0}}

/* =====================================================================
   BASEMENT: Stephen's own basement job carries the water-first story
   ===================================================================== */
.sv-water{background:var(--deep);color:#fff;padding:110px 0 0}
.sv-water__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px clamp(48px,7vw,110px);align-items:start}
.sv-water__head{grid-column:1/-1}
.sv-water__big{margin-top:16px;font:600 clamp(44px,5.6vw,84px)/1 var(--serif);letter-spacing:-.032em}
/* the frame sits on the shared left edge and always hangs a set distance into the white below */
.sv-water__steve{position:relative;width:clamp(330px,29vw,440px);justify-self:start;align-self:end;margin-bottom:-190px;z-index:2}
.sv-water__steve img{width:100%;aspect-ratio:720/780;object-fit:cover;border:9px solid #fff;box-shadow:0 40px 70px -30px rgba(0,0,0,.6)}
.sv-water__steve figcaption{font:500 13.5px/1.4 var(--sans);color:var(--stone);margin-top:12px}
.sv-water__pen{position:absolute;left:calc(100% + 26px);bottom:8px;width:210px;font-size:26px;transform:rotate(-4deg);display:flex;align-items:flex-end;gap:8px;color:var(--red)}
.sv-water__pen svg{width:52px;height:40px;flex:none;margin-bottom:22px}
.sv-water__copy{padding:6px 0 72px}
.sv-water__copy p{color:#D6E6DB;font-size:18px;line-height:1.65;max-width:620px}
.sv-water__copy p + p{margin-top:18px}
@media (min-width:1200px){.sv-water__steve{margin-bottom:-230px}}
@media (max-width:899px){
  .sv-water{padding-top:72px}
  .sv-water__grid{grid-template-columns:1fr;gap:22px}
  .sv-water__copy{order:2;padding:0 0 30px}
  .sv-water__steve{order:3;width:auto;max-width:320px;margin-bottom:-150px}
  .sv-water__pen{position:static;width:auto;margin:10px 0 0 30px;font-size:23px;flex-direction:row;align-items:flex-start;transform:rotate(-3deg)}
  .sv-water__pen svg{width:40px;height:32px;margin:-8px 0 0;flex:none;transform:scaleX(-1) rotate(10deg)}
}
@media (max-width:520px){.sv-water__steve{max-width:270px}.sv-water__big{font-size:40px}.sv-water__copy p{font-size:17px}}

.sv-sect{padding:270px 0 110px}
.sv-sect__sheet{margin-top:56px}
/* wide screens: "Outside in" moves up beside the hanging frame instead of starting under it (the 576 x 273 dead corner) */
@media (min-width:1200px){
  .sv-sect{padding-top:64px}
  .sv-head--beside{grid-template-columns:1fr;width:min(620px,45%);margin-left:auto;gap:18px}
  .sv-head--beside .lede{padding-bottom:0}
  .sv-sect__sheet{margin-top:48px}
}
@media (max-width:899px){.sv-sect{padding:220px 0 80px}}

/* what it becomes: the room full bleed, the names on a solid charcoal panel that crosses into it */
.sv-rooms{position:relative;padding:0}
.sv-rooms__panel{position:relative;z-index:2;width:min(820px,64%);background:var(--coal);color:#fff;padding:54px 56px 48px;margin-bottom:-290px;box-shadow:0 44px 80px -36px rgba(0,0,0,.55)}
.sv-rooms .label{color:#9FC6AC}
.sv-rooms__list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline}
.sv-rooms__list li{font:600 clamp(34px,3.7vw,56px)/1.12 var(--serif);letter-spacing:-.028em}
.sv-rooms__list li:nth-child(even){color:#9FC6AC}
.sv-rooms__list li:not(:last-child)::after{content:"/";font-weight:400;color:rgba(255,255,255,.26);margin:0 .26em}
.sv-rooms__foot{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);font:italic 500 clamp(19px,1.6vw,23px)/1.4 var(--serif);color:rgba(255,255,255,.82)}
.sv-rooms__photo{margin:0}
.sv-rooms__img{position:relative}
.sv-rooms__img img{display:block;width:100%;height:clamp(600px,58vw,860px);object-fit:cover;object-position:62% 55%}
.sv-rooms__img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(35,40,38,.34),rgba(35,40,38,.08) 60%,rgba(35,40,38,0))}
.sv-rooms__photo .note{padding:10px var(--gut) 0;text-align:right}
@media (max-width:999px){.sv-rooms__panel{width:min(720px,86%)}}
@media (max-width:767px){
  .sv-rooms__panel{width:auto;padding:34px 22px 30px;margin:0 calc(-1 * var(--gut)) -44px}
  .sv-rooms__list li{font-size:30px}
  .sv-rooms__img img{height:auto;aspect-ratio:4/3.6}
  .sv-rooms__photo .note{text-align:left}
}

/* =====================================================================
   WHOLE-HOME: the bare frame, then the finished room, then the order of the job
   ===================================================================== */
.sv-pairsec{padding:110px 0 120px}
.sv-pair{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;margin-top:64px;position:relative}
.sv-pair figure{margin:0}
.sv-pair img{width:100%;aspect-ratio:4/3.1;object-fit:cover}
.sv-pair__tag{font:600 clamp(30px,3vw,46px)/1 var(--serif);letter-spacing:-.022em;margin-bottom:18px}
.sv-pair__a .sv-pair__tag{padding-left:var(--edge)}
.sv-pair__a .note{padding-left:var(--gut)}
.sv-pair .sv-pair__b{margin-top:72px}
.sv-pair__b .note{text-align:right;padding-right:var(--gut)}
.sv-pair__pen{position:absolute;top:6px;left:calc(50% + 12px);width:min(430px,40vw);display:flex;flex-direction:column;align-items:flex-start;font-size:28px;transform:rotate(-3deg)}
/* the arrow starts in the gap, clear of the "Opened up" photo's edge */
.sv-pair__pen svg{width:150px;height:60px;margin:6px 0 0 0}
@media (max-width:767px){
  .sv-pairsec{padding:72px 0 80px}
  .sv-pair{grid-template-columns:1fr;margin-top:44px}
  .sv-pair__tag{padding-left:var(--gut);margin-bottom:12px}
  .sv-pair__a .sv-pair__tag{padding-left:var(--gut)}
  .sv-pair .sv-pair__b{margin-top:0}
  .sv-pair__pen{position:static;width:auto;margin:20px var(--gut) 18px auto;align-items:flex-end;font-size:25px}
  .sv-pair__pen svg{width:70px;height:50px;margin:2px 10px 0 0;transform:rotate(60deg)}
}

.sv-found{background:var(--coal);color:#fff;padding:110px 0 120px}
.sv-found .label{color:#9FC6AC}
.sv-found__list{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline}
.sv-found__list li{font:600 clamp(32px,4.4vw,66px)/1.14 var(--serif);letter-spacing:-.025em}
.sv-found__list li:not(:last-child)::after{content:",";margin-right:.3em;color:rgba(255,255,255,.4)}
.sv-found__list li:last-child::after{content:".";color:rgba(255,255,255,.4)}
.sv-found__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(40px,6vw,96px);margin-top:64px;padding-top:40px;border-top:1px solid rgba(255,255,255,.18);align-items:start}
.sv-found__big{font:italic 500 clamp(28px,3vw,44px)/1.15 var(--serif)}
.sv-found__copy > p:not(.sv-found__big){margin-top:22px;color:rgba(255,255,255,.76);font-size:17.5px}
@media (max-width:899px){.sv-found{padding:72px 0 80px}.sv-found__grid{grid-template-columns:1fr;margin-top:44px;gap:44px}.sv-found__list li{font-size:clamp(30px,8.4vw,44px)}}
/* phones: one finding per line, words kept together */
@media (max-width:600px){.sv-found__list{display:block}.sv-found__list li{display:block;font-size:27px;line-height:1.2;padding:3px 0}}

/* the year the towns' houses were built, against the 1978 lead-paint line */
.sv-yr{margin:0}
.sv-yr__t{font:600 12.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#9FC6AC;margin-bottom:12px}
.sv-yr svg{display:block;width:100%;height:auto;overflow:visible}
.sv-yr .sv-yr__m{display:none}
.sv-yr .dim{fill:none;stroke:#FF8A7A;stroke-width:1.8;stroke-linecap:round}
.sv-yr .ax{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.6}
.sv-yr .tk{stroke:rgba(255,255,255,.42);stroke-width:1.2}
.sv-yr .yt{font:500 14px var(--sans);fill:rgba(255,255,255,.55)}
.sv-yr .rl{fill:none;stroke:#FF8A7A;stroke-width:2;stroke-dasharray:6 5}
.sv-yr .rt{font:700 13px var(--sans);letter-spacing:.06em;fill:#FF8A7A}
.sv-yr .dt{fill:#fff}
.sv-yr .ld{stroke:rgba(255,255,255,.38);stroke-width:1}
.sv-yr .nm{font:600 20px var(--serif);fill:#fff}
.sv-yr .yr{font:600 14px var(--sans);letter-spacing:.04em;fill:#9FC6AC}
.sv-yr .pn{font:700 25px var(--hand);fill:#FFB3A8}
.sv-yr__take{margin-top:20px;font:italic 500 clamp(19px,1.6vw,23px)/1.4 var(--serif);color:#fff}
.sv-yr__src{font:500 13px/1.45 var(--sans);color:#9FC6AC;margin-top:8px}
@media (max-width:767px){
  .sv-yr .sv-yr__d{display:none}
  .sv-yr .sv-yr__m{display:block;max-width:420px}
  .sv-yr__m .nm{font-size:20px}
  .sv-yr__m .yr{font-size:14px}
  .sv-yr__m .yt{font-size:14px}
  .sv-yr__m .pn{font-size:23px}
}

.sv-cassec{background:var(--forest);color:#fff;padding:110px 0 120px}
.sv-cassec__h{color:#fff;margin-top:14px;max-width:980px}
.sv-casw{position:relative}
.sv-cas__note{position:absolute;left:0;bottom:6px;width:calc(3 / 7 * 100% - 40px);font:italic 500 clamp(19px,1.6vw,23px)/1.45 var(--serif);color:var(--pale)}
.sv-cas{list-style:none;margin:70px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:8px}
.sv-cas li{position:relative;padding:24px 22px 10px 0}
.sv-cas li::before{content:"";position:absolute;left:0;right:6px;top:0;height:9px;background:rgba(255,255,255,.92)}
.sv-cas li:last-child::before{background:var(--pale)}
.sv-cas b{display:block;font:600 clamp(20px,1.7vw,25px)/1.15 var(--serif);letter-spacing:-.01em}
.sv-cas span{display:block;margin-top:6px;font-size:15px;line-height:1.5;color:#D6E6DB;max-width:320px}
@media (max-width:899px){
  .sv-cassec{padding:72px 0 80px}
  .sv-cas{grid-template-columns:1fr;margin-top:44px;row-gap:14px}
  .sv-cas li{grid-column:1/-1 !important;margin-left:calc(var(--i) * 14px);padding:20px 0 6px}
  .sv-cas__note{position:static;width:auto;margin-top:34px;font-size:20px}
}

/* before work begins: the photographs quote (whole-home is its only page) beside the intro video it comes from */
.sv-live{padding:120px 0}
.sv-live__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:start}
.sv-live__quote blockquote p{margin-top:18px;font:italic 500 clamp(28px,3.1vw,46px)/1.2 var(--serif);letter-spacing:-.016em;text-indent:-.4em}
.sv-live__side{margin-top:44px;padding-top:26px;border-top:1px solid var(--rule);max-width:560px}
.sv-live__side > p{margin-top:12px;color:var(--body)}
.sv-live__media{padding-top:8px}
.sv-vid{margin:0;max-width:480px}
.sv-vid video{display:block;width:100%;height:auto;aspect-ratio:3/2;background:#1B231E;border:9px solid #fff;box-shadow:0 40px 70px -30px rgba(16,40,26,.5),0 0 0 1px var(--rule)}
.sv-vid figcaption{font:500 13.5px/1.4 var(--sans);color:var(--stone);margin-top:12px}
.sv-rec{margin-top:36px;max-width:480px;background:var(--sage);padding:26px 28px 22px}
.sv-rec__t{font:600 12.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
.sv-rec__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 18px;align-items:baseline;margin-top:14px;padding:16px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.sv-rec__yr{font:600 19px/1 var(--serif)}
.sv-rec__yr small{display:block;font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--stone);margin-top:6px}
.sv-rec__w{font-size:15.5px;line-height:1.45}
.sv-rec__amt{font:600 22px/1 var(--serif);color:var(--forest)}
.sv-rec__fine{font-size:12.5px;color:var(--stone);margin-top:10px}
@media (max-width:899px){.sv-live{padding:76px 0}.sv-live__grid{grid-template-columns:1fr;gap:44px}}
@media (max-width:600px){.sv-rec{padding:22px 18px 18px}.sv-rec__row{grid-template-columns:minmax(0,1fr) auto}.sv-rec__w{grid-column:1/3;grid-row:2}.sv-live__quote blockquote p{font-size:27px}}

/* =====================================================================
   the tail: one large "next job" tile, a one-line row of the other services
   ===================================================================== */
.sv-next{background:var(--sage);padding:88px 0 72px;overflow:hidden}
.sv-next__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;align-items:center}
.sv-next__copy{grid-column:1/6;padding-right:12px}
.sv-next__copy .h2{margin-top:14px}
.sv-next__copy > p{margin-top:18px;color:var(--body);font-size:18px;line-height:1.6;max-width:470px}
.sv-next__copy .more{margin-top:28px}
.sv-next__tile{grid-column:6/13;margin:0 calc(-1 * var(--edge)) 0 0}
.sv-next__tile .tile__pic{height:clamp(320px,31vw,460px)}
.sv-next__tile .tile__txt{left:36px;right:36px;bottom:30px}
.sv-next__tile .tile__txt h3{font-size:clamp(34px,3.6vw,56px)}
.sv-next__tile .note{display:block}
.sv-next__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 34px;margin-top:48px;padding-top:22px;border-top:1px solid var(--rule)}
.sv-next__row .label{margin-right:4px}
.sv-next__row a{font:600 clamp(19px,1.5vw,22px)/1.2 var(--serif);letter-spacing:-.008em;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--forest);padding-bottom:3px}
.sv-next__row a:hover{color:var(--forest)}
@media (max-width:999px){
  .sv-next{padding:76px 0 64px}
  .sv-next__copy{grid-column:1/13;padding:0}
  .sv-next__tile{grid-column:1/13;margin:40px calc(-1 * var(--gut)) 0}
  .sv-next__tile .note{padding-left:var(--gut)}
  .sv-next__tile .tile__txt{left:var(--gut);right:var(--gut);bottom:22px}
}
@media (max-width:600px){
  .sv-next__tile .tile__pic{height:auto;aspect-ratio:4/3.3}
  .sv-next__tile .tile__txt h3{font-size:32px}
  .sv-next__row{gap:10px 22px;margin-top:44px}
  .sv-next__row .label{width:100%}
}

/* =====================================================================
   start band: page-specific close line and a fragment of the page's own drawing
   ===================================================================== */
.sv-start__close{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.22);font:italic 500 clamp(20px,1.7vw,24px)/1.4 var(--serif);color:#fff;max-width:480px}
.sv-frag{margin-top:24px;max-width:380px}
.sv-frag svg{display:block;width:100%;height:auto}
.sv-frag .w{fill:none;stroke:#fff;stroke-opacity:.55;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sv-frag .w--wall{stroke-width:5;stroke-opacity:.5}
.sv-frag .w--f{stroke-opacity:.3;stroke-width:1.1}
.sv-frag .w--h{stroke-opacity:.35;stroke-width:1}
.sv-frag .w--d{fill:#fff;fill-opacity:.4}
.sv-frag .r{fill:none;stroke:#FF8A7A;stroke-width:2.2;stroke-dasharray:7 6;stroke-linecap:round;stroke-linejoin:round}
.sv-frag .r--solid{stroke-dasharray:none;stroke-width:2.4}
.sv-frag .b{fill:#fff;fill-opacity:.85}
.sv-frag .b--last{fill:var(--pale);fill-opacity:1}
.sv-frag{position:relative}
.sv-frag .pen{color:#FFB3A8;font-size:25px;transform:rotate(-3deg);margin-top:6px;white-space:nowrap}
.sv-frag--kitchen .pen{margin-left:190px;margin-top:2px}
.sv-frag--bath .pen,.sv-frag--base .pen,.sv-frag--whole .pen{position:absolute;margin:0}
.sv-frag--bath .pen{left:57%;top:36%;white-space:normal;width:40%;line-height:1}
.sv-frag--base .pen{left:55%;top:8%}
.sv-frag--whole .pen{left:1%;top:74%}
@media (max-width:600px){
  .sv-frag{max-width:330px}
  .sv-frag .pen{font-size:23px}
  .sv-frag--kitchen .pen{margin-left:160px}
}
.sv-formby{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sv-formby img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 25%;flex:none}
.sv-formby p{font-size:13px;line-height:1.4;color:var(--stone)}
.sv-formby b{display:block;font:italic 500 16.5px/1.2 var(--serif);color:var(--ink)}
.form__fine a{color:var(--forest)}
.faq__side .lede a{white-space:nowrap}