@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-condensed-500.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-condensed-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-condensed-700.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/barlow-300.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-500.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2')}


:root{
  --orange:#DE6500;--orange-2:#FF9900;--yellow:#FFCC00;--black:#000;
  --grey-10:#E6E6E6;--grey-40:#999;--grey-70:#4D4D4D;--red:#E63312;--white:#FFF;
  --bg:#050505;--panel:rgba(255,255,255,.03);--line:rgba(255,255,255,.14);
  --display:'Barlow Condensed',sans-serif;--body:'Barlow',sans-serif;--mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg);color:var(--white);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--orange);color:var(--white)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:72px 72px}
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:300;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--orange),var(--orange-2))}
.hud-coord b{color:var(--orange-2);font-weight:500}
/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:250;display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:80px;
  background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.55) 75%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-logo img{height:26px;width:auto;max-width:70vw}
.nav-links{display:flex;gap:2px;list-style:none;align-items:center}
.nav-links a{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-10);padding:9px 14px;position:relative;transition:color .15s}
.nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav-links a:hover{color:var(--orange-2)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--orange-2)}
.nav-toggle{display:none;background:none;border:1px solid var(--grey-40);color:var(--grey-10);font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;padding:9px 14px;cursor:pointer}
/* TYPE */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--orange-2);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:44px;height:1px;background:var(--orange)}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:44px;height:1px;background:var(--orange)}
h1{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.9}
h2{font-family:var(--display);font-weight:700;font-size:clamp(44px,5.4vw,76px);line-height:.95;text-transform:uppercase}
.sec-sub{font-size:20px;font-weight:300;color:var(--grey-40);margin-top:16px;max-width:64ch}
.sec-sub b{color:var(--grey-10);font-weight:500}
.wrap{max-width:1280px;margin:0 auto}
.sec-head{margin-bottom:60px}
section{position:relative;z-index:1}
.pad{padding:120px 40px}
.line-top{border-top:1px solid var(--line)}
/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:stretch;isolation:isolate}
.hero-photo{position:absolute;inset:0;z-index:-2}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.18) 70%,rgba(0,0,0,.45) 100%),
             linear-gradient(0deg,var(--bg) 0%,transparent 26%),
             linear-gradient(180deg,rgba(0,0,0,.75) 0%,transparent 22%)}
.hero-scan{position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(0,0,0,.12) 3px 4px);mix-blend-mode:overlay}
.hero-inner{position:relative;z-index:1;width:100%;max-width:1440px;margin:0 auto;padding:170px 72px 120px;display:flex;flex-direction:column;justify-content:flex-end}
.hero h1{font-size:clamp(64px,9vw,150px);text-shadow:0 0 60px rgba(0,0,0,.6);margin-top:18px}
.hero h1 .tm{font-size:.16em;vertical-align:super;font-weight:600;letter-spacing:.1em;color:var(--orange-2)}
.hero-sub{margin-top:22px;font-size:20px;font-weight:300;color:var(--grey-10);max-width:54ch}
.hero-sub b{color:var(--white);font-weight:500}
.cta{display:inline-flex;align-items:center;gap:14px;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.12em;text-transform:uppercase;padding:17px 30px;transition:all .2s}
.cta-solid{background:var(--orange);color:var(--white);clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.cta-solid:hover{background:var(--orange-2);box-shadow:0 0 34px rgba(222,101,0,.5)}
.cta svg{transition:transform .2s}
.cta:hover svg{transform:translateX(5px)}
.cta-row{margin-top:44px;display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.spec-chips{display:grid;gap:14px}
.spec-chip{border:1px solid var(--line);background:rgba(0,0,0,.55);backdrop-filter:blur(8px);padding:12px 18px;min-width:220px;position:relative}
.spec-chip::before,.spec-chip::after{content:"";position:absolute;width:10px;height:10px;border-color:var(--orange);border-style:solid}
.spec-chip::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
.spec-chip::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.spec-chip .k{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--grey-40);text-transform:uppercase}
.spec-chip .v{font-family:var(--display);font-weight:600;font-size:22px;text-transform:uppercase;color:var(--white);line-height:1.15;margin-top:2px}
.hero-specs{position:absolute;right:72px;bottom:120px;z-index:2;text-align:right}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--grey-40);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-cue::after{content:"";width:1px;height:44px;background:linear-gradient(180deg,var(--orange),transparent);animation:cue 1.8s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* HUD media frame */
.media-hud{position:relative;border:1px solid var(--line)}
.media-hud img{width:100%}
.media-hud .tag{position:absolute;left:0;bottom:0;background:var(--orange);color:var(--white);font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:10px 16px;z-index:2}
.hud-frame{position:relative}
.hud-frame::before,.hud-frame::after,.hud-frame .br1,.hud-frame .br2{content:"";position:absolute;width:26px;height:26px;border-color:var(--orange);border-style:solid;z-index:3}
.hud-frame::before{top:-2px;left:-2px;border-width:3px 0 0 3px}
.hud-frame::after{top:-2px;right:-2px;border-width:3px 3px 0 0}
.hud-frame .br1{bottom:-2px;left:-2px;border-width:0 0 3px 3px}
.hud-frame .br2{bottom:-2px;right:-2px;border-width:0 3px 3px 0}
/* pillars / cards */
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pillar{border:1px solid var(--line);background:var(--panel);padding:32px 26px 36px;position:relative;transition:transform .3s,border-color .3s,box-shadow .3s}
.pillar:hover{transform:translateY(-8px);border-color:var(--orange);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px var(--orange)}
.pillar .idx{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--orange-2)}
.pillar h3{font-family:var(--display);font-weight:600;font-size:26px;text-transform:uppercase;margin-top:14px;line-height:1.05}
.pillar p{color:var(--grey-40);font-size:15px;margin-top:12px}
.pillar .tick{position:absolute;top:0;right:0;width:30px;height:30px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.pillar .tick::after{content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;background:var(--orange);transform:rotate(45deg)}
/* stat blocks */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{border:1px solid var(--line);background:var(--panel);padding:26px 24px;position:relative}
.stat::before{content:"";position:absolute;top:-1px;left:-1px;width:12px;height:12px;border-top:2px solid var(--orange);border-left:2px solid var(--orange)}
.stat .n{font-family:var(--display);font-weight:700;font-size:52px;line-height:1;color:var(--orange-2)}
.stat .n small{font-size:.45em;font-weight:600;color:var(--grey-40)}
.stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-40);margin-top:10px}
/* list points */
.points{list-style:none}
.points li{padding:24px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start}
.points li:last-child{border-bottom:1px solid var(--line)}
.points .n{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--orange-2);padding-top:6px}
.points .t{font-family:var(--display);font-weight:600;font-size:26px;text-transform:uppercase}
.points p{color:var(--grey-40);font-size:16px;margin-top:4px}
/* video placeholder */
.vid-ph{position:relative;background:#0B0B0B;border:1px dashed var(--grey-70);min-height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.vid-ph .play{width:88px;height:88px;border:1px solid var(--orange);display:flex;align-items:center;justify-content:center;position:relative}
.vid-ph .play::before{content:"";width:0;height:0;border-left:26px solid var(--orange-2);border-top:16px solid transparent;border-bottom:16px solid transparent;margin-left:6px}
.vid-ph .t{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--grey-40)}
/* carousel */
.carousel{position:relative;overflow:hidden;border:1px solid var(--line)}
.carousel .tag{position:absolute;left:0;bottom:0;background:var(--orange);color:var(--white);font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:10px 16px}
.carousel .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s cubic-bezier(.4,0,.2,1)}
.carousel .slide.on{opacity:1;position:relative}
.carousel .slide img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.carousel .slide .state{position:absolute;left:0;bottom:0;background:var(--orange);color:var(--white);font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:.1em;text-transform:uppercase;padding:12px 22px}
.carousel .slide .op{position:absolute;left:0;bottom:52px;background:rgba(0,0,0,.72);color:var(--grey-10);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:8px 22px}
.car-dots{display:flex;gap:12px;justify-content:center;margin-top:22px}
.car-dots button{width:11px;height:11px;border:1px solid var(--grey-40);background:none;transform:rotate(45deg);cursor:pointer;padding:0}
.car-dots button.on{background:var(--orange);border-color:var(--orange);box-shadow:0 0 12px rgba(222,101,0,.8)}
.slide-ph{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#0B0B0B;border:1px dashed var(--grey-70)}
.slide-ph span{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey-40);text-align:center;line-height:2}
/* recyclability dial */
.dial-panel{border:1px solid var(--line);background:var(--panel);padding:34px 30px;display:flex;flex-direction:column;gap:18px;justify-content:center;position:relative}
.dial{width:170px;height:170px;border-radius:50%;background:conic-gradient(var(--orange) 0 73%,var(--yellow) 73% 76%,rgba(255,255,255,.09) 76% 100%);display:flex;align-items:center;justify-content:center;margin:0 auto}
.dial .in{width:126px;height:126px;border-radius:50%;background:#0A0A0A;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dial .in b{font-family:var(--display);font-weight:700;font-size:44px;color:var(--orange-2);line-height:1}
.dial .in span{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--grey-40);text-transform:uppercase;margin-top:4px}
/* footer */
footer{position:relative;z-index:1;background:#000;border-top:1px solid var(--line);padding:70px 40px 40px;color:var(--grey-40)}
.foot-wrap{max-width:1280px;margin:0 auto}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;padding-bottom:44px;border-bottom:1px solid var(--line)}
.foot-top img{height:32px;width:auto;max-width:90vw}
.foot-links{display:flex;gap:26px;list-style:none;flex-wrap:wrap}
.foot-links a{font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-10)}
.foot-links a:hover{color:var(--orange-2)}
.foot-bottom{padding-top:26px;font-size:13px;font-family:var(--mono);letter-spacing:.06em;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* discover + product cards */
.disc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.disc-card{display:block}
.disc-card .ph{overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9}
.disc-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.disc-card:hover img{transform:scale(1.05)}
.disc-card .t{font-family:var(--display);font-weight:700;font-size:26px;text-transform:uppercase;margin-top:18px;letter-spacing:.03em}
.disc-card .lm{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--grey-40);border-bottom:1px solid var(--grey-70);padding-bottom:3px;display:inline-block;margin-top:8px;transition:color .2s,border-color .2s}
.disc-card:hover .lm{color:var(--orange-2);border-color:var(--orange)}
.prod-cards{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pcard{position:relative;display:block;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;isolation:isolate}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease;z-index:-1}
.pcard:hover img{transform:scale(1.05)}
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,transparent 40%,transparent 62%,rgba(0,0,0,.55) 100%);z-index:0}
.pcard .in{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:26px;text-align:center}
.pcard .cat{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey-10)}
.pcard .nm{font-family:var(--display);font-weight:700;font-size:clamp(34px,3.4vw,50px);text-transform:uppercase;line-height:1;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.pcard .nm .tm{font-size:.3em;vertical-align:super;color:var(--orange-2)}
.pcard .lm{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--white);border-bottom:1px solid var(--grey-10);padding-bottom:3px;transition:color .2s,border-color .2s}
.pcard:hover .lm{color:var(--orange-2);border-color:var(--orange)}
@media (max-width:1080px){.disc-grid{grid-template-columns:1fr}.prod-cards{grid-template-columns:1fr}}
/* stamp */
.stamp{position:absolute;top:110px;right:44px;width:150px;height:150px;z-index:3;filter:drop-shadow(0 4px 18px rgba(0,0,0,.6))}
@media (max-width:1080px){.stamp{width:104px;height:104px;top:96px;right:18px}}
/* reveals */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
/* banner */
.banner{position:relative;z-index:1;border-top:1px solid var(--line);padding:110px 40px;text-align:center;overflow:hidden}
.banner::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 90% at 50% 120%,rgba(222,101,0,.28),transparent 70%);pointer-events:none}
.banner .sec-sub{margin:16px auto 0}
.banner .cta{margin-top:40px}
@media (max-width:1240px){
  .nav-links{display:none!important}
}
@media (max-width:1080px){
  .nav{padding:0 18px}
  .nav-toggle{display:block}
  
  .hero-inner{padding:150px 22px 110px}
  .hero{min-height:0}
  .hero-specs{position:static;margin-top:44px;text-align:left;max-width:340px}
  .pad{padding:80px 22px}
  .pillar-grid,.stat-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){.pillar-grid,.stat-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .scroll-cue::after{animation:none}
}

/* ==== shared additions: nav density, integrated video, Bugatti-style footer, brochure modal ==== */
.nav-links{gap:22px}
.nav-links a{font-size:12px;letter-spacing:.14em}
video{pointer-events:auto}
video::-webkit-media-controls, video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel, video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none;opacity:0!important}
.bfoot{background:#000;border-top:1px solid var(--line);padding:90px 0 0;overflow:hidden;position:relative}
.bfoot-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.bfoot-contact{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 48px;padding-bottom:56px;border-bottom:1px solid var(--line)}
.bfoot-office{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--grey-40);font-family:var(--body)}
.bfoot-office b{color:var(--white);font-family:var(--display);font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.bfoot-office a{color:var(--grey-40);text-decoration:none}
.bfoot-office a:hover{color:var(--orange-2)}
.bfoot-legalrow{padding:34px 0 10px}
.bfoot-copy{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--white);margin-bottom:18px}
.bfoot-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 34px}
.bfoot-links a{color:var(--grey-10);text-decoration:none;font-family:var(--body);font-size:13.5px;font-weight:500}
.bfoot-links a:hover{color:var(--orange-2)}
.bfoot-social{display:flex;gap:22px;padding:30px 0 8px}
.bfoot-social a{color:var(--grey-10);display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;transition:.25s}
.bfoot-social a:hover{color:#000;background:var(--orange-2);border-color:var(--orange-2)}
.bfoot-fine{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--grey-70);margin:14px 0 0}
.bfoot-mark{font-family:var(--display);font-weight:700;font-size:clamp(120px,24vw,340px);line-height:.72;letter-spacing:.01em;text-align:center;color:transparent;background:linear-gradient(180deg,#161616 0%,#060606 90%);-webkit-background-clip:text;background-clip:text;user-select:none;margin-top:40px;transform:translateY(12%)}
@media(max-width:900px){.bfoot-contact{grid-template-columns:1fr 1fr}.bfoot-wrap{padding:0 22px}}
@media(max-width:560px){.bfoot-contact{grid-template-columns:1fr}}
/* brochure modal */
.dl-cta-band{padding:70px 0;border-top:1px solid var(--line);text-align:center}
.bmodal{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:200}
.bmodal.open{display:flex}
.bmodal-card{background:#0c0c0c;border:1px solid var(--line);border-radius:14px;max-width:440px;width:calc(100% - 40px);padding:38px}
.bmodal-card h3{font-family:var(--display);font-size:30px;letter-spacing:.02em;margin:0 0 6px;text-transform:uppercase}
.bmodal-card p{color:var(--grey-40);font-size:14px;margin:0 0 22px}
.bmodal-card label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--grey-40);text-transform:uppercase;margin:14px 0 6px}
.bmodal-card input{width:100%;box-sizing:border-box;background:#050505;border:1px solid var(--line);border-radius:8px;color:var(--white);padding:12px 14px;font-family:var(--body);font-size:15px}
.bmodal-card input:focus{outline:none;border-color:var(--orange-2)}
.bmodal-err{color:var(--red);font-size:12.5px;min-height:16px;margin-top:10px;font-family:var(--body)}
.bmodal-actions{display:flex;gap:14px;margin-top:20px;align-items:center}
.bmodal-x{background:none;border:none;color:var(--grey-40);font-size:14px;cursor:pointer;font-family:var(--body)}
/* gallery */
.gal-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:34px 0 10px}
.gal-tab{font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;font-size:15px;padding:10px 22px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--grey-10);cursor:pointer;transition:.2s}
.gal-tab.on,.gal-tab:hover{background:var(--orange-2);border-color:var(--orange-2);color:#000}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.gal-grid .gi{border:1px solid var(--line);border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:#0a0a0a;cursor:zoom-in}
.gal-grid img,.gal-grid video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.gal-grid .gi:hover img{transform:scale(1.04)}
@media(max-width:860px){.gal-grid{grid-template-columns:repeat(2,1fr)}}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;z-index:300;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img,.lightbox video{max-width:92vw;max-height:88vh;border-radius:8px}
/* generic article/legal text */
.article-body{max-width:820px}
.article-body p{color:var(--grey-10);font-size:17px;line-height:1.75;margin:0 0 22px;font-family:var(--body);font-weight:300}
.article-body h3{font-family:var(--display);font-size:26px;letter-spacing:.04em;text-transform:uppercase;margin:38px 0 12px}
.article-hero{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:36px 0}
.article-hero img{width:100%;display:block}
.legal-body{max-width:860px}
.legal-body h3{font-family:var(--display);font-size:24px;letter-spacing:.05em;text-transform:uppercase;margin:40px 0 10px;color:var(--white)}
.legal-body p,.legal-body li{color:var(--grey-40);font-size:15px;line-height:1.8;font-family:var(--body)}
.legal-body b{color:var(--grey-10)}
.toggle-row{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:12px;padding:22px 26px;margin:14px 0;gap:20px}
.toggle-row .tt b{display:block;font-family:var(--display);font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:var(--white)}
.toggle-row .tt span{font-size:13.5px;color:var(--grey-40)}
.tswitch{position:relative;width:54px;height:30px;flex:0 0 auto}
.tswitch input{opacity:0;width:0;height:0}
.tswitch i{position:absolute;inset:0;background:#222;border:1px solid var(--line);border-radius:999px;transition:.2s;cursor:pointer}
.tswitch i:before{content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:var(--grey-40);top:3px;left:3px;transition:.2s}
.tswitch input:checked + i{background:var(--orange-2);border-color:var(--orange-2)}
.tswitch input:checked + i:before{background:#000;transform:translateX(24px)}
.tswitch input:disabled + i{opacity:.5;cursor:not-allowed}


/* ==== mobile responsiveness patch ==== */
html,body{overflow-x:hidden}
img,video,svg{max-width:100%}
@media (max-width:1080px){
  [style*="grid-template-columns:repeat(4"],[style*="grid-template-columns:repeat(5"]{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:760px){
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .disc-grid,.cb-grid{grid-template-columns:1fr!important;gap:18px!important}
  .wrap{padding-left:20px;padding-right:20px}
  section[style*="padding-top:150px"]{padding-top:110px!important}
  .gal-tabs{gap:8px}
  .gal-tab{font-size:13px;padding:8px 16px}
  .bmodal-card{padding:26px}
  .dl-cta-band{padding:50px 0}
  .bfoot{padding-top:60px}
  .bfoot-links{gap:10px 22px}
  .toggle-row{flex-direction:row;padding:18px}
}
@media (max-width:560px){
  .gal-grid{grid-template-columns:1fr}
}

/* ==== hero & nav mobile fix v2 ==== */
.nav-logo img{height:auto;width:auto;max-height:26px;max-width:62vw;object-fit:contain}
@media (max-width:1080px){
  .hero{flex-direction:column;justify-content:flex-end}
  .hero-specs{position:static;margin:0;padding:0 22px 84px;text-align:left;max-width:none;width:100%;box-sizing:border-box}
  .hero-inner{padding-bottom:34px}
}
@media (max-width:760px){
  .nav-logo img{max-height:22px}
  .hero h1{font-size:clamp(46px,16.5vw,72px)!important;line-height:.95;overflow-wrap:normal;word-break:normal}
  .hero-sub{font-size:16px}
  .hero-photo img{object-position:center 50%}
  .scroll-cue{display:none}
  .spec-chip{min-width:0}
  .spec-chip .v{font-size:18px}
  .cta{font-size:13px;padding:14px 18px}
  h1,h2{overflow-wrap:normal;word-break:normal}
}

/* ==== mobile fix v3: hero titles, stamp badge, caption bars, carousel ==== */
.carousel .slide, .slide{z-index:1}
.carousel .slide.on, .slide.on{z-index:2}
@media (max-width:760px){
  .hero h1, .hero-inner h1{font-size:clamp(38px,14.5vw,58px)!important;line-height:.96}
  .stamp{width:62px!important;height:62px!important;top:12px!important;right:12px!important;opacity:.95}
  .carousel .slide .state, .slide .state{font-size:13px!important;padding:8px 12px!important;letter-spacing:.08em!important;max-width:80%}
  .carousel .slide .op, .slide .op{font-size:9px!important;padding:6px 10px!important;bottom:34px!important;letter-spacing:.12em!important;max-width:88%}
  .carousel .tag, .media-hud .tag, .hud-frame .tag{font-size:9px!important;letter-spacing:.12em!important;padding:6px 10px!important;max-width:84%}
  .carousel .slide, .slide{transition:opacity .45s ease!important}
  .stat-grid .n{font-size:34px}
  .sec-head h2{font-size:clamp(30px,9vw,44px)}
}

/* ==== mobile fix v4: captions below media instead of overlaying ==== */
@media (max-width:760px){
  .hud-frame, .media-hud{display:flex;flex-direction:column}
  .hud-frame .tag, .media-hud .tag{position:static!important;order:2;max-width:100%!important;text-align:left;padding:8px 12px!important;font-size:9.5px!important}
  .hud-frame video, .hud-frame img, .media-hud video, .media-hud img{order:1}
}

/* ==== mobile pass v5: stacked heroes, type scale, centred heads, compact CTA ==== */
@media (max-width:760px){
  h1{font-size:clamp(36px,12.5vw,54px)!important;line-height:.98!important}
  h2{font-size:clamp(28px,8.5vw,40px)!important}
  .eyebrow{font-size:11px!important;letter-spacing:.16em!important}
  p.eyebrow[style*="font-size"]{font-size:13px!important}
  .hero-sub,.sec-sub{font-size:16px!important;line-height:1.65!important}
  /* heroes: text on dark, photo in flow below (no more bad crops) */
  .hero{flex-direction:column!important;min-height:0!important;background:#050505}
  .hero::before,.hero-scan{display:none!important}
  .hero-photo{position:static!important;inset:auto!important;order:2;width:100%;aspect-ratio:16/10;overflow:hidden;z-index:0!important;margin-top:26px}
  .hero-photo img{object-position:center center!important;width:100%;height:100%;object-fit:cover}
  .hero-inner{order:1;padding:112px 20px 0!important}
  .hero-specs{order:3;padding:18px 20px 56px!important;margin:0!important}
  /* Home jobs full-bleed section: same stacking */
  #jobs{display:block!important;min-height:0!important;padding-bottom:44px}
  #jobs>div[style*="linear-gradient"]{display:none}
  #jobs .wrap{padding:30px 20px 0!important}
  #jobs .hero-photo{margin:26px 0 0}
  /* CTA: compact, no billboard buttons over imagery */
  .cta{display:inline-flex!important;width:auto!important;font-size:12px!important;padding:13px 18px!important;letter-spacing:.1em!important}
  /* stats */
  .stat-grid{grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:30px!important}
  .stat .n{font-size:30px!important}
  .stat .l{font-size:11px!important;letter-spacing:.12em!important}
  /* centred section headers */
  .sec-head{text-align:center!important}
  .sec-head .sec-sub{margin-left:auto!important;margin-right:auto!important}
  .sec-head .eyebrow{justify-content:center!important}
  .pad{padding:64px 20px!important}
}

/* ==== nav v2: condensed top bar + mega dropdown ==== */
.nav-toggle{display:inline-flex!important}
.nav-links{gap:26px}
.nav-links a{font-size:12.5px;letter-spacing:.13em}
.mega{position:absolute;top:100%;left:0;right:0;background:rgba(6,6,6,.98);border-bottom:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:95;backdrop-filter:blur(10px)}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega-wrap{max-width:1280px;margin:0 auto;padding:40px 40px 48px;display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:48px}
.mega-h{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange-2);margin:0 0 16px;border-bottom:1px solid var(--line);padding-bottom:10px}
.mega-col a{display:block;color:var(--grey-10);text-decoration:none;font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:8px 0;transition:.18s}
.mega-col a:hover{color:var(--orange-2);padding-left:6px}
.mega-direct{border-left:1px solid var(--line);padding-left:48px}
.mega-direct a{font-size:24px;padding:12px 0}
@media (max-width:1080px){
  .mega-wrap{grid-template-columns:1fr;gap:30px;padding:26px 22px 42px;max-height:calc(100vh - 90px);overflow:auto}
  .mega-direct{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:20px}
  .mega-col a{font-size:20px}
}

/* ==== nav v3: Bugatti-style top-left MENU + left drawer ==== */
.nav-toggle{order:-1;display:inline-flex!important;align-items:center;gap:10px}
.nt-ic{display:inline-block;width:20px;height:12px;position:relative}
.nt-ic:before,.nt-ic:after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;transition:.2s}
.nt-ic:before{top:0}.nt-ic:after{bottom:0}
.nav-toggle[aria-expanded="true"] .nt-ic:before{transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nt-ic:after{transform:translateY(-5px) rotate(-45deg)}
.mega{position:fixed;top:0;left:0;right:auto;bottom:0;width:min(430px,90vw);opacity:1;border-bottom:none;border-right:1px solid var(--line);transform:translateX(-104%);transition:transform .28s ease,visibility .28s}
.mega.open{transform:none}
.mega-wrap{display:block;padding:92px 36px 48px;height:100%;overflow:auto;box-sizing:border-box;max-height:none}
.mega-col{margin-bottom:36px}
.mega-direct{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:26px}
.mega-close{position:absolute;top:22px;left:30px;background:none;border:none;color:var(--white);font-size:30px;cursor:pointer;line-height:1;padding:4px}
.mega-close:hover{color:var(--orange-2)}
.mega-veil{position:fixed;inset:0;background:rgba(0,0,0,.62);opacity:0;visibility:hidden;transition:.28s;z-index:94;backdrop-filter:blur(2px)}
.mega-veil.open{opacity:1;visibility:visible}
@media(max-width:1080px){.mega-wrap{padding:84px 26px 44px}}


/* pin logo beside MENU as in v11 */
.nav-logo{margin-left:28px;margin-right:auto}
@media(max-width:1080px){.nav-logo{margin-left:14px}}

/* ==== WordPress integration: block-editor content, pagination, core utility classes ==== */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.article-body h2{font-family:var(--display);font-size:32px;letter-spacing:.03em;text-transform:uppercase;color:var(--white);margin:44px 0 16px}
.article-body h4,.article-body h5,.article-body h6{font-family:var(--display);color:var(--white);margin:30px 0 10px}
.article-body ul,.article-body ol{color:var(--grey-10);font-size:17px;line-height:1.8;font-family:var(--body);font-weight:300;margin:0 0 22px;padding-left:22px}
.article-body a{color:var(--orange-2);text-decoration:underline;text-underline-offset:3px}
.article-body img,.article-body .wp-block-image{max-width:100%;height:auto;border-radius:10px;margin:28px 0}
.article-body blockquote{border-left:3px solid var(--orange-2);padding:4px 0 4px 22px;color:var(--grey-10);font-style:italic;margin:28px 0}
.article-body figcaption{color:var(--grey-40);font-size:13px;margin-top:8px}
.article-body .wp-block-button__link,.article-body .wp-element-button{display:inline-flex;align-items:center;gap:10px;background:var(--orange-2);color:#000;font-family:var(--display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:14px 24px;border-radius:2px}
.article-body table{width:100%;border-collapse:collapse;margin:0 0 22px;color:var(--grey-10);font-size:15px}
.article-body th,.article-body td{border:1px solid var(--line);padding:10px 14px;text-align:left}

/* News pagination */
.volgren-pagination .nav-links{display:flex;gap:16px;justify-content:center}
.volgren-pagination a,.volgren-pagination span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-40);text-decoration:none;padding:10px 16px;border:1px solid var(--line);border-radius:4px}
.volgren-pagination a:hover{color:var(--orange-2);border-color:var(--orange-2)}
.volgren-pagination .current{color:#000;background:var(--orange-2);border-color:var(--orange-2)}

/* ==== Zero Emission page: impact infographic + counters ==== */
@media(max-width:1100px){.pad .disc-grid[style*="repeat(5"]{grid-template-columns:repeat(2,1fr)!important}.pad .disc-grid[style*="repeat(4"]{grid-template-columns:repeat(2,1fr)!important}}
.imp-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;margin-top:44px}
.imp-big{border:1px solid var(--line);background:var(--panel);padding:44px 40px;position:relative}
.imp-big .n{font-family:var(--display);font-weight:700;font-size:clamp(64px,7vw,110px);color:var(--orange-2);line-height:.95;letter-spacing:.01em}
.imp-big .u{font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--grey-40);text-transform:uppercase;margin-top:10px}
.imp-big .d{color:var(--grey-10);font-size:15.5px;margin-top:18px;max-width:46ch;font-weight:300}
.imp-side{display:grid;gap:14px}
.imp-tile{border:1px solid var(--line);background:var(--panel);padding:22px 24px;display:flex;align-items:center;gap:22px}
.imp-tile .n{font-family:var(--display);font-weight:700;font-size:38px;color:var(--white);min-width:120px}
.imp-tile .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--grey-40);text-transform:uppercase;line-height:1.7}
.ring{width:110px;height:110px;flex:0 0 auto}
.ring circle{fill:none;stroke-width:9}
.ring .bg{stroke:rgba(255,255,255,.1)}
.ring .fg{stroke:var(--orange-2);stroke-linecap:butt;stroke-dasharray:289;stroke-dashoffset:289;transition:stroke-dashoffset 1.6s cubic-bezier(.3,.7,.2,1)}
.ring text{fill:var(--white);font-family:var(--display);font-weight:700;font-size:26px;text-anchor:middle}
.imp-note{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--grey-70);margin-top:18px;text-transform:uppercase}
@media(max-width:1080px){.imp-wrap{grid-template-columns:1fr}}

/* ==== Our History page: vertical timeline ==== */
.tl{position:relative;max-width:900px}
.tl::before{content:"";position:absolute;left:104px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--orange),rgba(222,101,0,.15))}
.tl-item{display:grid;grid-template-columns:80px 1fr;gap:48px;padding:26px 0;position:relative}
.tl-item::before{content:"";position:absolute;left:97px;top:38px;width:16px;height:16px;background:var(--bg);border:3px solid var(--orange);transform:rotate(45deg);box-shadow:0 0 12px rgba(222,101,0,.6)}
.tl-year{font-family:var(--display);font-weight:700;font-size:26px;color:var(--orange-2);text-align:right;padding-top:4px}
.tl-body h3{font-family:var(--display);font-weight:600;font-size:26px;text-transform:uppercase}
.tl-body p{color:var(--grey-40);font-size:16px;margin-top:6px;max-width:60ch}
.tl-body p b{color:var(--grey-10)}
@media (max-width:760px){.tl::before{left:12px}.tl-item{grid-template-columns:1fr;gap:6px;padding-left:44px}.tl-item::before{left:5px}.tl-year{text-align:left}}

/* ==== Why Volgren / Service & Support: two-column responsive rules ==== */
@media (max-width:1080px){
  .why-grid{grid-template-columns:1fr !important}
  .sv-grid,.sv-two{grid-template-columns:1fr !important}
  #facilities{grid-template-columns:1fr 1fr !important}
}
@media (max-width:640px){#facilities{grid-template-columns:1fr !important}}

/* ==== WordPress admin bar: stop it overlapping the fixed header/drawer for logged-in users ==== */
@media screen and (min-width:783px){
  body.admin-bar header.nav{top:32px}
  body.admin-bar .mega,body.admin-bar .mega-veil{top:32px}
}
@media screen and (max-width:782px){
  body.admin-bar header.nav{top:46px}
  body.admin-bar .mega,body.admin-bar .mega-veil{top:46px}
}

/* ==== Optimus product-body: responsive collapse for the co-bolt/footprint grids ==== */
@media (max-width:1080px){.cb-grid,.cb-media,.fp-grid{grid-template-columns:1fr !important}}

/* ==== Endura / G8 / Audace product-body: responsive collapse for two-column grids ==== */
@media (max-width:1080px){.end-two,.g8-grid,.g8-two,.aud-grid,.aud-two{grid-template-columns:1fr !important}}

/* ==== article body: Gallery block, matching the same rounded-corner treatment as single images ==== */
.article-body .wp-block-gallery{margin:28px 0}
.article-body .wp-block-gallery .wp-block-image{margin:0}
.article-body .wp-block-gallery img{border-radius:10px}

/* ==== defensive hardening: force normal block stacking inside News cards,
   in case any plugin/global stylesheet is applying float or flex to these
   generic elements ==== */
.disc-card{display:block!important}
.disc-card>*{float:none!important;clear:both!important;position:static!important;width:auto!important}
.disc-card .carousel{position:relative!important}
.disc-card .carousel .slide{position:absolute!important}
.disc-card .carousel .slide.on{position:relative!important}

/* ==== Our History: two-column timeline ==== */
.tl-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;align-items:start}
.tl-2col .tl{max-width:none}
@media(max-width:900px){.tl-2col{grid-template-columns:1fr}}

/* ==== News article: social share row ==== */
.share-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.share-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-40);margin-right:8px}
.share-row a,.share-row button{color:var(--grey-10);display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;transition:.25s;background:none;cursor:pointer;position:relative;font-family:inherit}
.share-row a:hover,.share-row button:hover{color:#000;background:var(--orange-2);border-color:var(--orange-2)}
.share-copy-msg{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--orange-2);color:#000;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}
.share-copy-msg.show{opacity:1}
@media(max-width:600px){.share-row{gap:10px}.share-label{width:100%;margin-bottom:4px}}

/* =====================================================================
   ACCESSIBILITY, SEO & ROBUSTNESS FIXES
   ===================================================================== */

/* --- 1. No-JavaScript fallback -----------------------------------------
   .rv elements start invisible and are revealed by JS on scroll. If JS is
   blocked, fails, or the visitor is a crawler that doesn't execute/scroll,
   everything below the hero would stay invisible. The <html> element gets
   class "js" added by an inline script in header.php the instant the page
   parses — so if that never runs, this rule keeps all content fully visible. */
html:not(.js) .rv{opacity:1!important;transform:none!important}

/* Belt-and-braces: honour reduced-motion by showing content immediately */
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
}

/* --- 3. Keyboard focus visibility --------------------------------------
   Focus outlines were suppressed. :focus-visible shows a clear ring for
   keyboard users without adding rings on mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--orange-2);
  outline-offset:3px;
  border-radius:2px;
}
/* the modal input previously stripped its outline entirely — restore it */
.bmodal-card input:focus-visible{outline:2px solid var(--orange-2);outline-offset:2px}

/* --- 3.2 Skip-to-content link ------------------------------------------
   Visually hidden until a keyboard user tabs to it, then appears top-left. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:400;
  background:var(--orange-2);color:#000;
  font-family:var(--display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:14px 22px;text-decoration:none;
}
.skip-link:focus{left:8px;top:8px}

/* --- 3.4 Carousel controls (pause/play + live region) ------------------- */
.car-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px}
.car-pause{
  background:none;border:1px solid var(--line);border-radius:8px;
  color:var(--grey-10);font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:7px 14px;cursor:pointer;transition:.25s;
}
.car-pause:hover{color:#000;background:var(--orange-2);border-color:var(--orange-2)}
/* screen-reader-only announcement region for slide changes */
.car-live{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* --- 4. Section subtitle contrast --------------------------------------
   .sec-sub used --grey-40 (#999) on near-black: fails WCAG AA for body text.
   --grey-10 (#E6E6E6) reads clearly while staying visually secondary
   to the white headings above it. */
.sec-sub{color:var(--grey-10)}

/* --- 5. Contact form ---------------------------------------------------- */
.vg-form{max-width:640px;margin-top:36px}
.vg-form label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--grey-40);text-transform:uppercase;margin:18px 0 6px}
.vg-form input,.vg-form textarea,.vg-form select{
  width:100%;box-sizing:border-box;background:#050505;border:1px solid var(--line);
  border-radius:8px;color:var(--white);padding:12px 14px;font-family:var(--body);font-size:15px;
}
.vg-form input:focus,.vg-form textarea:focus,.vg-form select:focus{border-color:var(--orange-2)}
.vg-form textarea{min-height:150px;resize:vertical}
.vg-form .req{color:var(--orange-2)}
.vg-form-err{color:var(--red);font-size:13.5px;min-height:18px;margin-top:10px;font-family:var(--body)}
.vg-form-note{color:var(--grey-40);font-size:13px;margin-top:18px}
.vg-form-success{border:1px solid var(--orange-2);background:rgba(255,153,0,.08);
  padding:26px 28px;border-radius:10px;color:var(--grey-10);font-size:15.5px;margin-top:20px}
.vg-hp{position:absolute!important;left:-9999px}

/* --- 6. Fluid nav scaling ----------------------------------------------
   The top bar previously jumped between fixed sizes and could collide or
   wrap at in-between widths. Sizing the links and gaps in vw units lets
   the whole bar scale smoothly across every screen width. */
@media (min-width:1241px){
  .nav-links{gap:clamp(12px,1.55vw,26px);flex-wrap:nowrap}
  .nav-links a{font-size:clamp(10.5px,0.87vw,12.5px);letter-spacing:clamp(.05em,.1vw,.13em);white-space:nowrap}
  .nav-logo img{height:clamp(20px,1.8vw,26px)!important;max-height:none!important;width:auto!important}
  .nav-toggle{font-size:clamp(10px,.82vw,12px);white-space:nowrap}
  header.nav{padding-left:clamp(18px,2.6vw,40px);padding-right:clamp(18px,2.6vw,40px)}
}

/* =====================================================================
   NAV BAR — FINAL AUTHORITATIVE LAYOUT
   Supersedes all earlier nav rules above. Placed last so it wins on
   cascade order without needing !important everywhere.

   Structure it targets (header.php):
     <header class="nav">
       <nav aria-label="Primary">        <- accessibility landmark
         <button class="nav-toggle">     <- MENU (always visible)
         <a class="nav-logo">            <- logo
         <ul class="nav-links">          <- 7 quick links (desktop only)
       </nav>
     </header>
   The <nav> landmark was added for screen readers; it must be a flex row
   itself, otherwise it stacks its children and pushes the links onto a
   second line over the logo.
   ===================================================================== */
header.nav{display:block;padding:0}
header.nav > nav{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.8vw,28px);
  height:80px;
  width:100%;
  padding:0 clamp(18px,2.6vw,40px);
  box-sizing:border-box;
  flex-wrap:nowrap;           /* never wrap onto a second line */
}
header.nav .nav-toggle{order:0;flex:0 0 auto;margin:0}
header.nav .nav-logo{order:1;flex:0 0 auto;margin:0;display:inline-flex;align-items:center}
header.nav .nav-logo img{
  height:clamp(19px,1.75vw,26px);
  max-height:none;
  width:auto;
  max-width:none;
  display:block;
}
header.nav .nav-links{
  order:2;
  margin:0 0 0 auto;          /* pushed to the right edge */
  padding:0;
  flex:0 1 auto;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:clamp(6px,1.05vw,24px);
  list-style:none;
  min-width:0;                /* allows graceful shrink before the breakpoint */
}
header.nav .nav-links li{flex:0 1 auto;min-width:0}
header.nav .nav-links a{
  font-size:clamp(9px,.70vw,12.5px);
  letter-spacing:clamp(.02em,.07vw,.13em);
  white-space:nowrap;
}
/* Below 1240px the quick links hide entirely and everything routes
   through the MENU drawer — logo then sits beside MENU with no gap issues. */
@media (max-width:1300px){
  header.nav .nav-links{display:none}
}
@media (max-width:1080px){
  header.nav > nav{padding:0 18px;gap:14px}
}

/* ==== Gallery performance & video tiles ==== */
.gal-grid .gi{position:relative;background:#111}
.gal-grid .gi img{width:100%;height:100%;object-fit:cover;display:block}
/* play badge on video tiles (grid no longer autoplays videos) */
.gal-grid .gi-play{
  position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;
  background:rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.85);
  pointer-events:none;transition:.25s;
}
.gal-grid .gi-play::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:10px 0 10px 16px;
  border-color:transparent transparent transparent #fff;
}
.gal-grid .gi:hover .gi-play{background:var(--orange-2);border-color:var(--orange-2)}
.gal-grid .gi:hover .gi-play::after{border-left-color:#000}
/* lightbox media sizing */
.lightbox img,.lightbox video{max-width:92vw;max-height:88vh;width:auto;height:auto}

/* =====================================================================
   MOBILE-ONLY REFINEMENTS
   All rules below apply at 760px and under only — desktop is untouched.
   ===================================================================== */
@media (max-width:760px){

  /* --- 1. Logo too close to the screen edge -------------------------
     The bar had a tight 18px padding and the logo sized off viewport
     width, so on narrow phones it ran right up to (and past) the edge.
     More breathing room, and the logo is capped so it always fits
     alongside the MENU button with space to spare. */
  header.nav > nav{
    padding:0 20px;
    gap:14px;
  }
  header.nav .nav-logo{
    min-width:0;               /* lets the flex item shrink */
    flex:0 1 auto;
    overflow:hidden;
    display:block;
  }
  header.nav .nav-logo img{
    /* The lockup is very wide (~14:1), so constraining by height alone lets it
       run past the screen edge. Sizing by available width instead — capped by
       height — keeps it inside the bar on every phone size. */
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    max-height:20px;
    object-fit:contain;
    object-position:left center;
  }

  /* --- 2. GPTW card left stranded on its own row --------------------
     The 5-card stat grid collapses to 2 columns on mobile, leaving the
     5th card alone in a half-width slot. Spanning it across both columns
     makes that last row deliberate rather than a leftover. */
  .stat-grid{grid-template-columns:repeat(2,1fr)!important}
  .stat-grid > .stat:last-child:nth-child(odd){
    grid-column:1 / -1;
  }
  /* the GPTW card is a flex row (badge + text) — centre it now it's wide */
  .stat-grid > .stat:last-child:nth-child(odd)[style*="display:flex"]{
    justify-content:center;
  }

  /* --- 3. Carousel legends sitting on top of the photo ---------------
     The operator name and state label were absolutely positioned over
     the image, covering the bus. On mobile they now sit BELOW the photo
     as a normal caption block, so the image is never obscured. */
  .carousel .slide{display:flex;flex-direction:column}
  .carousel .slide img{aspect-ratio:16/10}

  .carousel .slide .op,
  .carousel .slide .state{
    position:static;
    left:auto;
    bottom:auto;
    display:block;
    width:100%;
    box-sizing:border-box;
  }
  /* operator line: quiet caption directly under the photo */
  .carousel .slide .op{
    order:2;
    background:rgba(255,255,255,.04);
    border-top:1px solid var(--line);
    color:var(--grey-10);
    font-size:10px;
    letter-spacing:.14em;
    padding:9px 14px;
    line-height:1.5;
  }
  /* state label: the strong orange band, sits last */
  .carousel .slide .state{
    order:3;
    font-size:16px;
    letter-spacing:.08em;
    padding:11px 14px;
  }
  /* the .tag variant (used on some media frames) gets the same treatment */
  .carousel .tag{
    position:static;
    display:block;
    width:100%;
    box-sizing:border-box;
    font-size:10px;
    letter-spacing:.14em;
    padding:9px 14px;
  }
  /* inactive slides must not add height while stacked */
  .carousel .slide:not(.on){position:absolute;inset:0}
}

/* =====================================================================
   NEWS ARTICLES — CONSISTENT IMAGE FRAMING + OPTIONAL IN-ARTICLE SLIDER
   Scoped to .single-post, so Pages (Why Volgren, Careers, /expo2026/,
   the legal pages) are completely untouched. Placed last so it wins on
   cascade order without needing !important.
   ===================================================================== */

/* Featured Image hero and body images now share one frame. Previously each
   rendered at its own natural aspect ratio, so a portrait shot or an odd
   crop sized differently to the hero above it. */
.single-post .article-hero{margin:36px 0}
.single-post .article-hero img{
	width:100%;
	aspect-ratio:16/9;
	object-fit:cover;
	display:block;
}
.single-post .article-body figure.wp-block-image{margin:28px 0}
.single-post .article-body figure.wp-block-image img,
.single-post .article-body > img{
	width:100%;
	aspect-ratio:16/9;
	object-fit:cover;
	display:block;
	border:1px solid var(--line);
	border-radius:10px;
}
.single-post .article-body figcaption{
	font-family:var(--mono);font-size:11px;letter-spacing:.14em;
	text-transform:uppercase;color:var(--grey-40);margin-top:10px;
}

/* Gallery block inside an article: same treatment, tidy grid */
.single-post .article-body .wp-block-gallery img{
	aspect-ratio:4/3;
	object-fit:cover;
	border:1px solid var(--line);
	border-radius:10px;
}

/* Opt out for a single image (tall portrait shots, diagrams, logos):
   select the block → Advanced → Additional CSS class(es) → no-crop */
.single-post .article-hero img.no-crop,
.single-post .article-body img.no-crop{aspect-ratio:auto;object-fit:contain}

/* --- Optional swipeable gallery -------------------------------------
   Select a Gallery block → Advanced → Additional CSS class(es) → vg-slider
   Deliberately NOT named .carousel — that class is already driven by
   main.js on the homepage and the news cards, and reusing it would collide. */
.single-post .article-body .wp-block-gallery.vg-slider{
	display:flex;
	flex-wrap:nowrap;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	gap:14px;
	margin:28px 0;
	padding-bottom:16px;
	-webkit-overflow-scrolling:touch;
}
.single-post .article-body .wp-block-gallery.vg-slider figure,
.single-post .article-body .wp-block-gallery.vg-slider .wp-block-image{
	flex:0 0 100%;
	scroll-snap-align:center;
	margin:0;
}
.single-post .article-body .wp-block-gallery.vg-slider img{
	width:100%;
	aspect-ratio:16/9;
}
.single-post .article-body .wp-block-gallery.vg-slider::-webkit-scrollbar{height:4px}
.single-post .article-body .wp-block-gallery.vg-slider::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
.single-post .article-body .wp-block-gallery.vg-slider::-webkit-scrollbar-thumb{background:var(--orange)}

@media (max-width:760px){
	.single-post .article-hero img,
	.single-post .article-body figure.wp-block-image img,
	.single-post .article-body .wp-block-gallery.vg-slider img{aspect-ratio:16/10}
}