/* Modern touches used across the site: scroll progress, glass header,
   reveal-on-scroll, hero live badge, stats band, services marquee, card tilt.
   Everything switches off for visitors who prefer reduced motion. */

/* Scroll progress bar */
.mk-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#cda365,#e9c98f);z-index:1001;pointer-events:none}

/* Frosted-glass header once the page scrolls */
#navbar.bg-alabaster{background:rgba(234,231,225,.78)!important;-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);box-shadow:0 1px 0 rgba(2,62,54,.08),0 8px 24px -16px rgba(2,62,54,.35)!important}

/* Slow cinematic zoom on the hero photos */
.hero-carousel[data-astro-cid-shwxrd6l] img[data-astro-cid-shwxrd6l]{transform:scale(1.14);transition:opacity 2s ease,transform 9s ease-out}
.hero-carousel[data-astro-cid-shwxrd6l] img[data-astro-cid-shwxrd6l].active{transform:scale(1)}

/* Hero live badge */
.hero-live{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.5rem;width:fit-content;margin-bottom:1.25rem;padding:.45rem 1rem .45rem .8rem;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:.9rem;font-weight:500;animation:mk-rise .9s .1s both cubic-bezier(.2,.7,.2,1)}
.hero-live .dot{width:.55rem;height:.55rem;border-radius:999px;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:mk-pulse 2s infinite}
.hero-live .rot{display:inline-block;min-width:1ch;color:#e9c98f;font-weight:600;transition:opacity .35s ease,transform .35s ease}
.hero-live .rot.out{opacity:0;transform:translateY(-6px)}
.hero-live .sep{opacity:.6}
@keyframes mk-pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}70%{box-shadow:0 0 0 .55rem rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
@keyframes mk-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Reveal on scroll (add class "reveal", optional style="--d:120ms") */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}

/* Stats band */
.mk-stats{position:relative;z-index:1;background:radial-gradient(120% 140% at 0% 0%,#0a5a4e 0%,#023e36 45%,#012e28 100%);color:#fff;overflow:hidden}
.mk-stats::before{content:"";position:absolute;inset:0;background:url(/mayabk.svg) no-repeat right -180px center/560px auto;opacity:.06;pointer-events:none}
.mk-stats-grid{position:relative;max-width:80rem;margin:0 auto;padding:3.5rem 1rem 2.75rem;display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 1rem;text-align:center}
@media (min-width:768px){.mk-stats-grid{grid-template-columns:repeat(4,1fr)}}
.mk-stat strong{display:block;font-size:clamp(2.2rem,5vw,3.4rem);font-weight:700;line-height:1;letter-spacing:-.02em;background:linear-gradient(180deg,#f3dcb2,#cda365);-webkit-background-clip:text;background-clip:text;color:transparent}
.mk-stat span{display:block;margin-top:.6rem;color:rgba(255,255,255,.78);font-size:.95rem}

/* Services marquee */
.mk-marquee{position:relative;border-top:1px solid rgba(255,255,255,.12);padding:1.1rem 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mk-marquee-track{display:flex;width:max-content;gap:2.25rem;animation:mk-scroll 38s linear infinite}
.mk-marquee:hover .mk-marquee-track{animation-play-state:paused}
.mk-marquee a{display:inline-flex;align-items:center;gap:2.25rem;color:rgba(255,255,255,.88);font-weight:500;white-space:nowrap;text-decoration:none;transition:color .2s}
.mk-marquee a:hover{color:#e9c98f}
.mk-marquee a::after{content:"✦";color:#cda365;font-size:.8rem}
@keyframes mk-scroll{to{transform:translateX(-50%)}}

/* Featured home cards: soft 3D tilt and a light sheen on hover */
@media (hover:hover) and (pointer:fine){
  .fh-card{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(var(--ty,0));transition:transform .25s ease,box-shadow .3s ease}
  .fh-card:hover{--ty:-4px}
  .fh-photo::after{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
  .fh-card:hover .fh-photo::after{opacity:1}
}

/* Shine sweep on main buttons */
.fh-btn--solid,.mk-shine{position:relative;overflow:hidden;isolation:isolate}
.fh-btn--solid::before,.mk-shine::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);z-index:-1;transition:left .7s ease}
.fh-btn--solid:hover::before,.mk-shine:hover::before{left:125%}

html{scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .mk-marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:.75rem}
  .mk-marquee{-webkit-mask-image:none;mask-image:none}
  .hero-live,.hero-live .dot{animation:none}
  .hero-carousel[data-astro-cid-shwxrd6l] img[data-astro-cid-shwxrd6l]{transition:opacity 1s ease;transform:none}
  .mk-progress{display:none}
  .fh-card{transform:none!important}
}

/* Keep the hero badge on one line on small phones */
@media (max-width:479px){.hero-live .sep,.hero-live .tail{display:none}}