/* Vakeel art layer: kinetic headings, drafting heroes, the site-log band, sketch lines, light that follows you,
   devices that rise, a skyline at the end of every page. All of it switches off with reduced motion. */

/* ---------- headings that rise word by word ---------- */
.kin .kw{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em 0 .16em;margin:-.04em 0 -.16em}
.kin .kw>span{display:inline-block;transform:translateY(112%) rotate(5deg);transform-origin:0 100%;transition:transform 1s cubic-bezier(.16,.84,.24,1) calc(var(--i,0) * 55ms)}
.kin.kin-in .kw>span{transform:none}
.v-shead .v-k::before,.v-phero .v-k::before,.v-hero .v-k::before,.v-fcta .v-k::before{content:"";display:inline-block;width:26px;height:1px;background:currentColor;margin-right:2px;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .1s}
.v-shead.in .v-k::before,.kin-k .v-k::before{transform:scaleX(1)}

/* a pen mark under the hero promise */
.pen{position:relative;white-space:nowrap}
.pen svg{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.36em;overflow:visible;pointer-events:none}
.pen path{fill:none;stroke:#5DBB84;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.6,.05,.3,1) 1.25s}
.kin-in .pen path{stroke-dashoffset:0}
html:not(.js) .pen path{stroke-dashoffset:0}

/* ---------- drafting canvas behind heroes ---------- */
.bp{position:absolute;inset:0;z-index:0;pointer-events:none;display:block}
.v-hero>.v-wrap,.v-phero>.v-wrap{z-index:1}
.v-hero>.v-wrap{position:relative}
.h-blue g.lay{transition:transform .9s cubic-bezier(.2,.7,.2,1)}

/* ---------- light that follows the pointer across cards ---------- */
.band-l{--glowf:rgba(36,34,32,.05);--glowb:rgba(47,143,91,.6)}
.band-d{--glowf:rgba(249,247,242,.065);--glowb:rgba(93,187,132,.85)}
.glw-on>*{isolation:isolate}
.glw-on>*>.glw-f,.glw-on>*>.glw-b{position:absolute;pointer-events:none;opacity:0;transition:opacity .45s ease;z-index:-1}
.glw-on>*>.glw-f{inset:0;background:radial-gradient(380px circle at var(--gx,50%) var(--gy,50%),var(--glowf),transparent 65%)}
.glw-on>*>.glw-b{inset:-1px;padding:1px;z-index:3;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),var(--glowb),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.glw-on.glw-hot>*>.glw-f,.glw-on.glw-hot>*>.glw-b{opacity:1}

/* ---------- devices that rise as you reach them ---------- */
[data-rise]{--rp:1}
[data-rise] .db-ipad{transform:perspective(1800px) rotateX(calc((1 - var(--rp)) * 34deg)) translateY(calc((1 - var(--rp)) * 90px)) scale(calc(.88 + var(--rp) * .12));transform-origin:50% 100%;will-change:transform}
[data-rise] .db-phone{transform:translateY(calc((1 - var(--rp)) * 190px)) rotate(calc((1 - var(--rp)) * -9deg));will-change:transform}
[data-rise] .phone{transform:perspective(1400px) rotateY(calc((1 - var(--rp)) * -28deg)) rotateZ(calc((1 - var(--rp)) * 4deg)) translateY(calc((1 - var(--rp)) * 60px));will-change:transform}

/* ---------- the skyline at the end of every page ---------- */
.v-fcta{position:relative;overflow:hidden;padding-bottom:230px!important}
.v-fcta>.v-wrap{position:relative;z-index:1}
.v-sky{position:absolute;left:0;bottom:-1px;width:100%;height:240px;z-index:0;pointer-events:none;display:block}
.v-sky .t{fill:#1A1816;stroke:#8F8B82;stroke-width:1;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.3,.6,.2,1) var(--d,0s)}
.v-sky .t.n{stroke:#B8B6AE}
.v-sky .gl{stroke:#6E6A62;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s cubic-bezier(.3,.6,.2,1)}
.v-sky .p{fill:none;stroke:#8F8B82;stroke-width:1;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s ease var(--d,0s)}
.v-sky .sun{opacity:0;transform:translateY(80px);transition:opacity 2.4s ease 1s,transform 3.4s cubic-bezier(.2,.7,.2,1) 1s}
.v-sky .win{fill:#F1E3C4;opacity:0;transition:opacity .6s ease var(--d,0s)}
.sky-in .v-sky .t,.sky-in .v-sky .gl,.sky-in .v-sky .p{stroke-dashoffset:0}
.sky-in .v-sky .sun{opacity:1;transform:none}
.sky-in .v-sky .win{opacity:.85}
.sky-in .v-sky .win.tw{animation:twk var(--tw,7s) ease-in-out calc(var(--d,0s) + 1s) infinite}
@keyframes twk{0%,70%,100%{opacity:.85}78%,92%{opacity:.08}}
.v-pen{display:block;width:min(280px,60%);height:18px;margin:-4px 0 14px;overflow:visible}
.v-pen path{fill:none;stroke:#5DBB84;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.6,.05,.3,1) .5s}
.sky-in .v-pen path{stroke-dashoffset:0}
@media(max-width:760px){.v-fcta{padding-bottom:150px!important}.v-sky{height:150px}}
html:not(.js) .v-sky .t,html:not(.js) .v-sky .gl,html:not(.js) .v-sky .p,html:not(.js) .v-pen path{stroke-dashoffset:0}
html:not(.js) .v-sky .sun{opacity:1;transform:none}

/* ---------- questions open smoothly where the browser allows ---------- */
:root{interpolate-size:allow-keywords}
.v-faq details::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.v-faq details[open]::details-content{block-size:auto}
.v-faq summary{transition:padding-left .35s var(--ease),color .3s}
.v-faq summary:hover{padding-left:8px}

@media(prefers-reduced-motion:reduce){
  .kin .kw>span{transform:none!important}
  [data-rise] .db-ipad,[data-rise] .db-phone,[data-rise] .phone{transform:none!important}
  .v-sky .t,.v-sky .gl,.v-sky .p,.v-pen path,.pen path{stroke-dashoffset:0!important}
  .v-sky .sun{opacity:1;transform:none}.v-sky .win{opacity:.85}
}