/*To do 1. tidy nav button styles 2  Padding between images and text in testimonials

find any block by section in VS regex \.sectionname\d+[^}]*\}

/* FORENSIC OUTLINES 
.section { outline: 3px solid red !important; }           /* THE ROOM 
.is-row { outline: 3px solid orange !important; }         /* THE ROW 
.mobile-slider-track { outline: 3px solid yellow !important; } /* THE SLIDER 
.photo-frame { outline: 3px solid lime !important; }   /* THE PHOTOS */

/* ============================================================
   REMOVE SCROLL BAR
   ============================================================ */

/* 1. For Chrome, Safari, and newer versions of Edge */
body::-webkit-scrollbar {
  display: none;
}

/* 2. For Firefox and IE/Legacy Edge */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

/* UPDATE: Remove the 60px padding for specific hero-focused pages */
body.no-top-padding {
  padding-top: 0 !important;
}

* {
  box-sizing: border-box;
}


/* ============================================================
   TYPEFACES - DEFINED ONCE AT THE TOP
   ============================================================ */
@font-face {
  font-family: Kunstler;
  src: url('../fonts/KUNSTLER.woff2') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: ABCNormal-Medium;
  src: url('../fonts/ABCNormal-Medium.woff2') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: ABCNormal-Normal;
  src: url('../fonts/ABCNormal-Normal.woff2') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: ABCNormal-Neutral;
  src: url('../fonts/ABCNormal-Neutral.woff2') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: ABCNormal-Bold;
  src: url('../fonts/ABCNormal-Bold.woff2') format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: ABCNormal-Light;
  src: url('../fonts/ABCNormal-Light.woff2') format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: LemonTuesday;
  src: url('../fonts/Lemon_Tuesday.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   BASE STYLES & LAYOUT
   ============================================================ */
.body {
  background-color: #e4dcc7;
  padding-top: 60px;
}

.button {
  color: #e4dcc7;
  background-color: #6f7e55;
  border-radius: 20px;
  padding: 10px 20px;
  font-family: ABCNormal-Neutral, Arial, sans-serif;
  font-weight: 400;
}

.button.inverted {
  color: #6f7e55;
  background-color: #e4dcc7;
}

.button.inverted:hover {
  color: #e4dcc7;
  background-color: #6f7e55;
}

.button.inverted.mobile {
  padding-bottom: 12px;
}


.link {
  color: #e4dcc7;
  font-family: ABCNormal-Bold, Arial, sans-serif;
  font-weight: 400;
  text-decoration: none;
}

.link.medium {
  font-family: ABCNormal-Normal, Arial, sans-serif;
}

.menu {
  z-index: 2;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: #6f7e55;
  flex-flow: column;
  align-items: flex-start;
  width: 50vw;
  min-height: 100vh;
  padding: 40px;
  display: none;
  position: fixed;
  inset: 0% auto 0% 0%;
}

.link-2 {
  color: #e4dcc7;
  font-family: ABCNormal-Bold, Arial, sans-serif;
  text-decoration: none;
}

.Insta-widget {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  padding: 0px;
  display: grid;
}

.Insta-widget.api {
  flex-flow: column;
  display: flex;
}

._2 {
  border: 2px solid #6f7e55;
  max-width: none;
}

.soundcloud-container {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  mix-blend-mode: darken;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  padding: 40px;
  display: grid;
}

/* CONTACT FORM */



.form-2 {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  display: flex;
}

.hide {
  display: none;
}

.hide.w--current {
  display: block;
}

.form-block {
    display: block;      /* Change from flex to block */
    width: 100%; 
    max-width: 800px;    /* Bump this up from 500px so it has room to grow */
    margin: 0 auto;      /* This keeps the whole form centered on the page */
}

.text-field {
  width: 100%;           /* This forces it to fill the stretch */
  box-sizing: border-box; /* Prevents padding from pushing it out of the box */
  max-width: none;       /* Removes any accidental ceilings */
  
  /* Your existing styling */
  background-color: #e5dcc7;
  border: 2px solid #6f7e55;
  border-radius: 20px;
  padding: 10px 20px;
}

.code-embed {
  mix-blend-mode: darken;
}

.nav-wrapper {
  z-index: 2;
  justify-content: space-between;
  padding: 28px;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
}

.nav-btn {
  color: #e4dcc7;
  letter-spacing: -.2px;
  background-color: #6f7e55;
  border-radius: 20px;
  padding: 10px 20px;
  font-family: ABCNormal-Neutral, Arial, sans-serif;
}

.nav-btn.inverted {
  color: #6f7e55;
  background-color: #e4dcc7;
}

.nav-btn.inverted:hover {
  color: #e4dcc7;
  background-color: #6f7e55;
}

.nav-btn.inverted.no-hover:hover {
  color: #6f7e55;
  background-color: #e4dcc7;
}

.nav-btn.inverted.form {
  text-align: center;
  border: 2px solid #6f7e55;
  max-width: 200px;
  margin-bottom: 0;
}

.nav-btn.inverted.form:hover {
  color: #6f7e55;
  background-color: #0000;
}

.nav-btn.inverted.form::placeholder {
  color: #6f7e55;
}

.nav-btn.inverted.form.short {
  max-width: 150px;
  margin-bottom: 10px;
}

.nav-group-right {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  display: flex;
}

/* THE NEW GLOBAL CONTAINER (was .text-wrapper) */
.content-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* This is the "Left-Align" command */
  text-align: left;        /* Ensures text wraps to the left */
  
  max-width: 1500px;
  margin: 0 auto;      /* These two keep the WHOLE container centered */

  
  padding-left: 5%;       /* This prevents it from being 'hard' against the edge */
  padding-right: 5%;
}

.content-container.is-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    max-width: 1500px;
    margin: 0 auto;
    padding-left: 5%;
    padding-right: 5%;
}

/* ============================================================
   LOGO WRAPPER: EXACT FOOTER (footer-wrapper) SYNC
   ============================================================ */

.logo-wrapper {
  /* Copying Footer Layout */
  display: flex;
  flex-flow: column;
  padding: 28px;
  
  /* Ensuring it spans the width like the footer bar */
  width: 100%;
  box-sizing: border-box;
  
  /* Alignment matches the footer's centered column logic */
  justify-content: center;
  align-items: center;
}

.logo-wrapper img {
  /* Copying Footer Image Behavior */
  /* This is the key: Removing the 50px max-height limit 
     allows the SVG to scale horizontally with the screen width. */
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
}

.section.bands {
  gap: 28px;
  grid-template-columns: 1fr 1fr 1fr;
  padding-bottom: 112px;
}

.text-wrapper {
  gap: 28px;
  flex-flow: column;
  padding-right: 0px;
  display: flex;
}

.text-wrapper.bands {
  justify-content: center;
  align-items: center;
  padding-right: 0;
}

/* THE UNIVERSAL CENTERING UTILITY */
.text-wrapper.centre {
  display: flex;
  flex-direction: column;
  align-items: center;      /* Centers the "boxes" (H3, P) horizontally */
  text-align: center;       /* Centers the "text lines" inside the boxes */
  
  margin-left: auto;        /* The "Auto-Margin" trick to center the wrapper */
  margin-right: auto;       /* within the Parent Section */
  
  width: 100%;
  max-width: 850px;         /* Prevents text from stretching too wide on Desktop */
  
  /* Resetting inherited properties */
  padding-right: 0;
  padding-left: 0;
}

/* Ensure children inside a centred wrapper don't lean left */
.text-wrapper.centre .wedding-title,
.text-wrapper.centre .body-text {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}


.text-wrapper.l {
  justify-content: flex-start;
  align-items: flex-start;
}


.text-wrapper.l.half.contacttext {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
}

.text-wrapper._500px.c {
  justify-content: center;
  align-items: center;
  padding-right: 0;
}

.text-wrapper.qa {
  padding-right: 0;
}

.text-block-4 {
  color: #e4dcc7;
  font-family: ABCNormal-Light, Arial, sans-serif;
}

.wedding-subheader {
  color: #6f7e55;
}


.extras-text.inverted {
  color: #6f7e55;
}

.extras-text.inverted.normal {
  margin-bottom: 0;
  font-family: ABCNormal-Normal, Arial, sans-serif;
}

.extras-text.inverted.centred {
  text-align: center;
}

.image-group.bands {
  grid-column-gap: 56px;
  grid-row-gap: 56px;
}

.image-group.bands.v {
  flex-flow: column;
}

.contact-form-montage {
  mix-blend-mode: multiply;
  background-image: url('../images/Group-4.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-width: 0;
  border-color: #6f7e55;
  width: 100%;
  max-width: 650px; /* Prevents it from getting too giant on 4K screens */
  height: auto;
  aspect-ratio: 1.21 / 1; /* Matches your 480x580 proportion */
  border: none;
}

.contact-montage {
  mix-blend-mode: multiply;
  background-image: url('../images/Group_1_v2.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-width: 0;
  border-color: #6f7e55;
  width: 100%;
  max-width: 325px; /* Prevents it from getting too giant on 4K screens */
  height: auto;
  aspect-ratio: 4 / 5; /* Matches your 480x580 proportion */
  border: none;
}

.extras-accordion {
  gap: 28px;
  display: flex;
}

.extras-accordion.vertical {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  flex-flow: column;
}

.text-block-5 {
  color: #6f7e55;
  border: 3px solid #6f7e55;
  border-radius: 100px;
  padding: 8px 16px;
  font-family: ABCNormal-Bold, Arial, sans-serif;
  line-height: 40px;
}

.text-block-5.one {
  padding-left: 19px;
  padding-right: 20px;
}

.section-heading {
  letter-spacing: -.2px;
  margin-top: 0;
  margin-bottom: 20px;
  font-family: ABCNormal-Medium, Arial, sans-serif;
}

.lineup-no {
  letter-spacing: -.2px;
  margin-top: 0;
  margin-bottom: 5px;
  font-family: ABCNormal-Medium, Arial, sans-serif;
  font-weight: bold;
  font-size: 60px;
  }

.section-heading.centred {
  text-align: center;
}

.section-heading.centred.highlighted {
  z-index: 0;
  background-color: #0000;
  width: 606px;
  position: relative;
}

.section-heading.centred.highlighted.x2 {
  background-color: #0000;
  color:#6f7e55;
}

.section-heading.x2 {
  line-height: 76px;
}

.section-heading.x2._42 {
  text-align: center;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 0;
}

.footer-line {
  width: 100%;
  height: 1px;
  margin: 0
}

.header-line {
  width: 100%;
  height: 1px;
  margin-top: 28px;
  margin-bottom: 0px;
}

.footer-logo-wrapper {
  margin-top: 28px;
  margin-bottom: 28px;
}

.footer-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center; /* Keeps the Instagram icon centered */
  background-color: #6f7e55;
  padding: 28px 28px 60px;
  width: 100%;
  box-sizing: border-box;
}

/* FOOTER LOGO --- */
/* Target the logo image inside the footer specifically */
.footer-wrapper img {
  width: 100%;             /* Forces it to span the full 100% of the wrapper */
  height: auto;            /* Keeps the logo from distorting */
  display: block;
  margin-bottom: 30px;     /* Space between logo and Instagram icon */
}

.instagram-wrapper {
  /* No margin-top needed if we use margin-bottom on the logo above */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.instagram-wrapper a {
  display: inline-block;
  transition: transform 0.3s ease, opacity 0.3s ease;
  line-height: 0;
}

.instagram-wrapper a:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

/* Keep the SVG at a fixed, readable size so it doesn't stretch like the logo */
.instagram-wrapper svg {
  width: 50px;
  height: 50px;
}

.copyright-text {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  text-align: center;
  color: #e4dcc7;
  font-size: 11px;
  opacity: 0.6;
}

/* THE UNIFIED MENU DRAWER */
.menu-overlay {
  display: none; /* Controlled by your JS */
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 10000 !important;

  /* 1. THE HEIGHT FIX (Surgical) */
  height: auto;               /* Takes the height of the links */
  max-height: 100vh;          /* But NEVER taller than the screen */
  overflow-y: auto;           /* Adds a scrollbar IF the links overflow */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling for mobile */

  /* 2. THE WIDTH & LOOK */
  width: max-content;         /* Shrink-wraps to the widest link */
  min-width: 280px;           /* Prevents it from being too skinny */
  max-width: 100vw;           /* Safety for small screens */
  
  background-color: #6f7e55;  /* Olive */
  padding: 85px 40px 40px 28px; 
  box-shadow: 10px 10px 30px rgba(0,0,0,0.1);
  
  /* 3. THE LAYOUT */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: none;
  outline: none;
}

/* 4. OPTIONAL: Hide the scrollbar inside the menu for a cleaner look */
.menu-overlay::-webkit-scrollbar {
  display: none;
}
.menu-overlay {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.menu-links {
  grid-column-gap: 56px;
  grid-row-gap: 56px;
  flex-flow: column;
  display: flex;
}


.code-embed-3 {
  z-index: 0;
  position: relative;
}

.image-42 {
  mix-blend-mode: multiply;
}

.image-43 {
  mix-blend-mode: multiply;
  max-width: 60%;
}

.image-44 {
  mix-blend-mode: multiply;
  max-width: 50%;
}




.text-span {
  vertical-align: baseline;
  background-color: #e4dcc7;
  display: inline;
 }

.text-span-2 {
  background-color: #e4dcc7;
}

.text-span-2.wedtitle {
  background-color: #e4dcc7;
  width: 40%;
  font-size: 44px;
  font-weight: 500;
  display: inline;
}

.contact {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 88vh;
  padding: 28px;
  display: flex;
}

/* UPDATE: The wrapper for the images */

.contact-images-wrapper {
  display: flex;
  flex-direction: column; /* Stacks the two image groups vertically */
  gap: 20px;
  flex: 1; /* Takes up the remaining 50% of the row */
  align-items: center;
}

.cms-tracks-data {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  width: 100%;
  display: block;
}

.tracklist, .collection-list-wrapper {
  width: 100%;
}

.video-home {
  height: 50%;
}

.collection-item-2 {
  border-bottom: 1px solid #6f7e55;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  display: block;
}

/* --- THE ACCORDION MASTER (Corrected) --- */

/* 1. The Container */
.collection-item-2 {
  border-bottom: 1px solid #6f7e55;
  width: 100%;
  display: block;
  position: relative;
  /* Remove any global padding here so the line stays tight to the text */
  padding: 0; 
}

/* 2. The Header (The clickable part) */
.extras-row.downarrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0; /* Tightened from 20px to bring the line up */
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease;
}

/* 3. The Number and Title spacing */
.extras-heading {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 4. The Description (The Hidden Text) */
.description {
  display: block !important; 
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  
  /* CRITICAL: Remove top/bottom margins to prevent "jumping" */
  margin: 0 !important; 
  padding: 0; 
  
  /* The "Silky" Transition */
  transition: 
    max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
    opacity 0.4s ease,
    padding 0.4s ease;
}

/* 5. The "Open" State */
.collection-item-2.is-open .description {
  max-height: 300px; /* Adjust if content is longer */
  opacity: 1;
  padding-bottom: 25px; /* Adds space above the line ONLY when open */
}

/* 6. Rotating the Plus (+) */
.collection-item-2.is-open .downarrow .downarrow { 
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  display: inline-block;
}

.number {
  color: #6f7e55;
  font-family: ABCNormal-Normal, Arial, sans-serif;
  font-size: 16px;
  line-height: 16px;
}

.extras-heading {
  gap: 28px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.extras-row {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.downarrow {
  color: #6f7e55;
  font-family: ABCNormal-Normal, Arial, sans-serif;
  font-size: 16px;
  line-height: 16px;
}

/* CONTACT FORM STYLE */

.text-field.left {
    background-color: #e5dcc7;
    border: 2px solid #6f7e55;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    text-align: left;
    /* DELETE width/max-width from here */
}

/* KEEP THIS: This handles the taller message box */
.text-field.big {
    background-color: #e5dcc7;
    border: 2px solid #6f7e55;
    border-radius: 20px;
    padding-top: 20px;
    padding-bottom: 70px;
    font-size: 16px;
    /* DELETE width/max-width from here */
}
.text-field.left::placeholder {
  color: #6f7e55;
  font-family: ABCNormal-Neutral, Arial, sans-serif;
}

.text-field.big::placeholder {
  color: #6f7e55;
  font-family: ABCNormal-Neutral, Arial, sans-serif;
}

/* THE BOSS: Handles the "Math" for all fields */
.form-2 .text-field, 
.form-2 .w-input {
    width: 100% !important; 
    max-width: none !important;
    box-sizing: border-box !important; 
    display: block !important;
}

.bold-text {
  font-family: Kunstler, Arial, sans-serif;
  font-size: 60px;
}

/* ============================================================
   MASTER FLUID TYPOGRAPHY - HIERARCHY RESTORED
   ============================================================ */

/* 1. HERO & MASSIVE TITLES */
  .link-4, .menu-link, .link-2, .w--current {
  font-size: clamp(38px, 6vw, 50px) !important;
  line-height: 1.1 !important;
}

/* ============================================================
   Wedding-title management
   ============================================================ */

/* THE WEDDING TITLE: Base Styles Only */
h3.wedding-title {
  display: block;
  width: 100%;
  
  /* THE TYPOGRAPHY */
  font-family: Kunstler, Arial, sans-serif !important;
  font-weight: 400;
  line-height: 1.1 !important;
  color: #6f7e55; 
  
  /* THE RESPONSIVE SIZE */
  font-size: clamp(50px, 6vw, 65px) !important;
  
  /* SPACING - Neutralize margins so the container can decide */
  margin-top: 0;
  margin-bottom: 20px;
  margin-left: -20px;
  padding: 0;
}

/* OVERRIDE: For Olive Backgrounds */
.is-olive .wedding-title {
  color: #e4dcc7 !important; /* Cream */
}

/* THE WEDDING SUBHEADER: Exact Extraction from Line 489 */
.wedding-subheader {
  /* THE SPECIFIC FONT (Line 489) */
  font-family: ABCNormal-Light, sans-serif !important;
  font-weight: 300 !important; /* "Light" usually maps to 300 */
  line-height: 1.1 !important;
  
  /* THE FLUID SCALE (From your code) */
  font-size: clamp(16px, 3vw, 25px) !important;
  
  /* THE CHARACTER STYLE */
  text-transform: uppercase !important;
  letter-spacing: -0.4px !important;
  color: #6f7e55;            /* Olive */
  
  /* THE LAYOUT */
  text-align: left !important;
  display: block !important;
  margin-left: 0 !important; /* Visual alignment with script title */
  margin-top: 0px;
  margin-bottom: 20px;
}

/* OVERRIDE: For Olive Backgrounds */
.is-olive .wedding-subheader {
  color: #e4dcc7 !important; /* Cream */
}

/* Apply specific font to all body text on the Weddings page */
.page-weddings .body-text {
  font-family: 'ABCNormal-Normal', sans-serif !important;
  
  /* Optional: Standardize the weight and smoothing */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* THE SERVICES SUBHEADER: Exact Extraction from Line 489 */
.services-subheader {
  /* THE SPECIFIC FONT (Line 489) */
  font-family: ABCNormal-Light, sans-serif !important;
  font-weight: 300 !important; /* "Light" usually maps to 300 */
  line-height: 1.1 !important;
  
  /* THE FLUID SCALE (From your code) */
  font-size: clamp(16px, 3vw, 20px) !important;
  
  /* THE CHARACTER STYLE */
  text-transform: uppercase !important;
  letter-spacing: -0.4px !important;
  color: #6f7e55;            /* Olive */
  
  /* THE LAYOUT */
  text-align: left !important;
  display: block !important;
  margin-left: 0 !important; /* Visual alignment with script title */
  margin-top: 0px;
  margin-bottom: 20px;
}

/* OVERRIDE: For Olive Backgrounds */
.is-olive .services-subheader {
  color: #e4dcc7 !important; /* Cream */
}

/* Apply specific font to all body text on the Weddings page */
.page-weddings .body-text {
  font-family: 'ABCNormal-Normal', sans-serif !important;
  
  /* Optional: Standardize the weight and smoothing */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* THE SUBSECTION CONTAINER: The 'Envelope' for each Step */
.howtobook-subsection-container {
  display: flex;
  display: flex;
  flex-direction: row; /* Side-by-side */
  align-items: flex-start; /* Keeps the number aligned with the top line of text */
  gap: 20px; /* Creates a clean space between the number and the text */
  
  /* THE WIDTH */
  width: 100%;
  max-width: 1200px;         /* Prevents the text from stretching too wide */
  
  /* SPACING */
  margin-bottom: 30px;      /* Gap between Step 1, Step 2, and Step 3 */
  padding: 0;
  
  /* CLEANUP: Ensure no old extras-accordion ghosts remain */
  position: relative;
}

/* Safety: Remove margin on the very last step in the list */
.howtobook-subsection-container:last-child {
  margin-bottom: 0;
}

/* THE STEP HEADING: For the "How To Book" process */
h4.step-heading {
  /* THE FONT: Using the bold/medium weight for impact */
  font-family: ABCNormal-Medium, Arial, sans-serif !important;
  font-weight: 600 !important;
  
  /* THE SIZE: Slightly smaller than the wedding subheader but larger than body text */
  font-size: clamp(20px, 2vw, 26px) !important;
  line-height: 1.2 !important;
  
  /* THE STYLE */
  color: #6f7e55;            /* Olive */
   letter-spacing: -0.2px;
  text-align: left;
  
  /* SPACING */
  margin-top:  8px;          /* Gap from the previous step */
  margin-bottom: 20px;        /* Tight gap to the description below it */
  display: block;
}

/* OVERRIDE: If the booking section has an Olive background */
.is-olive h4.step-heading {
  color: #e4dcc7 !important;
}

/* THE STEP TEXT BLOCK: The direct holder for Heading and Body */
.step-text-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  
  /* SPACING */
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  
  /* WIDTH CONTROL */
  width: 100%;
  max-width: 100%; /* Let the parent container handle the outer limits */
}

/* Ensure a tight gap between the title and the body inside this block */
.step-text-block h4.step-heading {
  margin-bottom: 10px;
}

/* THE GLOBAL BODY TEXT: The new source of truth for the whole site */
.body-text {
  /* THE FONT: From your code */
  font-family: ABCNormal-Normal !important;
  font-size: clamp(16px, 1.2vw, 20px) !important;
  line-height: 1.6 !important;
  font-weight: 500;
  
  /* THE ALIGNMENT: Standard left alignment */
  display: block;
  
  /* THE COLOR: Default Olive (change as needed per section) */
  color: #6f7e55; 
  
  /* SPACING */
  margin-bottom: 0px;
  margin-top: 0;
}

/* THE INVERSION: For any dark/olive sections site-wide */
.is-olive .body-text, 
.body-text.is-cream {
  color: #e4dcc7 !important;
}

/* cream colour for background and lines only */
.is-creambg {
  background: #e4dcc7;
}

/* olive colour for background and lines only */
.is-olivebg {
  background: #6f7e55;
}

/* --- THE TEXT SIZE UTILITY --- */

/* Restricts the width of a text block to 750px and keeps it centered */
.body-text.is-narrow {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 90%;
  text-align: left;
}

/* Optional: If you want a medium-width version later */
.body-text.is-medium {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3. SUB-HEADINGS & LABELS */
.text-block-5, 
.label-text {
  font-size: clamp(22px, 3vw, 32px) !important;
  line-height: 1.2 !important;
  display: block !important;
}

.text-center {
text-align: center;
}

/* 4. MAIN BODY TEXT & QUOTES */
.extras-text, 
.extras-text.inverted, 
.extras-text.inverted.normal, 
.body-text {
  font-size: clamp(16px, 1.2vw, 20px) !important;
  line-height: 1.6 !important;
  letter-spacing: -0.6px;
}
/* 5. BUTTONS */
.button, .btn-primary, .nav-btn {
  font-size: clamp(14px, 1.1vw, 18px) !important;
  padding: clamp(8px, 1vw, 12px) clamp(16px, 2vw, 24px) !important;
}
/* 6. SPECIAL HERO INTRO OVERRIDE */
.Mission-Statement {
  font-size: clamp(25px, 3vw, 37px) !important;
  line-height: 1.4 !important;
  width: 75% !important;
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  padding: 30px 0 !important;
    color: #6f7e55;
  text-align: center;
  /*text-transform: uppercase; */
  font-family: ABCNormal-Light, Arial, sans-serif;
  letter-spacing: -1.2px;
  font-weight: 400;
}
/* ============================================================
   MASTER SECTION REFACTOR (The "Source of Truth")
   ============================================================ */

/* THE GLOBAL SECTION: The primary layout block for the entire site */

.section {
  display: flex;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 60px 28px; /* Your standard site-wide padding */
}
/* 2. THE DIRECTION UTILITIES (The "Layout" bricks) */
.is-column {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.section-preCalendly {
  display: flex;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 60px; /* Your standard site-wide padding */
}
.section.is-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
}

/* 3. THE THEME UTILITIES (The "Paint" bricks) */
.section.is-cream {
  background-color: #e4dcc7;
  color: #6f7e55;
}

.section.is-olive {
  background-color: #6f7e55;
  color: #e4dcc7;
}
  
  /* Standardized Vertical Space (The Gap Killer) 
  padding-top: clamp(40px, 8vh, 100px) !important; 
  padding-bottom: clamp(40px, 8vh, 100px) !important;
  padding-left: clamp(30px, 10vw, 200px) !important;
  padding-right: clamp(30px, 10vw, 200px) !important;
}   DELETE IF NOT USED*/

.section.is-olive {
  background-color: #6f7e55 !important; /* Olive Green */
  color: #e4dcc7 !important; /* Force cream text */
}

/* 3. LAYOUT MODIFIER: HOW TO BOOK */
.section.booking {
  flex-direction: column !important;
  align-items: flex-start !important; 
  text-align: left !important;
  /* Shorter top gap for the booking section */
  padding-top: clamp(20px, 4vh, 40px) !important;
}

/* Ensure Titles inside Booking are Left-Aligned */
.section.booking .section-heading {
  margin-left: 0 !important;
  text-align: left !important;
  margin-bottom: 40px !important;
}

#extras-section {
  align-items: flex-start !important;
}

/* ============================================================
   WEDDING & BANDS: THE FINAL FULL-WIDTH POLAROID CLUSTER
   ============================================================ */

/* --- PHOTO LIBRARY: Content Only --- */
.photo-frame.photo-1 { background-image: url('../images/IMG_0119-1.jpg'); }
.photo-frame.photo-2 { background-image: url('../images/IMG_0120-2-1.jpg'); }
.photo-frame.photo-3 { background-image: url('../images/Copy-of-398.jpg'); }
.photo-frame.photo-4 { background-image: url('../images/Copy-of-390.jpg'); }


/* 3. THE TEXT WRAPPER */
.text-wrapper {
  flex: 0 0 0px;
  max-width: 1400px;
}

.margin-l {
margin-left: 80px;
}

.margin-r {
margin-right: 80px;
}

/* ============================================================
   COMPLETE NAVIGATION: SLEEK PILL STYLE & SPACING
   ============================================================ */

/* 1. THE MAIN BAR 
   Keeps Menu (left) and Group (right) in their original edge positions. */
.nav-wrapper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: fixed !important;
  top: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

/* 2. THE RIGHT-HAND GROUP
   Maintains the 45px gap between Music, Bands, and Contact. */
.nav-group-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 45px !important; 
  pointer-events: auto !important;
}

.nav-group-left {
  pointer-events: auto !important;
}

/* 3. THE BUTTONS (Sleek Pill Style) */
.nav-btn {
  text-decoration: none !important;
  display: inline-block !important;
  text-align: center !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  
  /* COLORS: Olive Green / Cream Text */
  background-color: #6F7E55;
  color: #E4DCC7;
  
  /* UPDATED PADDING: 7px top/bottom (shorter), 18px left/right */
  padding: 7px 18px !important; 
  border-radius: 100px !important; 
  
  font-weight: 500 !important;
  letter-spacing: -0.2px !important;
  border: 1px solid transparent !important;
  margin: 0;
  line-height: 1 !important; /* Ensures text is perfectly centered vertically */
}

/* 4. THE CHAMELEON STATE (Inverted) */
.nav-btn.is-on-dark {
  background-color: #E4DCC7 !important; 
  color: #6F7E55 !important;            
}

/* 5. HOVER EFFECT */
.nav-btn:hover {
  text-decoration: none !important;
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
/* THE DRILL-THROUGH FIX */
.nav-wrapper, 
.nav-wrapper > div {
  /* This makes the bar and the middle div 'invisible' to clicks */
  pointer-events: none !important;
}

.nav-btn {
  /* This 'turns on' the button so it can be clicked through the invisible bar */
  pointer-events: auto !important; 
  cursor: pointer !important;
  position: relative !important;
  z-index: 5 !important; /* Puts it on the very, very top layer */
}

/* When the menu is open, lower the z-index so the 'Close' button can be reached */
.nav-wrapper.w--open {
  z-index: 500 !important; 
}

/* Ensure the Close button (usually inside the menu overlay) is clickable */
.w-nav-overlay {
  pointer-events: auto !important;
  z-index: 9999 !important;
}

/* THE MANUAL MENU STATES */

/* Default State: Hidden off-screen ABOVE */
.w-nav-menu {
  /* Force vertical layout */
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  
  /* Initial Position: Tucked away at the top */
  transform: translateY(-100%) !important;
  
  /* This transition property is the "Handle" the JS will use */
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) !important;
  
  z-index: 25 !important;
  background-color: #453530 !important; /* Your brand brown/olive */
}

/* Open State: Slide DOWN into view */
/* Note: Since chameleon.js uses .style.transform, it will override this, 
   but it's good to have this class here for consistency. */
.w-nav-menu.is-active {
  transform: translateY(0%) !important;
}

/* The Button Logic */
.nav-btn.button-2 {
  position: relative !important;
  z-index: 100 !important; /* Higher than the menu's 25 */
  pointer-events: auto !important;
}

/* MENU BUTTON AND OVERLAY STYLES */

/* THE MENU DRAWER (Shrink-to-Fit) */


/* THE CLOSE BUTTON - CREAM BACKGROUND / OLIVE TEXT */
.menu-overlay .nav-btn.button-2.inverted {
  position: absolute !important;
  top: 25px;    
  left: 28px;                
  right: auto !important;
  
  /* THE COLOR SWAP */
  background-color: #e4dcc7 !important; /* Cream Background */
  color: #6f7e55 !important;            /* Olive Text */
  
  /* BOX STYLING */
  display: inline-block;
  padding: 8px 16px;          /* Adjust this to match the 'Menu' button's padding */
  border-radius: 0px;         /* Change to match your Menu button's corners */
  
  /* TYPOGRAPHY */
  font-size: 16px;
  font-family: ABCNormal-Medium, Arial, sans-serif;
  text-decoration: none;
  line-height: 1;
  
  /* RESET */
  margin: 0 !important;
  border: none;
  cursor: pointer;
}

/* THE LINK GROUP - CONTROL THE TOP GAP HERE */
.menu-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  gap: 40px;               /* This controls the space BETWEEN each link */
  width: 100%;
  margin-bottom: 30px;
  /* --- THE GAP CONTROL --- */
  margin-top: 30px;        /* Adjust this number to move the first link up or down */
  /* ----------------------- */
}

/* THE MENU LINKS */
.link-4 {
  white-space: nowrap;       /* Prevents long links from breaking into two lines */
  color: #e4dcc7 !important; 
  font-family: ABCNormal-Bold, Arial, sans-serif;
  font-size: 24px;
  text-decoration: none;
}
/* --- THE ALIGNMENT TOOLBOX --- */

/* Use this to center EVERYTHING inside a section (Heading, Paragraph, Buttons) */
.is-center {
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Use this to snap EVERYTHING to the left (Index/Booking style) */
.is-left {
  text-align: left;
  align-items: flex-start;
  justify-content: flex-start;
}

.is-right {
  text-align: right;
  align-items: flex-end;
  justify-content: flex-end;
}

/* --- THE TITLE ALIGNMENT (The Nudge Fix) --- */

/* If the section is centered, the title needs auto margins */
.is-center .wedding-title {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* If the section is left-aligned, the title needs your -15px optical nudge */
.is-left .wedding-title {
  margin-left: -20px !important;
  margin-right: 0 !important;
}

/* --- Soundcloud Player Styling --- */

/* 1. GENERAL & DESKTOP (The 'Base' Look) */
.sc-player-list {
  display: grid;
  /* FORCES 2 columns on desktop exactly like before */
  grid-template-columns: 1fr 1fr; 
  gap: 32px;
  padding: 40px 40px 60px;
  width: 100%;
  box-sizing: border-box; /* FIX: Prevents RHS bleed by keeping padding inside 100% */
}

.sc-track {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px); /* Fluid gap: shrinks on small screens */
  min-width: 0;
  overflow: hidden;
}

.sc-track-image, 
.sc-track-image-wrapper {
  width: clamp(100px, 18vw, 160px); /* Fluid image: shrinks on small screens */
  height: clamp(100px, 18vw, 160px);
  border-radius: 12px;
  flex-shrink: 0;
  background: #6F7E55;
  overflow: hidden;
}

.sc-track-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* 2. TABLET & MOBILE (The 'Switch') */
@media screen and (max-width: 991px) {
.sc-player-list {
    grid-template-columns: 1fr; 
    
    /* Syntax: Top | Left & Right | Bottom */
    padding: 10px 30px 60px; 
    
    /* Optional: Ensuring the padding doesn't push the width 
       beyond 100% (the RHS cream margin fix) */
    box-sizing: border-box; 
  }
  
  .sc-track {
    gap: 16px; /* Fixed tight gap for mobile */
  }
}
.sc-track-name {
  /* THE FIX: Lower base (8px) + Higher growth (4vw) 
     On mobile (390px): ~15px + 8px = 23px
     On small mobile (320px): ~12px + 8px = 20px
  */
  font-size: clamp(20px, 4vw, 30px) !important;
  
  font-weight: 600;
  color: #6B7A4E;
  font-family: ABCNormal-Bold;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
    .sc-controls {
      display: flex;
      align-items: center;
      gap: 16px;
    }
   .sc-play-btn {
  /* FIX: Scales from 36px on mobile to 48px on desktop */
  width: clamp(40px, 4vw + 20px, 48px) !important;
  height: clamp(40px, 4vw + 20px, 48px) !important;
  
  border-radius: 50%;
  background: #6B7A4E;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Critical: Stops the button from being squashed */
  transition: opacity 0.2s ease;
}
    .sc-play-btn:hover {
      opacity: 0.8;
    }
   .sc-play-btn svg {
  /* FIX: Scales the icon proportionally to the button */
  width: 60% !important;
  height: 60% !important;
  fill: #D9D9D9;
  
  /* Manual nudge: Play icons often look off-center visually 
     because of their shape. This keeps it balanced. */
  margin-left: 0px; 
}
    .sc-waveform-container {
      flex: 1;
      height: 48px;
      position: relative;
      cursor: pointer;
      display: flex;
      align-items: center;
      min-width: 0;
      overflow: hidden;
    }
    .sc-waveform {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .sc-waveform-bar {
      flex: 1;
      background: #6F7E55;
      border-radius: 99px;
      opacity: 0.4;
      transition: opacity 0.1s ease;
    }
    .sc-waveform-bar.played {
      opacity: 1;
    }
    .sc-time {
      font-size: 13px;
      color: #6B7A4E;
      opacity: 0.6;
      margin-left: 12px;
      white-space: nowrap;
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }
    .sc-track-loading {
      opacity: 0.5;
      pointer-events: none;
    }
    .cms-tracks-data {
      display: none !important;
    }
  
/* THE BANDS IMAGE GRID */
.lineup-section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px; /* Space between the three cards */
  padding: 60px 5%;
}

.lineup-container {
  display: flex;
  flex-direction: row; /* Horizontal on desktop */
  justify-content: center;
  align-items: flex-start; /* Keeps images aligned at the top */
  gap: 30px;
  width: 100%;
}

/* THE CARD */
.lineup-card {
  flex: 1; /* Each card takes equal space */
  max-width: 100vw; /* Prevents them from getting too huge on iMacs */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  margin: 0px;
  align-items: center;
  width: 100%;
}

.lineup-image-square {
  width: 60%;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  position: relative; /* <--- CRITICAL: Sets the anchor for the overlay */
  
  /* CLEAN IMAGE: No more tinting in the URL line */
  background-image: url('../images/1-10a.jpg'); 
  background-position: center;
  background-size: cover;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid #e4dcc7;
  
  /* Remove background-blend-mode if it's still there */
}

.lineup-image-square::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* THE TINT: Adjust the 0.4 (40%) to make it lighter or darker */
  background-color: rgba(0, 0, 0, 0.6); 
  
  z-index: 1; /* Sits above the background image */
}

.lineup-no, 
.lineup-Piece {
  position: relative; /* Allows z-index to work */
  z-index: 2;         /* Pulls text in front of the overlay */
  color: #e4dcc7;
}

/* Apply the same logic to your 7 and 9 piece variations */
.lineup-image-square.is-7 { 
  background-image: 
  url('../images/Bands_7piece-1.jpg'); 
}

.lineup-image-square.is-9 { 
  background-image: 
  url('../images/Bands_9Piece-1.jpg'); 
}

.lineup-name {
  color: #e4dcc7;
  font-family: ABCNormal-Normal, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.6px;
  margin-top: 20px;
  font-size: 20px;
}

.lineup-number {
  color: #e4dcc7;
  margin-top: 0;
  margin-bottom: 0;
  font-family: ABCNormal-Medium, Arial, sans-serif;
}

.lineup-Piece {
  color: #e4dcc7;
  letter-spacing: 2px;
  margin-top: 0px;
  margin-bottom: 0;
  margin-right: 15px;
  font-family: Kunstler, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(65px, 2vw, 80px);
  line-height: 1 !important;
  }

.lineup-text {
  font-size: 15px;
  font-family: ABCNormal-Medium, Arial, sans-serif; 
  word-spacing: 4px; 
    /* Ensuring the text stays centered */
  text-align: center;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 0px;
  letter-spacing: -0.4px;
}

/* THE WEDDDINGS MONTAGE */

/* UPDATE: The Frame */
.weddings-intro-wrapper {
  position: absolute;
  z-index: 10; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 60%; 
  aspect-ratio: 1.6 / 1; 
  
  /* ADD THIS: This makes the box a 'ruler' for the text inside */
  container-type: inline-size;

  display: flex;
  align-items: center;    
  justify-content: center; 
  
  padding: 9px; 
  box-sizing: border-box;
  overflow: hidden; 
  background-color: transparent;
}

/* THE MASTER FRAME */
.montage-master-frame {
  position: relative;
  display: inline-block; /* Wraps tightly around the image */
  width: 100%;
  max-width: 1000px;      /* Adjust this to your preferred max size */
}

/* THE BACKGROUND IMAGE */
.base-image {
  display: block;
  width: 100%;
  height: auto;
}

/* THE OVERLAY (Photoshop Text) */
.text-overlay-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Perfectly centers the image */
  
  /* ADJUST THIS: 
     If you want the text to look smaller/larger relative 
     to the montage, change this percentage. */
  width: 75%; 
  height: auto;
  
  pointer-events: none; /* Ensures users can still click 'through' the text if needed */
}

/* THE OVERLAY (Photoshop Text) */
.text-overlay-testimonial {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Perfectly centers the image */
  
  /* ADJUST THIS: 
     If you want the text to look smaller/larger relative 
     to the montage, change this percentage. */
  width: 67%; 
  height: auto;
  
  pointer-events: none; /* Ensures users can still click 'through' the text if needed */
}

/* UPDATE: Protected descenders for g, y, p, etc. */
.wedtitle-highlight {
  display: inline;
  background-color: #e4dcc7;
  color: #6f7e55;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  /* --- THE DESCENDER PROTECTION ZONE --- */
  /* Increased from 1.25 to 1.45 to give the 'g' room to breathe */
  line-height: 1.7; 
  
  /* Increased vertical padding to 0.35em to make the blocks touch again */
  padding: 0.35em 0.3em; 
  /* -------------------------------------- */

  font-family: ABCNormal-Medium, sans-serif;
  font-weight: 500;
  letter-spacing: -.2px;
  text-align: center;
  font-size: 7.25cqw;
  
  margin: 0 !important;
  white-space: normal; 
  word-break: keep-all;
}


/* ADD: Specific margin for Read More buttons in the wedding sections */
.nav-btn.is-read-more {
  margin-top: 20px; /* Adjust this value to get the spacing you like */
  display: inline-block; /* Ensures margin-top works correctly on anchor tags */
}

/* PHOTO FRAMES */

.photo-frame {
  display: block;
  background-size: cover;
  background-position: center;
}

/* Theme Colors for the 2px border */
.is-olive .photo-frame { border-color: #e4dcc7; }
.is-cream .photo-frame { border-color: #6f7e55; }

/* THE DEFAULT PHOTO FRAME: Branding & Shape */
.photo-frame.is-default {
  display: block;
  aspect-ratio: 1 / 1;
  border: 2px solid;
  border-radius: 20px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
    
  /* Resetting margins/widths so the "Parent" determines the size */
  width: 100%; 
  max-width: none; 
  min-width: 0;
}

/* Theme Awareness */
.is-olive .photo-frame.is-default { border-color: #e4dcc7 !important; }
.is-cream .photo-frame.is-default { border-color: #6f7e55 !important; }

/* Ensure the image inside fills the rounded frame */
.photo-frame.is-default img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* UPDATE: Making the Testimonial Hero full-screen */
/* UPDATE: Testimonial Hero - Width-Controlled Scaling */
.Testimonial-Hero {
  background-image: url('../images/04.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  
  /* 1. THE IMAGE FIT */
  /* 'cover' fills the box. 'contain' shows the WHOLE image with no cropping. */
  background-size: cover; 

  /* 2. THE WIDTH CONTROL (Surgical) */
  width: 100%;
  
  /* REMOVED: min-height: 100vh; (This was forcing height to control the size) */
  
  /* 3. THE HEIGHT CALCULATOR */
  /* This tells the browser: 'Look at the width, then make the height 
     match this ratio.' 16/7 is a standard cinematic banner ratio. */
  aspect-ratio: 3 / 2; 
  
  /* 4. THE LAYOUT */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; 
}

/* UPDATE: The Frame */
.testimonials-intro-wrapper {
  position: absolute;
  z-index: 10; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  width: 70%; 
  aspect-ratio: 3.3 / 1; 
  
  /* ADD THIS: This makes the box a 'ruler' for the text inside */
  container-type: inline-size;

  display: flex;
  align-items: center;    
  justify-content: center; 
  
  padding: 9px; 
  box-sizing: border-box;
  overflow: hidden; 
  background-color: rgba(228, 220, 199, 0.8);
}

/* UPDATE: Overriding Webflow's default h1 margins within the wrapper */
.testimonials-intro-wrapper h1 {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* UPDATE: The Text scaling */
.testimonials-highlight {
  display: block;
  width: 100%;
  text-align: center;
  color: #6f7e55;
  font-family: ABCNormal-Medium, sans-serif;
  line-height: 1; /* Tightened slightly to help vertical fit */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  
  /* 10cqw means '10% of the box width'. 
     Tweak this number (e.g., 9.5cqw or 11cqw) until it fits 
     perfectly. Once it fits, it will NEVER break out again. */
  font-size: 13cqw; 
  white-space: normal; 
  word-break: keep-all;
}

/* --- Contact Form Typography --- */

/* 1. Target the text the user actually types */
.form-2 .text-field, 
.form-2 .w-input,
.form-2 textarea {
    font-family: 'ABCNormal-Medium', sans-serif !important;
    font-size: 16px !important; /* Prevents iOS "zoom" on focus */
    color: #6f7e55 !important;
    font-weight: 500 !important;
}

/* 2. Target the placeholder text (what shows before they type) */
.form-2 .text-field::placeholder,
.form-2 .w-input::placeholder {
    font-family: 'ABCNormal-Normal', sans-serif !important;
    color: rgba(111, 126, 85, 0.6) !important; /* Slightly faded version of your olive */
}

/* 3. Specialized fix for browsers like Firefox/Safari */
.form-2 input, 
.form-2 textarea {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



@media screen and (min-width: 992px) {
  
/* 1. For Chrome, Safari, and newer versions of Edge */
body::-webkit-scrollbar {
  display: none;
}

/* 2. For Firefox and IE/Legacy Edge */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}


  .mobile-slider-wrapper { display: none !important; }

  /* 1. THE PARTNERSHIP: Force text, stack, AND default frame to share the row */
  .section.is-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0vw !important;
  }

  /* Both the text side and the image side are allowed to scale 50/50 */
  .section.is-row > .content-container,
  .section.is-row > .image-group.is-stack,
  .section.is-row > .photo-frame.is-default {
    flex: 1 !important; 
    width: 50% !important;
    min-width: 0 !important; /* The "Permission to Shrink" */
  }

  /* 2. THE SINGLE FRAME SCALING (Surgical ceiling) */
  .section.is-row > .photo-frame.is-default {
    /* This prevents the square from becoming a giant on big screens */
    max-width: 350px !important; 
    aspect-ratio: 1 / 1 !important;
    margin-left: auto !important; /* Pushes it away from the text container */
    margin-right: auto !important;
    }

  /* 3. THE POLAROID STACK (Complex container) */
  .image-group.is-stack {
    display: block !important;
    position: relative !important;
    aspect-ratio: 1.4 / 1 !important; 
    max-width: 700px !important; 
    height: auto !important; 
  }
  
  /* Individual Polaroids inside the stack */
  .image-group.is-stack .photo-frame {
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 18vw !important; 
    max-width: 320px !important; 
    aspect-ratio: 3.5 / 4.2 !important;
    
    background-color: #fff;
    border: solid #f1f1f1 !important;
    border-width: 12px 12px 60px 12px !important; 
    background-clip: content-box !important;
    
    box-shadow: 10px 15px 10px rgba(0,0,0,0.5);
    border-radius: 2px !important;
    overflow: visible !important; /* CRITICAL: Prevents text from being cut off */
  }

  /* --- Base Caption Style (Shared) --- */

  /* 1. THE RULER: Tell the frame to measure itself */
.image-group.is-stack .photo-frame,
.photo-frame.is-polaroid {
  container-type: inline-size !important;
  overflow: visible !important;
}

.polaroid-caption {
  position: absolute;
  bottom: -40px; /* Adjust to sit centered in your 60px bottom padding */
  left: 0;
  right: 0;
  text-align: center;
  
  /* Typography */
  font-family: LemonTuesday !important;
  font-size: clamp(25px, 15cqw, 30px) !important; /* Adjust based on the length of your text */
  color: #000000;
  opacity: 0.9;
  
  /* Setup for rotation */
  transform-origin: center;
  pointer-events: none;
  display: block;
  width: 100%;
}

/* --- INDIVIDUAL PHOTO CONTROLS --- */

/* Photo 1: Larger, bold "Headline" look */
.photo-1 .polaroid-caption { 
  font-size: clamp(15px, 12cqw, 35px) !important; /* Larger max and faster growth */
  text-align: left !important;
  padding-left: 5% !important;
  margin-bottom: 4%;
  transform: rotate(-3deg) !important; 
}

/* Photo 2: Smaller, delicate "Side Note" look */
.photo-2 .polaroid-caption { 
  font-size: clamp(16px, 12cqw, 32px) !important; /* Smaller floor and ceiling */
  text-align: right !important;
  padding-right: 15% !important;
  transform: rotate(2deg) !important; 
}

/* Photo 3: Standard Centered */
.photo-3 .polaroid-caption { 
  font-size: clamp(15px, 12cqw, 30px) !important;
  text-align: left !important;
  transform: rotate(-4deg) !important; 
  
}

/* Photo 4: Condensed look for longer text */
.photo-4 .polaroid-caption { 
  font-size: clamp(20px, 10cqw, 34px) !important; /* Tightest constraints */
  text-align: left !important;
  padding-left: 20% !important;
  transform: rotate(1.5deg) !important; 
  Top: 103%;
}

  /* The Fan Spread */
  .image-group.is-stack .photo-frame:first-child { 
    transform: translate(-50%, -50%) rotate(-3deg) translateX(-50%) !important; 
    z-index: 1;
  }

  .image-group.is-stack .photo-frame:nth-child(2) { 
    transform: translate(-50%, -50%) rotate(4deg) translateX(50%) translateY(10%) !important; 
    z-index: 2;
  }


/* The Heading Container - Make it smaller (approx 30%) */
  #extras-section .content-container:first-child {
    flex: 0 0 30% !important;
    padding-left: 0%; 
    padding-right: 0%;
  }

  /* The Accordion Container - Make it larger (approx 70%) */
  #extras-section .content-container:last-child {
    flex: 0 0 70% !important;
    padding-left: 5%; /* Adds a nice "gutter" between the title and the list */
  }

#extras-section {
 gap: 0 !important;
 padding: 20;
  }

 /* 1. THE PARENT: Centers the text/photo pair on desktop */
  .section.is-row.is-wedding-service {
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  /* 2. THE CHILDREN: Standardize width and alignment */
  .is-wedding-service .content-container, 
  .is-wedding-service .photo-frame {
    flex: 0 1 600px !important; 
    width: 50% !important;
    max-width: 600px !important;
  }

  /* 3. ALIGNMENT: Force all text and buttons to the left */
  .is-wedding-service .content-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: left !important;         /* Paragraph text alignment */
    align-items: flex-start !important;  /* Heading and Button alignment */
  }

  /* 4. THE GAP: Mirrored margins to keep the center line straight */
  .is-wedding-service .content-container.is-left {
    margin-right: 40px !important; /* Gap on the right for Cream sections */
  }

  .is-wedding-service .content-container.is-right {
    margin-left: 40px !important;  /* Gap on the left for Olive sections */
  }

  /* 5. THE PHOTO: Responsive square-ish portrait sizing */
  .is-wedding-service .photo-frame.is-default {
    height: auto !important; 
    aspect-ratio: 4 / 5 !important; 
    max-height: 70vh !important; 
    width: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 12px;
  }

  /* TESTIMONIALS AND INDEX ALIGN TESTIMONIAL TEXT LEFT */
/* Target the container that was previously right-aligned */
  .is-row.is-mobile-centered .content-container.is-right {
    text-align: left !important;         /* Aligns the paragraph text */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;  /* Aligns the Heading and Subheader */
  }

  /* Ensure the subheader and titles don't have stray right-margins */
  .is-row.is-mobile-centered .content-container.is-right .wedding-title,
  .is-row.is-mobile-centered .content-container.is-right .wedding-subheader {
    text-align: left !important;
    margin-right: auto !important;
    margin-left: 0;
  }
.wedding-title {
    margin-left: -20px !important; /* Pulls it 20px to the left */
    margin-bottom: 25px !important;
    position: relative;
    z-index: 2;
  }
}
/* ============================================================
   TABLET & GENERAL MOBILE (991px and down)
   Core logic: Switch Rows to Columns & Center Forms
   ============================================================ */
@media screen and (max-width: 991px) {

  /* --- 1. NAVIGATION & OVERLAY --- */
  .nav-wrapper, .logo-wrapper {
    padding-left: 16px;
    padding-right: 16px;
  }

  .header-line { margin-top: 16px; }

  .menu-overlay {
    display: flex;
    flex-direction: column;
    height: auto !important; 
    padding: 100px 28px 60px 28px !important;
    width: 100% !important;
    min-width: 100% !important;
    left: 0 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    border-bottom: 1px solid rgba(228, 220, 199, 0.2);
    max-height: 100vh !important;
    overflow-y: auto !important;
  }

  .menu-overlay .nav-btn.button-2.inverted {
    position: absolute !important;
    top: 25px;    
    left: 16px; 
  }

  .menu-links {
    display: flex;
    flex-direction: column;
    gap: 30px !important; 
    align-items: center !important;
    width: 100%;
    margin-top: 0 !important; 
  }

  .link-4 {
    font-size: 28px !important;
    text-align: center;
  }

  /* --- 2. GLOBAL SECTION LAYOUT --- */
  .section.is-row {
    display: flex !important;
    flex-direction: column !important; /* Standard Stack: Text then Image */
    align-items: center !important; 
    height: auto !important;
    gap: 10px !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  /* THE FLIP FIX: Text above Image for Olive sections */
  .section.is-row.is-olive {
    flex-direction: column-reverse !important;
  }

  .content-container, .content-container.is-center {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  /* --- 3. WEDDINGS PAGE SPECIFIC (Bleed Logic) --- */
  .page-weddings {
    overflow-x: hidden !important;
    width: 100vw;
    position: relative;
  }

  .page-weddings .section-heading {
    font-size: 30px !important;
    line-height: 1.1; 
    margin-bottom: 20px;
  }

/* CREAM SECTIONS: Now snapping and bleeding to the RIGHT */
.page-weddings .section.is-cream .photo-frame.is-default {
  width: calc(60% + 20px) !important;
  
  /* Snap to the right wall */
  align-self: flex-end !important; 
  margin-right: -20px !important; 
  margin-left: 0 !important; 
  
  max-width: none !important;
  aspect-ratio: 1 / 1 !important;
  
  /* Flatten the right side, keep the left corners rounded */
  border-radius: 20px 0 0 20px !important;
}

/* OLIVE SECTIONS: Now snapping and bleeding to the LEFT */
.page-weddings .section.is-olive .photo-frame.is-default {
  width: calc(60% + 20px) !important;
  
  /* Snap to the left wall */
  align-self: flex-start !important; 
  margin-left: -20px !important; 
  margin-right: 0 !important;
  
  max-width: none !important;
  aspect-ratio: 1 / 1 !important;
  
  /* Flatten the left side, keep the right corners rounded */
  border-radius: 0 20px 20px 0 !important;
}

  /* --- 4. GENERAL IMAGES & SLIDERS (Non-Wedding) --- */
  /* General images stay centered at 80% */
  .section.is-row > .photo-frame.is-default {
    width: 80% !important; 
    max-width: 400px !important;
    aspect-ratio: 1 / 1 !important;
    margin-top: 20px;
    display: block !important;
  }

 /* THE WRAPPER: The "Anchor" for images + dots */
.mobile-slider-wrapper {
    display: block !important; 
    width: 100% !important;
    margin: 0 auto 0px auto; /* Centers the whole unit and adds breathing room below */
    position: relative;
}

  /* 2. THE STATIONARY SLIDER FRAME (90% Window) */
  .image-group.mobile-slider-track {
    display: flex !important;
    position: relative !important;
    width: 80% !important;
    margin: 0 auto !important;
    border: 2px solid !important;
    border-radius: 20px !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important; 
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .image-group.mobile-slider-track::-webkit-scrollbar { display: none; }

  /* 3. SLIDER THEME COLORS */
  .is-olive .image-group.mobile-slider-track { border-color: #e4dcc7 !important; }
  .is-cream .image-group.mobile-slider-track { border-color: #6f7e55 !important; }

  /* 4. THE SLIDER CONTENT (Always 100% of the 90% track) */
  .mobile-slider-track .photo-frame {
    flex: 0 0 100% !important; 
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    scroll-snap-align: start !important;
  }

  .mobile-slider-track .photo-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 5. DOTS STYLING */
  .slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 15px; }
  .dot { width: 8px; height: 8px; border-radius: 50%; opacity: 0.3; }
  .dot.active { opacity: 1 !important; }
  .is-olive .dot { background-color: #e4dcc7 !important; } 
  .is-cream .dot { background-color: #6f7e55 !important; }

  /* --- 5. FORMS & FOOTER --- */
  .form-block {
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 15px;
  }

  .form-2 .text-field, .form-2 .w-input {
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  .footer-wrapper { padding: 16px 28px 50px; }
  .footer-logo-wrapper { margin-top: 16px; }

  /* --- 6. LINEUP SECTION --- */
  .lineup-container {
    flex-direction: column;
    align-items: center;
    gap: 60px;
  }

  .lineup-section .lineup-image-square {
    width: 70% !important; 
    max-width: 350px;
  }

  .nav-btn.is-read-more {
  margin-top: 20px; /* Adjust this value to get the spacing you like */
  display: inline-block; /* Ensures margin-top works correctly on anchor tags */
}

/* MOBILE ONLY: Targeted layout for Testimonial/Story sections */
/* 1. Target the container ONLY inside our new utility class */
  .is-mobile-centered .content-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centers the 'blocks' horizontally */
    text-align: center !important;  /* Centers text by default */
    margin: 0 auto !important;
    width: 100% !important;
  }

  /* 2. TITLES: Keep them strictly centered */
  .is-mobile-centered .wedding-title, 
  .is-mobile-centered .wedding-subheader {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    }

/* High-specificity override for centered titles on mobile */
.wedding-title.is-center {
  /* 1. The Gutter: Shrink width to 90% to leave 5% space on each side */
  width: 90% !important;
  max-width: 1100px; /* Safety ceiling for large tablets/desktops */
  
  /* 2. The Centering: This distributes the remaining 10% space equally */
  margin-left: auto !important;
  margin-right: auto !important;
  
  /* 3. The Visuals */
  text-align: center !important;
  display: block !important;
  
  /* 4. Optional: Add a little extra padding if the font descenders 
     (like 'g' or 'y') feel too close to the edges */
  padding-left: 5px;
  padding-right: 5px;
}

  /* 3. BODY TEXT: The surgical left-align override */
  .is-mobile-centered .body-text {
    text-align: left !important;  /* Straight left edge for readability */
    width: 100% !important; 
    align-self: flex-start !important; /* Secondary safety for the block position */
  }

  /* 4. BUTTON: Ensure the button stays centered in the row */
  .is-mobile-centered .nav-btn.is-read-more {
    align-self: center !important; 
    margin-top: 25px !important;
  }


/* Update this specific block inside your 991px media query */
.section.booking .section-heading {
  text-align: center !important;   /* Centers the text lines */
  margin-left: auto !important;    /* Centers the block itself */
  margin-right: auto !important;
  width: 100% !important;          /* Ensures it has the full width to center within */
  margin-bottom: 40px !important;  /* Keeps your existing spacing */
}

/* Ensure a tight gap between the title and the body inside this block */
.step-text-block h4.step-heading {
  margin-bottom: 20px;
}

.section.booking .nav-btn.is-read-more {
    align-self: center !important;
    
    /* Ensuring horizontal margins are set to auto as a backup */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* Give it some breathing room below Step 3 */
    margin-top: 0px !important;
    
    /* Resetting display to block ensures it respects the margins */
    display: block !important;
    width: max-content !important;
  }

  /* MOBILE ONLY: Targeted layout for Optional Extras on Bands Page  */
/* 1. Center the Heading */
  #extras-section .section-heading {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 2. Center the 'Contact Us' Button */
  #extras-section .nav-btn {
    /* 'table' or 'block' with max-content allows auto-margins to work */
    display: table !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* Ensure it breaks away from any parent flex-start rules */
    align-self: center !important; 
  }

  /* 1. Make the parent section a flex column */
  #extras-section {
    display: flex !important;
    flex-direction: column !important;
  }

  /* 2. THE SECRET SAUCE: 'Dissolve' the first container for layout purposes */
  #extras-section > .content-container:first-child {
    display: contents !important;
  }

  /* 3. Assign the Order */
  #extras-section .section-heading {
    order: 1 !important; /* Title first */
    text-align: center !important;
    margin-bottom: 20px !important;
  }

  #extras-section > .content-container:last-child {
    order: 2 !important; /* Accordion second */
  }

  #extras-section .nav-btn {
    order: 3 !important; /* Button jumps to the bottom! */
    align-self: center !important;
    margin-top: 40px !important; /* Add space above the button */
    display: table !important; /* Keeps it centered */
  }

.Mission-Statement
{Padding: 25px}

.text-overlay-testimonial {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Perfectly centers the image */
  
  /* ADJUST THIS: 
     If you want the text to look smaller/larger relative 
     to the montage, change this percentage. */
  width: 60%; 
  }

  /* Hide polaroid captions on mobile and tablet */
.polaroid-caption {
  display: none !important;
}
}
 /* END OF 991px MEDIA QUERY */
/* ============================================================
   MOBILE LANDSCAPE (767px and down)
   Layout tweaks: Nav groups & Image Clusters
   ============================================================ */
@media screen and (max-width: 767px) {
  /* HIDE NAV GROUP */
  .nav-group-right {
    display: none !important;
  }

 


       .sc-track-image-wrapper {
      width: 80px;
      height: 80px;
      border-radius: 6px;
      background: #6F7E55;
      flex-shrink: 0;
      overflow: hidden;
    }

        .sc-track-image {
      width: 80px;
      height: 80px;
      border-radius: 6px;
      object-fit: cover;
      flex-shrink: 0;
      background: #6F7E55;
        }

.section.is-row.lineup-section {
    /* --- THE CONTROL KNOB --- */
    gap: 50px !important;  /* Tweak this number for more or less space between cards */
    /* ------------------------ */
    
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .Insta-widget {
      padding-top: 30px;
  }
}
/* ============================================================
   MOBILE PORTRAIT (479px and down)
   Fine-tuning: Tightening padding & font nudges
   ============================================================ */
@media screen and (max-width: 479px) {
  .section {
    padding: 25px 20px !important; /* Tighter padding for small screens */
  }

  /* BUTTON NUDGES */
  .nav-btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* FONT SIZE SCALING */
  .link-4, .menu-link, .link-2 {
    font-size: 40px !important;
  }

  .bold-text {
    font-size: 32px !important;
  }

  /* INSTA WIDGET */
  .Insta-widget {
    grid-template-columns: 1fr; /* Single column on tiny phones */
    padding-top: 0px;
  }

   /* 1. FORCE THE WAVEFORM TO STAY VISIBLE */
  .sc-waveform-container {
    min-width: 60px !important; /* The 'floor' - it won't shrink smaller than this */
    flex: 1 !important;
  }

  /* 2. SHRINK THE IMAGE TO MAKE ROOM */
  /* If the image is too big, the waveform gets pushed off-screen. 
     Dropping it to 60px on tiny phones saves 20px of space. */
  .sc-track-image, 
  .sc-track-image-wrapper {
    width: 80px !important;
    height: 80px !important;
  }

  /* 3. TIGHTEN THE GAPS */
  .sc-controls {
    gap: 8px !important; /* Brings the play button and waveform closer */
  }
  
  .sc-track {
    gap: 12px !important; /* Less space between image and info */
  }

  /* 4. PREVENT THE TIME FROM PUSHING TOO HARD */
  .sc-time {
    font-size: 11px !important;
    margin-left: 5px !important;
  }


/* --- Making the Waveform Bold & Legible --- */

.sc-waveform {
  /* 1. Tighten the gap so the bars feel like a cohesive unit */
  gap: 1px !important; 
  align-items: flex-end !important; /* Ensures bars grow 'up' from the bottom */
}

.sc-waveform-bar {
  /* 2. Fix the width: Instead of 'flex: 1', give them a solid 2px or 3px width */
  flex: 0 0 2px !important; 
  
  /* 3. Boost Visibility: Crank the opacity up from 0.4 to 0.8 or 1.0 */
  opacity: 0.8 !important; 
  
  /* 4. Height logic: Ensure they aren't all tiny */
  min-height: 4px !important; 
  
  background-color: #6F7E55 !important; /* Ensuring it uses your Olive */
}

/* 5. The Progress State: Make the 'played' part even bolder */
.sc-waveform-bar.played {
  opacity: 1 !important;
  /* Optional: Give the played part a slightly darker 'ink' color for contrast */
  background-color: #4a5439 !important; 
}

}