:root{
  --bg:#f2f2ef;
  --ink:#111214;
  --soft:#777a7f;
  --line:rgba(17,18,20,.14);
  --dark:#090a0d;
  --dark2:#11131a;
  --white:#f6f7f9;
  --accent:#cfd5dc;
  --radius:28px;
  --mx:50vw;
  --my:50vh;
}
*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden;max-width:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.menu-open{overflow:hidden}
button,a{font:inherit}
a,button{-webkit-tap-highlight-color:transparent}
/* Prevent accidental text selection on interactive UI, desktop + mobile */
a,button,[role="button"],.btn,.project-link,.text-link,.contact-button,.chips span,.personal-tags b{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{color:inherit}
::selection{background:#111214;color:#f6f7f9}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:80;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}
.cursor-glow{position:fixed;left:0;top:0;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(180,187,197,.18),transparent 67%);transform:translate(calc(var(--mx) - 180px),calc(var(--my) - 180px));pointer-events:none;z-index:2;mix-blend-mode:multiply;opacity:.7;transition:opacity .2s ease}
.page-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:100;pointer-events:none}.page-progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:currentColor;color:#111214}
.nav-wrap{position:fixed;z-index:70;top:18px;left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 28px));height:58px;border:1px solid rgba(120,120,120,.18);background:rgba(246,247,249,.76);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:18px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;box-shadow:0 12px 40px rgba(0,0,0,.06);transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
.nav-wrap[data-theme="dark"]{background:rgba(15,16,20,.76);border-color:rgba(255,255,255,.12);box-shadow:0 14px 44px rgba(0,0,0,.22)}
.brand{font:800 20px Manrope;text-decoration:none;color:#111;letter-spacing:-.04em;transition:color .35s ease}.brand span{color:#7f8792}.nav-wrap[data-theme="dark"] .brand{color:#f5f6f8}
.nav-wrap nav{display:flex;gap:28px}.nav-wrap nav a{position:relative;font-size:13px;color:#37393d;text-decoration:none;transition:color .35s ease}.nav-wrap[data-theme="dark"] nav a{color:#f5f6f8}.nav-wrap nav a:after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .28s ease}.nav-wrap nav a:hover:after,.nav-wrap nav a.active:after{transform:scaleX(1);transform-origin:left}
.menu{display:none;background:none;border:0;width:34px;height:34px;padding:7px;cursor:pointer}.menu span{display:block;height:1px;background:#111;margin:6px 0;transition:transform .3s ease,background .35s ease}.nav-wrap[data-theme="dark"] .menu span{background:#fff}.menu[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mobile-nav{position:fixed;inset:0;z-index:60;background:rgba(9,10,13,.96);backdrop-filter:blur(18px);display:none;opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s ease}.mobile-nav.open{opacity:1;visibility:visible}.mobile-nav-inner{height:100%;padding:130px 24px 40px;display:flex;flex-direction:column;justify-content:center;gap:0}.mobile-nav a{display:flex;align-items:baseline;gap:16px;color:#f6f7f9;text-decoration:none;font:600 clamp(42px,12vw,72px)/1.15 Manrope;letter-spacing:-.05em;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1)}.mobile-nav a span{font:500 10px Inter;letter-spacing:.15em;color:#686d76}.mobile-nav small{margin-top:auto;color:#737884;letter-spacing:.18em;font-size:10px}
.section{position:relative;padding:120px max(5vw,28px);overflow-x:clip}.light{background:var(--bg)}.dark{background:var(--dark);color:var(--white)}
.hero{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;padding-top:150px;overflow:hidden}.hero-copy{position:relative;z-index:4}.eyebrow,.section-index,.micro{font-size:11px;letter-spacing:.18em;font-weight:600}.hero h1{font:800 clamp(64px,10vw,148px)/.82 Manrope;margin:22px 0 28px;letter-spacing:-.065em}.hero h1 span{font-weight:400;color:#80848a}.hero-line{font-size:clamp(18px,2vw,30px);max-width:650px;color:#3e4146}.hero-actions{display:flex;gap:12px;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:999px;text-decoration:none;font-size:12px;font-weight:600;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}.primary{background:#111;color:white;box-shadow:0 10px 24px rgba(0,0,0,.13)}.primary:hover{box-shadow:0 14px 30px rgba(0,0,0,.19)}.ghost{border:1px solid var(--line);color:#111;background:rgba(255,255,255,.16)}.ghost:hover{background:rgba(255,255,255,.68)}
.hero-object{height:590px;position:relative;z-index:3;perspective:1000px}.orb{position:absolute;border-radius:50%}.orb-photo{width:330px;height:330px;right:5%;top:12%;overflow:hidden;background:radial-gradient(circle at 35% 30%,#fff,#bcc3cb 35%,#777d85 68%,#202329 100%);box-shadow:0 45px 70px rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.72)}.orb-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(255,255,255,.18),transparent 44%,rgba(13,15,18,.08));pointer-events:none}.orb-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;transform:scale(1.03);filter:saturate(.82) contrast(1.04)}.orb-2{width:200px;height:200px;right:42%;bottom:10%;background:linear-gradient(135deg,#f5f5f2,#a8afb7);box-shadow:0 30px 55px rgba(0,0,0,.1)}
.glass-card{position:absolute;width:190px;padding:22px;border-radius:22px;border:1px solid rgba(255,255,255,.58);background:rgba(255,255,255,.42);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);font:700 26px Manrope;box-shadow:0 20px 50px rgba(0,0,0,.08);will-change:transform}.glass-card small{font:500 11px Inter;color:#666}.card-a{right:0;top:52%}.card-b{left:3%;top:11%}.card-c{left:12%;bottom:7%}.scroll-hint{position:absolute;left:max(5vw,28px);bottom:28px;font-size:10px;letter-spacing:.18em;text-decoration:none;color:inherit;z-index:5}.scroll-hint span{font-size:16px;display:inline-block;animation:bounce 1.8s ease-in-out infinite}
.section-index{position:absolute;top:72px;left:max(5vw,28px);color:#6d7074}.inverted{color:#777b84}.about{min-height:850px;border-top:1px solid var(--line)}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;margin-top:80px}.about h2,.web h2,.contact h2{font:500 clamp(48px,7vw,98px)/.98 Manrope;letter-spacing:-.055em;margin:0}.about h2 em,.web h2 em{font-family:Georgia,serif;font-weight:400;color:#85898e}.about-copy{padding-top:12px}.about-copy>p{font-size:20px;line-height:1.6;max-width:620px;color:#45484d}.facts{margin-top:58px;border-top:1px solid var(--line)}.facts>div{display:grid;grid-template-columns:60px 160px 1fr;padding:22px 0;border-bottom:1px solid var(--line);transition:padding-left .25s ease}.facts>div:hover{padding-left:8px}.facts span{font-size:12px;color:#8a8e93}.facts b{font:600 16px Manrope}.facts small{font-size:13px;color:#70747a}
.dj{min-height:1000px;overflow:hidden}.dj-bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,black 0%,transparent 90%);-webkit-mask-image:linear-gradient(to bottom,black 0%,transparent 90%)}.dj-head{position:relative;margin-top:85px}.dj-head h2{font:800 clamp(82px,15vw,210px)/.78 Manrope;letter-spacing:-.075em;margin:20px 0 30px}.dj-head h2 span{color:#444854}.dj-head p{font-size:20px;color:#a5a9b2;max-width:580px}.dj-stage{display:grid;grid-template-columns:1.15fr .85fr;gap:6vw;align-items:end;margin-top:80px}
.visual-panel{height:500px;border-radius:32px;background:#15171c;border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;margin:0;transform-style:preserve-3d}.photo-stack{position:absolute;inset:0}.dj-backdrop,.dj-subject{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 24%}.dj-backdrop{filter:blur(18px) saturate(.8) contrast(1.02) brightness(.32);transform:scale(1.14);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease}.dj-subject{filter:saturate(.94) contrast(1.03) brightness(.86);transform:scale(1.015);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease}.visual-panel:hover .dj-backdrop{transform:scale(1.18);filter:blur(16px) saturate(.88) brightness(.38)}.visual-panel:hover .dj-subject{transform:scale(1.04);filter:saturate(.98) contrast(1.04) brightness(.9)}.dj-photo-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,12,.08),rgba(8,9,12,.04) 40%,rgba(8,9,12,.72));pointer-events:none}.dj-logo-record{position:absolute;right:24px;top:24px;width:94px;height:94px;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle at center,#090a0d 0 2px,#1b1d22 3px 5px);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 35px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);animation:spin 16s linear infinite;z-index:2}.dj-logo-record:before{content:"";position:absolute;width:34%;height:34%;border-radius:50%;background:#eef0f4;box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 0 0 8px rgba(255,255,255,.04)}.dj-logo-record:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#111316;z-index:2}.dj-logo-record img{position:relative;z-index:3;width:60%;height:60%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}.live-tag{position:absolute;bottom:24px;left:24px;font-style:normal;font-size:10px;letter-spacing:.18em;display:flex;align-items:center;gap:9px;z-index:2}.live-tag i{width:6px;height:6px;border-radius:50%;background:#f4f5f7;box-shadow:0 0 0 5px rgba(255,255,255,.08);animation:pulse 2s ease-in-out infinite}.trackline{display:grid;grid-template-columns:100px 1fr;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.12);transition:padding-left .25s ease}.trackline:hover{padding-left:8px}.trackline span{font-size:10px;letter-spacing:.14em;color:#777d88}.trackline b{font-weight:500}.dj-actions{display:flex;gap:26px;align-items:center;margin-top:32px}.light-btn{background:#f2f2ef;color:#111}.text-link{color:#dfe1e5;text-decoration:none;font-size:13px;border:0;background:transparent;padding:0;cursor:pointer}.text-link:after,.project-link:after,.mini-project a:after,.contact-links a:after,.contact-button:after{content:"";display:block;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .25s ease}.text-link:hover:after,.project-link:hover:after,.mini-project a:hover:after,.contact-links a:hover:after,.contact-button:hover:after{transform:scaleX(1);transform-origin:left}.ticker{position:absolute;bottom:20px;left:0;width:100%;overflow:hidden;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:10px 0;color:#787d86;white-space:nowrap}
.web{padding-bottom:150px}.web-intro{display:grid;grid-template-columns:1.2fr .8fr;gap:4vw;margin-top:80px;align-items:end}.web-intro p{font-size:19px;line-height:1.5;color:#5f6267}.services{display:grid;grid-template-columns:repeat(4,1fr);margin:90px 0 110px;border-top:1px solid var(--line)}.service{padding:24px 22px 32px 0;border-bottom:1px solid var(--line);transition:transform .25s ease}.service:hover{transform:translateY(-5px)}.service span{font-size:11px;color:#85898e}.service h3{font:600 22px Manrope;margin:42px 0 12px}.service p{color:#777b80;font-size:13px;line-height:1.5}.project{border-radius:34px;background:#dedfdc;padding:34px;overflow:hidden}.project-top{display:flex;align-items:flex-start;justify-content:space-between}.project-label{font-size:10px;letter-spacing:.16em;color:#6d7074}.project h3{font:800 clamp(58px,9vw,120px)/.88 Manrope;letter-spacing:-.065em;margin:20px 0}.project-link{color:#111;text-decoration:none;font-size:13px}.project-showcase{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:end}.mockup-stack{position:relative;padding:0 72px 40px 0;transform-style:preserve-3d}.browser-shell{position:relative;border-radius:22px;overflow:hidden;background:#17181a;box-shadow:0 30px 70px rgba(0,0,0,.15);border:1px solid rgba(0,0,0,.08)}.browser-top{height:44px;display:flex;align-items:center;gap:8px;padding:0 14px;color:#8d9197;font-size:10px}.browser-top i{width:8px;height:8px;border-radius:50%;background:#62666d}.browser-top span{margin-left:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.site-shot{position:relative;overflow:hidden;background:#efe9e2}.site-shot img{display:block;width:100%;height:auto;will-change:transform}.desktop-shot{height:430px}.desktop-shot img{transform:translateY(0);transition:transform 4.8s cubic-bezier(.18,.75,.12,1)}.browser-shell:hover .desktop-shot img,.desktop-shot.auto-scroll img{transform:translateY(var(--preview-end,0px))}.phone-shell{position:absolute;right:0;bottom:0;width:148px;height:300px;border:7px solid #151619;border-radius:29px;background:#151619;box-shadow:0 24px 50px rgba(0,0,0,.28);overflow:hidden;transform:translateZ(28px)}.phone-shell:after{content:"";position:absolute;inset:0;border-radius:23px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);pointer-events:none;z-index:4}.phone-speaker{position:absolute;z-index:5;top:7px;left:50%;transform:translateX(-50%);width:45px;height:12px;border-radius:999px;background:#151619}.mobile-shot{height:100%;border-radius:21px;background:#151619;padding-top:18px;box-sizing:border-box}.mobile-shot:before{content:"";position:absolute;left:0;top:0;right:0;height:22px;background:linear-gradient(180deg,#151619 18%,rgba(21,22,25,.75) 65%,rgba(21,22,25,0));z-index:3;pointer-events:none}.mobile-shot:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.25px rgba(21,22,25,.98);pointer-events:none;z-index:4}.mobile-shot img{width:108%;margin-left:-4%;transform:translateY(var(--preview-start,-12px));transition:transform 4.8s cubic-bezier(.18,.75,.12,1)}.mobile-shot.auto-scroll img{transform:translateY(var(--preview-end,var(--preview-start,-12px)))}.project-copy{padding:0 20px 12px}.project-copy .lead{font:600 24px/1.25 Manrope}.project-copy p{color:#51545a;line-height:1.55}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.chips span{border:1px solid rgba(0,0,0,.16);padding:8px 11px;border-radius:999px;font-size:10px;transition:background .25s ease,transform .25s ease}.chips span:hover{background:rgba(255,255,255,.42);transform:translateY(-2px)}.project-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.mini-project{min-height:270px;padding:28px;border-radius:28px;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;transition:transform .32s ease,box-shadow .32s ease}.mini-project span{margin-bottom:auto;font-size:11px;color:#8b8f95}.mini-project h3{font:700 28px Manrope;margin:0 0 8px}.mini-project p{color:#71757a}.mini-project a{color:#111;text-decoration:none;font-size:12px;width:max-content}.personal-card{position:relative;justify-content:flex-start;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.08))}.personal-card:before{content:"";position:absolute;right:-50px;bottom:-50px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at center,rgba(212,216,223,.8),rgba(212,216,223,0) 70%);pointer-events:none}.personal-copy{position:relative;z-index:2;margin-top:auto;padding-right:min(44%,390px)}.personal-copy p{max-width:34ch}.personal-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.personal-tags b{font:500 10px/1 Manrope;border:1px solid rgba(0,0,0,.12);padding:8px 10px;border-radius:999px;color:#51545a;background:rgba(255,255,255,.38);transition:background .25s ease,transform .25s ease}.personal-tags b:hover{background:rgba(255,255,255,.62);transform:translateY(-2px)}.personal-preview{position:absolute;right:26px;top:28px;width:min(40%,350px);border-radius:18px;overflow:hidden;background:#14161b;border:1px solid rgba(0,0,0,.08);box-shadow:0 18px 40px rgba(0,0,0,.08);transform:none;transition:transform .35s ease,box-shadow .35s ease}.personal-card:hover .personal-preview{transform:translateY(-4px);box-shadow:0 24px 50px rgba(0,0,0,.12)}.personal-preview-top{height:30px;display:flex;align-items:center;gap:6px;padding:0 10px;color:#8d9197;font-size:10px;background:#17181a}.personal-preview-top i{width:7px;height:7px;border-radius:50%;background:#62666d}.personal-preview-top small{margin-left:6px;font:500 10px/1 Manrope;letter-spacing:.02em}.personal-preview-screen{height:208px;overflow:hidden;background:#f7f7f5}.personal-preview-screen img{display:block;width:100%;height:auto}.muted{background:#e7e8e5}.hover-lift:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,0,0,.07)}
.contact{min-height:780px;min-height:82svh;display:flex;flex-direction:column;justify-content:space-between}.contact-inner{margin-top:90px}.contact h2{font-size:clamp(64px,10vw,145px);font-weight:500}.contact h2 span{color:#555a65}.contact p{font-size:22px;color:#9297a0}.contact-links{display:flex;gap:28px;margin-top:55px;align-items:center}.contact-links a,.contact-button{color:#f1f2f4;text-decoration:none;font-size:12px;letter-spacing:.1em;background:transparent;border:0;padding:0;cursor:pointer}.contact footer{display:flex;justify-content:space-between;padding-top:28px;border-top:1px solid rgba(255,255,255,.1);font-size:10px;color:#6f747d}.contact footer a{color:#979ca5;text-decoration:none}.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}.reveal.in{opacity:1;transform:none}.delay-1{transition-delay:.12s}.tilt-card{transition:transform .22s ease-out}.magnetic{will-change:transform}.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:120;transform:translate(-50%,18px);padding:12px 16px;border-radius:999px;background:rgba(17,18,20,.9);backdrop-filter:blur(12px);color:#f6f7f9;font-size:12px;box-shadow:0 14px 36px rgba(0,0,0,.2);opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s ease;white-space:nowrap}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
@media(max-width:900px){
  .cursor-glow{display:none}.nav-wrap nav{display:none}.menu{display:block}.mobile-nav{display:block}.hero{grid-template-columns:1fr;padding-top:150px}.hero-object{height:440px;margin-top:10px}.orb-photo{width:275px;height:275px}.orb-2{width:150px;height:150px}.glass-card{width:155px;padding:17px}.about-grid,.web-intro,.dj-stage,.project-showcase{grid-template-columns:1fr}.services{grid-template-columns:1fr 1fr}.facts>div{grid-template-columns:45px 120px 1fr}.dj-head h2{font-size:20vw}.project-copy{padding:18px 0 0}.project-row{grid-template-columns:1fr}.personal-card{padding-bottom:24px}.personal-copy{padding-right:0}.personal-preview{position:relative;right:auto;top:auto;width:100%;margin-top:24px;transform:none}.personal-card:hover .personal-preview{transform:translateY(-2px)}.mockup-stack{padding-right:54px;transform-style:flat}.phone-shell{width:128px;height:260px;transform:none}.contact-links{flex-wrap:wrap}
}
@media(max-width:600px){
  .section{padding:100px 20px}.section-index{top:54px;left:20px}.nav-wrap{top:12px;width:calc(100% - 20px);height:54px;border-radius:16px}.hero{padding-top:118px;min-height:100svh}.hero h1{font-size:18vw}.hero-line{font-size:18px}.hero-actions{flex-wrap:wrap}.hero-object{height:385px;margin-top:18px}.orb-photo{width:235px;height:235px;right:-5px;top:36px}.orb-2{right:49%;bottom:4%;width:132px;height:132px}.card-a{right:-6px;top:61%}.card-b{left:-6px;top:2%}.card-c{left:3px;bottom:0}.glass-card{width:142px;padding:15px;border-radius:18px;font-size:21px}.glass-card small{font-size:9px}.scroll-hint{left:20px;bottom:18px}.about-grid{margin-top:60px}.about h2,.web h2{font-size:13vw}.about-copy>p{font-size:17px}.facts>div{grid-template-columns:32px 1fr}.facts small{grid-column:2;margin-top:6px}.services{grid-template-columns:1fr}.service{padding-right:0}.dj{min-height:940px}.dj-stage{margin-top:45px}.visual-panel{height:380px}.dj-logo-record{width:74px;height:74px;right:18px;top:18px}.project{padding:20px;border-radius:24px}.project-top{gap:18px}.project-link{white-space:nowrap}.mockup-stack{padding:0 34px 42px 0}.desktop-shot{height:300px}.phone-shell{width:100px;height:210px;border-width:5px;border-radius:22px}.phone-speaker{top:5px;width:33px;height:9px}.project-copy .lead{font-size:21px}.contact{min-height:680px}.contact h2{font-size:15vw}.contact footer{gap:20px;flex-direction:column}.toast{max-width:calc(100% - 28px);white-space:normal;text-align:center}
}
@media(hover:none),(pointer:coarse){.tilt-card{transform:none!important}.facts>div:hover,.trackline:hover{padding-left:0}.service:hover,.hover-lift:hover{transform:none;box-shadow:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.desktop-shot img{transform:none!important}}

/* v1.7 — PAVLOVNA preview interaction + true mobile hero */
.mobile-hero-photo{display:none}

/* DJ vinyl: grooves + logo only, no white center label. */
.dj-logo-record{
  background:repeating-radial-gradient(circle at center,#090a0d 0 5px,#252a33 5px 5.8px,#0b0c0f 5.8px 10px);
}
.dj-logo-record:before,.dj-logo-record:after{display:none!important}
.dj-logo-record img{width:68%;height:68%;object-fit:contain;border-radius:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}

/* Restore the original v1.1 3D relationship between browser and phone. */
.mockup-stack{transform-style:preserve-3d}

/* A real miniature PAVLOVNA page: static page content up to the cinema block,
   then the original result video plays inside the mockup. */
.site-shot .pav-track{
  width:100%;
  transform:translateY(var(--preview-start,0px));
  transition:transform 4.8s cubic-bezier(.18,.75,.12,1);
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .site-shot .pav-track{
    transition-timing-function:cubic-bezier(.4,0,.2,1);
  }
}
.site-shot .pav-track>img,.site-shot .pav-before-video{
  display:block;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  transform:none!important;
}
.mockup-stack:hover .desktop-shot .pav-track,
.mockup-stack:hover .mobile-shot .pav-track,
.desktop-shot.auto-scroll .pav-track,
.mobile-shot.auto-scroll .pav-track,
.desktop-shot.touch-scroll .pav-track,
.mobile-shot.touch-scroll .pav-track{
  transform:translateY(var(--preview-end,var(--preview-start,0px)));
}
.pav-cinema-preview{position:relative;overflow:hidden;background:#171310;color:#fff;isolation:isolate}
.pav-cinema-preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.pav-cinema-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,14,12,.7) 0%,rgba(20,14,12,.30) 44%,rgba(20,14,12,.06) 76%),linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.18))}
.pav-cinema-copy{position:absolute;z-index:2;left:9%;bottom:11%;max-width:48%;font-family:Inter,Arial,sans-serif}
.pav-cinema-copy span{display:block;font-size:8px;font-weight:700;letter-spacing:.18em;margin-bottom:10px}
.pav-cinema-copy strong{display:block;font:400 clamp(25px,4.2vw,54px)/.94 Georgia,serif;letter-spacing:-.03em}
.pav-cinema-copy p{margin:10px 0 0;font-size:10px;line-height:1.45;color:rgba(255,255,255,.9)}
.desktop-cinema{aspect-ratio:1440/620}
.mobile-cinema{aspect-ratio:390/560;border-radius:22px 22px 0 0}
.mobile-cinema .pav-cinema-shade{background:linear-gradient(180deg,rgba(0,0,0,.04) 30%,rgba(17,12,10,.78) 100%)}
.mobile-cinema .pav-cinema-copy{left:8%;right:8%;bottom:8%;max-width:none}
.mobile-cinema .pav-cinema-copy span{font-size:5px;margin-bottom:6px}
.mobile-cinema .pav-cinema-copy strong{font-size:19px;line-height:.94;letter-spacing:-.035em;max-width:82%}
.mobile-cinema .pav-cinema-copy p{font-size:6px;line-height:1.35;margin-top:6px;max-width:84%}

@media(max-width:900px){
  .mockup-stack:hover .phone-shell{transform:none}
}

@media(max-width:600px){
  /* A separate mobile-first opening instead of shrinking the desktop orb composition. */
  .hero{display:block;min-height:auto;padding-top:112px;padding-bottom:74px;overflow:hidden}
  .hero-copy{width:100%}
  .hero-object{display:none!important}
  .scroll-hint{display:none}
  .mobile-hero-photo{display:block;position:relative;height:clamp(390px,61svh,540px);margin:30px 0 0;border-radius:28px;overflow:hidden;background:#111214;box-shadow:0 26px 64px rgba(0,0,0,.16);border:1px solid rgba(17,18,20,.08)}
  .mobile-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block;filter:saturate(.9) contrast(1.02)}
  .mobile-hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(8,9,12,.72));pointer-events:none}
  .mobile-hero-photo figcaption{position:absolute;left:18px;right:18px;bottom:17px;z-index:2;display:flex;align-items:end;justify-content:space-between;gap:18px;color:white}
  .mobile-hero-photo figcaption span{font-size:9px;letter-spacing:.15em}
  .mobile-hero-photo figcaption b{font:600 10px Manrope;letter-spacing:.1em;text-align:right}

  .project-showcase{gap:20px}
  .mockup-stack{padding:0 28px 42px 0}
  .phone-shell{right:-2px;width:104px;height:220px}
  .desktop-shot{height:292px}
  .pav-cinema-copy strong{font-size:25px}
}
/* Align the animation stop exactly with the live cinema block. */
.desktop-cinema{height:430px;aspect-ratio:auto}
.mobile-cinema{height:300px;aspect-ratio:auto}
@media(max-width:600px){
  .hero h1{font-size:clamp(52px,16vw,66px);line-height:.86}
  .desktop-cinema{height:292px}
  .mobile-cinema{height:220px}
}


/* v2.0 mobile fit + personal card refinements */
img,video{max-width:100%;height:auto}
main{max-width:100%;overflow-x:hidden}
@media(max-width:900px){.project,.mini-project,.personal-preview,.browser-shell,.site-shot,.desktop-shot,.mobile-shot{max-width:100%}.hero-actions .btn{flex:1 1 auto}.personal-preview-screen{height:240px}}
@media(max-width:600px){.nav-wrap{left:10px;right:10px;width:auto;transform:none}.mobile-nav-inner{padding:118px 20px 34px}.mobile-nav a{font-size:clamp(34px,11vw,54px);gap:12px}.hero-actions{display:grid;grid-template-columns:1fr 1fr}.hero-actions .btn{min-width:0;padding-inline:14px}.project h3{font-size:clamp(44px,14vw,70px)}.project-label{display:block;max-width:100%}.project-link{font-size:12px}.project-showcase,.project-row,.web-intro,.about-grid{gap:18px}.mockup-stack{padding:0 24px 36px 0}.browser-shell{border-radius:18px}.desktop-shot{height:270px}.phone-shell{right:0;width:96px;height:202px}.personal-card{min-height:auto;padding:24px}.personal-copy{padding-right:0}.personal-copy p{max-width:100%}.personal-preview{position:relative;right:auto;top:auto;width:100%;margin-top:22px}.personal-preview-screen{height:220px}.contact-links{gap:18px}.contact footer{padding-bottom:env(safe-area-inset-bottom)}}

/* v2.1 — seamless marquee, refined personal case, true mobile containment */
.ticker{
  left:0;right:0;width:auto;overflow:hidden;
  padding:11px 0;
  contain:paint;
}
.ticker .ticker-track{
  display:flex;
  flex-flow:row nowrap;
  align-items:center;
  width:max-content;
  min-width:max-content;
  transform:translate3d(0,0,0);
  animation:marquee 149.3s linear infinite;
  will-change:transform;
}
.ticker .ticker-set{
  display:flex;
  flex-flow:row nowrap;
  align-items:center;
  flex:0 0 auto;
  width:max-content;
  min-width:max-content;
  white-space:nowrap;
  font:600 11px/1 Manrope;
  letter-spacing:.18em;
  animation:none!important;
}
.ticker .ticker-set span,.ticker .ticker-set i{display:inline-block;flex:0 0 auto;white-space:nowrap}
.ticker .ticker-set i{font-style:normal;margin:0 18px;color:#4f545d}
.ticker .ticker-set span{color:#787d86}

/* Personal case: an actual miniature of this site's current hero. */
.project-row{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.personal-card{min-height:310px}
.personal-copy{padding-right:min(47%,430px)}
.personal-copy p{max-width:36ch;line-height:1.5}
.personal-preview{
  top:25px;right:25px;
  width:min(45%,430px);
  aspect-ratio:16/10;
  border-radius:20px;
  background:#f2f2ef;
  color:#111214;
  overflow:hidden;
  transform:none!important;
  border:1px solid rgba(17,18,20,.10);
  box-shadow:0 20px 45px rgba(0,0,0,.09);
}
.personal-card:hover .personal-preview{transform:translateY(-3px)!important;box-shadow:0 25px 50px rgba(0,0,0,.12)}
.mini-site-nav{
  height:15%;min-height:28px;padding:0 5%;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(17,18,20,.08);
  background:rgba(255,255,255,.56);
}
.mini-site-nav>b{font:800 clamp(9px,1vw,14px)/1 Manrope;letter-spacing:-.06em}
.mini-site-nav sup{color:#7f8792}
.mini-site-nav>div{display:flex;gap:10px;font:500 clamp(4px,.42vw,7px)/1 Inter;color:#4c5055}
.mini-site-hero{height:85%;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;padding:6% 5%;overflow:hidden}
.mini-site-copy{position:relative;z-index:2}
.mini-site-copy>small{font:600 clamp(3px,.32vw,5px)/1 Inter;letter-spacing:.16em}
.mini-site-copy>strong{display:block;margin:7% 0 5%;font:800 clamp(15px,2.1vw,32px)/.83 Manrope;letter-spacing:-.065em}
.mini-site-copy>strong em{font-style:normal;font-weight:400;color:#80848a}
.mini-site-copy>p{margin:0;font:500 clamp(4px,.46vw,7px)/1.3 Inter;color:#3e4146;white-space:nowrap}
.mini-site-buttons{display:flex;gap:4px;margin-top:7%}.mini-site-buttons i{display:block;width:27px;height:8px;border-radius:20px;background:#111}.mini-site-buttons i+ i{background:transparent;border:1px solid rgba(17,18,20,.16)}
.mini-site-art{position:relative;height:100%}
.mini-site-orb{position:absolute;right:3%;top:2%;width:62%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.14);z-index:2}
.mini-site-orb img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;filter:saturate(.82) contrast(1.04)}
.mini-site-bubble{position:absolute;left:5%;bottom:5%;width:42%;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,#f5f5f2,#a8afb7);opacity:.86}
.mini-site-chip{position:absolute;z-index:3;width:45%;padding:5% 6%;border-radius:9px;border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.62);box-shadow:0 8px 18px rgba(0,0,0,.08);font:800 clamp(5px,.65vw,10px)/1 Manrope}
.mini-site-chip small{display:block;margin-top:5px;font:500 clamp(2px,.28vw,4px)/1.1 Inter;color:#666;white-space:nowrap}
.chip-dj{left:-1%;top:4%}.chip-qa{right:-2%;top:49%}.chip-web{left:2%;bottom:1%}

/* Hard mobile containment: layouts resize rather than relying on clipping. */
@media(max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .section{width:100%;max-width:100%;padding-left:18px;padding-right:18px}
  .nav-wrap{left:10px;right:10px;width:auto;max-width:none;transform:none;padding:0 15px}
  .nav-wrap nav{display:none!important}.menu{display:block!important}.mobile-nav{display:block}
  .mobile-nav-inner{padding:112px 20px 30px}
  .mobile-nav a{font-size:clamp(34px,11vw,50px);padding:10px 0}

  .hero{display:block;padding-top:106px;padding-bottom:70px}
  .hero-copy,.about-copy,.dj-info,.web-intro,.project,.project-copy,.contact-inner{width:100%;max-width:100%}
  .hero h1{font-size:clamp(48px,15.5vw,64px);line-height:.87;overflow-wrap:anywhere}
  .hero-line{font-size:17px;line-height:1.4}
  .hero-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
  .hero-actions .btn{width:100%;min-width:0;padding:13px 10px}
  .mobile-hero-photo{margin-top:25px;height:min(63svh,520px);border-radius:24px}

  .about{min-height:auto}.about-grid{grid-template-columns:1fr;gap:40px;margin-top:48px}
  .about h2,.web h2{font-size:clamp(43px,12.5vw,58px)}
  .about-copy>p{font-size:16px;line-height:1.55}
  .facts>div{grid-template-columns:30px minmax(0,1fr);gap:0 10px}.facts small{grid-column:2}

  .dj{min-height:900px;padding-bottom:115px}
  .dj-head{margin-top:65px}.dj-head h2{font-size:clamp(68px,20vw,92px);white-space:nowrap}.dj-head p{font-size:17px;line-height:1.45}
  .dj-stage{grid-template-columns:1fr;gap:34px;margin-top:42px}
  .visual-panel{height:min(72vw,355px);border-radius:24px}
  .dj-logo-record{width:68px;height:68px;right:16px;top:16px}
  .trackline{grid-template-columns:76px minmax(0,1fr);padding:16px 0}.trackline b{font-size:14px}
  .dj-actions{gap:18px;flex-wrap:wrap;margin-top:26px}
  .ticker{bottom:18px}.ticker-track{animation-duration:149.3s}.ticker-set{font-size:9px}.ticker-set i{margin:0 13px}

  .web{padding-bottom:100px}.web-intro{grid-template-columns:1fr;gap:22px;margin-top:55px}.web-intro p{font-size:16px;line-height:1.5}
  .services{grid-template-columns:1fr;margin:58px 0 72px}.service{padding:19px 0 24px}.service h3{margin:24px 0 8px;font-size:21px}.service p{font-size:13px;line-height:1.45;max-width:100%}

  .project{padding:18px;border-radius:23px}
  .project-top{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  .project h3{font-size:clamp(43px,13.5vw,60px);line-height:.9;margin:14px 0 3px;max-width:100%}
  .project-link{white-space:normal;font-size:12px}
  .project-showcase{grid-template-columns:1fr;gap:18px}
  .mockup-stack{width:100%;max-width:100%;padding:0 20px 35px 0;margin-top:14px;transform:none!important}
  .browser-shell{width:100%;max-width:100%;border-radius:16px}.browser-top{height:34px;padding:0 10px;font-size:8px}.browser-top i{width:6px;height:6px}.browser-top span{min-width:0}
  .desktop-shot{height:clamp(220px,69vw,270px)}
  .phone-shell{right:0;bottom:0;width:92px;height:194px;border-width:5px;border-radius:21px;transform:none!important}
  .phone-speaker{top:5px;width:30px;height:8px}.mobile-shot{border-radius:16px}
  .project-copy{padding:16px 0 2px}.project-copy .lead{font-size:19px}.project-copy p{font-size:14px}
  .chips{gap:6px;margin-top:17px}.chips span{font-size:9px;padding:7px 9px}

  .project-row{grid-template-columns:1fr;gap:14px;margin-top:14px}
  .mini-project{width:100%;min-height:240px;padding:22px;border-radius:23px}
  .mini-project h3{font-size:25px}
  .personal-card{min-height:auto;padding-bottom:22px}
  .personal-copy{padding-right:0;margin-top:34px}.personal-copy p{max-width:100%;font-size:14px}
  .personal-tags{gap:6px;margin-top:15px}.personal-tags b{font-size:9px;padding:7px 9px}
  .personal-preview{position:relative;top:auto;right:auto;width:100%;aspect-ratio:16/10;margin-top:22px;border-radius:16px;transform:none!important}
  .personal-card:hover .personal-preview{transform:none!important}
  .mini-site-nav{min-height:25px}.mini-site-nav>div{gap:7px}.mini-site-copy>strong{font-size:clamp(18px,6.3vw,25px)}.mini-site-copy>p{font-size:5px}.mini-site-chip{border-radius:7px}

  .contact{min-height:650px;padding-bottom:max(42px,env(safe-area-inset-bottom))}.contact-inner{margin-top:70px}.contact .section-index{position:absolute;top:54px;left:18px;color:#6f747d}.contact h2{font-size:clamp(48px,14vw,64px);line-height:.98;overflow-wrap:anywhere}.contact p{font-size:17px}.contact-links{gap:16px;row-gap:13px;margin-top:38px;flex-wrap:wrap}.contact-links a,.contact-button{font-size:10px}
}

@media(max-width:390px){
  .section{padding-left:15px;padding-right:15px}.nav-wrap{left:8px;right:8px}
  .hero h1{font-size:15vw}.hero-actions{grid-template-columns:1fr}
  .mobile-hero-photo{height:56svh}
  .project{padding:15px}.project h3{font-size:12.5vw}.mockup-stack{padding-right:15px}.phone-shell{width:82px;height:174px}
}

@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}
@media(max-width:760px){
  .hero h1{font-size:clamp(44px,14.6vw,62px)}
  .dj-head h2{font-size:clamp(52px,18vw,78px);letter-spacing:-.07em}
}


/* v2.4 — stable contact index, clickable PAVLOVNA mockup, mobile phone fit */
.mockup-link{display:block;color:inherit;text-decoration:none;cursor:pointer}
.mockup-link:focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media(max-width:760px){
  .contact .section-index{top:54px;left:18px;margin:0}
  .contact-inner{margin-top:70px}
  .phone-shell,.mobile-shot{background:#171310}
  .mobile-shot .pav-track{width:calc(100% + 2px);margin-left:-1px}
  .mobile-shot .pav-track>img,.mobile-shot .pav-cinema-preview{width:100%!important;max-width:none}
}
@media(max-width:390px){.contact .section-index{left:15px}}


/* v2.7 — realistic PAVLOVNA mobile viewport + v1.1 marquee cadence */
.mobile-real-result{display:none}

@media(max-width:760px){
  /* Build this at the real 390px mobile viewport width and scale the entire page
     into the device frame. This preserves the real site's proportions instead of
     shrinking each text element independently. */
  .mobile-cinema{height:176.4px!important;background:#f7efec;color:#2b2422;border-radius:0;overflow:hidden}
  .mobile-cinema>.mobile-legacy-video,
  .mobile-cinema>.mobile-legacy-shade,
  .mobile-cinema>.mobile-legacy-copy{display:none!important}
  .mobile-real-result{
    display:block;position:absolute;left:50%;top:0;margin-left:-195px;
    width:390px;height:840px;
    transform:scale(.2102564103);
    transform-origin:top center;
    background:#f8f0ed;color:#292221;overflow:hidden;
  }
  .mobile-real-brand{
    height:94px;display:flex;align-items:center;padding:0 24px;
    font:500 26px/1.05 Georgia,serif;letter-spacing:.105em;
    border-bottom:1px solid rgba(94,70,65,.11);white-space:nowrap
  }
  .mobile-real-stats{
    height:112px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;padding:0 18px;gap:4px;background:#faf0ed
  }
  .mobile-real-stats div{text-align:center;min-width:0}
  .mobile-real-stats b{display:block;font:700 21px/1.05 Inter,Arial,sans-serif;letter-spacing:-.025em;white-space:nowrap}
  .mobile-real-stats span{display:block;margin-top:10px;font:500 10px/1 Inter,Arial,sans-serif;letter-spacing:.11em;color:#8a7470;white-space:nowrap}
  .mobile-real-card{
    position:relative;height:536px;margin:0 12px 20px;border-radius:29px;
    overflow:hidden;background:#1b1513
  }
  .mobile-real-video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:50% 50%!important;display:block!important}
  .mobile-real-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.015) 33%,rgba(14,9,8,.72) 100%)}
  .mobile-real-copy{position:absolute;left:26px;right:22px;bottom:31px;color:#fff}
  .mobile-real-copy span{display:block;font:700 10px/1 Inter,Arial,sans-serif;letter-spacing:.18em;margin-bottom:18px;white-space:nowrap}
  .mobile-real-copy strong{display:block;font:400 58px/.86 Georgia,serif;letter-spacing:-.045em;max-width:330px}
  .mobile-real-copy p{margin:19px 0 0;font:400 15px/1.28 Inter,Arial,sans-serif;max-width:330px;color:rgba(255,255,255,.94)}
}

@media(max-width:390px){
  .mobile-cinema{height:155.1px!important}
  .mobile-real-result{left:50%;top:0;margin-left:-195px;transform:scale(.1846153846);transform-origin:top center}
}

/* Keep the approved desktop composition intact, but prevent percentage-based
   hero elements from spreading apart on 4K / ultra-wide monitors. */
@media(min-width:2000px){
  .hero{max-width:1920px;margin-left:auto;margin-right:auto;padding-left:96px;padding-right:96px}
  .hero-object{width:760px;max-width:100%;justify-self:end}
}


/* v3.0 — phone mockup uses the real mobile PAVLOVNA capture. */
.pav-mobile-exact{display:block;width:100%!important;height:auto!important;max-width:none!important;margin:0!important}
@media(max-width:760px){.mobile-shot .pav-track{width:100%!important;margin:0!important}}


/* v3.1 — match the live PAVLOVNA mobile scroll state: slightly earlier stop + sticky brand */
.pav-mobile-sticky{display:none}
@media(max-width:760px){
  .pav-mobile-sticky{
    display:flex;position:absolute;left:0;right:0;top:0;height:25px;z-index:3;
    align-items:center;padding:0 7px;background:#f8f0ed;color:#292221;
    font:500 6px/1 Georgia,serif;letter-spacing:.105em;
    border-bottom:1px solid rgba(94,70,65,.10);
    opacity:0;transform:translateY(-2px);pointer-events:none;
    transition:opacity .28s ease,transform .28s ease;
  }
  .mobile-shot.auto-scroll .pav-mobile-sticky,
  .mobile-shot.touch-scroll .pav-mobile-sticky,
  .mockup-stack:hover .mobile-shot .pav-mobile-sticky{
    opacity:1;transform:none;transition-delay:2.35s;
  }
}


/* v3.3 — real mobile PAVLOVNA layout inside the phone mockup */
.pav-mobile-track{position:relative;width:100%;background:#f8f0ed}
.pav-mobile-scale{
  position:absolute;left:50%;top:0;width:390px;
  transform:translateX(-50%) scale(1);transform-origin:top center;
  background:#f8f0ed;color:#292221;
}
.pav-mobile-page{width:390px;background:#f8f0ed;color:#292221;padding-bottom:18px}
.pav-mobile-brand{
  height:76px;display:flex;align-items:center;padding:0 24px;
  border-bottom:1px solid rgba(94,70,65,.11);
  font:500 26px/1.05 Georgia,serif;letter-spacing:.105em;white-space:nowrap
}
.pav-mobile-copy{padding:34px 28px 0}
.pav-mobile-copy p{
  margin:0;color:#6b605e;
  font:400 26px/1.42 Inter,Arial,sans-serif;letter-spacing:-.025em
}
.pav-mobile-buttons{display:grid;gap:16px;max-width:338px;margin:34px auto 0}
.pav-mobile-btn{
  height:58px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;font:700 24px/1 Inter,Arial,sans-serif;letter-spacing:-.02em
}
.pav-mobile-btn.primary{background:#cb9b9a;color:#fff}
.pav-mobile-btn.secondary{background:#f8f0ed;color:#201917;border:1.5px solid rgba(197,174,171,.62)}
.pav-mobile-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;gap:8px;padding:36px 18px 0
}
.pav-mobile-stats div{text-align:center;min-width:0}
.pav-mobile-stats b{display:block;font:700 21px/1.05 Inter,Arial,sans-serif;letter-spacing:-.025em;white-space:nowrap}
.pav-mobile-stats span{display:block;margin-top:10px;font:500 10px/1 Inter,Arial,sans-serif;letter-spacing:.11em;color:#8a7470;white-space:nowrap}
.pav-mobile-card{
  position:relative;height:536px;margin:26px 12px 0;border-radius:29px;
  overflow:hidden;background:#1b1513
}
.pav-mobile-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.pav-mobile-card-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 34%,rgba(14,9,8,.72) 100%)}
.pav-mobile-card-copy{position:absolute;left:26px;right:22px;bottom:31px;color:#fff}
.pav-mobile-card-copy span{display:block;font:700 10px/1 Inter,Arial,sans-serif;letter-spacing:.18em;margin-bottom:18px;white-space:nowrap}
.pav-mobile-card-copy strong{display:block;font:400 58px/.86 Georgia,serif;letter-spacing:-.045em;max-width:330px}
.pav-mobile-card-copy p{margin:19px 0 0;font:400 15px/1.28 Inter,Arial,sans-serif;max-width:330px;color:rgba(255,255,255,.94)}


/* v3.4.2 — phone starts from the REAL animated PAVLOVNA mobile hero. */
.pav-mobile-real-page{padding:0;background:#f8f0ed}
.pav-mobile-hero{position:relative;width:390px;height:844px;overflow:hidden;background:#171310;color:#fff}
.pav-mobile-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.pav-mobile-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.10) 34%,rgba(0,0,0,.76))}
.pav-mobile-hero-copy{position:absolute;z-index:2;left:24px;right:24px;bottom:68px;text-align:center;color:#fff}
.pav-mobile-hero-copy>span{display:block;font:700 10px/1 Inter,Arial,sans-serif;letter-spacing:.20em}
.pav-mobile-hero-copy>strong{display:block;margin:18px 0 22px;font:400 70px/.88 Georgia,'Times New Roman',serif;letter-spacing:-.035em}
.pav-mobile-hero-copy>p{max-width:342px;margin:0 auto 28px;font:400 16px/1.55 Inter,Arial,sans-serif;color:rgba(255,255,255,.90)}
.pav-mobile-hero-btn{width:286px;min-height:54px;margin:0 auto;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:15px 20px;background:#cb9b9a;color:#fff;font:750 14px/1 Inter,Arial,sans-serif}

.pav-mobile-bridge{position:relative;z-index:2;margin-top:-34px;padding:56px 24px 32px;background:#f8f0ed;border-radius:52px 52px 0 0;box-shadow:0 -14px 38px rgba(43,30,26,.10);color:#292221;overflow:hidden}
.pav-mobile-eyebrow{display:block;margin-bottom:14px;color:#a36f6d;font:700 10px/1 Inter,Arial,sans-serif;letter-spacing:.18em}
.pav-mobile-bridge h4{margin:0 0 20px;font:400 54px/1.02 Georgia,'Times New Roman',serif;letter-spacing:-.025em;color:#292221}
.pav-mobile-bridge>p{margin:0;color:#6b605e;font:400 17px/1.58 Inter,Arial,sans-serif;letter-spacing:-.015em}
.pav-mobile-bridge .pav-mobile-buttons{max-width:none;margin-top:26px;gap:12px}
.pav-mobile-bridge .pav-mobile-btn{height:54px;font-size:15px}
.pav-mobile-bridge .pav-mobile-stats{padding:32px 0 0;gap:8px}
.pav-mobile-bridge .pav-mobile-stats b{font-size:18px}
.pav-mobile-bridge .pav-mobile-stats span{margin-top:5px;font-size:9px}
.pav-mobile-real-page>.pav-mobile-card{height:536px;margin:0 12px 20px;border-radius:30px}


/* v3.4.5 — exact real mobile hero + stable scaled preview geometry. */
.pav-mobile-hero-real{
  width:390px;
  background:#f8f0ed;
  overflow:hidden;
  padding:0;
}
.pav-mobile-hero-real img{
  display:block;
  width:390px!important;
  height:auto!important;
  max-width:none!important;
  margin:0!important;
}
.pav-mobile-real-page>.pav-mobile-bridge{margin-top:0;border-radius:0;box-shadow:none;padding-top:10px}

/* v3.4.11.3 — phone top cleanup + identical hover/auto preview scroll.
   Keep a clean safe gap under the speaker, remove the dark overlay,
   and prevent the legacy image rule from scrolling the nested mobile capture twice. */
.mobile-shot{
  padding-top:18px;
  background:#151619;
}
.mobile-shot:before{
  display:none!important;
  content:none!important;
}
.mobile-shot .pav-mobile-scale img,
.mobile-shot.auto-scroll .pav-mobile-scale img,
.mobile-shot.touch-scroll .pav-mobile-scale img,
.mockup-stack:hover .mobile-shot .pav-mobile-scale img{
  transform:none!important;
  transition:none!important;
}

/* v3.4.11.4 — remove the artificial inner top band.
   The real PAVLOVNA capture already contains its own safe top spacing,
   so keep it flush with the phone viewport and let only the physical speaker sit above it. */
.mobile-shot{
  padding-top:0!important;
}


/* Phone-only live hero video. Desktop/browser widget intentionally remains byte-for-byte v3.4.11.4. */
.pav-mobile-hero-live{
  width:390px;
  height:844px;
  padding:0;
  margin:0;
  overflow:hidden;
  background:#171310;
  box-shadow:none!important;
}
.pav-mobile-hero-live video{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover;
  object-position:center;
  display:block;
  margin:0!important;
  transform:none!important;
}
.mobile-shot,.mobile-shot .pav-track,.mobile-shot .pav-mobile-scale,.pav-mobile-real-page{
  box-shadow:none!important;
}
.mobile-shot:before{display:none!important;content:none!important;background:none!important;box-shadow:none!important}
.pav-mobile-real-page>.pav-mobile-bridge{margin-top:-34px;border-radius:52px 52px 0 0;box-shadow:none!important;padding-top:56px}

/* Mobile: technology chips are display-only. Prevent taps/long-presses from
   triggering browser text selection (including selecting nearby copy). */
@media (hover:none), (pointer:coarse){
  .chips,.chips span,.personal-tags,.personal-tags b{
    -webkit-user-select:none!important;
    user-select:none!important;
    -webkit-touch-callout:none!important;
  }
  .chips span,.personal-tags b{
    cursor:default!important;
    touch-action:none!important;
  }
  .chips span:hover,
  .chips span:active,
  .personal-tags b:hover,
  .personal-tags b:active{
    background:transparent!important;
    transform:none!important;
  }
}

/* v3.4.12.16 — make the ANTON / PERSONAL project card open this site. */
.personal-card-link{color:inherit;text-decoration:none;cursor:pointer}
.personal-card-link:focus-visible{outline:2px solid currentColor;outline-offset:5px}

/* v3.4.12.18 — keep DJ external text links above decorative layers and fully tappable. */
#dj .dj-actions{position:relative;z-index:12}
#dj .dj-actions .text-link{position:relative;z-index:13;pointer-events:auto;touch-action:manipulation}


/* v3.4.12.20 — stabilize the thin outline inside the scaled phone preview.
   At desktop size the phone is ~0.34× of the 390px source layout, so the old
   1.5px border became ~0.5px and shimmered while the whole page translated.
   Render a ~3px inset stroke at source resolution so it lands close to one
   physical CSS pixel in the desktop mockup, without changing button geometry. */
.pav-mobile-btn.secondary{
  border:0!important;
  box-shadow:inset 0 0 0 3px rgba(197,174,171,.62);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.pav-mobile-scale,
.pav-mobile-page{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}


/* Hero font fallback: no serif flash while Google Fonts are unavailable. */
.hero-object .glass-card{font-family:Manrope,Arial,sans-serif}
.hero-object .glass-card small{font-family:Inter,Arial,sans-serif}