@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{--bg:#0a0a0a;--panel:#121212;--text:#f3f1eb;--muted:#a4a19a;--line:#292929;--accent:#d9ff45;--nav-bg:rgba(10,10,10,.86);--card-bg:#161616;--overlay-bg:rgba(0,0,0,.55)}

/* Light theme */
[data-theme="light"]{--bg:#f5f4f1;--panel:#ffffff;--text:#1a1a1a;--muted:#5c5955;--line:#e0ddd8;--accent:#4a7a00;--nav-bg:rgba(245,244,241,.9);--card-bg:#f0efec;--overlay-bg:rgba(0,0,0,.45)}

/* Theme transition */
body,body *{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}
/* Exclude video and animations from transition */
body video,body .marquee div,body .waveform span,.hero-video__player{transition:none!important}

/* Theme toggle button */
.theme-toggle{background:none;border:1px solid var(--line);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:color .3s,border-color .3s,background .3s;flex-shrink:0}
.theme-toggle:hover{color:var(--text);border-color:var(--accent);background:rgba(217,255,69,.06)}
[data-theme="light"] .theme-toggle:hover{background:rgba(74,122,0,.06)}
.theme-icon{display:none}
[data-theme="dark"] .theme-icon--sun{display:block}
[data-theme="light"] .theme-icon--moon{display:block}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif}a{color:inherit;text-decoration:none}.nav{height:76px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--nav-bg);backdrop-filter:blur(14px);z-index:10}.brand{display:flex;align-items:baseline;gap:0;font-size:15px;letter-spacing:-.02em;line-height:1}.brand-first{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px}.brand-dot{color:var(--accent);font-weight:800;font-size:18px;line-height:0;margin:0 1px}.brand-last{font-weight:400;font-size:13px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}nav{display:flex;gap:30px;font-size:13px;color:var(--muted)}nav a:hover{color:var(--text)}.nav-cta{font-size:13px;border:1px solid var(--line);padding:10px 16px;border-radius:999px}/* --- Hero Section --- */
.hero{display:flex;flex-direction:column;overflow:hidden}

/* Full-width cinematic video — no max-height, natural aspect ratio preserved */
.hero-video{width:100%;background:#000;line-height:0;overflow:hidden;transition:height .6s ease,opacity .5s ease}
.hero-video__player{display:block;width:100%;height:auto;object-fit:contain}

/* After hero video ends — fade out and collapse so no black frame shows */
.hero-video--ended{height:0!important;opacity:0;pointer-events:none}

/* Editorial divider — premium transition from video to content */
.hero-divider{height:1px;background:linear-gradient(90deg,transparent 0%,var(--line) 20%,var(--accent) 50%,var(--line) 80%,transparent 100%);opacity:.6}

/* Two-column content below video */
.hero-content{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(48px,6vw,100px);align-items:center;padding:clamp(72px,8vw,140px) 5vw clamp(80px,9vw,150px)}

/* Left column — text */
.hero-content__left{max-width:660px}

/* Right column — presenter */
.hero-content__right{display:flex;align-items:center;justify-content:center}
.hero-presenter{position:relative;width:100%;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--panel);box-shadow:0 24px 64px rgba(0,0,0,.4);transition:box-shadow .5s cubic-bezier(.22,1,.36,1),border-color .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.hero-presenter video{display:block;width:100%;height:auto}
.hero-presenter__label{position:absolute;bottom:14px;left:14px;font:500 10px/1 DM Mono,monospace;letter-spacing:.1em;color:var(--muted);background:rgba(10,10,10,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);padding:7px 11px;border-radius:6px;text-transform:uppercase;transition:border-color .3s,color .3s}

/* Hover interaction on presenter card */
.hero-presenter:hover{transform:translateY(-4px);box-shadow:0 32px 80px rgba(0,0,0,.5),0 0 0 1px var(--accent);border-color:var(--accent)}
.hero-presenter:hover .hero-presenter__label{border-color:var(--accent);color:var(--accent)}

.eyebrow{font:500 11px/1 DM Mono,monospace;letter-spacing:.13em;color:var(--muted);margin:0 0 20px}
.hero h1{font-size:clamp(48px,7vw,104px);line-height:.95;letter-spacing:-.075em;max-width:950px;margin:0}.hero h1 em,.strategy h2 em,.statement em,.about h2 em,.contact h2 em{font-style:normal;color:var(--accent)}.hero-text{max-width:600px;color:var(--muted);font-size:17px;line-height:1.7;margin:30px 0}.actions{display:flex;gap:12px}.button{padding:14px 20px;border-radius:999px;font-size:13px;font-weight:700}.primary{background:var(--accent);color:#090909}.primary span{margin-left:14px}.ghost{border:1px solid var(--line)}.marquee{overflow:hidden;border-block:1px solid var(--line);white-space:nowrap;padding:17px 0;color:var(--muted);font:12px DM Mono}.marquee div{display:inline-block;animation:scroll 22s linear infinite}.marquee i{font-style:normal;color:var(--accent);margin:0 24px}@keyframes scroll{to{transform:translateX(-30%)}}.section{padding:120px 5vw}.section-head{display:flex;justify-content:space-between;gap:40px;margin-bottom:60px}.section h2{font-size:clamp(40px,5vw,72px);line-height:.95;letter-spacing:-.06em;margin:0}.section-note{max-width:330px;color:var(--muted);line-height:1.7}/* --- Premium Project Cards --- */
.work-section{padding-top:140px;padding-bottom:140px}

/* Group labels between card groups */
.work-group-label{font:500 11px/1 DM Mono,monospace;letter-spacing:.15em;color:var(--muted);text-transform:uppercase;margin:0 0 32px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.work-group-label:not(:first-of-type){margin-top:80px}

.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}

/* Featured grid — single column for the large hero card */
.work-grid--featured{grid-template-columns:1fr}

.project-card{border-radius:16px;overflow:hidden;background:var(--panel);border:1px solid var(--line);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1),border-color .35s}
.project-card:hover{transform:translateY(-8px);box-shadow:0 32px 64px rgba(0,0,0,.45),0 0 0 1px var(--accent);border-color:var(--accent)}

.project-card-link{display:block;text-decoration:none;color:inherit}

/* Preview area */
.project-card-preview{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--card-bg)}
.project-card-preview video,.project-card-preview img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.22,1,.36,1),filter .5s}
.project-card:hover .project-card-preview video,.project-card:hover .project-card-preview img{transform:scale(1.04);filter:brightness(1.08)}

/* Portrait reels — taller frame, centered 9:16 without cropping */
.project-card--portrait .project-card-preview{aspect-ratio:9/12}
.project-card--portrait .project-card-preview video{object-fit:contain}

/* Thumbnails — preserve natural aspect ratio */
.project-card--thumbnail .project-card-preview{aspect-ratio:16/10}
.project-card--thumbnail .project-card-preview img{object-fit:contain}

/* AI avatar — preserve original aspect ratio */
.project-card--avatar .project-card-preview{aspect-ratio:16/10}
.project-card--avatar .project-card-preview video{object-fit:contain}

/* Placeholder (shown until real assets are added) */
.project-card-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(ellipse at 50% 40%,#2a2a2a 0%,#111 65%);transition:background .4s}
.project-card:hover .project-card-placeholder{background:radial-gradient(ellipse at 50% 40%,#3a3a3a 0%,#161616 65%)}
.placeholder-icon{font-size:36px;color:var(--muted);opacity:.5;transition:opacity .3s,transform .3s}
.project-card:hover .placeholder-icon{opacity:.85;transform:scale(1.12)}
.placeholder-label{font:10px DM Mono;color:var(--muted);letter-spacing:.12em;opacity:.6}

/* Tag overlay */
.project-card-tag{position:absolute;top:16px;left:16px;font:10px/1 DM Mono;color:var(--muted);letter-spacing:.08em;background:rgba(10,10,10,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);padding:8px 12px;border-radius:6px;transition:border-color .3s,color .3s}
.project-card:hover .project-card-tag{border-color:var(--accent);color:var(--accent)}

/* Info area */
.project-card-info{padding:28px 28px 30px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.project-card-text{flex:1;min-width:0}

.project-card-category{font:500 11px/1 DM Mono,monospace;color:var(--muted);letter-spacing:.1em;margin:0 0 10px;text-transform:uppercase}
.project-card-title{font-size:22px;font-weight:700;letter-spacing:-.03em;margin:0 0 10px;transition:color .3s}
.project-card:hover .project-card-title{color:var(--accent)}
.project-card-desc{font-size:14px;line-height:1.65;color:var(--muted);margin:0;max-width:440px}

.project-card-arrow{width:42px;height:42px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--muted);transition:background .3s,color .3s,border-color .3s,transform .3s}
.project-card:hover .project-card-arrow{background:var(--accent);color:#090909;border-color:var(--accent);transform:rotate(-0deg) scale(1.08)}

/* Replace note */
.replace-note{color:#555;font:11px/1.6 DM Mono;margin-top:32px}
.replace-note code{background:#1a1a1a;padding:2px 6px;border-radius:4px;color:var(--muted)}.strategy{display:grid;grid-template-columns:.8fr 1.2fr;gap:10vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.strategy-intro>p:last-child{color:var(--muted);line-height:1.7;max-width:360px;margin-top:28px}.process{display:grid;grid-template-columns:1fr 1fr;gap:0;border-left:1px solid var(--line)}.process div{padding:30px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}.process div:nth-last-child(-n+2){border-bottom:0}.process span{font:11px DM Mono;color:var(--accent)}.process h3{font-size:20px;margin:22px 0 8px}.process p{color:var(--muted);font-size:13px;line-height:1.6;margin:0}.statement{padding:150px 5vw;text-align:center;border-bottom:1px solid var(--line)}.statement p{font:11px DM Mono;color:var(--muted);letter-spacing:.08em}.statement h2{font-size:clamp(38px,5.5vw,76px);line-height:.98;letter-spacing:-.06em;margin:30px auto 0;max-width:1000px}.about{display:grid;grid-template-columns:.7fr 1.3fr;gap:10vw}.about h2{font-size:clamp(50px,7vw,100px);line-height:.85;letter-spacing:-.07em;margin:0}.about-copy{max-width:650px}.about-copy p{font-size:20px;line-height:1.6;color:#c3c0b9;margin:0 0 20px}.skills{display:flex;flex-wrap:wrap;gap:8px;margin-top:35px}.skills span{border:1px solid var(--line);padding:9px 12px;border-radius:999px;color:var(--muted);font:11px DM Mono}.contact{border-top:1px solid var(--line);padding-bottom:90px}.contact h2{font-size:clamp(50px,7vw,100px);line-height:.9;letter-spacing:-.07em;margin:0 0 60px}.contact-row{display:flex;flex-wrap:wrap;gap:30px;align-items:center;color:var(--muted);font:12px DM Mono}.email{font:600 16px Manrope;color:var(--text);border-bottom:1px solid var(--accent);padding-bottom:5px}footer{border-top:1px solid var(--line);padding:22px 5vw;display:flex;justify-content:space-between;color:#666;font:10px DM Mono}

/* Light theme specific overrides */
[data-theme="light"] .nav{box-shadow:0 1px 3px rgba(0,0,0,.06)}
[data-theme="light"] .project-card{background:var(--panel);box-shadow:0 2px 12px rgba(0,0,0,.06)}
[data-theme="light"] .project-card:hover{box-shadow:0 16px 48px rgba(0,0,0,.1),0 0 0 1px var(--accent)}
[data-theme="light"] .primary{background:var(--accent);color:#fff}
[data-theme="light"] .ghost{border-color:var(--line);color:var(--text)}
[data-theme="light"] .about-copy p{color:var(--muted)}
[data-theme="light"] .replace-note code{background:var(--card-bg);color:var(--muted)}
[data-theme="light"] footer{color:var(--muted)}
[data-theme="light"] .project-card-tag{background:rgba(255,255,255,.85);border-color:var(--line)}
[data-theme="light"] .hero-presenter{box-shadow:0 16px 48px rgba(0,0,0,.08)}
[data-theme="light"] .hero-presenter:hover{box-shadow:0 24px 64px rgba(0,0,0,.12),0 0 0 1px var(--accent)}
[data-theme="light"] .hero-presenter__label{background:rgba(255,255,255,.85);border-color:var(--line);color:var(--muted)}
[data-theme="light"] .hero-card{background:var(--panel);border-color:var(--line)}


@media(max-width:800px){nav{display:none}.nav-cta{display:none}.hero-content{grid-template-columns:1fr;gap:40px;padding:48px 5vw 56px}.hero-content__right{order:2}.section{padding:80px 5vw}.work-section{padding-top:100px;padding-bottom:100px}.section-head,.strategy,.about{display:block}.section-note{margin-top:25px}.work-grid{grid-template-columns:1fr;gap:28px}.work-grid--featured{grid-template-columns:1fr}.work-group-label:not(:first-of-type){margin-top:56px}.project-card-preview{aspect-ratio:16/9}.project-card--portrait .project-card-preview{aspect-ratio:9/12}.project-card-info{padding:22px 22px 24px}.project-card-title{font-size:19px}.project-card-desc{font-size:13px}.process{margin-top:50px}.process div{padding:22px}.statement{padding:90px 5vw}.contact-row{flex-direction:column;align-items:flex-start}footer{gap:15px;flex-direction:column}.theme-toggle{width:34px;height:34px}}