/* Iron Security & ATMs - Custom Styles */

/* Hero quote card — same design language as the request-a-quote page form:
   white bordered card, underline (bottom-border only) fields, gold pill
   submit button. */
.iron-hero-form-block {
  position: relative;
  background-color: var(--_neutral-color---00, #fff);
  border: 1px solid var(--_neutral-color---80, #dfdfdf);
  padding: 30px;
  max-width: 440px;
  width: 100%;
  margin: auto 0 auto auto;
  align-self: center;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  z-index: 3;
}

.iron-hero-form-title {
  color: var(--_neutral-color---500, #050900);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  line-height: 1.25;
}

.iron-hero-form-subtitle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--_neutral-color---300, #5d5c5c);
  font-size: 0.8125rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--_neutral-color---80, #dfdfdf);
}

.iron-hero-form-subtitle::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.25);
  flex: 0 0 auto;
}

.iron-hero-form .iron-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 30px;
  margin-bottom: 12px;
}

/* Field design copied from .request-field on the request-a-quote page */
.iron-hero-form .iron-form-field {
  width: 100%;
  border-style: none none solid;
  border-width: 1px;
  border-color: var(--_neutral-color---300, #5d5c5c);
  border-radius: 0;
  background-color: transparent;
  height: 50px;
  color: var(--_neutral-color---300, #5d5c5c);
  padding: 10px 0;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.3s;
}

.iron-hero-form .iron-form-field:focus {
  outline: none;
  border-bottom-color: var(--_primary-color---300, #f3df04);
}

.iron-hero-form .iron-form-field::placeholder {
  color: var(--_neutral-color---300, #5d5c5c);
}

.iron-hero-form select.iron-form-field {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235d5c5c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 1.6rem;
}

.iron-hero-form select.iron-form-field option {
  background: #fff;
  color: var(--_neutral-color---300, #5d5c5c);
}

.iron-hero-form .iron-form-field-full {
  grid-column: 1 / -1;
}

.iron-hero-form textarea.iron-form-field {
  min-height: 84px;
  resize: vertical;
}

/* Gold pill submit — mirrors the theme's .primary-button */
.iron-hero-form-submit {
  width: 100%;
  padding: 12px 20px;
  background-color: var(--_primary-color---300, #f3df04);
  color: var(--_neutral-color---500, #050900);
  border: 1px solid var(--_primary-color---300, #f3df04);
  border-radius: 70px;
  font-family: var(--_font-family---heading, "JetBrains Mono", sans-serif);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 12px;
}

.iron-hero-form-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(243, 223, 4, 0.4);
}

.iron-hero-form-note {
  color: var(--_neutral-color---200, #919191);
  font-size: 0.75rem;
  text-align: center;
  margin-top: 0.75rem;
}

.iron-hero-form-success {
  display: none;
  text-align: center;
  padding: 1.5rem;
  color: var(--_neutral-color---300, #5d5c5c);
}

.iron-hero-form-success.visible {
  display: block;
}

.iron-hero-form-success h4 {
  color: var(--_neutral-color---500, #050900);
  margin-bottom: 0.5rem;
}

.iron-credentials-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 1rem;
}

.iron-credential-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8125rem;
  font-weight: 500;
}

.iron-credential-badge::before {
  content: "✓";
  color: #f3df04;
  font-weight: 700;
}

.home-hero-block.with-form {
  align-items: flex-start;
}

/* Vertically centre the quote card within the right-hand hero column and keep
   it clear of the video/play-button that also lives in this block. */
@media (min-width: 992px) {
  .home-hero-image-block {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
  }
}

@media (max-width: 991px) {
  .iron-hero-form-block {
    max-width: 100%;
    margin: 1.5rem auto 0;
  }

  .iron-hero-form .iron-form-row {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 992px) {
  .home-hero-content-block .iron-hero-form-block {
    display: block;
  }
}

/* ------------------------------------------------------------------ */
/*  Hero quote card — request-form design themed for the dark card.   */
/*  Keeps the Webflow request-form structure but restyles its fields  */
/*  and the arrow submit button to match the navy/gold hero card.     */
/* ------------------------------------------------------------------ */
.iron-hero-quote .request-form-block {
  margin: 0;
}

.iron-hero-quote .request-field-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Single-column rows: State + Message span full width */
.iron-hero-quote .request-field-wrap:has(> .request-area),
.iron-hero-quote .request-field-wrap:has(> #State) {
  grid-template-columns: 1fr;
}

.iron-hero-quote .request-field {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #fff;
  font-size: 0.875rem;
  font-family: inherit;
  margin: 0;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.iron-hero-quote .request-field:focus {
  outline: none;
  border-color: #f3df04;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(243, 223, 4, 0.18);
}

.iron-hero-quote .request-field::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.iron-hero-quote select.request-field {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23f3df04' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
}

.iron-hero-quote select.request-field option {
  background: #0a1628;
  color: #fff;
}

.iron-hero-quote .request-area {
  min-height: 84px;
  resize: vertical;
}

/* Arrow submit button: invisible native submit overlaid on the styled
   primary-button so a click anywhere on it posts the form. */
.iron-hero-quote .request-button-wrap {
  position: relative;
  margin-top: 0.35rem;
}

.iron-hero-quote .request-button-wrap .request-button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.iron-hero-quote .request-button-wrap .primary-button {
  width: 100%;
}

.iron-hero-quote .request-button-wrap .primary-button .button-block {
  justify-content: center;
}

/* Success / failure messages inside the dark card */
.iron-hero-quote .w-form-done,
.iron-hero-quote .w-form-fail {
  display: none;
  margin-top: 0.5rem;
  padding: 1rem 1.1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  text-align: center;
}

.iron-hero-quote .w-form-done {
  background: rgba(61, 220, 132, 0.12);
  border: 1px solid rgba(61, 220, 132, 0.4);
  color: #eafff2;
}

.iron-hero-quote .w-form-fail {
  background: rgba(255, 92, 92, 0.12);
  border: 1px solid rgba(255, 92, 92, 0.4);
  color: #ffe5e5;
}

@media (max-width: 991px) {
  .iron-hero-quote .request-field-wrap {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Floating quick-actions widget (replaces the Webflow "Get Protected" sticker)
   Compact circular trigger; the panel opens above it with crisp inline SVG
   action icons. Toggle logic lives in iron-site.js (no Webflow dependency).
   -------------------------------------------------------------------------- */
.iron-fab {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.iron-fab-trigger {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background-color: var(--_primary-color---300, #f3df04);
  color: var(--_neutral-color---500, #050900);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.iron-fab-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(243, 223, 4, 0.4);
}

.iron-fab-trigger svg {
  width: 26px;
  height: 26px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.iron-fab-trigger .iron-fab-icon-close {
  display: none;
}

.iron-fab.is-open .iron-fab-trigger .iron-fab-icon-shield {
  display: none;
}

.iron-fab.is-open .iron-fab-trigger .iron-fab-icon-close {
  display: block;
}

.iron-fab-panel {
  width: 300px;
  background-color: #0d0d0d;
  border: 1px solid rgba(243, 223, 4, 0.25);
  border-radius: 10px;
  padding: 18px 20px 20px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.iron-fab.is-open .iron-fab-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.iron-fab-text {
  color: #bbb;
  font-size: 14px;
  line-height: 150%;
  margin-bottom: 16px;
}

.iron-fab-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.iron-fab-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.05);
  color: #ddd;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.iron-fab-item:hover {
  background-color: rgba(243, 223, 4, 0.12);
  color: #fff;
}

.iron-fab-item-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(243, 223, 4, 0.15);
  color: var(--_primary-color---300, #f3df04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.iron-fab-item-icon svg {
  width: 19px;
  height: 19px;
}

.iron-fab-item-text {
  flex: 1 1 auto;
}

.iron-fab-item-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--_primary-color---300, #f3df04);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.iron-fab-item-arrow svg {
  width: 100%;
  height: 100%;
}

.iron-fab-item:hover .iron-fab-item-arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 575px) {
  .iron-fab {
    right: 16px;
    bottom: 16px;
  }

  .iron-fab-panel {
    width: min(300px, calc(100vw - 32px));
  }
}

.iron-brand-text-logo {
  font-weight: 900;
  font-size: 1.25rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.iron-brand-text-logo span {
  color: #f3df04;
}

.header-brand-text {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.iron-brand-sub {
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Home services showcase
   The scroll-driven pane switching is handled by iron-site.js so it works for
   any number of services (not just the six the original Webflow timeline
   supported). When there are more than six services the menu column is made
   more compact so every service title still fits beside the image pane.
   -------------------------------------------------------------------------- */
.home-services-card-menu.iron-compact {
  margin-top: 120px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.home-services-card-menu.iron-compact .home-services-card-link {
  padding-top: 10px;
  padding-bottom: 10px;
}

.home-services-card-menu.iron-compact .home-services-nav-text {
  font-size: 1.1rem;
  line-height: 1.3;
}

/* Keep the active pane's image/content above the stacked (hidden) ones and
   guarantee only the active card is interactive. */
.home-services-content-card {
  pointer-events: auto;
}
.home-services-content-card[style*="opacity: 0"] {
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   Hero action buttons — subtle polish
   Keeps the original labels ("Call (617) 210-7900" + "Request a Quote") and
   their natural widths; adds a matching phone-icon badge on the Call button,
   a gentle hover lift + shadow, and a consistent icon slide-swap on hover.
   -------------------------------------------------------------------------- */
.home-hero-button-block {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.home-hero-button-block .primary-button {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.home-hero-button-block .primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(243, 223, 4, 0.35);
}

/* Icon slide-swap: initial icon visible, hover icon parked to the left, swap on hover. */
.home-hero-button-block .primary-button .button-hover-icon {
  transform: translateX(-110%);
  transition: transform 0.35s ease;
}

.home-hero-button-block .primary-button .button-initial-icon {
  transform: translateX(0);
  transition: transform 0.35s ease;
}

.home-hero-button-block .primary-button:hover .button-hover-icon {
  transform: translateX(0);
}

.home-hero-button-block .primary-button:hover .button-initial-icon {
  transform: translateX(110%);
}

@media (max-width: 575px) {
  .home-hero-button-block .primary-button {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .home-hero-button-block .primary-button .button-block {
    width: 100%;
    justify-content: space-between;
  }
}