/* Tal's infographics as page sections: the two shared by the homepage and every inspection page,
   and the remediation one at the end (every remediation page).
   Markup: scripts/infographics.mjs. Titles follow the site: Manrope 800 at -0.03em.

   Both are self-contained: the homepage loads this after css/style.css, the city pages after
   geo.css, and neither order nor either base sheet changes how these sections look. */

/* ---- "How it works": Tal's artwork, rebuilt as live text around its three photographs ----
   Greens are sampled from the artwork (marker #387c4c, rail #4a9470, button #2d6f42). */
.how{background:#fff;padding:84px 0 78px;font-family:'Public Sans',system-ui,sans-serif;color:#4a4f49}
.how-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:38px}
.how h2{font-family:'Manrope',sans-serif;font-size:clamp(32px,4.1vw,50px);font-weight:800;line-height:1.02;letter-spacing:-.03em;color:#0b110d;margin:0}
.how-lede{flex:none;font-size:20px;line-height:1.45;color:#4a4f49;margin:0 0 8px;width:min(100%,23.6em)}
.how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:26px}
.how-steps li{display:flex;flex-direction:column;min-width:0}
.how-steps img{display:block;width:100%;height:auto;border-radius:16px;background:#eef1ee}
/* the numbered marker sits on the photograph's lower edge; its rail runs on to the next step */
.how-rail{display:flex;align-items:center;gap:11px;margin:-5px 0 13px}
.how-n{flex:none;width:40px;height:40px;border-radius:50%;background:#387c4c;color:#fff;font-family:'Manrope',sans-serif;font-weight:800;font-size:21px;line-height:1;display:grid;place-items:center;box-shadow:0 0 0 4px #fff;position:relative}
.how-line{flex:1;height:2px;background:#4a9470;position:relative;border-radius:2px}
.how-line::after{content:"";position:absolute;right:1px;top:50%;width:9px;height:9px;border-top:2px solid #4a9470;border-right:2px solid #4a9470;transform:translateY(-50%) rotate(45deg)}
.how-steps li:last-child .how-line::after{display:none}
.how-steps h3{font-family:'Manrope',sans-serif;font-size:25px;font-weight:800;line-height:1.15;letter-spacing:-.03em;color:#0b110d;margin:0 0 8px}
.how-steps li>p{font-size:16.5px;line-height:1.55;margin:0 0 18px;max-width:27em}
.how-steps li>p.how-pill{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;margin:auto 0 0;background:#f1f5f1;color:#1f5a37;font-size:14.5px;font-weight:500;line-height:1.3;padding:8px 20px 8px 11px;border-radius:999px}
.how-pill svg{flex:none;color:#2f7a4b}
.how-cta{display:flex;align-items:center;gap:26px;margin-top:36px;padding-top:24px;border-top:1px solid #d3d7d1}
.how-ready{font-family:'Manrope',sans-serif;font-size:27px;font-weight:800;line-height:1.15;letter-spacing:-.03em;color:#0b110d;margin:0 auto 0 0}
.how-btn{display:inline-flex;align-items:center;gap:12px;background:#2d6f42;color:#fff;font-size:18px;font-weight:700;line-height:1.2;padding:15px 30px;border-radius:999px;white-space:nowrap;transition:background-color .15s}
.how-btn:hover{background:#245a36;color:#fff}
.how-btn:focus-visible{outline:3px solid #0b110d;outline-offset:3px}
.how-aside{font-size:14.5px;line-height:1.4;color:#4a4f49;margin:0;padding:10px 0 10px 26px;border-left:1px solid #c9cdc7;white-space:nowrap}

@media (max-width:1020px){
  .how{padding:68px 0 64px}
  .how-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:30px}
  .how-lede{margin:0}
  .how-steps{column-gap:20px}
  .how-steps h3{font-size:22px}
  .how-steps li>p{font-size:15.5px}
  .how-cta{flex-wrap:wrap;gap:18px 26px}
  .how-ready{flex-basis:100%}
}
@media (max-width:760px){
  .how-steps{grid-template-columns:minmax(0,1fr);row-gap:38px}
  .how-steps img{max-width:520px}
  .how-line::after{display:none}                     /* stacked: the steps run downwards, so the rail carries no arrow */
  .how-steps h3{font-size:24px}
  .how-steps li>p{font-size:16.5px}
  .how-steps li>p.how-pill{margin-top:0}
  .how h2 br{display:none}
}
@media (max-width:640px){
  .how{padding:56px 0 56px}
  .how-lede{font-size:18px}
  .how-cta{flex-direction:column;align-items:stretch;gap:14px;margin-top:34px}
  .how-ready{font-size:25px}
  .how-btn{justify-content:center}
  .how-aside{border-left:0;padding:0;text-align:center;white-space:normal}
}

/* ---- "What a mold inspection covers": Tal's infographic ----
   The top is one picture, lettering included. The four boxes and the call row are live text
   drawn to match it; the greens and grounds below are sampled from the artwork. */
.covers{--mint:#63e781;--ground:#091b12;background:var(--ground);padding:44px 0 60px;font-family:'Public Sans',system-ui,sans-serif;color:#cfdcd5;overflow:hidden}
.covers .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.covers-art img{display:block;width:100%;height:auto}
/* the picture was drawn to run off the left and bottom of its sheet, and its ground is a shade lighter in the middle
   than at the rim; all four edges melt into the section's ground so no seam shows */
.covers-art-wide{-webkit-mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - 16px),transparent),linear-gradient(to right,transparent,#000 3.4%,#000 99%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - 16px),transparent),linear-gradient(to right,transparent,#000 3.4%,#000 99%,transparent);mask-composite:intersect}
.covers .slice-house{-webkit-mask-image:linear-gradient(#000 calc(100% - 16px),transparent);mask-image:linear-gradient(#000 calc(100% - 16px),transparent)}
.covers-art-phone{display:none}
/* a phone piece: a window onto the same picture. --x/--y/--w/--h are that window in the picture's own pixels (1672 x 612) */
.covers .slice{display:block;position:relative;overflow:hidden;aspect-ratio:var(--w) / var(--h)}
.covers .slice img{position:absolute;max-width:none;width:calc(1672 / var(--w) * 100%);left:calc(var(--x) / var(--w) * -100%);top:calc(var(--y) / var(--h) * -100%)}

.covers-steps{list-style:none;margin:0;padding:0 1.75%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.covers-steps li{display:grid;grid-template-columns:auto auto minmax(0,1fr);column-gap:11px;align-items:start;background:#061810;border:1px solid rgba(99,231,129,.27);border-radius:16px;padding:16px 14px 18px 14px}
.covers-steps .n{width:32px;height:32px;border-radius:50%;background:var(--mint);color:#04140b;font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;line-height:1;display:grid;place-items:center}
.covers-steps li>img{width:46px;height:auto;display:block;margin-top:2px}
.covers-steps h3{font-family:'Manrope',sans-serif;font-size:15.5px;font-weight:800;letter-spacing:-.03em;line-height:1.25;color:#fff;margin:5px 0 7px;text-wrap:balance}
.covers-steps p{font-size:13.5px;line-height:1.5;color:#cfdcd5;margin:0}

.covers-cta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px 36px;margin:22px 1.75% 0;padding-top:20px;border-top:1px solid rgba(99,231,129,.22)}
.covers-btn{display:inline-flex;align-items:center;gap:12px;background:var(--mint);color:#04140b;font-size:18px;font-weight:800;line-height:1.2;padding:15px 36px;border-radius:999px;transition:background-color .15s}
.covers-btn:hover{background:#82f09c;color:#04140b}
.covers-call{display:inline-flex;align-items:center;gap:12px;color:var(--mint);font-size:27px;font-weight:800;line-height:1.2;padding-left:36px;border-left:1px solid rgba(99,231,129,.38);white-space:nowrap}
.covers-call:hover{color:#82f09c}
.covers-call span{color:#fff}
.covers-call svg{width:30px;height:30px}
.covers-btn:focus-visible,.covers-call:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media (max-width:1100px){
  .covers-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .covers-steps li{column-gap:14px;padding:18px 18px 20px 16px}
  .covers-steps h3{font-size:16.5px}
  .covers-steps p{font-size:14.5px}
}
@media (max-width:640px){
  .covers{padding:36px 0 48px}
  .covers-art-wide{display:none}
  .covers-art-phone{display:block}
  .covers .slice-tagline{margin-top:10px}
  .covers .slice-house{margin:10px -24px 0}          /* runs off both edges of the screen, so its cut sides read as the frame */
  .covers .slice-cards{margin-top:4px}
  .covers-steps{grid-template-columns:minmax(0,1fr);padding:0;margin-top:14px;gap:10px}
  .covers-steps li>img{width:48px}
  .covers-cta{flex-direction:column;margin:22px 0 0;gap:16px}
  .covers-btn{font-size:17px;padding:15px 26px;width:100%;justify-content:center}
  .covers-call{border-left:0;padding-left:0;font-size:25px}
}

/* ---- "How mold remediation works in {City}": Tal's remediation infographic ----
   The house is one picture, callouts included. The title block above it and items 1-4 below it
   are live text set to match the artwork; mint and grounds are sampled from it. */
.jobsheet{--mint:#3af96f;--ground:#05120d;background:var(--ground);padding:66px 0 64px;font-family:'Public Sans',system-ui,sans-serif;color:#d3dbd8;overflow:hidden}
.jobsheet-head{display:flex;align-items:center;gap:clamp(28px,4.4vw,58px);margin-bottom:6px}
.jobsheet-head>div{flex:0 1 auto;min-width:0}
.jobsheet-eyebrow{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:500;line-height:1.6;letter-spacing:.2em;text-transform:uppercase;color:#6fd08f;margin:0 0 12px}
.jobsheet h2{font-family:'Manrope',sans-serif;font-size:clamp(30px,3.9vw,48px);font-weight:800;line-height:1.04;letter-spacing:-.03em;color:#fff;margin:0;text-wrap:balance}
.jobsheet h2 em{font-style:normal;color:var(--mint)}
.jobsheet-lede{flex:0 1 auto;font-size:clamp(17px,1.6vw,19.5px);line-height:1.45;color:#d6dedd;margin:0;padding:6px 0 6px clamp(22px,3vw,38px);border-left:1px solid rgba(72,140,99,.95)}
.jobsheet-art img{display:block;width:100%;height:auto}
/* the picture runs off its sheet on every side and its sky is a shade off the section's ground: all four edges melt into it */
.jobsheet-art-wide{-webkit-mask-image:linear-gradient(transparent,#000 22px,#000 calc(100% - 14px),transparent),linear-gradient(to right,transparent,#000 3%,#000 98.2%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(transparent,#000 22px,#000 calc(100% - 14px),transparent),linear-gradient(to right,transparent,#000 3%,#000 98.2%,transparent);mask-composite:intersect}
.jobsheet-art-phone{display:none}
/* a phone piece: a window onto the same picture. --x/--y/--w/--h are that window in the picture's own pixels (1672 x 638) */
.jobsheet .slice{display:block;position:relative;overflow:hidden;aspect-ratio:var(--w) / var(--h)}
.jobsheet .slice-clearance{-webkit-mask-image:linear-gradient(transparent,#000 8px,#000 calc(100% - 14px),transparent),linear-gradient(to right,transparent,#000 8px,#000 calc(100% - 8px),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(transparent,#000 8px,#000 calc(100% - 14px),transparent),linear-gradient(to right,transparent,#000 8px,#000 calc(100% - 8px),transparent);mask-composite:intersect}
.jobsheet .slice img{position:absolute;max-width:none;width:calc(1672 / var(--w) * 100%);left:calc(var(--x) / var(--w) * -100%);top:calc(var(--y) / var(--h) * -100%)}

.jobsheet-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.jobsheet-steps li{display:grid;grid-template-columns:auto auto minmax(0,1fr);column-gap:13px;align-items:start;padding:4px 14px 6px;border-left:1px solid rgba(99,231,129,.26)}
.jobsheet-steps li:first-child{border-left:0;padding-left:0}
.jobsheet-steps li:last-child{padding-right:0}
.jobsheet-steps .n{width:34px;height:34px;border-radius:50%;background:var(--mint);color:#04140b;font-family:'Manrope',sans-serif;font-weight:800;font-size:18.5px;line-height:1;display:grid;place-items:center;margin-top:5px}
.jobsheet-steps svg{width:44px;height:44px;display:block;color:#fff}
.jobsheet-steps svg .tick{stroke:var(--mint);stroke-width:3.1}
.jobsheet-steps h3{font-family:'Manrope',sans-serif;font-size:16.5px;font-weight:800;letter-spacing:-.03em;line-height:1.25;color:#fff;margin:3px 0 6px}
.jobsheet-steps p{font-size:14px;line-height:1.5;color:#d3dbd8;margin:0}

/* four columns only at the full 1192px wrap; below it they fall to two, each with room for a one-line title */
@media (max-width:1239px){
  .jobsheet-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
  .jobsheet-steps li,.jobsheet-steps li:last-child{padding:4px 24px 6px}
  .jobsheet-steps li:nth-child(odd){border-left:0;padding-left:0}
  .jobsheet-steps li:nth-child(even){padding-right:0}
  .jobsheet-steps h3{font-size:17.5px}
  .jobsheet-steps p{font-size:15px}
}
@media (max-width:1020px){
  .jobsheet-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:14px}
  .jobsheet-lede{padding:2px 0 2px 18px}
}
/* tablets: the whole picture would shrink its drawn lettering below a phone's, so the two close-ups
   stand side by side instead; each grows by its own width/height ratio, so both share one height */
@media (min-width:641px) and (max-width:900px){
  .jobsheet-art-wide{display:none}
  .jobsheet-art-phone{display:flex;align-items:flex-start;gap:14px;margin-top:10px}
  .jobsheet .slice-work{flex:1.740 1 0;min-width:0;-webkit-mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - 16px),transparent),linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - 16px),transparent),linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect}
  .jobsheet .slice-clearance{flex:.763 1 0;min-width:0}
}
@media (max-width:640px){
  .jobsheet{padding:52px 0 50px}
  .jobsheet h2 br,.jobsheet-lede br{display:none}
  .jobsheet-lede{font-size:17px}
  .jobsheet-art-wide{display:none}
  .jobsheet-art-phone{display:block}
  .jobsheet .slice-work{margin:8px -24px 0;-webkit-mask-image:linear-gradient(transparent,#000 18px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(transparent,#000 18px,#000 calc(100% - 16px),transparent)}   /* runs off both edges of the screen, so its cut sides read as the frame */
  .jobsheet .slice-clearance{width:min(66%,232px);margin:4px auto 0}
  .jobsheet-steps{grid-template-columns:minmax(0,1fr);row-gap:0;margin-top:22px}
  .jobsheet-steps li,.jobsheet-steps li:last-child,.jobsheet-steps li:nth-child(odd),.jobsheet-steps li:nth-child(even){border-left:0;border-top:1px solid rgba(99,231,129,.22);padding:18px 0 18px}
  .jobsheet-steps li:first-child{border-top:0;padding-top:4px}
  .jobsheet-steps li:last-child{padding-bottom:0}
  .jobsheet-steps h3{font-size:18px}
  .jobsheet-steps p{font-size:15.5px}
}