:root {
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.125rem, 1rem + .75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
}
body { font-size: var(--text-base); }
.preview, .eyebrow, .brand-word small, .service small, .hero-panel .region,
.hero-caption, .caption, .review-card .note, .contact-note, .copyright,
.reviews-footnote, .quote cite, .quote cite span, .contact-links small { font-size: var(--text-xs); }
.navlinks, .button, .mobile-toggle, .truststrip p, .truststrip .wrap,
.trustlinks, .service a, .project-copy small { font-size: var(--text-sm); }
.hero-panel p, .service p, .section-head p, .review-card p,
.contact-grid p, .footer p { font-size: var(--text-base); }
.navlinks a, .mobile-toggle { min-height: 44px; display: inline-flex; align-items: center; }
.mobile-toggle { display: none; }
.comparison-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.comparison-tabs button {
  padding: var(--space-3) var(--space-5); min-height: 48px;
  border: 2px solid var(--black); background: white; color: var(--black);
  font-size: var(--text-sm); font-weight: 700;
}
.comparison-tabs button[aria-selected="true"] { background: var(--yellow); box-shadow: 3px 3px 0 var(--black); }
.comparison-tabs button:hover { background: var(--yellow); }
.comparison-intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; margin-bottom: var(--space-6); }
.comparison-intro h3 { font-size: var(--text-xl); letter-spacing: -.04em; max-width: 24ch; }
.comparison-intro p { font-size: var(--text-base); max-width: 55ch; }
.comparison-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.comparison-pair figure { min-width: 0; }
.comparison-pair figcaption { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); background: var(--black); color: white; font-size: var(--text-sm); font-weight: 700; }
.comparison-pair figure:last-child figcaption { background: var(--blue); color: #000; }
.comparison-pair figcaption small { font-size: var(--text-xs); font-weight: 400; }
.comparison-photo { width: 100%; height: 520px; position: relative; padding: var(--space-4); border: 2px solid var(--black); background: #e5e8e2; display: block; }
.comparison-photo img { width: 100%; height: 100%; object-fit: contain; }
.enlarge { position: absolute; bottom: var(--space-3); right: var(--space-3); padding: var(--space-2) var(--space-3); background: white; color: var(--black); font-size: var(--text-xs); border: 1px solid var(--black); }
.process-summary { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--space-6) var(--space-12); align-items: start; margin-top: var(--space-12); padding-top: var(--space-10); border-top: 2px solid var(--black); }
.process-summary h3 { font-size: var(--text-lg); letter-spacing: -.035em; }
.process-summary .steps { margin: 0; }
.process-summary .steps div { font-size: var(--text-sm); }
.process-summary .steps span { color: #00658f; }
.services-section .section-head p, .services-section .eyebrow { color: #000; }
.process-summary .button { grid-column: 2; justify-self: start; }
.modal-img { object-fit: contain; }
dialog .modal-close { min-height: 44px; font-size: var(--text-sm); }
@media(max-width:1100px) {
  .navlinks { gap: var(--space-3); }
  .navlinks { font-size: var(--text-xs); }
  .hero-actions .button { gap: var(--space-3); }
  .hero-panel { padding: var(--space-8); }
}

/* Version 9: give the real project photograph and company sign more space. */
.hero {
  min-height: 0;
  grid-template-columns: .43fr .57fr;
  gap: 44px;
  padding-top: 32px;
  padding-bottom: 32px;
}
.hero-photo {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 680px;
  overflow: hidden;
}
.hero-photo img { object-position: 50% 39%; }
.hero-panel {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 490px;
  padding: 30px;
  box-shadow: 7px 7px 0 var(--black);
}
.hero h1 { font-size: clamp(40px, 3.6vw, 52px); margin-bottom: 20px; }
.hero-panel .eyebrow { margin-bottom: 20px; letter-spacing: .08em; }
.hero-panel p { margin-bottom: 22px; }
.hero-actions { gap: 10px; }
.hero-actions .button { padding: 13px 14px; gap: 12px; font-size: 13px; }
.hero-panel .region { margin-top: 18px; margin-bottom: 0; }
.hero-panel:before { width: 43px; height: 43px; right: -19px; top: -18px; }
.hero-panel:after { width: 23px; height: 23px; right: 9px; top: 10px; }
.hero-caption { right: 20px; bottom: 20px; }
.hero-photo:after { width: 45px; height: 50px; }
.service .renovlies-copy { margin-top: 15px; }
.service .renovlies-link {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  border-bottom: 1px solid currentColor;
}
@media (max-width:1100px) and (min-width:721px) {
  .hero { gap: 28px; grid-template-columns: .45fr .55fr; }
  .hero-panel { padding: 25px; }
  .hero h1 { font-size: 43px; }
  .hero-photo { height: 650px; }
}
@media (max-width:720px) {
  .hero { display: flex; padding-top: 0; padding-bottom: 30px; gap: 22px; }
  .hero-photo {
    order: 0;
    width: calc(100% + 36px);
    margin-left: -18px;
    height: 490px;
  }
  .hero-photo img { object-position: 50% 40%; }
  .hero-panel {
    order: 1;
    margin-top: 0;
    width: calc(100% - 6px);
    max-width: none;
    padding: 25px 23px;
    box-shadow: 6px 6px 0 var(--black);
  }
  .hero h1 { font-size: clamp(35px, 9.5vw, 44px); }
  .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .hero-actions .button { width: auto; padding: 12px; font-size: 12px; gap: 9px; }
  .hero-panel .eyebrow { font-size: 11px; letter-spacing: .035em; margin-bottom: 16px; }
  .hero-panel p { font-size: 14px; }
}
@media(max-width:720px) {
  html { scroll-padding-top: 110px; }
  .preview { letter-spacing: 0; }
  .mobile-toggle { display: inline-flex; }
  .navlinks { top: 78px; gap: var(--space-3); font-size: var(--text-sm); }
  .brand-word small { font-size: var(--text-xs); letter-spacing: .02em; }
  .brand { gap: var(--space-2); }
  .comparison-tabs { gap: var(--space-2); margin-bottom: var(--space-6); }
  .comparison-tabs button { padding: var(--space-3); font-size: var(--text-xs); }
  .comparison-intro { grid-template-columns: 1fr; gap: var(--space-3); }
  .comparison-pair { gap: var(--space-2); }
  .comparison-pair figcaption { padding: var(--space-2); flex-direction: column; align-items: flex-start; }
  .comparison-photo { height: 285px; padding: var(--space-2); }
  .enlarge { font-size: var(--text-xs); right: var(--space-2); bottom: var(--space-2); padding: var(--space-2); }
  .process-summary { grid-template-columns: 1fr; gap: var(--space-6); }
  .process-summary .button { grid-column: auto; }
  .trustlinks { flex-wrap: wrap; }
  .quote { min-width: 0; }
  .review-card .button { max-width: 100%; gap: var(--space-2); }
}
.ticker { padding-block: 10px; }
.ticker-inner a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.ticker-inner a:hover { color: var(--yellow); }
.ticker-inner a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 5px; }
.all-projects-link { margin-top: 38px; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
@media(max-width:720px) { .contact-actions { flex-direction: column; align-items: stretch; } .contact-actions .button { width: 100%; } }
@media(max-width:720px) { .navlinks.open .button { display: inline-flex; } .navlinks.open .nav-contact-short { display: none; } }
.navlinks .nav-contact-short { display: none; }
@media(min-width:721px) and (max-width:1100px) { .navlinks .nav-contact-short { display: inline; } }
.reviews-footnote a { text-decoration: underline; text-underline-offset: 3px; }