/* =========================================================
   LEMURIA LUXE — styles.css (FULL)
   ✅ NO GLOBAL GRADIENT BACKGROUND
   ✅ ONE SOLID COLOR PER SECTION (MORE VIVID)
   ✅ ABOUT + FAQ + CONTACT = SAME BACKGROUND
   ✅ LESS EMPTY SPACE LEFT/RIGHT (WIDER CONTAINER)
   ✅ SIGNATURE CARDS FIXED HEIGHT + SCROLL (with gradient scrollbar)
   ✅ DESKTOP: SIGNATURE CARDS SHORTER (MOBILE UNCHANGED)
   Brand palette:
   #17BEBB (teal) | #2E282A (dark) | #B5553A (terra) | #EDB88B (sand)
========================================================= */

/* =========================
   1) DESIGN TOKENS
========================= */
:root{
  --teal:#17BEBB;
  --dark:#2E282A;
  --terra:#B5553A;
  --sand:#EDB88B;

  /* ✅ Brighter base */
  --bg:#FFFDF9;

  --ink: var(--dark);
  --muted: rgba(46,40,42,.74);
  --muted2: rgba(46,40,42,.58);
  --line: rgba(46,40,42,.12);

  --radius: 18px;
  --radius2: 26px;

  /* ✅ Wider layout to reduce empty sides */
  --container: 1320px;

  --shadow: 0 18px 60px rgba(46,40,42,.14);
  --shadow2: 0 22px 75px rgba(46,40,42,.18);

  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-serif: "Playfair Display", serif;

  --easeOut: cubic-bezier(.16,1,.3,1);
  --easeInOut: cubic-bezier(.3,.7,.2,1);
  --fast: 160ms;
  --mid: 260ms;

  --titleShadow: 0 18px 40px rgba(46,40,42,.12);
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--ink);
  overflow-x:hidden;
  position: relative;

  /* ✅ No gradient here (prevents banding lines) */
  background: var(--bg);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; }
::selection{ background: rgba(23,190,187,.26); }
strong{ font-weight:900; }

.container{
  /* ✅ Reduced side gutters (less empty space left/right) */
  width: min(var(--container), calc(100% - 24px));
  margin-inline:auto;
}
@media (min-width: 1400px){
  .container{ width: min(1400px, calc(100% - 32px)); }
}
@media (max-width: 520px){
  .container{ width: calc(100% - 20px); }
}

.muted{ color: var(--muted); }
.muted2{ color: var(--muted2); }

.read{
  line-height: 1.90;
  font-size: 1.06rem;
  letter-spacing: .25px;
  font-weight: 560;
  color: rgba(46,40,42,.95);
}

.section{
  /* slightly tighter vertical padding (less “empty”) */
  padding: 64px 0;
}
@media (max-width:520px){
  .section{ padding: 56px 0; }
}

body,p,li,span,div{ letter-spacing: .25px; }

h1,h2,h3,h4,
.heroTitle,
.sigTitle,
.hostName,
.sectionHead h2{
  font-family: var(--font-serif);
  font-weight: 900;
  letter-spacing: .4px;
}

/* =========================
   2) ONE SOLID COLOR PER SECTION (MORE VIVID)
========================= */
.hero{ background: transparent; }

/* Signature = brighter teal wash */
#signature{ background-color: #D9F7F6; }

/* Why = brighter warm sand */
#why{ background-color: #FFE7CF; }

/* Hosts = brighter terra blush */
#hosts{ background-color: #FFE2DA; }

/* ✅ About + FAQ + Contact same vivid warm */
#about,
#faq,
#contact{
  background-color: #FFE9D6;
}

/* Footer slightly stronger neutral */
.footer{ background-color: #EFECE7; }

#signature, #why, #hosts, #about, #faq, #contact{
  border-top: 1px solid rgba(46,40,42,.08);
}

/* =========================
   3) SECTION HEAD
========================= */
.sectionHead{ max-width: 980px; margin-bottom: 24px; }
.sectionHead--wide{ max-width: 1020px; }

.sectionHead h2{
  margin:0 0 10px;
  font-size: clamp(2.1rem, 3vw, 2.7rem);
  text-shadow: 0 2px 0 rgba(255,255,255,.75), 0 16px 45px rgba(0,0,0,.10);
  position:relative;
  display:inline-block;
  color: var(--dark);
}

.sectionHead h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width: 68%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--sand), var(--terra));
  box-shadow: 0 14px 40px rgba(23,190,187,.18);
}

.sectionHead p{
  margin:14px 0 0;
  color: rgba(46,40,42,.82);
  line-height:1.85;
  font-size: 1.08rem;
  font-weight: 560;
}

h3{
  font-size: 1.35rem;
  color: var(--teal);
  text-shadow: 0 1px 0 rgba(255,255,255,.80), 0 16px 40px rgba(23,190,187,.14);
}

/* =========================
   SCROLL PROGRESS
========================= */
.scroll-progress{
  position:fixed; top:0; left:0;
  height:3px; width:0%;
  background: linear-gradient(90deg, var(--teal), var(--sand), var(--terra));
  z-index:9999;
  box-shadow: 0 0 18px rgba(23,190,187,.35);
}

/* =========================
   HEADER / NAV
========================= */
.header{
  position:sticky; top:0; z-index:1200;
  border-bottom:1px solid var(--line);
  background: rgba(255,253,249,.86);
  backdrop-filter: blur(12px);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
}

.brand{ display:flex; align-items:center; gap:12px; user-select:none; }
.brand__mark{
  width:40px;height:40px; display:grid;place-items:center;
  border-radius:12px;
  border:1px solid rgba(46,40,42,.14);
  background: linear-gradient(135deg, rgba(23,190,187,.22), rgba(237,184,139,.28));
  box-shadow: 0 14px 36px rgba(46,40,42,.10);
  font-weight:900; letter-spacing:.7px;
  color: var(--dark);
}
.brand__mark--sm{ width:34px; height:34px; border-radius:12px; }
.brand__name{
  font-family: var(--font-serif);
  font-weight:900;
  letter-spacing:.2px;
  color: var(--dark);
}

.nav{ display:flex; align-items:center; gap:10px; }
.nav__menuDesktop{ display:flex; align-items:center; gap:14px; }
.nav__link{
  color: rgba(46,40,42,.92);
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 999px;
  transition: transform var(--fast) var(--easeOut), background var(--fast) var(--easeInOut), color var(--fast) var(--easeInOut);
}
.nav__link:hover{
  transform: translateY(-1px);
  background: rgba(23,190,187,.12);
  color: var(--dark);
}

.nav__toggle{
  display:none;
  width:44px;height:44px;
  border:1px solid rgba(46,40,42,.14);
  background: rgba(255,255,255,.78);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(46,40,42,.12);
  cursor:pointer;
}
.nav__toggleLines{
  display:block; width:18px;height:2px; background: currentColor;
  position:relative; margin:auto;
}
.nav__toggleLines::before,.nav__toggleLines::after{
  content:""; position:absolute; left:0;
  width:18px;height:2px; background: currentColor;
}
.nav__toggleLines::before{ top:-6px; }
.nav__toggleLines::after{ top:6px; }

/* =========================
   BUTTONS
========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(46,40,42,.14);
  background: linear-gradient(135deg, rgba(23,190,187,.22), rgba(237,184,139,.26));
  color: var(--dark);
  font-weight: 900;
  letter-spacing: .4px;
  cursor:pointer;
  transition: transform var(--fast) var(--easeOut), box-shadow var(--fast) var(--easeOut), background var(--fast) var(--easeInOut);
  box-shadow: 0 12px 32px rgba(46,40,42,.12);
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 20px 46px rgba(46,40,42,.16); }
.btn:active{ transform: translateY(0px) scale(.99); }

.btn--ghost{
  background: rgba(255,255,255,.92);
  border-color: rgba(23,190,187,.22);
  box-shadow: none;
}
.btn--ghost:hover{ background: rgba(23,190,187,.12); }

.btn--sm{ padding:10px 12px; font-size:.92rem; }
.btn--xl{ padding:16px 26px; font-size: 1.06rem; }

.btn--hero{
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(135deg, var(--teal), var(--sand));
  color: #1b1b1b;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
}
.btn--hero:hover{ box-shadow: 0 24px 70px rgba(23,190,187,.40); }

/* Pills no background */
.heroPill{
  font-weight: 900;
  letter-spacing:.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.95);
  text-shadow: 0 10px 34px rgba(0,0,0,.35);
  font-size: .92rem;
}

/* =========================
   GRID / CARD (STRONGER CONTRAST ON BRIGHT BG)
========================= */
.grid{ display:grid; gap: 16px; }
.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); align-items:start; }

.card,
.sigCard,
.whyLuxe,
.whyCard,
.hostCard,
.includedBox,
.faqItem,
.contactItem{
  border:1px solid rgba(46,40,42,.16);
  border-radius: var(--radius);
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 70px rgba(46,40,42,.16);
  padding: 18px;
}

/* Slightly tighter padding so content feels wider */
.card,
.includedBox,
.hostsInfoNote{
  padding-left: 16px;
  padding-right: 16px;
}

/* =========================
   OFFCANVAS
========================= */
.offcanvas{
  position:fixed; inset:0;
  z-index:2500;
  pointer-events:none;
  opacity:0;
  transition: opacity var(--mid) var(--easeInOut);
}
.offcanvas.is-open{ opacity:1; pointer-events:auto; }
.offcanvas__backdrop{
  position:absolute; inset:0;
  background: rgba(46,40,42,.38);
  backdrop-filter: blur(6px);
}
.offcanvas__panel{
  position:absolute;
  top:12px; bottom:12px; right:12px;
  width: min(420px, calc(100% - 24px));
  border-radius: 22px;
  border: 1px solid rgba(46,40,42,.14);
  background: rgba(255,255,255,.94);
  box-shadow: 0 30px 110px rgba(0,0,0,.25);
  overflow:hidden;
  transform: translateX(18px) scale(.985);
  transition: transform 220ms var(--easeOut);
}
.offcanvas.is-open .offcanvas__panel{ transform: translateX(0) scale(1); }

.offcanvas__top{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(46,40,42,.12);
  background: rgba(255,255,255,.84);
}
.offcanvas__brand{ display:flex; align-items:center; gap:12px; }
.offcanvas__title{ font-family: var(--font-serif); font-weight: 900; color: var(--dark); line-height: 1.1; }
.offcanvas__subtitle{ font-weight: 800; color: rgba(46,40,42,.66); font-size: .92rem; margin-top: 2px; }
.offcanvas__close{
  width:42px;height:42px;
  border-radius: 14px;
  border: 1px solid rgba(46,40,42,.14);
  background: rgba(255,255,255,.94);
  cursor:pointer;
  box-shadow: 0 12px 30px rgba(46,40,42,.10);
  transition: transform var(--fast) var(--easeOut);
}
.offcanvas__close:hover{ transform: translateY(-2px); }

.offcanvas__content{
  padding: 12px 12px 14px;
  display:flex; flex-direction:column; gap: 10px;
  height: calc(100% - 70px);
}
.offcanvas__link{
  display:flex; align-items:center; gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(46,40,42,.14);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 26px rgba(46,40,42,.08);
  font-weight: 900;
  color: rgba(46,40,42,.92);
  transition: transform var(--fast) var(--easeOut), background var(--fast) var(--easeInOut), border-color var(--fast) var(--easeInOut);
}
.offcanvas__link:hover{
  transform: translateY(-2px);
  background: rgba(23,190,187,.12);
  border-color: rgba(23,190,187,.26);
}
.offcanvas__icon{
  width:40px;height:40px;
  border-radius: 14px;
  display:grid; place-items:center;
  border: 1px solid rgba(23,190,187,.22);
  background: rgba(23,190,187,.10);
}
.offcanvas__chev{ margin-left:auto; opacity:.55; font-size: 1.2rem; }
.offcanvas__divider{ height:1px; background: rgba(46,40,42,.14); margin: 6px 0; }
.offcanvas__card{
  margin-top: 2px;
  border: 1px solid rgba(46,40,42,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  padding: 12px;
  box-shadow: 0 16px 44px rgba(46,40,42,.10);
}
.offcanvas__cardTitle{
  font-family: var(--font-serif);
  font-weight: 900;
  color: var(--terra);
  margin-bottom: 8px;
}
.offcanvas__mini{ display:grid; gap: 6px; color: rgba(46,40,42,.76); font-weight: 800; }
.offcanvas__bottom{ margin-top:auto; }
.offcanvas__tip{
  padding: 12px;
  border-radius: 18px;
  border: 1px dashed rgba(46,40,42,.20);
  background: rgba(237,184,139,.28);
  font-weight: 900;
  color: rgba(46,40,42,.86);
}

/* =========================
   HERO (FULLSCREEN + CLEAN)
========================= */
.hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.hero.hero--mgt{
  padding: clamp(90px, 12vh, 130px) 0 clamp(70px, 10vh, 100px);
}
.hero--compact{
  min-height: 100vh;
  padding: clamp(90px, 12vh, 130px) 0 clamp(70px, 10vh, 100px);
  display:flex;
  align-items:center;
}

.heroBg{ position:absolute; inset:0; z-index:0; }
.hero__inner{ position:relative; z-index:2; }
.hero__inner--showcase{ max-width: 1140px; margin-inline:auto; text-align:center; }

.heroBg__slide{
  position:absolute; inset:-2%;
  opacity:0;
  transform: scale(1.06);
  transition: opacity 520ms var(--easeInOut), transform 1200ms var(--easeOut);
  background-size: cover;
  background-position: center;
  filter: saturate(1.12) contrast(1.10);
  will-change: opacity, transform;
}
.heroBg__slide.is-active{
  opacity:1;
  transform: scale(1.02);
  animation: heroKen 10s ease-in-out infinite;
}
@keyframes heroKen{
  0%{ transform: scale(1.02) translate(0,0); }
  50%{ transform: scale(1.07) translate(-1.2%, -1.0%); }
  100%{ transform: scale(1.02) translate(0,0); }
}

/* update these paths to your actual filenames */
.heroBg__slide--1{
  background-image:
    radial-gradient(900px 450px at 28% 20%, rgba(23,190,187,.14), transparent 55%),
    url("./images/hero/hero01.webp");
}
.heroBg__slide--2{
  background-image:
    radial-gradient(900px 450px at 28% 20%, rgba(237,184,139,.12), transparent 55%),
    url("./images/hero/hero02.jpg");
}
.heroBg__slide--3{
  background-image:
    radial-gradient(900px 450px at 28% 20%, rgba(181,85,58,.11), transparent 55%),
    url("./images/hero/hero03.jpg");
}

.heroBg__overlayAgency{
  position:absolute; inset:0;
  background: linear-gradient(
    180deg,
    rgba(16, 14, 14, 0.64) 0%,
    rgba(16, 14, 14, 0.46) 45%,
    rgba(16, 14, 14, 0.24) 72%,
    rgba(250, 249, 246, 0.06) 100%
  );
}

.heroBg__grain{
  position:absolute; inset:-80px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  opacity:.10; mix-blend-mode: overlay;
}

.heroShowcase{ background: none; border: none; box-shadow: none; padding: 0; }

.heroKicker--clean{
  background: none;
  border: none;
  padding: 0;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-shadow: 0 14px 45px rgba(0,0,0,.55);
}
.heroKicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-inline:auto;
}
.heroKicker__dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--teal), var(--sand));
  box-shadow: 0 0 18px rgba(23,190,187,.35);
}

.heroTitle--clean{
  margin-top: 18px;
  font-size: clamp(2.8rem, 7.2vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: .45px;
  color:#fff;
  text-shadow:
    0 4px 0 rgba(0,0,0,.35),
    0 28px 90px rgba(0,0,0,.65);
}
.heroTitle__accent{
  color: var(--sand);
  text-shadow:
    0 2px 0 rgba(0,0,0,.35),
    0 22px 65px rgba(237,184,139,.55);
}

.heroTextStack{ margin-top: 26px; display: grid; gap: 14px; }
.heroTextLine{
  font-weight: 950;
  letter-spacing: 1.35px;
  text-transform: uppercase;
  font-size: clamp(1.02rem, 2.2vw, 1.4rem);
  color: #FFFFFF;
  text-shadow:
    0 2px 0 rgba(0,0,0,.45),
    0 18px 55px rgba(0,0,0,.55);
}

.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top: 34px; }

.hero__wave--light{
  position:absolute; left:0; right:0; bottom:-1px; height:120px;
  background: linear-gradient(180deg, transparent, rgba(255,253,249,.92));
  mask-image: radial-gradient(70% 140px at 50% 0%, #000 60%, transparent 72%);
}

/* Mobile boost */
@media (max-width: 600px){
  .hero--compact{ min-height: 100svh; }
  .heroTitle--clean{ font-size: clamp(3.0rem, 10.5vw, 4.1rem); line-height: 1.00; }
  .heroTextLine{ font-size: clamp(1.12rem, 4.6vw, 1.45rem); }
}

/* =========================
   WHY
========================= */
.whyLuxe{
  margin-top: 26px;
  padding: 18px;
  border-radius: var(--radius2);
  overflow:hidden;
  box-shadow: var(--shadow2);
}
.whyGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.whyCard{
  border: 1px solid rgba(46,40,42,.16);
  border-radius: var(--radius);
  background: rgba(255,255,255,.96);
  padding: 16px;
  transition: transform var(--fast) var(--easeOut), box-shadow var(--fast) var(--easeOut), border-color var(--fast) var(--easeInOut);
  will-change: transform;
}
.whyCard:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow2);
  border-color: rgba(23,190,187,.30);
}
.whyCard__top{ display:flex; align-items:center; gap: 10px; margin-bottom: 8px; }
.whyCard__icon{
  width:40px;height:40px; display:grid; place-items:center;
  border-radius: 14px;
  border: 1px solid rgba(23,190,187,.24);
  background: linear-gradient(135deg, rgba(23,190,187,.16), rgba(237,184,139,.22));
  box-shadow: 0 16px 40px rgba(46,40,42,.12);
  color: var(--dark);
  font-weight:900;
}
.whyCard h3{ margin:0; color: var(--dark); }
.whyCard__tag{
  margin: 0 0 10px;
  color: rgba(181,85,58,.98);
  font-weight: 900;
  letter-spacing:.2px;
}
.whyCard__text{ margin: 0; color: rgba(46,40,42,.84); line-height: 1.8; }

/* =========================
   SIGNATURE (FIXED HEIGHT + SCROLL)
========================= */
.signatureIntro{ font-weight: 900; color: rgba(46,40,42,.82); }
.signatureWrap{ display:grid; gap: 14px; margin-top: 18px; }

.sigCard{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0;
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid rgba(46,40,42,.16);
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow2);
  padding: 0;

  /* default height (desktop) */
  height: 520px;
}

/* ✅ DESKTOP: shorter signature cards */
@media (min-width: 981px){
  .sigCard{ height: 440px; }
}

/* Mobile/tablet: auto height (best UX) */
@media (max-width: 980px){
  .sigCard{
    grid-template-columns: 1fr;
    height: auto;
  }
}

/* image column */
.sigImg{
  min-height: 100%;
  background-size: cover;
  background-position: center;
  filter: saturate(1.06) contrast(1.05);
  position:relative;
}
.sigImg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(46,40,42,.22), rgba(46,40,42,.00) 60%);
}

/* Body scroll area */
.sigBody{
  padding: 18px 18px 16px;
  background: rgba(255,255,255,.96);
  overflow: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

/* Scroll hint gradients */
.sigBody::before,
.sigBody::after{
  content:"";
  position: sticky;
  left: 0;
  right: 0;
  height: 24px;
  pointer-events: none;
  z-index: 5;
  display: block;
}
.sigBody::before{
  top: 0;
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.sigBody::after{
  bottom: 0;
  background: linear-gradient(0deg, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* Days above title */
.sigTop{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 10px;
}
.sigDays{
  display:inline-block;
  padding: 0;
  margin: 0;
  font-weight: 950;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--terra);
  text-shadow: 0 1px 0 rgba(255,255,255,.70), 0 14px 34px rgba(181,85,58,.18);
  font-size: .90rem;
}

/* Vivid subtitle (no bg) */
.sigTitle{
  position: relative;
  margin: 0;
  padding-left: 12px;
  border-left: 4px solid var(--terra);
  color: var(--teal);
  font-size: 1.34rem;
  line-height: 1.22;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,.75), 0 18px 45px rgba(23,190,187,.14);
}
.sigTitle::after{
  content:"";
  display:block;
  height: 3px;
  width: min(520px, 88%);
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--sand), var(--terra));
  opacity: .95;
}

.sigBody p{
  margin: 10px 0 0;
  color: rgba(46,40,42,.90);
  line-height: 1.88;
  font-size: 1.04rem;
  font-weight: 560;
}
.sigMeta{
  margin-top: 12px;
  border-top: 1px solid rgba(46,40,42,.12);
  padding-top: 12px;
  display:grid;
  gap: 6px;
  color: rgba(46,40,42,.84);
}
.sigMeta strong{ color: rgba(46,40,42,.96); }

/* Gradient scrollbar (WebKit) */
.sigBody::-webkit-scrollbar{ width: 12px; }
.sigBody::-webkit-scrollbar-track{
  background: rgba(46,40,42,.06);
  border-left: 1px solid rgba(46,40,42,.10);
}
.sigBody::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: linear-gradient(180deg, var(--teal), var(--sand), var(--terra));
  border: 3px solid rgba(255,255,255,.90);
  box-shadow: 0 10px 20px rgba(46,40,42,.18);
}
.sigBody::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, var(--terra), var(--sand), var(--teal));
}

/* Firefox scrollbar */
.sigBody{
  scrollbar-width: thin;
  scrollbar-color: var(--teal) rgba(46,40,42,.08);
}

/* Included */
.includedBox{
  margin-top: 18px;
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 18px;
  background: rgba(255,255,255,.96);
}
.includedBox h3{
  margin: 0 0 10px;
  text-shadow: var(--titleShadow);
  color: var(--dark);
}
.includedList{
  margin: 0;
  padding-left: 18px;
  color: rgba(46,40,42,.90);
  line-height: 1.9;
  font-size: 1.02rem;
  font-weight: 560;
}
.includedList li{ margin: 6px 0; }

/* =========================
   HOSTS
========================= */
.hostsGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.hostCard{
  border-radius: var(--radius2);
  overflow:hidden;
  box-shadow: var(--shadow2);
  padding: 0;
  background: rgba(255,255,255,.96);
  border:1px solid rgba(46,40,42,.16);
}
.hostCard__header{
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(46,40,42,.12);
  background: rgba(255,255,255,.92);
}
.hostTag{
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(46,40,42,.86);
}
.hostName{
  font-weight: 900;
  font-size: 1.42rem;
  line-height: 1.15;
  text-shadow: var(--titleShadow);
  color: var(--dark);
}
.hostRole{
  margin-top: 6px;
  font-weight: 950;
  color: var(--terra);
  line-height: 1.3;
}
.hostBody{ padding: 14px 16px 16px; }
.hostBody p{ margin: 0; color: rgba(46,40,42,.92); line-height: 1.9; font-size: 1.04rem; font-weight: 560; }

.hostLink{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(181,85,58,.22);
  background: rgba(237,184,139,.30);
  font-weight: 900;
  color: rgba(46,40,42,.95);
  transition: transform var(--fast) var(--easeOut), background var(--fast) var(--easeInOut), border-color var(--fast) var(--easeInOut);
}
.hostLink:hover{
  transform: translateY(-2px);
  border-color: rgba(23,190,187,.28);
  background: rgba(23,190,187,.12);
}

.hostsInfoNote{
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(46,40,42,.16);
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow);
}
.hostsInfoNote h3{ margin:0 0 6px; text-shadow: var(--titleShadow); color: var(--dark); }

.hostsBottomImageWrap{
  margin-top: 12px;
  border-radius: var(--radius2);
  border: 1px solid rgba(46,40,42,.16);
  background: rgba(255,255,255,.92);
  overflow:hidden;
  box-shadow: var(--shadow2);
}
.hostsBottomImage{
  height: 340px;
  background-size: cover;
  background-position: center;
  filter: saturate(1.04) contrast(1.02);
  background-image:
    radial-gradient(900px 450px at 30% 20%, rgba(23,190,187,.12), transparent 55%),
    url("https://static.wixstatic.com/media/24bb84_82d141e09a784c079a44f84b96247516~mv2.jpg/v1/fill/w_736,h_868,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/24bb84_82d141e09a784c079a44f84b96247516~mv2.jpg");
}

/* =========================
   FAQ
========================= */
.faqGrid{ display:grid; gap: 12px; }
.faqItem{
  border-radius: var(--radius);
  border:1px solid rgba(46,40,42,.16);
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 70px rgba(46,40,42,.16);
  overflow:hidden;
  padding: 0;
}
.faqItem summary{
  cursor:pointer;
  padding: 14px 16px;
  font-weight: 900;
  color: rgba(46,40,42,.95);
  list-style:none;
}
.faqItem summary::-webkit-details-marker{ display:none; }
.faqItem summary::after{
  content:"";
  float:right;
  width:10px;height:10px;
  margin-top: 6px;
  border-right: 2px solid rgba(46,40,42,.55);
  border-bottom: 2px solid rgba(46,40,42,.55);
  transform: rotate(45deg);
  opacity:.55;
}
.faqItem[open] summary::after{ transform: rotate(225deg); margin-top: 10px; }
.faqBody{
  padding: 0 16px 16px;
  color: rgba(46,40,42,.90);
  line-height: 1.88;
  font-size: 1.04rem;
  font-weight: 560;
}

/* =========================
   FORMS / CONTACT
========================= */
.form .field{ display:flex; flex-direction:column; gap:8px; margin-bottom: 12px; }
.form label{ font-weight:900; font-size:.95rem; color: var(--dark); }
.form input, .form textarea{
  border-radius: 14px;
  border:1px solid rgba(46,40,42,.14);
  background: rgba(255,255,255,.96);
  color: var(--dark);
  padding: 12px 12px;
  outline:none;
  box-shadow: 0 10px 26px rgba(46,40,42,.06);
}
.form input:focus, .form textarea:focus{
  border-color: rgba(23,190,187,.55);
  box-shadow: 0 0 0 4px rgba(23,190,187,.14);
}
.formRow{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.formActions{ display:flex; gap: 12px; margin-top: 10px; flex-wrap:wrap; }
.formNote{ margin: 10px 0 0; font-size: .92rem; }

.side h3{ margin: 0 0 10px; text-shadow: var(--titleShadow); color: var(--dark); }
.contactList{ display:grid; gap: 10px; }
.contactItem{
  display:flex; gap: 12px; align-items:center;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 30px rgba(46,40,42,.08);
}
.contactIcon{
  width:40px;height:40px; border-radius: 14px;
  display:grid;place-items:center;
  border:1px solid rgba(23,190,187,.22);
  background: rgba(23,190,187,.10);
}
.divider{ height:1px; background: rgba(46,40,42,.14); margin: 14px 0; }
.list{ margin:0; padding-left: 18px; color: rgba(46,40,42,.90); line-height: 1.9; font-weight: 560; }
.list li{ margin: 6px 0; }

/* =========================
   TOAST
========================= */
.toast{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(46,40,42,.14);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 36px rgba(46,40,42,.10);
  opacity:0;
  transform: translateY(6px);
  transition: opacity 220ms var(--easeOut), transform 220ms var(--easeOut);
}
.toast.is-show{ opacity:1; transform: translateY(0); }

/* =========================
   FOOTER
========================= */
.footer{
  border-top:1px solid rgba(46,40,42,.14);
  padding: 44px 0 26px;
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 18px;
}
.footer h4{
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-weight: 900;
  color: var(--dark);
  text-shadow: var(--titleShadow);
}
.footerLinks{
  list-style:none; padding:0; margin:0;
  display:grid; gap: 8px;
  color: rgba(46,40,42,.92);
  font-weight: 800;
}
.footerLinks a{ color: rgba(46,40,42,.92); font-weight:900; }
.footerLinks a:hover{ color: var(--teal); }

.newsletter__form{ display:flex; gap: 10px; margin-top: 8px; align-items:stretch; }
.newsletter__form input{
  flex:1;
  border-radius: 14px;
  border:1px solid rgba(46,40,42,.14);
  background: rgba(255,255,255,.96);
  color: var(--dark);
  padding: 12px 12px;
  outline:none;
  min-width: 0;
}

.footer__bottom{
  margin-top: 18px;
  display:flex; justify-content:space-between; align-items:center;
  gap: 12px; padding-top: 16px;
  border-top: 1px solid rgba(46,40,42,.14);
}

.socialRow--icons{ display:flex; gap: 10px; align-items:center; margin-top: 14px; }
.socialIconBtn{
  width:44px;height:44px;
  display:grid; place-items:center;
  border-radius: 999px;
  border:1px solid rgba(23,190,187,.22);
  background: rgba(23,190,187,.10);
  transition: transform var(--fast) var(--easeOut), background var(--fast) var(--easeInOut), border-color var(--fast) var(--easeInOut);
  color: rgba(46,40,42,.92);
  font-weight: 900;
}
.socialIconBtn:hover{
  transform: translateY(-2px);
  background: rgba(181,85,58,.12);
  border-color: rgba(181,85,58,.26);
}

/* =========================
   BACK TO TOP
========================= */
.backTop{
  position:fixed;
  right: 16px;
  bottom: 16px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(46,40,42,.14);
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 55px rgba(46,40,42,.16);
  cursor:pointer;
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  transform: translateY(8px);
  transition: opacity 220ms var(--easeOut), transform 220ms var(--easeOut);
  z-index: 2500;
}
.backTop.is-show{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}
.backTop__icon{ font-weight: 900; color: rgba(46,40,42,.92); font-size: 1.1rem; }
.backTop__ring{
  position:absolute; inset: -6px;
  border-radius: 999px;
  background: conic-gradient(from 90deg, var(--teal), var(--sand), var(--terra), var(--teal));
  filter: blur(10px);
  opacity: .20;
  z-index:-1;
}

/* =========================
   REVEAL
========================= */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity 520ms var(--easeOut), transform 520ms var(--easeOut);
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .nav__menuDesktop{ display:none; }
  .nav__toggle{ display:inline-grid; place-items:center; }

  .grid--2{ grid-template-columns: 1fr; }
  .whyGrid{ grid-template-columns: 1fr; }
  .hostsGrid{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .formRow{ grid-template-columns: 1fr; }

  .sigImg{ min-height: 240px; }
  .sigImg::after{ background: linear-gradient(180deg, rgba(46,40,42,.20), transparent 60%); }

  .newsletter__form{ flex-direction: column; }
  .newsletter__form .btn{ width:100%; }

  .hostsBottomImage{ height: 260px; }
}

@media (max-width: 520px){
  .section{ padding: 56px 0; }
}


/* =========================================================
   MOBILE — CENTER ALL MAIN TITLES (MORE PROFESSIONAL)
========================================================= */
@media (max-width: 980px){

  /* all section headings centered */
  .sectionHead{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .sectionHead h2{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* center the decorative underline */
  .sectionHead h2::after{
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(320px, 70%) !important;
  }

  /* optional: center sub text under titles */
  .sectionHead p{
    text-align: center !important;
  }

  /* Signature card titles centered too (DAYS + subtitle) */
  .sigTop{
    align-items: center !important;
    text-align: center !important;
  }
  .sigDays{
    text-align: center !important;
  }
  .sigTitle{
    text-align: center !important;
    padding-left: 0 !important;
    border-left: none !important; /* cleaner on mobile */
  }
  .sigTitle::after{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* =========================================================
   HERO TITLE — TRUE 3D EXTRUSION (PREMIUM)
========================================================= */

.heroTitle--clean{
  position: relative;
  font-weight: 900;
  letter-spacing: .8px;
  color: #ffffff;

  /* REAL 3D EXTRUSION (stacked layers) */
  text-shadow:
    1px 1px 0 rgba(0,0,0,.22),
    2px 2px 0 rgba(0,0,0,.22),
    3px 3px 0 rgba(0,0,0,.22),
    4px 4px 0 rgba(0,0,0,.22),
    5px 5px 0 rgba(0,0,0,.22),
    6px 6px 0 rgba(0,0,0,.22),
    7px 7px 0 rgba(0,0,0,.22),
    8px 8px 0 rgba(0,0,0,.22),
    10px 14px 35px rgba(0,0,0,.45),
    0 30px 80px rgba(0,0,0,.65);

  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Accent word = metallic / lifted layer */
.heroTitle__accent{
  position: relative;
  display: inline-block;
  color: var(--sand);

  text-shadow:
    1px 1px 0 rgba(0,0,0,.18),
    2px 2px 0 rgba(0,0,0,.18),
    3px 3px 0 rgba(0,0,0,.18),
    4px 4px 0 rgba(0,0,0,.18),
    6px 6px 18px rgba(0,0,0,.40),
    0 22px 55px rgba(237,184,139,.60);

  transform: translateZ(8px);
}


@keyframes hero3DIn{
  from{
    opacity: 0;
    transform: translateY(20px) translateZ(-40px);
  }
  to{
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

.heroTitle--clean{
  animation: hero3DIn 900ms cubic-bezier(.16,1,.3,1) both;
}