/* Chameleon Garage Door Repair — site stylesheet.
   Curated from the framework's style.css + refined.css (owner-tool rules removed, the refined
   token values folded in). Brand tokens: docs: Chameleon-Claude-Bundle/assets/READ-ME.txt. */

:root{
  --ink:#153f3d;
  --muted:#586865;
  --paper:#f8f7f2;
  --white:#fffefa;
  --line:#d9dfd9;
  --soft:#edf1eb;
  --mint:#d7e9df;
  --accent:#a95b4c;
  --teal:#237970;
  --focus:#7b983e;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea,summary{touch-action:manipulation}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:5px}
button{cursor:pointer}
img{max-width:100%;height:auto}
p{color:var(--muted);margin:0 0 22px}
h1,h2,h3{line-height:1.08;letter-spacing:-.045em;margin:0 0 24px}
h1{font-size:clamp(40px,4.5vw,69px);font-weight:600}
h2{font-size:clamp(30px,3.2vw,46px);font-weight:500}
h3{font-size:22px;letter-spacing:-.025em}
em{font-family:Georgia,serif;font-weight:400}
small,.muted{font-size:12px;color:var(--muted)}
main a:not(.btn):not(.servicecard):not(.citytiles a):not(.textlink){text-decoration:underline;text-underline-offset:4px;text-decoration-color:#9fb3a8}
main a:not(.btn):hover{color:var(--teal)}

.skip{position:absolute;left:-1000px}
.skip:focus{left:10px;top:10px;background:#fff;z-index:50;padding:15px}

/* ---------- Header / nav ---------- */
header{padding:19px 5.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:28px}
.brand{display:flex;align-items:center;gap:13px;line-height:1}
.brand .chameleon-mark{width:96px;height:55px;object-fit:contain}
.brand>span{font-size:29px;font-weight:700;letter-spacing:-1.3px}
.brand small{display:block;font-size:8px;letter-spacing:2.1px;margin:9px 0 0 2px;color:inherit}
header nav{display:flex;align-items:center;gap:34px;font-size:13px}
header nav a[aria-current="true"]{text-decoration:underline;text-underline-offset:6px}
header nav a:hover,.textlink:hover{color:var(--teal)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:28px;background:var(--ink);color:var(--white);padding:17px 24px;border-radius:2px;border:0;font-size:14px;font-weight:600;line-height:1.4;min-height:52px;transition:transform .18s,background .18s}
.btn:hover{background:#2b5a46;transform:translateY(-2px);color:#fff}
.btn.small{min-height:44px;padding:13px 19px;font-size:12px}
.btn.lime{color:var(--ink);background:#e2ece2}
.btn.lime:hover{background:var(--mint)}
.menu{display:none}

/* ---------- Homepage ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;padding:40px 5.5%;gap:4%;align-items:center;max-width:1600px;margin:auto}
.herocopy{padding:14px 0}
.eyebrow{font-size:10px;letter-spacing:.16em;font-weight:700;display:block;margin-bottom:22px}
.eyebrow i{display:inline-block;width:7px;height:7px;background:#cf6554;border-radius:50%;margin-right:7px}
.hero h1{margin-bottom:22px;font-weight:500;font-size:clamp(42px,4.5vw,68px)}
.hero h1 em{color:var(--teal)}
.hero-sub{font-size:23px;line-height:1.3;letter-spacing:-.04em;color:var(--ink);margin-bottom:20px}
.herocopy>p:not(.hero-sub){font-size:15px;max-width:450px}
.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:30px 0 18px}
.textlink{border:0;background:none;padding:0;font-size:13px;text-decoration:underline;text-underline-offset:5px}
.heroart{position:relative;border-radius:2px;overflow:hidden;align-self:stretch;min-height:535px;background:#e7e5d9;display:flex;align-items:center}
.heroart picture,.garage-photo{display:block;width:100%;height:100%}
.heroart>picture{position:absolute;inset:0}
.garage-photo{object-fit:cover;object-position:57% center}
.principles{display:flex;justify-content:space-around;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:23px 5.5%;font-size:10px;gap:20px;color:var(--accent);background:#f1f2ec}
.principles b{font-size:13px;letter-spacing:-.02em;color:var(--ink);margin-left:19px;font-weight:500}
.section{padding:70px 5.5%;max-width:1600px;margin:auto}
.sectionhead{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:30px}
.sectionhead h2{margin-bottom:0}
.sectionhead p{font-size:13px;margin-bottom:4px}
.sectionfoot{margin-top:24px;font-size:12px;color:var(--muted)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.servicecard{padding:27px 29px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;min-height:195px;transition:background .18s}
.servicecard:hover{background:var(--soft)}
.service-index{display:block;font-family:Georgia,serif;color:var(--accent);font-size:17px;margin-bottom:27px}
.servicecard h3{font-size:20px;margin-bottom:12px;font-weight:500;letter-spacing:-.035em;max-width:270px}
.servicecard p{font-size:13px;padding-right:20px;max-width:290px;margin-bottom:0}
.cardarrow{position:absolute;bottom:24px;right:24px;font-size:23px;color:#39887c}

.approach{display:grid;grid-template-columns:1fr 1fr;background:var(--soft);margin:0 5.5%;border-radius:2px;overflow:hidden}
.approach-visual{background:#e5e9dc;color:var(--ink);padding:40px;display:flex;flex-direction:column;justify-content:space-between;min-height:510px;position:relative}
.approach-visual .eyebrow{color:#526f65}
.bigmark{width:85%;max-width:390px;align-self:center}
.bigmark img{width:100%;height:auto;display:block}
.approach-visual p{font-size:30px;letter-spacing:-.03em;line-height:1.2;color:var(--ink);margin:0}
.approachcopy{padding:48px;background:var(--soft)}
.approachcopy h2{font-size:36px}
.approachcopy>p{font-size:14px}
.approachcopy ol{counter-reset:step;padding:0;list-style:none}
.approachcopy li{position:relative;padding:0 0 15px 40px}
.approachcopy li:before{counter-increment:step;content:'0' counter(step);position:absolute;left:0;top:1px;font-size:12px;color:#71845e}
.approachcopy li b{font-size:15px;font-weight:600}
.approachcopy li p{font-size:13px;margin:5px 0 10px}

.coverage{display:grid;grid-template-columns:1fr 1fr;gap:10%}
.coverage>div>p{max-width:440px;font-size:14px}
.citylist>a{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);font-size:24px;letter-spacing:-.04em;text-decoration:none!important}
.citylist>a:hover{color:var(--teal)}
.citylist small{display:block;font-size:8px;letter-spacing:.15em;margin-bottom:5px}
.citylist b{font-size:26px;font-weight:400}

.questions{border-top:1px solid var(--line);display:grid;grid-template-columns:.7fr 1.3fr;gap:10%}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:25px;cursor:pointer;font-size:15px;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{font-size:23px;font-weight:400;transition:transform .18s}
.faq details[open] summary span{transform:rotate(45deg)}
.faq details p{font-size:14px;margin:20px 25px 0 0}

.lastcta{display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:var(--white);padding:60px 5.5%;gap:40px}
.lastcta h2{margin:0}
.lastcta .eyebrow{color:var(--mint)}
.lastcta p{color:#b9cabb;font-size:10px;max-width:260px;margin:16px 0 0}

/* ---------- Footer ---------- */
footer{padding:60px 5.5% 24px}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.footgrid .brand{margin-bottom:28px}
.footgrid .brand img{width:88px;height:48px}
.footgrid p{font-size:18px;line-height:1.4}
.footheading{font-size:12px;font-weight:700;letter-spacing:0;margin:10px 0 24px}
.footgrid>div>a:not(.brand){display:block;font-size:12px;margin-bottom:12px;color:var(--muted)}
.footgrid>div>a:not(.brand):hover{color:var(--teal)}
.footbottom{border-top:1px solid var(--line);margin-top:44px;padding-top:20px;display:flex;gap:25px;font-size:10px;color:var(--muted)}
.footbottom>span{margin-right:auto}

/* ---------- Inner pages ---------- */
.innerhero{padding:38px 5.5% 50px;background:var(--soft);border-bottom:1px solid var(--line)}
.innerhero>h1{max-width:850px}
.lead{font-size:19px;max-width:750px;line-height:1.65}
.breadcrumb{font-size:11px;color:var(--muted);margin-bottom:30px}
.breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0 6px}
.breadcrumb li+li:before{content:'/';margin-right:6px;color:#9fb3a8}
.breadcrumb a{text-decoration:underline;text-underline-offset:3px}
.narrow{max-width:950px}
.notice{background:var(--soft);border-left:3px solid var(--accent);padding:18px 21px;font-size:13px;line-height:1.6;margin:24px 0;color:var(--ink)}
.citytiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.citytiles>a{padding:28px;border:1px solid var(--line);background:var(--white);text-decoration:none!important}
.citytiles>a:hover{background:var(--soft)}
.citytiles h2{font-size:29px;margin:12px 0}
.citytiles p{font-size:12px;margin:0;color:var(--muted)}
.guidetiles h2{font-size:24px}
.contentgrid{display:grid;grid-template-columns:1.3fr .6fr;gap:13%}
.contentgrid article>h2{font-size:31px;margin-top:35px}
.contentgrid article>h2:first-child{margin-top:0}
.contentgrid article p{font-size:16px}
.contentgrid aside h3{font-size:17px}
.contentgrid aside>a{display:block;padding:14px 0;font-size:14px;border-bottom:1px solid var(--line)}
.aside-note{font-size:11px;margin:23px 0 0}
aside{align-self:start}

/* Compact service / city / local / guide pages */
.compacthero{padding:38px 7% 44px;background:var(--soft);border-bottom:1px solid var(--line)}
.compacthero h1{font-size:clamp(38px,4.1vw,59px);font-weight:500;max-width:900px;margin-bottom:22px;overflow-wrap:break-word}
.compacthero .lead{font-size:18px;max-width:800px;line-height:1.6}
.compacthero .eyebrow{color:#8b5144;margin-bottom:16px}
.compactbody{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(230px,.65fr);gap:9%;padding:45px 7% 65px;max-width:1300px;margin:auto}
.compactbody h2{font-size:27px;letter-spacing:-.03em;margin:0 0 17px}
.compactbody p{font-size:15px;line-height:1.7}
.compactbody .eyebrow{font-size:9px;margin-bottom:13px}
.scope-list{list-style:none;padding:0;margin:0 0 30px}
.scope-list li{font-size:15px;position:relative;padding:10px 0 10px 22px;border-bottom:1px solid var(--line)}
.scope-list li:before{content:'—';position:absolute;left:0;color:var(--accent)}
.compactbody aside{background:#f0f1ea;padding:25px}
.compactbody aside>p{font-size:13px}
.compactbody aside h3{font-size:17px;margin-bottom:8px}
.compactbody aside>a{display:block;font-size:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.service-detail{margin:0 0 32px}
.service-detail h2{line-height:1.2;margin-bottom:15px}
.service-detail p{max-width:730px}
.explained-list{padding-left:21px;margin:20px 0 0}
.explained-list li{padding:0 0 14px;font-size:15px;line-height:1.7;color:var(--muted)}
.explained-list strong{color:var(--ink)}
ol.explained-list li::marker{color:var(--accent);font-family:Georgia,serif}
.open-faq>div,.repair-choices>div{padding:18px 0;border-bottom:1px solid var(--line)}
.open-faq h3,.repair-choices h3{font-size:18px;line-height:1.35;letter-spacing:-.02em;margin:0 0 10px}
.open-faq p,.repair-choices p{margin:0}
.aside-detail{margin-top:27px;padding-top:23px;border-top:1px solid var(--line)}
.aside-detail h3{font-size:18px}
.aside-detail p{font-size:13px}
.compactbody article>.scope-list{margin-bottom:32px}

/* Approval process (shared) and HTML sitemap */
.approval-process{padding:45px 6%;border-top:1px solid var(--line);background:var(--soft);display:grid;grid-template-columns:.8fr 2fr;gap:6%}
.approval-process h2{font-size:33px;margin:0}
.approval-process .eyebrow{font-size:9px}
.approval-process ol{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:0;list-style:none;counter-reset:approval;margin:0}
.approval-process li:before{counter-increment:approval;content:'0' counter(approval);color:var(--accent);font:17px Georgia,serif;display:block;margin-bottom:14px}
.approval-process li b{font-size:15px}
.approval-process li p{font-size:13px;margin:9px 0 0}
.approval-process+footer{border-top:1px solid var(--line)}
.sitemap-links{display:grid;grid-template-columns:1fr 1fr;gap:35px}
.sitemap-links h2{font-size:28px}
.sitemap-links ul{padding-left:18px}
.sitemap-links li{margin:12px 0}

/* Forms (used once a submission endpoint exists) */
form{padding:30px;border:1px solid var(--line);background:var(--white);border-radius:2px}
label{display:block;font-size:12px;font-weight:600;margin-bottom:20px}
input,select,textarea{display:block;width:100%;padding:13px 15px;border:1px solid #b8c3b2;border-radius:3px;background:var(--white);color:var(--ink);margin-top:7px;font-size:14px}
.formrow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-error{color:#8b2f22;font-size:12px;margin:-12px 0 16px}

/* ---------- Responsive ---------- */
@media(min-width:1600px){header,footer,.lastcta,.innerhero,.compacthero,.approval-process{padding-left:calc((100vw - 1424px)/2);padding-right:calc((100vw - 1424px)/2)}}
@media(max-width:1050px){header nav{gap:16px}.brand>span{font-size:25px}.brand .chameleon-mark{width:75px}.hero{gap:30px}.hero h1{font-size:49px}.heroart{min-height:510px}.approachcopy{padding:35px}.approachcopy h2{font-size:31px}.compactbody{gap:5%}}
@media(max-width:800px){
  header{padding:18px 6%;position:relative}
  .brand{gap:7px}.brand .chameleon-mark{width:65px;height:42px}.brand>span{font-size:25px}.brand small{font-size:7px;letter-spacing:1.6px}
  .menu{display:block;background:none;border:1px solid var(--line);border-radius:4px;padding:8px 12px;color:var(--ink);font-size:12px;min-height:44px}
  header nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:25px 6%;z-index:20;box-shadow:0 14px 20px #173f3418;border-bottom:1px solid var(--line)}
  header nav.open{display:flex;flex-direction:column;align-items:stretch;gap:22px}
  .hero{grid-template-columns:1fr;padding:32px 6%;gap:30px}
  .hero h1{font-size:clamp(42px,8vw,60px)}
  .herocopy{padding:0}.herocopy>p:not(.hero-sub){max-width:none}
  .heroart{min-height:0;height:auto;aspect-ratio:1.25}
  .principles{justify-content:space-between;padding:20px 6%;gap:15px}.principles span{flex:1}.principles b{display:block;margin:5px 0 0;font-size:11px;line-height:1.3}
  .section{padding:48px 6%}.sectionhead{display:block}.sectionhead p{margin-top:22px}
  .cards{grid-template-columns:1fr 1fr}.servicecard{padding:22px 20px;min-height:230px}.servicecard h3{font-size:18px}.servicecard p{padding:0 5px 10px 0}.cardarrow{bottom:14px;right:18px}
  .approach{grid-template-columns:1fr;margin:0 6%}.approach-visual{min-height:350px;padding:28px}.bigmark{max-width:280px;width:80%}.approachcopy{padding:30px}
  .coverage,.questions,.contentgrid{grid-template-columns:1fr;gap:35px}
  .lastcta{padding:45px 6%;display:block}.lastcta .btn{margin-top:28px}
  .footgrid{grid-template-columns:1fr 1fr}.footgrid>div:first-child{grid-column:1/-1}.footbottom{flex-wrap:wrap;gap:15px}.footbottom>span{width:100%}
  .innerhero{padding:28px 6% 35px}.innerhero>h1{font-size:43px}.lead{font-size:17px}
  .compacthero{padding:28px 6% 35px}.compacthero h1{font-size:39px}.compacthero .lead{font-size:16px}
  .compactbody{grid-template-columns:1fr;padding:35px 6% 45px;gap:32px}.compactbody aside{padding:23px}.compactbody h2{font-size:26px}
  .service-detail{margin-bottom:28px}
  .approval-process{grid-template-columns:1fr;gap:22px}.approval-process ol{grid-template-columns:1fr;gap:24px}.approval-process li{padding-left:40px;position:relative}.approval-process li:before{position:absolute;left:0;top:0}
  .sitemap-links{grid-template-columns:1fr}
  .citytiles h2{font-size:24px}
}
@media(max-width:450px){
  .cards{grid-template-columns:1fr}.servicecard{min-height:145px;padding:25px 25px 28px 64px}.serviceicon{position:absolute;left:23px;top:28px}.service-index{font-size:15px}.servicecard h3{font-size:21px}.servicecard p{font-size:12px;max-width:240px}
  .hero-sub{font-size:23px}.actions{gap:18px}.hero .btn{padding:15px 20px}.hero h1{font-size:43px}
  .brand>span{font-size:23px}.brand .chameleon-mark{width:58px}.menu{padding:7px 9px}
  .compacthero h1{font-size:37px}
  .citytiles,.formrow{grid-template-columns:1fr}
  .footgrid{gap:20px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{header,footer,.btn,.menu,.approval-process{display:none}.section,.compactbody{padding:20px}a{text-decoration:underline}body{font-size:11px}}