/* === Page 3: Materials === */

.section-title { font-family: "Merriweather", serif; color: var(--hedge); }
.m-01 .section-head,
.m-02 .section-head,
.m-03 .section-head {
  display: grid; gap: 10px; margin-bottom: 22px;
}

/* SECTION 01 — Material Map */
.material-map{
  border-top: 1px solid #e2efe8;
  background:
    linear-gradient(180deg, rgba(223,238,231,.5), rgba(223,238,231,0)) 0 0 / 100% 56px no-repeat;
}
.map-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.m-01 .section-text{
  margin-top: 16px; display: grid; gap: 12px; max-width: 76ch; color:#2a4439;
}
@media (max-width: 1100px){
  .map-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
}
@media (max-width: 860px){
  .map-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .map-grid{ grid-template-columns: 1fr; }
}

/* SECTION 02 — Finish Swatches */
.finish-swatches{ border-top: 1px solid #e2efe8; }
.swatch-field{
  --gap: 16px;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.swatch.tone{
  border-radius: var(--radius-lg);
  padding: 16px;
  border: 1px solid #ecf3ef;
  box-shadow: var(--shadow);
  background:
    linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,.3)),
    repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 12px, rgba(0,0,0,.03) 12px 24px);
  transition: transform .25s ease;
}
.swatch.tone:hover{ transform: translateY(-4px); }
.swatch.tone .label{ display:block; font-weight:700; color: var(--hedge); }
.swatch.tone .note{ font-size:.9rem; color:#2a4439; }
.swatch.tone.sea-glass{ background-color: #dfeee7; }
.swatch.tone.hedge{ background-color: #cfe2d9; }
.swatch.tone.sand{ background-color: #efe9dc; }
.media{ background: #fff; }

.finish-notes{
  margin-top: 14px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.note-card{
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 12px 14px; color:#2a4439; box-shadow: var(--shadow);
}
.note-card h3{ margin: 0 0 8px; color: var(--hedge); }

@media (max-width: 1100px){
  .swatch-field{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  .finish-notes{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .swatch-field{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finish-notes{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .swatch-field{ grid-template-columns: 1fr; }
  .finish-notes{ grid-template-columns: 1fr; }
}

/* SECTION 03 — Hardware Provenance */
.hardware-provenance{ border-top: 1px solid #e2efe8; }
.prov-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.prov-cards{
  margin-top: 14px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pcard{
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 12px 14px; color:#2a4439; box-shadow: var(--shadow);
}
.pcard h3{ margin: 0 0 8px; color: var(--hedge); }

/* Small helpers reused on this page */
.bullets{ margin: 0; padding-left: 18px; display: grid; gap: 6px; color:#2a4439; }
.chips{
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;
}
.chip{
  padding: 6px 10px; border-radius: 999px;
  background: #dfeee7; color: #2f5b46; border: 1px solid #cfe2d9;
  font-weight: 700; font-size: .9rem;
}

/* Responsive */
@media (max-width: 1100px){
  .prov-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  .prov-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .prov-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prov-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .prov-grid{ grid-template-columns: 1fr; }
  .prov-cards{ grid-template-columns: 1fr; }
}
/* ===== SECTION 04 — Timber Ledger ===== */
.timber-ledger{ border-top: 1px solid #e2efe8; }
.timber-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.timber-cards{
  margin-top: 14px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tcard{
  background: #fff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 12px 14px; color:#2a4439; box-shadow: var(--shadow);
}
.tcard h3{ margin: 0 0 8px; color: var(--hedge); }
.tcard .note{ margin: 8px 0 0; font-size: .95rem; color:#28483b; }

@media (max-width: 1100px){
  .timber-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  .timber-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .timber-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timber-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .timber-grid{ grid-template-columns: 1fr; }
  .timber-cards{ grid-template-columns: 1fr; }
}

/* ===== SECTION 05 — Glass Details ===== */
.glass-details{ border-top: 1px solid #e2efe8; }
.glass-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.tint-row{
  margin-top: 14px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 220px));
}
.tint.swatch{
  border-radius: var(--radius-lg);
  padding: 12px;
  border: 1px solid #ecf3ef;
  box-shadow: var(--shadow);
  display: grid; gap: 6px;
}
.tint .name{ font-weight: 700; color: var(--hedge); }
.tint .desc{ font-size: .95rem; color:#2a4439; }
.tint.clear{ background: #f7fbf9; }
.tint.sea{ background: #dfeee7; }
.tint.lowiron{ background: #fdfdf7; }

@media (max-width: 1100px){
  .glass-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  .tint-row{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .glass-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tint-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .glass-grid{ grid-template-columns: 1fr; }
  .tint-row{ grid-template-columns: 1fr; }
}

/* ===== SECTION 06 — Metal Set ===== */
.metal-set{ border-top: 1px solid #e2efe8; }
.metal-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.metal-metrics{
  margin-top: 14px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 280px));
}
.metal-metrics .mm h3{ margin: 0 0 6px; color: var(--hedge); }
.metal-metrics .bar{
  height: 8px; border-radius: 999px; overflow: hidden;
  background: #eaf3ef; border: 1px solid #dcebe4;
}
.metal-metrics .bar .fill{
  display:block; height: 100%; width: 0;
  background: linear-gradient(90deg, #6b9f86, #8bb4a0);
  transition: width .9s ease;
}
.reveal.is-visible .metal-metrics .bar .fill.to-85{ width: 85%; }
.reveal.is-visible .metal-metrics .bar .fill.to-70{ width: 70%; }
.reveal.is-visible .metal-metrics .bar .fill.to-90{ width: 90%; }

@media (max-width: 1100px){
  .metal-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  .metal-metrics{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .metal-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metal-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .metal-grid{ grid-template-columns: 1fr; }
  .metal-metrics{ grid-template-columns: 1fr; }
}
/* ===== SECTION 07 — Seal Kit ===== */
.seal-kit{ border-top: 1px solid #e2efe8; }
.seal-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.seal-details{
  margin-top: 14px;
  display: grid; gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.seal-details details{
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 10px 12px; box-shadow: var(--shadow); color:#2a4439;
}
.seal-details summary{
  cursor: pointer; font-weight: 700; color: var(--hedge);
  list-style: none;
}
.seal-details summary::-webkit-details-marker{ display:none; }

.seal-metrics{
  margin-top: 14px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 280px));
}
.seal-metrics .sm h3{ margin: 0 0 6px; color: var(--hedge); }
.seal-metrics .bar{
  height: 8px; border-radius: 999px; overflow: hidden;
  background: #eaf3ef; border: 1px solid #dcebe4;
}
.seal-metrics .bar .fill{
  display:block; height: 100%; width: 0;
  background: linear-gradient(90deg, #6b9f86, #8bb4a0);
  transition: width .9s ease;
}
.reveal.is-visible .seal-metrics .bar .fill.to-70{ width: 70%; }
.reveal.is-visible .seal-metrics .bar .fill.to-15{ width: 15%; }
.reveal.is-visible .seal-metrics .bar .fill.to-50{ width: 50%; }

@media (max-width: 1100px){
  .seal-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  .seal-details{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seal-metrics{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .seal-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seal-details{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seal-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .seal-grid{ grid-template-columns: 1fr; }
  .seal-details{ grid-template-columns: 1fr; }
  .seal-metrics{ grid-template-columns: 1fr; }
}

/* ===== SECTION 08 — Fastener Library ===== */
.fastener-library{ border-top: 1px solid #e2efe8; }
.drawer-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.fast-matrix{
  margin-top: 14px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fcard{
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 12px 14px; color:#2a4439; box-shadow: var(--shadow);
}
.fcard h3{ margin: 0 0 8px; color: var(--hedge); }

@media (max-width: 1100px){
  .drawer-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
  .fast-matrix{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .drawer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fast-matrix{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .drawer-grid{ grid-template-columns: 1fr; }
  .fast-matrix{ grid-template-columns: 1fr; }
}

/* ===== SECTION 09 — Stone & Thresholds ===== */
.stone-thresholds{ border-top: 1px solid #e2efe8; }
.stone-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 350px));
  align-items: start;
}
.stone-callouts{
  margin: 14px 0 0; padding-left: 0; list-style: none;
  display: grid; gap: 8px; color:#2a4439;
}
.stone-callouts .pin{
  display:inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 8px; vertical-align: -1px;
  background: radial-gradient(circle at 35% 35%, #6b9f86, #3f715a);
  box-shadow: 0 0 0 2px #dfeee7;
}

@media (max-width: 1100px){
  .stone-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
}
@media (max-width: 860px){
  .stone-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .stone-grid{ grid-template-columns: 1fr; }
}
/* ===== SECTION 10 — Underlay Pack ===== */
.underlay-pack{ border-top: 1px solid #e2efe8; }
.underlay-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 350px));
  align-items: start;
}
.underlay-metrics{
  margin-top: 14px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 260px));
}
.underlay-metrics .um h3{ margin: 0 0 6px; color: var(--hedge); }
.underlay-metrics .bar{
  height: 8px; border-radius: 999px; overflow: hidden;
  background: #eaf3ef; border: 1px solid #dcebe4;
}
.underlay-metrics .bar .fill{
  display:block; height: 100%; width: 0;
  background: linear-gradient(90deg, #6b9f86, #8bb4a0);
  transition: width .9s ease;
}
.reveal.is-visible .underlay-metrics .bar .fill.to-55{ width: 55%; }
.reveal.is-visible .underlay-metrics .bar .fill.to-40{ width: 40%; }
.reveal.is-visible .underlay-metrics .bar .fill.to-80{ width: 80%; }

@media (max-width: 980px){
  .underlay-grid{ grid-template-columns: 1fr; justify-items: center; }
  .underlay-metrics{ grid-template-columns: 1fr; }
}

/* ===== SECTION 11 — Adhesives Pack ===== */
.adhesives-pack{ border-top: 1px solid #e2efe8; }
.adhesives-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 350px));
  align-items: start;
}
.compat-cards{
  margin-top: 14px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ccard{
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 12px 14px; color:#2a4439; box-shadow: var(--shadow);
}
.ccard h3{ margin: 0 0 8px; color: var(--hedge); }

@media (max-width: 1100px){
  .adhesives-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; }
  .compat-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .compat-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .adhesives-grid{ grid-template-columns: 1fr; }
  .compat-cards{ grid-template-columns: 1fr; }
}

/* ===== SECTION 12 — Finishing Stack ===== */
.finishing-stack{ border-top: 1px solid #e2efe8; }
.finishstack-grid{
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 350px) 1fr;
  align-items: start;
}
.finishstack-cards{
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fscard{
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 12px 14px; color:#2a4439; box-shadow: var(--shadow);
}
.fscard h3{ margin: 0 0 8px; color: var(--hedge); }
.fscard .note{ margin: 8px 0 0; font-size: .95rem; color:#28483b; }

@media (max-width: 1100px){
  .finishstack-grid{ grid-template-columns: 1fr; }
  .finishstack-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .finishstack-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .finishstack-cards{ grid-template-columns: 1fr; }
}
/* ===== SECTION 13 — Storage & Labeling ===== */
.storage-labels{ border-top: 1px solid #e2efe8; }
.storage-grid{
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 350px) 1fr;
  align-items: start;
}
.storage-cards{
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.scard{
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 12px 14px; color:#2a4439; box-shadow: var(--shadow);
}
.scard h3{ margin: 0 0 8px; color: var(--hedge); }
.scard .note{ margin-top: 6px; color:#28483b; font-size: .95rem; }

@media (max-width: 1100px){
  .storage-grid{ grid-template-columns: 1fr; }
  .storage-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .storage-cards{ grid-template-columns: 1fr; }
}

/* ===== SECTION 14 — Tool Care ===== */
.tool-care{ border-top: 1px solid #e2efe8; }
.care-grid{
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 350px) 1fr;
  align-items: start;
}
.care-accordions{
  display: grid; gap: 10px;
}
.care-accordions details{
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 10px 12px; box-shadow: var(--shadow); color:#2a4439;
}
.care-accordions summary{
  cursor: pointer; font-weight: 700; color: var(--hedge);
  list-style: none;
}
.care-accordions summary::-webkit-details-marker{ display:none; }

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

/* ===== SECTION 15 — Spec Sheets ===== */
.spec-sheets{ border-top: 1px solid #e2efe8; }
.spec-grid{
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 350px) 1fr;
  align-items: start;
}
.spec-cards{
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sccard{
  background: #ffffff; border: 1px solid #ecf3ef; border-radius: var(--radius-lg);
  padding: 12px 14px; color:#2a4439; box-shadow: var(--shadow);
}
.sccard h3{ margin: 0 0 8px; color: var(--hedge); }
.cta-row{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sccard .note{ margin-top: 8px; color:#28483b; font-size: .95rem; }

@media (max-width: 1100px){
  .spec-grid{ grid-template-columns: 1fr; }
  .spec-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .spec-cards{ grid-template-columns: 1fr; }
}