@font-face {
    font-family: "Victor Mono";
    src: url("../fonts/VictorMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Victor Mono";
    src: url("../fonts/VictorMono-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Victor Mono";
    src: url("../fonts/VictorMono-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
  
  /* ==========================================================================
           Variables & Reset
           ========================================================================== */
        :root {
            --primary-red: #ff473a;
            --dark-color: #303030;
            --bg-light: #e8e6e2;
            --bg-white: #f3f2f0;
            --border-main: 2px solid #222;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            height: 100vh;
            overflow: hidden; /* Locks the layout to the viewport */
            font-family: 'Victor Mono', monospace;
            background-color: var(--bg-light);
            display: flex;
            flex-direction: column;
            color: var(--dark-color);
            padding: 26px;
        }

        /* ==========================================================================
           Header
           ========================================================================== */
        header {
            width: 100%;
            box-sizing: border-box;
            padding: 0.5rem 1rem;
            background: #f3f2f0;
            border: var(--border-main);
        }

        .site-logo {
            display: block;
        }

        .site-logo img {
            display: block;
            width: 320px;
            max-width: 100%;
            height: auto;
        }

        /* ==========================================================================
           Accordion Area
           ========================================================================== */
        #swup {
            display: flex;
            flex: 1;
            overflow: hidden;
            width: 100%;
        }
        
        #accordion-container {
            display: flex;
            flex: 1;
            overflow: hidden;
            width: 100%;
        }

        .accordion-section {
            display: flex;
            flex: 0 0 45px;
            min-width: 0;
            overflow: hidden;
            border-right: var(--border-main);
            transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* Expanded state: section takes up remaining space */
        .accordion-section.active {
            flex: 1 1 0; 
        }

        /* The clickable vertical tabs */
        .nav-tab {
            width: 45px;
            flex-shrink: 0;
            background-color: #f3f2f0;
            color: var(--dark-color);
            display: flex;
            justify-content: center;
            padding-top: 1.5rem;
            cursor: pointer;
            border-right: var(--border-main);
            transition: background-color 0.4s, color 0.4s;
        }


    .accordion-container 
        .vertical-text {
            writing-mode: vertical-rl;
            text-orientation: upright;
            font-family: 'Victor Mono', monospace;
            font-weight: 900;
            font-size: 1.1rem;
            letter-spacing: 6px;
            text-transform: uppercase;
        }

        /* Active Tab ONLY gets the Dark Background and Red Text */
        .accordion-section.active .nav-tab {
            background-color: var(--dark-color);
            color: var(--primary-red);
        }

        .accordion-section:first-child .nav-tab {
    border-left: var(--border-main);
}

        /* The Content Panel */
       .panel-content {
            width: calc(100vw - (6 * 55px));
            min-width: 0;
            height: 100%;
            flex-shrink: 0;
            display: flex;
            background-color: #f3f2f0;
        }

        /* ==========================================================================
           Panel Layouts
           ========================================================================== */
        /* Home Panel */
        .hero-image {
            width: 100%;
            height: 100%;
            background-image: url('../images/elliott-acupuncture-studio-hudson-ny.jpg');
            background-size: cover;
            background-position: center;
            /* background-color: var(--primary-red); */
            background-blend-mode: multiply; /* Red tint effect */
        }

/* ==========================================================================
   ABOUT PANEL
   ========================================================================== */

.about-panel {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
}


/* ABOUT THE CLINIC heading */

.about-panel-header {
    flex: 0 0 auto;

    padding: 1rem 1.5rem;

    border-bottom: var(--border-main);

    color: var(--primary-red);
}

.about-panel-header h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem;
}


/* Scrollable document */

.about-scroll {
    flex: 1 1 auto;

    min-height: 0;
    min-width: 0;

    overflow-y: auto;
    overflow-x: hidden;
}


/* Individual sections */

.about-section {
    width: 100%;
    box-sizing: border-box;
}

        /* Team Panel */
        .team-text {
            flex: 1;
            padding: 2rem 3rem;
            overflow-y: auto;
        }
        
        .team-text h2 {
            font-family: 'Oswald', sans-serif;
            font-size: 3rem;
            color: var(--primary-red);
            margin-bottom: 1.5rem;
        }
        
        .team-text p {
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }

        .team-image {
            flex: 1;
            border-left: var(--border-main);
            background-image: url('https://framerusercontent.com/images/ib3uM90P5pyn3w3F4eXlckyNmhQ.png');
            background-size: cover;
            background-position: center;
            filter: grayscale(100%);
        }

        /* Services Panel */
        .services-text {
            flex: 1;
            padding: 2rem 3rem;
            overflow-y: auto;
        }
        
        .services-text h2 {
            font-family: 'Oswald', sans-serif;
            font-size: 3rem;
            color: var(--primary-red);
            margin-bottom: 1.5rem;
        }
        
        .services-text p {
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }

        .services-image {
            flex: 1;
            border-left: var(--border-main);
            background-image: url('https://framerusercontent.com/images/ib3uM90P5pyn3w3F4eXlckyNmhQ.png');
            background-size: cover;
            background-position: center;
            filter: grayscale(100%);
        }

        /* Insurance Panel */
        .insurance-text {
            flex: 1;
            padding: 2rem 3rem;
            overflow-y: auto;
        }
        
        .insurance-text h2 {
            font-family: 'Oswald', sans-serif;
            font-size: 3rem;
            color: var(--primary-red);
            margin-bottom: 1.5rem;
        }
        
        .insurance-text p {
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }

        .insurance-image {
            flex: 1;
            border-left: var(--border-main);
            background-image: url('https://framerusercontent.com/images/ib3uM90P5pyn3w3F4eXlckyNmhQ.png');
            background-size: cover;
            background-position: center;
            filter: grayscale(100%);
        }

        /* FAQ Panel */
        .faq-text {
            flex: 1;
            padding: 2rem 3rem;
            overflow-y: auto;
        }
        
        .faq-text h2 {
            font-family: 'Oswald', sans-serif;
            font-size: 3rem;
            color: var(--primary-red);
            margin-bottom: 1.5rem;
        }
        
        .faq-text p {
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }

        .faq-image {
            flex: 1;
            border-left: var(--border-main);
            background-image: url('https://framerusercontent.com/images/ib3uM90P5pyn3w3F4eXlckyNmhQ.png');
            background-size: cover;
            background-position: center;
            filter: grayscale(100%);
        }

        .empty-content {
            padding: 3rem;
            font-family: 'Oswald', sans-serif;
            font-size: 2rem;
            color: var(--dark-color);
        }

/* ==========================================================================
   CTA & Footer
   ========================================================================== */

        .cta-bar {
            font-size:1.3em;
            background-color: var(--primary-red);
            color: var(--bg-light);
            text-align: center;
            padding: 1rem;
            border-top: var(--border-main);
            border-bottom: var(--border-main);
            flex-shrink: 0;
            cursor: pointer;
            border-left: var(--border-main);
            border-right: var(--border-main);
            text-transform: uppercase;
        }

       /* ==========================================================================
   Footer
   ========================================================================== */

footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    background-color: var(--bg-light);
    flex-shrink: 0;
}

.footer-cell {
    min-width: 0;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-size: 1.1em;
    text-transform: uppercase;
    border-left: var(--border-main);
    border-bottom: var(--border-main);
}

.third-cell {
    text-transform: none;
}

.instagram-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    border-left: var(--border-main);
    color: var(--primary-red);
    text-decoration: none;
    font-size: 2rem;
    border-right: var(--border-main);
}

.instagram-cell:hover {
    background-color: var(--primary-red);
    color: var(--bg-light);
}

.instagram-cell:focus-visible {
    outline: 3px solid var(--dark-color);
    outline-offset: -4px;
}

/* ==========================================================================
   Swup
   ========================================================================== */

.nav-tab {
    cursor: pointer;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ==========================================================================
   About — Overview
   ========================================================================== */

.about-overview {
    display: grid;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;

    width: 100%;
    min-height: 100%;
}


/* Text — top left */

.about-overview-text {
    grid-column: 1;
    grid-row: 1;

    padding: 2rem 3rem;

    border-right: var(--border-main);
    border-bottom: var(--border-main);

    overflow: hidden;
}

.about-overview-text p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}


/* Image — top right */

.about-overview-image-top {
    grid-column: 2;
    grid-row: 1;

    border-bottom: var(--border-main);
}


/* Image — bottom left */

.about-overview-image-bottom {
    grid-column: 1;
    grid-row: 2;

    border-right: var(--border-main);
}


/* Core modalities — bottom right */

.about-modalities {
    grid-column: 2;
    grid-row: 2;

    padding: 2rem 3rem;
}


/* Images */

.about-overview-image {
    overflow: hidden;
}

.about-overview-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}
/* ==========================================================================
   About — Conditions
   ========================================================================== */

.about-conditions {
    display: grid;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;

    min-height: 100%;
}


/* Section heading */

.about-section-heading {
    grid-column: 1 / -1;
    grid-row: 1;

    padding: 1rem 1.5rem;

    border-bottom: var(--border-main);
}

.about-section-heading h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    color: var(--primary-red);
}


/* Conditions text/list */

.conditions-list {
    grid-column: 1;
    grid-row: 2;

    padding: 2rem 3rem;

    border-right: var(--border-main);
}

.conditions-list > p {
    margin-bottom: 2rem;
    line-height: 1.6;
}


/* Condition rows */

.condition-item {
    border-top: var(--border-main);
}

.condition-item:last-child {
    border-bottom: var(--border-main);
}

.condition-item button {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;

    padding: 1rem 0;

    border: 0;
    background: transparent;

    font: inherit;
    font-weight: 700;

    text-align: left;
    cursor: pointer;
}


/* Image */

.conditions-image {
    grid-column: 2;
    grid-row: 2;

    overflow: hidden;
}

.conditions-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}
/* ==========================================================================
   About — Location & Access
   ========================================================================== */

.about-location {
    display: grid;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr 1fr;

    min-height: 100%;
}


/* Heading */

.about-location .about-section-heading {
    grid-column: 1 / -1;
    grid-row: 1;

    padding: 1rem 1.5rem;

    border-bottom: var(--border-main);
}


/* Image */

.location-image {
    grid-column: 1;
    grid-row: 2;

    overflow: hidden;

    border-right: var(--border-main);
    border-bottom: var(--border-main);
}

.location-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Text */

.location-text {
    grid-column: 2;
    grid-row: 2;

    padding: 2rem 3rem;

    border-bottom: var(--border-main);
}

.location-text p {
    line-height: 1.6;
}


/* Map */

.location-map {
    grid-column: 1 / -1;
    grid-row: 3;

    min-height: 0;
}

.location-map iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}

/* ==========================================================================
   Accordion Navigation
   ========================================================================== */

#accordion-container ul,
#accordion-container ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

#accordion-container li {
    list-style: none;
}

#accordion-container li::marker {
    content: "";
}

.nav-tab {
    cursor: pointer;
}

/* ==========================================================================
   Conditions Accordion
   ========================================================================== */

.condition-item {
    border-top: var(--border-main);
}

.condition-item:last-child {
    border-bottom: var(--border-main);
}


.condition-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;

    padding: 1rem 0;

    border: 0;
    background: transparent;

    font: inherit;
    font-weight: 700;
    color: inherit;

    text-align: left;
    cursor: pointer;

    text-transform: uppercase;
}


/* Plus/minus indicator */

.condition-plus {
    display: inline-block;
    font-size: 1.5rem;
    line-height: 1;
}

/* Change + to − when the accordion is open */
.condition-toggle[aria-expanded="true"] .condition-plus {
    font-size: 0;
}

.condition-toggle[aria-expanded="true"] .condition-plus::after {
    content: "−";
    font-size: 1.5rem;
}


/* Keyboard focus */

.condition-toggle:focus-visible {
    outline: 3px solid var(--primary-red);
    outline-offset: 4px;
}


/* Content */

.condition-content {
    padding: 0 0 1.25rem 0;
}

.condition-content[hidden] {
    display: none;
}
/* ==========================================================================
   Team Page
   ========================================================================== */

.team-page {
    width: 100%;
    height: 100%;

    overflow-y: auto;
    overflow-x: hidden;

    background-color: var(--bg-light);
}


/* ==========================================================================
   Team Page Heading
   ========================================================================== */

.team-page-heading {
    width: 100%;

    padding: 1rem 1.5rem;

    border-bottom: var(--border-main);
}

.team-page-heading h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem;
    line-height: 1;
    color: var(--primary-red);
}


/* ==========================================================================
   Team Member Rows
   ========================================================================== */

.team-member {
    display: grid;

    grid-template-columns: 60% 40%;

    width: 100%;

    border-bottom: var(--border-main);
}


/* Alternate the image */

.team-member-daniel {
    grid-template-columns: 40% 60%;
}


/* ==========================================================================
   Team Member Information
   ========================================================================== */

.team-member-info {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


/* Name */

.team-member-name {
    padding: 0.8rem 1rem;

    border-bottom: var(--border-main);
}

.team-member-name h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--primary-red);
}


/* Credentials */

.team-member-credentials {
    padding: 0.65rem 1rem;

    border-bottom: var(--border-main);
}

.team-member-credentials h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    line-height: 1.1;
}


/* Biography */

.team-member-bio {
    padding: 1rem;
    flex: 1;
}

.team-member-bio p {
    margin-bottom: 1rem;
    line-height: 1.45;
}

.team-member-bio p:last-child {
    margin-bottom: 0;
}

.team-member-bio ul {
    margin: 0 0 1rem 1.25rem;
}

.team-member-bio li {
    margin-bottom: 0.35rem;
    line-height: 1.4;
}


/* ==========================================================================
   Learn More
   ========================================================================== */

.team-learn-more {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 2rem;

    padding: 0.5rem;

    background-color: var(--primary-red);
    color: var(--bg-light);

    border-top: var(--border-main);

    font-family: 'Victor Mono', monospace;
    font-size: 0.8rem;
    text-align: center;
}

.team-learn-more:hover {
    color: var(--dark-color);
}

.team-learn-more:focus-visible {
    outline: 3px solid var(--dark-color);
    outline-offset: -5px;
}


/* ==========================================================================
   Team Images
   ========================================================================== */

.team-member-image {
    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border-left: var(--border-main);
}

.team-member-daniel .team-member-image {
    border-left: 0;
    border-right: var(--border-main);
}

.team-member-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter: grayscale(100%);
}


/* ==========================================================================
   Flora & Fauna
   ========================================================================== */

.team-flora {
    grid-template-columns: 60% 40%;
}

.team-flora .team-member-image {
    border-left: var(--border-main);
}

.team-flora .team-member-name h3 {
    color: var(--primary-red);
}

.panel-content > .team-page {
    flex: 1 1 auto;
    min-width: 0;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.nav-tab:focus-visible {
    outline: 3px solid var(--primary-red);
    outline-offset: -5px;
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   Services Page
   ========================================================================== */

.services-panel {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: var(--bg-light);
}

/* Services heading */

.services-panel-header {
    border-bottom: var(--border-main);
    padding: 1rem;
}

.services-panel-header h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem;
    color: var(--primary-red);
    line-height: 1.1;
}

/* Services introduction */

.services-panel-intro {
    padding: 1rem;
    border-bottom: var(--border-main);
}

.services-panel-intro p {
    font-size: 1rem;
    line-height: 1.45;
    margin: 0;
}

/* ==========================================================================
   Services Accordion
   ========================================================================== */

.services-panel-content {
    width: 100%;
}

.service-item {
    width: 100%;
}


/* --------------------------------------------------------------------------
   Accordion Toggle
   -------------------------------------------------------------------------- */

.service-toggle {
    width: 100%;
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0.75rem 1rem;

    background: var(--bg-light);
    color: var(--dark-color);

    border: 0;
    border-top: var(--border-main);

    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;

    cursor: pointer;

    /* dotted rule beneath the heading */
    border-bottom: 1px dashed var(--dark-color);
}

.service-toggle:focus-visible {
    outline: 3px solid var(--primary-red);
    outline-offset: -3px;
}

.service-plus {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
}

.service-heading {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
}


/* --------------------------------------------------------------------------
   Open Content
   -------------------------------------------------------------------------- */

.service-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    align-items: stretch;
    border-bottom: var(--border-main);
}

.service-content[hidden] {
    display: none;
}


/* --------------------------------------------------------------------------
   Text
   -------------------------------------------------------------------------- */

.service-text {
    min-width: 0;
    padding: 2rem 3rem;
}

.service-text p {
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

.service-text p:last-child {
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   Single Image
   -------------------------------------------------------------------------- */

.service-image {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-left: var(--border-main);
}

.service-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* --------------------------------------------------------------------------
   Two Images
   -------------------------------------------------------------------------- */

.service-images {
    min-width: 0;
    min-height: 0;

    display: grid;
    grid-template-rows: 1fr 1fr;

    overflow: hidden;
}

.service-images img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}

.service-images img + img {
    border-top: var(--border-main);
}


/* ==========================================================================
   ACUPUNCTURE & MOXIBUSTION
   ========================================================================== */

.acupuncture-layout .service-text {
    order: 1;
}

.acupuncture-layout .service-image {
    order: 2;
}


/* ==========================================================================
   CUPPING & GUA SHA
   ========================================================================== */

.cupping-layout .service-images {
    order: 1;
}

.cupping-layout .service-text {
    order: 2;
    border-left: var(--border-main);
}


/* ==========================================================================
   CHINESE HERBAL MEDICINE
   ========================================================================== */

.herbal-layout .service-text {
    order: 1;
}

.herbal-layout .service-images {
    order: 2;
    border-left: var(--border-main);
}


/* ==========================================================================
   TEXT-ONLY SERVICES
   ========================================================================== */

.text-only .service-content {
    display: block;
}

.text-only .service-text {
    width: 100%;
}

/* ==========================================================================
   Accordion Hidden State
   ========================================================================== */

.service-content[hidden] {
    display: none !important;
}

/* ==========================================================================
   Services — Treatments & First Visit
   ========================================================================== */

.services-section {
    width: 100%;
}

.services-section-header {
    width: 100%;
    box-sizing: border-box;

    margin: 0;
    padding: 0.75rem 1rem;

    border-top: var(--border-main);
    border-bottom: var(--border-main);
}

.services-section-header h2,
.services-section-header h3 {
    margin: 0;

    font-family: inherit;
    font-weight: 700;
    line-height: 1.2;
}

.services-section-header h2 {
    font-size: 1.5rem;
    text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Treatments Content
   -------------------------------------------------------------------------- */

.services-section-content {
    display: grid;
    grid-template-columns: 1fr 1fr;

    width: 100%;
}

.services-section-image {
    min-width: 0;
    overflow: hidden;

    border-right: var(--border-main);
}

.services-section-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.services-section-text {
    min-width: 0;
    box-sizing: border-box;

    padding: 1rem;
}

.services-section-text p {
    margin-top: 0;
    margin-bottom: 1rem;

    line-height: 1.6;
}

.services-section-text h3 {
    margin: 1rem 0 0.5rem;

    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
}

.services-section-text ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.services-section-text li {
    margin-bottom: 0.25rem;
    line-height: 1.5;
}


/* --------------------------------------------------------------------------
   Cancellation Policy
   -------------------------------------------------------------------------- */

.services-cancellation .services-section-header {
    border-top: var(--border-main);
}

.services-cancellation .services-section-text {
    border-bottom: var(--border-main);
}

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */

.faq-panel {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}


/* --------------------------------------------------------------------------
   FAQ Header
   -------------------------------------------------------------------------- */
/*
.faq-panel-header {
    flex: 0 0 auto;
    width: 100%;
}

.faq-heading {
    margin: 0;
    padding: 0;
} */


.faq-panel-header {
    border-bottom: var(--border-main);
    padding: 1rem;
}

.faq-panel-header h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem;
    color: var(--primary-red);
    line-height: 1.1;
}


/* --------------------------------------------------------------------------
   FAQ Content
   -------------------------------------------------------------------------- */

.faq-panel-content {
    flex: 1 1 auto;

    width: 100%;
    min-width: 0;
    min-height: 0;

    box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;
}


/* --------------------------------------------------------------------------
   FAQ Items
   -------------------------------------------------------------------------- */

.faq-item {
    display: block;

    width: 100%;
    min-width: 0;

    box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   Accordion Toggle
   -------------------------------------------------------------------------- */

.faq-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-width: 0;

    box-sizing: border-box;

    margin: 0;
    padding: 0.75rem 1rem;

    background: var(--bg-light);
    color: var(--dark-color);

    border: 0;
    border-top: var(--border-main);

    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;

    cursor: pointer;
}

.faq-toggle:focus-visible {
    outline: 3px solid var(--primary-red);
    outline-offset: -3px;
}

.faq-plus {
    flex-shrink: 0;
    margin-left: 1rem;

    font-size: 1.25rem;
    line-height: 1;
}


/* --------------------------------------------------------------------------
   FAQ Answer
   -------------------------------------------------------------------------- */

.faq-content {
    display: block;

    width: 100%;
    min-width: 0;

    box-sizing: border-box;

    border-top: 1px dotted var(--dark-color);
    border-bottom: var(--border-main);
}

.faq-content[hidden] {
    display: none;
}


/* --------------------------------------------------------------------------
   FAQ Text
   -------------------------------------------------------------------------- */

.faq-text {
    width: 100%;
    min-width: 0;

    box-sizing: border-box;

    padding: 2rem 3rem;
}

.faq-text p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.faq-text p:last-child {
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   No Image
   -------------------------------------------------------------------------- */

.faq-image {
    display: none;
}

/* ==========================================================================
   Insurance
   ========================================================================== */

.insurance-section {
    width: 100%;
    min-height: 0;
}


/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */

.insurance-heading {
    width: 100%;

    box-sizing: border-box;

    border-bottom: var(--border-main);
}

.insurance-heading h1 {
    margin: 0;
    padding: 0.75rem 1rem;

    color: var(--primary-red);

    font-family: inherit;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;

    text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Main Content
   -------------------------------------------------------------------------- */

.insurance-content {
    display: grid;

    grid-template-columns: 1fr 1fr;

    width: 100%;
    min-height: 0;

    box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   Left Column
   -------------------------------------------------------------------------- */

.insurance-form-column {
    min-width: 0;
    min-height: 0;

    padding: 1rem;

    overflow-y: auto;
}


/* --------------------------------------------------------------------------
   Introductory Text
   -------------------------------------------------------------------------- */

.insurance-intro {
    margin: 0 0 1rem;
}

.insurance-intro p {
    margin: 0 0 0.75rem;

    line-height: 1.35;
}

.insurance-intro p:last-child {
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.insurance-form {
    width: 100%;
}

.form-field {
    width: 100%;

    margin-bottom: 0.5rem;
}

.form-field label {
    display: block;

    margin-bottom: 0.2rem;

    font-size: 0.85rem;
    line-height: 1.2;
}

.form-field input {
    display: block;

    width: 100%;

    box-sizing: border-box;

    min-height: 30px;

    padding: 0.35rem 0.5rem;

    background: var(--bg-light);
    color: var(--dark-color);

    border: var(--border-main);

    border-radius: 0;

    font-family: inherit;
    font-size: 0.9rem;
}

.form-field input::placeholder {
    opacity: 0.5;
}


/* --------------------------------------------------------------------------
   Submit
   -------------------------------------------------------------------------- */

.insurance-submit {
    display: block;

    width: 100%;

    min-height: 30px;

    margin: 0;
    padding: 0.4rem 1rem;

    background: var(--primary-red);
    color: var(--bg-light);

    border: 0;
    border-radius: 0;

    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;

    cursor: pointer;
}

.insurance-submit:hover {
    opacity: 0.9;
}

.insurance-submit:focus-visible {
    outline: 3px solid var(--dark-color);
    outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   Image
   -------------------------------------------------------------------------- */

.insurance-image {
    min-width: 0;
    min-height: 0;

    border-left: var(--border-main);

    overflow: hidden;
}

.insurance-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 800px) {

    .insurance-content {
        grid-template-columns: 1fr;
    }

    .insurance-form-column {
        overflow-y: visible;
    }

    .insurance-image {
        border-left: 0;
        border-top: var(--border-main);
    }

    .insurance-image img {
        height: auto;
    }

}