/* Color palette - New elegant nature-inspired scheme */
:root {
  /* New elegant color palette */
  --bg-primary: #fdfdfd; /* Light white background */
  --bg-secondary: #f3f9f3; /* Pale green alternative */
  --accent-primary: #b6d7b9; /* Pastel green accent */
  --accent-secondary: #93b199; /* Elegant olive accent */
  --button-primary: #4d735b; /* Deep green for buttons */
  --text-primary: #333333; /* Dark grey for text */
  --text-secondary: #666666; /* Medium grey for secondary text */
  --text-light: #ffffff; /* White text for buttons */
  --overlay-soft: rgba(255,255,255,0.65); /* Soft white overlay for text backgrounds */
  
  /* Legacy variables for compatibility - will be updated */
  --lux-1: var(--bg-primary);
  --lux-2: var(--bg-secondary);
  --lux-3: var(--accent-secondary);
  --lux-gold: var(--accent-primary);
  --nat-1: var(--button-primary);
  --nat-2: var(--accent-secondary);
  --nat-3: var(--accent-primary);
  --nat-4: var(--text-primary);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --accentA: var(--accent-primary);
  --accentB: var(--accent-secondary);
  --header-h: 64px;
  --footer-space: 0px;
}

/* CSS custom property for animating the conic border */
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Allow animating proximity as a number for mobile pulse */
@property --proximity {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 400;
  color: var(--text-secondary); /* Medium grey instead of black */
  background: var(--bg-primary);
  background-image: url("linen-texture.svg");
  background-size: 200px 200px;
  background-repeat: repeat;
  display: flex; /* Ensure footer sticks to bottom when content is short */
  flex-direction: column;
  min-height: 100svh;
  text-shadow: 0 0.5px 1.5px rgba(0,0,0,0.2); /* Subtle shadow for body text */
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--button-primary); /* Deep green for all headings */
  letter-spacing: -0.01em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 0.5px 1px rgba(255,255,255,0.6); /* Strong shadows for headings */
}

p {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary); /* Medium grey for better readability */
  margin: 0 0 16px;
  text-shadow: 0 0.5px 1.5px rgba(0,0,0,0.2); /* Subtle shadow for paragraphs */
}

/* Main luxury title styling - elegant and sophisticated */
.lux-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(32px, 8vw, 64px);
  line-height: 1.1;
  margin: 0 0 24px;
  color: var(--button-primary); /* Deep green from palette */
  text-shadow: 0 1.5px 6px rgba(0,0,0,0.4), 0 0.5px 1.5px rgba(255,255,255,0.8); /* Strong shadow for visibility */
  letter-spacing: -0.02em;
}

/* Add soft text shadows and overlays for better readability */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.5vw, 28px);
  background: var(--overlay-soft);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

/* Full-bleed nature image behind animations */
.bg-image {
  position: fixed;
  inset: 0;
  z-index: -2; /* below Vanta canvas */
  background-image: url("upscalemedia-transformed.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
a { color: var(--nat-4); text-decoration: none; }
a:hover { text-decoration: underline; }
.skip-link {
  position: absolute; left: -9999px; top: -9999px;
}
.skip-link:focus { left: 1rem; top: 1rem; background: var(--lux-3); color: var(--text); padding: .5rem .75rem; border-radius: .25rem; }

/* Header */
.site-header {
  position: fixed; inset: 0 0 auto 0; height: 64px; z-index: 10;
  backdrop-filter: blur(8px);
  background: rgba(253, 253, 253, 0.9);
  border-bottom: 1px solid var(--accent-primary);
}
.site-header .brand {
  max-width: 1200px; margin: 0 auto; height: 64px; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
}
.logo { font-weight: 600; letter-spacing: .12em; color: var(--button-primary); }
.logo .brand-mark { height: 4.0em; width: auto; margin-left: 6px; vertical-align: middle; }
.nav a { margin-left: 20px; color: var(--text-primary); opacity: .9; font-family: 'Inter', sans-serif; }
.nav a:hover { color: var(--button-primary); }
/* Header social (hidden by default; shown on phones) */
.header-social { display: none; align-items: center; }
.header-social a { color: var(--text); opacity: .85; }
.header-social a:hover { color: var(--lux-gold); }
.header-social .icon { width: 24px; height: 24px; }

/* Hero */
.hero { position: relative; display: flex; align-items: center; min-height: calc(100svh - var(--header-h)); padding-top: calc(var(--header-h) + 32px); padding-bottom: 32px; overflow: hidden; }
.hero-content { 
  position: relative; 
  z-index: 2; 
  max-width: 900px; 
  margin: 0 auto; 
  padding: 32px 24px; 
  text-align: center; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: clamp(14px, 2.5vw, 28px);
  background: var(--overlay-soft);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.hero-content > * { transition: opacity .7s ease, transform .7s ease, filter .7s ease; transition-delay: var(--d, 0s); }
.hero-content > *:nth-child(1) { --d: .05s; }
.hero-content > *:nth-child(2) { --d: .15s; }
.hero-content > *:nth-child(3) { --d: .25s; }
.hero-content > *:nth-child(4) { --d: .35s; }
.lux-title {
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.1;
  margin: 0 0 16px;
  /* Removed transparent color - using main styling instead */
  position: relative;
}

.lead { font-size: clamp(16px, 2.2vw, 22px); opacity: .95; }
.sublead { font-size: clamp(14px, 1.8vw, 18px); opacity: .85; }
.cta { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.25rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; font-size: clamp(14px, 1.6vw, 16px); min-height: 44px; font-family: 'Inter', sans-serif; font-weight: 500; }
.btn-primary { 
  background: var(--button-primary); 
  color: var(--text-light); 
  border-color: var(--button-primary); 
  box-shadow: 0 4px 16px rgba(77, 115, 91, 0.3); 
  transition: all 0.3s ease;
}
.btn-primary:hover { 
  background: #3d5c47; /* Darker shade of deep green for hover */
  box-shadow: 0 6px 20px rgba(77, 115, 91, 0.4); 
  transform: translateY(-2px);
}
.btn-ghost { 
  background: transparent; 
  color: var(--button-primary); 
  border-color: var(--button-primary); 
}
/* Text placed under the CTA button */
.after-cta-title { margin: 8px 0 0; font-size: clamp(18px, 2.3vw, 26px); opacity: .92; }

/* Kickstarter CTA: proximity highlight + animated gradient border */
.kick-btn {
  position: relative;
  --proximity: 0;
  transition: box-shadow .25s ease, transform .2s ease, filter .2s ease;
}
.kick-btn:hover,
.kick-btn:focus-visible,
.kick-btn.proximate {
  filter: brightness(calc(1.06 + 0.28 * var(--proximity)));
  transform: translateY(calc(-2px * var(--proximity))) scale(calc(1 + 0.05 * var(--proximity)));
  box-shadow: 0 12px calc(26px + 28px * var(--proximity)) rgba(77,115,91, calc(.48 + .32 * var(--proximity)));
}
.kick-btn::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  padding: 4px;
  background: conic-gradient(from var(--angle), #efc07b, #7ba05b, #f4f1eb, #efc07b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: calc(.55 + .45 * var(--proximity));
  transition: opacity .2s ease;
  pointer-events: none;
}
.kick-btn:hover::before,
.kick-btn:focus-visible::before,
.kick-btn.proximate::before { animation: spinBorder 4s linear infinite; }

@keyframes spinBorder { to { --angle: 360deg; } }

/* Mobile pulse: gently vary proximity to create a breathing effect */
@keyframes mobileProximity {
  0% { --proximity: .12; }
  50% { --proximity: .30; }
  100% { --proximity: .12; }
}

/* When enabled via JS on phones, run proximity pulse and border spin */
/* (moved to media query to strictly gate by viewport size) */

/* Hero background animations */
.hero-bg { position: absolute; inset: 0; z-index: 1; }
.blob { position: absolute; width: 40vmax; height: 40vmax; filter: blur(60px); opacity: .35; }
.blob-1 { background: radial-gradient(circle at 30% 30%, var(--lux-gold), transparent 60%); top: -10%; left: -10%; animation: float1 16s ease-in-out infinite; }
.blob-2 { background: radial-gradient(circle at 70% 30%, var(--nat-3), transparent 60%); top: 10%; right: -10%; animation: float2 20s ease-in-out infinite; }
.blob-3 { background: radial-gradient(circle at 50% 80%, var(--lux-3), transparent 60%); bottom: -10%; left: 20%; animation: float3 22s ease-in-out infinite; }
@keyframes float1 { 0%,100% { transform: translate3d(0,0,0) } 50% { transform: translate3d(2%, -2%, 0) } }
@keyframes float2 { 0%,100% { transform: translate3d(0,0,0) } 50% { transform: translate3d(-3%, 1%, 0) } }
@keyframes float3 { 0%,100% { transform: translate3d(0,0,0) } 50% { transform: translate3d(1%, 3%, 0) } }

.ripple { position: absolute; bottom: 0; left: 0; width: 100%; height: 0; display: none; }

/* Sticky footer layout */
main { flex: 1 0 auto; padding-bottom: 0; }
.site-footer { margin-top: auto; }

/* Sections */
.section { 
  padding: 80px 24px; 
  background: var(--bg-secondary);
  background-image: url("canvas-texture.svg");
  background-size: 150px 150px;
  background-repeat: repeat;
  position: relative;
}
.section:nth-child(even) { 
  background: var(--bg-primary);
  background-image: url("bamboo-texture.svg");
  background-size: 180px 180px;
  background-repeat: repeat;
}
.container { max-width: 1100px; margin: 0 auto; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin: 24px 0 0; }
/* Enhanced intro text styling */
.intro .line {
  font-size: clamp(16px, 2.2vw, 20px);
  margin: 0 0 8px;
  color: var(--accent-secondary); /* Elegant olive for intro lines */
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15); /* Matching shadow with newsletter text */
}

/* Hide mobile line breaks on desktop */
.mobile-break { display: none; }

/* Features section with palette colors */
.features h3 { 
  margin: 0 0 8px; 
  color: var(--accent-primary); /* Pastel green for feature headings */
  font-size: clamp(18px, 2.5vw, 24px);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 0.5px 1px rgba(255,255,255,0.6); /* Shadow for features */
}
.features p { 
  margin: 0; 
  opacity: .85; 
  text-shadow: 0 0.5px 1.5px rgba(0,0,0,0.2); /* Subtle shadow for feature text */
}

.newsletter-inline { max-width: 760px; margin: 12px auto 0; text-align: center; }
/* Newsletter section styling - smaller and elegant */
.newsletter-inline h2 { 
  margin: 0 0 16px; 
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(18px, 4vw, 28px); /* Made smaller */
  line-height: 1.1;
  color: var(--button-primary); /* Deep green to match 'Luxury That Respects Nature' */
  text-shadow: 0 1px 4px rgba(0,0,0,0.3); /* Stronger shadow for visibility */
  letter-spacing: -0.02em;
}
.newsletter-inline h2.colorized { 
  color: var(--button-primary); /* Deep green to match 'Luxury That Respects Nature' */
  position: relative; 
}
/* Newsletter text styling */
.newsletter-inline p { 
  margin: 0 0 12px; 
  opacity: .85; 
  color: var(--accent-secondary); /* Elegant olive to match intro section */
  font-size: clamp(14px, 1.8vw, 16px);
  text-shadow: 0 1px 2px rgba(0,0,0,0.15); /* Subtle shadow for newsletter text */
}
.privacy { 
  font-size: 12px; 
  opacity: .7; 
  color: var(--accent-secondary); /* Elegant olive for privacy text */
  text-shadow: 0 1px 2px rgba(0,0,0,0.12); /* Subtle shadow for privacy text */
}
.newsletter-inline .subscribe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; }

.newsletter .subscribe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.subscribe input[type="email"] {
  flex: 1 1 280px;
  padding: .9rem 1rem;
  border: 1px solid var(--accent-primary);
  border-radius: 999px;
  background: rgba(77, 115, 91, 0.15);
  color: var(--text-primary);
}
.subscribe input[type="email"]:focus {
  outline: none;
  border: 2px solid var(--button-primary);
  box-shadow: 0 0 8px rgba(77, 115, 91, 0.3);
  background: rgba(77, 115, 91, 0.1);
}
.subscribe input::placeholder { color: var(--accent-secondary); }
.privacy { margin-top: 12px; font-size: 12px; opacity: .7; }

/* Reveal on scroll */
.reveal { transform: translateY(24px); opacity: 0; transition: transform .6s ease, opacity .6s ease; }
.reveal.visible { transform: translateY(0); opacity: 1; }

/* Footer */
.site-footer { 
  padding: 32px 24px; 
  border-top: 1px solid var(--accent-primary); 
  background: #ffffff; 
}
.foot { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot { transition: opacity .7s ease, transform .7s ease, filter .7s ease; }
.social a { margin-left: 16px; color: var(--text-primary); opacity: .85; }
.social a:hover { color: var(--button-primary); }
.social .icon { width: 24px; height: 24px; }

/* Organization link styling */
.org-link {
  color: var(--lux-gold);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(239,192,123,.6);
  padding-bottom: 1px;
}
.org-link:hover, .org-link:focus-visible {
  filter: brightness(1.1);
  border-bottom-color: rgba(239,192,123,.9);
}

/* Copyright text styling */
.site-footer small {
  color: var(--accent-secondary); /* Elegant olive to match intro section */
}

/* Screen reader only */
.sr-only { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* Responsive tweaks */
@media (max-width: 640px) {
  .lux-title { font-size: clamp(26px, 7vw, 42px); }
  .hero { padding-top: 88px; padding-bottom: 40px; }
  /* Show TikTok in header on phones, hide footer social */
  .header-social { display: inline-flex; }
  .site-footer .social { display: none; }
  /* Footer layout: place TikTok icon right after text on mobile */
  .foot { justify-content: flex-start; gap: 8px; }
  .social { order: 2; display: inline-flex; margin-left: 8px; }
  .social a { margin-left: 0; }
}

/* Extra responsive tweaks */
@media (max-width: 480px) {
  .hero { padding-top: 80px; padding-left: 16px; padding-right: 16px; }
  .hero-content { 
    max-width: 85%; 
    margin: 0 auto;
    padding: 24px 20px;
  }
  .cta { width: 100%; }
  .btn { width: 100%; max-width: 320px; }
  .subscribe { width: 100%; }
  .subscribe input[type="email"] { flex-basis: 100%; }
  
  /* Mobile line break styling */
  .mobile-break { display: block; }
  
  /* Improved mobile intro section styling */
  .intro { 
    max-width: 100%; 
    margin: 20px auto 0; 
    padding: 0;
    text-align: center; 
  }
  .intro .line { 
    margin: 0 auto 12px; 
    display: block; 
    font-size: clamp(16px, 4.5vw, 18px); 
    line-height: 1.4;
    opacity: .95;
    max-width: 280px;
  }
  .intro .line:first-child {
    font-weight: 600;
    margin-bottom: 16px;
  }
  .intro .line:last-child {
    margin-bottom: 0;
    margin-top: 16px;
    font-style: italic;
  }
  
  /* Slightly smaller, softer blobs to reduce visual weight on phones */
  .blob { width: 32vmax; height: 32vmax; filter: blur(48px); opacity: .30; }
  /* Ensure pulse is active when class is present */
  .kick-btn.mobile-pulse { animation: mobileProximity 3s cubic-bezier(.4, 0, .2, 1) infinite; }
  .kick-btn.mobile-pulse::before { animation: spinBorder 4s linear infinite; }
  /* Softer transform and shadow on mobile for smooth feel */
  .kick-btn:hover,
  .kick-btn:focus-visible,
  .kick-btn.proximate {
    transform: translateY(calc(-1.5px * var(--proximity))) scale(calc(1 + 0.04 * var(--proximity)));
    box-shadow: 0 10px calc(22px + 22px * var(--proximity)) rgba(77,115,91, calc(.46 + .30 * var(--proximity)));
  }
}

@media (min-width: 1400px) {
  .hero-content { max-width: 1000px; }
  .lux-title { font-size: 72px; }
  .lead { font-size: 24px; }
}
/* Desktop: keep social to the right side */
@media (min-width: 641px) {
  .foot { justify-content: space-between; }
}

/* Removed CSS-only greenery scene in favor of Vanta.js background */
.intro { max-width: 720px; margin: 12px auto 0; text-align: center; }
.intro .line { margin: 0; display: block; font-size: clamp(15px, 2.1vw, 20px); opacity: .9; }
.intro .line + .line { margin-top: clamp(8px, 1.6vw, 14px); }

/* First-load entrance animation: hidden until page load, then fade/slide in once */
.preload .site-header .brand,
.preload .hero-content > *,
.preload .site-footer .foot {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
}

/* Simple centered modal overlay */
.modal-overlay[hidden] { display: none !important; }
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
}
.modal {
  width: min(520px, calc(100% - 32px));
  margin: 0 16px;
  background: linear-gradient(180deg, var(--accent-primary), rgba(182, 215, 185, 0.95));
  border: 1px solid var(--button-primary);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(15,52,96,.45);
  padding: 24px;
  text-align: center;
}
/* Modal styling with palette colors */
.modal-title { 
  margin: 0 0 8px; 
  color: var(--button-primary); /* Deep green for modal title */
  font-size: clamp(20px, 2.6vw, 28px); 
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 0.5px 1px rgba(255,255,255,0.8); /* Adjusted shadow for light background */
}
.modal-body {
  color: var(--text-primary); /* Dark text for light background */
  margin: 0 0 16px;
  text-shadow: 0 0.5px 1.5px rgba(0,0,0,0.1); /* Lighter shadow for light background */
}
.modal-body { margin: 0 0 16px; opacity: .9; }
.modal-close { min-width: 160px; }
.modal-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Animated button borders and hover scaling for modal actions */
.btn-animated { position: relative; transition: transform .2s ease, filter .2s ease; }
.btn-animated::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  padding: 4px;
  background: conic-gradient(from var(--angle), var(--accent-primary), var(--button-primary), var(--accent-secondary), var(--accent-primary));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .65;
  transition: opacity .2s ease;
  pointer-events: none;
}
.btn-animated:hover::before,
.btn-animated:focus-visible::before { animation: spinBorder 4s linear infinite; opacity: 1; }
.btn-animated:hover,
.btn-animated:focus-visible { transform: scale(1.06); filter: brightness(1.03); }

/* Buttons should not show underline; keep links elsewhere unchanged */
.btn, .btn:hover, .btn:focus-visible { text-decoration: none; }

/* Close button: no animated border, keep hover scale */
.modal-close.btn-animated::before { content: none; }