/* Doral AC Repair — Design A "Work-Order Industrial"
   Palette: ink #101B2D · safety orange #FF6A2B · concrete #F2F0EB · steel #8EA0B5 */
:root{--ink:#101B2D;--orange:#FF6A2B;--concrete:#F2F0EB;--steel:#8EA0B5;--line:#D8D4CB;--body:#33415C;--mono:"Courier New",ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;background:var(--concrete);color:var(--ink);line-height:1.65}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}

/* utility bar + nav */
.utility{background:var(--ink);color:#fff;font-size:.85rem}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.utility .ph{background:var(--orange);color:var(--ink);font-weight:800;padding:6px 14px;border-radius:3px;text-decoration:none;letter-spacing:.03em}
.topnav{background:var(--concrete);border-bottom:2px solid var(--ink)}
.topnav .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.brand{font-weight:900;font-size:1.18rem;letter-spacing:-.02em;text-transform:uppercase;text-decoration:none}
.brand span{color:var(--orange)}
.navlinks{display:flex;gap:18px;font-size:.86rem;flex-wrap:wrap}
.navlinks a{color:var(--body);text-decoration:none;font-weight:600}
.navlinks a:hover{color:var(--ink);text-decoration:underline}

/* buttons */
.btn{display:inline-block;padding:14px 22px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;border-radius:3px;text-decoration:none;border:0;cursor:pointer}
.btn-o{background:var(--orange);color:var(--ink)}
.btn-ghost{border:2px solid #fff;color:#fff;background:transparent}
.btn-ink{border:2px solid var(--ink);color:var(--ink);background:transparent}

/* hero */
.hero{position:relative;color:#fff;background:var(--ink)}
.hero-bg{position:absolute;inset:0;background:#22304a center/cover no-repeat;opacity:.5}
.hero-inner{position:relative;background:linear-gradient(100deg,rgba(16,27,45,.94) 0 45%,rgba(16,27,45,.55));padding:56px 0 52px}
.hero h1{font-size:clamp(2rem,5.2vw,3.3rem);line-height:.98;letter-spacing:-.03em;text-transform:uppercase;max-width:680px;font-stretch:condensed}
.hero h1 em{color:var(--orange);font-style:normal}
.hero .lead{max-width:620px;margin:18px 0 24px;font-size:1.02rem;color:#dfe6ee}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.symptoms{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink);position:relative}
.symptoms a{padding:14px 12px;color:#cfd9e4;font-family:var(--mono);font-size:.74rem;text-align:center;border-left:1px solid rgba(255,255,255,.18);line-height:1.45;text-decoration:none}
.symptoms a:first-child{border-left:0}
.symptoms a b{display:block;color:var(--orange);font-size:.8rem;margin-bottom:3px;font-family:Arial,sans-serif;letter-spacing:.04em}
.symptoms a:hover b{text-decoration:underline}

/* interior page header band */
.pagehead{background:var(--ink);color:#fff;padding:42px 0 38px}
.pagehead h1{font-size:clamp(1.7rem,4vw,2.5rem);text-transform:uppercase;letter-spacing:-.02em;line-height:1.05}
.pagehead .lead{max-width:760px;margin-top:14px;color:#dfe6ee}
.kick{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#ffb18c;margin-bottom:10px;display:block}
.sec .kick{color:#b14a1e}

/* sections */
.sec{padding:46px 0;border-bottom:1px solid var(--line)}
.sec:last-of-type{border-bottom:0}
.sec h2{font-size:1.7rem;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:10px}
.sec h3{font-size:1.05rem;text-transform:uppercase;margin-bottom:8px}
.sec p{color:var(--body);max-width:760px}
.sec p+p,.sec p+ul{margin-top:12px}
.sec ul{color:var(--body);padding-left:20px;max-width:760px}
.lede{max-width:700px;color:var(--body);margin-bottom:24px}

/* work-order tickets */
.tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ticket{background:#fff;border:2px solid var(--ink);position:relative;padding:18px 16px 16px;text-decoration:none;color:inherit;display:block}
.ticket:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,var(--orange) 0 14px,transparent 14px 22px)}
.ticket .wo{font-family:var(--mono);font-size:.68rem;color:#7a8aa0;letter-spacing:.1em;margin:8px 0 6px}
.ticket h3{font-size:1rem;margin-bottom:6px}
.ticket p{font-size:.86rem;max-width:none}
.ticket:hover{box-shadow:6px 6px 0 rgba(16,27,45,.18)}

/* two-column */
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.prose-block{background:#fff;border:1px solid var(--line);padding:22px}
.prose-block+.prose-block{margin-top:16px}
.prose-block p{max-width:none}

/* photos */
.photo{background:#fff;border:1px solid var(--line)}
.photo img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#dfe3e8}
.photo figcaption{padding:9px 13px;font-size:.83rem;color:#5a6b7e;border-top:1px solid var(--line)}
.photo.wide img{aspect-ratio:16/7}

/* quote form */
.formband{background:var(--ink);color:#fff;padding:48px 0}
.formband h2{color:#fff}
.formband p{color:#dfe6ee}
.quote-form{background:#fff;color:var(--ink);padding:24px;border-top:6px solid var(--orange)}
.quote-form label{display:block;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.quote-form input,.quote-form textarea{display:block;width:100%;border:1px solid var(--line);background:#f7f6f2;padding:11px 12px;font-size:.95rem;font-family:inherit;margin-top:5px}
.quote-form textarea{min-height:84px;resize:vertical}
.quote-form .btn{width:100%;text-align:center;margin-top:4px}
.form-disclosure{margin-top:12px;color:#7a8aa0;font-size:.74rem;line-height:1.5}
.form-disclosure a{color:#5a6b7e}
.hp-field{display:none!important}

/* cost grid / faq */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.faq-item{background:#fff;border:1px solid var(--line);border-left:5px solid var(--orange);padding:16px 18px;margin-bottom:12px;max-width:820px}
.faq-item h3{font-size:.98rem;margin-bottom:6px}
.faq-item p{font-size:.92rem;max-width:none}

/* CTA band */
.ctaband{background:var(--orange);padding:40px 0;text-align:center}
.ctaband h2{text-transform:uppercase;font-size:1.6rem;margin-bottom:8px}
.ctaband p{color:#5a3318;margin:0 auto 18px;max-width:560px}
.ctaband .btn-dark{background:var(--ink);color:#fff}
.ctaband .btn-line{border:2px solid var(--ink);color:var(--ink)}

/* footer */
footer{background:var(--ink);color:#aebacb;padding:38px 0 90px;font-size:.85rem}
footer .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
footer b{color:#fff;display:block;margin-bottom:8px;text-transform:uppercase;font-size:.8rem;letter-spacing:.08em}
footer a{display:block;color:#aebacb;margin:4px 0;text-decoration:none}
footer a:hover{color:#fff}

/* sticky mobile CTA */
.mobile-sticky{position:fixed;bottom:0;left:0;right:0;display:none;grid-template-columns:1fr 1fr;z-index:50}
.mobile-sticky a{padding:14px;text-align:center;font-weight:900;text-transform:uppercase;font-size:.85rem;text-decoration:none}
.mobile-sticky .call{background:var(--orange);color:var(--ink)}
.mobile-sticky .quote{background:var(--ink);color:#fff}

/* responsive */
@media(max-width:880px){
  .tickets{grid-template-columns:1fr 1fr}
  .two,.grid3,footer .wrap{grid-template-columns:1fr}
  .symptoms{grid-template-columns:1fr 1fr}
  .symptoms a{border-top:1px solid rgba(255,255,255,.18)}
}
@media(max-width:600px){
  .tickets,.symptoms{grid-template-columns:1fr}
  .hero-inner{padding:36px 0 34px}
  .hero h1{font-size:clamp(1.7rem,8.5vw,2.3rem)}
  .hero .lead{font-size:.95rem}
  .hero-ctas .btn{width:100%;text-align:center}
  .mobile-sticky{display:grid}
  body{padding-bottom:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}