/* Liberty Partners — Portfolio page */
  /* Cinematic header — full-bleed photography with overlaid headline */
  .pf-hero { position: relative; min-height: clamp(660px, 92vh, 1040px); display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); }
  .pf-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pf-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,35,54,.76) 0%, rgba(15,35,54,.48) 32%, rgba(15,35,54,.12) 60%, rgba(15,35,54,0) 82%), linear-gradient(180deg, rgba(15,35,54,.28) 0%, rgba(15,35,54,0) 34%, rgba(15,35,54,.44) 100%); }
  .pf-hero .inner { position: relative; z-index: 2; max-width: none; width: 100%; margin: 0; padding: 0 var(--gutter) clamp(56px, 6vw, 96px); color: var(--paper); }
  .pf-hero .eyebrow { display: flex; align-items: center; gap: 14px; max-width: 760px; color: var(--paper-2); text-shadow: 0 1px 10px rgba(15,35,54,.5); }
  .pf-hero .eyebrow .line { flex: 0 0 48px; height: 1px; background: var(--paper-3); opacity: .7; }
  .pf-hero h1 { font-family: var(--font-body); font-weight: 300; font-size: clamp(46px, 5.8vw, 92px); line-height: 0.98; letter-spacing: -0.03em; margin: 22px 0 0; max-width: 760px; color: var(--paper); text-wrap: balance; }
  .pf-hero h1 em { font-style: italic; color: var(--brass); }
  .pf-hero p { font-family: var(--font-body); font-weight: 300; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--paper-2); margin: 24px 0 0; max-width: 460px; }
  .pf-hero .credit { position: absolute; z-index: 2; top: 28px; right: var(--gutter); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-3); }
  @media (max-width: 720px) { .pf-hero { min-height: 72vh; } .pf-hero .credit { display: none; } }

  .filter-bar {
    position: sticky; top: 72px;
    background: color-mix(in oklab, var(--paper) 92%, transparent);
    backdrop-filter: blur(12px);
    z-index: 20;
    padding: 18px var(--gutter);
    border-bottom: 1px solid var(--rule);
    display: flex; justify-content: space-between; align-items: center; gap: 32px;
  }
  .chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .chip {
    font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 8px 14px; border: 1px solid var(--rule); color: var(--ink-soft);
    background: transparent; cursor: pointer; transition: all .2s var(--ease);
    white-space: nowrap;
  }
  .chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .filter-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.08em; }

  .portfolio { padding: 64px var(--gutter) var(--s-10); max-width: var(--max-w); margin: 0 auto; }
  .pf-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px 32px; }

  .pf-card { cursor: pointer; display: flex; flex-direction: column; transition: transform .3s var(--ease); }
  .pf-card:hover { transform: translateY(-4px); }
  .pf-card .ph { width: 100%; overflow: hidden; background: var(--paper-3); }
  .pf-card .ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease-out); }
  .pf-card:hover .ph img { transform: scale(1.04); }
  .pf-card .meta { padding: 18px 0 0; display: flex; flex-direction: column; gap: 4px; }
  .pf-card .num { font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 0.1em; }
  .pf-card h3 { font-family: var(--font-body); font-size: 28px; font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; margin: 6px 0 4px; }
  .pf-card .loc { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
  .pf-card .tags { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
  .pf-card .tg { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--rule); padding: 5px 10px; }

  .pf-card.feature { grid-column: span 8; }
  .pf-card.feature .ph { aspect-ratio: 16 / 10; }
  .pf-card.feature h3 { font-size: 42px; }
  .pf-card.half { grid-column: span 6; }
  .pf-card.half .ph { aspect-ratio: 3 / 2; }
  .pf-card.third { grid-column: span 4; }
  .pf-card.third .ph { aspect-ratio: 4 / 5; }

  .pf-spread {
    grid-column: span 12;
    display: grid; grid-template-columns: 220px 1fr; gap: 64px; align-items: end;
    padding: 40px 0 8px; border-top: 1px solid var(--rule); margin-top: 24px;
  }
  .pf-spread:first-child { border-top: 0; margin-top: 0; padding-top: 8px; }
  .pf-spread h2 { font-family: var(--font-body); font-weight: 300; font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; margin: 12px 0 0; }
  .pf-spread h2 em { color: var(--accent); font-style: italic; }
  .pf-spread p { font-family: var(--font-body); font-size: 18px; line-height: 1.5; color: var(--ink-soft); margin: 10px 0 0; max-width: 520px; }
  .pf-spread.split > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .pf-spread.split p { max-width: none; margin-top: 0; }

  /* Section headers — numbered, full grid width */
  .flag-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px 24px; padding: 8px 0 20px; }
  .flag-head .eyebrow { color: var(--ink-soft); }
  .flag-head .coord { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-soft); }
  .coll-head { grid-column: 1 / -1; border-top: 1px solid var(--rule); margin-top: 24px; padding: 38px 0 16px; }
  .coll-head .top { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
  .coll-head .top .eyebrow { color: var(--ink-soft); }
  .coll-head .top .coord { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-soft); }
  .coll-head .ch-row { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(32px, 5vw, 72px); align-items: end; margin-top: 20px; }
  .coll-head h2 { font-family: var(--font-body); font-weight: 300; font-size: clamp(40px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.025em; margin: 0; }
  .coll-head h2 em { color: var(--accent); font-style: italic; }
  .coll-head p { font-family: var(--font-body); font-size: 18px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 6px; max-width: none; }
  @media (max-width: 720px) { .coll-head .ch-row { grid-template-columns: 1fr; gap: 14px; } .flag-head .coord, .coll-head .top .coord { display: none; } }

  /* Commission CTA card */
  .pf-cta {
    grid-column: span 6;
    background: var(--coastal-deep); color: var(--paper);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 44px; gap: 32px;
  }
  .pf-cta .eyebrow { color: var(--sky); }
  .pf-cta h3 { font-family: var(--font-body); font-weight: 300; font-size: 34px; line-height: 1.1; letter-spacing: -0.015em; margin: 14px 0 0; }
  .pf-cta h3 em { color: var(--sky); font-style: italic; }
  .pf-cta .btn { color: var(--paper); border-color: rgba(255,255,255,.5); align-self: flex-start; }
  .pf-cta .btn:hover { background: var(--sky); color: var(--ink); border-color: var(--sky); }

  @media (max-width: 1080px) {
    .pf-card.feature { grid-column: span 12; }
    .pf-card.half, .pf-card.third, .pf-cta { grid-column: span 6; }
  }
  @media (max-width: 720px) {
    .pf-card.half, .pf-card.third, .pf-cta { grid-column: span 12; }
    .pf-spread { grid-template-columns: 1fr; gap: 12px; }
    .pf-spread.split > div:last-child { grid-template-columns: 1fr; gap: 12px; }
    .page-head .inner, .filter-bar { grid-template-columns: 1fr; }
    .filter-bar { flex-direction: column; align-items: flex-start; gap: 14px; }
  }

  /* Whitemarsh Cove neighborhood advert */
  .nbhd { grid-column: span 12; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; background: var(--paper-2); border: 1px solid var(--rule); padding: clamp(30px, 4vw, 56px); margin-bottom: 8px; }
  .nbhd-copy { display: flex; flex-direction: column; justify-content: center; }
  .nbhd h2 { font-family: var(--font-body); font-weight: 300; font-size: clamp(38px, 4.2vw, 60px); line-height: 1.0; letter-spacing: -0.025em; margin: 14px 0 0; }
  .nbhd h2 em { color: var(--accent); font-style: italic; }
  .nbhd p { font-family: var(--font-body); font-size: 18px; line-height: 1.55; color: var(--ink-soft); margin: 18px 0 0; max-width: 48ch; }
  .nbhd .stats { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--rule); margin-top: 28px; padding-top: 4px; }
  .nbhd .stat { padding: 16px 22px 0 0; margin-right: 22px; border-right: 1px solid var(--rule-soft); }
  .nbhd .stat:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
  .nbhd .stat .v { font-family: var(--font-body); font-weight: 300; font-size: 26px; line-height: 1; letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; }
  .nbhd .stat .v em { color: var(--accent); font-style: normal; }
  .nbhd .stat .k { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; }
  .nbhd .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
  .nbhd-cta { position: relative; display: flex; align-items: flex-end; min-height: 360px; overflow: hidden; background: var(--ink); text-decoration: none; }
  .nbhd-cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
  .nbhd-cta:hover img { transform: scale(1.05); }
  .nbhd-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,43,69,.08) 0%, rgba(14,43,69,.28) 44%, rgba(14,43,69,.86) 100%); }
  .nbhd-cta-copy { position: relative; z-index: 2; padding: clamp(24px, 3vw, 38px); color: var(--paper); }
  .nbhd-cta-copy .eyebrow { color: var(--sky); }
  .nbhd-cta-copy h3 { font-family: var(--font-body); font-weight: 300; font-size: clamp(25px, 2.3vw, 34px); line-height: 1.08; letter-spacing: -0.02em; margin: 12px 0 0; max-width: 18ch; }
  .nbhd-cta-copy h3 em { color: var(--sky); font-style: italic; }
  .nbhd-cta-copy .link { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); }
  .nbhd-cta-copy .link .arrow { display: inline-block; transition: transform .25s var(--ease); }
  .nbhd-cta:hover .link .arrow { transform: translateX(5px); }
  /* Interior slider (replaces the static advert image) */
  .nbhd-slider { position: relative; min-height: 360px; overflow: hidden; background: var(--ink); }
  .nbhd-slider .ns { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease); }
  .nbhd-slider .ns.on { opacity: 1; }
  .nbhd-slider::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(14,43,69,0) 40%, rgba(14,43,69,.22) 66%, rgba(14,43,69,.72) 100%); }
  .nbhd-slider-copy { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; justify-content: flex-end; padding: clamp(24px, 3vw, 38px); color: var(--paper); text-decoration: none; }
  .nbhd-slider-copy .eyebrow { color: var(--sky); }
  .nbhd-slider-copy h3 { font-family: var(--font-body); font-weight: 300; font-size: clamp(25px, 2.3vw, 34px); line-height: 1.08; letter-spacing: -0.02em; margin: 12px 0 0; max-width: 18ch; }
  .nbhd-slider-copy h3 em { color: var(--sky); font-style: italic; }
  .nbhd-slider-copy .link { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); }
  .nbhd-slider-copy .link .arrow { display: inline-block; transition: transform .25s var(--ease); }
  .nbhd-slider:hover .link .arrow { transform: translateX(5px); }
  .nbhd-tagline { position: absolute; z-index: 3; left: clamp(24px, 3vw, 38px); right: clamp(24px, 3vw, 38px); bottom: clamp(30px, 3.4vw, 42px); color: var(--paper); font-family: var(--font-body); font-weight: 300; font-style: normal; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.12; letter-spacing: -0.015em; text-shadow: 0 1px 14px rgba(14,35,54,.5); max-width: 20ch; }
  .nbhd-tagline em { font-style: italic; color: var(--sky); }
  .nbhd-dots { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: clamp(20px, 2.4vw, 26px); display: flex; gap: 9px; }
  .nbhd-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.42); cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease); }
  .nbhd-dots button.on { background: var(--paper); transform: scale(1.2); }
  .pf-card.feature.full { grid-column: span 12; }
  .pf-card.feature.full .ph { aspect-ratio: 16 / 9; }
  .portfolio.collection { padding-top: 24px; }
  .pf-cta.full { grid-column: span 12; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; }
  .pf-cta.full h3 { max-width: 20ch; }
  @media (max-width: 900px) { .nbhd { grid-template-columns: 1fr; gap: 28px; } .nbhd-cta { min-height: 260px; } }
  @media (max-width: 720px) { .pf-cta.full { flex-direction: column; align-items: flex-start; gap: 24px; } }