/* style.css - shared across pages */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#000; --muted:#bdbdbd; --white:#fff; --blue:#0b76ff;
  --nav-h:70px;
}
html,body{height:100%;background:var(--bg);color:var(--white);font-family:"Avenir Next","Avenir","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}

/* ---------- HEADER / NAVBAR ---------- */
.navbar{
  position:fixed;top:0;left:0;width:100%;height:var(--nav-h);
  display:flex;align-items:center;justify-content:center;z-index:2000;
  padding:0 28px;
  background:linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.15));
  backdrop-filter:blur(6px);
}
.logo{position:absolute;left:28px;font-weight:700;letter-spacing:2px;color:var(--white);text-decoration:none}
.desktop-nav{display:flex;justify-content:center;align-items:center}
.desktop-nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0}
.desktop-nav li{position:relative}
.desktop-nav a{color:var(--white);text-decoration:none;font-weight:600;font-size:15px;padding:8px 6px;transition:color .22s}
.desktop-nav a:hover{color:var(--muted)}

/* hamburger (right) */
.hambtn{position:absolute;right:24px;background:none;border:0;color:var(--white);font-size:26px;cursor:pointer;display:none}

/* ---------- NAV HOVER PREVIEW (centered dropdown) ---------- */
.nav-preview{
  position:fixed;top:var(--nav-h);left:0;width:100%;height:0;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;
  pointer-events:none;z-index:1900;
  transition:height .36s cubic-bezier(.25,1,.3,1),opacity .24s ease;
  opacity:0;
  background:transparent;
}
.nav-preview.active{
  height:340px; /* expanded height */
  opacity:1;
  pointer-events:auto;
  background:rgba(0,0,0,0.92);
}
.nav-preview .preview-box{
  width:min(760px,92%);
  padding:28px 22px;
  display:flex;gap:18px;align-items:center;justify-content:center;
  transform:translateY(-8px);opacity:0;transition:transform .36s ease,opacity .36s ease;
}
.nav-preview.active .preview-box{transform:none;opacity:1}
.preview-box img{width:280px;height:auto;border-radius:8px;object-fit:cover;flex-shrink:0}
.preview-text h3{font-size:20px;margin-bottom:6px;font-weight:700}
.preview-text p{font-size:15px;color:rgba(255,255,255,0.85);line-height:1.4}

/* ---------- MOBILE FULLSCREEN MENU (right slide) ---------- */
.mobile-drawer{
  position:fixed;top:0;right:-100%;width:78%;max-width:420px;height:100%;background:#0b0b0b;color:var(--white);z-index:2200;padding:70px 22px;display:flex;flex-direction:column;gap:18px;transition:right .36s cubic-bezier(.25,1,.3,1)
}
.mobile-drawer.open{right:0}
.mobile-drawer a{color:var(--white);text-decoration:none;font-size:20px;padding:10px 4px;display:block}
.mobile-close{position:absolute;top:18px;right:18px;background:none;border:0;color:var(--white);font-size:36px;cursor:pointer}

/* ---------- PAGE / HERO SECTIONS (scroll-snap desktop) ---------- */
.page{
  height:100vh;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;
}
.section{
  height:100vh;width:100%;scroll-snap-align:start;display:flex;align-items:flex-end;justify-content:center;background-size:cover;background-position:center;position:relative;
}
.section-inner{max-width:980px;padding:0 24px;margin-bottom:7vh;text-align:center}
.section h1{font-size:48px;font-weight:700;margin-bottom:8px;letter-spacing:0.02em}
.section p{font-size:18px;line-height:1.5;margin-bottom:16px;color:rgba(255,255,255,0.95)}
.cta{display:flex;gap:12px;justify-content:center}
.btn{padding:12px 34px;border-radius:24px;text-decoration:none;font-weight:600}
.btn.white{background:#fff;color:#000}
.btn.blue{background:var(--blue);color:#fff;border:none}

/* ---------- DOT NAV ---------- */
.dot-nav{position:fixed;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:2100}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.35);cursor:pointer;transition:transform .18s,background .18s}
.dot.active{background:#fff;transform:scale(1.6)}

/* ---------- SMALL SCREENS ---------- */
@media (max-width:1200px){
  .desktop-nav{display:none}
  .hambtn{display:block}
}
@media (max-width:900px){
  .section h1{font-size:36px}
  .section p{font-size:16px}
  .preview-box img{width:160px}
  .nav-preview.active{height:260px}
  .nav-preview .preview-box{padding:18px}
}
@media (max-width:560px){
  .section h1{font-size:30px}
  .section p{font-size:15px}
  .cta{flex-direction:column;gap:10px}
  .preview-box img{width:140px}
  .nav-preview.active{height:220px}
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.nav-menu {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.nav-menu li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.logo-container {
  width: auto;
}

.tds-site-logo-icon {
  width: 150px;
  height: auto;
  color: oklch(52.171% 0.14917 23.833);
}