/* Landing-page-experience layer for ATS Kingston Heath and Pious Orchards only: the approved reference
   Kingston v9 / Pious v2 builds, on top of the shared CRO template. Loaded after cro-project.css
   by those two pages; the other CRO pages never load it, so they stay byte-identical. */
picture { display: contents; } /* AVIF/WebP wrapper adds no box: every image keeps its exact layout */
@media (max-width: 374px) { .btn:not(.btn--pill) { padding: 0 14px; letter-spacing: .05em; } } /* keeps "Get Current Prices & Availability" on one line at 360px */
.top .btn--pill { position: relative; } .top .btn--pill::before { content: ""; position: absolute; inset: -4px 0; } /* 44px tap target around the 36px pill, same look */
.hero__sub { margin-top: 6px; font-size: 17px; line-height: 1.35; color: #fff; }
.hero__price { display: grid; gap: 4px; margin-bottom: 16px; padding-block: 10px; border-block: 1px solid rgba(255, 255, 255, .14); line-height: 1.35; color: rgba(255, 255, 255, .86); }
.hero__price b { font: 600 19px/1.2 var(--serif); color: var(--gold-hi); }

/* quick navigation: one tap to the panels buyers look for (existing anchors; the sitelink hash handler opens and lands them) */
.qnav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 12px 12px; background: var(--ink); border-top: 1px solid rgba(220, 189, 127, .18); }
.qnav a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 4px 2px; border: 1px solid rgba(220, 189, 127, .45); border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1.25; letter-spacing: .08em; text-align: center; text-transform: uppercase; text-decoration: none; color: var(--ivory); }
.qnav a:active { background: rgba(220, 189, 127, .14); }

/* ATS / Noida context: answers the broader "ATS projects in Noida" search in a few lines; the project stays the subject */
.context { padding-top: 12px; padding-bottom: 12px; }
.context h2 { font-size: 20px; }
.context p { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.context .context__facts { font-size: 13px; font-weight: 600; color: var(--text); }
.context__facts span { white-space: nowrap; } /* the line wraps between facts, never inside one */


@media (max-width: 899px) { .rail li + li { content-visibility: auto; contain-intrinsic-size: auto calc((78vw - 25px) * .75 + 27.5px); } } /* rail items 2+ sit off-screen to the right: they render (and fetch their image) as they near the viewport, not in the first load; placeholder = the item's exact height (4:3 image + one caption line) */
.film-block { scroll-margin-top: calc(var(--head) + 8px); } /* quick-nav targets land below the sticky header */

/* Pious: two landscape click-to-load players (FOP: the Construction Update only), run by /assets/js/cro-video.js.
   The box is the sources' 16:9 (1920x1080), shared by poster and video, so Play never shifts the layout. */
.pv { position: relative; width: 100%; max-width: 728px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--ink); }
.pv__play { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.pv img, .pv video { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-touch-callout: none; }
.pv__play:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: -3px; }
/* centred play button with a slow gold ring pulse; the poster's own logos and captions stay uncovered */
.pv__btn { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--ink); box-shadow: 0 0 0 6px rgba(220, 189, 127, .24), 0 10px 28px rgba(0, 0, 0, .45); transition: transform .2s var(--ease); }
.pv__btn svg { margin-left: 4px; }
.pv__btn::after { content: ""; position: absolute; inset: -6px; border: 1.5px solid rgba(220, 189, 127, .75); border-radius: 50%; animation: pv-pulse 2.6s cubic-bezier(.2, .6, .3, 1) infinite; }
@keyframes pv-pulse { 0% { transform: scale(.94); opacity: .85; } 70%, 100% { transform: scale(1.38); opacity: 0; } }
.pv__play:active .pv__btn { transform: scale(.94); }
@media (hover: hover) { .pv__play:hover .pv__btn { transform: scale(1.07); } }
.pv__cue { margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a6a2e; }
.proof__h3 { margin-top: 28px; font-size: 20px; }
/* construction update: an editorial section just before the footer */
.update { padding: 36px 0 40px; background: var(--ivory); }
.update__h { padding: 2px 0 2px 12px; border-left: 3px solid var(--gold); font-size: 22px; }
.update__sub { margin-top: 10px; font-size: 14px; color: var(--muted); }
.update .fine { margin-top: 12px; }
/* the sticky CTA steps aside while a video plays on screen (cro-video.js), so it never covers the native controls */
.dock.is-video, .dock.is-video.is-on { transform: translateY(110%); visibility: hidden; transition: transform .25s var(--ease), visibility 0s .25s; }

.plan__view { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.plan__ask { min-height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
html:has(dialog[open]) .dock { visibility: hidden; } /* never peeks out while the enquiry sheet is open */
.sheet__x { top: 8px; right: 8px; width: 44px; height: 44px; }

/* Pious Orchards (body.lpe-pious): the ATS HomeKraft logo sits above the project name; the taller title gets a scrim */
body.lpe-pious .brand { display: grid; justify-items: start; gap: 3px; text-decoration: none; min-width: 0; }
body.lpe-pious .brand img { width: 88px; height: auto; } /* official ATS HomeKraft logo (320x84) above the project name */
body.lpe-pious .brand span { font: 600 16px/1.1 var(--serif); white-space: nowrap; }
body.lpe-pious .hero__title::before { content: ""; position: absolute; z-index: -1; inset: -40px -16px -6px; background: linear-gradient(180deg, rgba(16, 20, 15, 0), rgba(16, 20, 15, .7) 40px, rgba(16, 20, 15, .78)); pointer-events: none; } /* the taller brand + location title sits on bright sky: a scrim that follows the title keeps every line >= 4.5:1 */
body.lpe-pious .sheet__logo { width: 112px; margin: 2px auto 8px; border-radius: 4px; background: #fff; padding: 3px 5px; }

@media (min-width: 900px) {
  .qnav { grid-template-columns: repeat(4, 200px); justify-content: center; }
}