:root{
    --color-primary:#561c27;
    --color-secondary: #94a5a6;
    --color-white:#ffffff;
    --color-black:#000000;
}
*, *::before, *::after { box-sizing: border-box; font-family: "ratiomodern", sans-serif; font-style: normal; font-weight:400; margin: 0; }
html{ font-size: 10px; }
body{ margin:0; }
.ratio-light { font-family: "ratiomodern", sans-serif; font-weight: 400; font-style: normal; }
.ratio-italic { font-family: "ratiomodern", sans-serif; font-weight: 400; font-style: italic; }
.ratio-bold { font-family: "ratiomodern", sans-serif; font-weight: 800; font-style: normal; }
.ratio-regular { font-family: "ratiomodern", sans-serif; font-weight: 500; font-style: normal; }

.amandine-regular { font-family: "amandine", sans-serif; font-weight: 400; font-style: normal; }
.amandine-italic { font-family: "amandine", sans-serif; font-weight: 400; font-style: italic; }
.amandine-bold { font-family: "amandine", sans-serif; font-weight: 700; font-style: normal; }
.amandine-bold-italic { font-family: "amandine", sans-serif; font-weight: 700; font-style: italic; }
.sr-only {display:none;}

header { background-color:var(--color-primary); background-position: center; background-size: cover; background-image:url(../images/header-bg-mobile.webp); }
header .banner { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; gap:8rem; height: clamp(70rem,75vh,100rem); padding:3rem; }
.thank-you header .banner { height: clamp(50rem,57vh,80rem); }
header .logo { 
  width:25rem; 
  height:auto; 
}
@media(min-width: 700px) {
  header { background-image:url(../images/header-bg-a.webp); }
  header .logo { max-width: 25%; }
}

header .sub-banner, 
.top-banner { color:#fff; background-color:var(--color-primary); text-align: center; padding:1.5rem; }
header .sub-banner .title, 
.top-banner .title { font-size: 2.2rem; }

section.form { background-color:var(--color-white); display: flex; justify-content: center; align-items: center; background-image: url(../images/mid-bg-pattern.svg); }
section.form .form-wrapper { background-color: transparent; color: var(--color-primary); text-align: center; width: clamp(20rem, 100%, 80rem); padding: 7rem 4rem; } 
section.form .content {display: grid;gap: 1rem;grid-template-columns: 1fr;}
section.form .title { font-size:4rem; color:var(--color-black); line-height: 1.2; }
section.form .subtitle { font-size:3rem; text-transform:capitalize; }
section.form .blurb { font-size:2rem; }
section.form .list-title { font-size:2rem; color:var(--color-primary); text-transform: capitalize; }
section.form .perks {font-size:1.5rem;list-style: none;max-width: 55rem;padding: 0;margin: 2rem auto;display: grid;gap: 0.5rem;}
section.form .perks li { font-size: 1.8rem; }
section.form .perks strong { font-weight: 600; }
section.form .form-container { margin-top:3rem; }

section.page-banner { background-image: url(../images/banner-bg.webp); height: clamp(30rem,50vw,90rem); background-position: center; background-size: cover; background-repeat: no-repeat; }

section.map-section { background-color: var(--color-primary); color:var(--color-white); padding: 9rem 5rem 0; background-image:url(../images/footer-bg-pattern.svg);}
section.map-section .map-wrapper {display:grid;grid-template-columns:1fr;gap:2rem;    max-width: 1200px;
    margin: 0 auto;}
section.map-section .map { position: relative; padding-top: 40rem; height: 0; }
section.map-section .map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.map-section .content { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; font-size: 15px; }
section.map-section .content .title { text-transform: capitalize; margin-bottom: 3rem;line-height: 1.5; font-size:2.2rem;}
section.map-section .content ul { display: grid; gap: 1rem;padding-left: 2rem; }

footer { --footer-gap:4rem; background-color: var(--color-primary); color:var(--color-white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap:var(--footer-gap); padding:9rem 1.5rem 1rem; background-image:url(../images/footer-bg-pattern.svg);}
footer .footer-inner { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: calc(var(--footer-gap) / 2); width: clamp(20rem,80%,90rem); }
footer .footer-logo { width: clamp(30rem, 30vw, 70rem); }
footer .info-wrapper { display: grid; grid-template-areas: "top" /*"bot-left" */"bot-right"; width: 100%; gap:2rem; }
footer .info-wrapper .info { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 0.5rem; text-align: center; }
footer .info-wrapper .top { grid-area: top; }
footer .info-wrapper .bot-left { grid-area: bot-left; }
footer .info-wrapper .bot-right { grid-area: bot-right; }
footer .info-wrapper .info .title { color:var(--color-white); font-size:1.8rem; font-weight:600 }
footer .info-wrapper .info .info-content p { font-size:1.5rem; font-weight:300; line-height: 1.5; }
footer .info-wrapper .info .info-content p.disclaimer { font-size:1.2rem; margin-top:0.4rem; }
footer .info-wrapper .info .info-content a,  .pop-up-main a { color:inherit; font-weight:300; text-decoration: none; }
footer .info-wrapper .info .info-content a:hover, footer .info-wrapper .info .info-content a:focus { text-decoration: underline; }
footer .footer-bottom { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 2rem; text-align: center;width: 100%; }
footer .footer-bottom .disclaimer { font-size:1.2rem; font-weight:300; }
footer .socials {display: flex;justify-content: center;gap:1rem;}
footer .info-wrapper .info .info-content .sns-link { font-size: 2rem; display: flex; align-items: center; gap: 1rem; }
footer .sns-link svg { --square: 2.5rem; fill:var(--color-white); width: var(--square); height: var(--square); transition: fill 300ms; }
footer .sns-link:hover svg, footer .sns-link:focus svg { fill:var(--color-white); }
footer .copy-jump {width:100%;display: flex; justify-content: center;max-width:1600px;align-items: center;gap:2rem;flex-wrap: wrap;flex-direction:column;}
footer .jumpem {font-size: 1.2rem; display: flex; justify-content: center; align-items: center;}
footer .jumpem svg {height: 1.2rem;}


.pop-up-container { width: 100%; height: 100vh; background-color: rgba(0, 0, 0, .3); display: flex; position: fixed; top: 0; left: 0; justify-content: center; align-items: center; }
.pop-up-main { background-color: var(--color-primary); max-width: 100%; font-size: 1.8rem; text-align: center; padding: 2rem; position: relative; max-height: 100%; overflow: auto;}
.pop-up-main .close-btn { position: absolute; margin: 1rem; top: 0; right: 0; cursor: pointer; font-family: Arial, Helvetica, sans-serif;background:transparent;border: none; color:#fff;font-size: 1.8rem;}
.popup-inner {display: grid;gap:2rem;grid-template-columns:1fr;align-items: center;}
.popup-inner .left {display: grid;gap:3rem;grid-template-columns:1fr;align-items: center;}
.popup-inner .title {font-size: 3.5rem;font-weight:600;text-transform: uppercase;}
.popup-inner p {margin-bottom:1rem;}
.popup-inner img {max-width:100%;max-height:300px;}
.popup-inner .btn {background-color:var(--color-secondary);color:#fff;border-radius:3rem;border:2px solid var(--color-secondary);display: inline;transition:background-color .35s;padding:1rem 3rem; margin: 0 auto;}
.popup-inner .btn:hover, .popup-inner .btn:focus {background-color:transparent;}

@media(min-width:767px){
    header .logo { width:33rem; height:auto; }
    header .sub-banner .title, 
    .top-banner .title { font-size: 2.6rem; }

    section.form .title {font-size:5rem;}
    section.form .form-wrapper { padding: 6rem 8rem; }
    
    section.map-section .map-wrapper { grid-template-columns:repeat(2, 1fr); }
    section.map-section .content {max-width: 85%;}
    section.map-section .content .title { font-size:2.5rem;}

    /*footer .info-wrapper { grid-template-areas: "top top" "bot-left bot-right"; gap:0; }*/
    .pop-up-main .close-btn {font-size: 2.8rem;}
    .popup-inner {grid-template-columns:30% 1fr;}
    .pop-up-main {font-size: 2.8rem;max-width:80%;padding: 5rem;}
    .popup-inner .title {font-size: 4.5rem;}
    .popup-inner img {max-height:unset;}
}