/* ==========================================================================
   Lazzuli Tech — sections.css
   One block per page section, in the order they appear.
   ========================================================================== */

/* ==========================================================================
   1. Hero
   ========================================================================== */
.hero{
  position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 92% 58% at 50% 6%,rgba(52,88,224,var(--top-wash,.42)),transparent 72%),var(--ink);
}
.hero .atmos__field{inset:-20vw -10vw;opacity:var(--hero-glow,1);}
/* ---- layer 2: soft sweeping beams (atmosphere, no hard edge) ---- */
.hero__beam{position:absolute;inset:-30% -60%;z-index:1;pointer-events:none;overflow:hidden;}
.hero__beam i{
  position:absolute;top:-20%;left:0;width:42%;height:140%;
  background:linear-gradient(90deg,transparent,rgba(196,216,255,.085) 50%,transparent);
  filter:blur(16px);
  transform:translateX(-80%) rotate(13deg);
  animation:sweep 19s cubic-bezier(.45,0,.55,1) infinite;
  will-change:transform,opacity;
}
.hero__beam i:nth-child(2){width:26%;animation-duration:29s;animation-delay:-13s;opacity:.6;}
@keyframes sweep{
  0%  {transform:translateX(-90%) rotate(13deg);opacity:0;}
  18% {opacity:1;}
  62% {opacity:1;}
  80% {transform:translateX(300%) rotate(13deg);opacity:0;}
  100%{transform:translateX(300%) rotate(13deg);opacity:0;}
}

/* ---- layer 3: pyrite — matte mineral flecks, the only trackable feature.
   No halo and a single colour: glowing dots read as bulbs, and two colours
   of glowing dots read as fairy lights. ---- */
.hero__pyrite{position:absolute;inset:0;z-index:2;pointer-events:none;}
.hero__pyrite i{
  position:absolute;bottom:-6%;width:1.6px;height:1.6px;border-radius:50%;
  background:rgba(180,145,92,.72);opacity:0;
  animation:drift linear infinite;will-change:transform,opacity;
}
.hero__pyrite i.sm{width:1.1px;height:1.1px;background:rgba(180,145,92,.5);}
.hero__pyrite i.lg{width:2.2px;height:2.2px;background:rgba(196,166,112,.8);}
@keyframes drift{
  0%  {transform:translate3d(0,0,0);opacity:0;}
  10% {opacity:.9;}
  75% {opacity:.75;}
  100%{transform:translate3d(var(--dx,6vw),-112vh,0);opacity:0;}
}

/* buttons own their transform (magnetism), so hover changes colour only */
.hero .btn{will-change:transform;}
.hero .btn:hover{transform:none;}

.hero__scrim{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse 58% 48% at 50% 50%,
    rgba(5,9,18,var(--hero-scrim,.62)),rgba(5,9,18,.2) 62%,transparent 78%);
}
.hero__vignette{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse 92% 80% at 50% 48%,transparent 52%,rgba(5,9,18,.62) 100%);
}
.hero__inner{position:relative;z-index:6;max-width:940px;padding:130px 30px;width:100%;}

.hero__badge{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  font-family:var(--f-mono);font-weight:500;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-hi);
  border:1px solid var(--hair);padding:10px 20px;border-radius:100px;margin-bottom:38px;
  background:rgba(5,9,18,.62);
}
.hero__dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;
  animation:pulse 2.8s ease-in-out infinite;}
.hero__sep{color:var(--gold);opacity:.45;}

.hero h1{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(42px,6.6vw,88px);line-height:1.04;letter-spacing:-.028em;margin-bottom:32px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.hero__lead{
  color:var(--muted);font-size:clamp(16.5px,1.4vw,18.5px);line-height:1.7;
  max-width:52ch;margin:0 auto;
}
.hero__lead strong{color:var(--ivory);font-weight:500;}
.hero__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:44px;}
.hero__meta{margin-top:36px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);}

.hero__cue{
  position:absolute;bottom:34px;left:50%;margin-left:-.5px;width:1px;height:54px;
  background:rgba(180,145,92,.16);z-index:6;overflow:hidden;
}
.hero__cue::after{
  content:"";position:absolute;top:0;left:0;width:1px;height:18px;background:var(--gold);
  animation:cue 2.6s ease-in-out infinite;
}
@keyframes cue{0%{transform:translateY(-20px);opacity:0;}30%{opacity:1;}100%{transform:translateY(54px);opacity:0;}}

/* hero entrance is orchestrated on load, not on scroll */
.hero .rv{transition-property:opacity,transform;}
.hero.is-ready .rv{opacity:1;transform:none;}
.hero.is-ready .hero__badge{transition-delay:.05s;}
.hero.is-ready .hero__lead{transition-delay:.52s;}
.hero.is-ready .hero__actions{transition-delay:.66s;}
.hero.is-ready .hero__meta{transition-delay:.78s;}
.hero h1 .ln > span{transition-delay:.18s;}
.hero.is-ready h1 .ln > span{transform:none;}
.hero.is-ready h1 .ln:nth-child(2) > span{transition-delay:.32s;}
.hero.is-done .rv,.hero.is-done h1 .ln > span{transform:none;transition:none;will-change:auto;}
.hero.is-done h1 .ln{overflow:visible;}

/* hero runs the glow at full strength — it is the page's first peak */
@media(min-width:900px){.hero{--hero-glow:.74;--glow-blur:82px;--top-wash:.32;--hero-scrim:.66;}}
@media(min-width:1280px){.hero{--hero-glow:.6;--glow-blur:96px;--top-wash:.26;--hero-scrim:.68;}}
@media(min-width:1700px){.hero{--hero-glow:.5;--glow-blur:110px;--top-wash:.22;--hero-scrim:.7;}}
@media(max-width:700px){
  .hero{min-height:auto;--glow-blur:48px;}
  .hero__beam i{filter:blur(12px);}
  .hero__inner{padding:96px 24px 104px;}
  .hero__badge{font-size:10.5px;letter-spacing:.13em;gap:9px;padding:10px 16px;}
  .hero .btn{width:100%;justify-content:center;}
  .hero__cue{display:none;}
}

/* ==========================================================================
   2. Sector strip
   ========================================================================== */
.strip{
  position:relative;z-index:3;padding:22px 0;overflow:hidden;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:rgba(5,9,18,.42);
}
.strip__track{display:flex;width:max-content;animation:marquee 46s linear infinite;}
.strip__track span{
  font-family:var(--f-display);font-style:italic;font-weight:300;font-size:21px;
  letter-spacing:-.01em;color:var(--dim);white-space:nowrap;padding:0 30px;
  display:flex;align-items:center;
}
.strip__track span::after{content:"";width:3px;height:3px;border-radius:50%;
  background:var(--gold);margin-left:30px;opacity:.65;}
@keyframes marquee{to{transform:translateX(-50%);}}
@media(max-width:620px){
  .strip__track span{font-size:18px;padding:0 22px;}
  .strip__track span::after{margin-left:22px;}
}

/* ==========================================================================
   3. Services
   ========================================================================== */
.svc__head{max-width:620px;margin-bottom:64px;}
.svc__head .h2{margin-bottom:24px;}
.svc__rowswrap{position:relative;overflow-x:clip;}

/* gold light trailing the cursor across the rows (pointer devices only) */
.svc__cursor{
  position:absolute;width:520px;height:520px;left:0;top:0;margin:-260px 0 0 -260px;
  border-radius:50%;pointer-events:none;z-index:2;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(180,145,92,.13),rgba(74,123,255,.06) 42%,transparent 68%);
  transition:opacity .9s var(--ease);
}
.svc__rowswrap.is-hot .svc__cursor{opacity:1;}

.svc__rows{border-top:1px solid var(--hair-cool);position:relative;z-index:3;}
.svc__row{
  display:grid;grid-template-columns:1fr .82fr;gap:64px;align-items:center;
  padding:56px 0;border-bottom:1px solid var(--hair-cool);position:relative;isolation:isolate;
}
.svc__row::after{content:"";position:absolute;inset:0 -24px;z-index:-1;
  background:rgba(74,123,255,.05);opacity:0;transition:opacity 1s var(--ease);}
.svc__row::before{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1.15s var(--ease);}

.svc__copy{display:grid;grid-template-columns:70px 1fr;gap:32px;align-items:start;
  transition:transform 1.05s var(--ease);}
.svc__art{transition:transform 1.05s var(--ease) .06s,opacity .9s var(--ease);opacity:.82;}
.svc__num{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.14em;
  color:var(--dim);padding-top:8px;transition:color .9s var(--ease);}
.svc__row h3{font-family:var(--f-display);font-weight:400;font-size:clamp(21px,2.1vw,27px);
  line-height:1.28;letter-spacing:-.018em;margin-bottom:14px;}
.svc__row p{color:var(--muted);font-size:15.6px;line-height:1.72;}
.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
.tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--hair-cool);padding:7px 14px;border-radius:100px;
  transition:border-color .9s var(--ease),color .9s var(--ease);}

/* engaged: hover on pointer devices, scroll position on touch */
.svc__row:hover::after,.svc__row.is-active::after{opacity:1;}
.svc__row:hover::before,.svc__row.is-active::before{transform:scaleX(1);}
.svc__row:hover .svc__copy,.svc__row.is-active .svc__copy{transform:translate3d(14px,0,0);}
.svc__row:hover .svc__art,.svc__row.is-active .svc__art{transform:translate3d(8px,0,0);opacity:1;}
.svc__row:hover .svc__num,.svc__row.is-active .svc__num{color:var(--gold-hi);}
.svc__row:hover .tag,.svc__row.is-active .tag{border-color:rgba(180,145,92,.35);color:var(--muted);}

/* ---- tech panels ---- */
.panel{border:1px solid var(--hair-cool);background:rgba(8,13,27,.86);}
.panel__bar{display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--hair-cool);background:rgba(12,23,48,.55);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}
.panel__live{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;
  animation:pulse 2.4s ease-in-out infinite;}

/* 001 — commerce: one number, a curve, and the last orders in */
.commerce{padding:26px 26px 24px;}
.commerce__hero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;}
.commerce__label{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);display:block;margin-bottom:10px;}
.commerce__val{font-family:var(--f-display);font-weight:300;font-size:clamp(34px,3.4vw,44px);
  line-height:1;color:var(--ivory);letter-spacing:-.02em;}
.commerce__delta{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-hi);white-space:nowrap;padding-bottom:4px;}

.commerce__chart{margin:22px 0 6px;height:74px;position:relative;}
.commerce__chart svg{width:100%;height:100%;display:block;overflow:visible;}
.commerce__chart .c-area{fill:url(#commerceFill);}
.commerce__chart .c-line{fill:none;stroke:var(--gold);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:340;stroke-dashoffset:340;
  animation:draw 2.6s var(--ease) forwards;}
.commerce__chart .c-tip{fill:var(--gold);}
.commerce__chart .c-halo{fill:none;stroke:var(--gold);stroke-width:1;opacity:.5;
  animation:halo 2.8s ease-in-out infinite;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes halo{0%,100%{r:4;opacity:.5;}50%{r:8;opacity:0;}}
.commerce__axis{display:flex;justify-content:space-between;
  font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(120,131,156,.65);}

.commerce__orders{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair-cool);}
.order{display:flex;align-items:center;gap:12px;padding:11px 0;}
.order__dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;}
.order__txt{flex:1;min-width:0;}
.order__txt b{display:block;font-weight:400;font-size:13.6px;color:var(--ivory);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.order__txt span{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(120,131,156,.7);}
.order__val{font-family:var(--f-mono);font-size:12.5px;color:var(--gold-hi);flex:none;}

/* 002 — systems: a board, with each job's progress visible at a glance */
.jobs{padding:24px 26px 22px;}
.job{padding:14px 0;border-bottom:1px solid var(--hair-cool);}
.job:last-of-type{border-bottom:none;}
.job__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px;}
.job__name{font-weight:400;font-size:13.8px;color:var(--ivory);}
.job__name em{font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;
  color:rgba(120,131,156,.7);margin-right:9px;}
.job__due{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;}
.job__bar{height:3px;background:rgba(150,170,220,.14);border-radius:2px;overflow:hidden;}
.job__bar i{display:block;height:100%;border-radius:2px;background:rgba(150,170,220,.42);
  transform-origin:left;transform:scaleX(0);animation:fill 1.6s var(--ease) forwards;}
.job.is-run .job__bar i{background:var(--gold);box-shadow:0 0 8px rgba(180,145,92,.5);}
.job.is-done .job__bar i{background:rgba(150,170,220,.5);}
@keyframes fill{to{transform:scaleX(1);}}
.jobs__foot{margin-top:18px;padding-top:15px;border-top:1px solid var(--hair-cool);
  display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);}

/* 003 — network spine */
.spine{padding:44px 30px 34px;}
.spine__rail{position:relative;}
.spine__line{position:absolute;top:5px;left:6px;right:6px;height:1px;
  background:var(--hair-cool);overflow:hidden;}
.spine__line i{position:absolute;top:0;left:0;width:140px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:translateX(-140px);animation:travel 6.5s linear infinite;}
@keyframes travel{to{transform:translateX(100vw);}}
.spine__nodes{position:relative;display:flex;justify-content:space-between;}
.spine__node{display:flex;flex-direction:column;align-items:center;gap:16px;}
.spine__dot{width:11px;height:11px;border-radius:50%;background:var(--ink);
  border:1px solid rgba(150,170,220,.42);position:relative;flex:none;}
.spine__node.is-hub .spine__dot{border-color:var(--gold);}
.spine__node.is-hub .spine__dot::after{content:"";position:absolute;inset:2.5px;border-radius:50%;
  background:var(--gold);animation:pulse 2.8s ease-in-out infinite;}
.spine__label{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.spine__node.is-hub .spine__label{color:var(--gold-hi);}
.spine__foot{margin-top:28px;padding-top:16px;border-top:1px solid var(--hair-cool);
  display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);}
@keyframes bar{0%,100%{opacity:.55;}50%{opacity:1;}}

/* "start here if" — the self-qualifying line that opens each door */
.svc__start{
  display:block;margin:0 0 16px;padding-left:16px;position:relative;
  color:var(--ivory);font-size:15.2px;line-height:1.6;
}
.svc__start::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--gold);}
.svc__start b{font-family:var(--f-mono);font-weight:500;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-hi);display:block;margin-bottom:8px;}
.svc__list{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin-top:20px;line-height:2;}
.svc__bridge{margin-top:52px;padding-top:26px;border-top:1px solid var(--hair-cool);
  text-align:center;color:var(--muted);font-size:15.6px;line-height:1.7;}
.svc__bridge strong{color:var(--ivory);font-weight:500;}

@media(max-width:980px){
  .svc__cursor{display:none;}
  .svc__row{grid-template-columns:1fr;gap:34px;padding:44px 0;}
  .svc__art{opacity:1;}
  .svc__row:hover .svc__copy,.svc__row.is-active .svc__copy{transform:translate3d(8px,0,0);}
  .svc__row:hover .svc__art,.svc__row.is-active .svc__art{transform:none;}
}
@media(max-width:620px){
  .svc__head{margin-bottom:44px;}
  .svc__copy{grid-template-columns:48px 1fr;gap:18px;}
  .spine{padding:36px 18px 26px;}
  .spine__label{font-size:8px;letter-spacing:.06em;}
  .spine__node{gap:12px;}
}

/* ==========================================================================
   4. Work
   ========================================================================== */
.work{padding-top:0;}
.work__head{margin-bottom:64px;display:flex;justify-content:space-between;
  align-items:flex-end;gap:48px;flex-wrap:wrap;}
.work__head .lead{max-width:36ch;}
.work__gridwrap{position:relative;overflow-x:clip;}
.work__spot{
  position:absolute;width:620px;height:620px;left:0;top:0;margin:-310px 0 0 -310px;
  border-radius:50%;pointer-events:none;z-index:2;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(180,145,92,.16),rgba(74,123,255,.08) 40%,transparent 68%);
  transition:opacity .8s var(--ease);
}
.work__gridwrap.is-hot .work__spot{opacity:1;}

.work__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;position:relative;z-index:3;
  background:var(--hair-cool);border:1px solid var(--hair-cool);}
/* the lead case gets twice the width — hierarchy says which work matters most */
.card--feat{grid-column:span 2;}
.card--feat .card__frame{aspect-ratio:16/9;}
.card--feat h3{font-size:27px;}
.card--feat .card__info{padding:34px 34px 38px;}
.card--feat .card__info p{font-size:15.4px;max-width:52ch;}
.card{
  background:var(--ink);position:relative;overflow:hidden;isolation:isolate;
  opacity:0;transform:translateY(30px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),background .8s var(--ease);
}
.card.is-in{opacity:1;transform:none;}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:5;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease);}

/* curtain reveal on the image frame */
.card__frame{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(160deg,#0C1730,#080D1B);
  clip-path:inset(0 0 100% 0);transition:clip-path 1.35s var(--ease);}
.card.is-in .card__frame{clip-path:inset(0 0 0 0);}
.card__frame::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 42%,rgba(5,9,18,.9) 100%);}
.card__par{position:absolute;left:0;right:0;top:-12%;height:124%;will-change:transform;}
.card__par img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform 1.5s var(--ease);}

.card__info{padding:30px 30px 34px;position:relative;z-index:3;}
.card__sector{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-hi);display:block;margin-bottom:14px;}
.card h3{font-family:var(--f-display);font-weight:400;font-size:22px;letter-spacing:-.018em;margin-bottom:10px;}
.card p{color:var(--muted);font-size:14.6px;line-height:1.65;}
.card__info > *{transition:transform .9s var(--ease);}
.card__go{
  position:absolute;top:24px;right:24px;z-index:4;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(241,238,229,.26);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:14px;color:var(--ivory);background:rgba(5,9,18,.45);
  opacity:0;transform:translate3d(-6px,6px,0);
  transition:opacity .7s var(--ease),transform .7s var(--ease),
             border-color .7s var(--ease),background .7s var(--ease);
}
.card:hover,.card.is-active{background:var(--lapis);}
.card:hover::before,.card.is-active::before{transform:scaleX(1);}
.card:hover .card__par img,.card.is-active .card__par img{transform:scale(1.05);}
.card:hover .card__info > *,.card.is-active .card__info > *{transform:translate3d(8px,0,0);}
.card:hover .card__info > *:nth-child(2),.card.is-active .card__info > *:nth-child(2){transition-delay:.04s;}
.card:hover .card__info > *:nth-child(3),.card.is-active .card__info > *:nth-child(3){transition-delay:.08s;}
.card:hover .card__go,.card.is-active .card__go{opacity:1;transform:none;
  border-color:var(--gold);background:rgba(5,9,18,.72);}

@media(max-width:900px){
  .work__grid{grid-template-columns:1fr 1fr;}
  .work__spot{display:none;}
}
@media(max-width:620px){
  .work__head{margin-bottom:40px;gap:22px;}
  .work__grid{grid-template-columns:1fr;}
  .card__frame{aspect-ratio:16/11;}
  .card__info{padding:24px 22px 28px;}
  .card h3{font-size:20px;}
  .card__go{top:18px;right:18px;width:34px;height:34px;}
}

/* ==========================================================================
   5. Full-bleed band
   ========================================================================== */
.band{position:relative;min-height:64vh;display:flex;align-items:center;
  overflow:hidden;isolation:isolate;}
.band__media{position:absolute;inset:-8% 0;z-index:0;overflow:hidden;
  background:linear-gradient(160deg,#0C1730,#080D1B);}
.band__media img{width:100%;height:100%;object-fit:cover;will-change:transform;}
.band__veil{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,9,18,.9) 0%,rgba(5,9,18,.62) 48%,rgba(5,9,18,.35) 100%),
    radial-gradient(ellipse 90% 80% at 50% 50%,transparent 40%,rgba(5,9,18,.55) 100%);}
.band__inner{position:relative;z-index:5;padding:96px var(--pad);}
.band__copy{max-width:640px;}
.band .h2{margin-bottom:24px;}
.band .lead{max-width:46ch;}
.band__meta{display:flex;margin-top:44px;border-top:1px solid var(--hair-cool);}
.band__meta div{padding:22px 28px 0 0;margin-right:28px;border-right:1px solid var(--hair-cool);}
.band__meta div:last-child{border-right:none;margin-right:0;padding-right:0;}
.band__meta strong{display:block;font-family:var(--f-display);font-weight:300;font-size:30px;
  line-height:1;color:var(--ivory);margin-bottom:9px;}
.band__meta span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);display:block;line-height:1.7;}
@media(max-width:900px){
  .band{min-height:auto;}
  .band__inner{padding:78px var(--pad);}
  .band__veil{background:linear-gradient(180deg,rgba(5,9,18,.72) 0%,rgba(5,9,18,.86) 100%);}
}
@media(max-width:620px){
  .band__inner{padding:64px var(--pad);}
  .band__meta{flex-wrap:wrap;}
  .band__meta div{padding:20px 20px 0 0;margin-right:20px;}
  .band__meta strong{font-size:25px;}
}

/* ==========================================================================
   6. Why Lazzuli
   ========================================================================== */
.why{padding-top:0;}
.why__grid{display:grid;grid-template-columns:1fr .92fr;gap:76px;align-items:center;}
.why .h2{font-size:clamp(30px,4.4vw,54px);line-height:1.1;}
.why .lead{max-width:48ch;margin-top:24px;}

/* the list, routed as a circuit branch */
.checks{margin-top:38px;position:relative;padding-left:26px;}
.checks::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:var(--hair-cool);}
.checks::after{content:"";position:absolute;left:4px;top:0;width:1px;height:0;background:var(--gold);
  box-shadow:0 0 7px rgba(180,145,92,.55);transition:height 1.5s var(--ease) .35s;}
.is-in .checks::after{height:100%;}
.checks li{color:var(--muted);font-size:15.4px;line-height:1.6;padding:18px 0 18px 22px;
  border-bottom:1px solid var(--hair-cool);position:relative;}
.checks li:first-child{border-top:1px solid var(--hair-cool);}
.checks li::before{content:"";position:absolute;left:0;top:27px;width:14px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease);}
.checks li::after{content:"";position:absolute;left:-26px;top:23px;width:9px;height:9px;
  border-radius:50%;background:var(--ink);border:1px solid rgba(150,170,220,.45);
  transition:border-color .9s var(--ease),background .9s var(--ease),box-shadow .9s var(--ease);}
.is-in .checks li::before{transform:scaleX(1);}
.is-in .checks li::after{border-color:var(--gold);background:var(--gold);box-shadow:0 0 9px rgba(180,145,92,.6);}
.is-in .checks li:nth-child(2)::before,.is-in .checks li:nth-child(2)::after{transition-delay:.14s;}
.is-in .checks li:nth-child(3)::before,.is-in .checks li:nth-child(3)::after{transition-delay:.28s;}
.is-in .checks li:nth-child(4)::before,.is-in .checks li:nth-child(4)::after{transition-delay:.42s;}
.checks li strong{color:var(--ivory);font-weight:500;}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--hair-cool);border:1px solid var(--hair-cool);}
.stats__photo{grid-column:1 / -1;position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(160deg,#0C1730,#080D1B);isolation:isolate;}
.stats__veil{position:absolute;inset:0;z-index:4;
  background:linear-gradient(180deg,transparent 50%,rgba(5,9,18,.72) 100%);}
.stat{background:var(--ink);padding:38px 30px;transition:background .7s var(--ease);}
.stat:hover{background:var(--lapis);}
.stat__num{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:.1em;}
.stat__num > b{display:block;font-family:var(--f-display);font-weight:300;
  font-size:clamp(36px,3.4vw,48px);line-height:1;color:var(--ivory);letter-spacing:-.02em;
  transform:translateY(110%);transition:transform 1.1s var(--ease);}
.is-in .stat__num > b{transform:none;}
.is-in .stat:nth-child(3) .stat__num > b{transition-delay:.09s;}
.is-in .stat:nth-child(4) .stat__num > b{transition-delay:.18s;}
.is-in .stat:nth-child(5) .stat__num > b{transition-delay:.27s;}
.stat span{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);line-height:1.7;display:block;margin-top:12px;}
@media(max-width:960px){.why__grid{grid-template-columns:1fr;gap:50px;}}

/* ==========================================================================
   7. Process
   ========================================================================== */
.proc__head{margin-bottom:64px;}
.proc__track{position:relative;}
.proc__stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;}
.proc__stage > .wrap{width:100%;flex:1 1 auto;}
.proc__inner{display:grid;grid-template-columns:.72fr 1fr .95fr;gap:48px;align-items:center;width:100%;}
.proc__seg{height:58vh;}

.proc__prog{position:absolute;left:0;right:0;top:0;height:2px;background:var(--hair-cool);}
.proc__prog i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,rgba(180,145,92,.5),var(--gold));
  box-shadow:0 0 12px rgba(180,145,92,.6);}

/* rail drawn with the logo's own geometry */
.proc__rail{position:relative;display:grid;}
.proc__railsvg{position:absolute;left:0;top:0;height:100%;width:44px;overflow:visible;}
.proc__railsvg .rail-base{fill:none;stroke:var(--hair-cool);stroke-width:1;}
.proc__railsvg .rail-live{fill:none;stroke:var(--gold);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(180,145,92,.6));}
.proc__item{position:relative;padding:20px 0 20px 62px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);transition:color .8s var(--ease);}
.proc__item.is-on{color:var(--gold-hi);}
.proc__item::before{content:"";position:absolute;left:36px;top:50%;width:9px;height:9px;margin-top:-4.5px;
  border-radius:50%;background:var(--ink);border:1px solid rgba(150,170,220,.45);
  transition:border-color .8s var(--ease),background .8s var(--ease),transform .8s var(--ease);}
.proc__item.is-on::before{border-color:var(--gold);background:var(--gold);
  transform:scale(1.15);box-shadow:0 0 10px rgba(180,145,92,.7);}
.proc__count{margin-top:26px;padding-left:62px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.2em;color:var(--dim);}
.proc__count b{font-weight:400;color:var(--gold-hi);}

.proc__panels{position:relative;min-height:310px;}
.proc__panel{position:absolute;inset:0;opacity:0;transform:translateY(24px);pointer-events:none;
  transition:opacity .75s var(--ease),transform .75s var(--ease);}
.proc__panel.is-on{opacity:1;transform:none;pointer-events:auto;}
.proc__panel em{font-style:normal;font-family:var(--f-mono);font-weight:500;font-size:10.5px;
  letter-spacing:.2em;color:var(--gold-hi);display:block;margin-bottom:20px;}
.proc__panel h3{font-family:var(--f-display);font-weight:300;font-size:clamp(28px,3.2vw,42px);
  line-height:1.12;letter-spacing:-.024em;margin-bottom:18px;}
.proc__panel p{color:var(--muted);font-size:clamp(15.5px,1.3vw,17px);line-height:1.75;}

.proc__shots{position:relative;aspect-ratio:4/5;border:1px solid var(--hair-cool);overflow:hidden;}
.proc__shot{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease);}
.proc__shot.is-on{opacity:1;}
.proc__shot .media{position:absolute;inset:-9% 0;will-change:transform;}

/* mobile: trunk on the left, branch bar across each card */
.proc__cards{display:none;position:relative;}
.proc__cardtrace{position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--hair-cool);}
.proc__card{border-top:1px solid var(--hair-cool);padding:32px 0 36px 34px;position:relative;
  opacity:.45;transition:opacity .8s var(--ease);}
.proc__card::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease);}
.proc__card::after{content:"";position:absolute;left:1px;top:-5px;width:9px;height:9px;border-radius:50%;
  background:var(--ink);border:1px solid rgba(150,170,220,.45);
  transition:border-color .8s var(--ease),background .8s var(--ease),box-shadow .8s var(--ease);}
.proc__card.is-active{opacity:1;}
.proc__card.is-active::before{transform:scaleX(1);}
.proc__card.is-active::after{border-color:var(--gold);background:var(--gold);box-shadow:0 0 10px rgba(180,145,92,.7);}
.proc__card .media{aspect-ratio:16/10;margin-bottom:26px;}
.proc__card em{font-style:normal;font-family:var(--f-mono);font-weight:500;font-size:10.5px;
  letter-spacing:.2em;color:var(--gold-hi);}
.proc__card h3{font-family:var(--f-display);font-weight:400;font-size:24px;letter-spacing:-.02em;margin:13px 0 12px;}
.proc__card p{color:var(--muted);font-size:15.4px;line-height:1.7;}

@media(min-width:901px) and (max-height:760px){
  .proc__panels{min-height:240px;}
  .proc__shots{aspect-ratio:1/1;}
  .proc__panel h3{font-size:32px;}
  .proc__seg{height:52vh;}
}
@media(max-width:900px){
  .proc__track{display:none;}
  .proc__cards{display:block;}
  .proc__head{margin-bottom:12px;}
}
@media(max-width:620px){
  .proc__card{padding:28px 0 32px 30px;}
  .proc__card h3{font-size:22px;}
}

/* ==========================================================================
   8. How we work together — engagement models, deliberately without prices
   ========================================================================== */
.engage__head{max-width:640px;margin:0 auto 64px;text-align:center;}
.engage__head .h2{margin-bottom:22px;}
.engage__head .lead{margin:0 auto;}
.engage__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hair-cool);border:1px solid var(--hair-cool);}
.model{background:var(--ink);padding:46px 34px 40px;display:flex;flex-direction:column;
  position:relative;transition:background .8s var(--ease);}
.model:hover{background:var(--lapis);}
.model__idx{font-family:var(--f-mono);font-weight:500;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-hi);display:block;margin-bottom:18px;}
.model h3{font-family:var(--f-display);font-weight:400;font-size:27px;letter-spacing:-.02em;}
.model__note{margin-top:14px;font-size:15px;color:var(--ivory);line-height:1.6;}
.model ul{margin:26px 0 0;display:grid;}
.model li{color:var(--muted);font-size:14.4px;line-height:1.6;padding:13px 0 13px 20px;
  border-bottom:1px solid var(--hair-cool);position:relative;}
.model li:last-child{border-bottom:none;}
.model li::before{content:"";position:absolute;left:0;top:20px;width:9px;height:1px;
  background:var(--gold);opacity:.75;}
.engage__foot{margin-top:34px;text-align:center;color:var(--muted);font-size:15.4px;line-height:1.75;
  max-width:56ch;margin-left:auto;margin-right:auto;}
.engage__foot strong{color:var(--ivory);font-weight:500;}
@media(max-width:900px){.engage__grid{grid-template-columns:1fr;}}
@media(max-width:620px){.model{padding:36px 24px 32px;}}

/* ==========================================================================
   9. Final CTA — the page's second peak, mirroring the hero
   ========================================================================== */
.cta{position:relative;padding:150px 0;text-align:center;overflow:hidden;isolation:isolate;}
.cta .atmos__field{inset:-20vw -10vw;opacity:var(--cta-glow,1);}
.cta__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 50%,
    rgba(5,9,18,var(--cta-scrim,.66)),rgba(5,9,18,.24) 62%,transparent 78%);}
.cta__inner{position:relative;z-index:3;max-width:760px;margin:0 auto;padding:0 var(--pad);}
.cta__badge{display:inline-flex;align-items:center;gap:11px;
  font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-hi);border:1px solid var(--hair);padding:9px 18px;border-radius:100px;
  margin-bottom:36px;background:rgba(5,9,18,.6);}
.cta .h2{font-size:clamp(36px,5.4vw,64px);margin-bottom:26px;}
.cta .lead{max-width:46ch;margin:0 auto 44px;}
.cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
@media(min-width:900px){.cta{--cta-glow:.72;--glow-blur:84px;--cta-scrim:.7;}}
@media(min-width:1280px){.cta{--cta-glow:.58;--glow-blur:98px;--cta-scrim:.72;}}
@media(min-width:1700px){.cta{--cta-glow:.48;--glow-blur:112px;--cta-scrim:.74;}}
@media(max-width:700px){
  .cta{padding:104px 0;--glow-blur:52px;}
  .cta .btn{width:100%;justify-content:center;}
}

/* ==========================================================================
   Shared: duotone image treatment
   Drop any raw photo inside .media — colour is handled here, so images from
   different sources still read as one library. Do not colour-correct first.
   ========================================================================== */
.media{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#0C1730,#080D1B);}
.media img{width:100%;height:100%;object-fit:cover;object-position:center;
  filter:grayscale(1) contrast(1.18) brightness(.66);}
.media::before{content:"";position:absolute;inset:0;z-index:2;mix-blend-mode:color;
  background:linear-gradient(150deg,#1B3A8F,#0D1B3D);}
.media::after{content:"";position:absolute;inset:0;z-index:3;mix-blend-mode:soft-light;
  background:radial-gradient(ellipse 70% 65% at 24% 18%,rgba(208,181,131,.48),transparent 62%);}
.media--warm::before{background:linear-gradient(150deg,#3A2F14,#0D1B3D);}

/* placeholder shown while an image slot is still empty */
.slot{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(120,131,156,.8);text-align:center;padding:0 18px;line-height:1.8;}

/* ==========================================================================
   Touch devices: replace hover with scroll-driven activation
   ========================================================================== */
@media(hover:none){
  .card__go{display:none;}
  .card:hover .card__par img{transform:none;}
  .card:hover .card__info > *{transform:none;}
  .svc__row:hover .svc__copy{transform:none;}
}

/* ==========================================================================
   The circuit trace is the only divider where it appears.
   Guard against any adjacent element re-introducing a straight rule.
   ========================================================================== */
.band,.cta,.site-footer{border-top:0;border-bottom:0;}
.trace + *,* + .trace{border-top:0;}
.trace{margin:0;}