/* Home page — loader, hero, services, work strip, stats */

.hero-blobs .b1{position:absolute;width:60vw;height:60vw;left:-15vw;top:-20vw;border-radius:50%;background:radial-gradient(circle,#16414a 0%,transparent 65%);filter:blur(60px);animation:blobA 14s ease-in-out infinite}
.hero-blobs .b2{position:absolute;width:55vw;height:55vw;right:-18vw;bottom:-20vw;border-radius:50%;background:radial-gradient(circle,#0f3038 0%,transparent 65%);filter:blur(70px);animation:blobB 18s ease-in-out infinite}
.hero-blobs .b3{position:absolute;width:44vw;height:44vw;left:30vw;top:30vh;border-radius:50%;background:radial-gradient(circle,#1e5a58 0%,transparent 62%);opacity:.5;filter:blur(90px);animation:blobC 21s ease-in-out infinite}

@keyframes hDraw{to{stroke-dashoffset:0}}
@keyframes hFade{from{opacity:0}to{opacity:1}}
@keyframes heroTxt{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes cueDot{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(26px);opacity:0}}

.heroMark{margin:0 0 46px;opacity:0}
.heroMark svg{height:clamp(84px,15vh,150px);width:auto;overflow:visible}
.heroMark path{stroke-dasharray:22;stroke-dashoffset:22}
.hero-go .heroMark{animation:hFade .01s linear forwards}
.hero-go .hp1{animation:hDraw .55s cubic-bezier(.16,1,.3,1) .1s forwards}
.hero-go .hp2{animation:hDraw .55s cubic-bezier(.16,1,.3,1) .25s forwards}
.hero-go .hp3{animation:hDraw .55s cubic-bezier(.16,1,.3,1) .4s forwards}
.hero-go .hp4{animation:hDraw .5s cubic-bezier(.16,1,.3,1) .62s forwards}
.hero-go .hp5{animation:hDraw .5s cubic-bezier(.16,1,.3,1) .78s forwards}
.hLine{opacity:0}
.hero-go .hl0{animation:heroTxt .8s cubic-bezier(.16,1,.3,1) 1.05s forwards}
.hero-go .hl1{animation:heroTxt .8s cubic-bezier(.16,1,.3,1) 1.2s forwards}
.hero-go .hl2{animation:heroTxt .8s cubic-bezier(.16,1,.3,1) 1.32s forwards}
.hero-go .hl3{animation:heroTxt .8s cubic-bezier(.16,1,.3,1) 1.44s forwards}
.hero-go .hl4{animation:heroTxt .8s cubic-bezier(.16,1,.3,1) 1.62s forwards}
.hero-go .hcue{animation:heroTxt .8s cubic-bezier(.16,1,.3,1) 2s forwards}
.hcue{opacity:0}
.hcue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,rgba(143,208,207,0),#8fd0cf);position:relative;overflow:visible}
.hcue i::after{content:'';position:absolute;left:-1px;top:0;width:3px;height:3px;border-radius:50%;background:#8fd0cf;animation:cueDot 1.9s ease-in-out infinite}

@keyframes ldGlow{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
@keyframes ldWord{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes ldTrack{from{letter-spacing:.05em;opacity:.2}to{letter-spacing:.42em;opacity:1}}
@keyframes ldLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ldDraw{to{stroke-dashoffset:0}}
@keyframes ldFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}

#seg-loader{position:fixed;inset:0;z-index:999;background:#03090c;display:flex;align-items:center;justify-content:center;animation:ldFailsafe .01s linear 5s forwards}
#seg-loader.morph{background:transparent;transition:background .7s ease;animation:none}
#seg-loader.morph #ld-word,#seg-loader.morph #ld-line,#seg-loader.morph .ldGlow{opacity:0;transition:opacity .45s ease}
#ld-mark{transition:transform 1.05s cubic-bezier(.72,0,.24,1);transform-origin:center center}
.heroMark.instant path{stroke-dashoffset:0!important;animation:none!important}
.heroMark.hidden{opacity:0!important}

.heroRow{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-end;justify-content:space-between;margin:52px 0 60px}
.marqwrap{border-top:1px solid rgba(238,243,242,.12);overflow:hidden;padding:18px 0;margin:0 -44px}
.marqwrap .track{display:flex;gap:0;width:max-content;animation:marq 30s linear infinite;white-space:nowrap;font-family:Jost,sans-serif;font-weight:200;font-size:15px;letter-spacing:.35em;color:rgba(238,243,242,.5)}

.stats-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:60px}
.stat{border-top:1px solid rgba(238,243,242,.18);padding-top:28px}
.stat .n{font-size:clamp(64px,7vw,110px);font-weight:800;line-height:1;letter-spacing:-.03em}
.stat .n .plus{color:#8fd0cf}
.stat .l{font-family:Jost,sans-serif;font-size:12px;letter-spacing:.32em;color:rgba(238,243,242,.55);margin:14px 0 0}

.svc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0;border:1px solid rgba(238,243,242,.14);border-top:none}
.svc-row:first-of-type{border-top:1px solid rgba(238,243,242,.14)}
.svc-row.flip{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.svc-text{padding:56px 52px;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.svc-row:not(.flip) .svc-text{border-right:1px solid rgba(238,243,242,.14)}
.svc-row.flip .svc-text{border-left:1px solid rgba(238,243,242,.14)}
.svc-text .kicker{font-family:Jost,sans-serif;font-size:12px;letter-spacing:.32em;color:rgba(238,243,242,.55);margin:0 0 24px}
.svc-text h2{font-size:clamp(38px,4vw,64px);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0}
.svc-text p{font-size:15px;line-height:1.6;font-weight:300;color:rgba(238,243,242,.65);margin:0;max-width:380px}
.svc-img{position:relative;min-height:520px;min-width:0;overflow:hidden}

#stripWrap{position:relative;z-index:1;height:320vh}
#stripWrap .pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
#strip{display:flex;gap:28px;padding:0 44px;width:max-content;will-change:transform}
#strip .card{display:block;width:560px;flex:none;color:inherit}
#strip .card .thumb{position:relative;height:64vh;overflow:hidden}
#strip .card .thumb img{width:100%;height:100%;object-fit:cover}
#strip .card .meta{display:flex;justify-content:space-between;align-items:baseline;padding:18px 2px 0}
#strip .card .meta .name{font-size:20px;font-weight:700}
#strip .card .meta .tag{font-family:Jost,sans-serif;font-size:11px;letter-spacing:.28em;color:rgba(238,243,242,.5)}

@media (max-width:1024px){
  .svc-row,.svc-row.flip{grid-template-columns:1fr}
  .svc-img{min-height:340px}
}
a.cta-link:hover{color:#8fd0cf}

@media (max-width:760px){
  .navlinks{gap:18px}
  header.hero{padding-left:24px;padding-right:24px}
  .heroRow{flex-direction:column;align-items:flex-start}
  .marqwrap{margin:0 -24px}
  .stats-grid{grid-template-columns:1fr;gap:32px}
}