/* Product overview and shared standalone / off-canvas detail content. */
.product-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 48px;
}
.product-intro h2 { max-width: 760px; margin: 0; }
.product-intro__copy p { margin: 0; color: var(--muted); font-size: 17px; }
.product-intro__copy a { display: inline-block; margin-top: 18px; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.product-card__media { position: relative; overflow: hidden; background: var(--steel-dark); }
.product-card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.product-card__number {
  position: absolute; top: 16px; left: 18px; z-index: 1;
  font-size: 13px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 8px #000;
}
.product-card__body { display: flex; flex-direction: column; flex: 1; padding: 26px; }
.product-card h3 { margin: 0 0 12px; font: 600 32px/1.1 var(--display-font); }
.product-card p { margin: 0 0 26px; color: var(--muted); }
.product-card__link { display: flex; justify-content: space-between; gap: 20px; margin-top: auto; font-size: 14px; font-weight: 600; }
.product-card__link span:last-child { color: var(--bronze); font-size: 22px; line-height: 1; }
.product-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; }
.product-topic { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: 28px 30px; background: var(--steel); color: #fff; text-decoration: none; border: 1px solid transparent; border-radius: 4px; }
.product-topic span:first-child { display: grid; gap: 8px; }
.product-topic strong { font: 600 27px/1.1 var(--display-font); }
.product-topic small { max-width: 420px; color: #c8d3d8; font-size: 14px; }
.product-topic__arrow { font-size: 28px; color: var(--copper-light); }
.application-heading-row { display: flex; gap: 32px; justify-content: space-between; align-items: end; margin-bottom: 48px; }
.application-heading-row .section__heading { margin-bottom: 0; }
.text-link { font-weight: 600; text-decoration-thickness: 1px; }
.application-heading-row > a { flex: 0 0 auto; margin-bottom: 8px; }

html.product-drawer-open { overflow: hidden; scrollbar-gutter: stable; }
.product-drawer {
  position: fixed; inset: 0 0 0 auto;
  width: min(1120px, calc(100% - 80px)); max-width: none;
  height: 100%; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0;
  color: var(--ink); background: var(--paper);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
  box-shadow: -24px 0 80px rgba(0,0,0,.22);
}
.product-drawer[open] { display: flex; flex-direction: column; }
.product-drawer.is-active { transform: translateX(0); }
.product-drawer::backdrop { background: rgba(3,12,19,.65); backdrop-filter: blur(5px); }
.product-drawer__bar { display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; gap: 20px; padding: 18px 44px; color: #fff; background: var(--steel-dark); }
.product-drawer__bar > div { min-width: 0; display: flex; align-items: center; gap: 18px; }
.product-drawer__brand { color: var(--copper-light); font: 600 19px/1 var(--display-font); white-space: nowrap; }
.product-drawer__bar h2 { margin: 0; font: 500 14px/1.3 var(--body-font); }
.product-drawer__close { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; color: inherit; border: 1px solid rgba(255,255,255,.3); border-radius: 3px; background: transparent; font: 500 13px/1 var(--body-font); cursor: pointer; }
.product-drawer__close span:first-child { font: 300 26px/1 var(--body-font); }
.product-drawer__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.product-drawer .product-detail { padding: 0; }
.product-loading, .product-error { padding: 60px 56px; }
.product-loading { display: flex; align-items: center; gap: 20px; }
.product-loading__mark { display: block; width: 26px; height: 26px; flex-shrink: 0; border: 2px solid var(--line); border-top-color: var(--bronze); border-radius: 50%; animation: product-loading 900ms linear infinite; }
.product-error h2 { font: 600 36px/1.1 var(--display-font); }
.product-error > div { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 24px; }
@keyframes product-loading { to { transform: rotate(360deg); } }

.product-page { padding-top: 44px; padding-bottom: 80px; }
.product-back { display: inline-block; margin-bottom: 40px; font-size: 14px; font-weight: 500; }
.product-detail { overflow-wrap: anywhere; }
.detail-hero {
  position: relative; isolation: isolate; display: flex; align-items: flex-end;
  min-height: 540px; padding: 72px 56px 56px; overflow: hidden;
  color: #fff; background: var(--steel-dark); border-bottom: 4px solid var(--copper);
}
.detail-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(3,12,19,.94), rgba(3,12,19,.7) 52%, rgba(3,12,19,.12)),
              linear-gradient(0deg, rgba(3,12,19,.85), rgba(3,12,19,.08) 90%);
}
.detail-hero__image { position: absolute; inset: 0; z-index: -2; margin: 0; }
.detail-hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.detail-hero__copy { max-width: 660px; }
.detail-hero .eyebrow { max-width: 44ch; color: var(--copper-light); margin: 0 0 20px; }
.detail-hero h1 { max-width: 19ch; margin: 0 0 24px; font: 600 clamp(48px,5.3vw,76px)/1.02 var(--display-font); letter-spacing: -.015em; color: #fff; }
.detail-hero h1:focus { outline: none; }
.detail-lead { margin: 0; max-width: 55ch; font-size: 18px; color: #fff; line-height: 1.65; }
.detail-hero__cta { display: inline-flex; align-items: center; gap: 28px; margin-top: 28px; font-size: 14px; font-weight: 600; color: #fff; text-underline-offset: 6px; text-decoration-color: var(--copper-light); }
.detail-hero__cta span { color: var(--copper-light); font-size: 22px; line-height: 1; }
/* Shared reveal: on standalone page load and on drawer open or topic change. */
@keyframes detail-hero-reveal {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes detail-hero-image-reveal {
  from { transform: scale(1.025); }
  to { transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  :is(.product-drawer, .product-page) .detail-hero__copy > * {
    animation: detail-hero-reveal 600ms cubic-bezier(.22,.61,.36,1) backwards;
  }
  :is(.product-drawer, .product-page) .detail-hero__copy > .eyebrow { animation-delay: 140ms; }
  :is(.product-drawer, .product-page) .detail-hero__copy > h1 { animation-delay: 200ms; }
  :is(.product-drawer, .product-page) .detail-hero__copy > .detail-lead { animation-delay: 260ms; }
  :is(.product-drawer, .product-page) .detail-hero__copy > .detail-hero__cta { animation-delay: 320ms; }
  :is(.product-drawer, .product-page) .detail-hero__image img {
    animation: detail-hero-image-reveal 1000ms cubic-bezier(.22,.61,.36,1) backwards;
  }
}
.detail-body { padding: 36px 56px 48px; }
.detail-jump-nav { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 24px 0; margin-bottom: 12px; border-block: 1px solid var(--line); font-size: 13px; }
.detail-jump-nav a { color: var(--steel); text-underline-offset: 5px; }
.detail-item { display: grid; grid-template-columns: 1.25fr .85fr; align-items: start; gap: 36px; padding-block: 44px; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.detail-item--text { grid-template-columns: 1fr; }
.detail-item h2, .detail-data-section h2, .detail-gallery-section h2 { margin: 0 0 16px; font: 600 32px/1.12 var(--display-font); }
.detail-item__copy > p, .detail-data-section > p, .detail-gallery-section > p { margin: 0 0 24px; color: var(--muted); }
.detail-item__figure { margin: 0; overflow: hidden; border-radius: 3px; background: var(--steel-dark); }
.detail-item__figure img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.detail-specs { margin: 0; font-size: 14px; }
.detail-specs > div { display: grid; grid-template-columns: minmax(110px,.4fr) 1fr; gap: 18px; padding: 12px 0; border-top: 1px solid var(--line); }
.detail-specs dt { font-weight: 600; color: var(--steel); }
.detail-specs dd { margin: 0; min-width: 0; }
.detail-benefits { margin: 22px 0 0; padding-left: 19px; color: var(--steel); font-size: 15px; }
.detail-benefits li + li { margin-top: 8px; }
.detail-gallery-section, .detail-data-section { padding-block: 36px; }
.detail-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.detail-gallery figure { margin: 0; min-width: 0; }
.detail-gallery img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: 3px; background: var(--steel-dark); }
.detail-gallery figcaption { padding-top: 10px; font-size: 13px; color: var(--muted); }
.detail-table-scroll { overflow-x: auto; margin: 24px 0 36px; }
.detail-table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 14px; line-height: 1.5; background: #fff; }
.detail-table caption { text-align: left; margin-bottom: 18px; font: 600 30px/1.1 var(--display-font); color: var(--ink); }
.detail-table th, .detail-table td { padding: 15px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); min-width: 120px; }
.detail-table thead { color: #fff; background: var(--steel); }
.detail-table thead th { overflow-wrap: normal; word-break: normal; hyphens: none; }
.detail-table thead th:first-child { white-space: nowrap; }
.detail-table tbody th { color: var(--steel); font-weight: 600; white-space: nowrap; }
.detail-table tbody tr:nth-child(even) { background: rgba(23,48,63,.035); }
.detail-table td:nth-child(2) { min-width: 220px; }
.detail-table-hint { display: none; }
.detail-note { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 32px 0; max-width: 780px; }
.detail-contact {
  display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: 48px;
  padding: 56px; margin: 0; color: #fff; background: var(--steel);
}
.detail-contact h2 { margin: 0 0 24px; font: 600 40px/1.07 var(--display-font); max-width: 14ch; }
.detail-contact p { margin: 0; color: #e1e8eb; font-size: 15px; line-height: 1.7; }
.detail-contact .eyebrow { color: var(--copper-light); margin-bottom: 20px; font-size: 11px; }
.detail-contact strong { font-weight: 500; color: #fff; }
.detail-contact__email { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; font-size: 17px; text-underline-offset: 5px; }
.detail-contact__email span { color: var(--copper-light); }
.detail-contact__phone { display: block; margin-top: 12px; color: #e1e8eb; font-size: 14px; text-decoration: none; }
.contact-form { min-width: 0; position: relative; }
.contact-field { display: grid; gap: 8px; margin-bottom: 20px; }
.contact-field label { font-size: 13px; font-weight: 500; }
.contact-field label span { font-weight: 400; color: #c5d0d6; }
.contact-field input, .contact-field textarea {
  display: block; width: 100%; min-width: 0; border: 1px solid #81929c;
  padding: 13px 14px; border-radius: 2px; background: rgba(255,255,255,.06);
  color: #fff; font: 400 16px/1.5 var(--body-font);
}
.contact-field textarea { resize: vertical; min-height: 150px; }
.contact-field input::placeholder, .contact-field textarea::placeholder { color: #c2cbd0; opacity: 1; }
.contact-field input:focus-visible, .contact-field textarea:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 3px; border-color: transparent; }
.contact-honeypot { display: none; }
.detail-contact .form-privacy, .detail-contact .form-preview-note { font-size: 12px; line-height: 1.6; }
.form-data-notice { margin: 10px 0 20px; font-size: 12px; color: #e1e8eb; }
.form-data-notice summary { width: fit-content; padding: 5px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.form-data-notice summary:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 4px; }
.form-data-notice > div { padding: 8px 0 10px; }
.detail-contact .form-data-notice p { font-size: 12px; margin-top: 12px; }
.detail-contact .form-preview-note { margin-bottom: 20px; color: #d9e1e5; }
.detail-contact .button { display: inline-flex; align-items: center; gap: 28px; margin-top: 20px; border: 0; cursor: pointer; background: var(--copper-light); color: var(--steel-dark); font: 600 14px/1.4 var(--body-font); }
.detail-contact .button:hover { background: #efbb93; }
.detail-contact .button:disabled { opacity: .65; cursor: wait; }
.detail-contact .form-status { margin-top: 18px; min-height: 1.7em; font-size: 14px; }
.form-status[data-state] { padding: 14px 16px; border: 1px solid #9fb8c5; background: rgba(0,0,0,.12); }
.form-status[data-state="error"] { border-color: #ffc3a8; color: #ffe2d5; }
.detail-project-cta { margin-top: 44px; scroll-margin-top: 24px; }
.detail-project-cta .eyebrow { margin: 0 0 14px; color: var(--bronze); font-size: 11px; }
.detail-project-cta h2 { max-width: 25ch; margin: 0 0 18px; color: var(--steel); font: 600 clamp(32px,3.5vw,42px)/1.08 var(--display-font); letter-spacing: -.01em; text-wrap: balance; }
.detail-project-cta__copy { max-width: 65ch; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.detail-family-nav { margin-top: 40px; }
.detail-family-nav h2 { margin: 0 0 10px; color: var(--steel); font: 600 29px/1.1 var(--display-font); }
.detail-family-nav > p { margin: 0 0 20px; font-size: 14px; color: var(--muted); }
.detail-family-nav__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.detail-family-nav__links a { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 0; color: var(--steel); text-decoration: none; font-size: 13px; line-height: 1.5; font-weight: 500; }
.detail-family-nav__links a > span:last-child { flex: 0 0 auto; color: var(--bronze); font-size: 15px; line-height: 1; }
.detail-family-nav__links a:hover > span:first-child, .detail-family-nav__links a:focus-visible > span:first-child { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width:767px) {
  .detail-project-cta { margin-top: 32px; }
  .detail-project-cta h2 { font-size: 34px; }
  .detail-project-cta__copy { font-size: 15px; }
  .detail-family-nav { margin-top: 32px; }
}
.detail-related { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 36px; font-size: 15px; }
.detail-related p { flex-basis: 100%; margin: 0; font-weight: 600; }
.standards-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 28px; margin: 28px 0 0; padding: 0; list-style: none; }
.standards-list li { padding: 14px 0; border-top: 1px solid var(--line); color: var(--steel); font-weight: 600; }

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .product-topic:hover { border-color: var(--copper); }
}
@media (max-width:1199px) {
  .product-intro { gap: 36px; }
  .product-card__body { padding: 23px; }
  .product-card h3 { font-size: 29px; }
}
@media (max-width:991px) {
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-intro { grid-template-columns: 1fr; gap: 24px; }
  .product-drawer { width: calc(100% - 28px); }
  .detail-item { gap: 28px; grid-template-columns: 1.2fr .8fr; }
  .application-heading-row { display: block; }
  .application-heading-row > a { display: inline-block; margin-top: 24px; }
}
@media (max-width:767px) {
  .product-grid { gap: 18px; }
  .product-topics { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
  .product-intro { margin-bottom: 32px; }
  .product-intro__copy p { font-size: 16px; }
  .product-drawer { width: 100%; }
  .product-drawer__bar { padding: 12px 20px; }
  .product-drawer__bar > div { gap: 12px; }
  .product-drawer__brand { font-size: 17px; }
  .product-drawer__close { min-width: 44px; justify-content: center; }
  .product-drawer__close span:last-child { display: none; }
  .detail-lead { font-size: 17px; }
  .detail-jump-nav { gap: 12px 20px; }
  .detail-item { grid-template-columns: 1fr; padding-block: 32px; gap: 24px; }
  .detail-item__figure { grid-row: auto; }
  .detail-item h2 { font-size: 30px; }
  .detail-specs > div { grid-template-columns: minmax(95px,.4fr) 1fr; gap: 14px; }
  .detail-table th, .detail-table td { padding: 13px 14px; }
  .detail-table-hint { display: block; margin: -22px 0 30px; color: var(--muted); font-size: 12px; }
  .product-loading, .product-error { padding: 44px 24px; }
  .product-page { padding-top: 30px; }
}
@media (max-width:575px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-card img { aspect-ratio: 16/9; }
  .product-card__body { padding: 24px; }
  .product-card p { margin-bottom: 22px; }
  .product-topic { padding: 24px; }
  .detail-gallery { gap: 20px; grid-template-columns: 1fr; }
  .detail-specs > div { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion:reduce) {
  .product-drawer { transition: none; }
  .product-loading__mark { animation: none; }
}

@media (max-width:991px) {
  .detail-hero { min-height: 510px; padding: 56px 36px 44px; }
  .detail-hero h1 { font-size: 60px; }
  .detail-body { padding: 30px 36px 40px; }
  .detail-contact { padding: 44px 36px; gap: 32px; }
  .detail-contact h2 { font-size: 36px; }
}
@media (max-width:767px) {
  .detail-hero { min-height: 500px; padding: 54px 24px 38px; }
  .detail-hero::after { background: linear-gradient(0deg, rgba(3,12,19,.97), rgba(3,12,19,.85) 54%, rgba(3,12,19,.26)); }
  .detail-hero h1 { font-size: 48px; max-width: 14ch; }
  .detail-hero .eyebrow { font-size: 10px; margin-bottom: 16px; }
  .detail-lead { font-size: 17px; }
  .detail-hero__cta { margin-top: 24px; }
  .detail-body { padding: 24px 24px 36px; }
  .detail-contact { grid-template-columns: 1fr; padding: 38px 24px; gap: 32px; }
  .detail-contact h2 { max-width: 20ch; font-size: 38px; }
  .detail-contact__email { margin-top: 22px; }
  .detail-contact .button { width: 100%; justify-content: space-between; }
  .product-page .product-detail { margin-inline: -20px; }
}
@media (max-width:575px) {
  .detail-hero { padding-inline: 20px; }
  .detail-hero h1 { font-size: 44px; }
  .detail-body { padding-inline: 20px; }
  .detail-contact { padding-inline: 20px; }
}

/* The shared form also serves general inquiries on home and contact pages. */
.site-contact { background: var(--steel); color: #fff; }
.site-contact .detail-contact {
  grid-template-columns: 1fr 1fr; gap: 80px;
  padding: 88px var(--container-gutter);
  margin-inline: auto;
}
.site-contact .detail-contact h2 { font-size: clamp(40px,4.5vw,58px); max-width: 15ch; }
.detail-contact__address { margin: 32px 0 0; font-style: normal; font-size: 15px; line-height: 1.7; color: #e1e8eb; }
.detail-contact__address span { display: block; margin-bottom: 8px; color: var(--copper-light); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.contact-page .page-hero { margin-bottom: 44px; }
.contact-page > .detail-contact { border-radius: 4px; }
@media (max-width:991px) {
  .site-contact .detail-contact { gap: 40px; padding-block: 64px; }
}
@media (max-width:767px) {
  .site-contact .detail-contact { grid-template-columns: 1fr; gap: 36px; padding-block: 48px; }
  .site-contact .detail-contact h2 { font-size: 40px; max-width: 18ch; }
  .contact-page .page-hero { margin-bottom: 32px; }
  .contact-page > .detail-contact { margin-inline: calc(-1 * var(--container-gutter)); border-radius: 0; padding-inline: var(--container-gutter); }
  .contact-page { padding-bottom: 0; }
}

/* Standalone product pages: full-width hero, shared content alignment.
   Drawer articles are outside .product-page and retain their own spacing. */
.product-page.container { max-width: none; padding-inline: 0; padding-block: 0; }
.product-page > .product-detail { margin-inline: 0; }
.product-page > .seo-breadcrumb,
.product-page .detail-body {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}
.product-page .detail-hero {
  --product-hero-gutter: max(var(--container-gutter), calc((100% - var(--container-max)) / 2 + var(--container-gutter)));
  padding-inline: var(--product-hero-gutter);
  padding-top: 88px;
}
.product-page .detail-hero > .seo-breadcrumb {
  position: absolute;
  top: 24px;
  inset-inline: var(--product-hero-gutter);
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 12px;
}
.product-drawer .seo-breadcrumb { display: none; }
@media (max-width: 767px) {
  .product-page .detail-hero { padding-top: 76px; }
  .product-page .detail-hero > .seo-breadcrumb { top: 20px; }
}

/* Full-width standalone enquiry background, immediately above the meta footer. */
.product-page .detail-contact {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: max(var(--container-gutter), calc((100% - var(--container-max)) / 2 + var(--container-gutter)));
}

/* Contact uses the same edge-to-edge hero and enquiry layout as product pages. */
.contact-page > .detail-contact { border-radius: 0; }

.contact-page .contact-brand { white-space: nowrap; }