/* Fonts: Gilroy (body) + Nexa (display), self-hosted in assets/fonts. */
@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Gilroy-Regular.woff") format("woff");
}
@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Gilroy-Medium.woff") format("woff");
}
@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Gilroy-Bold.woff") format("woff");
}
@font-face {
  font-family: "Nexa";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Nexa-Light.woff") format("woff");
}
@font-face {
  font-family: "Nexa";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Nexa-Bold.woff") format("woff");
}

:root {
  --color-black: #222831;
  --color-white: #ffffff;
  --color-orange: #ff9700;
  --color-light: #f4f4f3;
  --font-body: "Gilroy", "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-display: "Nexa", "Poppins", "Segoe UI", system-ui, sans-serif;

  /* ---- Container tokens (single source of truth) ----
     Change width/gutter here and every section follows.
     --gutter is overridden per breakpoint below (40px / 20px). */
  --page-max: 1440px; /* canvas max width */
  --gutter: 115px;    /* side padding → content column = page-max − 2×gutter (1210) */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--color-black);
  background: var(--color-white);
}

a {
  text-decoration: none;
  color: inherit;
}

/* ---------------- Site header (fixed, sits at top of viewport on every
   page; the .nav pill inside renders identically to the old in-hero nav). */
.site-header {
  position: fixed;
  top: 15px;
  left: var(--gutter);
  right: var(--gutter);
  z-index: 100;
}

/* ---------------- Nav ---------------- */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-white);
  padding: 0 22px 0 40px;
  border-radius: 4px;
  min-height: 82px;
  width: 100%;
}

.nav__menu,
.nav__actions {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav__actions {
  justify-content: flex-end;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: normal;
  color: var(--color-black);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.nav__chevron {
  width: 10px;
  height: auto;
  display: block;
}

.nav__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav__logo-ellipse {
  position: absolute;
  width: 108px;
  height: 108px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.nav__logo-mark {
  position: relative;
  width: 65px;
  height: 82px;
  object-fit: contain;
}

.nav__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 18px;
  background: var(--color-orange);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
}

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav__burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-black);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* While the menu is open the bar's bottom corners square off, so the bar and
   the panel below join seamlessly as one continuous card (no corner notches). */
body.mmenu-open .nav {
  border-radius: 4px 4px 0 0;
}

/* Burger morphs into an X while the mobile menu is open (spans sit 7px apart). */
body.mmenu-open .nav__burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.mmenu-open .nav__burger span:nth-child(2) {
  opacity: 0;
}
body.mmenu-open .nav__burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav__phone-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: var(--color-orange);
  color: var(--color-white);
  flex-shrink: 0;
}

/* ---- Nav dropdown menus (Services / Materials) ---- */
.nav__menu {
  align-self: stretch; /* full bar height so the submenu drops below it */
}

.nav__item {
  display: inline-flex;
  align-items: center;
}

.nav__item--has-menu {
  position: relative;
  align-self: stretch;
}

.nav__chevron {
  transition: transform 0.2s ease;
}

.nav__submenu {
  position: absolute;
  top: 100%;
  left: -10px;
  min-width: 250px;
  padding: 8px;
  background: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(34, 40, 49, 0.16);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 60;
}

.nav__submenu-link {
  display: block;
  padding: 11px 14px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-black);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

@media (hover: hover) {
  .nav__item--has-menu:hover .nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav__item--has-menu:hover .nav__chevron {
    transform: rotate(180deg);
  }
  .nav__submenu-link:hover {
    background: var(--color-light);
    color: var(--color-orange);
  }
}

/* ---- Third menu level: fly-out submenu (Exterior / Interior → services) ---- */
.nav__subitem {
  position: relative;
}
.nav__submenu-link--parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nav__subarrow {
  flex: 0 0 auto;
  opacity: 0.45;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.nav__submenu--sub {
  top: -8px;
  left: 100%;
  margin-left: 2px;
  transform: translateX(8px);
}
@media (hover: hover) {
  /* The nested panel must NOT open together with the parent dropdown —
     only when its own row is hovered. */
  .nav__item--has-menu:hover .nav__submenu--sub {
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
  }
  .nav__item--has-menu:hover .nav__subitem:hover > .nav__submenu--sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  .nav__subitem:hover > .nav__submenu-link--parent {
    background: var(--color-light);
    color: var(--color-orange);
  }
  .nav__subitem:hover .nav__subarrow {
    opacity: 1;
    transform: translateX(2px);
  }
}

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  width: 100%;
  min-height: 760px;
  background-image: url("../img/hero.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.14) 13.246%,
    rgba(0, 0, 0, 0.48) 84.017%
  );
}

.hero__container {
  position: relative;
  max-width: var(--page-max);
  min-height: 760px;
  margin: 0 auto;
  padding: 30px var(--gutter) 64px;
  display: flex;
  flex-direction: column;
}

.hero__inner {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 493px;
  max-width: 100%;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.hero__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
}

.hero__eyebrow-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--color-orange);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.05;
  color: var(--color-white);
}

.hero__subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: var(--color-white);
  opacity: 0.8;
}

.hero__buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 51px;
  padding: 0 24px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-orange);
  border: 1px solid var(--color-orange);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-white);
}

.hero__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 40px;
  text-align: right;
  color: var(--color-white);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.stat__value {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
}

.stat__suffix {
  color: var(--color-orange);
  font-size: 30px;
  line-height: 1;
}

.stat__suffix--sm {
  font-size: 24px;
}

.stat__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  white-space: nowrap;
}

/* Mobile-only standalone stats section (sibling of .hero). Hidden by
   default — on ≤640 it replaces the in-hero stats column. */
.hero-stats {
  display: none;
}

/* ---------------- Shared ---------------- */
/* GENERAL CONTAINER — reuse this on every section. Do NOT re-declare
   max-width / margin / padding on bespoke wrappers; wrap content in
   `.container` instead. Responsive side padding: 115px → 40px → 20px.
   Content width on desktop = 1440 − 230 = 1210px.
   Hero / nav-overlay variant: `.hero__container` (see Hero section). */
.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--color-black);
  white-space: nowrap;
}

.eyebrow--center {
  justify-content: center;
}

.eyebrow--light {
  color: var(--color-white);
}

.eyebrow__dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--color-orange);
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.05;
  color: var(--color-black);
}

.section-title--light {
  color: var(--color-white);
}

.muted {
  color: rgba(0, 0, 0, 0.5);
}

/* ---------------- Intro band ---------------- */
.intro {
  padding: 120px 0;
}

.intro .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.intro__statement {
  max-width: 907px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.05;
  color: var(--color-black);
}

/* ---------------- Services ---------------- */
.services {
  padding: 0 30px;
  margin-bottom: 120px;
}

.services__inner {
  max-width: 1380px;
  margin: 0 auto;
  background: #f4f4f3;
  border-radius: 4px;
  padding: 120px 85px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.services__cards {
  display: flex;
  gap: 30px;
}

.service-card {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 383px;
}

/* Whole-card click target (mouse). The visible "Learn more" stays the keyboard/SR link. */
.service-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 4px;
}

.service-card__media {
  position: relative;
  height: 484px;
  border-radius: 4px;
}

.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.service-card__badge {
  position: absolute;
  top: -20px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--color-white);
  border-radius: 2000px;
}

.service-card__badge img {
  width: 28px;
  height: 28px;
  display: block;
}

.service-card__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 338px;
  max-width: 100%;
}

.service-card__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 24px;
  color: var(--color-black);
}

.service-card__desc {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-black);
  opacity: 0.8;
}

.service-card .btn {
  align-self: flex-start;
}

.services__heading {
  width: 368px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------------- CTA video banner ---------------- */
.cta-banner {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
}

.cta-banner__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cta-banner__controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 16px;
}

.cta-banner__play,
.cta-banner__skip {
  border: none;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #292929;
  font-family: var(--font-body);
  font-weight: 600;
}

.cta-banner__skip {
  width: 64px;
  height: 64px;
  font-size: 13px;
}

.cta-banner__play {
  width: 96px;
  height: 96px;
}

.cta-banner__play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #292929;
  margin-left: 4px;
}

/* ---------------- Why Choose Us ---------------- */
.why {
  background: var(--color-black);
}

.why__inner {
  position: relative;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 120px var(--gutter);
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 7.6vw, 109px); /* fluid so cols fit 1025–1439 without overflow */
}

.why__intro {
  width: 405px;
  min-width: 0; /* allow shrink below 1440 (was flex-shrink:0 → overflow) */
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.why__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.why__lead {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: normal;
  color: var(--color-white);
  opacity: 0.8;
}

/* Desktop: pinned to the bottom-left of the section, bleeding down onto the
   portfolio band below. z-index lifts it above the next (later) section. */
.why__image {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(-120px, -8vw, -80px); /* scales the bleed down on narrower desktops */
  z-index: 3;
  width: clamp(240px, 22vw, 320px);
  aspect-ratio: 382 / 411;
  border-radius: 4px;
  overflow: hidden;
}

.why__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.why__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  gap: 30px;
  width: 696px;
  min-width: 0; /* keeps 696px as flex-basis but lets it shrink below 1440 */
}

.why-card {
  position: relative;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 40px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.why-card--wide {
  grid-column: span 2;
}

.why-card__num {
  position: absolute;
  top: -27px;
  right: 21px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1b2027;
  border: 1px solid #292d34;
  border-radius: 2000px;
  color: var(--color-orange);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 14.7px;
}

.why-card__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-white);
}

.why-card__desc {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-white);
  opacity: 0.8;
}

.section-title--center {
  text-align: center;
}

.btn--sm {
  gap: 12px;
  font-size: 13px;
}

.btn--project {
  gap: 12px;
  font-size: 13px;
  height: auto;
  padding: 16px 24px;
  outline-offset: -1px;
}

.btn--project svg {
  display: block;
  flex-shrink: 0;
}

.btn--project-dark {
  background: transparent;
  border: 1px solid var(--color-black);
  color: var(--color-black);
}

.btn--sm img {
  width: 16px;
  height: 10px;
}

/* ---------------- Portfolio ---------------- */
.portfolio {
  background: #f4f4f3;
  padding: 120px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.portfolio__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}

.portfolio__lead {
  font-family: var(--font-body);
  font-size: 16px;
  text-align: center;
  color: var(--color-black);
  opacity: 0.8;
}

.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  width: 100%;
  max-width: 1210px;
}

/* fluid tiles: width follows the column (fr), height follows aspect-ratio —
   so proportions are preserved at any container width (1000→1440 and beyond) */
.portfolio__item {
  position: relative;
  aspect-ratio: 383 / 420;
  border-radius: 4px;
  overflow: hidden;
}

.portfolio__item--wide {
  grid-column: span 2;
  aspect-ratio: auto; /* stretches to the row height set by its normal sibling */
}

.portfolio__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.portfolio__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(34, 40, 49, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.portfolio__item:hover::after {
  opacity: 1;
}

.portfolio__caption {
  position: absolute;
  z-index: 1;
  left: 30px;
  bottom: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio__item:hover .portfolio__caption {
  opacity: 1;
}

.portfolio__caption-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--color-white);
}

.portfolio__caption-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 24px;
}

.portfolio__caption-meta {
  font-family: var(--font-body);
  font-size: 16px;
  opacity: 0.8;
}

.portfolio__cta {
  align-self: center;
  margin-top: -26px;
}

/* ---------------- Testimonials ---------------- */
.testimonials {
  padding: 120px 0;
}

.testimonials .container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.testimonials__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.testimonials__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.testimonials__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-black);
}

.testimonials__stars {
  color: var(--color-orange);
  letter-spacing: 1px;
}

.testimonials__grid {
  display: flex;
  gap: 30px;
}

.testimonial {
  position: relative;
  flex: 1;
  background: #f4f4f3;
  border-radius: 4px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  min-height: 295px;
}

.testimonial__top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testimonial__stars {
  color: var(--color-orange);
  font-size: 16px;
  letter-spacing: 2px;
}

.testimonial__quote {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: normal;
  color: var(--color-black);
  opacity: 0.8;
}

.testimonial__mark {
  position: absolute;
  top: 18px;
  right: 26px;
  font-family: Georgia, serif;
  font-size: 56px;
  line-height: 1;
  color: var(--color-orange);
}

.testimonial__person {
  display: flex;
  align-items: center;
  gap: 16px;
}

.testimonial__avatar {
  width: 36px;
  height: 36px;
  border-radius: 200px;
  background: var(--color-black);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.testimonial__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-black);
}

.testimonial__role {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-black);
  opacity: 0.8;
}

/* ---------------- Blog ---------------- */
.page-divider {
  height: 1px;
  background: rgba(34, 40, 49, 0.1);
  width: 100%;
}

.btn--ghost {
  background: transparent;
  border: 1px solid var(--color-black);
  color: var(--color-black);
}

/* `section.blog`, NOT `.blog` — WordPress adds a `blog` class to <body> on the
   posts page, which would otherwise inherit this flex/padding and shrink-wrap
   the whole page (hero, CTA, footer). Scoping to the element prevents that. */
section.blog {
  width: 100%;
  padding: 120px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.blog__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.blog__grid {
  display: flex;
  gap: 31px;
  width: 100%;
  max-width: 1210px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.blog-card__media {
  position: relative;
  height: 266px;
  border-radius: 4px;
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.blog-card__date {
  position: absolute;
  top: -33px;
  left: 30px;
  width: 65px;
  height: 65px;
  border-radius: 2000px;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.05;
}

.blog-card__date strong {
  font-weight: 600;
  font-size: 21px;
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-card__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-card__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-black);
  /* Always reserve 2 lines so every card's description starts at the same height;
     short titles keep the empty 2nd line, longer ones clamp with an … ellipsis.
     Applies on mobile too (single rule, em-based reservation scales with font). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
}

.blog-card__desc {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-black);
  opacity: 0.8;
  /* Keep cards even — clamp the article opening to 3 lines with an … ellipsis. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.blog-card__rule {
  border: none;
  border-top: 1px solid rgba(34, 40, 49, 0.12);
  margin: 0;
  width: 100%;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.blog-card__author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-black);
}

.blog-card__avatar {
  width: 26px;
  height: 26px;
  border-radius: 200px;
  background: #e3e3e3;
  flex-shrink: 0;
}

.blog-card__name {
  font-weight: 600;
}

.blog-card__dot,
.blog-card__read {
  opacity: 0.8;
}

/* ---------------- FAQ ---------------- */
.faq {
  background: var(--color-light);
  padding: 94px 0;
}

.faq__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}

.faq__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 483px;
}

.faq__sub {
  width: 279px;
  font-size: 16px;
  line-height: 1.4;
  opacity: 0.8;
}

.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.faq-item {
  background: #fff;
}

.faq-item__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 30px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.faq-item.is-open .faq-item__head {
  padding-bottom: 0;
}

.faq-item__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.faq-item__num {
  flex-shrink: 0;
  padding-left: 5px;
  border-left: 2px solid var(--color-orange);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 24px;
  color: var(--color-black);
  line-height: 29px;
}

.faq-item__q {
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-black);
  line-height: 1.3;
}

.faq-item__toggle {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: var(--color-light);
  transition: background 0.3s ease;
}

.faq-item__toggle::before,
.faq-item__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-black);
  transition: transform 0.3s ease, background 0.3s ease;
}

.faq-item__toggle::before {
  width: 14px;
  height: 1.6px;
  transform: translate(-50%, -50%);
}

.faq-item__toggle::after {
  width: 1.6px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 108px 0 81px;
}

.faq-item__answer > div {
  overflow: hidden;
  font-size: 16px;
  line-height: 1.4;
  opacity: 0.8;
  color: var(--color-black);
}

.faq-item.is-open .faq-item__answer > div {
  padding-bottom: 30px;
}


.faq-item.is-open .faq-item__toggle {
  background: var(--color-black);
}

.faq-item.is-open .faq-item__toggle::before,
.faq-item.is-open .faq-item__toggle::after {
  background: #fff;
}

.faq-item.is-open .faq-item__toggle::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.faq-item.is-open .faq-item__toggle::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.faq-item.is-open .faq-item__answer {
  grid-template-rows: 1fr;
}

/* ---------------- Footer CTA ---------------- */
.footer-cta {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 100px var(--gutter);
}

.footer-cta__overlay {
  position: absolute;
  inset: 0;
  background: var(--cta-bg, url("../img/hero.jpg")) center/cover no-repeat;
}

.footer-cta__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(34, 40, 49, 0.56);
}

.footer-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}

.footer-cta__eyebrow {
  justify-content: center;
}

.footer-cta__title {
  max-width: 640px;
}

.footer-cta__text {
  max-width: 720px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-white);
  opacity: 0.8;
}

.footer-cta__inner .btn--primary {
  margin-top: 10px;
}

/* ---------------- Footer ---------------- */
.footer {
  background: var(--color-black);
  color: var(--color-white);
}

.footer__top {
  width: 1210px;
  max-width: calc(100% - 230px);
  margin: 0 auto;
  padding-top: 56px;
  display: grid;
  grid-template-columns: 345px 1fr;
  grid-template-areas:
    "brand cols"
    "extra cols";
  align-items: start;
  column-gap: 56px;
  row-gap: 30px;
}

.footer__brand {
  grid-area: brand;
  width: 345px;
}

.footer__brand-head {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.footer__logo {
  width: 96px;
  height: 121px;
  object-fit: contain;
}

.footer__brand-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__extra {
  grid-area: extra;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.footer__desc {
  font-size: 16px;
  line-height: 1.4;
  opacity: 0.8;
}

.footer__social {
  display: flex;
  gap: 10px;
}

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}

.footer__social a svg {
  display: block;
}

.footer__social a svg rect:first-of-type {
  transition: fill 0.2s ease, fill-opacity 0.2s ease;
}

.footer__social a:hover svg rect:first-of-type {
  fill: var(--color-orange);
  fill-opacity: 1;
}

.footer__cols {
  grid-area: cols;
  display: flex;
  flex-wrap: wrap; /* columns wrap instead of overflowing in 1025–1439 range */
  gap: clamp(28px, 4vw, 56px);
}

.footer__col-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 25px;
}

.footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__col a {
  font-size: 16px;
  color: var(--color-white);
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.footer__col a:hover {
  opacity: 1;
}

.footer__col--contact {
  width: 281px;
}

.footer__contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  line-height: 1.4;
  opacity: 0.8;
}

.footer__contact svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-white);
}

.footer__bottom {
  width: 1210px;
  max-width: calc(100% - 230px);
  margin: 30px auto 0;
  padding: 17px 0 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  font-size: 13px;
  opacity: 0.5;
}

.footer__bottom-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.footer__bottom a {
  color: var(--color-white);
}

.footer__areas {
  text-align: right;
}

/* Homepage services panel — keep the desktop row fluid below 1440 so the
   fixed-width cards (383px) + heading (368px) stop overflowing the shrinking
   panel before the ≤1024 column layout takes over. Desktop range only. */
@media (min-width: 1025px) {
  .services__cards {
    flex: 1 1 auto;
    min-width: 0;
  }
  .service-card {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .service-card__media {
    height: auto;
    min-height: 0;
    aspect-ratio: 383 / 484;
  }
  /* absolutely-fill the img so its intrinsic ratio doesn't override the
     box aspect-ratio (otherwise the media grows to the photo's own ratio).
     Exclude the badge icon — it must stay position:static inside its circle. */
  .service-card__media img:not(.service-card__badge img) {
    position: absolute;
    inset: 0;
  }
  .service-card__badge img {
    position: static;
    width: 28px;
    height: 28px;
  }

  /* Same fluid-shrink fix as .service-card: in the 1025–1150 sliver the gutter
     is still 115px, so the 3 blog cards must be allowed to shrink below their
     content min-width or they overflow the container. The card's min-content is
     driven by the non-wrapping .blog-card__meta row (author + "View project"
     CTA), so also let that row wrap — keeping the button pinned right — instead
     of letting the CTA poke past the card edge once the card is narrow. */
  .blog-card {
    min-width: 0;
  }
  .blog-card__meta {
    flex-wrap: wrap;
  }
  .blog-card__meta .btn {
    margin-left: auto;
  }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
  :root {
    --gutter: 40px;
  }
  .hero__container {
    padding: 24px 40px 48px;
  }
  .hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }
  .hero__stats {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    text-align: left;
    gap: 32px 48px;
  }
  .stat {
    align-items: flex-start;
  }

  .services__inner {
    flex-direction: column;
    padding: 80px 40px;
    gap: 56px;
  }
  .services__heading {
    width: 100%;
    order: -1;
  }
  .services__cards {
    width: 100%;
    flex-wrap: wrap;
  }
  .service-card {
    flex: 1 1 calc(50% - 15px); /* 2-up on tablet (30px gap → 15px half) */
    width: auto;
    min-width: 0;
  }

  .why__inner {
    flex-direction: column;
    padding: 80px 40px;
    gap: 56px;
  }
  .why__intro {
    width: 100%;
  }
  .why__image {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: 400px;
    align-self: center;
    margin-bottom: -130px; /* in flow after the cards, bleeds onto portfolio */
  }
  .why__grid {
    width: 100%;
    grid-template-columns: 1fr;
  }
  .why-card--wide {
    grid-column: auto;
  }

  .portfolio,
  section.blog {
    padding: 80px 40px;
  }
  .testimonials__grid {
    flex-wrap: wrap;
  }
  .testimonial {
    flex: 1 1 280px;
  }

  .blog__grid {
    flex-wrap: wrap;
  }
  .blog-card {
    flex: 1 1 280px;
  }

  .faq__grid {
    grid-template-columns: 1fr;
  }

  /* Footer → clean stacked tablet layout (brand → link columns row → social),
     full-width gutters so nothing sits inset like on desktop */
  .footer__top {
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: none;
    padding: 56px 40px 0;
    gap: 48px;
  }
  .footer__brand {
    width: 100%;
    order: 1;
  }
  .footer__brand-head {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }
  .footer__logo {
    flex-shrink: 0;
  }
  .footer__cols {
    order: 2;
    width: 100%;
    flex-wrap: wrap;
    gap: 40px 56px;
    padding-top: 48px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .footer__col--contact {
    width: auto;
  }
  .footer__extra {
    order: 3;
    width: 100%;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .footer__bottom {
    width: auto;
    max-width: none;
    margin: 40px 0 0;
    padding: 17px 40px 16px;
  }
  .footer__areas {
    text-align: left;
  }
  .footer-cta {
    padding: 80px 40px;
  }
}

@media (max-width: 1024px) {
  /* Nav → hamburger + logo + phone icon (tablet + mobile, so the centered
     logo never collides with the horizontal menu on narrow widths) */
  .nav {
    flex-wrap: wrap;
    padding: 10px 16px;
    min-height: 64px;
  }
  .nav__burger {
    display: flex;
    order: 1;
  }
  .nav__phone-btn {
    display: flex;
    order: 2;
  }
  .nav__phone {
    display: none;
  }
  .nav__logo {
    top: 32px;
  }
  .nav__logo-ellipse {
    width: 76px;
    height: 76px;
  }
  .nav__logo-mark {
    width: 46px;
    height: 58px;
  }
  .nav__menu {
    order: 3;
  }
  .nav__actions {
    order: 4;
  }
  .nav__menu,
  .nav__actions {
    width: 100%;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
  }
  .nav.is-open .nav__menu {
    max-height: 520px;
    opacity: 1;
    pointer-events: auto;
    margin-top: 18px;
  }
  .nav.is-open .nav__actions {
    max-height: 320px;
    opacity: 1;
    pointer-events: auto;
    margin-top: 18px; /* separate from the menu list above (Pricing → FAQ) */
  }
  /* dropdowns expand inline (indented) inside the open burger menu */
  .nav__item--has-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: auto;
    gap: 14px;
    width: 100%;
  }
  .nav__submenu {
    position: static;
    min-width: 0;
    padding: 0 0 0 18px;
    gap: 14px;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__submenu-link {
    padding: 0;
    font-weight: 400;
  }
}

@media (max-width: 640px) {
  .hero {
    background: none;
    overflow: visible;
    min-height: 660px;
  }
  .hero__overlay {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.48) 100%),
      var(--hero-bg, url("../img/hero.jpg")) center / cover no-repeat;
  }
  .hero__container {
    min-height: 0;
    padding: 16px 15px 0;
  }
  .hero__inner {
    display: contents;
  }
  .hero__content {
    width: 100%;
    min-height: 580px;
    padding-bottom: 32px;
    justify-content: flex-end;
    align-items: center;
  }
  .hero__heading {
    align-items: center;
  }
  .hero__title {
    font-size: 40px;
    line-height: 42px;
    text-align: center;
  }
  .hero__subtitle {
    text-align: center;
  }
  .hero__buttons {
    align-self: stretch;
    gap: 10px;
  }
  .hero__buttons .btn {
    flex: 1 1 0;
    padding: 16px 12px;
  }
  /* In-hero stats column hidden on mobile; standalone .hero-stats below
     takes over so it's a true sibling section. */
  .hero__stats {
    display: none;
  }
  .hero-stats {
    display: block;
    background: var(--color-white);
  }
  .hero-stats__inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 20px 15px;
    border-bottom: 1px solid rgba(34, 40, 49, 0.1);
    color: var(--color-black);
    text-align: center;
  }
  .hero-stats .stat {
    align-items: center;
    gap: 4px;
  }
  .hero-stats .stat__value {
    font-size: 28px;
    line-height: 28px;
  }
  .hero-stats .stat__suffix {
    font-size: 20px;
    line-height: 20px;
  }
  .hero-stats .stat__suffix--sm {
    font-size: 16px;
    line-height: 16px;
  }
  .hero-stats .stat__label {
    font-size: 14px;
  }

  :root {
    --gutter: 15px;
  }

  .intro {
    padding: 64px 0;
  }
  .intro__statement {
    font-size: 30px;
    line-height: 31.5px;
  }

  .section-title {
    font-size: 30px;
  }

  .services {
    padding: 0;
    margin-bottom: 64px;
  }
  .services__inner {
    padding: 64px 15px;
    border-radius: 0;
    gap: 40px;
  }
  .why__inner {
    padding: 64px 15px;
  }
  .services__heading {
    align-items: center;
  }
  .services__heading .eyebrow {
    justify-content: center;
  }
  .services__heading .section-title {
    text-align: center;
  }
  .service-card {
    flex: 1 1 100%;
  }
  .service-card__media {
    height: 306px;
  }
  .service-card__badge {
    left: auto;
    right: 15px;
  }
  .service-card__title {
    font-size: 20px;
  }

  .why__inner {
    gap: 40px;
    padding-bottom: 0;
  }
  .why__image {
    max-width: none;
    align-self: stretch;
    margin-bottom: -160px;
  }
  .why__intro {
    align-items: center;
  }
  .why__heading {
    align-items: center;
  }
  .why__heading .eyebrow {
    justify-content: center;
  }
  .why__heading .section-title {
    text-align: center;
  }
  .why__lead {
    text-align: center;
  }

  .portfolio,
  section.blog {
    padding: 15px 15px;
    gap: 40px;
  }
  .portfolio {
    padding-top: 250px;
  }
  .portfolio__head {
    width: 100%;
  }
  .portfolio__grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .portfolio__item--wide {
    grid-column: span 1;
    aspect-ratio: 383 / 420;
  }
  .portfolio__item::after {
    opacity: 1;
  }
  .portfolio__caption {
    opacity: 1;
  }
  .portfolio__cta {
    margin-top: -10px;
  }

  .testimonials {
    padding: 64px 0;
  }
  .testimonials__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .testimonial {
    flex: 1 1 100%;
  }

  .blog__grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 15px;
    gap: 16px;
    padding: 40px 15px 8px;
    margin: -40px -15px 0;
    scrollbar-width: none;
  }
  .blog__grid::-webkit-scrollbar {
    display: none;
  }
  .blog-card {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
  .blog-card__read,
  .blog-card__dot {
    display: none;
  }

  .faq {
    padding: 64px 0;
  }
  .faq__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .faq__sub {
    width: auto;
  }
  .faq-item__head {
    gap: 16px;
    padding: 20px;
  }
  .faq-item.is-open .faq-item__head {
    padding-bottom: 0;
  }
  .faq-item__answer {
    padding: 0 84px 0 50px;
  }
  .faq-item.is-open .faq-item__answer > div {
    padding-bottom: 20px;
  }

  .footer-cta {
    padding: 64px 15px;
  }
  .footer__top {
    display: flex;
    flex-direction: column;
    max-width: none;
    width: auto;
    padding: 48px 15px 0;
    gap: 40px;
  }
  .footer__brand {
    width: 100%;
    order: 1;
  }
  .footer__brand-head {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
  }
  .footer__logo {
    flex-shrink: 0;
  }
  .footer__cols {
    order: 2;
    flex-wrap: wrap;
    gap: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .footer__col--contact {
    width: 100%;
  }
  .footer__extra {
    order: 3;
    width: 100%;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .footer__bottom {
    width: auto;
    max-width: none;
    margin: 30px 0 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 15px 24px;
  }
  .footer__areas {
    text-align: left;
  }
}

/* ============================================================
   SERVICES PAGE (services.html)
   ============================================================ */

/* ---- Services hero: nav overlaid on full-width image, reuses hero__container ---- */
.svc-hero {
  position: relative;
  width: 100%;
  min-height: 505px;
  background-image: url("../img/hero.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.svc-hero .hero__container {
  min-height: 505px;
  padding: 30px var(--gutter);
}

/* ---- Intro two-column ---- */
.svc-intro__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 90px var(--gutter);
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 9.24vw, 133px); /* fluid so 487+590 cols fit 1025–1439 without overflow */
}

.svc-intro__left {
  width: 487px;
  min-width: 0; /* allow shrink below 1440 (was flex-shrink:0 → overflow) */
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.svc-intro__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.svc-intro__right {
  width: 590px;
  min-width: 0; /* allow shrink below 1440 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
}

.svc-intro__block {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.svc-intro__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.05;
  color: var(--color-black);
}

.svc-intro__lead {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-black);
  opacity: 0.8;
}

.svc-intro__subtitle {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 24px;
  color: var(--color-black);
}

.svc-intro__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-black);
  opacity: 0.8;
}

/* ---- Services grid ---- */
/* Outer wrapper = edge gutters + vertical rhythm (mirrors homepage .services) */
.svc-services {
  padding: 0 30px;
  margin-bottom: 0; /* dark Why section slides up underneath on desktop */
}

/* Gray rounded panel (mirrors .services__inner principle) */
.svc-services__inner {
  position: relative;
  z-index: 2; /* sits above the dark Why section that overlaps from below */
  max-width: 1380px;
  margin: 0 auto;
  background: #f4f4f3;
  border-radius: 4px;
  padding: 120px 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.svc-services__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}

.svc-services__lead {
  font-family: var(--font-body);
  font-size: 16px;
  text-align: center;
  color: var(--color-black);
  opacity: 0.8;
}

.svc-grid {
  width: 100%;
  max-width: 1210px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.svc-card {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-white);
  border-radius: 4px;
  padding: 30px;
  min-height: 230px;
}

/* Whole-card click target (mouse). The visible "Learn more" stays the keyboard/SR link. */
.svc-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
}

.svc-card--span2 {
  grid-column: span 2;
}

/* Count-aware layouts (modifier set by the block from the number of services).
   3 services → one row of three; 4 → 2/3 + 1/3 row, then two halves (6-col base);
   .svc-card--full stretches a lone trailing card across the row. */
.svc-grid--three {
  grid-template-columns: repeat(3, 1fr);
}
.svc-grid--four {
  grid-template-columns: repeat(6, 1fr);
}
.svc-card--w23 {
  grid-column: span 4;
}
.svc-card--w13 {
  grid-column: span 2;
}
.svc-card--half {
  grid-column: span 3;
}
.svc-card--full {
  grid-column: 1 / -1;
}

.svc-card__icon {
  display: block;
  margin-bottom: 6px;
}

.svc-card__num {
  position: absolute;
  top: -26px;
  right: 30px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: 1px solid #e3e3e3;
  border-radius: 2000px;
  color: var(--color-black);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  z-index: 2;
}

.svc-card__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-black);
}

.svc-card__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-black);
  opacity: 0.8;
}

.svc-card__link {
  position: relative;
  z-index: 2; /* stay above the photo layer that reveals on hover */
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-black);
  transition: color 0.25s ease;
}

.svc-card__link svg {
  transition: transform 0.2s ease;
}

/* Hover effects — desktop/pointer only (no hover on touch/mobile) */
@media (hover: hover) {
  .svc-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .svc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(34, 40, 49, 0.12);
  }
  /* every card reveals its photo on hover; keep the link readable (white) */
  .svc-card:hover .svc-card__media {
    opacity: 1;
  }
  .svc-card:hover .svc-card__media img {
    transform: scale(1);
  }
  .svc-card:hover .svc-card__link,
  .svc-card__link:hover {
    color: var(--color-white);
  }
  .svc-card:hover .svc-card__link svg,
  .svc-card__link:hover svg {
    transform: translateX(3px);
  }
}

/* photo layer — hidden by default, revealed on hover (see @media hover) */
.svc-card__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  border-radius: 4px;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.svc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transition: transform 0.6s ease;
}

.svc-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 60%);
}

/* ---- Why Choose reversed ---- */
/* On desktop this dark section slides up under the gray services panel */
.svc-why__inner {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin: 0 auto;
  margin-top: -180px;
  padding: 300px var(--gutter) 120px;
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 7.6vw, 109px); /* fluid so 696+405 cols fit 1025–1439 without overflow */
}

.svc-why__text {
  width: 405px;
  min-width: 0; /* allow shrink below 1440 (was flex-shrink:0 → overflow) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

/* fluid 2-col card grid: columns scale (1fr) so cards always fill the
   shrinking grid — no dead space / single-column collapse below 1440 */
.svc-why .why__grid {
  min-width: 0; /* keeps base width:696px as flex-basis, shrinks below 1440 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
}

.svc-why .why-card {
  width: auto;
}

/* "Request estimate" CTA — orange bg with dark text */
.svc-why__text .btn--primary {
  height: auto;
  padding: 16px 24px;
  color: var(--color-black);
}

.why-card__icon {
  position: absolute;
  top: -27px;
  right: 21px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1b2027;
  border: 1px solid #292d34;
  border-radius: 2000px;
}

/* ---- Materials grid ---- */
.mat {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 120px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.mat__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 662px;
  max-width: 100%;
}

.mat__lead {
  font-family: var(--font-body);
  font-size: 16px;
  text-align: center;
  color: var(--color-black);
  opacity: 0.8;
}

.mat__grid {
  width: 100%;
  max-width: 1210px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  align-items: stretch;
}

/* fixed-height card: image strip on top, gray info panel below.
   On hover the image grows while title/desc collapse to just "Learn more". */
.mat-card {
  position: relative;
  cursor: pointer;
  height: 320px;
  overflow: hidden;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

/* Whole-card click target (mouse). The visible "Learn more" stays the keyboard/SR link. */
.mat-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
}

.mat-card__media {
  flex: 1 1 auto;
  min-height: 72px;
  overflow: hidden;
}

.mat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mat-card__panel {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 30px;
  background: #f4f4f3;
  outline: 1px solid rgba(255, 255, 255, 0.06);
  outline-offset: -1px;
}

.mat-card__info {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 150px;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-bottom 0.35s ease;
}

.mat-card__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-black);
}

.mat-card__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-black);
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mat-card .svc-card__link {
  margin-top: 0;
  color: var(--color-black);
}

@media (hover: hover) {
  .mat-card__media img {
    transition: transform 0.5s ease;
  }
  .mat-card:hover .mat-card__media img {
    transform: scale(1.04);
  }
  .mat-card:hover .mat-card__info {
    max-height: 0;
    opacity: 0;
    margin-bottom: -24px; /* cancel the panel gap so "Learn more" rises to the top */
  }
}

/* ---- SEO two-column block ---- */
.svc-seo {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 120px var(--gutter);
}

.svc-seo__inner {
  display: flex;
  justify-content: space-between;
  gap: 60px;
}

.svc-seo__left {
  width: 620px;
  min-width: 0; /* allow shrink below 1440 (was flex-shrink:0 → overflow) */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.svc-seo__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.12;
  color: var(--color-black);
}

.svc-seo__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-black);
  opacity: 0.8;
}

.svc-seo__right {
  width: 487px;
  min-width: 0; /* allow shrink below 1440 */
}

.svc-links__group + .svc-links__group {
  margin-top: 40px;
}

.svc-links__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-orange);
  margin-bottom: 6px;
}

.svc-links__list {
  list-style: none;
}

.svc-links__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #e9e9e7;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-black);
}

.svc-links__item a svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.svc-links__item a:hover {
  color: var(--color-orange);
}

.svc-links__item a:hover svg {
  transform: translateX(3px);
}

/* ---- Services page responsive ---- */
@media (max-width: 1024px) {
  .svc-hero {
    min-height: 380px;
  }
  .svc-hero .hero__container {
    min-height: 380px;
    padding: 24px 40px;
  }
  .svc-intro__inner {
    flex-direction: column;
    padding: 64px 40px;
    gap: 40px;
  }
  .svc-intro__left,
  .svc-intro__right {
    width: 100%;
  }
  .svc-services {
    margin-bottom: 100px; /* no overlap below desktop */
  }
  .svc-services__inner {
    padding: 80px 40px;
  }
  .svc-grid,
  .svc-grid--three,
  .svc-grid--four {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Drop the desktop count-aware spans — cards pair up 2-per-row here. */
  .svc-card--w23,
  .svc-card--w13,
  .svc-card--half,
  .svc-card--full {
    grid-column: auto;
  }
  /* Odd number of cards: stretch the last one so the final row is filled. */
  .svc-grid .svc-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .svc-why__inner {
    flex-direction: column;
    margin-top: 0; /* cancel the desktop slide-up */
    padding: 80px 40px;
    gap: 48px;
  }
  .svc-why__text {
    width: 100%;
    order: -1;
  }
  .mat {
    padding: 64px 40px;
  }
  .mat__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .svc-seo {
    padding: 80px 40px;
  }
  .svc-seo__inner {
    flex-direction: column;
    gap: 48px;
  }
  .svc-seo__left,
  .svc-seo__right {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .svc-hero {
    min-height: 280px;
  }
  .svc-hero .hero__container {
    min-height: 280px;
    padding: 16px 15px;
  }

  .svc-intro__inner {
    padding: 64px 15px;
    gap: 32px;
  }
  .svc-intro__title {
    font-size: 36px;
  }
  .svc-intro__subtitle {
    font-size: 22px;
  }

  .svc-services {
    padding: 0;
    margin-bottom: 0; /* dark Why section slides up underneath, like desktop */
  }
  .svc-services__inner {
    padding: 64px 15px;
    border-radius: 0;
    gap: 40px;
    margin-bottom: -100px;
    z-index: 2;
    margin-left: 10px;
    margin-right: 10px;
  }
  .svc-services__head,
  .mat__head {
    width: 100%;
  }
  .svc-card__title {
    font-size: 20px;
  }
  .svc-grid {
    grid-template-columns: 1fr;
    gap: 40px 30px;
  }
  .svc-card--span2 {
    grid-column: span 1;
  }

  .svc-why__inner {
    margin-top: -150px; /* slide up under the services panel */
    padding: 214px 15px 64px;
    gap: 40px;
  }
  .svc-why__text .btn.btn--primary {
    width: 100%;
  }
  .svc-why .why__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .mat {
    padding: 64px 15px;
    gap: 40px;
  }
  .mat__grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  /* mobile: natural-height cards, fixed 72px image strip, no hover collapse */
  .mat-card {
    height: auto;
  }
  .mat-card__media {
    flex: none;
    height: 72px;
  }
  .mat-card__info {
    max-height: none;
  }

  .svc-seo {
    padding: 64px 15px;
  }
  .svc-seo__title {
    font-size: 28px;
  }
  .svc-seo__inner {
    gap: 40px;
  }

  /* override homepage-only portfolio overlap padding on services page */
  .svc .portfolio {
    padding-top: 64px;
  }
}

/* =====================================================================
   Service detail page (service.html)
   ===================================================================== */

/* ---- Hero: light text panel + image, 30px gap between, white nav overlaid ---- */
.sv-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 30px;
  background: var(--color-white);
  overflow: hidden;
}
.sv-hero__panel {
  flex: 0 0 calc(50% - 15px); /* 15px = half the 30px centre gap */
  min-width: 0;
  min-height: 643px;
  background: var(--color-light);
  border-bottom-right-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* full-bleed panel, but text starts on the centered container line
     (50% resolves against the hero width — scrollbar-safe, unlike 100vw) */
  padding: 190px 40px 70px max(var(--gutter), calc(50% - var(--page-max) / 2 + var(--gutter)));
}
.sv-hero__media {
  position: relative;
  flex: 0 0 calc(50% - 15px);
  min-width: 0;
}
.sv-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sv-hero__nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.sv-hero__nav .hero__container {
  min-height: 0;
  padding: 30px var(--gutter) 0;
}
.sv-hero__text {
  max-width: 640px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.sv-hero__text-group {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
.sv-hero__heading {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.sv-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 3.9vw, 56px);
  line-height: 1.05;
  color: var(--color-black);
}
.sv-hero__lead {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-black);
  opacity: 0.8;
}
.sv-hero__btn {
  height: auto;
  padding: 16px 24px;
}

/* ---- About this service ---- */
.sv-about {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 120px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}
.sv-about__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 1004px;
}
.sv-about__lead {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  color: var(--color-black);
  opacity: 0.8;
}
/* WYSIWYG field: keep a single paragraph flush, space out multiple ones */
.sv-about__lead p {
  margin: 0;
}
.sv-about__lead p + p {
  margin-top: 1em;
}
.sv-about__body {
  width: 100%;
  max-width: 1210px;
  display: flex;
  align-items: stretch;
  gap: 30px;
}
.sv-about__media {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 4px;
  overflow: hidden;
}
.sv-about__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sv-about__panel {
  flex: 1 1 0;
  min-width: 0;
  background: var(--color-light);
  border-radius: 4px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sv-about__panel-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 24px;
  color: var(--color-black);
}
.sv-about__panel-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-black);
  opacity: 0.8;
}
.sv-divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: rgba(34, 40, 49, 0.1);
}
.sv-check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sv-check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-black);
}
.sv-check {
  flex-shrink: 0;
}

/* ---- Pricing (dark) ---- */
.sv-pricing {
  background: var(--color-black);
  color: var(--color-white);
}
.sv-pricing__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 120px var(--gutter);
  display: flex;
  align-items: stretch;
  gap: clamp(40px, 7vw, 133px);
}
.sv-pricing__left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.sv-pricing__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.sv-pricing__lead {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-white);
  opacity: 0.7;
}
.sv-pricing__table {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sv-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 30px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}
.sv-price-row--popular {
  background: var(--color-white);
  color: var(--color-black);
}
.sv-price-row__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.sv-price-row__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
}
.sv-price-row__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 16px;
  opacity: 0.6;
}
.sv-price-row__cost {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.sv-price-row__from {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  color: var(--color-orange);
}
.sv-price-row__to {
  font-family: var(--font-body);
  font-size: 14px;
  opacity: 0.6;
}
.sv-pricing__card {
  flex: 0 1 488px;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sv-pricing__card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  color: var(--color-white);
}
.sv-pricing__card-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-white);
  opacity: 0.7;
}
.sv-divider--dark {
  background: rgba(255, 255, 255, 0.12);
}
.sv-pricing__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sv-pricing__list li {
  position: relative;
  padding-left: 18px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-white);
}
.sv-pricing__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-white);
  opacity: 0.6;
}
.sv-pricing__card-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.sv-pricing__card-cta .btn--primary {
  color: var(--color-black);
}
.sv-pricing__call {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-orange);
}
.sv-pricing__call a {
  color: var(--color-orange);
}

/* ---- How it works / process (light) ---- */
.sv-process {
  background: var(--color-light);
}
.sv-process__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 120px var(--gutter);
}
.sv-process__head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
}
.sv-process__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sv-process__lead {
  flex-shrink: 0;
  width: 383px;
  max-width: 40%;
  align-self: flex-end;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-black);
  opacity: 0.7;
  text-align: right;
}
.sv-process__steps {
  display: flex;
  align-items: stretch;
}
.sv-process__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sv-process__top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sv-process__num {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  border: 1px solid #d8d8d6;
  background: var(--color-white);
  color: var(--color-black);
}
.sv-process__num--dark {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.sv-process__num--orange {
  background: var(--color-orange);
  color: var(--color-white);
  border-color: var(--color-orange);
}
.sv-process__line {
  flex: 1;
  height: 0;
  border-top: 2px dashed #cfcfcd;
}
.sv-process__line--accent {
  border-top-color: var(--color-orange);
}
.sv-process__body {
  margin-top: 16px;
  padding-right: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sv-process__step-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-black);
}
.sv-process__step-desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-black);
  opacity: 0.7;
}

/* ---- Service page responsive ---- */
@media (max-width: 1024px) {
  .sv-hero {
    flex-direction: column;
    gap: 15px;
  }
  .sv-hero__panel {
    flex: none;
    min-height: 0;
    padding: 120px var(--gutter) 48px;
  }
  .sv-hero__text {
    max-width: 100%;
  }
  .sv-hero__media {
    flex: none;
    height: 360px;
  }

  .sv-about {
    padding: 64px var(--gutter);
  }
  .sv-about__body {
    flex-direction: column-reverse;
  }
  .sv-about__media {
    aspect-ratio: 16 / 10;
  }

  .sv-pricing__inner {
    padding: 64px var(--gutter);
    flex-direction: column;
  }
  .sv-pricing__card {
    flex-basis: auto;
    width: 100%;
  }

  .sv-process__inner {
    padding: 64px var(--gutter);
  }
  .sv-process__head {
    flex-direction: column;
    gap: 16px;
  }
  .sv-process__lead {
    width: 100%;
    max-width: 100%;
    align-self: flex-start;
    text-align: left;
  }
  /* vertical process */
  .sv-process__steps {
    flex-direction: column;
  }
  .sv-process__step {
    flex-direction: row;
    gap: 20px;
  }
  .sv-process__top {
    flex-direction: column;
    align-items: center;
    align-self: stretch;
  }
  .sv-process__line {
    flex: 1;
    width: 0;
    height: auto;
    border-top: 0;
    border-left: 2px dashed #cfcfcd;
  }
  .sv-process__line--accent {
    border-top: 0;
    border-left-color: var(--color-orange);
  }
  .sv-process__body {
    margin-top: 0;
    padding-right: 0;
    padding-bottom: 36px;
  }
}

@media (max-width: 640px) {
  /* mobile hero: centered text, image below */
  .sv-hero__panel {
    padding: 200px var(--gutter) 40px;
    align-items: center;
  }
  .sv-hero__text {
    align-items: center;
    text-align: center;
  }
  .sv-hero__text-group,
  .sv-hero__heading {
    align-items: center;
  }
  .sv-hero__title {
    font-size: 40px;
  }
  .sv-hero__media {
    height: auto;
    aspect-ratio: 360 / 456;
    margin: 0 var(--gutter) var(--gutter);
    border-radius: 4px;
    overflow: hidden;
  }

  .sv-about {
    padding: 64px var(--gutter);
    gap: 40px;
  }
  .sv-about__panel {
    margin-bottom: -30px;
  }

  .sv-pricing__inner {
    gap: 40px;
  }
  .sv-price-row {
    padding: 20px;
  }
  .sv-pricing__card {
    padding: 24px;
  }

  .sv-process__num {
    width: 48px;
    height: 48px;
  }
}

/* ============================================================
   ABOUT US PAGE (about.html)
   Reuses: .nav, .eyebrow, .section-title, .btn, .sv-divider,
   .sv-check-list/.sv-check, .why__grid/.why-card/.why-card__icon,
   .footer-cta, .footer. New blocks below.
   ============================================================ */

/* ---- Hero: light panel + 2x2 stats, house image overlaps below ---- */
.au-hero {
  position: relative;
  background: var(--color-light);
  padding: 190px 0 200px;
}
.au-hero__nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.au-hero__nav .hero__container {
  min-height: 0;
  padding: 30px var(--gutter) 0;
}
.au-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.au-hero__text {
  flex: 0 1 744px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.au-hero__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.au-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.05;
  color: var(--color-black);
}
.au-hero__cta-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.au-hero__lead {
  max-width: 511px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: normal;
  color: var(--color-black);
  opacity: 0.8;
}
.au-hero__btn {
  flex-shrink: 0;
  height: auto;
  padding: 16px 24px;
}
.au-hero__stats {
  position: relative;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  row-gap: 28px;
}
.au-hero__stats::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(34, 40, 49, 0.12);
}
.au-hero__stats::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(34, 40, 49, 0.12);
}
.au-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.au-stat__value {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  color: var(--color-black);
}
.au-stat__plus {
  color: var(--color-orange);
  font-size: 30px;
}
.au-stat__plus--sm {
  font-size: 24px;
}
.au-stat__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  color: var(--color-black);
  white-space: nowrap;
}

/* house image strip — inset 30, overlaps hero bottom */
.au-hero__media {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin: -140px auto 0;
  padding: 0 30px;
}
.au-hero__media-inner {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1380 / 400;
}
.au-hero__media-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Who we are: text + checklist / portrait with quote ---- */
.au-story {
  padding: 120px 0;
}
.au-story__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(40px, 8vw, 122px);
}
.au-story__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.au-story__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.au-story__body {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.au-story__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.au-story__subtitle {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
  color: var(--color-black);
  margin-bottom: 12px;
}
.au-story__para {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: normal;
  color: var(--color-black);
  opacity: 0.8;
}
.au-story__media {
  position: relative;
  flex: 0 1 487px;
  min-width: 0;
  align-self: stretch;
  min-height: 482px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.au-story__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.au-story__quote {
  position: relative;
  z-index: 1;
  background: var(--color-light);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.au-story__quote-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-style: italic;
  font-size: 16px;
  line-height: normal;
  color: var(--color-black);
}
.au-story__quote-by {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  line-height: normal;
  color: var(--color-black);
  opacity: 0.8;
}

/* ---- Promise banner: dark photo band, centered text (inset 30) ---- */
.au-promise {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 30px;
}
.au-promise__panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 120px 115px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.au-promise__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.au-promise__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(34, 40, 49, 0.56);
  z-index: 1;
}
.au-promise__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ---- Why choose us: dark inset panel, cards grid + intro + button ---- */
.au-why {
  padding: 0 30px;
  margin: 120px 0;
}
.au-why__panel {
  background: var(--color-black);
  border-radius: 4px;
  padding: 120px clamp(40px, 7vw, 100px);
  display: grid;
  grid-template-columns: minmax(0, 696fr) minmax(0, 405fr);
  grid-template-areas:
    "cards intro"
    "cards btn";
  grid-template-rows: 1fr auto;
  column-gap: clamp(40px, 6vw, 79px);
  row-gap: 40px;
}
.au-why__panel .why__grid {
  grid-area: cards;
  width: auto;
  min-width: 0;
}
.au-why__intro {
  grid-area: intro;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.au-why__lead {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: normal;
  color: var(--color-white);
  opacity: 0.8;
}
.au-why__btn {
  grid-area: btn;
  align-self: end;
  justify-self: start;
  height: auto;
  padding: 16px 24px;
  color: var(--color-black);
}

/* ---- About: tablet ---- */
@media (max-width: 1024px) {
  .au-hero {
    padding: 160px 0 160px;
  }
  .au-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }
  .au-hero__text {
    flex: none;
    width: 100%;
    max-width: 744px;
  }
  .au-hero__stats {
    align-self: stretch;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;
    row-gap: 0;
  }
  .au-hero__stats::before,
  .au-hero__stats::after {
    display: none;
  }
  .au-hero__media {
    margin-top: -110px;
  }

  .au-story__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }
  .au-story__media {
    flex: none;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .au-promise__panel {
    padding: 80px 48px;
  }

  .au-why {
    margin: 80px 0;
  }
  .au-why__panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "cards"
      "btn";
    grid-template-rows: auto auto auto;
    padding: 64px 40px;
    row-gap: 40px;
  }
}

/* ---- About: mobile ---- */
@media (max-width: 640px) {
  .au-hero {
    padding: 130px 0 64px;
    text-align: center;
  }
  .au-hero__inner {
    gap: 40px;
  }
  .au-hero__text {
    align-items: center;
    gap: 24px;
  }
  .au-hero__heading {
    align-items: center;
  }
  .au-hero__title {
    font-size: 40px;
  }
  .au-hero__cta-row {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .au-hero__lead {
    max-width: none;
  }
  .au-hero__stats {
    column-gap: 12px;
  }
  .au-stat__value {
    font-size: 28px;
  }
  .au-stat__plus {
    font-size: 22px;
  }
  .au-stat__plus--sm {
    font-size: 18px;
  }
  .au-stat__label {
    font-size: 13px;
    white-space: normal;
  }
  .au-hero__media {
    margin-top: 24px;
    padding: 0 15px;
  }
  .au-hero__media-inner {
    aspect-ratio: 360 / 400;
  }

  .au-story {
    padding: 64px 0;
  }
  .au-story__media {
    aspect-ratio: 360 / 482;
  }

  .au-promise {
    padding: 0 15px;
  }
  .au-promise__panel {
    padding: 64px 24px;
  }

  .au-why {
    padding: 0 15px;
    margin: 64px 0;
  }
  .au-why__panel {
    padding: 64px 15px;
  }
  .au-why__intro {
    align-items: center;
    text-align: center;
    gap: 24px;
  }
  .au-why__btn {
    justify-self: center;
  }
}

/* ============================================================
   CONTACT PAGE (contact.html)
   Reuses: .nav, .eyebrow, .btn/.btn--primary, .sv-divider--dark,
   .footer. New blocks below.
   ============================================================ */

/* ---- Hero: centered header on light panel (cards overlap below) ---- */
.ct-hero {
  position: relative;
  background: var(--color-light);
  padding: 190px 0 224px;
}
.ct-hero__nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.ct-hero__nav .hero__container {
  min-height: 0;
  padding: 30px var(--gutter) 0;
}
.ct-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.ct-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.05;
  color: var(--color-black);
}

/* ---- Cards row: pulled up to overlap the light hero ---- */
.ct-cards {
  position: relative;
  z-index: 1;
  margin-top: -160px;
}
.ct-cards__inner {
  display: flex;
  align-items: stretch;
  gap: 30px;
}

/* ---- Form card (white) ---- */
.ct-form {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: var(--color-white);
  border: 1px solid var(--color-light);
  border-radius: 4px;
  padding: 40px;
}
.ct-form__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ct-form__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
  color: var(--color-black);
}
.ct-form__sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: normal;
  color: var(--color-black);
  opacity: 0.8;
}
.ct-form__group {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ct-form__fields {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ct-field {
  width: 100%;
  height: 54px;
  flex-shrink: 0;
  padding: 0 24px;
  border: 1px solid rgba(34, 40, 49, 0.2);
  border-radius: 4px;
  background: var(--color-white);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-black);
}
.ct-field::placeholder {
  color: var(--color-black);
  opacity: 0.6;
}
.ct-field:focus {
  outline: none;
  border-color: var(--color-orange);
}
.ct-field--area {
  flex: 0 0 auto;
  min-height: 80px;
  height: 80px;
  padding: 16px 24px;
  line-height: normal;
  resize: vertical;
}
.ct-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.ct-consent input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 4px 0 0;
  accent-color: var(--color-black);
}
.ct-consent span {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: normal;
  color: var(--color-black);
  opacity: 0.6;
}
.ct-form__submit {
  width: 100%;
  height: auto;
  padding: 16px 24px;
}

/* ---- Contact card (dark) ---- */
.ct-contact {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  background: var(--color-black);
  border-radius: 4px;
  padding: 40px;
  overflow: hidden;
}
.ct-contact__top {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ct-contact__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ct-contact__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
  color: var(--color-white);
}
.ct-contact__sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: normal;
  color: var(--color-white);
  opacity: 0.8;
}
.ct-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ct-method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-white);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ct-method:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.32);
}
.ct-method--wide {
  grid-column: span 2;
}
.ct-method svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.ct-contact__hours {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ct-hours {
  list-style: none;
  display: flex;
  gap: 30px;
}
.ct-hours li {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: normal;
  color: var(--color-white);
  opacity: 0.8;
}

/* ---- Map (full-bleed Google embed) ---- */
.ct-map {
  margin-top: 64px;
}
.ct-map__frame {
  display: block;
  width: 100%;
  height: 437px;
  border: 0;
  background: var(--color-light);
}

/* ---- Contact: tablet ---- */
@media (max-width: 1024px) {
  .ct-hero {
    padding: 160px 0 200px;
  }
  .ct-cards {
    margin-top: -150px;
  }
  .ct-cards__inner {
    flex-direction: column;
  }
  /* stacked: each card takes its natural height (flex:1 0 0 would collapse them) */
  .ct-form,
  .ct-contact {
    flex: none;
    width: 100%;
  }
  /* drop the desktop equal-height grow so fields keep natural sizes when stacked */
  .ct-form__group,
  .ct-form__fields {
    flex: 0 0 auto;
  }
  .ct-field--area {
    flex: 0 0 auto;
    height: 80px;
  }
}

/* ---- Contact: mobile ---- */
@media (max-width: 640px) {
  .ct-hero {
    padding: 130px 0 200px;
  }
  .ct-hero__title {
    font-size: 40px;
  }
  .ct-cards {
    margin-top: -150px;
  }
  .ct-cards__inner {
    gap: 15px;
  }
  .ct-form,
  .ct-contact {
    padding: 30px;
  }
  .ct-methods {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .ct-method--wide {
    grid-column: auto;
  }
  .ct-hours {
    flex-direction: column;
    gap: 20px;
  }
  .ct-map {
    margin-top: 48px;
  }
  .ct-map__frame {
    height: 487px;
  }
}

/* ============================================================
   MATERIAL DETAIL PAGE (material.html)
   Reuses: .sv-hero (dark panel variant), .nav, .eyebrow,
   .section-title, .btn, .sv-divider, .sv-check-list/.sv-check,
   .footer-cta, .footer. New blocks below.
   ============================================================ */

/* ---- Hero: dark panel variant of .sv-hero ---- */
.material .sv-hero__panel {
  background: var(--color-black);
}
.material .sv-hero__title,
.material .sv-hero__lead {
  color: var(--color-white);
}

/* ---- Shared centered section head ---- */
.mat-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin: 0 auto;
  text-align: center;
}
.mat-head--wide {
  max-width: 1004px;
}
.mat-services__head {
  max-width: 662px;
}
.mat-head__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.mat-head__lead {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: normal;
  color: var(--color-black);
  opacity: 0.8;
}

/* ---- About this material ---- */
.mat-about {
  padding: 120px 0;
}
.mat-about__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 30px;
}
.mat-about__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.mat-about__img {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 590 / 269;
}
.mat-about__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mat-incl-card {
  flex: 1 1 auto;
  background: var(--color-light);
  border-radius: 4px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mat-card-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
  color: var(--color-black);
}
.mat-card-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: normal;
  color: var(--color-black);
  opacity: 0.8;
}

/* specs card (right) */
.mat-specs {
  flex: 1 1 0;
  min-width: 0;
  background: var(--color-light);
  border-radius: 4px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.mat-specs__top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mat-specs__table {
  display: flex;
  flex-direction: column;
}
.mat-spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(34, 40, 49, 0.1);
}
.mat-spec-row__label {
  flex-shrink: 0;
  background: var(--color-white);
  padding: 6px 10px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-black);
  opacity: 0.6;
}
.mat-spec-row__value {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-black);
  text-align: right;
}
.mat-specs__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mat-specs__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mat-brand-pill {
  border: 1px solid var(--color-black);
  border-radius: 4px;
  padding: 16px 24px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-black);
  opacity: 0.6;
  white-space: nowrap;
}

/* ---- Related services ---- */
.mat-services {
  background: var(--color-light);
  padding-top: 120px;
}
.mat-services__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
/* fixed-height service card: image strip + bottom panel. On hover the image
   grows while the title/meta collapse to just "Learn more" (same as .mat__grid). */
.mat-svc-card {
  position: relative;
  cursor: pointer;
  height: 239px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
}

.mat-svc-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
}
.mat-svc-card__media {
  flex: 1 1 auto;
  min-height: 72px;
  overflow: hidden;
}
.mat-svc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mat-svc-card__panel {
  flex: none;
  background: var(--color-white);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mat-svc-card__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 120px;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-bottom 0.35s ease;
}
.mat-svc-card__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  color: var(--color-black);
}
.mat-svc-card__meta {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: normal;
  color: var(--color-black);
  opacity: 0.8;
}
.mat-svc-card__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-black);
  text-decoration: none;
}
.mat-svc-card__link svg {
  display: block;
  flex-shrink: 0;
}
/* hover: grow image, collapse title/meta to just "Learn more" (pointer only) */
@media (hover: hover) {
  .mat-svc-card__media img {
    transition: transform 0.5s ease;
  }
  .mat-svc-card:hover .mat-svc-card__media img {
    transform: scale(1.04);
  }
  .mat-svc-card:hover .mat-svc-card__info {
    max-height: 0;
    opacity: 0;
    margin-bottom: -24px;
  }
}
.mat-services__cta {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* browse other materials */
.mat-browse {
  margin-top: 64px;
  border-top: 1px solid rgba(34, 40, 49, 0.1);
  padding: 56px 0;
}
.mat-browse__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-black);
  opacity: 0.6;
  margin-bottom: 24px;
}
.mat-browse__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mat-browse-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-white);
  padding: 16px 24px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-black);
  text-decoration: none;
  white-space: nowrap;
}
.mat-browse-pill svg {
  display: block;
  flex-shrink: 0;
}

/* ---- Material: tablet ---- */
@media (max-width: 1024px) {
  .mat-about {
    padding: 80px 0;
  }
  .mat-about__grid {
    grid-template-columns: 1fr;
  }
  .mat-services {
    padding-top: 80px;
  }
  .mat-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Material: mobile ---- */
@media (max-width: 640px) {
  /* hero image slides up onto the dark panel (img overlaps ~140px) */
  .material .sv-hero {
    gap: 0;
  }
  .material .sv-hero__panel {
    padding-bottom: 200px;
  }
  .material .sv-hero__media {
    margin-top: -140px;
    position: relative;
    z-index: 1;
  }

  .mat-about {
    padding: 64px 0;
  }
  .mat-about__grid {
    margin-top: 40px;
  }
  .mat-card-title {
    font-size: 20px;
  }
  .mat-specs {
    justify-content: flex-start;
    gap: 30px;
  }
  .mat-spec-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .mat-spec-row__value {
    text-align: left;
  }
  .mat-brand-pill {
    padding: 12px 16px;
  }
  .mat-browse-pill {
    padding: 14px 18px;
  }
  .mat-services {
    padding-top: 64px;
  }
  .mat-services__grid {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
  /* mobile: natural-height cards, fixed image strip, no hover collapse */
  .mat-svc-card {
    height: auto;
    min-height: 0;
  }
  .mat-svc-card__media {
    flex: none;
    height: 200px;
  }
  .mat-svc-card__info {
    max-height: none;
  }
}

/* ============================================================
   PORTFOLIO PAGE (portfolio.html)
   Separate .pf-* grid (NOT the shared .portfolio__grid, which gets
   duplicated across pages) — same wide-span functionality + working
   category filters. Reuses .nav, .eyebrow, .btn, .footer-cta, .footer.
   ============================================================ */

/* ---- Hero: centered header on light panel ---- */
.pf-hero {
  position: relative;
  background: var(--color-light);
  padding: 190px 0 64px;
}
.pf-hero__nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.pf-hero__nav .hero__container {
  min-height: 0;
  padding: 30px var(--gutter) 0;
}
.pf-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}
.pf-hero__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pf-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1.05;
  color: var(--color-black);
}
.pf-hero__lead {
  max-width: 640px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: normal;
  color: var(--color-black);
  opacity: 0.8;
}

/* ---- Filter bar + grid section ---- */
.pf-portfolio {
  background: var(--color-white);
  padding: 56px 0 120px;
}
.pf-portfolio__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--color-light);
  border-radius: 4px;
  padding: 5px 24px 5px 5px;
}
.pf-filters {
  display: flex;
  gap: 5px;
}
.pf-filter {
  padding: 16px 24px;
  border: 0;
  border-radius: 4px;
  background: var(--color-white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-black);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.pf-filter:hover {
  background: rgba(34, 40, 49, 0.06);
}
.pf-filter.is-active {
  background: var(--color-orange);
  color: var(--color-white);
}
.pf-count {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: rgba(34, 40, 49, 0.6);
  white-space: nowrap;
}
.pf-count strong {
  font-weight: 600;
  color: var(--color-black);
}

/* fluid wide-span grid (same behaviour as .portfolio__grid) */
.pf-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.pf-card {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
}
.pf-card[hidden] {
  display: none;
}
.pf-card--wide {
  grid-column: span 2;
}
.pf-card__media {
  position: relative;
  aspect-ratio: 383 / 420;
  overflow: hidden;
}
.pf-card--wide .pf-card__media {
  aspect-ratio: 797 / 420;
}
.pf-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.pf-card__body {
  background: var(--color-light);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pf-card__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  color: var(--color-black);
}
.pf-card__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: normal;
  color: var(--color-black);
  opacity: 0.8;
}
/* hover overlay on the image — dark scrim + title/meta + "View project" */
.pf-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(34, 40, 49, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.pf-card__overlay {
  position: absolute;
  z-index: 1;
  left: 30px;
  right: 30px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pf-card__overlay-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pf-card__overlay-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 24px;
  line-height: normal;
  color: var(--color-white);
}
.pf-card__overlay-meta {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: normal;
  color: var(--color-white);
  opacity: 0.8;
}
@media (hover: hover) {
  .pf-card:hover .pf-card__media img {
    transform: scale(1.04);
  }
  .pf-card:hover .pf-card__media::after {
    opacity: 1;
  }
  .pf-card:hover .pf-card__overlay {
    opacity: 1;
  }
}
.pf-loadmore {
  margin-top: 56px;
  display: flex;
  justify-content: center;
}

/* ---- Portfolio: tablet ---- */
@media (max-width: 1024px) {
  .pf-hero {
    padding: 160px 0 48px;
  }
  .pf-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pf-card--wide {
    grid-column: auto;
  }
  .pf-card--wide .pf-card__media {
    aspect-ratio: 383 / 420;
  }
}

/* ---- Portfolio: mobile ---- */
@media (max-width: 640px) {
  .pf-hero {
    padding: 130px 0 40px;
  }
  .pf-hero__title {
    font-size: 40px;
  }
  .pf-portfolio__bar {
    padding: 5px;
  }
  .pf-filters {
    width: 100%;
  }
  .pf-filter {
    flex: 1 1 0;
    padding: 16px 12px;
  }
  .pf-filter:first-child {
    flex: 0 0 auto; /* "All" hugs its content; Exterior/Interior fill */
  }
  .pf-count {
    display: none;
  }
  .pf-grid {
    grid-template-columns: 1fr;
  }
  .pf-card__media,
  .pf-card--wide .pf-card__media {
    aspect-ratio: 360 / 420;
  }
  .pf-card__overlay-title {
    font-size: 20px;
  }
  /* touch has no hover — show the overlay (dark scrim + "View project") by default */
  .pf-card__media::after,
  .pf-card__overlay {
    opacity: 1;
  }
}

/* ============================================================
   LOCATION PAGE (location.html) — St. Catharines
   Hero = homepage .hero (reused). Portfolio/testimonials/CTA/
   footer = reused. Two bespoke pieces below:
   1) .loc-intro  — intro band
   2) .svc-services--invert — .svc-services__inner,
      color-inverted (dark panel + dark outlined cards).
   ============================================================ */

/* ---- Intro band ---- */
.loc-intro {
  padding: 120px 0;
}

.loc-intro__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  margin-bottom: 56px;
}

.loc-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: stretch;
}

/* Left: light text panel + service-area chips */
.loc-intro__text {
  background: var(--color-light);
  border-radius: 4px;
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.loc-intro__subtitle {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  color: var(--color-black);
}

.loc-intro__body {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.loc-intro__body p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-black);
  opacity: 0.8;
}

.loc-intro__areas {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.loc-area {
  display: inline-flex;
  align-items: center;
  height: 51px;
  padding: 0 24px;
  background: var(--color-white);
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--color-black);
  white-space: nowrap;
}

/* Right: map embed stacked over a light office card */
.loc-intro__aside {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.loc-intro__map {
  flex: 1 1 auto;
  min-height: 275px;
  border-radius: 4px;
  overflow: hidden;
  background: #e9edef; /* neutral placeholder behind the Google Maps embed */
}

.loc-intro__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 275px;
  border: 0;
}

.loc-office {
  flex: none;
  background: var(--color-light);
  border-radius: 4px;
  padding: 30px;
}

.loc-office__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-black);
  margin-bottom: 24px;
}

.loc-office__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.loc-office__row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-black);
}

.loc-office__row a {
  color: var(--color-black);
  text-decoration: none;
}

.loc-office__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- Services grid, color-inverted ----
   Reuses .svc-services__inner / .svc-grid / .svc-card markup;
   only the colour scheme flips to dark. Layout + hover come from
   the base .svc-* rules (incl. their responsive breakpoints). */
.svc-services--invert .svc-services__inner {
  background: var(--color-black);
}

.svc-services--invert .eyebrow {
  color: var(--color-white);
}

.svc-services--invert .section-title {
  color: var(--color-white);
}

.svc-services--invert .svc-services__lead {
  color: var(--color-white);
  opacity: 0.7;
}

.svc-services--invert .svc-card {
  background: #262d37;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.svc-services--invert .svc-card__num {
  background: var(--color-black);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--color-white);
}

.svc-services--invert .svc-card__title {
  color: var(--color-white);
}

.svc-services--invert .svc-card__desc {
  color: var(--color-white);
  opacity: 0.7;
}

.svc-services--invert .svc-card__link {
  color: var(--color-white);
}

/* Spacing between the dark services panel and the light portfolio band.
   Location-only classes (.svc-services--invert / .portfolio--loc) so the
   shared .svc-services + .portfolio blocks stay untouched elsewhere.
   Desktop: 120px below the dark panel + 120px above portfolio. */
.svc-services--invert {
  padding-bottom: 120px;
}

.portfolio--loc {
  padding-top: 120px;
}

/* keep the lift subtle on dark (the light-mode shadow is invisible here) */
@media (hover: hover) {
  .svc-services--invert .svc-card:hover {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  }
}

/* ---- Location page responsive ---- */
@media (max-width: 1024px) {
  .loc-intro {
    padding: 64px 0;
  }
  .loc-intro__head {
    margin-bottom: 40px;
  }
  .loc-intro__grid {
    grid-template-columns: 1fr;
  }
  .loc-intro__map {
    min-height: 320px;
  }
  /* base .svc-services adds margin-bottom:100px here to overlap the dark Why
     section on the services page — the location page has none, so drop it
     and let padding-bottom:60 control the gap to the portfolio. */
  .svc-services--invert {
    margin-bottom: 0;
  }
}

@media (max-width: 640px) {
  .loc-intro__text,
  .loc-office {
    padding: 20px;
  }
  .loc-intro__subtitle {
    font-size: 20px;
  }
  .loc-area {
    height: 44px;
    padding: 0 18px;
    font-size: 15px;
  }
  .loc-intro__map {
    min-height: 260px;
  }
  /* Mobile gap between the dark panel and portfolio = 64px below + 64px above.
     Cancel the inner panel's -100px pull (services-page Why overlap) which
     would otherwise eat the gap. */
  .svc-services--invert {
    padding-bottom: 64px;
  }
  .svc-services--invert .svc-services__inner {
    margin-bottom: 0;
  }
  .portfolio--loc {
    padding-top: 64px;
  }
}

/* ============================================================
   WordPress content templates (blog index, single post, page,
   404, search, comments). Kept minimal — reuses the design tokens.
   ============================================================ */
.entry { padding: 160px 0 96px; }
.entry--center { text-align: center; }
.container--narrow { max-width: 820px; }
.entry__head { margin-bottom: 40px; }
.entry__byline { margin-top: 10px; color: #6b7178; font-family: var(--font-body); }
.entry__media { margin: 0 0 32px; border-radius: 4px; overflow: hidden; }
.entry__media img { width: 100%; height: auto; display: block; }
.entry__content { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--color-black); }
.entry__content > * + * { margin-top: 1.1em; }
.entry__content h2 { font-family: var(--font-display); font-size: 30px; margin-top: 1.6em; }
.entry__content h3 { font-family: var(--font-display); font-size: 22px; margin-top: 1.4em; }
.entry__content a { color: var(--color-orange); text-decoration: underline; }
.entry__content img { max-width: 100%; height: auto; border-radius: 4px; }
.entry__content ul, .entry__content ol { padding-left: 1.3em; }
.entry__content li { margin-top: 0.4em; }
.entry__content blockquote { border-left: 3px solid var(--color-orange); padding-left: 20px; color: #4a5059; font-style: italic; }
/* Gutenberg blocks (the article is edited natively in the block editor). */
.entry__content .wp-block-quote { border-left: 3px solid var(--color-orange); padding-left: 20px; color: #4a5059; font-style: italic; }
.entry__content figure, .entry__content .wp-block-image { margin: 1.4em 0; }
.entry__content .wp-block-image img { width: 100%; height: auto; border-radius: 4px; }
.entry__content figcaption { margin-top: 8px; font-size: 14px; color: #6b7178; text-align: center; }
.entry__content .wp-block-separator { border: 0; border-top: 1px solid rgba(34, 40, 49, 0.12); margin: 2em 0; }
.entry__content .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; background: var(--color-orange); color: #fff; font-family: var(--font-body); font-weight: 600; padding: 14px 26px; border-radius: 4px; text-decoration: none; }
.entry__content .alignwide, .entry__content .alignfull { max-width: 100%; }
.entry__content .aligncenter { margin-left: auto; margin-right: auto; }
.entry__lead { margin-top: 14px; color: #6b7178; font-family: var(--font-body); font-size: 18px; }
.entry__actions { margin-top: 32px; }
.entry--center .entry__actions { display: flex; justify-content: center; }

.pagination, .nav-links { display: flex; gap: 8px; justify-content: center; margin-top: 56px; flex-wrap: wrap; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid rgba(34,40,49,.15); border-radius: 4px; font-family: var(--font-body); font-weight: 600; color: var(--color-black); text-decoration: none; }
.pagination .page-numbers.current { background: var(--color-orange); border-color: var(--color-orange); color: #fff; }

@media (max-width: 1024px) { .entry { padding: 130px 0 72px; } }
@media (max-width: 640px) { .entry { padding: 110px 0 56px; } }

/* ============================================================
   Portfolio lightbox (popup gallery)
   ============================================================ */
.pf-card[data-lightbox] { cursor: pointer; }
.xx-lb {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center;
  padding: 40px; background: rgba(34, 40, 49, 0.92);
}
.xx-lb.is-open { display: flex; }
.xx-lb__figure {
  margin: 0; max-width: min(1100px, 92vw); max-height: 86vh;
  display: flex; flex-direction: column; align-items: center;
}
.xx-lb__img {
  max-width: 100%; max-height: 80vh; object-fit: contain;
  border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.xx-lb__cap {
  margin-top: 14px; color: #fff; font-family: var(--font-body);
  font-size: 14px; opacity: 0.85; text-align: center;
}
.xx-lb__close, .xx-lb__nav {
  position: absolute; border: 0; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, 0.12); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; transition: background 0.18s ease;
}
.xx-lb__close:hover, .xx-lb__nav:hover { background: var(--color-orange); }
.xx-lb__close { top: 20px; right: 24px; width: 44px; height: 44px; font-size: 26px; }
.xx-lb__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 30px; }
.xx-lb__prev { left: 24px; }
.xx-lb__next { right: 24px; }
.xx-lb__count {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: #fff; font-family: var(--font-body); font-size: 13px; opacity: 0.7;
}
@media (max-width: 640px) {
  .xx-lb { padding: 14px; }
  .xx-lb__nav { width: 40px; height: 40px; font-size: 24px; }
  .xx-lb__prev { left: 8px; }
  .xx-lb__next { right: 8px; }
  .xx-lb__close { top: 10px; right: 12px; width: 40px; height: 40px; }
}

/* ============================================================
   Blog listing page — full-bleed grey header tucked under the
   floating nav, shorter than other pf-heroes; listing grid 3-up.
   `.blog.blog--list` (two classes) keeps a higher specificity than
   the `section.blog` base so these paddings win.
   ============================================================ */
.pf-hero--blog { padding: 132px 0 44px; }
.blog.blog--list { padding-top: 56px; padding-bottom: 96px; }
.blog--list .blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 31px 31px;
  width: 100%;
  max-width: 1210px;
}
/* Single article: the pf-hero already supplies the top spacing, so the
   body only needs a small 30px gap (not the full header clearance). */
.entry.entry--post { padding-top: 30px; }
@media (max-width: 1024px) {
  .pf-hero--blog { padding: 120px 0 40px; }
  .blog--list .blog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pf-hero--blog { padding: 112px 0 40px; }
  /* 15px top/bottom, flush to the screen edges left/right. */
  .blog.blog--list { padding: 15px 0px; }
  /* Homepage blog teaser grid. Placed before the listing rule below so the
     listing (same specificity) keeps its own 15px padding. */
  .blog .blog__grid { padding: 40px 0px; }
  /* Separate stacked articles with a soft background panel instead of a divider
     line (the card already has its own rule — two lines looked busy). The extra
     top padding clears the date badge that overhangs the image. */
  /* The homepage teaser turns .blog__grid into a horizontal carousel (negative
     bleed margin + overflow). Reset that on the listing so it's a clean stack
     with 30px top/bottom breathing room. */
  .blog--list .blog__grid {
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 0;
    overflow: visible;
    padding: 15px 15px;
  }
  .blog--list .blog-card {
    background: var(--color-light);
    border-radius: 12px;
    padding: 44px 16px 24px;
  }
}

/* ============================================================
   Pricing page
   ============================================================ */
.pr-pricing { background: var(--color-white); padding: 72px 0 120px; }
.pr-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--color-light);
  border-radius: 4px;
  padding: 5px;
  margin: 0 auto 40px;
}
.pr-pricing .container { display: flex; flex-direction: column; align-items: center; }
.pr-tab {
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-black);
  background: transparent;
  padding: 12px 28px;
  border-radius: 4px;
  transition: background 0.18s ease, color 0.18s ease;
}
.pr-tab.is-active { background: var(--color-orange); color: #fff; }
.pr-panel { display: none; width: 100%; }
.pr-panel.is-active { display: block; }
.pr-list {
  border: 1px solid rgba(34, 40, 49, 0.1);
  border-radius: 6px;
  overflow: hidden;
}
.pr-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 28px;
  border-top: 1px solid rgba(34, 40, 49, 0.08);
}
.pr-row:first-child { border-top: 0; }
.pr-row:nth-child(even) { background: var(--color-light); }
.pr-row__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  color: var(--color-black);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pr-row__note {
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  color: var(--color-orange);
}
.pr-row__price {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-black);
  white-space: nowrap;
}
.pr-row__unit {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  color: #6b7178;
}
.pr-note {
  margin-top: 28px;
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: #6b7178;
}
@media (max-width: 1024px) { .pr-pricing { padding: 56px 0 80px; } }
@media (max-width: 640px) {
  .pr-row { padding: 16px 18px; gap: 14px; }
  .pr-row__label { font-size: 15px; }
  .pr-row__price { font-size: 19px; }
  .pr-tab { padding: 10px 18px; font-size: 14px; }
}

/* ============================================================
   Warranty page
   ============================================================ */
.wr-body { background: var(--color-white); padding: 80px 0 120px; }
.wr-blocks {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.wr-block { display: flex; gap: 28px; }
.wr-block__num {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--color-orange);
  min-width: 48px;
  padding-top: 4px;
}
.wr-block__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: var(--color-black);
  margin-bottom: 14px;
}
.wr-block__body { font-size: 16px; line-height: 1.7; }
.wr-block__body ul { margin-top: 0.8em; padding-left: 1.2em; }
.wr-block__body li { margin-top: 0.4em; }
@media (max-width: 1024px) { .wr-body { padding: 56px 0 80px; } }
@media (max-width: 640px) {
  .wr-block { gap: 16px; }
  .wr-block__num { min-width: 34px; font-size: 20px; }
  .wr-block__title { font-size: 22px; }
}

/* ============================================================
   Full-screen mobile menu (≤1024). Replaces the old inline burger
   dropdown with a full-height overlay carrying the whole nav tree,
   service areas, contacts and a sticky CTA.
   ============================================================ */
@media (max-width: 1024px) {
  /* The inline desktop menu is superseded by the .mmenu overlay on touch. */
  .nav__menu,
  .nav__actions { display: none !important; }
}

.mmenu {
  position: fixed;
  /* The panel "grows out" of the floating header card: same side insets as
     .site-header, attached flush to its bottom edge (JS sets --xx-mmenu-top),
     rounded bottom corners + drop shadow so the two read as one card. */
  top: var(--xx-mmenu-top, 97px);
  left: var(--gutter);
  right: var(--gutter);
  bottom: auto;
  max-height: calc(100dvh - var(--xx-mmenu-top, 97px) - 16px);
  z-index: 90; /* under .site-header (100) — the bar stays on top */
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 0 0 4px 4px;
  border-top: 1px solid rgba(34, 40, 49, 0.08);
  box-shadow: 0 28px 56px rgba(34, 40, 49, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
}
.mmenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.mmenu-backdrop { display: none; }

/* The real header stays visible above the menu, so the menu's own head row
   (logo + close) is redundant — hidden, markup kept for easy restore. */
.mmenu__head {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(34, 40, 49, 0.08);
}
.mmenu__logo-img { display: block; width: auto; height: 44px; }
.mmenu__close {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--color-light);
  border-radius: 50%;
  cursor: pointer;
  flex: 0 0 auto;
}
.mmenu__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--color-black);
  border-radius: 2px;
}
.mmenu__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.mmenu__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

.mmenu__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 20px 28px;
}
.mmenu__group { padding: 4px 0 18px; border-bottom: 1px solid rgba(34, 40, 49, 0.08); }
.mmenu__group:last-of-type { border-bottom: 0; }
.mmenu__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #787c82;
}
.mmenu__eyebrow .eyebrow__dot { width: 8px; height: 8px; background: var(--color-orange); border-radius: 2px; flex: 0 0 auto; }
.mmenu__item {
  display: block;
  padding: 10px 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.1;
  color: var(--color-black);
  text-decoration: none;
}
.mmenu__item--big { font-size: 20px; padding: 10px 0; }
.mmenu__item:active { color: var(--color-orange); }

.mmenu__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mmenu__chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  background: var(--color-light);
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-black);
  text-decoration: none;
}
.mmenu__chip:active { background: var(--color-orange); color: #fff; }

/* Contact rows hidden for now (markup kept in nav.php for easy restore). */
.mmenu__contact { padding: 18px 0 6px; display: none; flex-direction: column; gap: 4px; }
.mmenu__crow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-black);
  text-decoration: none;
}
.mmenu__crow svg { flex: 0 0 auto; }
.mmenu__crow--static { color: #6b7178; font-weight: 400; }

/* Social row hidden for now (markup kept in nav.php for easy restore). */
.mmenu__social { display: none; gap: 12px; padding: 14px 0 4px; }
.mmenu__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--color-light);
  border-radius: 50%;
  color: var(--color-black);
}
.mmenu__social svg { width: 18px; height: 18px; }

.mmenu__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(34, 40, 49, 0.08);
  background: var(--color-white);
  border-radius: 0 0 4px 4px; /* follow the card's rounded bottom */
}
/* The card is gutter-narrower than the viewport, so both foot buttons share
   the row 50/50 and shrink gracefully instead of overflowing. */
.mmenu__cta {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  text-align: center;
  padding-left: 12px;
  padding-right: 12px;
}
.mmenu__call {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border: 1px solid rgba(34, 40, 49, 0.18);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-black);
  text-decoration: none;
  white-space: nowrap;
}
.mmenu__call svg { flex: 0 0 auto; }
.mmenu__call span {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Lock the page behind the open menu. */
body.mmenu-open { overflow: hidden; }

@media (max-width: 360px) {
  .mmenu__call span { display: none; }
}

/* ============================================================
   ESTIMATE POP-UP MODAL  (+ Contact Form 7 styling glue)
   ============================================================ */
.xx-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.xx-modal.is-open {
  display: flex;
}
body.xx-modal-open {
  overflow: hidden;
}
.xx-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(34, 40, 49, 0.6);
}
.xx-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  margin: auto;
  background: var(--color-white);
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}
.xx-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 30px;
  line-height: 1;
  color: var(--color-black);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.xx-modal__close:hover {
  opacity: 1;
}
.xx-modal__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-black);
  margin: 0 0 8px;
  padding-right: 30px;
}
.xx-modal__sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-black);
  opacity: 0.8;
  margin: 0 0 24px;
}

/* Inside the modal the dialog IS the card, so drop the .ct-form card chrome. */
.ct-form--modal {
  flex: none;
  gap: 0;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* ---- Contact Form 7 glue: make CF7's own markup use the site form styles ---- */
.ct-form .wpcf7 {
  width: 100%;
}
.ct-form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
}
.ct-form .wpcf7-form-control-wrap {
  display: block;
}
.ct-form .wpcf7-form br {
  display: none;
}
.ct-form .wpcf7-form p {
  margin: 0;
}
.ct-form .wpcf7-form > p:empty {
  display: none;
}
.ct-form .wpcf7-spinner {
  margin: 0 12px;
}
.ct-form .wpcf7-not-valid {
  border-color: #d6402f;
}
.ct-form .wpcf7-not-valid-tip {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  color: #d6402f;
}
.ct-form .wpcf7-response-output {
  margin: 0 !important;
  padding: 12px 16px !important;
  border-width: 1px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
}

/* acceptance / consent checkbox → looks like .ct-consent */
.ct-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}
.ct-form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  cursor: pointer;
}
.ct-form .wpcf7-acceptance input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--color-black);
}
.ct-form .wpcf7-acceptance .wpcf7-list-item-label {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-black);
  opacity: 0.6;
}

@media (max-width: 640px) {
  .xx-modal {
    padding: 16px;
    align-items: stretch;
  }
  .xx-modal__dialog {
    padding: 28px 18px;
  }
}

/* ============================================================
   MOBILE MENU — collapsible groups (+) and 3rd-level service lists
   ============================================================ */
/* Row: section link + "+" toggle sitting on one line */
.mmenu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mmenu__row .mmenu__item {
  flex: 1 1 auto;
  min-width: 0;
}

/* The "+" button: soft circle, two thin bars; the vertical bar rotates away
   when open. One size everywhere (rows and group headers). */
.mmenu__plus {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-light);
  cursor: pointer;
  transition: background 0.2s ease;
}
.mmenu__plus:active {
  background: #e9e9e7;
}
.mmenu__plus span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.6px;
  border-radius: 1px;
  background: var(--color-black);
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.mmenu__plus span:last-child {
  transform: translate(-50%, -50%) rotate(90deg);
}
.mmenu__plus[aria-expanded="true"] span:last-child,
.mmenu__eyebrow--btn[aria-expanded="true"] .mmenu__plus span:last-child {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

/* 3rd level: services of a section, indented under the row */
.mmenu__sub {
  display: none;
  margin: 0 0 6px 2px;
  padding: 2px 0 4px 14px;
  border-left: 2px solid rgba(34, 40, 49, 0.1);
}
.mmenu__node.is-open .mmenu__sub {
  display: block;
}
.mmenu__subitem {
  display: block;
  padding: 8px 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-black);
  text-decoration: none;
}
.mmenu__subitem:active {
  color: var(--color-orange);
}

/* Collapsible group (Materials, Service areas): the eyebrow itself is a button */
.mmenu__eyebrow--btn {
  width: 100%;
  margin-bottom: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
/* Collapsed accordion group sits tight between its borders — the usual
   18px group padding comes back only when it is expanded. */
.mmenu__group--acc {
  padding-bottom: 4px;
}
.mmenu__group--acc.is-open {
  padding-bottom: 18px;
}
.mmenu__eyebrow--btn .mmenu__plus--mini {
  margin-left: auto;
}

/* Service-areas group hidden for now (markup kept in nav.php for easy restore). */
.mmenu__group--areas {
  display: none;
}
.mmenu__group--acc .mmenu__panel {
  display: none;
  padding-top: 10px;
}
.mmenu__group--acc.is-open .mmenu__panel {
  display: block;
}

/* ============================================================
   TRUSTINDEX REVIEWS WIDGET — site typography / layout glue
   (text elements only: the widget's stars use its own icon font)
   ============================================================ */
.testimonials--ti .testimonials__head {
  margin-bottom: 8px;
}
.xx-ti {
  width: 100%;
}
.xx-ti .ti-widget .ti-name,
.xx-ti .ti-widget .ti-date,
.xx-ti .ti-widget .ti-header,
.xx-ti .ti-widget .ti-review-content,
.xx-ti .ti-widget .ti-review-text-container,
.xx-ti .ti-widget .ti-rating-text,
.xx-ti .ti-widget .ti-read-more,
.xx-ti .ti-widget .ti-load-more-reviews-button,
.xx-ti .ti-widget .ti-footer,
.xx-ti .ti-widget .ti-profile-details {
  font-family: var(--font-body) !important;
}
.xx-ti .ti-widget .ti-name {
  font-weight: 600 !important;
  color: var(--color-black) !important;
}
.xx-ti .ti-widget .ti-review-content {
  color: var(--color-black) !important;
}
.ti-footer.ti-footer-grid.source-Google {
  margin: 0 !important;
}

/* CF7 double-submit guard: while the form is mid-flight the button is inert */
.wpcf7-form.submitting .wpcf7-submit {
  pointer-events: none;
  opacity: 0.65;
  cursor: default;
}