:root {
  --portfolio-navy: #0b1b3b;
  --portfolio-blue: #1769e8;
  --portfolio-gold: #ffca24;
  --portfolio-cream: #fff9ed;
  --portfolio-pale: #f4f8fc;
  --portfolio-muted: #587092;
  --portfolio-border: #e3eaf3;
}
.portfolio-page { color:var(--portfolio-navy); background:var(--portfolio-pale); }
.portfolio-container { width:min(1320px, calc(100% - 40px)); margin-inline:auto; }
.portfolio-hero { position:relative; overflow:hidden; background:linear-gradient(115deg,#fffdf8 0%,#fff7e7 58%,#edf6ff 100%); padding:72px 0 64px; }
.portfolio-hero:before { content:""; position:absolute; inset:0; background:url('/images/portfolio/portfolio-hero-bg.jpg') center/cover no-repeat; opacity:.28; pointer-events:none; }
.portfolio-hero-grid { position:relative; display:grid; grid-template-columns:1.12fr .88fr; gap:42px; align-items:center; }
.portfolio-eyebrow { display:inline-flex; align-items:center; padding:8px 16px; border:1px solid #ffd66a; border-radius:999px; background:#fff5d9; color:#a96800; font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.portfolio-hero h1 { margin:20px 0 16px; max-width:760px; font-size:clamp(2.4rem,4.5vw,4rem); line-height:1.06; letter-spacing:-.045em; font-weight:800; }
.portfolio-hero p { max-width:720px; color:var(--portfolio-muted); font-size:1.08rem; line-height:1.65; }
.portfolio-hero-art { position:relative; }
.portfolio-hero-art img.main-art { display:block; width:100%; max-height:330px; object-fit:contain; filter:drop-shadow(0 22px 32px rgba(18,54,100,.12)); }
.portfolio-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:12px; padding:13px 20px; font-weight:800; text-decoration:none; transition:transform .2s, box-shadow .2s; }
.portfolio-btn:hover { transform:translateY(-2px); }
.portfolio-btn-primary { background:var(--portfolio-gold); color:#071735; box-shadow:0 8px 20px rgba(255,194,20,.18); }
.portfolio-btn-outline { background:#fff; border:1px solid #f0b51a; color:#0b1b3b; }
.portfolio-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.portfolio-filters { position:relative; z-index:2; margin-top:-24px; }
.portfolio-filter-panel { display:grid; grid-template-columns:minmax(240px,1fr) 210px 210px auto; gap:12px; padding:16px; border:1px solid var(--portfolio-border); border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 12px 34px rgba(15,37,72,.08); }
.portfolio-control { width:100%; min-width:0; border:1px solid #cbd8e8; border-radius:10px; padding:13px 14px; background:white; color:var(--portfolio-navy); font:inherit; }
.portfolio-section { padding:58px 0 72px; }
.portfolio-section-heading { text-align:center; margin:0 auto 32px; }
.portfolio-section-heading h2 { margin:12px 0; font-size:clamp(1.8rem,3vw,2.6rem); letter-spacing:-.035em; }
.portfolio-section-heading p { color:var(--portfolio-muted); margin:0 auto; max-width:760px; line-height:1.6; }
.portfolio-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; align-items:stretch; }
.portfolio-card { min-width:0; display:flex; flex-direction:column; overflow:hidden; background:white; border:1px solid var(--portfolio-border); border-radius:18px; box-shadow:0 10px 28px rgba(12,36,73,.055); }
.portfolio-card-image { width:100%; aspect-ratio:1.55; display:block; object-fit:cover; background:#eaf3ff; }
.portfolio-card-body { display:flex; flex:1; flex-direction:column; padding:19px; }
.portfolio-tag { align-self:flex-start; display:inline-flex; margin-bottom:12px; border-radius:999px; padding:6px 10px; background:#fff4d5; color:#9b6500; font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.portfolio-card h3 { font-size:1.12rem; line-height:1.3; margin:0 0 9px; }
.portfolio-card p { margin:0 0 18px; color:var(--portfolio-muted); line-height:1.55; font-size:.91rem; }
.portfolio-meta { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:auto; padding:14px 0; border-top:1px solid #edf1f6; color:var(--portfolio-muted); font-size:.78rem; line-height:1.5; }
.portfolio-meta strong { display:block; color:var(--portfolio-navy); margin-bottom:3px; }
.portfolio-card .portfolio-btn { margin-top:4px; width:100%; border:1px solid #f1bd23; background:#fff; }
.portfolio-empty { grid-column:1/-1; padding:36px; text-align:center; background:white; border:1px dashed #cbd8e8; border-radius:16px; color:var(--portfolio-muted); }
.portfolio-cta { position:relative; overflow:hidden; padding:42px 0; background:#edf6ff url('/images/portfolio/portfolio-cta-bg.jpg') center/cover no-repeat; }
.portfolio-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.portfolio-cta h2 { margin:10px 0; font-size:clamp(1.7rem,3vw,2.5rem); }
.portfolio-cta p { margin:0; color:var(--portfolio-muted); }
.case-detail { padding:54px 0 72px; background:var(--portfolio-pale); }
.case-detail-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr); gap:28px; align-items:start; }
.case-detail-panel { background:white; border:1px solid var(--portfolio-border); border-radius:18px; padding:26px; box-shadow:0 10px 28px rgba(12,36,73,.04); }
.case-detail-panel h2 { margin-top:0; }
.case-detail-panel p,.case-detail-panel li { color:var(--portfolio-muted); line-height:1.7; }
.case-detail-image { width:100%; border-radius:18px; border:1px solid var(--portfolio-border); object-fit:cover; }
@media(max-width:1100px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-filter-panel{grid-template-columns:1fr 1fr}.portfolio-hero-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.portfolio-container{width:min(100% - 28px,560px)}.portfolio-hero{padding:46px 0 48px}.portfolio-hero-grid{grid-template-columns:1fr;gap:20px}.portfolio-hero-art img.main-art{max-height:260px}.portfolio-filter-panel{grid-template-columns:1fr}.portfolio-section{padding:42px 0 50px}.portfolio-grid{grid-template-columns:1fr}.portfolio-cta-inner{align-items:flex-start;flex-direction:column}.case-detail-layout{grid-template-columns:1fr}.portfolio-meta{grid-template-columns:1fr 1fr}}