/* ============================================================================ Liberty Plumbing — sitewide design system ---------------------------------------------------------------------------- The vintage-Americana skin used by EVERY page except the home page, which has its own scoped skin in src/app/(frontend)/home.css (all of its rules live under .homepage and cannot leak here, or vice versa). Served statically from /public, so there is no build step: edit, reload. layout.tsx appends ?v= to the URL, so a save busts the cache on the next request without anyone touching a version number. NAMING: class names are written out in full (.leadform-call-number, not .lf-call-n). A name you have to decode is a name that gets misused. Component prefixes group related rules: .area-hero-* city page hero (photo variant when the city has one) .leadform-* the lead capture form (LeadForm.tsx) .interior-* shared interior page heroes ============================================================================ */ /* Fonts load via in the document head (non-blocking) — see layout.tsx */ :root{ --navy:#3F2A56; --navy-2:#52386E; --navy-deep:#2A1C3A; --rust:#E04E39; --rust-2:#C23A26; --rust-deep:#A2301B; --gold:#cda24a; --gold-2:#bd9767; /* White background family (James, 2026-08-01: "white everywhere"). The old tan (#f1e7cf cream / #f6efdc paper) is retired. Secondary surfaces stay a step off pure white so bands and cards still read; --line cooled from tan-gold to neutral so borders don't look dirty on white. White cards (.sched, .revcard, form fields) keep their borders, which is what separates them from the page now. */ --cream:#EDEAE0; --cream-2:#E3DFD2; --paper:#F4F2EB; --ink:#2a2622; --mut:#6b6256; --line:#D3CEBF; --block:#DCD7C8; --copper:#b16a35; --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } *{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--cream)} body{margin:0;font-family:'Source Sans 3',system-ui,sans-serif;color:var(--ink);background:var(--cream);font-size:17.5px;line-height:1.68} /* rugged paper grain over the whole page */ body::before{content:"";position:fixed;inset:0;background-image:var(--grain);background-size:170px;opacity:.07;mix-blend-mode:multiply;pointer-events:none;z-index:999} /* heavier grain over the dark sections for a worn, rugged feel */ .trustbar,.story,.areas{position:relative} .trustbar::after,.story::after,.areas::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:200px;opacity:.10;mix-blend-mode:overlay;pointer-events:none} .trustbar>*,.story>*,.areas>*{position:relative;z-index:1} .wrap{max-width:1240px;margin:0 auto;padding:0 28px} h1,h2,h3,.display{font-family:'Big Shoulders Display','Anton',Impact,sans-serif;font-weight:800;letter-spacing:.005em;line-height:.98;text-transform:uppercase} /* ---- NEVER LET THE BROWSER FAKE A FONT WEIGHT ---------------------------- When CSS asks for a weight (or italic) the loaded font does not ship, the browser SYNTHESISES it by smearing or shearing the real outline. It renders as blur, not as weight, and it is easy to miss because it looks almost right. It cost us the membership prices: Anton ships 400 only, they sat in a (700 by default), and they came out visibly out of focus. font-synthesis:none makes that impossible everywhere. A missing weight now renders at the real weight instead of a smeared fake, which is both sharper and immediately obvious in review. The weights actually loaded (see the in layout.tsx): Anton 400 only Big Shoulders Display 700 / 800 / 900 Oswald 500 / 600 / 700 Source Sans 3 400 / 600 / 700 (+ 400 italic) Ask for anything else and you get a real, visible fallback, not a blur. */ *,*::before,*::after{font-synthesis:none} a{color:var(--rust);text-decoration:none} .eyebrow{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:13px;font-weight:600;color:var(--rust)} .star{color:var(--gold)} /* placeholders */ .ph{background: repeating-linear-gradient(45deg,#d9cdae,#d9cdae 12px,#d2c4a2 12px,#d2c4a2 24px); border:1px solid #c3b491;border-radius:6px;display:flex;align-items:center;justify-content:center; color:#8a7d63;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:12px;text-align:center;padding:12px} /* ---- header ---- */ header.site{background:var(--cream);border-bottom:1px solid rgba(21,39,63,.12);position:sticky;top:0;z-index:30} /* iOS Safari lets page content scroll up into the status-bar strip above a sticky header. This shield extends the header's background past its top edge so that strip always shows header, never passing content. */ header.site::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:140px;background:var(--cream)} header.site .bar{display:flex;align-items:center;gap:26px;padding:12px 28px;max-width:1240px;margin:0 auto} .crest{height:130px;width:auto;flex:0 0 auto;display:block} header.site .bar{padding:12px 28px} img.ph-img{width:100%;height:150px;object-fit:cover;border-radius:6px;margin-bottom:18px;display:block} .hero .photo{background-position:center;background-size:cover} .hero .photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cream) 0%,rgba(241,231,207,.85) 14%,rgba(241,231,207,.35) 34%,rgba(241,231,207,0) 55%)} .story .photo-real{height:340px;background-position:center;background-size:cover;border-radius:8px} .interior-photo{background-position:center;background-size:cover;border-radius:8px} .brandblock{line-height:1} .brandblock .name{font-family:'Anton',sans-serif;font-size:30px;color:var(--navy);text-transform:uppercase;letter-spacing:.02em} .brandblock .name .tm{font-size:.45em;vertical-align:super;color:var(--rust)} .brandblock .tagline{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);font-weight:600;margin-top:3px} nav.main{margin-left:auto;display:flex;align-items:center;gap:22px} nav.main a{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:16.5px;font-weight:600;color:var(--navy)} nav.main a:hover{color:var(--rust)} nav.main a.bookbtn{display:inline-flex;align-items:center;background:transparent;color:var(--navy); border:2px solid var(--navy);font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.03em; padding:11px 18px;border-radius:6px;text-transform:uppercase;font-size:16px} nav.main a.bookbtn:hover{background:var(--navy);color:#fff} nav.main a.callbtn{display:inline-flex;align-items:center;gap:9px;background:var(--rust);color:#fff;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.03em;padding:13px 20px;border-radius:6px;text-transform:uppercase;font-size:18px;box-shadow:0 2px 0 var(--rust-deep)} nav.main a.callbtn:hover{color:#fff;background:var(--rust-2)} nav.main a.callbtn svg{fill:#fff} .callbtn:hover{background:var(--rust-2)} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;gap:10px;font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:16px;padding:15px 26px;border-radius:7px;border:2px solid transparent;cursor:pointer} .btn-rust{background:var(--rust);color:#fff;box-shadow:0 3px 0 var(--rust-2)} .btn-rust:hover{background:var(--rust-2)} .btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)} .btn-ghost:hover{background:var(--navy);color:#fff} /* ---- hero ---- */ .hero{background:var(--cream);position:relative;overflow:hidden} .hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch} .hero .copy{padding:54px 0 54px 28px;max-width:620px} .hero h1{font-size:74px;color:var(--navy);margin:14px 0 0} .hero h1 .red{color:var(--rust)} .rule{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--gold)} .rule:before,.rule:after{content:"";height:2px;background:var(--line);flex:1} .hero .lead{font-size:21px;color:var(--navy);max-width:30ch;margin:0 0 6px;line-height:1.35} .hero .skillgrit{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--rust);font-weight:700;font-size:23px;margin:4px 0 16px} .hero .sub{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--navy);font-weight:600;font-size:15px;margin:14px 0 26px} .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap} .hero .photo{position:relative;min-height:560px} .hero .photo .ph{position:absolute;inset:0;border:none;border-radius:0} /* ---- trust bar ---- */ .trustbar{background:var(--navy);color:var(--cream)} .trustbar .row{display:flex;justify-content:space-between;gap:8px;padding:20px 28px;max-width:1240px;margin:0 auto;flex-wrap:wrap} .trustbar .item{display:flex;align-items:center;gap:11px;flex:1;min-width:170px;justify-content:center} .trustbar .item svg{width:30px;height:30px;stroke:var(--gold);fill:none;flex:0 0 auto} .trustbar .item b{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:14.5px;font-weight:600;line-height:1.2} .trustbar .item svg{width:34px;height:34px} /* ---- sections ---- */ section{padding:64px 0} .sec-head{text-align:center;margin-bottom:38px} .sec-head h2{font-size:42px;color:var(--navy);margin:8px 0 0} .center-rule{width:60px;height:3px;background:var(--gold);margin:14px auto 0} /* services grid */ .svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} .svc-card{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:22px 14px;text-align:center;transition:.15s} .svc-card:hover{border-color:var(--rust);transform:translateY(-3px)} .svc-card svg{width:58px;height:58px;stroke:var(--copper);fill:none;stroke-width:1.8} .svc-card h3{font-size:17px;color:var(--navy);margin:14px 0 6px;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.02em;text-transform:uppercase} .svc-card p{font-size:15px;color:var(--mut);margin:0;line-height:1.45} .svc-card svg{stroke:var(--copper);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .svc-card svg .fill{fill:var(--copper);stroke:none} .svc-cta{text-align:center;margin-top:30px} /* story / three panel */ .threecol{display:grid;grid-template-columns:repeat(3,1fr);gap:0} .panel{padding:46px 34px;color:var(--cream)} .panel.navy{background:var(--navy)} .panel.rust{background:var(--rust)} .panel.gold{background:var(--navy-deep)} .panel .eyebrow{color:var(--gold)} .panel h3{font-size:30px;margin:6px 0 14px;color:#fff} .panel p{font-size:15.5px;line-height:1.6;color:#e7ddc6} .panel .ph{height:150px;margin-bottom:18px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#cdbfa0} /* founding story strip */ .story{background:var(--navy-deep);color:var(--cream);position:relative} .story .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center} .story .ph{height:320px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#bdb094} .story .eyebrow{color:var(--gold)} .story h2{font-size:38px;color:#fff;margin:10px 0 16px} .story p{font-size:17px;color:#e3d9c2;line-height:1.7;max-width:54ch} .story .sig{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);font-weight:600;margin-top:18px;font-size:14px} /* testimonial */ .testi{background:var(--cream-2);text-align:center} .testi .badge{display:inline-flex;flex-direction:column;align-items:center;border:2px solid var(--gold);border-radius:50%;width:118px;height:118px;justify-content:center;color:var(--navy);font-family:'Anton',sans-serif;line-height:1;margin-bottom:8px} .testi .badge b{font-size:30px;font-family:'Anton',sans-serif;font-weight:400}.testi .badge span{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.08em;margin-top:4px;text-transform:uppercase} .testi blockquote{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:26px;color:var(--navy);max-width:24ch;margin:18px auto 14px;line-height:1.3} .testi .who{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--rust);font-weight:600;font-size:14px} .testi .stars{color:var(--gold);font-size:22px;margin-top:8px} /* areas band */ .areas{background:var(--navy);color:var(--cream);position:relative} .areas .grid{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:center} .areas h2{font-size:40px;color:#fff;line-height:1.05} .areas .cities{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:18px;color:#e7ddc6;line-height:2} .areas .cities .star{color:var(--gold);margin:0 6px} /* ============ FOOTER ============ The markup is seven named pieces (Footer.tsx); grid-template-areas reassembles them per breakpoint, so the same DOM serves both layouts. DESKTOP: logo/tagline | services | areas | call-phone/links/badge MOBILE (<=1024): logo beside quick links, phone as a full-width gold tap band, tagline, services beside areas, badge centered at the end. */ footer.site{background:var(--navy-deep);color:#d6c9a8;padding:48px 0 26px;font-size:15.5px} footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;column-gap:30px;row-gap:12px;align-items:start; grid-template-areas: "logo services areas call" "tagline services areas links" "tagline services areas badge"} footer.site .f-logo{grid-area:logo} footer.site .f-logo img{height:84px;width:auto} footer.site .f-tagline{grid-area:tagline} footer.site .f-tagline p{margin:0} footer.site .f-services{grid-area:services} footer.site .f-areas{grid-area:areas} footer.site .f-call{grid-area:call} footer.site .f-links{grid-area:links} footer.site .f-badge{grid-area:badge;font-family:'Oswald',sans-serif;text-transform:uppercase; letter-spacing:.05em;font-size:12.5px;color:#a99c80;line-height:1.8} footer.site .f-badge span{display:block} footer.site .f-badge .f-dot{display:none} /* Markup uses h2 for document outline; h4 kept for any legacy markup. */ footer.site h2,footer.site h4{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cream);font-size:14px;margin:0 0 12px} footer.site a{display:block;color:#cdbfa0;padding:3px 0} footer.site a:hover{color:var(--gold)} /* Desktop: the call block reads as heading + big gold number, like before. */ footer.site .f-call{padding:0} footer.site .f-call:hover{color:inherit} footer.site .f-call-label{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--cream);font-size:14px;margin-bottom:10px} footer.site .f-call-number{display:block;font-family:'Anton',sans-serif;font-size:30px;color:#f3cd72} footer.site .f-call:hover .f-call-number{color:var(--gold)} @media(max-width:1024px){ footer.site .cols{grid-template-columns:1fr 1fr;column-gap:24px;row-gap:20px;align-items:center; grid-template-areas: "logo links" "call call" "tagline tagline" "services areas" "badge badge"} footer.site .cols{align-items:start} footer.site .f-logo{align-self:center} /* Quick links sit beside the logo, ranged right to balance it. */ footer.site .f-links{align-self:center;text-align:right} /* The phone becomes the thing a thumb cannot miss: one gold band, the entire band is the tel: link. */ footer.site .f-call{background:var(--gold);border-radius:4px;text-align:center;padding:14px 10px 15px} footer.site .f-call-label{color:var(--navy-deep);font-size:12px;letter-spacing:.14em;margin-bottom:4px} footer.site .f-call-number{color:var(--navy-deep);font-size:27px;line-height:1} footer.site .f-call:hover .f-call-number{color:var(--navy-deep)} /* 10px (James, after seeing true one-line at 8.5px was too small). The line wraps; text-wrap:balance keeps the two lines even instead of stranding a word. */ footer.site .f-badge{text-align:center;font-size:10px;line-height:1.9;letter-spacing:.04em;text-wrap:balance} /* Segments never break internally; wraps happen at the .f-dot separators, which are ordinary text so the browser breaks after them. */ footer.site .f-badge span{display:inline;white-space:nowrap} footer.site .f-badge .f-dot{display:inline;white-space:normal} } footer.site .legal{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:#8d8169;font-size:12.5px} @media(max-width:1024px){footer.site .legal{justify-content:center;text-align:center}} /* interior */ .crumb{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--mut);padding:14px 0} .crumb a{color:var(--mut)} .interior-hero{background:var(--cream-2);border-bottom:1px solid var(--line)} .interior-hero h1{font-size:clamp(30px,6.2vw,52px);color:var(--navy);margin:6px 0 12px;max-width:16em; line-height:1.03;text-wrap:balance} .interior-hero .lead{font-size:19px;color:var(--navy);max-width:60ch;line-height:1.5} .content{max-width:760px} .content h2{font-size:30px;color:var(--navy);margin:40px 0 14px} .content h3{font-size:17px;font-family:'Source Sans 3',sans-serif;font-weight:700;text-transform:none;letter-spacing:0;color:var(--navy);margin:20px 0 4px;line-height:1.35} .content p{margin:0 0 15px;max-width:66ch;font-size:18px;line-height:1.72} .content ul li{font-size:18px} .content ul{margin:10px 0 18px}.content li{margin:6px 0} .steps{list-style:none;counter-reset:s;padding:0} .steps li{counter-increment:s;position:relative;padding:14px 0 16px 56px} /* The first line of text and the top of the number circle share an origin. Previously the circle sat at 11px while the text started at the li's 14px padding PLUS the heading's own top margin, so the number floated above the words it belonged to. Both now start at the same place and the heading's inherited margin is cleared. */ .steps li > *:first-child{margin-top:0} /* The divider starts at the text column, not at x=0: a rule that runs under the number circles reads as a misalignment because the numbers hang in the margin. Last item carries no rule. */ .steps li:not(:last-child)::after{content:"";position:absolute;left:56px;right:0;bottom:0; height:1px;background:var(--line)} .steps li:before{content:counter(s);position:absolute;left:0;top:14px;width:38px;height:38px;background:var(--rust);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:18px} .faq dt{font-family:'Source Sans 3',sans-serif;font-weight:600;color:var(--navy);margin-top:18px;font-size:17px} .faq dd{margin:5px 0 0;color:#3a3a3a} .sidebar{background:var(--navy);color:var(--cream);border-radius:10px;padding:26px;position:sticky;top:96px} .sidebar h3{color:#fff;font-size:22px;margin:0 0 8px} .sidebar .phone{font-family:'Anton',sans-serif;font-size:30px;color:var(--gold);display:block;margin:6px 0 14px} /* About page: a photo occupies the aside where the contact card used to sit. Same 10px radius as .sidebar, same sticky behaviour, so the column reads as the same component with different contents. */ .about-aside-photo{position:sticky;top:96px;line-height:0;display:grid;gap:22px} .about-aside-photo img{display:block;width:100%;height:auto;border-radius:10px} /* Captioned photo in the aside. Caption uses the same small Oswald caps as other labels on the site, so it reads as a label rather than body copy. */ .about-figure{margin:0} .about-figure figcaption{font-family:'Oswald',sans-serif;text-transform:uppercase; letter-spacing:.09em;font-size:12.5px;color:var(--mut);line-height:1.6;padding-top:10px} @media(max-width:980px){.about-aside-photo{position:static}} /* Team hero (About). The crew photo is the background and the copy sits on the parking-lot foreground: the one large, uniform, empty surface in the frame. Nobody is covered, which was the whole requirement. Cream type, because the asphalt is mid-dark and cream is already the site's text colour on every dark surface (footer, trust band). A faint bottom-up darkening guarantees contrast without reading as a scrim. Copy is one column at 940px: over a full-bleed photo a two-column split fights the image, and 940 keeps the measure comfortable. image-set() does the format swap: AVIF (137 KB) first, WebP (239 KB) back-up. */ .team-hero{position:relative;overflow:hidden;background:var(--navy-deep); border-bottom:1px solid var(--line);display:flex;align-items:flex-end; min-height:560px;padding:0} .team-hero::before{content:"";position:absolute;inset:0;z-index:1; /* The painted crew, made from the real team photograph so the three faces are the actual people rather than stock. The previous team-hero files are left in place, unreferenced, rather than overwritten. Positioned right-of-centre because the painting keeps its left third open for the headline. */ background-image:image-set(url('/images/about-crew.avif') type('image/avif'), url('/images/about-crew.webp') type('image/webp')); background-size:cover;background-position:70% center} .team-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;z-index:2; background:linear-gradient(180deg,rgba(24,20,28,0) 0%,rgba(24,20,28,.30) 46%,rgba(24,20,28,.55) 100%)} .team-hero-inner{position:relative;z-index:3;width:100%;max-width:1240px; margin:0 auto;padding:0 28px 54px} /* Same 1240px gutter as .wrap so the hero copy starts on the same left edge as every section below it; the text itself still caps at a readable 940. */ .team-hero-inner > *{max-width:940px} .team-hero .eyebrow{color:var(--gold)} .team-hero h1{color:#fff;max-width:15em;margin:6px 0 14px} .team-hero .lead{color:var(--cream);max-width:56ch;font-size:19px;line-height:1.55; text-shadow:0 1px 14px rgba(24,20,28,.5)} @media(max-width:860px){ .team-hero{min-height:520px} .team-hero::before{background-image:image-set(url('/images/team-hero-mobile.avif') type('image/avif'), url('/images/team-hero-mobile.webp') type('image/webp'))} .team-hero::after{height:66%} .team-hero-inner{padding:0 20px 38px} .team-hero .lead{font-size:17px} } .layout{display:grid;grid-template-columns:1fr 320px;gap:46px;align-items:start;padding:50px 0} /* Even split, used where the aside carries a photo rather than a card: the photo is the point, so it gets the same width as the prose. .content caps itself at 760px, which would strand the text mid-column, so it fills here. */ .layout-5050{grid-template-columns:1fr 1fr} .layout-5050 .content{max-width:none} @media(max-width:980px){.svc-grid{grid-template-columns:repeat(3,1fr)}.hero .grid,.story .grid,.areas .grid,.threecol,.layout{grid-template-columns:1fr}.hero h1{font-size:54px}.hero .photo{min-height:300px}} @media(max-width:600px){.svc-grid{grid-template-columns:repeat(2,1fr)}.threecol .panel{}.hero h1{font-size:42px}} /* ============ INTERIOR PAGES (generated content) ============ */ body.interior .hero{background:var(--cream-2);border-bottom:1px solid var(--line);overflow:visible} body.interior .hero .wrap{padding:42px 0} body.interior .hero .eyebrow{color:var(--rust)} body.interior .hero h1{font-size:46px;color:var(--navy);margin:8px 0 14px;max-width:17em} body.interior .hero .lead{font-size:19px;color:var(--navy);max-width:64ch;line-height:1.5;margin:0} .hero-block,.block{background:repeating-linear-gradient(45deg,#ddd0b2,#ddd0b2 12px,#d5c7a4 12px,#d5c7a4 24px);border:1px solid #c8b893;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#8a7d63;font-family:'Oswald';text-transform:uppercase;letter-spacing:.1em;font-size:12px;min-height:60px} .crumb{font-family:'Oswald';text-transform:uppercase;letter-spacing:.05em;font-size:12px;color:var(--mut);padding:14px 0} .crumb a{color:var(--mut)} body.interior .wrap > h2{font-size:30px;color:var(--navy);margin:38px 0 14px} body.interior .wrap > p{max-width:66ch;font-size:18px;line-height:1.7} ul.signs{margin:12px 0 18px;padding-left:0;list-style:none} ul.signs li{position:relative;padding:5px 0 5px 28px;font-size:17.5px;border-bottom:1px solid var(--line)} ul.signs li:before{content:"";position:absolute;left:0;top:13px;width:9px;height:9px;background:var(--rust);border-radius:2px;transform:rotate(45deg)} .center-rule{width:60px;height:3px;background:var(--gold);margin:14px auto 0} .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin:18px 0} .card{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:18px} .card h3{margin:0 0 6px;font-family:'Source Sans 3',sans-serif;font-weight:700;text-transform:none;letter-spacing:0;color:var(--navy);font-size:17px;line-height:1.35} .card p{font-size:14.5px;color:var(--mut);margin:0;line-height:1.45} a.card{display:block}a.card:hover{border-color:var(--rust)} .linkcols{columns:3;font-size:15.5px;margin:8px 0 6px} .linkcols a{display:block;padding:3px 0;color:var(--rust)} .faq dt{font-family:'Source Sans 3',sans-serif;font-weight:600;color:var(--navy);margin-top:18px;font-size:17.5px;line-height:1.35} .faq dd{margin:5px 0 0;color:#3a3a3a;font-size:17px;line-height:1.6} @media(max-width:760px){.linkcols{columns:1}.hero h1{font-size:34px}} /* ============ NAV: MEGA-MENU + MOBILE (PageShell Header) ============ */ nav.main .navitem{position:relative;display:flex;align-items:center} nav.main .mtoggle{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:16.5px;font-weight:600;color:var(--navy);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:0} nav.main .navitem:hover .mtoggle{color:var(--rust)} .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;display:inline-block;transition:transform .15s} nav.main .navitem:hover .caret{transform:rotate(180deg)} .mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--rust);border-radius:4px;box-shadow:0 24px 60px -16px rgba(16,29,48,.45);padding:26px 30px 20px;min-width:560px;opacity:0;visibility:hidden;transition:.16s ease;z-index:40} nav.main .navitem:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px} .mega-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 30px} .mega-cols.mega-2col{grid-template-columns:repeat(2,1fr);gap:6px 50px} .mega-cols ul{list-style:none;margin:0;padding:0} .mega-cols li a{display:block;font-family:'Source Sans 3',system-ui,sans-serif;text-transform:none;letter-spacing:0;font-size:15.5px;font-weight:600;color:var(--navy);padding:7px 2px;border-bottom:1px solid rgba(212,195,156,.45)} .mega-cols li a:hover{color:var(--rust)} .mega-h{display:block;font-family:'Source Sans 3',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:700;color:var(--rust);margin:0 0 8px} .mega-all{display:inline-block;margin-top:16px;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:13px;font-weight:700;color:var(--rust)} .mega-all:hover{color:var(--rust-2)} .logo-link{display:inline-flex;flex:0 0 auto} .burger{display:none;margin-left:auto;width:46px;height:42px;flex-direction:column;justify-content:center;gap:6px;background:none;border:0;cursor:pointer;padding:8px} .burger span{height:3px;background:var(--navy);border-radius:2px;transition:.2s} .burger.is-open span:nth-child(1){transform:translateY(9px) rotate(45deg)} .burger.is-open span:nth-child(2){opacity:0} .burger.is-open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)} @media(max-width:900px){ .burger{display:flex} nav.main{position:fixed;inset:0 0 0 auto;width:min(360px,86vw);background:var(--cream);flex-direction:column;align-items:stretch;gap:0;padding:90px 24px 28px;margin:0;transform:translateX(102%);transition:transform .26s ease;box-shadow:-20px 0 60px -20px rgba(16,29,48,.5);overflow-y:auto;z-index:60} nav.main.is-open{transform:translateX(0)} nav.main a,nav.main .navitem{border-bottom:1px solid var(--line);padding:14px 0} nav.main .navitem{flex-direction:column;align-items:stretch} nav.main .mtoggle{justify-content:space-between;width:100%;font-size:18px} .mega{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;border-top:0;background:none;padding:6px 0 2px;min-width:0;max-height:0;overflow:hidden;transition:max-height .25s ease} .mega.acc-open{max-height:1400px} nav.main .navitem:hover .mega{transform:none} .mega-cols,.mega-cols.mega-2col{grid-template-columns:1fr;gap:0} nav.main a.bookbtn{margin-top:18px;justify-content:center;border-bottom:0;padding:14px 20px} nav.main a.callbtn{margin-top:10px;justify-content:center;border-bottom:0;padding:15px 20px} } /* ============ INTERIOR SHELL HELPERS ============ */ /* Visible breadcrumbs retired 2026-08-06; BreadcrumbJsonLd carries the trail for machines. */ .side-related{margin-top:20px;border-top:1px solid rgba(255,255,255,.14);padding-top:16px} .side-related h4{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--gold);margin:0 0 8px} .side-related a{display:block;color:#e7ddc6;padding:4px 0;font-size:15px} .side-related a:hover{color:#fff} .faq-sec{background:var(--cream-2);border-top:1px solid var(--line)} .faq-sec h2{font-size:30px;color:var(--navy);margin:0 0 14px} /* CTA band */ .cta-band{background:var(--rust);color:#fff} .cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:40px 28px} .cta-band h2{font-size:34px;color:#fff;margin:0 0 6px} .cta-band p{margin:0;color:#ffe9e2;font-size:17px;max-width:48ch} .cta-band-actions{display:flex;gap:12px;flex-wrap:wrap} .btn-cream{background:var(--cream);color:var(--navy);box-shadow:0 3px 0 #c9b888} .btn-cream:hover{background:#fff} .btn-ghost-light{background:transparent;color:#fff;border-color:#fff} .btn-ghost-light:hover{background:#fff;color:var(--rust)} /* hub grids */ .hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:8px 0} @media(max-width:900px){.hub-grid{grid-template-columns:1fr}.cta-band .wrap{flex-direction:column;align-items:flex-start}} .hub-card{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:22px 22px 20px;display:block;transition:.15s} /* Photo variant: the card becomes a column with the copy on top and the city's hero photo filling the bottom. overflow:hidden is what makes the image take the card's bottom corner radius instead of squaring it off. */ .hub-card--photo{padding:0;overflow:hidden;display:flex;flex-direction:column} .hub-card--photo .hub-card-copy{padding:22px 22px 16px} .hub-card-photo{display:block;margin-top:auto;height:132px;overflow:hidden} .hub-card-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 55%} /* A hairline above the photo so it reads as a deliberate band, not a bleed. */ .hub-card--photo .hub-card-photo{border-top:1px solid var(--line)} .hub-card--photo:hover .hub-card-photo{filter:saturate(1.06)} @media(max-width:600px){ .hub-card-photo{height:112px} } .hub-card:hover{border-color:var(--rust);transform:translateY(-3px)} .hub-card h3{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--navy);font-size:18px;margin:0 0 6px} .hub-card p{color:var(--mut);font-size:15px;margin:0;line-height:1.5} .region-h{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:700;color:var(--rust);margin:30px 0 12px} /* home service-grid engraving icons (React home) */ .svc-card .ico{height:110px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:6px} .svc-card .ico img{height:110px;width:auto;display:block;filter:drop-shadow(0 3px 5px rgba(16,29,48,.12))} /* ============ CONTACT FORM ============ */ .contact-form label{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:16px} .contact-form input,.contact-form textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--paper);font-family:'Source Sans 3',sans-serif;font-size:16px;color:var(--ink)} .contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--rust);border-color:var(--rust)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:600px){.field-row{grid-template-columns:1fr}} /* large logo on home header only */ header.site.home .crest{height:164px} @media(max-width:760px){header.site.home .crest{height:96px}} /* ============ HOME PAGE (React port — motion + sections) ============ */ main.home .hero{min-height:clamp(520px,72vh,720px)} main.home .hero .grid{align-items:center} main.home .hero .copy{position:relative;z-index:3;padding-top:48px;padding-bottom:48px} main.home .hero h1{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease} main.home .hero.in h1{opacity:1;transform:none} main.home .hero .lead,main.home .hero .skillgrit,main.home .hero .sub,main.home .hero .cta-row,main.home .hero .rule{opacity:0;transform:translateY(16px);transition:opacity .7s ease .12s,transform .7s ease .12s} main.home .hero.in .lead,main.home .hero.in .skillgrit,main.home .hero.in .sub,main.home .hero.in .cta-row,main.home .hero.in .rule{opacity:1;transform:none} main.home .hero .photo{position:relative;min-height:560px;overflow:hidden} main.home .hero .photo .img{position:absolute;inset:-8% 0;background-position:center;background-size:cover;will-change:transform;transform:translateY(var(--py,0))} main.home .hero .photo:after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,var(--cream) 0%,rgba(241,231,207,.85) 14%,rgba(241,231,207,.32) 36%,rgba(241,231,207,0) 58%)} main.home .hero .watermark{position:absolute;left:-7%;top:50%;width:560px;max-width:60%;opacity:.06;z-index:1;pointer-events:none;transform:translateY(calc(-50% + var(--py,0)));will-change:transform} @media(max-width:900px){main.home .hero .watermark{display:none}main.home .hero .photo{min-height:300px}} /* good people panel: navy-gradient handshake bg, text left */ .panel.gp{position:relative;overflow:hidden;min-height:360px} .panel.gp .bg{position:absolute;inset:0;background-image:url('/assets/img/good-people-handshake.webp');background-size:cover;background-position:62% center} .panel.gp:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 0%,rgba(21,39,63,.92) 24%,rgba(21,39,63,.5) 50%,rgba(21,39,63,.16) 100%)} .panel.gp > *{position:relative;z-index:2} .panel.gp .rule{max-width:120px;margin:6px 0 14px} @media(max-width:900px){.panel.gp{min-height:300px}.panel.gp .bg{background-position:64% center}} /* services grid cards + engraving icons */ main.home .svc-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:236px;opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease} main.home .svc-grid.in .svc-card{opacity:1;transform:none} main.home .svc-grid.in .svc-card:nth-child(2){transition-delay:.05s} main.home .svc-grid.in .svc-card:nth-child(3){transition-delay:.1s} main.home .svc-grid.in .svc-card:nth-child(4){transition-delay:.15s} main.home .svc-grid.in .svc-card:nth-child(5){transition-delay:.2s} main.home .svc-grid.in .svc-card:nth-child(6){transition-delay:.25s} .svc-card .ico{height:110px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:6px} .svc-card .ico img{height:110px;width:auto;display:block;filter:drop-shadow(0 3px 5px rgba(16,29,48,.12))} .svc-card:hover .ico img{transform:translateY(-3px);transition:transform .15s} /* generic reveal (home only) */ main.home [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease} main.home [data-reveal].in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ main.home [data-reveal],main.home .svc-card,main.home .hero h1,main.home .hero .lead,main.home .hero .skillgrit,main.home .hero .sub,main.home .hero .cta-row,main.home .hero .rule{opacity:1!important;transform:none!important} main.home .hero .photo .img,main.home .hero .watermark{transform:none!important} } /* home: keyword kicker in H1 (slogan stays the visual hero) + section intro copy */ main.home .hero h1 .kicker{display:block;font-family:'Oswald',sans-serif;font-size:14px;letter-spacing:.13em;text-transform:uppercase;color:var(--rust);font-weight:600;margin:0 0 12px;line-height:1.4} main.home .hero h1 .slogan{display:block} @media(max-width:760px){main.home .hero h1 .kicker{font-size:12px;letter-spacing:.1em}} .sec-intro{max-width:72ch;margin:14px auto 0;font-size:17px;line-height:1.62;color:var(--ink);text-wrap:pretty} /* ============ GLOSSARY ============ */ .glossary-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px} .glossary-nav a{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:12.5px;font-weight:600;color:var(--navy);background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:7px 14px} .glossary-nav a:hover{border-color:var(--rust);color:var(--rust)} .glossary-cat{padding:14px 0 6px;scroll-margin-top:90px} .glossary-cat h2{font-size:28px;color:var(--navy);border-bottom:2px solid var(--gold);padding-bottom:8px;margin:0 0 18px} .glossary-terms{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:10px} @media(max-width:760px){.glossary-terms{grid-template-columns:1fr}} .glossary-term{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:18px 20px;scroll-margin-top:90px} .glossary-term h3{font-family:'Source Sans 3',sans-serif;font-weight:700;text-transform:none;letter-spacing:0;color:var(--navy);font-size:18px;margin:0 0 6px;line-height:1.35} .glossary-term p{font-size:15.5px;line-height:1.55;color:var(--ink);margin:0 0 8px;text-wrap:pretty} .glossary-term .why{font-size:14.5px;color:var(--mut)} .glossary-term .rel{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-weight:700;color:var(--rust)} /* ============================================================ Conversion bar + trust bar — interior pages Both sit under the header, above the ranking content. The comp already establishes rust for the primary action and navy for the secondary, so these reuse .btn-rust / .btn-ghost tokens rather than introducing a new button language. ============================================================ */ /* ConversionBar retired 2026-08-06: both actions live in the header now. */ /* ---- proof points, inside the hero copy column ---- These were a full-width band between the header and the breadcrumb, which read as a wall of text and pushed the real content further down. In the hero column they fill the space the copy leaves and stop the section height being driven entirely by the form card beside it. */ .proof{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)} .proof-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 26px;margin:0;padding:0;list-style:none} .proof-points li{font-size:13.5px;color:var(--mut);line-height:1.4} .proof-points li span{display:block} .proof-points strong{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase; letter-spacing:.05em;font-weight:700;color:var(--navy);font-size:15px} .proof-roc{display:block;font-size:12.5px;color:var(--mut)} .proof-sg{margin:18px 0 0;font-size:13.5px;color:var(--mut);line-height:1.5} .sg-mark{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.03em; font-size:15px;color:var(--navy)} /* ---- booking card ---- Anton is a poster face; at 24px uppercase inside a 400px card it read as shouty and cramped and fought the fine print. Card headings use Oswald at caption size with letter-spacing, matching .eyebrow and the buttons, so the two phone/booking actions carry the visual weight instead of a label. */ .sched{background:#fff;border:1px solid var(--line);border-radius:12px; padding:22px 24px 20px;box-shadow:0 2px 0 rgba(21,39,63,.06)} .sched-eyebrow{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase; letter-spacing:.14em;font-size:11.5px;font-weight:600;color:var(--mut);margin:0 0 10px} .sched .btn{width:100%;justify-content:center} .sched-urgent .btn-call{background:var(--rust);color:#fff;box-shadow:0 3px 0 var(--rust-2); font-size:21px;padding:16px 20px} .sched-urgent .btn-call:hover{background:var(--rust-2)} .sched-note{margin:10px 0 0;font-size:13px;color:var(--mut);line-height:1.5} .sched-rule{display:flex;align-items:center;gap:14px;margin:22px 0 20px; font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.16em; font-size:11px;color:var(--mut)} .sched-rule::before,.sched-rule::after{content:"";height:1px;background:var(--line);flex:1} .sched-sub{margin:0 0 14px;font-size:14px;color:var(--ink);line-height:1.45} .sched-book .btn-book{background:transparent;color:var(--navy);border-color:var(--navy); font-size:16px;padding:14px 20px} .sched-book .btn-book:hover{background:var(--navy);color:#fff} @media (max-width:760px){ .trustbar-inner{padding:10px 18px;gap:10px} .proof-points{gap:14px} .proof-points li{font-size:13px} } /* ---- split hero: message left, booking right ---- The booking column is the conversion path; the copy column keeps the ranking content. Below 960px the form drops under the headline rather than squeezing, because a cramped form converts worse than a stacked one. */ /* Vertical padding lives on the SECTION only. .interior-hero already applies 64px top and bottom, and the grid was adding another 34/30 on top, wrapping 192px of padding around a 448px card. The grid keeps horizontal padding only. */ .interior-hero-split{padding-top:40px;padding-bottom:40px} .interior-hero-split .hero-split{display:grid;grid-template-columns:1fr 430px;gap:48px; align-items:center;padding:0 28px} .hero-split-copy h1{max-width:15em} .hero-split-copy .lead{max-width:52ch} .hero-split-book{position:sticky;top:96px} @media (max-width:960px){ .interior-hero-split .hero-split{grid-template-columns:1fr;gap:26px;padding:32px 18px} .hero-split-book{position:static} .hero-split-copy h1{max-width:none} } /* The hero booking card already carries call + book on desktop, so the bar would be the third phone number in the first screen. Keep it on mobile, where that card sits below the fold. */ /* ---- lead form (hero) ---- */ .leadform{display:block} .leadform-honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .leadform-row{margin-bottom:9px} .leadform-row label{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase; letter-spacing:.1em;font-size:10px;font-weight:600;color:var(--mut);margin:0 0 4px} .leadform-row input,.leadform-row textarea{width:100%;font-family:'Source Sans 3',system-ui,sans-serif; /* 16px stays: anything smaller makes iOS Safari zoom the page on focus. */ font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line); border-radius:6px;padding:9px 11px;line-height:1.3} .leadform-row textarea{resize:vertical;min-height:56px} .leadform-row input:focus,.leadform-row textarea:focus{outline:2px solid var(--rust);outline-offset:1px; border-color:var(--rust)} .leadform-submit{width:100%;justify-content:center;background:var(--rust);color:#fff; box-shadow:0 3px 0 var(--rust-2);margin-top:8px;font-size:15px;padding:12px 20px} .leadform-submit:hover:not(:disabled){background:var(--rust-2)} .leadform-submit:disabled{opacity:.6;cursor:progress} .leadform-error{margin:10px 0 0;font-size:13.5px;color:var(--rust-deep);line-height:1.45} .leadform-note{margin:11px 0 0;font-size:12.5px;color:var(--mut);text-align:center;line-height:1.5} .leadform-note a{font-weight:700} .leadform--done .leadform-done-heading{font-family:'Oswald',sans-serif;text-transform:uppercase; letter-spacing:.05em;font-size:17px;font-weight:700;color:var(--navy);margin:0 0 8px} .leadform--done .leadform-done-text{margin:0;font-size:14px;color:var(--mut);line-height:1.55} /* ---- proof band (site-wide) ---- The comp styles this band under .homepage, so it only ever rendered on the home page. These unscoped rules mirror those values so the band works on all 267 pages; the .homepage rules keep winning on the home page by specificity, so nothing there changes. */ .trust{position:relative;z-index:2;overflow:hidden;background:var(--navy); padding:16px 44px;border-top:3px solid var(--accent,#C9A765); border-bottom:3px solid var(--accent,#C9A765)} .trust-inner{position:relative;z-index:1;max-width:1240px;margin:0 auto; display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:10px 18px} /* Five columns, one per item. The separators were flex children of a space-between row; in a five-track grid they would each claim a cell, so the column rule does the dividing instead. */ .trust-inner .trust-sep{display:none} .trust-item{border-left:1px solid rgba(201,167,101,.22);padding-left:18px} .trust-item:first-of-type{border-left:0;padding-left:0} .trust-item{display:flex;align-items:center;gap:13px} .trust-ic{width:44px;height:44px;display:flex;align-items:center;justify-content:center; flex-shrink:0;color:#fff} .trust-ic svg{width:36px;height:36px} .trust-lab{font-family:'Oswald',sans-serif;font-size:14.5px;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1.15} .trust-sub{font-family:'Source Sans 3',system-ui,sans-serif;font-size:12.5px; letter-spacing:0;text-transform:none;color:rgba(255,255,255,.72);margin-top:3px;line-height:1.3} .trust-sg{color:var(--accent,#C9A765)} .trust-sep{width:1px;height:42px;background:rgba(201,167,101,.25)} @media (max-width:1100px){ .trust{padding:14px 20px} .trust-sep{display:none} .trust-inner{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 14px} } /* Phones: a 2x2 grid. First Responder Founded sits out so four items fill it evenly. (James, 2026-08-01.) Five columns is a desktop instruction; five tracks on a 390px screen gives each item 66px, so that decision stands here. */ @media (max-width:760px){ .trust-inner{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;justify-content:stretch} .trust-item--founder{display:none} .trust-item{border-left:0;padding-left:0} } /* emergency path under the form */ .leadform-or{display:flex;align-items:center;gap:12px;margin:14px 0 10px; font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.16em; font-size:10.5px;color:var(--mut)} .leadform-or::before,.leadform-or::after{content:"";height:1px;background:var(--line);flex:1} .leadform-call{display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap; text-align:center;text-decoration:none} .leadform-call-label{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em; font-size:11px;font-weight:600;color:var(--mut)} .leadform-call-number{font-family:'Oswald',sans-serif;font-size:21px;font-weight:700; letter-spacing:.02em;color:var(--rust)} .leadform-call:hover .leadform-call-number{color:var(--rust-2)} .leadform-note{margin:6px 0 0;font-size:12px;color:var(--mut);text-align:center;line-height:1.45} /* ---- sticky rail CTA ---- .sidebar is already position:sticky. The problem was it had nothing in it once the old CTA came out, so it ended after 120px beside a long article. */ .side-cta{display:block} .side-k{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase; letter-spacing:.06em;font-size:12.5px;font-weight:600;color:var(--cream); line-height:1.35;margin-bottom:10px} .side-phone{display:block;font-family:'Anton',sans-serif;font-size:27px; color:var(--gold,#C9A765);margin:0 0 12px;letter-spacing:.01em} .side-phone:hover{color:#f3cd72} .side-book{display:block;width:100%;justify-content:center;text-align:center; background:var(--rust);color:#fff;box-shadow:0 3px 0 var(--rust-2);border-color:var(--rust)} .side-book:hover{background:var(--rust-2);color:#fff} /* ---- sticky rail CTA ---- .sidebar is already position:sticky. The problem was it had nothing in it once the old CTA came out, so it ended after 120px beside a long article. */ .side-cta{display:block} .side-k{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase; letter-spacing:.06em;font-size:12.5px;font-weight:600;color:var(--cream); line-height:1.35;margin-bottom:10px} .side-phone{display:block;font-family:'Anton',sans-serif;font-size:27px; color:var(--gold,#C9A765);margin:0 0 12px;letter-spacing:.01em} .side-phone:hover{color:#f3cd72} .side-book{display:block;width:100%;justify-content:center;text-align:center; background:var(--rust);color:#fff;box-shadow:0 3px 0 var(--rust-2);border-color:var(--rust)} .side-book:hover{background:var(--rust-2);color:#fff} /* ---- sticky rail CTA ---- .sidebar is already position:sticky. The problem was it had nothing in it once the old CTA came out, so it ended after 120px beside a long article. */ .side-cta{display:block} .side-k{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase; letter-spacing:.06em;font-size:12.5px;font-weight:600;color:var(--cream); line-height:1.35;margin-bottom:10px} .side-phone{display:block;font-family:'Anton',sans-serif;font-size:27px; color:var(--gold,#C9A765);margin:0 0 12px;letter-spacing:.01em} .side-phone:hover{color:#f3cd72} .side-book{display:block;width:100%;justify-content:center;text-align:center; background:var(--rust);color:#fff;box-shadow:0 3px 0 var(--rust-2);border-color:var(--rust)} .side-book:hover{background:var(--rust-2);color:#fff} .side-note{display:block;font-size:12.5px;color:rgba(255,255,255,.7); margin-top:10px;line-height:1.45} /* ---- area hero with a photo ---- Photo carries the section. A dark scrim lets the headline go cream instead of the photo being washed out to keep navy text readable, so the photograph keeps its contrast rather than both being compromised. The white booking card is the one bright element, which is where the eye should land anyway. */ .interior-hero-photo{position:relative;overflow:hidden} /* Artwork now arrives as a real image element (indexable, alt text, LCP); same box, same crop as the old ::before background. */ .interior-hero-photo .interior-hero-pic{position:absolute;inset:0;z-index:0} .interior-hero-pic img{width:100%;height:100%;object-fit:cover; object-position:center 58%;display:block} .interior-hero-photo::before{content:"";position:absolute;inset:0;z-index:0; background-image:var(--hero-photo);background-size:cover;background-position:center 58%} .interior-hero-photo::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(92deg, rgba(31,22,42,.88) 0%, rgba(31,22,42,.76) 34%, rgba(31,22,42,.54) 58%, rgba(31,22,42,.44) 100%)} .interior-hero-photo > *{position:relative;z-index:2} /* No panel behind the copy: the scrim does that job. */ .interior-hero-photo .hero-split-copy{background:none;border:0;box-shadow:none;padding:0} .interior-hero-photo .hero-split-copy h1{color:#fff} .interior-hero-photo .hero-split-copy .lead{color:rgba(255,255,255,.88);max-width:48ch} .interior-hero-photo .hero-split-copy .eyebrow{color:#F2A48F} @media (max-width:960px){ .interior-hero-photo::after{background:linear-gradient(180deg, rgba(31,22,42,.86) 0%, rgba(31,22,42,.72) 46%, rgba(31,22,42,.56) 100%)} } .leadform-intro{margin:0 0 14px;font-size:14px;color:var(--ink);line-height:1.45} .sched-book{width:100%;justify-content:center;background:transparent;color:var(--navy); border-color:var(--navy);font-size:15px;padding:12px 20px} .sched-book:hover{background:var(--navy);color:#fff} /* ---- area hero, home-page pattern ---- Photo fills the right and fades to cream across the middle, copy sits on the left over the fade. Mirrors the home hero rather than inventing a second treatment, so an area page reads as the same site. */ .area-hero{position:relative;overflow:hidden;background:var(--cream); border-bottom:1px solid var(--line)} /* The hero artwork is a real (SEO: indexable, alt text, early LCP discovery). The wrapper still owns placement; the img fills it exactly the way the old background-image did. */ .area-hero-img{position:absolute;inset:0;z-index:1} .area-hero-img img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:right center;display:block} .area-hero-img::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg, rgba(241,231,207,.95) 0%, rgba(241,231,207,.80) 40%, rgba(241,231,207,.30) 70%, rgba(241,231,207,0) 92%)} /* The family hero paints its own calm left third, so the standard fade double-washes it; this narrower one clears the vans by mid-frame. */ .area-hero--fade-narrow .area-hero-img::after{background:linear-gradient(90deg, rgba(241,231,207,.95) 0%, rgba(241,231,207,.82) 26%, rgba(241,231,207,.22) 46%, rgba(241,231,207,0) 60%)} /* Desktop: size the photo layer to the image itself (full hero height, 16:9) rather than the whole hero, so `cover` stops cropping the painting top and bottom - these are street scenes where the sky and road are the composition. Its left edge then lands at a different place on every viewport (20% at 1280, 47% at 1920, 60% at 2560), so a percentage gradient cannot hide the seam; a mask on the layer's own left edge dissolves it wherever it falls. Bonus: the image renders 1025px wide instead of stretching to the viewport, which drops the upscale from 1.72x to 1.22x on a retina laptop. */ @media(min-width:761px){ .area-hero-img{left:auto;right:0;width:auto;aspect-ratio:16/9; background-position:center; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%); mask-image:linear-gradient(90deg,transparent 0,#000 26%)} } .area-hero-inner{position:relative;z-index:2;padding:40px 28px 36px;max-width:1240px;margin:0 auto; display:flex;flex-direction:column;justify-content:center} @media(min-width:761px){ /* Band height tracks the viewport so the 16:9 painting keeps real presence on wide monitors instead of shrinking to a text-height stamp. 26vw => ~375px at 1440, ~520px at 2000, capped at 640. */ .area-hero-inner{min-height:clamp(320px,26vw,640px)} } .area-hero h1{max-width:50%;margin:6px 0 14px} .area-hero .lead{max-width:50%;font-size:18px;color:var(--navy);line-height:1.5} .area-hero-btns{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:26px} .area-hero-btns .btn-rust{padding:15px 30px;font-size:16px} .area-hero-call{display:flex;flex-direction:column;text-decoration:none} .area-hero-call-label{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em; font-size:11px;font-weight:600;color:var(--mut)} .area-hero-call-number{font-family:'Anton',sans-serif;font-size:26px;color:var(--rust);letter-spacing:.01em;line-height:1.1} .area-hero-call:hover .area-hero-call-number{color:var(--rust-2)} .area-hero-note{margin:14px 0 0;font-size:13px;color:var(--mut)} @media (max-width:860px){ .area-hero-img::after{background:linear-gradient(180deg, var(--cream) 0%, rgba(241,231,207,.9) 46%, rgba(241,231,207,.55) 100%)} .area-hero-inner{padding:34px 20px 30px} .area-hero .lead{max-width:none} .area-hero h1{max-width:none} } /* ---- reviews on area pages ---- */ .revblock{background:var(--paper);border-top:1px solid var(--line);padding:44px 0 40px} .revblock h2{margin:0 0 22px} .revgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px} .revcard{margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 24px} .revstars{color:var(--rust);font-size:15px;letter-spacing:.12em;margin-bottom:10px} .revcard p{margin:0 0 14px;font-size:15.5px;line-height:1.55;color:var(--ink)} .revcard cite{font-style:normal;font-family:'Oswald',sans-serif;text-transform:uppercase; letter-spacing:.06em;font-size:12.5px;font-weight:600;color:var(--navy); display:flex;gap:10px;align-items:baseline;flex-wrap:wrap} .revcity{font-family:'Source Sans 3',system-ui,sans-serif;text-transform:none;letter-spacing:0; font-size:12.5px;font-weight:400;color:var(--mut)} .revnote{margin:18px 0 0;font-size:13px;color:var(--mut)} /* Monsoon callout on area pages. Storm-sky navy against the cream body so the seasonal warning reads as a distinct object rather than another paragraph. */ .monsoon-card{background:var(--navy);color:var(--cream);border-left:4px solid var(--gold);border-radius:3px;padding:20px 24px;margin:26px 0 30px;} .monsoon-card h2{margin:0 0 2px;color:var(--cream);font-size:22px;line-height:1.2;} .monsoon-card .monsoon-window{margin:0 0 12px;color:var(--gold);font-family:var(--mono,ui-monospace,monospace);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;} .monsoon-card p{margin:0;color:var(--cream);font-size:17px;line-height:1.62;text-wrap:pretty;} @media(max-width:760px){.monsoon-card{padding:17px 18px;margin:22px 0 24px}.monsoon-card h2{font-size:20px}} /* Legal documents (privacy, terms, ADA, SMS program). Narrow measure and generous leading: these are read, not skimmed, and often on a phone. */ .legal-doc{max-width:74ch;padding:38px 28px 64px} .legal-doc h2{font-size:24px;line-height:1.25;margin:34px 0 10px} .legal-doc section:first-of-type h2{margin-top:6px} .legal-doc p{margin:0 0 14px;font-size:17px;line-height:1.72;text-wrap:pretty} .legal-doc .legal-list{margin:0 0 16px 1.2em;padding:0} .legal-doc .legal-list li{margin:0 0 8px;font-size:17px;line-height:1.65} .legal-date{margin:8px 0 0;color:var(--mut);font-size:14px} @media(max-width:760px){.legal-doc{padding:26px 20px 46px}.legal-doc h2{font-size:21px}} /* Footer legal row. These were plain text before, which meant the privacy policy and SMS program terms were unreachable from the site - a 10DLC registration problem, not just a UX one. */ .f-legal{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center} .f-legal a{color:inherit;text-decoration:none;opacity:.85} .f-legal a:hover{opacity:1;text-decoration:underline} /* Promotions. Offer cards on the hub, split hero on the detail page. The image sits right so the offer and the CTA lead on every breakpoint. */ .promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;padding:38px 28px 56px} .promo-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s} .promo-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(19,33,46,.14)} .promo-card-img{height:180px;background-size:cover;background-position:center;background-color:var(--block)} .promo-card-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px} .promo-kicker{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--rust)} .promo-card h2{font-size:22px;line-height:1.2;margin:0} .promo-card p{margin:0;font-size:15.5px;line-height:1.55;color:var(--mut)} .promo-cta{margin-top:4px;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--rust)} .promo-hero{background:var(--cream);border-bottom:1px solid var(--line)} .promo-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;padding:44px 28px} .promo-hero-copy h1{margin:6px 0 14px;max-width:16em} .promo-hero-copy .lead{font-size:18px;line-height:1.6;color:var(--navy);margin:0 0 14px;max-width:52ch} .promo-hero-btns{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px} .promo-call{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:14px;color:var(--navy);text-decoration:none} .promo-call:hover{color:var(--rust)} .promo-terms{margin:18px 0 0;font-size:12.5px;line-height:1.55;color:var(--mut);max-width:56ch} .promo-hero-img{min-height:320px;border-radius:4px;background-size:cover;background-position:center;background-color:var(--block)} @media(max-width:820px){ .promo-hero-inner{grid-template-columns:1fr;gap:24px;padding:30px 20px} .promo-hero-img{min-height:220px;order:2} .promo-grid{padding:28px 20px 44px} } /* Service-areas mega now carries all 34 locations, so each region splits into columns rather than running as one very long list. */ .mega-area .mega-cols{gap:34px} .mega-area-group{min-width:0} .mega-area-cols{display:flex;gap:22px} .mega-area-cols ul{margin:0} .mega-comm .mega-cols{gap:28px} /* Office-filtered mega menu (Service Areas + Commercial Services). Offices down the left, list on the right; modelled on the old site's menu. */ .omega{display:flex;gap:0;min-width:min(940px,88vw)} .omega-offices{display:flex;flex-direction:column;gap:10px;padding:22px;background:var(--paper);border-right:1px solid var(--line);flex:0 0 190px} .omega-office{display:flex;align-items:center;gap:9px;width:100%;padding:13px 16px;border:1px solid var(--rust);border-radius:4px;background:rgba(224,78,57,.06);color:var(--rust);font-family:'Oswald',sans-serif;font-size:15px;letter-spacing:.03em;cursor:pointer;transition:background .14s,color .14s;text-align:left} .omega-office:hover{background:rgba(224,78,57,.14)} .omega-office.is-active{background:var(--rust);color:#fff;border-color:var(--rust)} .omega-panel{flex:1;padding:22px 24px;display:flex;flex-direction:column;min-width:0} .omega-cols{display:grid;grid-template-columns:repeat(var(--omega-cols,4),minmax(0,1fr));gap:4px 26px;flex:1} .omega-cols ul{list-style:none;margin:0;padding:0} .omega-cols li{margin:0} .omega-cols a{display:flex;align-items:center;gap:8px;padding:6px 0;color:var(--ink);text-decoration:none;font-size:15px;white-space:nowrap} .omega-cols a:hover{color:var(--rust)} .omega-pin{color:var(--rust);flex:0 0 auto} .omega-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .omega-all{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--rust);text-decoration:none} .omega-phone{display:flex;flex-direction:column;text-decoration:none;text-align:right} .omega-phone span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);font-family:'Oswald',sans-serif} .omega-phone strong{font-family:'Anton',sans-serif;font-size:19px;color:var(--rust);font-weight:400} @media(max-width:1000px){ .omega{flex-direction:column;min-width:0} .omega-offices{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line);flex-basis:auto;padding:14px} .omega-office{width:auto;flex:1 1 auto;justify-content:center;padding:10px 12px;font-size:14px} .omega-cols{grid-template-columns:repeat(2,minmax(0,1fr))} .omega-cols a{white-space:normal} .omega-panel{padding:16px} } /* ── Commercial pages ────────────────────────────────────────────────────── Same section graphics as the old site (photo/copy splits, checkmark lists, section icons, gold band, split CTA card) in this site's palette. */ .cx-hero{background:var(--cream);border-bottom:1px solid var(--line)} .cx-hero-inner{max-width:1240px;margin:0 auto;padding:40px 28px 36px} .cx-hero-inner h1{max-width:18em;margin:6px 0 14px} .cx-hero-inner .lead{max-width:66ch;font-size:18px;line-height:1.62;color:var(--navy);margin:0 0 12px} .cx-hero-btns{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:22px} .cx-call{display:flex;flex-direction:column;text-decoration:none} .cx-call-label{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;color:var(--mut)} .cx-call-number{font-family:'Anton',sans-serif;font-size:26px;color:var(--rust);line-height:1.1} .cx-band{background:var(--paper)} .cx-split{max-width:1240px;margin:0 auto;padding:46px 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px;align-items:center} .cx-split.cx-flip .cx-photo{order:2} .cx-photo{min-height:340px;border-radius:4px;background-size:cover;background-position:center;background-color:var(--block)} .cx-copy h2{margin:0 0 12px;max-width:19em} .cx-copy p{margin:0 0 14px;font-size:17px;line-height:1.68;max-width:62ch;text-wrap:pretty} .cx-strong{font-weight:600} .cx-icon{display:inline-flex;color:var(--rust);margin-bottom:6px} .cx-checks{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px} /* Rows read as a list, not eight headlines: the checkmark supplies the emphasis, so the text stays regular. The lead sentence above the list is what deserves the weight, since it is the claim the list evidences. */ .cx-checks li{display:flex;align-items:flex-start;gap:11px;font-size:16.5px;line-height:1.5;font-weight:400} .cx-copy > .lead,.cx-band .lead{font-weight:700} .cx-check{color:var(--rust);flex:0 0 auto;margin-top:2px} .cx-cardsec{max-width:1240px;margin:0 auto;padding:46px 28px} .cx-cardsec h2{margin:0 0 10px} .cx-lead{font-size:17px;line-height:1.68;max-width:66ch;margin:0 0 18px} .cx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:0 0 18px} .cx-card{display:flex;align-items:flex-start;gap:11px;background:var(--cream);border:1px solid var(--line);border-radius:4px;padding:15px 17px;font-size:16px;line-height:1.45;font-weight:600} /* Gold band, matching the old site's tan "why choose us" section. */ /* Was a gold gradient. James asked for a different colour on the commercial pages, so this band now uses the deep navy of the brand with the steel blue accent, which also stops commercial competing with the residential gold. */ .cx-gold{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;position:relative} .cx-gold .cx-strong{color:#8FC6D8} /* Square art fills its column. The previous rule used a background-image with background-size:contain and a paper backdrop, which letterboxed a square painting inside a wider box and drew bars either side of it. A real at 100% of the column keeps its own shape and fills the width. */ .cx-art{display:block;width:100%;height:auto;border-radius:3px} .cx-gold .cx-copy h2,.cx-gold .cx-copy p{color:#fff} .cx-gold .cx-checks li{color:#fff} .cx-gold .cx-check{color:var(--rust)} .cx-gold .cx-photo{box-shadow:0 14px 34px rgba(60,40,10,.28)} /* Split CTA: rust copy panel beside the consultation form. */ .cx-ctaband{background:var(--cream);padding:46px 0 56px} .cx-ctacard{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 18px 44px rgba(19,33,46,.16);border-radius:5px;overflow:hidden} .cx-ctacopy{background:var(--rust);color:#fff;padding:40px 38px;display:flex;flex-direction:column;justify-content:center} .cx-ctacopy h2{color:#fff;margin:0 0 14px;max-width:16ch} .cx-ctacopy p{color:#fff;font-size:17px;line-height:1.62;margin:0 0 12px} .cx-ctaphone{margin-top:10px;font-family:'Anton',sans-serif;font-size:30px;color:#fff;text-decoration:none;letter-spacing:.01em} .cx-ctaform{background:#fff;padding:34px 34px 38px} .cx-ctaform h3{margin:0 0 16px;font-size:23px} .cx-more{max-width:1240px;margin:0 auto;padding:44px 28px} @media(max-width:900px){ .cx-split{grid-template-columns:1fr;gap:24px;padding:32px 20px} .cx-split.cx-flip .cx-photo{order:0} .cx-photo{min-height:230px} .cx-ctacard{grid-template-columns:1fr} .cx-ctacopy,.cx-ctaform{padding:28px 22px} .cx-cardsec,.cx-more{padding:32px 20px} .cx-hero-inner{padding:28px 20px} } /* ---- fixed Arizona ridge behind every page ---- Cream moved to ; body is transparent so the z-index:-1 ridge sits between the two: behind all content, above the page ground. */ body{background:transparent} .az-ridge{position:fixed;left:0;right:0;bottom:0;z-index:-1;pointer-events:none} /* Intrinsic ratio: the svg keeps its own 3200:420 shape at every width, so no slice can ever cut a ridge mid-slope. ~13vw tall; 55px on a phone. */ .az-ridge svg{display:block;width:100%;height:auto} /* ---- area coverage block ---- Neighbourhood and ZIP lists: reference data, set as label/value rows rather than prose. Two columns on desktop so the long comma-separated strings do not run the full measure; stacked on narrow screens. */ .coverage{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px; margin:26px 0 30px;padding:16px 18px;background:var(--paper); border:1px solid var(--line);border-radius:8px;font-size:15.5px} .coverage dt{font-family:'Oswald',sans-serif;text-transform:uppercase; letter-spacing:.07em;font-size:12px;font-weight:600;color:var(--mut); padding-top:3px;white-space:nowrap} .coverage dd{margin:0;color:var(--ink);line-height:1.5;text-wrap:pretty} @media(max-width:600px){ .coverage{grid-template-columns:1fr;gap:2px 0;padding:14px 15px} .coverage dd{margin-bottom:10px} .coverage dd:last-child{margin-bottom:0} } /* ============================================================================= TYPE: Trade Gothic Next (Adobe Fonts kit nnv1hnz) ============================================================================= Shipped 2026-08-07, replacing Anton / Big Shoulders Display / Oswald / Source Sans 3. Ran as an opt-in trial first (?type=tgn) so it could be compared against the outgoing stack on the live site and reverted with a URL. WEIGHTS. The kit ships 300 Light, 400 Regular, 700 Bold, 800 Heavy, plus italics on the two roman families. There is no Medium (500): 700 carries the "step up without a jump to display" role and 800 takes the display work. Every weight used below is one the kit actually ships, because a weight the family lacks gets synthesised by the browser, which is banned here. FAMILIES. Only trade-gothic-next and trade-gothic-next-condensed are used. The kit also publishes compressed and three Soft Round cuts; nothing references them, so no browser requests those files. ========================================================================== */ /* ---- 1. Body: Regular replaces Source Sans 3 ---- */ body, input, textarea, select { font-family: 'trade-gothic-next', system-ui, sans-serif; font-weight: 400; } /* ---- 2. Display: Condensed Heavy replaces Big Shoulders / Anton ---- Trade Gothic sits wider than Big Shoulders at the same size, so the tight .98 line-height the old face needed would collide here. */ h1, h2, h3, .display, .brandblock .name { font-family: 'trade-gothic-next-condensed', sans-serif; font-weight: 800; letter-spacing: .01em; line-height: 1.04; } /* ---- 3. Phone numbers and service names: Condensed Bold ---- The number is the single most important string on a plumber's page; it gets its own cut so it reads as a control rather than as text. */ .area-hero-call-number, .sidebar .phone, footer.site .f-call-number, .testi .badge, .testi .badge b, .steps li:before, .sg-mark { font-family: 'trade-gothic-next-condensed', sans-serif; font-weight: 700; letter-spacing: .005em; } /* ---- 4. The Medium role, carried by Bold ---- Subheads, card titles, FAQ questions: a step up from body without becoming display. In the roman family 700 reads as a firm mid-weight, not a shout. */ .content h3, .card h3, .svc-card h3, .hub-card h3, .glossary-term h3, .faq dt, .side-related h4, footer.site h2, footer.site h4 { font-family: 'trade-gothic-next', sans-serif; font-weight: 700; letter-spacing: 0; line-height: 1.32; } /* Card and hub titles were uppercase under Oswald; Trade Gothic reads better in sentence case at this weight, and the caps job moves to the labels. */ .svc-card h3, .hub-card h3 { text-transform: none; } /* ---- 5. CTAs and emergency callouts: Heavy ---- */ .btn, nav.main a.callbtn, nav.main a.bookbtn, .convbar-phone, .mega-all { font-family: 'trade-gothic-next', sans-serif; font-weight: 800; letter-spacing: .02em; } /* ---- 6. Labels and eyebrows: Condensed Bold, letterspaced ---- Small uppercase runs are what condensed type is genuinely good at, which is the one place the outgoing Oswald was doing real work. */ .eyebrow, .region-h, .trustbar .item b, .area-hero-call-label, .brandblock .tagline, .story .sig, .testi .who, .testi .badge span, .contact-form label, .glossary-nav a, .glossary-term .rel, .about-figure figcaption, footer.site .f-call-label, footer.site .f-badge, .proof-points strong, main.home .hero h1 .kicker, .hero .skillgrit, .hero .sub { font-family: 'trade-gothic-next-condensed', sans-serif; font-weight: 700; } /* ---- 7. Navigation ---- */ nav.main a, nav.main .mtoggle { font-family: 'trade-gothic-next-condensed', sans-serif; font-weight: 700; letter-spacing: .03em; } /* ---- 8. Dense data ---- Condensed was the plan here, but on the commercial pages it read wrong: those lists are read, not scanned like a spec table, and condensed made them feel cramped and cheap next to the roman body copy. Roman Regular for prose lists, Bold where a line is a label. Condensed now only earns its place in genuinely tabular data. */ .areas .cities, .linkcols, .cx-band li, .signs li { font-family: 'trade-gothic-next', sans-serif; font-weight: 400; } table { font-family: 'trade-gothic-next-condensed', sans-serif; font-weight: 400; } /* ---- 9. Pull quote: Regular, large. 26px of bold condensed shouts. ---- */ .testi blockquote { font-family: 'trade-gothic-next', sans-serif; font-weight: 400; } /* --------------------------------------------------------------------------- /reviews — the full published corpus --------------------------------------------------------------------------- The page shipped without these, so author, city and date rendered as three inline spans butted together with no separator. --------------------------------------------------------------------------- */ .rv-jump{margin:0 0 26px;font-size:15px;color:var(--mut)} .rv-jump a{color:var(--rust-2);font-weight:600} .rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:34px} .rv-card{margin:0;padding:24px;background:var(--paper);border:1px solid var(--line); border-radius:3px;display:flex;flex-direction:column;gap:12px} .rv-stars{color:var(--gold);letter-spacing:.12em;font-size:15px;line-height:1} .rv-card blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--ink);text-wrap:pretty} /* Flex with a gap rather than inline spans, so the three facts stay separated however they wrap, and the row sits on the card floor at any card height. */ .rv-card figcaption{margin-top:auto;padding-top:12px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px; font-size:13px;color:var(--mut)} .rv-who{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:13.5px;color:var(--navy)} .rv-city{color:var(--mut)} .rv-city::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%; background:var(--line);vertical-align:middle;margin-right:9px} /* The date is the least important of the three, so it is pushed to the far end and dimmed rather than removed: recency is the signal a reader is scanning for, and dropping it would cost more than the clutter it saves. */ .rv-card figcaption time{margin-left:auto;color:var(--mut);opacity:.75; font-variant-numeric:tabular-nums} @media(max-width:980px){.rv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:700px){.rv-grid{grid-template-columns:1fr}} /* --------------------------------------------------------------------------- COST GUIDE PAGES --------------------------------------------------------------------------- Deliberately not built on .interior-hero. These pages answer one question and the answer is a number, so the page opens with a title block and then the figure, rather than a photographic band the reader has to scroll past. --------------------------------------------------------------------------- */ .cg-top{padding:40px 0 26px;background:var(--cream)} .cg-kicker{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:700; color:var(--copper);margin:0 0 10px} .cg-h1{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; font-weight:800;text-transform:uppercase;font-size:clamp(34px,5vw,60px);line-height:.98; color:var(--navy);margin:0 0 14px;max-width:20em;text-wrap:balance} .cg-lead{font-size:19px;line-height:1.6;color:var(--ink);max-width:62ch;margin:0;text-wrap:pretty} /* --- the range card -------------------------------------------------------- */ .cg-range-sec{padding:0 0 34px;background:var(--cream)} .cg-range{border:2px solid var(--navy);background:var(--paper);padding:26px 30px 22px} .cg-range-h{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:700; color:var(--mut);margin:0 0 18px} .cg-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px} .cg-bar-end{display:flex;flex-direction:column;gap:2px} .cg-bar-end-hi{text-align:right} .cg-bar-k{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;color:var(--mut)} .cg-bar-v{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; font-size:clamp(30px,4vw,46px);font-weight:800;line-height:1;color:var(--navy); font-variant-numeric:tabular-nums} .cg-bar-track{position:relative;height:10px;background:var(--block);border:1px solid var(--line)} .cg-bar-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),var(--rust))} .cg-bar-mid{position:absolute;top:16px;left:50%;transform:translateX(-50%);white-space:nowrap; font-size:12px;color:var(--mut);letter-spacing:.02em} .cg-unit{margin:26px 0 0;font-size:14px;color:var(--mut);text-transform:lowercase} .cg-move{margin:16px 0 0;font-size:17px;line-height:1.6;color:var(--ink); padding-top:16px;border-top:1px solid var(--line);text-wrap:pretty} .cg-move strong{color:var(--navy)} .cg-caveat{margin:12px 0 0;font-size:14.5px;line-height:1.55;color:var(--mut);max-width:64ch} /* --- factors: a ruled set, not a numbered sequence ------------------------- */ .cg-factors{margin:0 0 30px;padding:0;border-top:1px solid var(--line)} .cg-factor{padding:16px 0;border-bottom:1px solid var(--line)} .cg-factors dt{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; text-transform:uppercase;letter-spacing:.04em;font-size:19px;font-weight:700; color:var(--navy);margin:0 0 5px} .cg-factors dd{margin:0;font-size:16.5px;line-height:1.62;color:var(--ink);text-wrap:pretty} @media(max-width:700px){ .cg-bar{grid-template-columns:1fr 1fr;gap:14px 20px} .cg-bar-track{grid-column:1/-1;order:3;margin-top:22px} .cg-bar-mid{top:-20px} .cg-range{padding:22px 20px 18px} } /* --- cost guide: one third / two thirds ------------------------------------ The rail carries the answer (title, range, caveat) and sticks, so the reader can refer back to the number while reading what drives it. Overrides the full-width sizes set above, which were written for the earlier stacked cut. */ .cg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:52px;padding:36px 0 46px;align-items:start} .cg-rail{position:sticky;top:24px} .cg-body>h2:first-child{margin-top:0} .cg-split .cg-h1{font-size:clamp(26px,2.5vw,36px);line-height:1.02;margin:0 0 10px;max-width:none} .cg-split .cg-lead{font-size:16px;line-height:1.55;margin:0 0 20px;max-width:none} .cg-split .cg-kicker{font-size:11px;margin:0 0 8px} /* Narrow card: endpoints share a row, the bar spans beneath them. */ .cg-split .cg-range{padding:18px 20px 16px} .cg-split .cg-range-h{font-size:11px;margin:0 0 14px} .cg-split .cg-bar{grid-template-columns:1fr 1fr;gap:0 12px} .cg-split .cg-bar-v{font-size:clamp(26px,2.4vw,34px)} .cg-split .cg-bar-track{grid-column:1/-1;margin-top:12px;position:relative} .cg-split .cg-bar-mid{grid-column:1/-1;position:static;transform:none; display:block;margin-top:8px;text-align:center;font-size:11.5px} .cg-split .cg-unit{margin-top:14px;font-size:13px} .cg-split .cg-move{font-size:15px;margin-top:14px;padding-top:14px} .cg-split .cg-caveat{font-size:13px;margin-top:10px} .cg-rel{margin:18px 0 0;font-weight:700} .cg-rel a{color:var(--rust-2)} @media(max-width:960px){ .cg-split{grid-template-columns:1fr;gap:32px;padding:28px 0 36px} .cg-rail{position:static} .cg-split .cg-h1{font-size:clamp(30px,6vw,42px)} } /* --- cost guide: the tape -------------------------------------------------- Fixed to the bottom on desktop so the figure and the phone stay reachable from anywhere in the page. The gold rule along the top is what gives it the taped-on look rather than a floating panel. */ .cg-tape{position:fixed;left:0;right:0;bottom:0;z-index:60; background:var(--navy-deep);border-top:3px solid var(--gold); box-shadow:0 -8px 24px -12px rgba(0,0,0,.5)} .cg-tape-in{display:flex;align-items:center;justify-content:space-between; gap:20px;padding:12px 28px;flex-wrap:wrap} .cg-tape-fig{margin:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;min-width:0} .cg-tape-name{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;font-weight:700; color:rgba(255,255,255,.66)} .cg-tape-range{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; font-size:22px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1} .cg-tape-act{display:flex;align-items:center;gap:16px;flex-shrink:0} .cg-tape-call{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; font-size:21px;font-weight:800;color:#fff;text-decoration:none;letter-spacing:.02em} .cg-tape-call:hover{color:var(--gold)} .cg-tape-btn{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; text-transform:uppercase;letter-spacing:.09em;font-weight:700;font-size:14px; background:var(--rust);color:#fff;padding:11px 22px;text-decoration:none;white-space:nowrap} .cg-tape-btn:hover{background:var(--rust-2)} /* Clear the footer so the tape never covers the last line of the page. */ body:has(.cg-tape) .site-footer, body:has(.cg-tape) footer{padding-bottom:84px} @media(max-width:700px){ .cg-tape-in{padding:10px 18px;gap:10px} .cg-tape-name{display:none} /* the page title is right above it */ .cg-tape-range{font-size:19px} .cg-tape-call{font-size:19px} .cg-tape-btn{padding:10px 16px;font-size:13px} body:has(.cg-tape) footer{padding-bottom:96px} } @media print{.cg-tape{display:none}} /* Financing note. Deliberately quiet: it answers the objection the figure raises without competing with the figure itself. */ .cg-tape-fin{font-size:12.5px;color:rgba(255,255,255,.72);letter-spacing:.02em; padding-left:14px;border-left:1px solid rgba(255,255,255,.22)} .cg-fin{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line); font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:700;color:var(--copper)} @media(max-width:700px){.cg-tape-fin{display:none}} /* --- financing ------------------------------------------------------------- */ .fin-top{padding:44px 0 34px;background:var(--cream)} .fin-h1{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; font-weight:800;text-transform:uppercase;font-size:clamp(38px,5.6vw,72px);line-height:.94; color:var(--navy);margin:0 0 16px;text-wrap:balance} .fin-lead{font-size:19px;line-height:1.6;color:var(--ink);max-width:64ch;margin:0 0 22px;text-wrap:pretty} .fin-quick{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px} .fin-quick li{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--navy);font-size:16px} .fin-quick li::before{content:"★";color:var(--rust);font-size:11px} .fin-cta{display:inline-block} .fin-body{max-width:74ch;padding:34px 0 44px} .fin-quote{margin:26px 0;padding:20px 26px;background:var(--paper);border:2px solid var(--navy); font-size:19px;line-height:1.55;color:var(--navy);font-weight:600;text-wrap:pretty} .fin-disclosure{margin:28px 0 0;padding-top:16px;border-top:1px solid var(--line); font-size:13.5px;line-height:1.55;color:var(--mut)} a.cg-tape-fin{text-decoration:underline;text-underline-offset:2px} a.cg-tape-fin:hover{color:#fff} .cg-fin a{color:var(--copper);text-decoration:underline;text-underline-offset:2px} /* --- header: crest shrinks on scroll --------------------------------------- Desktop and tablet only. The phone header is already compact, and shrinking it further would push the logo below a usable tap target. */ @media(min-width:761px){ .crest{transition:height .22s ease} header.site.is-shrunk .crest{height:78px} header.site.home.is-shrunk .crest{height:88px} header.site{transition:padding .22s ease} } @media(prefers-reduced-motion:reduce){ .crest,header.site{transition:none} } /* Financing line inside the sidebar booking card. */ .side-fin{display:block;margin-top:12px;padding-top:12px; border-top:1px solid rgba(255,255,255,.18); font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:700; color:var(--gold);text-decoration:none} .side-fin:hover{color:#fff;text-decoration:underline;text-underline-offset:2px} /* --- service hero art ------------------------------------------------------ The art runs to the RIGHT EDGE of the page and dissolves leftward into the cream, the same way the area hero and the home hero do. One treatment for every hero on the site. It used to be the mirror image of this: a band pinned to the LEFT edge, stopping at 72%, under a wash that stayed near-opaque for its first 62%. That produced the worst of both — a picture you could not see, and a bare tan quarter down the right side where the picture should have been. The booking card sits over the art now. That is fine, and deliberate: it is a solid navy panel, so it reads as a card on a photograph, exactly like the city+service heroes already do. */ .interior-hero-split.has-art{position:relative;overflow:hidden} .interior-hero-split.has-art .hero-art{position:absolute;inset:0 0 0 auto;width:78%;z-index:0} .interior-hero-split.has-art .hero-art picture, .interior-hero-split.has-art .hero-art img{width:100%;height:100%;object-fit:cover; object-position:right center;display:block} /* Legibility first, but only where the copy actually is. The wash is opaque across the text measure on the left and clears completely by the right edge, so the half of the painting that carries the subject is seen. */ .interior-hero-split.has-art .hero-art::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(237,234,224,.98) 0%,rgba(237,234,224,.93) 34%, rgba(237,234,224,.55) 58%,rgba(237,234,224,.14) 82%,rgba(237,234,224,0) 100%)} /* Feather the band's LEFT edge. Its left edge lands at a different place on every viewport, so a percentage gradient alone cannot hide the seam; a mask on the layer itself dissolves it wherever it falls. */ .interior-hero-split.has-art .hero-art{ -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%); mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%)} .interior-hero-split.has-art .hero-split{position:relative;z-index:1} /* --- mobile: the art moves below the copy, uncovered ---------------------- On phones the painting sat BEHIND the text under a 90-97% cream wash, which is to say it was invisible. Nothing is gained by hiding a picture behind type. Below 860px the hero becomes a simple column: headline, then the two actions, then the image full width with NO wash over it at all. Legibility needs the wash only on desktop, where the copy actually sits on the art. */ @media(max-width:860px){ .interior-hero-split.has-art{display:flex;flex-direction:column} .interior-hero-split.has-art .hero-split{order:1} .interior-hero-split.has-art .hero-art{ order:2;position:static;width:100%;height:auto;margin-top:22px; -webkit-mask-image:none;mask-image:none} .interior-hero-split.has-art .hero-art img, .interior-hero-split.has-art .hero-art picture{height:auto;object-fit:contain} /* No overlay on mobile. The image is the image. */ .interior-hero-split.has-art .hero-art::after{content:none} } /* --- hero CTA (replaces the hero lead form) -------------------------------- Booking is ServiceTitan. The form that sat here collected name, phone and address that the ServiceTitan flow asks for again, so it was two funnels stacked. One button, one number, one line of reassurance. */ /* The panel is translucent so the painting behind it stays part of the hero, borrowing the home page's "see what it costs" door. That door sits at .55 because it floats on a dark-scrimmed photo. This one usually sits on the CREAM service hero, where .55 composites to a pale lavender and drops the 13.5px note to about 3:1 against white. .80 is the lowest alpha that still clears 4.5:1 on the worst-case light backdrop, and it reads every bit as transparent. The dark photo heroes get the full .55 further down. The hairline white border is what makes the translucency read as intended rather than as a rendering fault; it is lifted from the same door. */ .hero-cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px; background:rgba(42,28,58,.80); border:2px solid rgba(255,255,255,.42); -webkit-backdrop-filter:blur(3px) saturate(1.05);backdrop-filter:blur(3px) saturate(1.05); padding:26px 28px;border-radius:3px;max-width:420px} /* On the dark city+service heroes the scrim is already navy, so the card can go to the home page's own value without costing any contrast. */ .interior-hero-photo .hero-cta{background:rgba(42,28,58,.55)} .hero-cta-book{display:inline-block;background:var(--rust);color:#fff;text-decoration:none; font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; text-transform:uppercase;letter-spacing:.09em;font-weight:700;font-size:17px; padding:15px 34px;border-radius:2px;transition:background .14s ease} .hero-cta-book:hover{background:var(--rust-2)} .hero-cta-call{display:flex;flex-direction:column;gap:2px;text-decoration:none} .hero-cta-k{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; text-transform:uppercase;letter-spacing:.11em;font-size:11.5px;font-weight:700; color:rgba(255,255,255,.66)} .hero-cta-v{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; font-size:30px;font-weight:800;line-height:1;color:#fff} .hero-cta-call:hover .hero-cta-v{color:var(--gold)} .hero-cta-note{margin:0;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.7)} @media(max-width:860px){.hero-cta{max-width:none;width:100%;padding:22px 20px} .hero-cta-book{width:100%;text-align:center}} /* --- inline article figure ------------------------------------------------- Wide, not square. The article column is ~760px, so a 1:1 figure would be a 760x760 block bigger than the copy around it. Square stays the rule for cards and grid items. */ .art-figure{margin:26px 0 28px;padding:0} .art-figure img{display:block;width:100%;height:auto;border:2px solid var(--navy);border-radius:0} .art-figure figcaption{margin-top:9px;font-size:14px;line-height:1.5;color:var(--mut); padding-left:2px;text-wrap:pretty} /* --- help article: one continuous column ------------------------------------ No hero band and no separate title section. The title, the answer and the first steps sit in the same column with nothing between them, so the reader goes headline -> answer -> what to do without crossing a divider. The sidebar runs alongside from the top of the page. */ .help-body{padding-top:30px} .help-h1{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; font-weight:800;text-transform:uppercase;font-size:clamp(28px,3.6vw,44px);line-height:1.02; color:var(--navy);margin:6px 0 14px;max-width:20em;text-wrap:balance} /* The answer is the payload, so it is set larger than body copy and separated from the steps by a rule rather than a heading. */ .help-answer{font-size:19.5px;line-height:1.58;color:var(--ink);margin:0 0 30px; padding-bottom:26px;border-bottom:1px solid var(--line);text-wrap:pretty} .help-body h2:first-of-type{margin-top:0} @media(max-width:760px){ .help-body{padding-top:20px} .help-answer{font-size:17.5px;margin-bottom:24px;padding-bottom:20px} } /* --- help article rail ----------------------------------------------------- Replaces the shared Sidebar on help pages. Its booking card duplicated the tape's ask; this rail carries onward reading instead, which is what someone mid-diagnosis actually wants. It also holds the article to a readable measure, which a full-width column would not. */ .help-rail{display:flex;flex-direction:column;gap:22px;position:sticky;top:24px} .help-rail-block{background:var(--paper);border:1px solid var(--line);padding:18px 20px} .help-rail .help-rail-h{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;font-weight:700; color:var(--mut);margin:0 0 10px} .help-rail a{display:block;font-size:15px;line-height:1.4;color:var(--navy); text-decoration:none;padding:7px 0;border-top:1px solid rgba(211,206,191,.6)} .help-rail a:first-of-type{border-top:0;padding-top:0} .help-rail a:hover{color:var(--rust-2)} .help-rail-svc{font-weight:700;color:var(--rust-2)!important} .help-rail-all{font-weight:700;color:var(--rust-2)!important} @media(max-width:900px){.help-rail{position:static}} /* --- contact hero: the painted crew ---------------------------------------- */ .contact-hero{position:relative;overflow:hidden;background:var(--navy-deep);min-height:420px; display:flex;align-items:flex-end} .contact-hero-img{position:absolute;inset:0;z-index:1} .contact-hero-img picture,.contact-hero-img img{width:100%;height:100%;object-fit:cover; object-position:center 42%;display:block} /* Legibility for the copy sitting on the lower left, without washing the crew out: the faces are the point of this picture. */ .contact-hero-img::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(24,20,28,0) 34%,rgba(24,20,28,.42) 66%,rgba(24,20,28,.80) 100%)} .contact-hero-inner{position:relative;z-index:2;width:100%;padding:0 28px 44px} .contact-hero .eyebrow{color:var(--gold)} .contact-hero h1{color:#fff} .contact-hero .lead{color:rgba(255,255,255,.9)} @media(max-width:760px){ .contact-hero{min-height:340px} .contact-hero-img img{object-position:center 46%} .contact-hero-inner{padding:0 20px 30px} } /* The copy column has to give the painting somewhere to be. Measured before this rule: copy ran 128->834 and the booking card started at 882, leaving a 48px gap, while the painting's subject landed at ~674 — i.e. directly behind the last lines of text. The art band is wider than 16:9 at this height, so the whole image shows and the subject sits at a fixed fraction of the band; the only way to clear it is to narrow the copy. */ .interior-hero-split.has-art .hero-split-copy{max-width:500px} .interior-hero-split.has-art .hero-split-copy .lead{max-width:none} @media(max-width:1100px){ .interior-hero-split.has-art .hero-split-copy{max-width:440px} } @media(max-width:860px){ .interior-hero-split.has-art .hero-split-copy{max-width:none} } /* Two columns for long link lists, and never break a link across a column. A three-column list of service names left single words stranded at the top of the next column. */ .linkcols-2{columns:2} .linkcols a{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid} @media(max-width:760px){.linkcols-2{columns:1}} /* Cost hub hero: art band spans the full width since there is no booking card holding the right side, so the fade runs further before it clears. */ .cost-hub-hero.has-art .hero-art{width:100%} .cost-hub-hero.has-art .hero-art{-webkit-mask-image:none;mask-image:none} .cost-hub-hero.has-art .hero-art::after{ background:linear-gradient(90deg,rgba(237,234,224,.98) 0%,rgba(237,234,224,.94) 40%, rgba(237,234,224,.72) 62%,rgba(237,234,224,.30) 84%,rgba(237,234,224,.08) 100%)} .cost-hub-hero h1,.cost-hub-hero .lead{position:relative;z-index:1} @media(max-width:860px){ .cost-hub-hero.has-art .hero-art::after{ background:linear-gradient(180deg,rgba(237,234,224,.86) 0%,rgba(237,234,224,.96) 60%)} } /* =========================================================================== CONTRAST — WCAG 2.1 AA =========================================================================== Measured on the live site: rust #E04E39 on cream #EDEAE0 is 3.28:1, copper #b16a35 is 3.50:1, and white on a rust button is 3.95:1. AA wants 4.5:1 for normal text and 3:1 for large text, so all three passed as display type and failed as body copy — which is exactly what Lighthouse flagged across 39 elements. No new colours were invented. The palette already held compliant variants: --rust-deep #A2301B reads 5.86:1 on cream, and white on --rust-2 #C23A26 reads 5.35:1. Large display type keeps the brighter --rust, because at that size it already passes and it is the brand. The one genuinely new value is the eyebrow copper, darkened to #985B2E (4.51:1) because nothing existing sat in that range. =========================================================================== */ :root{ /* Text-safe variants. Use these wherever the type is small. */ --rust-text:#A2301B; /* 5.86:1 on cream */ /* Values chosen to clear 4.5:1 on EVERY light ground the site uses, not just cream: --cream-2 and --block are darker and were the ones still failing. */ --copper-text:#875129; /* 5.39 cream / 4.86 cream-2 / 4.51 block */ --mut-text:#665D4C; /* replaces the lighter muted grey in body contexts */ } /* --- small text: links ---------------------------------------------------- */ .linkcols a, .hc-more a, .cg-rel a, .cg-fin a, .rv-jump a, .help-rail a:hover, .help-rail-svc, .help-rail-all, .more-links a, .content a, .cost-note a, .pricing-note a, .fin-quick li::before{color:var(--rust-text)} .help-rail-svc, .help-rail-all{color:var(--rust-text)!important} /* --- small uppercase labels ---------------------------------------------- */ .eyebrow, .cg-kicker, .hc-eyebrow{color:var(--copper-text)} /* Eyebrows on dark grounds are already light and keep their own colour. */ .panel .eyebrow, .contact-hero .eyebrow, .hc-eyebrow-d, .hc-hero-inner .hc-eyebrow{color:var(--gold)} .hc-hero-inner .hc-eyebrow{color:#fff} /* --- buttons: white on rust was 3.95:1 ------------------------------------ */ .btn-rust, .hc-btn-rust, .hero-cta-book, .cg-tape-btn, .side-book{background:var(--rust-2)} .btn-rust:hover, .hc-btn-rust:hover, .hero-cta-book:hover, .cg-tape-btn:hover{background:var(--rust-deep)} /* Muted body text. The lighter grey measured 4.13:1 on the hero band. */ .help-answer,.cg-lead,.hc-office-covers,.cg-bar-mid,.cg-unit,.cg-caveat, .rv-card figcaption,.art-figure figcaption, .small,.page,.note{color:var(--mut-text)} /* Muted text on DARK grounds needs the opposite treatment. Applying the light-ground value here dropped .hero-cta-note to 2.44:1 — worse than before. Separate token, checked against navy and navy-deep. */ .hero-cta-note,.side-note,.footer .legal,.site .legal,footer.site .legal span, .cg-tape-fin,.cg-tape-name{color:#C6BCA8} /* --- links inside body text ---------------------------------------------- Making links darker for AA had a side effect Lighthouse caught: at 2.12:1 against the surrounding paragraph they became distinguishable by COLOUR ALONE, which fails WCAG 1.4.1. Underlining them is the correct fix and is what the guideline actually asks for. Navigation, rails and link grids are exempt: they are not links inside a block of prose. */ .content a:not(.btn):not([class*="hc-"]):not([class*="cg-"]), .help-body a:not(.btn), .fin-body a, .cost-note a, .pricing-note a{text-decoration:underline;text-underline-offset:2px; text-decoration-thickness:1px} /* The Google reviews link in .revnote was missed by the sweep above: it sat on --paper at 3.52:1 and, being inside a sentence, also failed 1.4.1 by being distinguishable from the surrounding text by colour alone (1.51:1). Same treatment as every other inline link. */ .revnote a{color:var(--rust-text);text-decoration:underline;text-underline-offset:2px; text-decoration-thickness:1px} /* The rust CTA band. White on --rust is 3.94:1 and its pale sub-copy 3.38:1, both under AA. The band moves to --rust-2, where white reads 5.35:1, and the sub-copy stops being tinted. */ .cta-band{background:var(--rust-2)} .cta-band p{color:#fff} .cta-band .btn-ghost-light{box-shadow:inset 0 0 0 2px #fff;color:#fff} /* Review dates were 3.21:1: a muted grey made lighter still by opacity. */ .rv-card figcaption time{opacity:1;color:var(--mut-text)} /* The financing CTA had rust TEXT on a rust-2 button, 1.35:1 — it was picking up an inherited link colour instead of the button's own white. */ .hc-btn-rust,.fin-cta{color:#fff!important} /* Two more white-on-rust surfaces at 3.94:1: the commercial CTA panel and the lead form's submit button. Same move as the CTA band. */ .cx-ctacopy{background:var(--rust-2)} .leadform-submit{background:var(--rust-2)} .leadform-submit:hover:not(:disabled){background:var(--rust-deep)} /* Remaining rust-on-light text found by the full sweep: the area hub's region labels, the membership plan sub-lines and the glossary cross-reference links. All 3.28-3.52:1. Same text-safe rust as everywhere else. */ .region-h,.memb-plan-sub,.glossary-terms a.rel,a.rel{color:var(--rust-text)} .glossary-terms a.rel,a.rel{text-decoration:underline;text-underline-offset:2px} /* Hub cards used h3 while the only heading above them is the page h1, so every hub skipped a level. They are h2 now and keep their size. */ .hub-card h2,.hub-card-copy h2{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; text-transform:uppercase;font-size:22px;font-weight:800;color:var(--navy);margin:0 0 8px} /* Bullet markers and rules are decoration, not text, so they keep the brand rust: WCAG contrast minimums apply to text and meaningful graphics. */ /* Sidebar "Related" is an h2 for heading order; it keeps the small label look. */ .side-related-h{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;font-weight:700; color:var(--gold);margin:0 0 8px} /* Office cards are h2 now; keep their previous size. */ .hub-card h2{font-family:"trade-gothic-next-condensed","Trade Gothic Next",system-ui,sans-serif; text-transform:uppercase;font-size:22px;font-weight:800;color:var(--navy);margin:0 0 8px} /* --- commercial: no gold --------------------------------------------------- James asked for a different accent on the commercial pages. The trust band's gold (SkillGrit mark and the rules above/below it) becomes a cool steel blue drawn from the van livery, which keeps it in the brand without reusing the residential gold. Checked for contrast on the navy ground. */ .cx-page .trust, body:has(.cx-hero) .trust{border-top-color:#7FB2C4;border-bottom-color:#7FB2C4} body:has(.cx-hero) .trust-sg{color:#8FC6D8} body:has(.cx-hero) .trust-item{border-left-color:rgba(127,178,196,.28)} /* The reasons band has its image back: Tom with a client, which is what that section is actually about. The earlier single-column override is gone. */ /* --- book modal ------------------------------------------------------------ Every .se-booking-show control opens the lead form in this dialog (BookModal.tsx). Overlay colour matches the old scheduler placeholder. */ .book-modal{position:fixed;inset:0;z-index:9999;background:rgba(42,38,34,.62); display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow-y:auto} .book-modal-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:10px; width:100%;max-width:560px;margin:auto;padding:28px 24px 24px;box-shadow:0 24px 60px rgba(0,0,0,.35)} .book-modal-title{font-size:30px;margin:0 36px 14px 0;color:var(--navy)} .book-modal-x{position:absolute;top:10px;right:10px;width:36px;height:36px;display:flex; align-items:center;justify-content:center;background:none;border:0;border-radius:6px; color:var(--ink);cursor:pointer} .book-modal-x:hover{background:var(--cream)} .book-modal-x:focus-visible{outline:2px solid var(--rust-text);outline-offset:1px} @media (min-width:600px){.book-modal{padding:32px 16px}.book-modal-card{padding:32px 32px 28px}} /* Near-you bar (GeoLayer). Fixed to the bottom so it never shifts layout (it mounts after /api/near answers). Added 2026-10-16: the markup shipped without any rules and rendered as a raw block at the end of the page. */ .near-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;margin:0 auto;max-width:720px;display:flex;align-items:center;gap:14px;padding:12px 46px 12px 16px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(42,28,58,.18);font-size:15px;line-height:1.35;animation:near-bar-in .25s ease-out} .near-bar-text{margin:0} .near-bar-link{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:3px} .near-bar-link:hover{color:var(--rust-deep)} .near-bar-x{position:absolute;top:8px;right:8px;width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:var(--mut);cursor:pointer} .near-bar-x:hover{background:var(--cream-2);color:var(--ink)} @keyframes near-bar-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media (max-width:640px){.near-bar{left:10px;right:10px;bottom:10px;font-size:14px;padding-right:42px}} @media (prefers-reduced-motion:reduce){.near-bar{animation:none}}