:root{--area-blue:#168cff;--area-cyan:#74d2ff;--ink:#071521;--ink2:#0c2438;--paper:#f5f2ea;--paper2:#fcfbf7;--line:rgba(7,30,49,.15);--muted:#657788}
body.area-directory,body.city-area{background:#06111c;color:#102236}
.area-hero{position:relative;min-height:680px;display:flex;align-items:center;overflow:hidden;background-position:center;background-size:cover;color:#fff;isolation:isolate}
.area-hero:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(2,10,18,.96) 0%,rgba(2,10,18,.84) 44%,rgba(2,10,18,.28) 100%)}
.area-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 18% 38%,rgba(22,140,255,.25),transparent 31%),linear-gradient(180deg,transparent 58%,rgba(2,10,18,.72))}
.area-hero-inner{width:min(1480px,calc(100% - 56px));margin:auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.62fr);gap:72px;align-items:center;padding:78px 0 96px}
.area-breadcrumb{display:flex;align-items:center;gap:9px;margin-bottom:20px;color:#9ec9e9;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.area-breadcrumb a{color:#fff}.area-breadcrumb span{opacity:.55}
.area-hero-copy{max-width:850px}.area-hero-copy h1{margin:0;font-size:clamp(54px,6.7vw,96px);line-height:.91;letter-spacing:-.066em;text-wrap:balance;text-shadow:0 20px 52px rgba(0,0,0,.42)}
.area-hero-copy p{max-width:760px;margin:23px 0 0;color:#d6e4ef;font-size:clamp(17px,1.45vw,21px);line-height:1.65}
.area-kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;padding:8px 12px;border:1px solid rgba(116,210,255,.4);border-radius:999px;background:rgba(22,140,255,.12);color:#bde8ff;font-size:10px;font-weight:950;letter-spacing:.15em;text-transform:uppercase}
.area-kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--area-cyan);box-shadow:0 0 0 5px rgba(116,210,255,.11)}
.area-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}.area-actions .button{min-width:190px}
.area-facts{border-top:4px solid var(--area-blue);background:rgba(4,18,31,.9);box-shadow:0 30px 80px rgba(0,0,0,.36);backdrop-filter:blur(14px)}
.area-facts-head{padding:26px 27px 22px;border-bottom:1px solid rgba(255,255,255,.1)}.area-facts-head small{display:block;color:#7fc7fb;font-size:10px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.area-facts-head h2{margin:9px 0 0;color:#fff;font-size:28px;line-height:1.04;letter-spacing:-.04em}
.area-fact{display:grid;grid-template-columns:32px 1fr;gap:13px;padding:19px 27px;border-bottom:1px solid rgba(255,255,255,.09)}.area-fact:last-child{border-bottom:0}.area-fact b{color:#fff;font-size:13px}.area-fact span{display:block;margin-top:4px;color:#9db1c2;font-size:11px;line-height:1.45}.area-fact-mark{width:27px;height:27px;display:grid;place-items:center;border:1px solid rgba(116,210,255,.34);color:#8cd4ff;font-size:12px;font-weight:950}
.area-main{padding:24px 0 48px}.area-section{width:min(1480px,calc(100% - 42px));margin:24px auto;padding:86px clamp(28px,6vw,92px);background:linear-gradient(145deg,var(--paper2),var(--paper));border:1px solid rgba(255,255,255,.18);box-shadow:0 26px 80px rgba(0,0,0,.2)}
.area-section.dark{color:#fff;background:linear-gradient(135deg,#071827,#0b2946);border-color:rgba(255,255,255,.08)}
.area-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.44fr);gap:50px;align-items:end;margin-bottom:42px}.area-section-head h2{margin:0;font-size:clamp(38px,4.6vw,66px);line-height:.98;letter-spacing:-.055em;text-wrap:balance}.area-section-head p{margin:0;color:var(--muted);font-size:16px;line-height:1.7}.dark .area-section-head p{color:#b8cad8}
.area-eyebrow{display:block;margin-bottom:13px;color:#0b78e5;font-size:10px;font-weight:950;letter-spacing:.16em;text-transform:uppercase}.dark .area-eyebrow{color:#79c9ff}
.area-intro{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);gap:66px;align-items:center}.area-intro-copy h2{margin:0 0 22px;font-size:clamp(40px,4.7vw,68px);line-height:.97;letter-spacing:-.055em}.area-intro-copy p{color:var(--muted);font-size:16px;line-height:1.8}.area-intro-copy .lead{color:#263f56;font-size:20px;line-height:1.62}
.area-photo{position:relative;min-height:520px;background-position:center;background-size:cover;box-shadow:0 24px 70px rgba(7,31,53,.22)}.area-photo:before{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.24)}.area-photo:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(2,13,24,.88))}.area-photo-caption{position:absolute;z-index:2;left:28px;right:28px;bottom:26px;color:#fff}.area-photo-caption b{display:block;font-size:24px;letter-spacing:-.03em}.area-photo-caption span{display:block;margin-top:7px;color:#d2e1ec;font-size:13px;line-height:1.5}
.area-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}.area-service{min-height:260px;padding:30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.5);transition:.22s}.area-service:hover{background:#fff;transform:translateY(-4px);box-shadow:0 18px 42px rgba(7,31,53,.1)}.area-service-num{color:#0b79e5;font-size:10px;font-weight:950;letter-spacing:.13em}.area-service h3{margin:28px 0 11px;font-size:24px;letter-spacing:-.035em}.area-service p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}.area-service a{display:inline-flex;margin-top:20px;color:#0878e6;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.05em}.area-service a:after{content:"→";margin-left:8px}
.area-process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.14);border-left:1px solid rgba(255,255,255,.14)}.area-step{padding:30px;border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}.area-step small{color:#71c8ff;font-size:10px;font-weight:950;letter-spacing:.14em}.area-step h3{margin:20px 0 10px;color:#fff;font-size:22px}.area-step p{margin:0;color:#b8cad8;font-size:13px;line-height:1.65}
.area-fit{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.62fr);gap:62px;align-items:start}.area-fit h2{margin:0 0 18px;font-size:clamp(38px,4.4vw,62px);line-height:1;letter-spacing:-.052em}.area-fit p{color:var(--muted);font-size:16px;line-height:1.8}.area-checklist{border-top:4px solid var(--area-blue);background:#071827;color:#fff}.area-checklist h3{margin:0;padding:25px 26px 20px;border-bottom:1px solid rgba(255,255,255,.1);font-size:23px}.area-check{padding:16px 26px;border-bottom:1px solid rgba(255,255,255,.09);color:#c6d5e1;font-size:13px;line-height:1.5}.area-check:last-child{border-bottom:0}.area-check b{display:block;margin-bottom:4px;color:#fff}
.area-directory-list{border-top:1px solid var(--line)}.area-directory-row{display:grid;grid-template-columns:80px 1fr auto;gap:24px;align-items:center;padding:26px 4px;border-bottom:1px solid var(--line);transition:.2s}.area-directory-row:hover{padding-left:14px;background:rgba(255,255,255,.5)}.area-directory-row strong{color:#0a78e7;font-size:12px}.area-directory-row h3{margin:0 0 5px;font-size:26px;letter-spacing:-.04em}.area-directory-row p{margin:0;color:var(--muted);font-size:13px}.area-directory-row .arrow{font-size:25px;color:#0b78e5}
.area-faq{border-top:1px solid var(--line)}.area-faq details{border-bottom:1px solid var(--line)}.area-faq summary{position:relative;cursor:pointer;list-style:none;padding:23px 58px 23px 0;color:#102238;font-weight:900}.area-faq summary::-webkit-details-marker{display:none}.area-faq summary:after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);color:#0b78e5;font-size:24px}.area-faq details[open] summary:after{content:"–"}.area-faq p{max-width:980px;margin:0;padding:0 60px 24px 0;color:var(--muted);font-size:14px;line-height:1.75}
.nearby-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.nearby-links a{padding:11px 14px;border:1px solid var(--line);background:#fff;color:#234158;font-size:11px;font-weight:900}.nearby-links a:hover{border-color:#168cff;color:#0878e6}
.area-callout{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:42px;background:linear-gradient(110deg,#0872dc,#1795ff 60%,#70cfff);color:#fff;box-shadow:0 22px 58px rgba(22,140,255,.26)}.area-callout h2{margin:0 0 8px;font-size:clamp(32px,3.5vw,52px);letter-spacing:-.05em}.area-callout p{margin:0;color:#eaf6ff}.area-callout .button{background:#fff;color:#086cca;box-shadow:none}
@media(max-width:1100px){.area-hero-inner{grid-template-columns:1fr;gap:34px}.area-facts{max-width:680px}.area-section-head,.area-intro,.area-fit{grid-template-columns:1fr}.area-service-grid{grid-template-columns:repeat(2,1fr)}.area-process{grid-template-columns:repeat(2,1fr)}.area-photo{min-height:430px}}
@media(max-width:760px){.area-hero{min-height:auto}.area-hero-inner{width:min(100% - 26px,1480px);padding:58px 0 76px}.area-hero-copy h1{font-size:clamp(45px,13vw,66px)}.area-actions{flex-direction:column}.area-actions .button{width:100%}.area-section{width:min(100% - 18px,1480px);padding:62px 22px}.area-service-grid,.area-process{grid-template-columns:1fr}.area-section-head{gap:18px}.area-photo{min-height:340px}.area-directory-row{grid-template-columns:48px 1fr auto;gap:12px}.area-directory-row h3{font-size:22px}.area-callout{grid-template-columns:1fr;padding:30px 24px}.area-callout .button{width:100%}}

/* APPROVED SERVICE AREA IMAGES */
body.area-directory .area-hero,
body.city-area .area-hero {
  background-image: url('/fresno-city.jpg') !important;
  background-position: center center !important;
}
body.city-area .area-photo {
  background-image: url('/exterior-painting-preparation.jpg') !important;
  background-position: center 42% !important;
}
/* END APPROVED SERVICE AREA IMAGES */

/* DARK PREMIUM SERVICE-AREA CTA */
body.area-directory .area-section:has(.area-callout),
body.city-area .area-section:has(.area-callout){background:transparent!important;border:0!important;box-shadow:none!important;padding-top:44px!important;padding-bottom:44px!important}
body.area-directory .area-callout,
body.city-area .area-callout{display:block!important;padding:44px 46px!important;border:1px solid rgba(132,164,193,.28)!important;border-radius:30px!important;background:radial-gradient(circle at 88% 8%,rgba(255,173,41,.12),transparent 30%),linear-gradient(145deg,#0a2035,#071827)!important;color:#fff!important;box-shadow:0 28px 75px rgba(0,0,0,.34),0 12px 36px rgba(255,173,41,.08)!important}
body.area-directory .area-callout h2,
body.city-area .area-callout h2{max-width:900px;margin:0 0 18px!important;color:#fff!important;font-size:clamp(38px,5vw,68px)!important;line-height:1.02!important;letter-spacing:-.055em!important}
body.area-directory .area-callout p,
body.city-area .area-callout p{max-width:900px;margin:0 0 34px!important;color:#b9c9d8!important;font-size:clamp(18px,2vw,24px)!important;line-height:1.55!important}
body.area-directory .area-callout .button,
body.city-area .area-callout .button{display:flex!important;width:100%!important;min-height:76px!important;align-items:center!important;justify-content:center!important;border:0!important;border-radius:20px!important;background:linear-gradient(135deg,#ffd275,#ffad29)!important;color:#fff!important;font-size:clamp(18px,2vw,24px)!important;font-weight:900!important;box-shadow:0 18px 42px rgba(255,173,41,.26)!important}
@media(max-width:760px){body.area-directory .area-section:has(.area-callout),body.city-area .area-section:has(.area-callout){width:100%!important;margin:0!important;padding:48px 26px!important;background:#020a12!important}body.area-directory .area-callout,body.city-area .area-callout{padding:38px 36px!important;border-radius:28px!important}body.area-directory .area-callout h2,body.city-area .area-callout h2{font-size:clamp(40px,8.7vw,58px)!important}body.area-directory .area-callout p,body.city-area .area-callout p{font-size:clamp(18px,4.8vw,24px)!important}body.area-directory .area-callout .button,body.city-area .area-callout .button{min-height:74px!important;border-radius:20px!important}}
