:root{
  --bg:#ffffff;          /* white background */
  --ink:#0e0e0e;
  --muted:#6b6b6b;
  /* Optional accent colour (unused now) */
  --accent:#e24b5a;
  --card:#ffffff;
  /* Primary brand colour for the wordmark and certain accents */
  --wordmark:#7a0e17;
  /* Ruby red for the header with translucency. Deepen the hue for a richer, ruby tone while preserving the glassy backdrop. */
  --nav-bg: rgba(130, 5, 15, 0.65);
  /* Crayola yellow for header text */
  --nav-color:#fce883;
  /* Gradient colours for call‑to‑action buttons. Use a golden hue paired with a deep blood red for a luxurious feel */
  --cta-gradient-start:#d4af37; /* gold */
  --cta-gradient-end:#9b111e;   /* blood red */
  /* Pink‑red tone specifically for the "coming soon" notice */
  --coming-pink:#e05674;
  /* Light pink hue for tagline/subtext */
  --tagline-pink:#e5a6c2;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  /* Use Playfair Display for all site typography */
  font:16px/1.5 'Playfair Display', serif;
}

/* Enable smooth scrolling for anchor navigation so that clicking a link animates the scroll rather than jumping */
html{
  scroll-behavior: smooth;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit}

/* NAV */
.nav{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 22px;
  background:var(--nav-bg);
  /* Apply a blurred, saturated backdrop for the semi‑transparent nav bar */
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
  /* Use Playfair Display for all header text */
  font-family:'Playfair Display', serif;
}
/* Brand uses the same maroon as the main wordmark */
.nav .brand{
  font-weight:700;
  letter-spacing:.4px;
  /* Use Playfair Display for the brand in the header */
  font-family:'Playfair Display', serif;
  /* Brand name uses pastel yellow from the nav palette */
  color:var(--nav-color);
}
.nav nav{
  display:flex;
  gap:18px;
  align-items:center;
  /* Apply the pastel yellow colour to all navigation links.  
     Each anchor inherits this colour explicitly so the default link colour isn't used. */
  color:var(--nav-color);
  font-family:'Playfair Display', serif;
  font-weight:700;
}

/* Style the navigation links individually to ensure colour inheritance */
.nav nav a{
  color:var(--nav-color);
  font-family:'Playfair Display', serif;
  text-decoration:none;
  font-weight:700;
}

.nav .pill{
  /* Elongate and emphasise the navigation join button */
  /* Make the nav join button more elongated by increasing its horizontal padding */
  padding:8px 52px;
  border-radius:999px;
  /* Apply a magenta‑orange gradient consistent with the hero button */
  background:linear-gradient(135deg, var(--cta-gradient-start) 0%, var(--cta-gradient-end) 100%);
  border:none;
  /* Use a light font colour for contrast against the gradient */
  color:#ffffff;
}
.burger{display:none;background:transparent;border:0;font-size:20px}

/* HERO LAYOUT - new grid with corner cards and high title */
.hero{
  /* Use a simple single-column grid for hero content and allow absolute/fixed positioned cards to float behind it */
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-items: center;
  min-height: 92svh;
  /* Move content further upward and allocate more space for the images at the bottom */
  padding: 4svh 20px 10svh;
}

/* Title group sits high between the top images */
.title-group{
  text-align:center;
  position: relative;
  z-index: 5;
}
.wordmark{
  color:var(--wordmark);
  /* Use Playfair Display font for the main Golabii wordmark */
  font-family:'Playfair Display', serif;
  /* Maintain refined wordmark size */
  font-size:clamp(34px,8vw,120px);
  letter-spacing:.08em;margin:0;text-align:center;
}

/* Call-to-action and tagline */
.cta-group{
  text-align:center;
  position: relative;
  z-index: 5;
  /* Add vertical spacing so the CTA does not collide with the tagline above */
  margin-top:0.6rem;
}
.cta-primary{
  /* Use the gradient for all primary call‑to‑action buttons */
  background:linear-gradient(135deg, var(--cta-gradient-start) 0%, var(--cta-gradient-end) 100%);
  color:#fff;
  border:none;
  border-radius:14px;
  padding:12px 18px;
  /* Soften the shadow to complement the gradient */
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.cta-primary:hover{
  /* On hover, make the button glow using the end colour of the gradient and raise it slightly */
  box-shadow:0 0 16px var(--cta-gradient-end, #9b111e), 0 10px 20px rgba(0,0,0,.25);
  transform:translateY(-2px);
  transition:box-shadow .3s ease, transform .3s ease;
}
.cta-large{
  /* Scale the primary hero button up by roughly 40% to stand out */
  font-size:clamp(22px,2.4vw,38px);
  /* Adjust the button dimensions: reduce height by roughly 10% and increase width by roughly 10%
     to create a more elongated appearance. */
  padding:16px 58px;
  border-radius:18px;
}
.tagline{
  /* Style the campaign profits tagline as subtext directly beneath the wordmark */
  /* Bring the tagline even closer to the wordmark by reducing the top margin further */
  /* Position the tagline close to the wordmark but leave enough space for readability */
  /* Bring the tagline closer to the wordmark for a tighter relationship */
  /* Bring the tagline even closer to the wordmark by halving the vertical margin */
  /* Align the vertical distance between the wordmark and tagline with the spacing between the CTA button and 'coming soon' notice */
  margin:0.4rem 0 0;
  color:var(--tagline-pink);
  /* Set the tagline size relative to the wordmark so it reads like a subtitle.  
     It should be noticeably smaller than the main wordmark to act as subtext. */
  font-size:clamp(18px,2.5vw,28px);
}

/* Container for the static hero links */
.hero-links{
  display:flex;
  /* Arrange all three images in a single horizontal row */
  flex-direction:row;
  justify-content:center;
  /* Keep images aligned along their top edges */
  align-items:flex-start;
  /* Provide generous spacing between each image */
  gap:48px;
  /* Prevent wrapping on large screens so all three images remain in one row */
  flex-wrap:nowrap;
  /* Place the hero links below the bottom notice using normal document flow rather than absolute positioning.
     This prevents them from overlaying other elements, especially on narrow screens. */
  margin-top:1.5rem;
  position:relative;
  z-index:4;
}

/* Remove specialised columns since hero-links now displays all images in a single row */
/* .hero-left and .hero-right definitions are no longer needed */

/* Ensure uniform sizing for all hero images */
.hero-link img{
  /* Ensure all hero images share consistent dimensions for a clean, harmonious layout.  Use a fixed aspect
     ratio so portraits and still‑life photographs render at the same height. */
  width:min(26vw,260px);
  aspect-ratio:0.75;
  height:auto;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  transition:transform .2s ease;
}

.hero-link img:hover{
  transform:translateY(-4px);
}

/* Adjust overlay label font to use Playfair Display */
.hero-label{
  font-family:'Playfair Display', serif;
}
/* removed duplicate hero image size declarations (see above for final sizing) */

/* Hero image container and overlay labels */
.hero-img-container{
  position:relative;
  display:inline-block;
  overflow:hidden;
}
/* legacy hero-label declaration overwritten above; font-family updated to Playfair */
.hero-label.top{ top:0.4rem; }
.hero-label.bottom{ bottom:0.4rem; }

/* Bottom third message */
.bottom-notice{
  text-align:center;
  position: relative;
  z-index: 5;
  /* Slight gap above the bottom notice to separate it from the CTA group.  
     Keep it similar to the tagline spacing so the pieces feel cohesive. */
  /* Add space between the CTA and the 'coming soon' notice */
  /* Move the bottom notice closer to the call‑to‑action to match the proximity of the tagline to the wordmark */
  margin-top:0.4rem;
}
.bottom-notice .coming{
  font-size:clamp(20px,2.5vw,28px);
  letter-spacing:.04em;
  margin:0 0 .2rem;
  /* Use a distinct pink‑red tone for the coming soon message */
  color:var(--coming-pink);
  /* Emphasise the "coming soon" message with bold weight */
  font-weight:700;
}
.bottom-notice .flavors{
  color:var(--muted);
  font-size:clamp(14px,1.2vw,16px);
  margin:0;
}

/* Subtitle beneath the wordmark listing the flavours */
.subtitle-flavors{
  margin:.5rem 0 0;
  /* Increase size further so the flavour list acts as a prominent subtitle beneath the wordmark */
  font-size:clamp(26px,3.5vw,38px);
  color:var(--muted);
}

/* Previously floating card styles are removed because images are now statically positioned at the bottom of the hero. */

/* OTHER SECTIONS (unchanged) */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:64px 20px;max-width:1100px;margin:0 auto}
.split .visual{justify-self:center}
.panel{padding:72px 20px;max-width:900px;margin:0 auto}
.panel h2{margin:0 0 12px}
.grid{padding:64px 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto}
.grid article{border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:18px 16px;background:#fff}

.waitlist{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin:16px 0}
.waitlist input{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(0,0,0,.15)}
.waitlist button{background:var(--accent);color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:10px;padding:10px 16px}

.foot{display:flex;justify-content:space-between;gap:12px;padding:22px;border-top:1px solid rgba(0,0,0,.08);color:var(--muted)}
.foot .muted{opacity:.6;pointer-events:none}

/* MOBILE */
@media (max-width:900px){
  .nav nav{display:none}
  .burger{display:block}
  .hero{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 14px;
  }
  /* On small screens, images fill available width */
  .card img{width:100%;min-width:0}
  .split{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}

  /* Adjust hero links on small screens: stack images vertically and allow them to fill width */
  .hero-links{
    flex-direction:column;
    gap:20px;
    margin-top:1rem;
    align-items:center;
  }
  /* Remove specialised column behaviour on small screens */
  .hero-link img{
    /* Allow the images to take nearly full width on small screens */
    width:min(90vw, 260px);
  }
}

/* Contact section with a single large call‑to‑action button */
.join-only{
  text-align:center;
  padding:80px 20px;
}
.big-join{
  display:inline-block;
  margin-top:1.2rem;
  /* Use the same magenta‑to‑orange gradient as other CTA buttons */
  background:linear-gradient(135deg, var(--cta-gradient-start) 0%, var(--cta-gradient-end) 100%);
  color:#fff;
  padding:22px 60px;
  font-size:clamp(22px,2.5vw,36px);
  border-radius:20px;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.big-join:hover{
  /* Apply the same glowing hover effect to the big join button */
  box-shadow:0 0 20px var(--cta-gradient-end, #9b111e), 0 12px 24px rgba(0,0,0,.26);
  transform:translateY(-2px);
  transition:box-shadow .3s ease, transform .3s ease;
}
}