/* =========================================================
   توحيد ملقط · Tawheed Malkat — site.css
   الفكرة: كانفاس المصممة. إطارات، طبقات، ومقابض التحديد الزرقاء
   الألوان مؤقتة: رمادي الكانفاس + حبر غامق + أزرق التحديد
   ========================================================= */

/* ---------- Fonts (self-hosted; fallbacks matched per script so nothing jumps) ---------- */
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:optional;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");font-weight:500;font-display:optional;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");font-weight:600;font-display:optional;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:optional;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alex";src:url(../fonts/alexandria-arabic-600-normal.woff2) format("woff2");font-weight:600;font-display:optional;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alex";src:url(../fonts/alexandria-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alex";src:url(../fonts/alexandria-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:optional;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alex";src:url(../fonts/alexandria-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Alex";src:url(../fonts/alexandria-arabic-800-normal.woff2) format("woff2");font-weight:800;font-display:optional;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alex";src:url(../fonts/alexandria-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* metric-matched fallbacks, one face per script, so the page keeps its shape before the fonts arrive */
@font-face{font-family:"Plex Fallback";src:local("Tahoma"),local("Arial"),local("Segoe UI"),local("Geeza Pro"),local("Noto Sans Arabic"),local("DejaVu Sans");size-adjust:95.6%;ascent-override:113.4%;descent-override:43.4%;line-gap-override:0%;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Plex Fallback";src:local("Arial"),local("Helvetica"),local("Segoe UI"),local("Roboto"),local("DejaVu Sans");size-adjust:101.1%;ascent-override:107.3%;descent-override:41.1%;line-gap-override:0%;unicode-range:U+0000-05FF,U+2000-206F}
@font-face{font-family:"Alex Fallback";src:local("Tahoma Bold"),local("Tahoma"),local("Arial Bold"),local("Geeza Pro"),local("Noto Sans Arabic"),local("DejaVu Sans");size-adjust:104.4%;ascent-override:92.7%;descent-override:24%;line-gap-override:0%;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Alex Fallback";src:local("Arial Bold"),local("Arial"),local("Helvetica"),local("Roboto"),local("DejaVu Sans");size-adjust:108.6%;ascent-override:89.1%;descent-override:23.1%;line-gap-override:0%;unicode-range:U+0000-05FF,U+2000-206F}

/* ---------- Tokens ---------- */
:root{
  --bg:#EDECF4; --bg-2:#E4E2EE; --surface:#FFFFFF; --surface-2:#F6F5FB;
  --ink:#15131D; --ink-2:#45425A; --ink-3:#5A566E;
  --brand:#4A35D4; --brand-2:#7C5CFF; --brand-ink:#FFFFFF; --label:#5B3FE0;
  --brand-soft:rgba(74,53,212,.07); --brand-tint:rgba(74,53,212,.16);
  --line:rgba(20,22,27,.1); --line-2:rgba(20,22,27,.18);
  --dot:rgba(40,30,90,.16); --frame-line:rgba(74,53,212,.16); --glow-1:rgba(124,92,255,.16); --glow-2:rgba(61,123,255,.12); --glow-3:rgba(214,92,255,.08);
  --wire:rgba(20,22,27,.13); --wire-2:rgba(20,22,27,.22);
  --sticky-1:#FFE48A; --sticky-2:#FFC2D4; --sticky-3:#BFE3FF; --sticky-ink:#2A2414;
  --wa:#0E7440;
  --glass:rgba(250,251,253,.68); --glass-strong:rgba(250,251,253,.88); --glass-soft:rgba(255,255,255,.76);
  --glass-solid:#F7F8FA; --glass-edge:rgba(255,255,255,.9); --glass-rim:rgba(20,22,27,.08);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 44%);
  --shadow-1:0 1px 2px rgba(18,28,52,.07),0 8px 22px -10px rgba(18,28,52,.18);
  --shadow-2:0 2px 6px rgba(18,28,52,.07),0 16px 36px -12px rgba(18,28,52,.24),0 34px 70px -36px rgba(18,28,52,.24);
  --shadow-3:0 4px 12px rgba(18,28,52,.09),0 26px 60px -18px rgba(18,28,52,.32),0 56px 110px -46px rgba(18,28,52,.34);
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:72px;--s-9:112px;
  --r-xs:6px;--r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:30px;--r-pill:999px;
  --t-xs:.8125rem;--t-sm:.9375rem;--t-md:1rem;--t-lg:1.1875rem;--t-xl:1.5rem;
  --t-2xl:clamp(1.9rem,1.35rem + 2.3vw,3.1rem);
  --t-hero:clamp(2.9rem,1.7rem + 6.2vw,6.4rem);
  --f-body:"Plex","Plex Fallback",system-ui,sans-serif;
  --f-head:"Alex","Alex Fallback","Plex",sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1); --spring:cubic-bezier(.34,1.32,.52,1);
  --hdr-h:64px; --gut:18px; --dock-h:68px;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0C0916; --bg-2:#110D1F; --surface:#171229; --surface-2:#1F1936;
  --ink:#EFEBFA; --ink-2:#C1B8DC; --ink-3:#A79DC7;
  --brand:#BBA6FF; --brand-2:#8E6CFF; --brand-ink:#170F33; --label:#6C47F0;
  --brand-soft:rgba(187,166,255,.09); --brand-tint:rgba(187,166,255,.22);
  --line:rgba(239,235,250,.1); --line-2:rgba(239,235,250,.18);
  --dot:rgba(187,166,255,.16); --frame-line:rgba(187,166,255,.13);
  --glow-1:rgba(124,77,255,.34); --glow-2:rgba(64,110,255,.2); --glow-3:rgba(214,92,255,.18);
  --wire:rgba(239,235,250,.12); --wire-2:rgba(239,235,250,.2);
  --sticky-1:#E9CF6E; --sticky-2:#E9A8BC; --sticky-3:#9FCBEF;
  --glass:rgba(24,18,44,.56); --glass-strong:rgba(26,20,48,.86); --glass-soft:rgba(28,22,52,.72);
  --glass-solid:#1C1633; --glass-edge:rgba(214,200,255,.12); --glass-rim:rgba(0,0,0,.3);
  --sheen:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 40%);
  --shadow-1:0 1px 2px rgba(4,0,14,.5),0 10px 24px -10px rgba(4,0,14,.7),inset 0 1px 0 rgba(214,200,255,.06);
  --shadow-2:0 2px 6px rgba(4,0,14,.5),0 18px 40px -12px rgba(8,0,30,.75),inset 0 1px 0 rgba(214,200,255,.07);
  --shadow-3:0 4px 14px rgba(4,0,14,.55),0 30px 70px -18px rgba(10,0,40,.85),0 0 0 1px rgba(187,166,255,.05),inset 0 1px 0 rgba(214,200,255,.08);
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scroll-padding-top:88px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (hover:hover) and (pointer:fine){html{scrollbar-gutter:stable}}
main,.sec,.hero,.ftr{overflow-x:clip}
body{margin:0;font-family:var(--f-body);font-size:var(--t-md);line-height:1.75;color:var(--ink);background:transparent;overflow-x:clip;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;min-height:100dvh}
html[lang="en"] body{line-height:1.6}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a,button{color:inherit;text-decoration:none;font:inherit}
a:hover,a:focus,a:visited,a:active,button:hover,button:focus{text-decoration:none}
a,button,label,input,summary{touch-action:manipulation}
button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:22px;height:22px;flex:none}
[dir="rtl"] .flip{transform:scaleX(-1)}
[dir="ltr"] .flip-en{transform:scaleX(-1)}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;inset-inline-start:12px;top:-60px;z-index:200;background:var(--brand);color:var(--brand-ink);padding:10px 16px;border-radius:var(--r-sm);transition:transform .2s}
.skip:focus{transform:translateY(76px)}
.wrap{width:min(100% - 2*var(--gut),1200px);margin-inline:auto}
.d-only{display:none!important}
@media (min-width:900px){.d-only{display:inline-flex!important}.m-only{display:none!important}:root{--gut:32px;--hdr-h:76px}}
::selection{background:var(--brand);color:var(--brand-ink)}
.ltr{direction:ltr;unicode-bidi:isolate}
.num{font-variant-numeric:tabular-nums}

/* ---------- Language: both languages ship in the HTML; the root lang picks one ---------- */
html[lang="ar"] [data-l="en"],html[lang="en"] [data-l="ar"]{display:none!important}
html[lang="en"]{--f-head:"Alex","Alex Fallback","Plex",sans-serif}

/* ---------- Glass ---------- */
.glass{background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow-2),inset 0 1px 0 var(--glass-edge);background-image:var(--sheen)}
.glass-soft{background:var(--glass-soft);border:1px solid var(--glass-edge);box-shadow:var(--shadow-1);background-image:var(--sheen)}
.hdr::before,.dock,.sheet,.vw-bar,.vw-btn,.pop{-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
@media (min-width:900px){
  .hdr::before,.sheet,.vw-bar{-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}
  .glass,.glass-soft{-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.glass-soft,.hdr::before,.dock,.sheet,.vw-bar,.vw-btn,.hchip{background-color:var(--glass-solid)!important}
}

/* ---------- Concept background: the design canvas (dots, frames, connectors, two collaborators) ---------- */
.cv{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.cv-dots{position:absolute;inset:-48px;background-image:radial-gradient(circle,var(--dot) 1.1px,transparent 1.5px);background-size:24px 24px;animation:cvPan 5s linear infinite;will-change:transform}
@keyframes cvPan{from{transform:translate3d(0,0,0)}to{transform:translate3d(-24px,-24px,0)}}
[dir="rtl"] .cv-dots{animation-name:cvPanR}
@keyframes cvPanR{from{transform:translate3d(0,0,0)}to{transform:translate3d(24px,-24px,0)}}
.cv-art{position:absolute;inset:-4% -4%;width:108%;height:108%;fill:none;stroke:var(--frame-line);stroke-width:1.4;animation:cvDrift2 52s ease-in-out infinite alternate;will-change:transform}
.cv-art *{vector-effect:non-scaling-stroke}
.cv-art .cv-con{stroke-dasharray:6 7}
.cv-art .cv-node{fill:var(--bg);stroke:var(--brand-2);opacity:.55}
.cv-art .cv-lbl{fill:var(--ink-3);stroke:none;font:500 13px var(--f-body);opacity:.55}
.cv-glow{display:none}
/* the screen glow: three soft lights that keep travelling over the canvas, on their own */
.cv-l{position:absolute;width:70vmax;height:70vmax;border-radius:50%;will-change:transform;pointer-events:none}
.cv-l1{top:-34vmax;inset-inline-end:-22vmax;background:radial-gradient(closest-side,var(--glow-1),transparent);animation:cvOrb1 34s ease-in-out infinite alternate}
.cv-l2{bottom:-38vmax;inset-inline-start:-26vmax;background:radial-gradient(closest-side,var(--glow-2),transparent);animation:cvOrb2 41s ease-in-out infinite alternate}
.cv-l3{top:30%;left:30%;width:46vmax;height:46vmax;background:radial-gradient(closest-side,var(--glow-3),transparent);animation:cvOrb3 29s ease-in-out infinite alternate}
@keyframes cvOrb1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-24vw,26vh,0) scale(1.18)}}
@keyframes cvOrb2{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(30vw,-30vh,0) scale(.92)}}
@keyframes cvOrb3{from{transform:translate3d(-30vw,-20vh,0) scale(.9)}to{transform:translate3d(24vw,22vh,0) scale(1.15)}}
[data-theme="dark"] .cv{background:radial-gradient(120% 80% at 50% -10%,#1A1236 0%,transparent 60%)}
.cv-cur{position:absolute;inset-block-start:0;inset-inline-start:0;display:flex;align-items:flex-start;gap:2px;will-change:transform;animation:cvCur1 26s ease-in-out infinite;--c:var(--brand-2)}
.cv-cur svg{width:18px;height:18px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.cv-cur b{font:600 11px/1 var(--f-body);color:#fff;background:var(--cl,var(--label));padding:5px 7px;border-radius:6px 6px 6px 2px;margin-top:12px;white-space:nowrap}
.cv-cur-2{--c:#E0567C;--cl:#B8325A;animation:cvCur2 31s ease-in-out infinite;animation-delay:-9s}
.cv-cur path{fill:var(--c,var(--brand-2));stroke:#fff;stroke-width:1.4}
@keyframes cvDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-24px,-36px,0)}}
@keyframes cvDrift2{from{transform:translate3d(1%,.5%,0)}to{transform:translate3d(-1.2%,-1.4%,0)}}
@keyframes cvCur1{0%{transform:translate(78vw,22vh)}25%{transform:translate(58vw,48vh)}50%{transform:translate(70vw,78vh)}75%{transform:translate(88vw,56vh)}100%{transform:translate(78vw,22vh)}}
@keyframes cvCur2{0%{transform:translate(8vw,70vh)}30%{transform:translate(24vw,40vh)}60%{transform:translate(12vw,18vh)}100%{transform:translate(8vw,70vh)}}
@media (max-width:899px){.cv-cur-2{display:none}.cv-art{opacity:.75}}
.is-paused,.is-paused *,.is-paused::before,.is-paused::after{animation-play-state:paused!important}
.is-scrolling .cv-cur,.is-scrolling .xs-scene,.is-scrolling .xs-l,.is-scrolling .hchip,.is-scrolling .xs-cursor,.is-scrolling .shine::after,.is-scrolling .gt-live::after,.is-scrolling .fs-tap,.is-scrolling .ftr-name i{animation-play-state:paused!important}

/* ---------- Header ---------- */
.hdr{position:fixed;inset-inline:0;top:0;z-index:60;padding-top:env(safe-area-inset-top);transition:transform .5s var(--ease)}
.hdr::before{content:"";position:absolute;inset:0;background:var(--glass);background-image:var(--sheen);border-bottom:1px solid var(--glass-edge);box-shadow:var(--shadow-2);opacity:0;transition:opacity .35s var(--ease)}
.hdr.is-scrolled::before{opacity:1}
.hdr.is-hidden{transform:translateY(-110%)}
.hdr-in{position:relative;height:var(--hdr-h);display:flex;align-items:center;gap:var(--s-3);transition:transform .35s var(--ease);transform-origin:center top}
.hdr.is-scrolled .hdr-in{transform:scale(.96)}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:46px;font-family:var(--f-head);font-weight:700;font-size:1.2rem;line-height:1;letter-spacing:-.01em}
.mono{position:relative;width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--ink);color:var(--bg);font:700 1.15rem/1 var(--f-head);box-shadow:var(--shadow-1);transform:perspective(300px) rotateY(-14deg) rotateX(8deg)}
.mono::after{content:"";position:absolute;inset:-4px;border:1.5px solid var(--brand-2);border-radius:13px;opacity:.85}
.mono i{position:absolute;width:6px;height:6px;background:#fff;border:1.5px solid var(--brand-2);border-radius:1px;z-index:1}
.mono i:nth-of-type(1){top:-7px;left:-7px}.mono i:nth-of-type(2){top:-7px;right:-7px}.mono i:nth-of-type(3){bottom:-7px;left:-7px}.mono i:nth-of-type(4){bottom:-7px;right:-7px}
.hdr-nav{display:none}
.hdr-act{margin-inline-start:auto;display:flex;align-items:center;gap:var(--s-2)}
.icon-btn{width:46px;height:46px;border-radius:var(--r-pill);display:grid;place-items:center;color:var(--ink);background:var(--glass-soft);border:1px solid var(--glass-edge);box-shadow:var(--shadow-1);transition:scale .2s var(--ease),background-color .2s}
.icon-btn:active{scale:.92}
.lang-btn{font:600 .875rem/1 var(--f-body);width:auto;padding-inline:14px;min-width:46px}
.theme-btn .ic-sun{display:none}
[data-theme="dark"] .theme-btn .ic-sun{display:block}
[data-theme="dark"] .theme-btn .ic-moon{display:none}
@media (min-width:900px){
  .hdr-nav{display:flex;gap:2px;margin-inline-start:var(--s-6)}
  .hdr-nav a{position:relative;display:inline-flex;align-items:center;min-height:46px;padding:0 14px;border-radius:var(--r-pill);font-weight:500;color:var(--ink-2);transition:color .2s,background-color .2s}
  .hdr-nav a:hover{color:var(--ink);background:var(--brand-soft)}
  .hdr-nav a[aria-current="page"]{color:var(--brand);background:var(--brand-soft)}
  .icon-btn:hover{background:var(--surface)}
}
.progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:70;pointer-events:none}
.progress i{display:block;height:100%;background:var(--brand-2);transform-origin:0 50%;transform:scaleX(var(--p,0))}
[dir="rtl"] .progress i{transform-origin:100% 50%}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--r-pill);font-weight:600;font-size:1rem;line-height:1.2;transition:scale .18s var(--ease),translate .25s var(--ease),box-shadow .25s,background-color .2s;isolation:isolate;overflow:hidden;white-space:nowrap}
.btn:active{scale:.96}
.btn-p{background:var(--ink);color:var(--bg);box-shadow:var(--shadow-2)}
.btn-b{background:var(--brand);color:var(--brand-ink);box-shadow:var(--shadow-2)}
.btn-g{background:var(--glass-soft);color:var(--ink);border:1px solid var(--glass-edge);box-shadow:var(--shadow-1);background-image:var(--sheen)}
@media (hover:hover){.btn:hover{translate:0 -2px;box-shadow:var(--shadow-3)}}
.shine::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);transform:translateX(-120%);animation:shine 6.5s var(--ease) infinite 2.2s}
[dir="rtl"] .shine::after{animation-name:shineR}
@keyframes shine{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes shineR{0%,72%{transform:translateX(120%)}100%{transform:translateX(-120%)}}
.link{color:var(--brand);font-weight:600;border-radius:6px;padding:2px 4px;margin:-2px -4px;transition:background-color .2s}
.link:hover{background:var(--brand-soft)}

/* ---------- Hero (home) ---------- */
.hero{position:relative;padding-top:calc(var(--hdr-h) + env(safe-area-inset-top) + 4px);padding-bottom:var(--s-7)}
.hero-grid{display:grid;gap:0}
.hero-stage{position:relative;height:clamp(290px,80vw,380px);margin-inline:calc(-1*var(--gut));perspective:1300px;perspective-origin:50% 20%}
.hero-copy{position:relative;z-index:2;margin-top:-6px}
.hero-name{font-family:var(--f-head);font-weight:700;font-size:var(--t-hero);line-height:1.05;letter-spacing:-.02em;color:var(--ink);text-shadow:0 1px 0 var(--surface),0 2px 0 var(--bg-2),0 14px 30px rgba(18,28,52,.14)}
html[lang="en"] .hero-name{letter-spacing:-.035em;line-height:.98}
.hero-role{margin-top:var(--s-3);font-family:var(--f-head);font-weight:600;font-size:clamp(1.1rem,.95rem + .8vw,1.5rem);color:var(--brand);line-height:1.4}
.hero-lead{margin-top:var(--s-4);font-size:clamp(1.1rem,1rem + .55vw,1.35rem);line-height:1.65;color:var(--ink);max-width:24em;font-weight:500}
.hero-sub{margin-top:var(--s-2);color:var(--ink-2);max-width:30em}
.hero-cta{margin-top:var(--s-5);display:grid;gap:var(--s-3)}
.hero-cta .btn{width:100%}
@media (min-width:560px){.hero-cta{display:flex}.hero-cta .btn{width:auto}}
@media (min-width:900px){
  .hero{padding-top:calc(var(--hdr-h) + 40px);padding-bottom:var(--s-8);min-height:min(100dvh,920px);display:flex;align-items:center}
  .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:var(--s-6)}
  .hero-copy{margin-top:0;order:0}
  .hero-stage{order:1;height:min(620px,72vh);margin-inline:0}
}

/* the hero object: a screen exploded into its layers, on a slow turntable */
.xs-scene{--w:clamp(132px,35vw,190px);position:absolute;left:50%;top:56%;width:var(--w);aspect-ratio:9/18.5;margin-left:calc(var(--w)/-2);margin-top:calc(var(--w)*18.5/9/-2);transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(-36deg);animation:xsSway 14s ease-in-out infinite alternate;will-change:transform}
@media (min-width:900px){.xs-scene{--w:262px;top:52%}}
.xs-floor{position:absolute;inset:-14% -22%;border-radius:50%;background:radial-gradient(closest-side,rgba(18,28,52,.26),rgba(18,28,52,.08) 55%,transparent 72%);transform:translateZ(-40px)}
[data-theme="dark"] .xs-floor{background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,.2) 55%,transparent 72%)}
.xs-l{position:absolute;inset:0;border-radius:26px;transform:translateZ(calc(var(--i)*22px));animation:xsBreathe 7s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.12s);backface-visibility:hidden}
@keyframes xsBreathe{from{transform:translateZ(calc(var(--i)*20px))}to{transform:translateZ(calc(var(--i)*var(--gz,62px)))}}
@keyframes xsSway{from{transform:rotateX(58deg) rotateZ(-42deg)}to{transform:rotateX(52deg) rotateZ(-30deg)}}
.xs-base{background:var(--surface);box-shadow:0 0 0 8px var(--ink),0 30px 60px -10px rgba(18,28,52,.45)}
[data-theme="dark"] .xs-base{box-shadow:0 0 0 8px #2A2F38,0 30px 60px -10px rgba(0,0,0,.7)}
.xs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:0 14px;opacity:.95}
.xs-grid i{background:rgba(124,92,255,.14);border-inline:1px solid rgba(124,92,255,.32)}
.xs-wire{padding:16px 14px;display:flex;flex-direction:column;gap:9px}
.xs-wire i{display:block;border:1.5px dashed var(--wire-2);border-radius:8px;background:color-mix(in srgb,var(--surface) 30%,transparent)}
.xs-wire i:nth-child(1){height:9%}.xs-wire i:nth-child(2){height:30%}.xs-wire i:nth-child(3){height:14%}.xs-wire i:nth-child(4){height:14%}.xs-wire i:nth-child(5){margin-top:auto;height:8%}
.xs-ui{padding:16px 14px;display:flex;flex-direction:column;gap:9px;outline:1.5px solid var(--brand-2);outline-offset:5px}
.xs-ui .u-top{display:flex;align-items:center;gap:7px;height:9%}
.xs-ui .u-av{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#FFC9A8,#E0567C)}
.xs-ui .u-ln{height:7px;border-radius:4px;background:var(--ink);opacity:.85;width:46%}
.xs-ui .u-hero{height:30%;border-radius:14px;background:var(--brand);position:relative;overflow:hidden;box-shadow:0 10px 20px -10px rgba(23,87,214,.8)}
.xs-ui .u-hero::before{content:"";position:absolute;inset-inline-end:-18%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.18)}
.xs-ui .u-hero::after{content:"";position:absolute;inset-inline-start:12%;bottom:18%;width:46%;height:8px;border-radius:4px;background:rgba(255,255,255,.85);box-shadow:0 -14px 0 -1px rgba(255,255,255,.5)}
.xs-ui .u-card{height:14%;border-radius:12px;background:var(--surface-2);display:flex;align-items:center;gap:8px;padding:0 8px;box-shadow:var(--shadow-1)}
.xs-ui .u-card b{width:28%;aspect-ratio:1;border-radius:8px;background:var(--c)}
.xs-ui .u-card s{flex:1;height:7px;border-radius:4px;background:var(--ink-3);opacity:.5}
.xs-ui .u-nav{margin-top:auto;height:8%;border-radius:12px;background:var(--ink);display:flex;justify-content:space-around;align-items:center}
.xs-ui .u-nav i{width:8px;height:8px;border-radius:50%;background:var(--bg);opacity:.5}
.xs-ui .u-nav i:first-child{opacity:1;background:var(--brand-2)}
.xs-h{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid var(--brand-2);border-radius:2px}
.xs-h.h1{top:-10px;left:-10px}.xs-h.h2{top:-10px;right:-10px}.xs-h.h3{bottom:-10px;left:-10px}.xs-h.h4{bottom:-10px;right:-10px}
.xs-dim{position:absolute;bottom:-34px;left:50%;transform:translateX(-50%);background:var(--label);color:#fff;font:600 11px/1 var(--f-body);padding:5px 7px;border-radius:5px;white-space:nowrap}
.hchip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 12px;border-radius:var(--r-md);background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--shadow-2);background-image:var(--sheen);animation:bob 6s ease-in-out infinite alternate;line-height:1.25;width:max-content}
.hchip .ic{width:20px;height:20px;color:var(--brand)}
.hchip b{display:block;font:700 1.15rem/1.1 var(--f-head);color:var(--ink)}
.hchip small{display:block;font-size:var(--t-xs);color:var(--ink-2)}
.hchip-1{inset-inline-start:calc(var(--gut) + 2px);top:10%}
.hchip-2{inset-inline-end:calc(var(--gut) + 2px);top:44%;animation-delay:-2s}
.hchip-3{inset-inline-start:calc(var(--gut) + 18px);bottom:6%;animation-delay:-4s}
@media (min-width:900px){.hchip-1{inset-inline-start:0}.hchip-2{inset-inline-end:-2%}.hchip-3{inset-inline-start:8%;bottom:9%}}
.hchip .num{display:inline-block;width:1.4em}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.xs-cursor{position:absolute;z-index:4;inset-inline-start:52%;top:30%;display:flex;gap:2px;animation:xsCur 9s ease-in-out infinite;will-change:transform}
.xs-cursor svg{width:18px;height:18px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.xs-cursor path{fill:var(--brand-2);stroke:#fff;stroke-width:1.4}
.xs-cursor b{font:600 11px/1 var(--f-body);color:#fff;background:var(--label);padding:5px 7px;border-radius:6px 6px 6px 2px;margin-top:12px;white-space:nowrap}
@keyframes xsCur{0%,100%{transform:translate(0,0)}30%{transform:translate(-40px,38px)}55%{transform:translate(18px,70px)}80%{transform:translate(34px,12px)}}

/* ---------- Sections ---------- */
.sec{position:relative;padding-block:var(--s-8)}
@media (min-width:900px){.sec{padding-block:var(--s-9)}}
.sec-h{font-family:var(--f-head);font-weight:700;font-size:var(--t-2xl);line-height:1.2;letter-spacing:-.01em}
html[lang="en"] .sec-h{letter-spacing:-.03em;line-height:1.08}
.sec-p{margin-top:var(--s-3);color:var(--ink-2);font-size:var(--t-lg);max-width:34em;line-height:1.65}
.sec-head{margin-bottom:var(--s-6)}
@media (min-width:900px){.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-6);margin-bottom:var(--s-7)}}
.sec-head .btn{margin-top:var(--s-4);flex:none}
.page-head{padding-top:calc(var(--hdr-h) + env(safe-area-inset-top) + var(--s-6));padding-bottom:var(--s-5)}
.page-h{font-family:var(--f-head);font-weight:700;font-size:clamp(2.6rem,1.8rem + 4vw,4.8rem);line-height:1.1;letter-spacing:-.02em;view-transition-name:pageh}
html[lang="en"] .page-h{letter-spacing:-.04em;line-height:1}
.page-p{margin-top:var(--s-3);font-size:var(--t-lg);color:var(--ink-2);max-width:32em;line-height:1.65}

/* ---------- Frame: a project cover shown as a design-tool frame. The wireframe sits under the image ---------- */
.fr{display:block;position:relative;aspect-ratio:404/316;border-radius:var(--r-sm);overflow:hidden;background:var(--surface);isolation:isolate}
.fr-wire{position:absolute;inset:0;display:grid;grid-template-rows:12% 1fr 26%;gap:5%;padding:6%;background:color-mix(in srgb,var(--pc) 9%,var(--surface));z-index:0}
.fr-wire::before{content:"";border-radius:6px;background:color-mix(in srgb,var(--pc) 18%,transparent);border:1.5px dashed color-mix(in srgb,var(--pc) 40%,transparent)}
.fr-wire>b{display:flex;align-items:center;justify-content:center;padding:4%;text-align:center;border-radius:10px;border:1.5px dashed color-mix(in srgb,var(--pc) 45%,transparent);font:700 clamp(1.1rem,.9rem + 1.2vw,1.8rem)/1.15 var(--f-head);color:color-mix(in srgb,var(--pc) 72%,var(--ink));letter-spacing:-.01em}
.fr-wire>span{display:grid;grid-template-columns:repeat(3,1fr);gap:6%}
.fr-wire>span i{border-radius:8px;background:color-mix(in srgb,var(--pc) 14%,transparent);border:1.5px dashed color-mix(in srgb,var(--pc) 32%,transparent)}
.fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .7s var(--ease)}
.fr.is-loaded img{opacity:1}
.fr.is-noimg img{display:none}

/* selection handles (the designer's "this one") on hover / centred card */
.sel{position:absolute;inset:0;z-index:2;pointer-events:none;border:2px solid var(--brand-2);border-radius:inherit;opacity:0;transition:opacity .25s var(--ease)}
.sel i{position:absolute;width:10px;height:10px;background:#fff;border:2px solid var(--brand-2);border-radius:2px}
.sel i:nth-child(1){top:-1px;left:-1px}.sel i:nth-child(2){top:-1px;right:-1px}.sel i:nth-child(3){bottom:-1px;left:-1px}.sel i:nth-child(4){bottom:-1px;right:-1px}

/* ---------- Home: selected work as a stacked deck (sticky cards that settle back as the next one arrives) ---------- */
.dk{display:grid;gap:var(--s-5)}
.dk-card{position:sticky;top:calc(var(--hdr-h) + 14px + var(--k)*10px);--p:0}
.dk-in{position:relative;display:grid;gap:var(--s-4);padding:12px 12px 18px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--glass-edge);box-shadow:var(--shadow-3);transform-origin:50% 0;transform:scale(calc(1 - var(--p)*.07));will-change:transform}
.dk-in::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ink);opacity:calc(var(--p)*.22);pointer-events:none;z-index:3}
[data-theme="dark"] .dk-in::after{background:#000;opacity:calc(var(--p)*.4)}
.dk-in .fr{border-radius:14px}
.dk-txt{display:flex;flex-direction:column;gap:6px;padding-inline:6px}
.dk-t{font-family:var(--f-head);font-weight:700;font-size:clamp(1.35rem,1.1rem + 1vw,2rem);line-height:1.2;letter-spacing:-.01em}
.dk-k{color:var(--ink-2)}
.dk-foot{margin-top:var(--s-3);display:flex;align-items:center;gap:var(--s-3)}
.dk-open{min-height:48px}
.dk-team{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);color:var(--ink-3)}
.dk-team .ic{width:18px;height:18px}
@media (min-width:900px){
  .dk{gap:var(--s-7)}
  .dk-in{grid-template-columns:1.45fr 1fr;align-items:center;gap:var(--s-6);padding:16px}
  .dk-txt{padding:var(--s-5)}
  .dk-foot{margin-top:var(--s-5)}
}
@media (hover:hover){.dk-in:hover .sel{opacity:1}}

/* ---------- Home: from a question to a screen (fidelity scrubber) ---------- */
.fs{display:grid;gap:var(--s-6);align-items:center}
@media (min-width:900px){.fs{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s-8)}}
.fs-stage{position:relative;display:grid;place-items:center;padding:var(--s-7) 0 var(--s-6);perspective:1200px}
.fs-phone{position:relative;width:min(70vw,280px);aspect-ratio:9/18.5;border-radius:38px;background:var(--surface);box-shadow:0 0 0 9px var(--ink),var(--shadow-3);transform:rotateY(-8deg) rotateX(4deg);transform-style:flat;overflow:hidden;display:grid}
[data-theme="dark"] .fs-phone{box-shadow:0 0 0 9px #2A2F38,var(--shadow-3)}
[dir="rtl"] .fs-phone{transform:rotateY(8deg) rotateX(4deg)}
.fs-st{grid-area:1/1;position:relative;padding:44px 16px 18px;display:flex;flex-direction:column;gap:10px;opacity:0;transform:scale(.96) translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none}
.fs-st.on{opacity:1;transform:none}
.fs-notch{position:absolute;top:12px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:12px;background:var(--ink);z-index:5}
[data-theme="dark"] .fs-notch{background:#2A2F38}
/* research: sticky notes */
.fs-research{justify-content:center;align-items:center;gap:16px;background:radial-gradient(circle,var(--dot) 1px,transparent 1.4px) 0 0/16px 16px}
.stk{width:78%;padding:14px 14px 18px;font:600 .95rem/1.45 var(--f-body);color:var(--sticky-ink);background:var(--c);box-shadow:0 10px 18px -10px rgba(0,0,0,.35);border-radius:2px 2px 14px 2px}
.stk:nth-child(1){--c:var(--sticky-1);transform:rotate(-3deg);align-self:flex-start}
.stk:nth-child(2){--c:var(--sticky-2);transform:rotate(2.5deg);align-self:flex-end}
.stk:nth-child(3){--c:var(--sticky-3);transform:rotate(-1.5deg)}
/* flow */
.fs-flow{justify-content:center;align-items:center;background:radial-gradient(circle,var(--dot) 1px,transparent 1.4px) 0 0/16px 16px}
.fs-flow svg{width:100%;height:auto;overflow:visible}
.fs-flow .fl-box{fill:var(--surface);stroke:var(--ink);stroke-width:1.6}
.fs-flow .fl-in{fill:var(--wire)}
.fs-flow .fl-ar{fill:none;stroke:var(--brand-2);stroke-width:2;stroke-linecap:round}
.fs-flow .fl-dot{fill:var(--brand-2)}
.fs-flow text{font:600 11px var(--f-body);fill:var(--ink-2)}
/* wireframe */
.w-b{border-radius:10px;background:var(--wire);flex:none}
.w-row{display:flex;gap:10px;align-items:center}
.w-c{width:40px;height:40px;border-radius:50%;background:var(--wire-2);flex:none}
.w-l{height:9px;border-radius:5px;background:var(--wire-2)}
/* hi-fi UI */
.ui-hi{display:flex;align-items:center;justify-content:space-between}
.ui-hi b{font:700 1.15rem/1.2 var(--f-head)}
.ui-hi small{display:block;font-size:.75rem;color:var(--ink-3)}
.ui-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#FFC9A8,#E0567C)}
.ui-search{height:40px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--ink-3);font-size:.8rem}
.ui-search .ic{width:16px;height:16px}
.ui-feat{height:31%;border-radius:18px;background:var(--brand);color:var(--brand-ink);padding:14px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;box-shadow:0 14px 26px -14px rgba(23,87,214,.9)}
.ui-feat::before{content:"";position:absolute;inset-inline-end:-20%;top:-35%;width:70%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.16)}
.ui-feat b{font:700 1.05rem/1.25 var(--f-head);position:relative}
.ui-feat small{opacity:.85;font-size:.75rem;position:relative}
.ui-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;background:var(--surface-2)}
.ui-item i{width:40px;height:40px;border-radius:10px;background:var(--c);flex:none}
.ui-item b{display:block;font-size:.82rem;font-weight:600;line-height:1.3}
.ui-item small{display:block;font-size:.7rem;color:var(--ink-3);line-height:1.3}
.ui-nav{margin-top:auto;height:46px;border-radius:16px;background:var(--ink);display:flex;justify-content:space-around;align-items:center;color:var(--bg)}
.ui-nav .ic{width:18px;height:18px;opacity:.55}
.ui-nav .ic:first-child{opacity:1;color:var(--brand-2)}
[data-theme="dark"] .ui-nav{background:#2A2F38;color:var(--ink)}
/* prototype: the tap and the next screen sliding in */
.fs-proto .fs-next{position:absolute;inset:0;padding:44px 16px 18px;background:var(--surface);display:flex;flex-direction:column;gap:10px;transform:translateX(102%);box-shadow:-20px 0 40px -20px rgba(0,0,0,.3)}
[dir="rtl"] .fs-proto .fs-next{transform:translateX(-102%)}
.fs-proto.on .fs-next{animation:fsNext 4.8s var(--ease) infinite}
[dir="rtl"] .fs-proto.on .fs-next{animation-name:fsNextR}
@keyframes fsNext{0%,38%{transform:translateX(102%)}50%,86%{transform:translateX(0)}100%{transform:translateX(102%)}}
@keyframes fsNextR{0%,38%{transform:translateX(-102%)}50%,86%{transform:translateX(0)}100%{transform:translateX(-102%)}}
.fs-next .nx-img{height:38%;border-radius:18px;background:var(--brand);position:relative;overflow:hidden}
.fs-next .nx-img::after{content:"";position:absolute;inset:auto 14% 14% 14%;height:10px;border-radius:5px;background:rgba(255,255,255,.8)}
.fs-next .nx-btn{margin-top:auto;height:44px;border-radius:14px;background:var(--ink)}
.fs-tap{position:absolute;z-index:4;top:calc(44px + 40px + 10px + 40px + 10px + 18%);left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(124,92,255,.35);border:2px solid var(--brand-2);opacity:0;transform:scale(.4)}
.fs-proto.on .fs-tap{animation:fsTap 4.8s var(--ease) infinite}
@keyframes fsTap{0%,18%{opacity:0;transform:scale(.4)}26%{opacity:1;transform:scale(1)}36%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
.fs-dev{position:relative;perspective:1200px}
.fs-tag{position:absolute;z-index:6;top:-40px;inset-inline-start:-4px;padding:6px 10px;border-radius:8px;background:var(--label);color:#fff;font:600 .78rem/1 var(--f-body);box-shadow:var(--shadow-2);white-space:nowrap}
/* controls */
.fs-ctl{display:flex;flex-direction:column;gap:var(--s-4)}
.fs-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:4px;border-radius:var(--r-md);background:var(--glass-soft);border:1px solid var(--glass-edge);box-shadow:var(--shadow-1);position:relative}
.fs-steps button{position:relative;z-index:1;min-height:48px;padding:6px 2px;border-radius:12px;font-size:.8rem;font-weight:600;color:var(--ink-2);line-height:1.2;transition:color .25s}
.fs-steps button[aria-pressed="true"]{color:var(--brand-ink)}
.fs-pill{position:absolute;z-index:0;top:4px;bottom:4px;inset-inline-start:4px;width:calc((100% - 8px - 16px)/5);border-radius:12px;background:var(--brand);box-shadow:var(--shadow-2);transform:translateX(calc(var(--s,0)*(100% + 4px)));transition:transform .45s var(--spring)}
[dir="rtl"] .fs-pill{transform:translateX(calc(var(--s,0)*(-100% - 4px)))}
@media (min-width:560px){.fs-steps button{font-size:.9rem}}
.fs-range{width:100%;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.fs-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--line-2)}
.fs-range::-moz-range-track{height:6px;border-radius:3px;background:var(--line-2)}
.fs-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:var(--surface);border:3px solid var(--brand);box-shadow:var(--shadow-2)}
.fs-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--surface);border:3px solid var(--brand);box-shadow:var(--shadow-2)}
.fs-caps{display:grid}
.fs-cap{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.fs-cap.on{opacity:1;transform:none;pointer-events:auto}
.fs-cap h3{font-family:var(--f-head);font-weight:700;font-size:var(--t-xl);line-height:1.3}
.fs-cap p{margin-top:var(--s-2);color:var(--ink-2);font-size:var(--t-lg);line-height:1.6}
.fs-cap ul{margin-top:var(--s-3);display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-size:var(--t-sm);font-weight:500;color:var(--ink-2);direction:ltr;unicode-bidi:isolate}
.fs-note{font-size:var(--t-xs);color:var(--ink-3)}

/* ---------- Experience timeline (rows of parallel roles) ---------- */
.gt{position:relative;padding:var(--s-4);border-radius:var(--r-lg)}
.gt-axis{display:grid;grid-template-columns:repeat(6,1fr);margin-bottom:var(--s-3);font-size:var(--t-xs);color:var(--ink-3);font-weight:500}
.gt-axis span{padding-inline-start:4px;border-inline-start:1px solid var(--line-2)}
.gt-rows{position:relative;display:grid;gap:10px}
.gt-rows::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100%/6));pointer-events:none}
.gt-row{position:relative;display:block;padding-block:4px;border-radius:var(--r-sm)}
.gt-lbl{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding-inline:2px;margin-bottom:4px;line-height:1.35}
.gt-lbl b{font-weight:600;font-size:var(--t-sm)}
.gt-lbl small{font-size:var(--t-xs);color:var(--ink-3)}
.gt-track{position:relative;display:block;height:14px}
.gt-bar{position:absolute;top:0;bottom:0;inset-inline-start:calc(var(--s)*100%);width:calc((var(--e) - var(--s))*100%);border-radius:7px;background:var(--brand);box-shadow:0 6px 14px -6px rgba(23,87,214,.7);transform-origin:0 50%}
[dir="rtl"] .gt-bar{transform-origin:100% 50%}
.gt-it .gt-bar{background:var(--ink-3);box-shadow:none;opacity:.55}
.gt-live::after{content:"";position:absolute;inset-inline-end:-5px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--brand-2);border:3px solid var(--surface);box-shadow:0 0 0 0 rgba(124,92,255,.5);animation:live 2.4s ease-out infinite}
@keyframes live{0%{transform:scale(.85)}50%{transform:scale(1.15)}100%{transform:scale(.85)}}
a.gt-row:hover{background:var(--brand-soft)}
.gt-key{margin-top:var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-4);font-size:var(--t-xs);color:var(--ink-2)}
.gt-key span{display:inline-flex;align-items:center;gap:8px}
.gt-key i{width:22px;height:10px;border-radius:5px;background:var(--brand)}
.gt-key i.it{background:var(--ink-3);opacity:.55}
.gt-key i.live{width:12px;height:12px;border-radius:50%;background:var(--brand-2)}
@media (min-width:900px){
  .gt{padding:var(--s-6)}
  .gt-axis{margin-inline-start:260px}
  .gt-rows::before{inset-inline-start:260px}
  .gt-row{display:grid;grid-template-columns:260px 1fr;align-items:center;padding-block:8px}
  .gt-lbl{margin:0;padding-inline-end:var(--s-4);flex-direction:column;gap:0}
  .gt-track{height:18px}
  .gt-bar{border-radius:9px}
}

/* ---------- Role cards (experience page) ---------- */
.roles{display:grid;gap:var(--s-4)}
@media (min-width:900px){.roles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);grid-auto-rows:1fr}}
.role{display:flex;flex-direction:column;padding:var(--s-5);border-radius:var(--r-lg);scroll-margin-top:96px;transition:translate .3s var(--ease),box-shadow .3s}
.role-top{display:flex;align-items:flex-start;gap:var(--s-3)}
.role-ic{width:48px;height:48px;flex:none;border-radius:14px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.role-it .role-ic{background:var(--line);color:var(--ink-2)}
.role h3{font-family:var(--f-head);font-weight:700;font-size:var(--t-xl);line-height:1.25}
.role-co{font-weight:600;color:var(--brand)}
.role-it .role-co{color:var(--ink-2)}
.role-meta{margin-top:var(--s-1);font-size:var(--t-sm);color:var(--ink-3)}
.role ul{margin-top:var(--s-4);display:grid;gap:var(--s-2)}
.role li{position:relative;padding-inline-start:20px;color:var(--ink-2);line-height:1.65}
.role li::before{content:"";position:absolute;inset-inline-start:2px;top:.72em;width:8px;height:8px;border-radius:2px;border:1.5px solid var(--brand-2)}
.role-yrs{margin-top:auto;padding-top:var(--s-4);display:flex;align-items:center;gap:8px;font-weight:600;font-size:var(--t-sm);color:var(--ink-2)}
.role-yrs .ic{width:18px;height:18px;color:var(--ink-3)}
.role.is-target{box-shadow:0 0 0 2px var(--brand-2),var(--shadow-2)}
@media (hover:hover){.role:hover{translate:0 -4px;box-shadow:var(--shadow-3)}}

/* ---------- Cards (about) ---------- */
.grid-2{display:grid;gap:var(--s-4)}
@media (min-width:900px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5);grid-auto-rows:1fr}}
.card{display:flex;flex-direction:column;padding:var(--s-5);border-radius:var(--r-lg)}
.card h3{font-family:var(--f-head);font-weight:700;font-size:var(--t-xl);line-height:1.3;display:flex;align-items:center;gap:10px}
.card h3 .ic{color:var(--brand)}
.card p{margin-top:var(--s-2);color:var(--ink-2);line-height:1.7}
.card .chips{margin-top:var(--s-4);display:flex;flex-wrap:wrap;gap:6px}
.card-foot{margin-top:auto;padding-top:var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-3)}
.about{display:grid;gap:var(--s-6);align-items:center}
@media (min-width:900px){.about{grid-template-columns:auto 1fr;gap:var(--s-8)}}
.ph{position:relative;width:min(56vw,260px);aspect-ratio:1;border-radius:32px;margin-inline:auto;transform:perspective(700px) rotateY(-10deg) rotateX(4deg);box-shadow:var(--shadow-3);background:var(--ink);overflow:hidden;view-transition-name:portrait}
[dir="rtl"] .ph{transform:perspective(700px) rotateY(10deg) rotateX(4deg)}
.ph-mono{position:absolute;inset:0;display:grid;place-items:center;font:700 7rem/1 var(--f-head);color:var(--bg)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.ph.is-loaded img{opacity:1}
.ph-sel{position:absolute;inset:-10px;border:2px solid var(--brand-2);border-radius:38px;pointer-events:none}
.ph-wrap{position:relative;padding:12px}
.about-txt p{font-size:var(--t-lg);line-height:1.75;color:var(--ink-2);max-width:36em}
.about-txt p+p{margin-top:var(--s-4)}
.about-txt p:first-child{color:var(--ink);font-weight:500;font-size:clamp(1.2rem,1.05rem + .6vw,1.45rem)}
.faq{display:grid;gap:var(--s-3);max-width:860px}
.faq details{border-radius:var(--r-md);overflow:hidden}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:60px;padding:var(--s-3) var(--s-5);font-weight:600;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{transition:transform .3s var(--ease);color:var(--brand);flex:none}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq details p{padding:0 var(--s-5) var(--s-5);color:var(--ink-2);line-height:1.75}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .35s var(--ease),content-visibility .35s allow-discrete}
.faq details[open]::details-content{block-size:auto}
@supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}}

/* ---------- Work page: the canvas of frames ---------- */
.wk-stage{perspective:1600px;perspective-origin:50% 0}
.wk-plane{transform-origin:50% 0}
.wk-grid{display:grid;gap:var(--s-6) var(--s-5)}
.wk-item{position:relative;display:flex;flex-direction:column;gap:10px;text-align:start;width:100%;border-radius:var(--r-md)}
.wk-name{display:flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:500;color:var(--ink-3);padding-inline:2px;direction:ltr;unicode-bidi:isolate;justify-content:flex-end}
[dir="ltr"] .wk-name{justify-content:flex-start}
.wk-name .ic{width:14px;height:14px}
.wk-item .fr{box-shadow:var(--shadow-2);transition:translate .35s var(--ease),box-shadow .35s}
.wk-t{font-family:var(--f-head);font-weight:700;font-size:var(--t-lg);line-height:1.3;padding-inline:2px}
.wk-k{font-size:var(--t-sm);color:var(--ink-2);padding-inline:2px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3em}
@media (hover:hover){.wk-item:hover .fr{translate:0 -6px;box-shadow:var(--shadow-3)}.wk-item:hover .sel{opacity:1}}
@media (min-width:640px) and (max-width:899px){.wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.wk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-7) var(--s-6)}}
/* phones: a 3D swipe row (centred frame flat and sharp, neighbours turned away) */
@media (max-width:639px){
  .wk-grid{grid-auto-flow:column;grid-auto-columns:100%;grid-template-columns:none;gap:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-inline:9%;margin-inline:calc(-1*var(--gut));scrollbar-width:none;padding-block:10px 18px}
  .wk-grid::-webkit-scrollbar{display:none}
  .wk-grid>li{scroll-snap-align:center;padding-inline:7px}
  .wk-item.is-mid .sel{opacity:1}
}
.dots{display:flex;justify-content:center;gap:7px;margin-top:var(--s-2)}
.dots i{width:7px;height:7px;border-radius:4px;background:var(--line-2);transition:width .3s var(--ease),background-color .3s}
.dots i.on{width:22px;background:var(--brand)}
@media (min-width:640px){.dots{display:none}}
.wk-index{margin-top:var(--s-7);display:grid;gap:2px}
.wk-index button{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:58px;padding:var(--s-2) var(--s-3);border-radius:var(--r-md);text-align:start;transition:background-color .2s}
.wk-index button:hover{background:var(--brand-soft)}
.wk-index .n{width:2.2em;flex:none;color:var(--ink-3);font-size:var(--t-sm)}
.wk-index b{font-weight:600;flex:1;min-width:0}
.wk-index small{display:block;font-weight:400;color:var(--ink-3);font-size:var(--t-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-index .ic{color:var(--ink-3)}
@media (min-width:640px){.wk-index{display:none}}

/* ---------- Project viewer (full screen, swipe, keys) ---------- */
.vw{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);opacity:0;transition:opacity .35s var(--ease)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.vw{background:var(--bg)}}
.vw.open{opacity:1}
.vw-bar{position:relative;z-index:2;margin:calc(10px + env(safe-area-inset-top)) var(--gut) 0;display:flex;align-items:center;gap:var(--s-3);padding:6px 6px 6px 16px;border-radius:var(--r-pill);background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow-2)}
[dir="rtl"] .vw-bar{padding:6px 16px 6px 6px}
.vw-count{font-weight:600;font-size:var(--t-sm);color:var(--ink-2);width:4.4em}
.vw-title{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vw-stage{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none}
.vw-stage::-webkit-scrollbar{display:none}
.vw-fig{scroll-snap-align:center;display:flex;flex-direction:column;justify-content:center;gap:var(--s-5);padding:var(--s-5) var(--gut) calc(var(--s-6) + env(safe-area-inset-bottom));overflow-y:auto;min-height:0}
.vw-fig .fr{width:min(100%,calc((100dvh - 330px)*1.278),980px);margin-inline:auto;box-shadow:var(--shadow-3);border-radius:14px;flex:none}
.vw-info{width:min(100%,980px);margin-inline:auto;display:grid;gap:var(--s-3)}
.vw-info h2{font-family:var(--f-head);font-weight:700;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.4rem);line-height:1.2}
.vw-info p{color:var(--ink-2);font-size:var(--t-lg);line-height:1.6}
.vw-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-1)}
@media (max-width:559px){.vw-actions .btn{width:100%}}
.vw-btn{position:absolute;z-index:3;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;display:none;place-items:center;background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow-2);transition:scale .2s}
.vw-btn:active{scale:.92}
.vw-prev{inset-inline-start:var(--gut)}.vw-next{inset-inline-end:var(--gut)}
@media (min-width:900px) and (hover:hover){.vw-btn{display:grid}.vw-fig{padding-inline:96px}}

/* ---------- Bottom sheet (contact) ---------- */
.scrim{position:fixed;inset:0;z-index:100;background:rgba(10,14,22,.42);opacity:0;transition:opacity .3s}
.scrim.open{opacity:1}
.sheet{position:fixed;z-index:101;inset-inline:0;bottom:0;max-height:88dvh;display:flex;flex-direction:column;padding:10px var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--shadow-3);transform:translateY(105%);transition:transform .45s var(--spring)}
.sheet.open{transform:none}
.sheet-grab{width:44px;height:5px;border-radius:3px;background:var(--line-2);margin:0 auto 10px}
.sheet-top{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.sheet-top h2{flex:1;font-family:var(--f-head);font-weight:700;font-size:var(--t-xl)}
.sheet-body{overflow-y:auto;overscroll-behavior:contain}
@media (min-width:900px){
  .sheet{inset-inline:auto;left:50%;bottom:auto;top:50%;width:min(560px,92vw);border-radius:var(--r-xl);padding:var(--s-5);transform:translate(-50%,-46%) scale(.96);opacity:0;transition:transform .4s var(--spring),opacity .3s}
  .sheet.open{transform:translate(-50%,-50%);opacity:1}
  .sheet-grab{display:none}
}
html.lock,html.lock body{overflow:hidden}
.cc{display:grid;gap:var(--s-2)}
.cc li{display:flex}
.cc a,.cc button{flex:1;display:flex;align-items:center;gap:var(--s-3);min-height:64px;padding:var(--s-2) var(--s-3);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);text-align:start;transition:translate .2s var(--ease),border-color .2s,box-shadow .2s}
.cc a:active,.cc button:active{scale:.98}
@media (hover:hover){.cc a:hover,.cc button:hover{border-color:var(--brand-tint);box-shadow:var(--shadow-1);translate:0 -2px}}
.cc .cc-ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.cc .cc-wa .cc-ic{background:rgba(14,116,64,.1);color:var(--wa)}
[data-theme="dark"] .cc .cc-wa .cc-ic{color:#4CC38A}
.cc b{display:block;font-weight:600;line-height:1.3}
.cc small{display:block;color:var(--ink-3);font-size:var(--t-sm);line-height:1.4;direction:ltr;unicode-bidi:isolate;text-align:start}
.cc .ic.go{margin-inline-start:auto;color:var(--ink-3)}
.toast{position:fixed;z-index:130;left:50%;bottom:calc(var(--dock-h) + 30px + env(safe-area-inset-bottom));padding:10px 18px;border-radius:var(--r-pill);background:var(--ink);color:var(--bg);font-weight:600;font-size:var(--t-sm);transform:translate(-50%,20px);opacity:0;transition:transform .35s var(--spring),opacity .25s;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ---------- Contact band (home) ---------- */
.cta-band{position:relative;padding:var(--s-7) var(--s-5);border-radius:var(--r-xl);overflow:hidden;display:grid;gap:var(--s-5);background:var(--ink);color:var(--bg);box-shadow:var(--shadow-3);border:1px solid transparent}
[data-theme="dark"] .cta-band{background:var(--surface);color:var(--ink);border:1px solid var(--glass-edge)}
.cta-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.14) 1.1px,transparent 1.5px);background-size:22px 22px;opacity:.7}
.cta-band>*{position:relative}
.cta-band h2{font-family:var(--f-head);font-weight:700;font-size:var(--t-2xl);line-height:1.2;max-width:16em}
html[lang="en"] .cta-band h2{letter-spacing:-.03em}
.cta-band p{opacity:.8;font-size:var(--t-lg);max-width:30em}
.cta-band .btns{display:grid;gap:var(--s-3)}
.cta-band .btn-b{background:var(--brand-2);color:#04122A}
[data-theme="dark"] .cta-band .btn-b{background:var(--brand);color:var(--brand-ink)}
.cta-band .btn-g{background:rgba(255,255,255,.08);color:inherit;border-color:rgba(255,255,255,.18);background-image:none}
[data-theme="dark"] .cta-band .btn-g{background:var(--glass-soft);border-color:var(--glass-edge)}
.cta-sel{position:absolute;inset:14px;border:1.5px solid rgba(61,174,255,.55);border-radius:22px;pointer-events:none}
@media (min-width:560px){.cta-band .btns{display:flex}}
@media (min-width:900px){.cta-band{padding:var(--s-8);grid-template-columns:1fr auto;align-items:end}}

/* ---------- Footer ---------- */
.ftr{position:relative;margin-top:var(--s-8);padding:var(--s-7) 0 calc(var(--dock-h) + var(--s-6) + env(safe-area-inset-bottom));background:var(--bg-2);border-top:1px solid var(--line)}
@media (min-width:900px){.ftr{padding-bottom:var(--s-6)}}
.ftr-name{font-family:var(--f-head);font-weight:700;font-size:clamp(2.4rem,10.4vw,9.2rem);line-height:1.15;letter-spacing:-.03em;color:var(--ink);padding-bottom:.08em;white-space:nowrap}
html[lang="en"] .ftr-name{letter-spacing:-.05em;line-height:1;font-size:clamp(2.6rem,13.2vw,11rem)}
.ftr-name i{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--brand-2);margin-inline-start:.06em;animation:live 2.4s ease-out infinite}
.ftr-line{margin-top:var(--s-2);color:var(--ink-2);font-size:var(--t-lg)}
.ftr-grid{margin-top:var(--s-6);display:grid;gap:var(--s-6)}
@media (min-width:900px){.ftr-grid{grid-template-columns:1.6fr 1fr;align-items:start}}
.ftr .cc{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.ftr-nav{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.ftr-nav a{display:flex;align-items:center;min-height:44px;padding:0 var(--s-3);border-radius:var(--r-sm);font-weight:500;color:var(--ink-2)}
.ftr-nav a:hover{background:var(--brand-soft);color:var(--ink)}
.ftr-bot{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);font-size:var(--t-sm);color:var(--ink-3)}
.credit a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);font-weight:600;border-radius:6px;padding:0 4px;transition:background-color .2s,color .2s}
.credit a:hover{background:var(--brand-soft);color:var(--brand)}

/* ---------- Dock (phones) ---------- */
.dock{position:fixed;z-index:80;inset-inline:12px;bottom:calc(10px + env(safe-area-inset-bottom));height:var(--dock-h);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:0 4px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--shadow-3);background-image:var(--sheen);transition:transform .45s var(--ease),opacity .3s}
.dock.is-hidden{transform:translateY(140%);opacity:0;pointer-events:none}
.dock a,.dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;border-radius:16px;font-size:.72rem;font-weight:500;color:var(--ink-2);transition:color .2s,scale .15s}
.dock a:active,.dock button:active{scale:.92}
.dock [aria-current="page"]{color:var(--brand)}
.dock [aria-current="page"] .ic{transform:translateY(-1px)}
.dock-mid{position:relative}
.dock-mid span.lift{width:58px;height:58px;margin-top:-30px;border-radius:20px;display:grid;place-items:center;background:var(--brand);color:var(--brand-ink);box-shadow:0 14px 26px -10px rgba(23,87,214,.8),inset 0 1px 0 rgba(255,255,255,.3);transform:perspective(300px) rotateX(12deg)}
[data-theme="dark"] .dock-mid span.lift{box-shadow:0 14px 26px -10px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.4)}
.dock-mid .ic{width:26px;height:26px}
@media (min-width:900px){.dock{display:none}}

/* ---------- Motion ---------- */
.enter{animation:enterUp .9s var(--ease) both;animation-delay:calc(var(--d,0)*85ms)}
@keyframes enterUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero-stage.enter{animation-name:stageIn;animation-duration:1.3s}
@keyframes stageIn{from{opacity:0;transform:scale(.9) translateY(24px)}to{opacity:1;transform:none}}
.rv{opacity:0;transform:translateY(26px) perspective(900px) rotateX(9deg);transition:opacity .8s var(--ease),transform .8s var(--ease);transform-origin:50% 100%}
.rv.in{opacity:1;transform:none}
.slide{opacity:0;transform:translateX(-36px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[dir="rtl"] .slide{transform:translateX(36px)}
.slide.in{opacity:1;transform:none}
.gt-bar{transition:transform 1.1s var(--ease);transition-delay:calc(var(--n,0)*70ms)}
.gt:not(.in) .gt-bar{transform:scaleX(0)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{transition:none;animation:rvIn linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
    .slide{transition:none;animation:slideIn linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
    [dir="rtl"] .slide{animation-name:slideInR}
    .progress i{animation:prog linear both;animation-timeline:scroll(root)}
    .hero-stage .xs-wrap{animation:heroOut linear both;animation-timeline:scroll(root);animation-range:0 85vh}
    .hero-copy{animation:titleOut linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .cv-art{translate:0 0;animation:cvDrift2 52s ease-in-out infinite alternate,cvPar linear both;animation-timeline:auto,scroll(root)}
    .wk-plane{animation:plane linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  }
}
@keyframes rvIn{from{opacity:0;transform:translateY(26px) perspective(900px) rotateX(9deg)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
@keyframes slideInR{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes heroOut{to{transform:translateY(12%) scale(.86);opacity:.15}}
@keyframes titleOut{to{transform:translateY(-8%);opacity:.35}}
@keyframes cvPar{to{translate:0 -6%}}
@keyframes plane{from{transform:rotateX(26deg) scale(.9) translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.xs-wrap{position:absolute;inset:0}
.no-sda .wk-plane{transition:transform 1.1s var(--ease),opacity 1s}
.no-sda .wk-plane:not(.in){transform:rotateX(22deg) scale(.92);opacity:.5}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.slide{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .enter{animation:fadeOnly .6s ease both!important}
  .gt-bar{transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .enter{animation-duration:.6s!important}
  .wk-plane{transform:none!important;opacity:1!important}
  .fs-proto .fs-next{transform:none!important}
  .wk-grid>li>*{transform:none!important;filter:none!important;opacity:1!important}
}
@keyframes fadeOnly{from{opacity:0}to{opacity:1}}

/* ---------- Theme switch: circle reveal from the moon button ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
::view-transition-old(root){animation:vtOut .22s ease both}
::view-transition-new(root){animation:vtIn .38s var(--ease) both}
@keyframes vtIn{from{opacity:0}}
@keyframes vtOut{to{opacity:0}}
html.theming::view-transition-old(root){animation:none}
html.theming::view-transition-new(root){animation:themeIn .6s var(--ease)}
@keyframes themeIn{from{clip-path:circle(0 at var(--vx,50%) var(--vy,0))}to{clip-path:circle(150vmax at var(--vx,50%) var(--vy,0))}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* =========================================================
   v2 — the design-file layer: selected name, intro choreography, inspect mode, the board
   ========================================================= */

/* ---------- hero chips on phones: two small floating chips, the third joins on wider screens ---------- */
@media (max-width:899px){
  .hchip{padding:8px 11px 8px 9px;gap:8px;border-radius:14px}
  .hchip b{font-size:1rem}.hchip small{font-size:.75rem}
  .hchip .ic{width:18px;height:18px}
  .hchip-1{top:8%;inset-inline-start:var(--gut)}
  .hchip-2{top:auto;bottom:10%;inset-inline-end:var(--gut)}
  .hchip-3{display:none}
}
@media (max-width:899px){.hero-sub{order:5}.hero-copy{display:flex;flex-direction:column}.hero-cta{order:4}.hero-sub{margin-top:var(--s-4)}}

/* ---------- the name as a selected text layer ---------- */
.nm{position:relative;display:inline-block;max-width:100%;margin-top:6px}
.nm-box{position:absolute;inset:-7px -10px -2px;border:1.5px solid var(--brand-2);pointer-events:none;transform-origin:100% 0}
[dir="ltr"] .nm-box{transform-origin:0 0}
.nm-box i{position:absolute;width:9px;height:9px;background:var(--surface);border:1.5px solid var(--brand-2);border-radius:1.5px}
.nm-box i:nth-child(1){top:-5px;left:-5px}.nm-box i:nth-child(2){top:-5px;right:-5px}.nm-box i:nth-child(3){bottom:-5px;left:-5px}.nm-box i:nth-child(4){bottom:-5px;right:-5px}
.nm-box i:nth-child(5){top:-5px;left:calc(50% - 4.5px)}.nm-box i:nth-child(6){bottom:-5px;left:calc(50% - 4.5px)}
.nm-box i:nth-child(7){top:calc(50% - 4.5px);left:-5px}.nm-box i:nth-child(8){top:calc(50% - 4.5px);right:-5px}
.nm-dim{position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);padding:4px 7px;border-radius:5px;background:var(--label);color:#fff;font:600 11px/1 var(--f-body);white-space:nowrap;direction:ltr}
.nm-cur{position:absolute;top:-7px;inset-inline-start:-10px;z-index:3;display:flex;gap:2px;pointer-events:none;opacity:0}
.nm-cur svg{width:20px;height:20px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.22))}
[dir="rtl"] .nm-cur svg{transform:scaleX(-1)}
.nm-cur path{fill:var(--brand-2);stroke:#fff;stroke-width:1.4}
.nm-cur b{font:600 11px/1 var(--f-body);color:#fff;background:var(--label);padding:5px 7px;border-radius:6px 6px 6px 2px;margin-top:13px;white-space:nowrap}
.hero-name{text-shadow:none}
.nm .hero-name{display:block}

/* ---------- first-visit choreography (one orchestrated moment) ---------- */
html.intro .xs-l{animation:xsAssemble 1.5s var(--ease) both,xsBreathe 7s ease-in-out 1.5s infinite alternate;animation-delay:calc(.25s + var(--i)*.12s),calc(1.75s + var(--i)*-.12s)}
@keyframes xsAssemble{from{opacity:0;transform:translateZ(calc(var(--i)*200px + 120px))}to{opacity:1;transform:translateZ(calc(var(--i)*20px))}}
html.intro .nm-box{animation:nmBox .8s var(--ease) 1.05s both}
html.intro .nm-dim{animation:fadeOnly .4s ease 1.8s both}
@keyframes nmBox{from{transform:scale(0);opacity:.2}to{transform:none;opacity:1}}
html:not(.intro) .nm-box{animation:fadeOnly .6s ease .5s both}
html.intro .hchip{animation:chipIn .7s var(--spring) both,bob 6s ease-in-out 2.4s infinite alternate}
html.intro .hchip-1{animation-delay:1.7s,2.4s}html.intro .hchip-2{animation-delay:1.85s,1.4s}html.intro .hchip-3{animation-delay:2s,.4s}
@keyframes chipIn{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}

/* ---------- inspect mode: the site shows its own design system ---------- */
.ins-btn[aria-pressed="true"]{background:var(--label);color:#fff;border-color:transparent}
.ins-grid{position:fixed;inset:0;z-index:54;pointer-events:none;display:none}
.ins-grid .wrap{height:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ins-grid i{background:rgba(224,86,124,.07);border-inline:1px solid rgba(224,86,124,.22)}
@media (min-width:900px){.ins-grid .wrap{grid-template-columns:repeat(12,1fr);gap:24px}}
html.inspect .ins-grid{display:block}
html.inspect [data-spec]{outline:1.5px dashed rgba(124,92,255,.85);outline-offset:3px}
.ins-layer{position:absolute;top:0;left:0;width:100%;z-index:56;pointer-events:none}
.ins-l{position:absolute;padding:3px 6px;border-radius:4px;background:var(--label);color:#fff;font:600 10.5px/1.2 var(--f-body);white-space:nowrap;direction:ltr;box-shadow:0 4px 10px -4px rgba(124,92,255,.6);transform:translateY(-100%)}
.ins-l s{text-decoration:none;opacity:.75;font-weight:500}
.ins-panel{position:fixed;z-index:65;inset-inline-end:12px;top:calc(var(--hdr-h) + 12px + env(safe-area-inset-top));width:min(300px,calc(100vw - 24px));padding:14px;border-radius:var(--r-lg);background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--shadow-3);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);font-size:.8rem;opacity:0;transform:translateY(-8px) scale(.98);transition:opacity .3s,transform .35s var(--spring);pointer-events:none;direction:ltr}
html.inspect .ins-panel{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .3s,transform .35s var(--spring),visibility 0s}
.ins-panel{visibility:hidden;transition:opacity .3s,transform .35s var(--spring),visibility 0s .35s}
.ins-panel h2{font:600 .8rem/1.3 var(--f-body);color:var(--ink-3);margin:0 0 8px}
.ins-panel h2:not(:first-child){margin-top:12px}
.ins-sw{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.ins-sw span{display:grid;gap:4px;font-size:.66rem;color:var(--ink-2);text-align:center}
.ins-sw span i{height:30px;border-radius:8px;border:1px solid var(--line-2);background:var(--c)}
.ins-type{display:grid;gap:4px}
.ins-type p{display:flex;justify-content:space-between;gap:8px;color:var(--ink-2)}
.ins-type b{color:var(--ink);font-weight:600}
.ins-rad{display:flex;gap:6px;align-items:flex-end}
.ins-rad i{width:30px;height:30px;border:1.5px solid var(--brand-2);border-inline-end:0;border-bottom:0;border-radius:var(--r) 0 0 0}
.ins-close{position:absolute;top:4px;right:4px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2)}
@media (max-width:899px){.ins-panel{top:auto;bottom:calc(var(--dock-h) + 22px + env(safe-area-inset-bottom));inset-inline:12px;width:auto}}

/* ---------- the board: the work as a design file you can pan and zoom ---------- */
.bd{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--shadow-2),inset 0 1px 0 var(--glass-edge);height:min(76svh,780px);isolation:isolate}
.bd-view{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none;outline-offset:-4px;background-image:radial-gradient(circle,var(--dot) 1.1px,transparent 1.5px);background-size:var(--dg,24px) var(--dg,24px);background-position:var(--dx,0) var(--dy,0)}
.bd.is-grabbing .bd-view{cursor:grabbing}
@media (pointer:coarse){.bd:not(.is-full) .bd-view{touch-action:pan-y;cursor:pointer}}
.bd-world{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;direction:ltr}
.bd-fr{position:absolute;display:block}
.bd-lbl{position:absolute;bottom:100%;left:0;margin-bottom:8px;display:flex;align-items:center;gap:6px;font:500 13px/1.2 var(--f-body);color:var(--ink-3);white-space:nowrap;transform-origin:0 100%;transform:scale(var(--iz,1))}
.bd-lbl .ic{width:14px;height:14px}
.bd-hit{display:block;width:100%;border-radius:var(--r-sm);text-align:start;transition:translate .3s var(--ease)}
.bd-hit .fr{box-shadow:var(--shadow-2)}
.bd-hit:focus-visible{outline:3px solid var(--brand-2);outline-offset:4px}
@media (hover:hover){.bd-hit:hover .sel{opacity:1}}
.bd-cover{position:absolute;display:flex;flex-direction:column;justify-content:space-between;padding:44px;border-radius:var(--r-sm);background:var(--ink);color:var(--bg);box-shadow:var(--shadow-3);overflow:hidden}
[data-theme="dark"] .bd-cover{background:var(--surface);color:var(--ink);border:1px solid var(--glass-edge)}
.bd-cover::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.14) 1.2px,transparent 1.6px);background-size:26px 26px}
.bd-cover>*{position:relative}
.bd-cover h2{font:700 96px/1 var(--f-head);letter-spacing:-.02em}
.bd-cover p{font-size:22px;line-height:1.5;opacity:.8;max-width:20em}
.bd-cover .bd-cn{font:700 30px/1 var(--f-head);color:var(--brand-2)}
.bd-cover[dir="rtl"]{direction:rtl;text-align:right}
.bd-links{position:absolute;inset:0;overflow:visible;pointer-events:none}
.bd-links path{fill:none;stroke:var(--brand-2);stroke-width:2.5;stroke-linecap:round;opacity:.75}
.bd-links circle{fill:var(--brand-2)}
.bd-cur{position:absolute;display:flex;gap:2px;pointer-events:none;animation:bdCur 16s ease-in-out infinite;will-change:transform}
.bd-cur svg{width:26px;height:26px}
.bd-cur path{fill:#E0567C;stroke:#fff;stroke-width:1.4}
.bd-cur b{font:600 15px/1 var(--f-body);color:#fff;background:#B8325A;padding:7px 10px;border-radius:8px 8px 8px 3px;margin-top:18px;white-space:nowrap}
@keyframes bdCur{0%,100%{transform:translate(0,0)}25%{transform:translate(420px,160px)}50%{transform:translate(760px,-60px)}75%{transform:translate(260px,-120px)}}
.bd-ui{position:absolute;inset:auto 14px 14px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;pointer-events:none;direction:ltr}
.bd-ui>*{pointer-events:auto}
.bd-zoom{display:flex;align-items:center;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--shadow-2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.bd-zoom button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background-color .2s,scale .15s}
.bd-zoom button:hover{background:var(--brand-soft)}
.bd-zoom button:active{scale:.9}
.bd-zoom output{width:3.6em;text-align:center;font-weight:600;font-size:.85rem;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.bd-mini{position:relative;display:block;width:176px;border-radius:14px;padding:6px;background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--shadow-2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);cursor:pointer}
.bd-mini-in{position:relative;display:block;width:100%;aspect-ratio:var(--ar);border-radius:8px;background:var(--bg-2);overflow:hidden}
.bd-mini-in i{position:absolute;border-radius:2px;background:var(--c,var(--ink-3));opacity:.7}
.bd-mini-vp{position:absolute;top:0;left:0;border:2px solid var(--brand-2);border-radius:3px;background:rgba(124,92,255,.08);transform-origin:0 0}
.bd-top{position:absolute;inset:14px 14px auto;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}
.bd-top>*{pointer-events:auto}
.bd-hint{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--shadow-1);font-size:var(--t-sm);font-weight:500;color:var(--ink-2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.bd-hint .ic{width:18px;height:18px;color:var(--brand)}
.bd-open{display:none}
@media (pointer:coarse){
  .bd:not(.is-full) .bd-zoom,.bd:not(.is-full) .bd-mini{display:none}
  .bd:not(.is-full) .bd-open{display:inline-flex}
  .bd:not(.is-full) .bd-ui{justify-content:center}
}
@media (max-width:639px){.bd{height:58svh;border-radius:var(--r-lg);margin-inline:calc(-1*var(--gut) + 6px)}.bd-mini{width:120px}}
.bd.is-full{position:fixed;inset:0;z-index:110;height:auto;border-radius:0;margin:0;border:0}
.bd.is-full .bd-top{top:calc(12px + env(safe-area-inset-top))}
.bd.is-full .bd-ui{bottom:calc(14px + env(safe-area-inset-bottom))}
.bd-x{display:none}
.bd.is-full .bd-x{display:grid}
.bd.is-full .bd-full{display:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.bd-zoom,.bd-mini,.bd-hint{background:var(--glass-solid)}}
.is-scrolling .bd-cur{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.bd-cur{animation:none}}
.sec-sub{margin-top:var(--s-8);margin-bottom:var(--s-5)}
.bn-first{display:none}
@media (max-width:419px){.bn-full{display:none}.bn-first{display:inline}}
.bd-slot{position:relative;height:min(76svh,780px)}
.bd{position:absolute;inset:0;height:auto}
@media (max-width:639px){.bd-slot{height:58svh;margin-inline:calc(-1*var(--gut) + 6px)}.bd{margin-inline:0}}
.bd-view{background-image:none}
.bd-dots{position:absolute;inset:-24px;background-image:radial-gradient(circle,var(--dot) 1.1px,transparent 1.5px);background-size:24px 24px;will-change:transform;pointer-events:none}
.bd-drift{position:absolute;inset:0}
@media (pointer:coarse){.bd:not(.is-full) .bd-drift{animation:bdDrift 26s ease-in-out infinite alternate}}
@keyframes bdDrift{from{transform:translate3d(2%,1%,0)}to{transform:translate3d(-4%,-3%,0)}}
.bd.is-far .bd-lbl,.bd.is-far .bd-cur b{opacity:0}
.bd-lbl,.bd-cur b{transition:opacity .25s}
[dir="rtl"] .bd-cover{direction:rtl;text-align:right}
.h-touch{display:none}
@media (pointer:coarse){.h-fine{display:none}.h-touch{display:inline}.bd:not(.is-full) .bd-hint{display:none}.bd-full{display:none}}
.bd .icon-btn{background:var(--glass-strong)}
.is-scrolling .bd-drift{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.bd-drift{animation:none!important}}

/* v2 fixes */
@media (max-width:899px){.xs-scene{top:63%;--gz:40px}.hero-stage{perspective-origin:50% 0}}
.nm+.hero-role{margin-top:40px}
.hchip .num{width:auto}
.bd-lbl{width:calc(100% * var(--z,1));overflow:hidden;text-overflow:ellipsis}
.bd-lbl>span{overflow:hidden;text-overflow:ellipsis}
html[lang="en"] .hero-name{font-size:clamp(2.6rem,1.15rem + 7vw,7rem)}
@media (max-width:899px) and (max-height:760px){.hero-stage{height:250px}.xs-scene{--w:118px}}
@media (max-width:899px){.ins-panel{max-height:40svh;overflow-y:auto;padding:12px}.ins-panel .ins-hide-m{display:none}}
/* fixed text boxes in the header so the web-font swap never moves anything */
.bn-full,.bn-first{white-space:nowrap}
html[lang="ar"] .bn-full{display:inline-block;width:5.4em}
html[lang="en"] .bn-full{display:inline-block;width:7.95em}
@media (max-width:419px){html[lang="ar"] .bn-full,html[lang="en"] .bn-full{display:none}}
@media (min-width:900px){
  .hdr-nav a{justify-content:center;padding:0}
  html[lang="ar"] .hdr-nav a{width:6.1em}
  html[lang="en"] .hdr-nav a{width:7.6em}
  html[lang="ar"] .hdr .btn[data-contact]{width:7.6em}
  html[lang="en"] .hdr .btn[data-contact]{width:8.5em}
}
@media (min-width:900px){.hdr .btn[data-contact]{justify-content:flex-start;padding-inline:18px!important}}
.card-foot .link{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin:0 -8px}
.lang-btn{width:52px;min-width:0;padding:0}
.card-foot .link{min-height:48px}
.cc a>span:not(.cc-ic),.cc button>span:not(.cc-ic){min-width:0;flex:1}
.cc a,.cc button{min-width:0}
.cc small{overflow-wrap:anywhere}
.wk-name{white-space:nowrap;overflow:hidden}
.wk-name>.ic{flex:none}
.wk-name{text-overflow:ellipsis}
/* the deck on the compositor: each card settles back on the next card's own view timeline (no per-frame JS) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .dk{timeline-scope:--dk2,--dk3,--dk4,--dk5}
    .dk-card:nth-child(2){view-timeline-name:--dk2}.dk-card:nth-child(3){view-timeline-name:--dk3}.dk-card:nth-child(4){view-timeline-name:--dk4}.dk-card:nth-child(5){view-timeline-name:--dk5}
    .dk-card .dk-in{animation:dkBack linear both;animation-range:entry 0% cover 45%}
    .dk-card .dk-in::after{opacity:0;animation:dkShade linear both;animation-range:entry 0% cover 45%}
    .dk-card:nth-child(1) .dk-in,.dk-card:nth-child(1) .dk-in::after{animation-timeline:--dk2}
    .dk-card:nth-child(2) .dk-in,.dk-card:nth-child(2) .dk-in::after{animation-timeline:--dk3}
    .dk-card:nth-child(3) .dk-in,.dk-card:nth-child(3) .dk-in::after{animation-timeline:--dk4}
    .dk-card:nth-child(4) .dk-in,.dk-card:nth-child(4) .dk-in::after{animation-timeline:--dk5}
    .dk-card:last-child .dk-in,.dk-card:last-child .dk-in::after{animation:none}
  }
}
@keyframes dkBack{to{transform:scale(.93)}}
@keyframes dkShade{to{opacity:var(--shade,.22)}}
[data-theme="dark"]{--shade:.4}
.dk-in::after{will-change:opacity}

/* =========================================================
   v3 — the flight through the design file (home), layered covers
   ========================================================= */
.fly{position:relative;height:calc(var(--n) * 88svh + 12svh)}
.fly-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.fly-view{position:absolute;inset:0;perspective:1700px;perspective-origin:50% 40%;overflow:hidden}
.fly-tilt{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.fly-world{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;direction:ltr}
.fly-cover h2{font-size:104px}
.fly-links path{stroke-dasharray:14 12;stroke-width:3}
.fx{position:absolute}
.fx-lbl{position:absolute;bottom:100%;left:0;margin-bottom:10px;display:flex;align-items:center;gap:6px;font:500 13px/1.2 var(--f-body);color:var(--ink-3);white-space:nowrap;overflow:hidden;width:calc(100% * var(--z,1));transform-origin:0 100%;transform:scale(var(--iz,1));transition:opacity .3s}
.fx-lbl .ic{width:14px;height:14px;flex:none}.fx-lbl>span{overflow:hidden;text-overflow:ellipsis}
.fx-body{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.1s var(--ease)}
.fx-s{position:absolute;inset:0;display:block;transition:transform 1.1s var(--ease),opacity .6s;backface-visibility:hidden}
.fx-s .fr{height:100%;aspect-ratio:auto;border-radius:12px}
.fx-base .fr{box-shadow:var(--shadow-3)}
.fx-c{position:absolute;inset:0;display:block}
.fx-mid .fx-c{clip-path:inset(30% 6% 30% 6% round 12px)}
.fx-top .fx-c{clip-path:inset(0 0 74% 0 round 12px 12px 0 0)}
.fx-mid,.fx-top{opacity:0;filter:drop-shadow(0 24px 30px rgba(20,10,60,.35))}
.fx .sel{border-radius:12px}
/* in focus: the cover lifts off as layers, then floats */
.fx.is-focus .fx-body{transform:perspective(1300px) rotateX(24deg) rotateZ(-7deg) scale(.92)}
[dir="rtl"] .fx.is-focus .fx-body{transform:perspective(1300px) rotateX(24deg) rotateZ(7deg) scale(.92)}
.fx.is-focus .fx-mid{opacity:1;transform:translateZ(70px)}
.fx.is-focus .fx-top{opacity:1;transform:translateZ(140px)}
.fx.is-focus .fx-base{transform:translateZ(0)}
.fx.is-focus .fx-base .fr img,.fx.is-focus .fx-base .fr-wire{filter:saturate(.7) brightness(.86)}
.fx.is-focus .sel{opacity:1}
.fx.is-focus .fx-lbl{opacity:0}
.fx:not(.is-focus) .fx-mid,.fx:not(.is-focus) .fx-top{transition-duration:.5s}
@media (prefers-reduced-motion:reduce){.fx-body,.fx-s{transition:none!important}.fx.is-focus .fx-body{transform:none}.fx.is-focus .fx-mid,.fx.is-focus .fx-top{opacity:0}}
/* side column: layers panel + inspect panel */
.fly-side{position:absolute;z-index:3;inset-inline:12px;bottom:calc(var(--dock-h) + 22px + env(safe-area-inset-bottom));display:grid;gap:10px}
.fly-layers{display:none}
.fly-pane{display:grid}
.fly-p{grid-area:1/1;align-self:end;padding:16px 16px 14px;border-radius:var(--r-lg);background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--shadow-3);background-image:var(--sheen);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);opacity:0;transform:translateY(14px) scale(.98);visibility:hidden;transition:opacity .45s var(--ease),transform .5s var(--spring),visibility 0s .5s}
.fly-p.on{opacity:1;transform:none;visibility:visible;transition:opacity .45s var(--ease),transform .5s var(--spring),visibility 0s}
.fly-p h3{font-family:var(--f-head);font-weight:700;font-size:clamp(1.45rem,1.2rem + 1vw,2.1rem);line-height:1.2;margin-top:2px}
.fp-name{display:flex;align-items:center;gap:8px;font-size:var(--t-xs);color:var(--ink-3);direction:ltr;justify-content:flex-end}
[dir="ltr"] .fp-name{justify-content:flex-start}
.fp-name .num{flex:none;padding:3px 8px;border-radius:6px;background:var(--label);color:#fff;font-weight:600}
.fp-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-kind{margin-top:6px;color:var(--ink-2);line-height:1.6}
.fp-props{margin:12px 0 0;display:grid;gap:0;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.fp-props>div{display:grid;grid-template-columns:7.5em 1fr;gap:8px;padding:8px 12px;border-top:1px solid var(--line);font-size:var(--t-sm)}
.fp-props>div:first-child{border-top:0}
.fp-props dt{color:var(--ink-3)}.fp-props dd{margin:0;font-weight:600;color:var(--ink)}
.fp-tags{display:flex;flex-wrap:wrap;gap:6px}.fp-tags .chip{min-height:26px;font-size:.8rem;padding:2px 8px}
.fp-note{margin-top:10px;font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;padding-inline-start:12px;border-inline-start:3px solid var(--brand-2)}
.fp-act{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.fp-act .btn{min-height:48px;padding:0 18px}
.fly-hint{margin-top:12px;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--brand)}
.fly-hint-ic{animation:hintBob 1.6s ease-in-out infinite}
@keyframes hintBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.fly-hud{position:absolute;z-index:3;top:calc(14px + env(safe-area-inset-top));inset-inline-end:14px;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-pill);background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--shadow-2);font-weight:600;font-size:var(--t-sm);transition:opacity .3s}
.fly-count{width:3.2em;text-align:center}
.fly-bar{display:block;width:64px;height:4px;border-radius:2px;background:var(--line-2);overflow:hidden}
.fly-bar b{display:block;height:100%;background:var(--brand-2);transform-origin:0 50%;transform:scaleX(var(--fp,0))}
[dir="rtl"] .fly-bar b{transform-origin:100% 50%}
@media (max-width:899px){
  .fly-p .fp-props>div{padding:6px 10px}
  .fly-p .fp-note{display:none}
  .fly-p{padding:14px}
}
@media (min-width:900px){
  .fly-side{inset-inline-start:max(32px,calc((100vw - 1200px)/2));inset-inline-end:auto;top:calc(var(--hdr-h) + 28px);bottom:32px;width:380px;grid-template-rows:auto 1fr;align-content:start}
  .fly-layers{display:block;padding:8px;border-radius:var(--r-lg);background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--shadow-2);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
  .fly-layers li+li{margin-top:2px}
  .fly-layers button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border-radius:10px;color:var(--ink-2);font-weight:500;font-size:var(--t-sm);text-align:start;transition:background-color .2s,color .2s}
  .fly-layers button .ic{width:16px;height:16px;color:var(--ink-3)}
  .fly-layers button:hover{background:var(--brand-soft)}
  .fly-layers button[aria-current="true"]{background:var(--label);color:#fff}
  .fly-layers button[aria-current="true"] .ic{color:#fff}
  .fly-pane{align-content:start}
  .fly-p{align-self:start;padding:20px}
  .fly-hud{top:auto;bottom:28px;inset-inline-end:32px}
}
html.fly-in .dock{transform:translateY(0)}
/* the work board: same layered frames when focused from the keyboard or opened */
.vw-fig .fr{transition:transform .9s var(--ease)}
.vw-3d{position:relative;width:min(100%,calc((100dvh - 360px)*1.278),980px);margin-inline:auto;aspect-ratio:404/316;flex:none;perspective:1400px}
.vw-3d .fx-body{transform:rotateX(14deg) rotateZ(-3deg) scale(.94);animation:vwFloat 7s ease-in-out infinite alternate}
[dir="rtl"] .vw-3d .fx-body{transform:rotateX(14deg) rotateZ(3deg) scale(.94);animation-name:vwFloatR}
.vw-3d .fx-mid{opacity:1;transform:translateZ(46px)}
.vw-3d .fx-top{opacity:1;transform:translateZ(92px)}
.vw-3d .fx-base .fr{box-shadow:var(--shadow-3)}
@keyframes vwFloat{from{transform:rotateX(16deg) rotateZ(-4deg) rotateY(-5deg) scale(.94)}to{transform:rotateX(10deg) rotateZ(-2deg) rotateY(5deg) scale(.94)}}
@keyframes vwFloatR{from{transform:rotateX(16deg) rotateZ(4deg) rotateY(5deg) scale(.94)}to{transform:rotateX(10deg) rotateZ(2deg) rotateY(-5deg) scale(.94)}}
@media (prefers-reduced-motion:reduce){.vw-3d .fx-body{animation:none;transform:none}.vw-3d .fx-mid,.vw-3d .fx-top{opacity:0}}
.vw-info .fp-props{max-width:640px}
.fly-count{direction:ltr;unicode-bidi:isolate}
@media (max-width:899px){.fly-p .fp-name{font-size:.72rem}.fly-p h3{font-size:1.35rem}.fly-p .fp-kind{font-size:.92rem;margin-top:2px}.fly-p .fp-props{margin-top:8px}.fp-act{margin-top:10px}}
.gt-row{min-height:50px}
/* flight performance: draw the floating layers only for the frame in focus, no filters on big layers */
.fx-mid,.fx-top{filter:none;visibility:hidden;transition:transform 1.1s var(--ease),opacity .6s,visibility 0s .6s}
.fx.is-focus .fx-mid,.fx.is-focus .fx-top{visibility:visible;transition:transform 1.1s var(--ease),opacity .6s,visibility 0s}
.fx.is-focus .fx-base .fr img,.fx.is-focus .fx-base .fr-wire{filter:none}
.fx-base .fr::after{content:"";position:absolute;inset:0;z-index:2;background:#0C0916;opacity:0;transition:opacity .8s var(--ease);pointer-events:none}
.fx.is-focus .fx-base .fr::after{opacity:.28}
.fx-mid .fr,.fx-top .fr{box-shadow:none}
.fly-world .fr-wire::before,.fly-world .fr-wire>b,.fly-world .fr-wire>span i{border-style:solid;border-width:1px}
@media (max-width:899px){.fly-world .fx:not([data-k]),.fly-world .bd-cur{display:none}.fly-p{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:var(--glass-solid)}}
.fx{contain:layout style}

/* phones: no frame labels inside the flight; background lights hold still while a finger scrolls (the dots keep moving) */
@media (max-width:899px){.fly-world .fx-lbl{display:none}}
.is-scrolling .cv-l,.is-scrolling .cv-art{animation-play-state:paused!important}
/* lean layer tree for the flight: frames out of focus are plain flat boxes; the world is promoted only while it moves */
.fx-s{backface-visibility:visible}
.fx:not(.is-focus) .fx-mid,.fx:not(.is-focus) .fx-top{display:none}
.fx:not(.is-focus) .fx-body{transform-style:flat}
.fly-world .fx .sel{display:none}
.fly-world,.fly-tilt{will-change:auto}
.fly.is-cont .fly-world{will-change:transform}

/* phones: the world keeps one raster (fixed zoom, pan-only), and each stop frame keeps its layers ready */
.fly:not(.is-cont) .fly-world{will-change:transform}
.fly:not(.is-cont) .fx[data-k] .fx-mid,.fly:not(.is-cont) .fx[data-k] .fx-top{display:block;visibility:visible;opacity:0;transform:translateZ(0)}
.fly:not(.is-cont) .fx[data-k] .fx-body{transform-style:preserve-3d}
.fly:not(.is-cont) .fx.is-focus .fx-mid{opacity:1;transform:translateZ(70px)}
.fly:not(.is-cont) .fx.is-focus .fx-top{opacity:1;transform:translateZ(140px)}

/* phones: the flight as slides along the file (one frame on stage, the canvas pans with it) */
.fly-dots{display:none}
.fly:not(.is-cont) .fly-dots{display:block;position:absolute;inset:-72px;will-change:transform}
.fly-dots i{position:absolute;inset:0;background-image:radial-gradient(circle,var(--dot) 1.2px,transparent 1.6px);background-size:24px 24px;animation:cvPan 5s linear infinite;will-change:transform}
[dir="rtl"] .fly-dots i{animation-name:cvPanR}
html.fly-on .cv-dots{visibility:hidden}
.fly:not(.is-cont) .fly-world{transform:none!important;width:100%!important;height:100%!important;will-change:auto}
.fly:not(.is-cont) .fly-links,.fly:not(.is-cont) .fly-world .bd-cur,.fly:not(.is-cont) .fx:not([data-k]){display:none}
.fly:not(.is-cont) .fx[data-k],.fly:not(.is-cont) .fly-cover{--sw:min(80vw,440px);left:50%!important;top:calc(env(safe-area-inset-top) + 74px)!important;width:var(--sw)!important;height:calc(var(--sw) * 316 / 404)!important;margin-left:calc(var(--sw) / -2);visibility:hidden}
.fly:not(.is-cont) .fly-cover{height:calc(var(--sw) * 500 / 680)!important;zoom:calc(var(--zc,.46));width:680px!important;height:500px!important;margin-left:-340px;top:calc((env(safe-area-inset-top) + 74px) / var(--zc,.46))!important}
.fly:not(.is-cont) .is-cur,.fly:not(.is-cont) .is-out{visibility:visible}
.fly:not(.is-cont) .is-out{z-index:0}.fly:not(.is-cont) .is-cur{z-index:1}
.fly:not(.is-cont) .fly-tilt{transition:transform .9s var(--ease)}
@media (max-width:899px){.fly-view{perspective:1100px;perspective-origin:50% 22%}}
@media (max-width:899px){
  .fly:not(.is-cont) .fx[data-k]{--sw:min(78vw,420px);top:calc(env(safe-area-inset-top) + 118px)!important}
  .fly:not(.is-cont) .fx.is-focus .fx-body{transform:perspective(1100px) rotateX(18deg) rotateZ(-5deg) scale(.95)}
  [dir="rtl"] .fly:not(.is-cont) .fx.is-focus .fx-body{transform:perspective(1100px) rotateX(18deg) rotateZ(5deg) scale(.95)}
  .fly:not(.is-cont) .fx.is-focus .fx-mid{transform:translateZ(34px)}
  .fly:not(.is-cont) .fx.is-focus .fx-top{transform:translateZ(68px)}
  .fly-view{perspective-origin:50% 30%}
}
@media (max-width:899px) and (max-height:700px){.fly:not(.is-cont) .fx[data-k]{--sw:min(62vw,420px);top:calc(env(safe-area-inset-top) + 92px)!important}}

/* cheap flight chrome: the progress bar and the panels sit on their own layers; lighter shadows on phones */
.fly-bar b{will-change:transform}
@media (max-width:899px){.fly-p{box-shadow:var(--shadow-2);will-change:transform,opacity;background-image:none}.fly-hud{box-shadow:var(--shadow-1)}}
.vw-fig:not(.is-cur) .vw-3d .fx-body{animation-play-state:paused}
/* desktop: Figma's own layout. Layers on the start side, the inspect panel on the end side, the frame between them */
@media (min-width:900px){
  .fly-side{display:contents}
  .fly-layers{position:absolute;z-index:3;inset-inline-start:32px;top:calc(var(--hdr-h) + 28px);width:240px;display:none}
  .fly-pane{position:absolute;z-index:3;inset-inline-end:32px;top:calc(var(--hdr-h) + 28px);width:380px;max-height:calc(100svh - var(--hdr-h) - 120px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
  .fly-pane::-webkit-scrollbar{display:none}
  .fly-hud{inset-inline-end:auto;inset-inline-start:32px}
}
@media (min-width:1280px){.fly-layers{display:block}}
.fly-view,.fly-tilt{direction:ltr}
.vw-count{direction:ltr;unicode-bidi:isolate;text-align:start}

/* =====================================================================
   v2 — the work, shown properly on a phone
   Cards fan their screens like layers in a file; a deck you swipe on the
   home page; a page per project; a canvas that never stops working.
   ===================================================================== */

:root{--dirx:1}
[dir="rtl"]{--dirx:-1}

/* ---------- the living canvas ---------- */
.cv-wave{position:absolute;inset:-48px;background-image:radial-gradient(circle,var(--brand-2) 1.3px,transparent 1.8px);background-size:24px 24px;opacity:.55;
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent);
  -webkit-mask-size:560px 560px;mask-size:560px 560px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:cvPan 5s linear infinite,cvWave 19s ease-in-out infinite alternate;will-change:transform}
[dir="rtl"] .cv-wave{animation-name:cvPanR,cvWave}
@keyframes cvWave{0%{-webkit-mask-position:-10% 8%;mask-position:-10% 8%}35%{-webkit-mask-position:62% 38%;mask-position:62% 38%}70%{-webkit-mask-position:18% 92%;mask-position:18% 92%}100%{-webkit-mask-position:108% 70%;mask-position:108% 70%}}
.cv-sel{position:absolute;top:0;left:0;width:200px;height:136px;border:1.5px solid color-mix(in srgb,var(--brand-2) 55%,transparent);border-radius:4px;opacity:0;animation:cvSel 22s var(--ease) infinite;will-change:transform,opacity}
.cv-sel i{position:absolute;width:8px;height:8px;background:var(--bg);border:1.5px solid var(--brand-2);border-radius:2px}
.cv-sel i:nth-child(1){top:-5px;inset-inline-start:-5px}.cv-sel i:nth-child(2){top:-5px;inset-inline-end:-5px}.cv-sel i:nth-child(3){bottom:-5px;inset-inline-start:-5px}.cv-sel i:nth-child(4){bottom:-5px;inset-inline-end:-5px}
.cv-sel b{position:absolute;bottom:100%;margin-bottom:8px;inset-inline-start:0;font:600 10px/1 var(--f-body);color:#fff;background:var(--label);padding:4px 6px;border-radius:4px;white-space:nowrap;direction:ltr;opacity:.75}
.cv-sel-2{width:120px;height:170px;animation-name:cvSel2;animation-duration:27s;animation-delay:-11s}
/* frames only travel and fade: a moving transform is never a layout shift */
@keyframes cvSel{
  0%{transform:translate(8vw,16vh);opacity:0}
  10%,30%{transform:translate(8vw,16vh);opacity:.5}
  48%,70%{transform:translate(54vw,32vh);opacity:.5}
  86%{transform:translate(30vw,64vh);opacity:.4}
  100%{transform:translate(30vw,64vh);opacity:0}}
@keyframes cvSel2{
  0%{transform:translate(62vw,66vh);opacity:0}
  12%,40%{transform:translate(70vw,12vh);opacity:.38}
  75%{transform:translate(14vw,44vh);opacity:.32}
  100%{transform:translate(14vw,44vh);opacity:0}}
.cv-cur-3{--c:#16A37A;--cl:#0E7A5A;animation:cvCur3 23s ease-in-out infinite;animation-delay:-4s}
@keyframes cvCur3{0%{transform:translate(40vw,86vh)}30%{transform:translate(18vw,58vh)}55%{transform:translate(46vw,30vh)}80%{transform:translate(64vw,62vh)}100%{transform:translate(40vw,86vh)}}
.cv-art rect{stroke-dasharray:1400;stroke-dashoffset:0;animation:cvDraw 16s ease-in-out infinite}
.cv-art rect:nth-of-type(2){animation-delay:-4s}.cv-art rect:nth-of-type(3){animation-delay:-8s}.cv-art rect:nth-of-type(4){animation-delay:-12s}
@keyframes cvDraw{0%,12%{stroke-dashoffset:1400}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-1400}}
.cv-art .cv-con{animation:cvFlow 3.2s linear infinite}
@keyframes cvFlow{to{stroke-dashoffset:-26}}
/* the canvas keeps working while you scroll, on every screen */
.is-scrolling .cv-cur,.is-scrolling .cv-l,.is-scrolling .cv-art{animation-play-state:running!important}
@media (max-width:899px){
  .cv-cur-2{display:flex}
  .cv-art{opacity:.9}
  .cv-sel{animation-name:cvSelM;animation-duration:18s}
}
@keyframes cvSelM{
  0%{transform:translate(6vw,14vh);opacity:0}
  10%,35%{transform:translate(6vw,14vh);opacity:.45}
  55%{transform:translate(40vw,42vh);opacity:.45}
  80%{transform:translate(18vw,70vh);opacity:.4}
  100%{transform:translate(18vw,70vh);opacity:0}}

/* ---------- a project card ---------- */
.pc{position:relative;display:flex;flex-direction:column;height:100%;border-radius:var(--r-xl);background:var(--glass-soft);border:1px solid var(--glass-edge);box-shadow:var(--shadow-2);background-image:var(--sheen);overflow:hidden;isolation:isolate}
.pc-media{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--pc) 22%,transparent),transparent 70%),color-mix(in srgb,var(--pc) 8%,var(--surface-2))}
.pc-media::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,var(--dot) 1px,transparent 1.4px);background-size:18px 18px;opacity:.7}
.pc-stack{position:absolute;inset:16% 11% 9%}
.pc-l{position:absolute;inset:0;border-radius:var(--r-md);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-2);transition:transform .7s var(--ease),opacity .5s;transform-origin:50% 100%}
.pc-l img{width:100%;height:100%;object-fit:cover;object-position:top center}
.pc-l1{z-index:3;box-shadow:var(--shadow-3);overflow:visible}
.pc-l1 img{border-radius:inherit}
.pc-l2{z-index:2;transform:translate(calc(var(--dirx) * -9%),-9%) rotate(calc(var(--dirx) * -4deg)) scale(.9);opacity:.92}
.pc-l3{z-index:1;transform:translate(calc(var(--dirx) * 9%),-15%) rotate(calc(var(--dirx) * 4deg)) scale(.82);opacity:.8}
@media (hover:hover){
  .pc:hover .pc-l1{transform:translateY(-3%) scale(1.02)}
  .pc:hover .pc-l2{transform:translate(calc(var(--dirx) * -20%),-14%) rotate(calc(var(--dirx) * -8deg)) scale(.88)}
  .pc:hover .pc-l3{transform:translate(calc(var(--dirx) * 20%),-20%) rotate(calc(var(--dirx) * 8deg)) scale(.8)}
  .pc:hover .pc-l1 .sel{opacity:1}
}
.pc-lbl{position:absolute;top:12px;inset-inline-start:14px;inset-inline-end:76px;z-index:4;display:flex;align-items:center;gap:5px;font:500 12px/1.2 var(--f-body);color:var(--ink-2);opacity:.85}
.pc-lbl .ic{width:14px;height:14px;flex:none}
.pc-lbl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-n{position:absolute;top:10px;inset-inline-end:12px;z-index:4;font:600 12px/1 var(--f-body);color:var(--ink);background:var(--glass-strong);border:1px solid var(--glass-edge);padding:6px 9px;border-radius:var(--r-pill)}
.pc-body{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);flex:1}
.pc-kick{font-size:var(--t-xs);font-weight:600;color:color-mix(in srgb,var(--pc) 70%,var(--ink));letter-spacing:.01em}
.pc-t{font-family:var(--f-head);font-weight:700;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.15}
.pc-t a{color:inherit}
.pc-t a::after{content:"";position:absolute;inset:0;z-index:5}
.pc-k{color:var(--ink-2);line-height:1.6}
.pc-team{display:flex;align-items:center;gap:6px;color:var(--ink-3);font-size:var(--t-sm)}
.pc-team .ic{width:18px;height:18px}
.pc-act{display:flex;gap:var(--s-2);margin-top:auto;padding-top:var(--s-3);position:relative;z-index:6}
.pc-act .btn{min-height:48px;padding:0 18px}
.pc-go{flex:1}
@media (max-width:379px){.pc-be{display:none}.pc-act .btn-g{padding:0 14px}}

/* ---------- home: the deck ---------- */
.pw{overflow:hidden}
.pw .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5)}
.pw-nav{display:none;align-items:center;gap:var(--s-3);flex:none}
.pw-count{font-weight:600;color:var(--ink-2);min-width:4.5em;text-align:center}
@media (min-width:900px){.pw-nav{display:flex}}
.pw-track{--cw:min(84vw,400px);display:grid;grid-auto-flow:column;grid-auto-columns:var(--cw);gap:var(--s-4);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:calc((100% - var(--cw)) / 2);padding:var(--s-4) calc((100% - var(--cw)) / 2) var(--s-6);scrollbar-width:none;outline:none}
.pw-track::-webkit-scrollbar{display:none}
.pw-slot{scroll-snap-align:center;perspective:1200px}
.pw-slot>*{transform:rotateY(calc(var(--d,0) * var(--dirx) * -14deg)) scale(calc(1 - var(--a,0) * .08));opacity:calc(1 - var(--a,0) * .25);will-change:transform}
.pw-slot .pc-l2{translate:calc(var(--d,0) * 18%) 0}
.pw-slot .pc-l3{translate:calc(var(--d,0) * 30%) 0}
.pw-track:focus-visible{outline:2.5px solid var(--brand);outline-offset:-4px;border-radius:var(--r-xl)}
@media (min-width:900px){
  .pw-track{--cw:min(1040px,86vw);gap:var(--s-6)}
  .pw-slot .pc{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);min-height:460px}
  .pw-slot .pc-media{aspect-ratio:auto;height:100%}
  .pw-slot .pc-body{padding:var(--s-7) var(--s-6);justify-content:center;gap:var(--s-3)}
  .pw-slot .pc-t{font-size:clamp(2rem,1.4rem + 1.6vw,3rem)}
  .pw-slot .pc-k{font-size:var(--t-lg)}
  .pw-slot .pc-act{margin-top:var(--s-4)}
}
.pw-dots{display:flex;justify-content:center;gap:7px;margin-top:calc(-1 * var(--s-3))}
.pw-dots i{width:7px;height:7px;border-radius:4px;background:var(--line-2);transition:width .3s var(--ease),background-color .3s}
.pw-dots i.on{width:22px;background:var(--brand)}
.pw-more{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--s-3);height:100%;min-height:420px;padding:var(--s-6);border-radius:var(--r-xl);
  background:var(--ink);color:var(--bg);box-shadow:var(--shadow-3);position:relative;overflow:hidden}
.pw-more::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.4px);background-size:20px 20px}
.pw-more-grid{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%;margin-bottom:var(--s-3)}
.pw-more-grid span{aspect-ratio:16/10;border-radius:var(--r-sm);overflow:hidden;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.pw-more-grid img{width:100%;height:100%;object-fit:cover}
.pw-more b{position:relative;font:700 clamp(1.6rem,1.2rem + 1.2vw,2.4rem)/1.2 var(--f-head)}
.pw-more small{position:relative;opacity:.75;font-size:var(--t-md);line-height:1.6}
.pw-more .btn{position:relative;margin-top:var(--s-2)}
@media (min-width:900px){.pw-more{min-height:460px;display:grid;grid-template-columns:1.2fr 1fr;align-content:center;column-gap:var(--s-7)}.pw-more-grid{grid-row:span 4;margin:0}}

/* ---------- work: the grid of cards ---------- */
.pc-grid{display:grid;gap:var(--s-5);margin-top:var(--s-6)}
@media (min-width:640px){.pc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.pc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .pc-grid>li{animation:pcIn linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
    .pj-fr{animation:pcIn linear both;animation-timeline:view();animation-range:entry 0% cover 18%}
  }
}
@keyframes pcIn{from{opacity:0;transform:translateY(34px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- a project page ---------- */
.pj-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding-top:calc(var(--hdr-h) + env(safe-area-inset-top) + var(--s-4))}
.pj-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-inline:12px 16px;border-radius:var(--r-pill);background:var(--glass-soft);border:1px solid var(--glass-edge);box-shadow:var(--shadow-1);font-weight:600;font-size:var(--t-sm)}
.pj-back .ic{width:18px;height:18px}
.pj-pager{display:flex;align-items:center;gap:var(--s-2);font-weight:600;color:var(--ink-2);font-size:var(--t-sm)}
.pj-pager .icon-btn{width:44px;height:44px}
.pj-hero{display:grid;gap:var(--s-7);padding-block:var(--s-7) var(--s-7)}
@media (min-width:900px){.pj-hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:var(--s-8);padding-block:var(--s-8)}}
.pj-cover{position:relative;border-radius:var(--r-lg);box-shadow:var(--shadow-3);background:var(--surface)}
.pj-cover-shot{display:block;border-radius:inherit;overflow:hidden}
.pj-cover-shot img{width:100%;height:auto;display:block}
.pj-cover .sel{opacity:1;border-radius:var(--r-lg)}
.pj-cover-lbl{position:absolute;bottom:100%;margin-bottom:8px;inset-inline-start:0;max-width:100%;display:flex;align-items:center;gap:5px;font:500 12px/1.2 var(--f-body);color:var(--ink-3)}
.pj-cover-lbl .ic{width:14px;height:14px;flex:none}
.pj-cover-lbl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-dim{position:absolute;top:100%;margin-top:9px;inset-inline-start:50%;translate:calc(-50% * var(--dirx)) 0;font:600 11px/1 var(--f-body);color:#fff;background:var(--label);padding:5px 8px;border-radius:6px}
.pj-txt{display:flex;flex-direction:column;gap:var(--s-3)}
.pj-txt .pc-kick{font-size:var(--t-sm)}
.pj-h{font-family:var(--f-head);font-weight:700;font-size:clamp(2.4rem,1.6rem + 3.6vw,4.4rem);line-height:1.08;letter-spacing:-.02em}
.pj-lead{font-size:var(--t-lg);color:var(--ink-2);line-height:1.65}
.pj-stat{display:flex;align-items:baseline;gap:10px;color:var(--ink-2)}
.pj-stat b{font:700 2rem/1 var(--f-head);color:var(--brand)}
.pj-act{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
@media (max-width:559px){.pj-act .btn{flex:1 1 100%}}
.pj-sec{padding-top:0}
.pj-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4)}
.pj-hi-count{font-weight:600;color:var(--ink-2)}
.pj-hi{--cw:min(86vw,760px);--side:max(var(--gut),calc((100% - 1200px) / 2));display:grid;grid-auto-flow:column;grid-auto-columns:var(--cw);gap:var(--s-4);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--side);padding:var(--s-2) var(--side) var(--s-6);scrollbar-width:none;outline:none}
.pj-hi::-webkit-scrollbar{display:none}
.pj-hi>li{scroll-snap-align:start;display:flex;align-items:center}
.pj-hi-shot{display:block;width:100%;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-2);background:var(--surface);transition:transform .5s var(--ease),box-shadow .5s}
.pj-hi-shot img{display:block;width:100%;height:auto}
@media (hover:hover){.pj-hi-shot:hover{transform:translateY(-4px);box-shadow:var(--shadow-3)}}
.pj-case{display:grid;gap:var(--s-7);max-width:1040px;margin-inline:auto}
.pj-fr-lbl{display:flex;align-items:center;gap:5px;margin-bottom:8px;font:500 12px/1 var(--f-body);color:var(--ink-3)}
.pj-fr-lbl .ic{width:14px;height:14px}
.pj-case-shot{display:block;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-2);background:var(--surface);outline:2px solid transparent;outline-offset:4px;transition:outline-color .25s,box-shadow .4s}
.pj-case-shot img{display:block;width:100%;height:auto}
@media (hover:hover){.pj-case-shot:hover{outline-color:var(--brand-2);box-shadow:var(--shadow-3)}}
@media (max-width:639px){.pj-case{gap:var(--s-5);margin-inline:calc(-1 * var(--gut) + 8px)}.pj-case-shot{border-radius:var(--r-sm)}}
.pj-more{display:flex;justify-content:center;margin-top:var(--s-7)}
.pj-next{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-5);margin-top:var(--s-8);padding:var(--s-4);border-radius:var(--r-xl);color:var(--ink)}
.pj-next-img{width:clamp(120px,30vw,320px);aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-2)}
.pj-next-img img{width:100%;height:100%;object-fit:cover}
.pj-next-txt{display:grid;gap:4px}
.pj-next-txt small{color:var(--ink-3);font-size:var(--t-sm)}
.pj-next-txt b{font:700 clamp(1.3rem,1rem + 1.2vw,2.2rem)/1.15 var(--f-head)}
.pj-next-txt span{color:var(--ink-2);font-size:var(--t-sm);line-height:1.5}
.pj-next-ic{width:30px;height:30px;color:var(--brand);transition:translate .3s var(--ease)}
@media (hover:hover){.pj-next:hover .pj-next-ic{translate:calc(var(--dirx) * 6px) 0}}
@media (max-width:559px){.pj-next{grid-template-columns:1fr auto}.pj-next-img{grid-column:1/-1;width:100%}}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;background:color-mix(in srgb,var(--bg) 94%,transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;transition:opacity .3s var(--ease)}
.lb.open{opacity:1}
.lb[hidden]{display:none}
.lb-bar{display:flex;align-items:center;gap:var(--s-3);padding:calc(env(safe-area-inset-top) + 10px) var(--gut) 10px}
.lb-count{font-weight:600;min-width:4.5em}
.lb-title{flex:1;font-weight:600;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-track{flex:1;min-height:0;display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.lb-track::-webkit-scrollbar{display:none}
.lb-track>li{scroll-snap-align:center;display:grid;place-items:center;min-height:0;padding:var(--s-3) var(--gut) calc(env(safe-area-inset-bottom) + var(--s-5));overflow-y:auto}
.lb-track img{max-width:min(100%,1400px);width:auto;height:auto;max-height:100%;object-fit:contain;border-radius:var(--r-sm);box-shadow:var(--shadow-3);background:var(--surface)}
@media (max-width:899px){.lb-track>li{place-items:start center}.lb-track img{max-height:none;width:100%}}
.lb .vw-btn{display:none}
@media (min-width:900px) and (hover:hover){.lb .vw-btn{display:grid}.lb-prev{inset-inline-start:24px}.lb-next{inset-inline-end:24px}}

@media (prefers-reduced-motion:reduce){
  .pw-slot>*{transform:none!important;opacity:1!important}
  .pc-l2,.pc-l3{translate:none!important}
  .cv-wave,.cv-sel{display:none}
}

/* counters read left to right in both languages: "01 / 05", never "05 / 01" */
.pc-n,.pw-count,.pj-pager .num,.pj-hi-count,.lb-count,.pj-stat b{direction:ltr;unicode-bidi:isolate}
/* the selection frames stay in the background: quiet, and labelled only where there is room */
@media (max-width:899px){.cv-sel b{display:none}.cv-sel{border-width:1px;width:150px;height:104px}.cv-sel-2{width:92px;height:130px}}
/* the title link is a full-size target in its own right */
.pc-t a{display:inline-flex;align-items:center;min-height:48px}
/* in the deck, a card's actions arrive when it reaches the centre */
.pw-track.is-live .pc-act{transition:opacity .35s var(--ease),visibility .35s}
.pw-track.is-live .pw-slot:not(.is-cur) .pc-act{opacity:0;visibility:hidden}
/* the pager keeps full-size buttons on the narrowest phones; the back link gives way instead */
.pj-pager .icon-btn{flex:none}
.pj-back{min-width:0}
.pj-back>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:359px){.pj-pager{gap:4px}.pj-pager .num{font-size:.8rem}}

/* ---------- timeline v2: one tidy row per role ---------- */
.gt-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-2);width:100%;min-width:0}
.gt-top b{font-weight:700;font-size:var(--t-md);min-width:0;line-height:1.3;text-wrap:balance}
.gt-yrs{flex:none;font-size:12px;font-weight:600;line-height:1;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);padding:5px 9px;border-radius:var(--r-pill)}
.gt-row:has(.gt-live) .gt-yrs{color:var(--brand);background:var(--brand-soft);border-color:var(--brand-tint)}
.gt-role{display:block;font-size:var(--t-xs);color:var(--ink-3);line-height:1.45;margin-top:3px}
@media (max-width:899px){
  .gt{padding:var(--s-3) var(--s-3) var(--s-4)}
  .gt-axis{padding-inline:8px;margin-bottom:var(--s-1)}
  .gt-axis span{border:0;padding:0;font-size:11px;letter-spacing:.02em}
  .gt-rows{gap:0}
  .gt-rows::before{display:none}
  .gt-row{min-height:0;padding:14px 8px;border-bottom:1px solid var(--line);border-radius:0}
  .gt-row:last-child{border-bottom:0}
  .gt-lbl{display:block;margin:0 0 10px;padding:0}
  /* the years live inside the track as faint ticks, so no line ever crosses the text */
  .gt-track{height:10px;border-radius:5px;
    background:repeating-linear-gradient(90deg,transparent 0 calc(100% / 6 - 1px),var(--line-2) calc(100% / 6 - 1px) calc(100% / 6)),color-mix(in srgb,var(--ink) 5%,transparent)}
  .gt-bar{border-radius:5px;box-shadow:0 4px 10px -4px rgba(74,53,212,.55)}
  .gt-live::after{width:12px;height:12px;margin-top:-6px;border-width:2px}
  .gt-key{margin-top:var(--s-3);padding-inline:8px;gap:var(--s-2) var(--s-4)}
  a.gt-row:hover{background:transparent}
  a.gt-row:active{background:var(--brand-soft)}
}
@media (min-width:900px){
  .gt-axis{margin-inline-start:300px}
  .gt-rows::before{inset-inline-start:300px}
  .gt-row{grid-template-columns:300px 1fr}
  .gt-lbl{padding-inline-end:var(--s-5)}
}

/* =====================================================================
   The opening: the hero designs itself.
   .s1 research · .s2 wireframe · .s3 type · .s4 colour · .s5 prototype · .done
   The HTML ships with every class on, so without JavaScript (and with
   reduced motion) the finished hero is simply there.
   ===================================================================== */
.hx{padding-top:calc(var(--hdr-h) + env(safe-area-inset-top) + 40px);padding-bottom:var(--s-6)}
.hx-frame{position:relative;display:grid;gap:var(--s-6);padding:var(--s-6) var(--s-4) var(--s-7);border-radius:var(--r-lg);
  border:1.5px solid color-mix(in srgb,var(--brand-2) 34%,transparent);background:color-mix(in srgb,var(--surface) 46%,transparent);
  box-shadow:var(--shadow-2);animation:enterUp .9s var(--ease) both}
@media (min-width:900px){
  .hx-frame{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:center;gap:var(--s-8);padding:var(--s-8) var(--s-7) var(--s-8);
    min-height:min(720px,calc(100svh - var(--hdr-h) - 150px))}
}
/* the frame's name sits above it, the way a canvas labels its frames */
.hx-bar{position:absolute;bottom:100%;inset-inline:2px;display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font:600 12px/1 var(--f-body);color:var(--brand)}
.hx-file{display:inline-flex;align-items:center;gap:5px}
.hx-file .ic{width:14px;height:14px}
.hx-file em{font-style:normal;color:var(--ink-3);font-weight:500}
.hx-dim{color:var(--ink-3);font-weight:500}

/* layout grid */
.hx-grid{position:absolute;inset:0 var(--s-4);display:grid;grid-template-columns:repeat(4,1fr);gap:14px;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.hx-grid i{background:color-mix(in srgb,#FF5C8A 4%,transparent);border-inline:1px solid color-mix(in srgb,#FF5C8A 9%,transparent);transform:scaleY(0);transform-origin:50% 0;transition:transform .7s var(--ease)}
.hx-grid i:nth-child(n+5){display:none}
@media (min-width:900px){.hx-grid{inset:0 var(--s-7);grid-template-columns:repeat(12,1fr);gap:20px}.hx-grid i:nth-child(n+5){display:block}}
.hx-frame.s1 .hx-grid{opacity:1}
.hx-frame.s1 .hx-grid i{transform:none}
.hx-grid i:nth-child(2){transition-delay:40ms}.hx-grid i:nth-child(3){transition-delay:80ms}.hx-grid i:nth-child(4){transition-delay:120ms}.hx-grid i:nth-child(5){transition-delay:160ms}.hx-grid i:nth-child(6){transition-delay:200ms}
.hx-grid i:nth-child(7){transition-delay:240ms}.hx-grid i:nth-child(8){transition-delay:280ms}.hx-grid i:nth-child(9){transition-delay:320ms}.hx-grid i:nth-child(10){transition-delay:360ms}.hx-grid i:nth-child(11){transition-delay:400ms}.hx-grid i:nth-child(12){transition-delay:440ms}
.hx-frame.done .hx-grid{opacity:.28}

/* content */
.hx-body{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);z-index:2}
.hx-el{position:relative}
.hx-el::before{content:"";position:absolute;inset:0;border-radius:10px;background:var(--wire);border:1px dashed var(--wire-2);opacity:0;transform:scaleX(0);transform-origin:var(--from,0) 50%;transition:transform .55s var(--ease),opacity .35s}
[dir="rtl"] .hx-el::before{--from:100%}
.hx-vis.hx-el::before{display:none}
.hx-el>*,.hx-name-wrap>.hx-name{transition:opacity .6s var(--ease),transform .6s var(--ease),color .6s,background-color .6s,box-shadow .6s,filter .6s}
.hx-frame:not(.s3) .hx-body .hx-el>*{opacity:0;transform:translateY(8px)}
.hx-frame.s2:not(.s3) .hx-el::before{opacity:1;transform:none}
.hx-body .hx-el:nth-child(2)::before{transition-delay:.12s}.hx-body .hx-el:nth-child(3)::before{transition-delay:.24s}.hx-body .hx-el:nth-child(4)::before{transition-delay:.36s}.hx-body .hx-el:nth-child(5)::before{transition-delay:.48s}.hx-body .hx-el:nth-child(6)::before{transition-delay:.6s}
.hx-frame.s3 .hx-body .hx-el:nth-child(2)>*{transition-delay:.08s}.hx-frame.s3 .hx-body .hx-el:nth-child(3)>*{transition-delay:.18s}.hx-frame.s3 .hx-body .hx-el:nth-child(4)>*{transition-delay:.26s}.hx-frame.s3 .hx-body .hx-el:nth-child(5)>*{transition-delay:.34s}.hx-frame.s3 .hx-body .hx-el:nth-child(6)>*{transition-delay:.42s}

.hx-kick{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 12px;border-radius:var(--r-pill);background:var(--glass-soft);border:1px solid var(--glass-edge);font-size:var(--t-sm);font-weight:500;color:var(--ink-2);box-shadow:var(--shadow-1)}
.hx-kick .ic{width:18px;height:18px;color:var(--brand)}
.hx-name-wrap{display:inline-block;margin-block:var(--s-2) var(--s-1)}
.hx-name{font:800 clamp(2.9rem,1.5rem + 4.6vw,5.2rem)/1.08 var(--f-head);white-space:nowrap;letter-spacing:-.025em;color:var(--ink)}
html[lang="en"] .hx-name{letter-spacing:-.035em}
.hx-sel{position:absolute;inset:-6px -12px -2px;border:1.5px solid var(--brand-2);border-radius:3px;pointer-events:none;opacity:0;transition:opacity .35s}
.hx-sel i{position:absolute;width:9px;height:9px;background:var(--surface);border:1.5px solid var(--brand-2);border-radius:2px}
.hx-sel i:nth-child(1){top:-5px;inset-inline-start:-5px}.hx-sel i:nth-child(2){top:-5px;inset-inline-end:-5px}.hx-sel i:nth-child(3){bottom:-5px;inset-inline-start:-5px}.hx-sel i:nth-child(4){bottom:-5px;inset-inline-end:-5px}
.hx-spec{position:absolute;top:100%;margin-top:9px;inset-inline-start:-2px;font:600 11px/1 var(--f-body);color:#fff;background:var(--label);padding:5px 8px;border-radius:6px;white-space:nowrap}
.hx-frame.s3:not(.done) .hx-sel{opacity:1}
.hx-role{font:700 var(--t-lg)/1.4 var(--f-head);color:var(--brand)}
.hx-lead{font-size:clamp(1.06rem,1rem + .3vw,1.25rem);line-height:1.7;color:var(--ink-2);max-width:30em}
.hx-cta{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3);width:100%}
.hx-cta .btn{flex:1 1 auto}
@media (min-width:560px){.hx-cta .btn{flex:0 0 auto}}
.hx-stats{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.hx-stats li{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 10px;border-radius:var(--r-md);background:var(--glass-soft);border:1px solid var(--glass-edge);box-shadow:var(--shadow-1)}
.hx-stats .ic{width:20px;height:20px;color:var(--brand);transition:color .6s}
.hx-stats li>span{display:grid;line-height:1.15}
.hx-stats b{font:700 1.15rem/1.1 var(--f-head)}
.hx-stats small{font-size:12px;color:var(--ink-3)}
@media (max-width:420px){.hx-stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.hx-stats li{flex-direction:column;align-items:flex-start;gap:4px;padding:10px}.hx-stats small{font-size:11px}}
/* colour arrives at its own stage */
.hx-frame:not(.s4) .hx-role{color:var(--ink-2)}
.hx-frame:not(.s4) .hx-cta .btn-p{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--wire-2)}
.hx-frame:not(.s4) .hx-cta .btn-p .ic{color:var(--ink-3)}
.hx-frame:not(.s4) .hx-stats .ic,.hx-frame:not(.s4) .hx-kick .ic{color:var(--ink-3)}

/* the screen: her own work, appearing at the colour stage */
.hx-vis{position:relative;z-index:1;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-3);border:1px solid var(--glass-edge);transition:transform .9s var(--ease)}
@media (min-width:900px){.hx-vis{transform:perspective(1500px) rotateY(calc(var(--dirx) * -9deg)) rotateX(4deg)}.hx-vis:hover{transform:perspective(1500px) rotateY(0) rotateX(0)}}
.hx-vis-bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.hx-vis-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.hx-vis-bar i:nth-child(1){background:#FF6159}.hx-vis-bar i:nth-child(2){background:#FFBD2E}.hx-vis-bar i:nth-child(3){background:#28C941}
.hx-vis-in{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--surface-2)}
/* every screen is shown whole: the frame has the screens' own 16:9 shape, and nothing zooms past its edges */
.hx-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .9s var(--ease)}
.hx-frame.s4 .hx-shot.on{opacity:1}
.hx-wire{position:absolute;inset:0;display:grid;grid-template-columns:28% 1fr;grid-template-rows:14% 1fr 1fr;gap:6%;padding:7%;opacity:0;transition:opacity .5s}
.hx-wire i{border-radius:10px;background:var(--wire);border:1px dashed var(--wire-2)}
.hx-wire i:nth-child(1){grid-column:1/-1}.hx-wire i:nth-child(2){grid-row:2/4}
.hx-frame.s2:not(.s4) .hx-wire{opacity:1}

/* research: sticky notes around the screen, and they can be moved */
.hx-notes{position:absolute;inset:0;z-index:3;pointer-events:none}
.hx-note{position:absolute;pointer-events:auto;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;padding:10px 12px;max-width:150px;border-radius:4px;background:var(--c);color:var(--sticky-ink);
  font:600 13px/1.35 var(--f-body);box-shadow:0 10px 22px -10px rgba(40,30,10,.5);translate:var(--dx,0) var(--dy,0);rotate:var(--r,0deg);
  opacity:0;scale:.6;transition:opacity .4s var(--ease),scale .5s var(--spring)}
.hx-note.is-drag{cursor:grabbing;transition:none;box-shadow:0 18px 30px -12px rgba(40,30,10,.55)}
.hx-frame.s1 .hx-note{opacity:1;scale:1}
/* they stick to the frame's edges, never onto the screen itself: above the browser bar or below the screen */
.hx-note-1{bottom:calc(100% - 22px);inset-inline-end:-3%;--r:4deg}
.hx-note-2{top:calc(100% + 4px);inset-inline-start:-4%;--r:-5deg;transition-delay:.15s}
.hx-note-3{top:calc(100% + 4px);inset-inline-end:6%;--r:3deg;transition-delay:.3s}
@media (max-width:899px){.hx-note{max-width:44%;font-size:12px;padding:8px 10px}.hx-note-1{inset-inline-end:2%}.hx-note-2{top:auto;bottom:calc(100% - 22px);inset-inline-start:3%}.hx-note-3{display:none}}

/* colour stage: the swatch */
.hx-swatch{position:absolute;z-index:4;bottom:12%;inset-inline-start:-6%;display:flex;align-items:center;gap:5px;padding:7px 10px;border-radius:var(--r-pill);background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--shadow-2);
  opacity:0;translate:0 10px;transition:opacity .4s,translate .5s var(--spring);pointer-events:none}
.hx-swatch i{width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.hx-swatch b{font:600 11px/1 var(--f-body);color:var(--ink-2);margin-inline-start:4px}
.hx-frame.s4:not(.done) .hx-swatch{opacity:1;translate:0 0}
@media (max-width:899px){.hx-swatch{bottom:auto;top:calc(100% - 60px);inset-inline-start:auto;inset-inline-end:6%}}

/* prototype: the button is wired to the work */
.hx-noodle{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}
.hx-noodle path{fill:none;stroke:var(--brand-2);stroke-width:2;stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset .9s var(--ease)}
.hx-noodle circle{fill:var(--surface);stroke:var(--brand-2);stroke-width:2;opacity:0;transition:opacity .3s}
.hx-frame.s5 .hx-noodle path{stroke-dashoffset:0}
.hx-frame.s5 .hx-noodle circle{opacity:1}
.hx-frame.done .hx-noodle{opacity:.55;transition:opacity .6s}
@media (max-width:899px){.hx-frame.done .hx-noodle{opacity:0}}
.hx-proto{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--r-pill);background:var(--brand);color:var(--brand-ink);font:600 12px/1 var(--f-body);
  box-shadow:var(--shadow-2);top:0;left:0;translate:var(--px,0) var(--py,0);opacity:0;scale:.8;transition:opacity .4s .5s,scale .4s var(--spring) .5s;pointer-events:none}
.hx-proto .ic{width:15px;height:15px}
.hx-frame.s5:not(.done) .hx-proto{opacity:1;scale:1}

/* her cursor */
.hx-cur{position:absolute;top:0;left:0;z-index:6;display:flex;align-items:flex-start;gap:2px;pointer-events:none;translate:var(--cx,60%) var(--cy,40%);transition:translate .75s var(--ease),opacity .4s}
.hx-cur svg{width:20px;height:20px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.hx-cur path{fill:var(--brand-2);stroke:#fff;stroke-width:1.4}
.hx-cur b{font:600 11px/1 var(--f-body);color:#fff;background:var(--label);padding:5px 7px;border-radius:6px 6px 6px 2px;margin-top:13px;white-space:nowrap}
.hx-frame.done .hx-cur{animation:hxIdle 7s ease-in-out infinite}
@keyframes hxIdle{0%,100%{transform:translate(0,0)}35%{transform:translate(calc(var(--dirx) * -18px),10px)}70%{transform:translate(calc(var(--dirx) * 12px),-8px)}}

/* the toolbar: her skills, one per stage */
.hx-tools{position:relative;z-index:7;display:flex;align-items:center;gap:4px;width:max-content;max-width:100%;margin:-30px auto 0;padding:6px;border-radius:var(--r-pill);
  background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--shadow-3);overflow-x:auto;scrollbar-width:none}
.hx-tools::-webkit-scrollbar{display:none}
.hx-tools button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:var(--r-pill);font:600 var(--t-sm)/1 var(--f-body);color:var(--ink-3);white-space:nowrap;transition:background-color .25s,color .25s}
.hx-tools button .ic{width:19px;height:19px}
.hx-tools button[aria-pressed="true"]{color:var(--ink)}
.hx-tools button.is-on{background:var(--brand);color:var(--brand-ink)}
.hx-tools .hx-replay{color:var(--brand);border-inline-start:1px solid var(--line);border-radius:0 var(--r-pill) var(--r-pill) 0;padding-inline:12px 14px}
[dir="rtl"] .hx-tools .hx-replay{border-radius:var(--r-pill) 0 0 var(--r-pill)}
@media (hover:hover){.hx-tools button:hover{background:var(--brand-soft);color:var(--ink)}.hx-tools button.is-on:hover{background:var(--brand);color:var(--brand-ink)}}
@media (max-width:559px){
  .hx-tools{width:calc(100% - 8px);justify-content:space-between;gap:0;padding:5px}
  .hx-tools button{flex:0 0 auto;flex-direction:column;gap:3px;min-height:52px;min-width:48px;padding:6px 6px;font-size:10.5px}
  .hx-tools button .ic{width:18px;height:18px}
  .hx-tools .hx-replay{border-radius:var(--r-lg);border-inline-start:0}
}
@media (prefers-reduced-motion:reduce){.hx-frame,.hx-frame.done .hx-cur{animation:none}.hx-vis{transform:none!important}}
/* first visit: hold the finished hero back until the build takes over (and show it anyway if it never does) */
html.intro .hx-frame:not(.hx-live)>:not(.hx-bar):not(.hx-grid){opacity:0;animation:hxSafe .01s linear 2.5s forwards}
@keyframes hxSafe{to{opacity:1}}
/* on wide screens the main button sits nearest the screen it is wired to */
@media (min-width:900px){.hx-cta .btn-p{order:2}}
@media (max-width:379px){.hx-name{white-space:normal}}
/* the name is sized by its own column, so the longer English name never runs into the screen */
.hx-body{container-type:inline-size}
@supports (font-size:1cqi){
  .hx-name{font-size:clamp(2.4rem,15.5cqi,5.4rem)}
  html[lang="en"] .hx-name{font-size:clamp(2.2rem,12.2cqi,5rem)}
}
/* the type spec rides above the name, on the side the kicker leaves empty */
.hx-spec{top:auto;bottom:100%;margin:0 0 9px;inset-inline-start:auto;inset-inline-end:-2px}
@media (max-width:899px){.hx-frame.done .hx-cur{opacity:0}}
/* the frame is a solid sheet: the canvas lives around it, never under the text */
.hx-frame{background:color-mix(in srgb,var(--surface) 84%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
[data-theme="dark"] .hx-frame{background:color-mix(in srgb,var(--surface) 88%,transparent)}
.hx-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:radial-gradient(circle,var(--dot) 1px,transparent 1.4px);background-size:20px 20px;opacity:.55;pointer-events:none}