/* Pro Hood Cleaning — rebuild stylesheet (Opie 2026-08-22). ONE file, no framework, no page builder. The live WordPress site ships ~470KB of HTML plus a stack of Elementor and addon CSS to render under 600 words; that weight is most of why Tony said it looks bad and is very likely why it flashes before settling. PALETTE — deliberately NOT the current crimson (#c36 on grey), because Tony asked for a different colour. Deep petrol with a brass accent: it reads as stainless steel and clean heat, which is the business, and it stays legible at the contrast ratios below. NOTE: this is a CLIENT site, so it keeps its own brand. AppWT's black-and-gold is ours, not theirs, and is deliberately not used here. */ :root{ --ink:#0B1F21; /* deep petrol, near-black. body text and dark sections */ --ink-2:#123336; /* raised surface on dark */ --ink-3:#1B474B; /* hairlines and hovers on dark */ --brass:#C8912F; /* the single accent. CTAs and rules. under ~10% of any screen */ --brass-lift:#E0A93C; /* hover only */ --paper:#F7F5F1; /* warm off-white page ground, never pure #fff */ --paper-2:#FFFFFF; /* cards on paper */ --body:#2A3B3D; /* body copy on paper. 9.4:1 on --paper */ --muted:#5C6F71; /* secondary copy. 4.9:1 on --paper */ --line:#DCD6CC; --max:1180px; --r:14px; --shadow:0 1px 2px rgba(11,31,33,.05), 0 8px 28px rgba(11,31,33,.07); } *,*::before,*::after{box-sizing:border-box} /* ⭐ CANON BASELINE: never allow horizontal scroll. */ html,body{max-width:100%;overflow-x:hidden} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--paper);color:var(--body); font:400 17px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-synthesis-weight:none; } img{max-width:100%;height:auto;display:block} a{color:#0E5A5F;text-underline-offset:.18em} a:hover{color:var(--brass)} .wrap{max-width:var(--max);margin:0 auto;padding:0 22px} h1,h2,h3{color:var(--ink);line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em} h1{font-size:clamp(2.1rem,5.2vw,3.5rem);font-weight:800} h2{font-size:clamp(1.5rem,3.1vw,2.15rem);font-weight:750} h3{font-size:1.18rem;font-weight:700} p{margin:0 0 1.05em;max-width:70ch} .lede{font-size:clamp(1.06rem,1.7vw,1.28rem);color:var(--muted);max-width:64ch} /* skip link — real, not decorative */ .skip{position:absolute;left:-9999px;top:0;background:var(--brass);color:#1A1206; padding:.7rem 1.1rem;z-index:200;border-radius:0 0 8px 0;font-weight:700} .skip:focus{left:0} :focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:4px} /* ── utility bar ─────────────────────────────────────────────────────────────────────────────── */ .util{background:var(--ink);color:#CFE0E1;font-size:.87rem} .util .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:center; justify-content:flex-end;padding-top:.55rem;padding-bottom:.55rem} .util a{color:#EAF2F2;text-decoration:none;font-weight:600} .util a:hover{color:var(--brass-lift)} .util .u-lab{color:#8FAFB0;text-transform:uppercase;letter-spacing:.07em;font-size:.73rem; font-weight:700;margin-right:.35rem} /* ── header ──────────────────────────────────────────────────────────────────────────────────── */ .masthead{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:80} .masthead .wrap{display:flex;align-items:center;gap:1.2rem; padding-top:.85rem;padding-bottom:.85rem} .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto} .brand-mark-img{width:42px;height:42px;flex:0 0 auto;display:block} .brand-name{color:var(--ink);font-weight:800;font-size:1.12rem;letter-spacing:-.02em;line-height:1.1} .brand-sub{display:block;color:var(--muted);font-weight:600;font-size:.72rem;letter-spacing:.06em; text-transform:uppercase} nav.main{display:flex;gap:.15rem;flex-wrap:wrap} nav.main a{color:var(--body);text-decoration:none;font-weight:650;font-size:.96rem; padding:.5rem .8rem;border-radius:9px} nav.main a:hover{background:#EDE8E0;color:var(--ink)} nav.main a[aria-current="page"]{background:var(--ink);color:#fff} .btn{display:inline-block;border:0;border-radius:11px;font-weight:750;text-decoration:none; padding:.8rem 1.35rem;cursor:pointer;font-size:1rem;line-height:1.2} .btn-primary{background:var(--brass);color:#1A1206} .btn-primary:hover{background:var(--brass-lift);color:#1A1206} .btn-ghost{background:transparent;color:#EAF2F2;box-shadow:inset 0 0 0 1.5px rgba(234,242,242,.45)} .btn-ghost:hover{background:rgba(234,242,242,.1);color:#fff} .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{background:var(--ink-2);color:#fff} /* ── hero ────────────────────────────────────────────────────────────────────────────────────── */ .hero{position:relative;background:var(--ink);color:#EAF2F2;overflow:hidden} .hero::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(1100px 460px at 88% -8%, rgba(200,145,47,.24), transparent 62%)} .hero .wrap{position:relative;z-index:2;padding-top:clamp(3rem,7vw,5.5rem); padding-bottom:clamp(3rem,7vw,5.5rem);display:grid;gap:2.4rem;align-items:center} @media(min-width:920px){.hero .wrap{grid-template-columns:1.08fr .92fr}} .hero h1{color:#fff} .hero .lede{color:#BFD6D7} .eyebrow{display:inline-flex;align-items:center;gap:.5rem;color:var(--brass);font-weight:750; font-size:.79rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.9rem} .eyebrow::before{content:"";width:26px;height:2px;background:var(--brass)} .hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem} .hero-fig{border-radius:var(--r);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4); aspect-ratio:4/3;background:var(--ink-2)} .hero-fig img{width:100%;height:100%;object-fit:cover} /* ── trust strip ─────────────────────────────────────────────────────────────────────────────── */ .trust{background:var(--ink-2);color:#CFE0E1;border-top:1px solid var(--ink-3)} .trust .wrap{display:grid;gap:1px;padding:0;background:var(--ink-3)} @media(min-width:760px){.trust .wrap{grid-template-columns:repeat(4,1fr)}} .trust div{background:var(--ink-2);padding:1.25rem 1.4rem} .trust b{display:block;color:#fff;font-size:1.02rem;margin-bottom:.15rem} .trust span{font-size:.9rem;color:#9FBEBF} /* ── sections ────────────────────────────────────────────────────────────────────────────────── */ section{padding:clamp(3rem,6.5vw,5rem) 0} section.tight{padding:clamp(2rem,4vw,3rem) 0} .section-head{max-width:62ch;margin-bottom:2.2rem} .cards{display:grid;gap:1.15rem} @media(min-width:680px){.cards{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.cards.three{grid-template-columns:repeat(3,1fr)}} .card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r); padding:1.5rem 1.5rem 1.6rem;box-shadow:var(--shadow)} .card h3{margin-bottom:.35rem} .card p{margin:0;color:var(--muted);font-size:.97rem} .card .num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px; background:var(--ink);color:var(--brass);font-weight:800;font-size:.88rem; margin-bottom:.85rem} .prose h2{margin-top:2.4rem} .prose h2:first-child{margin-top:0} .band{background:var(--ink);color:#EAF2F2} .band h2{color:#fff} .band p{color:#BFD6D7} .cta{background:var(--ink-2);color:#fff;border-radius:var(--r);padding:clamp(1.8rem,4vw,2.8rem); display:grid;gap:1.2rem;align-items:center;box-shadow:var(--shadow)} @media(min-width:820px){.cta{grid-template-columns:1fr auto}} .cta h2{color:#fff;margin:0 0 .3rem} .cta p{color:#BFD6D7;margin:0} .cta-actions{display:flex;gap:.7rem;flex-wrap:wrap} .factlist{list-style:none;margin:0;padding:0;display:grid;gap:.7rem} .factlist li{position:relative;padding-left:1.7rem;color:var(--muted)} .factlist li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px; border-radius:3px;background:var(--brass)} /* ── footer ──────────────────────────────────────────────────────────────────────────────────── */ footer.site{background:var(--ink);color:#9FBEBF;padding:3rem 0 2rem;font-size:.93rem} footer.site h4{color:#fff;font-size:.79rem;letter-spacing:.13em;text-transform:uppercase; margin:0 0 .8rem} footer.site a{color:#CFE0E1;text-decoration:none} footer.site a:hover{color:var(--brass-lift)} .f-grid{display:grid;gap:2rem} @media(min-width:760px){.f-grid{grid-template-columns:1.4fr 1fr 1fr}} .f-links{list-style:none;margin:0;padding:0;display:grid;gap:.5rem} .f-base{border-top:1px solid var(--ink-3);margin-top:2.2rem;padding-top:1.3rem; display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.86rem} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important; scroll-behavior:auto!important}} /* Contact form. The math-captcha markup is shared network-wide, so its class names are fixed (.mc-field / #mc_answer) and the styling has to meet them rather than the other way round. */ #quote label{display:block;font-weight:600;color:var(--ink);margin-bottom:.35rem;font-size:.95rem} #quote input,#quote textarea{background:#fff;color:var(--ink)} #quote input:focus,#quote textarea:focus{outline:2px solid var(--brass);outline-offset:1px} .mc-field{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem} .mc-field label{margin-bottom:.4rem} .mc-field input[type=text]{width:7rem;padding:.6rem;border:1px solid var(--line);border-radius:8px;font:inherit} html[data-theme="dark"] #quote input,html[data-theme="dark"] #quote textarea, html[data-theme="dark"] .mc-field input[type=text]{background:#152A2C;color:#EAF2F2;border-color:#2B4547} html[data-theme="dark"] .mc-field{background:#112426;border-color:#2B4547} html[data-theme="dark"] #quote label{color:#EAF2F2} /* ── Shared video hero ─────────────────────────────────────────────────────────────────────── Same treatment on every page. The section becomes the positioning context; the video sits at z-index 0, the scrim at 1, the content at 2. `isolation:isolate` keeps the stacking local so a later section can never slide under the video. */ .phc-hero-v{position:relative;overflow:hidden;isolation:isolate;background:var(--ink)} .phc-hero-v > .wrap{position:relative;z-index:2} .phc-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none} .phc-hero-bg video{width:100%;height:100%;object-fit:cover;display:block} /* Two layers: a flat floor so no part of the frame is ever bright, plus a left-weighted gradient so the headline column is darkest where the text actually sits. */ .phc-hero-scrim{position:absolute;inset:0; background: linear-gradient(90deg, rgba(7,22,24,.93) 0%, rgba(7,22,24,.88) 42%, rgba(7,22,24,.60) 78%, rgba(7,22,24,.52) 100%), linear-gradient(180deg, rgba(7,22,24,.55) 0%, rgba(7,22,24,.30) 40%, rgba(7,22,24,.72) 100%)} .phc-hero-v .eyebrow{color:var(--brass)} .phc-hero-v h1{color:#fff} .phc-hero-v .lede{color:#D6E6E7} /* The home hero was a two-column text+photo grid. With the video behind it the photo competes, so the hero goes single-column and the still is retired there. */ .hero.phc-hero-v .wrap{grid-template-columns:1fr;max-width:62rem} .hero.phc-hero-v .hero-fig{display:none} .hero.phc-hero-v{min-height:min(74vh,620px);display:flex;align-items:center} @media (max-width:760px){.hero.phc-hero-v{min-height:auto}} @media (prefers-reduced-motion:reduce){ /* Poster only. JS pauses it too; this covers the pre-JS frames. */ .phc-hero-bg video{visibility:hidden} .phc-hero-bg{background:url(/assets/img/hero-poster.jpg) center/cover no-repeat} } /* ── Mobile header ─────────────────────────────────────────────────────────────────────────── The masthead previously had no breakpoint at all: nav links wrapped into a tall stack, the brand name broke over three lines and the FREE Quote button overflowed the viewport. */ .nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px; width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;flex:0 0 auto} .nav-toggle:focus-visible{outline:2px solid var(--brass);outline-offset:2px} .nav-bars{display:block;width:20px} .nav-bars span{display:block;height:2px;background:var(--ink);border-radius:2px;margin:4px 0; transition:transform .18s ease,opacity .18s ease} .masthead.open .nav-bars span:nth-child(1){transform:translateY(6px) rotate(45deg)} .masthead.open .nav-bars span:nth-child(2){opacity:0} .masthead.open .nav-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} @media (max-width:900px){ .masthead .wrap{display:flex;align-items:center;gap:.6rem;flex-wrap:nowrap} .brand{min-width:0;margin-right:auto} .brand-name{font-size:.98rem;white-space:nowrap} .brand-sub{white-space:nowrap;font-size:.66rem} .nav-toggle{display:flex;order:3} .masthead .btn-primary{order:2;padding:.6rem .85rem;font-size:.86rem;white-space:nowrap} nav.main{order:4;flex-basis:100%;display:none;flex-direction:column;gap:.2rem; padding:.6rem 0 .2rem;border-top:1px solid var(--line);margin-top:.6rem} .masthead.open nav.main{display:flex} nav.main a{padding:.7rem .8rem;border-radius:10px;font-size:1rem} } @media (max-width:420px){ .brand-mark-img{width:34px;height:34px} .brand-name{font-size:.9rem} .brand-sub{display:none} .masthead .btn-primary{padding:.55rem .7rem;font-size:.8rem} } /* The brand block would not shrink, so at 390px the FREE Quote button sat on top of the wordmark. A flex item's default min-width is `auto`, which refuses to shrink below its content — the fix is min-width:0 on the brand and its inner span, then let the name truncate. */ @media (max-width:900px){ .brand{flex:1 1 auto;min-width:0;gap:.5rem} .brand > span{min-width:0;overflow:hidden} .brand-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .brand-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .masthead .btn-primary{flex:0 0 auto} } @media (max-width:480px){ .brand-sub{display:none} .brand-name{font-size:.92rem} } /* Let the full wordmark show on a phone rather than truncating to "Pro Hood Clea...", and stop the utility bar spending three stacked lines of above-the-fold height on a 390px screen. */ @media (max-width:480px){ .brand-name{white-space:normal;line-height:1.02;font-size:.86rem; overflow:visible;text-overflow:clip;max-width:8.5em} } @media (max-width:640px){ /* The bar's class is .util, not .topbar. Keep the phone number, which is the action; drop the two facts the hero already states, which were costing three stacked lines above the fold. */ .util .wrap > span:not(:first-child){display:none} .util .wrap{justify-content:center} } /* ---- Reviews (added 2026-08-23) -------------------------------------------- Reuses .cards / .card for the grid, so the responsive behaviour is inherited rather than re-solved. Only the star row and attribution are new. */ .rev-stars{display:flex;gap:.12rem;margin-bottom:.7rem;line-height:1} .rev-stars svg{width:17px;height:17px;flex:0 0 auto;fill:var(--brass)} .rev-stars svg.off{fill:var(--line)} .card blockquote.rev-text{margin:0 0 .95rem;color:var(--body);font-size:1rem;line-height:1.62} .rev-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem; font-size:.9rem;color:var(--muted);margin:0} .rev-meta .rev-author{color:var(--body);font-weight:600;font-size:.97rem} .rev-meta .rev-sep{opacity:.5} .rev-note{font-size:.88rem;color:var(--muted);max-width:70ch;margin-top:1.6rem} .rev-note a{color:var(--body)} /* Google Maps embed in the footer. A raw