/* Small additions on top of the real Flatsome CSS.
   Mainly: drive the off-canvas mobile menu ourselves (Flatsome's JS is removed). */

#main-menu.mobile-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 300px;
  max-width: 86vw;
  background: #fff;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  padding: 28px 22px;
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.16);
  display: block !important; /* override Flatsome .mfp-hide so we can animate */
}
#main-menu.off-canvas-open {
  transform: translateX(0);
}

.ux-body-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 999;
}
body.off-canvas-active .ux-body-overlay {
  opacity: 1;
  visibility: visible;
}
body.off-canvas-active {
  overflow: hidden;
}

/* ---------- Join form ---------- */
.jf {
  --jf-ink: #0f0f0f;
  --jf-text: #4a4a4a;
  --jf-line: #e3e3e3;
  --jf-line-soft: #ededed;
  --jf-taupe: #b98e6a;
  --jf-taupe-soft: rgba(185, 142, 106, .18);
  --jf-err: #c0392b;
  max-width: 760px;
  margin: 12px auto 0;
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--jf-text);
  -webkit-font-smoothing: antialiased;
}

/* --- Text field grid --- */
.jf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}
@media (max-width: 549px) {
  .jf-row { grid-template-columns: 1fr; gap: 18px; }
}

.jf-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.jf-field.jf-full { margin-top: 28px; }

.jf-lab {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--jf-ink);
}
.jf-lab b {
  color: var(--jf-taupe);
  font-weight: 700;
  margin-left: 1px;
}
.jf-opt {
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  color: #9a9a9a;
}

/* --- Inputs --- */
.jf input[type=text],
.jf input[type=email],
.jf input[type=tel],
.jf textarea {
  width: 100%;
  padding: 12px 14px;
  min-height: 46px;
  border: 1px solid var(--jf-line);
  border-radius: 2px;
  background: #fff;
  font: inherit;
  font-size: .95rem;
  color: #2a2a2a;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.jf textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}
.jf input::placeholder,
.jf textarea::placeholder { color: #b3b3b3; }

.jf input:hover,
.jf textarea:hover { border-color: #cfcfcf; }

.jf input:focus,
.jf textarea:focus {
  outline: none;
  border-color: var(--jf-taupe);
  box-shadow: 0 0 0 3px var(--jf-taupe-soft), inset 0 1px 2px rgba(0,0,0,.04);
}

/* --- Fieldset groups --- */
.jf-group {
  border: 0;
  padding: 0;
  margin: 34px 0 0;
}
.jf-group legend {
  display: block;
  width: 100%;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--jf-ink);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--jf-line-soft);
}
.jf-group legend b {
  color: var(--jf-taupe);
  font-weight: 700;
  margin-left: 1px;
}
.jf-hint {
  font-size: .8rem;
  font-style: italic;
  color: #8a8a8a;
  margin: -6px 0 12px;
  letter-spacing: .01em;
}

/* --- Chips --- */
.jf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.jf-chip {
  position: relative;
  display: inline-flex;
}
.jf-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.jf-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--jf-line);
  border-radius: 4px;
  background: #fff;
  font-size: .9rem;
  letter-spacing: .01em;
  color: #4a4a4a;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.jf-chip input:hover + span { border-color: var(--jf-taupe); color: #2a2a2a; }
.jf-chip input:checked + span {
  background: var(--jf-ink);
  border-color: var(--jf-ink);
  color: #fff;
  font-weight: 600;
}
.jf-chip input:focus-visible + span {
  box-shadow: 0 0 0 3px var(--jf-taupe-soft);
  border-color: var(--jf-taupe);
}

/* --- Submit --- */
.jf-actions {
  margin-top: 40px;
  text-align: center;
}
.jf-submit {
  background: var(--jf-ink);
  color: #fff;
  border: 1px solid var(--jf-ink);
  border-radius: 2px;
  padding: 15px 52px;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.jf-submit:hover {
  background: #2a2a2a;
  box-shadow: inset 0 0 0 100px rgba(255,255,255,.06);
}
.jf-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--jf-taupe-soft);
}
.jf-submit:active { background: #000; }
.jf-submit:disabled { opacity: .55; cursor: default; }

/* --- Validation states --- */
.jf-field.jf-invalid input,
.jf-field.jf-invalid textarea {
  border-color: var(--jf-err);
  box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}
.jf-group.jf-invalid legend {
  color: var(--jf-err);
  border-bottom-color: rgba(192,57,43,.35);
}
.jf-group.jf-invalid legend b { color: var(--jf-err); }
.jf-group.jf-invalid .jf-chip span { border-color: rgba(192,57,43,.5); }

/* --- Status message --- */
.jf-msg {
  text-align: center;
  margin-top: 18px;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  min-height: 1.2em;
}
.jf-msg.ok { color: #627D47; }
.jf-msg.bad { color: var(--jf-err); }
.jf-msg a { color: inherit; text-decoration: underline; }

/* --- Honeypot --- */
.jf-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Success state --- */
.jf-done {
  text-align: center;
  padding: 48px 24px;
}
.jf-done h3 {
  font-family: 'Dancing Script', 'Lato', cursive;
  font-size: 2rem;
  font-weight: 700;
  color: var(--jf-ink);
  margin: 0 0 14px;
}
.jf-done p {
  color: #6a6a6a;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 460px;
  margin: 0 auto;
}
.jf-done p::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--jf-taupe);
  margin: 0 auto 20px;
}
/* ---------- Lightbox ---------- */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 15, 0.92);
  padding: 4vh 4vw;
}
.lb-overlay.open { display: flex; }
.lb-fig { margin: 0; max-width: 92vw; max-height: 92vh; text-align: center; }
.lb-fig img {
  max-width: 100%;
  max-height: 84vh;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lb-fig figcaption {
  color: #eee;
  font-size: 0.95rem;
  margin-top: 14px;
  max-width: 700px;
  margin-inline: auto;
}
.lb-btn {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.lb-btn:hover { opacity: 1; }
.lb-close { top: 18px; right: 24px; font-size: 2.4rem; line-height: 1; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 3.4rem; padding: 0 18px; }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
@media (max-width: 600px) {
  .lb-prev, .lb-next { font-size: 2.4rem; padding: 0 8px; }
}

/* ---------- Kill Flatsome's orphaned loading spinner ---------- */
/* Flatsome's (removed) JS used to .fadeOut() the standalone .loading-spin element
   once a slider's images loaded. Our carousel/lightbox build their own DOM and
   never need it, so the leftover element would spin forever. Hide it everywhere. */
.loading-spin { display: none !important; }

/* ---------- Carousel (vanilla, reuses flatsome.css .flickity-* styling) ---------- */
/* Before JS runs, show only the first slide so images don't stack into a tall column. */
.slider:not(.flickity-enabled) > .img { display: none; }
.slider:not(.flickity-enabled) > .img:first-of-type { display: block; }

.slider.flickity-enabled { position: relative; }
.slider.flickity-enabled .flickity-viewport { overflow: hidden; position: relative; touch-action: pan-y; }
.slider.flickity-enabled .flickity-slider {
  /* Flatsome sets this to position:absolute (expects Flickity JS to size it);
     override so our flex track flows and gives the viewport real height. */
  position: relative !important;
  display: flex;
  align-items: flex-start;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slider.flickity-enabled.is-dragging .flickity-slider { transition: none; }
.slider.flickity-enabled .flickity-slider > .img {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  margin: 0;
  /* Portfolio images are ~square; give each slide a square frame the
     cover-fit image fills (mirrors the homepage Manifolio thumbnails). */
  aspect-ratio: 1 / 1;
}
.slider.flickity-enabled .flickity-slider > .img .img-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.slider.flickity-enabled .flickity-slider > .img .img-inner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flickity-prev-next-button svg { display: block; }
.flickity-prev-next-button .arrow { fill: currentColor; }

/* Pin the arrows ourselves (Flatsome uses a fixed top:40% that only centers at one
   image size, and its own horizontal rule that drifts off the image at some widths).
   Vertical centering uses inset + auto margins (NOT transform) so Flatsome's
   opacity hover-reveal still works; horizontal is a small fixed inset on each
   image edge. .slider == the image box, so the arrows sit symmetrically on it. */
.slider.flickity-enabled .flickity-prev-next-button {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;             /* vertical-center within the image (transform-free) */
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4) !important;   /* clear dark circle, visible on any photo */
  color: #fff !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  opacity: 1 !important;                        /* always visible, clearly on the image */
  transform: none !important;
  transition: background 0.2s ease;
  z-index: 3;
}
.slider.flickity-enabled .flickity-prev-next-button:hover { background: rgba(0, 0, 0, 0.6) !important; }
.slider.flickity-enabled .flickity-prev-next-button.previous { left: 18px; right: auto; }
.slider.flickity-enabled .flickity-prev-next-button.next { right: 18px; left: auto; }
.slider.flickity-enabled .flickity-prev-next-button::before,
.slider.flickity-enabled .flickity-prev-next-button::after { content: none !important; } /* hide Flatsome's icon glyph */
.slider.flickity-enabled .flickity-prev-next-button svg { width: 56%; height: 56%; stroke: #fff !important; fill: none !important; border: 0 !important; }
.slider.flickity-enabled .flickity-prev-next-button .gr-chev polyline { stroke: #fff; fill: none; }

/* Touch / mobile: flatsome hides arrows until :hover (never fires on touch) — show them. */
@media (hover: none), (max-width: 549px) {
  .slider.flickity-enabled .flickity-prev-next-button {
    opacity: 0.85 !important;
    transform: translateX(0) !important;
    width: 40px;
  }
  .slider.flickity-enabled .flickity-prev-next-button.next { right: 2%; }
  .slider.flickity-enabled .flickity-prev-next-button.previous { left: 2%; }
  .slider.flickity-enabled .flickity-page-dots .dot { width: 14px; height: 14px; margin: 0 7px; }
}

.row.row-slider.flickity-enabled .flickity-slider { align-items: stretch; }
.row.row-slider.flickity-enabled .flickity-slider > .col { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .slider.flickity-enabled .flickity-slider { transition: none; }
}

/* ============================================================
   Custom Google Reviews section (replaces Trustindex widget)
   ============================================================ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.gr-section {
  padding: clamp(40px, 7vw, 80px) 0;
  background: #f7f7f7;
  font-family: var(--font-body, 'Lato', sans-serif);
}
/* Reviews use more horizontal space than the 1080 content container so the
   cards are wide enough to read comfortably. */
.gr-section .gr-layout { display: flex; align-items: flex-start; gap: 28px; max-width: min(1840px, 96vw); margin-inline: auto; }

/* ---- left rating panel ---- */
.gr-aside { flex: 0 0 180px; text-align: center; padding-top: 6px; }
.gr-word { font-weight: 800; font-size: 1.4rem; letter-spacing: 0.02em; color: #1a1a1a; }
.gr-aside .gr-stars { color: #fbbc04; font-size: 1.7rem; letter-spacing: 2px; line-height: 1.2; margin: 4px 0 6px; }
.gr-based { margin: 0 0 12px; color: #70757a; font-size: 0.9rem; }
.gr-based strong { color: #1a1a1a; }
.gr-google { display: inline-block; text-decoration: none; }
.gr-google img { width: 92px; height: auto; display: block; margin: 4px auto 0; }

/* ---- horizontal slider of cards (5 per view on desktop) ---- */
.gr-slider { position: relative; flex: 1 1 auto; min-width: 0; --per: 6; --gap: 18px; }
.gr-track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gr-track::-webkit-scrollbar { display: none; }
.gr-card {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  height: 290px;            /* uniform cards; long reviews scroll inside */
}
.gr-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.gr-name { font-weight: 700; font-size: 0.95rem; color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-gicon { flex: 0 0 auto; }
.gr-stars-row { color: #fbbc04; font-size: 1rem; letter-spacing: 1px; margin-bottom: 8px; }
.gr-text {
  margin: 0;
  color: #5f6368;
  font-size: 0.9rem;
  line-height: 1.55;
  /* default: clamped to a few lines, no scroll, no height change */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* after "Read more": fill the remaining (fixed) card height and scroll in place */
.gr-text.gr-scroll {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;       /* hide scrollbar (Firefox) */
  -ms-overflow-style: none;    /* old Edge/IE */
}
.gr-text.gr-scroll::-webkit-scrollbar { display: none; }  /* hide scrollbar (WebKit) */
.gr-readmore {
  align-self: flex-start;
  margin-top: 8px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #70757a; font-size: 0.85rem; font-weight: 400;
  text-transform: none; letter-spacing: 0;
}
.gr-readmore:hover { color: var(--color-accent, #f79707); }

/* ---- slider nav arrows (minimal gray chevrons, vertically centered) ---- */
.gr-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 44px;
  border: 0; background: none; color: #9aa0a6;
  font-size: 2rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; z-index: 2;
  transition: color 0.2s ease;
}
.gr-nav:hover { color: #5f6368; }
.gr-prev { left: -22px; }
.gr-next { right: -22px; }

/* per-view scales with width (later/narrower rule wins) */
@media (max-width: 1900px) { .gr-slider { --per: 5; } }
@media (max-width: 1500px) { .gr-slider { --per: 4; } }
@media (max-width: 1150px) { .gr-slider { --per: 3; } }
@media (max-width: 860px)  { .gr-slider { --per: 2; } }
@media (max-width: 680px) {
  .gr-layout { flex-direction: column; align-items: center; gap: 18px; }
  .gr-aside { flex: none; }
  .gr-slider { width: 100%; --per: 1.15; }
  .gr-prev { left: -6px; }
  .gr-next { right: -6px; }
}

/* ---------- Site search (404 page + /search/) ---------- */
.searchform { position: relative; max-width: 560px; }
.searchform .flex-row { gap: 0; }
.live-search-results {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; margin-top: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); overflow: hidden;
}
.live-search-results.open { display: block; }
.live-search-results .ls-item { display: block; padding: 10px 14px; border-bottom: 1px solid #f0f0f0; color: #333; }
.live-search-results .ls-item:last-child { border-bottom: 0; }
.live-search-results .ls-item:hover { background: #faf6ef; }
.live-search-results .ls-item strong { display: block; font-size: 0.92rem; color: #111; }
.live-search-results .ls-item span { display: block; font-size: 0.8rem; color: #777; line-height: 1.4; margin-top: 2px; }
.live-search-results .ls-none { padding: 12px 14px; color: #888; font-size: 0.88rem; }
.live-search-results mark, .search-snip mark { background: #fdebc8; color: inherit; padding: 0 1px; border-radius: 2px; }

.search-results { margin-top: 26px; }
.search-hit { padding: 16px 0; border-bottom: 1px solid #eee; }
.search-hit:first-child { border-top: 1px solid #eee; }
.search-hit h3 { margin: 0 0 4px; font-size: 1.15rem; }
.search-hit h3 a { color: #1a0dab; }
.search-hit h3 a:hover { text-decoration: underline; }
.search-snip { margin: 0 0 4px; color: #4d5156; font-size: 0.92rem; line-height: 1.55; }
.search-url { font-size: 0.82rem; color: #0a7d33; word-break: break-all; }
.search-empty { color: #666; padding: 10px 0; }


/* ---------- Join form — v2: match the admin form editor's look ---------- */
.jf { max-width: 660px; margin: 4px auto 0; }
/* intro: cursive title + centred readable paragraphs (like the admin preview) */
.jf-intro { text-align: center; max-width: 620px; margin: 8px auto 30px; }
.jf-title {
  font-family: 'Dancing Script', 'Lato', cursive;
  font-size: clamp(1.8rem, 4.4vw, 2.35rem);
  font-weight: 700; color: #0f0f0f; line-height: 1.14; margin: 0 0 16px;
}
.jf-intro p { color: #4a4a4a; font-size: .98rem; line-height: 1.7; margin: 0 auto 12px; max-width: 580px; }
.jf-intro p:last-child { margin-bottom: 0; }
/* field labels: sentence case, a touch larger */
.jf-lab { text-transform: none; letter-spacing: 0; font-size: .92rem; font-weight: 700; color: #333; }
.jf-lab b { color: #b98e6a; }
.jf-opt { text-transform: none; }
/* group questions: sentence case, clean (no all-caps, no divider line) */
.jf-group { margin-top: 30px; }
.jf-group legend {
  text-transform: none; letter-spacing: 0; font-size: 1.02rem; font-weight: 700;
  color: #2a2a2a; border-bottom: 0; padding-bottom: 0; margin-bottom: 12px;
}
.jf-group legend b { color: #b98e6a; }
.jf-hint { font-size: .85rem; font-style: normal; color: #8a8a8a; margin: -2px 0 12px; }
/* inputs: softer rounded corners like the editor */
.jf input[type=text], .jf input[type=email], .jf input[type=tel], .jf textarea { border-radius: 8px; }
/* options as clean pills */
.jf-chips { gap: 9px; }
.jf-chip span {
  border-radius: 999px; border-width: 1.5px; border-color: #e2ddd4; padding: 9px 18px;
  font-size: .9rem; color: #444;
}
.jf-chip input:hover + span { border-color: #b98e6a; }
.jf-chip input:checked + span { background: #0f0f0f; border-color: #0f0f0f; color: #fff; }
/* submit: keep the site's charcoal button */
.jf-actions { margin-top: 36px; }

/* ---- Mobile sticky-header fix ------------------------------------------------
   Safety net for the JS in ui.js: on phones/tablets the sticky-jump header must
   never become position:fixed, or it covers the top of the page and traps the
   first content (the title) under the bar when scrolling back up. Force it to
   scroll with the page and drop the height-lock the script would add. */
@media (max-width: 849px) {
  .header.has-sticky .header-wrapper.stuck {
    position: static !important;
    animation: none !important;
    box-shadow: none !important;
  }
  .header.has-sticky.stuck,
  .header.has-sticky { height: auto !important; }
}