.portfolio { --ink:#123349; --blue:#004877; --sky:#e9f4f7; --line:#d6e3e9; --accent:#f0a13a; padding:0; gap:0; color:var(--ink); letter-spacing:0; }
.portfolio * { box-sizing:border-box; }
.portfolio__inner { width:min(118rem,calc(100% - 4rem)); margin-inline:auto; }
.portfolio a { text-underline-offset:4px; }
.portfolio a:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.portfolio__intro { background:var(--sky); padding:2.4rem 0 4rem; border-bottom:1px solid var(--line); }
.portfolio__breadcrumbs { display:flex; flex-wrap:wrap; gap:1rem; color:#506a79; font-size:1.4rem; margin-bottom:3.2rem; }
.portfolio__breadcrumbs a { color:var(--blue); }
.portfolio__eyebrow { display:flex; align-items:center; gap:1rem; color:var(--blue); font-size:1.3rem; font-weight:700; margin-bottom:1.2rem; }
.portfolio__eyebrow:before { content:""; width:3.2rem; height:3px; background:var(--accent); flex-shrink:0; }
.portfolio h1 { font-size:4.8rem; line-height:1.25; max-width:90rem; text-wrap:balance; }
.portfolio__lead { max-width:88rem; font-size:1.8rem; line-height:1.9; color:#506a79; margin-top:1.6rem; }
.portfolio__intro-bottom { display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem 3.2rem; margin-top:2.4rem; font-size:1.5rem; }
.portfolio__intro-bottom a { display:inline-flex; align-items:center; gap:.8rem; color:var(--blue); font-weight:700; }
.portfolio__listing { padding-block:4rem 6rem; }
.portfolio__list-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1.6rem; flex-wrap:wrap; }
.portfolio__list-heading h2 { font-size:2.6rem; }
.portfolio__list-heading > span { font-size:1.4rem; color:#506a79; }
.portfolio__filters { display:flex; flex-wrap:wrap; gap:.8rem 2rem; margin:2rem 0 3rem; border-bottom:1px solid var(--line); }
.portfolio__filters a { display:inline-flex; align-items:center; gap:.8rem; min-height:4.4rem; border-bottom:3px solid transparent; color:#506a79; font-size:1.5rem; text-decoration:none; padding:.8rem 0; }
.portfolio__filters a[aria-current="page"] { border-color:var(--accent); color:var(--blue); font-weight:800; }
.portfolio__filters a:hover { color:var(--blue); }
.portfolio__filters span { font-size:1.2rem; font-variant-numeric:tabular-nums; }
.portfolio__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.4rem; }
.portfolio__card { min-width:0; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
.portfolio__image { display:grid; place-items:center; aspect-ratio:4/3; overflow:hidden; background:#eef2f3; color:#506a79; font-size:1.6rem; }
.portfolio__image img { width:100%; height:100%; object-fit:contain; }
.portfolio__card-body { padding:2.2rem; display:flex; flex-direction:column; flex:1; gap:1.2rem; }
.portfolio__date { font-size:1.2rem; color:#607782; }
.portfolio__card h3 { font-size:2.1rem; line-height:1.5; }
.portfolio__card h3 a { color:var(--ink); text-decoration:none; }
.portfolio__card h3 a:hover { color:var(--blue); text-decoration:underline; }
.portfolio__description { color:#506a79; font-size:1.5rem; line-height:1.85; }
.portfolio__tags { display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; margin-top:auto; padding-top:.8rem; }
.portfolio__tags a { font-size:1.3rem; color:var(--blue); }
.portfolio__read { display:flex; align-items:center; justify-content:space-between; min-height:4.4rem; border-top:1px solid var(--line); color:var(--blue); font-size:1.4rem; font-weight:700; text-decoration:none; }
.portfolio__services { background:#f6f9fb; padding:5rem 0; }
.portfolio__services h2,.portfolio__contact h2 { font-size:3rem; line-height:1.4; }
.portfolio__services p:not(.portfolio__eyebrow),.portfolio__contact p { font-size:1.6rem; line-height:1.9; margin-top:1.2rem; }
.portfolio__service-links { display:flex; flex-direction:column; margin-top:2.4rem; }
.portfolio__service-links a { display:flex; align-items:center; justify-content:space-between; gap:1.6rem; padding:1.6rem 0; border-top:1px solid var(--line); color:var(--blue); font-size:1.7rem; text-decoration:none; }
.portfolio__service-links i { flex-shrink:0; }
.portfolio__contact { padding:5rem 0; background:var(--ink); color:#fff; }
.portfolio__contact .portfolio__inner { display:flex; align-items:center; justify-content:space-between; gap:3rem; }
.portfolio__contact p { color:#c9dae3; }
.portfolio__contact a { display:inline-flex; align-items:center; justify-content:center; gap:1rem; flex-shrink:0; background:var(--accent); color:var(--ink); font-weight:700; font-size:1.6rem; text-decoration:none; padding:1.6rem 2.4rem; border-radius:8px; }
.portfolio__contact-actions { display:flex; flex-direction:column; gap:1.2rem; flex-shrink:0; }
.portfolio__contact a.portfolio__line { background:#06c755; color:#fff; }
.portfolio__empty { padding:4rem 0; font-size:1.7rem; }
@media(max-width:640px) { .portfolio__contact-actions { width:100%; } }
@media(max-width:960px) { .portfolio__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .portfolio h1 { font-size:4rem; } .portfolio__contact .portfolio__inner { flex-direction:column; align-items:flex-start; } }
@media(max-width:640px) { .portfolio__inner { width:calc(100% - 3.2rem); } .portfolio h1 { font-size:3.4rem; } .portfolio__lead { font-size:1.6rem; } .portfolio__grid { grid-template-columns:minmax(0,1fr); } .portfolio__intro { padding-bottom:3rem; } .portfolio__breadcrumbs { margin-bottom:2.4rem; } .portfolio__filters { gap:.4rem 1.6rem; } .portfolio__listing { padding-top:3rem; } .portfolio__services h2,.portfolio__contact h2 { font-size:2.6rem; } .portfolio__contact a { width:100%; } }