/* ============================================================
   MONOGRAM PORTFOLIO, architect gallery (v22, 2026-10-15)
   Loads after portfolio-v21.css. Clean, quiet, the photos do the talking.
   Full-size hero, masonry in walk-through order, nothing cropped but the hero sky.
   ============================================================ */
.pf-arch{background:#fff}

/* ---------- full-size hero: fills the screen under the header; never trims more than a quarter, always keeps the house ---------- */
.ah-hero{margin-top:72px;padding:0!important;background:#1A2D42}
.ah-hero picture,.ah-hero img{display:block;width:100%}
.ah-hero img{height:clamp(calc(100vw / var(--r) * .68), 64svh, calc(100vw / var(--r)));object-fit:cover;object-position:50% 30%}
@media(max-width:700px){
  .ah-hero{margin-top:64px}
  /* phones: the whole front photo, nothing trimmed */
  .ah-hero img{height:auto;aspect-ratio:var(--r);object-fit:contain}
}

/* ---------- intro: one quiet paragraph ---------- */
.pf-arch .pf-intro{background:#fff;padding:clamp(56px,6vw,96px) 22px clamp(40px,4vw,64px)}
.pf-arch .pf-intro p{font-size:clamp(18px,1.45vw,21px);line-height:1.7;color:#333a40;max-width:34em}

/* ---------- the gallery ---------- */
.ag-sec{padding:0 max(16px,env(safe-area-inset-left,0px)) clamp(10px,1vw,14px)!important}
.ag{max-width:1320px;margin:0 auto;column-count:3;column-gap:clamp(8px,.9vw,14px)}
.ag-it{break-inside:avoid;margin:0 0 clamp(8px,.9vw,14px)}
.ag.ag-js{display:flex;gap:clamp(8px,.9vw,14px);align-items:flex-start;column-count:auto}
.ag-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:clamp(8px,.9vw,14px)}
.ag-col .ag-it{margin:0}
.ag-ph{margin:0;position:relative}
.ag-ph img,.ag-ph video{display:block;width:100%;height:auto;aspect-ratio:var(--r);background:#ECEEF1}
.ag-ph img{cursor:zoom-in;transition:opacity .3s}
@media(hover:hover){.ag-ph img:hover{opacity:.92}}
.ag .gl-tile{margin:0;display:flex;flex-direction:column;justify-content:center}
@media(max-width:700px){.ag{column-count:2}}

/* ---------- full-width moments, quiet version: photo edge to edge, one line on white ---------- */
.pf-arch .mo{background:#fff;margin:clamp(40px,5vw,80px) 0}
.pf-arch .mo-line{color:#1A2D42;font-size:clamp(18px,1.6vw,24px);font-weight:600;padding:clamp(18px,2vw,28px) 16px 0}

/* ---------- soft reveal ---------- */
.pf-js .ag-it{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform 1s cubic-bezier(.22,.7,.3,1)}
.pf-js .ag-it.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pf-js .ag-it{opacity:1;transform:none;transition:none}}

/* breathing room before the location band */
.pf-arch .lo{margin-top:clamp(48px,6vw,96px)}
.ag.ag-narrow{max-width:880px}
.ag-full{max-width:1320px;margin:clamp(8px,.9vw,14px) auto 0}
.ag-full .gl-tile{margin:0}
.ag-full .gl-tile.ag-it{opacity:1;transform:none}
.pf-float{white-space:nowrap}

/* ---------- room groups: a plain title, then that room's photos ---------- */
.ag-sec{padding-top:clamp(36px,4.4vw,72px)!important}
.ag-h{max-width:1320px;margin:0 auto clamp(14px,1.4vw,22px);font:600 clamp(24px,2.2vw,34px)/1.1 var(--disp);letter-spacing:-.02em;color:#1A2D42}
.pf-arch .mo{margin:clamp(36px,4.4vw,72px) 0 0}

/* ---------- even rows (replaces the staggered columns) ---------- */
.ag.ag-js{display:flex;flex-direction:column;gap:14px;column-count:auto}
.ag-row{display:flex;gap:14px;width:100%;margin:0 auto}
.ag-row>.ag-it{flex:var(--r) 1 0;min-width:0;margin:0}
.ag.ag-narrow{max-width:1320px}
@media(max-width:700px){.ag.ag-js,.ag-row{gap:8px}}
/* features box as a full-width navy strip: heading left, list right */
.ag-full .gl-tile{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(20px,4vw,64px);align-items:start;padding:clamp(30px,3.4vw,52px) clamp(24px,3.4vw,56px)}
.ag-full .gl-tile h3{margin:0;font-size:clamp(24px,2.2vw,34px);line-height:1.15}
.ag-full .gl-tile ul{columns:2;column-gap:32px;margin:0 0 22px}
.ag-full .gl-tile li{break-inside:avoid}
.ag-full .gl-tile .gl-btn{grid-column:2;justify-self:start}
@media(max-width:700px){.ag-full .gl-tile{grid-template-columns:1fr}.ag-full .gl-tile ul{columns:1}.ag-full .gl-tile .gl-btn{grid-column:1}}

/* ---------- mid-page call to action ---------- */
.ag-cta{padding:clamp(40px,4.6vw,72px) max(16px,env(safe-area-inset-left,0px)) 0!important}
.ag-cta-in{max-width:1320px;margin:0 auto;background:#1A2D42;color:#fff;border-radius:18px;padding:clamp(28px,3.6vw,52px) clamp(24px,3.6vw,56px);display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.ag-cta h2{margin:0 0 8px;color:#fff;font:600 clamp(26px,2.6vw,38px)/1.1 var(--disp);letter-spacing:-.02em}
.ag-cta p{margin:0;color:rgba(255,255,255,.8);font:400 16px/1.6 var(--sans);max-width:34em}
.ag-cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.ag-b{display:inline-flex;align-items:center;justify-content:center;padding:15px 26px;border-radius:40px;border:1.5px solid rgba(255,255,255,.7);color:#fff;text-decoration:none;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:background .25s,color .25s}
.ag-b:hover{background:#fff;color:#1A2D42}
.ag-b-solid{background:#fff;color:#1A2D42;border-color:#fff}
.ag-b-solid:hover{background:transparent;color:#fff}
@media(max-width:700px){.ag-cta-btns{width:100%;flex-direction:column}.ag-b{width:100%}}

/* ---------- top button: Build This Plan ---------- */
.ag-b-top{position:relative;overflow:hidden;gap:10px;padding:15px 24px}
.ag-b-top .ag-arw{width:16px;height:16px;transition:transform .35s cubic-bezier(.22,.7,.3,1)}
.ag-b-top:hover .ag-arw,.ag-b-top:focus-visible .ag-arw{transform:translateX(5px)}
.ag-b-top::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(26,45,66,.18),transparent);transform:skewX(-20deg);animation:agShine 1.4s .9s ease-out 1 both}
@keyframes agShine{to{left:130%}}
.pf-bar .ag-b-top{white-space:nowrap}
@media(max-width:860px){.pf-bar .fphero-actions .ag-b-top{width:100%}}

/* ---------- scroll dynamics ---------- */
.ag-progress{position:fixed;left:0;right:0;top:72px;height:3px;background:#1A2D42;transform-origin:0 50%;transform:scaleX(0);z-index:250;opacity:0;transition:opacity .4s}
.ag-progress.on{opacity:1}
@media(max-width:700px){.ag-progress{top:64px}}
.ag-fx .ag-h{position:relative;padding-bottom:12px}
.ag-fx .ag-h::after{content:'';position:absolute;left:0;bottom:0;width:44px;height:3px;background:#1A2D42;transform:scaleX(0);transform-origin:0 50%;transition:transform .8s cubic-bezier(.22,.7,.3,1) .1s}
.ag-fx .ag-h.in::after{transform:scaleX(1)}
.ag-fx .mo-ph img{transform:scale(.94);opacity:.4;transition:transform 1.4s cubic-bezier(.22,.7,.3,1),opacity 1s ease}
.ag-fx .mo-ph.in img{transform:none;opacity:1}
.ag-fx .mo-ph{overflow:visible}
.ag-fx .ag-cta-in{transform:translateY(24px);opacity:0;transition:transform 1s cubic-bezier(.22,.7,.3,1),opacity .8s ease}
.ag-fx .ag-cta-in.in{transform:none;opacity:1}
@media(hover:hover){.ag-ph img{transition:transform .5s cubic-bezier(.22,.7,.3,1),box-shadow .5s,opacity .3s}.ag-ph:hover img{transform:translateY(-4px);box-shadow:0 18px 34px -18px rgba(20,35,52,.45);opacity:1}}
.pf-lb img.fade{animation:agFade .35s ease}
@keyframes agFade{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ag-b-top::after{display:none}.ag-progress{display:none}}

/* ---------- description: statement left, facts right ---------- */
.ag-intro{background:#fff;padding:clamp(56px,6.4vw,104px) max(16px,env(safe-area-inset-left,0px)) clamp(20px,2vw,32px)!important}
.ag-intro-in{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:start}
.ag-kick{margin:0 0 16px;font:700 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#5A6B7C}
.ag-intro-l h2{margin:0;font:600 clamp(32px,3.6vw,54px)/1.06 var(--disp);letter-spacing:-.03em;color:#1A2D42;text-wrap:balance}
.ag-intro-r>p{margin:6px 0 26px;font:400 clamp(17px,1.3vw,19px)/1.7 var(--sans);color:#333a40}
.ag-facts{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ag-facts li{border-top:3px solid #1A2D42;padding-top:12px}
.ag-facts b{display:block;font:600 17px/1.2 var(--disp);color:#1A2D42;margin-bottom:6px}
.ag-facts span{display:block;font:400 13.5px/1.5 var(--sans);color:#5A6B7C}
.ag-link{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#1A2D42;text-decoration:none;padding-bottom:6px;border-bottom:1.5px solid #1A2D42}
.ag-link .ag-arw{width:15px;height:15px;transition:transform .35s cubic-bezier(.22,.7,.3,1)}
.ag-link:hover .ag-arw{transform:translateX(5px)}
@media(max-width:860px){.ag-intro-in{grid-template-columns:1fr}.ag-facts{grid-template-columns:1fr;gap:14px}.ag-facts li{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:baseline}.ag-facts b{margin:0}}
/* the description lands in two beats */
.ag-fx .ag-intro-l,.ag-fx .ag-intro-r{opacity:0;transform:translateY(20px);transition:opacity .9s ease,transform 1s cubic-bezier(.22,.7,.3,1)}
.ag-fx .ag-intro-r{transition-delay:.15s}
.ag-fx .ag-intro-l.in,.ag-fx .ag-intro-r.in{opacity:1;transform:none}
.pf-js .ag-it{transition-duration:.7s,.8s}