/* ONE SHEEN — shared page styles (reset, keyframes, responsive) */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:80px;}
body{margin:0;background:#ffffff;-webkit-font-smoothing:antialiased;}
::selection{background:#1d1d1f;color:#fff;}
/* Scroll reveal. Default is fully opaque so text is never left faint when JS
   is absent; js/onesheen.js adds .os-js to opt into the fade-in and toggles
   .is-visible via IntersectionObserver. */
[data-reveal]{opacity:1;}
@media (prefers-reduced-motion: no-preference){
  html.os-js [data-reveal]{opacity:0;transform:translateY(22px);will-change:opacity,transform;}
  html.os-js [data-reveal].is-visible{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease;}
}
@media (prefers-reduced-motion: reduce){*{animation:none !important;}}
/* Hero starfield — small stars gently drifting, like floating in space.
   Two parallax layers (background-position loops by exactly one tile so the
   drift is seamless) plus a faint nebula glow. Sits behind the hero content. */
[data-hero] > [data-reveal]{position:relative;z-index:1;}
.os-stars{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(60% 50% at 50% 44%, rgba(86,116,196,.12), rgba(0,0,0,0) 70%);}
.os-stars::before,.os-stars::after{content:"";position:absolute;inset:0;background-repeat:repeat;}
.os-stars::before{
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.85), transparent 62%),
    radial-gradient(1px 1px at 32% 68%, rgba(255,255,255,.6), transparent 62%),
    radial-gradient(1px 1px at 58% 38%, rgba(255,255,255,.7), transparent 62%),
    radial-gradient(1px 1px at 78% 82%, rgba(255,255,255,.5), transparent 62%),
    radial-gradient(1px 1px at 88% 14%, rgba(255,255,255,.7), transparent 62%),
    radial-gradient(1px 1px at 46% 90%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(1px 1px at 8% 54%, rgba(255,255,255,.5), transparent 62%),
    radial-gradient(1px 1px at 66% 8%, rgba(255,255,255,.6), transparent 62%);
  background-size:200px 200px;animation:osStarA 70s linear infinite;}
.os-stars::after{
  background-image:
    radial-gradient(1.8px 1.8px at 24% 34%, #fff, transparent 60%),
    radial-gradient(2px 2px at 74% 66%, #fff, transparent 60%),
    radial-gradient(1.6px 1.6px at 54% 18%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1.6px 1.6px at 14% 84%, rgba(255,255,255,.9), transparent 60%);
  background-size:340px 340px;animation:osStarB 120s linear infinite;}
@keyframes osStarA{from{background-position:0 0;}to{background-position:200px -200px;}}
@keyframes osStarB{from{background-position:0 0;}to{background-position:-340px 340px;}}
/* Card grids (METAL DISPLAY 01–04 + OPTION 01–02) stack to a single column
   on small screens so the fixed 12-col / span layout never stays cramped. */
@media (max-width:760px){
  /* Drop in-sentence forced line breaks on small screens so centred copy flows
     naturally instead of breaking awkwardly and then re-wrapping. */
  .os-br-wide{display:none;}
  [data-bento]{grid-template-columns:1fr !important;}
  /* Drop the equal-height space-between layout so stacked cards keep a tidy,
     consistent gap between eyebrow, title and body instead of spreading out. */
  [data-bento] > *{grid-column:auto !important;min-height:0 !important;justify-content:flex-start !important;gap:14px;}
}
@media (max-width:860px){[data-navlinks]{display:none !important;}[data-burger]{display:flex !important;}}
@media (min-width:861px){[data-burger]{display:none !important;}}