/* P19 About — editorial welcome */
.page-ab main>section{overflow-x:clip}
.mono{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--p3)}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:14px;color:var(--mut);margin-bottom:22px}
.crumbs a:hover{color:var(--p3)}.crumbs b{color:var(--p3);font-weight:600}

/* hero */
.ab-hero{position:relative;padding:70px 0 0;background:linear-gradient(180deg,#fff 0,var(--lav2) 55%,#eef0f8 100%);overflow:hidden}
.ab-mtn{position:absolute;left:0;right:0;bottom:-8%;width:100%;height:70%;object-fit:cover;object-position:center 60%;opacity:.55;-webkit-mask-image:linear-gradient(180deg,transparent,#000 45%);mask-image:linear-gradient(180deg,transparent,#000 45%);animation:mtnDrift 24s ease-in-out infinite alternate;pointer-events:none}
@keyframes mtnDrift{from{transform:scale(1.04) translateX(-1.5%)}to{transform:scale(1.04) translateX(1.5%)}}
.ab-hin{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:end}
.ab-hin>*{min-width:0}
.ab-copy{padding-bottom:110px}
.ab-h1{font-size:clamp(34px,4vw,58px);margin:18px 0 22px;max-width:760px;letter-spacing:-.03em}
.fitw{position:relative;display:inline-block;padding:0 .18em;margin:0 .02em;color:#fff;z-index:0}
.fitw:before{content:"";position:absolute;inset:.08em 0 0;border-radius:12px;background:linear-gradient(135deg,var(--p),#b44bff);z-index:-1;transform:translate(18px,-26px) rotate(8deg);opacity:0;animation:fitSnap .7s cubic-bezier(.3,1.5,.5,1) 1.15s forwards}
@keyframes fitSnap{to{transform:none;opacity:1}}
.ab-hero .lead{max-width:560px}
.ab-vis{position:relative;min-height:600px;display:flex;justify-content:center;align-items:flex-end}
.halo{position:absolute;left:50%;bottom:60px;width:440px;height:440px;margin-left:-220px;border-radius:50%;background:radial-gradient(circle,rgba(156,103,255,.28),transparent 65%);animation:breathe 6s ease-in-out infinite}
.halo:after{content:"";position:absolute;inset:40px;border-radius:50%;border:2px dashed rgba(127,66,244,.35);animation:haloSpin 40s linear infinite}
@keyframes haloSpin{to{transform:rotate(360deg)}}
.ab-eagle{position:relative;width:auto;height:520px;max-width:100%;object-fit:contain;transform-origin:50% 100%;animation:abSway 5s ease-in-out 1.5s infinite}
@keyframes abSway{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.6deg)}}
.hello{position:absolute;left:0;top:90px;padding:12px 18px;border-radius:18px 18px 18px 4px;background:var(--ink);color:#fff;font-weight:800;font-size:18px;box-shadow:0 14px 30px rgba(23,22,52,.25);transform:scale(0);transform-origin:bottom left;animation:helloPop .5s cubic-bezier(.3,1.6,.5,1) 1.4s forwards}
@keyframes helloPop{to{transform:scale(1)}}

/* chain */
.ch-head{max-width:900px}
.big{font-size:clamp(24px,2.6vw,36px);line-height:1.3;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:14px 0 16px}
.big mark{background:linear-gradient(transparent 62%,rgba(156,103,255,.28) 62%);color:inherit;padding:0 2px;background-size:0 100%;background-repeat:no-repeat;transition:background-size .8s var(--ease)}
.big.vis mark{background-size:100% 100%}
.big.vis mark:nth-child(2){transition-delay:.15s}.big.vis mark:nth-child(3){transition-delay:.3s}.big.vis mark:nth-child(4){transition-delay:.45s}.big.vis mark:nth-child(5){transition-delay:.6s}
.route{position:relative;margin-top:44px;padding:30px 26px 22px;border-radius:24px;background:var(--ink);color:#fff}
.rt-line{position:absolute;left:calc(10% + 26px);right:calc(10% + 26px);top:48px;height:3px;background:rgba(255,255,255,.12);border-radius:2px}
.rt-line i{position:absolute;inset:0;background:linear-gradient(90deg,var(--p),#b44bff);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .3s}
.route.vis .rt-line i{transform:scaleX(1)}
.rt-dot{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(201,179,255,.35);opacity:0}
.route.vis .rt-dot{animation:rtRun 8s ease-in-out 1.8s infinite}
@keyframes rtRun{0%{left:0;opacity:1}85%{left:100%;opacity:1}100%{left:100%;opacity:0}}
.stops{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));text-align:center}
.stop{display:flex;flex-direction:column;align-items:center;gap:12px}
.sd{width:40px;height:40px;border-radius:50%;background:#2b2856;border:3px solid #4a4580;position:relative;z-index:1}
.route.vis .sd{animation:sdLit 8s ease-in-out infinite;animation-delay:calc(1.8s + var(--k)*1.7s)}
@keyframes sdLit{0%{background:var(--p);border-color:#c9b3ff;transform:scale(1.15)}12%{transform:none}40%,100%{background:#2b2856;border-color:#4a4580}}
.stop b{font-size:15px}
.rt-cap{margin-top:20px;text-align:center;color:#c9b3ff}

/* approach */
.ap-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ap-grid>*{min-width:0}
.fork{margin-top:24px;padding:20px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.fork p{font-size:15px;color:var(--mut)}
.fk{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;padding-top:26px}
.fk:before{content:"";position:absolute;left:25%;right:25%;top:0;height:18px;border:2px solid var(--p);border-bottom:0;border-radius:12px 12px 0 0}
.fk:after{content:"";position:absolute;left:50%;top:-14px;width:2px;height:14px;background:var(--p)}
.fk span{padding:12px;border-radius:12px;background:var(--lav);color:var(--p3);font-weight:700;font-size:14px;text-align:center}
.convo{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.bub{align-self:flex-start;max-width:85%;padding:12px 16px;border-radius:18px 18px 18px 4px;background:var(--lav);font-weight:700;font-size:15.5px;opacity:0;transform:translateY(10px) scale(.96);transition:.45s var(--ease);transition-delay:calc(.3s + var(--k)*.55s)}
.bub:nth-child(even){align-self:flex-end;border-radius:18px 18px 4px 18px;background:var(--ink);color:#fff}
.convo.vis .bub,.convo.vis .scope{opacity:1;transform:none}
.scope{margin-top:6px;padding:16px;border-radius:16px;background:linear-gradient(135deg,var(--p3),var(--p));color:#fff;opacity:0;transform:translateY(12px);transition:.5s var(--ease);transition-delay:2.6s}
.scope .mono{color:#e6dcff;display:block}.scope b{font-size:19px}
.scope img{display:block;width:100%;height:auto;margin-top:12px;border-radius:12px;background:#fff}

/* values */
.vl-head{margin-bottom:20px}
.vals{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.vrow{position:relative;display:grid;grid-template-columns:120px 1fr 1.3fr 220px;gap:24px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);transition:background .3s}
.vrow:hover{background:var(--lav2)}
.vn{font-size:64px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--p);letter-spacing:-.04em;transition:color .3s}
.vrow:hover .vn{color:var(--p)}
.vrow h3{font-size:24px;letter-spacing:-.02em}
.vrow p{color:var(--mut);font-size:16px}
.vic{justify-self:end;width:64px;height:64px;border-radius:18px;background:var(--lav) center/30px no-repeat;transition:transform .4s var(--ease)}
.vrow:hover .vic{transform:rotate(-8deg) scale(1.08)}
.scope-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f42f4' stroke-width='1.8'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' stroke-dasharray='3 2'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E")}
.hand-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f42f4' stroke-width='1.8'%3E%3Cpath d='M4 8h11l-3-3M20 16H9l3 3'/%3E%3C/svg%3E")}
.human-ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f42f4' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c1-4 4-6 7-6s6 2 7 6'/%3E%3C/svg%3E")}
.ladder{display:flex;flex-direction:column;gap:5px}
.ladder i{font-style:normal;font-size:12px;font-weight:700;padding:5px 9px;border-radius:8px;background:var(--lav);color:var(--p3);width:0;overflow:hidden;white-space:nowrap;transition:width .6s var(--ease)}
.ev.vis .ladder i:nth-child(1){width:62%;transition-delay:.4s}
.ev.vis .ladder i:nth-child(2){width:82%;transition-delay:.7s;background:#e6dcff}
.ev.vis .ladder i:nth-child(3){width:100%;transition-delay:1s;background:var(--p);color:#fff}

/* work */
.wk-head{max-width:760px;margin-bottom:28px}
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wcard{display:block;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);transition:transform .4s var(--ease),box-shadow .4s}
.wcard:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(92,56,180,.18)}
.wcard img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:#fff;transition:transform .6s var(--ease)}
.wcard:hover img{transform:scale(1.05)}
.wcard-media,.wcard-title{display:block;color:inherit}
.wb{padding:18px}
.wb h3{font-size:19px;margin:6px 0}.wb p{font-size:14.5px;color:var(--mut)}
.wk-note{margin-top:20px;padding:14px 18px;border-radius:14px;background:#fff;border-left:3px solid var(--p);font-weight:600}
.ab-contact{margin-top:12px}
.ab-contact a{color:#fff;font-weight:700;border-bottom:1px solid rgba(255,255,255,.5)}

@media (max-width:1100px){
 .ab-hin{grid-template-columns:1fr}
 .ab-copy{padding-bottom:10px}
 .ab-vis{min-height:480px}
 .ab-eagle{height:460px}
 .ap-grid{grid-template-columns:1fr;gap:30px}
 .vrow{grid-template-columns:90px 1fr;gap:8px 20px}
 .vrow p{grid-column:2}
 .vrow .vic,.vrow .ladder{grid-column:2;justify-self:start}
 .vrow .ladder{width:260px}
 .vn{grid-row:span 3;font-size:48px;align-self:start}
 .shelf{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
 .ab-hero{padding-top:40px}
 .ab-vis{min-height:380px}
 .ab-eagle{height:360px}
 .halo{width:320px;height:320px;margin-left:-160px;bottom:30px}
 .hello{font-size:15px;top:20px}
 .route{padding:24px 20px}
 .rt-line{left:39px;right:auto;top:44px;bottom:64px;width:3px;height:auto}
 .rt-line i{transform:scaleY(0);transform-origin:top}
 .route.vis .rt-line i{transform:scaleY(1)}
 .rt-dot{left:50%;top:0;margin:-7px 0 0 -7px}
 .route.vis .rt-dot{animation:rtRunV 8s ease-in-out 1.8s infinite}
 @keyframes rtRunV{0%{top:0;opacity:1}85%{top:100%;opacity:1}100%{top:100%;opacity:0}}
 .stops{grid-template-columns:1fr;gap:18px;text-align:left}
 .stop{flex-direction:row}
 .fk{grid-template-columns:1fr 1fr}
 .fk span{font-size:12.5px}
 .vrow{grid-template-columns:60px 1fr}
 .vn{font-size:38px}
 .vrow h3{font-size:20px}
 .shelf{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
 .ab-mtn,.halo,.halo:after,.ab-eagle{animation:none}
 .fitw:before,.hello{animation:none;transform:none;opacity:1}
 .route.vis .rt-dot,.route.vis .sd{animation:none}
}