/* Ember 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).
   Ember'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) Guild'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. Ember'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 (Ember'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; }

/* ============================================================================
   Article pages (served by server.js at /<slug>) — on-brand Aura styling.
   Self-contained; does not affect the forked pages. ml- prefixed only.
   ========================================================================== */
.ml-atopbar { position: sticky; top: 0; z-index: 9999; background: #fff; border-bottom: 1px solid #e7e9f0; box-shadow: 0 1px 6px rgba(20,30,60,.05); }
.ml-atopbar-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 66px; padding: 0 26px; }
.ml-atopbar .ml-brand { font-family: 'Martel Sans','Open Sans',sans-serif; font-size: 24px; font-weight: 700; color: #26335c; text-decoration: none; letter-spacing: .2px; }
.ml-atopbar nav { display: flex; gap: 26px; }
.ml-atopbar nav a { font-family: 'Open Sans',sans-serif; font-size: 15px; color: #3a4361; text-decoration: none; transition: color .2s; }
.ml-atopbar nav a:hover { color: #613c93; }

.ml-ahero { position: relative; background-size: cover; background-position: center; padding: 118px 26px 96px; text-align: center; }
.ml-ahero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,48,.55), rgba(20,24,48,.68)); }
.ml-ahero-inner { position: relative; max-width: 900px; margin: 0 auto; }
.ml-ahero .ml-eyebrow { display: inline-block; font-family: 'Open Sans',sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #d9c9f5; margin-bottom: 16px; }
.ml-ahero h1 { font-family: 'Martel Sans','Open Sans',sans-serif; font-size: 42px; line-height: 1.2; font-weight: 700; color: #fff; margin: 0 0 18px; }
.ml-ahero .ml-ameta { font-family: 'Open Sans',sans-serif; font-size: 15px; color: rgba(255,255,255,.9); margin: 0; }

.ml-article { max-width: 760px; margin: 0 auto; padding: 56px 26px 40px; font-family: 'Open Sans',sans-serif; }
.ml-article p { font-size: 18px; line-height: 1.75; color: #2f3550; margin: 0 0 24px; }
.ml-article h2 { font-family: 'Martel Sans','Open Sans',sans-serif; font-size: 27px; color: #26335c; margin: 40px 0 16px; }
.ml-aback { display: inline-block; margin-top: 20px; font-size: 15px; font-weight: 600; color: #613c93; text-decoration: none; }
.ml-aback:hover { text-decoration: underline; }
.ml-afooter { text-align: center; padding: 34px 20px; color: #7a819b; font-family: 'Open Sans',sans-serif; font-size: 14px; border-top: 1px solid #eceef4; margin-top: 30px; }