/*
 * Layout primitives the legacy markup relies on (section / row / col / stack / text /
 * button / image / accordion / header). Written for this app — it replaces the parts of
 * the Flatsome framework the pages used, so the child-theme stylesheets
 * (header.css, footer.css, your-style-map.css …) and the customizer CSS (custom.css)
 * keep applying unchanged. Loaded after the child-theme files, before custom.css,
 * i.e. in the same position flatsome.css had.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  color: #777;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; border-style: none; }
a { color: var(--fs-experimental-link-color, #334862); text-decoration: none; }
a:hover { color: var(--fs-experimental-link-color-hover, #111); }
p { margin-top: 0; }
p, ul, ol, blockquote, form, figure { margin-bottom: 1.3em; }
ul { list-style: disc; }
ol, ul { margin-top: 0; padding: 0; }
li { margin-bottom: 0.6em; }
.text ul, .text ol { margin-left: 1.3em; }
h1, h2, h3, h4, h5, h6 { color: #555; margin-top: 0; margin-bottom: 0.5em; text-rendering: optimizeSpeed; width: 100%; line-height: 1.3; }
h1 { font-size: 1.7em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.25em; }
button { font: inherit; cursor: pointer; }
.relative { position: relative; }
.fill { position: absolute; top: 0; left: 0; right: 0; height: 100%; margin: 0 !important; padding: 0 !important; }
.clearfix::after { content: ""; display: table; clear: both; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: #fff; padding: 10px 16px; }
.skip-link:focus { left: 10px; top: 10px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ── Grid ───────────────────────────────────────────────────────────── */
.container, .row { max-width: 1080px; margin-left: auto; margin-right: auto; }
.container { padding-left: 15px; padding-right: 15px; width: 100%; }
.row { display: flex; flex-flow: row wrap; width: 100%; }
.row-full-width { max-width: 100% !important; }
.row .row:not(.row-collapse), .container .row:not(.row-collapse) { margin-left: -15px; margin-right: -15px; width: auto; }
.row.align-middle { align-items: center; }
.row.align-bottom { align-items: flex-end; }
.row.align-equal > .col { display: flex; }
.col { position: relative; margin: 0; padding: 0 15px 30px; width: 100%; }
.col-inner { position: relative; width: 100%; margin-left: auto; margin-right: auto; flex: 1 0 auto; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; }
.small-1 { flex-basis: 8.3333%; max-width: 8.3333%; }
.small-2 { flex-basis: 16.6667%; max-width: 16.6667%; }
.small-3 { flex-basis: 25%; max-width: 25%; }
.small-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
.small-5 { flex-basis: 41.6667%; max-width: 41.6667%; }
.small-6 { flex-basis: 50%; max-width: 50%; }
.small-7 { flex-basis: 58.3333%; max-width: 58.3333%; }
.small-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
.small-9 { flex-basis: 75%; max-width: 75%; }
.small-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
.small-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
.small-12 { flex-basis: 100%; max-width: 100%; }
@media (min-width: 550px) {
  .medium-1 { flex-basis: 8.3333%; max-width: 8.3333%; }
  .medium-2 { flex-basis: 16.6667%; max-width: 16.6667%; }
  .medium-3 { flex-basis: 25%; max-width: 25%; }
  .medium-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
  .medium-5 { flex-basis: 41.6667%; max-width: 41.6667%; }
  .medium-6 { flex-basis: 50%; max-width: 50%; }
  .medium-7 { flex-basis: 58.3333%; max-width: 58.3333%; }
  .medium-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
  .medium-9 { flex-basis: 75%; max-width: 75%; }
  .medium-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
  .medium-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
  .medium-12 { flex-basis: 100%; max-width: 100%; }
}
@media (min-width: 850px) {
  .large-1 { flex-basis: 8.3333%; max-width: 8.3333%; }
  .large-2 { flex-basis: 16.6667%; max-width: 16.6667%; }
  .large-3 { flex-basis: 25%; max-width: 25%; }
  .large-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
  .large-5 { flex-basis: 41.6667%; max-width: 41.6667%; }
  .large-6 { flex-basis: 50%; max-width: 50%; }
  .large-7 { flex-basis: 58.3333%; max-width: 58.3333%; }
  .large-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
  .large-9 { flex-basis: 75%; max-width: 75%; }
  .large-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
  .large-11 { flex-basis: 91.6667%; max-width: 91.6667%; }
  .large-12 { flex-basis: 100%; max-width: 100%; }
  .large-col-first { order: -1; }
}
@media (max-width: 549px) {
  .small-col-first { order: -1; }
}

/* ── Sections ───────────────────────────────────────────────────────── */
.section { position: relative; display: flex; flex-flow: row; align-items: center; width: 100%; min-height: auto; padding: 30px 0; }
.section-bg { overflow: hidden; }
.section-bg, .section-content { width: 100%; }
.section-content { z-index: 1; }
.section-bg :is(img, picture) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; max-width: none; }
.section-bg-overlay { position: absolute; inset: 0; }
.row .section, .container .section { padding-left: 30px; padding-right: 30px; }
.page-wrapper { padding-top: 0; padding-bottom: 0; }
#main { background-color: #fff; position: relative; }

/* ── Stack / gap / text ─────────────────────────────────────────────── */
.stack { --stack-gap: 0; display: flex; }
.stack > .text > :first-child { margin-top: 0; }
.stack > .text > :last-child { margin-bottom: 0; }
.stack-row { flex-direction: row; }
.stack-row > * { margin: 0 !important; }
.stack-row > * ~ * { margin-left: var(--stack-gap) !important; }
.stack-col { flex-direction: column; }
.stack-col > * { margin: 0 !important; }
.stack-col > * ~ * { margin-top: var(--stack-gap) !important; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }
.gap-element { display: block; height: auto; }
.text > :last-child { margin-bottom: 0; }
.col-inner > .img:not(:last-child), .col > .img:not(:last-child) { margin-bottom: 1em; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.button {
  position: relative;
  display: inline-block;
  max-width: 100%;
  min-height: 2.5em;
  margin: 0 1em 1em 0;
  padding: 0 1.2em;
  border: 1px solid transparent;
  border-radius: 0;
  background-color: var(--fs-color-primary);
  color: #fff;
  font-size: 0.97em;
  font-weight: bolder;
  letter-spacing: 0.03em;
  line-height: 2.4em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  cursor: pointer;
  transition: transform 0.3s, border 0.3s, background 0.3s, box-shadow 0.3s, opacity 0.3s, color 0.3s;
}
.button:hover { color: #fff; opacity: 1; box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.2); }
.button span { display: inline-block; line-height: 1.6; }
.button.primary { background-color: var(--fs-color-primary); }
.button.secondary { background-color: var(--fs-color-secondary); }
.button.alert { background-color: var(--fs-color-alert); }
.button.success { background-color: var(--fs-color-success); }
.button.white { background-color: #fff; color: #666; }
.button.is-outline { background-color: transparent; border: 2px solid currentColor; line-height: 2.19em; }
.button.primary.is-outline { color: var(--fs-color-primary); }
.button.secondary.is-outline { color: var(--fs-color-secondary); }
.button.is-outline:hover { box-shadow: none; background-color: var(--fs-color-primary); border-color: var(--fs-color-primary); color: #fff; }
.button.is-link { background: transparent !important; border-color: transparent; color: currentColor; padding-left: 0; padding-right: 0; }
.button.expand { display: block; width: 100%; margin-left: 0; margin-right: 0; }
.button.circle { border-radius: 99px; }
.text-center .button:first-of-type { margin-left: 0 !important; }
.text-center .button:last-of-type, .text-right .button:last-of-type { margin-right: 0 !important; }

/* ── Images ─────────────────────────────────────────────────────────── */
.img { position: relative; width: 100%; }
.dark { color: #f1f1f1; }
.img .img-inner { position: relative; overflow: hidden; }
.img img { display: block; width: 100%; height: auto; }
.image-cover { position: relative; height: auto; overflow: hidden; background-position: 50% 50%; background-size: cover; padding-top: 100%; }
.image-cover img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: 50% 50%; }
.has-hover .image-zoom img { transition: transform 0.5s, opacity 0.5s; }
.has-hover:hover .image-zoom img { transform: scale(1.1); }

/* ── Accordion ──────────────────────────────────────────────────────── */
.accordion-item { overflow: hidden; }
.accordion-title { display: flex; align-items: center; gap: 8px; position: relative; padding: 0.6em 2.3em; border-top: 1px solid #ddd; font-size: 110%; transition: border 0.2s ease-out, background-color 0.3s; color: inherit; }
.accordion-title .toggle { position: absolute; left: 0; top: 0.3em; width: 2.3em; height: 1.5em; border: 0; background: none; padding: 0; color: inherit; transition: transform 0.3s; }
.accordion-title.active .toggle { transform: rotate(180deg); }
.accordion-title .toggle svg { width: 1em; height: 1em; }
.accordion-inner { display: none; padding: 1em 2.3em; }
.accordion-title.active + .accordion-inner { display: block; }

/* ── Featured box (icon box) ────────────────────────────────────────── */
.icon-box .icon-box-img { position: relative; max-width: 100%; margin-bottom: 1em; }
.icon-box-img img { width: 100%; padding-top: 0.2em; }
.icon-box-left, .icon-box-right { display: flex; flex-flow: row wrap; width: 100%; }
.icon-box-left .icon-box-img, .icon-box-right .icon-box-img { flex: 0 0 auto; margin-bottom: 0; max-width: 200px; }
.icon-box-left .icon-box-text, .icon-box-right .icon-box-text { flex: 1 1 0; }
.icon-box-right .icon-box-text { order: -1; }
.icon-box-left .icon-box-img + .icon-box-text { padding-left: 1em; }
.icon-box-right .icon-box-img + .icon-box-text { padding-right: 1em; }
.icon-box-center .icon-box-img { margin: 0 auto 1em; }
.last-reset > :last-child { margin-bottom: 0; }

/* ── Social icons ───────────────────────────────────────────────────── */
.social-icons { display: inline-flex; gap: 0.4em; vertical-align: middle; color: #999; font-size: 0.85em; }
.social-icons .icon { display: inline-flex; align-items: center; justify-content: center; width: 2.4em; height: 2.4em; margin: 0; padding: 0; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; line-height: 1; min-height: 0; }
.social-icons .icon svg { width: 50%; height: 50%; fill: currentColor; }
.social-icons .icon:hover { box-shadow: none; opacity: 0.8; }

/* ── Search form ────────────────────────────────────────────────────── */
.searchform { display: flex; width: 100%; max-width: 480px; }
.searchform input[type="search"] { flex: 1; min-width: 0; height: 2.8em; padding: 0 0.75em; border: 1px solid #ddd; border-right: 0; font: inherit; font-size: 1.4rem; }
.searchform button { height: 2.8em; min-height: 0; width: 3em; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; }
.searchform button svg { width: 1.2em; height: 1.2em; fill: currentColor; }

/* ── Header ─────────────────────────────────────────────────────────── */
.header { position: relative; width: 100%; z-index: 30; }
.header-wrapper { position: relative; width: 100%; }
.header-bg-container { z-index: -1; }
.header-bg-color { background-color: #fff; }
.header-main { position: relative; z-index: 10; }
.header-inner { position: relative; height: 100%; }
.flex-row { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; width: 100%; }
.flex-col { max-height: 100%; }
.flex-grow { flex: 1; }
.flex-left { margin-right: auto; }
.flex-right { margin-left: auto; }
.flex-center { margin: 0 auto; }
.logo { line-height: 1; margin: 0; }
.logo a { display: block; }
.logo-center .logo { order: 2; text-align: center; margin: 0 30px; }
.logo-center .flex-left { order: 1; flex: 1 1 0; }
.logo-center .flex-right { order: 3; flex: 1 1 0; }
#logo img { max-height: 90px; width: auto; }
.header-logo-dark { display: none !important; }
.header-bottom { display: flex; align-items: center; flex-wrap: nowrap; position: relative; z-index: 9; }
.nav { display: flex; flex-flow: row wrap; align-items: center; width: 100%; margin: 0; padding: 0; list-style: none; }
.nav-center { justify-content: center; }
.nav-left { justify-content: flex-start; }
.nav-right { justify-content: flex-end; }
.nav > li { position: relative; display: inline-block; margin: 0 7px; padding: 0; list-style: none; transition: background-color 0.3s; }
.nav-spacing-xlarge > li { margin: 0 13px; }
.nav > li > a { display: inline-flex; align-items: center; flex-wrap: wrap; padding: 10px 0; font-size: 0.8em; color: inherit; }
.nav-uppercase > li > a { text-transform: uppercase; letter-spacing: 0.02em; font-weight: bolder; }
.nav > li > a .icon-angle-down { display: inline-flex; margin-left: 4px; opacity: 0.6; }
.nav > li > a .icon-angle-down svg { width: 0.75em; height: 0.75em; }
.nav-dropdown {
  position: absolute; left: -99999px; top: 100%;
  min-width: 260px; margin: 0; padding: 20px; max-height: 0; opacity: 0; visibility: hidden;
  background-color: #fff; color: #777; text-align: left; list-style: none; z-index: 9;
  transition: opacity 0.25s, visibility 0.25s;
}
.nav-dropdown-has-shadow .nav-dropdown { box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15); }
.nav-dropdown-has-border .nav-dropdown { border: 2px solid #ddd; }
.nav > li.has-dropdown:hover > .nav-dropdown,
.nav > li.has-dropdown:focus-within > .nav-dropdown,
.nav > li.current-dropdown > .nav-dropdown { left: -15px; max-height: inherit; opacity: 1; visibility: visible; }
.nav-dropdown li { display: block; margin: 0; }
.nav-dropdown > li > a { display: block; padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #ececec; color: #666; line-height: 1.3; }
.nav-dropdown > li:last-child > a { border-bottom: 0; }
.nav-dropdown > li > a:hover { color: #000; }
.header-lang { display: inline-flex; gap: 6px; align-items: center; font-size: 1.3rem; font-weight: 600; letter-spacing: 0.04em; }
.header-lang a { color: #9a9aad; }
.header-lang a.active { color: #ff4200; }
.show-for-medium { display: none !important; }
@media (max-width: 849px) {
  .show-for-medium { display: flex !important; }
  .hide-for-medium { display: none !important; }
}
.mobile-nav > li > a { padding: 10px; }
.mobile-nav .icon-menu svg { width: 2.4rem; height: 2.4rem; }

/* Off-canvas mobile menu */
.off-canvas-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
.off-canvas-overlay.open { opacity: 1; visibility: visible; }
.off-canvas { position: fixed; top: 0; bottom: 0; left: 0; width: 300px; max-width: 85vw; background: #fff; z-index: 1001; transform: translateX(-100%); transition: transform 0.3s; overflow-y: auto; padding: 20px 0; }
.off-canvas.open { transform: none; }
.off-canvas .nav-sidebar { flex-direction: column; align-items: stretch; }
.off-canvas .nav-sidebar > li { margin: 0; border-top: 1px solid #ececec; }
.off-canvas .nav-sidebar > li > a,
.off-canvas .nav-sidebar > li > .nav-sidebar-row > a { display: block; padding: 15px 20px; font-size: 1.4rem; font-weight: 600; text-transform: uppercase; color: #030870; }
.off-canvas .nav-sidebar-row { display: flex; align-items: center; justify-content: space-between; }
.off-canvas .nav-sidebar-row button { background: none; border: 0; padding: 15px 20px; color: #030870; }
.off-canvas .children { list-style: none; margin: 0; padding: 0 0 10px 20px; }
.off-canvas .children a { display: block; padding: 8px 20px; font-size: 1.4rem; color: #555; }
.off-canvas .off-canvas-close { position: absolute; top: 8px; right: 8px; background: none; border: 0; font-size: 2.4rem; line-height: 1; color: #333; padding: 8px; }
.off-canvas .header-lang { padding: 15px 20px; font-size: 1.4rem; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer-wrapper { position: relative; width: 100%; }

/* ── Back to top ────────────────────────────────────────────────────── */
.back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #030870; background: #fff; color: #030870; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s; }
.back-to-top.show { opacity: 1; visibility: visible; }

/* ── Sticky header (Flatsome "sticky-jump") ─────────────────────────── */
@keyframes stuckMoveDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.header-wrapper.stuck { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); animation: stuckMoveDown 0.6s; }
.header-wrapper.stuck .header-main { height: 70px; }
.header-wrapper.stuck #logo img { max-height: 70px; }

/* Flatsome text colour helpers used inside legacy rich text (<span data-text-color="alert">). */
[data-text-color="primary"] { color: var(--fs-color-primary) !important; }
[data-text-color="secondary"] { color: var(--fs-color-secondary) !important; }
[data-text-color="alert"] { color: var(--fs-color-alert) !important; }
[data-text-color="success"] { color: var(--fs-color-success) !important; }

/* ── stories ── (Stories & Insights + /search; owned by the stories feature) ── */
/* Legacy printed per-post colours inline with !important; they arrive as --story-color. */
.style-blog-card-title[style*="--story-color"],
.style-blog-card-excerpt[style*="--story-color"],
.style-blog-block[style*="--story-color"],
.style-blog-question-profile-title[style*="--story-color"] { color: var(--story-color) !important; }
.style-blog-comment-section .story-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* Flatsome form/button defaults the legacy stories pages relied on (base.css has no global ones). */
.style-blog-comment-section textarea,
.style-blog-comment-section input[type="text"],
.style-blog-comment-section input[type="email"],
.style-blog-comment-section input[type="tel"] { margin-bottom: 1em; line-height: 24px; color: #333; }
.style-blog-comment-section textarea { display: block; }
.style-blog-comment-section label { color: #222; }
.style-blog-comment-section input[type="submit"],
.style-blog-question-back,
.style-blog-question-next { min-height: 2.5em; line-height: 2.4em; text-transform: uppercase; letter-spacing: 0.03em; }
.style-blog-comment-section input[type="submit"]:disabled { opacity: 0.6 !important; cursor: default !important; }
.style-blog-comment-list { width: 100%; max-width: 1050px; margin: 0 auto 3rem; box-sizing: border-box; }
.style-blog-comment-list .commentlist { list-style: none; margin: 0; padding: 0; }
.style-blog-comment-list .comment { background: #fff; padding: 1.5rem; margin: 0 0 1rem; }
.style-blog-comment-list .comment-meta { margin: 0 0 0.5rem; color: #030870; }
.style-blog-comment-list .comment-meta time { font-weight: 400; color: #66657a; margin-left: 0.8rem; font-size: 1.3rem; }
@media (max-width: 768px) { .style-blog-comment-list { padding: 0 3rem; } }

.search-page .search-results { max-width: 1050px; margin: 0 auto; padding: 4rem 0 6rem; }
.search-page .search-results-title { color: #030870; font-size: 2.8rem; line-height: 1.2; margin: 0 0 2rem; }
.search-page .searchform { margin-bottom: 3rem; }
.search-page .searchform button { height: auto; align-self: stretch; }
.search-page .search-results-group { margin-bottom: 3rem; }
.search-page .search-results-group-title { color: #ff4b18; font-size: 1.8rem; text-transform: uppercase; margin: 0 0 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid #e5e5e5; }
.search-page .search-results-list { list-style: none; margin: 0; padding: 0; }
.search-page .search-result { margin: 0; padding: 1.5rem 0; border-bottom: 1px solid #f0f0f0; }
.search-page .search-result-title { display: inline-block; color: #030870; font-size: 2rem; line-height: 1.3; text-transform: uppercase; }
.search-page .search-result-title:hover { opacity: 0.7; }
.search-page .search-result-excerpt { margin: 0.6rem 0 0; color: #66657a; font-size: 1.5rem; line-height: 1.5; }
.search-page .search-results-empty { color: #66657a; font-size: 1.6rem; }
.search-page mark { background: rgba(255, 75, 24, 0.15); color: inherit; padding: 0 0.1em; }
@media (max-width: 849px) { .search-page .search-results { padding: 3rem 1.5rem 4rem; } }

/* ── booking ─────────────────────────────────────────────────────────── */
/* [start_here_calendar] additions not covered by start-here-page.css (components/booking). */
/* Flatsome's button / form-field defaults the legacy widget inherited (scoped). */
.start-here-calendar button { min-height: 2.5em; line-height: 2.4em; letter-spacing: 0.03em; text-transform: uppercase; vertical-align: middle; max-width: 100%; }
.start-here-calendar input[type="text"], .start-here-calendar input[type="email"], .start-here-calendar input[type="tel"], .start-here-calendar textarea {
  box-sizing: border-box; border: 1px solid #ddd; padding: 0 0.75em; height: 2.507em; font: inherit; font-size: 0.97em; border-radius: 0;
  max-width: 100%; width: 100%; vertical-align: middle; background-color: #fff; color: #333; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); margin-bottom: 1em;
}
.start-here-calendar textarea { min-height: 120px; }
.start-here-calendar input[type="time"] { font: inherit; font-size: 1.4rem; }
.start-here-calendar [hidden] { display: none !important; }
.start-here-calendar-day.is-unavailable { opacity: 0.28; cursor: default; }
.start-here-calendar-day:disabled:hover { background: transparent; color: #777; }
.start-here-calendar-slots { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.start-here-calendar-slot {
  min-width: 7rem; height: 3.6rem; padding: 0 1rem; margin: 0;
  border: 1px solid #d7d7d7; border-radius: 0.4rem; background: #fff; color: #333;
  font-family: "Zalando Sans", sans-serif; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.start-here-calendar-slot:hover { border-color: #1675ff; color: #1675ff; }
.start-here-calendar-slot.is-selected { border-color: #1675ff; background: #dfe8f6; color: #1675ff; font-weight: 600; }
.start-here-calendar-bottom.has-slots { flex-wrap: wrap !important; gap: 1.5rem !important; }
.start-here-calendar-bottom.has-slots .start-here-calendar-time { flex: 1 1 100% !important; }
.start-here-calendar-bottom.has-slots .start-here-calendar-actions { margin-left: auto; }
.start-here-calendar-slots-note { margin: 0; font-size: 1.4rem; color: #777; }
.start-here-contact-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.start-here-contact-done { justify-content: flex-end; }
.start-here-contact-done .start-here-calendar-next-step { width: auto !important; min-width: 12rem; padding: 0 1.6rem !important; }
.start-here-calendar-contact .start-here-contact-message { font-size: 1.4rem; }

/* ── Toasts (booking + stories) ─────────────────────────────────────── */
/* The legacy toast sat bottom-right, on top of the footer: show it at the top centre, under the
   (sticky) header, where it is always in view. */
.style-blog-toast {
  top: 8.5rem;
  bottom: auto;
  left: 50%;
  right: auto;
  width: max-content;
  max-width: min(48rem, calc(100vw - 3.2rem));
  text-align: center;
  line-height: 1.45;
  transform: translate(-50%, -1rem);
}
.style-blog-toast.is-show { transform: translate(-50%, 0); }
@media (max-width: 849px) {
  .style-blog-toast { top: 7.5rem; }
}

/* ── Footer gutters ─────────────────────────────────────────────────── */
/* The footer row is 1275px wide with no side padding (customizer CSS), so on laptop screens with
   OS scaling (1920px @150% = 1280px viewport) its text touched the window edges. Keep a 3rem gutter;
   wide screens are unchanged. The #footer id beats custom.css' !important rule. */
@media (min-width: 769px) {
  #footer .section-large-1275 > .section-content > .row {
    max-width: min(1275px, calc(100% - 6rem)) !important;
  }
}
@media (min-width: 769px) and (max-width: 1339px) {
  /* Narrower footer: the columns have no padding (px-0), so leave a gap between them. */
  #footer .footer-main-row > .col:not(.footer-cta-column) > .col-inner { padding-right: 2rem; }
  #footer .footer-main-row { font-size: 0.95em; }
}
@media (min-width: 769px) and (max-width: 1199px) {
  /* footer.css keeps the four columns content-sized on one line (nowrap), which overflows below
     ~1200px: share the line between the three text columns and put the CTA box underneath. */
  #footer .site-footer .footer-main-row { flex-wrap: wrap !important; row-gap: 3rem !important; }
  #footer .site-footer .footer-brand-column,
  #footer .site-footer .footer-explore-column,
  #footer .site-footer .footer-services-column { flex: 1 1 30% !important; min-width: 0 !important; max-width: none !important; }
  #footer .site-footer .footer-cta-column { flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: 3rem !important; }
  #footer .site-footer .footer-cta > .button { align-self: flex-start !important; width: auto !important; padding: 0 2rem !important; }
}

/* ── Header menu aligned with the footer ────────────────────────────── */
/* The menu bar spreads its items edge to edge (space-between, header.css); give it exactly the
   footer's content box so HOME lines up with the footer's left edge and the last item with its
   right edge, at every width. */
@media (min-width: 850px) {
  #header .header-bottom .container,
  #header .header-main .header-inner {
    max-width: min(1275px, calc(100% - 6rem)) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #header .header-main .nav-right > li:last-child { margin-right: 0; }
  #header .header-main .nav-left > li:first-child { margin-left: 0; }
}
@media (min-width: 850px) and (max-width: 1023px) {
  /* Six uppercase items don't fit on one line below ~950px (they wrapped at 850px already in the
     legacy theme): slightly smaller type keeps a single line. */
  #header .header-bottom-nav > li > a { font-size: 1.25rem !important; letter-spacing: 0 !important; }
}