/* Denis Group — shared stylesheet.
   Used by index.html, the seven property pages, privacy and accessibility.
   Edit here once and every page updates. */

  :root{
    --teal:#093341; --teal-2:#315762; --slate:#50728B;
    --crimson:#751113; --red:#9F2321; --rust:#8F4031; --ember:#BB5434;
    --gold:#CFA95E; --gold-2:#B69351; --bronze:#7F5F2C;
    --paper:#F7F3EA; --paper-2:#EFE9DC;
    --line:rgba(9,51,65,.16);
    --display:'Source Serif 4', Georgia, serif;
    --body:'Public Sans', system-ui, sans-serif;
    --mono:'Public Sans', system-ui, sans-serif;
  }
  html{color-scheme:light only;background:var(--paper);-webkit-text-size-adjust:100%}
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{font-family:var(--body);font-size:1rem;color:var(--teal);background:var(--paper) !important;line-height:1.6}
  a{color:inherit}
  a,button,summary{outline-offset:3px}
  :focus-visible{outline:3px solid var(--crimson)}
  h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15}
  /* Orphan control. On a phone the headings were breaking so that the last
     word dropped alone onto its own line — "Speak Directly With the / Team".
     `balance` evens the lines of a short heading out; `pretty` does the same
     job for the last line of a paragraph. Both are ignored by older browsers,
     which simply wrap the way they did before. */
  h1,h2,h3,.prop-eyebrow,.aff-lede,.tl-year,.team-role{text-wrap:balance}
  p,.tl-note,.team-bio,.mark-row span,.glance b,.v-item b{text-wrap:pretty}
  /* Long unbroken strings — the contact address is 26 characters — have room
     at 390px but not on a 320px phone. This lets them break rather than push
     the layout sideways. */
  .ess b,.office p,.aff-lede{overflow-wrap:break-word}
  .v-item b{overflow-wrap:anywhere}
  .mono{font-family:var(--mono)}
  .wrap{max-width:1140px;margin:0 auto;padding:0 1.25rem}
  section[id]{scroll-margin-top:5.5rem}
  .skip-link{position:fixed;left:1rem;top:1rem;z-index:1000;background:var(--paper);color:var(--teal);padding:.7rem 1rem;border:2px solid var(--crimson);transform:translateY(-160%)}
  .skip-link:focus{transform:translateY(0)}

  .strands{display:flex;height:6px}
  .strands i{flex:1}

  /* mini nav */
  .mini{position:sticky;top:0;z-index:100;background:#F7F3EA;border-bottom:1px solid var(--line)}
  .mini .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:.55rem;padding-bottom:.55rem}
  .mini .brand{font-family:var(--display);font-weight:600;letter-spacing:.1em;font-size:.98rem;text-decoration:none}
  /* V2 fix: space-between only centres the nav if the two outer items match in
     width. "DENIS GROUP" is ~37px wider than the phone number, so the links sat
     ~18px right of true centre — which read as the wordmark below being left.
     Equal flex basis on both outer items forces the nav onto the page centre
     axis, matching the masthead exactly. */
  .mini .brand,.mini .tel{flex:1 1 0;min-width:0;white-space:nowrap}
  .mini .tel{text-align:right}
  .mini nav{display:flex;gap:1.3rem;font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
  /* One native link owns pointer hover, keyboard focus, touch, and navigation.
     Keeping those states on the same box avoids iPad Safari disagreeing with a
     smaller child span about what is actually under the pointer. */
  .mini nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:24px;
              padding:0 .3rem;line-height:1.2;white-space:nowrap;text-decoration:none;color:#24444F;
              cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:rgba(117,17,19,.12)}
  @media(any-hover:hover){
    .mini nav a:hover{color:var(--crimson);background:rgba(117,17,19,.055);box-shadow:inset 0 -2px var(--crimson)}
  }
  .mini nav a:active,.mini nav a:focus-visible,.mini nav a[aria-current]{color:var(--crimson);box-shadow:inset 0 -2px var(--crimson)}
  .mini nav a:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
  @media(max-width:700px){
    .mini .wrap{flex-wrap:wrap;gap:.45rem 1rem}
    /* V2: nav links centred in the scroll rail. `safe center` keeps them centred
       when they fit and falls back to left-aligned when they overflow, so the
       first link is never clipped out of reach on narrow phones. */
    .mini nav{display:flex;order:3;width:100%;overflow-x:auto;padding:0;gap:.95rem;scrollbar-width:thin;
              justify-content:center;justify-content:safe center}
    /* The links are 11px type with no box of their own, which left a tap target
       about 16px tall — under half what a thumb needs. The padding is invisible
       but roughly doubles the target. */
    .mini nav a{min-height:44px;padding:0 .1rem}
  }
  .mini .tel{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;text-decoration:none;color:var(--crimson);font-weight:600}

  /* A touchscreen remains available when an iPad has a trackpad attached, so
     the links retain a 44px finger target. On tablet-width touch layouts the
     visible label sits near the bottom of that box: only .2rem remains below
     the word, while the additional touch space is above it. The label itself
     stays centred with the brand and phone inside the 68px header. */
  @media (any-pointer:coarse){
    .mini nav a{min-height:44px}
  }
  @media (min-width:701px) and (any-pointer:coarse){
    .mini .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
                align-items:center;min-height:68px;padding-top:0;padding-bottom:0}
    .mini .brand{justify-self:start}
    .mini .tel{justify-self:end}
    .mini nav{align-self:start;height:44px}
    .mini nav a{height:44px;align-items:flex-end;padding:0 .3rem .2rem}
  }

  /* masthead */
  .masthead{border-bottom:1px solid var(--line);background:var(--paper)}
  /* V2: logo pinned hard left; wordmark sits on the page centre axis.
     Columns 1 and 3 are equal (1fr), so the middle column is exactly centred —
     and because .mast-grid and .mini .wrap share max-width:1140px + 1.25rem
     padding, that axis is identical to the nav bar's centre. The ::after
     pseudo-element supplies column 3, so no extra markup is needed. */
  .mast-grid{display:grid;grid-template-columns:1fr minmax(0,440px) 1fr;gap:1.6rem;align-items:center;padding:2.4rem 1.25rem 2.2rem;max-width:1140px;margin:0 auto}
  .mast-grid::after{content:"";display:block}
  @media(max-width:1000px){.mast-grid{grid-template-columns:1fr minmax(0,360px) 1fr;gap:1.1rem}}
  @media(max-width:760px){.mast-grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1.6rem}.mast-grid::after{display:none}}
  .logo-box{justify-self:start}
  @media(max-width:760px){.logo-box{justify-self:center}}
  .logo-box svg{width:100%;max-width:300px;height:auto;display:block}
  @media(max-width:760px){.logo-box svg{max-width:190px}}
  .wordmark{width:100%;text-align:center}
  .wordmark .lock{display:block;text-align:center}
  .wordmark h1{font-size:clamp(2rem,4.6vw,3rem);letter-spacing:.08em;margin-right:-.2em;font-weight:600}
  .wordmark .sub{font-family:var(--mono);font-weight:600;letter-spacing:.3em;margin-right:-.3em;font-size:clamp(.6rem,1.4vw,.76rem);color:#6B4F23;margin-top:.45rem;text-transform:uppercase}
  /* V2 fix: was `margin:1.25rem 0 0` — left/right margins of 0 left this 42ch
     block flush against the left edge of the wordmark column. Its text centred
     within itself, so the paragraph read ~26px left of true centre while the
     heading above it sat dead centre. `auto` centres the block itself. */
  .wordmark .intro{max-width:42ch;margin:1.25rem auto 0;color:#2A4C59;font-size:1.05rem;line-height:1.6;text-align:center}
  .mast-actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;width:100%;margin-top:1.25rem}

  .essentials{border-top:1px solid var(--line);background:var(--paper-2)}
  .ess-grid{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;margin:0 auto}
  @media(max-width:860px){.ess-grid{grid-template-columns:repeat(2,1fr)}.ess{padding:1rem 1.25rem}}
  @media(max-width:640px){.ess-grid{grid-template-columns:1fr}.ess{border-left:none;border-top:1px solid var(--line);padding:.8rem 1.25rem}.ess:first-child{border-top:none}.ess b{white-space:normal;overflow-wrap:anywhere}}
  .ess{padding:1rem 2.2rem;border-left:1px solid var(--line);text-decoration:none;display:block}
  .ess:first-child{border-left:none}
  @media(max-width:860px){.ess:nth-child(3){border-left:none}.ess:nth-child(n+3){border-top:1px solid var(--line)}}
  .ess span{font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-2);display:block}
  .ess b{font-family:var(--display);font-weight:600;font-size:.98rem;letter-spacing:.01em}
  .ess:hover b{color:var(--crimson)}

  /* film */
  .film{background:var(--teal) !important;padding:0}
  .film .wrap{padding-top:3.2rem;padding-bottom:3.2rem}
  .film-frame{border:1px solid rgba(207,169,94,.45);padding:10px;background:#082b37}
  .film-video{aspect-ratio:16/9;background:#062430}
  .film-video iframe{width:100%;height:100%;border:0;display:block}
  .film-slot{aspect-ratio:16/9;background:#062430;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;color:#A6C3CD;cursor:pointer;text-decoration:none}
  .film-slot:hover .ring{border-color:var(--gold)}
  .ring{width:70px;height:70px;border:1px solid rgba(207,169,94,.6);border-radius:50%;display:flex;align-items:center;justify-content:center}
  .ring::after{content:"";border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent var(--gold);margin-left:4px}
  .film-slot small{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase}
  .film-cap{display:flex;justify-content:space-between;gap:1rem;color:#C6D6DC;font-size:1.02rem;margin-top:.9rem;flex-wrap:wrap}
  .film-cap .mono{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

  /* sections */
  .sect{padding:4rem 0 4.5rem;background:var(--paper)}
  .sect-head{display:flex;align-items:baseline;gap:1.25rem;border-bottom:1px solid var(--line);padding-bottom:1rem}
  .sect-head h2{font-size:clamp(1.6rem,3.4vw,2.2rem);letter-spacing:.04em}
  .sect-head .mono{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-2);white-space:nowrap}
  .sect-note{margin-top:1rem;color:#2A4C59;max-width:64ch;font-size:1.05rem}
  .small-note{color:#49636c;font-size:.88rem;max-width:76ch;margin-top:1.25rem}
  .portfolio-cta{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-top:1.5rem}

  /* legend */
  .legend{display:flex;gap:1.4rem;flex-wrap:wrap;padding:.9rem 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#24444F}
  .legend i{display:inline-block;width:10px;height:10px;margin-right:.45rem;transform:translateY(1px)}

  /* expandable property rows */
  details.prop{border-bottom:1px solid var(--line)}
  details.prop summary{display:grid;grid-template-columns:6px 3rem 1fr auto;gap:0 1.5rem;align-items:center;padding:1.35rem 0;cursor:pointer;list-style:none}
  details.prop summary::-webkit-details-marker{display:none}
  details.prop summary:hover h3{color:var(--crimson)}
  .strand{width:6px;align-self:stretch;min-height:56px}
  .num{font-family:var(--mono);font-weight:600;color:var(--slate);font-size:.78rem;align-self:start;padding-top:.3rem}
  .prop h3{font-size:1.3rem;letter-spacing:0;font-weight:600}
  .addr{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.06em;color:var(--teal-2);margin-top:.3rem;text-transform:uppercase}
  .use{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin-top:.55rem;color:#24444F}
  .use i{width:9px;height:9px;flex:none}
  .chev{font-family:var(--mono);color:var(--slate);font-size:1.1rem;transition:transform .25s;padding:0 .25rem}
  details.prop[open] .chev{transform:rotate(45deg);color:var(--crimson)}
  @media(prefers-reduced-motion:reduce){.chev{transition:none}}
  .prop-body{padding:0 0 2rem calc(6px + 4.5rem)}
  @media(max-width:640px){details.prop summary{grid-template-columns:6px 2.2rem 1fr auto;gap:0 1rem}.prop-body{padding-left:calc(6px + 1rem)}}
  .prop-body .desc{color:#2A4C59;font-size:1.06rem;max-width:60ch}
  .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem 1.5rem;margin-top:1.2rem;max-width:720px}
  .facts div span{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-2);display:block}
  .facts div b{font-family:var(--display);font-weight:600;font-size:.98rem}
  /* .facts .tofill greyed out placeholder figures during drafting. All the
     facts are filled in, so the rule has nothing left to match. */
  .tenants{margin-top:1.2rem;font-size:1.02rem;color:#2A4C59}
  .tenants b{font-weight:600;color:var(--teal)}
  .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1.3rem;max-width:820px}
  @media(max-width:640px){
    .shots{grid-template-columns:1fr 1fr}
    /* Every gallery on the site holds exactly three photos. Dropped into two
       columns the third sat alone with an empty cell beside it, which read as
       a fourth photo that had failed to load. Spanning it across both columns
       closes the hole; the wider crop suits a full-width slot better than 4:3. */
    .shots .shot:nth-child(3):last-child{grid-column:1/-1;aspect-ratio:16/9}
  }
  .shot{aspect-ratio:4/3;background:var(--paper-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#9a917f;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}
  img.shot{object-fit:cover;width:100%;height:100%;color:transparent}

  /* story */
  .story{background:var(--teal) !important;color:var(--paper)}
  .story .sect-head{border-color:rgba(247,243,234,.2)}
  .story .sect-head .mono{color:var(--gold-2)}
  .story-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:3rem;padding-top:2.2rem;align-items:start}
  @media(max-width:820px){.story-grid{grid-template-columns:1fr}}
  .story p{color:#E2ECEF;margin-top:1rem;max-width:58ch;font-size:1.14rem;line-height:1.68}
  .story p:first-child{margin-top:0}
  .story p b{color:var(--paper);font-weight:600}
  .marks{margin-top:1.8rem;border-top:1px solid rgba(247,243,234,.18)}
  .mark-row{display:grid;grid-template-columns:1.4rem 1fr;gap:.9rem;padding:.85rem 0;border-bottom:1px solid rgba(247,243,234,.12);align-items:baseline}
  .mark-row i{height:2px;background:var(--gold);align-self:center}
  .mark-row span{color:#E2ECEF}
  .mark-row b{color:var(--paper);font-weight:600}

  /* team */
  .team-intro{margin-top:1rem;color:#2A4C59;max-width:68ch;font-size:1.05rem}
  .team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2rem}
  .team-member{position:relative;border:1px solid var(--line);border-top:4px solid var(--crimson);background:var(--paper-2);padding:1.5rem 1.35rem;min-height:130px;display:flex;flex-direction:column;justify-content:center}
  .team-member:nth-child(2){border-top-color:var(--red)}
  .team-member:nth-child(3){border-top-color:var(--rust)}
  .team-member:nth-child(4){border-top-color:var(--gold-2)}
  .team-member h3{font-size:1.25rem;margin-top:0}
  .team-role{display:block;margin-top:.45rem;color:var(--crimson);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
  @media(max-width:860px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:520px){.team-grid{grid-template-columns:1fr}}

  /* V2: link from a portfolio block out to its full property page. */
  .prop-more{display:inline-block;margin-top:1.2rem;font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson);text-decoration:none;border-bottom:1px solid rgba(117,17,19,.35);padding-bottom:.2rem}
  .prop-more:hover{border-bottom-color:var(--crimson)}

  /* V2: affiliates band — deliberately quiet. Sits under the team, separated by a
     hairline rule, no cards or borders. Logos rest at 45% so they read as a
     texture rather than competing with the portfolio, and come up to full
     strength on hover/focus. */
  .affiliates{margin-top:3rem;padding-top:1.8rem;border-top:1px solid var(--line)}
  /* the affiliates band is the last thing in the team section, so trim that
     section's tall bottom padding -- otherwise the short logos leave a
     visible empty band before the next section. */
  #team{padding-bottom:2.4rem}
  .aff-lede{margin:0;color:#5A6E76;font-size:.92rem}
  .aff-lede .mono{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--crimson);margin-right:.7rem}
  .aff-row{list-style:none;margin:1.35rem 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem 3.4rem}
  .aff-row li{display:flex}
  /* Each logo is two stacked images: house-teal at rest, the company's real
     full-colour logo on hover/focus. Both are cropped to the same proportions
     so the swap never changes the footprint. */
  .aff{position:relative;display:flex;align-items:center;min-height:52px;text-decoration:none}
  .aff img{height:var(--h,44px);width:auto;max-width:180px;object-fit:contain;transition:opacity .28s ease}
  .aff .aff-mono{opacity:.45}
  .aff .aff-colour{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none}
  .aff:hover .aff-mono,.aff:focus-visible .aff-mono{opacity:0}
  .aff:hover .aff-colour,.aff:focus-visible .aff-colour{opacity:1}
  @media(max-width:640px){
    /* As a wrapping flex row the four logos broke three-and-one, leaving a
       single brand stranded on its own line. A fixed two-column grid pairs
       them 2x2 instead, which reads as deliberate rather than left over. */
    .aff-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1.2rem;align-items:center}
    .aff-row li{justify-content:center}
    .aff img{height:calc(var(--h,44px) * .82);max-width:100%}
    .aff .aff-mono{opacity:.6}
  }
  /* Touch devices have no hover, so show the real logos outright. */
  @media(hover:none){
    .aff .aff-mono{opacity:0}
    .aff .aff-colour{opacity:1}
  }
  @media(prefers-reduced-motion:reduce){.aff img{transition:none}}

  .btn{display:inline-block;background:var(--crimson);color:var(--paper);text-decoration:none;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.85rem 1.3rem}
  .btn:hover{background:var(--red)}
  .btn.ghost{background:transparent;color:var(--crimson);border:1px solid var(--crimson)}
  .btn.ghost:hover{background:rgba(117,17,19,.06)}

  /* visit + contact */
  .visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-top:none}
  @media(max-width:820px){.visit-grid{grid-template-columns:1fr}}
  .visit-list{display:flex;flex-direction:column}
  .v-item{padding:1.15rem 1.4rem;border-bottom:1px solid var(--line);text-decoration:none;display:block}
  .v-item span{font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-2);display:block;margin-bottom:.2rem}
  .v-item b{font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:.01em}
  .v-item:hover b{color:var(--crimson)}
  .contact-cta{border-left:1px solid var(--line);padding:1.6rem;display:flex;flex-direction:column;justify-content:center;background:var(--paper-2)}
  .contact-cta .mono{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--crimson)}
  .contact-cta h3{font-size:1.45rem;margin-top:.5rem}
  .contact-cta p{color:#2A4C59;margin-top:.8rem;max-width:45ch}
  .contact-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem}
  @media(max-width:820px){.contact-cta{border-left:none;border-top:1px solid var(--line)}}
  .map-strip{margin-top:2rem;border:1px solid var(--line);height:380px;background:var(--paper-2);position:relative}
  .map-fallback{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem;color:#2A4C59}
  .map-fallback a{color:var(--crimson);font-weight:600}
  .leaflet-container{font-family:var(--body)}
  .pin-pop b{font-weight:600}
  .pin-pop .mono{display:block;font-size:.66rem;letter-spacing:.08em;color:var(--teal-2);text-transform:uppercase;margin-top:.15rem}

  footer{background:var(--teal) !important;color:#C6D6DC;margin-top:4.5rem}
  footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:1.4rem;padding-bottom:1.4rem;font-size:.92rem}
  footer b{font-family:var(--display);font-weight:600;letter-spacing:.1em;color:var(--paper)}
  footer .mono{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
  footer nav{display:flex;gap:1.2rem}
  footer nav a{color:#C6D6DC;text-decoration:none;font-size:.85rem}
  footer nav a:hover{color:var(--gold)}

  /* ---------- property pages ---------- */
  /* V2: the "Denis Group / Portfolio / [Building]" breadcrumb was removed from
     all nine inner pages — the sticky mini nav already covers where you are,
     and the trail was pure repetition above the headline. The .prop-nav rules
     went with it. */
  .prop-head{background:var(--paper);border-bottom:1px solid var(--line);padding:2.6rem 0 2.2rem}
  .prop-eyebrow{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--crimson)}
  .prop-eyebrow i{font-style:normal;color:var(--gold-2);margin:0 .5rem}
  /* The longest of these is 47 characters. Set in bold uppercase with .16em
     tracking it needs about 380px, so on a phone it wrapped to two heavy
     lines. Easing the tracking and the size buys enough room to keep most of
     them on one line, and gives the ones that still wrap somewhere to breathe. */
  @media(max-width:560px){
    .prop-eyebrow{font-size:.62rem;letter-spacing:.1em;line-height:1.5}
    .prop-eyebrow i{margin:0 .35rem}
  }
  .prop-head h1{font-size:clamp(2rem,4.4vw,3.1rem);letter-spacing:.01em;margin:.7rem 0 0;font-weight:600}
  .prop-addr{font-family:var(--mono);font-size:.86rem;letter-spacing:.03em;color:#2A4C59;margin-top:.6rem}
  .prop-hero{margin-top:1.8rem;border:1px solid var(--line);aspect-ratio:16/9;overflow:hidden;background:var(--paper-2)}
  .prop-hero img{width:100%;height:100%;object-fit:cover;display:block}
  .glance{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:2rem}
  @media(max-width:700px){.glance{grid-template-columns:repeat(2,1fr)}}
  .glance div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.1rem 1.2rem;background:var(--paper-2)}
  .glance span{display:block;font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--crimson)}
  .glance b{display:block;margin-top:.45rem;font-family:var(--display);font-size:1.32rem;font-weight:600;line-height:1.2}
  .prop-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:3rem}
  @media(max-width:880px){.prop-grid{grid-template-columns:1fr;gap:2rem}}
  .prop-page p{color:#2A4C59;font-size:1.06rem;line-height:1.72;max-width:62ch}
  /* V2 fix: the global `*{margin:0}` reset leaves paragraphs with no gap of
     their own, so any run of prose set solid as one block. Pages had been
     patching it one at a time with inline margin-top on every second
     paragraph, which is easy to forget — the About page's Investment and
     Community blocks had both been missed. This puts the rhythm in one place.
     `p + p` only ever matches consecutive prose; the sidebar, team and tenant
     blocks each have a single paragraph, so none of them are affected. */
  .prop-page p + p{margin-top:1.1rem}
  .prop-page .sect-head + p{margin-top:1.2rem}
  .tenant-list{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
  .tenant-list li{border:1px solid var(--line);background:var(--paper-2);padding:.45rem .85rem;font-size:.9rem;color:#24444F}
  .tenant-note{font-size:.9rem!important;color:#5A6E76!important;margin-top:.9rem!important}
  .avail{border:1px solid var(--line);border-top:4px solid var(--gold-2);background:var(--paper-2);padding:1.5rem}
  .avail h3{margin-top:0;font-size:1.15rem}
  .avail p{color:#2A4C59;font-size:.96rem!important;margin:.6rem 0 0;line-height:1.6}
  /* .reviewed styled a "last reviewed" date that was never added to any page.
     Removed rather than left waiting for markup that isn't coming. */
  .prop-map{margin-top:1.4rem;border:1px solid var(--line);height:320px;background:var(--paper-2);position:relative}
  .backlink{display:inline-block;margin-top:2.4rem;font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson);text-decoration:none}
  .backlink:hover{text-decoration:underline}
  .nearby{border-top:1px solid var(--line);margin-top:3rem;padding-top:1.8rem}
  .nearby-row{list-style:none;padding:0;margin:1.1rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
  @media(max-width:760px){.nearby-row{grid-template-columns:1fr}}
  .nearby-row a{display:block;border:1px solid var(--line);border-left:4px solid var(--teal-2);background:var(--paper-2);padding:.9rem 1rem;text-decoration:none}
  .nearby-row a:hover{background:#E9E2D3}
  .nearby-row b{display:block;font-family:var(--display);font-size:1.02rem;font-weight:600;color:var(--teal)}
  .nearby-row span{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:#5A6E76;margin-top:.3rem}

  /* ---------- property page fixes ---------- */
  /* .marks/.mark-row were written for the dark story section, where the type is
     paper-white. On a property page's light background that renders invisible.
     Re-tone them here rather than forking the class. */
  .prop-page .marks,.about-page .marks{border-top-color:var(--line)}
  .prop-page .mark-row,.about-page .mark-row{border-bottom-color:var(--line)}
  .prop-page .mark-row span,.about-page .mark-row span{color:#2A4C59}
  .prop-page .mark-row b,.about-page .mark-row b{color:var(--teal)}

  /* The availability card is far shorter than the column beside it, which left a
     tall block of dead space. Sticking it means it follows you down instead. */
  .prop-aside{position:sticky;top:5.5rem}
  @media(max-width:880px){.prop-aside{position:static}}

  /* Map moved out of the sidebar to full width under the gallery, so the two
     columns can no longer mismatch in height. */
  .prop-page .prop-map{height:420px}
  @media(max-width:700px){.prop-page .prop-map{height:300px}}

  /* 4.5rem under the back link was leaving an empty band above the footer. */
  .prop-page .sect{padding-bottom:2.6rem}

  /* ---------- team photos ---------- */
  .team-member{padding:0;min-height:0;display:block;overflow:hidden}
  .team-photo{aspect-ratio:1;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--line)}
  .team-photo img{width:100%;height:100%;object-fit:cover;display:block}
  /* .team-initials was the monogram placeholder standing in for Eduardo
     Nacato. His headshot is in now, so every team member has a photo and the
     rule has no markup left to match. */
  .team-body{padding:1.1rem 1.2rem 1.3rem}
  .team-member h3{font-size:1.12rem;margin:0}

  /* The lone back link left an empty band above the footer. A bordered row
     closes the page instead of letting it trail off. Still used by About. */
  .prop-foot{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem 1.5rem;
             flex-wrap:wrap;margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--line)}
  .prop-foot .backlink{margin-top:0}

  /* V2: taking the breadcrumb off the property pages left no way to move
     between buildings — you had to go up to the mini nav and back into the
     portfolio list every time. This pager sits at the foot of all seven and
     wraps around from the last building to the first, so no page dead-ends. */
  .prop-pager{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem 1.5rem;align-items:center;
              margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid var(--line)}
  .prop-pager a{text-decoration:none}
  .pager-side span{display:block;font-family:var(--mono);font-size:.62rem;font-weight:600;
                   letter-spacing:.16em;text-transform:uppercase;color:var(--crimson)}
  .pager-side b{display:block;font-family:var(--display);font-size:1.06rem;font-weight:600;
                color:var(--teal);margin-top:.32rem;line-height:1.25}
  .pager-side:hover b{color:var(--crimson)}
  .pager-prev{text-align:left}
  .pager-next{text-align:right}
  .pager-all{justify-self:center;font-family:var(--mono);font-size:.66rem;font-weight:600;
             letter-spacing:.12em;text-transform:uppercase;color:var(--crimson);white-space:nowrap;
             border-bottom:1px solid rgba(117,17,19,.35);padding-bottom:.2rem}
  .pager-all:hover{border-bottom-color:var(--crimson)}
  @media(max-width:700px){
    .prop-pager{grid-template-columns:1fr 1fr;gap:1.4rem 1.2rem}
    .pager-all{grid-column:1/-1;grid-row:2;justify-self:start}
  }
  /* Smallest phones. Two columns leaves roughly 140px a side, and the longest
     building name is 24 characters, so the type comes down a step to keep the
     labels to two lines instead of three. */
  @media(max-width:420px){
    .pager-side b{font-size:.97rem;line-height:1.3}
    .glance b{font-size:1.14rem}
  }

  /* footer{margin-top:4.5rem} exists because the homepage's last section sets
     padding-bottom:0 and relies on the footer for its gap. Property pages have
     their own bottom padding, so the two were stacking into ~98px of nothing. */
  .prop-page footer{margin-top:0}

  /* ---------- about page ---------- */
  .about-lede{max-width:60ch;margin-top:1.2rem;color:#2A4C59;font-size:1.16rem;line-height:1.65}
  .about-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:3rem;align-items:start}
  @media(max-width:880px){.about-grid{grid-template-columns:1fr;gap:2rem}}
  .about-page .prop-head{padding-bottom:2.6rem}

  /* V2: the eight-entry timeline carried a paragraph of description per year
     and ran to roughly a third of the About page on its own — every one of
     those descriptions already exists on the property page it points at. The
     rail keeps all eight years but gives each one line, and the building names
     link through to the pages that hold the detail. */
  .yearrail{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--line)}
  .yearrail li{display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto;gap:0 1rem;
               align-items:baseline;position:relative;padding:.62rem 0 .62rem .95rem;
               border-bottom:1px solid var(--line)}
  .yearrail li::before{content:"";position:absolute;left:0;top:1.02rem;width:7px;height:7px;
                       background:var(--dot,var(--teal))}
  .yearrail .yr{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.1em;
                color:var(--crimson)}
  .yearrail b{font-family:var(--display);font-size:1.02rem;font-weight:600;color:var(--teal)}
  .yearrail a{text-decoration:none}
  .yearrail a:hover b{color:var(--crimson)}
  .yearrail em{font-style:normal;font-family:var(--mono);font-size:.63rem;font-weight:500;
               letter-spacing:.1em;text-transform:uppercase;color:var(--teal-2);white-space:nowrap}
  @media(max-width:540px){
    .yearrail li{grid-template-columns:3.2rem minmax(0,1fr);gap:0 .75rem}
    .yearrail em{grid-column:2;margin-top:.2rem}
  }
  .prop-page .rail-note{margin-top:1.6rem;font-size:.98rem!important;color:#4A6570}

  /* Was six figures. Three of them — two offices, in New Jersey since 2011,
     five added since 2022 — were already stated in the lede, the intro
     paragraph and the year rail directly alongside, so on a phone they read as
     the same facts twice. The three that are left are the ones nothing else
     on the page says outright. */
  .stat-stack{border-top:1px solid var(--line)}
  .stat-stack div{border-bottom:1px solid var(--line);padding:1rem 0}
  /* Once the two columns collapse, three stacked figures ran down the page for
     no reason. Below that point they sit side by side as one compact band. */
  @media(max-width:880px){
    .stat-stack{display:grid;grid-template-columns:repeat(3,1fr);
                border-left:1px solid var(--line)}
    .stat-stack div{border-right:1px solid var(--line);padding:.85rem .9rem;
                    display:grid;grid-template-rows:1fr auto}
    .stat-stack b{font-size:1.7rem}
  }
  @media(max-width:400px){
    .stat-stack div{padding:.75rem .6rem}
    .stat-stack b{font-size:1.4rem}
  }
  .stat-stack span{display:block;font-family:var(--mono);font-size:.62rem;font-weight:600;
                   letter-spacing:.14em;text-transform:uppercase;color:var(--crimson)}
  .stat-stack b{display:block;font-family:var(--display);font-size:2.1rem;font-weight:600;
                color:var(--teal);line-height:1.1;margin-top:.2rem}

  /* V2: the Community block used to be two paragraphs about Fort Lee alone,
     stacked in a narrow column inside a full-width band. It now covers the
     towns we actually have history in, and the three of them share a bordered
     row so the section fills its band instead of trailing off down one side. */
  .towns{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:2.2rem;
         border-top:1px solid var(--line);border-left:1px solid var(--line)}
  /* Below three columns the cards go full width, and a town name sitting on
     its own line above a half-empty measure looked stranded. On tablets the
     label moves beside the text instead; it only stacks on phones. */
  @media(max-width:820px){
    .towns{grid-template-columns:1fr}
    .towns > div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:0 1.4rem;align-items:baseline}
    .prop-page .towns p{margin-top:0;max-width:58ch}
  }
  @media(max-width:560px){
    .towns > div{grid-template-columns:minmax(0,1fr)}
    .prop-page .towns p{margin-top:.6rem}
  }
  .towns > div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
               padding:1.35rem 1.4rem 1.5rem;background:var(--paper)}
  .towns span{display:block;font-family:var(--mono);font-size:.62rem;font-weight:600;
              letter-spacing:.16em;text-transform:uppercase;color:var(--crimson)}
  .prop-page .towns p{margin-top:.75rem;font-size:.98rem!important;line-height:1.62;max-width:44ch}

  .team-bio{margin:.7rem 0 0;color:#2A4C59;font-size:.94rem!important;line-height:1.55}
  .about-page .team-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  @media(max-width:980px){.about-page .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:560px){.about-page .team-grid{grid-template-columns:1fr}}

  /* homepage story now teases through to the About page */
  .story-more{display:inline-block;margin-top:1.6rem;font-family:var(--mono);font-size:.7rem;
              font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
              text-decoration:none;border-bottom:1px solid rgba(207,169,94,.4);padding-bottom:.2rem}
  .story-more:hover{border-bottom-color:var(--gold)}

  /* ---------- contact page ---------- */
  .office-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.8rem}
  @media(max-width:760px){.office-grid{grid-template-columns:1fr}}
  .office{border:1px solid var(--line);border-top:4px solid var(--dot,var(--teal));
          background:var(--paper);padding:1.5rem 1.4rem}
  .office .mono{display:block;font-family:var(--mono);font-size:.62rem;font-weight:600;
                letter-spacing:.14em;text-transform:uppercase;color:var(--crimson)}
  .office b{display:block;font-family:var(--display);font-size:1.32rem;font-weight:600;
            color:var(--teal);margin-top:.35rem}
  .office p{color:#2A4C59;font-size:.98rem!important;line-height:1.55;margin:.7rem 0 0}
  .office-note{color:#5A6E76!important;font-size:.92rem!important}
  /* The office cards are compact, so they keep their own tighter paragraph gap
     rather than the .prop-page p + p rhythm used for full-width prose. */
  .prop-page .office p + p{margin-top:.7rem}
  .office .prop-more{margin-top:1rem}
  /* This rule was written for the contact page but never reached it — the body
     tag was missing the contact-page class, so its map was falling back to the
     420px used for a single-property pin. The contact map plots all seven, so
     it was always meant to be the taller one. */
  .contact-page .prop-map{height:460px}
  @media(max-width:700px){.contact-page .prop-map{height:320px}}

  /* linked affiliate logos need a visible focus ring; plain spans have none to give */
  a.aff:focus-visible{outline:3px solid var(--crimson);outline-offset:4px}