/* Fachri's layout ideas, built in the design system from styles.css */

/* brand maroon, taken from the Signmeilia logo */
:root{--accent:#66020b;--accent-soft:#f6e6e8}

/* intro: the Signmeilia mark is "signed" left to right, then the maroon sheet lifts away */
.intro{position:fixed;inset:0;z-index:100;background:var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:transform .9s cubic-bezier(.76,0,.24,1), border-radius .9s cubic-bezier(.76,0,.24,1)}
.intro__sign{position:relative;width:min(380px,64vw)}
.intro__sign img{width:100%;height:auto;filter:brightness(0) invert(1);clip-path:inset(0 100% 0 0);animation:sign 1.25s cubic-bezier(.55,.1,.35,1) .25s forwards}
.intro__pen{position:absolute;top:58%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.18);opacity:0;animation:pen 1.25s cubic-bezier(.55,.1,.35,1) .25s forwards}
.intro__line{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7);opacity:0;transform:translateY(8px);animation:introLine .6s ease 1.35s forwards}
.intro.done{transform:translateY(-100%);border-radius:0 0 50% 50% / 0 0 120px 120px}
@keyframes sign{to{clip-path:inset(0 0 0 0)}}
@keyframes pen{0%{left:0;opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes introLine{to{opacity:1;transform:none}}
.no-js .intro{display:none}

/* nav: a full bar over the hero that tucks into a centred pill once you scroll */
.nav{position:fixed;z-index:60;top:0;left:0;right:0;display:flex;justify-content:center;padding-top:0;transition:padding-top .55s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.nav__in{pointer-events:auto;width:100%;height:76px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid transparent;border-bottom-color:var(--line);border-radius:0;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:width .6s cubic-bezier(.2,.8,.2,1),height .5s cubic-bezier(.2,.8,.2,1),padding .6s cubic-bezier(.2,.8,.2,1),border-radius .6s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .5s}
.nav__logo{display:flex;align-items:center;flex:none}
.nav__logo img{height:34px;width:auto;transition:height .5s cubic-bezier(.2,.8,.2,1)}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a{position:relative;font-size:14px;font-weight:600;color:var(--ink-2);transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav__links a:hover,.nav__links a.active{color:var(--accent)}
.nav__links a.active::after{transform:scaleX(1)}
.nav__right{display:flex;align-items:center;gap:30px}
.nav__cta{height:42px;padding:0 20px;background:var(--accent);color:#fff}
.nav__cta:hover{background:var(--ink)}
.nav.is-pill{padding-top:14px}
.nav.is-pill .nav__in{width:min(640px,100% - 24px);height:58px;padding:0 8px 0 22px;border-radius:999px;border-color:var(--line);box-shadow:0 14px 40px rgba(13,11,12,.1)}
.nav.is-pill .nav__logo img{height:26px}
.nav.is-pill .nav__cta{height:42px}

/* pill nav: centre of the top bar on desktop, a dock at the bottom on small screens */
.pillnav{position:fixed;z-index:55;top:12px;left:50%;transform:translateX(-50%);width:max-content;display:flex;align-items:center;gap:6px}
.pillnav__me{width:40px;height:40px;border-radius:50%;overflow:hidden;border:1px solid var(--line);background:#fff;flex:none}
.pillnav__me img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.pillnav__links{display:flex;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--line);background:#fff}
.pillnav__links a{display:flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--ink-2);white-space:nowrap;transition:background .25s,color .25s}
.pillnav__links a svg{width:15px;height:15px;flex:none}
.pillnav__links a:hover{color:var(--ink)}
.pillnav__links a.active{background:var(--ink);color:#fff}
.topbar .say{height:40px;padding:0 18px}

/* orbit hero */
.orbit{position:relative;height:100svh;min-height:680px;overflow:hidden}
.orbit__ring{position:absolute;inset:0}
.orbit__card{position:absolute;left:0;top:0;width:calc(var(--cw,172px) * var(--s,1));aspect-ratio:4/3;border-radius:14px;padding:5px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px rgba(13,11,12,.08);will-change:transform,filter,opacity}
.orbit__card img{width:100%;height:100%;object-fit:cover;border-radius:9px}
.orbit__card.tall{aspect-ratio:3/4}
.orbit__fade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 30% 26% at 50% 52%,rgba(255,255,255,.92) 0%,rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 100%)}
/* hero pattern: a soft maroon dot grid, a rose glow and the orbit's own track */
.orbit{background:radial-gradient(ellipse 42% 38% at 50% 54%,#f8eaec 0%,rgba(248,234,236,0) 70%),#fff}
.orbit__pattern{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(102,2,11,.22) 1.2px,transparent 1.4px);background-size:26px 26px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 55%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 70% 70% at 50% 55%,#000 30%,transparent 80%)}
.orbit__path{position:absolute;inset:0;pointer-events:none}
.orbit__path i{position:absolute;left:var(--cx,50%);top:var(--cy,60%);width:calc(var(--R,500px) * 2);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:1.5px dashed rgba(102,2,11,.18);animation:spin 120s linear infinite}
.orbit__path i + i{width:calc(var(--R,500px) * 1.3);border:1px solid rgba(102,2,11,.1);animation-direction:reverse;animation-duration:160s}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.orbit__copy{position:absolute;z-index:3;left:50%;top:52%;transform:translate(-50%,-50%);width:min(860px,92vw);text-align:center}
.orbit__copy h1{font-size:clamp(34px,4.6vw,64px);font-weight:600;line-height:1.08;letter-spacing:-.035em}
.orbit__copy h1 .soft{color:var(--ink-3)}
.orbit__copy h1 .type{color:var(--accent)}
.orbit__copy h1 .caret{display:inline-block;width:3px;height:.9em;background:var(--accent);margin-left:4px;vertical-align:-.08em;animation:blink 1s steps(1) infinite}
.orbit__copy p{color:var(--ink-2);max-width:50ch;margin:18px auto 28px}
.orbit__ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.orbit .ribbon--ink{z-index:4;top:auto;bottom:0;left:0;width:100%;height:52px;transform:none;font-size:14px}

/* about: copy and contact on the left, portrait card on the right */
.meet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center}
.meet h2{font-size:clamp(32px,3.4vw,48px);font-weight:600;line-height:1.08;letter-spacing:-.035em;margin-bottom:20px}
.meet p{color:var(--ink-2);max-width:52ch;margin-bottom:28px}
.meet h3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:48px 0 14px}
.touch{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.touch a{display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 18px 0 5px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:500;transition:border-color .2s, transform .2s}
.touch a:hover{border-color:var(--ink);transform:translateX(4px)}
.touch .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.touch .ic svg{width:16px;height:16px}
.portrait{position:relative;border-radius:22px;overflow:hidden;background:var(--soft);aspect-ratio:4/5}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.portrait figcaption{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:#fff;font-size:13.5px}
.portrait figcaption b{font-weight:600}
.portrait figcaption span{color:var(--ink-3)}

/* dark experience */
.dark{background:#0f0c0d;color:#fff;position:relative;isolation:isolate;padding:110px 0;margin-top:110px}
.dark::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:20px 20px}
.dark .label{color:#9c9496}
.xp-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 48px;flex-wrap:wrap;margin-bottom:36px}
.xp-top p{max-width:52ch}
.xp-top h2{font-size:clamp(32px,3.4vw,48px);font-weight:600;line-height:1.08;letter-spacing:-.035em;margin:10px 0 12px}
.xp-top p{color:#b6aeb0;margin-bottom:22px}
.xp-links{display:flex;gap:24px;flex-wrap:wrap}
.xp-links a{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600}
.xp-links svg{width:14px;height:14px;transition:transform .2s}
.xp-links a:hover svg{transform:translateX(3px)}
.dark .cal{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.dark .cal__tag{background:#fff;color:var(--ink)}
.dark .cell{background:rgba(255,255,255,.08)}
.dark .cell[data-l="1"]{background:#a9505c}
.dark .cell[data-l="2"]{background:var(--ribbon)}
.dark .cell[data-l="f"]{background:transparent;border-color:rgba(255,255,255,.12)}
.dark .cell:hover::after{background:#fff;color:var(--ink)}
.dark .cal__legend i{background:rgba(255,255,255,.08)}
.xp-list{border-top:1px solid rgba(255,255,255,.12)}
.xp{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1fr);gap:6px 22px;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.12);transition:padding .3s, background .3s}
.xp:hover{background:rgba(255,255,255,.03);padding-inline:14px}
.xp__logo{width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;grid-row:span 2}
.xp__logo img{width:74%;height:74%;object-fit:contain}
.xp h3{font-size:17px;font-weight:600;letter-spacing:-.01em}
.xp .date{font-size:12.5px;color:#9c9496}
.xp .role{font-size:14px;color:#ddd5d7;line-height:1.45}
.xp .what{display:block;font-size:13px;color:#9c9496;margin-top:4px}
.xp .chips{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.xp .chip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:#e7e1e3}

/* centred section heading */
.center-head{text-align:center;margin-bottom:48px}
.center-head h2{font-size:clamp(32px,3.4vw,48px);font-weight:600;line-height:1.08;letter-spacing:-.035em;margin:10px 0}
.center-head p{color:var(--ink-2);max-width:48ch;margin:0 auto}

/* the things: one folder per field */
.folders{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.folder-wrap{text-align:center}
.folder{position:relative;display:block;aspect-ratio:5/4;margin-bottom:16px;perspective:900px}
.folder__back{position:absolute;inset:10% 0 0 0;border-radius:14px;background:var(--soft);border:1px solid var(--line)}
.folder__back::before{content:"";position:absolute;left:-1px;top:-11%;width:40%;height:15%;border-radius:10px 10px 0 0;background:var(--soft);border:1px solid var(--line);border-bottom:0}
.folder__paper{position:absolute;bottom:36%;width:50%;aspect-ratio:4/3;border-radius:6px;overflow:hidden;border:3px solid #fff;box-shadow:0 8px 18px rgba(13,11,12,.12);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.folder__paper img{width:100%;height:100%;object-fit:cover}
.folder__paper:nth-of-type(2){left:6%;transform:rotate(-8deg)}
.folder__paper:nth-of-type(3){left:25%;transform:rotate(1deg);z-index:1}
.folder__paper:nth-of-type(4){left:44%;transform:rotate(8deg)}
.folder:hover .folder__paper:nth-of-type(2){transform:translate(-8%,-24%) rotate(-13deg)}
.folder:hover .folder__paper:nth-of-type(3){transform:translateY(-32%)}
.folder:hover .folder__paper:nth-of-type(4){transform:translate(8%,-24%) rotate(13deg)}
.folder__front{position:absolute;left:0;right:0;bottom:0;height:56%;z-index:2;border-radius:14px;background:#fff;border:1px solid var(--line);transform-origin:bottom;transition:transform .5s cubic-bezier(.2,.8,.2,1);display:flex;align-items:flex-end;justify-content:space-between;padding:14px 16px;text-align:left}
.folder:hover .folder__front{transform:rotateX(-16deg)}
.folder__front{flex-direction:column;align-items:stretch;justify-content:space-between;padding:16px 16px 14px}
.folder__name{font-size:clamp(17px,1.6vw,22px);font-weight:600;letter-spacing:-.025em;line-height:1.15;color:var(--ink)}
.folder__foot{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.folder__foot > span:first-child{display:flex;align-items:baseline;gap:6px}
.folder__front b{font-size:30px;font-weight:600;letter-spacing:-.04em;line-height:1}
.folder__front .label{font-size:10px}
.folder__empty{position:absolute;left:14%;right:14%;bottom:42%;height:32%;border-radius:8px;border:1.5px dashed #d6d0cf;display:grid;place-items:center;font-size:12px;color:var(--ink-3)}
.folder-wrap h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.folder-wrap p{font-size:13px;color:var(--ink-2);max-width:30ch;margin:0 auto}
.center-cta{text-align:center;margin-top:40px}

/* teams marquee */
.logos{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logos__track{display:flex;gap:16px;width:max-content;animation:marquee 30s linear infinite}
.logos:hover .logos__track{animation-play-state:paused}
.logos__item{width:190px;height:84px;flex:none;border-radius:16px;border:1px solid var(--line);display:grid;place-items:center}
.logos{padding:8px 0}   /* room for the hover lift, so the top border isn't clipped */
.logos__item{overflow:hidden;transition:border-color .3s, background .3s, transform .3s}
.logos__item img{max-width:62%;max-height:44px;object-fit:contain;filter:grayscale(1) contrast(.9);opacity:.6;transition:filter .4s, opacity .4s, transform .4s}
.logos__item:hover{transform:translateY(-3px)}
.logos__item:hover img{filter:none;opacity:1;transform:scale(1.06)}
/* the Videfly file carries a lot of white space around the mark */
.logos__item img[src*="videfly"]{max-width:100%;max-height:80px}
.logos__item img[src*="kmnc"]{max-height:56px}
@keyframes marquee{to{transform:translateX(calc(-50% - 8px))}}

/* dark call to action */
.vision{position:relative;overflow:hidden;isolation:isolate;border-radius:24px;padding:84px 24px;text-align:center;color:#fff;background:#0f0c0d}
.vision::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:20px 20px}
.vision .label{color:#9c9496}
.vision h2{font-size:clamp(32px,3.6vw,52px);font-weight:600;line-height:1.08;letter-spacing:-.035em;margin:12px 0 14px}
.vision p{color:#cfc7c9;max-width:48ch;margin:0 auto 28px}
.vision .btn{background:#fff;color:var(--ink)}
.vision .btn:hover{background:var(--ribbon)}
.vision .btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25)}
.vision .btn-ghost:hover{background:transparent;border-color:#fff}
.vision__ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* CTA: copy on the left, a fanned stack of work and a spinning badge on the right */
.cta{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:center;text-align:left;padding:clamp(48px,6vw,88px) clamp(24px,5vw,72px);min-height:520px;--mx:0;--my:0}
.cta::after{content:"";position:absolute;z-index:-1;width:560px;height:560px;right:-120px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%)}
.cta__marquee{position:absolute;z-index:-1;left:0;right:0;bottom:18px;overflow:hidden;pointer-events:none}
.cta__track{display:flex;width:max-content;animation:ribbon 34s linear infinite}
.cta__track span{font-size:clamp(70px,10vw,150px);font-weight:700;letter-spacing:-.04em;line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.16);padding-right:.3em}
.cta__copy{position:relative;z-index:2}
.cta__status{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-size:12.5px;font-weight:600;color:#fff}
.cta__status i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{to{box-shadow:0 0 0 10px rgba(61,220,132,0)}}
.cta h2{font-size:clamp(36px,4.4vw,64px);margin:18px 0 16px;max-width:13ch}
.cta p{margin:0 0 28px;max-width:44ch}
.cta .vision__ctas{justify-content:flex-start}
.cta__art{position:relative;height:380px}
.cta__card{position:absolute;width:62%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:5px solid #fff;box-shadow:0 24px 50px rgba(0,0,0,.28);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cta__card img{width:100%;height:100%;object-fit:cover}
.cta__card.c1{left:2%;top:16%;transform:translate(calc(var(--mx) * -30px),calc(var(--my) * -20px)) rotate(-10deg)}
.cta__card.c2{right:0;top:2%;transform:translate(calc(var(--mx) * 26px),calc(var(--my) * 18px)) rotate(8deg)}
.cta__card.c3{left:18%;bottom:0;z-index:2;transform:translate(calc(var(--mx) * 40px),calc(var(--my) * 30px)) rotate(-2deg)}
.cta:hover .cta__card.c1{transform:translate(calc(var(--mx) * -30px - 24px),calc(var(--my) * -20px - 10px)) rotate(-15deg)}
.cta:hover .cta__card.c2{transform:translate(calc(var(--mx) * 26px + 20px),calc(var(--my) * 18px - 12px)) rotate(13deg)}
.cta__badge{position:absolute;z-index:3;right:-6px;bottom:-14px;width:150px;height:150px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.cta__badge svg{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);animation:spinBadge 16s linear infinite}
.cta__badge text{font-size:15.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;fill:var(--accent)}
.cta__badge img{width:56%;height:auto;transform:rotate(-8deg)}
@keyframes spinBadge{to{transform:rotate(360deg)}}

/* CTA end card: a light sheet with print guides, rings, floating work and a pointed portrait */
.endcard{--mx:0;--my:0;position:relative;overflow:hidden;isolation:isolate;border-radius:32px;padding:clamp(80px,9vw,120px) 24px clamp(72px,8vw,104px);text-align:center;
  background:radial-gradient(60% 55% at 50% 45%,#fbeef0 0%,rgba(251,238,240,0) 70%),linear-gradient(#fff 55%,#f1efee 100%);border:1px solid var(--line)}
.endcard.rv{transform:translateY(24px)}
.endcard.rv.in{transform:none}
.guide{position:absolute;z-index:0;pointer-events:none}
.guide.gh{left:0;right:0;height:0;border-top:1.5px dashed #ddd6d5}
.guide.gv{top:0;bottom:0;width:0;border-left:1.5px dashed #ddd6d5}
.guide.t{top:56px}.guide.b{bottom:56px}.guide.l{left:56px}.guide.r{right:56px}
.screw{position:absolute;z-index:1;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff 0 30%,#d8d2d1 31% 55%,#efeceb 56%);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.screw.s1{left:56px;top:56px}.screw.s2{left:calc(100% - 56px);top:56px}.screw.s3{left:56px;top:calc(100% - 56px)}.screw.s4{left:calc(100% - 56px);top:calc(100% - 56px)}
.endcard__rings{position:absolute;inset:0;z-index:0;pointer-events:none}
.endcard__rings i{position:absolute;left:50%;top:46%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(102,2,11,.09);transform:translate(-50%,-50%)}
.endcard__rings i:nth-child(1){width:440px}
.endcard__rings i:nth-child(2){width:720px}
.endcard__rings i:nth-child(3){width:1000px}
.endcard__floats{position:absolute;inset:0;z-index:1;pointer-events:none}
.float{position:absolute;width:var(--w,128px);aspect-ratio:1;border-radius:22px;overflow:hidden;border:4px solid #fff;box-shadow:0 18px 40px rgba(13,11,12,.14);
  transform:translate(calc(var(--mx) * var(--d,20px)),calc(var(--my) * var(--d,20px))) rotate(var(--r,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.float img{width:100%;height:100%;object-fit:cover;animation:floatBob 6s ease-in-out infinite;animation-delay:var(--delay,0s)}
@keyframes floatBob{50%{transform:translateY(-8px) scale(1.03)}}
.float.f1{--w:132px;--r:-8deg;--d:-26px;left:9%;top:17%}
.float.f2{--w:104px;--r:6deg;--d:18px;left:15%;top:56%;--delay:-2s}
.float.f3{--w:88px;--r:-4deg;--d:-14px;left:5%;top:74%;--delay:-4s}
.float.f4{--w:120px;--r:7deg;--d:24px;right:9%;top:15%;--delay:-1s}
.float.f5{--w:108px;--r:-6deg;--d:-20px;right:14%;top:54%;--delay:-3s}
.float.f6{--w:84px;--r:5deg;--d:16px;right:5%;top:76%;--delay:-5s}
.endcard__body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.endcard h2{font-size:clamp(36px,4.6vw,64px);font-weight:600;letter-spacing:-.04em;line-height:1.05;color:var(--ink);margin-bottom:34px}
.endcard__photo{position:relative;width:min(260px,62vw);aspect-ratio:4/5;margin-bottom:34px}
.endcard__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;border-radius:26px;transform:rotate(-6deg);box-shadow:0 30px 60px rgba(102,2,11,.18);border:6px solid #fff;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.endcard:hover .endcard__photo img{transform:rotate(-2deg) scale(1.02)}
.cursor{position:absolute;right:-34px;bottom:18%;display:flex;align-items:flex-start;gap:2px;animation:cursorNudge 3.2s ease-in-out infinite}
.cursor svg{width:26px;height:30px;fill:var(--accent);stroke:#fff;stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 3px 4px rgba(0,0,0,.2))}
.cursor b{margin-top:22px;padding:4px 10px;border-radius:999px 999px 999px 4px;background:var(--accent);color:#fff;font-size:12.5px;font-weight:600;box-shadow:0 6px 14px rgba(102,2,11,.25)}
@keyframes cursorNudge{0%,100%{transform:translate(0,0)}50%{transform:translate(-10px,-8px)}}
.endcard__line{font-size:clamp(19px,2vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.4;color:var(--ink);max-width:30ch;margin-bottom:28px}
.endcard__line mark{background:var(--accent-soft);color:var(--accent);padding:.04em .3em;border-radius:10px;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.btn-depth{display:inline-flex;align-items:center;height:56px;padding:0 30px;border-radius:999px;font-size:16px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,#8a1220 0%,#66020b 55%,#4c0108 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 0 rgba(0,0,0,.25) inset,0 14px 28px rgba(102,2,11,.35),0 0 0 4px rgba(102,2,11,.08);transition:transform .2s, box-shadow .2s}
.btn-depth:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 0 rgba(0,0,0,.25) inset,0 20px 36px rgba(102,2,11,.4),0 0 0 6px rgba(102,2,11,.1)}
.btn-depth:active{transform:translateY(1px) scale(.98)}
.endcard__small{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin:26px 0 22px}
.handle{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 16px 0 6px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px rgba(13,11,12,.06);transition:border-color .2s, transform .2s}
.handle:hover{border-color:var(--accent);transform:translateY(-2px)}
.handle img{width:36px;height:36px;border-radius:9px;object-fit:cover;object-position:50% 22%}
.handle span{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink-2)}
.handle svg{width:18px;height:18px;color:#0a66c2}
.endcard__alt{margin-top:14px;font-size:13px;color:var(--ink-3)}
.endcard__alt button{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* compact version: photo beside the copy, everything on one screen */
#contact{padding-top:72px}
.endcard{padding:clamp(56px,6vw,84px) clamp(28px,7vw,110px)}
.endcard__body{flex-direction:row;justify-content:center;gap:clamp(36px,5vw,72px);text-align:left;max-width:880px;margin:0 auto}
.endcard__photo{flex:none;width:clamp(170px,18vw,220px);margin:0}
.endcard__copy{flex:1;min-width:0}
.endcard h2{font-size:clamp(32px,3.6vw,50px);margin-bottom:14px}
.endcard__line{font-size:clamp(17px,1.6vw,21px);max-width:32ch;margin-bottom:26px}
.endcard__actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.endcard__alt{margin-top:16px}
.endcard__rings i{top:50%}
.endcard__rings i:nth-child(1){width:360px}
.endcard__rings i:nth-child(2){width:620px}
.endcard__rings i:nth-child(3){width:900px}
.guide.t{top:32px}.guide.b{bottom:32px}.guide.l{left:32px}.guide.r{right:32px}
.screw.s1,.screw.s2{top:32px}.screw.s3,.screw.s4{top:calc(100% - 32px)}
.screw.s1,.screw.s3{left:32px}.screw.s2,.screw.s4{left:calc(100% - 32px)}
/* photobooth strip: paper frame, thicker at the bottom, slight tilt */
.endcard__photo.is-strip{width:clamp(140px,13vw,170px);aspect-ratio:auto}
.endcard__photo.is-strip img{height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:4px;border:0;background:#fff;padding:8px 8px 30px;transform:rotate(-5deg);box-shadow:0 26px 50px rgba(102,2,11,.2)}
.endcard:hover .endcard__photo.is-strip img{transform:rotate(-1deg) scale(1.02)}
.endcard__photo.is-strip .cursor{right:-48px;bottom:30%}
.float.f1{--w:96px;left:5%;top:14%}
.float.f4{--w:88px;right:5%;top:12%;left:auto}
.float.f5{--w:80px;right:8%;top:auto;bottom:12%;left:auto}

/* Signmeilia-style contact buttons, in this palette */
.pill-btn{display:inline-flex;align-items:center;height:54px;padding:0 28px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:transform .2s, background .2s, color .2s}
.pill-btn:hover{transform:translateY(-2px)}
.pill-btn:active{transform:scale(.97)}
.pill-btn--light{background:#fff;color:var(--accent)}
.pill-btn--light:hover{background:var(--ink);color:#fff}
.pill-btn--soft{background:#f3c9cf;color:var(--accent)}
.pill-btn--soft:hover{background:#fff}
.mailpill{display:inline-flex;align-items:center;gap:14px;margin-top:18px;padding:6px 6px 6px 24px;border-radius:999px;background:#fdf7f8}
.mailpill span{font-size:16px;color:var(--accent);font-weight:500}
.mailpill button{height:44px;padding:0 18px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s}
.mailpill button:hover{background:var(--accent);color:#fff}

/* footer card */
.site-foot{padding:30px 0 40px}
.fcard{border:1px solid var(--line);border-radius:22px;padding:34px}
.fcard__grid{display:grid;grid-template-columns:1.6fr 1fr 1.3fr;gap:32px}
.fcard__me img{width:56px;height:56px;border-radius:14px;object-fit:cover;object-position:50% 22%;margin-bottom:14px}
.fcard__me p{color:var(--ink-2);font-size:13.5px;max-width:34ch}
.fcard nav .label{display:block;margin-bottom:12px}
.fcard nav a{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);margin-bottom:8px;transition:color .2s}
.fcard nav a:hover{color:var(--accent)}
.fcard nav svg{width:14px;height:14px}
.fcard__bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}

/* colour pass: black, white and maroon only, with maroon doing more of the work */
.pillnav__links a.active{background:var(--accent)}
.topbar .say{background:var(--accent)}
.topbar .say:hover{background:var(--ink)}
.btn-dark{background:var(--ink)}
.btn-dark:hover{background:var(--accent)}
.orbit__ctas .btn-dark{background:var(--accent)}
.orbit__ctas .btn-dark:hover{background:var(--ink)}
.head-row .label,.center-head .label{color:var(--accent)}
.meet h2,.center-head h2{color:var(--ink)}
.touch a:hover{border-color:var(--accent)}
.dark{background:#1d080d}
.dark::after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(60% 70% at 100% 0%,rgba(122,31,43,.55),transparent 70%)}
.dark .label{color:#d9a2aa}
.xp__logo{box-shadow:0 0 0 3px rgba(122,31,43,.6)}
.xp .chip{background:rgba(122,31,43,.35);border-color:rgba(217,162,170,.25);color:#f3dfe2}
.xp:hover{background:rgba(122,31,43,.18)}
.folder__back,.folder__back::before{background:var(--accent-soft);border-color:#efd3d7}
.folder__front b{color:var(--accent)}
.folder:hover .folder__front{border-color:var(--accent)}
.folder__empty{border-color:#d9a2aa;color:var(--accent)}
.logos__item:hover{border-color:var(--accent)}
.vision{background:var(--accent)}
.vision::before{background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px)}
.vision .label{color:#f0c9cf}
.vision p{color:#f6e3e6}
.vision .btn{background:#fff;color:var(--accent)}
.vision .btn:hover{background:var(--ink);color:#fff}
.vision .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.vision .btn-ghost:hover{background:transparent;color:#fff;border-color:#fff}
.fcard{background:var(--accent-soft);border-color:transparent}
.fcard__bottom{border-top-color:#ecd0d4}
.chip--on{background:var(--accent);color:#fff}
.tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent)}
.card__cover .cat{background:var(--accent);color:#fff}
.card:hover{border-color:var(--accent)}
.card:hover .card__go{background:var(--accent);border-color:var(--accent)}
.p-top .label{color:var(--accent)}
.grid{padding-top:30px}

.txt-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:1px}
.txt-link:hover{color:var(--ink)}

/* skills, pick & mix */
.skills-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 56px;flex-wrap:wrap;margin-bottom:36px}
.skills-head h2{font-size:clamp(32px,3.4vw,48px);font-weight:600;line-height:1.08;letter-spacing:-.035em;margin-top:10px;max-width:16ch}
.skills-head .label{color:var(--accent)}
.skills-head p{color:var(--ink-2);max-width:44ch}
/* skills, pick & mix: a centred card on a dotted field, chips you tap into a bag */
#skills{background:radial-gradient(rgba(102,2,11,.14) 1.2px,transparent 1.4px) center/24px 24px,#fbf3f4;margin-top:0;padding:110px 0}
.mixcard{position:relative;max-width:980px;margin:0 auto;padding:clamp(48px,6vw,80px) clamp(20px,5vw,72px);text-align:center;background:#fff;border-radius:36px;box-shadow:0 30px 70px rgba(102,2,11,.08)}
.mixcard::before,.mixcard::after{content:"✦";position:absolute;font-size:34px;color:var(--accent);animation:twinkle 4s ease-in-out infinite}
.mixcard::before{left:-14px;top:58%}
.mixcard::after{right:-12px;top:22%;font-size:26px;animation-delay:-2s}
@keyframes twinkle{50%{transform:rotate(20deg) scale(.8);opacity:.6}}
.mix-tag{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.mix-title{font-size:clamp(36px,5vw,68px);font-weight:600;line-height:1.04;letter-spacing:-.04em;color:var(--accent);max-width:14ch;margin:18px auto 20px}
.mix-lead{color:var(--ink-2);font-size:16px;max-width:52ch;margin:0 auto 34px}
.mix-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:720px;margin:0 auto 34px}
.mix-chip{height:56px;padding:0 26px;border-radius:999px;font-size:17px;font-weight:500;display:inline-flex;align-items:center;gap:8px;transition:background .25s,color .25s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.mix-chip.is-a{background:var(--accent-soft);color:var(--accent)}
.mix-chip.is-b{background:#f1eeed;color:var(--ink)}
.mix-chip:hover{transform:translateY(-3px) rotate(calc((var(--i) - 2.5) * .6deg))}
.mix-chip:active{transform:scale(.94)}
.mix-chip::before{content:"✓";width:0;overflow:hidden;font-weight:700;transition:width .25s}
.mix-chip[aria-pressed="true"]{background:var(--accent);color:#fff}
.mix-chip[aria-pressed="true"]::before{width:14px}
.mix-bag{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.mix-count{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--accent)}
.mix-count.bump{animation:bump .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{40%{transform:scale(1.1)}}
.mix-send{background:var(--accent);color:#fff}
.mix-send:hover{background:var(--ink);color:#fff}
.mix-send.is-off{opacity:.4;pointer-events:none}
.mix-note{font-size:13.5px;color:var(--ink-3);max-width:46ch;margin:0 auto}
.mix-note a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- skills as a compact bento of six little workspaces ---------- */
#skills{background:#fbf5f6}
.sk-wrap{max-width:1080px}
.sk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 48px;flex-wrap:wrap;margin-bottom:32px}
.sk-head .mix-title{text-align:left;margin:14px 0 0;max-width:none;font-size:clamp(32px,3.6vw,50px)}
.sk-head p{color:var(--ink-2);max-width:40ch;font-size:15px}
.sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.skcard{position:relative;background:#fff;border:1px solid #efe4e5;border-radius:22px;padding:10px;cursor:pointer;transition:border-color .3s, box-shadow .3s, transform .3s}
.skcard:hover{border-color:#e3c9cd;box-shadow:0 18px 40px rgba(102,2,11,.08);transform:translateY(-3px)}
.skcard.is-picked{border-color:var(--accent);box-shadow:0 0 0 3px rgba(102,2,11,.08)}
.sk-art{position:relative;height:178px;border-radius:15px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(60% 70% at 50% 45%,rgba(246,230,232,.9),transparent 70%),
    linear-gradient(rgba(102,2,11,.045) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,rgba(102,2,11,.045) 1px,transparent 1px) 0 0/22px 22px,#fdfafa}
.sk-text{padding:16px 8px 8px}
.sk-text h3{font-size:18px;font-weight:600;letter-spacing:-.025em;margin-bottom:4px}
.sk-text p{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.sk-add{position:absolute;top:20px;right:20px;z-index:3;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid #ead9dc;box-shadow:0 4px 10px rgba(102,2,11,.08);transition:background .25s,transform .35s,border-color .25s}
.sk-add::before,.sk-add::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.8px;border-radius:2px;background:var(--accent);transform:translate(-50%,-50%)}
.sk-add::after{transform:translate(-50%,-50%) rotate(90deg)}
.skcard:hover .sk-add{border-color:var(--accent)}
.sk-add[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);transform:rotate(45deg)}
.sk-add[aria-pressed="true"]::before,.sk-add[aria-pressed="true"]::after{background:#fff}

/* product: three screens in a flow */
.art-flow{display:flex;align-items:center;justify-content:center;gap:0}
.scr{width:58px;height:96px;border-radius:11px;background:#fff;border:1px solid #ecdfe1;padding:9px 7px;box-shadow:0 8px 18px rgba(102,2,11,.07);display:flex;flex-direction:column;gap:5px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.scr i{display:block;height:5px;border-radius:3px;background:#eee3e4}
.scr i.w60{width:60%}
.scr i.pic{height:24px;background:var(--accent-soft)}
.scr i.ok{height:22px;width:22px;border-radius:50%;background:#e4f6ec;color:#1f9d55;font-style:normal;font-size:12px;display:grid;place-items:center;margin:6px auto 4px}
.scr b{margin-top:auto;height:13px;border-radius:5px;background:var(--accent);color:#fff;font-size:7px;display:grid;place-items:center}
.scr.is-on{border-color:var(--accent);transform:translateY(-6px);box-shadow:0 14px 28px rgba(102,2,11,.14)}
.link{width:22px;height:0;border-top:1.5px dashed #d9a2aa;position:relative}
.link::after{content:"";position:absolute;right:-2px;top:-4px;border:3.5px solid transparent;border-left-color:#d9a2aa}
.mini-cursor{position:absolute;left:58%;top:58%;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.mini-cursor svg{width:16px;height:19px;fill:var(--accent);stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.skcard:hover .scr.s1{transform:translateX(-6px) rotate(-3deg)}
.skcard:hover .scr.s3{transform:translateX(6px) rotate(3deg)}
.skcard:hover .mini-cursor{transform:translate(46px,-6px)}

/* brand: palette fan and a type specimen */
.art-brand{grid-template-columns:auto auto;gap:18px}
.swatches{display:flex}
.swatches span{width:42px;height:82px;border-radius:10px;background:var(--c);border:2px solid #fff;box-shadow:0 8px 18px rgba(102,2,11,.12);margin-left:-14px;position:relative;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.swatches span:first-child{margin-left:0}
.swatches em{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-style:normal;font-size:6.5px;font-weight:700;color:#fff;opacity:.85}
.swatches span:nth-child(3) em{color:var(--accent)}
.skcard:hover .swatches span:nth-child(1){transform:rotate(-12deg) translateY(4px)}
.skcard:hover .swatches span:nth-child(2){transform:rotate(-4deg)}
.skcard:hover .swatches span:nth-child(3){transform:rotate(4deg)}
.skcard:hover .swatches span:nth-child(4){transform:rotate(12deg) translateY(4px)}
.specimen{width:92px;padding:10px;border-radius:12px;background:#fff;border:1px solid #ecdfe1;box-shadow:0 8px 18px rgba(102,2,11,.07)}
.specimen b{display:block;font-size:34px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--accent)}
.specimen span{font-size:8px;color:var(--ink-3)}
.brand-mark{position:absolute;top:14px;left:16px;height:16px;width:auto;opacity:.9}

/* visual: a selected frame, Figma style */
.art-visual .frame{position:relative;width:62%;margin-top:-14px;border-radius:8px;background:#fff;padding:4px;box-shadow:0 12px 26px rgba(102,2,11,.12);transition:transform .5s}
.art-visual .frame img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:5px}
.sel{position:absolute;inset:-6px;border:1.5px solid var(--accent);border-radius:3px;transition:inset .5s cubic-bezier(.2,.8,.2,1)}
.sel i{position:absolute;width:8px;height:8px;background:#fff;border:1.5px solid var(--accent);border-radius:2px}
.sel i:nth-child(1){left:-5px;top:-5px}.sel i:nth-child(2){right:-5px;top:-5px}.sel i:nth-child(3){left:-5px;bottom:-5px}.sel i:nth-child(4){right:-5px;bottom:-5px}
.sel b{position:absolute;left:-2px;bottom:-24px;padding:2px 7px;border-radius:4px;background:var(--accent);color:#fff;font-size:9px;font-weight:600;white-space:nowrap}
.skcard:hover .sel{inset:-12px}
.skcard:hover .art-visual .frame{transform:scale(1.03)}

/* video: a phone and a running timeline */
.art-video{align-content:start;padding-top:12px}
.phone{width:68px;height:118px;border-radius:14px;border:4px solid var(--ink);overflow:hidden;position:relative;box-shadow:0 12px 24px rgba(13,11,12,.18)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:62% 60%;transition:transform 4s linear}
.rec{position:absolute;top:5px;left:5px;font-size:7px;font-weight:700;color:#fff;background:rgba(0,0,0,.45);padding:1px 4px;border-radius:4px}
.timeline{position:absolute;left:18px;right:18px;bottom:14px;height:18px;display:flex;gap:3px;padding:3px;border-radius:7px;background:#fff;border:1px solid #ecdfe1}
.clip{border-radius:4px;background:var(--accent);opacity:.85}
.clip.c1{flex:2}.clip.c2{flex:1.2;opacity:.55}.clip.c3{flex:2.6;opacity:.75}.clip.c4{flex:1;opacity:.4}
.playhead{position:absolute;top:-6px;bottom:-6px;left:4px;width:2px;background:var(--ink);border-radius:2px;animation:playhead 6s linear infinite}
.playhead::before{content:"";position:absolute;top:-3px;left:-3px;width:8px;height:6px;border-radius:2px;background:var(--ink)}
@keyframes playhead{to{left:calc(100% - 6px)}}
.skcard:hover .playhead{animation-duration:2.2s}
.skcard:hover .phone img{transform:scale(1.15)}

/* AI: a prompt that types, three generations that resolve */
.art-ai{align-content:center;gap:12px;padding:0 18px}
.prompt{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid #ecdfe1;box-shadow:0 6px 14px rgba(102,2,11,.07);font-size:10.5px;color:var(--ink-2);max-width:100%}
.spark{color:var(--accent);font-size:11px}
.typed{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:typing 3.4s steps(30) infinite}
@keyframes typing{0%{width:0}55%,100%{width:30ch}}
.caret{width:1.5px;height:12px;background:var(--accent);animation:blink 1s steps(1) infinite}
.gens{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.gens span{aspect-ratio:1;border-radius:10px;position:relative;overflow:hidden;background:url(assets/videfly-ai.png) var(--x) 62%/320% auto;box-shadow:0 6px 14px rgba(102,2,11,.1)}
.gens span::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,#f3e7e9 30%,#fff 50%,#f3e7e9 70%) 0 0/250% 100%;animation:shimmer 1.6s linear infinite;transition:opacity .6s}
.gens span:nth-child(2)::after{transition-delay:.15s}.gens span:nth-child(3)::after{transition-delay:.3s}
@keyframes shimmer{to{background-position:-250% 0}}
.skcard:hover .gens span::after{opacity:0}

/* social: a feed grid and a like that pops */
.feed{display:grid;grid-template-columns:repeat(3,44px);gap:3px;padding:6px;border-radius:12px;background:#fff;box-shadow:0 10px 22px rgba(102,2,11,.1)}
.feed span{aspect-ratio:1;border-radius:4px;background:var(--img) var(--p)/260% auto}
.like{position:absolute;right:22%;bottom:22px;padding:5px 10px;border-radius:999px;background:#fff;color:#e0245e;font-size:12px;box-shadow:0 8px 18px rgba(102,2,11,.14);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.like b{color:var(--ink);font-size:11px}
.skcard:hover .like{transform:translateY(-8px) scale(1.15)}

/* ---------- v2 skill visuals: one clean language across all six ---------- */
#skills{background:#fbf7f7}
.skcard{background:#f8f3f4;border-color:#eee2e4;padding:0;overflow:hidden}
.skcard:hover{background:#faf6f6}
.sk-text{padding:18px 22px 22px}
.sk-text h3{font-size:21px;font-weight:700;letter-spacing:-.03em;margin-bottom:6px}
.sk-text p{font-size:14px}
.sk-add{top:14px;right:14px}
.sk-art.v2{height:210px;border-radius:0;display:block;
  background:radial-gradient(55% 60% at 50% 48%,#fff 0%,rgba(255,255,255,0) 75%),
    linear-gradient(rgba(102,2,11,.04) 1px,transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg,rgba(102,2,11,.04) 1px,transparent 1px) 0 0/26px 26px,#f8f3f4;
  -webkit-mask-image:linear-gradient(#000 75%,transparent);mask-image:linear-gradient(#000 75%,transparent)}
.sk-art.v2 .rings i{position:absolute;left:50%;top:48%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(102,2,11,.08);transform:translate(-50%,-50%)}
.sk-art.v2 .rings i:nth-child(1){width:150px}.sk-art.v2 .rings i:nth-child(2){width:250px}.sk-art.v2 .rings i:nth-child(3){width:350px}

/* the white app window in the middle */
.ui{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);background:rgba(255,255,255,.92);border:1px solid #eee3e4;border-radius:14px;box-shadow:0 18px 40px rgba(102,2,11,.1);padding:10px 12px 12px;transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s}
.skcard:hover .ui{transform:translate(-50%,calc(-50% - 4px));box-shadow:0 24px 50px rgba(102,2,11,.14)}
.ui__bar{display:flex;align-items:center;gap:4px;margin-bottom:9px}
.ui__bar i{width:6px;height:6px;border-radius:50%;background:#e5d8da}
.ui__bar em{margin-left:6px;font-style:normal;font-size:9.5px;font-weight:600;color:var(--ink-3)}

/* round white bubbles holding an icon */
.bub{position:absolute;left:var(--x);top:var(--y);width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:20px;line-height:1;
  box-shadow:0 10px 24px rgba(102,2,11,.12), 0 0 0 1px rgba(102,2,11,.04);transition:transform .5s cubic-bezier(.3,1.4,.5,1) var(--d,0s);z-index:2}
.bub.sm{width:38px;height:38px;margin:-19px 0 0 -19px;font-size:16px}
.bub.lg{width:64px;height:64px;margin:-32px 0 0 -32px;font-size:30px}
.bub.maroon{background:var(--accent)}
.bub.maroon svg{width:16px;height:19px;fill:#fff}
.bub.av{width:48px;height:48px;margin:-24px 0 0 -24px;padding:3px}
.bub.av img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 22%}
.bub.av em{position:absolute;right:-6px;bottom:-4px;width:22px;height:22px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:12px;font-style:normal;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.skcard:hover .bub{transform:translateY(-6px)}

/* product: a user flow */
.ui-flow{width:178px}
.flow{display:flex;align-items:center;padding:6px 2px 4px}
.flow .node{width:30px;height:30px;border-radius:9px;border:1.5px solid #e8dcde;background:#fff;flex:none;display:grid;place-items:center;font-size:12px;color:#1f9d55}
.flow .node.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 4px rgba(102,2,11,.07)}
.flow .node.done{background:#e8f7ee;border-color:#bfe7cf}
.flow .wire{flex:1;height:0;border-top:1.5px dashed #d9a2aa}
.flow-labels{display:flex;justify-content:space-between;font-size:8.5px;color:var(--ink-3);padding:0 0 2px}

/* brand: a brand board and its files */
.ui-brand{width:168px;text-align:left}
.ui-brand img{height:28px;width:auto;margin:2px 0 10px}
.brand-row{display:flex;justify-content:space-between;align-items:center}
.brand-row .dots{display:flex}
.brand-row .dots i{width:16px;height:16px;border-radius:50%;background:var(--c);border:2px solid #fff;margin-left:-4px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.brand-row .dots i:first-child{margin-left:0}
.brand-row b{font-size:18px;font-weight:700;letter-spacing:-.04em;color:var(--accent)}
.file{position:absolute;left:var(--x);top:var(--y);width:42px;height:52px;margin:-26px 0 0 -21px;border-radius:6px 14px 6px 6px;background:var(--c);color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.06em;display:flex;align-items:flex-end;justify-content:center;padding-bottom:7px;
  transform:rotate(var(--r));box-shadow:0 10px 20px rgba(102,2,11,.15);transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.file::before{content:"";position:absolute;top:0;right:0;width:13px;height:13px;border-radius:0 12px 0 5px;background:rgba(255,255,255,.35)}
.skcard:hover .file{transform:rotate(calc(var(--r) * 1.6)) translateY(-5px)}

/* visual: a canvas window */
.ui-canvas{width:206px;padding-bottom:10px;top:44%}
.canvas{position:relative;border-radius:8px;overflow:visible}
.canvas img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;border-radius:7px;display:block}
.canvas .sel{inset:-4px;border-width:1.2px}
.canvas .sel i{width:6px;height:6px}
.canvas .sel i:nth-child(1){left:-4px;top:-4px}.canvas .sel i:nth-child(2){right:-4px;top:-4px}.canvas .sel i:nth-child(3){left:-4px;bottom:-4px}.canvas .sel i:nth-child(4){right:-4px;bottom:-4px}
.skcard:hover .canvas .sel{inset:-8px}

/* video: a phone wired to editing steps */
.grid-glow::before{content:"";position:absolute;left:50%;top:48%;width:220px;height:160px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(217,122,134,.22),transparent);pointer-events:none}
.wire-h{position:absolute;top:var(--y);left:var(--l);width:var(--w);height:0;border-top:1.5px solid rgba(102,2,11,.22)}
.wire-h::after{content:"";position:absolute;right:-3px;top:-3.5px;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.6}
.phone2{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:76px;height:134px;border-radius:16px;border:4px solid #fff;overflow:hidden;box-shadow:0 18px 36px rgba(102,2,11,.2);z-index:1;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.phone2 img{width:100%;height:100%;object-fit:cover;object-position:62% 60%}
.phone2 .play{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--accent);font-size:11px;display:grid;place-items:center;padding-left:2px}
.phone2 .bar{position:absolute;left:8px;right:8px;bottom:8px;height:3px;border-radius:2px;background:rgba(255,255,255,.45);overflow:hidden}
.phone2 .bar i{display:block;height:100%;width:30%;background:#fff;animation:vbar 5s linear infinite}
@keyframes vbar{to{width:100%}}
.skcard:hover .phone2{transform:translate(-50%,calc(-50% - 4px)) scale(1.04)}

/* AI: generating, with frames floating out */
.ui-gen{width:180px}
.drop{border:1.5px dashed #e2c6cb;border-radius:10px;padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;background:#fdf8f9}
.drop .spark{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:12px;animation:twinkle 2.4s ease-in-out infinite}
.drop b{font-size:10.5px;font-weight:600;color:var(--accent)}
.drop .prog{width:80%;height:4px;border-radius:2px;background:#f0e2e4;overflow:hidden}
.drop .prog i{display:block;height:100%;width:40%;border-radius:2px;background:var(--accent);animation:prog 2.6s ease-in-out infinite}
@keyframes prog{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.shot{position:absolute;left:var(--x);top:var(--y);width:44px;height:56px;margin:-28px 0 0 -22px;border-radius:9px;border:3px solid #fff;transform:rotate(var(--r));
  background:url(assets/videfly-ai.png) var(--px) 62%/420% auto;box-shadow:0 10px 22px rgba(102,2,11,.16);transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.skcard:hover .shot{transform:rotate(calc(var(--r) * 1.5)) translateY(-6px) scale(1.05)}

/* social: a content calendar */
.ui-cal{width:178px;padding:12px}
.checks{display:flex;gap:6px;margin-bottom:10px}
.checks i{width:18px;height:18px;border-radius:50%;border:1.5px solid #e5d8da;font-style:normal;font-size:9px;display:grid;place-items:center}
.checks i.y{background:#1f9d55;border-color:#1f9d55;color:#fff}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.posts span{aspect-ratio:1;border-radius:5px;background:var(--img) var(--p)/260% auto}
.posts span.post-empty{background:repeating-linear-gradient(45deg,#f6eced 0 4px,#fbf5f6 4px 8px);border:1.5px dashed #e5d0d4}

/* ---------- skills as a cloud of bubbles ---------- */
#skills{background:radial-gradient(50% 60% at 50% 60%,#fff 0%,rgba(255,255,255,0) 70%),#fbf5f6}
.sk-head--center{flex-direction:column;align-items:center;text-align:center;margin-bottom:22px}
.sk-head--center .mix-title{text-align:center;max-width:18ch}
.sk-head--center p{max-width:46ch}
.bubbles{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 12px;max-width:940px;margin:0 auto;padding:26px 0 10px}
.bubble{position:relative;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:999px;font-size:14.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  scale:0;opacity:0;translate:var(--dx) var(--dy);rotate:0deg;transition:rotate .35s, background .25s, color .25s, box-shadow .25s}
.bubble.is-white{background:#fff;color:var(--ink);box-shadow:0 8px 20px rgba(102,2,11,.08), 0 0 0 1px rgba(102,2,11,.05)}
.bubble.is-soft{background:var(--accent-soft);color:var(--accent)}
.bubble.is-line{background:transparent;color:var(--accent);border:1.5px dashed rgba(102,2,11,.35)}
.bubble.is-big{height:66px;padding:0 28px 0 12px;font-size:19px;font-weight:700;letter-spacing:-.03em;background:var(--accent);color:#fff;box-shadow:0 16px 34px rgba(102,2,11,.28)}
.bubble__e{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:21px}
.bubble:hover{rotate:-4deg;box-shadow:0 18px 36px rgba(102,2,11,.2)}
.bubble.is-white:hover{background:var(--accent-soft);color:var(--accent)}
.bubble.is-big:hover{background:#7d0612}
/* the ring that bursts out when a bubble pops */
.bubble::after{content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid var(--accent);opacity:0;scale:.8;pointer-events:none}
.bubbles.is-in .bubble{animation:bubbleIn .7s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * 55ms) both, bubbleFloat var(--fd) ease-in-out var(--fo) infinite}
.bubbles.is-in .bubble.is-popped{animation:bubblePop .4s ease-in forwards}
.bubbles.is-in .bubble.is-popped::after{animation:bubbleRing .45s ease-out}
.bubbles.is-in .bubble.is-back{animation:bubbleIn .6s cubic-bezier(.3,1.6,.5,1) both, bubbleFloat var(--fd) ease-in-out var(--fo) infinite}
@keyframes bubbleIn{0%{scale:0;opacity:0}70%{scale:1.12;opacity:1}100%{scale:1;opacity:1}}
@keyframes bubbleFloat{0%,100%{translate:var(--dx) var(--dy)}50%{translate:var(--dx) calc(var(--dy) - 10px)}}
@keyframes bubblePop{0%{scale:1;opacity:1}40%{scale:1.18;opacity:1}100%{scale:.2;opacity:0}}
@keyframes bubbleRing{0%{opacity:.7;scale:.9}100%{opacity:0;scale:1.5}}
.no-js .bubble{scale:1;opacity:1}
@media (prefers-reduced-motion:reduce){.bubble{scale:1;opacity:1;translate:none}}
@media (max-width:640px){
  .bubbles{gap:10px 8px}
  .bubble{height:38px;padding:0 14px;font-size:13px}
  .bubble.is-big{height:52px;padding:0 18px 0 8px;font-size:15.5px}
  .bubble__e{width:36px;height:36px;font-size:17px}
}

/* ---------- skills: title in a frame, skills popping in around it ---------- */
#skills{background:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(102,2,11,.06) 31px 32px),#fbf7f7;padding:100px 0}
.sk-stage{position:relative;max-width:1040px;height:500px;margin:0 auto}
.sk-center{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:2}
.sk-hand{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.sk-box{position:relative;padding:14px 40px 18px;border:2px solid var(--accent);background:rgba(255,255,255,.7)}
.sk-box i{position:absolute;width:12px;height:12px;background:#fff;border:2px solid var(--accent)}
.sk-box i:nth-child(1){left:-7px;top:-7px}.sk-box i:nth-child(2){right:-7px;top:-7px}.sk-box i:nth-child(3){left:-7px;bottom:-7px}.sk-box i:nth-child(4){right:-7px;bottom:-7px}
.sk-big{font-size:clamp(54px,8vw,112px);font-weight:800;letter-spacing:-.055em;line-height:.95;color:var(--ink);white-space:nowrap}
.sk-status{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.sk-status i{width:8px;height:8px;border-radius:50%;background:#2fb36b;box-shadow:0 0 0 0 rgba(47,179,107,.5);animation:pulse 1.8s ease-out infinite}

/* the stickers around it */
.sk-tag,.sk-chip,.sk-face{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;rotate:var(--r,0deg);scale:0;opacity:0;z-index:3}
.sk-tag{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px 0 8px;border-radius:12px;font-size:15px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;box-shadow:0 12px 26px rgba(102,2,11,.14);transition:box-shadow .25s}
.sk-tag > span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.92)}
.sk-tag > span img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15));transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.sk-tag:hover > span img{transform:scale(1.18) rotate(-8deg)}
.sk-tag.is-maroon{background:var(--accent);color:#fff}
.sk-tag.is-soft{background:var(--accent-soft);color:var(--accent)}
.sk-tag.is-soft > span{background:#fff}
.sk-tag.is-cream{background:#fff;color:var(--ink);border:1.5px solid #ecdfe1}
.sk-tag.is-cream > span{background:var(--accent-soft)}
.sk-tag:hover{box-shadow:0 18px 34px rgba(102,2,11,.22)}
/* little hand-drawn arrows pointing at the title */
.sk-arrow{position:absolute;width:40px;height:30px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.55;pointer-events:none}
.sk-tag.l .sk-arrow{right:-44px;top:28px}
.sk-tag.r .sk-arrow{left:-44px;top:28px;scale:-1 1}
.sk-tag.l.b .sk-arrow{top:-14px;scale:1 -1}
.sk-tag.r.b .sk-arrow{top:-14px;scale:-1 -1}
.sk-chip{height:32px;padding:0 13px;border-radius:999px;background:#fff;border:1px dashed rgba(102,2,11,.35);font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.sk-face{width:54px;height:54px;border-radius:50%;padding:3px;background:#fff;box-shadow:0 10px 24px rgba(102,2,11,.18), 0 0 0 2px var(--accent-soft)}
.sk-face img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 22%}

.sk-stage.is-in .sk-tag,.sk-stage.is-in .sk-chip,.sk-stage.is-in .sk-face{animation:bubbleIn .7s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * 90ms + .2s) both, tagFloat calc(5s + var(--i) * .3s) ease-in-out calc(var(--i) * -.7s) infinite}
.sk-stage.is-in .is-popped{animation:bubblePop .4s ease-in forwards}
.sk-stage.is-in .is-back{animation:bubbleIn .6s cubic-bezier(.3,1.6,.5,1) both, tagFloat calc(5s + var(--i) * .3s) ease-in-out infinite}
@keyframes tagFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.no-js .sk-tag,.no-js .sk-chip,.no-js .sk-face{scale:1;opacity:1}
@media (prefers-reduced-motion:reduce){.sk-tag,.sk-chip,.sk-face{scale:1;opacity:1}}

/* parallax layers: site.js sets --py; translate is separate from the transforms the animations use */
[data-speed]{translate:0 var(--py,0px);will-change:translate}
.sk-tag[data-speed],.sk-chip[data-speed]{translate:-50% calc(-50% + var(--py,0px))}
@media (max-width:860px){
  .sk-tag[data-speed],.sk-chip[data-speed]{translate:none}
  [data-speed]{translate:none}
}
@media (prefers-reduced-motion:reduce){
  [data-speed]{translate:none}
  .sk-tag[data-speed],.sk-chip[data-speed]{translate:-50% -50%}
}

/* minimal pass: white field, stroked tags, no shadows */
#skills{background:#fff}
.sk-box{background:#fff}
.sk-tag{box-shadow:none;border:1.5px solid var(--line)}
.sk-tag.is-maroon{border-color:var(--accent)}
.sk-tag.is-soft{border-color:#ecc9ce}
.sk-tag.is-cream{border-color:#e6dadb}
.sk-tag:hover{box-shadow:none;border-color:var(--accent)}
.sk-tag.is-maroon:hover{border-color:var(--ink)}
.sk-tag > span{border:1px solid rgba(102,2,11,.12)}
.sk-tag.is-maroon > span{border-color:transparent}
.sk-tag > span img{filter:none}

/* audit pass: one tag style, no tilt, one shape, calmer type */
.sk-stage{height:460px}
.sk-hand{font-size:11.5px;letter-spacing:.16em;color:var(--accent);margin-bottom:14px}
.sk-box{border-width:1.5px;padding:12px 36px 16px}
.sk-box i{width:10px;height:10px;border-width:1.5px}
.sk-box i:nth-child(1){left:-6px;top:-6px}.sk-box i:nth-child(2){right:-6px;top:-6px}.sk-box i:nth-child(3){left:-6px;bottom:-6px}.sk-box i:nth-child(4){right:-6px;bottom:-6px}
.sk-status{font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-3);margin-top:16px}
.sk-tag,.sk-chip{rotate:0deg}
.sk-tag{height:50px;padding:0 20px 0 10px;gap:10px;border-radius:999px;background:#fff;color:var(--ink);border:1px solid var(--line);font-size:15px;font-weight:600;letter-spacing:-.015em}
.sk-tag > span{width:32px;height:32px;border:0;border-radius:0;background:none}
.sk-tag > span img{width:30px;height:30px}
.sk-tag:hover{border-color:var(--accent);color:var(--accent)}
.sk-chip{height:34px;padding:0 14px;border:1px solid var(--line);border-style:solid;color:var(--ink-3);font-size:13px;font-weight:500}
.sk-chip:hover{border-color:var(--accent);color:var(--accent)}
@keyframes tagFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* arrows: one size, one stroke, each pointing at the title from its row */
.sk-tag .sk-arrow{width:34px;height:26px;top:50%;margin-top:-13px;stroke-width:1.5;opacity:.45;rotate:0deg;scale:1 1}
.sk-tag.l .sk-arrow{left:auto;right:-46px}
.sk-tag.r .sk-arrow{right:auto;left:-46px}
.sk-tag.l.t .sk-arrow{scale:1 1}
.sk-tag.r.t .sk-arrow{scale:-1 1}
.sk-tag.l.m .sk-arrow{rotate:-28deg}
.sk-tag.r.m .sk-arrow{scale:-1 1;rotate:28deg}
.sk-tag.l.b .sk-arrow{scale:1 -1}
.sk-tag.r.b .sk-arrow{scale:-1 -1}
.sk-tag:hover .sk-arrow{opacity:.9}

@media (max-width:860px){
  .sk-stage{height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 10px}
  .sk-center{position:static;translate:none;width:100%;margin-bottom:22px}
  .sk-tag,.sk-chip{position:relative;left:auto;top:auto;translate:none}
  .sk-arrow,.sk-face{display:none}
  .sk-big{font-size:clamp(44px,13vw,64px)}
  .sk-box{padding:10px 22px 14px}
  .sk-status{display:block;max-width:30ch;line-height:1.6}
  .sk-status i{display:inline-block;margin-right:6px;vertical-align:1px}
}

/* touch screens never hover: show the resolved state */
@media (hover:none){
  .gens span::after{animation:none;opacity:0}
  .sel{inset:-10px}
}

/* bag bar under the grid */
.sk-bag{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin-top:18px;padding:14px 14px 14px 22px;border-radius:18px;background:#fff;border:1px solid #efe4e5}
.sk-bag .mix-count{font-size:16px}
.sk-bag__items{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.sk-bag .mix-send{height:46px;padding:0 22px;font-size:12px}

/* six crafts as a big type list; the active one lights up and fills the preview */
.crafts{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.crafts__list{list-style:none;border-top:1px solid var(--line)}
.craft{position:relative;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.craft::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.craft.is-active::before{transform:scaleX(1)}
.craft__main{flex:1;min-width:0;display:flex;align-items:baseline;gap:18px;padding:20px 0;text-align:left}
.craft__no{font-size:13px;font-weight:600;color:var(--ink-3);width:24px;flex:none;transition:color .3s}
.craft__name{font-size:clamp(26px,3.4vw,50px);font-weight:600;letter-spacing:-.04em;line-height:1.05;color:#c9c3c2;transition:color .35s, transform .45s cubic-bezier(.2,.8,.2,1)}
.craft__meta{margin-left:auto;font-size:13px;color:var(--ink-3);white-space:nowrap;opacity:0;transform:translateX(-8px);transition:opacity .3s, transform .3s}
.craft:hover .craft__name{color:var(--ink-2)}
.craft.is-active .craft__name{color:var(--ink);transform:translateX(10px)}
.craft.is-active .craft__no{color:var(--accent)}
.craft.is-active .craft__meta{opacity:1;transform:none}
.craft__add{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--line);position:relative;transition:background .25s,border-color .25s,transform .35s}
.craft__add::before,.craft__add::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.8px;border-radius:2px;background:var(--ink);transform:translate(-50%,-50%)}
.craft__add::after{transform:translate(-50%,-50%) rotate(90deg)}
.craft__add:hover{border-color:var(--accent)}
.craft__add[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);transform:rotate(45deg)}
.craft__add[aria-pressed="true"]::before,.craft__add[aria-pressed="true"]::after{background:#fff}
.craft__more{display:none}
.crafts__preview{position:sticky;top:96px;border-radius:20px;overflow:hidden;background:var(--ink);color:#fff}
.cp__img{aspect-ratio:16/11;overflow:hidden;background:#222}
.cp__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease, opacity .25s}
.crafts__preview:hover .cp__img img{transform:scale(1.04)}
.cp__body{padding:22px 22px 24px}
.cp__body > *{transition:opacity .25s, transform .25s}
.crafts__preview.swap .cp__body > *,.crafts__preview.swap .cp__img img{opacity:0}
.crafts__preview.swap .cp__body > *{transform:translateY(6px)}
.cp__body h3{font-size:24px;font-weight:600;letter-spacing:-.03em;margin-bottom:6px}
.cp__body p{font-size:14px;color:#c9bfc2;margin-bottom:18px}
.cp__body .label{display:block;color:#d9a2aa;margin-bottom:8px}
.cp__gives{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.crafts__preview .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#f1e9eb}
.cp__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;padding-top:16px;border-top:1px dashed rgba(255,255,255,.18)}
.cp__foot b{display:block;font-size:13.5px;font-weight:600}
.cp__foot .label{margin-bottom:4px}
.cp__add{flex:none;height:40px;padding:0 16px;border-radius:999px;background:#fff;color:var(--accent);font-size:13px;font-weight:700;transition:background .2s,color .2s}
.cp__add:hover{background:var(--accent-soft)}
.cp__add[aria-pressed="true"]{background:var(--accent);color:#fff}

/* the brief: what you've added, ready to send */
.brief{display:flex;justify-content:space-between;align-items:center;gap:16px 28px;flex-wrap:wrap;margin-top:28px;padding:18px 18px 18px 24px;border-radius:18px;background:var(--accent-soft)}
.brief__info{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brief__info .label{color:var(--accent)}
.brief__items{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--ink-2)}
.brief__items .chip{animation:bagIn .35s ease}
@keyframes bagIn{from{opacity:0;transform:translateY(6px)}}
.brief__actions{display:flex;align-items:center;gap:18px}
.brief .btn-dark{background:var(--accent)}
.brief .btn-dark:hover{background:var(--ink)}
.brief .btn-dark.is-off{opacity:.4;pointer-events:none}

/* experience, itemised: a career receipt */
.receipt-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,96px);align-items:center}
.receipt-side h2{font-size:clamp(32px,3.4vw,48px);font-weight:600;line-height:1.08;letter-spacing:-.035em;margin:10px 0 14px}
.receipt-side p{color:#c9bfc2;max-width:44ch;margin-bottom:24px}
.receipt{position:relative;background:#fff;color:var(--ink);padding:30px 28px 40px;border-radius:6px 6px 0 0;transform:rotate(1.2deg);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 100%;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 100%}
.receipt.rv.in{transform:rotate(1.2deg)}
.receipt__head{text-align:center;padding-bottom:18px;border-bottom:1.5px dashed #d8d2d1}
.receipt__head img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 22%;margin:0 auto 10px}
.receipt__head b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}
.receipt__head .label{color:var(--accent)}
.receipt__list{padding:6px 0}
.line{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px dotted #d8d2d1}
.line img{width:30px;height:30px;border-radius:50%;object-fit:contain;border:1px solid var(--line);padding:3px;background:#fff;filter:grayscale(1);opacity:.75;transition:filter .3s, opacity .3s, transform .3s}
.line img[src*="videfly"]{padding:0;object-fit:cover;object-position:12% 50%}
.line:hover img{filter:none;opacity:1;transform:scale(1.12)}
.line h3{font-size:14px;font-weight:600;line-height:1.3}
.line span{font-size:12.5px;color:var(--ink-3)}
.line time{font-size:12px;font-weight:500;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.receipt__total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 12px;border-bottom:1.5px dashed #d8d2d1}
.receipt__total span{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.12em}
.receipt__total b{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--accent)}
.receipt__thanks{text-align:center;font-size:12px;color:var(--ink-3);margin-top:16px}

/* ---------- scroll motion ---------- */
.scroll-bar{position:fixed;z-index:70;top:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* headings: each word rises out of its own mask */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w > span{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.split.in .w > span{transform:none}

/* portrait opens from the centre, then drifts with the scroll */
.portrait.rv{opacity:1;transform:none;clip-path:inset(14% 14% 14% 14% round 22px);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1)}
.portrait.rv.in{clip-path:inset(0 0 0 0 round 22px)}
.portrait img{transform:scale(1.12);will-change:transform}
.portrait figcaption{opacity:0;transform:translateY(12px);transition:opacity .6s ease .9s, transform .6s ease .9s}
.portrait.in figcaption{opacity:1;transform:none}

/* the receipt prints from the top, line by line */
/* the wrapper is what gets observed, so the clipped receipt still triggers */
.receipt-print.rv{opacity:1;transform:none}
.receipt-print .receipt{clip-path:inset(0 0 100% 0);transform:rotate(1.2deg) translateY(-24px);transition:clip-path 1.6s cubic-bezier(.45,0,.2,1), transform 1.6s cubic-bezier(.45,0,.2,1)}
.receipt-print.in .receipt{clip-path:inset(0 0 -40px 0);transform:rotate(1.2deg)}
.receipt-print .line{opacity:0;transform:translateX(-10px);transition:opacity .5s ease, transform .5s ease}
.receipt-print.in .line{opacity:1;transform:none}
.receipt-print.in .line:nth-child(1){transition-delay:.35s}
.receipt-print.in .line:nth-child(2){transition-delay:.5s}
.receipt-print.in .line:nth-child(3){transition-delay:.65s}
.receipt-print.in .line:nth-child(4){transition-delay:.8s}
.receipt-print.in .line:nth-child(5){transition-delay:.95s}
.no-js .receipt-print .receipt,.no-js .receipt-print .line{clip-path:none;opacity:1}

/* folders and skills land with a little tilt */
.folder-wrap.rv{transform:translateY(40px) rotate(-2deg)}
.folder-wrap.rv:nth-child(even){transform:translateY(40px) rotate(2deg)}
.folder-wrap.rv.in{transform:none}
.craft.rv{transform:translateY(24px)}
.craft.rv.in{transform:none}
.xp-links a,.logos{transition:opacity .6s}

/* the call to action grows into place as it nears (scale set from site.js) */
.vision{will-change:transform;transform-origin:center bottom}

@media (prefers-reduced-motion:reduce){
  .portrait.rv,.receipt.rv{clip-path:none}
  .split .w > span{transform:none}
}

@media (max-width:1023px){
  .folders{grid-template-columns:1fr 1fr}
  .sk-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav__in{height:64px;gap:12px}
  .nav__logo img{height:26px}
  .nav__right{gap:18px}
  .nav__links{gap:18px}
  .nav__links a{font-size:13.5px}
  .nav__cta{display:none}
  .nav.is-pill{padding-top:10px}
  .nav.is-pill .nav__in{height:52px;padding:0 18px}
  .nav.is-pill .nav__logo img{height:22px}
}
@media (max-width:900px){
  .meet,.xp-top,.crafts,.receipt-wrap,.cta{grid-template-columns:1fr}
  .cta__art{height:300px;max-width:440px;width:100%;margin:0 auto}
  .cta__badge{width:120px;height:120px}
  .cta__badge text{font-size:16px}
  .receipt-print .receipt,.receipt-print.in .receipt{transform:none}
  /* on small screens the preview folds into the active row */
  .crafts__preview{display:none}
  .craft.is-active .craft__more{display:block;width:100%;padding:0 0 20px 42px;animation:bagIn .4s ease}
  .craft__more img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;margin-bottom:12px}
  .craft__more p{font-size:14px;color:var(--ink-2);margin-bottom:10px}
  .craft__more .cp__gives{margin-bottom:0}
  .craft.is-active .craft__name{transform:none}
  .portrait{max-width:460px}
  .fcard__grid{grid-template-columns:1fr 1fr}
  .fcard__me{grid-column:1/-1}
}
@media (max-width:640px){
  .xp{grid-template-columns:40px minmax(0,1fr)}
  .xp__logo{width:40px;height:40px}
  .xp .role{grid-column:2}
  .xp .chips{grid-column:1/-1}
  .folders{gap:14px}
  .craft__meta{display:none}
  .sk-grid{grid-template-columns:1fr}
  .sk-art{height:160px}
  .sk-bag{padding:14px}
  .sk-bag .mix-send{width:100%;justify-content:center}
  .folder__front{padding:12px 12px 10px}
  .folder__foot > .label{display:none}
  .folder__front b{font-size:24px}
  .folder__name{font-size:16px}
  #skills{padding:72px 0}
  .mixcard{border-radius:24px}
  .mixcard::before,.mixcard::after{display:none}
  .mix-chip{height:46px;padding:0 18px;font-size:15px}
  .mix-chips{gap:8px}
  .mix-count{font-size:17px}
  .craft__main{gap:12px;padding:16px 0}
  .craft.is-active .craft__more{padding-left:0}
  .brief{padding:16px}
  .guide.t{top:28px}.guide.b{bottom:28px}.guide.l{left:20px}.guide.r{right:20px}
  .screw.s1,.screw.s2{top:28px}.screw.s3,.screw.s4{top:calc(100% - 28px)}
  .screw.s1,.screw.s3{left:20px}.screw.s2,.screw.s4{left:calc(100% - 20px)}
  .float.f2,.float.f3,.float.f5,.float.f6{display:none}
  .float.f1{--w:62px;left:5%;top:8%}
  .float.f4{--w:58px;right:5%;top:9%}
  .cursor{right:-14px}
  #contact{padding-top:56px}
  .endcard{padding:56px 22px 52px}
  .endcard__body{flex-direction:column;text-align:center;gap:26px}
  .endcard__photo{width:150px}
  .endcard__line{margin-left:auto;margin-right:auto}
  .endcard__actions{justify-content:center}
  .endcard{border-radius:24px}
  .mailpill{max-width:100%;padding-left:16px;gap:8px}
  .mailpill span{font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mailpill button{padding:0 14px;flex:none}
  .fcard nav a{overflow-wrap:anywhere}
  .cta__badge{right:6px;bottom:-6px}
  .pill-btn{height:48px;padding:0 20px;font-size:12px}
  .receipt{padding:24px 18px 36px}
  .line{grid-template-columns:28px minmax(0,1fr)}
  .line time{grid-column:2}
  .folder-wrap p{display:none}
  .orbit__copy p{font-size:15px}
  .fcard{padding:22px}
  .vision{padding:64px 20px}
}

/* Skills echoes the hero: the same soft maroon glow behind the title, over a faint dot grid that fades out at the edges */
#skills{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 42% 46% at 50% 50%,#f8eaec 0%,rgba(248,234,236,0) 70%),#fff}
#skills::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(rgba(102,2,11,.16) 1.1px,transparent 1.4px) center/22px 22px;
  -webkit-mask:radial-gradient(ellipse 60% 70% at 50% 50%,#000 0%,rgba(0,0,0,.5) 55%,transparent 85%);
  mask:radial-gradient(ellipse 60% 70% at 50% 50%,#000 0%,rgba(0,0,0,.5) 55%,transparent 85%)}

/* an empty folder reads as on its way, not as zero */
.folder__soon{color:var(--accent)}

/* CTA card in a deep maroon gradient so it stands out as the last stop; copy turns white, the main button flips to white */
.endcard{border:0;color:#fff;
  background:radial-gradient(70% 90% at 85% 10%,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 60%),
    radial-gradient(60% 80% at 10% 100%,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 70%),
    linear-gradient(135deg,#8a1220 0%,#66020b 50%,#3d0106 100%)}
.endcard__rings i{border-color:rgba(255,255,255,.1)}
.endcard h2,.endcard__line{color:#fff}
.endcard__alt{color:rgba(255,255,255,.65)}
.endcard__alt button{color:#fff}
.endcard .btn-depth{background:#fff;color:var(--accent);box-shadow:0 14px 28px rgba(0,0,0,.25),0 0 0 4px rgba(255,255,255,.12)}
.endcard .btn-depth:hover{box-shadow:0 20px 36px rgba(0,0,0,.3),0 0 0 6px rgba(255,255,255,.16)}
.endcard .handle{background:transparent;border-color:rgba(255,255,255,.7);box-shadow:none}
.endcard .handle:hover{border-color:#fff}
.endcard .handle span{color:#fff}
.endcard .handle svg{color:#fff}
.endcard__photo.is-strip img{box-shadow:0 26px 50px rgba(0,0,0,.35)}
.endcard .cursor svg{fill:#fff;stroke:var(--accent)}
.endcard .cursor b{background:#fff;color:var(--accent);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.endcard .handle img{object-position:center}

/* phones: the six skills sit in a tidy two-column grid, the smaller chips wrap underneath */
@media (max-width:640px){
  .sk-tag{flex:1 1 calc(50% - 5px);max-width:calc(50% - 5px);justify-content:flex-start;height:46px;padding:0 12px 0 8px;gap:8px;font-size:13.5px}
  .sk-tag > span{width:28px;height:28px;flex:none}
  .sk-tag > span img{width:26px;height:26px}
  .sk-chip{margin-top:4px}
}