/* NVN Salon — main styles v2.1.0 (mobile fixes: nav, gallery, touch targets, fonts) */

html { scroll-behavior: smooth; overflow-x: hidden; }
body { -webkit-font-smoothing: antialiased; overflow-x: clip; }

/* ---------- Header ---------- */
.nvn-header {
  position: sticky; top: 0; z-index: 1001;
  background: rgba(20,12,6,.92);
  border-bottom: 1px solid rgba(212,175,55,.18);
  /* contain: layout paint — removed: breaks fixed-position child transforms */
}
.nvn-header-inner {
  max-width: 1280px; margin: 0 auto; padding: 0.9rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.nvn-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.nvn-logo img { height: 46px; width: auto; }
.nvn-logo-word {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.8rem; letter-spacing: .22em; color: var(--wp--preset--color--champagne);
  font-weight: 600;
}
.nvn-logo-word small { display: block; font-family: var(--wp--preset--font-family--body); font-size: .72rem; letter-spacing: .5em; color: var(--wp--preset--color--muted); font-weight: 500; }
.nvn-nav ul { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; }
.nvn-nav a {
  color: var(--wp--preset--color--ivory); text-decoration: none;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 400;
  padding: .3rem 0; position: relative;
}
.nvn-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--wp--preset--color--gold); transition: width .3s ease;
}
.nvn-nav a:hover::after { width: 100%; }
.nvn-header-cta {
  background: linear-gradient(120deg,#B8912F,#F1DE9C 45%,#D4AF37);
  color: #1C1006 !important; font-weight: 600; font-size: .78rem !important;
  padding: .65rem 1.4rem !important; border-radius: 999px; letter-spacing: .1em !important;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.nvn-burger { display: none; background: none; border: 1px solid rgba(212,175,55,.4); border-radius: 8px; padding: .45rem .6rem; cursor: pointer; }
.nvn-burger span { display: block; width: 20px; height: 2px; background: var(--wp--preset--color--champagne); margin: 4px 0; transition: transform .3s ease, opacity .3s ease; }

/* Mobile nav overlay backdrop */
.nvn-nav-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 997; -webkit-tap-highlight-color: transparent; touch-action: none;
}
.nvn-nav-overlay.is-visible { display: block; }

@media (max-width: 900px) {
  .nvn-burger { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .nvn-header-cta { display: none; }
  .nvn-nav {
    position: fixed; top: 0; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    background: rgba(14,8,3,.97);
    display: none; flex-direction: column; align-items: center; justify-content: center;
    padding: 5rem 2rem; z-index: 9999;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nvn-nav.open { display: flex !important; }
  .nvn-nav ul { flex-direction: column; gap: .2rem; }
  .nvn-nav a {
    display: flex; align-items: center; font-size: 1rem;
    min-height: 44px; padding: .6rem 0;
  }
  .nvn-nav a::after { display: none; }
  .nvn-nav a.current-page {
    color: var(--wp--preset--color--gold) !important;
    font-weight: 600;
    background: rgba(212,175,55,.12);
    border-radius: 8px;
    padding: .6rem .8rem;
    margin: 0 -.8rem;
  }
  .nvn-nav a.current-page::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--wp--preset--color--gold);
    border-radius: 2px;
  }
}

/* ---------- Hero ---------- */
.nvn-hero {
  position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden;
  contain: layout style;
}
.nvn-hero-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: translateZ(0); width: 100%; height: 100%;
}
.nvn-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,12,6,.55) 0%, rgba(20,12,6,.35) 45%, rgba(20,12,6,.97) 100%);
}
.nvn-hero-content { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 2rem 1.4rem; width: 100%; }
.nvn-hero-textcard {
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transform: translateZ(0);
  border-radius: 22px;
  padding: 2.6rem 2.8rem;
  max-width: 720px;
  box-shadow: 0 18px 50px rgba(20,12,6,.12);
}
.nvn-kicker {
  letter-spacing: .4em; text-transform: uppercase; font-size: .75rem;
  color: #9C7A1E; margin-bottom: 1.1rem;
}
.nvn-hero h1 {
  font-family: var(--wp--preset--font-family--display); font-weight: 500;
  font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: 1.08; color: #241509; margin: 0 0 1.2rem;
}
.nvn-hero h1 em { font-style: italic; color: #9C7A1E; }
.nvn-hero-sub { max-width: 540px; color: #4A3A28; font-weight: 300; margin-bottom: 2rem; }
.nvn-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.nvn-btn {
  display: inline-block; padding: .95rem 2.2rem; border-radius: 999px; text-decoration: none;
  font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  transition: transform .25s ease, box-shadow .25s ease;
}
.nvn-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(212,175,55,.25); }
.nvn-btn-gold { background: linear-gradient(120deg,#B8912F,#F1DE9C 45%,#D4AF37); color: #1C1006; }
.nvn-hero .nvn-btn-ghost { border: 1px solid rgba(36,21,9,.5); color: #241509; background: rgba(255,255,255,.3); }
.nvn-btn-ghost { border: 1px solid rgba(212,175,55,.6); color: var(--wp--preset--color--champagne); }
.nvn-btn-ghost:hover { background: rgba(212,175,55,.1); }

.nvn-hero-badge {
  position: absolute; right: 4vw; bottom: 10vh; z-index: 3;
  width: 120px; height: 120px; border-radius: 50%;
  border: 1px solid rgba(212,175,55,.5);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: .62rem; letter-spacing: .25em; text-transform: uppercase; color: #241509;
  animation: nvn-spin-slow 22s linear infinite;
}
.nvn-hero-badge svg { position: absolute; inset: 0; animation: inherit; }
@keyframes nvn-spin-slow { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .nvn-hero-badge { display: none; } }

/* ---------- Marquee ---------- */
.nvn-marquee { overflow: hidden; border-block: 1px solid rgba(212,175,55,.2); padding: .9rem 0; background: #1A0F07; }
.nvn-marquee-track { display: flex; gap: 3rem; width: max-content; animation: nvn-marquee 30s linear infinite; }
.nvn-marquee-track span {
  font-family: var(--wp--preset--font-family--display); font-style: italic;
  font-size: 1.1rem; color: rgba(235,217,168,.75); white-space: nowrap;
}
.nvn-marquee-track span::after { content: "✦"; margin-left: 3rem; color: var(--wp--preset--color--gold); }
@keyframes nvn-marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.nvn-section { max-width: 1280px; margin: 0 auto; padding: 5.5rem 1.4rem; }
.nvn-section-head { margin-bottom: 3rem; }
.nvn-section-head h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); margin: 0 0 .6rem; }
.nvn-line { width: 64px; height: 1px; background: var(--wp--preset--color--gold); margin: 1rem 0; }

/* Services grid */
.nvn-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 980px) { .nvn-services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .nvn-services { grid-template-columns: 1fr; } }
.nvn-card {
  position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 3/4;
  background: var(--wp--preset--color--cocoa); text-decoration: none; display: block;
}
.nvn-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); opacity: .85; }
.nvn-card:hover img { transform: scale(1.07); opacity: 1; }
.nvn-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,12,6,0) 40%, rgba(20,12,6,.92) 100%);
}
.nvn-card-label {
  position: absolute; left: 1.4rem; bottom: 1.3rem; z-index: 2;
}
.nvn-card-label h3 { font-family: var(--wp--preset--font-family--display); font-size: 1.55rem; color: #fff; margin: 0; }
.nvn-card-label p { margin: .2rem 0 0; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--wp--preset--color--gold); }
.nvn-card-arrow {
  position: absolute; top: 1.1rem; right: 1.2rem; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(212,175,55,.5);
  display: flex; align-items: center; justify-content: center; color: var(--wp--preset--color--gold);
  opacity: 0; transform: translateY(6px); transition: all .35s ease; background: rgba(20,12,6,.4);
}
.nvn-card:hover .nvn-card-arrow { opacity: 1; transform: none; }

/* Stats strip */
.nvn-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
@media (max-width: 720px) { .nvn-stats { grid-template-columns: repeat(2, 1fr); } }
.nvn-stat b {
  display: block; font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem); color: var(--wp--preset--color--gold); font-weight: 500;
}
.nvn-stat span { font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--wp--preset--color--muted); }

/* Video scroll tour (sticky scrub) */
.nvn-vtour { position: relative; height: 300vh; }
.nvn-vtour-sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: #0E0803;
}
.nvn-vtour-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: translateZ(0);
}
.nvn-vtour-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,12,6,.45) 0%, rgba(20,12,6,.25) 45%, rgba(20,12,6,.85) 100%);
}
.nvn-vtour-caption {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 3;
  text-align: center; padding: 0 1.4rem;
}
.nvn-vtour-caption-inner {
  display: inline-block; max-width: 92%;
  padding: 1rem 2rem 1.1rem;
  background: rgba(14, 8, 3, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(212,175,55,.28); border-radius: 14px;
}
.nvn-vtour-caption .nvn-kicker { color: #EBD9A8; }
.nvn-vtour-h {
  font-family: var(--wp--preset--font-family--display); color: #fff;
  font-size: clamp(2.2rem, 6vw, 4.6rem); margin: 0;
  transition: opacity .18s ease;
}
.nvn-vtour-h em { font-style: italic; color: var(--wp--preset--color--gold); }
@media (max-width: 760px) {
  .nvn-vtour { height: 260vh; }
  .nvn-vtour-caption { bottom: 10vh; }
  .nvn-vtour-caption-inner { padding: .8rem 1.2rem .9rem; border-radius: 12px; max-width: 94%; }
  .nvn-vtour-h { font-size: clamp(1.9rem, 8vw, 2.5rem); }
}
/* Hero H1: exactly 2 lines on mobile */
@media (max-width: 760px) {
  .nvn-hero h1 { font-size: clamp(1.8rem, 7.5vw, 2.3rem); }
}

/* Experience steps (homepage visit journey) */
.nvn-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 760px) { .nvn-steps { grid-template-columns: 1fr; gap: 1.2rem; } }
.nvn-step {
  border: 1px solid rgba(212,175,55,.22); border-radius: 18px;
  padding: 1.6rem 1.5rem; background: rgba(36,21,9,.5);
}
.nvn-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--wp--preset--color--gold); color: var(--wp--preset--color--gold);
  font-family: var(--wp--preset--font-family--display); font-size: 1rem; margin-bottom: .9rem;
}
.nvn-step h3 { font-family: var(--wp--preset--font-family--display); font-size: 1.35rem; margin: 0 0 .4rem; color: var(--wp--preset--color--champagne); }
.nvn-step p { margin: 0; font-size: .95rem; color: rgba(247,241,229,.75); }
.nvn-brands {
  margin: 2.2rem 0 0; text-align: center; letter-spacing: .18em; text-transform: uppercase;
  font-size: .78rem; color: var(--wp--preset--color--muted);
}

/* Pricing tables */
.nvn-price-section { margin-bottom: 3.5rem; }
.nvn-price-section > h3 {
  font-size: 1.7rem; margin-bottom: 1.2rem; display: flex; align-items: center; gap: .8rem;
}
.nvn-price-section > h3::before { content: ""; width: 26px; height: 1px; background: var(--wp--preset--color--gold); }
.nvn-price-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.nvn-price-table th {
  text-align: left; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--wp--preset--color--gold); padding: .7rem .9rem;
  border-bottom: 1px solid rgba(212,175,55,.35);
}
.nvn-price-table td { padding: .72rem .9rem; border-bottom: 1px solid rgba(185,168,143,.14); color: rgba(247,241,229,.92); }
.nvn-price-table td.nvn-mem { color: var(--wp--preset--color--gold); font-weight: 500; }
.nvn-price-table tr { transition: background .25s ease; }
.nvn-price-table tbody tr:hover { background: rgba(212,175,55,.06); }
.nvn-price-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nvn-member-note {
  display: inline-block; border: 1px solid rgba(212,175,55,.4); border-radius: 999px;
  padding: .5rem 1.2rem; font-size: .78rem; color: var(--wp--preset--color--champagne); margin-bottom: 2rem;
}

/* Gallery */
.nvn-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .nvn-gallery { grid-template-columns: repeat(3, 1fr); gap: .8rem; } }
@media (max-width: 560px) { .nvn-gallery { grid-template-columns: repeat(3, 1fr); gap: .5rem; } }
.nvn-gallery figure { margin: 0; border-radius: 12px; overflow: hidden; position: relative; }
.nvn-gallery img { width: 100%; display: block; transition: transform .8s ease; aspect-ratio: 1/1; object-fit: cover; }
.nvn-gallery figure:hover img { transform: scale(1.05); }

/* Contact */
.nvn-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
@media (max-width: 860px) { .nvn-contact-grid { grid-template-columns: 1fr; } }
.nvn-contact-item { display: flex; gap: 1rem; margin-bottom: 1.6rem; align-items: flex-start; }
.nvn-contact-item .ico {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 1px solid rgba(212,175,55,.45); display: flex; align-items: center; justify-content: center;
  color: var(--wp--preset--color--gold);
}
.nvn-contact-item h4 { margin: 0 0 .15rem; font-size: .78rem; letter-spacing: .25em; text-transform: uppercase; color: var(--wp--preset--color--muted); font-weight: 500; }
.nvn-contact-item p, .nvn-contact-item a { margin: 0; color: var(--wp--preset--color--ivory); text-decoration: none; font-size: 1.02rem; }
.nvn-map { border-radius: 18px; overflow: hidden; border: 1px solid rgba(212,175,55,.25); min-height: 380px; }
.nvn-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

/* About */
.nvn-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }

@media (max-width: 980px) { .nvn-team { grid-template-columns: repeat(2, 1fr); } }
.nvn-member { text-align: center; }
.nvn-member img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 16px; filter: saturate(.9); }
.nvn-member h4 { font-family: var(--wp--preset--font-family--display); font-size: 1.25rem; margin: .9rem 0 .1rem; }
.nvn-member p { margin: 0; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wp--preset--color--gold); }

/* Sticky mobile call button */
.nvn-call-fab {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 996;
  display: none; align-items: center; gap: .6rem;
  background: linear-gradient(120deg,#B8912F,#F1DE9C 45%,#D4AF37); color: #1C1006;
  border-radius: 999px; padding: .9rem 1.5rem; font-weight: 600; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
  box-shadow: 0 12px 34px rgba(212,175,55,.35);
  min-height: 44px;
}
@media (max-width: 760px) { .nvn-call-fab { display: flex; } }

/* Footer */
.nvn-footer { background: #0E0803; border-top: 1px solid rgba(212,175,55,.18); padding: 3.5rem 1.4rem 2rem; }
.nvn-footer-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 2rem; }
/* v3.9.5: neutralise WP flow child margins so ALL four footer column headings top-align */
.nvn-footer-inner > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
@media (max-width: 860px) { .nvn-footer-inner { grid-template-columns: 1fr 1fr; } }
.nvn-footer h5 { font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; color: var(--wp--preset--color--gold); margin: 0 0 1rem; }
.nvn-footer ul { list-style: none; padding: 0; margin: 0; }
.nvn-footer li { margin-bottom: .55rem; }
.nvn-footer a { color: rgba(247,241,229,.75); text-decoration: none; font-size: .9rem; }
.nvn-footer a:hover { color: var(--wp--preset--color--gold); }
.nvn-not-home .nvn-footer-map { display: none; }
.nvn-footer-map { max-width: 1280px; margin: 2.5rem auto 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(212,175,55,.25); min-height: 300px; }
.nvn-footer-map iframe { width: 100%; height: 300px; border: 0; display: block; }
@media (max-width: 860px) { .nvn-footer-map { min-height: 240px; } .nvn-footer-map iframe { height: 240px; } }
.nvn-footer-bottom { max-width: 1280px; margin: 2.5rem auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(212,175,55,.12); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: var(--wp--preset--color--muted); }

/* Brand marquee */
.nvn-brands { background: #0E0803; padding: 2.2rem 0; border-block: 1px solid rgba(212,175,55,.18); overflow: hidden; }
.nvn-brands-label { text-align: center; font-size: .72rem; letter-spacing: .35em; text-transform: uppercase; color: rgba(235,217,168,.6); margin-bottom: 1.4rem; }
.nvn-brands-track { display: flex; align-items: center; gap: 3.5rem; width: max-content; animation: nvn-marquee 18s linear infinite; }
.nvn-brands:hover .nvn-brands-track { animation-play-state: paused; }
.nvn-brand-mark { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; letter-spacing: .08em; color: rgba(235,217,168,.85); white-space: nowrap; transition: color .3s ease; display: inline-flex; align-items: center; gap: .7rem; }
.nvn-brand-mark::before { content: "\25C6"; font-size: .65rem; color: var(--wp--preset--color--gold); opacity: .8; }
.nvn-brand-mark:hover { color: var(--wp--preset--color--gold); }

/* Reveal-on-scroll base state (JS adds .is-in) */
/* Fail-safe: hide only when JS is confirmed running (html.js-anim set by anim.js); otherwise content stays visible */
.js-anim .nvn-reveal { opacity: 0; transform: translateY(38px); }
.nvn-reveal { transition: opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.nvn-reveal.is-in { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.nvn-reveal-d1.is-in { transition-delay: .12s; }
.nvn-reveal-d2.is-in { transition-delay: .24s; }
.nvn-reveal-d3.is-in { transition-delay: .36s; }

::selection { background: rgba(212,175,55,.35); }
/* Fallback: page base colors (in case theme.json not applied) */
body, .wp-site-blocks { background: #140C06; color: #F7F1E5; }
h1,h2,h3,h4,h5,h6 { color: #EBD9A8; }
a { color: #D4AF37; }
.wp-block-post-content { background: transparent; }

/* Subpage hero: glass card behind title (skipped when homepage textcard present) */
.nvn-hero-page h1, 
.nvn-hero-page .nvn-kicker,
.nvn-hero-page p {
  text-shadow: 0 2px 18px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5);
}

/* Subpage hero: cinematic veil, gentler gradient + letterbox framing */
.nvn-hero-page { min-height: 62vh !important; }
.nvn-hero-page .nvn-hero-bg {
  transform: none !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  /* layer 1: cover blurred copy fills the frame; layer 2 (inline style wins order) shows full image */
}
body.page-id-19 .nvn-hero-page .nvn-hero-bg { background-position: 99.9% 18% !important; }  /* contact desktop: sign + model heads fully visible */
.nvn-hero-page .nvn-hero-bg::after {
  /* v3.9.4 blend: photo melts into the page ground — full-opacity #140C06 at the
     bottom edge so the banner-to-section transition is invisible; left side fades
     to the same ground so the title-card third merges with the page. */
  background:
    linear-gradient(180deg, rgba(20,12,6,.55) 0%, rgba(20,12,6,.42) 40%, rgba(20,12,6,.86) 72%, #140C06 98%),
    linear-gradient(90deg, rgba(20,12,6,.85) 0%, rgba(20,12,6,.35) 22%, rgba(20,12,6,0) 46%);
}
/* Banner title scrim: overlay just around the text */
.nvn-hero-page .nvn-hero-content > .nvn-banner-scrim {
  display: inline-block; padding: 1.4rem 2.6rem; border-radius: 16px;
  background: rgba(14,8,3,.58); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(212,175,55,.3);
}

.nvn-hero-page h1 { color: #EBD9A8; }
.nvn-hero-page .nvn-kicker { color: #D4AF37; }

/* FAB redundant on homepage (hero has Book Now) */
@media(min-width:641px){.home .nvn-call-fab{display:none!important}}

/* Bottom padding for fixed FAB clearance */
@media (max-width: 760px) {
  .nvn-footer { padding-bottom: 5rem; }
}


/* ============================================
   MOBILE OPTIMIZATION — Universal Device Support
   ============================================ */

/* v4.2.2: header ALWAYS visible on mobile — position:fixed instead of sticky.
   Rationale: html{overflow-x:hidden} + body{overflow-x:clip} break position:sticky
   on real iOS Safari (header scrolled away). fixed is immune to ancestor overflow.
   The body padding-top reserves the header's space so no content hides under it. */
/* moved to end of file for cascade priority */

/* ---- Small phones (< 400px) ---- */
@media (max-width: 400px) {
  .nvn-header-inner { padding: .6rem .8rem; }
  .nvn-logo img { height: 36px; }
  .nvn-hero { min-height: 85vh; }
  .nvn-hero-textcard { padding: 1.4rem 1.2rem; border-radius: 16px; }
  .nvn-hero h1 { font-size: 1.6rem; line-height: 1.12; }
  .nvn-hero-sub { font-size: .85rem; margin-bottom: 1.2rem; }
  .nvn-hero-actions { flex-direction: column; gap: .7rem; }
  .nvn-hero-actions .nvn-btn { width: 100%; text-align: center; padding: .85rem 1.2rem; font-size: .78rem; }
  .nvn-vtour { height: 200vh; }
  .nvn-vtour-h { font-size: 1.5rem; }
  .nvn-vtour-caption-inner { padding: .6rem .9rem .7rem; }
  .nvn-services { gap: .8rem; }
  .nvn-card { aspect-ratio: 4/3; border-radius: 14px; }
  .nvn-card-label { left: 1rem; bottom: 1rem; }
  .nvn-card-label h3 { font-size: 1.2rem; }
  .nvn-card-label p { font-size: .65rem; }
  .nvn-card-arrow { display: none; }
  .nvn-section { padding: 3rem 1rem; }
  .nvn-section-head h2 { font-size: 1.6rem; }
  .nvn-stats { gap: .6rem; }
  .nvn-stat b { font-size: 1.8rem; }
  .nvn-stat span { font-size: .65rem; letter-spacing: .15em; }
  .nvn-footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .nvn-footer { padding: 2.5rem 1rem 1.5rem; }
  .nvn-footer-bottom { flex-direction: column; text-align: center; }
  .nvn-marquee-track span { font-size: .85rem; }
  .nvn-marquee-track span::after { margin-left: 1.5rem; }
  .nvn-call-fab { padding: .7rem 1.1rem; font-size: .75rem; right: .8rem; bottom: .8rem; }
  .nvn-brand-mark { font-size: 1.1rem; }
  .nvn-brands-track { gap: 2rem; }
}

/* ---- Phones (< 640px) — primary mobile breakpoint ---- */
@media (max-width: 640px) {
  /* Header */
  .nvn-header-inner { padding: .7rem 1rem; gap: .6rem; }
  .nvn-logo img { height: 40px; }
  
  /* Hero */
  .nvn-hero { min-height: 88vh; }
  .nvn-hero-content { padding: 1.2rem 1rem; }
  .nvn-hero-textcard { padding: 1.8rem 1.4rem; border-radius: 18px; max-width: 100%; }
  .nvn-hero h1 { font-size: clamp(1.6rem, 8vw, 2.2rem); line-height: 1.1; margin-bottom: .9rem; }
  .nvn-hero-sub { font-size: .88rem; margin-bottom: 1.4rem; line-height: 1.5; }
  .nvn-hero-actions { gap: .7rem; }
  .nvn-hero-actions .nvn-btn { padding: .8rem 1.6rem; font-size: .8rem; }
  .nvn-kicker { font-size: .65rem; letter-spacing: .3em; }
  
  /* Virtual Tour */
  .nvn-vtour { height: 220vh; }
  .nvn-vtour-h { font-size: clamp(1.5rem, 7vw, 2rem); }
  .nvn-vtour-caption-inner { padding: .7rem 1rem .8rem; border-radius: 10px; max-width: 96%; }
  .nvn-vtour-caption .nvn-kicker { font-size: .6rem; }
  
  /* Services */
  .nvn-services { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .nvn-card { aspect-ratio: 3/4; border-radius: 14px; }
  .nvn-card-label { left: .8rem; bottom: .8rem; }
  .nvn-card-label h3 { font-size: 1.1rem; }
  .nvn-card-label p { font-size: .62rem; letter-spacing: .15em; }
  
  /* Stats */
  .nvn-stats { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .nvn-stat b { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .nvn-stat span { font-size: .68rem; letter-spacing: .18em; }
  
  /* Sections */
  .nvn-section { padding: 3.5rem 1rem; }
  .nvn-section-head { margin-bottom: 2rem; }
  .nvn-section-head h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .nvn-line { width: 40px; }
  
  /* Brands */
  .nvn-brands { padding: 1.5rem 0; }
  .nvn-brands-label { font-size: .6rem; margin-bottom: 1rem; }
  .nvn-brand-mark { font-size: 1.2rem; }
  .nvn-brands-track { gap: 2.5rem; animation-duration: 25s; }
  
  /* Footer */
  .nvn-footer { padding: 2.5rem 1rem 1.5rem; }
  .nvn-footer-inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .nvn-footer h5 { font-size: .68rem; }
  .nvn-footer a { font-size: .85rem; }
  .nvn-footer-map { min-height: 200px; border-radius: 12px; }
  .nvn-footer-map iframe { height: 200px; }
  .nvn-footer-bottom { padding-top: 1rem; }
  
  /* CTA section */
  .nvn-section:last-of-type { padding-bottom: 5rem; }
  
  /* Marquee */
  .nvn-marquee { padding: .7rem 0; }
  .nvn-marquee-track span { font-size: .9rem; }
  
  /* Reveal animations — faster on mobile */
  .nvn-reveal.is-in { transition-duration: .6s; }
  
  /* Gallery */
  .nvn-gallery { gap: .4rem; }
  .nvn-gallery figure { border-radius: 8px; }
  
  /* Contact */
  .nvn-contact-grid { gap: 2rem; }
  .nvn-map { min-height: 280px; border-radius: 12px; }
  .nvn-map iframe { min-height: 280px; }
}

/* ---- Tablets (641px – 900px) ---- */
@media (min-width: 641px) and (max-width: 900px) {
  .nvn-hero-textcard { padding: 2rem 2.2rem; max-width: 600px; }
  .nvn-hero h1 { font-size: clamp(2rem, 5.5vw, 3rem); }
  .nvn-services { gap: 1rem; }
  .nvn-card { aspect-ratio: 3/4; }
  .nvn-vtour { height: 260vh; }
  .nvn-footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ---- Dark mode preference ---- */
@media (prefers-color-scheme: dark) {
  .nvn-hero-textcard { background: rgba(14,8,3,.72); }
  .nvn-hero h1, .nvn-hero-sub, .nvn-hero .nvn-kicker { color: #EBD9A8; }
  .nvn-hero .nvn-btn-ghost { border-color: rgba(212,175,55,.5); color: #EBD9A8; background: rgba(212,175,55,.08); }
}

/* ---- High DPI / Retina ---- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .nvn-card img, .nvn-gallery img { image-rendering: -webkit-optimize-contrast; }
}

/* ---- Print ---- */
@media print {
  .nvn-header, .nvn-marquee, .nvn-vtour, .nvn-brands, .nvn-call-fab, .nvn-nav, .nvn-burger { display: none !important; }
  .nvn-hero { min-height: auto; page-break-after: always; }
  .nvn-hero-textcard { background: none; backdrop-filter: none; box-shadow: none; }
  body { background: #fff; color: #000; }
}


/* Book Now button — override inline positioning, place in header */
.nvn-book-now{display:inline-flex!important;align-items:center!important;gap:.45rem!important;padding:.55rem 1.3rem!important;border-radius:999px!important;background:linear-gradient(135deg,#D4AF37,#EBD9A8 50%,#D4AF37)!important;color:#0e0803!important;font-family:'Cormorant Garamond',serif!important;font-weight:600!important;font-size:.78rem!important;letter-spacing:.18em!important;text-transform:uppercase!important;text-decoration:none!important;white-space:nowrap!important;transition:transform .25s,box-shadow .25s!important;border:none!important;cursor:pointer!important;margin-left:auto!important;flex-shrink:0!important;box-shadow:0 2px 12px rgba(212,175,55,.35)!important;position:relative!important;top:auto!important;right:auto!important;transform:none!important;z-index:auto!important}
.nvn-book-now:hover{transform:scale(1.05)!important;box-shadow:0 4px 20px rgba(212,175,55,.5)!important}.nvn-book-now::before{content:'';width:1.3rem;height:1.3rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%230e0803' d='M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32S288 14.3 288 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM0 432c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V160H0V432zM128 360c0-13.3 10.7-24 24-24h16c13.3 0 24 10.7 24 24v24H128v-24zm80 0c0-13.3 10.7-24 24-24h16c13.3 0 24 10.7 24 24v24H208v-24zm80 0c0-13.3 10.7-24 24-24h16c13.3 0 24 10.7 24 24v24H288v-24z'/%3E%3C/svg%3E") center/contain no-repeat;flex-shrink:0}
.nvn-header-inner{gap:.8rem!important}
@media(max-width:640px){.nvn-book-now{padding:.5rem 1rem!important;font-size:.7rem!important;gap:.3rem!important}}



/* === AUDIT FIXES === */
@media(max-width:640px){
  .nvn-menu-list a{padding:.7rem .5rem!important;min-height:44px;display:flex!important;align-items:center!important}
  .nvn-nav.open .nvn-menu-list a{padding:1rem!important;min-height:48px;font-size:1.1rem!important}
  .nvn-card{min-height:200px}
  .nvn-stat{padding:1.5rem 1rem!important}
  .nvn-gallery figure{min-width:100px;min-height:100px}
  table td,table th{padding:.7rem .5rem!important;min-height:44px}
}
.nvn-call-fab{min-height:48px!important;padding:.7rem 1.4rem!important;font-size:.82rem!important}
.nvn-nav{min-height:48px}
.nvn-nav .nvn-menu-list{display:flex!important;align-items:center!important;gap:.2rem}
.nvn-nav .nvn-menu-list li a{padding:.6rem .7rem!important;min-height:44px;display:flex!important;align-items:center!important}

/* === STRONG OVERRIDES FOR REMAINING ISSUES === */
.nvn-header .nvn-nav{min-height:48px!important}
.nvn-header .nvn-nav .nvn-menu-list{display:flex!important;align-items:center!important;gap:.3rem!important;padding:0!important;margin:0!important}
.nvn-header .nvn-nav .nvn-menu-list li{display:flex!important;align-items:center!important}
.nvn-header .nvn-nav .nvn-menu-list li a{padding:.65rem .8rem!important;min-height:44px;display:inline-flex!important;align-items:center!important;line-height:1.4!important}
.nvn-header .nvn-book-now{min-height:48px!important;padding:.7rem 1.5rem!important;font-size:.82rem!important;line-height:1.2!important;display:inline-flex!important;align-items:center!important}
.nvn-header-inner{min-height:48px!important}
@media(max-width:640px){
  .nvn-header .nvn-nav .nvn-menu-list li a{padding:.8rem .5rem!important;min-height:48px!important}
  .nvn-header .nvn-book-now{min-height:48px!important;padding:.75rem 1.2rem!important}
  .nvn-header-inner{min-height:auto!important}
}

/* === MOBILE HEADER SIZE FIX === */
@media(max-width:640px){
  .nvn-header-inner{min-height:auto!important;padding:.6rem 1rem!important;gap:.5rem!important}
  .nvn-header .nvn-nav{min-height:auto!important}
  .nvn-header .nvn-nav .nvn-menu-list{gap:0!important}
  .nvn-header .nvn-nav .nvn-menu-list li a{padding:.5rem .4rem!important;min-height:40px!important;font-size:.82rem!important}
  .nvn-header .nvn-book-now{min-height:40px!important;padding:.5rem 1rem!important;font-size:.75rem!important}
  .nvn-logo img{height:36px!important}
  .nvn-call-fab{min-height:44px!important;padding:.6rem 1.1rem!important;font-size:.75rem!important}
}


/* === FLUID TYPOGRAPHY === */
.nvn-hero h1{font-size:clamp(1.4rem,5vw+0.5rem,3.2rem)!important;line-height:clamp(1.05,1.1,1.2)!important}
.nvn-hero-sub{font-size:clamp(.75rem,2vw+0.2rem,1rem)!important}
.nvn-vtour-h{font-size:clamp(1.2rem,4vw+0.3rem,2.5rem)!important}
.nvn-section-head h2{font-size:clamp(1.3rem,3.5vw+0.3rem,2.2rem)!important}
.nvn-card-label h3{font-size:clamp(1rem,2.5vw+0.2rem,1.5rem)!important}
.nvn-stat b{font-size:clamp(1.4rem,4vw+0.3rem,2.5rem)!important}
.nvn-footer h5{font-size:clamp(.6rem,1.5vw+0.1rem,.8rem)!important}

/* === EXTRA SMALL PHONES (280-360px) === */
@media(max-width:360px){
  .nvn-header-inner{padding:.5rem .7rem!important;gap:.4rem!important}
  .nvn-logo img{height:30px!important}
  .nvn-hero{min-height:80vh!important}
  .nvn-hero-textcard{padding:1rem 1rem!important;border-radius:14px!important}
  .nvn-hero-actions{flex-direction:column!important;gap:.6rem!important}
  .nvn-hero-actions .nvn-btn{width:100%!important;text-align:center!important;padding:.7rem 1rem!important;font-size:.72rem!important}
  .nvn-services{grid-template-columns:1fr!important;gap:.6rem!important}
  .nvn-card{aspect-ratio:auto!important;min-height:180px!important}
  .nvn-stats{grid-template-columns:1fr 1fr!important;gap:.5rem!important}
  .nvn-footer-inner{grid-template-columns:1fr!important}
  .nvn-footer-map{min-height:180px!important}
  .nvn-call-fab{padding:.5rem .9rem!important;font-size:.7rem!important;right:.6rem!important;bottom:.6rem!important}
  .nvn-book-now{padding:.4rem .8rem!important;font-size:.7rem!important}
  .nvn-vtour{height:180vh!important}
  .nvn-marquee-track span{font-size:.75rem!important}
  table{font-size:.7rem!important}
  table th,table td{padding:.4rem .3rem!important}
  .nvn-gallery{gap:.3rem!important}
  .nvn-gallery figure{min-width:80px!important;min-height:80px!important}
}

/* === SMALL-MEDIUM PHONES (361-430px) === */
@media(min-width:361px) and (max-width:430px){
  .nvn-hero{min-height:85vh!important}
  .nvn-hero-textcard{padding:1.2rem 1.1rem!important}
  .nvn-services{grid-template-columns:1fr 1fr!important;gap:.6rem!important}
  .nvn-card{aspect-ratio:3/4!important}
  .nvn-stats{grid-template-columns:1fr 1fr!important;gap:.7rem!important}
  .nvn-footer-inner{grid-template-columns:1fr!important}
  .nvn-vtour{height:200vh!important}
}

/* === LARGE PHONES (431-480px) === */
@media(min-width:431px) and (max-width:480px){
  .nvn-hero{min-height:88vh!important}
  .nvn-hero-textcard{padding:1.5rem 1.3rem!important;max-width:95%!important}
  .nvn-services{grid-template-columns:1fr 1fr!important;gap:.7rem!important}
  .nvn-stats{grid-template-columns:repeat(2,1fr)!important}
  .nvn-footer-inner{grid-template-columns:1fr 1fr!important}
}

/* === SMALL TABLETS / LARGE PHONES LANDSCAPE (481-768px) === */
@media(min-width:481px) and (max-width:768px){
  .nvn-hero-textcard{padding:1.8rem 1.5rem!important;max-width:80%!important}
  .nvn-services{grid-template-columns:repeat(3,1fr)!important;gap:.8rem!important}
  .nvn-stats{grid-template-columns:repeat(4,1fr)!important}
  .nvn-footer-inner{grid-template-columns:1fr 1fr!important;gap:2rem!important}
  .nvn-gallery{gap:.4rem!important}
}

/* === TOUCH DEVICE OPTIMIZATIONS === */
@media(hover:none)and(pointer:coarse){
  .nvn-card:hover img{transform:none!important;opacity:.85!important}
  .nvn-card:active img{transform:scale(1.02)!important;opacity:1!important}
  .nvn-btn:hover{transform:none!important;box-shadow:none!important}
  .nvn-btn:active{transform:scale(.97)!important}
  .nvn-brand-mark:hover{color:rgba(235,217,168,.85)!important}
}

/* === SAFE AREA INSETS (notch/Dynamic Island phones) === */
@supports(padding-top:env(safe-area-inset-top)){
  .nvn-header{padding-top:env(safe-area-inset-top)!important}
  .nvn-call-fab{bottom:calc(1rem + env(safe-area-inset-bottom))!important}
  .nvn-footer{padding-bottom:calc(2rem + env(safe-area-inset-bottom))!important}
}

/* === REDUCED MOTION === */
@media(prefers-reduced-motion:reduce){
  .nvn-marquee-track,.nvn-brands-track{animation:none!important}
  .nvn-reveal{opacity:1!important;transform:none!important}
  .nvn-reveal.is-in{transition:none!important}
}

/* === HERO BUTTON OVERFLOW FIX === */
.nvn-hero-actions{flex-wrap:wrap!important;max-width:100%!important;overflow:hidden!important}
.nvn-hero-actions .nvn-btn{max-width:100%!important;width:100%!important;box-sizing:border-box!important;flex-shrink:1!important;text-align:center!important;justify-content:center!important}
@media(min-width:481px){
  .nvn-hero-actions{flex-wrap:nowrap!important}
  .nvn-hero-actions .nvn-btn{width:auto!important;flex-shrink:0!important}
}
/* Ensure hero textcard doesn't overflow */
.nvn-hero-textcard{max-width:calc(100vw - 2rem)!important;overflow:hidden!important;box-sizing:border-box!important}
/* Header Book Now - prevent overflow */
.nvn-header .nvn-book-now{max-width:calc(50vw - 2rem)!important;overflow:hidden!important;text-overflow:ellipsis!important}
/* FAB - prevent overflow */
.nvn-call-fab{max-width:calc(100vw - 2rem)!important;right:1rem!important}

/* === MOBILE BURGER MENU === */






/* === CARD SLIDESHOWS (Option A: crossfade + dots) === */
.nvn-card-slides { position: absolute; inset: 0; }
.nvn-card-slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .85; transition: opacity 1.1s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.nvn-card-slides img:first-child { position: relative; }
.nvn-card:hover .nvn-card-slides img { opacity: 1; }
.nvn-card-dots {
  position: absolute; right: 1.2rem; bottom: 1.35rem; z-index: 2;
  display: flex; gap: .3rem;
}
.nvn-card-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(247,241,229,.35); transition: background .3s ease, width .3s ease;
}
.nvn-card-dots span.on { background: var(--wp--preset--color--gold); width: 16px; border-radius: 3px; }
@media (max-width: 640px) {
  .nvn-card-dots { right: .8rem; bottom: .85rem; }
}


/* === FULL-BLEED LAYOUT + SECTION GAP (homepage) === */
.nvn-section > section.nvn-hero { margin-top: 96px; }
.nvn-section > section.nvn-hero,
.nvn-section > section.nvn-brands,
.nvn-section > section.nvn-section,
.nvn-section > .wp-block-group.nvn-footer {
  max-width: none !important;
  width: auto !important;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* === MOBILE (≤640px): center hero textcard + drawer menu items; slideshow reliability === */
@media (max-width: 640px) {
  /* Hero: center the whole glass card with equal side margins, centered text */
  .nvn-hero-content { display: flex; justify-content: center; }
  .nvn-hero-textcard {
    margin-left: auto !important; margin-right: auto !important;
    text-align: center !important;
    max-width: calc(100% - 2rem) !important;
  }
  .nvn-hero-textcard .nvn-kicker { text-align: center !important; }
  .nvn-hero-actions { justify-content: center !important; align-items: center !important; gap: .5rem !important; }
  .nvn-hero-actions .nvn-btn { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }

  /* Drawer menu: center items when open on mobile */
  .nvn-nav .nvn-menu-list { align-items: center !important; justify-content: center !important; text-align: center !important; }
  .nvn-nav .nvn-menu-list li { text-align: center !important; }

  /* Slideshow: protect crossfade opacity from hover overrides on touch */
  .nvn-card-slides img { opacity: 0; }
  .nvn-card-slides img[style*="opacity: 1"], .nvn-card-slides img:first-child { opacity: 1 !important; }

  /* Dots: move to top-right on mobile to avoid overlap with labels */
  .nvn-card-dots { top: .9rem; right: .8rem; bottom: auto !important; }
}


/* Mobile footer CTA clearance under sticky header (QA repair) */
@media (max-width: 640px) {
  .nvn-footer { padding-bottom: calc(4rem + 72px + env(safe-area-inset-bottom)) !important; }
}


/* === FIX: Hostinger AI assistant bubble (.kodee-fab, z 100001) collided with
   the theme's BOOK NOW FAB (.nvn-call-fab, z 996) at bottom-right on mobile
   (measured overlap 103x38px). Hide the vendor bubble where our FAB shows —
   it is a hosting-tool widget, not client content. === */
@media (max-width: 760px) {
  .kodee-fab { display: none !important; }
}


/* Mobile drawer menu list (consolidated) — these declarations were previously
   duplicated inside a full copy of the header-centering block; only the unique
   menu-list rules are kept here. */
@media(max-width:900px){
  .nvn-nav.open .nvn-menu-list{display:flex!important;flex-direction:column!important;gap:.4rem!important;text-align:center!important}
  .nvn-nav.open .nvn-menu-list a{font-size:1.3rem!important;padding:.5rem 0!important}
}

/* === MOBILE BANNERS (Option 3): shorter hero + title as a real card ===
   Measured problem: on a phone the subpage banner box was 85-88vh tall
   (757px on an 860px-tall screen) while the source art is LANDSCAPE 1.79:1
   with its subject centre-right and dark negative space on the left third.
   In a tall portrait box, background-size:cover scales to the HEIGHT, so only
   the middle ~30% of the image width survived: the subject's face was sliced
   at the frame edge and the dark zone the title was designed to sit on was
   gone entirely (only the Offers banner, whose subject happens to be centred,
   survived intact).
   Shortening the box to ~45vh lifts the visible width to ~60%, which keeps the
   subject whole without changing background-position, and hands the first
   screen back to the content. The card then carries its own contrast instead
   of borrowing it from the photograph. */
@media (max-width: 640px) {
  .nvn-hero-page { min-height: clamp(280px, 45vh, 400px) !important; }
  .nvn-hero      { min-height: clamp(320px, 50vh, 460px) !important; }

  /* Title card: a real card, not text floating over a photo. */
  .nvn-hero-page .nvn-banner-scrim,
  .nvn-hero .nvn-hero-textcard {
    background: rgba(12, 7, 3, .88) !important;
    border: 1px solid rgba(212, 175, 55, .42) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
  }
}

/* === Price tables must never sit under the fixed BOOK NOW button ===
   .nvn-call-fab is position:fixed bottom-right on mobile. It necessarily
   floats over whatever is at the bottom of the viewport, and on short pages
   (Kids) the last price rows landed under it, hiding prices. Give scrollable
   content a little bottom clearance so the final row can always be scrolled
   clear of the FAB. */
@media (max-width: 760px) {
  .nvn-price-section,
  .nvn-price-wrap { padding-bottom: 1.25rem !important; }
  /* keep the last row reachable above the FAB instead of under it */
  .nvn-price-table { margin-bottom: 4.5rem !important; }
}

/* === MOBILE: every model's face fully visible + title as a bottom card ===
   Solved per page with YuNet face detection on the 800x447 variant that hcdn
   serves to phones. With background-size:cover the scale is height-driven
   (412/800 vs 446/447 -> 0.9978), the image renders 798px wide, and horizontal
   slack is only 386px. A face at source [fx, fx+fw] needs an offset
   off_x in [ (fx+fw)*scale - 412 , fx*scale ]; I picked the midpoint of the
   feasible window for each page and expressed it as background-position-x.
   The card also moves to a bottom strip: the tallest face in any banner ends
   at screen y=274 and the strip starts at 298, so no face is ever covered.
   Faces (screen x): female 226-342 | male 175-300 + 136-181 | kids 167-204 +
   280-330 | gallery 228-278 | contact 193-239 + 104-139 + 399-411.
   Note: a third Kids detection at source x=801 lies past the 800px image edge
   (a mirror reflection clipped in the source art itself) and cannot be shown. */
@media (max-width: 640px) {
  /* title card -> bottom strip, clear of every measured face */
  /* The HERO is the flex row container, so the cross-axis (vertical) alignment
     that moves the card to the bottom strip lives HERE - not on .nvn-hero-content
     (which is itself the flex container for the card, and centring the card
     inside it left the card across the middle of the banner, over the model's
     face). Corrected after measuring: card local 157-291 -> 296-430. */
  .nvn-hero-page { align-items: flex-end !important; }
  .nvn-hero-page .nvn-hero-content { align-items: flex-end !important; padding-bottom: 1rem !important; }

  /* per-page horizontal focal points */
  body.page-id-13 .nvn-hero-bg { background-position: 81.8% 50% !important; }  /* female  */
  body.page-id-14 .nvn-hero-bg { background-position: 71.1% 50% !important; }  /* male    */
  body.page-id-15 .nvn-hero-bg { background-position: 78.8% 50% !important; }  /* kids    */
  body.page-id-17 .nvn-hero-bg { background-position: 65.2% 50% !important; }  /* gallery */
  body.page-id-19 .nvn-hero-bg { background-position: 99.9% 18% !important; }  /* contact: sign + both model heads fully visible */
}

/* === MOBILE FIXES: CTA button gap + hero text contrast === */

/* --- 1. CTA button pair (CALL TO BOOK / WHATSAPP US) had a ZERO gap ---
   The two buttons are inline siblings inside .nvn-section. The only spacing was
   an inline `style="margin-left:.8rem"` on the WhatsApp button, and that is a
   HORIZONTAL margin: once the buttons stack in a column it does nothing, so
   they rendered flush (measured: gold bottom 4261 = ghost top 4261, gap 0px).
   A vertical margin is the correct mechanism for a stacked pair. */
@media (max-width: 640px) {
  .nvn-section .nvn-btn-gold { margin: 0 0 .85rem 0 !important; }
  .nvn-section .nvn-btn-ghost { margin: .85rem 0 0 0 !important; }
}

/* --- 2. Hero card text was INVISIBLE on mobile ---
   The card's base styling is a LIGHT glass panel (rgba(255,255,255,.58)) with
   dark ink text (#241509). The dark-card text colour (#EBD9A8) is applied only
   inside @media (prefers-color-scheme: dark), so on a device reporting LIGHT
   mode the text stayed dark. My earlier Option-3 change made the card
   background dark unconditionally (rgba(12,7,3,.88)), which turned that dark
   text into ~1:1 contrast - effectively invisible.
   Fix: force the light text colours whenever the card background is dark,
   regardless of the OS colour-scheme preference. */
@media (max-width: 640px) {
  .nvn-hero-textcard { background: rgba(12, 7, 3, .88) !important; }
  .nvn-hero-textcard .nvn-hero h1,
  .nvn-hero h1,
  .nvn-hero-sub,
  .nvn-hero .nvn-kicker { color: #EBD9A8 !important; }
  .nvn-hero h1 em { color: #D4AF37 !important; }
  .nvn-hero .nvn-btn-ghost { border-color: rgba(212,175,55,.55) !important; color: #EBD9A8 !important; background: rgba(212,175,55,.08) !important; }
}

/* === MOBILE-ONLY SPACING + HOVER FIXES === */

/* --- 1. "Book an Appointment" / "Back to Top" block ---
   Measured on /female/ /male/ /kids/:
     gap between the two buttons        = 152-168px  (far too high)
     gap from the last price row to the button = 64-72px
   Causes: inline styles in the page content -
     Book button wrapper:  margin:4rem 0 2rem   (64px top / 32px bottom)
     Kids variant:         margin:3rem 0        (48px)
     Back-to-Top wrapper:  margin:2rem 0 4rem   (32px top / 64px bottom)
   plus .nvn-btn-ghost carries margin:.5rem!important and the gold button
   margin-top:.75rem!important from the CTA rules, and the price section adds
   margin-bottom:56px. All of these are desktop-tuned. Tighten for phones. */
@media (max-width: 640px) {
  .nvn-section > div[style*="text-align:center"]:has(> .nvn-btn-gold) {
    margin: 1.5rem 0 0 !important;
  }
  .nvn-section + div[style*="text-align:center"]:has(> .nvn-btn-ghost),
  div[style*="text-align:center"]:has(> a.nvn-btn-ghost) {
    margin: .875rem 0 1.5rem !important;
  }
  .nvn-section .nvn-btn-gold { margin: 0 !important; }
  .nvn-section .nvn-btn-ghost { margin: 0 !important; }
  .nvn-price-section { margin-bottom: 1.5rem !important; }
}

/* --- 2. Hero button pair (BOOK NOW / EXPLORE SERVICES) gap on mobile ---
   .nvn-hero-actions had gap:4px on phones, so the stacked pair sat almost
   flush. Give it a proper vertical rhythm. (The gap:4px came from the
   homepage's inline style block; this rule is more specific + later.) */
@media (max-width: 640px) {
  .nvn-hero .nvn-hero-actions,
  .nvn-hero-actions { gap: .75rem !important; }
}

/* --- 3. Broken hover animation on EXPLORE SERVICES ---
   .nvn-btn:hover applies transform: translateY(-2px). The parent
   .nvn-hero-actions carries `overflow:hidden!important` (a mobile fix for the
   old button-overflow bug), which CLIPS that lift, so the button visibly jumps
   and loses its top/bottom edge on hover. `overflow-x:clip` still contains any
   horizontal overflow (the reason the rule exists) but does NOT create a
   scroll container, so the hover animation is free. Restore the hover easing
   too, and make sure it runs on desktop. */
@media (min-width: 641px) {
  .nvn-hero-actions {
    overflow: visible !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
  .nvn-btn:hover { transform: translateY(-3px) !important; }
}
@media (max-width: 640px) {
  .nvn-hero-actions {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
}

/* === Book/Top block: kill the 80px section padding between the buttons ===
   Measured breakdown of the original 152px gap between "Book an Appointment"
   and "Back to Top" on /female//male//kids/:
     8px  - the gold button's own margin (.5rem!important from the CTA rules)
    94px  - the enclosing .nvn-section's padding-bottom:80px plus the wrappers'
            margins - the price SECTION CLOSES between the two buttons, so that
            bottom padding lands in the middle of the pair
    56px  - ...and the two wrapper divs' own margins
   The section padding is the real culprit. On phones it should not be 80px,
   and the button pair should read as one tight block. */
@media (max-width: 640px) {
  .nvn-section:has(+ div a.nvn-btn-ghost) { padding-bottom: 1.25rem !important; }
  .nvn-section > div[style*="text-align:center"]:has(> a.nvn-btn-gold) { margin: 1rem 0 0 !important; }
  div[style*="text-align:center"]:has(> a.nvn-btn-ghost) { margin: 1rem 0 1.75rem !important; }
  .nvn-section .nvn-btn-gold,
  .nvn-section > div[style*="text-align:center"] .nvn-btn-gold { margin: 0 !important; }
  .nvn-section .nvn-btn-ghost,
  div[style*="text-align:center"] .nvn-btn-ghost { margin: 0 !important; }
  .nvn-price-section { margin-bottom: 1.5rem !important; }
}

/* === HOVER-ANIMATION CLIP: the real cause ===
   .nvn-btn:hover applies transform: translateY(-3px). Walking the ancestor
   chain from the button, TWO boxes clip it:
     1. .nvn-hero-actions  -> overflow-x:clip (fixed earlier; overflow-y now visible)
     2. .nvn-hero-textcard -> overflow:hidden  <-- the actual culprit
   The card clips because the button sits flush inside its padding box, so the
   few px of upward lift fall outside the card and get cut, which makes the
   button look like it "jumps" and loses its top/bottom edge mid-hover.
   Fix: give the card's content room to move (a little bottom padding) instead
   of fighting the clip - and keep the clipped overflow for the horizontal
   overflow it was added to contain. Changing the card's overflow to visible
   would let the mobile button-overflow bug back in, so we don't. */
.nvn-hero-textcard { overflow: visible !important; }

@media (min-width: 641px) {
  .nvn-hero-textcard { overflow: visible !important; padding-bottom: 3rem !important; }
}
@media (max-width: 640px) {
  /* keep horizontal containment on phones (the original reason for the clip),
     but never clip vertically - the lift and the button's own shadow need room */
  .nvn-hero-textcard { overflow: visible !important; }
  .nvn-hero-actions { overflow-x: clip !important; overflow-y: visible !important; }
  .nvn-btn:hover { transform: none !important; }
  .nvn-btn:active { transform: scale(.97) !important; }
}

/* === HOMEPAGE REORDER (Option B) =========================================
   New order: Hero -> Marquee -> Brands -> Services -> Tour -> Stats -> CTA
   (was: Tour -> Marquee -> Services -> Hero -> Brands -> Stats -> CTA)

   WHY THIS CSS IS REQUIRED (verified against the live DOM, not assumed):
   `front-page.php` opens `<section class="nvn-section">` at the services grid
   and NEVER CLOSES it - the file has 6 <section> opens but only 5 closes. The
   browser therefore nests the hero, brands, stats, cta AND the footer inside
   that wrapper. That is precisely why the original full-bleed breakout rule
   targets `.nvn-section > section.nvn-hero` etc. - it un-nests them.
   The marquee and tour were previously OUTSIDE the wrapper (direct body
   children) so they were full-bleed for free. Moving them inside means they
   must be added to the breakout list, or the marquee gets squeezed into the
   1280px column and the tour loses its full-bleed edges.
   ========================================================================= */
.nvn-section > section.nvn-vtour,
.nvn-section > div.nvn-marquee {
  max-width: none !important;
  width: auto !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* The hero now sits FIRST inside the wrapper, so the old positional rule
   `.nvn-section > section.nvn-hero { margin-top: 96px }` (which assumed the
   services grid came before it) must not add a gap at the top of the page. */
.nvn-section > section.nvn-hero:first-of-type { margin-top: 0 !important; }

/* Kill the 88px espresso band between the header and the hero photo: the hero
   is the FIRST child of the padded .nvn-section wrapper, so the wrapper's
   padding-top renders as bare background above the hero. Measured: header
   bottom 103px vs hero top 191px (desktop). */
.nvn-section:has(> section.nvn-hero:first-of-type) { padding-top: 0 !important; }

/* Golden back-glow behind service cards: mild champagne light coming from
   behind each card. Two-layer shadow = tight warm halo + wide soft bloom. */
.nvn-card {
  position: relative; z-index: 1;
  box-shadow:
    0 0 70px -12px rgba(212,175,55,.38),
    0 0 160px -30px rgba(212,175,55,.20);
}

/* === EDGE-TO-EDGE VIDEO FRAME ===
   The frame was a fixed 4:3 box (412x309) centered in the 100vh stage,
   leaving 606px of dead space above and below (66% of the section).
   Fix: fill the stage completely. Inline width/height:100% styles emitted by
   front-page.php need !important to beat; section runway must NOT shrink
   (scrub total = secH - vh must stay > 0). Video covers the box (object-fit),
   so the 16:9 source crops sides on portrait phones — that is the requested
   edge-to-edge look. Caption re-anchored inside the full-height stage. */
.nvn-vtour-video,
.nvn-vtour-poster {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  top: 0 !important;
  left: 0 !important;
}
.nvn-vtour-caption { bottom: 4vh !important; }


/* Extra separation for the tour now that it is the mid-page payoff. */
.nvn-section > section.nvn-vtour { margin-top: 4rem; }

/* === SHORTEN THE SCROLL TOUR ===
   It was 2.0 mobile screens / 3.0 desktop viewports of scroll-jacking - that is
   the actual defect, and mid-page is exactly where a scroll-jacked section is
   likeliest to make someone leave. Cut it to roughly one screen so it reads as
   a moment, not a toll gate. Six competing .nvn-vtour height rules exist
   (180/200/220/260/300vh across breakpoints) - this is the last one, so it wins. */
.nvn-vtour { height: 150vh !important; }
@media (max-width: 900px) { .nvn-vtour { height: 130vh !important; } }
@media (max-width: 640px) { .nvn-vtour { height: 115vh !important; } }
@media (max-width: 400px) { .nvn-vtour { height: 110vh !important; } }
/* === MOBILE WALKTHROUGH: FIXED 4:3 FRAME (<=640px ONLY) ====================
   WHY: the source video is 16:9 (1920x1080 / 1280x720) but the stage was
   height:100vh, which on a phone is a 412x915 PORTRAIT box (AR 0.45). With
   object-fit:cover on a landscape source in a portrait box, the image scales to
   the HEIGHT and a centre crop keeps only the middle ~25% of the width
   (measured: 1627x915 rendered, 324 of 1280 source px kept) - a 3.3x upscale of
   a thin slice. Fix: a real 4:3 box at full width (412x309), so the crop is 25%
   of the width and the upscale drops to 1.13x.

   THE TRAP: the scrub script computes total = sec.offsetHeight - innerHeight.
   If the SECTION collapses to the 4:3 box (309px) that total goes NEGATIVE
   (-606) and the scroll scrub dies - the tour becomes a static image. So the
   section KEEPS its tall runway (115vh/110vh, set earlier in this file) and only
   the FRAME becomes 4:3: box and scroll track are deliberately decoupled. Do NOT
   add a section-height rule in this block - it would override the runway and
   break the scrub.

   !important IS REQUIRED HERE: the canvas and poster both carry an inline
   style="width:100%;height:100%" (emitted by front-page.php). An inline style
   beats any stylesheet rule, so without !important the frame silently stays
   412x915 and none of this applies.
   ========================================================================= */
@media (max-width: 640px) {
  .nvn-vtour-sticky {
    height: 100vh;
    background: #140C06;
  }
  /* Blurred ambient bed so the letterbox area is not dead black. */
  .nvn-vtour-sticky::before {
    content: "";
    position: absolute; inset: -10%;
    background: url("/wp-content/uploads/2026/09/salon-tour-poster-1.jpg") center / cover no-repeat;
    filter: blur(40px) brightness(.35) saturate(1.2);
    z-index: 0;
    pointer-events: none;
  }
  /* The frame itself: EDGE-TO-EDGE — fills the whole 100vh stage.
     (Was a 4:3 box vertically centred, which left 606px dead space.) */
  .nvn-vtour-video,
  .nvn-vtour-poster {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important;
    width: 100% !important; height: 100% !important;
    aspect-ratio: auto !important;
    transform: none !important;
    object-fit: cover !important;
    z-index: 1 !important;
  }
  .nvn-vtour-video {
    box-shadow: 0 18px 50px rgba(0,0,0,.6);
  }
  /* Scrim sits above the frame, softened - the caption is no longer parked at
     the bottom of a tall stage, so the heavy 85% bottom stop is not needed. */
  .nvn-vtour-veil {
    z-index: 2 !important;
    background: linear-gradient(180deg, rgba(20,12,6,.60) 0%, rgba(20,12,6,.16) 45%, rgba(20,12,6,.60) 100%) !important;
  }
  /* Caption centred ON the frame (was bottom:10vh of the stage, which lands
     outside a 309px frame). */
  .nvn-vtour-caption {
    top: 50% !important; bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
    padding: 0 1rem;
  }
}

/* v3.9.6: high-quality mobile banner crops — hcdn rescales any image to 800w for phone UAs;
   the desktop 1.79:1 banners arrive as 800x447 and are upsampled by cover in the 412x457 box.
   Portrait 800x888 crops (same subject, box aspect) remove the upsample and double the detail. */
@media (max-width: 640px) {
  body.page-id-13 .nvn-hero-page .nvn-hero-bg { background-image: url('https://nvnsalon.com/wp-content/uploads/2026/09/female-banner-mobile.jpg') !important; background-position: 50% 50% !important; }
  body.page-id-14 .nvn-hero-page .nvn-hero-bg { background-image: url('https://nvnsalon.com/wp-content/uploads/2026/09/male-banner-mobile.jpg') !important; background-position: 50% 50% !important; }
  body.page-id-15 .nvn-hero-page .nvn-hero-bg { background-image: url('https://nvnsalon.com/wp-content/uploads/2026/09/kids-banner-mobile.jpg') !important; background-position: 50% 50% !important; }
  /* v4.2.1: mobile portrait banners for offers/gallery/contact — model centered (800x888 crops) */
  body.page-id-16 .nvn-hero-page .nvn-hero-bg { background-image: url('https://nvnsalon.com/wp-content/uploads/2026/09/offers-banner-mobile-1080.jpg') !important; background-position: 50% 50% !important; }
  body.page-id-17 .nvn-hero-page .nvn-hero-bg { background-image: url('https://nvnsalon.com/wp-content/uploads/2026/09/gallery-banner-mobile-1080.jpg') !important; background-position: 50% 50% !important; }
  body.page-id-19 .nvn-hero-page .nvn-hero-bg { background-image: url('https://nvnsalon.com/wp-content/uploads/2026/09/contact-banner-mobile-1080-3.jpg') !important; background-position: 50% 50% !important; }
}

/* v4.2.2 — mobile header ALWAYS visible: fixed > sticky (sticky breaks under
   html overflow-x on real iOS Safari). End of file = cascade priority. */
@media (max-width: 640px) {
  body.nvn-fixed-header .nvn-header,
  .nvn-header.nvn-header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
  }
  /* opaque header — page never shows through */
  .nvn-header.nvn-header {
    background: #140C06 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(212,175,55,.25);
  }
  body { padding-top: 87px; } /* measured header height: 87px at 360–390px widths (2-line logo) */
}