: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: sticky; top: 12px; left: 0; right: 0; margin: 0 auto;
  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: 40; transition: opacity 260ms ease, transform 260ms ease;
  width: fit-content;
}
.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{
  position: sticky; top: 12px; left: 0; right: 0; margin: 0 auto;
  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: 40; transition: opacity 260ms ease, transform 260ms ease;
  width: fit-content;
}
  .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;}

/* Create Your Path */
.create{ position:relative; min-height: 88vh; display:flex; align-items:center; justify-content:center; }
.create .overlay{ display:flex; align-items:center; justify-content:center; width:100%; }
.create .card{
  background: rgba(11,11,13,.76); border:1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 28px; width: min(980px, 92vw); text-align:center;
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
}
.create .headline{ font-size: clamp(36px, 6vw, 76px); margin: 0 0 6px; }
.create .sub{ color:#C9CED6; margin:0; font-size: clamp(18px, 3vw, 24px); }

/* Our Why */
.our-why{ position:relative; }
.our-why .vidwrap{
  position: sticky; top: 10vh; width: min(1100px, 96vw); margin: 0 auto;
  border-radius: 16px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,.45);
}
.our-why video{ width:100%; height:auto; display:block; filter: brightness(.95) contrast(1.04); }
.our-why .overlay-copy{
  position: relative; width: min(1000px, 90vw); margin: 22px auto 0;
  background: linear-gradient(180deg, rgba(11,11,13,.78), rgba(11,11,13,.62));
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
  padding: 18px 22px; line-height: 1.6; box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
.our-why .overlay-copy p{ font-size: clamp(16px, 2.1vw, 20px); color:#EDEFF2; margin: 0; }