/* ==========================================================================
   Zillion sites: shared UX layer (Group, Casa, Properties).
   Loaded after styles.css. Adds scroll progress, calm reveal motion,
   mobile-first contact order, cross-brand links and the company chooser.
   ========================================================================== */

/* scroll progress: a champagne hairline along the bottom of the header pill */
.hdr-in { position: relative; }
.hdr-progress { position: absolute; left: 26px; right: 26px; bottom: -1px; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--bronze), var(--champagne) 60%, var(--champagne-soft));
  transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: .85; }

/* reveal on scroll: only when JS runs and motion is welcome; content is never hidden otherwise */
@media (prefers-reduced-motion: no-preference) {
  html.ux .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
  html.ux .rv.in { opacity: 1; transform: none; }
}

/* link affordance inside cards and lists */
.more { transition: gap .3s var(--ease), color .3s; }
.more:hover { gap: 12px; }

/* contact: on phones the enquiry card comes straight after the heading, before the address list */
@media (max-width: 1000px) {
  .contact .contact-info { display: contents; }
  .contact .contact-info h2 { order: 1; } .contact .contact-info .lede { order: 2; }
  .contact .start { order: 3; } .contact .cards { order: 4; } .contact .contact-info > .btn-line, .contact .contact-actions { order: 5; }
  .contact { display: flex; flex-direction: column; gap: 22px; }
  .contact .start { margin-bottom: 8px; }
}

/* cross-brand card: points a visitor to the sister company when their need changes */
.xsell { margin-top: clamp(34px, 4vw, 52px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 22px; align-items: center;
  padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 30px); border-radius: var(--r-card); background: #FFFDF9; border: 1px solid var(--line-light);
  text-decoration: none; color: var(--ink); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.xsell:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -34px rgba(40,28,10,.5); }
.xsell > svg { width: 22px; height: 36px; color: var(--bronze); }
.xsell b { display: block; font: 400 clamp(20px, 2vw, 24px)/1.25 var(--f-display); }
.xsell span { display: block; color: var(--ink-soft); font-size: 15px; margin-top: 4px; }
.xsell em { font-style: normal; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; white-space: nowrap; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--on-dark); }
.xsell em svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .xsell { grid-template-columns: auto minmax(0, 1fr); }
  .xsell em { grid-column: 1 / -1; justify-content: center; }
}
@media print { html.ux .rv { opacity: 1 !important; transform: none !important; } }