/* ===== zintex26-service-hero ===== */
.z26-shero{
  /* Brand */
  --z-navy:#003366; --z-white:#FFFFFF; --z-yellow:#FFE500; --z-yellow-hover:#F5D800;
  /* Supporting (pending your decision on extra colors) */
  --z-navy-900:#0A1A2E; --z-blue:#1F5FA8; --z-ink:#1B2430; --z-muted:#5B6675;
  --z-line:#DDE3EA; --z-ivory:#FBF8F3; --z-ivory-line:#E7E1D7; --z-check:#067647; --z-error:#B42318;

  position:relative; overflow:hidden;
  font-family:"Open Sans",system-ui,sans-serif; font-weight:500; color:var(--z-ink);
}
.z26-shero *,.z26-shero *::before,.z26-shero *::after{box-sizing:border-box}

.z26-shero__inner{position:relative; max-width:1200px; margin:0 auto; padding:20px 16px 48px}

/* Breadcrumb */
.z26-shero__crumbs ol{list-style:none; margin:0 0 20px; padding:0; display:flex; flex-wrap:wrap; gap:6px; font-size:14px; color:var(--z-muted)}
.z26-shero__crumbs li + li::before{content:"/"; margin-right:6px; color:inherit}
.z26-shero__crumbs a{color:inherit; text-decoration:none}
.z26-shero__crumbs a:hover{text-decoration:underline; text-underline-offset:3px}
.z26-shero__crumbs [aria-current]{color:var(--z-ink)}

.z26-shero__grid{display:flex; flex-direction:column; gap:24px}
.z26-shero__title{margin:0 0 16px; font-size:clamp(32px,4.6vw,52px); line-height:1.08; font-weight:800; letter-spacing:-.01em; color:var(--z-navy)}
.z26-shero__sub{margin:0 0 24px; font-size:clamp(17px,1.6vw,20px); line-height:1.5; color:var(--z-muted); max-width:44ch}

.z26-shero__checks{list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:12px; font-size:17px}
.z26-shero__checks li{display:flex; gap:12px; align-items:flex-start}
.z26-shero__checks svg{flex:none; color:var(--z-check); margin-top:2px}

.z26-shero__buttons{display:flex; flex-direction:column; gap:12px}
.z26-shero__btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 28px;
  border-radius:999px; background:var(--z-yellow); color:var(--z-navy);
  font-weight:700; font-size:17px; text-decoration:none; white-space:nowrap;
  transition:background .15s ease, transform .15s ease;
}
.z26-shero__btn:hover{background:var(--z-yellow-hover); transform:translateY(-1px)}
.z26-shero__btn--phone{background:var(--z-navy); color:var(--z-white)}
.z26-shero__btn--phone:hover{background:var(--z-navy-900)}
.z26-shero a:focus-visible{outline:3px solid var(--z-blue); outline-offset:3px; border-radius:8px}
.z26-shero__call{margin:0; font-size:16px; color:var(--z-muted)}
.z26-shero__call a{color:var(--z-navy); font-weight:700; text-decoration:none}
.z26-shero__call a:hover{text-decoration:underline; text-underline-offset:3px}

/* Photo */
.z26-shero__media{position:relative; overflow:hidden; border-radius:24px; aspect-ratio:4/5; background:#C9D3DC}
.z26-shero__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.z26-shero__label{
  position:absolute; left:14px; right:14px; bottom:14px; z-index:2;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 16px; border-radius:14px;
}
.z26-shero__label-text{display:flex; flex-direction:column; min-width:0}
.z26-shero__label-tag{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--z-muted)}
.z26-shero__label-caption{font-size:15px; font-weight:700; color:var(--z-navy-900)}
.z26-shero__label-rating{flex:none; font-size:14px; font-weight:700; color:var(--z-navy); white-space:nowrap}

/* Form card */
.z26-shero__card{position:relative; z-index:1; border-radius:24px; padding:24px 20px; background:var(--z-white); border:1px solid var(--z-line); box-shadow:0 6px 20px rgba(10,26,46,.08); scroll-margin-top:96px}
.z26-shero__card-title{margin:0 0 6px; font-size:clamp(21px,2vw,24px); line-height:1.25; font-weight:800; color:var(--z-navy)}
.z26-shero__card-intro{margin:0 0 20px; font-size:15px; line-height:1.5; color:var(--z-muted)}
.z26-shero__footnote{margin:12px 0 0; font-size:13px; color:var(--z-muted); text-align:center}
.z26-shero__card .form-title:empty{display:none}

/* ---------- HubSpot form: legacy forms (hs-form) ---------- */
.z26-shero .hs-form fieldset{max-width:none !important}
.z26-shero .hs-form .hs-form-field{margin-bottom:14px}
.z26-shero .hs-form .input{margin-right:0 !important}
.z26-shero .hs-form label:not(.hs-form-booleancheckbox-display):not(.hs-form-checkbox-display):not(.hs-form-radio-display){display:block; margin-bottom:8px; font-size:14px; font-weight:700; color:var(--z-ink)}
.z26-shero .hs-form .hs-input:not([type=checkbox]):not([type=radio]){width:100% !important; height:52px; padding:0 16px; border:1px solid var(--z-line); border-radius:8px; background:var(--z-white); font:500 17px "Open Sans",sans-serif; color:var(--z-ink)}
.z26-shero .hs-form textarea.hs-input{height:auto !important; min-height:104px; padding:12px 16px !important}
.z26-shero .hs-form .hs-input:focus{outline:3px solid var(--z-blue); outline-offset:2px; border-color:var(--z-blue)}
.z26-shero .hs-form .hs-error-msgs{list-style:none; margin:6px 0 0; padding:0}
.z26-shero .hs-form .hs-error-msg,.z26-shero .hs-form .hs-main-font-element{color:var(--z-error); font-size:14px; font-weight:600}
.z26-shero .hs-form .legal-consent-container,.z26-shero .hs-form .legal-consent-container p{font-size:12px; line-height:1.5; color:var(--z-muted)}
.z26-shero .hs-form .hs-submit .actions{margin:0; padding:0}
.z26-shero .hs-form .hs-button{width:100%; min-height:52px; padding:0 24px; border:0; border-radius:999px; background:var(--z-yellow); color:var(--z-navy); font:700 17px "Open Sans",sans-serif; cursor:pointer; transition:background .15s ease}
.z26-shero .hs-form .hs-button:hover{background:var(--z-yellow-hover)}
.z26-shero .submitted-message{font-size:17px; font-weight:600; color:var(--z-navy)}

/* ---------- HubSpot form: new form editor (hsfc-) ---------- */
.z26-shero .z26-shero__card .hsfc-Renderer,
.z26-shero .z26-shero__card .hsfc-FormWrapper,
.z26-shero .z26-shero__card .hsfc-Form{font-family:"Open Sans",system-ui,sans-serif !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; background:transparent !important}
.z26-shero .z26-shero__card .hsfc-Step,
.z26-shero .z26-shero__card .hsfc-Step__Content{padding:0 !important; margin:0 !important; background:transparent !important}
.z26-shero .z26-shero__card .hsfc-Row{margin:0 0 14px !important; padding:0 !important; gap:12px}
.z26-shero .z26-shero__card .hsfc-FieldLabel{display:block; margin:0 0 8px !important; font-size:14px !important; font-weight:700 !important; color:var(--z-ink) !important; line-height:1.35}
.z26-shero .z26-shero__card .hsfc-FieldLabel__RequiredIndicator{color:var(--z-error) !important}
.z26-shero .z26-shero__card .hsfc-TextInput,
.z26-shero .z26-shero__card .hsfc-PhoneInput,
.z26-shero .z26-shero__card .hsfc-DropdownInput,
.z26-shero .z26-shero__card .hsfc-TextareaInput{
  width:100% !important; min-height:52px !important; height:auto !important; padding:0 16px !important;
  border:1px solid var(--z-line) !important; border-radius:8px !important; background:var(--z-white) !important;
  font:500 17px "Open Sans",sans-serif !important; color:var(--z-ink) !important; box-shadow:none !important;
}
.z26-shero .z26-shero__card .hsfc-TextareaInput{min-height:104px !important; padding:12px 16px !important}
.z26-shero .z26-shero__card .hsfc-PhoneInput{display:flex !important; align-items:center; gap:8px; padding:0 12px !important}
.z26-shero .z26-shero__card .hsfc-PhoneInput input{border:0 !important; outline:0; background:transparent !important; height:50px; font:500 17px "Open Sans",sans-serif; color:var(--z-ink); flex:1; min-width:0}
.z26-shero .z26-shero__card .hsfc-TextInput:focus,
.z26-shero .z26-shero__card .hsfc-TextareaInput:focus,
.z26-shero .z26-shero__card .hsfc-PhoneInput:focus-within,
.z26-shero .z26-shero__card .hsfc-DropdownInput:focus{outline:3px solid var(--z-blue) !important; outline-offset:2px; border-color:var(--z-blue) !important}
.z26-shero .z26-shero__card .hsfc-ErrorAlert{margin-top:6px !important; font-size:14px !important; font-weight:600 !important; color:var(--z-error) !important}
.z26-shero .z26-shero__card .hsfc-RichText,
.z26-shero .z26-shero__card .hsfc-RichText p{font-size:12px !important; line-height:1.5 !important; color:var(--z-muted) !important}
.z26-shero .z26-shero__card .hsfc-CheckboxField label{font-size:14px !important; font-weight:500 !important; color:var(--z-ink) !important}
.z26-shero .z26-shero__card .hsfc-NavigationRow{margin:4px 0 0 !important; padding:0 !important}
.z26-shero .z26-shero__card .hsfc-NavigationRow__Buttons{display:flex !important; gap:10px; justify-content:stretch !important; width:100%}
.z26-shero .z26-shero__card .hsfc-Button{
  flex:1 1 auto; width:100% !important; min-height:52px !important; padding:0 24px !important;
  border:0 !important; border-radius:999px !important; background:var(--z-yellow) !important; background-image:none !important;
  color:var(--z-navy) !important; font:700 17px "Open Sans",sans-serif !important; box-shadow:none !important; cursor:pointer;
  transition:background .15s ease;
}
.z26-shero .z26-shero__card .hsfc-Button:hover{background:var(--z-yellow-hover) !important}
.z26-shero .z26-shero__card .hsfc-Button:focus-visible{outline:3px solid var(--z-blue) !important; outline-offset:2px}
.z26-shero .z26-shero__card .hsfc-NavigationRow__Buttons .hsfc-Button:not(:only-child):first-child{
  flex:0 0 auto; width:auto !important; background:transparent !important; color:var(--z-navy) !important;
  box-shadow:inset 0 0 0 1px var(--z-navy) !important;
}

/* ---------- Style: Clear Glass ---------- */
.z26-shero--glass{background:var(--z-white)}
.z26-shero--glass .z26-shero__label{
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.6);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .z26-shero--glass .z26-shero__label{background:var(--z-white)}
}

/* ---------- Style: Warm & Solid ---------- */
/* Warm uses brand colors only: navy text, yellow highlights, white/ivory grounds */
.z26-shero--warm{--z-ink:var(--z-navy); background:var(--z-ivory); color:var(--z-ink)}
.z26-shero--warm .z26-shero__title{color:var(--z-navy)}
.z26-shero--warm .z26-shero__label-caption{color:var(--z-navy)}
.z26-shero--warm .z26-shero__media{border-radius:28px}
.z26-shero--warm .z26-shero__label{background:var(--z-white); box-shadow:0 10px 30px rgba(60,45,20,.14)}
.z26-shero--warm .z26-shero__btn{border-radius:12px; background:var(--z-navy); color:var(--z-white)}
.z26-shero--warm .z26-shero__btn:hover{background:var(--z-navy-900)}
.z26-shero--warm .z26-shero__btn--phone{background:var(--z-white); color:var(--z-navy); box-shadow:inset 0 0 0 1px var(--z-navy)}
.z26-shero--warm .z26-shero__btn--phone:hover{background:var(--z-ivory)}
.z26-shero--warm .z26-shero__card{border-color:var(--z-ivory-line); border-radius:16px; box-shadow:0 6px 20px rgba(60,45,20,.08)}
.z26-shero--warm .hs-form .hs-button{border-radius:12px; background:var(--z-navy); color:var(--z-white)}
.z26-shero--warm .hs-form .hs-button:hover{background:var(--z-navy-900)}
.z26-shero--warm .z26-shero__card .hsfc-Button{border-radius:12px !important; background:var(--z-navy) !important; color:var(--z-white) !important}
.z26-shero--warm .z26-shero__card .hsfc-Button:hover{background:var(--z-navy-900) !important}
.z26-shero--warm .z26-shero__card .hsfc-NavigationRow__Buttons .hsfc-Button:not(:only-child):first-child{background:var(--z-white) !important; color:var(--z-navy) !important}

/* ---------- With a form: shorter photo on phones/tablets ---------- */
.z26-shero--has-form .z26-shero__media{aspect-ratio:16/10}
.z26-shero--has-form .z26-shero__checks{margin-bottom:16px}

/* ---------- Tablet ---------- */
@media (min-width:640px){
  .z26-shero__inner{padding:28px 32px 72px}
  .z26-shero__buttons{flex-direction:row; flex-wrap:wrap}
  .z26-shero__media{aspect-ratio:16/11}
  .z26-shero--has-form .z26-shero__media{aspect-ratio:16/9}
  .z26-shero__card{padding:28px}
}

/* ---------- Desktop: no form (text left, tall photo right) ---------- */
@media (min-width:960px){
  .z26-shero__inner{padding:32px 32px 80px}
  .z26-shero__crumbs ol{margin-bottom:32px}
  .z26-shero:not(.z26-shero--has-form) .z26-shero__grid{flex-direction:row; align-items:center; gap:56px}
  .z26-shero:not(.z26-shero--has-form) .z26-shero__copy{flex:1 1 440px}
  .z26-shero:not(.z26-shero--has-form) .z26-shero__media{flex:1 1 520px; aspect-ratio:auto; height:560px}
  .z26-shero__label{left:20px; right:20px; bottom:20px; padding:16px 20px}
  .z26-shero__label-caption{font-size:16px}
}

/* ---------- Desktop with form: Clear Glass (full-bleed photo, frosted form card right) ---------- */
@media (min-width:960px){
  .z26-shero--glass.z26-shero--has-form{min-height:680px; background:var(--z-navy-900)}
  .z26-shero--glass.z26-shero--has-form .z26-shero__inner{position:static; padding:32px 32px 88px}
  .z26-shero--glass.z26-shero--has-form .z26-shero__crumbs{position:relative; z-index:1}
  .z26-shero--glass.z26-shero--has-form .z26-shero__crumbs ol,
  .z26-shero--glass.z26-shero--has-form .z26-shero__crumbs [aria-current]{color:rgba(255,255,255,.85)}
  .z26-shero--glass.z26-shero--has-form .z26-shero__grid{flex-direction:row; align-items:center; gap:56px}
  .z26-shero--glass.z26-shero--has-form .z26-shero__media{position:absolute; inset:0; border-radius:0; aspect-ratio:auto; z-index:0}
  .z26-shero--glass.z26-shero--has-form .z26-shero__media::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,26,46,.84) 0%,rgba(10,26,46,.6) 45%,rgba(10,26,46,.15) 75%)}
  .z26-shero--glass.z26-shero--has-form .z26-shero__label{left:auto; right:24px; bottom:24px; max-width:420px}
  .z26-shero--glass.z26-shero--has-form .z26-shero__copy{position:relative; z-index:1; flex:1 1 auto; color:var(--z-white)}
  .z26-shero--glass.z26-shero--has-form .z26-shero__title{color:var(--z-white); max-width:18ch}
  .z26-shero--glass.z26-shero--has-form .z26-shero__sub{color:rgba(255,255,255,.88)}
  .z26-shero--glass.z26-shero--has-form .z26-shero__checks{color:var(--z-white)}
  .z26-shero--glass.z26-shero--has-form .z26-shero__checks svg{color:var(--z-yellow)}
  .z26-shero--glass.z26-shero--has-form .z26-shero__call{color:rgba(255,255,255,.85)}
  .z26-shero--glass.z26-shero--has-form .z26-shero__call a{color:var(--z-yellow)}
  .z26-shero--glass.z26-shero--has-form .z26-shero__card{
    flex:0 0 420px; margin:0; padding:32px;
    background:rgba(255,255,255,.8); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
    border:1px solid rgba(255,255,255,.6); box-shadow:0 12px 40px rgba(10,26,46,.18);
  }
  .z26-shero--glass.z26-shero--has-form a:focus-visible{outline-color:var(--z-yellow)}
}
@media (min-width:960px){
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .z26-shero--glass.z26-shero--has-form .z26-shero__card{background:var(--z-white)}
  }
}

/* ---------- Desktop with form: Warm & Solid (copy + framed photo left, form card right) ---------- */
@media (min-width:960px){
  .z26-shero--warm.z26-shero--has-form .z26-shero__grid{
    display:grid; grid-template-columns:minmax(0,1fr) 440px; grid-template-areas:"copy card" "media card";
    column-gap:56px; row-gap:28px; align-items:start;
  }
  .z26-shero--warm.z26-shero--has-form .z26-shero__copy{grid-area:copy}
  .z26-shero--warm.z26-shero--has-form .z26-shero__media{grid-area:media; aspect-ratio:auto; height:340px}
  .z26-shero--warm.z26-shero--has-form .z26-shero__card{grid-area:card; padding:32px; position:sticky; top:110px}
}

@media (prefers-reduced-motion:reduce){
  .z26-shero__btn,.z26-shero .hs-form .hs-button,.z26-shero .z26-shero__card .hsfc-Button{transition:none}
  .z26-shero__btn:hover{transform:none}
}