/* ============================================================
   MONOGRAM PORTFOLIO v21 (2026-10-15)
   Chris's NWCH flow in Monogram brand. Photos are never cropped.
   Navy #1A2D42 / #142334, paper #ECEEF1, Inter Tight + Inter.
   ============================================================ */
body[data-pagetype="portfolio"]{background:#fff}
html:has(.pf),body:has(.pf){overflow-x:clip}
.pf .kick{margin:0 0 14px;font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#5A6B7C}
.pf .kick.light{color:#AAB7B7}
.pf h1,.pf h2,.pf h3{font-family:var(--disp);letter-spacing:-.02em}

/* ---------- quiet chrome: no rate strip or side panel on portfolio pages (same as the homepage) ---------- */
html.pfsimp .mono-side,html.pfsimp .mono-topbar,html.pfsimp .mono-sheet,html.pfsimp .mono-sheet-scrim,html.pfsimp .mono-strip,html.pfsimp #hdr .mgq-wrap{display:none!important}
html.pfsimp{--mono-rail-w:0px!important}
html.pfsimp body{padding-right:0!important;margin-right:0!important}
html.pfsimp #hdr{top:0!important;right:0!important;width:auto!important}
.talk .field input,.talk .field textarea{background-image:none!important;padding-left:15px!important}

/* ---------- hero: the whole photo, below the header ---------- */
.pf-hero{margin-top:var(--pf-hd,74px)}
.pf-hero{padding:0!important}
.pf-hero figure{margin:0}
.pf-hero figure{background:#1A2D42}
.pf-hero img{display:block;width:100%;height:auto}

/* ---------- name line (NWCH slim band, Monogram navy) ---------- */
.pf-line{position:relative;background:#1A2D42;color:#fff;padding:12px}
.pf-line-frame{position:relative;border:1px solid rgba(192,200,202,.4);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;padding:38px clamp(22px,3vw,44px) 30px}
.pf-seal{position:absolute;top:0;left:50%;width:44px;height:auto;padding:8px;box-sizing:content-box;background:#1A2D42;transform:translate(-50%,-50%)}
.pf-line-mid{text-align:center}
.pf-line h1{margin:0;color:#fff;font-weight:600;font-size:clamp(30px,2.8vw,42px);line-height:1.05}
.pf-line-mid p{margin:8px 0 0;font:500 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#C0C8CA}
.pf-line-specs{margin:0;font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#C0C8CA;white-space:nowrap}
.pf-line-specs i{font-style:normal;color:#5A6B7C;margin:0 .35em}
.pf-line-go{justify-self:end;font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#fff;text-decoration:none;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.45);white-space:nowrap}
.pf-line-go .arw{display:inline-block;margin-left:8px;transition:transform .4s}
.pf-line-go:hover .arw{transform:translateX(5px)}

/* ---------- intro ---------- */
.pf-intro{background:#ECEEF1;padding:clamp(40px,4.6vw,72px) 22px;text-align:center}
.pf-intro p{max-width:36em;margin:0 auto;font:400 clamp(18px,1.5vw,22px)/1.6 var(--sans);color:#333a40}
.pf-intro .pf-intro-note{margin-top:14px;font:600 11px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#5A6B7C}

/* ---------- room cards: photo runs to the screen edge, text on the other side ---------- */
.rc{padding:clamp(28px,3vw,48px) 0}
.rc:nth-child(odd){background:#fff}
.rc:nth-child(even){background:#F4F5F7}
.rc-in{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,88px)}
.rc-r .rc-in{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
.rc.tall .rc-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.rc-ph{margin:0}
.rc-ph img{display:block;width:100%;height:auto;max-height:86vh;object-fit:contain;cursor:zoom-in}
.rc.tall .rc-ph img{width:auto;max-width:100%;margin:0 auto}
.rc-l .rc-copy{padding-right:clamp(22px,6vw,110px)}
.rc-r .rc-copy{padding-left:clamp(22px,6vw,110px);justify-self:end}
.rc-frame{max-width:440px}
.rc-copy h2{margin:0 0 22px;font-weight:600;font-size:clamp(30px,3vw,46px);line-height:1.04;color:#1a1d21}
.rc-copy ul{list-style:none;margin:0;padding:0}
.rc-copy li{position:relative;padding:12px 0 12px 22px;border-top:1px solid #DFE2E6;font:400 clamp(15px,1.1vw,17px)/1.55 var(--sans);color:#333a40}
.rc-copy li:last-child{border-bottom:1px solid #DFE2E6}
.rc-copy li::before{content:'';position:absolute;left:0;top:1.15em;width:7px;height:7px;background:#1A2D42}
/* staggered copy like the NWCH pages */
.rc-stack>.rc:nth-child(3n+2) .rc-copy{align-self:end;padding-bottom:clamp(20px,6vh,80px)}
.rc-stack>.rc:nth-child(3n) .rc-copy{align-self:start;padding-top:clamp(20px,6vh,80px)}

/* ---------- Lydia's spec tile, set beside a photo ---------- */
.gl-tile{break-inside:avoid;margin:0 0 16px}
.gl-ph img{display:block;width:100%;height:auto;cursor:zoom-in}
.gl-tile{background:#1A2D42;color:#fff;padding:clamp(30px,3vw,46px) clamp(24px,2.6vw,40px)}
.gl-tile h3{margin:0 0 18px;color:#fff;font-weight:600;font-size:clamp(26px,2.2vw,34px)}
.gl-pill{display:flex;flex-wrap:wrap;border:1px solid rgba(192,200,202,.45);border-radius:40px;padding:10px 6px;margin-bottom:22px}
.gl-pill span{flex:1 1 auto;text-align:center;padding:0 10px;font:600 10.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#fff;border-left:1px solid rgba(192,200,202,.35)}
.gl-pill span:first-child{border-left:0}
.gl-tile ul{list-style:none;margin:0 0 26px;padding:0}
.gl-tile li{position:relative;padding:6px 0 6px 18px;font:400 14.5px/1.5 var(--sans);color:rgba(255,255,255,.88)}
.gl-tile li::before{content:'';position:absolute;left:0;top:.95em;width:5px;height:5px;border-radius:50%;background:#AAB7B7}
.gl-btn{display:inline-block;padding:14px 24px;border:1px solid rgba(255,255,255,.7);border-radius:40px;font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;text-decoration:none;transition:background .3s,color .3s}
.gl-btn:hover{background:#fff;color:#1A2D42}

/* ---------- follow-on photos in each room: every photo at its own shape, nothing cropped ---------- */
.mx{max-width:1360px;margin:clamp(16px,1.8vw,26px) auto 0;padding:0 clamp(16px,3vw,40px);display:flex;flex-direction:column;gap:clamp(16px,1.8vw,26px)}
.mx-row{display:flex;gap:clamp(12px,1.4vw,20px);align-items:flex-start}
.mx-ph{margin:0;position:relative;min-width:0}
.mx-ph img,.mx-ph video{display:block;width:100%;height:auto;aspect-ratio:var(--r);background:#DFE2E6}
.mx-ph img{cursor:zoom-in}
.mx-pair .mx-ph{flex:var(--r) 1 0}
.mx-one .mx-ph{width:66%}
.mx-one.tall .mx-ph{width:44%}
.mx-one.to-r{justify-content:flex-end}
.mx-one.to-r .mx-ph{margin-left:auto}
.mx-tile{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:center;gap:clamp(16px,2.4vw,40px)}
.mx-tile.to-l .gl-tile{order:-1}
.mx-tile .gl-tile{margin:0}
.mx-vid video{object-fit:contain;pointer-events:none}
.mx-vid-tag{position:absolute;left:12px;top:12px;padding:7px 10px;background:rgba(20,35,52,.78);font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#fff}
.rc-r .rc-ph,.rc-l .rc-ph{min-width:0}

/* ---------- location (Lydia's band, our flow) ---------- */
.lo{background:linear-gradient(180deg,#142334 0%,#1A2D42 70%,#fff 70%);padding:clamp(80px,8vw,130px) 0 0;color:#fff}
.lo-tx{max-width:760px;margin-bottom:clamp(28px,3vw,44px)}
.lo-tx h2{margin:0 0 20px;color:#fff;font-weight:600;font-size:clamp(36px,4vw,60px);line-height:1.02}
.lo-tx p:not(.kick){margin:0;font:400 clamp(17px,1.3vw,19px)/1.65 var(--sans);color:rgba(255,255,255,.82);max-width:30em}
.lo-imgs{display:flex;gap:clamp(12px,1.4vw,20px);align-items:flex-start}
.lo-ph{margin:0;flex:var(--r) 1 0;min-width:0;background:#0f1a26}
.lo-ph img{width:100%;height:auto;display:block;cursor:zoom-in}
.lo-clip-in{aspect-ratio:var(--r)}
.lo-clip-in{display:flex;align-items:flex-end;justify-content:center;padding:18px;background:linear-gradient(160deg,#2E4156,#142334)}
.lo-clip-in span{width:100%;padding:10px 12px;border:1px dashed rgba(255,255,255,.6);font:600 11px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-align:center;color:#fff}
.lo-card{margin:clamp(48px,5vw,80px) auto 0;max-width:1040px;background:#1A2D42;border-radius:22px;padding:clamp(34px,4vw,60px) clamp(26px,4vw,64px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);box-shadow:0 30px 60px -30px rgba(20,35,52,.55)}
.lo-card h3{margin:0;color:#fff;font-weight:600;font-size:clamp(26px,2.4vw,36px);line-height:1.1}
.lo-card dl{margin:0}
.lo-card dl div{padding:0 0 16px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14)}
.lo-card dl div:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.lo-card dt{font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#AAB7B7;margin-bottom:8px}
.lo-card dd{margin:0;font:400 15.5px/1.6 var(--sans);color:rgba(255,255,255,.88)}

/* ---------- close: Start here + the form ---------- */
.talk{background:#142334;color:#fff;padding:clamp(90px,9vw,140px) 0;margin-top:clamp(80px,8vw,120px)}
.talk-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(40px,6vw,96px);align-items:start}
.talk-tx h2{margin:0 0 20px;color:#fff;font-weight:600;font-size:clamp(40px,4.6vw,66px);line-height:1.02}
.talk-tx p:not(.kick){margin:0 0 30px;font:400 17px/1.65 var(--sans);color:rgba(255,255,255,.78);max-width:30em}
.talk-call{display:inline-flex;align-items:center;gap:14px;color:#fff;text-decoration:none;font:600 22px/1.1 var(--disp)}
.talk-call small{display:block;font:600 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#AAB7B7;margin-bottom:6px}
.talk-ic{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center}
.talk-ic svg{width:20px;height:20px}
.talk-card{background:#fff;border-radius:20px;padding:clamp(26px,3vw,40px);color:#1a1d21}
.talk .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px}
.talk .field{display:flex;flex-direction:column;gap:7px}
.talk .field.full{grid-column:1/-1}
.talk .field label{font:700 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#1a1d21}
.talk .field input,.talk .field textarea{width:100%;padding:14px 15px;border:1.5px solid #DFE2E6;border-radius:12px;font:400 16px/1.4 var(--sans);color:#1a1d21;background:#F4F5F7;-webkit-appearance:none}
.talk .field textarea{min-height:110px;resize:vertical}
.talk .field input:focus,.talk .field textarea:focus{outline:none;border-color:#1A2D42;background:#fff;box-shadow:0 0 0 4px rgba(26,45,66,.12)}
.pf-intent{display:flex;flex-wrap:wrap;gap:8px}
.pf-intent label{cursor:pointer;margin:0}
.pf-intent label{position:relative}
.pf-intent input{position:absolute;opacity:0;pointer-events:none;width:1px!important;height:1px!important;left:0;top:0;padding:0!important;margin:0!important}
.pf-intent span{display:inline-block;padding:11px 16px;border:1.5px solid #D4D8DD;border-radius:30px;background:#fff;font:600 13.5px/1 var(--sans);color:#1a1d21;letter-spacing:0;text-transform:none;transition:.18s}
.pf-intent input:checked+span{background:#1A2D42;border-color:#1A2D42;color:#fff}
.talk .form-submit{grid-column:1/-1}
.talk .form-submit .btn{width:100%;padding:16px;border-radius:12px}

/* ---------- the other home ---------- */
.nx{padding:clamp(56px,6vw,90px) 0}
.nx-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;text-decoration:none;color:inherit}
.nx figure{margin:0;overflow:hidden}
.nx img{display:block;width:100%;height:auto;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.nx-in:hover img{transform:scale(1.02)}
.nx h2{margin:0;font-weight:600;font-size:clamp(34px,3.6vw,54px);color:#1a1d21}
.nx-where{margin:10px 0 24px;font:500 12px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#5A6B7C}
.nx-go{font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#1A2D42;border-bottom:1.5px solid #1A2D42;padding-bottom:6px}
.nx-go .arw{display:inline-block;margin-left:8px;transition:transform .4s}
.nx-in:hover .arw{transform:translateX(5px)}

/* ---------- floating tour button (gets people to the form, never blocks the photos) ---------- */
.pf-float{position:fixed;right:22px;bottom:22px;z-index:60;padding:15px 24px;border-radius:40px;background:#1A2D42;color:#fff;text-decoration:none;
  font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;box-shadow:0 14px 30px -12px rgba(20,35,52,.6);
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s,transform .35s}
.pf-float.on{opacity:1;transform:none;pointer-events:auto}

/* ---------- gentle rise on the room text only; photos never fade (page is never blank) ---------- */
.pf-js .rc-copy{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.7,.3,1)}
.pf-js .rc-copy.in{opacity:1;transform:none}

/* ---------- lightbox ---------- */
.pf-lb{position:fixed;inset:0;z-index:600;background:rgba(10,14,18,.96);display:none;align-items:center;justify-content:center}
.pf-lb.on{display:flex}
.pf-lb img{max-width:92vw;max-height:88vh;object-fit:contain}
.pf-lb button{position:absolute;background:none;border:0;color:rgba(255,255,255,.75);font-size:40px;cursor:pointer;padding:14px}
.pf-lb .x{top:14px;right:20px}.pf-lb .p{left:10px;top:50%;transform:translateY(-50%)}.pf-lb .n{right:10px;top:50%;transform:translateY(-50%)}

/* ---------- tablets ---------- */
@media(max-width:1100px){
  .lo-card{grid-template-columns:1fr}
  .talk-grid{grid-template-columns:1fr}
}
/* ---------- phones ---------- */
@media(max-width:860px){
  .pf-line{padding:9px}
  .pf-line-frame{grid-template-columns:1fr;gap:14px;text-align:center;padding:34px 16px 22px}
  .pf-line-specs{order:2;white-space:normal}
  .pf-line-go{order:3;justify-self:center}
  .pf-intro p{font-size:17px}
  .rc{padding:18px 0 34px}
  .rc-in,.rc-r .rc-in,.rc.tall .rc-in{grid-template-columns:1fr;gap:22px}
  .rc-r .rc-ph{order:-1}
  .rc-l .rc-copy,.rc-r .rc-copy{padding:0 22px;justify-self:stretch}
  .rc-stack>.rc .rc-copy{padding-top:0!important;padding-bottom:0!important}
  .rc.tall .rc-ph img{width:100%}
  .mx{padding:0 12px}
  .mx-pair.ll,.mx-tile{display:flex;flex-direction:column;align-items:stretch}
  .mx-pair.ll .mx-ph{flex:none;width:100%}
  .mx-tile.to-l .gl-tile{order:0}
  .mx-one .mx-ph{width:100%}
  .mx-one.tall .mx-ph{width:72%}
  .lo-imgs{flex-direction:column}
  .lo-ph{flex:none;width:100%}
  .lo{background:linear-gradient(180deg,#142334 0%,#1A2D42 82%,#fff 82%)}
  .talk .form-grid{grid-template-columns:1fr}
  .nx-in{grid-template-columns:1fr}
  .pf-float{left:50%;right:auto;transform:translate(-50%,12px);bottom:84px}
  .pf-float.on{transform:translate(-50%,0)}
}

/* ---------- room title stays pinned under the header while that room scrolls by ---------- */
.rc{padding-top:0}
.rm-tag{position:sticky;top:72px;z-index:20;margin-bottom:clamp(20px,2.4vw,36px)}
.rm-tag-in{max-width:1360px;margin:0 auto;padding:12px clamp(16px,3vw,40px);display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);border-bottom:1px solid #DFE2E6}
.rc:nth-child(even) .rm-tag-in{background:rgba(244,245,247,.9)}
.rm-tag b{font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#1A2D42}
.rm-tag span{font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#5A6B7C;font-variant-numeric:tabular-nums}
.rm-tag-in{max-width:none;padding-left:max(clamp(16px,3vw,40px),calc(50% - 640px));padding-right:max(clamp(16px,3vw,40px),calc(50% - 640px))}
/* soft reveal: photos rise into place once, then sit still and whole */
.pf-js .rc-ph,.pf-js .mx-ph,.pf-js .gl-tile{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.22,.7,.3,1)}
.pf-js .rc-ph.in,.pf-js .mx-ph.in,.pf-js .gl-tile.in{opacity:1;transform:none}
@media(max-width:860px){
  .rm-tag{top:64px}
  .rm-tag-in{padding:11px 16px}
  .rc{padding-top:0}
}
@media (prefers-reduced-motion:reduce){.pf-js .rc-ph,.pf-js .mx-ph,.pf-js .gl-tile{opacity:1;transform:none;transition:none}}

/* ---------- title bar: the site's plan-page bar (fphero-onebar), tuned for four specs on phones ---------- */
@media(max-width:860px){
  .pf-bar .fpob-specs{display:flex}
  .pf-bar .fpob-spec{flex:1;border-bottom:none!important;border-right:1px solid rgba(255,255,255,.1)!important}
  .pf-bar .fpob-spec:last-child{border-right:none!important}
  .pf-bar .fphero-actions{width:100%}
  .pf-bar .fphero-actions .btn{width:100%;justify-content:center}
}
@media(max-width:860px){.pf-hero{margin-top:64px}}

/* ---------- full-width moments: the best wide shots edge to edge, whole, with one line below ---------- */
.mo{margin:0;padding:0!important;background:#1A2D42}
.mo-ph{margin:0}
.mo-ph img{display:block;width:100%;height:auto;cursor:zoom-in}
.mo-line{margin:0;padding:clamp(22px,2.6vw,36px) max(16px,env(safe-area-inset-left,0px));text-align:center;color:#fff;
  font:600 clamp(20px,2vw,30px)/1.25 var(--disp);letter-spacing:-.02em;text-wrap:balance}
.pf-js .mo-line{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform 1s cubic-bezier(.22,.7,.3,1)}
.pf-js .mo-line.in{opacity:1;transform:none}
.mo + .rc{border-top:0}