:root {
  --blue: #006db4;
  --navy: #004a88;
  --gold: #b58b35;
  --text: #111;
  --muted: #636363;
  --line: #e7e7e7;
  --light: #f7f7f7;
  --white: #fff;
  --font-menu: "Quicksand", "Segoe UI", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--text);
  font-family: "Quicksand", "Segoe UI", Arial, Helvetica, sans-serif;
  line-height: 1.6;
  background: #fff;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
.section { padding: 72px 0; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.btn.dark { background: #111; border-color: #111; }

.topbar {
  background: #050505;
  color: #fff;
  font-size: 13px;
}
.topbar-inner {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 3px 0;
}
.topbar p { margin: 0; }
.topbar a { font-weight: 700; }
.social {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;
}
.social a { flex: 0 0 auto; }
.social img { width: 20px; height: 20px; flex-shrink: 0; }

/* --- Announcement ticker: scrolls right to left, all items clickable ----- */
.ticker {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 27.2s linear infinite;
  will-change: transform;
}
.ticker-set {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  white-space: nowrap;
}
.ticker a {
  color: #fff;
  font-weight: 500;
  letter-spacing: .01em;
}
.ticker a:hover {
  color: #7cc6f2;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tk-dot { color: var(--blue); }
/* pause so the links can actually be clicked */
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track {
  animation-play-state: paused;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ticker-set:last-child { display: none; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid var(--line);
  /* two layers: a tight edge shadow plus a softer spread, so the sticky
     header stays clearly separated from content scrolling beneath it */
  box-shadow: 0 2px 4px rgba(16, 24, 40, .06),
              0 8px 24px rgba(16, 24, 40, .12);
}
.nav {
  width: 100%;
  max-width: none;
  height: 102px;
  display: flex;
  align-items: center;
  gap: 0;
  padding-left: 78px;
  padding-right: 0;
}
.brand {
  flex: 0 0 215px;
  margin-left: 34px;
  padding-left: 100px;
  display: flex;
  align-items: center;
}
.brand img {
  width: auto;
  height: 94px;
  max-width: 240px;
  object-fit: contain;
}
.menu {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, .55vw, 14px);
  font-family: var(--font-menu);
  font-size: clamp(14px, 1.02vw, 21px);
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.menu a,
.menu span {
  position: relative;
  cursor: pointer;
  color: #181818;
  padding: 34px 8px;
  transition: color .2s ease;
}
.menu a::after,
.menu span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.menu a:hover,
.menu span:hover {
  color: var(--blue);
}
.menu a:hover::after,
.menu span:hover::after {
  transform: scaleX(1);
}
.menu .active { color: var(--blue); font-weight: 700; }
.menu .active::after { transform: scaleX(1); }
.has-dropdown { position: relative; }
.has-dropdown > span,
.has-dropdown > a {
  padding-right: 24px;
}
.has-dropdown > span::before,
.has-dropdown > a::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .5;
  transition: transform .2s ease, opacity .2s ease, margin-top .2s ease;
}
.has-dropdown:hover > span::before,
.has-dropdown:hover > a::before {
  transform: rotate(225deg);
  margin-top: -2px;
  opacity: .85;
}
.dropdown {
  display: grid;
  position: absolute;
  top: 100%;
  left: -20px;
  min-width: 235px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(15,15,15,.16);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events: none;
}
.has-dropdown:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.dropdown a {
  position: relative;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--font-menu);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  transition: background .15s ease, color .15s ease;
}
.dropdown a::after { content: none; }
.dropdown a:hover { background: #f2f8fc; color: var(--blue); }
.project-drop { grid-template-columns: repeat(2, minmax(150px, 1fr)); min-width: 360px; }
.services-drop {
  /* wide enough for the longest label, since menu text does not wrap */
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  min-width: 610px;
}
.estimate {
  align-self: center;
  margin-right: 34px;
  height: 54px;
  min-width: 255px;
  padding: 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: #006db4;
  color: #fff;
  font-family: var(--font-menu);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .01em;
  transition: background .18s ease, box-shadow .18s ease;
}
.estimate:hover {
  background: var(--navy);
  box-shadow: 0 8px 20px rgba(0,74,136,.28);
}
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: #fff;
  color: #111;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.menu-toggle:hover,
.menu-toggle:focus-visible {
  background: var(--light);
  border-color: var(--blue);
  color: var(--blue);
}

@media (max-width: 2040px) {
  .brand {
    margin-left: 26px;
  }
  .has-dropdown > span,
  .has-dropdown > a {
    padding-right: 20px;
  }
  .estimate {
    margin-right: 26px;
  }
}

@media (max-width: 1920px) {
  .nav {
    padding-left: 42px;
  }
  .brand {
    flex-basis: 198px;
    margin-left: 14px;
  }
  .brand img {
    height: 84px;
    max-width: 198px;
  }
  .menu a,
  .menu span {
    padding-left: 7px;
    padding-right: 7px;
  }
  .has-dropdown > span,
  .has-dropdown > a {
    padding-right: 20px;
  }
  .has-dropdown > span::before,
  .has-dropdown > a::before {
    right: 6px;
  }
  .estimate {
    margin-right: 14px;
    min-width: 208px;
    height: 50px;
    font-size: 16px;
  }
}

@media (max-width: 1600px) {
  .nav {
    padding-left: 16px;
  }
  .brand {
    flex-basis: 180px;
  }
  .brand img {
    height: 76px;
    max-width: 172px;
  }
  .menu a,
  .menu span {
    padding-left: 5px;
    padding-right: 5px;
  }
  .has-dropdown > span,
  .has-dropdown > a {
    padding-right: 13px;
  }
  .has-dropdown > span::before,
  .has-dropdown > a::before {
    right: 3px;
    width: 5px;
    height: 5px;
  }
  .brand {
    margin-left: 6px;
  }
  .estimate {
    margin-right: 6px;
    min-width: 176px;
    height: 46px;
    font-size: 15px;
  }
}

@media (max-width: 1420px) {
  .nav {
    padding-left: 12px;
  }
  /* drop the logo offset here - on a 1366 laptop that space belongs to the menu */
  .brand {
    flex-basis: 92px;
    margin-left: 4px;
    padding-left: 0;
  }
  .brand img {
    height: 66px;
    max-width: 92px;
  }
  .menu a,
  .menu span {
    padding-left: 3px;
    padding-right: 3px;
  }
  .has-dropdown > span,
  .has-dropdown > a {
    padding-right: 12px;
  }
  .estimate {
    margin-right: 4px;
    min-width: 148px;
    height: 44px;
    padding: 0 12px;
    font-size: 14px;
  }
}

.hero {
  position: relative;
  /* height tracks the clip's 2.56:1 shape so wide screens stop zooming in */
  min-height: clamp(535px, 39vw, 820px);
  overflow: hidden;
}
.hero > img,
.hero > video {
  width: 100%;
  height: clamp(535px, 39vw, 820px);
  object-fit: cover;
}
.hero > video { display: block; background: #111; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.52), rgba(0,0,0,.20) 45%, rgba(0,0,0,.05));
}
.hero-copy {
  position: absolute;
  z-index: 1;
  left: max(42px, calc((100vw - 1360px) / 2));
  top: 50%;
  transform: translateY(-50%);
  width: min(570px, calc(100% - 48px));
  color: #fff;
}
.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.06;
  font-weight: 700;
}
.hero p {
  margin: 0 0 26px;
  max-width: 570px;
  font-size: 20px;
  font-weight: 700;
}
.header-form {
  position: absolute;
  z-index: 2;
  right: max(28px, calc((100vw - 1360px) / 2));
  top: 50%;
  transform: translateY(-50%);
  width: min(350px, calc(100% - 36px));
  padding: 26px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
}
.header-form h2 {
  margin: 0 0 6px;
  color: var(--blue);
  font-size: 25px;
  line-height: 1.15;
}
.header-form p {
  margin: 0 0 14px;
  color: #444;
  font-size: 14px;
}
.header-form input,
.header-form select,
.header-form textarea {
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid #cfcfcf;
  padding: 12px;
  font: inherit;
  background: #fff;
}
.header-form textarea {
  min-height: 64px;
  resize: vertical;
}
.header-form button,
.header-form .call-option {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-transform: uppercase;
}
.header-form button {
  border: 0;
  background: var(--blue);
  color: #fff;
}
.header-form .call-option {
  margin-top: 10px;
  border: 1px solid var(--blue);
  color: var(--blue);
  background: #fff;
}

.promise { background: #fff; }
.promise h2,
.renovations h2,
.projects h2,
.reviews h2,
.partners h2 {
  margin: 0 0 34px;
  text-align: center;
  font-size: 30px;
}
.promise-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.promise article {
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  padding: 22px 16px 20px;
  text-align: center;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.promise h3 { margin: 0 0 10px; font-size: 19px; }
.promise p { margin: 0; color: var(--muted); font-size: 14px; }

.stats-band {
  background: #f2f2f2;
  padding: 147px 0;
}
.stats-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: center;
}
.professionals h2 { margin: 0 0 18px; font-size: 28px; line-height: 1.18; }
.professionals a { color: var(--blue); font-weight: 700; }
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.stats b {
  display: block;
  color: var(--blue);
  font-size: 44px;
  line-height: 1;
}
.stats span { font-size: 15px; color: #333; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.service-card {
  position: relative;
  min-height: 315px;
  overflow: hidden;
  background: #111;
}
.service-card img {
  width: 100%;
  height: 315px;
  object-fit: cover;
  opacity: .82;
  transition: transform .35s, opacity .35s;
}
.service-card:hover img { transform: scale(1.05); opacity: .68; }
.service-card span {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 20px;
  padding: 12px 10px;
  background: rgba(0,109,180,.94);
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

/* Homepage Our Renovation Services - fixed overlapping, 3 in a row, balanced */
.renovations .service-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.renovations .service-card {
  min-height: 380px;
}
.renovations .service-card img {
  height: 380px;
}
.renovations .service-card span {
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 12px 10px;
  font-size: 15px;
  line-height: 1.3;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trusted { background: var(--light); }
.split {
  display: grid;
  grid-template-columns: 36fr 34fr 30fr;
  gap: 34px;
  align-items: center;
}
.two-col { grid-template-columns: 42% 1fr; }
.split-img {
  width: 100%;
  height: 520px;
  object-fit: cover;
}
.split-img.tall { height: 610px; }
.eyebrow {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 16px;
  font-weight: 700;
}
.split-copy h2 {
  margin: 0 0 18px;
  font-size: 28px;
  line-height: 1.2;
}
.split-copy p { color: #333; font-size: 17px; }
.consult-form {
  background: #fff;
  padding: 30px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
.consult-form h3 {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 24px;
  line-height: 1.15;
}
.consult-form p { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.consult-form input,
.consult-form select,
.consult-form textarea {
  width: 100%;
  margin-bottom: 12px;
  border: 1px solid #ccc;
  padding: 12px 13px;
  font: inherit;
  background: #fff;
}
.consult-form textarea { min-height: 84px; resize: vertical; }
.consult-form button {
  width: 100%;
  border: 0;
  background: var(--blue);
  color: #fff;
  padding: 13px;
  font-weight: 700;
  text-transform: uppercase;
}
.consult-form .call-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  border: 1px solid var(--blue);
  color: var(--blue);
  font-weight: 700;
  text-transform: uppercase;
}
.consult-form small { display: block; margin-top: 13px; color: #333; }
.consult-form a { color: var(--blue); font-weight: 700; }

.design { background: #fff; }
.project-marquee {
  overflow: hidden;
  display: grid;
  gap: 20px;
}
.project-row {
  display: flex;
  width: max-content;
  gap: 20px;
  will-change: transform;
}
.project-row img {
  flex: 0 0 285px;
  width: 285px;
  height: 356px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid #eee;
  border-radius: var(--radius);
}
.project-row-one {
  animation: project-scroll-left 100s linear infinite;
}
.project-row-two {
  animation: project-scroll-right 110s linear infinite;
}
/* Single-line variant for homepage - 4 visible (285×356, 4/5, ~4 per 1200px) */
.projects .project-marquee {
  gap: 0;
}
.projects .project-row.project-row-one {
  animation: project-scroll-left 100s linear infinite;
}
.project-marquee:hover .project-row {
  animation-play-state: paused;
}
@keyframes project-scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 9px)); }
}
@keyframes project-scroll-right {
  from { transform: translateX(calc(-50% - 9px)); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .project-row {
    animation: none;
    overflow-x: auto;
    width: 100%;
  }
}


.trust-intro {
  position: relative;
  overflow: hidden;
  background: #0c0c0c;
  color: #fff;
  padding: 204px 0;
}
.trust-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/service-01.jpg") center / cover no-repeat;
  filter: blur(8px) brightness(0.55);
  transform: scale(1.08);
}
.trust-intro .wrap {
  position: relative;
  z-index: 1;
}
.trust-intro .wrap {
  display: grid;
  grid-template-columns: 270px 1fr 360px;
  gap: 32px;
  align-items: center;
}
.trust-intro h2 { margin: 0; font-size: 34px; line-height: 1.05; }
.trust-intro p { margin: 0; font-size: 18px; }
.trust-intro .btn {
  min-width: 360px;
  padding-left: 36px;
  padding-right: 36px;
  white-space: nowrap;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: stretch;
}
.trust-grid article {
  display: grid;
  grid-template-columns: 42% 1fr;
  grid-template-rows: auto 1fr;
  gap: 0;
  height: 100%;
  overflow: hidden;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  box-shadow: -8px 10px 22px rgba(0, 0, 0, 0.1);
}
.trust-grid img {
  grid-row: 1 / span 2;
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
}
.trust-grid h3 {
  margin: 0;
  padding: 24px 22px 8px;
  color: var(--blue);
  text-transform: uppercase;
  font-size: 16px;
}
.trust-grid p {
  grid-column: 2;
  margin: 0;
  padding: 0 22px 24px;
  color: #444;
  font-size: 14px;
}

.reviews {
  background: #f5f5f5;
  text-align: center;
}
.chart {
  width: min(760px, 100%);
  margin: 0 auto 28px;
}
.experience-table-wrap {
  margin: 0 auto 38px;
  overflow-x: auto;
  border: 1px solid var(--line);
  background: #fff;
}
.experience-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  text-align: left;
}
.experience-table th,
.experience-table td {
  border: 1px solid var(--line);
  padding: 20px 22px;
  vertical-align: top;
}
.experience-table thead th {
  background: #f1f4f7;
  color: #252525;
  font-size: 18px;
  text-transform: uppercase;
}
.experience-table thead th:nth-child(2) {
  background: var(--blue);
  color: #fff;
}
.experience-table tbody > tr > th {
  width: 190px;
  color: #111;
  font-size: 18px;
  text-transform: uppercase;
}
.experience-table ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.experience-table li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 28px;
  color: #222;
}
.experience-table li:last-child {
  margin-bottom: 0;
}
.experience-table td:nth-child(2) li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.experience-table td:nth-child(3) li::before {
  content: "×";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #7b7b7b;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.rating {
  margin: -18px 0 10px;
  font-size: 20px;
  font-weight: 700;
}
.review-status {
  max-width: 720px;
  margin: 0 auto 18px;
  color: #555;
  font-size: 14px;
}
.review-status code {
  padding: 2px 5px;
  background: #fff;
  border: 1px solid var(--line);
}
.review-link {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--blue);
  font-weight: 700;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: left;
}
.review-grid article {
  background: #fff;
  padding: 24px;
  border: 1px solid var(--line);
}
.review-grid img { width: 35px; height: 35px; margin-bottom: 14px; }
.review-grid p { min-height: 145px; color: #333; }
.review-grid .stars {
  min-height: 0;
  margin: 0 0 10px;
  color: #f5a400;
  font-weight: 700;
}
.review-grid .stars span {
  color: #777;
  font-size: 13px;
  font-weight: 400;
}
.review-grid strong { color: var(--blue); }

/* --- Reviews slider ---------------------------------------------------------
   3 at a time on desktop, 2 on tablet, 1 on mobile. Auto-play with pause on
   hover/focus, dots and prev/next, swipe on touch. Keeps the existing
   .review-grid cards and works with live google-reviews.js replacements.
   ------------------------------------------------------------------------ */
.review-slider {
  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.review-viewport {
  overflow: hidden;
}
.review-track.review-grid {
  display: flex;
  gap: 22px;
  transition: transform .45s var(--ease);
  will-change: transform;
}
.review-track.review-grid article {
  flex: 0 0 calc((100% - 44px) / 3);
  min-width: 0;
}
.review-nav {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--blue);
  font-size: 28px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.review-nav:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.review-nav:disabled {
  opacity: .35;
  cursor: default;
}
.review-nav:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.review-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.review-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: #d0d0d0;
  cursor: pointer;
  padding: 0;
  transition: background .2s var(--ease), width .2s var(--ease);
}
.review-dots button.active {
  background: var(--blue);
  width: 24px;
  border-radius: 999px;
}
.review-dots button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
@media (max-width: 1024px) {
  .review-track.review-grid article {
    flex-basis: calc((100% - 22px) / 2);
  }
  .review-slider {
    grid-template-columns: 38px 1fr 38px;
    gap: 10px;
  }
  .review-nav {
    width: 38px;
    height: 38px;
    font-size: 24px;
  }
}
@media (max-width: 760px) {
  .review-slider {
    grid-template-columns: 1fr;
  }
  .review-nav {
    display: none;
  }
  .review-track.review-grid {
    gap: 14px;
  }
  .review-track.review-grid article {
    flex-basis: 100%;
  }
  .review-viewport {
    overflow: hidden;
  }
}

.partners { background: #fff; padding-top: 50px; }
.partner-marquee {
  overflow: hidden;
}
.partner-grid {
  display: flex;
  gap: 34px;
  align-items: center;
  overflow-x: auto;
  padding: 10px 0 18px;
  scroll-behavior: smooth;
  animation: partner-scroll 32s linear infinite;
  width: max-content;
}
.partner-grid:hover {
  animation-play-state: paused;
}
.partner-grid img {
  flex: 0 0 158px;
  width: 158px;
  max-height: 112px;
  object-fit: contain;
  filter: saturate(.95);
}
@keyframes partner-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 17px)); }
}
@media (prefers-reduced-motion: reduce) {
  .partner-grid {
    animation: none;
    overflow-x: auto;
    width: 100%;
  }
}

.footer {
  background: #131714;
  color: #fff;
  padding: 58px 0 48px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr .65fr 1.6fr 1.15fr;
  gap: 38px;
}
.footer-logo {
  width: 140px;
  max-width: 100%;
  margin-bottom: 14px;
}
.footer p { margin: 7px 0; color: #e6e6e6; }
.footer-description {
  max-width: 330px;
  font-size: 15px;
}
.footer h3 { margin: 0 0 14px; }
.footer a:not(.btn) {
  display: block;
  color: #e6e6e6;
  margin: 7px 0;
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.footer .footer-social a {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.footer-social img {
  width: 34px;
  height: 34px;
}
.footer-contact p {
  margin-bottom: 12px;
}
.footer-contact .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}
.footer-contact .contact-item img {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.footer-contact .contact-item[href^="mailto:"],
.footer-contact .contact-item[href^="tel:"] {
  align-items: center;
  min-height: 36px;
  gap: 12px;
}
.footer-contact .contact-item[href^="mailto:"] img,
.footer-contact .contact-item[href^="tel:"] img {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  margin-top: 0;
  padding: 7px;
  border-radius: 50%;
  background: var(--blue);
}
.footer .btn { margin-top: 20px; }

.call-fab {
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 9999;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  background: #006DB4;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  border-radius: 4px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.whatsapp {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  background: #20b455;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.call-fab img {
  width: 32px;
  height: 32px;
  display: block;
}
.whatsapp img {
  width: 32px;
  height: 32px;
  display: block;
}

.btn,
.estimate,
button,
.call-option,
.service-card span,
.menu-toggle,
.whatsapp,
.call-fab {
  border-radius: 4px;
}

.service-page-hero {
  position: relative;
  min-height: 420px;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #fff;
}
.service-page-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.68), rgba(0,0,0,.30));
}
.service-page-hero .wrap {
  position: relative;
  z-index: 1;
}
.service-page-hero h1 {
  max-width: 760px;
  margin: 0 0 16px;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.08;
}
.service-page-hero p {
  max-width: 670px;
  margin: 0 0 24px;
  font-size: 19px;
  font-weight: 700;
}
.service-content {
  background: #fff;
}
.service-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 44px;
  align-items: start;
}
/* Bathroom design: Featured full-width (100%) + form scrolls with Popular */
.bathroom-page .featured-full {
  width: 100%;
  background: #fff;
}
.bathroom-page .featured-full .wrap {
  width: 100%;
  max-width: none;
  padding: 0 24px;
}
.bathroom-page .featured-full .gallery-grid {
  width: 100%;
}
.bathroom-page #bathroomForm {
  position: sticky;
  top: 110px;
}
.bathroom-page .featured-full h2 {
  text-align: center;
  font-size: 38px;
  margin-bottom: 24px;
}
/* Black & White + Wash Basin 2-col — each image 50% page width, 100% of its column — section bg #006DB4 */
.bathroom-page .bw-decor {
  padding: 0;
  background: #006DB4;
}
.bathroom-page .bw-decor .wrap {
  width: 100%;
  max-width: none;
  gap: 0;
}
.bathroom-page .bw-decor .split {
  gap: 0;
  grid-template-columns: 1fr 1fr;
}
.bathroom-page .bw-decor .split.two-col {
  grid-template-columns: 1fr 1fr;
}
.bathroom-page .bw-decor .split-copy {
  padding: 48px 40px;
  display: grid;
  align-content: center;
  background: #006DB4;
  color: #fff;
}
.bathroom-page .bw-decor .split-copy h2,
.bathroom-page .bw-decor .split-copy p {
  color: #fff;
}
.bathroom-page .bw-decor .split-img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
@media (max-width: 760px) {
  .bathroom-page .bw-decor .split-img {
    min-height: 380px;
  }
  .bathroom-page .bw-decor .split-copy {
    padding: 28px 24px;
  }
}
/* Powder Bathroom — match content width on top (wrap 1200), 50% text / 50% image, form scrolls — reduced gap between the 3 */
.powder-full {
  background: #fff;
}
.powder-full.section {
  padding: 24px 0;
}
.powder-full + .powder-full {
  margin-top: -12px;
}
.powder-grid {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
.powder-text {
  padding: 40px;
  display: grid;
  align-content: center;
  background: #f9f9f9;
}
.powder-text h2 { margin: 0 0 10px; font-size: 30px; }
.powder-text h3 { margin: 22px 0 10px; color: var(--blue); font-size: 18px; }
.powder-text ul { margin: 0 0 14px; padding-left: 18px; }
.powder-text li { margin-bottom: 6px; color: #333; font-size: 15px; }
.price-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
.price-box {
  padding: 18px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: center;
  border-radius: 8px;
}
.price-box span { display: block; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.price-box strong { display: block; font-size: 20px; color: var(--text); }
.price-box.highlight { background: var(--blue); border-color: var(--blue); color: #fff; }
.price-box.highlight span, .price-box.highlight strong { color: #fff; }
.powder-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  background: #f9f9f9;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
@media (max-width: 900px) {
  .powder-grid { grid-template-columns: 1fr; }
  .powder-grid img { order: -1; }
}
.service-main h2 {
  margin: 0 0 14px;
  font-size: 30px;
  line-height: 1.2;
}
.service-main h3 {
  margin: 28px 0 10px;
  color: var(--blue);
  font-size: 22px;
}
.service-main p,
.service-main li {
  color: #333;
  font-size: 17px;
}
.service-main ul,
.service-main ol {
  padding-left: 22px;
}
.service-sidebar {
  position: sticky;
  top: 110px;
  background: #f7f7f7;
  padding: 26px;
  border: 1px solid var(--line);
}
.service-sidebar h2 {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 24px;
  line-height: 1.2;
}
.service-sidebar input,
.service-sidebar select,
.service-sidebar textarea {
  width: 100%;
  margin-bottom: 11px;
  border: 1px solid #ccc;
  padding: 12px;
  font: inherit;
  background: #fff;
}
.service-sidebar textarea {
  min-height: 84px;
  resize: vertical;
}
.service-sidebar button,
.service-sidebar .call-option {
  width: 100%;
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-transform: uppercase;
}
.service-sidebar button {
  border: 0;
  background: var(--blue);
  color: #fff;
}
.service-sidebar .call-option {
  margin-top: 10px;
  border: 1px solid var(--blue);
  color: var(--blue);
}
.service-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 34px;
}
.service-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.bathroom-page .service-page-hero {
  min-height: 620px;
}
.villa-page .service-page-hero {
  min-height: 620px;
}
.bathroom-page .service-page-hero .wrap {
  width: min(1180px, calc(100% - 48px));
}
.villa-page .service-page-hero .wrap {
  width: min(1180px, calc(100% - 48px));
}
.bathroom-page .service-page-hero::after {
  background: linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.38) 55%, rgba(0,0,0,.18));
}
.villa-page .service-page-hero::after {
  background: linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.38) 55%, rgba(0,0,0,.18));
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.btn.outline-light {
  border-color: #fff;
  background: rgba(255,255,255,.12);
  color: #fff;
}
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.trust-strip span {
  padding: 8px 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.bathroom-page .service-main {
  display: grid;
  gap: 34px;
  min-width: 0;
}
.villa-page .service-main {
  display: grid;
  gap: 34px;
  min-width: 0;
}
.service-section {
  padding: 30px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
  overflow: hidden;
}
.service-section.alt {
  background: #f7fbfe;
}
.service-section h2,
.service-section h3 {
  margin-top: 0;
  overflow-wrap: anywhere;
}
.lead-text {
  font-size: 19px;
  color: #222;
  font-weight: 700;
}
.image-band {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: stretch;
}
.image-band img {
  width: 100%;
  min-height: 310px;
  height: 100%;
  object-fit: cover;
}
.image-stack {
  display: grid;
  gap: 18px;
}
.image-stack img {
  min-height: 146px;
}
.benefit-grid,
.style-grid,
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.benefit-card,
.style-card,
.related-grid a {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
  min-width: 0;
}
.benefit-card h3,
.style-card h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 18px;
}
.process-list {
  display: grid;
  gap: 14px;
  counter-reset: process;
  padding: 0;
  margin: 0;
  list-style: none;
}
.process-list li {
  counter-increment: process;
  position: relative;
  padding: 18px 18px 18px 70px;
  background: #fff;
  border: 1px solid var(--line);
}
.process-list li::before {
  content: counter(process);
  position: absolute;
  left: 18px;
  top: 18px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}
.check-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  overflow: hidden;
  table-layout: fixed;
}
.pricing-table th,
.pricing-table td {
  padding: 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.pricing-table th {
  background: var(--blue);
  color: #fff;
}
.pricing-table tr:nth-child(even) td {
  background: #f8fbfd;
}
.faq-list details {
  border: 1px solid var(--line);
  background: #fff;
  margin-bottom: 12px;
  padding: 16px 18px;
}
.faq-list summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 700;
}
.faq-list p {
  margin-bottom: 0;
}
.bathroom-cta-panel {
  padding: 34px;
  background: #0f0f0f;
  color: #fff;
}
.bathroom-cta-panel h2,
.bathroom-cta-panel p {
  color: #fff;
}
.related-grid a {
  color: var(--blue);
  font-weight: 700;
}

.villa-page .hero-actions {
  margin-top: 28px;
}
.villa-page .service-section {
  padding: 30px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
  overflow: hidden;
}
.villa-page .service-section.alt {
  background: #f7fbfe;
}
.villa-page .service-section h2,
.villa-page .service-section h3 {
  margin-top: 0;
  overflow-wrap: anywhere;
}
.villa-page .lead-text {
  font-size: 19px;
  color: #222;
  font-weight: 700;
}
.villa-page .image-band {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: stretch;
}
.villa-page .image-band img {
  width: 100%;
  min-height: 310px;
  height: 100%;
  object-fit: cover;
}
.villa-page .image-stack {
  display: grid;
  gap: 18px;
}
.villa-page .image-stack img {
  min-height: 146px;
}
.villa-page .benefit-grid,
.villa-page .style-grid,
.villa-page .related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.villa-page .benefit-card,
.villa-page .style-card,
.villa-page .related-grid a {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
  min-width: 0;
}
.villa-page .benefit-card h3,
.villa-page .style-card h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 18px;
}
.villa-page .process-list {
  display: grid;
  gap: 14px;
  counter-reset: process;
  padding: 0;
  margin: 0;
  list-style: none;
}
.villa-page .process-list li {
  counter-increment: process;
  position: relative;
  padding: 18px 18px 18px 70px;
  background: #fff;
  border: 1px solid var(--line);
}
.villa-page .process-list li::before {
  content: counter(process);
  position: absolute;
  left: 18px;
  top: 18px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}
.villa-page .check-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.villa-page .pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  overflow: hidden;
  table-layout: fixed;
}
.villa-page .pricing-table th,
.villa-page .pricing-table td {
  padding: 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.villa-page .pricing-table th {
  background: var(--blue);
  color: #fff;
}
.villa-page .pricing-table tr:nth-child(even) td {
  background: #f8fbfd;
}
.villa-page .faq-list details {
  border: 1px solid var(--line);
  background: #fff;
  margin-bottom: 12px;
  padding: 16px 18px;
}
.villa-page .faq-list summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 700;
}
.villa-page .faq-list p {
  margin-bottom: 0;
}
.villa-page .villa-cta-panel {
  padding: 34px;
  background: #0f0f0f;
  color: #fff;
}
.villa-page .villa-cta-panel h2,
.villa-page .villa-cta-panel p {
  color: #fff;
}
.villa-page .trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.villa-page .trust-strip span {
  padding: 8px 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.villa-page .btn.outline-light {
  border-color: #fff;
  background: rgba(255,255,255,.12);
  color: #fff;
}

.gallery-page .service-page-hero {
  min-height: 520px;
}

.gallery-page .gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.gallery-page .gallery-grid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #f5f5f5;
}

.gallery-page .gallery-section h2 {
  margin-bottom: 18px;
}

.gallery-page .gallery-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

.projects-page .portfolio-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 28px;
}

.projects-page .summary-card {
  padding: 18px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: -6px 8px 18px rgba(0,0,0,.06);
}

.projects-page .summary-card b {
  display: block;
  margin-bottom: 6px;
  color: var(--blue);
  font-size: 30px;
  line-height: 1;
}

.projects-page .summary-card span {
  color: var(--muted);
  font-size: 14px;
}

.projects-page .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.projects-page .portfolio-card {
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: -8px 10px 22px rgba(0,0,0,.08);
}

.projects-page .portfolio-card h3 {
  margin: 0;
  padding: 16px 18px 12px;
  font-size: 18px;
  line-height: 1.25;
}

.projects-page .portfolio-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.projects-page .portfolio-images figure {
  position: relative;
  margin: 0;
}

.projects-page .portfolio-images img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.projects-page .portfolio-images figcaption {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 10px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.projects-page .portfolio-card p {
  margin: 0;
  padding: 14px 18px 18px;
  color: var(--muted);
  font-size: 14px;
}

.approvals-page .approval-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 10px;
}

.approvals-page .approval-summary article {
  padding: 18px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: -6px 8px 18px rgba(0,0,0,.06);
}

.approvals-page .approval-summary h3 {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: 18px;
}

.approvals-page .approval-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.approvals-page .approval-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.approvals-page .approval-card {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: -8px 10px 22px rgba(0,0,0,.08);
}

.approvals-page .approval-card img {
  width: 100%;
  height: 100%;
  min-height: 120px;
  object-fit: cover;
}

.approvals-page .approval-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.approvals-page .approval-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

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

.approvals-page .doc-grid .style-card {
  min-height: 100%;
}

.approvals-page .approval-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.approvals-page .approval-table {
  margin-top: 14px;
}

@media (max-width: 1024px) {
  .villa-page .service-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .villa-page .service-sidebar {
    position: static;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }
  .villa-page .service-page-hero {
    min-height: 560px;
  }
  .villa-page .service-page-hero h1 {
    max-width: 760px;
  }
  .villa-page .image-band {
    grid-template-columns: 1fr 1fr;
  }
  .villa-page .image-stack img {
    min-height: 146px;
  }
  .gallery-page .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .projects-page .portfolio-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .projects-page .portfolio-grid {
    grid-template-columns: 1fr;
  }
  .approvals-page .approval-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .approvals-page .approval-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .villa-page .service-page-hero .wrap {
    width: min(100% - 36px, 760px);
  }
  .villa-page .image-band {
    grid-template-columns: 1fr;
  }
  .villa-page .image-band img {
    min-height: 260px;
  }
  .villa-page .image-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .villa-page .check-columns {
    grid-template-columns: 1fr;
  }
  .gallery-page .gallery-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .villa-page .service-layout,
  .villa-page .service-cta .wrap {
    grid-template-columns: 1fr;
    display: grid;
  }
  .villa-page .service-sidebar {
    position: static;
  }
  .villa-page .service-gallery {
    grid-template-columns: 1fr;
  }
  .villa-page .service-page-hero {
    min-height: 560px;
  }
  .villa-page .service-page-hero h1 {
    font-size: 34px;
  }
  .villa-page .service-page-hero p {
    font-size: 17px;
  }
  .villa-page .hero-actions {
    align-items: stretch;
  }
  .villa-page .hero-actions .btn {
    flex: 1 1 220px;
  }
  .villa-page .image-band,
  .villa-page .check-columns,
  .villa-page .benefit-grid,
  .villa-page .style-grid,
  .villa-page .related-grid {
    grid-template-columns: 1fr;
  }
  .villa-page .pricing-table,
  .villa-page .pricing-table thead,
  .villa-page .pricing-table tbody,
  .villa-page .pricing-table tr,
  .villa-page .pricing-table th,
  .villa-page .pricing-table td {
    display: block;
    width: 100%;
  }
  .villa-page .pricing-table thead {
    display: none;
  }
  .villa-page .pricing-table tr {
    margin-bottom: 14px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.05);
  }
  .villa-page .pricing-table td {
    border: 0;
    border-bottom: 1px solid var(--line);
    white-space: normal;
  }
  .villa-page .pricing-table td:first-child {
    background: var(--blue);
    color: #fff;
    font-weight: 700;
  }
  .villa-page .service-section,
  .villa-page .villa-cta-panel {
    padding: 24px;
  }
}

@media (max-width: 520px) {
  .villa-page .wrap {
    width: min(100% - 28px, 1360px);
  }
  .villa-page .service-page-hero {
    min-height: 680px;
  }
  .villa-page .service-page-hero h1 {
    font-size: 31px;
  }
  .villa-page .service-page-hero p,
  .villa-page .lead-text {
    font-size: 16px;
  }
  .villa-page .hero-actions .btn {
    width: 100%;
    flex-basis: 100%;
  }
  .villa-page .trust-strip span {
    width: 100%;
  }
  .villa-page .image-band img,
  .villa-page .image-stack img {
    min-height: 220px;
  }
  .villa-page .image-stack {
    grid-template-columns: 1fr;
  }
  .villa-page .service-section,
  .villa-page .villa-cta-panel,
  .villa-page .benefit-card,
  .villa-page .style-card,
  .villa-page .related-grid a {
    padding: 18px;
  }
  .villa-page .service-main h2 {
    font-size: 25px;
  }
  .villa-page .process-list li {
    padding-left: 58px;
  }
  .villa-page .process-list li::before {
    left: 14px;
  }
  .gallery-page .gallery-grid {
    gap: 12px;
  }
  .projects-page .portfolio-images {
    grid-template-columns: 1fr;
  }
  .projects-page .portfolio-images img {
    height: 240px;
  }
  .approvals-page .doc-grid {
    grid-template-columns: 1fr;
  }
  .approvals-page .approval-card {
    grid-template-columns: 1fr;
  }
  .approvals-page .approval-card img {
    height: 180px;
  }
}

@media (max-width: 1024px) {
  .bathroom-page .service-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bathroom-page .service-sidebar {
    position: static;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }
  .bathroom-page .service-page-hero {
    min-height: 560px;
  }
  .bathroom-page .service-page-hero h1 {
    max-width: 760px;
  }
  .image-band {
    grid-template-columns: 1fr 1fr;
  }
  .image-stack img {
    min-height: 146px;
  }
}

@media (max-width: 900px) {
  .stats-layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .bathroom-page .service-page-hero .wrap {
    width: min(100% - 36px, 760px);
  }
  .image-band {
    grid-template-columns: 1fr;
  }
  .image-band img {
    min-height: 260px;
  }
  .image-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .check-columns {
    grid-template-columns: 1fr;
  }
}
.service-cta {
  background: #0f0f0f;
  color: #fff;
  padding: 52px 0;
}
.service-cta .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.service-cta h2 {
  margin: 0 0 8px;
  font-size: 30px;
}
.service-cta p {
  margin: 0;
  max-width: 700px;
}

@media (max-width: 1200px) {
  .nav { height: auto; min-height: 82px; padding: 14px 24px; flex-wrap: wrap; gap: 12px; }
  .brand { flex: 0 0 auto; margin-left: 0; padding-left: 0; }
  .brand img { height: 74px; max-width: 195px; }
  .menu-toggle { display: inline-flex; margin-left: auto; }
  .menu {
    order: 5;
    flex: 0 0 100%;
    width: 100%;
    display: none;
    overflow: visible;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    background: #fff;
    padding: 6px 20px 14px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 16px 30px rgba(0,0,0,.08);
    white-space: normal;
    font-size: 17px;
    font-weight: 500;
  }
  .nav.menu-open .menu {
    display: flex;
    max-height: 62vh;
    max-height: 62dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    animation: menu-panel-in .22s ease;
  }
  @keyframes menu-panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .menu a,
  .menu span {
    display: block;
    padding: 13px 6px;
    border-radius: 8px;
  }
  .menu a::after,
  .menu span::after { content: none; }
  .menu a:hover,
  .menu span:hover,
  .has-dropdown:hover > span,
  .has-dropdown:hover > a {
    background: var(--light);
  }
  .menu > a,
  .menu > .has-dropdown {
    border-bottom: 1px solid var(--line);
  }
  .menu > a:last-child,
  .menu > .has-dropdown:last-child {
    border-bottom: 0;
  }
  .has-dropdown { width: 100%; }
  .has-dropdown > span::before,
  .has-dropdown > a::before {
    display: none;
  }
  .dropdown,
  .project-drop {
    position: static;
    display: grid;
    min-width: 0;
    grid-template-columns: 1fr;
    background: var(--light);
    border: 0;
    border-left: 2px solid var(--blue);
    border-radius: 8px;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    margin: 2px 0 8px 12px;
    padding: 6px 0 6px 14px;
  }
  .dropdown a {
    padding: 8px 0;
    font-size: 15px;
    border-radius: 0;
  }
  .estimate {
    order: 4;
    align-self: center;
    margin-right: 0;
    min-width: 210px;
    min-height: 46px;
    padding: 0 18px;
    font-size: 15px;
  }
}

@media (max-width: 1200px) {
  .promise-grid { grid-template-columns: repeat(3, 1fr); }
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
  .consult-form { grid-column: 1 / -1; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .project-row img {
    flex-basis: 265px;
    width: 265px;
    height: 331px;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
  }
  .hero {
    min-height: 700px;
  }
  .hero > img,
  .hero > video {
    height: 700px;
  }
  .hero-copy {
    top: 42%;
    width: min(520px, calc(100% - 48px));
  }
  .header-form {
    top: auto;
    right: 24px;
    bottom: 34px;
    transform: none;
  }
}

/* Phones and portrait tablets: the video fills the hero and the copy and form
   sit over it. A vertical scrim replaces the desktop side-gradient so white
   text stays readable whatever frame the clip is on. */
@media (max-width: 1020px) {
  .hero {
    min-height: 0;
    height: auto;
    background: #fff;
    /* top padding clears the 16:9 clip (56.25% of the width) so the copy and
       form sit on the white panel below it rather than over the video */
    padding: calc(56.25vw + 26px) 18px 32px;
  }
  .hero::after { display: none; }
  /* the element's own backdrop, seen around a contained frame - white, not black */
  .hero > video,
  .hero > img {
    background: #fff;
  }
  .hero-copy,
  .hero-copy h1,
  .hero-copy p {
    color: var(--text);
    text-shadow: none;
  }
  .hero > img,
  .hero > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    /* contain, not cover: the whole frame stays visible at full screen width
       instead of being zoomed in to fill the tall portrait hero */
    object-fit: contain;
    object-position: top center;
  }
  .hero-copy {
    position: relative;
    z-index: 1;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 620px;
    margin: 0 auto 26px;
    padding: 0;
  }
  .header-form {
    position: relative;
    z-index: 2;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
  }
}

@media (max-width: 760px) {
  /* ticker and social icons share one row so the bar stays slim */
  .topbar-inner { flex-wrap: nowrap; justify-content: space-between; gap: 12px; padding: 3px 0; }
  .ticker-set { gap: 18px; padding-right: 18px; }
  .social { gap: 6px; }
  .social img { width: 18px; height: 18px; }
  .nav { padding: 12px 18px; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand img { height: 68px; max-width: 175px; }
  .menu-toggle { margin-left: 0; }
  .estimate {
    order: 3;
    width: 100%;
    margin-top: 10px;
  }
  .menu {
    order: 4;
    font-size: 17px;
  }
  .hero p { font-size: 17px; }
  .header-form { padding: 22px; }
  .promise-grid,
  .stats,
  .service-grid,
  .review-grid,
  .footer-grid,
  .trust-grid,
  .stats-layout,
  .split,
  .two-col,
  .trust-intro .wrap {
    grid-template-columns: 1fr;
  }
  .section { padding: 52px 0; }
  .service-card { min-height: auto; height: auto; }
  .service-card img { height: auto; min-height: 240px; aspect-ratio: 4 / 3; }
  .split-img, .split-img.tall { height: 420px; }
  .project-row {
    gap: 20px;
  }
  .project-row img {
    flex-basis: 285px;
    width: 285px;
    height: 356px;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
  }
  .review-grid p { min-height: 0; }
  .trust-grid article { grid-template-columns: 1fr; }
  .trust-grid img {
    grid-row: auto;
    height: 220px;
    min-height: 220px;
  }
  .trust-grid p {
    grid-column: auto;
  }
  .partner-grid img {
    flex-basis: 138px;
    width: 138px;
    max-height: 100px;
  }
  .service-layout,
  .service-cta .wrap {
    grid-template-columns: 1fr;
    display: grid;
  }
  .service-sidebar {
    position: static;
  }
  .service-gallery {
    grid-template-columns: 1fr;
  }
  .bathroom-page .service-page-hero {
    min-height: 560px;
  }
  .bathroom-page .service-page-hero h1 {
    font-size: 34px;
  }
  .bathroom-page .service-page-hero p {
    font-size: 17px;
  }
  .hero-actions {
    align-items: stretch;
  }
  .bathroom-page .hero-actions .btn {
    flex: 1 1 220px;
  }
  .image-band,
  .check-columns,
  .benefit-grid,
  .style-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }
  .bathroom-page .pricing-table,
  .bathroom-page .pricing-table thead,
  .bathroom-page .pricing-table tbody,
  .bathroom-page .pricing-table tr,
  .bathroom-page .pricing-table th,
  .bathroom-page .pricing-table td {
    display: block;
    width: 100%;
  }
  .bathroom-page .pricing-table thead {
    display: none;
  }
  .bathroom-page .pricing-table tr {
    margin-bottom: 14px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.05);
  }
  .bathroom-page .pricing-table td {
    border: 0;
    border-bottom: 1px solid var(--line);
    white-space: normal;
  }
  .bathroom-page .pricing-table td:first-child {
    background: var(--blue);
    color: #fff;
    font-weight: 700;
  }
  .bathroom-page .pricing-table td:nth-child(2)::before {
    content: "Typical range: ";
    font-weight: 700;
  }
  .bathroom-page .pricing-table td:nth-child(3)::before {
    content: "Includes: ";
    font-weight: 700;
  }
  .service-section,
  .bathroom-cta-panel {
    padding: 24px;
  }
}

@media (max-width: 760px) {
  .renovations .service-card { min-height: auto; height: auto; }
  .renovations .service-card img { height: auto; min-height: 220px; aspect-ratio: 4 / 3; }
  .trust-intro .btn {
    min-width: 0;
    width: 100%;
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  .bathroom-page .wrap {
    width: min(100% - 28px, 1360px);
  }
  .bathroom-page .service-page-hero {
    min-height: 680px;
  }
  .bathroom-page .service-page-hero h1 {
    font-size: 31px;
  }
  .bathroom-page .service-page-hero p,
  .lead-text {
    font-size: 16px;
  }
  .bathroom-page .hero-actions .btn {
    width: 100%;
    flex-basis: 100%;
  }
  .trust-strip span {
    width: 100%;
  }
  .image-band img,
  .image-stack img {
    min-height: 220px;
  }
  .image-stack {
    grid-template-columns: 1fr;
  }
  .service-section,
  .bathroom-cta-panel,
  .benefit-card,
  .style-card,
  .related-grid a {
    padding: 18px;
  }
  .service-main h2 {
    font-size: 25px;
  }
  .process-list li {
    padding-left: 58px;
  }
  .process-list li::before {
    left: 14px;
  }
}

/* ==========================================================================
   Premium UI layer
   Typography, depth, motion and accessibility polish.
   Appended last so it refines the base styles without altering layout widths.
   ========================================================================== */

:root {
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(16, 24, 40, .05);
  --shadow: 0 10px 26px rgba(16, 24, 40, .08);
  --shadow-lg: 0 20px 48px rgba(16, 24, 40, .13);
  --ring: 0 0 0 3px rgba(0, 109, 180, .28);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Typography ---------------------------------------------------------- */

h1, h2, h3,
.stats b,
.projects-page .summary-card b {
  font-family: var(--font-menu);
  letter-spacing: -.015em;
}
h1 { line-height: 1.08; }
h2, h3 { line-height: 1.25; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 13px;
}
.lead-text { line-height: 1.5; }

/* --- Usability: keyboard focus, anchor offset, smooth scroll -------------- */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.menu-toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}
.site-header a:focus-visible,
.footer a:focus-visible,
.topbar a:focus-visible {
  outline-offset: 2px;
}
/* keep the sticky header from covering anchor targets such as #consultation */
[id]:target {
  scroll-margin-top: 130px;
}
@media (prefers-reduced-motion: no-preference) {
  html, body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
}

/* --- Buttons ------------------------------------------------------------- */

.btn,
.estimate,
.call-option,
.whatsapp,
.menu-toggle {
  border-radius: 10px;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), box-shadow .2s var(--ease),
              transform .2s var(--ease);
}
.btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: 0 10px 22px rgba(0, 74, 136, .26);
  transform: translateY(-2px);
}
.btn.dark:hover {
  background: #000;
  border-color: #000;
  box-shadow: var(--shadow);
}
.btn.outline-light:hover {
  background: rgba(255, 255, 255, .22);
  border-color: #fff;
  box-shadow: none;
}
.btn:active,
.estimate:active { transform: translateY(0); }
.call-option:hover {
  background: var(--blue);
  color: #fff;
}
.inquiry-fab {
  position: fixed;
  right: 22px;
  bottom: 162px;
  z-index: 9999;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  background: #EF2557;
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  border-radius: 4px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.inquiry-fab img {
  width: 28px;
  height: 28px;
  display: block;
  filter: brightness(0) invert(1);
}
.inquiry-fab:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 16px 32px rgba(19,23,20,.38);
}
@media (max-width: 760px) {
  .inquiry-fab { right: 14px; bottom: 146px; width: 52px; height: 52px; }
  .inquiry-fab img { width: 24px; height: 24px; }
}
.call-fab:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 16px 32px rgba(0,109,180,.38);
}
.whatsapp:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 16px 32px rgba(32, 180, 85, .38);
}
@media (max-width: 760px) {
  .call-fab { right: 14px; bottom: 80px; width: 52px; height: 52px; }
  .call-fab img { width: 28px; height: 28px; }
  .whatsapp { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .whatsapp img { width: 28px; height: 28px; }
}
.service-sidebar button:hover,
.consult-form button:hover,
.header-form button:hover {
  background: var(--navy);
  box-shadow: 0 10px 22px rgba(0, 74, 136, .24);
}

/* --- Cards: one consistent radius, softer depth, gentle hover lift -------- */

.service-section,
.villa-page .service-section,
.benefit-card,
.villa-page .benefit-card,
.style-card,
.villa-page .style-card,
.related-grid a,
.villa-page .related-grid a,
.review-grid article,
.promise article,
.trust-grid article,
.projects-page .summary-card,
.projects-page .portfolio-card,
.approvals-page .approval-summary article,
.approvals-page .approval-card,
.faq-list details,
.villa-page .faq-list details,
.process-list li,
.villa-page .process-list li,
.experience-table-wrap,
.consult-form,
.header-form,
.service-sidebar {
  border-radius: var(--radius);
}
.service-section,
.villa-page .service-section {
  box-shadow: var(--shadow-sm);
}
.benefit-card,
.villa-page .benefit-card,
.style-card,
.villa-page .style-card,
.related-grid a,
.villa-page .related-grid a,
.review-grid article,
.projects-page .summary-card,
.approvals-page .approval-summary article {
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
.benefit-card:hover,
.villa-page .benefit-card:hover,
.style-card:hover,
.villa-page .style-card:hover,
.related-grid a:hover,
.villa-page .related-grid a:hover,
.review-grid article:hover,
.projects-page .summary-card:hover,
.approvals-page .approval-summary article:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #d6e6f2;
}
.trust-grid article,
.projects-page .portfolio-card,
.approvals-page .approval-card {
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.trust-grid article:hover,
.projects-page .portfolio-card:hover,
.approvals-page .approval-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.promise article {
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.promise article:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
  border-color: #d6e6f2;
}

/* --- Imagery and service cards ------------------------------------------- */

.service-card {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.service-card span { border-radius: var(--radius-sm); }
.split-img,
.image-band img,
.image-stack img,
.service-gallery img,
.gallery-page .gallery-grid img {
  border-radius: var(--radius);
}

/* --- Forms: comfortable fields with an obvious focus state --------------- */

.header-form input,
.header-form select,
.header-form textarea,
.consult-form input,
.consult-form select,
.consult-form textarea,
.service-sidebar input,
.service-sidebar select,
.service-sidebar textarea {
  border-radius: var(--radius-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.header-form input:focus,
.header-form select:focus,
.header-form textarea:focus,
.consult-form input:focus,
.consult-form select:focus,
.consult-form textarea:focus,
.service-sidebar input:focus,
.service-sidebar select:focus,
.service-sidebar textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: var(--ring);
}
.header-form input::placeholder,
.consult-form input::placeholder,
.service-sidebar input::placeholder,
.header-form textarea::placeholder,
.consult-form textarea::placeholder,
.service-sidebar textarea::placeholder {
  color: #8b8b8b;
}
.consult-form,
.header-form,
.service-sidebar {
  box-shadow: var(--shadow);
}

/* --- FAQ accordions ------------------------------------------------------ */

.faq-list details,
.villa-page .faq-list details {
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.faq-list details:hover,
.villa-page .faq-list details:hover {
  border-color: #cfe2f0;
  box-shadow: var(--shadow-sm);
}
.faq-list details[open],
.villa-page .faq-list details[open] {
  border-color: var(--blue);
  box-shadow: var(--shadow-sm);
}
.faq-list summary,
.villa-page .faq-list summary {
  transition: color .15s var(--ease);
}
.faq-list summary:hover { color: var(--navy); }

/* --- Tables -------------------------------------------------------------- */

.pricing-table,
.villa-page .pricing-table {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.experience-table-wrap { box-shadow: var(--shadow-sm); }

/* --- Links: clearer hover feedback --------------------------------------- */

.footer a:not(.btn),
.review-link,
.professionals a {
  transition: color .15s var(--ease), opacity .15s var(--ease);
}
.footer a:not(.btn):hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-social a,
.social a {
  transition: transform .18s var(--ease);
}
.footer-social a:hover,
.social a:hover { transform: translateY(-2px); }
.review-link:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* --- Comfortable tap targets on touch screens ---------------------------- */

@media (max-width: 760px) {
  .footer a:not(.btn) { padding: 4px 0; }
  .footer-contact .contact-item { padding: 4px 0; }
}

/* --- Gallery cards -------------------------------------------------------
   Each photo sits in its own shadowed card. The grid keeps one aspect ratio
   per section so every row aligns: square for the 450x450 project thumbnails,
   3:4 for the portrait bathroom shots.
   ------------------------------------------------------------------------ */

.gallery-page .gallery-card {
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
.gallery-page .gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: #d6e6f2;
}
.gallery-page .gallery-grid img,
.gallery-page .gallery-card img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  background: #f5f5f5;
}
.gallery-page .gallery-grid.portrait img {
  aspect-ratio: 3 / 4;
}
.gallery-page .gallery-grid.landscape img {
  aspect-ratio: 3 / 2;
}
.gallery-page .gallery-grid.wide img {
  aspect-ratio: 6 / 5;
}

/* two across on phones and small tablets so 34 photos stay browsable */
@media (max-width: 900px) {
  .gallery-page .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Button icons --------------------------------------------------------
   Icons are applied as CSS masks tinted with currentColor, so a single set
   works on blue, dark and outline-light buttons without recolouring assets.
   The icon is chosen from the button's destination, so it stays correct even
   if the label wording changes. Decorative only: labels already carry meaning.
   ------------------------------------------------------------------------ */

.btn,
.estimate,
.call-option,
.whatsapp-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.whatsapp-form button[type="submit"] { width: 100%; }

.btn::before,
.estimate::before,
.call-option::before,
.whatsapp-form button[type="submit"]::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("assets/quote-icon.svg") center / contain no-repeat;
  mask: url("assets/quote-icon.svg") center / contain no-repeat;
}

/* contact first, so a contact-us link that opens the booking form still
   gets the calendar icon from the more relevant rule below */
.btn[href*="contact-us"]::before {
  -webkit-mask-image: url("assets/email-icon.svg");
  mask-image: url("assets/email-icon.svg");
}

/* booking, consultations and site visits */
.btn[href*="#consultation"]::before {
  -webkit-mask-image: url("assets/calendar-icon.svg");
  mask-image: url("assets/calendar-icon.svg");
}

/* phone */
.btn[href^="tel:"]::before,
.call-option::before {
  -webkit-mask-image: url("assets/call-icon.svg");
  mask-image: url("assets/call-icon.svg");
}

/* whatsapp */
.btn[href*="wa.me"]::before,
.whatsapp-form button[type="submit"]::before {
  -webkit-mask-image: url("assets/whatsapp-icon.svg");
  mask-image: url("assets/whatsapp-icon.svg");
}

/* header estimate button */
.estimate::before {
  width: 19px;
  height: 19px;
  -webkit-mask-image: url("assets/estimate-icon.svg");
  mask-image: url("assets/estimate-icon.svg");
}

/* keep the icon from crowding the label on the narrowest phones */
@media (max-width: 380px) {
  .btn::before,
  .call-option::before,
  .whatsapp-form button[type="submit"]::before {
    width: 16px;
    height: 16px;
  }
  .btn,
  .call-option,
  .whatsapp-form button[type="submit"] { gap: 8px; }
}

/* --- Location pages: breadcrumb and key-facts table ---------------------- */

.breadcrumb {
  margin-bottom: 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, .88);
}
.breadcrumb a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumb a:hover { color: #cfe6f7; }
.breadcrumb span { padding: 0 6px; }
.breadcrumb [aria-current="page"] {
  padding: 0;
  font-weight: 600;
  color: #fff;
}

.key-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}
.key-facts > div {
  padding: 14px 16px;
  background: #f7fbfe;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm);
}
.key-facts dt {
  margin-bottom: 4px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.key-facts dd {
  margin: 0;
  color: #222;
  font-size: 15px;
}

@media (max-width: 760px) {
  .key-facts { grid-template-columns: 1fr; }
}

/* --- Services hub page --------------------------------------------------- */

.section-heading {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.2;
}
.section-intro {
  max-width: 760px;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 17px;
}

.service-index-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.service-index-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
.service-index-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #d6e6f2;
}
.service-index-media { display: block; overflow: hidden; }
.service-index-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .35s var(--ease);
}
.service-index-card:hover .service-index-media img { transform: scale(1.05); }
.service-index-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}
.service-index-body h3 {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.25;
}
.service-index-body h3 a { color: var(--text); }
.service-index-card:hover .service-index-body h3 a { color: var(--blue); }
.service-index-body p {
  margin: 0 0 16px;
  color: #444;
  font-size: 15px;
}
.service-index-link {
  margin-top: auto;
  color: var(--blue);
  font-weight: 700;
  font-size: 14px;
}
.service-index-link::after {
  content: " \2192";
  transition: margin-left .2s var(--ease);
}
.service-index-card:hover .service-index-link::after { margin-left: 4px; }

.services-page .related-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .service-index-grid,
  .services-page .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .service-index-grid,
  .services-page .related-grid {
    grid-template-columns: 1fr;
  }
  .section-heading { font-size: 25px; }
}

/* --- Google Maps embed ---------------------------------------------------
   The embed carries fixed width/height attributes, so it is overridden here
   to fill its container and hold a 16:9 ratio at every screen size.
   ------------------------------------------------------------------------ */

.map-embed {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--light);
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}
.map-actions {
  margin: 18px 0 0;
}

@media (max-width: 760px) {
  .map-embed iframe { aspect-ratio: 4 / 3; }
  .map-actions .btn { width: 100%; }
}

/* --- Footer map ----------------------------------------------------------
   Compact embed sitting under the Contact column CTA on every page.
   Lazy-loaded so the third-party frame only fetches when scrolled into view.
   ------------------------------------------------------------------------ */

.footer-map {
  margin-top: 16px;
}
.footer-map iframe {
  display: block;
  width: 100%;
  height: 160px;
  border: 0;
  border-radius: var(--radius-sm);
  background: #1c1f1d;
}

@media (max-width: 760px) {
  .footer-map iframe { height: 180px; }
}

/* --- Comparison table on small screens -----------------------------------
   The three-column table needs 880px, so on phones each row becomes its own
   card: category as the header, then the two columns stacked and labelled.
   ------------------------------------------------------------------------ */

@media (max-width: 760px) {
  .experience-table-wrap {
    overflow-x: visible;
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 28px;
  }
  .experience-table {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  .experience-table thead { display: none; }
  .experience-table,
  .experience-table tbody,
  .experience-table tbody > tr,
  .experience-table tbody > tr > th,
  .experience-table tbody > tr > td {
    display: block;
    width: 100%;
  }
  .experience-table tbody > tr {
    overflow: hidden;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }
  .experience-table tbody > tr > th {
    width: auto;
    padding: 12px 16px;
    border: 0;
    background: var(--blue);
    color: #fff;
    font-size: 15px;
    letter-spacing: .04em;
  }
  .experience-table tbody > tr > td {
    padding: 14px 16px;
    border: 0;
    border-top: 1px solid var(--line);
  }
  /* label each column now that the header row is hidden */
  .experience-table tbody > tr > td::before {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .experience-table tbody > tr > td:nth-child(2)::before {
    content: "Stamp Technical Services";
    color: var(--blue);
  }
  .experience-table tbody > tr > td:nth-child(3)::before {
    content: "Typical experience";
    color: var(--muted);
  }
  .experience-table tbody > tr > td:nth-child(3) { background: #fafafa; }
}

/* --- Footer services in two columns --------------------------------------
   Fifteen links made this column far longer than its neighbours; splitting it
   in two balances the footer. Structure is identical on every page, so this
   targets the third footer column without needing markup changes.
   ------------------------------------------------------------------------ */

.footer-grid > div:nth-child(3) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
  align-content: start;
}
.footer-grid > div:nth-child(3) h3 {
  grid-column: 1 / -1;
}
/* one column where the cell is too narrow for two: the four-column footer
   between 761-1180px, and the smallest phones */
@media (min-width: 761px) and (max-width: 1200px) {
  .footer-grid > div:nth-child(3) { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .footer-grid > div:nth-child(3) { grid-template-columns: 1fr; }
}

/* --- How It Works: four alternating stages -------------------------------
   Image and copy swap sides down the page, each stage led by a large step
   number. Colours come from the existing tokens, nothing new introduced.
   ------------------------------------------------------------------------ */

.hiw-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.hiw-jump a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease);
}
.hiw-jump a span {
  color: #7cc6f2;
  font-weight: 700;
}
.hiw-jump a:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.hiw-jump a:hover span { color: #fff; }

.hiw-step { padding: 76px 0; }
.hiw-step.alt { background: var(--light); }

.hiw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}
.hiw-step.reverse .hiw-media { order: 2; }

.hiw-media img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.hiw-num {
  margin: 0;
  color: var(--blue);
  font-family: var(--font-menu);
  font-size: 70px;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.03em;
  opacity: .22;
}
.hiw-body h2 {
  margin: 6px 0 14px;
  font-size: 40px;
  line-height: 1.1;
}
.hiw-lead {
  margin: 0 0 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  color: #333;
  font-size: 18px;
  font-weight: 500;
}
.hiw-sub { margin-bottom: 20px; }
.hiw-sub:last-child { margin-bottom: 0; }
.hiw-sub h3 {
  margin: 0 0 6px;
  padding-left: 16px;
  position: relative;
  color: var(--text);
  font-size: 18px;
}
.hiw-sub h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.hiw-sub p {
  margin: 0;
  padding-left: 16px;
  color: #444;
  font-size: 15.5px;
}

.hiw-assurance { background: #fff; }

@media (max-width: 1024px) {
  .hiw-grid { gap: 38px; }
  .hiw-media img { height: 420px; }
  .hiw-body h2 { font-size: 34px; }
  .hiw-num { font-size: 58px; }
}

@media (max-width: 860px) {
  .hiw-step { padding: 52px 0; }
  /* stack, and keep the image above the copy on every stage */
  .hiw-grid { grid-template-columns: 1fr; gap: 26px; }
  .hiw-step.reverse .hiw-media { order: 0; }
  .hiw-media img { height: 280px; }
  .hiw-body h2 { font-size: 29px; }
  .hiw-num { font-size: 50px; }
  .hiw-lead { font-size: 17px; }
  .hiw-jump a { padding: 9px 15px; font-size: 14px; }
}

/* --- Gallery page: uniform four-across grid + lightbox --------------------
   Every category renders the same square tile so all rows align, and each
   tile opens the full uncropped photo in a lightbox. Colours are the existing
   tokens only: --light for the alternating bands, --blue for focus rings.
   ------------------------------------------------------------------------ */

.gallery-page .gal-hero p {
  max-width: 720px;
}

.gallery-page .gallery-section.alt {
  background: var(--light);
}
.gallery-page .gallery-section h2 {
  margin-bottom: 22px;
}

.gallery-page .gallery-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* the tile is a button so keyboard users can open the lightbox */
.gallery-page button.gallery-card {
  display: block;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
}
.gallery-page button.gallery-card:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.gallery-page .gallery-grid img,
.gallery-page .gallery-card img {
  aspect-ratio: 1 / 1;
  transition: transform .35s var(--ease);
}
.gallery-page .gallery-card:hover img {
  transform: scale(1.04);
}

@media (max-width: 1280px) {
  .gallery-page .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .gallery-page .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}
@media (max-width: 420px) {
  .gallery-page .gallery-grid {
    gap: 10px;
  }
}

/* --- Lightbox ----------------------------------------------------------- */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: rgba(8, 14, 20, .92);
}
.lightbox:not([hidden]) {
  display: flex;
}
body.lb-open {
  overflow: hidden;
}

.lb-stage {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.lb-stage img {
  display: block;
  max-width: min(1100px, 88vw);
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: #0d1319;
}
.lb-count {
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
}

.lightbox button {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lightbox button:hover {
  background: var(--blue);
  border-color: var(--blue);
}
.lightbox button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.lb-nav {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  font-size: 30px;
  padding-bottom: 4px;
}
.lb-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  font-size: 28px;
}

@media (max-width: 700px) {
  .lightbox {
    padding: 12px;
    gap: 4px;
  }
  .lb-stage img {
    max-width: 92vw;
    max-height: 70vh;
  }
  .lb-nav {
    width: 42px;
    height: 42px;
    font-size: 24px;
  }
  .lb-close {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-page .gallery-card:hover img {
    transform: none;
  }
}

/* --- Projects page: location cards + before/after cards ------------------
   Three across on desktop, photo on top, name underneath. The location card
   is a whole-card link through to that area's page. Colours are the existing
   tokens only: --blue on hover, --light for the alternating band.
   ------------------------------------------------------------------------ */

.projects-page .section-intro {
  margin: -6px 0 26px;
  max-width: 760px;
  color: var(--muted);
}
.projects-page .alt-band {
  background: var(--light);
}

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

.location-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
.location-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #d6e6f2;
}
.location-card:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.lc-media {
  display: block;
  overflow: hidden;
  background: #f5f5f5;
}
.lc-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.location-card:hover .lc-media img {
  transform: scale(1.05);
}

.lc-body {
  display: block;
  padding: 16px 18px 18px;
}
.lc-name {
  display: block;
  font-family: var(--font-menu);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  transition: color .2s var(--ease);
}
.location-card:hover .lc-name {
  color: var(--blue);
}
.lc-type {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}

/* before and after cards use the same shape: photo on top, text under it */
.projects-page .portfolio-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.projects-page .portfolio-card {
  display: flex;
  flex-direction: column;
}
.projects-page .pc-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #f5f5f5;
}
.projects-page .pc-media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.projects-page .pc-media figcaption {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.projects-page .pc-body {
  padding: 16px 18px 18px;
}
.projects-page .pc-body h3 {
  margin: 0 0 8px;
  padding: 0;
  font-size: 17px;
  line-height: 1.3;
}
.projects-page .pc-body p {
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 1100px) {
  .location-grid,
  .projects-page .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (max-width: 640px) {
  .location-grid,
  .projects-page .portfolio-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .location-card:hover .lc-media img {
    transform: none;
  }
}

/* --- Header logo: wide lockup -------------------------------------------
   The header now carries the horizontal Stamp Technical Services Pvt. Ltd. lockup
   (1920x550, so roughly 3.5:1). The earlier rules sized a square mark by
   height, which letterboxes a wide one, so width drives the size here and
   the height follows. Each nav tier gets its own width so the menu keeps the
   room it needs. The footer logo is a separate file and is not affected.
   ------------------------------------------------------------------------ */

.brand {
  flex: 0 0 auto;
  padding-left: 0;
}
.brand img {
  width: 262px;
  height: auto;
  max-width: none;
}

@media (max-width: 2040px) {
  .brand img { width: 226px; }
}

@media (max-width: 1920px) {
  .brand { flex-basis: auto; }
  .brand img { width: 218px; }
}

@media (max-width: 1700px) {
  .brand { padding-left: 0; }
  .brand img { width: 188px; }
}

@media (max-width: 1600px) {
  .brand { flex-basis: auto; padding-left: 0; }
  .brand img { width: 196px; }
}

@media (max-width: 1420px) {
  .brand { flex-basis: auto; padding-left: 0; }
  .brand img { width: 146px; }
}

/* hamburger tiers: the menu drops to its own row, so the logo can breathe */
@media (max-width: 1200px) {
  .brand img { width: 230px; }
}

@media (max-width: 760px) {
  .brand img { width: 186px; }
}

@media (max-width: 400px) {
  .brand img { width: 140px; }
}

/* a 300px-wide screen cannot hold the logo, both side clearances and the
   hamburger on one row at 140px. Inner pages run a slightly narrower wrap,
   so the nav padding, gap and button all tighten here too. */
@media (max-width: 340px) {
  .nav { padding-left: 10px; padding-right: 10px; gap: 8px; }
  .nav::before { flex-basis: 40px; }
  .menu-toggle { width: 40px; height: 40px; font-size: 22px; }
  .brand img { width: 116px; }
}

/* --- Menu button sits on the right ---------------------------------------
   On tablets the Get Free Estimate button shared the row and pushed the
   hamburger 246px in from the edge; on phones the button drops to its own
   row, so the hamburger takes the free space itself. Explicit order keeps
   the hamburger last on the row in both cases.
   ------------------------------------------------------------------------ */

@media (max-width: 1200px) {
  .estimate {
    order: 2;
    margin-left: auto;
  }
  .menu-toggle {
    order: 3;
    margin-left: 12px;
  }
  .menu {
    order: 5;
  }
}

@media (max-width: 760px) {
  .menu-toggle {
    order: 2;
    margin-left: auto;
  }
  .estimate {
    order: 4;
    margin-left: 0;
  }
}

/* --- Centred logo on tablet and mobile -----------------------------------
   A spacer the exact width of the hamburger sits on the left of the row, so
   the logo's auto margins land it on the true centre line of the header
   rather than the centre of whatever space is left over. The Get Free
   Estimate button moves to its own row underneath, which is the only way the
   logo can hold the centre on a 768px tablet without colliding with it.
   ------------------------------------------------------------------------ */

@media (max-width: 1200px) {
  .nav::before {
    content: "";
    order: 0;
    flex: 0 0 44px;   /* matches .menu-toggle width */
    height: 1px;
  }
  .brand {
    order: 1;
    margin-left: auto;
    margin-right: auto;
  }
  .menu-toggle {
    order: 2;
    margin-left: 0;
  }
  .estimate {
    order: 3;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .menu {
    order: 5;
  }
}



/* --- Phone and tablet hero: no reserved band under the clip --------------
   The hero reserved 56.25vw of top padding for a 16:9 clip and dropped the
   video into it absolutely. The clip is not 16:9 - the WebM is 2.56:1 - so
   contain-fitting it left 17vw of white between the picture and the
   headline, widening as the screen widened (74px at 390, 187px at 1020).
   The video now sits in the flow at its own height, full width, so the copy
   follows it directly whatever aspect ratio the playing source has.
   Desktop is untouched: there the video sits behind the copy.
   ------------------------------------------------------------------------ */

@media (max-width: 1020px) {
  .hero {
    padding: 0 18px 32px;
  }
  .hero > video,
  .hero > img {
    position: static;
    inset: auto;
    display: block;
    width: calc(100% + 36px);
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0 -18px 14px;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
  }
  .hero-copy h1 {
    margin-bottom: 10px;
  }
}

/* --- Services dropdown fills column by column ---------------------------
   Row-wise flow put items 1, 4, 7, 10 in the first column. Filling by column
   instead keeps the four main renovation services together down the left,
   with the remaining eight in the next two columns.
   ------------------------------------------------------------------------ */

.services-drop {
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
}

/* the collapsed mobile menu stacks the same links in one column */
@media (max-width: 1200px) {
  .services-drop {
    grid-auto-flow: row;
    grid-template-rows: auto;
  }
}

/* --- Section heading with an action ------------------------------------- */

.projects .section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-bottom: 18px;
}
.projects .section-head h2 {
  margin: 0;
}

@media (max-width: 560px) {
  .projects .section-head {
    justify-content: flex-start;
  }
  .projects .section-head .btn {
    width: 100%;
  }
}

/* --- Gallery strips: each category scrolls itself ------------------------
   Two identical sets slide by 50%, so the loop is seamless - the same
   technique as the homepage project marquee. Duration is set per section
   from the photo count (4s each), which keeps every strip moving at the
   same speed whether it holds five photos or thirteen. Alternate sections
   run the other way.
   ------------------------------------------------------------------------ */

.gallery-marquee {
  overflow: hidden;
  /* let a lifted card's shadow show instead of being clipped */
  padding: 6px 0;
}
.gallery-track {
  display: flex;
  width: max-content;
  animation: gallery-scroll var(--gal-duration, 40s) linear infinite;
}
.gallery-marquee.reverse .gallery-track {
  animation-direction: reverse;
}
.gallery-set {
  display: flex;
  gap: 18px;
  padding-right: 18px;
}
@keyframes gallery-scroll {
  to { transform: translateX(-50%); }
}

/* stop while the visitor is choosing a photo to open */
.gallery-marquee:hover .gallery-track,
.gallery-marquee:focus-within .gallery-track {
  animation-play-state: paused;
}

.gallery-page .gallery-marquee .gallery-card {
  flex: 0 0 clamp(190px, 22vw, 300px);
}

@media (max-width: 700px) {
  .gallery-set { gap: 12px; padding-right: 12px; }
  .gallery-page .gallery-marquee .gallery-card { flex-basis: clamp(160px, 46vw, 240px); }
}

/* no motion: the strips hold still and scroll by hand instead */
@media (prefers-reduced-motion: reduce) {
  .gallery-track { animation: none; }
  .gallery-marquee { overflow-x: auto; }
  .gallery-set + .gallery-set { display: none; }
}

/* --- Video in a service page hero ---------------------------------------
   Same treatment as the still image it replaces: fills the hero behind the
   dark scrim, cropped to cover. The poster carries the first frame so the
   heading never sits on an empty box while the clip loads.
   ------------------------------------------------------------------------ */

.service-page-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}

/* --- Contact page: heading, details, one form ---------------------------
   No hero image and no in-page map. Two columns on desktop - details on the
   left, form on the right - stacking to one column on narrow screens.
   Colours are the existing tokens throughout.
   ------------------------------------------------------------------------ */

.contact-head {
  padding: 54px 0 0;
  background: #fff;
}
.contact-head h1 {
  margin: 0 0 12px;
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.1;
}
.contact-head p {
  margin: 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 18px;
}

.contact-body {
  padding-top: 38px;
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 46px;
  align-items: start;
}

.contact-details {
  display: grid;
  gap: 10px;
}
.contact-line {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  text-decoration: none;
  font-size: 15.5px;
  line-height: 1.5;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
a.contact-line:hover {
  border-color: #d6e6f2;
  box-shadow: var(--shadow-sm);
}
a.contact-line:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.contact-line img {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 2px;
}
.contact-line b {
  display: block;
  margin-bottom: 2px;
  color: var(--blue);
  font-family: var(--font-menu);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.contact-form {
  display: grid;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.contact-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}
.contact-form textarea {
  resize: vertical;
  min-height: 130px;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 109, 180, .14);
}
/* the shared .whatsapp-form rule stretches the submit button; here it sits
   at its own width under the fields */
.contact-form.whatsapp-form button[type="submit"] {
  width: auto;
  justify-self: start;
  min-width: 220px;
  height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  font-family: var(--font-menu);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s var(--ease);
}
.contact-form.whatsapp-form button[type="submit"]:hover {
  background: var(--navy);
}
.contact-form .form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.contact-form .call-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  justify-self: start;
  min-width: 220px;
  height: 52px;
  padding: 0 28px;
  border: 1px solid var(--blue);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--blue);
  font-family: var(--font-menu);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.contact-form .call-option.small {
  min-width: 132px;
  height: 52px;
  padding: 0 18px;
  font-size: 15px;
}
.contact-form .call-option::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("assets/call-icon.svg") center / contain no-repeat;
  mask: url("assets/call-icon.svg") center / contain no-repeat;
}
.contact-form .call-option:hover {
  background: var(--blue);
  color: #fff;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 560px) {
  .contact-head { padding-top: 36px; }
  .contact-form { padding: 20px; }
  .contact-form .field-row { grid-template-columns: 1fr; }
  .contact-form .form-actions { gap: 10px; }
  .contact-form.whatsapp-form button[type="submit"] { flex: 1 1 auto; min-width: 0; width: auto; }
  .contact-form .call-option.small { flex: 0 0 118px; min-width: 118px; padding: 0 14px; }
}

/* --- Contact page map ---------------------------------------------------
   Sits under the details and form, full content width. Kept plain so the
   page stays as minimal as the rest of it.
   ------------------------------------------------------------------------ */

.contact-map {
  margin-top: 42px;
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

@media (max-width: 900px) {
  .contact-map { margin-top: 30px; }
  .contact-map iframe { height: 300px; }
}

@media (max-width: 560px) {
  .contact-map iframe { height: 240px; }
}

/* --- Contact page: four cards, then image beside the form ---------------
   The cards span the full width above; underneath, a photo sits on the left
   of the form and stretches to match its height. Below 900px everything
   stacks and the photo drops to a fixed height above the form.
   ------------------------------------------------------------------------ */

.contact-grid {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-areas:
    "cards cards"
    "photo form";
  gap: 28px 46px;
}
.contact-cards {
  grid-area: cards;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.contact-cards .contact-line {
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
}
.contact-cards .contact-line img {
  margin-top: 0;
}

.contact-visual {
  grid-area: photo;
  align-self: stretch;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--light);
}
.contact-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}
.contact-form {
  grid-area: form;
}

@media (max-width: 1100px) {
  .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "cards" "photo" "form";
    gap: 24px;
  }
  .contact-visual img { min-height: 0; height: 260px; }
}

@media (max-width: 560px) {
  .contact-cards { grid-template-columns: 1fr; gap: 12px; }
  .contact-cards .contact-line { flex-direction: row; align-items: flex-start; }
  .contact-visual img { height: 210px; }
}

/* --- Contact cards: icons and larger text -------------------------------
   The shared icon files are solid white for the dark footer, so blue copies
   live alongside them for use on white cards. Plain images, no mask support
   needed, and the footer keeps its own white set.
   ------------------------------------------------------------------------ */

img.contact-icon {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  margin-top: 0;
  object-fit: contain;
}

.contact-cards .contact-line {
  font-size: 17px;
  line-height: 1.55;
}
.contact-cards .contact-line b {
  font-size: 14.5px;
  margin-bottom: 4px;
}

.contact-head p { font-size: 19px; }

.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 14px 15px;
  font-size: 16px;
}

@media (max-width: 560px) {
  img.contact-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .contact-cards .contact-line { font-size: 16px; }
}

/* --- Contact row height follows the photo -------------------------------
   The photo was cropped to the form's height. A ratio box inside it now
   reports the photo's full height to the grid, so the row is at least that
   tall and the form stretches to match. Where the form is the taller of the
   two the photo still fills its column rather than leaving a gap.
   ------------------------------------------------------------------------ */

.contact-visual {
  align-self: stretch;
  display: grid;
}
.contact-visual::before {
  content: "";
  grid-area: 1 / 1;
  aspect-ratio: 640 / 752;
}
.contact-visual img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.contact-form {
  align-self: stretch;
  align-content: space-between;
}

@media (max-width: 900px) {
  /* stacked: the photo goes back to a fixed band above the form */
  .contact-visual::before { display: none; }
  .contact-visual img { height: 260px; }
  .contact-form { align-content: start; }
}

@media (max-width: 560px) {
  .contact-visual img { height: 210px; }
}

/* --- Footer credit line -------------------------------------------------
   Sits under the footer columns, separated by a hairline rule. The footer's
   own bottom padding is trimmed so the strip does not float in space.
   ------------------------------------------------------------------------ */

.footer { padding-bottom: 0; }

.footer-credit {
  margin-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer-credit p {
  margin: 0;
  padding: 20px 0;
  color: #c9c9c9;
  font-size: 14px;
  text-align: center;
}

@media (max-width: 560px) {
  .footer-credit { margin-top: 24px; }
  .footer-credit p { padding: 16px 0; font-size: 13px; }
}

/* --- Plain page heading (no hero image) ---------------------------------- */

.page-head {
  padding: 54px 0 0;
  background: #fff;
}
.page-head h1 {
  margin: 0 0 12px;
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.1;
}
.page-head p {
  margin: 0;
  max-width: 720px;
  color: var(--muted);
  font-size: 19px;
}

/* the first strip follows the heading directly */
.page-head + .gallery-section {
  padding-top: 34px;
}

@media (max-width: 560px) {
  .page-head { padding-top: 36px; }
  .page-head p { font-size: 17px; }
  .page-head + .gallery-section { padding-top: 26px; }
}

/* --- Top bar: static, three items ---------------------------------------
   Replaces the scrolling ticker. Email, WhatsApp and the estimate link sit
   still on the left, social icons stay on the right. Below 760px the links
   centre on their own line above the icons.
   ------------------------------------------------------------------------ */

.topbar-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-width: 0;
  font-size: 14px;
}
.topbar-links a {
  color: #f2f2f2;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.topbar-links a:hover,
.topbar-links a:focus-visible {
  color: #fff;
  text-decoration: underline;
}
.topbar-links .tb-dot {
  color: rgba(255, 255, 255, .38);
  font-size: 12px;
}
.topbar-links .tb-cta {
  padding: 4px 0;
  border: 0;
  font-weight: 600;
}
.topbar-links .tb-cta:hover {
  color: #7cc6f2;
  text-decoration: underline;
  background: none;
}

@media (max-width: 760px) {
  .topbar-inner { flex-wrap: wrap; justify-content: center; }
  .topbar-links {
    order: 1;
    width: 100%;
    justify-content: center;
    gap: 6px 10px;
    font-size: 12.5px;
  }
  .topbar-links .tb-cta { padding: 3px 10px; }
  .social { order: 2; justify-content: center; }
}

@media (max-width: 420px) {
  .topbar-links .tb-dot { display: none; }
  .topbar-links { gap: 6px 12px; }
}

/* the bar has to stay slim on phones, so the label drops to just the number */
@media (max-width: 760px) {
  .topbar-links .tb-word { display: none; }
  .topbar-links { font-size: 12px; }
}

@media (max-width: 430px) {
  .topbar-links { font-size: 11.5px; gap: 4px 9px; }
  .topbar-links .tb-cta { padding: 3px 8px; }
}

/* --- Top bar: centred links, estimate is a label not a link -------------
   A three column track with an empty cell on the left mirrors the social
   icons on the right, so the links sit on the bar's true centre line.
   ------------------------------------------------------------------------ */

@media (min-width: 761px) {
  .topbar-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .topbar-inner::before {
    content: "";
  }
  .topbar-links {
    grid-column: 2;
    justify-content: center;
  }
  .social {
    grid-column: 3;
    justify-content: flex-end;
  }
}

/* the estimate reads as a label, so it takes no pointer and no hover state */
.topbar-links .tb-cta {
  cursor: default;
  color: #f2f2f2;
}
.topbar-links .tb-cta:hover {
  border-color: rgba(255, 255, 255, .45);
  background: none;
  color: #f2f2f2;
  text-decoration: none;
}

/* --- Bathroom design gallery cards -----------------------------------------
   Reuses gallery-card look on bathroom-design page (not just gallery-page).
   3-across desktop, 2 on tablet, 1 on phone. Same hover lift as gallery.
   ------------------------------------------------------------------------ */
.bathroom-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.bathroom-gallery-grid .gallery-card {
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
}
.bathroom-gallery-grid .gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #d6e6f2;
}
.bathroom-gallery-grid .gallery-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
@media (max-width: 900px) {
  .bathroom-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bathroom-gallery-grid { grid-template-columns: 1fr; }
}

/* Mobile: FABs become fixed bottom bar, page scrolls under - robust */
@media (max-width: 760px) {
  html body { padding-bottom: 76px !important; }
  html body .fab-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 99999 !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    background: #fff !important;
    border-top: 1px solid var(--line) !important;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.12) !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .fab-bar .call-fab,
  html body .fab-bar .whatsapp,
  html body .fab-bar .inquiry-fab {
    position: static !important;
    width: auto !important;
    flex: 1 1 0 !important;
    height: 48px !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    top: auto !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html body .fab-bar .call-fab img,
  html body .fab-bar .whatsapp img,
  html body .fab-bar .inquiry-fab img {
    width: 24px !important;
    height: 24px !important;
  }
}


/* All FABs same rounding */
.call-fab, .whatsapp, .inquiry-fab { border-radius: 12px !important; }

@media (max-width: 760px) {
  .service-grid,
  .service-index-grid,
  .benefit-grid,
  .style-grid,
  .related-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .service-card,
  .service-index-card,
  .benefit-card,
  .style-card,
  .related-grid a {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Keep the homepage service cards readable on narrow screens. */
@media (max-width: 760px) {
  .renovations .service-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .renovations .service-card {
    min-height: 280px;
    height: 280px;
  }
  .renovations .service-card img {
    min-height: 0;
    height: 280px;
    aspect-ratio: auto;
  }
  .renovations .service-card span {
    left: 16px;
    right: 16px;
    min-height: 48px;
    overflow-wrap: anywhere;
  }
}


/* Home popup - 3s delayed */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8,14,20,.72);
}
.popup-overlay[hidden] { display: none; }
body.popup-open { overflow: hidden; }
.popup-card {
  position: relative;
  width: min(420px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
}
.popup-card h2 { margin: 0 0 8px; color: var(--blue); font-size: 24px; }
.popup-card p { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.popup-form { display: grid; gap: 10px; }
.popup-form input,
.popup-form select,
.popup-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #fff;
}
.popup-form textarea { min-height: 80px; resize: vertical; }
.popup-form button[type="submit"] {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.popup-form .call-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--blue);
  border-radius: var(--radius-sm);
  color: var(--blue);
  font-weight: 700;
  text-transform: uppercase;
}

/* Our Projects dropdown pages gallery - 4:5 */
.location-page .gallery-grid img,
.location-page .gallery-card img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Location pages: form scrolls, gallery 4 per line, fill rest with images */
.location-page .service-sidebar {
  position: static !important;
  top: auto !important;
}
.location-page .gallery-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
@media (max-width: 900px) {
  .location-page .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  .location-page .gallery-grid { grid-template-columns: 1fr !important; }
}

/* Project Gallery on location pages - 100% width, reduced image size */
.project-gallery-full {
  width: 100%;
  background: transparent;
  padding: 48px 0 32px;
  margin-top: 72px;
  display: block;
  box-sizing: border-box;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.project-gallery-full .wrap {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.project-gallery-full h2 {
  font-size: 28px;
  margin: 0 0 8px;
  text-align: center;
}
.project-gallery-full p {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 18px;
}
.project-gallery-full .gallery-grid {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.location-page .gallery-grid img,
.location-page .gallery-card img {
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100%;
  object-fit: cover;
}
@media (max-width: 900px) {
  .project-gallery-full .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  .project-gallery-full .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .project-gallery-full { padding-left: 16px; padding-right: 16px; }
}

.project-gallery-full .gallery-card { background: transparent; border: 0; }

/* Dropdown hero - little blur */
.location-page .service-page-hero img {
  filter: blur(3.2px) brightness(0.88);
}

/* Projects page - larger cards 2 per line */
.projects-page .location-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
}
.projects-page .location-card .lc-media img {
  height: 320px !important;
  object-fit: cover;
}
.projects-page .location-card .lc-body {
  padding: 18px 20px !important;
}
.projects-page .location-card .lc-name {
  font-size: 20px !important;
}
.projects-page .portfolio-grid {
  grid-template-columns: 1fr !important;
  gap: 28px !important;
  max-width: 900px;
  margin: 0 auto;
}
.projects-page .portfolio-card .pc-media {
  aspect-ratio: 3 / 2 !important;
  min-height: 0 !important;
  overflow: hidden;
}
.projects-page .portfolio-card .pc-media img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
  display: block;
}
.projects-page .portfolio-card .pc-body {
  padding: 24px !important;
}
@media (max-width: 760px) {
  .projects-page .location-grid { grid-template-columns: 1fr !important; }
  .projects-page .portfolio-grid { grid-template-columns: 1fr !important; }
}

/* Before & After - split Before left After right */
.portfolio-card .pc-media {
  position: relative;
}
.portfolio-card .ba {
  position: absolute;
  top: 12px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(0,0,0,.78);
  color: #fff;
  line-height: 1;
}
.portfolio-card .ba.before { left: 12px; background: #111; }
.portfolio-card .ba.after { right: 12px; background: var(--blue, #006DB4); }
.portfolio-card .pc-media { cursor: zoom-in; }
/* Before & After popup gallery */
.ba-lightbox { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; }
.ba-lightbox.open { display: flex; }
.ba-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.88); }
.ba-lightbox-dialog { position: relative; width: min(1000px, 100%); max-height: 92vh; background: #111; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.ba-lightbox-imgwrap { position: relative; background: #000; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 2; height: auto; max-height: 70vh; overflow: hidden; }
.ba-lightbox-imgwrap img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #000; }
.ba-lightbox .ba.before { left: 16px; }
.ba-lightbox .ba.after { right: 16px; }
.ba-lightbox-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; color: #fff; }
.ba-lightbox-meta h3 { margin: 0; font-size: 18px; }
.ba-lightbox-meta p { margin: 2px 0 0; font-size: 14px; color: rgba(255,255,255,.75); }
.ba-lightbox-count { font-size: 14px; color: rgba(255,255,255,.75); white-space: nowrap; }
.ba-lightbox-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); font-size: 20px; cursor: pointer; line-height: 1; z-index: 2; }
.ba-lightbox-prev, .ba-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); font-size: 22px; cursor: pointer; line-height: 1; z-index: 2; }
.ba-lightbox-prev { left: 10px; }
.ba-lightbox-next { right: 10px; }
@media (max-width: 600px) { .ba-lightbox-meta h3 { font-size: 16px; } .ba-lightbox-imgwrap { max-height: 60vh; } }

/* Footer contact links need their icons to remain clear on the dark footer. */
.footer-contact p.contact-item > img,
.footer-contact a.contact-item[href^="mailto:"] > img,
.footer-contact a.contact-item[href^="tel:"] > img {
  display: block;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 7px;
  border-radius: 50%;
  background: var(--blue);
}
.footer-contact a.contact-item[href^="mailto:"],
.footer-contact a.contact-item[href^="tel:"] {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
}
.footer-contact a.contact-item[href^="mailto:"] > span,
.footer-contact a.contact-item[href^="tel:"] > span {
  min-width: 0;
  white-space: nowrap;
}