/* =========================================================
   Coker Construction — Glendale, AZ
   Design direction: "Antique Quarter" — Bricolage Grotesque
   wide modern display (slightly imperfect, hand-set feel) +
   Source Serif 4 transitional body. Italic phrases as section
   labels. Dusty cream + verdigris (copper patina) + brick rose
   palette referencing the antique district's faded paint and
   patinated trim. Centered typographic ornaments as dividers.
   Diamond markers on services. Outlined buttons.

   First site in the network to use sans display + serif body
   (inverts prior three). Visually unrelated to Goodyear,
   Waddell, and Peoria.
   ========================================================= */

:root {
  /* Palette — dusty cream + verdigris + brick */
  --paper: #F1E8DA;
  --paper-deep: #DDCFB7;
  --ink: #1E1814;
  --ink-soft: #5A4A3D;
  --verdigris: #3E6B61;
  --verdigris-deep: #2F5249;
  --brick: #94372D;
  --brick-soft: #B25A48;
  --faded-sage: #A39673;
  --rule: rgba(30, 24, 20, 0.16);
  --rule-strong: rgba(30, 24, 20, 0.38);

  /* Type — inverted pattern from prior sites */
  --display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;

  /* Spacing — calmer book-like rhythm */
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 10vw, 8.5rem);
  --max: 1160px;
}

/* Reset / base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
a {
  color: var(--brick);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(148, 55, 45, 0.4);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
a:hover { color: var(--verdigris-deep); text-decoration-color: var(--verdigris); }

/* Eyebrow — italic phrases in serif body, no tracking, no uppercase
   (4th distinct utility style across the network) */
.eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--verdigris-deep);
  display: inline-block;
}
.eyebrow--brick { color: var(--brick); }

/* Display headlines use Bricolage Grotesque — wide grotesque sans */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--ink);
}
h1 {
  font-size: clamp(2.8rem, 6.5vw, 5rem);
  line-height: 1;
  font-weight: 500;
  font-variation-settings: "wdth" 110, "opsz" 96;
}
h2 {
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 1.08;
  font-weight: 500;
}
h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  line-height: 1.2;
  font-weight: 500;
}
h4 { font-size: 1.05rem; line-height: 1.3; }

/* Body serif italic carries emphasis */
h1 em, h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--brick);
  font-variation-settings: normal;
}

p { margin: 0 0 1.15em; }
p.lead {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.65vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
  font-weight: 400;
}

/* Layout primitives */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; position: relative; }
.section--paper-deep { background: var(--paper-deep); }
.section--ink {
  background: var(--ink);
  color: var(--paper);
}
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--paper); }
.section--ink p { color: rgba(241, 232, 218, 0.78); }
.section--ink .eyebrow { color: var(--brick-soft); }
.section--ink a { color: var(--brick-soft); }

.rule { border: 0; height: 1px; background: var(--rule); margin: 2.5rem 0; }

/* Ornamental divider — centered diamond between rules (book-frontispiece feel) */
.ornament {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 4rem 0;
  color: var(--verdigris);
}
.ornament::before, .ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-strong);
}
.ornament__mark {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--brick);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(241, 232, 218, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
}
.brand {
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand strong {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variation-settings: "wdth" 110;
}
.brand span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--verdigris-deep);
  margin-top: 0.15rem;
}
.nav {
  display: flex;
  gap: 2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
}
.nav a {
  text-decoration: none;
  color: var(--ink);
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--brick); color: var(--brick); }
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 760px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    padding: 1rem var(--gutter) 1.5rem;
    border-bottom: 1px solid var(--rule);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
  .nav-toggle { display: block; }
}

/* Hero — book-page feel, centered headline */
.hero {
  padding: clamp(4rem, 9vw, 8rem) 0 clamp(2rem, 3vw, 3rem);
  position: relative;
}
.hero__eyebrow { margin-bottom: 1.5rem; }
.hero__title { max-width: 20ch; margin-bottom: 1.75rem; }
.hero__lead { max-width: 56ch; margin-bottom: 2.25rem; }

/* Hero ornament — typographic flourish (5 small diamonds with hairlines) */
.hero__ornament {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 3rem 0 2.5rem;
  color: var(--verdigris);
}
.hero__ornament::before, .hero__ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--verdigris);
  opacity: 0.5;
}
.hero__ornament__group {
  display: flex;
  gap: 0.8rem;
  color: var(--brick);
  font-size: 0.6rem;
}

/* Hero meta — italic-labelled dl */
.hero__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule-strong);
}
.hero__meta div { }
.hero__meta dt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--verdigris-deep);
  margin-bottom: 0.4rem;
}
.hero__meta dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

@media (max-width: 780px) {
  .hero__meta { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* CTA buttons — outlined, refined (4th distinct treatment) */
.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.btn:hover { background: var(--brick); border-color: var(--brick); color: var(--paper); text-decoration: none; }
.btn--filled { background: var(--ink); color: var(--paper); }
.btn--filled:hover { background: var(--brick); border-color: var(--brick); color: var(--paper); }
.btn__arrow {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  transition: transform 0.15s ease;
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Two-column layouts */
.cols-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 820px) { .cols-2 { grid-template-columns: 1fr; } }

.section__header { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__header h2 { margin-top: 0.8rem; max-width: 24ch; }

/* Services — diamond markers, no numbering (4th distinct treatment) */
.services-list { list-style: none; padding: 0; margin: 0; }
.service {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1.5rem 2rem;
  padding: 2.1rem 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.service:last-child { border-bottom: 1px solid var(--rule); }
.service__mark {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--brick);
  line-height: 1;
  padding-top: 0.4rem;
}
.service__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: "wdth" 105;
}
.service__desc {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 700px) {
  .service { grid-template-columns: 24px 1fr; gap: 0.5rem 1rem; padding: 1.6rem 0; }
  .service__desc { grid-column: 1 / -1; padding-left: 0; }
}

/* Neighborhoods — historic district / established / arrowhead split */
.zone {
  margin-bottom: 3rem;
}
.zone__label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--verdigris-deep);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.zone__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.neighborhoods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}
.neighborhood {
  background: var(--paper);
  padding: 1.5rem 1.5rem 1.6rem;
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--verdigris);
  transition: border-top-color 0.15s ease;
}
.neighborhood:hover { border-top-color: var(--brick); }
.section--paper-deep .neighborhood { background: var(--paper); }
.neighborhood__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.2;
  margin-bottom: 0.4rem;
  font-variation-settings: "wdth" 110;
}
.neighborhood__tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--verdigris-deep);
}
.neighborhood__note {
  font-size: 0.93rem;
  color: var(--ink-soft);
  margin: 0.75rem 0 0;
  line-height: 1.6;
}

/* Process — italic numbered phases, simple */
.process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.process__step {
  padding: 0;
  counter-increment: phase;
}
.process { counter-reset: phase; }
.process__step::before {
  content: "Step " counter(phase) ".";
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--brick-soft);
  display: block;
  margin-bottom: 0.85rem;
}
.process__step h3 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
  font-variation-settings: "wdth" 105;
}
.process__step p { font-size: 0.95rem; color: rgba(241, 232, 218, 0.78); margin: 0; }

/* FAQ */
.faq__item {
  border-top: 1px solid var(--rule);
}
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 1.85rem 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  font-variation-settings: "wdth" 105;
}
.faq__q::after {
  content: "◆";
  font-family: var(--serif);
  font-size: 0.85rem;
  color: var(--brick);
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); color: var(--verdigris); }
.faq__a {
  padding: 0 0 1.85rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 68ch;
}
.faq__a p:last-child { margin-bottom: 0; }
.faq__item summary { list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info dl { margin: 0; }
.contact-info dt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--verdigris-deep);
  margin-top: 1.75rem;
}
.contact-info dt:first-of-type { margin-top: 0; }
.contact-info dd { margin: 0.45rem 0 0; font-size: 1.05rem; }

.form { display: grid; gap: 1.4rem; }
.field { display: flex; flex-direction: column; }
.field > label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--verdigris-deep);
  margin-bottom: 0.55rem;
}
.field input, .field select, .field textarea {
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--verdigris);
  outline-offset: 0;
  border-color: var(--verdigris);
}
.field textarea { min-height: 150px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 580px) { .field-row { grid-template-columns: 1fr; } }
.form__submit { justify-self: start; margin-top: 0.5rem; }
.form__msg {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--verdigris-deep);
  margin-top: 1rem;
}
.form__msg--error { color: var(--brick); }

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Services checkbox group */
.field--services { border: 0; padding: 0; margin: 0; }
.field--services legend {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--verdigris-deep);
  margin-bottom: 0.8rem;
  padding: 0;
}
.field__hint {
  font-style: normal;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-left: 0.5rem;
}
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.6rem 1rem;
  border: 1px solid var(--rule-strong);
  padding: 1.15rem;
  background: var(--paper);
}
.checkbox {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  font-size: 0.96rem;
  padding: 0.3rem 0;
}
.checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  border: 1.5px solid var(--ink-soft);
  background: var(--paper);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin: 0;
}
.checkbox input[type="checkbox"]:checked {
  background: var(--brick);
  border-color: var(--brick);
}
.checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--verdigris);
  outline-offset: 2px;
}

.recaptcha-notice {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 0.85rem;
  line-height: 1.5;
}
.recaptcha-notice a { color: var(--verdigris-deep); }
.grecaptcha-badge { visibility: hidden !important; }

/* Footer */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 4.5rem 0 2rem;
}
.site-footer a { color: var(--paper); text-decoration: none; }
.site-footer a:hover { color: var(--brick-soft); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.footer-col h4 {
  color: var(--brick-soft);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.55rem; font-size: 0.96rem; }
.footer-brand p { color: rgba(241, 232, 218, 0.72); font-size: 0.95rem; max-width: 34ch; }
.footer-bottom {
  border-top: 1px solid rgba(241, 232, 218, 0.15);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(241, 232, 218, 0.6);
}

/* Page-specific intro (subpages) */
.page-intro {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.page-intro h1 { max-width: 20ch; margin-bottom: 1.2rem; }
.page-intro p.lead { max-width: 60ch; }

/* Pull quote — italic, brick left border */
.pullquote {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.3;
  font-style: italic;
  color: var(--ink);
  padding: 2.2rem 2rem;
  border-left: 3px solid var(--brick);
  background: var(--paper);
  margin: 2.5rem 0;
  max-width: 38ch;
}
.section--paper-deep .pullquote { background: var(--paper); }
.pullquote cite {
  display: block;
  margin-top: 1.2rem;
  font-family: var(--display);
  font-style: normal;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--verdigris-deep);
}

/* Stats — boxed, with italic labels */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  margin: 2.5rem 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
}
.stat {
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--rule);
}
.stat:last-child { border-right: 0; }
@media (max-width: 700px) {
  .stat { border-right: 0; border-bottom: 1px solid var(--rule); padding: 1.5rem 0; }
  .stat:last-child { border-bottom: 0; }
}
.stat__num {
  font-family: var(--display);
  font-weight: 500;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 0.4rem;
  font-variation-settings: "wdth" 105;
}
.stat__label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--verdigris-deep);
}

/* Focus states */
:focus-visible {
  outline: 2px solid var(--verdigris);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}