.portfolio-page { background: var(--paper); }
.portfolio-page .site-header { background: rgba(20,20,19,.92); }
.portfolio-hero { position: relative; min-height: min(790px, calc(100svh - 78px)); display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.9fr); align-items: center; gap: 6vw; padding: 110px max(7vw, calc((100vw - 1320px)/2)) 112px; overflow: hidden; }
.portfolio-hero::before { content:""; position:absolute; width:58vw; height:58vw; min-width:560px; min-height:560px; right:-20vw; top:-25vw; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.02); pointer-events:none; }
.portfolio-hero-copy { position:relative; z-index:2; max-width:730px; }
.portfolio-hero h1 { max-width:800px; margin:20px 0 22px; color:var(--white); font-size:clamp(3.6rem,7.3vw,7.5rem); line-height:.88; letter-spacing:-.075em; }
.portfolio-hero h1 em { color:var(--orange); font-style:normal; }
.portfolio-intro { max-width:570px; margin:0 0 30px; color:rgba(255,255,255,.7); font-size:clamp(1.05rem,1.4vw,1.25rem); }
.portfolio-hero .button { gap:22px; }
.portfolio-hero-art { min-height:490px; position:relative; z-index:1; }
.hero-art-card { position:absolute; overflow:hidden; border:1px solid rgba(255,255,255,.24); background:#252523; box-shadow:0 24px 70px rgba(0,0,0,.32); }
.hero-art-card img { display:block; width:100%; height:100%; object-fit:cover; }
.hero-art-card span { position:absolute; left:14px; bottom:14px; padding:8px 10px; background:rgba(20,20,19,.86); color:white; font:500 .66rem "Spline Sans Mono",monospace; letter-spacing:.02em; }
.art-card-web { width:74%; height:67%; right:0; top:3%; transform:rotate(4deg); }
.art-card-social { width:51%; height:45%; left:0; bottom:0; transform:rotate(-7deg); }
.art-stamp { position:absolute; z-index:2; width:136px; height:136px; right:3%; bottom:2%; display:grid; place-content:center; border-radius:50%; background:var(--orange); color:var(--white); font-size:1.35rem; line-height:.95; font-weight:900; letter-spacing:-.06em; transform:rotate(9deg); box-shadow:0 16px 40px rgba(0,0,0,.28); }
.art-stamp span { position:absolute; right:17px; top:19px; font-size:1.1rem; }
.portfolio-down { position:absolute; bottom:30px; left:max(7vw, calc((100vw - 1320px)/2)); color:rgba(255,255,255,.62); font:500 .68rem "Spline Sans Mono",monospace; letter-spacing:.12em; }
.portfolio-down span { margin-left:12px; color:var(--orange); font-size:1rem; }
.portfolio-proof { display:grid; grid-template-columns:minmax(240px,.65fr) 1.35fr; gap:6vw; align-items:center; padding:38px max(7vw, calc((100vw - 1320px)/2)); border-bottom:1px solid var(--line-light); }
.portfolio-proof p { margin:0; color:rgba(20,20,19,.62); font-size:.95rem; }
.portfolio-proof p strong { color:var(--ink); font-size:1.08rem; }
.proof-areas { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; }
.proof-areas span { padding:10px 13px; border:1px solid var(--line-light); border-radius:99px; color:var(--ink); font:500 .7rem "Spline Sans Mono",monospace; text-transform:uppercase; }
.portfolio-work { padding:110px max(7vw, calc((100vw - 1320px)/2)) 130px; }
.portfolio-section-heading { display:grid; grid-template-columns:1fr minmax(280px,.55fr); gap:7vw; align-items:end; margin-bottom:44px; }
.portfolio-section-heading h2 { margin:10px 0 0; max-width:730px; font-size:clamp(2.8rem,5vw,5.3rem); line-height:.92; letter-spacing:-.07em; }
.portfolio-section-heading > p { max-width:440px; margin:0 0 5px; color:rgba(20,20,19,.66); font-size:1.05rem; }
.portfolio-filters { display:flex; gap:8px; overflow-x:auto; padding:0 0 18px; margin-bottom:26px; scrollbar-width:thin; }
.portfolio-filter { flex:0 0 auto; min-height:42px; padding:0 15px; background:transparent; border:1px solid var(--line-light); border-radius:99px; color:rgba(20,20,19,.72); font:500 .69rem "Spline Sans Mono",monospace; text-transform:uppercase; cursor:pointer; transition:background .18s,color .18s,border-color .18s; }
.portfolio-filter:hover,.portfolio-filter.is-active { background:var(--ink); border-color:var(--ink); color:white; }
.portfolio-filter span { margin-left:8px; color:var(--orange); }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch; }
.portfolio-card { min-width:0; border:1px solid var(--line-light); background:#fff; transition:transform .2s ease,box-shadow .2s ease; }
.portfolio-card:hover { transform:translateY(-5px); box-shadow:0 20px 45px rgba(20,20,19,.11); }
.portfolio-card[hidden] { display:none; }
.portfolio-card-button { display:flex; flex-direction:column; width:100%; height:100%; padding:0; background:none; border:0; color:inherit; text-align:left; cursor:pointer; }
.portfolio-card-visual { position:relative; height:clamp(190px,21vw,270px); overflow:hidden; background:#dedbd4; }
.portfolio-card-visual img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.portfolio-card:hover .portfolio-card-visual img { transform:scale(1.045); }
.portfolio-card-visual.logo-visual { display:grid; place-items:center; padding:15%; background:#f2f0eb; }
.portfolio-card-visual.logo-visual img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.portfolio-card-visual.type-visual { display:grid; place-items:center; background:#1e1e1c; color:white; }
.type-visual strong { font-size:clamp(2rem,4vw,4.4rem); letter-spacing:-.09em; line-height:.9; }
.type-visual span { position:absolute; bottom:16px; left:18px; font:500 .67rem "Spline Sans Mono",monospace; color:rgba(255,255,255,.7); }
.portfolio-card-category { position:absolute; top:14px; left:14px; z-index:1; padding:8px 10px; background:var(--orange); color:white; font:500 .65rem "Spline Sans Mono",monospace; text-transform:uppercase; }
.portfolio-card-info { display:flex; flex:1; flex-direction:column; align-items:flex-start; width:100%; padding:20px 20px 18px; }
.portfolio-card-client { margin-bottom:10px; color:var(--orange); font:500 .65rem "Spline Sans Mono",monospace; text-transform:uppercase; }
.portfolio-card-info h3 { margin:0 0 10px; font-size:1.55rem; line-height:1.02; letter-spacing:-.05em; }
.portfolio-card-info p { margin:0; color:rgba(20,20,19,.66); font-size:.92rem; }
.portfolio-card-open { display:flex; justify-content:space-between; width:100%; margin-top:auto; padding-top:22px; color:var(--ink); font-size:.79rem; font-weight:800; }
.portfolio-card-open span:last-child { color:var(--orange); font-size:1.1rem; }
.portfolio-feature { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.feature-image { position:relative; min-height:570px; overflow:hidden; }
.feature-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feature-image::after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,rgba(20,20,19,.72)); }
.feature-image span { position:absolute; z-index:1; left:6vw; bottom:26px; color:white; font:500 .68rem "Spline Sans Mono",monospace; }
.feature-copy { align-self:center; max-width:650px; padding:80px max(7vw, calc((100vw - 1320px)/2)) 80px 7vw; }
.feature-copy h2 { margin:10px 0 18px; color:white; font-size:clamp(2.7rem,4.4vw,4.7rem); line-height:.94; letter-spacing:-.07em; }
.feature-copy > p:not(.eyebrow) { color:rgba(255,255,255,.68); }
.feature-copy blockquote { margin:26px 0; padding:4px 0 4px 18px; border-left:2px solid var(--orange); color:white; font-size:1.08rem; font-weight:600; }
.feature-copy cite { display:block; margin-top:12px; color:rgba(255,255,255,.58); font:500 .67rem "Spline Sans Mono",monospace; font-style:normal; }
.text-link { padding:8px 0; background:none; border:0; border-bottom:1px solid rgba(255,255,255,.4); color:white; font-weight:800; cursor:pointer; }
.text-link span { margin-left:12px; color:var(--orange); }
.portfolio-cta { display:flex; justify-content:space-between; gap:40px; align-items:center; padding:70px max(7vw, calc((100vw - 1320px)/2)); background:var(--orange); color:var(--ink); }
.portfolio-cta h2 { margin:8px 0; font-size:clamp(3rem,6vw,6rem); line-height:.9; letter-spacing:-.08em; }
.portfolio-cta p:not(.eyebrow) { max-width:530px; margin:0; color:rgba(20,20,19,.72); }
.portfolio-cta .button { flex:0 0 auto; display:inline-flex; align-items:center; gap:26px; min-height:54px; }
.button-dark { background:var(--ink); border-color:var(--ink); color:white; }
.portfolio-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px; padding:38px max(7vw, calc((100vw - 1320px)/2)); }
.footer-brand img { width:150px; }
.portfolio-footer > p { color:rgba(255,255,255,.58); font-size:.8rem; }
.portfolio-footer .footer-nav { display:flex; flex-wrap:wrap; gap:20px; }
.portfolio-footer .footer-nav a { color:rgba(255,255,255,.76); font-size:.78rem; }
.case-dialog { width:min(760px,calc(100% - 28px)); max-height:min(86vh,900px); padding:0; border:1px solid rgba(20,20,19,.18); background:var(--paper); color:var(--ink); box-shadow:0 30px 110px rgba(0,0,0,.4); }
.case-dialog::backdrop { background:rgba(15,15,14,.78); backdrop-filter:blur(5px); }
.case-close { position:sticky; z-index:3; float:right; top:12px; width:42px; height:42px; margin:12px 12px -54px 0; border:0; border-radius:50%; background:var(--ink); color:white; font-size:1.7rem; cursor:pointer; }
.case-dialog-content { padding:54px clamp(24px,6vw,60px) 56px; }
.case-dialog-content .eyebrow { color:var(--orange); }
.case-dialog-content h2 { max-width:570px; margin:12px 0 18px; font-size:clamp(2.8rem,7vw,5.2rem); line-height:.9; letter-spacing:-.075em; }
.case-lead { max-width:580px; color:rgba(20,20,19,.68); font-size:1.1rem; }
.case-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:30px 0; }
.case-fact { padding:18px; border:1px solid var(--line-light); background:white; }
.case-fact strong { display:block; margin-bottom:8px; color:var(--orange); font:500 .67rem "Spline Sans Mono",monospace; text-transform:uppercase; }
.case-fact p { margin:0; font-size:.94rem; }
.case-quote { margin:24px 0; padding:18px 20px; background:var(--ink); color:white; }
.case-quote p { margin:0; font-size:1.05rem; font-weight:600; }
.case-quote cite { display:block; margin-top:10px; color:rgba(255,255,255,.62); font:500 .65rem "Spline Sans Mono",monospace; font-style:normal; }
.case-site-link { margin:20px 0; font-weight:800; }
.case-site-link a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:4px; }
.case-site-link span { margin-left:6px; color:var(--orange); }
.case-footnote { color:rgba(20,20,19,.56); font-size:.82rem; }
.works-all-link { display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
@media (max-width:1000px) {
  .portfolio-hero { grid-template-columns:1fr .72fr; gap:25px; }
  .portfolio-hero-art { min-height:410px; }
  .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portfolio-feature { grid-template-columns:1fr 1fr; }
  .feature-image { min-height:480px; }
  .feature-copy { padding:58px 7vw; }
}
@media (max-width:700px) {
  .portfolio-hero { min-height:auto; grid-template-columns:1fr; padding:118px 22px 92px; }
  .portfolio-hero h1 { font-size:clamp(3.4rem,15vw,6rem); }
  .portfolio-hero-art { width:min(100%,480px); min-height:340px; margin:4px auto 0; }
  .art-card-web { width:75%; height:73%; }
  .art-card-social { width:52%; height:46%; }
  .art-stamp { width:104px; height:104px; font-size:1.05rem; }
  .portfolio-down { left:22px; bottom:24px; }
  .portfolio-proof { grid-template-columns:1fr; gap:18px; padding:28px 22px; }
  .proof-areas { justify-content:flex-start; }
  .portfolio-work { padding:72px 20px 82px; }
  .portfolio-section-heading { grid-template-columns:1fr; gap:16px; margin-bottom:30px; }
  .portfolio-section-heading h2 { font-size:clamp(2.8rem,12vw,4.4rem); }
  .portfolio-section-heading > p { max-width:540px; }
  .portfolio-filters { margin-right:-20px; padding-right:20px; }
  .portfolio-grid { gap:12px; }
  .portfolio-card-visual { height:clamp(155px,47vw,260px); }
  .portfolio-card-info { padding:15px; }
  .portfolio-card-info h3 { font-size:1.25rem; }
  .portfolio-card-info p { font-size:.84rem; }
  .portfolio-card-open { padding-top:16px; }
  .portfolio-feature { grid-template-columns:1fr; }
  .feature-image { min-height:360px; }
  .feature-image span { left:22px; }
  .feature-copy { padding:42px 22px 52px; }
  .feature-copy h2 { font-size:clamp(2.8rem,12vw,4.4rem); }
  .portfolio-cta { align-items:flex-start; flex-direction:column; padding:52px 22px; gap:25px; }
  .portfolio-footer { padding:36px 22px; }
  .portfolio-footer .footer-nav { width:100%; gap:16px; }
}
@media (max-width:390px) {
  .portfolio-grid { grid-template-columns:1fr; }
  .portfolio-card-visual { height:250px; }
  .case-facts { grid-template-columns:1fr; }
  .portfolio-hero-art { min-height:285px; }
}
@media (prefers-reduced-motion:reduce) { .portfolio-card,.portfolio-card-visual img,.portfolio-filter { transition:none; } }