/* A quiet, image-led project gallery with one opening feature. */
#work.portfolio { color:#17231b; padding:clamp(64px,7vw,110px) var(--side-pad,7.5vw); scroll-margin-top:100px; }
#work .portfolio-head.services__head { display:grid; grid-template-columns:1.4fr 1fr; gap:18px 40px; width:100%; max-width:none; margin:0 0 38px; text-align:left; align-items:end; }
#work .portfolio-eyebrow { grid-column:1/-1; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#657368; }
#work .portfolio-title.services__title { white-space:normal; max-width:none; margin:0; color:#17231b; text-transform:none; font-size:clamp(54px,7vw,110px); font-weight:400; letter-spacing:-.06em; line-height:1; }
.portfolio-intro { justify-self:end; }
.portfolio-intro p { margin:0 0 5px; font-size:clamp(17px,1.5vw,22px); line-height:1.5; letter-spacing:-.02em; color:#657368; }
.portfolio-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:28px; border-top:1px solid #17231b26; padding-top:20px; }
.portfolio-filters { display:flex; flex-wrap:wrap; gap:6px; }
.portfolio-filter { min-height:44px; border:0; border-radius:8px; padding:10px 15px; background:transparent; color:#657368; font:inherit; font-size:14px; cursor:pointer; transition:background .2s,color .2s; }
.portfolio-filter sup { font-size:10px; margin-left:6px; opacity:.65; }
.portfolio-filter:hover { background:#17231b09; }
.portfolio-filter[aria-pressed="true"] { background:#17231b; color:#fff; }
.portfolio-total { font-size:12px; color:#657368; white-space:nowrap; font-variant-numeric:tabular-nums; }
#work .portfolio-grid.works__grid { display:grid; width:100%; max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px 28px; align-items:start; }
.work-entry { min-width:0; margin:0; }
.work-entry[hidden] { display:none!important; }
.project-media { position:relative; min-width:0; }
#work .work-card { display:block; position:relative; width:100%; height:auto; aspect-ratio:1.5; padding:0; border:0; border-radius:12px; background:var(--project-background,#e7eee8); overflow:hidden; isolation:isolate; cursor:pointer; }
#work .work-card::after { display:none; }
#work .work-card__photo { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .7s cubic-bezier(.16,1,.3,1); }
#work .work-entry--digital .work-card__photo { object-fit:contain; }
#work .work-card:hover .work-card__photo { filter:none; transform:scale(1.035); }
#work .work-card__preview { z-index:1; object-fit:contain; }
#work .work-card__scroll-preview { z-index:1; }
.project-open { position:absolute; right:16px; bottom:16px; z-index:3; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#fff; color:#17231b; transition:background .2s,transform .3s; }
.project-open svg { width:19px; height:19px; }
.work-card:hover .project-open,.work-card:focus-visible .project-open { background:#a1ec66; transform:rotate(5deg); }
.project-corner { position:absolute; top:14px; left:14px; z-index:2; padding:7px 10px; border-radius:5px; color:white; background:#17231bc9; font-size:10px; }
.project-preview-toggle { position:absolute; top:12px; right:12px; z-index:4; min-height:44px; padding:8px 12px; border:1px solid #ffffff70; border-radius:6px; color:white; background:#17231bc9; font:inherit; font-size:11px; cursor:pointer; }
.project-preview-toggle[aria-pressed="true"] { background:#ecf4e5; color:#17231b; }
.project-caption { display:flex; flex-direction:column; padding-top:18px; }
.project-caption__meta { order:2; display:flex; justify-content:space-between; gap:10px; margin-top:8px; color:#657368; font-size:11px; line-height:1.5; }
.project-caption__title { margin:0; color:#17231b; font-size:clamp(22px,2.1vw,32px); line-height:1.15; letter-spacing:-.035em; font-weight:500; }
.project-caption__description { display:none; }
/* The newest school project opens the gallery with a generous, complete preview. */
.portfolio-grid:not(.is-filtered) .work-entry--lead { grid-column:1/-1; display:grid; grid-template-columns:1.7fr 1fr; align-items:center; background:#e4eadf; border-radius:14px; overflow:hidden; margin-bottom:4px; }
#work .work-entry--lead .work-card { aspect-ratio:1.83; border-radius:0; }
.portfolio-grid:not(.is-filtered) .work-entry--lead .project-caption { padding:clamp(24px,3vw,48px); }
.work-entry--lead .project-caption__title { font-size:clamp(28px,3vw,44px); line-height:1.05; }
.portfolio-grid:not(.is-filtered) .work-entry--lead .project-caption__meta { order:-1; margin:0 0 24px; }
.work-entry--lead .project-caption__meta>span:last-child { display:none; }
.portfolio-grid:not(.is-filtered) .work-entry--lead .project-caption__description { display:block; margin:18px 0 0; color:#52604f; font-size:15px; line-height:1.6; }
.portfolio-grid.is-filtered .work-entry--lead .project-caption__title { font-size:clamp(22px,2.1vw,32px); }
.portfolio-footer { display:flex; justify-content:space-between; gap:20px; align-items:center; border-top:1px solid #17231b26; padding-top:28px; margin-top:48px; color:#657368; font-size:15px; }
.portfolio-footer a { display:inline-flex; align-items:center; gap:14px; color:#17231b; font-size:17px; text-decoration:none; }
.portfolio-footer a span { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#a1ec66; }
.portfolio-filter:focus-visible,.project-preview-toggle:focus-visible,#work .work-card:focus-visible,.portfolio-footer a:focus-visible { outline:3px solid #57a42a; outline-offset:4px; }
.portfolio-ready .work-entry { opacity:0; transform:translateY(16px); transition:opacity .5s,transform .6s; }
.portfolio-ready .work-entry.is-seen { opacity:1; transform:none; }
@media(max-width:900px) { .portfolio-grid:not(.is-filtered) .work-entry--lead { grid-template-columns:1.4fr 1fr; } .work-entry--lead .project-caption__title { font-size:30px; } .project-caption__meta>span:last-child { display:none; } }
@media(max-width:640px) {
 #work.portfolio { padding-block:56px; }
 #work .portfolio-head.services__head { grid-template-columns:1fr; gap:18px; margin-bottom:28px; }
 #work .portfolio-title.services__title { font-size:56px; }
 .portfolio-intro { justify-self:start; }
 .portfolio-intro p { font-size:16px; }
 .portfolio-toolbar { gap:12px; flex-wrap:wrap; padding-top:14px; }
 .portfolio-filters { flex-wrap:nowrap; overflow-x:auto; width:100%; padding-bottom:4px; }
 .portfolio-filter { flex-shrink:0; font-size:12px; padding:10px 12px; }
 .portfolio-total { display:none; }
 #work .portfolio-grid.works__grid { grid-template-columns:minmax(0,1fr); gap:32px; }
 .portfolio-grid:not(.is-filtered) .work-entry--lead { display:block; }
 .portfolio-grid:not(.is-filtered) .work-entry--lead .project-caption { padding:24px; }
 .portfolio-grid:not(.is-filtered) .work-entry--lead .project-caption__meta { margin-bottom:12px; }
 .work-entry--lead .project-caption__title { font-size:30px; }
 .project-caption__title { font-size:25px; }
 .portfolio-footer { flex-direction:column; align-items:flex-start; font-size:14px; margin-top:36px; }
}
@media(prefers-reduced-motion:reduce) {
 .portfolio-ready .work-entry { opacity:1; transform:none; transition:none; }
 #work .work-card__photo,.project-open,.portfolio-filter { transition:none; }
 #work .work-card.is-previewing .work-card__preview { display:block; transition:none; }
}
.sw-modal-media[style*="apex-international-school/cover.jpg"] { background-size:contain; background-repeat:no-repeat; background-color:#152345; }
.project-caption__title a { color:inherit; text-decoration:none; }
.project-caption__title a:hover { text-decoration:underline; text-underline-offset:5px; }
#work .project-case-study { order:3; align-self:flex-start; display:inline-flex; align-items:center; gap:22px; min-height:46px; margin-top:22px; padding:12px 20px; border-radius:8px; background:#192a20; color:#fff; font-size:14px; text-decoration:none; transition:background .2s,color .2s; }
#work .project-case-study:hover, #work .project-case-study:focus-visible, .sw-modal-single-content .sw-modal-visit.project-case-study:hover, .sw-modal-single-content .sw-modal-visit.project-case-study:focus-visible { background:#a1ec66; color:#17231b; }
.sw-modal-single-content .sw-modal-visit.project-case-study::after { box-shadow:none; }
#work .project-case-study:focus-visible { outline:3px solid #57a42a; outline-offset:4px; }
.sw-modal-single-content .project-case-study + .sw-modal-visit { margin-top:10px; }