.surface-detail-page {
  margin: 0;
  color: #292929;
  background: #ffffff;
}

.surface-detail-page .site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.surface-hero {
  min-height: 820px;
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(420px,1.1fr);
  align-items: center;
  gap: clamp(48px,7vw,120px);
  padding: 150px 7vw 72px;
  overflow: hidden;
  background: radial-gradient(circle at 77% 43%,rgba(193,255,114,.32),transparent 27%),linear-gradient(135deg,#fff 0%,#f5f5f5 62%,#d1d1d1 100%);
}

.surface-hero-copy { position: relative; z-index: 2; max-width: 720px; }

.surface-back {
  display: inline-block;
  margin-bottom: 34px;
  padding-bottom: 8px;
  border-bottom: 1px solid #4e4e4e;
  color: #4e4e4e;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.surface-detail-page .eyebrow {
  color: #4e4e4e;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.surface-hero h1 {
  max-width: 820px;
  margin: 0 0 28px;
  font-size: clamp(4rem,6.6vw,8rem);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.07em;
}

.surface-hero h1 em {
  display: block;
  font-family: Georgia,"Times New Roman",serif;
  font-weight: 400;
}

.surface-hero-copy > p:last-child {
  max-width: 590px;
  margin: 0;
  color: #4e4e4e;
  font-size: clamp(1rem,1.25vw,1.25rem);
  line-height: 1.7;
}

.surface-hero-visual {
  position: relative;
  height: min(68vw,650px);
  min-height: 520px;
}

.surface-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 34px 80px rgba(41,41,41,.2);
}

.surface-hero-label {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: min(270px,52%);
  padding: 24px 26px;
  background: #c1ff72;
}

.surface-hero-label span {
  display: block;
  margin-bottom: 8px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.surface-hero-label strong { font-size: 1.05rem; font-weight: 500; }

.surface-section { padding: clamp(88px,10vw,150px) 7vw; }

.surface-intro {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(50px,9vw,150px);
}

.surface-intro h2,
.surface-heading h2,
.surface-application-copy h2,
.surface-cta h2 {
  margin: 0;
  font-size: clamp(2.8rem,5.2vw,6.3rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.06em;
}

.surface-intro-copy .lead {
  margin-top: 0;
  color: #292929;
  font-size: clamp(1.35rem,2vw,2rem);
  line-height: 1.4;
}

.surface-intro-copy p,
.surface-heading > p,
.surface-process-copy > p,
.surface-spec-card p,
.surface-care p {
  color: #4e4e4e;
  font-size: 1.02rem;
  line-height: 1.78;
}

.surface-finishes { background: #d1d1d1; }

.surface-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px,.58fr);
  gap: 6vw;
  align-items: end;
  margin-bottom: clamp(48px,6vw,84px);
}

.surface-heading > p { margin: 0; }

.finish-family-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 2px;
  background: rgba(78,78,78,.2);
}

.finish-family-card { padding: 0 30px 32px; background: #ffffff; }

.finish-family-swatch {
  position: relative;
  aspect-ratio: 1.18/1;
  margin: 0 -30px 30px;
  overflow: hidden;
  background: #d1d1d1;
}

.finish-family-swatch > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.finish-family-swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg,rgba(255,255,255,.4),transparent 38%,rgba(41,41,41,.14));
}

.swatch-geometric { background: repeating-linear-gradient(45deg,#292929 0 14px,transparent 14px 30px),repeating-linear-gradient(-45deg,#4e4e4e 0 14px,#d1d1d1 14px 30px); }
.swatch-organic-cut { background: radial-gradient(ellipse at 15% 30%,transparent 0 13%,#8a7158 14% 24%,transparent 25%),radial-gradient(ellipse at 65% 65%,transparent 0 15%,#b19474 16% 27%,transparent 28%),#292929; }
.swatch-linear-cut { background: repeating-linear-gradient(90deg,#292929 0 10px,transparent 10px 22px),linear-gradient(#c1ff72,#4e4e4e); }
.swatch-fluted { background: repeating-linear-gradient(90deg,#5d4938 0 10px,#a08061 11px 20px,#382b22 21px 24px); }
.swatch-wave { background: repeating-radial-gradient(ellipse at 0 50%,#d1d1d1 0 10px,#8e8e8e 11px 18px,#ffffff 19px 28px); }
.swatch-faceted { background: conic-gradient(from 45deg at 50% 50%,#4e4e4e,#d1d1d1,#ffffff,#777,#4e4e4e); }
.swatch-gloss-neutral { background: linear-gradient(118deg,#292929 0 40%,#bcbcbc 47%,#4e4e4e 54%,#292929 100%); }
.swatch-gloss-colour { background: linear-gradient(120deg,#315a58,#c1ff72 48%,#21413e 54%,#315a58); }
.swatch-gloss-metal { background: linear-gradient(110deg,#4e4e4e,#ffffff 42%,#a7a7a7 50%,#292929 100%); }
.swatch-matte-neutral { background: radial-gradient(circle at 25% 20%,rgba(255,255,255,.3),transparent 38%),linear-gradient(135deg,#d1d1d1,#777); }
.swatch-matte-colour { background: linear-gradient(135deg,#c8aead,#8b6f72 52%,#5f4d50); }
.swatch-matte-dark { background: radial-gradient(circle at 30% 20%,#5a5a5a,#292929 72%); }
.swatch-veneer-quarter { background: repeating-linear-gradient(91deg,#513624 0 3px,#846044 4px 8px,#65462f 9px 13px,#9b7352 14px 18px); }
.swatch-veneer-crown { background: repeating-radial-gradient(ellipse at 50% 115%,#5e3f2b 0 8px,#9a704e 9px 17px,#6f4d35 18px 26px,#ad815d 27px 36px); }
.swatch-veneer-stained { background: repeating-linear-gradient(88deg,#2c211a 0 4px,#4a3628 5px 10px,#33251d 11px 15px,#604533 16px 22px); }
.swatch-fibre-standard { background: repeating-linear-gradient(92deg,#b49a7b 0 2px,#8f7559 2px 4px,#a88d6d 4px 7px); }
.swatch-fibre-moisture { background: repeating-linear-gradient(92deg,#70806c 0 2px,#899583 2px 5px,#687662 5px 8px); }
.swatch-fibre-performance { background: repeating-linear-gradient(92deg,#92746d 0 2px,#aa8d85 2px 5px,#80645e 5px 8px); }
.swatch-core-plywood-1 { background: repeating-linear-gradient(0deg,#d5b88f 0 12px,#8f6746 12px 15px,#ead6b5 15px 27px,#765039 27px 30px); }
.swatch-core-plywood-2 { background: linear-gradient(135deg,#b59673,#e7d0aa 46%,#8b684a); }
.swatch-core-plywood-3 { background: repeating-linear-gradient(88deg,#9b7654 0 4px,#d1ad82 5px 11px,#745239 12px 16px); }
.swatch-core-particle-1 { background: radial-gradient(circle,#8f6f4d 0 2px,transparent 2.5px),#c2a27b; background-size: 10px 9px; }
.swatch-core-particle-2 { background: radial-gradient(circle,#6f8366 0 2px,transparent 2.5px),#9eb095; background-size: 11px 10px; }
.swatch-core-particle-3 { background: radial-gradient(circle,#604c3b 0 1.5px,transparent 2px),#94785e; background-size: 7px 7px; }
.swatch-core-blockboard-1 { background: repeating-linear-gradient(90deg,#be9466 0 34px,#765239 34px 37px); }
.swatch-core-blockboard-2 { background: repeating-linear-gradient(90deg,#d1aa7a 0 19px,#8c6444 19px 22px); }
.swatch-core-blockboard-3 { background: repeating-linear-gradient(88deg,#5d3c28 0 4px,#a77851 5px 12px,#744b32 13px 18px); }
.swatch-core-pvc-1 { background: radial-gradient(circle at 30% 25%,#fff,#e5e8e8 68%); }
.swatch-core-pvc-2 { background: linear-gradient(135deg,#fff 0 42%,#cfd4d3 48%,#f6f7f7 58%); }
.swatch-core-pvc-3 { background: linear-gradient(135deg,#d6dad7,#aab8b2 50%,#f3f4f2); }
.swatch-core-honeycomb-1 { background: repeating-radial-gradient(circle at 0 50%,transparent 0 8px,#aaa 9px 10px,transparent 11px 18px),#e4e4e4; }
.swatch-core-honeycomb-2 { background: linear-gradient(115deg,#4e4e4e,#e5e5e5 42%,#8c8c8c 50%,#292929); }
.swatch-core-honeycomb-3 { background: repeating-linear-gradient(120deg,#b9b9b9 0 8px,#e9e9e9 9px 16px,#777 17px 18px); }
.swatch-core-osb-1 { background: repeating-linear-gradient(18deg,#c29455 0 5px,#e0b674 6px 12px,#9d703c 13px 16px); }
.swatch-core-osb-2 { background: repeating-linear-gradient(-22deg,#9d7041 0 4px,#bd945d 5px 10px,#785334 11px 13px); }
.swatch-core-osb-3 { background: repeating-linear-gradient(25deg,#d3a76d 0 7px,#865d37 8px 11px,#bd8c52 12px 17px); }
.swatch-core-opt-1 { background: radial-gradient(ellipse,#70553e 0 2px,transparent 2.5px),#b79570; background-size: 13px 9px; }
.swatch-core-opt-2 { background: repeating-linear-gradient(96deg,#a9825c 0 2px,#c5a27d 3px 6px,#8d694c 7px 9px); }
.swatch-core-opt-3 { background: linear-gradient(90deg,#8b6545 0 5%,#c29a70 5% 95%,#725037 95%); }
.swatch-core-wpc-1 { background: radial-gradient(circle,#766d64 0 1px,transparent 1.5px),#a69d92; background-size: 6px 6px; }
.swatch-core-wpc-2 { background: radial-gradient(circle,#8e867d 0 1px,transparent 1.5px),#c3bcb3; background-size: 8px 8px; }
.swatch-core-wpc-3 { background: linear-gradient(125deg,#81766d,#d0c7bc 45%,#766b63 52%,#aea49a); }
.swatch-marble-white { background: linear-gradient(126deg,transparent 0 35%,rgba(78,78,78,.32) 36%,transparent 38%),linear-gradient(35deg,transparent 0 64%,rgba(78,78,78,.22) 65%,transparent 68%),#f7f7f7; }
.swatch-marble-dark { background: linear-gradient(120deg,transparent 0 42%,rgba(255,255,255,.5) 43%,transparent 45%),linear-gradient(35deg,transparent 0 66%,rgba(193,255,114,.35) 67%,transparent 69%),#292929; }
.swatch-marble-warm { background: linear-gradient(125deg,transparent 0 31%,rgba(116,83,56,.35) 32%,transparent 35%),linear-gradient(45deg,transparent 0 70%,rgba(255,255,255,.5) 71%,transparent 73%),#c9b59f; }

.finish-family-card > span,
.surface-spec-card > span,
.surface-process-step span {
  color: #777;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
}

.finish-family-card h3 { margin: 22px 0 12px; font-size: 1.45rem; font-weight: 500; }
.finish-family-card p { margin: 0; color: #4e4e4e; line-height: 1.65; }

.surface-process {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: clamp(60px,10vw,160px);
  align-items: start;
}

.surface-process-copy h2 { margin: 0 0 26px; font-size: clamp(2.8rem,4.5vw,5.5rem); font-weight: 400; line-height: .98; letter-spacing: -.055em; }

.surface-process-steps { border-top: 1px solid #d1d1d1; }
.surface-process-step { display: grid; grid-template-columns: 60px 1fr; padding: 28px 0; border-bottom: 1px solid #d1d1d1; }
.surface-process-step h3 { margin: 0 0 10px; font-size: 1.3rem; font-weight: 500; }
.surface-process-step p { margin: 0; color: #4e4e4e; line-height: 1.65; }

.surface-application {
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(380px,.88fr);
  min-height: 760px;
  background: #292929;
  color: #ffffff;
}

.surface-application-image img { width: 100%; height: 100%; min-height: 760px; object-fit: cover; }
.surface-application-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(64px,8vw,130px) 7vw; }
.surface-application-copy .eyebrow { color: #d1d1d1; }

.surface-use-list { display: grid; grid-template-columns: repeat(2,1fr); margin-top: 38px; border-top: 1px solid rgba(255,255,255,.2); }
.surface-use-list span { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.2); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

.surface-spec-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.surface-spec-card { min-height: 280px; padding: 30px; background: #f2f2f2; }
.surface-spec-card > span { display: block; margin-bottom: 72px; }
.surface-spec-card h3 { margin: 0 0 14px; font-size: 1.35rem; font-weight: 500; }
.surface-spec-card p { margin: 0; font-size: 1rem; }

.surface-benefits { background: #ffffff; }
.surface-benefit-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.surface-benefit-card { min-height: 270px; padding: 30px; display: flex; flex-direction: column; border: 1px solid #d1d1d1; background: #ffffff; }
.surface-benefit-card > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: #c1ff72; color: #292929; font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.surface-benefit-card h3 { margin: auto 0 12px; font-size: 1.35rem; font-weight: 500; }
.surface-benefit-card p { margin: 0; color: #4e4e4e; line-height: 1.65; }

.surface-care { display: grid; grid-template-columns: .7fr 1.3fr; gap: 7vw; margin-top: 20px; padding: clamp(34px,5vw,62px); background: #d1d1d1; }
.surface-care h3 { margin: 0; font-size: 1.5rem; font-weight: 500; }
.surface-care p { margin: 0; }

.surface-cta { padding: clamp(100px,12vw,180px) 7vw; text-align: center; background: #292929; color: #ffffff; }
.surface-cta h2 { max-width: 900px; margin-inline: auto; }
.surface-cta > p:not(.eyebrow) { max-width: 600px; margin: 28px auto 38px; color: #d1d1d1; font-size: 1.05rem; line-height: 1.7; }
.surface-cta .eyebrow { justify-content: center; color: #d1d1d1; }
.surface-cta .button-accent { display: inline-flex; gap: 28px; align-items: center; padding: 18px 24px; background: #c1ff72; color: #292929; }

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

@media (max-width: 760px) {
  .surface-detail-page .site-header { position: relative; }
  .surface-hero { min-height: auto; grid-template-columns: 1fr; gap: 32px; padding: 60px 18px 34px; }
  .surface-hero h1 { font-size: clamp(3.3rem,17vw,5.3rem); }
  .surface-hero-visual { width: min(100%,460px); height: auto; min-height: 0; aspect-ratio: 3/4; margin-inline: auto; }
  .surface-hero-label { width: min(250px,72%); padding: 20px; }
  .surface-section { padding: 60px 18px; }
  .surface-intro,.surface-heading,.surface-process,.surface-care { grid-template-columns: 1fr; gap: 38px; }
  .surface-intro h2,.surface-heading h2,.surface-application-copy h2,.surface-cta h2 { font-size: clamp(2.65rem,13vw,4.2rem); }
  .finish-family-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .finish-family-card { min-width: 0; padding: 0 6px 12px; }
  .finish-family-swatch { aspect-ratio: 3/4; margin: 0 -6px 10px; }
  .finish-family-card > span { font-size: .52rem; letter-spacing: .08em; }
  .finish-family-card h3 { margin: 7px 0 0; font-size: .72rem; line-height: 1.25; overflow-wrap: anywhere; }
  .finish-family-card p { display: none; }
  .surface-spec-grid { grid-template-columns: 1fr; }
  .surface-benefit-grid { display: flex; flex-wrap: nowrap; gap: 14px; padding-bottom: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #6b6b6b #e7e7e7; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
  .surface-benefit-grid::-webkit-scrollbar { height: 8px; }
  .surface-benefit-grid::-webkit-scrollbar-track { background: #e7e7e7; }
  .surface-benefit-grid::-webkit-scrollbar-thumb { background: #6b6b6b; border-radius: 999px; }
  .surface-benefit-card { flex: 0 0 100%; min-height: 250px; scroll-snap-align: start; scroll-snap-stop: always; }
  .surface-application { grid-template-columns: 1fr; min-height: auto; }
  .surface-application-image img { min-height: 0; height: min(86vw,460px); }
  .surface-application-copy { padding: 58px 18px; }
  .surface-spec-card { min-height: 240px; }
  .surface-cta { padding: 72px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .surface-detail-page *,
  .surface-detail-page *::before,
  .surface-detail-page *::after { scroll-behavior: auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; }
}