.portfolio .portfolio-category-nav { display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; width:100%; gap:10px; margin:24px 0 28px; padding:0; min-height:0; background:transparent; border:0; box-shadow:none; }
.portfolio .portfolio-category-nav a { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; width:auto; min-height:38px; padding:8px 16px; margin:0; border:1px solid #a5dff3; border-radius:999px; color:#15517f; background:#fff; font-size:13px; line-height:1.4; font-weight:600; white-space:nowrap; }
.portfolio .portfolio-category-nav a[aria-current="page"],.portfolio .portfolio-category-nav a:hover { background:#19b2de; border-color:#19b2de; color:#fff; }
.portfolio-category-nav a:focus-visible { outline:3px solid #15517f; outline-offset:3px; }
.portfolio-category-images figure { margin:0; }
.portfolio-category-images img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top center; }
.portfolio-category-video { max-width:960px; }
.portfolio-category-video iframe { display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:14px; }
@media(max-width:600px) { .portfolio-category-nav { gap:8px; } .portfolio-category-nav a { padding:8px 12px; font-size:12px; } }
.project-detail-image { display:block; width:100%; max-width:960px; height:auto; margin:28px 0; border-radius:14px; }
.portfolio-detail-link { display:block; height:100%; color:inherit; text-decoration:none; }
.portfolio-detail-link:focus-visible { outline:3px solid #19b2de; outline-offset:4px; }
.portfolio-detail-link .portfolio-meta h3 { font-size:20px; line-height:1.5; }
.portfolio-detail-link .portfolio-meta span { color:#72d6f2; font-size:14px; font-weight:600; }
.project-detail.section { padding:48px 0 72px; background:linear-gradient(145deg,#f3f9fc,#fff)!important; }
.project-detail>.container { max-width:1160px; }
.project-detail>.container>.text-link { color:#56718b; font-size:14px; border:0; margin-bottom:28px; }
.project-detail-layout { display:grid; grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr); gap:48px; align-items:center; }
.project-detail-label { display:inline-block; color:#1689b2; font-size:12px; font-weight:700; letter-spacing:.12em; }
main .project-detail .project-detail-copy h1 { color:#142b44; font-size:clamp(30px,3.5vw,44px); letter-spacing:-.025em; line-height:1.3; margin:16px 0; }
.project-detail-copy>p { color:#60748a; font-size:16px; line-height:1.9; margin:0; }
.project-detail-actions { margin-top:26px; }
.project-detail-actions p { margin:0; }
.project-detail-actions .text-link { display:inline-flex; padding:12px 20px; background:#0c86b1; border:0; border-radius:9px; color:#fff; font-size:14px; }
.project-detail-preview { margin:0; overflow:hidden; border:1px solid #d6e4ed; border-radius:16px; background:#fff; box-shadow:0 18px 45px #183d5914; }
.project-preview-toolbar { display:flex; align-items:center; gap:6px; padding:13px 16px; border-bottom:1px solid #e2eaf0; background:#f7fafc; }
.project-preview-toolbar i { width:8px; height:8px; border-radius:50%; background:#c7d7e2; }
.project-preview-toolbar i:first-child { background:#f0a29e; }
.project-preview-toolbar i:nth-child(2) { background:#ebcd88; }
.project-preview-toolbar i:nth-child(3) { background:#91c9ad; }
.project-preview-toolbar span { flex:1; color:#8193a3; font-size:11px; text-align:center; padding-right:36px; }
.project-detail-preview .project-detail-image { width:100%; max-width:none; height:auto; max-height:520px; object-fit:contain; object-position:top center; margin:0; border-radius:0; }
@media(max-width:800px) { .project-detail-layout { grid-template-columns:1fr; gap:28px; } .project-detail-preview { max-width:680px; width:100%; } .project-detail.section { padding-bottom:48px; } }
.reference-detail.section { background:linear-gradient(140deg,#eaf7fc,#f5fbfe)!important; }
.project-intro-banner { padding:28px 32px; margin-bottom:28px; background:linear-gradient(110deg,#fff,#f2fbff); border:1px solid #d9ebf4; border-radius:12px; }
.project-intro-banner>span { color:#169fc4; font-size:12px; font-weight:700; }
.project-intro-banner h2 { color:#142d43; font-size:clamp(22px,2.5vw,30px); line-height:1.5; margin:10px 0; }
.project-intro-banner p { margin:0; color:#687e8d; font-size:15px; line-height:1.9; }
.project-reference-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:28px; align-items:start; }
.project-reference-content { min-width:0; }
.project-reference-image { margin:0; padding:22px; border:1px solid #dfedf4; border-radius:12px 12px 0 0; background:#fff; }
.project-reference-image .project-detail-image { margin:0; width:100%; max-width:none; height:auto; border-radius:6px; }
.project-reference-info { padding:28px; margin-bottom:24px; border:1px solid #dfedf4; border-top:0; border-radius:0 0 12px 12px; background:#fff; }
main .reference-detail .project-reference-info h1 { color:#18364c; font-size:clamp(26px,3vw,36px); margin:12px 0; line-height:1.4; }
.project-reference-info>p { color:#657c8c; line-height:1.9; }
.project-reference-content>.text-link { color:#32647c; font-size:14px; }
.project-reference-sidebar h2 { font-size:19px; color:#18364c; margin:0 0 14px; }
.project-sidebar-links { background:#fff; border:1px solid #dcebf3; border-radius:12px; padding:8px 20px; }
.project-sidebar-links a { display:flex; justify-content:space-between; gap:12px; padding:19px 0; color:#35536a; font-size:13px; font-weight:700; border-bottom:1px solid #edf2f6; }
.project-sidebar-links a:last-child { border:0; }
.project-sidebar-links a:hover,.project-sidebar-links span { color:#16a7ce; }
.project-sidebar-contact { margin-top:20px; padding:22px; background:#e0f3fb; border-radius:12px; }
.project-sidebar-contact h3 { margin:0; font-size:17px; color:#1b4059; }
.project-sidebar-contact p { color:#627f90; font-size:14px; }
.project-sidebar-contact>a { display:inline-block; padding:10px 16px; background:#128eb7; color:#fff; border-radius:8px; font-size:14px; }
@media(max-width:800px) { .project-reference-layout { grid-template-columns:1fr; } .project-intro-banner { padding:22px; } .project-reference-image { padding:12px; } .project-reference-sidebar { margin-top:12px; } }
.project-design-details { margin:28px 0 0; }
.project-design-details>div { padding:18px 0; border-top:1px solid #e6eef3; }
.project-design-details dt { color:#18364c; font-weight:700; font-size:16px; margin-bottom:8px; }
.project-design-details dd { margin:0; color:#657c8c; font-size:15px; line-height:1.9; }
.project-color-swatch { display:inline-block; width:18px; height:18px; border-radius:50%; border:1px solid #d4dfe8; margin-right:6px; vertical-align:middle; }
.project-color-swatch.navy { background:#071a2b; }
.project-color-swatch.gold { background:#d1ad39; }
.project-color-swatch.white { background:#fff; }
.project-reference-info .project-detail-actions a.text-link { color:#fff!important; background:#0788b1; border:0; font-weight:700; text-decoration:none; }
.project-reference-info .project-detail-actions a.text-link:hover { color:#fff!important; background:#076b90; }
.project-reference-info .project-detail-actions a.text-link:focus-visible { outline:3px solid #163e59; outline-offset:4px; }
.reference-detail>.container>a.text-link { display:inline-flex; align-items:center; min-height:44px; padding:10px 18px; margin-bottom:24px; color:#174461!important; background:#fff; border:1px solid #86b7d1; border-radius:8px; font-size:16px; font-weight:700; line-height:1.5; box-shadow:0 2px 6px #183d590a; text-decoration:none; }
.reference-detail>.container>a.text-link:hover { color:#fff!important; background:#126f96; border-color:#126f96; }
.reference-detail>.container>a.text-link:focus-visible { outline:3px solid #126f96; outline-offset:4px; }
.portfolio-video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.portfolio-video-card { border:1px solid #d9eaf2; border-radius:10px; overflow:hidden; background:#fff; }
.portfolio-video-play { display:block; position:relative; width:100%; padding:0; border:0; background:#09345b; cursor:pointer; }
.portfolio-video-play img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.portfolio-video-play>span { position:absolute; inset:0; margin:auto; width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:#f8cf28; color:#17394b; font-size:23px; padding-left:3px; }
.portfolio-video-caption { display:flex; align-items:center; justify-content:space-between; padding:18px; gap:12px; }
.portfolio-video-caption h2 { margin:0; font-size:17px; color:#19384b; }
.portfolio-video-caption a { background:#eaf8fd; padding:8px 10px; border-radius:8px; color:#16a7ce; }
.portfolio-video-dialog { width:min(960px,92vw); padding:48px 16px 16px; border:0; border-radius:14px; background:#102034; }
.portfolio-video-dialog::backdrop { background:#06101dcc; }
.portfolio-video-close { position:absolute; top:8px; right:12px; width:32px; height:32px; border:0; border-radius:50%; color:#fff; background:#ffffff20; font-size:25px; cursor:pointer; }
.portfolio-video-player iframe { display:block; width:100%; aspect-ratio:16/9; border:0; }
@media(max-width:800px) { .portfolio-video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .portfolio-video-grid { grid-template-columns:1fr; } }
.portfolio .portfolio-video-card { background:#182d43; border:1px solid #344d65; border-radius:18px; box-shadow:0 10px 28px #05101c1a; }
.portfolio .portfolio-video-caption { background:#182d43; padding:20px; }
.portfolio .portfolio-video-caption h2 { color:#edf5ff!important; font-size:18px; font-weight:600; line-height:1.5; }
.portfolio .portfolio-video-caption a { background:#72d6f21a; border:1px solid #72d6f233; color:#72d6f2!important; }
.portfolio .portfolio-video-caption a:hover { background:#72d6f233; }
.portfolio .portfolio-video-play { background:#102034; }
.portfolio .portfolio-video-play>span { background:#72d6f2; color:#10243b; box-shadow:0 5px 20px #04152740; transition:transform .18s,background .18s; }
.portfolio .portfolio-video-play:hover>span { background:#a0e9fa; transform:scale(1.08); }
.portfolio .portfolio-video-play:focus-visible,.portfolio .portfolio-video-caption a:focus-visible { outline:3px solid #72d6f2; outline-offset:-3px; }