/** Shopify CDN: Minification failed

Line 6404:0 All "@import" rules must come first
Line 7246:0 All "@import" rules must come first

**/
/* ============================================
   MUTE CUSTOM SECTIONS — MASTER STYLESHEET
   All sections for mute.ae homepage on Dawn
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --mute-teal: #0f343d;
  --mute-teal-deep: #0a242b;
  --mute-teal-ink: #08191e;
  --mute-ivory: #f5f0e8;
  --mute-cream: #efe8dc;
  --mute-muted: #5b757c;
  --mute-muted-soft: #83969b;
  --mute-muted-on-dark: #b9beb9;
  --mute-hair: rgba(15, 52, 61, 0.25);
  --mute-hair-soft: rgba(15, 52, 61, 0.16);
  --mute-hair-on-dark: rgba(245, 240, 232, 0.30);
  --mute-hair-on-dark-soft: rgba(245, 240, 232, 0.12);
  --mute-serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --mute-sans: 'Geist', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --mute-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --mute-max-width: 120rem;
}

body {
  font-feature-settings: "ss01", "cv11";
}


/* ============================================
   1. HERO SECTION
   ============================================ */

.mute-hero {
  background-color: var(--mute-teal);
  color: var(--mute-ivory);
  overflow: hidden;
}

.mute-hero__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: auto;
  padding: 48px 3rem 56px;
  gap: 48px;
  align-items: end;
}

.mute-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 0;
}

.mute-hero__overline {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
  margin-bottom: 28px;
  font-family: var(--mute-mono);
}

.mute-hero__headline {
  font-family: var(--mute-sans);
  font-size: clamp(48px, 7vw, 100px);
  font-weight: 600;
  line-height: 0.92;
  margin: 0 0 28px 0;
  color: var(--mute-ivory);
  letter-spacing: -0.035em;
}

.mute-hero__headline em {
  font-style: italic;
  font-family: var(--mute-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.mute-hero__subtext {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mute-muted-on-dark);
  max-width: 420px;
  margin-bottom: 32px;
  font-family: var(--mute-sans);
}

.mute-hero__ctas {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.mute-hero__btn-primary {
  display: inline-block;
  padding: 13px 24px;
  background-color: var(--mute-ivory);
  color: var(--mute-teal);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--mute-sans);
  transition: background-color 0.3s ease;
}

.mute-hero__btn-primary:hover {
  background-color: #fff;
}

.mute-hero__btn-secondary {
  font-size: 13px;
  color: var(--mute-muted-on-dark);
  text-decoration: none;
  font-family: var(--mute-sans);
  transition: color 0.3s ease;
}

.mute-hero__btn-secondary:hover {
  color: var(--mute-ivory);
}

.mute-hero__media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

.mute-hero__image-wrapper {
  width: 100%;
  max-width: 580px;
  overflow: hidden;
  /* REMOVE aspect-ratio: 4 / 5 */
}

.mute-hero__image {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

.mute-hero__image-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(245, 240, 232, 0.06),
    rgba(245, 240, 232, 0.06) 1px,
    transparent 1px,
    transparent 7px
  );
}

.mute-hero__card {
  position: absolute;
  bottom: 60px;
  right: -10px;
  background-color: var(--mute-ivory);
  color: var(--mute-teal);
  padding: 22px 26px;
  max-width: 260px;
  z-index: 2;
}

.mute-hero__card-overline {
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-bottom: 8px;
  font-family: var(--mute-mono);
}

.mute-hero__card-text {
  font-family: var(--mute-serif);
  font-size: 20px;
  line-height: 1.35;
  font-style: italic;
  margin-bottom: 14px;
  color: var(--mute-teal);
}

.mute-hero__card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  border-top: 1px solid var(--mute-hair);
  padding-top: 10px;
}

.mute-hero__card-arrow {
  font-size: 14px;
  color: var(--mute-muted-soft);
}


/* ============================================
   2. CLIENT MARQUEE
   ============================================ */

.mute-marquee {
  background-color: var(--mute-ivory);
  border-top: 1px solid var(--mute-hair);
  border-bottom: 1px solid var(--mute-hair);
  padding: 16px 3rem;
  overflow: hidden;
  position: relative;
}

.mute-marquee__label {
  position: absolute;
  left: 3rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  z-index: 2;
  background: var(--mute-ivory);
  padding-right: 24px;
}

.mute-marquee__track {
  display: flex;
  animation: mute-scroll 25s linear infinite;
  white-space: nowrap;
}

.mute-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--mute-teal);
  font-family: var(--mute-sans);
  flex-shrink: 0;
}

.mute-marquee__separator {
  font-size: 8px;
  color: var(--mute-muted-soft);
}

@keyframes mute-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ============================================
   PRODUCT LIBRARY (interactive)
   "The library of quiet."
   ============================================ */
 
.mute-library {
  background-color: var(--mute-ivory);
  padding: 0;
}
 
.mute-library__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 80px 3rem;
}
 
/* --- Header --- */
.mute-library__header {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  margin-bottom: 56px;
  align-items: end;
}
 
.mute-library__overline {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-bottom: 16px;
  font-family: var(--mute-mono);
}
 
.mute-library__title {
  font-family: var(--mute-sans);
  font-size: clamp(32px, 4.5vw, 64px);
  font-weight: 600;
  line-height: 1.0;
  color: var(--mute-teal);
  margin: 0;
}
 
.mute-library__title em {
  font-style: italic;
  font-family: var(--mute-serif);
  font-weight: 400;
}
 
.mute-library__description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  max-width: 380px;
  align-self: end;
}
 
/* --- Grid --- */
.mute-library__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
}
 
/* --- Left: image column --- */
.mute-library__image-col {
  position: relative;
  overflow: hidden;
  min-height: 0;
}
 
.mute-library__image-stack {
  display: grid;
  width: 100%;
  overflow: hidden;
  background-color: var(--mute-cream);
  max-height: 540px;
}

.mute-library__image-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.mute-library__image-slide.is-active {
  opacity: 1;
}
 
.mute-library__image-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mute-library__image-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(15, 52, 61, 0.05),
    rgba(15, 52, 61, 0.05) 1px,
    transparent 1px,
    transparent 7px
  );
  background-color: var(--mute-cream);
}
 
/* Image overlay label */
.mute-library__image-label {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--mute-ivory);
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
 
/* --- Caption bar --- */
.mute-library__caption-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
}
 
.mute-library__caption-counter {
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-muted);
}
 
.mute-library__caption-link {
  font-family: var(--mute-sans);
  font-size: 13px;
  color: var(--mute-teal);
  text-decoration: none;
  position: relative;
}
 
.mute-library__caption-link:hover {
  opacity: 0.7;
}
 
.mute-library__caption-link-text {
  display: none;
}
 
.mute-library__caption-link-text.is-active {
  display: inline;
}
 
/* --- Right: product rows --- */
.mute-library__list-col {
  padding-left: 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  /* was space-between */
}
 
.mute-library__product {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px;  /* was 0 20px with flex:1 */
  min-height: auto;
  flex: none;          /* was flex: 1 */
  border-bottom: 1px solid var(--mute-hair-soft);
  text-decoration: none;
  color: var(--mute-teal);
  transition: background-color 0.3s ease, padding 0.3s ease;
  position: relative;
}
 
.mute-library__product:first-child {
  border-top: 1px solid var(--mute-hair-soft);
}
 
/* Active row highlight */
.mute-library__product.is-active {
  background-color: var(--mute-cream);
}
 
/* Row number */
.mute-library__product-index {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--mute-muted);
  flex-shrink: 0;
  width: 24px;
}
 
/* Product info */
.mute-library__product-info {
  flex: 1;
  min-width: 0;
}
 
.mute-library__product-name {
  font-family: var(--mute-sans);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: block;
}
 
.mute-library__product-meta {
  font-size: 12px;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  display: block;
  margin-top: 2px;
}
 
/* Arrow */
.mute-library__product-arrow {
  font-family: var(--mute-sans);
  font-size: 18px;
  color: var(--mute-muted);
  flex-shrink: 0;
  opacity: 1;
  transform: translateX(0px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
 
.mute-library__product.is-active .mute-library__product-arrow,
.mute-library__product:hover .mute-library__product-arrow {
  opacity: 1;
  transform: translateX(0);
}


/* ============================================
   4. FEATURED PROJECT
   ============================================ */

.mute-project {
  background-color: var(--mute-ivory);
  padding: 0;
}

.mute-project__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 32px 3rem 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.mute-project__image-wrapper {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.mute-project__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mute-project__image-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(15, 52, 61, 0.03),
    rgba(15, 52, 61, 0.03) 1px,
    transparent 1px,
    transparent 7px
  );
  background-color: rgba(15, 52, 61, 0.02);
}

.mute-project__content {
  padding-top: 48px;    /* was 24px — pushes content down to vertically centre against image */
}

.mute-project__overline {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-bottom: 20px;
  font-family: var(--mute-mono);
}

.mute-project__title {
  font-family: var(--mute-sans);
  font-size: clamp(26px, 3.5vw, 48px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--mute-teal);
  margin: 0 0 20px 0;
}

.mute-project__title em {
  font-style: italic;
  font-family: var(--mute-serif);
  font-weight: 400;
}

.mute-project__description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  margin-bottom: 28px;
  max-width: 420px;
}

.mute-project__stats {
  display: flex;
  gap: 32px;
  margin-bottom: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--mute-hair);
}

.mute-project__stat {
  text-align: left;
}

.mute-project__stat-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  margin-bottom: 4px;
}

.mute-project__stat-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--mute-teal);
  font-family: var(--mute-sans);
}

.mute-project__link {
  font-size: 13px;
  color: var(--mute-teal);
  text-decoration: none;
  font-family: var(--mute-sans);
  transition: opacity 0.2s ease;
}

.mute-project__link:hover {
  opacity: 0.6;
}


/* ============================================
   5. BRAND STORY
   ============================================ */

.mute-story {
  background-color: var(--mute-cream);
  color: var(--mute-ivory);
  padding: 80px 48px;
}

.mute-story__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 64px 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;  /* was center */
}

.mute-story__content {
  padding-right: 24px;
}

.mute-story__overline {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-bottom: 24px;
  font-family: var(--mute-mono);
}

.mute-story__title {
  font-family: var(--mute-sans);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--mute-teal);
  margin: 0 0 24px 0;
}

.mute-story__title em {
  font-style: italic;
  font-family: var(--mute-serif);
  font-weight: 400;
}

.mute-story__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  margin-bottom: 12px;
  max-width: 440px;
}

.mute-story__ctas {
  display: flex;
  gap: 20px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.mute-story__btn-primary {
  display: inline-block;
  padding: 13px 24px;
  border: 1px solid var(--mute-teal);
  color: var(--mute-teal);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--mute-sans);
  transition: all 0.3s ease;
}

.mute-story__btn-primary:hover {
  background-color: var(--mute-teal);
  color: var(--mute-ivory);
}

.mute-story__btn-secondary {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--mute-teal);
  text-decoration: none;
  font-family: var(--mute-sans);
  transition: color 0.3s ease;
}

.mute-story__btn-secondary:hover {
  color: var(--mute-ivory);
}

.mute-story__media {
  position: relative;
}

.mute-story__image-wrapper {
  width: 100%;
  overflow: hidden;
  /* REMOVE aspect-ratio: 3 / 4 */
}

.mute-story__image {
  width: 100%;
  height: auto;        /* was 100% */
  max-height: 580px;   /* cap it */
  object-fit: cover;
  display: block;
}

.mute-story__image-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(245, 240, 232, 0.06),
    rgba(245, 240, 232, 0.06) 1px,
    transparent 1px,
    transparent 7px
  );
}

.mute-story__badge {
  position: absolute;
  bottom: -24px;
  right: -24px;
  width: 220px;
  padding: 24px 28px;
  border-radius: 0;
  background-color: var(--mute-teal);
  color: var(--mute-ivory);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--mute-sans);
  z-index: 2;
}

.mute-story__badge-overline {
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
  margin-bottom: 8px;
}

.mute-story__badge-number {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}

.mute-story__badge-label {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mute-ivory);
}

/* ============================================
   6. B2B CONSULTATION CTA
   ============================================ */

.mute-cta {
  background-color: var(--mute-teal);
  padding: 0;
}

.mute-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 80px 3rem;
}

.mute-cta__overline {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
  margin-bottom: 20px;
  font-family: var(--mute-mono);
}

.mute-cta__title {
  font-family: var(--mute-sans);
  font-size: clamp(28px, 4.5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--mute-ivory);
  margin: 0 0 24px 0;
}

.mute-cta__title em {
  font-style: italic;
  font-family: var(--mute-serif);
  font-weight: 400;
}

.mute-cta__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted-on-dark);
  font-family: var(--mute-sans);
  margin-bottom: 32px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.mute-cta__buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.mute-cta__btn-primary {
  display: inline-block;
  padding: 14px 28px;
  background-color: var(--mute-ivory);
  color: var(--mute-teal);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--mute-sans);
  transition: opacity 0.3s ease;
}

.mute-cta__btn-primary:hover {
  opacity: 0.85;
}

.mute-cta__btn-secondary {
  font-size: 13px;
  color: var(--mute-ivory);
  text-decoration: none;
  font-family: var(--mute-sans);
  transition: opacity 0.2s ease;
}

.mute-cta__btn-secondary:hover {
  opacity: 0.6;
}


/* ============================================
   7. PROOF POINTS
   ============================================ */

.mute-proof {
  background-color: var(--mute-ivory);
  padding: 0;
  border-top: 1px solid var(--mute-hair);
}

.mute-proof__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 48px 3rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.mute-proof__item {
  padding: 0 24px;
  border-left: 1px solid var(--mute-hair);
}

.mute-proof__item:first-child {
  border-left: none;
  padding-left: 0;
}

.mute-proof__heading {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mute-teal);
  font-family: var(--mute-sans);
  margin-bottom: 6px;
}

.mute-proof__text {
  font-size: 12px;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  line-height: 1.5;
}


/* ============================================
   8. FOOTER
   ============================================ */

.mute-footer {
  background-color: var(--mute-teal);
  color: var(--mute-ivory);
  padding: 64px 48px 32px;
}

.mute-footer__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
}

.mute-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr 1.2fr;
  gap: 32px;
  margin-bottom: 48px;
}

.mute-footer__brand-name {
  font-family: var(--mute-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}

.mute-footer__brand-tagline {
  font-family: var(--mute-serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.4;
  color: var(--mute-muted-on-dark);
  margin-bottom: 20px;
}

.mute-footer__contact-line {
  font-size: 12px;
  color: var(--mute-muted-on-dark);
  font-family: var(--mute-sans);
  margin-bottom: 4px;
}

.mute-footer__contact-line a {
  color: var(--mute-muted-on-dark);
  text-decoration: none;
}

.mute-footer__contact-line a:hover {
  color: var(--mute-ivory);
}

.mute-footer__col-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--mute-ivory);
  font-family: var(--mute-mono);
  margin-bottom: 16px;
}

.mute-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mute-footer__links li {
  margin-bottom: 8px;
}

.mute-footer__links a {
  font-size: 12px;
  color: var(--mute-muted-on-dark);
  text-decoration: none;
  font-family: var(--mute-sans);
  transition: color 0.2s ease;
}

.mute-footer__links a:hover {
  color: var(--mute-ivory);
}

.mute-footer__address-line {
  font-size: 12px;
  color: var(--mute-muted-on-dark);
  font-family: var(--mute-sans);
  margin-bottom: 4px;
}

.mute-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--mute-hair-on-dark-soft);
}

.mute-footer__copyright {
  font-size: 10px;
  color: rgba(245, 240, 232, 0.35);
  font-family: var(--mute-sans);
  letter-spacing: 0.08em;
}

.mute-footer__social {
  display: flex;
  gap: 16px;
}

.mute-footer__social a {
  font-size: 11px;
  color: rgba(245, 240, 232, 0.35);
  text-decoration: none;
  font-family: var(--mute-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.mute-footer__social a:hover {
  color: var(--mute-ivory);
}


/* ============================================
   MOBILE RESPONSIVE — ALL SECTIONS
   ============================================ */

@media (max-width: 749px) {

  .mute-hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 36px 1.5rem 28px;
    gap: 20px;
  }
  .mute-hero__content { order: 1; }
  .mute-hero__media { order: 2; }
  .mute-hero__headline { font-size: clamp(36px, 11vw, 52px); margin-bottom: 16px; }
  .mute-hero__subtext { font-size: 13px; margin-bottom: 24px; }
  .mute-hero__image-wrapper { max-width: 100%; aspect-ratio: 1 / 1; }
  .mute-hero__card { position: relative; bottom: auto; right: auto; max-width: 100%; margin-top: -32px; }
  .mute-hero__btn-primary { padding: 12px 20px; font-size: 10px; }
  .mute-hero__overline { margin-bottom: 20px; }

  .mute-marquee__label { left: 20px; font-size: 8px; }
  .mute-marquee__item { font-size: 13px; padding: 0 14px; }



@media screen and (max-width: 749px) {
  .mute-library__inner { padding: 48px 1.5rem; }
  .mute-library__header { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .mute-library__title { font-size: clamp(32px, 10vw, 44px); }
  .mute-library__grid { grid-template-columns: 1fr; gap: 32px; }
  .mute-library__list-col { padding-left: 0; order: 1; }
  .mute-library__image-col { order: 2; }
  .mute-library__image-stack { aspect-ratio: 3 / 2; }
  .mute-library__product-name { font-size: 18px; }
  .mute-library__product { padding: 0 12px; }
}

  .mute-project { padding: 32px 1.5rem 48px; }
  .mute-project__inner { grid-template-columns: 1fr; gap: 24px; }
  .mute-project__title { font-size: clamp(26px, 8vw, 36px); }
  .mute-project__stats { gap: 20px; flex-wrap: wrap; }

  .mute-story { padding: 48px 1.5rem; }
  .mute-story__inner { grid-template-columns: 1fr; gap: 32px; }
  .mute-story__content { order: 2; padding-right: 0; }
  .mute-story__media { order: 1; }
  .mute-story__title { font-size: clamp(28px, 9vw, 40px); }
  .mute-story__image-wrapper { aspect-ratio: 1 / 1; }

  .mute-cta { padding: 48px 1.5rem; }
  .mute-cta__title { font-size: clamp(28px, 9vw, 40px); }
  .mute-cta__buttons { flex-direction: column; gap: 12px; }
  .mute-cta__btn-primary { width: 100%; text-align: center; }

  .mute-proof { padding: 32px 1.5rem; }
  .mute-proof__inner { grid-template-columns: 1fr 1fr; gap: 24px; }

  .mute-footer { padding: 48px 20px 24px; }
  .mute-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .mute-footer__grid > div:first-child { grid-column: 1 / -1; }
  .mute-footer__bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

@media (min-width: 750px) and (max-width: 989px) {
  .mute-hero__inner { padding: 40px 3rem 44px; gap: 32px; }
  .mute-hero__headline { font-size: clamp(44px, 7vw, 72px); }
  .mute-hero__image-wrapper { max-width: 340px; }
  .mute-hero__card { bottom: 48px; max-width: 220px; padding: 18px 20px; }
  .mute-library { padding: 56px 32px; }
  .mute-project { padding: 32px 32px 56px; }
  .mute-story { padding: 56px 32px; }
  .mute-cta { padding: 56px 32px; }
  .mute-proof { padding: 36px 32px; }
  .mute-footer { padding: 48px 32px 24px; }
  .mute-footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
  .mute-footer__grid > div:last-child { grid-column: 1 / -1; }
}

.footer { border-top: 1px solid var(--mute-hair) !important; }
.section-header { border-bottom: 1px solid var(--mute-hair) !important; }


/* ============================================
   PRODUCT LANDING PAGE SECTIONS

   STANDARD SPACING RULES (apply to all sections):
   — Section padding: 80px 3rem (desktop), 48px 1.5rem (mobile)
   — Section gap (between header and content): 48–56px
   — Card internal padding: 28px
   — Border color: rgba(15, 52, 61, 0.1) (hair-soft)
   — Max width: var(--mute-max-width) = 120rem
   ============================================ */

/* ── Product Hero ── */
.mute-product-hero {
  background-color: var(--mute-ivory);
  padding: 0;
}

.mute-product-hero__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
  padding: 40px 3rem 64px;
}

.mute-product-hero__image-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 6;
  width: 100%;
}

.mute-product-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mute-product-hero__content {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.mute-product-hero__overline {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  margin-bottom: 20px;
}

.mute-product-hero__title {
  font-family: var(--mute-sans);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--mute-teal);
  margin: 0 0 24px 0;
}

.mute-product-hero__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
}

.mute-product-hero__subtitle {
  font-family: var(--mute-serif);
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  color: var(--mute-teal);
  margin-bottom: 20px;
  line-height: 1.4;
}

.mute-product-hero__description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  margin-bottom: 36px;
  max-width: 400px;
}

.mute-product-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.mute-product-hero__btn-primary {
  display: inline-block;
  padding: 13px 24px;
  background-color: var(--mute-teal);
  color: var(--mute-ivory);
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--mute-sans);
  transition: opacity 0.3s;
}

.mute-product-hero__btn-primary:hover { opacity: 0.85; }

.mute-product-hero__btn-secondary {
  display: inline-block;
  padding: 13px 24px;
  border: 1px solid var(--mute-hair);
  color: var(--mute-teal);
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--mute-sans);
  transition: all 0.3s;
}

.mute-product-hero__btn-secondary:hover {
  background: var(--mute-teal);
  color: var(--mute-ivory);
}

.mute-product-hero__whatsapp {
  font-size: 13px;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  text-decoration: none;
}

.mute-product-hero__whatsapp:hover { color: var(--mute-teal); }

.mute-product-hero__quick-specs {
  display: flex;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--mute-hair);
  margin-top: auto;
}

.mute-product-hero__spec-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  margin-bottom: 4px;
}

.mute-product-hero__spec-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--mute-teal);
  font-family: var(--mute-sans);
}

/* Product Specs Strip */
.mute-product-specs {
  background-color: var(--mute-cream);
  padding: 0;
}

.mute-product-specs__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 48px 3rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.mute-product-specs__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 32px;
  border-left: 1px solid rgba(15, 52, 61, 0.15);
}

.mute-product-specs__item:first-child {
  padding-left: 0;
  border-left: none;
}

.mute-product-specs__label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute-teal);
  font-family: var(--mute-mono);
  font-weight: 500;
  opacity: 0.7;
}

.mute-product-specs__value {
  font-size: 14px;
  font-weight: 500;
  color: var(--mute-teal);
  font-family: var(--mute-sans);
  line-height: 1.3;
}

/* Features */
.mute-features {
  background-color: var(--mute-ivory);
  padding: 0;
  border-top: 1px solid rgba(15, 52, 61, 0.1);
}

.mute-features__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 80px 3rem;
}

.mute-features__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 56px;
}

.mute-features__title {
  font-family: var(--mute-sans);
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: var(--mute-teal);
  margin: 0;
}

.mute-features__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
}

.mute-features__header-right {
  display: flex;
  align-items: flex-end;
  padding-bottom: 6px;
}

.mute-features__description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted);
  margin: 0;
  max-width: 420px;
}

.mute-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.mute-features__card {
  padding: 28px 28px 36px;
  border-top: 1px solid rgba(15, 52, 61, 0.1);
  border-left: 1px solid rgba(15, 52, 61, 0.1);
}

.mute-features__card:nth-child(3n + 1) {
  border-left: none;
  padding-left: 0;
}

.mute-features__card:nth-child(3n) {
  padding-right: 0;
}

.mute-features__card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.mute-features__card-numeral {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
}

.mute-features__card-icon {
  color: var(--mute-teal);
  opacity: 0.6;
  line-height: 0;
}

.mute-features__card-icon svg {
  width: 32px;
  height: 32px;
}

.mute-features__card-title {
  font-family: var(--mute-sans);
  font-size: 20px;
  font-weight: 600;
  color: var(--mute-teal);
  margin: 0 0 10px;
  line-height: 1.2;
}

.mute-features__card-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute-muted);
  margin: 0;
}

/* Technical Details */
.mute-technical { background-color: var(--mute-cream); padding: 0; }
.mute-technical__inner { max-width: var(--mute-max-width); margin: 0 auto; padding: 80px 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.mute-technical__overline { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute-muted); font-family: var(--mute-mono); margin-bottom: 16px; }
.mute-technical__title { font-family: var(--mute-sans); font-size: clamp(28px, 4vw, 56px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.0; color: var(--mute-teal); margin: 0 0 20px; }
.mute-technical__title em { font-family: var(--mute-serif); font-weight: 400; font-style: italic; }
.mute-technical__description { font-size: 14px; line-height: 1.6; color: var(--mute-muted); font-family: var(--mute-sans); margin-bottom: 24px; }
.mute-technical__specs-list { list-style: none; padding: 0; margin: 0; }
.mute-technical__specs-list li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--mute-hair); font-family: var(--mute-sans); font-size: 14px; }
.mute-technical__specs-list li:first-child { border-top: 1px solid var(--mute-hair); }
.mute-technical__spec-name { color: var(--mute-teal); font-weight: 500; }
.mute-technical__spec-val { color: var(--mute-muted); }
.mute-technical__media { position: relative; }
.mute-technical__image-wrapper { aspect-ratio: 1 / 1; overflow: hidden; background: repeating-linear-gradient(-45deg, rgba(15,52,61,0.03), rgba(15,52,61,0.03) 1px, transparent 1px, transparent 7px); background-color: rgba(15,52,61,0.02); }
.mute-technical__image { width: 100%; height: 100%; object-fit: cover; }
.mute-technical__sizes { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.mute-technical__size { font-size: 12px; font-family: var(--mute-mono); color: var(--mute-muted); letter-spacing: 0.1em; padding: 8px 12px; border: 1px solid var(--mute-hair); }
.mute-technical__download { margin-top: 16px; }
.mute-technical__download a { font-size: 13px; color: var(--mute-teal); text-decoration: underline; font-family: var(--mute-sans); }
.mute-technical__downloads { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--mute-hair); }
.mute-technical__downloads-title { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute-muted); font-family: var(--mute-mono); margin-bottom: 16px; }
.mute-technical__download-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--mute-hair); text-decoration: none; color: var(--mute-teal); transition: opacity 0.2s; }
.mute-technical__download-item:first-of-type { border-top: 1px solid var(--mute-hair); }
.mute-technical__download-item:hover { opacity: 0.7; }
.mute-technical__download-icon { font-size: 18px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--mute-hair); flex-shrink: 0; font-family: var(--mute-sans); }
.mute-technical__download-name { display: block; font-size: 14px; font-weight: 500; font-family: var(--mute-sans); color: var(--mute-teal); }
.mute-technical__download-meta { display: block; font-size: 11px; font-family: var(--mute-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute-muted); margin-top: 2px; }

/* Application Gallery */
.mute-gallery { background-color: var(--mute-ivory); padding: 0; }

.mute-gallery__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 80px 3rem;
}

.mute-gallery__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
}

.mute-gallery__overline {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  margin-bottom: 8px;
}

.mute-gallery__title {
  font-family: var(--mute-sans);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: var(--mute-teal);
  margin: 0;
}

.mute-gallery__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
}

.mute-gallery__view-all {
  font-size: 13px;
  color: var(--mute-teal);
  text-decoration: none;
  font-family: var(--mute-sans);
  white-space: nowrap;
  padding-bottom: 6px;
  transition: opacity 0.2s;
}

.mute-gallery__view-all:hover { opacity: 0.6; }

/* ── Masonry grid ── */
.mute-gallery__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 8px;
  align-items: stretch;
}

.mute-gallery__featured {
  display: block;
  text-decoration: none;
  position: relative;
}

.mute-gallery__featured-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--mute-cream);
  height: 100%;
}

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

/* Right column — 2 on top, 1 on bottom */
.mute-gallery__secondary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mute-gallery__secondary-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mute-gallery__thumb {
  display: block;
  text-decoration: none;
  position: relative;
}

.mute-gallery__thumb-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--mute-cream);
}

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

/* Bottom image fills remaining height */
.mute-gallery__thumb--bottom .mute-gallery__thumb-image {
  aspect-ratio: unset;
  height: 0;
  flex-grow: 1;
  min-height: 120px;
}

.mute-gallery__thumb--bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mute-gallery__thumb--bottom .mute-gallery__thumb-image {
  aspect-ratio: unset;
  flex: 1;
  min-height: 100px;
}

/* Space type tag overlay */
.mute-gallery__tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-teal);
  background: rgba(245, 240, 232, 0.9);
  padding: 4px 8px;
  font-family: var(--mute-mono);
}

/* Placeholder */
.mute-gallery__placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(-45deg, rgba(15,52,61,0.03), rgba(15,52,61,0.03) 1px, transparent 1px, transparent 7px);
  background-color: rgba(15,52,61,0.02);
}

/* ── Captions below grid ── */
.mute-gallery__captions {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

.mute-gallery__caption-featured {
  display: flex;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}

.mute-gallery__caption-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mute-gallery__caption-type {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  margin: 0 0 2px;
}

.mute-gallery__caption-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--mute-teal);
  font-family: var(--mute-sans);
  margin: 0 0 2px;
}

.mute-gallery__caption-meta {
  font-size: 12px;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  margin: 0;
}

.mute-gallery__case-link {
  font-size: 12px;
  color: var(--mute-teal);
  text-decoration: none;
  font-family: var(--mute-sans);
  margin-left: 8px;
  transition: opacity 0.2s;
}

.mute-gallery__case-link:hover { opacity: 0.6; }

/* Extra projects text list */
.mute-gallery__extra {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--mute-hair);
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

/* Mobile */
@media (max-width: 749px) {
  .mute-gallery__inner { padding: 48px 1.5rem; }
  .mute-gallery__grid { grid-template-columns: 1fr; }
  .mute-gallery__secondary { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .mute-gallery__secondary .mute-gallery__thumb:first-child { grid-template-columns: 1fr; }
  .mute-gallery__captions { grid-template-columns: 1fr; }
  .mute-gallery__caption-secondary { grid-template-columns: 1fr 1fr; }
}

/* Configurations */
.mute-config { background-color: var(--mute-cream); padding: 0; }
.mute-config__inner { max-width: var(--mute-max-width); margin: 0 auto; padding: 80px 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.mute-config__media { position: relative; }
.mute-config__content {}
.mute-config__overline { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute-muted); font-family: var(--mute-mono); margin-bottom: 16px; }
.mute-config__title { font-family: var(--mute-sans); font-size: clamp(28px, 4vw, 48px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; color: var(--mute-teal); margin: 0 0 16px; }
.mute-config__title em { font-family: var(--mute-serif); font-weight: 400; font-style: italic; }
.mute-config__description { font-size: 14px; line-height: 1.6; color: var(--mute-muted); font-family: var(--mute-sans); margin-bottom: 24px; }

/* Shop Collection Grid Header */
.mute-shop-header { background-color: var(--mute-teal); padding: 0; }
.mute-shop-header__inner { max-width: var(--mute-max-width); margin: 0 auto; padding: 56px 3rem 40px; }
.mute-shop-header__title { font-family: var(--mute-sans); font-size: clamp(32px, 4vw, 56px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.0; color: var(--mute-ivory); margin: 0 0 8px; }
.mute-shop-header__title em { font-family: var(--mute-serif); font-weight: 400; font-style: italic; }
.mute-shop-header__subtitle { font-size: 14px; color: var(--mute-muted-on-dark); font-family: var(--mute-sans); }

/* Related Products */
.mute-related { background-color: var(--mute-ivory); padding: 0; }
.mute-related__inner { max-width: var(--mute-max-width); margin: 0 auto; padding: 64px 3rem; }
.mute-related__title { font-size: 14px; font-weight: 500; color: var(--mute-muted); font-family: var(--mute-sans); margin-bottom: 24px; letter-spacing: 0.06em; text-transform: uppercase; }
.mute-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mute-related__item { text-decoration: none; color: var(--mute-teal); padding: 24px; border: 1px solid var(--mute-hair); transition: background 0.2s; }
.mute-related__item:hover { background: var(--mute-cream); }
.mute-related__item-name { font-size: 18px; font-weight: 600; font-family: var(--mute-sans); margin-bottom: 4px; }
.mute-related__item-meta { font-size: 13px; color: var(--mute-muted); font-family: var(--mute-sans); }

/* Mobile overrides for product landing */
@media (max-width: 749px) {
  .mute-product-hero { padding: 24px 1.5rem; }
  .mute-product-hero__inner { grid-template-columns: 1fr; gap: 24px; }
  .mute-product-hero__image-wrapper { aspect-ratio: 4 / 3; }
  .mute-product-hero__content { padding: 0; }
  .mute-product-hero__quick-specs { flex-wrap: wrap; gap: 16px; }
  .mute-product-hero__quick-specs > div { flex: 0 0 45%; }
  .mute-product-specs__inner { grid-template-columns: repeat(2, 1fr); gap: 24px 0; padding: 32px 1.5rem; }
  .mute-product-specs__item { padding: 0 16px; }
  .mute-product-specs__item:nth-child(odd) { padding-left: 0; border-left: none; }
  .mute-product-specs__value { font-size: 16px; }
  .mute-features__inner { padding: 48px 1.5rem; }
  .mute-features__header { grid-template-columns: 1fr; gap: 16px; }
  .mute-features__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .mute-technical__inner { grid-template-columns: 1fr; padding: 48px 1.5rem; gap: 32px; }
  .mute-gallery__inner { padding: 48px 1.5rem; }
  .mute-config__inner { grid-template-columns: 1fr; padding: 48px 1.5rem; gap: 32px; }
  .mute-shop-header__inner { padding: 40px 1.5rem 32px; }
  .mute-related__inner { padding: 48px 1.5rem; }
  .mute-related__grid { grid-template-columns: 1fr; }
  .mute-features__card { border-left: none; padding-left: 0; padding-right: 0; }
  .mute-features__card-title { font-size: 19px; }
}

@media (min-width: 750px) and (max-width: 989px) {
  .mute-features__grid { grid-template-columns: repeat(2, 1fr); }
  .mute-features__card:nth-child(3n + 1) { border-left: 1px solid rgba(15, 52, 61, 0.1); padding-left: 32px; }
  .mute-features__card:nth-child(2n + 1) { border-left: none; padding-left: 0; }
}

/* ── Config v2 scoped overrides ── */
section.mute-config .mute-config__image-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--mute-cream);
}

section.mute-config .mute-config__color-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: background-color 0.4s ease;
  z-index: 0;
  display: block !important;
}

section.mute-config .mute-config__color-fill:empty {
  display: block !important;
}

section.mute-config .mute-config__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

section.mute-config .mute-config__image--active { opacity: 1; }

section.mute-config .mute-config__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-teal);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 2;
}

section.mute-config .mute-config__caption-sep { opacity: 0.4; }

section.mute-config .mute-config__below-image {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mute-muted);
}

section.mute-config .mute-config__drag-hint { text-transform: uppercase; }
section.mute-config .mute-config__sample-link { color: var(--mute-teal); text-decoration: none; font-weight: 500; }
section.mute-config .mute-config__sample-link:hover { text-decoration: underline; }

section.mute-config .mute-config__section { margin-top: 28px; }

section.mute-config .mute-config__section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

section.mute-config .mute-config__section-label { color: var(--mute-muted); }
section.mute-config .mute-config__section-value { color: var(--mute-teal); font-weight: 500; }

section.mute-config .mute-config__swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 0;
}

section.mute-config .mute-config__swatch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

section.mute-config .mute-config__swatch {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
  outline: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}

section.mute-config .mute-config__swatch:hover { transform: scale(1.08); }
section.mute-config .mute-config__swatch--active { border-color: var(--mute-teal); }

section.mute-config .mute-config__swatch-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--mute-muted);
  line-height: 1.2;
}

section.mute-config .mute-config__patterns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

section.mute-config .mute-config__pattern {
  padding: 16px;
  border: 2px solid var(--mute-hair);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  appearance: none;
  -webkit-appearance: none;
  font-size: inherit;
  color: inherit;
}

section.mute-config .mute-config__pattern:hover { border-color: var(--mute-muted); background: transparent; }
section.mute-config .mute-config__pattern--active { border-color: var(--mute-teal); background: var(--mute-teal); }
section.mute-config .mute-config__pattern--active .mute-config__pattern-name,
section.mute-config .mute-config__pattern--active .mute-config__pattern-subtitle { color: #fff; }
section.mute-config .mute-config__pattern-name { font-size: 15px; font-weight: 500; color: var(--mute-teal); line-height: 1.3; }
section.mute-config .mute-config__pattern-subtitle { font-size: 11px; color: var(--mute-muted); line-height: 1.3; }

section.mute-config .mute-config__sizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

section.mute-config .mute-config__size {
  padding: 14px 12px;
  border: 2px solid var(--mute-hair);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 3px;
  appearance: none;
  -webkit-appearance: none;
}

section.mute-config .mute-config__size:hover { border-color: var(--mute-muted); }
section.mute-config .mute-config__size--active { border-color: var(--mute-teal); background: var(--mute-teal); }
section.mute-config .mute-config__size--active .mute-config__size-name,
section.mute-config .mute-config__size--active .mute-config__size-subtitle { color: #fff; }
section.mute-config .mute-config__size-name { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mute-teal); line-height: 1.3; }
section.mute-config .mute-config__size-subtitle { font-size: 11px; color: var(--mute-muted); line-height: 1.3; }

@media (max-width: 749px) {
  section.mute-config .mute-config__swatches { grid-template-columns: repeat(6, 1fr); }
  section.mute-config .mute-config__swatch-label { font-size: 8px; }
  section.mute-config .mute-config__patterns { grid-template-columns: 1fr; }
  section.mute-config .mute-config__sizes { grid-template-columns: repeat(2, 1fr); }
  section.mute-config .mute-config__below-image { flex-direction: column; gap: 6px; align-items: flex-start; }
}

/* ── Texture overlays ── */
section.mute-config .mute-config__texture-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  opacity: 1;
  display: block !important;
}

[data-config-texture="plain"] .mute-config__texture-overlay { opacity: 0; }

[data-config-texture="pattern"] .mute-config__texture-overlay {
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 9px,
    rgba(0, 0, 0, 0.18) 9px,
    rgba(0, 0, 0, 0.14) 10.5px,
    rgba(255, 255, 255, 0.1) 10.5px,
    rgba(255, 255, 255, 0.06) 11.5px,
    transparent 11.5px,
    transparent 20px
  );
  opacity: 1;
}

[data-config-texture="sculpt"] .mute-config__texture-overlay {
  background:
    radial-gradient(ellipse 70% 50% at 35% 35%, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 30%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 40% 45%, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.06) 35%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 75% 70%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 30%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 78% 78%, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.05) 30%, transparent 55%),
    linear-gradient(0deg, transparent 49.5%, rgba(0,0,0,0.06) 49.5%, rgba(0,0,0,0.06) 50.5%, transparent 50.5%),
    linear-gradient(90deg, transparent 49.5%, rgba(0,0,0,0.06) 49.5%, rgba(0,0,0,0.06) 50.5%, transparent 50.5%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 50%, 50% 100%;
  opacity: 1;
}

/* ============================================
   TECHNICAL DOWNLOADS SECTION
   ============================================ */

.mute-downloads {
  background-color: var(--mute-ivory);
  padding: 0;
  border-top: 1px solid var(--mute-hair);
}

.mute-downloads__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 80px 3rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  align-items: start;
}

.mute-downloads__overline {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  margin-bottom: 16px;
}

.mute-downloads__title {
  font-family: var(--mute-sans);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--mute-teal);
  margin: 0;
}

.mute-downloads__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
}

.mute-downloads__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.mute-downloads__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border: 1px solid var(--mute-hair-soft);
  border-collapse: collapse;
  text-decoration: none;
  color: var(--mute-teal);
  transition: background-color 0.2s ease;
  margin: -1px 0 0 -1px;
}

.mute-downloads__item:hover {
  background-color: var(--mute-cream);
}

.mute-downloads__item-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mute-downloads__item-name {
  font-family: var(--mute-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--mute-teal);
}

.mute-downloads__item-meta {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--mute-muted);
  text-transform: uppercase;
}

.mute-downloads__item-btn {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-teal);
  border: 1px solid var(--mute-hair);
  padding: 6px 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Mobile */
@media (max-width: 749px) {
  .mute-downloads__inner {
    grid-template-columns: 1fr;
    padding: 48px 1.5rem;
    gap: 32px;
  }
  .mute-downloads__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================
   PAIRS WELL WITH / RELATED PRODUCTS SECTION
   ============================================ */

.mute-pairs {
  background-color: var(--mute-ivory);
  padding: 0;
  border-top: 1px solid var(--mute-hair);
}

.mute-pairs__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 80px 3rem;
}

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

.mute-pairs__overline {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  margin-bottom: 12px;
}

.mute-pairs__title {
  font-family: var(--mute-sans);
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: var(--mute-teal);
  margin: 0;
}

.mute-pairs__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
}

.mute-pairs__all-link {
  font-size: 13px;
  color: var(--mute-teal);
  text-decoration: none;
  font-family: var(--mute-sans);
  white-space: nowrap;
  padding-bottom: 6px;
  transition: opacity 0.2s;
}

.mute-pairs__all-link:hover { opacity: 0.6; }

.mute-pairs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mute-pairs__card {
  text-decoration: none;
  color: var(--mute-teal);
  display: block;
}

.mute-pairs__card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mute-cream);
  margin-bottom: 16px;
}

.mute-pairs__placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(15,52,61,0.03),
    rgba(15,52,61,0.03) 1px,
    transparent 1px,
    transparent 7px
  );
  background-color: rgba(15,52,61,0.02);
}

.mute-pairs__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.mute-pairs__card:hover .mute-pairs__card-image img {
  transform: scale(1.03);
}

.mute-pairs__card-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-teal);
  background: rgba(245, 240, 232, 0.9);
  padding: 4px 8px;
  font-family: var(--mute-mono);
}

.mute-pairs__card-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.mute-pairs__card-number {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--mute-muted);
}

.mute-pairs__card-name {
  font-family: var(--mute-sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--mute-teal);
  flex: 1;
}

.mute-pairs__card-arrow {
  font-size: 16px;
  color: var(--mute-muted);
  transition: transform 0.2s ease;
}

.mute-pairs__card:hover .mute-pairs__card-arrow {
  transform: translateX(4px);
}

.mute-pairs__card-meta {
  font-size: 13px;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  margin: 0;
}

/* Mobile */
@media (max-width: 749px) {
  .mute-pairs__inner { padding: 48px 1.5rem; }
  .mute-pairs__header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .mute-pairs__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Tablet */
@media (min-width: 750px) and (max-width: 989px) {
  .mute-pairs__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   MUTE CTA B2B SECTION
   ============================================ */

.mute-cta-b2b {
  background-color: var(--mute-teal);
  padding: 0;
}

.mute-cta-b2b__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 80px 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ── Left column ── */
.mute-cta-b2b__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
  margin-bottom: 20px;
}

.mute-cta-b2b__title {
  font-family: var(--mute-sans);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: var(--mute-ivory);
  margin: 0 0 24px;
}

.mute-cta-b2b__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
}

.mute-cta-b2b__body {
  font-family: var(--mute-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted-on-dark);
  max-width: 480px;
  margin: 0;
}

/* ── Right column ── */
.mute-cta-b2b__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mute-cta-b2b__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--mute-ivory);
  color: var(--mute-teal);
  text-decoration: none;
  padding: 18px 24px;
  font-family: var(--mute-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
  align-self: flex-start;
}

.mute-cta-b2b__whatsapp:hover { opacity: 0.9; }

.mute-cta-b2b__whatsapp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #22c55e;
  flex-shrink: 0;
}

.mute-cta-b2b__whatsapp-arrow {
  margin-left: 4px;
  font-size: 14px;
}

.mute-cta-b2b__consult {
  font-family: var(--mute-sans);
  font-size: 14px;
  color: var(--mute-muted-on-dark);
  text-decoration: none;
  margin: 0;
  transition: color 0.2s;
}

a.mute-cta-b2b__consult:hover { color: var(--mute-ivory); }

.mute-cta-b2b__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--mute-hair-on-dark-soft);
}

.mute-cta-b2b__contact-line {
  font-family: var(--mute-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
  text-decoration: none;
  transition: color 0.2s;
}

.mute-cta-b2b__contact-line:hover { color: var(--mute-ivory); }

/* Mobile */
@media (max-width: 749px) {
  .mute-cta-b2b__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 1.5rem;
  }
  .mute-cta-b2b__whatsapp { align-self: stretch; justify-content: center; }
}

/* ============================================
   MUTE SHOP GRID SECTION
   ============================================ */

.mute-shop {
  background-color: var(--mute-cream);
  padding: 0;
}

.mute-shop__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 56px 3rem 80px;
}

/* ── Header ── */
.mute-shop__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 24px;
  flex-wrap: wrap;
}

.mute-shop__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-bottom: 10px;
}

.mute-shop__title {
  font-family: var(--mute-sans);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: var(--mute-teal);
  margin: 0 0 8px;
}

.mute-shop__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
}

.mute-shop__subtitle {
  font-family: var(--mute-sans);
  font-size: 13px;
  color: var(--mute-muted);
  margin: 0;
}

/* ── Filter tabs ── */
.mute-shop__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-self: flex-end;
  padding-bottom: 4px;
}

.mute-shop__filter {
  padding: 8px 18px;
  border: 1px solid var(--mute-hair);
  background: transparent;
  color: var(--mute-teal);
  font-family: var(--mute-sans);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0;
  white-space: nowrap;
}

.mute-shop__filter:hover {
  border-color: var(--mute-teal);
}

.mute-shop__filter--active {
  background: var(--mute-teal);
  color: var(--mute-ivory);
  border-color: var(--mute-teal);
}

/* ── Product grid ── */
.mute-shop__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.mute-shop__card {
  display: flex;
  flex-direction: column;
  background-color: var(--mute-ivory);
  padding: 12px;
}

/* ── Card image ── */
.mute-shop__card-image-link {
  display: block;
  text-decoration: none;
}

.mute-shop__card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mute-cream);
  margin-bottom: 0;
}

.mute-shop__card-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(15,52,61,0.03),
    rgba(15,52,61,0.03) 1px,
    transparent 1px,
    transparent 7px
  );
  background-color: rgba(15,52,61,0.02);
}

.mute-shop__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.mute-shop__card:hover .mute-shop__card-image img {
  transform: scale(1.03);
}

.mute-shop__card-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-teal);
  background: rgba(245, 240, 232, 0.92);
  padding: 3px 8px;
}

/* ── Card body ── */
.mute-shop__card-body {
  padding: 16px 0 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  border-top: 1px solid var(--mute-hair-soft);
}

.mute-shop__card-code {
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin: 0 0 8px;
}

.mute-shop__card-title {
  font-family: var(--mute-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--mute-teal);
  margin: 0 0 20px;
  line-height: 1.2;
  flex: 1;
}

.mute-shop__card-title a {
  color: inherit;
  text-decoration: none;
}

.mute-shop__card-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--mute-hair-soft);
}

.mute-shop__card-price {
  font-family: var(--mute-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--mute-teal);
}

.mute-shop__card-stock {
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-muted);
}

.mute-shop__card-stock--in {
  color: var(--mute-muted);
}

.mute-shop__card-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: var(--mute-teal);
  color: var(--mute-ivory);
  text-align: center;
  font-family: var(--mute-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s;
  box-sizing: border-box;
}

.mute-shop__card-btn:hover { opacity: 0.85; }

.mute-shop__empty {
  font-size: 14px;
  color: var(--mute-muted);
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
}

/* Mobile */
@media (max-width: 749px) {
  .mute-shop__inner { padding: 40px 1.5rem 48px; }
  .mute-shop__header { flex-direction: column; align-items: flex-start; }
  .mute-shop__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .mute-shop__card-title { font-size: 15px; }
}

/* Tablet */
@media (min-width: 750px) and (max-width: 989px) {
  .mute-shop__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   PRODUCT FAMILY — MUTE FABRIC
   Append this block to section-mute-all.css
   after the existing product landing sections
   ============================================ */

.mute-family { background-color: var(--mute-ivory); padding: 0; }

.mute-family__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 80px 3rem;
}

.mute-family__header {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 56px;
  align-items: flex-end;
  margin-bottom: 72px;
}

.mute-family__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-bottom: 24px;
}

.mute-family__title {
  font-family: var(--mute-sans);
  font-size: clamp(36px, 5.5vw, 76px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--mute-teal);
  margin: 0;
}

.mute-family__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
}

.mute-family__body {
  font-family: var(--mute-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--mute-muted);
  max-width: 440px;
  padding-bottom: 8px;
  margin: 0;
}

.mute-family__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--mute-hair);
  border-bottom: 1px solid var(--mute-hair);
}

.mute-family__card {
  display: flex;
  flex-direction: column;
  padding-bottom: 36px;
  position: relative;
}

.mute-family__card + .mute-family__card {
  border-left: 1px solid rgba(15, 52, 61, 0.1);
}

.mute-family__card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: rgba(15, 52, 61, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 32px;
  overflow: hidden;
}

.mute-family__card-svg {
  width: 70%;
  height: 70%;
  color: var(--mute-teal);
  opacity: 0.85;
}

.mute-family__card-num {
  position: absolute;
  top: 14px;
  left: 18px;
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  z-index: 1;
}

.mute-family__card-inner {
  padding: 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.mute-family__card-name {
  font-family: var(--mute-sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--mute-teal);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
}

.mute-family__card-sub {
  font-family: var(--mute-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--mute-muted);
  line-height: 1.3;
}

.mute-family__card-desc {
  font-family: var(--mute-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted);
  margin-top: 4px;
}

.mute-family__card-link {
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--mute-sans);
  font-size: 13px;
  color: var(--mute-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  transition: color 0.2s;
}

.mute-family__card-link:hover { color: var(--mute-teal); }

/* ── Family responsive ────────────────────── */
@media (max-width: 1100px) {
  .mute-family__grid { grid-template-columns: repeat(2, 1fr); }
  .mute-family__card:nth-child(2n + 1) { border-left: none; }
  .mute-family__card:nth-child(n + 3) { border-top: 1px solid rgba(15, 52, 61, 0.1); }
}

@media (max-width: 750px) {
  .mute-family__inner { padding: 48px 1.5rem; }
  .mute-family__header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .mute-family__grid { grid-template-columns: 1fr; }
  .mute-family__card { border-left: none !important; border-top: 1px solid rgba(15, 52, 61, 0.1); }
  .mute-family__card:first-child { border-top: none; }
  .mute-family__card-inner { padding: 0; }
}
/* ============================================
   FABRIC CONFIGURATOR — additional CSS
   Append to section-mute-all.css
   after the existing .mute-config block
   ============================================ */

/* Hide/show panels */
.mute-config--hidden { display: none !important; }

/* ── Print gallery grid ────────────────────── */
.mute-config__prints {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.mute-config__print {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 1px solid rgba(15, 52, 61, 0.12);
  background: none;
  cursor: pointer;
  transition: border-color 0.2s;
  overflow: hidden;
}

.mute-config__print:hover {
  border-color: rgba(15, 52, 61, 0.4);
}

.mute-config__print--active {
  border-color: var(--mute-teal);
  box-shadow: 0 0 0 1px var(--mute-teal);
}

.mute-config__print-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.mute-config__print-placeholder {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 52, 61, 0.04);
  color: var(--mute-muted);
}

.mute-config__print-placeholder svg {
  width: 40%;
  height: 40%;
}

.mute-config__print-name {
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute-muted);
  padding: 6px 4px 10px;
  text-align: center;
  line-height: 1.3;
}

.mute-config__print--active .mute-config__print-name {
  color: var(--mute-teal);
}

.mute-config__print-note {
  font-family: var(--mute-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--mute-muted-soft);
  margin-top: 16px;
  font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 750px) {
  .mute-config__prints {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Speaker panel info ────────────────────── */
.mute-config__speaker-info {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.mute-config__speaker-feature {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.mute-config__speaker-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--mute-teal);
  opacity: 0.7;
  margin-top: 2px;
}

.mute-config__speaker-title {
  font-family: var(--mute-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--mute-teal);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.mute-config__speaker-desc {
  font-family: var(--mute-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted);
  margin: 0;
}

.mute-config__speaker-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--mute-hair-soft);
  margin-top: 8px;
}

.mute-config__speaker-specs > div {
  padding: 16px 0;
  border-bottom: 1px solid var(--mute-hair-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mute-config__speaker-spec-label {
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute-muted-soft);
}

.mute-config__speaker-spec-value {
  font-family: var(--mute-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--mute-teal);
}

@media (max-width: 750px) {
  .mute-config__speaker-specs {
    grid-template-columns: 1fr;
  }
}
/* ============================================
   FABRIC TECHNICAL — construction diagram
   Append to section-mute-all.css
   ============================================ */

/* Spec row numbering */
.mute-technical--fabric .mute-technical__specs-list li {
  display: grid;
  grid-template-columns: 40px 120px 1fr;
  gap: 0;
  align-items: baseline;
}

.mute-technical__spec-num {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--mute-muted-soft);
}

/* ── Construction diagram panel ────────────── */
.mute-technical__diagram {
  background: var(--mute-cream);
  border: 1px solid var(--mute-hair-soft);
  padding: 32px;
}

.mute-technical__diagram-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mute-hair-soft);
}

/* ============================================
   FABRIC TECHNICAL — construction diagram
   Append to section-mute-all.css
   ============================================ */

/* Spec row numbering */
.mute-technical--fabric .mute-technical__specs-list li {
  display: grid;
  grid-template-columns: 40px 120px 1fr;
  gap: 0;
  align-items: baseline;
}

.mute-technical--fabric .mute-technical__spec-num {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--mute-muted-soft);
}

/* ── Construction diagram panel ────────────── */
.mute-technical--fabric .mute-technical__diagram {
  background: var(--mute-cream);
  border: 1px solid var(--mute-hair-soft);
  padding: 32px;
}

.mute-technical--fabric .mute-technical__diagram-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mute-hair-soft);
}

/* ── Layer bars ────────────────────────────── */
.mute-technical--fabric .mute-technical__layers {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.mute-technical--fabric .mute-technical__layer {
  display: grid;
  grid-template-columns: 32px 1fr 160px;
  gap: 16px;
  align-items: center;
}

.mute-technical--fabric .mute-technical__layer-num {
  font-family: var(--mute-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--mute-teal);
  line-height: 1;
}

.mute-technical--fabric .mute-technical__layer-bar {
  width: 100%;
  min-height: 30px;
  border-radius: 2px;
  display: block;
}

.mute-technical--fabric .mute-technical__layer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mute-technical--fabric .mute-technical__layer-name {
  font-family: var(--mute-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--mute-teal);
  letter-spacing: -0.01em;
}

.mute-technical--fabric .mute-technical__layer-meta {
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute-muted-soft);
}

/* ── Dimension specs row ───────────────────── */
.mute-technical--fabric .mute-technical__dimensions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--mute-hair-soft);
  padding-top: 24px;
}

.mute-technical--fabric .mute-technical__dimension {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mute-technical--fabric .mute-technical__dimension-label {
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute-muted-soft);
}

.mute-technical--fabric .mute-technical__dimension-value {
  font-family: var(--mute-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--mute-teal);
  letter-spacing: -0.02em;
}

/* ── Responsive ── */
@media (max-width: 750px) {
  .mute-technical--fabric .mute-technical__diagram { padding: 20px; }
  .mute-technical--fabric .mute-technical__layer { grid-template-columns: 24px 1fr; gap: 12px; }
  .mute-technical--fabric .mute-technical__layer-info { grid-column: 1 / -1; min-width: 0; }
  .mute-technical--fabric .mute-technical__dimensions { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .mute-technical--fabric .mute-technical__specs-list li { grid-template-columns: 30px 100px 1fr; }
}










/* ==========================================================================
   MUTE CONSULTANCY PAGE — CSS v2 (CORRECTED)
   Font sizes unified with Felt landing page.
   Replace the consultancy block in section-mute-all.css with this.
   ========================================================================== */

/* ─── Shared atoms ─────────────────────────────────────────────── */
.mute-c em.serif {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.mute-c .mono {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted, #5b757c);
}
.mute-c .mono--on-dark { color: var(--mute-muted-on-dark, #b9beb9); }

.mute-c .body {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted, #5b757c);
  margin: 0;
}
.mute-c .body--lg { font-size: 18px; }
.mute-c .body--on-dark { color: var(--mute-muted-on-dark, #b9beb9); }

.mute-c .h-hero {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
}
.mute-c .h-lg {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
}
.mute-c .h-md {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0;
}

.mute-c .section { padding: 96px 3rem; }
.mute-c .section--strip { padding: 56px 3rem; }
.mute-c .section--dark { background: var(--mute-teal, #0f343d); color: var(--mute-ivory, #f5f0e8); }
.mute-c .section--ivory { background: var(--mute-ivory, #f5f0e8); }
.mute-c .section--cream { background: var(--mute-cream, #efe8dc); }
.mute-c .wrap { max-width: 120rem; margin: 0 auto; }

/* Buttons */
.mute-c .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 26px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.mute-c .btn--primary { background: var(--mute-teal, #0f343d); color: var(--mute-ivory, #f5f0e8); }
.mute-c .btn--primary:hover { background: #0a242b; }
.mute-c .btn--light { background: var(--mute-ivory, #f5f0e8); color: var(--mute-teal, #0f343d); }
.mute-c .btn--light:hover { background: #fff; }
.mute-c .btn--ghost { background: transparent; color: var(--mute-teal, #0f343d); border-color: rgba(15,52,61,0.25); }
.mute-c .btn--ghost:hover { border-color: var(--mute-teal, #0f343d); }
.mute-c .btn--ghost-dark { background: transparent; color: var(--mute-ivory, #f5f0e8); border-color: rgba(245,240,232,0.30); }
.mute-c .btn--ghost-dark:hover { border-color: var(--mute-ivory, #f5f0e8); }

.mute-c .text-link {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--mute-teal, #0f343d);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(15,52,61,0.25);
  padding-bottom: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mute-c .text-link--on-dark { color: var(--mute-ivory, #f5f0e8); border-bottom-color: rgba(245,240,232,0.30); }

.mute-c .wa-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #25D366; display: inline-block;
}

.mute-c .rule { border: 0; border-top: 1px solid rgba(15,52,61,0.25); margin: 0; }

/* Placeholder surface */
.mute-c .ph {
  position: relative;
  background: repeating-linear-gradient(135deg, rgba(15,52,61,0.08) 0 14px, rgba(15,52,61,0.04) 14px 28px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mute-c .ph--teal-tint {
  background:
    linear-gradient(rgba(15,52,61,0.78), rgba(10,36,43,0.78)),
    repeating-linear-gradient(135deg, rgba(245,240,232,0.10) 0 12px, rgba(245,240,232,0.00) 12px 24px);
  color: var(--mute-ivory, #f5f0e8);
}
.mute-c .ph__badge {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(8,25,30,0.78);
  color: var(--mute-ivory, #f5f0e8);
  padding: 6px 10px;
  border: 1px solid rgba(245,240,232,0.30);
  z-index: 2;
}

/* Head-row (used by Process, Sectors, Projects) */
.mute-c .head-row {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 56px;
  align-items: flex-end;
  margin-bottom: 72px;
}
.mute-c .head-row .overline { display: block; margin-bottom: 24px; }
.mute-c .head-row .body { max-width: 440px; padding-bottom: 8px; }

/* ─── 1. HERO ──────────────────────────────────────────────────── */
.mute-c-hero {
  background: var(--mute-teal, #0f343d);
  color: var(--mute-ivory, #f5f0e8);
  padding: 104px 3rem 96px;
}
.mute-c-hero .wrap {
  max-width: 120rem;
  margin: 0 auto;
}
.mute-c-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: stretch;
}
.mute-c-hero__image {
  width: 100%;
  min-height: 540px;
  aspect-ratio: 5 / 6;
}
.mute-c-hero__viz {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 36px 32px;
}
.mute-c-hero__viz .label-row {
  display: flex; gap: 14px; align-items: center;
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,240,232,0.7);
}
.mute-c-hero__viz .label-row .sep { color: rgba(245,240,232,0.35); }
.mute-c-hero__viz .wave {
  width: 100%; flex: 1;
  display: flex; align-items: center; justify-content: center;
}
.mute-c-hero__viz .wave svg { width: 100%; height: 70%; }
.mute-c-hero__viz .scale {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.18em;
  color: rgba(245,240,232,0.55);
  text-transform: uppercase;
}
.mute-c-hero__viz .scale span {
  border-left: 1px solid rgba(245,240,232,0.12);
  padding: 18px 0 4px 6px;
}
.mute-c-hero__viz .scale span:first-child { border-left: none; padding-left: 0; }
.mute-c-hero__viz .corner-tag {
  align-self: flex-end;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.7);
  border: 1px solid rgba(245,240,232,0.22);
  padding: 8px 12px;
}
.mute-c-hero__viz .readings {
  display: flex; gap: 18px;
}
.mute-c-hero__viz .readings .val {
  font-family: 'Geist', sans-serif;
  color: rgba(245,240,232,0.9);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 6px;
}
.mute-c-hero__viz .readings .val--highlight {
  color: var(--mute-ivory, #f5f0e8);
  font-weight: 600;
}
.mute-c-hero__viz .readings .val .unit {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-left: 4px;
}

.mute-c-hero__copy {
  display: flex;
  flex-direction: column;
}
.mute-c-hero__overline {
  margin-bottom: 28px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.mute-c-hero__overline .dot {
  width: 5px; height: 5px;
  background: var(--mute-muted-on-dark, #b9beb9);
  display: inline-block;
}
.mute-c-hero__title { color: var(--mute-ivory, #f5f0e8); }
.mute-c-hero__lede {
  color: var(--mute-ivory, #f5f0e8);
  margin-top: 28px;
  font-family: var(--mute-serif, 'Instrument Serif', serif);
  font-weight: 400;
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 520px;
}
.mute-c-hero__body {
  margin-top: 22px;
  max-width: 520px;
}
.mute-c-hero__cta {
  margin-top: 40px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.mute-c-hero__cta .btn--light { padding: 18px 26px; font-size: 12px; }
.mute-c-hero__quick {
  margin-top: auto;
  padding-top: 36px;
  border-top: 1px solid rgba(245,240,232,0.30);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.mute-c-hero__quick > div { padding-top: 4px; }
.mute-c-hero__quick .v {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--mute-ivory, #f5f0e8);
  margin-top: 10px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

/* ─── 2. PROCESS ───────────────────────────────────────────────── */
.mute-c-process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(15,52,61,0.25);
  border-left: 1px solid rgba(15,52,61,0.25);

}
.mute-c-process__card {
  padding: 44px 36px;
  border-right: 1px solid rgba(15,52,61,0.25);
  border-bottom: 1px solid rgba(15,52,61,0.25);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 360px;
}
.mute-c-process__card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.mute-c-process__card-num {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--mute-muted, #5b757c);
}
.mute-c-process__card-icon {
  width: 36px; height: 36px;
  color: var(--mute-teal, #0f343d);
  opacity: 0.75;
}
.mute-c-process__card-icon svg { width: 100%; height: 100%; }
.mute-c-process__card-title {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--mute-teal, #0f343d);
  margin: 12px 0 0;
  line-height: 1.05;
  
}
.mute-c-process__card-title em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
}
.mute-c-process__card-desc {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute-muted, #5b757c);
  margin: 0;
}
.mute-c-process__card-foot {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(15,52,61,0.16);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted, #5b757c);
}
.mute-c-process__card-foot .v { color: var(--mute-teal, #0f343d); }

/* ─── 3. SECTORS ───────────────────────────────────────────────── */
.mute-c-sectors__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}
.mute-c-sector-card { display: flex; flex-direction: column; }
.mute-c-sector-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  margin-bottom: 28px;
}
.mute-c-sector-card__img svg {
  width: 100%; height: 100%;
  position: absolute; top: 0; left: 0;
}
.mute-c-sector-card__title {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--mute-teal, #0f343d);
  line-height: 1.15;
  margin: 0 0 12px;
}
.mute-c-sector-card__title em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.mute-c-sector-card__desc {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute-muted, #5b757c);
  margin: 0 0 22px;
}
.mute-c-sector-card__tags {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-teal, #0f343d);
  padding-top: 16px;
  border-top: 1px solid rgba(15,52,61,0.25);
}
.mute-c-sector-card__tags .sep { color: rgba(15,52,61,0.25); margin: 0 8px; }

.mute-c-more-sectors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid rgba(15,52,61,0.25);
}
.mute-c-more-sectors__item {
  padding: 28px 0;
  border-bottom: 1px solid rgba(15,52,61,0.25);
  display: grid;
  grid-template-columns: 220px 1fr 16px;
  gap: 32px;
  align-items: baseline;
}
.mute-c-more-sectors__item:nth-child(odd) { padding-right: 32px; }
.mute-c-more-sectors__item:nth-child(even) { padding-left: 32px; border-left: 1px solid rgba(15,52,61,0.25); }
.mute-c-more-sectors__name {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--mute-teal, #0f343d);
}
.mute-c-more-sectors__desc {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--mute-muted, #5b757c);
  line-height: 1.5;
}
.mute-c-more-sectors__arrow {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--mute-muted, #5b757c);
  text-align: right;
}

/* ─── 4. ADVANTAGE / CLOSED LOOP ───────────────────────────────── */
.mute-c-advantage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: flex-start;
}
.mute-c-advantage__copy .overline { display: block; margin-bottom: 24px; }
.mute-c-advantage__body { margin-top: 28px; max-width: 520px; }
.mute-c-advantage__compare {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(15,52,61,0.25);
}
.mute-c-advantage__compare-col {
  padding: 22px 24px 22px 0;
}
.mute-c-advantage__compare-col + .mute-c-advantage__compare-col {
  border-left: 1px solid rgba(15,52,61,0.25);
  padding-left: 28px;
}
.mute-c-advantage__compare-col .label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted, #5b757c);
  margin-bottom: 14px;
}
.mute-c-advantage__compare-col .v {
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--mute-teal, #0f343d);
}
.mute-c-advantage__compare-col .v em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.mute-c-advantage__compare-col .sub {
  margin-top: 8px;
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--mute-muted, #5b757c);
  line-height: 1.5;
}
.mute-c-advantage__compare-col .strike {
  text-decoration: line-through;
  text-decoration-color: rgba(15,52,61,0.25);
  text-decoration-thickness: 1px;
}

/* Closed-loop panel */
.mute-c-loop {
  background: var(--mute-teal, #0f343d);
  color: var(--mute-ivory, #f5f0e8);
  padding: 44px 40px;
}
.mute-c-loop__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(245,240,232,0.30);
  margin-bottom: 32px;
}
.mute-c-loop__head h3 {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--mute-ivory, #f5f0e8);
  margin: 0;
}
.mute-c-loop__head h3 em { font-family: 'Instrument Serif', serif; font-style: italic; }
.mute-c-loop__step {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid rgba(245,240,232,0.12);
}
.mute-c-loop__step:last-child { border-bottom: none; }
.mute-c-loop__step-num {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--mute-muted-on-dark, #b9beb9);
}
.mute-c-loop__step-name {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--mute-ivory, #f5f0e8);
  line-height: 1.15;
}
.mute-c-loop__step-name em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.mute-c-loop__step-by {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark, #b9beb9);
  text-align: right;
  max-width: 180px;
  line-height: 1.6;
}
.mute-c-loop__step-by strong {
  color: var(--mute-ivory, #f5f0e8);
  font-weight: 500;
  letter-spacing: 0.2em;
}
.mute-c-loop__return {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(245,240,232,0.30);
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark, #b9beb9);
}

/* Stats row */
.mute-c-stats {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(15,52,61,0.25);
  border-bottom: 1px solid rgba(15,52,61,0.25);
}
.mute-c-stats__item {
  padding: 36px 32px 36px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mute-c-stats__item + .mute-c-stats__item {
  border-left: 1px solid rgba(15,52,61,0.25);
  padding-left: 36px;
}
.mute-c-stats__num {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: clamp(48px, 4.4vw, 64px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--mute-teal, #0f343d);
}
.mute-c-stats__num em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.mute-c-stats__label {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--mute-muted, #5b757c);
  letter-spacing: -0.005em;
  margin-top: 6px;
}
.mute-c-stats__sub {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #83969b;
  margin-top: 4px;
}

/* ─── 5. DESIGN STAGE ──────────────────────────────────────────── */
.mute-c-stage {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: flex-start;
}
.mute-c-stage__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  position: relative;
}
.mute-c-stage__image svg {
  width: 100%; height: 100%;
  position: absolute; top: 0; left: 0;
}
.mute-c-stage__copy .overline { display: block; margin-bottom: 24px; }
.mute-c-stage__body { margin-top: 28px; max-width: 540px; }
.mute-c-stage__list { margin-top: 40px; }
.mute-c-stage__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid rgba(15,52,61,0.25);
  align-items: baseline;
}
.mute-c-stage__item:last-child { border-bottom: 1px solid rgba(15,52,61,0.25); }
.mute-c-stage__num {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #83969b;
}
.mute-c-stage__text {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--mute-teal, #0f343d);
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.mute-c-stage__callout {
  margin-top: 40px;
  padding: 28px 32px;
  background: var(--mute-ivory, #f5f0e8);
  border: 1px solid rgba(15,52,61,0.25);
  display: flex;
  gap: 28px;
  align-items: center;
}
.mute-c-stage__callout .big {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 44px;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--mute-teal, #0f343d);
  white-space: nowrap;
}
.mute-c-stage__callout .big em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.mute-c-stage__callout .small {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--mute-muted, #5b757c);
  line-height: 1.5;
}

/* ─── 6. PROJECTS ──────────────────────────────────────────────── */
.mute-c-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mute-c-project {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.mute-c-project__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  margin-bottom: 24px;
}
.mute-c-project__img svg {
  width: 100%; height: 100%;
  position: absolute; top: 0; left: 0;
}
.mute-c-project__tag {
  position: absolute;
  top: 14px; left: 14px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(245,240,232,0.94);
  color: var(--mute-teal, #0f343d);
  padding: 6px 10px;
  border: 1px solid rgba(15,52,61,0.16);
  z-index: 2;
}
.mute-c-project__name {
  font-family: 'Geist', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--mute-teal, #0f343d);
  line-height: 1.2;
  margin: 0;
}
.mute-c-project__meta {
  margin-top: 12px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted, #5b757c);
}
.mute-c-project__meta .sep { color: rgba(15,52,61,0.25); margin: 0 4px; }
.mute-c-project__link {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(15,52,61,0.25);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--mute-teal, #0f343d);
  letter-spacing: 0.02em;
}

/* ─── 7. CTA ───────────────────────────────────────────────────── */
.mute-c-cta {
  background: var(--mute-teal, #0f343d);
  color: var(--mute-ivory, #f5f0e8);
  padding: 120px 3rem;
}
.mute-c-cta .wrap { max-width: 120rem; margin: 0 auto; }
.mute-c-cta__row {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 80px;
  align-items: flex-start;
}
.mute-c-cta .overline { display: block; margin-bottom: 28px; color: var(--mute-muted-on-dark, #b9beb9); }
.mute-c-cta__title { color: var(--mute-ivory, #f5f0e8); margin: 0; }
.mute-c-cta__body {
  margin-top: 32px;
  color: var(--mute-muted-on-dark, #b9beb9);
  max-width: 580px;
}
.mute-c-cta__assurance {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(245,240,232,0.30);
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 36px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark, #b9beb9);
  width: fit-content;
}
.mute-c-cta__assurance .v {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--mute-ivory, #f5f0e8);
  letter-spacing: -0.005em;
  text-transform: none;
  margin-top: 8px;
}
.mute-c-cta__right {
  padding-left: 32px;
  border-left: 1px solid rgba(245,240,232,0.30);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.mute-c-cta__right .btn--light { padding: 20px 28px; font-size: 12px; }
.mute-c-cta__contact {
  margin-top: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark, #b9beb9);
  line-height: 1.9;
}
.mute-c-cta__contact a { color: var(--mute-muted-on-dark, #b9beb9); text-decoration: none; }
.mute-c-cta__contact .em { color: var(--mute-ivory, #f5f0e8); }

/* ─── 8. TRUST STRIP ───────────────────────────────────────────── */
.mute-c-trust {
  background: var(--mute-cream, #efe8dc);
  padding: 56px 3rem;
  border-top: 1px solid rgba(15,52,61,0.25);
  border-bottom: 1px solid rgba(15,52,61,0.25);
}
.mute-c-trust .wrap { max-width: 120rem; margin: 0 auto; }
.mute-c-trust__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.mute-c-trust__item {
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.mute-c-trust__item + .mute-c-trust__item {
  border-left: 1px solid rgba(15,52,61,0.25);
}
.mute-c-trust__icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  color: var(--mute-teal, #0f343d);
  opacity: 0.72;
}
.mute-c-trust__icon svg { width: 100%; height: 100%; }
.mute-c-trust__text { display: flex; flex-direction: column; gap: 6px; }
.mute-c-trust__title {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--mute-teal, #0f343d);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.mute-c-trust__sub {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted, #5b757c);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1200px) {
  .mute-c-sectors__grid { grid-template-columns: 1fr 1fr; }
  .mute-c-sectors__grid > :nth-child(3) { grid-column: 1 / 3; }
  .mute-c-sectors__grid > :nth-child(3) .mute-c-sector-card__img { aspect-ratio: 8 / 3; }
}

@media (max-width: 980px) {
  .mute-c .section { padding: 72px 3rem; }
  .mute-c-hero { padding: 72px 3rem; }
  .mute-c-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .mute-c-hero__image { min-height: 380px; aspect-ratio: 4 / 3; }

  .mute-c .head-row { grid-template-columns: 1fr; }
  .mute-c .head-row .body { max-width: 640px; }

  .mute-c-process__grid { grid-template-columns: 1fr; }
  .mute-c-process__card { min-height: 0; }

  .mute-c-sectors__grid { grid-template-columns: 1fr; }
  .mute-c-sectors__grid > * { grid-column: auto; }
  .mute-c-sectors__grid > :nth-child(3) { grid-column: auto; }
  .mute-c-sectors__grid > :nth-child(3) .mute-c-sector-card__img { aspect-ratio: 4 / 3; }
  .mute-c-more-sectors { grid-template-columns: 1fr; }
  .mute-c-more-sectors__item { grid-template-columns: 180px 1fr 16px; padding-left: 0 !important; padding-right: 0 !important; border-left: none !important; }

  .mute-c-advantage { grid-template-columns: 1fr; gap: 40px; }
  .mute-c-stage { grid-template-columns: 1fr; gap: 40px; }
  .mute-c-cta__row { grid-template-columns: 1fr; gap: 40px; }
  .mute-c-cta__right { padding-left: 0; border-left: none; border-top: 1px solid rgba(245,240,232,0.30); padding-top: 28px; }

  .mute-c-stats { grid-template-columns: 1fr; }
  .mute-c-stats__item + .mute-c-stats__item { border-left: none; border-top: 1px solid rgba(15,52,61,0.25); padding-left: 0; padding-top: 28px; }

  .mute-c-projects__grid { grid-template-columns: 1fr; gap: 40px; }

  .mute-c-trust__row { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .mute-c-trust__item:nth-child(3) { border-left: none; }
}

@media (max-width: 640px) {
  .mute-c .section { padding: 56px 1.5rem; }
  .mute-c-hero { padding: 56px 1.5rem 64px; }
  .mute-c-hero__quick { grid-template-columns: 1fr 1fr; gap: 20px; }
  .mute-c-hero__quick > div:nth-child(3) { grid-column: 1 / 3; padding-top: 20px; border-top: 1px solid rgba(245,240,232,0.12); }
  .mute-c-hero__cta { width: 100%; flex-direction: column; align-items: stretch; }
  .mute-c-hero__cta .btn { width: 100%; }

  .mute-c-stage__callout { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; }
  .mute-c-stage__item { grid-template-columns: 40px 1fr; gap: 16px; }

  .mute-c-more-sectors__item { grid-template-columns: 1fr; gap: 8px; }
  .mute-c-more-sectors__arrow { display: none; }

  .mute-c-advantage__compare { grid-template-columns: 1fr; }
  .mute-c-advantage__compare-col + .mute-c-advantage__compare-col { border-left: none; border-top: 1px solid rgba(15,52,61,0.25); padding-left: 0; padding-top: 22px; }

  .mute-c-trust__row { grid-template-columns: 1fr; }
  .mute-c-trust__item { border-left: none !important; padding: 18px 0; border-bottom: 1px solid rgba(15,52,61,0.25); }
  .mute-c-trust__item:last-child { border-bottom: none; }

  .mute-c-cta { padding: 72px 1.5rem; }
}


/* ==========================================================================
   SPACING FIX
   ========================================================================== */

.mute-c.section {
  padding: 80px 3rem;
}

.mute-section + .mute-section > .mute-c.section {
  padding-top: 40px;
}

@media (min-width: 981px) {
  .mute-c .head-row {
    grid-template-columns: 7fr 5fr;
  }
}

@media (max-width: 980px) {
  .mute-c.section {
    padding: 64px 3rem;
  }
  .mute-section + .mute-section > .mute-c.section {
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .mute-c.section {
    padding: 48px 1.5rem;
  }
  .mute-section + .mute-section > .mute-c.section {
    padding-top: 0;
  }
}

/* NUCLEAR OVERRIDE — Dawn section spacing reset for consultancy */
.mute-section { padding: 0 !important; margin: 0 !important; }
.mute-section > section { margin: 0 !important; }











/* ============================================
   MUTE PRO — ROOM SYSTEMS LANDING PAGE
   Sections: Hero, Spaces, Problem, Series,
   Kits, Elements, Consult Bar
   ============================================ */


/* ------------------------------------------
   PRO HERO
   ------------------------------------------ */

.mute-pro-hero {
  background-color: var(--mute-teal);
  color: var(--mute-ivory);
  overflow: hidden;
  padding: 120px 0 96px;
}

.mute-pro-hero__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: end;
}

.mute-pro-hero__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.mute-pro-hero__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute-muted-on-dark);
  margin: 0;
}

.mute-pro-hero__title {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: clamp(44px, 5.6vw, 84px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
  color: var(--mute-ivory);
  text-wrap: balance;
}

.mute-pro-hero__title em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.mute-pro-hero__subtitle {
  font-family: var(--mute-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--mute-muted-on-dark);
  max-width: 520px;
  letter-spacing: -0.005em;
  margin: 0;
}

.mute-pro-hero__body {
  font-family: var(--mute-sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--mute-muted-on-dark);
  max-width: 480px;
  margin: 0;
}

.mute-pro-hero__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.mute-pro-hero__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background-color: var(--mute-ivory);
  color: var(--mute-teal);
  text-decoration: none;
  font-family: var(--mute-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background-color 0.3s ease;
  line-height: 1;
}

.mute-pro-hero__btn-primary:hover {
  background-color: #fff;
}

.mute-pro-hero__arr {
  font-family: var(--mute-mono);
  font-weight: 400;
}

.mute-pro-hero__wa-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mute-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-ivory);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.mute-pro-hero__wa-link:hover {
  border-bottom-color: currentColor;
}

.mute-pro-hero__wa-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25D366;
  display: inline-block;
  flex: 0 0 8px;
}

.mute-pro-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 8px;
  border-top: 1px solid var(--mute-hair-on-dark);
}

.mute-pro-hero__stat {
  padding: 24px 24px 0 0;
  border-right: 1px solid var(--mute-hair-on-dark);
}

.mute-pro-hero__stat:last-child {
  border-right: 0;
  padding-right: 0;
}

.mute-pro-hero__stat-num {
  font-family: var(--mute-sans);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: #d85a30;
  line-height: 1;
}

.mute-pro-hero__stat-prefix,
.mute-pro-hero__stat-suffix {
  font-family: var(--mute-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--mute-muted-on-dark);
  font-weight: 400;
}

.mute-pro-hero__stat-suffix {
  margin-left: 4px;
}

.mute-pro-hero__stat-prefix {
  margin-right: 4px;
}

.mute-pro-hero__stat-label {
  margin-top: 10px;
  font-family: var(--mute-mono);
  font-size: 10px;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mute-muted-on-dark);
  max-width: 24ch;
}

.mute-pro-hero__media {
  position: relative;
}

.mute-pro-hero__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4/5;
}

.mute-pro-hero__placeholder {
  position: relative;
  background: rgba(245, 240, 232, 0.06);
  aspect-ratio: 4/5;
  overflow: hidden;
}

.mute-pro-hero__placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg,
    rgba(245, 240, 232, 0.05) 0 1px,
    transparent 1px 18px);
}

.mute-pro-hero__ph-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
  text-align: center;
  padding: 0 24px;
  max-width: 90%;
}


/* ------------------------------------------
   PRO SPACES SHOWCASE
   ------------------------------------------ */

.mute-pro-spaces {
  background-color: var(--mute-ivory);
  padding: 80px 0;
  border-bottom: 1px solid var(--mute-hair-soft);
}

.mute-pro-spaces__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
}

.mute-pro-spaces__header {
  margin-bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 780px;
}

.mute-pro-spaces__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute-muted);
  margin: 0;
}

.mute-pro-spaces__title {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
  color: var(--mute-teal);
}

.mute-pro-spaces__title em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.mute-pro-spaces__stack {
  display: flex;
  flex-direction: column;
  gap: 96px;
}

.mute-pro-spaces__card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 64px;
  align-items: stretch;
}

.mute-pro-spaces__card--flip {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.mute-pro-spaces__card--flip .mute-pro-spaces__media { order: 2; }
.mute-pro-spaces__card--flip .mute-pro-spaces__body { order: 1; }

.mute-pro-spaces__media {
  position: relative;
}

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

.mute-pro-spaces__placeholder {
  position: relative;
  background: rgba(15, 52, 61, 0.08);
  width: 100%;
  height: 100%;
  min-height: 320px;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.mute-pro-spaces__placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg,
    rgba(15, 52, 61, 0.05) 0 1px,
    transparent 1px 18px);
}

.mute-pro-spaces__ph-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  text-align: center;
  padding: 0 24px;
  max-width: 90%;
  line-height: 2;
}

.mute-pro-spaces__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 8px 0;
}

.mute-pro-spaces__card-overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute-muted);
  margin: 0;
}

.mute-pro-spaces__card-title {
  font-family: var(--mute-sans);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--mute-teal);
  margin: 0;
  text-wrap: balance;
}

.mute-pro-spaces__card-title em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
}

.mute-pro-spaces__card-desc {
  font-size: 14px;
  color: var(--mute-muted);
  line-height: 1.65;
  margin: 0;
  max-width: 46ch;
}

.mute-pro-spaces__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--mute-hair-soft);
  margin-top: 8px;
}

.mute-pro-spaces__spec {
  padding: 18px 16px 0 0;
  border-right: 1px solid var(--mute-hair-soft);
}

.mute-pro-spaces__spec:last-child {
  border-right: 0;
  padding-right: 0;
}

.mute-pro-spaces__spec-val {
  font-family: var(--mute-sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1D9E75;
  line-height: 1.1;
}

.mute-pro-spaces__spec-lab {
  margin-top: 6px;
  font-family: var(--mute-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute-muted);
}

.mute-pro-spaces__link {
  font-family: var(--mute-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute-teal);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--mute-teal);
  align-self: flex-start;
  margin-top: 6px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.mute-pro-spaces__link:hover { opacity: 0.7; }


/* ------------------------------------------
   PRO PROBLEM / SOLUTION
   ------------------------------------------ */

.mute-pro-problem {
  background-color: var(--mute-cream);
  padding: 80px 0;
  border-bottom: 1px solid var(--mute-hair-soft);
}

.mute-pro-problem__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
}

.mute-pro-problem__header {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}

.mute-pro-problem__header-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mute-pro-problem__header-right {
  display: flex;
  align-items: flex-end;
}

.mute-pro-problem__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute-muted);
  margin: 0;
}

.mute-pro-problem__title {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
  color: var(--mute-teal);
}

.mute-pro-problem__title em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.mute-pro-problem__header-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mute-muted);
  margin: 0;
}

.mute-pro-problem__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.mute-pro-problem__card {
  border: 1px solid var(--mute-hair-soft);
  background: rgba(255, 255, 255, 0.35);
  padding: 28px 28px 24px;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 24px;
  align-items: center;
}

.mute-pro-problem__card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.mute-pro-problem__card-num {
  font-family: var(--mute-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--mute-muted);
}

.mute-pro-problem__card-title {
  font-family: var(--mute-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--mute-teal);
}

.mute-pro-problem__card-desc {
  font-size: 13.5px;
  color: var(--mute-muted);
  line-height: 1.55;
  margin: 0;
}

.mute-pro-problem__card-diagram {
  width: 260px;
  flex-shrink: 0;
}

.mute-pro-problem__card-diagram img {
  width: 100%;
  height: auto;
  display: block;
}


/* ------------------------------------------
   PRO SERIES / USE CASES
   ------------------------------------------ */

.mute-pro-series {
  background-color: var(--mute-ivory);
  padding: 80px 0;
  border-bottom: 1px solid var(--mute-hair-soft);
}

.mute-pro-series__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
}

.mute-pro-series__header {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}

.mute-pro-series__header-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 760px;
}

.mute-pro-series__header-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.mute-pro-series__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute-muted);
  margin: 0;
}

.mute-pro-series__title {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
  color: var(--mute-teal);
}

.mute-pro-series__title em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.mute-pro-series__header-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mute-muted);
  max-width: 380px;
  margin: 0;
  text-align: left;
}

.mute-pro-series__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--mute-hair-soft);
}

.mute-pro-series__card {
  padding: 32px;
  border-right: 1px solid var(--mute-hair-soft);
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-bottom: 1px solid var(--mute-hair-soft);
}

.mute-pro-series__card:last-child {
  border-right: 0;
}

.mute-pro-series__tag {
  display: inline-block;
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--mute-hair);
  color: var(--mute-teal);
  align-self: flex-start;
}

.mute-pro-series__card-title {
  font-family: var(--mute-sans);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.1;
  color: var(--mute-teal);
}

.mute-pro-series__card-title em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
}

.mute-pro-series__card-body {
  font-size: 13px;
  color: var(--mute-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 34ch;
}

.mute-pro-series__outcomes {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-top: 8px;
  line-height: 1.7;
}

.mute-pro-series__room {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute-teal);
  padding-top: 16px;
  border-top: 1px solid var(--mute-hair-soft);
  margin-top: auto;
}

.mute-pro-series__link {
  font-family: var(--mute-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute-teal);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--mute-teal);
  align-self: flex-start;
  text-decoration: none;
  transition: opacity 0.2s;
}

.mute-pro-series__link:hover { opacity: 0.7; }


/* ------------------------------------------
   PRO KITS / COMING SOON
   ------------------------------------------ */

.mute-pro-kits {
  background-color: var(--mute-teal);
  color: var(--mute-ivory);
  padding: 80px 0;
  border-bottom: 1px solid var(--mute-hair-on-dark-soft);
}

.mute-pro-kits__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
}

.mute-pro-kits__header {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 48px;
}

.mute-pro-kits__header-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mute-pro-kits__header-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.mute-pro-kits__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute-muted-on-dark);
  margin: 0;
}

.mute-pro-kits__title {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
  color: var(--mute-ivory);
}

.mute-pro-kits__title em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.mute-pro-kits__header-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mute-muted-on-dark);
  max-width: 380px;
  margin: 0;
}

.mute-pro-kits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mute-pro-kits__card {
  background: rgba(245, 240, 232, 0.03);
  border: 1px solid var(--mute-hair-on-dark-soft);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  min-height: 420px;
}

.mute-pro-kits__badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--mute-ivory);
  color: var(--mute-teal);
  font-family: var(--mute-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 7px 12px;
}

.mute-pro-kits__tier {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
}

.mute-pro-kits__name {
  font-family: var(--mute-sans);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--mute-ivory);
  margin: 0;
  line-height: 1;
}

.mute-pro-kits__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--mute-ivory);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--mute-hair-on-dark-soft);
}

.mute-pro-kits__price-num {
  font-family: var(--mute-sans);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.mute-pro-kits__price-cur {
  font-family: var(--mute-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--mute-muted-on-dark);
}

.mute-pro-kits__includes {
  font-family: var(--mute-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
  line-height: 1.9;
}

.mute-pro-kits__room {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-ivory);
  padding-top: 18px;
  border-top: 1px solid var(--mute-hair-on-dark-soft);
}

.mute-pro-kits__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: 13px 24px;
  border: 1px solid var(--mute-hair-on-dark);
  color: var(--mute-ivory);
  font-family: var(--mute-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  line-height: 1;
}

.mute-pro-kits__btn:hover {
  background-color: var(--mute-ivory);
  color: var(--mute-teal);
  border-color: var(--mute-ivory);
}

.mute-pro-kits__footer {
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid var(--mute-hair-on-dark-soft);
  gap: 24px;
  flex-wrap: wrap;
}

.mute-pro-kits__footer-text {
  color: var(--mute-ivory);
  font-size: 18px;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 520px;
}

.mute-pro-kits__footer-text em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
}

.mute-pro-kits__footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background-color: var(--mute-ivory);
  color: var(--mute-teal);
  text-decoration: none;
  font-family: var(--mute-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background-color 0.3s ease;
  line-height: 1;
}

.mute-pro-kits__footer-btn:hover {
  background-color: #fff;
}

.mute-pro-kits__wa-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25D366;
  display: inline-block;
  flex: 0 0 8px;
}


/* ------------------------------------------
   PRO ELEMENTS / BUILDING BLOCKS
   ------------------------------------------ */

.mute-pro-elements {
  background-color: var(--mute-ivory);
  padding: 80px 0;
  border-bottom: 1px solid var(--mute-hair-soft);
}

.mute-pro-elements__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
}

.mute-pro-elements__header {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}

.mute-pro-elements__header-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mute-pro-elements__header-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.mute-pro-elements__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute-muted);
  margin: 0;
}

.mute-pro-elements__title {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
  color: var(--mute-teal);
}

.mute-pro-elements__title em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.mute-pro-elements__header-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mute-muted);
  max-width: 380px;
  margin: 0;
}

.mute-pro-elements__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.mute-pro-elements__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mute-pro-elements__card-image {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.mute-pro-elements__card-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 3/5;
}

.mute-pro-elements__placeholder {
  position: relative;
  background: rgba(15, 52, 61, 0.08);
  aspect-ratio: 3/5;
  overflow: hidden;
}

.mute-pro-elements__placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg,
    rgba(15, 52, 61, 0.05) 0 1px,
    transparent 1px 18px);
}

.mute-pro-elements__ph-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  text-align: center;
  padding: 0 24px;
  max-width: 90%;
  line-height: 2;
}

.mute-pro-elements__num {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--mute-muted);
}

.mute-pro-elements__name {
  font-family: var(--mute-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--mute-teal);
}

.mute-pro-elements__name em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
}

.mute-pro-elements__sub {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-top: -6px;
}

.mute-pro-elements__desc {
  font-size: 13px;
  color: var(--mute-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 32ch;
}

.mute-pro-elements__meta {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--mute-hair-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-muted);
}

.mute-pro-elements__meta strong {
  color: var(--mute-teal);
  font-weight: 500;
}


/* ------------------------------------------
   PRO CONSULTATION BAR
   ------------------------------------------ */

.mute-pro-consult {
  background-color: var(--mute-ivory);
  padding: 36px 0;
  border-bottom: 1px solid var(--mute-hair-soft);
}

.mute-pro-consult__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  text-align: center;
}

.mute-pro-consult__text {
  margin: 0;
  font-family: var(--mute-sans);
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--mute-teal);
}

.mute-pro-consult__text em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
}

.mute-pro-consult__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background-color: var(--mute-teal);
  color: var(--mute-ivory);
  text-decoration: none;
  font-family: var(--mute-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background-color 0.3s ease;
  line-height: 1;
}

.mute-pro-consult__btn:hover {
  background-color: var(--mute-teal-deep);
}


/* ------------------------------------------
   PRO SECTIONS — RESPONSIVE
   ------------------------------------------ */

@media (max-width: 1100px) {
  .mute-pro-elements__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1000px) {
  .mute-pro-spaces__card,
  .mute-pro-spaces__card--flip {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .mute-pro-spaces__card--flip .mute-pro-spaces__media { order: 1; }
  .mute-pro-spaces__card--flip .mute-pro-spaces__body { order: 2; }

  .mute-pro-spaces__placeholder {
    min-height: 280px;
    aspect-ratio: 16/9;
  }

  .mute-pro-spaces__stack { gap: 64px; }
}

@media (max-width: 1080px) {
  .mute-pro-problem__cards {
    grid-template-columns: 1fr;
  }
  .mute-pro-problem__header {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 750px) {
  .mute-pro-hero { padding: 64px 0 48px; }
  .mute-pro-spaces,
  .mute-pro-problem,
  .mute-pro-series,
  .mute-pro-kits,
  .mute-pro-elements { padding: 48px 0; }

  .mute-pro-hero__inner,
  .mute-pro-problem__header,
  .mute-pro-problem__cards,
  .mute-pro-series__header,
  .mute-pro-series__grid,
  .mute-pro-kits__header,
  .mute-pro-kits__grid,
  .mute-pro-elements__header,
  .mute-pro-elements__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .mute-pro-hero__inner,
  .mute-pro-spaces__inner,
  .mute-pro-problem__inner,
  .mute-pro-series__inner,
  .mute-pro-kits__inner,
  .mute-pro-elements__inner,
  .mute-pro-consult__inner {
    padding: 0 1.5rem;
  }

  .mute-pro-problem__card {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .mute-pro-problem__card-diagram {
    width: 100%;
    max-width: 280px;
  }

  .mute-pro-series__header { gap: 20px; margin-bottom: 32px; }
  .mute-pro-series__header-right { justify-content: flex-start; }
  .mute-pro-kits__header { gap: 20px; }
  .mute-pro-kits__header-right { justify-content: flex-start; }
  .mute-pro-elements__header { gap: 20px; margin-bottom: 32px; }
  .mute-pro-elements__header-right { justify-content: flex-start; }

  .mute-pro-hero__stats {
    grid-template-columns: 1fr;
    border-top: 1px solid var(--mute-hair-on-dark);
  }

  .mute-pro-hero__stat {
    border-right: 0;
    border-bottom: 1px solid var(--mute-hair-on-dark);
    padding: 20px 0;
  }

  .mute-pro-hero__stat:last-child { border-bottom: 0; }

  .mute-pro-series__card {
    border-right: 0;
    border-bottom: 1px solid var(--mute-hair-soft);
    padding: 32px 0;
  }

  .mute-pro-series__card:last-child { border-bottom: 0; }

  .mute-pro-kits__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .mute-pro-consult__text { font-size: 18px; }
  .mute-pro-consult__inner { flex-direction: column; gap: 20px; }
}









/* ============================================
   MUTE WOOD — Landing Page Sections
   Slat, Perforated, Hybrid, Finishes
   ============================================ */

/* ---------- SHARED: Section header ---------- */
.mute-wood-slat__header,
.mute-wood-perf__header,
.mute-wood-hybrid__header,
.mute-wood-finishes__header { display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:end;margin-bottom:56px }
.mute-wood-slat__header-left,
.mute-wood-perf__header-left,
.mute-wood-hybrid__header-left,
.mute-wood-finishes__header-left { display:flex;flex-direction:column;gap:24px;max-width:760px }
.mute-wood-slat__header-right,
.mute-wood-perf__header-right,
.mute-wood-hybrid__header-right,
.mute-wood-finishes__header-right { display:flex;justify-content:flex-end;align-items:flex-end }
.mute-wood-slat__header-body,
.mute-wood-perf__header-body,
.mute-wood-hybrid__header-body,
.mute-wood-finishes__header-body { font-size:14px;line-height:1.65;color:var(--mute-muted);max-width:380px;margin:0;text-align:left }

/* ---------- SHARED: Overline + Title ---------- */
.mute-wood-slat__overline,
.mute-wood-perf__overline,
.mute-wood-hybrid__overline,
.mute-wood-finishes__overline { font-family:var(--mute-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:0.2em;color:var(--mute-muted);margin:0 }
.mute-wood-slat__title,
.mute-wood-perf__title,
.mute-wood-hybrid__title,
.mute-wood-finishes__title { font-family:var(--mute-sans);font-weight:600;font-size:clamp(34px,4.4vw,60px);letter-spacing:-0.035em;line-height:1.04;margin:0;color:var(--mute-teal) }
.mute-wood-slat__title em,
.mute-wood-perf__title em,
.mute-wood-hybrid__title em,
.mute-wood-finishes__title em { font-family:var(--mute-serif);font-style:italic;font-weight:400;letter-spacing:-0.02em }

/* ---------- SHARED: Inner wrap ---------- */
.mute-wood-slat__inner,
.mute-wood-perf__inner,
.mute-wood-hybrid__inner,
.mute-wood-finishes__inner { max-width:var(--mute-max-width);margin:0 auto;padding:0 3rem }

/* ---------- SHARED: Section bg ---------- */
.mute-wood-slat { background:var(--mute-cream);padding:80px 0;border-bottom:1px solid var(--mute-hair-soft) }
.mute-wood-perf { background:var(--mute-ivory);padding:80px 0;border-bottom:1px solid var(--mute-hair-soft) }
.mute-wood-hybrid { background:var(--mute-cream);padding:80px 0;border-bottom:1px solid var(--mute-hair-soft) }
.mute-wood-finishes { background:var(--mute-ivory);padding:80px 0;border-bottom:1px solid var(--mute-hair-soft) }

/* ----------------------------------------
   SLAT GRID
   ---------------------------------------- */
.mute-wood-slat__grid { display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--mute-hair-soft);border-left:1px solid var(--mute-hair-soft) }
.mute-wood-slat__card { border-right:1px solid var(--mute-hair-soft);border-bottom:1px solid var(--mute-hair-soft);padding:24px 22px;display:flex;flex-direction:column;gap:18px;background:transparent }
.mute-wood-slat__diagram { aspect-ratio:1/1.18;width:100%;background:var(--mute-cream);border:1px solid var(--mute-hair-faint);position:relative;overflow:hidden }
.mute-wood-slat__diagram svg,
.mute-wood-slat__diagram img { width:100%;height:100%;display:block;object-fit:cover }
.mute-wood-slat__num { font-family:var(--mute-mono);font-size:10px;letter-spacing:0.22em;color:var(--mute-muted);text-transform:uppercase }
.mute-wood-slat__name { font-size:18px;font-weight:600;letter-spacing:-0.02em;margin:0;color:var(--mute-teal);line-height:1.15 }
.mute-wood-slat__name em { font-family:var(--mute-serif);font-style:italic;font-weight:400 }
.mute-wood-slat__spec { font-family:var(--mute-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mute-muted);margin-top:auto;padding-top:14px;border-top:1px solid var(--mute-hair-faint);line-height:1.7 }
.mute-wood-slat__spec b { color:var(--mute-teal);font-weight:500 }

/* ---- Spec bar (shared between slat + perf) ---- */
.mute-wood-slat__spec-bar,
.mute-wood-perf__spec-bar { display:grid;grid-template-columns:repeat(5,1fr);margin-top:64px;border-top:1px solid var(--mute-hair-soft);border-bottom:1px solid var(--mute-hair-soft) }
.mute-wood-perf__spec-bar { grid-template-columns:repeat(4,1fr) }
.mute-wood-slat__spec-cell,
.mute-wood-perf__spec-cell { padding:24px;border-right:1px solid var(--mute-hair-soft);display:flex;flex-direction:column;gap:8px }
.mute-wood-slat__spec-cell:last-child,
.mute-wood-perf__spec-cell:last-child { border-right:0 }
.mute-wood-slat__spec-cell-lab,
.mute-wood-perf__spec-cell-lab { font-family:var(--mute-mono);font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--mute-muted) }
.mute-wood-slat__spec-cell-val,
.mute-wood-perf__spec-cell-val { font-family:var(--mute-sans);font-size:18px;font-weight:500;letter-spacing:-0.015em;color:var(--mute-teal);line-height:1.15 }
.mute-wood-slat__spec-cell-val--green,
.mute-wood-perf__spec-cell-val--green { color:var(--mute-green) }

/* ---- Cross-section (shared) ---- */
.mute-wood-slat__cross,
.mute-wood-perf__cross { margin-top:48px;padding-top:48px;border-top:1px solid var(--mute-hair-soft);display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center }
.mute-wood-slat__cross-text,
.mute-wood-perf__cross-text { display:flex;flex-direction:column;gap:18px;max-width:42ch }
.mute-wood-slat__cross-title,
.mute-wood-perf__cross-title { font-size:24px;font-weight:600;letter-spacing:-0.02em;margin:0;color:var(--mute-teal);line-height:1.15 }
.mute-wood-slat__cross-title em,
.mute-wood-perf__cross-title em { font-family:var(--mute-serif);font-style:italic;font-weight:400 }
.mute-wood-slat__cross-body,
.mute-wood-perf__cross-body { font-size:13px;color:var(--mute-muted);margin:0;line-height:1.65;max-width:42ch }
.mute-wood-slat__cross-callout { display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:14px 18px;background:rgba(29,158,117,0.06);border-left:3px solid var(--mute-green);font-family:var(--mute-mono);font-size:11px;letter-spacing:0.1em;color:var(--mute-green);line-height:1.5;font-weight:500 }
.mute-wood-slat__cross-callout-dot { width:6px;height:6px;background:var(--mute-green);flex:0 0 6px;margin-top:4px }
.mute-wood-perf__cross-link { font-family:var(--mute-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--mute-teal);display:inline-flex;align-items:center;gap:8px;padding-bottom:4px;border-bottom:1px solid var(--mute-teal);align-self:flex-start;margin-top:6px;text-decoration:none;transition:opacity 0.2s }
.mute-wood-perf__cross-link:hover { opacity:0.7 }
.mute-wood-slat__cross-diagram,
.mute-wood-perf__cross-diagram { background:var(--mute-ivory);border:1px solid var(--mute-hair-faint);aspect-ratio:5/3;width:100%;position:relative }
.cream .mute-wood-slat__cross-diagram { background:var(--mute-cream) }
.mute-wood-slat__cross-diagram svg,
.mute-wood-perf__cross-diagram svg { width:100%;height:100%;display:block }

/* ----------------------------------------
   PERFORATED GRID
   ---------------------------------------- */
.mute-wood-perf__grid { display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--mute-hair-soft);border-left:1px solid var(--mute-hair-soft) }
.mute-wood-perf__card { border-right:1px solid var(--mute-hair-soft);border-bottom:1px solid var(--mute-hair-soft);padding:28px 26px;display:flex;flex-direction:column;gap:24px }
.mute-wood-perf__diagram { aspect-ratio:1/1;width:100%;background:var(--mute-ivory);border:1px solid var(--mute-hair-faint);position:relative;overflow:hidden }
.mute-wood-perf__diagram svg,
.mute-wood-perf__diagram img { width:100%;height:100%;display:block;object-fit:cover }
.mute-wood-perf__num { font-family:var(--mute-mono);font-size:10px;letter-spacing:0.22em;color:var(--mute-muted);text-transform:uppercase }
.mute-wood-perf__name { font-size:20px;font-weight:600;letter-spacing:-0.02em;margin:0;color:var(--mute-teal);line-height:1.15 }
.mute-wood-perf__name em { font-family:var(--mute-serif);font-style:italic;font-weight:400 }
.mute-wood-perf__gap { font-family:var(--mute-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mute-muted);margin-top:-4px }
.mute-wood-perf__nrc-row { margin-top:auto;padding-top:22px;border-top:1px solid var(--mute-hair-faint);display:flex;justify-content:space-between;align-items:baseline }
.mute-wood-perf__nrc { font-family:var(--mute-sans);font-size:22px;font-weight:500;letter-spacing:-0.02em;color:var(--mute-green);line-height:1 }
.mute-wood-perf__nrc-lab { font-family:var(--mute-mono);font-size:9.5px;letter-spacing:0.22em;color:var(--mute-muted);text-transform:uppercase }
.mute-wood-perf__class { font-family:var(--mute-mono);font-size:10px;letter-spacing:0.18em;color:var(--mute-teal);text-transform:uppercase }

/* ----------------------------------------
   HYBRID
   ---------------------------------------- */
.mute-wood-hybrid__pulse { width:6px;height:6px;background:var(--mute-green);display:inline-block;margin-right:8px;vertical-align:1px }
.mute-wood-hybrid__grid { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start }
.mute-wood-hybrid__diagram { aspect-ratio:5/4;background:var(--mute-ivory);border:1px solid var(--mute-hair-soft);width:100%;position:relative }
.cream .mute-wood-hybrid__diagram { background:#f3ebdc }
.mute-wood-hybrid__diagram svg,
.mute-wood-hybrid__diagram img { width:100%;height:100%;display:block;object-fit:contain }
.mute-wood-hybrid__body { display:flex;flex-direction:column;gap:24px;padding-top:8px }
.mute-wood-hybrid__pill { display:inline-flex;align-items:center;gap:10px;font-family:var(--mute-mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--mute-green);padding:6px 12px;border:1px solid var(--mute-green);align-self:flex-start }
.mute-wood-hybrid__pill-dot { width:6px;height:6px;background:var(--mute-green);display:inline-block }
.mute-wood-hybrid__desc { font-size:15px;line-height:1.65;color:var(--mute-muted);max-width:42ch;margin:0 }
.mute-wood-hybrid__compare { display:grid;grid-template-columns:1fr 1fr;margin-top:8px;border-top:1px solid var(--mute-hair-soft) }
.mute-wood-hybrid__compare > div { padding:24px 24px 24px 0;border-right:1px solid var(--mute-hair-soft);display:flex;flex-direction:column;gap:8px }
.mute-wood-hybrid__compare > div:last-child { border-right:0;padding-left:24px;padding-right:0 }
.mute-wood-hybrid__comp-lab { font-family:var(--mute-mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--mute-muted) }
.mute-wood-hybrid__comp-val { font-family:var(--mute-sans);font-size:32px;font-weight:500;letter-spacing:-0.025em;color:var(--mute-teal);line-height:1 }
.mute-wood-hybrid__comp-val--green { color:var(--mute-green) }
.mute-wood-hybrid__comp-cap { font-family:var(--mute-serif);font-style:italic;font-size:16px;color:var(--mute-teal);margin-top:8px;line-height:1.3 }
.mute-wood-hybrid__btn { display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border:1px solid var(--mute-hair);color:var(--mute-teal);font-family:var(--mute-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;text-decoration:none;transition:background 0.2s,color 0.2s;line-height:1;align-self:flex-start;margin-top:8px }
.mute-wood-hybrid__btn:hover { background:var(--mute-teal);color:var(--mute-ivory);border-color:var(--mute-teal) }

/* ----------------------------------------
   FINISHES / VENEERS
   ---------------------------------------- */
.mute-wood-finishes__grid { display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--mute-hair-soft);border-left:1px solid var(--mute-hair-soft) }
.mute-wood-finishes__card { border-right:1px solid var(--mute-hair-soft);border-bottom:1px solid var(--mute-hair-soft);padding:20px 20px 22px;display:flex;flex-direction:column;gap:14px }
.mute-wood-finishes__swatch { aspect-ratio:1/1;width:100%;border:1px solid var(--mute-hair-faint);position:relative;overflow:hidden }
.mute-wood-finishes__swatch--custom { background:repeating-linear-gradient(45deg,rgba(15,52,61,0.10) 0 1px,transparent 1px 12px),var(--mute-ivory);display:flex;align-items:center;justify-content:center }
.mute-wood-finishes__plus { font-family:var(--mute-sans);font-size:36px;font-weight:300;color:var(--mute-teal) }
.mute-wood-finishes__name { font-size:14px;font-weight:500;letter-spacing:-0.01em;color:var(--mute-teal);margin:0;line-height:1.2 }
.mute-wood-finishes__code { font-family:var(--mute-mono);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--mute-muted) }
.mute-wood-finishes__custom-desc { font-family:var(--mute-mono);font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mute-muted);line-height:1.6 }
.mute-wood-finishes__footer { margin-top:48px;padding-top:32px;border-top:1px solid var(--mute-hair-soft);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap }
.mute-wood-finishes__footer-text { margin:0;font-size:20px;letter-spacing:-0.02em;color:var(--mute-teal);max-width:42ch }
.mute-wood-finishes__footer-text em { font-family:var(--mute-serif);font-style:italic;font-weight:400 }
.mute-wood-finishes__footer-btn { display:inline-flex;align-items:center;gap:10px;padding:13px 24px;background:var(--mute-teal);color:var(--mute-ivory);text-decoration:none;font-family:var(--mute-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;transition:background 0.3s;line-height:1 }
.mute-wood-finishes__footer-btn:hover { background:var(--mute-teal-deep) }

/* ----------------------------------------
   RESPONSIVE
   ---------------------------------------- */
@media (max-width:1100px) {
  .mute-wood-slat__grid { grid-template-columns:repeat(3,1fr) }
  .mute-wood-perf__grid { grid-template-columns:repeat(2,1fr) }
  .mute-wood-finishes__grid { grid-template-columns:repeat(3,1fr) }
  .mute-wood-slat__spec-bar { grid-template-columns:repeat(3,1fr) }
}
@media (max-width:900px) {
  .mute-wood-hybrid__grid,
  .mute-wood-slat__cross,
  .mute-wood-perf__cross { grid-template-columns:1fr;gap:32px }
}
@media (max-width:750px) {
  .mute-wood-slat,
  .mute-wood-perf,
  .mute-wood-hybrid,
  .mute-wood-finishes { padding:48px 0 }
  .mute-wood-slat__inner,
  .mute-wood-perf__inner,
  .mute-wood-hybrid__inner,
  .mute-wood-finishes__inner { padding:0 1.5rem }
  .mute-wood-slat__header,
  .mute-wood-perf__header,
  .mute-wood-hybrid__header,
  .mute-wood-finishes__header,
  .mute-wood-slat__grid,
  .mute-wood-perf__grid,
  .mute-wood-slat__spec-bar,
  .mute-wood-perf__spec-bar,
  .mute-wood-finishes__grid,
  .mute-wood-hybrid__compare { grid-template-columns:1fr;gap:24px }
  .mute-wood-slat__spec-cell,
  .mute-wood-perf__spec-cell { border-right:0;border-bottom:1px solid var(--mute-hair-soft) }
  .mute-wood-slat__spec-cell:last-child,
  .mute-wood-perf__spec-cell:last-child { border-bottom:0 }
  .mute-wood-hybrid__compare > div { border-right:0;border-bottom:1px solid var(--mute-hair-soft);padding:20px 0 !important }
  .mute-wood-hybrid__compare > div:last-child { border-bottom:0 }
  .mute-wood-finishes__footer { flex-direction:column;align-items:flex-start }
}
/* ── Felt grain overlay (swatches + colour-fill preview) ── */
section.mute-config .mute-config__swatch {
  position: relative;
  overflow: hidden;
}

section.mute-config .mute-config__swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 90px 90px;
  mix-blend-mode: soft-light;
  opacity: 0.9;
  pointer-events: none;
}

section.mute-config .mute-config__color-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  mix-blend-mode: soft-light;
  opacity: 0.85;
  pointer-events: none;
}

/* ============================================
   CASE STUDY PAGE (v2 — Claude Design port)
   ============================================ */

.mute-case {
  background: var(--mute-ivory);
  color: var(--mute-teal);
  font-family: var(--mute-sans);
}

.mute-case__wrap {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
}

.mute-case__sec { padding: 80px 0; }
.mute-case__sec--hero { padding: 64px 0 56px; }
.mute-case__sec--tl { padding-top: 0; }

.mute-case__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute-muted);
}

.mute-case__overline--on-dark { color: rgba(245, 240, 232, 0.55); }

.mute-case__headline {
  font-family: var(--mute-sans);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
  color: var(--mute-teal);
}

.mute-case__headline .it {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.mute-case__headline--hero { font-size: clamp(36px, 5.5vw, 72px); max-width: 16ch; }
.mute-case__headline--sec { font-size: clamp(26px, 3.5vw, 48px); max-width: 18ch; }

.mute-case__hero-head {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 56px;
}

.mute-case__photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

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

.mute-case__photo-ph {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--mute-cream);
  border: 1px solid var(--mute-hair-soft);
  overflow: hidden;
}

.mute-case__photo-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(15,52,61,0.06) 0 1px, transparent 1px 16px);
}

.mute-case__photo-cap {
  position: absolute;
  left: 18px;
  bottom: 16px;
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  background: var(--mute-cream);
  padding: 6px 10px;
  border: 1px solid rgba(15,52,61,0.10);
}

.mute-case__intro { border-top: 1px solid var(--mute-hair-soft); padding: 0; }

.mute-case__intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  padding: 64px 0 80px;
}

.mute-case__lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--mute-muted);
  max-width: 36ch;
}

.mute-case__lead p { margin: 0; }
.mute-case__lead strong { color: var(--mute-teal); font-weight: 500; }

.mute-case__stats {
  border-top: 1px solid var(--mute-hair);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.mute-case__stat {
  padding: 22px 24px 26px 0;
  border-bottom: 1px solid var(--mute-hair-soft);
}

.mute-case__stat:nth-child(odd) { border-right: 1px solid var(--mute-hair-soft); padding-right: 24px; }
.mute-case__stat:nth-child(even) { padding-left: 28px; }
.mute-case__stat:nth-child(3),
.mute-case__stat:nth-child(4) { border-bottom: 0; }

.mute-case__stat-lab {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
}

.mute-case__stat-val {
  font-family: var(--mute-sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--mute-teal);
  margin-top: 12px;
  line-height: 1.2;
}

.mute-case__timeline {
  border-top: 1px solid var(--mute-hair-soft);
  margin-top: 40px;
  position: relative;
}

.mute-case__tl-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

.mute-case__tl-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  padding: 36px 0;
  border-bottom: 1px solid var(--mute-hair-soft);
  align-items: start;
}

.mute-case__tl-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mute-case__tl-step {
  font-family: var(--mute-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--mute-teal);
}

.mute-case__tl-date {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
}

.mute-case__tl-body { max-width: 560px; }

.mute-case__tl-title {
  font-family: var(--mute-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--mute-teal);
}

.mute-case__tl-title .it {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
}

.mute-case__tl-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mute-muted);
}

.mute-case__tl-text p { margin: 0; }

.mute-case__approach {
  background: var(--mute-cream);
  border-top: 1px solid var(--mute-hair-soft);
  border-bottom: 1px solid var(--mute-hair-soft);
  padding: 80px 0;
}

.mute-case__approach-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 48px;
  max-width: 48ch;
}

.mute-case__drawing-panel {
  border: 1px solid var(--mute-hair);
  background: var(--mute-ivory);
  padding: 8px;
}

.mute-case__drawing-panel svg {
  width: 100%;
  height: auto;
  display: block;
}

.mute-case__drawing-panel .mcs-lab {
  font-family: var(--mute-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  fill: var(--mute-muted);
}

.mute-case__drawing-panel .mcs-lab--sm { font-size: 9.5px; }

.mute-case__drawing-cap {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin: 20px 0 0;
  line-height: 1.7;
  max-width: 60ch;
}

.mute-case__cta { padding: 80px 0; }

.mute-case__cta-panel {
  background: var(--mute-teal);
  padding: clamp(40px, 6vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.mute-case__cta-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mute-case__cta-title {
  color: var(--mute-ivory);
  font-size: clamp(26px, 3.5vw, 48px);
  max-width: 18ch;
}

.mute-case__cta-title .it { color: var(--mute-ivory); }

.mute-case__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--mute-ivory);
  color: var(--mute-teal);
  font-family: var(--mute-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 18px 30px;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.mute-case__cta-btn .arr { font-family: var(--mute-mono); font-weight: 400; }
.mute-case__cta-btn:hover { opacity: 0.88; }

@media screen and (max-width: 989px) {
  .mute-case__intro-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media screen and (max-width: 749px) {
  .mute-case__wrap { padding: 0 1.5rem; }
  .mute-case__sec { padding: 48px 0; }
  .mute-case__sec--hero { padding: 40px 0 32px; }
  .mute-case__sec--tl { padding-top: 0; }
  .mute-case__hero-head { gap: 20px; margin-bottom: 32px; }
  .mute-case__intro-grid { padding: 48px 0; gap: 40px; }
  .mute-case__tl-flow { display: none; }
  .mute-case__tl-row { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .mute-case__tl-meta { flex-direction: row; align-items: baseline; gap: 16px; }
  .mute-case__approach { padding: 48px 0; }
  .mute-case__drawing-cap { font-size: 11px; letter-spacing: 0.12em; }
  .mute-case__drawing-panel .mcs-lab { font-size: 14px; }
  .mute-case__cta { padding: 48px 0; }
  .mute-case__cta-panel { flex-direction: column; align-items: flex-start; gap: 28px; }
  .mute-case__cta-btn { width: 100%; justify-content: center; }
}

.mute-case__drawing-img {
  width: 100%;
  height: auto;
  display: block;
}





/* ============================================
   QUOTE BUTTON (Dawn product block) + REQUEST A QUOTE PAGE
   ============================================ */

/* Quote button on product page */
.mute-quote-block { margin: 8px 0 4px; }

.mute-quote-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--mute-teal);
  color: var(--mute-ivory);
  font-family: var(--mute-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 18px 24px;
  text-decoration: none;
  border: 1px solid var(--mute-teal);
  transition: opacity 0.2s ease;
}
.mute-quote-btn:hover { opacity: 0.9; }

.mute-quote-helper {
  font-family: var(--mute-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mute-muted);
  margin: 10px 0 0;
  text-align: center;
}

/* Request a Quote page */
.mute-quote { background: var(--mute-ivory); color: var(--mute-teal); font-family: var(--mute-sans); }

.mute-quote__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 80px 3rem 96px;
}

.mute-quote__head { text-align: center; margin-bottom: 48px; }

.mute-quote__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin: 0 0 16px;
}

.mute-quote__title {
  font-family: var(--mute-sans);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 16px;
  color: var(--mute-teal);
}
.mute-quote__title em { font-family: var(--mute-serif); font-style: italic; font-weight: 400; }

.mute-quote__subtitle {
  font-size: 15px;
  color: var(--mute-muted);
  max-width: 48ch;
  margin: 0 auto;
  line-height: 1.6;
}

.mute-quote__summary {
  border: 1px solid var(--mute-hair-soft);
  background: var(--mute-cream);
  padding: 24px 28px;
  margin-bottom: 40px;
}
.mute-quote__summary-row { display: flex; gap: 12px; padding: 4px 0; }
.mute-quote__summary-label {
  font-family: var(--mute-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-muted);
  min-width: 110px;
}
.mute-quote__summary-value { font-size: 14px; font-weight: 500; color: var(--mute-teal); }

.mute-quote__success {
  border: 1px solid var(--mute-teal);
  background: var(--mute-cream);
  color: var(--mute-teal);
  padding: 20px 24px;
  margin-bottom: 32px;
  font-size: 15px;
}

.mute-quote__errors {
  border: 1px solid #9e4a1e;
  color: #9e4a1e;
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 14px;
}

.mute-quote__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
}

.mute-quote__field { display: flex; flex-direction: column; gap: 8px; }
.mute-quote__field--full { grid-column: 1 / -1; }

.mute-quote__field label {
  font-family: var(--mute-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--mute-teal);
}

.mute-quote__field input,
.mute-quote__field select,
.mute-quote__field textarea {
  font-family: var(--mute-sans);
  font-size: 15px;
  color: var(--mute-teal);
  background: #fff;
  border: 1px solid var(--mute-hair-soft);
  padding: 14px 16px;
  border-radius: 0;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.mute-quote__field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b757c' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.mute-quote__field input:focus,
.mute-quote__field select:focus,
.mute-quote__field textarea:focus {
  outline: none;
  border-color: var(--mute-teal);
}
.mute-quote__field textarea { resize: vertical; }

.mute-quote__submit {
  width: 100%;
  margin-top: 32px;
  background: var(--mute-teal);
  color: var(--mute-ivory);
  font-family: var(--mute-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 20px;
  border: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.mute-quote__submit:hover { opacity: 0.9; }

@media screen and (max-width: 749px) {
  .mute-quote__inner { padding: 48px 1.5rem 64px; }
  .mute-quote__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Pod interest selector (dual-mode quote form) */
.mute-quote__pods {
  border: 1px solid var(--mute-hair-soft);
  background: var(--mute-cream);
  padding: 24px 28px;
  margin-bottom: 40px;
}

.mute-quote__pods-legend {
  font-family: var(--mute-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--mute-teal);
  padding: 0;
  margin-bottom: 16px;
}

.mute-quote__pods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.mute-quote__pod-opt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--mute-hair-soft);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.mute-quote__pod-opt:hover { border-color: var(--mute-hair); }

.mute-quote__pod-opt input {
  margin: 0;
  accent-color: var(--mute-teal);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  position: relative;
  top: 2px;
}

.mute-quote__pod-name {
  font-family: var(--mute-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--mute-teal);
}

.mute-quote__pod-note {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-left: auto;
}




/* ============================================
   MUTE PODS LANDING PAGE — MASTER STYLESHEET
   section-mute-pods.css
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --mute-teal: #0f343d;
  --mute-teal-deep: #0a242b;
  --mute-teal-ink: #08191e;
  --mute-ivory: #f5f0e8;
  --mute-cream: #efe8dc;
  --mute-muted: #5b757c;
  --mute-muted-soft: #83969b;
  --mute-muted-on-dark: #b9beb9;
  --mute-hair: rgba(15, 52, 61, 0.25);
  --mute-hair-soft: rgba(15, 52, 61, 0.16);
  --mute-hair-on-dark: rgba(245, 240, 232, 0.30);
  --mute-hair-on-dark-soft: rgba(245, 240, 232, 0.12);
  --mute-serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --mute-sans: 'Geist', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --mute-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --mute-max-width: 120rem;
}

body { font-feature-settings: "ss01", "cv11"; }


/* ============================================
   01. PODS HERO
   ============================================ */

.mute-pods-hero { background-color: var(--mute-ivory); padding: 0; }

.mute-pods-hero__inner {
  max-width: var(--mute-max-width); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: stretch; padding: 40px 3rem 64px;
}

.mute-pods-hero__image-wrapper { position: relative; overflow: hidden; aspect-ratio: 5 / 6; width: 100%; }
.mute-pods-hero__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.mute-pods-hero__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--mute-cream); }
.mute-pods-hero__placeholder .placeholder-svg { width: 60%; height: auto; opacity: 0.15; }

.mute-pods-hero__image-caption {
  position: absolute; bottom: 12px; left: 12px;
  background: rgba(245, 240, 232, 0.9); padding: 4px 8px;
  font-family: var(--mute-mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mute-teal);
}

.mute-pods-hero__content { padding: 0; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.mute-pods-hero__overline { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-muted); font-family: var(--mute-mono); margin-bottom: 16px; }

.mute-pods-hero__title { font-family: var(--mute-sans); font-size: clamp(36px, 5vw, 72px); font-weight: 600; letter-spacing: -0.035em; line-height: 0.95; color: var(--mute-teal); margin: 0 0 24px 0; }
.mute-pods-hero__title em { font-family: var(--mute-serif); font-weight: 400; font-style: italic; letter-spacing: -0.015em; }

.mute-pods-hero__subtitle { font-family: var(--mute-serif); font-size: 18px; font-weight: 400; font-style: italic; color: var(--mute-teal); margin-bottom: 20px; line-height: 1.4; }
.mute-pods-hero__description { font-size: 14px; line-height: 1.6; color: var(--mute-muted); font-family: var(--mute-sans); margin-bottom: 36px; max-width: 400px; }

.mute-pods-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.mute-pods-hero__btn-primary { display: inline-block; padding: 13px 24px; background-color: var(--mute-teal); color: var(--mute-ivory); text-decoration: none; font-size: 12px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--mute-sans); transition: opacity 0.3s; }
.mute-pods-hero__btn-primary:hover { opacity: 0.85; }
.mute-pods-hero__btn-secondary { display: inline-block; padding: 13px 24px; border: 1px solid var(--mute-hair); color: var(--mute-teal); text-decoration: none; font-size: 12px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--mute-sans); transition: all 0.3s; }
.mute-pods-hero__btn-secondary:hover { background-color: var(--mute-teal); color: var(--mute-ivory); border-color: var(--mute-teal); }

.mute-pods-hero__whatsapp { font-size: 13px; color: var(--mute-muted); font-family: var(--mute-sans); text-decoration: none; }
.mute-pods-hero__whatsapp:hover { color: var(--mute-teal); }

.mute-pods-hero__quick-specs { display: flex; gap: 32px; padding-top: 24px; border-top: 1px solid var(--mute-hair); margin-top: auto; }
.mute-pods-hero__spec-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute-muted); font-family: var(--mute-mono); margin-bottom: 4px; }
.mute-pods-hero__spec-value { font-size: 14px; font-weight: 500; color: var(--mute-teal); font-family: var(--mute-sans); }

@media screen and (max-width: 749px) {
  .mute-pods-hero { padding: 24px 1.5rem; }
  .mute-pods-hero__inner { grid-template-columns: 1fr; gap: 24px; padding: 0; }
  .mute-pods-hero__image-wrapper { aspect-ratio: 4 / 3; }
  .mute-pods-hero__title { font-size: 36px; }
  .mute-pods-hero__description { max-width: 100%; }
  .mute-pods-hero__quick-specs { flex-wrap: wrap; gap: 16px; }
  .mute-pods-hero__quick-specs > div { flex: 0 0 45%; }
  .mute-pods-hero__ctas { flex-direction: column; }
  .mute-pods-hero__btn-primary, .mute-pods-hero__btn-secondary { text-align: center; width: 100%; }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .mute-pods-hero__inner { gap: 32px; padding: 32px 2rem 48px; }
  .mute-pods-hero__title { font-size: clamp(36px, 5vw, 56px); }
}


/* ============================================
   02. PODS MARKET / COMPARISON
   ============================================ */

.mute-pods-market__strip { background-color: var(--mute-teal); }
.mute-pods-market__strip-inner { max-width: var(--mute-max-width); margin: 0 auto; padding: 28px 3rem; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.mute-pods-market__stat { padding: 8px 0; }
.mute-pods-market__stat + .mute-pods-market__stat { border-left: 1px solid var(--mute-hair-on-dark-soft); padding-left: 24px; }
.mute-pods-market__stat-label { display: block; font-family: var(--mute-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-muted-on-dark); margin-bottom: 4px; }
.mute-pods-market__stat-value { display: block; font-family: var(--mute-sans); font-weight: 500; font-size: 14px; line-height: 1.3; color: var(--mute-ivory); }

.mute-pods-market__compare { background-color: var(--mute-ivory); padding: 80px 0; }
.mute-pods-market__compare-inner { max-width: var(--mute-max-width); margin: 0 auto; padding: 0 3rem; display: grid; grid-template-columns: 1fr 1.15fr; gap: 0 56px; align-items: start; }

.mute-pods-market__overline { font-family: var(--mute-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-muted); margin: 0 0 16px 0; }
.mute-pods-market__title { font-family: var(--mute-sans); font-weight: 600; font-size: clamp(36px, 5vw, 72px); line-height: 0.95; letter-spacing: -0.035em; color: var(--mute-teal); margin: 0 0 32px 0; }
.mute-pods-market__title em { font-family: var(--mute-serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; }
.mute-pods-market__description { font-family: var(--mute-sans); font-size: 14px; line-height: 1.6; color: var(--mute-muted); margin: 0 0 20px 0; max-width: 400px; }
.mute-pods-market__footnote { font-family: var(--mute-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-muted-soft); margin: 32px 0 0 0; padding-top: 20px; border-top: 1px solid var(--mute-hair-soft); }

.mute-pods-market__table-wrap { width: 100%; }
.mute-pods-market__table { width: 100%; border-collapse: collapse; font-family: var(--mute-sans); font-size: 14px; }
.mute-pods-market__th { font-family: var(--mute-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--mute-hair); vertical-align: bottom; }
.mute-pods-market__th--cap { color: var(--mute-muted); }
.mute-pods-market__th--mute { background-color: var(--mute-teal); color: var(--mute-ivory); }
.mute-pods-market__th--comp { background-color: var(--mute-cream); color: var(--mute-teal); }
.mute-pods-market__td { padding: 14px 16px; border-bottom: 1px solid var(--mute-hair-soft); vertical-align: middle; line-height: 1.4; color: var(--mute-teal); }
.mute-pods-market__td--cap { font-family: var(--mute-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-muted); }
.mute-pods-market__td--mute { background-color: rgba(15, 52, 61, 0.04); color: var(--mute-teal); font-weight: 500; }
.mute-pods-market__td--comp { color: var(--mute-muted); }
.mute-pods-market__check { display: inline-block; width: 12px; height: 12px; background-color: var(--mute-teal); margin-right: 8px; vertical-align: middle; }
.mute-pods-market__check--neutral { background-color: var(--mute-cream); border: 1px solid var(--mute-hair); }
.mute-pods-market__source { font-family: var(--mute-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-muted-soft); margin: 12px 0 0 0; padding-top: 12px; border-top: 1px solid var(--mute-hair-soft); }

@media screen and (max-width: 749px) {
  .mute-pods-market__strip-inner { grid-template-columns: repeat(2, 1fr); gap: 16px 0; padding: 24px 1.5rem; }
  .mute-pods-market__stat + .mute-pods-market__stat { border-left: none; padding-left: 0; }
  .mute-pods-market__stat:nth-child(even) { border-left: 1px solid var(--mute-hair-on-dark-soft); padding-left: 16px; }
  .mute-pods-market__compare { padding: 48px 0; }
  .mute-pods-market__compare-inner { grid-template-columns: 1fr; gap: 40px 0; padding: 0 1.5rem; }
  .mute-pods-market__title { font-size: 36px; }
  .mute-pods-market__description { max-width: 100%; }
  .mute-pods-market__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mute-pods-market__table { min-width: 540px; }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .mute-pods-market__strip-inner { grid-template-columns: repeat(3, 1fr); gap: 16px 0; padding: 24px 2rem; }
  .mute-pods-market__stat:nth-child(4) { border-left: none; padding-left: 0; }
  .mute-pods-market__compare-inner { grid-template-columns: 1fr; gap: 40px 0; padding: 0 2rem; }
  .mute-pods-market__description { max-width: 100%; }
}


/* ============================================
   03. PODS RANGE GRID
   "Four pods. One standard." + 4×2 product cards
   ============================================ */

.mute-pods-range { background-color: var(--mute-cream); padding: 80px 0; }

.mute-pods-range__inner { max-width: var(--mute-max-width); margin: 0 auto; padding: 0 3rem; }

/* Header */
.mute-pods-range__header {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: end; margin-bottom: 48px;
}

.mute-pods-range__title {
  font-family: var(--mute-sans); font-weight: 600;
  font-size: clamp(48px, 7vw, 100px); line-height: 0.92;
  letter-spacing: -0.035em; color: var(--mute-teal); margin: 0;
}
.mute-pods-range__title em { font-family: var(--mute-serif); font-weight: 400; font-style: italic; letter-spacing: -0.015em; }

.mute-pods-range__header-right { display: flex; flex-direction: column; gap: 24px; }
.mute-pods-range__description { font-family: var(--mute-sans); font-size: 14px; line-height: 1.6; color: var(--mute-muted); max-width: 400px; margin: 0; }

.mute-pods-range__header-stats { display: flex; gap: 32px; padding-top: 16px; border-top: 1px solid var(--mute-hair-soft); }
.mute-pods-range__header-stat-label { display: block; font-family: var(--mute-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-muted); margin-bottom: 4px; }
.mute-pods-range__header-stat-value { display: block; font-family: var(--mute-sans); font-size: 14px; font-weight: 500; color: var(--mute-teal); }

/* Divider */
.mute-pods-range__divider {
  display: flex; align-items: center; gap: 16px;
  padding: 24px 0; border-top: 1px solid var(--mute-hair-soft);
}
.mute-pods-range__divider-left { font-family: var(--mute-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-muted); white-space: nowrap; }
.mute-pods-range__divider-line { flex: 1; height: 1px; background-color: var(--mute-hair-soft); }
.mute-pods-range__divider-right { font-family: var(--mute-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-muted-soft); white-space: nowrap; }

/* Intro */
.mute-pods-range__intro {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: end; padding: 32px 0 48px;
}
.mute-pods-range__intro-title { font-family: var(--mute-sans); font-weight: 500; font-size: clamp(24px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.02em; color: var(--mute-teal); margin: 0; }
.mute-pods-range__intro-title em { font-family: var(--mute-serif); font-weight: 400; font-style: italic; }
.mute-pods-range__intro-note { font-family: var(--mute-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-muted-soft); text-align: right; line-height: 1.8; margin: 0; }

/* Row label */
.mute-pods-range__row-label { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--mute-hair-soft); margin-bottom: 0; }
.mute-pods-range__row-label-left { font-family: var(--mute-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-muted); }
.mute-pods-range__row-label-right { font-family: var(--mute-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-muted-soft); }
.mute-pods-range__row-divider { height: 1px; background: var(--mute-hair-soft); margin: 48px 0 0; }

/* Grid */
.mute-pods-range__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px; }

/* Card */
.mute-pods-range__card { padding: 0 0 32px; }

.mute-pods-range__card-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; }
.mute-pods-range__card-capacity { font-family: var(--mute-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-teal); }
.mute-pods-range__card-code { font-family: var(--mute-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute-muted-soft); }

.mute-pods-range__card-image { aspect-ratio: 3 / 4; background-color: var(--mute-ivory); margin-bottom: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--mute-hair-soft); }
.mute-pods-range__card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mute-pods-range__card-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; }
.mute-pods-range__card-placeholder .placeholder-svg { width: 40px; height: 40px; opacity: 0.2; }
.mute-pods-range__card-placeholder span { font-family: var(--mute-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--mute-muted-soft); text-align: center; }

.mute-pods-range__card-custom-plus { font-family: var(--mute-sans); font-size: 48px; font-weight: 300; color: var(--mute-muted-soft); }

.mute-pods-range__card-dims { display: block; font-family: var(--mute-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mute-muted-soft); margin-bottom: 8px; }
.mute-pods-range__card-name { font-family: var(--mute-sans); font-size: 22px; font-weight: 600; color: var(--mute-teal); margin: 0 0 4px 0; line-height: 1.2; }
.mute-pods-range__card-use { font-family: var(--mute-sans); font-size: 13px; color: var(--mute-muted); margin: 0 0 20px 0; line-height: 1.4; }

.mute-pods-range__card-footer { display: flex; justify-content: space-between; align-items: flex-end; }
.mute-pods-range__card-from { display: block; font-family: var(--mute-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mute-muted-soft); margin-bottom: 2px; }
.mute-pods-range__card-amount { display: block; font-family: var(--mute-sans); font-size: 18px; font-weight: 600; color: var(--mute-teal); }
.mute-pods-range__card-cta { font-family: var(--mute-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mute-teal); text-decoration: none; white-space: nowrap; }
.mute-pods-range__card-cta:hover { opacity: 0.6; }

/* Card — custom variant */
.mute-pods-range__card--custom .mute-pods-range__card-image { border-style: solid; border-color: var(--mute-hair-soft); background-color: transparent; }

@media screen and (max-width: 749px) {
  .mute-pods-range { padding: 48px 0; }
  .mute-pods-range__inner { padding: 0 1.5rem; }
  .mute-pods-range__header { grid-template-columns: 1fr; gap: 24px; }
  .mute-pods-range__title { font-size: clamp(36px, 8vw, 56px); }
  .mute-pods-range__header-stats { flex-wrap: wrap; gap: 16px; }
  .mute-pods-range__intro { grid-template-columns: 1fr; gap: 16px; }
  .mute-pods-range__intro-note { text-align: left; }
  .mute-pods-range__grid { grid-template-columns: repeat(2, 1fr); gap: 0 16px; }
  .mute-pods-range__card { padding: 0 0 24px; }
  .mute-pods-range__card-name { font-size: 18px; }
  .mute-pods-range__card-amount { font-size: 16px; }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .mute-pods-range__inner { padding: 0 2rem; }
  .mute-pods-range__header { gap: 32px; }
  .mute-pods-range__title { font-size: clamp(48px, 6vw, 72px); }
  .mute-pods-range__grid { grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
}


/* ============================================
   04. PODS INSTALLED
   "Built in Jebel Ali. Installed across the GCC."
   ============================================ */

.mute-pods-installed {
  background-color: var(--mute-ivory);
  padding: 80px 0;
}

.mute-pods-installed__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
}

.mute-pods-installed__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin: 0 0 16px 0;
}

.mute-pods-installed__title {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--mute-teal);
  margin: 0 0 48px 0;
}

.mute-pods-installed__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
}

.mute-pods-installed__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mute-pods-installed__image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--mute-cream);
}

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

.mute-pods-installed__placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--mute-cream);
}

.mute-pods-installed__image-labels {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-muted);
}

.mute-pods-installed__caption {
  font-family: var(--mute-sans);
  font-size: 14px;
  color: var(--mute-teal);
  margin: 12px 0 0 0;
}

/* 04 — Mobile */
@media screen and (max-width: 749px) {
  .mute-pods-installed { padding: 48px 0; }
  .mute-pods-installed__inner { padding: 0 1.5rem; }
  .mute-pods-installed__title { font-size: 36px; margin-bottom: 32px; }
  .mute-pods-installed__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* 04 — Tablet */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .mute-pods-installed__inner { padding: 0 2rem; }
  .mute-pods-installed__grid { gap: 16px; }
}


/* ============================================
   05. BRAND MATCH
   "Your brand. Inside the pod."
   ============================================ */

.mute-pods-brand {
  background-color: var(--mute-cream);
  padding: 80px 0;
}

.mute-pods-brand__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
}

.mute-pods-brand__header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 56px;
  margin-bottom: 48px;
}

.mute-pods-brand__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin: 0 0 16px 0;
}

.mute-pods-brand__title {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--mute-teal);
  margin: 0;
}

.mute-pods-brand__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
}

.mute-pods-brand__header-body {
  font-family: var(--mute-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted);
  max-width: 400px;
  margin: 0;
}

.mute-pods-brand__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mute-pods-brand__card-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mute-pods-brand__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mute-pods-brand__card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--mute-ivory);
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
}

.mute-pods-brand__card-overlay {
  font-family: var(--mute-sans);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  letter-spacing: 0.3em;
  color: var(--mute-ivory);
}

.mute-pods-brand__card-sample {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--mute-ivory);
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
}

.mute-pods-brand__card-title {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--mute-teal);
  margin: 16px 0 6px;
}

.mute-pods-brand__card-desc {
  font-family: var(--mute-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute-muted);
  margin: 0;
}

/* 05 — Mobile */
@media screen and (max-width: 749px) {
  .mute-pods-brand { padding: 48px 0; }
  .mute-pods-brand__inner { padding: 0 1.5rem; }
  .mute-pods-brand__header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .mute-pods-brand__title { font-size: 36px; }
  .mute-pods-brand__grid { grid-template-columns: 1fr; }
}


/* ============================================
   06. GCC TRACK RECORD
   Dark teal section — stats + city breakdown
   ============================================ */

.mute-pods-track {
  background-color: var(--mute-teal);
  padding: 80px 0;
}

.mute-pods-track__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
}

.mute-pods-track__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.mute-pods-track__overline::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background-color: var(--mute-muted-on-dark);
}

.mute-pods-track__title {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--mute-ivory);
  margin: 0 0 48px 0;
  max-width: 800px;
}

.mute-pods-track__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
}

.mute-pods-track__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 32px 0;
  border-top: 1px solid var(--mute-hair-on-dark);
  border-bottom: 1px solid var(--mute-hair-on-dark);
  margin-bottom: 40px;
}

.mute-pods-track__stat-number {
  display: block;
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mute-ivory);
  margin-bottom: 8px;
}

.mute-pods-track__stat-label {
  display: block;
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
}

.mute-pods-track__cities {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 24px 0;
  border-bottom: 1px solid var(--mute-hair-on-dark-soft);
}

.mute-pods-track__city { padding: 0 16px 0 0; }

.mute-pods-track__city-name {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--mute-ivory);
  margin: 0 0 4px 0;
}

.mute-pods-track__city-country {
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
  margin: 0 0 12px 0;
}

.mute-pods-track__city-pods {
  font-family: var(--mute-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--mute-ivory);
  margin: 0 0 4px 0;
}

.mute-pods-track__city-areas {
  font-family: var(--mute-sans);
  font-size: 13px;
  color: var(--mute-muted-on-dark);
  margin: 0;
}

.mute-pods-track__footnote {
  font-family: var(--mute-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--mute-muted-on-dark);
  margin: 32px 0 0 0;
}

/* 06 — Mobile */
@media screen and (max-width: 749px) {
  .mute-pods-track { padding: 48px 0; }
  .mute-pods-track__inner { padding: 0 1.5rem; }
  .mute-pods-track__title { font-size: 28px; }
  .mute-pods-track__stats { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .mute-pods-track__cities { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .mute-pods-track__stat-number { font-size: 36px; }
}

/* 06 — Tablet */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .mute-pods-track__inner { padding: 0 2rem; }
  .mute-pods-track__cities { grid-template-columns: repeat(3, 1fr); gap: 24px 0; }
}


/* ============================================
   07. PODS CTA
   Procurement strip + "Designing a workspace?"
   ============================================ */

.mute-pods-cta__procurement {
  background-color: var(--mute-cream);
  padding: 32px 0;
  border-top: 1px solid var(--mute-hair-soft);
}

.mute-pods-cta__procurement-inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
  display: flex;
  align-items: center;
  gap: 48px;
}

.mute-pods-cta__procurement-title {
  font-family: var(--mute-serif);
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  color: var(--mute-teal);
  margin: 0;
  flex-shrink: 0;
}

.mute-pods-cta__procurement-title em {
  font-style: italic;
}

.mute-pods-cta__procurement-item {
  border-left: 1px solid var(--mute-hair-soft);
  padding-left: 24px;
}

.mute-pods-cta__procurement-label {
  display: block;
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-bottom: 4px;
}

.mute-pods-cta__procurement-value {
  display: block;
  font-family: var(--mute-sans);
  font-size: 14px;
  color: var(--mute-teal);
}

/* Main CTA */
.mute-pods-cta__main {
  background-color: var(--mute-teal);
  padding: 80px 0;
}

.mute-pods-cta__main-inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.mute-pods-cta__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
  margin: 0 0 16px 0;
}

.mute-pods-cta__title {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--mute-ivory);
  margin: 0 0 24px 0;
}

.mute-pods-cta__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
}

.mute-pods-cta__body {
  font-family: var(--mute-serif);
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--mute-muted-on-dark);
  margin: 0;
}

.mute-pods-cta__whatsapp {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border: 1px solid var(--mute-hair-on-dark);
  text-decoration: none;
  font-family: var(--mute-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute-ivory);
  transition: all 0.3s;
  margin-bottom: 16px;
}

.mute-pods-cta__whatsapp:hover {
  background-color: var(--mute-ivory);
  color: var(--mute-teal);
  border-color: var(--mute-ivory);
}

.mute-pods-cta__whatsapp-dot {
  width: 8px;
  height: 8px;
  background-color: #25d366;
  display: inline-block;
  flex-shrink: 0;
}

.mute-pods-cta__whatsapp-arrow { margin-left: auto; }

.mute-pods-cta__consult {
  font-family: var(--mute-sans);
  font-size: 13px;
  color: var(--mute-muted-on-dark);
  text-decoration: underline;
  margin: 0 0 32px 0;
}

.mute-pods-cta__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--mute-hair-on-dark-soft);
}

.mute-pods-cta__contact-line {
  font-family: var(--mute-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--mute-ivory);
  text-decoration: none;
}

.mute-pods-cta__contact-line:hover { opacity: 0.6; }

/* 07 — Mobile */
@media screen and (max-width: 749px) {
  .mute-pods-cta__procurement-inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 1.5rem; }
  .mute-pods-cta__procurement-item { border-left: none; padding-left: 0; border-top: 1px solid var(--mute-hair-soft); padding-top: 12px; }
  .mute-pods-cta__main { padding: 48px 0; }
  .mute-pods-cta__main-inner { grid-template-columns: 1fr; gap: 32px; padding: 0 1.5rem; }
  .mute-pods-cta__title { font-size: 36px; }
}
/* Clickable pod card (whole card links to product) */
.mute-pods-range__card--linked { text-decoration: none; color: inherit; cursor: pointer; display: block; }
.mute-pods-range__card--linked .mute-pods-range__card-image img { transition: transform 0.4s ease; }
.mute-pods-range__card--linked:hover .mute-pods-range__card-image img { transform: scale(1.03); }
.mute-pods-range__card--linked:hover .mute-pods-range__card-cta { opacity: 0.6; }
.mute-pods-range__card-cta { transition: opacity 0.2s ease; }

/* Kill inherited link underline/colour on clickable card children */
.mute-pods-range__card--linked,
.mute-pods-range__card--linked * {
  text-decoration: none;
  color: inherit;
}





/* ============================================
   MUTE CUSTOM SECTIONS — MASTER STYLESHEET
   All sections for mute.ae homepage on Dawn
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --mute-teal: #0f343d;
  --mute-teal-deep: #0a242b;
  --mute-teal-ink: #08191e;
  --mute-ivory: #f5f0e8;
  --mute-cream: #efe8dc;
  --mute-muted: #5b757c;
  --mute-muted-soft: #83969b;
  --mute-muted-on-dark: #b9beb9;
  --mute-hair: rgba(15, 52, 61, 0.25);
  --mute-hair-soft: rgba(15, 52, 61, 0.16);
  --mute-hair-on-dark: rgba(245, 240, 232, 0.30);
  --mute-hair-on-dark-soft: rgba(245, 240, 232, 0.12);
  --mute-serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --mute-sans: 'Geist', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --mute-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --mute-max-width: 120rem;
}

body {
  font-feature-settings: "ss01", "cv11";
}


/* ============================================
   1. HERO SECTION
   ============================================ */

.mute-hero {
  background-color: var(--mute-teal);
  color: var(--mute-ivory);
  overflow: hidden;
}

.mute-hero__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: auto;
  padding: 48px 3rem 56px;
  gap: 48px;
  align-items: end;
}

.mute-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 0;
}

.mute-hero__overline {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
  margin-bottom: 28px;
  font-family: var(--mute-mono);
}

.mute-hero__headline {
  font-family: var(--mute-sans);
  font-size: clamp(48px, 7vw, 100px);
  font-weight: 600;
  line-height: 0.92;
  margin: 0 0 28px 0;
  color: var(--mute-ivory);
  letter-spacing: -0.035em;
}

.mute-hero__headline em {
  font-style: italic;
  font-family: var(--mute-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.mute-hero__subtext {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mute-muted-on-dark);
  max-width: 420px;
  margin-bottom: 32px;
  font-family: var(--mute-sans);
}

.mute-hero__ctas {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.mute-hero__btn-primary {
  display: inline-block;
  padding: 13px 24px;
  background-color: var(--mute-ivory);
  color: var(--mute-teal);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--mute-sans);
  transition: background-color 0.3s ease;
}

.mute-hero__btn-primary:hover {
  background-color: #fff;
}

.mute-hero__btn-secondary {
  font-size: 13px;
  color: var(--mute-muted-on-dark);
  text-decoration: none;
  font-family: var(--mute-sans);
  transition: color 0.3s ease;
}

.mute-hero__btn-secondary:hover {
  color: var(--mute-ivory);
}

.mute-hero__media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

.mute-hero__image-wrapper {
  width: 100%;
  max-width: 580px;
  overflow: hidden;
  /* REMOVE aspect-ratio: 4 / 5 */
}

.mute-hero__image {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

.mute-hero__image-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(245, 240, 232, 0.06),
    rgba(245, 240, 232, 0.06) 1px,
    transparent 1px,
    transparent 7px
  );
}

.mute-hero__card {
  position: absolute;
  bottom: 60px;
  right: -10px;
  background-color: var(--mute-ivory);
  color: var(--mute-teal);
  padding: 22px 26px;
  max-width: 260px;
  z-index: 2;
}

.mute-hero__card-overline {
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-bottom: 8px;
  font-family: var(--mute-mono);
}

.mute-hero__card-text {
  font-family: var(--mute-serif);
  font-size: 20px;
  line-height: 1.35;
  font-style: italic;
  margin-bottom: 14px;
  color: var(--mute-teal);
}

.mute-hero__card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  border-top: 1px solid var(--mute-hair);
  padding-top: 10px;
}

.mute-hero__card-arrow {
  font-size: 14px;
  color: var(--mute-muted-soft);
}


/* ============================================
   2. CLIENT MARQUEE
   ============================================ */

.mute-marquee {
  background-color: var(--mute-ivory);
  border-top: 1px solid var(--mute-hair);
  border-bottom: 1px solid var(--mute-hair);
  padding: 16px 3rem;
  overflow: hidden;
  position: relative;
}

.mute-marquee__label {
  position: absolute;
  left: 3rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  z-index: 2;
  background: var(--mute-ivory);
  padding-right: 24px;
}

.mute-marquee__track {
  display: flex;
  animation: mute-scroll 25s linear infinite;
  white-space: nowrap;
}

.mute-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--mute-teal);
  font-family: var(--mute-sans);
  flex-shrink: 0;
}

.mute-marquee__separator {
  font-size: 8px;
  color: var(--mute-muted-soft);
}

@keyframes mute-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ============================================
   PRODUCT LIBRARY (interactive)
   "The library of quiet."
   ============================================ */
 
.mute-library {
  background-color: var(--mute-ivory);
  padding: 0;
}
 
.mute-library__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 80px 3rem;
}
 
/* --- Header --- */
.mute-library__header {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  margin-bottom: 56px;
  align-items: end;
}
 
.mute-library__overline {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-bottom: 16px;
  font-family: var(--mute-mono);
}
 
.mute-library__title {
  font-family: var(--mute-sans);
  font-size: clamp(32px, 4.5vw, 64px);
  font-weight: 600;
  line-height: 1.0;
  color: var(--mute-teal);
  margin: 0;
}
 
.mute-library__title em {
  font-style: italic;
  font-family: var(--mute-serif);
  font-weight: 400;
}
 
.mute-library__description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  max-width: 380px;
  align-self: end;
}
 
/* --- Grid --- */
.mute-library__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
}
 
/* --- Left: image column --- */
.mute-library__image-col {
  position: relative;
  overflow: hidden;
  min-height: 0;
}
 
.mute-library__image-stack {
  display: grid;
  width: 100%;
  overflow: hidden;
  background-color: var(--mute-cream);
  max-height: 540px;
}

.mute-library__image-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.mute-library__image-slide.is-active {
  opacity: 1;
}
 
.mute-library__image-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mute-library__image-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(15, 52, 61, 0.05),
    rgba(15, 52, 61, 0.05) 1px,
    transparent 1px,
    transparent 7px
  );
  background-color: var(--mute-cream);
}
 
/* Image overlay label */
.mute-library__image-label {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--mute-ivory);
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
 
/* --- Caption bar --- */
.mute-library__caption-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
}
 
.mute-library__caption-counter {
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-muted);
}
 
.mute-library__caption-link {
  font-family: var(--mute-sans);
  font-size: 13px;
  color: var(--mute-teal);
  text-decoration: none;
  position: relative;
}
 
.mute-library__caption-link:hover {
  opacity: 0.7;
}
 
.mute-library__caption-link-text {
  display: none;
}
 
.mute-library__caption-link-text.is-active {
  display: inline;
}
 
/* --- Right: product rows --- */
.mute-library__list-col {
  padding-left: 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  /* was space-between */
}
 
.mute-library__product {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px;  /* was 0 20px with flex:1 */
  min-height: auto;
  flex: none;          /* was flex: 1 */
  border-bottom: 1px solid var(--mute-hair-soft);
  text-decoration: none;
  color: var(--mute-teal);
  transition: background-color 0.3s ease, padding 0.3s ease;
  position: relative;
}
 
.mute-library__product:first-child {
  border-top: 1px solid var(--mute-hair-soft);
}
 
/* Active row highlight */
.mute-library__product.is-active {
  background-color: var(--mute-cream);
}
 
/* Row number */
.mute-library__product-index {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--mute-muted);
  flex-shrink: 0;
  width: 24px;
}
 
/* Product info */
.mute-library__product-info {
  flex: 1;
  min-width: 0;
}
 
.mute-library__product-name {
  font-family: var(--mute-sans);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: block;
}
 
.mute-library__product-meta {
  font-size: 12px;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  display: block;
  margin-top: 2px;
}
 
/* Arrow */
.mute-library__product-arrow {
  font-family: var(--mute-sans);
  font-size: 18px;
  color: var(--mute-muted);
  flex-shrink: 0;
  opacity: 1;
  transform: translateX(0px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
 
.mute-library__product.is-active .mute-library__product-arrow,
.mute-library__product:hover .mute-library__product-arrow {
  opacity: 1;
  transform: translateX(0);
}


/* ============================================
   4. FEATURED PROJECT
   ============================================ */

.mute-project {
  background-color: var(--mute-ivory);
  padding: 0;
}

.mute-project__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 32px 3rem 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.mute-project__image-wrapper {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.mute-project__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mute-project__image-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(15, 52, 61, 0.03),
    rgba(15, 52, 61, 0.03) 1px,
    transparent 1px,
    transparent 7px
  );
  background-color: rgba(15, 52, 61, 0.02);
}

.mute-project__content {
  padding-top: 48px;    /* was 24px — pushes content down to vertically centre against image */
}

.mute-project__overline {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-bottom: 20px;
  font-family: var(--mute-mono);
}

.mute-project__title {
  font-family: var(--mute-sans);
  font-size: clamp(26px, 3.5vw, 48px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--mute-teal);
  margin: 0 0 20px 0;
}

.mute-project__title em {
  font-style: italic;
  font-family: var(--mute-serif);
  font-weight: 400;
}

.mute-project__description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  margin-bottom: 28px;
  max-width: 420px;
}

.mute-project__stats {
  display: flex;
  gap: 32px;
  margin-bottom: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--mute-hair);
}

.mute-project__stat {
  text-align: left;
}

.mute-project__stat-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  margin-bottom: 4px;
}

.mute-project__stat-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--mute-teal);
  font-family: var(--mute-sans);
}

.mute-project__link {
  font-size: 13px;
  color: var(--mute-teal);
  text-decoration: none;
  font-family: var(--mute-sans);
  transition: opacity 0.2s ease;
}

.mute-project__link:hover {
  opacity: 0.6;
}


/* ============================================
   5. BRAND STORY
   ============================================ */

.mute-story {
  background-color: var(--mute-cream);
  color: var(--mute-ivory);
  padding: 80px 48px;
}

.mute-story__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 64px 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;  /* was center */
}

.mute-story__content {
  padding-right: 24px;
}

.mute-story__overline {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-bottom: 24px;
  font-family: var(--mute-mono);
}

.mute-story__title {
  font-family: var(--mute-sans);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--mute-teal);
  margin: 0 0 24px 0;
}

.mute-story__title em {
  font-style: italic;
  font-family: var(--mute-serif);
  font-weight: 400;
}

.mute-story__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  margin-bottom: 12px;
  max-width: 440px;
}

.mute-story__ctas {
  display: flex;
  gap: 20px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.mute-story__btn-primary {
  display: inline-block;
  padding: 13px 24px;
  border: 1px solid var(--mute-teal);
  color: var(--mute-teal);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--mute-sans);
  transition: all 0.3s ease;
}

.mute-story__btn-primary:hover {
  background-color: var(--mute-teal);
  color: var(--mute-ivory);
}

.mute-story__btn-secondary {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--mute-teal);
  text-decoration: none;
  font-family: var(--mute-sans);
  transition: color 0.3s ease;
}

.mute-story__btn-secondary:hover {
  color: var(--mute-ivory);
}

.mute-story__media {
  position: relative;
}

.mute-story__image-wrapper {
  width: 100%;
  overflow: hidden;
  /* REMOVE aspect-ratio: 3 / 4 */
}

.mute-story__image {
  width: 100%;
  height: auto;        /* was 100% */
  max-height: 580px;   /* cap it */
  object-fit: cover;
  display: block;
}

.mute-story__image-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(245, 240, 232, 0.06),
    rgba(245, 240, 232, 0.06) 1px,
    transparent 1px,
    transparent 7px
  );
}

.mute-story__badge {
  position: absolute;
  bottom: -24px;
  right: -24px;
  width: 220px;
  padding: 24px 28px;
  border-radius: 0;
  background-color: var(--mute-teal);
  color: var(--mute-ivory);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--mute-sans);
  z-index: 2;
}

.mute-story__badge-overline {
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
  margin-bottom: 8px;
}

.mute-story__badge-number {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}

.mute-story__badge-label {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mute-ivory);
}

/* ============================================
   6. B2B CONSULTATION CTA
   ============================================ */

.mute-cta {
  background-color: var(--mute-teal);
  padding: 0;
}

.mute-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 80px 3rem;
}

.mute-cta__overline {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
  margin-bottom: 20px;
  font-family: var(--mute-mono);
}

.mute-cta__title {
  font-family: var(--mute-sans);
  font-size: clamp(28px, 4.5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--mute-ivory);
  margin: 0 0 24px 0;
}

.mute-cta__title em {
  font-style: italic;
  font-family: var(--mute-serif);
  font-weight: 400;
}

.mute-cta__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted-on-dark);
  font-family: var(--mute-sans);
  margin-bottom: 32px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.mute-cta__buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.mute-cta__btn-primary {
  display: inline-block;
  padding: 14px 28px;
  background-color: var(--mute-ivory);
  color: var(--mute-teal);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--mute-sans);
  transition: opacity 0.3s ease;
}

.mute-cta__btn-primary:hover {
  opacity: 0.85;
}

.mute-cta__btn-secondary {
  font-size: 13px;
  color: var(--mute-ivory);
  text-decoration: none;
  font-family: var(--mute-sans);
  transition: opacity 0.2s ease;
}

.mute-cta__btn-secondary:hover {
  opacity: 0.6;
}


/* ============================================
   7. PROOF POINTS
   ============================================ */

.mute-proof {
  background-color: var(--mute-ivory);
  padding: 0;
  border-top: 1px solid var(--mute-hair);
}

.mute-proof__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 48px 3rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.mute-proof__item {
  padding: 0 24px;
  border-left: 1px solid var(--mute-hair);
}

.mute-proof__item:first-child {
  border-left: none;
  padding-left: 0;
}

.mute-proof__heading {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mute-teal);
  font-family: var(--mute-sans);
  margin-bottom: 6px;
}

.mute-proof__text {
  font-size: 12px;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  line-height: 1.5;
}


/* ============================================
   8. FOOTER
   ============================================ */

.mute-footer {
  background-color: var(--mute-teal);
  color: var(--mute-ivory);
  padding: 64px 48px 32px;
}

.mute-footer__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
}

.mute-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr 1.2fr;
  gap: 32px;
  margin-bottom: 48px;
}

.mute-footer__brand-name {
  font-family: var(--mute-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}

.mute-footer__brand-tagline {
  font-family: var(--mute-serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.4;
  color: var(--mute-muted-on-dark);
  margin-bottom: 20px;
}

.mute-footer__contact-line {
  font-size: 12px;
  color: var(--mute-muted-on-dark);
  font-family: var(--mute-sans);
  margin-bottom: 4px;
}

.mute-footer__contact-line a {
  color: var(--mute-muted-on-dark);
  text-decoration: none;
}

.mute-footer__contact-line a:hover {
  color: var(--mute-ivory);
}

.mute-footer__col-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--mute-ivory);
  font-family: var(--mute-mono);
  margin-bottom: 16px;
}

.mute-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mute-footer__links li {
  margin-bottom: 8px;
}

.mute-footer__links a {
  font-size: 12px;
  color: var(--mute-muted-on-dark);
  text-decoration: none;
  font-family: var(--mute-sans);
  transition: color 0.2s ease;
}

.mute-footer__links a:hover {
  color: var(--mute-ivory);
}

.mute-footer__address-line {
  font-size: 12px;
  color: var(--mute-muted-on-dark);
  font-family: var(--mute-sans);
  margin-bottom: 4px;
}

.mute-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--mute-hair-on-dark-soft);
}

.mute-footer__copyright {
  font-size: 10px;
  color: rgba(245, 240, 232, 0.35);
  font-family: var(--mute-sans);
  letter-spacing: 0.08em;
}

.mute-footer__social {
  display: flex;
  gap: 16px;
}

.mute-footer__social a {
  font-size: 11px;
  color: rgba(245, 240, 232, 0.35);
  text-decoration: none;
  font-family: var(--mute-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.mute-footer__social a:hover {
  color: var(--mute-ivory);
}


/* ============================================
   MOBILE RESPONSIVE — ALL SECTIONS
   ============================================ */

@media (max-width: 749px) {

  .mute-hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 36px 1.5rem 28px;
    gap: 20px;
  }
  .mute-hero__content { order: 1; }
  .mute-hero__media { order: 2; }
  .mute-hero__headline { font-size: clamp(36px, 11vw, 52px); margin-bottom: 16px; }
  .mute-hero__subtext { font-size: 13px; margin-bottom: 24px; }
  .mute-hero__image-wrapper { max-width: 100%; aspect-ratio: 1 / 1; }
  .mute-hero__card { position: relative; bottom: auto; right: auto; max-width: 100%; margin-top: -32px; }
  .mute-hero__btn-primary { padding: 12px 20px; font-size: 10px; }
  .mute-hero__overline { margin-bottom: 20px; }

  .mute-marquee__label { left: 20px; font-size: 8px; }
  .mute-marquee__item { font-size: 13px; padding: 0 14px; }



@media screen and (max-width: 749px) {
  .mute-library__inner { padding: 48px 1.5rem; }
  .mute-library__header { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .mute-library__title { font-size: clamp(32px, 10vw, 44px); }
  .mute-library__grid { grid-template-columns: 1fr; gap: 32px; }
  .mute-library__list-col { padding-left: 0; order: 1; }
  .mute-library__image-col { order: 2; }
  .mute-library__image-stack { aspect-ratio: 3 / 2; }
  .mute-library__product-name { font-size: 18px; }
  .mute-library__product { padding: 0 12px; }
}

  .mute-project { padding: 32px 1.5rem 48px; }
  .mute-project__inner { grid-template-columns: 1fr; gap: 24px; }
  .mute-project__title { font-size: clamp(26px, 8vw, 36px); }
  .mute-project__stats { gap: 20px; flex-wrap: wrap; }

  .mute-story { padding: 48px 1.5rem; }
  .mute-story__inner { grid-template-columns: 1fr; gap: 32px; }
  .mute-story__content { order: 2; padding-right: 0; }
  .mute-story__media { order: 1; }
  .mute-story__title { font-size: clamp(28px, 9vw, 40px); }
  .mute-story__image-wrapper { aspect-ratio: 1 / 1; }

  .mute-cta { padding: 48px 1.5rem; }
  .mute-cta__title { font-size: clamp(28px, 9vw, 40px); }
  .mute-cta__buttons { flex-direction: column; gap: 12px; }
  .mute-cta__btn-primary { width: 100%; text-align: center; }

  .mute-proof { padding: 32px 1.5rem; }
  .mute-proof__inner { grid-template-columns: 1fr 1fr; gap: 24px; }

  .mute-footer { padding: 48px 20px 24px; }
  .mute-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .mute-footer__grid > div:first-child { grid-column: 1 / -1; }
  .mute-footer__bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

@media (min-width: 750px) and (max-width: 989px) {
  .mute-hero__inner { padding: 40px 3rem 44px; gap: 32px; }
  .mute-hero__headline { font-size: clamp(44px, 7vw, 72px); }
  .mute-hero__image-wrapper { max-width: 340px; }
  .mute-hero__card { bottom: 48px; max-width: 220px; padding: 18px 20px; }
  .mute-library { padding: 56px 32px; }
  .mute-project { padding: 32px 32px 56px; }
  .mute-story { padding: 56px 32px; }
  .mute-cta { padding: 56px 32px; }
  .mute-proof { padding: 36px 32px; }
  .mute-footer { padding: 48px 32px 24px; }
  .mute-footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
  .mute-footer__grid > div:last-child { grid-column: 1 / -1; }
}

.footer { border-top: 1px solid var(--mute-hair) !important; }
.section-header { border-bottom: 1px solid var(--mute-hair) !important; }


/* ============================================
   PRODUCT LANDING PAGE SECTIONS

   STANDARD SPACING RULES (apply to all sections):
   — Section padding: 80px 3rem (desktop), 48px 1.5rem (mobile)
   — Section gap (between header and content): 48–56px
   — Card internal padding: 28px
   — Border color: rgba(15, 52, 61, 0.1) (hair-soft)
   — Max width: var(--mute-max-width) = 120rem
   ============================================ */

/* ── Product Hero ── */
.mute-product-hero {
  background-color: var(--mute-ivory);
  padding: 0;
}

.mute-product-hero__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
  padding: 40px 3rem 64px;
}

.mute-product-hero__image-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 6;
  width: 100%;
}

.mute-product-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mute-product-hero__content {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.mute-product-hero__overline {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  margin-bottom: 20px;
}

.mute-product-hero__title {
  font-family: var(--mute-sans);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--mute-teal);
  margin: 0 0 24px 0;
}

.mute-product-hero__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
}

.mute-product-hero__subtitle {
  font-family: var(--mute-serif);
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  color: var(--mute-teal);
  margin-bottom: 20px;
  line-height: 1.4;
}

.mute-product-hero__description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  margin-bottom: 36px;
  max-width: 400px;
}

.mute-product-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.mute-product-hero__btn-primary {
  display: inline-block;
  padding: 13px 24px;
  background-color: var(--mute-teal);
  color: var(--mute-ivory);
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--mute-sans);
  transition: opacity 0.3s;
}

.mute-product-hero__btn-primary:hover { opacity: 0.85; }

.mute-product-hero__btn-secondary {
  display: inline-block;
  padding: 13px 24px;
  border: 1px solid var(--mute-hair);
  color: var(--mute-teal);
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--mute-sans);
  transition: all 0.3s;
}

.mute-product-hero__btn-secondary:hover {
  background: var(--mute-teal);
  color: var(--mute-ivory);
}

.mute-product-hero__whatsapp {
  font-size: 13px;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  text-decoration: none;
}

.mute-product-hero__whatsapp:hover { color: var(--mute-teal); }

.mute-product-hero__quick-specs {
  display: flex;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--mute-hair);
  margin-top: auto;
}

.mute-product-hero__spec-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  margin-bottom: 4px;
}

.mute-product-hero__spec-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--mute-teal);
  font-family: var(--mute-sans);
}

/* Product Specs Strip */
.mute-product-specs {
  background-color: var(--mute-cream);
  padding: 0;
}

.mute-product-specs__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 48px 3rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.mute-product-specs__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 32px;
  border-left: 1px solid rgba(15, 52, 61, 0.15);
}

.mute-product-specs__item:first-child {
  padding-left: 0;
  border-left: none;
}

.mute-product-specs__label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute-teal);
  font-family: var(--mute-mono);
  font-weight: 500;
  opacity: 0.7;
}

.mute-product-specs__value {
  font-size: 14px;
  font-weight: 500;
  color: var(--mute-teal);
  font-family: var(--mute-sans);
  line-height: 1.3;
}

/* Features */
.mute-features {
  background-color: var(--mute-ivory);
  padding: 0;
  border-top: 1px solid rgba(15, 52, 61, 0.1);
}

.mute-features__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 80px 3rem;
}

.mute-features__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 56px;
}

.mute-features__title {
  font-family: var(--mute-sans);
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: var(--mute-teal);
  margin: 0;
}

.mute-features__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
}

.mute-features__header-right {
  display: flex;
  align-items: flex-end;
  padding-bottom: 6px;
}

.mute-features__description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted);
  margin: 0;
  max-width: 420px;
}

.mute-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.mute-features__card {
  padding: 28px 28px 36px;
  border-top: 1px solid rgba(15, 52, 61, 0.1);
  border-left: 1px solid rgba(15, 52, 61, 0.1);
}

.mute-features__card:nth-child(3n + 1) {
  border-left: none;
  padding-left: 0;
}

.mute-features__card:nth-child(3n) {
  padding-right: 0;
}

.mute-features__card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.mute-features__card-numeral {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
}

.mute-features__card-icon {
  color: var(--mute-teal);
  opacity: 0.6;
  line-height: 0;
}

.mute-features__card-icon svg {
  width: 32px;
  height: 32px;
}

.mute-features__card-title {
  font-family: var(--mute-sans);
  font-size: 20px;
  font-weight: 600;
  color: var(--mute-teal);
  margin: 0 0 10px;
  line-height: 1.2;
}

.mute-features__card-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute-muted);
  margin: 0;
}

/* Technical Details */
.mute-technical { background-color: var(--mute-cream); padding: 0; }
.mute-technical__inner { max-width: var(--mute-max-width); margin: 0 auto; padding: 80px 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.mute-technical__overline { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute-muted); font-family: var(--mute-mono); margin-bottom: 16px; }
.mute-technical__title { font-family: var(--mute-sans); font-size: clamp(28px, 4vw, 56px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.0; color: var(--mute-teal); margin: 0 0 20px; }
.mute-technical__title em { font-family: var(--mute-serif); font-weight: 400; font-style: italic; }
.mute-technical__description { font-size: 14px; line-height: 1.6; color: var(--mute-muted); font-family: var(--mute-sans); margin-bottom: 24px; }
.mute-technical__specs-list { list-style: none; padding: 0; margin: 0; }
.mute-technical__specs-list li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--mute-hair); font-family: var(--mute-sans); font-size: 14px; }
.mute-technical__specs-list li:first-child { border-top: 1px solid var(--mute-hair); }
.mute-technical__spec-name { color: var(--mute-teal); font-weight: 500; }
.mute-technical__spec-val { color: var(--mute-muted); }
.mute-technical__media { position: relative; }
.mute-technical__image-wrapper { aspect-ratio: 1 / 1; overflow: hidden; background: repeating-linear-gradient(-45deg, rgba(15,52,61,0.03), rgba(15,52,61,0.03) 1px, transparent 1px, transparent 7px); background-color: rgba(15,52,61,0.02); }
.mute-technical__image { width: 100%; height: 100%; object-fit: cover; }
.mute-technical__sizes { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.mute-technical__size { font-size: 12px; font-family: var(--mute-mono); color: var(--mute-muted); letter-spacing: 0.1em; padding: 8px 12px; border: 1px solid var(--mute-hair); }
.mute-technical__download { margin-top: 16px; }
.mute-technical__download a { font-size: 13px; color: var(--mute-teal); text-decoration: underline; font-family: var(--mute-sans); }
.mute-technical__downloads { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--mute-hair); }
.mute-technical__downloads-title { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute-muted); font-family: var(--mute-mono); margin-bottom: 16px; }
.mute-technical__download-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--mute-hair); text-decoration: none; color: var(--mute-teal); transition: opacity 0.2s; }
.mute-technical__download-item:first-of-type { border-top: 1px solid var(--mute-hair); }
.mute-technical__download-item:hover { opacity: 0.7; }
.mute-technical__download-icon { font-size: 18px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--mute-hair); flex-shrink: 0; font-family: var(--mute-sans); }
.mute-technical__download-name { display: block; font-size: 14px; font-weight: 500; font-family: var(--mute-sans); color: var(--mute-teal); }
.mute-technical__download-meta { display: block; font-size: 11px; font-family: var(--mute-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute-muted); margin-top: 2px; }

/* Application Gallery */
.mute-gallery { background-color: var(--mute-ivory); padding: 0; }

.mute-gallery__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 80px 3rem;
}

.mute-gallery__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
}

.mute-gallery__overline {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  margin-bottom: 8px;
}

.mute-gallery__title {
  font-family: var(--mute-sans);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: var(--mute-teal);
  margin: 0;
}

.mute-gallery__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
}

.mute-gallery__view-all {
  font-size: 13px;
  color: var(--mute-teal);
  text-decoration: none;
  font-family: var(--mute-sans);
  white-space: nowrap;
  padding-bottom: 6px;
  transition: opacity 0.2s;
}

.mute-gallery__view-all:hover { opacity: 0.6; }

/* ── Masonry grid ── */
.mute-gallery__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 8px;
  align-items: stretch;
}

.mute-gallery__featured {
  display: block;
  text-decoration: none;
  position: relative;
}

.mute-gallery__featured-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--mute-cream);
  height: 100%;
}

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

/* Right column — 2 on top, 1 on bottom */
.mute-gallery__secondary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mute-gallery__secondary-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mute-gallery__thumb {
  display: block;
  text-decoration: none;
  position: relative;
}

.mute-gallery__thumb-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--mute-cream);
}

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

/* Bottom image fills remaining height */
.mute-gallery__thumb--bottom .mute-gallery__thumb-image {
  aspect-ratio: unset;
  height: 0;
  flex-grow: 1;
  min-height: 120px;
}

.mute-gallery__thumb--bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mute-gallery__thumb--bottom .mute-gallery__thumb-image {
  aspect-ratio: unset;
  flex: 1;
  min-height: 100px;
}

/* Space type tag overlay */
.mute-gallery__tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-teal);
  background: rgba(245, 240, 232, 0.9);
  padding: 4px 8px;
  font-family: var(--mute-mono);
}

/* Placeholder */
.mute-gallery__placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(-45deg, rgba(15,52,61,0.03), rgba(15,52,61,0.03) 1px, transparent 1px, transparent 7px);
  background-color: rgba(15,52,61,0.02);
}

/* ── Captions below grid ── */
.mute-gallery__captions {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

.mute-gallery__caption-featured {
  display: flex;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}

.mute-gallery__caption-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mute-gallery__caption-type {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  margin: 0 0 2px;
}

.mute-gallery__caption-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--mute-teal);
  font-family: var(--mute-sans);
  margin: 0 0 2px;
}

.mute-gallery__caption-meta {
  font-size: 12px;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  margin: 0;
}

.mute-gallery__case-link {
  font-size: 12px;
  color: var(--mute-teal);
  text-decoration: none;
  font-family: var(--mute-sans);
  margin-left: 8px;
  transition: opacity 0.2s;
}

.mute-gallery__case-link:hover { opacity: 0.6; }

/* Extra projects text list */
.mute-gallery__extra {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--mute-hair);
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

/* Mobile */
@media (max-width: 749px) {
  .mute-gallery__inner { padding: 48px 1.5rem; }
  .mute-gallery__grid { grid-template-columns: 1fr; }
  .mute-gallery__secondary { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .mute-gallery__secondary .mute-gallery__thumb:first-child { grid-template-columns: 1fr; }
  .mute-gallery__captions { grid-template-columns: 1fr; }
  .mute-gallery__caption-secondary { grid-template-columns: 1fr 1fr; }
}

/* Configurations */
.mute-config { background-color: var(--mute-cream); padding: 0; }
.mute-config__inner { max-width: var(--mute-max-width); margin: 0 auto; padding: 80px 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.mute-config__media { position: relative; }
.mute-config__content {}
.mute-config__overline { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute-muted); font-family: var(--mute-mono); margin-bottom: 16px; }
.mute-config__title { font-family: var(--mute-sans); font-size: clamp(28px, 4vw, 48px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; color: var(--mute-teal); margin: 0 0 16px; }
.mute-config__title em { font-family: var(--mute-serif); font-weight: 400; font-style: italic; }
.mute-config__description { font-size: 14px; line-height: 1.6; color: var(--mute-muted); font-family: var(--mute-sans); margin-bottom: 24px; }

/* Shop Collection Grid Header */
.mute-shop-header { background-color: var(--mute-teal); padding: 0; }
.mute-shop-header__inner { max-width: var(--mute-max-width); margin: 0 auto; padding: 56px 3rem 40px; }
.mute-shop-header__title { font-family: var(--mute-sans); font-size: clamp(32px, 4vw, 56px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.0; color: var(--mute-ivory); margin: 0 0 8px; }
.mute-shop-header__title em { font-family: var(--mute-serif); font-weight: 400; font-style: italic; }
.mute-shop-header__subtitle { font-size: 14px; color: var(--mute-muted-on-dark); font-family: var(--mute-sans); }

/* Related Products */
.mute-related { background-color: var(--mute-ivory); padding: 0; }
.mute-related__inner { max-width: var(--mute-max-width); margin: 0 auto; padding: 64px 3rem; }
.mute-related__title { font-size: 14px; font-weight: 500; color: var(--mute-muted); font-family: var(--mute-sans); margin-bottom: 24px; letter-spacing: 0.06em; text-transform: uppercase; }
.mute-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mute-related__item { text-decoration: none; color: var(--mute-teal); padding: 24px; border: 1px solid var(--mute-hair); transition: background 0.2s; }
.mute-related__item:hover { background: var(--mute-cream); }
.mute-related__item-name { font-size: 18px; font-weight: 600; font-family: var(--mute-sans); margin-bottom: 4px; }
.mute-related__item-meta { font-size: 13px; color: var(--mute-muted); font-family: var(--mute-sans); }

/* Mobile overrides for product landing */
@media (max-width: 749px) {
  .mute-product-hero { padding: 24px 1.5rem; }
  .mute-product-hero__inner { grid-template-columns: 1fr; gap: 24px; }
  .mute-product-hero__image-wrapper { aspect-ratio: 4 / 3; }
  .mute-product-hero__content { padding: 0; }
  .mute-product-hero__quick-specs { flex-wrap: wrap; gap: 16px; }
  .mute-product-hero__quick-specs > div { flex: 0 0 45%; }
  .mute-product-specs__inner { grid-template-columns: repeat(2, 1fr); gap: 24px 0; padding: 32px 1.5rem; }
  .mute-product-specs__item { padding: 0 16px; }
  .mute-product-specs__item:nth-child(odd) { padding-left: 0; border-left: none; }
  .mute-product-specs__value { font-size: 16px; }
  .mute-features__inner { padding: 48px 1.5rem; }
  .mute-features__header { grid-template-columns: 1fr; gap: 16px; }
  .mute-features__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .mute-technical__inner { grid-template-columns: 1fr; padding: 48px 1.5rem; gap: 32px; }
  .mute-gallery__inner { padding: 48px 1.5rem; }
  .mute-config__inner { grid-template-columns: 1fr; padding: 48px 1.5rem; gap: 32px; }
  .mute-shop-header__inner { padding: 40px 1.5rem 32px; }
  .mute-related__inner { padding: 48px 1.5rem; }
  .mute-related__grid { grid-template-columns: 1fr; }
  .mute-features__card { border-left: none; padding-left: 0; padding-right: 0; }
  .mute-features__card-title { font-size: 19px; }
}

@media (min-width: 750px) and (max-width: 989px) {
  .mute-features__grid { grid-template-columns: repeat(2, 1fr); }
  .mute-features__card:nth-child(3n + 1) { border-left: 1px solid rgba(15, 52, 61, 0.1); padding-left: 32px; }
  .mute-features__card:nth-child(2n + 1) { border-left: none; padding-left: 0; }
}

/* ── Config v2 scoped overrides ── */
section.mute-config .mute-config__image-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--mute-cream);
}

section.mute-config .mute-config__color-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: background-color 0.4s ease;
  z-index: 0;
  display: block !important;
}

section.mute-config .mute-config__color-fill:empty {
  display: block !important;
}

section.mute-config .mute-config__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

section.mute-config .mute-config__image--active { opacity: 1; }

section.mute-config .mute-config__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-teal);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 2;
}

section.mute-config .mute-config__caption-sep { opacity: 0.4; }

section.mute-config .mute-config__below-image {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mute-muted);
}

section.mute-config .mute-config__drag-hint { text-transform: uppercase; }
section.mute-config .mute-config__sample-link { color: var(--mute-teal); text-decoration: none; font-weight: 500; }
section.mute-config .mute-config__sample-link:hover { text-decoration: underline; }

section.mute-config .mute-config__section { margin-top: 28px; }

section.mute-config .mute-config__section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

section.mute-config .mute-config__section-label { color: var(--mute-muted); }
section.mute-config .mute-config__section-value { color: var(--mute-teal); font-weight: 500; }

section.mute-config .mute-config__swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 0;
}

section.mute-config .mute-config__swatch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

section.mute-config .mute-config__swatch {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
  outline: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}

section.mute-config .mute-config__swatch:hover { transform: scale(1.08); }
section.mute-config .mute-config__swatch--active { border-color: var(--mute-teal); }

section.mute-config .mute-config__swatch-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--mute-muted);
  line-height: 1.2;
}

section.mute-config .mute-config__patterns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

section.mute-config .mute-config__pattern {
  padding: 16px;
  border: 2px solid var(--mute-hair);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  appearance: none;
  -webkit-appearance: none;
  font-size: inherit;
  color: inherit;
}

section.mute-config .mute-config__pattern:hover { border-color: var(--mute-muted); background: transparent; }
section.mute-config .mute-config__pattern--active { border-color: var(--mute-teal); background: var(--mute-teal); }
section.mute-config .mute-config__pattern--active .mute-config__pattern-name,
section.mute-config .mute-config__pattern--active .mute-config__pattern-subtitle { color: #fff; }
section.mute-config .mute-config__pattern-name { font-size: 15px; font-weight: 500; color: var(--mute-teal); line-height: 1.3; }
section.mute-config .mute-config__pattern-subtitle { font-size: 11px; color: var(--mute-muted); line-height: 1.3; }

section.mute-config .mute-config__sizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

section.mute-config .mute-config__size {
  padding: 14px 12px;
  border: 2px solid var(--mute-hair);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 3px;
  appearance: none;
  -webkit-appearance: none;
}

section.mute-config .mute-config__size:hover { border-color: var(--mute-muted); }
section.mute-config .mute-config__size--active { border-color: var(--mute-teal); background: var(--mute-teal); }
section.mute-config .mute-config__size--active .mute-config__size-name,
section.mute-config .mute-config__size--active .mute-config__size-subtitle { color: #fff; }
section.mute-config .mute-config__size-name { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mute-teal); line-height: 1.3; }
section.mute-config .mute-config__size-subtitle { font-size: 11px; color: var(--mute-muted); line-height: 1.3; }

@media (max-width: 749px) {
  section.mute-config .mute-config__swatches { grid-template-columns: repeat(6, 1fr); }
  section.mute-config .mute-config__swatch-label { font-size: 8px; }
  section.mute-config .mute-config__patterns { grid-template-columns: 1fr; }
  section.mute-config .mute-config__sizes { grid-template-columns: repeat(2, 1fr); }
  section.mute-config .mute-config__below-image { flex-direction: column; gap: 6px; align-items: flex-start; }
}

/* ── Texture overlays ── */
section.mute-config .mute-config__texture-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  opacity: 1;
  display: block !important;
}

[data-config-texture="plain"] .mute-config__texture-overlay { opacity: 0; }

[data-config-texture="pattern"] .mute-config__texture-overlay {
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 9px,
    rgba(0, 0, 0, 0.18) 9px,
    rgba(0, 0, 0, 0.14) 10.5px,
    rgba(255, 255, 255, 0.1) 10.5px,
    rgba(255, 255, 255, 0.06) 11.5px,
    transparent 11.5px,
    transparent 20px
  );
  opacity: 1;
}

[data-config-texture="sculpt"] .mute-config__texture-overlay {
  background:
    radial-gradient(ellipse 70% 50% at 35% 35%, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 30%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 40% 45%, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.06) 35%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 75% 70%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 30%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 78% 78%, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.05) 30%, transparent 55%),
    linear-gradient(0deg, transparent 49.5%, rgba(0,0,0,0.06) 49.5%, rgba(0,0,0,0.06) 50.5%, transparent 50.5%),
    linear-gradient(90deg, transparent 49.5%, rgba(0,0,0,0.06) 49.5%, rgba(0,0,0,0.06) 50.5%, transparent 50.5%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 50%, 50% 100%;
  opacity: 1;
}

/* ============================================
   TECHNICAL DOWNLOADS SECTION
   ============================================ */

.mute-downloads {
  background-color: var(--mute-ivory);
  padding: 0;
  border-top: 1px solid var(--mute-hair);
}

.mute-downloads__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 80px 3rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
  align-items: start;
}

.mute-downloads__overline {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  margin-bottom: 16px;
}

.mute-downloads__title {
  font-family: var(--mute-sans);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--mute-teal);
  margin: 0;
}

.mute-downloads__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
}

.mute-downloads__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.mute-downloads__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border: 1px solid var(--mute-hair-soft);
  border-collapse: collapse;
  text-decoration: none;
  color: var(--mute-teal);
  transition: background-color 0.2s ease;
  margin: -1px 0 0 -1px;
}

.mute-downloads__item:hover {
  background-color: var(--mute-cream);
}

.mute-downloads__item-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mute-downloads__item-name {
  font-family: var(--mute-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--mute-teal);
}

.mute-downloads__item-meta {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--mute-muted);
  text-transform: uppercase;
}

.mute-downloads__item-btn {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-teal);
  border: 1px solid var(--mute-hair);
  padding: 6px 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Mobile */
@media (max-width: 749px) {
  .mute-downloads__inner {
    grid-template-columns: 1fr;
    padding: 48px 1.5rem;
    gap: 32px;
  }
  .mute-downloads__grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================
   PAIRS WELL WITH / RELATED PRODUCTS SECTION
   ============================================ */

.mute-pairs {
  background-color: var(--mute-ivory);
  padding: 0;
  border-top: 1px solid var(--mute-hair);
}

.mute-pairs__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 80px 3rem;
}

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

.mute-pairs__overline {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  font-family: var(--mute-mono);
  margin-bottom: 12px;
}

.mute-pairs__title {
  font-family: var(--mute-sans);
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: var(--mute-teal);
  margin: 0;
}

.mute-pairs__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
}

.mute-pairs__all-link {
  font-size: 13px;
  color: var(--mute-teal);
  text-decoration: none;
  font-family: var(--mute-sans);
  white-space: nowrap;
  padding-bottom: 6px;
  transition: opacity 0.2s;
}

.mute-pairs__all-link:hover { opacity: 0.6; }

.mute-pairs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mute-pairs__card {
  text-decoration: none;
  color: var(--mute-teal);
  display: block;
}

.mute-pairs__card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mute-cream);
  margin-bottom: 16px;
}

.mute-pairs__placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(15,52,61,0.03),
    rgba(15,52,61,0.03) 1px,
    transparent 1px,
    transparent 7px
  );
  background-color: rgba(15,52,61,0.02);
}

.mute-pairs__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.mute-pairs__card:hover .mute-pairs__card-image img {
  transform: scale(1.03);
}

.mute-pairs__card-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-teal);
  background: rgba(245, 240, 232, 0.9);
  padding: 4px 8px;
  font-family: var(--mute-mono);
}

.mute-pairs__card-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.mute-pairs__card-number {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--mute-muted);
}

.mute-pairs__card-name {
  font-family: var(--mute-sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--mute-teal);
  flex: 1;
}

.mute-pairs__card-arrow {
  font-size: 16px;
  color: var(--mute-muted);
  transition: transform 0.2s ease;
}

.mute-pairs__card:hover .mute-pairs__card-arrow {
  transform: translateX(4px);
}

.mute-pairs__card-meta {
  font-size: 13px;
  color: var(--mute-muted);
  font-family: var(--mute-sans);
  margin: 0;
}

/* Mobile */
@media (max-width: 749px) {
  .mute-pairs__inner { padding: 48px 1.5rem; }
  .mute-pairs__header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .mute-pairs__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Tablet */
@media (min-width: 750px) and (max-width: 989px) {
  .mute-pairs__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   MUTE CTA B2B SECTION
   ============================================ */

.mute-cta-b2b {
  background-color: var(--mute-teal);
  padding: 0;
}

.mute-cta-b2b__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 80px 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ── Left column ── */
.mute-cta-b2b__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
  margin-bottom: 20px;
}

.mute-cta-b2b__title {
  font-family: var(--mute-sans);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: var(--mute-ivory);
  margin: 0 0 24px;
}

.mute-cta-b2b__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
}

.mute-cta-b2b__body {
  font-family: var(--mute-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted-on-dark);
  max-width: 480px;
  margin: 0;
}

/* ── Right column ── */
.mute-cta-b2b__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mute-cta-b2b__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--mute-ivory);
  color: var(--mute-teal);
  text-decoration: none;
  padding: 18px 24px;
  font-family: var(--mute-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
  align-self: flex-start;
}

.mute-cta-b2b__whatsapp:hover { opacity: 0.9; }

.mute-cta-b2b__whatsapp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #22c55e;
  flex-shrink: 0;
}

.mute-cta-b2b__whatsapp-arrow {
  margin-left: 4px;
  font-size: 14px;
}

.mute-cta-b2b__consult {
  font-family: var(--mute-sans);
  font-size: 14px;
  color: var(--mute-muted-on-dark);
  text-decoration: none;
  margin: 0;
  transition: color 0.2s;
}

a.mute-cta-b2b__consult:hover { color: var(--mute-ivory); }

.mute-cta-b2b__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--mute-hair-on-dark-soft);
}

.mute-cta-b2b__contact-line {
  font-family: var(--mute-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
  text-decoration: none;
  transition: color 0.2s;
}

.mute-cta-b2b__contact-line:hover { color: var(--mute-ivory); }

/* Mobile */
@media (max-width: 749px) {
  .mute-cta-b2b__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 1.5rem;
  }
  .mute-cta-b2b__whatsapp { align-self: stretch; justify-content: center; }
}

/* ============================================
   MUTE SHOP GRID SECTION
   ============================================ */

.mute-shop {
  background-color: var(--mute-cream);
  padding: 0;
}

.mute-shop__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 56px 3rem 80px;
}

/* ── Header ── */
.mute-shop__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 24px;
  flex-wrap: wrap;
}

.mute-shop__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-bottom: 10px;
}

.mute-shop__title {
  font-family: var(--mute-sans);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: var(--mute-teal);
  margin: 0 0 8px;
}

.mute-shop__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
}

.mute-shop__subtitle {
  font-family: var(--mute-sans);
  font-size: 13px;
  color: var(--mute-muted);
  margin: 0;
}

/* ── Filter tabs ── */
.mute-shop__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-self: flex-end;
  padding-bottom: 4px;
}

.mute-shop__filter {
  padding: 8px 18px;
  border: 1px solid var(--mute-hair);
  background: transparent;
  color: var(--mute-teal);
  font-family: var(--mute-sans);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0;
  white-space: nowrap;
}

.mute-shop__filter:hover {
  border-color: var(--mute-teal);
}

.mute-shop__filter--active {
  background: var(--mute-teal);
  color: var(--mute-ivory);
  border-color: var(--mute-teal);
}

/* ── Product grid ── */
.mute-shop__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.mute-shop__card {
  display: flex;
  flex-direction: column;
  background-color: var(--mute-ivory);
  padding: 12px;
}

/* ── Card image ── */
.mute-shop__card-image-link {
  display: block;
  text-decoration: none;
}

.mute-shop__card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mute-cream);
  margin-bottom: 0;
}

.mute-shop__card-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(15,52,61,0.03),
    rgba(15,52,61,0.03) 1px,
    transparent 1px,
    transparent 7px
  );
  background-color: rgba(15,52,61,0.02);
}

.mute-shop__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.mute-shop__card:hover .mute-shop__card-image img {
  transform: scale(1.03);
}

.mute-shop__card-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-teal);
  background: rgba(245, 240, 232, 0.92);
  padding: 3px 8px;
}

/* ── Card body ── */
.mute-shop__card-body {
  padding: 16px 0 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  border-top: 1px solid var(--mute-hair-soft);
}

.mute-shop__card-code {
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin: 0 0 8px;
}

.mute-shop__card-title {
  font-family: var(--mute-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--mute-teal);
  margin: 0 0 20px;
  line-height: 1.2;
  flex: 1;
}

.mute-shop__card-title a {
  color: inherit;
  text-decoration: none;
}

.mute-shop__card-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--mute-hair-soft);
}

.mute-shop__card-price {
  font-family: var(--mute-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--mute-teal);
}

.mute-shop__card-stock {
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-muted);
}

.mute-shop__card-stock--in {
  color: var(--mute-muted);
}

.mute-shop__card-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: var(--mute-teal);
  color: var(--mute-ivory);
  text-align: center;
  font-family: var(--mute-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s;
  box-sizing: border-box;
}

.mute-shop__card-btn:hover { opacity: 0.85; }

.mute-shop__empty {
  font-size: 14px;
  color: var(--mute-muted);
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
}

/* Mobile */
@media (max-width: 749px) {
  .mute-shop__inner { padding: 40px 1.5rem 48px; }
  .mute-shop__header { flex-direction: column; align-items: flex-start; }
  .mute-shop__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .mute-shop__card-title { font-size: 15px; }
}

/* Tablet */
@media (min-width: 750px) and (max-width: 989px) {
  .mute-shop__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   PRODUCT FAMILY — MUTE FABRIC
   Append this block to section-mute-all.css
   after the existing product landing sections
   ============================================ */

.mute-family { background-color: var(--mute-ivory); padding: 0; }

.mute-family__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 80px 3rem;
}

.mute-family__header {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 56px;
  align-items: flex-end;
  margin-bottom: 72px;
}

.mute-family__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-bottom: 24px;
}

.mute-family__title {
  font-family: var(--mute-sans);
  font-size: clamp(36px, 5.5vw, 76px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--mute-teal);
  margin: 0;
}

.mute-family__title em {
  font-family: var(--mute-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
}

.mute-family__body {
  font-family: var(--mute-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--mute-muted);
  max-width: 440px;
  padding-bottom: 8px;
  margin: 0;
}

.mute-family__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--mute-hair);
  border-bottom: 1px solid var(--mute-hair);
}

.mute-family__card {
  display: flex;
  flex-direction: column;
  padding-bottom: 36px;
  position: relative;
}

.mute-family__card + .mute-family__card {
  border-left: 1px solid rgba(15, 52, 61, 0.1);
}

.mute-family__card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: rgba(15, 52, 61, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 32px;
  overflow: hidden;
}

.mute-family__card-svg {
  width: 70%;
  height: 70%;
  color: var(--mute-teal);
  opacity: 0.85;
}

.mute-family__card-num {
  position: absolute;
  top: 14px;
  left: 18px;
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  z-index: 1;
}

.mute-family__card-inner {
  padding: 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.mute-family__card-name {
  font-family: var(--mute-sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--mute-teal);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
}

.mute-family__card-sub {
  font-family: var(--mute-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--mute-muted);
  line-height: 1.3;
}

.mute-family__card-desc {
  font-family: var(--mute-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted);
  margin-top: 4px;
}

.mute-family__card-link {
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--mute-sans);
  font-size: 13px;
  color: var(--mute-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  transition: color 0.2s;
}

.mute-family__card-link:hover { color: var(--mute-teal); }

/* ── Family responsive ────────────────────── */
@media (max-width: 1100px) {
  .mute-family__grid { grid-template-columns: repeat(2, 1fr); }
  .mute-family__card:nth-child(2n + 1) { border-left: none; }
  .mute-family__card:nth-child(n + 3) { border-top: 1px solid rgba(15, 52, 61, 0.1); }
}

@media (max-width: 750px) {
  .mute-family__inner { padding: 48px 1.5rem; }
  .mute-family__header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .mute-family__grid { grid-template-columns: 1fr; }
  .mute-family__card { border-left: none !important; border-top: 1px solid rgba(15, 52, 61, 0.1); }
  .mute-family__card:first-child { border-top: none; }
  .mute-family__card-inner { padding: 0; }
}
/* ============================================
   FABRIC CONFIGURATOR — additional CSS
   Append to section-mute-all.css
   after the existing .mute-config block
   ============================================ */

/* Hide/show panels */
.mute-config--hidden { display: none !important; }

/* ── Print gallery grid ────────────────────── */
.mute-config__prints {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.mute-config__print {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 1px solid rgba(15, 52, 61, 0.12);
  background: none;
  cursor: pointer;
  transition: border-color 0.2s;
  overflow: hidden;
}

.mute-config__print:hover {
  border-color: rgba(15, 52, 61, 0.4);
}

.mute-config__print--active {
  border-color: var(--mute-teal);
  box-shadow: 0 0 0 1px var(--mute-teal);
}

.mute-config__print-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.mute-config__print-placeholder {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 52, 61, 0.04);
  color: var(--mute-muted);
}

.mute-config__print-placeholder svg {
  width: 40%;
  height: 40%;
}

.mute-config__print-name {
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute-muted);
  padding: 6px 4px 10px;
  text-align: center;
  line-height: 1.3;
}

.mute-config__print--active .mute-config__print-name {
  color: var(--mute-teal);
}

.mute-config__print-note {
  font-family: var(--mute-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--mute-muted-soft);
  margin-top: 16px;
  font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 750px) {
  .mute-config__prints {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Speaker panel info ────────────────────── */
.mute-config__speaker-info {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.mute-config__speaker-feature {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.mute-config__speaker-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--mute-teal);
  opacity: 0.7;
  margin-top: 2px;
}

.mute-config__speaker-title {
  font-family: var(--mute-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--mute-teal);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.mute-config__speaker-desc {
  font-family: var(--mute-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted);
  margin: 0;
}

.mute-config__speaker-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--mute-hair-soft);
  margin-top: 8px;
}

.mute-config__speaker-specs > div {
  padding: 16px 0;
  border-bottom: 1px solid var(--mute-hair-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mute-config__speaker-spec-label {
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute-muted-soft);
}

.mute-config__speaker-spec-value {
  font-family: var(--mute-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--mute-teal);
}

@media (max-width: 750px) {
  .mute-config__speaker-specs {
    grid-template-columns: 1fr;
  }
}
/* ============================================
   FABRIC TECHNICAL — construction diagram
   Append to section-mute-all.css
   ============================================ */

/* Spec row numbering */
.mute-technical--fabric .mute-technical__specs-list li {
  display: grid;
  grid-template-columns: 40px 120px 1fr;
  gap: 0;
  align-items: baseline;
}

.mute-technical__spec-num {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--mute-muted-soft);
}

/* ── Construction diagram panel ────────────── */
.mute-technical__diagram {
  background: var(--mute-cream);
  border: 1px solid var(--mute-hair-soft);
  padding: 32px;
}

.mute-technical__diagram-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mute-hair-soft);
}

/* ============================================
   FABRIC TECHNICAL — construction diagram
   Append to section-mute-all.css
   ============================================ */

/* Spec row numbering */
.mute-technical--fabric .mute-technical__specs-list li {
  display: grid;
  grid-template-columns: 40px 120px 1fr;
  gap: 0;
  align-items: baseline;
}

.mute-technical--fabric .mute-technical__spec-num {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--mute-muted-soft);
}

/* ── Construction diagram panel ────────────── */
.mute-technical--fabric .mute-technical__diagram {
  background: var(--mute-cream);
  border: 1px solid var(--mute-hair-soft);
  padding: 32px;
}

.mute-technical--fabric .mute-technical__diagram-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mute-hair-soft);
}

/* ── Layer bars ────────────────────────────── */
.mute-technical--fabric .mute-technical__layers {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.mute-technical--fabric .mute-technical__layer {
  display: grid;
  grid-template-columns: 32px 1fr 160px;
  gap: 16px;
  align-items: center;
}

.mute-technical--fabric .mute-technical__layer-num {
  font-family: var(--mute-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--mute-teal);
  line-height: 1;
}

.mute-technical--fabric .mute-technical__layer-bar {
  width: 100%;
  min-height: 30px;
  border-radius: 2px;
  display: block;
}

.mute-technical--fabric .mute-technical__layer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mute-technical--fabric .mute-technical__layer-name {
  font-family: var(--mute-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--mute-teal);
  letter-spacing: -0.01em;
}

.mute-technical--fabric .mute-technical__layer-meta {
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute-muted-soft);
}

/* ── Dimension specs row ───────────────────── */
.mute-technical--fabric .mute-technical__dimensions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--mute-hair-soft);
  padding-top: 24px;
}

.mute-technical--fabric .mute-technical__dimension {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mute-technical--fabric .mute-technical__dimension-label {
  font-family: var(--mute-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mute-muted-soft);
}

.mute-technical--fabric .mute-technical__dimension-value {
  font-family: var(--mute-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--mute-teal);
  letter-spacing: -0.02em;
}

/* ── Responsive ── */
@media (max-width: 750px) {
  .mute-technical--fabric .mute-technical__diagram { padding: 20px; }
  .mute-technical--fabric .mute-technical__layer { grid-template-columns: 24px 1fr; gap: 12px; }
  .mute-technical--fabric .mute-technical__layer-info { grid-column: 1 / -1; min-width: 0; }
  .mute-technical--fabric .mute-technical__dimensions { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .mute-technical--fabric .mute-technical__specs-list li { grid-template-columns: 30px 100px 1fr; }
}










/* ==========================================================================
   MUTE CONSULTANCY PAGE — CSS v2 (CORRECTED)
   Font sizes unified with Felt landing page.
   Replace the consultancy block in section-mute-all.css with this.
   ========================================================================== */

/* ─── Shared atoms ─────────────────────────────────────────────── */
.mute-c em.serif {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.mute-c .mono {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted, #5b757c);
}
.mute-c .mono--on-dark { color: var(--mute-muted-on-dark, #b9beb9); }

.mute-c .body {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute-muted, #5b757c);
  margin: 0;
}
.mute-c .body--lg { font-size: 18px; }
.mute-c .body--on-dark { color: var(--mute-muted-on-dark, #b9beb9); }

.mute-c .h-hero {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
}
.mute-c .h-lg {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
}
.mute-c .h-md {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0;
}

.mute-c .section { padding: 96px 3rem; }
.mute-c .section--strip { padding: 56px 3rem; }
.mute-c .section--dark { background: var(--mute-teal, #0f343d); color: var(--mute-ivory, #f5f0e8); }
.mute-c .section--ivory { background: var(--mute-ivory, #f5f0e8); }
.mute-c .section--cream { background: var(--mute-cream, #efe8dc); }
.mute-c .wrap { max-width: 120rem; margin: 0 auto; }

/* Buttons */
.mute-c .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 26px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.mute-c .btn--primary { background: var(--mute-teal, #0f343d); color: var(--mute-ivory, #f5f0e8); }
.mute-c .btn--primary:hover { background: #0a242b; }
.mute-c .btn--light { background: var(--mute-ivory, #f5f0e8); color: var(--mute-teal, #0f343d); }
.mute-c .btn--light:hover { background: #fff; }
.mute-c .btn--ghost { background: transparent; color: var(--mute-teal, #0f343d); border-color: rgba(15,52,61,0.25); }
.mute-c .btn--ghost:hover { border-color: var(--mute-teal, #0f343d); }
.mute-c .btn--ghost-dark { background: transparent; color: var(--mute-ivory, #f5f0e8); border-color: rgba(245,240,232,0.30); }
.mute-c .btn--ghost-dark:hover { border-color: var(--mute-ivory, #f5f0e8); }

.mute-c .text-link {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--mute-teal, #0f343d);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(15,52,61,0.25);
  padding-bottom: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mute-c .text-link--on-dark { color: var(--mute-ivory, #f5f0e8); border-bottom-color: rgba(245,240,232,0.30); }

.mute-c .wa-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #25D366; display: inline-block;
}

.mute-c .rule { border: 0; border-top: 1px solid rgba(15,52,61,0.25); margin: 0; }

/* Placeholder surface */
.mute-c .ph {
  position: relative;
  background: repeating-linear-gradient(135deg, rgba(15,52,61,0.08) 0 14px, rgba(15,52,61,0.04) 14px 28px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mute-c .ph--teal-tint {
  background:
    linear-gradient(rgba(15,52,61,0.78), rgba(10,36,43,0.78)),
    repeating-linear-gradient(135deg, rgba(245,240,232,0.10) 0 12px, rgba(245,240,232,0.00) 12px 24px);
  color: var(--mute-ivory, #f5f0e8);
}
.mute-c .ph__badge {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(8,25,30,0.78);
  color: var(--mute-ivory, #f5f0e8);
  padding: 6px 10px;
  border: 1px solid rgba(245,240,232,0.30);
  z-index: 2;
}

/* Head-row (used by Process, Sectors, Projects) */
.mute-c .head-row {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 56px;
  align-items: flex-end;
  margin-bottom: 72px;
}
.mute-c .head-row .overline { display: block; margin-bottom: 24px; }
.mute-c .head-row .body { max-width: 440px; padding-bottom: 8px; }

/* ─── 1. HERO ──────────────────────────────────────────────────── */
.mute-c-hero {
  background: var(--mute-teal, #0f343d);
  color: var(--mute-ivory, #f5f0e8);
  padding: 104px 3rem 96px;
}
.mute-c-hero .wrap {
  max-width: 120rem;
  margin: 0 auto;
}
.mute-c-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: stretch;
}
.mute-c-hero__image {
  width: 100%;
  min-height: 540px;
  aspect-ratio: 5 / 6;
}
.mute-c-hero__viz {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 36px 32px;
}
.mute-c-hero__viz .label-row {
  display: flex; gap: 14px; align-items: center;
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,240,232,0.7);
}
.mute-c-hero__viz .label-row .sep { color: rgba(245,240,232,0.35); }
.mute-c-hero__viz .wave {
  width: 100%; flex: 1;
  display: flex; align-items: center; justify-content: center;
}
.mute-c-hero__viz .wave svg { width: 100%; height: 70%; }
.mute-c-hero__viz .scale {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  font-family: 'Geist Mono', monospace; font-size: 9.5px;
  letter-spacing: 0.18em;
  color: rgba(245,240,232,0.55);
  text-transform: uppercase;
}
.mute-c-hero__viz .scale span {
  border-left: 1px solid rgba(245,240,232,0.12);
  padding: 18px 0 4px 6px;
}
.mute-c-hero__viz .scale span:first-child { border-left: none; padding-left: 0; }
.mute-c-hero__viz .corner-tag {
  align-self: flex-end;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.7);
  border: 1px solid rgba(245,240,232,0.22);
  padding: 8px 12px;
}
.mute-c-hero__viz .readings {
  display: flex; gap: 18px;
}
.mute-c-hero__viz .readings .val {
  font-family: 'Geist', sans-serif;
  color: rgba(245,240,232,0.9);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 6px;
}
.mute-c-hero__viz .readings .val--highlight {
  color: var(--mute-ivory, #f5f0e8);
  font-weight: 600;
}
.mute-c-hero__viz .readings .val .unit {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-left: 4px;
}

.mute-c-hero__copy {
  display: flex;
  flex-direction: column;
}
.mute-c-hero__overline {
  margin-bottom: 28px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.mute-c-hero__overline .dot {
  width: 5px; height: 5px;
  background: var(--mute-muted-on-dark, #b9beb9);
  display: inline-block;
}
.mute-c-hero__title { color: var(--mute-ivory, #f5f0e8); }
.mute-c-hero__lede {
  color: var(--mute-ivory, #f5f0e8);
  margin-top: 28px;
  font-family: var(--mute-serif, 'Instrument Serif', serif);
  font-weight: 400;
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 520px;
}
.mute-c-hero__body {
  margin-top: 22px;
  max-width: 520px;
}
.mute-c-hero__cta {
  margin-top: 40px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.mute-c-hero__cta .btn--light { padding: 18px 26px; font-size: 12px; }
.mute-c-hero__quick {
  margin-top: auto;
  padding-top: 36px;
  border-top: 1px solid rgba(245,240,232,0.30);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.mute-c-hero__quick > div { padding-top: 4px; }
.mute-c-hero__quick .v {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--mute-ivory, #f5f0e8);
  margin-top: 10px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

/* ─── 2. PROCESS ───────────────────────────────────────────────── */
.mute-c-process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(15,52,61,0.25);
  border-left: 1px solid rgba(15,52,61,0.25);

}
.mute-c-process__card {
  padding: 44px 36px;
  border-right: 1px solid rgba(15,52,61,0.25);
  border-bottom: 1px solid rgba(15,52,61,0.25);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 360px;
}
.mute-c-process__card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.mute-c-process__card-num {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--mute-muted, #5b757c);
}
.mute-c-process__card-icon {
  width: 36px; height: 36px;
  color: var(--mute-teal, #0f343d);
  opacity: 0.75;
}
.mute-c-process__card-icon svg { width: 100%; height: 100%; }
.mute-c-process__card-title {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--mute-teal, #0f343d);
  margin: 12px 0 0;
  line-height: 1.05;
  
}
.mute-c-process__card-title em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
}
.mute-c-process__card-desc {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute-muted, #5b757c);
  margin: 0;
}
.mute-c-process__card-foot {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(15,52,61,0.16);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted, #5b757c);
}
.mute-c-process__card-foot .v { color: var(--mute-teal, #0f343d); }

/* ─── 3. SECTORS ───────────────────────────────────────────────── */
.mute-c-sectors__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}
.mute-c-sector-card { display: flex; flex-direction: column; }
.mute-c-sector-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  margin-bottom: 28px;
}
.mute-c-sector-card__img svg {
  width: 100%; height: 100%;
  position: absolute; top: 0; left: 0;
}
.mute-c-sector-card__title {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--mute-teal, #0f343d);
  line-height: 1.15;
  margin: 0 0 12px;
}
.mute-c-sector-card__title em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.mute-c-sector-card__desc {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute-muted, #5b757c);
  margin: 0 0 22px;
}
.mute-c-sector-card__tags {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-teal, #0f343d);
  padding-top: 16px;
  border-top: 1px solid rgba(15,52,61,0.25);
}
.mute-c-sector-card__tags .sep { color: rgba(15,52,61,0.25); margin: 0 8px; }

.mute-c-more-sectors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid rgba(15,52,61,0.25);
}
.mute-c-more-sectors__item {
  padding: 28px 0;
  border-bottom: 1px solid rgba(15,52,61,0.25);
  display: grid;
  grid-template-columns: 220px 1fr 16px;
  gap: 32px;
  align-items: baseline;
}
.mute-c-more-sectors__item:nth-child(odd) { padding-right: 32px; }
.mute-c-more-sectors__item:nth-child(even) { padding-left: 32px; border-left: 1px solid rgba(15,52,61,0.25); }
.mute-c-more-sectors__name {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--mute-teal, #0f343d);
}
.mute-c-more-sectors__desc {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--mute-muted, #5b757c);
  line-height: 1.5;
}
.mute-c-more-sectors__arrow {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--mute-muted, #5b757c);
  text-align: right;
}

/* ─── 4. ADVANTAGE / CLOSED LOOP ───────────────────────────────── */
.mute-c-advantage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: flex-start;
}
.mute-c-advantage__copy .overline { display: block; margin-bottom: 24px; }
.mute-c-advantage__body { margin-top: 28px; max-width: 520px; }
.mute-c-advantage__compare {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(15,52,61,0.25);
}
.mute-c-advantage__compare-col {
  padding: 22px 24px 22px 0;
}
.mute-c-advantage__compare-col + .mute-c-advantage__compare-col {
  border-left: 1px solid rgba(15,52,61,0.25);
  padding-left: 28px;
}
.mute-c-advantage__compare-col .label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted, #5b757c);
  margin-bottom: 14px;
}
.mute-c-advantage__compare-col .v {
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--mute-teal, #0f343d);
}
.mute-c-advantage__compare-col .v em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.mute-c-advantage__compare-col .sub {
  margin-top: 8px;
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--mute-muted, #5b757c);
  line-height: 1.5;
}
.mute-c-advantage__compare-col .strike {
  text-decoration: line-through;
  text-decoration-color: rgba(15,52,61,0.25);
  text-decoration-thickness: 1px;
}

/* Closed-loop panel */
.mute-c-loop {
  background: var(--mute-teal, #0f343d);
  color: var(--mute-ivory, #f5f0e8);
  padding: 44px 40px;
}
.mute-c-loop__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(245,240,232,0.30);
  margin-bottom: 32px;
}
.mute-c-loop__head h3 {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--mute-ivory, #f5f0e8);
  margin: 0;
}
.mute-c-loop__head h3 em { font-family: 'Instrument Serif', serif; font-style: italic; }
.mute-c-loop__step {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid rgba(245,240,232,0.12);
}
.mute-c-loop__step:last-child { border-bottom: none; }
.mute-c-loop__step-num {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--mute-muted-on-dark, #b9beb9);
}
.mute-c-loop__step-name {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--mute-ivory, #f5f0e8);
  line-height: 1.15;
}
.mute-c-loop__step-name em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.mute-c-loop__step-by {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark, #b9beb9);
  text-align: right;
  max-width: 180px;
  line-height: 1.6;
}
.mute-c-loop__step-by strong {
  color: var(--mute-ivory, #f5f0e8);
  font-weight: 500;
  letter-spacing: 0.2em;
}
.mute-c-loop__return {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(245,240,232,0.30);
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark, #b9beb9);
}

/* Stats row */
.mute-c-stats {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(15,52,61,0.25);
  border-bottom: 1px solid rgba(15,52,61,0.25);
}
.mute-c-stats__item {
  padding: 36px 32px 36px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mute-c-stats__item + .mute-c-stats__item {
  border-left: 1px solid rgba(15,52,61,0.25);
  padding-left: 36px;
}
.mute-c-stats__num {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: clamp(48px, 4.4vw, 64px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--mute-teal, #0f343d);
}
.mute-c-stats__num em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.mute-c-stats__label {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--mute-muted, #5b757c);
  letter-spacing: -0.005em;
  margin-top: 6px;
}
.mute-c-stats__sub {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #83969b;
  margin-top: 4px;
}

/* ─── 5. DESIGN STAGE ──────────────────────────────────────────── */
.mute-c-stage {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: flex-start;
}
.mute-c-stage__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  position: relative;
}
.mute-c-stage__image svg {
  width: 100%; height: 100%;
  position: absolute; top: 0; left: 0;
}
.mute-c-stage__copy .overline { display: block; margin-bottom: 24px; }
.mute-c-stage__body { margin-top: 28px; max-width: 540px; }
.mute-c-stage__list { margin-top: 40px; }
.mute-c-stage__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid rgba(15,52,61,0.25);
  align-items: baseline;
}
.mute-c-stage__item:last-child { border-bottom: 1px solid rgba(15,52,61,0.25); }
.mute-c-stage__num {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #83969b;
}
.mute-c-stage__text {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--mute-teal, #0f343d);
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.mute-c-stage__callout {
  margin-top: 40px;
  padding: 28px 32px;
  background: var(--mute-ivory, #f5f0e8);
  border: 1px solid rgba(15,52,61,0.25);
  display: flex;
  gap: 28px;
  align-items: center;
}
.mute-c-stage__callout .big {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 44px;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--mute-teal, #0f343d);
  white-space: nowrap;
}
.mute-c-stage__callout .big em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.mute-c-stage__callout .small {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--mute-muted, #5b757c);
  line-height: 1.5;
}

/* ─── 6. PROJECTS ──────────────────────────────────────────────── */
.mute-c-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mute-c-project {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.mute-c-project__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  margin-bottom: 24px;
}
.mute-c-project__img svg {
  width: 100%; height: 100%;
  position: absolute; top: 0; left: 0;
}
.mute-c-project__tag {
  position: absolute;
  top: 14px; left: 14px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(245,240,232,0.94);
  color: var(--mute-teal, #0f343d);
  padding: 6px 10px;
  border: 1px solid rgba(15,52,61,0.16);
  z-index: 2;
}
.mute-c-project__name {
  font-family: 'Geist', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--mute-teal, #0f343d);
  line-height: 1.2;
  margin: 0;
}
.mute-c-project__meta {
  margin-top: 12px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted, #5b757c);
}
.mute-c-project__meta .sep { color: rgba(15,52,61,0.25); margin: 0 4px; }
.mute-c-project__link {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(15,52,61,0.25);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--mute-teal, #0f343d);
  letter-spacing: 0.02em;
}

/* ─── 7. CTA ───────────────────────────────────────────────────── */
.mute-c-cta {
  background: var(--mute-teal, #0f343d);
  color: var(--mute-ivory, #f5f0e8);
  padding: 120px 3rem;
}
.mute-c-cta .wrap { max-width: 120rem; margin: 0 auto; }
.mute-c-cta__row {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 80px;
  align-items: flex-start;
}
.mute-c-cta .overline { display: block; margin-bottom: 28px; color: var(--mute-muted-on-dark, #b9beb9); }
.mute-c-cta__title { color: var(--mute-ivory, #f5f0e8); margin: 0; }
.mute-c-cta__body {
  margin-top: 32px;
  color: var(--mute-muted-on-dark, #b9beb9);
  max-width: 580px;
}
.mute-c-cta__assurance {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(245,240,232,0.30);
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 36px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark, #b9beb9);
  width: fit-content;
}
.mute-c-cta__assurance .v {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--mute-ivory, #f5f0e8);
  letter-spacing: -0.005em;
  text-transform: none;
  margin-top: 8px;
}
.mute-c-cta__right {
  padding-left: 32px;
  border-left: 1px solid rgba(245,240,232,0.30);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.mute-c-cta__right .btn--light { padding: 20px 28px; font-size: 12px; }
.mute-c-cta__contact {
  margin-top: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark, #b9beb9);
  line-height: 1.9;
}
.mute-c-cta__contact a { color: var(--mute-muted-on-dark, #b9beb9); text-decoration: none; }
.mute-c-cta__contact .em { color: var(--mute-ivory, #f5f0e8); }

/* ─── 8. TRUST STRIP ───────────────────────────────────────────── */
.mute-c-trust {
  background: var(--mute-cream, #efe8dc);
  padding: 56px 3rem;
  border-top: 1px solid rgba(15,52,61,0.25);
  border-bottom: 1px solid rgba(15,52,61,0.25);
}
.mute-c-trust .wrap { max-width: 120rem; margin: 0 auto; }
.mute-c-trust__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.mute-c-trust__item {
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.mute-c-trust__item + .mute-c-trust__item {
  border-left: 1px solid rgba(15,52,61,0.25);
}
.mute-c-trust__icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  color: var(--mute-teal, #0f343d);
  opacity: 0.72;
}
.mute-c-trust__icon svg { width: 100%; height: 100%; }
.mute-c-trust__text { display: flex; flex-direction: column; gap: 6px; }
.mute-c-trust__title {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--mute-teal, #0f343d);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.mute-c-trust__sub {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted, #5b757c);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1200px) {
  .mute-c-sectors__grid { grid-template-columns: 1fr 1fr; }
  .mute-c-sectors__grid > :nth-child(3) { grid-column: 1 / 3; }
  .mute-c-sectors__grid > :nth-child(3) .mute-c-sector-card__img { aspect-ratio: 8 / 3; }
}

@media (max-width: 980px) {
  .mute-c .section { padding: 72px 3rem; }
  .mute-c-hero { padding: 72px 3rem; }
  .mute-c-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .mute-c-hero__image { min-height: 380px; aspect-ratio: 4 / 3; }

  .mute-c .head-row { grid-template-columns: 1fr; }
  .mute-c .head-row .body { max-width: 640px; }

  .mute-c-process__grid { grid-template-columns: 1fr; }
  .mute-c-process__card { min-height: 0; }

  .mute-c-sectors__grid { grid-template-columns: 1fr; }
  .mute-c-sectors__grid > * { grid-column: auto; }
  .mute-c-sectors__grid > :nth-child(3) { grid-column: auto; }
  .mute-c-sectors__grid > :nth-child(3) .mute-c-sector-card__img { aspect-ratio: 4 / 3; }
  .mute-c-more-sectors { grid-template-columns: 1fr; }
  .mute-c-more-sectors__item { grid-template-columns: 180px 1fr 16px; padding-left: 0 !important; padding-right: 0 !important; border-left: none !important; }

  .mute-c-advantage { grid-template-columns: 1fr; gap: 40px; }
  .mute-c-stage { grid-template-columns: 1fr; gap: 40px; }
  .mute-c-cta__row { grid-template-columns: 1fr; gap: 40px; }
  .mute-c-cta__right { padding-left: 0; border-left: none; border-top: 1px solid rgba(245,240,232,0.30); padding-top: 28px; }

  .mute-c-stats { grid-template-columns: 1fr; }
  .mute-c-stats__item + .mute-c-stats__item { border-left: none; border-top: 1px solid rgba(15,52,61,0.25); padding-left: 0; padding-top: 28px; }

  .mute-c-projects__grid { grid-template-columns: 1fr; gap: 40px; }

  .mute-c-trust__row { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .mute-c-trust__item:nth-child(3) { border-left: none; }
}

@media (max-width: 640px) {
  .mute-c .section { padding: 56px 1.5rem; }
  .mute-c-hero { padding: 56px 1.5rem 64px; }
  .mute-c-hero__quick { grid-template-columns: 1fr 1fr; gap: 20px; }
  .mute-c-hero__quick > div:nth-child(3) { grid-column: 1 / 3; padding-top: 20px; border-top: 1px solid rgba(245,240,232,0.12); }
  .mute-c-hero__cta { width: 100%; flex-direction: column; align-items: stretch; }
  .mute-c-hero__cta .btn { width: 100%; }

  .mute-c-stage__callout { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; }
  .mute-c-stage__item { grid-template-columns: 40px 1fr; gap: 16px; }

  .mute-c-more-sectors__item { grid-template-columns: 1fr; gap: 8px; }
  .mute-c-more-sectors__arrow { display: none; }

  .mute-c-advantage__compare { grid-template-columns: 1fr; }
  .mute-c-advantage__compare-col + .mute-c-advantage__compare-col { border-left: none; border-top: 1px solid rgba(15,52,61,0.25); padding-left: 0; padding-top: 22px; }

  .mute-c-trust__row { grid-template-columns: 1fr; }
  .mute-c-trust__item { border-left: none !important; padding: 18px 0; border-bottom: 1px solid rgba(15,52,61,0.25); }
  .mute-c-trust__item:last-child { border-bottom: none; }

  .mute-c-cta { padding: 72px 1.5rem; }
}


/* ==========================================================================
   SPACING FIX
   ========================================================================== */

.mute-c.section {
  padding: 80px 3rem;
}

.mute-section + .mute-section > .mute-c.section {
  padding-top: 40px;
}

@media (min-width: 981px) {
  .mute-c .head-row {
    grid-template-columns: 7fr 5fr;
  }
}

@media (max-width: 980px) {
  .mute-c.section {
    padding: 64px 3rem;
  }
  .mute-section + .mute-section > .mute-c.section {
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .mute-c.section {
    padding: 48px 1.5rem;
  }
  .mute-section + .mute-section > .mute-c.section {
    padding-top: 0;
  }
}

/* NUCLEAR OVERRIDE — Dawn section spacing reset for consultancy */
.mute-section { padding: 0 !important; margin: 0 !important; }
.mute-section > section { margin: 0 !important; }











/* ============================================
   MUTE PRO — ROOM SYSTEMS LANDING PAGE
   Sections: Hero, Spaces, Problem, Series,
   Kits, Elements, Consult Bar
   ============================================ */


/* ------------------------------------------
   PRO HERO
   ------------------------------------------ */

.mute-pro-hero {
  background-color: var(--mute-teal);
  color: var(--mute-ivory);
  overflow: hidden;
  padding: 120px 0 96px;
}

.mute-pro-hero__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: end;
}

.mute-pro-hero__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.mute-pro-hero__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute-muted-on-dark);
  margin: 0;
}

.mute-pro-hero__title {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: clamp(44px, 5.6vw, 84px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
  color: var(--mute-ivory);
  text-wrap: balance;
}

.mute-pro-hero__title em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.mute-pro-hero__subtitle {
  font-family: var(--mute-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--mute-muted-on-dark);
  max-width: 520px;
  letter-spacing: -0.005em;
  margin: 0;
}

.mute-pro-hero__body {
  font-family: var(--mute-sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--mute-muted-on-dark);
  max-width: 480px;
  margin: 0;
}

.mute-pro-hero__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.mute-pro-hero__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background-color: var(--mute-ivory);
  color: var(--mute-teal);
  text-decoration: none;
  font-family: var(--mute-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background-color 0.3s ease;
  line-height: 1;
}

.mute-pro-hero__btn-primary:hover {
  background-color: #fff;
}

.mute-pro-hero__arr {
  font-family: var(--mute-mono);
  font-weight: 400;
}

.mute-pro-hero__wa-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mute-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-ivory);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.mute-pro-hero__wa-link:hover {
  border-bottom-color: currentColor;
}

.mute-pro-hero__wa-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25D366;
  display: inline-block;
  flex: 0 0 8px;
}

.mute-pro-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 8px;
  border-top: 1px solid var(--mute-hair-on-dark);
}

.mute-pro-hero__stat {
  padding: 24px 24px 0 0;
  border-right: 1px solid var(--mute-hair-on-dark);
}

.mute-pro-hero__stat:last-child {
  border-right: 0;
  padding-right: 0;
}

.mute-pro-hero__stat-num {
  font-family: var(--mute-sans);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: #d85a30;
  line-height: 1;
}

.mute-pro-hero__stat-prefix,
.mute-pro-hero__stat-suffix {
  font-family: var(--mute-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--mute-muted-on-dark);
  font-weight: 400;
}

.mute-pro-hero__stat-suffix {
  margin-left: 4px;
}

.mute-pro-hero__stat-prefix {
  margin-right: 4px;
}

.mute-pro-hero__stat-label {
  margin-top: 10px;
  font-family: var(--mute-mono);
  font-size: 10px;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mute-muted-on-dark);
  max-width: 24ch;
}

.mute-pro-hero__media {
  position: relative;
}

.mute-pro-hero__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4/5;
}

.mute-pro-hero__placeholder {
  position: relative;
  background: rgba(245, 240, 232, 0.06);
  aspect-ratio: 4/5;
  overflow: hidden;
}

.mute-pro-hero__placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg,
    rgba(245, 240, 232, 0.05) 0 1px,
    transparent 1px 18px);
}

.mute-pro-hero__ph-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
  text-align: center;
  padding: 0 24px;
  max-width: 90%;
}


/* ------------------------------------------
   PRO SPACES SHOWCASE
   ------------------------------------------ */

.mute-pro-spaces {
  background-color: var(--mute-ivory);
  padding: 80px 0;
  border-bottom: 1px solid var(--mute-hair-soft);
}

.mute-pro-spaces__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
}

.mute-pro-spaces__header {
  margin-bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 780px;
}

.mute-pro-spaces__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute-muted);
  margin: 0;
}

.mute-pro-spaces__title {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
  color: var(--mute-teal);
}

.mute-pro-spaces__title em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.mute-pro-spaces__stack {
  display: flex;
  flex-direction: column;
  gap: 96px;
}

.mute-pro-spaces__card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 64px;
  align-items: stretch;
}

.mute-pro-spaces__card--flip {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.mute-pro-spaces__card--flip .mute-pro-spaces__media { order: 2; }
.mute-pro-spaces__card--flip .mute-pro-spaces__body { order: 1; }

.mute-pro-spaces__media {
  position: relative;
}

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

.mute-pro-spaces__placeholder {
  position: relative;
  background: rgba(15, 52, 61, 0.08);
  width: 100%;
  height: 100%;
  min-height: 320px;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.mute-pro-spaces__placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg,
    rgba(15, 52, 61, 0.05) 0 1px,
    transparent 1px 18px);
}

.mute-pro-spaces__ph-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  text-align: center;
  padding: 0 24px;
  max-width: 90%;
  line-height: 2;
}

.mute-pro-spaces__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 8px 0;
}

.mute-pro-spaces__card-overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute-muted);
  margin: 0;
}

.mute-pro-spaces__card-title {
  font-family: var(--mute-sans);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--mute-teal);
  margin: 0;
  text-wrap: balance;
}

.mute-pro-spaces__card-title em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
}

.mute-pro-spaces__card-desc {
  font-size: 14px;
  color: var(--mute-muted);
  line-height: 1.65;
  margin: 0;
  max-width: 46ch;
}

.mute-pro-spaces__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--mute-hair-soft);
  margin-top: 8px;
}

.mute-pro-spaces__spec {
  padding: 18px 16px 0 0;
  border-right: 1px solid var(--mute-hair-soft);
}

.mute-pro-spaces__spec:last-child {
  border-right: 0;
  padding-right: 0;
}

.mute-pro-spaces__spec-val {
  font-family: var(--mute-sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1D9E75;
  line-height: 1.1;
}

.mute-pro-spaces__spec-lab {
  margin-top: 6px;
  font-family: var(--mute-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute-muted);
}

.mute-pro-spaces__link {
  font-family: var(--mute-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute-teal);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--mute-teal);
  align-self: flex-start;
  margin-top: 6px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.mute-pro-spaces__link:hover { opacity: 0.7; }


/* ------------------------------------------
   PRO PROBLEM / SOLUTION
   ------------------------------------------ */

.mute-pro-problem {
  background-color: var(--mute-cream);
  padding: 80px 0;
  border-bottom: 1px solid var(--mute-hair-soft);
}

.mute-pro-problem__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
}

.mute-pro-problem__header {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}

.mute-pro-problem__header-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mute-pro-problem__header-right {
  display: flex;
  align-items: flex-end;
}

.mute-pro-problem__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute-muted);
  margin: 0;
}

.mute-pro-problem__title {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
  color: var(--mute-teal);
}

.mute-pro-problem__title em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.mute-pro-problem__header-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mute-muted);
  margin: 0;
}

.mute-pro-problem__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.mute-pro-problem__card {
  border: 1px solid var(--mute-hair-soft);
  background: rgba(255, 255, 255, 0.35);
  padding: 28px 28px 24px;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 24px;
  align-items: center;
}

.mute-pro-problem__card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.mute-pro-problem__card-num {
  font-family: var(--mute-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--mute-muted);
}

.mute-pro-problem__card-title {
  font-family: var(--mute-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--mute-teal);
}

.mute-pro-problem__card-desc {
  font-size: 13.5px;
  color: var(--mute-muted);
  line-height: 1.55;
  margin: 0;
}

.mute-pro-problem__card-diagram {
  width: 260px;
  flex-shrink: 0;
}

.mute-pro-problem__card-diagram img {
  width: 100%;
  height: auto;
  display: block;
}


/* ------------------------------------------
   PRO SERIES / USE CASES
   ------------------------------------------ */

.mute-pro-series {
  background-color: var(--mute-ivory);
  padding: 80px 0;
  border-bottom: 1px solid var(--mute-hair-soft);
}

.mute-pro-series__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
}

.mute-pro-series__header {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}

.mute-pro-series__header-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 760px;
}

.mute-pro-series__header-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.mute-pro-series__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute-muted);
  margin: 0;
}

.mute-pro-series__title {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
  color: var(--mute-teal);
}

.mute-pro-series__title em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.mute-pro-series__header-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mute-muted);
  max-width: 380px;
  margin: 0;
  text-align: left;
}

.mute-pro-series__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--mute-hair-soft);
}

.mute-pro-series__card {
  padding: 32px;
  border-right: 1px solid var(--mute-hair-soft);
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-bottom: 1px solid var(--mute-hair-soft);
}

.mute-pro-series__card:last-child {
  border-right: 0;
}

.mute-pro-series__tag {
  display: inline-block;
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--mute-hair);
  color: var(--mute-teal);
  align-self: flex-start;
}

.mute-pro-series__card-title {
  font-family: var(--mute-sans);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.1;
  color: var(--mute-teal);
}

.mute-pro-series__card-title em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
}

.mute-pro-series__card-body {
  font-size: 13px;
  color: var(--mute-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 34ch;
}

.mute-pro-series__outcomes {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-top: 8px;
  line-height: 1.7;
}

.mute-pro-series__room {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute-teal);
  padding-top: 16px;
  border-top: 1px solid var(--mute-hair-soft);
  margin-top: auto;
}

.mute-pro-series__link {
  font-family: var(--mute-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute-teal);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--mute-teal);
  align-self: flex-start;
  text-decoration: none;
  transition: opacity 0.2s;
}

.mute-pro-series__link:hover { opacity: 0.7; }


/* ------------------------------------------
   PRO KITS / COMING SOON
   ------------------------------------------ */

.mute-pro-kits {
  background-color: var(--mute-teal);
  color: var(--mute-ivory);
  padding: 80px 0;
  border-bottom: 1px solid var(--mute-hair-on-dark-soft);
}

.mute-pro-kits__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
}

.mute-pro-kits__header {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 48px;
}

.mute-pro-kits__header-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mute-pro-kits__header-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.mute-pro-kits__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute-muted-on-dark);
  margin: 0;
}

.mute-pro-kits__title {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
  color: var(--mute-ivory);
}

.mute-pro-kits__title em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.mute-pro-kits__header-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mute-muted-on-dark);
  max-width: 380px;
  margin: 0;
}

.mute-pro-kits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mute-pro-kits__card {
  background: rgba(245, 240, 232, 0.03);
  border: 1px solid var(--mute-hair-on-dark-soft);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  min-height: 420px;
}

.mute-pro-kits__badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--mute-ivory);
  color: var(--mute-teal);
  font-family: var(--mute-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 7px 12px;
}

.mute-pro-kits__tier {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
}

.mute-pro-kits__name {
  font-family: var(--mute-sans);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--mute-ivory);
  margin: 0;
  line-height: 1;
}

.mute-pro-kits__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--mute-ivory);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--mute-hair-on-dark-soft);
}

.mute-pro-kits__price-num {
  font-family: var(--mute-sans);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.mute-pro-kits__price-cur {
  font-family: var(--mute-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--mute-muted-on-dark);
}

.mute-pro-kits__includes {
  font-family: var(--mute-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-muted-on-dark);
  line-height: 1.9;
}

.mute-pro-kits__room {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-ivory);
  padding-top: 18px;
  border-top: 1px solid var(--mute-hair-on-dark-soft);
}

.mute-pro-kits__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: 13px 24px;
  border: 1px solid var(--mute-hair-on-dark);
  color: var(--mute-ivory);
  font-family: var(--mute-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  line-height: 1;
}

.mute-pro-kits__btn:hover {
  background-color: var(--mute-ivory);
  color: var(--mute-teal);
  border-color: var(--mute-ivory);
}

.mute-pro-kits__footer {
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid var(--mute-hair-on-dark-soft);
  gap: 24px;
  flex-wrap: wrap;
}

.mute-pro-kits__footer-text {
  color: var(--mute-ivory);
  font-size: 18px;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 520px;
}

.mute-pro-kits__footer-text em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
}

.mute-pro-kits__footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background-color: var(--mute-ivory);
  color: var(--mute-teal);
  text-decoration: none;
  font-family: var(--mute-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background-color 0.3s ease;
  line-height: 1;
}

.mute-pro-kits__footer-btn:hover {
  background-color: #fff;
}

.mute-pro-kits__wa-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25D366;
  display: inline-block;
  flex: 0 0 8px;
}


/* ------------------------------------------
   PRO ELEMENTS / BUILDING BLOCKS
   ------------------------------------------ */

.mute-pro-elements {
  background-color: var(--mute-ivory);
  padding: 80px 0;
  border-bottom: 1px solid var(--mute-hair-soft);
}

.mute-pro-elements__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
}

.mute-pro-elements__header {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}

.mute-pro-elements__header-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mute-pro-elements__header-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.mute-pro-elements__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute-muted);
  margin: 0;
}

.mute-pro-elements__title {
  font-family: var(--mute-sans);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
  color: var(--mute-teal);
}

.mute-pro-elements__title em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.mute-pro-elements__header-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mute-muted);
  max-width: 380px;
  margin: 0;
}

.mute-pro-elements__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.mute-pro-elements__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mute-pro-elements__card-image {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.mute-pro-elements__card-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 3/5;
}

.mute-pro-elements__placeholder {
  position: relative;
  background: rgba(15, 52, 61, 0.08);
  aspect-ratio: 3/5;
  overflow: hidden;
}

.mute-pro-elements__placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg,
    rgba(15, 52, 61, 0.05) 0 1px,
    transparent 1px 18px);
}

.mute-pro-elements__ph-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  text-align: center;
  padding: 0 24px;
  max-width: 90%;
  line-height: 2;
}

.mute-pro-elements__num {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--mute-muted);
}

.mute-pro-elements__name {
  font-family: var(--mute-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--mute-teal);
}

.mute-pro-elements__name em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
}

.mute-pro-elements__sub {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin-top: -6px;
}

.mute-pro-elements__desc {
  font-size: 13px;
  color: var(--mute-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 32ch;
}

.mute-pro-elements__meta {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--mute-hair-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-muted);
}

.mute-pro-elements__meta strong {
  color: var(--mute-teal);
  font-weight: 500;
}


/* ------------------------------------------
   PRO CONSULTATION BAR
   ------------------------------------------ */

.mute-pro-consult {
  background-color: var(--mute-ivory);
  padding: 36px 0;
  border-bottom: 1px solid var(--mute-hair-soft);
}

.mute-pro-consult__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  text-align: center;
}

.mute-pro-consult__text {
  margin: 0;
  font-family: var(--mute-sans);
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--mute-teal);
}

.mute-pro-consult__text em {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
}

.mute-pro-consult__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background-color: var(--mute-teal);
  color: var(--mute-ivory);
  text-decoration: none;
  font-family: var(--mute-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background-color 0.3s ease;
  line-height: 1;
}

.mute-pro-consult__btn:hover {
  background-color: var(--mute-teal-deep);
}


/* ------------------------------------------
   PRO SECTIONS — RESPONSIVE
   ------------------------------------------ */

@media (max-width: 1100px) {
  .mute-pro-elements__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1000px) {
  .mute-pro-spaces__card,
  .mute-pro-spaces__card--flip {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .mute-pro-spaces__card--flip .mute-pro-spaces__media { order: 1; }
  .mute-pro-spaces__card--flip .mute-pro-spaces__body { order: 2; }

  .mute-pro-spaces__placeholder {
    min-height: 280px;
    aspect-ratio: 16/9;
  }

  .mute-pro-spaces__stack { gap: 64px; }
}

@media (max-width: 1080px) {
  .mute-pro-problem__cards {
    grid-template-columns: 1fr;
  }
  .mute-pro-problem__header {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 750px) {
  .mute-pro-hero { padding: 64px 0 48px; }
  .mute-pro-spaces,
  .mute-pro-problem,
  .mute-pro-series,
  .mute-pro-kits,
  .mute-pro-elements { padding: 48px 0; }

  .mute-pro-hero__inner,
  .mute-pro-problem__header,
  .mute-pro-problem__cards,
  .mute-pro-series__header,
  .mute-pro-series__grid,
  .mute-pro-kits__header,
  .mute-pro-kits__grid,
  .mute-pro-elements__header,
  .mute-pro-elements__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .mute-pro-hero__inner,
  .mute-pro-spaces__inner,
  .mute-pro-problem__inner,
  .mute-pro-series__inner,
  .mute-pro-kits__inner,
  .mute-pro-elements__inner,
  .mute-pro-consult__inner {
    padding: 0 1.5rem;
  }

  .mute-pro-problem__card {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .mute-pro-problem__card-diagram {
    width: 100%;
    max-width: 280px;
  }

  .mute-pro-series__header { gap: 20px; margin-bottom: 32px; }
  .mute-pro-series__header-right { justify-content: flex-start; }
  .mute-pro-kits__header { gap: 20px; }
  .mute-pro-kits__header-right { justify-content: flex-start; }
  .mute-pro-elements__header { gap: 20px; margin-bottom: 32px; }
  .mute-pro-elements__header-right { justify-content: flex-start; }

  .mute-pro-hero__stats {
    grid-template-columns: 1fr;
    border-top: 1px solid var(--mute-hair-on-dark);
  }

  .mute-pro-hero__stat {
    border-right: 0;
    border-bottom: 1px solid var(--mute-hair-on-dark);
    padding: 20px 0;
  }

  .mute-pro-hero__stat:last-child { border-bottom: 0; }

  .mute-pro-series__card {
    border-right: 0;
    border-bottom: 1px solid var(--mute-hair-soft);
    padding: 32px 0;
  }

  .mute-pro-series__card:last-child { border-bottom: 0; }

  .mute-pro-kits__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .mute-pro-consult__text { font-size: 18px; }
  .mute-pro-consult__inner { flex-direction: column; gap: 20px; }
}









/* ============================================
   MUTE WOOD — Landing Page Sections
   Slat, Perforated, Hybrid, Finishes
   ============================================ */

/* ---------- SHARED: Section header ---------- */
.mute-wood-slat__header,
.mute-wood-perf__header,
.mute-wood-hybrid__header,
.mute-wood-finishes__header { display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:end;margin-bottom:56px }
.mute-wood-slat__header-left,
.mute-wood-perf__header-left,
.mute-wood-hybrid__header-left,
.mute-wood-finishes__header-left { display:flex;flex-direction:column;gap:24px;max-width:760px }
.mute-wood-slat__header-right,
.mute-wood-perf__header-right,
.mute-wood-hybrid__header-right,
.mute-wood-finishes__header-right { display:flex;justify-content:flex-end;align-items:flex-end }
.mute-wood-slat__header-body,
.mute-wood-perf__header-body,
.mute-wood-hybrid__header-body,
.mute-wood-finishes__header-body { font-size:14px;line-height:1.65;color:var(--mute-muted);max-width:380px;margin:0;text-align:left }

/* ---------- SHARED: Overline + Title ---------- */
.mute-wood-slat__overline,
.mute-wood-perf__overline,
.mute-wood-hybrid__overline,
.mute-wood-finishes__overline { font-family:var(--mute-mono);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:0.2em;color:var(--mute-muted);margin:0 }
.mute-wood-slat__title,
.mute-wood-perf__title,
.mute-wood-hybrid__title,
.mute-wood-finishes__title { font-family:var(--mute-sans);font-weight:600;font-size:clamp(34px,4.4vw,60px);letter-spacing:-0.035em;line-height:1.04;margin:0;color:var(--mute-teal) }
.mute-wood-slat__title em,
.mute-wood-perf__title em,
.mute-wood-hybrid__title em,
.mute-wood-finishes__title em { font-family:var(--mute-serif);font-style:italic;font-weight:400;letter-spacing:-0.02em }

/* ---------- SHARED: Inner wrap ---------- */
.mute-wood-slat__inner,
.mute-wood-perf__inner,
.mute-wood-hybrid__inner,
.mute-wood-finishes__inner { max-width:var(--mute-max-width);margin:0 auto;padding:0 3rem }

/* ---------- SHARED: Section bg ---------- */
.mute-wood-slat { background:var(--mute-cream);padding:80px 0;border-bottom:1px solid var(--mute-hair-soft) }
.mute-wood-perf { background:var(--mute-ivory);padding:80px 0;border-bottom:1px solid var(--mute-hair-soft) }
.mute-wood-hybrid { background:var(--mute-cream);padding:80px 0;border-bottom:1px solid var(--mute-hair-soft) }
.mute-wood-finishes { background:var(--mute-ivory);padding:80px 0;border-bottom:1px solid var(--mute-hair-soft) }

/* ----------------------------------------
   SLAT GRID
   ---------------------------------------- */
.mute-wood-slat__grid { display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--mute-hair-soft);border-left:1px solid var(--mute-hair-soft) }
.mute-wood-slat__card { border-right:1px solid var(--mute-hair-soft);border-bottom:1px solid var(--mute-hair-soft);padding:24px 22px;display:flex;flex-direction:column;gap:18px;background:transparent }
.mute-wood-slat__diagram { aspect-ratio:1/1.18;width:100%;background:var(--mute-cream);border:1px solid var(--mute-hair-faint);position:relative;overflow:hidden }
.mute-wood-slat__diagram svg,
.mute-wood-slat__diagram img { width:100%;height:100%;display:block;object-fit:cover }
.mute-wood-slat__num { font-family:var(--mute-mono);font-size:10px;letter-spacing:0.22em;color:var(--mute-muted);text-transform:uppercase }
.mute-wood-slat__name { font-size:18px;font-weight:600;letter-spacing:-0.02em;margin:0;color:var(--mute-teal);line-height:1.15 }
.mute-wood-slat__name em { font-family:var(--mute-serif);font-style:italic;font-weight:400 }
.mute-wood-slat__spec { font-family:var(--mute-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mute-muted);margin-top:auto;padding-top:14px;border-top:1px solid var(--mute-hair-faint);line-height:1.7 }
.mute-wood-slat__spec b { color:var(--mute-teal);font-weight:500 }

/* ---- Spec bar (shared between slat + perf) ---- */
.mute-wood-slat__spec-bar,
.mute-wood-perf__spec-bar { display:grid;grid-template-columns:repeat(5,1fr);margin-top:64px;border-top:1px solid var(--mute-hair-soft);border-bottom:1px solid var(--mute-hair-soft) }
.mute-wood-perf__spec-bar { grid-template-columns:repeat(4,1fr) }
.mute-wood-slat__spec-cell,
.mute-wood-perf__spec-cell { padding:24px;border-right:1px solid var(--mute-hair-soft);display:flex;flex-direction:column;gap:8px }
.mute-wood-slat__spec-cell:last-child,
.mute-wood-perf__spec-cell:last-child { border-right:0 }
.mute-wood-slat__spec-cell-lab,
.mute-wood-perf__spec-cell-lab { font-family:var(--mute-mono);font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--mute-muted) }
.mute-wood-slat__spec-cell-val,
.mute-wood-perf__spec-cell-val { font-family:var(--mute-sans);font-size:18px;font-weight:500;letter-spacing:-0.015em;color:var(--mute-teal);line-height:1.15 }
.mute-wood-slat__spec-cell-val--green,
.mute-wood-perf__spec-cell-val--green { color:var(--mute-green) }

/* ---- Cross-section (shared) ---- */
.mute-wood-slat__cross,
.mute-wood-perf__cross { margin-top:48px;padding-top:48px;border-top:1px solid var(--mute-hair-soft);display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center }
.mute-wood-slat__cross-text,
.mute-wood-perf__cross-text { display:flex;flex-direction:column;gap:18px;max-width:42ch }
.mute-wood-slat__cross-title,
.mute-wood-perf__cross-title { font-size:24px;font-weight:600;letter-spacing:-0.02em;margin:0;color:var(--mute-teal);line-height:1.15 }
.mute-wood-slat__cross-title em,
.mute-wood-perf__cross-title em { font-family:var(--mute-serif);font-style:italic;font-weight:400 }
.mute-wood-slat__cross-body,
.mute-wood-perf__cross-body { font-size:13px;color:var(--mute-muted);margin:0;line-height:1.65;max-width:42ch }
.mute-wood-slat__cross-callout { display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:14px 18px;background:rgba(29,158,117,0.06);border-left:3px solid var(--mute-green);font-family:var(--mute-mono);font-size:11px;letter-spacing:0.1em;color:var(--mute-green);line-height:1.5;font-weight:500 }
.mute-wood-slat__cross-callout-dot { width:6px;height:6px;background:var(--mute-green);flex:0 0 6px;margin-top:4px }
.mute-wood-perf__cross-link { font-family:var(--mute-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--mute-teal);display:inline-flex;align-items:center;gap:8px;padding-bottom:4px;border-bottom:1px solid var(--mute-teal);align-self:flex-start;margin-top:6px;text-decoration:none;transition:opacity 0.2s }
.mute-wood-perf__cross-link:hover { opacity:0.7 }
.mute-wood-slat__cross-diagram,
.mute-wood-perf__cross-diagram { background:var(--mute-ivory);border:1px solid var(--mute-hair-faint);aspect-ratio:5/3;width:100%;position:relative }
.cream .mute-wood-slat__cross-diagram { background:var(--mute-cream) }
.mute-wood-slat__cross-diagram svg,
.mute-wood-perf__cross-diagram svg { width:100%;height:100%;display:block }

/* ----------------------------------------
   PERFORATED GRID
   ---------------------------------------- */
.mute-wood-perf__grid { display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--mute-hair-soft);border-left:1px solid var(--mute-hair-soft) }
.mute-wood-perf__card { border-right:1px solid var(--mute-hair-soft);border-bottom:1px solid var(--mute-hair-soft);padding:28px 26px;display:flex;flex-direction:column;gap:24px }
.mute-wood-perf__diagram { aspect-ratio:1/1;width:100%;background:var(--mute-ivory);border:1px solid var(--mute-hair-faint);position:relative;overflow:hidden }
.mute-wood-perf__diagram svg,
.mute-wood-perf__diagram img { width:100%;height:100%;display:block;object-fit:cover }
.mute-wood-perf__num { font-family:var(--mute-mono);font-size:10px;letter-spacing:0.22em;color:var(--mute-muted);text-transform:uppercase }
.mute-wood-perf__name { font-size:20px;font-weight:600;letter-spacing:-0.02em;margin:0;color:var(--mute-teal);line-height:1.15 }
.mute-wood-perf__name em { font-family:var(--mute-serif);font-style:italic;font-weight:400 }
.mute-wood-perf__gap { font-family:var(--mute-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mute-muted);margin-top:-4px }
.mute-wood-perf__nrc-row { margin-top:auto;padding-top:22px;border-top:1px solid var(--mute-hair-faint);display:flex;justify-content:space-between;align-items:baseline }
.mute-wood-perf__nrc { font-family:var(--mute-sans);font-size:22px;font-weight:500;letter-spacing:-0.02em;color:var(--mute-green);line-height:1 }
.mute-wood-perf__nrc-lab { font-family:var(--mute-mono);font-size:9.5px;letter-spacing:0.22em;color:var(--mute-muted);text-transform:uppercase }
.mute-wood-perf__class { font-family:var(--mute-mono);font-size:10px;letter-spacing:0.18em;color:var(--mute-teal);text-transform:uppercase }

/* ----------------------------------------
   HYBRID
   ---------------------------------------- */
.mute-wood-hybrid__pulse { width:6px;height:6px;background:var(--mute-green);display:inline-block;margin-right:8px;vertical-align:1px }
.mute-wood-hybrid__grid { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start }
.mute-wood-hybrid__diagram { aspect-ratio:5/4;background:var(--mute-ivory);border:1px solid var(--mute-hair-soft);width:100%;position:relative }
.cream .mute-wood-hybrid__diagram { background:#f3ebdc }
.mute-wood-hybrid__diagram svg,
.mute-wood-hybrid__diagram img { width:100%;height:100%;display:block;object-fit:contain }
.mute-wood-hybrid__body { display:flex;flex-direction:column;gap:24px;padding-top:8px }
.mute-wood-hybrid__pill { display:inline-flex;align-items:center;gap:10px;font-family:var(--mute-mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--mute-green);padding:6px 12px;border:1px solid var(--mute-green);align-self:flex-start }
.mute-wood-hybrid__pill-dot { width:6px;height:6px;background:var(--mute-green);display:inline-block }
.mute-wood-hybrid__desc { font-size:15px;line-height:1.65;color:var(--mute-muted);max-width:42ch;margin:0 }
.mute-wood-hybrid__compare { display:grid;grid-template-columns:1fr 1fr;margin-top:8px;border-top:1px solid var(--mute-hair-soft) }
.mute-wood-hybrid__compare > div { padding:24px 24px 24px 0;border-right:1px solid var(--mute-hair-soft);display:flex;flex-direction:column;gap:8px }
.mute-wood-hybrid__compare > div:last-child { border-right:0;padding-left:24px;padding-right:0 }
.mute-wood-hybrid__comp-lab { font-family:var(--mute-mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--mute-muted) }
.mute-wood-hybrid__comp-val { font-family:var(--mute-sans);font-size:32px;font-weight:500;letter-spacing:-0.025em;color:var(--mute-teal);line-height:1 }
.mute-wood-hybrid__comp-val--green { color:var(--mute-green) }
.mute-wood-hybrid__comp-cap { font-family:var(--mute-serif);font-style:italic;font-size:16px;color:var(--mute-teal);margin-top:8px;line-height:1.3 }
.mute-wood-hybrid__btn { display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border:1px solid var(--mute-hair);color:var(--mute-teal);font-family:var(--mute-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;text-decoration:none;transition:background 0.2s,color 0.2s;line-height:1;align-self:flex-start;margin-top:8px }
.mute-wood-hybrid__btn:hover { background:var(--mute-teal);color:var(--mute-ivory);border-color:var(--mute-teal) }

/* ----------------------------------------
   FINISHES / VENEERS
   ---------------------------------------- */
.mute-wood-finishes__grid { display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--mute-hair-soft);border-left:1px solid var(--mute-hair-soft) }
.mute-wood-finishes__card { border-right:1px solid var(--mute-hair-soft);border-bottom:1px solid var(--mute-hair-soft);padding:20px 20px 22px;display:flex;flex-direction:column;gap:14px }
.mute-wood-finishes__swatch { aspect-ratio:1/1;width:100%;border:1px solid var(--mute-hair-faint);position:relative;overflow:hidden }
.mute-wood-finishes__swatch--custom { background:repeating-linear-gradient(45deg,rgba(15,52,61,0.10) 0 1px,transparent 1px 12px),var(--mute-ivory);display:flex;align-items:center;justify-content:center }
.mute-wood-finishes__plus { font-family:var(--mute-sans);font-size:36px;font-weight:300;color:var(--mute-teal) }
.mute-wood-finishes__name { font-size:14px;font-weight:500;letter-spacing:-0.01em;color:var(--mute-teal);margin:0;line-height:1.2 }
.mute-wood-finishes__code { font-family:var(--mute-mono);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--mute-muted) }
.mute-wood-finishes__custom-desc { font-family:var(--mute-mono);font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mute-muted);line-height:1.6 }
.mute-wood-finishes__footer { margin-top:48px;padding-top:32px;border-top:1px solid var(--mute-hair-soft);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap }
.mute-wood-finishes__footer-text { margin:0;font-size:20px;letter-spacing:-0.02em;color:var(--mute-teal);max-width:42ch }
.mute-wood-finishes__footer-text em { font-family:var(--mute-serif);font-style:italic;font-weight:400 }
.mute-wood-finishes__footer-btn { display:inline-flex;align-items:center;gap:10px;padding:13px 24px;background:var(--mute-teal);color:var(--mute-ivory);text-decoration:none;font-family:var(--mute-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;transition:background 0.3s;line-height:1 }
.mute-wood-finishes__footer-btn:hover { background:var(--mute-teal-deep) }

/* ----------------------------------------
   RESPONSIVE
   ---------------------------------------- */
@media (max-width:1100px) {
  .mute-wood-slat__grid { grid-template-columns:repeat(3,1fr) }
  .mute-wood-perf__grid { grid-template-columns:repeat(2,1fr) }
  .mute-wood-finishes__grid { grid-template-columns:repeat(3,1fr) }
  .mute-wood-slat__spec-bar { grid-template-columns:repeat(3,1fr) }
}
@media (max-width:900px) {
  .mute-wood-hybrid__grid,
  .mute-wood-slat__cross,
  .mute-wood-perf__cross { grid-template-columns:1fr;gap:32px }
}
@media (max-width:750px) {
  .mute-wood-slat,
  .mute-wood-perf,
  .mute-wood-hybrid,
  .mute-wood-finishes { padding:48px 0 }
  .mute-wood-slat__inner,
  .mute-wood-perf__inner,
  .mute-wood-hybrid__inner,
  .mute-wood-finishes__inner { padding:0 1.5rem }
  .mute-wood-slat__header,
  .mute-wood-perf__header,
  .mute-wood-hybrid__header,
  .mute-wood-finishes__header,
  .mute-wood-slat__grid,
  .mute-wood-perf__grid,
  .mute-wood-slat__spec-bar,
  .mute-wood-perf__spec-bar,
  .mute-wood-finishes__grid,
  .mute-wood-hybrid__compare { grid-template-columns:1fr;gap:24px }
  .mute-wood-slat__spec-cell,
  .mute-wood-perf__spec-cell { border-right:0;border-bottom:1px solid var(--mute-hair-soft) }
  .mute-wood-slat__spec-cell:last-child,
  .mute-wood-perf__spec-cell:last-child { border-bottom:0 }
  .mute-wood-hybrid__compare > div { border-right:0;border-bottom:1px solid var(--mute-hair-soft);padding:20px 0 !important }
  .mute-wood-hybrid__compare > div:last-child { border-bottom:0 }
  .mute-wood-finishes__footer { flex-direction:column;align-items:flex-start }
}
/* ── Felt grain overlay (swatches + colour-fill preview) ── */
section.mute-config .mute-config__swatch {
  position: relative;
  overflow: hidden;
}

section.mute-config .mute-config__swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 90px 90px;
  mix-blend-mode: soft-light;
  opacity: 0.9;
  pointer-events: none;
}

section.mute-config .mute-config__color-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  mix-blend-mode: soft-light;
  opacity: 0.85;
  pointer-events: none;
}

/* ============================================
   CASE STUDY PAGE (v2 — Claude Design port)
   ============================================ */

.mute-case {
  background: var(--mute-ivory);
  color: var(--mute-teal);
  font-family: var(--mute-sans);
}

.mute-case__wrap {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 0 3rem;
}

.mute-case__sec { padding: 80px 0; }
.mute-case__sec--hero { padding: 64px 0 56px; }
.mute-case__sec--tl { padding-top: 0; }

.mute-case__overline {
  font-family: var(--mute-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--mute-muted);
}

.mute-case__overline--on-dark { color: rgba(245, 240, 232, 0.55); }

.mute-case__headline {
  font-family: var(--mute-sans);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
  color: var(--mute-teal);
}

.mute-case__headline .it {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.mute-case__headline--hero { font-size: clamp(36px, 5.5vw, 72px); max-width: 16ch; }
.mute-case__headline--sec { font-size: clamp(26px, 3.5vw, 48px); max-width: 18ch; }

.mute-case__hero-head {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 56px;
}

.mute-case__photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

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

.mute-case__photo-ph {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--mute-cream);
  border: 1px solid var(--mute-hair-soft);
  overflow: hidden;
}

.mute-case__photo-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(15,52,61,0.06) 0 1px, transparent 1px 16px);
}

.mute-case__photo-cap {
  position: absolute;
  left: 18px;
  bottom: 16px;
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  background: var(--mute-cream);
  padding: 6px 10px;
  border: 1px solid rgba(15,52,61,0.10);
}

.mute-case__intro { border-top: 1px solid var(--mute-hair-soft); padding: 0; }

.mute-case__intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  padding: 64px 0 80px;
}

.mute-case__lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--mute-muted);
  max-width: 36ch;
}

.mute-case__lead p { margin: 0; }
.mute-case__lead strong { color: var(--mute-teal); font-weight: 500; }

.mute-case__stats {
  border-top: 1px solid var(--mute-hair);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.mute-case__stat {
  padding: 22px 24px 26px 0;
  border-bottom: 1px solid var(--mute-hair-soft);
}

.mute-case__stat:nth-child(odd) { border-right: 1px solid var(--mute-hair-soft); padding-right: 24px; }
.mute-case__stat:nth-child(even) { padding-left: 28px; }
.mute-case__stat:nth-child(3),
.mute-case__stat:nth-child(4) { border-bottom: 0; }

.mute-case__stat-lab {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
}

.mute-case__stat-val {
  font-family: var(--mute-sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--mute-teal);
  margin-top: 12px;
  line-height: 1.2;
}

.mute-case__timeline {
  border-top: 1px solid var(--mute-hair-soft);
  margin-top: 40px;
  position: relative;
}

.mute-case__tl-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

.mute-case__tl-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  padding: 36px 0;
  border-bottom: 1px solid var(--mute-hair-soft);
  align-items: start;
}

.mute-case__tl-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mute-case__tl-step {
  font-family: var(--mute-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--mute-teal);
}

.mute-case__tl-date {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
}

.mute-case__tl-body { max-width: 560px; }

.mute-case__tl-title {
  font-family: var(--mute-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--mute-teal);
}

.mute-case__tl-title .it {
  font-family: var(--mute-serif);
  font-style: italic;
  font-weight: 400;
}

.mute-case__tl-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mute-muted);
}

.mute-case__tl-text p { margin: 0; }

.mute-case__approach {
  background: var(--mute-cream);
  border-top: 1px solid var(--mute-hair-soft);
  border-bottom: 1px solid var(--mute-hair-soft);
  padding: 80px 0;
}

.mute-case__approach-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 48px;
  max-width: 48ch;
}

.mute-case__drawing-panel {
  border: 1px solid var(--mute-hair);
  background: var(--mute-ivory);
  padding: 8px;
}

.mute-case__drawing-panel svg {
  width: 100%;
  height: auto;
  display: block;
}

.mute-case__drawing-panel .mcs-lab {
  font-family: var(--mute-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  fill: var(--mute-muted);
}

.mute-case__drawing-panel .mcs-lab--sm { font-size: 9.5px; }

.mute-case__drawing-cap {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin: 20px 0 0;
  line-height: 1.7;
  max-width: 60ch;
}

.mute-case__cta { padding: 80px 0; }

.mute-case__cta-panel {
  background: var(--mute-teal);
  padding: clamp(40px, 6vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.mute-case__cta-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mute-case__cta-title {
  color: var(--mute-ivory);
  font-size: clamp(26px, 3.5vw, 48px);
  max-width: 18ch;
}

.mute-case__cta-title .it { color: var(--mute-ivory); }

.mute-case__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--mute-ivory);
  color: var(--mute-teal);
  font-family: var(--mute-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 18px 30px;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.mute-case__cta-btn .arr { font-family: var(--mute-mono); font-weight: 400; }
.mute-case__cta-btn:hover { opacity: 0.88; }

@media screen and (max-width: 989px) {
  .mute-case__intro-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media screen and (max-width: 749px) {
  .mute-case__wrap { padding: 0 1.5rem; }
  .mute-case__sec { padding: 48px 0; }
  .mute-case__sec--hero { padding: 40px 0 32px; }
  .mute-case__sec--tl { padding-top: 0; }
  .mute-case__hero-head { gap: 20px; margin-bottom: 32px; }
  .mute-case__intro-grid { padding: 48px 0; gap: 40px; }
  .mute-case__tl-flow { display: none; }
  .mute-case__tl-row { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .mute-case__tl-meta { flex-direction: row; align-items: baseline; gap: 16px; }
  .mute-case__approach { padding: 48px 0; }
  .mute-case__drawing-cap { font-size: 11px; letter-spacing: 0.12em; }
  .mute-case__drawing-panel .mcs-lab { font-size: 14px; }
  .mute-case__cta { padding: 48px 0; }
  .mute-case__cta-panel { flex-direction: column; align-items: flex-start; gap: 28px; }
  .mute-case__cta-btn { width: 100%; justify-content: center; }
}

.mute-case__drawing-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   MUTE FOOTER
   ============================================ */

.mute-footer {
  background: var(--mute-cream);
  border-top: 1px solid var(--mute-hair-soft);
  font-family: var(--mute-sans);
}

.mute-footer__inner {
  max-width: var(--mute-max-width);
  margin: 0 auto;
  padding: 72px 3rem 32px;
}

.mute-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 3fr;
  gap: 64px;
  padding-bottom: 48px;
}

/* Brand */
.mute-footer__wordmark {
  font-family: var(--mute-sans);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--mute-teal);
  margin: 0 0 20px;
}

.mute-footer__tagline {
  font-family: var(--mute-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.45;
  color: var(--mute-teal);
  margin: 0 0 28px;
  max-width: 22ch;
}

.mute-footer__contact { display: flex; flex-direction: column; gap: 6px; }

.mute-footer__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mute-teal);
  text-decoration: none;
}
.mute-footer__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #3f7a52; display: inline-block;
}
.mute-footer__email {
  font-family: var(--mute-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--mute-muted);
  text-decoration: none;
}
.mute-footer__email:hover { color: var(--mute-teal); }

/* Columns */
.mute-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.mute-footer__col-title {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin: 0 0 20px;
}

.mute-footer__col-links { list-style: none; margin: 0; padding: 0; }
.mute-footer__col-links li { margin-bottom: 11px; }
.mute-footer__col-links a,
.mute-footer__col-links span {
  font-size: 14px;
  color: var(--mute-teal);
  text-decoration: none;
  transition: color 0.2s ease;
}
.mute-footer__col-links a:hover { color: var(--mute-muted); }

/* Showroom */
.mute-footer__address,
.mute-footer__hours {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mute-teal);
  margin: 0 0 16px;
}
.mute-footer__hours { color: var(--mute-muted); }

.mute-footer__social { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.mute-footer__social a {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-muted);
  text-decoration: none;
}
.mute-footer__social a:hover { color: var(--mute-teal); }

/* Bottom legal */
.mute-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 1px solid var(--mute-hair-soft);
  padding-top: 28px;
}

.mute-footer__copy {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-muted);
  margin: 0;
}

.mute-footer__legal { display: flex; gap: 28px; flex-wrap: wrap; }
.mute-footer__legal a {
  font-family: var(--mute-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-muted);
  text-decoration: none;
}
.mute-footer__legal a:hover { color: var(--mute-teal); }

@media screen and (max-width: 989px) {
  .mute-footer__top { grid-template-columns: 1fr; gap: 48px; }
  .mute-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}

@media screen and (max-width: 749px) {
  .mute-footer__inner { padding: 48px 1.5rem 28px; }
  .mute-footer__cols { grid-template-columns: 1fr 1fr; }
  .mute-footer__bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}