/* =========================================================
   DLF — HOME (CINEMATIC)
   - Keeps locked header/nav glow untouched
   - Animated hero background via pseudo-element
   - Strong text definition via scrim + shadow
   ========================================================= */

:root{
  --home-hero-img: url("/assets/img/hero/hero.jpg");
}

/* HERO WRAPPER */
body.home .hero.hero-cinematic{
  position: relative;
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 5rem 1.5rem 2.25rem;
  text-align: center;
  overflow: hidden;

  /* fallback if image fails */
  background: #0b1b2b;
}

/* HERO — STRAIGHT, CENTERED PUSH-IN (LUXURY) */
body.home .hero.hero-cinematic::before{
  content:"";
  position:absolute;
  inset:-8%; /* slightly less bleed = more control */
  background-image: var(--home-hero-img);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;

  transform-origin: center center;
  transform: scale(1);
  will-change: transform;
  z-index: 0;

  animation: homeHeroPush 18s ease-out forwards;
}

@keyframes homeHeroPush{
  from{ transform: scale(1); }
  to  { transform: scale(1.075); }
}

/* Scrim (keeps text readable) */
body.home .hero.hero-cinematic::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;

  /* This is what preserves definition */
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.62) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.18) 42%, rgba(0,0,0,0.62) 100%);
}

/* Put content above scrim */
body.home .hero.hero-cinematic .hero-inner,
body.home .hero.hero-cinematic .hero-copy{
  position: relative;
  z-index: 2;
}

/* TEXT DEFINITION */
body.home .hero.hero-cinematic .eyebrow{
  color: rgba(209,183,122,0.98);
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
}

body.home .hero.hero-cinematic h1{
  color: rgba(244,237,227,0.98);
  text-shadow:
    0 3px 14px rgba(0,0,0,0.72),
    0 1px 0 rgba(0,0,0,0.40);

  /* Refinement — NOT a redesign */
  font-size: clamp(2.3rem, 4vw, 3.0rem); /* was 3.2rem */
  letter-spacing: 0.03em;
  line-height: 1.15;
}

body.home .hero.hero-cinematic .hero-text{
  color: rgba(244,237,227,0.92);
  text-shadow: 0 2px 12px rgba(0,0,0,0.70);
}

/* CTA buttons stay readable on photo */
body.home .hero.hero-cinematic .btn.primary{
  box-shadow: 0 12px 26px rgba(0,0,0,0.28);
}
body.home .hero.hero-cinematic .btn.secondary{
  box-shadow: 0 12px 26px rgba(0,0,0,0.22);
}

/* MOBILE tuning: keep the dog framed + no weird bars */
@media (max-width: 900px){
  body.home .hero.hero-cinematic{
    min-height: calc(100vh - 96px);
    padding: 4.5rem 1.25rem 1.75rem;
  }
  body.home .hero.hero-cinematic::before{
    background-position: center 52%;
    transform: scale(1.15);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  body.home .hero.hero-cinematic::before{
    animation: none;
    transform: scale(1.10);
  }
}

/* Keyframes: subtle drift + tiny zoom */
@keyframes homeHeroMove{
  0%   { transform: scale(1.10) translate3d(0,0,0); }
  100% { transform: scale(1.16) translate3d(1.5%, -1.0%, 0); }
}
/* =========================================================
   HOME — HERO (TYPOGRAPHY + MOTION)
   ========================================================= */

/* Hero title refinement */
body.home .hero.hero-cinematic h1{
  color: rgba(244,237,227,0.98);
  text-shadow:
    0 3px 14px rgba(0,0,0,0.72),
    0 1px 0 rgba(0,0,0,0.40);

  font-size: clamp(2.3rem, 4vw, 3.0rem);
  letter-spacing: 0.02em;
  line-height: 1.15;
}

/* Hero eyebrow */
body.home .hero .eyebrow{
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  opacity: 0.75;
}

/* Hero subline */
body.home .hero .hero-text{
  font-size: 1.05rem;
  opacity: 0.85;
}

/* Hero background — straight, centered push-in */
body.home .hero.hero-cinematic::before{
  content:"";
  position:absolute;
  inset:-8%;
  background-image: var(--home-hero-img);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;

  transform-origin: center center;
  transform: scale(1);
  will-change: transform;
  z-index: 0;

  animation: homeHeroPush 18s ease-out forwards;
}

@keyframes homeHeroPush{
  from{ transform: scale(1); }
  to  { transform: scale(1.06); }
}

/* =========================================================
   HOME — QUOTE STRIP (LOCKED)
   ========================================================= */

/* Outer spacing control */
body.home .section.quote-strip{
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 0;
}

/* Quote container + rules */
body.home .quote-inner{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 44px;
  padding-bottom: 44px;
}

body.home .quote-inner::before,
body.home .quote-inner::after{
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background: rgba(209,183,122,0.45);
}

body.home .quote-inner::before{ margin-bottom: 40px; }
body.home .quote-inner::after{  margin-top: 40px; }

/* Quote headline spacing */
body.home .quote-lock{
  margin-top: 0;
  margin-bottom: 40px;
}

/* Kill any legacy borders or dividers */
body.home .section.quote-strip,
body.home .section.quote-strip .quote-inner{
  border: 0 !important;
}

/* =========================================================
   HOME — AVAILABLE STRIP
   ========================================================= */

/* Space before footer */
body.home .section.available-strip{
  padding-bottom: 96px;
}

/* CTA alignment */
body.home .available-cta{
  align-self: center;
}

/* CTA button — quiet luxury */
body.home .available-cta .btn.primary{
  display: inline-block;
  padding: 12px 28px;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  color: #0b1b2b;
  background: transparent;
  border: 1px solid rgba(209,183,122,0.6);
  border-radius: 999px;

  text-decoration: none;
  transition: all 0.25s ease;
}

body.home .available-cta .btn.primary:hover{
  background: rgba(209,183,122,0.12);
  border-color: rgba(209,183,122,0.9);
}