.portfolio-page { background:#f6f5ef; color:#173c35; }
.portfolio-page .detail-header nav a[aria-current="page"] { color:#12685c; text-decoration:underline; text-underline-offset:.45em; }
.project-portfolio { max-width:1600px; margin:auto; padding:clamp(14px,2.8vw,48px) 4vw clamp(48px,7vw,100px); }
.project-portfolio :is(h1,h2), .folio-viewer h2 { font-family:Manrope,sans-serif; letter-spacing:-.055em; line-height:1.06; text-transform:none; }
.project-portfolio :is(button,a),.folio-viewer :is(button,summary) { -webkit-tap-highlight-color:transparent; }
.project-portfolio :focus-visible,.folio-viewer :focus-visible { outline:3px solid #45a693; outline-offset:4px; }
.project-portfolio [hidden] { display:none; }
.folio-hero { position:relative; isolation:isolate; display:grid; align-items:end; min-height:clamp(310px,32vw,480px); overflow:hidden; border-radius:12px; background:#103c35; color:white; }
.folio-hero > img,.folio-hero::after { position:absolute; inset:0; width:100%; height:100%; z-index:-1; }
.folio-hero > img { object-fit:cover; object-position:center 52%; }
.folio-hero::after { content:""; background:linear-gradient(94deg,rgba(9,38,32,.95),rgba(9,38,32,.76) 36%,rgba(9,38,32,.04) 90%),linear-gradient(0deg,rgba(10,35,29,.29),transparent 52%); }
.folio-hero-copy { padding:clamp(26px,4.6vw,74px); max-width:680px; }
.folio-hero h1 { margin:0; font-size:clamp(48px,6.8vw,100px); font-weight:500; color:white; }
.folio-hero h1 em,.folio-workshop h2 em { font-style:normal; color:#c3e3d2; }
.folio-hero p { color:#edf5ef; font-size:clamp(16px,1.3vw,21px); line-height:1.55; margin:18px 0 24px; max-width:42ch; }
.folio-hero a { display:inline-flex; align-items:center; gap:20px; border-bottom:1px solid #a4c6b6; padding:6px 0; color:white; font-weight:650; }
.folio-archive { padding:clamp(40px,5vw,80px) 0; scroll-margin-top:130px; }
.folio-intro { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.folio-intro h2,.folio-workshop h2 { font-size:clamp(31px,3.8vw,58px); font-weight:550; margin:0; }
#folio-count { color:#416357; font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.folio-controls { padding:18px 0 22px; }
.folio-filters { display:flex; flex-wrap:wrap; gap:7px; }
.folio-filters button,.folio-more { font:650 14px/1.4 Manrope,sans-serif; border:1px solid #b7ccc2; background:transparent; color:#174c42; padding:10px 16px; border-radius:30px; cursor:pointer; }
.folio-filters button[aria-pressed="true"],.folio-more:hover { background:#12685c; border-color:#12685c; color:white; }
.folio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,36px) clamp(12px,1.5vw,24px); }
.folio-card { min-width:0; margin:0; }
.folio-card a { display:block; color:inherit; text-decoration:none; }
.folio-shot { position:relative; overflow:hidden; aspect-ratio:1.56; background:#d4ded4; border-radius:7px; }
.folio-shot img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.folio-shot > span { position:absolute; right:10px; bottom:10px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#f5f6eeef; color:#174b41; font:22px/1 sans-serif; }
.folio-card a:is(:hover,:focus-visible) img { transform:scale(1.045); }
.folio-card figcaption { display:grid; gap:3px; padding:9px 1px 0; }
.folio-card figcaption span,.folio-category { font-size:13px; color:#466a5d; }
.folio-card figcaption strong { font:650 clamp(16px,1.35vw,21px)/1.3 Manrope,sans-serif; letter-spacing:-.025em; }
.folio-more { display:block; margin:28px auto 0; }
.folio-more span { margin-inline-start:12px; }
.folio-workshop { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:clamp(24px,5vw,80px); background:#144e43; color:white; padding:clamp(24px,3.6vw,55px); border-radius:12px; }
.folio-workshop h2 { color:white; }
.folio-workshop p { max-width:35ch; color:#d8e8dc; margin:16px 0 0; line-height:1.6; }
.folio-workshop video { display:block; width:100%; border-radius:6px; aspect-ratio:16/9; background:#122b26; object-fit:contain; }
body:has(.folio-viewer[open]) { overflow:hidden; }
.folio-viewer { box-sizing:border-box; padding:0; border:1px solid #648174; border-radius:12px; width:min(1100px,95vw); max-width:95vw; max-height:95dvh; margin:auto; background:#102e27; color:white; overflow:auto; }
.folio-viewer::backdrop { background:#071912e6; }
.folio-viewer-toolbar,.folio-viewer-foot { padding:12px clamp(14px,2vw,28px); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.folio-viewer-counter { font-variant-numeric:tabular-nums; }
.folio-viewer button { background:#213e35; color:white; border:1px solid #688276; border-radius:24px; font:600 14px/1.2 Manrope,sans-serif; padding:9px 16px; cursor:pointer; }
.folio-frame { display:grid; grid-template-columns:50px minmax(0,1fr) 50px; align-items:center; justify-items:center; background:#0b211c; touch-action:pan-y; }
.folio-frame img { width:100%; height:min(61dvh,690px); object-fit:contain; }
.folio-frame button { padding:0; height:40px; width:40px; font-size:20px; }
.folio-viewer-foot { align-items:flex-start; }
.folio-viewer-foot h2 { font-size:clamp(20px,2.4vw,32px); margin:4px 0; color:#fff; }
.folio-category { color:#bdd5c6; }
.folio-viewer details { max-width:52ch; color:#eff5f0; }
.folio-viewer summary { cursor:pointer; padding:5px; font-weight:600; }
.folio-scope p { margin:8px 0; line-height:1.55; }
.folio-scope a { color:#b7e7d2; text-decoration:underline; }
@media(max-width:850px) {
 .folio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .folio-viewer-foot { flex-direction:column; gap:8px; }
}
@media(max-width:600px) {
 .project-portfolio { padding-inline:16px; }
 .folio-hero { min-height:300px; }
 .folio-hero-copy { padding:23px; }
 .folio-hero::after { background:linear-gradient(40deg,rgba(9,38,32,.94),rgba(9,38,32,.68) 65%,rgba(9,38,32,.23)); }
 .folio-filters { gap:5px; }
 .folio-filters button { padding:8px 12px; font-size:13px; }
 .folio-shot { aspect-ratio:1.15; }
 .folio-card figcaption strong { font-size:15px; }
 .folio-card figcaption span { font-size:12px; }
 .folio-workshop { grid-template-columns:1fr; }
 .folio-frame { grid-template-columns:38px minmax(0,1fr) 38px; }
 .folio-frame button { width:34px; height:40px; }
}
@media(prefers-reduced-motion:reduce) { .folio-shot img { transition:none; } }
.folio-hero .folio-hero-detail { position:absolute; right:clamp(18px,3vw,48px); bottom:clamp(20px,3vw,46px); display:inline-flex; align-items:center; gap:9px; border:1px solid #c6ddcf85; border-radius:30px; background:#10352ce6; padding:9px 13px; font-size:14px; color:#fff; }
.folio-hero-detail span { font-size:18px; line-height:1; color:#b6e8d1; }
.folio-photo-plane { position:relative; width:100%; }
.folio-photo-plane img { display:block; }
.folio-viewer .folio-pin { position:absolute; transform:translate(-50%,-50%); display:grid; place-items:center; padding:0; width:36px; height:36px; border-radius:50%; background:#d5f2dd; color:#174d40; border:2px solid white; box-shadow:0 0 0 5px #123a3099; font:600 23px/1 Manrope,sans-serif; }
.folio-viewer .folio-pin[aria-expanded="true"] span { transform:rotate(45deg); }
.folio-viewer [hidden] { display:none; }
#folio-pin-note { padding:14px clamp(14px,2vw,28px); margin:0; background:#dceddc; color:#173c35; line-height:1.55; }
@media(max-width:800px) {
 .folio-hero { align-content:end; }
 .folio-hero .folio-hero-detail { position:static; justify-self:start; margin:-6px 0 25px clamp(23px,4.6vw,74px); }
}
.folio-filters { position:relative; isolation:isolate; }
.folio-filters.with-indicator::before { content:""; position:absolute; top:0; left:0; z-index:-1; pointer-events:none; width:var(--active-w); height:var(--active-h); transform:translate(var(--active-x), var(--active-y)); background:#cce7d9; border-radius:30px; transition:transform .32s cubic-bezier(.22,1,.36,1),width .32s ease,height .32s ease; }
.folio-filters.with-indicator button { background:transparent; color:#16493e; transition:border-color .24s ease,color .24s ease; }
.folio-filters.with-indicator button[aria-pressed="true"] { border-color:#729b87; color:#10392f; }
.folio-filters button:hover { border-color:#649683; }
.folio-filter-story { margin:14px 0 0; padding-left:13px; border-left:2px solid #78a890; display:flex; flex-wrap:wrap; gap:5px 16px; align-items:baseline; color:#385d50; font-size:15px; line-height:1.5; }
.folio-filter-story p { margin:0; }
.folio-filter-story a,.folio-service a { font-weight:650; text-underline-offset:.25em; text-decoration:underline; }
.folio-filter-story a { color:#12685c; }
.folio-frame { overflow:hidden; }
.folio-photo-plane { overflow:hidden; }
.folio-previous-image { position:absolute; inset:0; pointer-events:none; }
.folio-previous-image + .folio-pin { z-index:1; }
.folio-viewer .folio-viewer-foot { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:14px 28px; padding-block:16px 20px; }
.folio-photo-story { margin:8px 0 0; max-width:72ch; font-size:clamp(15px,1.2vw,17px); line-height:1.55; color:#e1eee5; }
.folio-viewer #folio-pin-note { margin:10px 0 0; border-left:2px solid #8bc0a5; padding:2px 0 2px 12px; color:#c9e3d4; background:transparent; font-size:14px; }
.folio-service a { display:inline-block; margin:2px 0; padding:7px 0; color:#bfebd3; white-space:normal; }
.folio-viewer .folio-frame img { height:min(54dvh,660px); }
.folio-viewer button { transition:background .2s,border-color .2s; }
.folio-viewer button:is(:hover,:focus-visible):not(.folio-pin) { background:#34624f; border-color:#b0cfbc; }
.folio-pin span { transition:transform .24s ease; }
@media(max-width:760px) {
 .folio-viewer .folio-viewer-foot { grid-template-columns:1fr; gap:6px; }
 .folio-viewer .folio-frame img { height:min(45dvh,500px); }
 .folio-service a { padding-block:6px; }
}
@media(prefers-reduced-motion:no-preference) {
 .folio-viewer[open] { animation:folio-open .32s cubic-bezier(.22,1,.36,1); }
 .folio-viewer[open]::backdrop { animation:folio-shade .26s ease; }
 @keyframes folio-open { from { opacity:0;transform:translateY(12px) scale(.975); } to { opacity:1;transform:none; } }
 @keyframes folio-shade { from { opacity:0; } to { opacity:1; } }
}
@media(prefers-reduced-motion:reduce) {
 .folio-filters.with-indicator::before,.folio-filters.with-indicator button,.folio-viewer button,.folio-pin span { transition:none; }
}