/* ===========================================================
   Grand Home Builders — Editorial Luxury · inner pages
   page hero · values · team · contact · projects · detail · community
   Depends on home.css + home-sections.css (tokens, nav, footer, motion)
   =========================================================== */

/* ---------- PAGE HERO ---------- */
.phero {
   position: relative; min-height: 60vh; display: flex; align-items: flex-end;
   color: #fff; overflow: hidden; padding: 9rem 0 clamp(2.5rem, 2rem + 3vw, 5rem);
}
.phero__media { position: absolute; inset: -8% 0 0; z-index: -2; }
.phero__media img { width: 100%; height: 116%; object-fit: cover; animation: heroZoom 18s ease-out forwards; }
.phero__scrim {
   position: absolute; inset: 0; z-index: -1;
   background: linear-gradient(10deg, rgba(18,12,7,.84) 4%, rgba(18,12,7,.3) 48%, rgba(18,12,7,.15) 100%);
}
.crumb { display: flex; align-items: center; gap: .55rem; font-size: .82rem; letter-spacing: .04em; color: var(--tone-accent); margin-bottom: 1.4rem; }
.crumb a { opacity: .85; } .crumb a:hover { opacity: 1; text-decoration: underline; }
.crumb i { font-size: .7rem; opacity: .6; }
.phero__title { font-family: var(--serif); font-weight: 500; font-size: var(--display-lg); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.phero__title em { font-style: italic; color: var(--tone-accent); }
.phero__lede { max-width: 50ch; margin-top: 1.4rem; font-size: var(--text-lede); color: rgba(255,255,255,.86); }

/* ---------- COMMUNITY full-screen photo-slider hero ---------- */
.chero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; overflow: hidden; padding-bottom: clamp(3rem, 2rem + 5vw, 6rem); }
.chero__slider { position: absolute; inset: 0; z-index: 0; }
.chero__slider.swiper, .chero__slider .swiper-wrapper, .chero__slider .swiper-slide { height: 100%; }
.chero__slider .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.chero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(18,12,7,.5) 0%, rgba(18,12,7,0) 26%), linear-gradient(8deg, rgba(18,12,7,.86) 6%, rgba(18,12,7,.34) 46%, rgba(18,12,7,0) 74%); }
.chero__content { position: relative; z-index: 2; }
.chero__content .crumb { margin-bottom: 1.4rem; }
.chero__title { font-family: var(--serif); font-weight: 500; font-size: var(--display-lg); line-height: 1.04; letter-spacing: -.02em; margin: .4rem 0 0; text-wrap: balance; }
.chero__title em { font-style: italic; color: var(--tone-accent); }
.chero__lede { max-width: 48ch; margin-top: 1.4rem; font-size: var(--text-lede); color: rgba(255,255,255,.88); }
.chero__tags { margin: 1.8rem 0 2rem; }
.chero__tags > span { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); color: #fff; backdrop-filter: blur(4px); cursor: pointer; outline: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.chero__tags > span:hover, .chero__tags > span:focus-visible { transform: translateY(-2px); border-color: #fff; }
.chero__tags > span.is-active { background: #fff; color: var(--ink); border-color: #fff; }
/* hero laid out like show-home: lead + slide-detail card (.chero__panel reuses .shov__config chrome) */
.chero__grid { display: grid; grid-template-columns: 1fr minmax(290px, 380px); column-gap: clamp(1.8rem, 3vw, 3.5rem); row-gap: 1.4rem; align-content: end; align-items: end; grid-template-areas: "lead panel" "ctas panel"; }
.chero__lead { grid-area: lead; }
.chero__grid .chero__panel { grid-area: panel; align-self: end; }
.chero__ctas { grid-area: ctas; }
.chero__panel-eyebrow { font-size: .72rem; letter-spacing: .14em; font-weight: 700; color: var(--tone-accent); margin: 0 0 .55rem; }
.chero__panel-sep { opacity: .5; margin: 0 .4rem; }
.chero__panel-title { font-family: var(--serif); font-weight: 600; color: var(--tone-fg); font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); line-height: 1.1; margin: 0 0 .55rem; }
.chero__panel-text { color: var(--tone-soft); font-size: .9rem; line-height: 1.5; margin: 0 0 1rem; }
.chero__panel-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.chero__panel-feats li { position: relative; padding-left: 1.6rem; font-size: .85rem; color: var(--tone-fg); }
.chero__panel-feats li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--tone-accent); font-weight: 700; }
.chero__panel-nav { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.chero__panel-nav .chero__prev, .chero__panel-nav .chero__next { position: static; transform: none; display: grid; width: 40px; height: 40px; border-color: var(--line); color: var(--ink); background: var(--paper); backdrop-filter: none; }
.chero__panel-nav .chero__prev:hover, .chero__panel-nav .chero__next:hover { background: var(--cream); }
.chero__panel-nav .chero__dots { position: static; left: auto; bottom: auto; transform: none; flex: 1; justify-content: center; }
.chero__panel-nav .chero__dots .swiper-pagination-bullet { background: rgba(0,0,0,.22); }
.chero__panel-nav .chero__dots .swiper-pagination-bullet-active { background: var(--gold-deep); }
/* stacked hero fills the viewport, so its top must clear the fixed 102px nav (else crumb+eyebrow slide under the logo) */
@media (max-width: 900px) { .chero { padding-top: clamp(7.5rem, 6rem + 6vw, 9rem); } .chero__grid { grid-template-columns: 1fr; grid-template-areas: "lead" "panel" "ctas"; align-content: start; } .chero__grid .chero__panel { max-width: 460px; } }
.chero__ctrl { position: static; }
.chero__prev, .chero__next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); color: #fff; display: grid; place-items: center; background: rgba(255,255,255,.12); backdrop-filter: blur(6px); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.chero__prev { left: clamp(14px, 2.5vw, 34px); }
.chero__next { right: clamp(14px, 2.5vw, 34px); }
.chero__prev:hover, .chero__next:hover { background: rgba(255,255,255,.28); }
.chero__dots { position: absolute; left: 50%; bottom: clamp(1.4rem, 1rem + 1.5vw, 2.4rem); transform: translateX(-50%); z-index: 3; display: flex; gap: .5rem; }
.chero__dots .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); opacity: 1; transition: width var(--dur) var(--ease), background var(--dur) var(--ease); }
.chero__dots .swiper-pagination-bullet-active { width: 26px; border-radius: 100px; background: #fff; }
@media (max-width: 600px) { .chero__prev, .chero__next { display: none; } }

/* ---------- COMMUNITY INTRO — logo tile + written introduction, under the hero ----------
   Deliberately asymmetric: the community's .clogo tile (the same card the /communities
   grid uses) against a wide prose column, separated by a hairline that carries a short
   gold segment at its head. The tile sticks while the prose scrolls past it (long
   introductions keep the mark in view); the first paragraph is set at lede size as the
   lead-in, the rest settle back to body. */
.cintro { background: var(--surface); }
.cintro__grid { display: grid; grid-template-columns: minmax(150px, 240px) 1fr; column-gap: clamp(2rem, 1rem + 4vw, 5.5rem); align-items: start; }
/* The mark reuses .clogo — the same white 5:3 tile the /communities cards use — so a
   community's logo looks identical wherever it appears. Everything below is only what
   differs from that tile here. */
.cintro__mark { margin: 0; position: sticky; top: calc(102px + 1.6rem); }
/* .clogo greys its logos back so a grid of them reads as one texture; this is the page's
   own community, one mark on its own, so it shows in full colour. */
.cintro__mark img { filter: none; opacity: 1; }
/* .clogo lifts and gilds on hover because there it is a link to that community. Here the
   figure is not clickable, so that hover would promise a click that does nothing —
   pointer-events drops it without restating .clogo's resting values, which would drift. */
.cintro__mark { pointer-events: none; }
.cintro__copy { position: relative; max-width: 74ch; padding-left: clamp(1.6rem, 1rem + 2vw, 3rem); border-left: 1px solid var(--line); }
.cintro__copy::before { content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: clamp(48px, 6vw, 84px); background: var(--gold-deep); }
/* no logo picked → the prose stands alone, centred, with no rule to hang off */
.cintro__grid--solo { grid-template-columns: 1fr; }
.cintro__grid--solo .cintro__copy { max-width: 70ch; margin-inline: auto; padding-left: 0; border-left: 0; }
.cintro__grid--solo .cintro__copy::before { display: none; }

.cintro__copy > p { color: var(--tone-soft); line-height: 1.85; }
.cintro__copy > p + p { margin-top: 1.25em; }
.cintro__copy > p:first-child { font-size: var(--text-lede); line-height: 1.7; color: var(--tone-fg); }
.cintro__copy :is(h2, h3, h4) { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 1.7em 0 .5em; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.cintro__copy :is(ul, ol) { margin: 1.1em 0; color: var(--tone-soft); }
.cintro__copy blockquote { margin: 1.5em 0; padding-left: 1.2em; border-left: 2px solid var(--gold-tint); font-family: var(--serif); font-style: italic; font-size: var(--text-lede); color: var(--tone-fg); }
.cintro__copy a { color: var(--tone-accent); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; transition: color var(--dur) var(--ease); }
.cintro__copy a:hover { color: var(--tone-fg); }
.cintro__copy a:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 3px; }

/* on ink the rules need light-on-dark equivalents (the text itself is flipped globally by
   section[data-bg="ink"] in home-sections.css). The .clogo tile needs nothing — it is
   already a white card and reads on a dark section as-is. */
.cintro[data-bg="ink"] .cintro__copy { border-left-color: rgba(255, 255, 255, .16); }
.cintro[data-bg="ink"] .cintro__copy::before { background: var(--gold-tint); }
.cintro[data-bg="ink"] .cintro__copy a { color: var(--tone-accent); }
.cintro[data-bg="ink"] .cintro__copy a:hover { color: #fff; }
.cintro[data-bg="ink"] .cintro__copy blockquote { border-left-color: var(--gold); }

@media (max-width: 900px) {
   .cintro__grid { grid-template-columns: 1fr; row-gap: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); }
   /* one column: the tile stays compact and centred over the prose. Needs an explicit
      width — justify-self:center makes it shrink-to-fit, and .clogo's aspect-ratio has
      no width of its own to work from. */
   .cintro__mark { position: static; justify-self: center; width: min(240px, 62vw); }
   /* the rule rotates with the layout: the vertical spine becomes a top hairline */
   .cintro__copy { max-width: none; padding-left: 0; padding-top: clamp(1.4rem, 1rem + 2vw, 2rem); border-left: 0; border-top: 1px solid var(--line); }
   .cintro__copy::before { left: 0; top: -1px; width: clamp(48px, 18vw, 84px); height: 1px; }
   .cintro[data-bg="ink"] .cintro__copy { border-top-color: rgba(255, 255, 255, .16); }
}

/* ---------- VALUES (vision / mission / standard) ---------- */
/* 25rem is the width a card already had at three-up in the widest shell, so
   three cards look exactly as before. The cap is what stops two cards from
   stretching to half the shell each; auto-fit drops the empty track and
   justify-content centres the pair. */
.values__grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 25rem));
   gap: 2rem 1.4rem; justify-content: center;
}
.value {
   position: relative; /* anchors the badge overhanging the top-right corner */
   background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
   padding: 2.2rem 2rem; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.value:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.value__ico {
   position: absolute; top: -18px; right: -10px;
   width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
   background: var(--gold-deep); color: #fff; font-size: 1.4rem;
   box-shadow: 0 10px 22px -8px rgba(40, 28, 12, .55);
}
/* padding-right keeps the heading clear of the badge; a card with no icon has no
   badge, so it reclaims the space */
.value h3 { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; margin-bottom: .7rem; padding-right: 3rem; }
.value:not(:has(.value__ico)) h3 { padding-right: 0; }
.value p { color: var(--tone-soft); }

/* ---------- TEAM ---------- */
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.member__photo { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 3.6; background: var(--cream); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.member:hover .member__photo img { transform: scale(1.05); }
.member h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; margin: 1.1rem 0 .2rem; }
.member span { color: var(--tone-accent); font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- TEAM PAGE · departments of round-photo members (greyscale → colour on hover) ---------- */
.tgroup { margin-top: clamp(2.6rem, 5vw, 4.5rem); }
.tgroup__head { display: flex; align-items: baseline; gap: clamp(.9rem, 2vw, 1.4rem); margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.tgroup__title { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; line-height: 1.1; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem); }
.tgroup__rule { flex: 1; height: 1px; background: var(--line); }
.tgroup__count { color: var(--tone-muted); font-size: .78rem; letter-spacing: .1em; white-space: nowrap; }
/* Flex, not grid: full rows fill the track exactly (so justify-content:center is
   a no-op there), while a short last row centres itself — a 5th member lands
   centred under a row of 4. The 0.02px trim absorbs sub-pixel rounding that
   would otherwise wrap the 4th card onto its own line. */
.tmembers {
   --tm-cols: 4;
   --tm-gap: clamp(1rem, 1.8vw, 1.6rem);
   --tm-peek: 30%; /* how much photo stays visible above the open hover panel */
   display: flex; flex-wrap: wrap; justify-content: center;
   gap: clamp(1.6rem, 2.6vw, 2.4rem) var(--tm-gap);
}
.tmember {
   flex: 0 0 calc((100% - (var(--tm-cols) - 1) * var(--tm-gap)) / var(--tm-cols) - 0.02px);
   position: relative; overflow: hidden;
   border-radius: var(--radius-sm);
   background: var(--ink);
   box-shadow: 0 18px 40px -30px rgba(15, 10, 5, .55);
   transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* only cards that actually open something lift — a plain name/position card
   (details unticked) has no button, so it stays put and reads as non-interactive */
.tmember:has(.tmember__open):hover { transform: translateY(-4px); box-shadow: 0 26px 54px -28px rgba(15, 10, 5, .6); }
/* an ink card on an ink band needs an edge to read against */
section[data-bg="ink"] .tmember { box-shadow: 0 0 0 1px rgba(255, 255, 255, .13), 0 18px 40px -30px rgba(0, 0, 0, .7); }

/* the whole card surface is one real button — the only control here, which is
   what lets the social links inside the panel stay links instead of nesting in it */
.tmember__open {
   position: absolute; inset: 0; z-index: 2;
   appearance: none; -webkit-appearance: none; border: 0; padding: 0;
   background: transparent; cursor: pointer; border-radius: inherit;
}
/* inset offset — the card clips its overflow, so an outward ring would be cut */
.tmember__open:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }

/* square portrait — the standard team-grid crop, and ~16% shorter than the 4:5
   it replaced without making the frame feel cramped */
.tmember__frame { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--cream); }
.tmember__img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .55s var(--ease), transform .8s var(--ease); }
.tmember:hover .tmember__img { filter: grayscale(0); transform: scale(1.05); }

.tmember__band { background: var(--ink); color: var(--paper); padding: .85rem clamp(.9rem, 1.5vw, 1.25rem) 1rem; }
.tmember__name { font-family: var(--serif); font-size: clamp(1rem, .92rem + .3vw, 1.18rem); font-weight: 600; line-height: 1.25; margin: 0 0 .3rem; color: inherit; }
.tmember__role { margin: 0; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--gold-tint); }

/* hover panel — paper over ink, slides up across the card, caption band included
   (which is why it sits outside .tmember__frame; the frame clips its overflow).
   pointer-events:none so clicks fall through to .tmember__open beneath it; only
   the social links opt back in. Its z-index has to beat the button rather than
   the links doing it themselves: the panel's transform makes a stacking context
   its children can't escape. */
.tmember__panel {
   position: absolute; left: 0; right: 0; top: var(--tm-peek); bottom: 0; z-index: 3;
   pointer-events: none;
   display: flex; flex-direction: column; justify-content: space-between; gap: .8rem;
   padding: clamp(.9rem, 1.5vw, 1.3rem);
   background: var(--paper); color: var(--ink);
   border-top: 3px solid var(--gold);
   transform: translateY(100%); visibility: hidden;
   transition: transform .5s var(--ease), visibility .5s var(--ease);
}
.tmember__panel .tmember__role { color: var(--gold-deep); margin-bottom: .6rem; }
.tmember__excerpt {
   color: var(--ink-soft); font-size: .85rem; line-height: 1.6;
   overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;
   -webkit-line-clamp: 4; line-clamp: 4;
}
.tmember__excerpt p { margin: 0 0 .5rem; }
.tmember__excerpt p:last-child { margin-bottom: 0; }
/* hover only where hover exists — on touch the panel never half-opens on tap;
   there the tap goes straight to the modal, which carries the same bio and links */
@media (hover: hover) {
   .tmember:hover .tmember__panel { transform: translateY(0); visibility: visible; }
}
/* keyboard: focus lands on .tmember__open, which sits outside the panel — that
   reveals the panel and makes its links focusable, and :has() keeps matching as
   focus moves into them */
.tmember:has(:focus-visible) .tmember__panel { transform: translateY(0); visibility: visible; }

.tmember__social, .bio__social { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.tmember__social a, .bio__social a {
   display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
   border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.02rem;
   transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tmember__social a { pointer-events: auto; }
.tmember__social a:hover, .bio__social a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tmember__social a:focus-visible, .bio__social a:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

@media (max-width: 1024px) { .tmembers { --tm-cols: 3; } }
@media (max-width: 700px) { .tmembers { --tm-cols: 2; } .tgroup__count { display: none; } }
@media (prefers-reduced-motion: reduce) {
   .tmember, .tmember__img, .tmember__panel { transition: none; }
   .tmember:has(.tmember__open):hover, .tmember:hover .tmember__img { transform: none; }
}

/* about — team section footer CTA (hairline-separated, centered) */
.form__note--center { margin-top: 1.6rem; }
.team__cta {
   margin-top: clamp(2.8rem, 2rem + 3vw, 4.6rem);
   padding-top: clamp(2rem, 1.4rem + 2vw, 3.2rem);
   border-top: 1px solid var(--line);
   display: flex; flex-direction: column; align-items: center; gap: 1.3rem;
   text-align: center;
}
.team__cta-text {
   margin: 0; max-width: 46ch;
   font-family: var(--serif); font-style: italic;
   font-size: var(--text-lede); color: var(--tone-soft);
}

/* team member bio lightbox — reuses the .lb open/scroll-lock conventions */
.bio { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: rgba(15, 12, 10, .82); padding: clamp(1rem, 4vw, 3rem); backdrop-filter: blur(5px); }
.bio.is-open { display: grid; }
.bio__card { position: relative; display: grid; grid-template-columns: clamp(130px, 22vw, 200px) 1fr; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; width: min(680px, 100%); max-height: 88vh; overflow: auto; background: #fff; border-radius: 16px; padding: clamp(1.8rem, 4vw, 2.8rem); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .7); }
.bio__card:focus-visible { outline: none; }
/* square, same 1:1 crop and corner as the card it opened from — a round portrait
   here re-cropped the face against what the grid had just shown */
.bio__photo { aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--cream); box-shadow: 0 18px 40px -26px rgba(15, 10, 5, .5); }
.bio__photo img { width: 100%; height: 100%; object-fit: cover; }
.bio__name { font-family: var(--serif); font-size: clamp(1.5rem, 1rem + 1.3vw, 2rem); font-weight: 600; margin: .15rem 0 .35rem; }
.bio__role { color: var(--tone-accent); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin: 0 0 1.1rem; }
.bio__text { color: var(--tone-muted); line-height: 1.75; }
.bio__text p { margin: 0 0 .85rem; }
.bio__text p:last-child { margin-bottom: 0; }
/* the card's own social links, cloned in by initTeam — :empty keeps the rule off
   members who have none (initTeam clears innerHTML, so no stray whitespace node) */
.bio__social { margin-top: 1.5rem; padding-top: 1.35rem; border-top: 1px solid var(--line); }
.bio__social:empty { display: none; }
.bio__close { position: absolute; top: .85rem; right: .85rem; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: inherit; cursor: pointer; display: grid; place-items: center; transition: background var(--dur) var(--ease); }
.bio__close:hover { background: var(--gold-tint); }
@media (max-width: 560px) { .bio__card { grid-template-columns: 1fr; text-align: center; justify-items: center; } .bio__photo { width: 150px; } }

/* ---------- PARTNERS ---------- */
.partners { background: var(--cream); }
.partners__row { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; margin-top: 2.5rem; }
.partners__row .chip {
   border: 1px solid var(--line); background: var(--surface); border-radius: 100px;
   padding: .8rem 1.6rem; font-weight: 600; color: var(--ink-soft);
}

/* Logo wall. Every tile is the same fixed box whatever the artwork's aspect
   ratio, so the row reads as one band — same surface + hairline chrome as a
   community card, but flatter, wider and tighter-cornered. HomeSections picks
   between the two layouts by logo count: centred wrap, or the --scroll marquee. */
.plogos {
   --plogo-gap: clamp(.9rem, .6rem + 1vw, 1.5rem);
   --plogo-w: clamp(140px, 12vw, 182px);
   --plogo-h: clamp(78px, 7vw, 98px);
   --plogo-top: clamp(2.2rem, 1.6rem + 2vw, 3.4rem);
   margin-top: var(--plogo-top);
}
.plogos__set { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--plogo-gap); }
.plogo {
   flex: none; width: var(--plogo-w); height: var(--plogo-h);
   display: grid; place-items: center;
   background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
   transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* The cap is absolute, not a percentage: a percentage max-height does not
   resolve against the tile here, and the global `img { height: auto }` then
   lets a tall logo grow straight past its box. Measuring off the tile's own
   --plogo-w/h sidesteps both, so a wide wordmark and a tall crest sit in the
   same footprint — neither cropped nor distorted. */
.plogo img {
   max-width: calc(var(--plogo-w) - 2.6rem); max-height: calc(var(--plogo-h) - 2rem);
   width: auto; height: auto; object-fit: contain;
   filter: grayscale(1); opacity: .62;
   transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.plogo:hover { border-color: var(--gold); box-shadow: var(--shadow); transform: translateY(-3px); }
.plogo:hover img { filter: none; opacity: 1; }

/* Marquee: two identical halves, translated by exactly one half. The trailing
   padding folds one gap into each half's width, so -50% lands seamlessly rather
   than a gap short. The mask fades the band into the cream instead of cutting
   it, and hover/focus pauses the drift so a logo can be read. */
/* --plogo-lift is headroom for the hover lift and its shadow: `overflow: hidden`
   clips at the padding box, so without it the raised tile's top border is sliced
   off at the band's edge. The matching negative margins keep the band sitting
   exactly where it did before the padding was added. */
.plogos--scroll {
   --plogo-fade: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
   --plogo-lift: 20px;
   overflow: hidden; -webkit-mask-image: var(--plogo-fade); mask-image: var(--plogo-fade);
   padding-block: var(--plogo-lift);
   margin-top: calc(var(--plogo-top) - var(--plogo-lift));
   margin-bottom: calc(var(--plogo-lift) * -1);
}
.plogos--scroll .plogos__track { display: flex; width: max-content; animation: plogoDrift 45s linear infinite; }
.plogos--scroll .plogos__set { flex-wrap: nowrap; padding-right: var(--plogo-gap); }
.plogos--scroll:hover .plogos__track, .plogos--scroll:focus-within .plogos__track { animation-play-state: paused; }
@keyframes plogoDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Reduced motion: no drift, and the band turns hand-scrollable so the logos
   past the edge stay reachable. The duplicate half is only there for the loop. */
@media (prefers-reduced-motion: reduce) {
   .plogos--scroll { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
   .plogos--scroll .plogos__track { animation: none; }
   .plogos--scroll .plogos__set + .plogos__set { display: none; }
   .plogo:hover { transform: none; }
}

/* ---------- CONTACT ---------- */
.contact__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.info__list { display: grid; gap: 1.6rem; margin: 2rem 0; }
.info__item { display: flex; gap: 1rem; align-items: flex-start; }
.info__ico { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--gold-tint); font-size: 1.15rem; }
.info__item h4 { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tone-muted); margin-bottom: .35rem; }
.info__item a, .info__item p { font-family: var(--serif); font-size: 1.2rem; color: var(--tone-fg); }
.info__item a:hover { color: var(--tone-accent); }

.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.6rem, 1rem + 2vw, 2.6rem); box-shadow: var(--shadow); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .5rem; margin-bottom: 1.1rem; }
.field label { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tone-muted); font-weight: 600; }
.field input, .field select, .field textarea {
   font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line);
   border-radius: 10px; padding: .85rem 1rem; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,79,.15); }
.form .btn { width: 100%; justify-content: center; margin-top: .4rem; }
.form__note { text-align: center; color: var(--tone-muted); font-size: .82rem; margin-top: 1rem; }

/* Get-in-touch on ink — matches the footer (projects-detail). Form stays a light card for contrast. */
.contact--ink { background: var(--ink); color: var(--tone-soft); }
.contact--ink .display { color: var(--tone-fg); }
.contact--ink .lede { color: var(--tone-soft); }
.contact--ink .info__item h4 { color: var(--tone-muted); }
.contact--ink .info__item a, .contact--ink .info__item p { color: var(--tone-fg); }
.contact--ink .info__item a:hover { color: var(--tone-accent); }
.contact--ink .info__ico { background: rgba(233, 220, 195, .14); color: var(--gold-tint); }

/* project location — keyless Google Maps iframe embed (projects-detail) */
.pmap { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); aspect-ratio: 16 / 7; }
.pmap iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { .pmap { aspect-ratio: 4 / 3; } }

/* home-page "popular show homes" carousel reuses the community-new .home card;
   give each slide a width so the Swiper (slidesPerView:"auto") can lay them out. */
#resiTrack .home { width: clamp(280px, 34vw, 400px); }

/* ---------- journal: tags + article body ---------- */
.jr__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 .2rem; }
.jr__tag { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--gold-deep); background: var(--gold-tint); padding: .26rem .7rem; border-radius: 100px; }
a.jr__tag { transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
a.jr__tag:hover { background: var(--gold); color: #fff; }
.article { max-width: 72ch; margin: 0 auto; }
.article > * + * { margin-top: 1.3rem; }
.article p { color: var(--tone-soft); font-size: 1.08rem; line-height: 1.78; }
.article h2 { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; margin-top: 2.6rem; }
.article h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin-top: 2rem; }
.article img { width: 100%; border-radius: var(--radius); margin: 2.2rem 0; }
.article blockquote { border-left: 3px solid var(--gold); padding: .3rem 0 .3rem 1.5rem; font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.5; color: var(--tone-fg); }
.article ul { padding-left: 1.2rem; color: var(--tone-soft); }
.article li { margin-top: .55rem; line-height: 1.7; }
.article__foot { max-width: 72ch; margin: 2.6rem auto 0; padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem .8rem; justify-content: space-between; align-items: center; }

/* ---------- PROJECTS GRID ---------- */
.proj__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(1.5rem, 3vw, 2.6rem); }
.proj__media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.proj__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.proj__card:hover .proj__media img { transform: scale(1.06); }
.proj__status { position: absolute; left: 16px; top: 16px; z-index: 2; background: rgba(251,247,240,.92); color: var(--ink); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: .45rem .9rem; border-radius: 100px; backdrop-filter: blur(6px); }
.proj__body { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.3rem .2rem 0; }
.proj__body h3 { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; }
.proj__body .meta { color: var(--tone-muted); margin-top: .3rem; }
.proj__arrow { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.proj__card:hover .proj__arrow { background: var(--ink); color: #fff; transform: rotate(-45deg); }

/* ---------- AREA FILTER ---------- */
.filter { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.filter__tab {
   border: 1px solid var(--line); border-radius: 100px; padding: .65rem 1.5rem;
   font-weight: 600; color: var(--ink-soft); background: var(--surface);
   transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.filter__tab:hover { border-color: var(--ink); transform: translateY(-2px); }
.filter__tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.proj__card[hidden] { display: none; }

/* ---------- PROJECT DETAIL ---------- */
.pd__lead { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.pd__gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.pd__gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.pd__gallery .pd__big { grid-row: span 2; aspect-ratio: 4 / 4.5; }
.pd__gallery .pd__sm { aspect-ratio: 4 / 3; }
.pd__specgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 5rem); }
.pd__spec h4 { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; padding: 1.1rem 0 .6rem; border-bottom: 2px solid var(--ink); margin-bottom: .4rem; }
.pd__spec ul { margin-bottom: 1.6rem; }
.pd__spec li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); color: var(--tone-soft); }
.pd__spec li b { font-weight: 600; color: var(--tone-fg); }

/* Property Overview (.povr) — at-a-glance spec strip on a model / project page.
   Same language as the .pd__spec rows above: hairline rules, muted uppercase
   label, serif value. Tone tokens only (no fixed --line / --surface) so the ink
   background option stays readable with no extra rules. auto-fit keeps five
   items and twelve equally tidy; two columns on a phone. */
.povr { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: clamp(1.2rem, 2vw, 2.4rem); border-top: 1px solid var(--tone-line); }
.povr__item { display: flex; align-items: center; gap: .9rem; padding: 1.15rem 0; border-bottom: 1px solid var(--tone-line); }
.povr__ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border: 1px solid var(--tone-line); border-radius: 12px; color: var(--tone-accent); font-size: 1.05rem; }
.povr__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.povr__label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tone-muted); font-weight: 600; }
.povr__value { font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; color: var(--tone-fg); }
@media (max-width: 560px) {
   .povr { grid-template-columns: repeat(2, 1fr); }
   .povr__item { gap: .7rem; }
   .povr__ico { width: 2.2rem; height: 2.2rem; font-size: .95rem; }
   .povr__value { font-size: 1.05rem; }
}
.floor__tabs { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 2rem; }
.floor__tab { border: 1px solid var(--line); border-radius: 100px; padding: .6rem 1.3rem; font-weight: 600; color: var(--tone-soft); transition: all var(--dur) var(--ease); }
.floor__tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.floor__panel { display: none; } .floor__panel.is-active { display: block; }
.floor__plans-label { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tone-muted); font-weight: 600; margin-bottom: .8rem; }
.floor__tabs--plans { margin-bottom: 1.4rem; }
.floor__tabs--plans .floor__tab { padding: .45rem 1.05rem; font-size: .85rem; }
.floor__tabs--plans .floor__tab.is-active { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.floor__panel img { width: 100%; max-width: 760px; margin-inline: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.floor__img { cursor: zoom-in; }

/* ---------- COMMUNITY AMENITIES ---------- */
.amen__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.amen { padding: 2rem 1.7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.amen:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.amen i { font-size: 1.8rem; color: var(--tone-accent); }
.amen h3 { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; margin: 1rem 0 .5rem; }
.amen p { color: var(--tone-soft); font-size: .95rem; }
/* ---------- INTERACTIVE LOT MAP (Leaflet, image mode) ----------
   The status key is built from the lots themselves (see LotMap.tsx), so every chip
   colour arrives inline as --dot from the Statuses collection — no per-status CSS.
   Local motion tokens: --dur (.55s) is the site's page-scale easing, far too slow
   for a chip or a button. */
.lotmap {
   --lm-fast: .18s;
   --lm-mid: .3s;
}

/* The frame takes the plan's real aspect so a plan with transparent margins isn't
   cropped to a strip; max-height keeps a tall plan from eating the whole viewport. */
.lotmap__frame {
   position: relative;
   aspect-ratio: var(--lotmap-ar, 1920 / 1483);
   /* No width: with a ratio + a height cap the box back-computes its own width, so the
      card always matches the plan's proportions instead of letterboxing it on a wide
      shell. margin-inline centres what's left — left-aligned it read as a layout bug. */
   max-width: 100%;
   margin-inline: auto;
   max-height: min(76vh, 780px);
   min-height: 300px;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   background: var(--cream);
   box-shadow: var(--shadow);
   overflow: hidden;
}
/* Leaflet never loaded — the plan still has to be readable */
.lotmap__fallback { position: absolute; inset: 0; margin: auto; max-width: calc(100% - 2rem); max-height: calc(100% - 2rem); width: auto; height: auto; object-fit: contain; }
#lotmapCanvas.lotmap__canvas {
   position: absolute;
   inset: 0;
   /* beats Leaflet's own .leaflet-container{background:#ddd} — the old rule was a
      descendant selector (#lotmapCanvas .leaflet-container) and never matched. */
   background: var(--cream);
   font-family: var(--sans);
}

/* lot polygons — Leaflet writes fill-opacity/stroke-width as presentation attributes,
   which CSS transitions animate, so filtering fades instead of snapping. */
#lotmapCanvas .lotmap__lot {
   transition: fill-opacity var(--lm-mid) var(--ease), fill var(--lm-mid) var(--ease);
}
#lotmapCanvas .lotmap__lot.is-off { pointer-events: none; }
#lotmapCanvas .leaflet-interactive:focus { outline: none; }
#lotmapCanvas .leaflet-interactive:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* map controls — ours, so they match the site instead of Leaflet's default bar */
.lotmap__tools {
   position: absolute; top: .7rem; right: .7rem; z-index: 900;
   display: flex; flex-direction: column; gap: .4rem;
}
.lotmap__tool {
   width: 44px; height: 44px; padding: 0;
   display: grid; place-items: center;
   border: 1px solid var(--line); border-radius: 12px;
   background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
   color: var(--ink); font-size: .95rem; cursor: pointer;
   box-shadow: 0 10px 24px -18px rgba(40, 28, 12, .8);
   transition: background var(--lm-fast) var(--ease), color var(--lm-fast) var(--ease),
               border-color var(--lm-fast) var(--ease), transform var(--lm-fast) var(--ease);
}
.lotmap__tool:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.lotmap__tool:active { transform: scale(.93); }

.lotmap__hint {
   position: absolute; inset: 0; z-index: 1200;
   display: flex; align-items: center; justify-content: center; gap: .55rem; text-align: center; padding: 1rem;
   background: rgba(15, 10, 5, .55); color: #fff; font-weight: 600; letter-spacing: .01em;
   font-size: clamp(.95rem, .9rem + .4vw, 1.18rem);
   opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); backdrop-filter: blur(1px);
}
.lotmap__hint.is-visible { opacity: 1; }
.lotmap__frame:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }

/* popup + tooltip */
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: var(--shadow); }
.leaflet-popup-content { margin: 14px 16px; }
.lp__num { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.lp__badge { display: inline-block; margin: .45rem 0 .3rem; padding: .22rem .65rem; border-radius: 100px; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.lp__row { color: var(--tone-soft); font-size: .86rem; margin-top: .15rem; }
.lp__price { font-family: var(--serif); color: var(--tone-accent); font-size: 1.1rem; margin-top: .35rem; }

/* ---------- status key (chips are generated from the lots, not hardcoded) ---------- */
.lotmap__key { margin-top: clamp(1.3rem, .9rem + 1.6vw, 2.2rem); }
.lotmap__key-head {
   display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
   gap: .3rem 1rem; margin-bottom: 1rem;
}
.lotmap__key-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.lotmap__key-count { color: var(--tone-muted); font-size: .85rem; letter-spacing: .02em; }
.lotmap__reset {
   display: inline-flex; align-items: center; gap: .4rem;
   min-height: 34px; padding: .3rem .85rem;
   border: 1px solid var(--line); border-radius: 100px; background: transparent;
   color: var(--ink-soft); font-size: .78rem; font-weight: 600; cursor: pointer;
   transition: background var(--lm-fast) var(--ease), color var(--lm-fast) var(--ease), border-color var(--lm-fast) var(--ease);
}
.lotmap__reset:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.lotmap__legend { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.legend__item {
   display: inline-flex; align-items: center; gap: .55rem;
   min-height: 44px; padding: .5rem 1.05rem;
   border: 1px solid var(--line); border-radius: 100px;
   background: var(--surface); color: var(--ink);
   font-size: .86rem; font-weight: 600; cursor: pointer;
   transition: background var(--lm-fast) var(--ease), border-color var(--lm-fast) var(--ease),
               color var(--lm-fast) var(--ease), box-shadow var(--lm-fast) var(--ease);
}
.legend__item--static { cursor: default; }
.legend__dot {
   width: 11px; height: 11px; border-radius: 50%; flex: none;
   background: var(--dot, var(--muted));
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--muted)) 20%, transparent);
   transition: background var(--lm-fast) var(--ease), box-shadow var(--lm-fast) var(--ease), opacity var(--lm-fast) var(--ease);
}
.legend__count {
   font-variant-numeric: tabular-nums; font-size: .74rem; font-weight: 700;
   color: var(--ink-soft); background: var(--cream);
   border-radius: 100px; padding: .08rem .45rem; min-width: 1.7em; text-align: center;
   transition: background var(--lm-fast) var(--ease), color var(--lm-fast) var(--ease), box-shadow var(--lm-fast) var(--ease);
}
button.legend__item:hover { border-color: var(--ink); box-shadow: 0 10px 22px -16px rgba(40, 28, 12, .75); }
/* off state reads as "switched off", not "faded out" — .35 opacity failed contrast */
.legend__item[aria-pressed="false"] { background: transparent; color: var(--muted); }
.legend__item[aria-pressed="false"] .legend__dot { background: transparent; box-shadow: inset 0 0 0 2px var(--dot, var(--muted)); opacity: .6; }
.legend__item[aria-pressed="false"] .legend__count { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

.lotmap__note { text-align: center; color: var(--tone-muted); font-size: .82rem; margin-top: 1.1rem; }

/* ---------- narrow-screen filter (a <details> disclosure, not a chip rail) ---------- */
.lotmap__filter { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.lotmap__filter-btn {
   display: flex; align-items: center; gap: .6rem;
   min-height: 52px; padding: .75rem 1rem;
   font-size: .92rem; font-weight: 600; color: var(--tone-fg);
   cursor: pointer; list-style: none;
}
.lotmap__filter-btn::-webkit-details-marker { display: none; }
.lotmap__filter-btn > .bi-sliders { color: var(--tone-accent); }
.lotmap__filter-text { flex: 1; }
.lotmap__filter-value { color: var(--tone-muted); font-weight: 500; font-size: .85rem; }
.lotmap__filter-caret { color: var(--tone-muted); transition: transform var(--lm-fast) var(--ease); }
.lotmap__filter[open] .lotmap__filter-caret { transform: rotate(90deg); }
.lotmap__filter[open] .lotmap__filter-btn { border-bottom: 1px solid var(--line); }
.lotmap__filter-menu { padding: .35rem; }
.lotmap__filter-row {
   display: flex; align-items: center; gap: .7rem;
   min-height: 48px; padding: .5rem .7rem;
   border-radius: var(--radius-sm); cursor: pointer;
   font-size: .92rem; font-weight: 600; color: var(--tone-fg);
}
.lotmap__filter-row:active { background: var(--cream); }
.lotmap__filter-row input { width: 20px; height: 20px; flex: none; accent-color: var(--gold-deep); margin: 0; }
.lotmap__filter-row .legend__label { flex: 1; }
.lotmap__filter-row:has(input:not(:checked)) { color: var(--tone-muted); }
.lotmap__filter-row:has(input:not(:checked)) .legend__dot { background: transparent; box-shadow: inset 0 0 0 2px var(--dot, var(--muted)); opacity: .6; }

@media (max-width: 640px) {
   .lotmap__frame { min-height: 300px; max-height: 68vh; }
   .lotmap__key-head { justify-content: flex-start; }
   .lotmap__legend { justify-content: flex-start; }
   .lotmap__note { text-align: left; }
}
@media (min-width: 641px) { .lotmap__filter { display: none; } }

@media (prefers-reduced-motion: reduce) {
   .lotmap__hint, .lotmap__tool, .legend__item, .legend__dot, .legend__count,
   .lotmap__reset, #lotmapCanvas .lotmap__lot { transition: none; }
   .lotmap__tool:active { transform: none; }
}

.lotmap-wrap { position: relative; }
.lotmap-lock { position: absolute; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; border-radius: var(--radius); background: rgba(27, 23, 20, .5); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.lotmap-wrap.is-locked .lotmap-lock { display: flex; }
.lotmap-wrap.is-locked .lotmap__hint { display: none; }
.lotmap-lock__msg { display: inline-flex; align-items: center; gap: .6rem; background: rgba(251, 247, 240, .96); color: var(--ink); font-weight: 600; font-size: .95rem; padding: .85rem 1.4rem; border-radius: 100px; box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .55); }
.lotmap-lock__msg i { color: var(--tone-accent); font-size: 1.05rem; }

/* ---------- SHOW HOME LISTING ---------- */
.lst__count { color: var(--tone-muted); font-weight: 500; white-space: nowrap; }
.lst__bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 2.6rem; }
.lst__locksel { display: none; }
.lst__scope { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .55rem; padding: .78rem 1.15rem; background: #fff; border: 1px solid var(--line); border-radius: 100px; font-size: .95rem; color: var(--ink); box-shadow: 0 12px 26px -22px rgba(40,28,12,.6); white-space: nowrap; }
.lst__scope > .bi-geo-alt-fill { color: var(--gold); font-size: 1.05em; }
.lst__scope b { font-weight: 600; letter-spacing: .01em; }
.lst__scope-link { display: inline-flex; align-items: center; gap: .32rem; margin-left: .35rem; padding-left: .75rem; border-left: 1px solid var(--line); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--tone-muted); transition: color var(--dur) var(--ease); }
.lst__scope-link:hover { color: var(--tone-accent); }
/* single-line filter bar: keep on one row, drop quick filters as width shrinks; All filters stays pinned right */
.lst__bar--inline { flex-wrap: nowrap; gap: .7rem; }
.lst__bar--inline .lst__field { flex: 0 1 140px; min-width: 116px; }
.lst__bar--inline .lst__allbtn { margin-left: auto; flex: 0 0 auto; }
@media (max-width: 1160px) { .lst__bar--inline .lst__field--sort { display: none; } }
@media (max-width: 1000px) { .lst__bar--inline .lst__field--status { display: none; } }
@media (max-width: 880px)  { .lst__bar--inline .lst__field--baths { display: none; } }
@media (max-width: 740px)  { .lst__bar--inline .lst__field--beds { display: none; } }
/* mobile: drop every inline quick-filter + scope chip, leave only a full-width All-filters button (opens the drawer with the full filter set) so the row can't overflow */
@media (max-width: 560px)  { .lst__bar--inline .lst__field--homestyle, .lst__bar--inline .lst__scope { display: none; } .lst__bar--inline .lst__allbtn { flex: 1 1 100%; margin-left: 0; justify-content: center; } }
.lst__field { display: grid; gap: .45rem; flex: 1 1 190px; }
.lst__field > span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tone-muted); font-weight: 600; }
.lst__field select {
   font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
   border-radius: 100px; padding: .82rem 1.1rem; cursor: pointer; appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23936f38' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat; background-position: right 1.1rem center; padding-right: 2.4rem;
   transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lst__field select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,79,.15); }
.lst__allbtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.5rem; border-radius: 100px; background: var(--ink); color: #fff; font-weight: 600; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.lst__allbtn:hover { background: var(--gold-deep); transform: translateY(-2px); }

.lst__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.5vw, 2.2rem); }
.home[hidden] { display: none; }
.home { position: relative; }
.home__link { color: inherit; text-decoration: none; }
.home__link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--radius); }
.home__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.home:hover .home__top h3 { color: var(--tone-accent); }
.home__media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.home__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.home:hover .home__media img { transform: scale(1.05); }
.home__status { position: absolute; left: 14px; top: 14px; z-index: 2; background: rgba(251,247,240,.92); color: var(--ink); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: .42rem .85rem; border-radius: 100px; backdrop-filter: blur(6px); }
.home__body { padding: 1.1rem .2rem 0; }
.home__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.home__top h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; }
.home__price { font-family: var(--serif); font-size: 1.25rem; color: var(--tone-accent); white-space: nowrap; }
/* asterisk ties every price to the per-section price note */
/* the "*" superscript marks a starting price — suppress it on [data-noamt] elements
   (e.g. "Contact for price", where there is no amount to qualify) */
.home__price:not([data-noamt])::after, .sh-price b:not([data-noamt])::after { content: "*"; color: var(--tone-accent); margin-left: .12em; font-weight: 600; font-size: .55em; vertical-align: super; }
.home__loc { color: var(--tone-muted); font-size: .9rem; margin: .35rem 0 .85rem; display: flex; align-items: center; gap: .4rem; }
.home__loc i { color: var(--tone-accent); }
.home__specs { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.home__specs li { display: flex; align-items: center; gap: .4rem; color: var(--tone-soft); font-size: .86rem; }
.home__specs i { color: var(--tone-muted); }
/* A show home can sit in several communities, so no per-card location. */
.home__loc { display: none; }
#projects .home__loc, #portfolio .home__loc { display: flex; }   /* built projects keep their real address */
/* The spec row renders beds · baths · garage · sq ft straight from the card data,
   in that order, and omits anything the home doesn't have. It used to be reordered
   and trimmed here with :nth-child(3)/(4) — positional rules that pointed at the
   wrong spec the moment one was missing or a new one was added. */
/* ── project tile ───────────────────────────────────────────────────────────
   Square poster card, PROJECTS ONLY (#projects teaser + the /projects listing).
   The photo is the whole card and every line of copy sits on it, bottom-anchored
   over an ink scrim: location eyebrow → name → price → the beds/baths/garage/
   sq-ft rail. Models keep .home--model below; the .home base above is untouched.

   Two things are load-bearing:
   1. .tile__photo / .tile__scrim sit at z-index -1 so the text panel can stay in
      normal flow. That keeps .home--tile the nearest positioned ancestor, so the
      inherited full-card .home__link::after overlay still covers the whole card
      rather than collapsing onto the panel.
   2. Type is sized in cqi (card-relative), not vw. That is what keeps the
      four-item spec rail on ONE line from a ~240px card up to ~400px — it shrinks
      with the card instead of wrapping or clipping the last spec.
   .home[hidden] (0-2-0) still outranks .home--tile (0-1-0), so home.js
   initListing() keeps hiding filtered-out cards. */
.home--tile {
   container-type: inline-size;
   isolation: isolate;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   aspect-ratio: 1 / 1;
   border-radius: var(--radius);
   overflow: hidden;
   background: var(--ink);
   transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.home--tile:hover {
   transform: translateY(-4px);
   box-shadow: inset 0 0 0 1px rgba(233, 220, 195, .45), 16px 26px 48px -30px rgba(40, 28, 12, .55);
}
.tile__photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.home--tile:hover .tile__photo { transform: scale(1.06); }
/* four stops: near-solid ink under the copy, clean photo above the halfway line */
.tile__scrim {
   position: absolute; inset: 0; z-index: -1; pointer-events: none;
   background: linear-gradient(to top,
      rgba(15, 10, 5, .95) 0%, rgba(15, 10, 5, .86) 20%, rgba(15, 10, 5, .5) 40%,
      rgba(15, 10, 5, .16) 60%, rgba(15, 10, 5, 0) 78%);
}
.home--tile .home__status { left: clamp(.85rem, 4cqi, 1.15rem); top: clamp(.85rem, 4cqi, 1.15rem); z-index: 1; }

.tile__panel { padding: 0 clamp(.95rem, 4.4cqi, 1.45rem) clamp(.95rem, 4.4cqi, 1.35rem); display: grid; gap: .28rem; }
/* the base rule hides .home__loc (a show home spans communities); a project tile
   always has a real address, so bring it back as the eyebrow above the name */
.home--tile .home__loc {
   display: flex; margin: 0; gap: .38rem;
   font-size: clamp(.6rem, 2.85cqi, .73rem); letter-spacing: .12em; text-transform: uppercase;
   font-weight: 600; color: rgba(255, 255, 255, .82);
}
.home--tile .home__loc i { color: var(--tone-accent); font-size: 1.05em; letter-spacing: 0; }
.tile__name {
   font-family: var(--serif); font-weight: 600; line-height: 1.16;
   font-size: clamp(1.05rem, 5.4cqi, 1.5rem);
   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.home--tile .home__link { color: #fff; transition: color var(--dur) var(--ease); }
.home--tile:hover .home__link { color: var(--tone-accent); }
.home--tile .home__link:focus-visible { outline-offset: 2px; }
.home--tile .home__price { font-size: clamp(.86rem, 3.9cqi, 1.12rem); color: var(--tone-accent); }
.home--tile .home__price::after { color: var(--tone-accent); }
.home--tile .home__specs {
   flex-wrap: nowrap; justify-content: space-between; gap: .35rem;
   margin-top: .5rem; padding-top: .5rem;
   border-top: 1px solid rgba(233, 220, 195, .28);
   font-size: clamp(.68rem, 3cqi, .78rem);   /* floor keeps the rail legible on the narrowest 3-up card */
}
.home--tile .home__specs li { min-width: 0; white-space: nowrap; gap: .26rem; font-size: inherit; color: rgba(255, 255, 255, .9); }
.home--tile .home__specs i { color: var(--tone-accent); font-size: .95em; }
@media (prefers-reduced-motion: reduce) {
   .home--tile:hover { transform: none; }
   .home--tile:hover .tile__photo { transform: none; }
}

/* ── model card ─────────────────────────────────────────────────────────────
   The redesigned .home card, models ONLY (residences slider + the /community/<slug>
   listing). Project and portfolio cards keep the plain .home look above. Adds a
   surface + border, a photo slider with dots, and a show-home footer. The full-card
   link overlay is dropped here so the dots and the two footer links stay clickable. */
.home--model { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.home--model:hover { transform: translateY(-4px); border-color: var(--gold-tint); box-shadow: 16px 26px 48px -30px rgba(40, 28, 12, .45); }
.home--model .home__link::after { content: none; }
/* flex: 0 0 auto is load-bearing — the slider track is absolutely positioned, so the
   media box's min-content height is 0 and a column flex parent (Swiper slide, grid
   row) would otherwise shrink it away and the photo would vanish. */
.home--model .home__media { border-radius: 0; flex: 0 0 auto; }
.home--model:hover .home__media img { transform: none; }        /* the slider owns the media now */
.resi__track .home--model { height: auto; }   /* width comes from Swiper's slidesPerView */

/* photo slider — scroll-snap track: swipe works with no JS, and home.js (initModelCards)
   only advances it on a timer. No dots by design; the photos rotate on their own. */
.mcard__track { position: absolute; inset: 0; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.mcard__track::-webkit-scrollbar { display: none; }
.mcard__track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }

.home--model .home__body { padding: 1.15rem 1.25rem 1.2rem; }
.home--model .home__top { flex-wrap: wrap; gap: .2rem .8rem; }   /* 4-up cards get narrow — let the price drop instead of squeezing the name */
.home--model .home__top h3 { font-size: 1.4rem; }
.home--model .home__price { font-size: 1.35rem; }
.home--model .home__specs { border-top: 0; padding-top: 0; margin-top: .95rem; }
.mcard__foot { margin-top: auto; display: flex; align-items: center; gap: 1rem; padding: .65rem 1.25rem; border-top: 1px solid var(--line); }
.mcard__visit { display: inline-flex; align-items: center; gap: .55rem; color: var(--tone-soft); font-size: .9rem; font-weight: 500; transition: color var(--dur) var(--ease); }
.mcard__visit i { color: var(--tone-accent); font-size: 1.05rem; }
.mcard__visit:hover { color: var(--tone-accent); }
/* the fallback (no linked show home) is a plain label, not a link — muted, no hover */
.mcard__visit--static { color: var(--tone-muted); cursor: default; }
.mcard__visit--static:hover { color: var(--tone-muted); }
.mcard__visit--static i { color: var(--gold); }
.mcard__visit:focus-visible, .mcard__go:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mcard__go { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 100px; border: 1px solid var(--line); color: var(--tone-soft); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.home--model:hover .mcard__go, .mcard__go:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
@media (prefers-reduced-motion: reduce) {
   .mcard__track { scroll-behavior: auto; }
   .home--model:hover { transform: none; }
}

.lst__empty { text-align: center; color: var(--tone-muted); padding: 3rem 0; }

/* filter side drawer */
.fdrawer { position: fixed; inset: 0; z-index: 120; visibility: hidden; }
.fdrawer__scrim { position: absolute; inset: 0; background: rgba(15,10,5,.5); opacity: 0; transition: opacity .4s var(--ease); }
.fdrawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(92vw, 420px); background: var(--paper); box-shadow: var(--shadow); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .45s var(--ease); }
body.fdrawer-open .fdrawer { visibility: visible; }
body.fdrawer-open .fdrawer__scrim { opacity: 1; }
body.fdrawer-open .fdrawer__panel { transform: translateX(0); }
.fdrawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 1.8rem; border-bottom: 1px solid var(--line); }
.fdrawer__head h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.fdrawer__head button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font-size: 1rem; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.fdrawer__head button:hover { background: var(--ink); color: #fff; }
.fdrawer__body { flex: 1; overflow-y: auto; padding: 1.6rem 1.8rem; display: grid; gap: 1.4rem; align-content: start; }
.fdrawer__field { display: grid; gap: .5rem; }
.fdrawer__field > span { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tone-muted); font-weight: 600; }
.fdrawer__row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.fdrawer select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; cursor: pointer; width: 100%; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.fdrawer select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,138,79,.15); }
.fdrawer__foot { display: flex; gap: .8rem; padding: 1.4rem 1.8rem; border-top: 1px solid var(--line); }
.fdrawer__foot button { flex: 1; padding: .95rem; border-radius: 100px; font-weight: 600; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.fdrawer__reset { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.fdrawer__reset:hover { border-color: var(--ink); }
.fdrawer__apply { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.fdrawer__apply:hover { background: var(--gold-deep); border-color: var(--gold-deep); }

@media (max-width: 980px) { .lst__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .lst__grid { grid-template-columns: 1fr; } .lst__field { flex-basis: 45%; } .lst__allbtn { flex: 1 1 100%; justify-content: center; } }

/* ---------- COMMUNITY FEATURE (slider + features list) ---------- */
.cfeature__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.cfeature__grid > * { min-width: 0; }
.cfeature__media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3.4; }
.cfeature__slider { position: absolute; inset: 0; }
.cfeature__slider .swiper-wrapper, .cfeature__slider .swiper-slide { height: 100%; }
.cfeature__slider .swiper-slide { position: relative; }
.cfeature__slider img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cfeature__slider::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(15,10,5,.5), transparent 46%); }
.cfeature__cap { position: absolute; left: 20px; bottom: 18px; z-index: 2; color: #fff; font-family: var(--serif); font-size: 1.3rem; text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.cfeature__nav { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: flex; gap: .55rem; }
.cfeature__nav button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--ink); font-size: 1.05rem; backdrop-filter: blur(4px); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.cfeature__nav button:hover { background: var(--gold); color: #fff; transform: translateY(-2px); }

.cfeature__list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin: 0 0 2rem; }
.cfeat { display: flex; gap: .85rem; align-items: flex-start; }
.cfeat__ico { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--cream); color: var(--gold-deep); font-size: 1.25rem; }
.cfeat h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; margin-bottom: .25rem; }
.cfeat p { color: var(--tone-soft); font-size: .9rem; line-height: 1.5; }

@media (max-width: 980px) { .cfeature__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cfeature__list { grid-template-columns: 1fr; } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
   .team__grid { grid-template-columns: repeat(2, 1fr); }
   .values__grid, .amen__grid { grid-template-columns: 1fr; }
   .contact__grid { grid-template-columns: 1fr; }
   .pd__lead { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
   .proj__grid { grid-template-columns: 1fr; }
   .team__grid { grid-template-columns: 1fr 1fr; }
   .pd__specgrid { grid-template-columns: 1fr; }
   .pd__gallery { grid-template-columns: 1fr; }
   .pd__gallery .pd__big { grid-row: auto; aspect-ratio: 4 / 3; }
   .form__row { grid-template-columns: 1fr; }
   .phero { min-height: 52vh; }
}
@media (max-width: 460px) {
   .team__grid { grid-template-columns: 1fr; }
}

/* ── Show home detail ─────────────────────────────────────────── */
.sh-note { display: inline-flex; align-items: center; gap: .5rem; background: var(--gold-tint); color: var(--gold-deep); font-size: .8rem; font-weight: 600; letter-spacing: .02em; padding: .45rem .9rem; border-radius: 100px; margin-bottom: 1.3rem; }
.sh-pricenote { color: var(--tone-muted); font-size: .85rem; margin: 0 0 .35rem; }
.sh-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .55rem; margin: 0 0 1.4rem; }
.sh-price .from { color: var(--tone-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.sh-price b { font-family: var(--serif); font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); color: var(--tone-fg); font-weight: 600; line-height: 1; }
.sh-price .cust { color: var(--tone-muted); font-size: .85rem; }
.sh-ctas { display: flex; flex-wrap: wrap; gap: .8rem; }
.sh-config { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.3rem; }
.sh-field { display: flex; flex-direction: column; gap: .35rem; }
.sh-field > span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tone-muted); font-weight: 600; }
.sh-field select { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .9rem; font: inherit; color: var(--ink); background: var(--surface); min-width: 190px; cursor: pointer; }
.sh-field select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* project status pill in the config card (projects-detail) — reuses the card's gold accent */
.sh-status { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; margin-bottom: 1.1rem; padding: .42rem .9rem; background: linear-gradient(90deg, var(--gold), var(--gold-tint)); color: var(--ink); border-radius: 100px; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.sh-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
/* static (non-editable) Location / Community / Area rows in the config card (projects-detail) */
.sh-meta { display: grid; gap: .55rem; margin-bottom: 1.2rem; }
.sh-meta li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.sh-meta li:last-child { border-bottom: 0; padding-bottom: 0; }
.sh-meta span { flex: none; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tone-muted); font-weight: 600; }
.sh-meta b { font-weight: 600; color: var(--tone-fg); text-align: right; }
.sh-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.sh-gallery figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; }
.sh-gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s var(--ease); }
.sh-gallery figure:hover img { transform: scale(1.05); }
.sh-gallery .sh-tall { grid-row: span 2; }
.sh-gallery .sh-tall img { aspect-ratio: 4 / 6; }
.sh-elev { margin: 0; }
.sh-elev .sh-elev__media { border-radius: var(--radius); overflow: hidden; }
.sh-elev img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s var(--ease); }
.sh-elev:hover img { transform: scale(1.05); }
.sh-elev figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem .15rem 0; }
.sh-elev figcaption b { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.sh-elev figcaption span { color: var(--tone-muted); font-size: .82rem; white-space: nowrap; }
@media (max-width: 760px) {
   .sh-gallery .sh-tall { grid-row: auto; }
   .sh-gallery .sh-tall img { aspect-ratio: 4 / 3; }
}

/* ── Show home — full-bleed hero overview (section 01) ─────────── */
.shov { position: relative; display: flex; align-items: flex-end; min-height: 90svh; overflow: hidden; color: #fff; padding: clamp(7rem, 5rem + 5vw, 10rem) 0 clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.shov__bg { position: absolute; inset: 0; z-index: 0; }
.shov__bg img { width: 100%; height: 100%; object-fit: cover; }
.shov__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(27, 23, 20, .5) 0%, rgba(27, 23, 20, .15) 28%, rgba(27, 23, 20, .5) 70%, rgba(27, 23, 20, .82) 100%); }
.shov .shell { position: relative; z-index: 2; }
.shov__grid { display: grid; grid-template-columns: 1fr minmax(290px, 380px); column-gap: clamp(1.8rem, 3vw, 3.5rem); row-gap: 1.4rem; align-content: end; align-items: end; grid-template-areas: "lead config" "ctas config"; }
.shov__lead { grid-area: lead; }
.shov__config { grid-area: config; }
.shov .sh-ctas { grid-area: ctas; }

/* lead — over the scrim */
.shov__title { font-family: var(--serif); font-weight: 600; color: #fff; line-height: 1; font-size: clamp(2.8rem, 1.6rem + 5vw, 5.5rem); letter-spacing: -.015em; margin: .5rem 0 .9rem; }
.shov__title em { font-style: italic; color: var(--tone-accent); }
.shov__lede { color: rgba(255, 255, 255, .82); max-width: 46ch; margin-bottom: 1.1rem; }
.shov .sh-note { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(6px); }
.shov .sh-note i { color: var(--tone-accent); }

/* feature stats — inside the price card (light) */
.shov__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.2rem; border-top: 1px solid var(--line); padding-top: 1.2rem; margin: 1.3rem 0 0; }
.shov__stats li { display: flex; flex-direction: column; gap: .1rem; }
.shov__stats i { color: var(--tone-accent); font-size: .95rem; margin-bottom: .25rem; }
.shov__stats b { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; line-height: 1; color: var(--tone-fg); }
.shov__stats span { color: var(--tone-muted); font-size: .72rem; letter-spacing: .02em; }

.shov .btn--ghost { --fg: #fff; border-color: rgba(255, 255, 255, .5); }
.shov .btn--ghost:hover { --bg: #fff; --fg: var(--ink); border-color: #fff; }

/* configurator card — solid, floats over the image */
.shov__config { position: relative; background: var(--surface); color: var(--ink); border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.5rem; box-shadow: 0 40px 80px -38px rgba(0, 0, 0, .6); overflow: hidden; }
.shov__config::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-tint)); }
.shov__config .sh-config { margin-bottom: 1.1rem; }
.shov__config .sh-field > span { color: var(--tone-muted); }
.shov__config .sh-field select { background: var(--paper); }
.shov__config .sh-pricenote { margin-bottom: .15rem; }
.shov__config .sh-price { margin-bottom: 0; }
.shov__config .sh-price b { font-size: clamp(2.1rem, 1.5rem + 2vw, 3rem); }

@media (max-width: 900px) {
   .shov { min-height: 78svh; }
   .shov__grid { grid-template-columns: 1fr; row-gap: 1.6rem; align-content: start; grid-template-areas: "lead" "config" "ctas"; }
   .shov__config { max-width: 460px; }
}

/* ── Interior gallery carousel + fullscreen lightbox ──────────── */
.gal { position: relative; }
/* Mosaic: one lead tile beside a stacked column of three. Tiles past the fourth stay in
   the DOM (they are the lightbox sequence) but are not drawn — the "+N photos" tile is
   the way in. */
.gal__viewport { display: grid; grid-template-columns: 1.62fr 1fr; grid-auto-rows: 1fr; gap: .75rem; aspect-ratio: 2.15 / 1; }
/* aspect-ratio/height reset is load-bearing: home-sections.css sets a global
   .gal__item { aspect-ratio: 1 } for the home-page bento, and that made every mosaic
   tile taller than its grid row, so the tiles overlapped each other. */
.gal__viewport .gal__item { position: relative; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; aspect-ratio: auto; display: block; height: 100%; min-height: 0; }
.gal__viewport .gal__item:first-child { grid-row: span 3; }
.gal__viewport .gal__item:nth-child(n+5) { display: none; }
.gal__viewport .gal__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.gal__more { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: .15rem; background: rgba(27, 23, 20, .48); backdrop-filter: blur(2px); color: #fff; transition: background var(--dur) var(--ease); }
.gal__more b { font-family: var(--serif); font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); font-weight: 600; line-height: 1; }
.gal__more span { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.gal__item:hover .gal__more { background: rgba(27, 23, 20, .62); }
.gal__viewport .gal__item:hover img { transform: scale(1.05); }
.gal__zoom { position: absolute; right: .8rem; bottom: .8rem; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(27, 23, 20, .55); color: #fff; font-size: .9rem; opacity: 0; transform: translateY(6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); backdrop-filter: blur(4px); }
.gal__viewport .gal__item:hover .gal__zoom, .gal__viewport .gal__item:focus-visible .gal__zoom { opacity: 1; transform: translateY(0); }
.gal__viewport .gal__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* phones: the lead tile goes full width and the other three sit in a row under it */
@media (max-width: 780px) {
   .gal__viewport { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; aspect-ratio: auto; gap: .5rem; }
   .gal__viewport .gal__item { height: auto; aspect-ratio: 1 / 1; }   /* rows are content-sized here, so the tile owns its height again */
   .gal__viewport .gal__item:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
}

.lb { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: rgba(15, 12, 10, .94); padding: clamp(1rem, 4vw, 4rem); backdrop-filter: blur(4px); }
.lb.is-open { display: grid; }
.lb__img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .8); }
/* ---------- 360° tour slide + tour lightbox ---------- */
/* round call-to-action floating on the tour poster; the whole slide is the button,
   this is just its face, so it takes no pointer events of its own */
.gal__tour {
   position: absolute; inset: 0; z-index: 2; margin: auto;
   width: clamp(120px, 30%, 168px); height: clamp(120px, 30%, 168px); border-radius: 50%;
   display: grid; place-content: center; justify-items: center; gap: .35rem; padding: .5rem;
   background: rgba(251, 247, 240, .88); color: var(--ink); text-align: center;
   backdrop-filter: blur(3px); pointer-events: none;
   transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.gal__tour i { font-size: 1.6rem; line-height: 1; }
.gal__tour-label { font-size: .82rem; line-height: 1.25; letter-spacing: .01em; max-width: 11ch; }
.gal__item--tour:hover .gal__tour, .gal__item--tour:focus-visible .gal__tour { background: var(--paper); transform: scale(1.05); }
.gal__item--tour { cursor: pointer; }
.gal__item--tour .gal__zoom { display: none; }   /* it opens a tour, not a zoom */

/* lightbox in tour mode: the iframe replaces the photo, and the photo controls go */
.lb__frame { display: none; width: min(100%, 1500px); height: min(84vh, 100%); border: 0; background: var(--ink); }
.lb__framelink { display: none; position: absolute; z-index: 3; right: clamp(.6rem, 3vw, 2rem); bottom: clamp(.8rem, 3vw, 1.6rem); color: rgba(255, 255, 255, .82); font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }
.lb__framelink:hover, .lb__framelink:focus-visible { color: #fff; }
.lb.is-tour .lb__frame, .lb.is-tour .lb__framelink { display: block; }
.lb.is-tour .lb__img, .lb.is-tour .lb__nav, .lb.is-tour .lb__count { display: none; }

@media (prefers-reduced-motion: reduce) {
   .gal__tour { transition: none; }
   .gal__item--tour:hover .gal__tour, .gal__item--tour:focus-visible .gal__tour { transform: none; }
}

.lb__nav, .lb__close { position: absolute; z-index: 2; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); transition: background var(--dur) var(--ease); }
.lb__nav:hover, .lb__close:hover { background: rgba(255, 255, 255, .28); }
.lb__prev { left: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb__next { right: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb__close { top: clamp(.8rem, 3vw, 1.6rem); right: clamp(.8rem, 3vw, 1.6rem); }
/* counter moves to the top — the filmstrip owns the bottom of the viewer */
.lb__count { position: absolute; top: clamp(.8rem, 3vw, 1.6rem); left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .8); font-size: .85rem; letter-spacing: .12em; }

/* lightbox filmstrip — every photo in the set, the open one ringed in gold */
.lb__thumbs { position: absolute; left: 50%; bottom: clamp(.7rem, 2.5vw, 1.4rem); transform: translateX(-50%); z-index: 2; display: flex; gap: .5rem; max-width: min(94vw, 1100px); overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: .25rem; }
.lb__thumbs::-webkit-scrollbar { display: none; }
.lb__thumbs:empty { display: none; }
.lb__thumb { flex: 0 0 auto; width: clamp(58px, 6vw, 84px); margin: 0; padding: 0; border: 0; background: none; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; opacity: .45; transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.lb__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.lb__thumb:hover { opacity: .8; }
.lb__thumb.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--gold); }
.lb__thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lb.is-tour .lb__thumbs { display: none; }
/* the strip needs room, so the photo stops short of it */
.lb.is-open .lb__img { max-height: 72vh; }
@media (max-width: 640px) { .lb__thumbs { display: none; } .lb.is-open .lb__img { max-height: 82vh; } }
body.lb-open { overflow: hidden; }

/* ---------- floorplan viewer (#fplb): zoom, pan, print ---------- */
/* .lb centres its children, so .lb__pan is content-sized and backdrop clicks
   still reach .lb itself. Zoomed, the img grows past the box and this scrolls. */
.lb__pan { max-width: 100%; max-height: 84vh; overflow: auto; }
.lb__pan .lb__img { display: block; margin-inline: auto; }
/* grab affordance only while there is something to pan to */
.lb__pan.is-zoomed { cursor: grab; }
.lb__pan.is-zoomed.is-grabbing { cursor: grabbing; }
.lb__pan.is-zoomed .lb__img { user-select: none; -webkit-user-drag: none; }
.lb__tools { position: absolute; z-index: 2; top: clamp(.8rem, 3vw, 1.6rem); left: clamp(.8rem, 3vw, 1.6rem); display: flex; align-items: center; gap: .2rem; padding: .28rem; border-radius: 100px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .12); backdrop-filter: blur(6px); }
.lb__tool { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; transition: background var(--dur) var(--ease); }
.lb__tool:hover:not(:disabled) { background: rgba(255, 255, 255, .28); }
.lb__tool:disabled { opacity: .35; cursor: default; }
.lb__tool:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lb__zoom { min-width: 3.6rem; text-align: center; color: rgba(255, 255, 255, .85); font-size: .8rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
/* the section's own "Download floorplan PDF" button, under the lede */
.floor__pdf { margin-top: 1.6rem; }

/* Print = just the open plan. Gated on #fplb being open so Ctrl+P anywhere else
   — including with the shared #lightbox open — prints the page as normal. */
@media print {
   body:has(#fplb.is-open) > *:not(#fplb) { display: none !important; }
   body:has(#fplb.is-open) { overflow: visible; }
   #fplb.is-open { position: static; display: block; background: none; padding: 0; backdrop-filter: none; }
   #fplb .lb__close, #fplb .lb__tools { display: none !important; }
   #fplb .lb__pan { overflow: visible; max-height: none; }
   #fplb .lb__img { width: 100% !important; max-width: 100% !important; max-height: none !important; box-shadow: none; border-radius: 0; }
}

/* ── Process page — vertical timeline ─────────────────────────── */
.pintro { max-width: 720px; margin: 0 auto clamp(1rem, .5rem + 1vw, 2rem); text-align: center; }
.pintro .lede { color: var(--tone-soft); }

.ptl { position: relative; max-width: 860px; margin: clamp(2.4rem, 1.6rem + 3vw, 4.5rem) auto 0; }
.ptl::before {
   content: ""; position: absolute; top: 14px; bottom: 14px; left: 27px; width: 2px;
   background: linear-gradient(180deg, var(--gold) 0%, var(--gold-tint) 60%, var(--line) 100%);
}
.pphase {
   position: relative; padding-left: 86px; margin-bottom: 1.4rem;
   font-size: var(--text-eyebrow); letter-spacing: .16em; text-transform: uppercase;
   font-weight: 600; color: var(--tone-accent);
}
.pphase:not(:first-child) { margin-top: clamp(1.6rem, 1rem + 1.5vw, 2.6rem); }

.pstep { position: relative; padding: 0 0 clamp(1.6rem, 1.1rem + 1.5vw, 2.6rem) 86px; scroll-margin-top: 110px; }
.pstep:last-child { padding-bottom: 0; }
.pstep__node {
   position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%;
   display: grid; place-items: center; background: var(--ink); color: #fff;
   font-family: var(--serif); font-style: italic; font-size: 1.25rem; font-weight: 500;
   box-shadow: 0 0 0 6px var(--paper); z-index: 1;
   transition: background .4s var(--ease);
}
.pstep:hover .pstep__node { background: var(--gold-deep); }
.pstep__card {
   background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
   padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
   box-shadow: 0 18px 44px -36px rgba(40, 28, 12, .45);
   transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.pstep__card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--gold-tint); }
.pstep__head { display: flex; align-items: center; gap: .9rem; margin-bottom: .6rem; }
.pstep__ico {
   width: 46px; height: 46px; border-radius: 12px; flex: none;
   display: grid; place-items: center; background: var(--cream); color: var(--gold-deep); font-size: 1.3rem;
}
.pstep__card h3 { font-family: var(--serif); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem); font-weight: 600; }
.pstep__card p { color: var(--tone-soft); margin-top: .15rem; }

@media (max-width: 600px) {
   .ptl::before { left: 21px; }
   .pphase, .pstep { padding-left: 64px; }
   .pstep__node { width: 44px; height: 44px; font-size: 1.05rem; box-shadow: 0 0 0 5px var(--paper); }
   .pstep__head { flex-wrap: wrap; gap: .7rem; }
}

/* ── Process timeline · scroll variant (.pscroll) ─────────────── */
/* Themed port of the "Process Timeline" scrollytelling section: sticky
   rotating photo frame + scrolling steps + centre marker. Driven by
   home.js initProcScroll() through the data-* hooks. */
/* overflow-x: clip stops the rotated frame bleeding sideways WITHOUT creating a
   scroll container (which would break the sticky image). Never use overflow:hidden here. */
.pscroll { background: var(--paper); overflow-x: clip; }
.pscroll .pintro { margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }

.pscroll__track {
   position: relative; max-width: 1180px; margin: 0 auto;
   display: grid; grid-template-columns: 1fr 120px 1fr; align-items: start;
}
.pscroll__line, .pscroll__fill, .pscroll__spark {
   position: absolute; left: 50%; top: 0; transform: translateX(-50%);
}
.pscroll__line { bottom: 0; width: 2px; background: var(--line); }
.pscroll__fill { height: 0; width: 2px; background: linear-gradient(var(--gold), var(--gold-deep)); z-index: 1; }
.pscroll__spark {
   width: 24px; height: 24px; transform: translate(-50%, -50%); background: var(--gold);
   z-index: 4; box-shadow: 0 0 22px rgba(176, 138, 79, .5);
   clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
}

/* left — sticky frame that rotates square ⇆ diamond while photos swap */
.pscroll__imgcol { grid-column: 1; grid-row: 1; align-self: stretch; padding-right: 44px; display: flex; justify-content: flex-end; }
.pscroll__sticky { position: sticky; top: calc(50vh - 200px); margin-top: calc(41vh - 200px); width: 400px; height: 400px; max-width: 100%; }
.pscroll__stack {
   position: relative; width: 100%; height: 100%; border-radius: var(--radius);
   overflow: hidden; box-shadow: var(--shadow); transform: rotate(0deg); will-change: transform;
}
.pscroll__slot {
   position: absolute; inset: 0; opacity: 0; display: grid; place-items: center;
   background: var(--cream); transition: opacity .55s var(--ease);
}
.pscroll__slot > img { width: 100%; height: 100%; object-fit: cover; }
.pscroll__ph { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tone-muted); text-align: center; padding: 1rem; }

/* right — scrolling text steps */
.pscroll__steps { grid-column: 3; grid-row: 1; padding-left: 44px; }
.pscroll__step { min-height: 82vh; display: flex; align-items: center; }
.pscroll__card { max-width: 460px; opacity: 0; transform: translateY(46px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.pscroll__meta { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.pscroll__num { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(2rem, 1.4rem + 1.2vw, 2.6rem); color: var(--gold); line-height: 1; }
.pscroll__eyebrow { font-size: var(--text-eyebrow); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--tone-muted); }
.pscroll__title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem); line-height: 1.2; color: var(--tone-fg); margin: 0 0 .7rem; }
.pscroll__desc { color: var(--tone-soft); line-height: 1.62; margin: 0 0 1.1rem; }
.pscroll__tag {
   display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--gold-deep);
   background: var(--surface); border: 1px solid var(--gold-tint); border-radius: 999px; padding: 6px 15px;
}
.pscroll__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); display: inline-block; }

/* On an ink background the head + copy flip light (mirrors home-sections.css). */
.pscroll[data-bg="ink"] .pscroll__title { color: #fff; }
.pscroll[data-bg="ink"] .pscroll__desc { color: rgba(255, 255, 255, .8); }
.pscroll[data-bg="ink"] .pscroll__tag { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: var(--gold-tint); }

@media (max-width: 900px) {
   .pscroll__track { grid-template-columns: 40px 1fr; }
   .pscroll__imgcol { display: none; }
   .pscroll__line, .pscroll__fill, .pscroll__spark { left: 20px; }
   .pscroll__steps { grid-column: 2; padding-left: 26px; }
   .pscroll__step { min-height: 58vh; }
}

/* No JS / reduced-motion: reveal every card, no rotation, first photo shown. */
@media (prefers-reduced-motion: reduce) {
   .pscroll__card { opacity: 1; transform: none; }
   .pscroll__slot:first-child { opacity: 1; }
}

/* ── Legal pages (privacy / terms) ────────────────────────────── */
.legal { max-width: 760px; margin-inline: auto; }
.legal__updated { color: var(--tone-muted); font-size: .85rem; margin-bottom: 2rem; }
.legal > p { color: var(--tone-soft); line-height: 1.8; margin-bottom: 1rem; }
.legal h2 { font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); font-weight: 600; color: var(--tone-fg); margin: 2.4rem 0 .6rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--tone-fg); margin: 1.5rem 0 .4rem; }
.legal ul { margin: 0 0 1.2rem; padding-left: 1.3rem; list-style: disc; }
.legal li { color: var(--tone-soft); line-height: 1.75; margin-bottom: .45rem; }
.legal a { color: var(--tone-accent); text-decoration: underline; }
.legal a:hover { color: var(--tone-fg); }

/* footer legal links (privacy / terms) */
.ft__legal a { color: var(--tone-muted); }
.ft__legal a:hover { color: var(--tone-fg); text-decoration: underline; }
.ft__legal a + a { margin-left: 1.4rem; position: relative; }
.ft__legal a + a::before { content: "·"; position: absolute; left: -.8rem; color: var(--line); }

/* ── about · "What we build" — interactive image cards ────────── */
.wb { background: var(--ink); }
.wb .eyebrow { color: var(--tone-accent); }
.wb .eyebrow .idx { color: var(--tone-fg); }
.wb .display { color: var(--tone-fg); }
.wb .lede { color: var(--tone-soft); }
.wb__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }
.wb__card { position: relative; aspect-ratio: 4 / 3.3; border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 40px -32px rgba(40, 28, 12, .5); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.wb__card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.45) brightness(.82); transition: transform .9s var(--ease), filter .6s var(--ease); }
.wb__card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.wb__card:hover > img, .wb__card:focus-within > img { transform: scale(1.07); filter: grayscale(0) brightness(.74); }
.wb__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 10, 6, .9) 0%, rgba(15, 10, 6, .28) 48%, rgba(15, 10, 6, .05) 100%); }
.wb__body { position: absolute; inset: auto 0 0 0; z-index: 1; padding: clamp(1.2rem, 1rem + 1vw, 1.7rem); color: #fff; }
.wb__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(6px); color: var(--gold-tint); font-size: 1.2rem; margin-bottom: .85rem; transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease); }
.wb__card:hover .wb__ico { background: var(--gold); color: #fff; transform: translateY(-2px); }
.wb__card h3 { font-family: var(--serif); font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem); font-weight: 600; line-height: 1.15; }
.wb__body p { color: rgba(255, 255, 255, .84); font-size: .92rem; margin-top: .4rem; max-width: 40ch; }
/* reveal copy on hover for pointer devices; always visible on touch */
@media (hover: hover) {
   .wb__body p { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
   .wb__card:hover .wb__body p, .wb__card:focus-within .wb__body p { opacity: 1; transform: none; }
}
@media (max-width: 900px) { .wb__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wb__grid { grid-template-columns: 1fr; } .wb__card { aspect-ratio: 16 / 10; } }

/* ---------- WHY US — numbered cards (.whyus, library block) ----------
   Dark photo section: intro copy holds the left column, pale cards the right.
   The cards run on a 3-column track but only ever occupy two of them — each pair
   steps one column left of the pair above, which is what gives the diagonal.
   Cards stay two-up all the way down to phones (they are small by design); only
   the intro/cards split collapses. */
.whyus { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); isolation: isolate; }
.whyus__bg { position: absolute; inset: 0; z-index: -1; }
.whyus__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* scrim keeps white copy at AA contrast over any photo */
.whyus__bg::after { content: ""; position: absolute; inset: 0; background: rgba(27, 23, 20, .74); }

.whyus__inner {
   display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
   gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: start;
}
.whyus__intro { position: sticky; top: clamp(5rem, 8vw, 7rem); }
.whyus__title-main { color: var(--paper); margin: .35rem 0 0; }
.whyus__accent { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; }
.whyus__lede { color: rgba(251, 247, 240, .82); font-size: var(--text-lede); line-height: 1.7; max-width: 46ch; margin: clamp(1.1rem, 2vw, 1.8rem) 0 0; }

.whyus__grid {
   display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
   grid-auto-rows: 1fr;   /* every row equal height → all cards the same size, whatever the copy length */
   gap: clamp(1rem, .5rem + 1.4vw, 1.75rem); margin: 0; padding: 0; list-style: none;
}
/* pair 1 → columns 2-3, pair 2 → columns 1-2, and repeat for 5-8 */
.whyus__card:nth-child(4n + 1) { grid-column: 2; }
.whyus__card:nth-child(4n + 2) { grid-column: 3; }
.whyus__card:nth-child(4n + 3) { grid-column: 1; }
.whyus__card:nth-child(4n + 4) { grid-column: 2; }

/* square corners — the sharp edge is the point of this card, so no --radius here */
.whyus__card {
   background: var(--paper); color: var(--ink); border-radius: 0;
   padding: clamp(.9rem, .6rem + .8vw, 1.4rem);
   display: flex; flex-direction: column; gap: clamp(.9rem, 2vw, 1.6rem);
   box-shadow: 0 24px 50px -34px rgba(0, 0, 0, .7);
}
/* number sits beside the photo, not on it — no scrim needed, stays legible */
.whyus__media { display: grid; grid-template-columns: auto 1fr; gap: clamp(.5rem, 1.4vw, 1rem); align-items: start; }
.whyus__num { font-family: var(--serif); font-size: clamp(.85rem, .8rem + .2vw, 1rem); color: var(--tone-muted); letter-spacing: .06em; }
.whyus__media img {
   width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block;
   border-radius: 0; transition: transform .9s var(--ease);
}
.whyus__card:hover .whyus__media img, .whyus__card:focus-within .whyus__media img { transform: scale(1.04); }
/* imageless card: the number leads (bigger), heading grows to hold the card, and the
   text sits at the top instead of pushed under a photo */
.whyus__num--lead { font-size: clamp(1.1rem, .9rem + .6vw, 1.5rem); }
.whyus__card--text { justify-content: flex-start; gap: clamp(.5rem, 1.5vw, .9rem); }
.whyus__card--text .whyus__text { margin-top: 0; }
/* text card: heading stays on one line (these are single words); sized so even the
   longest — Communication / Craftsmanship — fits the card width without touching the edge */
.whyus__card--text .whyus__title { font-size: clamp(1.2rem, 1rem + .55vw, 1.45rem); white-space: nowrap; }
.whyus__text { margin-top: auto; }
.whyus__title { font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); font-weight: 600; margin: 0 0 .4rem; }
.whyus__text p { color: var(--tone-soft); font-size: clamp(.88rem, .84rem + .2vw, .98rem); line-height: 1.6; }

/* tablet — intro goes full width above the cards; cards keep the diagonal */
@media (max-width: 1024px) {
   .whyus__inner { grid-template-columns: 1fr; }
   .whyus__intro { position: static; max-width: 62ch; }
   .whyus__accent { display: inline; }   /* heading fits one line again */
}
/* phone — drop the 3rd track so the pairs align; cards stay two-up */
@media (max-width: 720px) {
   .whyus__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .whyus__card:nth-child(n) { grid-column: auto; }
   /* cards get narrow two-up — let the long single-word headings wrap so they stay
      inside the card instead of running past its edge */
   .whyus__card--text .whyus__title { white-space: normal; overflow-wrap: break-word; font-size: clamp(1.05rem, 3.2vw, 1.3rem); }
   .whyus__accent { display: block; }
}
@media (prefers-reduced-motion: reduce) {
   .whyus__media img { transition: none; }
   .whyus__card:hover .whyus__media img, .whyus__card:focus-within .whyus__media img { transform: none; }
}