/* ═══════════════════════════════════════════════════════════════════════
   FOX COATINGS — INNER PAGES
   Same livery grammar at page scale: a stencilled masthead plate, spec
   tables, and content set as equipment documentation.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ PAGE MASTHEAD ═══ */
.masthead {
  position: relative;
  background: var(--machine);
  color: var(--text-lt);
  overflow: hidden;
  isolation: isolate;
}
.masthead-bg { position: absolute; inset: 0; z-index: -2; }
.masthead-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.6) contrast(1.1) brightness(0.34);
}
.masthead-veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(96deg, var(--machine) 12%, rgba(10, 11, 13, 0.9) 52%, rgba(10, 11, 13, 0.62) 100%);
}
.masthead-inner {
  position: relative;
  padding-block: clamp(2.75rem, 6vw, 5rem);
  max-width: 900px;
}
/* Inner-page H1s carry a full descriptive phrase ("Stucco Repair in Colorado
   Springs"), not the home page's three-word hit, so they run at a smaller
   display size to keep the masthead and its primary action on one screen. */
.masthead h1 { margin: 0; font-size: clamp(2.1rem, 4.8vw, 3.9rem); }
.masthead .lead { margin-top: 1.35rem; }

/* Unit stamp on service pages — the equipment plate. */
.unit-stamp {
  display: inline-flex;
  align-items: stretch;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(253, 97, 1, 0.4);
}
.unit-stamp-n {
  display: grid;
  place-items: center;
  padding: 0.55rem 0.85rem;
  background: var(--fox);
  color: var(--machine);
  font-family: var(--f-display);
  font-size: 0.8rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}
.unit-stamp-t {
  display: grid;
  place-items: center;
  padding: 0.55rem 1rem;
  font-family: var(--f-display);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fox);
  background: rgba(253, 97, 1, 0.08);
}

/* ═══ ARTICLE PROSE ═══ */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 {
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 2.7vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--fox);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1.9vw, 1.32rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin-top: 2.1rem;
  color: var(--text-dark);
}
.on-dark .prose h3, .on-plate .prose h3 { color: var(--white); }
.prose p { color: var(--text-dark-mid); line-height: 1.72; }
.on-dark .prose p { color: var(--text-lt-mid); }
.prose strong { color: var(--text-dark); font-weight: 700; }
.on-dark .prose strong { color: var(--white); }
.prose a:not(.btn):not(.link-rule) {
  color: var(--fox-ink);
  font-weight: 600;
  border-bottom: 1px solid rgba(253, 97, 1, 0.45);
}
.on-dark .prose a:not(.btn):not(.link-rule) { color: var(--fox); }
.prose ul { display: grid; gap: 0.72rem; margin-top: 1.15rem; }
.prose ul li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text-dark-mid);
  line-height: 1.65;
}
.on-dark .prose ul li { color: var(--text-lt-mid); }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  background: var(--fox);
  transform: rotate(45deg);
}

/* ═══ SPEC TABLE — identical data furniture on every service ═══ */
.spec {
  border: 1px solid var(--edge-lt);
  background: var(--white);
}
.on-dark .spec, .on-plate .spec {
  border-color: var(--plate-edge);
  background: var(--plate);
}
.spec-head {
  padding: 0.85rem 1.25rem;
  background: var(--machine);
  color: var(--white);
  font-family: var(--f-display);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.spec-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.5fr) 1fr;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--edge-lt-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}
.on-dark .spec-row, .on-plate .spec-row { border-bottom-color: var(--edge-dk-soft); }
.spec-row:last-child { border-bottom: 0; }
.spec-key {
  font-family: var(--f-display);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--fox-ink);
  padding-top: 0.15rem;
}
.on-dark .spec-key, .on-plate .spec-key { color: var(--fox); }
.spec-val { color: var(--text-dark-mid); }
.on-dark .spec-val, .on-plate .spec-val { color: var(--text-lt-mid); }

/* ═══ SERVICE PAGE LAYOUT ═══ */
.svc-layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 1000px) {
  .svc-layout { grid-template-columns: 1fr 350px; }
  .svc-aside { position: sticky; top: 100px; }
}
.svc-aside { display: grid; gap: 1.25rem; }

.aside-card {
  background: var(--machine);
  border: 1px solid var(--plate-edge);
  color: var(--text-lt);
  padding: 1.6rem;
}
.aside-card h3 {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
  line-height: 1.1;
}
.aside-card p { font-size: 0.88rem; color: var(--text-lt-muted); line-height: 1.62; }
.aside-card .btn { width: 100%; margin-top: 1.25rem; }

.aside-links { display: grid; }
.aside-links a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--edge-dk-soft);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-lt-muted);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.aside-links a:last-child { border-bottom: 0; }
.aside-links a:hover { color: var(--fox); transform: translateX(5px); }
.aside-links .unit {
  font-family: var(--f-display);
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--fox);
  font-variant-numeric: tabular-nums;
}
.aside-links a[aria-current="page"] { color: var(--fox); }

/* ═══ FAQ ACCORDION ═══ */
.faq-list {
  border-top: 1px solid var(--edge-lt);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.on-dark .faq-list { border-top-color: var(--edge-dk-soft); }
.faq-item { border-bottom: 1px solid var(--edge-lt); }
.on-dark .faq-item { border-bottom-color: var(--edge-dk-soft); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.35rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.25;
  color: var(--text-dark);
  transition: color var(--dur) var(--ease);
}
.on-dark .faq-q { color: var(--text-lt); }
.faq-q:hover { color: var(--fox-ink); }
.on-dark .faq-q:hover { color: var(--fox); }
.faq-icon {
  flex: none;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fox);
  color: var(--fox);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
  margin-top: 0.1rem;
}
.faq-q[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
  background: var(--fox);
  color: var(--machine);
}
/* The answer panel is shown and hidden outright, and only opacity and a
   small offset are animated.

   Two height-animation approaches were tried and both silently clipped the
   last line of longer answers: a measured pixel max-height (goes stale as
   soon as the web font swaps in and reflows the text) and the 0fr/1fr grid
   technique (overflow:hidden zeroes the item's max-content contribution
   here, so the row collapses onto the padding). An answer that loses its
   final sentence is a real cost on a lead-gen page; a slide transition is
   not worth it. Natural height cannot clip. */
.faq-a { display: none; }
.faq-q[aria-expanded="true"] + .faq-a {
  display: block;
  animation: faq-open 0.3s var(--ease) both;
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.faq-a-inner {
  padding-bottom: 1.5rem;
  max-width: 68ch;
  color: var(--text-dark-mid);
  line-height: 1.72;
  font-size: 0.96rem;
}
.on-dark .faq-a-inner { color: var(--text-lt-mid); }
.faq-a-inner > * + * { margin-top: 0.9rem; }

/* ═══ REVIEW CARDS ═══ */
.review-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.review {
  background: var(--white);
  border: 1px solid var(--edge-lt);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
}
.review-stars { display: flex; gap: 2px; color: var(--fox); margin-bottom: 1rem; }
.review-body { font-size: 0.95rem; line-height: 1.68; color: var(--text-dark-mid); flex: 1; }
.review-foot {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--edge-lt-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.review-who {
  font-family: var(--f-display);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.review-src { font-size: 0.74rem; color: var(--text-dark-muted); }

/* An honest provenance note, used wherever carried-over proof appears. */
.provenance {
  border: 1px solid rgba(253, 97, 1, 0.34);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  background: rgba(253, 97, 1, 0.07);
  padding: 1.15rem 1.4rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-dark-mid);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  max-width: 76ch;
}
.on-dark .provenance { color: var(--text-lt-mid); background: rgba(253, 97, 1, 0.1); }

/* ═══ AREA PAGE ═══ */
.area-facts {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--edge-lt-soft);
  border: 1px solid var(--edge-lt-soft);
  margin-top: 2rem;
}
.area-fact { background: var(--white); padding: 1.2rem; }
.area-fact-k {
  font-family: var(--f-display);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fox-ink);
  margin-bottom: 0.4rem;
}
.area-fact-v { font-size: 0.95rem; font-weight: 600; line-height: 1.45; }

.nearby {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.nearby a {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--edge-lt);
  background: var(--white);
  font-size: 0.84rem;
  font-weight: 600;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nearby a:hover { background: var(--machine); color: var(--white); border-color: var(--machine); }

/* ═══ 404 ═══ */
.err-wrap {
  min-height: 68vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(3rem, 8vw, 6rem);
  background: var(--machine);
  color: var(--text-lt);
}
.err-code {
  font-family: var(--f-display);
  font-size: clamp(5rem, 18vw, 12rem);
  font-weight: 900;
  font-style: italic;
  font-stretch: 112%;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 3px var(--fox);
  letter-spacing: -0.04em;
}