:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
  /*  --bodyTextColor: #4e4b66; */
    --bodyTextColor: black;	
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}
/*********************************************************************************************************************
*Fonts
*********************************************************************************************************************/
/* 400 - Regular (Body Text) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2');
}

/* 400 - Italic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-v31-latin-italic.woff2') format('woff2');
}

/* 600 - Semi-Bold (Sub-headers or Buttons) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-v31-latin-600.woff2') format('woff2');
}

/* 700 - Bold (Main Titles) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-v31-latin-700.woff2') format('woff2');
}

/* 700 - Bold Italic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-v31-latin-700italic.woff2') format('woff2');
}

/* 800 - Extra-Bold (Hero Text/Art Deco Headers) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/montserrat-v31-latin-800.woff2') format('woff2');
}
/*********************************************************************************************************************
*Main body
*********************************************************************************************************************/
body {
    margin: 0;
    padding: 0;
	background-color: rgb(206,216,214);
	background-image: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
    flex-direction: column;
    min-height: 100vh; /* Using vh ensures it looks at the screen height */
	/* Ensure the background covers the whole screen regardless of content length */
    background-attachment: fixed; 
}
main {
    flex: 1 0 auto;
    display: block; /* Keeps content at the top */
    width: 100%;
}
*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    margin: 0;
    color: var(--bodyTextColor);
}

/**********************************************************************************************************************
*Hero Section - main body of main page
***********************************************************************************************************************/
#hero-1946 {
  /* KEEP your menu clearance */
  padding-top: clamp(10rem, 25vw, 10rem); 
  
  /* REDUCE the bottom padding so it doesn't push the footer away */
  padding-bottom: .5rem; 
  
  /* Standardize sides */
  padding-left: 1rem;
  padding-right: 1rem;

  overflow: hidden;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  font-family: 'Montserrat', sans-serif;
}

/* Container holds carousel + grid */
#hero-1946 .cs-container {
  width: 100%;
  max-width: 80rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1vw, .5rem);
}


/* Grid wrapper for content + cards */
#hero-1946 .cs-grid-wrap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 1.25rem);
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}

/* Content block */
#hero-1946 .cs-content {
  grid-column: span 12;
  text-align: center;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

#hero-1946 .cs-title {
  font-size: clamp(2.438rem, 5vw, 3.813rem);
  margin: 0 0 1rem 0;
  color: var(--headerColor);
}

#hero-1946 .cs-text {
  font-size: var(--bodyFontSize);
  line-height: 1.5em;
 
  margin-bottom: 1.25rem;
  color: var(--bodyTextColor);
}

#hero-1946 .cs-button-solid {
  font-size: 1rem;
  font-weight: 700;
  line-height: clamp(2.875rem, 5.5vw, 3.5rem);
  text-align: center;
  text-decoration: none;
  min-width: 9.375rem;
  padding: 0 clamp(2rem, 4vw, 3rem);
  background-color: var(--primary);
  color: var(--bodyTextColorWhite);
  display: inline-block;
  transition: background-color 0.3s, color 0.3s;
  border-radius: 1.25rem; /* same as .cs-item cards */
}
#hero-1946 .cs-button-solid:hover {
  background-color: #000;
  color: #fff;
}
/* 1. Force the container to be a Flex row */
#hero-1946 .cs-content .cs-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100%;
}

/* 2. Set the 2x2 grid for Mobile */
#hero-1946 .cs-content .cs-button-solid {
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    /* This '50% minus gap' forces 2 per row */
    flex: 1 1 calc(50% - 12px) !important; 
    
    height: 3.5rem;
    min-width: 140px; 
    padding: 0 10px !important;
    margin: 0 !important;
    font-size: 0.9rem;
    line-height: 1;
}

/* 3. Set the 1x4 row for Desktop (768px and up) */
@media only screen and (min-width: 48rem) {
    #hero-1946 .cs-content .cs-button-solid {
        flex: 1 !important; /* Spreads them equally in one line */
        font-size: 1rem;
    }
}

/* Card group */
#hero-1946 .cs-card-group {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 1.25rem);
  margin: 0;
  padding: 0;
  padding-bottom: 0;
}

/* 1. THE CARD (Stationary Porcelain Chassis) */
#hero-1946 .cs-item {
    list-style: none;
    background-color: #ffffff; 
    border-radius: 1.25rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    grid-column: span 12;
    position: relative;
    overflow: visible;

    /* THE BEZEL: Starts as cold industrial gray */
    box-shadow: 
        0 0 0 1px #dddddd,           /* Tiny inner highlight */
        0 0 0 4px #555555,           /* The thin gray bezel */
        0 4px 20px rgba(0,0,0,0.08); /* Soft shadow on the ground */

    /* THE FILAMENT WARM-UP: 3 seconds for the "heat" to build */
    transition: box-shadow 3s ease; 
    transform: none !important;      /* Card stays perfectly still */
}

#hero-1946 .cs-item::before, 
#hero-1946 .cs-item::after {
    display: none !important;
    content: none !important;
}

/* 3. THE TUBE GLOW (Hover State) */
#hero-1946 .cs-item:hover {
    transform: none !important; 
    
    /* BEZEL HEATS UP: Gray turns to glowing orange (#ff6a3e) */
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.2),
        0 0 0 4px #ff6a3e,                   /* Bezel "heats" up */
        0 0 40px 10px rgba(255, 106, 62, 0.4),/* Soft amber tube bloom */
        0 20px 40px rgba(0,0,0,0.15);         /* Deeper ground shadow */
}

/* Ensure icons and text look good on the porcelain base */
#hero-1946 .cs-h3 {
    color: #1a1a1a;
    transition: color 3s ease; /* Text can also warm up slowly if you like */
}

#hero-1946 .cs-item:hover .cs-h3 {
    color: #ff6a3e; /* Text matches the glowing bezel */
}
#hero-1946 .cs-item:hover .cs-h3 {
  color: var(--primary);
}
#hero-1946 .cs-item:hover .cs-icon {
  transform: rotateY(360deg);
}

#hero-1946 .cs-icon {
  width: 2.5rem;
  transition: transform 0.5s;
}
#hero-1946 .cs-h3 {
  font-size: 1.25rem;
  margin: 0 0 0.75rem 0;
  color: var(--headerColor);
  transition: color 0.3s;
}
#hero-1946 .cs-item-text {
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  color: var(--bodyTextColor);
}

/* Tablet and up: 2 cards per row, aligned with carousel edges */
@media (min-width: 48rem) {
  
  /* Let the card group itself define the grid, not the 12-col wrapper */
  #hero-1946 .cs-card-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: clamp(1.25rem, 2.2vw, 2rem);      /* consistent inner spacing */
    max-width: 80rem;                       /* match carousel width */
    margin: 0 auto;                         /* center align */
    width: 100%;                            /* stretch to full width */
    grid-auto-rows: 1fr;                    /* equal row heights */
  }

  #hero-1946 .cs-item {
    grid-column: auto;                      /* let grid place items */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    /* scale cards up */
    /* Reduce top padding by ~50%, keep sides/bottom the same */
    padding: clamp(1rem, 1.25vw, 1.375rem) clamp(2rem, 2.5vw, 2.75rem) clamp(2rem, 2.5vw, 2.75rem);
    aspect-ratio: 3 / 2;                    
    height: auto;
  }

  #hero-1946 .cs-text-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
	gap:0.5rem;
    width: 100%;
  }
}
/**********************************************************************************************************************
* end of core CSS 
***********************************************************************************************************************/
/**********************************************************************************************************************
*Event PopUp
***********************************************************************************************************************/
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 10001;
  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}

.modal.show {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: transparent;
  padding: 0;
  border-radius: 0;
  max-width: 90vw;
  max-height: 90vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content img {
  max-width: 100%;
  max-height: 80vh;
  height: auto;
  width: auto;
  display: block;

  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.modal.show img {
  transform: scale(1);
  opacity: 1;
}
/**********************************************************************************************************************
*End of PopUp CSS
***********************************************************************************************************************/
/**********************************************************************************************************************
*Contact Information Page
***********************************************************************************************************************/

/* Limit width and center the section */
/* Contact Info Section */
#contact-info {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
}

#contact-info h1,
#contact-info h2 {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* 4 columns: Title | Name | Email | Phone */
.contact-grid {
  display: grid;
  grid-template-columns: 280px 200px minmax(250px, 1fr) 180px;
  gap: 0.25rem 1.5rem;
  margin-bottom: 2rem;
}

.contact-row {
  display: contents; /* children align to parent grid tracks */
}

/* Zebra striping across the whole row */
.contact-row:nth-child(even) {
  background: #dfeee0; /* slightly darker green-gray */
}
/* Zebra striping across the whole row */
.contact-row:nth-child(even) {
  background: #dfeee0; /* light green-gray for contrast */
}

.contact-row > div {
  padding: 0.5rem;
  border-bottom: 1px solid #ddd;
  text-align: left;
}


/* Styling */
.title em {
  font-style: italic;
  color: #006600;
  font-weight: bold;
}

.email a {
  color: #0044cc;
  text-decoration: none;
}
.email a:hover {
  text-decoration: underline;
}

.website-contact {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.95rem;
}

/* Mobile collapse */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-row {
    display: block;
    border-bottom: 1px solid #ddd;
    padding: 0.5rem 0;
  }

  .contact-row > div {
    border-bottom: none;
    background: none !important;
    padding: 0.25rem 0;
  }

  .contact-row:nth-child(even) {
    background: #f7f7f7;
  }
}
/**********************************************************************************************************************
*End of Contact Information Page CSS
**********************************************************************************************************************/
/**********************************************************************************************************************
*Constitution Page CSS
**********************************************************************************************************************/
/* Limit width and center the section */

#constitution {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
}

#constitution h1,
#constitution h2 {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
/**********************************************************************************************************************
*End of Constitution Page CSS
**********************************************************************************************************************/
/**********************************************************************************************************************
*Meeting Info Page CSS
**********************************************************************************************************************/
/* Limit width and center the section */

#meetinginfo, #meetinglocations {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
}

#meetinginfo h1,
#meetinginfo h2,
#meetinglocations h1,
#meetinglocations h2,{
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
/**********************************************************************************************************************
*End of Meeting Info Page CSS
**********************************************************************************************************************/
/**********************************************************************************************************************
*InfoAge Page CSS
**********************************************************************************************************************/
/* Limit width and center the section */

#infoage {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
}

#infoage h1,
#infoage h2,{
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
/**********************************************************************************************************************
* End of InfoAge Page CSS
/**********************************************************************************************************************
*FAQs Page
**********************************************************************************************************************/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-1720 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #faq-1720 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    z-index: 1;
	padding-top: clamp(5rem, 20vw, 6rem);
  }
  #faq-1720 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #faq-1720 .cs-title {
    margin: 0;
  }
  #faq-1720 .cs-flex-group {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
    position: relative;
  }
  #faq-1720 .cs-wrapper {
    width: 100%;
    position: relative;
  }
  #faq-1720 .cs-button-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #faq-1720 .cs-flex {
    width: 100%;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: #F7F7F7;
    display: flex;
    flex-direction: column;
    order: 3;
    gap: 1.25rem;
  }
  #faq-1720 .cs-option {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    font-weight: 700;
    padding: 0;
    color: var(--bodyTextColor);
    background-color: transparent;
    border: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
    transition: color .3s;
  }
  #faq-1720 .cs-option:hover {
    color: var(--primary);
    cursor: pointer;
  }
  #faq-1720 .cs-option.cs-active {
    color: var(--primary);
  }
  #faq-1720 .cs-picture {
    width: 100%;
    /* 328px - 450px */
    height: clamp(20.5rem, 30vw, 28.125rem);
    /* 16px - 20px */
    margin: 0 0 clamp(1rem, 2.4vw, 1.25rem);
    order: 2;
    position: relative;
    z-index: 1;
  }
  #faq-1720 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #faq-1720 .cs-faq-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    order: 3;
    gap: 0.5rem;
    transition: transform 0.7s,
                opacity 0.3s,
                visibility 0.5s,
                top 0.3s,
                left 0.3s;
    /* makes the transfrom scaling orgin the top left corner, dictates the direction by which the scale transforms animate towards */
    transform-origin: top;
    transform-style: preserve-3d;
    perspective: 900px;
  }
  #faq-1720 .cs-faq-group.cs-hidden {
    /* by using visibility:hidden instead of display:none, we can see the animations from the opacity and transforms, display:none won't render animations. */
    visibility: hidden;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    /* hidden galleries have a 0 opacity, and we animate the opacity to 1 when they become active */
    opacity: 0;
    /* this top and left value help control the animation, by setting it to position absolute and left 0, the FAQ won't fly off screen to the left, it will stop its position to be at the left edge of the .cs-flex-group (left: 0). Same for the bottom:0 value, the FAQ won't go past that position when it animates */
    top: 0;
    left: 0;
    position: absolute;
    /* prevents the hidden galleries from overflowing the section, and makes a nice animations to transition to and from */
    transform: scaleY(0);
  }
  #faq-1720 .cs-faq-group.cs-hidden .cs-faq-item {
    transform: rotateX(270deg);
    opacity: 0;
  }
  #faq-1720 .cs-faq-item {
    list-style: none;
    width: 100%;
    /* clips all corners of the button that overlap the rounded border */
    overflow: hidden;
    opacity: 1;
    top: 0;
    transform: rotateX(0deg);
    transition: transform 0.6s,
                opacity 0.3s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(3) {
    transition-delay: 0.2s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(4) {
    transition-delay: 0.3s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(5) {
    transition-delay: 0.4s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(6) {
    transition-delay: 0.5s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(7) {
    transition-delay: 0.6s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(8) {
    transition-delay: 0.7s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(9) {
    transition-delay: 0.8s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(10) {
    transition-delay: 0.9s;
  }
  #faq-1720 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #faq-1720 .cs-faq-item.active .cs-button:before {
    background-color: var(--primary);
    transform: rotate(315deg);
  }
  #faq-1720 .cs-faq-item.active .cs-button:after {
    background-color: var(--primary);
    transform: rotate(-315deg);
  }
  #faq-1720 .cs-faq-item.active .cs-item-p {
    height: auto;
    /* 20px - 24px bottom */
    /* 16px - 24px left & right */
    padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 1.3vw, 1.5rem);
    opacity: 1;
  }
  #faq-1720 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    /* 16px - 24px top & bottom */
    /* 16px - 20px left & right */
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.25rem);
    background-color: #f7f7f7;
    border: none;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq-1720 .cs-button:hover {
    cursor: pointer;
  }
  #faq-1720 .cs-button:before {
    /* left line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 50%;
    right: 1.5rem;
    transform: rotate(45deg);
    /* animate the transform from the left side of the x axis, and the center of the y */
    transform-origin: left center;
    transition: transform 0.5s;
  }
  #faq-1720 .cs-button:after {
    /* right line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 50%;
    right: 1.3125rem;
    transform: rotate(-45deg);
    /* animate the transform from the right side of the x axis, and the center of the y */
    transform-origin: right center;
    transition: transform 0.5s;
  }
  #faq-1720 .cs-button-text {
    width: 80%;
    display: block;
  }
  #faq-1720 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 100%;
    height: 0;
    margin: 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2vw, 1.5rem);
    opacity: 0;
    background-color: #f7f7f7;
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition: opacity 0.3s, padding-bottom 0.3s;
  }
}
/* Inbetween - 600px */
@media only screen and (min-width: 37.5rem) {
  #faq-1720 .cs-button-group {
    width: 80%;
    max-width: 22.0625rem;
    flex-direction: row;
    align-items: stretch;
    flex: none;
  }
  #faq-1720 .cs-content {
    width: 100%;
  }
  #faq-1720 .cs-picture {
    /* 300px - 493px */
    min-height: clamp(18.75rem, 30vw, 30.8125rem);
    margin: 0;
    height: 100%;
    flex: none;
    order: 3;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 48rem) {
  #faq-1720 .cs-flex-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* 20px - 80px */
    column-gap: clamp(1.25rem, 3vw, 5rem);
  }
  #faq-1720 .cs-button-group {
    flex-direction: column;
    flex: auto;
  }
  #faq-1720 .cs-picture {
    max-height: 31.25rem;
  }
}
/**********************************************************************************************************************
*End of FAQ Page CSS
**********************************************************************************************************************/
/**********************************************************************************************************************
*Capacitor Calculator Page CSS
**********************************************************************************************************************/
#legendTable {
  border-collapse: collapse;
  margin-top: 12px;
  width: 100%;
}
#legendTable th,
#legendTable td {
  border: 1px solid #ccc;
  padding: 6px 10px;
  text-align: center;
}
#legendTable th {
  background: #f0f0f0;
}
#legendTable tbody tr:nth-child(even) {
  background: #fafafa;
}
.legend-caption {
  margin-top: 6px;
  font-size: 0.95rem;
  color: #444;
  font-style: italic;
}

/* --- Calculator Controls --- */
.calc-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 1rem 0;
}
.calc-controls label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: 0.95rem;
}
.calc-controls input {
  padding: 0.5rem;
  font-size: 1rem;
  margin-top: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.calc-actions {
  grid-column: 1 / -1; /* span full width */
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.calc-actions button {
  flex: 1;
  min-width: 120px;
  padding: 0.75rem;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  background: var(--primary);
  color: white;
  cursor: pointer;
}
.calc-actions button:hover {
  background: var(--primaryLight);
}

/* --- Results Table (desktop/tablet) --- */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.9rem;
}
th,
td {
  border: 1px solid #ccc;
  padding: 6px 8px;
  text-align: center;
}
th {
  background: #f0f0f0;
}
tbody tr:nth-child(odd) {
  background: #fafafa;
}
tbody tr:nth-child(even) {
  background: #fff;
}
/* Sticky header */
table thead th {
  position: sticky;
  top: 0;
  background: #f0f0f0;
  z-index: 2;
}

/* --- Mobile card layout --- */
@media (max-width: 768px) {
  .calc-controls {
    grid-template-columns: 1fr; /* stack inputs */
  }
  .calc-actions {
    flex-direction: column;
  }
  .calc-actions button {
    width: 100%;
  }

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }
  thead {
    display: none; /* hide header row */
  }
  tbody tr {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5rem;
    background: #fff;
  }
  tbody td {
    border: none;
    display: flex;
    justify-content: space-between;
    padding: 6px 4px;
    font-size: 0.9rem;
  }
  tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    flex: 1;
    text-align: left;
    padding-right: 10px;
    color: #333;
  }
  tbody td:last-child {
    border-bottom: none;
  }
}
/*********************************************************************************************************************
*End of Calculator Page CSS
*********************************************************************************************************************/
/*********************************************************************************************************************
*Membership Page CSS
*********************************************************************************************************************/
body.membership-page #hero-1946 .cs-card-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* exactly 3 equal columns */
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

body.membership-page #hero-1946 .cs-card-group .cs-item {
  grid-column: auto; /* let them auto-flow into the 3 slots */
}
/*********************************************************************************************************************
*End of Membership Page CSS
*********************************************************************************************************************/
/*********************************************************************************************************************
* Parts Program Page CSS - FIXED
*********************************************************************************************************************/

/* 1. Reset the Grid Wrapper */
body.parts-page #hero-1946 .cs-grid-wrap {
    display: block; 
    width: 100%;
}

/* 2. Base Card Group (Mobile First) */
body.parts-page #hero-1946 .cs-card-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: stretch; 
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0;
}

/* 3. Base Card Style (Forces height and turns off aspect-ratio) */
body.parts-page #hero-1946 .cs-item {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    height: 100% !important; 
    aspect-ratio: auto !important; /* This stops the text from cutting off! */
    min-height: 450px; 
    padding: 2.5rem 2rem;
    text-align: left;
    overflow: visible !important; /* Allows text to grow */
}

/* 4. Ensure the text container inside stretches to fill the card */
body.parts-page #hero-1946 .cs-text-group {
    flex: 1; 
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* 5. Desktop Switch (768px and up) */
@media only screen and (min-width: 48rem) {
    body.parts-page #hero-1946 .cs-card-group {
        grid-template-columns: repeat(3, 1fr);
    }
}
/*********************************************************************************************************************
*End of Parts Page CSS
*********************************************************************************************************************/

/*********************************************************************************************************************
*Video Library Page CSS
*********************************************************************************************************************/
/* Scrollable wrapper only for Tech Talk archive */
.techtalk-archive .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile stacked card layout, scoped only to Tech Talk archive */
@media (max-width: 768px) {
  .techtalk-archive table,
  .techtalk-archive thead,
  .techtalk-archive tbody,
  .techtalk-archive th,
  .techtalk-archive td,
  .techtalk-archive tr {
    display: block;
  }

  .techtalk-archive thead {
    display: none; /* hide header row */
  }

  .techtalk-archive tr {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5rem;
    background: #fff;
  }

  .techtalk-archive td {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    border: none;
    border-bottom: 1px solid #eee;
  }

  .techtalk-archive td:last-child {
    border-bottom: none;
  }

  .techtalk-archive td::before {
    content: attr(data-label);
    font-weight: bold;
    margin-right: 0.5rem;
    flex-basis: 40%;
    text-align: left;
  }
}
/*********************************************************************************************************************
*End of Video Library Page CSS
*********************************************************************************************************************/