/* ═══════════════════════════════════════════════════
   be2gether weddings & events — Premium Design System
   ═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Italianno&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --clr-gold: #C5A47E; --clr-gold-light: #D4BA9A; --clr-gold-dark: #A88B66;
  --clr-gold-text: #7A6440; /* AA-safe gold for body labels on white/cream (~4.6:1) */
  --clr-cream: #FDF8F0; --clr-cream-dark: #F5EDE0;
  --clr-charcoal: #2C2C2C; --clr-charcoal-light: #4A4A4A;
  --clr-sage: #A3B18A; --clr-white: #FFFFFF;
  --clr-overlay: rgba(44,44,44,0.55);
  --ff-heading: 'Cormorant Garamond', Georgia, serif;
  --ff-body: 'Montserrat', 'Segoe UI', sans-serif;
  --ff-script: 'Italianno', 'Brush Script MT', cursive;
  --fs-hero: clamp(2.8rem, 6vw, 5.5rem);
  --fs-h1: clamp(2rem, 4vw, 3.5rem); --fs-h2: clamp(1.6rem, 3vw, 2.6rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.6rem); --fs-body: clamp(0.95rem, 1.2vw, 1.1rem);
  --fs-small: 0.875rem; --fs-nav: 0.78rem;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem;
  --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 8rem;
  --section-pad: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 5vw, 4rem);
  --max-width: 1200px; --max-width-narrow: 800px; --nav-height: 80px;
  --border-radius: 6px; --border-radius-lg: 12px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12); --shadow-gold: 0 4px 20px rgba(197,164,126,0.25);
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1); --transition-slow: 0.6s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-height);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{font-family:var(--ff-body);font-size:var(--fs-body);font-weight:var(--fw-light);color:var(--clr-charcoal);background:var(--clr-white);line-height:1.75;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--clr-gold-dark);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--clr-gold)}
ul,ol{list-style:none}

h1,h2,h3,h4,h5{font-family:var(--ff-heading);font-weight:var(--fw-regular);line-height:1.2;color:var(--clr-charcoal)}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2);letter-spacing:0.02em} h3{font-size:var(--fs-h3)}

.section-label{font-family:var(--ff-body);font-size:var(--fs-small);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:0.2em;color:var(--clr-gold-text);margin-bottom:var(--space-sm);display:block}
.section-title{font-family:var(--ff-heading);font-size:var(--fs-h2);font-weight:var(--fw-regular);margin-bottom:var(--space-md);line-height:1.25}
.section-subtitle{font-size:var(--fs-body);color:var(--clr-charcoal-light);max-width:600px;line-height:1.8}

.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 clamp(1.5rem,5vw,4rem)}
.container--narrow{max-width:var(--max-width-narrow)}
.section{padding:var(--section-pad)}
.section--cream{background:var(--clr-cream)}
.section--charcoal{background:var(--clr-charcoal);color:var(--clr-white)}
.section--charcoal h2,.section--charcoal h3{color:var(--clr-white)}
.section--charcoal .section-label{color:var(--clr-gold-light)}
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--ff-body);font-size:var(--fs-small);font-weight:var(--fw-semibold);letter-spacing:0.15em;text-transform:uppercase;padding:1rem 2.2rem;border:2px solid transparent;border-radius:0;cursor:pointer;transition:all var(--transition);text-decoration:none;line-height:1}
.btn--primary{background:var(--clr-gold);color:var(--clr-white);border-color:var(--clr-gold)}
.btn--primary:hover{background:var(--clr-gold-dark);border-color:var(--clr-gold-dark);color:var(--clr-white);box-shadow:var(--shadow-gold);transform:translateY(-2px)}
.btn--outline{background:transparent;color:var(--clr-gold);border-color:var(--clr-gold)}
.btn--outline:hover{background:var(--clr-gold);color:var(--clr-white);transform:translateY(-2px)}
.btn--white{background:var(--clr-white);color:var(--clr-charcoal);border-color:var(--clr-white)}
.btn--white:hover{background:transparent;color:var(--clr-white);border-color:var(--clr-white);transform:translateY(-2px)}
.btn--small{padding:0.7rem 1.5rem;font-size:0.8rem}
.btn:hover .btn-arrow{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center;margin-top:var(--space-md)}
@media(max-width:500px){
  .btn{padding:0.85rem 1.6rem;font-size:0.78rem;letter-spacing:0.1em;width:100%;justify-content:center}
  .btn--small{width:auto}
  .btn-row{flex-direction:column;align-items:stretch}
}

/* ── Navbar ── */
.navbar{position:fixed;top:0;left:0;width:100%;height:var(--nav-height);z-index:1000;display:flex;align-items:center;transition:all var(--transition);background:transparent}
.navbar.scrolled{background:rgba(255,255,255,0.97);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm)}
.navbar__inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:var(--max-width);margin:0 auto;padding:0 clamp(1.5rem,5vw,4rem)}
.navbar__logo{position:relative;display:inline-flex;align-items:center;justify-content:center}
.navbar__logo img{height:70px;width:auto;transition:height var(--transition)}
/* Home page hero over dark video: swap to the asset designed for dark backgrounds — flowers in natural cream, frame and BE 2GETHER text baked in pure white. */
body:not(.page-light) .navbar:not(.scrolled) .navbar__logo img{
  content:url('../images/180-Design-ohne-Titel2-white.png');
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.45));
}
/* Home page hero: navbar grows + logo bigger when not yet scrolled. Other pages always carry .scrolled, so they keep 70px. */
@media(min-width:1025px){
  body:not(.page-light) .navbar:not(.scrolled){height:115px}
  body:not(.page-light) .navbar:not(.scrolled) .navbar__logo img{height:96px}
}
.navbar__links{display:flex;align-items:center;gap:clamp(1.6rem,3vw,2.8rem);margin-left:auto}
.navbar__links a{font-family:var(--ff-body);font-size:var(--fs-nav);font-weight:var(--fw-medium);color:var(--clr-white);text-transform:uppercase;letter-spacing:0.1em;position:relative;padding:0.25rem 0;white-space:nowrap}
.navbar__links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1.5px;background:var(--clr-gold);transition:width var(--transition)}
.navbar__links a:hover::after,.navbar__links a.active::after{width:100%}
.navbar.scrolled .navbar__links a{color:var(--clr-charcoal)}
.navbar__cta{margin-left:clamp(1rem,2vw,1.8rem);transition:opacity .35s ease,transform .35s ease,visibility 0s 0s}
body:not(.page-light) .navbar__cta{opacity:0!important;visibility:hidden!important;pointer-events:none;transform:translateY(-6px);transition:opacity .35s ease,transform .35s ease,visibility 0s .35s}
body:not(.page-light) .navbar.scrolled .navbar__cta{opacity:1!important;visibility:visible!important;pointer-events:auto;transform:none;transition:opacity .35s ease,transform .35s ease,visibility 0s 0s}
.navbar .btn--primary{padding:0.55rem 1.25rem;font-size:0.7rem;letter-spacing:0.08em}

.navbar__hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:0.5rem;z-index:1001}
.navbar__hamburger span{width:24px;height:2px;background:var(--clr-white);transition:all var(--transition);display:block}
.navbar.scrolled .navbar__hamburger span{background:var(--clr-charcoal)}
.navbar__hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.navbar__hamburger.open span:nth-child(2){opacity:0}
.navbar__hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

@media(max-width:1024px){
  .navbar__hamburger{display:flex}
  .navbar__links{
    position:fixed;top:0;right:-100%;width:min(85vw,360px);height:100vh;height:100dvh;
    background:var(--clr-white);flex-direction:column;justify-content:center;
    gap:var(--space-lg);padding:var(--space-xl);z-index:1001;
    transition:right var(--transition-slow);box-shadow:-8px 0 40px rgba(0,0,0,0.15);
    overflow-y:auto
  }
  .navbar__links.open{right:0}
  .navbar__links a{color:var(--clr-charcoal);font-size:1.1rem;letter-spacing:0.08em}
  .navbar__links a::after{display:none}
  .navbar__links a.active{color:var(--clr-gold)}
  .navbar__cta{margin-left:0;margin-top:var(--space-md);opacity:1!important;visibility:visible!important;pointer-events:auto;transform:none;transition:none}
  .navbar__cta .btn{width:100%;justify-content:center;padding:1rem 2rem}
  .mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:999;opacity:0;pointer-events:none;transition:opacity var(--transition)}
  .mobile-overlay.open{opacity:1;pointer-events:all}
  .page-light .navbar__links a{color:var(--clr-charcoal)}
}

/* ── Hero ── */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,44,44,0.3) 0%,rgba(44,44,44,0.5) 50%,rgba(44,44,44,0.7) 100%);z-index:1}
.hero__content{position:relative;z-index:2;text-align:center;max-width:800px;padding:var(--space-xl) var(--space-md)}
.hero__label{font-family:var(--ff-body);font-size:var(--fs-small);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:0.35em;color:var(--clr-gold-light);margin-bottom:var(--space-md);opacity:0;transform:translateY(20px);animation:fadeUp .8s .3s ease forwards;text-shadow:0 2px 12px rgba(0,0,0,0.6)}
.hero__title{font-family:var(--ff-heading);font-size:var(--fs-hero);font-weight:var(--fw-light);color:var(--clr-white);line-height:1.1;margin-bottom:var(--space-md);opacity:0;transform:translateY(30px);animation:fadeUp .8s .5s ease forwards;text-shadow:0 3px 20px rgba(0,0,0,0.7),0 1px 4px rgba(0,0,0,0.5)}
.hero__title em{font-style:italic;font-weight:var(--fw-light);color:var(--clr-gold-light)}
.hero__subtitle{font-family:var(--ff-body);font-size:clamp(0.8rem,1vw,0.95rem);font-weight:var(--fw-medium);color:rgba(255,255,255,0.95);line-height:1.5;letter-spacing:0.3em;text-transform:uppercase;margin-bottom:var(--space-lg);max-width:none;opacity:0;transform:translateY(20px);animation:fadeUp .8s .7s ease forwards;text-shadow:0 2px 12px rgba(0,0,0,0.6),0 1px 3px rgba(0,0,0,0.4)}
.hero__cta{opacity:0;transform:translateY(30px);animation:fadeUp .8s .9s ease forwards}
/* ── Philocaly-style wordmark hero ── */
.hero__content--wordmark{max-width:1400px}
.hero__wordmark{font-family:var(--ff-heading);font-size:clamp(4.5rem,14vw,12rem);font-weight:var(--fw-light);color:var(--clr-white);line-height:1.35;letter-spacing:-0.02em;margin:0 0 var(--space-sm);text-shadow:0 4px 30px rgba(0,0,0,0.55),0 2px 10px rgba(0,0,0,0.4);opacity:0;transform:translateY(30px);animation:fadeUp .9s .4s ease forwards}
.hero__wordmark em{font-style:italic;font-weight:var(--fw-regular);color:var(--clr-gold-light)}
.hero__definition{font-family:var(--ff-heading);font-style:normal;font-size:clamp(1.4rem,2.6vw,2.4rem);font-weight:var(--fw-light);color:var(--clr-white);line-height:1;letter-spacing:-0.015em;margin:0 0 var(--space-md);text-shadow:0 3px 20px rgba(0,0,0,0.55),0 1px 6px rgba(0,0,0,0.4);opacity:0;transform:translateY(20px);animation:fadeUp .8s .7s ease forwards}
.hero__scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:0.5rem;color:rgba(255,255,255,0.6);font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;opacity:0;animation:fadeUp .8s 1.2s ease forwards}
.hero__scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--clr-gold-light),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
@keyframes scrollPulse{0%,100%{opacity:.4;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.2)}}

/* ── Video Hero ── */
.hero__bg video{width:100%;height:100%;object-fit:cover;object-position:center 30%;position:absolute;inset:0}
.hero__overlay{background:linear-gradient(180deg,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.35) 25%,rgba(0,0,0,0.55) 55%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.95) 100%)}

/* ═══ MOBILE HERO ═══ */
@media(max-width:768px){
  .hero{min-height:100vh;min-height:100dvh}
  .hero__content{padding:var(--space-lg) var(--space-md)}
  .hero__label{letter-spacing:0.2em;font-size:0.75rem;margin-bottom:var(--space-sm)}
  .hero__subtitle{font-size:0.7rem;letter-spacing:0.25em;line-height:1.5;margin-bottom:var(--space-md)}
  .hero__wordmark{font-size:clamp(4rem,22vw,7.5rem);letter-spacing:-0.01em}
  .hero__definition{font-size:0.95rem;letter-spacing:0.06em;margin-bottom:var(--space-sm)}
  .hero__scroll{bottom:1.5rem}
  .hero__scroll-line{height:30px}
}
@media(max-width:500px){
  .hero__content{padding:var(--space-md) var(--space-sm)}
  .hero__cta .btn{width:100%;justify-content:center}
}

/* ═══ GLOBAL MOBILE SPACING ═══ */
@media(max-width:768px){
  .section{padding:clamp(3rem,6vw,5rem) clamp(1rem,4vw,2rem)}
  .section-title{margin-bottom:var(--space-sm)}
  .section-subtitle{font-size:0.9rem}
}
@media(max-width:500px){
  .section{padding:2.5rem 1rem}
  .container{padding:0 1rem}
  .section-label{font-size:0.72rem;letter-spacing:0.15em}
}