:root {
  --materials-bg: #04070b;
  --materials-bg-2: #070b11;
  --materials-panel: #0f141b;
  --materials-panel-2: #131923;
  --materials-text: #f4f6f8;
  --materials-muted: #c6ced7;
  --materials-line: rgba(255,255,255,0.10);
  --materials-line-soft: rgba(255,255,255,0.06);
  --materials-shadow: 0 18px 50px rgba(0,0,0,.28);
}
body.materials-page {
  background: linear-gradient(180deg, var(--materials-bg) 0%, #060a10 100%);
  color: var(--materials-text);
}
body.materials-page main,
body.materials-page .section,
body.materials-page .section:nth-of-type(even),
body.materials-page .cta-band,
body.materials-page .site-footer,
body.materials-page .footer,
body.materials-page footer {
  background: transparent !important;
  color: var(--materials-text);
}
body.materials-page .section {
  padding: 82px 0;
  border-top: 1px solid var(--materials-line-soft);
}
body.materials-page .section:first-of-type { border-top:none; }
body.materials-page .section:nth-of-type(odd) {
  background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.018)) !important;
}
body.materials-page .site-header {
  background: rgba(4,7,11,.94) !important;
  backdrop-filter: blur(12px);
}
body.materials-page .header-row,
body.materials-page .header-inner {
  min-height: 76px;
}
body.materials-page .header-cta,
body.materials-page .site-nav .nav-cta {
  background: rgba(255,255,255,.05) !important;
  color: #f4f6f8 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 14px !important;
  padding: 11px 18px !important;
  min-height: 48px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  white-space: normal !important;
}
body.materials-page .header-cta:hover,
body.materials-page .site-nav .nav-cta:hover {
  background: rgba(255,255,255,.09) !important;
}
body.materials-page .materials-subnav {
  position: sticky;
  top: 76px;
  z-index: 990;
  background: rgba(6,10,16,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--materials-line-soft);
}
body.materials-page .subnav-row {
  display:flex; gap:10px; overflow:auto; padding:12px 0; scrollbar-width:none;
}
body.materials-page .subnav-row::-webkit-scrollbar { display:none; }
body.materials-page .subnav-link {
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:38px; padding:0 14px; border-radius:999px;
  border:1px solid var(--materials-line);
  color: #d6dde6; background: rgba(255,255,255,.03);
  text-decoration:none; font-size:.94rem; font-weight:600;
  transition: .2s ease;
}
body.materials-page .subnav-link:hover,
body.materials-page .subnav-link.active { color:#fff; background: rgba(255,255,255,.08); }
body.materials-page .hero {
  position:relative; min-height: 66svh; display:flex; align-items:flex-end; overflow:hidden;
  border-bottom:1px solid var(--materials-line-soft);
}
body.materials-page .hero::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,8,12,.30) 0%, rgba(6,10,16,.42) 44%, rgba(6,10,16,.94) 100%);
}
body.materials-page .hero-media,
body.materials-page .hero-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
body.materials-page .hero-content {
  position:relative; z-index:1; padding:110px 0 54px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,360px); gap:28px; align-items:end;
}
body.materials-page .hero-copy { max-width: 760px; }
body.materials-page .eyebrow {
  display:inline-flex; align-items:center; min-height:36px; padding:0 12px;
  border-radius:999px; border:1px solid var(--materials-line);
  background: rgba(255,255,255,.05); color:#f4f6f8; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.14em;
}
body.materials-page .hero h1 {
  margin:16px 0 14px; color:#fff; max-width:820px;
  font-size: clamp(2.7rem, 5vw, 4.6rem); line-height:1.02; letter-spacing:-.04em;
}
body.materials-page .hero .lede {
  max-width: 700px; color: #e5e9ef; font-size:1.08rem; line-height:1.7;
}
body.materials-page .hero-actions-wrap {
  display:flex; flex-direction:column; align-items:flex-start; gap:12px; justify-self:end; width:100%; max-width:280px;
}
body.materials-page .actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
body.materials-page .btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 18px; border-radius:999px; font-weight:600; text-decoration:none;
}
body.materials-page .btn-primary {
  background:#f2f5f8 !important; color:#0a0d12 !important; border:1px solid #f2f5f8 !important;
}
body.materials-page .btn-secondary {
  background:rgba(255,255,255,.03) !important; color:#f4f6f8 !important; border:1px solid rgba(255,255,255,.16) !important;
}
body.materials-page .section .kicker,
body.materials-page .kicker { color:#e8edf4 !important; opacity:.9; }
body.materials-page .section h2,
body.materials-page h2 { color:#fff; }
body.materials-page .intro,
body.materials-page .prose,
body.materials-page .card p,
body.materials-page .list-card li,
body.materials-page .info-card p,
body.materials-page .caption,
body.materials-page p { color: var(--materials-muted); }
body.materials-page .card,
body.materials-page .info-card,
body.materials-page .list-card {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)) !important;
  border:1px solid var(--materials-line-soft) !important;
  border-radius:22px; box-shadow:var(--materials-shadow);
  color:#fff;
}
body.materials-page .card-body, body.materials-page .info-card, body.materials-page .list-card { padding:24px; }
body.materials-page .card-title, body.materials-page .list-card h3, body.materials-page .info-card h3 { color:#fff !important; }
body.materials-page .info-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
body.materials-page .columns { display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:start; }
body.materials-page .cta-band {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) !important;
}
body.materials-page .footer,
body.materials-page footer {
  border-top:1px solid var(--materials-line-soft);
}
body.materials-page .footer .mini,
body.materials-page footer .mini,
body.materials-page .footer a,
body.materials-page footer a { color:#b8c2ce; }
body.materials-page .footer h4,
body.materials-page footer h4,
body.materials-page .footer .brand,
body.materials-page footer .brand { color:#fff; }
/* animation */
body.materials-page .reveal-up { opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease; }
body.materials-page .reveal-up.is-visible { opacity:1; transform:none; }
body.materials-page .hero .eyebrow,
body.materials-page .hero h1,
body.materials-page .hero .lede,
body.materials-page .hero .actions,
body.materials-page .hero .hero-actions-wrap { opacity:0; transform:translateY(16px); animation:materialsFadeUp .65s ease forwards; }
body.materials-page .hero h1{animation-delay:.08s}
body.materials-page .hero .lede{animation-delay:.16s}
body.materials-page .hero .actions, body.materials-page .hero .hero-actions-wrap{animation-delay:.24s}
@keyframes materialsFadeUp{ to{opacity:1; transform:none} }
@media (max-width: 1080px) {
  body.materials-page .hero-content { grid-template-columns:1fr; }
  body.materials-page .hero-actions-wrap { justify-self:start; max-width:none; }
  body.materials-page .info-grid { grid-template-columns:1fr 1fr; }
  body.materials-page .columns { grid-template-columns:1fr; }
}
@media (max-width: 980px) {
  body.materials-page .materials-subnav { top: 72px; }
  body.materials-page .header-cta, body.materials-page .site-nav .nav-cta { width:100%; justify-content:flex-start; max-width:none; }
}
@media (max-width: 820px) {
  body.materials-page .hero { min-height: 62svh; }
  body.materials-page .hero-content { padding:96px 0 42px; }
  body.materials-page .hero h1 { font-size: clamp(2.25rem, 8vw, 3.2rem); }
  body.materials-page .info-grid, body.materials-page .columns { grid-template-columns:1fr; }
  body.materials-page .section { padding:68px 0; }
}


/* phase 16 — only requested fixes */

/* header order/alignment on materials pages */
@media (min-width: 1024px){
  body.materials-page .site-header .header-row{
    display:flex;
    align-items:center;
    gap:18px;
  }
  body.materials-page .site-header .brand{
    flex:0 0 auto;
  }
  body.materials-page .site-header .nav-shell{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:18px;
    flex:1 1 auto;
    justify-content:flex-end;
  }
  body.materials-page .site-header .nav{
    display:flex;
    align-items:center;
    gap:0;
    order:1;
  }
  body.materials-page .site-header .nav a[href$="about.html"]{
    order:98;
  }
  body.materials-page .site-header .nav a[href$="contact.html"]{
    order:99;
  }
  body.materials-page .site-header .header-cta{
    order:100;
    margin-left:8px;
    flex:0 0 auto;
  }
}

/* white card links like 'Explore this page' */
body.materials-page .card .link,
body.materials-page .grid-2 .card .link,
body.materials-page .grid-3 .card .link,
body.materials-page .grid-4 .card .link,
body.materials-page .card a .link{
  color:#ffffff !important;
}
body.materials-page .card .link:hover,
body.materials-page .card a:hover .link{
  color:#ffffff !important;
  opacity:.9;
}

/* white bullets across all materials education pages */
body.materials-page ul.clean{
  list-style: disc outside !important;
  padding-left: 1.25rem !important;
}
body.materials-page ul.clean li{
  color: var(--materials-muted) !important;
}
body.materials-page ul.clean li::marker{
  color:#ffffff !important;
}
body.materials-page ul.clean li::before{
  display:none !important;
  content:none !important;
}


/* mobile rescue pass 2 add-on */
@media (max-width: 980px) {
  .feature-media-row,
  .media-row,
  .design-application-grid,
  .rooms-grid,
  .post-grid,
  .style-grid,
  .review-grid,
  .review-lead,
  .gallery-rail,
  .split-stack {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .gallery-rail { overflow: visible !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; }
  .card-media.tall,
  .feature-media-row .card-media,
  .feature-media-row .card-media.tall,
  .media-row .card-media,
  .media-row .card-media.tall {
    height: 260px !important;
    min-height: 0 !important;
  }
  .site-footer .footer-grid,
  .site-footer .footer-compact,
  .site-footer .footer-links,
  .site-footer .footer-group-inline {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .site-footer .footer-group-inline a { display:block !important; margin:6px 0 0 !important; }
}


/* mobile polish pass 3 */
html, body { overflow-x: hidden; }
body.materials-page { overflow-x: hidden; }

@media (max-width: 820px) {
  body.materials-page .header-row,
  body.materials-page .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  body.materials-page .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 96px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    letter-spacing: .12em !important;
  }

  body.materials-page .mobile-toggle {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  body.materials-page .nav .item > a.top[href="compare.html"],
  body.materials-page .footer a[href="compare.html"] {
    display: none !important;
  }

  body.materials-page .materials-subnav {
    top: 70px !important;
    overflow: hidden !important;
  }

  body.materials-page .materials-subnav .container,
  body.materials-page .materials-subnav .subnav-row {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.materials-page .subnav-row {
    padding: 12px 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
  }

  body.materials-page .subnav-row::-webkit-scrollbar { display:none !important; }
}