/* About page — /about/
   Layers on property.css (which supplies the header, slide-out menu, footer
   and the :root tokens). Only the page body is styled here.

   This page opens on the same full-bleed hero as /properties/ and /sold/, so
   the shared header keeps its default transparent-over-hero treatment and the
   inline script in about.html adds .scrolled once the body covers the photo.

   ── Hero ───────────────────────────────────────────────────────────
   Full-screen and locked to the viewport: it never scrolls, the page body
   slides up over it and covers it entirely. position:fixed (not sticky) is
   what does it — a sticky hero unpins once its own section has scrolled past.
   .hero-section is an empty one-screen spacer reserving the scroll distance,
   and .ab-intro (opaque, higher z-index) is what covers it. Kept in step with
   the copies in properties.html / sold.html. */
.hero-section{margin:0;padding:0;height:100vh;height:100svh}
.hero-bleed{position:fixed;top:0;left:0;z-index:0;width:100vw;height:100vh;height:100svh;overflow:hidden;background:#000}
/* Once a full viewport has scrolled by, the body covers the hero completely —
   stop rendering it so it is not composited beneath the rest of the page.
   visibility, not display: it keeps the decoded image around, so scrolling
   back up is instant rather than a re-decode. */
.hero-bleed.is-passed{visibility:hidden}
/* 45%: the house, entry steps and plantings sit through the middle of the
   frame — this trims sky off the top without cutting the walkway. The
   narrower breakpoints crop tighter, so they bias further down to keep the
   entry in frame rather than filling it with roofline. */
.hero-bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hero-bleed::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,.15) 40%,rgba(0,0,0,.45))}
/* flex-direction:column is load-bearing: this block holds the heading AND the
   tagline, and a row would sit them side by side. */
.hero-text{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 1rem;pointer-events:none;
	will-change:transform,opacity;transform:translate3d(0,calc(var(--hero-scroll,0px) * -1),0);opacity:var(--hero-fade,1)}
/* The photo stays pinned, but the words ride the page: --hero-scroll is the
   scroll offset and --hero-fade the matching 1->0 ramp, both written by the
   hero script. The ramp is sized so the text is fully gone before it would
   reach the header, rather than sliding under it. No transition on these:
   the scroll position IS the clock, and easing it would lag the page. */
@media (prefers-reduced-motion:reduce){
	/* Back to the pinned hero — no travel, no fade. */
	.hero-text{transform:none;opacity:1}
}
.hero-heading{margin:0;font-family:var(--serif);font-size:clamp(28px,6vw,64px);font-weight:300;letter-spacing:.04em;line-height:1.05;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hero-tagline{margin:.9em 0 0;font-size:clamp(13px,1.6vw,17px);font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5)}
/* Scroll cue, centred at the foot of the hero. Fades out as soon as the page
   moves so it does not sit on top of the copy. */
.hero-cue{position:absolute;left:50%;bottom:2.25rem;z-index:2;translate:-50% 0;width:26px;height:42px;border:1px solid rgba(255,255,255,.7);border-radius:999px;opacity:.85;transition:opacity .3s ease}
.hero-cue::after{content:'';position:absolute;left:50%;top:9px;width:2px;height:7px;margin-left:-1px;background:#fff;border-radius:1px;animation:heroCue 1.9s ease-in-out infinite}
@keyframes heroCue{0%,100%{transform:translateY(0);opacity:0}35%{opacity:1}70%{transform:translateY(13px);opacity:0}}
.hero-section.is-scrolled .hero-cue{opacity:0}
@media (prefers-reduced-motion:reduce){
	.hero-cue::after{animation:none}
}
@media (max-width:900px){
	.hero-bleed img{object-position:center 48%}
}
@media (max-width:600px){
	.hero-bleed img{object-position:center 50%}
	.hero-cue{bottom:1.5rem}
}

/* Every section after the hero must paint above it — this is what creates the
   "scrolls up in front of it" effect. position:relative gives the z-index
   something to apply to, and the opaque background is what actually hides the
   photo (.ab-alt and .ab-cta bring their own). The footer already carries the
   same pair in property.css, for this exact reason. */
.ab-intro,.ab-sec,.ab-cta{position:relative;z-index:1}
.ab-intro,.ab-sec{background:#fff}

.ab-inner{max-width:1160px;margin:0 auto;padding:0 2rem}
.ab-narrow{max-width:760px}

/* ── Intro: portrait beside the lede ───────────────────────────────── */
.ab-intro{padding:3rem 0 4rem}
.ab-intro .ab-inner{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:3rem;align-items:start}
.ab-portrait{width:100%;height:auto;display:block;object-fit:cover;background:#f2f0ea}
.ab-eyebrow{margin:0 0 .7rem;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.ab-lede .ab-h1{font-size:clamp(30px,4.4vw,52px);line-height:1.08;margin:0 0 .5rem}
.ab-tagline{font-family:var(--serif);font-size:clamp(17px,2vw,21px);line-height:1.5;color:var(--ink);margin:0 0 1.6rem;font-style:italic}
.ab-lede p{margin:0 0 1.05rem;max-width:62ch}

.ab-contact{display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;margin-top:1.9rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.ab-contact a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.ab-contact a:hover{border-bottom-color:var(--ink)}
.ab-k{display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}

/* ── Content sections ──────────────────────────────────────────────── */
.ab-sec{padding:4rem 0}
.ab-alt{background:#faf9f6}
.ab-sec h2{font-size:clamp(23px,2.8vw,32px);margin:0 0 1.6rem}
.ab-sec h3{font-size:1rem;font-family:var(--sans);font-weight:600;letter-spacing:.01em;margin:0 0 .55rem}
.ab-sec p{margin:0 0 1rem;max-width:66ch}
.ab-sec p:last-child{margin-bottom:0}


.ab-areas{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;padding:0;margin:1.5rem 0}
.ab-areas li{border:1px solid var(--line);padding:.42rem 1rem;font-size:.78rem;letter-spacing:.05em}
.ab-note{font-size:.88rem;color:var(--muted)}
.ab-note a{color:var(--ink)}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.ab-faq h3{margin-top:2rem;font-family:var(--serif);font-weight:400;font-size:1.12rem}
.ab-faq h3:first-child{margin-top:0}
.ab-faq p{margin:0}
.ab-faq a{color:var(--ink)}

/* ── Closing CTA ───────────────────────────────────────────────────── */
.ab-cta{padding:4.5rem 0 5.5rem;background:var(--ink);color:#fff;text-align:center}
.ab-cta h2{font-size:clamp(24px,3vw,34px);margin:0 0 .8rem}
.ab-cta p{max-width:52ch;margin:0 auto 1rem;color:rgba(255,255,255,.86)}
.ab-cta-links{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin:2rem 0 1.6rem}
.ab-btn{display:inline-block;padding:.85rem 2.2rem;background:#fff;color:var(--ink);text-decoration:none;
	font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;transition:.2s;border:1px solid #fff}
.ab-btn:hover{background:transparent;color:#fff}
.ab-btn--ghost{background:transparent;color:#fff}
.ab-btn--ghost:hover{background:#fff;color:var(--ink)}
.ab-cta .ab-note{color:rgba(255,255,255,.8)}
.ab-cta .ab-note a{color:#fff}

@media (max-width:860px){
	.ab-intro .ab-inner{grid-template-columns:1fr;gap:2rem}
	.ab-portrait{max-width:300px}
}
@media (max-width:600px){
	.ab-inner{padding:0 1.25rem}
	.ab-sec{padding:3rem 0}
}