/* Layout the Brine template's JS used to do, plus the static stand-ins (form, map). */

.Intro--has-image { position: relative; }
.Intro--has-image .Intro-content { position: relative; z-index: 2; }
.Intro-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; }
/* Home photo buttons: transparent product cut-outs on the site's light grey, shown whole below the tile's label. */
#new-gallery .Index-gallery-item-image { background: #f6f6f6 !important; }
#new-gallery .Index-gallery-item-image img { object-fit: contain; object-position: 50% 100% !important; padding: 56px 24px 16px; box-sizing: border-box; }

.Intro-image img,
.Index-page-image img,
.Index-gallery-item-image img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Parallax: site.js sizes the figure to (section + viewport) / 2 and moves it at half scroll speed. */
.Index-page--has-image, .Intro--has-image { overflow: hidden; }
.tweak-overlay-parallax-enabled .Index-page-image,
.tweak-overlay-parallax-enabled .Intro-image { will-change: transform; }

/* Product sub-menu bars under the banners: the template pins the text to the bottom; centre it. */
#color-submenu .Index-page-content, #bw-submenu .Index-page-content, #color-printers-submenu .Index-page-content,
#bw-printers-submenu .Index-page-content, #other-submenu .Index-page-content { padding: 10px 0 !important; }
/* Home page brand-logo bar: custom.css gives it 60px on top and none below; split it evenly. */
#home-cta .Index-page-content { padding: 30px 0 !important; }

.sqs-image-shape-container-element.has-aspect-ratio img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  box-sizing: border-box; /* custom.css gives the round intro photo a 3px border */
  object-fit: var(--image-component-object-fit, cover);
}

.sqs-gallery-block-grid .sqs-gallery {
  display: grid;
  grid-template-columns: repeat(var(--gallery-per-row, 4), minmax(0, 1fr));
  gap: var(--gallery-gap, 20px);
}
.sqs-gallery-block-grid .slide { width: auto !important; float: none !important; margin: 0 !important; }
.sqs-gallery-block-grid .margin-wrapper { margin: 0 !important; padding: 0 !important; }
.sqs-gallery-block-grid .image-slide-anchor,
.sqs-gallery-block-grid .slide > .margin-wrapper > :first-child {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: var(--gallery-ratio, 1);
}
.sqs-gallery-block-grid .slide img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: contain;
}
.sqs-gallery-block-grid .content-fill img { object-fit: cover; }
/* Home page logo marquee (built by site.js). */
.logo-marquee .sqs-gallery { display: block !important; overflow: hidden; }
.logo-marquee-track { display: flex; width: max-content; animation: logo-marquee var(--marquee-duration, 30s) linear infinite; }
.logo-marquee-set { display: flex; flex: none; }
/* Logos share a height (the grid's 30px at 1280px) and take their own width, capped so very wide
   ones (eGoldFax) don't dominate. */
.logo-marquee .slide { flex: none; width: auto !important; margin-right: 50px !important; }
.logo-marquee .image-slide-anchor { aspect-ratio: auto !important; height: 30px !important; padding: 0 !important; display: flex !important; align-items: center; }
.logo-marquee .slide img { position: static !important; display: block; width: auto !important; height: auto !important; max-height: 100%; max-width: 120px; }
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
@keyframes logo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .logo-marquee .slide { margin-right: 30px !important; }
  .logo-marquee .image-slide-anchor { height: 40px !important; }
  .logo-marquee .slide img { max-width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
  .logo-marquee .sqs-gallery { overflow-x: auto; }
}

@media (max-width: 640px) {
  .sqs-gallery-block-grid .sqs-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sqs-block-map .sqs-block-content { position: relative; }
.clone-map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Contact form: values measured from the live Squarespace form. */
#contact-form input[type=text], #contact-form input[type=email], #contact-form textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 0;
  padding: 10px; border: 1px solid #a9a9a9; border-radius: 0; background: #fafafa;
  font: 17px futura-pt, sans-serif; color: #000;
}
#contact-form textarea { height: 100px; min-height: 100px; resize: vertical; }
#contact-form .form-item { margin-bottom: 24px; border: 0; padding: 0; }
#contact-form .form-item .title { display: block; font-size: 17px; color: #000; margin: 0 0 4px; }
#contact-form .form-item .title > div, #contact-form .form-item .title > div > div { display: inline; }
#contact-form .description.required { display: inline !important; font-size: 12px; opacity: .7; margin-left: 4px; padding: 0 !important; }
#contact-form fieldset.name .field { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; }
#contact-form input[type=text], #contact-form input[type=email] { width: 100% !important; }
#contact-form .field-list fieldset.form-item.name { margin: 0 0 24px !important; margin-inline: 0 !important; padding: 0 !important; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
#contact-form fieldset.name legend { grid-column: 1 / -1; font-size: 17px; color: #000; padding: 0; margin-bottom: 4px; }
#contact-form .caption { display: block; font-size: 12px; margin-bottom: 2px; }
#contact-form .caption > div, #contact-form .caption > div > div { display: inline; }
#contact-form .form-submit-button {
  font: 17px futura-pt, sans-serif; letter-spacing: 1.7px; padding: 17px 42.5px;
  background: #009ca6; color: #fff; border: 0; border-radius: 3px; cursor: pointer;
}
#contact-form .form-submit-button:hover { opacity: .85; }
#contact-form .form-input-effects { display: none; }

.btIyKrvyA6dTrftg { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.contact-form-status { margin: 1em 0 0; min-height: 1.5em; }
.contact-form-status.is-error { color: #b00020; }
.contact-form-status.is-success { color: #151f6d; font-size: 1.2em; }
#contact-form [aria-invalid="true"] { outline: 2px solid #b00020; }
#contact-form button[disabled] { opacity: .6; cursor: wait; }