/* ============================================================ SERVICE-V1 (Trade Bold, gauntlet winner) Dark industrial. Barlow Condensed 600/800 display, system body. Sharp corners. Full-bleed photo hero with scrim. Trade skins via [data-skin] on ; CTA color sits outside every skin palette on purpose (high-vis amber). ============================================================ */ :root{ /* Roofing is the default skin. */ --accent:#E4572E; --accent-strong:#c8431d; /* CTA is deliberately OUTSIDE the palette: high-vis amber */ --cta:#FFB020; --cta-strong:#ef9d05; --cta-ink:#131417; --paper:#f4f3ef; --paper2:#e9e6dd; --ink:#14161a; --ink-soft:#565b64; --dark:#0d0f13; --dark2:#141920; --dark-ink:#f4f3ef; --dark-soft:#9aa1ab; --line:#d9d5ca; --dark-line:#252b34; --gold:#FBBC04; --radius:4px; --display:'Barlow Condensed', 'Arial Narrow', sans-serif; --body:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --container:1180px; --gutter:24px; } /* Trade skins. Derived tints come from color-mix on --accent, so each skin stays a two-line change. */ [data-skin="hvac"]{ --accent:#0E9B8E; --accent-strong:#0a7a6f; } [data-skin="plumbing"]{ --accent:#1E6FEB; --accent-strong:#1557c5; } /* Pressure-washing accent per Carl's approved proposal (2026-08-28). */ [data-skin="wash"]{ --accent:#1287C9; --accent-strong:#0d6da6; } /* Site-profile ARCHETYPES (2026-09-04): non-trade one-pagers keep the layout but drop the industrial shout (no all-caps display, softer corners). Trade sites carry data-archetype="trade" and match none of these. */ body[data-archetype="professional"], body[data-archetype="wellness"], body[data-archetype="food-retail"]{ --radius:10px; } body[data-archetype="professional"] h1, body[data-archetype="professional"] h2, body[data-archetype="professional"] h3, body[data-archetype="professional"] .display, body[data-archetype="wellness"] h1, body[data-archetype="wellness"] h2, body[data-archetype="wellness"] h3, body[data-archetype="wellness"] .display, body[data-archetype="food-retail"] h1, body[data-archetype="food-retail"] h2, body[data-archetype="food-retail"] h3, body[data-archetype="food-retail"] .display{ text-transform:none; letter-spacing:-.01em; } body[data-archetype="professional"] .brand-name, body[data-archetype="wellness"] .brand-name, body[data-archetype="food-retail"] .brand-name{ text-transform:none; letter-spacing:0; } body[data-archetype="wellness"]{ --paper:#f7f6f2; --paper2:#eeeae0; } body[data-archetype="food-retail"]{ --paper:#faf5ee; --paper2:#f1e7d8; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} html,body{overflow-x:clip} body{ font-family:var(--body); font-size:16px; line-height:1.6; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; } img{display:block;max-width:100%;height:auto} a{color:inherit} section{scroll-margin-top:84px} [hidden]{display:none !important} .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} h1,h2,h3,.display{ font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.008em; line-height:.95; } .kicker{ font-family:var(--body); font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:10px; } .kicker::before{content:"//"; font-weight:800; letter-spacing:0; opacity:.9} .kicker.center{justify-content:center} /* Buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--body); font-weight:700; font-size:15.5px; min-height:48px; padding:0 22px; border-radius:var(--radius); border:2px solid transparent; text-decoration:none; cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease; } .btn:active{transform:translateY(1px)} .btn-cta{background:var(--cta); color:var(--cta-ink); border-color:var(--cta)} .btn-cta:hover{background:var(--cta-strong); border-color:var(--cta-strong)} .btn-ghost-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)} .btn-ghost-light:hover{border-color:#fff; background:rgba(255,255,255,.08)} .btn-ghost-dark{background:transparent; color:var(--ink); border-color:rgba(20,22,26,.4)} .btn-ghost-dark:hover{border-color:var(--ink)} .btn-lg{min-height:54px; padding:0 26px; font-size:16.5px} .btn-block{width:100%} /* Fractional stars (base row + clipped gold overlay) */ .stars{position:relative; display:inline-block; font-size:17px; line-height:1; letter-spacing:2px; color:rgba(20,22,26,.22)} .stars::before{content:"\2605\2605\2605\2605\2605"} .stars .fill{position:absolute; inset:0; overflow:hidden; white-space:nowrap; color:var(--gold)} .stars .fill::before{content:"\2605\2605\2605\2605\2605"; letter-spacing:2px} .on-dark .stars, .stars.on-dark{color:rgba(255,255,255,.28)} /* ============ CLAIM BANNER ============ */ .claim-banner{ background:var(--dark); color:var(--dark-ink); font-size:13.5px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 18px; padding:10px var(--gutter); text-align:center; } .claim-dot{width:8px;height:8px;background:var(--accent);display:inline-block;margin-right:8px;animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .claim-banner a{color:var(--cta); font-weight:700; text-decoration:none} .claim-banner a:hover{text-decoration:underline} /* Banner text swap helper: long line on desktop, short line on phones */ .cb-short{display:none} /* ============ STICKY HEADER (dark glass) ============ */ .site-header{ position:sticky; top:0; z-index:60; border-bottom:1px solid var(--line); } .g-fold-header{ background:rgba(10,12,15,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.08); } .header-row{display:flex; align-items:center; gap:22px; min-height:66px} .g-fold-header .header-row{min-height:72px} .brand{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto} .brand-mark{ width:36px;height:36px; background:var(--accent); color:#fff; display:grid; place-items:center; flex:none; } .brand-name{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:21px; letter-spacing:.02em} /* Owner-uploaded logo (self-serve intake). Replaces the brand-mark glyph; the name still renders beside it. */ .brand-logo{height:88px; width:auto; max-width:280px; object-fit:contain} .g-closing-footer .brand-logo{height:72px} @media (max-width:639px){ .brand-logo{height:60px; max-width:180px} } .g-fold-brand-text{display:flex; flex-direction:column; gap:3px} .g-fold-header .brand-name{color:#fff; line-height:.9} .g-fold-brand-sub{ font-family:var(--body); font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#9aa1ab; line-height:1; white-space:nowrap; } .header-nav{display:flex; gap:26px} .header-nav a{font-size:14.5px; font-weight:600; color:var(--ink-soft); text-decoration:none; padding:12px 0} .header-nav a:hover{color:var(--ink)} .g-fold-header .header-nav a{color:rgba(244,243,239,.78)} .g-fold-header .header-nav a:hover{color:#fff} .btn-header{min-height:44px; font-size:15px} .btn-header .num{font-variant-numeric:tabular-nums} /* Off-canvas mobile nav */ .nav-box{position:absolute; opacity:0; pointer-events:none} .burger{ display:none; width:44px; height:44px; flex:none; border:1px solid var(--line); background:var(--paper); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; } .burger span{display:block; width:20px; height:2px; background:var(--ink)} .g-fold-header .burger{background:transparent; border-color:rgba(255,255,255,.3)} .g-fold-header .burger span{background:#f4f3ef} .nav-overlay{position:fixed; inset:0; background:rgba(13,15,19,.55); opacity:0; pointer-events:none; transition:opacity .25s; z-index:70} .nav-panel{ position:fixed; top:0; right:0; bottom:0; z-index:71; width:min(320px,86vw); background:var(--dark); color:var(--dark-ink); transform:translateX(102%); transition:transform .28s ease; display:flex; flex-direction:column; padding:18px; } .nav-panel .panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px} .nav-panel .panel-brand{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:19px} .nav-close{width:44px;height:44px; display:grid; place-items:center; border:1px solid var(--dark-line); cursor:pointer; color:var(--dark-ink); font-size:20px; line-height:1} .nav-panel a{ display:flex; align-items:center; min-height:48px; padding:0 6px; color:var(--dark-ink); text-decoration:none; font-weight:600; font-size:17px; border-bottom:1px solid var(--dark-line); } .nav-panel a:hover{color:var(--cta)} .nav-panel .panel-cta{margin-top:auto} #nav-t:checked ~ .nav-overlay{opacity:1; pointer-events:auto} #nav-t:checked ~ .nav-panel{transform:translateX(0)} /* ============ HERO ============ */ .hero{position:relative; display:flex; align-items:center; min-height:clamp(580px, 86vh, 780px); background:var(--dark); overflow:hidden} .g-fold-hero{min-height:clamp(560px, 80vh, 740px)} .hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 38%} .hero-scrim-side{position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,12,16,.94) 0%, rgba(10,12,16,.72) 38%, rgba(10,12,16,.28) 66%, rgba(10,12,16,.05) 100%)} .g-fold-scrim-side{background:linear-gradient(100deg, rgba(10,12,16,.96) 0%, rgba(10,12,16,.82) 34%, rgba(10,12,16,.36) 66%, rgba(10,12,16,.08) 100%)} .hero-scrim-bottom{position:absolute; inset:0; background:linear-gradient(to top, rgba(10,12,16,.85) 0%, transparent 45%)} .g-fold-scrim-top{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(10,12,15,.72), rgba(10,12,15,.22) 16%, transparent 30%)} .hero-glow{position:absolute; top:-20%; right:-10%; width:55%; height:80%; background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 55%, transparent), transparent 65%); mix-blend-mode:screen; pointer-events:none} .hero-inner{position:relative; z-index:2; width:100%; padding-block:72px} .g-fold-inner{padding-block:52px 64px} .hero-copy{max-width:41em; color:#fff} .g-fold-copy{border-left:3px solid var(--accent); padding-left:30px} .hero-copy .kicker{color:color-mix(in srgb, var(--accent) 72%, #fff)} .hero h1{font-size:clamp(46px, 6.6vw, 84px); margin:18px 0 20px; text-wrap:balance} .g-fold-h1{font-size:clamp(42px, 5.2vw, 68px); margin:14px 0 16px} .g-fold-hl{color:var(--cta)} .hero-subhead{font-size:clamp(16px, 1.7vw, 19px); color:rgba(244,243,239,.88); max-width:33em; margin-bottom:30px} .g-fold-subhead{margin-bottom:20px} .hero-actions{display:flex; flex-wrap:wrap; gap:13px; margin-bottom:26px} .g-fold-actions{margin-bottom:20px} /* Scannable checkpoints */ .g-fold-points{list-style:none; display:flex; flex-wrap:wrap; gap:10px 26px; margin:0 0 24px; padding:0} .g-fold-points li{display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:rgba(244,243,239,.94)} .g-fold-points svg{color:var(--cta); flex:none} /* Google proof chip: one named review, not a repeated aggregate */ .g-fold-proof{ display:inline-flex; align-items:flex-start; gap:13px; padding:11px 16px; border:1px solid rgba(255,255,255,.24); background:rgba(13,15,19,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); text-decoration:none; color:rgba(244,243,239,.95); transition:border-color .15s ease; max-width:560px; } .g-fold-proof:hover{border-color:rgba(255,255,255,.6)} .g-fold-gtile{width:38px; height:38px; background:#fff; display:grid; place-items:center; flex:none} .g-fold-proof .g-fold-gtile{margin-top:2px} .g-fold-proof-col{display:flex; flex-direction:column; gap:3px; line-height:1.2} .g-fold-proof-top{display:flex; align-items:center; gap:8px; font-size:15.5px} .g-fold-proof-top .stars{font-size:15px} .g-fold-proof-quote{ font-size:14.5px; font-weight:600; line-height:1.45; color:rgba(244,243,239,.95); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; max-height:4.35em; } .g-fold-proof-sub{font-size:12.5px; color:rgba(244,243,239,.72)} /* Scroll cue */ .g-fold-scroll{ position:absolute; left:50%; transform:translateX(-50%); bottom:14px; z-index:3; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,243,239,.7); text-decoration:none; } .g-fold-scroll:hover{color:#fff} .g-fold-scroll svg{animation:g-fold-bob 2.2s ease-in-out infinite} @keyframes g-fold-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}} /* ============ TRUST BAR ============ */ .g-proof-bar{background:var(--dark); color:var(--dark-ink); border-bottom:3px solid var(--accent)} .g-proof-bar-grid{display:grid; grid-template-columns:auto auto auto auto; justify-content:space-between; align-items:stretch} .g-proof-cell{display:flex; align-items:center; gap:14px; padding:20px 26px; border-left:1px solid var(--dark-line); min-height:98px; text-decoration:none; color:inherit} .g-proof-cell:first-child{border-left:0; padding-left:0} .g-proof-cell:last-child{padding-right:0} .g-proof-gtile{width:46px; height:46px; background:#fff; display:grid; place-items:center; flex:none; box-shadow:0 4px 12px rgba(0,0,0,.3)} .g-proof-score-row{display:flex; align-items:center; gap:10px} .g-proof-score{font-family:var(--display); font-weight:800; font-size:36px; line-height:.9} .g-proof-score-row .stars{font-size:15px} .g-proof-label{display:block; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:20px; letter-spacing:.03em; line-height:1; color:var(--dark-ink); white-space:nowrap} .g-proof-note{display:block; font-size:12.5px; color:var(--dark-soft); margin-top:4px; line-height:1.4} .g-proof-link{color:var(--cta); font-weight:700} .g-proof-google-cell:hover .g-proof-link{text-decoration:underline} .g-proof-ico{width:38px; height:38px; flex:none; display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 24%, transparent); color:color-mix(in srgb, var(--accent) 78%, #fff)} /* ============ VALUE PROPS ============ */ .value{padding-block:76px 70px} .value-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:26px; margin-top:38px} .value-item{border-top:3px solid var(--accent); padding-top:20px} .value-item h3{font-size:26px; margin-bottom:9px} .value-item p{color:var(--ink-soft); font-size:15.5px} /* ============ SERVICES ============ */ .g-services-section{background:var(--paper2); padding-block:84px; border-block:1px solid var(--line)} .g-services-head{display:grid; grid-template-columns:1fr minmax(240px,400px); gap:24px 48px; align-items:end; margin-bottom:38px} .g-services-head h2{font-size:clamp(36px,4.6vw,58px); margin-top:14px} .g-services-sub{color:var(--ink-soft); font-size:15.5px} .g-services-headnote{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13.5px; font-weight:700; color:var(--ink)} .g-services-headnote svg{color:var(--accent); flex:none} .g-services-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px} /* Card counts that leave a hole with auto-fit (Carl 2026-09-22): five cards become 3 + 2 full-width rows, four cards stay 2 + 2 below the wide layout. */ @media (min-width:900px){ .g-services-grid[data-count="5"]{grid-template-columns:repeat(6,1fr)} .g-services-grid[data-count="5"] .g-services-card{grid-column:span 2} .g-services-grid[data-count="5"] .g-services-card:nth-child(n+4){grid-column:span 3} } @media (min-width:560px) and (max-width:899px){ .g-services-grid[data-count="5"]{grid-template-columns:repeat(2,1fr)} .g-services-grid[data-count="5"] .g-services-card:nth-child(5){grid-column:1/-1} } @media (min-width:560px) and (max-width:1100px){ .g-services-grid[data-count="4"]{grid-template-columns:repeat(2,1fr)} } .g-services-card{ background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; position:relative; box-shadow:0 2px 12px rgba(13,15,19,.07); transition:transform .18s ease, box-shadow .18s ease; } .g-services-card:hover{transform:translateY(-4px); box-shadow:0 18px 38px rgba(13,15,19,.17)} .g-services-photo{position:relative; overflow:hidden} .g-services-photo img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .5s ease} .g-services-card:hover .g-services-photo img{transform:scale(1.045)} .g-services-photo::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--accent)} .g-services-num{ position:absolute; top:0; left:0; z-index:1; background:var(--accent); color:#fff; font-family:var(--display); font-weight:800; font-size:20px; padding:7px 13px; letter-spacing:.04em; } .g-services-body{padding:20px 22px 18px; display:flex; flex-direction:column; flex:1} .g-services-body h3{font-size:25px; margin-bottom:8px} .g-services-desc{color:var(--ink-soft); font-size:14.5px; line-height:1.5} .g-services-cta{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:50px; padding:12px 22px; border-top:1px solid var(--line); font-weight:700; font-size:14.5px; color:var(--accent-strong); text-decoration:none; transition:background .15s ease; } .g-services-cta:hover{background:color-mix(in srgb, var(--accent) 8%, transparent)} .g-services-cta .g-services-arr{transition:transform .18s ease; font-weight:800} .g-services-card:hover .g-services-arr{transform:translateX(4px)} .g-services-band{ margin-top:26px; background:var(--dark); color:var(--dark-ink); border-left:4px solid var(--accent); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 32px; padding:28px 32px; background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 44px); } .g-services-band h3{font-size:clamp(24px,2.6vw,32px)} .g-services-band p{color:var(--dark-soft); font-size:14.5px; margin-top:6px; max-width:36em} .g-services-band-actions{display:flex; flex-wrap:wrap; gap:12px} /* ============ REVIEWS ============ */ .g-proof-reviews{padding-block:84px; background:var(--paper)} .g-proof-head{text-align:center; max-width:700px; margin-inline:auto; margin-bottom:44px} .g-proof-head h2{font-size:clamp(36px,4.6vw,58px); margin-top:14px} .g-proof-tagline{color:var(--ink-soft); font-size:15.5px; margin-top:16px; max-width:38em; margin-inline:auto} .g-proof-layout{display:grid; grid-template-columns:320px 1fr; gap:22px; align-items:stretch} .g-proof-layout-solo{grid-template-columns:1fr} .g-proof-agg{ background:var(--dark); color:var(--dark-ink); padding:30px 28px 26px; display:flex; flex-direction:column; border-bottom:3px solid var(--accent); background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 44px); } .g-proof-agg-top{display:flex; align-items:center; gap:11px; margin-bottom:22px} .g-proof-agg-top .g-proof-gtile{width:36px; height:36px} .g-proof-agg-kicker{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dark-soft)} .g-proof-agg-num{font-family:var(--display); font-weight:800; font-size:88px; line-height:.82} .g-proof-agg-outof{font-family:var(--display); font-weight:600; font-size:26px; color:var(--dark-soft)} .g-proof-agg .stars{font-size:22px; margin-top:12px} .g-proof-agg-count{font-size:14px; color:var(--dark-soft); margin-top:8px} .g-proof-agg-rule{border:0; border-top:1px solid var(--dark-line); margin:20px 0} .g-proof-agg-honest{font-size:14px; line-height:1.6; color:var(--dark-ink)} .g-proof-agg-verified{display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--dark-soft); margin-top:14px} .g-proof-agg-actions{margin-top:auto; padding-top:26px; display:grid; gap:12px} .g-proof-agg-write{font-size:13px; color:var(--dark-soft); text-align:center} .g-proof-agg-write a{color:var(--cta); font-weight:700; text-decoration:none} .g-proof-agg-write a:hover{text-decoration:underline} .g-proof-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px} .g-proof-featured{grid-column:1 / -1} .g-proof-card{ position:relative; background:#fff; border:1px solid var(--line); border-top:3px solid var(--accent); padding:26px 28px 22px; display:flex; flex-direction:column; gap:12px; box-shadow:0 12px 28px rgba(13,15,19,.05); } .g-proof-card::before{ content:"\201C"; position:absolute; top:14px; right:22px; font-family:var(--display); font-weight:800; font-size:96px; line-height:1; color:color-mix(in srgb, var(--accent) 16%, transparent); pointer-events:none; } .g-proof-card-stars{display:flex; align-items:center; gap:10px} .g-proof-card-stars .stars{font-size:17px} .g-proof-card-score{font-size:13px; font-weight:700; color:var(--ink-soft)} /* Backstop clamp: review excerpts are capped at the data level, but even a slipped full-length review must not skew the grid. -webkit-line-clamp draws the truncation; max-height covers engines without it. */ .g-proof-quote{ font-size:15.5px; line-height:1.6; color:var(--ink); max-width:56em; padding-right:44px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7; line-clamp:7; overflow:hidden; max-height:11.2em; } .g-proof-featured .g-proof-quote{font-size:17px} .g-proof-meta{display:flex; align-items:center; gap:11px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); font-size:13.5px} .g-proof-avatar{ width:38px; height:38px; flex:none; display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent-strong); font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.04em; } .g-proof-author{font-weight:700} .g-proof-source{margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft); font-size:12.5px} /* Review Engine widget slot */ .widget-embed{margin-top:28px} .widget-embed iframe{width:100%; border:0; min-height:320px} /* ============ PROCESS ============ */ .g-midpage-process{ background:var(--dark); color:var(--dark-ink); padding-block:88px; position:relative; overflow:hidden; background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 52px), repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 52px); } .g-midpage-process::before{ content:""; position:absolute; top:-25%; right:-12%; width:52%; height:80%; background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 26%, transparent), transparent 66%); mix-blend-mode:screen; pointer-events:none; } .g-midpage-process-grid{display:grid; grid-template-columns:minmax(300px,430px) 1fr; gap:36px 72px; position:relative; z-index:1; align-items:center} .g-midpage-process h2{font-size:clamp(36px,4.6vw,56px); margin-top:14px} .g-midpage-process-sub{color:var(--dark-soft); margin-top:14px; max-width:30em; font-size:15.5px} .g-midpage-process-photo{margin-top:30px; border:1px solid var(--dark-line)} .g-midpage-process-photo img{width:100%; aspect-ratio:4/3; object-fit:cover} .g-midpage-process-photo figcaption{ display:flex; align-items:center; gap:9px; background:var(--dark2); border-top:1px solid var(--dark-line); padding:11px 14px; font-size:13px; color:var(--dark-soft); } .g-midpage-process-photo figcaption svg{color:var(--accent); flex:none} .g-midpage-steps{grid-column:2; grid-row:1 / span 2} .g-midpage-process-cta{grid-column:1; align-self:end} .g-midpage-process-cta-label{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:20px; letter-spacing:.02em; margin-bottom:12px; } .g-midpage-process-cta-row{display:flex; flex-wrap:wrap; gap:12px} .g-midpage-steps{list-style:none; margin:6px 0 0; padding:0} .g-midpage-step{position:relative; display:grid; grid-template-columns:54px 1fr; column-gap:22px; padding-bottom:42px} .g-midpage-step:last-child{padding-bottom:0} .g-midpage-step::before{ content:""; position:absolute; left:26px; top:60px; bottom:6px; border-left:2px dashed var(--dark-line); } .g-midpage-step:last-child::before{display:none} .g-midpage-step-num{ width:54px; height:54px; background:var(--accent); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:26px; line-height:1; box-shadow:6px 6px 0 rgba(255,255,255,.07); } .g-midpage-step-eyebrow{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb, var(--accent) 72%, #fff); margin-top:2px; } .g-midpage-step h3{font-size:25px; margin:4px 0 7px} .g-midpage-step p{color:var(--dark-soft); font-size:15px; max-width:44em} .g-midpage-step-tag{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; border:1px solid var(--dark-line); background:rgba(255,255,255,.04); padding:5px 11px; font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--dark-ink); } .g-midpage-step-tag svg{color:var(--cta); flex:none} /* ============ DIFFERENTIATORS ============ */ .g-midpage-why{padding-block:96px 100px; background:var(--paper)} .g-midpage-why-grid{display:grid; grid-template-columns:minmax(300px,450px) 1fr; gap:44px 64px; align-items:center} .g-midpage-why-media{position:relative; margin-bottom:26px} .g-midpage-why-media img{width:100%; aspect-ratio:4/3.4; object-fit:cover; border:1px solid var(--line)} .g-midpage-why-media::after{content:""; position:absolute; inset:16px -16px -16px 16px; border:2px solid var(--accent); z-index:-1} .g-midpage-why-rating{ position:absolute; left:18px; bottom:-24px; background:#fff; border:1px solid var(--line); padding:13px 18px; display:flex; align-items:center; gap:12px; box-shadow:0 14px 32px rgba(13,15,19,.16); } .g-midpage-why-rating .g-midpage-rating-meta{display:grid; gap:2px; font-size:12.5px; color:var(--ink-soft); line-height:1.3} .g-midpage-why-rating .g-midpage-rating-meta strong{color:var(--ink); font-size:13.5px; line-height:1.25} .g-midpage-why h2{font-size:clamp(36px,4.6vw,54px); margin-top:14px} .g-midpage-why-intro{color:var(--ink-soft); margin-top:14px; max-width:36em; font-size:15.5px} .g-midpage-why-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:30px} .g-midpage-why-card{ background:#fff; border:1px solid var(--line); border-top:3px solid var(--accent); padding:20px 20px 22px; display:flex; flex-direction:column; gap:12px; } .g-midpage-why-icon{ width:44px; height:44px; flex:none; display:grid; place-items:center; background:var(--accent); color:#fff; } .g-midpage-why-card h3{font-size:21px} .g-midpage-why-card p{color:var(--ink-soft); font-size:14.5px} /* ---- Check-us band: every claim on this page is checkable ---- */ .g-midpage-verify{ margin-top:64px; background:#fff; border:1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); padding:34px 36px; display:grid; grid-template-columns:minmax(240px,340px) 1fr; gap:28px 52px; align-items:start; } .g-midpage-verify-title{margin-top:12px} .g-midpage-verify-head h3{font-size:clamp(24px,2.6vw,32px); text-wrap:balance} .g-midpage-verify-head p{color:var(--ink-soft); font-size:14.5px; margin-top:10px; max-width:26em} .g-midpage-verify-list{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:22px 36px; padding:0; margin:0} .g-midpage-verify-list li{display:flex; gap:13px; align-items:flex-start} .g-midpage-verify-ico{ width:38px; height:38px; flex:none; display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent-strong); } .g-midpage-verify-list strong{ display:block; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:18px; letter-spacing:.02em; line-height:1.1; margin-bottom:4px; } .g-midpage-verify-list p{font-size:14px; color:var(--ink-soft); line-height:1.5; max-width:24em} .g-midpage-verify-list a{color:var(--accent-strong); font-weight:700} /* ============ SERVICE AREA ============ */ .g-midpage-area{ background:var(--dark); color:var(--dark-ink); padding-block:88px; position:relative; overflow:hidden; background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 52px), repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 52px); } .g-midpage-area::before{ content:""; position:absolute; bottom:-30%; left:-14%; width:52%; height:85%; background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 22%, transparent), transparent 66%); mix-blend-mode:screen; pointer-events:none; } .g-midpage-area-grid{display:grid; grid-template-columns:1.02fr 1fr; gap:40px 64px; align-items:center; position:relative; z-index:1} .g-midpage-area-map{position:relative; background:var(--dark2); border:1px solid var(--dark-line); min-height:440px} .g-midpage-area-map iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.9) contrast(1.06) brightness(.92)} .g-midpage-area-map-note{ position:absolute; left:14px; bottom:14px; font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--dark-soft); background:rgba(13,15,19,.78); border:1px solid var(--dark-line); padding:6px 10px; } .g-midpage-area-info{display:flex; flex-direction:column; gap:20px} .g-midpage-area-info h2{font-size:clamp(34px,4vw,50px); margin-top:12px} .g-midpage-area-blurb{color:var(--dark-soft); font-size:15.5px; max-width:34em} .g-midpage-towns{display:flex; flex-wrap:wrap; gap:10px} .g-midpage-town{ display:inline-flex; align-items:center; gap:9px; border:1px solid var(--dark-line); background:rgba(255,255,255,.03); padding:9px 15px; font-size:13.5px; font-weight:600; color:var(--dark-ink); } .g-midpage-town::before{content:""; width:7px; height:7px; background:var(--accent); flex:none} .g-midpage-town.g-midpage-town-hq{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 24%, transparent); color:#fff; } .g-midpage-town.g-midpage-town-hq::before{background:#fff} .g-midpage-town .g-midpage-hq-tag{ font-size:10px; font-weight:800; letter-spacing:.1em; background:#fff; color:var(--accent-strong); padding:2px 6px; margin-left:2px; } .g-midpage-area-facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px} .g-midpage-fact{border:1px solid var(--dark-line); background:rgba(255,255,255,.03); padding:16px 18px} .g-midpage-fact-label{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--dark-soft); margin-bottom:10px; } .g-midpage-fact-label svg{color:var(--accent); flex:none} .g-midpage-fact-body{font-size:14.5px} .g-midpage-hours-row{display:flex; justify-content:space-between; gap:16px; padding-block:2px} .g-midpage-hours-row span:last-child{color:var(--dark-soft)} .g-midpage-area-note{color:var(--dark-soft); font-size:14px} .g-midpage-area-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:2px} /* ============ FAQ ============ */ .g-closing-faq{padding-block:88px 92px; background:var(--paper)} .g-closing-faq-headrow{ display:grid; grid-template-columns:1fr minmax(240px,380px); gap:16px 56px; align-items:end; margin-bottom:40px; } .g-closing-faq-headrow, .g-closing-faq-grid{max-width:calc(980px + var(--gutter)*2)} .g-closing-faq-head h2{font-size:clamp(36px,4.6vw,56px); margin-top:14px} .g-closing-faq-sub{color:var(--ink-soft); font-size:15.5px; max-width:26em; padding-bottom:6px} .g-closing-faq-list{display:grid; gap:12px} .g-closing-faq-item{ background:#fff; border:1px solid var(--line); border-left:3px solid transparent; transition:border-color .18s ease, box-shadow .18s ease; } .g-closing-faq-item[open]{border-left-color:var(--accent); box-shadow:0 10px 26px rgba(13,15,19,.08)} .g-closing-faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; padding:19px 20px; font-weight:700; font-size:16.5px; line-height:1.35; min-height:44px; } .g-closing-faq-item summary::-webkit-details-marker{display:none} .g-closing-faq-item summary:hover{color:var(--accent-strong)} .g-closing-faq-mark{ flex:none; margin-left:auto; width:30px; height:30px; display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 10%, transparent); color:var(--accent); font-weight:800; font-size:20px; line-height:1; transition:background .2s ease; } .g-closing-faq-mark::before{content:"+"; display:block; transition:transform .2s ease} .g-closing-faq-item[open] .g-closing-faq-mark{background:var(--accent); color:#fff} .g-closing-faq-item[open] .g-closing-faq-mark::before{transform:rotate(45deg)} .g-closing-faq-body{padding:0 56px 22px 20px; color:var(--ink-soft); font-size:15px; line-height:1.6; max-width:62em} /* ============ FINAL CTA + FORM ============ */ .g-closing-contact{position:relative; background:var(--dark); color:var(--dark-ink); padding-block:92px; overflow:hidden} .g-closing-contact-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%} .g-closing-contact-scrim{position:absolute; inset:0; background:linear-gradient(97deg, rgba(10,12,16,.96) 0%, rgba(10,12,16,.86) 44%, rgba(10,12,16,.62) 74%, rgba(10,12,16,.5) 100%)} .g-closing-contact-scrim-b{position:absolute; inset:0; background:linear-gradient(to top, rgba(10,12,16,.75), transparent 40%)} .g-closing-contact-glow{position:absolute; top:-30%; left:-12%; width:52%; height:95%; background:radial-gradient(ellipse, color-mix(in srgb, var(--accent) 38%, transparent), transparent 68%); mix-blend-mode:screen; pointer-events:none} .g-closing-contact-grid{display:grid; grid-template-columns:1fr minmax(330px,450px); gap:56px; align-items:center; position:relative; z-index:2} .g-closing-contact h2{font-size:clamp(38px,5vw,64px); margin-top:14px; max-width:9.5em} .g-closing-pitch-sub{color:rgba(244,243,239,.82); margin-top:16px; max-width:30em; font-size:16px} .g-closing-checks{display:grid; gap:11px; margin-top:24px; padding:0} .g-closing-checks li{display:flex; align-items:flex-start; gap:11px; font-size:15.5px; font-weight:600; list-style:none} .g-closing-checks svg{flex:none; margin-top:3px; color:var(--cta)} .g-closing-phone-block{margin-top:30px} .g-closing-phone-label{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dark-soft)} .g-closing-phone{ display:inline-flex; align-items:center; gap:13px; margin-top:8px; text-decoration:none; color:#fff; font-family:var(--display); font-weight:800; font-size:clamp(30px,3.4vw,44px); text-transform:uppercase; letter-spacing:.02em; line-height:1; } .g-closing-phone svg{color:var(--cta)} .g-closing-phone:hover{color:var(--cta)} .g-closing-phone-hours{margin-top:10px; font-size:13.5px; color:var(--dark-soft)} .g-closing-form{ background:var(--paper); color:var(--ink); padding:30px 28px 24px; border-top:5px solid var(--cta); box-shadow:0 30px 70px rgba(0,0,0,.45); } .g-closing-form h3{font-size:27px} .g-closing-form-sub{font-size:14px; color:var(--ink-soft); margin:6px 0 18px} .g-closing-field{display:grid; gap:6px; margin-bottom:14px} .g-closing-field label{font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft)} .g-closing-field input,.g-closing-field textarea{ font-family:var(--body); font-size:16px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; min-height:48px; width:100%; } .g-closing-field textarea{min-height:92px; resize:vertical} .g-closing-field input:focus,.g-closing-field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)} .g-closing-field input::placeholder,.g-closing-field textarea::placeholder{color:#a9adb5} .g-closing-form .btn{width:100%} .g-closing-form-fineprint{font-size:12.5px; color:var(--ink-soft); margin-top:10px; text-align:center} .g-closing-form-trust{ display:flex; align-items:center; justify-content:center; gap:10px; border-top:1px solid var(--line); margin-top:16px; padding-top:15px; font-size:13.5px; color:var(--ink-soft); } .g-closing-form-trust svg{flex:none} .g-closing-form-trust-ico{color:var(--accent-strong)} /* Honeypot: visually removed, still submittable by bots */ .hp-field{position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden} /* Two-state form notice (post-submit) */ .form-notice{display:flex; gap:14px; align-items:flex-start; padding:8px 2px 4px} .notice-check{ width:44px; height:44px; flex:none; display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent-strong); } .notice-title{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:22px; letter-spacing:.01em} .notice-body{color:var(--ink-soft); font-size:14.5px; margin-top:6px; line-height:1.55} .btn-notice{margin-top:14px; width:auto !important} /* Visible claim nudge under the preview form */ .claim-nudge{ margin-top:16px; border:1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); padding:12px 14px; font-size:13.5px; line-height:1.5; background:color-mix(in srgb, var(--accent) 5%, transparent); } .claim-nudge a{color:var(--accent-strong); font-weight:700} /* ============ FOOTER ============ */ .g-closing-footer{ background:#0a0c0f; color:var(--dark-ink); padding-top:64px; border-top:3px solid var(--accent); background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 52px), repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 52px); } .g-closing-footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px 44px; padding-bottom:48px; } .g-closing-footer .brand-name{font-size:24px; color:#fff} .g-closing-footer-tag{color:var(--dark-soft); font-size:14.5px; margin-top:14px; max-width:26em} .g-closing-footer-nap{display:grid; gap:10px; margin-top:22px; font-size:14.5px} .g-closing-footer-nap span{display:flex; gap:10px; align-items:flex-start; color:var(--dark-soft)} .g-closing-footer-nap svg{color:var(--accent); flex:none; margin-top:3px} .g-closing-footer-nap a{color:var(--dark-ink); text-decoration:none; font-weight:600} .g-closing-footer-nap a:hover{color:var(--cta)} .g-footer-social{display:flex; gap:10px; margin-top:18px; padding:0; list-style:none} .social-chip{ width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--dark-line); color:var(--dark-ink); background:rgba(255,255,255,.03); transition:border-color .15s ease, color .15s ease; } .social-chip:hover{border-color:var(--cta); color:var(--cta)} .social-chip svg{display:block} .g-closing-footer-col h3{ font-size:16.5px; letter-spacing:.06em; margin-bottom:16px; display:flex; align-items:center; gap:9px; } .g-closing-footer-col h3::before{content:""; width:14px; height:3px; background:var(--accent); flex:none} .g-closing-footer-links{display:grid; gap:2px; list-style:none; padding:0} .g-closing-footer-links a{ display:inline-flex; align-items:center; min-height:34px; color:var(--dark-soft); text-decoration:none; font-size:14.5px; } .g-closing-footer-links a:hover{color:var(--cta)} .g-closing-footer-cta{display:flex; flex-direction:column; align-items:flex-start; gap:12px} .g-closing-footer-cta .btn{width:100%; max-width:280px} .g-closing-footer-hours{ border:1px solid var(--dark-line); padding:14px 16px; display:grid; gap:6px; font-size:13.5px; width:100%; max-width:280px; margin-top:4px; } .g-closing-footer-hours div{display:flex; justify-content:space-between; gap:16px} .g-closing-footer-hours span:last-child{color:var(--dark-soft)} .g-closing-footer-bottom{ border-top:1px solid var(--dark-line); padding-block:18px; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:13px; color:var(--dark-soft); } .g-closing-footer-bottom a{color:var(--cta); text-decoration:none; font-weight:600} .g-closing-footer-bottom a:hover{text-decoration:underline} /* ============ MOBILE CALL BAR ============ */ /* Two-action sticky bar: call stays dominant, quote rides shotgun. Hidden at 640px and up so desktop screenshots never see it. */ .callbar-wrap{ position:fixed; left:0; right:0; bottom:0; z-index:80; display:none; align-items:stretch; background:var(--dark); box-shadow:0 -6px 22px rgba(13,15,19,.3); } .callbar{ flex:1.5; display:flex; align-items:center; justify-content:center; gap:10px; background:var(--cta); color:var(--cta-ink); font-weight:800; font-size:15.5px; text-decoration:none; padding:14px 8px calc(14px + env(safe-area-inset-bottom)); } .callbar-quote{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--dark); color:#fff; font-weight:700; font-size:14.5px; text-decoration:none; padding:14px 8px calc(14px + env(safe-area-inset-bottom)); border-left:1px solid rgba(255,255,255,.16); } .callbar-quote svg{color:var(--cta)} @media (min-width:640px){.callbar-wrap{display:none}} /* ============ SCROLL REVEAL ============ */ .will-reveal{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease} .revealed{opacity:1; transform:none} @media (prefers-reduced-motion: reduce){.will-reveal{opacity:1; transform:none; transition:none}} /* ============ UPGRADE SUBPAGES ============ */ .pg-hero{ background:var(--dark); color:var(--dark-ink); padding-block:56px 60px; position:relative; overflow:hidden; border-bottom:3px solid var(--accent); background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 52px), repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 52px); } .pg-hero::before{ content:""; position:absolute; top:-30%; right:-12%; width:50%; height:90%; background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 26%, transparent), transparent 66%); mix-blend-mode:screen; pointer-events:none; } .pg-hero .container{position:relative; z-index:1} .crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--dark-soft); margin-bottom:20px} .crumbs a{color:var(--dark-ink); text-decoration:none; font-weight:600} .crumbs a:hover{color:var(--cta)} .crumb-sep{opacity:.6} .crumb-here{color:var(--dark-soft)} .pg-hero h1{font-size:clamp(36px,4.6vw,58px); margin-top:14px; max-width:18em} .pg-hero-sub{color:var(--dark-soft); font-size:16px; margin-top:16px; max-width:44em} .pg-hero-actions{display:flex; flex-wrap:wrap; gap:13px; margin-top:26px} .pg-main{padding-block:64px; background:var(--paper)} .pg-layout{display:grid; grid-template-columns:1fr minmax(280px,360px); gap:48px; align-items:start} .pg-section{margin-bottom:36px} .pg-section h2{font-size:clamp(26px,3vw,38px); margin-bottom:12px} .pg-section p{color:var(--ink-soft); font-size:15.5px; max-width:62em} .pg-faq{display:grid; gap:12px; margin-top:8px} .pg-aside{display:grid; gap:20px; position:sticky; top:96px} .aside-card{background:#fff; border:1px solid var(--line); border-top:3px solid var(--accent); padding:22px} .aside-card h3{font-size:22px; margin-bottom:14px} .aside-media{padding:0; border-top:1px solid var(--line)} .aside-media img{width:100%; aspect-ratio:4/3; object-fit:cover} .aside-points{display:grid; gap:10px; list-style:none; padding:0} .aside-points li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; font-weight:500} .aside-points svg{flex:none; margin-top:4px; color:var(--accent)} .aside-links{list-style:none; display:grid; padding:0} .aside-links a{ display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:44px; color:var(--ink); text-decoration:none; font-weight:600; font-size:14.5px; border-bottom:1px solid var(--line); } .aside-links li:last-child a{border-bottom:0} .aside-links a:hover{color:var(--accent-strong)} .aside-arrow{color:var(--accent-strong); font-weight:800} .aside-card-dark{background:var(--dark); color:var(--dark-ink); border-top:3px solid var(--cta)} .aside-card-dark p{color:var(--dark-soft); font-size:14.5px; margin-bottom:14px} .cta-band{ background:var(--dark); color:var(--dark-ink); padding-block:72px; text-align:center; border-top:3px solid var(--accent); background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 52px), repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 52px); } .cta-band h2{font-size:clamp(32px,4.2vw,52px)} .cta-band p{color:var(--dark-soft); margin-top:12px; max-width:38em; margin-inline:auto} .cta-band-actions{display:flex; flex-wrap:wrap; gap:13px; justify-content:center; margin-top:26px} .post-list{display:grid; gap:18px; max-width:820px} .post-card{ display:block; background:#fff; border:1px solid var(--line); border-left:3px solid var(--accent); padding:24px 26px; text-decoration:none; color:var(--ink); transition:transform .18s ease, box-shadow .18s ease; } .post-card:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(13,15,19,.1)} .post-card-date{font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)} .post-card h2{font-size:26px; margin:8px 0} .post-card p{color:var(--ink-soft); font-size:14.8px} .post-more{display:inline-block; margin-top:12px; font-weight:700; font-size:14px; color:var(--accent-strong)} .blog-empty{color:var(--ink-soft); font-size:16px; max-width:44em} .post-body{max-width:760px; font-size:16.5px} .post-body h1{font-size:clamp(30px,3.6vw,44px); margin:0 0 18px} .post-body h2{font-size:clamp(24px,2.8vw,32px); margin:30px 0 12px} .post-body h3{font-size:22px; margin:24px 0 10px} .post-body p{margin:0 0 18px; color:var(--ink)} .post-body ul,.post-body ol{margin:0 0 18px 22px} .post-body li{margin-bottom:6px} .post-body a{color:var(--accent-strong); font-weight:600} .post-footer-nav{margin-top:34px} .btn-outline-paper{background:transparent; color:var(--ink); border-color:rgba(20,22,26,.4)} .btn-outline-paper:hover{border-color:var(--ink)} /* ============ RESPONSIVE ============ */ @media (max-width:1200px){ .g-proof-cell{padding:20px 16px} .g-proof-label{font-size:18px} } @media (max-width:960px){ .header-nav{display:none} .burger{display:flex} .g-services-head{grid-template-columns:1fr} .g-proof-bar-grid{grid-template-columns:1fr 1fr; gap:0 24px} .g-proof-cell{border-left:0; border-top:1px solid var(--dark-line); padding:16px 0; min-height:0} .g-proof-label{white-space:normal} .g-proof-google-cell{grid-column:1 / -1; border-top:0} .g-proof-layout{grid-template-columns:1fr} .g-proof-grid{grid-template-columns:1fr} .g-midpage-process-grid{grid-template-columns:1fr} .g-midpage-steps{grid-column:auto; grid-row:auto} .g-midpage-process-cta{grid-column:auto; align-self:auto} .g-midpage-why-grid{grid-template-columns:1fr} .g-midpage-why-media{max-width:520px; margin-bottom:44px} .g-midpage-why-cards{grid-template-columns:1fr} .g-midpage-verify{grid-template-columns:1fr; gap:22px} .g-midpage-verify-list{grid-template-columns:1fr} .g-midpage-area-grid{grid-template-columns:1fr} .g-midpage-area-map{order:2; min-height:340px} .g-midpage-area-facts{grid-template-columns:1fr} .g-closing-faq-headrow{grid-template-columns:1fr; margin-bottom:28px} .g-closing-contact-grid{grid-template-columns:1fr} .g-closing-contact-scrim{background:linear-gradient(180deg, rgba(10,12,16,.94) 0%, rgba(10,12,16,.86) 100%)} .g-closing-footer-grid{grid-template-columns:1fr 1fr} .g-closing-footer-cta{grid-column:1 / -1} .pg-layout{grid-template-columns:1fr} .pg-aside{position:static; max-width:560px} } @media (max-width:639px){ body{padding-bottom:calc(64px + env(safe-area-inset-bottom))} .callbar-wrap{display:flex} /* Claim banner: one quiet line instead of a two-line shout */ .claim-banner{font-size:12.5px; padding:7px 12px; gap:3px 10px} .cb-full{display:none} .cb-short{display:inline} .claim-dot{width:7px; height:7px; margin-right:7px} /* Header: reclaim fold height, keep 44px+ tap targets */ .g-fold-header .header-row{min-height:62px} .g-fold-header .btn-header{min-width:48px; padding:0 13px} .g-fold-header .btn-header .num{display:none} .g-fold-sub-trade{display:none} .g-fold-brand-sub{font-size:10px; letter-spacing:.12em} /* Fold: headline, checkpoints, both CTAs, and real Google proof in screen one */ .hero{min-height:560px} .g-fold-hero{min-height:0} .g-fold-copy{border-left:0; padding-left:0} .g-fold-inner{padding-block:24px 36px} .g-fold-h1{font-size:38px; margin:10px 0 12px} .g-fold-subhead{font-size:15px; line-height:1.55; margin-bottom:14px} .g-fold-points{flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:14px} .g-fold-points li{font-size:14px} .hero-actions .btn{width:100%} .g-fold-actions{gap:10px; margin-bottom:14px} .g-fold-actions .btn-lg{min-height:50px} .g-fold-proof{width:100%; padding:10px 12px; gap:10px} .g-fold-gtile{width:32px; height:32px} .g-fold-proof-quote{font-size:13.5px} .g-fold-proof-sub{font-size:11.5px} .g-fold-scroll{display:none} /* Trust bar: tighter cells so checkable proof leads */ .g-proof-cell{padding:13px 0; gap:11px; min-height:0} .g-proof-score{font-size:31px} .g-proof-score-row .stars{font-size:14px} .g-proof-label{font-size:16px} .g-proof-note{font-size:12px; margin-top:2px} .g-proof-gtile{width:40px; height:40px} /* Section rhythm: consistent band spacing on phones */ .value{padding-block:52px 48px} .value-grid{gap:24px; margin-top:26px} .value-item h3{font-size:23px} .g-services-section{padding-block:56px} .g-services-head{margin-bottom:22px; gap:14px} .g-services-grid{gap:16px} .g-services-photo img{aspect-ratio:16/9} .g-services-band{margin-top:20px; padding:24px 20px} .g-services-band-actions{width:100%} .g-services-band-actions .btn{width:100%} .g-proof-reviews{padding-block:56px} .g-proof-head{margin-bottom:26px} .g-proof-tagline{font-size:14.5px} .g-proof-layout{gap:16px} .g-proof-grid{gap:16px} .g-proof-agg{padding:24px 20px 22px} .g-proof-agg-num{font-size:64px} .g-proof-agg-outof{font-size:22px} .g-proof-agg .stars{font-size:19px; margin-top:10px} .g-proof-card{padding:20px 18px 18px} .g-proof-featured .g-proof-quote{font-size:15.5px} .g-midpage-process{padding-block:56px} .g-midpage-process-grid{gap:28px} .g-midpage-process-cta-row .btn{width:100%} .g-midpage-step{grid-template-columns:46px 1fr; column-gap:16px} .g-midpage-step-num{width:46px; height:46px; font-size:22px} .g-midpage-step::before{left:22px; top:52px} .g-midpage-why{padding-block:56px 60px} .g-midpage-why-grid{gap:34px} .g-midpage-why-media{margin-bottom:34px} .g-midpage-why-cards{gap:12px; margin-top:22px} .g-midpage-why-card{padding:16px 16px 18px} .g-midpage-verify{margin-top:40px; padding:24px 20px} .g-midpage-verify-list{gap:18px} .g-midpage-area{padding-block:56px} .g-midpage-area-grid{gap:28px} .g-midpage-area-cta .btn{width:100%} .g-closing-faq{padding-block:56px} .g-closing-faq-headrow{margin-bottom:20px} .g-closing-faq-sub{font-size:14.5px} .g-closing-faq-item summary{padding:17px 16px; font-size:15.5px} .g-closing-faq-body{padding:0 16px 20px 16px} .g-closing-contact{padding-block:56px} .g-closing-contact-grid{gap:36px} .g-closing-form{padding:24px 18px 20px} .g-closing-footer{padding-top:44px} .g-closing-footer-grid{grid-template-columns:1fr; gap:28px; padding-bottom:36px} .g-closing-footer-cta .btn,.g-closing-footer-hours{max-width:none} .g-closing-footer-links a{min-height:44px} .pg-hero{padding-block:40px 44px} .pg-main{padding-block:44px} .pg-hero-actions .btn{width:100%} .cta-band{padding-block:52px} .cta-band-actions .btn{width:100%} /* One consistent headline step-down for phone readability */ .g-services-head h2, .g-proof-head h2, .g-midpage-process h2, .g-midpage-why h2, .g-midpage-area-info h2, .g-closing-faq-head h2, .g-closing-contact h2{font-size:33px} }