/* Landing - Regions: gallery + lead form. Plain CSS, loaded after the main stylesheet. */

/* ---------- Gallery ---------- */
.section-gallery-spread .section-spread-image { overflow: hidden; }
/* the gallery sits above the Location map graphic that follows it, so its buttons can always be clicked */
.rg-block.rg-gallery_spread { position: relative; z-index: 2; }
.rg-gallery { position: relative; width: 100%; height: 100%; }
.rg-gallery-track { position: relative; width: 100%; height: 100vh; }
/* every slide is exactly the size of the column, stacked, and cross-fades */
.rg-gallery-cell { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.rg-gallery-cell.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity .8s ease, visibility 0s; }
.section-gallery-spread .rg-gallery-cell img { position: absolute; top: 0; left: 0; display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: center; transform: none; }
.rg-gallery-caption {
	position: absolute; left: 2.4rem; bottom: 6.4rem; right: 2.4rem; color: #fff; font-size: 1.4rem;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .55); pointer-events: none;
}
.rg-gallery-controls {
	position: absolute; left: 0; right: 0; bottom: 2rem; z-index: 3;
	display: flex; align-items: center; justify-content: center; gap: 1.6rem;
}
.rg-gallery-btn {
	width: 4.4rem; height: 4.4rem; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255, 255, 255, .85); border-radius: 50%; background: rgba(23, 49, 74, .55); color: #fff; cursor: pointer;
	transition: background-color .3s ease, transform .3s ease, border-color .3s ease;
}
.rg-gallery-btn:hover { background: rgba(23, 49, 74, .85); transform: scale(1.06); }
.rg-gallery-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #17314A; }
.rg-gallery-count { color: #fff; font-size: 1.4rem; letter-spacing: .08em; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); min-width: 6rem; text-align: center; }
.rg-gallery .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 53.3333em) {
	.rg-gallery-track { height: auto; aspect-ratio: 4 / 3; }
	.rg-gallery-caption { bottom: 5.6rem; left: 1.6rem; right: 1.6rem; }
	.rg-gallery-btn { width: 4.8rem; height: 4.8rem; }
}
@media (prefers-reduced-motion: reduce) {
	.rg-gallery-btn, .rg-gallery-cell, .rg-gallery-cell.is-active { transition: none; }
}

/* ---------- Background stripes (option "Show background stripes") ---------- */
.rg-stripes .section-text,
.rg-stripes .section-location,
.rg-stripes .section-stats,
.rg-stripes .section-spread-text-wrapper,
.rg-stripes .section-form-wrapper { position: relative; isolation: isolate; }
.rg-stripes .section-text::before,
.rg-stripes .section-location::before,
.rg-stripes .section-stats::before,
.rg-stripes .section-spread-text-wrapper::before,
.rg-stripes .section-form-wrapper::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: url(../img/waves.png); background-position: left top; background-repeat: no-repeat; background-size: cover; opacity: .5;
}
/* the hero has the stripes by default (as on the home page); the option can turn them off */
.rg-no-stripes .section-hero-text-wrapper::after { display: none; }

/* ---------- Contact region: the Contact page design, shown inline (not as a pop-up) ---------- */
.page-landing-regions .modal-contact.rg-contact {
	position: relative; z-index: 1; width: 100%; height: auto; min-height: 100vh;
	opacity: 1; visibility: visible; transform: none; transition: none; overflow: visible;
}
.rg-contact .section-inner { height: auto; min-height: 100vh; }
.rg-contact .section-address-wrapper .section-address-inner { padding: 12rem 2.4rem; }
.rg-contact .section-form-wrapper { height: auto; overflow: visible; display: flex; align-items: center; }
.rg-contact .section-form-wrapper .section-form-inner { width: 100%; box-sizing: border-box; padding: 9.6rem 6.4rem; max-width: 72rem; margin: 0 auto; }
.rg-contact .section-form-wrapper .contact-nav { max-width: 100%; }
.rg-contact .contact-nav .contact-nav-btn { border: 0; font-family: inherit; cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.rg-contact .contact-nav .contact-nav-btn:hover { background-color: #e9e2d6; }
.rg-contact .contact-nav .contact-nav-btn.active:hover { background-color: #17314a; }
.rg-contact .contact-nav .contact-nav-btn:focus-visible, .rg-contact .btn:focus-visible { outline: 3px solid #17314a; outline-offset: 3px; }
/* labels stay readable for screen readers (the Contact page hides them completely) */
.rg-contact .contact-form label.hide-label { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rg-contact .contact-form input.input-text:focus-visible, .rg-contact .contact-form .input-select:focus-visible { outline: 2px solid #17314a; outline-offset: 4px; }
.rg-contact .contact-form .input-select { min-height: 3.6rem; }
.rg-contact .contact-form .input-select.error { border-color: red; color: red; }
.rg-contact .contact-form .iti { width: 100%; display: block; }
.rg-contact .contact-form .iti input.input-text { padding-left: 8.4rem; }
.rg-contact .contact-form .form-row-submit { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; }
.rg-contact .contact-form .btn-submit { color: #17314a; border: .8px solid #17314a; }
.rg-contact .contact-form .btn-submit[disabled] { opacity: .6; cursor: progress; }
.rg-contact .contact-form .lead-whatsapp { background: transparent; color: #17314a; border: .8px solid #17314a; text-transform: uppercase; text-decoration: none; transition: all .3s ease; }
.rg-contact .contact-form .lead-whatsapp:hover { background: #17314a; color: #fff; }
.rg-contact .contact-form .checkbox-wrapper.has-error { color: red; }
.rg-contact .contact-form .checkbox-wrapper input { flex: none; margin-top: .3rem; }
.rg-contact .lead-message { margin-top: 2rem; min-height: 2.4rem; font-size: 1.4rem; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.rg-contact .lead-message.is-error, .rg-contact .lead-message.is-success { opacity: 1; transform: none; }
.rg-contact .lead-message.is-error { color: red; }
.rg-contact .lead-message.is-success { color: #198754; }
.rg-contact .lead-disclaimer { margin-top: 3.2rem; font-size: 1.2rem; line-height: 1.6; opacity: .85; }

@media (max-width: 53.3333em) {
	.page-landing-regions .modal-contact.rg-contact { min-height: 0; }
	.rg-contact .section-inner { min-height: 0; flex-direction: column-reverse; }
	.rg-contact .section-address-wrapper, .rg-contact .section-form-wrapper { width: 100%; }
	.rg-contact .section-address-wrapper .section-address-inner { padding: 4.8rem 2.4rem; }
	.rg-contact .section-form-wrapper .section-form-inner { padding: 4.8rem 2.4rem; max-width: 100%; }
	.rg-contact .contact-form .form-row { flex-direction: column; gap: 0; }
	.rg-contact .contact-form .form-row-submit .btn { width: 100%; text-align: center; box-sizing: border-box; }
}
@media (prefers-reduced-motion: reduce) {
	.rg-contact .contact-nav .contact-nav-btn, .rg-contact .lead-message, .rg-contact .lead-whatsapp { transition: none; }
}

/* Location map: starts at the top of its box */
.page-landing-regions .section-location .location-map-wrapper .location-map { top: 0; }

/* ---------- Phones: gallery + text sections touch each other, photos sit higher so the buttons never cover the subject ---------- */
@media (max-width: 53.3333em) {
	/* the text panel keeps 4.8rem under its text, and no extra margins are added on top of that */
	.rg-block .section-gallery-spread .section-inner .section-spread-text-wrapper .section-spread-text { padding-bottom: 4.8rem; } /* space under the text; change this number to make it bigger or smaller */
	.rg-block .section-gallery-spread .section-inner .section-spread-text-wrapper .spread-text .btn,
	.rg-block .section-gallery-spread .section-inner .section-spread-text-wrapper .spread-text .btn-wrapper { margin-bottom: 0; }
	.rg-block .section-gallery-spread .section-inner .section-spread-text-wrapper .spread-text > :last-child,
	.rg-block .section-gallery-spread .section-inner .section-spread-text-wrapper .spread-text-copy > :last-child { margin-bottom: 0; }
	/* the photo is enlarged a little from its bottom edge, so everything in it moves up inside the frame */
	.section-gallery-spread .rg-gallery-cell img { transform: scale(var(--rg-scale, 1.28)); transform-origin: 50% 100%; object-position: 50% 25%; }
	.rg-gallery-controls { bottom: 1rem; }
	.rg-gallery-btn { width: 4rem; height: 4rem; }
}

/* ---------- Hero without video (image only): text on top, the photo below, nothing cut off ---------- */
.rg-hero-image-only .section-hero-new .section-inner { display: flex; flex-direction: column; }
.rg-hero-image-only .section-hero-new .section-hero-text-wrapper { order: -1; position: relative; flex: 0 0 auto; }
.rg-hero-image-only .section-hero-new .section-hero-image { order: 2; position: relative; height: auto !important; }
body .rg-hero-image-only .section-hero-new .section-hero-image img.hero-img { position: static !important; display: block; width: 100% !important; height: auto !important; max-height: none !important; object-fit: initial !important; }
@media (min-width: 53.3334em) {
	/* on computers the text and the photo together fill exactly one screen */
	.rg-hero-image-only .section-hero-new .section-inner { min-height: 100vh; }
	.rg-hero-image-only .section-hero-new .section-hero-image { flex: 1 1 auto; min-height: 38vh; }
	body .rg-hero-image-only .section-hero-new .section-hero-image img.hero-img { position: absolute !important; top: 0; left: 0; height: 100% !important; object-fit: cover !important; object-position: 50% 15% !important; }
}

/* ---------- Spacing fixes ---------- */
/* hero without video: the heading starts below the fixed header (its height is measured by landing-regions.js) */
.rg-hero-image-only .section-hero-new .section-hero-text-wrapper .section-hero-text,
.rg-hero-no-media .section-hero-new .section-hero-text-wrapper .section-hero-text { padding-top: calc(var(--rg-header-h, 16rem) + 6rem); padding-bottom: 6rem; }
.rg-hero-image-only .section-hero-new .section-hero-image { min-height: 0 !important; }
@media (min-width: 53.3334em) {
	.rg-hero-image-only .section-hero-new .section-hero-image { min-height: 30vh !important; }
}
@media (max-width: 53.3333em) {
	/* the site makes these sections a full screen tall; on phones they should only be as tall as their content */
	.rg-block .section-gallery-spread .section-inner { min-height: 0; }
	.rg-hero-image-only .section-hero-new .section-inner { min-height: 0; }
	.rg-hero-image-only .section-hero-new .section-hero-text-wrapper .section-hero-text,
	.rg-hero-no-media .section-hero-new .section-hero-text-wrapper .section-hero-text { padding-top: calc(var(--rg-header-h, 16rem) + 4rem); padding-bottom: 4rem; }
}

/* ---------- Hero without any photo or video: the empty photo area takes no space ---------- */
.rg-hero-no-media .section-hero-new .section-hero-image { display: none !important; }
.rg-hero-no-media .section-hero-new .section-inner { min-height: 0; }

/* ---------- Full-screen image with options (height, fit, position) ---------- */
.rg-fs_image .section-image-fs img { display: block; width: 100%; height: auto; }
.rg-fs_image .section-image-fs.rg-fs-has-height { height: var(--rg-fs-h); overflow: hidden; }
.rg-fs_image .section-image-fs.rg-fs-has-height img { height: 100%; object-fit: var(--rg-fs-fit, cover); object-position: var(--rg-fs-pos, center center); }
@media (max-width: 53.3333em) {
	.rg-fs_image .section-image-fs.rg-fs-has-height { height: var(--rg-fs-h-m, var(--rg-fs-h)); }
}

/* ---------- Phones and tablets: the whole photo is shown (not cropped); the arrows sit in a bar under the photo ---------- */
@media (max-width: 53.3333em) {
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-track { height: auto; aspect-ratio: var(--rg-ar, 1.5); background: var(--rg-bar, #fff); }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-cell img { transform: none; object-fit: var(--rg-mfit, contain); object-position: center center; }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-controls { position: static; padding: 1.2rem 0; background: var(--rg-bar, #fff); }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-btn { width: 4.4rem; height: 4.4rem; color: #17314A; border-color: #17314A; background: transparent; }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-btn:hover { background: rgba(23, 49, 74, .08); }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-count { color: #17314A; text-shadow: none; }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-caption { display: none; }
}

/* ---------- Gallery + text on tablets too (up to 1100px wide, for example iPad mini, Air and Pro in portrait): same layout as phones ---------- */
@media (max-width: 68.75em) {
	/* stacked: photo on top, text under it */
	/* stacked layout (rg-gallery-order) */
	.rg-block .section-gallery-spread .section-inner,
	.rg-block .section-gallery-spread .section-inner.align-left,
	.rg-block .section-gallery-spread .section-inner.align-right { display: flex; flex-direction: column; min-height: 0; }
	/* on smaller screens the text comes first and the gallery after it */
	.rg-block .section-gallery-spread .section-inner .section-spread-text-wrapper { order: 1; }
	.rg-block .section-gallery-spread .section-inner .section-spread-image { order: 2; }
	.rg-block .section-gallery-spread .section-inner .section-spread-image { width: 100%; }
	.rg-block .section-gallery-spread .section-inner .section-spread-text-wrapper { width: 100%; height: auto; display: block; }
	.rg-block .section-gallery-spread .section-inner .section-spread-text-wrapper .section-spread-text { max-width: 100%; padding-bottom: 4.8rem; }
	/* the whole photo is shown, the frame has the shape of the photos, the arrows sit in a bar under the photo */
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-track { height: auto; aspect-ratio: var(--rg-ar, 1.5); max-height: 75vh; background: var(--rg-bar, #fff); }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-cell img { transform: none; object-fit: var(--rg-mfit, contain); object-position: center center; }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-controls { position: static; padding: 1.2rem 0; background: var(--rg-bar, #fff); }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-btn { width: 4.4rem; height: 4.4rem; color: #17314A; border-color: #17314A; background: transparent; }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-btn:hover { background: rgba(23, 49, 74, .08); }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-count { color: #17314A; text-shadow: none; }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-caption { display: none; }
	/* no extra margins under the text or button, so the space under the text is exactly the padding above */
	.rg-block .section-gallery-spread .section-inner .section-spread-text-wrapper .spread-text .btn,
	.rg-block .section-gallery-spread .section-inner .section-spread-text-wrapper .spread-text .btn-wrapper { margin-bottom: 0; }
	.rg-block .section-gallery-spread .section-inner .section-spread-text-wrapper .spread-text > :last-child,
	.rg-block .section-gallery-spread .section-inner .section-spread-text-wrapper .spread-text-copy > :last-child { margin-bottom: 0; }
}
@media (min-width: 53.3334em) and (max-width: 68.75em) {
	/* tablets have more room at the sides than phones */
	.rg-block .section-gallery-spread .section-inner .section-spread-text-wrapper .section-spread-text { padding-left: 4.8rem; padding-right: 4.8rem; padding-top: 4.8rem; }
}

/* ---------- Gallery on phones and tablets: thin white bars on top of the photo, "1 / 5" at the bottom of the photo (no arrows) ---------- */
.rg-gallery-bars { display: none; }
@media (max-width: 68.75em) {
	.rg-block .section-gallery-spread .rg-gallery { position: relative; }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-bars { display: flex; gap: 4px; position: absolute; top: 1rem; left: 1rem; right: 1rem; z-index: 4; }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-bar { position: relative; flex: 1 1 0; min-width: 0; height: 3px; padding: 0; margin: 0; border: 0; border-radius: 0; background: rgba(255, 255, 255, .45); box-shadow: 0 0 3px rgba(0, 0, 0, .35); cursor: pointer; transition: background-color .25s ease; }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-bar.on { background: #fff; }
	/* a larger area to tap than the thin bar itself */
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-bar::before { content: ""; position: absolute; left: -2px; right: -2px; top: -12px; bottom: -12px; }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-bar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 4px #17314A; }
	/* the arrows go away; only the count stays, at the bottom of the photo */
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-controls { position: absolute; left: 0; right: 0; bottom: 1rem; padding: 0; background: transparent; pointer-events: none; justify-content: center; }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-btn { display: none; }
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-count { color: #fff; font-size: 1.3rem; letter-spacing: .08em; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.rg-block .section-gallery-spread .rg-gallery .rg-gallery-bar { transition: none; }
}