/* Sugar Land AC Repairs — base stylesheet
   Single static stylesheet, no build step, no external font/JS dependency. */

:root {
  --navy: #4a121c;
  /* RGB channels of --navy, for the hero photo scrim. */
  --scrim: 74, 18, 28;
  --blue: #8a2433;
  --teal: #a8283a;
  --amber: #e2a03f;
  --bg: #f7f9fb;
  --white: #ffffff;
  --ink: #1c2733;
  --muted: #56636f;
  --border: #dfe6ec;
  --radius: 10px;
  --maxw: 1120px;
  /* Height of the fixed sticky CTA bar; body padding matches it. */
  --cta-h: 69px;
}

/* The bar is taller above the mobile breakpoint (larger type, roomier buttons). */
@media (min-width: 721px) { :root { --cta-h: 71px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* Header */
header.site {
  background: var(--navy);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 50;
}
header.site .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  max-width: var(--maxw);
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 10px;
}
header.site .brand {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--white);
}
header.site .brand span { color: var(--teal); }
header.site nav { display: flex; gap: 16px; flex-wrap: wrap; }
header.site nav a { color: #f0cdd2; font-size: 0.95rem; }
header.site nav a:hover { color: var(--white); }
header.site .call-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  background: var(--teal);
  color: var(--white);
  padding: 9px 16px;
  border-radius: var(--radius);
  font-weight: 700;
}
header.site .call-btn:hover { background: #8f1f30; text-decoration: none; }

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--navy), var(--blue));
  color: var(--white);
  padding: 56px 20px 48px;
}
.hero .wrap { display: flex; flex-direction: column; gap: 18px; }
.hero .eyebrow {
  display: inline-block;
  background: rgba(255,255,255,0.12);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  width: fit-content;
}
.hero h1 { font-size: 2.2rem; margin: 0; max-width: 760px; }
.hero p.lead { font-size: 1.1rem; color: #f6dee2; max-width: 600px; margin: 0; }
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.btn {
  display: inline-block;
  padding: 13px 22px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
}
.btn.primary { background: var(--teal); color: var(--white); }
.btn.primary:hover { background: #8f1f30; text-decoration: none; }
.btn.ghost { background: rgba(255,255,255,0.08); color: var(--white); border: 1px solid rgba(255,255,255,0.35); }
.btn.ghost:hover { background: rgba(255,255,255,0.16); text-decoration: none; }
.hero .subnote { font-size: 0.9rem; color: #e8bcc3; max-width: 640px; }

/* The referral disclosure is a legal requirement (16 CFR 461.3 and the FTC's
   .com Disclosures prominence factors), not decoration, so it does not rely on
   the hero photo being dark behind it. Its own scrim keeps it conspicuous at
   every viewport width and against any part of the background image. */
.hero .disclosure {
  font-size: 0.9rem;
  color: #ffffff;
  max-width: 680px;
  background: rgba(var(--scrim), 0.82);
  border-left: 3px solid var(--teal);
  padding: 12px 16px;
  border-radius: 6px;
  margin: 18px 0 10px;
}
.hero .disclosure strong { color: #ffffff; }

/* Hero with a full-bleed background photo (homepage only) — layers a
   left-to-right dark gradient over the image so the H1/lead text stays
   readable, same pattern as guelphdumpsterrental.com's hero. */
.hero.with-photo {
  background-image:
    linear-gradient(90deg, rgba(var(--scrim), 0.90) 0%, rgba(var(--scrim), 0.72) 38%, rgba(var(--scrim), 0.28) 68%, rgba(var(--scrim), 0.05) 100%),
    url('/images/hero-ac-photo.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 540px;
  display: flex;
  align-items: center;
  padding: 56px 20px;
}
@media (max-width: 820px) {
  .hero.with-photo {
    background-image:
      linear-gradient(180deg, rgba(var(--scrim), 0.88) 0%, rgba(var(--scrim), 0.8) 55%, rgba(var(--scrim), 0.65) 100%),
      url('/images/hero-ac-photo.jpg');
    min-height: 460px;
  }
}

/* Sections */
section { padding: 48px 20px; }
section.alt { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--teal);
  font-weight: 700;
  margin-bottom: 6px;
}
h2 { font-size: 1.65rem; margin: 0 0 20px; color: var(--navy); }
h3 { font-size: 1.15rem; margin: 0 0 8px; color: var(--navy); }

/* Grid cards */
.grid { display: grid; gap: 18px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) {
  .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.7rem; }
  header.site .bar { justify-content: center; text-align: center; }
}

/* 821-1060px: brand + a full nav + the phone number no longer fit on one line
   now that the call button shows real digits. Rather than shrink the number,
   give the nav its own centered row — brand left, phone right, nav beneath —
   instead of letting the call button orphan itself under the brand. */
@media (min-width: 821px) and (max-width: 1060px) {
  header.site nav {
    order: 3;
    flex: 1 0 100%;
    justify-content: center;
    margin-top: 2px;
  }
}
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.card .icon { font-size: 1.6rem; margin-bottom: 8px; }
.card p { color: var(--muted); margin: 6px 0 0; font-size: 0.95rem; }

/* Trust strip */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: center;
  padding: 18px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--muted);
}
.trust-strip strong { color: var(--navy); }

/* FAQ — native <details>/<summary> accordion, no JS needed */
.faq-item { border-bottom: 1px solid var(--border); padding: 14px 0; }
.faq-item:first-child { padding-top: 0; }
.faq-item summary {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--teal);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin: 10px 0 0; color: var(--muted); }

/* How It Works */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.step-card .step-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: #fbeaec; color: var(--teal); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.step-card h3 { font-size: 1.02rem; }
.step-card p { color: var(--muted); font-size: 0.92rem; margin: 0; }
@media (max-width: 820px) { .steps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .steps-grid { grid-template-columns: 1fr; } }

/* Testimonials shell — honest placeholder until real reviews exist */
.testimonial-shell {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  color: var(--muted);
  background: var(--white);
}

/* Sticky CTA bar — visible at EVERY width (calls are the priority conversion) */
.sticky-cta {
  display: flex;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--navy);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
  /* Fallback for chrome baked into blog pages before the .sticky-cta-inner
     wrapper existed: those have the two <a> as direct children. No-op once the
     wrapper is present (single child, already full width). */
  gap: 10px;
  justify-content: center;
}
/* Constrain to the site's content width rather than two full-bleed halves. */
.sticky-cta-inner {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}
.sticky-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  text-align: center;
  padding: 12px 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.92rem;
}
.sticky-cta .ico-phone { flex: none; }
/* Mobile: keep both buttons, but weight the call button ~60/40 over the form. */
.sticky-cta-call { flex: 3; background: var(--teal); color: var(--white); }
.sticky-cta-quote { flex: 2; background: rgba(255,255,255,0.1); color: var(--white); border: 1px solid rgba(255,255,255,0.35); }
.sticky-cta-call:hover { background: #8f1f30; text-decoration: none; }
.sticky-cta-quote:hover { background: rgba(255,255,255,0.18); text-decoration: none; }
/* Narrow phones: the digits must survive, the qualifier is what gives way. */
.sticky-cta .cta-note { display: none; }
@media (min-width: 560px) {
  .sticky-cta .cta-note { display: inline; }
}
/* Above the mobile breakpoint: content-width buttons, centered. */
@media (min-width: 721px) {
  .sticky-cta-inner { justify-content: center; }
  .sticky-cta a { flex: 0 0 auto; padding: 12px 24px; font-size: 1rem; }
}
/* Keep content — including the footer's last row — clear of the fixed bar. */
body { padding-bottom: var(--cta-h); }
/* Area links */
.area-links { display: flex; flex-wrap: wrap; gap: 10px; }
.area-links a {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--navy);
  font-size: 0.92rem;
}
.area-links a:hover { border-color: var(--teal); text-decoration: none; }

/* CTA band */
.cta-band {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 44px 20px;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: #f0cdd2; margin-bottom: 18px; }

/* Contact form */
form.lead-form { display: grid; gap: 12px; max-width: 480px; }
form.lead-form label { font-size: 0.88rem; font-weight: 600; color: var(--navy); display: block; margin-bottom: 4px; }
form.lead-form input, form.lead-form select, form.lead-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
}
form.lead-form .disclaimer { font-size: 0.78rem; color: var(--muted); }
form.lead-form .hp-field { position: absolute; left: -9999px; top: -9999px; }
form.lead-form button[disabled] { opacity: 0.6; cursor: not-allowed; }
.form-status { margin-top: 12px; padding: 11px 14px; border-radius: 8px; font-size: 0.9rem; display: none; }
.form-status.visible { display: block; }
.form-status.success { background: #fbeaec; color: #6e1622; }
.form-status.error { background: #fdecea; color: #b3261e; }

/* Breadcrumb */
.crumb { font-size: 0.85rem; color: var(--muted); padding: 14px 20px 0; max-width: var(--maxw); margin: 0 auto; }
.crumb a { color: var(--muted); }

/* Footer */
footer.site {
  background: #340c14;
  color: #d6a8b0;
  padding: 40px 20px 24px;
  font-size: 0.9rem;
}
footer.site .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
footer.site h4 { color: var(--white); font-size: 0.95rem; margin: 0 0 10px; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 6px; }
footer.site a { color: #d6a8b0; }
footer.site .bottom {
  max-width: var(--maxw);
  margin: 24px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 720px) {
  footer.site .wrap { grid-template-columns: 1fr 1fr; }
}
.placeholder-flag {
  background: #fff3cd;
  color: #7a5b00;
  border: 1px dashed #e2a03f;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.82em;
}

/* Brand logo (added 2026-08-11) */

header.site .brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

/* Founder note (replaces empty testimonial placeholder) — added 2026-08-11 */
.founder-note {
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 24px 28px;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  text-align: left;
}
.founder-note .fn-heading { font-weight: 700; color: var(--navy); margin: 0 0 10px; }
.founder-note p { margin: 0 0 12px; color: var(--ink); }
.founder-note .fn-cta { margin: 0; font-weight: 600; color: var(--navy); }
.founder-note .fn-cta a { color: var(--navy); text-decoration: underline; }

/* --- Work photos ------------------------------------------------------ */
/* Inline documentary shots dropped between two content sections partway down a
   service page. Deliberately NOT a gallery grid and NOT a CSS background: one
   photo per page, off-rhythm, no captions.

   The base rule caps width so an unclassed figure can never render full-bleed
   across the page — that failure looks completely correct in the markup, so the
   block has to ship before any page references the class. No .portrait / .wide
   / .pair modifiers here: every master on this site is landscape 1200x800, and
   an unused modifier is how "add the class" becomes the easy fix for an image
   that should have been regenerated (job-photo-prompts.md §5.1). */
.work-photo {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 34px 20px;
}
.work-photo img {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* --- Homepage work strip ---------------------------------------------- */
/* TWELVE small thumbnails low on the homepage - one per service page, not the
   portfolio's usual six (job-photo-prompts.md §5.1b, amended 2026-08-20: a
   fixed six-per-site count is itself a cross-site fingerprint). Deliberately
   NOT links and NOT lightboxed - they are scroll-depth reassurance, not a
   gallery. Full-size versions live on the matching service pages.

   Column counts are recalculated for twelve so the rows come out even at every
   breakpoint: 4+4+4 on desktop, 4x3 at 900px and 6x2 at 520px. A ragged
   trailing row is the visible tell that nobody redid the arithmetic. */
.work-strip .thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.work-strip img {
  display: block;
  width: 100%;
  /* height:auto is required - the img height="320" attribute is a
     presentational hint that would otherwise make the box 320px tall and
     cause aspect-ratio to be ignored entirely. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--white);
}
@media (max-width: 900px) { .work-strip .thumbs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .work-strip .thumbs { grid-template-columns: repeat(2, 1fr); gap: 10px; } }