/* Overcloq homepage / product sections and media */
:root {
  --paper: #f7f4ee;
  --paper-light: #fcfaf5;
  --ink: #181918;
  --muted: #666762;
  --red: #fd0100;
  --line: #d9d6d0;
  --dark: #181918;
  --dark-alt: #222321;
  --white: #fbf4ed;
  --max: 1432px;
}
*, *::before, *::after {box-sizing: border-box}
html { scroll-behavior: smooth; scroll-padding-top: 85px }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased }
button, a { -webkit-tap-highlight-color: transparent }
a { text-decoration: none; color: inherit }
a:focus-visible, button:focus-visible { outline: 3px solid var(--red); outline-offset: 5px }
.shell { width: min(calc(100% - 104px), var(--max)); margin-inline: auto }
.skip-link { position: absolute; top: -100px; left: 10px; z-index: 100; background: #fff; padding: 10px }
.skip-link:focus { top: 10px }
.site-header { position: relative; z-index: 4; background: var(--dark); color: var(--white); border-bottom: 1px solid #363835 }
.header-inner { height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 30px }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; gap: 11px }
.brand-symbol { display: block; width: 35px; height: 28px; object-fit: contain }
.brand-wordmark { display: block; width: 150px; height: 42px; object-fit: contain }
.primary-nav { display: flex; align-items: center; gap: clamp(20px, 2.8vw, 49px); margin-left: auto }
.primary-nav a { font-size: 12px; font-weight: 700; transition: color .2s }
.primary-nav a:hover { color: var(--red) }
.nav-contact { border: 1px solid #777872; min-height: 43px; padding: 0 19px; display: inline-flex; align-items: center; gap: 27px; font-size: 12px; font-weight: 800; margin-left: 28px; transition: background .2s, color .2s, border-color .2s }
.nav-contact span { font-size: 17px; color: var(--red) }
.nav-contact:hover { color: var(--dark); background: var(--white); border-color: var(--white) }
.red-square { display: inline-block; width: 7px; height: 7px; background: var(--red); vertical-align: 2px; margin-right: 9px }
.red-period { color: var(--red) }
.eyebrow, .overline, .hero-footnote, .draft-note, .slot-top, .slot-bottom, .index-num, .featured-note, .section-outro, .hero-scroll { font-weight: 800; font-size: 10px; line-height: 1.5; letter-spacing: .14em }
.overline { margin: 0 0 19px; color: #686a64 }
.overline-light { color: #b8b9b2 }
.hero { background: var(--dark); color: var(--white); padding: 54px 0 64px; }
.hero-grid { display: grid; grid-template-columns: 1.07fr .93fr; align-items: center; gap: min(5vw, 76px); }
.hero-content { padding-bottom: 4px; }
.eyebrow { margin: 0 0 14px; color: #a6a7a1; }
.hero-logo-heading { padding: 0; margin: 0; width: 100%; line-height: 0; }
.hero-logo { display: block; height: auto; width: min(100%, 478px); }

.hero-intro { max-width: 560px; margin: 12px 0 14px; color: #f4f1e9; font-size: clamp(28px, 3vw, 42px); font-weight: 550; letter-spacing: -.05em; line-height: 1.12; }
.hero-copy { max-width: 560px; margin: 0 0 30px; color: #bcbdb7; font-size: 17px; line-height: 1.65; }
.hero-actions { display: flex; gap: 25px; align-items: center; flex-wrap: wrap }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 55px; font-size: 12px; font-weight: 800; transition: transform .15s, background .15s, color .15s }
.button:hover { transform: translateY(-2px) }
.button-dark { color: var(--ink); background: var(--white); padding: 0 24px }
.button-dark:hover { background: #e4dfd5 }
.button-dark span { color: var(--red); font-size: 20px; font-weight: 400 }
.button-text { padding: 0 1px; border-bottom: 1px solid #6a6c66; min-height: 45px }
.button-text span { font-size: 18px; font-weight: 400 }
.hero-footnote { margin-top: 44px; display: flex; gap: 15px; align-items: center; color: #989a93; letter-spacing: .11em }
.micro-line { height: 1px; width: 28px; background: #a6a7a1 }
.media-slot { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.media-slot::before { content: ""; z-index: -1; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 74px 74px; background-position: -1px -1px; pointer-events: none }
.media-slot::after { content: ""; pointer-events: none; position: absolute; inset: 13px; border: 1px solid rgba(255,255,255,.07) }
.slot-top, .slot-bottom { position: relative; z-index: 1; display: flex; gap: 12px; justify-content: space-between; padding: 24px; color: rgba(255,255,255,.63); font-size: 9px; }
.slot-center { text-align: center; padding: 28px 20px; position: relative; z-index: 1; align-self: center; max-width: 400px; }
.slot-center strong { display: block; margin-top: 9px; font-size: clamp(20px,2vw,28px); font-weight: 600; letter-spacing: -.025em }
.slot-center small { display: block; margin-top: 12px; font-size: 12px; line-height: 1.6; opacity: .64; font-weight: 400 }
.slot-glyph { display: flex; justify-content: center; align-items: center; gap: 5px; margin: 0 auto 20px; height: 40px }
.slot-glyph i { display: block; height: 32px; width: 12px; border: 1px solid currentColor; opacity: .25 }
.slot-glyph i:nth-child(2) { width: 9px }
.slot-glyph i:nth-child(3) { width: 6px }
.slot-glyph i:nth-child(4) { width: 3px }
.hero-photo { margin: 0; min-width: 0; }
.hero-photo img { display: block; width: 100%; height: clamp(320px, 32vw, 420px); object-fit: cover; object-position: center 38%; border: 1px solid rgba(255,255,255,.17); }
.hero-photo-wide img { height: clamp(340px, 34vw, 470px); object-position: center center; }
.hero-photo figcaption { margin-top: 12px; color: #969991; font-size: 9px; font-weight: 800; letter-spacing: .13em; line-height: 1.4; }
.hero-scroll { margin-top: 65px; border-top: 1px solid #363835; padding-block: 21px; display: flex; justify-content: space-between; color: #999a93; font-size: 9px }
.hero-scroll a { color: var(--white); display: flex; gap: 24px; align-items: center }
.hero-scroll a span { color: var(--red); font-size: 20px; line-height: .6; letter-spacing: 0 }
.product-index { padding: 90px 0 111px; background: var(--paper-light); }
.index-top { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 36px }
.index-top h2 { font-size: clamp(27px, 3vw, 41px); line-height: 1.1; margin: 0; letter-spacing: -.05em; max-width: 660px }
.index-top .overline { margin-bottom: 6px; }
.index-links { border-top: 1px solid #d2d1cb; display: grid; grid-template-columns: repeat(3,1fr) }
.index-link { position: relative; padding: 29px 28px 32px 0; min-height: 143px; border-bottom: 1px solid #d2d1cb; display: flex; flex-direction: column; justify-content: space-between; transition: color .15s, padding-left .15s; }
.index-link + .index-link { border-left: 1px solid #d2d1cb; padding-left: 28px; }
.index-link:hover { color: var(--red) }
.index-link:hover .index-arrow { transform: translate(3px, -3px) }
.index-num { display: block; color: #8b8b84; font-size: 9px }
.index-name { display: block; font-size: clamp(21px, 2.1vw, 29px); font-weight: 700; letter-spacing: -.04em; padding-right: 25px }
.index-arrow { position: absolute; right: 28px; bottom: 31px; font-size: 21px; transition: transform .15s }
.product-section { padding: 120px 0 98px; scroll-margin-top: 0 }
.product-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(45px, 7vw, 118px); align-items: end; margin-bottom: 58px }
.product-heading h2 { font-size: clamp(60px, 6.7vw, 104px); letter-spacing: -.075em; line-height: 1; margin: 0 0 22px; font-weight: 740 }
.product-subtitle { margin: 0; font-size: clamp(18px, 2vw, 27px); letter-spacing: -.04em; line-height: 1.25 }
.product-description { padding-bottom: 3px; max-width: 480px; }
.product-description p { font-size: 17px; line-height: 1.65; margin: 0 0 16px }
.product-description p:last-child { margin-bottom: 0 }
.draft-note { color: #a0a099; display: inline-block; margin-top: 18px; font-size: 8px }
.featured-note { display: inline-block; margin-left: 16px; padding: 5px 8px 4px; border: 1px solid #6b6d65; letter-spacing: .08em; font-size: 8px }
.finish-section { background: var(--dark); color: var(--white) }
.finish-section .product-subtitle { color: #c4c4be }
.finish-section .product-description { color: #c1c2ba }
.finish-media-grid { display: grid; grid-template-columns: 1.58fr 1fr; gap: 18px }
.media-dark { color: #eeece4; background: #292b29 }
.media-dark::after { border-color: rgba(255,255,255,.055) }
.finish-primary { min-height: 580px }
.finish-primary .slot-center strong { font-size: clamp(27px, 2.4vw, 35px) }
.media-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 18px }
.finish-secondary .slot-center strong { font-size: 24px }
.finish-secondary .slot-center small { max-width: 170px }
.finish-secondary .slot-top, .finish-secondary .slot-bottom { padding: 18px }
.section-outro { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; color: #81827e; font-size: 9px }
.finish-section .section-outro { color: #9d9e98 }
.shift-section { background: var(--paper-light); color: var(--ink) }
.shift-section .product-description { color: #555750 }
.shift-media-grid { display: grid; grid-template-columns: 1.74fr .76fr; gap: 18px }
.media-warm { background: #e6e3dc; color: #555751 }
.media-warm::before, .media-silver::before { background-image: linear-gradient(to right, rgba(24,25,24,.052) 1px, transparent 1px),linear-gradient(to bottom,rgba(24,25,24,.052) 1px,transparent 1px); background-size: 74px 74px }
.media-warm::after, .media-silver::after { border-color: rgba(24,25,24,.12) }
.media-warm .slot-top, .media-warm .slot-bottom, .media-silver .slot-top, .media-silver .slot-bottom { color: #868781 }
.shift-primary { min-height: 490px }
.shift-secondary { min-height: 490px }
.shift-secondary .slot-center strong { font-size: 24px }
.play-glyph { display: grid; place-items: center; width: 70px; height: 70px; border: 1px solid #a8aaa4; border-radius: 50%; color: #70736d; font-size: 17px; margin: 0 auto 25px; padding-left: 4px }
.beam-section { background: #eceae4; color: var(--ink) }
.beam-section .product-description { color: #555750 }
.beam-media-grid { display: grid; grid-template-columns: 1.4fr .86fr; gap: 18px }
.media-silver { background: #d6d4cd; color: #50534d }
.beam-primary, .beam-secondary { min-height: 450px }
.contact-section { background: #1c1d1b; color: var(--white); padding: 106px 0 118px }
.contact-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: end }
.contact-inner h2 { margin: 0; font-size: clamp(42px, 5.2vw, 78px); letter-spacing: -.064em; line-height: 1.09 }
.contact-right { padding-bottom: 5px }
.contact-right p { max-width: 425px; margin: 0 0 25px; font-size: 18px; line-height: 1.65; color: #bbbcb5 }
.contact-pending { display: inline-block; border-bottom: 1px solid #83847f; padding: 0 0 14px; font-size: 13px; color: #d2d2cc }
.contact-email { display: inline-flex; align-items: center; gap: 25px; border-bottom: 1px solid #aaa; padding-bottom: 12px; font-size: 22px; font-weight: 700 }
.contact-email span { color: var(--red) }
.site-footer { background: #131513; color: #b6b7b1; padding: 35px 0 }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px }
.footer-brand .brand-symbol { width: 27px; height: 23px }
.footer-brand .brand-wordmark { width: 124px; height: 30px }
.footer-inner p { font-size: 12px; margin: 0 }
.footer-inner > a:last-child { font-size: 12px; font-weight: 700 }
@media (min-width: 1680px) {
  .hero-logo { width: min(100%, 570px) }
  .hero-photo-wide img { height: clamp(360px, 30vw, 520px) }
}
@media (max-width: 1150px) {
  .shell { width: min(calc(100% - 64px), var(--max)) }
  .hero { padding-top: 50px; padding-bottom: 58px }
  .hero-grid { gap: 38px }
  .hero-logo { width: min(100%, 440px) }
  .hero-photo img { height: clamp(300px, 34vw, 390px) }
  .hero-photo-wide img { height: clamp(320px, 36vw, 410px) }
  .hero-footnote { margin-top: 40px }
  .product-section { padding-top: 94px }
  .finish-primary { min-height: 470px }
  .shift-primary,.shift-secondary { min-height: 410px }
  .beam-primary,.beam-secondary { min-height: 400px }
}
@media (max-width: 850px) {
  .shell { width: min(calc(100% - 44px), var(--max)) }
  .header-inner { height: 76px; gap: 18px }
  .brand-symbol { width: 31px; height: 25px }
  .brand-wordmark { width: 125px; height: 35px }
  .primary-nav { gap: 17px }
  .primary-nav a { font-size: 11px }
  .nav-contact { margin-left: 0; padding-inline: 11px; gap: 10px }
  .hero-grid { grid-template-columns: 1fr; gap: 34px }
  .hero { padding-top: 52px; padding-bottom: 60px }
  .hero-logo { width: min(100%, 440px) }
  .hero-intro { max-width: 610px }
  .hero-copy { max-width: 610px; font-size: 16px }
  .hero-footnote { margin-top: 40px }
  .hero-photo { max-width: 640px }
  .hero-photo img { height: clamp(310px, 53vw, 400px) }
  .hero-photo-wide img { height: clamp(310px, 50vw, 430px) }
  .hero-scroll { margin-top: 42px }
  .product-intro { grid-template-columns: 1fr 1fr; gap: 30px }
  .product-heading h2 { font-size: clamp(54px,7.5vw,75px) }
  .product-description p { font-size: 15px }
  .product-index { padding: 75px 0 80px }
  .finish-media-grid { grid-template-columns: 1.2fr 1fr }
  .finish-primary { min-height: 440px }
  .slot-top,.slot-bottom { padding: 18px }
  .slot-center small { font-size: 11px }
  .finish-secondary .slot-center strong { font-size: 19px }
  .contact-inner { gap: 30px }
}
@media (max-width: 690px) {
  .shell { width: min(calc(100% - 38px), var(--max)) }
  .header-inner { height: 70px }
  .brand { gap: 7px }
  .brand-symbol { width: 27px; height: 23px }
  .brand-wordmark { width: 113px; height: 30px }
  .primary-nav { display: none }
  .nav-contact { font-size: 10px; min-height: 37px }
  .hero { padding-top: 38px; padding-bottom: 49px }
  .eyebrow { font-size: 9px; margin-bottom: 31px; letter-spacing: .1em }
  .hero-logo { width: min(100%, 420px) }
  .hero-intro { font-size: clamp(26px, 6.1vw, 34px); line-height: 1.17; margin: 9px 0 11px }
  .hero-copy { font-size: 15px; line-height: 1.6; margin-bottom: 24px }
  .hero-actions { gap: 18px }
  .button { min-height: 52px; font-size: 11px }
  .button-dark { padding-inline: 17px; gap: 17px }
  .hero-footnote { margin-top: 39px; font-size: 8px }
  .hero-grid { gap: 33px }
  .hero-photo img { height: clamp(255px, 71vw, 365px) }
  .hero-photo-wide img { height: clamp(255px, 72vw, 360px) }
  .hero-photo figcaption { margin-top: 9px; font-size: 8px }
  .hero-scroll { margin-top: 35px; padding-block: 19px; font-size: 8px }
  .hero-scroll span:first-child { max-width: 180px }
  .product-index { padding: 68px 0 80px }
  .index-top { display: block; margin-bottom: 33px }
  .index-top h2 { margin-top: 12px; max-width: 450px }
  .index-links { display: block }
  .index-link { min-height: 93px; padding: 17px 30px 16px 0 !important; border-left: 0 !important }
  .index-name { font-size: 25px }
  .index-arrow { right: 5px; bottom: 22px }
  .product-section { padding: 75px 0 65px }
  .product-intro { display: block; margin-bottom: 36px }
  .product-heading h2 { font-size: clamp(53px, 11vw, 83px); margin-bottom: 16px }
  .product-subtitle { font-size: 22px }
  .product-description { margin-top: 29px; max-width: 570px }
  .product-description p { font-size: 16px; line-height: 1.61 }
  .featured-note { margin-left: 9px; font-size: 7px }
  .finish-media-grid,.shift-media-grid,.beam-media-grid { grid-template-columns: 1fr; gap: 12px }
  .finish-primary { min-height: 370px }
  .media-stack { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 12px }
  .finish-secondary { min-height: 218px }
  .finish-secondary .slot-top,.finish-secondary .slot-bottom { padding: 13px; font-size: 8px }
  .finish-secondary .slot-center { padding: 10px }
  .finish-secondary .slot-center strong { font-size: 17px }
  .finish-secondary .slot-center small { font-size: 10px; margin-top: 6px }
  .shift-primary,.beam-primary { min-height: 350px }
  .shift-secondary,.beam-secondary { min-height: 255px }
  .section-outro { font-size: 8px }
  .contact-section { padding: 76px 0 83px }
  .contact-inner { display: block }
  .contact-inner h2 { font-size: clamp(45px, 9vw, 66px) }
  .contact-right { margin-top: 31px }
  .contact-right p { font-size: 16px }
  .footer-inner { flex-wrap: wrap; justify-content: space-between; gap: 20px }
  .footer-inner p { order: 3; flex-basis: 100% }
}
@media (max-width: 390px) {
  .hero-logo { width: 100% }
  .button-text { font-size: 10px; gap: 9px }
  .hero-photo img { height: 260px }
  .hero-photo-wide img { height: 250px }
  .slot-top,.slot-bottom { font-size: 8px; padding: 14px }
  .slot-center strong { font-size: 20px }
  .slot-center small { font-size: 10px }
  .featured-note { display: block; width: max-content; margin: 9px 0 0 16px }
  .product-heading h2 { font-size: 50px }
  .finish-secondary .slot-center strong { font-size: 15px }
  .finish-secondary .slot-bottom { display: none }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *,*::before,*::after { transition: none !important } }

/* Photo Finish: full-width subproducts, matching Frame Shift / Beam Break media placeholders */
.finish-overview { margin-bottom: 74px; }
.finish-model { scroll-margin-top: 26px; }
.finish-overview + .finish-model { padding-top: 68px; border-top: 1px solid #454640; }
.finish-model-second { margin-top: 90px; padding-top: 85px; border-top: 1px solid #454640; }
.finish-model-intro { margin-bottom: 36px; }
.finish-model-intro .product-heading h3 { font-size: clamp(50px, 5.6vw, 84px); font-weight: 740; line-height: 1; letter-spacing: -.065em; margin: 0 0 18px; }
.finish-model-intro .product-description { max-width: 470px; }
.finish-model-media { display: grid; grid-template-columns: 1.58fr 1fr; gap: 18px; }
.finish-model-media .finish-primary, .finish-model-media .finish-secondary { min-height: 410px; }
.finish-model-media .finish-secondary .slot-center strong { font-size: 25px; }
@media (max-width: 850px) {
  .finish-overview { margin-bottom: 50px; }
  .finish-overview + .finish-model { padding-top: 50px; }
  .finish-model-second { margin-top: 65px; padding-top: 64px; }
  .finish-model-media { grid-template-columns: 1.25fr 1fr; }
  .finish-model-media .finish-primary, .finish-model-media .finish-secondary { min-height: 370px; }
}
@media (max-width: 690px) {
  .finish-overview { margin-bottom: 42px; }
  .finish-overview + .finish-model { padding-top: 42px; }
  .finish-model-intro { margin-bottom: 28px; }
  .finish-model-intro .product-heading h3 { font-size: clamp(43px, 11vw, 66px); margin-bottom: 14px; }
  .finish-model-intro .product-description { margin-top: 24px; }
  .finish-model-second { margin-top: 54px; padding-top: 54px; }
  .finish-model-media { grid-template-columns: 1fr; gap: 12px; }
  .finish-model-media .finish-primary { min-height: 330px; }
  .finish-model-media .finish-secondary { min-height: 210px; }
  .finish-model-media .finish-secondary .slot-center strong { font-size: 23px; }
}

/* 2026-10-13 refinements: full photo-finish image and compact OEM table */
.hero-photo-wide img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
.oem-section { padding: 64px 0 70px; }
.oem-inner { grid-template-columns: .75fr 1.25fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.oem-copy h2 { font-size: clamp(32px, 3.4vw, 46px); margin: 3px 0 14px; line-height: 1.12; }
.oem-copy p:last-child { font-size: 15px; line-height: 1.65; }
.oem-table-wrap { width: 100%; min-width: 0; }
.oem-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; line-height: 1.55; }
.oem-table caption { caption-side: top; text-align: left; text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: #70736d; padding: 0 0 13px; }
.oem-table th, .oem-table td { padding: 13px 10px 13px 0; vertical-align: top; border-top: 1px solid #dad7d0; }
.oem-table tr:last-child th, .oem-table tr:last-child td { border-bottom: 1px solid #dad7d0; }
.oem-table th { width: 31%; white-space: normal; font-size: 13px; font-weight: 750; }
.oem-table td { color: #51534d; font-weight: 400; }
.oem-table td strong { font-weight: 700; color: var(--ink); }
@media (max-width: 850px) {
  .oem-inner { grid-template-columns: 1fr; gap: 24px; }
  .oem-section { padding: 56px 0 65px; }
}
@media (max-width: 690px) {
  .oem-section { padding: 48px 0 56px; }
  .oem-copy h2 { font-size: 34px; }
  .oem-table th { width: 35%; font-size: 12px; }
  .oem-table td { font-size: 13px; }
  .oem-table th, .oem-table td { padding-top: 12px; padding-bottom: 12px; }
}

/* Product pricing: one restrained format across all four products */
.product-pricing {
  display: flex;
  gap: 17px 40px;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px 0 22px;
  margin: -19px 0 30px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.product-pricing-dark { color: #989b93; }
.product-pricing-light { color: #858680; }
.pricing-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.pricing-offers { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 36px; }
.pricing-offer strong { display: block; color: var(--ink); font-size: clamp(22px, 2.3vw, 31px); letter-spacing: -.045em; line-height: 1.2; }
.pricing-offer span { display: block; font-size: 12px; line-height: 1.45; margin-top: 5px; color: #676963; }
.product-pricing-dark .pricing-offer strong { color: var(--white); }
.product-pricing-dark .pricing-offer span { color: #b5b7b0; }
.product-pricing .pricing-note { flex-basis: 100%; margin: 0; color: #74766f; font-size: 11px; line-height: 1.5; }
.product-pricing-dark .pricing-note { color: #a2a49e; }
.product-pricing .pricing-includes { flex-basis: 100%; margin: -6px 0 -8px; color: #dddcd6; font-size: 13px; line-height: 1.5; }
.finish-model-media-triple .finish-primary { min-height: 490px; }
.finish-model-media-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; min-height: 490px; }
.finish-model-media-triple .finish-secondary { min-height: 0; }
.finish-model-media-triple .play-glyph { width: 43px; height: 43px; font-size: 13px; margin-bottom: 12px; color: #b6b8b2; border-color: #6b6e68; }
.finish-model-media-triple .slot-center strong { font-size: 22px; }
.finish-model-media-triple .slot-center small { margin-top: 8px; }
@media (max-width: 850px) {
  .finish-model-media-triple .finish-primary, .finish-model-media-stack { min-height: 410px; }
}
@media (max-width: 690px) {
  .product-pricing { gap: 14px; margin-top: -7px; padding: 19px 0 20px; }
  .pricing-label { flex-basis: 100%; }
  .pricing-offer strong { font-size: 25px; }
  .finish-model-media-triple .finish-primary { min-height: 320px; }
  .finish-model-media-stack { min-height: 0; gap: 12px; }
  .finish-model-media-triple .finish-secondary { min-height: 245px; }
}

/* 2026-10-13 media examples: real PF300R and Frame Shift assets */
.media-asset-card::before { display: none; }
.media-asset-card .asset-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #111;
}
.media-asset-card .asset-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,.02) 28%, rgba(0,0,0,.04) 72%, rgba(0,0,0,.34));
  pointer-events: none;
}
.media-asset-card img,
.media-asset-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-asset-card .slot-top,
.media-asset-card .slot-bottom {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.media-asset-card .slot-bottom { margin-top: auto; }
.finish-model-media-triple .media-asset-card .asset-fill img { object-position: center top; }
.finish-model-media-triple .finish-secondary.media-asset-card .asset-fill video { object-position: center center; }

.shift-media-grid-rich {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.shift-featured-placeholder {
  min-height: 410px;
}
.shift-featured-placeholder .slot-center strong {
  font-size: clamp(28px, 2.8vw, 38px);
}
.shift-thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.shift-thumb {
  min-height: 245px;
}
.shift-thumb .slot-top,
.shift-thumb .slot-bottom {
  padding: 16px 18px;
}
.shift-thumb.media-asset-card img,
.shift-thumb.media-asset-card video {
  object-fit: contain;
  background: #efebe4;
}
.shift-thumb:last-child.media-asset-card img {
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 850px) {
  .shift-featured-placeholder { min-height: 360px; }
  .shift-thumb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 690px) {
  .shift-featured-placeholder { min-height: 320px; }
  .shift-thumb-grid { grid-template-columns: 1fr; gap: 12px; }
  .shift-thumb { min-height: 230px; }
}

/* Media revision: keep full PF300R output visible, no cropped image or video. */
.pf300r-examples {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.pf300r-example { margin: 0; min-width: 0; }
.pf300r-example img, .pf300r-example video {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border: 1px solid #454640;
  background: #101110;
  object-fit: contain;
}
.pf300r-example figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-top: 14px;
  color: #d2d2cc;
}
.pf300r-example figcaption span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  color: #969991;
}
.pf300r-example figcaption strong { font-size: 14px; font-weight: 600; }

/* Frame Shift: one true square placeholder, followed by exactly two small clips. */
.shift-media-examples { display: grid; gap: 26px; justify-items: start; }
.shift-media-examples .shift-featured-placeholder {
  width: min(100%, 400px);
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
}
.shift-media-examples .shift-featured-placeholder .slot-center { padding: 12px 20px; }
.shift-media-examples .shift-featured-placeholder .slot-center strong {
  font-size: clamp(24px, 2.2vw, 31px);
}
.shift-media-examples .shift-thumb-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  justify-items: stretch;
}
.shift-clip { min-width: 0; margin: 0; }
.shift-clip video {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #222320;
  display: block;
}
.shift-clip figcaption {
  margin-top: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #666762;
}
@media (max-width: 850px) {
  .pf300r-examples { gap: 14px; }
  .shift-media-examples .shift-thumb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 690px) {
  .pf300r-examples { grid-template-columns: 1fr; gap: 30px; }
  .shift-media-examples .shift-featured-placeholder { width: min(100%, 400px); min-height: 0; }
  .shift-media-examples .shift-thumb-grid { grid-template-columns: 1fr; }
  .shift-clip { max-width: 400px; }
}

/* Maintain the previous supporting-video thumbnail height. */
.shift-clip video { height: 245px; aspect-ratio: auto; }
@media (max-width: 690px) { .shift-clip video { height: 230px; } }

/* Compact PF300R examples. Preserve the entire line-scan image; crop
   only the lower 20% of the portrait rail-cam to equalize their height. */
.pf300r-examples {
  --pf-linescan-width: min(360px, calc(100vw - 38px));
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 26px;
}
.pf300r-example { flex: 0 0 auto; }
.pf300r-example:first-child { width: var(--pf-linescan-width); }
.pf300r-example:last-child { width: calc(var(--pf-linescan-width) * 0.917); }
.pf300r-example img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.pf300r-railcam-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 1024;
  overflow: hidden;
  background: #101110;
  border: 1px solid #454640;
}
.pf300r-railcam-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border: 0;
}

/* Center the 1:1 demo and its two supporting clips, without stretching
   either the placeholder or the 212 × 160 source videos. */
.shift-media-examples {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.shift-media-examples .shift-featured-placeholder {
  width: min(400px, 100%);
  aspect-ratio: 1;
  min-height: 0;
}
.shift-media-examples .shift-thumb-grid {
  width: min(100%, 818px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 400px));
  justify-content: center;
  gap: 18px;
}
@media (max-width: 800px) {
  .pf300r-examples {
    flex-direction: column;
    align-items: center;
    gap: 26px;
  }
}
@media (max-width: 690px) {
  .shift-media-examples .shift-thumb-grid {
    grid-template-columns: minmax(0, 400px);
    justify-items: stretch;
  }
}


/* Beam Break: original product renders shown without cropping. */
.beam-photo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  max-width: 1210px;
  margin-inline: auto;
  align-items: start;
}
.beam-photo { min-width: 0; margin: 0; }
.beam-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid #d4d0c7;
}
.beam-photo figcaption {
  margin-top: 13px;
  display: flex;
  gap: 14px;
  align-items: baseline;
  color: #585a54;
  font-size: 14px;
  font-weight: 600;
}
.beam-photo figcaption span {
  color: #888982;
  font-size: 10px;
  letter-spacing: .12em;
  font-weight: 800;
}
@media (max-width: 690px) {
  .beam-photo-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .beam-photo { width: min(100%, 510px); margin-inline: auto; }
  .beam-photo-context { width: min(100%, 440px); }
}

/* Product presentation: descriptive column, with smaller media on the right. */
.product-feature {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.03fr);
  gap: clamp(36px, 5.5vw, 84px);
  align-items: center;
}
.product-feature .feature-copy { min-width: 0; max-width: 530px; }
.product-feature .feature-media { width: 100%; max-width: 515px; min-width: 0; justify-self: end; }
.product-feature .product-intro {
  display: block;
  margin: 0;
}
.product-feature .product-heading h2 { font-size: clamp(50px, 4.4vw, 70px); margin-bottom: 17px; }
.product-feature .finish-model-intro .product-heading h3 { font-size: clamp(48px, 4.4vw, 70px); margin-bottom: 17px; }
.product-feature .product-subtitle { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.35; }
.product-feature .product-description {
  max-width: 465px;
  margin: 23px 0 0;
  padding: 0;
}
.product-feature .product-description p { font-size: 16px; line-height: 1.65; margin: 0 0 14px; }
.product-feature .product-pricing {
  margin: 28px 0 0;
  padding: 19px 0 0;
  border-top: 1px solid currentColor;
  border-bottom: 0;
  gap: 14px 24px;
}
.product-feature .pricing-label { flex-basis: 100%; }
.product-feature .pricing-offers { gap: 16px 26px; }
.product-feature .pricing-offer strong { font-size: clamp(22px, 2.1vw, 27px); }
.product-feature .pricing-note { font-size: 11px; }
.product-feature .pricing-includes { margin: 0; }

/* PF2500: two real product photos side-by-side, both uncropped. */
.product-feature .pf2500-examples {
  width: 100%;
  max-width: 515px;
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.product-feature .pf2500-example {
  margin: 0;
  min-width: 0;
  width: 100%;
}
.product-feature .pf2500-example img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,.08);
  background: #151614;
}
.product-feature .pf2500-example figcaption {
  display: block;
  padding-top: 10px;
  line-height: 1.45;
}
.product-feature .pf2500-example figcaption span {
  display: block;
  margin-bottom: 4px;
}
.product-feature .pf2500-example figcaption strong { font-size: 13px; }

/* PF300R: render and 18s rail-cam alongside the copy; no image cropping. */
.product-feature .pf300r-examples {
  --pf-linescan-width: auto;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
  align-items: center;
  justify-content: normal;
  gap: 16px;
}
.product-feature .pf300r-example { width: 100%; max-width: none; min-width: 0; }
.product-feature .pf300r-example:first-child,
.product-feature .pf300r-example:last-child { width: 100%; }
.product-feature .pf300r-example img { display: block; width: 100%; max-height: 382px; object-fit: contain; }
.product-feature .pf300r-railcam-frame { width: 100%; aspect-ratio: 800/1024; }
.product-feature .pf300r-example figcaption { display: block; padding-top: 10px; line-height: 1.45; }
.product-feature .pf300r-example figcaption span { display: block; margin-bottom: 4px; }
.product-feature .pf300r-example figcaption strong { font-size: 13px; }

/* Frame Shift: square video placeholder and exactly two small clips. */
.product-feature .shift-media-examples {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.product-feature .shift-media-examples .shift-featured-placeholder {
  width: min(100%, 286px);
  min-height: 0;
  aspect-ratio: 1;
}
.product-feature .shift-media-examples .shift-featured-placeholder .slot-center strong { font-size: 22px; }
.product-feature .shift-media-examples .shift-thumb-grid {
  width: min(100%, 445px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.product-feature .shift-clip video {
  width: 100%;
  height: auto;
  aspect-ratio: 212 / 160;
  object-fit: contain;
}
.product-feature .shift-clip figcaption { font-size: 9px; line-height: 1.45; margin-top: 8px; }

/* Beam Break: keep both product renders fully visible but restrained. */
.product-feature .beam-photo-grid {
  width: 100%;
  max-width: 510px;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: center;
}
.product-feature .beam-photo { width: 100%; min-width: 0; margin: 0; }
.product-feature .beam-photo img {
  width: 100%;
  height: 320px;
  object-fit: contain;
  object-position: center center;
  background: white;
}
.product-feature .beam-photo figcaption { display: block; font-size: 12px; line-height: 1.5; margin-top: 10px; }
.product-feature .beam-photo figcaption span { display: block; margin-bottom: 4px; }

/* Tablet and mobile: narrative and price come first, media below. */
@media (max-width: 930px) {
  .product-feature { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 650px; }
  .product-feature .feature-copy { max-width: 640px; }
  .product-feature .feature-media { justify-self: center; }
  .product-feature .product-description { max-width: 620px; }
}
@media (max-width: 690px) {
  .product-feature { gap: 26px; }
  .product-feature .product-heading h2 { font-size: clamp(48px, 10.5vw, 66px); }
  .product-feature .finish-model-intro .product-heading h3 { font-size: clamp(44px, 11vw, 66px); }
  .product-feature .product-description { margin-top: 20px; }
  .product-feature .product-pricing { margin-top: 25px; }
  .product-feature .finish-model-media .finish-primary { aspect-ratio: 1.65 / 1; }
  .product-feature .finish-model-media .finish-secondary { aspect-ratio: 2.1 / 1; }
  .product-feature .pf300r-examples { grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr); gap: 12px; }
  .product-feature .pf300r-example img { max-height: 320px; }
  .product-feature .shift-media-examples .shift-thumb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-feature .beam-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 360px) {
  .product-feature .pf300r-example figcaption strong { font-size: 11px; }
  .product-feature .beam-photo figcaption { font-size: 11px; }
}


/* PF300R: pair the two portrait examples, with the runners' line-scan below. */
.product-feature .pf300r-examples {
  align-items: start;
  row-gap: 24px;
}
.product-feature .pf300r-linescan-example {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 460px);
}
.product-feature .pf300r-linescan-link {
  display: block;
  width: 100%;
  border: 1px solid #454640;
  line-height: 0;
}
.product-feature .pf300r-linescan-example img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.product-feature .pf300r-linescan-example figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 11px;
}
.product-feature .pf300r-linescan-example figcaption span { margin-bottom: 0; }
.product-feature .pf300r-linescan-example figcaption a {
  color: #b8b9b2;
  font-size: 11px;
  margin-left: auto;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 690px) {
  .product-feature .pf300r-examples { row-gap: 18px; }
  .product-feature .pf300r-linescan-example { width: 100%; }
}


/* Streamlined navigation and product index */
.header-inner { justify-content: center; }
.primary-nav {
  width: min(100%, 820px);
  margin: 0;
  justify-content: space-between;
  gap: clamp(22px, 3vw, 60px);
}
.primary-nav a { white-space: nowrap; font-size: 13px; }
.hero-intro { margin-bottom: 29px; }
.product-index { padding-top: 46px; padding-bottom: 52px; }
/* Only the two real slow-motion examples are displayed. */
.product-feature .shift-media-examples { justify-content: center; }

@media (max-width: 850px) {
  .primary-nav { gap: 16px; }
  .primary-nav a { font-size: 12px; }
  .product-index { padding: 38px 0 44px; }
}
@media (max-width: 690px) {
  .header-inner { height: 62px; padding-inline: 18px; }
  .header-inner.shell { width: 100%; }
  .primary-nav {
    display: flex;
    width: 100%;
    margin: 0;
    gap: clamp(11px, 4vw, 18px);
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .primary-nav::-webkit-scrollbar { display: none; }
  .primary-nav a { flex: 0 0 auto; padding-block: 21px; }
  .product-index { padding: 32px 0 44px; }
}


/* Simplified landing: hero links replace the redundant top navigation. */
.hero { padding-top: 35px; padding-bottom: 38px; }
.hero-grid { gap: clamp(28px, 4vw, 60px); }
.hero-photo { width: 100%; max-width: 540px; justify-self: end; }
.hero-actions { column-gap: 24px; row-gap: 12px; }
.hero-intro { margin-bottom: 26px; }
.product-index { padding-top: 30px; padding-bottom: 38px; }
@media (max-width: 1150px) {
  .hero { padding-top: 32px; padding-bottom: 34px; }
  .hero-photo { max-width: 520px; }
  .product-index { padding-top: 26px; padding-bottom: 34px; }
}
@media (max-width: 850px) {
  .hero { padding-top: 34px; padding-bottom: 36px; }
  .hero-photo { max-width: 600px; justify-self: start; }
  .hero-actions { gap: 13px 22px; }
}
@media (max-width: 690px) {
  .hero { padding-top: 32px; padding-bottom: 34px; }
  .hero-photo { max-width: 100%; }
  .hero-actions { gap: 12px 18px; }
  .hero-intro { margin-bottom: 22px; }
  .product-index { padding: 24px 0 30px; }
}

/* Landing page: a restrained product-link strip at the foot of the first view. */
@media (min-width: 931px) {
  .hero {
    min-height: calc(100vh - 103px);
    min-height: calc(100svh - 103px);
    display: flex;
    align-items: center;
    padding: 72px 0;
  }
  .hero-grid { width: min(calc(100% - 104px), var(--max)); }
}
.product-index {
  padding: 0;
  background: #f7f4ee;
  border-top: 1px solid #ddd9d2;
}
.index-links { border-top: none; }
.index-link {
  min-height: 102px;
  padding: 16px 30px 17px 0;
  border-bottom: 0;
}
.index-link + .index-link { padding-left: 28px; }
.index-num { font-size: 9px; }
.index-name { font-size: clamp(20px, 1.85vw, 26px); }
.index-arrow { right: 19px; bottom: 25px; font-size: 19px; }
@media (min-width: 931px) and (max-width: 1150px) {
  .hero { padding: 60px 0; }
  .hero-grid { width: min(calc(100% - 64px), var(--max)); }
}
@media (max-width: 930px) {
  .hero { padding-top: 55px; padding-bottom: 42px; }
  .product-index { padding: 0; }
  .index-link { min-height: 94px; padding-top: 15px; padding-bottom: 15px; }
}
@media (max-width: 690px) {
  .hero { padding-top: 52px; padding-bottom: 39px; }
  .product-index { padding: 0; }
  .index-link { min-height: 76px; padding: 12px 32px 13px 0 !important; }
  .index-num { font-size: 8px; }
  .index-name { font-size: 23px; }
  .index-arrow { bottom: 19px; }
}

@media (max-width: 690px) {
  .product-feature .beam-photo img { height: 280px; }
}

@media (max-width: 930px) {
  .product-feature .pf2500-examples { max-width: 515px; }
}
@media (max-width: 690px) {
  .product-feature .pf2500-examples { gap: 10px; }
  .product-feature .pf2500-example figcaption strong { font-size: 12px; }
}