/* White studio: shared across the desktop, pages and case-study windows. */
:root, body, .studio-page {
 --bg:#fafafa; --bg-elev:#fff; --bg-elev-2:#f1f1f1;
 --text:#252525; --text-mut:#686868; --line:#dedede;
 --accent:#555 !important; --accent-text:#fff;
}
body,.studio-page { background:#fafafa; color:#252525; }
.desktop { background:radial-gradient(ellipse at 25% 30%,#fff 0%,#f5f5f5 55%,#ececec 100%); }
.desktop-signature h1 { color:#292929; text-shadow:0 2px #fff; }
.desktop-signature > p:last-child,.desktop-instruction,.desk-title { color:#363636; text-shadow:none; }
.studio-label,.desktop-instruction span,.desk-note { color:#6a6a6a; }
.menubar { background:#ffffffbd; border-color:#ddd; box-shadow:0 2px 15px #00000004; backdrop-filter:blur(16px); }
.menubar .mb-logo,.studio-page .nav-logo { background:linear-gradient(145deg,#fff,#eaeaea); border-color:#d4d4d4; box-shadow:inset 0 1px #fff,0 3px 8px #00000008; color:#222; }
.mb-brand-dot,.studio-page .brand-mark,.studio-page .brand-mark span { color:#252525; }
.menubar .mb-app,.mb-location,.menubar .mb-clock { color:#333; }
.mb-caption,.mb-zone { color:#737373; }
.mb-divider,.dock-resume::before { background:#d1d1d1; }
.mb-location-dot { background:#777; }
.menubar .mb-clock { background:#ffffff70; border-color:#ddd; }
.desk-object { --folder-color:#e7e7e7 !important; transition:background .2s,box-shadow .2s; }
.desk-object:hover,.desk-object:focus-visible { background:#ffffff85; box-shadow:0 7px 24px #00000006; }
.tactile-folder { background:#d5d5d5; box-shadow:0 9px 18px #00000012; }
.folder-paper { background:#fff; box-shadow:0 -3px #ececec; }
.folder-front { background:linear-gradient(155deg,#ffffffed,#e0e0e0eb); border-color:#fff; }
.folder-front span,.desktop-print > span { color:#606060; }
.desktop-print { background:#fff; box-shadow:0 8px 20px #00000012; }
.dock { background:linear-gradient(135deg,#ffffffd9,#ffffff85); border-color:#fff; box-shadow:inset 0 0 0 1px #ffffffb3,0 12px 40px #0000000e; backdrop-filter:blur(20px); }
.dock-item .app-tile { background:linear-gradient(145deg,#fff,#ededed); border-color:#fff; box-shadow:0 3px 8px #00000010; }
.dock-item .glyph g { stroke:#444; }
.dock-item .app-label { color:#333; }
.dock-item:hover { background:#fff9; }
.dock-item:hover .app-tile,.dock-item:focus-visible .app-tile { transform:translateY(-5px); box-shadow:0 8px 15px #00000014; }
.dock-item.is-open::after { background:#666; box-shadow:0 0 0 2px #fff; }
.window { background:#fafafa; border-color:#fff; box-shadow:0 25px 80px #00000020,0 0 0 1px #ddd; }
.window-bar { background:linear-gradient(120deg,#fff,#f1f1f1); color:#333; border-color:#ddd; }
.window-title,.window-open { color:#333; }
.wc,.wc-close { background:#e6e6e6; color:#444; }
.window-loading { color:#666; }
.studio-page .site-header { background:#ffffffed; border-color:#e5e5e5; }
.studio-page .eyebrow,.studio-page .project-section-label,.studio-page .project-meta strong,.studio-page .project-hero .eyebrow,.studio-page .timeline-year { color:#686868; }
.studio-page .btn-primary,.studio-page .filter-btn[aria-pressed="true"] { background:#fff; color:#222; border-color:#bcbcbc; box-shadow:0 3px 10px #00000008; }
.studio-page .nav-links a.btn { color:#222; }
.studio-page .btn-ghost,.studio-page .filter-btn { border-color:#ddd; }
.studio-page .filter-btn[aria-pressed="true"] { box-shadow:inset 0 -2px #555; }
.studio-page .card,.studio-page .timeline-item,.studio-page .pillar,.studio-page .process-step,.studio-page .contact-form-card { background:#ffffffbd; border-color:#e1e1e1; box-shadow:0 5px 20px #00000004; }
.studio-page .card { transition:transform .25s ease,box-shadow .25s ease; }
.studio-page .card:hover { transform:translateY(-4px); box-shadow:0 14px 35px #0000000b; }
.studio-page .timeline::before,.studio-page .timeline-item::after { background:#d3d3d3; }
.studio-page .timeline-item::before { background:#888; border-color:#fafafa; box-shadow:0 0 0 1px #ccc; }
.studio-page .timeline-item p,.studio-page .tag,.studio-page .footer-brand p,.studio-page .footer-col a,.studio-page .footer-bottom { color:#606060; }
.studio-page .about-portrait,.studio-page .hero-portrait { border-color:#fff; }
.studio-page .tag,.studio-page .tag-software { background:#fff; border-color:#ddd; }
.studio-page .tag .tag-icon,.studio-page .social-icon,.studio-page .info-box-item .icon { background:#f1f1f1; color:#454545; border-color:#ddd; }
.studio-page input,.studio-page textarea { background:#fff; border-color:#d8d8d8; color:#222; }
.studio-page .next-project,.studio-page .site-footer { background:#f4f4f4; border-color:#ddd; }
.studio-page .clients-wall { background:#f0f0f0; }
.client-logo img { filter:grayscale(1) brightness(.45); }
.studio-page .nav-toggle,.back-to-top,.video-play { background:#fff; color:#333; border:1px solid #ddd; box-shadow:0 5px 20px #00000010; }
.studio-page .nav-toggle span { background:#444; }
.card-tag { background:#ffffffed; color:#333; border-color:#ddd; }
/* Small, composited corner glints: no canvas, WebGL or animation library. */
.dock::after,.window-bar::after { content:""; position:absolute; top:0; right:0; width:54px; height:18px; border-top:1px solid #fff; border-right:1px solid #fff; border-top-right-radius:inherit; box-shadow:2px -2px 9px #fff; pointer-events:none; animation:edge-glint 5s ease-in-out infinite; }
.window-bar { position:relative; }
@keyframes edge-glint { 0%,100% { opacity:.25; transform:translateX(-8px); } 50% { opacity:1; transform:translateX(0); } }
@media(max-width:760px) {
 .studio-page .site-header { background:#fffffff5; backdrop-filter:none; -webkit-backdrop-filter:none; }
 .studio-page .nav-links { background:#fffffff5; border-color:#e5e5e5; box-shadow:0 18px 35px #00000008; }
}
@media(prefers-reduced-motion:reduce) {
 .dock::after,.window-bar::after { animation:none; opacity:.7; }
 .studio-page .card:hover,.dock-item:hover .app-tile { transform:none; }
}
.studio-page .card-tag,.studio-page .arrow-btn,.studio-page .activation-figcaption { background:#fffffff0; color:#333; border-color:#ddd; }
.studio-page .project-section-body p { color:#555; }
.studio-page .project-hero-media,.studio-page .gallery-item,.studio-page .activation-figure,.studio-page .storyboard-media { border-color:#fff; box-shadow:0 4px 18px #0000000a; }
.studio-page .stat-band { background:#f4f4f4; border-color:#ddd; }
.studio-page .stat-value { color:#333; }
.studio-page .stat-label { color:#666; }
/* Desktop motion: brief entrances and interaction-driven light, no extra downloads. */
.desktop-signature { animation:studio-arrive .65s ease-out both; }
.desk-object { animation:studio-arrive .55s ease-out both; }
.desk-slot-0 { animation-delay:.08s; }
.desk-slot-1 { animation-delay:.14s; }
.desk-slot-2 { animation-delay:.2s; }
.desk-slot-3 { animation-delay:.26s; }
.desk-slot-4 { animation-delay:.32s; }
.desk-slot-5 { animation-delay:.38s; }
.desk-slot-6 { animation-delay:.44s; }
.tactile-folder { transition:translate .25s ease,box-shadow .25s ease; }
.desk-object:hover .tactile-folder,.desk-object:focus-visible .tactile-folder { translate:0 -4px; box-shadow:0 14px 22px #00000016; }
.folder-front { overflow:hidden; }
.folder-front::after { content:""; position:absolute; inset:-30% -70%; background:linear-gradient(110deg,transparent 42%,#fff9 50%,transparent 58%); translate:-45% 0; opacity:0; pointer-events:none; }
.desk-object:hover .folder-front::after,.desk-object:focus-visible .folder-front::after { animation:folder-light .75s ease-out; }
@keyframes studio-arrive { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }
@keyframes folder-light { 0% { translate:-45% 0; opacity:0; } 30% { opacity:1; } 100% { translate:45% 0; opacity:0; } }
@media(prefers-reduced-motion:reduce) {
 .desktop-signature,.desk-object,.desk-object:hover .folder-front::after,.desk-object:focus-visible .folder-front::after { animation:none; }
 .desk-object:hover .tactile-folder,.desk-object:focus-visible .tactile-folder { translate:none; }
}
/* Fine architectural grid with a slow, neutral wash of light. */
.desktop {
 background:
  linear-gradient(#c6c6c633 1px,transparent 1px) 0 0 / 40px 40px,
  linear-gradient(90deg,#c6c6c633 1px,transparent 1px) 0 0 / 40px 40px,
  #f8f8f8;
}
.desktop::before {
 content:""; position:absolute; inset:-20%; z-index:0; pointer-events:none;
 background:linear-gradient(115deg,transparent 30%,#ffffffc9 48%,transparent 66%);
 animation:grid-light 18s ease-in-out infinite alternate;
}
@keyframes grid-light { from { transform:translateX(-15%); opacity:.5; } to { transform:translateX(15%); opacity:.85; } }
@media(prefers-reduced-motion:reduce) { .desktop::before { animation:none; opacity:.5; } }

/* Dock as a compact studio tool shelf, with distinct object silhouettes. */
.dock { border-radius:14px; padding:9px 15px 8px; gap:6px; }
.dock-item .app-tile { background:transparent; border:0; box-shadow:none; border-radius:4px; width:38px; height:36px; color:#484848; }
.dock-item .glyph { width:30px; height:30px; }
.dock-item .glyph g { stroke:currentColor; stroke-width:1.25; }
.dock-item:hover .app-tile,.dock-item:focus-visible .app-tile { transform:translateY(-3px); box-shadow:none; }
.dock-item { border-radius:7px; }
.dock-item:hover,.dock-item:focus-visible { background:#ffffffb3; }
.dock-item .app-label { font-size:10px; letter-spacing:.01em; }
.dock::after { width:34px; opacity:.45; }
@media(prefers-reduced-motion:reduce) {
 .dock-item:hover .app-tile,.dock-item:focus-visible .app-tile { transform:none; }
}
/* Reference-inspired glass capsule; labels are contextual, not a second row. */
.dock {
 width:440px; max-width:calc(100vw - 32px); padding:9px; gap:5px;
 justify-content:space-between; border-radius:999px;
 background:linear-gradient(120deg,#ffffffb8,#ffffff45);
 border:1px solid #ffffffed;
 box-shadow:inset 0 1px 1px #fff, inset 0 -1px 1px #00000008,0 8px 30px #0000000c,0 0 0 1px #d2d2d259;
 backdrop-filter:blur(22px) saturate(0); -webkit-backdrop-filter:blur(22px) saturate(0);
 overflow:visible;
}
.dock-item {
 position:relative; flex:1; min-width:0; height:62px; padding:0;
 display:flex; align-items:center; justify-content:center; gap:0;
 border-radius:999px; color:#747474;
 transition:background .22s ease,box-shadow .22s ease,color .22s ease;
}
.dock-item .app-tile { width:38px; height:38px; background:none; border:0; box-shadow:none; }
.dock-item .glyph { width:34px; height:34px; }
.dock-item .glyph g { stroke:currentColor; stroke-width:1.35; }
.dock-item:hover,.dock-item:focus-visible,.dock-item.is-open {
 background:#ffffffa6; color:#303030; box-shadow:inset 0 1px #fff,0 2px 8px #00000004;
}
.dock-item:hover .app-tile,.dock-item:focus-visible .app-tile { transform:none; box-shadow:none; }
.dock-resume { margin-left:0; }
.dock-resume::before,.dock-item.is-open::after,.dock::after { display:none; }
.dock-item .app-label {
 position:absolute; bottom:calc(100% + 18px); top:auto; left:50%;
 transform:translateX(-50%) !important; padding:7px 12px;
 border:1px solid #ffffffed; border-radius:9px;
 background:#ffffffeb; color:#333; box-shadow:0 4px 16px #0000000d;
 font-size:11px; font-weight:500; line-height:1.3; white-space:nowrap;
 opacity:0; visibility:hidden; pointer-events:none;
 transition:opacity .16s ease,visibility .16s ease;
}
.dock-item:hover .app-label,.dock-item:focus-visible .app-label { opacity:1; visibility:visible; }
@media(max-width:600px) {
 .dock { width:350px; padding:7px; gap:3px; bottom:12px; }
 .dock-item { min-width:0; height:52px; padding:0; }
 .dock-item .glyph { width:29px; height:29px; }
}
/* Desktop masthead: a floating glass rail with a compact local-time capsule. */
.menubar {
 top:8px; left:12px; right:12px; height:48px; padding:6px 9px; gap:12px;
 border:1px solid #ffffffed; border-radius:14px;
 background:linear-gradient(115deg,#ffffffed,#ffffff9c);
 backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
 box-shadow:inset 0 1px #fff,0 3px 16px #00000005,0 0 0 1px #00000005;
}
.menubar .mb-logo {
 width:32px; height:32px; flex-shrink:0; border-radius:9px; border:1px solid #d8d8d8;
 background:linear-gradient(145deg,#fff,#ededed); box-shadow:inset 0 1px #fff,0 2px 3px #00000004;
 transition:background .2s,transform .2s;
}
.mb-logo > span { font-size:21px; }
.mb-logo:hover { border-color:#bbb; background:#fff; transform:translateY(-1px); }
.mb-divider { height:22px; background:linear-gradient(transparent,#d4d4d4,transparent); }
.mb-identity { flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; min-width:0; }
.mb-caption { display:block; font-size:7px; line-height:1.3; letter-spacing:.16em; color:#858585; }
.menubar .mb-app { font-size:11px; line-height:1.4; letter-spacing:-.015em; color:#333; max-width:40vw; }
.menubar .mb-right { gap:12px; padding:5px 9px; height:32px; border:1px solid #dedede99; border-radius:999px; background:#ffffff80; box-shadow:inset 0 1px #fff; }
.mb-location { gap:6px; font-size:10px; color:#606060; }
.mb-location-dot { width:4px; height:4px; background:#888; box-shadow:0 0 0 3px #88888810; }
.mb-zone { font-size:8px; color:#929292; }
.menubar .mb-clock { padding:0 0 0 11px; border:0; border-left:1px solid #ddd; border-radius:0; background:none; font-size:11px; line-height:15px; letter-spacing:.04em; color:#404040; }
.home-widgets { top:68px; }
.windows-layer { top:68px; }
@media(max-width:600px) {
 .menubar { left:8px; right:8px; gap:9px; }
 .mb-zone { display:none; }
 .menubar .mb-right { gap:8px; padding-inline:8px; }
 .menubar .mb-app { max-width:32vw; }
}
@media(max-width:370px) {
 .mb-caption { font-size:6px; letter-spacing:.1em; }
 .mb-location { display:none; }
 .menubar .mb-clock { padding:0; border:0; }
}

/* A photographic rose landscape; compositor-only motion keeps the desktop light. */
.desktop { background:#f7eef1; }
.desktop::before { display:none; }
.landscape-wallpaper { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.landscape-wallpaper img { width:100%; height:100%; object-fit:cover; object-position:center 65%; max-width:none; animation:landscape-drift 16s ease-in-out infinite alternate; }
.landscape-wallpaper::after { content:""; position:absolute; inset:0; background:linear-gradient(#ffffff70,transparent 70%); }
.landscape-light { position:absolute; inset:-20%; background:linear-gradient(115deg,transparent 28%,#fff7 44%,#ffe9dd44 53%,transparent 68%); mix-blend-mode:screen; animation:landscape-sunlight 10s ease-in-out infinite alternate; }
@keyframes landscape-drift { from { transform:scale(1.12) translate(-2%,1%); } to { transform:scale(1.2) translate(2%,-1%); } }
@keyframes landscape-sunlight { from { transform:translateX(-25%); opacity:.2; } to { transform:translateX(25%); opacity:.75; } }
.desktop .desk-label,.desktop .desk-subtitle { text-shadow:0 1px 7px #fff,0 0 16px #ffffffd9; }
@media(max-width:700px) { .landscape-wallpaper img { object-position:48% 65%; } }
@media(prefers-reduced-motion:reduce) { .landscape-wallpaper img,.landscape-light { animation:none; } }
.desktop .desk-title,.desktop .desk-note { position:relative; width:fit-content; max-width:100%; margin-inline:auto; padding:3px 7px; border-radius:6px; background:#ffffffe0; color:#333; text-shadow:none; }
.desktop .desk-note { margin-top:3px; font-size:10px; background:#ffffffc9; color:#555; }

/* Clear glass rails: let the wallpaper supply their tint. */
.dock {
 width:380px; padding:5px 8px; gap:4px;
 background:linear-gradient(135deg,#ffffff66,#ffffff1f 55%,#ffffff3b);
 border:1px solid #ffffffa6;
 backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15);
 box-shadow:inset 0 1px 0 #ffffffd9,inset 0 -1px 0 #ffffff33,0 8px 24px #36202b1a;
}
.dock-item { height:44px; }
.dock-item .app-tile { width:32px; height:32px; color:#343037; }
.dock-item .glyph { width:28px; height:28px; }
.dock-item:hover,.dock-item:focus-visible,.dock-item.is-open { background:#ffffff55; box-shadow:inset 0 1px #ffffffa6; }
.menubar {
 height:44px; padding-block:4px;
 background:linear-gradient(115deg,#ffffff5c,#ffffff24 65%,#ffffff47);
 border-color:#ffffffa6;
 backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15);
 box-shadow:inset 0 1px #ffffffcc,0 4px 18px #36202b0a;
}
.menubar .mb-logo { background:#ffffff38; border-color:#ffffffa6; box-shadow:inset 0 1px #ffffffb3; }
.menubar .mb-right { background:#ffffff21; border-color:#ffffff66; box-shadow:inset 0 1px #ffffff80; }
@media(max-width:600px) { .dock { width:330px; padding:5px 7px; } .dock-item { height:44px; } .dock-item .glyph { width:27px; height:27px; } }

/* Compact desktop objects and a consistent contemporary dock glyph set. */
.dock-item .glyph { width:25px; height:25px; }
.dock-item .glyph g { stroke-width:1.65; }
.tactile-folder { width:76px; height:56px; margin:10px 0; }
.tactile-folder::before { width:32px; height:11px; top:-7px; }
.folder-front { inset:9px -1px -1px; padding:6px; }
.folder-front span { font-size:5px; letter-spacing:.08em; }
.folder-paper { inset:3px 6px 6px; }
.desktop-print { width:88px; padding:4px; }
.desktop-print img { height:48px; }
.desktop-print > span { font-size:5px; }
.desk-object { padding:7px; }
.desktop .desk-title { font-size:11px; }
.desktop .desk-note { font-size:9px; }
@media(max-width:1024px) { .personal-desktop { row-gap:16px; } }

/* A composed starting desktop: four folders together, three prints below. */
@media(min-width:1025px) {
 .personal-desktop { --arrangement-x:calc(72% - 228px); --arrangement-y:clamp(18px,calc(50% - 216px),200px); }
 .desk-object { width:144px; }
 .desk-slot-0 { left:calc(var(--arrangement-x) + 76px); top:var(--arrangement-y); }
 .desk-slot-1 { left:calc(var(--arrangement-x) + 236px); top:var(--arrangement-y); }
 .desk-slot-2 { left:calc(var(--arrangement-x) + 76px); top:calc(var(--arrangement-y) + 140px); }
 .desk-slot-3 { left:calc(var(--arrangement-x) + 236px); top:calc(var(--arrangement-y) + 140px); }
 .desk-slot-4 { left:var(--arrangement-x); top:calc(var(--arrangement-y) + 294px); transform:rotate(-3deg); }
 .desk-slot-5 { left:calc(var(--arrangement-x) + 156px); top:calc(var(--arrangement-y) + 294px); transform:rotate(2deg); }
 .desk-slot-6 { left:calc(var(--arrangement-x) + 312px); top:calc(var(--arrangement-y) + 294px); transform:rotate(-2deg); }
 .desktop-signature h1 { font-size:clamp(5rem,9vw,9rem); }
}

/* Optical alignment: compensate for the display face's left sidebearing. */
.desktop-signature,.desktop-instruction { text-align:left; }
.desktop-signature h1 { margin-left:-.035em; text-shadow:none; }
/* Keep the welcome note readable over the moving landscape without moving its text. */
.desktop-instruction {
 width:fit-content; max-width:100%; isolation:isolate;
 color:#29262c; font-weight:500; line-height:1.65; text-shadow:none;
}
.desktop-instruction::before {
 content:""; position:absolute; inset:-12px -16px; z-index:-1; pointer-events:none;
 border:1px solid #ffffffd9; border-radius:14px; background:#ffffffdb;
 box-shadow:inset 0 1px #fff,0 6px 24px #36202b0d;
 backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.desktop-instruction span { color:#4a464c; font-weight:400; }
@media(max-width:1024px) {
 .desktop-signature { padding-bottom:8px; }
 .desktop-signature h1 { margin-top:18px; margin-bottom:18px; }
 .desktop-instruction { position:relative; inset:auto; margin-bottom:20px; }
}

/* The board can scroll in short Mac windows; the glass rails stay in view. */
.home-widgets {
 overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain;
 -webkit-overflow-scrolling:touch; scrollbar-width:thin;
 scrollbar-color:#77777755 transparent;
}
@media(min-width:1025px) { .personal-desktop { min-height:640px; } }
.window.is-max { height:calc(100% - var(--dock-space)) !important; }

/* One interaction language for text links, from menus to case-study footers. */
.studio-page :is(.footer-col a,.form-note a,.project-section-body a,main p a:not(.btn):not(.read-more),.big-link) {
 background-image:linear-gradient(currentColor,currentColor);
 background-position:0 100%; background-repeat:no-repeat; background-size:0% 1px;
 text-decoration:none !important;
 transition:color .2s ease,background-size .25s ease,border-color .2s ease;
}
.studio-page :is(.footer-col a,.form-note a,.project-section-body a,main p a:not(.btn):not(.read-more),.big-link):is(:hover,:focus-visible) {
 color:#222; background-size:100% 1px;
}
.studio-page .nav-links a { transition:color .2s ease; }
.studio-page .nav-links a:focus-visible { color:#222; }
.studio-page .nav-links a:focus-visible::after { width:100%; }
.studio-page :is(.btn,.filter-btn) {
 transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease,translate .2s ease;
}
.studio-page .btn { transform:none; }
.studio-page :is(.btn,.filter-btn):is(:hover,:focus-visible) {
 background:#fff; color:#222; border-color:#aaa;
 box-shadow:inset 0 1px #fff,0 4px 12px #0000000a;
}
.studio-page .filter-btn[aria-pressed="true"]:is(:hover,:focus-visible) {
 box-shadow:inset 0 -2px #555,0 4px 12px #0000000a;
}
.studio-page .btn:focus-visible .btn-arrow,.studio-page .read-more:focus-visible .btn-arrow { transform:translateX(4px); }
.studio-page .read-more:focus-visible { color:#222; border-color:#777; }
.studio-page .footer-col .social-icon { transition:background .2s ease,border-color .2s ease,translate .2s ease; }
.studio-page .footer-col a:is(:hover,:focus-visible) .social-icon { background:#fff; border-color:#aaa; }
.studio-page .info-box-item .icon { transition:background .2s ease,border-color .2s ease; }
.studio-page .info-box-item:focus-within .icon { background:#fff; border-color:#aaa; }
.studio-page .next-project { transition:background .2s ease,border-color .2s ease,box-shadow .2s ease; }
.studio-page .next-project .title {
 text-decoration:underline; text-decoration-color:transparent; text-underline-offset:.15em;
 transition:text-decoration-color .2s ease;
}
.studio-page .next-project:is(:hover,:focus-visible) { background:#fff; border-color:#aaa; box-shadow:0 5px 18px #00000008; }
.studio-page .next-project:is(:hover,:focus-visible) .title { text-decoration-color:currentColor; }
.studio-page .card:focus-visible { box-shadow:0 14px 35px #0000000b; }
.studio-page .card-title {
 text-decoration:underline; text-decoration-color:transparent; text-underline-offset:.15em;
 transition:text-decoration-color .2s ease;
}
.studio-page .card:is(:hover,:focus-visible) .card-title { text-decoration-color:currentColor; }
.desktop :is(.desk-title,.desk-note) { transition:background .2s ease,box-shadow .2s ease,color .2s ease; }
.desktop .desk-object:is(:hover,:focus-visible) .desk-title { background:#fff; color:#222; box-shadow:0 2px 8px #0000000a; }
.desktop .desk-object:is(:hover,:focus-visible) .desk-note { background:#fffffff2; color:#333; }
.desktop .desk-object:focus-visible .folder-paper { transform:translateY(-4px) rotate(-7deg); }
.studio-page .video-embed:focus-visible img { transform:scale(1.05); opacity:.85; }
.studio-page .video-embed:focus-visible .video-play { transform:translate(-50%,-50%) scale(1.1); }
.wc,.window-open { transition:background .2s ease,color .2s ease; }
.wc:is(:hover,:focus-visible),.window-open:is(:hover,:focus-visible) { background:#d8d8d8; color:#111; }
.window-open { border-radius:4px; }
@media(hover:hover) and (pointer:fine) {
 .studio-page .btn:hover { translate:0 -2px; }
 .studio-page .footer-col a:hover .social-icon { translate:0 -2px; }
 .studio-page .info-box-item:hover .icon { background:#fff; border-color:#aaa; }
}
@media(prefers-reduced-motion:reduce) {
 .studio-page :is(.btn,.filter-btn,.footer-col a,.form-note a,.project-section-body a,main p a,.big-link,.nav-links a,.nav-links a::after,.social-icon,.info-box-item .icon,.next-project,.next-project .title,.card-title),
 .desktop :is(.desk-title,.desk-note),.wc,.window-open { transition:none; }
 .studio-page .btn:hover,.studio-page .footer-col a:hover .social-icon { translate:none; }
 .studio-page .btn:focus-visible .btn-arrow,.studio-page .read-more:focus-visible .btn-arrow { transform:none; }
 .desktop .desk-object:is(:hover,:focus-visible) .folder-paper { transform:rotate(-5deg); }
 .studio-page .video-embed:is(:hover,:focus-visible) img { transform:none; }
 .studio-page .video-embed:is(:hover,:focus-visible) .video-play { transform:translate(-50%,-50%); }
}

/* Gallery controls stay legible against the dark viewer, independent of page colors. */
html.has-lightbox,html.has-lightbox body { overflow:hidden; }
.lightbox {
 z-index:1000; background:#101014f5; padding:76px 24px 108px;
 overscroll-behavior:contain;
}
.lightbox img { max-height:calc(100vh - 184px); max-height:calc(100dvh - 184px); border-color:#ffffff30; }
.lightbox :is(.lightbox-close,.lightbox-nav) {
 width:46px; height:46px; padding:0; flex-shrink:0;
 display:flex; align-items:center; justify-content:center;
 border:1px solid #ffffff66; border-radius:50%; color:#fff;
 background:#ffffff17; box-shadow:inset 0 1px #ffffff26,0 4px 16px #00000030;
 backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
 transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.lightbox :is(.lightbox-close,.lightbox-nav):is(:hover,:focus-visible):not(:disabled) {
 color:#fff; background:#ffffff30; border-color:#ffffffb3;
 box-shadow:inset 0 1px #ffffff40,0 4px 16px #00000030;
}
.lightbox :is(.lightbox-close,.lightbox-nav):focus-visible { outline:2px solid #fff; outline-offset:4px; }
.lightbox button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.lightbox-close { top:max(18px,env(safe-area-inset-top)); right:max(18px,env(safe-area-inset-right)); }
.lightbox-controls {
 position:absolute; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
 display:flex; align-items:center; gap:16px;
}
.lightbox .lightbox-nav { position:static; transform:none; }
.lightbox-count { min-width:64px; text-align:center; color:#fff; font-size:12px; font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.lightbox .lightbox-nav:disabled { opacity:.3; cursor:default; }
@media(max-width:600px) { .lightbox { padding-inline:16px; } }
@media(prefers-reduced-motion:reduce) { .lightbox :is(.lightbox-close,.lightbox-nav) { transition:none; } }