: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;}


/* --- Transition Panel: skyline fill + seamless flow --- */
.transition-panel { position: relative; padding: 0; margin: 0; min-height: 110vh; }
.transition-panel .sticky { position: sticky; top: 0; height: 100vh; }
.transition-panel .bgfill { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -1; }
.transition-panel .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Our Why: full-bleed video + copy card --- */
.our-why { padding-top: clamp(12px, 2vw, 24px); margin-top: 0; }
.our-why .fullbleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.our-why .ourwhy-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #000; box-shadow: 0 16px 48px rgba(0,0,0,.35); }
.our-why .copy-card {
  margin: 20px auto 0; width: min(980px, 92vw);
  background: linear-gradient(180deg, rgba(11,11,13,.86), rgba(11,11,13,.72));
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
  padding: 22px 24px; line-height: 1.65; color: #EDEFF2;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  transition: transform 0.2s ease-out; will-change: transform;
}

/* --- Initiatives list styling --- */
#initiatives .bullets { margin: 10px 0 14px; padding-left: 1.2em; }
#initiatives .bullets li { margin: 6px 0; }