:root { --blue:#315cff; --black:#07090f; --ink:#101421; --paper:#f7f8fc; --muted:#65708a; --font:Helvetica,Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--black); }
body { margin:0; background:var(--black); color:var(--paper); font-family:var(--font); letter-spacing:-.025em; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.hero { position:relative; min-height:100svh; overflow:hidden; background:var(--blue); }
.hero::before { content:''; position:absolute; inset:auto -9vw -26vw auto; width:46vw; aspect-ratio:1; border:1px solid rgba(255,255,255,.24); transform:rotate(45deg); }
.site-header { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; width:100%; padding:26px clamp(22px,4vw,64px); }
.brand { display:flex; align-items:center; gap:10px; height:44px; color:#fff; font-size:14px; font-weight:700; letter-spacing:-.035em; }
.brand img { display:block; width:40px; height:44px; object-fit:contain; }
.nav { display:flex; align-items:center; gap:clamp(18px,3vw,44px); }
.nav-link { position:relative; padding:3px 0; color:rgba(255,255,255,.86); font-size:14px; letter-spacing:-.01em; }
.nav-link::after { content:''; position:absolute; right:0; bottom:-3px; left:0; height:1px; background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .24s ease; }
.nav-link:hover::after,.nav-link.active::after { transform:scaleX(1); }
.hero-heading { position:relative; z-index:1; padding:clamp(42px,7vh,84px) 24px 0; text-align:center; }
.hero-kicker,.eyebrow { margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:.07em; }
.hero-kicker { color:rgba(255,255,255,.72); }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:0; color:#fff; font-size:clamp(68px,10.5vw,166px); font-weight:400; line-height:.82; letter-spacing:-.075em; }
.showcase { position:relative; z-index:2; margin-top:clamp(40px,8vh,84px); }
.carousel { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:clamp(12px,2vw,28px); width:min(1320px,100%); margin:0 auto; padding:0 clamp(16px,3vw,40px); }
.carousel-viewport { position:relative; height:clamp(228px,32vw,440px); overflow:hidden; touch-action:pan-y; }
.carousel-track { position:relative; width:100%; height:100%; }
.project-card { --card-x:0px; --card-scale:.72; --card-opacity:.42; position:absolute; top:50%; left:50%; display:grid; grid-template-rows:minmax(0,1fr) auto; width:min(42vw,530px); height:clamp(200px,29vw,385px); overflow:hidden; color:#fff; background:var(--black); opacity:var(--card-opacity); transform:translate(-50%,-50%) translateX(var(--card-x)) scale(var(--card-scale)); transition:transform .68s cubic-bezier(.22,1,.36,1),opacity .45s ease,filter .45s ease; will-change:transform; }
.project-card.is-active { --card-scale:1; --card-opacity:1; z-index:3; box-shadow:0 26px 64px rgba(5,11,46,.32); }
.project-card:hover { filter:brightness(1.08); }
.project-card img { width:100%; height:100%; min-height:0; object-fit:contain; transition:transform .7s cubic-bezier(.22,1,.36,1); }
.project-card.is-active:hover img { transform:scale(1.045); }
.project-card__meta { position:relative; z-index:1; padding:12px 16px 14px; color:inherit; background:rgba(4,7,15,.82); font-size:12px; letter-spacing:.01em; }
.project-card--caudara { background:#101728; }.project-card--caudara img { padding:13%; }
.project-card--academia { background:#eff2fb; color:var(--ink); }.project-card--academia img { padding:12%; }.project-card--academia .project-card__meta { background:rgba(247,248,252,.9); }
.project-card--focus { background:#0a0b0b; }.project-card--focus img { object-fit:cover; object-position:center; }
.project-card--youtube { background:#071224; }.project-card--youtube img { object-fit:cover; }
.project-card--behance { background:#1769ff; }.project-card--behance img { width:45%; height:45%; place-self:center; object-fit:contain; }
.carousel-control { display:grid; width:46px; height:46px; padding:0; place-items:center; border:1px solid rgba(255,255,255,.55); border-radius:0; color:#fff; background:transparent; font-size:22px; cursor:pointer; transition:color .2s ease,background .2s ease,transform .2s ease; }
.carousel-control:hover { color:var(--blue); background:#fff; transform:translateY(-2px); }
.carousel-control:focus-visible,.project-card:focus-visible,.project-cta:focus-visible,.contact-panel a:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.showcase-copy { max-width:480px; margin:28px auto 0; padding:0 24px; color:#fff; text-align:center; font-size:15px; line-height:1.4; }
.showcase-hint { margin:12px 0 0; color:rgba(255,255,255,.7); text-align:center; font-size:12px; letter-spacing:.03em; }
.section-divider { display:flex; align-items:center; gap:18px; min-height:52px; padding:0 clamp(24px,8vw,150px); background:var(--black); color:#fff; font-size:11px; font-weight:700; letter-spacing:.08em; }
.section-divider i { display:block; flex:1; height:1px; background:rgba(255,255,255,.34); }

.project-details { background:var(--black); }
.detail { scroll-margin-top:24px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:min(92svh,880px); }
.detail-media { display:grid; min-height:520px; place-items:center; overflow:hidden; background:#101728; }.detail-media img { max-width:78%; max-height:58vh; object-fit:contain; filter:drop-shadow(0 26px 45px rgba(0,0,0,.34)); }
.detail-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(50px,10vw,150px); background:var(--black); }.detail .eyebrow { color:#93a8ff; }.detail h2 { margin-bottom:24px; font-size:clamp(48px,6vw,90px); font-weight:400; line-height:.92; letter-spacing:-.065em; }.detail-copy>p:not(.eyebrow) { max-width:430px; margin-bottom:0; color:#bdc5d7; font-size:17px; line-height:1.5; letter-spacing:-.015em; }
.detail-tags { display:flex; flex-wrap:wrap; gap:8px 12px; margin:32px 0; color:#cbd3e5; font-size:13px; }.detail-tags span::before { content:'•'; margin-right:6px; color:var(--blue); }
.project-cta { display:inline-flex; align-items:center; gap:18px; padding:14px 18px; border:1px solid rgba(255,255,255,.55); color:#fff; font-size:14px; transition:background .2s ease,color .2s ease,transform .2s ease; }.project-cta:hover { background:#fff; color:var(--blue); transform:translateY(-3px); }
.detail--academia,.detail--youtube { background:var(--paper); color:var(--ink); }.detail--academia .detail-media,.detail--youtube .detail-media { order:2; background:#edf1ff; }.detail--academia .detail-copy,.detail--youtube .detail-copy { background:var(--paper); }.detail--academia .eyebrow,.detail--youtube .eyebrow { color:var(--blue); }.detail--academia .detail-copy>p:not(.eyebrow),.detail--youtube .detail-copy>p:not(.eyebrow),.detail--academia .detail-tags,.detail--youtube .detail-tags { color:var(--muted); }.detail--academia .project-cta,.detail--youtube .project-cta { border-color:var(--ink); color:var(--ink); }.detail--academia .project-cta:hover,.detail--youtube .project-cta:hover { border-color:var(--blue); background:var(--blue); color:#fff; }
.detail--academia .detail-media img { width:78%; max-width:none; max-height:none; filter:drop-shadow(0 20px 30px rgba(42,55,95,.14)); }.detail--focus .detail-media { background:#0a0b0b; }.detail--focus .detail-media img { width:min(60%,520px); max-height:72vh; border-radius:22px; }.detail--youtube .detail-media { background:#e8efff; }.detail--youtube .detail-media img { width:min(78%,720px); max-width:none; max-height:none; box-shadow:0 24px 45px rgba(28,50,106,.18); }
.detail--behance .detail-media { background:#1769ff; }.detail--behance .detail-media img { width:min(42%,280px); filter:none; }

.about { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; padding:clamp(90px,12vw,170px) clamp(24px,8vw,150px); background:var(--paper); color:var(--ink); }.about .eyebrow { grid-column:1/-1; margin-bottom:0; color:var(--blue); }.about h2 { font-size:clamp(50px,6vw,96px); font-weight:400; line-height:.91; letter-spacing:-.065em; }.about h2 span { color:var(--blue); }.about-copy { max-width:440px; align-self:center; color:var(--muted); font-size:17px; line-height:1.48; }.about-copy p { margin-bottom:20px; }
.contact-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.72fr); gap:clamp(40px,10vw,160px); padding:clamp(90px,12vw,170px) clamp(24px,8vw,150px); background:var(--paper); color:var(--ink); }.contact-intro .eyebrow { color:var(--blue); }.contact-intro h2 { margin-bottom:22px; font-size:clamp(48px,5.3vw,84px); font-weight:400; line-height:.92; letter-spacing:-.065em; }.contact-intro>p:last-child { max-width:420px; color:var(--muted); font-size:16px; line-height:1.5; }.contact-panel { display:grid; align-content:center; gap:12px; }.contact-panel a { display:flex; flex-direction:column; gap:34px; padding:26px; border:1px solid var(--ink); background:#fff; transition:color .2s ease,background .2s ease,transform .2s ease; }.contact-panel a:hover { color:#fff; background:var(--blue); border-color:var(--blue); transform:translateY(-4px); }.contact-panel span { color:var(--muted); font-size:13px; }.contact-panel a:hover span { color:rgba(255,255,255,.7); }.contact-panel strong { font-size:28px; font-weight:400; letter-spacing:-.04em; }
.footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px clamp(24px,4vw,64px); background:var(--black); color:#fff; font-size:13px; }.footer p { margin:0; }.footer a { color:#aeb7cd; }.footer a:hover { color:#fff; }
@media (max-width:720px) { .site-header { padding:20px 18px; }.brand { height:36px; gap:7px; font-size:12px; }.brand img { width:31px; height:36px; }.nav { gap:16px; }.nav-link { font-size:12px; }.hero-heading { padding-top:54px; }h1 { font-size:clamp(64px,18vw,112px); }.showcase { margin-top:58px; }.carousel { grid-template-columns:38px minmax(0,1fr) 38px; gap:7px; padding:0 8px; }.carousel-control { width:38px; height:38px; font-size:18px; }.carousel-viewport { height:252px; }.project-card { width:74vw; height:228px; }.showcase-copy { margin-top:20px; font-size:14px; }.detail,.detail--academia,.detail--youtube { grid-template-columns:1fr; min-height:0; }.detail-media,.detail--academia .detail-media,.detail--youtube .detail-media { order:0; min-height:46vh; }.detail-copy,.detail--academia .detail-copy,.detail--youtube .detail-copy { padding:72px 24px; }.detail-media img { max-height:32vh; }.detail--academia .detail-media img { width:88%; }.detail--focus .detail-media img { max-height:43vh; }.about,.contact-section { grid-template-columns:1fr; padding:82px 24px; }.about { gap:28px; }.about-copy { font-size:16px; }.footer { padding:20px 24px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }