/* ==========================================================
   FUTURE READY
   BLACK HILLS STEAM SHOWCASE
   MASTER STYLESHEET
   LANDSCAPE EDITION

   PART 1 OF 5
========================================================== */


/* ==========================================================
   GOOGLE FONTS
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter:wght@300;400;500;600;700&display=swap');

/* ===========================================
   GLOBAL WEBSITE SETTINGS
=========================================== */

html{

    scroll-behavior:smooth;

}

body{

    margin:0;
    overflow-x:hidden;

}


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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:#e8e8e8;

    font-family:'Inter',sans-serif;

    color:#222;

    padding:40px;

}


/* ==========================================================
   PAGE
========================================================== */



.page{

    width:100%;

    min-height:100vh;

    background:#ffffff;

    margin:0 auto;

    position:relative;

    overflow:visible;

    box-sizing:border-box;

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}


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

h1,
h2,
h3,
h4{

    font-family:'Cormorant Garamond',serif;

    font-weight:400;

    color:#111;

}

p{

    font-size:1rem;

    line-height:1.75;

    color:#333;

}


/* ==========================================================
   COVER
========================================================== */
.cover{

    width:100%;

    min-height:1016px;

    height:auto;

    background:#ffffff;

    margin:0 auto 45px auto;

    position:relative;

    overflow:visible;

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}


.cover-image{

    position:absolute;

    inset:0;

}

.cover-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}

.cover-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(20,20,20,.82) 0%,

        rgba(20,20,20,.62) 35%,

        rgba(20,20,20,.28) 70%,

        rgba(20,20,20,.05) 100%

    );

}

.cover-content{

    position:relative;

    z-index:10;

    width:100%;

    height:100%;

    display:grid;

    grid-template-columns:60% 40%;

    grid-template-rows:

        auto

        1fr

        auto;

    padding:60px;

}
/* ==========================================================
   COVER — SCHOOL
========================================================== */

.cover-school{

    grid-column:1;

    grid-row:1;

    align-self:start;

}

.school-name{

    font-family:'Inter',sans-serif;

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.32em;

    text-transform:uppercase;

    color:#ffffff;

}


/* ==========================================================
   COVER — HERO
========================================================== */

.hero-title{

    grid-column:1;

    grid-row:2;

    align-self:center;

    max-width:640px;

}

.hero-title h1{

    font-family:'Cormorant Garamond',serif;

    font-size:7.4rem;

    line-height:.88;

    font-weight:400;

    color:#ffffff;

    margin-bottom:28px;

}

.title-line{

    width:145px;

    height:2px;

    background:#222;

    margin-bottom:28px;

}

.hero-title h2{

    font-family:'Cormorant Garamond',serif;

    font-size:2.25rem;

    font-weight:400;

    color:#ffffff;

    margin-bottom:18px;

}

.hero-subtitle{

    font-family:'Inter',sans-serif;

    font-size:1.2rem;

    line-height:1.8;

    color:#ffffff;

    max-width:540px;

}


/* ==========================================================
   RIGHT PANEL
========================================================== */

.event-panel{

    grid-column:2;

    grid-row:2;

    align-self:center;

    justify-self:end;

    width:355px;

    background:rgba(255,255,255,.93);

    backdrop-filter:blur(10px);

    border-radius:6px;

    padding:34px;

    box-shadow:0 20px 45px rgba(0,0,0,.25);

}

.presented{

    font-size:.95rem;

    font-weight:600;

    color:#222;

    margin-bottom:10px;

}

.founding{

    font-family:'Cormorant Garamond',serif;

    font-size:1.45rem;

    line-height:1.35;

    color:#111;

    margin-bottom:24px;

}

.panel-divider{

    width:100%;

    height:1px;

    background:#222;

    margin:22px 0 28px;

}

.event-grid{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.event-row{

    display:flex;

    flex-direction:column;

}

.label{

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.20em;

    text-transform:uppercase;

    color:#666;

    margin-bottom:5px;

}

.value{

    font-size:1rem;

    line-height:1.5;

    color:#222;

}
/* ==========================================================
   COVER — FOOTER
========================================================== */

.cover-footer{

    grid-column:1 / span 2;

    grid-row:3;

    align-self:end;

    display:flex;

    justify-content:center;

    padding-bottom:6px;

}

.cover-tagline{

    font-family:'Inter',sans-serif;

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.24em;

    text-transform:uppercase;

    color:#ffffff;

}

/* ==========================================================
   INTERIOR PAGE LAYOUT
========================================================== */

.content-page{

    width:100%;

    height:100%;

    padding:60px;

    position:relative;

    z-index:2;

}

.page-eyebrow{

    font-family:'Inter',sans-serif;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:#666;

    margin-bottom:18px;

}

.page-title{

    font-family:'Cormorant Garamond',serif;

    font-size:3.9rem;

    line-height:1;

    margin-bottom:18px;

    max-width:700px;

}

.section-divider{

    width:150px;

    height:2px;

    background:#222;

    margin-bottom:18px;

}

/* ---------- PAGE 3 ---------- */

.page03 .two-column{

    display:grid;

    grid-template-columns:1.7fr .9fr;

    gap:48px;

    align-items:start;

    margin-top:-10px;

}

/* ---------- PAGE 4 ---------- */



/* ---------- PAGE 5 ---------- */

.page05 .content-page{

    padding:48px 60px 60px;

}

.page05 .page-title{

    margin-bottom:10px;

}

.page05 .section-divider{

    margin-bottom:12px;

}

.page05 .page-body{

    margin-top:0;

}

/* ==========================================================
   PAGE 5 — EVENT DETAILS
========================================================== */

.page05 .info-grid{

    display:grid;

    grid-template-columns:170px 1fr;

    gap:16px 26px;

    margin-bottom:34px;

}

.page05 .info-label{

    font-family:'Inter',sans-serif;

    font-size:.9rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#555;

}

.page05 .info-value{

    font-size:1.05rem;

    line-height:1.6;

    color:#222;

}

.page05 .check-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.page05 .check-item{

    display:flex;

    align-items:flex-start;

    gap:14px;

}

.page05 .check{

    width:28px;

    height:28px;

    border-radius:50%;

    background:#1f6b43;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    font-size:1rem;

    flex-shrink:0;

}

.page05 .check-text{

    font-size:1rem;

    line-height:1.6;

}

.page05 .side-panel h3{

    margin-bottom:28px;

}

.page05 .side-panel{

    width:940px;

    margin-left:-20px;

    margin-top:-50px;

}

.page05 .two-column{

    display:grid;

    grid-template-columns:1.35fr 360px;

    gap:56px;

    align-items:start;

}

/* ---------- PAGE 6 ---------- */

.page06 .page-background{

    top:70px;

    background-position:center;

}

.page06 .page-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.96) 0%,
        rgba(255,255,255,.90) 34%,
        rgba(255,255,255,.70) 60%,
        rgba(255,255,255,.20) 82%,
        rgba(255,255,255,.02) 100%
    );

    z-index:1;

}

/* ---------- DEFAULT ---------- */

.main-column{

    display:block;

}

.page-body p{

    font-size:1.05rem;

    line-height:1.8;

    margin-bottom:18px;

}

/* ==========================================================
   QUESTION BLOCK
========================================================== */

.question-block{

    margin:24px 0 34px;

    padding-left:22px;

    border-left:3px solid #222;

}

.question-block p{

    margin-bottom:10px;

    font-size:1.08rem;

    line-height:1.6;

}



/* ==========================================================
   EMPHASIS BLOCK
========================================================== */

.emphasis-block{

    margin-top:34px;

    text-align:center;

}

.emphasis-block p{

    font-family:'Cormorant Garamond',serif;

    font-size:2.1rem;

    line-height:1.15;

    color:#111;

    margin-bottom:2px;

}


/* ==========================================================
   RIGHT SIDEBAR
========================================================== */

.side-panel{

    position:relative;

    width:360px;

    margin-left:auto;

    background:rgba(255,255,255,.90);

    backdrop-filter:blur(5px);

    padding:32px;

    border-radius:10px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    border:1px solid #e7e7e7;

}


.page03 .side-panel{
    width: 300px;
    position: relative;
    left: 50px;
    top: -220px;
}

.page04 .side-panel{

    top:40px;

}

.page05 .side-panel{

    top:40px;

}

.feature-photo{

    grid-column:1 / span 2;

    margin-top:40px;

}

.feature-photo img{

    width:100%;

    height:340px;

    object-fit:cover;

    border-radius:12px;

    display:block;

    box-shadow:0 14px 34px rgba(0,0,0,.18);

}

.side-panel h3{

    font-family:'Cormorant Garamond',serif;

    font-size:2rem;

    margin-bottom:20px;

}

.side-panel p{

    font-size:1rem;

    line-height:1.8;

    margin-bottom:18px;

}

.quote{

    margin-top:34px;

    padding:24px;

    background:#f5f5f5;

    border-left:4px solid #222;

}

.quote p{

    font-family:'Cormorant Garamond',serif;

    font-size:1.45rem;

    line-height:1.4;

    color:#111;

}

/* ==========================================================
   LISTS
========================================================== */

.page-body ul{

    margin:20px 0 30px 24px;

}

.page-body li{

    font-size:1.02rem;

    line-height:1.8;

    margin-bottom:12px;

}



/* ==========================================================
   CHECKLIST
========================================================== */

.check-list{

    display:grid;

    gap:18px;

    margin-top:20px;

}

.check-item{

    display:flex;

    gap:14px;

    align-items:flex-start;

}

.check{

    font-weight:700;

    font-size:1.1rem;

}

.check-text{

    line-height:1.8;

}



/* ==========================================================
   EVENT INFORMATION GRID
========================================================== */

.info-grid{

    display:grid;

    grid-template-columns:170px 1fr;

    column-gap:32px;

    row-gap:20px;

    margin-top:18px;

}

.info-label{

    font-size:.74rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#666;

}

.info-value{

    font-size:1.05rem;

    line-height:1.8;

}



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

.contact-card{

    margin-top:40px;

    border-top:2px solid #222;

    padding-top:28px;

}

.contact-card p{

    margin-bottom:10px;

}

.qr-placeholder{

    width:140px;

    height:140px;

    border:2px solid #999;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#777;

    margin:24px 0;

}
/* ==========================================================
   PAGE BACKGROUNDS
========================================================== */

.page-background{

    position:absolute;

    top:0;

    right:0;

    bottom:0;

    left:0;

    background-size:cover;

    background-repeat:no-repeat;

    background-position:center;

    z-index:0;

}

.page-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.95) 0%,
        rgba(255,255,255,.90) 32%,
        rgba(255,255,255,.70) 60%,
        rgba(255,255,255,.22) 82%,
        rgba(255,255,255,.03) 100%
    );

    z-index:1;

}

/* ===========================
   PAGE 2 ONLY
=========================== */

.page02 .page-background{
    z-index:0;
}

.page02 .page-overlay{
    background:linear-gradient(
        90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.95) 38%,
        rgba(255,255,255,.82) 60%,
        rgba(255,255,255,.55) 75%,
        rgba(255,255,255,.20) 90%,
        rgba(255,255,255,0) 100%
    );
}

.page02 .content-page{

    position:relative;
    z-index:2;

    margin-top:-35px;   /* adjust this number */

}

/* ---------- TEXT ---------- */

.page02{
    color:#111;
}

.page02 p,
.page02 li,
.page02 span,
.page02 div{
    color:#111;
}

.page02 .page-title{
    color:#000;
}

.page02 .page-eyebrow{
    color:#111;
}

.page02 .emphasis-block{

    margin-top:20px;      /* smaller number = moves up */
    text-align:center;

    position:relative;
    top:-30px;            /* increase negative value to move higher */

}

.page02 .emphasis-block p{

    color:#000;
    font-family:'Cormorant Garamond',serif;
    font-size:2.1rem;
    line-height:1.25;
    margin:0;

}

.page02 .question-block{
    margin:40px 0;
    padding-left:24px;
    border-left:3px solid #222;
}

.page02 .section-divider{
    background:#222;
}

/* ---------- SIDE PANEL ---------- */

.page02 .side-panel{
    background:rgba(255,255,255,.95);
    color:#111;
    padding:38px;
    border-radius:18px;
    box-shadow:0 18px 45px rgba(0,0,0,.10);
}

.page02 .side-panel h3{
    color:#000;
}

.page02 .side-panel p,
.page02 .side-panel li{
    color:#111;
}

.page02 .quote p{
    color:#000;
}

.page02 .main-column{
    background:rgba(255,255,255,.32);
    backdrop-filter:blur(2px);

    padding:30px 35px;
    border-radius:18px;
}

.register-date{

    position:absolute;
    top:-650px;
    left:-260px;

}

/* ---------- PAGE 3 ---------- */

.page03 .page-background{

    top:100px;
    background-position: 68% center !important;
    background-size: 115% !important;

}

.page03 .page-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.94) 0%,
        rgba(255,255,255,.88) 28%,
        rgba(255,255,255,.62) 55%,
        rgba(255,255,255,.22) 78%,
        rgba(255,255,255,.05) 100%
    );

    z-index:1;

}




/* ==========================
   PAGE 4
========================== */

.page04 .page-overlay{

    background: linear-gradient(
        90deg,
        rgba(255,255,255,.99) 0%,
        rgba(255,255,255,.99) 28%,
        rgba(255,255,255,.48) 55%,
        rgba(255,255,255,.05) 78%,
        rgba(255,255,255,0) 100%
    );

}

.page04 .page-background{

    top:0;
    left:0;
    right:0;
    bottom:0;

    width:100%;
    height:100%;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

}

.page04 .emphasis-block{

    margin-top:-284px;

    text-align:center;

}

.page04 .emphasis-block p{

    font-family:'Cormorant Garamond',serif;

    font-size:4.1rem;

    line-height:1.15;

    color:#111;

    margin-bottom:2px;

}

.page04 .page-title,
.page04 .page-body,
.page04 .page-body p,
.page04 .page-body li,
.page04 .page-eyebrow{

    color:#000;

}
/* ---------- PAGE 5 ---------- */

.page05 .page-background{

    top:70px;

    background-position:80% center;

}

.page05 .page-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.96) 0%,
        rgba(255,255,255,.90) 34%,
        rgba(255,255,255,.70) 60%,
        rgba(255,255,255,.22) 82%,
        rgba(255,255,255,.03) 100%
    );

    z-index:1;

}

.content-page{

    position:relative;

    z-index:2;

}

/* ===========================
   PAGE 6
=========================== */

.page06{

    position:relative;

    min-height:100vh;

    overflow:visible;

}

.page06 .page-background{

    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

}

.page06 .page-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.94) 0%,
        rgba(255,255,255,.86) 32%,
        rgba(255,255,255,.45) 58%,
        rgba(255,255,255,.10) 100%
    );

}

.page06 .content-page{

    position:relative;
    z-index:2;
    min-height:100vh;

}

.page06 .page-body{

    display:grid;
    grid-template-columns:1fr 340px;
    gap:70px;

    padding-bottom:40px;

}

.page06 .main-column{

    max-width:600px;
    padding-top:0;

}

.page06 .page-title{

    max-width:560px;
    font-size:4.25rem;
    line-height:1.02;
    margin-bottom:28px;

}

.page06 .main-column p{

    font-size:1.15rem;
    line-height:1.9;
    margin-bottom:26px;

}

.page06 .emphasis-block{

    margin-top:40px;
    text-align:center;

}

.page06 .emphasis-block p:first-child{

    font-size:2rem;
    margin-bottom:6px;

}

.page06 .emphasis-block p:last-child{

    font-size:2.25rem;

}

.page06 .side-panel{

    width:360px;
    justify-self:end;

    position:relative;
    top:-410px;

}

.page06 .contact-card{

    padding-top:0;

}

.page06 .quote{

    margin-top:22px;

}

/* ===========================
   PAGE 7
=========================== */

.page07 .page-overlay{

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.96) 0%,
        rgba(255,255,255,.92) 34%,
        rgba(255,255,255,.72) 60%,
        rgba(255,255,255,.30) 82%,
        rgba(255,255,255,.05) 100%
    );

}

.page07 .page-title{

    max-width:700px;

}

.page07 .content-page{

    position:relative;

}

.page07 .schedule-heading{

    margin-top:42px;
    margin-bottom:20px;

    font-family:'Cormorant Garamond',serif;
    font-size:2rem;
    font-weight:500;

}

.page07 .schedule-table{

    margin-bottom:50px;

}

.page07 .schedule-row{

    display:flex;
    justify-content:flex-start;
    align-items:center;

    gap:35px;

    padding:12px 0;

    border-bottom:1px solid rgba(0,0,0,.08);

}

.page07 .time{

    width:120px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#444;

}

.page07 .activity{

    color:#222;

}

.page07 .side-panel{

    background:rgba(255,255,255,.92);

}

.page07 .check-item{

    margin-bottom:18px;

}

.page07 .check{

    font-size:1.2rem;
    font-weight:700;

}

.page07 .check-text{

    font-size:1.05rem;

}

.page07 .emphasis-block{

    margin-top:60px;

    text-align:center;

}

.page07 .emphasis-block p{

    font-family:'Cormorant Garamond',serif;
    font-size:2.25rem;
    line-height:1.2;

}

.page07 .bottom-callout .check-list{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px 40px;

    margin-top:20px;

}

.page07 .bottom-callout h3{

    margin-bottom:12px;

}

.page07 .bottom-callout{

    margin-top:60px;

    padding:22px 34px;

    background:rgba(255,255,255,.95);

    border-radius:18px;

    box-shadow:0 14px 36px rgba(0,0,0,.12);

}

/* ==========================================================
   PRINT
========================================================== */

@page{

    size:Letter landscape;

    margin:0;

}

@media print{

    html,
    body{

        margin:0;

        padding:0;

        background:#fff;

    }

    .page{

        width:11in;

        height:8.5in;

        margin:0;

        box-shadow:none;

        page-break-after:always;

    }

}


/* ===========================================
   FLOATING WEBSITE NAVIGATION
=========================================== */

.floating-nav{

    position:fixed;

    top:50%;

    right:35px;

    transform:translateY(-50%);

    display:flex;

    flex-direction:column;

    gap:14px;

    z-index:9999;

}

.floating-nav a{

    color:#ffffff;

    text-decoration:none;

    font-family:'Montserrat',sans-serif;

    font-size:.82rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    padding:8px 12px;

    border-radius:25px;

    background:rgba(0,0,0,.35);

    backdrop-filter:blur(8px);

    transition:.25s;

}

.floating-nav a:hover{

    background:#B38B2D;

    color:#fff;

    transform:translateX(-6px);

}

html{

    scroll-behavior:smooth;

}

/* ===========================================
   REGISTRATION FORM
=========================================== */

.registration-area{

    margin-top:40px;

    max-width:760px;

}

.form-row{

    margin-bottom:24px;

}

.form-row label{

    display:block;

    margin-bottom:8px;

    color:#fff;

    font-weight:700;

    font-family:'Montserrat',sans-serif;

}

.form-row input,
.form-row textarea,
.form-row select{

    width:100%;

    padding:16px;

    border:none;

    border-radius:8px;

    font-size:1rem;

    font-family:'Montserrat',sans-serif;

    box-sizing:border-box;

}

.form-row textarea{

    resize:vertical;

}

.register-button,
.submit-registration{

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}

.register-button:hover,
.submit-registration:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 24px rgba(0,0,0,.18);

}

/* ===========================================
   REGISTRATION MODAL
=========================================== */

.modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.72);

    z-index:9999;

    overflow-y:auto;

    padding:60px 20px;

}

.modal-window{

    background:#ffffff;

    max-width:760px;

    margin:auto;

    border-radius:18px;

    padding:45px;

    position:relative;

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.modal-window h2{

    margin-top:0;

    color:#1f1f1f;

    font-size:2rem;

    font-family:'Cormorant Garamond',serif;

}

.modal-window p{

    color:#555;

    line-height:1.7;

    margin-bottom:30px;

}

.close-modal{

    position:absolute;

    top:18px;

    right:20px;

    background:none;

    border:none;

    font-size:2rem;

    cursor:pointer;

    color:#666;

}

.close-modal:hover{

    color:#000;

}

.modal label{

    display:block;

    margin:20px 0 8px;

    font-weight:700;

    color:#333;

}

.modal input,
.modal select,
.modal textarea{

    width:100%;

    padding:14px;

    border:1px solid #d7d7d7;

    border-radius:8px;

    font-size:1rem;

    box-sizing:border-box;

    font-family:inherit;

}

.modal textarea{

    resize:vertical;

}

.submit-registration{

    margin-top:30px;

    width:100%;

    padding:18px;

    border:none;

    border-radius:10px;

    background:#B38B2D;

    color:#fff;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.submit-registration:hover{

    background:#C89B2E;

    transform:translateY(-2px);

}

.modal h3{

    margin-top:35px;

    margin-bottom:15px;

    color:#1f1f1f;

    font-size:1.4rem;

    font-family:'Cormorant Garamond',serif;

}

.modal hr{

    margin:35px 0;

    border:none;

    border-top:1px solid #ddd;

}

/* ===========================================
   EMBEDDED GOOGLE FORM
=========================================== */

.registration-frame{

    width:100%;

    height:75vh;

    overflow-y:auto;

    border-radius:12px;

    margin-top:25px;

}

.registration-frame iframe{

    width:100%;

    min-height:2200px;

    border:none;

    background:#ffffff;

}


/* ==========================================================
   END OF STYLESHEET
========================================================== */

/* ==========================================================
   MOBILE VERSION
   (does NOT affect desktop)
========================================================== */

@media screen and (max-width:900px){
    html,
    body{
    max-width:100%;
    overflow-x:hidden;
}
    body{
        padding:0;
    }

    .page,
    .cover{
        width:100%;
        min-height:auto;
        margin:0;
        box-shadow:none;
    }

    .content-page{
        padding:30px 20px;
    }

    .page-title{
        font-size:2.6rem;
        line-height:1.05;
    }

    .page-eyebrow{
        font-size:.7rem;
    }

    p,
    li{
        font-size:1rem;
        line-height:1.7;
    }

}

@media screen and (max-width:900px){

    .cover-content{

        display:block;

        padding:35px 20px;

    }

    .hero-title h1{

        font-size:4rem;

        line-height:.9;

    }

    .hero-title h2{

        font-size:1.7rem;

    }

    .hero-subtitle{

        font-size:1rem;

    }

    .event-panel{

        width:100%;

        margin-top:35px;

    }

}

@media screen and (max-width:900px){

    .two-column{

        display:block;

    }

    .side-panel{

        width:100% !important;

        margin:35px 0 0 0 !important;

        left:0 !important;
        right:0 !important;
        top:0 !important;

    }

}

/* ==========================================
   MOBILE HERO REFINEMENT
========================================== */

@media screen and (max-width:900px){

.cover{

    min-height:100vh;

}

.cover-content{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:32px 24px 100px;

}

.cover-school{

    margin-bottom:30px;

}

.hero-title{

    max-width:100%;

}

.hero-title h1{

    font-size:4.25rem;

    line-height:.92;

    margin-bottom:18px;

}

.title-line{

    width:90px;

    margin-bottom:18px;

}

.hero-title h2{

    font-size:1.8rem;

    margin-bottom:14px;

}

.hero-subtitle{

    font-size:1rem;

    line-height:1.6;

}

.event-panel{

    width:100%;

    margin-top:36px;

}

.cover-footer{

    padding-bottom:0;

}

.cover-tagline{

    font-size:.75rem;

    text-align:center;

}

}

/* ==========================================
   MOBILE EVENT CARD
========================================== */

@media screen and (max-width:900px){

.event-panel{

    border-radius:16px;

    padding:28px;

}

.event-row{

    padding:8px 0;

}

.label{

    font-size:.68rem;

}

.value{

    font-size:1rem;

}

}

/* ==========================================
   MOBILE PAGE 2
========================================== */

@media screen and (max-width:900px){

.page02 .content-page{

    margin-top:0;
    padding:35px 24px;

}

.page02 .main-column{

    padding:0;

    background:none;

    backdrop-filter:none;

    border-radius:0;

}

.page02 .page-title{

    font-size:2.6rem;

    max-width:100%;

}

.page02 .question-block{

    margin:28px 0;

    padding-left:18px;

}

.page02 .question-block p{

    font-size:1rem;

}

.page02 .emphasis-block{

    margin-top:30px;

    top:0;

}

.page02 .emphasis-block p{

    font-size:2rem;

    line-height:1.25;

}

}

/* ==========================================
   MOBILE PAGE 3
========================================== */

@media screen and (max-width:900px){

.page03 .page-background{

    background-position:center;

    background-size:cover !important;

    top:0;

}

.page03 .page-title{

    font-size:2.6rem;

}

.page03 .main-column{

    padding:0;

}

.page03 .side-panel{

    position:relative;

    width:100%;

    left:0;

    top:30px;

    margin:0;

}

.page03 .quote{

    margin-top:20px;

}

}

/* ==========================================
   MOBILE PAGE 4
========================================== */

@media screen and (max-width:900px){

.page04 .content-page{

    padding:35px 24px;

}

.page04 .page-title{

    font-size:2.6rem;

}

.page04 .page-body{

    position:relative;
    z-index:2;

}

.page04 .page-body ul{

    margin:22px 0 30px 18px;

}

.page04 .page-body li{

    margin-bottom:10px;

    line-height:1.6;

}

.page04 .emphasis-block{

    margin-top:35px;

}

.page04 .emphasis-block p{

    font-size:2.3rem;

    line-height:1.15;

}

}

/* ==========================================
   MOBILE PAGE 5
========================================== */

@media screen and (max-width:900px){

.page05 .content-page{

    padding:35px 24px;

}

.page05 .page-title{

    font-size:2.6rem;

}

.page05 .info-grid{

    display:block;

}

.page05 .info-label{

    margin-top:18px;

    margin-bottom:4px;

}

.page05 .info-value{

    margin-bottom:14px;

}

.page05 .check-list{

    display:block;

}

.page05 .check-item{

    margin-bottom:16px;

}

.page05 .side-panel{

    width:100% !important;

    margin-top:35px;

}

}

/* ==========================================
   MOBILE PAGE 7
========================================== */

@media screen and (max-width:900px){

.page07 .content-page{

    padding:35px 24px;

}

.page07 .page-title{

    font-size:2.6rem;

}

.page07 .bottom-callout{

    padding:24px;

    margin-top:40px;

}

.page07 .bottom-callout .check-list{

    display:block;

}

.page07 .bottom-callout .check-item{

    margin-bottom:18px;

}

.page07 .check-text{

    font-size:1rem;

    line-height:1.6;

}

}

/* ==========================================================
   MOBILE — PAGE 6
   REGISTER
========================================================== */

@media screen and (max-width:900px){

.page06 .content-page{

    padding:40px 24px 60px;

}

.page06 .page-title{

    font-size:2.4rem;
    line-height:1.1;
    max-width:100%;
    text-align:center;
    margin-bottom:25px;

}

.page06 .page-body{

    display:block;

}

.page06 .main-column{

    max-width:100%;
    padding:0;

}

.page06 .main-column p{

    font-size:1rem;
    line-height:1.8;
    text-align:left;

}

.page06 .emphasis-block{

    margin:35px 0;

}

.page06 .emphasis-block p:first-child{

    font-size:1.6rem;

}

.page06 .emphasis-block p:last-child{

    font-size:1.9rem;

}

.page06 .side-panel{

    position:static;

    width:100%;

    margin:40px 0 0;

}

.page06 .contact-card{

    text-align:center;

}

.page06 .register-button{

    width:100%;

}

}

/* ==========================================================
   MOBILE — PAGE 7
   WE'VE GOT THE DETAILS COVERED
========================================================== */

@media screen and (max-width:900px){

.page07 .content-page{

    padding:40px 24px 60px;

}

.page07 .page-title{

    font-size:2.4rem;

    line-height:1.1;

    margin-bottom:22px;

}

.page07 .main-column{

    max-width:100%;

}

.page07 .main-column p{

    font-size:1rem;

    line-height:1.8;

}

.page07 .bottom-callout{

    margin-top:36px;

    padding:28px 22px;

    border-radius:18px;

}

.page07 .bottom-callout h3{

    text-align:center;

    margin-bottom:22px;

}

.page07 .bottom-callout .check-list{

    display:block;

}

.page07 .bottom-callout .check-item{

    margin-bottom:18px;

}

.page07 .check{

    width:26px;

    height:26px;

    font-size:.9rem;

}

.page07 .check-text{

    font-size:1rem;

    line-height:1.65;

}

}



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

@media screen and (max-width:900px){

.floating-nav{

    top:auto;
    bottom:0;
    left:0;
    right:0;

    transform:none;

    flex-direction:row;

    justify-content:space-between;   /* was space-around */

    align-items:center;

    padding:8px 6px;                  /* smaller */

    gap:2px;                          /* tighter */

    background:rgba(20,20,20,.92);

    backdrop-filter:blur(10px);

    overflow-x:auto;                  /* fallback: lets it scroll instead of overflowing the page */

    -webkit-overflow-scrolling:touch;

}

.floating-nav a{

    background:none;

    padding:6px 4px;

    font-size:.62rem;                 /* smaller so all 7 links fit */

    letter-spacing:.04em;

    white-space:nowrap;

    flex-shrink:1;

}

}

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

@media screen and (max-width:900px){

.page-background{

    background-position:center center !important;

    background-size:cover !important;

}

.cover-image img{

    object-position:center;

}

}

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

@media screen and (max-width:900px){

.register-button,
.submit-registration{

    width:100%;

    font-size:1rem;

    padding:18px;

    border-radius:12px;

}

}

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

@media screen and (max-width:900px){

.page-body,
.main-column{

    max-width:650px;

    margin:auto;

}

}

/* ==========================================
   MOBILE TYPOGRAPHY SYSTEM
========================================== */

@media screen and (max-width:900px){

.page-title{

    font-size:2.45rem !important;

    line-height:1.05;

    margin-bottom:20px;

}

.page-eyebrow{

    font-size:.72rem;

    letter-spacing:.22em;

}

.page-body p{

    font-size:1.02rem;

    line-height:1.8;

    margin-bottom:20px;

}

.question-block p{

    font-size:1rem;

}

.side-panel h3{

    font-size:1.8rem;

}

.quote p{

    font-size:1.5rem;

    line-height:1.4;

}

}

/* ==========================================
   MOBILE SPACING SYSTEM
========================================== */

@media screen and (max-width:900px){

.content-page{

    padding:42px 24px;

}

.section-divider{

    margin-bottom:26px;

}

.page-body{

    margin-top:18px;

}

.question-block{

    margin:28px 0;

}

.side-panel{

    margin-top:36px;

}

.emphasis-block{

    margin-top:36px;

}

}

/* ==========================================================
   SCROLL REVEAL
========================================================== */

.content-page{

    opacity:0;

    transform:translateY(35px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.content-page.visible{

    opacity:1;

    transform:translateY(0);

}

.register-button,
.submit-registration{

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        background-color .25s ease;

}

.register-button:hover,
.submit-registration:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 22px rgba(0,0,0,.18);

}

.register-button:active,
.submit-registration:active{

    transform:scale(.98);

}

/* ==========================================================
   MOBILE — REGISTRATION MODAL
========================================================== */

@media screen and (max-width:900px){

.modal{

    padding:0;

    justify-content:center;

    align-items:flex-start;

    overflow-y:auto;

}

.modal-window{

    width:100%;

    max-width:none;

    min-height:100vh;

    border-radius:0;

    padding:32px 24px 90px;

    margin:0;

    box-shadow:none;

}

.modal-window h2{

    font-size:2.2rem;

    margin-bottom:18px;

}

.modal-window h3{

    font-size:1.6rem;

    margin-top:34px;

}

.modal-window p{

    font-size:1rem;

    line-height:1.7;

}

.modal input,
.modal textarea,
.modal select{

    font-size:16px;      /* prevents iPhone zoom */

    padding:16px;

    border-radius:10px;

}

.submit-registration{

    margin-top:40px;

    padding:18px;

    font-size:1rem;

    border-radius:12px;

}

.close-modal{

    font-size:2.2rem;

    top:18px;

    right:20px;

}

}