:root {
    --aspect-r: calc(100vw / 1.69);
}
#large-hero-nav {min-height: 600px;}
#large-hero-nav-title {max-width: 300px;transition: max-width .5s;}
#large-hero-body {max-width: 410px;transition: max-width .5s;}
.large-hero-cta.second {background-color: #ffffff;color: var(--s-color);border-color: var(--s-color);}
#why-45th-distilling {background: #F2EEE2;width: 100%;display: flex;flex-direction: column;padding: 0 16px;transition: padding .5s;align-items: center;justify-content: center;}
#why-45th-distilling-wrapper {display: flex;flex-direction: column;align-items: center;padding: 80px 0;gap: 40px;width: 100%;max-width: 1328px;transition: padding .5s;}
#why-45th-distilling-header {display: flex;flex-direction: column;align-items: center;justify-content: flex-start;}
#why-45th-distilling-title {font-size: 40px; font-family: var(--font-h); line-height: 40px; letter-spacing: 1.6px; text-transform: uppercase;margin-bottom: 12px;}
#why-45th-distilling-description {font-size: 16px; font-family: var(--font-r); letter-spacing: 0.16px;}
#why-45th-distilling-highlights {display: grid;grid-template-columns: 1fr;gap: 16px;}
.why-45th-distilling-card {display: flex;padding: 40px 32px;flex-direction: column;align-items: flex-start;gap: 24px;background: #FFFBEE;border-radius: 5px;}
.why-45th-distilling-card img {display: flex;width: 76px;height: 76px;padding: 13px 25px;justify-content: center;align-items: center;border-radius: 100px;border: 1px solid var(--s-color);}
.why-45th-distilling-card-info {display: flex;flex-direction: column;align-items: flex-start;width: 100%;}
.why-45th-distilling-card-info h3 {font-family: var(--font-m);font-size: 24px;letter-spacing: 0.48px;margin-bottom: 8px;line-height: 24px;}
.why-45th-distilling-card-info p {font-family: var(--font-r);font-size: 16px;letter-spacing: 0.16px;margin: 0;padding: 0;}

#distilling-capabilities {background: #211919;width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;overflow:hidden;}
#distilling-capabilities-wrapper {display: flex;flex-direction: column;align-items: center;padding: 80px 16px;gap: 40px;width: 100%;max-width: 1328px;transition: padding .5s;}
#distilling-capabilities-header {display: flex;flex-direction: column;align-items: center;justify-content: flex-start;}
#distilling-capabilities-title {color: #F7F7F7;font-size: 40px; font-family: var(--font-h); line-height: 40px; letter-spacing: 1.6px; text-transform: uppercase;margin-bottom: 12px;}
#distilling-capabilities-description {color: #F7F7F7;font-size: 16px; font-family: var(--font-r); letter-spacing: 0.16px;}
#distilling-capabilities-highlights {display: grid;grid-template-columns: 1fr;gap: 24px;}
.distilling-capabilities-card {display: flex;flex-direction: column;align-items: flex-start;gap: 24px;}
.distilling-capabilities-card-info {display: flex;flex-direction: column;align-items: flex-start;width: 100%;}
.distilling-capabilities-card-info h3 {color: #F7F7F7;font-family: var(--font-m);font-size: 20px;letter-spacing: 0.4px;margin-bottom: 8px;}
.distilling-capabilities-card-info ul {display: flex;list-style-image: url('/project/graphics/icons/check.svg');margin: 0;padding-left: 24px;padding-top: 0;gap: 12px;flex-direction: column;}
.distilling-capabilities-card-info ul li {color: #F7F7F7;font-family: var(--font-r);font-size: 16px;line-height: 24px;letter-spacing: 0.16px;}
.image-strip {display: flex;gap: 16px;overflow-x: auto;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;padding: 1rem 0 120px 0;}
.image-strip::-webkit-scrollbar {display: none;}
.image-card {flex: 0 0 300px;      /* fixed column width */scroll-snap-align: start;border-radius: 8px;overflow: hidden;}
.image-card img {width: 100%;height: 300px;object-fit: cover;display: block;}

#faq {display: flex; flex-direction: column; align-items: center; justify-content: flex-start;}
#faq-wrapper {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; max-width: 1100px; padding: 80px 16px;transition: padding .7s;}
.faq-title {font-family: var(--font-h);font-size: 32px; color: #141313; margin-bottom: 40px; letter-spacing: 1.28px;text-align: center;}
.faq-item {display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;width: 100%;height: 61px;overflow: hidden;transition: height, .5s;box-shadow: 4px 4px 12px #0000001A;margin-bottom: 16px;cursor: pointer;}
.faq-item-question {display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start;width: 100%;font-family: var(--font-h);font-size: 14px;color: #141313;padding-left: 16px;padding-top: 20px;padding-right: 16px;transition: padding .7s, font-size .7s;}
.faq-item-question span {display: inline-block;color: var(--s-color);margin-left: 16px;width: 12px;text-align: center;}
.faq-item-answer {display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;padding: 24px 16px 32px 16px;font-family: var(--font-r);font-size: 16px;line-height: 1.3em;}


#contact-wrapper {display: flex; flex-direction: column; align-items: center; justify-content: center;width: 100%;background-color: #F7F7F7;padding: 80px 16px;transition: padding .5s;}
#contact-us {width: 100%;}
#contact-inner {display: flex; flex-direction: column; align-items: flex-start;width: 100%; max-width: 1100px;}
#contact-hours {display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;width: 100%;margin-bottom: 56px;}
#contact-hours-inner {display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;width: 100%; max-width: 320px;}
.contact-block {display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%;}
.contact-sub-header {font-family: var(--font-r);font-size: 16px; letter-spacing: 1.6px;text-transform: uppercase;margin-bottom: 17px;}
.contact-header {font-family: var(--font-h);font-size: 24px; color: #000000; margin-bottom: 48px;line-height: 30px;}
.contact-info-wrapper {display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px;margin-bottom: 48px;}
.contact-info-item {display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 16px;font-family: var(--font-m); font-size: 16px; letter-spacing: 0.32px;color: var(--s-color);}
.contact-info-item a {font-family: var(--font-m); font-size: 16px; letter-spacing: 0.32px;color: var(--s-color);}
.contact-description {font-family: var(--font-r);font-size: 16px; letter-spacing: 0.32px;max-width: 410px;}
.contact-block a:focus, .contact-block a:hover, .contact-block a:active, .contact-block a:visited {text-decoration-color: var(--s-color);}
#form-header {width: 100%;display: flex;flex-direction: column;align-items: center;text-align: center;margin-bottom: 84px;}

/*OVERRIDES*/
#form-wrapper {background-color: transparent;align-items: center;padding: 0;}
.form-title {text-align: center;text-transform: uppercase;}
.form-description {text-align: center;margin-bottom: 0;max-width: unset;}
.submit-button {justify-content: flex-start;}
.form-row-info {position: absolute;top: 16px;left: 195px;margin-left: unset}
.form-submit {background-color: var(--s-color);color: #f7f7f7;margin-right: 24px;}
.form-items {padding: 0;}

@media only screen and (min-width: 500px) {

}
@media only screen and (min-width: 570px) {
    #why-45th-distilling-highlights {grid-template-columns: repeat(2, 1fr);}
    #why-45th-distilling {padding: 0 20px;}

    #distilling-capabilities-highlights {grid-template-columns: repeat(2, 1fr);}
    #distilling-capabilities {padding: 0 20px;}

    #contact-wrapper {padding: 96px 20px;}
    #distilling-capabilities-wrapper {padding: 100px 16px;}
    #why-45th-distilling-wrapper {padding: 100px 0;}
}
@media only screen and (min-width: 700px) {
    #large-hero-body {max-width: 610px;}
    #faq-wrapper {padding: 80px 32px;}
    #contact-wrapper {padding: 96px 32px;}
    #distilling-capabilities-wrapper {padding: 120px 16px;}
    #why-45th-distilling-wrapper {padding: 120px 0;}
}
@media only screen and (min-width: 800px) {
    #form-wrapper {align-items: flex-start;}
    .form-description {text-align: left;}
    #contact-inner {flex-direction: row;}
}
@media only screen and (min-width: 900px) {
    #large-hero-nav-title {max-width: unset;}
    #why-45th-distilling {padding: 0 32px;}
    #distilling-capabilities-wrapper {padding: 120px 32px;}
    .faq-item-question {padding-left: 40px;}
    .faq-item-question {font-size: 18px;}
    .faq-item-answer {padding: 24px 40px 32px 40px;}
}
@media only screen and (min-width: 1000px) {
    #faq-wrapper {padding: 80px 64px;}
    #why-45th-distilling {padding: 0 64px;}
    #distilling-capabilities-wrapper {padding: 120px 64px;}
    #contact-wrapper {padding: 96px 64px;}
}
@media only screen and (min-width: 1250px) {
    #why-45th-distilling-highlights {grid-template-columns: repeat(3, 1fr);}
    #distilling-capabilities-highlights {grid-template-columns: repeat(4, 1fr);}
}
