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


/* HERO base */
.hero { position: relative; min-height: 92vh; overflow: clip; }
.hero .hero-media { position: absolute; inset: 0; }
.hero .hero-media > * { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-brand-row {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 4vw, 40px);
  padding-inline: clamp(16px, 4vw, 64px);
  transform: translateX(-6%);
}

/* Bigger star logo */
.hero .emblem {
  width: clamp(140px, 18vw, 260px);
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.5));
  pointer-events: none; z-index: 3;
  animation: kyw-pulse 2.2s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes kyw-pulse { 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }

/* Higher-contrast tagline */
.hero-tagline {
  margin: 0; line-height: 1.15; font-weight: 700;
  font-family: inherit;
  color: #f5f5f5;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
  font-size: clamp(24px, 4.6vw, 58px);
  letter-spacing: 0.02em; text-transform: uppercase;
}
@media (max-width: 860px) {
  .hero-brand-row { flex-direction: column; transform: none; text-align: center; }
  .hero .emblem { width: clamp(140px, 30vw, 220px); }
  .hero-tagline { font-size: clamp(20px, 5.6vw, 38px); }
}

/* Our Why: video + CTA-styled 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: 28px auto 0;
  width: min(980px, 92vw);
  background: rgba(10,10,12,0.65);
  border: 2px solid #d4af37;
  border-radius: 12px;
  padding: 20px 26px;
  text-align: center;
  font-family: inherit;
  font-weight: 600;
  color: #d4af37;
  font-size: clamp(16px, 2.1vw, 20px);
  line-height: 1.6;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.our-why .copy-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.45); }