/* Materials page — materials.html */

@font-face {
  font-family: "AMORIA";
  src: url("../fonts/Amoria-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cheva Display";
  src: url("../fonts/ChevaDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* DaFont — Aroma Vintage ("Vintage Glamour" display face) */
@font-face {
  font-family: "Aroma Vintage";
  src: url("../fonts/AromaVintage-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Beat quote.css body:has(.page--quote){padding-top:0} — body clears fixed nav */
body.materials-page:has(main.materials-page) {
  padding-top: var(--nav-height);
}

.materials-page {
  --font-amoria: "AMORIA", "Brush Script MT", cursive;
  --font-aroma-vintage: "Aroma Vintage", "Libre Baskerville", Georgia, serif;
  --materials-grout-seam: var(--grey-light);
  --materials-zigzag-height: clamp(2.75rem, 5.5vw, 4.25rem);
  flex: 1;
}

@media (max-width: 767px) {
  .materials-page {
    --materials-zigzag-height: max(3.25rem, calc(100vw * 80 / 600));
  }
}

.materials-section {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.materials-section .container {
  max-width: var(--max);
}

/* Intro — light violet + star pattern (showcase paper / rancho sizing) */
.materials-section--intro {
  --materials-intro-violet: color-mix(in srgb, var(--lavender) 72%, white);
  --materials-intro-stars-size: 300px 300px;
  --materials-intro-stars-pos: 120px 20px;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  color: var(--ink);
  background-color: var(--materials-intro-violet);
  background-image: url("../img/pattern-stars.svg");
  background-size: var(--materials-intro-stars-size);
  background-position: var(--materials-intro-stars-pos);
  background-repeat: repeat;
}

.materials-section--intro .container {
  position: relative;
  z-index: 1;
}

/* Grout colors — solid seam band + gradient/sparkle below zigzag only */
.materials-section--grout {
  position: relative;
  isolation: isolate;
  overflow: visible;
  color: var(--ink);
  background-color: var(--materials-grout-seam);
}

.materials-section--grout .section-divider--zigzag {
  color: var(--materials-grout-seam);
  background: none;
  z-index: 2;
}

.materials-section--grout .container {
  position: relative;
  z-index: 1;
}

.materials-section--grout .sparkle-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--materials-zigzag-height);
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.materials-section--grout .sparkle-bg__dot {
  position: absolute;
  display: block;
  border-radius: 50%;
  animation: materials-sparkle-twinkle var(--sparkle-dur, 3s) ease-in-out infinite alternate;
  animation-delay: var(--sparkle-delay, 0s);
  box-shadow: 0 0 12px rgba(26, 75, 255, 0.65), 0 0 5px rgba(26, 75, 255, 0.45);
}

@keyframes materials-sparkle-twinkle {
  0% {
    opacity: 0.55;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.25);
  }
  100% {
    opacity: 0.75;
    transform: scale(0.95);
  }
}

/* Sparkle dot positions — mirrored from .collection-intro in collection.css */
.materials-section--grout .sparkle-bg__dot--1  { top: 8%;  left: 6%;   width: 4px; height: 4px; opacity: 0.88; --sparkle-dur: 2.8s; --sparkle-delay: 0.1s; background: rgba(26, 75, 255, 0.95); box-shadow: 0 0 11px rgba(26, 75, 255, 0.6); }
.materials-section--grout .sparkle-bg__dot--2  { top: 14%; left: 22%;  width: 3.5px; height: 3.5px; opacity: 0.82; --sparkle-dur: 3.4s; --sparkle-delay: 0.6s; background: rgba(26, 75, 255, 0.9); box-shadow: 0 0 12px rgba(26, 75, 255, 0.58); }
.materials-section--grout .sparkle-bg__dot--3  { top: 6%;  left: 41%;  width: 3.5px; height: 3.5px; opacity: 0.8; --sparkle-dur: 2.2s; --sparkle-delay: 1.2s; background: rgba(26, 75, 255, 0.88); box-shadow: 0 0 10px rgba(26, 75, 255, 0.52); }
.materials-section--grout .sparkle-bg__dot--4  { top: 18%; left: 58%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 4.1s; --sparkle-delay: 0.3s; background: rgba(26, 75, 255, 0.85); box-shadow: 0 0 9px rgba(26, 75, 255, 0.5); }
.materials-section--grout .sparkle-bg__dot--5  { top: 11%; left: 78%;  width: 4.5px; height: 4.5px; opacity: 0.9; --sparkle-dur: 3.1s; --sparkle-delay: 1.8s; background: rgba(26, 75, 255, 0.98); box-shadow: 0 0 12px rgba(26, 75, 255, 0.62); }
.materials-section--grout .sparkle-bg__dot--6  { top: 22%; left: 91%;  width: 3.5px; height: 3.5px; opacity: 0.84; --sparkle-dur: 2.6s; --sparkle-delay: 0.9s; background: rgba(26, 75, 255, 0.92); box-shadow: 0 0 11px rgba(26, 75, 255, 0.55); }
.materials-section--grout .sparkle-bg__dot--7  { top: 31%; left: 3%;   width: 3px; height: 3px; opacity: 0.76; --sparkle-dur: 3.8s; --sparkle-delay: 2.1s; background: rgba(26, 75, 255, 0.82); box-shadow: 0 0 9px rgba(26, 75, 255, 0.48); }
.materials-section--grout .sparkle-bg__dot--8  { top: 38%; left: 15%;  width: 3.5px; height: 3.5px; opacity: 0.86; --sparkle-dur: 2.9s; --sparkle-delay: 0.4s; background: rgba(26, 75, 255, 0.92); box-shadow: 0 0 10px rgba(26, 75, 255, 0.54); }
.materials-section--grout .sparkle-bg__dot--9  { top: 44%; left: 33%;  width: 3px; height: 3px; opacity: 0.74; --sparkle-dur: 4.3s; --sparkle-delay: 1.5s; background: rgba(26, 75, 255, 0.8); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.materials-section--grout .sparkle-bg__dot--10 { top: 52%; left: 52%;  width: 4.5px; height: 4.5px; opacity: 0.9; --sparkle-dur: 2.4s; --sparkle-delay: 0.7s; background: rgba(26, 75, 255, 0.96); box-shadow: 0 0 12px rgba(26, 75, 255, 0.58); }
.materials-section--grout .sparkle-bg__dot--11 { top: 47%; left: 68%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 3.6s; --sparkle-delay: 2.4s; background: rgba(26, 75, 255, 0.85); box-shadow: 0 0 9px rgba(26, 75, 255, 0.48); }
.materials-section--grout .sparkle-bg__dot--12 { top: 58%; left: 84%;  width: 3.5px; height: 3.5px; opacity: 0.84; --sparkle-dur: 2.7s; --sparkle-delay: 1.1s; background: rgba(26, 75, 255, 0.9); box-shadow: 0 0 10px rgba(26, 75, 255, 0.54); }
.materials-section--grout .sparkle-bg__dot--13 { top: 63%; left: 11%;  width: 3px; height: 3px; opacity: 0.8; --sparkle-dur: 3.9s; --sparkle-delay: 0.2s; background: rgba(26, 75, 255, 0.86); box-shadow: 0 0 10px rgba(26, 75, 255, 0.5); }
.materials-section--grout .sparkle-bg__dot--14 { top: 71%; left: 27%;  width: 4.5px; height: 4.5px; opacity: 0.92; --sparkle-dur: 2.5s; --sparkle-delay: 1.7s; background: rgba(26, 75, 255, 0.98); box-shadow: 0 0 12px rgba(26, 75, 255, 0.6); }
.materials-section--grout .sparkle-bg__dot--15 { top: 76%; left: 46%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 4.0s; --sparkle-delay: 0.8s; background: rgba(26, 75, 255, 0.82); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.materials-section--grout .sparkle-bg__dot--16 { top: 69%; left: 61%;  width: 3.5px; height: 3.5px; opacity: 0.84; --sparkle-dur: 3.2s; --sparkle-delay: 2.0s; background: rgba(26, 75, 255, 0.9); box-shadow: 0 0 10px rgba(26, 75, 255, 0.52); }
.materials-section--grout .sparkle-bg__dot--17 { top: 82%; left: 73%;  width: 3px; height: 3px; opacity: 0.76; --sparkle-dur: 2.3s; --sparkle-delay: 1.3s; background: rgba(26, 75, 255, 0.82); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.materials-section--grout .sparkle-bg__dot--18 { top: 88%; left: 88%;  width: 4.5px; height: 4.5px; opacity: 0.92; --sparkle-dur: 3.5s; --sparkle-delay: 0.5s; background: rgba(26, 75, 255, 0.98); box-shadow: 0 0 13px rgba(26, 75, 255, 0.62); }
.materials-section--grout .sparkle-bg__dot--19 { top: 28%; left: 72%;  width: 3px; height: 3px; opacity: 0.72; --sparkle-dur: 4.5s; --sparkle-delay: 2.6s; background: rgba(26, 75, 255, 0.78); box-shadow: 0 0 9px rgba(26, 75, 255, 0.44); }
.materials-section--grout .sparkle-bg__dot--20 { top: 85%; left: 4%;   width: 3px; height: 3px; opacity: 0.8; --sparkle-dur: 3.0s; --sparkle-delay: 1.9s; background: rgba(26, 75, 255, 0.86); box-shadow: 0 0 10px rgba(26, 75, 255, 0.5); }
.materials-section--grout .sparkle-bg__dot--21 { top: 35%; left: 88%;  width: 3.5px; height: 3.5px; opacity: 0.86; --sparkle-dur: 2.1s; --sparkle-delay: 0.15s; background: rgba(26, 75, 255, 0.92); box-shadow: 0 0 10px rgba(26, 75, 255, 0.54); }
.materials-section--grout .sparkle-bg__dot--22 { top: 56%; left: 38%;  width: 3px; height: 3px; opacity: 0.74; --sparkle-dur: 3.7s; --sparkle-delay: 2.2s; background: rgba(26, 75, 255, 0.8); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.materials-section--grout .sparkle-bg__dot--23 { top: 92%; left: 35%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 4.2s; --sparkle-delay: 1.0s; background: rgba(26, 75, 255, 0.82); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.materials-section--grout .sparkle-bg__dot--24 { top: 4%;  left: 65%;  width: 3.5px; height: 3.5px; opacity: 0.88; --sparkle-dur: 2.8s; --sparkle-delay: 1.6s; background: rgba(26, 75, 255, 0.94); box-shadow: 0 0 11px rgba(26, 75, 255, 0.56); }
.materials-section--grout .sparkle-bg__dot--25 { top: 10%; left: 48%;  width: 4px; height: 4px; opacity: 0.86; --sparkle-dur: 3.3s; --sparkle-delay: 0.35s; background: rgba(26, 75, 255, 0.92); box-shadow: 0 0 11px rgba(26, 75, 255, 0.56); }
.materials-section--grout .sparkle-bg__dot--26 { top: 16%; left: 35%;  width: 3px; height: 3px; opacity: 0.8; --sparkle-dur: 2.5s; --sparkle-delay: 1.4s; background: rgba(26, 75, 255, 0.86); box-shadow: 0 0 10px rgba(26, 75, 255, 0.5); }
.materials-section--grout .sparkle-bg__dot--27 { top: 20%; left: 12%;  width: 3.5px; height: 3.5px; opacity: 0.84; --sparkle-dur: 3.9s; --sparkle-delay: 0.55s; background: rgba(26, 75, 255, 0.9); box-shadow: 0 0 10px rgba(26, 75, 255, 0.54); }
.materials-section--grout .sparkle-bg__dot--28 { top: 25%; left: 55%;  width: 5px; height: 5px; opacity: 0.94; --sparkle-dur: 2.2s; --sparkle-delay: 2.3s; background: rgba(26, 75, 255, 1); box-shadow: 0 0 14px rgba(26, 75, 255, 0.65); }
.materials-section--grout .sparkle-bg__dot--29 { top: 30%; left: 42%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 4.0s; --sparkle-delay: 0.85s; background: rgba(26, 75, 255, 0.84); box-shadow: 0 0 9px rgba(26, 75, 255, 0.48); }
.materials-section--grout .sparkle-bg__dot--30 { top: 33%; left: 62%;  width: 3.5px; height: 3.5px; opacity: 0.82; --sparkle-dur: 3.1s; --sparkle-delay: 1.95s; background: rgba(26, 75, 255, 0.88); box-shadow: 0 0 10px rgba(26, 75, 255, 0.52); }
.materials-section--grout .sparkle-bg__dot--31 { top: 36%; left: 8%;   width: 4px; height: 4px; opacity: 0.88; --sparkle-dur: 2.7s; --sparkle-delay: 0.25s; background: rgba(26, 75, 255, 0.94); box-shadow: 0 0 11px rgba(26, 75, 255, 0.58); }
.materials-section--grout .sparkle-bg__dot--32 { top: 40%; left: 75%;  width: 3px; height: 3px; opacity: 0.76; --sparkle-dur: 3.6s; --sparkle-delay: 1.65s; background: rgba(26, 75, 255, 0.82); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.materials-section--grout .sparkle-bg__dot--33 { top: 42%; left: 20%;  width: 3.5px; height: 3.5px; opacity: 0.84; --sparkle-dur: 2.4s; --sparkle-delay: 2.55s; background: rgba(26, 75, 255, 0.9); box-shadow: 0 0 10px rgba(26, 75, 255, 0.54); }
.materials-section--grout .sparkle-bg__dot--34 { top: 45%; left: 90%;  width: 4.5px; height: 4.5px; opacity: 0.9; --sparkle-dur: 3.8s; --sparkle-delay: 0.45s; background: rgba(26, 75, 255, 0.96); box-shadow: 0 0 12px rgba(26, 75, 255, 0.6); }
.materials-section--grout .sparkle-bg__dot--35 { top: 48%; left: 5%;   width: 3px; height: 3px; opacity: 0.74; --sparkle-dur: 4.4s; --sparkle-delay: 1.25s; background: rgba(26, 75, 255, 0.8); box-shadow: 0 0 9px rgba(26, 75, 255, 0.44); }
.materials-section--grout .sparkle-bg__dot--36 { top: 50%; left: 45%;  width: 4px; height: 4px; opacity: 0.88; --sparkle-dur: 2.6s; --sparkle-delay: 0.75s; background: rgba(26, 75, 255, 0.94); box-shadow: 0 0 11px rgba(26, 75, 255, 0.58); }
.materials-section--grout .sparkle-bg__dot--37 { top: 53%; left: 28%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 3.5s; --sparkle-delay: 2.15s; background: rgba(26, 75, 255, 0.84); box-shadow: 0 0 9px rgba(26, 75, 255, 0.48); }
.materials-section--grout .sparkle-bg__dot--38 { top: 55%; left: 65%;  width: 3.5px; height: 3.5px; opacity: 0.82; --sparkle-dur: 2.9s; --sparkle-delay: 1.05s; background: rgba(26, 75, 255, 0.88); box-shadow: 0 0 10px rgba(26, 75, 255, 0.52); }
.materials-section--grout .sparkle-bg__dot--39 { top: 57%; left: 48%;  width: 5px; height: 5px; opacity: 0.96; --sparkle-dur: 2.0s; --sparkle-delay: 0.65s; background: rgba(26, 75, 255, 1); box-shadow: 0 0 14px rgba(26, 75, 255, 0.68); }
.materials-section--grout .sparkle-bg__dot--40 { top: 60%; left: 18%;  width: 3px; height: 3px; opacity: 0.76; --sparkle-dur: 4.1s; --sparkle-delay: 1.85s; background: rgba(26, 75, 255, 0.82); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.materials-section--grout .sparkle-bg__dot--41 { top: 62%; left: 82%;  width: 3.5px; height: 3.5px; opacity: 0.84; --sparkle-dur: 3.2s; --sparkle-delay: 0.95s; background: rgba(26, 75, 255, 0.9); box-shadow: 0 0 10px rgba(26, 75, 255, 0.54); }
.materials-section--grout .sparkle-bg__dot--42 { top: 65%; left: 38%;  width: 4px; height: 4px; opacity: 0.86; --sparkle-dur: 2.8s; --sparkle-delay: 2.35s; background: rgba(26, 75, 255, 0.92); box-shadow: 0 0 11px rgba(26, 75, 255, 0.56); }
.materials-section--grout .sparkle-bg__dot--43 { top: 67%; left: 55%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 3.7s; --sparkle-delay: 0.15s; background: rgba(26, 75, 255, 0.84); box-shadow: 0 0 9px rgba(26, 75, 255, 0.48); }
.materials-section--grout .sparkle-bg__dot--44 { top: 70%; left: 8%;   width: 3.5px; height: 3.5px; opacity: 0.82; --sparkle-dur: 2.3s; --sparkle-delay: 1.45s; background: rgba(26, 75, 255, 0.88); box-shadow: 0 0 10px rgba(26, 75, 255, 0.52); }
.materials-section--grout .sparkle-bg__dot--45 { top: 72%; left: 92%;  width: 4.5px; height: 4.5px; opacity: 0.9; --sparkle-dur: 4.0s; --sparkle-delay: 0.55s; background: rgba(26, 75, 255, 0.96); box-shadow: 0 0 12px rgba(26, 75, 255, 0.6); }
.materials-section--grout .sparkle-bg__dot--46 { top: 74%; left: 42%;  width: 3px; height: 3px; opacity: 0.76; --sparkle-dur: 3.4s; --sparkle-delay: 2.05s; background: rgba(26, 75, 255, 0.82); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.materials-section--grout .sparkle-bg__dot--47 { top: 77%; left: 18%;  width: 3.5px; height: 3.5px; opacity: 0.84; --sparkle-dur: 2.5s; --sparkle-delay: 1.15s; background: rgba(26, 75, 255, 0.9); box-shadow: 0 0 10px rgba(26, 75, 255, 0.54); }
.materials-section--grout .sparkle-bg__dot--48 { top: 79%; left: 58%;  width: 4px; height: 4px; opacity: 0.88; --sparkle-dur: 3.0s; --sparkle-delay: 0.35s; background: rgba(26, 75, 255, 0.94); box-shadow: 0 0 11px rgba(26, 75, 255, 0.58); }
.materials-section--grout .sparkle-bg__dot--49 { top: 81%; left: 32%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 4.2s; --sparkle-delay: 1.75s; background: rgba(26, 75, 255, 0.84); box-shadow: 0 0 9px rgba(26, 75, 255, 0.48); }
.materials-section--grout .sparkle-bg__dot--50 { top: 83%; left: 68%;  width: 3.5px; height: 3.5px; opacity: 0.82; --sparkle-dur: 2.7s; --sparkle-delay: 2.45s; background: rgba(26, 75, 255, 0.88); box-shadow: 0 0 10px rgba(26, 75, 255, 0.52); }
.materials-section--grout .sparkle-bg__dot--51 { top: 86%; left: 52%;  width: 5px; height: 5px; opacity: 0.94; --sparkle-dur: 2.1s; --sparkle-delay: 0.85s; background: rgba(26, 75, 255, 1); box-shadow: 0 0 14px rgba(26, 75, 255, 0.66); }
.materials-section--grout .sparkle-bg__dot--52 { top: 89%; left: 22%;  width: 3px; height: 3px; opacity: 0.76; --sparkle-dur: 3.8s; --sparkle-delay: 1.55s; background: rgba(26, 75, 255, 0.82); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.materials-section--grout .sparkle-bg__dot--53 { top: 91%; left: 78%;  width: 3.5px; height: 3.5px; opacity: 0.84; --sparkle-dur: 2.9s; --sparkle-delay: 0.25s; background: rgba(26, 75, 255, 0.9); box-shadow: 0 0 10px rgba(26, 75, 255, 0.54); }
.materials-section--grout .sparkle-bg__dot--54 { top: 94%; left: 48%;  width: 4px; height: 4px; opacity: 0.88; --sparkle-dur: 3.3s; --sparkle-delay: 2.25s; background: rgba(26, 75, 255, 0.94); box-shadow: 0 0 11px rgba(26, 75, 255, 0.58); }
.materials-section--grout .sparkle-bg__dot--55 { top: 96%; left: 12%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 4.3s; --sparkle-delay: 1.05s; background: rgba(26, 75, 255, 0.84); box-shadow: 0 0 9px rgba(26, 75, 255, 0.48); }
.materials-section--grout .sparkle-bg__dot--56 { top: 97%; left: 62%;  width: 3.5px; height: 3.5px; opacity: 0.82; --sparkle-dur: 2.6s; --sparkle-delay: 0.65s; background: rgba(26, 75, 255, 0.88); box-shadow: 0 0 10px rgba(26, 75, 255, 0.52); }

.materials-hero {
  text-align: left;
}

.materials-hero__title {
  margin: 0 0 1rem;
  font-family: var(--font-aroma-vintage);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--blue);
  text-transform: none;
}

.materials-hero__lede {
  margin: 0 0 1.25rem;
  max-width: 42rem;
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 600;
}

.materials-intro__text {
  margin: 0;
  max-width: 42rem;
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ink);
}

.materials-grout__heading {
  margin: 0 0 0.5rem;
  font-family: "Pirata One", "UnifrakturMaguntia", serif;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.04em;
  font-size: clamp(2.75rem, 6.5vw, 4.25rem);
  line-height: 1;
  color: var(--neon-orange);
  text-transform: lowercase;
}

.materials-grout__lede {
  margin: 0 0 2.5rem;
  max-width: 36rem;
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

.materials-grout-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .materials-grout-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .materials-grout-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 479px) {
  .materials-section--intro {
    --materials-intro-stars-size: 240px 240px;
    --materials-intro-stars-pos: 60px 10px;
  }
}

.materials-grout-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.materials-grout-card__image-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--white);
}

.materials-grout-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.materials-grout-card__body {
  padding: 1rem 1.125rem 1.25rem;
}

.materials-grout-card__name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--ink);
  text-transform: lowercase;
}

/* Section boundary spacing — zigzag overlap needs extra padding, not margin */
.materials-section--intro {
  padding-bottom: calc(clamp(3.5rem, 8vw, 6rem) + clamp(1.25rem, 2.5vw, 2rem));
}

.materials-section--grout {
  padding-top: calc(clamp(2.5rem, 6vw, 4.5rem) + clamp(0.75rem, 1.5vw, 1.25rem));
}

body.materials-page .materials-section--grout {
  padding-bottom: calc(clamp(3rem, 7vw, 5rem) + var(--cta-band-offset));
}

body.materials-page .cta-band {
  padding-top: clamp(5rem, 11vw, 7.5rem);
  padding-bottom: clamp(4rem, 9vw, 6.5rem);
}

body.materials-page .cta-band .cta-band__title {
  font-family: "Cheva Display", "Shrikhand", cursive;
  font-weight: 400;
  font-synthesis: none;
  color: var(--neon-yellow);
}

body.materials-page .cta-band .btn--yellow {
  background: var(--neon-yellow);
  color: var(--blue);
  border-color: transparent;
}

body.materials-page .cta-band .btn--outline {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}

body.materials-page .cta-band .btn--yellow:hover,
body.materials-page .cta-band .btn--yellow:focus-visible,
body.materials-page .cta-band .btn--yellow:active,
body.materials-page .cta-band .btn--outline:hover,
body.materials-page .cta-band .btn--outline:focus-visible,
body.materials-page .cta-band .btn--outline:active {
  background: var(--lavender);
  color: var(--blue);
  border-color: var(--lavender);
  box-shadow: none;
}