/* =============================================================================
   Home IQ Inspections, shared design system
   Extracted from mockup/redesign-c.html so every page in mockup/site/ inherits
   the same tokens and components. Edit here, not per page.

   Single theme, deliberately: deep ink bands on white paper with warm limestone
   breaks. Every surface paints its own color.
   ========================================================================== */

/* Self-hosted fonts (latin subset, variable). Google serves each family as one variable
   file, so one file covers every weight below: Archivo 100 to 900 upright, Source Serif 4
   italic 400 to 600 with the optical-size axis. Body text preloads the Archivo file. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/archivo-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400 600;font-display:swap;src:url(../fonts/source-serif-4-italic-latin-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#015486;        /* Home IQ blue, sampled from the logo */
  --ink-2:#0A4A74;
  --ink-deep:#013A5E;
  --paper:#FFFFFF;
  --stone:#EEEBE4;      /* limestone break */
  --stone-2:#DCD7CC;
  --mark:#4AB847;       /* Home IQ green, sampled from the logo. Booking action and markers only. */
  --mark-hover:#3D9D3B;
  --on-mark:#01324F;    /* ink text on the green button: 5.5:1, passes AA. White on this green fails. */
  --text:#1B1F24;
  --muted:#5B6570;
  --sky:#cfd8e3;        /* secondary text on ink */
  --sky-2:#dfe6ee;
  --maxw:1240px;
  --maxw-hero:1360px;   /* hero copy and the top bar sit on a wider column */
  --gutter:clamp(20px,5vw,64px);
  --radius:4px;
  --bar-h:80px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased}
.skip{position:absolute;left:-999px;top:8px;background:#015486;color:#fff;padding:10px 14px;z-index:100}.skip:focus{left:8px}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:3px solid var(--mark);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* headline pattern: light opener, bold payoff */
h2{font-size:clamp(30px,4.2vw,48px);line-height:1.08;letter-spacing:-.015em;font-weight:300;color:var(--ink);text-wrap:balance}
h2 b{font-weight:700}
h3{font-size:clamp(20px,2.2vw,26px);line-height:1.2;font-weight:700;color:var(--ink);letter-spacing:-.01em}
p{max-width:min(62ch,100%)}

/* Narrow-screen safety net. Grid items default to min-width:auto, so a child with a
   wide min-content size (a minmax() track, a table, a long token) pushes the whole
   column past the viewport instead of shrinking. Every grid child below opts out.
   Removing these reintroduces horizontal scrolling on phones. */
.split>*,.trust-grid>*,.area-grid>*,.entry>*,.childcards>*,.steps>*,.step>*,.connect .wrap>*,footer .wrap>*,.topbar__in>*{min-width:0}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--muted);font-weight:300}
.section{padding:clamp(64px,9vw,120px) 0}
.section--tight{padding:clamp(44px,6vw,80px) 0}
/* Two sections that share a background have no band edge between them, so the doubled padding
   reads as dead space rather than rhythm. Where that happens the seam collapses to a single gap,
   the preceding section's padding-bottom. Ground groups: stone = trust/who/reviews,
   ink = process/connect, paper = every other .section or .section--tight. Seven places use this:
   index (trust then who), the four stage pages (section then section--tight), articles, contact. */
:is(.trust,.who,.reviews) + :is(.trust,.who,.reviews),
:is(.process,.connect,.thermal) + :is(.process,.connect,.thermal),
:is(.section,.section--tight):not(.trust,.who,.reviews,.process,.connect,.thermal) + :is(.section,.section--tight):not(.trust,.who,.reviews,.process,.connect,.thermal){padding-top:0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(28px,4vw,48px);flex-wrap:wrap}
/* links: navy medium weight with a light green hairline underneath, which reads as a link
   without the heavy bar; the line goes solid green on hover. Sidebar links drop the underline
   and take a green arrow instead. External links get a small outward mark. */
.link{font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(74,184,71,.5);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:text-decoration-color .15s,color .15s}
.link:hover{text-decoration-color:var(--mark);color:var(--ink-deep)}
.page-head .link,.process .link,.connect .link{color:#fff}
.page-head .link:hover,.process .link:hover,.connect .link:hover{color:var(--sky-2)}
.link[target="_blank"]::after{content:"\2197";font-size:.8em;margin-left:3px;color:var(--mark-hover)}
.aside dd .link{text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.aside dd .link::after{content:"\203A";color:var(--mark);font-size:1.15em;line-height:1;transition:transform .15s}
.aside dd .link[target="_blank"]::after{content:"\2197";font-size:.8em}
.aside dd .link:hover::after{transform:translateX(3px)}
.tnum{font-variant-numeric:tabular-nums}
/* no width:max-content here. Inside a grid item the percentage in max-width can resolve
   against an indefinite area, so a long note escapes the viewport. inline-block already
   shrink-wraps, and fit-content clamps it to the space actually available. */
.sample{display:inline-block;width:fit-content;max-width:100%;font-size:12px;font-weight:500;color:var(--muted);border:1px dashed var(--stone-2);padding:4px 7px;border-radius:var(--radius)}
.on-dark .sample{color:var(--sky);border-color:rgba(255,255,255,.3)}

/* reveal on scroll (homepage): the script adds .rv to section heads, tiles, cards and columns, then
   .in as each enters view, with --d staggering siblings. The classes are removed again once the
   transition ends so hover transitions on the element are untouched afterwards. Nothing depends on
   it: without script the class is never added, and reduced motion shows everything at rest. */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* the green rule from the logo, used as the section device across the site */
.rule{width:56px;height:4px;background:var(--mark);border-radius:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:500;font-size:15px;padding:14px 22px;border-radius:var(--radius);border:1.5px solid transparent;transition:background .15s,color .15s,border-color .15s;cursor:pointer}
.btn-book{background:var(--mark);color:var(--on-mark)}
.btn-book:hover{background:var(--mark-hover)}
.btn-ghost{border-color:currentColor;color:var(--ink)}
.btn-ghost.on-dark{color:#fff}
.btn-ghost:hover{background:rgba(1,84,134,.06)}
.btn-ghost.on-dark:hover{background:rgba(255,255,255,.12)}

/* =============================================================================
   NAVIGATION
   A slim fixed top bar at every size: logo, phone, Book, hamburger. The menu
   stays hidden until opened, then slides in from the right as a drawer. Nothing
   splits the screen. Transparent over the homepage hero (`.topbar` + the
   `past-hero` body class); solid ink everywhere else (`.topbar.solid`).
   ========================================================================== */
.logo-h{display:block;width:100%;height:auto;aspect-ratio:2040/540}
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--bar-h);color:#fff;background:transparent;transition:background .3s}
/* over the hero: a soft scrim from the top edge so the logo and links sit cleanly on any photo */
.topbar::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:linear-gradient(rgba(1,50,79,.62),rgba(1,50,79,.28) 55%,rgba(1,50,79,0));pointer-events:none;z-index:-1;transition:opacity .3s}
body.past-hero .topbar::before,.topbar.solid::before{opacity:0}
body.past-hero .topbar,.topbar.solid{background:var(--ink);box-shadow:inset 0 -1px 0 rgba(255,255,255,.12)}
body.has-bar{padding-top:var(--bar-h)}
/* the bar's contents sit on the same column as the page, so the logo lines up with the headline below:
   the hero column on the homepage (transparent bar over the slider), the content column everywhere else */
.topbar__in{max-width:var(--maxw-hero);height:100%;display:flex;align-items:center;justify-content:space-between;gap:44px}
.topbar.solid .topbar__in{max-width:var(--maxw)}
.topbar .logo-h{--logo-w:232px;width:var(--logo-w)} /* the PNG is trimmed to the mark's edge, so it sits flush on the column */
.topbar .right{display:flex;align-items:center;gap:22px}
/* primary links: desktop only; the burger keeps the full tree everywhere */
.topbar .primary{display:none}
@media (min-width:1280px){
  .topbar .primary{display:flex;align-items:center;gap:24px;height:100%;margin-right:10px;padding-right:22px;border-right:1px solid rgba(255,255,255,.22)}
  .topbar .right:has(.primary) .menu{display:none} /* the link row plus the dropdown replaces the burger on desktop */
  .topbar .primary>a,.topbar .primary .has-sub>a{color:#fff;font-size:15px;font-weight:500;letter-spacing:.01em;padding:6px 0;position:relative;white-space:nowrap;text-shadow:0 1px 4px rgba(1,50,79,.55)}
  .topbar.solid .primary>a,.topbar.solid .primary .has-sub>a,body.past-hero .topbar .primary>a,body.past-hero .topbar .primary .has-sub>a{text-shadow:none}
  .topbar .primary>a::after,.topbar .primary .has-sub>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mark);transform:scaleX(0);transform-origin:left;transition:transform .18s}
  .topbar .primary>a:hover::after,.topbar .primary .has-sub:hover>a::after,.topbar .primary .has-sub:focus-within>a::after{transform:scaleX(1)}
  .topbar .primary .has-sub{position:relative;height:100%;display:flex;align-items:center}
  .topbar .primary .has-sub>a{padding-right:16px}
  .topbar .primary .has-sub>a::before{content:"";position:absolute;right:2px;top:50%;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg)}
  .topbar .primary .drop{position:absolute;top:100%;left:-18px;min-width:250px;background:var(--ink-deep);padding:10px 0;display:none;box-shadow:0 24px 48px -20px rgba(1,50,79,.7),0 0 0 1px rgba(255,255,255,.08);border-top:2px solid var(--mark)}
  .topbar .primary .has-sub:hover .drop,.topbar .primary .has-sub:focus-within .drop{display:grid}
  .topbar .primary .drop a{display:block;padding:10px 18px;color:#fff;font-size:15px;font-weight:400}
  .topbar .primary .drop a:hover{background:rgba(255,255,255,.08);color:#fff}
  .topbar .primary .drop a.all{margin-top:6px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);color:var(--sky);font-size:14px}
}
/* phone and Book sit on the same baseline as the links, one row, no stacking */
.topbar .stack{display:flex;align-items:center;gap:22px}
.topbar .phone{color:#fff;font-size:16px;font-weight:500;letter-spacing:.01em;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.topbar .stack .phone::before{content:"";width:15px;height:15px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.85}
.topbar .stack .phone{text-shadow:0 1px 4px rgba(1,50,79,.55)} /* holds up over a bright photo */
.topbar.solid .stack .phone,body.past-hero .topbar .stack .phone{text-shadow:none}
.topbar .stack .phone:hover{color:var(--sky-2)}
.topbar .stack .btn{padding:12px 20px;font-size:14px;white-space:nowrap}
@media (min-width:1280px){
  .topbar.solid .primary{gap:24px;padding-right:22px;margin-right:6px}
  .topbar.solid .right{gap:18px}
  .topbar.solid .stack{gap:16px}
  .topbar.solid .logo-h{--logo-w:208px}
}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;border:0;border-radius:var(--radius);padding:10px;line-height:0;position:relative;z-index:2;transition:background .15s}
.menu summary:hover{background:rgba(255,255,255,.12)}
.menu summary::-webkit-details-marker{display:none}
.menu summary .x{display:none}
.menu[open] summary{border-color:transparent}
.menu[open] summary .bars{display:none}
.menu[open] summary .x{display:block}
.menu[open]::before{content:"";position:fixed;inset:0;background:rgba(1,50,79,.45)}
.menu__list{position:fixed;top:0;right:0;bottom:0;width:min(380px,88vw);background:var(--ink);display:grid;align-content:start;gap:0;padding:104px 34px 40px;overflow-y:auto;box-shadow:-24px 0 48px -24px rgba(1,50,79,.6)}
.menu__list a{padding:14px 0;font-weight:500;font-size:19px;color:#fff;border-bottom:1px solid rgba(255,255,255,.12)}
.menu__list a:hover{color:var(--sky)}
/* second-level items inside the drawer */
.menu__list .sub{display:grid;padding:4px 0 12px;border-bottom:1px solid rgba(255,255,255,.12)}
.menu__list .sub a{padding:9px 0 9px 18px;font-size:16px;font-weight:400;color:var(--sky-2);border:0}
.menu__list .sub a:hover{color:#fff}
.menu__list a.top{border-bottom:0;padding-bottom:6px}
.menu__list .phone{margin-top:22px;border:0;color:var(--sky);font-size:15px}
.menu__list .btn{margin-top:16px;border:0;font-size:15px;padding:14px 22px}
@media (max-width:700px){
  :root{--bar-h:76px}
  .topbar .stack{display:none}
  .topbar .logo-h{--logo-w:200px}
}

/* =============================================================================
   HOMEPAGE HERO (slider, one slide per stage)
   ========================================================================== */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;background:var(--ink);color:#fff;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;display:flex;align-items:flex-end;pointer-events:none}
/* slideshow pause control: always visible, sits above the mobile booking bar on phones */
.hero-pause{position:absolute;left:var(--gutter);bottom:22px;z-index:6;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(1,50,79,.55);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:var(--radius);font:inherit;font-size:13px;font-weight:500;cursor:pointer;backdrop-filter:blur(4px)}
.hero-pause:hover{border-color:#fff;background:rgba(1,50,79,.75)}
.hero-pause svg{fill:currentColor;display:block}
.hero-pause .ic-play{display:none}
.hero-pause.is-paused .ic-pause{display:none}
.hero-pause.is-paused .ic-play{display:block}
@media (max-width:900px){.hero-pause{bottom:calc(84px + env(safe-area-inset-bottom))}}
.slide.active{opacity:1;pointer-events:auto}
.slide .photo{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02);transition:transform 7s linear}
.slide.active .photo{transform:scale(1.08)}
/* Light scrim: the photo carries the top two-thirds, ink only where the copy needs it. */
.p1{background-image:linear-gradient(180deg,rgba(1,50,79,.12) 35%,rgba(1,50,79,.82)),url("../photos/pre-drywall-hero.webp");background-position:center 40%}
.p2{background-image:linear-gradient(180deg,rgba(1,50,79,.1) 35%,rgba(1,50,79,.82)),url("../photos/pre-slab-hero.webp");background-position:center 55%}
/* finished interiors are bright, so these two carry a slightly heavier overlay */
.p3{background-image:linear-gradient(180deg,rgba(1,50,79,.18) 30%,rgba(1,50,79,.86)),url("../photos/pre-closing-hero.webp");background-position:center 60%}
.p4{background-image:linear-gradient(180deg,rgba(1,50,79,.18) 30%,rgba(1,50,79,.86)),url("../photos/warranty-hero.webp");background-position:center 45%}
.slide .inner{position:relative;flex:1;min-width:0}
.slide .wrap{max-width:var(--maxw-hero);position:relative;padding-bottom:clamp(44px,7vw,84px);display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px}
/* Two tiers. The stage name is a smaller lead-in held to one line; the payoff carries the size.
   The lead-in stays at 24px+ on desktop so it counts as large text and clears 3:1 on any photo. */
/* one real h1 per page: the homepage's is visually hidden and the four rotating slide
   headings are h2.hero-h styled as the hero headline */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* the payoff line runs larger and tighter than the rest of the site's type so the headline itself
   carries the hero (2026-10-08, from 64px max); the lead-in stays at its contrast-checked size */
.slide h1,.slide h2.hero-h{font-size:clamp(36px,5.8vw,82px);line-height:.98;letter-spacing:-.028em;font-weight:300;color:#fff;max-width:20ch;text-wrap:balance}
.slide h1 .stage,.slide h2.hero-h .stage{display:block;white-space:nowrap;font-size:clamp(16px,1.9vw,27px);font-weight:400;letter-spacing:0;line-height:1.2;margin-bottom:.45em}
.slide h1 b,.slide h2.hero-h b{font-weight:700}
.slide .sub{margin:18px 0 0;max-width:46ch;color:var(--sky-2);font-size:clamp(15px,1.4vw,18px);font-weight:300}
.slide .actions{display:none} /* CTA trial: the bar's stacked button is the only Book over the hero */
.counter{font-variant-numeric:tabular-nums;font-size:14px;color:var(--sky);display:flex;align-items:center;gap:14px}
.counter button{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;width:40px;height:40px;border-radius:var(--radius);cursor:pointer;font-size:18px}
.counter button:hover{border-color:#fff}
/* the slide track is the build sequence: four segments labeled by stage, each a button that jumps to
   its slide. On desktop it sits on the pause button's row, starting to the right of it; the labels
   go white as each stage arrives. Under 900px the labels hide and it is the plain 3px bar again. */
.dots{position:absolute;left:0;right:0;bottom:0;height:3px;display:flex;gap:4px;padding:0 var(--gutter);z-index:5}
.dots button{flex:1;display:block;padding:0;margin:0;border:0;background:none;color:var(--sky);font:inherit;cursor:pointer;text-align:left;min-width:0}
.dots button span{display:none}
.dots button i{display:block;height:3px;background:rgba(255,255,255,.25);transition:background .3s}
.dots button.active i{background:var(--mark)}
.dots button:hover i{background:rgba(255,255,255,.55)}
.dots button.active:hover i{background:var(--mark)}
@media (min-width:900px){
  .dots{bottom:22px;height:auto;align-items:flex-end;padding-left:calc(var(--gutter) + 112px)}
  .dots button span{display:block;font-size:12px;font-weight:500;letter-spacing:.02em;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s;text-shadow:0 1px 4px rgba(1,50,79,.55)}
  .dots button.active span{color:#fff}
  .dots button:hover span{color:#fff}
}
@media (max-width:900px){
  /* clear the fixed booking bar (70px) and the pause button that sits above it (bottom 84px, 34px tall) */
  .slide .wrap{padding-bottom:calc(clamp(44px,7vw,84px) + 96px)}
  .topbar .stack>.btn{display:none} /* the fixed bottom bar already holds Book and Call */
}
@media (max-width:700px){.slide .wrap{grid-template-columns:1fr}.counter{display:none}}

/* =============================================================================
   INTERIOR PAGE HEAD + BREADCRUMBS
   ========================================================================== */
/* An interior page opens on an ink band carrying a faint drafting grid, so it reads as a
   drawing sheet rather than empty paper. The band meets the solid top bar with no seam,
   which makes the two read as one masthead. Breadcrumbs live inside it. */
.crumbs{font-size:14px}
.crumbs i{font-style:normal;margin:0 9px;opacity:.45}

.page-head{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:clamp(24px,3.2vw,38px) 0 clamp(40px,5.2vw,66px)}
.page-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:26px 26px,26px 26px,130px 130px,130px 130px;
  /* the grid is absent behind the headline and strongest in the open space to its right,
     so it fills the empty half of the band instead of competing with the type */
  -webkit-mask-image:linear-gradient(100deg,transparent 22%,rgba(0,0,0,.32) 52%,rgba(0,0,0,.95) 90%);
  mask-image:linear-gradient(100deg,transparent 22%,rgba(0,0,0,.32) 52%,rgba(0,0,0,.95) 90%);
}
.page-head .wrap{position:relative}
.page-head .crumbs{color:var(--sky);margin-bottom:clamp(20px,2.6vw,30px)}
.page-head .crumbs a:hover{color:#fff}
.page-head .crumbs [aria-current]{color:#fff;font-weight:500}
.page-head .rule{margin-bottom:22px}
.page-head h1{font-size:clamp(34px,5vw,60px);line-height:1.04;letter-spacing:-.02em;font-weight:300;color:#fff;max-width:20ch;text-wrap:balance}
.page-head h1 .stage{display:block;font-size:clamp(15px,1.6vw,20px);font-weight:500;letter-spacing:.02em;line-height:1.2;color:var(--sky);margin-bottom:.7em}
.page-head h1 b{font-weight:700}
.page-head .lede{margin-top:20px;max-width:64ch;color:var(--sky-2)}
.page-head .dated{margin-top:14px;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--sky-2);opacity:.75}
.page-head .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.page-head .btn-ghost{color:#fff}
.page-head .btn-ghost:hover{background:rgba(255,255,255,.12)}
/* on a narrow screen the copy fills the width, so the grid fades up from the bottom
   instead of in from the right, where there is no longer any free space */
@media (max-width:820px){
  .page-head::before{
    -webkit-mask-image:linear-gradient(185deg,transparent 42%,rgba(0,0,0,.45) 74%,rgba(0,0,0,.9));
    mask-image:linear-gradient(185deg,transparent 42%,rgba(0,0,0,.45) 74%,rgba(0,0,0,.9));
  }
}

/* =============================================================================
   CONTENT BLOCKS
   ========================================================================== */
/* the explicit minmax(0,1fr) column matters: an implicit `auto` track is sized from the
   widest child's max-content and will push past a phone viewport */
.prose{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;max-width:min(68ch,100%)}
.prose p{font-size:17px;color:var(--text);font-weight:300;line-height:1.65;max-width:none}
.prose h3{margin-top:12px}

/* credential marks. Kept small on purpose: PLAN 5.5 says shrink these and keep them out of
   prime real estate, so they support the written explanation rather than replace it. */
.badges{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:flex-start}
/* the figure is wider than the mark so the caption wraps to two lines, not four */
.badges figure{margin:0;display:grid;gap:10px;justify-items:center;width:150px;max-width:100%}
.badges img{width:96px;height:96px;object-fit:contain}
.badges-strip{margin-top:44px;padding-top:32px;border-top:1px solid var(--stone-2)}
.badges-strip h3{margin-bottom:20px}
.badges-strip .badges{gap:20px 10px;justify-content:space-between}
.badges-strip .badges figure{width:126px}
.badges-strip p{margin-top:20px;font-size:15px;color:var(--muted);font-weight:300;max-width:74ch}
/* one stage badge at the top of a stage page's aside */
.aside .aside-badge{margin:0;display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--paper);border:1px solid var(--stone-2);border-radius:var(--radius)}
.aside .aside-badge img{width:58px;height:58px;object-fit:contain;flex:none}
.aside .aside-badge figcaption{font-size:12.5px;line-height:1.35;color:var(--muted)}
.aside .aside-badge figcaption b{display:block;font-size:13px;color:var(--ink);font-weight:700}
.badges figcaption{font-size:12.5px;line-height:1.4;color:var(--muted);text-align:center;text-wrap:balance}

/* jobsite photographs with captions. width/height on each img keeps layout shift at zero */
.shots{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.shots figure{margin:0;display:grid;gap:9px}
.shots img{width:100%;height:auto;display:block;border:1px solid var(--stone-2);background:var(--stone)}
.shots figcaption{font-size:14px;line-height:1.5;color:var(--muted);font-weight:300;max-width:75ch}
.pano{position:relative;width:100%;max-width:100%;border:1px solid var(--stone-2);background:var(--stone);overflow:hidden}
.pano .pano-view{position:absolute;inset:0;background:var(--ink)}
.pano .pano-view.pnlm-container{background:var(--ink)}
.pano .pano-hint{position:absolute;left:10px;bottom:10px;z-index:3;font-size:12px;font-weight:500;color:#fff;background:rgba(1,50,79,.72);padding:5px 8px;border-radius:var(--radius);pointer-events:none}
.pano img{width:100%;height:auto;display:block;position:relative;z-index:1}
.pano:not(.is-fallback){aspect-ratio:4/3}
.pano:not(.is-fallback) img{visibility:hidden;position:absolute;inset:0}
.pano.is-fallback .pano-view,.pano.is-fallback .pano-hint{display:none}
/* homepage 360 band: the same .pano component at a wide 21:9 plate on paper, under a heading row with
   the optional-add-on tag and a lede beside it; the live view and the fallback still share the aspect
   so the band does not jump when the viewer loads. Phones go back to 4:3. */
.pano-band .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--stone-2);padding:3px 7px;border-radius:var(--radius);margin-bottom:14px}
.pano-band .section-head{align-items:flex-end}
.pano-band .section-head .lede{max-width:48ch;margin:0}
.pano-band figure{margin:0}
.pano-band .pano{box-shadow:0 30px 60px -36px rgba(1,50,79,.6)}
.pano-band .pano:not(.is-fallback){aspect-ratio:21/9}
.pano-band .pano.is-fallback img{aspect-ratio:21/9;object-fit:cover}
.pano-band .foot{display:flex;justify-content:space-between;align-items:baseline;gap:16px 32px;flex-wrap:wrap;margin-top:16px}
.pano-band figcaption{font-size:14px;line-height:1.5;color:var(--muted);max-width:75ch}
.pano-band .foot .link{white-space:nowrap}
@media (max-width:700px){.pano-band .pano:not(.is-fallback){aspect-ratio:4/3}.pano-band .pano.is-fallback img{aspect-ratio:4/3}}
.shots .pair{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:620px){.shots .pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* a full-width establishing image (shots directly inside .wrap) gets a caption ROW that spans the photo:
   a hairline across the full width, caption text at a readable measure on the left, and the stage label
   on the right so the block has two ends and reads as finished. The label is decorative, set from
   data-label so it stays out of the text flow. Articles use .prose>.shots and keep the plain 75ch cap. */
@media (min-width:900px){
  .wrap>.shots>figure>figcaption{max-width:none;text-wrap:balance;display:grid;grid-template-columns:minmax(0,75ch) 1fr;gap:32px;align-items:start;padding-top:10px;border-top:1px solid var(--stone-2)}
  .wrap>.shots>figure>figcaption[data-label]::after{content:attr(data-label);justify-self:end;white-space:nowrap;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--ink);padding-top:2px}
}
/* three detail shots in a row under a wide establishing image */
.shots .trio{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:560px){.shots .trio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:900px){.shots .trio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.shots .trio figcaption{font-size:13px}

/* two-column: body copy beside a sticky aside */
.split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.aside{position:sticky;top:calc(var(--bar-h) + 24px);border:1px solid var(--stone-2);border-top:4px solid var(--mark);background:var(--stone);padding:24px 26px 26px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;box-shadow:0 24px 40px -32px rgba(1,50,79,.35)}
.aside h3{font-size:12px;line-height:1.3;font-weight:700;color:var(--ink);letter-spacing:.09em;text-transform:uppercase}
.aside dl{display:grid;gap:0;font-size:15px;background:var(--paper);border:1px solid var(--stone-2);border-radius:var(--radius);padding:4px 16px}
.aside dt{color:var(--muted);font-weight:400;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding-top:11px}
.aside dd{color:var(--text);font-weight:500;padding:3px 0 11px;border-bottom:1px solid var(--stone-2)}
.aside dd:last-of-type{border-bottom:0}
.aside .btn{width:100%}
@media (max-width:900px){.aside{position:static}}

/* checklist: what an inspection covers */
/* one column on phones, two once there is room. auto-fit with a px minimum is avoided
   deliberately: its minimum becomes the track's min-content and overflows narrow screens */
.checks{display:grid;grid-template-columns:minmax(0,1fr);gap:0 40px}
.prose + .checks{margin-top:36px}
@media (min-width:720px){.checks{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--stone-2);font-size:16px;font-weight:300;align-items:start}
.checks li::before{content:"";width:12px;height:12px;margin-top:7px;border-radius:2px;background:var(--mark)}

/* child-page cards on hub pages */
.childcards{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:640px){.childcards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.childcard{border:1px solid var(--stone-2);background:var(--paper);padding:26px;display:grid;gap:10px;align-content:start;transition:border-color .15s}
.childcard:hover{border-color:var(--ink)}
.childcard .n{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.04em}
.childcard h3{font-size:21px}
.childcard p{font-size:15px;color:var(--muted);font-weight:300;max-width:none}
.childcard .go{margin-top:4px;font-size:14px;font-weight:500;color:var(--ink);display:inline-block;transition:transform .2s,color .15s}
.childcard:hover .go{color:var(--mark-hover);transform:translateX(4px)}
/* stage cards: line icon + four-dot sequence track */
.childcard .cc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.childcard .ico{width:44px;height:44px;padding:9px;border-radius:50%;background:var(--stone);color:var(--ink);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:background .15s,color .15s}
.childcard:hover .ico{background:var(--ink);color:#fff}
.childcard .track{display:flex;align-items:center;gap:0}
.childcard .track i{width:8px;height:8px;border-radius:50%;background:var(--stone-2);display:block;position:relative}
.childcard .track i+i{margin-left:14px}
.childcard .track i+i::before{content:"";position:absolute;right:100%;top:50%;width:14px;height:1px;background:var(--stone-2)}
.childcard .track i.on{background:var(--mark);box-shadow:0 0 0 3px rgba(74,184,71,.22)}

/* full-width companion to a card row, for the one item that is not a peer of the others */
.bandlink{margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:16px 30px;flex-wrap:wrap;border:1px solid var(--stone-2);background:var(--stone);padding:24px 26px;transition:border-color .15s}
.bandlink:hover{border-color:var(--ink)}
.bandlink .n{display:block;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.04em;margin-bottom:4px}
.bandlink h3{font-size:21px}
.bandlink p{font-size:15px;color:var(--muted);font-weight:300;margin-top:6px;max-width:72ch}
.bandlink .go{font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap}
.bandlink:hover .go{color:var(--mark-hover)}

/* numbered timeline rail, reused from the homepage process band */
.process{background:var(--ink);color:#fff}
/* no drafting grid on the homepage ink bands (owner, 2026-10-08: the grid stays on the interior
   page heads only) */
.process h2{color:#fff}
.process .kicker{color:var(--sky);font-weight:300;font-size:17px;margin-bottom:6px}
.steps{position:relative;margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:44px 1fr;gap:0 clamp(20px,4vw,56px)}
.rail{position:relative;width:44px}
.rail::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.18)}
.rail .fill{position:absolute;left:21px;top:0;width:2px;height:0;background:var(--mark);transition:height 1.6s cubic-bezier(.2,.7,.2,1)}
.steps.in .rail .fill{height:100%}
.step{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);padding:clamp(28px,4vw,48px) 0;border-top:1px solid rgba(255,255,255,.14);position:relative}
.step:first-child{border-top:0;padding-top:0}
.step::before{content:attr(data-n);position:absolute;left:calc(-1 * (44px + clamp(20px,4vw,56px)));top:clamp(28px,4vw,48px);width:44px;height:44px;border-radius:50%;background:var(--ink);border:2px solid rgba(255,255,255,.3);display:grid;place-items:center;font-weight:500;font-size:15px;transition:border-color .3s}
.step:first-child::before{top:0}
.steps.in .step::before{border-color:var(--mark)}
.step h3{color:#fff;font-size:clamp(24px,2.6vw,34px);font-weight:300;letter-spacing:-.015em}
.step h3 b{font-weight:700}
.step p{color:var(--sky);font-weight:300;font-size:16px}
.step .detail{color:#fff;font-size:15px;padding-left:18px;border-left:2px solid rgba(255,255,255,.2)}
@media (max-width:760px){.step{grid-template-columns:1fr}.step::before{display:none}.steps{grid-template-columns:1fr}.rail{display:none}}

/* "Who walks your site": the credentials moved off the homepage's prime real estate and given
   a proper section, per PLAN 5.5 and 6.5. The four-column text strip that used to sit directly
   under the hero is gone; do not reinstate it there. */
.who{background:var(--stone)}
.who-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.who-grid{grid-template-columns:minmax(0,1fr)}}
.who-card{background:var(--paper);border:1px solid var(--stone-2);box-shadow:0 24px 48px -32px rgba(1,50,79,.45);padding:clamp(22px,3vw,30px);display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-content:start}
.who-card dl{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;font-size:15px}
.who-card dt{color:var(--muted);font-weight:300;margin-bottom:2px}
.who-card dd{color:var(--text);font-weight:500;line-height:1.45}
.who-card .badges{padding-bottom:20px;border-bottom:1px solid var(--stone-2)}

/* the sequence track above the four tiles: a hairline across all four columns, a green fill that
   draws left to right once the section is in view, and a numbered node over each column that
   turns green in turn. Decorative (the tiles carry the content), hidden once the tiles stack. */
.stage-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:18px;height:32px}
/* the line runs from the centre of node 1 to the centre of node 4: nodes sit at the start of each
   column, so node 4's centre is at 75% of the width plus three gaps (60px) minus three quarters of
   the gaps (45px) plus half a node (16px), which is 75% + 31px */
.stage-track::before{content:"";position:absolute;left:16px;right:calc(25% - 31px);top:50%;height:2px;margin-top:-1px;background:var(--stone-2)}
.stage-track .fill{position:absolute;left:16px;top:50%;height:2px;margin-top:-1px;width:0;background:var(--mark);transition:width 1.6s cubic-bezier(.2,.7,.2,1)}
.stage-track.in .fill{width:calc(75% + 15px)}
.stage-track span{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;background:var(--paper);border:2px solid var(--stone-2);color:var(--muted);display:grid;place-items:center;font-size:13px;font-weight:700;transition:border-color .4s,color .4s,background .4s;transition-delay:var(--d,0s)}
.stage-track.in span{border-color:var(--mark);color:var(--ink)}
@media (max-width:1000px){.stage-track{display:none}}

/* inspection tiles (homepage) */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tile{background:var(--paper);border:1px solid var(--stone-2);display:flex;flex-direction:column;min-height:420px;transition:border-color .15s}
.tile:hover{border-color:var(--ink)}
.tile .img{height:180px;width:100%;display:block;object-fit:cover;background:var(--stone);border-bottom:1px solid var(--stone-2)}
.tile .body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.tile .kicker{font-weight:300;color:var(--muted);font-size:15px}
.tile h3{margin:2px 0 12px}
.tile p{font-size:15px;color:var(--muted);flex:1}
.tile .when{margin-top:18px;padding-top:14px;border-top:1px solid var(--stone-2);font-size:14px;color:var(--ink);font-weight:500}
.extras{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.extra{border-top:2px solid var(--stone-2);padding-top:16px}
.extra .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--stone-2);padding:3px 7px;border-radius:var(--radius)}
.extra .tag-in{color:var(--on-mark);background:var(--mark);border-color:var(--mark)}
.extra h4{margin:10px 0 6px;font-size:17px;font-weight:700;color:var(--ink)}
.extra p{font-size:14px;line-height:1.55;color:var(--muted);font-weight:300;margin:0}
@media (max-width:1000px){.extras{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.extras{grid-template-columns:1fr}}
@media (max-width:1000px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}.tile{min-height:0}}

/* reviews: full text, service-tagged */
.reviews{background:var(--stone)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review{background:var(--paper);border:1px solid var(--stone-2);padding:26px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start}
.review .top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;font-weight:500;color:var(--muted)}
.review .top .g{display:inline-flex;align-items:center;gap:8px}
.review .top svg{width:18px;height:18px}
.review .stars{color:var(--ink);letter-spacing:.08em}
.review p{font-size:16px;font-weight:300;line-height:1.6;color:var(--text)}
.review footer{display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--stone-2);font-size:14px;font-weight:500;color:var(--ink);background:none}
.review footer span{color:var(--muted);font-weight:400}
.svc-tag{display:inline-block;width:fit-content;max-width:100%;font-size:13px;font-weight:500;color:var(--ink);background:var(--stone);padding:6px 9px;border-radius:var(--radius)}
@media (max-width:900px){.review-grid{grid-template-columns:1fr}}
.reviews-foot{margin-top:24px;font-size:15px;color:var(--muted);font-weight:300}
/* in the narrow stage-page column the link name must not split across two lines; it moves whole instead */
.reviews-foot a{white-space:nowrap}

/* findings cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink-2);color:#fff;display:flex;align-items:flex-end}
.card .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,50,79,.08) 0%,rgba(1,50,79,0) 22%,rgba(1,84,134,.94) 100%);pointer-events:none}
.card .mk,.card .body{z-index:1}
/* the callout marker abstracted from the logo's green figure */
.card .mk{position:absolute;top:18px;left:18px;width:26px;height:26px}
.card .mk path{fill:var(--mark)}
.card .mk circle{fill:var(--mark);stroke:#fff;stroke-width:1.5}
/* the hotspot: a green point on the finding itself, pulsing like a locator. Hovering the card eases
   the photo in toward that point, so the card looks closer at the thing the headline names. Placed
   by --hx/--hy on each card. Hidden under 560px, where the card changes aspect and the percentages
   would land elsewhere. */
.card .hot{position:absolute;left:var(--hx,50%);top:var(--hy,50%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--mark);border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.45);z-index:1;pointer-events:none}
.card .hot::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--mark);animation:hotpulse 2.6s ease-out infinite}
@keyframes hotpulse{0%{transform:scale(.6);opacity:.95}100%{transform:scale(2.6);opacity:0}}
.card .ph{transition:transform 1.4s cubic-bezier(.2,.7,.2,1);transform-origin:var(--hx,50%) var(--hy,50%)}
.card:hover .ph{transform:scale(1.28)}
.card:hover .hot::before{animation-duration:1.3s}
@media (max-width:560px){.card .hot{display:none}}
@media (prefers-reduced-motion:reduce){.card .hot::before{animation:none;transform:scale(1.7);opacity:.55}.card:hover .ph{transform:none}}
.card .body{position:relative;padding:22px}
.card .stage{font-size:13px;color:var(--sky);margin-bottom:8px;font-weight:500}
.card h3{color:#fff;font-size:19px;line-height:1.25}
@media (max-width:1000px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}.card{aspect-ratio:16/10}}

/* =============================================================================
   THERMAL REVEAL (homepage). One scene, photographed twice: the visible photo and
   the infrared image of the same frame. A divider wipes between them; the visitor
   drags it, or tabs to it and uses the arrow keys. The control is a native range
   input laid over the whole figure (transparent, full size) so dragging anywhere on
   the image works, screen readers get a real slider, and no pointer maths is needed.
   The input's value sets --x on the figure; the infrared layer is clipped to it.
   On first view the divider sweeps from the left edge to the middle once, so the
   infrared half is noticed; reduced motion skips the sweep and rests at the middle.
   Plain ink ground: the owner kept the drafting grid for the interior page heads only.
   ========================================================================== */
.thermal{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.thermal .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:clamp(28px,5vw,72px);align-items:center}
.thermal h2{color:#fff}
.thermal .kicker{color:var(--sky);font-weight:300;font-size:17px;margin-bottom:6px}
.thermal .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-mark);background:var(--mark);padding:3px 8px;border-radius:var(--radius);margin-bottom:18px}
.thermal p{color:var(--sky);font-weight:300;font-size:17px;margin:18px 0 0;max-width:46ch}
.thermal .link{color:#fff;display:inline-block;margin-top:26px}
.thermal .link:hover{color:var(--sky-2)}
.thermal .hint{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:13px;color:var(--sky);font-weight:500}
.thermal .hint::before{content:"";width:22px;height:2px;background:var(--mark);flex:none}
.thermal .sample{margin-top:18px;display:block}

.ir{--x:50%;position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--ink-deep);box-shadow:0 30px 60px -36px rgba(0,0,0,.8);user-select:none;-webkit-user-select:none}
.ir img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
/* the infrared layer shows from the left edge up to the divider */
.ir .ir-b{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ir .bar{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(1,50,79,.35);pointer-events:none;z-index:2}
.ir .knob{position:absolute;top:50%;left:var(--x);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--mark);border:2px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.4);display:grid;place-items:center;pointer-events:none;z-index:3;transition:transform .15s}
.ir .knob svg{width:18px;height:18px;display:block}
.ir .knob path{fill:none;stroke:var(--on-mark);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ir .lbl{position:absolute;top:14px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(1,50,79,.72);padding:5px 9px;border-radius:var(--radius);pointer-events:none;z-index:2;backdrop-filter:blur(3px)}
.ir .lbl-a{left:14px}
.ir .lbl-b{right:14px}
/* the slider itself: invisible, covering the whole figure, so any press-and-drag moves the divider */
.ir input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4;-webkit-appearance:none;appearance:none;background:transparent;touch-action:pan-y}
.ir input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%}
.ir input[type=range]::-moz-range-thumb{width:44px;height:100%;border:0;background:transparent}
.ir input[type=range]:focus-visible{opacity:0}
.ir:has(input:focus-visible){outline:3px solid var(--mark);outline-offset:4px}
.ir:has(input:active) .knob{transform:scale(.92)}
/* the one-time sweep on first view, from the left edge to the middle */
.ir.sweep{transition:--x 1.6s cubic-bezier(.2,.7,.2,1)}
@property --x{syntax:"<length-percentage>";inherits:true;initial-value:50%}
@media (max-width:900px){.thermal .wrap{grid-template-columns:minmax(0,1fr)}.thermal p{max-width:62ch}}
@media (max-width:560px){.ir{aspect-ratio:4/3}.ir .lbl{top:10px}.ir .lbl-a{left:10px}.ir .lbl-b{right:10px}}
@media (prefers-reduced-motion:reduce){.ir.sweep{transition:none}}

/* accordion list + report excerpt */
.trust{background:var(--stone)}
.trust-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.trust-list{border-top:1px solid var(--stone-2)}
.trust-list details{border-bottom:1px solid var(--stone-2)}
.trust-list summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-weight:700;font-size:19px;color:var(--ink)}
.trust-list summary::-webkit-details-marker{display:none}
.trust-list summary span{width:28px;height:28px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-weight:300;font-size:20px;line-height:1;transition:transform .2s;flex:none}
.trust-list details[open] summary span{transform:rotate(45deg)}
.trust-list .in{padding:0 0 22px;color:var(--muted);font-size:16px;font-weight:300;line-height:1.6}
.trust-list .in p{max-width:66ch}
.trust-list .in p + p{margin-top:12px}
.excerpt{background:var(--paper);border:1px solid var(--stone-2);box-shadow:0 24px 48px -32px rgba(1,50,79,.45);max-width:100%;overflow:hidden}
.excerpt .bar{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;background:var(--ink);color:#fff;font-size:13px;font-weight:500}
.excerpt .body{padding:6px 22px}
.excerpt>img{display:block;width:100%;height:auto;border-top:1px solid var(--stone-2)}
.item{display:grid;grid-template-columns:52px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--stone-2)}
.item:first-child{border-top:0}
.item .n{font-size:13px;font-weight:500;color:var(--muted)}
.item .n b{display:block;font-size:18px;color:var(--ink)}
.item h4{font-size:16px;font-weight:700;color:var(--text);line-height:1.35}
.item p{font-size:15px;color:var(--muted);font-weight:300;margin-top:4px}
.item .sev{display:inline-block;font-size:12px;font-weight:500;padding:4px 7px;border-radius:3px;margin-top:8px}
.sev-safety{background:#F6E3DC;color:#8A2F14}
.sev-repair{background:#F1E9D2;color:#6E4A08}
.sev-monitor{background:#E1E8EF;color:#2C4C66}
.excerpt .foot{padding:12px 18px;border-top:1px solid var(--stone-2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--muted)}
@media (max-width:820px){.trust-grid{grid-template-columns:1fr}}

/* service area map */
.area-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,4vw,56px);align-items:start}
.map{background:var(--paper);border:1px solid var(--stone-2);padding:clamp(10px,2vw,20px)}
.map svg{width:100%;height:auto;font-family:"Archivo",sans-serif}
.map .land{fill:var(--stone);stroke:var(--stone-2);stroke-width:1.5}
.map .lake{fill:#D6E4EE}
.map .road{fill:none;stroke:var(--stone-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.map .road-lbl,.map .base{font-size:10px;font-weight:500;fill:var(--muted);letter-spacing:.06em}
.map .city{cursor:pointer}
.map .city circle{fill:#fff;stroke:var(--ink);stroke-width:2.5;transition:fill .15s}
.map .city text{font-size:12.5px;font-weight:500;fill:var(--muted)}
.map .city:hover circle,.map .city.is-hot circle{fill:var(--ink)}
.map .city:hover text,.map .city.is-hot text{fill:var(--text);font-weight:700}
/* No city is promoted over the others any more. Coverage is presented as four regions,
   so every point on the map carries the same weight. */
.places{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.places p{color:var(--muted);font-size:16px;font-weight:300}
.pages{display:grid;gap:8px}
.pages a{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--stone-2);background:var(--paper);font-weight:700;color:var(--ink);font-size:17px}
.pages a small{font-weight:300;font-size:14px;color:var(--muted)}
.pages a:hover,.pages a.is-hot{border-color:var(--ink)}
/* Service area grouped into four regions. Four headings with cities underneath read as
   organized territory; seventeen loose city links read as keyword stuffing. Same information. */
.regions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
/* each region is a card, the treatment the three featured areas used to carry */
.regions>div{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;background:var(--paper);border:1px solid var(--stone-2);padding:14px 16px;transition:border-color .15s}
.regions>div:hover,.regions>div.is-hot{border-color:var(--ink)}
.regions h3{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.25}
.regions p{font-size:14px;color:var(--muted);font-weight:300;line-height:1.5;max-width:62ch}
.more{display:flex;flex-wrap:wrap;gap:2px 0}
.more a{font-size:15px;color:var(--muted);padding:2px 8px;margin-left:-8px;border-radius:var(--radius)}
.more a:hover,.more a.is-hot{color:var(--ink);background:var(--stone)}
@media (max-width:860px){.area-grid{grid-template-columns:1fr}}
.city-list{display:none;list-style:none;margin:18px 0 0;padding:0;font-size:15px;line-height:1.5}
.city-list li{padding:8px 0;border-top:1px solid var(--stone-2)}
.city-list li b{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);margin-bottom:2px}
@media (max-width:899px){.city-list{display:block}}

/* index lists: articles, guides, videos, library entries */
/* article cards */
.acards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.acard{display:grid;grid-template-rows:auto 1fr;background:var(--paper);border:1px solid var(--stone-2);overflow:hidden;transition:border-color .15s,transform .2s,box-shadow .2s}
.acard:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 24px 40px -28px rgba(1,50,79,.45)}
.acard img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--stone);border-bottom:1px solid var(--stone-2)}
.acard .body{padding:20px 22px 24px;display:grid;gap:9px;align-content:start}
.acard .tag{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mark-hover)}
.acard h3{font-size:19px;line-height:1.3;color:var(--ink)}
.acard p{font-size:15px;color:var(--muted);font-weight:300;line-height:1.55;max-width:none}
.acard .go{margin-top:auto;padding-top:6px;font-size:14px;font-weight:500;color:var(--ink);display:inline-block;transition:transform .2s,color .15s}
.acard:hover .go{color:var(--mark-hover);transform:translateX(4px)}
@media (max-width:1000px){.acards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.acards{grid-template-columns:minmax(0,1fr)}}
.entries{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--stone-2)}
.entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 30px;padding:24px 0;border-bottom:1px solid var(--stone-2);align-items:baseline}
.entry h3{font-size:20px}
.entry p{font-size:15px;color:var(--muted);font-weight:300;margin-top:6px;max-width:70ch}
.entry .meta{font-size:14px;color:var(--muted);white-space:nowrap}
/* First-year calendar on home-maintenance.html. Months since closing, not January to December,
   because the warranty clock starts at closing and that is the axis nobody else publishes. Hairline
   grid: 2px gap over a stone-2 ground so the cells read as a calendar rather than a list. The month
   that carries the booking trigger gets .is-key and inverts to ink. */
.months{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--stone-2);border:1px solid var(--stone-2)}
@media (max-width:900px){.months{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.months{grid-template-columns:minmax(0,1fr)}}
.month{background:var(--paper);padding:20px 22px 22px;display:grid;gap:7px;align-content:start}
.month .n{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mark-hover)}
.month h3{font-size:17px;line-height:1.3;color:var(--ink)}
.month p{font-size:14.5px;color:var(--muted);font-weight:300;line-height:1.55;margin:0;max-width:none}
.month h3 span{display:block;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.month ul{margin:2px 0 0;padding-left:18px;display:grid;gap:8px;list-style:disc}
.month li{font-size:14.5px;color:var(--muted);font-weight:300;line-height:1.5}
.month li::marker{color:var(--stone-2)}
/* marks a task whose result belongs in the client's photo log, the thread that ties the whole
   calendar to the 11-month inspection. Owner's device, kept verbatim from his draft. */
.logmark{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mark-hover);border:1px solid var(--mark);border-radius:3px;padding:0 5px;margin-left:5px;white-space:nowrap;vertical-align:1px}
.month.is-key{background:var(--ink)}
.month.is-key .n{color:var(--mark)}
.month.is-key h3{color:#fff}
.month.is-key p{color:var(--sky)}
.month.is-key a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* Maintenance task cards. A homeowner reads these standing in the garage, so each task is a
   bounded box rather than a row in a list: a tag, the task, one line of what an inspector sees,
   then the same four questions in the same order every time. The green top edge is the same
   device the aside boxes use. .entry, used by the deficiency library, is a list; this is a card. */
.taskcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:860px){.taskcards{grid-template-columns:minmax(0,1fr)}}
.taskcard{background:var(--paper);border:1px solid var(--stone-2);border-top:3px solid var(--mark);padding:26px 26px 24px;display:grid;gap:11px;align-content:start;transition:border-color .15s,transform .2s,box-shadow .2s}
.taskcard:hover{border-color:var(--ink);border-top-color:var(--mark);transform:translateY(-2px);box-shadow:0 24px 40px -28px rgba(1,50,79,.45)}
.taskcard .tag{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mark-hover)}
.taskcard h3{font-size:20px;line-height:1.3;color:var(--ink)}
.taskcard>p{font-size:15px;color:var(--muted);font-weight:300;line-height:1.55;max-width:none;margin:0}
.taskcard dl{display:grid;grid-template-columns:minmax(0,1fr);gap:13px;margin:3px 0 0;padding-top:17px;border-top:1px solid var(--stone-2)}
.taskcard dt{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:3px}
.taskcard dd{margin:0;font-size:15px;color:var(--muted);font-weight:300;line-height:1.55}
.taskcard dd.freq{color:var(--text);font-weight:500}
@media (max-width:700px){.entry{grid-template-columns:1fr}.entry .meta{white-space:normal}}

/* connect band */
.connect{background:var(--ink);color:#fff}
.connect .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.connect h2{color:#fff}
.connect p{color:var(--sky);font-weight:300;font-size:18px;margin:16px 0 28px}
.connect .actions{display:flex;flex-wrap:wrap;gap:12px}
.contact-lines{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;font-size:17px}
.contact-lines a{border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:3px}
.contact-lines small{display:block;color:var(--sky);font-size:13px;margin-bottom:4px;font-weight:300}
@media (max-width:820px){.connect .wrap{grid-template-columns:1fr}}

/* footer */
footer{background:var(--ink-deep);color:#aeb9c6;font-size:14px}
footer .wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-top:56px;padding-bottom:40px}
footer .logo-h{width:240px}
footer h3{color:#fff;font-size:14px;line-height:1.3;font-weight:700;letter-spacing:0;margin-bottom:14px}
footer ul{display:grid;gap:8px}
footer a:hover{color:#fff}
footer p{max-width:38ch;margin-top:14px}
/* veteran-owned notice: full width band between the footer columns and the legal strip */
.vet{border-top:1px solid rgba(255,255,255,.1)}
.vet .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding-top:30px;padding-bottom:30px}
/* the badge replaces the green rule as this band's marker. alt is empty on purpose:
   the heading directly below says the same thing, so announcing it twice is noise */
.vet .badge{width:78px;height:78px;margin-bottom:6px}
.vet h3{margin-bottom:0;font-size:15px;letter-spacing:.01em}
.vet p{max-width:88ch;margin-top:0;color:#aeb9c6;line-height:1.65}

/* sister-service band (2026-10-12): ProgressCheck, same team, different service, between the veteran band and the legal strip; mirrors the band on myprogresscheck.com that points back here */
.sister{border-top:1px solid rgba(255,255,255,.1)}
.sister .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 36px;align-items:center;padding-top:28px;padding-bottom:28px}
.sister .pck{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:22px;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.sister .pck svg{width:46px;height:45px;flex:none}
.sister .pck b{font-weight:800}
.sister h3{margin-bottom:4px;font-size:15px;letter-spacing:.01em}
.sister p{max-width:88ch;margin-top:0;color:#aeb9c6;line-height:1.65}
.sister p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:520px){.sister .wrap{grid-template-columns:minmax(0,1fr)}}
.legal{border-top:1px solid rgba(255,255,255,.1)}
.legal .wrap{display:flex;justify-content:space-between;padding:20px var(--gutter);grid-template-columns:none;flex-wrap:wrap;gap:12px;font-size:13px}
@media (max-width:820px){footer .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .wrap{grid-template-columns:1fr}}

/* mobile booking bar: Book + Call */
.mobile-book{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--stone-2);backdrop-filter:blur(8px);grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:900px){.mobile-book{display:grid}body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}.menu__list{padding-bottom:calc(90px + env(safe-area-inset-bottom))}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slide,.slide .photo,.rail .fill,.step::before{transition:none}
  .slide.active .photo{transform:none}
}

/* Guide pages: phase facts and inspection callouts */
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:0;font-size:15px;line-height:1.5}
.facts dt{color:var(--muted);font-weight:300;white-space:nowrap}
.facts dd{margin:0;color:var(--text);font-weight:500}
.prose .callout{border-left:3px solid var(--mark);background:var(--stone);padding:12px 16px;font-size:15px;line-height:1.55}
/* sign-off line at the end of articles and the About page */
.prose .signoff{margin-top:18px;padding-top:22px;position:relative;font-family:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;font-size:24px;line-height:1.3;font-weight:400;font-style:italic;color:var(--ink);max-width:none}
.prose .signoff::before{content:"";position:absolute;left:0;top:0;width:56px;height:4px;background:var(--mark);border-radius:2px}
/* The homepage carries the sign-off outside a prose column, as a band of its own below the
   add-ons strip, so it needs the family and the rule restated rather than inherited. Left-aligned
   to the wrap edge, matching the section heading above it. NOTE max-width:none is required: the
   global p{max-width:min(62ch,100%)} otherwise caps the box at 62 characters, which made an
   earlier centred version look off-centre against the cards. */
.signoff--band{margin:clamp(58px,7.5vw,92px) 0 0;padding-top:28px;position:relative;text-align:left;max-width:none;font-family:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;font-size:clamp(21px,2.2vw,26px);line-height:1.3;font-weight:600;font-style:italic;color:var(--ink)}
.signoff--band::before{content:"";position:absolute;left:0;top:0;width:56px;height:4px;background:var(--mark);border-radius:2px}
.prose .callout b{color:var(--ink)}
.prose .phase-n{display:block;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-top:18px}
.prose .phase-n+h3{margin-top:2px}

/* Owner photo in the homepage who-card */
.who-card .who-photo{margin:0;display:grid;gap:8px}
.who-card .who-photo img{width:100%;height:auto;display:block;border:1px solid var(--stone-2);background:var(--stone)}
.who-card .who-photo figcaption{font-size:13px;color:var(--muted);font-weight:300}

/* Guide pages: question lists and the closing checklist */
.prose ul.ask{margin:0;padding-left:22px;display:grid;gap:6px;font-size:16px;font-weight:300;line-height:1.5}
.prose ul.ask li::marker{color:var(--ink)}
.prose .why{font-size:15px;color:var(--muted);border-top:1px solid var(--stone-2);padding-top:10px}
.prose .why b{color:var(--ink);font-weight:500}

/* Deficiency library: one photo per entry */
.entry-photo{margin:14px 0 0;max-width:560px;display:grid;gap:6px}
.entry-photo img{width:100%;height:auto;display:block;border:1px solid var(--stone-2);background:var(--stone)}
.entry-photo figcaption{font-size:13px;line-height:1.5;color:var(--muted);font-weight:300}

/* Hive Inspect scheduler embed on the contact page */
.hive-embed{background:var(--paper);border:1px solid var(--stone-2);padding:8px;max-width:100%;overflow:hidden}
.hive-embed iframe{display:block;max-width:100%}
.embed-note{margin:0 0 14px;font-size:15px;color:var(--text)}
.form-status{margin:0 0 18px;padding:12px 16px;border:1px solid var(--stone-2);border-left:4px solid var(--mark);background:var(--stone);font-weight:500}
.form-status.err{border-left-color:#B3261E}