:root { --navy:#102a43; --navy-deep:#071b2c; --blue:#1e5a88; --ice:#edf4f6; --white:#fffdf8; --orange:#f26a2e; --ink:#132536; --muted:#5d6c76; --line:#c9d5d9; --display:"Archivo",sans-serif; --mono:"DM Mono",monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--white); color:var(--ink); font-family:var(--display); line-height:1.5; letter-spacing:0; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
.page-shell { width:min(1180px,calc(100% - 80px)); margin-inline:auto; }
.skip-link { position:absolute; left:-999px; top:8px; z-index:100; padding:10px 14px; background:#fff; color:#000; }
.skip-link:focus { left:8px; }
.site-header { min-height:86px; display:flex; align-items:center; gap:32px; padding:0 40px; background:var(--white); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:13px; }
.brand-mark { position:relative; width:46px; height:46px; display:block; border:2px solid var(--navy); }
.brand-mark i { position:absolute; left:9px; top:9px; width:14px; height:26px; border-left:5px solid var(--orange); border-bottom:5px solid var(--orange); }
.brand-mark b { position:absolute; right:8px; top:8px; width:9px; height:9px; background:var(--navy); }
.brand > span:last-child { display:flex; flex-direction:column; text-transform:uppercase; line-height:1; }
.brand strong { font-size:18px; font-weight:800; }
.brand small { margin-top:4px; color:var(--blue); font:500 11px/1 var(--mono); }
nav { margin-left:auto; display:flex; gap:30px; color:var(--muted); font-size:14px; font-weight:600; }
nav a:hover { color:var(--orange); }
.header-call { display:flex; flex-direction:column; padding:10px 18px; background:var(--navy); color:#fff; }
.header-call small { color:#a9c3d1; font:500 9px/1 var(--mono); text-transform:uppercase; }
.header-call strong { margin-top:5px; font-size:16px; }
.hero { position:relative; min-height:calc(100vh - 86px); max-height:860px; display:flex; align-items:center; overflow:hidden; background:var(--navy-deep); color:#fff; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.hero-shade { position:absolute; inset:0; background:rgba(7,27,44,.58); }
.hero-copy { position:relative; z-index:2; width:min(760px,calc(100% - 80px)); margin-left:max(40px,calc((100% - 1180px)/2)); padding:80px 0 140px; }
.label { display:flex; align-items:center; gap:12px; margin:0 0 28px; font:500 12px/1.4 var(--mono); text-transform:uppercase; }
.label span { width:32px; height:32px; display:grid; place-items:center; color:var(--navy-deep); background:var(--orange); font-weight:500; }
.hero h1 { max-width:13ch; margin:0; font-size:72px; line-height:.98; font-weight:800; letter-spacing:0; text-wrap:balance; }
.hero-intro { max-width:58ch; margin:28px 0 0; color:#d7e4e9; font-size:19px; line-height:1.65; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:38px; }
.primary-button { min-height:58px; display:inline-flex; align-items:center; justify-content:center; padding:14px 26px; background:var(--orange); color:#fff; font-weight:800; }
.primary-button:hover { background:#d94d12; }
.text-button { padding:8px 0; border-bottom:1px solid rgba(255,255,255,.55); font-weight:600; }
.text-button span { margin-left:12px; color:var(--orange); }
.hero-index { position:absolute; z-index:2; left:0; right:0; bottom:0; min-height:76px; display:grid; grid-template-columns:repeat(4,1fr); background:rgba(7,27,44,.88); border-top:1px solid rgba(255,255,255,.24); }
.hero-index span { display:flex; align-items:center; padding:0 28px; border-right:1px solid rgba(255,255,255,.2); color:#d7e4e9; font:500 11px/1.4 var(--mono); text-transform:uppercase; }
.intro-grid { display:grid; grid-template-columns:150px minmax(0,1.2fr) minmax(280px,.8fr); gap:40px; padding-top:110px; padding-bottom:110px; }
.section-code { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; align-self:start; color:var(--orange); font:500 11px/1 var(--mono); }
.section-code i { height:1px; background:currentColor; }
.section-code small { grid-column:1/-1; color:var(--muted); font:500 10px/1.4 var(--mono); }
.eyebrow { margin:0 0 20px; color:var(--orange); font:500 11px/1.4 var(--mono); text-transform:uppercase; }
.intro-grid h2,.service-heading h2,.field-copy h2,.trust-copy h2,.weather-title h2,.call-plan h2,.faq-grid h2,.final-call h2 { margin:0; font-size:46px; line-height:1.07; letter-spacing:0; text-wrap:balance; }
.intro-copy { padding-top:34px; border-top:3px solid var(--orange); }
.intro-copy p { margin:0 0 18px; color:var(--muted); font-size:16px; line-height:1.7; }
.service-section { padding:110px 0; background:var(--navy); color:#fff; }
.service-heading { display:grid; grid-template-columns:150px minmax(0,720px); gap:40px; margin-bottom:64px; }
.section-code.light { color:var(--orange); }
.section-code.light small,.eyebrow.light { color:#a9c3d1; }
.service-heading h2 { color:#fff; }
.service-list { border-top:2px solid #fff; }
.service-list article { display:grid; grid-template-columns:80px minmax(0,1fr) 210px; gap:24px; align-items:center; padding:26px 0; border-bottom:1px solid rgba(255,255,255,.2); }
.service-list article > span { color:var(--orange); font:500 13px/1 var(--mono); }
.service-list h3 { margin:0 0 7px; font-size:24px; line-height:1.2; }
.service-list p { max-width:62ch; margin:0; color:#bcd0d9; font-size:15px; }
.service-list a { justify-self:end; padding-bottom:4px; border-bottom:1px solid var(--orange); color:#fff; font-size:13px; font-weight:700; }
.service-list a:hover { color:var(--orange); }
.field-note { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:90px; align-items:center; padding-top:120px; padding-bottom:120px; }
.field-note figure { position:relative; width:min(100%,460px); margin:0; }
.field-note figure::before { content:""; position:absolute; left:-18px; top:-18px; width:120px; height:120px; border-left:3px solid var(--orange); border-top:3px solid var(--orange); }
.field-note img { position:relative; width:100%; height:auto; display:block; object-fit:cover; border:1px solid var(--line); }
.field-note figcaption { display:grid; grid-template-columns:120px 1fr; gap:16px; margin-top:14px; color:var(--muted); font:400 10px/1.5 var(--mono); text-transform:uppercase; }
.field-note figcaption b { color:var(--orange); }
.field-copy h2 { max-width:13ch; }
.signal-list { margin-top:34px; border-top:2px solid var(--ink); }
.signal-list article { display:grid; grid-template-columns:44px 1fr; gap:14px; padding:17px 0; border-bottom:1px solid var(--line); }
.signal-list article > span { color:var(--orange); font:500 11px/1.5 var(--mono); }
.signal-list h3 { margin:0 0 4px; font-size:18px; }
.signal-list p { margin:0; color:var(--muted); font-size:14px; }
.trust-proof { padding:96px 0; background:var(--ice); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-grid { display:grid; grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr); gap:90px; align-items:center; }
.trust-grid figure { width:min(100%,420px); margin:0; }
.trust-grid img { width:100%; height:auto; display:block; object-fit:cover; border:1px solid var(--line); }
.trust-grid figcaption { margin-top:12px; color:var(--muted); font:400 10px/1.5 var(--mono); text-transform:uppercase; }
.trust-copy > p:not(.eyebrow) { max-width:58ch; margin:24px 0 0; color:var(--muted); line-height:1.7; }
.trust-copy ul { margin:28px 0 0; padding:0; list-style:none; border-top:2px solid var(--navy); }
.trust-copy li { display:grid; grid-template-columns:42px 1fr; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); }
.trust-copy li > span { color:var(--orange); font:500 10px/1.5 var(--mono); }
.trust-copy li div { display:flex; flex-direction:column; gap:3px; }
.trust-copy li b { color:var(--ink); font-size:15px; }
.trust-copy li small { color:var(--muted); font-size:13px; line-height:1.5; }
.weather-band { padding:96px 0; background:var(--ice); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.weather-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:90px; }
.weather-title h2 { max-width:15ch; }
.weather-grid ol { margin:0; padding:0; list-style:none; border-top:3px solid var(--navy); }
.weather-grid li { display:grid; grid-template-columns:48px 1fr; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.weather-grid li span { color:var(--orange); font:500 11px/1.5 var(--mono); }
.weather-grid li p { margin:0; font-weight:600; }
.call-plan { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:90px; padding-top:110px; padding-bottom:110px; }
.call-plan .section-code { max-width:150px; margin-bottom:42px; }
.call-plan h2 { max-width:10ch; }
.call-plan-intro { max-width:42ch; margin:24px 0 0; color:var(--muted); }
.plan-steps { margin:0; padding:0; list-style:none; border-top:3px solid var(--orange); }
.plan-steps li { display:grid; grid-template-columns:145px 1fr; gap:22px; padding:24px 0; border-bottom:1px solid var(--line); }
.plan-steps b { font-size:18px; }
.plan-steps span { color:var(--muted); }
.faq-section { padding:110px 0; background:var(--navy-deep); color:#fff; }
.faq-grid { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:90px; }
.faq-grid > div:first-child p:last-child { max-width:38ch; color:#a9c3d1; }
.faq-grid > div:first-child a { color:var(--orange); font-weight:700; }
.faq-list { border-top:1px solid rgba(255,255,255,.3); }
.faq-list details { border-bottom:1px solid rgba(255,255,255,.25); }
.faq-list summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:18px; padding:21px 0; font-weight:700; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span { color:var(--orange); font-size:20px; }
.faq-list details[open] summary span { transform:rotate(45deg); }
.faq-list p { max-width:62ch; margin:0; padding:0 0 22px; color:#bcd0d9; line-height:1.65; }
.final-call { padding:120px 0; background:var(--orange); color:#fff; text-align:center; }
.final-call p { margin:0 0 20px; color:var(--navy-deep); font:500 11px/1.4 var(--mono); }
.final-call h2 { max-width:18ch; margin:0 auto 34px; font-size:54px; }
.final-call a { display:inline-block; padding-bottom:5px; border-bottom:5px solid var(--navy-deep); color:var(--navy-deep); font-size:70px; line-height:1; font-weight:800; white-space:nowrap; }
.final-call small { display:block; margin-top:24px; color:#ffe4d4; }
footer { background:var(--navy-deep); color:#8eabb8; }
.footer-inner { min-height:90px; display:flex; align-items:center; justify-content:space-between; gap:24px; font:400 11px/1.4 var(--mono); }
.footer-inner strong { color:#fff; text-transform:uppercase; }
.mobile-call { display:none; }
@media(max-width:900px){
  .site-header { padding:0 24px; }
  nav { display:none; }
  .header-call { margin-left:auto; }
  .hero h1 { font-size:58px; }
  .intro-grid { grid-template-columns:110px 1fr; }
  .intro-copy { grid-column:2; }
  .field-note,.trust-grid,.weather-grid,.call-plan,.faq-grid { gap:50px; }
}
@media(max-width:700px){
  body { padding-bottom:76px; }
  .page-shell { width:calc(100% - 40px); }
  .site-header { min-height:72px; padding:0 20px; }
  .brand-mark { width:40px; height:40px; }
  .header-call { padding:9px 11px; }
  .header-call strong { font-size:13px; }
  .hero { min-height:720px; max-height:none; align-items:flex-start; }
  .hero-image { object-position:65% center; }
  .hero-shade { background:rgba(7,27,44,.68); }
  .hero-copy { width:calc(100% - 40px); margin:0 20px; padding:86px 0 150px; }
  .hero h1 { font-size:46px; }
  .hero-intro { font-size:17px; }
  .hero-actions { align-items:stretch; flex-direction:column; gap:18px; }
  .primary-button { width:100%; }
  .text-button { align-self:flex-start; }
  .hero-index { grid-template-columns:1fr 1fr; }
  .hero-index span { min-height:52px; padding:0 18px; border-bottom:1px solid rgba(255,255,255,.18); }
  .intro-grid,.service-heading,.field-note,.trust-grid,.weather-grid,.call-plan,.faq-grid { grid-template-columns:1fr; }
  .intro-grid { gap:30px; padding-top:72px; padding-bottom:72px; }
  .intro-copy { grid-column:auto; }
  .intro-grid h2,.service-heading h2,.field-copy h2,.trust-copy h2,.weather-title h2,.call-plan h2,.faq-grid h2 { font-size:36px; }
  .service-section,.faq-section { padding:76px 0; }
  .service-heading { gap:30px; margin-bottom:44px; }
  .service-list article { grid-template-columns:42px 1fr; }
  .service-list article a { grid-column:2; justify-self:start; }
  .field-note { gap:50px; padding-top:78px; padding-bottom:78px; }
  .field-note figure { width:min(100%,300px); }
  .trust-proof { padding:72px 0; }
  .trust-grid { gap:42px; }
  .trust-grid figure { width:min(100%,300px); }
  .weather-band { padding:72px 0; }
  .call-plan { gap:48px; padding-top:78px; padding-bottom:78px; }
  .plan-steps li { grid-template-columns:110px 1fr; }
  .faq-grid { gap:48px; }
  .final-call { padding:84px 0; }
  .final-call h2 { font-size:40px; }
  .final-call a { font-size:38px; border-bottom-width:3px; }
  .footer-inner { align-items:flex-start; flex-direction:column; padding-top:30px; padding-bottom:30px; }
  .mobile-call { position:fixed; left:0; right:0; bottom:0; z-index:50; display:block; padding:10px 14px; background:rgba(7,27,44,.96); }
  .mobile-call a { min-height:52px; display:flex; align-items:center; justify-content:center; background:var(--orange); color:#fff; font-weight:800; }
}
@media(max-width:390px){
  .brand > span:last-child { display:none; }
  .hero h1 { font-size:41px; }
  .hero-copy { padding-top:68px; }
  .final-call a { font-size:32px; }
  .field-note figcaption { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{transition:none!important;} }

.h1-location{display:block;margin-top:14px;font-family:inherit;font-size:16px;line-height:1.25;font-weight:700;letter-spacing:0;text-transform:uppercase}

/* Sprint 2 fold fit */
@media(min-width:701px){.hero-copy{padding:48px 0 58px}.hero h1{font-size:64px}}
@media(max-width:700px){.hero{min-height:0;max-height:none}.hero-copy{padding:30px 0 94px}.hero h1{font-size:40px}.hero-proof{margin-top:18px}.text-button{display:none}}

/* Contextual service image treatment */
.trust-proof{color:#fff;background-image:linear-gradient(100deg,rgba(17,47,57,.94),rgba(17,47,57,.72)),url('/__site-assets/plumberbrightonco.com/images/service-background.jpg?v=2&cfv=assetfix-20260513d-1787854342752');background-size:cover;background-position:center}
.trust-proof h2,.trust-proof .eyebrow,.trust-proof p{color:#fff}.trust-proof article{background:rgba(255,255,255,.94);color:#19323a;backdrop-filter:blur(2px)}.trust-proof article p{color:#4e6065}
.trust-proof p{color:rgba(255,255,255,.88)!important}.trust-proof article p{color:#4e6065!important}
/* Mobile readability guard: keep long display headings scannable without changing this site's visual identity. */
@media (max-width: 600px) {
  h1 {
    max-width: 100% !important;
    font-size: clamp(36px, 10.25vw, 42px) !important;
    line-height: 1.04 !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  h2 {
    max-width: 100% !important;
    font-size: clamp(30px, 9vw, 38px) !important;
    line-height: 1.08 !important;
    overflow-wrap: normal;
    word-break: normal;
  }
}