/* Import Styles */
@import url('reset.css');
@import url("base.css");
@import url('color.css');
@import url('typography.css');
@import url("component.css?v=1");


/* Header */
:root{
  --header-height:24rem;
}
@media(width < 768px){
  :root{
    --header-height: 16rem;
  }

}

header{position: fixed; left: 0; top: 0; width: 100%; padding: var(--gutter) 0; z-index: 9999; isolation: isolate; transition: var(--transition);}
header.header-bg{background-color: var(--lighter-grey);}
header.header-bg:not(.header-scrolled){min-height: var(--header-height);}
header.header-bg + *{margin-top: var(--header-height);}
header.header-bg.no-bg:not(.header-scrolled){background: none;}
header.header-bg.no-bg:not(.header-scrolled) nav{border: 1px solid var(--light-grey);}
header::after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #fff,  rgba(255,255,255,0)); content: ""; z-index: -1;}
.logo{display: flex; flex-direction: column; align-items: center; gap: 1rem;}
.logo p{font-size: var(--fs-lg); font-family: var(--headding-font-regular); line-height: 1; text-align: center;}
.logo img{max-width: 4.5rem;}
header .container > :not(:last-child){margin-bottom: var(--gutter);}
nav{background-color: white; max-width: 67rem; margin-inline: auto; border-radius: 3rem; margin-bottom: 0 !important;}
nav a{display: flex; align-items: center; justify-content: center; flex: 1 0 0%; height: 5.4rem; text-align: center; color: var(--dark-grey); position: relative; transition: var(--transition);}
nav a.active, nav a:hover{color: var(--secondary-green);}
header.home-header{background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);}
@media(width < 768px){
    header{padding: var(--gutter-half) 0;}
    .logo img{max-width: 3.5rem;}
    .logo p{font-size: var(--fs-sm);}
    header .container > :not(:last-child){margin-bottom: var(--gutter-half);}
    /* Mobile: once scrolled, give the fixed header a solid backing so the
       logo/wordmark/burger no longer overlap the page content beneath it.
       (The desktop header-scrolled rules live in the width > 767px block.) */
    header.header-scrolled{background-color: #fff; box-shadow: 0 .2rem .6rem rgba(0,0,0,0.08);}
}
@media(width > 767px){
  nav{display: flex; align-items: center; justify-content: center; border: .1rem solid var(--light-grey); box-shadow: 0 .2rem .4rem rgba(0,0,0,0.1);}
  nav a:not(:last-child)::after{position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: .1rem; height:50%; background-color: var(--light-grey); content: ""; }
  .burger{opacity: 0; visibility: hidden;}
  header .logo img, header .logo p{transition: var(--transition);}
  header.header-scrolled{padding-top: var(--gutter-half); padding-bottom: var(--gutter-half);}
  header.header-scrolled .logo img{max-width: 2.5rem;}
  header.header-scrolled .logo p{font-size: 1.2rem;}
  header.header-scrolled .container > :not(:last-child){margin-bottom: var(--gutter-half);}
}
@media(width < 768px){
  nav{max-width: 32rem; padding-top: 7rem; transition: var(--transition); opacity: 0; visibility: hidden; position: absolute; left: 50%; transform: translateX(-50%); width: 100%;}
  nav a{font-size: 2.4rem;}
  nav a:not(:last-child){border-bottom: .1rem solid #e5e5e5;}
  nav.active{opacity: 1; visibility: visible;}
}
@media(width < 576px){
  nav{max-width: 28rem;}
}




/* Hero Section */

.hero-section .container{display: flex; justify-content: center;}
.hero-section-content > :not(:last-child){margin-bottom: var(--gutter);}
@media(width < 992px){
  .hero-section{padding: var(--sm) 0;}  
}


.hero-section{ display: flex; align-items: flex-end; justify-content: center; padding: var(--md) 0; width: 100%; height: 110dvh;}
.hero-section{position: relative; isolation: isolate;}
.hero-section::after{position:absolute; left:0; top:5%; width: 100%; height: 100%; pointer-events: none; background: url(../images/hero-shape.png) center bottom no-repeat; background-size: 100% auto; content: ""; z-index: 1; aspect-ratio: 1;}
.hero-section .container{position: relative; z-index: 2; transform: translateY(var(--md));}
.hero-section::before{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-color: rgba(255,255,255,0.2); content: ""; z-index: 0;}
@media(width < 1500px){
  .hero-section::after{background-size: 120% auto;}
}
@media(width < 1300px){
  .hero-section::after{background-size: 140% auto;}
}
@media(width < 768px){
  .hero-section{height: 100dvh;}
   .hero-section::after{background-size: 180% auto;}
  .hero-section .container{position: relative; z-index: 2; transform: translateY(50%);}
}


/* Parallax Image */
.parallax-window{background: transparent; position: relative; overflow: hidden;}














footer{position: relative;}
footer .mobile, footer .desktop{width: 100%;}
.footer-content{position: absolute; left: 50%; bottom: 8rem; transform: translateX(-50%); z-index: 99; padding: 2rem 7rem; border-radius: 10rem; background-color: white;}
.footer-content > :not(:last-child){margin-bottom: var(--gutter-half);}
.copyright{font-size: var(--fs-sm); color: var(--light-grey); text-align: center;}
.copyright a{color: var(--light-grey); transition: var(--transition);}
.copyright a:hover{color: var(--secondary-green); text-decoration: underline;}
.footer-content ul{display: flex; align-items: center; justify-content: center;}
.footer-content ul li a{font-size: var(--fs); color: var(--dark-grey); height: 2.5rem; line-height: 1; text-align: center; white-space: nowrap; display: flex; align-items: center; justify-content: center; padding: 0 2rem; transition: var(--transition);}
.footer-content ul li a:hover{color: var(--secondary-green);}
.footer-content ul li:not(:last-child) a{border-right: .1rem solid var(--light-grey);}
.footer-logo{position: absolute; left: 50%; top: 0; transform: translate(-50%, -80%); z-index: 99; width: 8rem; height: 8rem; display: grid; place-items: center; background-color: white; border-radius: 100%; padding: 1rem; border: .1rem solid var(--light-grey); box-shadow: .2rem .2rem .5rem rgba(0,0,0,10%);}
.footer-logo img{max-width: 80%; max-height: 80%;}
@media(width < 768px){
  .footer-content{padding: 2rem var(--gutter); bottom: var(--gutter); padding: 0; border-radius: 0; background: none; max-width: 100%;}
  .footer-content > :not(:last-child){margin-bottom: 0;}
  .footer-content ul{display: none;}
  .footer-logo{display: none;}
  .copyright{white-space: nowrap;}
  .copyright, .copyright a{color: white;}
  .copyright a:hover{color: white; text-decoration: underline;}
}

/* Section */
.section{padding: var(--xl) 0;}
@media(width < 1200px){
  .section{padding: var(--lg) 0;}
}
@media(width < 992px){
  .section{padding: var(--md) 0;}
}

.section-block:not(:last-child){margin-bottom: var(--gutter);}

.footer-article > :not(:last-child){margin-bottom: var(--gutter-half);}
.footer-article > :first-child > :not(:last-child){margin-bottom: var(--gutter);}
.footer-article h4{margin-left: auto; text-align: right;}

.box-article > :not(:last-child){margin-bottom: var(--gutter);}
.box-article-header > :not(:last-child){margin-bottom: 1rem;}
.box-articledetails{display: flex; flex-wrap: wrap; align-items: center; gap: 1rem var(--gutter);}
.box-articledetails p{white-space: nowrap;}
.box-articledetails > *{color: var(--light-grey);}
.box-articledetails > .flex{gap: 0 .5rem;}
@media(width < 768px){
  .box-article .btn{width: 100%;}
}

.slider-section-header h3{font-size: calc(var(--h3) + .6rem); font-weight: 700; color: var(--primary-green); text-align: center; position: relative; line-height: 1; padding-bottom: 2rem; position: relative;}
.slider-section-header h3::after{position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 80%; height: .1rem; content: ""; background-color: var(--light-grey);}
.card-slider-warpper{padding: var(--gutter) 0 3.5rem; overflow: hidden;}
.card-slide{border-radius: 3rem; border: .1rem solid var(--light-grey);}
.card-slide figure{border-radius: 3rem 3rem 0 0; overflow: hidden; aspect-ratio: 1.4/1;}
.card-slide figure img{object-fit: cover; width: 100%; height: 100%;}
.card-slide-content{padding: 1.5rem;}
.card-slide-content h4{text-align: center; line-height: 1.2;}
.card-slide-content h4:not(:last-child){margin-bottom: 1rem;}
.card-slide-details{display: flex; align-items: center; justify-content: space-around; gap: 1rem;}
.card-slide-details p{display: flex; align-items: center; gap: .5rem; color: var(--light-grey); white-space: nowrap; font-size: 1.2rem;}
.card-slide-details p img{max-height: 1.4rem;}
.card-slide .btn:not(:first-child){margin-top: var(--gutter);}

.card-slider .swiper-slide:hover{opacity: 1 !important;}
.card-slider .swiper-slide{position: relative; padding-bottom: 15rem;}
.card-slide-date{margin-top: var(--gutter); display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);}
.card-slide-date span{display: grid; place-items: center; width: 6rem; height: 6rem; border-radius: 100%; background-color: var(--light-grey); font-family: var(--headding-font-bold); color: white; font-size: 2.4rem;}
.card-slide-date .line{width: .2rem; height: 4rem; background-color: var(--light-grey); margin-top: 2rem;}
.card-slider-range input{width: 100%;}
.card-slide{position: relative;}
.card-slide-badge{position: absolute; left: 2rem; top: 0; z-index: 2; width: 2.8rem; height: 4.2rem; background-color: rgba(20, 20, 20, .7); padding: .6rem .4rem; display: flex; align-items: flex-end; justify-content: center;}
.card-slide-badge svg{width: 2rem; height: 2rem;}
.card-slide-date-badge{position: absolute; right: 1rem; top: 1rem; z-index: 2; padding: .4rem .9rem; background: rgba(20, 20, 20, .7); color: #fff; font-size: 1.2rem; font-weight: 600; letter-spacing: .02em; border-radius: .4rem; line-height: 1;}
@media(width > 1024px){
  .card-slider .swiper-slide .card-slide{transition: all linear 300ms; opacity: 0;}
  .card-slider  .swiper-slide.swiper-slide-active .card-slide{zoom: 80%; opacity: 40%;}
  .card-slider  .swiper-slide.swiper-slide-next .card-slide{zoom: 90%; opacity: 80%;}
  .card-slider  .swiper-slide.swiper-slide-next + * > .card-slide{opacity: 1;}
  .card-slider  .swiper-slide.swiper-slide-next + * + * > .card-slide{zoom: 90%; opacity: 80%;}

  .card-slider  .swiper-slide.swiper-slide-next .card-slide{zoom: 100%; opacity: 100%;}
  .card-slider  .swiper-slide.swiper-slide-next + * > .card-slide{zoom: 80%; opacity: 40%;}

  .card-slider .swiper-wrapper{align-items: flex-end; opacity: 1;}
  .slider-arrows{display: none;}
}
@media(width < 1025px){
  .card-slider-range{display: none;}
  .card-slider-warpper{padding-bottom: 0;}
  .card-slide-date .line{display: none;}
  .card-slider .swiper-slide{padding-bottom: 8rem;}
  .card-slider-warpper{padding-left: 5rem; padding-right: 5rem;}
  .card-slider-box{padding-left: 0; padding-right: 0;}
}
.card-slider-warpper{position: relative;}
.slider-arrows .slider-arrow-prev, .slider-arrows .slider-arrow-next{position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer;}
.slider-arrows .slider-arrow-prev{left: 1.5rem;}
.slider-arrows .slider-arrow-next{right: 1.5rem;}

.card-slider-range{position: relative; height: 5rem !important; background: none !important; isolation: isolate;}
.card-slider-range::after{position: absolute; left: 0; top: 50%; transform:translateY(-50%); content: ""; background: var(--light-grey); width: 100%; border-radius: 3rem; height: 1rem; z-index: -1;}
.card-slider-range .swiper-scrollbar-drag{height: 5rem; border-radius: 3rem; background: url(../images/circle.png) 95% center no-repeat var(--primary-green);}

.browse-header:not(:last-child){margin-bottom: var(--gutter);}
.browse-header{display: flex; align-items: center; justify-content: center; gap: 0 2rem;}
.browse{border-radius: 5rem; border: .1rem solid var(--light-grey); background-color: white; padding: 1rem; display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: var(--gutter-half) var(--gutter);}
.browse a:not(.btn), .browse .browse-search-icon{padding: 0 2rem; display: block;}
.browse button{cursor: pointer;}
.browse-wrap{position: relative;}
@media(width < 768px){
  .browse{display: flex; flex-direction: column; gap: 0; border-radius: 3rem;}
  .browse > :first-child{margin-bottom: 2rem;}
  .browse > :nth-child(2){margin-bottom: 2rem;}
  .browse > *{width: 100%; display: flex; justify-content: center;}
  .browse > :nth-child(3){padding-bottom: 3rem; margin-bottom: 3rem; position: relative;}
  .browse > :nth-child(3)::after{position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 50%; height: .1rem; background-color: var(--light-grey); content: "";}
  /* Home blog card: stack the All Posts / Read Full Post buttons full-width
     so the labels have room instead of wrapping/clipping side by side. */
  .post-card-actions{flex-direction: column; align-items: stretch;}
  /* BMaC support CTA (Home/About/Contact): let the long configured label wrap
     to a second line and grow the pill, keeping the text and cup icon centred
     together instead of stranding the icon at the right edge. */
  .bmac-support-btn{height: auto; min-height: var(--btn-height); padding-top: 1rem; padding-bottom: 1rem;}
  .bmac-support-btn .bmac-support-label{text-align: center; line-height: 1.35;}
  /* Leafed section headers: when the title is long enough to wrap (e.g.
     "CONTACT US BY FORM" in the narrow Contact card), centre it so the two
     lines sit neatly between the flanking leaves instead of left-aligned. */
  .browse-header{gap: 0 1.5rem;}
  .browse-header h4{text-align: center;}
}

.page-hero{min-height: 50dvh; position: relative; isolation: isolate;}
.page-hero::before{position: absolute; left: 0; top: 0; width: 100%; height: 90dvh; content: ""; pointer-events: none; z-index: -1;}
.page-hero-1::before{ background: url('../images/page-hero-bg-1.png') right top no-repeat; background-size: contain;}
.page-hero-2::before{ background: url('../images/page-hero-bg-2.png') right top no-repeat; background-size: contain;}
@media(width < 1200px){
  .page-hero{min-height: 40dvh;}
}
@media(width < 992px){
  .page-hero{min-height: 30dvh;}
}


.contact-section{background: url('../images/contact-bg-image.png') right bottom no-repeat; background-size: auto;}
.section-header:not(:last-child){margin-bottom: var(--xl);}
.section-header > :not(:last-child){margin-bottom: var(--gutter);}
.section-header h1:not(:last-child){margin-bottom: var(--gutter-half);}
.contact-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sm);}
.contact-form ul li:not(:last-child){margin-bottom: var(--gutter);}
.contact-form ul li:last-child{margin-top: calc(var(--gutter) *2);}
.form-control{height: 5rem; width: 100%; background-color: var(--lighter-grey); border: 0; border-radius: 2rem; padding: 0 2rem;}
textarea.form-control{padding: 2rem; resize: none; min-height: 25rem;}
.form-control::placeholder{opacity: 1; color: var(--medium-grey);}
.form-control:focus::placeholder{opacity: 0; color: transparent;}
.contact-form ul li button{max-width: 80%; margin-inline: auto; display: block; cursor: pointer;}
.contact-details{padding-left: var(--xl);}
.contact-details h4:not(.headding-font-bold){color: var(--dark-grey); font-family: var(--font-family);}
.contact-details ul li{padding: var(--gutter-half) 0; border-bottom: .1rem solid var(--light-grey); font-family: var(--font-family); display: grid; grid-template-columns: 3rem 1fr; gap: 1rem;}
.contact-details ul li a{color: var(--dark-grey); transition: var(--transition);}
.contact-details ul li a:hover{color: var(--secondary-green);}
.contact-details ul:not(:last-child){margin-bottom: var(--md);}
.other-links{display: flex; flex-wrap: wrap; align-items: center; gap:1rem var(--gutter);}
.other-links a{display: grid; place-items: center; width: 7rem; height: 7rem; background-color: var(--primary-green); border-radius: 100%; transition: var(--transition);}
.other-links a:hover{background-color: var(--dark-green);}
.other-links a img{max-width: 60%; max-height: 60%;}
.contact-details{padding-top: var(--gutter);}
/* Desktop: sit the support button level with "Send Message" (same 3-gutter gap below it as in the form box) */
@media(width > 991px){
  .contact-details{display: flex; flex-direction: column;}
  .contact-support{margin-top: auto; margin-bottom: calc(var(--gutter) * 3);}
}
@media(width < 1200px){
  .section-header:not(:last-child){margin-bottom: var(--lg);}
  .contact-details{padding-left: 0;}
}
@media(width < 992px){
  .contact-section{background-size: 100% auto;}
  .section-header:not(:last-child){margin-bottom: var(--md);}
  .contact-grid{grid-template-columns: 1fr;}
  .contact-form ul li button{max-width: 100%;}
  .contact-form ul li:last-child{margin-top: 0;}
  .other-links{gap:1rem var(--gutter-half);}
  .other-links a{width: 5rem; height: 5rem;}
}

.video-player-section{position: relative;}
.video-player-section-tag{position: absolute; left: 75%; top: -2px; width: 6rem; height: 8rem; background-color: var(--secondary-green); display: flex; align-items: flex-end; justify-content: center; padding: 2rem 1rem;}
.video-player-section-tag img{max-width: 80%;}
.video-player-section video, .video-player-section iframe{width: 100%; height: auto; aspect-ratio: 16/9;}

.video-play-btn{width: clamp(8rem, 10%, 15rem); aspect-ratio: 1; border-radius: 100%; background-color: var(--primary-green); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; cursor: pointer;}
.video-play-btn img{max-width: 40%; max-height: 40%; transform: translateX(10%);}
@media(width < 768px){
  .video-player-section-tag{width: 5rem; height: 7rem; padding: 1rem;}
}
@media(width < 576px){
  .video-player-section-tag{width: 4rem; height: 6rem; padding: 1rem;}
}

/* .suggessions{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter);} */
.suggessions-button-wrap{margin-top: var(--md); text-align: center;}
.suggessions-button-wrap .btn{max-width: 33.33%;}
@media(width < 1025px){
  /* .suggessions{grid-template-columns: repeat(2, 1fr);} */
  .suggessions-button-wrap{margin-top: var(--gutter);}
 .suggessions-button-wrap .btn{max-width: 100%;} 
}
@media(width < 576px){
  /* .suggessions{grid-template-columns: 1fr} */
}

.single-post-page{margin-top: calc(var(--md) * -1); position: relative; z-index: 1;}
@media(width < 768px){
  .single-post-page{margin-top: 0; padding-top: var(--gutter);}
}


.article-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter);}
.article-grid p:not(:last-child){margin-bottom: var(--gutter);}
.article-grid figure img{object-fit: cover; width: 100%; height: 100%;}
@media(width > 1199px){
  .article-grid.left figure{margin-left: calc( ((100vw - var(--container-width)) / 2) * -1);}
  .article-grid.right figure{margin-right: calc( ((100vw - var(--container-width)) / 2) * -1);}
}
@media(width < 1200px){
  .article-grid.left figure{margin-left: calc(var(--gutter) * -1);}
  .article-grid.right figure{margin-left: calc(var(--gutter) * -1);}
}
@media(width > 991px){
  .article-grid.left figure{order: 1;}
  .article-grid.left .article-content{order: 2;}
}
@media(width < 992px){
  .article-grid.left figure{margin-right: calc(var(--gutter) * -1);}
  .article-grid.right figure{margin-right: calc(var(--gutter) * -1);}
  .article-grid{grid-template-columns: 1fr;}
}

/* Full-width gallery slideshow: fixed height, natural-width slides so photos are never cropped on desktop */
.full-width-gallery-slider .swiper-slide{width: auto;}
.full-width-gallery-slider figure{position: relative; height: clamp(28rem, 30vw, 46rem); overflow: hidden; background-color: var(--lightest-grey);}
.full-width-gallery-slider figure img{display: block; width: auto; max-width: none; height: 100%;}
.full-width-gallery-slider figcaption{position: absolute; left: 0; right: 0; bottom: 0; padding: 5rem 2rem 1.6rem; color: white; font-family: var(--headding-font-regular); font-size: var(--fs-lg); line-height: 1.3; background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0)); pointer-events: none;}
.gallery-arrow{position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); display: grid; place-items: center; width: 5.4rem; height: 5.4rem; padding: 0; border: 0; border-radius: 100%; background-color: rgba(255,255,255,.92); color: var(--primary-green); box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.2); cursor: pointer; transition: var(--transition);}
.gallery-arrow:hover{background-color: var(--primary-green); color: white;}
.gallery-arrow:focus-visible{outline: .3rem solid var(--secondary-green); outline-offset: .3rem;}
.gallery-arrow svg{width: 2.4rem; height: 2.4rem;}
.gallery-arrow-prev{left: var(--gutter);}
.gallery-arrow-next{right: var(--gutter);}
@media(width < 641px){
  .full-width-gallery-slider figure{width: 86vw; height: 58vw;}
  .full-width-gallery-slider figure img{width: 100%; object-fit: cover;}
  .full-width-gallery-slider figcaption{padding: 4rem 1.5rem 1.2rem; font-size: var(--fs-sm);}
  .gallery-arrow{width: 4.4rem; height: 4.4rem;}
  .gallery-arrow-prev{left: var(--gutter-half);}
  .gallery-arrow-next{right: var(--gutter-half);}
}
.full-width-gallery-slider figure{cursor: zoom-in;}
.full-width-gallery-slider figure:focus-visible{outline: .3rem solid var(--secondary-green); outline-offset: -.3rem;}

/* Full-screen photo viewer (opened from a gallery slideshow) */
html.photo-viewer-open{overflow: hidden;}
.photo-viewer{width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(12,12,12); color: white; overflow: hidden;}
.photo-viewer[open]{display: flex; align-items: center; justify-content: center;}
.photo-viewer:focus{outline: none;}
.photo-viewer::backdrop{background: rgb(12,12,12);}
.photo-viewer-figure{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; width: calc(100vw - 18rem); height: 100%; padding: 7rem 0 3rem;}
.photo-viewer-figure img{display: block; max-width: 100%; max-height: calc(100dvh - 18rem); width: auto; height: auto; object-fit: contain; user-select: none;}
.photo-viewer-figure figcaption{max-width: 90rem; text-align: center; font-family: var(--headding-font-regular); font-size: var(--fs-lg); line-height: 1.4; color: rgba(255,255,255,.92);}
.photo-viewer-count{position: absolute; top: 2.8rem; left: 3rem; margin: 0; font-size: var(--fs-sm); letter-spacing: .1rem; color: rgba(255,255,255,.7);}
.photo-viewer-close{position: absolute; top: 1.6rem; right: 1.6rem; display: grid; place-items: center; width: 5rem; height: 5rem; padding: 0; border: 0; border-radius: 100%; background-color: rgba(255,255,255,.14); color: white; cursor: pointer; transition: var(--transition);}
.photo-viewer-close:hover{background-color: rgba(255,255,255,.28);}
.photo-viewer-close:focus-visible{outline: .3rem solid var(--secondary-green); outline-offset: .3rem;}
.photo-viewer-close svg{width: 2.2rem; height: 2.2rem;}
.photo-viewer-prev{left: 3rem;}
.photo-viewer-next{right: 3rem;}
@media(width < 768px){
  .photo-viewer-figure{width: 100vw; padding: 7rem 0 10rem;}
  .photo-viewer-figure img{max-height: calc(100dvh - 24rem);}
  .photo-viewer-figure figcaption{padding: 0 var(--gutter-half); font-size: var(--fs-sm);}
  .photo-viewer-count{top: 2.6rem; left: var(--gutter-half);}
  .photo-viewer .gallery-arrow{top: auto; bottom: 2.4rem; transform: none;}
  .photo-viewer-prev{left: calc(50% - 6.4rem);}
  .photo-viewer-next{right: calc(50% - 6.4rem);}
}
/* Links and pop-ups within Fletcher's text (Services on Home; Casa Anglicana and Saint Felix on About) */
.text-link{color: var(--primary-green); text-decoration: underline; text-underline-offset: .3rem;}
.text-link:hover{color: var(--dark-green);}
.info-dialog{width: calc(100% - (var(--gutter) * 2)); max-width: 64rem; max-height: calc(100dvh - (var(--gutter) * 2)); margin: auto; overflow: auto; padding: 0; border: 0; border-radius: 2rem; color: var(--text-color); box-shadow: 0 2rem 6rem rgba(0,0,0,.25);}
.info-dialog::backdrop{background: rgba(20,20,20,.55);}
.info-dialog-inner{position: relative; padding: var(--md) var(--md) var(--gutter);}
.info-dialog-inner > :not(:last-child){margin-bottom: var(--gutter);}
.info-dialog-inner > p:first-of-type{padding-right: 4rem;}
.info-dialog-inner p{white-space: pre-wrap;}
.info-dialog-close{position: absolute; top: 1.6rem; right: 1.6rem; display: grid; place-items: center; width: 4.4rem; height: 4.4rem; padding: 0; border: 0; border-radius: 100%; background: var(--lightest-grey); color: var(--dark-grey); cursor: pointer; transition: var(--transition);}
.info-dialog-close:hover{background: var(--primary-green); color: white;}
.info-dialog-close:focus-visible{outline: .3rem solid var(--secondary-green); outline-offset: .3rem;}
.info-dialog-close svg{width: 2rem; height: 2rem;}
@media(width < 768px){
  .info-dialog-inner{padding: var(--gutter) var(--gutter-half) var(--gutter-half);}
}
.full-banner{aspect-ratio: 2.4/1; overflow: hidden;}
.full-banner img{width: 100%; height: 100%; object-fit: cover;}

.full-banner-article{margin-top: calc(var(--gutter) * -1); position: relative; z-index: 1; padding-bottom: var(--lg);}
.testimonial-slider-container{margin-top: calc(var(--gutter) * -1); position: relative; z-index: 1;}
.testimonial-slide{padding-left: var(--gutter); padding-right: var(--gutter);}
.testimonial-slide h4{color: var(--light-grey);}
.testimonial-slider .swiper-slide{opacity: 0; visibility: hidden;}
.testimonial-slider .swiper-slide.swiper-slide-visible{opacity: 1; visibility: visible;}
.testimonial-slider .swiper-pagination{position: static; margin-top: var(--gutter); display: flex; justify-content: center; gap: var(--gutter-half);}
.swiper-pagination-bullet{margin: 0 !important; width: 1.5rem; height: 1.5rem;}
.swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: var(--primary-green);}

.all-videos .card-slide{text-align: center;}
.all-videos .card-slide h4{transition: var(--transition);}
.all-videos .card-slide:hover h4{color: var(--secondary-green);}
.category-links{display: flex; flex-wrap: nowrap; align-items: center;}
.category-links > li{display: flex; align-items: center; gap: 0 1rem;}
.category-links > li > p{white-space: nowrap; color: var(--light-grey); line-height: 1;}
.category-links > li > span > svg{min-width: 2.4rem; display: block;}
.category-links > li > span > svg path{fill: var(--light-grey);}
.category-links > li > ul > li > button svg{width: 2.4rem; cursor: pointer;}
.category-links > li > ul > li > button svg path{fill: var(--light-grey); transition: var(--transition);}
.category-links > li > ul > li:hover > button svg path{fill: red;}
.category-links > li > ul > li p{white-space: nowrap; color: var(--light-grey); line-height: 1; font-size: var(--fs-sm);}
.category-links > li > ul > li{display: flex; align-items: center; gap: 0 .5rem; padding: 0 var(--gutter-half); cursor: pointer;}
.category-links > li > ul > li:not(:last-child){border-right: .1rem solid var(--light-grey);}
.category-links > li > ul{display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 0;}
@media(width < 768px){
  .category-links{flex-direction: column; align-items: flex-start; gap: 1rem 0;} 
  .category-links > li > ul{
    flex-direction: column;
    align-items: flex-start;
  }
  .category-links > li > ul{padding-left: 2rem;}
  .category-links > li > ul > li:not(:last-child){border: 0;}
}

@media(width > 767px){
  .all-video-filters.box{padding: 0; border-radius: 0; border: 0; background: none;}
}
.all-video-filters > ul{display: flex; flex-wrap: wrap; gap: .5rem 1rem; --btn-height: 4.2rem;}
.all-video-filters > ul > li.box{padding: .5rem;}
.all-video-filters > ul > li.type-block{display: flex; align-items: center; gap: .5rem 1rem;}
.all-video-filters > ul > li.type-block span{display: flex; align-items: center; padding: 0 1rem;}
.all-video-filters > ul > li.type-block span svg{width: 2.4rem;}
.all-video-filters > ul > li.type-block span svg path{fill: var(--primary-green);}
.all-video-filters > ul > li > ul{display: flex; align-items: center; gap: .5rem 1rem;}
.all-video-filters > ul > li.dropdown-block{display: flex; align-items: center;}
.all-video-filters > ul > li.dropdown-block > *{padding: 0 var(--gutter-half); min-width: 0;}
.all-video-filters > ul > li.dropdown-block > :not(:last-child){border-right: .1rem solid var(--light-grey);}
.all-video-filters .custom-select-service .nice-select{width: 13rem; min-width: 13rem;}
.all-video-filters .custom-select-series  .nice-select{width: 13rem; min-width: 13rem;}
.all-video-filters .nice-select .current{display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.all-video-filters .nice-select .list{min-width: 100%; width: max-content; max-width: 36rem;}
.all-video-filters .nice-select .option{white-space: normal; line-height: 1.4; padding: .8rem 1.6rem;}
.all-video-filters > ul > li.search-block{flex: 1 0 0%;}
.all-video-filters > ul > li.search-block .search-form{flex: 1 0 0%; height: 100%; display: flex; border-radius: 3rem; padding: 0 .5rem 0 2rem;}
.all-video-filters > ul > li.search-block .search-form input{border: 0; flex: 1 0 0%; background: none; height: 100%;}
.all-video-filters > ul > li.search-block .search-form{background-color: #e5e5e5; border: 0.1rem solid var(--light-grey); display: flex; align-items: center;}
.all-video-filters > ul > li.search-block .search-form input::placeholder{color: var(--dark-grey); opacity: 1;}
.all-video-filters > ul > li.search-block .search-form input:focus::placeholder{color: transparent; opacity: 0;}
.all-video-filters > ul > li.search-block .search-form button{width: var(--btn-height); height: var(--btn-height); border-radius: 100%; background-color: var(--primary-green); cursor: pointer;}
.all-video-filters > ul > li.search-block .search-form button svg{width: 2.4rem;}
.all-video-filters > ul > li.search-block .search-form button svg path{fill: white;}
.all-video-filters > ul > li.search-block{display: flex;}
.calendar-btn-wrap{display: flex; align-items: center; padding-left: 2rem; border-left: .1rem solid var(--light-grey); margin-left: 2rem;}
.calendar-btn-toggle{width: var(--btn-height); height: var(--btn-height); border-radius: 100%; background-color: var(--primary-green); cursor: pointer;}
.calendar-btn-toggle svg{width: 2.8rem;}
.calendar-btn-toggle svg path{fill: white;}
.calendar-btn-wrap span{display: flex; background-color: white; padding: .5rem; border-radius: 100%; border: 0.1rem solid var(--light-grey);}

@media(width < 1200px){
  .box.dropdown-block, .box.dropdown-block > *{flex: 1 0 0%;}
  .box.dropdown-block > * > select{min-width: 100%;}
}
@media(width < 992px){
  .all-video-filters > ul{flex-direction: column;}
  .box.dropdown-block select{min-height: var(--btn-height);}
  .all-video-filters > ul > li.search-block .search-form{min-height: calc(var(--btn-height) + 1rem);}
}
@media(width > 767px){
  .calendar-btn-wrap .btn{display: none;}
}
@media(width < 768px){
  .all-video-filters > ul > li.type-block{flex-direction: column;}
  .all-video-filters > ul > li.type-block span{padding: 1rem 0;}
  .all-video-filters.box{padding: 1rem;}
  .all-video-filters > ul > li.search-block{flex-direction: column; gap: 1rem;}
  .all-video-filters > ul > li > ul{flex-wrap: wrap; justify-content: center;}
  .all-video-filters > ul > li.type-block.box{padding: 0; border-radius: 0; border: 0; background: none;}
  .all-video-filters > ul > li.dropdown-block{flex-direction: column;}
  .all-video-filters > ul > li.dropdown-block > :not(:last-child){padding: 0;}
  .all-video-filters > ul > li.dropdown-block > *{padding: 0; width: 100%;}
  .all-video-filters > ul > li.dropdown-block.box{border-radius:0; border: 0; background: none;}
  .all-video-filters > ul > li.dropdown-block > :not(:last-child){border-right: 0;}
  .calendar-btn-wrap{margin-left: 0; padding-left: 0; border-left: 0; margin-top: 2rem; padding-top: 2rem; position: relative;}
  .calendar-btn-wrap::after{position:absolute; left: 50%; top: 0; transform: translateX(-50%); content: ""; width: 40%; height: .1rem; background-color: var(--light-grey);}
  .calendar-btn-toggle-wrap{display: none !important;}
}

.suggessions.all-videos .card-slide figure{position: relative; overflow: hidden;}
.suggessions.all-videos .card-slide figure::after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/play-btn.png') center center no-repeat rgba(255, 255, 255, 40%); content: ""; opacity: 0; transition: var(--transition);}
.suggessions.all-videos .card-slide:hover figure::after{opacity: 1;}

.thought-piece-quote{max-width: 82rem;}
@media(width < 1300px){
  .thought-piece-quote{max-width: 73rem;}
}
@media(width < 1200px){
  .thought-piece-quote{max-width: 62rem;}
}
@media(width < 992px){
  .thought-piece-quote{max-width: 53rem;}
}
@media(width < 768px){
  .thought-piece-quote h1 span{display: none;}
}

header.header-bg.gradient-bg{background: none; isolation: isolate;}
header.header-bg.gradient-bg::after{display: none;}
header.header-bg.gradient-bg::before{position: absolute; left: 50%; bottom:95%; transform: translateX(-50%); border-radius: 100%; width: 50%; aspect-ratio: 1; background: var(--secondary-green); content: ""; z-index: -1; filter: blur(100px);}

.type-options input{display: none;}
.type-options label{background-color: var(--primary-green); cursor: pointer;}
.type-options input:checked + label{background-color: var(--dark-green); color: white}
.suggessions.all-videos .card-slide h4{font-size: var(--fs);}
.single-post .box-article-header h3{font-size: calc(var(--h3) * 1.2);}


/* Modifications - 2*/
@media(width < 768px){
  nav{border: 0.1rem solid var(--light-grey); box-shadow: 0 .2rem .4rem rgba(0,0,0,0.1);}
  /* Mobile hero: size the section to the image (width-driven via padding-top)
     instead of 70dvh, so the "Welcome" text sits in the same place relative to
     the image on every device. 70dvh tied the text to viewport HEIGHT while the
     background-image height tracks viewport WIDTH - that mismatch caused a big
     gap on tall viewports (desktop Chrome at 425) and overlap on phones.
     Image is 400x392; padding-top ~78% of width lands the text over the white
     leafy fringe at the bottom of the image. */
  .hero-section{height: auto; padding-top: 78%; padding-bottom: var(--gutter); background: url('../images/home-hero-mobile-image.png') center top no-repeat !important; background-size: 100% auto !important;}
  .hero-section .container{transform: none;}
  .hero-section::before, .hero-section::after{display: none;}
  /* parallax.js injects a fixed .parallax-mirror (the desktop hero-main-image)
     that shows through below the mobile background image. Mobile uses the static
     background image instead, so hide the parallax layer here. */
  .parallax-mirror{display: none !important;}
  .browse{padding-bottom: var(--gutter);}
  .nice-select.open{height: auto; }
  .nice-select.open::after{top: 2rem;}
  .nice-select.open .list{position: static !important; padding: 0 2rem;}

  .nice-select{height: auto !important; padding-right: 0;}
  .nice-select .list{position: static; height: 0; transition: var(--transition); overflow: hidden; transition:var(--transition); transform: none;}
  .nice-select.open .list{height: auto; }
  .nice-select::after{top: 2rem;}
  .box.all-video-filters{padding-bottom: var(--gutter);}
  .nice-select.open .list li:not(:last-child){border-bottom: .1rem solid rgba(255,255,255,0.5);}
  .nice-select .option{line-height: 3;}
  .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus{background: none;}
}
.nice-select .list{box-shadow: 0 .3rem .2rem rgba(0,0,0,0.1) inset;}
.card-slider-range::after{height: .8rem; background-color: #e3e3e3;}
.card-slide-date .line{width: .1rem; background-color: #cdcdcd;}
.date-picker-btn, .date-picker-search{background-color: var(--primary-green);}
.date-picker-btn:hover, .date-picker-search:hover{background-color: var(--dark-green);}
.footer-article h4{color: var(--text-color);}
.box.garden-box{padding-top: var(--md);}
.testimonial-slide h3{line-height: 1.4; letter-spacing: .1rem;}
.type-options input:checked + label{background-color: var(--secondary-green);}
.date-picker-section{z-index: 9999;}
.single-post .box-article{padding-top: var(--gutter); padding-bottom: var(--gutter);}

.all-videos-slider{overflow-x: hidden;}
.all-videos-slider .swiper-slide{width: auto;}
.all-videos-slider-wrapper{position: relative;}

.all-videos-slider-wrapper .slider-arrows .slider-arrow-prev{left: 0;}
.all-videos-slider-wrapper .slider-arrows .slider-arrow-next{right: 0;}
@media(width < 1025px){
  .all-videos-slider-wrapper{padding-left: 3rem; padding-right: 3rem;}
}

.all-videos-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter);}
@media(width < 1200px){
  .all-videos-grid{grid-template-columns: repeat(3, 1fr); gap: var(--gutter) var(--gutter-half);}
}
@media(width < 1025px){
  .all-videos-grid{grid-template-columns: repeat(2, 1fr);}
}
@media(width < 768px){
  .all-videos-grid{grid-template-columns: 1fr;}
}
.all-videos-grid .card-slide .btn:not(:first-child){margin-top: 1rem;}


.video-player-cards .card-slide h4{font-size: var(--fs-lg);}
.video-player-cards .card-slide figure{position: relative; overflow: hidden;}
.video-player-cards .card-slide figure::after{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/play-btn.png') center center no-repeat rgba(255, 255, 255, 40%); content: ""; opacity: 0; transition: var(--transition);}
.video-player-cards .card-slide:hover figure::after{opacity: 1;}
.video-player-cards .card-slide h4{transition: var(--transition)}
.video-player-cards .card-slide:hover h4{color: var(--secondary-green);}

/* ~412px-wide phones (e.g. Samsung Galaxy S Ultra): "Welcome to the home" fits on one line and runs across the hero photo - drop the heading a little */
@media (width > 400px) and (width < 421px){
  .hero-section{padding-top: 86%;}
}


/* Date search with no videos on the picked day (Home slider + All Videos): explains that the nearest days are shown */
.date-search-note{max-width: 64rem; margin: 0 auto var(--gutter); padding: 1.2rem 1.6rem; border-left: .4rem solid var(--primary-green); border-radius: .4rem; background-color: var(--lightest-grey); color: var(--text-color); font-size: var(--fs); line-height: 1.5; text-align: center;}
.date-search-note[hidden]{display: none;}
.slider-section-header + .date-search-note{margin-top: 2rem;}

/* Home "Browse videos": (?) help pop-ups beside Search by Date / See All Videos */
.browse-help-wrap{position: relative; display: flex; align-items: center; gap: 1rem;}
.browse-help-wrap > .btn{flex: 1; min-width: 0;}
.browse-help{flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; padding: 0; border: .2rem solid var(--primary-green); border-radius: 100%; background-color: white; color: var(--primary-green); font-family: var(--font-family); font-size: 1.8rem; font-weight: 700; line-height: 1; cursor: pointer; transition: var(--transition);}
.browse-help:hover, .browse-help[aria-expanded="true"]{background-color: var(--primary-green); color: white;}
.browse-help:focus-visible{outline: .2rem solid var(--dark-green); outline-offset: .2rem;}
.browse-help-tip{position: absolute; bottom: calc(100% + 1.2rem); left: calc(50% - 2.1rem); z-index: 20; width: max-content; max-width: min(28rem, 80vw); padding: 1.2rem 1.6rem; border-left: .4rem solid var(--primary-green); border-radius: .4rem; background-color: white; color: var(--text-color); font-family: var(--font-family); font-size: 1.5rem; line-height: 1.4; text-align: center; box-shadow: 0 .8rem 2.4rem rgba(0,0,0,.15), 0 .2rem .4rem rgba(0,0,0,.08); opacity: 0; visibility: hidden; transform: translate(-50%, .4rem); transition: opacity .15s ease, transform .15s ease, visibility .15s; pointer-events: none;}
.browse-help-tip::after{position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: .7rem solid transparent; border-top-color: white; content: "";}
.browse-help-wrap.show-help .browse-help-tip{opacity: 1; visibility: visible; transform: translate(-50%, 0);}
@media (hover: hover){
  .browse-help:hover ~ .browse-help-tip{opacity: 1; visibility: visible; transform: translate(-50%, 0);}
}

/* All Videos: (?) beside the heading opens a guide to the filters (shares .browse-help with Home; opened by custom.js) */
.browse-help-host{position: relative;}
.browse-help-panel{position: absolute; top: calc(100% + 1.2rem); left: 50%; z-index: 30; width: min(56rem, calc(100vw - 3.2rem)); padding: 1.6rem 2rem; border-left: .4rem solid var(--primary-green); border-radius: .4rem; background-color: white; color: var(--text-color); font-family: var(--font-family); font-size: 1.5rem; line-height: 1.45; text-align: left; box-shadow: 0 .8rem 2.4rem rgba(0,0,0,.15), 0 .2rem .4rem rgba(0,0,0,.08); opacity: 0; visibility: hidden; transform: translate(-50%, -.4rem); transition: opacity .15s ease, transform .15s ease, visibility .15s;}
.browse-help-host.show-help .browse-help-panel{opacity: 1; visibility: visible; transform: translate(-50%, 0);}
.browse-help-panel h5{margin-bottom: 1rem; color: var(--primary-green); font-family: var(--font-family); font-size: 1.7rem; font-weight: 700;}
.browse-help-panel li + li{margin-top: .8rem;}
.browse-help-panel b{color: var(--dark-green);}