/* ===========================================================
   NOSTALGIA HOME INTERIOR — Premium One-Page Slider
   Palette: Warm cream / charcoal / brass caramel / taupe
   Type: Fraunces (display) + Plus Jakarta Sans (body/UI)
=========================================================== */

:root{
  --cream:        #F5F1EA;
  --cream-soft:   #ECE5DA;
  --ink:          #2B2620;
  --ink-soft:     #51463C;
  --brass:        #B6884F;
  --brass-light:  #D9B98A;
  --taupe:        #8A7560;
  --white:        #FFFFFF;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, sans-serif;

  --ease: cubic-bezier(.65,0,.2,1);
  --dur: 900ms;

  --header-h: 88px; /* reserved space so header never overlaps slide content */
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  height:100%;
}
body{ overflow:hidden; } /* default: front-page slider, no scroll */

html:has(body.inner-page){
  overflow:auto;
}
body.inner-page{
  overflow:visible;
  height:auto;
}

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ink);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
}

a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
img{ display:block; max-width:100%; }
em{ font-style:italic; color:var(--brass); font-family: var(--font-display); }

/* ===================== LOADER ===================== */
.loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
  animation: nhiLoaderAutoHide 0s 2.5s forwards; /* CSS-only fallback if JS never hides this */
}
@keyframes nhiLoaderAutoHide{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}
.loader-mark{
  font-family:var(--font-display);
  font-size:2.4rem; letter-spacing:.4em;
  color:var(--brass-light);
  font-weight:300;
  animation: loaderPulse 1.4s ease-in-out infinite;
}
@keyframes loaderPulse{ 0%,100%{opacity:.35;} 50%{opacity:1;} }
.loader.hidden{ opacity:0; visibility:hidden; }

/* ===================== HEADER ===================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.6rem 3.2rem;
  pointer-events:none;
}
.site-header > *{ pointer-events:auto; }

.logo{
  display:flex; align-items:center; gap:.6rem;
  color:var(--cream);
}
.logo-mark{ color:var(--brass-light); font-size:1.1rem; }
.logo-text{
  font-family:var(--font-display);
  font-size:1.35rem; font-weight:500; letter-spacing:.06em;
  display:flex; flex-direction:column; line-height:1.1;
}
.logo-sub{
  font-family:var(--font-body); font-size:.6rem;
  letter-spacing:.32em; text-transform:uppercase;
  font-weight:500; color:var(--brass-light); margin-top:.2rem;
}

.main-nav ul{ display:flex; gap:2.4rem; }
.nav-link{
  font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(245,241,234,.72);
  font-weight:500;
  position:relative;
  padding-bottom:.35rem;
  transition: color .35s var(--ease);
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--brass-light);
  transition: width .4s var(--ease);
}
.nav-link:hover, .nav-link.active{ color:var(--cream); }
.nav-link.active::after, .nav-link:hover::after{ width:100%; }

.header-phone{
  font-size:.82rem; letter-spacing:.08em;
  color:var(--cream);
  display:flex; align-items:center; gap:.5rem;
  border:1px solid rgba(245,241,234,.28);
  padding:.65rem 1.3rem; border-radius:999px;
  transition: border-color .3s, background .3s;
}
.header-phone:hover{ border-color:var(--brass-light); background:rgba(182,136,79,.12); }
.phone-icon{ color:var(--brass-light); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:.4rem;
}
.nav-toggle span{ width:24px; height:2px; background:var(--cream); display:block; }

/* When the active slide has a light/cream background, flip header colours */
.site-header.on-light .logo,
.site-header.on-light .header-phone{ color:var(--ink); }
.site-header.on-light .logo-sub{ color:var(--brass); }
.site-header.on-light .nav-link{ color: rgba(43,38,32,.62); }
.site-header.on-light .nav-link:hover,
.site-header.on-light .nav-link.active{ color:var(--ink); }
.site-header.on-light .nav-link::after{ background:var(--brass); }
.site-header.on-light .header-phone{ border-color: rgba(43,38,32,.22); }
.site-header.on-light .header-phone:hover{ border-color:var(--brass); background:rgba(182,136,79,.1); }
.site-header.on-light .phone-icon{ color:var(--brass); }
.site-header.on-light .nav-toggle span{ background:var(--ink); }

/* ===================== SLIDES (fullpage, vertical, looping) ===================== */
.slides{
  position:relative; width:100%; height:100vh;
}

.slide{
  position:absolute; inset:0;
  width:100%; height:100vh;
  display:flex; align-items:flex-start;
  padding-top: var(--header-h); /* reserve header space so content never sits under it */
  box-sizing:border-box;
  opacity:0; visibility:hidden;
  transform: translateY(4%);
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease), visibility 1.1s var(--ease);
  z-index:1;
  overflow:hidden; /* prevent inactive slide content from bleeding into view */
}
.slide.active{
  opacity:1; visibility:visible; transform:translateY(0);
  z-index:2;
}
/* About slide: content can exceed viewport height — internal scroll
   inside .slide-content instead of clipping. */
#about .slide-content{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* Fallback: show the first slide by default in case JS hasn't run yet
   (slow connections, blocked scripts, etc.) so the page is never blank. */
.slide:first-of-type{
  opacity:1; visibility:visible;
}
.slide.prev{
  transform: translateY(-4%);
}
.slide.peeking{
  opacity:1; visibility:visible;
  z-index:3; /* above the current active slide while being revealed */
  transition:none !important;
}

.slide-bg{
  position:absolute; inset:0; overflow:hidden; z-index:0;
}
.slide-bg img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.08);
  transition: transform 9s linear;
  filter: saturate(0.92) brightness(.97);
}
.slide.active .slide-bg img{ transform: scale(1); }

.slide-overlay{
  position:absolute; inset:0;
  background: linear-gradient(115deg, rgba(43,38,32,.82) 0%, rgba(43,38,32,.55) 42%, rgba(43,38,32,.28) 100%);
}
/* Subtle film-grain texture for warmth — pure CSS, no image request */
.slide-bg::after{
  content:'';
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.4) 0, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.3) 0, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.35) 0, transparent 1px);
  background-size: 6px 6px, 9px 9px, 7px 7px;
}
.slide-overlay--light{
  background: linear-gradient(100deg, var(--cream) 0%, var(--cream) 55%, rgba(245,241,234,.6) 75%, rgba(245,241,234,.1) 100%);
}
.slide-overlay--dark{
  background: linear-gradient(115deg, rgba(43,38,32,.92) 0%, rgba(43,38,32,.74) 50%, rgba(43,38,32,.5) 100%);
}

.slide-content{
  position:relative; z-index:1;
  width:100%; max-width:1280px;
  margin: 0 auto;
  padding: 2.4rem 3.2rem 4rem;
  color:var(--cream);
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  -ms-overflow-style:none; scrollbar-width:none;
}
.slide-content::-webkit-scrollbar{ display:none; }

/* ===================== TYPE SYSTEM ===================== */
.eyebrow{
  font-size:.78rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--brass-light); font-weight:600; margin-bottom:1.4rem;
}
.display-xl{
  font-family:var(--font-display);
  font-weight:300;
  font-size: clamp(3.6rem, 9vw, 8rem);
  line-height:1.02;
  letter-spacing:-.01em;
  margin-bottom:1.6rem;
}
.display-lg{
  font-family:var(--font-display);
  font-weight:300;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height:1.12;
  letter-spacing:-.01em;
  margin-bottom:1.6rem;
  max-width:14ch;
}
.lead{
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  max-width:42ch;
  color: rgba(245,241,234,.86);
  font-weight:300;
  margin-bottom:2.2rem;
}
.body-text{
  font-size:1.02rem;
  max-width:46ch;
  color: var(--ink-soft);
  font-weight:300;
  margin-bottom:2.2rem;
}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600;
  padding: 1.05rem 2.3rem;
  border-radius:999px;
  transition: all .35s var(--ease);
  border:1px solid transparent;
  white-space:nowrap;
}
.btn-primary{ background:var(--brass); color:var(--ink); }
.btn-primary:hover{ background:var(--brass-light); transform:translateY(-2px); }
.btn-ghost{ border-color:rgba(245,241,234,.35); color:var(--cream); }
.btn-ghost:hover{ border-color:var(--brass-light); color:var(--brass-light); }
.btn-outline{ border-color:var(--brass); color:var(--brass); }
.btn-outline:hover{ background:var(--brass); color:var(--ink); }
.btn-large{ padding:1.2rem 3rem; font-size:.86rem; }

.hero-actions{ display:flex; gap:1rem; margin-bottom:3.4rem; flex-wrap:wrap; }

/* ===================== HOME ===================== */
.home-content{ padding-top:0; }
.hero-meta{ display:flex; align-items:center; gap:2.4rem; flex-wrap:wrap; }
.meta-item{ display:flex; flex-direction:column; }
.meta-num{ font-family:var(--font-display); font-size:1.9rem; font-weight:500; color:var(--brass-light); }
.meta-label{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,241,234,.6); margin-top:.2rem; }
.meta-divider{ width:1px; height:36px; background:rgba(245,241,234,.2); }

.scroll-cue{
  position:absolute; bottom:2.4rem; right:3.2rem; z-index:2;
  display:flex; flex-direction:column; align-items:flex-end; gap:.6rem;
  color: rgba(245,241,234,.55);
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
}
.scroll-arrow{
  font-size:1.1rem; color:var(--brass-light);
  animation: floatUp 2.2s ease-in-out infinite;
}
@keyframes floatUp{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

/* ===================== ABOUT (split) ===================== */
.split-content{
  display:flex; align-items:flex-start;
  min-height:100%; height:auto;
  padding-top:2rem; padding-bottom:4rem;
  background:var(--white);
}
.split-text{ max-width:680px; color:var(--ink); }
.split-text .eyebrow{ color:var(--brass); }
.split-text em{ color:var(--brass); }

/* Force all text on the About slide to be dark and readable */
.split-text .display-lg{
  color:var(--ink);
}
.split-text .body-text{
  color:var(--ink-soft);
}
.split-text .lead{
  color:var(--ink-soft);
}
.split-text h4{
  color:var(--ink);
}
.split-text .value-item p{
  color:var(--ink-soft);
}

.value-grid{ display:flex; gap:1.6rem; flex-wrap:wrap; margin-top:1.6rem; }
.value-item{ flex:1; min-width:160px; }
.value-icon{ display:block; font-size:1.4rem; color:var(--brass); margin-bottom:.7rem; }
.value-item h4{ font-family:var(--font-display); font-weight:500; font-size:1.05rem; margin-bottom:.45rem; }
.value-item p{ font-size:.86rem; color:var(--ink-soft); font-weight:300; line-height:1.55; }

/* ===================== SERVICES ===================== */
.capability-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:1rem;
}
.capability-card{
  background: rgba(245,241,234,.06);
  border:1px solid rgba(245,241,234,.14);
  border-radius:14px;
  padding:1.8rem 1.5rem;
  backdrop-filter: blur(6px);
  transition: border-color .35s, background .35s, transform .35s;
}
.capability-card:hover{
  border-color: var(--brass-light);
  background: rgba(182,136,79,.12);
  transform: translateY(-4px);
}
.cap-mark{
  display:inline-block; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-light); margin-bottom:1.1rem; font-weight:600;
}
.capability-card h4{
  font-family:var(--font-display); font-weight:500; font-size:1.15rem;
  margin-bottom:.6rem; line-height:1.3;
}
.capability-card p{ font-size:.86rem; color:rgba(245,241,234,.75); font-weight:300; line-height:1.6; }

/* ===================== GALLERY ===================== */
.slide#gallery{ background: var(--cream); }
.gallery-content{ color:var(--ink); max-width:1280px; }
.gallery-content .eyebrow{ color:var(--brass); }
.gallery-content em{ color:var(--brass); }

.showcase-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap:1rem;
  height: 52vh;
  margin-top:1.2rem;
}
.showcase-item{
  position:relative; overflow:hidden; border-radius:14px;
}
.showcase-tall{ grid-row: span 2; }
.showcase-item img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .8s var(--ease);
}
.showcase-item:hover img{ transform:scale(1.06); }
.showcase-item figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.2rem 1.3rem;
  background: linear-gradient(to top, rgba(43,38,32,.85), transparent);
  color:var(--cream); font-size:.9rem; font-weight:500;
  display:flex; flex-direction:column; gap:.25rem;
}
.showcase-item figcaption span{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-light); font-weight:600;
}

/* ===================== PACKAGES ===================== */
.pricing-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:1rem;
}
.price-card{
  background: rgba(245,241,234,.05);
  border:1px solid rgba(245,241,234,.14);
  border-radius:18px;
  padding:2.2rem 1.8rem;
  backdrop-filter: blur(6px);
  position:relative;
  transition: transform .35s var(--ease), border-color .35s;
}
.price-card:hover{ transform: translateY(-6px); border-color: var(--brass-light); }
.price-card--featured{
  background: rgba(182,136,79,.14);
  border-color: var(--brass-light);
}
.price-badge{
  position:absolute; top:-12px; right:1.6rem;
  background:var(--brass); color:var(--ink);
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; padding:.4rem 1rem; border-radius:999px;
}
.price-card h3{ font-family:var(--font-display); font-weight:500; font-size:1.5rem; margin-bottom:.6rem; }
.price-tag{ font-family:var(--font-display); font-size:1.7rem; color:var(--brass-light); margin-bottom:.9rem; font-weight:500; }
.price-tag span{ font-family:var(--font-body); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(245,241,234,.6); }
.price-desc{ font-size:.88rem; color:rgba(245,241,234,.78); font-weight:300; margin-bottom:1.3rem; line-height:1.6; }
.price-card ul{ margin-bottom:1.8rem; display:flex; flex-direction:column; gap:.55rem; }
.price-card li{
  font-size:.84rem; color:rgba(245,241,234,.85); font-weight:300;
  padding-left:1.3rem; position:relative;
}
.price-card li::before{
  content:'—'; position:absolute; left:0; color:var(--brass-light);
}

/* ===================== CONTACT ===================== */
.contact-content{ max-width:760px; }
.contact-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2.6rem;
}
.contact-card{
  background: rgba(245,241,234,.06);
  border:1px solid rgba(245,241,234,.16);
  border-radius:14px;
  padding:1.6rem 1.3rem;
  display:flex; flex-direction:column; gap:.5rem;
  transition: border-color .35s, transform .35s;
}
.contact-card:hover{ border-color:var(--brass-light); transform:translateY(-4px); }
.contact-icon{ font-size:1.4rem; color:var(--brass-light); }
.contact-label{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(245,241,234,.6); font-weight:600; }
.contact-value{ font-size:1rem; font-weight:500; }

/* ===================== SIDE DOTS NAV ===================== */
.section-dots{
  position:fixed; right:2.4rem; top:50%; transform:translateY(-50%);
  z-index:400;
  display:flex; flex-direction:column; gap:1.1rem;
}
.dot{
  width:10px; height:10px; border-radius:50%;
  background:transparent; border:1.5px solid rgba(245,241,234,.4);
  cursor:pointer; padding:0; position:relative;
  transition: background .35s, border-color .35s, transform .35s;
}
.dot:hover{ border-color:var(--brass-light); transform:scale(1.2); }
.dot.active{
  background:var(--brass-light); border-color:var(--brass-light);
  box-shadow: 0 0 0 0 rgba(217,185,138,.5);
  animation: nhiDotPulse 2.4s ease-out infinite;
}
@keyframes nhiDotPulse{
  0%{ box-shadow: 0 0 0 0 rgba(217,185,138,.45); }
  70%{ box-shadow: 0 0 0 8px rgba(217,185,138,0); }
  100%{ box-shadow: 0 0 0 0 rgba(217,185,138,0); }
}
.dot span{
  position:absolute; right:24px; top:50%; transform:translateY(-50%);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream); background:rgba(43,38,32,.85);
  padding:.35rem .8rem; border-radius:6px;
  white-space:nowrap; opacity:0; pointer-events:none;
  transition: opacity .25s;
}
.dot:hover span{ opacity:1; }

/* When current slide is light, flip dot/arrow colours */
.slide[data-theme="light"].active ~ .section-dots .dot,
body:has(.slide#about.active) .section-dots .dot,
body:has(.slide#gallery.active) .section-dots .dot{
  border-color: rgba(43,38,32,.35);
}
body:has(.slide#about.active) .section-dots .dot.active,
body:has(.slide#gallery.active) .section-dots .dot.active{
  background:var(--brass); border-color:var(--brass);
}
body:has(.slide#about.active) .vnav-btn,
body:has(.slide#gallery.active) .vnav-btn{
  background:rgba(43,38,32,.06); border-color:rgba(43,38,32,.22); color:var(--ink);
}
body:has(.slide#about.active) .vnav-btn:hover,
body:has(.slide#gallery.active) .vnav-btn:hover{
  background:var(--brass); color:var(--white); border-color:var(--brass);
}
body:has(.slide#about.active) .autoplay-progress,
body:has(.slide#gallery.active) .autoplay-progress{
  background:rgba(43,38,32,.08);
}

/* ===================== PROGRESS BAR ===================== */
.autoplay-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:600;
  background:rgba(245,241,234,.08);
}
.autoplay-progress-fill{
  height:100%; width:0%; background:var(--brass-light);
  box-shadow: 0 0 8px rgba(217,185,138,.6);
  transition: width 80ms linear;
}

/* ===================== VERTICAL ARROW NAV ===================== */
.vertical-nav{
  position:fixed; left:2.4rem; bottom:2.4rem; z-index:400;
  display:flex; flex-direction:column; gap:.6rem;
}
.vnav-btn{
  width:42px; height:42px; border-radius:50%;
  background:rgba(245,241,234,.08);
  border:1px solid rgba(245,241,234,.22);
  color:var(--cream); font-size:1.05rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background .35s, border-color .35s, transform .25s;
}
.vnav-btn:hover{ background:var(--brass); color:var(--ink); border-color:var(--brass); transform:translateY(-2px); }

/* ===================== REVEAL ANIMATION ===================== */
.reveal{
  opacity:0; transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
/* No-JS / first-paint fallback: content in the first slide is visible
   immediately rather than waiting on JS to add .active */
.slide:first-of-type .reveal{
  opacity:1; transform:translateY(0);
}
.slide.active .reveal{ opacity:1; transform:translateY(0); }
.slide.active .reveal:nth-child(1){ transition-delay:.05s; }
.slide.active .reveal:nth-child(2){ transition-delay:.15s; }
.slide.active .reveal:nth-child(3){ transition-delay:.25s; }
.slide.active .reveal:nth-child(4){ transition-delay:.35s; }
.slide.active .reveal:nth-child(5){ transition-delay:.45s; }
.slide.active .reveal:nth-child(6){ transition-delay:.55s; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1080px){
  .capability-row{ grid-template-columns:repeat(2,1fr); }
  .pricing-row{ grid-template-columns:1fr; max-width:420px; }
  .showcase-grid{ grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,1fr); height:auto; min-height:60vh; }
  .showcase-tall{ grid-row:span 1; }
  .split-content{ flex-direction:column; align-items:flex-start; justify-content:center; }
  .vertical-nav{ gap:.4rem; }
  .vnav-btn{ width:36px; height:36px; font-size:.9rem; opacity:.55; }
  .vnav-btn:hover, .vnav-btn:focus-visible{ opacity:1; }
}

@media (max-width: 880px){
  :root{ --header-h: 96px; }
  .main-nav{
    position:fixed; inset:0; top:0;
    background:var(--ink); z-index:450;
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
  }
  .main-nav.open{ opacity:1; visibility:visible; }
  .main-nav.open ul .nav-link{ color:rgba(245,241,234,.72); }
  .main-nav.open ul .nav-link.active,
  .main-nav.open ul .nav-link:hover{ color:var(--cream); }
  .main-nav ul{ flex-direction:column; gap:1.8rem; text-align:center; }
  .main-nav .nav-link{ font-size:1.2rem; }
  .nav-toggle{ display:flex; }
  .header-phone{ display:none; }
  .site-header{ padding:1.2rem 1.4rem; }
  .section-dots{ right:1rem; }
  .dot span{ display:none; }
  .slide-content{ padding: 1.2rem 1.4rem 5rem; }
  .vertical-nav{ left:1rem; bottom:1.2rem; }
  .scroll-cue{ display:none; }
  .contact-grid{ grid-template-columns:1fr; }
  .hero-meta{ gap:1.4rem; }
  .meta-divider{ display:none; }
}

@media (max-width: 600px){
  .capability-row{ grid-template-columns:1fr; }
  .display-xl{ font-size: clamp(2.6rem, 14vw, 4.5rem); }
  .display-lg{ font-size: clamp(2rem, 9vw, 3rem); max-width:none; }
  .showcase-grid{ grid-template-columns:1fr; grid-template-rows:repeat(4, 200px); height:auto; }
  .value-grid{ flex-direction:column; }
  .pricing-row{ max-width:none; gap:1rem; }
  .price-card{ padding:1.6rem 1.3rem; }
  .price-badge{ right:1rem; font-size:.6rem; padding:.32rem .8rem; }
  .slide-content{ padding-bottom: 6.5rem; } /* clearance above vertical-nav arrows */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .slide, .reveal, .slide-bg img{ transition:none !important; animation:none !important; }
}

/* ===========================================================
   INNER PAGES (About, Services, Gallery, Packages, Contact)
   Normal scrollable layout — header + hero + content + footer
=========================================================== */
body.inner-page{
  background: var(--cream);
  color: var(--ink);
}

/* Inner header is sticky, not fixed-fullscreen-only */
body.inner-page .site-header{
  position:sticky;
  background: var(--ink);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* Page Hero */
.page-hero{
  position:relative;
  min-height: 56vh;
  display:flex; align-items:center;
  overflow:hidden;
  color:var(--cream);
}
.page-hero .slide-bg img{ transform:scale(1.04); transition:none; }
.page-hero .slide-overlay{
  background: linear-gradient(115deg, rgba(43,38,32,.85) 0%, rgba(43,38,32,.6) 45%, rgba(43,38,32,.35) 100%);
}
.page-hero-content{
  position:relative; z-index:1;
  max-width:1280px; margin:0 auto; width:100%;
  padding: 9rem 3.2rem 4rem;
}
.page-hero .eyebrow{ color:var(--brass-light); }
.page-hero h1{
  font-family:var(--font-display); font-weight:300;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height:1.08; letter-spacing:-.01em;
  max-width:16ch;
}
.page-hero h1 em{ color:var(--brass-light); font-style:italic; }
.page-hero .lead{ margin-top:1rem; }

/* Generic content section wrapper */
.content-section{
  max-width:1280px; margin:0 auto;
  padding: 5rem 3.2rem;
}
.content-section.alt{ background: var(--white); }
.content-section .eyebrow{ color:var(--brass); }
.content-section h2{
  font-family:var(--font-display); font-weight:300;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height:1.15; margin-bottom:1.4rem; max-width:18ch;
  color:var(--ink);
}
.content-section h2 em{ color:var(--brass); font-style:italic; }
.content-section p{
  font-size:1.02rem; color:var(--ink-soft); font-weight:300;
  max-width:60ch; line-height:1.75; margin-bottom:1.2rem;
}

/* Re-skin component classes for light inner-page backgrounds */
.inner-page .value-grid{ margin-top:2rem; }
.inner-page .value-item h4{ color:var(--ink); }
.inner-page .value-item p{ color:var(--ink-soft); }

.inner-page .capability-row{ margin-top:1rem; }
.inner-page .capability-card{
  background: var(--white);
  border:1px solid rgba(43,38,32,.08);
}
.inner-page .capability-card:hover{
  border-color: var(--brass);
  background: rgba(182,136,79,.06);
}
.inner-page .capability-card h4{ color:var(--ink); }
.inner-page .capability-card p{ color:var(--ink-soft); }
.inner-page .cap-mark{ color:var(--brass); }

.inner-page .pricing-row{ margin-top:1rem; }
.inner-page .price-card{
  background: var(--white);
  border:1px solid rgba(43,38,32,.08);
  color:var(--ink);
}
.inner-page .price-card--featured{
  background: rgba(182,136,79,.07);
  border-color: var(--brass);
}
.inner-page .price-card h3{ color:var(--ink); }
.inner-page .price-tag{ color:var(--brass); }
.inner-page .price-tag span{ color: var(--ink-soft); }
.inner-page .price-desc{ color:var(--ink-soft); }
.inner-page .price-card li{ color: var(--ink-soft); }
.inner-page .price-card li::before{ color:var(--brass); }

.inner-page .showcase-grid{ height:auto; min-height:64vh; margin-top:1rem; }

.inner-page .contact-grid{ margin-top:1rem; margin-bottom:0; }
.inner-page .contact-card{
  background: var(--white);
  border:1px solid rgba(43,38,32,.08);
  color:var(--ink);
}
.inner-page .contact-label{ color:var(--ink-soft); }
.inner-page .contact-icon{ color:var(--brass); }

/* Contact form (inner contact page) */
.contact-form-wrap{
  display:grid; grid-template-columns: 1fr 1fr; gap:3rem; align-items:start;
  margin-top:1rem;
}
.contact-form .form-row{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.2rem; }
.contact-form label{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--taupe);
}
.contact-form input,
.contact-form textarea{
  font-family:var(--font-body); font-size:1rem;
  border:1px solid rgba(43,38,32,.15);
  background:var(--white);
  border-radius:10px; padding:.9rem 1.1rem;
  color:var(--ink); resize:vertical;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none; border-color:var(--brass);
}
.contact-form button{ border:none; cursor:pointer; }

/* CTA banner before footer */
.cta-banner{
  background: var(--ink); color:var(--cream);
  text-align:center; padding: 4.5rem 2rem;
}
.cta-banner h2{ color:var(--cream); margin:0 auto 1.6rem; }
.cta-banner h2 em{ color:var(--brass-light); }

/* ===========================================================
   SITE FOOTER (inner pages)
=========================================================== */
.site-footer{
  background: var(--ink); color: rgba(245,241,234,.8);
}
.footer-top{
  max-width:1280px; margin:0 auto;
  padding: 4.5rem 3.2rem 3rem;
  display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap:2.5rem;
}
.footer-col h4{
  font-family:var(--font-display); font-weight:500; font-size:1.05rem;
  color:var(--cream); margin-bottom:1.2rem;
}
.footer-col ul{ display:flex; flex-direction:column; gap:.7rem; }
.footer-col ul a{
  font-size:.92rem; color:rgba(245,241,234,.7);
  transition: color .3s;
}
.footer-col ul a:hover{ color:var(--brass-light); }
.footer-contact li{ display:flex; align-items:center; gap:.6rem; font-size:.92rem; }
.footer-contact li span{ color:var(--brass-light); }

.footer-brand .logo{ color:var(--cream); margin-bottom:1rem; display:inline-flex; }
.footer-tagline{
  font-size:.92rem; color:rgba(245,241,234,.65); font-weight:300;
  max-width:32ch; line-height:1.6; margin-bottom:1.4rem;
}
.footer-social{ display:flex; gap:.7rem; }
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(245,241,234,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; letter-spacing:.05em; font-weight:700;
  transition: border-color .3s, color .3s;
}
.footer-social a:hover{ border-color:var(--brass-light); color:var(--brass-light); }

.footer-cta-text{ font-size:.92rem; color:rgba(245,241,234,.65); margin-bottom:1.2rem; font-weight:300; }

.footer-bottom{
  border-top:1px solid rgba(245,241,234,.1);
  max-width:1280px; margin:0 auto;
  padding: 1.6rem 3.2rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-size:.8rem; color:rgba(245,241,234,.5);
}

/* Responsive — inner pages */
@media (max-width: 1080px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .contact-form-wrap{ grid-template-columns:1fr; }
}
@media (max-width: 600px){
  .footer-top{ grid-template-columns:1fr; padding: 3rem 1.4rem 2rem; }
  .footer-bottom{ flex-direction:column; padding:1.4rem; }
  .page-hero-content{ padding: 7rem 1.4rem 3rem; }
  .content-section{ padding: 3.2rem 1.4rem; }
}

/* ===========================================================
   MOBILE ABOUT SLIDE FIXES
   - Text (heading/eyebrow) always readable over cream bg
   - Remove blank/half-visible background image on mobile
=========================================================== */
@media (max-width: 880px){
  /* About slide on mobile: compact, single-column, everything visible
     without relying on scroll for the heading. */
  #about .slide-content{
    padding: 0 1.4rem 2.4rem;
    display:flex;
    align-items:center;
    overflow-y: auto;
  }
  .split-content{
    padding-top: 0;
    align-items: center;
    min-height:100%;
  }
  .split-text{
    width:100%;
    max-width:none;
  }

  /* Eyebrow always brass, heading always dark ink — override any inheritance */
  .split-text .eyebrow{
    color: var(--brass) !important;
    font-size:.68rem;
    letter-spacing:.28em;
    margin-bottom: 0.5rem;
  }
  .split-text .display-lg{
    color: var(--ink) !important;
    font-size: clamp(1.6rem, 7.5vw, 2.2rem);
    max-width: none;
    margin-bottom: 0.7rem;
    line-height: 1.18;
  }
  .split-text .body-text{
    font-size:.92rem;
    margin-bottom:1.2rem;
  }

  /* Compact value grid: horizontal scroll strip instead of stacked,
     so the heading/intro never get pushed off-screen. */
  .split-text .value-grid{
    display:flex;
    flex-wrap:nowrap;
    gap:1rem;
    margin-top:0.6rem;
    overflow-x:auto;
    padding-bottom:.4rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .split-text .value-grid::-webkit-scrollbar{ display:none; }
  .split-text .value-item{
    flex:0 0 72%;
    min-width:0;
  }
  .split-text .value-item h4{ font-size:.95rem; }
  .split-text .value-item p{ font-size:.82rem; }

  .split-text .btn{
    margin-top:1.2rem !important;
    width:100%;
    justify-content:center;
  }

  /* The about slide bg image on mobile shows as a large blank cream area
     because the overlay nearly covers it. Remove the bg image entirely
     and just use the solid cream colour so it looks clean. */
  #about .slide-bg{
    display: none;
  }
  #about{
    background: var(--cream);
  }
}