/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  /* Colours — aliased to the Webflow brand tokens (chic-weddings-events.css) */
  --color-primary: var(--nuptial-noir);
  --color-secondary: var(--misty-rose);
  --color-accent: var(--pretty-in-pink);
  --color-bg: var(--nuptial-noir);
  --color-text: var(--misty-rose);
  --color-text-muted: #f9d8d8b3;

  /* Typography — aliased to the Webflow brand fonts */
  --font-heading: miller-headline, sans-serif;
  --font-body: aktiv-grotesk, sans-serif;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* Layout */
  --max-width: 1200px;
  --section-padding: var(--space-lg) var(--space-md);
}

/* ============================================
   GLOBAL
   ============================================ */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* ============================================
   NAVIGATION
   ============================================ */

/* ============================================
   HERO
   ============================================ */

/* ============================================
   SECTIONS
   ============================================ */

/* ============================================
   BUTTONS
   ============================================ */

/* ============================================
   FOOTER
   ============================================ */

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  :root {
    --space-lg: 3rem;
    --space-xl: 5rem;
  }
}

/* ============================================
   BOOKING MODAL LIGHTBOX
   ============================================ */

@keyframes bm-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bm-backdrop-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes bm-card-in {
  from { opacity: 0; transform: scale(0.93) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
@keyframes bm-card-out {
  from { opacity: 1; transform: scale(1)    translateY(0);   }
  to   { opacity: 0; transform: scale(0.96) translateY(8px); }
}

.bm-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(24, 25, 24, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  padding: 1.5rem 1.25rem;
  overflow-y: auto;
  animation: bm-backdrop-in 0.25s ease forwards;
}
.bm-overlay.bm-hidden  { display: none; }
.bm-overlay.bm-closing { animation: bm-backdrop-out 0.22s ease forwards; }

.bm-card {
  background: var(--misty-rose, #faebeb);
  border-radius: 2rem;
  width: 100%;
  max-width: 1100px;
  display: flex;
  align-items: stretch;
  position: relative;
  animation: bm-card-in 0.38s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
  margin: auto;
  overflow: hidden;
}
.bm-overlay.bm-closing .bm-card { animation: bm-card-out 0.2s ease forwards; }

/* Left visual column */
.bm-visual {
  flex: 0 0 40%;
  min-height: 100%;
}
.bm-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 30rem;
  object-fit: cover;
}

/* Right content column */
.bm-content {
  flex: 1;
  min-width: 0;
  padding: 2.25rem 2.5rem 1.75rem;
}

@media (max-width: 900px) {
  .bm-card {
    flex-direction: column;
    max-width: 640px;
  }
  .bm-visual { flex: none; }
  .bm-visual img { min-height: 0; height: 13rem; }
}

@media (max-width: 600px) {
  .bm-overlay {
    padding: 1rem 0.5rem;
  }
  .bm-card {
    border-radius: 1.5rem;
    max-width: 100%;
  }
  .bm-visual { display: none; }
  .bm-content {
    padding: 2rem 1.5rem 1.75rem;
  }
}

/* Close button */
.bm-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  background: rgba(24, 25, 24, 0.1);
  border: none;
  color: var(--nuptial-noir, #181918);
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.bm-close:hover { background: rgba(24, 25, 24, 0.18); }

/* Header */
.bm-header { margin-bottom: 1.25rem; padding-right: 2.5rem; }

.bm-heading {
  font-family: aktiv-grotesk-extended, sans-serif;
  color: var(--nuptial-noir, #181918);
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  font-weight: 700;
  margin: 0 0 0.4rem;
  line-height: 1.2;
}

.bm-subtitle {
  color: var(--nuptial-noir, #181918);
  opacity: 0.6;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}

/* Quick-contact buttons */
.bm-contacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 380px) { .bm-contacts { grid-template-columns: 1fr; } }

.bm-contact {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.85rem 0.5rem;
  border-radius: 1.5rem;
  text-decoration: none;
  font-family: aktiv-grotesk-extended, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  box-shadow: 0 4px 14px rgba(24, 25, 24, 0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bm-contact:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(24, 25, 24, 0.22);
  color: #fff;
}
.bm-contact svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

.bm-contact--whatsapp { background: #1a7a44; }
.bm-contact--email    { background: var(--nuptial-noir, #181918); }
.bm-contact--call     { background: #b04a41; }

/* Divider */
.bm-divider {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
  color: var(--nuptial-noir, #181918);
  font-family: aktiv-grotesk-extended, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.4;
}
.bm-divider::before,
.bm-divider::after { content: ''; flex: 1; height: 1px; background: currentColor; }

/* Form */
.bm-form { display: flex; flex-direction: column; gap: 0.8rem; }
.bm-form.bm-hidden { display: none; }

.bm-field { display: flex; flex-direction: column; gap: 0.35rem; }

.bm-field--2col { flex-direction: row; gap: 0.75rem; }
.bm-field--2col > div { flex: 1; display: flex; flex-direction: column; gap: 0.35rem; }
@media (max-width: 480px) { .bm-field--2col { flex-direction: column; } }

/* Always-row 2-column field (e.g. Wedding Date / Venue) — stays side by side
   even on mobile, where .bm-visual is hidden and width is at a premium. */
.bm-field--2col-tight { flex-direction: row; gap: 0.6rem; }
.bm-field--2col-tight > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }

.bm-label {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--nuptial-noir, #181918);
}

.bm-input {
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px solid rgba(24, 25, 24, 0.18);
  border-radius: 0.55rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  color: var(--nuptial-noir, #181918);
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}
.bm-input:focus {
  outline: none;
  border-color: var(--nuptial-noir, #181918);
  background: rgba(255, 255, 255, 0.82);
}
.bm-input::placeholder { opacity: 0.35; }

/* Checkboxes — on-brand toggle chips */
.bm-checks { display: flex; flex-wrap: wrap; gap: 0.6rem; padding-top: 0.25rem; }

.bm-check {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.2rem;
  border: 1.5px solid rgba(24, 25, 24, 0.18);
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.4);
  font-family: aktiv-grotesk-extended, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nuptial-noir, #181918);
  cursor: pointer;
  user-select: none;
  transition: background 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.bm-check:hover {
  border-color: var(--nuptial-noir, #181918);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(24, 25, 24, 0.12);
}
.bm-check:has(input:checked) {
  background: var(--nuptial-noir, #181918);
  border-color: var(--nuptial-noir, #181918);
  color: var(--misty-rose, #faebeb);
  box-shadow: 0 6px 16px rgba(24, 25, 24, 0.18);
}
.bm-check:focus-within {
  outline: 2px solid var(--nuptial-noir, #181918);
  outline-offset: 2px;
}
/* Native checkbox stays in the DOM for accessibility, visually hidden */
.bm-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Submit button */
.bm-submit {
  background: var(--nuptial-noir, #181918);
  color: var(--misty-rose, #faebeb);
  border: none;
  border-radius: 0.55rem;
  padding: 0.85rem 2rem;
  font-family: aktiv-grotesk-extended, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 0.3rem;
  width: 100%;
}
.bm-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(24, 25, 24, 0.25);
}
.bm-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Status message */
.bm-status { font-size: 0.8rem; text-align: center; min-height: 1.2em; margin-top: 0.25rem; }
.bm-status--error { color: #c0534a; }

/* Success panel */
.bm-success { text-align: center; padding: 0.75rem 0; }
.bm-success.bm-hidden { display: none; }

.bm-success-icon { margin-bottom: 1rem; }
.bm-success-icon svg { width: 3rem; height: 3rem; color: var(--nuptial-noir, #181918); opacity: 0.75; }

.bm-success-heading {
  font-family: aktiv-grotesk-extended, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nuptial-noir, #181918);
  margin: 0 0 0.6rem;
}
.bm-success-body {
  color: var(--nuptial-noir, #181918);
  opacity: 0.68;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.bm-close-success {
  background: var(--nuptial-noir, #181918);
  color: var(--misty-rose, #faebeb);
  border: none;
  border-radius: 0.55rem;
  padding: 0.75rem 2rem;
  font-family: aktiv-grotesk-extended, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bm-overlay,
  .bm-card,
  .bm-overlay.bm-closing,
  .bm-overlay.bm-closing .bm-card { animation: none; }
}


/* === Homepage Mobile Fixes === */

/* 1. Hero: centre H1 and subtitle text on mobile */
@media screen and (max-width: 767px) {
  .home_hero-heading {
    text-align: center;
  }
  .hero-mini-text-block {
    text-align: center;
    width: 100%;
  }
}

/* 2. Hero: reduce paragraph size + row-gap on small mobile so CTA stays above fold */
@media screen and (max-width: 479px) {
  .hero-paragraph-frame .paragraph_medium {
    font-size: 0.8em;
    line-height: 1.5;
  }
  .hero-bottom-frame {
    grid-row-gap: 0.75em;
  }
}

/* 3. Services: ensure "EXPLORE ALL SERVICES" button wraps instead of truncating */
@media screen and (max-width: 767px) {
  .div-block-68 .btn {
    white-space: normal;
    text-align: center;
  }
}

/* 4. Service Areas: standalone section styles. Built with its own class names
   (not the shared Webflow .principles-trait-* / .northstar-* components) so the
   layout is plain flexbox/grid with no #w-node ID or nth-child coupling. */
.service-areas {
  flex-direction: column;
  align-items: center;
  gap: 5em;
  width: 100%;
  display: flex;
}

/* .section-header-block is normally a named-grid-area layout that needs a
   matching #w-node ID on its child; this instance has none, so its single
   .h2-wrap child collapsed to ~1/12 width and clipped the heading text
   (h2-wrap uses overflow: hidden for an unrelated scroll-reveal effect). */
.service-areas .section-header-block {
  display: block;
  width: 100%;
}

.service-areas .h2-wrap {
  width: 100%;
  overflow: visible;
}

.service-areas-intro {
  flex-direction: column;
  align-items: flex-start;
  gap: 1em;
  max-width: 40em;
  display: flex;
}

.service-areas-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 3em 2em;
  width: 100%;
  display: grid;
}

.service-areas-card {
  flex-direction: column;
  gap: 1em;
  display: flex;
}

.service-areas-card-heading {
  margin: 0;
}

.service-areas-card-text {
  color: #181918cc;
  font-size: 1em;
  margin: 0;
}

.service-areas-card-line {
  background-color: var(--nuptial-noir);
  width: 100%;
  height: 1px;
}

@media screen and (max-width: 767px) {
  .service-areas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 479px) {
  .service-areas {
    gap: 3em;
  }
  .service-areas-grid {
    grid-template-columns: 1fr;
  }
}

/* 5. About Ken: two-column layout (image left, text right) */
.about-ken-block {
  grid-column-gap: 3em;
  grid-row-gap: 2em;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 100%;
  display: grid;
}

.about-ken-image {
  display: flex;
  justify-content: center;
}

.about-ken-image .team-member-image-frame {
  width: 100%;
  max-width: 27em;
  height: 35em;
}

.about-ken-text {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

@media screen and (max-width: 767px) {
  .about-ken-block {
    grid-template-columns: 1fr;
  }
  .about-ken-image .team-member-image-frame {
    max-width: 18em;
    height: 26em;
    margin: 0 auto;
  }
}


/* === Booking Modal Fixes === */

/* Stack Date + Venue fields vertically on mobile */
@media (max-width: 480px) {
  .bm-field--2col-tight {
    flex-direction: column;
  }
}

/* Redesign quick-contact buttons:
   WhatsApp = full-width primary row, Email + Call share second row */
.bm-contacts {
  grid-template-columns: 1fr 1fr;
}

.bm-contact--whatsapp {
  grid-column: 1 / -1;
  background: var(--nuptial-noir, #181918);
  color: #fff;
  padding: 1rem 0.5rem;
  font-size: 0.82rem;
}
.bm-contact--whatsapp:hover {
  color: #fff;
  background: rgba(24, 25, 24, 0.88);
}

.bm-contact--email {
  background: var(--misty-rose, #faebeb);
  color: var(--nuptial-noir, #181918);
  border: 1.5px solid rgba(24, 25, 24, 0.14);
}
.bm-contact--email:hover { color: var(--nuptial-noir, #181918); }

.bm-contact--call {
  background: var(--pretty-in-pink, #f9d8d8);
  color: var(--nuptial-noir, #181918);
  border: 1.5px solid rgba(24, 25, 24, 0.14);
}
.bm-contact--call:hover { color: var(--nuptial-noir, #181918); }

/* === Nav Scroll Background === */

/* Nav is fixed + transparent by default (chic-weddings-events.css); JS in
   js/main.js adds .active past NAV_SCROLL_THRESHOLD so it reads solid over
   any content — same on every page since both files load site-wide. */
.nav {
  transition: background-color 0.3s ease;
}

.nav.active {
  background-color: var(--nuptial-noir, #181918);
}

/* === Mobile Nav Fixes === */

/* Hide new mobile-only action buttons on desktop */
.btn-nav_mobile-action {
  display: none;
}

@media screen and (max-width: 767px) {
  /* Reduce hamburger from 4em to 3em */
  .nav-menu-open {
    width: 3em;
    height: 3em;
  }

  /* Reduce phone button from 4rem to 2rem (roughly half) */
  .btn-nav_phone.mobile {
    width: 2rem !important;
    height: 2rem !important;
    padding: 0.2rem;
    min-width: 2rem;
    max-width: 2rem;
  }

  /* Tighten gap now there are 4 items */
  .div-block-32 {
    gap: 0.5rem;
  }

  /* New WhatsApp + Book buttons — same filled-circle treatment as the
     phone button (.btn-nav_phone.mobile) so they're visible against the
     dark hero image instead of a transparent, near-invisible glyph. */
  .btn-nav_mobile-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    border-radius: 100%;
    border: none;
    background: var(--misty-rose, #faebeb);
    padding: 0.2rem;
    color: var(--nuptial-noir, #181918);
  }
}

/* === Desktop Nav Restructure ===
   Nav links used to live only inside the fullscreen hamburger overlay
   (.nav-menu) on every breakpoint, including desktop. This pulls them out
   into an always-visible row on desktop while leaving the hamburger/overlay
   untouched below 992px so mobile keeps its existing open/close menu. */
.nav-links-desktop {
  display: none;
}

@media screen and (min-width: 992px) {
  /* Middle column sizes to its content (nav links); outer columns take
     whatever they need for the logo / CTA cluster and absorb the rest.
     Self-adjusting fallback for 992-1499px, where a forced true-center
     split would make the links overlap the CTA cluster (see the 1500px
     override below for the exact center-line). */
  .nav-wrapper {
    grid-template-columns: auto 1fr auto;
  }

  /* Hide the mobile action cluster (phone/WhatsApp/book/hamburger) — its
     contents are already desktop-hidden individually except the hamburger,
     which is no longer needed once nav links are always visible. */
  #w-node-b017ae0e-d04e-819c-ba35-c32431d67f24-31d67f22 {
    display: none;
  }

  /* Logo moves from dead-center to the left edge of the nav. */
  #w-node-b017ae0e-d04e-819c-ba35-c32431d67f29-31d67f22 {
    grid-area: Area-3;
    justify-self: start;
  }

  .nav-links-desktop {
    grid-area: Area;
    justify-self: center;
    align-items: center;
    gap: 1.25em;
    display: flex;
  }

  .nav-links-desktop-link {
    color: var(--misty-rose);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: aktiv-grotesk-extended, sans-serif;
    font-size: 0.75em;
    font-weight: 300;
    text-decoration: none;
  }

  .nav-links-desktop-link:hover {
    opacity: 0.7;
  }

  /* Fullscreen overlay is now mobile/tablet-only. */
  .nav-menu {
    display: none !important;
  }
}

@media screen and (min-width: 1500px) {
  /* True center: the two outer columns are forced to equal width, so the
     nav links sit exactly on the page's centerline regardless of the
     logo/CTA cluster being different widths. */
  .nav-wrapper {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
}

/* === Footer Social Links ===
   Icon row reusing the nav's social-link component, added to the footer's
   Contact column now that the desktop nav no longer surfaces it. */
.footer-social-links {
  justify-content: flex-start;
  gap: 1em;
  margin-bottom: 0.5em;
}

.footer-social-links .nav-social-link {
  width: 2em;
  height: 2em;
}

/* === Home Hero Buttons: fix hover/click leaving text invisible ===
   Both hero buttons share a Webflow IX2 hover interaction (button-hover-in/out)
   that was authored for a different button style and hardcodes its own
   colours. On mouse-out it resets the "Book Now" button's background to fully
   transparent (instead of its pink rest colour) and resets the "Call" button's
   text to black (instead of its pink rest colour) — both via inline styles, so
   the buttons can end up with black text over the dark hero photo, invisible.
   On touch devices, a tap can also get "stuck" in the hover state since no
   mouseout ever fires. !important pins both the rest and hover colour pairs
   so every state stays legible, regardless of what the interaction leaves. */
.hero-bottom-frame .btn:where(.w-variant-6e1d285d-2c98-f236-044b-0d9e878881fb) {
  background-color: var(--misty-rose, #faebeb) !important;
}
.hero-bottom-frame .btn:where(.w-variant-6e1d285d-2c98-f236-044b-0d9e878881fb) .btn-text {
  color: var(--nuptial-noir, #181918) !important;
}
.hero-bottom-frame .btn:where(.w-variant-6e1d285d-2c98-f236-044b-0d9e878881fb):hover {
  background-color: var(--nuptial-noir, #181918) !important;
}
.hero-bottom-frame .btn:where(.w-variant-6e1d285d-2c98-f236-044b-0d9e878881fb):hover .btn-text {
  color: var(--misty-rose, #faebeb) !important;
}

.hero-bottom-frame .btn:where(.w-variant-3134ee12-7f93-8f75-a6fc-f581b834eab7) {
  background-color: transparent !important;
}
.hero-bottom-frame .btn:where(.w-variant-3134ee12-7f93-8f75-a6fc-f581b834eab7) .btn-text {
  color: var(--misty-rose, #faebeb) !important;
}
.hero-bottom-frame .btn:where(.w-variant-3134ee12-7f93-8f75-a6fc-f581b834eab7):hover {
  background-color: var(--misty-rose, #faebeb) !important;
}
.hero-bottom-frame .btn:where(.w-variant-3134ee12-7f93-8f75-a6fc-f581b834eab7):hover .btn-text {
  color: var(--nuptial-noir, #181918) !important;
}