.work-page { background:#07111d; color:#f4f7fb; }
.work-page .container { width:min(1120px,calc(100% - 48px)); }
.work-page .section-label { color:#8fdcff; font-size:.68rem; letter-spacing:.17em; }
.portfolio-intro { padding-top:146px; padding-bottom:64px; }
.portfolio-wordmark { width:min(340px,90%); height:auto; mix-blend-mode:screen; margin-bottom:34px; }
.portfolio-intro h1 { font-size:clamp(2.4rem,4.8vw,4.5rem); line-height:1.08; margin:20px 0 24px; letter-spacing:-.035em; }
.portfolio-intro h1 span { color:#b7c9dc; }
.portfolio-intro p { max-width:660px; color:#bdcbdc; font-size:1.08rem; }
.portfolio-services { display:inline-block; color:#8fdcff; font-size:.87rem; margin-top:12px; text-decoration:underline; text-underline-offset:5px; }
.portfolio-projects { scroll-margin-top:100px; padding-bottom:72px; }
.portfolio-section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:20px; border-top:1px solid #2b3c50; padding-top:26px; margin-bottom:28px; }
.portfolio-section-heading h2 { font-size:1.3rem; margin:0; }
.portfolio-section-heading p { color:#9eb1c6; font-size:.85rem; margin:0; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.project-card { appearance:none; display:flex; flex-direction:column; text-align:left; padding:0; width:100%; border:1px solid #2c4056; border-radius:16px; overflow:hidden; background:#0e1b2c; color:inherit; cursor:pointer; box-shadow:0 12px 28px #0002; transition:transform .2s,border-color .2s,box-shadow .2s; }
.project-visual { display:flex; align-items:center; justify-content:center; padding:28px; background:#f7f5f0; height:350px; }
.project-visual img { width:100%; height:100%; object-fit:contain; }
.featured { grid-column:1/-1; display:grid; grid-template-columns:1.4fr 1fr; }
.featured .project-visual { height:340px; padding:0; background:#050709; }
.featured .project-visual img { object-fit:contain; }
.website-card .project-visual { padding:22px; background:#dce7ee; }
.wide { grid-column:1/-1; }
.wide .project-visual { height:230px; padding:38px; }
.dark-art .project-visual { background:#000; }
.project-copy { display:flex; flex-direction:column; padding:30px; align-items:flex-start; justify-content:center; }
.project-type { font-size:.62rem; color:#8fdcff; letter-spacing:.12em; line-height:1.8; }
.project-title { display:block; font-family:'Space Grotesk',sans-serif; font-size:clamp(1.35rem,2vw,1.8rem); font-weight:600; line-height:1.2; margin:14px 0; }
.project-description { color:#bdcbdc; font-size:.92rem; line-height:1.7; }
.project-action { color:#f4f7fb; font-size:.85rem; font-weight:600; margin-top:24px; display:flex; gap:16px; }
.project-action span { color:#15d9ff; }
.portfolio-contact { display:flex; justify-content:space-between; align-items:center; gap:30px; border-top:1px solid #2c4056; padding:40px 0 64px; }
.portfolio-contact h2 { font-size:clamp(1.8rem,3vw,2.6rem); margin:12px 0; }
.portfolio-contact p { color:#bdcbdc; max-width:550px; }
.work-page footer { background:#050c15; }
.work-page .main-nav a[aria-current="page"] { color:#15d9ff; }
.project-dialog { width:min(1000px,calc(100% - 32px)); max-height:calc(100dvh - 32px); border:1px solid #49627b; border-radius:18px; background:#0e1b2c; color:#f4f7fb; padding:28px; overscroll-behavior:contain; }
.project-dialog::backdrop { background:rgba(2,7,14,.88); }
.dialog-top { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.dialog-close,.gallery-controls button { border:1px solid #49627b; border-radius:8px; color:#f4f7fb; background:#14263a; min-height:44px; padding:8px 14px; cursor:pointer; }
.project-dialog h2 { font-size:clamp(1.4rem,3vw,2rem); margin:22px 0 8px; }
#dialog-description { color:#bdcbdc; max-width:750px; margin:0 0 12px; }
#dialog-live { color:#8fdcff; display:inline-block; text-decoration:underline; text-underline-offset:4px; margin-bottom:16px; }
#dialog-live[hidden] { display:none; }
.dialog-figure { margin:18px 0; }
.dialog-image-stage { display:flex; align-items:center; justify-content:center; height:min(51dvh,520px); padding:16px; border-radius:10px; background:#f7f5f0; }
.dialog-image-stage.dark { background:#000; }
#dialog-image { width:100%; height:100%; object-fit:contain; }
#dialog-caption { margin-top:14px; color:#bdcbdc; font-size:.85rem; text-align:center; }
.gallery-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gallery-controls button:disabled { opacity:.4; cursor:default; }
#gallery-count { color:#bdcbdc; font-size:.8rem; }
.work-page :focus-visible { outline:3px solid #8fdcff; outline-offset:4px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; top:-80px; left:16px; z-index:1000; padding:12px; background:#07111d; color:white; }
.skip-link:focus { top:12px; }
@media(hover:hover) and (pointer:fine) { .project-card:hover { transform:translateY(-3px); border-color:#68bbd0; box-shadow:0 18px 36px #0005; } }
@media(max-width:700px) {
 .work-page .container { width:calc(100% - 32px); }
 .portfolio-intro { padding-top:118px; padding-bottom:42px; }
 .portfolio-wordmark { width:270px; }
 .portfolio-section-heading { display:block; }
 .portfolio-section-heading p { margin-top:8px; }
 .project-grid { grid-template-columns:1fr; gap:22px; }
 .featured { display:flex; }
 .featured .project-visual { height:250px; }
 .project-visual { height:310px; padding:24px; }
 .wide .project-visual { height:170px; padding:22px; }
 .project-copy { padding:24px; }
 .portfolio-contact { flex-direction:column; align-items:flex-start; }
 .project-dialog { padding:18px; }
 .dialog-top .section-label { font-size:.55rem; letter-spacing:.08em; }
 .dialog-image-stage { height:40dvh; padding:8px; }
 .gallery-controls button { font-size:.8rem; padding:8px 10px; }
}
@media(prefers-reduced-motion:reduce) { html {scroll-behavior:auto;} .project-card {transition:none;} .project-card:hover {transform:none;} }