/* Each photographic product sits over one continuous white specification card. */
.materials.section-pad {
  position: relative; isolation: isolate; overflow: hidden;
  background: #f4f6f5; padding: clamp(26px, 4.5svh, 44px) 0;
}
.materials::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: url('assets/materials-canopy.webp') center top / cover no-repeat;
}
.materials::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #f5f7f5 0%, #f5f7f5f5 20%, #f5f7f588 39%, transparent 65%), linear-gradient(0deg, #f4f6f5 1%, #f4f6f5f0 36%, #f4f6f566 65%, transparent 100%);
}
.materials-composition.container { width: 92%; max-width: 1440px; }
.materials-comparison {
  --material-head-height: clamp(258px, 38svh, 330px);
  --material-row-height: 48px;
  --material-visual-offset: 42px;
  --material-caption-height: 77px;
  display: grid; grid-template-columns: minmax(0, 28fr) repeat(2, minmax(0, 36fr));
  grid-template-rows: var(--material-head-height) auto;
  column-gap: 14px;
}
.material-intro { grid-column: 1; grid-row: 1; min-width: 0; padding: 0 10px 16px 8px; }
.material-intro .eyebrow { font-size: 9px; letter-spacing: 1.5px; margin: 0 0 19px; }
.materials.section-pad .material-intro h2 { font-size: clamp(34px, 3.65vw, 59px); line-height: 1.04; letter-spacing: -2px; margin: 0 0 22px; }
.material-intro > p:not(.eyebrow) { max-width: 330px; color: #18383e; font-size: 13px; line-height: 1.55; margin: 0; }
.material-intro-rule { display: block; width: 58px; height: 4px; border-radius: 2px; background: #19a68b; margin-top: 19px; }
.material-criteria { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(4, var(--material-row-height)); padding-inline: 8px 12px; }
.material-criteria > div { display: flex; align-items: center; gap: 20px; border-bottom: 1px solid #b8cecf99; color: #173c43; font-size: 13px; font-weight: 600; }
.material-criteria > div:last-child { border-bottom: 0; }
.material-criteria svg { width: 24px; height: 24px; color: #188a83; stroke-width: 1.7; }
.material-icon-glass {
  display: inline-grid; place-items: center; flex: 0 0 36px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #527d7d3d; color: #188a83;
  background: linear-gradient(135deg, #ffffff88, #d1e9e333), #064c5a0f;
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
  backdrop-filter: blur(16px) saturate(1.18);
  box-shadow: 0 5px 18px #001c2a0c, inset 0 1px 0 #ffffffaa;
}
.material-criteria .material-icon-glass svg,
.material-features .material-icon-glass svg { width: 21px; height: 21px; color: inherit; stroke-width: 1.7; }
.material-card { position: relative; isolation: isolate; min-width: 0; grid-row: 1 / 3; }
.material-card:nth-of-type(1) { grid-column: 2; }
.material-card:nth-of-type(2) { grid-column: 3; }
.material-card::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(var(--material-visual-offset) + 26px) 3px 0;
  background: rgba(255, 255, 255, .95); border: 1px solid #ffffff;
  border-radius: 24px; box-shadow: 0 13px 32px #183f4b14;
}
.material-card-visual {
  height: calc(var(--material-head-height) - var(--material-visual-offset));
  margin-top: var(--material-visual-offset); border: 2px solid #ffffffd9;
  border-radius: 24px; overflow: hidden; background: #e1eaeb;
  box-shadow: 0 10px 24px #0e3c4815;
}
.material-card-photo { display: block; width: 100%; height: calc(100% - var(--material-caption-height)); object-fit: cover; object-position: center; }
.material-card-caption { display: flex; align-items: center; gap: 12px; height: var(--material-caption-height); padding: 12px 13px; background: linear-gradient(110deg, #0a5d62ef, #003d46f5); color: white; }
.material-sample { width: 24%; max-width: 100px; height: auto; flex-shrink: 0; }
.material-card-caption > div { border-left: 1px solid #ffffff8c; padding-left: 12px; min-width: 0; }
.material-card h3 { font-size: clamp(15px, 1.55vw, 25px); line-height: 1.12; letter-spacing: -.65px; font-weight: 500; margin: 0 0 9px; }
.material-card-caption p { margin: 0; font-size: 7px; letter-spacing: 1.6px; line-height: 1.45; color: #e5f3ee; }
.material-features { display: grid; grid-template-rows: repeat(4, var(--material-row-height)); margin: 0; padding: 0 18px; color: #20343d; }
.material-features > div { display: flex; align-items: center; min-width: 0; padding: 8px 4px; border-bottom: 1px solid #d9e4e4; }
.material-features > div:last-child { border-bottom: 0; }
.material-features dd { margin: 0; font-size: 13px; line-height: 1.4; overflow-wrap: break-word; }
.material-aluminum-note { display: grid; grid-template-columns: 19% 28px auto minmax(0, 1fr); align-items: center; gap: 17px; min-height: 63px; margin-top: 23px; overflow: hidden; border: 1.5px solid #fff; border-radius: 22px; background: linear-gradient(110deg, #eef6f4e8, #cfe5e9eb); box-shadow: 0 9px 24px #28454c0c; }
.material-aluminum-photo { height: 100%; min-height: 63px; background: url('assets/materials-compact.webp') center 42% / cover; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); }
.material-aluminum-check { color: #20a28f; width: 26px; height: 26px; }
.material-aluminum-note p { margin: 0; font-size: 13px; line-height: 1.45; }
.material-aluminum-title { font-weight: 600; white-space: nowrap; }
.material-aluminum-title em { font-family: Georgia, 'Times New Roman', serif; font-size: 1.25em; }
.material-aluminum-copy { border-left: 1px solid #08707b; padding: 6px 22px; }
@media (min-width: 761px) {
  .material-features dt { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .materials-comparison { --material-head-height: clamp(242px, 38svh, 288px); --material-row-height: 44px; --material-visual-offset: 32px; --material-caption-height: 67px; column-gap: 12px; }
  .material-intro .eyebrow { margin-bottom: 12px; }
  .materials.section-pad .material-intro h2 { font-size: clamp(34px, 3.25vw, 49px); margin-bottom: 14px; }
  .material-intro > p:not(.eyebrow) { font-size: 12px; line-height: 1.45; }
  .material-intro-rule { margin-top: 13px; height: 3px; width: 50px; }
  .material-card-caption { padding: 10px 12px; gap: 10px; }
  .material-card h3 { font-size: clamp(15px, 1.45vw, 23px); margin-bottom: 6px; }
  .material-card-caption p { font-size: 6px; letter-spacing: 1.4px; }
  .material-features dd, .material-criteria > div { font-size: 12px; }
  .material-criteria svg { width: 22px; height: 22px; }
  .material-criteria .material-icon-glass { flex-basis: 32px; width: 32px; height: 32px; }
  .material-criteria .material-icon-glass svg { width: 19px; height: 19px; }
  .material-aluminum-note { min-height: 56px; margin-top: 18px; gap: 13px; }
  .material-aluminum-photo { min-height: 56px; }
  .material-aluminum-note p { font-size: 12px; }
}
@media (min-width: 761px) and (max-width: 1050px) {
  .materials-comparison { grid-template-columns: minmax(0, 29fr) repeat(2, minmax(0, 35.5fr)); column-gap: 10px; }
  .materials.section-pad .material-intro h2 { font-size: 30px; letter-spacing: -1.5px; }
  .material-intro .eyebrow { font-size: 7px; letter-spacing: 1px; }
  .material-intro > p:not(.eyebrow) { font-size: 11px; }
  .material-card-caption { gap: 8px; padding: 10px; }
  .material-card-caption > div { padding-left: 8px; }
  .material-card h3 { font-size: 15px; letter-spacing: -.5px; }
  .material-card-caption p { font-size: 6px; letter-spacing: 1px; }
  .material-features { padding-inline: 12px; }
  .material-features dd, .material-criteria > div { font-size: 11px; }
  .material-criteria > div { gap: 12px; }
  .material-aluminum-note { grid-template-columns: 14% 24px auto minmax(0, 1fr); gap: 10px; }
  .material-aluminum-note p { font-size: 11px; }
  .material-aluminum-copy { padding-inline: 13px; }
}
@media (max-width: 760px) {
  .materials.section-pad { padding: 34px 0; }
  .materials-composition.container { width: 90%; }
  .materials::after { background: linear-gradient(90deg, #f5f7f5f0, #f5f7f5b8), linear-gradient(0deg, #f4f6f5 0%, transparent 100%); }
  .materials-comparison { --material-visual-offset: 0px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 22px 8px; }
  .material-intro { grid-column: 1 / -1; grid-row: 1; padding: 0; }
  .material-intro .eyebrow { font-size: 8px; margin-bottom: 13px; }
  .materials.section-pad .material-intro h2 { font-size: clamp(30px, 8.3vw, 43px); margin-bottom: 13px; letter-spacing: -1.5px; }
  .material-intro > p:not(.eyebrow) { font-size: 12px; max-width: 100%; line-height: 1.5; }
  .material-intro-rule { margin-top: 15px; height: 3px; width: 48px; }
  .material-criteria { display: none; }
  .material-card { grid-row: 2; }
  .material-card:nth-of-type(1) { grid-column: 1; }
  .material-card:nth-of-type(2) { grid-column: 2; }
  .material-card::before { inset: 24px 2px 0; border-radius: 17px; }
  .material-card-visual { height: auto; margin: 0; border-radius: 17px; border-width: 1.5px; }
  .material-card-photo { height: clamp(110px, 32vw, 170px); }
  .material-card-caption { height: auto; min-height: 116px; padding: 10px; flex-direction: column; gap: 7px; align-items: flex-start; }
  .material-sample { width: 54px; height: 31px; object-fit: contain; }
  .material-card-caption > div { border: 0; padding: 0; }
  .material-card h3 { font-size: clamp(13px, 3.6vw, 19px); letter-spacing: -.3px; line-height: 1.18; margin-bottom: 5px; }
  .material-card-caption p { font-size: 6px; letter-spacing: .9px; line-height: 1.5; }
  .material-features { padding: 0 10px; grid-template-rows: repeat(4, minmax(92px, auto)); }
  .material-features > div { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; padding: 12px 0; }
  .material-features dt { font-size: 10px; font-weight: 600; line-height: 1.4; color: #17656c; }
  .material-features dt { display: flex; align-items: center; gap: 6px; }
  .material-features .material-icon-glass { flex-basis: 28px; width: 28px; height: 28px; }
  .material-features .material-icon-glass svg { width: 16px; height: 16px; }
  .material-features dd { font-size: 11px; line-height: 1.45; }
  .material-aluminum-note { grid-template-columns: 22px minmax(0, 1fr); gap: 10px 12px; padding: 15px; min-height: 0; margin-top: 16px; border-radius: 17px; }
  .material-aluminum-photo { display: none; }
  .material-aluminum-check { width: 22px; height: 22px; }
  .material-aluminum-note p { font-size: 11px; }
  .material-aluminum-title { white-space: normal; }
  .material-aluminum-copy { grid-column: 2; padding: 0; border: 0; }
}