@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap');
:root{ --bg:#0a0a0a; --panel:#111; --line:rgba(255,255,255,0.12); --text:#f2f2f2; --dim:#a8a8a8; --red:#d23638; --red2:#e04446; --ease:cubic-bezier(.22,.61,.36,1); }
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--text); font-family:'DM Sans','Inter',system-ui,sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.wrap{ max-width:1280px; margin:0 auto; padding:0 40px; }
.cond{ font-family:'Barlow Condensed','Arial Narrow',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:0.01em; }
.eyebrow{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:15px; letter-spacing:0.12em; text-transform:uppercase; color:var(--red2); }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* header */
.dx-head{ position:fixed; top:16px; left:16px; right:16px; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:12px 22px; background:rgba(14,14,14,0.62); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--line); border-radius:18px; max-width:1280px; margin:0 auto; }
.dx-brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; }
.dx-brand img{ width:24px; height:auto; }
.dx-nav{ display:flex; gap:34px; font-size:15px; }
.dx-nav a{ color:#ddd; padding:6px 0; border-bottom:2px solid transparent; transition:color .2s, border-color .2s; }
.dx-nav a:hover, .dx-nav a[aria-current]{ color:#fff; border-color:var(--red); }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:11px 22px; border-radius:999px; font-weight:500; font-size:15px; transition:background .2s, transform .2s; }
.btn-red{ background:var(--red); color:#fff; }
.btn-red:hover{ background:var(--red2); }
.btn-white{ background:#fff; color:#111; }
.btn-white:hover{ transform:translateX(3px); }

/* hero */
.hero{ position:relative; min-height:clamp(520px,78vh,760px); display:flex; align-items:center; overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-media .before{ filter:grayscale(1) brightness(.6) contrast(1.05); }
.hero-media .after{ clip-path:inset(0 0 0 var(--split,50%)); }
.hero-split{ position:absolute; top:0; bottom:0; left:var(--split,50%); width:2px; background:var(--red); box-shadow:0 0 18px var(--red); transform:translateX(-1px); pointer-events:none; }
.hero-range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:2; margin:0; }
.hero-tags{ position:absolute; bottom:22px; left:0; right:0; display:flex; justify-content:space-between; padding:0 40px; z-index:3; pointer-events:none; }
.hero-tags span{ font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.14em; font-size:13px; padding:5px 12px; border-radius:999px; background:rgba(0,0,0,.55); border:1px solid var(--line); }
.hero-shade{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.6) 34%,rgba(10,10,10,0) 62%), linear-gradient(0deg,var(--bg) 0%,rgba(10,10,10,0) 26%), linear-gradient(180deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,0) 22%); pointer-events:none; z-index:1; }
.hero-copy{ width:100%; position:relative; z-index:4; padding-top:110px; padding-bottom:70px; pointer-events:none; }
.hero-copy a{ pointer-events:auto; }
.crumb{ font-size:15px; color:var(--red2); font-weight:500; margin-bottom:18px; }
.crumb a:hover{ text-decoration:underline; }
.hero h1{ font-size:clamp(52px,7.4vw,112px); line-height:.88; max-width:9ch; }
.hero .lede{ margin-top:22px; font-size:18px; color:#e2e2e2; max-width:36ch; }
.play{ position:absolute; z-index:5; left:60%; top:50%; transform:translate(-50%,-50%); width:84px; height:84px; border-radius:50%; border:3px solid var(--red);
  background:rgba(10,10,10,.75); display:grid; place-items:center; cursor:pointer; transition:transform .25s var(--ease), background .25s; }
.play:hover{ transform:translate(-50%,-50%) scale(1.08); background:var(--red); }
.play svg{ width:28px; height:28px; fill:#fff; margin-left:4px; }

/* specs */
.specs{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:-10px; position:relative; z-index:5; }
.spec{ display:flex; gap:18px; align-items:center; padding:22px 24px; border:1px solid var(--line); border-radius:8px; background:rgba(14,14,14,.92); }
.spec svg{ width:34px; height:34px; flex-shrink:0; stroke:var(--red); fill:none; stroke-width:1.8; }
.spec b{ display:block; font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.12em; font-size:14px; text-transform:uppercase; }
.spec span{ color:var(--dim); font-size:15px; }

/* gallery */
.section{ padding-top:56px; }
.gallery{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }
.gallery > *{ grid-column:span 2; }
.gallery > .span-2{ grid-column:span 3; }
.gallery > .span-3{ grid-column:1 / -1; aspect-ratio:21/9; }
.g-item{ position:relative; aspect-ratio:16/10; border-radius:6px; overflow:hidden; border:1px solid var(--line); background:#121212; cursor:zoom-in; }
.g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.g-item:hover img{ transform:scale(1.04); }
.ph{ cursor:default; display:grid; place-items:center; text-align:center;
  background:radial-gradient(120% 90% at 70% 20%, rgba(210,54,56,.12), transparent 60%),
             repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 32px),
             repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 32px), #111; }
.ph div{ font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.14em; font-size:13px; color:#777; text-transform:uppercase; }
.ph svg{ width:34px; height:34px; stroke:#5a5a5a; fill:none; stroke-width:1.5; margin:0 auto 10px; display:block; }

/* video block */
.vblock{ position:relative; display:flex; align-items:center; gap:26px; min-height:230px; padding:36px; border:1px solid var(--line); border-radius:8px; overflow:hidden; cursor:pointer; background:#111; width:100%; text-align:left; color:inherit; font:inherit; }
.vblock .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.75; transition:transform .8s var(--ease), opacity .3s; }
.vblock:hover .bg{ transform:scale(1.03); opacity:.9; }
.vblock::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.5) 45%,rgba(10,10,10,0) 75%); z-index:1; }
.vblock > *:not(.bg){ position:relative; z-index:2; }
.vbtn{ width:64px; height:64px; border-radius:50%; background:var(--red); display:grid; place-items:center; flex-shrink:0; }
.vbtn svg{ width:22px; height:22px; fill:#fff; margin-left:3px; }
.vblock small{ display:block; font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.14em; font-size:14px; text-transform:uppercase; color:#ddd; }
.vblock strong{ display:block; font-size:clamp(28px,3.2vw,40px); line-height:1; margin:6px 0 8px; }
.vblock em{ font-style:normal; color:var(--dim); font-size:14px; }
.vblock.soon{ cursor:default; }
.vblock.soon .vbtn{ background:#2a2a2a; }

/* process */
.process{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:40px; align-items:center; padding-top:72px; }
.label-line{ display:flex; align-items:center; gap:14px; }
.label-line::after{ content:""; flex:1; height:1px; background:var(--line); }
.process h2, .related h2{ font-size:clamp(34px,3.6vw,46px); line-height:1; margin-top:8px; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); }
.step{ display:flex; gap:16px; padding:6px 24px; border-left:1px solid var(--line); }
.step:first-child{ border-left:0; padding-left:0; }
.step i{ font-style:normal; width:40px; height:40px; border-radius:50%; background:var(--red); display:grid; place-items:center; font-weight:700; flex-shrink:0; }
.step b{ display:block; font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.1em; font-size:18px; text-transform:uppercase; }
.step span{ color:var(--dim); font-size:14px; }

/* related */
.related{ display:grid; grid-template-columns:240px 1fr; gap:24px; align-items:start; padding-top:64px; }
.related-head{ grid-column:1 / -1; }
.rel-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.rel{ display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:18px; border:1px solid var(--line); border-radius:8px; overflow:hidden; padding-right:18px; background:#0f0f0f; transition:border-color .2s; min-height:100px; }
.rel:hover{ border-color:var(--red); }
.rel img, .rel .ph{ width:120px; height:100%; min-height:100px; object-fit:cover; }
.rel b{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:18px; text-transform:uppercase; line-height:1.15; }
.rel em{ color:var(--red2); font-style:normal; font-size:20px; }

/* cta + footer */
.cta{ margin-top:80px; background:var(--red); }
.cta .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:42px; padding-bottom:42px; }
.cta small{ display:block; font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.12em; font-size:16px; text-transform:uppercase; }
.cta h2{ font-size:clamp(40px,4.6vw,60px); line-height:1; }
.foot{ padding:34px 0 40px; border-top:1px solid var(--line); margin-top:32px; }
.foot .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.foot nav{ display:flex; gap:34px; font-size:14px; color:var(--dim); }
.foot nav a:hover{ color:#fff; }
.foot .soc{ display:flex; gap:16px; }
.foot .soc a{ color:var(--dim); font-size:14px; }
.foot small{ color:#666; font-size:12px; }

/* modal + lightbox */
.modal{ position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.88); display:none; align-items:center; justify-content:center; padding:24px; }
.modal.open{ display:flex; }
.modal .frame{ width:min(1200px,100%); aspect-ratio:16/9; background:#000; border-radius:8px; overflow:hidden; }
.modal iframe{ width:100%; height:100%; border:0; }
.modal img{ max-width:min(1400px,100%); max-height:86vh; border-radius:6px; }
.modal .x, .modal .nav{ position:absolute; background:rgba(20,20,20,.8); border:1px solid var(--line); color:#fff; border-radius:50%; width:46px; height:46px; font-size:22px; cursor:pointer; }
.modal .x{ top:20px; right:20px; }
.modal .prev{ left:20px; top:50%; } .modal .next{ right:20px; top:50%; }

/* responsive */
@media (max-width:1000px){
  .specs{ grid-template-columns:repeat(2,1fr); }
  .process{ grid-template-columns:1fr; }
  .related{ grid-template-columns:1fr; }
  .rel-list{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .wrap{ padding:0 20px; }
  .dx-head{ padding:10px 14px 6px; flex-wrap:wrap; row-gap:6px; }
  .dx-nav{ order:3; width:100%; justify-content:space-between; gap:0; font-size:12px; border-top:1px solid rgba(255,255,255,0.08); padding-top:2px; }
  .dx-nav a{ padding:6px 2px; }
  .hero-copy{ padding-top:150px; }
  .page-top{ padding-top:160px; }
  .btn{ padding:8px 13px; font-size:12.5px; gap:6px; }
  .dx-brand{ font-size:16px; }
  .hero{ min-height:640px; align-items:flex-end; }
  .hero-shade{ background:linear-gradient(0deg,var(--bg) 0%,rgba(10,10,10,.85) 40%,rgba(10,10,10,.1) 75%), linear-gradient(180deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,0) 22%); }
  .play{ left:50%; top:34%; width:68px; height:68px; }
  .hero-tags{ top:96px; bottom:auto; padding:0 20px; }
  .gallery{ grid-template-columns:1fr 1fr; gap:10px; }
  .gallery > *, .gallery > .span-2{ grid-column:auto; }
  .gallery > .span-3{ grid-column:auto; aspect-ratio:16/10; }
  .gallery > .m-full{ grid-column:1 / -1; }
  .specs{ gap:10px; margin-top:16px; }
  .hero-copy{ padding-bottom:36px; }
  .spec{ padding:16px; gap:12px; flex-direction:column; align-items:flex-start; }
  .vblock{ padding:24px; min-height:190px; }
  .steps{ grid-template-columns:1fr; gap:18px; }
  .step, .step:first-child{ border-left:0; padding:0; }
  .cta .wrap{ flex-direction:column; align-items:flex-start; }
  .foot nav{ gap:20px; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } html{ scroll-behavior:auto; } }

/* gallery video tiles */
.g-item.is-video::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 55%); pointer-events:none; }
.g-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; width:62px; height:62px; border-radius:50%; background:var(--red); display:grid; place-items:center; box-shadow:0 0 0 8px rgba(210,54,56,.22); transition:transform .25s; }
.g-play svg{ width:24px; height:24px; fill:#fff; margin-left:3px; }
.g-item.is-video:hover .g-play{ transform:translate(-50%,-50%) scale(1.1); }
.g-cap{ position:absolute; left:16px; right:16px; bottom:12px; z-index:2; text-align:left; font-size:15px; font-weight:600; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6); }