/*
 CAVAN HVAC - MAIN CSS FILE
 This controls how EVERY page looks, so if we change the orange here,
 we're changing it everywhere instead of doing 7 separate edits.
 CSS = how it looks. HTML = what's actually on the page. JS = what happens when you click stuff.
*/
:root { --ink:#202426; --muted:#626b70; --orange:#f97316; --orange-dark:#da5e0b; --paper:#f4f5f3; --cream:#f7f3ec; --line:#e1e5e2; --dark:#20272b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 Arial,Helvetica,sans-serif; }
img { display:block; max-width:100%; }
a { color:inherit; }
button,input,select,textarea { font:inherit; }
/* Keeps the content from taking up the entire screen on a huge monitor.
   calc(100% - 48px) = leave 24px of space on both sides. */
.container { width:min(1160px,calc(100% - 48px)); margin-inline:auto; }
.site-header { background:#fff; border-bottom:1px solid var(--line); }
.header-inner { display:flex; justify-content:space-between; align-items:center; gap:28px; min-height:92px; }
.brand { text-decoration:none; display:flex; flex-direction:column; flex-shrink:0; line-height:1; }
.brand-name { font-size:30px; font-weight:900; letter-spacing:-1.7px; }
.brand-name span { color:var(--orange); }
.brand-subtitle { font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); font-weight:bold; margin-top:8px; }
/* Flex puts nav links next to each other. flex-wrap lets them move down
   to another row instead of running off the screen. */
.site-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:4px 15px; }
.site-nav a { text-decoration:none; font-size:13px; font-weight:700; color:#4b555b; padding:9px 0; white-space:nowrap; border-bottom:2px solid transparent; }
.site-nav a:hover,.site-nav a[aria-current="page"] { color:var(--orange-dark); border-bottom-color:var(--orange); }
.site-nav .nav-cta { background:var(--orange); color:#fff; border:0; border-radius:7px; padding:11px 15px; }
.site-nav .nav-cta:hover { background:var(--orange-dark); }
main { padding-top:30px; }
section { margin-bottom:24px; }
h1,h2,h3 { letter-spacing:-.025em; line-height:1.14; }
h1 { font-size:clamp(42px,5vw,70px); margin:0 0 20px; }
h2 { font-size:clamp(30px,3vw,42px); margin:0 0 20px; }
h3 { font-size:22px; margin:0 0 12px; }
p { margin:0 0 18px; }
.eyebrow { font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:900; color:var(--orange-dark); margin:0 0 14px; }
.lead { font-size:clamp(17px,1.8vw,21px); color:var(--muted); line-height:1.65; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:14px 24px; border-radius:7px; font-size:15px; font-weight:800; line-height:1.2; text-decoration:none; cursor:pointer; border:2px solid transparent; transition:background .2s,transform .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:#fff; background:var(--orange); }
.button-primary:hover { background:var(--orange-dark); }
.button-outline { border-color:#b8c0c1; background:transparent; }
.button-outline:hover { background:white; }
.button-light { background:white; color:var(--ink); }
.button:focus-visible,.site-nav a:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.button:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.button-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
/* Hero = the big first section. "cover" fills the box with the photo.
   The :before overlay below darkens the left side so white words are readable. */
.hero-home { min-height:560px; display:flex; align-items:center; isolation:isolate; position:relative; overflow:hidden; border-radius:18px; background:#172735 url("images/hero-hvac.png") center/cover no-repeat; color:#fff; }
.hero-home:before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(13,26,39,.96) 0%,rgba(13,26,39,.85) 45%,rgba(13,26,39,.18) 100%); }
.hero-home .inner { padding:65px clamp(28px,6vw,82px); max-width:760px; }
.hero-home h1 { font-size:clamp(46px,5.8vw,76px); line-height:1.04; }
.hero-home .lead { color:#e7eaeb; max-width:560px; }
.hero-home .eyebrow { color:#ffb37d; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:22px; margin-bottom:28px; }
.section-heading h2 { max-width:690px; margin:0; }
.section-heading p { max-width:430px; color:var(--muted); margin:0; }
/* 3 columns on desktop. "1fr" means each gets an equal share of the space.
   We switch this to 1 column for phones in the media section below. */
.service-grid,.detail-grid,.values-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.service-card { background:white; border:1px solid var(--line); border-radius:14px; padding:30px; min-height:295px; display:flex; flex-direction:column; align-items:flex-start; transition:transform .2s,box-shadow .2s; }
.service-card:hover { transform:translateY(-4px); box-shadow:0 18px 32px #17202414; }
.card-number { color:var(--orange-dark); font-weight:900; letter-spacing:1.5px; font-size:12px; margin:0 0 36px; }
.service-card p,.detail-card p,.numbered-list p { color:var(--muted); }
.text-link { text-decoration:none; font-weight:800; color:var(--orange-dark); margin-top:auto; }
.text-link:hover { text-decoration:underline; }
.split-feature { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(28px,5vw,75px); padding:70px 0; }
.split-feature .copy { max-width:550px; }
.feature-photo { width:100%; height:410px; object-fit:cover; border-radius:14px; }
.muted-section { background:var(--cream); border-radius:18px; padding:60px clamp(28px,5vw,70px); }
.cta-band { background:var(--dark); color:white; border-radius:18px; padding:56px clamp(28px,5vw,70px); display:flex; align-items:center; justify-content:space-between; gap:28px; }
.cta-band h2 { margin:0 0 12px; }
.cta-band p { max-width:590px; color:#cfd4d4; margin:0; }
.cta-band .button { flex-shrink:0; }
/* Shared service-page hero: 2 equal columns (words + image).
   The heating page uses reverse below to move the photo to the left. */
.page-hero { background:white; border-radius:18px; padding:clamp(25px,5vw,60px); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(24px,5vw,70px); min-height:480px; }
.page-hero .hero-copy { max-width:510px; }
.page-hero h1 { font-size:clamp(36px,4.5vw,60px); }
.page-hero .hero-image { width:100%; height:375px; object-fit:cover; border-radius:12px; }
.page-hero.reverse .hero-image { order:-1; }
.page-hero.soft { background:var(--cream); }
.page-hero.dark { background:var(--dark); color:white; }
.page-hero.dark .lead { color:#d3d7d6; }
.page-hero.dark .eyebrow { color:#ffad75; }
.page-hero.single { display:block; min-height:0; padding:75px clamp(28px,6vw,80px); }
.page-hero.single .hero-copy { max-width:760px; }
/* ABOUT PAGE - we're using a fake photo ONLY as a placeholder.
   A real Alex photo should replace images/alex-placeholder.png before launch. */
.portrait-frame { margin:0; position:relative; }
.portrait-frame .hero-image { height:430px; width:100%; object-fit:cover; object-position:center 26%; }
/* ABOUT 5A: story and affordability now live in DIFFERENT sections.
   max-width is intentional: very wide paragraphs are tiring to read.
   The pricing principles are just three columns with thin top lines, not boxes. */
.founder-story { padding-block:clamp(48px,6vw,80px); }
.founder-story>h2 { max-width:830px; }
.founder-story-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4vw,66px); align-items:stretch; margin-top:25px; }
.founder-story-text { min-width:0; }
.founder-story-text p { color:#4b555b; font-size:18px; line-height:1.9; }
.founder-story-text p+p { margin-top:22px; }
.founder-work-photo { margin:0; min-width:0; }
.founder-work-photo img { display:block; width:100%; height:100%; max-height:670px; min-height:445px; object-fit:cover; border-radius:15px; }
.affordability-section { border-radius:18px; background:#20272b; color:white; padding:clamp(36px,5vw,70px); }
.affordability-section .eyebrow { color:#ffa46a; }
.affordability-heading { display:grid; grid-template-columns:1.15fr .85fr; gap:45px; align-items:end; margin-bottom:40px; }
.affordability-heading h2 { margin-bottom:0; max-width:550px; }
.affordability-heading>p { color:#d1d7d6; font-size:17px; margin:0; }
.affordability-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; }
.affordability-points>div { border-top:1px solid #64716d; padding-top:24px; }
.affordability-points span { color:#ff9e61; font-size:13px; font-weight:900; letter-spacing:1px; }
.affordability-points h3 { font-size:20px; margin:15px 0 12px; }
.affordability-points p { color:#cbd3d1; font-size:15px; margin:0; }
/* MAINTENANCE PAGE - different photo from the cooling/heating images.
   object-position keeps the technician and condenser in view when cropped. */
.maintenance-intro .hero-image { object-position:60% center; }
.content-section { background:white; border-radius:18px; padding:clamp(32px,5vw,70px); }
.section-intro { max-width:690px; color:var(--muted); font-size:17px; }
.detail-grid { gap:16px; margin-top:32px; }
.detail-card,.value-card { background:#fafaf8; border:1px solid var(--line); border-radius:12px; padding:25px; }
.detail-card h3 { font-size:20px; }
.detail-card p { font-size:15px; margin:0; }
/* The heating warning cards used to be 3 plain divs with no borders.
   border-left makes the orange accent; box-shadow adds a subtle lift on hover. */
.warning-card { background:#fff; border:1px solid #dddeda; border-left:4px solid var(--orange); min-height:195px; transition:transform .2s,box-shadow .2s; }
.warning-card:hover { transform:translateY(-4px); box-shadow:0 13px 26px #20242615; }
.warning-number { display:block; color:var(--orange-dark); font-size:10px; font-weight:900; letter-spacing:1.3px; margin-bottom:20px; }
/* Cooling uses the bordered warning cards too, plus one simple visual icon.
   CSS grid stretches each card to the same row height. */
.warning-grid { align-items:stretch; }
.warning-grid .warning-card { display:flex; flex-direction:column; }
.warning-grid .warning-card h3 { margin-bottom:12px; }
.numbered-list { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:30px; }
.numbered-list article { border-top:2px solid var(--orange); padding-top:24px; }
.numbered-list small { color:var(--orange-dark); font-weight:900; letter-spacing:1px; }
.numbered-list h3 { margin-top:14px; }
.brand-note { background:var(--cream); border-left:4px solid var(--orange); padding:24px 28px; border-radius:0 10px 10px 0; color:#4f5658; }
/* REAL manufacturer logo SVGs saved right in the ZIP.
   grid-template-columns repeat(4,1fr) = 4 identical columns on a laptop.
   The gray backgrounds and subtle hover give the logos their own nice tiles.
   These are only common equipment brands; we aren't saying Alex is a dealer. */
.equipment-brand-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:30px 0 16px; }
.equipment-brand { min-height:156px; border:1px solid var(--line); border-radius:13px; padding:22px 16px 15px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:15px; background:#fafbf9; transition:transform .2s,box-shadow .2s,border-color .2s; }
.equipment-brand:hover { transform:translateY(-5px); box-shadow:0 14px 24px #1e332315; border-color:#bfd7c5; }
.equipment-brand img { width:100%; max-width:158px; height:66px; object-fit:contain; }
.equipment-brand strong { color:#4b575c; font-size:13px; letter-spacing:.3px; }
.brand-clarifier { color:var(--muted); font-size:12px; max-width:840px; margin:18px 0 0; }
.about-copy { max-width:780px; }
.about-copy p { font-size:18px; line-height:1.85; color:#485055; }
.about-copy p+p { margin-top:20px; }
.values-grid { margin-top:24px; gap:16px; }
.location-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; list-style:none; padding:0; margin:30px 0 0; }
/* Colored town tiles. Hover moves them up a little and changes the background.
   It's subtle, not the whole card flying across the screen lol. */
.location-grid li { padding:0; background:#e8eee9; border:1px solid #d8e4d9; border-radius:12px; font-weight:800; overflow:hidden; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }
.location-grid li:nth-child(3n + 2) { background:#f7ece0; border-color:#f0dcc9; }
.location-grid li:nth-child(3n) { background:#e8edf2; border-color:#d6e1ea; }
.location-grid li:hover { transform:translateY(-5px); box-shadow:0 14px 24px #20242617; background:#ffead9; }
.location-grid li a { display:flex; justify-content:space-between; align-items:center; text-decoration:none; padding:23px; min-height:88px; }
.location-grid li span { color:var(--orange-dark); font-size:23px; }
.location-grid li .town-number { font-size:12px; color:#879e90; margin-right:9px; }
.location-grid li:focus-within { outline:3px solid var(--orange); outline-offset:2px; }
/* Real August West Chester photo. The summer trees give the banner a warmer
   local feel; overlay still protects contrast for the heading on phones too. */
.service-area-banner { text-align:center; background:linear-gradient(90deg,rgba(12,27,25,.83),rgba(12,27,25,.53)),url("images/west-chester-august.jpg") center 54%/cover; border-radius:18px; min-height:355px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:white; padding:clamp(55px,7vw,95px) 26px; }
.service-area-banner .eyebrow { color:#ffb47d; }
.service-area-banner h1 { margin-bottom:17px; }
.service-area-banner .lead { max-width:690px; margin:0 auto; color:#f1f2ee; }
.service-photo-credit { text-align:right; font-size:11px; color:#697570; margin:7px 9px 0; }
.service-photo-credit a { color:inherit; }
.community-directory-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:25px; }
.community-directory-heading h2 { margin:0; }
.community-directory-heading>p { max-width:350px; color:var(--muted); margin:0; font-size:15px; }
/* Each town gets three pieces: small number, big town name, contact action.
   The whole tile is one link, so visitors can click anywhere in that rectangle.
   On a phone they become a single column in the media query. */
.directory-grid { gap:17px; margin-top:28px; }
.directory-grid li { min-height:205px; border-radius:15px; }
.directory-grid li a { min-height:205px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; padding:26px; }
.directory-grid li .town-number { font-size:11px; font-weight:900; letter-spacing:1.2px; color:#61796f; margin:0; }
.directory-grid li strong { font-size:clamp(23px,2vw,30px); letter-spacing:-.7px; line-height:1.2; }
.directory-grid li .directory-action { color:var(--orange-dark); font-size:13px; font-weight:900; opacity:.72; transform:translateY(4px); transition:opacity .2s,transform .2s; }
.directory-grid li .directory-action b { font-size:17px; font-weight:900; }
.directory-grid li:hover .directory-action,.directory-grid li:focus-within .directory-action { opacity:1; transform:translateY(0); }
.contact-grid { display:grid; grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr); gap:40px; align-items:start; }
/* CONTACT: this dark right-hand panel is a simple three-step overview.
   It gives the hero real content without pretending we guarantee a 24-hour response. */
.contact-intro { min-height:490px; }
.contact-process { background:var(--dark); border-radius:16px; color:#fff; padding:34px; box-shadow:0 17px 32px #26313c26; }
.contact-process-tag { color:#ffb17a; font-size:11px; letter-spacing:2px; font-weight:900; margin-bottom:10px; }
.contact-process h2 { font-size:28px; margin-bottom:20px; }
.contact-process ol { padding:0; margin:0; list-style:none; }
.contact-process li { display:flex; gap:17px; padding:15px 0; border-top:1px solid #ffffff26; }
.contact-process li>span { flex-shrink:0; font-weight:900; color:#ff9b54; font-size:14px; }
.contact-process strong { font-size:15px; }
.contact-process p { color:#c4cbca; margin:3px 0 0; font-size:13px; line-height:1.5; }
.contact-method { border-bottom:1px solid var(--line); padding:18px 0; }
.contact-method strong { display:block; margin-bottom:5px; }
.contact-method p { margin:0; color:var(--muted); }
.contact-form { background:var(--cream); padding:35px; border-radius:14px; }
.contact-form h2 { font-size:27px; }
.contact-form label { display:block; font-size:14px; font-weight:800; margin:18px 0 6px; }
.contact-form input,.contact-form select,.contact-form textarea { display:block; width:100%; padding:12px 14px; border-radius:7px; border:1px solid #c8cecd; background:white; color:var(--ink); font-size:16px; }
.contact-form textarea { resize:vertical; min-height:130px; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { outline:2px solid var(--orange); outline-offset:2px; border-color:var(--orange); }
.form-status { font-size:14px; color:var(--muted); margin:15px 0 0; }
.form-status.error { color:#b42318; }
.form-status.success { color:#216e41; }
.site-footer { margin-top:70px; background:#1c2327; color:#f5f5f2; padding:55px 0 25px; }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:45px; }
.site-footer .brand-name { font-size:27px; }
.site-footer p { max-width:360px; color:#bac2c4; font-size:14px; margin:18px 0; }
.site-footer h3 { font-size:14px; text-transform:uppercase; letter-spacing:1px; }
.footer-links { display:grid; gap:9px; }
.footer-links a { color:#cdd3d4; font-size:14px; text-decoration:none; }
.footer-links a:hover { color:#ffb37d; }
.footer-bottom { border-top:1px solid #3c4549; margin-top:40px; padding-top:22px; color:#b2bbbe; font-size:12px; }
@media(max-width:1000px) {
 .header-inner { flex-direction:column; justify-content:center; padding:22px 0; gap:18px; }
 .brand { align-items:center; }
 .site-nav { justify-content:center; }
 .equipment-brand-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* MOBILE SECTION - think of this as an IF statement:
   IF browser width is 768px or less, use these rules instead.
   Important: this goes AFTER desktop CSS or the desktop rules might override it. */
@media(max-width:768px) {
 .container { width:min(calc(100% - 30px),560px); }
 .brand-name { font-size:28px; }
 .site-nav { gap:2px 12px; }
 .site-nav a { font-size:12px; padding:8px 0; }
 .site-nav .nav-cta { padding:8px 10px; }
 main { padding-top:15px; }
 .hero-home { min-height:515px; background-position:62% center; }
 .hero-home:before { background:linear-gradient(90deg,#0d1a27ed,#0d1a27a8); }
 .hero-home .inner { padding:52px 25px; }
 .hero-home h1 { font-size:46px; }
 .service-grid,.detail-grid,.numbered-list,.values-grid,.location-grid { grid-template-columns:1fr; }
 .service-card { min-height:0; padding:25px; }
 .card-number { margin-bottom:20px; }
 .section-heading { display:block; }
 .section-heading p { margin-top:15px; }
 .split-feature,.page-hero,.contact-grid,.footer-grid { grid-template-columns:1fr; }
 .affordability-heading,.affordability-points { grid-template-columns:1fr; gap:22px; }
 .affordability-heading { margin-bottom:35px; }
 .founder-story-text p { font-size:16px; }
 .founder-story-layout { grid-template-columns:1fr; }
 .founder-work-photo img { height:320px; min-height:0; }
 .community-directory-heading { display:block; }
 .community-directory-heading>p { margin-top:18px; }
 .directory-grid li,.directory-grid li a { min-height:170px; }
 .split-feature { padding:42px 0; }
 .feature-photo { height:300px; }
 .page-hero { min-height:0; padding:25px; gap:24px; }
 .page-hero .hero-image { height:280px; }
 .portrait-frame .hero-image { height:360px; }
 /* The contact process card becomes full-width on mobile. */
 .contact-process { padding:26px; }
 .map-footer { flex-wrap:wrap; }
 .page-hero.reverse .hero-image { order:0; }
 .page-hero.single { padding:50px 28px; }
 .page-hero h1 { font-size:39px; }
 .cta-band { display:block; padding:38px 28px; }
 .cta-band .button { margin-top:24px; }
 .content-section,.muted-section { padding:34px 25px; }
 .about-copy p { font-size:16px; }
 .contact-form { padding:25px 18px; }
 .footer-grid { gap:25px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition:none!important; } }