/* Finishing layer: stacked sheets, a settling opening and arrivals that end. */
:root{--ease-out:cubic-bezier(.2,.7,.2,1)}

/* Lenis smooth wheel scrolling (vendor/lenis, MIT); only active on desktop pointers. */
html.lenis,html.lenis body{height:auto}.lenis.lenis-stopped{overflow:clip}.lenis [data-lenis-prevent]{overscroll-behavior:contain}

/* The closing call spans the full width so the last sheet's shadow never frames it. */
.catalogue-close{box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)}

/* Each property arrives as a sheet laid over the previous one. */
@media(min-height:480px){
  .motion-ready:not(.reduced-motion) .listing-section{border-radius:26px 26px 0 0;border-top-color:transparent;box-shadow:inset 0 1px 0 #ffffffa6,0 -26px 70px #0626382e}
  .motion-ready:not(.reduced-motion) .listing-section:nth-child(3n){box-shadow:var(--sheet-edge),0 -26px 70px #06263840}
  .motion-ready:not(.reduced-motion) .listing-section:first-child{border-radius:0}
}
/* The first sheet sits on the page; its shadow must not fall over the catalogue status line. */
.listing-section:first-child{box-shadow:none!important}

/* Words over the photograph keep their contrast against the brightest sky. */
.scene-story:before{content:'';position:absolute;z-index:-1;inset:8% 4%;background:radial-gradient(closest-side,#061f35a8,#061f3566 55%,#061f3500);pointer-events:none}

/* Questions open with a drawn plus instead of the browser's default marker. */
.faq-section summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px}.faq-section summary::-webkit-details-marker{display:none}
.faq-section summary:after{content:'';flex:none;width:16px;height:16px;background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;transition:transform .45s var(--ease-out)}.faq-section details[open] summary:after{transform:rotate(45deg)}

/* Controls: one easing for fills, arrows and underlines. */
.catalogue-filters select,.contact-dock a{border-radius:0}
@media(hover:hover) and (pointer:fine){
  .button,.header-contact{position:relative;isolation:isolate;overflow:hidden}
  .button::before,.header-contact::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--deep);transform:scaleX(0);transform-origin:100% 50%;transition:transform .6s var(--ease-out)}
  .button:hover::before,.header-contact:hover::before{transform:scaleX(1);transform-origin:0 50%}
  .button.blue:hover{background:var(--blue)}
  .header-contact{transition:color .45s var(--ease-out)}.header-contact::before{background:var(--blue)}.header-contact:hover{color:#fff}
  /* On the night sheet the cream call fills with the seal's sand; the navy text stays. */
  .listing-section:nth-child(3n) .listing-visit::before{background:var(--sand)}.listing-section:nth-child(3n) .listing-visit:hover{background:var(--cream);color:var(--blue)}
  .button svg,.header-contact svg,.text-link svg{transition:transform .5s var(--ease-out)}
  .button:hover svg{transform:translateX(6px)}.header-contact:hover svg,.text-link:hover svg{transform:translate(3px,-3px)}
}

@media(prefers-reduced-motion:no-preference){
  /* Opening: the photograph settles while the words take their places. */
  .motion-ready .architecture{animation:frame-settle 1.8s var(--ease-out) backwards}
  .motion-ready .hero-eyebrow{animation:rise-in .7s var(--ease-out) backwards}
  .motion-ready .hero-bottom{animation:rise-in .7s var(--ease-out) .12s backwards}
  .motion-ready .portfolio-seal{animation:seal-in 1.1s var(--ease-out) .7s backwards}
  /* Arrivals run once; focused content and no-JavaScript reading are never hidden. */
  .reveal-ready:not(.reduced-motion) .reveal-group:not(.is-in):not(:focus-within) [data-reveal]{opacity:0;translate:0 28px}
  .reveal-ready [data-reveal]{transition:opacity .8s var(--ease-out),translate .95s var(--ease-out);transition-delay:calc(var(--reveal-i,0) * 65ms)}
  .reveal-ready .portrait img[data-reveal]{transition-duration:1.2s,1.4s}
  .reveal-ready .reveal-group:focus-within [data-reveal]{transition:none}
  .reveal-ready:not(.reduced-motion) .reveal-group:not(.is-in):not(:focus-within) .portrait img[data-reveal]{translate:0 70px}
}
@keyframes frame-settle{from{scale:1.14;filter:brightness(.72) saturate(.85)}}
@keyframes rise-in{from{opacity:0;translate:0 24px}}
@keyframes seal-in{from{opacity:0;scale:.55}}
@media(max-width:700px){.motion-ready:not(.reduced-motion) .listing-section{border-radius:20px 20px 0 0}}