/* ============================================================
   NEXUS TOWERS — HOMEPAGE (extends site-base.css)
   Only the homepage-unique sections live here:
   the "split cinema" hero, the journey timeline, and the
   homepage responsive tweaks. All shared chrome/components
   (reset, tokens, header, footer, marquee, advantage, advocate,
   how, services, results, blog, final-cta, lead form, video
   modal, trust float, hero stagger) come from site-base.css.
   ============================================================ */

/* ============================================================
   HERO — CONCEPT 1 "SPLIT CINEMA"
   Hard 50/50 split: copy on a quiet navy panel, the entire
   right half is the film — a cinematic dusk scene with the
   skyline living inside it.
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;
  background:linear-gradient(178deg,#051E2A,var(--navy) 70%,#0B3246);
  color:var(--ice);overflow:hidden;
}
.hero-left{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:8rem max(3.5vw,2rem) 4rem max(var(--gutter), calc(100% - var(--max)/2 + var(--gutter)));
}
.hero-kicker{
  display:flex;align-items:center;gap:.7rem;
  font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(168,196,212,.7);margin-bottom:1.5rem;
}
.hero-kicker .sig{display:inline-flex;align-items:flex-end;gap:2.5px;height:12px;opacity:.85}
.hero-kicker .sig i{display:block;width:3.5px;border-radius:2px;background:var(--gold-deep);transform-origin:bottom;animation:sigUp .45s cubic-bezier(.2,.65,.3,1) both}
.hero-kicker .sig i:nth-child(1){height:4px;animation-delay:.55s}
.hero-kicker .sig i:nth-child(2){height:6px;animation-delay:.7s}
.hero-kicker .sig i:nth-child(3){height:9px;animation-delay:.85s}
.hero-kicker .sig i:nth-child(4){height:12px;animation-delay:1s}
@keyframes sigUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.hero h1{font-size:clamp(2.3rem,3.4vw,3.5rem);color:#fff;max-width:20ch;margin-bottom:1.3rem}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(110deg,var(--gold) 20%, #FFE9AE 50%, var(--gold-deep) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{max-width:46ch;color:var(--muted-ice);font-size:1.06rem;margin-bottom:2rem}
.hero-sub strong{color:var(--ice);font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem}
.bbb-mark{font-family:var(--font-display);font-weight:800;font-size:1rem;color:#fff;background:var(--navy-2);border:1px solid rgba(234,245,251,.2);border-radius:8px;padding:.15rem .5rem}

/* the film: the whole right half opens the video */
.cinema{
  position:relative;display:block;width:100%;height:100%;min-height:560px;
  border:0;padding:0;margin:0;cursor:pointer;overflow:hidden;background:#06222F;text-align:left;
}
.cinema .scene{position:absolute;inset:0;width:100%;height:100%;animation:kenburns 24s ease-in-out infinite alternate;transform-origin:55% 70%}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
/* blend the film into the copy panel */
.cinema::after{content:"";position:absolute;inset:0 auto 0 0;width:150px;z-index:2;background:linear-gradient(90deg,rgba(7,36,50,.95),transparent)}
.cinema:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
/* film title block: play disc + caption as ONE unit, lower-left */
.film-title{
  position:absolute;z-index:3;left:max(2rem,7%);bottom:2rem;
  display:flex;align-items:center;gap:1rem;pointer-events:none;
}
.ft-disc{
  flex:none;width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--navy);
  display:grid;place-items:center;box-shadow:0 14px 38px rgba(0,0,0,.5);
  transition:transform .3s ease;
}
.cinema:hover .ft-disc{transform:scale(1.1)}
.ft-disc svg{width:20px;height:20px;margin-left:3px}
.ft-text{display:flex;flex-direction:column;gap:.1rem;text-align:left}
.ft-text b{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.ft-text small{font-size:.85rem;color:var(--muted-ice)}
.cinema:hover .scene{filter:brightness(1.06)}
/* sky life over the painting */
.drift-cloud{animation:cloudDrift linear infinite}
.drift-cloud.dc1{animation-duration:115s;animation-delay:-38s}
.drift-cloud.dc2{animation-duration:88s;animation-delay:-62s}
@keyframes cloudDrift{from{transform:translateX(-700px)}to{transform:translateX(2600px)}}
/* real windows switching off and back on (facade-colored covers) */
.win-off{opacity:0;animation:lightsOff ease-in-out infinite}
@keyframes lightsOff{0%,58%{opacity:0}66%,86%{opacity:1}94%,100%{opacity:0}}
/* a few windows glowing a touch brighter */
.win-glow{opacity:0;animation:winGlow ease-in-out infinite}
@keyframes winGlow{0%,100%{opacity:0}50%{opacity:.45}}
/* the beacon and its signal */
.cine-beacon{animation:cineBeacon 5s ease-in-out infinite}
@keyframes cineBeacon{0%,100%{opacity:1}50%{opacity:.3}}
.cine-halo{opacity:.4;animation:cineHalo 5s ease-in-out infinite}
@keyframes cineHalo{0%,100%{opacity:.4}50%{opacity:.08}}
.sig-ring{fill:none;stroke:#FAD778;stroke-width:4;opacity:0;transform-box:fill-box;transform-origin:center;animation:sigPulse 8s ease-out 3s infinite}
.sig-ring.r2{animation-delay:7s}
@keyframes sigPulse{0%{opacity:0;transform:scale(.25)}8%{opacity:.5}55%{opacity:.12}70%,100%{opacity:0;transform:scale(3.4)}}

@media (max-width:1380px){
  section.hero{padding-top:0}
}
@media (max-width:1080px){
  .hero{grid-template-columns:1fr}
  .hero-left{padding:7.5rem var(--gutter) 2.6rem}
  .cinema{min-height:56vw}
}
@media (prefers-reduced-motion:reduce){
  .cinema .scene{animation:none}
  .cine-beacon,.cine-halo,.sig-ring,.drift-cloud,.win-glow,.win-off{animation:none}
  .sig-ring{opacity:0}
  .fly-birds{display:none}
}

/* ============================================================
   JOURNEY TIMELINE (the form column reuses site-base .lead-form)
   ============================================================ */
.journey{
  position:relative;overflow:hidden;color:var(--ice);
  background:
    radial-gradient(800px 480px at 8% 10%, rgba(50,176,166,.13), transparent 60%),
    radial-gradient(700px 400px at 95% 90%, rgba(250,215,120,.08), transparent 60%),
    linear-gradient(160deg,#051E2A, var(--navy) 65%, var(--navy-2));
  padding:clamp(4.5rem,9vw,7.5rem) 0;
}
.journey .section-title{color:#fff}
.journey-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2.5rem,6vw,5rem);align-items:stretch}
.timeline{position:relative;padding-left:.4rem;display:flex;flex-direction:column;justify-content:space-between}
.timeline::before{
  content:"";position:absolute;left:calc(.4rem + 27px);top:18px;bottom:18px;width:2px;
  background:linear-gradient(var(--teal), rgba(250,215,120,.6));
}
.tl-item{position:relative;display:flex;gap:1.5rem;padding:1.15rem 0}
.tl-item .tl-desc{font-family:var(--font-body);font-weight:400;font-size:.95rem;color:var(--muted-ice);line-height:1.55;margin-top:.4rem;max-width:42ch}
.tl-dot{
  position:relative;z-index:1;flex:none;width:56px;height:56px;border-radius:50%;
  background:var(--navy-2);border:1px solid rgba(250,215,120,.5);
  display:grid;place-items:center;color:var(--gold);
  box-shadow:0 0 0 6px rgba(250,215,120,.06);
}
.tl-dot svg{width:24px;height:24px}
.tl-item small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:.2rem}
.tl-item p{font-family:var(--font-display);font-weight:700;font-size:1.22rem;color:#fff;line-height:1.3}

/* ============================================================
   RESPONSIVE (homepage-specific; shared nav/footer collapse is in
   site-base.css — these blocks re-state it alongside page tweaks)
   ============================================================ */
@media (max-width:1380px){
  /* small laptops: tighten the hero so it still fits one viewport */
  .hero{padding-top:6rem}
  .hero-grid{padding-bottom:10vw}
  .hero h1{font-size:clamp(2.3rem,4.2vw,3.4rem)}
  .hero-sub{margin-bottom:1.6rem}
}
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:1rem}
  .hero-visual{order:2;justify-content:flex-start;padding-bottom:4rem}
  .hero-copy{padding-bottom:0}
  .video-card{width:100%;max-width:460px}
  .hero{min-height:0;padding-top:8rem}
  .adv-grid{grid-template-columns:1fr}
  .adv-intro{position:static}
  .svc-grid,.quote-grid,.post-grid{grid-template-columns:repeat(2,1fr)}
  .journey-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:880px){
  .value-grid{grid-template-columns:1fr}
  .endorse{border-left:0;padding-left:0;border-top:2px solid var(--gold-deep);padding-top:1.4rem}
  .serve-grid{grid-template-columns:1fr 1fr}
  .how-steps{grid-template-columns:1fr;gap:2.4rem}
  .how-line{display:none}
  .vs-stage{grid-template-columns:1fr}
  .vs-mid{flex-direction:row;width:100%;gap:.8rem}
  .vs-mid::before,.vs-mid::after{flex:1;width:auto;height:0;border-left:0;border-top:2px dashed rgba(10,50,70,.18)}
  .advocate-bg{display:none}
}
@media (max-width:620px){
  .serve-grid,.svc-grid,.quote-grid,.post-grid,.form-row,.footer-grid{grid-template-columns:1fr}
  .adv-cards{grid-template-columns:1fr}
  .hero h1{font-size:clamp(2.2rem,9vw,2.9rem)}
  .footer-bottom{flex-direction:column;text-align:center}
}