:root{
  --gold:#D4AF37;--steel:#C9CED6;--ink:#0B0B0D;--glow:rgba(246,226,122,.24);
  --z:1.22;        /* starting zoom (higher = tighter) */
  --z-min:1.00;    /* end zoom (true scale) */
  --fx:50%; --fy:38%; /* focal point (x,y). adjust to center on lettering */
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--ink);color:#EDEFF2;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow-x:hidden}
.container{width:min(1180px,92vw);margin:0 auto}.section{padding:120px 0}

/* HERO */
.hero{height:120vh;position:relative;overflow:hidden}
.layer{position:absolute;inset:0;will-change:transform}
.hero video{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.9) contrast(1.03) saturate(1.02)}
.hero .overlay{position:absolute;inset:0;background:radial-gradient(1200px 420px at 50% 20%, var(--glow), transparent 60%)}
.hero .stars{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hero .emblem{width:min(72vw,940px);filter:drop-shadow(0 12px 28px rgba(0,0,0,.6)); transform:scale(1.06); transition:transform 520ms cubic-bezier(.18,.82,.22,1)}
.hero .emblem.locked{transform:scale(1)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.emblem.pulsate{animation:pulse 3.4s ease-in-out infinite}

/* Transition: sticky viewport, cover→contain on scroll, edge feather via mask */
.transition-panel{--h: 200vh; height:var(--h); position:relative; margin:0; padding:0; background:#0B0B0D}
.transition-panel .sticky{position:sticky; top:0; height:100vh; width:100vw; overflow:hidden}
.transition-panel .bgfill{position:absolute; inset:0;
  background:url('/assets/media/skyline-dawn-blur.jpg') center / cover no-repeat;
  filter:brightness(.96) contrast(1.02);
}
.transition-panel .photo{
  position:absolute; inset:0; margin:auto;
  width:100vw; height:100vh; object-fit:contain; display:block;
  transform-origin: var(--fx) var(--fy);
  transform:scale(var(--z));
  will-change:transform, -webkit-mask-image, mask-image;
  /* Feather the edges so the photo melts into bgfill */
  -webkit-mask-image: radial-gradient(130% 130% at 50% 50%, #fff 64%, rgba(255,255,255,0) 92%);
  mask-image: radial-gradient(130% 130% at 50% 50%, #fff 64%, rgba(255,255,255,0) 92%);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}

/* Golden Pause */
.pause{position:relative;padding:120px 0}
.pause .floating{position:sticky; top:16vh; display:flex; justify-content:center; align-items:center; min-height:50vh}
.pause .floating img{width:min(48vw,520px); filter:drop-shadow(0 10px 26px rgba(0,0,0,.55))}
.pause .lines{margin-top:22px}
.pause .line{font-size:clamp(20px,2.4vw,30px);opacity:.06;transform:translateY(30px);transition:480ms ease;margin:18px 0}
.pause .line.revealed{opacity:1;transform:translateY(0)}

/* Floating CTA Dock */
.cta-dock{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  background: rgba(10,10,12, .5); backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:10px 12px;
  z-index:50; transition: opacity 260ms ease, transform 260ms ease;
}
.cta-dock.hide{ opacity:0; transform:translateX(-50%) translateY(10px); pointer-events:none }
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:#0B0B0D;padding:10px 14px;border-radius:12px;font-weight:800;text-decoration:none}
.btn.ghost{background:transparent;border:2px solid var(--gold);color:var(--gold)}

.content{padding:96px 0}
footer{padding:28px 0 56px;color:#C9CED6;text-align:center;border-top:1px solid rgba(255,255,255,.06)}

@media (max-width:980px){
  .hero{height:100vh}
  .cta-dock{left:50%; bottom:14px; padding:8px 10px}
  .transition-panel{--h: 170vh}
}


/* v4.3: Center Golden Pause lines over the sticky logo */
.pause{display:grid; grid-template-columns:1fr; place-items:center;}
.pause .floating{z-index:1;}
.pause .lines{
  z-index:2;
  position:relative;
  margin-top:-8vh;              /* bring lines over the logo */
  text-align:center;
  width:min(920px, 86vw);
}
.pause .line{margin:14px 0;}


/* --- Soft gradient at the bottom of the hero to ease into next section --- */
.hero-gradient {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28vh;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #0b0b0d 92%);
  pointer-events: none;
  z-index: 2;
}

/* Crossfade target starts slightly dim and fades in */
[data-crossfade="ourwhy"] .ourwhy-video {
  opacity: 0;
  transition: opacity 0.25s ease-out;
  will-change: opacity;
}

/* Optional: gradient at top of Our Why for overlap elegance */
.our-why .fullbleed::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -8vh; height: 16vh;
  background: linear-gradient(to bottom, #0b0b0d 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 1;
}
.our-why .fullbleed { position: relative; }