/* Darr's Cleaning, Inc. Site styles. Extracted from the approved Concept 04 so every page shares one source of truth instead of carrying its own copy. Approved 2026-08-25. Do not restyle without checking the concept. */ :root{ --red:#D4120F; --red-dark:#A60D0B; --red-txt:#F04A40; --red-glow:rgba(212,18,15,.32); --black:#0D0D0D; --char:#171717; --char2:#212121; --steel:#313131; --fog:#929292; --pale:#D0D0D0; --white:#fff; --line:rgba(255,255,255,.11); --line-solid:#E6E6E6; --f-head:'Archivo','Archivo Fallback',system-ui,sans-serif; --f-body:'Inter','Inter Fallback',system-ui,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,monospace; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} /* Skip link: the first focusable element on every page, off screen until it takes focus. Without it a keyboard user tabs the utility bar, the logo, the phone and about thirty nav links before reaching any content. */ .skip{position:absolute;width:1px;height:1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .skip:focus{position:fixed;top:0;left:0;z-index:200;width:auto;height:auto; clip:auto;clip-path:none;background:var(--red);color:#fff; font-family:var(--f-mono);font-size:.8rem;font-weight:600;letter-spacing:.1em; text-transform:uppercase;padding:14px 22px;outline:3px solid #fff;outline-offset:-3px} main:focus{outline:none} body{font-family:var(--f-body);background:var(--black);color:var(--pale);line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:1280px;margin:0 auto;padding:0 26px} h1,h2,h3{font-family:var(--f-head);font-weight:900;line-height:1.03;letter-spacing:-.028em;color:var(--white);text-transform:uppercase} h2{font-size:clamp(2rem,4.1vw,3.3rem)} h3{font-size:1.12rem;font-weight:800;letter-spacing:-.01em} .sect{padding:clamp(64px,8vw,116px) 0} .light{background:var(--white);color:#444444} .light h1,.light h2,.light h3{color:var(--black)} .light .mono{color:var(--red)} .mono{font-family:var(--f-mono);font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--red-txt)} .lede{font-size:1.07rem;max-width:60ch;color:var(--fog)} .light .lede{color:#646464} .shead{max-width:66ch;margin-bottom:46px} .shead h2{margin:14px 0 16px} :focus-visible{outline:3px solid var(--red);outline-offset:3px} /* rule accent */ .rule{width:54px;height:4px;background:var(--red);margin-bottom:22px} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--f-body);font-weight:700;font-size:.94rem;padding:16px 30px;border:2px solid transparent;transition:.18s ease;cursor:pointer;letter-spacing:.01em} .btn-red{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 6px 22px var(--red-glow)} .btn-red:hover{background:var(--red-dark);border-color:var(--red-dark);transform:translateY(-2px);box-shadow:0 10px 30px var(--red-glow)} .btn-out{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)} .btn-out:hover{background:#fff;color:var(--black);border-color:#fff;transform:translateY(-2px)} .btn-dark{background:var(--black);color:#fff;border-color:var(--black)} .btn-dark:hover{background:var(--char2);border-color:var(--char2);transform:translateY(-2px)} .btn-ghost-dark{background:transparent;color:var(--black);border-color:#D1D1D1} .btn-ghost-dark:hover{border-color:var(--black);transform:translateY(-2px)} .tlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.93rem;color:#fff;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:3px;transition:.18s} .tlink:hover{color:var(--red);border-color:var(--red);gap:13px} /* ---------- header ---------- */ .util{background:#090909;color:var(--fog);font-size:.8rem;font-family:var(--f-mono);letter-spacing:.06em} .util .wrap{display:flex;justify-content:space-between;gap:14px;padding-block:9px;flex-wrap:wrap} .util b{color:#fff} /* the 24-hour line is the most useful thing in this bar, so it links to the emergency page. Underline kept faint: it is a utility bar, not a CTA. */ .util a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22)} .util a:hover{border-bottom-color:var(--red-txt)} .util a:hover b{color:var(--red-txt)} /* jumbomenu.md rule 3 forbids backdrop-filter on a sticky header, because it makes the header a containing block for a position:fixed drawer nested inside it. Kept here deliberately: our .mnav drawer is a SIBLING of
, not a descendant, so it is positioned against the viewport regardless. Verified at 375px, the drawer starts at top 0 and reaches the full 812px viewport height. If the drawer is ever moved inside
, drop the blur for a solid colour. */ header{position:sticky;top:0;z-index:80;background:rgba(13,13,13,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} /* space-between, not a plain gap: the three groups are brand / links / phone+button, and the right group has to land on the same right edge as the utility bar above it. Packing left left 55px of dead space past the button and the header read lopsided. Below 1221px .navcta takes an auto margin, which overrides this anyway. */ .nav{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-block:9px;min-width:0} .brand{display:flex;align-items:center;gap:11px;flex:none} .brand img{width:52px;height:52px;object-fit:contain} .brand img.lockup{width:auto;height:54px;max-width:none} .brand-t{font-family:var(--f-head);font-weight:900;font-size:1.1rem;text-transform:uppercase;line-height:1;letter-spacing:-.02em;color:#fff} .brand-t small{display:block;font-family:var(--f-mono);font-size:.58rem;font-weight:500;letter-spacing:.14em;color:var(--fog);margin-top:4px} .links{display:flex;gap:23px;margin-left:auto;align-items:center;min-width:0} .links a{font-size:.85rem;font-weight:600;color:var(--pale);padding:8px 0;border-bottom:2px solid transparent;transition:.15s;white-space:nowrap} .links a:hover{color:#fff;border-color:var(--red)} .links a.first{color:var(--red-txt)} .navcta{display:flex;gap:9px;align-items:center;flex:none} .navcta .btn{padding:11px 17px;font-size:.85rem;border-width:1.5px;white-space:nowrap} .tel{font-family:var(--f-head);font-weight:900;font-size:1.02rem;color:#fff;white-space:nowrap;letter-spacing:-.01em} .tel small{display:block;font-family:var(--f-mono);font-size:.58rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fog);margin-top:3px} .tel:hover{color:var(--red-txt)} .burger{display:none;width:42px;height:42px;border:1px solid var(--line);background:transparent;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center;transition:border-color .2s} .burger i{width:18px;height:2px;background:#fff;display:block;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .18s ease} /* mobile nav: burger morphs to a close mark */ body.nav-open .burger{border-color:var(--red)} body.nav-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)} body.nav-open .burger i:nth-child(2){opacity:0;transform:scaleX(.2)} body.nav-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} body.nav-open{overflow:hidden} /* the panel lives outside
: the header's backdrop-filter would otherwise become the containing block for a fixed child and trap the panel inside it */ .nav-scrim,.mnav{display:none} /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)} .hero-bg{position:absolute;inset:0} .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 58%} .hero-veil{position:absolute;inset:0;background:linear-gradient(92deg,rgb(9,9,9) 0%,rgb(9,9,9) 18%,rgba(9,9,9,.92) 46%,rgba(9,9,9,.55) 74%,rgba(9,9,9,.38) 100%)} /* The homepage hero photograph has the truck on the left and the suction tube on the right, and the veil above was opaque enough across the left that the truck never read. Softened so both halves of the picture survive. White on this still measures 16:1 at its worst point, against a 4.5 minimum, because the photograph underneath is a dark backlit scene. Scoped away from .hero--page, whose photograph is bright daylight and needs the heavier one. */ .hero:not(.hero--page) .hero-veil{background:linear-gradient(92deg,rgba(9,9,9,.90) 0%,rgba(9,9,9,.84) 18%,rgba(9,9,9,.64) 46%,rgba(9,9,9,.34) 74%,rgba(9,9,9,.22) 100%)} .hero .wrap{position:relative;z-index:2;padding-block:clamp(72px,10vw,140px)} .hero-in{max-width:820px} .hero h1{font-size:clamp(2.5rem,6.2vw,5.2rem);margin:18px 0 22px} .hero h1 span{color:var(--red)} .hero .sub{font-size:clamp(1.03rem,1.7vw,1.22rem);color:var(--pale);max-width:56ch;margin-bottom:34px} /* Interior pages reuse the homepage hero, at interior scale: the same image and veil, a smaller heading, and room for a breadcrumb above it. */ .hero--page .wrap{padding-block:clamp(38px,5vw,74px)} .hero--page h1{font-size:clamp(2.1rem,4.6vw,3.6rem);margin:16px 0 18px} .hero--page .crumb{position:relative;z-index:2;margin-bottom:26px} .hero--page .hero-bg img{object-position:50% 46%} .hero-btns{display:flex;gap:13px;flex-wrap:wrap;align-items:center;margin-bottom:20px} .hero-clarify{margin-top:26px;font-size:.9rem;color:var(--fog);max-width:58ch} .aud-strip{border-top:1px solid var(--line);margin-top:38px;padding-top:24px;display:flex;flex-wrap:wrap;gap:0} .aud-strip span{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fog);padding:0 18px;border-left:1px solid var(--line)} .aud-strip span:first-child{padding-left:0;border-left:0} /* ---------- value prop ---------- */ .vp-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .vp-media{position:relative;overflow:hidden} .vp-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover} .vp-media .tag{position:absolute;left:0;bottom:0;background:var(--red);color:#fff;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:10px 18px} .vp-list{list-style:none;margin-top:30px;display:grid;gap:0;border-top:1px solid var(--line-solid)} .vp-list li{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line-solid)} .vp-list .n{font-family:var(--f-mono);font-size:.78rem;font-weight:600;color:var(--red);flex:none;padding-top:3px} .vp-list b{display:block;font-family:var(--f-head);font-weight:800;font-size:1.02rem;text-transform:uppercase;letter-spacing:-.01em;color:var(--black);margin-bottom:2px} .vp-list span.d{font-size:.93rem;color:#646464} /* ---------- applications ---------- */ /* Flex, not a fixed 4-column grid. Tile counts vary by page (8, 6, 4, 3) and a fixed column count leaves dead cells on any count that is not a multiple of it: six tiles rendered 4+2 with two empty cells that read as a broken layout. With flex-grow the last row simply widens to fill, whatever the count. */ .apps{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line)} .app{flex:1 1 260px;background:var(--char);padding:32px 26px 28px;transition:.2s ease;position:relative;min-height:196px;display:flex;flex-direction:column} .app:hover{background:var(--char2);transform:translateY(-3px)} .app .n{font-family:var(--f-mono);font-size:.72rem;color:var(--red-txt);letter-spacing:.14em;margin-bottom:16px} .app h3{margin-bottom:8px;font-size:1.08rem} .app p{font-size:.9rem;color:var(--fog);flex:1} .app .arw{margin-top:14px;color:var(--red-txt);font-size:1.1rem;opacity:0;transform:translateX(-6px);transition:.2s} .app:hover .arw{opacity:1;transform:translateX(0)} /* ---------- contractor form ---------- */ .form-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start} .form-side h2{margin-bottom:18px} .form-side p{color:var(--fog);margin-bottom:26px;max-width:46ch} .light .form-side p{color:#646464} .fbox{background:var(--white);padding:clamp(26px,3.4vw,40px);border-top:4px solid var(--red)} .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .fld{display:flex;flex-direction:column;gap:6px;min-width:0} .fld.full{grid-column:1/-1} .fld label{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#737373;font-weight:600} .fld input,.fld select,.fld textarea{font-family:var(--f-body);font-size:1rem;padding:12px 14px;border:1px solid #DBDBDB;background:#fff;color:var(--black);transition:.15s;border-radius:2px;width:100%;min-width:0} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(212,18,15,.12)} .fld textarea{resize:vertical;min-height:100px} .drop{border:1.5px dashed #CACACA;padding:22px;text-align:center;color:#808080;font-size:.9rem;transition:.15s;border-radius:2px} .drop:hover{border-color:var(--red);color:var(--red);background:#F8F8F8} .drop b{display:block;color:var(--black);font-size:.95rem;margin-bottom:3px} .fnote{font-size:.84rem;color:#6B6B6B;margin-top:14px} /* The floating reCAPTCHA badge is fixed bottom-right, so on a phone it lands on top of whatever is there: on the homepage that was the Request a Project Quote button and the contractors link. Google allows hiding it provided the disclosure is shown by the form, which .rc-note does. */ .rc-note{font-size:.78rem;line-height:1.5;color:#7A7A7A;margin-top:14px} .rc-note a{color:#5A5A5A;text-decoration:underline} @media(max-width:720px){ .grecaptcha-badge{visibility:hidden} } /* The hero veil is a left-to-right gradient because on a wide hero the text occupies the left 64%. On a phone the text spans the full width and runs into the thin end of that gradient: measured on the live page, the lede hit 2.3:1 against a 4.5 minimum. A near-flat scrim instead, which measures 5.6:1 at its worst and still leaves 18% of the photograph showing. */ @media(max-width:720px){ .hero:not(.hero--page) .hero-veil{background:linear-gradient(180deg,rgba(9,9,9,.86) 0%,rgba(9,9,9,.80) 40%,rgba(9,9,9,.84) 100%)} } /* The quote form used to offer a file upload. form-notify takes JSON, so an attached file serialised to {} and was dropped without anyone being told. These two carry the instruction that replaced it: same field label styling as the rest of the form, and a note in the panel where the drop zone was. */ .lbl-plain{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#737373;font-weight:600} .drop-note{border:1px solid var(--line);border-left:3px solid var(--red);padding:14px 16px;color:#5A5A5A;font-size:.9rem;line-height:1.55;background:#FAFAFA} .drop-note a{color:var(--red);font-weight:600} .stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:32px} .stats div{background:var(--char);padding:20px} .stats b{display:block;font-family:var(--f-head);font-weight:900;font-size:1.5rem;color:#fff;line-height:1} .stats span{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fog)} /* ---------- more services ---------- */ .more{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .ms{background:#fff;border:1px solid var(--line-solid);overflow:hidden;display:flex;flex-direction:column;transition:.2s} .ms:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(13,13,13,.13)} .ms-ph{aspect-ratio:3/2;height:auto;overflow:hidden;background:#F0F0F0} .ms-ph img{width:100%;height:100%;object-fit:cover;transition:transform .45s} .ms:hover .ms-ph img{transform:scale(1.06)} .ms-b{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column} .ms h3{margin-bottom:5px} .ms p{font-size:.9rem;color:#646464;flex:1} .ms .go{margin-top:12px;font-size:.85rem;font-weight:700;color:var(--red)} /* full service / fleet lists */ .caplist{margin-top:26px;border-top:1px solid var(--line-solid);padding-top:20px;display:flex;gap:18px;align-items:baseline;flex-wrap:wrap} .caplist-lbl{font-family:var(--f-mono);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red);flex:none} /* the 404 uses this label as a real section heading, so it must not pick up h2 sizing */ h2.caplist-lbl{margin:0;line-height:1.6} .caplist ul{list-style:none;display:flex;flex-wrap:wrap;gap:9px 22px;margin:0;padding:0} .caplist li{font-size:.9rem;display:flex;align-items:center;gap:8px} .caplist li::before{content:"";width:5px;height:5px;background:var(--red);transform:rotate(45deg);flex:none} .caplist li a{color:#5B6672;border-bottom:1px solid transparent;transition:.15s} .caplist li a:hover{color:var(--red);border-color:var(--red)} .cap-hot a{color:var(--red);font-weight:600} .caplist-dark{border-top-color:var(--line)} .caplist-dark li a{color:var(--pale)} .caplist-dark li a:hover{color:#fff;border-color:var(--red-txt)} .caplist-dark .caplist-lbl{color:var(--red-txt)} .caplist-dark .cap-hot a{color:var(--red-txt)} /* ---------- equipment ---------- */ .eq{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px} .eq figure{position:relative;overflow:hidden;background:var(--char2)} .eq img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .eq figure:hover img{transform:scale(1.05)} .eq figcaption{position:absolute;inset:auto 0 0 0;padding:18px;background:linear-gradient(to top,rgba(9,9,9,.93),rgba(9,9,9,0))} .eq figcaption b{display:block;font-family:var(--f-head);font-weight:800;font-size:1rem;text-transform:uppercase;color:#fff;letter-spacing:-.01em} .eq figcaption span{font-size:.82rem;color:var(--pale)} .w2{grid-column:span 2}.h2{grid-row:span 2} /* ---------- reviews ---------- */ .rev3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-solid);border:1px solid var(--line-solid)} .rev3 blockquote{background:#fff;padding:30px 26px;margin:0;display:flex;flex-direction:column} .rev3 .stars{color:var(--red);letter-spacing:2px;font-size:.95rem;margin-bottom:12px} .rev3 p{font-size:.97rem;color:#444444;flex:1;margin-bottom:14px} .rev3 cite{font-style:normal;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--black);font-weight:600} .rev3 cite span{color:#6B6B6B;font-weight:500} @media(max-width:1080px){ .rev3{grid-template-columns:1fr} } /* ---------- archive strip ---------- */ .archive{margin-top:clamp(38px,5vw,60px);padding-top:26px} .archive::before{content:"";display:block;height:1px;max-width:1280px;margin:0 auto 26px; padding:0 26px;box-sizing:border-box;background:var(--line-solid);background-clip:content-box} .arch-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px} .arch-intro h3{font-size:clamp(1.35rem,2.4vw,1.75rem);letter-spacing:-.02em;margin-bottom:7px} .arch-intro p{font-size:1.02rem;color:#5B6672;max-width:56ch} .arch-toggle{flex:0 0 auto} .arch-toggle{font-family:var(--f-body);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--black);background:transparent;border:1px solid #CBD3DA;border-radius:100px;padding:7px 16px;cursor:pointer;transition:.16s} .arch-toggle:hover{border-color:var(--red);color:var(--red)} .arch-window{overflow:hidden;position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .arch-track{display:flex;gap:20px;width:max-content;animation:arch-scroll 78s linear infinite} .archive.paused .arch-track{animation-play-state:paused} .arch-window:hover .arch-track{animation-play-state:paused} .arch-item{flex:0 0 auto;width:clamp(210px,24vw,290px);margin:0} .arch-item picture{display:block;border:4px solid var(--red);border-radius:2px;overflow:hidden;background:#EDEDED} .arch-item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.85)} .arch-item figcaption{margin-top:10px;font-size:.84rem;line-height:1.4;color:#5B6672} @keyframes arch-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){ .arch-track{animation:none} .arch-window{overflow-x:auto;-webkit-mask-image:none;mask-image:none} } @media(max-width:720px){ .arch-item{width:210px} .arch-track{animation-duration:60s} .arch-head{flex-direction:column;align-items:flex-start;gap:14px} .arch-intro p{font-size:.97rem} } /* ---------- legacy ---------- */ .leg-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center} .leg-media{border:5px solid var(--red);border-radius:2px;overflow:hidden} .leg-media img{width:100%;height:auto;aspect-ratio:900/648;object-fit:cover;display:block;filter:saturate(.85)} .leg-facts{list-style:none;margin-top:26px;display:grid;gap:14px} .leg-facts li{display:flex;gap:13px;align-items:flex-start;font-size:.97rem;color:var(--fog)} .leg-facts svg{width:19px;height:19px;stroke:var(--red-txt);fill:none;stroke-width:2.6;flex:none;margin-top:4px} /* ---------- final ---------- */ .final{background:var(--char);border-top:4px solid var(--red);text-align:center} .final h2{margin-bottom:16px;font-size:clamp(2.1rem,4.6vw,3.6rem)} .final p{color:var(--fog);max-width:56ch;margin:0 auto 32px;font-size:1.05rem} .final-btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap} .final-alt{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);font-size:.93rem;color:var(--fog)} .final-alt a{color:#fff;font-weight:600} /* ---------- footer ---------- */ footer{background:#090909;color:var(--fog);font-size:.91rem;padding-top:58px} .f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.1fr;gap:32px;padding-bottom:42px} .f-brand img{width:62px;height:62px;object-fit:contain;margin-bottom:14px} .f-brand p{font-size:.89rem;max-width:34ch;margin-bottom:15px} .f-tags{display:flex;flex-wrap:wrap;gap:7px} .f-tags span{border:1px solid var(--line);padding:4px 10px;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pale)} footer h2{font-family:var(--f-head);font-weight:800;text-transform:uppercase;color:#fff;font-size:.95rem;margin-bottom:14px;letter-spacing:-.01em} footer ul{list-style:none} footer li{margin-bottom:8px} footer a:hover{color:var(--red)} .f-c b{display:block;color:#fff;font-family:var(--f-head);font-weight:900;font-size:1.15rem} .f-c .lbl{display:block;font-family:var(--f-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:#8F8F8F;margin-bottom:2px} .f-c div{margin-bottom:14px} .f-area{border-top:2px solid var(--red);padding-block:30px} .f-area h2{margin-bottom:18px} /* Same rule as the .counties grid above: 20 counties, so column counts are exact divisors of 20 (5, 4, then 2). Flex-wrap was leaving 9/9/2, with two counties stranded on a row of their own. */ .f-area ul{list-style:none;display:grid;grid-template-columns:repeat(5,1fr); gap:12px 24px;margin:0;padding:0} .f-area li{font-family:var(--f-mono);font-size:.84rem;letter-spacing:.03em;color:var(--pale)} .f-bot{border-top:1px solid var(--line);padding-block:18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.06em;color:#8F8F8F} /* ---------- responsive ---------- */ /* seven nav links plus the phone plus two buttons will not fit: the bid-list button drops out first, since it also sits in the hero and the mobile panel */ /* The bid-list button lives in the hero, the footer and the mobile drawer, so the header does not need a third copy. Dropping it there gives seven nav links, the phone and one button room to sit apart. */ .navcta .btn-out{display:none} @media(max-width:1360px){ .links{gap:14px} .links a{font-size:.83rem} .tel small{display:none} .navcta{gap:8px} /* space-between only ever grows these, so the 28px floor is doing nothing but push the button past the utility bar's right edge in the last 20px before the burger takes over. Lower the floor, keep the alignment. */ .nav{gap:20px} } @media(max-width:1220px){ .burger{display:flex} .navcta .btn{display:none} /* burger and phone sit hard right once the inline links are gone */ .navcta{margin-left:auto} .tel small{display:none} /* slide-in menu panel */ .links{display:none} .nav-scrim{display:block;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.62); backdrop-filter:blur(2px);opacity:0;visibility:hidden; transition:opacity .32s ease,visibility .32s ease} body.nav-open .nav-scrim{opacity:1;visibility:visible} .mnav{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0; width:min(370px,86vw);z-index:110;background:#101010;border-left:1px solid var(--line); box-shadow:-26px 0 64px rgba(0,0,0,.55); padding:calc(var(--hh,80px) + 20px) 26px 30px;overflow-y:auto;overscroll-behavior:contain; transform:translateX(101%);visibility:hidden; transition:transform .36s cubic-bezier(.32,.72,0,1),visibility .36s} body.nav-open .mnav{transform:none;visibility:visible} .mnav-links{display:flex;flex-direction:column} .mnav-links a{font-size:1.02rem;font-weight:600;color:#fff;padding:16px 2px; border-bottom:1px solid var(--line); opacity:0;transform:translateX(16px);transition:opacity .34s ease,transform .34s ease,color .15s} .mnav-links a.first{color:var(--red-txt)} .mnav-links a:hover{color:var(--red-txt)} body.nav-open .mnav-links a{opacity:1;transform:none} body.nav-open .mnav-links a:nth-child(1){transition-delay:.06s} body.nav-open .mnav-links a:nth-child(2){transition-delay:.11s} body.nav-open .mnav-links a:nth-child(3){transition-delay:.16s} body.nav-open .mnav-links a:nth-child(4){transition-delay:.21s} body.nav-open .mnav-links a:nth-child(5){transition-delay:.26s} body.nav-open .mnav-links a:nth-child(6){transition-delay:.31s} body.nav-open .mnav-links a:nth-child(7){transition-delay:.36s} .mnav-close{position:absolute;top:calc((var(--hh,80px) - 42px)/2);right:24px; width:42px;height:42px;border:1px solid var(--line);background:transparent;cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0} .mnav-close span{position:absolute;width:18px;height:2px;background:#fff;transition:background .15s} .mnav-close span:first-child{transform:rotate(45deg)} .mnav-close span:last-child{transform:rotate(-45deg)} .mnav-close:hover{border-color:var(--red)} .mnav-close:hover span{background:var(--red-txt)} .mnav-foot{display:flex;flex-direction:column;gap:11px;margin-top:26px; opacity:0;transform:translateY(10px);transition:opacity .34s ease .3s,transform .34s ease .3s} body.nav-open .mnav-foot{opacity:1;transform:none} .mnav-foot .btn{width:100%;justify-content:center;text-align:center;padding:14px 18px;font-size:.9rem} .mnav-tel{font-family:var(--f-head);font-weight:900;font-size:1.55rem;line-height:1;color:#fff;margin-bottom:4px} .mnav-tel small{display:block;font-family:var(--f-mono);font-size:.6rem;font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--fog);margin-top:7px} .app{flex-basis:44%} .more,.eq{grid-template-columns:repeat(2,1fr)} .vp-grid,.form-grid,.leg-grid{grid-template-columns:1fr;gap:38px} .vp-media,.leg-media{order:-1} .w2,.h2{grid-column:span 1;grid-row:span 1} /* The fleet mosaic is three tiles since Terralift came off, and three in a two-column grid leaves the last one orphaned at half width. */ .eq figure:last-child{grid-column:span 2} .f-grid{grid-template-columns:repeat(3,1fr)} .f-brand{grid-column:span 3} } @media(max-width:900px){ .f-area ul{grid-template-columns:repeat(4,1fr)} } @media(max-width:560px){ .f-area ul{grid-template-columns:repeat(2,1fr)} } @media(max-width:720px){ .brand img.lockup{height:48px} .util .wrap{justify-content:center} .apps,.more,.eq{grid-template-columns:1fr} /* and the span-2 above has to come back off, or the single column grows a second implicit one and the first tile collapses to a sliver */ .eq figure:last-child{grid-column:span 1} .fgrid{grid-template-columns:1fr} .stats{grid-template-columns:1fr} .fgrid{grid-template-columns:1fr;gap:14px} /* Tap targets. The 16 service links sat at 24px tall in a dense stack, which is easy to mis-tap, and the header phone link was 23px despite being the main way a homeowner contacts them from a phone. */ .caplist ul{gap:2px 22px;width:100%} .caplist li{min-height:44px} .caplist li a{padding:11px 0;display:block} .tel{padding:11px 0;display:block} /* footer navigation and the archive control were also under the 44px minimum */ footer .f-grid ul a,footer .f-c a,footer .f-contact dd a{padding:10px 0;display:inline-block} /* .f-area is the county list, which is text rather than links */ footer .f-area ul a{padding:6px 0} .crumb a{padding:6px 0;display:inline-block} .arch-toggle{min-height:44px} .burger{width:44px;height:44px} .aud-strip span{padding:4px 12px 4px 0;border-left:0} .f-grid{grid-template-columns:1fr 1fr} .f-brand{grid-column:span 2} .hero-btns .btn{width:100%} .hero-btns .door-call{width:100%;align-items:center} } @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} @media(max-width:560px){ .tel{font-size:.9rem} .brand img.lockup{height:48px} .nav{gap:10px} /* "INFRASTRUCTURE" is unbreakable and overran the viewport at the clamp floor */ .hero h1{font-size:2rem} .util{font-size:.74rem} .f-grid > *{min-width:0} .f-tags span{font-size:.6rem} } /* At 320px the logo (169px) plus the phone and burger (155px) plus two 26px gutters need 376px, so the header forced the whole page to scroll sideways. Tighten the gutter and the header furniture below 375px only, so the common sizes from the iPhone SE 2 upward are untouched. */ @media(max-width:374px){ .wrap{padding-left:16px;padding-right:16px} .brand img.lockup{height:38px} .navcta{gap:6px} .tel{font-size:.82rem} .burger{width:38px;height:38px} .hero h1{font-size:1.75rem} .util{font-size:.72rem} /* same cause as the hero: "Infrastructure" is one unbreakable word and needs 317px at 32px type, against 288px of content width at this size */ h2{font-size:1.68rem} } /* safety net so no future long word can push the page sideways */ h1,h2,h3{overflow-wrap:break-word} /* grid children default to min-width:auto, which let long footer links force overflow */ .f-grid > *{min-width:0} .eq-grid > *,.more > *,.apps > *{min-width:0} /* long unbreakable strings (email) must not force overflow in narrow footer columns */ footer a[href^="mailto:"],.f-c a,.f-contact dd a{overflow-wrap:anywhere;word-break:break-word} @media(max-width:1080px) and (min-width:721px){ /* four link columns across three tracks left contact stranded on its own row */ .f-c{grid-column:span 3} } /* ============================================================ PHASE 1 ADDITIONS Built on the approved Concept 04 shell, for the decisions taken 2026-08-25: homeowners first, phone first, one merged top bar. ============================================================ */ /* --- merged emergency + trust bar ------------------------------- One strip, not two. The 24-hour number is the loudest thing in it, and "family owned since 1960" stays because it is the trust signal that separates them from a franchise. */ .util-em{background:#070707;border-bottom:1px solid rgba(255,255,255,.07)} .util-em .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 20px; padding-block:8px;flex-wrap:wrap} .util-em .em{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono); font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pale)} .util-em .em svg{width:15px;height:15px;stroke:var(--red-txt);stroke-width:2.1;fill:none;flex:none} .util-em .em a{color:#fff;font-family:var(--f-head);font-weight:900;font-size:1rem; letter-spacing:-.01em;padding:4px 0;border-bottom:2px solid var(--red);transition:.15s} .util-em .em a:hover{color:var(--red-txt)} .util-em .trust{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.07em;color:var(--fog)} .util-em .trust b{color:var(--pale);font-weight:600} @media(max-width:720px){ .util-em .wrap{justify-content:center;text-align:center;gap:4px 14px} .util-em .trust{width:100%;font-size:.68rem} } /* --- two-door hero --------------------------------------------- Homeowner side deliberately larger. Contractors are not hidden, they are simply the smaller of two clearly labelled doors. */ .doors{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;margin-top:36px;align-items:stretch} .door{background:rgba(13,13,13,.72);border:1px solid var(--line);padding:28px 26px 26px; backdrop-filter:blur(6px);display:flex;flex-direction:column;transition:.18s} .door:hover{border-color:rgba(255,255,255,.22)} .door-main{border-top:4px solid var(--red);background:rgba(13,13,13,.85)} .door-alt{border-top:4px solid var(--steel)} .door .who{font-family:var(--f-mono);font-size:.7rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--red-txt);margin-bottom:12px} .door-alt .who{color:var(--fog)} .door h2{font-size:clamp(1.35rem,2.5vw,1.9rem);margin-bottom:10px} .door p{font-size:.98rem;color:var(--pale);margin-bottom:20px} .door-alt p{color:var(--fog)} .door .spacer{flex:1} .door-call{display:inline-flex;flex-direction:column;gap:2px;padding:15px 26px;background:var(--red); color:#fff;box-shadow:0 6px 22px var(--red-glow);transition:.18s;align-self:flex-start;max-width:100%} .door-call:hover{background:var(--red-dark);transform:translateY(-2px)} .door-call b{font-family:var(--f-head);font-weight:900;font-size:1.55rem;letter-spacing:-.02em;line-height:1} .door-call span{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;opacity:.92} .door-note{margin-top:14px;font-size:.84rem;color:var(--fog)} .door-note a{border-bottom:1px solid rgba(255,255,255,.28)} .door-note a:hover{color:#fff;border-color:var(--red)} @media(max-width:900px){ .doors{grid-template-columns:1fr;gap:14px} } /* --- service page template -------------------------------------- */ .crumb{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--fog);padding-block:18px} .crumb a{border-bottom:1px solid transparent} .crumb a:hover{color:var(--pale);border-color:var(--red)} .crumb span{color:#7A7A7A;padding:0 7px} .svc-hero{border-bottom:1px solid var(--line);padding-bottom:clamp(40px,5vw,64px)} .svc-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(30px,4vw,58px);align-items:start} .svc-hero h1{font-size:clamp(2.1rem,4.6vw,3.6rem);margin:16px 0 20px} .svc-lede{font-size:1.1rem;color:var(--pale);max-width:56ch;margin-bottom:26px} .svc-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-top:4px solid var(--red)} /* Archive photographs are square prints. Forced into the 4/3 box, cover slices roughly 113px off the top and bottom, which cropped Harold's head against the edge and cut the boys off at the shins. Show them at their own ratio instead. */ .svc-media--square img{aspect-ratio:1/1;height:auto} .svc-media figcaption{font-size:.82rem;color:var(--fog);margin-top:10px;line-height:1.45} .svc-body{max-width:68ch} .svc-body h2{font-size:clamp(1.5rem,2.9vw,2.1rem);margin:44px 0 16px} .svc-body h3{margin:28px 0 8px;text-transform:none;font-size:1.06rem} .svc-body p{margin-bottom:16px} .svc-body ul{list-style:none;margin:18px 0 22px;display:grid;gap:11px} .svc-body ul li{display:flex;gap:12px;align-items:flex-start} .svc-body ul li svg{width:19px;height:19px;stroke:var(--red);stroke-width:2.6;fill:none;flex:none;margin-top:3px} .signs{background:var(--char);border-left:4px solid var(--red);padding:26px 28px;margin:30px 0} .signs h3{margin:0 0 14px;text-transform:uppercase;letter-spacing:-.01em;font-size:1rem} .signs ul{margin:0;gap:9px} .light .signs{background:#F6F6F6;border-left-color:var(--red)} .light .signs h3{color:var(--black)} .svc-cta{background:var(--char);border-top:4px solid var(--red);padding:clamp(28px,4vw,42px); margin-top:46px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:space-between} .svc-cta h2{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:8px} .svc-cta p{color:var(--fog);max-width:46ch;margin:0} .svc-aside{position:sticky;top:96px} .aside-card{background:var(--char);border:1px solid var(--line);padding:24px} .aside-card + .aside-card{margin-top:16px} .aside-card h3{font-size:.92rem;letter-spacing:.02em;margin-bottom:14px} .aside-card ul{list-style:none;display:grid;gap:10px} .aside-card ul a{font-size:.92rem;color:var(--pale);display:flex;gap:9px;align-items:baseline} .aside-card ul a::before{content:"";width:5px;height:5px;background:var(--red); transform:rotate(45deg);flex:none;translate:0 -2px} .aside-card ul a:hover{color:#fff} @media(max-width:900px){ .svc-grid{grid-template-columns:1fr} .svc-aside{position:static} } /* --- service area ------------------------------------------------ Twenty counties. Column counts are exact divisors of 20 at every breakpoint (5, 4, then 2) so the last row is never left half empty, which an auto-fill grid was doing. */ .counties{display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--line);border:1px solid var(--line);margin-top:30px} .counties span{background:var(--char);padding:15px 18px;font-size:.94rem;color:var(--pale); display:flex;align-items:center;gap:11px;transition:background .16s} .counties span::before{content:"";width:5px;height:5px;background:var(--red); transform:rotate(45deg);flex:none} .counties span:hover{background:var(--char2)} /* The gridlines are the container showing through a 1px gap, so an incomplete last row leaves a pale block where a cell is missing. Twenty counties filled the grid exactly; twenty-three does not. This filler makes it 24, which is divisible by both column counts the grid uses. */ .counties::after{content:"";background:var(--char)} .light .counties::after{background:#fff} .counties .home{color:#fff;font-weight:600;background:var(--char2)} .counties .home::before{background:var(--red);box-shadow:0 0 0 3px var(--red-glow)} .counties .home i{font-style:normal;font-family:var(--f-mono);font-size:.58rem;font-weight:600; letter-spacing:.13em;text-transform:uppercase;color:var(--red-txt);margin-left:auto; border:1px solid var(--red);padding:2px 7px;white-space:nowrap} .light .counties{background:var(--line-solid);border-color:var(--line-solid)} .light .counties span{background:#fff;color:#4A4A4A} .light .counties span:hover{background:#F7F7F7} .light .counties .home{background:#F7F7F7;color:var(--black)} .counties-note{margin-top:16px;font-size:.88rem;color:var(--fog)} .light .counties-note{color:#646464} @media(max-width:1080px){ .counties{grid-template-columns:repeat(2,1fr)} } @media(max-width:720px){ .counties{grid-template-columns:repeat(2,1fr)} .counties span{padding:13px 14px;font-size:.9rem} .counties .home i{display:none} } /* --- emergency band --------------------------------------------- Full-bleed image band carrying the 24-hour message. Kept dark enough that white type clears WCAG AA over any part of the photograph. */ .band{position:relative;overflow:hidden;border-block:1px solid var(--line)} .band-bg{position:absolute;inset:0} .band-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 46%} .band-veil{position:absolute;inset:0; background:linear-gradient(90deg,rgba(7,7,7,.95) 0%,rgba(7,7,7,.9) 46%,rgba(7,7,7,.7) 100%)} .band-in{position:relative;z-index:2;padding-block:clamp(52px,7vw,88px);max-width:62ch} .band-in h2{font-size:clamp(1.7rem,3.4vw,2.7rem);margin:14px 0 16px} .band-in p{color:var(--pale);margin-bottom:26px;font-size:1.03rem} /* --- archive document feature ----------------------------------- For the 1960 handbill. The scan is the evidence, so it is presented as a document rather than decoration, with the wording set out beside it for anyone who cannot read the scan or is using a screen reader. */ .doc{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,52px);align-items:center; background:var(--char);border-top:4px solid var(--red);padding:clamp(26px,4vw,46px)} .doc-img{border:1px solid var(--line);background:#EDEDED} .doc-img img{width:100%;display:block} .doc blockquote{font-family:var(--f-head);font-weight:800;text-transform:uppercase; font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.25;color:#fff;letter-spacing:-.015em; border-left:4px solid var(--red);padding-left:20px;margin-bottom:18px} .doc cite{font-style:normal;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:var(--fog);display:block;margin-bottom:20px} .doc p{color:var(--pale);font-size:1rem} .doc p + p{margin-top:14px} @media(max-width:820px){ .doc{grid-template-columns:1fr} } /* --- alternating story rows -------------------------------------- */ .story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,64px);align-items:center; margin-top:clamp(44px,6vw,80px)} .story:first-of-type{margin-top:0} .story.flip .story-media{order:-1} .story-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-top:4px solid var(--red)} .story-media figcaption{font-size:.82rem;color:var(--fog);margin-top:10px;line-height:1.45} .light .story-media figcaption{color:#646464} .story h2{font-size:clamp(1.6rem,3.1vw,2.3rem);margin:14px 0 16px} .story p + p{margin-top:14px} @media(max-width:820px){ .story{grid-template-columns:1fr;gap:24px} .story.flip .story-media{order:0} } /* --- contact page ------------------------------------------------ */ .ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:36px} .way{background:var(--char);border:1px solid var(--line);border-top:4px solid var(--red);padding:26px 24px; display:flex;flex-direction:column;transition:.18s} .way:hover{border-color:rgba(255,255,255,.2)} .way .k{font-family:var(--f-mono);font-size:.68rem;font-weight:600;letter-spacing:.15em; text-transform:uppercase;color:var(--red-txt);margin-bottom:12px} .way .v{font-family:var(--f-head);font-weight:900;font-size:1.32rem;letter-spacing:-.02em; color:#fff;line-height:1.15;word-break:break-word} .way .v a{border-bottom:2px solid transparent;transition:.15s;padding-block:3px;display:inline-block} .way .v a:hover{color:var(--red-txt);border-color:var(--red)} .way p{font-size:.9rem;color:var(--fog);margin-top:10px} .way .spacer{flex:1;min-height:8px} .hours{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px; background:var(--line);border:1px solid var(--line);margin-top:26px} .hours > div{background:var(--char);padding:18px 20px} .hours dt{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:var(--fog);margin-bottom:6px} .hours dd{font-family:var(--f-head);font-weight:800;font-size:1.05rem;color:#fff} /* form status: never fakes a success it cannot deliver */ .fstatus{margin-top:18px;padding:16px 18px;border-left:4px solid var(--red);background:#F6F6F6; font-size:.94rem;color:#3A3A3A;display:none} .fstatus.show{display:block} .fstatus b{color:var(--black);display:block;margin-bottom:4px} .fstatus a{color:var(--red);border-bottom:1px solid currentColor;font-weight:600} /* --- service area map -------------------------------------------- County geometry from the US Census cartographic boundary files (public domain), via us-atlas. The map is the picture; the county list beside it stays as the readable, indexable version. */ .area-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,56px); align-items:center;margin-top:32px} .area-map{background:#101010;border:1px solid var(--line);padding:clamp(16px,2vw,26px)} .area-map img{width:100%;height:auto;display:block} .area-legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;padding-top:16px; border-top:1px solid var(--line)} .area-legend span{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono); font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--fog)} .area-legend i{width:13px;height:13px;flex:none;border:1px solid} .area-legend .k-served{background:#5E1210;border-color:#8A2320} .area-legend .k-home{background:var(--red);border-color:var(--red-txt)} .area-legend .k-other{background:#181818;border-color:#2E2E2E} @media(max-width:900px){ .area-grid{grid-template-columns:1fr} } /* --- credibility strip ------------------------------------------- Thin band under a service hero. Uses the same red diamond marker and mono label as the county list and capability lists, so it reads as part of the site rather than a bolted-on stats component. */ .trust-strip{border-block:1px solid var(--line);background:#101010} .trust-strip .wrap{display:flex;flex-wrap:wrap;gap:14px 34px;padding-block:16px;align-items:center} .trust-strip span{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono); font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--pale)} .trust-strip span::before{content:"";width:5px;height:5px;background:var(--red); transform:rotate(45deg);flex:none} .light .trust-strip{background:#F7F7F7;border-color:var(--line-solid)} .light .trust-strip span{color:#4A4A4A} @media(max-width:720px){ .trust-strip .wrap{gap:10px 22px;padding-block:14px} .trust-strip span{font-size:.66rem;letter-spacing:.09em} } /* ============================================================ MEGA NAV — WES jumbomenu.md house pattern Class contract is fixed by the spec so this site behaves like the rest of the fleet. Colours are mapped onto our dark tokens. Rules held to: trigger is a