:root {
  --opal-terracotta: #96583c;
  --opal-sage: #979b78;
  --opal-ink: #6f4a32;
  --opal-ink-soft: rgba(111, 74, 50, 0.72);
  --opal-cream: #f5efe8;
  --opal-cream-light: #fbf7f2;
  --opal-line: rgba(150, 88, 60, 0.32);
  --safe-top: max(24px, env(safe-area-inset-top));
  --safe-right: max(24px, env(safe-area-inset-right));
  --safe-bottom: max(24px, env(safe-area-inset-bottom));
  --safe-left: max(24px, env(safe-area-inset-left));
  --parallax-x: 0px;
  --parallax-y: 0px;
  --hero-fit-scale: 1;
}

* { box-sizing: border-box; }
html { min-width: 320px; height: 100%; background: var(--opal-cream); }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body {
  min-height: 0;
  overflow: hidden;
  color: var(--opal-ink);
  background: var(--opal-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  transform: translateY(-180%);
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--opal-ink);
  color: #fff;
  font: 600 14px/1 Calibri, Candara, "Segoe UI", Arial, sans-serif;
  text-decoration: none;
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.parking-page {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  background: var(--opal-cream);
}

.background {
  position: absolute;
  z-index: -5;
  inset: 0;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../images/background.jpg");
  transform: none;
  transform-origin: 50% 50%;
  will-change: filter, opacity;
}

/*
  Wide desktop screens crop the top and bottom of a 16:9 background when
  background-size: cover is used. The botanical/stone details live exactly
  in those corners, so we softly layer proportional edge views of the same
  approved background over the cover image. This keeps the centre filled
  while making the original left and bottom-right elements fully visible.
*/
.background::before,
.background::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: inherit;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.background::before {
  background-position: left center;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 13%, rgba(0,0,0,.92) 20%, rgba(0,0,0,.52) 29%, transparent 42%);
  mask-image: linear-gradient(to right, #000 0%, #000 13%, rgba(0,0,0,.92) 20%, rgba(0,0,0,.52) 29%, transparent 42%);
}
.background::after {
  background-position: right center;
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 13%, rgba(0,0,0,.92) 20%, rgba(0,0,0,.52) 29%, transparent 42%);
  mask-image: linear-gradient(to left, #000 0%, #000 13%, rgba(0,0,0,.92) 20%, rgba(0,0,0,.52) 29%, transparent 42%);
}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .background {
    background-image: image-set(
      url("../images/background.webp") type("image/webp"),
      url("../images/background.jpg") type("image/jpeg")
    );
  }
}

.ambient-light {
  position: absolute;
  z-index: -3;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .35;
  mix-blend-mode: screen;
}
.ambient-light--one {
  width: min(70vw, 900px);
  height: min(70vw, 900px);
  top: -34%;
  left: 12%;
  background: radial-gradient(circle, rgba(255,255,255,.72) 0 11%, rgba(255,255,255,.24) 38%, transparent 72%);
}
.ambient-light--two {
  width: min(52vw, 670px);
  height: min(52vw, 670px);
  right: -12%;
  bottom: -22%;
  background: radial-gradient(circle, rgba(244,238,228,.72), rgba(255,255,255,.12) 50%, transparent 74%);
}

.veil {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(251,247,242,.13) 0 30%, rgba(245,239,232,.08) 60%, rgba(87,61,43,.035) 100%),
    linear-gradient(115deg, rgba(255,255,255,.09), transparent 36%, rgba(255,255,255,.05) 68%, transparent);
}

.hero {
  width: min(100%, 780px);
  max-height: 100%;
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  padding: clamp(8px, 2.2vh, 22px) clamp(16px, 3vw, 32px);
  transform: scale(var(--hero-fit-scale));
  transform-origin: 50% 50%;
}

.hero__logo-wrap {
  width: min(70vw, 560px, 64vh);
  margin-inline: auto;
  overflow: visible;
}
.hero__logo {
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.hero__message { margin-top: clamp(0px, .55vh, 6px); }
.eyebrow {
  display: none;
  margin: 0;
  font: 400 clamp(.72rem, 1.35vw, .86rem)/1.4 Calibri, Candara, "Segoe UI", Arial, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(111, 74, 50, .58);
}
.headline {
  margin: 0;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.9rem, min(5.2vw, 6.2vh), 3.55rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .055em;
  color: var(--opal-ink);
  white-space: nowrap;
}

.ornament {
  width: min(250px, 72vw);
  margin: clamp(10px, 1.6vh, 18px) auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.ornament__line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--opal-line));
  transform-origin: right center;
}
.ornament__line--right {
  background: linear-gradient(90deg, var(--opal-line), transparent);
  transform-origin: left center;
}
.ornament__star {
  color: rgba(150, 88, 60, .7);
  font: 400 17px/1 Georgia, serif;
}

.contacts {
  width: min(100%, 470px);
  margin: clamp(12px, 1.9vh, 20px) auto 0;
  display: grid;
  gap: clamp(7px, 1vh, 10px);
  font-style: normal;
}
.contact-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: clamp(42px, 6vh, 48px);
  padding: clamp(8px, 1.2vh, 10px) 18px;
  border-radius: 999px;
  font: 400 clamp(.98rem, min(1.8vw, 2.5vh), 1.22rem)/1.2 Calibri, Candara, "Segoe UI", Arial, sans-serif;
  letter-spacing: .015em;
  text-decoration: none;
  color: var(--opal-ink);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background-color .35s ease, box-shadow .35s ease;
}
.contact-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(150,88,60,.11);
  box-shadow: 0 9px 28px rgba(84,62,48,.045);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
  z-index: -1;
}
.contact-link:hover,
.contact-link:focus-visible { transform: translateY(-2px); }
.contact-link:hover::before,
.contact-link:focus-visible::before {
  background: rgba(255,255,255,.26);
  border-color: rgba(150,88,60,.18);
  box-shadow: 0 13px 34px rgba(84,62,48,.075);
}
.contact-link:focus-visible {
  outline: 2px solid rgba(151,155,120,.85);
  outline-offset: 4px;
}
.contact-link__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
}
.contact-link__icon img { width: 100%; height: 100%; }

/* Premium entrance sequence — restrained, layered, and brand-first. */
.js .reveal { opacity: 0; }
.js body.is-ready .reveal--logo {
  animation: logoReveal 1.35s cubic-bezier(.16,.84,.24,1) .28s both;
}
.js body.is-ready .reveal--message {
  animation: messageReveal 1.05s cubic-bezier(.18,.86,.25,1) .78s both;
}
.js body.is-ready .reveal--contacts {
  animation: contactsReveal .95s cubic-bezier(.18,.86,.25,1) 1.1s both;
}
.js body.is-ready .background {
  animation: backgroundSettle 2.5s cubic-bezier(.18,.78,.2,1) both;
}
.js body.is-ready .ornament__line {
  animation: lineDraw .9s cubic-bezier(.2,.8,.2,1) 1.38s both;
}
.js body.is-ready .ornament__star {
  animation: starSettle .8s cubic-bezier(.2,.8,.2,1) 1.56s both;
}
.js body.is-ready .ambient-light--one { animation: lightFloatOne 14s ease-in-out 2.2s infinite alternate; }
.js body.is-ready .ambient-light--two { animation: lightFloatTwo 17s ease-in-out 2.4s infinite alternate; }

/* Preloader */
.preloader {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--opal-cream);
  overflow: hidden;
  transition: opacity .78s ease .12s, visibility .78s ease .12s;
}
.preloader__symbol {
  position: relative;
  z-index: 2;
  width: clamp(70px, 8vw, 104px);
  height: auto;
  opacity: 0;
  animation: loaderSymbol 1.4s cubic-bezier(.2,.8,.2,1) .12s both;
}
.preloader__halo {
  position: absolute;
  border: 1px solid rgba(151,155,120,.24);
  border-radius: 50%;
  opacity: 0;
}
.preloader__halo--inner {
  width: clamp(125px, 15vw, 190px);
  aspect-ratio: 1;
  animation: haloBloom 1.55s ease-out .05s both;
}
.preloader__halo--outer {
  width: clamp(205px, 24vw, 310px);
  aspect-ratio: 1;
  animation: haloBloom 1.75s ease-out .16s both;
}
.preloader__line {
  position: absolute;
  top: calc(50% + clamp(62px, 8vw, 94px));
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150,88,60,.45), transparent);
  animation: loaderLine 1.05s ease .48s both;
}
body.is-ready .preloader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.no-js .preloader { display: none; }

@keyframes loaderSymbol {
  0% { opacity: 0; transform: scale(.82); }
  55% { opacity: 1; transform: scale(1.018); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes haloBloom {
  0% { opacity: 0; transform: scale(.68); }
  35% { opacity: .62; }
  100% { opacity: 0; transform: scale(1.12); }
}
@keyframes loaderLine {
  from { width: 0; opacity: 0; }
  to { width: min(220px, 42vw); opacity: 1; }
}
@keyframes backgroundSettle {
  from { opacity: .72; filter: saturate(.90) brightness(1.045) blur(1.5px); }
  to { opacity: 1; filter: saturate(1) brightness(1) blur(0); }
}
@keyframes logoReveal {
  0% { opacity: 0; transform: translateY(22px) scale(.985); clip-path: inset(0 48% 0 48% round 4px); }
  50% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0 0 0 0 round 0); }
}
@keyframes messageReveal {
  0% { opacity: 0; transform: translateY(18px); letter-spacing: .02em; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: normal; }
}
@keyframes contactsReveal {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes lineDraw {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes starSettle {
  0% { opacity: 0; transform: rotate(-30deg) scale(.4); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes lightFloatOne {
  from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .28; }
  to { transform: translate3d(5%, 3%, 0) scale(1.08); opacity: .42; }
}
@keyframes lightFloatTwo {
  from { transform: translate3d(2%, 2%, 0) scale(1.02); opacity: .24; }
  to { transform: translate3d(-5%, -4%, 0) scale(1.11); opacity: .37; }
}

@media (max-width: 700px) {
  .parking-page { place-items: center; }
  .hero { padding-inline: 4px; }
  .hero__logo-wrap { width: min(92vw, 520px, 58vh); }
  .eyebrow { letter-spacing: .16em; }
  .headline { font-size: clamp(2rem, 10vw, 3.05rem); letter-spacing: .035em; }
  .contacts { width: min(100%, 390px); }
  .contact-link { justify-content: flex-start; border-radius: 18px; padding-inline: 16px; }
  .background { background-position: center; }
}

@media (max-width: 390px) {
  .headline { white-space: normal; }
  .contact-link { font-size: .98rem; }
}

@media (min-width: 701px) and (max-height: 720px) {
  :root {
    --safe-top: max(12px, env(safe-area-inset-top));
    --safe-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .hero { padding-block: 6px; }
  .hero__logo-wrap { width: min(64vw, 500px, 58vh); }
  .headline { font-size: clamp(1.8rem, min(4.5vw, 5.8vh), 3.1rem); }
  .ornament { margin-top: 8px; }
  .contacts { margin-top: 10px; gap: 7px; }
  .contact-link { min-height: 40px; padding-block: 7px; }
}

@media (min-width: 701px) and (max-height: 600px) {
  :root {
    --safe-top: max(8px, env(safe-area-inset-top));
    --safe-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .hero__logo-wrap { width: min(58vw, 450px, 52vh); }
  .hero__message { margin-top: 0; }
  .headline { font-size: clamp(1.65rem, min(4vw, 5.4vh), 2.8rem); }
  .ornament { margin-top: 6px; }
  .contacts { margin-top: 8px; gap: 6px; }
  .contact-link { min-height: 38px; padding-block: 6px; }
}


@media (max-width: 700px) {
  .background::before {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 14%, rgba(0,0,0,.78) 25%, transparent 47%);
    mask-image: linear-gradient(to right, #000 0%, #000 14%, rgba(0,0,0,.78) 25%, transparent 47%);
  }
  .background::after {
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 14%, rgba(0,0,0,.78) 25%, transparent 47%);
    mask-image: linear-gradient(to left, #000 0%, #000 14%, rgba(0,0,0,.78) 25%, transparent 47%);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --parallax-x: 0px; --parallax-y: 0px; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .preloader { display: none; }
  .js .reveal { opacity: 1; transform: none; clip-path: none; }
  .background { transform: none; opacity: 1; filter: none; }
}