.logo-color-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.brand-blue img {
  width: 212px;
  height: 54px;
  clip-path: inset(50% 25% 0 25%);
  transform: scaleX(2.3) scaleY(3) translateY(-15px);
  transform-origin: center;
  filter: brightness(0) invert(1);
}

.brand-straight {
  flex: none;
  width: 212px;
  height: 64px;
}

.brand-straight .header-wordmark {
  display: block;
  width: 100%;
  height: 100%;
}

.wordmark-svg {
  display: block;
  clip-path: none;
  transform: none;
  filter: none;
  overflow: visible;
}

svg.footer-logo.wordmark-svg {
  width: 212px;
  height: 64px;
  margin: 8px 0;
  clip-path: none;
  transform: none;
  filter: none;
}

svg.quote-logo.wordmark-svg {
  width: min(424px, 76vw);
  height: auto;
  aspect-ratio: 212 / 64;
  clip-path: none;
  transform: none;
  filter: none;
}

img.quote-logo.curved-wordmark {
  width: min(517px, 76vw, 100%);
  height: auto;
  aspect-ratio: 212 / 64;
  object-fit: fill;
  clip-path: none;
  transform: none;
  filter: none;
}

.footer-logo {
  width: 212px;
  height: 54px;
  margin: 8px 0;
  object-fit: contain;
  clip-path: inset(50% 25% 0 25%);
  transform: scaleX(2.3) scaleY(3) translateY(-15px);
  transform-origin: center;
  filter: brightness(0) invert(1);
}

footer {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow-x: clip;
}

footer .footer-main {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.footer-details > p {
  margin: 8px 0 30px;
  max-width: 370px;
}

.footer-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
}

.footer-columns > div {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 10px;
}

.footer-columns b {
  font: 12px "Montserrat", Arial, sans-serif;
  letter-spacing: .1em;
  color: #9fb8c3;
}

@media (max-width: 620px) {
  footer .footer-main,
  .footer-columns {
    grid-template-columns: 1fr;
  }
}

.site-header {
  background: var(--orange);
  border-bottom: 0;
  height: auto;
  min-height: 88px;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 16px;
  flex-wrap: wrap;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

.site-header nav a {
  font-weight: 500;
  white-space: nowrap;
}

.site-header nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-preview-note { margin: 0; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.5; }

@media (max-width: 620px) {
  .site-header {
    min-height: 76px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .site-header nav {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px 16px;
  }

  .site-header nav a {
    font-size: 12px;
  }
}

.section-more {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

:root {
  --sky: #d6e9ef;
  --sky-dark: #a9ced9;
  --line: #9fc2cd;
  --muted: #537786;
}

.spaces {
  max-width: 610px;
  margin: -8px 0 28px;
  padding-left: 16px;
  border-left: 3px solid var(--orange);
}

.quote .quote-logo-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(100px, 20.5vw, 164px);
}

.quote-logo {
  width: min(424px, 76vw);
  height: auto;
  aspect-ratio: 212 / 54;
  object-fit: contain;
  clip-path: inset(50% 25% 0 25%);
  transform: scaleX(2.3) scaleY(3) translateY(-30px);
  transform-origin: center;
  filter: url(#logo-white);
}

.spaces b {
  display: block;
  margin-bottom: 7px;
  font: 500 12px "Montserrat", Arial, sans-serif;
  letter-spacing: .1em;
}

.spaces p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.hero-image > p {
  text-align: center;
  font-size: 14px;
}

/* One typeface throughout the homepage; size and weight provide hierarchy. */
.topline,
.eyebrow,
h1 em,
h2 em,
.proof b,
.hero-image > p,
.hero-badge span,
.section-heading h2,
.work h2,
.why h2,
.area h2,
.quote h2,
.service-list article > span,
.why-photo > span,
.why-copy li > span,
.area-route span,
footer > div > b,
.spaces b {
  font-family: "Montserrat", Arial, sans-serif;
}

.section-heading h2,
.work h2,
.why h2,
.area h2,
.quote h2 {
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -.045em;
}

.proof b {
  font-weight: 500;
  letter-spacing: -.04em;
}

.proof {
  container-type: inline-size;
}

.proof div,
.proof div:first-child {
  align-items: center;
  text-align: center;
  padding-inline: 12px;
}

.proof b {
  font-size: clamp(17px, 5cqw, 36px);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .proof div,
  .proof div:first-child {
    padding-inline: 4px;
  }
}

.hero-copy {
  container-type: inline-size;
}

.hero-copy .hero-title {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: min(40px, 6.2cqw);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.04em;
  max-width: none;
  white-space: nowrap;
  margin: 0 0 24px;
}

.hero-copy .intro {
  margin-top: 0;
  font-size: 14px;
  color: var(--muted);
}

/* Repeat the hero's heading/body scale across the homepage sections. */
.section-heading h2,
.why h2,
.area h2,
.quote h2 {
  font-size: clamp(40px, 4.6vw, 68px);
}

.section-heading > p:last-child,
.service-list p,
.why-copy > p,
.why-copy li small {
  font-size: 14px;
}

.why-copy > p {
  line-height: 1.65;
  color: var(--muted);
  max-width: 620px;
}

/* Frame the finished wall and installer without showing the sneakers. */
.why .why-photo {
  min-height: 0;
  aspect-ratio: 4 / 5;
  align-self: start;
  overflow: hidden;
}

.why .why-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Consistent compact section spacing across the website. */
body main > section.section,
body main > section.page-panel,
body main > section.page-hero,
body main > section.page-cta,
body main > section.room-gallery,
body main > section.quote { padding:50px 5vw; }
@media(max-width:650px) {
  body main > section.section,
  body main > section.page-panel,
  body main > section.page-hero,
  body main > section.page-cta,
  body main > section.room-gallery,
  body main > section.quote { padding:36px 5vw; }
}

/* Shared usability and responsive card refinements. */
body .home-residential h2 { font-size:clamp(32px,4.2vw,60px); font-weight:500; line-height:1.06; letter-spacing:-.04em; }
body .page-panel-heading h1 { max-width:740px; font-size:clamp(36px,4.2vw,60px); font-weight:500; line-height:1.06; letter-spacing:-.04em; }
body a:focus-visible, body button:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
body .photo-viewer { width:100%; overflow:hidden; }
body:has(.photo-viewer[open]) { overflow:hidden; }
@media(max-width:650px) {
 body .home-residential-cards, body .wpi-topics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 16px; }
 body .home-residential-cards .home-residential-card, body .wpi-topics .wpi-topic-card { width:100%; max-width:none; min-width:0; }
 body .home-residential-card img, body .wpi-topic-card img { height:auto; aspect-ratio:720 / 522; }
 body .home-residential-card h3, body .wpi-topic-card h3 { line-height:1.4; }
 body .site-header nav { gap:4px 12px; }
 body .site-header nav a { display:inline-flex; align-items:center; min-height:44px; font-size:13px; }
 body .inline-arrow { width:44px; height:44px; }
 body .viewer-stage { grid-template-columns:44px minmax(0,1fr) 44px; gap:6px; }
 body .viewer-stage button { width:44px; height:44px; }
 body .photo-viewer button:focus-visible { outline-color:white; }
}
:root { --muted:#456675; }

/* Shared rounded picture corners. */
body main img:not(.quote-logo):not(.curved-wordmark):not(.footer-logo) { border-radius:28px; }
body .hero .hero-image, body #about.why .why-photo, body .why .why-photo, body .inline-gallery, body .gallery figure { border-radius:28px; overflow:hidden; }
body .project-photo, body .project-photo img { border-radius:8px; }
body .viewer-stage img { border-radius:20px; }

/* Rounded link boxes and action buttons across the site. */
body .button, body .header-cta, body .page-cta a, body .project-description > a, body .room-back { border-radius:14px; }

/* Preserve complete logo artwork without clipping its corners. */
body img.quote-logo, body img.curved-wordmark, body img.footer-logo, body .brand img { border-radius:0; }

/* Subtler corner rounding for photos and link boxes. */
body main img:not(.quote-logo):not(.curved-wordmark):not(.footer-logo),
body .hero .hero-image, body #about.why .why-photo, body .why .why-photo,
body .inline-gallery, body .gallery figure, body .home-residential-card, body .wpi-topic-card { border-radius:14px; }
body .button, body .header-cta, body .page-cta a, body .project-description > a, body .room-back { border-radius:8px; }
body .project-photo, body .project-photo img { border-radius:6px; }
body .viewer-stage img { border-radius:12px; }