/* InoBuilt video hero, v6. Grid layout (copy / stage rail / footer) so nothing overlaps at any aspect ratio.
   The rail has five equal segments, one per build stage; each fills as the video plays through it. */
.vhero{position:relative;height:auto;max-height:100svh;overflow:hidden;color:#fff;display:grid;grid-template-columns:minmax(0,39fr) minmax(0,61fr);column-gap:clamp(28px,3.4vw,64px);grid-template-rows:auto auto auto;padding:calc(76px + clamp(10px,2.4vh,28px)) var(--pad) 0;
  background:radial-gradient(ellipse at 68% 46%,#34302d 0%,#1d1b1a 46%,#161514 78%)}
/* Copy and framed video share the first row and centre together between the header and the stage rail.
   The video is sized by whichever is tighter: its column width or the row height (leaving room for the title block). */
.vhero .vh-media{position:relative;grid-column:2;grid-row:1;align-self:center;justify-self:end;z-index:0;
  width:min(calc(100% - 13px),calc((100svh - 300px)*16/9));aspect-ratio:16/9;margin:13px 13px 66px 0}
.vhero .vh-video{display:block;width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(.92) brightness(.97)}
.vhero .vh-scrim{display:none}
.vhero .vh-copy{grid-column:1;grid-row:1;align-self:center;position:relative;z-index:3;max-width:560px;padding:0 0 clamp(8px,2vh,28px)}
.vhero .vh-copy .eyebrow{margin-bottom:clamp(14px,2.6vh,30px);color:#ff9a5c;text-shadow:0 1px 12px rgba(22,21,20,.85)}
.vhero .vh-num{font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:12px}
.vhero .vh-h{font-family:var(--display);font-weight:500;font-size:clamp(38px,min(4.4vw,7.4vh),76px);line-height:1.02;letter-spacing:-.01em;color:#fff;margin:0 0 16px}
.vhero .vh-h em{font-style:italic;color:#ff9a5c}
.vhero .vh-copy p{font-size:clamp(14px,1.15vw,17px);line-height:1.6;color:rgba(255,255,255,.86);max-width:30em;margin:0;min-height:6.4em}
.vhero .vh-stage{transition:opacity .32s ease,transform .32s ease}
.vhero .vh-stage.swap{opacity:0;transform:translateY(10px)}
.vhero .vh-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,3vh,30px)}
.vhero .vh-actions .btn-solid{margin-top:0}
.vhero .btn-ghost{display:inline-block;padding:15px 24px;border:1px solid rgba(255,255,255,.5);color:#fff;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:background .2s,border-color .2s}
.vhero .btn-ghost:hover,.vhero .btn-ghost:focus-visible{background:rgba(255,255,255,.12);border-color:#fff}
.vhero .vh-rail{grid-column:1/-1;grid-row:2;margin-top:clamp(14px,2.6vh,30px);position:relative;z-index:3;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(6px,1vw,14px);padding-bottom:12px}
.vhero .vh-seg i{display:block;position:relative;height:2px;background:rgba(255,255,255,.22);overflow:hidden}
.vhero .vh-seg i b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--orange);box-shadow:0 0 10px rgba(224,95,14,.6)}
.vhero .vh-seg span{display:block;margin-top:10px;font:600 10px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.vhero .vh-seg span em{font-style:normal;color:rgba(255,255,255,.35);margin-right:6px}
.vhero .vh-seg.on span{color:#fff}.vhero .vh-seg.on span em{color:#ff9a5c}
.vhero .vh-foot{grid-column:1/-1;grid-row:3;position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:2px 0 14px}
.vhero .vh-note{margin:0;font-size:11px;line-height:1.5;color:rgba(255,255,255,.55)}
.vhero .vh-toggle{flex:none;background:rgba(22,21,20,.55);color:#fff;border:1px solid rgba(255,255,255,.35);padding:9px 14px;font:600 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;min-height:36px}
.vhero .vh-toggle:hover,.vhero .vh-toggle:focus-visible{border-color:#fff}
@media(max-width:1100px){.vhero{grid-template-columns:minmax(0,44fr) minmax(0,56fr)}}
@media(max-width:900px) and (min-width:761px) and (orientation:landscape){.vhero .vh-seg span em{display:none}}
@media(max-width:760px),(orientation:portrait) and (max-width:1200px){
  .vhero{height:auto;min-height:100svh;max-height:none;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 1fr;padding-top:78px}
  .vhero .vh-rail{margin-top:0}
  .vhero .vh-media{grid-column:1;grid-row:1;justify-self:stretch;align-self:start;width:auto;margin:22px 0 78px}
  .vhero .vh-copy{grid-column:1;grid-row:2;align-self:start;max-width:none;width:100%;padding:4px 0 22px}
  .vhero .vh-copy p{min-height:0}
  .vhero .vh-copy .eyebrow{display:none}
  .vhero .vh-h{font-size:clamp(32px,9vw,44px);margin-bottom:10px}
  .vhero .vh-copy p{font-size:14px}
  .vhero .vh-rail{grid-row:3}
  .vhero .vh-seg span{display:none}.vhero .vh-seg.on span{display:block;position:absolute;left:0;margin-top:8px}
  .vhero .vh-rail{padding-bottom:30px}
  .vhero .vh-foot{grid-row:4;align-self:end}
  .vhero .vh-note{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.vhero .vh-stage{transition:none}}

/* Framed plate + drawing-sheet title block (chosen design, "A4+").
   Orange corner marks redraw and a scan line sweeps the frame on each stage change; the title block tracks the stage. */
.vhero .vh-media:after{content:'';position:absolute;inset:-13px;pointer-events:none;border:1px solid rgba(255,255,255,.14);--o:var(--orange);background:
  linear-gradient(var(--o),var(--o)) left top/24px 2px no-repeat,linear-gradient(var(--o),var(--o)) left top/2px 24px no-repeat,
  linear-gradient(var(--o),var(--o)) right top/24px 2px no-repeat,linear-gradient(var(--o),var(--o)) right top/2px 24px no-repeat,
  linear-gradient(var(--o),var(--o)) left bottom/24px 2px no-repeat,linear-gradient(var(--o),var(--o)) left bottom/2px 24px no-repeat,
  linear-gradient(var(--o),var(--o)) right bottom/24px 2px no-repeat,linear-gradient(var(--o),var(--o)) right bottom/2px 24px no-repeat}
@keyframes vhCorner{from{background-size:0 2px,2px 0,0 2px,2px 0,0 2px,2px 0,0 2px,2px 0}to{background-size:24px 2px,2px 24px,24px 2px,2px 24px,24px 2px,2px 24px,24px 2px,2px 24px}}
.vhero.stg .vh-media:after{animation:vhCorner .7s cubic-bezier(.2,.7,.2,1)}
.vhero .vh-scan{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.vhero .vh-scan:after{content:'';position:absolute;top:0;bottom:0;left:-35%;width:35%;opacity:0;
  background:linear-gradient(90deg,transparent 0,rgba(224,95,14,.14) 80%,rgba(255,154,92,.95) 99.4%,rgba(255,255,255,.9) 100%)}
.vhero .vh-scan.go:after{animation:vhScan 1.15s cubic-bezier(.45,0,.2,1) both}
@keyframes vhScan{0%{left:-35%;opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
.vhero .vh-tb{display:grid;grid-template-columns:auto auto auto;position:absolute;right:-13px;bottom:-72px;min-width:340px;z-index:3;border:1px solid rgba(255,255,255,.24);background:#1a1918;font:600 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.vhero .vh-tb b{grid-row:span 2;display:flex;align-items:center;padding:0 18px;color:var(--orange);font-size:13px;letter-spacing:.12em;border-right:1px solid rgba(255,255,255,.24)}
.vhero .vh-tb span{grid-column:2;padding:10px 16px 4px;color:#fff}
.vhero .vh-tb em{grid-column:2;padding:0 16px 10px;font-style:normal;font-family:var(--sans);font-weight:500;color:rgba(255,255,255,.5);letter-spacing:.14em}
.vhero .vh-tb i{display:flex;grid-column:3;grid-row:1/span 2;align-items:center;padding:0 16px;font-style:normal;color:rgba(255,255,255,.6);border-left:1px solid rgba(255,255,255,.24)}
.vhero .vh-tb u{display:block;grid-column:1/-1;height:2px;background:rgba(255,255,255,.1);text-decoration:none}
.vhero .vh-tb u s{display:block;height:100%;width:0;background:var(--orange);text-decoration:none}

@media(max-width:760px),(orientation:portrait) and (max-width:1200px){
  .vhero .vh-media:after{inset:-8px;background-size:18px 2px,2px 18px,18px 2px,2px 18px,18px 2px,2px 18px,18px 2px,2px 18px}
  .vhero .vh-tb{right:-8px;left:-8px;min-width:0;bottom:-62px;grid-template-columns:auto 1fr auto}
}
@media(prefers-reduced-motion:reduce){.vhero .vh-scan.go:after,.vhero.stg .vh-media:after{animation:none}}
