/* ════════════════════════════════════════
   TILVIO — Homepage
   ════════════════════════════════════════ */

:root{--bg:#F7F5F0;--text:#111;--accent:#C4500A;--nav-h:60px}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-weight:300;overflow-x:hidden}

/* ── NAV ───────────────────────────── */
.nav{position:fixed;top:0;width:100%;z-index:100;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 3rem;background:transparent;transition:background .3s}
.nav.scrolled{background:rgba(247,245,240,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nav-logo{font-family:'Big Shoulders Display',sans-serif;font-weight:300;font-size:1.1rem;color:var(--text);text-decoration:none;text-transform:uppercase;letter-spacing:.08em;opacity:0;transition:opacity .3s}
.nav.scrolled .nav-logo{opacity:1}
.nav-links{list-style:none;display:flex;align-items:center;gap:0}
.nav-links li{display:flex;align-items:center}
.nav-links li+li::before{content:'|';color:#ccc;font-size:.7rem;margin:0 1.5rem}
.nav-links a{color:var(--text);text-decoration:none;font-size:.8rem;font-weight:300;letter-spacing:.08em;transition:color .2s}
.nav-links a:hover{color:var(--accent)}
.hamburger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:.5rem}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--text)}

/* ── HERO ──────────────────────────── */
.hero-scroll-wrapper{height:calc(1400px + 100vh);margin:0;padding:0}
.hero-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}


/* ── WORDMARK ──────────────────────── */
.tilvio-wordmark{font-family:'Big Shoulders Display',sans-serif;font-weight:100;font-size:22vw;line-height:.85;letter-spacing:.05em;color:var(--text);text-transform:uppercase;will-change:opacity,transform;text-align:center;position:relative;z-index:2}

/* ── TAGLINE ROW (words + links) ──── */
.tagline-row{display:flex;justify-content:center;gap:.3em;margin-top:2rem;width:100%;position:relative;z-index:2}
.tag-col{display:flex;flex-direction:column;align-items:center;will-change:transform}
.tag-word{font-family:'DM Sans',sans-serif;font-weight:300;font-size:clamp(1.4rem,3vw,2.8rem);letter-spacing:.15em;color:var(--text);opacity:.75;will-change:font-size,opacity,color;white-space:nowrap;display:inline-block;transition:color .15s;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.tag-links{list-style:none;display:flex;flex-direction:column;gap:2rem;margin-top:1.8rem;opacity:0;transform:translateY(20px);will-change:opacity,transform;pointer-events:none;text-align:center}
.tag-links a{color:var(--text);text-decoration:none;font-size:1.1rem;font-weight:300;letter-spacing:.02em;position:relative;transition:color .15s}
.tag-links a:hover{color:var(--accent)}
.tag-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--accent);transition:width .3s}
.tag-links a:hover::after{width:100%}

/* ── SCROLL HINT ───────────────────── */
.scroll-hint{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;opacity:.25;z-index:2}
.scroll-hint span{font-size:.6rem;letter-spacing:.4em;text-transform:uppercase}
.scroll-hint-line{width:1px;height:30px;background:var(--text);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:.2}50%{opacity:.8}}


/* ── MOBILE-ONLY ELEMENTS (hidden on desktop) ── */
.mobile-hero{display:none}
.mobile-footer{display:none}

/* ── MOBILE ────────────────────────── */
@media(max-width:768px){

/* Hide desktop, show mobile */
.hero-scroll-wrapper{display:none}
.tilvio-footer{display:none}
.mobile-hero{display:block}
.mobile-footer{display:block}

/* Nav */
.nav{padding:0 1.5rem}
.nav-links{display:none}
.nav-links.open{display:flex;flex-direction:column;position:fixed;top:var(--nav-h);left:0;right:0;background:var(--bg);padding:2rem;gap:1.5rem;box-shadow:0 10px 40px rgba(0,0,0,.06)}
.nav-links.open li+li::before{display:none}
.hamburger{display:flex}
.nav-logo{opacity:1!important}

/* Mobile hero */
.mobile-hero{background:var(--bg);height:700vh}
.mobile-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg)}

/* TILVIO */
.m-tilvio{font-family:'Big Shoulders Display',sans-serif;font-weight:100;font-size:22vw;letter-spacing:.05em;color:var(--text);line-height:.85;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;will-change:opacity,transform}

/* Words — absolute positioned, side by side initially */
.m-word{font-family:'Big Shoulders Display',sans-serif;font-weight:200;color:var(--text);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px;position:absolute;white-space:nowrap;will-change:opacity,transform;font-size:7vw}

/* Sections — centered, hidden */
.m-section{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;opacity:0;width:90%;will-change:opacity}
.m-heading{font-family:'Big Shoulders Display',sans-serif;font-weight:200;font-size:14vw;color:var(--text);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px;display:block;margin-bottom:1.5rem;line-height:1}
.m-menu{list-style:none;padding:0;margin:0}
.m-menu li{padding:.6rem 0;border-bottom:1px solid rgba(0,0,0,.08)}
.m-menu li:last-child{border-bottom:none}
.m-menu li a{font-family:'DM Sans',sans-serif;font-size:5.5vw;color:var(--text);text-decoration:none;font-weight:300}
.m-menu li a:hover{color:var(--accent)}

/* Mobile footer */
.mobile-footer{background:#0a0f1a;width:100%}
.mobile-footer-inner{display:flex;flex-direction:column;align-items:center;gap:.8rem;padding:2rem 1.5rem;text-align:center}
.mobile-footer-brand{font-family:'Big Shoulders Display',sans-serif;font-size:1.1rem;color:rgba(255,255,255,.9);font-weight:300;letter-spacing:.1em}
.mobile-footer-kvk,.mobile-footer-copy{font-family:'DM Sans',sans-serif;font-size:.75rem;color:rgba(255,255,255,.3)}
.mobile-footer-socials{display:flex;gap:2rem;margin-top:.5rem}
.mobile-footer-socials a{font-family:'DM Sans',sans-serif;font-size:.8rem;color:rgba(255,255,255,.5);text-decoration:none}
.mobile-footer-socials a:hover{color:rgba(255,255,255,.95)}
}

/* ── FOOTER ────────────────────────── */
.tilvio-footer{background:#0a0f1a;width:100%}
.footer-inner{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 3rem;max-width:1400px;margin:0 auto}
.footer-left{display:flex;align-items:center;gap:1.5rem}
.footer-brand{font-family:'Big Shoulders Display',sans-serif;font-size:1rem;color:rgba(255,255,255,.9);font-weight:300}
.footer-kvk{font-family:'DM Sans',sans-serif;font-size:.75rem;color:rgba(255,255,255,.3)}
.footer-center{font-family:'DM Sans',sans-serif;font-size:.75rem;color:rgba(255,255,255,.3)}
.footer-right{display:flex;gap:2rem}
.footer-right a{font-family:'DM Sans',sans-serif;font-size:.8rem;color:rgba(255,255,255,.5);text-decoration:none;letter-spacing:.05em;transition:color .3s}
.footer-right a:hover{color:rgba(255,255,255,.95)}