/* Harbour & Lane Estates — built in the motion-kit Plaster pack (family-office real estate).
   Full-height rooms in plaster tones and charcoal, a whisper-light serif set enormous and tight, DM Mono labels in
   (parentheses), dashed construction lines, the plus-tile CTA that turns 90°, a two-door portal intro ("selling" /
   "buying or renting"), words that converge, rooms that slide over rooms, a listings reel and a before/after splitter.
   Below: self-hosted fonts, plaster.css verbatim (minus the Google Fonts import), the pack's landing tones, then this page. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("../../fonts/examples/fraunces-variable-full.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../../fonts/examples/inter-variable-opsz.woff2") format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../../fonts/examples/dm-mono-400-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("../../fonts/examples/barlow-condensed-600-normal.woff2") format("woff2")}

/* Plaster style pack — tokens, fluid unit, type, section themes, chrome and components.
   Design category: family-office real estate (property management, investment & premium rentals).
   Reconstructed design language (a Paris / Geneva property-management firm, studied October 2026). Original code;
   no assets, fonts, logos, copy or code from the source site.
   Concept in one line: Haussmann plaster tones (putty, cream, stone) cut with charcoal, a whisper-light serif set huge and
   tight, mono labels in (parentheses), dashed hairlines like site drawings, a plus-shaped tile on every CTA — and slow,
   cinematic expo motion: doors that open, words that converge, rooms that slide over rooms. */


:root {
  /* Palette. Five plaster tones and one charcoal. No accent hue: colour comes from the photographs. */
  --charcoal: #141416;     /* page ground, hero, dark rooms, footer, ink on light */
  --charcoal-2: #2c2b2f;   /* raised surfaces on charcoal (calendar, drawer hover) */
  --putty: #dcd9c8;        /* the main light room; inactive big numbers on cream; tag text on dark */
  --stone: #97968d;        /* sage-grey room; footer text; giant wordmark */
  --cream: #fffdf1;        /* the lightest room; card fills; CTA tiles on dark */
  --umber: #5f4242;        /* image placeholder behind portraits only */
  --white: #fff;
  --dash: rgba(20, 20, 22, .2);      /* dashed hairlines on light */
  --dash-l: rgba(255, 255, 255, .2); /* dashed hairlines on dark */
  --veil: rgba(20, 20, 22, .2);      /* frosted tag ground over photos */

  /* Fluid unit: 1rem = 1/90 of the viewport (16px at 1440). Everything is sized in rem so the page scales as one drawing. */
  --f-display: "Fraunces", "Otto", Georgia, serif;          /* licensed original: a light contemporary serif ("Otto") */
  --f-text: "Inter", "Inter Display", Arial, sans-serif;    /* original: Inter Display */
  --f-label: "DM Mono", "Elios", ui-monospace, monospace;   /* original: a mono-ish grotesk ("Elios") */
  --f-mark: "Barlow Condensed", "DIN Condensed", Arial Narrow, sans-serif; /* wordmark only */

  --sp-sm: 1.5rem; --sp-md: 2.5rem; --sp-lg: 5rem; --sp-xl: 12.5rem;
  --gutter: 1rem;

  /* Curves. One house curve for hovers and colour, expo for anything cinematic. */
  --ease: cubic-bezier(.36, .33, 0, 1);           /* hovers, underline, colour, header re-ink — .42s */
  --ease-out: cubic-bezier(.22, .61, .36, 1);     /* fades */
  --expo-out: cubic-bezier(.16, 1, .3, 1);        /* words converging, stats rising — 1.2–2.4s */
  --expo-in-out: cubic-bezier(.87, 0, .13, 1);    /* curtains, doors, the intro — 2.4s */
  --power4-out: cubic-bezier(.165, .84, .44, 1);  /* drawers, image clips, splitter lag — .8–1.2s */
  --t-hover: .42s;
}

html { font-size: clamp(11px, calc(100vw / 90), 24px); -webkit-text-size-adjust: 100%; }
@media (max-width: 767px) { html { font-size: 14px; } }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--charcoal); color: var(--charcoal);
  font: 400 1rem/1.3 var(--f-text); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px dashed currentColor; outline-offset: 4px; }

/* ---------- Type ---------- */
.p-display, .p-h1, .p-h2, .p-h3, .p-serif {
  font-family: var(--f-display); font-weight: 300; font-variation-settings: "SOFT" 50;
  letter-spacing: -.065em; margin: 0;
}
.p-display { font-size: 10vw; line-height: .9; }                 /* hero + room titles (144px at 1440) */
.p-h1 { font-size: 6rem; line-height: .95; }
.p-h2 { font-size: 3.5rem; line-height: 1.1; letter-spacing: -.06em; } /* statements, section heads */
.p-h3 { font-size: 2rem; line-height: 1.12; letter-spacing: -.05em; }   /* card titles, step titles, captions */
.p-lg { font-size: 1.5rem; line-height: 1.3; }
.p-xl { font-size: 2.5rem; line-height: 1.2; letter-spacing: -.02em; }  /* hero stats */
.p-small { font-size: .875rem; line-height: 1.35; }
.p-num { font-family: var(--f-text); font-weight: 400; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: .78; }
.p-caps {
  font: 400 .8rem/1 var(--f-label); text-transform: uppercase; letter-spacing: .02em;
}
.p-caps.is-paren::before { content: "("; } .p-caps.is-paren::after { content: ")"; }
.p-caps.is-bracket::before { content: "[ "; } .p-caps.is-bracket::after { content: " ]"; }
@media (max-width: 767px) {
  .p-display { font-size: 13vw; }
  .p-h2 { font-size: 2.1rem; }
  .p-h3 { font-size: 1.5rem; }
}

/* Dashed hairline: the brand's only rule. Reads like a surveyor's construction line. */
.p-line { border: 0; border-top: 1px dashed var(--dash); width: 100%; margin: 0; }
[data-room="charcoal"] .p-line, .p-hero .p-line, .p-foot .p-line { border-top-color: var(--dash-l); }

/* ---------- Rooms (section themes) ----------
   Every section is a "room" painted one plaster tone. data-chrome tells the fixed header how to ink itself over it. */
[data-room="cream"] { background: var(--cream); color: var(--charcoal); }
[data-room="putty"] { background: var(--putty); color: var(--charcoal); }
[data-room="stone"] { background: var(--stone); color: var(--charcoal); }
[data-room="charcoal"] { background: var(--charcoal); color: var(--stone); }
.p-wrap { padding-inline: var(--gutter); position: relative; }
.p-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1rem; }
.p-section { padding-block: var(--sp-lg); position: relative; }
.p-center { text-align: center; }
.p-head-block { display: grid; gap: 1.25rem; justify-items: center; text-align: center; }

/* ---------- Art (photo stand-ins) ---------- */
.p-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-frame { position: relative; overflow: hidden; background: var(--umber); }

/* Frosted tag: mono caps on a blurred veil, sat in an image's corner (addresses, cities, counts). */
.p-tag {
  display: inline-flex; align-items: center; gap: .5em; padding: .5em; border-radius: .25em;
  background: var(--veil); color: var(--putty); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  font: 400 .8rem/1 var(--f-label); text-transform: uppercase;
}
.p-tag.is-solid { background: var(--charcoal); color: var(--putty); backdrop-filter: none; }
.p-tag.is-outline { background: transparent; color: inherit; border: 1px solid var(--dash); backdrop-filter: none; }
.p-tag svg { width: .9em; }

/* ---------- The plus-tile button ----------
   A square tile drawn as two rounded bars (a fat plus sign) carrying a thin arrow. On hover the plus turns 90°,
   which a symmetric shape makes feel like a mechanism clicking over. The label carries a dashed underline. */
.x-btn { display: inline-flex; align-items: center; gap: .75em; font-weight: 500; line-height: 1.3; --tile: var(--charcoal); --tile-ink: var(--white); }
.x-btn__tile { position: relative; width: 2.5em; aspect-ratio: 1; display: grid; place-items: center; color: var(--tile-ink); flex: none; }
.x-btn__cross { position: absolute; inset: 0; transition: transform var(--t-hover) var(--ease); }
.x-btn__cross::before, .x-btn__cross::after {
  content: ""; position: absolute; inset: 0; background: var(--tile); border-radius: .125em; transform: scaleX(.66);
}
.x-btn__cross::after { transform: rotate(90deg) scaleX(.66); }
.x-btn__tile svg { position: relative; width: 45%; }
.x-btn:hover .x-btn__cross, .x-btn:focus-visible .x-btn__cross { transform: rotate(90deg); }
.x-btn__label { position: relative; white-space: nowrap; }
.x-btn__label::after { content: ""; position: absolute; left: 0; top: 110%; width: 100%; border-top: 1px dashed var(--dash); }
.x-btn.is-on-dark { --tile: var(--cream); --tile-ink: var(--charcoal); }
.x-btn.is-on-dark .x-btn__label::after { border-top-color: var(--dash-l); }
.x-btn.is-stone { --tile: var(--stone); --tile-ink: var(--charcoal); }
.x-btn.is-lg { font-size: 1.5rem; font-weight: 400; }

/* ---------- Fixed header ----------
   Transparent. Wordmark left, nav centred, language + CTA right. It re-inks light/dark from the room under its midline. */
.p-head {
  position: fixed; inset: 0 0 auto; z-index: 50; padding: 1.125rem var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  color: var(--white); transition: color var(--t-hover) var(--ease);
}
.p-head[data-ink="dark"] { color: var(--charcoal); }
.p-head__mark { justify-self: start; font: 600 1.4rem/1 var(--f-mark); letter-spacing: .02em; text-transform: uppercase; }
.p-head__nav { display: flex; gap: 1.5rem; }
.p-head__end { justify-self: end; display: flex; align-items: center; gap: 2rem; }
.p-langs { display: flex; gap: .75rem; font: 400 .8rem/1 var(--f-label); }
.p-langs a { opacity: .5; transition: opacity var(--t-hover) var(--ease); }
.p-langs a:hover, .p-langs a[aria-current] { opacity: 1; }
.p-head .p-menu-btn { display: none; --tile: var(--white); --tile-ink: var(--charcoal); }
.p-head[data-ink="dark"] .p-menu-btn { --tile: var(--charcoal); --tile-ink: var(--white); }
.p-menu-btn .x-btn__cross::before, .p-menu-btn .x-btn__cross::after { transition: background-color var(--t-hover) var(--ease); }
@media (max-width: 767px) {
  .p-head { grid-template-columns: 1fr auto; }
  .p-head .p-head__nav, .p-head .p-langs, .p-head .p-head__cta { display: none; }
  .p-head .p-menu-btn { display: inline-flex; }
}

/* Nav link: a "+" that turns and drifts up-right, and an underline at 30% that grows from the left. */
.p-link { position: relative; display: inline-flex; gap: .2em; }
.p-link::after {
  content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 1px; background: currentColor; opacity: .3;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-hover) var(--ease);
}
.p-link:hover::after, .p-link[aria-current]::after { transform: scaleX(1); }
.p-link__plus { display: inline-block; transition: transform var(--t-hover) var(--ease); }
.p-link:hover .p-link__plus { transform: rotate(90deg) translate(10%, -10%); }

/* ---------- Drawer (submenu) ----------
   A panel that slides in from the right over a dimmed page. Links slide in from +120px; hovering a link cuts its
   picture open from the centre (clip-path inset 100% → 0) beside the list. Siblings dim to 20%. */
.p-drawer { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.p-drawer__veil { position: absolute; inset: 0; background: rgba(20, 20, 22, .5); opacity: 0; transition: opacity .4s var(--ease); }
.p-drawer__panel {
  position: absolute; inset: 0 0 0 auto; width: min(60rem, 100%); background: var(--charcoal); color: var(--cream);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 6rem 2.5rem 2.5rem;
  transform: translateX(100%); transition: transform .82s var(--ease); overflow: hidden;
}
.p-drawer.is-open { pointer-events: auto; }
.p-drawer.is-open .p-drawer__veil { opacity: 1; }
.p-drawer.is-open .p-drawer__panel { transform: none; }
.p-drawer__close { position: absolute; top: 1.25rem; right: 1.25rem; }
.p-drawer__group { display: grid; gap: 1.5rem; align-content: start; }
.p-drawer__group .p-caps { overflow: hidden; color: var(--stone); }
.p-drawer__list { display: grid; gap: .25rem; }
.p-drawer__list a { font: 300 3rem/1.05 var(--f-display); letter-spacing: -.06em; transition: opacity var(--t-hover) var(--ease); display: block; }
.p-drawer__list:has(a:hover) a:not(:hover) { opacity: .2; }
.p-drawer__pics { position: relative; width: min(100%, 18rem); max-height: 45vh; aspect-ratio: 3 / 4; opacity: 0; transition: opacity var(--t-hover) var(--ease); }
.p-drawer__list:has(a:hover) + .p-drawer__pics { opacity: 1; }
.p-drawer__pics > * { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(100%); }
@media (max-width: 767px) { .p-drawer__panel { grid-template-columns: 1fr; } .p-drawer__pics { display: none; } }

/* ---------- Portal (two-door intro) ----------
   Before the site, a charcoal screen with two tall doors drawn in dashed line: "I own" and "I rent". Hovering a door
   widens it, lifts it a quarter-em up-right and brings its photograph up to full strength while the other drops to 20%;
   a slideshow cuts open in the middle of the door. Choosing one fades the portal while the site opens from a slit. */
.p-portal {
  position: fixed; inset: 0; z-index: 100; background: var(--charcoal); color: var(--stone);
  display: flex; gap: 1.5rem; padding: 1.5rem;
}
.p-portal[hidden] { display: none; }
.p-portal__brand { position: absolute; left: 50%; top: 10%; transform: translate(-50%, -50%); z-index: 3; color: var(--cream);
  font: 600 2.6rem/1 var(--f-mark); text-transform: uppercase; letter-spacing: .02em; display: flex; overflow: hidden; pointer-events: none; }
.p-portal__brand span { display: inline-block; }
.p-door { position: relative; flex: 1; display: flex; font-size: 1.5rem; color: var(--white); transition: all .8s var(--ease); }
.p-door__inner { position: relative; width: 100%; border: 1px dashed var(--dash-l); display: flex; align-items: flex-end; padding: 0 0 2.5rem 2.5rem; overflow: hidden; }
.p-door__bg { position: absolute; inset: 0; z-index: -1; opacity: .5; transition: opacity .42s var(--ease); }
.p-door__stack { position: absolute; left: 50%; top: 50%; width: 50%; max-width: 30vh; aspect-ratio: 2 / 3; translate: -50% -50%;
  clip-path: inset(90% 91% 92% 93%); opacity: 0; }
.p-door__stack > * { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(0); }
.p-door .x-btn { position: relative; z-index: 2; }
@media (min-width: 768px) and (hover: hover) {
  .p-door:hover { translate: .25em -.25em; flex-grow: 1.5; }
  .p-door:hover .p-door__bg { opacity: 1 !important; transition: opacity 1.2s var(--ease); }
  .p-portal:has(.p-door:hover) .p-door__bg { opacity: .2; }
}
@media (max-width: 767px) { .p-portal { flex-direction: column; gap: 10px; padding: 10px; } .p-door__inner { padding: 0 0 1.5rem 1.5rem; } }

/* ---------- Hero ----------
   Full-height charcoal with a photograph at 60%. A towering light serif headline whose words converge into place,
   a (caps label) tucked into the first line's indent, four stats along the bottom over a dashed line, "Scroll ↓". */
.p-hero { position: relative; min-height: 100svh; overflow: hidden; background: var(--charcoal); color: var(--white); }
.p-hero__bg { position: absolute; inset: 0; opacity: .6; }
.p-hero__inner { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; gap: 2.5rem; padding: 5rem var(--gutter) 1.5rem; }
.p-hero__title { position: relative; max-width: 100%; }
.p-hero__title .p-caps { position: absolute; top: 1em; left: 0; }
.p-hero__title .p-indent { display: inline-block; }
.p-hero__title .w { display: inline-block; white-space: pre; will-change: transform, opacity; }
.p-stats { margin-top: auto; display: flex; gap: 1rem; padding-right: 4rem; }
.p-stats > div { flex: 1; max-width: 13.75rem; display: grid; gap: .5rem; align-content: start; }
.p-stats .p-xl { font-family: var(--f-text); }
.p-hero__scroll { position: absolute; right: var(--gutter); bottom: 1.5rem; display: flex; gap: .25rem; z-index: 2; }
@media (max-width: 767px) { .p-stats { flex-wrap: wrap; padding-right: 0; } .p-stats > div { max-width: 45%; } }

/* ---------- Presentation ---------- */
.p-pres { padding-top: var(--sp-md); }
.p-pres__grid { margin-top: 5rem; padding-bottom: 11.25rem; row-gap: 4rem; }
.p-pres__pic { grid-column: 1 / span 5; aspect-ratio: 577 / 652; }
.p-pres__pic .p-tag { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; }
.p-pres__text { grid-column: 8 / span 3; align-self: start; display: grid; gap: 1.5rem; }
@media (max-width: 767px) { .p-pres__pic { grid-column: 1 / -1; } .p-pres__text { grid-column: 1 / -1; } }

/* ---------- Stacking rooms ----------
   Full-height rooms in a column, each a plaster tone with a giant centred serif title, a tall portrait photo that
   overlaps the title from below, and copy pinned bottom-right. Scrolling on, the next room slides over this one
   while this one lags (y 0 → 50%), its photo tips to −5° and lifts, its copy lifts faster, and a fade in the room's own
   colour washes it out. */
.p-rooms { display: flex; flex-direction: column; }
.p-room { position: relative; min-height: 100vh; padding: 5rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; will-change: transform; }
.p-room__title { position: relative; z-index: 0; }
.p-room__pic { position: relative; z-index: 1; width: 60%; max-width: 17.5rem; aspect-ratio: 280 / 460; margin-top: -2vw; will-change: transform; }
.p-room__copy { position: absolute; z-index: 1; left: 67%; bottom: 15%; width: 25rem; max-width: 80%; text-align: left; display: grid; gap: 1.5rem; justify-items: start; }
.p-room__fade { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; background: inherit; }
@media (max-width: 991px) { .p-room__copy { position: relative; left: 0; bottom: 0; margin-top: 2.5rem; } }

/* ---------- Big-number focus list ----------
   A centred column of huge numerals in putty. The one crossing the middle of the viewport turns charcoal, and its
   caption (light serif, to the right) slides in word by word. */
.p-figs { padding: var(--sp-lg) 0 var(--sp-xl); }
.p-figs__list { margin-top: var(--sp-lg); display: flex; flex-direction: column; align-items: center; }
.p-fig { position: relative; width: 40%; padding: 1.5rem 0; display: flex; justify-content: center; }
.p-fig__value { display: flex; align-items: flex-end; font-size: 11rem; color: var(--putty); transition: color var(--t-hover) var(--ease); }
.p-fig.is-active .p-fig__value { color: var(--charcoal); }
.p-fig__unit { font-size: .4em; line-height: .8; }
.p-fig__unit.is-pre { order: -1; }
.p-fig__text { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: 65%; text-align: left; }
.p-fig__text .w { display: inline-block; white-space: pre; opacity: 0; }
@media (max-width: 767px) {
  .p-fig { width: 100%; flex-direction: column; align-items: center; gap: 1rem; }
  .p-fig__value { font-size: 20vw; }
  .p-fig__text { position: relative; left: 0; top: 0; transform: none; width: 80%; text-align: center; }
}

/* ---------- Numbered steps ----------
   Rows split by dashed lines: a giant numeral on the left that drops into its row as you scroll, copy on the right
   that slides in from 20% further right. The row clips the numeral, so it reads like a stamp coming down. */
.p-steps__list { margin-top: var(--sp-md); }
.p-step { display: flex; align-items: flex-start; padding: 1.5rem 0 4rem; border-top: 1px dashed var(--dash); overflow: hidden; }
.p-step__n { width: 50%; font-size: 12rem; will-change: transform; }
.p-step__body { width: 50%; max-width: 21.25rem; display: grid; gap: 1rem; will-change: transform; }
@media (max-width: 767px) { .p-step__n { width: 30%; font-size: 16vw; } .p-step__body { width: 70%; } }

/* ---------- Compare cards ---------- */
.p-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; margin-top: var(--sp-lg); }
.p-card { position: relative; padding: 2.5rem; display: grid; gap: 1.5rem; align-content: start; }
.p-card.is-ours { background: var(--cream); border: 1px solid var(--charcoal); border-radius: 4px; }
.p-card.is-theirs { border: 1px dashed var(--dash); margin-top: 8rem; }
.p-card .p-tag { position: absolute; top: 1rem; right: 1rem; }
.p-checks { list-style: none; padding: 0; margin: 0; display: grid; }
.p-checks li { display: flex; gap: .75rem; padding: .7rem 0; border-top: 1px dashed var(--dash); }
.p-checks li::before { content: "✓"; }
.p-card.is-theirs .p-checks li::before { content: "–"; opacity: .5; }
@media (max-width: 767px) { .p-compare { grid-template-columns: 1fr; } .p-card.is-theirs { margin-top: 0; } }

/* ---------- Vertical reel (listings) ----------
   A column of listing photos that drifts upward forever (CSS keyframes, paused off-screen), each with an address tag.
   On phones it turns sideways. */
.p-reel { display: grid; grid-template-columns: 5fr 7fr; gap: 1rem; min-height: 100vh; }
.p-reel__track { position: relative; overflow: hidden; height: 100vh; }
.p-reel__inner { display: grid; gap: 1rem; padding-bottom: 1rem; animation: p-up var(--reel-dur, 18s) linear infinite paused; }
.p-reel.is-running .p-reel__inner { animation-play-state: running; }
.p-reel__item { aspect-ratio: 460 / 300; }
.p-reel__item .p-tag { position: absolute; left: .75rem; bottom: .75rem; z-index: 2; }
.p-reel__side { padding: 6rem 2rem 2.5rem 8%; display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.p-reel__side .x-btn { margin-top: auto; }
@keyframes p-up { to { transform: translateY(-100%); } }
@keyframes p-left { to { transform: translateX(-100%); } }
@media (max-width: 767px) {
  .p-reel { grid-template-columns: 1fr; min-height: 0; }
  .p-reel__track { height: auto; display: flex; }
  .p-reel__inner { display: flex; animation-name: p-left; padding: 0 1rem 0 0; }
  .p-reel__item { width: 70vw; flex: none; }
}

/* ---------- Before / after splitter ----------
   Drag the handle; the "after" image's clip and a visual twin of the handle follow with a .8s power4 lag. */
.p-split { position: relative; aspect-ratio: 16 / 9; overflow: hidden; user-select: none; touch-action: pan-y; --x: 50%; }
.p-split__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x)); transition: clip-path .8s var(--power4-out); }
.p-split__line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 0; border-left: 1px dashed rgba(255, 255, 255, .6); transition: left .8s var(--power4-out); pointer-events: none; }
.p-split__handle { position: absolute; top: 50%; left: var(--x); translate: -50% -50%; cursor: ew-resize; transition: left .8s var(--power4-out); }
.p-split.is-dragging { cursor: grabbing; }
.p-split .p-tag { position: absolute; top: 1rem; z-index: 2; }
.p-split .p-tag.is-l { left: 1rem; } .p-split .p-tag.is-r { right: 1rem; }

/* ---------- Pinned card deck ----------
   The section pins for several screens. Its title drops in from above, the deck rises from below, then each card in
   turn is flicked off the top: up a full screen, scaled 1.2 and tossed to a random angle. */
.p-deck { position: relative; height: 500svh; background: var(--stone); }
.p-deck__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; text-align: center; }
.p-deck__title { position: absolute; left: 50%; top: 50%; width: min(58.75rem, 92%); translate: -50% -50%; }
.p-deck__cards { position: absolute; inset: 0; perspective: 1000px; }
.p-deck__card {
  position: absolute; left: 50%; top: 50%; width: 90%; max-width: 32.5rem; min-height: 70vh; translate: -50% -50%;
  background: var(--stone); border: 1px solid var(--charcoal); border-radius: 4px; padding: 2rem; text-align: left;
  display: flex; flex-direction: column; gap: 2rem; will-change: transform;
}
.p-deck__card .p-frame { aspect-ratio: 16 / 9; }
.p-deck__nums { margin-top: auto; display: flex; gap: 1rem; padding-top: 1rem; border-top: 1px dashed var(--dash); }
.p-deck__nums > div { flex: 1; display: grid; gap: .5rem; }
.p-deck__nums .p-num { font-size: 3.5rem; line-height: 1; }

/* ---------- Footer ----------
   Charcoal. Rises out of the previous section (y −40% → 0, opacity 0 → 1, scrubbed). Four-column link grid, each
   column under a dashed rule and a (caps) head; a slowly turning cast block in the middle; legal row; then the
   wordmark set edge to edge in stone. */
.p-foot { background: var(--charcoal); color: var(--stone); overflow: hidden; }
.p-foot__wrap { padding-bottom: 1rem; }
.p-foot__nav { padding: var(--sp-md) var(--gutter) var(--sp-sm); }
.p-foot__grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 1rem; row-gap: 2.5rem; }
.p-foot__col { position: relative; padding-top: 1.5rem; display: grid; gap: 2.5rem; align-content: start; }
.p-foot__col .p-line { position: absolute; inset: 0 0 auto; }
.p-foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.p-foot__block { display: grid; place-items: center; padding: 3rem 0; perspective: 900px; }
.p-foot__btm { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem var(--gutter); font-size: .875rem; }
.p-foot__btm ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.p-foot__mark { display: block; width: 100%; padding: 0 var(--gutter); color: var(--stone); }
.p-foot__mark text { font: 600 100px/1 var(--f-mark); text-transform: uppercase; fill: currentColor; }
@media (max-width: 767px) { .p-foot__grid { grid-template-columns: 1fr 1fr; } .p-foot__btm { flex-direction: column; } }

/* Cast block: a CSS cube with a speckled concrete face, turning slowly. Tilts toward the pointer. */
.p-block { --s: 9rem; position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; animation: p-turn 24s linear infinite; }
.p-block__tilt { transform-style: preserve-3d; transition: transform 1.2s var(--expo-out); }
.p-block i { position: absolute; inset: 0; border-radius: .6rem;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.35) 0 1px, transparent 2px) 0 0 / 11px 13px,
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.25) 0 1px, transparent 2px) 0 0 / 7px 9px,
    linear-gradient(145deg, #d9d7d1, #a8a69f 70%, #8e8c86);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), inset 0 -10px 30px rgba(0,0,0,.18); }
.p-block i:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.p-block i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); filter: brightness(.7); }
.p-block i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); filter: brightness(.85); }
.p-block i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); filter: brightness(.8); }
.p-block i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); filter: brightness(1.08); }
.p-block i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); filter: brightness(.6); }
.p-block i:nth-child(1)::after { content: ""; position: absolute; inset: 32%; border: .9rem solid rgba(20,20,22,.22); border-right-color: transparent; border-radius: 50%; }
@keyframes p-turn { from { transform: rotateX(-18deg) rotateY(0); } to { transform: rotateX(-18deg) rotateY(360deg); } }

/* ---------- Site curtain (the page opening from a slit after the portal) ---------- */
.p-app.is-curtained { height: 100svh; overflow: hidden; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .p-reel__inner { animation: none; }
  .p-fig__text .w { opacity: 1; }
  .p-deck { height: auto; }
  .p-deck__pin { position: relative; height: auto; display: grid; gap: 1rem; padding: var(--sp-lg) var(--gutter); }
  .p-deck__title { position: static; translate: none; margin-inline: auto; }
  .p-deck__cards { position: static; display: grid; gap: 1rem; justify-items: center; }
  .p-deck__card { position: relative; left: auto; top: auto; translate: none; min-height: 0; }
}

/* ───────────── Plaster landing tones (from styles/plaster/landing.html) ───────────── */
/* Layout for this template only. Tokens, type, chrome and components live in plaster.css.
   The art is flat SVG interiors (moulded walls, herringbone floors) standing in for photography:
   swap each <svg class="p-art"> for an <img class="p-art" alt="…">. Brand "Socle." and every figure are placeholders. */
.tone-putty { --wall:#d6ccb2; --trim:#e7e0cc; --floor:#a77d57; --sofa:#c9a57c; --chair:#b8895a; --wood:#86603f; --sky:#f1f1ea; --art:#ebe4d2; --lamp:#2b2a28; --soft:#e9e1cf; }
.tone-sage  { --wall:#7c8770; --trim:#89947c; --floor:#b8936b; --sofa:#56624d; --chair:#c49a62; --wood:#cfae80; --sky:#eef2ec; --art:#dcd5c4; --lamp:#1f1f1d; --soft:#a8835a; }
.tone-cream { --wall:#ebe6d9; --trim:#f6f2e8; --floor:#b48d65; --sofa:#d9d1c1; --chair:#9a9a8e; --wood:#e2dccd; --sky:#fbfbf7; --art:#c9c2b2; --lamp:#2b2a28; --soft:#cfc6b3; }
.tone-night { --wall:#36332e; --trim:#423e37; --floor:#5a4531; --sofa:#8d7259; --chair:#6c5a48; --wood:#7a5a3d; --sky:#d8c48e; --art:#5b544a; --lamp:#c9b27a; --soft:#a5876a; }
.tone-umber { --wall:#9b7f69; --trim:#a88d77; --floor:#6e5139; --sofa:#e3d6c2; --chair:#4f4a42; --wood:#d8c6a7; --sky:#f3eadb; --art:#e8dccb; --lamp:#1f1f1d; --soft:#c7ae8e; }

.hero-h1 { display: grid; }
.hero-h1 .l1 { display: flex; justify-content: space-between; }
.hero-h1 .l2 { padding-left: 30%; }
@media (max-width: 767px) { .hero-h1 .l1 { display: block; } .hero-h1 .l2 { padding-left: 0; } }
.pres-statement { max-width: 62rem; margin-inline: auto; }
.rooms-head { padding: var(--sp-lg) var(--gutter); }
.split-wrap { padding: var(--sp-lg) var(--gutter); display: grid; gap: var(--sp-md); }
.split-wrap .p-head-block { color: var(--stone); }
.p-split__handle .x-btn__tile { font-size: 1.25rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ───────────── Harbour & Lane page layer ───────────── */
:root{--rib:32px}
html.shot{--rib:0px}
html{scroll-padding-top:calc(var(--rib) + 80px)}
.p-head{top:var(--rib)}
.shot .p-portal{display:none}
.p-head__mark,.p-portal__brand{white-space:nowrap}

/* the viewing / valuation form: underline fields on putty, a plus-tile submit */
.p-book{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem;padding:0 var(--gutter);margin-top:3rem;text-align:left}
.p-book form{grid-column:4 / span 6;display:grid;gap:1.5rem}
.p-book .p-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.p-book label,.p-book fieldset{display:grid;gap:.6rem}
.p-book input,.p-book select{width:100%;height:3rem;padding:0;border:0;border-bottom:1px dashed var(--dash);background:transparent;font:300 1.6rem/1 var(--f-display);font-variation-settings:"SOFT" 50;letter-spacing:-.03em;color:var(--charcoal);border-radius:0;appearance:none;-webkit-appearance:none;transition:border-color var(--t-hover) var(--ease)}
.p-book input:focus,.p-book select:focus{outline:0;border-bottom:1px solid var(--charcoal)}
.p-book input::placeholder{color:rgba(20,20,22,.35)}
.p-book .chips{display:flex;flex-wrap:wrap;gap:.5rem}
.p-book .ex-chip{height:2.5rem;padding:0 1rem;border:1px dashed var(--dash);border-radius:.25em;background:transparent;font:400 .8rem/1 var(--f-label);text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:background var(--t-hover) var(--ease),color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}
.p-book .ex-chip[aria-pressed="true"]{background:var(--charcoal);border-color:var(--charcoal);color:var(--cream)}
.p-book button[type="submit"]{justify-self:start;background:none;border:0;cursor:pointer;padding:0}
.p-book [data-note]:empty{display:none}
.p-book [data-note]{padding-top:1rem;border-top:1px dashed var(--dash);max-width:34rem}
@media (max-width:767px){.p-book form{grid-column:1 / -1}.p-book .p-row{grid-template-columns:1fr}.p-book input,.p-book select{font-size:1.3rem}}
/* phones: the four hero stats sit two by two */
@media (max-width:767px){.p-stats > div{flex:0 0 calc(50% - .5rem);max-width:none}}