/* Load Exo — the theme's display font (font-family:exo). The original @font-face
   source does not resolve in the fork, so headings fall back to plain sans. */
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

/* Dust live layer — minimal. Restores behaviours the removed Strikingly runtime
   provided. Adds NO new layout; only un-hides and un-freezes what the runtime
   would have. Everything else is the original bundle CSS untouched. */

/* 1) reveal — Strikingly hides sections/items until its JS runs */
.s-section,
.s-section .transition,
.transition { opacity: 1 !important; }
[style*="opacity: 0"] { opacity: 1 !important; }

/* 1b) full-screen hero. The first cover section (home) is meant to fill the viewport.
   The bundle only grants 100vh via `.slide.s-only-one-section.first-section-full-height
   .s-section{min-height:100vh}` — but those trigger classes (s-only-one-section,
   first-section-full-height) were added to the <li.slide> by the runtime. Stripped of
   the runtime they're gone, so the cover collapses to content height (a short band).
   Dust's hero is the S6 "block" section (.s6-section); restore the full-screen cover on
   the first visible section (covering both the s-section-full and s6 hero variants). The
   section is already display:flex; align-items:center, so its content stays centred. */
.slide.s-first-visible-section .s-section.s-section-full,
.slide.s-first-visible-section .s-section.s6-section {
  min-height: 100vh !important;
}

/* 2) product-row sections (services / portfolio).
   These are NOT carousels — each product is a 2-column row (image + title/description),
   repeated 3x, with a frozen single-image slick inside each. The saved slick is frozen
   at width:0 and its disabled "Previous/Next" buttons render as broken glyphs.
   Fix: restore the 2-column row layout, drop the frozen slick entirely (killing the
   broken arrows), and show the static duplicate image that sits beside it. */
.ml-slider .s-ecommerce-row-view-wrapper { max-width: 1080px; margin: 0 auto; }
/* CSS Grid (not flex): minmax(0,..) tracks shrink below the image's intrinsic width,
   so the full-size image can't starve the text column (the flexbox min-content trap).
   The bundle floats BOTH .columns children right (`.s-ecommerce-row-view-product .columns
   {float:right}`) — that is the narrow right-strip bug; we neutralise float/width here. */
.ml-slider .s-ecommerce-row-view-product {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
  gap: 44px !important; align-items: center !important;
  width: 100% !important; max-width: 1080px !important; margin: 0 auto 56px !important; float: none !important;
}
/* neutralise the Skeleton floats/widths on BOTH direct .columns children */
.ml-slider .s-ecommerce-row-view-product > .columns,
.ml-slider .s-ecommerce-row-view-image-package,
.ml-slider .s-ecommerce-row-view-product-detail-panel {
  width: auto !important; max-width: 100% !important; min-width: 0 !important;
  float: none !important; margin: 0 !important; padding: 0 !important;
  display: block !important; position: static !important; text-align: left !important;
}
/* constrain the image so it fills its own track and never overflows the grid */
.ml-slider .s-ecommerce-row-view-product-image-wrapper,
.ml-slider .s-ecommerce-row-view-product-image-wrapper .image-wrapper,
.ml-slider .s-ecommerce-row-view-product-image-wrapper .s-img-wrapper {
  width: 100% !important; max-width: 100% !important; min-width: 0 !important; float: none !important;
}
.ml-slider .s-ecommerce-row-view-product-image-wrapper img {
  width: 100% !important; height: auto !important; display: block !important; border-radius: 4px !important;
}
@media (max-width: 800px) {
  .ml-slider .s-ecommerce-row-view-product { grid-template-columns: 1fr !important; gap: 20px !important; }
}
/* drop the frozen slick (removes the "Previous/Next" arrow glyphs); show static image */
.ml-slider .slider-wrapper { display: none !important; }
.ml-slider .image-wrapper,
.ml-slider .s-img-wrapper { display: block !important; width: 100% !important; }
.ml-slider .image-wrapper img,
.ml-slider .s-img-wrapper img {
  width: 100% !important; height: auto !important; display: block !important;
  border-radius: 4px !important;
}
/* safety: if any slick survives elsewhere, neutralise its arrows/dots and freeze-width */
.ml-slider .slick-arrow, .ml-slider .slick-dots { display: none !important; }
.slick-slide[style*="width: 0"] { width: auto !important; }

/* 2b) blog section (services) — grid of post cards. The runtime sized the thumbnail
   avatars; without it the .s-blog-avatar divs have no height so their background
   images collapse. Restore a card grid and give avatars a real aspect box. */
.s-blog-posts-columns {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 32px !important; float: none !important;
}
/* .s-blog-posts-columns also carries .clearfix, whose ::before/::after have
   content+display:block — in a grid they become phantom items (the empty first
   cell that shifts the posts over). Remove them. */
.s-blog-posts-columns::before,
.s-blog-posts-columns::after { display: none !important; content: none !important; }
.s-blog-posts-columns .s-blog-entry {
  width: auto !important; float: none !important; margin: 0 !important; min-width: 0 !important;
}
.s-blog-posts-columns .s-blog-entry-inner { display: block !important; }
.s-blog-posts-columns .s-blog-entry-left,
.s-blog-posts-columns .s-blog-avatar-container { width: 100% !important; float: none !important; margin: 0 !important; }
.s-blog-posts-columns .s-blog-avatar {
  display: block !important; width: 100% !important;
  aspect-ratio: 16 / 10 !important; min-height: 190px;
  background-size: cover !important; background-position: center !important;
  background-repeat: no-repeat !important; border-radius: 6px !important;
}
.s-blog-posts-columns .s-blog-entry-right { width: auto !important; float: none !important; padding: 14px 2px 0 !important; }
@media (max-width: 800px) { .s-blog-posts-columns { grid-template-columns: 1fr !important; } }

/* 2d) portfolio tiled gallery (.s-new-gallery) — the runtime normally (a) toggled
   desktop/mobile blocks, (b) sized each tiled item to an aspect box and painted the
   photo as a background-image on the absolutely-positioned .image-wrapper, with the
   real <img> hidden (.image-wrapper img{display:none}). Without the runtime BOTH the
   desktop and mobile blocks render (dupes), every .image-wrapper is an empty 0-height
   absolute box, and the two columns stack full-width. Result: an empty gallery.
   Fix: drop the mobile dupe, lay the two columns 2-up, and un-hide the <img> so the
   photo flows and gives the item real height. */
.s-new-gallery .s-new-gallery-tiled-mobile { display: none !important; }
.s-new-gallery .s-new-gallery-tiled-desktop { display: block !important; }
.s-new-gallery-content .s-new-gallery-tiled-columns.two {
  width: 50% !important; box-sizing: border-box !important; padding: 0 5px !important;
}
.s-new-gallery-content .s-new-gallery-item .image-wrapper {
  position: static !important; height: auto !important; width: 100% !important;
}
.s-new-gallery-content .s-new-gallery-item .image-wrapper img,
.s-new-gallery-content .s-new-gallery-item .s-img-wrapper img {
  display: block !important; width: 100% !important; height: auto !important;
  border-radius: 4px !important;
}
.s-new-gallery-content .s-new-gallery-item .s-img-wrapper { display: block !important; width: 100% !important; }
@media (max-width: 800px) {
  .s-new-gallery-content .s-new-gallery-tiled-columns.two { width: 100% !important; float: none !important; }
}

/* 2d-grid) Dust's portfolio uses the GRID gallery variant (.s-new-gallery-grid-item),
   not the tiled one above. Each item's 2-column masonry position was painted by a
   runtime-injected per-item emotion scope (css-2fl5bq, css-cax6ar, …); those scopes are
   undefined once the runtime is stripped, so every .s-new-gallery-grid-item falls back to
   the bundle's width:100% and the whole gallery stacks in a single column. Lay the `.two`
   items out as a real full-bleed 2-column grid (matching the original edge-to-edge look). */
.s-new-gallery-content:has(.s-new-gallery-grid-item.two) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important; font-size: 0 !important;
}
.s-new-gallery-content .s-new-gallery-grid-item.two {
  width: auto !important; display: block !important; float: none !important;
  margin: 0 !important; vertical-align: top !important;
}
.s-new-gallery-content .s-new-gallery-grid-item .s-component,
.s-new-gallery-content .s-new-gallery-grid-item .s-component-content,
.s-new-gallery-content .s-new-gallery-grid-item .item { display: block !important; height: 100% !important; }
.s-new-gallery-content .s-new-gallery-grid-item img {
  display: block !important; width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: 0 !important;
}
@media (max-width: 800px) {
  .s-new-gallery-content:has(.s-new-gallery-grid-item.two) { grid-template-columns: 1fr !important; }
}

/* 2e) contact.html map — the transform (step 6c) replaces the dead #s-map placeholder
   with a static Google-Maps embed iframe. Keep the map column visible and make the
   #s-map box + its iframe fill the reserved height so the map renders in place, exactly
   where the original placed it (between the form and the contact-info). */
.s-contact-section-columns .s-google-maps-column { display: block !important; }
#s-map {
  visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;
  min-height: 246px !important; overflow: hidden !important;
}
#s-map .s-map-blur-layer, #s-map .fill-spinner-wrapper { display: none !important; }
#s-map iframe { display: block !important; width: 100% !important; height: 100% !important; min-height: 246px !important; border: 0 !important; }

/* 2c) navbar styling — NONE. Dust's navbar is natively dark (#0d0d0e background,
   white text via s-bg-light-text). That background is defined in the embedded
   emotion scope '.css-y5wxnt.s-nav.navigator .s-navbar-desktop{background:#0d0d0e}',
   which we keep intact, so the dark bar renders correctly with no override. We must
   NOT flip it to white, and NOT add an ml-scrolled solid-white state (Dust's navbar
   is the 'normal' non-sticky variant and stays dark). Both overrides are omitted here. */

/* 4) mobile menu toggle (hamburger) — shown open when we add .ml-open */
.s-uncollapsed-nav.ml-open { display: block !important; }

/* 5) Dark-section text colour. Dust's sub-pages (About/Articles/Events/Shop) use
   Strikingly's runtime "new-text-color-logic": on an s-bg-dark section the runtime
   paints titles and body text light. That runtime is stripped in the fork, so text
   falls back to the theme's default dark grey (#4b5056) and is nearly invisible on
   the dark background. Restore light text on every dark section (light home page
   sections are s-bg-light / s-no-bg and are untouched). */
.s-section.s-bg-dark .s-font-title,
.s-section.s-bg-dark .s-font-body,
.s-section.s-bg-dark .s-item-title,
.s-section.s-bg-dark .s-item-text,
.s-section.s-bg-dark .s-rich-text-content,
.s-section.s-bg-dark h1, .s-section.s-bg-dark h2, .s-section.s-bg-dark h3,
.s-section.s-bg-dark h4, .s-section.s-bg-dark p, .s-section.s-bg-dark li,
.s-section.s-bg-dark .s-text-color-default { color: #fff !important; }
/* secondary text (prices / subtitles) stays legible but slightly dimmed */
.s-section.s-bg-dark .s-item-subtitle,
.s-section.s-bg-dark .s-ecommerce-row-view-product-pricing { color: rgba(255,255,255,.75) !important; }

/* 7) Hero carousel controls (built by dust-live.js) — replaces the runtime's
   paddle-image arrows and dots with self-contained ones. */
.s-slider .slick-slider{position:relative;}
.dust-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:20;border:0;background:transparent;
  color:#fff;font-size:52px;line-height:1;cursor:pointer;padding:0 14px;opacity:.8;transition:opacity .2s;font-family:Arial,sans-serif;}
.dust-arrow:hover{opacity:1;}
.dust-prev{left:8px;} .dust-next{right:8px;}
.dust-dots{position:absolute;left:0;right:0;bottom:22px;z-index:20;display:flex;justify-content:center;gap:10px;}
.dust-dot{width:11px;height:11px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.45);transition:background .2s;}
.dust-dot-on{background:#ffffff;}
@media(max-width:700px){.dust-arrow{font-size:38px;}}
/* kill the original slick paddle-arrow background PNGs (404) — replaced by .dust-arrow */
.s-slider .slick-prev,.s-slider .slick-next,.s-slider .slick-arrow{background-image:none !important;display:none !important;}
/* the real slider arrows in this template are .prev-button/.next-button with a
   paddle-PNG background (404). Hide them; .dust-arrow replaces them. */
.s-slider .prev-button,.s-slider .next-button{display:none !important;}
.s-slider .prev-button .arrow,.s-slider .next-button .arrow{background-image:none !important;}