.product-hero {
  min-height: 500px;
  display: grid;
  grid-template-columns: 1fr .92fr;
  background: linear-gradient(135deg, #f5f1e8, #e6edef);
}
.product-hero > div { padding: clamp(64px, 7vw, 96px) clamp(22px, 6vw, 92px); }
.product-hero h1 { max-width: 760px; font-size: clamp(45px, 5.3vw, 70px); }
.product-hero .lead { max-width: 700px; }
.product-hero .visual { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #ced9dc; }
.product-hero .visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.product-hero .visual figcaption { position: absolute; right: 14px; bottom: 14px; left: 14px; padding: 9px 12px; background: rgba(8,36,51,.9); color: var(--white); font-size: 11px; line-height: 1.35; }
.crumbs { margin-bottom: 24px; color: var(--muted); font-size: 12px; }
.crumbs a { color: var(--blue); }

.choice-table { width: 100%; display: table; border-collapse: collapse; background: var(--white); }
.choice-table th, .choice-table td { padding: 17px; text-align: left; border-bottom: 1px solid var(--line); }
.choice-table th { background: var(--navy); color: var(--white); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.choice-table td:first-child { color: var(--navy); font-weight: 900; }
.yes { color: #176047; font-weight: 900; }
.no { color: #59686e; }
.spec-note { padding: 18px; background: #edf2f1; border-left: 5px solid var(--orange); font-size: 14px; }

.condition-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.condition-grid article { padding: 28px; background: var(--white); border: 1px solid var(--line); }
.condition-grid h3 { font-size: 26px; }
.condition-grid .recommended { border-top: 5px solid var(--orange); }

.details { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.detail-list { display: grid; gap: 1px; background: var(--line); }
.detail-list div { padding: 16px; display: grid; grid-template-columns: 180px 1fr; gap: 20px; background: var(--white); }
.detail-list b { color: var(--navy); }
.detail-list span { color: var(--muted); }

.decision { background: var(--navy); color: #dce7ea; }
.decision h2 { color: var(--white); }
.decision .kicker { color: var(--orange-light); }
.decision-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #496675; }
.decision-grid div { padding: 24px; background: var(--navy); }
.decision-grid b, .decision-grid span { display: block; }
.decision-grid b { color: var(--orange-light); }
.decision-grid span { font-size: 14px; }

.page-cta { display: flex; justify-content: space-between; align-items: center; gap: 30px; background: linear-gradient(125deg, #17475d, #225d73); color: var(--white); }
.page-cta h2 { color: var(--white); }
.page-cta .kicker { color: var(--orange-light); }
.secondary-link { min-height: 44px; display: inline-flex; align-items: center; font-weight: 800; text-underline-offset: 4px; }

.page-index { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.page-index a {
  min-height: 44px;
  padding: 11px 15px;
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--navy);
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}
.page-index a:hover, .page-index a:focus-visible { background: var(--navy); color: var(--white); }

.product-hero-gallery {
  min-width: 0;
  display: grid;
  grid-template-rows: 1.15fr .85fr;
  gap: 1px;
  background: var(--line);
}
.product-hero-gallery figure { position: relative; min-height: 0; margin: 0; overflow: hidden; background: #ced9dc; }
.product-hero-gallery img { width: 100%; height: 100%; display: block; object-fit: cover; }
.product-hero-gallery .historical-drum-photo { object-fit: contain; padding: 20px; background: #fff; image-rendering: auto; }
.product-hero-gallery .concept-drum-photo { object-fit: cover; object-position: center 58%; }
.product-hero-gallery figure:first-child img { object-position: center 62%; }
.product-hero-gallery figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  padding: 8px 10px;
  background: rgba(8,36,51,.9);
  color: var(--white);
  font-size: 10px;
  line-height: 1.35;
}
.product-resource-section { background: #edf2f1; }
.product-resource-intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(300px, .7fr); gap: 48px; align-items: end; }
.product-resource-intro h2 { margin-bottom: 0; }
.product-resource-intro > p { margin: 0; color: var(--muted); }
.product-resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 28px 0 20px; }
.product-resource-grid a { min-height: 82px; padding: 20px; display: flex; justify-content: space-between; align-items: center; gap: 18px; background: var(--white); border: 1px solid var(--line); color: var(--navy); font-weight: 850; text-decoration: none; }
.product-resource-grid a:hover, .product-resource-grid a:focus-visible { border-color: var(--orange); }
.product-resource-grid small { color: var(--orange); font-weight: 850; white-space: nowrap; }
.product-orientation { background: var(--white); }
.product-family { scroll-margin-top: 24px; background: var(--paper); }
.product-family .condition-grid { margin-top: 28px; }
.drum-family { background: var(--warm); }
.drum-family-layout { max-width: 1180px; }
.drum-condition-grid { margin-top: 34px; }
.shared-questions { background: var(--white); }

.construction-section {
  padding: 0 !important;
  display: grid;
  grid-template-columns: minmax(330px, .78fr) minmax(0, 1.22fr);
  align-items: stretch;
  background: var(--white);
}
.construction-section > figure { position: relative; min-height: 760px; margin: 0; overflow: hidden; background: #d8dcda; }
.construction-section > figure img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 55%; }
.construction-section > figure figcaption {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  padding: 9px 12px;
  background: rgba(8,36,51,.9);
  color: var(--white);
  font-size: 11px;
  line-height: 1.35;
}
.construction-content { padding: clamp(60px, 7vw, 96px) clamp(22px, 6vw, 92px); }
.construction-content > p:not(.kicker) { color: var(--muted); }
.construction-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: 1px;
  background: var(--line);
}
.construction-grid div { padding: 20px; background: var(--paper); }
.construction-grid b, .construction-grid span { display: block; }
.construction-grid b { color: var(--navy); font-size: 15px; }
.construction-grid span { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.component-terminology {
  margin: 24px 0 0;
  padding: 15px 17px;
  border-left: 3px solid var(--teal);
  background: var(--mist);
  color: var(--ink) !important;
  font-size: 13px;
  line-height: 1.55;
}
.construction-note { margin-top: 28px; padding: 22px 24px; background: var(--mist); border-left: 5px solid var(--teal); }
.construction-note h3 { margin: 0 0 8px; color: var(--navy); font-size: 22px; }
.construction-note p { margin: 0; color: var(--ink); font-size: 14px; }

@media (max-width: 900px) {
  .product-hero, .details { grid-template-columns: 1fr; }
  .product-hero .visual { min-height: 340px; }
  .product-hero-gallery { min-height: 620px; grid-template-rows: 1fr 1fr; }
  .construction-section { grid-template-columns: 1fr; }
  .construction-section > figure { min-height: 480px; }
  .condition-grid { grid-template-columns: 1fr 1fr; }
  .decision-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .product-hero > div { padding: 58px 22px; }
  .product-hero-gallery { min-height: 520px; }
  .product-hero-gallery figcaption { right: 8px; bottom: 8px; left: 8px; }
  .product-resource-intro, .product-resource-grid { grid-template-columns: 1fr; }
  .product-resource-intro { gap: 18px; }
  .product-resource-grid a { align-items: flex-start; flex-direction: column; }
  .construction-section > figure { min-height: 330px; }
  .construction-content { padding: 58px 22px; }
  .construction-grid { grid-template-columns: 1fr; }
  .condition-grid { grid-template-columns: 1fr; }
  .choice-table, .choice-table tbody, .choice-table tr, .choice-table td { display: block; width: 100%; }
  .choice-table thead { display: none; }
  .choice-table { background: transparent; }
  .choice-table tr { margin-bottom: 14px; padding: 10px 14px; background: var(--white); border: 1px solid var(--line); }
  .choice-table td { display: grid; grid-template-columns: minmax(92px, .9fr) 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .choice-table td:last-child { border-bottom: 0; }
  .choice-table td::before { content: attr(data-label); color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
  .detail-list div { grid-template-columns: 1fr; gap: 3px; }
  .page-cta { align-items: flex-start; flex-direction: column; }
  .decision-grid { grid-template-columns: 1fr; }
}