/* ===== Jayden Portfolio ===== */
:root{
	--bg:#050506; --card:rgba(20,18,18,.94); --glass:rgba(22,21,21,.78); --line:rgba(255,255,255,.08);
	--txt:#fff; --mut:#b9b6b4; --dim:#7c7977; --orange:#ff5a1f; --orange2:#ff8a2a;
	--f:'Rajdhani',system-ui,sans-serif; --script:'Mrs Saint Delafield',cursive;
	--cardw:333px; --cardx:48px; --gap:80px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--f);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0}

/* ---- Wave background ---- */
#jd-wave,.jd-wave-fallback,.jd-wave-shade{position:fixed;inset:0;width:100%;height:100%;z-index:-3}
.jd-wave-fallback{z-index:-4;background:
	radial-gradient(1200px 600px at 70% 30%,#2a2724 0,transparent 60%),
	radial-gradient(900px 500px at 20% 80%,#1a1816 0,transparent 60%),#050506}
.jd-wave-shade{z-index:-2;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,0) 40%,rgba(0,0,0,.25))}

/* ---- Left card (completely fixed) ---- */
.jd-card{position:fixed;left:var(--cardx);top:0;bottom:0;width:var(--cardw);z-index:20;background:var(--card);border-radius:32px 32px 0 0;border:1px solid var(--line);border-bottom:0;
	padding:34px 24px 26px;display:flex;flex-direction:column;align-items:center;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.45);backdrop-filter:blur(10px)}
.jd-card-top{display:flex;align-items:center;gap:14px;width:100%}
.jd-logo svg,.jd-logo img{width:32px;height:32px;display:block}
.jd-avail{flex:1;height:44px;border:1px solid rgba(255,255,255,.14);border-radius:30px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--mut);font-size:17px;white-space:nowrap}
.jd-avail i{width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px var(--orange);animation:jdpulse 2s infinite}
.jd-avail b{color:#fff;font-weight:600}
@keyframes jdpulse{50%{opacity:.35}}
.jd-photo{position:relative;width:220px;height:220px;margin:32px 0 0;border-radius:24px;flex:none}
.jd-photo img,.jd-photo-ph{width:100%;height:100%;object-fit:cover;border-radius:24px}
.jd-photo-ph{background:radial-gradient(circle at 35% 40%,#ff3b0a 0,#ff6a1a 45%,#ffa13a 100%)}
.jd-sign{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%) rotate(-4deg);font-family:var(--script);font-size:64px;line-height:1;color:#fff;white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.jd-mail{margin-top:62px;font-size:23px;white-space:nowrap;font-weight:500;letter-spacing:.3px;color:#fff;text-align:center}
.jd-loc{color:var(--dim);font-size:15px;margin-top:4px}
.jd-social{display:flex;gap:8px;margin-top:26px}
.jd-social a{width:40px;height:40px;border-radius:50%;background:#2b2928;display:grid;place-items:center;transition:.25s}
.jd-social a:hover{background:var(--orange);transform:translateY(-3px)}
.jd-social svg{width:18px;height:18px}
.jd-cta{margin-top:auto;width:100%;height:56px;border:1px solid rgba(255,255,255,.2);border-radius:40px;display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 24px;font-size:19px;font-family:var(--f);color:#fff;background:transparent;cursor:pointer;transition:.3s}
.jd-cta b{width:48px;height:48px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;transition:.3s}
.jd-cta b svg{width:20px;height:20px}
.jd-cta:hover{border-color:var(--orange)}
.jd-cta:hover b{background:var(--orange);color:#fff;transform:rotate(45deg)}

/* ---- Right floating menu ---- */
.jd-menu{position:fixed;right:42px;top:50px;z-index:30;display:flex;flex-direction:column;align-items:center;gap:14px}
.jd-menu-toggle{width:50px;height:50px;border-radius:50%;border:0;background:#fff;color:#111;display:grid;place-items:center;cursor:pointer;transition:.3s}
.jd-menu-toggle svg{width:22px;height:22px}
.jd-menu-toggle:hover{background:var(--orange);color:#fff}
.jd-pill{position:relative;width:54px;padding:5px;border-radius:30px;background:rgba(32,30,30,.92);border:1px solid var(--line);display:flex;flex-direction:column;gap:2px;backdrop-filter:blur(10px);transition:.35s}
.jd-pill li{position:relative;z-index:2}
.jd-pill a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;transition:color .3s;position:relative}
.jd-pill a svg{width:21px;height:21px}
.jd-pill a.is-active{color:#111}
.jd-pill-active{position:absolute;left:5px;width:44px;height:44px;border-radius:50%;background:#fff;top:5px;z-index:1;transition:transform .45s cubic-bezier(.65,0,.25,1)}
.jd-pill a::after{content:attr(data-label);position:absolute;right:58px;top:50%;transform:translate(8px,-50%);background:#fff;color:#111;padding:3px 12px;border-radius:20px;font-size:14px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:.25s}
.jd-pill a:hover::after{opacity:1;transform:translate(0,-50%)}
.jd-menu.is-closed .jd-pill{opacity:0;transform:translateY(-12px) scale(.9);pointer-events:none}

/* ---- Right scrolling column ---- */
.jd-main{margin-left:calc(var(--cardx) + var(--cardw) + var(--gap));margin-right:140px;max-width:1000px;padding:0 0 60px;position:relative;z-index:5}
.jd-sec{padding:70px 0 20px;scroll-margin-top:30px}
.jd-hero{min-height:100vh;padding:0;display:flex;flex-direction:column}
.jd-clock{padding-top:96px;font-size:18px;font-weight:500;color:#fff}
.jd-hero-body{margin-top:clamp(60px,12vh,120px)}
.jd-label{display:flex;align-items:center;gap:10px;color:#cfcbc8;font-size:18px;margin-bottom:26px}
.jd-label i{width:7px;height:7px;border-radius:50%;background:#8a8785}
.jd-title{font-size:clamp(40px,4.6vw,62px);line-height:1.06;font-weight:500;letter-spacing:-.5px;max-width:660px}
.jd-lead{margin-top:34px;color:#c8c5c3;font-size:17px;line-height:1.55;max-width:620px}
.jd-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding:60px 0 40px}
.jd-tags li{background:rgba(24,23,23,.9);border:1px solid var(--line);border-radius:30px;padding:9px 24px;font-size:17px;color:#fff}

/* section header pill (marquee) */
.jd-head{position:relative;overflow:hidden;border-radius:30px;background:rgba(22,21,21,.92);border:1px solid var(--line);height:150px;display:flex;align-items:center;margin-bottom:22px;backdrop-filter:blur(8px)}
.jd-head-track{display:flex;align-items:center;gap:44px;white-space:nowrap;animation:jdmq 28s linear infinite;padding-left:44px}
.jd-mq-text{font-size:clamp(54px,7vw,92px);font-weight:500;line-height:1}
.jd-dot{flex:none;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb36a,#ff4d12 70%);box-shadow:0 0 22px rgba(255,90,31,.45)}
@keyframes jdmq{to{transform:translateX(-50%)}}

/* work */
.jd-work{display:grid;gap:22px}
.jd-proj{position:relative;display:block;border-radius:32px;overflow:hidden;background:var(--glass);border:1px solid var(--line);aspect-ratio:16/10}
.jd-proj img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.jd-proj:hover img{transform:scale(1.05)}
.jd-proj-ph{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#2a2a2c,#111)}
.jd-ph-1{background:linear-gradient(135deg,#3a2a24,#120d0b)}.jd-ph-2{background:linear-gradient(135deg,#242a30,#0c0f12)}
.jd-laptop{width:64%;height:70%;border:10px solid #0a0a0a;border-bottom-width:14px;border-radius:18px;background:linear-gradient(135deg,#ff3d6e,#ff9a3d 40%,#6a7bff);margin-top:18%;box-shadow:0 0 0 2px #333}
.jd-proj-meta{position:absolute;left:22px;bottom:20px;right:22px;display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(10,10,10,.72);backdrop-filter:blur(10px);border-radius:40px;padding:10px 22px}
.jd-proj-meta b{font-size:19px;font-weight:600}.jd-proj-meta em{font-style:normal;color:var(--mut);font-size:15px}

/* boxes */
.jd-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.jd-box{background:var(--glass);border:1px solid var(--line);border-radius:28px;padding:32px;backdrop-filter:blur(10px)}
.jd-box h3{font-size:26px;font-weight:600;margin-bottom:10px}
.jd-box p{color:var(--mut)}
.jd-num{display:inline-block;color:var(--orange);font-weight:600;margin-bottom:18px}
.jd-list{display:grid;gap:14px}
.jd-row{display:flex;gap:30px;align-items:center;background:var(--glass);border:1px solid var(--line);border-radius:26px;padding:24px 30px;backdrop-filter:blur(10px)}
.jd-years{min-width:150px;color:var(--orange);font-weight:600}
.jd-row h3{font-size:24px;font-weight:600}.jd-row p{color:var(--mut)}
.jd-quote p{color:#e6e3e1;font-size:19px;line-height:1.5}
.jd-quote footer{margin-top:20px;display:flex;flex-direction:column}
.jd-quote footer span{color:var(--dim);font-size:15px}

/* clients */
.jd-note{color:var(--mut);margin:0 0 16px 6px}
.jd-logos{overflow:hidden;border-radius:30px;background:var(--glass);border:1px solid var(--line);padding:26px 0;backdrop-filter:blur(10px);
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.jd-logos-track{display:flex;gap:20px;width:max-content;animation:jdmq 34s linear infinite;padding-left:20px}
.jd-logos:hover .jd-logos-track{animation-play-state:paused}
.jd-logo-tile{flex:none;width:230px;height:120px;border-radius:20px;background:#fff;display:grid;place-items:center;padding:14px}
.jd-logo-tile img{max-height:92px;width:auto;object-fit:contain}
.jd-logo-tile span{color:#1a1a1a;font-weight:700;font-size:20px;text-align:center;line-height:1.1}

/* contact */
.jd-contact{display:grid;grid-template-columns:1fr 1.3fr;gap:18px}
.jd-contact a{color:#fff;font-size:22px}
.jd-form{display:grid;gap:12px}
.jd-form input,.jd-form textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:18px;padding:14px 18px;color:#fff;font:inherit;outline:0}
.jd-form input:focus,.jd-form textarea:focus{border-color:var(--orange)}
.jd-form .jd-cta{margin-top:6px}
.jd-hp{position:absolute!important;left:-9999px}
.jd-flash{color:var(--orange2)!important}
.jd-copy{text-align:center;color:var(--dim);font-size:15px;padding:50px 0 10px}

/* inner pages / elementor */
.jd-page{padding-top:96px}
.jd-page-title{font-size:clamp(34px,4vw,56px);font-weight:500;margin-bottom:18px}
.jd-content{color:#d7d4d2}.jd-content a{color:var(--orange2)}
.jd-elementor{padding-top:40px}

/* ---- Responsive ---- */
@media (max-width:1280px){:root{--gap:50px}.jd-main{margin-right:110px}.jd-menu{right:24px}}
@media (max-width:1024px){
	body{padding-top:0}
	.jd-card{position:relative;left:auto;top:auto;bottom:auto;width:auto;margin:16px 16px 0;border-radius:28px;min-height:0;padding-bottom:22px}
	.jd-cta{margin-top:26px}
	.jd-main{margin:0 16px;padding-bottom:110px;max-width:none}
	.jd-hero{min-height:auto;padding-bottom:20px}
	.jd-clock{padding-top:40px}
	.jd-menu{right:auto;left:50%;transform:translateX(-50%);top:auto;bottom:14px;flex-direction:row}
	.jd-menu-toggle{display:none}
	.jd-pill{width:auto;flex-direction:row;padding:5px;border-radius:40px;max-width:calc(100vw - 20px);overflow-x:auto}
	.jd-pill a{width:40px;height:40px}
	.jd-pill-active{width:40px;height:40px;top:5px}
	.jd-pill a::after{display:none}
	.jd-grid2,.jd-contact{grid-template-columns:1fr}
}
@media (max-width:600px){
	.jd-row{flex-direction:column;align-items:flex-start;gap:6px}
	.jd-head{height:110px}.jd-box{padding:24px}
	.jd-sign{font-size:54px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;scroll-behavior:auto!important}}

/* ---- Content additions (layout unchanged) ---- */
.jd-mark{width:auto;height:30px;max-width:44px;object-fit:contain}
.jd-photo{background:radial-gradient(circle at 35% 40%,#ff3b0a 0,#ff6a1a 45%,#ffa13a 100%);overflow:visible}
.jd-photo img{mix-blend-mode:multiply;border-radius:24px}
.jd-foot-logo{width:170px;margin:46px auto 0;opacity:.85}
.jd-foot-logo + .jd-copy{padding-top:14px}
.jd-proj img{object-position:center top}
.jd-logo-tile img{width:auto;max-width:100%;max-height:92px}