/* Portfolio page | BuiltByMattWells
   Bespoke project gallery; works without JavaScript. */
.portfolio-page { --portfolio-ink:#0b1e31; --portfolio-night:#081624; --portfolio-aqua:#87e9dc; --portfolio-gold:#f2ba59; }
.portfolio-page .site-header { z-index:40; }
.portfolio-hero {
  isolation:isolate; position:relative; overflow:hidden; color:#eef7fa;
  background:radial-gradient(ellipse at 85% 16%,rgba(13,146,151,.24),transparent 38%),
             radial-gradient(ellipse at 8% 86%,rgba(218,151,64,.13),transparent 36%),
             linear-gradient(128deg,#071422 4%,#0d2b42 65%,#091b29);
  padding:clamp(4.1rem,8vw,7.4rem) 0 clamp(4.8rem,8vw,8rem);
}
.portfolio-hero::before{
 content:"";position:absolute;inset:0;z-index:-1;opacity:.2;
 background-image:linear-gradient(rgba(171,224,221,.25) 1px,transparent 1px),
                  linear-gradient(90deg,rgba(171,224,221,.25) 1px,transparent 1px);
 background-size:80px 80px;mask-image:linear-gradient(90deg,transparent 6%,#000 82%);
}
.portfolio-hero::after{
 content:"";position:absolute;right:-9rem;top:5%;width:min(45rem,65vw);aspect-ratio:1;
 border:1px solid rgba(126,224,220,.16);border-radius:50%;z-index:-1;
 box-shadow:0 0 0 5rem rgba(126,224,220,.025),0 0 0 11rem rgba(126,224,220,.017);
}
.portfolio-hero-grid {display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(2.5rem,5vw,6rem);}
.portfolio-hero-copy {position:relative;z-index:2;}
.portfolio-kicker {display:inline-flex;align-items:center;gap:.8rem;margin:0 0 1.35rem;color:#9ef6ea;font-size:.78rem;font-weight:850;text-transform:uppercase;letter-spacing:.15em;}
.portfolio-kicker .signal {display:inline-block;width:.75rem;height:.75rem;background:#b8f4e7;border-radius:50%;box-shadow:0 0 0 .3rem rgba(184,244,231,.14);}
.portfolio-hero h1{color:white;max-width:11ch;margin:0;font-size:clamp(3.25rem,6.5vw,6.55rem);font-weight:850;letter-spacing:-.067em;line-height:1.02;}
.portfolio-hero h1 em {color:var(--portfolio-gold);font-family:Georgia,serif;font-weight:500;letter-spacing:-.055em;}
.portfolio-lead{max-width:47ch;margin:1.65rem 0 0;color:#d3e4ec;font-size:clamp(1.12rem,1.65vw,1.27rem);line-height:1.68;}
.portfolio-hero .button-row{margin-top:2rem;}
.portfolio-hero .button-secondary{border-color:#a4c4d2;}
.portfolio-hero-proof{display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;margin-top:2.75rem;padding-top:1.4rem;border-top:1px solid rgba(221,248,245,.2);}
.portfolio-hero-proof>div{display:grid;gap:.1rem;}
.portfolio-hero-proof strong{color:#fff;font-size:1.6rem;line-height:1.1;}
.portfolio-hero-proof span{color:#b8d1dc;font-size:.82rem;letter-spacing:.02em;}
.portfolio-stage {position:relative;min-height:32rem;perspective:900px;display:grid;place-items:center;}
.stage-browser {position:absolute;border:1px solid rgba(255,255,255,.2);border-radius:1.15rem;overflow:hidden;box-shadow:0 32px 75px rgba(0,0,0,.45);}
.stage-browser .stage-top{height:2rem;display:flex;align-items:center;gap:.36rem;padding:.65rem .9rem;background:#f0eee6;color:#4f5d60;font-size:.58rem;font-weight:800;letter-spacing:.04em;}
.stage-top i{display:block;width:.45rem;height:.45rem;border-radius:50%;background:#b8b6aa;}
.stage-top span{margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stage-browser.stage-vfw {z-index:2;width:77%;left:3%;top:8%;transform:rotate(-5deg);}
.stage-browser.stage-personal {z-index:3;width:65%;right:0;top:29%;transform:rotate(8deg);}
.stage-browser.stage-craft {z-index:4;width:62%;left:0;bottom:0;transform:rotate(2deg);}
.stage-content{display:flex;min-height:12.5rem;flex-direction:column;justify-content:center;padding:1.75rem;position:relative;overflow:hidden;}
.stage-vfw .stage-content{background:linear-gradient(150deg,#0e3150,#0a1f33);color:#f7e4a7;}
.stage-personal .stage-content{background:radial-gradient(circle at 82% 80%,#688d76,transparent 55%),#eef0e4;color:#244737;text-align:center;}
.stage-craft .stage-content{min-height:10rem;background:repeating-linear-gradient(110deg,rgba(155,104,49,.1) 0 3px,transparent 3px 12px),#ede1c8;color:#29452c;}
.stage-content small{font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;font-weight:850;}
.stage-content strong{max-width:14ch;margin:.8rem 0;font-size:clamp(1.4rem,3.1vw,2.2rem);line-height:1.05;letter-spacing:-.045em;}
.stage-personal .stage-content strong{max-width:none;font:500 clamp(1.75rem,4vw,3.1rem)/1.1 Georgia,serif;}
.stage-craft .stage-content strong{font-family:Georgia,serif;font-weight:500;}
.stage-content b{display:block;width:3.5rem;height:.25rem;margin-top:.6rem;background:#f2ba59;}
.stage-content .stage-ring{position:absolute;width:10rem;height:10rem;border:1.4rem solid rgba(251,246,220,.08);border-radius:50%;right:-2.5rem;bottom:-3.5rem;}
.portfolio-mini-breadcrumb{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.5rem;color:#c5dbe4;font-size:.88rem;}
.portfolio-mini-breadcrumb a{color:#c5dbe4;}
.portfolio-mini-breadcrumb span{color:#86efe0;}
.portfolio-directory{padding:clamp(4.1rem,7vw,6.2rem) 0 6rem;background:#f4f6f4;}
.portfolio-section-intro{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:1.8rem;}
.portfolio-section-intro h2{max-width:20ch;margin:.35rem 0 0;font-size:clamp(2.2rem,4vw,3.9rem);letter-spacing:-.05em;}
.portfolio-section-intro p:last-child{max-width:34ch;margin:0;color:#495e69;}
.portfolio-filter-area{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2rem;padding:1rem 0;border-block:1px solid #ccd8db;}
.portfolio-filters{display:flex;flex-wrap:wrap;gap:.45rem;}
.portfolio-filter{cursor:pointer;min-height:2.85rem;padding:.55rem 1rem;border:1.5px solid #a3b7c2;border-radius:99px;background:#fff;color:#173045;font-size:.88rem;font-weight:800;}
.portfolio-filter:hover{border-color:#124a56;background:#e8f5f2;}
.portfolio-filter[aria-pressed="true"]{background:#0d3046;border-color:#0d3046;color:#fff;}
.portfolio-count{min-height:1.5rem;font-size:.87rem;font-weight:750;color:#455c67;}
.portfolio-project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem;align-items:stretch;}
.portfolio-project{--card-accent:#0b6570;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #d5e1e3;border-radius:1.25rem;overflow:hidden;box-shadow:0 10px 28px rgba(6,26,34,.055);transition:transform 220ms ease,box-shadow 220ms ease;}
.portfolio-project:hover{transform:translateY(-5px);box-shadow:0 22px 54px rgba(6,26,34,.12);}
.portfolio-project[hidden]{display:none!important;}
.portfolio-project.featured{grid-column:span 1;}
.portfolio-project-header{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin:0 0 .7rem;}
.portfolio-number{font-size:.76rem;font-weight:900;letter-spacing:.11em;color:#596e7d;}
.portfolio-status{display:inline-flex;align-items:center;gap:.45rem;padding:.27rem .63rem;background:#eef3f5;color:#30536a;border-radius:99px;font-size:.7rem;font-weight:850;letter-spacing:.025em;text-transform:uppercase;}
.portfolio-status.live{background:#d9f5e7;color:#135b36;}
.portfolio-status.live::before{content:"";display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:#168353;}
.portfolio-thumb{position:relative;min-height:16.6rem;overflow:hidden;background:#d4e2e6;}
.portfolio-project.featured .portfolio-thumb{min-height:19rem;}
.portfolio-browser{position:relative;display:flex;align-items:center;gap:.35rem;height:2.15rem;padding:0 .95rem;background:#fafafa;color:#64767d;border-bottom:1px solid rgba(28,46,56,.13);}
.portfolio-browser i{width:.43rem;height:.43rem;background:#a4afb5;border-radius:50%;}
.portfolio-browser span{margin:auto;font-size:.68rem;font-weight:650;letter-spacing:.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.portfolio-preview{position:absolute;inset:2.15rem 0 0;overflow:hidden;padding:1.6rem 1.9rem;}
.portfolio-preview .preview-nav{display:flex;align-items:center;gap:.6rem;font-size:.6rem;line-height:1.2;letter-spacing:.09em;text-transform:uppercase;font-weight:850;}
.portfolio-preview .preview-nav b{margin-right:auto;font-weight:950;letter-spacing:-.015em;font-size:.85rem;}
.portfolio-preview .preview-nav span{opacity:.7;}
.portfolio-preview .preview-big{display:block;position:relative;z-index:2;max-width:16ch;margin:1.7rem 0 .4rem;font-size:clamp(1.65rem,3vw,2.7rem);font-weight:850;line-height:1.04;letter-spacing:-.05em;}
.portfolio-preview .preview-sub{display:block;position:relative;z-index:2;max-width:38ch;font-size:.78rem;line-height:1.5;}
.portfolio-preview .preview-badge{display:inline-block;position:relative;z-index:2;margin-top:1.15rem;padding:.43rem .75rem;font-size:.62rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;border:1px solid currentColor;border-radius:.2rem;}
.preview-vfw{color:#fff;background:linear-gradient(138deg,#052b4c,#14436a);}
.preview-vfw::after{content:"7824";position:absolute;right:-.2rem;bottom:-2.6rem;color:rgba(255,255,255,.08);font-size:11rem;line-height:1;font-weight:950;}
.preview-vfw .preview-nav b{color:#ffe5a4;}
.preview-vfw .preview-badge{color:#ffe1a0;}
.preview-dept{color:#fff;background:radial-gradient(circle at 90% 100%,#447f75,transparent 48%),linear-gradient(125deg,#102c44,#0a334d);}
.preview-dept::after{content:"WA";position:absolute;right:.3rem;bottom:-2rem;color:rgba(255,255,255,.075);font-size:11rem;line-height:1;font-weight:950;}
.preview-dept .preview-nav b{color:#f2d392;}
.preview-dept .preview-badge{color:#f2d392;}
.preview-district{color:#fff;background:linear-gradient(145deg,#133f60,#13365a 65%,#165347);}
.preview-district::after{content:"06";position:absolute;right:.8rem;bottom:-2.4rem;color:rgba(242,186,89,.15);font-size:10rem;font-weight:950;line-height:1;}
.preview-district .preview-nav b{color:#efce7d;}
.preview-district .preview-badge{color:#c7e1b5;}
.preview-alex{color:#244132;background:radial-gradient(circle at 75% 67%,rgba(130,163,123,.5),transparent 33%),linear-gradient(110deg,#eeecdb,#cedbc7);}
.preview-alex::after{content:"✦";position:absolute;right:8%;bottom:-5rem;font-size:18rem;color:rgba(40,84,61,.12);}
.preview-alex .preview-nav b{font-family:Georgia,serif;font-size:1.05rem;}
.preview-alex .preview-big{font-family:Georgia,serif;font-weight:500;max-width:19ch;font-size:clamp(2rem,3.5vw,3.2rem);letter-spacing:-.055em;}
.preview-alex .preview-badge{color:#356047;}
.preview-schwab{color:#f9f0d5;background:radial-gradient(circle at 80% 50%,#537052,transparent 45%),linear-gradient(120deg,#233c2d,#172b23);}
.preview-schwab::after{content:"";position:absolute;right:-2rem;bottom:-6.5rem;width:18rem;height:18rem;border:2.2rem solid rgba(232,200,130,.13);border-radius:50%;}
.preview-schwab .preview-nav b{color:#ecce94;}
.preview-schwab .preview-big{font-family:Georgia,serif;font-weight:600;}
.preview-craft{color:#234532;background:repeating-linear-gradient(10deg,rgba(122,76,35,.04) 0 2px,transparent 2px 15px),#efe1c9;}
.preview-craft::after{content:"";position:absolute;right:-3rem;bottom:-7rem;width:18rem;height:18rem;border:3rem solid rgba(102,62,29,.1);transform:rotate(24deg);border-radius:30%;}
.preview-craft .preview-nav b{color:#8c293b;font-family:Georgia,serif;}
.preview-craft .preview-big{font-family:Georgia,serif;font-weight:500;}
.preview-craft .preview-badge{color:#8c293b;}
.preview-cms{color:#e2f0f7;background:#132438;}
.preview-cms .preview-nav b{color:#90e5de;}
.preview-cms .cms-rows{display:grid;grid-template-columns:.55fr 1fr;gap:.45rem;position:absolute;bottom:1.3rem;right:1.3rem;width:42%;height:8rem;opacity:.8;}
.preview-cms .cms-rows i{display:block;border:1px solid #436780;background:#29455b;border-radius:.35rem;}
.preview-cms .cms-rows i:nth-child(3n){background:#236e77;}
.preview-cms .preview-big{max-width:11ch;}
.preview-studio{color:#fff;background:radial-gradient(circle at 78% 63%,#16887e,transparent 43%),linear-gradient(120deg,#0a1e30,#123954);}
.preview-studio::after{content:"</>";position:absolute;right:1.1rem;bottom:-1.5rem;font-size:9.5rem;font-weight:900;letter-spacing:-.13em;color:rgba(255,255,255,.1);}
.preview-studio .preview-nav b{color:#f9c472;}
.portfolio-card-content{display:flex;flex:1;flex-direction:column;padding:1.65rem 1.7rem 1.55rem;}
.portfolio-category{margin:0 0 .35rem;color:#0b6871;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;font-weight:900;}
.portfolio-card-content h3{margin:.2rem 0 .85rem;font-size:clamp(1.5rem,2.2vw,2.05rem);letter-spacing:-.035em;}
.portfolio-description{margin:0 0 1.15rem;color:#3e5562;font-size:.99rem;line-height:1.65;}
.portfolio-tags{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0 0 1.6rem;padding:0;}
.portfolio-tags li{display:inline-flex;padding:.25rem .6rem;font-size:.74rem;font-weight:750;color:#29495b;background:#edf3f6;border-radius:100px;line-height:1.45;}
.portfolio-card-footer{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;margin-top:auto;padding-top:1rem;border-top:1px solid #dce5e8;}
.portfolio-card-link{display:inline-flex;align-items:center;gap:.45rem;font-weight:850;text-decoration:none;color:#0b5767;line-height:1.5;}
.portfolio-card-link:hover{text-decoration:underline;}
.portfolio-card-note{font-size:.75rem;color:#667985;font-weight:700;}
.portfolio-breakdown{padding:5rem 0;background:#fff;}
.portfolio-breakdown-heading{max-width:47rem;}
.portfolio-breakdown h2{margin:.25rem 0 1rem;font-size:clamp(2rem,4vw,3.1rem);}
.portfolio-breakdown-heading>p:last-child{color:#475f6c;}
.portfolio-breakdown-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem;margin-top:2.3rem;}
.portfolio-method{position:relative;padding:1.6rem;border:1px solid #d4e0e4;border-radius:1rem;background:#f8faf9;}
.portfolio-method>span{font-size:.82rem;font-weight:900;color:#0a7981;}
.portfolio-method h3{font-size:1.32rem;margin:1rem 0 .5rem;}
.portfolio-method p{margin:0;color:#4c616d;line-height:1.65;}
.portfolio-page .contact-cta{background:#e1eeec;}
@media(max-width:67rem){.portfolio-stage{min-height:28rem}.portfolio-hero-grid{grid-template-columns:1fr 1fr;gap:2rem}.portfolio-hero h1{font-size:clamp(3.2rem,6vw,5.4rem)}}
@media(max-width:53rem){.portfolio-hero-grid{grid-template-columns:1fr}.portfolio-hero h1{max-width:14ch}.portfolio-stage{min-height:27rem;max-width:39rem;width:100%;margin-inline:auto}.portfolio-section-intro{align-items:start;flex-direction:column}.portfolio-section-intro p:last-child{max-width:50ch}}
@media(max-width:43rem){.portfolio-project-grid,.portfolio-breakdown-grid{grid-template-columns:1fr}.portfolio-project.featured{grid-column:auto}.portfolio-thumb{min-height:17rem}.portfolio-filter-area{align-items:start;flex-direction:column}.portfolio-filters{gap:.4rem}.portfolio-filter{padding:.5rem .75rem;font-size:.8rem}.portfolio-card-content{padding:1.35rem}.portfolio-hero{padding-bottom:3rem}.portfolio-stage{min-height:21rem}.stage-browser.stage-vfw{width:76%}.stage-browser.stage-personal{width:61%;}.stage-browser.stage-craft{width:68%;}.stage-content{min-height:9rem;padding:1rem}.stage-content strong{font-size:1.2rem}.stage-personal .stage-content strong{font-size:1.5rem}.portfolio-hero-proof{gap:1.1rem 2rem}}
@media(prefers-reduced-motion:reduce){.portfolio-project{transition:none}.portfolio-project:hover{transform:none}}
@media(forced-colors:active){.portfolio-filter[aria-pressed="true"]{border:3px solid Highlight}.portfolio-project{border:2px solid CanvasText}.portfolio-status.live::before{border:1px solid CanvasText}}
@media print{.portfolio-stage,.portfolio-filter-area,.portfolio-hero::before,.portfolio-hero::after{display:none!important}.portfolio-hero{padding:1rem 0}.portfolio-hero,.portfolio-directory,.portfolio-breakdown{background:#fff;color:#000}.portfolio-hero h1,.portfolio-hero h1 em,.portfolio-lead,.portfolio-kicker,.portfolio-card-content h3{color:#000}.portfolio-project-grid{grid-template-columns:1fr 1fr;gap:.8rem}.portfolio-project{box-shadow:none;break-inside:avoid}.portfolio-thumb{min-height:9rem}.portfolio-preview{padding:1rem}.portfolio-preview .preview-big{font-size:1.25rem}.portfolio-preview .preview-nav,.portfolio-preview .preview-sub,.portfolio-preview .preview-badge{display:none}.portfolio-breakdown{padding:1rem 0}}

/* Accessible helper and clearly visible focus on light/dark surfaces. */
.portfolio-page .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.portfolio-page .portfolio-directory :focus-visible,.portfolio-page .portfolio-breakdown :focus-visible{outline:3px solid #064b57;outline-offset:4px;box-shadow:0 0 0 2px #fff}
.portfolio-page .portfolio-hero :focus-visible{outline:3px solid #f2ba59;outline-offset:4px}

/* Filtering is an enhancement: without JS, display every project and no inert controls. */
.portfolio-page:not(.portfolio-filters-ready) .portfolio-filters{display:none}
.portfolio-visual-note{margin:1.5rem 0 0;color:#576b76;font-size:.83rem;line-height:1.6}

/* Genuine portfolio page captures and per-project galleries. */
.portfolio-project .portfolio-thumb-photo{position:relative;min-height:clamp(17rem,27vw,25rem);overflow:hidden;background:linear-gradient(125deg,#112c40,#365e67);}
.portfolio-project .portfolio-thumb-link{display:block;position:absolute;inset:0;text-decoration:none;color:#fff;overflow:hidden}
.portfolio-real-shot{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .35s ease;filter:saturate(.95)}
.portfolio-thumb-link:hover .portfolio-real-shot{transform:scale(1.045)}
.portfolio-screenshot-top{position:absolute;inset:0 0 auto 0;display:flex;align-items:center;gap:.36rem;height:2rem;padding:0 1rem;background:rgba(5,17,28,.85);font-size:.75rem}
.portfolio-screenshot-top>span,.project-browser-top>span{width:.46rem;height:.46rem;border-radius:50%;background:#e6b6a6;flex:none}
.portfolio-screenshot-top>span:nth-child(2),.project-browser-top>span:nth-child(2){background:#efd98a}
.portfolio-screenshot-top>span:nth-child(3),.project-browser-top>span:nth-child(3){background:#b5dfc8}
.portfolio-screenshot-top b{margin-left:auto;font-size:.67rem;font-weight:700;color:#e7f3f1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.portfolio-logo-stamps{position:absolute;left:1rem;top:3rem;display:flex;align-items:center;gap:.65rem;max-width:85%;pointer-events:none;}
.portfolio-brand-stamp{display:block;max-width:clamp(6rem,12vw,9rem);max-height:4.5rem;object-fit:contain;padding:.4rem;border-radius:.7rem;background:#fffdf6;box-shadow:0 6px 23px rgba(0,0,0,.25)}
.portfolio-brand-stamp.secondary{max-width:7rem}
.portfolio-view-overlay{position:absolute;inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.4rem;color:#fff;background:linear-gradient(0deg,rgba(5,24,35,.95),rgba(5,24,35,.72));font-size:1rem;font-weight:900}
.portfolio-view-overlay span{font-size:1.4rem}
.portfolio-page .portfolio-project h3 a{color:inherit;text-decoration:none}
.portfolio-page .portfolio-project h3 a:hover{text-decoration:underline;text-underline-offset:.14em}
.portfolio-gallery-link{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;font-size:.87rem;font-weight:900;color:#125062;line-height:1.5}
.portfolio-gallery-link:hover{text-decoration:underline}
.portfolio-project .portfolio-card-footer{justify-content:flex-start}
.portfolio-project .portfolio-card-footer .portfolio-card-note{margin-left:auto}
.portfolio-page .portfolio-thumb-link:focus-visible{outline:4px solid #f2ba59;outline-offset:-5px;z-index:2}
.project-detail-hero{overflow:hidden;background:radial-gradient(circle at 90% 2%,#1f5362 0,transparent 40%),linear-gradient(145deg,#071725,#123a50);color:#f2f8fb;padding:clamp(3rem,6vw,5.4rem) 0}
.project-detail-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:clamp(2rem,5vw,5rem)}
.project-detail-copy h1{color:#fff;font-size:clamp(2.55rem,5vw,4.75rem);line-height:1.06;letter-spacing:-.05em;margin:.65rem 0 1.2rem}
.project-overline{color:#9cf4e0;text-transform:uppercase;letter-spacing:.11em;font-weight:850;font-size:.8rem}
.project-overline span{color:#eabb6a;margin-right:.45rem}
.project-detail-lead{color:#d9e7ee;font-size:clamp(1.07rem,1.5vw,1.23rem);line-height:1.7;max-width:48ch}
.project-detail-status{display:inline-flex;align-items:center;gap:.6rem;color:#e3f4eb;font-size:.87rem;font-weight:800;border:1px solid rgba(200,255,237,.3);padding:.45rem .8rem;border-radius:100px;background:rgba(22,91,91,.38)}
.project-detail-status span{color:#87ead0}
.project-detail-copy .button-row{margin:1.65rem 0}
.project-detail-copy .button-secondary,.project-detail-page .project-back{border-color:#afd5df;color:#f9ffff}
.project-identity{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.8rem}
.project-identity img{display:block;max-height:7.4rem;max-width:min(13rem,45%);width:auto;height:auto;object-fit:contain;padding:.7rem;border-radius:.85rem;background:#fffdf4;box-shadow:0 10px 24px rgba(0,0,0,.15)}
.project-detail-cover{overflow:hidden;border-radius:1.2rem;background:#e6f0ef;border:1px solid rgba(255,255,255,.21);box-shadow:0 30px 70px rgba(0,0,0,.42);transform:rotate(1.2deg)}
.project-detail-cover a{display:block}
.project-detail-cover img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.project-browser-top{height:2.4rem;background:#e8ebe9;color:#314c52;display:flex;align-items:center;gap:.4rem;padding:.4rem 1rem;font-size:.75rem}
.project-browser-top b{margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-gallery-section{padding:clamp(3.5rem,6vw,6rem) 0;background:#f4f7f7;color:#0b2635}
.project-gallery-heading{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:1.2rem}
.project-gallery-heading h2{font-size:clamp(2rem,4vw,3.1rem);margin:.1rem 0 0;letter-spacing:-.045em}
.project-gallery-heading>p{color:#48616e;max-width:42ch;line-height:1.7}
.project-page-tags{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 2.3rem;padding:0}
.project-page-tags li{background:#e5eeec;color:#214c50;border:1px solid #c8dcdb;border-radius:99px;padding:.33rem .82rem;font-weight:750;font-size:.78rem}
.project-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,3vw,1.8rem)}
.project-gallery-item{margin:0;min-width:0;border:1px solid #d1e0e2;border-radius:1.1rem;overflow:hidden;background:#fff;box-shadow:0 13px 40px rgba(13,47,62,.07)}
.project-gallery-feature{grid-column:span 2}
.project-image-link{position:relative;display:block;background:#d9e6e5;overflow:hidden}
.project-image-link img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .3s ease}
.project-gallery-feature .project-image-link img{aspect-ratio:16/7;object-fit:cover;object-position:top}
.project-image-link:hover img{transform:scale(1.02)}
.project-image-action{position:absolute;right:1rem;bottom:1rem;background:#0b2d3e;color:#fff;border-radius:100px;padding:.65rem 1rem;font-size:.76rem;font-weight:900;box-shadow:0 5px 12px rgba(0,0,0,.2)}
.project-gallery-item figcaption{padding:1.3rem 1.45rem 1.6rem}
.project-caption-title{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:.5rem}
.project-gallery-item h3{font-size:1.2rem;margin:0;color:#102f40}
.project-preview-pill{font-size:.7rem;font-weight:800;padding:.3rem .65rem;border-radius:50px;color:#614915;background:#fcf0d4}
.project-gallery-item figcaption p{margin:.55rem 0 1rem;color:#546b75;line-height:1.6}
.project-caption-links{display:flex;flex-wrap:wrap;gap:.7rem 1.3rem}
.project-caption-links a{color:#0b5662;font-weight:850;font-size:.86rem;text-decoration:none}
.project-caption-links a:hover{text-decoration:underline}
.project-next-links{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:3rem}
.project-next-links .project-back{background:#102e40;border-color:#102e40}
.project-next-link{text-decoration:none;font-weight:850;color:#0d5362}
.project-next-link:hover{text-decoration:underline}
.project-lightbox{border:0;padding:0;max-width:min(94vw,1150px);max-height:95vh;width:100%;border-radius:1rem;color:#143243;background:#f7faf9;box-shadow:0 25px 80px rgba(0,0,0,.35)}
.project-lightbox::backdrop{background:rgba(4,14,23,.86)}
.project-lightbox-inner{display:flex;flex-direction:column;max-height:94vh}
.project-lightbox-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.2rem;background:#092b3b;color:#fff}
.project-lightbox-bar button{border:1px solid #afccd4;border-radius:.5rem;padding:.55rem .8rem;background:#14485b;color:#fff;cursor:pointer}
.project-lightbox-visual{overflow:auto;min-height:0;text-align:center;background:#e3eaec}
.project-lightbox-visual img{width:100%;height:auto;display:block}
.project-lightbox-bottom{padding:.8rem 1.2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.project-lightbox-bottom p{margin:0;font-weight:850}
.project-lightbox-actions{display:flex;flex-wrap:wrap;gap:.55rem}
.project-lightbox-actions button,.project-lightbox-actions a{border:1px solid #a1bdc6;color:#124856;background:#fff;border-radius:.4rem;padding:.55rem .7rem;font-size:.85rem;font-weight:850;cursor:pointer;text-decoration:none}
.project-detail-page :focus-visible{outline:3px solid #f2ba59;outline-offset:4px}
@media(max-width:60rem){.project-detail-hero-grid{grid-template-columns:1fr}.project-detail-cover{max-width:44rem;transform:none}.project-gallery-heading{align-items:start;flex-direction:column}}
@media(max-width:42rem){.project-gallery-grid{grid-template-columns:1fr}.project-gallery-feature{grid-column:auto}.project-gallery-feature .project-image-link img{aspect-ratio:16/10}.project-gallery-item figcaption{padding:1rem}.project-detail-hero{padding:2.5rem 0}.portfolio-logo-stamps{top:2.5rem}.project-lightbox-actions{justify-content:center}.project-detail-cover{max-width:100%}}
@media(prefers-reduced-motion:reduce){.portfolio-real-shot,.project-image-link img{transition:none}.portfolio-thumb-link:hover .portfolio-real-shot,.project-image-link:hover img{transform:none}}
@media print{.project-lightbox,.project-image-action,.portfolio-view-overlay{display:none!important}.project-detail-hero{background:#fff;color:#000;padding:1rem 0}.project-detail-hero h1,.project-detail-lead,.project-overline{color:#000}.project-detail-hero-grid{display:block}.project-gallery-item{break-inside:avoid;box-shadow:none}.project-gallery-item figcaption{padding:.8rem}.project-gallery-section{padding:1rem 0}}