/* Responsive overrides for the International Imaging Muse export.
   Visual language (colors, type, caption boxes) stays as close as possible
   to the 2016 desktop design; layout becomes fluid. */

:root {
  --iii-dark: #232323;      /* existing darker header bar */
  --iii-bar-old-light: #3C3C3C;
  --iii-muted: #707070;
  --iii-body: #8E8E8E;
  --iii-ink: #434343;
  --iii-page: #F2F2F2;
  --iii-caption-bg: rgba(127, 127, 127, 0.79);
  --iii-font: "Open Sans", open-sans, sans-serif;
  --iii-header-z: 4000;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--iii-page) !important;
}

body {
  font-family: var(--iii-font);
  padding-top: 0 !important;
}

img, iframe, video, svg {
  max-width: 100%;
}

/* ---------- Muse page shell ---------- */
#page,
#page_position_content {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  position: relative !important;
  padding: 0 !important;
  background: var(--iii-page) !important;
  overflow: visible !important;
}

.verticalspacer,
#u8914,
.size_fixed#u8914,
.preload_images { display: none !important; }

/* Hide the original Muse header frames once JS moves the real pieces
   into .site-header. These stay hidden even if JS is late. */
#u75, #u75-bw, #u3999, #u3999-bw {
  background-color: var(--iii-dark) !important;
}

body.iii-ready #u75,
body.iii-ready #u75-bw,
body.iii-ready #u3999,
body.iii-ready #u3999-bw {
  display: none !important;
}

/* ---------- New header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--iii-header-z);
  width: 100%;
  background: var(--iii-dark); /* ONE single gray box — not two stacked bars */
  color: var(--iii-muted);
  font-family: var(--iii-font);
  font-weight: 400;
  padding: 16px 16px; /* equal top/bottom gaps for the content in the single box */
  box-sizing: border-box;
}

.site-header-top {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0 4px; /* horizontal inset only; vertical padding lives on .site-header */
  margin: 0 0 8px; /* stacked layouts: modest gap between logo and heading */
  background: transparent;
}

.site-header #u7603,
.site-header a.site-logo {
  position: static !important;
  display: flex !important;
  align-items: center;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
  float: none !important;
  background: transparent !important;
}

.site-header #u7603_img,
.site-header .site-logo img {
  width: auto !important;
  height: 59px !important; /* original native size 222×59 */
  max-height: 59px;
  max-width: 222px !important;
  display: block !important;
}

/* Heading + nav group. Background is transparent so only .site-header paints the box. */
.site-header-lower {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  padding: 0;
}

/* Centered heading line ABOVE the menu, on all pages */
.site-header-phrase,
.site-header #u7610-4 {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
  float: none !important;
  background: transparent !important;
  color: var(--iii-muted) !important;
  text-align: center !important;
  letter-spacing: 0.5em;
  font-size: 16px; /* was 12px; looked small and faint as a standalone heading */
  line-height: 1.3;
  font-family: var(--iii-font) !important;
  font-weight: 400 !important;
  padding: 0 16px !important;
  min-height: 0 !important;
}

.site-header-phrase h1,
.site-header #u7610-4 h1 {
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-align: center !important;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  width: 100%;
  background: transparent;
  min-height: 0;
  margin-top: 8px; /* modest gap between heading and menu, inside the group */
}

.site-nav a,
.site-nav #buttonu4025,
.site-nav #buttonu4021,
.site-nav #buttonu4023 {
  flex: 1 1 0;
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 50px !important;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
  float: none !important;
  padding: 12px 8px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--iii-muted) !important;
  text-decoration: none !important;
  text-align: center !important;
  letter-spacing: 0.28em;
  font-size: 12px;
  font-family: var(--iii-font) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

.site-nav a h1,
.site-nav a div,
.site-nav a p {
  position: static !important;
  width: auto !important;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-align: center !important;
  background: transparent !important;
}

.site-nav a:hover,
.site-nav a:focus,
.site-nav a.ButtonSelected,
.site-nav a[aria-current="page"] {
  color: #ffffff !important;
}

.site-nav a:hover h1,
.site-nav a:focus h1,
.site-nav a.ButtonSelected h1,
.site-nav a[aria-current="page"] h1 {
  color: #ffffff !important;
}

/* STORE is unlinked from the nav; hide any leftover Muse button */
#buttonu8794,
a[href="store.html"] {
  display: none !important;
}

@media (max-width: 700px) {
  .site-header { padding: 12px 10px; }
  .site-header-top { padding: 0 2px; margin-bottom: 8px; min-height: 0; }
  .site-header #u7603_img,
  .site-header .site-logo img {
    height: 48px !important;
    max-height: 48px;
  }
  .site-header-lower { padding: 0; }
  .site-header-phrase,
  .site-header #u7610-4 {
    font-size: 12px;
    letter-spacing: 0.2em;
    padding: 0 10px !important;
  }
  .site-nav { margin-top: 6px; }
  .site-nav a {
    letter-spacing: 0.16em;
    font-size: 12px;
    min-height: 44px !important;
    padding: 10px 4px !important;
  }
}

@media (min-width: 701px) and (max-width: 1023px) {
  .site-header-phrase,
  .site-header #u7610-4 { letter-spacing: 0.4em; }
}

/* Wide screens: compact centered nav group. Logo stays in the 1170px column.
   Below 1200px the header is still ONE gray box, with the logo stacked above
   the heading+nav (side-by-side would overlap the menu at 1024). */
@media (min-width: 1024px) {
  .site-header-top {
    max-width: 1170px; /* original Muse page width (user estimate was ~960px) */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }
  .site-nav {
    max-width: 660px; /* roughly the original HOME–CONTACT span */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-evenly;
  }
}

/* 1200+ (Tesla 1256 and 1920): logo on the left and the heading+nav group
   are vertically centered together in the same single gray box. */
@media (min-width: 1200px) {
  .site-header-top {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1170px;
    max-width: 100%;
    margin: 0;
    padding: 0 12px;
    min-height: 0;
    z-index: 2;
    box-sizing: border-box;
    background: transparent;
  }
  .site-header-lower {
    margin: 0;
    padding: 0;
    background: transparent;
  }
}

/* ---------- Home slideshow ---------- */
#slideshowu1290,
.iii-slideshow {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  background: #111;
  overflow: hidden !important;
}

#slideshowu1290 .popup_anchor,
#u1293popup,
#u1312popup,
#u1300-3popup,
#u1292-3popup {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
}

#u1293,
.SlideShowContentPanel {
  position: relative !important;
  width: 100% !important;
  height: calc(100vh - var(--iii-header-offset, 150px)) !important;
  min-height: 220px;
  max-height: none; /* was 820px, which made the home photo smaller than the original */
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #111;
}

@media (max-width: 700px) {
  #u1293,
  .SlideShowContentPanel {
    height: auto !important;
    aspect-ratio: 16 / 9;
    max-height: none;
    min-height: 180px;
  }
}

@media (max-height: 760px) and (min-width: 1000px) {
  /* Tesla-like short landscape */
  #u1293,
  .SlideShowContentPanel {
    height: calc(100vh - var(--iii-header-offset, 150px)) !important;
    max-height: none;
    min-height: 280px;
  }
}

.SSSlide,
#u1293 .SSSlide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  float: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 1s ease;
  background: #111;
}

.SSSlide.is-active,
.SSSlide.iii-active,
.SSSlide.wp-panel-active {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
}

.SSSlide.is-active img,
.SSSlide.iii-active img,
.SSSlide.wp-panel-active img {
  opacity: 1 !important;
  visibility: visible !important;
}

.SSSlide img,
.SSSlide .ImageInclude {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover;
  object-position: center;
  display: block !important;
}

/* Captions: all titles occupy the same box and crossfade
   with the pictures (1s ease, matching .iii-hero-slide). */
.SlideShowCaptionPanel,
#u1312 {
  position: absolute !important;
  left: 50% !important;
  bottom: 8% !important;
  top: auto !important;
  transform: translateX(-50%);
  width: auto !important;
  max-width: min(544px, 92%) !important;
  margin: 0 !important;
  z-index: 3;
  pointer-events: none;
  display: grid !important;
  justify-items: center;
  align-items: center;
  float: none !important;
}

.SSSlideCaption {
  grid-area: 1 / 1;
  position: relative !important;
  display: block !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
  padding: 10px 16px !important;
  border: 3px solid #fff !important;
  background-color: var(--iii-caption-bg) !important;
  color: #fff !important;
  text-align: center !important;
  font-family: var(--iii-font) !important;
  font-weight: 300 !important;
  box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 0;
  pointer-events: none;
  transition: opacity 1s ease, visibility 0s linear 1s;
}

/* Beat Muse `.js .invi { visibility: hidden }` so a fade-out is
   not cut short when the invi class is added. Visibility is delayed
   until the 1s opacity fade finishes. */
#slideshowu1290 .SSSlideCaption,
#slideshowu1290 .SSSlideCaption.invi,
.js #slideshowu1290 .SSSlideCaption,
.js #slideshowu1290 .SSSlideCaption.invi {
  display: block !important;
  float: none !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 0s linear 1s;
}

.SSSlideCaption.is-active,
.SSSlideCaption.iii-active,
#slideshowu1290 .SSSlideCaption.is-active,
#slideshowu1290 .SSSlideCaption.iii-active,
.js #slideshowu1290 .SSSlideCaption.is-active,
.js #slideshowu1290 .SSSlideCaption.iii-active,
#slideshowu1290 .SSSlideCaption.is-active.invi,
#slideshowu1290 .SSSlideCaption.iii-active.invi,
.js #slideshowu1290 .SSSlideCaption.is-active.invi,
.js #slideshowu1290 .SSSlideCaption.iii-active.invi {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition: opacity 1s ease, visibility 0s linear 0s;
}

.SSSlideCaption p,
.SSSlideCaption h1 {
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  text-align: center !important;
  font-weight: 300 !important;
  background: none !important;
}

.SSSlideCaption p:first-child,
.SSSlideCaption h1:first-child {
  font-size: clamp(22px, 4.2vw, 48px) !important;
  letter-spacing: clamp(2px, 0.55vw, 7px) !important;
  line-height: 1.25 !important;
  text-transform: uppercase;
}

.SSSlideCaption p:last-child,
.SSSlideCaption h1:last-child {
  font-size: clamp(10px, 1.2vw, 12px) !important;
  letter-spacing: clamp(2px, 0.4vw, 5px) !important;
  line-height: 1.5 !important;
  margin-top: 4px !important;
  text-transform: uppercase;
}

/* Arrows */
.SSPreviousButton,
.SSNextButton,
#u1300-3,
#u1292-3 {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 4;
  width: 50px !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  cursor: pointer;
  opacity: 0.7 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 32px 38px !important;
}

.SSPreviousButton,
#u1300-3 {
  left: 12px !important;
  right: auto !important;
  background-image: url("../images/previous.png") !important;
}

.SSNextButton,
#u1292-3 {
  right: 12px !important;
  left: auto !important;
  background-image: url("../images/next.png") !important;
}

.SSPreviousButton:hover,
.SSNextButton:hover,
#u1300-3:hover,
#u1292-3:hover {
  opacity: 1 !important;
}

.SSPreviousButton p,
.SSNextButton p,
#u1300-3 p,
#u1292-3 p { display: none; }

@media (max-width: 700px) {
  .SSPreviousButton, .SSNextButton, #u1300-3, #u1292-3 {
    width: 44px !important;
    height: 44px !important;
  }
  .SlideShowCaptionPanel, #u1312 { bottom: 6% !important; width: 86% !important; }
}

/* Home title + copyright under the slideshow */
#u608-4,
#u8895-6 {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  top: auto !important;
  margin: 0 auto !important;
  text-align: center !important;
  float: none !important;
  padding: 10px 16px 0 !important;
  min-height: 0 !important;
  background: var(--iii-page) !important;
}

#u608-4 { padding-top: 16px !important; }

#u608-4 h1 {
  margin: 0 !important;
  font-family: var(--iii-font);
  font-weight: 400;
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: 0.04em;
  color: #555;
  text-align: center;
}

#u8895-6 {
  color: #C3C3C3 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
  padding: 6px 16px 28px !important;
}

#u8895 { color: #7F7F7F !important; }
#u8895-6 a { color: #7F7F7F; }

/* ---------- About / store article ---------- */
#pu2111-19 {
  position: relative !important;
  width: 100% !important;
  max-width: 1110px !important;
  margin: 0 auto !important;
  padding: 28px 20px 60px !important;
  left: auto !important;
  top: auto !important;
  float: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  background: var(--iii-page) !important;
}

#u7779, #u7776, #u2223-4 {
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin: 0 auto 20px !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}

#u7776 {
  border: 3px solid var(--iii-ink) !important;
  padding: 10px 28px !important;
  width: auto !important;
  min-width: 200px;
  text-align: center;
  background: transparent !important;
}

#u2223-4,
#u2223-4 h1 {
  color: var(--iii-ink) !important;
  letter-spacing: 5px !important;
  font-size: 20px !important;
  line-height: 24px !important;
  font-family: var(--iii-font) !important;
  font-weight: 400 !important;
  text-align: center !important;
  margin: 0 !important;
  width: auto !important;
}

#u2111-19 {
  position: static !important;
  width: 100% !important;
  max-width: 1110px !important;
  left: auto !important;
  top: auto !important;
  margin: 0 0 28px !important;
  float: none !important;
  color: var(--iii-body) !important;
  font-size: 12px !important;
  line-height: 20px !important;
  letter-spacing: 1px !important;
  font-family: var(--iii-font) !important;
  font-weight: 400 !important;
  text-align: left !important;
}

#u2111-19 p { margin: 0 0 1em !important; }
#u2111-19 a { color: var(--iii-body); }

#u7769, #u7769_img {
  position: static !important;
  width: 100% !important;
  max-width: 1158px !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  margin: 0 auto !important;
  float: none !important;
  display: block !important;
}

/* ---------- Contact ---------- */
/* Mission + CONTACT heading */
#u4058-6,
#u4061-4,
[id^="u406"] {
  /* will be refined by more specific rules below */
}

body[data-iii-page="contact"] #page {
  display: block;
  background: var(--iii-page) !important;
}

.contact-wrap,
#pu4058-6 {
  position: relative !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 24px 20px 60px !important;
  left: auto !important;
  top: auto !important;
  float: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
}

/* Try to identify contact heading box — often u4067 / similar.
   JS will add .iii-contact-head if needed. */
.iii-page-title {
  border: 3px solid var(--iii-ink);
  padding: 10px 28px;
  margin: 0 auto 18px;
  color: var(--iii-ink);
  letter-spacing: 5px;
  font-size: 20px;
  font-family: var(--iii-font);
  text-align: center;
}

#u4058-6 {
  position: static !important;
  width: 100% !important;
  max-width: 900px !important;
  left: auto !important;
  top: auto !important;
  margin: 0 auto 24px !important;
  float: none !important;
  color: var(--iii-body) !important;
  font-size: 13px !important;
  line-height: 22px !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  font-family: var(--iii-font) !important;
}

#u4058-6 h2 {
  margin: 0 0 0.4em !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  color: inherit !important;
  text-align: center !important;
}

.iii-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
  width: 100%;
  align-items: start;
}

@media (max-width: 800px) {
  .iii-contact-grid { grid-template-columns: 1fr; }
}

#u4152-4 {
  position: static !important;
  width: auto !important;
  max-width: 100% !important;
  left: auto !important;
  top: auto !important;
  margin: 0 0 12px !important;
  float: none !important;
  color: var(--iii-ink) !important;
  letter-spacing: 0.28em !important;
  font-size: clamp(13px, 1.4vw, 16px) !important;
  line-height: 1.4 !important;
  text-align: left !important;
  font-family: var(--iii-font) !important;
  text-decoration: none !important;
  display: block !important;
}

#u4152-4 h1 {
  margin: 0 !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  text-align: inherit !important;
}

#buttonu4092,
#buttonu4104,
#buttonu4110 {
  position: static !important;
  display: flex !important;
  align-items: flex-start;
  gap: 14px;
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  top: auto !important;
  margin: 0 0 12px !important;
  float: none !important;
  background: transparent !important;
  border: 0 !important;
}

#buttonu4092 .grpelem,
#buttonu4104 .grpelem,
#buttonu4110 .grpelem,
#u4094, #u4106, #u4111 {
  position: static !important;
  flex: 0 0 28px;
  width: 28px !important;
  height: 28px !important;
  margin: 2px 0 0 !important;
  left: auto !important;
  top: auto !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

#u4093-6, #u4105-4, #u4112-4 {
  position: static !important;
  width: auto !important;
  flex: 1 1 auto;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
  color: var(--iii-body) !important;
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
  line-height: 20px !important;
  text-align: left !important;
  font-family: var(--iii-font) !important;
}

#u4093-6 p, #u4105-4 p, #u4112-4 p {
  margin: 0 !important;
  text-align: left !important;
  color: inherit !important;
}

/* Map */
iframe[src*="maps.google"],
iframe[src*="google.com/maps"] {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 320px !important;
  min-height: 240px !important;
  margin: 16px 0 0 !important;
  left: auto !important;
  top: auto !important;
  border: 0;
}

/* Form */
#widgetu4071 {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}

#widgetu4071 .fld-grp {
  position: static !important;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
  float: none !important;
}

#widgetu4071 .fld-label,
#widgetu4071 .fld-label span,
#u4080-4, #u4085-4, #u4074-4, #u4090-4, #u7657-4 {
  position: static !important;
  display: block !important;
  width: auto !important;
  margin: 0 0 4px !important;
  left: auto !important;
  top: auto !important;
  color: var(--iii-ink) !important;
  font-size: 12px !important;
  letter-spacing: 0.2em !important;
  font-family: var(--iii-font) !important;
  text-align: left !important;
}

#widgetu4071 .fld-input,
#widgetu4071 .fld-textarea,
#u4081-4, #u4083-4, #u4075-4, #u4091-4, #u7659-4 {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
  padding: 0 !important;
}

#widgetu4071 input.wrapped-input,
#widgetu4071 textarea.wrapped-input {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 36px;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
  padding: 8px 10px !important;
  border: 1px solid #ccc !important;
  background: #fff !important;
  font-family: var(--iii-font);
  font-size: 14px;
  color: #333;
}

#widgetu4071 textarea.wrapped-input { min-height: 110px; resize: vertical; }

#widgetu4071 .fld-prompt {
  /* Muse overlapping placeholder; hide once we have native placeholders,
     but keep the node for WebPro. Positioned out if it would overflow. */
  pointer-events: none;
}

#u4077-17,
#widgetu4071 .submit-btn {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 8px 0 0 !important;
  left: auto !important;
  top: auto !important;
  padding: 12px 16px !important;
  border: 1px solid var(--iii-ink) !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--iii-ink) !important;
  letter-spacing: 0.45em;
  font-size: 16px;
  font-family: var(--iii-font) !important;
  font-weight: 400;
  text-indent: 0 !important;
  cursor: pointer;
  text-align: center;
}

#u4077-17:hover { background: #434343 !important; color: #fff !important; }

#u4086-4, #u4076-4, #u4087-4 {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 8px 0 0 !important;
  left: auto !important;
  top: auto !important;
  min-height: 0 !important;
  box-sizing: border-box;
  text-align: center;
  font-family: var(--iii-font) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  font-style: normal;
  padding: 0;
}

/* Default: hide status until Muse adds a state class */
#widgetu4071:not(.frm-sub-st) #u4086-4,
#widgetu4071:not(.frm-subm-err-st) #u4076-4,
#widgetu4071:not(.frm-subm-ok-st) #u4087-4 {
  display: none !important;
}

#widgetu4071.frm-sub-st #u4086-4,
#widgetu4071.frm-subm-err-st #u4076-4,
#widgetu4071.frm-subm-ok-st #u4087-4 {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#widgetu4071.frm-sub-st #u4086-4,
#widgetu4071.frm-sub-st #u4086-4 p {
  color: var(--iii-muted) !important;
  font-style: italic;
  padding: 10px 12px;
}

/* Clear confirmation after a successful submit — same idea as tomcutitta.com */
#widgetu4071.frm-subm-ok-st #u4087-4 {
  margin-top: 12px !important;
  padding: 14px 16px !important;
  background: #fff !important;
  border-left: 3px solid var(--iii-ink);
  color: var(--iii-ink) !important;
}

#widgetu4071.frm-subm-ok-st #u4087-4 p {
  color: var(--iii-ink) !important;
  font-family: var(--iii-font) !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  margin: 0 !important;
}

#widgetu4071.frm-subm-err-st #u4076-4 {
  margin-top: 12px !important;
  padding: 14px 16px !important;
  background: #fff !important;
  border-left: 3px solid #D7244C;
  color: #D7244C !important;
}

#widgetu4071.frm-subm-err-st #u4076-4 p {
  color: #D7244C !important;
  font-family: var(--iii-font) !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Restore Muse's red required-field labels (overridden by the ink !important above). */
#widgetu4071 .fld-grp.fld-err-st .fld-label,
#widgetu4071 .fld-grp.fld-err-st .fld-label span,
#widgetu4071 .fld-grp.fld-err-st #u4080-4,
#widgetu4071 .fld-grp.fld-err-st #u4085-4,
#widgetu4071 .fld-grp.fld-err-st #u4090-4,
#widgetu4071 .fld-grp.fld-err-st #u7657-4 {
  color: #D7244C !important;
}

/* Contact heading box (Muse ids vary slightly). JS tags .iii-contact-title */
.iii-contact-title,
#u4061-4,
[id="u4064-4"],
[id="u4068-4"] {
  /* fallback if JS misses it */
}

/* ---------- Utility ---------- */
body.iii-ready .grpelem { float: none; }

/* Prevent leftover Muse negative margins from causing horizontal scroll */
#page [style],
#page .grpelem,
#page .clearfix {
  max-width: 100%;
}

#slideshowu1290,
#slideshowu1290 * {
  max-width: none; /* slides must be able to fill the hero */
}
#slideshowu1290 { max-width: 100% !important; }

/* Tesla / short screens: do not shrink the logo or heading (they were
   capped at 34px / tight padding, which made the site look small).
   Logo stays 59px; heading stays 16px; equal padding is kept. */

#u4094 { background-image: url("../images/address.png") !important; }
#u4106 { background-image: url("../images/phone2.png") !important; }
#u4111 { background-image: url("../images/mail.png") !important; }

#u7780, #u4059-4, #u4060 {
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin: 0 auto !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
}
#u4060 {
  /* decorative frame behind the CONTACT label; hide once we use the boxed title */
  display: none !important;
}
#u4059-4, #u4059-4 h1 {
  color: var(--iii-ink) !important;
  letter-spacing: 5px !important;
  font-size: 20px !important;
  line-height: 24px !important;
  font-family: var(--iii-font) !important;
  font-weight: 400 !important;
  text-align: center !important;
  margin: 0 !important;
}
#u7780 {
  border: 3px solid var(--iii-ink);
  padding: 10px 28px;
  margin: 0 auto 18px !important;
  width: auto !important;
  min-width: 200px;
  text-align: center;
  background: transparent !important;
}
#u4066 {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  left: auto !important;
  top: auto !important;
}

/* Muse sets body { min-width: 1170px } — that was causing all horizontal overflow. */
html, body {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

#page, #page.clearfix, .iii-home, .site-header, .contact-wrap, #pu2111-19, #pu4058-6, #pu8895-6 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Captions must shrink on small screens */
.SlideShowCaptionPanel,
#u1312,
.SSSlideCaption {
  width: min(544px, 90vw) !important;
  max-width: 90vw !important;
}

/* Visible slide photo (JS sets background-image as well) */
.SSSlide.iii-active,
.SSSlide.is-active {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #111 !important;
}

/* Contact form visual order matches the original layout */
#widgetu4078 { order: 1; } /* NAME */
#widgetu4082 { order: 2; } /* EMAIL */
#widgetu4088 { order: 3; } /* COMPANY */
#widgetu4072 { order: 4; } /* MESSAGE */
#widgetu7656 { order: 5; } /* PHONE */
#u4077-17, #widgetu4071 .submit-btn { order: 6; }
#u4086-4, #u4076-4, #u4087-4 { order: 7; }

/* Contact address/phone/email must not collapse to a character column */
#buttonu4092, #buttonu4104, #buttonu4110 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
#u4094, #u4106, #u4111 {
  flex: 0 0 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  margin: 0 12px 0 0 !important;
  left: auto !important;
}
#u4093-6, #u4105-4, #u4112-4 {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: calc(100% - 48px) !important;
  min-width: 0 !important;
  left: auto !important;
  margin: 0 !important;
  letter-spacing: 0.08em !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere;
}

.iii-hero {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
  background: #111;
  overflow: hidden;
}
.iii-hero-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity 1s ease;
}
.iii-hero-slide.is-on {
  opacity: 1;
  z-index: 1;
}
.iii-hero-slide img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.SlideShowCaptionPanel,
#u1312,
.SSPreviousButton, .SSNextButton, #u1300-3, #u1292-3 {
  z-index: 5 !important;
}

/* Focus outline removed site-wide (per Thomas, 2026-11-11): no gold or browser-default ring on focused links/buttons */
*:focus, *:focus-visible { outline: none !important; }

/* Soft drop shadow on slideshow arrows so they stay visible on light slides (per Thomas, 2026-11-12). Shadow only: size, position and color unchanged. */
.SSPreviousButton,
.SSNextButton,
#u1300-3,
#u1292-3 {
  -webkit-filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.75)) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.75)) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.5));
}

/* ---------------------------------------------------------------------------
   Landscape phones (e.g. 667×375, 844×390, 932×430): shrink the gray header
   so it no longer fills almost half the screen, and scale the slideshow
   title/box with the picture. Header content, colors, nav order, caption
   text, colors, crossfade and position are unchanged. Logo may scale down
   proportionally. Portrait and desktop are not affected.
   (2026-11-12, cache tag ?v=20261112c)
   --------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 500px) {
  /* Tighter vertical padding and gaps in the logo / heading / nav stack. */
  .site-header {
    padding: 5px 12px;
  }
  .site-header-top {
    margin: 0 0 3px;
    padding: 0 2px;
  }
  .site-header #u7603_img,
  .site-header .site-logo img {
    height: 30px !important; /* 222×59 scaled to 30px tall ≈ 113×30 */
    max-height: 30px;
  }
  .site-header-phrase,
  .site-header #u7610-4 {
    padding: 0 8px !important;
    line-height: 1.2;
  }
  .site-nav {
    margin-top: 2px;
  }
  .site-nav a,
  .site-nav #buttonu4025,
  .site-nav #buttonu4021,
  .site-nav #buttonu4023 {
    min-height: 28px !important;
    padding: 3px 6px !important;
  }

  /* Caption font and title box scale with the picture (full-width slideshow,
     so vw tracks picture width; clamp keeps sizes readable across 667–932).
     Overrides the site-wide width:min(544px, 90vw) and Muse min-height:101px
     so the box can shrink. Position (bottom %), crossfade, colors and text
     are unchanged. */
  .SlideShowCaptionPanel,
  #u1312,
  .SSSlideCaption {
    width: min(55vw, 86%) !important;
    max-width: min(55vw, 86%) !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .SSSlideCaption {
    padding: clamp(4px, 1.2vh, 8px) clamp(8px, 1.6vw, 14px) !important;
  }
  .SSSlideCaption p:first-child,
  .SSSlideCaption h1:first-child {
    font-size: clamp(14px, 2.2vw, 22px) !important;
    letter-spacing: clamp(1px, 0.28vw, 4px) !important;
  }
  .SSSlideCaption p:last-child,
  .SSSlideCaption h1:last-child {
    font-size: clamp(8px, 1.05vw, 11px) !important;
    letter-spacing: clamp(1px, 0.22vw, 3px) !important;
    margin-top: clamp(1px, 0.4vh, 3px) !important;
  }
}

/* ---------------------------------------------------------------------------
   Phone pass (2026-11-12, cache tag ?v=20261112e)

   1) Taller home slideshow on phones (max-width: 700px), portrait and the
      small-landscape case (e.g. 667×375). Replaces the 16:9 cap that left a
      short picture strip and a large empty #F2F2F2 area below (and pushed
      the 667×375 caption below the fold). The slideshow fills the space
      between the header and the title/copyright block, using
      --iii-header-offset and a 116px allowance for #u608-4 + #u8895-6
      (measured at 375–430px; 60svh floor). Images keep cover + center.
      Captions, arrows (size/position/shadow), crossfade, header, footer,
      text and colors are unchanged; the caption stays proportionally at
      the bottom of the slideshow.

   2) Contact form: leftover Muse .fld-prompt overlays ("Enter Name", etc.)
      still use the original 633px width, so body.scrollWidth is 653px on
      phones (html/body overflow-x:hidden only clips it). The visible
      NAME:/EMAIL: labels and the prompt placeholder text are kept; only
      the prompt width is constrained so the document is no wider than the
      screen. Fields, action (form_process.php) and behaviour are unchanged.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  #u1293,
  .SlideShowContentPanel {
    aspect-ratio: auto;
    /* vh fallback, then svh (accounts for mobile browser chrome). */
    height: calc(100vh - var(--iii-header-offset, 152px) - 116px) !important;
    height: calc(100svh - var(--iii-header-offset, 152px) - 116px) !important;
    min-height: 60vh;
    min-height: 60svh;
    max-height: none;
  }

  /* Photos fill the taller frame; already set site-wide, restated here. */
  #u1293 .SSSlide img,
  .SlideShowContentPanel .SSSlide img,
  .SSSlide img,
  .SSSlide .ImageInclude,
  .iii-hero-slide img {
    object-fit: cover;
    object-position: center center;
  }
  .SSSlide.iii-active,
  .SSSlide.is-active {
    background-size: cover !important;
    background-position: center center !important;
  }

  /* Constrain leftover Muse placeholder labels (still visible as
     "Enter Name" / "Enter Email" overlays; fld-label text is separate). */
  #widgetu4071 .fld-prompt,
  #widgetu4071 label.fld-prompt {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Short landscape (e.g. 667×375): don't let the 60svh floor eat the
     title/copyright. 100px matches the measured #u608-4 + #u8895-6 block
     on landscape. Caption stays on screen, and so does the text below. */
  @media (orientation: landscape) {
    #u1293,
    .SlideShowContentPanel {
      min-height: 0;
      height: calc(100vh - var(--iii-header-offset, 88px) - 100px) !important;
      height: calc(100svh - var(--iii-header-offset, 88px) - 100px) !important;
    }
  }
}