/* =====================================================================
   ASHFLICK — dark cinematic theme
   Tokens → base → chrome (header/menu/footer) → components → pages →
   studio/admin → assistant → responsive → reduced motion.
   No inline style attributes are used anywhere (CSP forbids them).
   ===================================================================== */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/manrope-latin-400-normal.849290ef12a2eeb9.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/manrope-latin-500-normal.19874318747181a6.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/manrope-latin-600-normal.f7ac6258da20ab75.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/manrope-latin-700-normal.d2a12c85a831e4b5.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/manrope-latin-800-normal.74c161dbcbce7c35.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/instrument-serif-latin-400-italic.5a51946dfffa8297.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/jetbrains-mono-latin-400-normal.14425ba9c695763c.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/jetbrains-mono-latin-500-normal.cb182feeed4d798f.woff2) format("woff2")}
@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/bebas-neue-latin-400-normal.a7c90c89240c134f.woff2) format("woff2")}

:root{
 --bg:#0A0A0B;--bg-2:#0F0F11;--surface:#141417;--surface-2:#1B1B1F;
 --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);
 --text:#F3F1EC;--muted:#A3A09A;--dim:#77746E;
 --acc-rgb:232 176 74;--accent:#E8B04A;--accent-2:#F2C266;--accent-ink:#1A1204;--accent-soft:rgb(var(--acc-rgb) / .14);
 --rec:#FF4D3D;--ok:#3DDC84;--danger:#FF6B5E;
 --font-sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --font-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
 --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
 --font-bill:"Bebas Neue","Oswald",Impact,"Arial Narrow",sans-serif;
 --tone-1:#C8923A;--tone-2:#4E8C92;--tone-3:#A34A44;--tone-4:#7C6FB0;
 --r-sm:10px;--r:16px;--r-lg:24px;
 --ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.3,1.7,.5,1);--t-fast:180ms;--t:320ms;
 --gutter:clamp(16px,4vw,40px);--maxw:1320px;
 --h-hero:clamp(44px,8.4vw,128px);--h1:clamp(40px,6vw,88px);--h2:clamp(32px,4.4vw,60px);--h3:clamp(20px,1.8vw,26px);
 color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility}
body.menu-open{overflow:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:not-allowed;opacity:.55}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.08}
p{margin:0 0 1em}
small{font-size:.8rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent);color:var(--accent-ink)}
[hidden]{display:none!important}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.serif{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.005em}
.accent{color:var(--accent)}
.muted{color:var(--muted)}.small{font-size:.9rem}
.center{text-align:center;margin-top:36px}
.top-gap{margin-top:28px}
.eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;margin:0 0 4px}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--accent);flex:none}
.skip{position:fixed;left:12px;top:-80px;z-index:200;background:var(--accent);color:var(--accent-ink);padding:12px 16px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.preserve{white-space:pre-wrap;overflow-wrap:anywhere}
.subtle{color:var(--muted);font-size:.92rem}
.error{color:var(--danger)}
.form-error:empty{display:none}
.bot-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
main{min-height:60vh;outline:none}
.grain{position:relative;overflow:hidden}
.grain::after{content:"";position:absolute;inset:-50%;pointer-events:none;opacity:.06;z-index:2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,2%)}}
@keyframes blink{50%{opacity:.15}}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------------- buttons & links ---------------- */
.btn,.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font-weight:700;font-size:15px;letter-spacing:-.005em;line-height:1;white-space:nowrap;border:1px solid transparent;transition:transform var(--t-fast) var(--ease),background var(--t-fast),color var(--t-fast),border-color var(--t-fast);cursor:pointer;text-align:center}
.btn:active,.button:active{transform:scale(.97)}
.btn-primary,.button{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover,.button:hover{background:var(--accent-2)}
.btn-ghost,.button.ghost,.button.light{background:rgba(255,255,255,.03);color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover,.button.ghost:hover,.button.light:hover{border-color:var(--text);background:rgba(255,255,255,.06)}
.btn-sm,.button.compact{min-height:44px;padding:0 18px;font-size:14px}
.btn .play{width:26px;height:26px;border-radius:50%;background:var(--accent-ink);display:grid;place-items:center;margin-left:-10px}
.btn .play svg{width:10px;fill:var(--accent);margin-left:2px}
.link,.text-link{display:inline-flex;gap:8px;align-items:center;font-weight:600;font-size:15px;border-bottom:1px solid var(--line-2);padding-bottom:4px;transition:border-color var(--t-fast),gap var(--t-fast),color var(--t-fast)}
.link:hover,.text-link:hover{border-color:var(--accent);gap:12px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-row.left{justify-content:flex-start}

/* ---------------- header ---------------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;border-bottom:1px solid transparent;transition:background var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.hdr.scrolled{background:rgba(10,10,11,.74);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-color:var(--line)}
.hdr.hide{transform:translateY(-100%)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;position:relative}
.brand .mk-slot{display:block;width:46px;height:46px;flex:none}
.brand .mk{width:46px;height:46px;overflow:visible}
.brand-text{display:block}
.brand .wm{position:relative;display:flex;align-items:baseline;font-weight:800;font-size:21px;letter-spacing:-.025em;line-height:1}
.brand .wm em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--accent);font-size:1.24em;letter-spacing:0;margin-left:1px;display:inline-block;transform-origin:left bottom;transition:transform 480ms var(--spring)}
.brand:hover .wm em{transform:skewX(-10deg) translateX(3px)}
.brand .wm::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1.5px;background:linear-gradient(90deg,var(--rec),var(--accent) 30%,transparent);transform:scaleX(0);transform-origin:left;transition:transform 700ms var(--ease)}
.brand:hover .wm::after{transform:scaleX(1)}
.brand .idot{position:relative}
.brand .idot::after{content:"";position:absolute;left:.14em;top:.31em;width:.125em;height:.125em;border-radius:50%;background:var(--accent);transition:background 200ms,transform 300ms var(--spring)}
.brand:hover .idot::after{background:var(--rec);transform:scale(1.35);animation:blink 1s steps(2) infinite;box-shadow:0 0 8px rgba(255,77,61,.8)}
.brand small{display:block;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}
/* logo A — viewfinder */
.mk-a .br{transition:stroke 300ms}.mk-a .br path{transition:transform 520ms var(--spring)}
.brand:hover .mk-a .br{stroke:var(--accent)}
.brand:hover .mk-a .b1{transform:translate(4px,4px)}.brand:hover .mk-a .b2{transform:translate(-4px,4px)}.brand:hover .mk-a .b3{transform:translate(-4px,-4px)}.brand:hover .mk-a .b4{transform:translate(4px,-4px)}
.mk-a .ticks{opacity:0;transition:opacity 300ms}.brand:hover .mk-a .ticks{opacity:.9}
.mk-a .rec{opacity:0;transition:opacity 200ms}.brand:hover .mk-a .rec{opacity:1;animation:blink 1s steps(2) infinite}
.mk-a .gl{transform-box:fill-box;transform-origin:center}
.brand:hover .mk-a .gl,.brand.intro .mk-a .gl{animation:rack 650ms var(--ease)}
@keyframes rack{0%{filter:blur(2.4px);transform:scale(1.1)}55%{filter:blur(0);transform:scale(.97)}100%{filter:none;transform:scale(1)}}
.mk-a .shine{transform:translateX(0)}
.brand:hover .mk-a .shine,.brand.intro .mk-a .shine{animation:shine 900ms var(--ease) forwards}
@keyframes shine{to{transform:translateX(110px)}}
/* logo B — clapper */
.mk-b .arm{transform-box:view-box;transform-origin:9.5px 22px;transform:rotate(-20deg);transition:transform 420ms cubic-bezier(.6,-.5,.3,1.8)}
.brand:hover .mk-b .arm,.brand.intro .mk-b .arm{transform:rotate(0)}
.mk-b .body{transition:fill 200ms}.brand:hover .mk-b .body{fill:#2A2213}
/* logo C — cut */
.mk-c .t1,.mk-c .t2{transition:transform 520ms var(--spring)}
.mk-c .cut{opacity:.55;stroke-dasharray:60;transition:opacity 300ms}
.brand:hover .mk-c .t1,.brand.intro .mk-c .t1{transform:translate(3px,-4px)}
.brand:hover .mk-c .t2,.brand.intro .mk-c .t2{transform:translate(-3px,4px)}
.brand:hover .mk-c .cut{opacity:1;animation:draw 500ms var(--ease)}
.mk-d .blades{transform-box:fill-box;transform-origin:center;transition:transform 480ms var(--spring)}
.brand:hover .mk-d .blades,.brand.intro .mk-d .blades{transform:rotate(18deg) scale(1.06)}
.mk-d .ticks{opacity:0;transition:opacity 300ms}.brand:hover .mk-d .ticks{opacity:.9}
.mk-d .rec{opacity:0;transition:opacity 200ms}.brand:hover .mk-d .rec{opacity:1;animation:blink 1s steps(2) infinite}
@keyframes draw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
.nav{display:flex;gap:4px;padding:5px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.nav a{font-size:14px;font-weight:600;color:var(--muted);padding:8px 16px;border-radius:999px;transition:color var(--t-fast),background var(--t-fast)}
.nav a:hover{color:var(--text)}
.nav a.on{color:var(--text);background:var(--surface-2)}
.hdr-cta{display:flex;align-items:center;gap:14px}
.avail{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;color:var(--muted);white-space:nowrap}
.avail i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulse 2.2s infinite}
.avail.off i{background:var(--dim);animation:none}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{width:18px;height:1.5px;background:var(--text);transition:transform var(--t) var(--ease)}
body.menu-open .burger i:first-child{transform:translateY(3.25px) rotate(45deg)}
body.menu-open .burger i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:55;background:linear-gradient(180deg,rgba(8,8,10,.86),rgba(6,6,7,.94));-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%);padding:104px var(--gutter) calc(32px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:space-between;overflow-y:auto;clip-path:inset(0 0 100% 0);transition:clip-path 520ms var(--ease)}
body.menu-open .mmenu{clip-path:inset(0 0 0 0)}
.mmenu::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(560px 420px at 88% -8%,var(--accent-soft),transparent 65%);opacity:.7}
.mmenu nav{display:flex;flex-direction:column;gap:2px}
.mmenu nav a{display:flex;align-items:center;gap:14px;font-size:clamp(19px,4.6vw,25px);font-weight:500;letter-spacing:-.01em;padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.07);color:var(--text);opacity:0;transform:translateY(14px);transition:opacity 400ms var(--ease),transform 400ms var(--ease),color var(--t-fast),padding-left var(--t-fast)}
.mmenu nav a:active,.mmenu nav a:hover{color:var(--accent);padding-left:8px}
.mmenu nav a small{order:-1;font-family:var(--font-mono);font-size:11px;color:var(--dim);font-weight:500;letter-spacing:.08em;width:26px;flex:none}
body.menu-open .mmenu nav a{opacity:1;transform:none}
body.menu-open .mmenu nav a:nth-child(2){transition-delay:50ms}body.menu-open .mmenu nav a:nth-child(3){transition-delay:100ms}body.menu-open .mmenu nav a:nth-child(4){transition-delay:150ms}body.menu-open .mmenu nav a:nth-child(5){transition-delay:200ms}body.menu-open .mmenu nav a:nth-child(6){transition-delay:250ms}
.mmenu-foot{display:flex;flex-direction:column;gap:16px;margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
.mmenu-foot .btn{width:100%}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.mmenu{background:rgba(7,7,8,.98)}}

/* ---------------- reveal ---------------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity 800ms var(--ease),transform 800ms var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:80ms}.rv.d2{transition-delay:160ms}.rv.d3{transition-delay:240ms}
.no-js .rv{opacity:1;transform:none}

/* ---------------- sections ---------------- */
.sec{padding:clamp(80px,11vw,150px) 0}
.sec-tight{padding:clamp(56px,7vw,100px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(32px,4.5vw,56px);flex-wrap:wrap}
.sec-head h2{font-size:var(--h2);line-height:1.02;letter-spacing:-.035em;margin-top:18px;max-width:16ch}
.page-hero{padding:clamp(130px,15vw,190px) 0 clamp(36px,5vw,60px)}
.page-hero.compact{padding-bottom:28px}
.page-hero h1{font-size:var(--h1);line-height:.98;letter-spacing:-.045em;margin-top:20px;max-width:17ch;overflow-wrap:anywhere}
.page-hero .lead,.lead{color:var(--muted);font-size:clamp(16px,1.35vw,19px);max-width:58ch;margin-top:20px}
.page-body{padding-bottom:clamp(70px,9vw,120px)}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#120e0a}
.hero-media .frame,.hero-media video{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;animation:kenburns 26s var(--ease) infinite alternate;filter:saturate(.9) contrast(1.05)}
.hero-media video{opacity:0;transition:opacity 900ms var(--ease)}
.hero-media video.playing{opacity:1}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-2%,-1.5%)}}
.hero-media::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 70% 30%,transparent 0%,rgba(10,10,11,.55) 60%,rgba(10,10,11,.95) 100%),linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,0) 30%,rgba(10,10,11,.25) 60%,var(--bg) 100%)}
.lb{position:absolute;left:0;right:0;height:13vh;background:#000;z-index:3;transition:transform 1400ms cubic-bezier(.7,0,.2,1) 250ms}
.lb.t{top:0}.lb.b{bottom:0}
.hero.open .lb.t{transform:translateY(-100%)}.hero.open .lb.b{transform:translateY(100%)}
.hero.instant .lb{transition:none}
.hud{position:absolute;inset:96px var(--gutter) auto;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:rgba(243,241,236,.72);z-index:4;pointer-events:none}
.hud .rec{display:flex;align-items:center;gap:8px}
.hud .rec i{width:8px;height:8px;border-radius:50%;background:var(--rec);animation:blink 1.4s steps(2) infinite}
.corner{position:absolute;width:22px;height:22px;border:solid rgba(243,241,236,.35);z-index:4;pointer-events:none}
.corner.tl{top:88px;left:calc(var(--gutter) - 10px);border-width:1px 0 0 1px}.corner.tr{top:88px;right:calc(var(--gutter) - 10px);border-width:1px 1px 0 0}
.hero-body{position:relative;z-index:4;width:100%;padding-bottom:clamp(28px,4vw,44px)}
.hero h1{font-size:var(--h-hero);line-height:.92;letter-spacing:-.05em;margin:22px 0 0;max-width:none}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .line>span{display:inline-block;transform:translateY(105%);transition:transform 1100ms var(--ease)}
.hero.open h1 .line>span{transform:none}
.hero.open h1 .line:nth-child(2)>span{transition-delay:120ms}
.hero.instant h1 .line>span{transition:none}
.hero h1 .serif{font-size:1.08em;letter-spacing:-.02em}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:30px;flex-wrap:wrap}
.hero-row p{max-width:46ch;color:rgba(243,241,236,.8);font-size:clamp(16px,1.35vw,19px);margin:0}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-meta{display:flex;gap:14px 30px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.06em;flex-wrap:wrap}
.hero-meta>span{display:flex;align-items:baseline;gap:4px}
.hero-meta b{color:var(--text);font:700 22px var(--font-sans);letter-spacing:-.02em;margin-right:6px}
.hero-meta .stars{color:var(--accent);letter-spacing:2px;margin-right:4px}
.hero-motion-toggle{position:absolute;right:var(--gutter);bottom:clamp(28px,4vw,44px);z-index:5;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:0 14px;min-height:34px;background:rgba(10,10,11,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-motion-toggle:hover{color:var(--text)}

/* ---------------- NLE timeline ---------------- */
.tl-wrap{background:radial-gradient(90% 120% at 50% 0%,#141417 0%,var(--bg) 70%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(60px,8vw,110px) 0}
.tl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.tl-head h2{font-size:clamp(28px,3.4vw,48px);letter-spacing:-.035em;line-height:1.04;margin-top:16px;max-width:18ch}
.tl-head .muted{max-width:34ch;margin:0}
.nle{border-radius:20px;background:#0C0C0E;border:1px solid var(--line-2);box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden}
.nle-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px;border-bottom:1px solid var(--line);background:#101013;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--dim)}
.nle-bar .seq{display:flex;align-items:center;gap:10px;color:var(--muted);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nle-bar .dots{display:flex;gap:6px;flex:none}.nle-bar .dots i{width:9px;height:9px;border-radius:50%;background:#FF5F57}.nle-bar .dots i:nth-child(2){background:#FEBC2E}.nle-bar .dots i:nth-child(3){background:#28C840}
.nle-bar .tools{display:flex;gap:14px}.nle-bar .tools b{font-weight:500;color:var(--muted)}
.nle-bar .tc{color:var(--accent);font-size:13px;letter-spacing:.06em;flex:none}
.nle-body{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:18px;padding:18px}
.monitor{display:flex;flex-direction:column;gap:10px}
.mon-frame{position:relative;aspect-ratio:16/9;border-radius:10px;background:#111;overflow:hidden;box-shadow:0 0 0 1px var(--line-2);transition:filter 160ms}
.mon-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mon-frame.cut{filter:brightness(2.2) saturate(0)}
.mon-frame::before,.mon-frame::after{content:"";position:absolute;left:0;right:0;height:11%;background:#000;z-index:2}
.mon-frame::before{top:0}.mon-frame::after{bottom:0}
.mon-frame .grade{position:absolute;inset:0;background:var(--tone,var(--tone-1));mix-blend-mode:soft-light;opacity:.55;z-index:1}
.mon-frame .vig{position:absolute;inset:0;background:radial-gradient(closest-side,transparent 55%,rgba(0,0,0,.7));z-index:1}
.mon-frame .mtc{position:absolute;right:8px;bottom:calc(11% + 6px);z-index:3;font-family:var(--font-mono);font-size:10px;color:#fff;background:rgba(0,0,0,.55);padding:2px 6px;border-radius:4px}
.mon-frame .safe{position:absolute;inset:18% 8%;border:1px dashed rgba(255,255,255,.14);z-index:3}
.mon-cap{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mon-cap span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--dim)}
.mon-cap b{display:block;font-size:17px;letter-spacing:-.01em;margin-top:2px}
.mon-cap a{font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap}
.tone-1{--tone:var(--tone-1)}.tone-2{--tone:var(--tone-2)}.tone-3{--tone:var(--tone-3)}.tone-4{--tone:var(--tone-4)}
.g-frame-1{background:radial-gradient(60% 80% at 40% 50%,#e8b04a66,transparent),linear-gradient(135deg,#2a1d10,#0d0906)}
.g-frame-2{background:radial-gradient(60% 80% at 60% 40%,#4e8c9266,transparent),linear-gradient(135deg,#0d1a1c,#050909)}
.g-frame-3{background:radial-gradient(60% 80% at 50% 50%,#a34a4477,transparent),linear-gradient(135deg,#1e0b0a,#080404)}
.g-frame-4{background:radial-gradient(60% 80% at 50% 40%,#7c6fb077,transparent),linear-gradient(135deg,#141026,#07060d)}
.timeline{position:relative;display:grid;grid-template-columns:64px 1fr;gap:5px 8px;user-select:none;-webkit-user-select:none;align-self:center}
.ruler{height:24px;position:relative;display:flex;justify-content:space-between;border-bottom:1px solid var(--line-2);background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 10%) bottom/100% 9px no-repeat,repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 2%) bottom/100% 5px no-repeat}
.ruler span{font-family:var(--font-mono);font-size:10px;color:var(--dim);line-height:1}
.trk-l{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 6px;border-radius:6px;background:#141417;border:1px solid var(--line);font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--muted)}
.trk-l i{font-style:normal;font-size:9px;color:var(--dim);border:1px solid var(--line-2);border-radius:3px;padding:0 3px;line-height:14px}
.trk-l i.on{color:var(--accent);border-color:rgb(var(--acc-rgb) / .5)}
.trk{position:relative;display:flex;gap:3px;height:30px;border-radius:6px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 10%,rgba(255,255,255,.03) 10% 20%)}
.trk.v1{height:66px}.trk.a1{height:42px}.trk.a2{height:34px}
.clip{position:relative;flex:1 1 0;min-width:0;margin:2px 0;border-radius:5px;overflow:hidden;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;transition:filter var(--t-fast),box-shadow var(--t-fast)}
.trk.v2 .clip{flex:none}
.trk.v2 .c-a{margin-left:3%;width:15%}.trk.v2 .c-b{margin-left:27%;width:11%}.trk.v2 .c-c{margin-left:4%;width:9%}.trk.v2 .c-d{margin-left:11%;width:15%}
.clip.v{display:block;background:#111;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);cursor:pointer}
.clip.v:hover{filter:brightness(1.15)}
.clip.v .lbl{position:absolute;inset:0 0 auto 0;height:15px;display:flex;align-items:center;gap:8px;padding:0 7px;background:var(--tone);color:#0B0B0C;font-weight:700;white-space:nowrap;overflow:hidden;z-index:2}
.clip.v .lbl small{opacity:.65;font-weight:500;font-size:inherit}
.clip.v .frames{position:absolute;inset:15px 0 0 0;display:flex;filter:saturate(.55) contrast(1.15) brightness(.72);transition:filter var(--t)}
.clip.v .frames img{flex:none;width:auto;height:100%;aspect-ratio:16/9;object-fit:cover;border-right:1.5px solid rgba(0,0,0,.8)}
.clip.v .tint{position:absolute;inset:15px 0 0 0;background:linear-gradient(90deg,var(--tone),transparent 80%);mix-blend-mode:soft-light;opacity:.9}
.clip.v::after{content:"";position:absolute;inset:0;border-left:3px solid rgba(255,255,255,.4);border-right:3px solid rgba(255,255,255,.4);opacity:0;transition:opacity var(--t-fast);z-index:3}
.clip.v:hover::after,.clip.v:focus-visible::after{opacity:1}
.clip.v.active{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 22px rgb(var(--acc-rgb) / .25)}
.clip.v.active .frames{filter:saturate(.95) contrast(1.08) brightness(.95)}
.clip.fx{display:flex;align-items:center;padding:0 8px;white-space:nowrap;background:repeating-linear-gradient(135deg,rgba(150,140,200,.2) 0 6px,rgba(150,140,200,.08) 6px 12px);box-shadow:inset 0 0 0 1px rgba(150,140,200,.4);color:#CFC8EA}
.clip.au{color:#5FC3AE;box-shadow:inset 0 0 0 1px rgba(79,170,150,.45);background:rgba(79,170,150,.1)}
.clip.au svg,.clip.mu svg{position:absolute;inset:0;width:100%;height:100%}
.clip.mu{color:rgba(200,146,58,.75);box-shadow:inset 0 0 0 1px rgba(200,146,58,.4);background:rgba(200,146,58,.08)}
.trk.a2 .m1{flex:0 0 57%;margin-left:2%}.trk.a2 .m2{flex:0 0 36%;margin-left:3%}
.clip.mu::before,.clip.mu::after{content:"";position:absolute;top:0;bottom:0;width:14%;z-index:1}
.clip.mu::before{left:0;background:linear-gradient(to top right,transparent 49%,rgba(200,146,58,.5) 50%,transparent 51%)}
.clip.mu::after{right:0;background:linear-gradient(to top left,transparent 49%,rgba(200,146,58,.5) 50%,transparent 51%)}
.clip .cn{position:absolute;left:6px;top:2px;z-index:2;font-size:9.5px;color:rgba(255,255,255,.6)}
.playhead{position:absolute;top:0;bottom:-4px;left:0;width:1.5px;background:var(--rec);z-index:5;box-shadow:0 0 14px 1px rgba(255,77,61,.65);pointer-events:none;will-change:transform}
.playhead::before{content:"";position:absolute;top:-2px;left:-7px;width:15px;height:13px;background:var(--rec);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%);border-radius:2px}

/* ---------------- credits strip (film billing block) ---------------- */
.credits-strip{position:relative;background:#060607;overflow:hidden;border-bottom:1px solid var(--line)}
.credits-strip::before,.credits-strip::after{content:"";position:absolute;top:0;bottom:0;width:14%;z-index:2;pointer-events:none}
.credits-strip::before{left:0;background:linear-gradient(90deg,#060607,transparent)}.credits-strip::after{right:0;background:linear-gradient(-90deg,#060607,transparent)}
.sprockets{height:22px;overflow:hidden;position:relative}
.sprockets::before{content:"";position:absolute;top:50%;left:0;width:calc(100% + 30px);height:9px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(243,241,236,.13) 0 15px,transparent 15px 30px) 0 0/30px 9px repeat-x;animation:sprock 2.4s linear infinite}
@keyframes sprock{from{transform:translate(0,-50%)}to{transform:translate(-30px,-50%)}}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;width:max-content;will-change:transform}
.marquee.drag{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.marquee.drag.grabbing{cursor:grabbing}
.marquee.drag img{-webkit-user-drag:none;pointer-events:none}
.credits-strip .track{align-items:stretch}
.bill{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:22px 52px;border-right:1px solid rgba(255,255,255,.06);min-width:max-content;text-align:center}
.bill small{font-family:var(--font-serif);font-style:italic;font-size:17px;color:var(--muted);line-height:1}
.bill b{font-family:var(--font-bill);font-weight:400;font-size:clamp(32px,3.6vw,50px);letter-spacing:.09em;line-height:.95;color:#D9D5CC;text-transform:uppercase;transition:color var(--t),text-shadow var(--t)}
.bill:hover b{color:var(--accent);text-shadow:0 0 28px rgb(var(--acc-rgb) / .4)}
.bill span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.beam{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 35%,rgba(255,236,200,.05) 45%,rgba(255,236,200,.11) 50%,rgba(255,236,200,.05) 55%,transparent 65%);background-size:260% 100%;animation:beam 10s ease-in-out infinite}
@keyframes beam{0%{background-position:130% 0}100%{background-position:-130% 0}}

/* ---------------- chips / toolbar ---------------- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);font-size:13.5px;font-weight:600;color:var(--muted);transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
.chip:hover{color:var(--text);border-color:var(--text)}
.chip.on,.chip.active{background:var(--text);color:var(--bg);border-color:var(--text)}
#work-sec .chips{margin:-20px 0 26px}
.toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:28px}
.toolbar-r{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.seg{display:flex;gap:6px}
.search input{height:42px;min-width:250px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--text);padding:0 18px;font-size:14px}
.search input::placeholder{color:var(--dim)}
.search input:focus{outline:none;border-color:var(--accent)}

/* ---------------- work cards ---------------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.bento.filtered .card{grid-column:span 4;min-height:340px}
.card{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);isolation:isolate;min-height:280px;display:flex;flex-direction:column;justify-content:flex-end}
.card .card-link{position:absolute;inset:0;z-index:1}
.card .card-link:focus-visible{outline-offset:-3px;border-radius:var(--r-lg)}
.card .thumb{position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,#1b2a33,#0d1417 60%,#2a1a0c)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1100ms var(--ease)}
.card::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,transparent 30%,rgba(0,0,0,.88) 100%);pointer-events:none}
.card:hover .thumb img{transform:scale(1.06)}
.card .info{position:relative;z-index:2;padding:22px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;pointer-events:none}
.card h3{font-size:var(--h3);line-height:1.14;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(243,241,236,.72);margin-bottom:8px;display:flex;gap:12px;flex-wrap:wrap}
.pp{flex:none;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;transform:scale(.88);transition:transform var(--t) var(--ease),background var(--t);pointer-events:auto;position:relative;z-index:3}
.pp svg{width:14px;fill:#fff;margin-left:3px}
.card:hover .pp,.pp:focus-visible{transform:scale(1);background:var(--accent)}
.card:hover .pp svg,.pp:focus-visible svg{fill:var(--accent-ink)}
.card .badge,.card .rating{position:absolute;top:16px;z-index:2;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;padding:6px 10px;border-radius:999px;background:rgba(10,10,11,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line-2);text-transform:uppercase;pointer-events:none}
.card .badge{left:16px;max-width:calc(100% - 110px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .rating{right:16px}.card .rating b{color:var(--accent)}
.s-12{grid-column:span 12;min-height:520px}.s-8{grid-column:span 8;min-height:520px}.s-4{grid-column:span 4}.s-6{grid-column:span 6;min-height:400px}.s-4t{grid-column:span 4;min-height:340px}.s-12t{grid-column:span 12;min-height:380px}
.thumb-fallback,.no-cover{background:radial-gradient(70% 60% at 30% 40%,#e8b04a44,transparent),linear-gradient(135deg,#1b2a33,#0d1417 60%,#2a1a0c)}
.thumb-fallback{position:absolute;inset:0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid3 .card{min-height:0;aspect-ratio:16/11}
.grid3.reviews3{align-items:start}

/* ---------------- service rows ---------------- */
.svc{border-top:1px solid var(--line)}
.svc-row{position:relative;display:grid;grid-template-columns:70px 1.25fr 1fr 210px 60px;gap:28px;align-items:center;padding:32px 0;border-bottom:1px solid var(--line);isolation:isolate}
.svc-row::before{content:"";position:absolute;inset:0 calc(var(--gutter) * -1);background:linear-gradient(90deg,var(--accent-soft),transparent 70%);opacity:0;transition:opacity var(--t);z-index:-1}
.svc-row:hover::before,.svc-row:focus-visible::before{opacity:1}
.svc-row .n{font-family:var(--font-mono);font-size:14px;color:var(--dim)}
.svc-row h3{font-size:clamp(24px,2.8vw,40px);letter-spacing:-.03em;line-height:1.04;transition:transform var(--t) var(--ease)}
.svc-row:hover h3{transform:translateX(8px)}
.svc-row p{color:var(--muted);margin:8px 0 0;font-size:15px;max-width:44ch}
.chiplist{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.chiplist li{font-size:12.5px;font-weight:600;color:var(--muted);border:1px solid var(--line-2);padding:5px 10px;border-radius:999px}
.price{font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.04em}
.price b{display:block;font:700 22px var(--font-sans);color:var(--text);letter-spacing:-.02em;margin-bottom:4px}
.svc-row .arr{width:56px;height:56px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:18px;transition:transform var(--t) var(--ease),background var(--t),color var(--t),border-color var(--t)}
.svc-row:hover .arr{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:rotate(-45deg)}

/* ---------------- process ---------------- */
.proc{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2);position:relative}
.proc::after{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--accent);transition:width 2.4s var(--ease)}
.proc.in::after{width:100%}
.proc .step{padding:30px 26px 0 0;position:relative}
.proc .step::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--accent);z-index:1}
.proc .tc{font-family:var(--font-mono);font-size:12px;color:var(--accent);letter-spacing:.06em}
.proc h3{font-size:22px;letter-spacing:-.02em;margin:10px 0 8px}
.proc p{color:var(--muted);font-size:15px;margin:0}

/* ---------------- reviews ---------------- */
.rev-sum{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:18px}
.rev-sum p{margin:6px 0 0}
.big-score{font-size:clamp(64px,8vw,112px);font-weight:700;letter-spacing:-.06em;line-height:.9;display:block}
.stars{color:var(--accent);letter-spacing:3px;font-size:18px}
.rev-rows{display:flex;flex-direction:column;gap:14px}
.rcard{width:360px;flex:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-right:14px;display:flex;flex-direction:column;gap:12px;quotes:"\201C" "\201D"}
.rcard q{font-size:15.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rcard .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.rcard .who>div{min-width:0;flex:1}
.rcard .who b{font-size:14px;display:block;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcard .who small{font-family:var(--font-mono);font-size:11px;color:var(--dim);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcard .more{font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap}
.rcard .top{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:11px;color:var(--dim)}
.srow{color:var(--accent);letter-spacing:1.5px;font-size:13px}.srow .off{color:#3A3A40}
.av{width:36px;height:36px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);display:grid;place-items:center;font-weight:800;font-size:13px;color:var(--accent);flex:none;font-family:var(--font-sans)}
.av.big{width:56px;height:56px;font-size:18px}
.rev2{margin-top:0}
.rv-layout{display:grid;grid-template-columns:320px 1fr;gap:40px;align-items:start}
.rv-panel{position:sticky;top:100px;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:var(--bg-2);display:flex;flex-direction:column;gap:8px}
.rv-panel .btn{margin-top:12px}
.dist{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.dist div{display:grid;grid-template-columns:28px 1fr 34px;gap:10px;align-items:center;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.dist meter{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:var(--surface-2);border-radius:9px;border:0}
.dist meter::-webkit-meter-bar{background:var(--surface-2);border-radius:9px;border:0;height:6px}
.dist meter::-webkit-meter-optimum-value{background:var(--accent);border-radius:9px}
.dist meter::-moz-meter-bar{background:var(--accent);border-radius:9px}
.masonry{columns:2 320px;column-gap:14px}
.mcell{break-inside:avoid;margin-bottom:14px}
.mcell .rcard{width:auto;margin:0}
.mcell .rcard q{-webkit-line-clamp:unset;display:block}
.more-hidden{display:none}
.review-full{max-width:880px}
.review-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.review-top b{display:block;font-size:18px}.review-top small{color:var(--muted)}
.review-top .rating-display{margin-left:auto}
.review-full blockquote{font-size:clamp(20px,2.2vw,28px);line-height:1.45;letter-spacing:-.01em;margin:0 0 30px;padding-left:22px;border-left:2px solid var(--accent)}
.rating-display{display:inline-flex;align-items:center;gap:8px}
.rating-display .stars{display:flex;gap:2px}
.rating-display svg{width:17px;height:17px}
.rating-display strong{font-size:15px}
.rating-outof{color:var(--muted);font-size:13px}
.rating-breakdown{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 26px}
.rating-breakdown div{background:var(--bg);padding:14px 18px}
.rating-breakdown dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.rating-breakdown dd{margin:0}
.review-highlights h3,.review-comments h3{font-size:18px;margin:0 0 12px}
.review-highlights ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 26px}
.review-highlights li{font-size:13px;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:6px 12px}
.review-comments{margin-bottom:26px}.review-comments p{color:var(--muted)}
.review-project-link{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px;color:var(--muted)}

/* ---------------- about / portrait ---------------- */
.about{display:grid;grid-template-columns:5fr 7fr;gap:clamp(30px,6vw,90px);align-items:center}
.about h2,.about-hero h1{font-size:var(--h2);letter-spacing:-.035em;line-height:1.02;margin:18px 0 22px}
.about-hero h1{font-size:var(--h1)}
.about p{color:var(--muted);font-size:17px;max-width:56ch}
.about-cta{margin-top:28px}
.portrait{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:#1a1a1d}
.portrait picture,.portrait img{width:100%;height:100%}
.portrait img{object-fit:cover;filter:grayscale(.45) contrast(1.06);transition:filter 900ms var(--ease),transform 1200ms var(--ease)}
.portrait:hover img{filter:grayscale(0) contrast(1.02);transform:scale(1.02)}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.35) 0%,transparent 25%,transparent 55%,rgba(10,10,11,.85)),radial-gradient(closest-side,transparent 60%,rgba(0,0,0,.45));pointer-events:none}
.portrait .vf{position:absolute;width:22px;height:22px;border:solid rgba(243,241,236,.75);z-index:2;transition:all 500ms var(--spring)}
.portrait .vf.tl{top:16px;left:16px;border-width:2px 0 0 2px}.portrait .vf.tr{top:16px;right:16px;border-width:2px 2px 0 0}
.portrait .vf.bl{bottom:16px;left:16px;border-width:0 0 2px 2px}.portrait .vf.br{bottom:16px;right:16px;border-width:0 2px 2px 0}
.portrait:hover .vf{border-color:var(--accent)}
.portrait:hover .vf.tl{top:24px;left:24px}.portrait:hover .vf.tr{top:24px;right:24px}.portrait:hover .vf.bl{bottom:24px;left:24px}.portrait:hover .vf.br{bottom:24px;right:24px}
.portrait .osd{position:absolute;top:22px;left:48px;right:48px;z-index:2;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:rgba(243,241,236,.85)}
.portrait .osd i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rec);margin-right:7px;animation:blink 1.4s steps(2) infinite}
.lower3{position:absolute;left:24px;bottom:28px;right:24px;z-index:3;display:flex;flex-direction:column;gap:4px;padding:10px 16px 11px;border-left:3px solid var(--accent);background:rgba(10,10,11,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:0 8px 8px 0;width:max-content;max-width:calc(100% - 48px);transform:translateX(-8px);opacity:.92;transition:transform 500ms var(--ease),opacity 500ms}
.portrait:hover .lower3{transform:none;opacity:1}
.lower3 b{font-family:var(--font-bill);font-weight:400;font-size:26px;letter-spacing:.1em;line-height:1}
.lower3 span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.credits{margin:28px 0 0;border-top:1px solid var(--line)}
.credits div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.credits dt{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding-top:3px}
.credits dd{margin:0}

/* ---------------- FAQ ---------------- */
.faq{max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-size:clamp(18px,1.6vw,22px);font-weight:600;letter-spacing:-.01em;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);position:relative;transition:transform var(--t) var(--ease),border-color var(--t)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--text);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform var(--t)}
.faq details[open] summary i{transform:rotate(180deg);border-color:var(--accent)}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq details p{color:var(--muted);padding:0 50px 24px 0;max-width:70ch;margin:0}

/* ---------------- big CTA ---------------- */
.bigcta{position:relative;text-align:center;padding:clamp(100px,14vw,190px) 0;overflow:hidden;border-top:1px solid var(--line);isolation:isolate}
.bigcta h2{font-size:clamp(46px,9vw,150px);line-height:.9;letter-spacing:-.055em;margin:24px 0 40px}
.bigcta .eyebrow{justify-content:center}
.glow{position:absolute;left:50%;top:60%;width:70vw;height:40vw;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgb(var(--acc-rgb) / .18),transparent);pointer-events:none;z-index:-1}
.magnetic{transition:transform 200ms var(--ease),background var(--t-fast)}

/* ---------------- footer ---------------- */
.ftr{border-top:1px solid var(--line);padding:60px 0 calc(110px + env(safe-area-inset-bottom))}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.ftr-h{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 16px}
.ftr a:not(.brand){display:block;color:var(--muted);padding:6px 0;font-size:15px;transition:color var(--t-fast)}
.ftr a:not(.brand):hover{color:var(--text)}
.ftr-brand p{color:var(--muted);margin:20px 0 10px;max-width:32ch}
.ftr .mail{font-size:clamp(18px,2vw,24px);font-weight:700;color:var(--text)!important;letter-spacing:-.02em;overflow-wrap:anywhere}
.ftr-bot{display:flex;justify-content:space-between;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:12px;color:var(--dim);gap:16px;flex-wrap:wrap}

/* ---------------- project page / players ---------------- */
.player{position:relative;display:block;width:100%;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:#000;border:0}
.player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player.lite::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25);z-index:1;transition:background var(--t)}
.player.lite:hover::before{background:rgba(0,0,0,.12)}
.player.playing::before{display:none}
.pp.big{position:absolute;left:50%;top:50%;width:88px;height:88px;transform:translate(-50%,-50%);background:var(--accent);z-index:2}
.pp.big svg{width:22px;fill:var(--accent-ink);margin-left:4px}
.player.lite:hover .pp.big{transform:translate(-50%,-50%) scale(1.08)}
video.player{object-fit:contain}
.proj-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:28px 0}
.proj-meta.m3{grid-template-columns:repeat(3,1fr)}.proj-meta.m2{grid-template-columns:repeat(2,1fr)}.proj-meta.m1{grid-template-columns:1fr}
.proj-meta div{background:var(--bg);padding:18px 20px}
.proj-meta dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.proj-meta dd{margin:0;font-weight:700}
.two-col{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.two-col .rcard{width:auto;margin:14px 0 0}
.two-col .rcard q{-webkit-line-clamp:unset;display:block}
.sum-line{margin-top:18px}
.prose h2{font-size:24px;letter-spacing:-.02em;margin:0 0 12px}
.prose h2:not(:first-child){margin-top:30px}
.prose p{color:var(--muted);font-size:17px}
.prose.narrow{max-width:760px}
.nextprev{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:60px}
.nextprev a{border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:border-color var(--t-fast),background var(--t-fast)}
.nextprev a:hover{border-color:var(--accent);background:var(--accent-soft)}
.nextprev a.r{text-align:right}
.nextprev small{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--dim)}
.nextprev b{display:block;font-size:20px;letter-spacing:-.02em;margin-top:6px}

/* ---------------- tables ---------------- */
.table-wrap{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:auto;background:var(--bg-2)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:500;background:var(--surface)}
tr:last-child td{border-bottom:0}
td small{display:block;color:var(--dim);margin-top:4px}
.work-table td a strong{display:block}
.work-table tr:hover td{background:rgba(255,255,255,.02)}
.rating-inline{color:var(--accent);font-weight:700}
.pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:30px;font-family:var(--font-mono);color:var(--muted)}

/* ---------------- packages / service page ---------------- */
.pk{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.pk.n2{grid-template-columns:repeat(2,1fr);max-width:880px}.pk.n1,.pk.one{grid-template-columns:1fr;max-width:560px}
.pkg{border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;background:var(--bg-2);display:flex;flex-direction:column;gap:16px;position:relative;transition:border-color var(--t-fast),transform var(--t) var(--ease)}
.pkg:hover{transform:translateY(-4px);border-color:var(--line-2)}
.pkg.hot{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-soft),var(--bg-2) 60%)}
.hot-tag{position:absolute;top:-12px;left:30px;background:var(--accent);color:var(--accent-ink);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;padding:5px 10px;border-radius:999px}
.pkg h3{font-size:20px}
.pkg .pr{font-size:44px;font-weight:700;letter-spacing:-.04em;line-height:1}
.pkg .pr small{display:block;font-size:14px;color:var(--muted);font-weight:500;letter-spacing:0;margin-top:8px}
/* ---------- order form: package step (tiers) ---------- */
.pkg-picker{container-type:inline-size;margin-bottom:18px}
.tiers-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin:0 0 18px}
.tiers-head .eyebrow{margin:0}
.tiers-head b{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;font-weight:700}
.tiers-change{margin-left:auto;background:none;border:0;padding:4px 0;cursor:pointer;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.tiers-change:hover{color:var(--accent)}
.tiers{display:grid;grid-template-columns:1fr;gap:14px}
@container (min-width:640px){.tiers{grid-template-columns:repeat(3,1fr);align-items:stretch}}
@container (max-width:639px){.tiers{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84%,340px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 2px;padding:6px 2px 14px;margin:0 -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.tiers::-webkit-scrollbar{display:none}.tiers .tier{scroll-snap-align:center}.tiers-head::after{content:"Swipe to compare →";width:100%;order:9;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}}
.tier{position:relative;display:flex;flex-direction:column;gap:12px;padding:30px 20px 18px;border:1px solid var(--line-2);border-radius:18px;
 background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 40%),var(--bg-2);cursor:pointer;overflow:hidden;isolation:isolate;
 opacity:0;transform:translateY(14px);animation:tier-in 520ms var(--ease) forwards;animation-delay:0ms;
 transition:border-color var(--t-fast),box-shadow var(--t),transform var(--t) var(--ease);-webkit-tap-highlight-color:transparent;outline:none}
@keyframes tier-in{to{opacity:1;transform:none}}
.tiers .tier:nth-child(2){animation-delay:70ms}.tiers .tier:nth-child(3){animation-delay:140ms}
.tier:hover{border-color:rgb(var(--acc-rgb) / .45);transform:translateY(-3px)}
.tier:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.tier::after{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;opacity:0;transition:opacity var(--t);
 background:radial-gradient(120% 80% at 50% -10%,rgb(var(--acc-rgb) / .22),transparent 55%)}
.tier.hot::after{opacity:.55}
.tier.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 22px 50px -18px rgb(var(--acc-rgb) / .45);transform:translateY(-4px)}
.tier.selected::after{opacity:1}
.tier-perf{position:absolute;left:0;right:0;top:0;height:12px;background:rgba(0,0,0,.35);border-bottom:1px solid var(--line);
 -webkit-mask:radial-gradient(circle at 9px 6px,transparent 2.6px,#000 3px) 0 0/18px 12px repeat-x;mask:radial-gradient(circle at 9px 6px,transparent 2.6px,#000 3px) 0 0/18px 12px repeat-x}
.tier.selected .tier-perf{background:rgb(var(--acc-rgb) / .55)}
.tier-top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:22px}
.tier-cut{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--dim)}
.tier.selected .tier-cut{color:var(--accent)}
.tier-flag{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:4px 8px;border-radius:999px;white-space:nowrap}
.tier-name{font-family:var(--font-bill);font-size:clamp(30px,3.4vw,38px);line-height:.95;letter-spacing:.02em;text-transform:uppercase}
.tier-price{font-size:clamp(30px,3.6vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1;display:flex;flex-direction:column;gap:6px}
.tier-price small{font-size:12px;font-weight:500;letter-spacing:0;color:var(--muted)}
.tier-meter{display:flex;gap:4px}
.tier-meter i{flex:1;height:3px;border-radius:3px;background:var(--surface-2)}
.tier-meter i.on{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.tier-desc{color:var(--muted);font-size:14px;line-height:1.5}
.tier-specs{display:flex;flex-wrap:wrap;gap:6px}
.tier-specs span{display:inline-flex;align-items:baseline;gap:5px;font-size:12px;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:5px 10px}
.tier-specs b{font-family:var(--font-mono);font-size:13px;color:var(--text)}
.tier-feats{list-style:none;margin:2px 0 0;padding:12px 0 0;border-top:1px dashed var(--line-2);display:flex;flex-direction:column;gap:8px;font-size:14px;flex:1}
.tier-feats li{position:relative;padding-left:22px;line-height:1.4}
.tier-feats li::before{content:"";position:absolute;left:0;top:.3em;width:13px;height:13px;border-radius:50%;background:var(--accent-soft);
 box-shadow:inset 0 0 0 1px rgb(var(--acc-rgb) / .5)}
.tier-feats li::after{content:"";position:absolute;left:4px;top:calc(.3em + 3px);width:5px;height:3px;border-left:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);transform:rotate(-45deg)}
.tier-cta{margin-top:6px;display:block;text-align:center;font-size:13px;font-weight:700;padding:11px 12px;border-radius:12px;border:1px solid var(--line-2);transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.tier:hover .tier-cta{border-color:rgb(var(--acc-rgb) / .6)}
.tier-cta .on,.tc-cta .on{display:none}
.selected .tier-cta .on,.selected .tc-cta .on{display:inline}.selected .tier-cta .off,.selected .tc-cta .off{display:none}
.tier.selected .tier-cta{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tier-custom{position:relative;margin-top:14px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:20px 22px;border-radius:18px;cursor:pointer;
 border:1px dashed rgb(var(--acc-rgb) / .5);background:linear-gradient(110deg,rgb(var(--acc-rgb) / .08),rgba(255,255,255,.015) 45%,rgba(124,111,176,.08));
 opacity:0;transform:translateY(14px);animation:tier-in 520ms var(--ease) forwards;animation-delay:210ms;
 transition:border-color var(--t-fast),box-shadow var(--t),transform var(--t) var(--ease);-webkit-tap-highlight-color:transparent;outline:none;overflow:hidden}
.tier-custom::before{content:"";position:absolute;top:0;bottom:0;width:40%;left:-45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);transform:skewX(-18deg);animation:tc-sweep 4.5s var(--ease) infinite 1.2s;pointer-events:none}
@keyframes tc-sweep{0%{left:-45%}45%,100%{left:120%}}
.tier-custom:hover{transform:translateY(-2px);border-style:solid}
.tier-custom:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.tier-custom.selected{border-style:solid;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 20px 44px -20px rgb(var(--acc-rgb) / .5)}
.tc-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:var(--accent);background:rgb(var(--acc-rgb) / .1);border:1px solid rgb(var(--acc-rgb) / .35)}
.tc-icon svg{width:28px;height:28px}
.tier-custom:hover .tc-icon svg{animation:tc-clap 600ms var(--spring)}
@keyframes tc-clap{40%{transform:rotate(-8deg) scale(1.08)}}
.tc-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.tc-body b{font-size:clamp(17px,1.8vw,20px);letter-spacing:-.01em}
.tc-body>span:last-child{color:var(--muted);font-size:14px;line-height:1.5}
.tc-cta{font-size:13px;font-weight:700;white-space:nowrap;padding:11px 16px;border-radius:12px;border:1px solid rgb(var(--acc-rgb) / .55);color:var(--accent)}
.tier-custom.selected .tc-cta{background:var(--accent);color:var(--accent-ink)}
@container (max-width:560px){.tier-custom{grid-template-columns:auto 1fr;padding:18px}.tc-cta{grid-column:1/-1;text-align:center}}
.tier-summary,.order-recap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:18px 0 0;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);font-size:14px;color:var(--muted);min-height:48px}
.tier-summary.on,.order-recap{border-color:rgb(var(--acc-rgb) / .35);color:var(--text)}
.tier-summary .sum-k,.order-recap .sum-k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-right:4px}
.tier-summary.on .sum-k,.order-recap .sum-k{color:var(--accent)}
.tier-summary b,.order-recap b{color:var(--text)}
.tier-summary span+span::before,.order-recap span+span::before,.tier-summary b+span::before,.order-recap b+span::before{content:"·";margin-right:10px;color:var(--dim)}
.order-recap{margin:0 0 18px}
@media (prefers-reduced-motion:reduce){.tier,.tier-custom{animation:none;opacity:1;transform:none}.tier-custom::before{display:none}}
/* order step 1: selected service can be cleared by tapping it again */
.opt:has(input:checked)::after{content:"✓";position:absolute;right:14px;top:14px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--accent);color:var(--accent-ink)}
@media (hover:hover){.opt:has(input:checked):hover::after{content:"✕";background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}}
.opts .opt{padding-right:44px}
.pkg p{margin:0}
.pkg ul{list-style:none;display:flex;flex-direction:column;gap:10px;color:var(--muted);font-size:15px;margin:0;padding:0}
.pkg li::before{content:"✓";color:var(--accent);margin-right:10px;font-weight:800}
.pkg .btn{margin-top:auto}
.sticky-bar{display:none}

/* ---------------- forms ---------------- */
.form-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(24px,4vw,60px);align-items:start}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;font-size:13.5px;font-weight:600;color:var(--muted);min-width:0}
.field.wide,.wide{grid-column:1/-1}
.field small{font-weight:500;color:var(--dim)}
.field-l{font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:10px;padding:0}
.input,.field input,.field select,.field textarea{width:100%;min-height:52px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);font-size:15px;font-weight:500;padding:14px 16px;transition:border-color var(--t-fast),background var(--t-fast)}
.field textarea,textarea.input{min-height:140px;resize:vertical;line-height:1.5}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.field input[type=date]{color-scheme:dark}
select.input,.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.check{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;min-height:44px}
.check input{width:18px;height:18px;accent-color:var(--accent)}
fieldset{border:0;margin:0;padding:0;min-width:0}
.highlight-fields{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:0 0 18px}
.highlight-fields legend{font-size:13.5px;font-weight:700;padding:0 6px;color:var(--text)}
.highlight-options{display:flex;flex-wrap:wrap;gap:4px 18px}
.form-title{font-size:26px;margin-bottom:22px}
.opts-set{margin-bottom:18px}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.opt{position:relative;display:flex;flex-direction:column;gap:4px;border:1px solid var(--line-2);border-radius:14px;padding:16px 16px 16px 46px;cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.opt input{position:absolute;left:16px;top:18px;width:18px;height:18px;accent-color:var(--accent)}
.opt b{font-size:15px}.opt small{color:var(--dim);font-size:13px}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.opt:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.steps{display:flex;gap:8px;margin-bottom:30px}
.steps div{flex:1}
.steps span{display:block;height:3px;border-radius:9px;background:var(--surface-2);overflow:hidden}
.steps span i{display:block;height:100%;width:0;background:var(--accent);transition:width 500ms var(--ease)}
.steps div.done span i{width:100%}
.steps small{display:block;margin-top:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--dim)}
.steps div.done small{color:var(--text)}
.fstep{display:none}.fstep.on{display:block;animation:rise 400ms var(--ease)}
.no-js .fstep{display:block}
.step-nav{display:flex;gap:10px;flex-wrap:wrap}
.summary{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;background:var(--bg-2);position:sticky;top:100px}
.summary ol{list-style:none;counter-reset:s;margin:14px 0 0;padding:0}
.summary li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:8px;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.summary li::before{content:counter(s,decimal-leading-zero);font-family:var(--font-mono);font-size:12px;color:var(--accent);padding-top:2px}
.summary li b{color:var(--text);display:block}
.summary p{color:var(--muted)}
.order-section-title{font-size:24px;margin:56px 0 12px}
.order-section-title.first{margin-top:0}
.notice{padding:16px 20px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--muted);margin:20px 0;font-size:14.5px;line-height:1.6}
.notice strong{color:var(--text)}
.notice.error{color:var(--danger);border-color:rgba(255,107,94,.35)}
#order-confirmation{border-color:rgba(61,220,132,.35)}
.channels a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);font-size:18px;font-weight:600;transition:color var(--t-fast),padding var(--t) var(--ease)}
.channels a:hover{color:var(--accent);padding-left:8px}
.channels small{font-family:var(--font-mono);font-size:12px;color:var(--dim);font-weight:500}

/* ---------------- orders, quotes, payments ---------------- */
.order-card{border:1px solid var(--line);border-radius:var(--r);padding:22px;margin:14px 0;background:var(--bg-2)}
.order-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.order-top small{font-family:var(--font-mono);color:var(--dim);letter-spacing:.06em}
.order-top h3{font-size:19px;margin-top:4px}
.order-card>p{color:var(--muted);margin:10px 0 0}
.order-card details{margin:14px 0}
.order-card summary{cursor:pointer;color:var(--accent);font-weight:600}
.order-card .payment-note,.payment-note{display:flex;flex-direction:column;gap:4px;border-radius:12px;background:var(--surface);border:1px solid var(--line);padding:14px 16px;margin:14px 0;color:var(--muted)}
.order-card .payment-note strong{color:var(--text)}
.order-update{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
.order-update .button{margin-right:8px}
.pay-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:linear-gradient(180deg,var(--accent-soft),var(--bg-2) 45%);position:sticky;top:100px}
.pay-top{display:flex;justify-content:space-between;align-items:center}
.pay-top .lock{width:20px;color:var(--accent)}
.pay-steps{list-style:none;padding:0;margin:18px 0;counter-reset:p}
.pay-steps li{counter-increment:p;display:grid;grid-template-columns:34px 1fr;padding:14px 0;border-top:1px solid var(--line);font-size:14.5px}
.pay-steps li::before{content:counter(p,decimal-leading-zero);font-family:var(--font-mono);font-size:12px;color:var(--accent);padding-top:3px;grid-row:span 2}
.pay-steps b{display:block}.pay-steps span{color:var(--muted)}
.pay-methods{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 16px}
.pay-methods li{border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600}
.badge{display:inline-block;padding:5px 10px;border:1px solid var(--line-2);border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;color:var(--muted)}
.badge.published{background:rgba(61,220,132,.1);color:#7BE3AA;border-color:rgba(61,220,132,.3)}

/* ---------------- contact conversation ---------------- */
.conversation{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);background:var(--bg-2)}
.conversation-head h2{font-size:24px}.conversation-head p{color:var(--muted)}
.chat-messages{display:flex;flex-direction:column;gap:12px;max-height:520px;overflow-y:auto;margin:18px 0;padding-right:4px}
.chat-bubble{max-width:88%;border-radius:18px;padding:14px 16px;background:var(--surface-2)}
.chat-bubble.from-owner{background:var(--accent-soft);border:1px solid rgb(var(--acc-rgb) / .3);align-self:flex-start;border-bottom-left-radius:6px}
.chat-bubble.from-visitor{align-self:flex-end;border-bottom-right-radius:6px}
.chat-bubble>div{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.chat-bubble strong{color:var(--text)}
.chat-bubble p{white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0 0}

/* ---------------- empty / toast ---------------- */
.empty{border:1px dashed var(--line-2);border-radius:var(--r-lg);text-align:center;padding:56px 24px;color:var(--muted);background:var(--bg-2)}
.empty h3{color:var(--text);margin:12px 0 8px;font-size:22px}
.empty p{max-width:520px;margin:0 auto 22px}
.empty-icon{font-size:2rem;color:var(--accent)}
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);padding:14px 22px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);box-shadow:0 20px 40px rgba(0,0,0,.4);z-index:120;max-width:90%;display:none;font-weight:600}
#toast.show{display:block;animation:rise 300ms var(--ease)}

/* ---------------- studio (admin) ---------------- */
.section{padding:clamp(56px,7vw,90px) 0}
.section-spacer{height:80px}
.loading{padding:180px var(--gutter) 120px;color:var(--muted)}
.admin-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0}
.metric{padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)}
.metric strong{display:block;font-size:2rem;margin-bottom:4px}
.metric span{font-size:.875rem;color:var(--muted)}
.admin-nav{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:28px;overflow-x:auto}
.admin-nav button{border-bottom:2px solid transparent;padding:16px 16px;color:var(--muted);font-weight:600;white-space:nowrap}
.admin-nav button.active{border-color:var(--accent);color:var(--text)}
.admin-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.admin-head h3{font-size:22px}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.actions button{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);font-size:13px;font-weight:600}
.actions button:hover{border-color:var(--text)}
.actions button.danger,.danger{color:var(--danger);border-color:rgba(255,107,94,.4)}
.upload-box{border:1px dashed var(--line-2);border-radius:var(--r);padding:26px;margin-bottom:24px;background:var(--bg-2)}
.upload-box label{display:block;font-weight:700;margin-bottom:12px}
.upload-box p{font-size:.875rem;color:var(--muted);margin:10px 0 0}
.upload-box progress{display:block;width:100%;margin-top:18px;accent-color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.media-card{border:1px solid var(--line);padding:16px;border-radius:var(--r);min-width:0;background:var(--bg-2)}
.media-card img,.media-card video{width:100%;height:160px;object-fit:cover;background:#111;border-radius:8px}
.media-card h3{font-size:1rem;overflow-wrap:anywhere;margin:14px 0 6px}
.media-card small{color:var(--muted)}
.media-card .actions{margin-top:14px}
.cover-preview{max-width:360px;border-radius:10px;margin:8px 0}
.settings-group{margin-bottom:22px}
.settings-group legend{font-size:15px}
.settings-form>.button{margin-top:6px}
.rating-fields{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:18px}
.rating-fields legend{font-weight:700;padding:0 6px}
#rating-preview{display:block;margin-top:6px;color:var(--muted)}
.inbox-layout{display:grid;grid-template-columns:300px 1fr;gap:22px}
.inbox-thread{display:flex;flex-direction:column;gap:6px;text-align:left;width:100%;padding:16px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
.inbox-thread.selected{border-color:var(--accent)}
.inbox-thread small{color:var(--muted);line-height:1.5}
.inbox-thread em{font-size:.75rem;font-style:normal;font-weight:700;color:var(--accent)}
.inbox-thread span{font-size:.875rem}
dialog{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:30px;width:min(760px,calc(100% - 24px));max-height:90vh;background:var(--bg-2);color:var(--text);box-shadow:0 40px 120px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.dialog-head{display:flex;justify-content:space-between;gap:20px;margin-bottom:24px}
.dialog-head h2{font-size:1.75rem}
.icon-button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;flex:none}
.form-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}
.detail-sidebar{max-width:460px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;background:var(--bg-2)}
.detail-sidebar h1{font-size:34px;margin:14px 0 10px}
.detail-sidebar p{color:var(--muted)}
.detail-sidebar form .field{margin-top:12px}

/* ---------------- showreel / video lightbox ---------------- */
.showreel-dialog{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;background:rgba(5,5,6,.97);color:#fff;padding:clamp(16px,4vw,64px)}
.showreel-dialog[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;animation:rise 300ms var(--ease)}
.showreel-close{align-self:flex-end;border:1px solid var(--line-2);border-radius:999px;padding:0 18px;min-height:44px;font-weight:600}
.showreel-close:hover{border-color:var(--accent);color:var(--accent)}
.showreel-screen{width:min(1200px,100%);aspect-ratio:16/9;max-height:78dvh;border-radius:14px;overflow:hidden;background:#000}
.showreel-screen iframe,.showreel-screen video{width:100%;height:100%;border:0;object-fit:contain}
.showreel-caption{max-width:70ch;margin:0;text-align:center;color:var(--muted)}

/* ---------------- assistant ---------------- */
.ai-fab{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:80;height:58px;display:flex;align-items:center;gap:12px;padding:0 20px 0 8px;border-radius:999px;background:rgba(20,20,23,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line-2);box-shadow:0 18px 40px rgba(0,0,0,.45);transition:transform var(--t) var(--ease),padding var(--t) var(--ease),opacity var(--t),bottom var(--t) var(--ease)}
.ai-fab:hover{transform:translateY(-2px)}
.ai-fab .orb{width:42px;height:42px;border-radius:50%;position:relative;display:grid;place-items:center;flex:none}
.ai-fab .orb::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--accent),#ff8a4c,#b36bff,var(--accent));animation:spin 6s linear infinite}
.ai-fab .orb::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--bg)}
.ai-fab .orb svg{position:relative;z-index:1;width:26px}
@keyframes spin{to{transform:rotate(360deg)}}
.ai-fab .lbl{text-align:left}
.ai-fab .lbl b{display:block;font-size:14px;line-height:1.15}
.ai-fab .lbl small{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.ai-fab .lbl small i,.ai-head small i{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
.ai-fab.away{opacity:0;pointer-events:none;transform:translateY(14px)}
.ai-fab.compact{padding:0 8px}.ai-fab.compact .lbl{display:none}
body.chat-open .ai-fab,body.menu-open .ai-fab{opacity:0;pointer-events:none;transform:scale(.8)}
body.has-sticky .ai-fab{bottom:calc(20px + env(safe-area-inset-bottom))}
.ai{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:85;width:400px;height:min(640px,calc(100dvh - 40px));display:flex;flex-direction:column;border-radius:24px;background:rgba(16,16,19,.96);-webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);border:1px solid var(--line-2);box-shadow:0 40px 80px rgba(0,0,0,.6);transform-origin:bottom right;transform:scale(.6) translateY(30px);opacity:0;visibility:hidden;transition:transform 420ms var(--ease),opacity 260ms var(--ease),visibility 0s 420ms;overflow:hidden}
body.chat-open .ai{transform:none;opacity:1;visibility:visible;transition:transform 420ms var(--ease),opacity 260ms var(--ease)}
.ai-head{display:flex;align-items:center;gap:12px;padding:16px 16px 14px;border-bottom:1px solid var(--line)}
.ai-head .orb{width:40px;height:40px;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);display:grid;place-items:center;flex:none}
.ai-head .orb svg{width:28px}
.ai-head b{display:block;font-size:15px}
.ai-head small{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.ai-x{margin-left:auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-size:18px;color:var(--muted);flex:none}
.ai-x:hover{color:var(--text);border-color:var(--text)}
.ai-body{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.msg{max-width:88%;padding:12px 15px;border-radius:18px;font-size:14.5px;line-height:1.5;animation:rise 280ms var(--ease);overflow-wrap:anywhere;white-space:pre-wrap}
.msg.bot{background:var(--surface-2);border-bottom-left-radius:6px;align-self:flex-start}
.msg.me{background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:6px;align-self:flex-end;font-weight:600}
.msg.err{background:rgba(255,107,94,.12);color:#FFB3AB}
.msg-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;white-space:normal}
.msg-actions a{border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--text)}
.msg-actions a:hover{border-color:var(--accent);color:var(--accent)}
.typing{display:flex;gap:4px;padding:4px 2px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:bounce 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.ai-sugg{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 12px}
.ai-sugg button{font-size:12.5px;font-weight:600;padding:8px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);transition:color var(--t-fast),border-color var(--t-fast)}
.ai-sugg button:hover{color:var(--text);border-color:var(--accent)}
.ai-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.ai-in textarea{flex:1;min-height:48px;max-height:120px;border-radius:14px;border:1px solid var(--line-2);background:var(--bg);color:var(--text);font-size:15px;padding:13px 14px;resize:none;line-height:1.4}
.ai-in textarea:focus{outline:none;border-color:var(--accent)}
.ai-in button{width:48px;height:48px;border-radius:14px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:18px;font-weight:800;flex:none}
.ai-foot{font-family:var(--font-mono);font-size:10.5px;color:var(--dim);text-align:center;padding:0 12px 12px;margin:0}
.ai-foot a{color:var(--muted);border-bottom:1px solid var(--line-2)}
.ai-handle{display:none}

/* ---------------- responsive ---------------- */
@media (max-width:1100px){
 .nav{display:none}.burger{display:flex}.hdr-cta .avail{display:none}
 .svc-row{grid-template-columns:56px 1fr 170px 56px}.svc-row .chiplist{display:none}
 .s-8,.s-12{grid-column:span 12}.s-4,.s-4t,.s-6{grid-column:span 6;min-height:340px}.s-12t{grid-column:span 12}.s-4:not(:has(+ .s-4t)){grid-column:span 12}
 .bento.filtered .card{grid-column:span 6}
 .grid3,.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .about{grid-template-columns:1fr 1fr}
 .ftr-grid{grid-template-columns:1fr 1fr}
 .rv-layout{grid-template-columns:1fr}.rv-panel{position:static}
 .pk,.pk.n2{grid-template-columns:1fr;max-width:560px}
 .nle-body{grid-template-columns:1fr}.monitor{display:grid;grid-template-columns:minmax(0,340px) 1fr;align-items:end;gap:16px}
 .form-grid{grid-template-columns:1fr}.summary,.pay-card{position:static}
 .admin-metrics{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
 .hdr-in{height:64px}
 .hdr-start{display:none}
 .brand .mk-slot,.brand .mk{width:40px;height:40px}.brand small{display:none}.brand .wm{font-size:19px}
 .hud{top:78px;font-size:10px}.hud .fps{display:none}.corner{display:none}
 .hero{min-height:92svh}
 .hero-row{flex-direction:column;align-items:flex-start;gap:22px}
 .hero-ctas{width:100%}.hero-ctas .btn{flex:1;padding:0 16px}
 .hero-meta{gap:12px 22px}.hero-meta b{font-size:19px}
 .hero-motion-toggle{bottom:auto;top:108px}
 .monitor{grid-template-columns:1fr}
 .nle-body{padding:12px;gap:14px}.nle-bar .tools,.hide-m{display:none!important}
 .timeline{grid-template-columns:34px 1fr}.trk-l{font-size:9.5px;padding:0 4px}.trk-l i{display:none}
 .clip.v .lbl small,.clip .cn{display:none}.clip.v .lbl{padding:0 5px;font-size:9.5px}
 .bill{padding:18px 30px}
 .bento{grid-template-columns:1fr}.bento .card,.bento.filtered .card{grid-column:auto;min-height:0;aspect-ratio:4/5}
 .grid3,.grid{grid-template-columns:1fr}
 #work-sec .chips{margin:-12px 0 20px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
 .svc-row{grid-template-columns:1fr auto;gap:12px 16px;padding:26px 0}
 .svc-row .n{grid-column:1/-1}.svc-row .svc-t{grid-column:1/-1}.svc-row .chiplist{display:flex;grid-column:1/-1;order:3}.svc-row .chiplist.empty{display:none}
 .svc-row:hover h3{transform:none}
 .proc{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--line-2);margin-left:5px}
 .proc::after{display:none}
 .proc .step{padding:0 0 32px 28px}.proc .step::before{left:-5px;top:4px}
 .rcard{width:290px}
 .about{grid-template-columns:1fr}.portrait{aspect-ratio:4/5}
 .lower3{left:16px;right:16px;bottom:20px;max-width:none;width:auto}.lower3 b{font-size:22px}.portrait .osd{left:44px;right:44px}
 .credits div{grid-template-columns:1fr;gap:4px}
 .ftr-grid{grid-template-columns:1fr 1fr}.ftr-brand{grid-column:1/-1}
 .proj-meta,.proj-meta.m3,.proj-meta.m4{grid-template-columns:1fr 1fr}.proj-meta.m3 div:last-child{grid-column:1/-1}
 .two-col,.nextprev{grid-template-columns:1fr}
 .fields,.opts{grid-template-columns:1fr}
 .toolbar-r,.search,.search input{width:100%;min-width:0}
 .rating-breakdown{grid-template-columns:1fr}
 .sticky-bar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:70;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:18px;background:rgba(20,20,23,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line-2)}
 .sticky-bar small{font-family:var(--font-mono);font-size:10.5px;color:var(--dim);display:block}
 .sticky-bar b{font-size:17px}
 body.has-sticky .ai-fab{bottom:calc(88px + env(safe-area-inset-bottom))}
 body.has-sticky .ftr{padding-bottom:180px}
 .ai-fab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));padding:0 8px}.ai-fab .lbl{display:none}
 .ai{inset:auto 0 0 0;width:100%;height:92dvh;border-radius:24px 24px 0 0;transform:translateY(100%);transform-origin:bottom}
 body.chat-open .ai{transform:none}
 body.chat-open{overflow:hidden}
 .ai-handle{display:block;width:40px;height:4px;border-radius:9px;background:var(--line-2);margin:8px auto 0;flex:none}
 .ai-in textarea{font-size:16px}
 .inbox-layout{grid-template-columns:1fr}
 .admin-metrics{grid-template-columns:1fr 1fr}
 dialog{padding:22px}
 .page-hero{padding-top:118px}
 .table-wrap td,.table-wrap th{padding:12px}
 .work-table th:nth-child(3),.work-table td:nth-child(3){display:none}
}
@media (max-width:400px){.hero-ctas{flex-direction:column}.hero-ctas .btn{width:100%}}
@media (hover:none){.card .pp{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
 .rv{opacity:1;transform:none}
 .grain::after,.beam,.sprockets::before{display:none}
 .hero h1 .line>span{transform:none}
 .lb{display:none}
}
@media print{.hdr,.mmenu,.ai-fab,.ai,.ftr,.hero-media,.lb,.hud{display:none!important}body{background:#fff;color:#000}}

/* ===== 2026-09-27 update: hero reel, playable timeline, film reel, service motion ===== */
/* hero: random portfolio clips (self-hosted preview clips) */
.hero-reel{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 1.2s var(--ease),transform 7s linear;filter:saturate(.95) contrast(1.05)}
.hero-reel video.on{opacity:1;transform:scale(1.1)}
.hero-media.reel-live .frame{opacity:0;transition:opacity 1.2s}
/* timeline: tighter top, playable */
.tl-wrap{padding:clamp(34px,4.2vw,58px) 0 clamp(56px,7vw,96px)}
.tl-head{margin-bottom:22px;align-items:center}
.tl-head h2{margin-top:10px}
.nle-bar .tools{align-items:center;gap:8px}
.nle.no-clips .tl-play,.nle.no-clips #tlStop,.nle.no-clips .tl-mute,.nle.no-clips .mon-play{display:none}
.nle.no-clips .timeline{cursor:pointer}
.tl-btn{display:inline-grid;place-items:center;min-width:30px;height:26px;padding:0 8px;border-radius:7px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--text);font:inherit;font-size:11px;letter-spacing:.08em;cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.tl-btn:hover{border-color:var(--accent);color:var(--accent)}
.tl-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tl-play{min-width:38px;background:var(--accent);border-color:var(--accent);color:#0B0B0C}
.tl-play:hover{color:#0B0B0C;filter:brightness(1.08)}
.tl-play .i-pause{display:none;gap:3px}.tl-play .i-pause i{display:block;width:3px;height:10px;background:currentColor;border-radius:1px}
.tl-play.on .i-play{display:none}.tl-play.on .i-pause{display:flex}
.tl-mute{display:inline-flex;align-items:center;gap:6px}
.tl-mute .x{display:none}.tl-mute.muted .x{display:inline}.tl-mute.muted .w1,.tl-mute.muted .w2{display:none}.tl-mute.muted{color:var(--muted)}
.nle-bar .tools b{padding:0 4px}
.mon-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;background:transparent;opacity:0;transition:opacity .35s}
.mon-frame.live .mon-vid{opacity:1}
.mon-frame.live .grade,.mon-frame.live .safe{opacity:0}
.mon-frame.live .vig{opacity:.35}
.mon-play{position:absolute;inset:0;margin:auto;z-index:4;width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(10,10,11,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-size:20px;display:grid;place-items:center;cursor:pointer;transition:transform var(--t) var(--ease),background var(--t)}
.mon-play span{transform:translateX(2px)}
.mon-play:hover{transform:scale(1.08);background:var(--accent);color:#0B0B0C;border-color:var(--accent)}
.mon-play[hidden]{display:none}
.timeline{cursor:ew-resize;touch-action:pan-y}
.timeline .clip.v{cursor:pointer}
.ph-ghost{position:absolute;top:0;bottom:-4px;left:0;width:1px;background:rgba(255,255,255,.45);z-index:4;pointer-events:none;opacity:0;transition:opacity .2s}
.timeline.hovering .ph-ghost{opacity:1}
.nle:not(.is-playing) .timeline.hovering .ph-ghost{opacity:0}
.nle.is-playing .playhead{box-shadow:0 0 18px 2px rgba(255,77,61,.8)}
.timeline.scrubbing{cursor:grabbing}
/* credits: classic film reel */
.credits-strip{--film-x:0px;--reel-a:0deg;background:linear-gradient(180deg,#050506,#0b0a09 50%,#050506)}
.credits-strip .sprockets{background:#030303;height:24px}
.credits-strip .sprockets::before{animation:none!important;display:block!important;height:10px;border-radius:2px;background:radial-gradient(circle at 50% 50%,transparent 0,transparent 0) ,linear-gradient(90deg,rgba(243,241,236,.16) 0 14px,transparent 14px 30px) 0 0/30px 10px repeat-x;transform:translate(var(--film-x),-50%)}
.credits-strip .marquee{border-left:0;position:relative}
.credits-strip .bill{border-right:1px solid rgba(255,236,200,.08);box-shadow:inset -1px 0 0 rgba(0,0,0,.6)}
.credits-strip .reel{position:absolute;top:50%;z-index:3;width:clamp(84px,9vw,128px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;opacity:.9}
.credits-strip .reel-l{left:clamp(-44px,-3vw,-26px)}.credits-strip .reel-r{right:clamp(-44px,-3vw,-26px)}
.credits-strip .reel i{position:absolute;inset:0;border-radius:50%;transform:rotate(var(--reel-a));background:radial-gradient(circle at 50% 50%,#0b0b0c 0 11%,#6d6457 11.5% 14%,transparent 14.5%),radial-gradient(circle at 50% 22%,#060607 0 11%,transparent 11.5%),radial-gradient(circle at 76% 64%,#060607 0 11%,transparent 11.5%),radial-gradient(circle at 24% 64%,#060607 0 11%,transparent 11.5%),radial-gradient(circle at 50% 50%,#3a342c 0 38%,#2a2620 38.5% 46%,#4c443a 46.5% 48%,#1e1b17 48.5% 66%,#5a5145 66.5% 69%,#141210 69.5% 100%);box-shadow:0 0 0 2px #5a5145,0 10px 30px rgba(0,0,0,.7),inset 0 0 18px rgba(0,0,0,.8)}
.credits-strip .reel i::after{content:"";position:absolute;inset:6%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.07) 0 3deg,transparent 3deg 30deg)}
.credits-strip .beam{animation-duration:7s}
.credits-strip::before,.credits-strip::after{width:16%}
@keyframes af-flicker{0%,100%{opacity:1}47%{opacity:.93}50%{opacity:.98}52%{opacity:.9}}
.credits-strip .marquee .track{animation:af-flicker 3.2s steps(1) infinite}
@media (max-width:760px){.credits-strip .reel{display:none}}
/* services: themed motion preview on hover (takes the chips column on desktop) */
.svc-row .chiplist.empty{border:0;padding:0;background:none;min-height:0}
.svc-row .chiplist{transition:opacity .3s var(--ease)}
.svc-fx{position:absolute;grid-column:3/4;grid-row:1/2;inset:12px 0;z-index:1;overflow:hidden;border-radius:12px;background:#0d0d10;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 40px rgba(0,0,0,.5);opacity:0;transform:scale(.94);transition:opacity .4s var(--ease),transform .5s var(--ease);pointer-events:none}
.svc-row:hover .svc-fx,.svc-row:focus-visible .svc-fx{opacity:1;transform:none}
.svc-row:hover .chiplist,.svc-row:focus-visible .chiplist{opacity:0}
.svc-fx *{animation-play-state:paused!important}
.svc-row:hover .svc-fx *,.svc-row:focus-visible .svc-fx *{animation-play-state:running!important}
.fx-scrim{position:absolute;inset:0;z-index:3;background:radial-gradient(closest-side,transparent 60%,rgba(0,0,0,.55)),linear-gradient(180deg,rgba(0,0,0,.15),transparent 40%,rgba(0,0,0,.35));pointer-events:none}
.fx-thumbs{position:absolute;top:0;bottom:0;left:0;display:flex;gap:4px;height:100%;animation:fx-drift 22s linear infinite}
.fx-thumbs img{height:100%;width:auto;aspect-ratio:16/9;object-fit:cover;filter:saturate(.9) contrast(1.08)}
@keyframes fx-drift{to{transform:translateX(-50%)}}
/* trailer: letterbox + anamorphic flare */
.m-lb{position:absolute;left:0;right:0;height:14%;background:#000;z-index:2;animation:fx-lb 3.6s var(--ease) infinite alternate}
.m-lb.t{top:0}.m-lb.b{bottom:0}
@keyframes fx-lb{from{height:8%}to{height:17%}}
.m-flare{position:absolute;top:46%;left:-40%;width:70%;height:2px;z-index:2;background:linear-gradient(90deg,transparent,rgba(170,215,255,.85),#fff,rgba(170,215,255,.85),transparent);box-shadow:0 0 24px 6px rgba(110,180,255,.35);animation:fx-flare 3.2s ease-in-out infinite}
@keyframes fx-flare{0%{transform:translateX(0);opacity:0}20%,80%{opacity:1}100%{transform:translateX(230%);opacity:0}}
/* podcast: studio EQ */
.fx-pod{background:radial-gradient(120% 90% at 50% 120%,rgb(var(--acc-rgb) / .25),transparent 60%),#0d0c0b}
.m-eq{position:absolute;left:10%;right:10%;top:22%;bottom:16%;display:flex;align-items:center;justify-content:space-between;z-index:2}
.m-eq i{display:block;width:5px;height:100%;border-radius:4px;background:linear-gradient(180deg,#ffd27a,var(--accent) 45%,#c0612a);transform-origin:center;animation:fx-eq 1.1s ease-in-out infinite alternate}
.m-eq i:nth-child(3n){animation-duration:.8s;animation-delay:-.3s}.m-eq i:nth-child(3n+1){animation-duration:1.3s;animation-delay:-.7s}.m-eq i:nth-child(4n){animation-duration:.65s;animation-delay:-.2s}.m-eq i:nth-child(5n){animation-duration:1.5s;animation-delay:-1s}
@keyframes fx-eq{0%{transform:scaleY(.1)}50%{transform:scaleY(.75)}100%{transform:scaleY(.3)}}
.m-onair{position:absolute;left:10px;top:9px;z-index:4;display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;color:#fff;padding:3px 7px;border:1px solid rgba(255,77,61,.6);border-radius:5px;background:rgba(255,77,61,.14)}
.m-onair b{width:7px;height:7px;border-radius:50%;background:var(--rec);animation:fx-blink 1s steps(2) infinite}
@keyframes fx-blink{50%{opacity:.2}}
.m-mic{display:none}
/* social & UGC: vertical phones */
.fx-social{background:linear-gradient(135deg,#1a1024,#0e1824)}
.m-phones{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;z-index:2}
.m-phones .ph{position:relative;height:84%;aspect-ratio:9/16;border-radius:8px;border:2px solid rgba(255,255,255,.4);background:linear-gradient(160deg,#5b2a86,#1f5f8b 55%,#c2641e);overflow:hidden;animation:fx-rise 2.6s ease-in-out infinite alternate}
.m-phones .ph1{animation-delay:-.9s;background:linear-gradient(160deg,#c2185b,#6a1b9a 60%,#283593)}.m-phones .ph2{animation-delay:-1.8s;background:linear-gradient(160deg,#00897b,#1e88e5 55%,#8e24aa)}
.m-phones .ph i{position:absolute;left:12%;right:34%;height:3px;border-radius:3px;background:rgba(255,255,255,.75)}
.m-phones .ph i:nth-child(1){bottom:20%}.m-phones .ph i:nth-child(2){bottom:12%;right:52%}
.m-phones .ph i:nth-child(3){right:9%;left:auto;width:6px;height:6px;border-radius:50%;bottom:34%;background:#ff4d6d;box-shadow:0 -11px 0 #fffb,0 -22px 0 #fffb}
@keyframes fx-rise{from{transform:translateY(7%)}to{transform:translateY(-7%)}}
/* AI: shifting gradient + sparkles */
.fx-ai{background:#0b0a14}
.m-ai{position:absolute;inset:-40%;border-radius:50%;background:conic-gradient(from 0deg,#7b5cff,#2ec5ff,#ff5ca8,#ffb54a,#7b5cff);filter:blur(34px);opacity:.6;z-index:0;animation:fx-spin 6s linear infinite}
.fx-ai .fx-thumbs{opacity:.55;mix-blend-mode:screen}
@keyframes fx-spin{to{transform:rotate(360deg)}}
.m-spark{position:absolute;inset:0;z-index:2}
.m-spark i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px #b9a8ff;animation:fx-tw 1.8s ease-in-out infinite}
.m-spark i:nth-child(1){left:12%;top:30%}.m-spark i:nth-child(2){left:26%;top:66%;animation-delay:-.4s}.m-spark i:nth-child(3){left:40%;top:22%;animation-delay:-.9s}.m-spark i:nth-child(4){left:52%;top:72%;animation-delay:-1.3s}.m-spark i:nth-child(5){left:63%;top:38%;animation-delay:-.2s}.m-spark i:nth-child(6){left:74%;top:78%;animation-delay:-1.1s}.m-spark i:nth-child(7){left:83%;top:28%;animation-delay:-.6s}.m-spark i:nth-child(8){left:91%;top:56%;animation-delay:-1.6s}.m-spark i:nth-child(9){left:33%;top:48%;animation-delay:-.8s}.m-spark i:nth-child(10){left:68%;top:14%;animation-delay:-1.4s}
@keyframes fx-tw{0%,100%{transform:scale(.3);opacity:.2}50%{transform:scale(1.3);opacity:1}}
/* film & documentary: running film strip with frames */
.fx-film,.fx-doc{background:#070605}
.fx-film .fx-thumbs,.fx-doc .fx-thumbs{top:16%;bottom:16%;height:68%;gap:6px;animation-duration:14s}
.m-strip{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.m-strip span{position:absolute;top:0;bottom:0;left:0;right:-30px;background:linear-gradient(180deg,#000 0 16%,transparent 16% 84%,#000 84%),repeating-linear-gradient(90deg,rgba(255,236,200,.45) 0 12px,transparent 12px 26px) 0 5%/26px 6% repeat-x,repeating-linear-gradient(90deg,rgba(255,236,200,.45) 0 12px,transparent 12px 26px) 0 95%/26px 6% repeat-x;animation:fx-film 1.1s linear infinite}
@keyframes fx-film{to{transform:translateX(-26px)}}
.fx-doc .fx-thumbs img{filter:sepia(.35) saturate(.8) contrast(1.05)}
/* promos: focus brackets + shine */
.m-focus{position:absolute;inset:18% 26%;z-index:2;animation:fx-focus 2.2s var(--ease) infinite alternate}
.m-focus i{position:absolute;width:16px;height:16px;border:2px solid var(--accent)}
.m-focus i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.m-focus i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}.m-focus i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.m-focus i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
@keyframes fx-focus{from{transform:scale(1.2);opacity:.4}to{transform:scale(.94);opacity:1}}
.m-shine{position:absolute;top:0;bottom:0;left:-30%;width:22%;z-index:2;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);animation:fx-shine 2.6s ease-in-out infinite}
@keyframes fx-shine{to{transform:translateX(620%)}}
.fx-label{position:absolute;right:9px;bottom:7px;z-index:4;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.75);text-transform:uppercase}
@media (max-width:1100px){.svc-fx{display:none}}
@media (hover:none){.svc-fx{display:none}}
/* how it works: day markers */
.proc .tc{display:inline-block;padding:3px 9px;border:1px solid rgb(var(--acc-rgb) / .35);border-radius:999px;background:rgb(var(--acc-rgb) / .08);letter-spacing:.08em;text-transform:uppercase;font-size:11.5px}
.proc-note{margin:22px 0 0;color:var(--dim);font-size:13.5px}
/* mobile */
@media (max-width:760px){
 .nle-bar .tools.tools{display:flex!important;gap:6px}
 .tl-mute .lbl-m{display:none}
 .mon-play{width:54px;height:54px}
}
/* The site honours reduced-motion for big transitions, but these loops are the portfolio itself;
   keep them running (slower where it matters). Visitors can pause the hero, and the reel only plays on request. */
@media (prefers-reduced-motion:reduce){
 .svc-fx *{animation-duration:var(--fx-d,2.4s)!important;animation-iteration-count:infinite!important}
 .fx-thumbs{--fx-d:30s}.m-eq i{--fx-d:1.2s}.m-film,.m-strip span{--fx-d:1.6s}.m-ai{--fx-d:9s}
 .credits-strip .marquee .track{animation:none!important}
 .hero-reel video{transition-duration:1.2s,7s!important}
 .mon-vid{transition-duration:.35s!important}
}


/* ---------- service FX: UGC creator ad ---------- */
.fx-ugc{background:radial-gradient(90% 120% at 30% 50%,rgba(255,77,109,.18),transparent 60%),linear-gradient(135deg,#140d18,#0b1016)}
.m-ugc{position:absolute;inset:0;z-index:2}
.u-back{position:absolute;top:14%;height:74%;aspect-ratio:9/16;border-radius:7px;border:1px solid rgba(255,255,255,.18);filter:blur(.4px);opacity:.55}
.u-b1{left:3%;transform:rotate(-9deg);background:linear-gradient(170deg,#6a1b9a,#c2185b)}
.u-b2{left:21%;transform:rotate(8deg);background:linear-gradient(170deg,#00897b,#1e88e5)}
.u-phone{position:absolute;left:10%;top:6%;height:88%;aspect-ratio:9/16;border-radius:9px;overflow:hidden;border:2px solid rgba(255,255,255,.85);
 background:radial-gradient(80% 60% at 50% 30%,#f6b48a,transparent 70%),linear-gradient(170deg,#ff9a6a,#d0476b 55%,#4b1d6b);box-shadow:0 10px 26px rgba(0,0,0,.55);animation:u-float 3.2s ease-in-out infinite alternate}
.u-face{position:absolute;left:50%;bottom:0;width:70%;height:78%;transform:translateX(-50%);animation:u-talk .6s ease-in-out infinite alternate;transform-origin:50% 100%}
.u-face::before{content:"";position:absolute;left:50%;top:6%;width:44%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:#2a1622}
.u-face::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;border-radius:40% 40% 0 0;background:#2a1622}
.u-face i{position:absolute;left:50%;top:27%;width:10%;height:3%;border-radius:4px;background:#ff8fa3;transform:translateX(-50%);animation:u-mouth .3s steps(2) infinite}
.u-rec{position:absolute;left:5px;top:4px;display:flex;align-items:center;gap:3px;font:700 6.5px/1 var(--font-mono);color:#fff;letter-spacing:.04em}
.u-rec b{width:5px;height:5px;border-radius:50%;background:var(--rec);animation:fx-blink 1s steps(2) infinite}
.u-cap{position:absolute;left:2px;right:2px;bottom:12%;height:12px}
.u-cap i{font:800 8px/1.1 var(--font-sans);font-style:normal;text-transform:uppercase;color:#fff;-webkit-text-stroke:.3px #000;text-shadow:0 1px 0 #000;opacity:0;
 position:absolute;left:0;right:0;text-align:center;animation:u-word 2.8s linear infinite;animation-delay:-2.8s}
.u-cap i:nth-child(2){animation-delay:-2.1s}.u-cap i:nth-child(3){animation-delay:-1.4s}.u-cap i:nth-child(4){animation-delay:-.7s}
@keyframes u-word{0%{opacity:0;transform:scale(.7)}4%{opacity:1;color:#ffe066;transform:scale(1.15)}12%{color:#fff;transform:none}23%{opacity:1}25%,100%{opacity:0}}
.u-hearts{position:absolute;right:3px;bottom:22%;width:12px;height:60%}
.u-hearts i{position:absolute;bottom:0;left:0;font-style:normal;font-size:9px;color:#ff4d6d;opacity:0;animation:u-heart 2.4s ease-out infinite}
.u-hearts i:nth-child(2){animation-delay:.5s;left:3px;color:#ff8fab}.u-hearts i:nth-child(3){animation-delay:1s;color:#fff}.u-hearts i:nth-child(4){animation-delay:1.5s;left:2px}.u-hearts i:nth-child(5){animation-delay:1.9s;color:#ffb3c1}
@keyframes u-heart{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(-6px,-58px) scale(1.2) rotate(-12deg)}}
@keyframes u-talk{to{transform:translateX(-50%) rotate(1.6deg) translateY(-1.5%)}}
@keyframes u-mouth{50%{height:6%}}
@keyframes u-float{to{transform:translateY(-3%) rotate(-1deg)}}
.u-hook{position:absolute;left:37%;top:13%;font:800 11px/1 var(--font-sans);letter-spacing:-.01em;color:#111;background:#fff;padding:6px 9px;border-radius:7px;transform:rotate(-4deg);box-shadow:3px 3px 0 #ff4d6d;animation:u-pop 2.8s var(--spring) infinite}
@keyframes u-pop{0%,8%{transform:rotate(-4deg) scale(0)}18%,86%{transform:rotate(-4deg) scale(1)}100%{transform:rotate(-4deg) scale(0)}}
.u-stat{position:absolute;right:12px;top:15%;display:flex;align-items:center;gap:5px;font:500 10px/1 var(--font-mono);color:rgba(255,255,255,.7)}
.u-stat b{color:#fff;font-size:8px}.u-stat em{font-style:normal;font-weight:700;color:#fff}
.u-shop{position:absolute;left:37%;bottom:14%;font:700 10.5px/1 var(--font-sans);color:var(--accent-ink);background:var(--accent);padding:7px 11px;border-radius:999px;animation:u-shop 2.8s var(--ease) infinite}
.u-shop b{display:inline-block;animation:u-nudge .7s ease-in-out infinite alternate}
@keyframes u-shop{0%,30%{opacity:0;transform:translateX(18px)}42%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes u-nudge{to{transform:translateX(3px)}}

/* ---------- service FX: AI render ---------- */
.m-gen{position:absolute;inset:0;z-index:2;display:flex;align-items:center;gap:12px;padding:9px 12px}
.fx-ai .m-ai{opacity:.35}
.g-frame{position:relative;height:100%;aspect-ratio:16/9;border-radius:7px;overflow:hidden;box-shadow:0 0 0 1px rgba(185,168,255,.45),0 0 24px rgba(123,92,255,.35);flex:none}
.g-scene{position:absolute;inset:0;background:linear-gradient(180deg,#2b1b4d 0%,#b4476b 48%,#f3a55b 70%,#3a2233 71%,#171019 100%)}
.g-sun{position:absolute;left:58%;top:34%;width:26%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffe7a8,#ffb454 55%,transparent 72%);animation:g-sun 4.8s ease-in-out infinite}
.g-hill{position:absolute;left:-5%;right:-5%;bottom:22%;height:26%;background:#1c1224;clip-path:polygon(0 100%,0 55%,18% 30%,35% 60%,52% 20%,70% 55%,85% 35%,100% 60%,100% 100%)}
.g-car{position:absolute;left:18%;bottom:12%;width:32%;height:13%;background:#0c0a10;border-radius:40% 55% 12% 12%;animation:g-drive 4.8s linear infinite}
.g-car::after{content:"";position:absolute;right:-2px;top:40%;width:5px;height:3px;border-radius:2px;background:#ffe7a8;box-shadow:6px 0 10px 3px rgba(255,231,168,.6)}
@keyframes g-drive{from{transform:translateX(-18%)}to{transform:translateX(60%)}}
@keyframes g-sun{50%{transform:translateY(8%)}}
.g-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr)}
.g-tiles i{background:#1a1530 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
 animation:g-resolve 4.8s steps(1) infinite}
.g-tiles i:nth-child(3n+1){animation-delay:-.4s}.g-tiles i:nth-child(4n+2){animation-delay:-1.1s}.g-tiles i:nth-child(5n){animation-delay:-.7s}.g-tiles i:nth-child(7n+3){animation-delay:-1.5s}.g-tiles i:nth-child(2n+5){animation-delay:-.2s}
@keyframes g-resolve{0%{opacity:1}35%{opacity:.55}55%{opacity:.15}70%,92%{opacity:0}100%{opacity:1}}
.g-scan{position:absolute;left:0;right:0;height:18%;background:linear-gradient(180deg,transparent,rgba(185,168,255,.55),transparent);mix-blend-mode:screen;animation:g-scan 2.4s linear infinite}
@keyframes g-scan{from{top:-20%}to{top:105%}}
.g-side{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1}
.g-prompt{display:flex;align-items:center;gap:5px;font:500 9.5px/1.2 var(--font-mono);color:#e7e1ff;background:rgba(123,92,255,.16);border:1px solid rgba(185,168,255,.35);border-radius:6px;padding:6px 7px;white-space:nowrap;overflow:hidden}
.g-prompt b{color:#b9a8ff}
.g-type{display:inline-block;overflow:hidden;width:0;border-right:1.5px solid #e7e1ff;animation:g-type 4.8s steps(24) infinite,fx-blink .8s steps(2) infinite}
@keyframes g-type{0%{width:0}40%,100%{width:24ch}}
.g-prog{height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.g-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7b5cff,#2ec5ff,#ff5ca8);animation:g-prog 4.8s var(--ease) infinite}
@keyframes g-prog{0%,30%{width:0}85%,100%{width:100%}}
.g-steps{display:flex;gap:8px;font:500 8.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(231,225,255,.55)}
.g-steps em{font-style:normal}

/* ---------- service FX: book & audiobook ---------- */
.fx-book{background:radial-gradient(70% 120% at 30% 60%,rgb(var(--acc-rgb) / .2),transparent 65%),#0d0b09}
.m-book{position:absolute;inset:0;z-index:2}
.b-glow{position:absolute;left:10%;top:10%;width:34%;height:80%;border-radius:50%;background:radial-gradient(circle,rgba(255,214,140,.35),transparent 70%);filter:blur(6px);animation:fx-blink 3s ease-in-out infinite}
.b-book{position:absolute;left:12%;top:24%;width:30%;height:58%;perspective:300px}
.b-l,.b-r,.b-flip{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,#efe3c8,#fbf4e4);border-radius:3px 1px 1px 3px;box-shadow:inset -6px 0 8px -6px rgba(0,0,0,.4)}
.b-l{left:0;transform:skewY(4deg);transform-origin:right}
.b-r{right:0;transform:skewY(-4deg);transform-origin:left;border-radius:1px 3px 3px 1px;box-shadow:inset 6px 0 8px -6px rgba(0,0,0,.4)}
.b-l::after,.b-r::after{content:"";position:absolute;inset:18% 16%;background:repeating-linear-gradient(180deg,rgba(60,40,20,.35) 0 1.5px,transparent 1.5px 6px)}
.b-flip{right:0;transform-origin:left center;border-radius:1px 3px 3px 1px;animation:b-flip 2.4s var(--ease) infinite;backface-visibility:hidden}
.b-f2{animation-delay:1.2s}
@keyframes b-flip{0%{transform:rotateY(0)}60%,100%{transform:rotateY(-178deg)}}
.b-wave{position:absolute;left:50%;right:14%;top:30%;bottom:30%;display:flex;align-items:center;gap:3px}
.b-wave i{flex:1;height:100%;border-radius:3px;background:linear-gradient(180deg,var(--accent-2),var(--accent));transform:scaleY(.2);animation:fx-eq 1.1s ease-in-out infinite alternate}
.b-wave i:nth-child(odd){animation-duration:.8s}.b-wave i:nth-child(3n){animation-duration:1.4s;animation-delay:-.3s}.b-wave i:nth-child(4n+1){animation-delay:-.6s}.b-wave i:nth-child(5n+2){animation-duration:.9s;animation-delay:-.2s}
.b-head{position:absolute;right:5%;top:50%;width:22px;height:22px;transform:translateY(-60%);color:var(--accent)}
@media (prefers-reduced-motion:reduce){.u-cap i,.u-hook,.u-shop,.g-tiles i,.g-type,.g-prog i,.g-car{--fx-d:4.8s}.u-hearts i{--fx-d:2.4s}.b-flip{--fx-d:2.4s}}

/* ---------- responsive fixes (Sep 28 QA) ---------- */
.hero{padding-top:136px}
.chip{white-space:nowrap}
@media (max-width:760px){
 .hero{padding-top:150px}
 .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding:2px var(--gutter) 6px;scroll-padding:0 var(--gutter)}
 .chips::-webkit-scrollbar{display:none}
 .chip{flex:none}
}
/* short landscape phones: keep the assistant button compact so it never covers text */
@media (max-height:520px) and (orientation:landscape){
 .ai-fab{padding:0 8px;height:52px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom))}.ai-fab .lbl{display:none}
 .hero{padding-top:128px}
 .mmenu{padding-top:84px}.mmenu nav a{padding:9px 2px;font-size:18px}
}

/* ---------- pay your quote ---------- */
.paybox{margin:16px 0 6px;padding:18px;border-radius:16px;border:1px solid rgb(var(--acc-rgb) / .4);background:linear-gradient(160deg,rgb(var(--acc-rgb) / .09),rgba(255,255,255,.015) 55%),var(--bg-2);display:flex;flex-direction:column;gap:12px}
.paybox-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.paybox-top .eyebrow{margin:0 0 4px}
.paybox-amt{display:block;font-size:clamp(28px,4vw,36px);font-weight:800;letter-spacing:-.04em;line-height:1}
.paybox-lock{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ok);border:1px solid rgba(61,220,132,.35);border-radius:999px;padding:6px 10px}
.paybox-lock svg{width:12px;height:12px}
.paybox-note{margin:0;color:var(--text);font-size:14px}
.pay-opts{display:grid;gap:8px}
.pay-opt{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);transition:border-color var(--t-fast),transform var(--t-fast),background var(--t-fast);color:var(--text)}
a.pay-opt:hover,.pay-bank summary:hover{border-color:var(--accent)}
a.pay-opt:hover{transform:translateY(-1px);background:var(--surface-2)}
.pay-bank{display:block;padding:0}
.pay-bank summary{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none;border-radius:12px}
.pay-bank summary::-webkit-details-marker{display:none}
.pay-bank[open] .pay-go{transform:rotate(45deg)}
.pay-bank p{margin:0;padding:0 14px 14px 66px;font-family:var(--font-mono);font-size:13px;color:var(--muted)}
.pay-ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.pay-ic svg{width:22px;height:22px}
.pay-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.pay-tx b{font-size:15px}.pay-tx small{font-size:12.5px;color:var(--muted)}
.pay-go{font-size:16px;color:var(--muted);transition:transform var(--t-fast)}
.paid-form{margin:2px 0 0;padding-top:12px;border-top:1px dashed var(--line-2)}
.paybox-q{margin:0 0 8px;font-size:13px;color:var(--muted)}
.paid-row{display:flex;flex-wrap:wrap;gap:8px}
.paid-row select,.paid-row input{min-height:40px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);color:var(--text);padding:0 10px;font-size:14px;flex:1 1 150px;min-width:0}
.paid-row .btn{flex:none}
.paybox-done{margin:0;color:var(--ok);font-size:14px}
.paybox-fine{margin:0;font-size:12px;color:var(--dim)}
.paybox.paid{border-color:rgba(61,220,132,.45);background:rgba(61,220,132,.07)}
.paybox.paid b{color:var(--ok);font-size:17px}
@media (max-width:520px){.paid-row .btn{width:100%}.pay-bank p{padding-left:14px}}
.pay-bank summary .pay-tx b{color:var(--text)}.pay-bank summary .pay-tx small{color:var(--muted)}
/* featured work card: still the hero of the grid, but less oversized */
.bento .s-8{min-height:440px}.bento .s-12{min-height:440px}
@media (max-width:1100px){.bento .s-8,.bento .s-12{min-height:0;aspect-ratio:16/8}}
@media (max-width:760px){.bento .s-8,.bento .s-12{aspect-ratio:4/5}}
/* ---------- tighter rhythm between sections (Sep 29) ---------- */
.sec{padding:clamp(56px,7vw,104px) 0}
.sec-tight{padding:clamp(44px,5vw,76px) 0}
.sec+.sec,.sec+.sec-tight,.sec-tight+.sec,.sec-tight+.sec-tight{padding-top:clamp(20px,2.5vw,36px)}
.tl-wrap{padding:clamp(30px,3.6vw,50px) 0 clamp(44px,5.5vw,76px)}
.page-hero{padding:clamp(118px,12vw,168px) 0 clamp(28px,4vw,48px)}
.page-body{padding-bottom:clamp(52px,7vw,96px)}
.bigcta{padding:clamp(76px,10vw,140px) 0}
.ftr{padding-top:52px}.ftr-bot{margin-top:44px}
.hero-body{padding-bottom:clamp(22px,3vw,36px)}

/* hero: YouTube trailer background */
.hero-yt{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none}
.hero-yt.on{opacity:1}
.hero-yt iframe{position:absolute;top:50%;left:50%;width:max(100%,177.78svh);height:max(100%,56.25vw);transform:translate(-50%,-50%) scale(1.18);border:0;pointer-events:none}

/* ---------- PayPal checkout buttons ---------- */
.pp-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pp-btn{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;min-height:64px;border-radius:14px;border:1px solid transparent;cursor:pointer;font:inherit;transition:transform var(--t-fast),filter var(--t-fast),box-shadow var(--t-fast)}
.pp-btn svg{width:26px;height:26px;flex:none}
.pp-btn span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pp-btn b{font-size:15px;line-height:1.2}.pp-btn small{font-size:12px;opacity:.78;line-height:1.35}
.pp-paypal{background:#FFC439;color:#111}
.pp-card{background:var(--text);color:#111}
.pp-btn:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 10px 24px -12px rgba(255,196,57,.6)}
.pp-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pp-btn:disabled{opacity:.6;cursor:wait;transform:none}
.pp-btn.busy b::after{content:" …";animation:fx-blink 1s steps(2) infinite}
.pp-fine{margin:0;font-size:12px;color:var(--dim)}
.pp-error:empty{display:none}
.notice.pay-ok{border-color:rgba(61,220,132,.45);background:rgba(61,220,132,.08)}
#order-confirmation .paybox{margin:0}
#order-confirmation:has(.paybox){padding:0;border:0;background:none}
@media (max-width:640px){.pp-btns{grid-template-columns:1fr}}

.mk-e .tile{transition:fill 300ms}
.mk-e .wipe{transform:translateX(-64px);transition:transform 560ms cubic-bezier(.7,0,.2,1)}
.mk-e .ph{transform:translateX(0);opacity:0;transition:transform 560ms cubic-bezier(.7,0,.2,1),opacity 200ms}
.brand:hover .mk-e .wipe,.brand.intro .mk-e .wipe{transform:none}
.brand:hover .mk-e .ph,.brand.intro .mk-e .ph{transform:translateX(65px);opacity:1}

/* ===== Studio (admin): light paper workspace ===== */
html:not([data-theme=glass]) .studio-page main,html:not([data-theme=glass]) .studio-page dialog,html:not([data-theme=glass]) .studio-page .toast{--bg:#EEEBE5;--bg-2:#FBFAF7;--surface:#F2EFE9;--surface-2:#E6E1D8;--line:rgba(17,17,17,.1);--line-2:rgba(17,17,17,.2);--text:#141416;--muted:#5A564F;--dim:#7E796F;--accent:#141416;--accent-2:#2C2C30;--accent-ink:#FBFAF7;--accent-soft:rgba(17,17,17,.06);color-scheme:light}
html:not([data-theme=glass]) .studio-page main{background:var(--bg);color:var(--text);min-height:100vh}
html:not([data-theme=glass]) .studio-page .metric{background:var(--bg-2);box-shadow:0 1px 2px rgba(0,0,0,.04)}
html:not([data-theme=glass]) .studio-page .admin-nav button.active{border-color:#141416}
html:not([data-theme=glass]) .studio-page .btn-ghost,html:not([data-theme=glass]) .studio-page .button.ghost,html:not([data-theme=glass]) .studio-page .button.light{background:#fff}
html:not([data-theme=glass]) .studio-page .field input,html:not([data-theme=glass]) .studio-page .field select,html:not([data-theme=glass]) .studio-page .field textarea,html:not([data-theme=glass]) .studio-page .input{background:#fff}
html:not([data-theme=glass]) .studio-page .chip.on{background:#141416;color:#FBFAF7;border-color:#141416}
html:not([data-theme=glass]) .studio-page .notice{color:var(--text)}
html:not([data-theme=glass]) .studio-page .badge.published{background:rgba(29,122,70,.1);color:#1d6b40;border-color:rgba(29,122,70,.3)}
html:not([data-theme=glass]) .studio-page dialog{box-shadow:0 40px 120px rgba(0,0,0,.35)}
html:not([data-theme=glass]) .studio-page dialog::backdrop{background:rgba(20,20,22,.45)}

/* e-mail alert strip */
.notify-strip{display:flex;align-items:center;gap:14px;padding:12px 16px;margin:0 0 20px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}
.notify-strip .ns-dot{width:10px;height:10px;border-radius:50%;flex:none;background:#b9b4aa}
.notify-strip.on .ns-dot{background:#1f9d57;box-shadow:0 0 0 4px rgba(31,157,87,.15)}
.notify-strip .ns-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.notify-strip b{font-size:14px}
.notify-strip small{color:var(--muted);font-size:13px;line-height:1.45}
.notify-strip .ns-err{color:#b3261e}

/* list tools (filters + search) */
.order-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.order-tools .chips{display:flex;flex-wrap:wrap;gap:6px}
.order-tools .chip{min-height:38px;gap:8px}
.chip-n{font:500 11px/1 var(--font-mono);opacity:.65}
.chip-n:empty{display:none}
.order-search{position:relative;flex:0 1 300px;min-width:200px}
.order-search svg{position:absolute;left:14px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--dim);pointer-events:none}
.order-search input{width:100%;min-height:42px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--text);padding:0 16px 0 38px;font:500 14px var(--font-sans)}
.order-search input:focus{outline:2px solid var(--text);outline-offset:1px}
.order-none{padding:24px 4px}

/* orders & messages list */
.olist{border:1px solid var(--line);border-radius:16px;background:var(--bg-2);overflow:hidden}
.olist-row{display:grid;grid-template-columns:112px minmax(150px,1.15fr) minmax(150px,1.1fr) minmax(170px,1.6fr) 96px 150px 128px 84px;gap:14px;align-items:center;padding:14px 18px;border-top:1px solid var(--line);font-size:14px;transition:background 160ms}
.mlist .olist-row{grid-template-columns:minmax(150px,1.1fr) minmax(160px,1.2fr) minmax(200px,2fr) 96px 130px 84px}
.olist-row:first-child{border-top:0}
.olist-row:not(.olist-head):hover{background:rgba(17,17,17,.03)}
.olist-row.selected{background:rgba(17,17,17,.05)}
.olist-head{background:var(--surface);font:500 10.5px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding-top:11px;padding-bottom:11px}
.olist-row [role=cell]{min-width:0;display:flex;flex-direction:column;gap:3px}
.olist-row [role=cell]>span,.olist-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.olist-row small{color:var(--dim);font-size:12.5px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.olist-row .oc-req small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.olist-row .oc-id b{font:600 13px/1.2 var(--font-mono);letter-spacing:.02em}
.olist-row .oc-amt b{font-size:15px}
.olist-row .oc-act{align-items:flex-end}
.olist-row.is-new{box-shadow:inset 3px 0 0 #141416}
.olist-row .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rec);margin-right:7px;vertical-align:1px}
.pill{display:inline-flex;align-self:flex-start;align-items:center;max-width:100%;font:600 11.5px/1.2 var(--font-sans);padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--text);background:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill.ok{color:#17663b;background:#e6f4ea;border-color:#b7dfc4}
.pill.warn{color:#7a4b00;background:#fbf1dc;border-color:#ecd39a}
.pill.new{color:#141416;background:#fff;border-color:#141416}
.pill.mute{color:#6b675f;background:#efede8;border-color:#dcd8cf}
.pill.info{color:#1f3b63;background:#e8eef7;border-color:#c3d2ea}

/* side drawer (order details / conversation) */
dialog.side-drawer{margin:0 0 0 auto;padding:0;width:min(720px,100%);max-width:100%;height:100%;max-height:100%;border:0;border-left:1px solid var(--line-2);border-radius:0;background:var(--bg);flex-direction:column;overflow:hidden}
dialog.side-drawer[open]{display:flex;animation:sd-in 380ms var(--ease)}
dialog.side-drawer.wide{width:min(820px,100%)}
@keyframes sd-in{from{transform:translateX(48px);opacity:0}}
.sd-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.sd-head h3{font-size:20px;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-head .eyebrow{margin:0}
.sd-close{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line-2);font-size:24px;line-height:1;background:#fff;color:var(--text)}
.sd-close:hover{background:#141416;color:#fff}
.sd-body{flex:1;overflow-y:auto;padding:20px 24px 40px;overscroll-behavior:contain}
.side-drawer .order-card{margin:0;border:0;padding:0;background:transparent}
.side-drawer .conversation{border:0;border-radius:0;background:transparent;display:flex;flex-direction:column}
.side-drawer .chat-messages{max-height:none;flex:1;min-height:200px}
@media (max-width:1100px){
 .olist{border:0;background:transparent;overflow:visible;display:flex;flex-direction:column;gap:10px}
 .olist-head{display:none!important}
 .olist-row,.mlist .olist-row{grid-template-columns:1fr auto;grid-auto-flow:row;gap:8px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);padding:14px 16px}
 .olist-row:first-child{border-top:1px solid var(--line)}
 .olist-row .oc-id{grid-column:1;grid-row:1;flex-direction:row;gap:10px;align-items:baseline}
 .olist-row .oc-amt{grid-column:2;grid-row:1;align-items:flex-end}
 .olist-row .oc-client{grid-column:1/-1}
 .olist-row .oc-svc,.olist-row .oc-req,.olist-row .oc-subj{grid-column:1/-1}
 .olist-row .oc-pay,.olist-row .oc-type{grid-column:1;flex-direction:row}
 .olist-row .oc-st{grid-column:2;align-items:flex-end}
 .olist-row .oc-act{grid-column:1/-1;align-items:stretch}
 .olist-row .oc-act .button{width:100%}
 .mlist .olist-row .oc-client{grid-column:1;grid-row:1}
 .mlist .olist-row .oc-id{grid-column:2;grid-row:1;justify-content:flex-end}
 .mlist .olist-row .oc-type{grid-column:1/-1}
 .order-search{flex:1 1 100%}
}
@media (max-width:760px){.sd-head{padding:14px 16px}.sd-body{padding:16px 16px 40px}.notify-strip{flex-wrap:wrap}.notify-strip .button{width:100%}}
@media (prefers-reduced-motion:reduce){dialog.side-drawer[open]{animation:none}.mk-e .wipe,.mk-e .ph{transition:none}}
html:not([data-theme=glass]) .studio-page .hdr,html:not([data-theme=glass]) .studio-page .hdr.scrolled{background:rgba(18,18,20,.94);border-color:rgba(255,255,255,.08)}
.studio-page main .page-hero,.studio-page main .wrap>.page-hero{padding-bottom:0}
.studio-page main .button,.studio-page main .btn-primary{box-shadow:none}
.studio-page main .button:hover{box-shadow:0 6px 18px -8px rgba(0,0,0,.35)}
.mk-f{color:var(--text)}
.mk-f .hi{transform:translate(1.8px,-2.2px);transition:transform 560ms var(--spring)}
.mk-f .lo{transition:transform 560ms var(--spring)}
.brand:hover .mk-f .hi,.brand.intro .mk-f .hi{transform:translate(4.2px,-3.6px)}
.brand:hover .mk-f .lo,.brand.intro .mk-f .lo{transform:translate(-1.4px,.8px)}
@media (prefers-reduced-motion:reduce){.mk-f .hi,.mk-f .lo{transition:none}}

/* =====================================================================
   GLASS CINEMA (Oct 2026)
   Deep black, translucent "liquid glass" surfaces with real background blur,
   Cinzel title type + Inter UI type, one accent colour chosen in Studio.
   ===================================================================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;src:url(/assets/inter-latin-300-normal.be0276550393a72b.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/inter-latin-400-normal.8909904ab6c872eb.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/inter-latin-500-normal.f3779f1efccc4bdc.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/inter-latin-600-normal.f9a06e79cd3a2a20.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/inter-latin-700-normal.6f56409fd3d64bb8.woff2) format("woff2")}
html[data-theme=glass]{
 --bg:#050506;--bg-2:#0B0B0D;--surface:#141416;--surface-2:#1C1C1F;--bg-rgb:5 5 6;
 --text:#F5F5F7;--muted:#A1A1A6;--dim:#6E6E73;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);
 --glass:rgba(32,32,36,.46);--glass-2:rgba(22,22,25,.72);--glass-line:rgba(255,255,255,.11);--glass-hi:inset 0 1px 0 rgba(255,255,255,.09);--blur:saturate(180%) blur(28px);
 --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--font-display:"Inter Tight","Inter",system-ui,sans-serif;
 --r-sm:12px;--r:18px;--r-lg:24px;--ease:cubic-bezier(.22,.8,.2,1);
 --acc-rgb:227 179 91;--accent:#E3B35B;--accent-2:#F0C878;--accent-ink:#0B0B0D;--accent-soft:rgb(var(--acc-rgb) / .12);
 color-scheme:dark}
html[data-palette=orange]{--acc-rgb:244 124 48;--accent:#F47C30;--accent-2:#FF9A55}
html[data-palette=blue]{--acc-rgb:76 141 255;--accent:#4C8DFF;--accent-2:#77A8FF;--accent-ink:#fff}
html[data-palette=silver]{--acc-rgb:217 220 225;--accent:#D9DCE1;--accent-2:#FFFFFF}
html[data-palette=sage]{--acc-rgb:156 199 162;--accent:#9CC7A2;--accent-2:#B8DCBD}
html[data-palette=rose]{--acc-rgb:238 154 180;--accent:#EE9AB4;--accent-2:#F7B6CA}
html[data-theme=glass] body{background:var(--bg);color:var(--text);font-family:var(--font-sans);letter-spacing:-.006em}
html[data-theme=glass] ::selection{background:var(--accent);color:var(--accent-ink)}
/* type */
html[data-theme=glass] .sec-head h2,html[data-theme=glass] .page-hero h1,html[data-theme=glass] .bigcta h2,html[data-theme=glass] .hero h1{font-family:var(--font-display);font-weight:600;letter-spacing:.03em;line-height:1.06}
html[data-theme=glass] .sec-head h2{font-size:clamp(28px,3.6vw,52px);max-width:22ch}
html[data-theme=glass] .page-hero h1{font-size:clamp(34px,5vw,72px)}
html[data-theme=glass] .bigcta h2{font-size:clamp(38px,6vw,92px);line-height:1.04}
html[data-theme=glass] .serif,html[data-theme=glass] .serif.accent,html[data-theme=glass] .accent.serif{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;font-size:1em;color:var(--muted)}
html[data-theme=glass] .hero h1 .serif{font-size:1em}
html[data-theme=glass] h3{font-family:var(--font-sans);font-weight:600;letter-spacing:-.015em}
html[data-theme=glass] .eyebrow{font-family:var(--font-sans);font-weight:500;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
html[data-theme=glass] .eyebrow::before{width:6px;height:6px;border-radius:50%;background:var(--accent)}
/* buttons: iOS-like */
html[data-theme=glass] .btn,html[data-theme=glass] .button{border-radius:14px;font-weight:600;letter-spacing:-.005em;min-height:50px}
html[data-theme=glass] .btn-sm,html[data-theme=glass] .button.compact{min-height:42px;border-radius:12px}
html[data-theme=glass] .btn-primary,html[data-theme=glass] .button:not(.ghost):not(.light){background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px -12px rgb(var(--acc-rgb) / .55)}
html[data-theme=glass] .btn-primary:hover,html[data-theme=glass] .button:not(.ghost):not(.light):hover{background:var(--accent-2)}
html[data-theme=glass] .btn-ghost,html[data-theme=glass] .button.ghost,html[data-theme=glass] .button.light{background:var(--glass);border-color:var(--glass-line);color:var(--text);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-hi)}
html[data-theme=glass] .btn-ghost:hover,html[data-theme=glass] .button.ghost:hover{background:rgba(60,60,66,.55);border-color:rgba(255,255,255,.2)}
html[data-theme=glass] .chip{border-radius:999px;background:var(--glass);border-color:var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:var(--muted)}
html[data-theme=glass] .chip.on,html[data-theme=glass] .chip.active{background:var(--text);color:#000;border-color:var(--text)}
html[data-theme=glass] .link:hover{color:var(--accent)}
/* header: floating glass bar */
html[data-theme=glass] .hdr,html[data-theme=glass] .hdr.scrolled{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-theme=glass] .hdr-in{height:62px;margin-top:12px;padding:0 10px 0 16px;border-radius:20px;background:rgba(18,18,21,.38);border:1px solid var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-hi),0 18px 40px -24px rgba(0,0,0,.8);transition:background .4s}
html[data-theme=glass] .hdr.scrolled .hdr-in{background:rgba(18,18,21,.62)}
html[data-theme=glass] .nav{background:none;border:0}
html[data-theme=glass] .nav a{border-radius:12px;font-weight:500;font-size:14.5px}
html[data-theme=glass] .nav a[aria-current],html[data-theme=glass] .nav a.on{background:rgba(255,255,255,.1)}
html[data-theme=glass] .brand .mk-slot,html[data-theme=glass] .brand .mk{width:38px;height:38px}
html[data-theme=glass] .brand .wm{font-family:var(--font-sans);font-weight:700;font-size:19px;letter-spacing:-.03em}
html[data-theme=glass] .brand .wm em{font-family:inherit;font-style:normal;font-weight:700;font-size:1em;color:var(--text);letter-spacing:inherit;margin:0}
html[data-theme=glass] .brand .idot::after{background:var(--accent)}
html[data-theme=glass] .brand .wm::after{background:linear-gradient(90deg,var(--accent),transparent)}
html[data-theme=glass] .brand small{font-family:var(--font-sans);font-weight:500;letter-spacing:.2em;margin-top:6px}
html[data-theme=glass] .hdr-start{min-height:42px}
html[data-theme=glass] .mmenu{background:rgba(8,8,10,.55);-webkit-backdrop-filter:saturate(180%) blur(36px);backdrop-filter:saturate(180%) blur(36px)}
/* hero: cinematic title card, very little text */
html[data-theme=glass] .hero{min-height:100svh;justify-content:center;text-align:center}
html[data-theme=glass] .hero .hud,html[data-theme=glass] .hero .corner,html[data-theme=glass] .hero-row p,html[data-theme=glass] .hero-meta{display:none}
html[data-theme=glass] .hero-motion-toggle{border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);padding:8px 14px;font-family:var(--font-sans);bottom:calc(8.5vh + 18px)}
html[data-theme=glass] .hero-body{padding:0 var(--gutter);display:flex;flex-direction:column;align-items:center}
html[data-theme=glass] .hero .eyebrow{justify-content:center;color:rgba(245,245,247,.8)}
html[data-theme=glass] .hero h1{font-size:clamp(34px,6.2vw,100px);max-width:16ch;margin:18px auto 0;text-shadow:0 10px 50px rgba(0,0,0,.5)}
html[data-theme=glass] .hero h1 .line{display:block}
html[data-theme=glass] .hero-row{justify-content:center;margin-top:34px}
html[data-theme=glass] .hero-ctas{justify-content:center}
html[data-theme=glass] .hero .lb{height:8.5vh;background:#000}
html[data-theme=glass] .hero.open .lb.t,html[data-theme=glass] .hero.open .lb.b{transform:none}
html[data-theme=glass] .hero-media::after{background:radial-gradient(90% 75% at 50% 50%,rgba(0,0,0,.05) 0%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.92) 100%),linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 65%,var(--bg) 100%)}
html[data-theme=glass] .hero-body::after{content:"";display:block;width:1px;height:46px;margin:44px auto 0;background:linear-gradient(var(--text),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* timeline section: dark stage, key light, vignette, grain */
html[data-theme=glass] .tl-wrap{position:relative;isolation:isolate;background:radial-gradient(60% 55% at 50% 0%,rgba(255,255,255,.07),transparent 65%),radial-gradient(50% 45% at 50% 100%,rgb(var(--acc-rgb) / .07),transparent 70%),#070708;border-color:var(--line)}
html[data-theme=glass] .tl-wrap::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.75) 100%)}
html[data-theme=glass] .tl-wrap::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-theme=glass] .nle{border-radius:22px;background:rgba(20,20,23,.6);border:1px solid var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-hi),0 40px 90px -40px rgba(0,0,0,.9)}
html[data-theme=glass] .mon-frame{border-radius:12px;overflow:hidden}
html[data-theme=glass] .credits-strip{background:#030303}
/* ---- portfolio: tidy mosaic (desktop) / swipe row (phone), captions on glass ---- */
html[data-theme=glass] .bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
html[data-theme=glass] .bento>.card{grid-column:span 1;min-height:0;aspect-ratio:16/9}
html[data-theme=glass] .bento>.card:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
html[data-theme=glass] .bento.filtered>.card,html[data-theme=glass] .bento.filtered>.card:first-child{grid-column:span 1;grid-row:auto;aspect-ratio:16/9}
html[data-theme=glass] .card{border-radius:18px;background:var(--surface);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 20px 50px -30px rgba(0,0,0,.9);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
html[data-theme=glass] .card::before{background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.55) 100%)}
html[data-theme=glass] .card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(255,255,255,.16),0 30px 60px -30px rgba(0,0,0,1)}
html[data-theme=glass] .card:hover .thumb img{transform:scale(1.04)}
html[data-theme=glass] .card .info{position:absolute;left:10px;right:10px;bottom:10px;padding:9px 12px;border-radius:12px;background:rgba(20,20,23,.5);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);align-items:center;gap:10px}
html[data-theme=glass] .card .info>div{min-width:0;display:flex;flex-direction:column-reverse;gap:1px}
html[data-theme=glass] .card h3{font-size:14px;line-height:1.3;font-weight:600;-webkit-line-clamp:1}
html[data-theme=glass] .card .meta{font-family:var(--font-sans);text-transform:none;letter-spacing:0;font-size:11.5px;color:rgba(245,245,247,.62);margin:0;gap:6px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
html[data-theme=glass] .card .meta span+span::before{content:"·";margin-right:6px}
html[data-theme=glass] .bento>.card:first-child .info{left:14px;right:auto;bottom:14px;max-width:calc(100% - 28px);padding:12px 16px}
html[data-theme=glass] .bento>.card:first-child h3{font-size:17px}
html[data-theme=glass] .card .badge,html[data-theme=glass] .card .rating{border-radius:999px;font-family:var(--font-sans);letter-spacing:.02em;font-weight:600;font-size:10.5px;padding:5px 10px;background:rgba(20,20,23,.5);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
html[data-theme=glass] .card .badge{text-transform:none}
html[data-theme=glass] .bento>.card:not(:first-child) .badge{display:none}
html[data-theme=glass] .card .rating b{color:var(--accent)}
html[data-theme=glass] .card .pp{width:34px;height:34px;transform:none;background:rgba(255,255,255,.14)}
html[data-theme=glass] .card:hover .pp{background:var(--accent)}
html[data-theme=glass] .grid3:not(.reviews3){gap:16px}
html[data-theme=glass] .grid3:not(.reviews3) .card{aspect-ratio:16/10;min-height:0}
/* ---- services: glass cards with icons ---- */
html[data-theme=glass] .svc{border:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
html[data-theme=glass] .svc-row{grid-template-columns:52px 1fr auto;grid-template-areas:"ico t arr" "ico chips price";gap:12px 18px;align-items:start;padding:22px 22px 20px;border:1px solid var(--glass-line);border-radius:22px;background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-hi);overflow:hidden;transition:transform .45s var(--ease),border-color .3s,background .3s}
html[data-theme=glass] .svc-row::before{display:none}
html[data-theme=glass] .svc-row:hover{transform:translateY(-3px);border-color:rgb(var(--acc-rgb) / .45);background:rgba(40,40,45,.55)}
html[data-theme=glass] .svc-row .n{display:none}
html[data-theme=glass] .svc-ico{grid-area:ico;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:var(--accent);background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);box-shadow:var(--glass-hi)}
html[data-theme=glass] .svc-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html[data-theme=glass] .svc-row .svc-t{grid-area:t}
html[data-theme=glass] .svc-row h3{font-size:clamp(18px,1.5vw,21px);line-height:1.25;transform:none!important}
html[data-theme=glass] .svc-row p{font-size:14px;line-height:1.5;margin-top:6px}
html[data-theme=glass] .svc-row .chiplist{grid-area:chips;align-self:end}
html[data-theme=glass] .svc-row .chiplist li{border-radius:999px;background:rgba(255,255,255,.05);font-size:11.5px}
html[data-theme=glass] .svc-row .price{grid-area:price;align-self:end;text-align:right;font-family:var(--font-sans);font-size:11.5px}
html[data-theme=glass] .svc-row .price b{font-size:18px}
html[data-theme=glass] .svc-row .arr{grid-area:arr;width:40px;height:40px;border-radius:12px;font-size:15px}
html[data-theme=glass] .svc-row:hover .arr{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:rotate(-45deg)}
html[data-theme=glass] .svc-fx{grid-column:auto;grid-row:auto;inset:auto 18px 18px auto;width:44%;max-width:220px;aspect-ratio:16/9;height:auto;border-radius:12px}
html[data-theme=glass] .svc-row:hover .chiplist{opacity:1}
/* process, reviews, about, faq, cta, footer */
html[data-theme=glass] .proc .tc{border-radius:999px;color:var(--accent);border-color:rgb(var(--acc-rgb) / .35);background:rgb(var(--acc-rgb) / .08);font-family:var(--font-sans);font-weight:600}
html[data-theme=glass] .proc .step::before{border-color:var(--accent)}
html[data-theme=glass] .proc::after{background:var(--accent)}
html[data-theme=glass] .rcard{border-radius:20px;background:var(--glass);border-color:var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-hi)}
html[data-theme=glass] .rcard .more,html[data-theme=glass] .stars,html[data-theme=glass] .rcard .top .stars{color:var(--accent)}
html[data-theme=glass] .rcard .av{border-radius:50%;background:rgba(255,255,255,.1)}
html[data-theme=glass] .big-score{font-family:var(--font-display)}
html[data-theme=glass] .portrait{border-radius:24px;overflow:hidden}
html[data-theme=glass] .faq details{border-color:var(--line)}
html[data-theme=glass] .faq summary i{border-radius:50%;background:rgba(255,255,255,.06)}
html[data-theme=glass] .faq details[open] summary i{border-color:var(--accent);background:rgb(var(--acc-rgb) / .15)}
html[data-theme=glass] .bigcta{background:radial-gradient(60% 70% at 50% 100%,rgb(var(--acc-rgb) / .14),transparent 70%),var(--bg)}
html[data-theme=glass] .bigcta .glow{display:none}
html[data-theme=glass] .ftr-h{font-family:var(--font-sans);letter-spacing:.2em}
html[data-theme=glass] .ai-fab{border-radius:18px;background:rgba(20,20,23,.55);border-color:var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
html[data-theme=glass] .ai-fab .orb::before{background:conic-gradient(from 0deg,var(--accent),rgba(255,255,255,.7),var(--accent))}
/* forms & panels */
html[data-theme=glass] .field input,html[data-theme=glass] .field select,html[data-theme=glass] .field textarea,html[data-theme=glass] .input{border-radius:14px;background:rgba(255,255,255,.05);border-color:var(--glass-line)}
html[data-theme=glass] .field input:focus,html[data-theme=glass] .field select:focus,html[data-theme=glass] .field textarea:focus,html[data-theme=glass] .input:focus{border-color:rgb(var(--acc-rgb) / .7);background:rgba(255,255,255,.07)}
html[data-theme=glass] .summary,html[data-theme=glass] .pkg,html[data-theme=glass] .order-card,html[data-theme=glass] .conversation,html[data-theme=glass] .pay-card,html[data-theme=glass] .empty,html[data-theme=glass] .rv-panel,html[data-theme=glass] .detail-sidebar,html[data-theme=glass] .notice,html[data-theme=glass] .upload-box,html[data-theme=glass] .metric,html[data-theme=glass] .media-card,html[data-theme=glass] .table-wrap{border-radius:20px;background:var(--glass);border-color:var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-hi)}
html[data-theme=glass] .pkg.hot{border-color:rgb(var(--acc-rgb) / .55);background:linear-gradient(180deg,rgb(var(--acc-rgb) / .12),var(--glass) 55%)}
html[data-theme=glass] dialog{border-radius:24px;background:rgba(22,22,25,.78);border-color:var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
html[data-theme=glass] dialog::backdrop{background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
/* iOS-style reveal: rise + un-blur */
html[data-theme=glass] .rv{opacity:0;transform:translateY(26px) scale(.985);filter:blur(10px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
html[data-theme=glass] .rv.in{opacity:1;transform:none;filter:none}
html[data-theme=glass] .no-js .rv{opacity:1;transform:none;filter:none}
/* ---- ORDER: glass sheet over a blurred cinematic backdrop ---- */
html[data-theme=glass] body.order-page main{position:relative;isolation:isolate}
html[data-theme=glass] body.order-page main::before{content:"";position:fixed;inset:-8%;z-index:-2;background:url(/assets/hero-poster.735cc7f591e4ce9c.jpg) center/cover no-repeat;filter:blur(38px) saturate(1.25) brightness(.42);transform:scale(1.08)}
html[data-theme=glass] body.order-page main::after{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(80% 60% at 50% 0%,rgba(0,0,0,.1),rgba(0,0,0,.65))}
html[data-theme=glass] body.order-page .page-hero{padding-bottom:10px}
html[data-theme=glass] body.order-page .form-grid>div:first-child{padding:clamp(18px,3vw,34px);border-radius:28px;background:rgba(20,20,23,.52);border:1px solid var(--glass-line);-webkit-backdrop-filter:saturate(180%) blur(34px);backdrop-filter:saturate(180%) blur(34px);box-shadow:var(--glass-hi),0 40px 100px -40px rgba(0,0,0,.9);animation:sheet-in .8s var(--ease) both}
@keyframes sheet-in{from{opacity:0;transform:translateY(40px) scale(.98);filter:blur(8px)}}
html[data-theme=glass] .opts{gap:12px}
html[data-theme=glass] .opt{flex-direction:row;align-items:center;gap:14px;min-height:76px;padding:14px 46px 14px 14px;border-radius:18px;background:rgba(255,255,255,.04);border-color:var(--glass-line);transition:transform .45s var(--ease),opacity .45s,filter .45s,border-color .3s,background .3s}
html[data-theme=glass] .opt input{left:auto;right:16px;top:50%;transform:translateY(-50%);opacity:0}
html[data-theme=glass] .opt .svc-ico{flex:none;width:46px;height:46px;border-radius:13px}
html[data-theme=glass] .opt .svc-ico svg{width:23px;height:23px}
html[data-theme=glass] .opt .opt-t{display:flex;flex-direction:column;gap:3px;min-width:0}
html[data-theme=glass] .opt:hover{background:rgba(255,255,255,.07);transform:translateY(-2px)}
html[data-theme=glass] .opt:has(input:checked){border-color:rgb(var(--acc-rgb) / .8);background:linear-gradient(160deg,rgb(var(--acc-rgb) / .16),rgba(255,255,255,.04));box-shadow:0 0 0 1px rgb(var(--acc-rgb) / .35),0 20px 40px -24px rgb(var(--acc-rgb) / .6)}
html[data-theme=glass] .opt:has(input:checked)::after{background:var(--accent);color:var(--accent-ink)}
html[data-theme=glass] .opts:has(input:checked) .opt:not(:has(input:checked)){opacity:.42;filter:blur(1.4px) saturate(.5);transform:scale(.975)}
html[data-theme=glass] .opts:has(input:checked) .opt:not(:has(input:checked)):hover{opacity:.8;filter:none;transform:none}
/* merged picker: packages open under the services with motion */
html[data-theme=glass] #order-form.picking:has(.fstep[data-step="2"].on) .fstep[data-step="1"]{display:block}
html[data-theme=glass] #order-form.picking:has(.fstep[data-step="2"].on) .fstep[data-step="1"] .step-nav,html[data-theme=glass] #order-form.picking .tiers-change{display:none}
html[data-theme=glass] #order-form.picking .fstep[data-step="2"].on{margin-top:26px;animation:pkg-in .7s var(--ease) both}
@keyframes pkg-in{from{opacity:0;transform:translateY(30px);filter:blur(10px)}}
html[data-theme=glass] .tier,html[data-theme=glass] .tier-custom{border-radius:22px;background:rgba(255,255,255,.045);border-color:var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-hi)}
html[data-theme=glass] .tier.selected,html[data-theme=glass] .tier-custom.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 26px 60px -26px rgb(var(--acc-rgb) / .7)}
html[data-theme=glass] .tiers:has(.selected) .tier:not(.selected){opacity:.5;filter:blur(1px) saturate(.6);transform:scale(.98)}
html[data-theme=glass] .tiers:has(.selected) .tier:not(.selected):hover{opacity:.85;filter:none;transform:none}
html[data-theme=glass] .tier,html[data-theme=glass] .tier-custom{transition:transform .45s var(--ease),opacity .45s,filter .45s,border-color .3s,box-shadow .3s}
html[data-theme=glass] .tier-summary,html[data-theme=glass] .order-recap{border-radius:16px;background:rgba(255,255,255,.05)}
html[data-theme=glass] .steps>div span{border-radius:50%}
html[data-theme=glass] .steps>div.done span{background:var(--accent);border-color:var(--accent)}
html[data-theme=glass] .paybox{border-radius:22px}
/* ---- Studio: same dark glass, keeps the list layout ---- */
html[data-theme=glass] .studio-page main,html[data-theme=glass] .studio-page dialog,html[data-theme=glass] .studio-page .toast{--bg:#050506;--bg-2:#0B0B0D;--surface:#141416;--surface-2:#1C1C1F;--text:#F5F5F7;--muted:#A1A1A6;--dim:#6E6E73;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);--accent-ink:#0B0B0D;color-scheme:dark}
html[data-theme=glass] .studio-page main{background:radial-gradient(70% 40% at 50% 0%,rgb(var(--acc-rgb) / .07),transparent 70%),var(--bg)}
html[data-theme=glass] .studio-page .hdr,html[data-theme=glass] .studio-page .hdr.scrolled{background:none}
html[data-theme=glass] .studio-page .btn-ghost,html[data-theme=glass] .studio-page .button.ghost,html[data-theme=glass] .studio-page .button.light{background:var(--glass)}
html[data-theme=glass] .studio-page .field input,html[data-theme=glass] .studio-page .field select,html[data-theme=glass] .studio-page .field textarea,html[data-theme=glass] .studio-page .input{background:rgba(255,255,255,.05)}
html[data-theme=glass] .studio-page .chip.on{background:var(--text);color:#000;border-color:var(--text)}
html[data-theme=glass] .studio-page .admin-nav button.active{border-color:var(--accent);color:var(--text)}
html[data-theme=glass] .olist{border-radius:20px;background:var(--glass);border-color:var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
html[data-theme=glass] .olist-row:not(.olist-head):hover{background:rgba(255,255,255,.04)}
html[data-theme=glass] .olist-row.selected{background:rgba(255,255,255,.06)}
html[data-theme=glass] .olist-head{background:rgba(255,255,255,.03);color:var(--dim)}
html[data-theme=glass] .olist-row.is-new{box-shadow:inset 3px 0 0 var(--accent)}
html[data-theme=glass] .order-search input{background:rgba(255,255,255,.05);border-color:var(--glass-line);color:var(--text)}
html[data-theme=glass] .order-search input:focus{outline:2px solid rgb(var(--acc-rgb) / .6)}
html[data-theme=glass] .pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--text)}
html[data-theme=glass] .pill.ok{color:#7DDBA0;background:rgba(61,220,132,.12);border-color:rgba(61,220,132,.3)}
html[data-theme=glass] .pill.warn{color:#F3C76A;background:rgba(243,199,106,.12);border-color:rgba(243,199,106,.3)}
html[data-theme=glass] .pill.new{color:var(--text);background:rgb(var(--acc-rgb) / .14);border-color:rgb(var(--acc-rgb) / .5)}
html[data-theme=glass] .pill.mute{color:var(--dim)}
html[data-theme=glass] .pill.info{color:#9CC2FF;background:rgba(76,141,255,.12);border-color:rgba(76,141,255,.3)}
html[data-theme=glass] .notify-strip{border-radius:18px;background:var(--glass);border-color:var(--glass-line)}
html[data-theme=glass] dialog.side-drawer{border-radius:26px 0 0 26px;background:rgba(18,18,21,.72);-webkit-backdrop-filter:saturate(180%) blur(40px);backdrop-filter:saturate(180%) blur(40px)}
html[data-theme=glass] .sd-head{background:transparent}
html[data-theme=glass] .sd-close{background:rgba(255,255,255,.08);color:var(--text);border-color:var(--glass-line)}
html[data-theme=glass] .sd-close:hover{background:var(--text);color:#000}
html[data-theme=glass] .studio-page .badge.published{background:rgba(61,220,132,.12);color:#7DDBA0;border-color:rgba(61,220,132,.3)}
.pal-swatches{display:flex;gap:8px;margin:-6px 0 14px}
.pal-swatches i{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.25)}
.pal-swatches i[data-p=gold]{background:#E3B35B}.pal-swatches i[data-p=orange]{background:#F47C30}.pal-swatches i[data-p=blue]{background:#4C8DFF}.pal-swatches i[data-p=silver]{background:#D9DCE1}.pal-swatches i[data-p=sage]{background:#9CC7A2}.pal-swatches i[data-p=rose]{background:#EE9AB4}
/* ---- phone & tablet ---- */
@media (max-width:1100px){
 html[data-theme=glass] .bento{grid-template-columns:repeat(2,1fr)}
 html[data-theme=glass] .bento>.card:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:16/9}
 html[data-theme=glass] .svc{grid-template-columns:1fr}
}
@media (max-width:760px){
 html[data-theme=glass] .hdr-in{margin:8px 10px 0;height:56px;border-radius:18px}
 html[data-theme=glass] .hero h1{font-size:clamp(30px,9.6vw,46px)}
 html[data-theme=glass] .hero-ctas{flex-direction:column;width:100%;max-width:340px}
 html[data-theme=glass] .hero .lb{display:block;height:6vh}
 html[data-theme=glass] .sec-head h2{font-size:clamp(26px,8vw,36px)}
 /* swipe row instead of big stacked boxes */
 html[data-theme=glass] .bento{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 14px;scroll-padding:0 var(--gutter);scrollbar-width:none}
 html[data-theme=glass] .bento::-webkit-scrollbar{display:none}
 html[data-theme=glass] .bento>.card,html[data-theme=glass] .bento>.card:first-child,html[data-theme=glass] .bento.filtered>.card{flex:0 0 78%;aspect-ratio:16/10;scroll-snap-align:start}
 html[data-theme=glass] .bento>.rv{opacity:1;transform:none;filter:none}
 html[data-theme=glass] .bento>.card:first-child .info,html[data-theme=glass] .card .info{left:8px;right:8px;bottom:8px;padding:8px 10px;max-width:none}
 html[data-theme=glass] .bento>.card:first-child h3,html[data-theme=glass] .card h3{font-size:13.5px}
 html[data-theme=glass] .bento>.card .badge{display:none}
 html[data-theme=glass] .grid3:not(.reviews3){grid-template-columns:1fr 1fr;gap:10px}
 html[data-theme=glass] .grid3:not(.reviews3) .card{aspect-ratio:4/3;border-radius:14px}
 html[data-theme=glass] .grid3:not(.reviews3) .card .info{left:6px;right:6px;bottom:6px;padding:6px 8px;border-radius:10px}
 html[data-theme=glass] .grid3:not(.reviews3) .card h3{font-size:12px}
 html[data-theme=glass] .grid3:not(.reviews3) .card .meta{font-size:10px}
 html[data-theme=glass] .grid3:not(.reviews3) .card .badge,html[data-theme=glass] .card .pp{display:none}
 html[data-theme=glass] .grid3:not(.reviews3) .card .rating{top:6px;right:6px;padding:3px 7px;font-size:9.5px}
 html[data-theme=glass] .svc-row{grid-template-columns:44px 1fr;grid-template-areas:"ico t" "chips chips" "price arr";padding:18px}
 html[data-theme=glass] .svc-ico{width:44px;height:44px;border-radius:13px}
 html[data-theme=glass] .svc-row .price{text-align:left}
 html[data-theme=glass] .svc-row .arr{justify-self:end;align-self:end}
 html[data-theme=glass] .svc-fx{display:none}
 html[data-theme=glass] body.order-page .form-grid>div:first-child{padding:16px;border-radius:24px}
 html[data-theme=glass] .opt{min-height:66px;padding:12px 40px 12px 12px}
 html[data-theme=glass] dialog.side-drawer{border-radius:0}
}
@media (prefers-reduced-motion:reduce){html[data-theme=glass] .rv{filter:none;transition:none}html[data-theme=glass] .hero-body::after{animation:none}html[data-theme=glass] body.order-page .form-grid>div:first-child,html[data-theme=glass] #order-form.picking .fstep[data-step="2"].on{animation:none}}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){html[data-theme=glass]{--glass:rgba(28,28,32,.94)}}
html[data-theme=glass] body.order-page .form-grid{grid-template-columns:1fr;max-width:1060px;margin:0 auto}
html[data-theme=glass] body.order-page .form-grid>.summary,html[data-theme=glass] body.order-page .form-grid>aside{position:static}
html[data-theme=glass] .tier-name{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,2.4vw,30px);letter-spacing:.04em;text-transform:none}
html[data-theme=glass] .tier-cut,html[data-theme=glass] .tier-flag{font-family:var(--font-sans);letter-spacing:.16em;font-weight:600}
html[data-theme=glass] .tier-flag{border-radius:999px;background:var(--accent);color:var(--accent-ink)}
html[data-theme=glass] .tier-perf{display:none}
html[data-theme=glass] .svc-row{grid-template-areas:"ico t t" "ico chips price";grid-template-columns:52px 1fr auto}
html[data-theme=glass] .svc-row .arr{position:absolute;top:20px;right:20px}
html[data-theme=glass] .svc-row .svc-t{padding-right:48px}
@media (max-width:760px){html[data-theme=glass] .svc-row{grid-template-areas:"ico t" "chips chips" "price price"}html[data-theme=glass] .svc-row .arr{top:auto;bottom:16px;right:16px}}
html[data-theme=glass] .tl-wrap h2,html[data-theme=glass] .about h2,html[data-theme=glass] .rev-sum h2{font-family:var(--font-display);font-weight:600;letter-spacing:.03em;line-height:1.08}
html[data-theme=glass] .studio-page main .button:not(.ghost):not(.light){background:var(--accent);color:var(--accent-ink)}
html[data-theme=glass] .olist .oc-act .button:not(.ghost){background:rgba(255,255,255,.08);color:var(--text);border:1px solid var(--glass-line);box-shadow:none}
html[data-theme=glass] .olist .oc-act .button:not(.ghost):hover{background:var(--accent);color:var(--accent-ink)}

/* =====================================================================
   V2 — SILVER STUDIO (Oct 2026): silver / graphite / black, light-grey glass
   pop-ups, Inter Tight display type, editing-loop hero, scroll-blur motion.
   ===================================================================== */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/inter-tight-latin-500-normal.6c0019f88d5bc179.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/inter-tight-latin-600-normal.db1a039d03ed646e.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/inter-tight-latin-700-normal.9c4f02f38678f262.woff2) format("woff2")}
html[data-theme=glass]{--font-display:"Inter Tight","Inter",system-ui,sans-serif;
 --bg:#08080A;--bg-2:#0F0F12;--surface:#16161A;--surface-2:#1E1E23;--bg-rgb:8 8 10;--text:#F2F3F5;--muted:#A3A6AD;--dim:#6E7178;
 --glass:rgba(38,39,44,.42);--glass-line:rgba(255,255,255,.12);
 --silver:linear-gradient(180deg,#FFFFFF 0%,#D9DCE1 45%,#9EA3AB 100%);
 --lg:rgba(232,233,237,.78);--lg-ink:#111214;--lg-line:rgba(255,255,255,.7)}
html[data-palette=silver]{--acc-rgb:214 217 223;--accent:#D6D9DF;--accent-2:#FFFFFF;--accent-ink:#0B0B0D}
/* type */
html[data-theme=glass] .sec-head h2,html[data-theme=glass] .page-hero h1,html[data-theme=glass] .bigcta h2,html[data-theme=glass] .hero h1,html[data-theme=glass] .tl-wrap h2,html[data-theme=glass] .about h2,html[data-theme=glass] .big-score,html[data-theme=glass] .tier-name{font-family:var(--font-display);font-weight:600;letter-spacing:-.035em;line-height:1.02;text-transform:none}
html[data-theme=glass] .hero h1{font-size:clamp(44px,8.6vw,138px);font-weight:600;letter-spacing:-.05em;line-height:.95;max-width:12ch}
html[data-theme=glass] .sec-head h2{font-size:clamp(34px,4.6vw,72px)}
html[data-theme=glass] .bigcta h2{font-size:clamp(44px,7.6vw,124px);letter-spacing:-.05em}
html[data-theme=glass] .serif,html[data-theme=glass] .serif.accent,html[data-theme=glass] .accent.serif{color:#7E828A}
html[data-theme=glass] .hero h1 .serif{background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
html[data-theme=glass] .eyebrow{letter-spacing:.22em;font-size:11px}
html[data-theme=glass] .eyebrow::before{background:var(--text)}
/* brand */
html[data-theme=glass] .brand .wm2{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.32em;text-transform:uppercase}
html[data-theme=glass] .brand .wm2::after{display:none}
html[data-theme=glass] .brand small{letter-spacing:.34em;font-size:9px;margin-top:6px}
html[data-theme=glass] .brand .mk-slot,html[data-theme=glass] .brand .mk{width:36px;height:36px}
/* buttons */
html[data-theme=glass] .btn-primary,html[data-theme=glass] .button:not(.ghost):not(.light){background:var(--silver);color:#0B0B0D;border:0;box-shadow:inset 0 1px 0 #fff,0 10px 30px -12px rgba(255,255,255,.35)}
html[data-theme=glass] .btn-primary:hover,html[data-theme=glass] .button:not(.ghost):not(.light):hover{background:linear-gradient(180deg,#fff,#E6E8EC 50%,#B8BCC3);box-shadow:inset 0 1px 0 #fff,0 14px 40px -12px rgba(255,255,255,.5)}
html[data-theme=glass] .btn,html[data-theme=glass] .button{border-radius:999px}
html[data-theme=glass] .chip.on,html[data-theme=glass] .chip.active{background:var(--silver);color:#0B0B0D;border-color:transparent}
/* hero v2 */
html[data-theme=glass] .hero-v2{justify-content:flex-end;text-align:left;min-height:100svh}
html[data-theme=glass] .hero-v2 .hero-body{align-items:flex-start;padding:0 var(--gutter) clamp(40px,7vh,90px);max-width:var(--maxw);margin:0 auto}
html[data-theme=glass] .hero-v2 .hero-body::after{display:none}
html[data-theme=glass] .hero-v2 .eyebrow{justify-content:flex-start}
html[data-theme=glass] .hero-v2 h1{margin:16px 0 0;text-shadow:none}
html[data-theme=glass] .hero-v2 .hero-row{justify-content:flex-start;margin-top:30px}
html[data-theme=glass] .hero-v2 .hero-ctas{justify-content:flex-start}
html[data-theme=glass] .hero-v2 .hero-meta{display:flex;margin-top:38px;padding:14px 20px;gap:10px 28px;border-radius:18px;border:1px solid var(--glass-line);background:rgba(20,20,24,.35);-webkit-backdrop-filter:saturate(160%) blur(22px);backdrop-filter:saturate(160%) blur(22px);font-family:var(--font-sans)}
html[data-theme=glass] .hero-v2 .hero-meta b{font-family:var(--font-display);font-size:20px}
html[data-theme=glass] .hero-v2 .hero-meta .stars{color:var(--text)}
html[data-theme=glass] .hero-v2 .hero-media video,html[data-theme=glass] .hero-v2 .hero-media .frame{filter:saturate(.9) brightness(.85);animation:none;inset:0;width:100%;height:100%}
html[data-theme=glass] .hero-v2 .hero-media::after{background:linear-gradient(90deg,rgba(8,8,10,.86) 0%,rgba(8,8,10,.55) 38%,rgba(8,8,10,.1) 75%),linear-gradient(180deg,rgba(8,8,10,.5) 0%,transparent 25%,transparent 60%,var(--bg) 100%)}
html[data-theme=glass] .hero-v2 .hero-motion-toggle{bottom:24px}
/* credits ticker */
html[data-theme=glass] .credits-strip{background:#050506;border-color:var(--line)}
html[data-theme=glass] .credits-strip .bill b{color:#C9CCD2}
html[data-theme=glass] .credits-strip .sprockets,html[data-theme=glass] .credits-strip .beam{opacity:.35}
/* sections get a quiet graphite stage with soft key light */
html[data-theme=glass] main>.sec,html[data-theme=glass] main>.sec-tight{position:relative}
html[data-theme=glass] #work-sec{background:radial-gradient(60% 50% at 50% 0%,rgba(255,255,255,.06),transparent 70%)}
/* work: small boxes inside one big glass box */
.work-panel{border-radius:28px;padding:clamp(14px,2.2vw,26px);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--glass-line,rgba(255,255,255,.12));-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 100px -50px rgba(0,0,0,.9)}
.work-panel .chips{margin:0 0 16px}
html[data-theme=glass] .bento.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
html[data-theme=glass] .bento.mini>.card,html[data-theme=glass] .bento.mini>.card:first-child,html[data-theme=glass] .bento.mini.filtered>.card{grid-column:auto;grid-row:auto;aspect-ratio:16/10;min-height:0;border-radius:16px}
html[data-theme=glass] .bento.mini>.card .info{left:8px;right:8px;bottom:8px;padding:8px 10px;border-radius:11px}
html[data-theme=glass] .bento.mini>.card h3{font-size:13px}
html[data-theme=glass] .bento.mini>.card .meta{font-size:10.5px}
html[data-theme=glass] .bento.mini>.card .badge{display:none}
html[data-theme=glass] .bento.mini>.card .pp{display:none}
html[data-theme=glass] .bento.mini>.card:hover{transform:translateY(-4px) scale(1.01)}
.work-foot{display:flex;justify-content:center;margin-top:18px}
/* services: list + hover image (smaller, Mugen-style) */
.svc-show{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,3vw,44px);align-items:start}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-item{display:grid;grid-template-columns:54px 1fr auto 30px;gap:16px;align-items:center;padding:16px 10px;border-bottom:1px solid var(--line);color:var(--text);transition:background .35s,padding .35s}
.svc-item b{display:block;font-family:var(--font-display,inherit);font-weight:600;font-size:clamp(17px,1.6vw,22px);letter-spacing:-.02em;color:var(--muted);transition:color .3s}
.svc-item small{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--dim);max-height:0;opacity:0;overflow:hidden;transition:max-height .45s,opacity .35s}
.svc-item .price{text-align:right;font-family:var(--font-sans);font-size:11px;color:var(--dim)}
.svc-item .price b{font-size:15px;color:var(--text);margin:0}
.svc-item .arr{font-size:17px;color:var(--dim);transition:transform .35s var(--ease),color .3s}
.svc-item.on,.svc-item:hover{background:linear-gradient(90deg,rgba(255,255,255,.06),transparent);padding-left:16px}
.svc-item.on b,.svc-item:hover b{color:var(--text)}
.svc-item.on small,.svc-item:hover small{max-height:60px;opacity:1}
.svc-item.on .arr,.svc-item:hover .arr{color:var(--text);transform:translate(3px,-3px)}
.svc-media{position:sticky;top:110px;aspect-ratio:4/3;border-radius:24px;overflow:hidden;background:var(--surface);border:1px solid var(--glass-line,rgba(255,255,255,.12));box-shadow:0 40px 90px -40px rgba(0,0,0,.95)}
.svc-fig{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.06);filter:blur(12px);transition:opacity .6s var(--ease),transform .9s var(--ease),filter .6s var(--ease)}
.svc-fig.on{opacity:1;transform:none;filter:none}
.svc-fig img{width:100%;height:100%;object-fit:cover}
.svc-fig figcaption{position:absolute;left:12px;bottom:12px;display:flex;gap:10px;align-items:center;padding:8px 14px;border-radius:999px;background:rgba(20,20,24,.5);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-size:13px;font-weight:500}
.svc-fig figcaption span{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.svc-fig-ph{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 40%,#2a2b31,#121215)}
.svc-fig-ph svg{width:38%;height:auto}
/* animated service icons */
.svc-ico.anim,.svc-fig-ph{color:#E7E9ED}
.svc-ico.anim{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.svc-ico.anim svg,.svc-fig-ph svg,#order-form .opt .svc-ico svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.svc-ico svg .fill,.svc-fig-ph svg .fill{fill:currentColor;stroke:none}
.svc-ico svg .soft{opacity:.45}
.svc-ico svg .clap-arm{transform-box:fill-box;transform-origin:3% 90%;animation:clap 3.2s cubic-bezier(.6,-.4,.3,1.6) infinite}
@keyframes clap{0%,62%,100%{transform:rotate(0)}70%{transform:rotate(-14deg)}80%{transform:rotate(0)}}
.svc-ico svg .knob{transform-box:view-box;animation:knob 3.6s ease-in-out infinite}
.svc-ico svg .k1{transform-origin:15px 17px}.svc-ico svg .k2{transform-origin:33px 17px;animation-delay:-1.4s}
@keyframes knob{0%,100%{transform:rotate(-50deg)}50%{transform:rotate(60deg)}}
.svc-ico svg .vu rect{fill:currentColor;stroke:none;transform-box:fill-box;transform-origin:50% 100%;animation:vu 1.1s ease-in-out infinite}
.svc-ico svg .vu rect:nth-child(2){animation-delay:-.3s}.svc-ico svg .vu rect:nth-child(3){animation-delay:-.6s}.svc-ico svg .vu rect:nth-child(4){animation-delay:-.15s}.svc-ico svg .vu rect:nth-child(5){animation-delay:-.45s}.svc-ico svg .vu rect:nth-child(6){animation-delay:-.75s}
@keyframes vu{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.svc-ico svg .reel{transform-box:fill-box;transform-origin:center;animation:spin 7s linear infinite}
.svc-ico svg .reel.r2{animation-duration:5s}
.svc-ico svg .rec{animation:blink 1.4s steps(2) infinite;fill:#ff5a4a}
.svc-ico svg .w{animation:wave 2s ease-out infinite;opacity:0}
.svc-ico svg .w2{animation-delay:.25s}.svc-ico svg .w3{animation-delay:.5s}
@keyframes wave{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.svc-ico svg .heart{fill:#ff6b7f;stroke:none;animation:heart 2.4s ease-out infinite}
@keyframes heart{0%{opacity:0;transform:translateY(6px) scale(.6)}25%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px) scale(1.1)}}
.svc-ico svg .spark{fill:currentColor;stroke:none;transform-box:fill-box;transform-origin:center;animation:twinkle 2.6s ease-in-out infinite}
.svc-ico svg .s2{animation-delay:-.9s}.svc-ico svg .s3{animation-delay:-1.7s}
@keyframes twinkle{0%,100%{transform:scale(.7) rotate(0);opacity:.6}50%{transform:scale(1) rotate(20deg);opacity:1}}
.svc-ico svg .page{transform-box:view-box;transform-origin:24px 26px;animation:page 3.4s ease-in-out infinite}
@keyframes page{0%,55%,100%{transform:scaleX(1)}75%{transform:scaleX(-1)}}
@media (prefers-reduced-motion:reduce){.svc-ico svg *{animation:none!important}}
/* toolkit */
.tools-sec{position:relative;overflow:hidden}
.tools-glow{position:absolute;left:50%;top:62%;width:min(900px,90vw);height:420px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(220,224,232,.16),transparent);filter:blur(10px);pointer-events:none}
.tools{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:16px;position:relative}
.tool{display:flex;flex-direction:column;align-items:center;gap:12px;width:128px}
.tool-ico{width:92px;height:92px;border-radius:26px;display:grid;place-items:center;color:#EDEFF2;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 24px 50px -24px rgba(0,0,0,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);animation:float 6s ease-in-out infinite}
.tool:nth-child(2n) .tool-ico{animation-delay:-2s}.tool:nth-child(3n) .tool-ico{animation-delay:-4s}
.tool-ico svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tool-ico svg .ph{stroke:#ff5a4a}.tool-ico svg .dot{fill:currentColor}
.tool b{font-size:13px;font-weight:500;color:var(--muted);text-align:center}
.tool:hover .tool-ico{transform:translateY(-6px);border-color:rgba(255,255,255,.35)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.tool-ico{animation:none}}
/* reviews: reflection glow behind the moving rows */
.rev-glow{position:relative;isolation:isolate}
.rev-glow::before{content:"";position:absolute;left:50%;top:58%;width:min(1100px,95vw);height:60%;transform:translate(-50%,-50%);z-index:-1;background:radial-gradient(closest-side,rgba(210,215,225,.14),transparent);filter:blur(20px)}
.rev-glow::after{content:"";position:absolute;left:10%;right:10%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent)}
html[data-theme=glass] .rev-glow .rcard{background:linear-gradient(170deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 60px -30px rgba(0,0,0,.9)}
/* scroll motion: rise + come into focus */
html[data-theme=glass] .rv{transform:translateY(34px);filter:blur(14px)}
html[data-theme=glass] .rv.in{transform:none;filter:none}
/* ======= ORDER POP-UP ======= */
html.om-open{overflow:hidden}
dialog.order-modal{position:fixed;inset:0;margin:auto;width:min(1060px,calc(100% - 24px));max-width:none;height:min(860px,calc(100% - 24px));max-height:none;padding:0;border:0;border-radius:30px;background:transparent;color:var(--text);overflow:hidden;box-shadow:none}
dialog.order-modal[open]{display:flex;animation:om-in .55s cubic-bezier(.2,.8,.2,1)}
@keyframes om-in{from{opacity:0;transform:translateY(30px) scale(.97);filter:blur(10px)}}
dialog.order-modal::backdrop{background:rgba(6,6,8,.42);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%)}
.om-sheet{flex:1;display:flex;flex-direction:column;min-height:0;border-radius:30px;background:rgba(24,25,29,.62);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:saturate(180%) blur(40px);backdrop-filter:saturate(180%) blur(40px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 60px 140px -40px rgba(0,0,0,.9);overflow-y:auto;overscroll-behavior:contain}
.om-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px clamp(16px,3vw,32px);background:linear-gradient(180deg,rgba(24,25,29,.92),rgba(24,25,29,.6));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.08)}
.om-head h2{font-family:var(--font-display,inherit);font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em;margin:4px 0 0}
.om-close{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:var(--text);font-size:22px;line-height:1}
.om-close:hover{background:#fff;color:#000}
.om-body{padding:clamp(16px,3vw,32px)}
.om-body .order-section-title,.om-body #my-orders{display:none}
/* steps (also used on /order/request) */
html[data-theme=glass] .steps>div{border-radius:999px}
/* light-grey glass package pop-ups */
html[data-theme=glass] #order-form .tiers{gap:14px}
html[data-theme=glass] #order-form .tier,html[data-theme=glass] #order-form .tier-custom{background:var(--lg);color:var(--lg-ink);border:1px solid var(--lg-line);-webkit-backdrop-filter:saturate(170%) blur(30px);backdrop-filter:saturate(170%) blur(30px);box-shadow:inset 0 1px 0 #fff,0 30px 70px -30px rgba(0,0,0,.8);border-radius:24px}
html[data-theme=glass] #order-form .tier *,html[data-theme=glass] #order-form .tier-custom *{color:inherit}
html[data-theme=glass] #order-form .tier .tier-desc,html[data-theme=glass] #order-form .tier .tier-price small,html[data-theme=glass] #order-form .tier-cut,html[data-theme=glass] #order-form .tier-custom p,html[data-theme=glass] #order-form .tier-custom small{color:#555960}
html[data-theme=glass] #order-form .tier-name{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.03em;color:#0B0B0D}
html[data-theme=glass] #order-form .tier-price{color:#0B0B0D}
html[data-theme=glass] #order-form .tier-meter i{background:rgba(0,0,0,.12)}html[data-theme=glass] #order-form .tier-meter i.on{background:#0B0B0D}
html[data-theme=glass] #order-form .tier-specs span{background:rgba(255,255,255,.7);border-color:rgba(0,0,0,.08)}
html[data-theme=glass] #order-form .tier-feats{border-top-color:rgba(0,0,0,.1)}
html[data-theme=glass] #order-form .tier-feats li::before{border-color:#0B0B0D;color:#0B0B0D}
html[data-theme=glass] #order-form .tier-cta{background:#0B0B0D;color:#fff!important;border-color:#0B0B0D}
html[data-theme=glass] #order-form .tier-cta *{color:#fff!important}
html[data-theme=glass] #order-form .tier.selected,html[data-theme=glass] #order-form .tier-custom.selected{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 1px rgba(255,255,255,.5),0 40px 90px -30px rgba(255,255,255,.35);transform:translateY(-6px)}
html[data-theme=glass] #order-form .tier-flag{background:#0B0B0D;color:#fff!important}
html[data-theme=glass] #order-form .tc-icon{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.12);color:#0B0B0D}
html[data-theme=glass] #order-form .tc-cta{border-color:#0B0B0D}
html[data-theme=glass] #order-form .fstep[data-step="2"].on .tier{animation:tier-pop .6s cubic-bezier(.2,.8,.2,1) both}
html[data-theme=glass] #order-form .fstep[data-step="2"].on .tier:nth-child(2){animation-delay:.08s}
html[data-theme=glass] #order-form .fstep[data-step="2"].on .tier:nth-child(3){animation-delay:.16s}
@keyframes tier-pop{from{opacity:0;transform:translateY(40px) scale(.95);filter:blur(10px)}}
html[data-theme=glass] .tiers:has(.selected) .tier:not(.selected){opacity:.55;filter:blur(1.4px);transform:scale(.97)}
html[data-theme=glass] .tier-summary,html[data-theme=glass] .order-recap{background:rgba(255,255,255,.06)}
/* service choice tiles in the pop-up */
html[data-theme=glass] #order-form .opts{grid-template-columns:repeat(2,1fr)}
html[data-theme=glass] #order-form .opt{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);border-radius:20px;min-height:84px}
html[data-theme=glass] #order-form .opt .svc-ico{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;flex:none;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);color:#E7E9ED}
html[data-theme=glass] #order-form .opt:has(input:checked){background:var(--lg);color:var(--lg-ink);border-color:#fff;box-shadow:0 24px 50px -24px rgba(255,255,255,.35)}
html[data-theme=glass] #order-form .opt:has(input:checked) *{color:var(--lg-ink)}
html[data-theme=glass] #order-form .opt:has(input:checked) .svc-ico{background:#0B0B0D;color:#fff;border-color:#0B0B0D}
html[data-theme=glass] #order-form .opt:has(input:checked) .svc-ico svg{stroke:#fff}
html[data-theme=glass] .opts:has(input:checked) .opt:not(:has(input:checked)){opacity:.5;filter:blur(1px)}
html[data-theme=glass] #order-form .opt:has(input:checked)::after{background:#0B0B0D;color:#fff}
/* /order/request page itself: the same sheet over the blurred editing loop */
html[data-theme=glass] body.order-page main::before{background-image:url(/assets/editing-bg.fa42ef221334da3f.jpg);filter:blur(30px) saturate(1.1) brightness(.5)}
/* Studio feature matrix */
.fm-hidden{display:none!important}
.fm{border:1px solid var(--line-2);border-radius:18px;padding:16px}
.fm-table{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:10px 0}
.fm-row{display:grid;grid-template-columns:1fr repeat(3,92px);align-items:center;border-top:1px solid var(--line)}
.fm-row:first-child{border-top:0}
.fm-row>span{padding:9px 12px;font-size:14px}
.fm-h{background:rgba(255,255,255,.05);font:600 11px/1.2 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fm-h span:not(:first-child){text-align:center}
.fm-cb{display:grid;place-items:center;padding:8px}
.fm-cb input{width:20px;height:20px;accent-color:#D6D9DF}
.fm-row:not(.fm-h):hover{background:rgba(255,255,255,.03)}
.fm-add{display:flex;gap:10px}.fm-add .input{flex:1}
/* phones & tablets */
@media (max-width:1100px){html[data-theme=glass] .bento.mini{grid-template-columns:repeat(3,1fr)}.svc-show{grid-template-columns:1fr}.svc-media{display:none}.svc-item small{max-height:60px;opacity:1}}
@media (max-width:760px){
 html[data-theme=glass] .hero-v2 .hero-body{padding-bottom:34px}
 html[data-theme=glass] .hero h1{font-size:clamp(40px,12.5vw,64px)}
 html[data-theme=glass] .hero-v2 .hero-meta{padding:12px 14px;gap:8px 18px}
 html[data-theme=glass] .bento.mini{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;overflow:visible;margin:0;padding:0}
 html[data-theme=glass] .bento.mini>.card,html[data-theme=glass] .bento.mini>.card:first-child{flex:none;aspect-ratio:4/3;border-radius:13px}
 html[data-theme=glass] .bento.mini>.card .info{left:5px;right:5px;bottom:5px;padding:6px 8px;border-radius:9px}
 html[data-theme=glass] .bento.mini>.card h3{font-size:11.5px}
 html[data-theme=glass] .bento.mini>.card .meta{font-size:9.5px}
 html[data-theme=glass] .bento.mini>.card .rating{top:6px;right:6px;padding:3px 7px;font-size:9px}
 .work-panel{border-radius:22px;padding:10px}
 .svc-item{grid-template-columns:46px 1fr 22px;gap:12px;padding:14px 4px}
 .svc-item .price{grid-column:2;text-align:left}
 .svc-item .arr{grid-column:3;grid-row:1}
 .svc-ico.anim{width:46px;height:46px;border-radius:14px}
 .tool{width:96px}.tool-ico{width:72px;height:72px;border-radius:21px}.tool-ico svg{width:32px;height:32px}
 dialog.order-modal{width:100%;height:100%;border-radius:0}
 .om-sheet{border-radius:0}
 html[data-theme=glass] #order-form .opts{grid-template-columns:1fr}
 .fm-row{grid-template-columns:1fr repeat(3,52px)}.fm-row>span{font-size:12.5px;padding:8px}
}
@media (prefers-reduced-motion:reduce){dialog.order-modal[open],html[data-theme=glass] #order-form .fstep[data-step="2"].on .tier{animation:none}html[data-theme=glass] .rv{filter:none}}
.mk-g .pl{transform-box:fill-box;transform-origin:center;transition:transform 520ms var(--spring,cubic-bezier(.3,1.7,.5,1))}
.mk-g .gl{transition:none}
.brand:hover .mk-g .pl,.brand.intro .mk-g .pl{transform:translateX(.6px) scale(1.07)}
.brand:hover .mk-g .gl,.brand.intro .mk-g .gl{animation:mkglint 1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes mkglint{from{transform:skewX(-18deg) translateX(0)}to{transform:skewX(-18deg) translateX(118px)}}
@media (prefers-reduced-motion:reduce){.brand:hover .mk-g .gl,.brand.intro .mk-g .gl{animation:none}}
/* v2 fixes */
html[data-theme=glass] #order-form .tier,html[data-theme=glass] #order-form .tier-custom{opacity:1}
html[data-theme=glass] #order-form .fstep[data-step="2"].on .tier{animation:tier-pop .6s cubic-bezier(.2,.8,.2,1) backwards}
html[data-theme=glass] #order-form .fstep[data-step="2"].on .tier:nth-child(2){animation-delay:.08s}
html[data-theme=glass] #order-form .fstep[data-step="2"].on .tier:nth-child(3){animation-delay:.16s}
html[data-theme=glass] .svc-item .svc-ico{grid-area:auto}
html[data-theme=glass] .hero-v2 .hero-media video,html[data-theme=glass] .hero-v2 .hero-media .frame{filter:saturate(.9) brightness(.8) blur(1.5px);transform:scale(1.03)}
html[data-theme=glass] #order-form .tier .tier-feats li::before{background:#0B0B0D}
html[data-theme=glass] #order-form .tier .tier-feats li::after{border-color:#fff}
@media (max-width:760px){html[data-theme=glass] .hero-v2 .hero-motion-toggle{top:auto;bottom:16px;right:16px;height:auto}}
.om-head{background:rgba(22,23,27,.97)}
@media (max-width:760px){#editor fieldset{padding-left:6px;padding-right:6px;margin-left:0;margin-right:0}#editor .fm{padding:8px;border:0}#editor{padding:18px 12px}.fm-row{grid-template-columns:1fr repeat(3,40px)}.fm-h span{font-size:9px;letter-spacing:.02em;padding:8px 2px}.fm-cb{padding:6px 0}}
@media (max-width:760px){.fm-row{grid-template-columns:1fr repeat(3,50px)}.fm-h span{font-size:8.5px;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.fm-h span:first-child{text-align:left}}
.brand .mk-g,.mk-g{overflow:hidden}

/* =====================================================================
   v3 (8 Oct) — light-grey "package card" surfaces for Reviews + Footer
   Same light grey + dark ink as the Basic / Standard / Premium cards.
   ===================================================================== */
html[data-theme=glass] .rev-glow,html[data-theme=glass] .ftr{
 --text:#111214;--muted:#4A4E56;--dim:#6F737B;--line:rgba(0,0,0,.1);--line-2:rgba(0,0,0,.16);
 --surface:rgba(255,255,255,.62);--surface-2:rgba(255,255,255,.8);
 --accent:#0B0B0D;--accent-2:#0B0B0D;--acc-rgb:11 11 13;--accent-ink:#fff;
 color:#111214;background:linear-gradient(180deg,#EDEEF1 0%,#E2E4E8 100%);
 box-shadow:inset 0 1px 0 #fff,0 40px 100px -40px rgba(0,0,0,.95);border:1px solid rgba(255,255,255,.7)}
html[data-theme=glass] .rev-glow{margin:24px 12px;border-radius:36px;padding:6px 0 34px;overflow:hidden}
html[data-theme=glass] .rev-glow::before,html[data-theme=glass] .rev-glow::after{display:none}
html[data-theme=glass] .rev-glow .eyebrow,html[data-theme=glass] .ftr .eyebrow{color:#4A4E56}
html[data-theme=glass] .rev-glow .eyebrow::before{background:#0B0B0D;box-shadow:none}
html[data-theme=glass] .rev-glow .big-score{color:#0B0B0D;background:none;-webkit-text-fill-color:#0B0B0D}
html[data-theme=glass] .rev-glow .stars,html[data-theme=glass] .rev-glow .srow{color:#0B0B0D}
html[data-theme=glass] .rev-glow .srow .off{color:#BFC2C8}
html[data-theme=glass] .rev-glow .link{color:#0B0B0D}
html[data-theme=glass] .rev-glow .rcard{background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.95);color:#111214;
 -webkit-backdrop-filter:saturate(160%) blur(24px);backdrop-filter:saturate(160%) blur(24px);
 box-shadow:inset 0 1px 0 #fff,0 22px 44px -26px rgba(0,0,0,.28)}
html[data-theme=glass] .rev-glow .rcard q{color:#1B1D21}
html[data-theme=glass] .rev-glow .rcard .top,html[data-theme=glass] .rev-glow .rcard small{color:#6F737B}
html[data-theme=glass] .rev-glow .rcard .av{background:#0B0B0D;color:#fff}
html[data-theme=glass] .rev-glow .rcard .more{color:#0B0B0D}
html[data-theme=glass] .rev-glow .rcard:hover{background:rgba(255,255,255,.9);transform:translateY(-3px)}
/* footer */
html[data-theme=glass] .ftr{margin:40px 12px 12px;border-radius:36px;border-top:1px solid rgba(255,255,255,.7)}
html[data-theme=glass] .ftr .ftr-h{color:#6F737B}
html[data-theme=glass] .ftr a:not(.brand){color:#2A2D33}
html[data-theme=glass] .ftr a:not(.brand):hover{color:#000}
html[data-theme=glass] .ftr p,html[data-theme=glass] .ftr .ftr-bot{color:#4A4E56}
html[data-theme=glass] .ftr .ftr-bot{border-top-color:rgba(0,0,0,.1)}
html[data-theme=glass] .ftr .mail{color:#0B0B0D}
html[data-theme=glass] .ftr .brand .wm,html[data-theme=glass] .ftr .brand .wm2{color:#0B0B0D;background:none;-webkit-text-fill-color:#0B0B0D}
html[data-theme=glass] .ftr .brand small{color:#4A4E56}
html[data-theme=glass] .ftr .mk-g .a,html[data-theme=glass] .ftr .mk-g .pl{fill:#111214}
@media (max-width:760px){html[data-theme=glass] .rev-glow{margin:18px 8px;border-radius:28px}html[data-theme=glass] .ftr{margin:28px 8px 8px;border-radius:28px}}
@media (min-width:761px){html[data-theme=glass] .ftr{padding-bottom:44px}}

/* tool logos uploaded in Studio */
.tool-ico.has-logo{padding:9px}
.tool-ico.has-logo img{width:100%;height:100%;object-fit:contain;display:block;border-radius:18%;filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}
@media (max-width:760px){.tool-ico.has-logo{padding:7px}}
.tool-logos .tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:10px}
.tool-logos .tl-row{display:flex;flex-direction:column;gap:6px}
.tool-logos .tl-title{font-weight:600}

/* =====================================================================
   v4 (8 Oct) — colourful service icons, order pop-up v3, message button,
   light-silver tool tiles
   ===================================================================== */
:where(.svc-ico,.svc-fig-ph)[data-kind]{--ic:#E7E9ED;--ic2:#FFFFFF}
[data-kind=trailer]{--ic:#FF8A4C;--ic2:#FFC94D}
[data-kind=film]{--ic:#4FA8FF;--ic2:#9BE7FF}
[data-kind=doc]{--ic:#34D399;--ic2:#FF5A4A}
[data-kind=ai]{--ic:#B47CFF;--ic2:#FF7AD9}
[data-kind=pod]{--ic:#FF5C93;--ic2:#FFC94D}
[data-kind=ugc],[data-kind=social]{--ic:#2EE6D6;--ic2:#FF6B7F}
[data-kind=promo]{--ic:#FFB020;--ic2:#FF6B7F}
[data-kind=book]{--ic:#FFB84D;--ic2:#FFE29A}
html[data-theme=glass] .svc-ico[data-kind],html[data-theme=glass] .svc-ico.anim[data-kind],html[data-theme=glass] #order-form .opt .svc-ico[data-kind]{color:var(--ic);
 background:linear-gradient(150deg,color-mix(in srgb,var(--ic) 34%,transparent),color-mix(in srgb,var(--ic2) 10%,transparent) 75%);
 border-color:color-mix(in srgb,var(--ic) 55%,transparent);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 26px -14px color-mix(in srgb,var(--ic) 80%,transparent)}
.svc-fig-ph[data-kind]{color:var(--ic)}
.svc-ico[data-kind] svg .fill,.svc-ico[data-kind] svg .vu rect,.svc-ico[data-kind] svg .spark.s2,.svc-ico[data-kind] svg .spark.s3,
.svc-fig-ph[data-kind] svg .fill,.svc-fig-ph[data-kind] svg .vu rect{fill:var(--ic2)}
.svc-ico[data-kind] svg .soft,.svc-ico[data-kind] svg .page,.svc-ico[data-kind] svg .stripes{stroke:var(--ic2)}
.svc-ico[data-kind] svg .soft{opacity:.85}
html[data-theme=glass] #order-form .opt:has(input:checked) .svc-ico[data-kind]{background:linear-gradient(150deg,var(--ic),color-mix(in srgb,var(--ic2) 80%,var(--ic)));border-color:transparent;color:#fff}
html[data-theme=glass] #order-form .opt:has(input:checked) .svc-ico[data-kind] svg{stroke:#fff}
html[data-theme=glass] #order-form .opt:has(input:checked) .svc-ico[data-kind] svg .fill,html[data-theme=glass] #order-form .opt:has(input:checked) .svc-ico[data-kind] svg .vu rect{fill:#fff}
.opt-check{display:none}

/* order pop-up v3 */
.step-error:empty{display:none}
.step-error{margin:12px 0 0}
.steps.steps-2{grid-template-columns:repeat(2,1fr)}
#order-form.v3 .opt{cursor:pointer;transition:transform .25s var(--spring,ease),background .25s,border-color .25s}
#order-form.v3 .opt:hover{transform:translateY(-2px)}
#order-form.v3 .tiers-head{align-items:center;justify-content:space-between}
#order-form.v3 .tiers-head .th-l{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
#order-form.v3 .tiers-head::after{display:none}
.cur-sw{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.cur-sw button{appearance:none;border:0;background:transparent;color:var(--muted);font:600 12px/1 var(--font-sans,Inter,system-ui);letter-spacing:.02em;padding:7px 11px;border-radius:999px;cursor:pointer;display:inline-flex;gap:4px;align-items:center;transition:background .2s,color .2s}
.cur-sw button span{opacity:.8}
.cur-sw button:hover{color:var(--text)}
.cur-sw button.on{background:var(--lg,#E8E9ED);color:#0B0B0D;box-shadow:0 4px 14px -6px rgba(0,0,0,.6)}
.cur-sw button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fx-note{margin:12px 2px 0;font-size:12px;color:var(--dim);line-height:1.5}
#order-form.v3 .tier-price small{white-space:normal}
.od-details{margin-top:22px;padding:22px;border-radius:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);animation:odIn .45s cubic-bezier(.2,.8,.2,1) both}
.od-details[hidden]{display:none}
.od-h{margin:0 0 14px;font-family:var(--font-display);font-size:20px;letter-spacing:-.02em}
.od-details .fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.od-details .field.wide{grid-column:1/-1}
.od-details textarea.brief{min-height:130px}
.od-details .step-nav{justify-content:flex-end;margin-top:14px}
.od-submit{min-width:220px;justify-content:center}
@keyframes odIn{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@media (max-width:640px){.od-details{padding:16px;border-radius:20px}.od-details .fields{grid-template-columns:1fr}.od-submit{width:100%}#order-form.v3 .tiers-head{flex-direction:column;align-items:flex-start;gap:10px}}
@media (prefers-reduced-motion:reduce){.od-details{animation:none}}
#order-form[hidden]{display:none}

/* Send a message buttons */
.msg-btn{display:inline-flex;align-items:center;gap:8px}
.msg-btn svg{width:18px;height:18px}
.hdr-msg{min-height:42px}
@media (max-width:1100px){.hdr-msg{display:none}}
.mmenu-foot{display:flex;flex-direction:column;gap:10px}

/* Toolkit tiles: light silver like reviews/footer */
html[data-theme=glass] .tool-ico{background:linear-gradient(180deg,#F1F2F4 0%,#DFE1E5 100%);border:1px solid rgba(255,255,255,.85);color:#111214;box-shadow:inset 0 1px 0 #fff,0 22px 44px -22px rgba(0,0,0,.95)}
html[data-theme=glass] .tool:hover .tool-ico{border-color:#fff}
html[data-theme=glass] .tool-ico.has-logo img{filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}

/* v5 (8 Oct) — real editing-suite footage in the home hero: sharp, minimal crop */
html[data-theme=glass] .hero-v2[data-bg=motion] .hero-media video,html[data-theme=glass] .hero-v2[data-bg=motion] .hero-media .frame{filter:saturate(1.05) brightness(.92) contrast(1.04);transform:none;object-fit:cover;object-position:58% 45%}
html[data-theme=glass] .hero-v2[data-bg=motion] .hero-media::after{background:linear-gradient(90deg,rgba(8,8,10,.78) 0%,rgba(8,8,10,.42) 34%,rgba(8,8,10,.04) 68%),linear-gradient(180deg,rgba(8,8,10,.45) 0%,transparent 22%,transparent 62%,var(--bg) 100%)}
/* phones / portrait: show the footage as a wide band (about 2/3 of the frame) instead of a narrow slice, text underneath */
@media (max-width:1100px) and (orientation:portrait){
 html[data-theme=glass] .hero-v2[data-bg=motion] .hero-media{bottom:auto;height:min(96vw,58svh)}
 html[data-theme=glass] .hero-v2[data-bg=motion] .hero-media video,html[data-theme=glass] .hero-v2[data-bg=motion] .hero-media .frame{object-position:56% 50%}
 html[data-theme=glass] .hero-v2[data-bg=motion] .hero-media::after{background:linear-gradient(180deg,rgba(8,8,10,.55) 0%,transparent 26%,transparent 55%,var(--bg) 100%)}
}

/* v6 (9 Oct) — Studio: order Confirm/Cancel/Delete, Toolkit tab */
@media (min-width:1101px){.olist:not(.mlist) .olist-row{grid-template-columns:96px minmax(110px,1fr) minmax(120px,1fr) minmax(120px,1.1fr) 72px 150px 120px 292px;gap:12px}}
.oc-act .oa{flex-wrap:nowrap}
.oc-exp{white-space:normal;line-height:1.35}
.oc-pay .pill{white-space:normal;text-align:center;line-height:1.25}
.oc-act .oa,.sd-acts .oa{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.oc-act .oa .button,.sd-acts .oa .button{min-height:34px;padding:0 12px;font-size:13px;border-radius:10px}
html[data-theme=glass] .oa .oa-ok{background:#E8E9ED!important;color:#0B0B0D!important;border:1px solid #fff!important}
html[data-theme=glass] .oa .oa-ok:hover{background:#fff!important}
html[data-theme=glass] .oa .oa-cancel{color:var(--muted)}
html[data-theme=glass] .oa .oa-del{color:#ff8a80;border-color:rgba(255,107,94,.35)}
html[data-theme=glass] .oa .oa-del:hover{background:rgba(255,107,94,.12);color:#ffb3ab}
.oc-exp{display:block;margin-top:5px;font-size:11.5px;color:var(--dim);font-family:var(--font-mono);letter-spacing:.02em}
.sd-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 16px;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}
.sd-acts .oa{justify-content:flex-start}
@media (max-width:1100px){.olist:not(.mlist) .olist-row{grid-template-columns:1fr auto}.oc-act .oa{justify-content:stretch}.oc-act .oa .button{flex:1 1 auto}}
.tk-form{max-width:860px}
.tk-list{display:grid;gap:10px;margin:8px 0 18px}
.tk-row{display:grid;grid-template-columns:52px minmax(140px,1fr) minmax(170px,240px) auto;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03)}
.tk-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(180deg,#F1F2F4,#DFE1E5);border:1px solid rgba(255,255,255,.85);overflow:hidden}
.tk-ico img{width:40px;height:40px;object-fit:contain;border-radius:22%}
.tk-dot{color:#111214;font-size:20px}
.tk-name{display:flex;flex-direction:column;gap:2px}
.tk-name small{color:var(--dim);font-size:12px}
.tk-row select.input{min-height:44px;padding-top:10px;padding-bottom:10px}
.tk-switch{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.tk-switch input{width:20px;height:20px;accent-color:#E8E9ED}
.tk-add{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:8px}
.tk-add .field{flex:1 1 260px;margin:0}
@media (max-width:640px){.tk-row{grid-template-columns:44px 1fr;gap:10px}.tk-ico{width:44px;height:44px}.tk-ico img{width:34px;height:34px}.tk-row select,.tk-row .tk-switch,.tk-row [data-tk-remove]{grid-column:1/-1}}

.oa .oa-del{width:36px;padding:0!important;display:inline-grid;place-items:center}.oa .oa-del svg{width:17px;height:17px}
.olist-row .oc-st .oc-exp{overflow:visible;text-overflow:clip;white-space:nowrap}
@media (max-width:1100px){.olist-row .oc-act .oa{flex-wrap:nowrap}.olist-row .oc-act .oa .button{width:auto;flex:1 1 0}.olist-row .oc-act .oa .oa-del{flex:0 0 40px}}

/* =====================================================================
   v7 (9 Oct) — smoothness pass
   Moving things never use backdrop blur (it must be re-computed every frame).
   On phones/tablets (touch) all glass blur and blur-transitions are swapped
   for solid, slightly translucent surfaces — same look, GPU-friendly.
   ===================================================================== */
/* everywhere: scrolling review cards are opaque instead of blurred */
html[data-theme=glass] .rev-rows .rcard,html[data-theme=glass] .marquee .rcard{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-theme=glass] .rev-rows .rcard:not(.rev-glow .rcard){background:#1A1B1F}
html[data-theme=glass] .rev-glow .rcard{background:rgba(255,255,255,.86)}
html[data-theme=glass] .marquee .track{will-change:transform;backface-visibility:hidden}
/* pop-up header is solid so content never shows through it */
.om-head{background:#18191D!important;z-index:6!important;isolation:isolate}
/* package row: native, snappy horizontal swipe */
#order-form .tiers{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-padding:0 16px}
#order-form .tiers>.tier{scroll-snap-align:center;scroll-snap-stop:normal}

@media (hover:none) and (pointer:coarse),(max-width:900px){
 html[data-theme=glass] *,html[data-theme=glass] *::before,html[data-theme=glass] *::after,html[data-theme=glass] ::backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 html[data-theme=glass] .hdr-in{background:rgba(16,16,19,.93)}
 html[data-theme=glass] .mmenu{background:rgba(8,8,10,.97)}
 html[data-theme=glass] dialog{background:#18181B}
 html[data-theme=glass] dialog.side-drawer{background:#141417}
 html[data-theme=glass] dialog::backdrop,dialog.order-modal::backdrop{background:rgba(5,5,7,.86)}
 html[data-theme=glass] .om-sheet{background:#17181C}
 html[data-theme=glass] #order-form .tier,html[data-theme=glass] #order-form .tier-custom{background:#DCDEE2;box-shadow:inset 0 1px 0 #fff,0 10px 26px -14px rgba(0,0,0,.7)}
 html[data-theme=glass] #order-form .tier{contain:paint}
 html[data-theme=glass] #order-form .tier.selected{transform:none}
 html[data-theme=glass] .ai-fab{background:rgba(20,20,23,.96)}
 html[data-theme=glass] .hero-v2 .hero-meta{background:rgba(16,16,20,.78)}
 html[data-theme=glass] .card .info,html[data-theme=glass] .card .badge,html[data-theme=glass] .card .rating{background:rgba(16,16,19,.82)}
 html[data-theme=glass] body.order-page .form-grid>div:first-child{background:rgba(20,20,23,.94)}
 html[data-theme=glass] .svc-row,html[data-theme=glass] .rcard,html[data-theme=glass] .chip,html[data-theme=glass] .btn-ghost,html[data-theme=glass] .button.ghost,html[data-theme=glass] .olist{background:rgba(30,31,35,.9)}
 .svc-fig figcaption,.lower3,.mon-play,.hero-motion-toggle{background:rgba(14,14,17,.85)!important}
 .work-panel{background:rgba(255,255,255,.035)}
 /* no blur during reveals, pop-ups or selection — fade and slide only */
 html[data-theme=glass] .rv,html[data-theme=glass] .rv.in{filter:none!important}
 html[data-theme=glass] .rv{transition:opacity .6s var(--ease),transform .6s var(--ease)}
 #order-form *,#order-form,.om-sheet,dialog.order-modal,.od-details,.fstep,.tier,.tier-custom,.pkg-choice,.svc-fig,.tools-glow,.rev-glow::before{filter:none!important}
 html[data-theme=glass] .tiers:has(.selected) .tier:not(.selected){opacity:.62;transform:none}
 html[data-theme=glass] .opts:has(input:checked) .opt:not(:has(input:checked)){opacity:.6;transform:none}
 /* cheaper hero: no per-frame colour filter on the video */
 html[data-theme=glass] .hero-v2 .hero-media video,html[data-theme=glass] .hero-v2 .hero-media .frame{filter:none!important}
 /* lighter shadows while scrolling */
 html[data-theme=glass] .tool-ico{box-shadow:inset 0 1px 0 #fff,0 10px 22px -14px rgba(0,0,0,.9)}
 html[data-theme=glass] .rev-glow,html[data-theme=glass] .ftr{box-shadow:inset 0 1px 0 #fff}
 .tool-ico{animation:none}
}

/* v8: order pop-up, delivery, confirmation */
dialog.side-drawer.ov2{width:min(860px,100%)}
.ov-steps{display:flex;gap:8px;list-style:none;margin:0 0 14px;padding:0;flex-wrap:wrap}
.ov-steps li{display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line-2,#d5d7dc);border-radius:99px;font-size:.82rem;opacity:.6}
.ov-steps li i{width:9px;height:9px;border-radius:50%;background:#b5b8bf}
.ov-steps li.on{opacity:1;font-weight:600}
.ov-steps li.on i{background:#2e9e5b}
.ov-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;margin:14px 0}
.ov-grid>div{min-width:0}
.ov-grid dt{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin:0 0 2px}
.ov-grid dd{margin:0;overflow-wrap:anywhere}
.ov-h{margin:22px 0 8px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.ov-brief{margin:0}
.deliver-form,.ov-send,.ov-edit form{display:grid;gap:10px}
.ov-link input{flex:1;min-width:0}
.ov-link div{display:flex;gap:8px;margin-top:6px}
.ov-chat{max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--line-2,#d5d7dc);border-radius:14px;margin-bottom:10px}
.ov-msg{max-width:84%;padding:8px 12px;border-radius:14px;background:rgba(127,127,135,.14)}
.ov-msg.me{align-self:flex-end;background:rgba(46,158,91,.16)}
.ov-msg p{margin:0}.ov-msg small{opacity:.6;font-size:.72rem}
.ov-edit{margin-top:18px}.ov-edit summary{cursor:pointer;font-weight:600}
.deliverybox{margin:14px 0;padding:16px;border:1px solid var(--line-2,#d5d7dc);border-radius:16px;display:grid;gap:10px}
.deliverybox.done{border-color:#2e9e5b}
.confirm-form{display:grid;gap:10px}
.doc-links{margin:8px 0 0}
@media(max-width:560px){.ov-grid{grid-template-columns:1fr}}

.ov-btns{display:flex;gap:10px;flex-wrap:wrap}

/* ============ Client accounts: auth popup, header menu, dashboard, order page (2026-10-10b) ============ */
.hdr-login{white-space:nowrap}
.acct{position:relative}
.acct-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--text);display:grid;place-items:center;overflow:hidden;cursor:pointer;font:700 15px var(--font-sans);padding:0;transition:border-color var(--t-fast),transform var(--t-fast)}
.acct-btn:hover{border-color:rgba(255,255,255,.4);transform:translateY(-1px)}
.acct-btn img{width:100%;height:100%;object-fit:cover;display:block}
.acct-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:240px;padding:8px;border-radius:18px;background:rgba(24,25,29,.94);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);box-shadow:0 30px 80px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);z-index:60;display:grid;gap:2px}
.acct-menu[hidden]{display:none}
.acct-who{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:4px;display:grid}
.acct-who b{font-size:14px}.acct-who small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis}
.acct-menu a,.acct-menu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:10px;border:0;background:none;color:var(--text);font:500 14px var(--font-sans);cursor:pointer;text-decoration:none}
.acct-menu a:hover,.acct-menu button:hover{background:rgba(255,255,255,.07)}
.acct-menu [data-logout]{color:var(--muted)}
.hdr-cta .acct{order:3}
@media (max-width:1100px){.hdr-login{display:none}}

.auth-modal{position:fixed;inset:0;margin:auto;width:min(520px,calc(100% - 24px));max-width:none;max-height:calc(100% - 24px);padding:0;border:0;border-radius:28px;background:transparent;color:var(--text);overflow:visible;box-shadow:none}
.auth-modal::backdrop{background:rgba(6,6,8,.5);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%)}
.auth-card{border-radius:28px;background:rgba(24,25,29,.72);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:saturate(180%) blur(40px);backdrop-filter:saturate(180%) blur(40px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 60px 140px -40px rgba(0,0,0,.9);padding:clamp(22px,4vw,34px);max-height:calc(100vh - 24px);overflow:auto;overscroll-behavior:contain;animation:auth-in .45s var(--ease) both}
.auth-card.inline{max-width:560px;margin:0;animation:none}
@keyframes auth-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.auth-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.auth-head h2{font-size:clamp(26px,4vw,34px);letter-spacing:-.02em;margin:6px 0 4px;line-height:1.05}
.auth-head .eyebrow svg{width:14px;height:14px}
.auth-head .subtle{margin:0}
.auth-socials{display:grid;gap:10px;margin:4px 0 6px}
.auth-social{display:flex;align-items:center;justify-content:center;gap:12px;height:52px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--text);font:600 15px var(--font-sans);text-decoration:none;transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.auth-social:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.auth-social svg{width:20px;height:20px;flex:none}
.auth-or{display:flex;align-items:center;gap:12px;color:var(--dim);font:500 12px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;margin:16px 0 6px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.auth-form .field{margin:12px 0 0}
.auth-form .field small{font-weight:500;color:var(--dim);font-size:12px}
.auth-terms,.od-terms{display:flex;align-items:flex-start;gap:12px;margin:16px 0 4px;font-size:13.5px;font-weight:500;color:var(--muted);line-height:1.5;min-height:0}
.auth-terms input,.od-terms input{width:20px;height:20px;margin:1px 0 0;accent-color:#f2f2f4;flex:none}
.auth-submit{width:100%;margin-top:16px}
.auth-foot{margin:16px 0 0;text-align:center;color:var(--muted);font-size:13.5px}
.auth-foot .link,.form-error .link{background:none;border:0;padding:0;font:inherit;color:var(--text);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.auth-done{text-align:center;padding:24px 6px}.auth-done svg{width:40px;height:40px;color:var(--ok)}.auth-done h3{margin:10px 0 6px}
.auth-page{min-height:50vh}
@media (max-width:520px){.auth-grid{grid-template-columns:1fr}}

.od-who{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);flex-direction:row!important}
.od-who b{display:block;font-size:14px}.od-who small{color:var(--muted)}
.od-signed{margin-left:auto;font:600 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ok)}
.od-av{width:40px;height:40px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);display:grid;place-items:center;overflow:hidden;font:700 15px var(--font-sans);color:var(--text);flex:none}
.od-av img{width:100%;height:100%;object-fit:cover}
.od-av.big{width:84px;height:84px;font-size:30px}
.od-acct{margin:6px 0 0}

.claim{margin:18px 0;padding:22px;border-radius:20px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 60%),var(--bg-2)}
.claim-top h3{margin:6px 0 6px;font-size:22px;letter-spacing:-.01em}
.claim-top .eyebrow svg{width:14px;height:14px}
.claim-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}

.acct-hero .acct-nav{display:flex;gap:6px;margin-top:22px;border-bottom:1px solid var(--line);padding-bottom:0}
.acct-nav a{padding:10px 16px;border-radius:12px 12px 0 0;color:var(--muted);font-weight:600;font-size:14px;text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.acct-nav a.on{color:var(--text);border-bottom-color:var(--text)}
.acct-nav a:hover{color:var(--text)}
.acct-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(20px,3vw,44px);align-items:start}
.acct-side{display:grid;gap:16px;position:sticky;top:96px}
.acct-card{padding:22px;border-radius:20px;border:1px solid var(--line);background:var(--bg-2);display:grid;gap:12px}
.acct-card .btn{justify-self:start;margin:0}
.acct-me{display:flex;align-items:center;gap:14px}.acct-me b{display:block}.acct-me small{color:var(--muted);font-size:13px}
.acct-steps{margin:0;padding-left:20px;color:var(--muted);font-size:14px;line-height:1.7}
.acct-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px}
.acct-list li{display:flex;align-items:center;gap:10px}.acct-list svg{width:18px;height:18px}
.acct-h{font-size:18px;margin:0 0 12px;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.acct-h span{font:600 12px var(--font-mono);padding:3px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}
.ok{color:var(--ok)}
.ocard{display:block;padding:22px;border-radius:20px;border:1px solid var(--line);background:var(--bg-2);color:var(--text);text-decoration:none;margin:0 0 14px;transition:border-color var(--t-fast),transform var(--t-fast),background var(--t-fast)}
.ocard:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px);background:var(--surface)}
.ocard-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
.ocard-top small{font:500 12px var(--font-mono);letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.ocard-top h3{margin:4px 0 4px;font-size:20px;letter-spacing:-.01em}
.ocard-top .subtle{margin:0}
.ocard-right{display:flex;align-items:center;gap:10px;flex:none}
.ocard-next{margin:12px 0 0;color:var(--muted);font-size:13.5px}
.unread{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--rec);color:#fff;font:700 12px var(--font-sans);display:grid;place-items:center}
.prog{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative;counter-reset:step}
.prog li{position:relative;display:grid;justify-items:center;text-align:center;gap:8px;font-size:12.5px;color:var(--dim);font-weight:600;padding-top:2px}
.prog li i{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-2);background:var(--bg);display:grid;place-items:center;position:relative;z-index:1;transition:background var(--t),border-color var(--t)}
.prog li i svg{width:14px;height:14px;color:#0b0b0d}
.prog li::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;background:var(--line-2)}
.prog li:first-child::before{display:none}
.prog li.done{color:var(--text)}
.prog li.done i{background:#f2f2f4;border-color:#f2f2f4}
.prog li.done::before{background:#f2f2f4}
.prog li.now{color:var(--text)}
.prog li.now i{border-color:#f2f2f4;box-shadow:0 0 0 5px rgba(255,255,255,.08);animation:prog-pulse 2s ease-in-out infinite}
@keyframes prog-pulse{0%,100%{box-shadow:0 0 0 4px rgba(255,255,255,.06)}50%{box-shadow:0 0 0 8px rgba(255,255,255,.12)}}
.prog li small{font:500 11px var(--font-mono);color:var(--dim);letter-spacing:.02em}
.prog.compact{grid-template-columns:repeat(6,1fr)}
.prog.compact li{font-size:11px;gap:6px}
.prog.compact li i{width:18px;height:18px}.prog.compact li i svg{width:10px;height:10px}
.prog.compact li::before{top:10px}
.prog.cancelled li{opacity:.45}
.od-layout{display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(20px,3vw,44px);align-items:start}
.od-main{display:grid;gap:16px;min-width:0}
.od-side{display:grid;gap:16px;min-width:0}
.od-panel{padding:clamp(18px,3vw,28px);border-radius:22px;border:1px solid var(--line);background:var(--bg-2);display:grid;gap:14px}
.od-panel.head{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01) 60%),var(--bg-2)}
.od-panel.deliver{border-color:rgba(61,220,132,.4);background:linear-gradient(160deg,rgba(61,220,132,.08),rgba(255,255,255,.01) 60%),var(--bg-2)}
.od-panel.done{border-color:rgba(61,220,132,.25)}
.od-panel.pay{border-color:rgba(255,255,255,.2)}
.od-panel h2{margin:6px 0 0;font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;line-height:1.1}
.od-panel h3{margin:4px 0 0;font-size:20px;letter-spacing:-.01em}
.od-panel-head .eyebrow svg{width:14px;height:14px}
.od-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.od-next{margin:0;color:var(--muted);font-size:14.5px}
.od-note{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.od-btns{display:flex;gap:10px;flex-wrap:wrap}.od-btns .btn{margin:0}
.od-docs{display:flex;gap:10px;flex-wrap:wrap}.od-docs .btn{margin:0}
.od-dl{margin:0;display:grid;gap:10px}.od-dl div{display:grid;grid-template-columns:120px 1fr;gap:10px;font-size:14px}.od-dl dt{color:var(--dim)}.od-dl dd{margin:0}
.od-brief{font-size:14px;line-height:1.6;max-height:260px;overflow:auto}
.approve-form{display:grid;gap:6px;padding-top:6px;border-top:1px solid var(--line)}
.approve-form h4{margin:10px 0 0;font-size:16px}
.approve-form .field{margin:8px 0 0}
.files{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.filerow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);min-width:0}
.filerow>div{min-width:0;flex:1;display:grid}
.filerow a{color:var(--text);font-weight:600;font-size:14px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filerow a:hover{text-decoration:underline}
.filerow small{color:var(--dim);font-size:12px}
.filerow .btn{margin:0;flex:none}
.file-ic{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.06);display:grid;place-items:center;flex:none}
.file-ic svg{width:18px;height:18px}
.files.compact .filerow{padding:8px 10px}
.thread{display:grid;gap:10px;max-height:460px;min-height:140px;overflow:auto;padding:4px 2px;overscroll-behavior:contain}
.msg{max-width:84%;padding:12px 14px;border-radius:16px;background:var(--surface-2);display:grid;gap:4px}
.msg p{margin:0;font-size:14.5px;line-height:1.55}
.msg small{color:var(--dim);font-size:11.5px}
.msg.me{justify-self:end;background:#f2f2f4;color:#0b0b0d;border-bottom-right-radius:4px}
.msg.me small{color:rgba(0,0,0,.5)}
.msg.them{border-bottom-left-radius:4px}
.compose{display:flex;align-items:flex-end;gap:8px;padding-top:4px}
.compose textarea{flex:1;min-height:48px;max-height:180px;resize:none;border-radius:16px;padding:12px 14px}
.compose .btn{margin:0;width:48px;height:48px;padding:0;border-radius:50%;display:grid;place-items:center;flex:none}
.compose .btn svg{width:20px;height:20px}
.attach{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;cursor:pointer;color:var(--muted);flex:none;transition:border-color var(--t-fast),color var(--t-fast)}
.attach:hover{color:var(--text);border-color:rgba(255,255,255,.4)}
.attach svg{width:20px;height:20px}
.attach.busy{opacity:.5;pointer-events:none;animation:prog-pulse 1s infinite}
.compose-hint{margin:2px 0 0;font-size:12.5px}
.pf-photo{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pf-photo .btn{margin:0 8px 0 0;cursor:pointer}
.pf-photo .subtle{margin:8px 0 0;font-size:12.5px}
.profile-form .field{margin:12px 0 0}
.profile-form .btn{justify-self:start;margin-top:18px}
.profile-form input:disabled{opacity:.6}
.legal h2{font-size:20px;margin:30px 0 10px}.legal ul{padding-left:20px;color:var(--muted);line-height:1.7}.legal p{color:var(--muted);line-height:1.7}
.prose.narrow{max-width:760px}
.acct-tag{font:600 10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#17663b}
.acct-cell{display:flex;align-items:center;gap:10px}.acct-cell img,.acct-cell>span{width:34px;height:34px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#e6e1d8;font-weight:700;flex:none}
.upload-btn{cursor:pointer;display:inline-flex;margin:8px 0 4px}
.studio-page .files{margin:8px 0}.studio-page .filerow{background:#fff;border-color:#dcd8cf}.studio-page .filerow a{color:#141416}.studio-page .file-ic{background:#efede8}
.studio-page .field>span{font-weight:600}
@media (max-width:1100px){.acct-grid,.od-layout{grid-template-columns:1fr}.acct-side{position:static}.od-side{order:2}}
@media (max-width:760px){.prog li span{font-size:10.5px}.prog li small{display:none}.prog.compact li span{display:none}.od-dl div{grid-template-columns:1fr}.ocard-top{flex-direction:column}.acct-nav{overflow:auto}.msg{max-width:94%}}
@media (max-width:520px){.prog{grid-template-columns:repeat(6,1fr)}.prog li span{display:none}.prog li.now span,.prog li:last-child span{display:none}.od-panel{padding:16px}.compose .attach{width:42px;height:42px}}
.msg.sys{justify-self:center;background:transparent;border:1px dashed var(--line-2);text-align:center;max-width:100%}.msg.sys p{font-size:12.5px;color:var(--muted)}
.hdr .brand{flex:none}.hdr .brand-text .wm,.hdr .brand-text small{white-space:nowrap}
@media (max-width:1380px){.hdr-cta .hdr-login{padding-left:14px;padding-right:14px}}
@media (max-width:1240px) and (min-width:1101px){.hdr-cta .hdr-msg{display:none}}