/* Component styles — every block from 06-component-inventory.md.
   Loaded after base.css. */

/* ────────── Buttons ────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: 450 var(--fs-body)/var(--lh-body) var(--font-body);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sharp);
  transition: opacity var(--duration-base) var(--easing-out),
              background-color var(--duration-base) var(--easing-out),
              color var(--duration-base) var(--easing-out);
  text-decoration: none;
  white-space: nowrap;
}

.btn--primary {
  background: var(--brand-blue);
  color: var(--white);
}
.btn--primary:hover { opacity: 0.85; }

.btn--primary-on-dark {
  background: var(--cream);
  color: var(--ink);
}
.btn--primary-on-dark:hover { opacity: 0.9; }

.btn--dashed {
  background: transparent;
  border: 0;
  border-bottom: 1px dashed currentColor;
  border-radius: 0;
  padding: var(--space-3) 0;
  font-weight: 500;
  color: var(--ink);
}
.btn--dashed.btn--on-dark { color: var(--white); }
.btn--dashed:hover { opacity: 0.7; }

.btn__arrow {
  width: 16px; height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transform: translateY(1px);
}

.btn__dot {
  width: 6px; height: 6px;
  flex-shrink: 0;
  display: inline-block;
  background: currentColor;
  border-radius: 50%;
}

/* ────────── Header ────────── */

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--space-4) var(--page-pad-x);
}

.site-header--solid {
  position: relative;
  background: var(--white);
  border-bottom: 0;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  height: 40px;
  color: var(--white);
}
.site-header--solid .site-header__brand { color: var(--ink); }
.site-header--overlay .site-header__brand { color: var(--white); }
.site-header__logo {
  height: 40px;
  width: auto;
  display: block;
}
@media (max-width: 640px) {
  .site-header__logo { height: 32px; }
}
/* Legacy text wordmark — kept for fallback if logo image is missing. */
.site-header__wordmark {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 22px;
  letter-spacing: 0.01em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  color: var(--white);
  font-weight: 450;
}
.site-header--solid .site-nav__link { color: var(--ink); }

/* Plus icon — from Figma design */
.site-nav__plus {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* Dropdown item wrapper */
.site-nav__item {
  position: relative;
}

/* Dropdown panel */
.site-nav__dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--border-ink-10);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
  padding: var(--space-2) 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 200;
}

.site-nav__drop-link {
  display: block;
  padding: var(--space-2) var(--space-4);
  color: var(--ink);
  font-size: 14px;
  font-weight: 450;
  white-space: nowrap;
  line-height: 1.5;
}
.site-nav__drop-link:hover {
  background: var(--sand, #f5f2ee);
  color: var(--ink);
}

/* Desktop: hover to open */
@media (min-width: 1025px) {
  /* Hover bridge: keeps :hover active while cursor crosses the gap. */
  .site-nav__item::after {
    content: "";
    position: absolute;
    left: -10px;
    right: -10px;
    top: 100%;
    height: 14px;
  }

  .site-nav__item:hover .site-nav__dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .site-nav__item:hover .site-nav__plus {
    transform: rotate(45deg);
  }
}

.site-nav__divider {
  display: none;
}

.site-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-4);
  font-weight: 500;
  font-size: 15px;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-sharp);
  white-space: nowrap;
  transition: opacity var(--duration-quick) var(--easing-out);
}
.site-nav__cta:hover { opacity: 0.85; }
.site-header--solid .site-nav__cta {
  background: var(--ink);
  color: var(--white);
}


.site-nav__menu-toggle {
  display: none;
  width: 28px; height: 28px;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}
.site-header--overlay .site-nav__menu-toggle { color: var(--white); }
.site-header--solid   .site-nav__menu-toggle { color: var(--ink); }
/* When the menu is open the panel below has a white card background, so the
   toggle's transparent-overlay-white state would clash with the card. The
   button itself stays where it is, so darken it once the user opens the menu. */
.site-header--overlay .site-nav__menu-toggle[aria-expanded="true"] { color: var(--ink); }

@media (max-width: 1024px) {
  .site-nav { display: none; }
  .site-nav__menu-toggle { display: inline-flex; }
  .site-nav.site-nav--open {
    display: flex;
    position: absolute;
    top: calc(100% + var(--space-3));
    left: var(--page-pad-x);
    right: var(--page-pad-x);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--border-ink-10);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  .site-nav.site-nav--open .site-nav__link {
    color: var(--ink);
  }
  .site-nav.site-nav--open .site-nav__cta {
    background: var(--ink);
    color: var(--white);
    align-self: flex-start;
    margin-top: var(--space-1);
  }
  .site-nav.site-nav--open .site-nav__divider {
    width: 100%;
    height: 1px;
    opacity: 1;
    background: var(--border-ink-10);
    margin: var(--space-1) 0;
  }

  /* Mobile: items fill full width. Plus icon sits to the left of the label
     so the parent buttons line up with the dropdown items beneath them. */
  .site-nav.site-nav--open .site-nav__item {
    width: 100%;
  }
  .site-nav.site-nav--open .site-nav__link {
    width: 100%;
    justify-content: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
  }

  /* Mobile accordion dropdown */
  .site-nav__dropdown {
    position: static;
    transform: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, max-height 0.25s ease;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
  }
  .site-nav__item.is-open .site-nav__dropdown {
    opacity: 1;
    max-height: 400px;
    pointer-events: auto;
    padding: var(--space-1) 0 var(--space-2) var(--space-3);
  }
  .site-nav__item.is-open .site-nav__plus {
    transform: rotate(45deg);
  }
  .site-nav__drop-link {
    padding: var(--space-1) var(--space-2);
    font-size: 13px;
    color: var(--ink-60, #666);
  }
}

/* ────────── Hero — full image (Home) ────────── */

.page-masthead {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--space-9) + var(--space-5)) var(--page-pad-x) var(--space-9);
  color: var(--white);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.page-masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(32, 32, 32, 0.68) 0%, rgba(32, 32, 32, 0.56) 45%, rgba(32, 32, 32, 0.74) 100%);
  pointer-events: none;
}

.page-masthead__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.page-masthead .section-head__kicker {
  color: rgba(255, 255, 255, 0.85);
}

.page-masthead__title {
  max-width: 820px;
  font-size: var(--fs-display-xl);
  line-height: 1.05;
  margin-top: var(--space-3);
}

.page-masthead__lede {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-body-lg);
  margin-top: var(--space-6);
}

.page-masthead__lede + .page-masthead__lede {
  margin-top: var(--space-3);
}

@media (max-width: 1024px) {
  .page-masthead {
    min-height: 520px;
    padding-block: var(--space-9) var(--space-8);
  }
}
@media (max-width: 640px) {
  .page-masthead {
    min-height: 420px;
  }
  .page-masthead__title {
    font-size: var(--fs-display-md);
    line-height: 1.1;
  }
  .page-masthead__lede {
    font-size: var(--fs-body);
  }
}

.hero-full {
  position: relative;
  min-height: 900px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr min-content;
  align-items: start;
  /* Background stays full-bleed; horizontal padding scales with viewport so
     content stays aligned with .container content edges at any width. */
  padding-block: var(--space-9);
  padding-inline: max(var(--page-pad-x), calc((100% - var(--container-max)) / 2));
  overflow: hidden;
  color: var(--white);
  background: url("../img/hero-home.jpg") center/cover no-repeat;
}

.hero-full::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--overlay-hero);
  pointer-events: none;
}

.hero-full > * { position: relative; z-index: 1; }

.hero-full__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 644px;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  grid-row: 2;
}

.hero-full__heading-line {
  max-width: 100%;
}

.hero-full__copy {
  max-width: 644px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  grid-row: 2;
}

.hero-full__cta-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .hero-full {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto;
    min-height: 80vh;
    gap: var(--space-6);
  }
  .hero-full__heading {
    grid-row: 2;
    grid-column: 1;
  }
  .hero-full__copy {
    grid-row: 3;
    grid-column: 1;
  }
}

/* ────────── Hero — editorial text (About) ────────── */

.hero-editorial {
  display: grid;
  grid-template-columns: 644px 644px;
  column-gap: 0;
  row-gap: 40px;
  padding-top: var(--space-9);
  padding-bottom: 0;
  align-items: start;
}

.hero-editorial__heading-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hero-editorial__kicker {
  font-size: 16px;
  color: var(--ink-soft);
  opacity: 0.6;
}
.hero-editorial__heading {
  font-size: 60px;
  line-height: 1.1;
}

.hero-editorial__lede {
  color: var(--ink-soft);
  max-width: 644px;
}
.hero-editorial__strapline {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: var(--space-4);
}
.hero-editorial__lede p + p { margin-top: var(--space-4); }

.hero-editorial__image {
  margin-top: var(--space-7);
  width: 100%;
  height: 719px;
  background: linear-gradient(135deg, var(--surface-blue-pale), var(--brand-blue));
  grid-column: 1 / -1;
}

#about-hero-image .hero-editorial__image {
  margin-top: 0;
}

@media (max-width: 1024px) {
  .hero-editorial {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .hero-editorial__image { height: 50vh; }
}

/* ────────── Hero — about cover (dark editorial, bottom-aligned) ────────── */

.hero-about-cover {
  position: relative;
  min-height: 900px;
  display: flex;
  align-items: flex-end;
  padding-block: var(--space-9);
  /* Same alignment pattern as .hero-full / .cta-band */
  padding-inline: max(var(--page-pad-x), calc((100% - var(--container-max)) / 2));
  background: url("../img/hero-home.jpg") center/cover no-repeat;
  color: var(--white);
}
.hero-about-cover::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.45) 55%,
    rgba(0, 0, 0, 0.7) 100%
  );
  pointer-events: none;
}
.hero-about-cover > * { position: relative; z-index: 1; }

.hero-about-cover__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: end;
  width: 100%;
}
.hero-about-cover__heading-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hero-about-cover__copy-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.hero-about-cover__kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}
.hero-about-cover__heading {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-xl);
  line-height: 1.05;
  color: var(--white);
}
.hero-about-cover__strapline {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-style: italic;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.92);
}
.hero-about-cover__lede {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.hero-about-cover__lede p + p { margin-top: var(--space-3); }

@media (max-width: 1024px) {
  .hero-about-cover { min-height: 80vh; }
  .hero-about-cover__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .hero-about-cover__heading { font-size: var(--fs-display-lg); }
}

/* ────────── Hero — split image (Service) ────────── */

.hero-split {
  display: grid;
  grid-template-columns: 1fr 644px;
  gap: var(--space-8);
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
  align-items: stretch;
}

.hero-split__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block: var(--space-7);
}

.hero-split__kicker {
  color: var(--ink-soft);
  font-weight: 500;
}

.hero-split__heading { font-size: var(--fs-display-lg); }

.hero-split__image {
  height: 828px;
  background: linear-gradient(180deg, var(--surface-blue-pale), var(--brand-blue));
}

@media (max-width: 1024px) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .hero-split__image { height: 50vh; }
}

/* ────────── Stats strip ────────── */

.stats-strip {
  display: flex;
  width: 100%;
  color: var(--ink);
}

.stats-strip__item {
  flex: 1 0 0;
  background: var(--surface-blue-pale);
  padding: var(--space-6) var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  border-right: 1px solid var(--border-ink-25);
  text-align: center;
}
.stats-strip__item:last-child { border-right-color: var(--border-white-25); }

.stats-strip__num {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-md);
  line-height: var(--lh-display);
}

.stats-strip__label {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.stats-strip--dark {
  color: var(--white);
}

.stats-strip--dark .stats-strip__item {
  background: #28374b;
  border-right-color: var(--border-white-25);
}

@media (max-width: 1024px) {
  .stats-strip { flex-wrap: wrap; }
  .stats-strip__item { flex-basis: 50%; }
  .stats-strip__item:nth-child(even) { border-right: 0; }
  .stats-strip__item:nth-child(-n+2) { border-bottom: 1px solid var(--border-ink-25); }
  .stats-strip--dark .stats-strip__item:nth-child(-n+2) { border-bottom-color: var(--border-white-25); }
  /* Three items: avoid a half-width orphan on the second row */
  .stats-strip:not(:has(.stats-strip__item:nth-child(4))) .stats-strip__item:nth-child(3) {
    flex-basis: 100%;
    border-right: 0;
  }
}

@media (max-width: 640px) {
  .stats-strip__item { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--border-ink-25); }
  .stats-strip__item:last-child { border-bottom: 0; }
  .stats-strip--dark .stats-strip__item { border-bottom-color: var(--border-white-25); }
}

/* ────────── USP card grid ────────── */

.usp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.usp-grid--four { grid-template-columns: repeat(4, 1fr); }

/* Our Approach — dark variant (#202C3C background) */
#approach-copy .section-head__kicker { color: rgba(255, 255, 255, 0.72); }
#approach-copy .section-head__title  { color: var(--white); }
#approach-copy .usp-card__title      { color: var(--white); }
#approach-copy .usp-card__body       { color: rgba(255, 255, 255, 0.82); }

.usp-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Catalog grid — title + description + price + image */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7) var(--space-6);
}
.catalog-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--easing-out);
}
.catalog-card:hover { transform: translateY(-3px); }
.catalog-card:hover .catalog-card__title { color: var(--brand-blue); }
.catalog-card__image {
  width: 100%;
  aspect-ratio: 1;
  background-color: var(--surface-blue-pale);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-image);
}
.catalog-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.catalog-card__title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-xs);
  line-height: 1.15;
  color: var(--ink);
  transition: color var(--duration-base) var(--easing-out);
}
.catalog-card__desc {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.catalog-card__price {
  color: var(--brand-blue);
  font-size: var(--fs-body-lg);
  font-weight: 500;
  margin-top: var(--space-1);
}
@media (max-width: 1024px) {
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .catalog-grid { grid-template-columns: 1fr; }
}

/* Zip Blinds — z-LOCK patented system (full-width feature section) */
.zlock-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
.zlock-feature__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-image);
}
.zlock-feature__content {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 560px;
}
.zlock-feature__content .section-head__kicker {
  margin-bottom: var(--space-3);
}
.zlock-feature__content .section-head__title {
  font-size: var(--fs-display-lg);
  color: var(--ink);
}
.zlock-feature__lede {
  color: var(--ink);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-style: italic;
}
.zlock-feature__body {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin-top: var(--space-5);
}
.zlock-feature__body p + p { margin-top: var(--space-4); }

@media (max-width: 1024px) {
  .zlock-feature {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.usp-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.usp-card__icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: block;
}

.usp-card__title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-sm);
  line-height: var(--lh-display);
  color: var(--ink);
}

.usp-card__body {
  color: var(--ink-soft);
}

.offer-split {
  display: grid;
  grid-template-columns: 360px 800px;
  gap: 56px;
  margin-top: var(--space-7);
  align-items: start;
}

.offer-split__image {
  width: 360px;
  height: 452px;
  background: url("../img/offer-editorial-figma.jpg") center/cover no-repeat;
}

.offer-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-5);
}

.offer-point {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.offer-point__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 1024px) {
  .usp-grid, .usp-grid--four { grid-template-columns: repeat(2, 1fr); }
  .offer-split {
    grid-template-columns: 1fr;
  }
  .offer-split__image {
    min-height: 360px;
  }
}
@media (max-width: 640px) {
  .usp-grid, .usp-grid--four { grid-template-columns: 1fr; }
  .offer-points { grid-template-columns: 1fr; }
}

/* ────────── Split image-text ────────── */

.split-block {
  display: grid;
  grid-template-columns: 644px 1fr;
  gap: var(--space-8);
  align-items: center;
}

.split-block--image-right { grid-template-columns: 1fr 644px; }

.split-block__image {
  width: 100%;
  height: 520px;
  background: linear-gradient(135deg, var(--surface-blue-pale), var(--brand-blue));
}
.split-block__image--tall { height: 694px; }
.split-block__image--square {
  aspect-ratio: 1 / 1;
  height: auto;
}

/* Showroom / split column — responsive YouTube embed (16:9) */
.embed-youtube {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f0f0f;
}
.embed-youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.split-block__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 644px;
}

.split-block__heading {
  font-size: var(--fs-display-lg);
}

.split-block__body { color: var(--ink-soft); }

.showroom-layout .split-block__body > .split-block__subhead {
  margin-top: var(--space-6);
  color: var(--ink);
}

.showroom-layout__left > .split-block__subhead {
  margin-top: var(--space-6);
  color: var(--ink);
}

@media (max-width: 1024px) {
  .split-block, .split-block--image-right {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .split-block__image { height: 360px; }
  .split-block__image--square {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* ────────── Process step list ────────── */

.process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-8);
}

.process-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.process-step__num {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-md);
  line-height: var(--lh-display);
  color: var(--brand-blue);
}

.process-step__title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-sm);
  line-height: var(--lh-display);
  color: var(--ink);
}

.process-step__body { color: var(--ink-soft); }

@media (max-width: 640px) {
  .process-grid { grid-template-columns: 1fr; }
}

/* ────────── Section headings ────────── */

.section-head {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 644px;
  margin-bottom: var(--space-7);
}

.section-head__kicker {
  color: var(--ink-soft);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  margin-bottom: var(--space-3);
}

.section-head__title {
  font-size: var(--fs-display-lg);
  color: var(--ink);
}

/* Roller service page — approach headline reads cleaner as two lines at desktop */
#approach .section-head {
  max-width: min(900px, 100%);
}

.section-head__title--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: var(--lh-display);
}

.section-head__title-line {
  max-width: 100%;
}

.section-head__lede {
  color: var(--ink-soft);
  margin-top: var(--space-6);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

/* Zip blinds / Usage — wider intro so the lede reads in ~5 lines on desktop */
#zip-blinds-usage .section-head {
  /* Wider than default 644 so the 5-sentence lede wraps to 4 lines, not 8+. */
  max-width: min(1280px, 100%);
}

/* ────────── Showcase grids ────────── */

.gallery-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.gallery-tile {
  width: 100%;
  height: 480px;
  background: linear-gradient(135deg, var(--surface-blue-pale), var(--brand-blue));
}

.installations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .installations-grid { grid-template-columns: 1fr; }
  .gallery-tile { height: 280px; }
}

/* ────────── Specs table (Service) ────────── */

.specs-table {
  display: grid;
  grid-template-columns: repeat(var(--specs-cols, 3), 1fr);
  border-top: 1px solid var(--specs-border, var(--border-ink-10));
}
.specs-table__row {
  display: contents;
}
.specs-table__cell {
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border-ink-10);
  color: var(--ink-soft);
}
.specs-table__cell--head {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-xs);
  color: var(--ink);
}
.specs-table__cell--label {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 640px) {
  /* Stop using grid for the table on mobile — collapse rows into stacked
     "cards" where the row label is the card title and each value cell
     renders its column header inline (via data-label / ::before).
     `display: contents` on rows is overridden to `block` so rows become
     real layout boxes again. */
  .specs-table {
    display: block;
    border-top: none;
  }
  .specs-table__row {
    display: block;
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--border-ink-10);
  }
  .specs-table__row:first-child {
    /* Hide the column-header row — column headers are now inline labels per cell. */
    display: none;
  }
  .specs-table__cell {
    padding: 4px 0;
    border-bottom: none;
  }
  .specs-table__cell--label {
    /* Row label becomes the card title. */
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
    font-size: var(--fs-display-xs);
    color: var(--ink);
    padding: 0 0 var(--space-3) 0;
  }
  .specs-table__cell:not(.specs-table__cell--label):not(.specs-table__cell--head) {
    display: grid;
    grid-template-columns: 130px 1fr;
    column-gap: var(--space-4);
    align-items: baseline;
  }
  .specs-table__cell:not(.specs-table__cell--label):not(.specs-table__cell--head)::before {
    content: attr(data-label);
    font-weight: 500;
    color: var(--ink-soft);
  }
}

/* ────────── Single-feature image (Local detail) ────────── */

.feature-image {
  position: relative;
  height: 480px;
  width: 100%;
  background: linear-gradient(180deg, var(--surface-blue-pale), var(--brand-blue));
  overflow: hidden;
}
.feature-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(50,50,50,0.8) 1.222%, rgba(50,50,50,0) 75.5%);
}
.feature-image__content {
  position: absolute;
  left: var(--space-7);
  bottom: var(--space-7);
  z-index: 1;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 644px;
}
.feature-image__heading {
  font-size: var(--fs-display-lg);
  color: var(--cream);
}

/* ────────── Google reviews placeholder ────────── */

.reviews-plugin {
  background: var(--white);
  border: 1px solid var(--border-ink-10);
  padding: var(--space-7);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-6);
  align-items: center;
}

.reviews-plugin__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.reviews-plugin__rating {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 64px;
  line-height: var(--lh-display);
}
.reviews-plugin__stars { color: #f5b400; letter-spacing: 2px; font-size: 20px; }
.reviews-plugin__count { color: var(--ink-soft); }

.reviews-plugin__quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.reviews-plugin__quote-text {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-xs);
  color: var(--ink);
}
.reviews-plugin__quote-author { color: var(--ink-soft); font-size: 14px; }

@media (max-width: 1024px) {
  .reviews-plugin { grid-template-columns: 1fr; }
}

/* ────────── Testimonial wall (About) ────────── */

.testimonial-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border-ink-10);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.testimonial-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.testimonial-card__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface-blue-pale);
  flex-shrink: 0;
}
.testimonial-card__name { font-weight: 500; }
.testimonial-card__stars { color: #f5b400; letter-spacing: 1px; }
.testimonial-card__body { color: var(--ink-soft); font-size: 14px; }

@media (max-width: 1024px) { .testimonial-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .testimonial-wall { grid-template-columns: 1fr; } }

/* ────────── Awards / press strip (About) ────────── */

.logos-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-6);
  border-block: 1px solid var(--border-ink-10);
}
.logos-strip__logo {
  width: 120px; height: 48px;
  background: var(--ink-muted);
  -webkit-mask: linear-gradient(black, black);
          mask: linear-gradient(black, black);
  opacity: 0.5;
}

/* ────────── FAQ accordion ────────── */

.faq {
  display: flex;
  flex-direction: column;
}
.faq__item {
  border-bottom: 1px solid var(--border-ink-10);
  padding-block: var(--space-5);
}
.faq__item[open] { border-bottom-color: var(--ink); }
.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__question {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-xs);
  line-height: var(--lh-display);
  color: var(--ink);
  flex: 1;
}
.faq__chevron {
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-top: 6px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  transform: rotate(-90deg);
  transition: transform var(--duration-base) var(--easing-out);
}
.faq__item[open] .faq__chevron { transform: rotate(0); }
.faq__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height 360ms var(--easing-out),
    opacity 220ms var(--easing-out),
    transform 360ms var(--easing-out);
  will-change: max-height, opacity, transform;
}

.faq__item[open] > .faq__panel {
  opacity: 1;
  transform: translateY(0);
}

.faq__answer {
  color: var(--ink-soft);
  margin-top: var(--space-3);
  max-width: 872px;
}
.faq__footer {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-5);
}
.faq__footer-prompt {
  color: var(--ink-soft);
  opacity: 0.5;
  padding: var(--space-2) 0;
}

@media (prefers-reduced-motion: reduce) {
  .faq__panel {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* ────────── Specification split (single service) ────────── */

.spec-split {
  display: grid;
  grid-template-columns: 416px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.spec-split__head {
  margin-bottom: 0;
}

.spec-split__head .section-head__title {
  max-width: 416px;
}

.spec-fabric-grid {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.spec-fabric-grid__tile {
  width: 160px;
  height: 120px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

@media (max-width: 1100px) {
  .spec-split {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .spec-split__head .section-head__title {
    max-width: none;
  }
}

/* ────────── Dark CTA band ────────── */

.cta-band {
  position: relative;
  min-height: 900px;
  /* Same alignment pattern as .hero-full — background full-bleed, content
     constrained to --container-max with 56px gutter from viewport. */
  padding-block: var(--space-9);
  padding-inline: max(var(--page-pad-x), calc((100% - var(--container-max)) / 2));
  color: var(--white);
  background: url("../img/cta-band.jpg") center/cover no-repeat;
  display: grid;
  grid-template-columns: 1fr;
  align-content: end;
  align-items: start;
  justify-items: start;
  gap: var(--space-6);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(50,50,50,0.8) 1.222%, rgba(50,50,50,0) 75.5%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band .section-head__kicker {
  display: block;
  margin-bottom: var(--space-3);
  color: rgba(255, 255, 255, 0.72);
}
.cta-band__heading {
  font-size: var(--fs-display-lg);
  color: var(--cream);
  max-width: 644px;
}
.cta-band__sub {
  margin-top: var(--space-6);
  opacity: 0.5;
}
.cta-band__actions {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  max-width: 644px;
  width: 100%;
}
.cta-band__sub-actions {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .cta-band__actions,
  .cta-band__sub-actions {
    width: 100%;
  }
}

/* ────────── Two-column body text ────────── */

.text-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  max-width: 1328px;
  margin-inline: auto;
  color: var(--ink-soft);
}
@media (max-width: 1024px) {
  .text-2col { grid-template-columns: 1fr; }
}

/* Centered intro paragraph block (single service) */
.plain-intro-copy {
  max-width: 872px;
  margin-inline: auto;
  color: var(--ink-soft);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ────────── Footer ────────── */

.site-footer {
  background:
    radial-gradient(ellipse 60% 220px at 50% 0%, rgba(255, 255, 255, 0.05), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 100' width='320' height='100'%3E%3Cpath d='M0 50 Q 80 32 160 50 T 320 50' fill='none' stroke='white' stroke-opacity='0.025' stroke-width='1.4'/%3E%3C/svg%3E")
    #202C3C;
  color: var(--white);
  padding: var(--space-9) var(--page-pad-x) var(--space-7);
}
.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
/* V3 footer CTA block: centered tagline + Request a quote button */
.site-footer__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
  margin-bottom: 64px; /* + flex gap of inner (var(--space-7) = 56px) = 120px to columns */
}
.site-footer__heading {
  font-size: var(--fs-display-lg);
  color: var(--white);
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.site-footer__columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1.35fr;
  gap: var(--space-6);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-col + .footer-col__sub { margin-top: var(--space-6); }
.footer-col__kicker {
  opacity: 0.3;
}
.footer-col__rule {
  width: 79px; height: 1px;
  background: var(--white);
  margin-top: var(--space-3);
}
.footer-col__view-all {
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px dashed var(--white);
  padding: var(--space-2) 0;
  font-weight: 500;
  width: 188px;
}
.footer-col__view-all .btn__arrow {
  margin-left: auto;
}
.footer-col a:hover { opacity: 0.8; }
.footer-col--reach { min-width: 0; }
.reach-us__item {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 100%;
  line-height: 1.4;
}
.reach-us__item--hours {
  color: var(--white);
  opacity: 0.8;
}
.reach-us__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.78;
}
.reach-us__text {
  min-width: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

/* Footer social icons row */
.site-footer__socials {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-5);
}
.site-footer__socials-label {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.65;
  margin-right: var(--space-2);
}
.site-footer__socials a {
  color: var(--white);
  opacity: 0.65;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--duration-base) var(--easing-out);
}
.site-footer__socials a:hover {
  opacity: 1;
}
@media (max-width: 640px) {
  .site-footer__socials {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .site-footer__socials-label {
    flex: 1 0 100%;
    margin-right: 0;
    margin-bottom: var(--space-1);
  }
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.site-footer__copyright {
  flex: 1 0 0;
  font-weight: 500;
  opacity: 0.5;
}
.site-footer__legal-link {
  font-weight: 450;
}

@media (max-width: 1024px) {
  .site-footer__columns { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-7); }
}
@media (max-width: 640px) {
  .site-footer__columns { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ────────── Floating WhatsApp ────────── */

.whatsapp-float {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 80;
  color: var(--white);
  transition: transform var(--duration-base) var(--easing-out);
}
.whatsapp-float:hover { transform: translateY(-2px); }
.whatsapp-float svg { width: 28px; height: 28px; }

/* ────────── Section spacing helpers ────────── */

.section-stats { padding-block: 0; }

.section--paper { background: #f7fafd; }
.section--paper-light { background: #fbfdff; }
#awards.section--paper { background: #f7fafd; }

/* ────────── "What we make" — expandable category ────────── */

.what-we-make {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* .section-head already has margin-bottom: space-7; paired with this flex gap it
   doubled the header → first accordion gap (~112px). Tighten to 40px total. */
.what-we-make .section-head {
  margin-bottom: calc(40px - var(--space-7));
}

.what-we-make__title {
  font-size: var(--fs-display-lg);
  color: var(--ink);
}

.category {
  border-bottom: 1px solid var(--border-ink-10);
  padding-block: var(--space-5);
}

.category.category--open { border-bottom-color: var(--ink); }

.category__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  cursor: pointer;
  list-style: none;
}

.category__head::-webkit-details-marker { display: none; }

.category__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  /* padding-top is 0 when closed and animates to space-6 when open. Without
     this, the padding stays visible behind the clipped max-height: 0 and
     causes a 40px snap when [open] flips — the "harsh" finish on close. */
  padding-top: 0;
  min-height: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  /* Padding & max-height animate together so the box fully collapses.
     Opacity is shorter with a slight delay on open so cards fade in after
     the box has begun opening. */
  transition: max-height 520ms cubic-bezier(0.4, 0, 0.2, 1),
              padding-top 520ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 320ms cubic-bezier(0.4, 0, 0.2, 1) 60ms;
}

/* Visual state is controlled by .category--open (toggled at click time in JS),
   NOT by [open] (which JS only sets after the close animation finishes).
   Animating against [open] would mean padding-top transition only starts at
   the END of the close, causing the visible "snap". */
.category.category--open .category__content {
  opacity: 1;
  padding-top: var(--space-6);
}

.category__head-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.category__name {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-sm);
  line-height: var(--lh-display);
  color: var(--ink);
}

.category__lede {
  color: var(--ink-soft);
  max-width: 644px;
}

.category__chevron {
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-top: 6px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  transform: rotate(-90deg);
  transition: transform var(--duration-base) var(--easing-out);
}
.category--open .category__chevron,
.category.category--open .category__chevron { transform: rotate(180deg); }

.product-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--easing-out),
              filter var(--duration-base) var(--easing-out);
}

.product-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #d9d9d9;
  background-size: cover;
  background-position: center;
  transition: transform var(--duration-base) var(--easing-out),
              box-shadow var(--duration-base) var(--easing-out);
}

.product-card:nth-child(1) .product-card__image { background-image: url("../img/homes-residential.jpg"); }
.product-card:nth-child(2) .product-card__image { background-image: url("../img/hero-home.jpg"); }
.product-card:nth-child(3) .product-card__image { background-image: url("../img/homes-commercial.jpg"); }
.product-card:nth-child(4) .product-card__image { background-image: url("../img/cta-band.jpg"); }
.product-card:nth-child(5) .product-card__image { background-image: url("../img/homes-residential.jpg"); }
.product-card:nth-child(6) .product-card__image { background-image: url("../img/hero-home.jpg"); }
.product-card:nth-child(7) .product-card__image { background-image: url("../img/homes-commercial.jpg"); }
.product-card:nth-child(8) .product-card__image { background-image: url("../img/project-03.jpg"); }
.product-card:nth-child(9) .product-card__image { background-image: url("../img/project-04.jpg"); }
.product-card:nth-child(10) .product-card__image { background-image: url("../img/project-02.jpg"); }
.product-card:nth-child(11) .product-card__image { background-image: url("../img/project-03.jpg"); }
.product-card:nth-child(12) .product-card__image { background-image: url("../img/project-04.jpg"); }
.product-card:nth-child(13) .product-card__image { background-image: url("../img/project-02.jpg"); }
.product-card:nth-child(14) .product-card__image { background-image: url("../img/work-business.jpg"); }
.product-card:nth-child(15) .product-card__image { background-image: url("../img/work-home.jpg"); }
.product-card:nth-child(16) .product-card__image { background-image: url("../img/work-business.jpg"); }
.product-card:nth-child(17) .product-card__image { background-image: url("../img/work-home.jpg"); }

.product-card__name {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-xs);
  line-height: 1.2;
  color: var(--ink);
  transition: color var(--duration-base) var(--easing-out);
}

.product-card__desc {
  color: var(--ink-soft);
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    transform: translateY(-4px);
    filter: saturate(1.03);
  }

  .product-card:hover .product-card__image {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  }

  .product-card:hover .product-card__name {
    color: var(--brand-blue);
  }
}

.product-card:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  .product-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .product-cards { grid-template-columns: 1fr; }
}

/* ────────── "We work with both" — homes vs offices ────────── */

.work-with-both {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.work-with-both__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--fs-display-lg);
  color: var(--ink);
  line-height: var(--lh-display);
}

.work-with-both__title-line {
  max-width: 100%;
}

.work-with-both__lede {
  max-width: 644px;
  color: var(--ink-soft);
  margin-bottom: var(--space-7);
}

.work-with-both__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  width: 100%;
}

.work-card {
  position: relative;
  height: 800px;
  overflow: hidden;
  color: var(--white);
  text-decoration: none;
  background: var(--surface-dark);
  background-size: cover;
  background-position: center;
}

.work-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(178deg, rgba(50,50,50,0.8) 0%, rgba(50,50,50,0.64) 45%, rgba(50,50,50,0) 97%);
  pointer-events: none;
}

.work-card__inner {
  position: absolute;
  inset: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
  text-align: left;
}

.work-card__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 555px;
}

.work-card__title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-sm);
  line-height: var(--lh-display);
}

.work-card__body { opacity: 0.8; }

.work-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: 188px;
  border-bottom: 1px dashed var(--white);
  padding: var(--space-2) 0;
  font-weight: 500;
  color: var(--white);
}
.work-card__cta .btn__arrow { margin-left: auto; }

@media (max-width: 1024px) {
  .work-with-both__cards { grid-template-columns: 1fr; }
  .work-card { height: 560px; }
}

/* ────────── Awards + Media (Recognised and featured) ────────── */

.recognised {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* Merged recognition wall (homepage revamp preview) */
.recognised-merged {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.recognised-merged .section-head {
  max-width: 760px;
  margin-bottom: 0;
}

.recognised-merged__title-line {
  display: block;
}

.recognised-merged__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.recognised-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.recognised-card__logo {
  width: 100%;
  height: 188px;
  background: var(--white);
  border: 1px solid var(--border-ink-10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}

.recognised-card__logo img {
  max-width: 148px;
  max-height: 132px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.recognised-card__meta {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.recognised-card__title {
  color: var(--ink);
}

.recognised__kicker {
  text-align: center;
  color: var(--ink-soft);
  opacity: 0.6;
}

.recognised-row {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  padding-top: var(--space-6);
  border-top: 1px dashed var(--ink);
}

.recognised-row__label {
  width: 302px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-xs);
  color: var(--ink);
}

.recognised-row__items {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
}
.recognised-row--awards .recognised-row__items { grid-template-columns: repeat(3, minmax(0, 302px)); }

.recognition-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-ink-25);
}

.recognition-entry__num {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-body);
  color: var(--brand-blue);
  opacity: 0.5;
  width: 30px;
  flex-shrink: 0;
}

.recognition-entry__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.recognition-entry__logo {
  width: 188px;
  height: 220px;
  background: var(--white);
  border: 2px solid #808080;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.recognition-entry__logo img {
  max-width: 102px;
  max-height: 96px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.recognition-entry__caption {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 188px;
}

@media (max-width: 1024px) {
  .recognised-merged__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recognised-row { flex-direction: column; gap: var(--space-5); }
  .recognised-row__label { width: auto; }
  .recognised-row__items, .recognised-row--awards .recognised-row__items {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .recognised-merged__grid { grid-template-columns: 1fr; }
  .recognised-row__items, .recognised-row--awards .recognised-row__items {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1025px) {
  .recognised-merged__title-line {
    white-space: nowrap;
  }
}

/* ────────── Google reviews plugin (proper grid) ────────── */

.reviews-block {
  display: flex;
  flex-direction: column;
}

.reviews-block__head {
  background: var(--surface-dark);
  color: var(--white);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.reviews-block__head-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.reviews-block__google {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.reviews-block__google span { font-weight: 300; opacity: 0.7; }

.reviews-block__rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
}

.reviews-block__rating strong { font-weight: 600; }
.reviews-block__rating .stars { color: #f5b400; letter-spacing: 1px; }
.reviews-block__rating .count { opacity: 0.7; }

.reviews-block__write {
  background: var(--white);
  color: var(--ink);
  padding: var(--space-3) var(--space-5);
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
}

.reviews-block__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  background: #f7fafd;
}

.review-card {
  background: var(--white);
  border: 1px solid var(--border-ink-10);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.review-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.review-card__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-blue-pale);
  flex-shrink: 0;
  background-size: cover;
}
.review-card__name { font-weight: 500; font-size: 14px; }
.review-card__when { color: var(--ink-soft); font-size: 12px; }
.review-card__stars { color: #f5b400; letter-spacing: 1px; font-size: 14px; }
.review-card__quote { color: var(--ink); font-size: 14px; line-height: 1.5; }

.reviews-block__more {
  align-self: center;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-faint);
  font-size: 14px;
  color: var(--ink);
  border-radius: 4px;
}

@media (max-width: 1024px) {
  .reviews-block__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .reviews-block__grid { grid-template-columns: 1fr; }
  .reviews-block__head { flex-direction: column; align-items: flex-start; }
}

/* ────────── Process — 4 columns horizontal ────────── */

.process-grid--4col {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) {
  .process-grid--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .process-grid--4col { grid-template-columns: 1fr; }
}

/* ────────── Gallery — full-width stacked images ────────── */

.gallery-feature-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.gallery-feature-stack .gallery-tile {
  height: 480px;
  background-size: cover;
  background-position: center;
}
@media (max-width: 640px) {
  .gallery-feature-stack .gallery-tile { height: 280px; }
}

/* ────────── Process — split image and numbered list ────────── */

.process-split {
  display: grid;
  grid-template-columns: 416px 644px;
  gap: 268px;
  align-items: start;
}

.process-split__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.process-split__image {
  width: 100%;
  height: 520px;
  background: url("../img/built-for-singapore.jpg") center/cover no-repeat;
}

.process-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border-ink-25);
}

.process-list__item {
  display: grid;
  grid-template-columns: 73px 1fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border-ink-25);
}

.process-list__num {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 36px;
  line-height: 1.1;
  color: var(--brand-blue);
  opacity: 0.3;
}

.process-list__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.process-list__title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 24px;
  line-height: 1.1;
  color: var(--ink);
}

.process-list__body {
  color: var(--ink-soft);
}

.how-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-6);
}

.recent-work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.section--recent-work {
  padding-top: var(--space-9);
  padding-bottom: 0;
}

.recent-project {
  position: relative;
  display: block;
  width: 100%;
  height: 480px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--easing-out),
              filter var(--duration-base) var(--easing-out),
              box-shadow var(--duration-base) var(--easing-out);
}

.recent-project::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(50, 50, 50, 0.8) 0%, rgba(50, 50, 50, 0) 59.827%);
}

.recent-project__content {
  position: absolute;
  left: 40px;
  bottom: 40px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--white);
}

.recent-project__title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 24px;
  line-height: 1.1;
  opacity: 1;
  transition: opacity var(--duration-base) var(--easing-out);
}

.recent-project__meta {
  font-size: 16px;
}

.recent-project__meta em {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}

@media (hover: hover) and (pointer: fine) {
  .recent-project:hover {
    transform: translateY(-4px);
    filter: saturate(1.03);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  }

  .recent-project:hover .recent-project__title {
    opacity: 0.88;
  }
}

.recent-project:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
}

.recent-work-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-2);
}

@media (max-width: 1024px) {
  .process-split { grid-template-columns: 1fr; gap: var(--space-5); }
  .process-split__image { height: 360px; }
  .how-grid { grid-template-columns: 1fr; }
  .recent-work-grid { grid-template-columns: 1fr; }
  .recent-project { height: 360px; }
  .recent-project__content {
    left: 24px;
    bottom: 24px;
  }
}

/* ────────── FAQ — split heading/content ────────── */

.faq-section {
  display: grid;
  grid-template-columns: 400px 872px;
  justify-content: space-between;
  gap: var(--space-6);
  align-items: start;
}

.faq-section__head {
  margin-bottom: 0;
  gap: var(--space-2);
}

.faq-section__head .section-head__title {
  font-size: var(--fs-display-lg);
}

.faq-section__content {
  width: 100%;
}

@media (max-width: 1024px) {
  .faq-section {
    grid-template-columns: 1fr;
  }
}

/* ────────── About page refinements ────────── */

.belief-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 32px;
  width: 100%;
}

/* About — beliefs block: centred grid (wider measure than default) */
.section--beliefs .belief-grid {
  max-width: 1200px;
  margin-inline: auto;
}

@media (max-width: 1024px) {
  .belief-grid {
    grid-template-columns: 1fr;
  }
}

/* ────────── Service page refinements ────────── */

.use-cases-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-7);
}

.use-case-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-ink-25);
}

.use-case-thumb {
  width: 160px;
  height: 120px;
  background-size: cover;
  background-position: center;
}

.local-detail .split-block__image {
  height: 600px;
}

@media (max-width: 1024px) {
  .use-cases-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .use-case-item {
    grid-template-columns: 1fr;
  }

  .use-case-thumb {
    width: 100%;
    height: 220px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   STEP 9.5 — Components for Blog index, Single blog, Contact, Testimonials
   ════════════════════════════════════════════════════════════════════════ */

/* ────────── Article card (Blog index + related) ────────── */

.article-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--easing-out);
}
.article-card:hover { transform: translateY(-2px); }
.article-card:hover .article-card__title { color: var(--brand-blue); }

.article-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--surface-blue-pale), #b9d3ec);
  background-size: cover;
  background-position: center;
}

.article-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.article-card__meta::before, .article-card__meta::after {
  content: none;
}
.article-card__meta-dot {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink-muted);
  opacity: 0.6;
}

.article-card__title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-sm);
  line-height: var(--lh-display);
  color: var(--ink);
  transition: color var(--duration-base) var(--easing-out);
}

.article-card__lede {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Featured article — bigger, split image+content */

.article-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--border-ink-10);
  text-decoration: none;
  color: inherit;
}
.article-featured__media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--surface-blue-pale), #b9d3ec);
  background-size: cover;
  background-position: center;
}
.article-featured__title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display);
  color: var(--ink);
  margin-block: var(--space-3) var(--space-4);
}
.article-featured__lede {
  color: var(--ink-soft);
  margin-bottom: var(--space-5);
}

@media (max-width: 1024px) {
  .article-featured { grid-template-columns: 1fr; }
}

/* Article grid — 3-up */

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7) var(--space-6);
}
@media (max-width: 1024px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .article-grid { grid-template-columns: 1fr; } }

/* Filter chips */

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border-ink-10);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-7);
}
.filter-chip {
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: var(--ink-soft);
  font-size: 14px;
  border: 1px solid var(--border-ink-10);
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--duration-base) var(--easing-out), color var(--duration-base) var(--easing-out);
}
.filter-chip:hover { background: var(--surface-blue-pale); }
.filter-chip--active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

/* Pagination */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
}
.pagination__link {
  padding: var(--space-2) var(--space-4);
  border-radius: 4px;
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
}
.pagination__link:hover { background: var(--surface-blue-pale); }
.pagination__link--current {
  background: var(--ink);
  color: var(--white);
}
.pagination__link--disabled { opacity: 0.4; pointer-events: none; }

/* ────────── Article (single blog post) ────────── */

.article-hero {
  padding-block: var(--space-9) var(--space-7);
  display: flex;
  flex-direction: column;
  /* gap: 0 — element-level margins govern rhythm so it matches the site-wide
     kicker→H2 = 12px / H2→lede = 40px pattern (was uniform 40px between every
     element which read too loose). */
  gap: 0;
  max-width: 920px;
  margin-inline: auto;
}
/* Breadcrumb sits 12px above the H1 (was 24px). Order in markup is now:
   breadcrumb → H1 → category → lede → byline (per Jayden's preference). */
.article-hero__breadcrumb { margin-bottom: var(--space-3); }
.article-hero__title      { margin-bottom: 0; }
.article-hero__category   { margin-top: var(--space-3); display: inline-block; }
.article-hero__lede       { margin-top: var(--space-5); }
.article-hero__breadcrumb {
  font-size: 13px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.article-hero__breadcrumb a { color: inherit; text-decoration: none; }
.article-hero__breadcrumb a:hover { color: var(--brand-blue); }

.article-hero__category {
  font-size: 13px;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.article-hero__title {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  color: var(--ink);
}
.article-hero__lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 720px;
}
.article-hero__byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-ink-10);
}
.article-hero__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-blue-pale);
  flex-shrink: 0;
}
.article-hero__byline-text {
  display: flex;
  flex-direction: column;
}
.article-hero__author { font-weight: 500; color: var(--ink); }
.article-hero__date-readtime { color: var(--ink-soft); font-size: 14px; }

.article-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--surface-blue-pale), var(--brand-blue));
  background-size: cover;
  background-position: center;
  margin-bottom: var(--space-8);
}

/* Long-form prose body */

.article-body {
  max-width: 720px;
  margin-inline: auto;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.7;
  padding-bottom: var(--space-9);
}
.article-body > * + * { margin-top: var(--space-5); }
.article-body h2 {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-md);
  line-height: var(--lh-display);
  margin-top: var(--space-8);
  color: var(--ink);
}
.article-body h3 {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-sm);
  line-height: var(--lh-display);
  margin-top: var(--space-7);
  color: var(--ink);
}
.article-body p { color: var(--ink); }
.article-body a {
  color: var(--ink);
  border-bottom: 1px solid var(--brand-blue);
  text-underline-offset: 4px;
  transition: color var(--duration-base) var(--easing-out);
}
.article-body a:hover { color: var(--brand-blue); }
.article-body ul, .article-body ol { padding-left: var(--space-5); }
.article-body li + li { margin-top: var(--space-2); }
.article-body blockquote {
  border-left: 3px solid var(--brand-blue);
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 26px;
  line-height: 1.4;
  color: var(--ink);
}
.article-body figure {
  margin-block: var(--space-7);
}
.article-body figure img,
.article-body figure .article-figure {
  width: 100%;
  display: block;
}
.article-body figure .article-figure {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--surface-blue-pale), var(--brand-blue));
  background-size: cover;
  background-position: center;
}
.article-body figcaption {
  margin-top: var(--space-2);
  color: var(--ink-soft);
  font-size: 14px;
  text-align: center;
}

.article-related {
  background: #f7fafd;
  padding-block: var(--space-9);
}

/* ────────── Contact form ────────── */

.contact-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 1024px) {
  .contact-layout { grid-template-columns: 1fr; }
}

.contact-form {
  background: var(--white);
  border: 1px solid var(--border-ink-10);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-field label {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
  font: 450 var(--fs-body)/var(--lh-body) var(--font-body);
  color: var(--ink);
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border: 1px solid var(--border-ink-25);
  border-radius: var(--radius-md);
  outline: 0;
  transition: border-color var(--duration-base) var(--easing-out);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--brand-blue);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field__hint {
  font-size: 13px;
  color: var(--ink-soft);
}
.form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--ink-soft);
}
.form-checkbox input { width: 16px; height: 16px; }

.form-field--phone-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-2);
}

.form-submit-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.form-submit-row .btn { align-self: flex-start; }
.form-privacy { font-size: 13px; color: var(--ink-soft); }

/* Contact-side panel */

.contact-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.channels-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.channel-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--border-ink-10);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-base) var(--easing-out);
}
.channel-card:hover { border-color: var(--brand-blue); }
.channel-card__icon {
  width: 40px; height: 40px;
  background: var(--surface-blue-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}
.channel-card__icon--whatsapp { background: #25d366; color: var(--white); }
.channel-card__body { display: flex; flex-direction: column; gap: 2px; }
.channel-card__label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.channel-card__value { font-size: 17px; color: var(--ink); font-weight: 500; }

/* Showroom card */

.showroom-card {
  background: var(--white);
  border: 1px solid var(--border-ink-10);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.showroom-card__map {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--surface-blue-pale), #b9d3ec);
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.showroom-card__map::after {
  content: "🗺 Map placeholder";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); opacity: 0.4; font-size: 14px;
}
.showroom-card__title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-sm);
  color: var(--ink);
}
.showroom-card__meta { color: var(--ink-soft); font-size: 14px; }
.showroom-card__hours {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  font-size: 14px;
  color: var(--ink);
  border-top: 1px solid var(--border-ink-10);
  padding-top: var(--space-4);
}

/* ────────── Testimonials page ────────── */

.testimonials-hero {
  padding-block: var(--space-9) var(--space-7);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.testimonials-hero__title {
  font-size: var(--fs-display-xl);
  color: var(--ink);
  max-width: 900px;
}
.testimonials-hero__lede { color: var(--ink-soft); max-width: 644px; }
.testimonials-hero__rating {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--surface-blue-pale);
  border-radius: 999px;
}
.testimonials-hero__rating-num {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 36px;
  line-height: 1;
  color: var(--ink);
}
.testimonials-hero__stars { color: #f5b400; font-size: 20px; letter-spacing: 2px; }
.testimonials-hero__count { color: var(--ink); font-size: 14px; }

/* Featured quote — large 2-col cards */

.featured-quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
@media (max-width: 1024px) { .featured-quotes { grid-template-columns: 1fr; } }

.featured-quote {
  background: var(--white);
  border: 1px solid var(--border-ink-10);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.featured-quote__stars { color: #f5b400; letter-spacing: 2px; font-size: 18px; }
.featured-quote__body {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
}
.featured-quote__byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}
.featured-quote__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-blue-pale);
  flex-shrink: 0;
}
.featured-quote__name { font-weight: 500; color: var(--ink); }
.featured-quote__source { font-size: 13px; color: var(--ink-soft); }

/* Elfsight slot */

/* Elfsight slot — wrapper around the Elfsight Google Reviews widget div.
   When the widget loads, Elfsight replaces the placeholder content with its
   own UI. The placeholder mimics the homepage `.reviews-block` look so the
   page reads consistently while the widget initialises. */

.elfsight-slot__placeholder {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-ink-10);
  border-radius: var(--radius-image);
  overflow: hidden;
  min-height: 1000px;
}

.elfsight-slot__placeholder-head {
  background: var(--surface-dark);
  color: var(--white);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.elfsight-slot__google {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.elfsight-slot__google span { font-weight: 300; opacity: 0.7; }
.elfsight-slot__rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
}
.elfsight-slot__rating strong { font-weight: 600; }
.elfsight-slot__rating .stars { color: #f5b400; letter-spacing: 1px; }
.elfsight-slot__rating .count { opacity: 0.7; }

.elfsight-slot__placeholder-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-9) var(--space-7);
  color: var(--ink-soft);
  font-size: 15px;
  background: linear-gradient(135deg, #f7fafd 0%, #eaf2fa 100%);
}
.elfsight-slot__hint {
  display: block;
  font-size: 13px;
  opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════════════
   Single blog — 3-column layout (share rail + body + TOC)
   ════════════════════════════════════════════════════════════════════════ */

.article-layout {
  /* Aligns with .container — outer max = content max (1328) + 2 × 56px gutter. */
  max-width: calc(var(--container-max) + 2 * var(--page-pad-x));
  margin-inline: auto;
  padding-inline: var(--page-pad-x);
  padding-bottom: var(--space-9);
  display: grid;
  grid-template-columns: 64px 1fr 260px;
  gap: var(--space-7);
  align-items: start;
}

/* Article body widened from 720 → 820 within the grid */
.article-layout .article-body {
  max-width: 820px;
  margin-inline: 0;
  padding-bottom: 0;
  width: 100%;
  justify-self: center;
}

/* ── Share rail (left) ── */

.article-share {
  position: sticky;
  top: 100px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Centered horizontal share row — used on /blog/<slug>/ above the body.
   Replaces the sticky left rail layout for single posts. */
.article-share-wrap {
  padding-block: var(--space-5) var(--space-6);
  display: flex;
  justify-content: center;
}
.article-share--centered {
  position: static;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.article-share--centered .article-share__label {
  margin-right: var(--space-2);
}

/* Variant of article-layout when share has been pulled out into its own
   centered row above — only body + TOC remain. */
.article-layout--no-share {
  grid-template-columns: minmax(0, 1fr) 240px;
}
@media (max-width: 1024px) {
  .article-layout--no-share { grid-template-columns: 1fr; }
}

.article-share__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: center;
}

.article-share__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border-ink-10);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--duration-base) var(--easing-out),
              border-color var(--duration-base) var(--easing-out),
              color var(--duration-base) var(--easing-out),
              transform var(--duration-base) var(--easing-out);
}
.article-share__btn:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  transform: translateY(-1px);
}
.article-share__btn--whatsapp:hover { background: #25d366; border-color: #25d366; }

.article-share__btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.article-share__copy-feedback {
  position: absolute;
  left: 56px;
  white-space: nowrap;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-base) var(--easing-out);
}
.article-share__btn--copied .article-share__copy-feedback {
  opacity: 1;
}

/* ── TOC (right) ── */

.article-toc {
  position: sticky;
  top: 100px;
  align-self: start;
  padding-left: var(--space-5);
  border-left: 1px solid var(--border-ink-10);
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

.article-toc__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: var(--space-3);
}

.article-toc__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.article-toc__link {
  display: block;
  padding: var(--space-2) 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -22px;
  padding-left: 20px;
  transition: color var(--duration-base) var(--easing-out),
              border-color var(--duration-base) var(--easing-out);
}
.article-toc__link:hover { color: var(--ink); }
.article-toc__link.is-active {
  color: var(--ink);
  border-left-color: var(--brand-blue);
  font-weight: 500;
}

.article-toc__link--sub {
  font-size: 13px;
  padding-left: 36px;
  opacity: 0.85;
}

/* ── Mobile collapse ── */

@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding-bottom: var(--space-7);
  }

  /* TOC becomes a collapsible <details> at the top of the article */
  .article-toc {
    position: static;
    border-left: 0;
    border: 1px solid var(--border-ink-10);
    border-radius: 4px;
    padding: 0;
    max-height: none;
    overflow: visible;
  }
  .article-toc[open] .article-toc__summary { border-bottom: 1px solid var(--border-ink-10); }
  .article-toc__summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    color: var(--ink);
  }
  .article-toc__summary::-webkit-details-marker { display: none; }
  .article-toc__inner { padding: var(--space-4) var(--space-5); }
  .article-toc__label { display: none; }
  .article-toc__link { padding-left: 0; margin-left: 0; border-left: 0; }
  .article-toc__link.is-active { border-left: 0; padding-left: 8px; }

  /* Share rail becomes a horizontal row at top of article */
  .article-share {
    position: static;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid var(--border-ink-10);
    border-bottom: 1px solid var(--border-ink-10);
    padding-block: var(--space-4);
  }
  .article-share__label {
    writing-mode: horizontal-tb;
    transform: none;
    margin: 0;
    margin-right: var(--space-3);
    align-self: center;
  }

  /* Body is full-width on mobile */
  .article-layout .article-body {
    max-width: 100%;
    font-size: 17px;
  }
}

/* When TOC is rendered as <details> on desktop, we still want it static — but
   on desktop it should look like a static sticky list, not an accordion */
@media (min-width: 1025px) {
  .article-toc__summary { display: none; }
  .article-toc__inner { display: contents; }
  .article-toc[open] .article-toc__inner,
  .article-toc:not([open]) .article-toc__inner {
    display: contents;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   CONTACT v2 — three big channel cards + simplified form
   ════════════════════════════════════════════════════════════════════════ */

.contact-hero {
  padding-block: var(--space-9) var(--space-6);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-7);
  align-items: end;
  min-height: 480px;
  position: relative;
}
.contact-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 720px;
}
.contact-hero__title {
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1.05;
  color: var(--ink);
}
.contact-hero__lede {
  color: var(--ink-soft);
  font-size: 18px;
  max-width: 580px;
}
.contact-hero__image {
  width: 100%;
  height: 420px;
  background: linear-gradient(135deg, var(--surface-blue-pale), var(--brand-blue));
  background-size: cover;
  background-position: center;
}
@media (max-width: 1024px) {
  .contact-hero { grid-template-columns: 1fr; min-height: 0; padding-bottom: var(--space-7); }
  .contact-hero__image { height: 280px; order: -1; margin-bottom: var(--space-3); }
}

/* Three big channel cards (primary contact CTAs) */

.contact-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.contact-channel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
  background: var(--white);
  border: 1px solid var(--border-ink-10);
  text-decoration: none;
  color: inherit;
  min-height: 280px;
  transition: border-color var(--duration-base) var(--easing-out),
              transform var(--duration-base) var(--easing-out),
              box-shadow var(--duration-base) var(--easing-out);
}
.contact-channel-card:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(32, 44, 60, 0.08);
}

.contact-channel-card--featured {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.contact-channel-card--featured .contact-channel-card__label,
.contact-channel-card--featured .contact-channel-card__hint {
  color: rgba(255, 255, 255, 0.7);
}
.contact-channel-card--featured:hover {
  background: #1a2433;
}

.contact-channel-card__tag {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  background: #25d366;
  color: var(--white);
  border-radius: 999px;
  font-weight: 600;
}

.contact-channel-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-blue-pale);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.contact-channel-card--featured .contact-channel-card__icon {
  background: #25d366;
  color: var(--white);
}

.contact-channel-card__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 500;
}

.contact-channel-card__action {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 32px;
  line-height: 1.1;
  color: inherit;
}

.contact-channel-card__detail {
  font-size: 18px;
  font-weight: 500;
  color: inherit;
}

.contact-channel-card__hint {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: auto;
}

.contact-channel-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: 500;
  margin-top: var(--space-3);
  color: inherit;
}
.contact-channel-card__arrow .btn__arrow { transition: transform var(--duration-base) var(--easing-out); }
.contact-channel-card:hover .contact-channel-card__arrow .btn__arrow { transform: translateX(3px); }

@media (max-width: 1024px) { .contact-channels { grid-template-columns: 1fr; } }

/* Simplified contact form */

.contact-form-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
.contact-form-v2__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-right: var(--space-4);
}
.contact-form-v2__intro h2 {
  font-size: var(--fs-display-lg);
  color: var(--ink);
}
.contact-form-v2__intro p {
  color: var(--ink-soft);
}
.contact-form-v2 form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--white);
  padding: var(--space-7);
  border: 1px solid var(--border-ink-10);
}
@media (max-width: 1024px) {
  .contact-form-v2 { grid-template-columns: 1fr; }
  .contact-form-v2__intro { padding-right: 0; }
}

/* Showroom strip — wide split */

.showroom-strip {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0;
  border: 1px solid var(--border-ink-10);
  background: var(--white);
}
.showroom-strip__map {
  width: 100%;
  min-height: 360px;
  background: linear-gradient(135deg, var(--surface-blue-pale), #b9d3ec);
  background-size: cover;
  background-position: center;
  position: relative;
}
.showroom-strip__map::after {
  content: "🗺  Map embed loads here at deploy";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); opacity: 0.5; font-size: 14px;
}
.showroom-strip__content {
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.showroom-strip__title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-md);
  color: var(--ink);
}
.showroom-strip__hours-table {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  font-size: 14px;
  border-top: 1px solid var(--border-ink-10);
  border-bottom: 1px solid var(--border-ink-10);
  padding-block: var(--space-4);
}

@media (max-width: 1024px) {
  .showroom-strip { grid-template-columns: 1fr; }
  .showroom-strip__map { min-height: 240px; }
}

/* ════════════════════════════════════════════════════════════════════════
   FAQ PAGE
   ════════════════════════════════════════════════════════════════════════ */

/* FAQ page — 2-column docs-style layout: sticky topics sidebar + body of
   accordion groups. Replaces the horizontal sticky chip nav. */
.faq-layout {
  max-width: calc(var(--container-max) + 2 * var(--page-pad-x));
  margin-inline: auto;
  padding-inline: var(--page-pad-x);
  padding-bottom: var(--space-9);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-8);
  align-items: start;
}

.faq-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-sidebar__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 500;
}

.faq-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-ink-10);
}

.faq-sidebar__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  margin-left: -1px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.faq-sidebar__link:hover { color: var(--ink); }
.faq-sidebar__link.is-active {
  color: var(--ink);
  border-left-color: var(--brand-blue);
  font-weight: 500;
}

.faq-body {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1024px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .faq-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-ink-10);
  }
  .faq-sidebar__label { width: 100%; }
  .faq-sidebar__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
    border-left: 0;
    border-top: 0;
  }
  .faq-sidebar__link {
    margin-left: 0;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-ink-10);
    border-radius: 999px;
  }
  .faq-sidebar__link.is-active {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
  }
}

.faq-category-group {
  margin-bottom: var(--space-9);
  scroll-margin-top: 100px;
}
.faq-category-group:last-child { margin-bottom: 0; }
.faq-category-group__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.faq-category-group__num {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 14px;
  color: var(--brand-blue);
  letter-spacing: 0.08em;
  font-weight: 500;
}
.faq-category-group__title {
  font-size: var(--fs-display-md);
  color: var(--ink);
}
.faq-category-group__lede {
  color: var(--ink-soft);
  max-width: 720px;
}

/* Modern FAQ/Contact revamp blocks */
.faq-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.faq-topic-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--border-ink-10);
}
.faq-topic-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
  color: var(--ink);
}
.faq-topic-card__body {
  color: var(--ink-soft);
}
.faq-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.faq-block {
  border-top: 1px solid var(--border-ink-10);
  padding-top: var(--space-6);
  scroll-margin-top: 100px;
}
.faq-block:first-child { border-top: 0; padding-top: 0; }
.faq-block__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.faq-block__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  color: var(--ink);
}
.faq-block__lede {
  color: var(--ink-soft);
  max-width: 760px;
}

.info-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.info-step {
  border: 1px solid var(--border-ink-10);
  background: var(--white);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.info-step__num {
  color: var(--brand-blue);
  opacity: 0.7;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.info-step__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-xs);
  color: var(--ink);
}
.info-step__body {
  color: var(--ink-soft);
}

@media (max-width: 1024px) {
  .faq-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .faq-topic-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   GALLERY — index + project page
   ════════════════════════════════════════════════════════════════════════ */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7) var(--space-6);
}
@media (max-width: 1024px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .gallery-grid { grid-template-columns: 1fr; } }

/* 2-column variant — used on the Projects index page.
   Larger card images (3:2) feel more cinematic at this width. */
.gallery-grid--two {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-6);
}
.gallery-grid--two .project-card__media {
  aspect-ratio: 3 / 2;
}
.gallery-grid--two .project-card__title {
  font-size: 24px;
}
@media (max-width: 640px) {
  .gallery-grid--two { grid-template-columns: 1fr; gap: var(--space-7); }
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--easing-out);
}
.project-card:hover { transform: translateY(-3px); }
.project-card:hover .project-card__title { color: var(--brand-blue); }

.project-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--surface-blue-pale), #b9d3ec);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.project-card__location {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 500;
}

.project-card__title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 24px;
  line-height: var(--lh-display);
  color: var(--ink);
  transition: color var(--duration-base) var(--easing-out);
}

.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.tag-chip {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border: 1px solid var(--border-ink-25);
  border-radius: 999px;
  color: var(--ink-soft);
}

/* Project (single gallery) page */

.project-hero {
  padding-block: var(--space-9) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 920px;
}
.project-hero__breadcrumb {
  font-size: 13px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.project-hero__breadcrumb a { color: inherit; text-decoration: none; }
.project-hero__breadcrumb a:hover { color: var(--brand-blue); }
.project-hero__location {
  font-size: 13px;
  color: var(--brand-blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.project-hero__title {
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.05;
  color: var(--ink);
}
.project-hero__lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 720px;
}
.project-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-3);
}

.project-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--surface-blue-pale), var(--brand-blue));
  background-size: cover;
  background-position: center;
  margin-bottom: var(--space-9);
}

/* Project body — write-up left, meta sidebar right */

.project-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-9);
  margin-bottom: var(--space-9);
  align-items: start;
}
.project-body__writeup {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 720px;
}
.project-body__writeup > * + * { margin-top: var(--space-4); }
.project-body__writeup h2 {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-sm);
  color: var(--ink);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.project-meta {
  position: sticky;
  top: 100px;
  padding: var(--space-6);
  background: #f7fafd;
  border: 1px solid var(--border-ink-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.project-meta__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: var(--space-1);
}
.project-meta__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-ink-10);
}
.project-meta__row:last-child { border-bottom: 0; padding-bottom: 0; }
.project-meta__row-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.project-meta__row-value {
  font-size: 15px;
  color: var(--ink);
}

@media (max-width: 1024px) {
  .project-body { grid-template-columns: 1fr; gap: var(--space-6); }
  .project-meta { position: static; }
}

/* Asymmetric image gallery */

.image-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-9);
}
.image-gallery__row {
  display: grid;
  gap: var(--space-4);
}
.image-gallery__row--full { grid-template-columns: 1fr; }
.image-gallery__row--split { grid-template-columns: 1fr 1fr; }
.image-gallery__row--third { grid-template-columns: 2fr 1fr; }
.image-gallery__row--third-rev { grid-template-columns: 1fr 2fr; }

.image-gallery__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.image-gallery__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--surface-blue-pale), #b9d3ec);
  background-size: cover;
  background-position: center;
}
.image-gallery__row--full .image-gallery__photo { aspect-ratio: 16 / 9; }
.image-gallery__caption {
  font-size: 13px;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .image-gallery__row--split,
  .image-gallery__row--third,
  .image-gallery__row--third-rev { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   Single project — minimal layout (replaces 2-col body + asymmetric grid)
   ════════════════════════════════════════════════════════════════════════ */

/* Short description after the cover image — single max-width column,
   no headings, just 1–3 paragraphs. */
.project-summary {
  max-width: 720px;
  margin-inline: auto;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  padding-block: var(--space-7);
}
.project-summary > * + * { margin-top: var(--space-3); }

/* Inline meta — flat horizontal row of label/value pairs.
   Replaces the sidebar pattern. Bordered top + bottom for separation. */
.project-inline-header {
  max-width: 860px;
  margin-top: 120px;
  margin-bottom: var(--space-7);
}

.project-inline-header__title {
  margin-bottom: var(--space-4);
  text-align: left;
}

.project-inline-header__lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.project-meta-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-block: 1px solid var(--border-ink-10);
  margin-bottom: var(--space-7);
}
.project-meta-row__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.project-meta-row__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 500;
}
.project-meta-row__value {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .project-meta-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
@media (max-width: 640px) {
  .project-meta-row { grid-template-columns: 1fr; }
}

/* Uniform image grid — 2 columns, consistent 4:3 aspect, modest gap.
   No captions, no asymmetry. */
.project-images-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-9);
}
.project-images-grid__item {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-blue-pale);
}
@media (max-width: 640px) {
  .project-images-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   CONTACT v3 — 2-col details + form, then showroom block
   ════════════════════════════════════════════════════════════════════════ */

.contact-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-9);
  align-items: start;
  padding-block: var(--space-9);
}
@media (max-width: 1024px) {
  .contact-split { grid-template-columns: 1fr; gap: var(--space-7); padding-block: var(--space-8); }
}

.contact-split__details {
  display: flex;
  flex-direction: column;
  /* gap: 0 — inter-element rhythm comes from individual element margins so the
     kicker→H2 spacing matches the site-wide 12px rule (was 36px when flex gap
     compounded with the kicker's own margin-bottom). */
  gap: 0;
}
.contact-split__details > .section-head__kicker { margin-bottom: var(--space-3); }
.contact-split__details > .contact-split__title  { margin-bottom: 0; }
.contact-split__details > .contact-split__lede   { margin-top: var(--space-6); }
.contact-split__details > .contact-details-list  { margin-top: var(--space-7); }
.contact-split__title {
  font-size: var(--fs-display-lg);
  color: var(--ink);
  line-height: var(--lh-display);
}
.contact-split__lede {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.55;
  max-width: 480px;
}

.contact-details-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-ink-10);
}

.contact-detail-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.contact-detail-row__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 500;
}
.contact-detail-row__value {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-sm);
  line-height: 1.2;
  color: var(--ink);
}
.contact-detail-row__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}
.contact-detail-row__hours {
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.contact-detail-row__hours p {
  margin: 0;
}
.contact-detail-row__hours p + p {
  margin-top: var(--space-2);
}

/* Form card on the right */
.contact-form-card {
  background: var(--white);
  border: 1px solid var(--border-ink-10);
  border-radius: 12px;
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (max-width: 640px) {
  .contact-form-card { padding: var(--space-5); }
}

/* V3 comparison-table card pattern (boxed paper-card on white) */
.compare-card {
  background: #E8EEF5;
  border-radius: 16px;
  padding: var(--space-8) var(--space-7);
}
@media (max-width: 1024px) {
  .compare-card { padding: var(--space-7) var(--space-5); }
}
@media (max-width: 640px) {
  .compare-card { padding: var(--space-6) var(--space-4); border-radius: 12px; }
}
.contact-form-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-ink-10);
  margin-bottom: var(--space-2);
}
.contact-form-card__title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-sm);
  color: var(--ink);
}
.contact-form-card__hint {
  font-size: 14px;
  color: var(--ink-soft);
}

/* Dark enquiry section variant (service pages) */
.section--enquiry-dark {
  background: linear-gradient(180deg, var(--surface-dark) 0%, #1f2d40 100%);
}

.contact-split--dark .section-head__kicker,
.contact-split--dark .contact-detail-row__label {
  color: rgba(255, 255, 255, 0.72);
}

.contact-split--dark .contact-split__title,
.contact-split--dark .contact-detail-row__value {
  color: var(--white);
}

.contact-split--dark .contact-split__lede {
  color: rgba(255, 255, 255, 0.82);
}

.contact-split--dark .contact-details-list {
  border-top-color: var(--border-white-25);
}

.contact-split--dark .contact-form-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-white-25);
}

.contact-split--dark .contact-form-card__head {
  border-bottom-color: var(--border-white-25);
}

.contact-split--dark .contact-form-card__title,
.contact-split--dark .contact-form-card__hint,
.contact-split--dark .form-field label,
.contact-split--dark .form-checkbox,
.contact-split--dark .form-privacy,
.contact-split--dark .form-privacy a {
  color: var(--white);
}

.contact-split--dark .form-field input[type="text"],
.contact-split--dark .form-field input[type="tel"],
.contact-split--dark .form-field input[type="email"],
.contact-split--dark .form-field select,
.contact-split--dark .form-field textarea {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-color: var(--border-white-25);
}

.contact-split--dark .form-field input::placeholder,
.contact-split--dark .form-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.contact-split--dark .form-field input:focus,
.contact-split--dark .form-field select:focus,
.contact-split--dark .form-field textarea:focus {
  border-color: var(--white);
}

/* ────────── Showroom block (image + map side-by-side) ────────── */

.showroom-block {
  padding-block: var(--space-9);
  border-top: 1px solid var(--border-ink-10);
}

.showroom-block__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 720px;
  margin-bottom: var(--space-7);
}
.showroom-block__title {
  font-size: var(--fs-display-lg);
  color: var(--ink);
  line-height: var(--lh-display);
}
.showroom-block__address {
  color: var(--ink-soft);
  font-size: 17px;
}

.showroom-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.showroom-media__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--surface-blue-pale);
  background-size: cover;
  background-position: center;
}
.showroom-media__map {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--surface-blue-pale);
  border: 0;
  display: block;
}

@media (max-width: 1024px) {
  .showroom-media { grid-template-columns: 1fr; }
}

.showroom-block__cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

/* ════════════════════════════════════════════════════════════════════════
   Soften every image. 4px radius site-wide via --radius-image.
   Round avatars / icons / dots keep their full radius (overflow rule below).
   ════════════════════════════════════════════════════════════════════════ */

img,
.hero-full,
.cta-band,
.page-masthead,
.hero-editorial__image,
.hero-split__image,
.split-block__image,
.embed-youtube,
.offer-split__image,
.process-split__image,
.gallery-tile,
.feature-image,
.work-card,
.product-card__image,
.article-card__media,
.article-featured__media,
.article-cover,
.article-figure,
.project-card__media,
.project-cover,
.project-images-grid__item,
.recent-project,
.image-gallery__photo,
.contact-hero__image,
.showroom-card__map,
.showroom-media__image,
.showroom-media__map,
.recognised-card__logo {
  border-radius: var(--radius-image);
  /* Ensures background images and any nested layers respect the rounded
     corners (notably for elements with overlay pseudos). */
  overflow: hidden;
}

/* Round shapes that should remain fully circular — re-assert their radius
   in case the rule above tries to override. */
.testimonial-card__avatar,
.review-card__avatar,
.featured-quote__avatar,
.article-hero__avatar,
.contact-channel-card__icon,
.btn__dot,
.whatsapp-float {
  border-radius: 50%;
}

/* ════════════════════════════════════════════════════════════════════════
   ABOUT page — long-form narrative + brand-blue quote, showroom info list,
   careers block. Matches Figma frame 3189:10.
   ════════════════════════════════════════════════════════════════════════ */

.story-narrative {
  max-width: 872px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}
.story-narrative__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.story-narrative__kicker {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.story-narrative__title {
  font-size: var(--fs-display-lg);
  color: var(--ink);
}
.story-narrative__body {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.story-narrative__body p + p { margin-top: var(--space-4); }

.story-quote {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  border-top: 1px dashed var(--brand-blue);
  border-bottom: 1px dashed var(--brand-blue);
  padding-block: var(--space-5);
  margin-block: var(--space-6);
}
.story-quote__icon {
  width: 15px;
  height: 22px;
  flex-shrink: 0;
  background: var(--brand-blue);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 22' fill='black'><path d='M0 22V12C0 5.4 4.5 0 11 0V4C7 4.6 4.5 7.4 4.5 11H6V22H0Z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 22' fill='black'><path d='M0 22V12C0 5.4 4.5 0 11 0V4C7 4.6 4.5 7.4 4.5 11H6V22H0Z'/></svg>") center/contain no-repeat;
}
.story-quote__text {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 32px;
  line-height: 1.1;
  color: var(--brand-blue);
  flex: 1;
}

/* Showroom 5-row info list — sits inside the split-block text column */
.showroom-layout {
  display: grid;
  grid-template-columns: 644px 644px;
  grid-template-rows: auto auto;
  grid-template-areas:
    "head ."
    "image right";
  column-gap: 40px;
  row-gap: 24px;
  align-items: start;
}

.showroom-layout__head {
  grid-area: head;
  max-width: 416px;
}

.showroom-layout__head .section-head__kicker,
.showroom-layout__left .section-head__kicker {
  display: block;
  margin-bottom: var(--space-3);
}
.showroom-layout__head .split-block__lede,
.showroom-layout__left .split-block__lede {
  margin-top: var(--space-6);
}

.showroom-split__image { grid-area: image; }

.showroom-layout__right {
  grid-area: right;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.showroom-layout .split-block__heading {
  margin-bottom: var(--space-2);
}

.showroom-layout .split-block__lede {
  color: var(--ink-soft);
  margin-bottom: var(--space-7);
}

.showroom-layout .split-block__body p + p {
  margin-top: var(--space-4);
}

#about-product .showroom-layout,
#about-product-copy .showroom-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: none;
  grid-template-areas: none;
  row-gap: 0;
  align-items: center;
}

/* Top-align text + image; center image horizontally within right column */
#about-product .showroom-layout {
  align-items: start;
}

/* Right column: video + copy stack (e.g. zip blinds about-product) */
.showroom-layout__right-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: stretch;
  width: 100%;
}

#about-product .showroom-layout__right-stack .split-block__lede {
  margin-bottom: 0;
}

#about-product .showroom-layout > .split-block__image,
#about-product .showroom-layout > .embed-youtube,
#about-product .showroom-layout > .showroom-layout__right-stack {
  justify-self: center;
  width: min(100%, 92%);
  max-width: 620px;
}

#about-product .showroom-layout .split-block__image,
#about-product-copy .showroom-layout .split-block__image {
  background-size: cover;
  background-position: center;
}

#about-product .showroom-layout__left,
#about-product-copy .showroom-layout__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

#about-product .section-head__kicker,
#about-product-copy .section-head__kicker {
  margin-bottom: var(--space-3);
}

#about-product .showroom-layout .split-block__heading,
#about-product-copy .showroom-layout .split-block__heading {
  margin-bottom: var(--space-3);
}

/* Match section-head title → lede spacing when intro has no split-block__lede (e.g. zip blinds) */
#about-product .showroom-layout__left > .split-block__heading:has(+ .split-block__body) {
  margin-bottom: 0;
}
#about-product .showroom-layout__left > .split-block__heading + .split-block__body {
  margin-top: var(--space-6);
}

#about-product .split-block__lede,
#about-product-copy .split-block__lede {
  margin-bottom: var(--space-3);
}

#about-product .showroom-layout__left .split-block__lede:not(:first-of-type) {
  margin-top: var(--space-4);
}

#about-product .showroom-layout__left > .faq,
#about-product-copy .showroom-layout__left > .faq {
  margin-top: var(--space-6);
  width: 100%;
}

#about-product .showroom-layout__left > .showroom-info-list__heading,
#about-product-copy .showroom-layout__left > .showroom-info-list__heading {
  margin-top: var(--space-4);
  width: 100%;
}

#about-product .showroom-layout__left > .showroom-info-list__heading + .faq,
#about-product-copy .showroom-layout__left > .showroom-info-list__heading + .faq {
  margin-top: 0;
}

/* Multi-paragraph lede in maintenance copy — avoid stacked space-6 between blocks */
#about-product-copy .showroom-layout__left .split-block__lede:not(:first-of-type) {
  margin-top: var(--space-4);
}

#about-product .showroom-info-list,
#about-product .showroom-info-list__row,
#about-product-copy .showroom-info-list,
#about-product-copy .showroom-info-list__row {
  width: 100%;
}

#about-product .showroom-info-list__heading {
  color: var(--ink-soft);
}

.showroom-info-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}
.showroom-info-list__heading {
  margin: 0;
  padding-bottom: var(--space-4);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.showroom-info-list__heading strong {
  font-weight: 600;
}
.showroom-info-list__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border-ink-25);
}
.showroom-info-list__label {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-xs);
  color: var(--ink);
  line-height: 1.1;
}
.showroom-info-list__value {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.showroom-info-list__value p {
  margin: 0;
}

.showroom-info-list__value p + p {
  margin-top: var(--space-3);
}

.showroom-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .showroom-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "head"
      "image"
      "right";
    row-gap: var(--space-5);
  }

  .showroom-layout .split-block__lede {
    margin-bottom: var(--space-4);
  }

  #about-product .showroom-layout,
  #about-product-copy .showroom-layout {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: none;
    row-gap: var(--space-5);
    align-items: stretch;
  }

  #about-product .showroom-layout .split-block__image,
  #about-product .showroom-layout .embed-youtube,
  #about-product .showroom-layout .showroom-layout__right-stack {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
}

/* Our team — About (matches .section--paper tone) */
#team.section {
  background: #f7fafd;
}

/* Our team — 4-up grid of people cards (About page) */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-7) var(--space-5);
}

.team-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.team-card__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: var(--surface-blue-pale);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-image);
}

.team-card__body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.team-card__name {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-xs);
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: var(--space-1);
}

.team-card__role {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-4);
}

.team-card__bio {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.team-card__quote {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-style: italic;
  color: var(--brand-blue);
  border-left: 2px solid var(--brand-blue);
  padding-left: var(--space-3);
  margin-top: var(--space-2);
  font-size: 16px;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* Careers block — full-width image + 2-col content below */
.careers-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.careers-block__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.careers-block__kicker {
  font-size: 16px;
  color: var(--ink-soft);
  opacity: 0.6;
}
.careers-block__title {
  font-size: var(--fs-display-lg);
  color: var(--ink);
}
.careers-block__cover {
  width: 100%;
  aspect-ratio: 1328 / 480;
  background-size: cover;
  background-position: center;
}
.careers-block__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
.careers-block__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.careers-block__h3 {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: var(--fs-display-sm);
  color: var(--ink);
  line-height: 1.1;
}
.careers-block__body {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.careers-block__body p + p { margin-top: var(--space-3); }

.careers-roles {
  display: flex;
  flex-direction: column;
}
.careers-roles__row {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-ink-25);
  color: var(--ink);
  font-size: var(--fs-body);
}
.careers-roles__row:last-of-type { border-bottom: 0; }
.careers-roles__note {
  padding-top: var(--space-3);
  color: var(--ink-soft);
  opacity: 0.7;
  font-size: 14px;
}
.careers-block__cta-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.careers-block__cta-row .btn--dashed {
  width: 416px;
  max-width: 100%;
}

@media (max-width: 1024px) {
  .careers-block__content { grid-template-columns: 1fr; gap: var(--space-6); }
}