/* Portfolio layouts: shared navigation and site colours stay in styles.css. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.portfolio{--portfolio-surface:#fff;--portfolio-border:#d9deea}
.portfolio section{scroll-margin-top:90px}
.portfolio-kicker{font-size:.76rem!important;letter-spacing:.16em;font-weight:700;color:var(--link)!important;margin-bottom:20px;text-transform:uppercase}
.portfolio-intro{padding:64px 0 44px}
.portfolio-intro h1{font-size:clamp(2.7rem,6.7vw,5.3rem);max-width:1000px;line-height:1.04}
.portfolio-intro h1 span{color:var(--muted)}
.portfolio-intro-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;margin-top:30px}
.portfolio-intro-bottom p{max-width:55ch;font-size:1.12rem}
.portfolio-intro-bottom .btn{flex-shrink:0}
.portfolio-anchors{display:flex;gap:24px;list-style:none;padding:26px 0 0;margin-top:36px;border-top:1px solid var(--portfolio-border);font-size:.9rem;font-weight:700}
.portfolio-anchors a{text-decoration:none;text-underline-offset:5px}
.portfolio-anchors a:hover{text-decoration:underline}
.portfolio-projects{padding:28px 0 76px}
.portfolio-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:30px}
.portfolio-section-head h2{font-size:clamp(1.6rem,3.5vw,2.4rem);margin:0}
.portfolio-section-head p{max-width:39ch;font-size:.95rem}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.project-card{overflow:hidden;border:1px solid var(--portfolio-border);border-radius:18px;background:var(--portfolio-surface);color:var(--ink);min-width:0}
.project-card-image{display:block;background:#f7f5f1;overflow:hidden}
.project-card-image img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;transition:transform .25s}
.project-card:hover .project-card-image img{transform:scale(1.015)}
.project-card-copy{padding:26px 28px 30px}
.project-sector{font-size:.73rem!important;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.project-card h2{font-size:clamp(1.35rem,2.5vw,1.85rem);line-height:1.17;margin-bottom:12px;overflow-wrap:break-word}
.project-card h2 a{text-decoration:none}
.project-card h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.project-card-copy>p:not(.project-sector){font-size:.96rem;max-width:54ch}
.project-link{display:inline-flex;align-items:center;gap:12px;color:var(--link);font-size:.92rem;font-weight:700;text-decoration:none;text-underline-offset:5px;margin-top:22px}
.project-link:hover{text-decoration:underline}
.project-link span[aria-hidden]{font-size:1.2em}
.portfolio-projects .project-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;background:var(--mist)}
.portfolio-projects .project-card:first-child .project-card-copy{padding:36px}
.portfolio-projects .project-card:first-child h2{font-size:clamp(1.7rem,3vw,2.5rem)}
.portfolio-case{padding:0 0 76px}
.portfolio-case-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:50px;background:var(--portfolio-surface);border:1px solid var(--portfolio-border);border-radius:18px;overflow:hidden;padding:44px}
.portfolio-case-inner h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.portfolio-case-aside{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#12182b;color:#fff;border-radius:14px;padding:28px;min-height:240px}
.qtf-monogram{font:800 clamp(4rem,7vw,6.8rem)/1 'Bricolage Grotesque',sans-serif;color:#ffc83d;letter-spacing:-.04em}
.portfolio-case-aside p{color:#fff;margin-top:18px;font-weight:700}
.portfolio-case-aside>span:last-child{color:#c5cbdc;font-size:.84rem;margin-top:6px}
.portfolio-cta{background:#12182b;color:#fff;padding:70px 0}
.portfolio-cta .portfolio-kicker{color:#ffc83d!important}
.portfolio-cta h2{font-size:clamp(1.9rem,4vw,3.2rem);max-width:850px}
.portfolio-cta p{color:#d3d9e8;max-width:64ch}
.portfolio-cta .btn{margin-top:28px;background:#ffc83d;color:#12182b}
.portfolio-small{font-size:.83rem;margin-top:22px}
.portfolio-cta :focus-visible,.portfolio-case-aside :focus-visible{outline-color:#ffc83d}
.project-intro{padding:54px 0 40px}
.project-intro h1{font-size:clamp(2.5rem,5.6vw,4.4rem);max-width:1040px;overflow-wrap:break-word}
.project-lead{font-size:clamp(1.05rem,2vw,1.25rem);max-width:70ch;margin-top:24px}
.project-intro-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px 30px;margin-top:28px}
.project-intro-actions .project-link{margin-top:0}
.project-visual{padding:0 0 44px}
.project-visual figure{background:#f7f5f1;border-radius:18px;overflow:hidden;border:1px solid #d9deea}
.project-visual img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
.project-visual figcaption{padding:15px 22px;font-size:.8rem;color:#515b70;background:#fff;border-top:1px solid #e6e9f2}
.project-visual figcaption a{font-weight:700;color:#2f4bff}
.project-story{padding:22px 0 68px}
.project-story-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:start}
.project-story-grid h2{font-size:clamp(1.7rem,3.3vw,2.5rem);max-width:23ch}
.project-story-grid p{max-width:62ch}
.project-facts{padding:28px;background:var(--mist);border-radius:14px}
.project-facts h2{font-size:1.2rem;margin-bottom:18px}
.project-facts dl>div{padding:12px 0;border-top:1px solid var(--portfolio-border)}
.project-facts dt{font-size:.75rem;color:var(--muted);margin-bottom:3px}
.project-facts dd{font-size:.95rem;font-weight:700;margin:0}
.project-facts .project-link{font-size:.85rem}
.project-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:58px}
.project-detail-grid .project-detail{padding:22px 0 0;border-top:2px solid var(--portfolio-border)}
.project-number{display:block;font:700 1.9rem 'Bricolage Grotesque',sans-serif;color:var(--link);margin-bottom:18px}
.project-detail h3{font-size:1.3rem;line-height:1.22;margin-bottom:12px}
.project-detail p{font-size:.95rem}
.project-takeaway{padding:42px 0;background:var(--mist)}
.project-takeaway .portfolio-kicker{margin-bottom:12px}
.project-takeaway .wrap>p:last-child{font-size:clamp(1.1rem,2.1vw,1.5rem);color:var(--ink);max-width:75ch}
.project-related{padding:68px 0}
.project-related .portfolio-section-head .project-link{margin:0}
@media(prefers-color-scheme:dark){.portfolio{--portfolio-surface:#151b2c;--portfolio-border:#303a54}}
@media(max-width:900px){.portfolio-intro-bottom{display:block}.portfolio-intro-bottom .btn{margin-top:24px}.portfolio-section-head{align-items:flex-start;flex-direction:column;gap:14px}.project-story-grid{gap:30px}.portfolio-case-inner{gap:28px;padding:28px}.portfolio-projects .project-card:first-child .project-card-copy{padding:26px}}
@media(max-width:719px){.portfolio-intro{padding-top:34px}.portfolio-intro h1 br{display:none}.portfolio-intro h1 span{display:block;margin-top:7px}.project-grid,.project-story-grid,.project-detail-grid,.portfolio-case-inner,.portfolio-projects .project-card:first-child{grid-template-columns:1fr}.project-grid{gap:24px}.portfolio-projects .project-card:first-child{grid-column:auto}.project-card-copy,.portfolio-projects .project-card:first-child .project-card-copy{padding:22px}.portfolio-projects .project-card:first-child h2{font-size:1.7rem}.project-detail-grid{gap:12px;margin-top:30px}.project-intro{padding-top:32px}.project-intro-actions{align-items:flex-start;flex-direction:column}.project-visual{padding-bottom:28px}.project-visual figcaption{padding:12px 16px}.portfolio-cta{padding:50px 0}.portfolio-anchors{gap:20px;flex-wrap:wrap}.portfolio-case-inner{padding:24px}.portfolio-case-aside{min-height:180px}.project-facts{padding:22px}}
@media(prefers-reduced-motion:reduce){.project-card-image img{transition:none}.project-card:hover .project-card-image img{transform:none}}

@media(max-width:719px){
.portfolio-page header nav{gap:8px}
.portfolio-page header .logo img{height:38px}
.portfolio-page header nav>.btn{white-space:nowrap;font-size:.84rem;padding:10px 14px}
.portfolio-page header .menu{margin-left:0}
.portfolio .project-intro-actions .btn{font-size:.87rem;padding:14px 18px}
.portfolio .btn span[aria-hidden]{white-space:nowrap}
}