/* --- Basic Reset / Base Styles --- */
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Common modern practice */
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: var(--body-font-font-family, sans-serif); /* Use CSS variables for fonts */
    font-style: var(--body-font-font-style, normal);
    font-weight: var(--body-font-font-weight, 400);
    line-height: var(--body-font-line-height, 1.5);
    letter-spacing: var(--body-font-letter-spacing, 0);
    text-transform: var(--body-font-text-transform, none);
    -webkit-font-smoothing: antialiased;
    color: var(--paragraphMediumColor, #333); 
    background-color: var(--siteBackgroundColor, #fff); 
    font-size: var(--base-font-size, 16px); /* Base font size variable */
}

/* Responsive Font Scaling */
@media screen and (max-width: 767px) {
    body {
        /* Mobile scaling */
        font-size: calc((var(--normal-text-size-value, 1) - 1) * 1.2vw + 1rem); /* Simplified scaling */
    }
}

@media screen and (min-width: 768px) {
     body {
        /* Desktop scaling */
        font-size: calc((var(--normal-text-size-value, 1) - 1) * 1.2vw + 1rem); /* Simplified scaling */
    }
}

@media screen and (min-width: 1512px) { /* Assuming 1512px is a common large breakpoint */
     body {
        /* Fixed size beyond a certain width */
        font-size: calc(var(--normal-text-size-value, 1) * 1rem);
    }
}


/* --- Variables --- */
/* These define color and font variables used in the original template */
:root {
    /* Font Family & Weight */
    --heading-font-font-family: "Marcellus";
    --heading-font-font-style: normal;
    --heading-font-font-weight: 400;
    --heading-font-text-transform: none;
    --heading-font-letter-spacing: -0.02em;
    --heading-font-line-height: 1.2em;

    --body-font-font-family: "PT Serif";
    --body-font-font-style: normal;
    --body-font-font-weight: 400;
    --body-font-text-transform: none;
    --body-font-letter-spacing: 0em;
    --body-font-line-height: 1.5em;

    --meta-font-font-family: "PT Serif";
    --meta-font-font-style: normal;
    --meta-font-font-weight: 400;
    --meta-font-text-transform: none;
    --meta-font-letter-spacing: 0em;
    --meta-font-line-height: 1.5em;

    /* Font Sizes (relative to --base-font-size) */
    --base-font-size: 16px; /* Base browser font size */
    --heading-1-size-value: 4; /* corresponds to 4rem */
    --heading-2-size-value: 2.8; /* corresponds to 2.8rem */
    --heading-3-size-value: 2.2; /* corresponds to 2.2rem */
    --heading-4-size-value: 1.6; /* corresponds to 1.6rem */
    --large-text-size-value: 1.4; /* corresponds to 1.4rem */
    --normal-text-size-value: 1; /* corresponds to 1rem */
    --small-text-size-value: 0.9; /* corresponds to 0.9rem */
    --normal-meta-size-value: 1; /* corresponds to 1rem */

    /* Colors (Extracted from theme settings - may need fine-tuning) */
    --white-hsl: 0,0%,100%;
    --black-hsl: 0,0%,0%;
    --safeDarkAccent-hsl: 0,0%,0%; /* Derived from black */
    --lightAccent-hsl: 240,10.53%,92.55%; /* Derived from the site's light color palette */
    --darkAccent-hsl: 204.39,79.49%,38.24%; /* Derived from the site's primary dark color */
    --accent-hsl: 209.23,52.7%,70.98%; /* Derived from the site's accent color */


    --siteBackgroundColor: hsla(var(--white-hsl),1); /* Default site background */
    --paragraphMediumColor: hsla(var(--black-hsl),1); /* Default paragraph color */
    --paragraphLinkColor: hsla(var(--safeDarkAccent-hsl),1); /* Default link color */

    --headingExtraLargeColor: rgb(20, 112, 175);
    --headingLargeColor: rgb(20, 112, 175);
    --headingMediumColor: hsla(var(--safeDarkAccent-hsl),1);
    --headingSmallColor: hsla(var(--black-hsl),1); /* Adjusted based on the H4 on Home/Issues */

    --navigationLinkColor: rgb(20, 112, 175); /* Header/Nav links */
    --siteTitleColor: hsla(var(--safeDarkAccent-hsl),1); /* Header Site Title */
    --headerBorderColor: hsla(var(--black-hsl),1);

    --primaryButtonBackgroundColor: #ca2f58;
    --primaryButtonTextColor: hsla(var(--white-hsl),1); /* Assuming dark button on light bg -> white text */

    --section-inset-border-color: hsla(var(--lightAccent-hsl),1); /* Used for inset sections */

    /* Page Padding */
    --page-padding-desktop: 4vw;
    --page-padding-mobile: 6vw;

    /* Section Padding */
    --section-padding-vertical-small: 33vh;
    --section-padding-vertical-medium: 66vh;
    --section-padding-vertical-large: 100vh;

     /* Accordion Styles (Issues Page) */
     --accordion-divider-color: var(--paragraphMediumColor, #333); /* Example color */
     --accordion-icon-color: var(--paragraphMediumColor, #333); /* Example color */

      /* Form Styles (Issues/Endorsements Page) */
      --form-field-border-color: var(--paragraphMediumColor, #333); /* Example color */
      --form-field-fill-color: hsla(var(--lightAccent-hsl),1); /* Example color */
      --form-field-input-color: var(--paragraphMediumColor, #333); /* Example color */
      --form-field-accessory-color: var(--paragraphMediumColor, #333); /* Example color */
}

/* Mobile breakpoint */
@media screen and (max-width: 767px) {
    :root {
         /* Adjust mobile specific variables here if needed */
    }
}


/* --- Typography Styles --- */
h1, h2, h3, h4 {
    font-family: var(--heading-font-font-family, sans-serif);
    font-style: var(--heading-font-font-style, normal);
    font-weight: var(--heading-font-font-weight, 400);
    line-height: var(--heading-font-line-height, 1.2);
    letter-spacing: var(--heading-font-letter-spacing, -0.02em);
    text-transform: var(--heading-font-text-transform, none);
    margin-top: 2rem; /* Example vertical rhythm */
    margin-bottom: 1rem;
}

h1 { font-size: calc(var(--heading-1-size-value, 4) * 1rem); color: var(--headingExtraLargeColor, #333); }
h2 { font-size: calc(var(--heading-2-size-value, 2.8) * 1rem); color: var(--headingLargeColor, #333); }
h3 { font-size: calc(var(--heading-3-size-value, 2.2) * 1rem); color: var(--headingMediumColor, #333); }
h4 { font-size: calc(var(--heading-4-size-value, 1.6) * 1rem); color: var(--headingSmallColor, #333); } /* Used for the text in the hero section */

p {
     font-size: calc(var(--normal-text-size-value, 1) * 1rem);
     line-height: var(--body-font-line-height, 1.5);
     margin-top: 1rem; /* Example vertical rhythm */
     margin-bottom: 1rem;
     color: var(--paragraphMediumColor, #333);
}

/* Responsive Typography (Simplified scaling logic) */
@media screen and (max-width: 767px) {
    h1 { font-size: calc((var(--heading-1-size-value, 4) - 1) * 1.2vw + 1rem); }
    h2 { font-size: calc((var(--heading-2-size-value, 2.8) - 1) * 1.2vw + 1rem); }
    h3 { font-size: calc((var(--heading-3-size-value, 2.2) - 1) * 1.2vw + 1rem); }
    h4 { font-size: calc((var(--heading-4-size-value, 1.6) - 1) * 1.2vw + 1rem); }
    p { font-size: calc((var(--normal-text-size-value, 1) - 1) * 1.2vw + 1rem); }
}

@media screen and (min-width: 1512px) {
    h1 { font-size: calc(var(--heading-1-size-value, 4) * 1rem); }
    h2 { font-size: calc(var(--heading-2-size-value, 2.8) * 1rem); }
    h3 { font-size: calc(var(--heading-3-size-value, 2.2) * 1rem); }
    h4 { font-size: calc(var(--heading-4-size-value, 1.6) * 1rem); }
    p { font-size: calc(var(--normal-text-size-value, 1) * 1rem); }
}


/* --- Link Styles --- */
a {
    cursor: pointer;
    color: inherit; /* Inherit color from parent by default */
    text-decoration: none;
}

/* Link underline effect (Simplified) */
a:hover {
   text-decoration: underline; /* Basic underline on hover */
}

/* Specific link color overrides (like in the original HTML/CSS) */
p a {
    color: var(--paragraphLinkColor, blue);
}

/* --- Structure Styles --- */
#site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#main-content {
    flex: 1; /* Main content takes up remaining space */
    z-index: 9; /* Example z-index */
}

/* Page Sections */
.page-section {
    position: relative;
    display: flex;
    flex-direction: column; /* Stack content vertically by default */
    align-items: center; /* Center content horizontally by default */
    justify-content: center; /* Center content vertically by default */
    box-sizing: border-box;
    padding: var(--page-padding-desktop); /* Default desktop padding */
}

.page-section .section-content-wrapper {
    width: 100%;
    max-width: var(--sqs-site-max-width, 1400px); /* Max content width */
    box-sizing: border-box;
    padding: 0 var(--page-padding-desktop); /* Apply padding within the max width container */
}

/* Responsive Section Padding */
@media screen and (max-width: 767px) {
    .page-section {
         padding: var(--page-padding-mobile);
    }
     .page-section .section-content-wrapper {
         padding: 0 var(--page-padding-mobile);
     }
}

/* Section Background (for images/videos) */
.section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* Send to back */
}

.section-background img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure image covers the area */
    position: absolute;
    top: 0;
    left: 0;
}


/* --- Header Styles - Reused --- */
#site-header {
    position: relative; /* Or 'fixed' for sticky header */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10; /* Example z-index */
    background-color: transparent; /* Start transparent */
    transition: background-color 0.3s ease; /* Smooth transition for background */
    padding: 1.8vw 4vw; /* Default desktop header padding */
}

#site-header .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space between logo, nav, and actions */
    max-width: var(--sqs-site-max-width, 1400px);
    margin: 0 auto;
    width: 100%;
}

/* Header responsive padding */
@media only screen and (max-width: 799px) { /* Adjust breakpoint based on mobile layout */
    #site-header {
        padding: 6vw;
    }
    #site-header .header-container {
        padding: 0;
    }
}


#site-header .site-title {
    flex-shrink: 0;
}

#site-header .site-title img {
     display: block;
     width: auto; /* Adjust width based on your needs */
     max-height: 225px; /* Max height from tweak */
     transition: max-height 0.3s ease; /* Smooth transition for sticky header */
}

/* Responsive logo size */
@media screen and (max-width: 767px) {
    #site-header .site-title img {
        max-height: 114px; /* Mobile max height from tweak */
    }
}

/* Sticky Header (Optional) */
/*
.sticky-header #site-header {
    position: fixed;
    background-color: var(--siteBackgroundColor); // Background when sticky
}
.sticky-header #site-header .site-title img {
    max-height: ?px; // Smaller height when sticky
}
.sticky-header #main-content {
     padding-top: ???px; // Offset main content by header height
}
*/


#site-header .site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2vw; /* Spacing between nav items */
}

#site-header .site-nav li {
    margin: 0;
    padding: 0;
}

#site-header .site-nav a {
    text-decoration: none;
    color: var(--navigationLinkColor, #333);
    padding: 0.1em 0; /* Add padding for underline effect */
    position: relative;
}

/* Navigation link hover effect (Simplified) */
#site-header .site-nav a:hover {
    text-decoration: underline;
}

#site-header .site-nav a[aria-current="page"] {
    text-decoration: underline; /* Style for the active/current page link */
}


#site-header .header-action .button {
     /* Styles applied to the button */
}

/* Hide mobile menu elements initially */
#site-header .mobile-menu,
#site-header .menu-toggle {
    display: none;
}

/* Mobile layout adjustments */
@media only screen and (max-width: 799px) { /* Adjust breakpoint */
    #site-header .site-nav,
    #site-header .header-action {
        display: none; /* Hide desktop nav and action */
    }

    #site-header .header-container {
        justify-content: space-between; /* Space out logo and burger */
    }

    #site-header .menu-toggle {
        display: flex; /* Show mobile menu toggle */
        align-items: center;
        justify-content: center;
        width: 50px; /* Example size */
        height: 50px; /* Example size */
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    #site-header .mobile-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--menuOverlayBackgroundColor, #fff); /* Menu background */
        z-index: 9; /* Below header */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    #site-header .mobile-menu.is-open { /* Class added by JS when menu is open */
        visibility: visible;
        opacity: 1;
    }

    #site-header .mobile-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px; /* Adjust spacing */
    }

     #site-header .mobile-nav a,
     #site-header .mobile-menu-action .button {
         font-size: 1.5rem; /* Adjust mobile menu link size */
         color: var(--menuOverlayNavigationLinkColor, #333);
     }

     #site-header .mobile-menu-action {
          margin-top: 30px; /* Space above button */
     }
}

.hero_layout, .hero_layout_alt {
    vertical-align: top;
}
.hero_layout .hero-image, .hero_layout_alt .hero-image {
    width: 40%;
    display: inline-block;
    margin-right: 10%;
}
.hero_layout .hero-text, .hero_layout_alt .hero-text {
    width: 45%;
    display: inline-block;
}

.hero_layout_alt .hero-image {
    width: 55%;
    vertical-align: top;
    margin-top: 6em;
    margin-right: 0%;
    margin-left: 10%;
}
.hero_layout_alt .hero-text {
    width: 38%;
}

@media only screen and (max-width: 799px) { /* Adjust breakpoint */
    .hero_layout, .hero_layout_alt {
        vertical-align: top;
    }
    .hero_layout .hero-image, .hero_layout_alt .hero-image {
        width: 100%;
        display: inline-block;
        margin-right: 0%;
    }
    .hero_layout .hero-text, .hero_layout_alt .hero-text {
        width: 100%;
        display: inline-block;
    }

    .hero_layout_alt .hero-image {
        width: 100%;
        vertical-align: top;
        margin-top: 0;
        margin-right: 0%;
        margin-left: 0%;
    }
    .hero_layout_alt .hero-text {
        width: 100%%;
    }
}

/* --- Footer Styles - Reused --- */
#site-footer {
     position: relative;
     z-index: 0;
     background-color: var(--siteBackgroundColor, #fff); /* Footer background */
     padding: var(--page-padding-desktop); /* Default desktop padding */
}

#site-footer .section-content-wrapper {
     max-width: var(--sqs-site-max-width, 1400px);
     margin: 0 auto;
     padding: 0 var(--page-padding-desktop);
}

/* Responsive Footer Padding */
@media screen and (max-width: 767px) {
     #site-footer {
         padding: var(--page-padding-mobile);
     }
      #site-footer .section-content-wrapper {
          padding: 0 var(--page-padding-mobile);
      }
}

.footer-contact-section p {
     margin: 0.5rem 0; /* Adjust spacing */
     text-align: left; /* Based on original layout */
}
.footer-border-box {
    width:100%;
    border:1px solid rgb(20, 112, 175);
    padding-top:3em;
    padding-bottom:3em;
}
.footer-border-box p {
    text-align:center;
    font-size:60%;
    color:rgb(20, 112, 175)
}


/* --- Button Styles (Simplified) - Reused --- */
.button {
    display: inline-block;
    padding: var(--primary-button-padding-y, 1.2em) var(--primary-button-padding-x, 2em);
    font-family: var(--primary-button-font-font-family, sans-serif);
    font-style: var(--primary-button-font-font-style, normal);
    font-weight: var(--primary-button-font-font-weight, 400);
    line-height: var(--primary-button-font-line-height, 1.2);
    letter-spacing: var(--primary-button-font-letter-spacing, 0);
    text-transform: var(--primary-button-font-text-transform, none);
    text-align: center;
    cursor: pointer;
    border: var(--primary-button-stroke, 0) solid transparent; /* Use variable for border thickness */
    border-radius: 300px; /* Pill shape based on tweak */
    transition: opacity 0.3s ease; /* Simple hover transition */
}

.button.primary {
    background-color: var(--primaryButtonBackgroundColor, #000);
    color: var(--primaryButtonTextColor, #fff);
    border-color: var(--primaryButtonBackgroundColor, #000);
}

/* Button hover effect */
.button:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* Responsive Button Font Size (Simplified) */
@media screen and (max-width: 767px) {
    .button {
         font-size: calc((var(--primary-button-font-font-size-value, 1) - 1) * 1.2vw + 1rem);
    }
}

@media screen and (min-width: 1512px) {
     .button {
         font-size: calc(var(--primary-button-font-font-size-value, 1) * 1rem);
     }
}

/* --- Utility Classes (Optional, based on common patterns) - Reused --- */
/* Visually Hidden (for skip links, etc.) */
.visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

/* Placeholder for mobile menu hamburger icon */
.menu-toggle .hamburger {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--navigationLinkColor, #333);
    position: relative;
    transition: background-color 0.3s ease;
}

.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after {
    content: '';
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--navigationLinkColor, #333);
    position: absolute;
    left: 0;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.menu-toggle .hamburger::before {
    top: -7px; /* Position above */
}

.menu-toggle .hamburger::after {
    top: 7px; /* Position below */
}

/* Animation/styling for open state (requires JS to toggle a class like .is-open) */
.menu-toggle.is-open .hamburger {
    background-color: transparent;
}

.menu-toggle.is-open .hamburger::before {
    transform: rotate(45deg);
    top: 0;
}

.menu-toggle.is-open .hamburger::after {
    transform: rotate(-45deg);
    top: 0;
}

/* Adjust padding for sections after the header */
main .sections:first-child .page-section:first-child {
    padding-top: 100px; /* Example value, adjust based on your header height */
}
/* Mobile adjustment */
@media only screen and (max-width: 799px) { /* Adjust breakpoint */
    main .sections:first-child .page-section:first-child {
        padding-top: 80.175px; /* Example mobile value */
    }
}

.hero-section .section-content-wrapper {
    display: flex; /* Enable flexbox for layout */
    align-items: center; /* Vertically align items (was flex-start, changed to center based on visual) */
    gap: 4vw; /* Gap between image and text */
}

@media screen and (max-width: 767px) {
     .hero-section .section-content-wrapper {
         flex-direction: column; /* Stack items vertically on mobile */
         gap: 6vw; /* Mobile gap */
     }
}

.hero-image {
    
    max-width: 50%; /* Cap the width */
    overflow: hidden;
    border-radius: 50px; /* Apply rounded corners */
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .hero-image {
        flex-basis: 100%;
        max-width: 100%; /* Full width on mobile */
        border-radius: 20px; /* Smaller border radius on mobile */
    }
}

.hero-image img {
     display: block;
     width: 100%; /* Make image fill its container */
     height: auto;
     object-fit: cover; /* Ensure image covers the area */
     object-position: 43.5% 26.4%; /* Preserve focal point from original */
}


.hero-text {
    flex-grow: 1; /* Text takes up remaining space */
    flex-basis: 50%; /* Allocate space */
    max-width: 50%; /* Cap the width */
    text-align: center; /* Center text by default */
}

@media screen and (max-width: 767px) {
     .hero-text {
         flex-basis: 100%;
         max-width: 100%;
     }
}

/* Adjust text alignment if needed (Home page text was left aligned in original) */
.hero-text h2,
.hero-text h4 {
    text-align: left; /* Align headings left */
}
.hero-text p {
    text-align: left; /* Align paragraphs left */
}


/* --- Issues Page Specific Layout - Reused --- */
.issues-section .section-content-wrapper {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    gap: 4vw; /* Gap between columns */
}

@media screen and (max-width: 767px) {
     .issues-section .section-content-wrapper {
         flex-direction: column; /* Stack columns on mobile */
         gap: 6vw; /* Mobile gap */
     }
}

.issues-text-column {
    flex-grow: 1;
    flex-basis: 60%; /* Give text more space, example */
    max-width: 60%; /* Cap the width */
}

@media screen and (max-width: 767px) {
     .issues-text-column {
         flex-basis: 100%;
         max-width: 100%;
     }
}

.issues-image-column {
    flex-shrink: 0;
    flex-basis: 40%; /* Give image space */
    max-width: 40%; /* Cap the width */
    display: flex;
    justify-content: center;
    align-items: center; /* Center image vertically */
    border-radius: 0; /* No border-radius specified in Fluid Engine for this image */
}

@media screen and (max-width: 767px) {
     .issues-image-column {
         flex-basis: 100%;
         max-width: 100%;
         order: -1; /* Place image above text on mobile */
     }
}


.issues-image-column img {
     display: block;
     width: 100%; /* Make image fill its container */
     height: auto;
     object-fit: contain; /* Preserve aspect ratio without cropping */
     object-position: 50% 50%; /* Center the image */
}

/* Issues Accordion Styles (Basic Structure, needs JS for toggle) - Reused */
.issues-accordion ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.issue-item {
     border-bottom: 1px solid var(--accordion-divider-color, #ccc); /* Divider style */
     margin-bottom: 0; /* No margin between items if using border-bottom */
}

.issue-item:first-child {
    border-top: 1px solid var(--accordion-divider-color, #ccc); /* Top divider */
}

.issue-title-button {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     background: none;
     border: none;
     padding: 30px 0; /* Vertical padding based on original */
     text-align: left;
     cursor: pointer;
     font: inherit;
     color: inherit;
}

.issue-title {
    margin: 0; /* Remove default margin */
    padding-right: 14px; /* Space for icon */
    font-size: inherit; /* Use button font size */
    font-weight: inherit;
    line-height: inherit;
}

.accordion-icon {
    flex-shrink: 0; /* Prevent icon from shrinking */
    width: 14px; /* Icon size based on original */
    height: 14px; /* Icon size based on original */
    position: relative;
}

/* Simple Plus Icon (Needs CSS transforms/JS for rotation) */
.accordion-icon::before,
.accordion-icon::after {
     content: '';
     display: block;
     width: 100%;
     height: 1px; /* Line thickness */
     background-color: var(--accordion-icon-color, #333);
     position: absolute;
     top: 50%;
     left: 0;
     transform: translateY(-50%);
     transition: transform 0.3s ease; /* Smooth animation */
}

.accordion-icon::after {
    transform: translateY(-50%) rotate(90deg); /* Vertical line default */
}

/* Style when item is open (Needs JS to add a class like .is-open to .issue-item or .issue-title-button) */
.issue-item.is-open .accordion-icon::after {
    transform: translateY(-50%) rotate(0deg); /* Rotate vertical line to horizontal */
}

.issue-description {
     padding-bottom: 30px; /* Bottom padding based on original */
     overflow: hidden; /* Hide content by default */
     /* transition: height 0.3s ease; Needs JS to manage height */
     /* max-height: 0; Needs JS to manage height */
}

.issue-description p {
    margin-top: 0; /* Remove top margin for first paragraph */
    margin-bottom: 1rem; /* Standard paragraph spacing */
    font-size:80%;
}

.issue-description p:last-child {
    margin-bottom: 0;
}


/* --- Contact Form Section - Reused --- */
.contact-section .section-content-wrapper {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    gap: 4vw; /* Gap between columns */
}

@media screen and (max-width: 767px) {
     .contact-section .section-content-wrapper {
         flex-direction: column; /* Stack columns on mobile */
         gap: 6vw; /* Mobile gap */
     }
}

.contact-text {
    flex-grow: 1;
    flex-basis: 40%; /* Give text less space than form */
    max-width: 40%;
}

@media screen and (max-width: 767px) {
     .contact-text {
         flex-basis: 100%;
         max-width: 100%;
     }
}

.contact-form-column {
    flex-grow: 1;
    flex-basis: 60%; /* Give form more space */
    max-width: 60%;
}

@media screen and (max-width: 767px) {
     .contact-form-column {
         flex-basis: 100%;
         max-width: 100%;
     }
}

/* Basic Form Styling (simplified, needs refinement for full fidelity) - Reused */
.form-wrapper form {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between form items */
}

.form-wrapper .field-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between fields */
}

.form-wrapper .form-item {
     margin: 0; /* Reset margin */
}

.form-wrapper .form-item label.title {
    display: block;
    margin-bottom: 5px; /* Space below label */
    font-weight: bold; /* Example style */
}

.form-wrapper .form-item .required {
     color: red; /* Style for required indicator */
     margin-left: 5px;
}

.form-wrapper .field-name {
     display: flex;
     flex-direction: row;
     gap: 10px; /* Space between first and last name */
}
.form-wrapper .field-name .field {
     flex: 1; /* Make name fields equal width */
}

.form-wrapper .form-item input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.form-wrapper .form-item textarea,
.form-wrapper .form-item select {
    display: block;
    width: 100%;
    padding: 10px 15px; /* Padding inside fields */
    border: 1px solid var(--form-field-border-color, #ccc); /* Border style */
    background-color: var(--form-field-fill-color, #fff); /* Background */
    color: var(--form-field-input-color, #333); /* Input text color */
    border-radius: 5px; /* Rounded corners */
    font-size: 1rem;
}

.form-wrapper .form-item textarea {
     min-height: 100px; /* Default textarea height */
     resize: vertical; /* Allow vertical resize */
}

.form-wrapper .form-item .caption-text {
    display: block;
    font-size: 0.9rem;
    color: var(--paragraphSmallColor, #666);
    margin-top: 5px; /* Space above caption text */
}

.form-button-wrapper {
    margin-top: 10px; /* Space above the submit button */
}


/* Style for the accordion icon (+ shape) */
.accordion-icon::before,
.accordion-icon::after {
     background-color: var(--accordion-icon-color);
}

/* Style for form fields */
.form-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.form-wrapper textarea,
.form-wrapper select {
     border-color: var(--form-field-border-color);
     background-color: var(--form-field-fill-color);
     color: var(--form-field-input-color);
}

/* Style for dropdown/date/time icons if you add them */
/* Placeholder using currentColor */
.form-wrapper select,
.form-wrapper input[type="date"],
.form-wrapper input[type="time"] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M8 10l4-4H4z"/></svg>'); /* Basic dropdown arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 30px; /* Make space for the icon */
}

/* --- Meet Deb Page Specific Layout - Reused --- */
.meet-deb-section .section-content-wrapper {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    gap: 4vw; /* Gap between columns */
}

@media screen and (max-width: 767px) {
     .meet-deb-section .section-content-wrapper {
         flex-direction: column; /* Stack columns on mobile */
         gap: 6vw; /* Mobile gap */
     }
}

.meet-deb-text-column {
    flex-grow: 1;
    flex-basis: 60%; /* Give text more space, example */
    max-width: 60%; /* Cap the width */
}

@media screen and (max-width: 767px) {
     .meet-deb-text-column {
         flex-basis: 100%;
         max-width: 100%;
     }
}

.meet-deb-image-column {
    flex-shrink: 0;
    flex-basis: 40%; /* Give image space */
    max-width: 40%; /* Cap the width */
    display: flex;
    justify-content: center;
    align-items: center; /* Center image vertically */
    border-radius: 0; /* No border-radius specified in Fluid Engine for this image */
}

@media screen and (max-width: 767px) {
     .meet-deb-image-column {
         flex-basis: 100%;
         max-width: 100%;
         order: -1; /* Place image above text on mobile */
     }
}

.meet-deb-image-column img {
     display: block;
     width: 100%; /* Make image fill its container */
     height: auto;
     object-fit: cover; /* Use cover as per original image block setting */
     object-position: 50% 50%; /* Center the image */
}

/* --- Endorsements Page Specific Layout --- */
.endorsements-section .section-content-wrapper {
    /* No flex layout needed for this specific section based on the simplified structure */
    /* It will contain just the heading and the list of paragraphs */
}

.endorsements-list {
    margin-top: 2rem; /* Space below the heading */
     /* Add multi-column layout if desired based on desktop design */
     /* For example:
     column-count: 2;
     column-gap: 30px;
     */
}

.endorsements-list p {
     margin-top: 0; /* Remove top margin for list items */
     margin-bottom: 0.5rem; /* Space between endorsements */
     /* Add styles for individual endorsement text if needed */
}

.endorsements-list p:last-child {
     margin-bottom: 0;
}