@charset "UTF-8";
/* CSS Document */
/* 1. Global Box Sizing 
   Ensures padding/borders don't increase element width */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margins */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

/* 3. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 4. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 5. Consistent line height and text adjustment */
html {
  -webkit-text-size-adjust: 100%; /* Prevents font size jump on mobile orientation */
  line-height: 1.5;
  font-family: sans-serif;
}

/* 6. Remove list styles (Optional but common) */
ul, ol {
  list-style: none;
  padding: 0;
}

/* --- FONT FACE DECLARATIONS --- */

@font-face {
  font-family: "Circular-Mediumitalic";
  src: url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularmediumitalic/lineto-circular-mediumItalic.eot");
  src: url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularmediumitalic/lineto-circular-mediumItalic.eot?#iefix") format("embedded-opentype"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularmediumitalic/lineto-circular-mediumItalic.woff") format("woff"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularmediumitalic/lineto-circular-mediumItalic.ttf") format("truetype"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularmediumitalic/lineto-circular-mediumitalic.svg#lineto-circular-mediumitalic") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "Circular-Medium";
  src: url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circluarmedium/lineto-circular-medium.eot");
  src: url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circluarmedium/lineto-circular-medium.eot?#iefix") format("embedded-opentype"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circluarmedium/lineto-circular-medium.woff") format("woff"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circluarmedium/lineto-circular-medium.ttf") format("truetype"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circluarmedium/lineto-circular-medium.svg#lineto-circular-medium") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "Circular-Bold";
  src: url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbold/lineto-circular-bold.eot");
  src: url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbold/lineto-circular-bold.eot?#iefix") format("embedded-opentype"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbold/lineto-circular-bold.woff") format("woff"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbold/lineto-circular-bold.ttf") format("truetype"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbold/lineto-circular-bold.svg#lineto-circular-bold") format("svg");
  font-weight: 700;
  font-style: normal; }
@font-face {
  /* have to upload files for this one */
  font-family: "Circular-Bolditalic";
  src: url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbolditalic/lineto-circular-bolditalic.eot");
  src: url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbolditalic/lineto-circular-bolditalic.eot?#iefix") format("embedded-opentype"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbolditalic/lineto-circular-bolditalic.woff") format("woff"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbolditalic/lineto-circular-bolditalic.ttf") format("truetype"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbolditalic/lineto-circular-bolditalic.svg#lineto-circular-bolditalic") format("svg");
  font-weight: 700;
  font-style: normal; }
@font-face {
  font-family: "Circular-Book";
  src: url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbook/lineto-circular-book.eot");
  src: url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbook/lineto-circular-book.eot?#iefix") format("embedded-opentype"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbook/lineto-circular-book.woff") format("woff"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbook/lineto-circular-book.ttf") format("truetype"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbook/lineto-circular-book.svg#lineto-circular-book") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: "Circular-Bookitalic";
  src: url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbookitalic/lineto-circular-bookitalic.eot");
  src: url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbookitalic/lineto-circular-bookitalic.eot?#iefix") format("embedded-opentype"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbookitalic/lineto-circular-bookitalic.woff") format("woff"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbookitalic/lineto-circular-bookitalic.ttf") format("truetype"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/circularbookitalic/lineto-circular-bookitalic.svg#lineto-circular-bookitalic") format("svg");
  font-weight: normal;
  font-style: normal; }

       /* @font-face {
            font-family: 'Circular';
            src: url('https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/Circular-Book.woff2') format('woff2'),
                 url('https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/Circular-Book.woff') format('woff');
            font-weight: 400;
            font-style: normal;
        }
        @font-face {
            font-family: 'Circular';
            src: url('https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/Circular-Bold.woff2') format('woff2'),
                 url('https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/Circular-Bold.woff') format('woff');
            font-weight: 700;
            font-style: normal;
        }
        @font-face {
            font-family: 'Circular';
            src: url('https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/Circular-Medium.woff2') format('woff2'),
                 url('https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/Circular-Medium.woff') format('woff');
            font-weight: 500;
            font-style: normal;
        }


	     @font-face {
            font-family: 'Circular';
            src: url('https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/Circular-Medium.woff2') format('woff2'),
                 url('https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/Circular-Medium.woff') format('woff');
            font-weight: 600;
            font-style: normal;
        } */
/* Upload later */
@font-face {
  font-family: "MinionPro-Bold";
  src: local("MinionPro-Bold"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/MinionPro/MinionPro-Bold.otf") format("opentype"); }
@font-face {
  font-family: "MinionPro-Medium";
  src: local("MinionPro-Medium"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/minionpro/MinionPro-Medium.otf") format("opentype"); }
@font-face {
  font-family: "MinionPro-Regular";
  src: local("MinionPro-Regular"), url("https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/MinionPro/MinionPro-Regular.otf") format("opentype"); }
/* font sizes */
   /*     @font-face {
            font-family: 'Minion Pro';
            src: url('https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/MinionPro-Regular.woff2') format('woff2'),
                 url('https://bbis.advancement.brown.edu/BBPhenix/Custom/Style/Site/fonts/MinionPro-Regular.woff') format('woff');
            font-weight: 400;
            font-style: normal;
        } */

        :root {
            /* Custom Color Palette */
            --brown: #513628;
            --dark-red: #C00404;
            --bright-red: #EB0505;
            --grey: #97A4AE;
            --yellow: #FFc82d;
            --navy: #0F406A;
            --black: #111;
            --white: #fff;
            --gray-bg: #E0E0E0;
			--crawl-speed: 50s; 
            --icon-size: 100px; 
            
            /* Font Mapping */
            --font-sans: 'Circular-Medium', sans-serif;
            --font-serif: 'MinionPro-Regular', serif;
            --font-serif-bold: 'MinionPro-Bold', serif;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: var(--font-sans);
            background-color: var(--white);
            color: var(--black);
        }

p {
  font-size: 1rem;
  line-height: 1.4em;
  font-family: var(--font-serif);
  color: #000;
  text-align: left; }

a, a:link, a:visited {
  color: var(--bright-red);
  text-decoration: none;
  cursor: pointer;
  transition: border 0.3s ease 0s;
  font-weight: bold;
  font-family: var(--font-sans); }

a:focus, a:active, a:hover {
  color: var(--bright-red);
  text-decoration: none; }

/* headers */
h1 {
  font-family: var(--font-sans);
  color: var(--bright-red);
  font-size: 2.8rem;
  margin: 0 0 10px 0;
  font-weight: 700;
  text-align: left; }

h2 {
  font-family: var(--font-sans);
  color: var(--bright-red);
  font-size: 2.1rem;
  line-height: 2.5rem;
  margin: 0 0 20px 0;
  font-weight: 700;
  text-align: left; }

h3 {
  font-family: var(--font-sans);
  text-align: left;
  font-weight: 700;
  color: var(--bright-red);
  font-size: 1.5rem; }

h4 {
  font-family: var(--font-sans);
  margin: 0 0 10px 0;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0;
  color: var(--bright-red);
  text-transform: initial; }

h5 {
  color: var(--bright-red);
  text-transform: uppercase;
  font-size: 18px;
  font-family: var(--font-sans);
  padding: 0;
  margin: 0 0 10px 0; }

h6 {
  font-family: var(--font-sans);
  color: var(--white);
  margin: 15px 0;
  font-size: 13px;
  font-weight: bold; }

p {
 color: var(--brown);
 font-family: var(--font-serif);
 font-size: 1.2rem; }

/* get rid of the word "high" in the geography chart*/
.accordion div#chart2 span#chartdonation2 tspan {
  visibility: hidden; }

	    header {
			width: 100%;
		}

		header div.crest-flag {
			display: block;
			width: 72px;
			height: 80px;
			background-color: var(--brown);
			text-align: center;
			position: absolute;
			z-index: 5000;
			padding: 10px;
			margin-left: 2.5rem;
		}
		 header span.brownCrest_graphic {
			display: block;
			z-index: 5001; 
		}

		 header #splash {
			padding: 120px 2.5rem 30px;
			background-position: top center;
			background-size: auto;
			background-repeat: no-repeat;
			height: 100%;
			position: relative;
			background-color: #fff;
		}
        .progress-wrapper {
                max-width: 1200px;
                margin: 1rem auto;
                padding: 2rem 2.5rem 1rem;
            }
        .intro-content p.intro {
                font-size: 1.4rem;
                margin-bottom: 0.4rem;
             }

        .intro-totals .donor-dollar dl.dollars dt, main div.intro-totals div.donor-dollar dl.donors dt {
            font-family: var(--font-serif);
            font-size: 1.7rem;
            color: Var(--brown);
        }

        .intro-totals {
            margin-top:2rem;
        }

        main div.intro-totals div.donor-dollar dl.dollars dd, main div.intro-totals div.donor-dollar dl.donors dd {
    font-family: var(--font-sans);
    margin-inline-start: 0;
    margin:0 0 20px;
    font-size: 3rem;
    font-weight: 900;
    color: var(--bright-red);
}

/* DESKTOP STYLES */
        @media screen and (min-width: 1000px) {
            header #splash {
			padding: 110px 2.5rem;
			background-position: bottom center;
			background-size: auto;
			background-repeat: no-repeat;
			height: 100%;
			position: relative;
			background-image: url(https://advancement.brown.edu/pifd2026/img/splash-bg2.png);
            }
            .progress-leaderboard {
                margin: 0 auto;
            }

             .progress-wrapper {
                display:flex;
             }
            
            .intro-content {
                width: 65%;
                padding-right: 5rem;
            }

            .intro-content p.intro {
                font-size: 1.4rem;
                margin-bottom: 0.4rem;
             }
            .intro-totals {
                width: 30%;
                font-size: 2rem;
            }
            .intro-totals { 
                margin: 1rem; }
        }
        /* END DESKTOP STYLES */

		header #splash .splash-wrapper {
			width: 100%;
			max-width: 1100px;
			margin: 0 auto;
		}

		header #splash a.give-now, header #splash a.give-now:link, header #splash a.give-now:visited {
			display: inline-block !important;
			background-color: var(--yellow);
            background-image: url(https://advancement.brown.edu/pifd2026/img/challenge-bg-heart.svg);
            background-repeat: no-repeat;
            background-size: 40px 40px;
            background-position: 12px 8px;
			color: var(--brown);
			padding: 16px 20px 16px 60px;
			text-decoration: none;
			transition: background 0.3s ease 0s;
			font-size: 1.5rem;
			font-weight: bold;
			/* box-shadow: 2px 2px 5px #58585a; */
			font-family: var(--font-sans);
			border-radius: 8px;
			margin-top: 10px;
			border: 2px solid var(--brown); 
		 }

		 header #splash a.give-now:focus, header #splash a.give-now:active, header #splash a.give-now:hover {
			background-color: var(--brown);
			color: var(--yellow);
   		 }

		 header #splash h1 {
			color: transparent;
			vertical-align: top;
			font-style: normal;
			text-align: left;
			font-size: 0;
			padding: 0;
			margin: 0 0 20px 0;
			background-image: url(https://advancement.brown.edu/pifd2026/img/pifd26-logo.svg);
			background-repeat: no-repeat;
			background-size: fit;
			background-position: top left;
			width: 100%;
			height: 200px; 
		 }

         /* Header / Navbar Background */
        .navbar {
            background-color: var(--brown);
            color: var(--white);
            height: var(--nav-height);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Mobile: icon to right. Desktop: handled by nav-menu centering */
            position: relative;
            z-index: 1000;
            padding: 0 40px;
            box-sizing: border-box;
        }

        /* Hide Checkbox logic */
        #menu-toggle {
            display: none;
        }

        /* --- MOBILE STYLES (Hamburger) --- */
        .hamburger-label {
            cursor: pointer;
            padding: 10px;
            z-index: 1100;
            display: flex; /* Shown by default on small screens */
            flex-direction: column;
            gap: 6px;
        }

        .bar {
            width: 30px;
            height: 3px;
            background-color: var(--white);
            border-radius: 2px;
            transition: all 0.3s ease-in-out;
        }

        /* Menu Overlay (The Drawer) */
        .nav-menu {
            position: fixed;
            top: 0;
            right: -100%; 
            width: 300px;
            height: 100vh;
            background-color: var(--brown);
            display: flex;
            flex-direction: column;
            padding-top: 100px;
            transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
            box-shadow: -5px 0 15px rgba(0,0,0,0.2);
            z-index: 1050;
        }

        .nav-menu a, a:visited, a:active {
            color: var(--white),
        }

        .nav-item {
            color: var(--white);
            text-decoration: none;
            text-transform: uppercase;
            font-weight: 700;
            font-size: 1rem;
            padding: 20px 25px;
            letter-spacing: 0.05em;
            transition: color 0.2s ease;
            position: relative;
            display: inline-block;
            white-space: nowrap;
        }

        /* Hover Styles: Yellow text + Underline */
        .nav-item:hover {
            color: var(--yellow);
        }

        .nav-item::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 12px;
            left: 25px;
            background-color: var(--yellow);
            transition: width 0.3s ease;
        }

        .nav-item:hover::after {
            width: calc(100% - 50px);
        }

        /* Mobile Animation */
        #menu-toggle:checked ~ .nav-menu {
            right: 0;
        }

        #menu-toggle:checked + .hamburger-label .bar:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
        }
        #menu-toggle:checked + .hamburger-label .bar:nth-child(2) {
            opacity: 0;
        }
        #menu-toggle:checked + .hamburger-label .bar:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
        }

        /* --- DESKTOP STYLES (Horizontal Bar) --- */
        @media (min-width: 769px) {
            .navbar {
                justify-content: center; /* Center the container content */
                padding: 8px 50px;
            }

            .hamburger-label {
                display: none; /* Hide hamburger on desktop */
            }

            .nav-menu {
                position: static; /* Remove fixed drawer behavior */
                width: auto;
                height: auto;
                flex-direction: row; /* Layout links horizontally */
                justify-content: center; /* Center links within the flex container */
                padding-top: 0;
                background-color: transparent;
                box-shadow: none;
                right: auto;
                transition: none;
            }

            .nav-item {
                font-size: 1.1rem; /* Slightly smaller for horizontal fit */
                padding: 10px 26px;
            }

            .nav-item::after {
                bottom: 5px;
                left: 15px;
            }

            .nav-item:hover::after {
                width: calc(100% - 30px);
            }
        }

        /* Accessibility: Focus indicator */
        .nav-item:focus-visible {
            outline: 2px solid var(--yellow);
            outline-offset: -2px;
        }

        @media (max-width: 480px) {
            .nav-menu {
                width: 100%;
            }
        }

/* YELLOW SECTION */
        .hero-wrapper {
            width: 100%;
            background-color: var(--white);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .semicircle-container {
            position: relative;
            width: 100%;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
            /* Mobile default: Auto height based on content */
            min-height: 400px;
        }

        .semicircle-bg {
            position: relative;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: var(--yellow);
            z-index: 1;
            /* Mobile default: Solid background (no radius) */
            border-radius: 0;
        }

        .semicircle-container .content h2 {
            font-family: var(--font-serif-bold);
            color: var(--brown);
            margin-top: 1rem;
            text-align: center;
        }

        /* --- CARD STYLING --- */
        .card-wrapper {
            position: relative;
            width: 100%;
            max-width: 450px; /* Narrower width */
            margin: 60px auto 0;
            z-index: 10;
        }

        .card {
            background-color: var(--yellow);
            border: 2px solid var(--brown);
            border-radius: 12px;
            padding: 60px 25px 30px 25px;
            box-sizing: border-box;
        }

        .circular-icon {
            position: absolute;
            width: var(--icon-size);
            height: var(--icon-size);
            background-color: var(--white);
            border: 2px solid var(--brown);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 11;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .circular-icon img {
            width: 50%;
            height: auto;
        }

        .card-title {
            font-family: var(--font-headline);
            color: var(--brown);
            font-size: 1.5rem;
            line-height: 1.8rem;
            margin: 0 0 12px 0;
            text-align: left;
        }

        .card-text {
            color: var(--brown);
            font-size: 1.2rem;
            line-height: 1.5;
            margin-bottom: 0;
            text-align: left;
        }

        a p.card-text {
          text-decoration: underline;
          padding-top:1rem;
        }

        a:hover p.card-text {
          color: var(--dark-red);
        }

        a.card-link {
              color: var(--white);
              background-color: var(--bright-red);
              padding:12px 20px;
              border-radius: 12px;
              border: solid 2px var(--brown);
              text-align:left;
              display: inline-block;
              margin: 15px 0;
            }

            a.card-link:hover {
              background-color: var(--brown);
              text-decoration:underline;
            }
        /* -- BBIS SURVEY FORM STYLES -- */
        .BBFormTitle {
        border-bottom: none !important;
        color: var(--brown) !important;
        font-weight: normal !important;
        font-family: var(--font-sans) !important;
        text-align: left !important;
        }

        .taRight {
          display: none;
        }

        .SurveyTitle {
          font-weight: 700 !important;
        font-family: var(--font-sans) !important;
        text-align: left !important;
        font-size: 1.2rem;
        }

        .SurveyAnswerRequiredMessage {
        font-weight: normal;
        font-size: 1rem;
        color: var(--brown);
        }

        .SurveyErrorMessage {
        color: var(--dark-red);
        font-size: .8rem;
        font-weight: bold;
        font-family: var(--font-sans);
       }

       .SurveyQuestion {
       font-size: 1rem;
       font-family: var(--font-sans);
       color: var(--brown);
      }
        .SurveyQuestionSequence {
          display: none;
        }
.SurveyButtonsRow {
  align:center;
}
  .SurveyButtonsRow button, html .SurveyButtonsRow input[type="button"], .SurveyButtonsRow input[type="reset"], .SurveyButtonsRow input[type="submit"] {
    appearance: unset;
    cursor: pointer;
    display: block;
    background-color: var(--brown);
    color: var(--white);
    padding: 15px;
    border-radius: 14px;
    width: 90%;
    margin: 0 5%;
    border:none;
}

.SurveyButtonsRow button:hover, html .SurveyButtonsRow input[type="button"]:hover, .SurveyButtonsRow input[type="reset"]:hover, .SurveyButtonsRow input[type="submit"]:hover {
    text-decoration:underline;
}
.SurveyButton {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
}

.BBFormTextArea
 {
    font-family: var(font-sans);
    font-size: .8rem;
}

/*
.SurveyOpenEndedEssayTextArea:nth-of-type(1) {
    width: 250px;
    height: 20px;
} 
    */
#PC11667_rptQuestions_mySurveyQuestion_0_20_1_0 {
    width: 250px;
    height: 22px;
}
#PC11667_rptQuestions_mySurveyQuestion_1_21_2_1 {
    width: 250px;
    height: 22px;
} 
/*
.SurveyOpenEndedEssayTextArea:last-of-type {
    width: 250px;
    height: 60px;
} */

.BBFormValidatorSummary {
      background-color: transparent;
}

.SurveyCompleteMessage {
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-sans);
    text-align: left;
}

textarea {
  border:none;
}



        /* --- FORM STYLES --- */
        .form-group {
            margin-bottom: 12px;
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            font-family: var(--font-headline);
            font-size: 0.85rem;
            color: var(--brown);
            text-transform: lowercase;
            margin-bottom: 4px;
            font-weight: 700;
        }

        .form-group input, 
        .form-group textarea {
            padding: 10px;
            border: 1px solid rgba(81, 54, 40, 0.2);
            border-radius: 6px;
            font-family: var(--font-body);
            font-size: 0.95rem;
        }

        .submit-btn {
            background-color: var(--brown);
            color: var(--white);
            border: none;
            padding: 12px;
            width: 100%;
            font-family: var(--font-headline);
            font-weight: 700;
            text-transform: uppercase;
            border-radius: 6px;
            cursor: pointer;
            letter-spacing: 1px;
            font-size: 0.9rem;
        }

 


        .lower-section {
            text-align: center;
            background-color: var(--brown);
            color: var(--white);
        }

        .lower-content {
            max-width: 750px;
            margin: 0 auto;
            padding: 20px;
        }

        .lower-section h2 {
            font-family: var(--font-serif-bold);
            color: var(--white);
            text-align: left;
            margin: 0 auto;
            padding-left:120px;
            padding-top:20px;
            padding-bottom:20px;
            background-image: url(https://advancement.brown.edu/pifd2026/img/brown-pennants.svg);
            background-repeat: no-repeat;
            background-size: 110px;
            display:block;

        }

        /* Content layer */
        .content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: var(--brown);
            max-width: 750px;
            padding: 20px;
            margin-top: 2%; 
        }

/* QUOTE CRAWL */
        /* The Container holding the button and the crawl */
        .quote-crawl-container {
            width: 100%;
            background-color: var(--brown);
            display: flex;
            align-items: center;
            user-select: none;
            position: relative;
            -webkit-tap-highlight-color: transparent;
            outline: none;
        }

        /* Accessibility: Visual focus indicator for keyboard users */
        .quote-crawl-container:focus-visible {
            outline: 3px solid var(--yellow);
            outline-offset: -3px;
        }

        /* The Moving Bar Wrapper */
        .quote-crawl-wrapper {
            flex-grow: 1;
            overflow: hidden;
            white-space: nowrap;
            padding: 22px 0;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        /* Integrated Button Style */
        .play-pause-btn {
            background-color: rgba(0, 0, 0, 0.2);
            border: none;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--yellow);
            width: 60px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0; 
            transition: background-color 0.2s ease;
            z-index: 10;
        }

        .play-pause-btn:hover {
            background-color: rgba(0, 0, 0, 0.4);
        }

        .play-pause-btn svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

        /* The track that actually moves */
        .quote-track {
            display: inline-flex;
            align-items: center;
            animation: scroll var(--crawl-speed) linear infinite;
        }

        /* Pause States */
        .quote-crawl-container:hover .quote-track {
            animation-play-state: paused;
        }

        .paused .quote-track {
            animation-play-state: paused !important;
        }

        .quote-item {
            display: inline-flex;
            align-items: center;
            padding: 0 40px;
        }

        .quote-text {
            color: var(--white);
            font-family: 'Circular', sans-serif;
            font-weight: 700;
            font-size: 1.35rem;
            letter-spacing: -0.01em;
        }

        .quote-attribution {
            color: var(--yellow);
            font-family: 'Minion Pro', serif;
            font-style: italic;
            font-size: 1.25rem;
            margin-left: 12px;
            white-space: nowrap; 
        }

        .quote-spacer {
            color: var(--yellow);
            font-family: 'Circular', sans-serif;
            font-weight: 700;
            font-size: 1.4rem;
            padding: 0 20px;
            letter-spacing: 2px;
        }

        /* Toggle Icon Visibility */
        .play-icon { display: none; }
        .paused .play-icon { display: block; }
        .paused .pause-icon { display: none; }

        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* CHALLENGES SECTION */
    .challenges {
        padding: 50px 40px;
        max-width:1200px;
        margin:0 auto;
     }

   .challenges h2, .faqs-wrapper h2 {
      color: var(--brown);
      font-family: var(--font-serif-bold);
      text-align:center;
    }
   .challenges .challenges-wrapper {  
      max-width: 900px;
      margin: 50px auto 30px;
    }

    .challenges .challenges-wrapper:nth-of-type(2) {  
      margin:10px auto;
    }

    .other-chall-wrapper { 
        position: relative;
        width: 100%;
        margin: 60px auto 0;
        padding-top:10px;
        z-index: 10;
    }

    .challenge-icon {
        position: absolute;
        width: var(--icon-size);
        height: var(--icon-size);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 11;
        top: 0;
        left: 12%;
        transform: translate(-50%, -50%);
        }

    .challenge-icon img {
        width: 50%;
        height: auto;
        }

    .other-chall { 
      border: 2px solid var(--brown);
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 20px;
    }

    .other-chall p {
	   font-family: "MinionPro-Regular", Georgia, serif;
    }

    .other-chall h3 {
	    font-size: 1.4rem;
        line-height: 1.9rem;
	    margin:10px 0 20px;
    }

    .other-chall a.otherchall-link {
      display: inline-block;
      margin:15px 0 0;
      color: var(--brown);
      background-color: var(--yellow);
      padding: 10px 18px;
      border-radius: 14px;
      border: 2px solid var(--brown);
    }

    .other-chall a.otherchall-link:hover {
      background-color: var(--brown);
      color: var(--yellow);
      text-decoration: underline;
    }

     /* ----------------------
        Progress Bar CSS Styling
        ----------------------
        */


        .tracker-label {
            font-family: var(--font-headline);
            color: var(--brown);
            margin-bottom: 15px;
            font-size: 1.1rem;
            display: none;
            justify-content: space-between;
            align-items: right;
        }
                /* --- PROGRESS BAR STYLES --- */
        .progress-wrapper2 {
            width: 100%;
            position: relative;
        }

        .progress-container {
            width: 100%;
            height: 34px;
            background-color: var(--gray-bg);
            border-radius: 14px;
            position: relative;
            overflow: hidden;
        }

        /* The Bright Red Base (0-100%) */
        .progress-bar-primary {
            height: 100%;
            width: 0%;
            /* transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); */
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            background-color: var(--bright-red);
            border-radius: 14px;
        }

        /* The Dark Red Overlay (100-200%) */
        .progress-bar-overlay {
            height: 100%;
            width: 0%;
            /* transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); */
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
            background-color: var(--dark-red);
            border-radius: 14px;
        }

        /* Layer: Text shown on the gray background */
        .progress-text-base {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-sans);
            font-weight: 700;
            font-size: .75rem;
            color: var(--bright-red);
            z-index: 1;
            pointer-events: none;
        }

        /* Layer: White text shown inside the filled areas */
        .progress-text-fill {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-headline);
            font-weight: 700;
            font-size: .75rem;
            color: var(--white);
            z-index: 10;
            pointer-events: none;
            /* Clipping is managed via JS based on the primary bar width */
            clip-path: inset(0 100% 0 0); 
           /* transition: clip-path 0s cubic-bezier(0.4, 0, 0.2, 1); */
        }
    
        .status-badge {
            display: inline-block;
            margin-top: 20px;
            padding: 8px 16px;
            border-radius: 20px;
            font-family: var(--font-sans);
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            background: #fff;
            color: var(--brown);
            transition: all 0.3s ease;
        }

        /* BROWN SECTION */
        .video-wrapper {
            width: 100%;
            background-color: var(--white);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .semicircle-container {
            position: relative;
            width: 100%;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
            /* Mobile default: Auto height based on content */
            min-height: 400px;
        }

        .semicircle-bg-brown {
            position: relative;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: var(--brown);
            z-index: 1;
            /* Mobile default: Solid background (no radius) */
            border-radius: 0;
        }

        .semicircle-container .semicircle-bg-brown .content h2 {
            font-family: var(--font-serif-bold);
            color: var(--yellow);
            margin-top: 1rem;
            text-align: center;
        }

        .semicircle-container .semicircle-bg-brown .content p {
            color: var(--white);
            text-align: center;
            display: block;
            font-size: 1.2rem;
            max-width: 900px;
            margin: 0 auto;
        }
        .three-videos {
            display: block;
            width: 100%;
            margin: 0 auto;
            text-align: center;
        }
        .semicircle-container .semicircle-bg-brown .vert-video {
            width:281px;
            text-align: center;
            margin: 20px auto 10px;
        }

/* TILES IHBD COPY */

main .tile-region {
    width: 100%;
    padding: 50px 40px;
    background-color: var(--white);
    text-align: center; }

main .tile-region h2 {
	color: var(--brown);
    text-align: center;
    font-family: var(--font-serif-bold);
}

main .tile-wrapper {
      margin: 20px auto;
      display: flex;
      flex-direction: row;
      align-content: center;
      justify-content: center;
      flex-wrap: wrap;
      gap:20px;
      width: 100%;
      max-width: 1100px; }

.back-wrapper {
    background-color: var(--white) !important;
}

main .tile-wrapper .tile .back-header h2 {
	margin:0 !important;
	padding: 20px 10px 10px 10px !important;
	color: var(--bright-red) !important;
	text-shadow:none;
  font-size: 1rem;
}

main .tile-wrapper .tile .backtext p {
	color: var(--brown);
	display:block;
	padding: 20px;
	text-align: left;
    font-size: 15px;
    font-family: var(--font-serif);
    margin: 0 auto;
    padding-top: 5px;
    line-height: normal;
}

main .tile {
    width: 100%;
	min-width:190px;
    margin-top: 0;
    margin-bottom: 20px;
    vertical-align: top;
    color: var(--brown);
    padding: 0;
    background-color: var(--white);
    background-repeat: no-repeat;
    /* background-position: 40px 20px;
   background-size: 18%; */
	border-radius: 14px;
    border: 2px solid var(--brown);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center; }

main .tile-wrapper .tile {
	min-height:350px;
	justify-content: space-between;
}

main .tile:last-of-type {
      margin-bottom: 0; }

main .tile h2 {
	font-family: var(--font-sans);
    color: var(--brown);
	text-transform:none;
    font-size: 15px;
    line-height:18px;
    margin: 0;
    text-align: center;
    margin-top: 0;
    padding: 0 10px;
}

main .tile-front .tile .bg-image h2 {
	font-family: var(--font-sans);
    color: var(--brown);
	text-transform:none;
    font-size: 1rem;
    line-height:1.2rem;
    text-align: center;
    margin-top: 104px;
	margin-bottom:46px;
    padding: 10px 5px;
    display: block;
}

 main .tile h3 {
	 color:#ffffff;
	 text-transform:uppercase;
	 text-align:center;
	 font-size:12px;
	 font-family: var(--font-sans);
	 margin:0;
	 padding-top:8px
}

 main .tile .baf-hide h3.baf-button {
	position:absolute;
    width:300px;
    bottom:10px;
    right:25%;
    left:50%;
    margin-left:-150px;
}

main .tile h3:hover {
	color: var(--bright-red);
}

main .tile p {
	 color:#ffffff;
	 text-align:left;
	 font-size:15px;
	 font-family: "MinionPro-Regular", Georgia, serif;
	 margin:0 auto;
	 padding-top:5px;
	 line-height:normal;
}

main .tile .tile-inner-wrapper {
      padding-top: 5px;
      position: static; }

main .tile dl.update-box {
		margin-top:5px;
        margin-bottom: 18px;
      text-align: center;
    }

main .tile dl.update-box:first-of-type {
        margin-top: 5px; }

main .tile dl.update-box dt {
        font-family:var(--font-serif);
        color: var(--brown);
        display: block;
        font-size: 17px; }

main .tile dl.update-box dd {
        font-family: var(--font-sans);
        color: var(--bright-red);
        font-weight: bold;
        margin-inline-start: 0;
        margin: 0;
        display: inline-block;
        font-size: 20px; }

main .tile a, main .tile a:link, main .tile a:visited {
      font-weight: bold;
      text-decoration: none;
      padding: 10px 0;
      transition: background 0.3s ease 0s;
      margin: 10px 0 0 0;
      width: 100%;
      position: relative;
      display: block;
      background-color: var(--yellow);
      color: var(--brown);
      font-family: var(--font-sans);
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
      border: 0 !important;
      text-align: center; 
	  font-size: 15px;
}

main .tile a:focus, main .tile a:active, main .tile a:hover {
      background-color: var(--brown);
      color: var(--yellow);
      border: 0 !important; }

.baf-top {
	  display:block;
	  position:inherit;
	  height:100px;
	  color: var(--brown);
	  border-top-left-radius:12px;
	  border-top-right-radius:12px;
	  cursor: pointer;
	}

 .baf-overlay {
  	height:200px;
   /* background: -moz-linear-gradient(top, rgba(0,0,0,0) 40%, rgba(0,0,0,.8) 100%); 
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 40%, rgba(0,0,0,.8) 100%); 
 background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.8) 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); */
position:relative;
	text-align: center;
	width:100%;
}

.baf-overlay .bottom {
	position: absolute;
    bottom: 10px;
	text-align: center;
	width:100%;
	padding: 0 12px;
}
  /* Hidden tiles code 2023 */
  .hidden > div.tile-back {
    display: none;
  }

  .visible > div.tile-back {
    display: block;
  }

  .show > div.tile-front {
    display: block;
  }

  .hide > div.tile-front {
    display: none;
  }

/* Hidden tiles code for half-flip
.hidden>div.baf-hide {
	display:none;
}

.visible>div.baf-hide {
	display:block;
}

.show>div.baf-visible {
	display:block;
}

.hide>div.baf-visible {
	display:none;
} */

.baf-hide {
	position:relative;
	top:0;
	width:100%;
	background-color: rgba(0,0,0,.7);
	height:200px;
	color:#ffffff;
	border-top-left-radius:12px;
	border-top-right-radius:12px;
	padding-top:14px;
	padding-right:12px;
	padding-left:12px;
}

main .tile .baf-hide h2 {
	padding-bottom: 5px;
	margin-top:0
}

.baf-hide p {
	max-width:400px;
}

/* Challenge Links */

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    appearance: button;
    cursor: pointer;
}
.challenge-link-wrapper {
    display: block;
    align-self: center;
	margin-top:56px;
}

.challenge-link {
    color:var(--brown);
	 text-transform:uppercase;
	 text-align:center;
     text-decoration: underline;
	 font-size:11px;
	 font-family: var(--font-sans);
	 margin:0;
	 padding-top:8px;
	background: none;
	border:none;
}

.challenge-link:hover {
 color: var(--bright-red) ;
}

.challenge-close {
	color:var(--bright-red);
	text-transform:uppercase;
	display:block;
	margin: 0 auto;
	text-align:center !important;
	font-size:12px;
	font-family: "Circular-Bold", Arial, Helvetica, serif;
	padding-top:8px;
	background: none;
	border:none;
}

.challenge-close:hover {
color: var(--brown);
}



/* Tile background images */

 main .tile.baf .bg-image {
     background-image: url("https://advancement.brown.edu/pifd2026/img/brown-fund.jpg");
	 background-position:top right;
	 background-size:cover;
	 border-top-left-radius: 12px;
	 border-top-right-radius: 12px;
}
main .tile.emergency-support .bg-image {
   background-image: url("https://advancement.brown.edu/pifd2026/img/emergency-support.jpg");
	 background-position:center;
	 background-size:cover;
	 border-top-left-radius: 12px;
	 border-top-right-radius: 12px;
}
 main .tile.engineering .bg-image {
     background-image: url("https://advancement.brown.edu/pifd2023/img/engineering-student.jpg");
	 background-position:center;
	 background-size:cover;
	 border-top-left-radius: 12px;
	 border-top-right-radius: 12px;
}
  main .tile.sph .bg-image {
     background-image: url("https://advancement.brown.edu/pifd2026/img/sph-tile.jpg");
	 background-position:center;
	 background-size:cover;
	 border-top-left-radius: 12px;
	 border-top-right-radius: 12px;
}
  main .tile.bmaf .bg-image {
     background-image: url("https://advancement.brown.edu/pifd2026/img/bmaf-whitecoat.jpg");
	 background-position:center;
	 background-size:cover;
	 border-top-left-radius: 12px;
	 border-top-right-radius: 12px;
}
  main .tile.campus-sus .bg-image {
     background-image: url("https://advancement.brown.edu/iheartbrown2023/img/baf-bg-sus.jpg");
	 background-position:center;
	 background-size:cover;
	 border-top-left-radius: 12px;
	 border-top-right-radius: 12px;
}
  main .tile.dei .bg-image {
     background-image: url("https://advancement.brown.edu/pifd2023/img/dei-gradsunday.jpg");
	 background-position:center;
	 background-size:cover;
	 border-top-left-radius: 12px;
	 border-top-right-radius: 12px;
}
  main .tile.busf .bg-image {
     background-image: url("https://advancement.brown.edu/pifd2023/img/busf-bruno.jpg");
	 background-position:center;
	 background-size:cover;
	 border-top-left-radius: 12px;
	 border-top-right-radius: 12px;
}
  main .tile.bc .bg-image {
     background-image: url("https://advancement.brown.edu/pifd2023/img/brownconnect-fair.jpg");
	 background-position:center;
	 background-size:cover;
	 border-top-left-radius: 12px;
	 border-top-right-radius: 12px;
}
  main .tile.ipc .bg-image {
     background-image: url("https://advancement.brown.edu/iheartbrown2023/img/baf-bg-ipc.jpg");
	 background-position:top left;
	 background-size:cover;
	 border-top-left-radius: 12px;
	 border-top-right-radius: 12px;
}

  main .tile.bulac .bg-image {
     background-image: url("https://advancement.brown.edu/iheartbrown2023/img/baf-bg-bulac.jpg");
	 background-position:top left;
	 background-size:cover;
	 border-top-left-radius: 12px;
	 border-top-right-radius: 12px;
}

  main .tile.international .bg-image {
     background-image: url("https://advancement.brown.edu/iheartbrown2023/img/baf-bg-international.jpg");
	 background-position: top center;
	 background-size:cover;
	 border-top-left-radius: 12px;
	 border-top-right-radius: 12px;
}

  main .tile.humanities .bg-image {
     background-image: url("https://advancement.brown.edu/pifd2026/img/humanities.jpg");
	 background-position: top center;
	 background-size:cover;
	 border-top-left-radius: 12px;
	 border-top-right-radius: 12px;
}

  main .tile.watson .bg-image {
     background-image: url("https://advancement.brown.edu/pifd2026/img/watson.jpg");
	 background-position: top center;
	 background-size:cover;
	 border-top-left-radius: 12px;
	 border-top-right-radius: 12px;
}

@media only screen and (min-width: 400px) {
	main .tile-wrapper .tile .bg-image {
    width: 100%;
    margin: 0 auto;
    height: 100px;
}

}
@media only screen and (min-width: 200px) {

main .tile-wrapper .tile {
    /* width: 48%; */
	width: 190px;
	min-height:350px;
	justify-content: space-between;
    background-position: 20px 20px;
    background-size: 22%; 
	 margin-bottom: 30px;}
	
main .tile-wrapper .tile .bg-image {
    width: 100%;
    margin: 0 auto;
    height: 200px;
}
	
main .tile-wrapper .tile-front .tile .bg-image {
    width: 100%;
    margin: 0 auto;
    height: 108px;
	display: block;
    /* flex-direction: row;
    flex-wrap: wrap;
    align-self: center;
	justify-content: space-around; */
}
	
}
 /* -- ACCORDION STYLES -- */

main .faqs {
    padding-top: 50px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom:50px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center; 
	background-color: var(--white);
}
main .faqs .faqs-wrapper {
    width: 100%;
    max-width: 900px; }

main .faqs .accordion-container {
    width: 100%;
    padding: 0; 
    display:flex;}

main .faqs .accordion-container:first-of-type {
    margin-top: 20px; }
      
main .faqs .accordion-container .accordion-trigger {
    border-radius: 10px;
    background-color: var(--white);
    cursor: pointer;
    width: 100%;
    text-align: left;
    border: 2px solid var(--brown);
    outline: none;
    transition: 0.4s;
    font-weight: bold;
    font-size: 1.1rem;
    font-family: var(--font-sans);
    margin-bottom: 3px;
    color: var(--bright-red); 
    display:flex;
    align-items: center;
    }
       
main .faqs .accordion-container .accordion-trigger:before {
    content: '+';
    display: block;
    align-items: center;
    font-size: 20px;
    margin: -1px 10px -1px -6px;
    padding: 12px 0 14px 18px;
    border-radius: 8px;
    background-color: var(--yellow);
    min-width: 46px;
    color: var(--brown);
}

main .faqs .accordion-container .accordion-trigger:hover {
    color: var(--brown);
 }

main .faqs .accordion-container .active {
    color: var(--bright-red) }

main .faqs .accordion-container .active:before {
    content: "–";
    display: block;
 }

 main .faqs .accordion-container .accordion-panel {
    border-radius: 10px;
    margin: -1px 0 10px 0;
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    text-align: left; }

  .accordion-panel:target {
      display:block;
    }

main .faqs .accordion-container .accordion-panel p {
          padding: 10px 10px 0 10px;
         }

        /*  main .faqs .accordion-container h3 {
        color: #EB0505;
        padding-left: 20px;
        text-transform: initial; } */
main .faqs .accordion-container .accordion-panel p a {
  text-decoration:underline;
  font-family: var(--font-serif)
}

main .faqs .accordion-container .accordion-panel ul, li {
  font-family: var(--font-serif);
  list-style-type: disc;
  font-size: 1.2rem;
  margin:10px 30px;
  color: var(--brown);
}
/* SOCIAL */

main div.social {
    padding: 30px 40px; 
	background-color:var(--brown);
  }

    main div.social img.pifd-footer {
      width: 200px;
      height: 100px;
      margin: 0 auto;
    }


ul.social {
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    min-width: 120px;
    max-width: 135px;
}

 ul.social li {
    display: block;
    min-width: 45px;
    height: 45px;
    list-style-type: none;
    padding-right: 15px; }

main div.social ul.social li:last-of-type {
    padding-right: 0; 
   display: block;}

main div.social ul.social li img {
    width: 30px;
    height: 30px;
   display: block; }

main div.social .crt-widget {
    width: 100%;
    max-width: 1200px;
    max-height: 600px;
    overflow-y: scroll; }

main div.social .crt-widget .crt-post-text a {
    color: var(--bright-red);
    text-decoration: underline;
    cursor: pointer; }

main div.social .crt-widget .crt-post-text a:hover {
    color: var(--bright-red);
    text-decoration: none; }

main .general-content {
display: flex;
justify-content: center;
align-content: center; }

main .general-content .general-content-wrapper {
    max-width: 1200px;
    width: 100%; }

main .general-content .chart {
    border-radius: 10px;
    background-color: #f1f1f1;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    font-weight: bold;
    font-size: 15px;
    line-height: 20px;
    font-family: var(--font-sans);
    margin-bottom: 3px;
    color: var(--bright-red);
      /* Top 3 styling */
      /* Leaderboard Gentle Formatting */ }

    main .general-content .chart:first-of-type {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center; }
    
        main .general-content .chart:first-of-type h3 {
          flex-basis: 100%; }
      main .general-content .chart h3 {
        text-align: left;
        font-size: 15px;
        color: #EB0505;
        text-transform: uppercase; }
      main .general-content .chart p {
        text-transform: initial;
        font-style: italic;
        font-family: "MinionPro-Regular", Georgia, serif;
        font-size: 15px;
        color: #58585a; }
      main .general-content .chart div.top3 {
        width: 100%;
        display: block;
        font-size: 16px;
        vertical-align: top;
        text-align: left;
        background-color: #fff;
        padding: 10px; }
        main .general-content .chart div.top3:nth-of-type(2) {
          background-color: #f1f1f1; }
        main .general-content .chart div.top3 dl.update-box {
          width: 90%;
          margin: 0 auto; }
          main .general-content .chart div.top3 dl.update-box dt {
            color: #EB0505;
            font-size: 16px;
            padding-bottom: 7px;
            text-transform: uppercase; }
          main .general-content .chart div.top3 dl.update-box dd {
            color: #58585a;
            font-family: "Circular-Bold", Arial, Helvetica, serif;
            padding-bottom: 20px;
            margin-left: 0;
            font-size: 16px; }
            main .general-content .chart div.top3 dl.update-box dd span {
              display: inline-block;
              width: 60%; }
      main .general-content .chart table {
        border-collapse: collapse;
        border-spacing: 0;
        text-align: left;
        width: 100% !important;
        font-family: "Circular-Bold", Arial, Helvetica, serif;
        font-size: .875em;
        font-weight: normal;
        margin: 0 0 1em 0;
        overflow-x: auto;
        display: block; }
        main .general-content .chart table caption {
          text-indent: 200%;
          white-space: nowrap;
          overflow: hidden;
          cursor: pointer;
          width: 1px;
          text-indent: -9999px;
          height: 0; }
        main .general-content .chart table thead {
          border-bottom: 1px solid #f1f1f1; }
        main .general-content .chart table tbody {
          vertical-align: top; }
          main .general-content .chart table tbody tr {
            border-bottom: 1px solid #fed4d8; }
            main .general-content .chart table tbody tr:last-of-type td {
              padding-bottom: 1em; }
            main .general-content .chart table tbody tr td {
              padding: 1em;
              line-height: 1.2em;
              font-weight: normal; }
              main .general-content .chart table tbody tr td span {
                font-family: "Circular-Bold", Arial, Helvetica, serif !important;
                background-color: transparent !important; }
      main .general-content .chart fieldset {
        border: none; }
      main .general-content .chart legend {
        margin: 0;
        padding: 0;
        border: none; }
      main .general-content .chart #jsonYoungAlumniTotals dl.update-box {
        padding-top: 15px; }
        main .general-content .chart #jsonYoungAlumniTotals dl.update-box dd {
          font-size: 1em; }
      main .general-content .chart #jsonParentTotals dl.update-box {
        color: #58585a; }
        main .general-content .chart #jsonParentTotals dl.update-box dd, main .general-content .chart #jsonParentTotals dl.update-box dt {
          font-family: "Circular-Bold", Arial, Helvetica, serif !important;
          font-weight: 700;
          display: inline-block; }
        main .general-content .chart #jsonParentTotals dl.update-box dt {
          margin-right: 1em;
          width: auto;
          font-size: 20px;
          line-height: 1.5em; }
        main .general-content .chart #jsonParentTotals dl.update-box dd {
          width: 50%;
          font-size: 30px;
          margin: 10px 0; }
      main .general-content .chart #jsonForeignTotals dl.update-box dd, main .general-content .chart #jsonForeignTotals dl.update-box dt {
        font-family: "Circular-Bold", Arial, Helvetica, serif !important;
        font-weight: 700;
        display: inline-block; }
      main .general-content .chart #jsonForeignTotals dl.update-box dt {
        width: 25%;
        color: #58585a;
        font-size: 18px; }
      main .general-content .chart #jsonForeignTotals dl.update-box dd {
        width: 70%;
        font-size: 18px; }
      main .general-content .chart #jsonFClubTotals dl.update-box dd, main .general-content .chart #jsonForeignTotals dl.update-box dt {
        font-family: "Circular-Bold", Arial, Helvetica, serif !important;
        font-weight: 700;
        display: inline-block;
		 }
      main .general-content .chart #jsonClubTotals dl.update-box dt {
        color: #58585a;
        font-size: 18px;
		line-height:1.5em;}
      main .general-content .chart #jsonClubTotals dl.update-box dd {
        font-size: 18px; }

/* END main */
/* START OTHERS */

footer {
  background-color: var(--white);
  width: 100%;
  margin: 0;
  padding: 40px4;
  color: var(--brown);
  min-height: 200px;
  flex-direction: column;
  justify-content: center;
  align-content: center; }

footer img.bt-logo {
    max-width: 120px;
    width: 100%;
    margin: 0 auto; }

footer small {
    display: block;
    text-align: center;
    font-size: 1rem;
    margin-top: 15px;
    line-height: 1.3em;
    color: var(--brown); }

.mobile-hide {
  display: none !important; }

 /* --- MASONRY GRID --- */
 main .masonry-region {
    width: 100%;
    padding: 50px 40px;
    background-color: var(--white);
    text-align: center; }

main .masonry-region h2, .general-content-wrapper h2 {
	color: var(--brown);
    text-align: center;
    font-family: var(--font-serif);
}

 /* Masonry Layout */
.masonry-grid {
  column-count: 3;
  column-gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 20px;
}

/* Responsive Adjustments */
@media (max-width: 900px) {
  .masonry-grid { column-count: 2; }
}
@media (max-width: 600px) {
  .masonry-grid { column-count: 1; }
}

/* Card Styling */
.quote-card {
  display: inline-block; /* Essential for masonry flow */
  width: 100%;
  margin-bottom: 1.5rem;
  padding: 2.5rem 2rem;
  border-radius: 14px;
  border: 2px solid var(--brown);
  break-inside: avoid; /* Prevents card splitting between columns */
  box-sizing: border-box;
}

.quote-card blockquote {
  margin: 0 0 1rem 0;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.quote-card blockquote:before {
    content: "‟";
}

.quote-card blockquote:after {
    content: "”";
}

.quote-card figcaption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  font-weight: 700;
}

/* Color Schemes */
.quote-card:nth-child(4n+1) {
  background-color: var(--brown); 
  color: var(--white);
}

.quote-card:nth-child(4n+2) {
  background-color: var(--yellow); /* Brown Gold */
  color: var(--brown);
}

.quote-card:nth-child(4n+3) {
  background-color: var(--bright-red); /* Brown Red */
  color: var(--white);
}

.quote-card:nth-child(4n+4) {
  background-color: var(--white);
  color: var(--brown);
}

/* GENERAL CONTENT (LEADERBOARD) */

 main .general-content {
    display: flex;
    justify-content: center;
    align-content: center; }
    main .general-content .general-content-wrapper {
      max-width: 1200px;
      width: 100%;
    padding: 50px 0 }
    main .general-content .chart {
      border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      background-color: #f1f1f1;
      padding: 18px;
      width: 100%;
      text-align: left;
      border: none;
      outline: none;
      font-weight: bold;
      font-size: 15px;
      line-height: 20px;
      font-family: "Circular-Bold", Arial, Helvetica, serif;
      margin-bottom: 3px;
      color: #EB0505;
      /* Top 3 styling */
      /* Leaderboard Gentle Formatting */ }
      main .general-content .chart:first-of-type {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center; }
        main .general-content .chart:first-of-type h3 {
          flex-basis: 100%; }
      main .general-content .chart h3 {
        text-align: left;
        font-size: 15px;
        color: #EB0505;
        text-transform: uppercase; }
      main .general-content .chart p {
        text-transform: initial;
        font-style: italic;
        font-family: "MinionPro-Regular", Georgia, serif;
        font-size: 15px;
        color: #58585a; }
      main .general-content .chart div.top3 {
        width: 100%;
        display: block;
        font-size: 16px;
        vertical-align: top;
        text-align: left;
        background-color: #fff;
        padding: 10px; }
        main .general-content .chart div.top3:nth-of-type(2) {
          background-color: #f1f1f1; }
        main .general-content .chart div.top3 dl.update-box {
          width: 90%;
          margin: 0 auto; }
          main .general-content .chart div.top3 dl.update-box dt {
            color: #EB0505;
            font-size: 16px;
            padding-bottom: 7px;
            text-transform: uppercase; }
          main .general-content .chart div.top3 dl.update-box dd {
            color: #58585a;
            font-family: "Circular-Bold", Arial, Helvetica, serif;
            padding-bottom: 20px;
            margin-left: 0;
            font-size: 16px; }
            main .general-content .chart div.top3 dl.update-box dd span {
              display: inline-block;
              width: 60%; }
      main .general-content .chart table {
        border-collapse: collapse;
        border-spacing: 0;
        text-align: left;
        width: 100% !important;
        font-family: "Circular-Bold", Arial, Helvetica, serif;
        font-size: .875em;
        font-weight: normal;
        margin: 0 0 1em 0;
        overflow-x: auto;
        display: block; }
        main .general-content .chart table caption {
          text-indent: 200%;
          white-space: nowrap;
          overflow: hidden;
          cursor: pointer;
          width: 1px;
          text-indent: -9999px;
          height: 0; }
        main .general-content .chart table thead {
          border-bottom: 1px solid #f1f1f1; }
        main .general-content .chart table tbody {
          vertical-align: top; }
          main .general-content .chart table tbody tr {
            border-bottom: 1px solid #fed4d8; }
            main .general-content .chart table tbody tr:last-of-type td {
              padding-bottom: 1em; }
            main .general-content .chart table tbody tr td {
              padding: 1em;
              line-height: 1.2em;
              font-weight: normal; }
              main .general-content .chart table tbody tr td span {
                font-family: "Circular-Bold", Arial, Helvetica, serif !important;
                background-color: transparent !important; }
      main .general-content .chart fieldset {
        border: none; }
      main .general-content .chart legend {
        margin: 0;
        padding: 0;
        border: none; }
      main .general-content .chart #jsonYoungAlumniTotals dl.update-box {
        padding-top: 15px; }
        main .general-content .chart #jsonYoungAlumniTotals dl.update-box dd {
          font-size: 1em; }
      main .general-content .chart #jsonParentTotals dl.update-box {
        color: #58585a; }
        main .general-content .chart #jsonParentTotals dl.update-box dd, main .general-content .chart #jsonParentTotals dl.update-box dt {
          font-family: "Circular-Bold", Arial, Helvetica, serif !important;
          font-weight: 700;
          display: inline-block; }
        main .general-content .chart #jsonParentTotals dl.update-box dt {
          margin-right: 1em;
          width: auto;
          font-size: 20px;
          line-height: 1.5em; }
        main .general-content .chart #jsonParentTotals dl.update-box dd {
          width: 50%;
          font-size: 30px;
          margin: 10px 0; }
      main .general-content .chart #jsonForeignTotals dl.update-box dd, main .general-content .chart #jsonForeignTotals dl.update-box dt {
        font-family: "Circular-Bold", Arial, Helvetica, serif !important;
        font-weight: 700;
        display: inline-block; }
      main .general-content .chart #jsonForeignTotals dl.update-box dt {
        width: 25%;
        color: #58585a;
        font-size: 18px; }
      main .general-content .chart #jsonForeignTotals dl.update-box dd {
        width: 70%;
        font-size: 18px; }
      main .general-content .chart #jsonFClubTotals dl.update-box dd, main .general-content .chart #jsonForeignTotals dl.update-box dt {
        font-family: "Circular-Bold", Arial, Helvetica, serif !important;
        font-weight: 700;
        display: inline-block;
		 }
      main .general-content .chart #jsonClubTotals dl.update-box dt {
        color: #58585a;
        font-size: 18px;
		line-height:1.5em;}
      main .general-content .chart #jsonClubTotals dl.update-box dd {
        font-size: 18px; }

/* TABLET STYLES */

@media only screen and (min-width: 650px) {
    main .general-content .chart:first-of-type {
        flex-direction: row;
    }

     main .general-content .chart div.top3 {
      width: 30%;
      padding: 10px;
      vertical-align: top;
      text-align: left;
      border-top: 1px solid #58585a; }
      main .general-content .chart div.top3:nth-of-type(2) {
        background-color: #f1f1f1; }
      main .general-content .chart div.top3 dl.updatebox {
        width: 100%; }
        main .general-content .chart div.top3 dl.updatebox dd {
          margin-left: 0; }

              main div.social {
    padding: 30px 40px; 
	background-color:var(--brown);
    display:flex;
  flex-direction: row;}
}

 /* --- DESKTOP STYLES --- */
 
        @media (min-width: 769px) {
            .semicircle-container {
                aspect-ratio: 2 / 1; 
                min-height: auto;
            }

            .semicircle-bg {
                border-radius: 100vw 100vw 0 0; 
            }

            .semicircle-bg-brown {
                border-radius: 100vw 100vw 0 0; 
            }
         
            .content {
                padding: 20px;
                margin: 3% auto 0; 
                max-width:1120px
            }

            .card-wrapper {
                width: 85%; 
                max-width: 900px;
                margin-top: 30px;
            }

            .card {
                padding: 40px 50px 30px 80px;
                text-align: left;
            }

            .card-title, .card-text {
                text-align: left;
            }

            .circular-icon {
                top: 50%;
                left: 0;
                transform: translate(-50%, -50%);
            }

            .form-layout {
                display: grid;
                grid-template-columns: 1fr 1.1fr;
                gap: 40px;
                align-items: start;
            }

            /* Container 1 positioning: Move it up close to the headline */
            .dome-container .card-wrapper {
                margin-top: 0; 
                margin-bottom: -100px; /* Pulls subsequent content up */
            }

          
            .other-chall {
              width: 100%;
             min-height: 370px;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
           }

           .prestate {
              width: 100%;
             min-height: 350px;
             display: flex;
             flex-direction: column;
            justify-content: flex-start;
           }
          

            .challenges .challenges-wrapper {
            display: flex;
            gap:30px;
            }

            .other-chall-wrapper { 
            width: 50%;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
    }
main .faqs .accordion-container .accordion-panel p {
          padding: 10px 10px 0 40px;
         }


        }

        
 /* --- LARGE DESKTOP STYLES --- */
 
        @media (min-width: 900px) {
   .three-videos {
            display: flex;
            flex-direction: row;
            align-content: center;
            justify-content: space-around;
            gap:10px;
            flex-wrap: wrap;
            width: 90%;
            margin:0 auto;
            text-align: center;
        }
           
    }
    
    /* -- START Larger Crest Size -- */
@media only screen and (min-width: 1350px) {
     main .general-content .chart div.top3 dl.update-box {
      width: 85%; }
      main .general-content .chart div.top3 dl.update-box dd {
        font-size: 20px; } 
      }