@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url('/assets/fonts/poppins-300-italic.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/poppins-300.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/poppins-700.woff2') format('woff2'); }

/* Post-migration overrides: replaces what Squarespace's runtime JS used to do,
   plus styling for the static replacement forms, map and slideshow. */

/* Squarespace hides lazy images until its JS loads them — force visible */
img.sbt-loaded, .sqs-block-image img, .summary-thumbnail img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Images normally positioned by Squarespace's loader JS: the shape container
   gets height 0 until their runtime sets it. Without an aspect-ratio the image
   sizes the container; WITH one (padding-bottom box) the image must fill the
   padded box absolutely or the block doubles in height. */
.sqs-image-shape-container-element:not(.has-aspect-ratio) {
  height: auto !important;
}
.sqs-image-shape-container-element:not(.has-aspect-ratio) img,
.summary-thumbnail img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
}
.sqs-image-shape-container-element.has-aspect-ratio img {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* Full-bleed section backgrounds keep their cover behaviour */
.section-background img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  opacity: 1 !important;
}

/* Squarespace scroll-entrance animations left elements at opacity 0 until
   its JS ran — show everything immediately instead */
[data-animation-role], .image-inset, .image-card, .blog-item {
  opacity: 1 !important;
  transform: none !important;
}

/* Masonry galleries were laid out (absolute positions + container height)
   by Squarespace JS — recreate as a responsive grid. The live Sony gallery
   is a two-column layout on desktop. */
.gallery-masonry-wrapper {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  height: auto !important;
}
@media (min-width: 768px) {
  .gallery-masonry-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 94px; /* measured from live masonry positions (576px columns) */
  }
}
.gallery-masonry-item {
  position: static !important;
  width: auto !important;
  transform: none !important;
}
.gallery-masonry-item-wrapper { opacity: 1 !important; }
.gallery-masonry-item img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
}

/* Slideshow gallery (30 Years post): Squarespace JS drove it; shim.js now
   toggles .sbt-active on slides/thumbnails */
.sqs-gallery-block-slideshow { position: relative; }
.sqs-gallery-block-slideshow .sqs-gallery { position: relative; }
.sqs-gallery-block-slideshow .slide { display: none; }
/* live runtime sizes the gallery to the first image's ratio (3:2 here),
   cover-cropping every slide into that box */
.sqs-gallery-block-slideshow .slide.sbt-active {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.sqs-gallery-block-slideshow .slide img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  opacity: 1 !important;
}
.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  user-select: none;
}
.sqs-gallery-controls .previous { left: 12px; }
.sqs-gallery-controls .next { right: 12px; }
/* Squarespace's stylesheet draws its own arrow glyphs via ::before — suppress
   them so only ours render */
.sqs-gallery-controls .previous::before,
.sqs-gallery-controls .next::before { content: none !important; }
.sqs-gallery-controls .previous::after { content: "\2039"; }
.sqs-gallery-controls .next::after { content: "\203A"; }
/* single horizontally-scrolling strip of 120x80 thumbs, matching live */
.sqs-gallery-thumbnails {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  margin-top: 10px;
}
.sqs-gallery-thumbnails img {
  position: static !important;
  width: 120px !important;
  height: 80px !important;
  flex: 0 0 auto;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.55 !important;
}
.sqs-gallery-thumbnails img.sbt-active { opacity: 1 !important; }

/* Fixed-header scroll-back (tweak-fixed-header-style-scroll-back): the live
   runtime hides the header away from the top and reveals it on sustained
   scroll-up. shim.js toggles these classes. */
/* Squarespace's own CSS declares an effectively never-completing background
   transition on the header — pin the transition to transform only */
.header {
  transition: transform 0.3s ease !important;
}
.header.sbt-header-hidden { transform: translateY(-100%); }
.header.sbt-header-revealed { background: rgba(20, 20, 20, 0.96) !important; }
.header.sbt-header-revealed .header-nav-item a,
.header.sbt-header-revealed .header-actions a,
.header.sbt-header-revealed .header-title a,
.header.sbt-header-revealed .header-burger-btn {
  color: #fff !important;
}

/* Replacement map embed (was a JS-rendered Squarespace map component) */
.sbt-map-wrap { width: 100%; }
.sbt-map {
  width: 100%;
  height: 400px;
  border: 0;
  display: block;
  background: #e8e6e3; /* solid backdrop while OSM tiles load */
}
.sbt-map-link { text-align: center; margin-top: 0.5rem; font-size: 0.9rem; }

/* Replacement contact form */
.sbt-form-wrap { max-width: 640px; margin: 0 auto; }
.sbt-legend { font-weight: 500; margin-bottom: 0.6rem; letter-spacing: 0.02em; }
.sbt-form label {
  display: block;
  margin-bottom: 20px; /* matches live field spacing */
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.sbt-form label span { opacity: 0.6; font-size: 0.85em; }
.sbt-form .sbt-row { display: flex; gap: 1rem; }
.sbt-form .sbt-row label { flex: 1; }
.sbt-form input[type="text"],
.sbt-form input[type="email"],
.sbt-form input[type="tel"],
.sbt-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 10px; /* live inputs are 51px tall: 16px font + 10px padding */
  font-size: 16px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  background: #fff;
  color: #000;
  font-family: inherit;
}
.sbt-form textarea { resize: vertical; min-height: 100px; height: 100px; }
.sbt-submit {
  display: inline-block;
  padding: 21px 34px; /* live submit button is 62px tall */
  border: none;
  cursor: pointer;
  background: #000;
  color: #fff;
  font: inherit;
  letter-spacing: 0.05em;
  border-radius: 2px;
}
.sbt-submit:hover { opacity: 0.8; }
.sbt-hidden { display: none !important; }
.sbt-insta { text-align: center; padding: 1rem 0; }

@media (max-width: 640px) {
  .sbt-form .sbt-row { flex-direction: column; gap: 0; }
}