/* Greenvale — site styles.
   Brand palette and type from the brand package (15 Oct 2026):
   Woodland Olive, Warm Ivory, Soft Sage, Sea Grey; Cormorant Garamond headings, Montserrat body. */

:root {
  --olive: #41483B;
  --ivory: #F4F0E8;
  --sage: #A7AE9A;
  --sage-light: #E4E6DC;
  --pale: #DCDED1;      /* pale sage: logo and text over the forest */
  --sea: #78918F;
  --sea-deep: #5F7674;
  --white: #FFFFFF;
  --ink: var(--olive);
  --muted: #6B7064;
  --line: #D3D5C8;
  --ev: #E2001A;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --wrap: 1200px;
  --gutter: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; } /* Cormorant's default old-style figures made "Home 1" read as "Home I" */
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 72px; }

.skip { position: absolute; left: -9999px; top: 12px; background: var(--olive); color: var(--ivory); padding: 10px 16px; z-index: 100; }
.skip:focus { left: 12px; }

/* ---------- type ---------- */
.caps { font-family: var(--sans); text-transform: uppercase; letter-spacing: .22em; font-size: 10.5px; font-weight: 500; margin: 0; }
.muted { color: var(--muted); }
.accent { color: var(--sea-deep); }
.fine { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; line-height: 1.6; }
.fine--band { color: inherit; opacity: .8; }
.italic { font-style: italic; font-family: var(--serif); font-size: 16px; }
.statement__text { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3vw, 44px); line-height: 1.22; letter-spacing: -.005em; margin: 0; max-width: 800px; }
.statement__text--light { color: var(--ivory); }
.lead { font-size: 15.5px; line-height: 1.65; margin: 0; }
.h3 { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.1; margin: 0; }

/* ---------- layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.band { padding: 0 0 96px; }
.band--light { background: var(--sage-light); padding: 88px 0; }
.band--sea { background: var(--sea); color: var(--ivory); padding: 96px 0; }
.band--olive { background: var(--olive); color: var(--ivory); padding: 96px 0; }
.band--tight { padding-bottom: 64px; }
.bleed { margin: 0; width: 100%; height: clamp(360px, 62vh, 720px); overflow: hidden; background: #000; }
.bleed img { width: 100%; height: 100%; object-fit: cover; }
.statement { padding-top: 72px; display: flex; flex-direction: column; gap: 22px; }
.twoup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 64px; }
.twoup figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.twoup img { width: 100%; height: 100%; object-fit: cover; }

/* links and buttons */
.lnk { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; }
.lnk:hover { opacity: .7; }
.arrow { width: 14px; height: 14px; display: inline-block; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .4s var(--ease); }
.lnk:hover .arrow { transform: translateX(4px); }
.arrow--back { transform: rotate(180deg); }
.lnk:hover .arrow--back { transform: rotate(180deg) translateX(4px); }
.pill { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer; font-family: var(--sans); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 600; text-decoration: none; transition: background .25s, color .25s, transform .4s var(--ease); }
.pill:hover { transform: translateY(-1px); }
.pill--glass { background: rgba(244, 240, 232, .18); color: var(--ivory); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); height: 40px; padding: 0 20px; }
.pill--glass:hover { background: var(--ivory); color: var(--olive); }
.pill--ivory { background: var(--ivory); color: var(--olive); height: 54px; padding: 0 32px; }
.pill--ivory:hover { background: var(--white); color: var(--olive); }
.pill--olive { background: var(--olive); color: var(--ivory); }
.pill--olive:hover { background: #2F3529; color: var(--ivory); }
.pill--line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.pill--line:hover { background: var(--olive); color: var(--ivory); box-shadow: none; }
.hero .pill--line:hover { background: var(--ivory); color: var(--olive); }
.iconbtn { appearance: none; background: transparent; border: 0; cursor: pointer; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; transition: background .25s; }
.iconbtn:hover { background: rgba(244, 240, 232, .14); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; margin-right: 10px; vertical-align: middle; }
.dot--ev { background: var(--ev); }

/* ---------- top bar ---------- */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 40; color: var(--ivory); transition: background .35s var(--ease), color .35s, box-shadow .35s; }
.topbar__inner { padding: 0 var(--gutter); height: 80px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.topbar__left { display: flex; align-items: center; }
.topbar__status { opacity: 0; transition: opacity .35s; font-size: 10px; }
.topbar__back { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; font-size: 10px; }
.topbar__back .arrow { width: 12px; height: 12px; }
.topbar__right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.brand { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
.brand__logo { height: 38px; width: auto; }
.brand__logo--olive { display: none; }
.topbar--solid { background: rgba(244, 240, 232, .95); color: var(--olive); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(65, 72, 59, .1); }
.topbar--solid .topbar__inner { height: 66px; }
.topbar--solid .brand__logo { height: 32px; }
.topbar--solid .brand__logo--ivory { display: none; }
.topbar--solid .brand__logo--olive { display: block; }
.topbar--solid .topbar__status { opacity: 1; }
/* the brokerage lockup sits top left on the landing page (21 Oct 2026, option C), over the intro and on the solid bar; hidden with the left slot on phones */
.topbar__ev { text-align: left; align-items: flex-start; color: inherit; text-decoration: none; transition: opacity .25s; }
.topbar__ev:hover { opacity: .75; }
.hero__foot.hero__foot--centre { justify-content: center; }
.topbar--solid .pill--glass { background: var(--olive); color: var(--ivory); }
.topbar--solid .pill--glass:hover { background: #2F3529; }
.topbar--solid .iconbtn:hover { background: rgba(65, 72, 59, .08); }


/* ---------- Greenvale wordmark ----------
   The brand symbol as a mask (so it takes the text colour) beside the name in Cormorant Garamond 600,
   proportioned to the designer's horizontal lockup. Sized by font-size: the lockup is 1.5em tall. */
.wm { display: inline-flex; align-items: flex-start; line-height: 1; white-space: nowrap; color: inherit; }
.wm__mark { flex: none; display: block; width: 1.984em; height: 1.496em; background: currentColor; -webkit-mask: url("assets/brand/greenvale-mark.png") center / contain no-repeat; mask: url("assets/brand/greenvale-mark.png") center / contain no-repeat; }
.wm__word { font-family: var(--serif); font-weight: 600; font-size: 1em; margin: .319em 0 0 -.084em; }
.brand__wm { font-size: 28px; } /* over a hero photo (home pages); the landing shows the bar logo only once solid */
.topbar--solid .brand__wm { font-size: 24px; }
.topbar--intro .brand__wm { font-size: 24px; } /* landing: the flying intro logo lands at the solid size, so nothing jumps when the bar turns solid */

/* ---------- menu drawer ---------- */
.menu-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(65, 72, 59, .4); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s linear .5s; }
.menu-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
.menu { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: clamp(380px, 33.333vw, 560px); background: var(--ivory); color: var(--olive); overflow: auto; box-shadow: -30px 0 60px -40px rgba(65, 72, 59, .45); transform: translateX(100%); visibility: hidden; transition: transform .6s var(--ease), visibility 0s linear .6s; }
.menu.is-open { transform: none; visibility: visible; transition: transform .6s var(--ease); }
.menu__inner { padding: 20px 40px 40px; min-height: 100%; display: flex; flex-direction: column; }
.menu__close { align-self: flex-end; }
.menu__close:hover { background: rgba(65, 72, 59, .08); }
.menu__logo { font-size: 29.4px; align-self: flex-start; flex: none; margin: 8px 0 0; }
.menu__list { list-style: none; margin: 4vh 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.menu__list a { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 2.8vw, 42px); line-height: 1.2; text-decoration: none; display: inline-block; padding: 5px 0; transition: transform .5s var(--ease), color .25s; }
.menu__list a:hover { transform: translateX(10px); color: var(--sea-deep); }
.menu__foot { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; gap: 22px; font-size: 14px; }
.menu__foot p { margin: 6px 0 0; line-height: 1.5; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #000; color: var(--ivory); display: flex; align-items: center; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.78); animation: heroDrift 22s var(--ease) both; }
@keyframes heroDrift { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,34,28,.5) 0%, rgba(30,34,28,.2) 45%, rgba(30,34,28,.5) 100%); }
.hero__content { position: relative; max-width: var(--wrap); width: 100%; margin: 0 auto; padding: 120px var(--gutter) 150px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero__tagline { font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 6vw, 84px); line-height: 1.02; letter-spacing: -.01em; margin: 0; max-width: 820px; }
.hero__sub { margin: 0; max-width: 520px; font-size: 16px; line-height: 1.65; color: rgba(244, 240, 232, .92); }
.hero__row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.hero__price { display: inline-flex; flex-direction: column; gap: 6px; font-family: var(--serif); font-weight: 500; font-size: 42px; line-height: 1; }
.hero__price .caps { font-size: 10px; opacity: .8; }
.hero__filmlink { color: var(--ivory); font-size: 10px; }
.hero__foot { position: absolute; left: 0; right: 0; bottom: 36px; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--gutter); }
.hero__foot .caps { font-size: 10px; }
.hero__scroll { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--ivory); padding: 6px 10px; }
.hero__scrollline { width: 1px; height: 56px; background: rgba(244, 240, 232, .32); position: relative; overflow: hidden; display: block; }
.hero__scrollline::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--ivory); transform: translateY(-100%); animation: scrollcue 2.4s var(--ease) infinite; }
@keyframes scrollcue { 0% { transform: translateY(-100%); } 55% { transform: translateY(100%); } 100% { transform: translateY(100%); } }
.hero__content > * { animation: rise 1.1s var(--ease) both; }
.hero__content > :nth-child(2) { animation-delay: .12s; }
.hero__content > :nth-child(3) { animation-delay: .24s; }
.hero__content > :nth-child(4) { animation-delay: .36s; }
.hero--low { align-items: flex-end; }
.hero--low .hero__content { padding: 160px var(--gutter) 150px; gap: 26px; }
.hero__tagline--big { font-size: clamp(54px, 9vw, 150px); line-height: .94; letter-spacing: -.015em; max-width: none; }
/* landing intro (21 Oct 2026): "Home 1" large with "Ten Mile Point" set smaller beneath it */
.hero__row--split { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-top: 10px; }
.hero__btns { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__row--split .hero__sub { max-width: 440px; font-size: 15px; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- brokerage lockup ---------- */
.ev { font-family: var(--sans); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ev .amp { color: var(--ev); font-weight: 600; }
.ev--sub { display: block; font-weight: 400; letter-spacing: .28em; font-size: .7em; margin-top: 4px; }
.lockup { display: inline-flex; flex-direction: column; line-height: 1.1; text-decoration: none; text-align: right; }

/* ---------- Home 1 feature (the way in) ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--white); }
.feature__photo { display: block; margin: 0; min-height: 560px; overflow: hidden; background: #000; position: relative; }
.feature__photo img { transition: transform 1.4s var(--ease); }
.feature__photo:hover img { transform: scale(1.03); }
.feature__photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.feature__text { padding: 72px 64px; display: flex; flex-direction: column; gap: 18px; align-self: center; }
.feature__price { font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 5vw, 76px); line-height: 1; letter-spacing: -.01em; margin: 0; }
.feature__specs { margin: 0; font-size: 15px; line-height: 1.6; max-width: 420px; }
.feature__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- presented by ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--white); }
.split__photo { margin: 0; min-height: 480px; overflow: hidden; background: #000; position: relative; }
.split__photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.split__text { padding: 72px 8vw 72px 64px; display: flex; flex-direction: column; gap: 18px; align-self: center; }
.split__name { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 3.6vw, 54px); line-height: 1.05; margin: 0; }
.split__body { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 480px; }
.contact { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; font-size: 15px; max-width: 480px; }
.contact li { border-top: 1px solid var(--line); padding-top: 10px; }
.contact .caps { display: block; font-size: 9.5px; margin-bottom: 4px; }
.split__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- steps ---------- */
.steps { list-style: none; margin: 48px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.steps li { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--olive); padding-top: 18px; }
.steps__num { font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--sea-deep); }
.steps__title { font-family: var(--sans); font-weight: 600; font-size: 14px; margin: 0 0 8px; line-height: 1.4; }
.steps p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); }

/* ---------- faq ---------- */
.faq__wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.faq__note { margin: 18px 0 0; font-size: 14px; opacity: .85; }
.faq { border-top: 1px solid rgba(244, 240, 232, .4); }
.faq__item { border-bottom: 1px solid rgba(244, 240, 232, .4); }
.faq__item summary { list-style: none; cursor: pointer; padding: 18px 44px 18px 0; font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.3; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 2v12M2 8h12' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 2v12M2 8h12' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .4s var(--ease); }
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item summary:hover { opacity: .8; }
.faq__item p { margin: 0 0 20px; font-size: 14px; line-height: 1.65; opacity: .92; max-width: 640px; }

/* ---------- register band ---------- */
.register { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.register__text { display: flex; flex-direction: column; gap: 20px; }
.register__title { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.15; margin: 0; }
.register__lead { margin: 0; font-size: 15px; line-height: 1.65; opacity: .9; max-width: 420px; }
.register__list { list-style: none; margin: 8px 0 0; padding: 0; max-width: 400px; }
.register__list li { padding: 10px 0; border-top: 1px solid rgba(244, 240, 232, .3); font-size: 14px; }
.register__list li:last-child { border-bottom: 1px solid rgba(244, 240, 232, .3); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--sans); text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 500; }
.field input, .field select { font: inherit; font-size: 15px; height: 46px; padding: 0; border: 0; border-bottom: 1px solid rgba(244, 240, 232, .5); background: transparent; color: var(--ivory); border-radius: 0; }
.field select option { color: var(--olive); }
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--ivory); border-bottom-width: 2px; }
.field.is-invalid input { border-bottom-color: #F3C3B7; }
.opt { opacity: .7; text-transform: none; letter-spacing: 0; }
.check { display: flex; align-items: center; gap: 12px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ivory); }
.check.is-invalid span { color: #F3C3B7; }
.req { color: #F3C3B7; font-weight: 600; }
.field__error { display: none; font-size: 12.5px; color: #F3C3B7; }
.field__error.is-on { display: block; }
.form__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form__error { margin: 0; color: #F3C3B7; font-size: 14px; }
.form__privacy { margin: 0; }
.form__privacy a { color: inherit; }
.form__done { font-size: 16px; line-height: 1.6; }
.form__done:focus { outline: none; }
.form__done p { margin: 0 0 10px; }
.form__done-title { font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.2; }

/* ---------- footer ---------- */
.footer { padding: 36px 0 48px; }
.footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer__brand { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer__logo { font-size: 20px; }
.footer--dark .footer__logo { color: var(--pale); }
.footer__brand a { color: inherit; text-decoration: none; }
.footer__brand .caps { font-size: 9px; letter-spacing: .2em; }
.footer__ev { text-align: left; align-items: flex-start; }
.footer__ev .ev--sub { margin-top: 5px; letter-spacing: .3em; }
.footer__designer { display: block; line-height: 0; transition: opacity .25s; } /* Emily Anne, Cuell Design (25 Oct 2026); pale copy of the logo for the dark footer */
.footer__designer img { display: block; height: 42px; width: auto; }
.footer__designer:hover { opacity: .75; }
.footer__cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.footer__cta .lnk { font-size: 10px; }
.footer__bottom { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 20px; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 16px 48px; align-items: start; }
.footer__legal { margin: 0; max-width: 760px; }
.footer__credit { margin: 0; text-align: right; }
.footer__credit a { color: var(--olive); text-decoration: underline; text-underline-offset: 3px; }
.footer__credit a:hover { color: var(--sea-deep); }

/* ---------- sticky bar (phones only) ---------- */
.stickybar { display: none; }

/* ---------- home pages (project showcase) ---------- */
.hero--home .hero__content { gap: 22px; }
.hero--home .hero__img { filter: brightness(.86); }
.hero--home .hero__shade { background: linear-gradient(90deg, rgba(20,26,18,.74) 0%, rgba(20,26,18,.42) 48%, rgba(20,26,18,.12) 100%), linear-gradient(180deg, rgba(20,26,18,.25) 0%, rgba(20,26,18,0) 35%, rgba(20,26,18,.45) 100%); }
.wrap-reset { margin-top: 28px; }
.film { position: relative; width: 100%; height: clamp(360px, 70vh, 820px); background: #000; overflow: hidden; }
.film__teaser { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35)); pointer-events: none; transition: opacity .4s; }
.film__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); appearance: none; border: 0; background: transparent; color: var(--ivory); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 20px; }
.film__playring { width: 84px; height: 84px; border-radius: 50%; border: 1px solid rgba(244,240,232,.8); background: rgba(0,0,0,.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; transition: transform .5s var(--ease), background .3s; }
.film__play:hover .film__playring { transform: scale(1.06); background: var(--ivory); color: var(--olive); }
.film__playlabel { font-family: var(--sans); text-transform: uppercase; letter-spacing: .22em; font-size: 11px; font-weight: 600; }
.film__runtime { opacity: .7; margin-left: 6px; }
.film__embed { position: absolute; inset: 0; }
.film__embed iframe { width: 100%; height: 100%; border: 0; }
/* the film lightbox (23 Oct 2026): a 16:9 player as large as the screen allows, with our own end card over it */
.filmbox { border: 0; padding: 0; margin: 0; background: transparent; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; overflow: hidden; }
.filmbox[open] { display: flex; align-items: center; justify-content: center; animation: filmboxIn .45s var(--ease) both; }
.filmbox::backdrop { background: rgba(14, 17, 12, .94); }
@keyframes filmboxIn { from { opacity: 0; } to { opacity: 1; } }
.filmbox__frame { position: relative; width: min(92vw, calc((100vh - 140px) * 16 / 9)); width: min(92vw, calc((100dvh - 140px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); }
.filmbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.filmbox__close { position: fixed; right: 16px; top: 16px; z-index: 2; color: var(--ivory); }
.filmbox__close:hover { background: rgba(244, 240, 232, .12); }
.filmbox__end { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 24px; text-align: center; color: var(--ivory); background: linear-gradient(rgba(20, 26, 18, .7), rgba(20, 26, 18, .7)), var(--poster) center / cover no-repeat #141a12; animation: filmboxIn .6s var(--ease) both; }
.filmbox__end[hidden] { display: none; }
.filmbox__endtitle { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4.2vw, 60px); line-height: 1.05; }
.filmbox__endbtns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.filmbox__end .pill--line:hover { background: var(--ivory); color: var(--olive); }
@media (max-width: 700px) { .filmbox__frame { width: 100vw; } .filmbox__end { gap: 16px; } .filmbox__endtitle { font-size: 26px; } .filmbox__end .pill { height: 44px; padding: 0 20px; font-size: 10px; } }
.film--playing .film__play, .film--playing .film__shade { opacity: 0; pointer-events: none; }
/* no film yet: the poster photo with a quiet "coming soon" in the middle */
.film__shade--soon { background: rgba(20, 26, 18, .4); }
.film__soon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ivory); text-align: center; pointer-events: none; }
.film__soon .caps { font-size: 10px; letter-spacing: .24em; opacity: .85; }
.film__soonline { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 5vw, 76px); line-height: 1; letter-spacing: -.01em; }
.finishes { display: flex; flex-direction: column; gap: 32px; }
.finishes__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 64px; max-width: 900px; }
.finishes__list { list-style: none; margin: 0; padding: 0; }
.finishes__list li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.finishes__list li:last-child { border-bottom: 1px solid var(--line); }
.plans-soon { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 760px; }
.plans-soon__text { margin: 0; max-width: 520px; font-size: 16px; line-height: 1.7; color: rgba(244, 240, 232, .86); }
.lightbox { border: 0; padding: 0; background: transparent; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; }
.lightbox::backdrop { background: rgba(30, 34, 28, .92); }
.lightbox__fig { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 64px 80px; color: var(--ivory); }
.lightbox__fig img { max-width: 100%; max-height: calc(100vh - 160px); object-fit: contain; }
.lightbox__fig figcaption { font-size: 10px; opacity: .8; }
.lightbox__close { position: fixed; right: 16px; top: 16px; color: var(--ivory); }
.lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); appearance: none; border: 1px solid rgba(244,240,232,.5); background: rgba(0,0,0,.3); color: var(--ivory); width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
.lightbox__nav .arrow { width: 16px; height: 16px; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .split__text { padding: 56px 40px; }
  .feature__text { padding: 56px 40px; }
}
@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .band { padding-bottom: 64px; }
  .band--light, .band--sea, .band--olive { padding: 64px 0; }
  .bleed { height: 56vh; }
  .statement { padding-top: 48px; gap: 18px; }
  .twoup { grid-template-columns: 1fr; margin-top: 40px; }
  .feature { grid-template-columns: 1fr; }
  .feature__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .feature__text { padding: 36px 20px 44px; }
  .steps { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }
  .split { grid-template-columns: 1fr; }
  .split__photo { min-height: 0; aspect-ratio: 4 / 3.6; }
  .split__text { padding: 36px 20px 48px; }
  .contact { grid-template-columns: 1fr; }
  .faq__wrap { grid-template-columns: 1fr; gap: 24px; }
  .faq__item summary { font-size: 20px; padding-right: 36px; }
  .register { grid-template-columns: 1fr; gap: 40px; }
  .form { grid-template-columns: 1fr; }
  .topbar__inner { height: 64px; grid-template-columns: auto 1fr auto; }
  .topbar__left { display: none; }
  .brand { justify-self: start; }
  .brand__wm { font-size: 22px; }
  .topbar--solid .brand__wm { font-size: 22px; }
  .topbar__register { height: 36px; padding: 0 14px; font-size: 10px; letter-spacing: .18em; }
  .topbar__right { gap: 2px; }
  .hero__content { padding: 110px 20px 150px; gap: 20px; }
  .hero__sub { font-size: 15px; }
  .hero__foot { flex-direction: column; gap: 14px; align-items: center; bottom: 28px; }
  .hero__meta { display: none; }
  .hero__row { gap: 14px; }
  .hero__price { font-size: 34px; }
  .menu { width: 100%; box-shadow: none; }
  .menu__inner { padding: 16px 20px 32px; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__bottom { grid-template-columns: 1fr; }
  .footer__credit { text-align: left; }
  .showcase__tag { top: 18px; right: 20px; }
  .film { height: 56vh; }
  .film__playring { width: 64px; height: 64px; }
  .finishes__cols { grid-template-columns: 1fr; gap: 16px; }
  .lightbox__fig { padding: 64px 16px; }
  .lightbox__nav { width: 40px; height: 40px; }
  .footer { padding-bottom: calc(48px + 84px); }
  .stickybar { display: flex; gap: 10px; color: var(--olive); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(244, 240, 232, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); transition: transform .45s var(--ease), visibility .45s; }
  .stickybar__cta { flex: 1; height: 50px; padding: 0 12px; letter-spacing: .14em; white-space: nowrap; }
  .stickybar__call { width: 50px; height: 50px; padding: 0; flex: none; color: var(--olive); }
  .stickybar--hidden, .stickybar--onhero, body.menu-open .stickybar { transform: translateY(110%); visibility: hidden; } /* hidden, not just moved: iOS 26 Safari paints a strip of a bottom-pinned element's colour under its toolbar */
  .js .stickybar--init { transform: translateY(110%); visibility: hidden; transition: none; } /* until main.js has placed it: on a first visit the bar flashed white over the first screen (Jacob, 24 Oct 2026) */
}
@media (max-width: 380px) {
  .topbar__register { padding: 0 11px; letter-spacing: .12em; }
}



/* ---------- edition 2 (15 Oct 2026): edge-to-edge devices ---------- */
.marker { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px var(--gutter); border-top: 1px solid rgba(65, 72, 59, .28); }
.marker .caps { font-size: 10px; }
.marker .dot { width: 6px; height: 6px; margin-right: 8px; }
.marker--light { border-top-color: rgba(244, 240, 232, .35); }
.display { font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 6.4vw, 104px); line-height: .98; letter-spacing: -.015em; margin: 0; }
.display--sm { font-size: clamp(36px, 4.6vw, 72px); line-height: 1.02; }

/* Home 1: bleed photo, card overlapping its bottom edge */
.showcase { padding-bottom: 96px; }
.showcase__photo { display: block; position: relative; height: 78vh; min-height: 420px; max-height: 860px; overflow: hidden; background: #000; }
.showcase__tag { position: absolute; top: 26px; right: var(--gutter); z-index: 1; display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px; background: rgba(244, 240, 232, .92); color: var(--olive); font-size: 10px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.showcase__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: end; }
.showcase__card { background: var(--olive); color: var(--ivory); padding: 44px 44px 40px; margin-top: -150px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.showcase__price { font-family: var(--serif); font-weight: 500; font-size: clamp(52px, 5.4vw, 84px); line-height: 1; letter-spacing: -.01em; margin: 0; }
.showcase__specs { margin: 0; font-size: 14.5px; line-height: 1.6; opacity: .92; }
.showcase__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 12px; }
.showcase__aside { padding-bottom: 6px; max-width: 480px; display: flex; flex-direction: column; gap: 10px; }
.parallax { will-change: transform; transform: scale(1.12); }

/* The area: a line across the frame, then a mosaic with no gutters */

/* The next three: doors along the street */

/* Presented by: photo to the edge, ledger across the frame */
.agent { background: var(--ivory); color: var(--ink); } /* ivory since 21 Oct 2026, between the sea grey next-three band and the forest register band */
.agent__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.agent__photo { margin: 0; position: relative; min-height: 72vh; overflow: hidden; background: #000; }
.agent__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.agent__text { padding: 80px 8vw 80px 64px; align-self: center; display: flex; flex-direction: column; gap: 20px; }
.agent__name { font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 5.6vw, 92px); line-height: .98; letter-spacing: -.01em; margin: 0; }
.agent__body { margin: 0; font-size: 15px; line-height: 1.65; max-width: 480px; opacity: .94; }
.agent__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.ledger { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, auto); border-top: 1px solid var(--line); }
.ledger li { padding: 22px var(--gutter); display: flex; flex-direction: column; gap: 6px; font-size: 16px; border-left: 1px solid var(--line); }
.ledger li:first-child { border-left: 0; }
.ledger .caps { font-size: 9.5px; opacity: .85; }
.ledger a { text-decoration: none; }
.ledger a:hover { text-decoration: underline; }

/* Register: the symbol as a watermark */
.register-band { position: relative; overflow: hidden; padding-top: 0; }
.register-band .register { padding-top: 64px; position: relative; }
.watermark { position: absolute; right: -6vw; top: -4vw; width: 46vw; max-width: 760px; height: auto; opacity: .07; pointer-events: none; }
.register__title--big { font-size: clamp(38px, 4.2vw, 66px); line-height: 1.08; }

@media (max-width: 1100px) {
  .agent__text { padding: 56px 40px; }
}
@media (max-width: 900px) {
  .hero--low .hero__content { padding: 120px 20px 150px; }
  .hero__tagline--big { font-size: clamp(50px, 14vw, 90px); }
  .hero__row--split { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero__row--split .hero__sub { order: -1; }
  .marker { padding: 14px 20px; }
  .showcase { padding-bottom: 56px; }
  .showcase__photo { height: 62vh; min-height: 320px; }
  .showcase__row { grid-template-columns: 1fr; gap: 24px; }
  .showcase__card { margin-top: -56px; padding: 28px 22px 26px; }
  .showcase--after-intro { padding-top: 40px; }
  .showcase--after-intro .showcase__card { margin-top: 0; }
  .agent__grid { grid-template-columns: 1fr; }
  .agent__photo { min-height: 0; aspect-ratio: 4 / 4.4; }
  .agent__text { padding: 36px 20px 44px; }
  .ledger { grid-template-columns: 1fr; }
  .ledger li { border-left: 0; border-top: 1px solid var(--line); padding: 16px 20px; }
  .ledger li:first-child { border-top: 0; }
  .register-band .register { padding-top: 40px; }
  .watermark { width: 90vw; right: -30vw; top: -10vw; }
}


/* Home 1 spec sheet: olive band, price left, ledger of facts right */
.spec { background: var(--pale); color: var(--ink); padding: 88px 0 64px; position: relative; z-index: 2; } /* pale sage since 21 Oct 2026 (was olive) */
.spec__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.spec__lead { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 96px; }
.spec__price { font-family: var(--serif); font-weight: 500; font-size: clamp(64px, 7vw, 116px); line-height: .95; letter-spacing: -.015em; margin: 0; }
.spec__sub { margin: 0; font-size: 15px; line-height: 1.65; opacity: .9; max-width: 400px; }
.spec__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 10px; }
.ledger2 { margin: 0; border-top: 1px solid rgba(65, 72, 59, .22); }
.ledger2__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: baseline; gap: 24px; padding: 17px 0 15px; border-bottom: 1px solid rgba(65, 72, 59, .22); }
.ledger2 dt { font-size: 10px; opacity: .8; }
.ledger2 dd { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(21px, 1.75vw, 27px); line-height: 1.15; letter-spacing: 0; } /* was 30-46 px; Jacob: "feels unnaturally large" (24 Oct 2026) */
.ledger2__row:first-child dd { font-size: clamp(32px, 2.9vw, 44px); line-height: 1; letter-spacing: -.01em; } /* the price leads */
.ledger2__unit { vertical-align: .15em; }
.ledger2__unit { font-family: var(--sans); font-size: .34em; letter-spacing: .12em; text-transform: uppercase; opacity: .8; margin-left: 8px; vertical-align: .35em; }
.reveal .ledger2__row { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in .ledger2__row { opacity: 1; transform: none; }
.reveal.in .ledger2__row:nth-child(2) { transition-delay: .08s; }
.reveal.in .ledger2__row:nth-child(3) { transition-delay: .16s; }
.reveal.in .ledger2__row:nth-child(4) { transition-delay: .24s; }
.reveal.in .ledger2__row:nth-child(5) { transition-delay: .32s; }
.reveal.in .ledger2__row:nth-child(6) { transition-delay: .40s; }
.spec__foot { padding-top: 40px; }
.spec__foot .fine { max-width: 640px; margin: 0; }
@media (max-width: 900px) {
  .spec { padding: 52px 0 44px; }
  .spec__grid { grid-template-columns: 1fr; gap: 36px; }
  .spec__lead { position: static; }
  .spec__price { font-size: clamp(56px, 17vw, 72px); }
  .ledger2__row { grid-template-columns: 1fr; gap: 8px; padding: 16px 0 14px; }
  .ledger2 dd { font-size: 22px; }
  .ledger2__row:first-child dd { font-size: 32px; }
  .spec__foot { padding-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal .ledger2__row { opacity: 1; transform: none; }
}

/* ---------- scroll intro: logo on the aerial, shrinking into the top bar ---------- */
.hero--intro { --dwell: .4; display: block; height: 250vh; min-height: 0; overflow: visible; } /* 210vh of animation, then a still stretch (--dwell of a screen, 40vh) on the finished Home 1 frame; main.js reads --dwell */
.intro__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; display: flex; align-items: flex-end; } /* lvh, not svh: with Safari's toolbar collapsed an svh stage left a black band underneath (Jacob's iPhone, 23 Oct 2026) */
.intro__logo { display: none; position: absolute; left: 50%; top: 50%; font-size: clamp(32px, 7.2vw, 104px); transform: translate(-50%, -50%); z-index: 2; animation: logoIn 1.6s var(--ease) both; will-change: transform; }
.js .intro__logo { display: inline-flex; }
.intro__logo.is-landed { visibility: hidden; }
@keyframes logoIn { from { opacity: 0; } to { opacity: 1; } }
.hero--intro .hero__content > * { animation: none; }
.js .intro__content { opacity: 0; transform: translateY(36px); will-change: opacity, transform; }
.js .topbar--intro .brand { opacity: 0; transition: opacity .25s; }
.js .topbar--intro .brand.is-on { opacity: 1; }
.hero--intro .hero__foot { z-index: 1; }
.intro__img2 { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 55%; opacity: 0; will-change: opacity; }
.intro__shade2 { display: none; position: absolute; inset: 0; opacity: 0; background: radial-gradient(140% 120% at 0% 100%, rgba(31, 36, 26, .95) 0%, rgba(31, 36, 26, .86) 30%, rgba(31, 36, 26, .52) 50%, rgba(31, 36, 26, .16) 66%, rgba(31, 36, 26, 0) 78%), linear-gradient(90deg, rgba(31, 36, 26, .5) 0%, rgba(31, 36, 26, .22) 32%, rgba(31, 36, 26, 0) 52%), linear-gradient(180deg, rgba(31, 36, 26, .42) 0%, rgba(31, 36, 26, 0) 15%); will-change: opacity; }
.js .intro__img2, .js .intro__shade2 { display: block; }
.intro__facts { font-size: 11px; letter-spacing: .22em; margin: -4px 0 0; opacity: .92; }
.intro__facts span { margin: 0 .55em; opacity: .6; }
.intro__facts b { font-weight: inherit; white-space: nowrap; }
.intro__pill { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px; background: rgba(244, 240, 232, .92); color: var(--olive); font-size: 10px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.intro__pill .dot { margin-right: 8px; }
.showcase--after-intro { position: relative; z-index: 2; padding-top: 72px; }
.showcase--after-intro .showcase__card { margin-top: 0; }
.hero__img--forest { filter: brightness(.72) saturate(.9); }
.hero--intro { color: var(--pale); }
.hero--intro .hero__sub { color: var(--pale); opacity: .9; }
.hero--intro .pill--ivory { background: var(--pale); color: var(--olive); }
.hero--intro .pill--ivory:hover { background: var(--ivory); }
.hero--intro .pill--line:hover { background: var(--pale); color: var(--olive); }
.hero--intro .hero__scroll { color: var(--pale); }
.hero--intro .hero__scrollline { background: rgba(220, 222, 209, .32); }
.hero--intro .hero__scrollline::after { background: var(--pale); }
.topbar--intro:not(.topbar--solid) { color: var(--pale); }
/* landing: the first frame is only the forest and the logo; the lockup, links and button come in on the first scroll (Jacob, 22 Oct 2026) */
.topbar--intro .topbar__left, .topbar--intro .topbar__right { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .topbar--quiet .topbar__left, .js .topbar--quiet .topbar__right { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.js .topbar--quiet:focus-within .topbar__left, .js .topbar--quiet:focus-within .topbar__right { opacity: 1; transform: none; pointer-events: auto; }
.hero--intro .hero__shade { background: linear-gradient(180deg, rgba(20,26,18,.35) 0%, rgba(20,26,18,.15) 40%, rgba(20,26,18,.62) 100%); }
@media (max-width: 900px) {
  .hero--intro { height: 225vh; }
  .intro__logo { font-size: 12.4vw; }
  .intro__facts { font-size: 10px; letter-spacing: .16em; line-height: 1.8; }
  .intro__facts span { margin: 0 .2em; }
  .hero--intro .hero__foot > .caps { display: none; }
  .intro__img2 { object-position: 42% 50%; }
}
/* portrait screens get the portrait fireplace photo (a <picture> source in index.html); keep the mirror in frame */
@media (max-aspect-ratio: 3/4) {
  .intro__img2 { object-position: 14% 50%; }
}


/* ---------- pass 3 (16 Oct 2026) ---------- */
/* home pages: spec sheet title */
.spec__title { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 4.4vw, 68px); line-height: 1; letter-spacing: -.01em; margin: 0; }

/* home pages: film runs straight into the gallery */
.filmsec { padding: 0; }
.filmsec .film { height: clamp(420px, 78vh, 880px); }

/* home pages: edge-to-edge gallery; every row fills three columns (wide 3, land 2, tall 1) */
.gallerysec { padding: 4px 0 0; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 14vw; grid-auto-flow: dense; gap: 4px; }
.gallery__item { position: relative; margin: 0; grid-row: span 3; overflow: hidden; background: #000; }
.gallery__item--wide { grid-column: 1 / -1; }
.gallery__item--land { grid-column: span 2; }
.gallery__item--tall { grid-column: span 1; }
.gallery__btn { position: absolute; inset: 0; appearance: none; border: 0; padding: 0; background: #000; cursor: zoom-in; width: 100%; height: 100%; display: block; }
.gallery__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.gallery__btn:hover img { transform: scale(1.03); }
.gallery__item::after { content: ""; position: absolute; inset: auto 0 0 0; height: 36%; background: linear-gradient(180deg, rgba(20,26,18,0), rgba(20,26,18,.5)); pointer-events: none; }
.gallery__item figcaption { position: absolute; left: 24px; bottom: 20px; z-index: 1; color: var(--ivory); font-size: 10px; pointer-events: none; }
.gallerysec { position: relative; }
.gallery__item--more { display: none; }
.gallery--all .gallery__item--more { display: block; }
/* Home 1's gallery by floor (23 Oct 2026): a label over each area's grid; later areas wait behind "Show all" */
.gallery__area + .gallery__area { margin-top: 4px; }
.gallery__label { display: flex; align-items: baseline; gap: 14px; margin: 0; padding: 40px var(--gutter) 16px; font-size: 11px; letter-spacing: .22em; color: var(--olive); background: var(--ivory); }
.gallery__label span { color: var(--muted); letter-spacing: .16em; font-size: 9px; }
.gallery__area--more { display: none; }
/* the floor menu: sticks under the top bar (66 px once solid; 64 px on phones) for as long as the gallery is on screen */
.gallery__nav { position: sticky; top: 66px; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 12px var(--gutter); background: rgba(244, 240, 232, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.gallery__nav::-webkit-scrollbar { display: none; }
.gallery__nav a { flex: none; display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 16px; border-radius: 999px; color: var(--olive); text-decoration: none; font-size: 10px; letter-spacing: .2em; transition: background .3s var(--ease), color .3s var(--ease); }
.gallery__nav a span { font-size: 9px; letter-spacing: .1em; opacity: .55; }
.gallery__nav a:hover { background: rgba(65, 72, 59, .08); }
.gallery__nav a[aria-current] { background: var(--olive); color: var(--ivory); }
.gallery__area { scroll-margin-top: 130px; }
.gallery--all .gallery__area--more { display: block; }
.gallery__morebar { display: flex; justify-content: center; padding: 36px 24px 32px; }
.gallery__note { position: absolute; top: 22px; left: 24px; z-index: 2; margin: 0; padding: 9px 14px; border-radius: 999px; background: rgba(28, 31, 25, .52); color: var(--ivory); font-size: 10px; pointer-events: none; }

/* home pages: floorplans side by side with their controls */

/* home pages: the next home as a full-width photo */

/* landing: Alexi lockup sits with the text, not floating right */
.agent .lockup { text-align: left; align-items: flex-start; }

/* landing: area tiles read over busy photos */

/* landing: doors say where they go */

/* landing: the form sits on the forest again, under the olive */
.closing, .footer--dark { background: linear-gradient(rgba(65, 72, 59, .9), rgba(65, 72, 59, .93)), url("assets/hero-forest.jpg") center / cover no-repeat, var(--olive); color: var(--ivory); }
.closing { position: relative; }
.closing .register-band, .closing .footer--dark { background: transparent; }
.footer--dark { border-top: 1px solid rgba(244, 240, 232, .22); padding-top: 40px; }
.footer--dark .muted { color: rgba(244, 240, 232, .7); }
.footer--dark .fine { color: rgba(244, 240, 232, .72); }
.footer--dark .footer__bottom { border-top-color: rgba(244, 240, 232, .22); }
.footer--dark .footer__credit a { color: var(--pale); }
.footer--dark .footer__credit a:hover { color: var(--ivory); }
.register-band .watermark { opacity: .06; }

@media (max-width: 900px) {
  .spec__title { font-size: 40px; }
  .filmsec .film { height: 62vh; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 26vw; gap: 3px; }
  .gallery__item--wide, .gallery__item--land { grid-column: 1 / -1; grid-row: span 2; }
  .gallery__item--tall { grid-column: span 1; grid-row: span 3; }
  .gallery__item--solo { grid-column: 1 / -1; grid-row: span 4; } /* an odd tall in its floor (build.py) */
  .gallery__item figcaption { left: 14px; bottom: 12px; font-size: 9px; }
}


/* contact row: columns sized to their content, values never break; two by two when four will not fit on one line */
.ledger li > a, .ledger li > span:not(.caps) { white-space: nowrap; }
@media (max-width: 1120px) and (min-width: 901px) {
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger li:nth-child(3) { border-left: 0; }
  .ledger li:nth-child(n+3) { border-top: 1px solid var(--line); }
}


/* ---------- the design (Cuell Design): text and a materials board, photo to the right edge ---------- */
.design { background: var(--ivory); }
.design__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.design__text { padding: 72px var(--gutter) 88px; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.design__eyebrow { margin: 0 0 -12px; }
.design__lead { margin: 0; font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 520px; }
.swatches { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; max-width: 540px; }
.swatches li { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.swatch { display: block; width: 100%; max-width: 84px; aspect-ratio: 1; border-radius: 50%; background: center / cover no-repeat var(--sage-light); box-shadow: inset 0 0 0 1px rgba(65, 72, 59, .14); transition: transform .6s var(--ease); }
.swatches li:hover .swatch { transform: scale(1.06); }
.swatches .caps { font-size: 9px; letter-spacing: .16em; line-height: 1.5; }
.design__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 6px; }
/* the designer's logo and the link to her site as one unit under her paragraph (25 Oct 2026) */
.design__by { display: inline-flex; align-items: center; gap: 22px; margin: -2px 0 0; color: var(--olive); text-decoration: none; }
.design__by img { display: block; width: 132px; height: auto; flex: none; }
.design__by .caps { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; }
.design__by .arrow { transition: transform .4s var(--ease); }
.design__by:hover .arrow { transform: translateX(4px); }
.design__by:hover img { opacity: .8; }
.design__photo { margin: 0; position: relative; min-height: 78vh; overflow: hidden; background: var(--sage-light); } /* not black: on phones this photo sits right under the first screen, and a black box showed while it loaded (Jacob's iPhone, 24 Oct 2026) */
.design__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* the materials board (23 Oct 2026), set on the kitchen photo like a sample card on the counter */
.design__board { position: absolute; left: 32px; bottom: 32px; z-index: 1; width: min(32%, 300px); margin: 0; padding: 7px 7px 0; background: var(--ivory); box-shadow: 0 28px 56px -22px rgba(20, 26, 18, .6); }
.design__photo .design__board img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 1448 / 1086; }
.design__board figcaption { font-size: 9px; letter-spacing: .2em; color: var(--olive); padding: 9px 2px 10px; }
@media (max-width: 900px) { .design__board { left: 14px; bottom: 14px; width: min(30%, 180px); padding: 4px; } .design__board figcaption { display: none; } }
/* home pages: designer credit under the finishes */
.finishes__credit { margin: 0; font-size: 14px; color: var(--muted); }
.finishes__credit a { color: var(--olive); text-underline-offset: 3px; }
/* finishes beside the materials board (23 Oct 2026): text in the page column, the board bleeding off the right edge */
.finishes-band { padding: 104px 0; overflow: hidden; }
.finishes__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
/* the two lists share rows, so their hairlines line up even when an item wraps */
.finishes__split .finishes__cols { max-width: none; grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 0 36px; }
.finishes__split .finishes__list { display: contents; }
.finishes__fine { margin: 0; }
.finishes__board { margin: 0; }
/* the Cuell Design board as a flat-lay: its pieces cut out of the board's PDF and laid on this sage (#E4E6DC) with soft shadows,
   baked into the JPGs, so the images need no card or shadow and must stay on this background colour (24 Oct 2026) */
.finishes__board > img { display: block; width: 100%; height: auto; }
.finishes__board figcaption { margin-top: 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.finishes__board figcaption .caps { font-size: 9px; letter-spacing: .2em; color: var(--muted); }
.finishes__board figcaption img { display: block; width: 132px; height: auto; }
@media (max-width: 1100px) { .finishes__split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; } .finishes__split .finishes__cols { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } }
@media (max-width: 900px) {
  .finishes-band { padding: 0 0 48px; }
  .finishes__split { grid-template-columns: 1fr; gap: 26px; padding: 0; }
  .finishes__board { padding: 24px 6px 0; }
  .finishes__board { order: -1; }
  .finishes__board figcaption { margin-top: 0; }
  .finishes__board figcaption img { width: 112px; }
  .finishes__split .finishes { padding: 0 20px; }
}
@media (max-width: 900px) {
  .design__grid { grid-template-columns: 1fr; }
  .design__photo { order: -1; min-height: 0; aspect-ratio: 4 / 4.2; }
  .design__text { padding: 36px 20px 52px; gap: 22px; }
  .swatches { gap: 10px; }
  .swatches .caps { font-size: 8.5px; letter-spacing: .1em; }
}


/* ---------- phone pass (17 Oct 2026): each landing section about one screen, less text ----------
   Desktop is untouched. .m-only shows only on phones, .m-hide hides on phones. */
.m-only { display: none; }
@media (max-width: 900px) {
  .m-only { display: block; }
  .m-hide { display: none !important; }

  /* section labels: keep the left label, drop the right one (it wrapped to two lines) */
  .area .marker > :last-child, .street .marker > :last-child, .register-band .marker > :last-child { display: none; }

  /* intro: shorter scroll, and the facts line carries the detail */
  .hero--intro { --dwell: .6; height: 225vh; } /* 165vh of animation + a 60vh still stretch: phones get no timed hold (it fought iOS momentum), so the frame stays still for longer instead */
  .hero--intro .hero__sub { display: none; }

  /* the design */
  .design__photo { aspect-ratio: 16 / 10; }
  .design__text { padding: 26px 20px 34px; gap: 16px; }
  .design__eyebrow { margin: 0 0 -8px; }
  .design__actions { gap: 12px 20px; margin-top: 2px; }
  .design__by { gap: 14px; margin: 0; }
  .design__by img { width: 100px; }
  .design__by .caps { letter-spacing: .14em; white-space: nowrap; gap: 8px; }

  /* the area: no sub-paragraph, a 3 x 3 grid of names and times */

  /* the next three: short cards, name and status only */

  /* Alexi: a shorter photo, one-sentence bio, contacts in three short rows */
  .agent__photo { aspect-ratio: 2 / 1; }
  .agent__photo img { object-position: 50% 14%; }
  .agent__actions { flex-wrap: nowrap; gap: 10px; }
  .agent__actions .pill { height: 46px; padding: 0 16px; letter-spacing: .14em; white-space: nowrap; }
  .agent__text { padding: 24px 20px 26px; gap: 14px; }
  .agent__name { font-size: 40px; }
  .ledger { grid-template-columns: 1fr 1fr; grid-template-areas: "phone web" "email email" "office office"; }
  .ledger li, .ledger li:first-child { padding: 11px 20px; font-size: 14px; border-left: 0; border-top: 1px solid var(--line); }
  .ledger li:nth-child(1) { grid-area: phone; }
  .ledger li:nth-child(2) { grid-area: email; }
  .ledger li:nth-child(3) { grid-area: web; border-left: 1px solid var(--line); }
  .ledger li:nth-child(4) { grid-area: office; }

  /* register: shorter heading, no lead, fields in pairs */
  .register-band .register { padding-top: 26px; gap: 22px; }
  .register__title--big, .register__title { font-size: 32px; }
  .register__lead, .register__list { display: none; }
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  .field input, .field select { height: 42px; }
  .field select { font-size: 15px; }

  /* home pages */
  .ledger2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .ledger2__row, .ledger2__row:first-child { padding: 12px 0 10px; gap: 4px; }
  .ledger2__row:first-child, .ledger2__row:nth-child(n+4) { grid-column: 1 / -1; } /* price, then bedrooms | bathrooms, then size, outdoor and parking each on its own line */
  .ledger2 dd { font-size: 19px; }
  .ledger2__row:first-child dd { font-size: 28px; }
  .gallery { grid-auto-rows: 22vw; }
  .gallery__note { top: 14px; left: 14px; padding: 7px 11px; font-size: 9px; }
  .gallery__morebar { padding: 22px 16px 24px; }
  .gallery__nav { top: 64px; padding: 10px 14px; gap: 2px; }
  .gallery__nav a { padding: 8px 12px; letter-spacing: .14em; }
  .gallery__area { scroll-margin-top: 118px; }
  .steps p { display: none; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; margin-top: 24px; }
  .steps li { gap: 6px; padding-top: 12px; }
  .steps__title { font-size: 13px; }
  .finishes { gap: 20px; }
  .finishes__list li { padding: 8px 0; font-size: 13px; }
  .faq__item summary { font-size: 17px; padding: 14px 32px 14px 0; }
}

/* ---------- the area (21 Oct 2026): one place at a time ----------
   A full-height photo bleeding off the left edge crossfades between places; the right side holds the
   line and a quiet list, nearest first. main.js swaps the photo on hover, focus or tap, and cycles
   slowly while the section is in view until someone picks a place. */
.place { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; grid-template-areas: "stage head" "stage body"; min-height: min(calc(100vh - 64px), 900px); min-height: min(calc(100svh - 64px), 900px); }
.place__stage { grid-area: stage; position: relative; overflow: hidden; background: var(--olive); min-height: 560px; }
.place__shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s var(--ease); }
.place__shot.is-on { opacity: 1; }
.place__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 7s var(--ease); }
.place__shot.is-on img { transform: scale(1); }
.place__shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,26,18,0) 50%, rgba(20,26,18,.62) 100%); pointer-events: none; }
.place__shot--olive { background: var(--olive); }
.place__shot--olive::before { content: ""; position: absolute; inset: 14% 22% 26%; background: url("assets/brand/greenvale-symbol-ivory-large.png") center / contain no-repeat; opacity: .07; }
.place__shot figcaption { position: absolute; left: var(--gutter); right: 40px; bottom: 40px; z-index: 1; display: flex; flex-direction: column; gap: 10px; max-width: 520px; color: var(--ivory); }
.place__capname { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 3.4vw, 54px); line-height: 1; }
.place__capline { font-size: 15px; line-height: 1.55; opacity: .92; }
.place__head { grid-area: head; padding: 56px var(--gutter) 24px 56px; }
.place__title { font-size: clamp(44px, 4.8vw, 80px); }
.place__body { grid-area: body; padding: 0 var(--gutter) 40px 56px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 22px; }
.place__list { list-style: none; margin: 0; padding: 0; width: 100%; border-bottom: 1px solid var(--line); }
.place__item { appearance: none; background: none; border: 0; border-top: 1px solid var(--line); width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0 11px; cursor: pointer; color: var(--muted); font: inherit; text-align: left; transition: color .35s var(--ease); }
.place__item:hover, .place__item[aria-pressed="true"] { color: var(--ink); }
.place__item:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; }
.place__name { position: relative; font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 1.65vw, 26px); line-height: 1.15; transition: transform .5s var(--ease); }
.place__name::before { content: ""; position: absolute; left: -16px; top: .52em; width: 6px; height: 6px; border-radius: 50%; background: var(--sea); opacity: 0; transition: opacity .35s var(--ease); }
.place__item[aria-pressed="true"] .place__name { transform: translateX(16px); }
.place__item[aria-pressed="true"] .place__name::before { opacity: 1; }
.place__time { font-size: 10px; letter-spacing: .18em; white-space: nowrap; }
.place__note { margin: 0; max-width: 440px; }

/* ---------- the next three (21 Oct 2026): a pale sage band (Jacob's pick from six); one line, one button, three doors inset ---------- */
.street { background: var(--pale); color: var(--ink); padding: 72px var(--gutter) var(--gutter); }
.street__head { padding: 0 0 36px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.street__head .display { color: var(--ink); }
.street__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.door { position: relative; height: 58vh; min-height: 420px; max-height: 640px; overflow: hidden; background: #000; color: var(--ivory); }
.door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.86); transition: transform 1.4s var(--ease), filter .8s var(--ease); }
.door::after { content: ""; position: absolute; inset: 0; background-color: rgba(20,26,18,0); background-image: linear-gradient(180deg, rgba(20,26,18,.34) 0%, rgba(20,26,18,0) 20%, rgba(20,26,18,0) 50%, rgba(20,26,18,.72) 100%); pointer-events: none; transition: background-color .6s var(--ease); }
.door--later img { filter: grayscale(.75) brightness(.72); }
.door__status { position: absolute; top: 26px; left: 28px; z-index: 2; font-size: 10px; }
/* the name row is a button; the facts sit under it in a row that grows from 0fr to 1fr when the card opens */
.door__body { position: absolute; left: 28px; right: 28px; bottom: 24px; z-index: 2; display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows .6s var(--ease); }
.door__btn { appearance: none; background: none; border: 0; padding: 0; margin: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.door__btn:focus-visible { outline: 2px solid var(--ivory); outline-offset: 6px; }
.door__name { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 3.6vw, 58px); line-height: 1; }
.door__plus { flex: none; position: relative; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(244, 240, 232, .55); transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .5s var(--ease); }
.door__plus::before, .door__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.door__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.door__info { min-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .6s; }
.door__inner { padding-top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.door__facts { margin: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; padding-top: 16px; border-top: 1px solid rgba(244, 240, 232, .35); }
.door__facts dt { font-size: 9px; letter-spacing: .2em; opacity: .8; }
.door__facts dd { margin: 3px 0 0; font-size: 14px; line-height: 1.35; }
.door__price { margin: 0; display: flex; flex-direction: column; gap: 5px; font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1; }
.door__price .caps { font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: .2em; opacity: .8; }
.door__reg { font-size: 10px; color: var(--ivory); }
.door__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; } /* register, and the home's floor-plan PDF (24 Oct 2026) */
.arrow--down { transform: rotate(90deg); }
.lnk:hover .arrow--down { transform: rotate(90deg) translateX(3px); }
/* open: on hover where the device can hover, or when the name is tapped or clicked (.is-open from main.js) */
.door.is-open .door__body { grid-template-rows: auto 1fr; }
.door.is-open .door__info { opacity: 1; visibility: visible; transition: opacity .5s var(--ease) .12s, visibility 0s; }
.door.is-open::after { background-color: rgba(20,26,18,.52); }
.door.is-open img { transform: scale(1.04); }
.door.is-open .door__plus { background: var(--ivory); color: var(--olive); box-shadow: none; transform: rotate(45deg); }
@media (hover: hover) {
  .door:hover .door__body { grid-template-rows: auto 1fr; }
  .door:hover .door__info { opacity: 1; visibility: visible; transition: opacity .5s var(--ease) .12s, visibility 0s; }
  .door:hover::after { background-color: rgba(20,26,18,.52); }
  .door:hover img { transform: scale(1.04); }
  .door:hover .door__plus { background: var(--ivory); color: var(--olive); box-shadow: none; }
}

@media (max-width: 900px) {
  /* the area: line, photo, then the places in two columns */
  .place { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "head" "stage" "body"; min-height: 0; }
  .place__head { padding: 24px 20px 16px; }
  .place__title { font-size: 34px; }
  .place__stage { min-height: 0; aspect-ratio: 3 / 2; }
  .place__shot figcaption { left: 16px; right: 16px; bottom: 14px; gap: 4px; }
  .place__capname { font-size: 24px; }
  .place__capline { display: none; }
  .place__body { padding: 10px 20px 22px; gap: 14px; }
  .place__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; border-bottom: 0; }
  .place__item { flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 0 8px; }
  .place__name { font-size: 16px; }
  .place__item[aria-pressed="true"] .place__name { transform: none; }
  .place__name::before { display: none; }
  .place__item[aria-pressed="true"] .place__time { color: var(--sea-deep); }
  .place__time { font-size: 8.5px; letter-spacing: .12em; }
  .place__note { font-size: 10.5px; }

  /* the next three: short cards, name left, status right */
  .street { padding: 32px 16px 16px; }
  .street__head { padding: 0 4px 20px; gap: 14px; flex-direction: column; align-items: flex-start; }
  .street__head .display--sm { font-size: 32px; }
  .street__row { grid-template-columns: 1fr; gap: 8px; }
  .door { height: auto; min-height: 30vw; max-height: none; display: flex; align-items: flex-end; }
  .door::after { background-image: linear-gradient(90deg, rgba(20,26,18,.62) 0%, rgba(20,26,18,.2) 60%, rgba(20,26,18,.45) 100%); }
  .door__status { top: 16px; left: auto; right: 18px; font-size: 9px; }
  .door__body { position: relative; left: auto; right: auto; bottom: auto; width: 100%; padding: 42px 18px 14px; }
  .door__name { font-size: 30px; }
  .door__plus { width: 34px; height: 34px; }
  .door__plus::before, .door__plus::after { width: 12px; }
  .door__inner { padding-top: 14px; gap: 12px; }
  .door__facts { gap: 10px 18px; padding-top: 12px; }
  .door__facts dd { font-size: 13px; }
  .door__price { font-size: 24px; }
}

/* ---------- home pages: Live. Cook. Rest. Play. (21 Oct 2026) ----------
   One chapter per idea: a big word, a label and one line on one side; a main photo bleeding to the screen edge on the
   other, with a second photo layered over its inner corner. Chapters alternate sides. */
.chapters { background: var(--ivory); padding: 24px 0 72px; overflow: hidden; }
.chapter { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: min(80vh, 780px) auto; grid-template-areas: "text media" "row row"; padding: 56px 0; }
.chapter--b { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-areas: "media text" "row row"; }
/* more photos of the room: a justified row edge to edge, every photo at its own shape, one height */
.chapter__row { grid-area: row; display: flex; gap: 6px; margin-top: 96px; }
.chapter__row figure { margin: 0; flex: var(--a) 1 0; aspect-ratio: var(--a); overflow: hidden; background: var(--sage-light); }
.chapter__row img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chapter__text { grid-area: text; align-self: start; padding: 6vh 56px 0 var(--gutter); }
.chapter--b .chapter__text { padding: 6vh var(--gutter) 0 56px; }
.chapter__word { font-family: var(--serif); font-weight: 500; font-size: clamp(76px, 9vw, 150px); line-height: .88; letter-spacing: -.02em; margin: 0; }
.chapter__label { margin: 22px 0 0; font-size: 10px; }
.chapter__line { margin: 14px 0 0; max-width: 30ch; font-size: 16px; line-height: 1.6; color: var(--muted); }
.chapter__note { margin: 14px 0 0; max-width: 30ch; }
.chapter__media { grid-area: media; position: relative; min-height: 520px; height: 100%; }
.chapter__main { position: absolute; inset: 0; margin: 0; overflow: hidden; background: var(--sage-light); }
.chapter__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chapter__second { position: absolute; z-index: 2; bottom: -40px; width: 27%; aspect-ratio: 2 / 3; margin: 0; overflow: hidden; background: var(--sage-light); box-shadow: 0 0 0 10px var(--ivory); }
.chapter--a .chapter__second { left: -8%; }
.chapter--b .chapter__second { right: -8%; }
/* the cabinet fade is the point of Cook, so it sits larger and a little further out of the text */
.chapter__second--large { width: 36%; }
.chapter--a .chapter__second--large { left: -4%; }
.chapter--b .chapter__second--large { right: -4%; }
.fade[data-fade="loop"] > .fade__top { transition: opacity 1.6s var(--ease); }
@media (min-width: 901px) and (max-height: 760px) { .chapter__second { width: 21%; bottom: -24px; } .chapter__second--large { width: 27%; } }
.chapter__second > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* crossfades driven by scroll: home.js sets --p from 0 to 1 on every [data-fade] */
.fade > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fade > .fade__top { opacity: var(--p, 0); }
.fade__lab { grid-area: 1 / 1; transition: none; }
/* the labels swap quickly around the middle of the fade so they never sit on top of each other */
.fade__lab--a { opacity: calc((.5 - var(--p, 0)) * 5); }
.fade__lab--b { opacity: calc((var(--p, 0) - .5) * 5); }

/* outside: pinned full screen while the section scrolls past, today crossfading to the planned landscaping */
.outside { position: relative; height: 210vh; background: #000; }
.outside__frame { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.outside__frame > img { object-position: 60% 88%; } /* keep the ground in frame: the planting is along the bottom */
.outside__frame::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,26,18,0) 55%, rgba(20,26,18,.58) 100%); pointer-events: none; }
.outside__cap { position: absolute; left: var(--gutter); bottom: 48px; z-index: 2; color: var(--ivory); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.outside__state { display: inline-grid; margin: 0; padding: 10px 16px; border-radius: 999px; background: rgba(28, 31, 25, .5); font-size: 10px; }

@media (max-width: 900px) {
  .chapters { padding: 8px 0 40px; }
  .chapter, .chapter--b { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "text" "media" "row"; min-height: 0; padding: 28px 0 44px; }
  .chapter__row { margin-top: 48px; gap: 4px; }
  .chapter__row figure:nth-child(n+3) { display: none; }
  .chapter__second--large { width: 46%; }
  .chapter__text, .chapter--b .chapter__text { padding: 0 20px 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .chapter__word { font-size: 56px; }
  .chapter__label { margin: 0; }
  .chapter__line, .chapter__note { display: none; }
  .chapter__media { min-height: 0; height: auto; aspect-ratio: 4 / 3; margin-right: 40px; }
  .chapter--b .chapter__media { margin: 0 0 0 40px; }
  .chapter__second { width: 38%; bottom: -30px; box-shadow: 0 0 0 6px var(--ivory); }
  .chapter--a .chapter__second { left: auto; right: -30px; }
  .chapter--b .chapter__second { right: auto; left: -30px; }
  .chapter--single .chapter__media { margin: 0; }
  .outside { height: 190vh; }
  /* the phone sticky bar (about 72px) covers the bottom of the screen; stop the frame above it so the planting and the label stay visible */
  .outside__frame { height: calc(100vh - 72px); height: calc(100lvh - 72px); } /* lvh for the same reason as the landing stage */
  .outside__frame > img { object-position: 78% 50%; }
  .outside__cap { left: 20px; right: 20px; bottom: 28px; bottom: calc(28px + 100lvh - 100svh); gap: 12px; }
  .outside__state { font-size: 9px; padding: 8px 12px; }
}

/* ---------- top bar links (21 Oct 2026): links instead of the hamburger on wide screens ---------- */
.topnav { display: flex; align-items: center; gap: 26px; margin-right: 22px; }
.topnav a { position: relative; color: inherit; text-decoration: none; font-family: var(--sans); text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 600; white-space: nowrap; padding: 6px 0; }
.topnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.topnav a:hover::after, .topnav a:focus-visible::after { transform: scaleX(1); }
.topbar__register { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1299px) { .topnav { gap: 18px; margin-right: 14px; } .topnav a { letter-spacing: .16em; } }
@media (min-width: 1100px) { #menuBtn { display: none; } }
@media (max-width: 1099px) { .topnav { display: none; } }

/* ---------- intro, the Home 1 frame (21 Oct 2026, after Jacob's mock) ----------
   One stack at the bottom left: pill, "Home 1 at Greenvale", the place large, one line of description, the facts, then
   View Home 1 and a serif text link. */
.hero--intro .hero__content, .hero--frame .hero__content { max-width: none; margin: 0; padding: 0 clamp(24px, 4.7vw, 96px) clamp(40px, 5.5vh, 72px); gap: 0; }
.intro__eyebrow { margin: 26px 0 0; font-size: 11px; letter-spacing: .32em; color: var(--ivory); }
.hero--intro .intro__title, .hero--frame .intro__title { margin: 18px 0 0; font-size: clamp(64px, min(9vw, 15.5vh), 168px); line-height: .9; letter-spacing: -.015em; color: var(--ivory); }
.intro__desc { margin: 30px 0 0; max-width: 34em; font-size: clamp(16px, 1.15vw, 20px); line-height: 1.5; color: rgba(244, 240, 232, .9); }
.hero--intro .intro__facts, .hero--frame .intro__facts { margin: 24px 0 0; font-size: 11px; letter-spacing: .3em; line-height: 2.1; color: rgba(244, 240, 232, .82); opacity: 1; }
.intro__btns { margin-top: 30px; align-items: center; gap: 32px; }
.intro__more { display: inline-flex; align-items: center; gap: 10px; color: var(--ivory); text-decoration: none; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 1.6vw, 28px); }
.intro__more .arrow { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.intro__more:hover .arrow { transform: translateX(4px); }
@media (min-width: 901px) and (max-height: 760px) {
  .intro__eyebrow { margin-top: 18px; }
  .hero--intro .intro__title, .hero--frame .intro__title { margin-top: 12px; }
  .intro__desc { margin-top: 20px; }
  .hero--intro .intro__facts, .hero--frame .intro__facts { margin-top: 16px; line-height: 1.9; }
  .intro__btns { margin-top: 20px; }
}
@media (max-width: 900px) {
  .hero--intro .hero__content, .hero--frame .hero__content { padding: 0 20px 36px; }
  .hero--intro .hero__content { padding-bottom: calc(36px + 100lvh - 100svh); } /* the stage is the full (toolbar-collapsed) height; keep the buttons above Safari's toolbar when it is showing */
  .intro__eyebrow { margin-top: 18px; font-size: 10px; letter-spacing: .26em; }
  .hero--intro .intro__title, .hero--frame .intro__title { margin-top: 12px; font-size: clamp(52px, 15vw, 80px); }
  .intro__desc { margin-top: 18px; font-size: 15px; }
  .hero--intro .intro__facts, .hero--frame .intro__facts { margin-top: 16px; font-size: 10px; letter-spacing: .2em; line-height: 1.9; }
  .intro__btns { margin-top: 22px; gap: 18px; flex-wrap: nowrap; }
  .intro__btns .pill { padding: 0 22px; white-space: nowrap; }
  .intro__more { font-size: 21px; white-space: nowrap; }
}

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__scrollline::after { transform: none; opacity: .8; }
  .parallax { transform: none; }
  .hero--intro { height: auto; min-height: 100vh; }
  .intro__stage { position: relative; }
  .js .intro__logo { display: none; }
  .js .intro__content { opacity: 1; transform: none; }
  .js .topbar--intro .brand { opacity: 1; }
  .js .topbar--quiet .topbar__left, .js .topbar--quiet .topbar__right { opacity: 1; transform: none; pointer-events: auto; }
  .js .intro__img2, .js .intro__shade2 { opacity: 1; }
  .fade { --p: 1; }
  .outside { height: auto; }
  .outside__frame { position: relative; }
}

/* ---------- rooms (Live, Cook, Rest, Play): option A, the pinned caption, picked by Jacob on 23 Oct 2026 ---------- */
/* A: pinned caption. The word stays put on the left while the room's photos scroll past; a large photo, then squares. */
.chapters--pinned { padding: 24px 0 96px; overflow: visible; } /* .chapters clips its overflow, which would stop the caption sticking */
.pin { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 64px; max-width: 1480px; margin: 0 auto; padding: 88px var(--gutter); border-top: 1px solid var(--line); }
.pin:first-child { border-top: 0; }
.pin__sticky { position: sticky; top: 120px; }
.pin__media { display: flex; flex-direction: column; gap: 10px; }
.pin__main { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sage-light); }
.pin__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pin__tile { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--sage-light); }
.pin__main img, .pin__tile > img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .chapters--pinned { padding: 0 0 40px; }
  .pin { grid-template-columns: 1fr; padding: 0 0 36px; border-top: 0; }
  .pin__text { position: sticky; top: 64px; z-index: 3; background: var(--ivory); padding: 14px 20px 12px; }
  .pin__sticky { position: static; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .pin .chapter__word { font-size: 46px; }
  .pin__media, .pin__grid { gap: 4px; }
}

/* ---------- home pages' hero (23 Oct 2026): the landing page's Home 1 frame, so "View Home 1" lands on what it showed ---------- */
.hero--frame { align-items: flex-end; }
.hero--frame .hero__img { object-position: 45% 55%; filter: none; }
.hero--frame .hero__shade { background: radial-gradient(140% 120% at 0% 100%, rgba(31, 36, 26, .95) 0%, rgba(31, 36, 26, .86) 30%, rgba(31, 36, 26, .52) 50%, rgba(31, 36, 26, .16) 66%, rgba(31, 36, 26, 0) 78%), linear-gradient(90deg, rgba(31, 36, 26, .5) 0%, rgba(31, 36, 26, .22) 32%, rgba(31, 36, 26, 0) 52%), linear-gradient(180deg, rgba(31, 36, 26, .42) 0%, rgba(31, 36, 26, 0) 15%); }
.hero__foot--end { justify-content: flex-end; }
@media (max-width: 900px) { .hero--frame .hero__img { object-position: var(--pos-phone, 42% 50%); } .hero--frame .intro__btns { flex-wrap: wrap; gap: 16px 22px; } } /* "Enquire about Home 1" is longer than the landing's "View Home 1", so the film link may drop to its own line */

/* ---------- landing intro on touch screens (23 Oct 2026): a timed transition instead of a scroll-scrubbed one ----------
   main.js adds .intro--touch on a coarse pointer and .intro--played once the visitor starts to scroll. Transforms and
   opacity only, so Safari runs it on the compositor; on the way back up it plays in reverse, a little faster. */
.intro--touch .intro__logo { position: fixed; transition: transform .8s cubic-bezier(.65, 0, .35, 1); } /* fixed: a fast swipe can't carry it off the screen with the stage */
.intro--touch.intro--played .intro__logo { transform: translate(calc(-50% + var(--lx, 0px)), calc(-50% + var(--ly, 0px))) scale(var(--ls, 1)); transition: transform 1.2s cubic-bezier(.65, 0, .35, 1); }
.intro--touch .intro__img2, .intro--touch .intro__shade2 { transition: opacity .6s ease-in-out; }
.intro--touch.intro--played .intro__img2, .intro--touch.intro--played .intro__shade2 { opacity: 1; transition: opacity 1s ease-in-out .25s; }
.js .intro--touch .intro__content { transition: opacity .3s ease-out, transform .3s ease-out; }
.js .intro--touch.intro--played .intro__content { opacity: 1; transform: none; transition: opacity .8s var(--ease) .65s, transform 1s var(--ease) .65s; }
.intro--instant .intro__logo, .intro--instant .intro__img2, .intro--instant .intro__shade2, .js .intro--instant .intro__content { transition: none !important; }
/* tap to enter (touch screens): the button under the logo, and the page held still until then */
.intro__enter { display: none; }
.intro--touch .intro__enter { display: inline-flex; align-items: center; justify-content: center; position: absolute; left: 50%; top: calc(50% + max(64px, 8vw)); z-index: 3; transform: translateX(-50%); height: 44px; padding: 0 28px; border: 1px solid rgba(220, 222, 209, .55); border-radius: 999px; background: rgba(20, 26, 18, .2); color: var(--pale); font-family: var(--sans); font-size: 11px; letter-spacing: .32em; cursor: pointer; animation: logoIn 1.4s var(--ease) .9s both; }
.intro--touch.intro--played .intro__enter { pointer-events: none; animation: enterOut .35s ease-out forwards; } /* an animation, because the fade-in's fill would otherwise hold it at full opacity */
@keyframes enterOut { to { opacity: 0; visibility: hidden; } }
html.intro-locked { overflow: hidden; }
@media (pointer: coarse) {
  /* one screen: the forest until Enter, then the Home 1 frame. As tall as the whole screen (--cover, main.js), because
     iOS 26 Safari draws the page under its floating toolbar, below 100lvh; and not sticky, because Safari paints a strip
     of a pinned element's background colour (here the black hero) under that toolbar (Jacob's iPhone, 24 Oct 2026). */
  .hero--intro { height: 100vh; height: 100lvh; height: max(100lvh, var(--cover, 0px)); }
  .intro__stage { position: relative; height: max(100lvh, var(--cover, 0px)); }
  .hero--intro .hero__content { padding-bottom: calc(36px + max(100lvh, var(--cover, 0px)) - var(--vis, 100svh)); } /* the stack sits 36 px above the bottom of what is visible (--vis) */
  /* no frosted glass over the fading photos: Safari redraws a backdrop blur on every frame of the fade */
  .topbar--intro:not(.topbar--solid) .pill--glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(28, 31, 25, .32); }
  .intro__pill { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- floor plans (24 Oct 2026): Proper Measure's sheets, one floor at a time ----------
   Desktop: the heading, the floor tabs and the download on the left, the drawing on a white sheet on the right.
   Phones: heading, tabs, drawing, download, so a tab change shows right under the tabs. */
.plans { background: #fff; padding: 104px 0; } /* white, the same as the drawings, so they sit on the page with no box around them (Jacob, 24 Oct 2026) */
.plans__grid { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; grid-template-areas: "head panels" "tabs panels" "foot panels"; gap: 0 72px; }
.plans__head { grid-area: head; }
.plans__head .statement__text { margin-top: 14px; }
.plans__areas { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 18px 36px; }
.plans__areas dt { font-size: 9px; letter-spacing: .2em; color: var(--muted); }
.plans__areas dd { margin: 8px 0 0; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1; color: var(--ink); }
.plans__areas dd span { font-family: var(--sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.plans__tabs { grid-area: tabs; margin-top: 40px; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.plans__tab { appearance: none; background: none; border: 0; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 0 14px; font: inherit; color: var(--muted); cursor: pointer; text-align: left; transition: color .35s var(--ease); }
.plans__tab:hover, .plans__tab[aria-selected="true"] { color: var(--ink); }
.plans__tab:focus-visible { outline: 2px solid var(--sea); outline-offset: 3px; }
.plans__tabname { position: relative; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.1; transition: transform .5s var(--ease); }
.plans__tabname::before { content: ""; position: absolute; left: -16px; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--sea); opacity: 0; transition: opacity .35s var(--ease); }
.plans__tab[aria-selected="true"] .plans__tabname { transform: translateX(16px); }
.plans__tab[aria-selected="true"] .plans__tabname::before { opacity: 1; }
.plans__tabmeta { font-size: 10px; letter-spacing: .16em; white-space: nowrap; }
.plans__panels { grid-area: panels; }
.plans__panel { margin: 0; }
.plans__panel[hidden] { display: none; }
.plans__sheet { display: flex; justify-content: center; cursor: zoom-in; }
.plans__sheet img { display: block; width: auto; max-width: 100%; height: min(70vh, 720px); object-fit: contain; }
.plans__panel figcaption { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.plans__foot { grid-area: foot; margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.plans__fine { margin: 0; max-width: 420px; }
@media (max-width: 900px) {
  .plans { padding: 48px 0 52px; }
  .plans__grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "head" "tabs" "panels" "foot"; padding: 0 20px; }
  .plans__areas { margin-top: 20px; gap: 12px 24px; }
  .plans__areas dd { font-size: 21px; }
  .plans__tabs { margin: 24px 0 18px; }
  .plans__tab { padding: 11px 0 10px; }
  .plans__tabname { font-size: 20px; }
  .plans__tab[aria-selected="true"] .plans__tabname { transform: translateX(14px); }
  .plans__sheet img { height: min(64vh, 560px); }
  .plans__panel figcaption { font-size: 13px; }
  .plans__foot { margin-top: 22px; }
}

/* Netlify Forms spam trap (25 Oct 2026): off screen, never focused; a bot that fills it is dropped */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }

/* ---------- privacy page (25 Oct 2026): one readable column, the brand at the top ---------- */
.page-legal { background: var(--ivory); }
.legal__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px var(--gutter); border-bottom: 1px solid var(--line); color: var(--olive); }
.legal__brand { color: inherit; text-decoration: none; }
.legal__brand .wm { font-size: 24px; }
.legal__back { font-size: 10px; color: var(--olive); }
.legal { max-width: 720px; margin: 0 auto; padding: 72px var(--gutter) 88px; color: var(--ink); }
.legal__title { margin: 14px 0 0; font-family: var(--serif); font-weight: 500; font-size: clamp(42px, 5vw, 64px); line-height: 1; color: var(--olive); }
.legal__lead { margin: 22px 0 0; font-size: 18px; line-height: 1.6; color: var(--muted); }
.legal h2 { margin: 48px 0 0; font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--olive); }
.legal p, .legal li { font-size: 15px; line-height: 1.75; }
.legal p { margin: 12px 0 0; }
.legal ul { margin: 12px 0 0; padding-left: 20px; }
.legal li + li { margin-top: 8px; }
.legal a { color: var(--olive); text-underline-offset: 3px; }
.legal__contact { margin: 12px 0 0; font-style: normal; font-size: 15px; line-height: 1.75; }
.legal__date { margin-top: 28px !important; }
.legal__foot { border-top: 1px solid var(--line); padding: 24px var(--gutter) 32px; }
.legal__foot .fine { max-width: 720px; margin: 0 auto; }
@media (max-width: 900px) {
  .legal__bar { padding: 16px 20px; }
  .legal__brand .wm { font-size: 21px; }
  .legal { padding: 44px 20px 60px; }
  .legal h2 { margin-top: 36px; font-size: 23px; }
  .legal__lead { font-size: 16px; }
}