*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #F7F5F1; }
img { max-width: 100%; }
a { color: #1B1A18; }
a:hover { color: #1F5FA8; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #1F5FA8; 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: #1B1A18; border: 1px solid #CBC3B6;
}
.filter[aria-pressed="true"] { background: #1F5FA8; color: #F7F5F1; border-color: #1F5FA8; 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 #E0DAD0;
  }
  .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: 20px !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: #CFE0F5 !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; }