/* Shared dusk palette. Layout, content and form behavior remain unchanged. */
:root {
  --theme-base: #293633;
  --theme-panel: #34443f;
  --theme-raised: #3d4e48;
  --theme-text: #f2f0e9;
  --muted: #c9d1cb;
  --line: #607168;
  --border: #607168;
}
body { background: var(--theme-base); color: var(--theme-text); }
.header, .site-header, .landing-header, .mobile-nav > div {
  background: #fff; color: #152723; border-color: #d8dfda;
}
.skip, .skip-link { color: #152723; background: #fff; }
.utility, .utility-bar { background: #182723; }
.service-ribbon { background: #22302b; }
.service-ribbon span::before, .num { color: #edb87c; }
.split-feature, .service-hero-new, .area-panel, .stack-promo {
  background: var(--theme-panel);
}
.service-card-new, .roof-categories > a, .gallery-jumps a {
  background: var(--theme-panel); color: var(--theme-text);
}
.service-card-new:hover, .roof-categories > a:hover, .gallery-jumps a:hover {
  background: var(--theme-raised);
}
.work-gallery a { background: #202d28; }
.photo-note { background: #34443fee; color: var(--theme-text); }
.estimate-panel, .contact-form {
  background: var(--theme-panel); color: var(--theme-text);
  border-color: var(--line); box-shadow: 0 15px 40px #101d1926;
}
.estimate-panel .contact-form { background: transparent; box-shadow: none; }
.estimate-panel-intro .eyebrow, .landing-form .form-heading .eyebrow {
  color: #ffd09a;
}
.landing-form-section, .thank-you-hero { background: var(--theme-base); }
.contact-form input, .contact-form select, .contact-form textarea {
  background: #22312b; color: #f5f3ee; border-color: #91a397;
  color-scheme: dark;
}
.contact-form input::placeholder, .contact-form textarea::placeholder {
  color: #bdc8c0; opacity: 1;
}
.contact-form .sms-consent input[type="checkbox"] { accent-color: #edac62; }
.contact-form button, .call-btn, .primary-btn {
  background: #edac62; color: #152723;
}
.contact-form button:hover, .call-btn:hover, .primary-btn:hover {
  background: #f5c38b; color: #152723;
}
.cta { background: #81532d; color: #fff8ef; }
.cta .button { background: #152723; color: #fff; }
.landing-footer { color: #c9d1cb; }
/* A more distinct, compact homepage estimate card. */
.estimate-top { grid-template-columns: 1.2fr .8fr; align-items: stretch; }
.estimate-intro { min-height: 0; }
.estimate-panel {
  align-self: stretch;
  margin: 0;
  padding: 16px;
  background: #fff;
  color: #24372f;
  border: 1px solid #c9bfaa;
  border-top: 4px solid #edac62;
  box-shadow: 0 16px 38px #101d1959;
}
.estimate-panel-intro p, .estimate-panel .form-note,
.estimate-panel .form-heading span { color: #536057; }
.estimate-panel-intro .eyebrow { color: #76502a; }
.estimate-panel .contact-form { color: #24372f; }
.estimate-panel-intro p { margin-top: 5px; }
.estimate-panel .contact-form { gap: 8px 12px; padding-top: 10px; }
.estimate-panel .form-heading > p { display: none; }
.estimate-panel .form-heading { justify-content: flex-end; }
.estimate-panel .contact-form > label:has(textarea) { grid-column: auto; }
.estimate-panel .contact-form label { gap: 4px; }
.estimate-panel .form-row { gap: 16px; }
.estimate-panel .contact-form input:not([type="checkbox"]):not([type="hidden"]),
.estimate-panel .contact-form select {
  min-height: 44px; padding: 7px 10px;
}
.estimate-panel .contact-form input,
.estimate-panel .contact-form select,
.estimate-panel .contact-form textarea {
  background: #f5f7f4; border-color: #89978a;
  color: #24372f; color-scheme: light;
}
.estimate-panel .contact-form input::placeholder,
.estimate-panel .contact-form textarea::placeholder { color: #626e64; }
.estimate-panel :focus-visible { outline-color: #935413; }
.estimate-panel .contact-form textarea { height: 64px; padding: 8px 10px; }
.estimate-panel .contact-form button { padding: 12px; min-height: 48px; }
@media (max-width: 760px) {
  .estimate-top { grid-template-columns: 1fr; }
  .estimate-panel { margin: 0; padding: 16px; }
  .estimate-panel .contact-form > label:has(textarea) { grid-column: 1 / -1; }
}
a:focus-visible, summary:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #ffc78a; outline-offset: 4px;
}
.header :focus-visible, .site-header :focus-visible, .landing-header :focus-visible {
  outline-color: #935413;
}
@media (forced-colors: active) {
  .contact-form input, .contact-form select, .contact-form textarea {
    border: 1px solid CanvasText;
  }
}