/* ------------------------------------------------------------------
   Property page. Loaded after style.css and used only by property.html.
   Every rule is prefixed .p- or .page-property so the homepage and the
   legal pages are untouched.
------------------------------------------------------------------- */

/* this page scrolls naturally: no snapping, no forced full-screen sections */
html.page-property { scroll-snap-type: none; }

.p-label {
  display: block; position: relative; padding-top: 18px; margin-bottom: clamp(18px, 2.4vw, 28px);
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  border-top: 1px solid var(--rule);
}
.p-label::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 1px; background: var(--accent); }   /* the one accent on each audience section */

.p-h2 { font-family: var(--serif); font-weight: 300; font-optical-sizing: auto; font-size: clamp(2.1rem, 3.9vw, 3.9rem); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }

/* ---------------- opening ---------------- */
/* heading, then one wide photograph, then the introduction and the call to action */
.p-hero { padding-top: 40px; padding-bottom: 0; }
/* sector label above the opening headline: the audience-label typography (.p-label), centred over the centred headline, with its short accent bar above it */
.p-sector { text-align: center; border-top: 0; padding-top: 14px; margin-bottom: 14px; }
.p-sector::before { left: 50%; top: 0; transform: translateX(-50%); }
.p-h1 {
  text-align: center;
  font-family: var(--serif); font-weight: 300; font-optical-sizing: auto;
  font-size: clamp(2.5rem, 6.4vw, 6.6rem); line-height: 1; letter-spacing: -.035em;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.p-h1 span { display: block; text-wrap: balance; }
.p-hero-img { margin: 0; position: relative; overflow: hidden; background: var(--paper2); aspect-ratio: 21 / 9; animation: p-reveal 1.8s cubic-bezier(.45, .05, .25, 1) .2s both; }
.p-hero-img picture { display: block; width: 100%; height: 100%; }
.p-hero-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }   /* the wide photograph is cropped from the top and bottom only; the house and extension stay in view */
/* the photograph stays still and is uncovered from its left edge to its right */
@keyframes p-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.p-hero-foot { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; margin-top: clamp(28px, 3.6vw, 52px); }
.p-hero-foot .lede { grid-column: 1 / span 8; max-width: 46rem; font-size: clamp(1.0625rem, 1.5vw, 1.35rem); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.p-hero-foot .cta { grid-column: 10 / span 3; justify-self: end; margin-top: 0; }

/* desktop: the whole opening (heading, photograph, paragraph, call to action) fits one screen under the header.
   Heading, gaps and paragraph are sized from the viewport height as well as its width; the photograph takes whatever height is left. */
@media (min-width: 901px) and (min-height: 600px) {
  .p-hero { height: calc(100svh - var(--hh)); padding-block: clamp(16px, 3.2svh, 40px) clamp(18px, 3.8svh, 46px); }
  .p-hero-in { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; row-gap: clamp(16px, 3.2svh, 36px); }
  .p-sector { margin-bottom: calc(-1 * clamp(8px, 2svh, 20px)); }   /* the label belongs to the headline beneath it, so it sits closer to it than the other rows do */
  .p-h1 { margin-bottom: 0; font-size: clamp(2.2rem, min(5.8vw, 7.2svh), 6rem); }
  .p-hero-img { aspect-ratio: auto; min-height: 0; }
  .p-hero-img img { position: absolute; inset: 0; }
  .p-hero-foot { margin-top: 0; }
  .p-hero-foot .lede { font-size: clamp(1rem, min(1.4vw, 2.3svh), 1.3rem); }
}

/* ---------------- investors ---------------- */
/* a compact top band (label and heading left, copy and call to action right) with one wide, still photograph beneath it.
   On desktop the whole section is exactly one screen beneath the header; the photograph takes the height that is left. */
.p-inv { margin-top: clamp(24px, 5svh, 64px); padding-block: 28px 8px; }
.p-inv-in { display: grid; row-gap: clamp(22px, 3vw, 32px); }
.p-inv-band { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
.p-inv-head { grid-column: 1 / span 5; }
.p-inv-head .p-label { margin-bottom: clamp(14px, 2svh, 22px); padding-top: 14px; }
.p-inv-h { font-size: clamp(2.1rem, 4.2vw, 4.2rem); }
.p-inv-copy { grid-column: 7 / span 6; }
.p-inv-body { max-width: 40rem; font-size: clamp(1.0625rem, 1.3vw, 1.2rem); line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.p-inv-copy .cta { margin-top: clamp(12px, 1.8svh, 20px); }
.p-inv-img { margin: 0; position: relative; overflow: hidden; background: var(--paper2); aspect-ratio: 21 / 9; }
.p-inv-img picture { display: block; width: 100%; height: 100%; }
.p-inv-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 86%; }   /* no animation: the photograph is still and visible from the first paint */

@media (min-width: 901px) and (min-height: 600px) {
  .p-inv { height: calc(100svh - var(--hh)); padding-block: clamp(14px, 2.6svh, 32px) clamp(18px, 3.6svh, 44px); }
  .p-inv-in { height: 100%; grid-template-rows: auto minmax(0, 1fr); row-gap: clamp(14px, 2.8svh, 30px); }
  .p-inv-img { aspect-ratio: auto; min-height: 0; }
  .p-inv-img img { position: absolute; inset: 0; }
  .p-inv-h { font-size: clamp(1.8rem, min(4.2vw, 6.6svh), 4.2rem); }
  .p-inv-body { font-size: clamp(1rem, min(1.3vw, 2.2svh), 1.2rem); }
}

/* ---------------- families ---------------- */
/* a landscape photograph, about three fifths wide, on the left; a compact text column on the right, vertically centred.
   On desktop the section is one screen beneath the header. The photograph keeps its 3:2 shape (capped to 82% of the room
   that is left) so there is deliberate space above and below it; the text column centres itself in the same room. */
.p-fam { margin-top: clamp(24px, 5svh, 64px); padding-block: 28px 8px; }
.p-fam-in { display: grid; row-gap: clamp(22px, 4vw, 36px); }
.p-fam-h { font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.1; }
.p-fam-h span { display: block; text-wrap: balance; }
.p-fam-body { margin-top: clamp(18px, 2.2vw, 26px); max-width: 30rem; font-size: clamp(1.0625rem, 1.2vw, 1.125rem); line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.p-fam-text .cta { margin-top: clamp(14px, 2.2svh, 24px); }
.p-fam-img { margin: 0; position: relative; aspect-ratio: 3 / 2; }   /* the frame never moves */
.p-fam-img picture { display: block; width: 100%; height: 100%; }
.p-fam-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }

/* the homepage hero's mechanism (a clip-path reveal inside a fixed frame), run right to left: the photograph is uncovered from its
   right edge towards its left, once, when the section scrolls into view. js/reveal.js adds .rv (before first paint) and then .is-in (once the picture is in view and decoded);
   without it (no JavaScript, or reduced motion) nothing is hidden. The picture is clipped, the figure is observed. */
.rv .p-fam-img picture { clip-path: inset(0 0 0 100%); }
.rv .p-fam-img.is-in picture { animation: p-reveal-rtl 2s cubic-bezier(.45, .05, .25, 1) both; }
@keyframes p-reveal-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

@media (min-width: 901px) and (min-height: 600px) {
  .p-fam { height: calc(100svh - var(--hh)); padding-block: clamp(14px, 2.6svh, 32px) clamp(18px, 3.6svh, 44px); }
  .p-fam-in { height: 100%; grid-template-columns: repeat(12, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: 24px; row-gap: 0; align-items: center; }
  .p-fam-img { grid-column: 1 / span 7; grid-row: 1; max-height: 82%; }
  .p-fam-img img { position: absolute; inset: 0; }
  .p-fam-text { grid-column: 9 / span 4; grid-row: 1; }
  .p-fam-h { font-size: clamp(1.7rem, min(3.1vw, 5.4svh), 3rem); }
  .p-fam-body { font-size: clamp(1rem, min(1.2vw, 2.2svh), 1.125rem); }
}

/* an entrance waits for its picture (js/reveal.js adds .rv before first paint and .is-ready when the opening photograph is decoded);
   while the third section's picture loads, its frame is shown so there is never an empty gap */
html.rv .p-hero-img.is-late { animation: none; }   /* too slow or failed: no reveal, the frame is simply shown and the picture appears when it arrives */
html.rv .p-hero-img:not(.is-ready) { animation-play-state: paused; }
.rv .p-fam-img.is-wait { background: var(--paper2); }
.rv .p-fam-img.is-late picture { clip-path: none; animation: none; }   /* given up (too slow or failed): shown directly, never animated late */

/* ---------------- business owners ---------------- */
/* near-black green. A large left-aligned heading across the top; beneath it a landscape photograph (two thirds of the width)
   on the left and a narrow column of copy and call to action on the right, vertically centred beside the photograph.
   On desktop the section is one screen beneath the header; the photograph fills whatever height is left. */
.p-biz { margin-top: clamp(24px, 5svh, 64px); padding-block: 40px 48px; box-shadow: inset 0 -1px 0 var(--deepRule); }
.p-biz-in { display: grid; row-gap: clamp(22px, 4vw, 36px); }
.p-biz .p-label { color: var(--deepText); border-top-color: var(--deepRule); margin-bottom: clamp(14px, 2svh, 22px); padding-top: 14px; }
.p-biz-h { font-size: clamp(2.1rem, 5vw, 4.8rem); line-height: 1.04; letter-spacing: -.03em; color: var(--deepText); text-wrap: balance; }
.p-biz-h span { display: block; }
.p-biz-img { margin: 0; position: relative; background: #17201b; aspect-ratio: 3 / 2; }
.p-biz-img picture { display: block; width: 100%; height: 100%; }
.p-biz-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.p-biz-body { max-width: 30rem; font-size: clamp(1.0625rem, 1.2vw, 1.125rem); line-height: 1.55; color: var(--deepSoft, var(--deepText)); text-wrap: pretty; }
.p-biz-copy .cta { margin-top: clamp(14px, 2.2svh, 24px); color: var(--deepText); }

/* the photograph is completely static: no animation, transition, transform, mask or trigger class, now or later */
.p-biz-img, .p-biz-img picture, .p-biz-img img { animation: none !important; transition: none !important; transform: none !important; clip-path: none !important; opacity: 1 !important; }

@media (min-width: 901px) and (min-height: 600px) {
  .p-biz { height: calc(100svh - var(--hh)); padding-block: clamp(14px, 2.6svh, 32px) clamp(18px, 3.6svh, 44px); }
  .p-biz-in { height: 100%; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 24px; row-gap: clamp(14px, 2.8svh, 30px); }
  .p-biz-head { grid-column: 1 / -1; grid-row: 1; }
  .p-biz-h { font-size: clamp(1.9rem, min(4.6vw, 7.2svh), 4.8rem); }
  .p-biz-img { grid-column: 1 / span 8; grid-row: 2; aspect-ratio: auto; min-height: 0; }
  .p-biz-img img { position: absolute; inset: 0; }
  .p-biz-copy { grid-column: 9 / span 4; grid-row: 2; align-self: center; padding-left: clamp(16px, 2.4vw, 40px); }
  .p-biz-body { font-size: clamp(1rem, min(1.2vw, 2.2svh), 1.125rem); }
}

/* ---------------- closing: one invitation ---------------- */
/* near-black green, no photograph, no animation. On desktop it is exactly one screen beneath the header with the content block
   centred vertically and aligned left; the footer below it stays separate. Every Property page call to action lands here (#contact). */
.p-close { padding-block: clamp(72px, 12vw, 120px); box-shadow: inset 0 -1px 0 var(--deepRule); }
.p-close-h { font-family: var(--serif); font-weight: 300; font-optical-sizing: auto; font-size: clamp(2.3rem, 9vw, 4.4rem); line-height: 1.02; letter-spacing: -.035em; color: var(--deepText); }
.p-close-h span { display: block; text-wrap: balance; }
.p-close-lead { margin-top: clamp(22px, 3vw, 34px); max-width: 36rem; font-size: clamp(1.125rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--deepSoft, var(--deepText)); text-wrap: pretty; }
.p-close .mail-row { margin-top: clamp(24px, 3.4vw, 40px); }
.p-close .mail-row .mail { color: var(--deepText); font-size: clamp(1.35rem, 6vw, 2.6rem); overflow-wrap: anywhere; }
.p-close-conf { margin-top: 14px; font-size: 1rem; color: var(--deepSoft, var(--deepText)); }
.p-more-row { margin-top: clamp(28px, 4vw, 44px); }
.p-more { font-weight: 600; color: var(--deepText); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .4em; padding-block: 8px; display: inline-block; transition: text-decoration-thickness .3s; }
.p-more:hover, .p-more:focus-visible { text-decoration-thickness: 3px; }

@media (min-width: 901px) and (min-height: 600px) {
  .p-close { height: calc(100svh - var(--hh)); display: flex; align-items: center; padding-block: clamp(14px, 3svh, 36px); }
  .p-close-in { width: 100%; }
  .p-close-h { font-size: clamp(2.2rem, min(6.4vw, 10.5svh), 6.6rem); }
  .p-close-lead { margin-top: clamp(16px, 3svh, 32px); font-size: clamp(1.0625rem, min(1.5vw, 2.6svh), 1.3rem); }
  .p-close .mail-row { margin-top: clamp(18px, 3.6svh, 40px); }
  .p-close .mail-row .mail { font-size: clamp(1.5rem, min(3.6vw, 6.4svh), 3.2rem); }
  .p-close-conf { margin-top: clamp(10px, 1.6svh, 16px); }
  .p-more-row { margin-top: clamp(14px, 3svh, 36px); }
}

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
  .p-hero { padding-top: 44px; }
  .p-hero-img { aspect-ratio: 2 / 1; }
  .p-hero-foot { display: block; }
  .p-hero-foot .lede { max-width: 38rem; }
  .p-hero-foot .cta { margin-top: 24px; display: inline-flex; }
  .p-inv-img { aspect-ratio: 2 / 1; }
  .p-inv-band { display: block; }
  .p-inv-copy { margin-top: clamp(18px, 3vw, 26px); }
  .p-inv-body { max-width: 38rem; }
  .p-inv-copy .cta { margin-top: 22px; }
  .p-fam-img { aspect-ratio: 3 / 2; }
  .p-fam-body { max-width: 36rem; }
  .p-biz-img { aspect-ratio: 3 / 2; }
  .p-biz-body { max-width: 36rem; }
}
@media (max-width: 600px) {
  .p-hero-img { aspect-ratio: 4 / 5; }
  .p-hero-img img { object-position: 50% 50%; }
  .p-h1 { margin-bottom: 24px; }
  .p-inv-img { aspect-ratio: 4 / 3; }
  .p-fam-img { aspect-ratio: 4 / 3; }
  .p-fam-text .cta { gap: 12px; font-size: 1.0625rem; }
  .p-fam-text .cta .cta-line { width: 40px; }
  .p-biz-img { aspect-ratio: 4 / 3; }
  .p-biz-copy .cta { gap: 12px; font-size: 1.0625rem; }
  .p-biz-copy .cta .cta-line { width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .p-hero-img { animation: none; }
  .p-more { transition: none; }
  .p-fam-img picture { clip-path: none !important; animation: none !important; }
}