/* =========================================================
   Kleos Noble Retreat — Custom Styles
   Palette: beige, sand, olive, stone, white, charcoal
   ========================================================= */

:root {
  --color-bone:    #FAF8F4;
  --color-beige:   #E8DFD3;
  --color-sand:    #D4C4A8;
  --color-olive:   #6B7553;
  --color-olive-d: #4A5240;
  --color-stone:   #8A8579;
  --color-charcoal:#2C2C2C;
  --color-ink:     #1A1A1A;
  --shadow-soft:   0 18px 50px -20px rgba(44, 44, 44, 0.25);
  --shadow-card:   0 6px 24px -8px rgba(74, 82, 64, 0.18);
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--color-bone);
  color: var(--color-charcoal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5,
.font-display { font-family: 'Cormorant Garamond', 'Times New Roman', serif; font-weight: 500; letter-spacing: -0.01em; }

.eyebrow {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-olive);
}

/* ---------- Navigation ---------- */
.nav-shell {
  transition: background-color .4s var(--ease-out), backdrop-filter .4s var(--ease-out), border-color .4s var(--ease-out), padding .4s var(--ease-out);
}
.nav-shell.is-scrolled {
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(138, 133, 121, 0.18);
}
.nav-shell.is-scrolled .nav-link,
.nav-shell.is-scrolled .nav-brand,
.nav-shell.is-scrolled .nav-toggle { color: var(--color-charcoal); }

.nav-link {
  position: relative;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--color-bone);
  transition: color .25s var(--ease-out);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--color-olive); }
.nav-shell:not(.is-scrolled) .nav-link.is-active { color: #fff; }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--color-bone);
  transform: translateY(-100%);
  transition: transform .55s var(--ease-out);
  z-index: 70;
}
.mobile-menu.is-open { transform: translateY(0); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 0.95rem 1.8rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: all .35s var(--ease-out);
}
.btn svg { transition: transform .35s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

.btn-primary {
  background: var(--color-olive);
  color: var(--color-bone);
}
.btn-primary:hover {
  background: var(--color-olive-d);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-bone);
  border-color: rgba(250, 248, 244, 0.7);
}
.btn-ghost:hover {
  background: var(--color-bone);
  color: var(--color-charcoal);
}

.btn-dark {
  background: var(--color-charcoal);
  color: var(--color-bone);
}
.btn-dark:hover { background: #000; }

.btn-outline {
  background: transparent;
  color: var(--color-charcoal);
  border-color: var(--color-charcoal);
}
.btn-outline:hover {
  background: var(--color-charcoal);
  color: var(--color-bone);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: var(--color-bone);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(26,26,26,0.55) 0%, rgba(26,26,26,0.35) 40%, rgba(26,26,26,0.7) 100%),
                    url('../assets/images/hero-estate.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1;
  transform: scale(1.04);
  animation: heroBreath 18s ease-in-out infinite alternate;
}
@keyframes heroBreath {
  to { transform: scale(1.12); }
}
.hero-inner-page {
  min-height: 60vh;
  padding-top: 8rem;
  padding-bottom: 4rem;
}
.hero-inner-page::before { animation: none; }

/* Video hero — replaces the static ::before image with a looping <video> */
.hero.hero-video::before { display: none; }
.hero-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  background-color: var(--color-ink);
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Two layers: a darker top→bottom curtain, plus a soft radial vignette
     centred slightly left of the text so the headline always sits on a
     darker patch even when the video frame is bright. */
  background:
    radial-gradient(ellipse 60% 65% at 30% 55%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg,
      rgba(20,20,18,0.55) 0%,
      rgba(20,20,18,0.50) 40%,
      rgba(20,20,18,0.85) 100%);
  pointer-events: none;
}

/* Keep headline + subtitle legible on any frame of the video,
   without making the type look heavy or outlined. */
.hero-video .container-x {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.35);
}
.hero-video .btn { text-shadow: none; }

/* ---------- Section utilities ---------- */
.section { padding: 6rem 0; }
.section-tight { padding: 4rem 0; }

.container-x { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 1024px) { .container-x { padding: 0 3rem; } }

.divider-thin {
  width: 56px; height: 1px;
  background: var(--color-olive);
  display: inline-block;
}

/* ---------- Cards ---------- */
.feature-card {
  background: #fff;
  border: 1px solid rgba(138, 133, 121, 0.18);
  border-radius: 6px;
  padding: 2.25rem;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out);
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
  border-color: rgba(107, 117, 83, 0.35);
}

.space-card {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-charcoal);
  isolation: isolate;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
}
.space-card .space-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 1s var(--ease-out);
  z-index: -2;
}
.space-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,26,26,0) 35%, rgba(26,26,26,0.85) 100%);
  z-index: -1;
}
.space-card:hover .space-bg { transform: scale(1.14); }
.space-card .space-content {
  padding: 2rem;
  color: var(--color-bone);
}

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; }
.form-group label {
  font-size: .72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-stone);
  margin-bottom: .55rem;
  font-weight: 500;
}
.form-group label .req { color: var(--color-olive); margin-left: 4px; }

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.95rem 1rem;
  background: #fff;
  border: 1px solid rgba(138, 133, 121, 0.35);
  border-radius: 4px;
  font-size: 0.95rem;
  color: var(--color-charcoal);
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
  font-family: inherit;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-olive);
  box-shadow: 0 0 0 3px rgba(107, 117, 83, 0.18);
}
.form-textarea { min-height: 140px; resize: vertical; }
.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error { border-color: #b04a3c; box-shadow: 0 0 0 3px rgba(176, 74, 60, 0.15); }
.form-error-msg { color: #b04a3c; font-size: .78rem; margin-top: .35rem; display: none; }
.form-error-msg.is-visible { display: block; }

.checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem 1.25rem;
}
.checkbox-pill {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem 1rem;
  border: 1px solid rgba(138, 133, 121, 0.35);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
  background: #fff;
}
.checkbox-pill:hover { border-color: var(--color-olive); }
.checkbox-pill input { accent-color: var(--color-olive); }
.checkbox-pill input:checked + span { color: var(--color-olive-d); font-weight: 500; }

.radio-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.radio-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.1rem;
  border: 1px solid rgba(138, 133, 121, 0.35);
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
}
.radio-pill input { accent-color: var(--color-olive); }

.form-status {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 4px;
  font-size: .9rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-success { background: rgba(107, 117, 83, 0.12); color: var(--color-olive-d); border-left: 3px solid var(--color-olive); }
.form-status.is-error   { background: rgba(176, 74, 60, 0.10); color: #803226; border-left: 3px solid #b04a3c; }

/* ---------- Reveal (CSS fallback when GSAP unavailable) ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .15s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .25s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .35s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .45s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .55s; }

/* When GSAP is driving the reveal animations, hand control over to it
   completely so CSS transitions don't fight inline-style changes. */
html.gsap-on .reveal,
html.gsap-on .reveal-stagger,
html.gsap-on .reveal-stagger > * {
  transition: none !important;
}

/* ---------- Gallery / Lightbox ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1100px){ .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: zoom-in;
  aspect-ratio: 4 / 5;
  background: var(--color-beige);
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}
.gallery-item:hover::after { opacity: 1; }

.lightbox {
  position: fixed; inset: 0;
  background: rgba(20,20,18,0.94);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 90;
  padding: 1.5rem;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 92vw; max-height: 86vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 80px -10px rgba(0,0,0,.6);
}
.lightbox-close, .lightbox-nav {
  position: absolute;
  background: rgba(250,248,244,0.08);
  color: var(--color-bone);
  border: 1px solid rgba(250,248,244,0.25);
  width: 44px; height: 44px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .25s var(--ease-out);
}
.lightbox-close { top: 1.5rem; right: 1.5rem; }
.lightbox-nav.prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(250,248,244,0.18); }

/* ---------- Footer ---------- */
.footer {
  background: var(--color-ink);
  color: var(--color-beige);
}
.footer a { color: var(--color-beige); transition: color .25s var(--ease-out); }
.footer a:hover { color: #fff; }

/* ---------- Page Loader ---------- */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  opacity: 1;
  visibility: visible;
  transition: opacity .7s var(--ease-out), visibility 0s linear .7s;
}
.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .7s var(--ease-out), visibility 0s linear .7s;
}
.page-loader img {
  width: clamp(120px, 18vw, 200px);
  height: auto;
  display: block;
}
.page-loader::after {
  content: "";
  width: 110px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(107,117,83,0) 0%,
    var(--color-olive) 50%,
    rgba(107,117,83,0) 100%);
  background-size: 200% 100%;
  animation: loaderShimmer 1.4s linear infinite;
}
@keyframes loaderShimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}
html.is-loading,
html.is-loading body { overflow: hidden; }

/* ---------- Misc ---------- */
.image-frame {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(107,117,83,0.15), rgba(212,196,168,0.35)),
    var(--color-beige);
}
.image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-frame.is-image-missing::before,
.gallery-item.is-image-missing::before {
  content: "Kleos";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem; letter-spacing: 0.1em;
  color: var(--color-olive-d);
  opacity: 0.55;
}
.gallery-item.is-image-missing {
  background:
    linear-gradient(135deg, rgba(107,117,83,0.2), rgba(212,196,168,0.4)),
    var(--color-beige);
}

.kbd-quote {
  border-left: 2px solid var(--color-olive);
  padding: 0.25rem 0 0.25rem 1.25rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.35rem;
  color: var(--color-charcoal);
  line-height: 1.55;
}

/* Loading dot inside button */
.btn[data-loading="true"] { opacity: .75; pointer-events: none; }
.btn .spinner {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: none;
  animation: spin .8s linear infinite;
}
.btn[data-loading="true"] .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Reduced motion — soften the heavy ambient hero zoom only.
   We deliberately keep button/card transitions and GSAP entrance
   animations active so the site doesn't feel dead. */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}