:root{
--navy:#031235;
--blue:#6AA1E0;
--gold:#D5AB56;
--gold-dark:#9D6918;
}

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

html{scroll-behavior:smooth;}

body{
font-family:'Montserrat',sans-serif;
overflow-x:hidden;
}

#hero-video{
position:fixed;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2;
}

.video-overlay{
position:fixed;
inset:0;
z-index:-1;
background:linear-gradient(to bottom,
rgba(255,255,255,.16),
rgba(244,248,252,.30),
rgba(172,204,236,.22));
}

header{
position:fixed;
top:0;
left:0;
width:100%;
padding:18px 0;
z-index:100;
}


  

.interior-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:90px;

    display:flex;
    align-items:center;

    background:transparent;

    border:none;
    border-bottom:none;
    padding:18px 32px;

    box-shadow:none;

    z-index:1000;
}


.interior-header.scrolled{
    background:rgba(240,247,255,.96);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-shadow:0 3px 18px rgba(0,0,0,.08);
}

.navbar{
    max-width:1300px;
    margin:auto;

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

    padding:18px 36px;

    background:rgba(255,255,255,.18);
    backdrop-filter:blur(18px);

    border-radius:18px;
}



.brand,
.navbar a{
text-decoration:none;
font-weight:600;
color:var(--navy);
}

.navbar ul{
display:flex;
list-style:none;
gap:34px;
}

.navbar a:hover{
color:var(--blue);
}


.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    background: transparent;
    transition: background-color .35s ease,
                box-shadow .35s ease,
                backdrop-filter .35s ease;
-webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
}

/* After scrolling */
.site-header.scrolled {
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 2px 15px rgba(0,0,0,.08);
}


.hero{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
}

.hero-logo{
width:min(430px,72vw);
filter:drop-shadow(0 0 24px rgba(255,255,255,.6));
}

.floating-kickstarter{
position:fixed;
right:28px;
bottom:28px;
z-index:200;
padding:16px 30px;
border-radius:999px;
text-decoration:none;
font-weight:700;
color:var(--gold-dark);
background:linear-gradient(#fbf3dc,#e7c87d,#d5ab56);
box-shadow:0 8px 24px rgba(213,171,86,.4),0 0 16px rgba(213,171,86,.25);
transition:transform .3s ease,opacity .6s ease,box-shadow .3s ease;
}

.floating-kickstarter:hover{
transform:translateY(-3px);
box-shadow:0 12px 30px rgba(213,171,86,.5),0 0 18px rgba(213,171,86,.35);
}

.nav-scrolled .navbar{
background:rgba(255,255,255,.82);
}

@media(max-width:900px){
.navbar{flex-direction:column;gap:16px}
.navbar ul{flex-wrap:wrap;justify-content:center;gap:16px}
.hero-logo{width:300px}
}




/* =====================================================
   FEATURES PAGE ADDITIONS
   Add this to the END of your existing style.css
   ===================================================== */



.feature-section{
    max-width:1200px;
    margin:70px auto;
    padding:0 30px;
    display:flex;
    align-items:center;
    justify-content:center;
   	flex-direction:row;
        text-align:center;
        gap:35px;
 	
}
    
    .feature-section.reverse{
        
        text-align:center;
        gap:35px;
        margin:70px auto;
 	flex-direction:row-reverse;
    }


.feature-section:first-of-type{

    margin-top:-60px;

    position:relative;

    z-index:2;

}



.feature-media{
    flex:1;
    display:flex;
    justify-content:center;
}


.feature-content{
    flex:1;
    max-width:480px;
}

.feature-content h2{
    font-size:2rem;
    color:#123b63;
    margin-bottom:18px;
}

.feature-content p{
    font-size:1.1rem;
    line-height:1.8;
    color:#5f6775;
}

@media (max-width:900px){

    .feature-section,
    .feature-section.reverse{
        flex-direction:column;
        text-align:center;
        gap:35px;
    }

}

    




/* =====================================================
   FEATURES PAGE ADDITIONS
   Add this to the END of your existing style.css
   ===================================================== */




.feature-media img,
.feature-media video{
    width:100%;
    max-width:520px;
    border-radius:20px;
    display:block;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}




    .feature-content{
        max-width:100%;
    }

    .feature-media img,
    .feature-media video{
        max-width:100%;
    }

 
}







body.features-page #hero-video,
body.features-page .video-overlay{
 display:none !important;
}





/* ===== Guardian Angel Navigation Update ===== */
.navbar a,
.nav-links a,
nav a{
    color:#5A8FCE;
 gap: 2rem;        
    transition:color .25s ease,text-shadow .25s ease;
	 margin-left: auto;
}

.navbar a:hover,
.navbar a:focus,
.navbar a.active,
.nav-links a:hover,
.nav-links a:focus,
.nav-links a.active,
nav a:hover,
nav a:focus,
nav a.active{
    color:#D4AF37;
    text-shadow:
        0 0 1px rgba(255,255,255,.45),
        0 0 8px rgba(212,175,55,.35);
}

.story-goals{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
    margin-top:40px;
}

.goal-card{
    background:rgba(255,255,255,.82);
    border:1px solid rgba(90,143,206,.15);
    border-radius:22px;
    padding:34px;
    box-shadow:0 14px 35px rgba(0,0,0,.05);
    transition:.3s ease;
}

.goal-card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 50px rgba(0,0,0,.08);
}

.goal-card h3{
    color:#12385b;
    margin-bottom:14px;
}

.goal-card p{
    margin:0;
    line-height:1.8;
    color:#5d6e80;
}

/* =====================================================
   OUR STORY ENDING
===================================================== */

.founder-message{

    padding-top:20px;
    padding-bottom:20px;

}

.story-ending{

    text-align:center;
    padding:70px 40px 90px;
    max-width:900px;
    margin:auto;

}

.ending-quote{

    font-size:2rem;
    line-height:1.7;
    color:#12385b;
    font-weight:300;
    max-width:780px;
    margin:auto;

}

.signature{

    margin-top:70px;
    display:flex;
    flex-direction:column;
    gap:10px;

}

.signature .name{

    color:#D4AF37;
    font-size:1.35rem;
    font-weight:700;
    letter-spacing:.5px;

}

.signature .title{

    color:#6b7d90;
    font-size:1rem;
    letter-spacing:2px;
    text-transform:uppercase;

}

/* ===========================================
   FINAL CALL TO ACTION
=========================================== */

.final-cta{

    padding-top:40px;
    padding-bottom:140px;

}

.cta-panel{

    background:rgba(255,255,255,.85);
    border-radius:28px;
    padding:70px 60px;
    text-align:center;
    box-shadow:0 18px 45px rgba(0,0,0,.06);
    border:1px solid rgba(90,143,206,.15);

}

.cta-panel h2{

    color:#12385b;
    font-size:2.4rem;
    margin-bottom:30px;

}

.cta-panel p{

    max-width:760px;
    margin:22px auto;
    line-height:2;
    font-size:1.15rem;
    color:#5c6d80;

}

.cta-divider{

    width:90px;
    height:4px;
    background:#D4AF37;
    margin:40px auto;
    border-radius:20px;

}

.cta-message{

    font-size:1.4rem;
    color:#12385b;
    font-weight:600;
    margin-bottom:40px;

}

.gold-story-button{

    display:inline-block;
    padding:18px 42px;
    background:linear-gradient(180deg,#E6C96C,#D4AF37);
    color:#12385b;
    text-decoration:none;
    font-weight:700;
    border-radius:999px;
    font-size:1.05rem;
    transition:all .3s ease;
    box-shadow:0 12px 28px rgba(212,175,55,.35);

}

.gold-story-button:hover{

    transform:translateY(-3px);
    box-shadow:0 18px 36px rgba(212,175,55,.45);

}

.small-note{

    margin-top:28px;
    font-size:.95rem;
    color:#7b8897;

}

.interior-page{
    background:
        radial-gradient(
            circle at top center,
            rgba(215,236,255,.85) 0%,
            rgba(245,250,255,.95) 35%,
            #ffffff 70%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fbff 45%,
            #e7f2fb 100%
        );
}

.story-page #hero-video,
.story-page .video-overlay,
.faq-page #hero-video,
.faq-page .video-overlay{
    display:none !important;
}

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

.future-section {
    padding: 110px 0;
    background: linear-gradient(
        180deg,
        #f9fcff 0%,
        #eef6ff 100%
    );
}

.future-section .section-tag{
    margin-bottom:18px;
}

.future-section h2{
    text-align:center;
    margin-bottom:20px;
}

.section-intro{
    max-width:760px;
    margin:0 auto 65px;
    text-align:center;
    color:#5f7287;
    line-height:1.8;
}



/* ===================================================
   FEATURE GRID
=================================================== */

.future-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px,1fr)
        );

    gap:30px;

    margin-top:50px;

}




.future-card{

    background:white;

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

    transition:
        transform .35s,
        box-shadow .35s;

    border:1px solid rgba(15,55,95,.06);

    box-shadow:
        0 12px 35px rgba(20,40,70,.05);

}




.future-card:hover{

    transform:
        translateY(-10px);

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

}




.future-icon{

    width:72px;

    height:72px;

    margin:0 auto 24px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #d7ecff,
        #ffffff
    );

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    box-shadow:
        inset 0 0 0 1px rgba(212,175,55,.25);

}




.future-card h3{

    margin-bottom:16px;

    color:#12365f;

}




.future-card p{

    color:#64778d;

    line-height:1.7;

}




.future-note{

    max-width:760px;

    margin:70px auto 0;

    text-align:center;

    font-size:1.05rem;

    color:#506578;

}




/* ===================================================
   CTA
=================================================== */

.cta-section{

    padding:110px 0;

    background:white;

    text-align:center;

}




.cta-section h2{

    margin-bottom:20px;

}




.cta-section p{

    max-width:650px;

    margin:0 auto 40px;

    color:#607487;

    line-height:1.8;

}




/* ===================================================
   SMALL GOLD TAG
=================================================== */

.section-tag{

    display:inline-block;

    padding:10px 18px;

    background:#eef6ff;

    color:#12365f;

    border-radius:50px;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:20px;

}




/* ===================================================
   SPLIT SECTION SPACING
=================================================== */


.story-image img{

    width:100%;
    display:block;
 max-width:560px;
    border-radius:24px;

     box-shadow:
        0 40px 80px rgba(0,0,0,.12);

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}
.story-image img:hover{

    transform:scale(1.02);

    box-shadow:
        0 40px 80px rgba(0,0,0,.12);

}


.story-section h2{
    margin-bottom:18px;
    font-size:2.6rem;
    color:#123b63;
    line-height:1.2;
text-align:center;
}



.story-text p{
    margin-bottom:18px;
    font-size:1.1rem;
    line-height:1.95;
    color:#5f7287;
}

.story-section > .container > h2{
    text-align:center;
    margin-bottom:50px;
}

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



.hero-intro{

    max-width:700px;

    margin:0 auto;

    line-height:1.9;

    color:#5f7287;

}




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

@media(max-width:900px){

.future-grid{

grid-template-columns:1fr;

}



.future-section{

padding:80px 0;

}



.future-card{

padding:32px 24px;

}

}

/* ==========================================
   Bigger Dream
========================================== */

.bigger-dream{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    padding:120px 8%;
    background:#ffffff;
}

.bigger-dream .future-image img{
    width:100%;
    border-radius:22px;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.bigger-dream .future-content{
    max-width:650px;
}

.bigger-dream h2{
    color:var(--navy);
    font-size:2.8rem;
    margin-bottom:25px;
}

.bigger-dream p{
    font-size:1.12rem;
    line-height:1.9;
    color:#5b6770;
    margin-bottom:22px;
}

.future-quote{
    margin-top:45px;
    padding-left:28px;
    border-left:4px solid var(--gold);
    font-size:1.35rem;
    font-style:italic;
   color:#12385b;
    line-height:1.6;
	margin:38px 0;
}


@media (max-width:900px){

    .bigger-dream{
        grid-template-columns:1fr;
        gap:50px;
        text-align:center;
    }

    .future-quote{
        border-left:none;
        border-top:4px solid var(--gold);
        padding-top:24px;
        padding-left:0;
    }
}

/* ==========================================
   FUTURE PAGE ENHANCEMENTS
========================================== */

/* Smooth fade-in */



.story-section:nth-of-type(2){animation-delay:.15s;}
.story-section:nth-of-type(3){animation-delay:.30s;}
.story-section:nth-of-type(4){animation-delay:.45s;}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* Larger section headings */









/* Better image presentation */






/* Quote */




/* CTA */

.final-cta{

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 100%
        );

}


/* Footer */

footer{

    background:#031235;

    color:white;

    text-align:center;

    padding:70px 0;

}

.footer-logo{

    width:220px;

    margin-bottom:30px;

}

.footer-links{

    margin-top:25px;

    display:flex;

    justify-content:center;

    gap:28px;

    flex-wrap:wrap;

}

.footer-links a{

    color:white;

    text-decoration:none;

    opacity:.8;

    transition:.3s;

}

.footer-links a:hover{

    opacity:1;

    color:#D4AF37;

}


/* Mobile */

@media(max-width:900px){

.story-text{

    max-width:620px;

    margin:auto;

}

.future-quote{

    border-left:none;

    border-top:4px solid var(--gold);

    padding-top:24px;

    padding-left:0;

}

.story-image{

    margin-bottom:20px;

}

}

/* =====================================================
   SHARED STORY PAGE LAYOUT
   (Missing from current stylesheet)
===================================================== */

.container{

    width:min(1200px,92%);
    margin:0 auto;

}

.split-layout{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:45px;
    align-items:center;

}

.split-layout.reverse .story-image{

    order:2;

}

.split-layout.reverse .story-text{

    order:1;

}

.story-image{

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

}

.story-text{

    max-width:560px;

}


.email-signup{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:35px}.email-signup input{width:min(420px,90%);padding:16px 20px;border:1px solid rgba(0,0,0,.15);border-radius:999px;font-size:1rem}.kickstarter-page .story-highlight{margin:50px auto;}


@media(max-width:900px){

    .split-layout{

        grid-template-columns:1fr;
        gap:45px;

    }

    .split-layout.reverse .story-image,
    .split-layout.reverse .story-text{

        order:initial;

    }

    .story-text{

        max-width:100%;
        text-align:center;

    }

}






/* FAQ Page */
.page-hero{

    margin-top:0px;

    padding-top:135px;

    padding-bottom:45px;

    text-align:center;

   background:none;

}


.page-hero p{
    color:#5b6b82;
    font-size:1.1rem;
}

.faq-container{
    max-width:900px;
    margin:0 auto 100px;
    padding:0 20px;
}

.faq-item{
    background:#fff;
    border:1px solid rgba(106,161,224,.18);
    border-radius:18px;
    margin-bottom:18px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(3,18,53,.05);
}

.faq-question{
    width:100%;
    background:none;
    border:none;
    padding:22px 26px;
    text-align:left;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:1.1rem;
    font-weight:600;
    color:var(--navy);
    cursor:pointer;
}

.faq-answer{
    display:none;
    padding:0 26px 24px;
    color:#4c5c73;
    line-height:1.8;
}

.faq-item.active .faq-answer{
    display:block;
}


.brand{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.brand img{
    height:100px;
    width:auto;
    display:block;
}

.home-page .navbar{
    justify-content:flex-end;
}

/* ---------- Header ---------- */

.site-header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    pointer-events:auto;

}


/* Logo */

.floating-logo{

    position:fixed;

    top:20px;

    left:28px;

    z-index:1001;

    pointer-events:auto;

}

.floating-logo img{

    width:145px;

    height:auto;

    transition:.3s;

}

.floating-logo img:hover{

    transform:scale(1.05);

}



/* Navigation */

.top-nav{
    position:fixed;
    top:22px;
    right:32px;

    display:flex;
    align-items:right;
    justify-content:flex-end;
    gap:28px;

    background:transparent;
    padding:14px 0;

    z-index:1000;
}

.top-nav a{

    text-decoration:none;

    color:#12365f;

    font-weight:600;

    transition:.25s;

}

.top-nav a:hover{

    color:#D4AF37;

}


.timeline{

display:flex;

justify-content:center;

align-items:flex-start;

flex-wrap:wrap;

gap:0;

margin:60px 0;

}

.timeline-item{

width:150px;

text-align:center;

}

.circle{

width:58px;

height:58px;

margin:auto;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

font-weight:bold;

background:#ffffff;

border:3px solid #d5ab56;

color:#d5ab56;

box-shadow:0 0 15px rgba(213,171,86,.25);

}

.complete .circle{

background:#d5ab56;

color:white;

}

.current .circle{

background:linear-gradient(#fbf3dc,#d5ab56);

color:#fff;

animation:pulse 2s infinite;

}

.line{

height:3px;

width:50px;

background:#d5ab56;

margin-top:28px;

opacity:.35;

}

.line.active{

opacity:1;

}

.timeline h3{

margin-top:18px;

font-size:1rem;

}

.timeline p{

font-size:.9rem;

}


.cta-button{

display:inline-block;

padding:16px 34px;

border-radius:999px;

background:linear-gradient(#fbf3dc,#e7c87d,#d5ab56);

text-decoration:none;

font-weight:700;

color:#55431d;

box-shadow:0 8px 22px rgba(213,171,86,.35);

transition:.3s;

}

.cta-button:hover{

transform:translateY(-3px);

box-shadow:0 12px 30px rgba(213,171,86,.45);

}


.social-grid{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

margin-top:40px;

font-weight:600;

}


@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

.social-icons{

    display:flex;

    justify-content:center;

    gap:40px;

    margin-top:40px;

}

.social-icons a{

    transition:.3s;

}

.social-icons a:hover{

    transform:translateY(-4px) scale(1.08);

}

.social-icons img{

    width:42px;

    height:42px;

    display:block;

}/* ===================================================
   INTERIOR PAGE HEADER
=================================================== */



/* Floating logo */

.interior-logo{
    position:fixed;
    top:14px;
    left:28px;
    z-index:1002;
}

.interior-logo img{
    width:170px;
    height:auto;
    display:block;
    transition:.35s;
}

.interior-header.scrolled .interior-logo img{
    width:145px;
}

.interior-logo img:hover{
    transform:scale(1.04);
}

/* Navigation */

.interior-nav{
    margin-left:auto;

    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:28px;

    padding:14px 28px;

    background:transparent;
    backdrop-filter:none;
    border-radius:0;
    box-shadow:none;
}


.interior-nav a{

    text-decoration:none;

    color:#12365f;

    font-weight:600;

    transition:.25s;

}

.interior-nav a:hover{

    color:#D4AF37;

}



.story-highlight{
    max-width:700px;
    margin:60px auto 30px;
    padding:28px 36px;
    background:#f8fbff;
    border-left:5px solid var(--gold);
    border-radius:18px;
    font-size:1.35rem;
    line-height:1.6;
    color:#12385b;
    font-style:italic;
    text-align:center;
}

.gold-divider{
    width:90px;
    height:4px;
    background:var(--gold);
    border-radius:10px;
    margin:35px auto;
}

.story-section{

    max-width:1100px;

    margin:auto;

    padding:70px 40px;

}

.story-text{

    max-width:760px;
 text-align: center;
    margin:auto;

}


.story-text p{

    font-size:1.15rem;
    line-height:1.9;
    color:#5f7287;

}

.story-hero h5{

    color:#D4AF37;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.story-text{
    max-width:820px;
}




.story-ending{
    padding-top:60px;
}

.founder-message{
    padding-bottom:40px;
}

.final-cta{
    padding-top:50px;
    padding-bottom:80px;
}

.interior-page{
    background:
        radial-gradient(
            circle at top center,
            rgba(215,236,255,.85) 0%,
            rgba(245,250,255,.95) 35%,
            #ffffff 70%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fbff 45%,
            #e7f2fb 100%
        );
}



.site-footer{

    text-align:center;

    padding:60px 20px;

}

.footer-logo{

    width:350px;

    margin-bottom:18px;

}

.footer-tagline{

    margin-bottom:28px;

    opacity:.85;

}

.footer-social{

    display:flex;

    justify-content:center;

    gap:26px;

    margin-bottom:32px;

}

.footer-social img{

    width:34px;

    height:34px;

    transition:.3s;

}

.footer-social img:hover{

    transform:translateY(-4px) scale(1.12);

}



.footer-nav{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;              /* controls spacing */

    width:fit-content;

    margin:28px auto;

    flex-wrap:wrap;

}


.footer-nav a{

    color:#C8A04C;          /* gold from your logo */

    text-decoration:none;

    font-weight:500;

    transition:.25s;

}

.footer-nav span{

    color:#C8A04C;

    opacity:.45;

}

.footer-nav a:hover{

    color:#E5C36A;

}

And add a hover effect:

.footer-legal{

    display:flex;

    justify-content:center;

    gap:24px;

    margin-bottom:22px;

    font-size:.9rem;

}

.copyright{

    opacity:.65;

    font-size:.85rem;

}

.sender-signup{
    display:flex;
    justify-content:center;
    margin:40px auto;
    width:100%;
}

.sender-form-field{
    width:100%;
    max-width:500px;
    margin:0 auto;
}

.feature-section:first-of-type{

    position:relative;

}

.feature-section:first-of-type::before{

    content:"";

    position:absolute;

    left:-120px;
    right:-120px;
    top:-120px;
    height:220px;

    background:radial-gradient(
        ellipse at center,
        rgba(215,236,255,.55),
        transparent 75%
    );

    z-index:-1;

}

.privacy-list{
    max-width:600px;
    margin:25px auto;
    padding-left:20px;
    text-align:left;
}

.privacy-list li{
    margin-bottom:12px;
    line-height:1.7;
}

.page-heading{

    font-family:'Marcellus', serif;

    font-size:2.2rem;

    font-weight:600;
	font-style:italic;
    line-height:1.3;

    letter-spacing:.02em;

    max-width:850px;

    margin:0 auto;

    text-align:center;

    background:linear-gradient(
        180deg,
        #FFF6CF 0%,
        #F2D57A 20%,
        #D4AF37 55%,
        #A97718 100%
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:0 1px 1px rgba(255,255,255,.35);

}

.menu-toggle{

    display:none;

    background:none;

    border:none;

    font-size:34px;

    color:#12365f;

    cursor:pointer;

}

.feature-halo{
display:block;
    width:50px;
    margin:0 auto 6px;

}
.story-wings{

    display:inline-block;
 flex-direction:column;
    align-items:center;
    width:56px;
height:auto;
    margin:0 auto 22px;

    opacity:.5;



}

@media (max-width:768px){



    .interior-logo{

        position:relative;

        top:0;

        left:0;

        display:flex;

        justify-content:center;

        margin-bottom:10px;

    }

    .interior-logo img{

        width:105px;

    }

    .menu-toggle{

        display:block;

        margin:0 auto;

    }

   .interior-nav{
    display:none;

    position:absolute;
    top:78px;          /* starts just below header */
    left:0;
    right:0;

    flex-direction:column;
    align-items:center;
    gap:20px;

    padding:24px 0;

    background:white;
    box-shadow:0 8px 18px rgba(0,0,0,.08);
}

    .interior-nav.open{

        display:flex;

    }
/* Header */
.interior-header,
.site-header{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;

    padding:10px 18px;

    background:white;

    box-shadow:0 3px 14px rgba(0,0,0,.08);
}

/* ===========================
   MOBILE SCROLLED HEADER
=========================== */



    /* Logo */
.interior-logo,
.floating-logo{
    margin:0;
    margin-right:auto;

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



    .interior-logo img,
    .floating-logo img{
        width:62px;
        height:auto;
    }


    /* Hamburger */
.menu-toggle{
    display:block;
    margin-left:auto;

    background:none;
    border:none;

    font-size:28px;

    color:#12365f;

    cursor:pointer;

    transition:.35s ease;
}


    /* Hide menus */
    .interior-nav,
    .top-nav{
        display:none;

        width:100%;

        flex-direction:column;

        align-items:center;

        gap:18px;

        padding:18px 0;
    }

    /* Show when JS adds .open */
    .interior-nav.open,
    .top-nav.open{
        display:flex;
    }


/* Prevent desktop scroll styles on mobile */

.interior-header.scrolled .interior-logo img,
.site-header.scrolled .floating-logo img{
    width:62px;
}

.interior-header.scrolled .menu-toggle,
.site-header.scrolled .menu-toggle{
    font-size:28px;
}


}