/* =========================================
   GABRIELA MÉNDEZ
   GLOBAL LEARNING PORTFOLIO
========================================= */


/* =========================================
   COLOR PALETTE
========================================= */

:root {

    --pink: #df7aa3;
    --charcoal: #474444;
    --mustard: #d3ae41;
    --black: #000000;
    --warm-white: #ebe6e4;
    --white: #ffffff;

}


/* =========================================
   RESET
========================================= */

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


html {
    scroll-behavior: smooth;
}


body {

    background: var(--warm-white);

    color: var(--black);

    font-family: "DM Sans", sans-serif;

    line-height: 1.5;

}


img {
    max-width: 100%;
    display: block;
}


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


/* =========================================
   TYPOGRAPHY
========================================= */

h1,
h2,
h3 {

    font-family: "Space Grotesk", sans-serif;

    font-weight: 700;

    line-height: .9;

}


h1 {
    font-size: clamp(4rem, 9vw, 9rem);
}


h2 {
    font-size: clamp(3rem, 7vw, 7rem);
}


h3 {
    font-size: 1.5rem;
}


p {
    font-size: 1.05rem;
}


/* =========================================
   HEADER
========================================= */

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1.25rem 4vw;

    background: rgba(235, 230, 228, .94);

    backdrop-filter: blur(10px);

    border-bottom: 2px solid var(--black);

}


.logo {

    font-family: "Space Grotesk", sans-serif;

    font-size: 1.5rem;

    font-weight: 700;

}


.logo span {
    color: var(--pink);
}


.navigation {

    display: flex;

    gap: 2rem;

}


.navigation a {

    font-size: .8rem;

    font-weight: 700;

    letter-spacing: .08em;

}


.navigation a:hover {

    color: var(--pink);

}


.menu-toggle {

    display: none;

    background: none;

    border: 0;

    font-size: 1.5rem;

}


/* =========================================
   GENERAL SECTIONS
========================================= */

.section {

    padding: 8rem 6vw;

}


.section-label {

    margin-bottom: 3rem;

    font-size: .75rem;

    font-weight: 700;

    letter-spacing: .15em;

    color: var(--charcoal);

}


.section-label::before {

    content: "";

    display: inline-block;

    width: 35px;

    height: 3px;

    margin-right: 12px;

    vertical-align: middle;

    background: var(--pink);

}


/* =========================================
   HERO
========================================= */

.hero {

    min-height: calc(100vh - 70px);

    display: grid;

    grid-template-columns: 48% 52%;

    border-bottom: 3px solid var(--black);

}


.hero-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 6vw;

}


.eyebrow {

    margin-bottom: 2rem;

    font-size: .8rem;

    font-weight: 700;

    letter-spacing: .1em;

    color: var(--charcoal);

}


.hero h1 span {

    color: var(--pink);

}


.hero-intro {

    max-width: 600px;

    margin-top: 2.5rem;

    margin-bottom: 2rem;

    font-size: clamp(1.1rem, 1.5vw, 1.4rem);

}


.hero-image {

    overflow: hidden;

    background: var(--charcoal);

}


.hero-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}


/* =========================================
   BUTTONS
========================================= */

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: fit-content;

    padding: 1rem 1.5rem;

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: .05em;

    border: 2px solid var(--black);

    transition: .25s ease;

}


.button-dark {

    background: var(--black);

    color: var(--white);

}


.button-dark:hover {

    background: var(--pink);

    color: var(--black);

    transform: translate(5px, -5px);

}


.button-pink {

    background: var(--pink);

    color: var(--black);

}


.button-pink:hover {

    background: var(--mustard);

    transform: translate(5px, -5px);

}


/* =========================================
   PHILOSOPHY
========================================= */

.philosophy {

    display: grid;

    grid-template-columns: 20% 80%;

    background: var(--black);

    color: var(--white);

}


.philosophy .section-label {

    color: var(--white);

}


.philosophy-content {

    display: grid;

    grid-template-columns: 55% 45%;

    gap: 5vw;

}


.philosophy h2 {

    max-width: 600px;

}


.philosophy h2 span {

    color: var(--pink);

}


.philosophy-text {

    max-width: 400px;

}


.philosophy-text p {

    margin-bottom: 2rem;

    color: #ddd;

}


/* =========================================
   SERVICES
========================================= */

.services {

    background: var(--warm-white);

}


.services > h2 {

    margin-bottom: 5rem;

}


.services h2 span {

    color: var(--pink);

}


.service-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    border-top: 2px solid var(--black);

    border-left: 2px solid var(--black);

}


.service-card {

    min-height: 200px;

    padding: 2rem;

    border-right: 2px solid var(--black);

    border-bottom: 2px solid var(--black);

    transition: .25s ease;

}


.service-card:hover {

    background: var(--pink);

}


.service-number {

    margin-bottom: 4rem;

    font-size: .8rem;

    font-weight: 700;

}


.service-card h3 {

    margin-bottom: 2rem;

}


.service-card p {

    max-width: 450px;

}


/* =========================================
   NUMBERS
========================================= */

.numbers {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

   gap: 40px;
   
   padding: 80px 7vw;

    background: var(--black);

    color: var(--white);
   
    border-top: 3px solid var(--white);

    border-bottom: 3px solid var(--white);

}


.number-item {

    padding: 3rem 2rem;

    border-right: 2px solid var(--black);

}


.number-item:last-child {

    border-right: none;

}


.number-item strong {

    display: block;

    margin-bottom: 1.5rem;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(2rem, 4vw, 4rem);

    line-height: .9;

}


.number-item span {

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .05em;

}


/* =========================================
   SELECTED WORK
========================================= */

.selected-work {

    background: var(--white);

}


.work-intro {

    display: grid;

    grid-template-columns: 60% 40%;

    gap: 4rem;

    margin-bottom: 5rem;

}


.work-intro h2 span {

    color: var(--pink);

}


.work-intro p {

    max-width: 500px;

}


.work-list {

    border-top: 2px solid var(--black);

}


.work-item {

    display: grid;

    grid-template-columns: 10% 1fr auto;

    align-items: center;

    gap: 2rem;

    padding: 2rem 0;

    border-bottom: 2px solid var(--black);

    transition: .25s ease;

}


.work-item:hover {

    padding-left: 1.5rem;

    background: var(--pink);

}


.work-number {

    font-size: .8rem;

    font-weight: 700;

}


.work-title {

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(1.5rem, 3vw, 3rem);

    font-weight: 600;

}


.work-arrow {

    font-size: 2rem;

}


/* =========================================
   PROCESS
========================================= */

.process {

    background: var(--charcoal);

    color: var(--white);

}


.process h2 {

    margin-bottom: 6rem;

}


.process h2 span {

    color: var(--pink);

}


.process-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid #777;

}


.process-grid > div {

    padding: 2rem;

    border-right: 1px solid #777;

}


.process-grid span {

    color: var(--pink);

    font-size: .8rem;

}


.process-grid h3 {

    margin: 2rem 0 1rem;

}


.process-grid p {

    color: #ddd;

    font-size: .9rem;

}


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

.about {

    background: var(--white);

}


.about-grid {

    display: grid;

    grid-template-columns: 45% 55%;

    gap: 5vw;

}


.about-heading {

    position: relative;

}


.about-heading h2 span {

    color: var(--pink);

}


.handwritten {

    font-family: "Caveat", cursive;

    color: var(--pink);

    font-size: 2rem;

    transform: rotate(-3deg);

}


.about-text {

    max-width: 700px;

}


.about-text p {

    margin-bottom: 2rem;

}


.closing-line {

    margin-top: 3rem;

    font-family: "Space Grotesk", sans-serif;

    font-size: 1.5rem;

    font-weight: 700;

}


/* =========================================
   RECOGNITION
========================================= */

.recognition {

    background: var(--white);

}


.recognition h2 {

    margin-bottom: 5rem;

}


.recognition h2 span {

    color: var(--pink);

}


.recognition-list {

    border-top: 2px solid var(--black);

}


.recognition-list div {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 2rem;

    padding: 2rem 0;

    border-bottom: 2px solid var(--black);

}


.recognition-list strong {

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(1.3rem, 2.5vw, 2.5rem);

}


.recognition-list span {

    font-size: .8rem;

    font-weight: 700;

}


.recognition-note {

    max-width: 600px;

    margin-top: 3rem;

}
.recognition-list {
    margin-top: 3rem;
}

.recognition-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    padding: 2rem 0;
    border-top: 1px solid #474444;
}

.recognition-item a {
    display: contents;
    color: inherit;
    text-decoration: none;
}

.recognition-item strong {
    grid-column: 1;
}

.recognition-item p {
    grid-column: 1;
    margin: 0.75rem 0 0;
}

.recognition-item span {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    white-space: nowrap;
}

/* =========================================
   CONTACT
========================================= */

.contact {

    background: var(--black);

    color: var(--white);

    text-align: center;

}


.contact-content {

    max-width: 1000px;

    margin: auto;

}


.contact .handwritten {

    margin-bottom: 1rem;

}


.contact h2 {

    margin-bottom: 3rem;

}


.contact h2 span {

    color: var(--pink);

}


.contact-content > p:not(.handwritten) {

    max-width: 700px;

    margin: 0 auto 3rem;

    color: #ddd;

}


.audience {

    margin-top: 5rem;

    padding-top: 2rem;

    border-top: 1px solid #555;

    color: #aaa;

    font-size: .85rem;

}


/* =========================================
   FOOTER
========================================= */

.footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 2rem;

    padding: 2rem 6vw;

    background: var(--warm-white);

    border-top: 3px solid var(--black);

}


.footer div:first-child {

    display: flex;

    flex-direction: column;

    gap: .4rem;

}


.footer strong {

    font-family: "Space Grotesk", sans-serif;

}


.footer span {

    color: var(--charcoal);

    font-size: .8rem;

}


.footer-links {

    display: flex;

    gap: 2rem;

    font-weight: 700;

    font-size: .85rem;

}


.footer-links a:hover {

    color: var(--pink);

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {


    .navigation {

        display: none;

    }


    .menu-toggle {

        display: block;

    }


    .hero {

        grid-template-columns: 1fr;

    }


    .hero-content {

        min-height: 70vh;

        padding: 8vw;

    }


    .hero-image {

        height: 400px;

    }


    .philosophy {

        grid-template-columns: 1fr;

    }


    .philosophy-content {

        grid-template-columns: 1fr;

    }


    .service-grid {

        grid-template-columns: 1fr;

    }


    .numbers {

        grid-template-columns: repeat(2, 1fr);

    }


    .number-item {

        border-bottom: 2px solid var(--black);

    }


    .work-intro {

        grid-template-columns: 1fr;

    }


    .process-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    .about-grid {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 600px) {


    .section {

        padding: 5rem 7vw;

    }


    h1 {

        font-size: 4rem;

    }


    h2 {

        font-size: 3.2rem;

    }


    .numbers {

        grid-template-columns: 1fr;

    }


    .number-item {

        border-right: none;

    }


    .process-grid {

        grid-template-columns: 1fr;

    }


    .process-grid > div {

        border-right: none;

        border-bottom: 1px solid #777;

    }


    .work-item {

        grid-template-columns: 10% 1fr auto;

    }


    .work-title {

        font-size: 1.3rem;

    }


    .recognition-list div {

        align-items: flex-start;

        flex-direction: column;

    }


    .footer {

        align-items: flex-start;

        flex-direction: column;

    }

}
/* =========================================
   MOBILE NAVIGATION
========================================= */

@media (max-width: 900px) {

    .navigation.mobile-open {

        position: absolute;

        top: 100%;

        left: 0;

        right: 0;

        display: flex;

        flex-direction: column;

        gap: 0;

        background: var(--black);

        color: var(--white);

        border-bottom: 2px solid var(--pink);

    }


    .navigation.mobile-open a {

        padding: 1.2rem 7vw;

        border-bottom: 1px solid #333;

    }

}
/* =====================================================
   RESOURCE PAGES
   Conference Tracker + Future Portfolio Resources
===================================================== */


/* =====================================================
   RESOURCE HERO
===================================================== */

.resource-hero {

    background: var(--warm-white);

    padding: 8rem 6vw 7rem;

    border-bottom: 3px solid var(--black);

}


.resource-hero-inner {

    max-width: 1200px;

    margin: auto;

}


.resource-hero .section-label {

    margin-bottom: 3rem;

}


.resource-hero .handwritten {

    margin-bottom: 1rem;

}


.resource-hero h1 {

    max-width: 1100px;

    margin-bottom: 3rem;

}


.resource-hero h1 span {

    color: var(--pink);

}


.resource-intro {

    max-width: 700px;

    font-size: clamp(1.1rem, 1.6vw, 1.4rem);

    line-height: 1.5;

}


/* =====================================================
   RESOURCE DESCRIPTION
===================================================== */

.resource-description {

    display: grid;

    grid-template-columns: 25% 75%;

    gap: 5vw;

    padding: 7rem 6vw;

    background: var(--black);

    color: var(--white);

}


.resource-description-label {

    font-family: "Space Grotesk", sans-serif;

    font-size: .8rem;

    font-weight: 700;

    letter-spacing: .08em;

    line-height: 1.5;

}


.resource-description-label span {

    display: block;

    margin-bottom: 1.5rem;

    color: var(--pink);

    font-size: 1rem;

}


.resource-description-content {

    max-width: 850px;

}


.resource-description-content > p {

    margin-bottom: 2rem;

    font-size: clamp(1.05rem, 1.5vw, 1.3rem);

    color: #e5e5e5;

}


.resource-description-content strong {

    color: var(--pink);

}


.resource-note {

    margin-top: 4rem;

    padding: 2rem;

    border: 2px solid var(--pink);

}


.resource-note strong {

    display: block;

    margin-bottom: 1rem;

    font-family: "Space Grotesk", sans-serif;

    font-size: 1rem;

}


.resource-note p {

    margin: 0;

    color: #ddd;

}


/* =====================================================
   TRACKER SECTION
===================================================== */

.tracker-section {

    padding: 8rem 6vw;

    background: var(--white);

}


.tracker-heading {

    display: grid;

    grid-template-columns: 50% 50%;

    column-gap: 5vw;

    margin-bottom: 5rem;

}


.tracker-heading .section-label {

    grid-column: 1 / -1;

}


.tracker-heading h2 {

    max-width: 800px;

}


.tracker-heading h2 span {

    color: var(--pink);

}


.tracker-heading p {

    max-width: 500px;

    align-self: end;

}


/* =====================================================
   FILTERS
===================================================== */

.tracker-filters {

    display: grid;

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

    gap: 1rem;

    margin-bottom: 3rem;

    padding: 1.5rem;

    background: var(--warm-white);

    border: 2px solid var(--black);

}


.filter-group {

    display: flex;

    flex-direction: column;

}


.filter-group label {

    margin-bottom: .5rem;

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .1em;

}


.filter-group input,
.filter-group select {

    width: 100%;

    min-height: 48px;

    padding: .75rem;

    background: var(--white);

    color: var(--black);

    border: 2px solid var(--black);

    border-radius: 0;

    font-family: "DM Sans", sans-serif;

    font-size: .9rem;

}


.filter-group input:focus,
.filter-group select:focus {

    outline: 3px solid var(--pink);

    outline-offset: 2px;

}


/* =====================================================
   TABLE
===================================================== */

.table-wrapper {

    width: 100%;

    overflow-x: auto;

    border-top: 3px solid var(--black);

    border-left: 2px solid var(--black);

}


#table {

    width: 100%;

    min-width: 1100px;

    border-collapse: collapse;

    background: var(--white);

}


#table th {

    padding: 1rem;

    background: var(--black);

    color: var(--white);

    border-right: 1px solid #555;

    text-align: left;

    font-family: "Space Grotesk", sans-serif;

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

}


#table td {

    padding: 1.2rem 1rem;

    border-right: 2px solid var(--black);

    border-bottom: 2px solid var(--black);

    vertical-align: top;

    font-size: .85rem;

}


#table tbody tr {

    transition: background .2s ease;

}


#table tbody tr:hover {

    background: var(--pink);

}


#table .event-name {

    min-width: 220px;

    font-family: "Space Grotesk", sans-serif;

    font-weight: 700;

}


.table-link {

    font-weight: 700;

    text-decoration: underline;

    text-decoration-thickness: 2px;

    text-underline-offset: 3px;

}


.table-link:hover {

    color: var(--mustard);

}


.no-results {

    padding: 3rem !important;

    text-align: center;

    font-weight: 700;

}


/* =====================================================
   TRACKER NOTE
===================================================== */

.tracker-disclaimer {

    max-width: 900px;

    margin-top: 2rem;

    padding: 1.5rem;

    border-left: 5px solid var(--mustard);

    background: var(--warm-white);

    font-size: .85rem;

    color: var(--charcoal);

}


.tracker-disclaimer strong {

    font-family: "Space Grotesk", sans-serif;

}


/* =====================================================
   OTHER WORK
===================================================== */

.other-work {

    padding: 8rem 6vw;

    background: var(--charcoal);

    color: var(--white);

}


.other-work h2 {

    margin-bottom: 5rem;

}


.other-work h2 span {

    color: var(--pink);

}


.other-work-list {

    border-top: 2px solid #777;

}


.other-work-item {

    display: grid;

    grid-template-columns: 10% 1fr auto;

    align-items: center;

    gap: 2rem;

    padding: 2rem 0;

    border-bottom: 2px solid #777;

    transition: .25s ease;

}


.other-work-item:hover {

    padding-left: 1.5rem;

    background: var(--pink);

    color: var(--black);

}


.other-work-number {

    font-size: .75rem;

    font-weight: 700;

}


.other-work-item > span:nth-child(2) {

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(1.2rem, 2.5vw, 2rem);

    font-weight: 600;

}


.other-work-item > span:last-child {

    font-size: .75rem;

    font-weight: 700;

}


.other-work-item.current {

    background: var(--mustard);

    color: var(--black);

}


.other-work-item.current:hover {

    background: var(--pink);

}


/* =====================================================
   BACK TO PORTFOLIO
===================================================== */

.resource-back {

    padding: 3rem 6vw;

    background: var(--black);

    color: var(--white);

    border-top: 3px solid var(--pink);

}


.resource-back a {

    font-family: "Space Grotesk", sans-serif;

    font-size: .9rem;

    font-weight: 700;

    letter-spacing: .08em;

}


.resource-back a:hover {

    color: var(--pink);

}


/* =====================================================
   RESOURCE PAGE MOBILE
===================================================== */

@media (max-width: 1000px) {


    .tracker-filters {

        grid-template-columns: repeat(2, 1fr);

    }


    .search-group {

        grid-column: 1 / -1;

    }


    .resource-description {

        grid-template-columns: 1fr;

    }


    .tracker-heading {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

}


@media (max-width: 600px) {


    .resource-hero {

        padding: 5rem 7vw;

    }


    .resource-hero h1 {

        font-size: 4rem;

    }


    .resource-description {

        padding: 5rem 7vw;

    }


    .tracker-section {

        padding: 5rem 7vw;

    }


    .tracker-heading h2 {

        font-size: 3.2rem;

    }


    .tracker-filters {

        grid-template-columns: 1fr;

        padding: 1rem;

    }


    .search-group {

        grid-column: auto;

    }


    .other-work {

        padding: 5rem 7vw;

    }


    .other-work-item {

        grid-template-columns: 10% 1fr;

    }


    .other-work-item > span:last-child {

        grid-column: 2;

    }

}
/* =====================================================
   LANGUAGE ACKNOWLEDGEMENT
===================================================== */


/* =====================================================
   HOW TO USE
===================================================== */

.language-how {

    background: var(--warm-white);

}


.language-how-grid {

    display: grid;

    grid-template-columns: 40% 60%;

    gap: 5vw;

}


.language-how-grid h2 span {

    color: var(--pink);

}


.language-steps {

    border-top: 2px solid var(--black);

}


.language-step {

    display: grid;

    grid-template-columns: 50px 1fr;

    gap: 2rem;

    padding: 2rem 0;

    border-bottom: 2px solid var(--black);

}


.language-step > span {

    font-size: .75rem;

    font-weight: 700;

    color: var(--pink);

}


.language-step h3 {

    margin-bottom: .75rem;

}


.language-step p {

    max-width: 550px;

    color: var(--charcoal);

}


/* =====================================================
   LANGUAGE EXAMPLES
===================================================== */

.language-example {

    display: grid;

    grid-template-columns: 15% 85%;

    gap: 4vw;

    padding: 7rem 6vw;

    border-top: 3px solid var(--black);

}


.english-example {

    background: var(--black);

    color: var(--white);

}


.spanish-example {

    background: var(--mustard);

    color: var(--black);

}


.language-example-number {

    font-family: "Space Grotesk", sans-serif;

    font-size: .8rem;

    font-weight: 700;

}


.language-example-content {

    max-width: 1100px;

}


.example-label {

    margin-bottom: 2rem;

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .12em;

}


.english-example .example-label {

    color: var(--pink);

}


.spanish-example .example-label {

    color: var(--black);

}


.language-example h2 {

    margin-bottom: 4rem;

    font-size: clamp(3rem, 6vw, 6rem);

}


.language-example h2 span {

    color: var(--pink);

}


.spanish-example h2 span {

    color: var(--white);

}


.language-example blockquote {

    max-width: 850px;

    padding-left: 2rem;

    border-left: 5px solid var(--pink);

    font-size: clamp(1.1rem, 1.6vw, 1.4rem);

    line-height: 1.7;

    font-style: normal;

}


.spanish-example blockquote {

    border-left-color: var(--black);

}


/* =====================================================
   PDF RESOURCE
===================================================== */

.pdf-resource {

    background: var(--white);

}


.pdf-heading {

    display: grid;

    grid-template-columns: 60% 40%;

    gap: 5vw;

    align-items: end;

    margin-bottom: 4rem;

}


.pdf-heading h2 span {

    color: var(--pink);

}


.pdf-heading > div:last-child p {

    max-width: 500px;

    margin-bottom: 2rem;

    color: var(--charcoal);

}


.pdf-viewer {

    width: 100%;

    height: 750px;

    overflow: hidden;

    border: 3px solid var(--black);

    background: var(--charcoal);

}


.pdf-viewer iframe {

    width: 100%;

    height: 100%;

    border: none;

}


.pdf-download {

    padding: 1.5rem;

    text-align: right;

    border-left: 2px solid var(--black);

    border-right: 2px solid var(--black);

    border-bottom: 2px solid var(--black);

}


.pdf-download a {

    font-family: "Space Grotesk", sans-serif;

    font-size: .8rem;

    font-weight: 700;

    letter-spacing: .08em;

}


.pdf-download a:hover {

    color: var(--pink);

}


/* =====================================================
   LANGUAGE PAGE MOBILE
===================================================== */

@media (max-width: 900px) {


    .language-how-grid {

        grid-template-columns: 1fr;

        gap: 4rem;

    }


    .language-example {

        grid-template-columns: 1fr;

        gap: 2rem;

    }


    .pdf-heading {

        grid-template-columns: 1fr;

        gap: 2rem;

    }


}


@media (max-width: 600px) {


    .language-example {

        padding: 5rem 7vw;

    }


    .language-example h2 {

        font-size: 3.2rem;

        margin-bottom: 3rem;

    }


    .language-example blockquote {

        padding-left: 1.2rem;

        font-size: 1rem;

    }


    .pdf-viewer {

        height: 600px;

    }

}
/* =====================================================
   COIL TECHNOLOGY GUIDE
===================================================== */


/* =====================================================
   GUIDE HERO
===================================================== */

.guide-hero h1 span {

    color: var(--mustard);

}


/* =====================================================
   KEY CONSIDERATIONS
===================================================== */

.guide-considerations {

    background: var(--white);

}


.guide-considerations-grid {

    display: grid;

    grid-template-columns: 40% 60%;

    gap: 5vw;

}


.guide-considerations-grid h2 span {

    color: var(--mustard);

}


.guide-principles {

    border-top: 3px solid var(--black);

}


.guide-principle {

    display: grid;

    grid-template-columns: 60px 1fr;

    gap: 2rem;

    padding: 2.5rem 0;

    border-bottom: 2px solid var(--black);

}


.guide-number {

    font-family: "Space Grotesk", sans-serif;

    font-size: .8rem;

    font-weight: 700;

    color: var(--mustard);

}


.guide-principle h3 {

    margin-bottom: .75rem;

}


.guide-principle p {

    max-width: 600px;

    margin: 0;

    color: var(--charcoal);

}


/* =====================================================
   DATA PRIVACY
===================================================== */

.guide-privacy {

    display: grid;

    grid-template-columns: 15% 85%;

    gap: 4vw;

    padding: 8rem 6vw;

    background: var(--mustard);

    color: var(--black);

    border-top: 3px solid var(--black);

}


.guide-privacy-number {

    font-family: "Space Grotesk", sans-serif;

    font-size: .8rem;

    font-weight: 700;

}


.guide-privacy-content {

    max-width: 1100px;

}


.guide-privacy-content .example-label {

    color: var(--black);

}


.guide-privacy h2 {

    margin-bottom: 3rem;

    font-size: clamp(3rem, 6vw, 6rem);

}


.guide-privacy h2 span {

    color: var(--white);

}


.guide-privacy-intro {

    max-width: 750px;

    margin-bottom: 4rem;

    font-size: clamp(1.1rem, 1.6vw, 1.4rem);

    line-height: 1.6;

}


.privacy-practices {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

}


.privacy-practices > div {

    padding: 2rem;

    border: 2px solid var(--black);

}


.privacy-practices strong {

    display: block;

    margin-bottom: 1rem;

    font-family: "Space Grotesk", sans-serif;

    font-size: .9rem;

    letter-spacing: .05em;

}


.privacy-practices p {

    margin: 0;

    font-size: .9rem;

    line-height: 1.6;

}


/* =====================================================
   GUIDE MOBILE
===================================================== */

@media (max-width: 900px) {


    .guide-considerations-grid {

        grid-template-columns: 1fr;

        gap: 4rem;

    }


    .guide-privacy {

        grid-template-columns: 1fr;

        gap: 2rem;

    }


    .privacy-practices {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 600px) {


    .guide-privacy {

        padding: 5rem 7vw;

    }


    .guide-privacy h2 {

        font-size: 3.2rem;

    }


    .guide-principle {

        grid-template-columns: 40px 1fr;

        gap: 1rem;

    }

}
/* =====================================================
   MANUAL FOR VIRTUAL INTERACTION
===================================================== */


/* HERO */

.manual-hero h1 span {

    color: var(--mustard);

}


/* =====================================================
   MANUAL SECTIONS
===================================================== */

.manual-sections {

    background: var(--white);

}


.manual-sections-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 2rem;

    margin-top: 4rem;

}


.manual-card {

    padding: 3rem;

    background: var(--pink);

    color: var(--black);

    border: 3px solid var(--black);

}


.manual-card.technical {

    background: var(--warm-white);

}


.manual-card-number {

    display: block;

    margin-bottom: 3rem;

    font-family: "Space Grotesk", sans-serif;

    font-size: .8rem;

    font-weight: 700;

}


.manual-card h2 {

    margin-bottom: 2rem;

    font-size: clamp(2.5rem, 4vw, 4.5rem);

}


.manual-card h2 span {

    color: var(--white);

}


.manual-card.technical h2 span {

    color: var(--pink);

}


.manual-card p {

    max-width: 550px;

    margin-bottom: 2rem;

    line-height: 1.6;

}


.manual-card ul {

    margin: 0;

    padding: 0;

    list-style: none;

}


.manual-card li {

    padding: 1rem 0;

    border-top: 2px solid var(--black);

    font-size: .9rem;

}


.manual-card li:last-child {

    border-bottom: 2px solid var(--black);

}


/* =====================================================
   BIG IDEA
===================================================== */

.manual-quote {

    padding: 8rem 6vw;

    background: var(--black);

    color: var(--white);

    border-top: 3px solid var(--pink);

}


.manual-quote-inner {

    max-width: 1100px;

}


.manual-quote .section-label {

    margin-bottom: 4rem;

}


.manual-quote h2 {

    margin-bottom: 4rem;

    font-size: clamp(4rem, 9vw, 9rem);

    line-height: .9;

}


.manual-quote h2 span {

    color: var(--pink);

}


.manual-quote p {

    max-width: 700px;

    margin-bottom: 1.5rem;

    font-size: 1.15rem;

    line-height: 1.6;

    color: #ddd;

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 800px) {


    .manual-sections-grid {

        grid-template-columns: 1fr;

    }


    .manual-card {

        padding: 2rem;

    }


    .manual-quote {

        padding: 5rem 7vw;

    }


    .manual-quote h2 {

        font-size: 4rem;

    }

}

    /* =========================================
   GLOBAL CONNECTIONS
   ========================================= */

.global-connections-intro {
    padding: 60px 8%;
    background: #ebe6e4;
}

.global-connections-intro .section-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-bottom: 30px;
}

.global-connections-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.global-connections-title h2 {
    margin: 0;
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
}

.global-connections-title h2 span {
    color: #df7aa3;
}

.global-connections-text {
    max-width: 600px;
}

.global-connections-text .lead {
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 30px;
}

.global-connections-text p {
    line-height: 1.7;
    margin-bottom: 30px;
}

.connections-button {
    display: inline-block;
    padding: 16px 24px;
    background: #000000;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
}

.connections-button:hover {
    background: #df7aa3;
    color: #000000;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 768px) {

    .global-connections-intro {
        padding: 80px 6%;
    }

    .global-connections-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .global-connections-title h2 {
        font-size: clamp(2.8rem, 12vw, 5rem);
    }

    .global-connections-text .lead {
        font-size: 1.2rem;
    }

}

</html>
/* =========================
   UPCOMING EVENTS
========================== */

.upcoming-events {
    padding-top: 30px;
    padding-bottom: 30px;
}

.upcoming-events-intro {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
    margin-top: 35px;
    margin-bottom: 60px;
}

.upcoming-events-intro h2 {
    margin: 0;
    line-height: 0.95;
}

.upcoming-events-intro h2 span {
    color: #df7aa3;
}

.upcoming-events-description {
    max-width: 520px;
}

.upcoming-events-description p {
    margin: 0 0 25px 0;
}


/* EVENT CARD */

.upcoming-event {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 50px;

    padding: 35px 0;

    border-top: 1px solid #474444;
}

.upcoming-event:last-child {
    border-bottom: 1px solid #474444;
}


/* DATE */

.upcoming-event-date {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.upcoming-month {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
}

.upcoming-event-date strong {
    font-size: 3.5rem;
    line-height: 0.9;
    margin: 8px 0;
}

.upcoming-year {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}


/* CONTENT */

.upcoming-event-content {
    max-width: 750px;
}

.upcoming-event-type {
    margin: 0 0 12px 0;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    font-weight: 700;
}

.upcoming-event-content h3 {
    margin: 0 0 15px 0;
    line-height: 1;
}

.upcoming-event-content p {
    margin: 0 0 20px 0;
    max-width: 650px;
}

.upcoming-event-role {
    display: inline-block;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    font-weight: 700;
}


/* MOBILE */

@media (max-width: 768px) {

    .upcoming-events {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .upcoming-events-intro {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 45px;
    }

    .upcoming-event {
        grid-template-columns: 80px 1fr;
        gap: 25px;
        padding: 30px 0;
    }

    .upcoming-event-date strong {
        font-size: 2.5rem;
    }

}