:root{
  --fg:#fff;
  --glass-bg:rgba(255,255,255,.08);
  --glass-stroke:rgba(255,255,255,.20);
  --wm-gap:10px;
  --wm-title-opacity:.46;

  /* One knob: used as BOTH the section gap AND the anchor offset */
  --anchor-offset: clamp(96px, 16vh, 160px);
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5; background:#000; overflow-x:hidden;
}

/* ===== Background & veil ===== */
.bg-video{
  position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  filter:saturate(.85) contrast(.96) hue-rotate(-6deg);
}
.veil{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120vw 70vh at 50% 40%, rgba(0,0,0,.12), rgba(0,0,0,.34) 70%);
}

/* ===== Top-right menu ===== */
.topbar{
  position:fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  z-index: 2500;
  transform: translateZ(0);
}

.menu-btn.icon-circle{
  width:34px; height:34px; display:block; position:relative; padding:0; color:#fff;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.26);
  border-radius:999px; backdrop-filter:blur(8px); cursor:pointer;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,filter .2s ease,transform .12s ease;
}
.menu-btn.icon-circle:hover,.menu-btn.icon-circle:focus-visible{
  background:rgba(0,0,0,.34); border-color:rgba(255,255,255,.40);
  box-shadow:0 12px 28px rgba(0,0,0,.32); filter:brightness(1.06) saturate(1.05);
}
.menu-btn.icon-circle:active{ transform:scale(.98) }
.menu-btn .bar{
  position:absolute; left:50%; top:50%;
  width:14px; height:2px; background:rgba(255,255,255,.95); border-radius:2px;
  transform:translate(-50%,-50%); transition:all .55s cubic-bezier(.16,.84,.24,1);
}
.menu-btn .bar:nth-child(1){ transform:translate(-50%,-50%) translateY(-6px) }
.menu-btn .bar:nth-child(2){ transform:translate(-50%,-50%) }
.menu-btn .bar:nth-child(3){ transform:translate(-50%,-50%) translateY( 6px) }
.menu-btn[aria-expanded="true"] .bar{ width:2px; height:14px; transform:translate(-50%,-50%) }
.menu-btn[aria-expanded="true"] .bar:nth-child(1){ transform:translate(calc(-50% - 6px),-50%) }
.menu-btn[aria-expanded="true"] .bar:nth-child(2){ transform:translate(-50%,-50%) }
.menu-btn[aria-expanded="true"] .bar:nth-child(3){ transform:translate(calc(-50% + 6px),-50%) }

/* Dropdown panel */
.menu{
  position:absolute; right:0; margin-top:8px; min-width:200px; padding:6px; border-radius:14px;
  background:var(--glass-bg); border:1px solid var(--glass-stroke);
  backdrop-filter:blur(12px); box-shadow:0 16px 40px rgba(0,0,0,.28);
  display:block; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.16,.84,.24,1), visibility 0s linear .55s;
  z-index: 2550;
}
.menu.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) }
.menu a{
  display:block; color:#fff; text-decoration:none; font-size:14px; padding:10px 12px;
  border-radius:8px; text-align:left; transition:background .12s ease;
}
.menu a:hover{ background:rgba(255,255,255,.10) }
@media (prefers-reduced-motion:reduce){
  .menu{ transition:none !important; transform:none !important; opacity:1 !important; visibility:visible !important }
}

/* ===== Hero ===== */
.hero-landing{
  position:relative; min-height:100svh; display:grid; place-items:center; text-align:center;
  padding:clamp(12px,3vw,24px);
}
.hero-logo{
  display:inline-grid; grid-template-rows:auto auto; row-gap:var(--wm-gap);
  line-height:1; margin:0; color:rgba(255,255,255,var(--wm-title-opacity));
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
.hero-logo .line-1, .hero-logo .line-2{
  margin:0;
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  text-transform:uppercase; font-weight:300; font-size:clamp(40px,7vw,76px);
  letter-spacing:.24em; word-spacing:.10em;
}

/* ===== Sections ===== */
.content{
  max-width:1000px; margin:0 auto;
  /* extra bottom space so Contact can scroll fully to the very top */
  padding:28px 16px calc(60vh + var(--anchor-offset));
}

/* Use the SAME value for section gap and scroll anchor offset */
.section{
  margin: var(--anchor-offset) 0;
  padding:18px;
  background:var(--glass-bg);
  border:1px solid var(--glass-stroke);
  border-radius:14px;
  backdrop-filter:blur(8px);
  scroll-margin-top: var(--anchor-offset);
}

/* If you ever target anchors directly, keep them aligned too */
:target{ scroll-margin-top: var(--anchor-offset); }

.embed-wrap{ min-height:220px; border:1px dashed rgba(255,255,255,.35); border-radius:12px; padding:14px; background:rgba(255,255,255,.04) }
a{ color:#fff }

/* ===== Gallery grid ===== */
.gallery{
  --gap:10px;
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
}
.card{
  position:relative; overflow:hidden; border-radius:12px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  aspect-ratio:1/1;
}
.card img, .card video{
  display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit;
}

/* --- Video card: subtler outer border + no inner seam; play icon visible --- */
.card.video{
  border-color: rgba(255,255,255,.10);           /* less bright */
  background: rgba(255,255,255,.05);
}
.card.video button{
  all: unset;
  -webkit-appearance:none; appearance:none;
  border:0; background:transparent;
  display:block; width:100%; height:100%;
  border-radius:inherit; overflow:hidden;
  cursor:pointer; position:relative;
  transform:translateZ(0); backface-visibility:hidden;
}
.card.video video{
  display:block; width:100%; height:100%;
  object-fit:cover; border:0; border-radius:inherit; background:none;
  transform:translateZ(0);
  -webkit-mask-image:-webkit-radial-gradient(white, black); /* kill inner halo */
}
/* Play badge */
.card.video button::after{
  content:"";
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:999px;
  background:rgba(0,0,0,.50);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.card.video button::before{
  content:"";
  position:absolute; left:50%; top:50%; transform:translate(-40%,-50%);
  width:0; height:0;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  border-left:20px solid rgba(255,255,255,.96);
}
.card.video button:hover::after{ background:rgba(0,0,0,.60); }
.card.video button:focus-visible{ outline:2px solid rgba(255,255,255,.45); outline-offset:2px }

/* ===== Footer ===== */
.site-footer{
  text-align:center; padding:28px 16px 40px;
  background:rgba(255,255,255,.06); border-top:1px solid var(--glass-stroke)
}

/* ===== Sound FAB ===== */
.sound-fab{
  position:fixed;
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 3000;
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
  color:#fff; background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.35);
  border-radius:999px; backdrop-filter:blur(8px); cursor:pointer;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,filter .2s ease,transform .12s ease;
}
.sound-fab:hover,.sound-fab:focus-visible{
  background:rgba(0,0,0,.44); border-color:rgba(255,255,255,.55);
  box-shadow:0 12px 28px rgba(0,0,0,.35); filter:brightness(1.06) saturate(1.05)
}
.sound-fab:active{ transform:scale(.98) }
.sound-fab[aria-pressed="true"]{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.55) }
.icon-wave::before{ content:"≈"; font-size:18px; display:inline-block; transform:translateY(-1px) }
.sound-label{ font-size:14px; opacity:.95 }
.lb-active .sound-fab{ opacity:.35; pointer-events:none; }

/* ===== Lightbox ===== */
.lb{
  position:fixed; inset:0;
  display:grid; grid-template-rows:1fr auto; place-items:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
  z-index:4000;
}
.lb.open{ opacity:1; pointer-events:auto; }

.lb-body{
  position:relative;
  max-width:92vw; max-height:88vh;
  padding:12px;
  background:var(--glass-bg);
  border:1px solid var(--glass-stroke);
  border-radius:16px;
  backdrop-filter:blur(14px) saturate(1.05);
  box-shadow:0 18px 48px rgba(0,0,0,.30);
  display:grid; place-items:center;
}
.lb img, .lb video{
  max-width:calc(92vw - 24px);
  max-height:calc(88vh - 24px);
  border-radius:12px;
}
.lb video{ outline:none; background:#000; object-fit:contain }

.lb-close, .lb-prev, .lb-next{
  background:rgba(255,255,255,.10);
  border:1px solid var(--glass-stroke);
  color:#fff;
  border-radius:999px;
  width:42px; height:42px;
  display:grid; place-items:center;
  cursor:pointer; backdrop-filter:blur(10px);
  transition:background .2s ease, border-color .2s ease, transform .12s ease;
  z-index:4500;
}
.lb-close{
  position:fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
}
.lb-close::before{ content:"×"; font-size:18px; line-height:1 }
.lb-prev, .lb-next{ position:absolute; top:50%; transform:translateY(-50%); }
.lb-prev{ left:6px } .lb-next{ right:6px }
.lb-prev::before{ content:"‹"; font-size:20px; line-height:1 }
.lb-next::before{ content:"›"; font-size:20px; line-height:1 }
.lb-close:hover, .lb-prev:hover, .lb-next:hover{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.32);
}

@media (max-width:640px){
  .lb-prev{ left: max(6px, env(safe-area-inset-left) + 6px); }
  .lb-next{ right: max(6px, env(safe-area-inset-right) + 6px); }
  .lb-close{ top: max(12px, env(safe-area-inset-top) + 12px);
             right: max(12px, env(safe-area-inset-right) + 12px); }
  .lb-close, .lb-prev, .lb-next{ width:44px; height:44px; }
}

/* Hide the hero while the lightbox is open */
.lb-active .hero-landing{
  opacity:0; pointer-events:none; transition:opacity .15s ease;
}

/* Media container */
.lb-media{ display:grid; place-items:center; }

/* Compact sections again (no big gaps), but keep anchor offset */
.section{
  margin: 18px 0;            /* or set to 0 if you want them fully flush */
  scroll-margin-top: var(--anchor-offset);
}

/* Keep extra bottom space so #contact can reach the very top */
.content{
  padding-bottom: calc(60vh + var(--anchor-offset));
}