*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #0E0E0D; }
img { max-width: 100%; }
a { color: #F2EEE6; }
a:hover { color: #C9A45C; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #C9A45C; outline-offset: 3px;
}
figure img, a img { transition: transform .6s ease; }
figure:hover img, a:hover img { transform: scale(1.03); }

/* projects filter */
.filter {
  min-height: 44px; padding: 0 20px; border-radius: 2px; font: inherit; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  background: transparent; color: #F2EEE6; border: 1px solid #4A463F;
}
.filter[aria-pressed="true"] { background: #C9A45C; color: #111; border-color: #C9A45C; font-weight: 600; }
.proj[hidden] { display: none; }

/* quote form */
#quote-form button[disabled] { opacity: .6; cursor: wait; }
#form-status.error { color: #F2A7A7; }

/* call bar above the header */
.callbar:hover { color: #F7F5F1; filter: brightness(1.06); }

/* ---------- phones ---------- */
@media (max-width: 700px) {
  /* header: logo + Free Quote on one row, menu as one scrolling row underneath */
  .hdr { padding: 10px 16px !important; gap: 8px !important; flex-wrap: wrap !important; }
  .hdr-logo img { height: 38px !important; }
  .hdr-cta { order: 2; gap: 10px !important; }
  .hdr-phone { display: none !important; }
  .hdr-cta a:last-child { min-height: 40px !important; padding: 0 16px !important; font-size: 13px !important; }
  /* menu: all five links visible, two centred rows */
  .hdr-nav {
    order: 3; width: calc(100% + 32px); margin: 0 -16px; padding: 4px 12px;
    flex-wrap: wrap !important; justify-content: center; gap: 0 18px !important;
    font-size: 12px !important; letter-spacing: 0.05em !important;
    border-top: 1px solid #2A2925;
  }
  .hdr-nav a { white-space: nowrap; padding: 9px 0 !important; }

  /* home: the four "what we do" tiles as a 2 x 2 grid */
  #what { padding-top: 56px !important; padding-bottom: 56px !important; gap: 24px !important; }
  #what > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  #what a > span { padding: 40px 12px 12px !important; }
  #what a > span > span:first-child { font-size: 21px !important; line-height: 1.15; }
  #what a > span > span:last-child { font-size: 12px !important; line-height: 1.35; }

  #g-reviews blockquote { font-size: 17px !important; }
  #g-reviews figure { padding: 22px !important; }

  /* call bar: shorter text on phones */
  .callbar { font-size: 15px !important; }
  .callbar-extra { display: none; }

  /* hero: shorter, smaller text */
  #top { min-height: 560px !important; }
  #top h1 { font-size: 40px !important; }
  #top p { font-size: 16px !important; }
  #top a { min-height: 48px !important; padding: 0 22px !important; font-size: 15px !important; }

  /* stats: all four side by side */
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; padding: 20px 10px !important; text-align: center; }
  .stats > div { align-items: center; }
  .stat-num { font-size: 22px !important; white-space: nowrap; }
  .stats > div > span:not(.stat-num) { font-size: 9px !important; letter-spacing: 0.06em !important; line-height: 1.3; margin-top: 4px; }

  /* reviews title on one line */
  #reviews h2 { font-size: 24px !important; white-space: nowrap; }

  /* less empty space between sections */
  #showers { padding-top: 64px !important; gap: 44px !important; }
  #services { padding-top: 40px !important; padding-bottom: 64px !important; }
  #work, #reviews > div, #quote > div { padding-top: 64px !important; padding-bottom: 64px !important; }

  /* section headings a bit smaller */
  section h2 { font-size: 34px !important; }
  section h3 { font-size: 26px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  figure img, a img { transition: none; }
}

/* text that sits on top of photos stays light */
.hero { color: #F7F7F5; }
.hero span { color: #F2E9DC !important; }
.hero p { color: #E6E6E3 !important; }
.hero a { color: #F7F7F5 !important; border-color: rgba(247,247,245,.6) !important; }
.hero a[href*="quote"] { color: #F7F5F1 !important; }
[style*="rgba(11,13,15,0) 0%"], [style*="rgba(11,13,15,0) 0%"] * { color: #F7F5F1 !important; }
[style*="rgba(11,13,15,0) 0%"] span + span { color: #E2DED6 !important; }
.proj figcaption span:first-child { color: #F0E2C4 !important; }
[style*="rgba(11,13,15,0.8)"] { color: #F7F5F1; }

/* serif titles: solid weight; review quotes a bit lighter and smaller */
/* ---- bold type everywhere ---- */
body > div, main { font-weight: 600; }
p { font-weight: 500; }
[style*="Playfair Display"] { font-weight: 800 !important; letter-spacing: -0.01em; }
blockquote[style*="Playfair Display"] { font-weight: 600 !important; font-size: 20px !important; letter-spacing: 0; }
.stat-num { font-weight: 800 !important; }
.hdr-nav, .hdr-nav a { font-weight: 700 !important; }
.callbar, a[style*="inline-flex"], button { font-weight: 700 !important; }
[style*="text-transform: uppercase"] { font-weight: 700 !important; }
label { font-weight: 700 !important; }
input, select, textarea { font-weight: 500 !important; }

/* ---- reviews carousel ---- */
.rv-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
.rv-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 8px; flex: 1; min-width: 0;
}
.rv-track::-webkit-scrollbar { display: none; }
.rv-card {
  flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; margin: 0;
  display: flex; flex-direction: column; gap: 16px; background: #171715; border: 1px solid #2A2925;
  border-top: 3px solid #C9A45C; border-radius: 4px; padding: 26px; min-height: 260px;
}
.rv-stars { color: #C9A45C; letter-spacing: 3px; font-size: 16px; }
.rv-text { margin: 0; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 19px; line-height: 1.45; flex: 1; }
.rv-clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rv-more { align-self: flex-start; background: none; border: 0; padding: 4px 0; color: #C9A45C; font: inherit; font-size: 14px; font-weight: 700 !important; text-decoration: underline; cursor: pointer; }
.rv-by { color: #B3AC9E; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.rv-nav {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #4A463F; background: #0E0E0D;
  color: #F2EEE6; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.rv-nav:hover { background: #C9A45C; color: #111; border-color: #C9A45C; }
.rv-count { margin: 12px 0 0; text-align: center; color: #B3AC9E; font-size: 13px; letter-spacing: .1em; font-weight: 700; }
@media (max-width: 1000px) { .rv-card { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 700px) {
  .rv-wrap { gap: 0; }
  .rv-card { flex-basis: 86%; padding: 22px; min-height: 0; }
  .rv-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; font-size: 22px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
  .rv-prev { left: -8px; } .rv-next { right: -8px; }
  .rv-text { font-size: 18px; }
}

/* ---------- projects album ---------- */
.album { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.album .proj a { display: block; overflow: hidden; border-radius: 2px; background: #1b1b19; }
.album .proj img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.album-count { margin: -12px 0 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #8d877b; font-weight: 700; }
@media (max-width: 1000px) { .album { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .album { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .filter { min-height: 38px; padding: 0 14px; font-size: 12px; } }

.lb { position: fixed; inset: 0; z-index: 1000; background: rgba(8,8,7,.96); display: none; align-items: center; justify-content: center; touch-action: pan-y; }
.lb.open { display: flex; }
.lb img { max-width: 92vw; max-height: 84vh; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
.lb button { position: absolute; background: rgba(255,255,255,.08); color: #F2EEE6; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; width: 48px; height: 48px; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb button:hover { background: #C9A45C; color: #111; border-color: #C9A45C; }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb-cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #CFC8BA; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
@media (max-width: 700px) { .lb img { max-width: 100vw; max-height: 78vh; } .lb-prev, .lb-next { top: auto; bottom: 48px; transform: none; } .lb-cap { bottom: 62px; } }
body.lb-lock { overflow: hidden; }

/* ---------- dark theme ---------- */
html, body { background: #0E0E0D; color: #F2EEE6; }
[style*="background: #C9A45C"], .filter[aria-pressed="true"], .rv-nav:hover { color: #111 !important; }
.hero a[style*="background: #C9A45C"] { color: #111 !important; border-color: #C9A45C !important; }
.callbar:hover { color: #111; }
a:hover { color: #C9A45C; }
input, select, textarea { color-scheme: dark; }
select option { background: #171715; color: #F2EEE6; }
::placeholder { color: #7d776c; }
footer img { align-self: flex-start; }

/* ---------- renovations: recent projects ---------- */
.rp-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.rp-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid #4A463F; border-radius: 2px; text-decoration: none; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.rp-jump a:hover { border-color: #C9A45C; }
.rp { display: flex; flex-direction: column; gap: 28px; padding-top: 56px; border-top: 1px solid #2A2925; scroll-margin-top: 24px; }
.rp-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.rp-sub { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #C9A45C; font-weight: 700; }
.rp-head p { margin: 0; color: #C9C2B4; font-size: 17px; }
.rp-tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rp-tags li { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #B3AC9E; border: 1px solid #2E2D29; background: #0E0E0D; padding: 6px 12px; border-radius: 2px; }
.rp-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; align-items: start; }
.rp-pair { display: flex; flex-direction: column; gap: 12px; }
.rp-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rp-ba a, .rp-strip a { position: relative; display: block; overflow: hidden; border-radius: 2px; background: #1b1b19; }
.rp-ba img, .rp-strip img { width: 100%; object-fit: cover; display: block; }
.rp-strip img { aspect-ratio: 1 / 1; }
.rp-lbl { position: absolute; top: 10px; left: 10px; background: rgba(11,13,15,0.8); color: #F7F5F1; padding: 5px 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.rp-lbl.rp-after { background: #C9A45C; color: #111; }
.rp-pair figcaption { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 24px; }
.rp-during { display: flex; flex-direction: column; gap: 12px; }
.rp-dl { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #8d877b; font-weight: 700; }
.rp-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rp-all { align-self: flex-start; min-height: 50px; padding: 0 26px; background: transparent; color: #F2EEE6; border: 1px solid #C9A45C; border-radius: 2px; font: inherit; font-size: 14px; letter-spacing: .06em; cursor: pointer; }
.rp-all:hover { background: #C9A45C; color: #111; }
@media (max-width: 900px) { .rp-pairs { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  #before-after > div { padding-top: 64px !important; padding-bottom: 64px !important; gap: 48px !important; }
  .rp { padding-top: 40px; gap: 22px; }
  .rp-head p { font-size: 16px; }
  .rp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-pair figcaption { font-size: 21px; }
  .rp-jump a { min-height: 40px; padding: 0 14px; font-size: 12px; }
}