/* acinstallationfrisco.com - evergreen + terracotta on cream.
   Typography: SERIF display in sentence case. This is the primary structural break from the
   sibling sites' uppercase-800 sans trade voice, and it costs zero network requests. */
:root{
  --brand:#10432f; --brand2:#1f8a5a; --accent:#c2410c; --accent2:#9a3412;
  --ink:#0c1f17; --bg:#ffffff; --bg-alt:#fbf7f0; --line:#e3dcd0;
  --muted:#4b5f55; --wrap:1180px; --r:4px;
  --serif: Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
  font-size:17px;line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand2)}
a:hover{color:var(--brand)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:#fff;padding:10px 14px;border:2px solid var(--brand)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--brand);
  letter-spacing:-.01em;line-height:1.22;margin:0 0 .5em}
h1{font-size:2.5rem}
h2{font-size:1.7rem;margin-top:1.6em}
h3{font-size:1.18rem;margin-top:1.2em}
.section h2:first-child,.hero h1{margin-top:0}
p{margin:0 0 1em}

/* ---------- topbar: STICKY, fixed 60px so .navbar's offset is deterministic ---------- */
.topbar{background:var(--brand);color:#fff;position:sticky;top:0;z-index:60;
  box-shadow:0 1px 0 rgba(255,255,255,.10)}
.topbar__in{display:flex;align-items:center;gap:16px;height:60px}
.brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;
  font-family:var(--serif);font-size:1.12rem;white-space:nowrap;margin-right:auto}
.brand:hover{color:#fff}
.brand__mark{width:19px;height:19px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(255,255,255,.22);flex:0 0 auto}
.brand__txt strong{font-weight:700}
.topbar__cta{display:flex;gap:8px;align-items:center}
.topcall__short{display:none}
/* inline-flex collapses the literal space between the icon and the label */
.topcall{gap:6px}
.topbar__cta .btn{padding:10px 18px}

/* ---------- navbar: sticky directly under the topbar on desktop ---------- */
.navbar{background:#0b3323;position:sticky;top:60px;z-index:59;
  border-bottom:1px solid rgba(255,255,255,.10)}
.nav ul{display:flex;flex-wrap:wrap;gap:2px;list-style:none;margin:0;padding:0}
.nav a{display:flex;align-items:center;height:46px;padding:0 12px;color:#e6f0ea;
  text-decoration:none;font-size:.9rem}
.nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.nav .is-active a{background:rgba(255,255,255,.15);color:#fff;
  box-shadow:inset 0 -3px 0 var(--accent)}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:12px 20px;border-radius:var(--r);text-decoration:none;
  font-weight:600;font-size:.95rem;border:2px solid transparent;line-height:1.2}
.btn--accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--accent:hover{background:var(--accent2);border-color:var(--accent2);color:#fff}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.btn--block{display:block;text-align:center;width:100%;margin-top:10px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin:1.4em 0 0}
.section .btn--ghost,.ctaband .btn--ghost{color:var(--brand);border-color:var(--brand)}
.ctaband .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)}

/* ---------- hero: asymmetric 55/45 split, price card right ---------- */
.hero{background:linear-gradient(178deg,var(--brand) 0%,#0b3323 100%);color:#fff;
  padding:52px 0 56px}
.hero__grid{display:grid;grid-template-columns:55% 1fr;gap:44px;align-items:start}
.hero h1{color:#fff;margin-bottom:.35em}
.hero__eyebrow{text-transform:uppercase;letter-spacing:.09em;font-size:.76rem;font-weight:700;
  color:#8fd3ae;margin:0 0 .9em}
.hero__sub{font-size:1.08rem;color:#dbe9e1;margin:0}
.hero--light{background:var(--bg-alt);color:var(--ink);padding:0 0 46px;border-bottom:1px solid var(--line)}
.hero--light h1{color:var(--brand)}
.hero--light .hero__eyebrow{color:var(--accent)}
.hero--light .hero__sub{color:var(--muted)}
.hero__grid--light{grid-template-columns:1fr 34%;padding-top:34px;align-items:center}
.hero__panel img{border-radius:var(--r);border:1px solid var(--line)}

/* ---------- price card: the focal point (not the phone number) ---------- */
.pricecard{background:#fff;color:var(--ink);border-radius:var(--r);padding:22px;
  border-top:4px solid var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.pricecard__label{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);font-weight:700}
.pricecard__from{display:block;font-family:var(--serif);font-size:2.3rem;color:var(--accent);
  line-height:1.1;margin:.15em 0 .5em}
.pricecard__table{width:100%;border-collapse:collapse;font-size:.88rem}
.pricecard__table td{padding:7px 0;border-bottom:1px solid var(--line)}
.pricecard__table td:last-child{text-align:right;font-weight:700;white-space:nowrap}
.pricecard__note{font-size:.82rem;color:var(--muted);margin:.9em 0 0}

/* ---------- quote card: the hero focal point (replaced the price card) ---------- */
.quotecard{background:#fff;color:var(--ink);border-radius:var(--r);padding:24px;
  border-top:4px solid var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.quotecard__h{font-size:1.28rem;margin:0 0 .8em;color:var(--brand)}
.quotecard__form label{display:block;margin-bottom:12px;font-weight:600;font-size:.86rem;
  color:var(--brand)}
.quotecard__form input,.quotecard__form select{display:block;width:100%;margin-top:5px;
  padding:11px 12px;border:1px solid var(--line);border-radius:var(--r);font:inherit;
  font-size:.95rem;font-weight:400;color:var(--ink);background:#fff}
.quotecard__form input:focus,.quotecard__form select:focus{border-color:var(--brand2);outline:none;
  box-shadow:0 0 0 3px rgba(31,138,90,.18)}
.quotecard__form .btn{margin-top:4px}
.quotecard__note{font-size:.82rem;color:var(--muted);margin:.9em 0 .4em}
.quotecard__or{font-size:.92rem;margin:0;padding-top:.7em;border-top:1px solid var(--line)}
.quotecard__or a{font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap}
.quotecard__or a:hover{text-decoration:underline}

/* ---------- step rail (replaces the sibling's red urgency strip) ---------- */
.steprail{background:var(--bg-alt);border-bottom:1px solid var(--line)}
.steprail__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  list-style:none;margin:0;padding:30px 0}
.step__n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:.9rem;
  font-family:var(--sans)}
.step__t{font-size:1.05rem;margin:.55em 0 .3em}
.step p{font-size:.92rem;color:var(--muted);margin:0}

/* ---------- trust bar ---------- */
.trustbar{background:var(--brand);color:#fff}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:24px 20px}
.trust__item strong{display:block;font-family:var(--serif);font-size:1.02rem}
.trust__item span{font-size:.85rem;color:#b7d6c5}

/* ---------- sections ---------- */
.section{padding:52px 0}
.section--alt{background:var(--bg-alt)}
.lead{font-size:1.1rem}
.lead p:first-child{font-size:1.14rem;color:var(--brand)}
.note{font-size:.88rem;color:var(--muted);border-left:3px solid var(--line);padding-left:14px}
.bullets{margin:0 0 1.2em;padding-left:1.15em}
.bullets li{margin-bottom:.5em}
.split{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start}

/* ---------- cards: left border, no top rule, no hover lift ---------- */
.grid{display:grid;gap:22px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--r);padding:22px 24px;display:flex;flex-direction:column}
.section--alt .card{background:#fff}
.card h3{margin-top:0}
.card p{font-size:.94rem;margin-bottom:0}
.card__link{margin-top:auto;padding-top:.9em;font-weight:600;font-size:.92rem}

.callout{background:var(--bg-alt);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:22px 24px;margin:1.8em 0}
.callout h2{margin-top:0;font-size:1.25rem}
.warn{background:#fff5f0;border:1px solid #f3d3c2;border-left:3px solid var(--accent);
  border-radius:var(--r);padding:20px 24px;margin:1.6em 0}
.warn h2{margin-top:0;font-size:1.2rem;color:var(--accent2)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;margin:1.2em 0}
table.costs{width:100%;border-collapse:collapse;font-size:.95rem;min-width:420px}
table.costs th{background:var(--brand);color:#fff;text-align:left;padding:12px 14px;
  font-family:var(--sans);font-size:.86rem;text-transform:uppercase;letter-spacing:.05em}
table.costs td{padding:12px 14px;border-bottom:1px solid var(--line)}
table.costs tr:nth-child(even) td{background:var(--bg-alt)}
table.costs td:last-child{font-weight:700;white-space:nowrap;color:var(--brand)}

/* ---------- image band ----------
   CONTAINED, not full-bleed. The source photos are 1376px wide; a full-bleed band upscaled them
   on any display wider than that, which is what made them look soft. Capping the band at the
   1180px content width means the image is always downsampled, never stretched. */
.imgband{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.imgband img{width:100%;max-height:400px;object-fit:cover;border-radius:var(--r)}

/* ---------- FAQ (native details, no JS) ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{cursor:pointer;padding:16px 0;font-weight:600;font-family:var(--serif);
  font-size:1.06rem;color:var(--brand);list-style:none;position:relative;padding-right:34px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";position:absolute;right:6px;top:13px;font-size:1.4rem;
  color:var(--accent);font-family:var(--sans)}
.faq__item[open] summary::after{content:"\2212"}
.faq__a{padding:0 0 16px;font-size:.96rem}
.faq__a p:last-child{margin-bottom:0}

/* ---------- breadcrumbs ---------- */
.crumbs{background:var(--bg-alt);border-bottom:1px solid var(--line);font-size:.85rem}
.crumbs .wrap{padding-top:11px;padding-bottom:11px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--brand);text-decoration:underline}
.crumbs__sep{margin:0 8px;color:#a9bab1}
.crumbs [aria-current]{color:var(--brand);font-weight:600}
.hero--light .crumbs{background:transparent;border-bottom:0}

/* ---------- category cards (AC Basics) ---------- */
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.catcard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
  display:flex;flex-direction:column}
.catcard__h{background:var(--brand);color:#fff;margin:0;padding:15px 18px;font-size:1.05rem}
.catcard__b{padding:18px;display:flex;flex-direction:column;flex:1}
.catcard__b p{font-size:.92rem}
.catcard__n{color:var(--muted);font-size:.84rem}
.catcard__more{margin-top:auto;color:var(--accent);font-weight:700;text-transform:uppercase;
  font-size:.82rem;letter-spacing:.05em;text-decoration:none}
.catcard__more:hover{color:var(--accent2);text-decoration:underline}

/* ---------- link lists / service areas ---------- */
.linklist{list-style:none;margin:0 0 1em;padding:0}
.linklist li{padding:6px 0;border-bottom:1px solid var(--line)}
.linklist a{text-decoration:none}
.linklist a:hover{text-decoration:underline}
.linklist--cols{columns:2;column-gap:34px}
.areagrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.area{border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r);
  padding:18px 22px;background:#fff}
.area h3{margin-top:0}
.area__geo{font-size:.87rem;color:var(--muted)}
.area .linklist{margin-bottom:0}

/* ---------- forms ---------- */
.form{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:24px}
.form label{display:block;margin-bottom:14px;font-weight:600;font-size:.9rem;color:var(--brand)}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:6px;padding:11px 12px;
  border:1px solid var(--line);border-radius:var(--r);font:inherit;font-size:.95rem;
  font-weight:400;color:var(--ink);background:#fff}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--brand2)}
.form__fine{font-size:.82rem;color:var(--muted);margin:1em 0 0}

/* ---------- CTA band: quote first, phone second ---------- */
.ctaband{background:var(--brand);color:#fff;padding:48px 0;text-align:center}
.ctaband h2{color:#fff;margin-top:0}
.ctaband p{color:#cfe3d8;max-width:640px;margin-left:auto;margin-right:auto}
.ctaband .btnrow{justify-content:center}

/* ---------- footer ---------- */
.footer{background:#0b3323;color:#c6dbcf;padding:46px 0 30px;font-size:.92rem}
.footer__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.footer__h{color:#fff;font-size:1rem;margin:0 0 .7em}
.footer a{color:#c6dbcf;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer .linklist li{border-bottom:1px solid rgba(255,255,255,.1)}
.footer__base{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.15)}
.footer__nap{font-weight:600;color:#fff}
.footer__fine{font-size:.83rem;color:#9dbcac}

/* ---------- sticky mobile bar: QUOTE primary (reversed from siblings) ---------- */
.sticky{display:none}

/* ================= responsive ================= */
@media (max-width:1023px){
  .quotecard{max-width:460px}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .catgrid{grid-template-columns:repeat(2,1fr)}
  .hero__grid{grid-template-columns:1fr;gap:30px}
  .hero__grid--light{grid-template-columns:1fr}
  .hero__panel{display:none}
  .pricecard{max-width:460px}
}
@media (max-width:1023px){
  /* Single scrollable row rather than a wrapped block. Nine flat nav items wrapped consumed the
     whole first screen before the hero. No JS, no hover, no disclosure widget - the hamburger on
     a sibling site broke in a real browser, so this stays a plain list. */
  .nav ul{flex-wrap:nowrap;overflow-x:auto;gap:0;scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch}
  .nav ul::-webkit-scrollbar{display:none}
  .nav li{flex:0 0 auto}
  .nav a{white-space:nowrap;padding:0 14px}
  .nav li:first-child a{padding-left:0}
}
@media (max-width:860px){
  .topbar__in{gap:10px}
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .steprail__grid{grid-template-columns:1fr;gap:20px}
  .footer__grid{grid-template-columns:1fr;gap:26px}
}
@media (max-width:760px){
  body{font-size:16px}
  h1{font-size:1.95rem}
  h2{font-size:1.42rem}
  .section{padding:38px 0}
  .hero{padding:36px 0 40px}
  .grid--2,.grid--3,.catgrid,.areagrid,.split{grid-template-columns:1fr}
  .linklist--cols{columns:1}
  .btnrow .btn{flex:1 1 auto;text-align:center}
  /* Mobile: the sticky topbar carries CALL; the bottom bar carries the quote. One action each,
     no duplication, and the nav is released so it does not pin 9 links to a 812px screen. */
  .topbar__in{height:56px}
  .topbar__cta .btn--accent{display:none}
  /* Explicit height: default button padding made this 57px inside the bar and it clipped.
     The full phone number also wrapped to two lines at 375px, so the short label shows instead. */
  .topbar__cta .btn--ghost{display:inline-flex;align-items:center;height:40px;padding:0 16px;
    font-size:.95rem;line-height:1;white-space:nowrap}
  .topcall__full{display:none}
  .topcall__short{display:inline}
  .navbar{position:static;top:auto}
  .brand{font-size:1rem}
  /* sticky bar: quote primary, call secondary - the reverse of every sibling site */
  .sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    border-top:3px solid var(--accent);box-shadow:0 -3px 14px rgba(0,0,0,.18)}
  .sticky__a{flex:1;text-align:center;padding:15px 8px;background:var(--brand);color:#fff;
    text-decoration:none;font-weight:700;font-size:1rem}
  .sticky__a--accent{background:var(--accent)}
  body{padding-bottom:52px}
}
@media (max-width:400px){
  h1{font-size:1.7rem}
  .pricecard__from{font-size:1.9rem}
}