@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/karla-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/playfair-display-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/playfair-display-italic-latin.woff2') format('woff2');
}

/* Reset and Base */
:root {
  --ink: #262B47;
  --slate: #3A3F55;
  --ribbon-red: #BB2E2B;
  --red-ink: #A02522;
  --steel-navy: #134D77;
  --eagle-bronze: #846035;
  --paper: #F9F8F4;
  --vellum: #EFEBDD;
  --hairline: #C9CBD3;
  --hairline-warm: #D8D2C2;
  --on-ink: #F1ECDD;
  --on-ink-soft: #AEBDC9;
  --on-ink-blue: #C9CFE2;
  --white: #FFFFFF;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Karla', sans-serif;
  color: var(--slate);
  background-color: var(--paper);
  line-height: 1.6;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

/* Typography */
h1, h2, h3, h4, .playfair {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

.hero-h1 {
  font-size: clamp(38px, 5vw, 53px);
}

.section-h2 {
  font-size: clamp(28px, 4vw, 36px);
}

.kicker {
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.7px;
  font-size: 13px;
  color: var(--red-ink);
}

.steel-eyebrow {
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.7px;
  font-size: 13px;
  color: var(--steel-navy);
}

/* Layout */
.container {
  max-width: 1248px;
  margin: 0 auto;
  padding: 0 96px;
}
@media (max-width: 1024px) {
  .container { padding: 0 48px; }
}
@media (max-width: 768px) {
  .container { padding: 0 24px; }
}

section {
  padding: 96px 0;
}
@media (max-width: 768px) {
  section { padding: 42px 0; }
}

.bg-paper { background-color: var(--paper); }
.bg-vellum { background-color: var(--vellum); }
.bg-ink { background-color: var(--ink); color: var(--on-ink); }
.bg-ink h1, .bg-ink h2, .bg-ink h3 { color: var(--on-ink); }

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--ribbon-red);
  color: var(--white);
  padding: 15px 27px;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 0;
  transition: background-color 0.2s, transform 0.1s;
}
.btn-primary:hover {
  background-color: var(--red-ink);
}
.btn-primary:active {
  transform: translateY(1px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--paper);
  color: var(--ink);
  padding: 15px 27px;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border: 1.5px solid var(--ink);
  cursor: pointer;
  border-radius: 0;
  transition: all 0.2s;
}
.btn-secondary:hover {
  background-color: var(--ink);
  color: var(--white);
}

/* Nav */
.nav-links {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}
.nav-links a {
  font-family: 'Karla', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--slate);
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: color 0.2s;
}
.nav-links a:hover {
  color: var(--ribbon-red);
}
.nav-links a.nav-red {
  color: var(--red-ink);
}

.site-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}
.site-menu-toggle { display: none; }

/* Keep the complete heritage lockup without letting the masthead consume the first viewport. */
@media (min-width: 768px) {
  .site-primary-nav {
    flex-wrap: nowrap;
    gap: clamp(16px, 2.2vw, 30px);
  }
  .site-primary-nav a { white-space: nowrap; }
  .home-hero { padding-bottom: 52px; }
  .home-hero-actions a { white-space: nowrap; }
}

/* Animations */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn-primary:active { transform: none; }
}

/* Skip-to-content link (visually hidden until focused) */
.skip-link {
  position: absolute;
  left: 8px;
  top: -56px;
  z-index: 1000;
  background-color: var(--ink);
  color: var(--on-ink);
  padding: 10px 16px;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: 2px solid var(--ribbon-red);
  transition: top 0.15s ease-out;
}
.skip-link:focus {
  top: 8px;
  outline: none;
}

/* Utility Bar */
.utility-bar {
  background-color: var(--ink);
  color: var(--white);
  padding: 11px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14.5px;
}
.utility-bar a { color: var(--white); text-decoration: none; }
.utility-bar a[data-info="phone"] { white-space: nowrap; }
.utility-pipe { color: #5A5F7A; margin: 0 12px; }
.utility-flex { display: flex; align-items: center; gap: 8px; }

@media (max-width: 900px) {
  .utility-bar {
    padding: 11px 24px;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .utility-hide-mobile {
    display: none;
  }
}

/* Mobile Call Bar */
.mobile-call-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--ribbon-red);
  color: var(--white);
  text-align: center;
  padding: 16px;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  z-index: 50;
  transition: transform 0.2s ease-out;
}
@media (max-width: 767px) {
  .mobile-call-bar {
    display: block;
    padding: 13px 16px;
    line-height: 26px;
  }
  body {
    padding-bottom: 52px;
  }
  body.form-field-active .mobile-call-bar {
    transform: translateY(100%);
  }
}

/* Forms */
.form-card {
  background-color: var(--paper);
  border-top: 3px solid var(--steel-navy);
  padding: 40px;
  color: var(--slate);
  border-radius: 0;
}
.form-card h3 {
  font-size: 26px;
  margin-bottom: 24px;
  color: var(--ink);
}
.form-group {
  margin-bottom: 20px;
  text-align: left;
}
/* :where() drops this to zero specificity for the .form-group part, so it stays
   the default for plain field labels while any label that carries its own class
   (.consent-row, .choice, .contact-option, .property-option) keeps its own
   layout. Before this it silently flattened all of them to display:block. */
:where(.form-group) label {
  display: block;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--ink);
  margin-bottom: 6px;
}
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--hairline);
  background-color: var(--white);
  border-radius: 0;
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  color: var(--ink);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: 3px solid color-mix(in srgb, var(--steel-navy) 24%, transparent);
  outline-offset: 1px;
  border-color: var(--steel-navy);
}
.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.lead-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.lead-form-grid .form-group-wide {
  grid-column: 1 / -1;
}

.contact-options {
  border: 0;
  min-width: 0;
}

.contact-options legend {
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--ink);
  margin-bottom: 10px;
}

.contact-option-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 380px);
}

.contact-options .contact-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: 'Karla', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  cursor: pointer;
  transition: color 140ms ease;
}

.contact-options .contact-option:hover input[type="checkbox"] {
  border-color: var(--ribbon-red);
}

.contact-options .contact-option:has(input:checked) {
  color: var(--red-ink);
}

.contact-options .contact-option:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--steel-navy) 24%, transparent);
  outline-offset: 2px;
}

.form-group .contact-option input[type="checkbox"] {
  appearance: none;
  display: grid;
  flex: 0 0 20px;
  place-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--slate);
  border-radius: 2px;
  background: var(--white);
  cursor: pointer;
}

.form-group .contact-option input[type="checkbox"]::before {
  content: "";
  width: 5px;
  height: 9px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg) scale(0);
  transition: transform 100ms ease;
}

.form-group .contact-option input[type="checkbox"]:checked {
  border-color: var(--ribbon-red);
  background: var(--ribbon-red);
}

.form-group .contact-option input[type="checkbox"]:checked::before {
  transform: translateY(-1px) rotate(45deg) scale(1);
}

.form-group .contact-option input[type="checkbox"]:focus {
  outline: 0;
}

.photo-upload-group > label:first-child span {
  margin-left: 6px;
  color: var(--slate);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .5px;
}

.photo-picker {
  min-height: 84px;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  margin: 0 !important;
  padding: 16px 18px;
  border: 1px dashed var(--slate);
  background: var(--white);
  cursor: pointer;
}

.photo-picker:hover { border-color: var(--ribbon-red); }
.photo-picker strong { color: var(--ink); font-size: 15px; letter-spacing: 0; }
.photo-picker small { color: var(--slate); font-size: 13px; font-weight: 400; letter-spacing: 0; line-height: 1.4; }
.photo-input {
  position: absolute;
  width: 1px !important;
  height: 1px;
  padding: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.photo-input:focus + .photo-selection,
.photo-upload-group:focus-within .photo-picker {
  outline: 3px solid color-mix(in srgb, var(--steel-navy) 24%, transparent);
  outline-offset: 2px;
}
.photo-selection { margin: 8px 0 0; color: var(--slate); font-size: 13px; }
.photo-selection[data-state="error"] { color: var(--red-ink); }
.photo-selection[data-state="ready"] { color: #236741; }

.honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.form-status {
  min-height: 24px;
  margin-top: 14px;
  font-size: 14px;
  text-align: center;
}

.form-status[data-state="error"] { color: var(--red-ink); }
.form-status[data-state="success"] { color: #236741; }
.lead-form [aria-busy="true"] { cursor: wait; opacity: 0.72; }

.form-success {
  padding: 44px 10px;
  text-align: center;
}

.form-success h3 { margin-bottom: 14px; }
.form-success p { font-size: 16px; }

.turnstile-wrap {
  min-height: 65px;
  margin: 2px 0 18px;
  overflow: hidden;
}

.form-page-main {
  padding: 64px 0 96px;
}

.form-page-layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr);
  gap: 64px;
  align-items: start;
}

.form-page-copy {
  padding-top: 28px;
}

.form-page-copy h1 {
  font-size: clamp(36px, 5vw, 52px);
  margin-bottom: 22px;
}

.form-page-copy p {
  font-size: 18px;
  margin-bottom: 24px;
}

.dynamic-project-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

.dynamic-project {
  grid-column: span 4;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.dynamic-project:nth-child(1) { grid-column: span 7; }
.dynamic-project:nth-child(2) { grid-column: span 5; }

.dynamic-project img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.dynamic-project:nth-child(-n + 2) img { height: 420px; }

.dynamic-project-copy {
  padding: 16px 20px 18px;
  border-top: 1px solid var(--ink);
}

.dynamic-project-copy strong {
  display: block;
  color: var(--ink);
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  line-height: 1.25;
}

.dynamic-project-copy span {
  display: block;
  margin-top: 3px;
  color: var(--steel-navy);
  font-size: 14px;
  font-weight: 700;
}

.dynamic-project-copy p {
  margin-top: 9px;
  font-size: 15px;
}

.dynamic-rate-list {
  border-top: 1px solid var(--hairline);
  margin-bottom: 32px;
}

.dynamic-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline);
}

.dynamic-rate-name {
  color: var(--ink);
  font-family: 'Playfair Display', serif;
  font-size: 22px;
}

.dynamic-rate-blurb { font-size: 15.5px; }
.dynamic-rate-price {
  color: var(--ink);
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .form-page-layout { grid-template-columns: 1fr; gap: 32px; }
  .dynamic-project, .dynamic-project:nth-child(1), .dynamic-project:nth-child(2) { grid-column: span 6; }
  .dynamic-project img, .dynamic-project:nth-child(-n + 2) img { height: 300px; }
}

@media (max-width: 640px) {
  .lead-form-grid { grid-template-columns: 1fr; }
  .lead-form-grid .form-group-wide { grid-column: auto; }
  .form-card { padding: 28px 22px; }
  .form-page-layout { display: block; }
  .form-page-copy { padding: 0 0 28px; }
  .dynamic-project, .dynamic-project:nth-child(1), .dynamic-project:nth-child(2) { grid-column: 1 / -1; }
  .dynamic-rate-row { align-items: flex-start; }

  .dynamic-project-grid {
    display: flex;
    flex-direction: row !important;
    gap: 16px;
    margin-inline: -24px;
    padding: 0 24px 12px;
    overflow-x: auto;
    scroll-padding-inline: 24px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
  }
  .dynamic-project,
  .dynamic-project:nth-child(1),
  .dynamic-project:nth-child(2) {
    flex: 0 0 min(82vw, 340px);
    scroll-snap-align: start;
  }
  .dynamic-project img,
  .dynamic-project:nth-child(-n + 2) img { height: 220px; }
}
.form-note {
  font-size: 14px;
  margin-top: 16px;
  text-align: center;
  color: var(--slate);
}

/* Certificate */
.certificate {
  max-width: 906px;
  margin: 0 auto;
  border: 2px solid var(--steel-navy);
  padding: 6px;
}
.certificate-inner {
  border: 1px solid var(--steel-navy);
  padding: 64px 48px;
  text-align: center;
}
@media (max-width: 768px) {
  .certificate-inner { padding: 40px 24px; }
}

/* Footer */
footer {
  border-top: 4px solid var(--ribbon-red);
}
.footer-main {
  padding: 54px 96px 42px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 48px;
}
.footer-col-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-col-nav a {
  color: var(--on-ink);
  text-decoration: none;
  font-size: 15.5px;
  transition: color 0.2s;
}
.footer-col-nav a:hover {
  color: var(--ribbon-red);
}
.footer-col-contact {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--on-ink-soft);
  font-size: 15px;
}
.footer-col-contact a { color: inherit; }
.footer-col-contact a:hover { color: var(--white); }
.footer-bottom {
  border-top: 1px solid #3E4463;
  padding: 16px 96px;
  display: flex;
  justify-content: space-between;
  color: var(--on-ink-soft);
  font-size: 13.5px;
  flex-wrap: wrap;
  gap: 16px;
}
@media (max-width: 768px) {
  .footer-main, .footer-bottom { padding: 36px 24px; }
  .footer-col-contact { text-align: left; }
  .footer-bottom { padding: 24px; }
  .footer-col-nav { gap: 2px; }
  .footer-col-nav a,
  .footer-col-contact a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 767px) {
  body:not(.form-page) .utility-bar {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 18px;
    padding: 4px 16px;
  }
  body:not(.form-page) .utility-flex a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  body.form-page .utility-bar { gap: 0; padding-block: 6px; }
  body.form-page .utility-flex { width: 100%; justify-content: center; }
  .site-masthead {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--hairline);
    text-align: left !important;
  }
  .site-masthead-inner {
    max-width: none !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 10px;
    padding: 0 !important;
  }
  .site-brand {
    min-width: 0;
    min-height: 44px;
    flex-direction: row;
    gap: 10px;
  }
  .site-brand .masthead-eagle {
    width: 64px !important;
    height: 40px !important;
    margin: 0 !important;
  }
  .site-brand .wordmark {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.15;
    letter-spacing: 1.6px !important;
  }
  .site-brand.legacy-brand .wordmark {
    font-size: 13px !important;
    letter-spacing: 1.25px !important;
  }
  .masthead-tagline,
  .masthead-rule { display: none !important; }
  .site-menu-toggle {
    min-width: 64px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
  }
  .site-primary-nav {
    grid-column: 1 / -1;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--hairline);
  }
  .site-masthead.nav-open .site-primary-nav { display: flex; }
  .site-primary-nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--hairline);
  }
  .home-hero {
    padding-top: 34px !important;
    padding-bottom: 48px;
  }
  .home-hero .kicker { margin-bottom: 16px !important; }
  .home-hero .hero-h1 { margin-bottom: 18px !important; }
  .home-hero p { margin-bottom: 28px !important; }
  .home-proof-image { height: 300px !important; }
  .commercial-hero {
    padding-top: 36px !important;
    padding-bottom: 52px !important;
  }
  .commercial-hero > .container { gap: 36px !important; }
  .commercial-hero .hero-h1 { font-size: 38px !important; }
  .commercial-hero p { margin-bottom: 28px !important; font-size: 17px !important; }
  .commercial-hero img { height: 320px !important; }

  .form-site-header { padding: 12px 16px !important; }
  .form-site-header-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .form-site-brand { min-width: 0; gap: 10px !important; }
  .form-site-brand { min-height: 44px; }
  .form-site-brand img { width: 64px !important; height: 38px !important; }
  .form-site-brand strong {
    min-width: 0;
    font-size: 15px;
    line-height: 1.15;
    letter-spacing: 1.25px !important;
    white-space: nowrap;
  }
  .form-site-nav {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 20px;
    border-top: 1px solid var(--hairline);
  }
  .form-site-nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  .form-page-main { padding: 42px 0 72px; }
  main a[href^="tel"],
  .service-col-right a,
  .form-note a,
  .footer-bottom a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  #projects-grid .gallery-row-1,
  #projects-grid .gallery-row-2,
  .commercial-work-gallery,
  .commercial-systems-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    margin-inline: -24px;
    padding: 0 24px 12px !important;
    overflow-x: auto;
    scroll-padding-inline: 24px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
  }
  #projects-grid .gallery-row-1 > *,
  #projects-grid .gallery-row-2 > *,
  .commercial-work-gallery > *,
  .commercial-systems-grid > * {
    min-width: 0 !important;
    flex: 0 0 min(82vw, 340px) !important;
    scroll-snap-align: start;
  }
  #projects-grid .gallery-row-1 img,
  .commercial-work-gallery img { height: 260px !important; }
  .commercial-systems-grid {
    border-top: 0 !important;
    padding-top: 0 !important;
  }
  .commercial-systems-grid .system-item {
    min-height: 190px;
    padding: 24px !important;
    border: 1px solid var(--hairline) !important;
    background: var(--paper);
  }
}

/* ============================================================
   Booking page + testimonials (added 2026-07)
   ============================================================ */

/* radio "chips" for project type and time window */
.choice-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.choice {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: 8px; padding: 11px 16px;
  background: var(--white); font-size: 15px; min-height: 44px;
}
/* the chip itself is the control: selected state is border + tint + weight,
   never colour alone. The native radio stays in the DOM for screen readers and
   keyboard users, just not painted twice. */
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice:has(input:checked) {
  border-color: var(--steel-navy); background: #134d770f;
  color: var(--steel-navy); font-weight: 700;
}
.choice:has(input:focus-visible) { outline: 2px solid var(--steel-navy); outline-offset: 2px; }

.optional-tag { font-size: 11px; letter-spacing: .08em; color: var(--eagle-bronze); font-weight: 700; }
.form-microcopy { text-align: center; font-size: 13px; color: var(--slate); margin-top: 12px; }

input[type="date"] {
  width: 100%; padding: 12px 14px; border: 1px solid var(--hairline);
  border-radius: 8px; font-size: 15px; font-family: inherit;
  background: var(--white); color: var(--ink); min-height: 46px;
}

.confirm-note {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 14px;
  background: #134d770d; border: 1px solid #134d7733; border-radius: 10px; padding: 14px 16px;
}
.confirm-note svg { flex: none; width: 22px; height: 22px; color: var(--steel-navy); }
.confirm-note strong { color: var(--steel-navy); }

/* testimonials on the public site */
.testimonial-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 36px; text-align: left; }
.testimonial-card {
  background: var(--white); border: 1px solid var(--hairline-warm); border-radius: 12px;
  padding: 26px; display: flex; flex-direction: column; gap: 14px;
}
.testimonial-stars { color: var(--eagle-bronze); letter-spacing: 3px; font-size: 16px; }
.testimonial-quote { font-family: 'Playfair Display', serif; font-size: 18px; line-height: 1.5; color: var(--ink); margin: 0; }
.testimonial-by { font-size: 13px; color: var(--slate); margin: auto 0 0; }
.testimonial-by strong { color: var(--ink); }
.testimonial-empty { color: var(--slate); font-size: 16px; margin-top: 26px; }

.review-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 40px; }
.btn-google {
  display: inline-flex; align-items: center; gap: 10px; background: var(--white);
  border: 1px solid var(--hairline); border-radius: 8px; padding: 14px 22px;
  font-weight: 700; color: var(--ink); text-decoration: none; font-size: 15px; min-height: 48px;
}
.btn-google:hover { border-color: var(--ink); }
.g-mark { width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0 100%); }
.btn-outline-ink {
  display: inline-flex; align-items: center; justify-content: center; background: transparent;
  border: 2px solid var(--ink); border-radius: 8px; padding: 12px 22px;
  font-weight: 700; color: var(--ink); text-decoration: none; font-size: 15px; min-height: 48px;
}
.btn-outline-ink:hover { background: var(--ink); color: var(--on-ink); }

/* star picker in the review form */
.star-pick { display: flex; gap: 4px; }
.star-pick button {
  background: none; border: 0; padding: 2px; cursor: pointer; font-size: 30px;
  line-height: 1; color: var(--hairline); min-width: 44px; min-height: 44px;
}
.star-pick button.on { color: var(--eagle-bronze); }
.star-pick button:focus-visible { outline: 2px solid var(--steel-navy); outline-offset: 2px; }

.consent-row { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--slate); }
.consent-row input { margin-top: 3px; accent-color: var(--steel-navy); width: 18px; height: 18px; flex: none; }

@media (min-width: 760px) {
  .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Which kind of property this is. Pre-set from the page the visitor arrived
   on, so the common case costs no taps - but a commercial customer who landed
   here straight from a search can still say so. */
.property-type { border: 0; min-width: 0; padding: 0; margin: 0; }
.property-type legend {
  font-family: 'Karla', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 1px; color: var(--ink); padding: 0; margin-bottom: 2px;
}
.property-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
/* Beats `.form-group label`, which would otherwise force display:block and
   collapse the gap between the icon and its text. */
.property-type .property-option {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex: 1 1 200px;
  border: 1px solid var(--hairline); border-radius: 8px; padding: 14px 16px;
  background: var(--white); min-height: 52px; color: var(--slate);
  font-family: 'Karla', sans-serif; font-size: 15px; font-weight: 600;
  letter-spacing: 0; text-transform: none; line-height: 1.2;
}
.property-type .property-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.property-type .property-option svg {
  width: 20px; height: 20px; flex: 0 0 20px; stroke: currentColor; color: var(--slate);
}
.property-type .property-option:has(input:checked) {
  border-color: var(--red-ink); box-shadow: inset 0 0 0 1px var(--red-ink);
  background: #a316160a; color: var(--ink); font-weight: 700;
}
.property-type .property-option:has(input:checked) svg { color: var(--red-ink); }
.property-type .property-option:has(input:focus-visible) { outline: 2px solid var(--steel-navy); outline-offset: 2px; }

@media (max-width: 520px) {
  .property-type .property-option { flex: 1 1 100%; }
}

/* Financing sits under the published rates because that is where the "can I
   afford this" question actually fires. Sharp corners and a 1px warm hairline
   match the rate rows above it. The action is outlined, never red: the phone
   number stays the only primary action on the page. */
.financing-note {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: 26px 30px; margin-bottom: 34px;
  background: var(--paper); border: 1px solid var(--hairline-warm);
}
.financing-copy h3 {
  font-family: 'Playfair Display', serif; font-size: 23px; font-weight: 700;
  color: var(--ink); margin-bottom: 7px; line-height: 1.25;
}
.financing-copy p { font-size: 15px; color: var(--slate); line-height: 1.55; margin: 0; }
.financing-action { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; flex-shrink: 0; }
.financing-fineprint { font-size: 12.5px; color: var(--slate); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 14px 24px; border: 1px solid var(--ink);
  font-family: 'Karla', sans-serif; font-size: 14.5px; font-weight: 700;
  color: var(--ink); background: transparent; text-decoration: none;
  transition: background-color .2s cubic-bezier(.16,1,.3,1), color .2s cubic-bezier(.16,1,.3,1);
}
.btn-outline svg { width: 15px; height: 15px; }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-outline:active { transform: translateY(1px); }
.btn-outline:focus-visible { outline: 2px solid var(--steel-navy); outline-offset: 2px; }

@media (max-width: 720px) {
  .financing-note { flex-direction: column; align-items: flex-start; gap: 20px; padding: 22px; }
  .financing-action { align-items: flex-start; width: 100%; }
  .btn-outline { justify-content: center; width: 100%; }
}

/* A class that sets display beats the browser's own [hidden] rule, so a button
   JS had hidden stayed on screen. This makes hidden mean hidden everywhere. */
[hidden] { display: none !important; }

/* The three words were separated by non-breaking spaces each followed by a
   normal space, so the only legal break split them 2-then-1. A flex row with a
   real gap cannot break mid-word, and the tracking tightens on narrow phones so
   all three stay on one line down to 320px. */
.seal-creed {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px;
  font-family: 'Karla', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 4px; color: var(--eagle-bronze); margin-bottom: 32px;
}
.seal-creed span { white-space: nowrap; }

@media (max-width: 430px) {
  .seal-creed { gap: 6px 14px; font-size: 11.5px; letter-spacing: 2px; }
}
@media (max-width: 350px) {
  .seal-creed { gap: 6px 10px; font-size: 10.5px; letter-spacing: 1px; }
}

/* Ten flex children carried min-width: 300px while the mobile container drops
   to 24px of side padding, leaving 272px. That pushed the whole page sideways
   on a 320px screen. */
@media (max-width: 480px) {
  /* Cap it, do not zero it. Zeroing let these columns collapse to ~140px and
     the controls inside burst out. min() keeps the 300px intent wherever there
     is room and yields to the viewport when there is not. */
  [style*="min-width: 300px"] { min-width: min(300px, 100%) !important; }
}

/* ---- Mobile refinements ---------------------------------------------- */

/* A. The two review buttons are one choice, so they read as one control.
   Equal width, and full width once they stack. */
.review-cta-row .btn-google,
.review-cta-row .btn-outline-ink { flex: 0 1 260px; justify-content: center; }

@media (max-width: 560px) {
  .review-cta-row { flex-direction: column; align-items: stretch; }
  .review-cta-row .btn-google,
  .review-cta-row .btn-outline-ink { flex: 1 1 auto; width: 100%; }
}

/* B. The stars and the link sat on one row, so the link broke mid-phrase
   beside them. Below 560px the link takes its own line and reads whole. */
@media (max-width: 560px) {
  .proof-rating { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* C. On a page this long the masthead scrolls away and there is no way back to
   the nav. It sticks on mobile, and shrinks once you are past the hero so it
   costs about 56px rather than the full brand block. */
@media (max-width: 768px) {
  .site-masthead {
    position: sticky; top: 0; z-index: 40;
    transition: padding .18s ease;
  }
  .site-masthead.is-stuck { padding-top: 8px !important; padding-bottom: 8px !important; box-shadow: 0 1px 0 var(--hairline), 0 6px 18px rgb(38 43 71 / .07); }
  .site-masthead.is-stuck .masthead-eagle { width: 46px !important; height: 26px !important; margin-bottom: 0 !important; }
  .site-masthead.is-stuck .wordmark { font-size: 15px !important; letter-spacing: 2.4px !important; margin-bottom: 0 !important; }
  .site-masthead.is-stuck .masthead-tagline,
  .site-masthead.is-stuck .masthead-rule { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .site-masthead { transition: none; }
}

/* D. Sixteen towns at 24px padding each ran to three screens on a phone. Two
   compact columns put the whole list on one, which is the only thing anyone is
   doing here: checking whether their town is on it. */
@media (max-width: 700px) {
  #areas-grid { grid-template-columns: repeat(2, 1fr) !important; column-gap: 10px; }
  #areas-grid > div {
    padding: 11px 2px !important;
    gap: 7px !important;
    border-bottom: 1px solid var(--hairline-warm) !important;
  }
  #areas-grid > div svg { width: 15px !important; height: 15px !important; flex-shrink: 0; }
  #areas-grid > div span { font-size: 14px !important; line-height: 1.25; }
}
@media (max-width: 340px) {
  #areas-grid { grid-template-columns: 1fr !important; }
}

/* A sticky header hides whatever an in-page link jumps to, so every anchor
   target keeps clear of it. */
@media (max-width: 768px) {
  section[id], div[id] { scroll-margin-top: 72px; }
}

/* ---- Mobile audit fixes ---------------------------------------------- */

/* Turnstile renders a fixed 300px widget. The form column is 228px at 320px
   wide and 298px at 390px, so it burst out of the card on every phone. zoom
   shrinks the layout box as well as the paint, which transform does not. */
.cf-turnstile { max-width: 100%; }
@media (max-width: 392px) { .cf-turnstile { zoom: .93; } }
@media (max-width: 370px) { .cf-turnstile { zoom: .86; } }
@media (max-width: 350px) { .cf-turnstile { zoom: .80; } }
@media (max-width: 332px) { .cf-turnstile { zoom: .74; } }

/* Stacked calls to action are one decision, so they get one width. Centred
   shrink-to-fit buttons gave three ragged edges on the home hero. */
@media (max-width: 560px) {
  .home-hero-actions { flex-direction: column; align-items: stretch; }
  .home-hero-actions > a { width: 100%; justify-content: center; }
  .legacy-hero-actions { flex-direction: column; align-items: stretch; }
  .legacy-hero-actions > a { width: 100%; justify-content: center; }
}

/* "THE SHINGLE COMPANY" broke as "THE SHINGLE / COMPANY", splitting the name.
   Two spans let it break after THE and keep the company name whole. */
.wordmark .wm-name { white-space: nowrap; }

/* The header sat on a 16px gutter while every body element used 24px. Now that
   it is sticky the mismatch is visible on every screen. */
@media (max-width: 768px) {
  .site-masthead { padding-left: 24px !important; padding-right: 24px !important; }
  .form-site-header { padding-left: 24px !important; padding-right: 24px !important; }
}

/* The rails already snap and scroll. What was missing was any sign that they
   do, so a half-sliced card at the screen edge read as a rendering fault. The
   mask softens that edge into an obvious "keep going". */
@media (max-width: 768px) {
  #projects-grid .gallery-row-1,
  #projects-grid .gallery-row-2,
  .commercial-work-gallery,
  .commercial-systems-grid {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }
}

/* The caption band was inset 28px on the left and ran off the right edge. */
@media (max-width: 768px) {
  .home-proof-image > div { margin-right: 28px !important; }
}

/* An odd number of towns leaves the last cell alone with a half-width rule
   under it. */
#areas-grid > div:last-child:nth-child(odd) { border-bottom: 0 !important; }

/* The second utility item dropped to a second line looking like an accident.
   It wraps on purpose now, centred, with room between the rows. Hiding it was
   the wrong call: on the home page that item is the Google reviews link. */
@media (max-width: 480px) {
  .utility-bar { flex-wrap: wrap; justify-content: center; row-gap: 2px; text-align: center; }
  .utility-bar > .utility-flex { justify-content: center; }
}

/* Headings were stranding single words on a final line. pretty, not balance:
   balance evens line lengths and on a five-word heading it stranded the first
   word instead, which is worse. Measured "Serving Chicagoland and Southern
   Wisconsin." at 390px: balance gave 120/263/324, pretty gives 324/213/172. */
h1, h2, h3, .hero-h1, .section-h2, blockquote, .pull-quote { text-wrap: pretty; }
p.lede, .kicker, .steel-eyebrow { text-wrap: pretty; }

/* The warranty heading sits inside a narrow double-bordered card, so at 33px
   "Craftsmanship" forces a third line with one word on it. */
@media (max-width: 480px) {
  .certificate-inner h2 { font-size: 25px !important; }
}

/* Every other primary action on the site is full width on a phone. This one
   was auto-width and centred, so it read as a different component. */
@media (max-width: 560px) {
  .financing-action .btn-outline, .rates-call .btn-primary { width: 100%; justify-content: center; }
  #rates .btn-primary { width: 100%; justify-content: center; }
}

/* Inline text links were 23 to 26px tall against a 44px minimum. */
.utility-bar a, .proof-rating a, a[data-info="email"], a[data-info="phone"] {
  display: inline-flex; align-items: center; min-height: 44px;
}
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }

/* Links were underlined in some places and bare in others. The utility bar and
   the reviews link now match the rest. */
.utility-bar a, .proof-rating a { text-decoration: underline; text-underline-offset: 3px; }


/* Cards in a scroll rail were stepped along the bottom because only some jobs
   carry a caption. Equal heights, caption pinned to the bottom. */
@media (max-width: 768px) {
  #projects-grid .gallery-row-1, #projects-grid .gallery-row-2 { align-items: stretch !important; }
  #projects-grid .gallery-row-1 > *, #projects-grid .gallery-row-2 > * {
    display: flex; flex-direction: column;
  }
  #projects-grid .gallery-row-1 > * > *:last-child,
  #projects-grid .gallery-row-2 > * > *:last-child { margin-top: auto; }
}

/* The three time-window chips each needed more than half the row, so none ever
   paired and every one sat alone above a half-empty column. */
@media (max-width: 480px) {
  #book-window-choices .choice, .contact-options .choice { padding-left: 11px; padding-right: 11px; font-size: 14px; }
}

/* The eyebrow was breaking as "3RD GENERATION, LOCALLY OWNED / AND OPERATED",
   splitting the phrase that matters. Two nowrap units mean the only place it
   can break is after "3RD GENERATION," - and on a wide screen it still sits on
   one line, because nothing forces the break. */
.kicker-split span { white-space: nowrap; }

/* The hero line needs 615px to sit on one line, so a 600px cap left "you."
   stranded on its own. Wider cap on desktop, and pretty so the phone wrap does
   not strand the last word either. */
.hero-lede { text-wrap: pretty; }

/* Address lookup suggestions. The input above stays the real form field, so
   this list only ever writes into it - it never replaces it. */
.form-group:has(.addr-list) { position: relative; }
.addr-list {
  position: absolute; z-index: 30; left: 0; right: 0; margin: 4px 0 0; padding: 4px;
  list-style: none; max-height: 260px; overflow-y: auto;
  background: var(--paper, #fff); border: 1px solid var(--hairline, #dedee0);
  border-radius: 8px; box-shadow: 0 12px 28px rgba(23, 50, 76, .16);
}
.addr-option {
  padding: 10px 12px; border-radius: 6px; font-size: 15px; line-height: 1.35;
  color: var(--ink, #18181b); cursor: pointer;
}
.addr-option:hover, .addr-option.active { background: var(--accent-soft, #0485f726); }

/* Call-or-email pair beside the request forms. Both are plain anchors carrying
   data-info themselves, not wrappers around a labelled span: that is what keeps
   the number you see and the number you dial in step when Mark edits his
   details in Settings.

   Always stacked and equal width, at every size. Side by side fitted the copy
   column with 2px to spare, so a slightly longer email address or a bolder font
   would have silently wrapped one button onto its own line and left the pair
   looking broken on desktop only. Stacked is also the shape someone deciding
   "ring them or write to them" reads fastest, and it gives each choice the full
   column as a tap target on a phone.

   No max-width. A 360px cap looked fine on a phone and fine on desktop, and
   wrong at every size in between: once the layout drops to one column the
   request card below runs the full width, so the capped buttons sat up to 400px
   narrower than the thing they belong to and read as a mistake. Matching the
   column matches the card. */
.quick-contact { margin-top: 22px; }
.quick-contact > strong { display: block; margin-bottom: 12px; }
.quick-contact-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.quick-contact-actions > a { justify-content: center; padding-left: 16px; padding-right: 16px; }
/* The outlined button carries a border the filled one does not, which left the
   two 2px apart when stacked. Same box on both. */
.quick-contact-actions > a.btn-primary { border: 1.5px solid var(--ribbon-red); }