@font-face{font-family:'FOP Playfair';src:url('./playfair.woff2') format('woff2');font-display:swap;font-style:normal;font-weight:400 600}
@font-face{font-family:'FOP Public';src:url('./public.woff2') format('woff2');font-display:swap;font-style:normal;font-weight:300 800}
@font-face{font-family:'FOP Urbanist';src:url('./urbanist.woff2') format('woff2');font-display:swap;font-style:normal;font-weight:400 700}
.fop-projects,.fop-single{--fop-blue:#1688d3;--fop-navy:#112752;--fop-text:#111827;--fop-muted:#556477;--fop-pale:#f4f9fd;font-family:'FOP Public',Arial,sans-serif;color:var(--fop-text);box-sizing:border-box}
.fop-projects{container-type:inline-size}
.fop-projects *,.fop-single *{box-sizing:border-box}
.fop-projects a,.fop-single a{text-decoration:none}
.fop-projects img,.fop-single img{display:block;max-width:100%;height:auto}
.fop-projects .fop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.fop-projects .fop-card{min-width:0;overflow:hidden;border:1px solid #e4e9ee;border-radius:10px;background:#fff;box-shadow:0 2px 8px rgba(10,32,66,.13);display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.fop-projects .fop-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(10,32,66,.15)}
.fop-projects .fop-card-image{display:block;aspect-ratio:2.34/1;overflow:hidden;background:linear-gradient(135deg,#d6eaf7,#f2f8fc);position:relative}
.fop-projects .fop-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.fop-projects .fop-card:hover .fop-card-image img{transform:scale(1.035)}
.fop-projects .fop-card-content{padding:12px 13px 10px;display:flex;flex:1;flex-direction:column;align-items:flex-start}
.fop-projects .fop-card h3{font:700 clamp(17px,1.55vw,21px)/1.2 'FOP Urbanist',Arial,sans-serif;letter-spacing:-.025em;color:#0d193a;margin:0 0 4px}
.fop-projects .fop-card h3 a{color:inherit}
.fop-projects .fop-description{margin:0 0 8px;color:#253246;font:400 14px/1.35 'FOP Public',Arial,sans-serif}
.fop-projects .fop-location{color:#19213c;display:flex;align-items:center;gap:5px;margin:0 0 2px;font:500 13px/1.35 'FOP Public',Arial,sans-serif}
.fop-projects .fop-location svg,.fop-single .fop-pin{width:15px;height:15px;fill:var(--fop-navy);flex:0 0 auto}
.fop-projects .fop-card-button{align-self:flex-end;margin-top:auto;display:inline-flex;align-items:center;gap:9px;background:var(--fop-navy);color:#fff!important;border-radius:8px;padding:6px 14px;font:600 12px/1.2 'FOP Urbanist',Arial,sans-serif;transition:background .2s ease}
.fop-projects .fop-card-button:hover,.fop-projects .fop-card-button:focus-visible{background:var(--fop-blue)}
.fop-projects .fop-empty{grid-column:1/-1;text-align:center;color:var(--fop-muted);padding:35px;border:1px solid #d9e5ed;border-radius:10px}
.fop-single{background:#fff;padding:clamp(48px,7vw,100px) 20px 110px}
.fop-single .fop-wrap{max-width:1160px;margin:0 auto}
.fop-single .fop-eyebrow{color:var(--fop-blue);font:700 12px/1.4 'FOP Urbanist',Arial,sans-serif;letter-spacing:.19em;text-transform:uppercase;margin:0 0 15px}
.fop-single h1{font:400 clamp(38px,5vw,70px)/1.08 'FOP Playfair',Georgia,serif;letter-spacing:-.025em;color:var(--fop-text);max-width:930px;margin:0 0 20px}
.fop-single .fop-intro{font:400 clamp(17px,1.5vw,20px)/1.65 'FOP Public',Arial,sans-serif;color:var(--fop-muted);max-width:760px;margin:0 0 26px}
.fop-single .fop-meta{display:flex;align-items:center;gap:8px;margin:0 0 38px;color:var(--fop-navy);font:600 14px/1.5 'FOP Urbanist',Arial,sans-serif}
.fop-single .fop-hero-image{border-radius:14px;overflow:hidden;background:var(--fop-pale);margin:0 0 62px}
.fop-single .fop-hero-image img{width:100%;max-height:680px;object-fit:cover}
.fop-single .fop-detail-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:clamp(28px,5vw,90px);padding:0 0 60px;border-bottom:1px solid #dfe9f1}
.fop-single h2{font:400 clamp(28px,3vw,42px)/1.2 'FOP Playfair',Georgia,serif;color:var(--fop-text);margin:0 0 20px}
.fop-single .fop-overview{font:400 16px/1.85 'FOP Public',Arial,sans-serif;color:var(--fop-muted);white-space:pre-line}
.fop-single .fop-side{background:var(--fop-pale);border-left:3px solid var(--fop-blue);padding:25px 28px;align-self:start}
.fop-single .fop-side-label{font:700 11px/1.4 'FOP Urbanist',Arial,sans-serif;color:var(--fop-blue);letter-spacing:.16em;text-transform:uppercase;margin:0 0 9px}
.fop-single .fop-side-value{font:600 17px/1.45 'FOP Urbanist',Arial,sans-serif;color:var(--fop-navy);margin:0}
.fop-single .fop-gallery-section{padding:62px 0 20px}
.fop-single .fop-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fop-single .fop-gallery a{display:block;border-radius:10px;overflow:hidden;background:var(--fop-pale)}
.fop-single .fop-gallery img{width:100%;aspect-ratio:1.55/1;object-fit:cover;transition:transform .25s ease}
.fop-single .fop-gallery a:hover img{transform:scale(1.025)}
.fop-single .fop-contact{margin-top:60px;padding:32px clamp(20px,5vw,60px);background:var(--fop-pale);display:flex;gap:22px;align-items:center;justify-content:space-between;border-radius:12px}
.fop-single .fop-contact p{margin:0;font:400 clamp(23px,3vw,34px)/1.25 'FOP Playfair',Georgia,serif}
.fop-single .fop-contact a{flex:none;border:1px solid var(--fop-blue);color:var(--fop-blue);border-radius:40px;padding:12px 23px;font:600 13px/1.3 'FOP Urbanist',Arial,sans-serif}
.fop-single .fop-contact a:hover{background:var(--fop-blue);color:#fff}
@media(max-width:900px){.fop-projects .fop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fop-single .fop-detail-grid{gap:30px}}
@media(max-width:620px){.fop-projects .fop-grid{grid-template-columns:1fr;gap:16px}.fop-projects .fop-card h3{font-size:19px}.fop-projects .fop-card-image{aspect-ratio:2/1}.fop-single{padding:46px 16px 75px}.fop-single .fop-hero-image{margin-bottom:38px}.fop-single .fop-detail-grid{grid-template-columns:1fr;gap:25px;padding-bottom:42px}.fop-single .fop-gallery-section{padding-top:43px}.fop-single .fop-gallery{grid-template-columns:1fr;gap:12px}.fop-single .fop-contact{margin-top:35px;align-items:flex-start;flex-direction:column}}
@container(max-width:820px){.fop-projects .fop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container(max-width:520px){.fop-projects .fop-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.fop-projects .fop-card,.fop-projects .fop-card-image img,.fop-single .fop-gallery img{transition:none}}