/* V16 premium — V14 identity retained, client-inspired navigation refined. */
.v16-premium{--header:84px}

/* Header: V14 navy/cobalt palette, cleaner V16 proportions. */
.v16-premium .site-header{
  height:84px;
  grid-template-columns:minmax(230px,.8fr) auto auto;
  gap:26px;
  padding:0 max(30px,calc((100vw - 1540px)/2));
  background:rgba(13,24,36,.985);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.14);
  box-shadow:none;
  backdrop-filter:blur(18px);
}
.v16-premium .site-header.is-scrolled,
.v16-premium .site-header.is-solid{
  height:76px;
  background:rgba(13,24,36,.985);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 12px 34px rgba(5,12,19,.18);
}
.v16-premium .brand{gap:11px}
.v16-premium .brand img{width:52px;height:52px}
.v16-premium .is-scrolled .brand img,
.v16-premium .is-solid .brand img{width:48px;height:48px}
.v16-premium .brand-copy strong{font-size:15px;color:#fff;letter-spacing:-.018em}
.v16-premium .brand-copy small{font-size:7.5px;color:rgba(255,255,255,.58);letter-spacing:.065em}

.v16-premium .desktop-nav{gap:18px}
.v16-premium .desktop-nav a{
  padding:30px 0 27px;
  color:rgba(255,255,255,.72);
  font-size:11px;
  line-height:1;
  font-weight:650;
  letter-spacing:.035em;
  text-transform:uppercase;
  white-space:nowrap;
}
.v16-premium .desktop-nav a::after{left:0;right:100%;bottom:15px;height:2px;background:var(--blue)}
.v16-premium .desktop-nav a:hover,
.v16-premium .desktop-nav a.is-current{color:#fff}
.v16-premium .desktop-nav a:hover::after,
.v16-premium .desktop-nav a.is-current::after{right:0}

.v16-premium .header-cta{
  height:48px;
  padding:0 17px;
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.68);
  font-family:var(--body);
  font-size:10.5px;
  font-weight:650;
  letter-spacing:.045em;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
}
.v16-premium .header-cta span{transition:transform .22s ease}
.v16-premium .header-cta:hover{background:var(--cobalt);border-color:var(--cobalt);color:#fff;transform:translateY(-1px)}
.v16-premium .header-cta:hover span{transform:translate(3px,-2px)}
.v16-premium .menu-toggle span{background:#fff}
.v16-premium .subpage-main{padding-top:84px}

/* Keep the V14 hero cinematic under the darker header. */
.v16-premium .hero{min-height:720px}
.v16-premium .hero-inner{padding-top:84px}
.v16-premium .hero-title{font-size:clamp(4.8rem,8.35vw,9.7rem)}
.v16-premium .hero-overlay{background:linear-gradient(90deg,rgba(7,14,22,.91) 0%,rgba(7,14,22,.69) 40%,rgba(7,14,22,.27) 74%,rgba(7,14,22,.46) 100%),linear-gradient(0deg,rgba(7,14,22,.45),transparent 42%)}

/* More information per 100% desktop viewport without flattening the premium pacing. */
.v16-premium .section-intro{padding-top:104px}
.v16-premium .capabilities,
.v16-premium .projects-showcase{padding-bottom:104px}
.v16-premium .project-card{min-height:350px}
.v16-premium .proof-grid article{padding-top:26px;padding-bottom:24px}

/* Consistent media system: repeated previews are always 4:3. */
.v16-premium .gallery-groups{display:grid;gap:68px}
.v16-premium .gallery-project-group{border-top:1px solid var(--line);padding-top:24px}
.v16-premium .gallery-project-group>header{margin-bottom:18px}
.v16-premium .gallery-project-media{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:14px}
.v16-premium .gallery-tile,
.v16-premium .gallery-tile:nth-child(n),
.v16-premium .gallery-tile.is-photo,
.v16-premium .gallery-tile.is-portrait,
.v16-premium .gallery-tile.is-technical{
  width:100%;min-width:0;aspect-ratio:4/3;grid-column:auto;grid-row:auto;overflow:hidden;background:#e5e6e2;
}
.v16-premium .gallery-tile img,
.v16-premium .gallery-tile video{width:100%;height:100%;display:block}
.v16-premium .gallery-tile.is-photo img,
.v16-premium .gallery-tile video{object-fit:cover;padding:0}
.v16-premium .gallery-tile.is-portrait img{object-fit:contain;padding:14px;background:#e7e8e4}
.v16-premium .gallery-tile.is-technical img{object-fit:contain;padding:20px;background:#f2f1ed}
.v16-premium .gallery-tile-caption{min-height:44px}

.v16-premium .archive-visual-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.v16-premium .archive-visual-card{min-width:0;overflow:hidden}
.v16-premium .archive-visual-media{width:100%;aspect-ratio:4/3;overflow:hidden;background:#e5e6e2}
.v16-premium .archive-visual-media img{width:100%;height:100%;display:block;object-fit:cover}
.v16-premium .archive-visual-media.media-mode-portrait img{object-fit:contain;padding:14px;background:#e7e8e4}
.v16-premium .archive-visual-media.media-mode-technical img{object-fit:contain;padding:18px;background:#f2f1ed}
.v16-premium .archive-preview-media{aspect-ratio:4/3}
.v16-premium .archive-preview-media img{width:100%;height:100%;object-fit:cover}
.v16-premium .additional-project-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.v16-premium .gallery-filter{border-radius:0}

@media(max-width:1380px){
  .v16-premium .site-header{grid-template-columns:minmax(190px,.65fr) auto auto;gap:20px;padding-inline:26px}
  .v16-premium .desktop-nav{gap:14px}
  .v16-premium .desktop-nav a{font-size:10.3px;letter-spacing:.025em}
  .v16-premium .brand-copy strong{font-size:14px}
  .v16-premium .brand-copy small{display:none}
  .v16-premium .header-cta{padding-inline:13px;font-size:10px}
}

@media(max-width:1220px){
  .v16-premium .site-header{grid-template-columns:1fr auto auto}
  .v16-premium .desktop-nav{display:none}
  .v16-premium .menu-toggle{display:block}
  .v16-premium .gallery-project-media,
  .v16-premium .archive-visual-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  .v16-premium{--header:72px}
  .v16-premium .site-header,.v16-premium .site-header.is-scrolled,.v16-premium .site-header.is-solid{height:72px;padding-inline:16px}
  .v16-premium .brand img,.v16-premium .is-scrolled .brand img,.v16-premium .is-solid .brand img{width:44px;height:44px}
  .v16-premium .brand-copy strong{font-size:13px}
  .v16-premium .header-cta{display:none}
  .v16-premium .hero-inner{padding-top:72px}
  .v16-premium .subpage-main{padding-top:72px}
  .v16-premium .gallery-project-media,
  .v16-premium .archive-visual-grid{grid-template-columns:1fr}
  .v16-premium .gallery-tile,
  .v16-premium .gallery-tile:nth-child(n),
  .v16-premium .gallery-tile.is-photo,
  .v16-premium .gallery-tile.is-portrait,
  .v16-premium .gallery-tile.is-technical{aspect-ratio:4/3}
}

/* =========================================================
   V16 ENGINEERING OPENING SEQUENCE
   The hero itself is the loading experience: copy assembles first,
   the machine view is revealed horizontally, then technical evidence
   comes online. No overlay, spinner or fake loading screen.
   ========================================================= */
@keyframes vskHeroEyebrowIn{
  from{opacity:0;translate:0 10px}
  to{opacity:1;translate:0 0}
}
@keyframes vskHeroLineIn{
  from{opacity:0;translate:0 30px}
  to{opacity:1;translate:0 0}
}
@keyframes vskHeroCopyIn{
  from{opacity:0;translate:0 18px}
  to{opacity:1;translate:0 0}
}
@keyframes vskHeroBoardIn{
  from{opacity:0;translate:22px 0;scale:.985}
  to{opacity:1;translate:0 0;scale:1}
}
@keyframes vskHeroImageWipe{
  from{clip-path:inset(0 100% 0 0)}
  to{clip-path:inset(0 0 0 0)}
}
@keyframes vskHeroMetaIn{
  from{opacity:0;translate:0 8px}
  to{opacity:1;translate:0 0}
}
@keyframes vskHeroTechIn{
  from{opacity:0;scale:.965}
  to{opacity:1;scale:1}
}
@keyframes vskHeroCrosshairIn{
  from{scale:.72;rotate:-8deg}
  to{scale:1;rotate:0deg}
}

body.v8.v13.v14[data-page="home"] .hero-blue-copy .hero-kicker{
  animation:vskHeroEyebrowIn .46s cubic-bezier(.2,.75,.2,1) .08s both;
}
body.v8.v13.v14[data-page="home"] .hero-blue-copy h1 span{
  animation:vskHeroLineIn .66s cubic-bezier(.18,.78,.2,1) .20s both;
}
body.v8.v13.v14[data-page="home"] .hero-blue-copy h1 em{
  animation:vskHeroLineIn .68s cubic-bezier(.18,.78,.2,1) .31s both;
}
body.v8.v13.v14[data-page="home"] .hero-blue-copy>p{
  animation:vskHeroCopyIn .58s cubic-bezier(.2,.72,.2,1) .49s both;
}
body.v8.v13.v14[data-page="home"] .hero-blue-copy .hero-actions{
  animation:vskHeroCopyIn .52s cubic-bezier(.2,.72,.2,1) .65s both;
}

body.v8.v13.v14[data-page="home"] .hero-engineering-board{
  animation:vskHeroBoardIn .68s cubic-bezier(.18,.75,.2,1) .58s both;
}
body.v8.v13.v14[data-page="home"] .hero-board-main img{
  animation:vskHeroImageWipe .82s cubic-bezier(.22,.78,.2,1) .78s both;
}

body.v8.v13.v14[data-page="home"] .hero-board-tag{
  animation:vskHeroMetaIn .42s ease-out 1.12s both;
}
body.v8.v13.v14[data-page="home"] .hero-tech-sheet{
  animation:vskHeroTechIn .48s cubic-bezier(.2,.72,.2,1) 1.20s both;
}
body.v8.v13.v14[data-page="home"] .hero-proof-chip{
  animation:vskHeroMetaIn .44s ease-out 1.31s both;
}
body.v8.v13.v14[data-page="home"] .hero-board-side-note{
  animation:vskHeroMetaIn .42s ease-out 1.38s both;
}
body.v8.v13.v14[data-page="home"] .hero-crosshair{
  animation:vskHeroCrosshairIn .58s cubic-bezier(.2,.72,.2,1) 1.34s both;
}
body.v8.v13.v14[data-page="home"] .hero-blue-copy .hero-chips{
  animation:vskHeroMetaIn .46s ease-out 1.34s both;
}

/* Tiny stagger across the final technical chips makes the close feel engineered,
   not like one generic fade. */
body.v8.v13.v14[data-page="home"] .hero-blue-copy .hero-chips span{
  animation:vskHeroMetaIn .38s ease-out both;
}
body.v8.v13.v14[data-page="home"] .hero-blue-copy .hero-chips span:nth-child(1){animation-delay:1.38s}
body.v8.v13.v14[data-page="home"] .hero-blue-copy .hero-chips span:nth-child(2){animation-delay:1.44s}
body.v8.v13.v14[data-page="home"] .hero-blue-copy .hero-chips span:nth-child(3){animation-delay:1.50s}
body.v8.v13.v14[data-page="home"] .hero-blue-copy .hero-chips span:nth-child(4){animation-delay:1.56s}

@media(max-width:760px){
  body.v8.v13.v14[data-page="home"] .hero-blue-copy .hero-kicker{animation-delay:.04s}
  body.v8.v13.v14[data-page="home"] .hero-blue-copy h1 span{animation-delay:.13s}
  body.v8.v13.v14[data-page="home"] .hero-blue-copy h1 em{animation-delay:.22s}
  body.v8.v13.v14[data-page="home"] .hero-blue-copy>p{animation-delay:.37s}
  body.v8.v13.v14[data-page="home"] .hero-blue-copy .hero-actions{animation-delay:.50s}
  body.v8.v13.v14[data-page="home"] .hero-engineering-board{animation-delay:.54s}
  body.v8.v13.v14[data-page="home"] .hero-board-main img{animation-delay:.68s}
}

@media(prefers-reduced-motion:reduce){
  body.v8.v13.v14[data-page="home"] .hero-blue-copy .hero-kicker,
  body.v8.v13.v14[data-page="home"] .hero-blue-copy h1 span,
  body.v8.v13.v14[data-page="home"] .hero-blue-copy h1 em,
  body.v8.v13.v14[data-page="home"] .hero-blue-copy>p,
  body.v8.v13.v14[data-page="home"] .hero-blue-copy .hero-actions,
  body.v8.v13.v14[data-page="home"] .hero-blue-copy .hero-chips,
  body.v8.v13.v14[data-page="home"] .hero-blue-copy .hero-chips span,
  body.v8.v13.v14[data-page="home"] .hero-engineering-board,
  body.v8.v13.v14[data-page="home"] .hero-board-main img,
  body.v8.v13.v14[data-page="home"] .hero-board-tag,
  body.v8.v13.v14[data-page="home"] .hero-tech-sheet,
  body.v8.v13.v14[data-page="home"] .hero-proof-chip,
  body.v8.v13.v14[data-page="home"] .hero-board-side-note,
  body.v8.v13.v14[data-page="home"] .hero-crosshair{
    animation:none!important;
    opacity:1!important;
    translate:none!important;
    scale:1!important;
    rotate:0deg!important;
  }
  body.v8.v13.v14[data-page="home"] .hero-board-main img{clip-path:none!important}
}