:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#080e23;color:#f6f7f5}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #97f8e4;outline-offset:5px}
.page-shell{height:100svh;min-height:640px;position:relative;isolation:isolate;overflow:clip;display:flex;flex-direction:column;background:var(--page-background)}
.page-shell[data-product="voxenger"]{--page-background:radial-gradient(ellipse 37% 42% at 96% 74%,#03442c99,transparent 75%),radial-gradient(ellipse 48% 33% at 49% 79%,#06285a99,transparent 78%),#01041c}
.page-shell[data-product="flexieats"]{--page-background:radial-gradient(ellipse 38% 49% at 18% 69%,#693b2099,transparent 78%),radial-gradient(ellipse 39% 41% at 88% 31%,#4b2b1c88,transparent 76%),#1c130f}
.page-shell::before{content:"";position:absolute;inset:-35px;z-index:-1;pointer-events:none;background:var(--ambient-image) center/cover no-repeat;opacity:var(--ambient-opacity);filter:blur(23px) brightness(.65) saturate(1.25)}
.page-shell[data-product="voxenger"]{--ambient-image:url("assets/voxenger-supplied.png");--ambient-opacity:.07}
.page-shell[data-product="flexieats"]{--ambient-image:url("assets/flexieats-supplied.png");--ambient-opacity:.25}
.site-header{position:relative;z-index:3;flex:none;width:100%;max-width:1470px;height:76px;margin:0 auto;padding:0 5.1%;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:15px;color:#fff;text-decoration:none;font-size:clamp(18px,2vw,27px);font-weight:500;white-space:nowrap;letter-spacing:-.025em}
.brand-mark{width:43px;height:40px;flex:none}
.desktop-nav{display:flex;gap:clamp(16px,2vw,28px)}
.desktop-nav a,.mobile-nav a{color:#f6f7f5;text-decoration:none;font-size:16px}
.desktop-nav a:hover,.mobile-nav a:hover{color:#9ff5de}
.mobile-nav{display:none}
.page-shell main{flex:1;min-height:0;width:100%;display:flex;flex-direction:column}
.hero{flex:none;width:100%;max-width:1470px;position:relative;overflow:hidden;display:flex;align-items:center;margin:0 auto;padding:45px 5.1% 20px}
.hero-art{position:absolute;right:-8%;top:-30%;height:145%;width:87%;opacity:.43;pointer-events:none}
.hero-copy{position:relative;z-index:1;max-width:785px}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.045em}
h1{font-size:clamp(48px,5vw,76px);line-height:1}
.hero-copy p{max-width:720px;margin-top:17px;font-size:clamp(16px,1.35vw,19px);line-height:1.43;color:#dce7e6}
.products{flex:1;min-height:0;width:100%;margin:0;padding:0;display:flex;flex-direction:column}
h2{flex:none;width:100%;max-width:1470px;margin:0 auto 12px;padding:0 5.1%;font-size:clamp(29px,2.6vw,37px);line-height:1.18;letter-spacing:-.025em}
.carousel{flex:1;min-height:0;display:flex;flex-direction:column}
.carousel-viewport{flex:1;min-height:0;overflow:hidden;scrollbar-width:none;touch-action:pan-y}
.carousel-viewport::-webkit-scrollbar{display:none}
.carousel-track{display:flex;height:100%;transition:transform .42s ease}
.slide{flex:0 0 100%;min-width:0;height:100%}
.slide-link{color:inherit;text-decoration:none;display:flex;flex-direction:column;height:100%}
.slide-media{flex:1;min-height:0;position:relative;overflow:hidden;background:transparent}
.slide-media img{position:relative;display:block;width:100%;height:100%;object-fit:contain}
.vox-art-frame{position:relative;height:100%;aspect-ratio:1794/876;max-width:100%;margin:auto;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.voxenger-media img{mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 100%)}
.flexieats-media img{height:97%;margin:0 auto;transform:rotate(-4deg);filter:drop-shadow(0 18px 24px #0007)}
.slide-caption{flex:none;width:100%;max-width:1470px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 5.1% 0}
.slide-caption h3{font-size:clamp(25px,2.6vw,36px)}
.slide-caption span{font-size:32px;line-height:1;color:#d0faf0}
.carousel-controls{flex:none;width:100%;max-width:1470px;margin:3px auto 0;padding:0 5.1%;display:flex;align-items:center;justify-content:space-between}
.arrow{display:grid;place-items:center;width:42px;height:42px;border:1px solid #7ca0a3;border-radius:50%;background:transparent;color:white;font-family:Arial,sans-serif;font-size:30px;line-height:1;cursor:pointer}
.arrow:hover{background:#17434a}
.dots{display:flex;gap:15px;align-items:center}
.dot{height:13px;width:13px;padding:0;border:0;border-radius:50%;background:#48636c;cursor:pointer}
.dot.active{background:#a5f9e5}
.site-footer{flex:none;width:100%;max-width:1470px;margin:0 auto;padding:6px 5.1% 12px;display:flex;justify-content:space-between;gap:20px;color:#cfd9d8;font-size:14px}
.site-footer div{display:flex;gap:26px}
@media(max-width:640px){
  .page-shell{min-height:680px}
  .site-header{height:58px;padding:0 20px}
  .brand{gap:9px;font-size:18px}
  .brand-mark{width:34px;height:34px}
  .desktop-nav{display:none}
  .mobile-nav{display:block;position:relative}
  .mobile-nav summary{cursor:pointer;list-style:none;display:flex;width:38px;height:38px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
  .mobile-nav summary::-webkit-details-marker{display:none}
  .mobile-nav summary span{width:25px;height:2px;background:#f6f7f5;border-radius:2px}
  .mobile-nav nav{position:absolute;right:0;top:45px;min-width:175px;padding:12px 16px;background:#0b2d36;border:1px solid #3d6870;border-radius:10px;box-shadow:0 18px 35px #0006;display:grid;gap:14px}
  .hero{padding:50px 22px 18px}
  .hero-art{top:-40px;right:-31%;width:148%;height:280px;opacity:.34}
  h1{font-size:clamp(39px,9.4vw,48px);line-height:1.02}
  .hero-copy p{margin-top:15px;font-size:15px;line-height:1.4}
  .products{padding:0}
  h2{font-size:27px;margin:0 0 10px;padding:0 20px}
  .voxenger-media{display:flex;align-items:center}
  .vox-art-frame{width:100%;height:min(76%,450px);aspect-ratio:auto;mask-image:none}
  .voxenger-media img{object-fit:cover;object-position:right center;mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent)}
  .flexieats-media img{height:97%;transform:rotate(-3deg)}
  .slide-caption{padding:3px 20px 0}
  .slide-caption h3{font-size:25px}
  .slide-caption span{font-size:26px}
  .carousel-controls{margin-top:2px;padding:0 20px}
  .arrow{height:36px;width:36px;font-size:25px}
  .dot{width:11px;height:11px}
  .site-footer{padding:4px 18px 8px;flex-direction:column;align-items:center;gap:3px;text-align:center;font-size:12px}
}
@media(max-height:690px){.page-shell{height:auto;min-height:690px}.slide-media{min-height:250px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.carousel-track{transition:none}}

/* Keep the expanded publication navigation usable on tablet widths. */
@media(min-width:641px) and (max-width:1100px){
  .desktop-nav{display:none}
  .mobile-nav{display:block;position:relative}
  .mobile-nav summary{cursor:pointer;list-style:none;display:flex;width:38px;height:38px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
  .mobile-nav summary::-webkit-details-marker{display:none}
  .mobile-nav summary span{width:25px;height:2px;background:#f6f7f5;border-radius:2px}
  .mobile-nav nav{position:absolute;right:0;top:45px;min-width:175px;padding:12px 16px;background:#0b2d36;border:1px solid #3d6870;border-radius:10px;box-shadow:0 18px 35px #0006;display:grid;gap:14px}
}