/* ===========================================================
   Grand Home Builders — Editorial Luxury  ·  sections
   about · stats · feature · residences · why · process
   communities · testimonials · gallery · journal · cta · responsive
   =========================================================== */

/* ---------- ABOUT ---------- */
.about__grid {
   display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 5rem);
   align-items: center;
}
.about__copy .display { max-width: 18ch; }
.about__list { display: grid; gap: .7rem; margin-top: 2rem; margin-bottom: 2.2rem; }
.about__list li { display: flex; align-items: center; gap: .7rem; color: var(--tone-soft); font-weight: 500; }
.about__list i { color: var(--tone-accent); font-size: 1.05rem; }
.about__media { position: relative; }
.about__photo {
   border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
   aspect-ratio: 4 / 4.4;
}
.about__photo img { width: 100%; height: 110%; object-fit: cover; }
.about__badge {
   position: absolute; left: -22px; bottom: 38px;
   background: var(--ink); color: #fff; border-radius: var(--radius-sm);
   padding: 1.2rem 1.5rem; display: flex; align-items: center; gap: .9rem;
   box-shadow: var(--shadow);
}
.about__badge strong { font-family: var(--serif); font-size: 2.6rem; color: var(--tone-accent); line-height: 1; }
.about__badge span { font-size: .82rem; line-height: 1.35; color: rgba(255,255,255,.78); }

/* Photo-stack variant of the media column (homeAboutStack → AboutPhotoStack.tsx).
   Same portrait footprint as .about__photo so the section keeps its rhythm; the
   cards are absolutely stacked inside it and fanned by framer-motion transforms.
   The perspective lives here — the rotateY on each card is meaningless without it.

   The pile itself is the button (one click target, steps to the next photo), so it
   needs the browser's button chrome stripped off. */
.about__stack {
   display: block; position: relative; width: 100%; aspect-ratio: 4 / 4.4;
   padding: 0; border: 0; background: none; cursor: pointer; text-align: inherit;
   perspective: 1400px; perspective-origin: 30% 50%;
}
.about__stack:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 6px; border-radius: var(--radius); }
.about__stack-card {
   display: block; position: absolute; inset: 0;
   border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
   transform-style: preserve-3d; transform-origin: left center;
   /* Only box-shadow transitions here — the transforms belong to framer-motion, so
      a CSS transition on them would fight the spring. */
   transition: box-shadow .3s ease;
}
.about__stack-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about__stack:hover .about__stack-card { box-shadow: 0 22px 48px rgba(0,0,0,.28); }

/* ---------- STATS ---------- */
.stats { background: var(--ink); color: var(--tone-fg); }
.stats__row {
   display: grid; grid-template-columns: repeat(4, 1fr);
   padding-block: clamp(2.6rem, 2rem + 2vw, 4rem);
}
.stat { text-align: center; padding-inline: 1rem; position: relative; }
.stat + .stat::before {
   content: ""; position: absolute; left: 0; top: 12%; height: 76%; width: 1px;
   background: var(--tone-line);
}
.stat__num { display: block; font-family: var(--serif); font-size: clamp(2.4rem, 1.5rem + 3vw, 3.8rem); color: var(--tone-accent); line-height: 1; }
.stat__label { display: block; margin-top: .7rem; font-size: .82rem; letter-spacing: .08em; color: var(--tone-muted); text-transform: uppercase; }

/* ---------- FEATURE / SHOW HOME ---------- */
.feature__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.feature__media { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3.4; }
.feature__media img { width: 100%; height: 114%; object-fit: cover; }
.feature__pill {
   position: absolute; right: 18px; bottom: 18px;
   display: inline-flex; align-items: center; gap: .5rem;
   background: rgba(255,255,255,.92); color: var(--ink); font-weight: 600; font-size: .9rem;
   padding: .75rem 1.2rem; border-radius: 100px; backdrop-filter: blur(6px);
   transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.feature__pill:hover { background: var(--ink); color: #fff; transform: translateY(-3px); }
.feature__desc { font-size: var(--text-lede); color: var(--tone-soft); }
.spec { margin: 2rem 0; border-top: 1px solid var(--line); }
.spec li { display: flex; justify-content: space-between; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid var(--line); }
.spec__k { color: var(--tone-muted); letter-spacing: .04em; }
.spec__v { font-family: var(--serif); font-size: 1.25rem; }
.feature__addr { display: flex; align-items: center; gap: .55rem; color: var(--tone-muted); margin-bottom: 1.8rem; }
.feature__addr i { color: var(--tone-accent); }

/* ---------- RESIDENCES (Swiper) ---------- */
.resi__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.resi__head .display { max-width: none; }
.resi__nav { display: flex; gap: .8rem; }
/* The track sits on the shell, not full-bleed: it starts where the heading starts and
   is clipped where the "next" arrow ends. How many cards fit is Swiper's job
   (initSwipers breakpoints), not a fixed card width here. */
.resi__track.swiper { width: var(--shell); margin-inline: auto; overflow: hidden; }
.resi__card { width: clamp(260px, 32vw, 380px); height: auto; }
.resi__card img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; border-radius: var(--radius); }
.resi__cap { padding: 1.1rem .2rem 0; }
.resi__cap h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; }
.resi__cap p { color: var(--tone-muted); margin-top: .3rem; }

/* ---------- WHY ---------- */
.why { background: var(--cream); }
.why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.why__card {
   background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
   padding: 2rem 1.7rem; min-height: 260px; display: flex; flex-direction: column;
   transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.why__card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.why__no { font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--tone-accent); }
.why__card h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; margin: 1.4rem 0 .7rem; }
.why__card p { color: var(--tone-soft); font-size: .96rem; }

/* ---------- PROCESS (scrollytelling, GSAP-pinned) ---------- */
.proc { background: var(--ink); color: var(--tone-fg); padding-block: var(--space); }
.proc .eyebrow { color: var(--tone-accent); }
.proc .eyebrow .idx { color: var(--tone-fg); }
.proc .display { color: var(--tone-fg); }
.proc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); margin-top: 1rem; }
.proc__sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.proc__visual {
   position: relative; width: 100%; aspect-ratio: 4 / 4.3; border-radius: var(--radius);
   overflow: hidden; box-shadow: var(--shadow);
}
.proc__img {
   position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
   opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease), transform 1.1s var(--ease);
}
.proc__img.is-active { opacity: 1; transform: scale(1); }
.proc__counter {
   position: absolute; left: 18px; bottom: 16px; z-index: 2;
   font-family: var(--serif); font-size: 1.1rem; letter-spacing: .1em; color: #fff;
   background: rgba(20,14,8,.5); padding: .4rem .8rem; border-radius: 100px; backdrop-filter: blur(6px);
}
.proc__counter b { color: var(--tone-accent); font-weight: 600; }
.proc__steps { display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.proc__step {
   padding: 1.6rem 0 1.7rem; border-top: 1px solid rgba(255,255,255,.14);
   opacity: .42; transition: opacity .5s var(--ease), padding-left .5s var(--ease);
}
.proc__step.is-active { opacity: 1; padding-left: 1.2rem; }
.proc__step .proc__k { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--tone-accent); }
.proc__step h3 { font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); font-weight: 600; margin: .4rem 0 .6rem; }
.proc__step p { color: var(--tone-soft); max-width: 42ch; }

/* ---------- COMMUNITIES ---------- */
.comm__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 5rem); align-items: center; }
.comm__media { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 5 / 4; }
.comm__media img { width: 100%; height: 114%; object-fit: cover; }
.comm__copy .display { max-width: 16ch; }
.comm__tags { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.8rem 0 2.2rem; }
.comm__tags > span {
   border: 1px solid var(--line); border-radius: 100px; padding: .5rem 1.1rem;
   font-size: .86rem; color: var(--ink-soft); background: var(--surface);
}
/* rich hover tooltip on community tags */
.tagpop { position: relative; cursor: default; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.tagpop:hover, .tagpop:focus-visible { border-color: var(--gold); color: var(--tone-fg); outline: none; }
.tagpop__card {
   position: absolute; bottom: calc(100% + 13px); left: 50%; transform: translateX(-50%) translateY(6px);
   width: 244px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
   box-shadow: var(--shadow); overflow: hidden; text-align: left; z-index: 60;
   opacity: 0; visibility: hidden; pointer-events: none;
   transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.tagpop:hover .tagpop__card, .tagpop:focus-within .tagpop__card { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.tagpop__card img { width: 100%; height: 126px; object-fit: cover; display: block; }
.tagpop__body { display: block; padding: .85rem 1.05rem 1.05rem; }
.tagpop__body strong { display: block; font-family: var(--serif); font-size: 1.08rem; font-weight: 600; color: var(--tone-fg); }
.tagpop__body span { display: block; margin-top: .3rem; color: var(--tone-soft); font-size: .84rem; line-height: 1.45; letter-spacing: 0; text-transform: none; }
.tagpop__card::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--surface); }
@media (prefers-reduced-motion: reduce) { .tagpop__card { transition: opacity .15s; } }

/* ---------- TESTIMONIALS (Swiper) ---------- */
.tm { background: var(--cream); }
.tm .section-head { margin-bottom: 1.6rem; }
.tm__viewport { max-width: 920px; margin-inline: auto; overflow: hidden; }
.tm__slide { text-align: center; padding-inline: clamp(0rem, 4vw, 3rem); }
.tm__slide blockquote {
   margin: 0; font-family: var(--serif); font-weight: 500;
   font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); line-height: 1.32; letter-spacing: -.01em;
   text-wrap: balance;
}
.tm__slide cite { display: block; margin-top: 1.8rem; font-style: normal; font-weight: 600; }
.tm__slide cite span { display: block; color: var(--tone-muted); font-weight: 400; font-size: .9rem; margin-top: .2rem; }
.tm__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 2.2rem; }
.tm__dots .swiper-pagination-bullet {
   width: 8px; height: 8px; border-radius: 50%; background: var(--line); opacity: 1;
   transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.tm__dots .swiper-pagination-bullet-active { width: 26px; border-radius: 100px; background: var(--gold); }

/* ---------- GALLERY / BENTO ---------- */
.gal__bento {
   display: grid; gap: 1.1rem;
   grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr;
}
.gal__item {
   position: relative; overflow: hidden; border-radius: var(--radius);
   aspect-ratio: 1; display: block;
}
.gal__item--tall { grid-row: span 2; aspect-ratio: 1 / 2.06; }
.gal__item--wide { grid-column: span 2; aspect-ratio: 2.06 / 1; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gal__item:hover img { transform: scale(1.07); }
.gal__cap {
   position: absolute; left: 16px; bottom: 14px; z-index: 2; color: #fff; font-weight: 600;
   letter-spacing: .04em; opacity: 0; transform: translateY(8px);
   transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
   text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.gal__item::after {
   content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,10,5,.55), transparent 45%);
   opacity: 0; transition: opacity var(--dur) var(--ease);
}
.gal__item:hover .gal__cap { opacity: 1; transform: none; }
.gal__item:hover::after { opacity: 1; }

/* ---------- GALLERY — media tilt row (home page) ---------- */
.mgal { overflow: hidden; }
.mgal .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.mgal__track { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0; align-items: center; padding-top: 8px; }
.mgal__item {
   position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 2 / 3; cursor: pointer;
   border-radius: var(--radius); overflow: hidden;
   box-shadow: 0 18px 40px -28px rgba(15,10,5,.6);
   transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.mgal__item:not(:first-child) { margin-left: -16px; }   /* slight overlap so adjacent tilted corners touch */
/* tilt-style: gentle alternating rotation + slight vertical scatter (r-veda look) */
.mgal__item:nth-child(odd)  { transform: rotate(-8deg); }
.mgal__item:nth-child(even) { transform: rotate(8deg); }
/* hover: keep the card's own tilt (no flip, no straighten) — just lift + caption */
.mgal__item:hover, .mgal__item:focus-within { z-index: 2; box-shadow: 0 30px 56px -26px rgba(15,10,5,.65); }
.mgal__item:nth-child(odd):hover,  .mgal__item:nth-child(odd):focus-within  { transform: rotate(-3deg) scale(1.04); }
.mgal__item:nth-child(even):hover, .mgal__item:nth-child(even):focus-within { transform: rotate(3deg) scale(1.04); }
/* slow Ken Burns so the still photo reads like a looping video */
.mgal__item img { width: 100%; height: 100%; object-fit: cover; animation: mgalKen 16s ease-in-out infinite; }
.mgal__item:nth-child(even) img { animation-duration: 20s; animation-direction: reverse; }
.mgal__item:nth-child(3n) img   { animation-delay: -7s; }
@keyframes mgalKen {
   0%   { transform: scale(1.07); }
   50%  { transform: scale(1.17) translate(-2.5%, -2%); }
   100% { transform: scale(1.07); }
}
.mgal__item::after {
   content: ""; position: absolute; inset: 0; opacity: 1;
   background: linear-gradient(0deg, rgba(15,10,5,.66), transparent 52%);
   transition: opacity var(--dur) var(--ease);
}
.mgal__cap {
   position: absolute; left: 16px; bottom: 16px; z-index: 2; color: #fff;
   font-weight: 600; letter-spacing: .04em; opacity: 1;
   text-shadow: 0 1px 12px rgba(0,0,0,.5);
   transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mgal__item:hover .mgal__cap, .mgal__item:focus-within .mgal__cap { opacity: 1; transform: none; }
.mgal__item:hover::after, .mgal__item:focus-within::after { opacity: 1; }

/* ---------- fullscreen category viewer (opens on card click) ---------- */
.mgcat { position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column;
   background: rgba(15,10,5,.95); padding: clamp(1rem, 3vw, 2.4rem); }
.mgcat.is-open { display: flex; }
.mgcat__close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border: 0;
   border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 1.1rem; cursor: pointer;
   display: grid; place-items: center; transition: background .2s var(--ease); }
.mgcat__close:hover { background: rgba(255,255,255,.24); }
.mgcat__bar { display: flex; justify-content: center; margin: 0 0 clamp(1rem, 2.5vw, 2rem); padding: 0 3rem; }
.mgcat__tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.mgcat__tab { border: 1px solid rgba(255,255,255,.25); background: transparent; color: rgba(255,255,255,.8);
   font: inherit; font-size: .85rem; letter-spacing: .04em; padding: .5rem 1.1rem; border-radius: 100px;
   cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.mgcat__tab:hover { border-color: #fff; color: #fff; }
.mgcat__tab.is-active { background: var(--gold); border-color: var(--gold); color: #fff; }
.mgcat__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding-inline: clamp(3.5rem, 8vw, 6rem); }
.mgcat__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius); }
/* nav pinned to the overlay's left/right edges — independent of image size */
.mgcat__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border: 0;
   border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 1.2rem; cursor: pointer;
   display: grid; place-items: center; transition: background .2s var(--ease); }
.mgcat__prev { left: clamp(.6rem, 2vw, 1.6rem); }
.mgcat__next { right: clamp(.6rem, 2vw, 1.6rem); }
.mgcat__nav:hover { background: rgba(255,255,255,.24); }
.mgcat__count { text-align: center; color: rgba(255,255,255,.72); font-size: .85rem; letter-spacing: .08em; margin-top: 1rem; }
/* filmstrip — every photo in the open room, the current one ringed in gold */
.mgcat__thumbs { display: flex; gap: .5rem; justify-content: flex-start; max-width: min(94vw, 1100px); margin: .8rem auto 0; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: .25rem; }
.mgcat__thumbs::-webkit-scrollbar { display: none; }
.mgcat__thumbs:empty { display: none; }
.mgcat__thumb { flex: 0 0 auto; width: clamp(58px, 6vw, 82px); 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); }
.mgcat__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.mgcat__thumb:hover { opacity: .8; }
.mgcat__thumb.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--gold); }
.mgcat__thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 600px) { .mgcat__bar { padding: 0; } .mgcat__nav { width: 40px; height: 40px; } .mgcat__stage { padding-inline: 3rem; } .mgcat__thumbs { display: none; } }

@media (max-width: 900px) {
   /* mobile: horizontal swipe instead of tilt */
   .mgal__track { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 1rem; padding-bottom: 1rem; scrollbar-width: none; }
   .mgal__track::-webkit-scrollbar { display: none; }
   .mgal__item { flex: 0 0 78%; width: auto; margin-left: 0; scroll-snap-align: center; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
   .mgal__item, .mgal__item img { transform: none !important; rotate: 0 !important; scale: 1 !important; transition: none; animation: none !important; }
}

/* ---------- JOURNAL ---------- */
.jr { background: var(--cream); }
.jr__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.jr__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); transition: transform .8s var(--ease); }
.jr__card a:hover img { transform: scale(1.04); }
.jr__card .jr__meta { margin: 1.1rem 0 .5rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tone-accent); }
.jr__card h3 { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; line-height: 1.25; }
.jr__card h3 a { background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--dur) var(--ease); }
.jr__card h3 a:hover { background-size: 100% 1px; }

/* ---------- FEATURE CAROUSEL (ported) ---------- */
.fc__card {
   position: relative; display: flex; flex-direction: column-reverse; overflow: hidden;
   border: 1px solid var(--line); border-radius: 2.5rem; background: var(--surface);
   box-shadow: var(--shadow); min-height: 600px;
}
.fc__list {
   position: relative; z-index: 3; width: 100%; min-height: 250px;
   display: flex; align-items: center; justify-content: center; overflow: hidden;
   padding: 2rem; background: var(--ink);
}
.fc__list::before, .fc__list::after { content: ""; position: absolute; left: 0; right: 0; height: 72px; z-index: 4; pointer-events: none; }
.fc__list::before { top: 0; background: linear-gradient(to bottom, var(--ink), transparent); }
.fc__list::after { bottom: 0; background: linear-gradient(to top, var(--ink), transparent); }
.fc__viewport { position: relative; width: 100%; height: 100%; min-height: 188px; }
.fc__chip {
   position: absolute; left: 50%; top: 50%; height: 65px;
   display: inline-flex; align-items: center; gap: .9rem; padding: 0 1.6rem;
   border-radius: 100px; border: 1px solid rgba(255,255,255,.2); background: transparent;
   color: rgba(255,255,255,.6); white-space: nowrap; cursor: pointer;
   transition: transform .7s var(--ease), opacity .5s var(--ease), background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.fc__chip i { font-size: 1.05rem; color: rgba(255,255,255,.4); transition: color .5s var(--ease); }
.fc__chip span { font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 500; }
.fc__chip:hover { color: #fff; border-color: rgba(255,255,255,.45); }
.fc__chip.is-active { background: var(--paper); color: var(--gold-deep); border-color: var(--paper); z-index: 10; }
.fc__chip.is-active i { color: var(--tone-accent); }

.fc__stage { flex: 1; position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; background: var(--cream); }
.fc__cards { position: relative; width: 100%; max-width: 400px; aspect-ratio: 4 / 5; }
.fc__cardimg {
   position: absolute; inset: 0; border-radius: 2rem; overflow: hidden;
   border: 8px solid var(--paper); background: var(--paper); box-shadow: var(--shadow);
   transform: scale(.7); opacity: 0;
   transition: transform .65s var(--ease), opacity .65s var(--ease);
}
.fc__cardimg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.75); transition: filter .7s var(--ease); }
.fc__cardimg.is-active { transform: translateX(0) scale(1) rotate(0); opacity: 1; z-index: 20; }
.fc__cardimg.is-active img { filter: none; }
.fc__cardimg.is-prev { transform: translateX(-90px) scale(.85) rotate(-3deg); opacity: .4; z-index: 10; }
.fc__cardimg.is-next { transform: translateX(90px) scale(.85) rotate(3deg); opacity: .4; z-index: 10; }
.fc__cardimg.is-hidden { opacity: 0; transform: scale(.7); z-index: 0; }
.fc__overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.6rem 1.8rem 1.8rem; display: flex; flex-direction: column; gap: .7rem; opacity: 0; transition: opacity .5s var(--ease); background: linear-gradient(to top, rgba(10,7,4,.92), rgba(10,7,4,.3) 55%, transparent); }
.fc__cardimg.is-active .fc__overlay { opacity: 1; }
.fc__badge { align-self: flex-start; background: var(--paper); color: var(--ink); padding: .35rem .9rem; border-radius: 100px; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.fc__overlay p { color: #fff; font-family: var(--serif); font-size: 1.4rem; line-height: 1.22; }
.fc__live { position: absolute; top: 1.4rem; left: 1.4rem; z-index: 2; display: flex; align-items: center; gap: .5rem; opacity: 0; transition: opacity .4s var(--ease); }
.fc__cardimg.is-active .fc__live { opacity: 1; }
.fc__live .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; }
.fc__live span { color: rgba(255,255,255,.85); font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; }

@media (min-width: 1024px) {
   .fc__card { flex-direction: row; border-radius: 3rem; min-height: 0; aspect-ratio: 16 / 9; }
   .fc__list { width: 42%; min-height: auto; }
   .fc__stage { min-height: auto; }
   .fc__viewport { min-height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
   .fc__chip, .fc__cardimg, .fc__cardimg img, .fc__overlay { transition: none; }
}

/* ---------- CTA ---------- */
.cta { background: var(--ink); color: var(--tone-fg); padding-block: clamp(4.5rem, 3rem + 6vw, 8rem); text-align: center; overflow: hidden; }
.cta__inner { position: relative; max-width: 720px; }
.cta__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem); line-height: 1.05; margin-top: .4rem; }
.cta__title em { font-style: italic; color: var(--tone-accent); }
.cta__lede { color: var(--tone-soft); font-size: var(--text-lede); margin: 1.4rem auto 2.4rem; max-width: 48ch; }
.cta .btn--solid { background: var(--gold); --fg: #fff; }
.cta .btn--solid:hover { background: var(--tone-fg); color: var(--tone-bg); }

/* ---------- PROCESS preview (home, compact 10-step) ---------- */
.psteps { background: var(--ink); color: var(--tone-fg); padding-block: var(--space); }
.psteps .eyebrow { color: var(--tone-accent); }
.psteps .eyebrow .idx { color: var(--tone-fg); }
.psteps__head { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.psteps__head .display { color: var(--tone-fg); }
.psteps__lede { color: var(--tone-soft); max-width: 46ch; }
.psteps__cta { margin-top: 1.5rem; }
.psteps__grid {
   margin-top: clamp(2.4rem, 1.6rem + 3vw, 4rem);
   display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
   background: var(--tone-line);
   border: 1px solid var(--tone-line);
   border-radius: var(--radius); overflow: hidden;
}
.psteps__grid li { display: flex; }
.pmini {
   flex: 1; display: flex; flex-direction: column; gap: 1rem;
   background: var(--ink); padding: 1.5rem 1.3rem 1.6rem; min-height: 172px;
   transition: background .4s var(--ease);
}
.pmini:hover, .pmini:focus-visible { background: #221c16; outline: none; }
.pmini__top { display: flex; align-items: center; justify-content: space-between; }
.pmini__k { font-family: var(--serif); font-style: italic; font-size: 1.55rem; color: var(--tone-accent); transition: transform .4s var(--ease); }
.pmini:hover .pmini__k { transform: translateY(-3px); }
.pmini__top i { color: rgba(255, 255, 255, .34); font-size: 1.05rem; transition: color .4s var(--ease); }
.pmini:hover .pmini__top i { color: var(--gold); }
.pmini__t { margin-top: auto; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; line-height: 1.22; }

/* ===========================================================
   PROCESS PREVIEW — interactive variants (A / B / C)
   Shared dark block; each is an alternative to .psteps.
   =========================================================== */
.pblock { background: var(--ink); color: var(--tone-fg); padding-block: var(--space); }
.pblock .eyebrow { color: var(--tone-accent); }
.pblock .eyebrow .idx { color: var(--tone-fg); }
.pblock .display { color: var(--tone-fg); }

/* ---- A · synced detail panel ---- */
.psync__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: clamp(1.8rem, 1rem + 2vw, 2.8rem); align-items: stretch; }
.psync__list { display: flex; flex-direction: column; }
.psync__step {
   width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.05rem .3rem; text-align: left;
   color: var(--tone-muted); border-top: 1px solid var(--tone-line);
   transition: color .35s var(--ease), padding-left .35s var(--ease);
}
.psync__list li:last-child .psync__step { border-bottom: 1px solid var(--tone-line); }
.psync__k { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--tone-accent); opacity: .6; min-width: 1.7em; transition: opacity .35s var(--ease); }
.psync__t { flex: 1; font-family: var(--serif); font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); font-weight: 600; }
.psync__step .bi { color: var(--tone-accent); opacity: 0; transform: translateX(-8px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.psync__step:hover, .psync__step:focus-visible { color: var(--tone-fg); outline: none; }
.psync__step.is-active { color: var(--tone-fg); padding-left: 1rem; }
.psync__step.is-active .psync__k { opacity: 1; }
.psync__step.is-active .bi { opacity: 1; transform: none; }

.psync__panel { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 440px; box-shadow: var(--shadow); }
.psync__media { position: absolute; inset: 0; }
.psync__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease), transform 1.1s var(--ease); }
.psync__img.is-active { opacity: 1; transform: scale(1); }
.psync__count { position: absolute; z-index: 2; top: 16px; right: 16px; font-family: var(--serif); letter-spacing: .08em; font-size: .95rem; background: rgba(20, 14, 8, .5); padding: .35rem .75rem; border-radius: 100px; backdrop-filter: blur(6px); }
.psync__count b { color: var(--tone-accent); }
.psync__body {
   position: absolute; inset: auto 0 0 0; z-index: 1; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
   background: linear-gradient(0deg, rgba(15, 10, 6, .94) 6%, rgba(15, 10, 6, .55) 55%, rgba(15, 10, 6, 0) 100%);
}
.psync__badge { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: var(--gold-tint); font-size: 1.25rem; margin-bottom: .9rem; }
.psync__htitle { font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 600; }
.psync__desc { color: rgba(255, 255, 255, .82); margin: .4rem 0 1rem; max-width: 46ch; }
.psync__bar { display: block; height: 3px; background: rgba(255, 255, 255, .18); border-radius: 3px; overflow: hidden; margin-bottom: 1.3rem; }
.psync__bar-fill { display: block; height: 100%; width: 10%; background: var(--gold); border-radius: 3px; transition: width .5s var(--ease); }

/* ---- B · expanding accordion ---- */
.pacc__list { max-width: 880px; margin: clamp(1.8rem, 1rem + 2vw, 2.8rem) auto 0; }
.pacc__item { border-top: 1px solid var(--tone-line); }
.pacc__item:last-child { border-bottom: 1px solid var(--tone-line); }
.pacc__head { width: 100%; display: flex; align-items: center; gap: 1rem; padding: clamp(1.1rem, .8rem + .8vw, 1.55rem) .2rem; text-align: left; color: var(--tone-fg); }
.pacc__k { font-family: var(--serif); font-style: italic; color: var(--tone-accent); font-size: 1.1rem; min-width: 1.9em; }
.pacc__t { flex: 1; font-family: var(--serif); font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); font-weight: 600; transition: color .3s var(--ease); }
.pacc__ico { font-size: 1.35rem; color: var(--tone-accent); transition: transform .35s var(--ease); }
.pacc__item.is-open .pacc__ico { transform: rotate(45deg); }
.pacc__item.is-open .pacc__t, .pacc__head:hover .pacc__t { color: var(--tone-accent); }
.pacc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.pacc__item.is-open .pacc__body { grid-template-rows: 1fr; }
.pacc__inner { overflow: hidden; }
.pacc__inner p { color: var(--tone-soft); max-width: 64ch; padding: 0 0 1.5rem 3rem; }

/* ---- C · auto-play story reel ---- */
.preel__stage { max-width: 780px; margin: clamp(1.8rem, 1rem + 2vw, 2.8rem) auto 0; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.preel__bars { display: flex; gap: 6px; width: 100%; }
.preel__seg { flex: 1; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .18); transition: background .3s var(--ease); }
.preel__seg.is-done { background: rgba(176, 138, 79, .55); }
.preel__seg.is-active { background: var(--gold); }
.preel__card { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.preel__media { position: absolute; inset: 0; }
.preel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .6s var(--ease), transform 1s var(--ease); }
.preel__img.is-active { opacity: 1; transform: scale(1); }
.preel__caption { position: absolute; inset: auto 0 0 0; z-index: 1; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); background: linear-gradient(0deg, rgba(15, 10, 6, .94) 8%, rgba(15, 10, 6, 0) 100%); }
.preel__k { font-family: var(--serif); font-style: italic; color: var(--tone-accent); font-size: 1.1rem; }
.preel__caption h3 { font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 600; margin: .1rem 0 .35rem; color: #fff; }
.preel__caption p { color: rgba(255, 255, 255, .82); max-width: 48ch; }
.preel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%; background: rgba(20, 14, 8, .5); border: 1px solid rgba(255, 255, 255, .25); color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px); transition: background .3s var(--ease); }
.preel__nav:hover { background: var(--gold); color: var(--ink); }
.preel__prev { left: 14px; }
.preel__next { right: 14px; }

/* ===========================================================
   FAQ — native <details> accordion (home section + faq.html)
   =========================================================== */
.faq__list { display: flex; flex-direction: column; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
   display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; cursor: pointer;
   list-style: none; padding: 1.3rem .2rem; color: var(--tone-fg);
   font-family: var(--serif); font-size: clamp(1.1rem, 1rem + .55vw, 1.4rem); font-weight: 600;
   transition: color .3s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__item:hover .faq__q, .faq__item[open] .faq__q { color: var(--tone-accent); }
.faq__ico { flex: none; font-size: 1.35rem; color: var(--tone-accent); transition: transform .35s var(--ease); }
.faq__item[open] .faq__ico { transform: rotate(45deg); }
.faq__a { padding: 0 2.4rem 1.4rem .2rem; }
.faq__a p { color: var(--tone-soft); max-width: 66ch; }

/* ── Home FAQ — split layout: centred head, card accordion beside a photo ──
   Everything below is scoped to .faq--split (home section only) so the shared
   .faq__item / .faq__q / .faq__a rules above keep driving the /faq page. */
.faq--split .section-head { margin-bottom: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem); }
.faq--split .section-head .lede { max-width: 58ch; margin: .9rem auto 0; color: var(--tone-soft); }

.faq__grid {
   display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
   gap: clamp(2rem, 1.2rem + 3.4vw, 4.6rem); align-items: stretch;
}
.faq__col { display: flex; flex-direction: column; min-width: 0; }

/* Rows read as hairline-separated until one opens (or is hovered), when it lifts
   into a bordered card. Hiding the NEXT row's top rule stops a stray line from
   sitting flush against the card's bottom edge. */
.faq--split .faq__item {
   border: 1px solid transparent; border-top-color: var(--line);
   border-radius: var(--radius-sm); padding-inline: clamp(.55rem, .2rem + 1vw, 1.1rem);
   transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.faq--split .faq__item:last-child { border-bottom-color: var(--line); }
.faq--split .faq__item[open],
.faq--split .faq__item:hover,
.faq--split .faq__item:focus-within {
   background: var(--surface); border-color: var(--gold);
   box-shadow: 0 20px 44px -34px rgba(40, 28, 12, .6);
}
.faq--split .faq__item[open] + .faq__item,
.faq--split .faq__item:hover + .faq__item,
.faq--split .faq__item:focus-within + .faq__item { border-top-color: transparent; }

.faq--split .faq__q { padding: 1.15rem .35rem; gap: 1rem; }
.faq--split .faq__ico {
   width: 38px; height: 38px; flex: none; border-radius: 50%;
   display: grid; place-items: center; font-size: 1.15rem; line-height: 1;
   background: var(--gold-tint); color: var(--gold-deep);
   transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.faq--split .faq__item[open] .faq__ico { background: var(--gold); color: #fff; }
.faq--split .faq__a { padding: 0 3rem .3rem .35rem; }
.faq--split .faq__item[open] .faq__a { padding-bottom: 1.25rem; }
.faq__cta { align-self: flex-start; margin-top: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); }

.faq__media {
   display: block; margin: 0; min-width: 0; align-self: stretch;
   min-height: clamp(320px, 44vh, 560px);
   border-radius: var(--radius); overflow: hidden;
   background: var(--cream); box-shadow: var(--shadow);
}
/* Crop above centre so the house — not the lawn — holds the tall column. */
.faq__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }

/* Ink background is a CMS option — keep the card readable when text flips light. */
.faq--split[data-bg="ink"] .faq__item { border-top-color: rgba(255, 255, 255, .16); }
.faq--split[data-bg="ink"] .faq__item:last-child { border-bottom-color: rgba(255, 255, 255, .16); }
.faq--split[data-bg="ink"] .faq__item[open],
.faq--split[data-bg="ink"] .faq__item:hover,
.faq--split[data-bg="ink"] .faq__item:focus-within {
   background: rgba(255, 255, 255, .06); border-color: var(--gold); box-shadow: none;
}
.faq--split[data-bg="ink"] .faq__ico { background: rgba(233, 220, 195, .16); color: var(--gold-tint); }

@media (max-width: 980px) {
   .faq__grid { grid-template-columns: 1fr; gap: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); }
   .faq__media { order: -1; align-self: auto; min-height: 0; aspect-ratio: 16 / 10; }
   .faq__cta { align-self: stretch; justify-content: center; }
}

/* faq.html — grouped categories */
.faqpage { max-width: 840px; margin-inline: auto; }
.faqpage__cat { font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.85rem); font-weight: 600; color: var(--tone-fg); margin: clamp(2rem, 1.4rem + 2vw, 3.2rem) 0 .3rem; }
.faqpage__cat:first-child { margin-top: 0; }

/* ===========================================================
   PORTFOLIO — filterable gallery (portfolio.html)
   =========================================================== */
.pf__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; margin: clamp(1.6rem, 1rem + 2vw, 2.6rem) 0 0; }
.pf__filter { border: 1px solid var(--line); background: #fff; color: var(--ink-soft); padding: .55rem 1.25rem; border-radius: 100px; font-size: .82rem; letter-spacing: .03em; font-weight: 600; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.pf__filter:hover { border-color: var(--gold); color: var(--tone-fg); }
.pf__filter.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pf__count { width: 100%; text-align: center; color: var(--tone-muted); font-size: .82rem; margin-bottom: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); }

.pf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(230px, 30vw, 320px), 1fr)); gap: clamp(.8rem, 1.4vw, 1.3rem); margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }
.pf__item { position: relative; margin: 0; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3.2; cursor: pointer; background: var(--cream); box-shadow: 0 16px 36px -30px rgba(40, 28, 12, .5); }
.pf__item.is-hidden { display: none; }
.pf__item.is-in { animation: pfIn .45s var(--ease) both; }
.pf__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pf__item:hover img, .pf__item:focus-visible img { transform: scale(1.07); }
.pf__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pf__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 10, 6, .82) 0%, rgba(15, 10, 6, .1) 45%, rgba(15, 10, 6, 0) 70%); }
.pf__meta { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; color: #fff; }
.pf__tag { display: inline-block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--tone-accent); margin-bottom: .25rem; }
.pf__name { display: block; font-family: var(--serif); font-size: 1.18rem; font-weight: 600; line-height: 1.15; }
.pf__place { font-size: .8rem; color: rgba(255, 255, 255, .82); }
.pf__zoom { position: absolute; top: .8rem; right: .8rem; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.85); transition: opacity .4s var(--ease), transform .4s var(--ease), background .3s var(--ease); }
.pf__item:hover .pf__zoom, .pf__item:focus-visible .pf__zoom { opacity: 1; transform: none; }
@keyframes pfIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ===========================================================
   TWO-COLUMN ORDER — the CMS "swap columns" / "reverse on phones"
   options (src/blocks/home.ts → columnFields). Sections carry
   data-cols-swap / data-cols-reverse; the grid classes below are
   grouped by the width at which each one collapses to one column,
   because swapping left/right only means anything while there ARE
   two columns, and reversing the stack only means anything once
   there are not.

   `:first-child:nth-last-child(2)` is a guard: the rules apply
   only where the grid really holds exactly two children, so a
   three-up variant of any of these can never be scrambled.
   =========================================================== */
@media (min-width: 761px) {
   [data-cols-swap] :where(.about__grid, .comm__grid, .feature__grid) > :first-child:nth-last-child(2) { order: 2; }
   [data-cols-swap] :where(.about__grid, .comm__grid, .feature__grid) > :first-child:nth-last-child(2) ~ * { order: 1; }
}
@media (max-width: 760px) {
   [data-cols-reverse] :where(.about__grid, .comm__grid, .feature__grid) > :first-child:nth-last-child(2) { order: 2; }
   [data-cols-reverse] :where(.about__grid, .comm__grid, .feature__grid) > :first-child:nth-last-child(2) ~ * { order: 1; }
}

@media (min-width: 901px) {
   [data-cols-swap] .cintro__grid > :first-child:nth-last-child(2) { order: 2; }
   [data-cols-swap] .cintro__grid > :first-child:nth-last-child(2) ~ * { order: 1; }
}
@media (max-width: 900px) {
   [data-cols-reverse] .cintro__grid > :first-child:nth-last-child(2) { order: 2; }
   [data-cols-reverse] .cintro__grid > :first-child:nth-last-child(2) ~ * { order: 1; }
}

@media (min-width: 981px) {
   [data-cols-swap] :where(.faq__grid, .cfeature__grid) > :first-child:nth-last-child(2) { order: 2; }
   [data-cols-swap] :where(.faq__grid, .cfeature__grid) > :first-child:nth-last-child(2) ~ * { order: 1; }
}
@media (max-width: 980px) {
   [data-cols-reverse] .cfeature__grid > :first-child:nth-last-child(2) { order: 2; }
   [data-cols-reverse] .cfeature__grid > :first-child:nth-last-child(2) ~ * { order: 1; }
   /* The FAQ is the one section that already stacks photo-first on phones
      (.faq__media { order: -1 } below), so reversing it means undoing that and
      letting the questions lead — not pushing the photo down twice. */
   [data-cols-reverse] .faq__grid > .faq__media { order: 1; }
}

@media (min-width: 1025px) {
   [data-cols-swap] :where(.proc__grid, .contact__grid, .pd__lead, .whyus__inner) > :first-child:nth-last-child(2) { order: 2; }
   [data-cols-swap] :where(.proc__grid, .contact__grid, .pd__lead, .whyus__inner) > :first-child:nth-last-child(2) ~ * { order: 1; }
}
@media (max-width: 1024px) {
   [data-cols-reverse] :where(.proc__grid, .contact__grid, .pd__lead, .whyus__inner) > :first-child:nth-last-child(2) { order: 2; }
   [data-cols-reverse] :where(.proc__grid, .contact__grid, .pd__lead, .whyus__inner) > :first-child:nth-last-child(2) ~ * { order: 1; }
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1024px) {
   .nav__links { display: none; }
   .nav__burger { display: block; }
   .nav__actions .btn--ghost { display: none; }
   .why__grid { grid-template-columns: repeat(2, 1fr); }
   .jr__grid { grid-template-columns: 1fr 1fr; }
   .proc__sticky { height: auto; position: static; margin-bottom: 2.5rem; }
   .proc__visual { aspect-ratio: 16 / 10; }
   .proc__grid { grid-template-columns: 1fr; }
   .psteps__head { grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
}

@media (max-width: 760px) {
   .about__grid, .feature__grid, .comm__grid { grid-template-columns: 1fr; }
   .ft__grid { grid-template-columns: 1fr 1fr; gap: 2.4rem 2rem; }
   .feature__grid .feature__media { order: -1; }
   .comm__media { order: -1; }
   .stats__row { grid-template-columns: 1fr 1fr; gap: 2rem 0; }
   .stat:nth-child(odd)::before { display: none; }
   .why__grid { grid-template-columns: 1fr; }
   .jr__grid { grid-template-columns: 1fr; }
   .about__badge { left: auto; right: 16px; bottom: -18px; }
   .gal__bento { grid-template-columns: 1fr 1fr; }
   .gal__item--wide { grid-column: span 2; }
   .gal__item--tall { grid-row: auto; aspect-ratio: 1; }
   .section-head--row { flex-direction: column; align-items: flex-start; }
   .hero__facts { flex-wrap: wrap; gap: 1.2rem 2rem; }
   .hero { min-height: 92svh; }
   .psteps__grid { grid-template-columns: repeat(2, 1fr); }
   .pmini { min-height: 150px; }
   .psync__grid { grid-template-columns: 1fr; }
   .psync__panel { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
   .pacc__inner p { padding-left: 0; }
}

@media (max-width: 460px) {
   .gal__bento { grid-template-columns: 1fr; }
   .ft__grid { grid-template-columns: 1fr; }
   .gal__item--wide { grid-column: auto; aspect-ratio: 1.4 / 1; }
   .hero__foot { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
   .hero__scroll { display: none; }
}


/* ===========================================================
   MEGA MENU (desktop) — Communities & About
   =========================================================== */
.nav__has-mega { position: relative; }
.nav__mega {
   position: absolute; top: 100%; left: 0; right: auto; translate: none; margin-top: .7rem;
   background: var(--paper); color: var(--ink);
   border: 1px solid var(--line); border-radius: var(--radius);
   box-shadow: 0 30px 64px -34px rgba(15, 10, 5, .5);
   padding: 1.5rem; width: 620px; max-width: 92vw;
   opacity: 0; visibility: hidden; transform: translateY(8px);
   transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
   z-index: 30;
}
.nav__mega--end { left: auto; right: 0; }
.nav__mega::before { content: ""; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem; }
.nav__has-sub:hover .nav__mega, .nav__has-sub:focus-within .nav__mega { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__mega-grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 1.2rem 2.2rem; align-items: start; }
.nav__mega-h { font-size: var(--text-eyebrow); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--tone-muted); margin: 0 0 .55rem; }
.nav__mega-col a { display: block; padding: .42rem .25rem; border-radius: 8px; font-family: var(--serif); font-size: 1.04rem; font-weight: 600; color: var(--tone-fg); opacity: 1; white-space: nowrap; transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease); }
.nav__mega-col a::after { display: none; }
.nav__mega-col a:hover { color: var(--tone-accent); padding-left: .55rem; }
.nav__mega-feat { position: relative; display: block; aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--radius-sm); overflow: hidden; }
.nav__mega-feat::after { display: none; }
.nav__mega-feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.nav__mega-feat:hover img { transform: scale(1.06); }
.nav__mega-feat-label { position: absolute; inset: auto 0 0 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .8rem 1rem; color: #fff; font-weight: 600; font-size: .92rem; background: linear-gradient(0deg, rgba(15,10,6,.88), rgba(15,10,6,0)); }
.nav__mega-feat-label > span { white-space: nowrap; }
@media (max-width: 1024px) { .nav__mega { display: none; } }

/* ----- Rich mega items: icon-box + label + description (demo style, themed) ----- */
.nav__mega--rich { width: 660px; padding: 1.4rem; }
.nav__mega-grid--rich { grid-template-columns: 1fr 1fr; gap: 1.5rem 2.4rem; }
.nav__mega-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.nav__mega-item {
   display: flex; align-items: flex-start; gap: .8rem; opacity: 1;
   padding: .5rem .55rem; border-radius: var(--radius-sm);
   transition: background var(--dur) var(--ease);
}
.nav__mega-item::after { display: none; }
.nav__mega-item:hover { background: var(--cream); }
.nav__mega-ico {
   flex: none; display: grid; place-items: center;
   width: 38px; height: 38px; border-radius: 10px;
   border: 1px solid var(--gold-tint); color: var(--tone-accent); font-size: 1.05rem;
   transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__mega-item:hover .nav__mega-ico { background: var(--ink); color: #fff; border-color: var(--ink); }
.nav__mega-txt { display: grid; gap: .08rem; line-height: 1.25; }
.nav__mega-label { font-weight: 600; font-size: .95rem; color: var(--tone-fg); white-space: nowrap; }
.nav__mega-desc { font-size: .78rem; color: var(--tone-muted); transition: color var(--dur) var(--ease); }
.nav__mega-item:hover .nav__mega-desc { color: var(--tone-soft); }

/* ----- Morphing shared mega panel + sliding hover pill (index nav) ----- */
.nav__links--morph { position: relative; gap: .25rem; }
.nav__links--morph .nav__link { position: relative; z-index: 1; padding: .45rem .9rem; }
.nav__links--morph .nav__link::after { display: none; }
.nav__link--mega .nav__caret { transition: transform var(--dur) var(--ease); }
.nav__link--mega[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__pill {
   position: absolute; top: 50%; left: 0; height: 2.15rem; width: 0; z-index: 0;
   border-radius: 999px; opacity: 0; pointer-events: none;
   transform: translate3d(0, -50%, 0);
   transition: transform .4s var(--ease), width .4s var(--ease), opacity .25s var(--ease);
}
.nav.is-solid .nav__pill { background: rgba(27, 23, 20, .06); }
.nav:not(.is-solid) .nav__pill { background: rgba(255, 255, 255, .16); }

.nav__mega-wrap {
   position: absolute; top: 100%; left: 0; margin-top: .7rem;
   width: 660px; max-width: 92vw; height: 0; overflow: hidden;
   background: var(--paper); color: var(--ink);
   border: 1px solid var(--line); border-radius: var(--radius);
   box-shadow: 0 30px 64px -34px rgba(15, 10, 5, .5);
   opacity: 0; visibility: hidden; pointer-events: none;
   transform: translate3d(0, 0, 0);
   transition: transform .45s var(--ease), height .45s var(--ease), opacity .3s var(--ease), visibility .45s;
   z-index: 30;
}
.nav__mega-wrap.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.nav__mega-panel {
   position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box; padding: 1.4rem;
   opacity: 0; visibility: hidden; transform: translateY(8px);
   transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
}
.nav__mega-panel.is-active { opacity: 1; visibility: visible; transform: none; }

@media (prefers-reduced-motion: reduce) {
   .nav__pill, .nav__mega-wrap, .nav__mega-panel { transition-duration: .01ms; }
}

/* ----- Mobile 3-level drilldown nav (index drawer) ----- */
.mnav { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; width: 100%; }
.mnav__viewport { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.mnav__panel {
   position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
   display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding-right: .5rem;
   transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none;
   transition: transform .42s var(--ease), opacity .34s var(--ease), visibility .42s;
}
.mnav__panel.is-active { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
.mnav__panel.is-past { transform: translateX(-100%); opacity: 0; visibility: hidden; }

.mnav__item {
   width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
   font-family: var(--serif); font-weight: 500; line-height: 1.15;
   font-size: clamp(1.35rem, 5.2vw, 2rem);
   padding: .5rem 0; color: #fff; background: none; border: 0; text-align: left; cursor: pointer;
   transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.mnav__item i { font-size: .72em; color: var(--gold-tint); transition: transform var(--dur) var(--ease); }
.mnav__item:hover, .mnav__item:focus-visible { color: var(--gold-tint); padding-left: .35rem; }
.mnav__item--parent:hover i, .mnav__item--all:hover i { transform: translateX(4px); }
.mnav__item--all { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--gold-tint); margin-top: .7rem; }

.mnav__back {
   display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; cursor: pointer;
   font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
   color: rgba(255, 255, 255, .55); padding: .1rem 0; margin-bottom: .3rem;
   transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.mnav__back:hover, .mnav__back:focus-visible { color: #fff; gap: .65rem; }
.mnav__title { font-family: var(--serif); font-size: clamp(1.7rem, 7vw, 2.4rem); color: #fff; margin: 0 0 .5rem; }
.mnav__group { margin: 1rem 0 0; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-tint); }

/* staggered entrance each time a panel becomes active (and on every open) */
body.menu-open .mnav__panel.is-active > * { opacity: 0; transform: translateY(14px); animation: mItemIn .5s var(--ease) forwards; }
body.menu-open .mnav__panel.is-active > *:nth-child(1) { animation-delay: .06s; }
body.menu-open .mnav__panel.is-active > *:nth-child(2) { animation-delay: .11s; }
body.menu-open .mnav__panel.is-active > *:nth-child(3) { animation-delay: .16s; }
body.menu-open .mnav__panel.is-active > *:nth-child(4) { animation-delay: .21s; }
body.menu-open .mnav__panel.is-active > *:nth-child(5) { animation-delay: .26s; }
body.menu-open .mnav__panel.is-active > *:nth-child(6) { animation-delay: .31s; }
body.menu-open .mnav__panel.is-active > *:nth-child(7) { animation-delay: .36s; }
body.menu-open .mnav__panel.is-active > *:nth-child(8) { animation-delay: .41s; }
body.menu-open .mnav__panel.is-active > *:nth-child(n+9) { animation-delay: .46s; }
@keyframes mItemIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
   .mnav__panel { transition-duration: .01ms; }
   body.menu-open .mnav__panel.is-active > * { animation-duration: .01ms; }
}

/* ----- swipe-to-go-back: live drag + discoverability affordances ----- */
.mnav__viewport.mnav--dragging .mnav__panel { transition: none; }
.mnav__viewport.mnav--dragging .mnav__panel.is-past,
.mnav__viewport.mnav--settling .mnav__panel.is-past { visibility: visible; opacity: 1; }

.mnav__grab {
   position: absolute; left: 0; top: 50%; z-index: 4;
   width: 4px; height: 48px; border-radius: 0 6px 6px 0;
   background: var(--gold-tint); opacity: 0; pointer-events: none;
   transform: translateY(-50%); transition: opacity .4s var(--ease);
}
.mnav__viewport.is-sub .mnav__grab { opacity: .5; animation: mGrabPulse 2.4s var(--ease) infinite; }
.mnav__viewport.mnav--dragging .mnav__grab { opacity: 0; animation: none; }
/* Sub-panels (mega menu): indent content so it clears the swipe-back grab bar. */
.mnav__viewport.is-sub .mnav__panel { padding-left: 1.1rem; }
@keyframes mGrabPulse {
   0%, 100% { transform: translateY(-50%) translateX(0); opacity: .3; }
   50%      { transform: translateY(-50%) translateX(6px); opacity: .62; }
}

.mnav__hint {
   position: absolute; left: 50%; bottom: 1.5rem; z-index: 5;
   display: inline-flex; align-items: center; gap: .45rem;
   font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
   color: var(--ink); background: var(--gold-tint);
   padding: .55rem .9rem; border-radius: 999px; white-space: nowrap;
   box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .55);
   opacity: 0; visibility: hidden; pointer-events: none;
   transform: translate(-50%, 10px);
   transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.mnav__hint.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mnav__hint i { animation: mHintArrow 1s var(--ease) infinite; }
@keyframes mHintArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* one-time coach: nudge active panel right, reveal parent peeking from the left */
.mnav__viewport.is-hint .mnav__panel.is-active { animation: mHintActive 1.2s var(--ease) 2 both; }
.mnav__viewport.is-hint .mnav__panel.is-past { visibility: visible; opacity: 1; animation: mHintPast 1.2s var(--ease) 2 both; }
@keyframes mHintActive { 0%, 100% { transform: none; } 45% { transform: translateX(42px); } }
@keyframes mHintPast { 0%, 100% { transform: translateX(-100%); } 45% { transform: translateX(calc(-100% + 42px)); } }

@media (prefers-reduced-motion: reduce) {
   .mnav__grab, .mnav__hint i,
   .mnav__viewport.is-hint .mnav__panel.is-active,
   .mnav__viewport.is-hint .mnav__panel.is-past { animation: none; }
}

/* portfolio — top-level category tabs (Exterior / Interior Design / Commercial) sit above the room sub-filters */
.pf__cats { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: clamp(1.2rem, 1rem + 2vw, 2.8rem); margin: clamp(1.4rem, 1rem + 2vw, 2.2rem) 0 0; border-bottom: 1px solid var(--line); }
.pf__cat { position: relative; background: none; border: 0; cursor: pointer; padding: .2rem .1rem 1rem; font-family: var(--serif); font-size: clamp(1.1rem, .95rem + .7vw, 1.6rem); line-height: 1; color: var(--muted); transition: color .3s var(--ease); }
.pf__cat::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform .35s var(--ease); }
.pf__cat:hover, .pf__cat.is-active { color: var(--tone-fg); }
.pf__cat.is-active::after { transform: scaleX(1); }
.pf__bar[hidden] { display: none; }
.pf__empty { text-align: center; color: var(--tone-muted); font-family: var(--serif); font-size: 1.15rem; padding: clamp(2.5rem, 2rem + 4vw, 5rem) 1rem; }
.pf__empty[hidden] { display: none; }

/* Communities — uniform, clickable logo grid (index.html §03). Fixed-shape tiles;
   any logo is contained inside; grayscale-at-rest unifies mismatched marks. */
.clogos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(.9rem, .6rem + 1vw, 1.5rem); margin-top: clamp(2rem, 1.4rem + 2vw, 3.2rem); }
/* Tight padding on purpose: the mark is the whole point of this tile, so it gets the box
   and keeps only enough margin not to crowd the 1px rule. aspect-ratio holds the card
   size steady — only the mark inside it grows. */
/* min-height:0 keeps aspect-ratio in charge of the card. The tile is a flex item inside
   .ccard (and a grid item inside .clogos), so its automatic minimum size is its content
   height — a logo taller than the 5:3 box would push the CARD taller and the row would
   come out ragged. Measured on /communities: without it the 1500x900 mark gave a 1.557
   card next to three 1.667 ones. */
.clogo { display: grid; place-items: center; aspect-ratio: 5 / 3; min-height: 0; padding: clamp(.5rem, .35rem + .6vw, .9rem); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 14px 30px -26px rgba(40, 28, 12, .5); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
/* max-* at 100% with width/height auto: each mark grows until whichever axis runs out
   first, and stops at its own resolution rather than being stretched past its pixels —
   several of these logos are only ~234px wide.
   min-width/min-height:0 is load-bearing, not tidying. The img is a grid item, so its
   automatic minimum size is its intrinsic size, and that beats the percentage max-* —
   a logo taller than the tile's 5:3 content box would stretch the CARD instead of being
   scaled down, and every card in the row would then be a different height. Measured with
   four logos (234x109, 1500x900, 400x600, 500x500): without this the cards come out at
   aspect 1.667 / 1.566 / 0.689 / 1.0, with it all four are 1.667. */
.clogo img { max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .82; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.clogo:hover, .clogo:focus-visible { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 22px 42px -24px rgba(40, 28, 12, .55); outline: none; }
.clogo:hover img, .clogo:focus-visible img { filter: grayscale(0); opacity: 1; }

/* Communities page — logo cards with caption below (reuses the .clogo tile) */
/* Flex (not auto-fit grid) so fewer than 4 cards keep their size and centre
   instead of stretching to fill the row. 4 per row on desktop (basis 25%),
   wraps to a centred next line beyond that, collapses on narrow screens. */
.cgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.1rem, .7rem + 1.5vw, 2rem); margin-top: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.ccard { display: flex; flex-direction: column; gap: .9rem; flex: 0 1 calc(25% - 1.6rem); min-width: 200px; }
.ccard[hidden] { display: none; } /* let initFilter's card.hidden actually hide (author display:flex beats UA [hidden]) */
.ccard .clogo { width: 100%; }
.ccard:hover .clogo, .ccard:focus-visible .clogo { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 22px 42px -24px rgba(40, 28, 12, .55); }
.ccard:hover .clogo img, .ccard:focus-visible .clogo img { filter: grayscale(0); opacity: 1; }
.ccard:focus-visible { outline: none; }
.ccard__body { display: flex; flex-direction: column; gap: .2rem; padding: 0 .2rem; }
.ccard__name { font-family: var(--serif); font-size: 1.15rem; color: var(--tone-fg); }
.ccard__meta { font-size: .86rem; color: var(--tone-soft); }
.ccard__loc { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--tone-muted); margin-top: .05rem; }

/* ── SECTION TONE ──────────────────────────────────────────────────
   Driven by the block "Background" select (data-bg). No data-bg = the
   section keeps its own CSS background. section[data-bg] (type+attr)
   outranks single-class section rules, so this reliably overrides.

   Each choice sets both the background AND the tone tokens (--tone-fg /
   -soft / -muted / -line, declared in home.css), which is what every
   piece of section copy is coloured with. Flip a band either way and the
   text follows — no per-block rules, no whitelist to keep in sync.
   Heroes are excluded: their copy sits on a photo, not on the section. */
section[data-bg="paper"] { background: var(--paper); --tone-bg: var(--paper); }
section[data-bg="cream"] { background: var(--cream); --tone-bg: var(--cream); }
section[data-bg="white"] { background: var(--surface); --tone-bg: var(--surface); }
section[data-bg="ink"]   { background: var(--ink); --tone-bg: var(--ink); }

section:is([data-bg="paper"], [data-bg="cream"], [data-bg="white"]):not(.hero, .phero, .chero, .shov) {
   --tone-fg: var(--ink);
   --tone-soft: var(--ink-soft);
   --tone-muted: var(--muted);
   --tone-line: var(--line);
   --tone-accent: var(--gold-deep);
   color: var(--tone-fg);
}
section[data-bg="ink"]:not(.hero, .phero, .chero, .shov) {
   --tone-fg: var(--paper);
   --tone-soft: rgba(255, 255, 255, .78);
   --tone-muted: rgba(255, 255, 255, .6);
   --tone-line: rgba(255, 255, 255, .16);
   --tone-accent: var(--gold-tint);
   color: var(--tone-fg);
}
section[data-bg="ink"] .eyebrow .idx { color: var(--gold); }

/* Sections that ship dark carry the dark tone by default; a light data-bg
   above outranks this and hands them the light one. The footer is here too —
   it is dark, and its links read from the same tokens. */
.stats, .proc, .cta, .psteps, .pblock, .contact--ink, .wb, .ft {
   --tone-bg: var(--ink);
   --tone-fg: #fff;
   --tone-soft: rgba(255, 255, 255, .78);
   --tone-muted: rgba(255, 255, 255, .6);
   --tone-line: rgba(255, 255, 255, .14);
   --tone-accent: var(--gold-tint);
}

/* Anything painting its own surface keeps its own tone whatever the section
   around it is set to — a white card on an ink band still needs dark copy, an
   ink tile on a paper band still needs light copy. A declaration on the element
   itself beats the inherited one, so no specificity juggling is needed here.
   Open FAQ items are deliberately absent: they repaint translucent-dark on an
   ink band, so they have to keep inheriting the section tone.

   Panels also set `color`, so children with no colour of their own inherit the
   panel's tone rather than the section's. */
.why__card, .tagpop__card, .fc__card, .fc__stage, .pf__item, .clogo, .value,
.bio__card, .form, .chero__panel, .home--model, .fdrawer__panel, .shov__config,
.pstep__card, .whyus__card, .lotmap__frame, .lotmap__filter, .pscroll__slot,
.nav__mega, .nav__mega-wrap, .nav__sub {
   --tone-bg: var(--surface);
   --tone-fg: var(--ink);
   --tone-soft: var(--ink-soft);
   --tone-muted: var(--muted);
   --tone-line: var(--line);
   --tone-accent: var(--gold-deep);
   color: var(--tone-fg);
}

/* Light chips, tabs and inputs — same tone, but they already colour their own
   text, so no `color` here or it would flatten their muted states. */
.fc__badge, .feature__pill, .comm__tags > span, .pf__filter, .faq__media,
.chero__tags > span.is-active, .partners__row .chip, .proj__status, .filter__tab,
.field input, .field select, .field textarea, .lotmap__tool, .legend__item,
.legend__count, .lotmap-lock__msg, .lst__scope, .lst__field select, .home__status,
.fdrawer select, .cfeature__nav button, .sh-field select, .gal__tour, .pscroll__tag {
   --tone-bg: var(--surface);
   --tone-fg: var(--ink);
   --tone-soft: var(--ink-soft);
   --tone-muted: var(--muted);
   --tone-line: var(--line);
   --tone-accent: var(--gold-deep);
}

/* The mirror image: panels and overlays that paint dark inside a light band,
   plus the heroes — their copy sits on a photo, so it stays light whatever the
   Background select says (which is why the tone rules above skip them). */
.hero, .phero, .chero, .shov,
.home--tile, .fc__list, .pmini, .about__badge, .psync__body, .preel__caption,
.wb__body, .pf__meta, .cfeature__cap, .gal__more, .mgcat {
   --tone-bg: var(--ink);
   --tone-fg: #fff;
   --tone-soft: rgba(255, 255, 255, .78);
   --tone-muted: rgba(255, 255, 255, .6);
   --tone-line: rgba(255, 255, 255, .14);
   --tone-accent: var(--gold-tint);
   color: var(--tone-fg);
}

/* Deep-link anchor offset — keep anchored sections below the fixed header. */
section[id], .section[id] { scroll-margin-top: 96px; }

/* ---- Site-wide page preloader: covers page until window load, then fades ---- */
#preloader {
   position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center;
   background: var(--ink, #1b1714);
   transition: opacity .7s var(--ease, ease), visibility .7s var(--ease, ease);
}
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; animation: preIn .6s ease both; }
.preloader__logo { width: clamp(118px, 30vw, 168px); height: auto; opacity: .96; }
.preloader__bar { position: relative; width: 150px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.preloader__fill { position: absolute; inset: 0; width: 42%; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold-tint, #c9a86a), transparent); animation: preFill 1.15s ease-in-out infinite; }
@keyframes preFill { 0% { transform: translateX(-140%); } 100% { transform: translateX(360%); } }
@keyframes preIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html.is-loaded #preloader { opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.is-loaded) body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { #preloader { transition: none; } .preloader__fill, .preloader__inner { animation: none; } }