@charset "utf-8";
/* CSS Document */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,select{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;color:unset}html{scroll-behavior:smooth}a{text-decoration:none;cursor:pointer}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}button{cursor:pointer;border:none;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}img{max-width:100%;}
/*=== END RESET ===*/

/*=== CLEARFIX ===*/
.clear{clear:both}.cf:before,.cf:after{content:" ";display:table}.cf:after{clear:both}.cf{zoom:1}

/*=== GLOBAL ===*/
.flex-container{display:flex}.flex-vertical{flex-direction:column}.flex-horizontal{flex-direction:row}.flex-width{flex-grow:1;flex-shrink:1;flex-basis:100%}.flex-height{height:100%}.flex-wrap{flex-wrap:wrap}.set-width{flex-grow:0;flex-shrink:0;flex-basis:auto}.justify-center{justify-content:center}.justify-right{justify-content:flex-end}.justify-left{justify-content:flex-start}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.align-center{align-items:center}.align-top{align-items:flex-start}.align-bottom{align-items:flex-end}.align-stretch{align-items:stretch}.align-all-center{align-items:center;justify-content:center}.align-self-center{align-self:center}.align-self-right{align-self:flex-end}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.mobile-only{display: none}.max-width{margin:0 var(--sm-padding)}.map{min-height:350px;line-height:0;}


*,
*::before,
*::after {
    transition: all 0.3s ease !important;
}
a:hover {cursor: pointer !important;}

/*=== SELECT STYLES ===*/
::selection, ::-moz-selection {
	background: var(--red);
	color: var(--white);
	text-shadow: none;
}

:root {
	/*=== Fonts ===*/
    --Libre: "Libre Baskerville", serif;
    --Ballet: "Ballet", "French Script MT", serif;

	/*=== Colors ===*/
	--black: #000000;
	--white: #FFFFFF;
	--primary: #875923;
	--off-white: #F6F3EC;
    
    /*=== Font Sizes ===*/
    --p: clamp(16px, 5vw, 20px);

	/*=== Spacing ===*/
	--lg-padding: clamp(75px, 5vw, 100px);
	--sm-padding: clamp(25px, 2.5%, 2.5%);
}

    .white{color: var(--white)}
    .black{color: var(--black)}
    .primary {color: var(--primary)}
    .gold {color: var(--primary)}
    .off-white{color: var(--offwhite)}

    .bg-white{background: var(--white)}
    .bg-black{background: var(--black)}
    .bg-primary {background: var(--primary)}
    .bg-gold {background: var(--primary)}
    .bg-off-white{background: var(--offwhite)}
	.bg-img {background-image: url("../siteart/amaro-and-oak-moody-menu-bg.png"); background-size: cover; background-position: center center;}


body {
    position: relative;
	font-family: var(--Libre), sans-serif !important;
	height: auto !important;
    overflow-x: hidden;
}

.page-shadow {
	max-width: 1920px!important;
    width: 100%!important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px 0px!important;
    background-color: rgb(255, 255, 255)!important;
    margin: 0 auto!important;
	overflow-x: hidden;
}

p {
    font-size: clamp(16px, 5vw, 18px);
    line-height: 200%;
}

.thick {
	font-family: var(--Libre);
    font-weight: 900 !important;
}

.center {text-align: center;}
.caps {text-transform: uppercase !important;}
.nocaps {text-transform: none !important;}


.xl-heading, .lg-heading, .md-heading, .sm-heading {
	font-family: var(--Libre);
	text-transform: uppercase;
}

.xl-heading-bold {
	font-family: var(--Libre);
	text-transform: uppercase;
    font-weight: 900 !important;
}


.xs-heading {
	font-family: var(--Libre);
    font-weight: 900;
	text-transform: uppercase;
	padding-top: 5px;
    letter-spacing: 10%;
}
.xxl-heading {font-size: clamp(56px, 5vw, 96px);line-height: clamp(56px, 5vw, 96px);}
.xl-heading {font-size: clamp(56px, 5vw, 64px);line-height: clamp(56px, 5vw, 64px);}
.lg-heading {font-size: clamp(34px, 5vw, 42px);line-height: clamp(34px, 5vw, 42px);}
.md-heading {font-size: clamp(27px, 5vw, 35px);line-height: clamp(27px, 5vw, 35px);}
.sm-heading {font-size: clamp(18px, 5vw, 26px);line-height: clamp(18px, 5vw, 26px);}
.xs-heading {font-size: clamp(16px, 5vw, 18px);line-height: clamp(16px, 5vw, 18px);}

.ballet {font-family: var(--Ballet) !important; -webkit-text-stroke: 1px;}

h1.ballet, h2.ballet, h3.ballet, h4.ballet, h5.ballet { margin-bottom: -20% !important;}
h1 > .ballet, h2 > .ballet, h3 > .ballet, h4 > .ballet, h5 > .ballet {transform: translate(1.5rem, 25%) scale(1.1); display: block;}

.thick {
    font-weight: 900 !important;
}
.ital {font-style: italic !important;}

.center {text-align: center;}


.sm-padding {padding: 20px 0;}
.md-padding {padding: 50px 0;}
.lg-padding {padding: 100px 0;}

/*=== BODY STYLES 
============================================*/
.width90 {width: 90%; margin: auto; max-width: 1600px;}

.btn-white {display: block; padding: 10px 25px; border-radius: 0 20px 0 20px; background: radial-gradient(circle at 0% 50%, var(--white) 0%, var(--white) 40%, var(--primary) 70%); background-size: 300% 100%; background-position: left center; transition: .7s ease all; border: 1px solid var(--primary); color: var(--primary); max-width: 220px; text-align: center; font-family: var(--Libre);}
.btn-white:hover { background-position: right center; color: var(--white);}

.btn-black {display: block; padding: 10px 25px; border-radius: 0 20px 0 20px; background: radial-gradient(circle at 0% 50%, var(--black) 0%, var(--black) 40%, var(--white) 70%); background-size: 300% 100%; background-position: left center; transition: .7s ease all; border: 1px solid var(--white); color: var(--white); max-width: 220px; text-align: center; font-family: var(--Libre);}
.btn-black:hover {background-position: right center; color: var(--black);}

.btn-primary {display: block; padding: 10px 25px; border-radius: 0 20px 0 20px; background: radial-gradient(circle at 0% 50%, var(--primary) 0%, var(--primary) 40%, var(--white) 70%); background-size: 300% 100%; background-position: left center; transition: .7s ease all; border: 1px solid var(--primary); color: var(--white); max-width: 220px; text-align: center; font-family: var(--Libre);}
.btn-primary:hover {background-position: right center; color: var(--black);}

/*=== HEADER STYLES
==============================*/
.mobile-menu-callout {display: none; margin-top: 50px;}
.mobile-menu-callout a > div {display: flex;flex-direction: column; border-radius: 10px; border: 1px solid var(--primary); width: calc(100% - 20px); margin: auto; overflow: hidden;}
.mobile-menu-callout a > div > span {padding: 10px 10px 0 10px;}
.mobile-menu-callout a > div > .btn-primary {margin: 10px auto;}
.mobile-menu-callout a > div > .xs-heading {font-size: 14px !important; letter-spacing: 10% !important; color: var(--primary);}

.header-wrap {position: sticky; top: 0; z-index: 90; width: 100%; background: var(--black);}
.header-color-wrap { background: var(--accent3);}
.header { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;}
.header-right {display: flex; justify-content: flex-end; align-items: center; margin-left: auto; gap: 5px;}
.last-link {background: var(--primary); color: var(--accent3) !important; border-radius: 1000px;}
a:has(.header-logo) { flex: 1 0 0;}
.header-logo {width: auto; height: 100%; max-height: 80px; min-width: 0px; object-fit: contain;}

#toast-booking-widget.toast-button .toast-booking-widget {padding: 0 !important; border-radius: 1000px; max-width: none; background: transparent; width: auto;}
#toast-booking-widget.toast-button .toast-booking-widget > *:not(button) {display: none !important;}
#toast-booking-widget.toast-button .toast-booking-widget > button {display: block; padding: 10px 25px; border-radius: 0 20px 0 20px; background: radial-gradient(circle at 0% 50%, var(--black) 0%, var(--black) 40%, var(--primary) 70%); background-size: 300% 100%; background-position: left center; transition: .7s ease all; border: 1px solid var(--white); color: var(--white); max-width: 220px; text-align: center; font-family: var(--Libre) !important;}
#toast-booking-widget.toast-button .toast-booking-widget > button svg {display: none !important;}
#toast-booking-widget.toast-button .toast-booking-widget > button:hover {background-position: right center; color: var(--white);}

/*=== FOOTER STYLES
==============================*/
.footer-wrap {background: linear-gradient(to top, rgba(0,0,0,0.5) 300px, rgba(0,0,0,1) 500px), url("/siteart/aragon-logo-white.png"), url("/siteart/aragon-1.jpg"); background-size: cover; background-position: center center; padding: 50px 0 300px 0; border-top: 1px solid var(--primary);}
.footer-wrap > div {display: flex; justify-content: space-between; align-items: flex-start; gap: 50px; flex-wrap: wrap;}
.footer-wrap > div > * {flex: 1 0 0;}
.footer-wrap .footer-logo {margin-right: 10vw; min-width: 200px;}
.footer-wrap div ul {margin-bottom: 20px; color: var(--white);}
.footer-wrap div ul li {margin-top: 10px; display: block;}
.footer-wrap div ul li a:not(.btn-primary)::after {content: ''; display: flex; width: 0px; max-width: 100px; height: 1px; background: var(--primary); transform: translateX(5px);}
.footer-wrap div ul li a:not(.btn-primary):hover {transform: translateX(-5px);}
.footer-wrap div ul li a:not(.btn-primary):hover i {color: var(--primary);}
.footer-wrap div ul li a:hover::after {width: 100%;}

/*=== iFRAME FUNCTIONALITY
==============================*/
#iframeOverlay {position: fixed; inset: 0; background: rgba(0,0,0,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: .3s ease; z-index: 99999;}
#iframeOverlay.active {opacity: 1; visibility: visible;}
.iframeModal {position: relative; width: min(1400px, 90vw); height: min(900px, 90vh); background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 25px 80px rgba(0,0,0,.35);}
#popupIframe {width: 100%; height: 100%; border: 0; display: block; padding: 50px 20px;}
.closeIframe {position: absolute; top: 15px; right: 15px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: .2s ease;}
.closeIframe:hover {background: rgba(0,0,0,.85);}
body.iframe-open {overflow: hidden;}

/*=== HOME PAGE 
==============================*/
.home-hero {position: relative; min-height: calc(100vh - 200px); overflow: hidden !important; display: flex; align-items: center;}
.hero-video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;}
.hero-overlay {position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.5)); z-index: 1;}
.home-hero-content {position: relative; z-index: 3; display: flex; flex-direction: column; height: 100%; justify-content: center; align-items: center; gap: 20px; color: var(--white); background: linear-gradient(rgba(0,0,0,0)); text-align: center;}
.home-hero-content h1 {max-width: 1000px;}
.home-hero-content hr {height: 2px; width: 100%; background: var(--white); max-width: 500px; margin: 0 !important;}
.home-hero-content p {max-width: 500px;}
.hero-badge {position: absolute; z-index: 2; bottom: 0; right: 0; height: auto; width: clamp(300px, 40vw, 100%); opacity: 0.15; transform: translateY(40%) rotate(-20deg);}

.half-photo {display: flex; justify-content: space-between; align-items: stretch; gap: 50px;}
.half-photo-text {flex: 1 1 0; display: flex; flex-direction: column; gap: 20px; justify-content: center;  align-items: flex-start; height: auto; padding: 50px 0;}
.half-photo-img {flex: 1.5 1 0;}
.half-photo-img > img {display: block; height: 100%; width: 100%; object-fit: cover;}
.half-photo-img-split {display: flex; justify-content: space-between; align-items: stretch; gap: 10px; height: 100%;}
.half-photo-img-split > img {display: block; height: 100%; width: 50%; object-fit: cover;}
.half-photo-img-split > img:nth-child(1) {transform: translateY(-10%)}
.half-photo-img-split > img:nth-child(2) {transform: translateY(+10%)}

.vesper-marquee {background: linear-gradient(to top, var(--black) 0%, var(--black) 50%, var(--white) 50%, var(--white) 100%);}
.vesperSwiper .swiper-wrapper {transition-timing-function: linear !important;}
.vesper-marquee:hover .swiper-wrapper {animation-play-state: paused;}
.vesper-marquee {width: 100%; overflow: hidden; padding: 40px 0;}
.vesper-marquee .swiper-wrapper {display: flex; width: max-content; animation: vesperMarquee 40s linear infinite;}
.vesper-marquee .swiper-slide {flex: 0 0 calc(100vw - 40px); width: 200px !important; aspect-ratio: 4 / 3; border-radius: 0; overflow: hidden; background: #ddd; margin-left: 10px;}
.vesper-marquee .swiper-slide img {width: 100%; height: 100%; object-fit: cover; display: block;}
.vesper-marquee .swiper-slide:nth-child(4n+1) {transform: translateY(-20px);}
.vesper-marquee .swiper-slide:nth-child(4n+2) {transform: translateY(20px);}
.vesper-marquee .swiper-slide:nth-child(4n+3) {transform: translateY(-10px);}
.vesper-marquee .swiper-slide:nth-child(4n+4) {transform: translateY(10px);}
@media (min-width: 768px) {.vesper-marquee .swiper-slide {flex: 0 0 calc(50vw - 30px); width: calc(50vw - 30px);}}
@media (min-width: 1024px) {.vesper-marquee .swiper-slide {flex: 0 0 calc(33.333% - 20px); width: calc(33.333% - 20px);}}
@media (min-width: 1400px) {.vesper-marquee .swiper-slide {flex: 0 0 calc(25% - 20px); width: calc(25% - 20px);}}
@keyframes vesperMarquee {from {transform: translateX(0);} to {transform: translateX(-50%);}}

/* CARDS */

.card-container{
    --gap: 5px;
    --active-ratio: 0.6;
    --desc-max-height: 200px;
}

.card-container{display: flex; gap: var(--gap);}

.card-container .card{flex: 0 0 calc((100% - ((var(--count) - 1) * var(--gap))) * (1 - var(--active-ratio)) / (var(--count) - 1)); background: #000; position: relative; height: 500px; font-size: 14px; text-align: left; line-height: 1.5; color: #fff;  overflow: hidden; cursor: pointer; transition: transform .25s ease, flex-basis .5s ease; will-change: flex-basis, transform; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);}
.card-container .card:before{content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.25) 50%,rgba(0, 0, 0, 1) 100%); opacity: 1; transition: opacity .25s ease; z-index: 9;}
.card-container .card:after{position: absolute; top: 8px; right: 8px; font-family: "Font Awesome 6 Free"; font-size: 20px; font-weight: 900; line-height: 1; text-shadow: 0px 0px 20px rgba(0,0,0,0.25); content: "\f055"; z-index: 999;}
.card-container .card img{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .25s ease; transform: translateZ(0); will-change: transform; z-index: 0;}
.card-container .card:hover img{transform: scale(1.03);}

.card-container .card .card-content{position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-rows: auto 0fr; gap: 3px; align-content: end; transition: grid-template-rows .25s ease; padding: 15px; z-index: 9;}
.card-container .card .card-content h3{display: block; transition: transform .2s ease; color: #fff;}
.card-container .card .card-content .card-details{max-height: 0; opacity: 0; overflow: hidden; transition: opacity 1s ease, max-height 1s ease; max-width: 500px;}
.card-container .card .card-content .card-details ul{display: flex; flex-wrap: wrap; margin-top: -2px; font-weight: 600; font-style: italic;}
.card-container .card .card-content .card-details ul li:after{position: relative; top: -3px; font-family: "Font Awesome 6 Free"; font-size: 4px; font-weight: 900; content: "\f111"; padding: 0 8px;}
.card-container .card .card-content .card-details ul li:last-child:after{content: ""; padding: 0;}
.card-container .card .card-content .card-details p {margin: 10px 0; line-height: 120%;}
.card-container .card .card-content .card-details p a{margin-left: 3px; white-space: nowrap; font-weight: 700; text-decoration: underline;}
.card-container .card .card-content .card-details p a:hover{text-decoration: none;}

.card-container .card:not(.active):hover:before{opacity: .5;}
.card-container .card:not(.active):hover .card-content strong{transform: translateY(-2px);}

.card-container .card.active{flex-basis: calc((100% - ((var(--count) - 1) * var(--gap))) * var(--active-ratio)); cursor: default;}
.card-container .card.active:after{display: none;}
.card-container .card.active img{transform: scale(1.02);}
.card-container .card.active .card-content{grid-template-rows: auto 1fr;}
.card-container .card.active .card-content .card-details{max-height: none; opacity: 1;}

@media screen and (max-width: 1050px){
    .card-container{flex-wrap: wrap;}
    .card-container .card{flex: none; width: 100%; height: 75px; transition: height .5s ease; will-change: height;}
    .card-container .card:before{background: linear-gradient(180deg,rgba(0, 0, 0, 0.35) 0%,rgba(0, 0, 0, 0.65) 50%,rgba(0, 0, 0, 0.85) 100%);}
    .card-container .card.active{flex: none; width: 100%; height: 350px;}
    .card-container .card.active:before{background: linear-gradient(180deg,rgba(0, 0, 0, 0.65) 0%,rgba(0, 0, 0, 0.65) 50%,rgba(0, 0, 0, 0.85) 100%);}
}

.promo-banner {margin: 20px auto;}
.promo-banner > div {display: flex; justify-content: space-between; align-items: stretch; gap: 50px;}
.promo-banner > div > div {flex: 1 1 0 ;display: flex; flex-direction: column; height; 100%; justify-content: center;}
.promo-banner-img img {display: block; height: 100%; width: auto; object-fit: cover;}
.promo-banner-text {padding: 50px 5%;}
.promo-banner-text > h1,
.promo-banner-text > h2,
.promo-banner-text > h3,
.promo-banner-text > p {max-width: 500px;}
















/*=== MEDIA BREAKS
==============================*/
@media screen and (max-width: 1000px) {
    .half-photo {flex-direction: column;}
    .half-photo-text {order: 1 !important;}
    .half-photo-img {order: 2 !important;}
	.promo-banner > div {flex-direction: column;display: block}
	

}