/* Kit: menu mechanics from website/MENUS.md section 5, with mo- names so a site's old header styles and script are left alone.
   The site's motion.css sets the look by overriding the --mo-nav-* values and the .mo-* rules. */
:root { --mo-nav-h: 76px; --mo-nav-h-float: 56px; --mo-nav-gap: 12px; --mo-nav-max: 1080px; --mo-nav-move: 320ms cubic-bezier(.2,.7,.2,1);
  --mo-nav-bg: #fff; --mo-nav-ink: #111; --mo-nav-line: rgba(0,0,0,.14); --mo-nav-shadow: 0 10px 30px rgba(0,0,0,.14); --mo-nav-radius: 999px; --mo-nav-pad: clamp(16px, 4vw, 40px); }
html { scroll-padding-top: calc(var(--mo-nav-h) + 16px); }
.mo-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 64px; pointer-events: none; }
.mo-hdr { position: sticky; top: 0; z-index: 60; display: flow-root; height: var(--mo-nav-h); padding: 0 var(--mo-nav-gap); pointer-events: none; }
.mo-bar { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 16px; height: var(--mo-nav-h); max-width: 100%; margin: 0 auto; padding: 0 calc(var(--mo-nav-pad) - var(--mo-nav-gap));
  color: var(--mo-nav-ink); border: 1px solid transparent; border-radius: 0; background: transparent;
  transition: height var(--mo-nav-move), max-width var(--mo-nav-move), margin-top var(--mo-nav-move), border-radius var(--mo-nav-move), padding var(--mo-nav-move), background-color 200ms linear, border-color 200ms linear, box-shadow 200ms linear; }
.mo-scrolled .mo-bar { height: var(--mo-nav-h-float); max-width: var(--mo-nav-max); margin-top: var(--mo-nav-gap); padding: 0 12px 0 18px; border-color: var(--mo-nav-line); border-radius: var(--mo-nav-radius); background: var(--mo-nav-bg); box-shadow: var(--mo-nav-shadow); }
.mo-hidden .mo-hdr { transform: translateY(calc(-100% - 24px)); }
.mo-hdr { transition: transform 340ms cubic-bezier(.2,.7,.2,1); }
.mo-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; flex: none; }
.mo-nav { margin-left: auto; }
.mo-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.mo-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; color: inherit; background: none; border: 0; font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.mo-has-sub { position: relative; }
.mo-has-sub > .mo-link::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 150ms; }
.mo-has-sub > .mo-link[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.mo-sub { position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px; display: none; padding: 8px; background: var(--mo-nav-bg); color: var(--mo-nav-ink); border: 1px solid var(--mo-nav-line); border-radius: 14px; box-shadow: var(--mo-nav-shadow); }
.mo-link[aria-expanded="true"] + .mo-sub { display: block; }
.mo-sub a { display: grid; gap: 2px; padding: 10px 12px; min-height: 44px; color: inherit; text-decoration: none; border-radius: 8px; }
.mo-sub a small { opacity: .75; font-weight: 400; }
.mo-cta { flex: none; white-space: nowrap; }
.mo-menu-btn { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; font: inherit; color: inherit; background: none; border: 1px solid currentColor; border-radius: var(--mo-nav-radius); cursor: pointer; flex: none; }
@media (max-width: 860px) {
  :root { --mo-nav-h: 64px; --mo-nav-h-float: 52px; --mo-nav-gap: 8px; }
  .mo-menu-btn { display: inline-flex; }
  .mo-nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; display: none; max-height: calc(100dvh - var(--mo-nav-h) - 32px); overflow-y: auto; padding: 8px; background: var(--mo-nav-bg); color: var(--mo-nav-ink); border: 1px solid var(--mo-nav-line); border-radius: 18px; box-shadow: var(--mo-nav-shadow); }
  .mo-nav-open .mo-nav { display: block; }
  .mo-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .mo-link { width: 100%; min-height: 48px; justify-content: space-between; }
  .mo-sub { position: static; display: none; min-width: 0; border: 0; box-shadow: none; padding: 0 0 8px 12px; background: none; }
  .mo-bar { gap: 8px; }
  .mo-bar .mo-cta { margin-left: auto; }
  .mo-nav-open .mo-bar, .mo-bar { }
}
@media (max-width: 380px) { .mo-menu-btn svg { display: none; } .mo-menu-btn { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .mo-bar, .mo-hdr { transition: none; } }
/* Kit: pinned hero mechanics. The site's motion.css animates the hero's parts with var(--mo-pin), which runs 0 to 1. */
.mo-pin { --mo-pin: 0; --mo-pin-extra: 90vh; --mo-pin-offset: 0px; position: relative; }
/* the room to scroll through has to be real height (a sticky element cannot travel into its parent's padding) */
.mo-pin.is-pinned { height: calc(var(--mo-pin-h, 100vh) + var(--mo-pin-extra)); }
.mo-pin.is-pinned > :first-child { position: sticky; top: var(--mo-pin-top, 0px); }
/* Northline: motion in the manner of a drawing set. Nothing bounces or floats. Lines are ruled in from the left the way a
   drafter pulls a pen along a straightedge, photos are uncovered from the top like a sheet being unrolled, and plain text
   settles a few pixels. The end state keeps a small negative inset so focus rings and dimension ticks are never clipped. */
.mo-ready .mo { opacity: 0; transform: translateY(10px); transition: opacity .5s ease-out, transform .5s cubic-bezier(.2,.7,.2,1), clip-path .7s cubic-bezier(.3,.6,.2,1); transition-delay: calc(var(--mo-i, 0) * 70ms); }
.mo-ready .mo.in { opacity: 1; transform: none; }

/* ruled in from the left: headings, anything that sits under a rule, the title block */
.mo-ready h2.mo, .mo-ready .svc.mo, .mo-ready .step.mo, .mo-ready .promise.mo, .mo-ready .mat.mo, .mo-ready .rr.mo, .mo-ready .dmg > .mo, .mo-ready .contact-card.mo,
.mo-ready .keynotes li.mo, .mo-ready .claim li.mo, .mo-ready .faq details.mo, .mo-ready .credit-list li.mo, .mo-ready .proc-dim.mo, .mo-ready .tblock.mo, .mo-ready .mo-item.mo
{ transform: none; clip-path: inset(-14px 97% -14px -14px); transition-duration: .2s, .2s, .7s; }
.mo-ready h2.mo.in, .mo-ready .svc.mo.in, .mo-ready .step.mo.in, .mo-ready .promise.mo.in, .mo-ready .mat.mo.in, .mo-ready .rr.mo.in, .mo-ready .dmg > .mo.in, .mo-ready .contact-card.mo.in,
.mo-ready .keynotes li.mo.in, .mo-ready .claim li.mo.in, .mo-ready .faq details.mo.in, .mo-ready .credit-list li.mo.in, .mo-ready .proc-dim.mo.in, .mo-ready .tblock.mo.in, .mo-ready .mo-item.mo.in
{ clip-path: inset(-14px -14px -14px -14px); }
.mo-ready .proc-dim.mo { transition-duration: .2s, .2s, .9s; }
/* on narrow screens the timeline's dimension line runs down the page, so it is drawn downwards */
@media (max-width: 959.98px) { .mo-ready .proc-dim.mo { clip-path: inset(-14px -20px 97% -14px); } .mo-ready .proc-dim.mo.in { clip-path: inset(-14px -20px -14px -14px); } }

/* uncovered from the top: photos and drawings */
.mo-ready .callout-fig.mo, .mo-ready .storm-img.mo, .mo-ready .assembly-fig.mo, .mo-ready .compare.mo, .mo-ready .gutter-fig.mo, .mo-ready .plan-fig.mo, .mo-ready .photo-pair > .mo
{ transform: none; clip-path: inset(0 0 97% 0); transition-duration: .2s, .2s, .8s; }
.mo-ready .callout-fig.mo.in, .mo-ready .storm-img.mo.in, .mo-ready .assembly-fig.mo.in, .mo-ready .compare.mo.in, .mo-ready .gutter-fig.mo.in, .mo-ready .plan-fig.mo.in, .mo-ready .photo-pair > .mo.in
{ clip-path: inset(-14px -14px -14px -14px); }

/* The index band: four drafted icons that link to the four working pages, laid out as ruled cells like the footer's title block.
   A dimension line across the top is drawn out as the band scrolls up the screen (full when scripts are off). */
.mo-band { background: var(--paper); border-top: 2px solid var(--graphite); padding: var(--s5) 0 var(--s6); overflow: hidden; }
.mo-band__in { display: grid; grid-template-columns: minmax(0, 1fr); }
.mo-dim { opacity: clamp(0, calc((var(--mo-p, 1) - .05) * 30), 1); position: relative; grid-column: 1 / -1; height: 24px; margin-bottom: var(--s4); clip-path: inset(-12px clamp(0%, calc((1 - (var(--mo-p, 1) - .05) * 2.4) * 100%), 100%) -12px -12px); }
.mo-dim::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; border-top: 1px solid var(--graphite); }
.mo-dim::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24px; border-left: 1px solid var(--graphite); border-right: 1px solid var(--graphite); }
.mo-dim i { position: absolute; top: 12px; width: 15px; border-top: 2px solid var(--graphite); transform: translate(-50%, -1px) rotate(-45deg); }
.mo-dim i:first-child { left: 0; } .mo-dim i:last-child { left: 100%; }
.mo-item { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: var(--s3); align-items: center; padding: var(--s3) 0 calc(var(--s3) + 4px); border-top: 1px solid var(--line); color: var(--graphite); text-decoration: none; }
.mo-item:first-of-type { border-top: 0; padding-top: 0; }
.mo-ic { display: block; grid-row: 1 / span 2; }
.mo-ic img { height: 64px; width: auto; max-width: 100%; object-fit: contain; margin-inline: auto; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.mo-name { align-self: end; font-size: 1.75rem; font-stretch: 70%; font-weight: 800; line-height: 1.05; }
.mo-item small { align-self: start; margin-top: 4px; font-size: .9375rem; line-height: 1.4; color: var(--steel); }
/* hover, focus and "you are on this sheet": a safety-yellow rule is pulled across the foot of the cell */
.mo-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--signal); box-shadow: inset 0 -1px 0 var(--graphite); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.mo-item:hover::after, .mo-item:focus-visible::after, .mo-item[aria-current]::after { transform: scaleX(1); }
.mo-item:hover .mo-ic img, .mo-item:focus-visible .mo-ic img { transform: translateY(-5px); }
.mo-item:hover .mo-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; }
@media (min-width: 600px) {
  .mo-band__in { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 49px; row-gap: var(--s5); }
  .mo-item, .mo-item:first-of-type { display: block; padding: 0 0 var(--s4); border-top: 0; }
  .mo-item:nth-of-type(even)::before { content: ""; position: absolute; left: -25px; top: 0; bottom: 0; border-left: 1px solid var(--line); }
  .mo-ic { margin-bottom: var(--s3); }
  .mo-ic img { height: 112px; margin-inline: 0; }
  .mo-name, .mo-item small { display: block; }
  .mo-item small { margin-top: var(--s2); max-width: 30ch; }
}
@media (min-width: 960px) {
  .mo-band { padding: var(--s6) 0 var(--s7); }
  .mo-band__in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mo-dim { margin-bottom: var(--s5); }
  .mo-item:not(:first-of-type)::before { content: ""; position: absolute; left: -25px; top: 0; bottom: 0; border-left: 1px solid var(--line); }
  .mo-ic img { height: 128px; }
}
.mo-ready .mo-item.mo { clip-path: inset(-14px 97% -14px -30px); } .mo-ready .mo-item.mo.in { clip-path: inset(-14px -14px -14px -30px); }
@media print { .mo-band { display: none; } }
/* The site scrolls smoothly to in-page anchors. While reveals are running that is switched off, so a jump to an anchor lands
   at once and the things it passes are not left waiting (the kit's checker also relies on this). */
html.mo-ready { scroll-behavior: auto; }

/* ---- Menu: a two-row bar. A thin graphite strip (inspection days, phone) over the main row. After the first scroll the strip
   slides away and the main row floats as a squared, ruled bar; a dimension line is drawn between the name and the links. ---- */
:root { --mo-strip-h: 36px; --mo-row-h: 70px; --mo-nav-h: calc(var(--mo-strip-h) + var(--mo-row-h)); --mo-nav-h-float: 56px; --mo-nav-gap: 12px; --mo-nav-max: 1080px;
  --mo-nav-bg: var(--paper); --mo-nav-ink: var(--graphite); --mo-nav-line: var(--graphite); --mo-nav-shadow: 5px 5px 0 rgba(30, 33, 36, .16); --mo-nav-radius: 2px;
  --mo-nav-pad: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
html { scroll-padding-top: calc(var(--mo-nav-gap) + var(--mo-nav-h-float) + 16px); }
.mo-hdr { background: none; }
html:not(.mo-scrolled) .mo-hdr { background: var(--paper); box-shadow: inset 0 -2px 0 var(--graphite); }
/* top strip */
.mo-strip { position: absolute; left: 0; right: 0; top: 0; height: var(--mo-strip-h); background: var(--graphite); color: var(--paper); pointer-events: auto; z-index: 1;
  transition: transform var(--mo-nav-move), opacity 160ms linear, visibility 0s; }
.mo-scrolled .mo-strip { transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform var(--mo-nav-move), opacity 160ms linear, visibility 0s linear 320ms; }
.mo-strip__in { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; height: 100%; }
.mo-strip__note { align-self: center; min-width: 0; font-size: .875rem; font-stretch: 88%; font-weight: 560; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-strip__more { color: var(--on-dark-muted); }
.mo-strip__tel { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; height: 40px; margin-top: calc((var(--mo-strip-h) - 40px) / 2); padding: 0 2px; color: var(--paper); font-size: .9375rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.mo-strip__tel:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.mo-strip__tel:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; }
/* main row */
.mo-bar { height: var(--mo-row-h); margin-top: var(--mo-strip-h); border-width: 2px; gap: 14px; }
.mo-scrolled .mo-bar { padding: 0 8px 0 14px; }
.mo-brand { min-height: 44px; }
.mo-brand .logo-mark { transition: width var(--mo-nav-move), height var(--mo-nav-move); }
.mo-brand .brand-name { transition: font-size var(--mo-nav-move); }
.mo-scrolled .mo-brand .logo-mark { width: 32px; height: 32px; }
.mo-scrolled .mo-brand .brand-name { font-size: 1.4375rem; }
.mo-nav { margin-left: 0; }
.mo-nav > ul { gap: 6px; }
.mo-link { min-height: 44px; padding: 0 12px; font-size: 1rem; font-weight: 620; line-height: 1; border-radius: 0; transition: box-shadow .15s linear, background-color .15s linear; }
.mo-link:hover { box-shadow: inset 0 -2px 0 var(--graphite); }
.mo-link[aria-current="page"], .mo-link[aria-current="page"]:hover, .mo-has-sub:has([aria-current="page"]) > .mo-link { box-shadow: inset 0 -4px 0 var(--graphite); }
.mo-link[aria-expanded="true"] { background: var(--concrete); box-shadow: inset 0 -2px 0 var(--graphite); }
.mo-scrolled .mo-link { min-height: 40px; }
.mo-cta { min-height: 46px; padding: 8px 18px; transition: min-height var(--mo-nav-move); }
.mo-scrolled .mo-cta { min-height: 40px; padding-block: 6px; }
.mo-cta[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--graphite); }
.mo-menu-btn { min-height: 44px; padding: 0 14px; border: 2px solid var(--graphite); border-radius: 2px; background: var(--paper); font-weight: 680; font-size: 1rem; }
.mo-menu-btn:hover, .mo-menu-btn[aria-expanded="true"] { background: var(--concrete); }
.mo-scrolled .mo-menu-btn { min-height: 40px; }
/* the dimension line: extension lines, a hairline and two 45 degree ticks, ruled in from the left once the bar floats */
.mo-dimline { position: relative; flex: 1 1 0; min-width: 0; height: 22px; margin: 0 10px 0 6px; opacity: 0; clip-path: inset(-8px 100% -8px -8px); transition: clip-path 0s, opacity 0s; }
.mo-scrolled .mo-dimline { opacity: 1; clip-path: inset(-8px -8px -8px -8px); transition: clip-path .7s cubic-bezier(.3, .6, .2, 1) .22s, opacity 0s linear .22s; }
.mo-dimline::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--steel); }
.mo-dimline::after { content: ""; position: absolute; inset: 0; border-left: 1px solid var(--steel); border-right: 1px solid var(--steel); }
.mo-dimline i { position: absolute; top: 50%; width: 13px; border-top: 2px solid var(--graphite); transform: translate(-50%, -1px) rotate(-45deg); }
.mo-dimline i:first-child { left: 0; } .mo-dimline i:last-child { left: 100%; }
@media (max-width: 1040px) { .mo-dimline { visibility: hidden; } }
/* the dropdown: a ruled schedule hung under the bar */
.mo-sub { top: calc(100% + (var(--mo-row-h) - 44px) / 2 + 8px); left: -2px; width: 372px; padding: 0; border: 2px solid var(--graphite); border-radius: 2px; box-shadow: var(--mo-nav-shadow); }
.mo-scrolled .mo-sub { top: calc(100% + (var(--mo-nav-h-float) - 40px) / 2 + 8px); }
.mo-sub a { position: relative; gap: 3px; padding: 13px 16px 14px 20px; border-radius: 0; transition: background-color .15s linear; }
.mo-sub a + a { border-top: 1px solid var(--line); }
.mo-sub a b { font-size: 1.3125rem; font-stretch: 78%; font-weight: 760; line-height: 1.1; }
.mo-sub a small { opacity: 1; color: var(--steel); font-size: .9375rem; line-height: 1.35; }
.mo-sub a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--signal); box-shadow: inset -1px 0 0 var(--graphite); transform: scaleX(0); transform-origin: left; transition: transform .15s linear; }
.mo-sub a:hover { background: var(--concrete); }
.mo-sub a:hover::before, .mo-sub a:focus-visible::before, .mo-sub a[aria-current="page"]::before { transform: scaleX(1); }
.mo-sub a:hover small { color: var(--graphite); }
.mo-sub a:focus-visible { outline-offset: -3px; }
.mo-only-sheet { display: none; }
/* things that used to stick 16 to 24px from the top now stop under the floating bar */
@media (min-width: 960px) { .cl-side, .est-side { top: calc(var(--mo-nav-gap) + var(--mo-nav-h-float) + 16px); } }
@media (min-width: 861px) and (max-width: 1000px) { .mo-bar { gap: 8px; } .mo-link { padding: 0 9px; } .mo-cta { padding-inline: 14px; } }
@media (max-width: 860px) {
  :root { --mo-strip-h: 34px; --mo-row-h: 58px; --mo-nav-h-float: 52px; --mo-nav-gap: 8px; }
  .mo-bar { gap: 8px; }
  .mo-scrolled .mo-bar { padding: 0 5px 0 10px; }
  .mo-dimline { display: none; }
  .mo-strip__more { display: none; }
  .mo-strip__note { font-size: .8125rem; font-stretch: 80%; }
  .mo-strip__tel { font-size: .875rem; gap: 6px; }
  .mo-brand { margin-right: auto; }
  .mo-bar .mo-cta { margin-left: 0; min-height: 42px; padding: 6px 14px; font-size: 1rem; }
  .mo-nav { top: calc(100% + 8px); left: -2px; right: -2px; padding: 0; border: 2px solid var(--graphite); border-radius: 2px; box-shadow: var(--mo-nav-shadow); }
  html:not(.mo-scrolled) .mo-nav { left: var(--gutter); right: var(--gutter); top: calc(100% + 8px); }
  .mo-nav > ul > li + li { border-top: 1px solid var(--line); }
  .mo-link { min-height: 52px; padding: 0 16px; font-size: 1.125rem; }
  .mo-scrolled .mo-link { min-height: 52px; }
  .mo-link:hover, .mo-link[aria-current="page"], .mo-link[aria-current="page"]:hover, .mo-has-sub:has([aria-current="page"]) > .mo-link { box-shadow: inset 4px 0 0 var(--graphite); }
  .mo-link:hover { box-shadow: none; background: var(--concrete); }
  .mo-sub, .mo-scrolled .mo-sub { width: auto; border: 0; border-top: 1px solid var(--line); box-shadow: none; padding: 0; background: none; }
  .mo-sub a { padding: 11px 16px 12px 28px; }
  .mo-sub a b { font-size: 1.1875rem; }
  .mo-only-sheet { display: block; }
}
/* under 760px the site's own bottom bar carries the yellow button and Call, so the top bar keeps to the name and Menu,
   and the open sheet stops short of the bottom bar */
@media (max-width: 759.98px) {
  .mo-bar .mo-cta { display: none; }
  .mo-nav { max-height: calc(100dvh - var(--mo-nav-h) - 24px - 76px - env(safe-area-inset-bottom)); }
}
@media (max-width: 379.98px) { .mo-strip__note { font-size: .75rem; font-stretch: 75%; } .mo-strip__tel { font-size: .8125rem; font-stretch: 90%; } .mo-strip__tel .ic { display: none; } .mo-strip__in { gap: 8px; } }
/* scripts off: nothing floats or opens, so the header stays at the top of the page and the three kinds of work are plain links */
html:not(.js) .mo-hdr { position: relative; }
html:not(.js) .mo-has-sub > .mo-link, html:not(.js) .mo-menu-btn, html:not(.js) .mo-sub small, html:not(.js) .mo-dimline { display: none; }
html:not(.js) .mo-sub { position: static; display: flex; width: auto; border: 0; box-shadow: none; background: none; }
html:not(.js) .mo-sub a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border: 0; }
html:not(.js) .mo-sub a b { font-size: 1rem; font-stretch: 100%; font-weight: 620; }
html:not(.js) .mo-sub a::before { display: none; }
html:not(.js) .mo-sub a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--graphite); }
html:not(.js) .mo-nav { margin-left: auto; }
@media (max-width: 1040px) { html:not(.js) .mo-hdr { height: auto; } html:not(.js) .mo-bar { height: auto; min-height: var(--mo-row-h); flex-wrap: wrap; padding-bottom: 8px; }
  html:not(.js) .mo-nav { position: static; display: block; width: 100%; order: 5; margin: 0; padding: 0; border: 0; box-shadow: none; max-height: none; }
  html:not(.js) .mo-nav > ul { flex-direction: row; flex-wrap: wrap; } html:not(.js) .mo-nav > ul > li + li { border: 0; } html:not(.js) .mo-sub { flex-wrap: wrap; } html:not(.js) .mo-link { width: auto; min-height: 44px; padding: 0 10px; font-size: 1rem; } html:not(.js) .mo-only-sheet { display: none; } }
@media (prefers-reduced-motion: reduce) { .mo-strip, .mo-scrolled .mo-strip, .mo-dimline, .mo-scrolled .mo-dimline, .mo-brand .logo-mark, .mo-brand .brand-name, .mo-cta, .mo-link, .mo-sub a, .mo-sub a::before { transition: none; } }
@media print { .mo-hdr { display: none !important; } }

/* ---- Hero: one pinned scroll section. The quick-estimate drawing goes from an example to a measured job as the page scrolls:
   the old dashed layer is lifted off the roof, the extension and dimension lines are ruled out, the ticks and measurements land,
   then the price is underlined in safety yellow and a yellow sheet slides out from under the panel. A dimension line along the
   foot of the hero measures how far through you are. The headline, the text, the form and both buttons never move. ---- */
.mo-rule { display: none; }
.mo-pin { --mo-pin-offset: 76px; --mo-pin-extra: 90vh; }
.mo-pin.is-pinned { --p1: clamp(0, calc(var(--mo-pin) * 2.7), 1); --p2: clamp(0, calc((var(--mo-pin) - .24) * 3.4), 1); --p3: clamp(0, calc((var(--mo-pin) - .48) * 4.2), 1); --p4: clamp(0, calc((var(--mo-pin) - .68) * 3.4), 1); }
.mo-pin.is-pinned > .hero { position: sticky; isolation: isolate; }
.mo-pin.is-pinned .roof-draw .demo { animation: none; opacity: calc(1 - var(--p1)); transform: translate(0, calc(var(--p1) * -58px)); }
.mo-pin.is-pinned .roof-draw .ext { animation: none; opacity: var(--p2); }
.mo-pin.is-pinned .roof-draw .dm { animation: none; opacity: 1; transform-box: fill-box; transform-origin: 0 100%; transform: scale(var(--p2)); }
.mo-pin.is-pinned .roof-draw .tk, .mo-pin.is-pinned .roof-draw text:nth-last-of-type(-n+3) { animation: none; opacity: var(--p3); }
.mo-pin.is-pinned .quick { position: relative; }
.mo-pin.is-pinned .quick::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--signal); border: 2px solid var(--graphite); transform: translate(calc(var(--p4) * 12px), calc(var(--p4) * 12px)); }
.mo-pin.is-pinned .qr-range { position: relative; width: fit-content; }
.mo-pin.is-pinned .qr-range::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 6px; background: var(--signal); box-shadow: inset 0 -1px 0 var(--graphite); transform-origin: 0 50%; transform: scaleX(var(--p4)); }
.mo-pin.is-pinned .mo-rule { display: block; position: absolute; left: max(var(--gutter), calc((100% - var(--container)) / 2)); right: max(var(--gutter), calc((100% - var(--container)) / 2)); bottom: 18px; height: 22px; container-type: inline-size; opacity: clamp(0, calc(var(--mo-pin) * 12), 1); }
.mo-pin.is-pinned .mo-rule::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--graphite); transform-origin: 0 50%; transform: scaleX(var(--mo-pin)); }
.mo-pin.is-pinned .mo-rule::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid var(--graphite); }
.mo-pin.is-pinned .mo-rule i { position: absolute; left: 0; top: 50%; width: 15px; border-top: 2px solid var(--graphite); transform: translate(-50%, -1px) rotate(-45deg); }
.mo-pin.is-pinned .mo-rule i:last-child { transform: translateX(calc(var(--mo-pin) * 100cqw)) translate(-50%, -1px) rotate(-45deg); }
.mo-pin.is-pinned .mo-rule i:last-child::before { content: ""; position: absolute; left: 50%; top: -10px; height: 22px; border-left: 1px solid var(--graphite); transform: rotate(45deg); }