:root { --olive: #55663f; --olive-d: #47563a; --cream: #f8f5ef; --clay: #c48b6f; --ink: #4a4a3c; --bs-body-font-family: 'Montserrat',sans-serif; --bs-body-color: var(--ink); --bs-body-bg: var(--cream) }
body { font-size: .9rem }
h1, h2, h3, h4, .serif { font-family: 'Cormorant Garamond',serif; font-weight: 400 }
em, .accent { font-style: italic; color: var(--clay) }
.label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500 }
.btn-clay { background: var(--clay); color: #fff; border-radius: 0; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; padding: .8rem 1.6rem }
.btn-clay:hover { background: #b3775b; color: #fff }
.btn-ghost { border: 1px solid var(--clay); color: #fff; border-radius: 0; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; padding: .8rem 1.6rem }
.btn-ghost:hover { background: rgba(255,255,255,.15); color: #fff }

/*Video background-----------------*/
#VideoBannerHome { max-height: 100% }
#VideoBannerHome video { max-width: 100% }

.toggle-play-button, .toggle-mute-button { float: right; margin-bottom: 34px; color: #fff; font-size: 38px; }
.toggle-play-button, .toggle-mute-button:hover { cursor: pointer }
.content-VideoBannerHome { display: table; width: 100%; min-height: 90vh; z-index: 1; position: relative; }
#banner-aboutus .content-VideoBannerHome { min-height: auto; }

.content-VideoBannerHome .inner { display: table-cell; vertical-align: bottom; text-align: center; padding-left: 16px; padding-right: 16px; }

.content-VideoBannerHome .inner h1,
.content-VideoBannerHome .inner h2 { color: white; text-shadow: 0px 1px 3px rgba(0,0,0,0.5); }

.content-VideoBannerHome .inner h1 { font-size: 62px; }

.video-background-controls button { font-size: 32px; display: inline-block; padding: 0px; margin: 0px; height: 32px; width: 32px; border-radius: 16px; line-height: 32px; border: none; background: none; appearance: none; color: white; filter: drop-shadow(0px 0px 1px black); cursor: pointer; opacity: 1; transition: all 250ms ease-in-out; margin-left: 10px; }

.video-background-controls button:hover { opacity: 0.5; }

:root { --seek-bar-thumb-color: #fff; --seek-bar-progress-background: #fff; --seek-bar-background: rgba(255, 255, 255, 0.4); }

.seek-bar-wrapper { height: 6px; background: var(--seek-bar-background); position: relative; }

.seek-bar-progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: hidden; background: transparent !important; border: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; }

.seek-bar-progress::-webkit-progress-bar { background: transparent; }

.seek-bar-progress::-webkit-progress-value { background: var(--seek-bar-progress-background); }

.seek-bar-progress::-moz-progress-bar { background: var(--seek-bar-progress-background); }

.seek-bar { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; top: calc(50% - 10px); z-index: 1; display: block; width: 100%; height: 20px; margin: 0; cursor: pointer; background: transparent; }

.seek-bar { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; top: calc(50% - 10px); z-index: 1; display: block; width: 100%; height: 20px; margin: 0; cursor: pointer; background: transparent; }

.seek-bar::-webkit-slider-runnable-track { -webkit-appearance: none; appearance: none; height: 6px; cursor: pointer; background: transparent; border: 0; border-radius: 0; }

.seek-bar::-moz-range-track { -moz-appearance: none; appearance: none; width: 100%; height: 6px; cursor: pointer; background: transparent; border: 0; border-radius: 0; }

.seek-bar::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: 3px; cursor: pointer; background: var(--seek-bar-thumb-color); border: 0; border-radius: 8px; transform: translateY(-50%); transition: opacity 0.4s ease-in-out; }

.seek-bar::-moz-range-progress { margin-top: 0; background: transparent; border: 0; }

.seek-bar::-moz-range-thumb { -moz-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: 0; cursor: pointer; background: var(--seek-bar-thumb-color); border: 0; border-radius: 8px; transition: opacity 0.4s ease-in-out; }

.seek-bar-wrapper ::-webkit-slider-thumb { opacity: 0; }

.seek-bar-wrapper ::-moz-range-thumb { opacity: 0; }

.seek-bar-wrapper:hover .seek-bar:not([disabled])::-webkit-slider-thumb { opacity: 1; }

.seek-bar-wrapper:hover .seek-bar:not([disabled])::-moz-range-thumb { opacity: 1; }
/*Video background end-----------------*/

/* image placeholders: drop real files in /img, gradient shows until then */
.ph { background: var(--img) center/cover no-repeat,linear-gradient(135deg,#b8763a,#6d5a3a 60%,#546147) }
/* nav */
.navbar { background: linear-gradient(rgba(40,50,35,.55),transparent) }
.navbar .nav-link { color: #fff; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500 }
.navbar {padding:0 }
/* hero */
.hero { min-height: 100vh; color: #fff; display: flex; align-items: center; text-align: center; position: relative; z-index: 10; /*--img: url(img/Banner.jpg)*/ }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(30,40,30,.35),rgba(30,40,30,.15) 60%,rgba(30,40,30,.5)) }
.hero .container { position: relative }
.hero h1 { font-size: clamp(2.4rem,6vw,3.6rem) }
.hero p { font-family: 'Cormorant Garamond',serif; font-style: italic; font-size: 24px; max-width: 803px; margin: 1rem auto 1.8rem }
.scroll { position: absolute; bottom: 0.5rem; left: 0; right: 0;  }
.scroll a { font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: #fff ;text-decoration:none}
.scroll i {font-size:16px }
/* sections */
.section { padding: 5rem 0 }
.section h2 { font-size: 58px }
/*.section p {font-size:24px}*/

/*#section2 { max-width: 820px }*/
#section2 p { color: #000; font-size: 24px }

.quote { font-family: 'Cormorant Garamond',serif; font-style: italic; font-size: 1.15rem; font-weight: 500; }
.stat { padding: .5rem 1.5rem }
.stat .n { font-family: 'Montserrat',serif; font-size: 1.5rem; color: var(--clay) }



.banner { color: #fff; background: #546048; position: relative; overflow: hidden; }
.banner .art { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; --img: url(img/Craft-Your-Own-Stories.jpg) }
.banner .art::before { content: ""; position: absolute; inset: 0; /*background: linear-gradient(90deg,var(--olive),transparent 28%)*/ }
.banner .copy { position: relative; max-width: 600px; padding: 2.5rem; text-align: left; }
.banner h3 { font-size: 58px}
#contact p, .banner .copy p {font-size:17px}
#contact i { font-size: 16px }
#contact .copy {bottom:-50px}


@media(max-width:767px) { .banner .art { position: relative; width: 100%; height: 220px }
    .banner .copy { padding: 1.5rem }
}

.banner.light { background: var(--cream); color: var(--ink);}
.banner.light .art { --img: url(img/Tailor-Made.jpg) }
.banner.light .art::before { /*background: linear-gradient(90deg,var(--cream),transparent 55%) */}
/* carousel */
.escape { min-height: 850px; color: #fff; position: relative; display: flex; align-items: flex-end }

/*.escape::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(30,35,25,.65),transparent 60%) }*/

.escape::before {background:var(--img) center / cover no-repeat, linear-gradient(135deg, #b8763a, #6d5a3a 60%, #3f4c33) }

.escape .container { position: relative; padding-bottom: 5rem }

.carousel-inner h3 {font-size:48px !important}
.carousel-inner p { font-size: 17px }

.tag { display: inline-block; background: rgba(0,0,0,.4); padding: .2rem .6rem; font-size: .55rem; letter-spacing: .14em; text-transform: uppercase }
.thumbs { position: absolute; right: 1.5rem; bottom: 1.5rem; z-index: 5; display: flex; gap: .6rem }
.thumbs button { width: 220px; height: 190px; border: 2px solid transparent; padding: 0; background-size: cover; background-position: center }
.thumbs button.active { height:260px;border:1px solid var(--clay) }

@media(max-width:767px) {
    .thumbs { display: none }
}
/* craft */
.craft { background: #546147 url(img/the-craft.png) no-repeat; color: #efeadc;/* box-shadow: 1px -41px 62px 5px var(--olive); */position: relative; z-index: 10; background-size:100% auto; }
.craft .quote { color: #efeadc; font-size: 24px }
.craft .card { background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: 0; color: #dcd6c4; padding: .6rem }
.craft .card .ph { height: 260px }

.craft .card p{ font-size:17px }
.craft .card h4 { color: #fff; font-style: italic; font-size:40px; border-bottom: 1px solid #fff; float: left; padding-bottom: 11px; }
.craft .card h4:hover { border-bottom: 1px solid var(--clay);color:var(--clay) }
.craft .card:hover {border:1px solid var(--clay) }
/* chronicles */
.chron { border-bottom: 1px solid var(--clay); padding-bottom: .6rem }
.chron-card { background: #fff; padding: .7rem; height: 100%;border: 1px solid #fff }

.chron-card h5 { font-size: 24px; letter-spacing: .06em; text-transform: uppercase; color: var(--olive); margin: .7rem 0; font-family: 'Cormorant Garamond',serif }
.chron-card small { color: var(--clay); font-size: 14px; letter-spacing: .12em; text-transform: uppercase }
.chron-card p {font-size:17px}
/* js states */
.navbar { transition: background .3s,padding .3s }
.navbar.scrolled, .navbar.open { background: #47563a47; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.navbar .nav-link.active { color: var(--clay) }
.thumbs { bottom: 4.5rem;overflow: hidden;width:48% }
/* thumbnail carousel: .thumbs is the window, .thumbs-track slides inside it */
.thumbs-track { display: flex; gap: .6rem; flex: none; transition: transform .5s ease; will-change: transform }
.thumbs-track button { flex: 0 0 auto; opacity: .75; transition: opacity .3s; background-position: center; }
.thumbs-track button.active, .thumbs-track button:hover { opacity: 1 }

.thumbs-track button div { position: absolute; bottom: 22%; width: 220px; }
.thumbs-track button.active div { bottom: 0; }

.thumbs-track button p { color: #fff; text-transform: uppercase; font-size: 12px; }

#news { padding: 2rem 0; }

@media(prefers-reduced-motion:reduce) { .thumbs-track { transition: none }
}
.arrows { position: absolute; left: 52%; bottom: 1.5rem; z-index: 5; display: flex; gap: .6rem }
.arrows button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #fff; background: transparent; color: #fff; line-height: 1 }
.arrows button:hover { background: var(--clay) }
.modal-content { border-radius: 0; background: var(--cream) }
.form-control, .form-select { border-radius: 0; background: #fff }
footer { background: #546147; color: #dcd6c4; padding: 3rem 0; font-size: .75rem }
footer a { color: #dcd6c4; text-decoration: none;font-size:17px }
footer a:hover { color: #fff }
.soc { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;margin-right:10px }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px }

#philosophy { background: url(img/philosophy-soul.png) no-repeat;background-size: 100% auto; }

.chron-card:hover { border: 1px solid var(--clay);cursor:pointer }
#footer-bottom a {font-size:12px}

@media(min-width:768px) {
    .stat + .stat { border-left: 2px solid #d8cfc0 }
}

.chron-card img { height: auto; width: 100%; }

@media(min-width:1024px) {
    .chron-card img { height: 270px }
    .banner { height:500px }
}

@media(max-width: 1023px) {
    .banner { height: auto }
}

@media(min-width: 768px) and (max-width:1023px) {
   
}