.materials-construction-theme { overflow-x: clip; background: var(--color-white); }
.materials-hero { position: relative; overflow: hidden; padding: clamp(2rem, 4vw, 4rem) 0; color: var(--color-white); background: var(--color-navy); }
.materials-hero::before, .materials-contact::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(50,188,222,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(50,188,222,.07) 1px, transparent 1px); background-size: 58px 58px; content: ""; mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.35) 68%, transparent); }
.materials-hero__grid { position: relative; display: grid; width: 100%; min-width: 0; grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr); border: 1px solid rgba(50,188,222,.3); }
.materials-hero__copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 5vw, 5.2rem); }
.materials-hero h1 { max-width: 730px; margin: 0; font-family: var(--font-display); font-size: clamp(3.15rem, 4.7vw, 5rem); line-height: .94; letter-spacing: -.03em; text-transform: uppercase; }
.materials-hero__copy > p:not(.eyebrow) { max-width: 680px; margin: 1.6rem 0 0; color: #bdd2df; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.75; }
.materials-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.button--outline-light { border-color: rgba(255,255,255,.5); color: var(--color-white); background: transparent; }
.button--outline-light:hover { border-color: var(--color-cyan); color: var(--color-navy); background: var(--color-cyan); }
.exploded-board { display: grid; min-width: 0; grid-template-rows: auto 1fr auto; min-height: 650px; overflow: hidden; padding: clamp(1.7rem, 3vw, 3rem); border-left: 1px solid rgba(50,188,222,.3); background: var(--color-dark-navy); }
.exploded-board__head { display: flex; justify-content: space-between; gap: 2rem; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(255,255,255,.18); font-size: .67rem; letter-spacing: .12em; text-transform: uppercase; }
.exploded-board__head span { color: var(--color-cyan); font-weight: 800; }
.exploded-board__head strong { font-size: .69rem; }
.exploded-paddle { display: flex; align-items: center; justify-content: center; gap: clamp(.75rem, 2vw, 1.5rem); min-width: 0; padding: 2.8rem .5rem; transform: rotate(-4deg); }
.exploded-paddle__blade { position: relative; width: 136px; height: 244px; flex: 0 0 auto; border: 2px solid var(--color-cyan); border-radius: 58% 22% 52% 34%; background: linear-gradient(135deg, rgba(50,188,222,.38), rgba(19,142,208,.08)); transform: rotate(-10deg); }
.exploded-paddle__blade::after { position: absolute; top: 37%; left: 50%; width: 2px; height: 52%; background: rgba(255,255,255,.45); content: ""; transform: rotate(-8deg); }
.exploded-paddle__blade i { position: absolute; top: -20px; right: 3px; width: 25px; height: 52px; border: 2px solid var(--color-cyan); border-bottom: 0; transform: rotate(12deg); }
.exploded-paddle__joint { width: 45px; height: 62px; flex: 0 0 auto; border: 2px solid var(--color-cyan); background: rgba(50,188,222,.12); }
.exploded-paddle__shaft { width: min(260px, 28vw); height: 20px; flex: 1 1 240px; border: 2px solid var(--color-cyan); background: repeating-linear-gradient(90deg, rgba(50,188,222,.22) 0 8px, transparent 8px 16px); }
.exploded-paddle__grip { width: 65px; height: 30px; flex: 0 0 auto; border: 2px solid var(--color-cyan); border-radius: 50% 50% 10% 10%; }
.exploded-paddle__gap { color: rgba(255,255,255,.4); font-family: var(--font-display); font-size: 1.7rem; }
.exploded-board ol { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.18); list-style: none; }
.exploded-board li { display: grid; gap: .35rem; min-width: 0; padding: 1.2rem .9rem; border-right: 1px solid rgba(255,255,255,.18); }
.exploded-board li:last-child { border-right: 0; }
.exploded-board li span { color: var(--color-cyan); font-family: var(--font-display); }
.exploded-board li strong { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.exploded-board li small { color: #9cb8c9; font-size: .63rem; line-height: 1.45; }
.materials-answer { padding: clamp(4.5rem, 8vw, 7rem) 0; background: var(--color-light-blue); }
.materials-answer__grid { display: grid; grid-template-columns: 180px minmax(320px, .9fr) minmax(360px, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.materials-answer h2, .component-anatomy h2, .material-details h2, .materials-matrix h2, .family-construction h2, .specification-sheet h2, .material-validation h2, .materials-faq h2, .materials-contact h2 { margin: 0; color: var(--color-navy); font-family: var(--font-display); font-size: clamp(2.55rem, 4vw, 4.15rem); line-height: .95; letter-spacing: -.025em; text-transform: uppercase; }
.materials-answer__grid > div p { margin: 0 0 1rem; color: var(--color-muted); font-size: 1.02rem; line-height: 1.75; }
.materials-answer__grid > div strong { color: var(--color-navy); }
.component-anatomy, .material-details, .materials-matrix, .family-construction, .specification-sheet, .material-validation, .materials-faq { padding: clamp(5rem, 9vw, 8rem) 0; }
.component-anatomy__layout { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(560px, 1.28fr); gap: clamp(3rem, 9vw, 9rem); align-items: start; }
.component-anatomy__intro { position: sticky; top: 110px; }
.component-anatomy__intro > p:not(.eyebrow) { margin: 1.4rem 0 1.8rem; color: var(--color-muted); line-height: 1.75; }
.component-ledger { margin: 0; padding: 0; border-top: 2px solid var(--color-navy); list-style: none; }
.component-ledger li { position: relative; display: grid; grid-template-columns: 72px 1fr 70px; gap: 1.5rem; align-items: start; min-height: 190px; padding: 2rem 0; border-bottom: 1px solid var(--color-line); }
.component-ledger li > span { color: var(--color-ocean); font-family: var(--font-display); font-size: 1.35rem; }
.component-ledger h3 { margin: 0 0 .8rem; color: var(--color-navy); font-family: var(--font-display); font-size: clamp(2rem, 3vw, 3rem); line-height: .95; text-transform: uppercase; }
.component-ledger p { max-width: 600px; margin: 0; color: var(--color-muted); line-height: 1.7; }
.component-ledger i { position: relative; width: 62px; height: 62px; border: 1px solid var(--color-line); border-radius: 50%; }
.component-ledger i::before, .component-ledger i::after { position: absolute; top: 50%; left: 50%; background: var(--color-ocean); content: ""; transform: translate(-50%,-50%); }
.component-ledger i::before { width: 26px; height: 2px; }
.component-ledger i::after { width: 2px; height: 26px; }
.material-details { color: var(--color-white); background: var(--color-navy); }
.material-details__heading, .family-construction__heading, .materials-faq__heading { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: clamp(3rem, 7vw, 7rem); align-items: end; margin-bottom: clamp(3rem, 6vw, 5rem); }
.material-details h2 { color: var(--color-white); }
.material-details__heading > p { margin: 0; color: #b9cedb; line-height: 1.75; }
.material-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.22); border-left: 1px solid rgba(255,255,255,.22); }
.material-detail-grid figure { margin: 0; border-right: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.material-detail-grid figure > div { display: grid; height: 390px; place-items: center; overflow: hidden; background: #f7fafb; }
.material-detail-grid img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.material-detail-grid figure:hover img { transform: scale(1.035); }
.material-detail-grid figcaption { display: grid; gap: .45rem; min-height: 160px; padding: 1.35rem; }
.material-detail-grid figcaption span { color: var(--color-cyan); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.material-detail-grid figcaption strong { font-family: var(--font-display); font-size: 1.45rem; line-height: 1; text-transform: uppercase; }
.material-detail-grid figcaption small { color: #b9cedb; line-height: 1.55; }
.materials-matrix { background: var(--color-light-blue); }
.materials-matrix__grid { display: grid; grid-template-columns: minmax(300px, .65fr) minmax(650px, 1.35fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; }
.materials-matrix__intro > p:not(.eyebrow) { margin: 1.4rem 0; color: var(--color-muted); line-height: 1.75; }
.terminology-note { margin-top: 2rem; padding: 1.5rem; border-left: 4px solid var(--color-cyan); background: var(--color-navy); }
.terminology-note strong { color: var(--color-cyan); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.terminology-note p { margin: .7rem 0 0; color: #c1d3df; font-size: .88rem; line-height: 1.65; }
.material-ledger { border-top: 2px solid var(--color-navy); }
.material-ledger__head, .material-ledger__row { display: grid; grid-template-columns: .75fr 1fr 1.15fr 1.35fr; }
.material-ledger__head { color: var(--color-white); background: var(--color-navy); }
.material-ledger__head span { padding: .8rem .9rem; border-right: 1px solid rgba(255,255,255,.18); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.material-ledger__row { border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); border-left: 1px solid var(--color-line); background: rgba(255,255,255,.72); }
.material-ledger__row > * { margin: 0; padding: 1.2rem .9rem; border-right: 1px solid var(--color-line); }
.material-ledger__row > *:last-child { border-right: 0; }
.material-ledger__row span { color: var(--color-ocean); font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.material-ledger__row strong { color: var(--color-navy); font-size: .82rem; line-height: 1.5; text-transform: uppercase; }
.material-ledger__row p { color: var(--color-muted); font-size: .78rem; line-height: 1.6; }
.family-construction__heading > p, .materials-faq__heading > p { margin: 0; color: var(--color-muted); line-height: 1.75; }
.family-table { overflow-x: auto; border-top: 2px solid var(--color-navy); }
.family-table table { width: 100%; min-width: 1050px; border-collapse: collapse; }
.family-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.family-table th, .family-table td { padding: 1.35rem 1.1rem; border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.family-table thead th { color: var(--color-white); background: var(--color-navy); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.family-table tbody th { width: 110px; color: var(--color-navy); font-family: var(--font-display); font-size: 1.65rem; text-transform: uppercase; }
.family-table td { color: var(--color-muted); font-size: .82rem; line-height: 1.6; }
.family-table a { color: var(--color-navy); font-weight: 800; white-space: nowrap; text-transform: uppercase; }
.family-table a span { color: var(--color-ocean); }
.family-construction__note { margin: 1.3rem 0 0; padding: 1rem 1.2rem; border-left: 3px solid var(--color-cyan); color: var(--color-muted); background: var(--color-light-blue); line-height: 1.65; }
.family-construction__note strong { color: var(--color-navy); }
.specification-sheet { color: var(--color-white); background: var(--color-dark-navy); }
.specification-sheet__grid { display: grid; grid-template-columns: minmax(320px, .75fr) minmax(560px, 1.25fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.specification-sheet h2 { color: var(--color-white); }
.specification-sheet__copy > p:not(.eyebrow) { margin: 1.5rem 0 2rem; color: #b9cedb; line-height: 1.75; }
.spec-card { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; border-top: 1px solid rgba(255,255,255,.22); border-left: 1px solid rgba(255,255,255,.22); }
.spec-card div { min-height: 170px; padding: 1.5rem; border-right: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.spec-card dt { color: var(--color-cyan); font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.spec-card dd { margin: 2rem 0 0; color: var(--color-white); font-family: var(--font-display); font-size: 1.35rem; line-height: 1.12; text-transform: uppercase; }
.material-validation { background: var(--color-light-blue); }
.material-validation__grid { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(600px, 1.2fr); gap: clamp(3rem, 8vw, 8rem); }
.material-validation ol { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; border-top: 2px solid var(--color-navy); list-style: none; }
.material-validation li { min-height: 300px; padding: 1.5rem; border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); background: rgba(255,255,255,.56); }
.material-validation li:first-child { border-left: 1px solid var(--color-line); }
.material-validation li > span { color: var(--color-ocean); font-family: var(--font-display); font-size: 1.25rem; }
.material-validation h3 { margin: 5rem 0 .8rem; color: var(--color-navy); font-family: var(--font-display); font-size: 1.75rem; text-transform: uppercase; }
.material-validation li p { margin: 0; color: var(--color-muted); font-size: .86rem; line-height: 1.65; }
.materials-faq__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-line); border-left: 1px solid var(--color-line); }
.materials-faq__grid article { min-height: 275px; padding: 1.7rem; border-right: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.materials-faq__grid article > span { color: var(--color-ocean); font-family: var(--font-display); }
.materials-faq__grid h3 { margin: 2.7rem 0 .75rem; color: var(--color-navy); font-size: .93rem; line-height: 1.35; letter-spacing: .02em; text-transform: uppercase; }
.materials-faq__grid p { margin: 0; color: var(--color-muted); font-size: .87rem; line-height: 1.65; }
.materials-contact { position: relative; overflow: hidden; padding: clamp(5rem, 9vw, 8rem) 0; color: var(--color-white); background: #0b3c70; }
.materials-contact__grid { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(480px, 1.18fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; }
.materials-contact h2 { color: var(--color-white); }
.materials-contact__copy > p:not(.eyebrow) { margin: 1.5rem 0 2rem; color: #c3d7e4; line-height: 1.75; }
.materials-contact__copy > div { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.materials-contact__copy a { padding-bottom: .3rem; border-bottom: 1px solid var(--color-cyan); color: var(--color-white); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.materials-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: clamp(1.4rem, 3vw, 2.4rem); border: 1px solid rgba(50,188,222,.55); color: var(--color-navy); background: var(--color-light-blue); box-shadow: 0 24px 64px rgba(5,30,53,.25); }
.materials-form__heading, .materials-form__wide { grid-column: 1 / -1; }
.materials-form__heading { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; padding-bottom: 1.15rem; border-bottom: 1px solid var(--color-line); }
.materials-form__heading > span { grid-column: 1 / -1; color: var(--color-ocean); font-size: .65rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.materials-form__heading strong { font-family: var(--font-display); font-size: 1.65rem; line-height: 1; text-transform: uppercase; }
.materials-form__heading small { align-self: end; color: var(--color-muted); font-size: .67rem; }
.materials-form label { display: grid; gap: .42rem; min-width: 0; font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.materials-form input, .materials-form select, .materials-form textarea { width: 100%; min-width: 0; border: 1px solid var(--color-line); border-radius: 0; color: var(--color-ink); background: var(--color-white); font-size: .9rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.materials-form input, .materials-form select { min-height: 48px; padding: .7rem .8rem; }
.materials-form textarea { min-height: 128px; padding: .8rem; resize: vertical; }
.materials-form input:focus, .materials-form select:focus, .materials-form textarea:focus { border-color: var(--color-ocean); outline: 2px solid rgba(50,188,222,.3); }
.materials-form button { width: 100%; }
@media (max-width: 1120px) {
  .materials-hero__grid, .materials-matrix__grid, .specification-sheet__grid, .material-validation__grid, .materials-contact__grid { grid-template-columns: 1fr; }
  .exploded-board { min-height: 560px; border-top: 1px solid rgba(50,188,222,.3); border-left: 0; }
  .materials-answer__grid { grid-template-columns: 150px 1fr; }
  .materials-answer__grid > div { grid-column: 2; }
  .component-anatomy__layout { grid-template-columns: minmax(280px, .65fr) minmax(460px, 1.35fr); gap: 3rem; }
  .material-detail-grid { grid-template-columns: repeat(2, 1fr); }
  .materials-faq__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .materials-hero { padding: 1.25rem 0; }
  .materials-hero__copy { padding: 2.3rem 1.3rem; }
  .materials-hero h1 { font-size: clamp(2.7rem, 11.5vw, 3.55rem); }
  .exploded-board { min-height: 0; padding: 1.4rem 1rem; }
  .exploded-paddle { gap: .45rem; padding: 2.5rem 0; }
  .exploded-paddle__blade { width: 72px; height: 130px; }
  .exploded-paddle__blade i { top: -14px; width: 16px; height: 33px; }
  .exploded-paddle__joint { width: 28px; height: 42px; }
  .exploded-paddle__shaft { width: 90px; height: 14px; flex-basis: 90px; }
  .exploded-paddle__grip { width: 37px; height: 23px; }
  .exploded-paddle__gap { font-size: 1rem; }
  .exploded-board ol { grid-template-columns: repeat(2, 1fr); }
  .exploded-board li:nth-child(2) { border-right: 0; }
  .exploded-board li:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.18); }
  .materials-answer__grid, .component-anatomy__layout, .material-details__heading, .family-construction__heading, .materials-faq__heading { grid-template-columns: 1fr; }
  .materials-answer__grid > div { grid-column: auto; }
  .materials-answer h2, .component-anatomy h2, .material-details h2, .materials-matrix h2, .family-construction h2, .specification-sheet h2, .material-validation h2, .materials-faq h2, .materials-contact h2 { font-size: clamp(2.35rem, 10.5vw, 3.2rem); }
  .component-anatomy__intro { position: static; }
  .component-ledger li { grid-template-columns: 48px 1fr; min-height: 0; padding: 1.5rem 0; }
  .component-ledger i { display: none; }
  .material-detail-grid { grid-template-columns: 1fr; }
  .material-detail-grid figure > div { height: 360px; }
  .material-ledger__head { display: none; }
  .material-ledger__row { grid-template-columns: 1fr; padding: 1.1rem; }
  .material-ledger__row > * { padding: .45rem 0; border-right: 0; }
  .spec-card { grid-template-columns: 1fr; }
  .spec-card div { min-height: 145px; }
  .material-validation ol, .materials-faq__grid { grid-template-columns: 1fr; }
  .material-validation li { min-height: 230px; border-left: 1px solid var(--color-line); }
  .material-validation h3 { margin-top: 3rem; }
  .materials-faq__grid article { min-height: 0; }
  .materials-form { grid-template-columns: 1fr; padding: 1.3rem; }
  .materials-form > * { grid-column: 1; }
  .materials-form__heading { grid-template-columns: 1fr; }
}