:root{--bg:#0b0f14;--fg:#e7e9ee;--muted:#9a9fa8;--card:#121722;--ring:#2a3443;--accent:#cccccc;}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

/* Nav */
.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;background:rgba(11,15,20,0.6);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid rgba(255,255,255,0.06)}
.brand{font-weight:700;letter-spacing:.2px}
.nav-links a{margin-left:18px}

/* HERO SLIDESHOW (replaces video temporarily) */
.hero{position:relative}
.hero-slideshow{
  position: relative;
  width: 100%;
  height: clamp(500px, 56.25vw, 850px); /* 16:9 frame */
  background: #000;
  overflow: hidden;
}
@media(max-width:1024px){ .hero-slideshow{height:52vh} }
@media(max-width:640px){ .hero-slideshow{height:44vh} }

.hero-slideshow .slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%; /* adjust this slightly */
  opacity: 0;
  transition: opacity .6s ease;
}
.hero-slideshow .slide.active{opacity:1}

/* Optional: subtle dark gradient for caption legibility */
.hero-slideshow::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.25));
  pointer-events:none;
}

/* Caption (you already have this class) */
.hero .caption{
  position:absolute;
  left:20px;
  bottom:18px;
  font-size:clamp(18px,2.4vw,28px);
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}

/* Nav buttons (same vibe as your carousel) */
.hero-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.45);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  width:42px;height:42px;
  border-radius:999px;
  display:grid;place-items:center;
  cursor:pointer;
  opacity:.0;
  transition:opacity .2s ease;
}
.hero:hover .hero-btn{opacity:1}
.hero-btn.left{left:14px}
.hero-btn.right{right:14px}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-slideshow .slide{transition:none}
}

/* Hero video */
.hero{position:relative}
.hero video{width:100%;height:64vh;object-fit:cover;display:block;background:#000}
.hero .caption{position:absolute;left:20px;bottom:18px;font-size:clamp(18px,2.4vw,28px);text-shadow:0 2px 10px rgba(0,0,0,0.9),
  0 4px 20px rgba(0,0,0,0.6);color: var(--accent);-webkit-text-stroke: 0.25px rgba(0,0,0,0.9);}

/* Grid (masonry style columns) */
.section{padding:26px 18px}
.grid{column-count:3;column-gap:14px}
@media(max-width:1024px){.grid{column-count:2}.hero video{height:52vh}}
@media(max-width:640px){.grid{column-count:1}.hero video{height:44vh}}

.tile{break-inside:avoid;margin:0 0 14px 0;display:block;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid rgba(255,255,255,.06);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.tile:hover{border-color:rgba(255,255,255,.12)}

/* Carousel inside each tile */
.carousel{position:relative;isolation:isolate}
.track{display:flex;transition:transform .35s cubic-bezier(.2,.7,.2,1);will-change:transform}
.frame {
  min-width: 100%;
  position: relative;
  display: flex;               /* new */
  align-items: center;         /* new */
  justify-content: center;     /* new */
  background: #000;            /* optional: fills behind letterboxing */
  overflow: hidden;            /* ensures no overflow edges */
}

.frame img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: auto;                /* centers if smaller */
  object-fit: contain;         /* keeps aspect ratio inside frame */
}


/* Buttons (desktop hover) */
.btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.2);width:38px;height:38px;border-radius:999px;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .2s}
.tile:hover .btn{opacity:1}
.btn.left{left:10px}
.btn.right{right:10px}

/* Dots */
.dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;z-index:10}
.dot{width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.35)}
.dot.active{background:#fff}

.tile-meta{padding:10px 12px;border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between}
.tile-title{font-weight:600}
.tile-sub{color:var(--muted);font-size:14px}

footer{padding:30px 18px;color:var(--muted);text-align:center}

/* press grid (put this in your main CSS OR /css/press.css) */

.press-wrap{ padding: 24px 0; }

.press-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 3 across */
@media (max-width: 1100px){
  .press-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 2 across */
@media (max-width: 740px){
  .press-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 1 across */
@media (max-width: 480px){
  .press-grid{ grid-template-columns: 1fr; }
}

.press-card{
  position:relative;
  display:block;
  text-decoration:none;
  border-radius:14px;
  overflow:hidden;
  transform: translateZ(0);
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
}

.press-card img{
  width:100%;
  height:190px;          /* forces an even grid */
  object-fit:cover;      /* crops nicely */
  display:block;
  filter: saturate(1.05) contrast(1.02);
  transition: transform .18s ease, filter .18s ease;
}

.press-card:hover img{
  transform: scale(1.03);
  filter: saturate(1.12) contrast(1.05);
}

.press-meta{
  padding:10px 12px 12px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  position:absolute;
  left:0; right:0; bottom:0;
}

.press-pub{
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .9;
}

.press-title{
  margin-top:4px;
  font-size: 13px;
  opacity: .95;
}

.site-nav{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
  padding:14px 0;
}
.site-nav a{
  text-decoration:none;
  opacity:.85;
}
.site-nav a:hover{ opacity:1; }
.site-nav a[aria-current="page"]{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:6px;
}