/* ==========================================================================
   Hero: KT Merry-style treatment (loaded after styles.css, overrides the hero only).
   Borrowed from ktmerry.com (inspected 2026-09-30):
   - media layer at opacity .9 over a flat charcoal (#343434 there, warm #2b2724 here): a soft,
     slightly lifted, low-contrast "matte" instead of heavy black gradients
   - full-bleed object-fit: cover media; muted/autoplay/loop/playsinline video, no controls
   - "window" scroll effect: the media stays pinned (position: fixed inside a clipped section) while
     the page content scrolls up over it
   - fadeIn / scale(.95 -> 1) entrance on the headline block (her fb_transform keyframes)
   - oversized one-line title with a small, widely tracked uppercase line close to it
   Adapted for this client: bold Cormorant title (not her extra-light sans), gold accent line,
   soft text shadows and a light vignette so white type holds up over the darker sunset still.
   ========================================================================== */

.hero-kt { background: #2b2724; clip-path: inset(0); isolation: isolate; }

/* pinned media (KT "window" effect). Falls back to normal scrolling if JS/fixed is unavailable. */
.hero-kt .hero-media { position: fixed; inset: 0; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; }
.hero-kt .hero-img,
.hero-kt .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  opacity: .9;                                                       /* KT: media at .9 over charcoal */
  filter: saturate(.9) contrast(.95) brightness(.98) sepia(.06);     /* soft, warm, filmic grade */
  animation: kt-media-in 1.6s ease-out both; }
.hero-kt .hero-video { opacity: 0; animation: none; transition: opacity 1.4s ease; }
.hero-kt .hero-video.is-playing { opacity: .9; }

/* legibility: light top/bottom gradient + soft centre vignette (much lighter than the live hero) */
.hero-kt .hero-grade { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 52%, rgba(22,18,15,.34) 0%, rgba(22,18,15,0) 72%),
    radial-gradient(ellipse 120% 90% at 50% 50%, rgba(0,0,0,0) 60%, rgba(10,8,6,.38) 100%),
    linear-gradient(180deg, rgba(22,18,15,.50) 0%, rgba(22,18,15,.14) 26%, rgba(22,18,15,.12) 62%, rgba(22,18,15,.55) 100%); }

.hero-kt .hero-content { max-width: none; width: 100%; padding: 0 clamp(16px, 4vw, 48px); will-change: opacity, transform; }
.hero-kt .hero-content > * { animation: kt-fb-in 1.3s cubic-bezier(.2,.7,.2,1) both; }
.hero-kt .hero-content > :nth-child(1) { animation-delay: .15s; }
.hero-kt .hero-content > :nth-child(2) { animation-delay: .3s; }
.hero-kt .hero-content > :nth-child(3) { animation-delay: .5s; }
.hero-kt .hero-content > :nth-child(4) { animation-delay: .7s; }

/* bright accent line above the title: gold tracked caps flanked by hairlines */
.hero-kt .hero-accent { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 clamp(14px, 2vw, 22px);
  font-family: var(--sans); font-size: clamp(.7rem, 1.05vw, .9rem); font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: #ffd990; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.45); }
.hero-accent span { padding-left: .34em; }   /* optically centre tracked caps */
.hero-accent::before, .hero-accent::after { content: ""; flex: 0 0 auto; width: clamp(28px, 5vw, 72px); height: 1px;
  height: 1.5px; background: linear-gradient(90deg, rgba(255,217,144,0), #ffd990); box-shadow: 0 0 6px rgba(0,0,0,.35); transition: width .6s ease; }
.hero-accent::after { background: linear-gradient(270deg, rgba(255,217,144,0), #ffd990); }

/* large, bold one-line title */
.hero-kt .hero-title { font-family: var(--serif); font-weight: 600; text-transform: uppercase; white-space: nowrap; line-height: .95;
  font-size: clamp(2rem, 9.4vw, 8.6rem); letter-spacing: .035em; margin: 0 auto; padding-left: .035em; color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.28), 0 4px 30px rgba(0,0,0,.42), 0 0 60px rgba(0,0,0,.22); }
.hero-kt .hero-title .bm { color: #d9b36c; }

/* heavier tagline */
.hero-kt p.tagline { font-family: var(--serif); font-style: italic; font-weight: 650; font-size: clamp(1.22rem, 2.4vw, 1.95rem) !important;
  line-height: 1.35; letter-spacing: .01em; max-width: 920px; text-wrap: balance; margin: clamp(16px, 2.2vw, 26px) auto clamp(30px, 4vw, 44px); color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 2px 22px rgba(0,0,0,.45) !important; }

.hero-kt .btn-light { box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); }
.hero-kt .btn-ghost { text-shadow: 0 1px 6px rgba(0,0,0,.5); background: rgba(20,17,14,.12); backdrop-filter: blur(2px); }
.hero-kt .btn { transition: background .35s, color .35s, border-color .35s, transform .35s; }
.hero-kt .hero-location { font-weight: 500; letter-spacing: .32em; }

/* scroll cue (desktop) */
.hero-scroll { position: absolute; left: 50%; bottom: 72px; width: 1px; height: 44px; margin-left: -.5px; overflow: hidden; background: rgba(255,255,255,.28); }
.hero-scroll span { position: absolute; left: 0; top: -44px; width: 1px; height: 44px; background: #ffd990; animation: kt-cue 2.4s ease-in-out infinite; }

@media (hover: hover) {
  .hero-kt .hero-content:hover .hero-accent::before, .hero-kt .hero-content:hover .hero-accent::after { width: clamp(40px, 7vw, 104px); }
  .hero-kt .btn:hover { transform: translateY(-2px); }
}

@keyframes kt-media-in { from { opacity: 0; } to { opacity: .9; } }
@keyframes kt-fb-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes kt-cue { 0% { top: -44px; } 60%, 100% { top: 44px; } }

@media (max-width: 560px) {
  .hero-kt .hero-title { font-size: 9.4vw; letter-spacing: .02em; padding-left: .02em; }
  /* phones: accent becomes a short bright gold bar sitting above one line of tracked caps */
  .hero-kt .hero-accent { flex-direction: column; gap: 12px; letter-spacing: .19em; font-size: .64rem; }
  .hero-accent span { padding-left: .19em; white-space: normal; text-wrap: balance; max-width: 30ch; }
  .hero-accent::before { width: 44px; height: 2px; background: #ffd990; }
  .hero-accent::after { display: none; }
  .hero-kt p.tagline { max-width: 340px; }
  .hero-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-kt .hero-img, .hero-kt .hero-content > *, .hero-scroll span { animation: none; }
  .hero-kt .hero-video { display: none; }
  .hero-kt .hero-content { will-change: auto; }
}



/* ---- Hero video (round 5): darker, steadier overlay so the white type holds over bright, moving footage ---- */
/* poster frame (the <img>) shows instantly, no fade; the video fades in over it once playing, then the img is hidden */
@media (prefers-reduced-motion: no-preference) {
  .hero-kt[data-hero-video]:not([data-hero-video=""]) .hero-img { animation: none; opacity: .9; }
}
.hero-kt.has-video .hero-video { object-position: center center; }
.hero-kt.video-playing[data-hero-video] .hero-img { opacity: 0; transition: opacity .3s linear 1.5s; }   /* no ghosting under the .9-opacity video */
@media (prefers-reduced-motion: no-preference) {   /* darker overlay only when the video is in use */
.hero-kt[data-hero-video]:not([data-hero-video=""]) .hero-grade {
  background:
    radial-gradient(ellipse 62% 46% at 50% 50%, rgba(18,14,11,.46) 0%, rgba(18,14,11,0) 74%),
    radial-gradient(ellipse 120% 90% at 50% 50%, rgba(0,0,0,0) 55%, rgba(10,8,6,.42) 100%),
    linear-gradient(180deg, rgba(18,14,11,.62) 0%, rgba(18,14,11,.30) 26%, rgba(18,14,11,.28) 62%, rgba(18,14,11,.66) 100%); }
@media (max-aspect-ratio: 3/4) {   /* tall phone cut: subjects sit right behind the type, so a slightly stronger centre scrim */
  .hero-kt[data-hero-video]:not([data-hero-video=""]) .hero-grade {
    background:
      radial-gradient(ellipse 95% 38% at 50% 48%, rgba(18,14,11,.56) 0%, rgba(18,14,11,0) 78%),
      linear-gradient(180deg, rgba(18,14,11,.58) 0%, rgba(18,14,11,.30) 24%, rgba(18,14,11,.30) 70%, rgba(18,14,11,.66) 100%); }
}
}

/* SEO H1: the accent line is now the page's <h1>; keep it looking exactly like the old <p> */
.hero-kt h1.hero-accent { line-height: 1.5; }