/* Static-hosting fixes: this site was mirrored from Squarespace, whose scroll-reveal
   animations and masonry gallery rely on client-side JS that no longer runs here.
   These overrides make content visible and lay out galleries without that JS. */

/* Hero background video (index.html): fill the wrapper Squarespace's own
   (now-inert) video-background JS would have sized. */
.sqs-video-background-native__video-player {
  width: 100%;
  height: 100%;
}

.sqs-video-background-native__video-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The "Contact Us" section is a separate section per page (each with its own
   id) and renders with a different default background color depending on
   its position on the page. Pin all four to the same grey (matching
   services.html's original look). The site footer below it (shared id
   681141a9525a93700fde082f) is a distinct section and stays white. */
[data-section-id="68111dd58989f309da76e49e"] .section-background,
[data-section-id="68111dd58989f309da76e4b4"] .section-background,
[data-section-id="68111dd58989f309da76e4e4"] .section-background {
  background-color: rgb(220, 220, 220) !important;
}

/* On mobile, skip the grey Contact Us background entirely and keep every
   section background white. */
@media (max-width: 767px) {
  [data-section-id="68111dd58989f309da76e49e"] .section-background,
  [data-section-id="68111dd58989f309da76e4b4"] .section-background,
  [data-section-id="68111dd58989f309da76e4e4"] .section-background {
    background-color: rgb(255, 255, 255) !important;
  }
}

/* contact.html's own Contact Us section stays white (it's the whole page,
   so the grey card-on-grey look was redundant there), and the shared
   site footer (id 681141a9525a93700fde082f) stays white on every page. */
[data-section-id="68111dd58989f309da76e492"] .section-background,
[data-section-id="681141a9525a93700fde082f"] .section-background {
  background-color: rgb(255, 255, 255) !important;
}

/* Site header/nav: replaces Squarespace's header component (which needed
   its own JS to render the mobile menu and animated transparent-to-solid
   scroll effect) with the same simple, static pattern used on
   devotionforcupid.com and ishtarsimage.com: a plain sticky bar, no scroll
   animation, and a hamburger toggle that reveals a dropdown list on mobile. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 6vw;
  max-width: 1500px;
  margin: 0 auto;
}

.brand {
  font-family: var(--heading-font-font-family, inherit);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-family: var(--body-font-font-family, inherit);
  font-size: 0.9rem;
  color: #000;
  text-decoration: none;
}

.nav-links a.active {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav-links a:hover {
  opacity: 0.6;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  color: #000;
  padding: 6px 12px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.nav-drawer {
  display: none;
  flex-direction: column;
  padding: 4px 6vw 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
}

.nav-drawer.open {
  display: flex;
}

.nav-drawer a {
  font-family: var(--body-font-font-family, inherit);
  padding: 12px 0;
  font-size: 0.95rem;
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.nav-drawer a.active {
  font-weight: 700;
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Portfolio category tiles (portfolio.html) are already square boxes
   (.grid-image uses a padding-bottom trick), but the photo itself was a
   plain block image overflowing and clipped from the top-left. Fill the
   existing wrapper and center-crop instead. */
#gridThumbs.portfolio-grid-basic .grid-image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: unset !important;
  object-fit: cover !important;
  object-position: center !important;
}

[data-animation-role],
.gallery-masonry-item-wrapper,
.gallery-masonry-item-caption,
.gallery-grid-item-wrapper,
.gallery-grid-item-caption,
.gallery-strips-item-wrapper,
.gallery-strips-item-caption,
.gallery-slideshow-item-src,
.gallery-lightbox-item-src,
.gallery-fullscreen-slideshow-item-src,
.lazy-load,
.newsletter-block {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: none !important;
}

.gallery-masonry-wrapper {
  display: block !important;
  column-count: 3;
  column-gap: 20px;
}

.gallery-masonry-item {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: 20px;
}

@media (max-width: 900px) {
  .gallery-masonry-wrapper { column-count: 2; }
}

@media (max-width: 550px) {
  .gallery-masonry-wrapper { column-count: 1; }
}

/* Clean, minimal styling for the Formspree contact form (replaces the
   original Squarespace form, which required their backend to render). */

.static-fallback-form {
  max-width: 420px;
  margin: 0 auto;
  font-family: var(--body-font-font-family, inherit);
  background: hsla(var(--white-hsl), 1);
  border: 1px solid hsla(var(--black-hsl), 0.12);
  border-radius: 6px;
  box-shadow: 0 4px 24px hsla(var(--black-hsl), 0.08);
  padding: 32px;
  box-sizing: border-box;
}

.static-fallback-form .ff-field {
  margin-bottom: 20px;
  text-align: left;
}

.static-fallback-form label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsla(var(--black-hsl), 0.7);
  margin-bottom: 8px;
}

.static-fallback-form input,
.static-fallback-form textarea {
  display: block;
  width: 100%;
  border: 1px solid hsla(var(--black-hsl), 0.3);
  border-radius: 4px;
  background: hsla(var(--black-hsl), 0.03);
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: hsla(var(--black-hsl), 1);
  box-sizing: border-box;
  resize: vertical;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.static-fallback-form textarea {
  min-height: 90px;
}

.static-fallback-form input:focus,
.static-fallback-form textarea:focus {
  outline: none;
  background: hsla(var(--white-hsl), 1);
  border-color: hsla(var(--black-hsl), 1);
}

.static-fallback-form .ff-submit {
  display: block;
  width: 100%;
  border: 1px solid hsla(var(--black-hsl), 1);
  background: hsla(var(--black-hsl), 1);
  color: hsla(var(--white-hsl), 1);
  padding: 14px 36px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.static-fallback-form .ff-submit:hover {
  opacity: 0.8;
}