/* Lock-On hero (v2, trimmed in v4): canvas crosshair + copy. Colors are the site's own tokens only:
   night #0E1114, ink #14181B, amber #E8A93B, paper #ECEEE7, steel #4A5761, mist #98A3AC. */

.lockon{
  --lo-cy:34%;          /* lock point height, read by lockon.js */
  --lo-r:.42;           /* outer ring radius as a fraction of min(width, height) */
  --lo-h:max(640px,100vh);
  position:relative;isolation:isolate;overflow:hidden;
  min-height:var(--lo-h);
  background:radial-gradient(60% 50% at 50% 34%,rgba(232,169,59,.06),transparent 70%),#0E1114;
  color:#ECEEE7;text-align:center;
  display:flex;flex-direction:column;
}
@supports (height:100svh){ .lockon{--lo-h:max(640px,100svh);} }

.lo-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;}
.lo-veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 30% at 50% 62%,rgba(14,17,20,.45),transparent 70%),
    linear-gradient(to bottom,transparent 72%,#0E1114 100%);
}
.lo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

.lo-content{
  flex:1;display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:1120px;margin:0 auto;
  padding:calc(var(--lo-h) * .34 + 9vmin) 24px 32px;
}
.lo-eyebrow{
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#E8A93B;
  margin:0 0 18px;
}
.lockon h1{
  margin:0;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.08;font-weight:800;letter-spacing:-.035em;color:#FBFBF8;
  text-wrap:balance;
}
.lo-line{display:block;}
.lo-sub{margin:18px auto 0;max-width:46ch;font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:400;line-height:1.45;color:rgba(236,238,231,.75);}

.lo-ctas{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;}

/* Glass pill: gold-left, slate-right, gradient hairline */
.lo-btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;
  color:#ECEEE7;font-weight:600;font-size:1.02rem;
  background:
    linear-gradient(90deg,rgba(232,169,59,.22),transparent 60%),
    linear-gradient(90deg,transparent 40%,rgba(74,87,97,.35)),
    rgba(20,24,27,.35);
  -webkit-backdrop-filter:blur(14px) saturate(.9);backdrop-filter:blur(14px) saturate(.9);
  box-shadow:-10px -6px 30px rgba(232,169,59,.10),10px 8px 30px rgba(74,87,97,.18);
  transition:box-shadow .3s,transform .2s;
}
.lo-btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(90deg,#E8A93B,rgba(236,238,231,.3),#4A5761);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.lo-btn .arr{display:inline-block;transition:transform .25s cubic-bezier(.16,1,.3,1);}
.lo-btn:hover,.lo-btn:focus-visible{box-shadow:-12px -8px 40px rgba(232,169,59,.22),12px 10px 40px rgba(74,87,97,.28);}
.lo-btn:hover .arr,.lo-btn:focus-visible .arr{transform:translateX(3px);}
.lo-btn:active{transform:scale(.98);}
.lockon :focus-visible{outline:2px solid #E8A93B;outline-offset:3px;}

.lo-link{position:relative;color:#ECEEE7;font-weight:600;padding:12px 2px;}
.lo-link::after{content:"";position:absolute;left:2px;right:2px;bottom:8px;height:1px;background:rgba(236,238,231,.5);transform:scaleX(.35);transform-origin:left;transition:transform .3s cubic-bezier(.16,1,.3,1);}
.lo-link:hover::after,.lo-link:focus-visible::after{transform:scaleX(1);}

/* Footer line + scroll cue */
.lo-foot{margin:auto 0 0;padding-top:40px;font-size:.85rem;color:#98A3AC;}
.lo-cue{display:block;width:1px;height:40px;margin:18px auto 0;background:rgba(236,238,231,.25);transform-origin:top;}

/* ---------- entrance (motion allowed only; backwards fill = authored layout is the end state) ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes lo-wipe{from{clip-path:inset(100% 0 0 0);transform:translateY(9px);}to{clip-path:inset(0 0 -20% 0);transform:none;}}
  @keyframes lo-rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
  @keyframes lo-settle{from{opacity:0;transform:scale(.99);}to{opacity:1;transform:none;}}
  @keyframes lo-fade{from{opacity:0;}to{opacity:1;}}
  @keyframes lo-draw{0%{transform:scaleY(0);opacity:1;}70%{transform:scaleY(1);opacity:1;}100%{transform:scaleY(1);opacity:0;}}
  .lo-eyebrow{animation:lo-fade .7s cubic-bezier(.25,.8,.35,1) .2s backwards;}
  .lo-line{animation:lo-wipe .95s cubic-bezier(.16,1,.3,1) .35s backwards;}
  .lo-line + .lo-line{animation-delay:.45s;}
  .lo-sub{animation:lo-rise .7s cubic-bezier(.25,.8,.35,1) .75s backwards;}
  .lo-ctas{animation:lo-settle .8s cubic-bezier(.25,.8,.35,1) .95s backwards;}
  .lo-foot{animation:lo-fade .8s cubic-bezier(.25,.8,.35,1) 1.4s backwards;}
  .lo-cue{animation:lo-draw 2.4s cubic-bezier(.25,.8,.35,1) 2s infinite backwards;}
}

/* ---------- responsive ---------- */
@media (max-width:1099px){
  .lockon{--lo-cy:32%;--lo-r:.38;}
  .lo-content{padding-top:calc(var(--lo-h) * .32 + 9vmin);}
}
@media (max-width:599px){
  .lockon{--lo-cy:26%;--lo-r:.46;}
  .lo-content{padding-top:calc(var(--lo-h) * .26 + 10vmin);}
  .lockon h1{font-size:2.1rem;}
  .lo-ctas{flex-direction:column;align-items:stretch;width:100%;gap:6px;}
  .lo-btn{justify-content:center;font-size:.92rem;padding:0 18px;gap:8px;}
  .lo-link{align-self:center;}
}
@media (max-height:430px) and (orientation:landscape){
  .lockon{--lo-cy:62px;--lo-r:.2;min-height:0;}
  .lo-content{padding-top:112px;}
  .lo-eyebrow{display:none;}
  .lockon h1{font-size:1.7rem;}
  .lo-sub{margin-top:10px;font-size:1rem;}
  .lo-ctas{margin-top:16px;}
}

@media (prefers-reduced-motion:reduce){
  .lockon *{animation:none !important;transition:none !important;}
}