/* ============================================================
   VINSPIRATION — GLOBAL DESIGN SYSTEM
   Tokens + shared components for all destination sections.
   Load site-wide. Every section snippet carries class "vinsp"
   on its root element, so nothing leaks into the theme.
   v1.0 · generated from tuscany-standalone.html
   ============================================================ */
:root{
  --burgundy:#722F37;
  --burgundy-deep:#5a242b;
  --ink:#1A1A1A;
  --cream:#F5EFE6;
  --white:#FFFFFF;
  --gold:#b8863b;
  --gold-bright:#cda24a;
  --line:rgba(114,47,55,.18);
  --maxw:1180px;
  --serif:"Playfair Display", Georgia, serif;
  --sans:"Varela Round", system-ui, sans-serif;
}

/* ---------- scoped base (replaces body styles + global reset) ---------- */
.vinsp{font-family:var(--sans);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
.vinsp,.vinsp *{box-sizing:border-box;margin:0;padding:0}
.vinsp img{display:block;max-width:100%}
.vinsp a{color:inherit;text-decoration:none}
.vinsp .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- typography (headings: Playfair Regular 400, one colour) ---------- */
.vinsp .eyebrow{font-family:var(--sans);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--burgundy);margin-bottom:1.4rem}
.vinsp h1,.vinsp h2,.vinsp h3{font-family:var(--serif);font-weight:400;line-height:1.13;letter-spacing:-.01em}
.vinsp .section-title{font-size:clamp(1.9rem,4vw,3rem)}
.vinsp .em{font-style:italic;font-weight:400}
.vinsp p{font-size:1.045rem;color:#3a3330}
.vinsp .lede{font-size:1.15rem}

/* ---------- brand pill button + sliding arrow ---------- */
.vinsp .btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--cream);color:var(--ink);padding:17px 38px;border:none;border-radius:40px;text-decoration:none;cursor:pointer;
  transition:transform .35s ease,box-shadow .35s ease,background .35s ease,color .35s ease}
.vinsp .btn .arr{display:inline-block;line-height:1;font-size:1.05em;transition:transform .35s ease}
.vinsp .btn:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(40,18,20,.4);background:var(--gold-bright);color:var(--ink)}
.vinsp .btn:hover .arr{transform:translateX(6px)}
.vinsp .btn.dark{background:var(--burgundy);color:#fff}
.vinsp .btn.dark:hover{background:var(--gold-bright);color:var(--ink)}
.vinsp .textlink{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--burgundy);border-bottom:1px solid var(--gold);padding-bottom:4px;transition:.3s}
.vinsp .textlink:hover{color:var(--gold)}

/* ---------- image slot with graceful fallback ---------- */
.vinsp .imgslot{position:relative;overflow:hidden;background:radial-gradient(120% 120% at 30% 20%, #efe7da 0%, #e6dccb 55%, #ddd0bb 100%)}
.vinsp .imgslot .imglabel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:1.2rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--burgundy);opacity:.55}
.vinsp .imgslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.vinsp .imgslot img.failed{display:none}

/* ---------- generic section heading block ---------- */
.vinsp .head-block{text-align:center;max-width:40ch;margin:0 auto clamp(40px,6vw,64px)}
.vinsp .head-block h2{font-size:clamp(1.9rem,4vw,3rem)}
.vinsp .head-block .lede{margin-top:1.1rem}

/* ---------- reveal / fade animations ----------
   Hidden state is gated behind .vinsp-js (added by vinspiration-global.js),
   so content is NEVER invisible if the JS fails to load. */
.vinsp-js .vinsp .reveal{opacity:0;transform:translateY(26px)}
.vinsp .reveal{transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.vinsp .reveal.in{opacity:1;transform:none}
.vinsp .d1{transition-delay:.1s}.vinsp .d2{transition-delay:.25s}.vinsp .d3{transition-delay:.4s}.vinsp .d4{transition-delay:.55s}
.vinsp-js .vinsp .fade{opacity:0;transform:translateY(30px)}
.vinsp .fade{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.vinsp .fade.in{opacity:1;transform:none}

/* Elementor editor: never hide animated content while editing */
body.elementor-editor-active .vinsp .reveal,
body.elementor-editor-active .vinsp .fade{opacity:1!important;transform:none!important}

/* ---------- floating enquiry button (site-wide) ---------- */
.floatcta{position:fixed;right:22px;bottom:22px;z-index:60;background:var(--burgundy);color:#fff;border-radius:40px;padding:14px 26px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 12px 30px -10px rgba(40,18,20,.6);transition:.3s;display:inline-flex;gap:10px;align-items:center;text-decoration:none}
.floatcta:hover{background:var(--gold-bright);color:var(--ink);transform:translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  .vinsp .reveal,.vinsp .fade{opacity:1;transform:none}
}