/* Contact Us — Premium B2B redesign (Webflow + Mölnlycke/Medtronic inspired) */

/* ===== Small radius system (Contact page) ===== */
:root{
  --radius-xs:6px;--radius-sm:6px;--radius-md:6px;
  --radius:6px;--radius-module:6px;
}

/* ===== PAGE HERO ===== */
.contact-hero{
  position:relative;width:100%;aspect-ratio:16/9;max-height:min(28vw,360px);
  min-height:200px;overflow:hidden;display:flex;align-items:center;
  border-bottom:1px solid var(--zd-border);background:#fff
}
.contact-hero-bg{position:absolute;inset:0;z-index:0}
.contact-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.contact-hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.55) 35%,rgba(255,255,255,.15) 55%,rgba(255,255,255,0) 70%)
}
.contact-hero-body{position:relative;z-index:2;width:100%}
.contact-hero-inner{
  max-width:var(--max);margin:0 auto;padding:28px var(--page-gutter);width:100%
}
.contact-hero-title{
  font-size:clamp(36px,4.2vw,48px);font-weight:800;color:var(--zd-dark);
  line-height:1.12;letter-spacing:-.8px;margin-bottom:12px;max-width:620px
}
p.lead.contact-hero-desc{
  color:var(--zd-body);
  margin-bottom:22px
}
.contact-hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
.contact-hero-actions .hero-btn-primary,
.contact-hero-actions .hero-btn-secondary{
  min-height:48px;height:48px;min-width:180px;padding:0 20px;justify-content:center;box-sizing:border-box
}

@keyframes contactHeroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}

.contact-enquiry-nav{position:sticky;top:var(--header-h);z-index:900;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--zd-border);box-shadow:0 2px 12px rgba(0,0,0,.03)}
.contact-enquiry-inner{max-width:var(--max);margin:0 auto;padding:0 var(--page-gutter);display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;height:58px;align-items:center}
.contact-enquiry-inner::-webkit-scrollbar{display:none}
.contact-tab{
  flex-shrink:0;padding:9px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;
  color:var(--zd-body);background:var(--zd-gray);border:1px solid transparent;
  transition:var(--trans);cursor:pointer;font-family:inherit;white-space:nowrap;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;line-height:1.35;box-sizing:border-box
}
.contact-tab svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}
.contact-tab:hover{color:var(--zd-blue);background:rgba(0,59,142,.06);border-color:rgba(0,59,142,.1)}
.contact-tab.is-active{color:#fff;background:var(--zd-blue);border-color:var(--zd-blue);box-shadow:none}

/* ===== ENQUIRY HUB (unified split layout) ===== */
.contact-hub{padding:56px 0 0;background:#fff}
.contact-hub-inner{max-width:var(--max);margin:0 auto;padding:0 var(--page-gutter)}

.contact-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  margin-bottom:28px;flex-wrap:wrap
}
.contact-section-head-main{flex:1;min-width:280px}
.contact-section-tag{
  display:block;font-size:clamp(22px,2.4vw,28px);font-weight:700;color:#2a3340;
  letter-spacing:-.02em;line-height:1.25;margin:0 0 28px;
  padding-bottom:0;border-bottom:none;text-transform:none
}
.contact-hub .contact-section-tag{display:none}
.contact-section-title{
  font-size:clamp(22px,2.4vw,28px);font-weight:700;color:#2a3340;
  letter-spacing:-.02em;line-height:1.25;margin:0 0 16px
}
.contact-section-desc{
  font-size:15px;color:var(--zd-body);line-height:1.65;max-width:380px;margin:0;padding-bottom:4px
}

.contact-hub-shell{
  display:grid;grid-template-columns:minmax(260px,320px) 1fr;
  border:1px solid var(--zd-border);border-radius:var(--radius-md);background:#fff;
  box-shadow:var(--shadow-sm);overflow:hidden;min-height:420px
}

.contact-channel-rail{
  display:flex;flex-direction:column;border-right:1px solid var(--zd-border);
  background:var(--zd-gray);padding:8px
}
.contact-channel-item{
  display:flex;align-items:flex-start;gap:12px;padding:14px 14px 14px 12px;
  border-radius:var(--radius-sm);text-decoration:none;color:inherit;cursor:pointer;
  border-left:3px solid transparent;transition:background .2s,border-color .2s,box-shadow .2s;
  scroll-margin-top:calc(var(--header-h) + 80px)
}
.contact-channel-item:hover{background:rgba(255,255,255,.72)}
.contact-channel-item.is-active{
  background:#fff;border-left-color:var(--zd-blue);
  box-shadow:0 2px 12px rgba(0,59,142,.08)
}
.contact-channel-icon{
  width:36px;height:36px;border-radius:var(--radius-xs);background:rgba(0,59,142,.08);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--zd-blue)
}
.contact-channel-item.is-active .contact-channel-icon{background:var(--zd-blue);color:#fff}
.contact-channel-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.contact-channel-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.contact-channel-text strong{
  font-size:var(--text-body-sm,15px);font-weight:700;color:var(--zd-dark);line-height:1.35
}
.contact-channel-text span{
  font-size:var(--text-meta,14px);color:var(--zd-body);line-height:1.5
}

.contact-hub-detail{position:relative;background:#fff;padding:0;min-height:420px}
.contact-detail-panel{display:none;grid-template-columns:1fr;height:100%;animation:contactHeroIn .35s ease both}
.contact-detail-panel.is-visible{display:grid}

.contact-detail-body{padding:32px 36px 28px;display:flex;flex-direction:column}
.contact-detail-body h3{
  font-size:clamp(22px,2.4vw,28px);font-weight:800;color:var(--zd-dark);
  letter-spacing:-.35px;margin-bottom:14px;line-height:1.25
}
.contact-detail-body>p{
  font-size:var(--text-lead,17px);color:var(--zd-body);line-height:var(--lh-body,1.65);
  margin-bottom:22px;max-width:680px
}
.contact-detail-list{
  list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;
  margin-bottom:24px;flex:1
}
.contact-detail-list li{
  display:flex;align-items:flex-start;gap:10px;font-size:var(--text-body-sm,15px);color:var(--zd-body);
  line-height:1.55;padding:10px 0;border-bottom:1px solid var(--zd-border)
}
.contact-detail-list svg{width:16px;height:16px;color:currentColor;flex-shrink:0;margin-top:3px;stroke:currentColor;fill:none;stroke-width:2;opacity:.85}
.contact-detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:4px}

/* ===== PHONE STRIP (below hero) ===== */
.contact-phones{
  padding:28px 0 32px;background:#fff;border-bottom:1px solid var(--zd-border)
}
.contact-phones-inner{max-width:var(--max);margin:0 auto;padding:0 var(--page-gutter)}
.contact-phones-head{
  text-align:start;margin:0 0 24px;max-width:none
}
.contact-phones-title{
  margin:0 0 16px;font-size:clamp(22px,2.4vw,28px);font-weight:700;
  color:#2a3340;letter-spacing:-.02em;line-height:1.25
}
p.lead.contact-phones-intro{
  margin:0;max-width:680px;padding-bottom:4px;
  font-size:19px!important;font-weight:400;color:var(--zd-body);line-height:1.6
}
.contact-phones-grid{
  list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0
}
.contact-phones-grid li{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:22px 20px;border:1px solid rgba(0,59,142,.12);border-radius:var(--radius-md);
  background:linear-gradient(180deg,#f8faff 0%,#fff 100%);
  box-shadow:0 4px 18px rgba(0,59,142,.06);text-align:center
}
.contact-phones-label{
  font-size:12px;font-weight:600;color:var(--zd-body);line-height:1.35;
  letter-spacing:.02em
}
.contact-phones-number{
  font-size:clamp(18px,1.8vw,22px);font-weight:800;color:var(--zd-blue);line-height:1.2;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-decoration:none
}
.contact-phones-number:hover{color:var(--zd-rose)}

.contact-detail-aside{
  padding:32px 24px;background:linear-gradient(180deg,var(--zd-gray) 0%,#fff 100%);
  border-left:1px solid var(--zd-border);display:flex;flex-direction:column;justify-content:center
}
.contact-detail-aside--alert{background:linear-gradient(180deg,rgba(200,16,106,.06) 0%,#fff 100%)}
.contact-detail-aside-label{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--zd-body);margin-bottom:12px
}
.contact-detail-aside-email{
  font-size:15px;font-weight:700;color:var(--zd-blue);word-break:break-all;line-height:1.4
}
.contact-detail-aside-email--secondary{margin-top:14px}
.contact-detail-aside-email:hover{color:var(--zd-rose)}
.contact-detail-aside-note{font-size:12px;color:var(--zd-body);line-height:1.5;margin-top:6px}
.contact-detail-aside-response{
  font-size:12px;font-weight:600;color:var(--zd-blue);margin-top:16px;
  padding-top:14px;border-top:1px solid var(--zd-border)
}
.contact-detail-aside--alert .contact-detail-aside-response{color:var(--zd-rose)}

/* ===== GLOBAL PRESENCE ===== */
.contact-global{padding:40px 0 48px;background:#fff;border-top:1px solid var(--zd-border)}
.contact-global-inner{max-width:var(--max);margin:0 auto;padding:0 var(--page-gutter)}
.contact-global-locations{width:100%}
.contact-location-list{
  list-style:none;margin:0;padding:0;
  border:1px solid var(--zd-border);border-radius:var(--radius-sm);background:var(--zd-gray);overflow:hidden
}
.contact-location-list li{
  display:grid;grid-template-columns:72px minmax(148px,28%) 1fr;gap:12px 20px;align-items:center;
  padding:14px 20px;font-size:var(--text-body-sm,15px);color:var(--zd-body);line-height:1.55;
  border-bottom:1px solid var(--zd-border)
}
.contact-location-list li:last-child{border-bottom:none}
.contact-location-thumb{
  margin:0;width:72px;height:48px;border-radius:var(--radius-xs);overflow:hidden;
  background:#e8eaed;flex-shrink:0;border:1px solid rgba(0,59,142,.06)
}
.contact-location-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.contact-location-list strong{
  font-size:var(--text-body-sm,15px);font-weight:700;color:var(--zd-dark);
  flex-shrink:0;line-height:1.4
}
.contact-location-label--red{color:#c62828}
.contact-location-list span{
  font-size:var(--text-body-sm,15px);text-align:start;color:var(--zd-body);line-height:1.6
}
.contact-location-note{
  margin-top:14px;font-size:var(--text-meta,14px);color:var(--zd-body);line-height:1.55
}

/* ===== FORM SECTION ===== */
.contact-form-section{
  position:relative;overflow:hidden;min-height:560px;
  display:flex;align-items:center
}
.contact-form-bg{position:absolute;inset:0;z-index:0}
.contact-form-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.contact-form-overlay{
  position:absolute;inset:0;z-index:1;
  /* subtle left wash for white intro text only — no right-side darkening */
  background:linear-gradient(90deg,rgba(6,18,40,.22) 0%,rgba(6,18,40,.08) 38%,rgba(6,18,40,0) 58%)
}
.contact-form-intro h2,.contact-form-intro p,.contact-form-perk{
  text-shadow:0 1px 12px rgba(6,18,40,.35)
}

.contact-form-shell{
  position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;
  padding:72px 24px
}

.contact-form-wrap{
  width:100%;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center
}
.contact-form-intro h2{
  font-size:clamp(22px,2.4vw,28px);font-weight:700;color:#fff;
  letter-spacing:-.02em;line-height:1.25;margin-bottom:16px
}
.contact-form-intro p{font-size:16px;color:rgba(255,255,255,.78);line-height:1.72;margin-bottom:28px;max-width:440px}
.contact-form-perks{display:flex;flex-direction:column;gap:14px}
.contact-form-perk{display:flex;align-items:center;gap:12px;font-size:14px;color:rgba(255,255,255,.82)}
.contact-form-perk svg{width:20px;height:20px;color:currentColor;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;opacity:.88}

.contact-form-card{
  background:#fff;border-radius:var(--radius-md);padding:40px 36px;color:var(--zd-dark,#1a2332);
  box-shadow:0 16px 48px rgba(15,23,42,.12);border:1px solid rgba(15,23,42,.08);color-scheme:light
}
.contact-form-card h3{font-size:clamp(22px,2.4vw,28px);font-weight:700;margin-bottom:10px;letter-spacing:-.3px;color:var(--zd-dark,#1a2332)}
.contact-form-card>.form-desc{font-size:14px;color:var(--zd-body,#5b6570);line-height:1.65;margin-bottom:28px}
.contact-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin-bottom:8px}
.contact-form .field-row.full{grid-template-columns:1fr}
.contact-field label{display:block;font-size:13px;color:var(--zd-body,#5b6570);margin-bottom:6px}
.contact-field label .req{color:var(--zd-rose)}
.contact-field input,.contact-field select,.contact-field textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid rgba(15,23,42,.16);
  padding:10px 0 12px;font-size:15px;color:var(--zd-dark,#1a2332);font-family:inherit;outline:none;
  transition:border-color .25s;border-radius:0
}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:rgba(15,23,42,.38)}
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus{border-bottom-color:var(--zd-blue,#003b8e)}
.contact-field select{cursor:pointer;appearance:none;padding-right:24px;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235b6570' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center}
.contact-field select option{background:#fff;color:var(--zd-dark,#1a2332)}
.contact-field textarea{min-height:88px;resize:vertical}
.contact-captcha-row{display:flex;gap:12px;align-items:center;margin-top:4px}
.contact-captcha-box{
  flex-shrink:0;padding:10px 16px;background:#f4f6f8;border:1px solid rgba(15,23,42,.12);
  border-radius:var(--radius-xs);font-size:17px;font-weight:700;letter-spacing:4px;color:var(--zd-dark,#1a2332);user-select:none;min-width:96px;text-align:center
}
#captchaRefresh{
  padding:8px 12px;background:#f4f6f8;border:1px solid rgba(15,23,42,.12);
  border-radius:var(--radius-xs);color:var(--zd-dark,#1a2332);font-size:16px
}
#captchaRefresh:hover{background:#e8edf2}
.contact-submit{
  width:100%;margin-top:24px;padding:14px 24px;border:none;border-radius:var(--radius-sm);
  background:var(--zd-blue);color:#fff;font-size:15px;font-weight:600;font-family:inherit;
  cursor:pointer;position:relative;overflow:hidden;transition:transform .3s;isolation:isolate
}
.contact-submit::before{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:2;background:var(--zd-rose);
  clip-path:circle(0 at 0 50%);transition:clip-path .38s linear
}
.contact-submit::after{
  content:'';position:absolute;inset:0;z-index:3;background:var(--zd-rose);border-radius:inherit;opacity:0;pointer-events:none
}
.contact-submit:not(:hover)::after{transition:opacity 0s linear 0s}
.contact-submit:hover::after{opacity:1;transition:opacity 0s linear .38s}
.contact-submit:hover::before{clip-path:circle(165% at 0 50%)}
.contact-submit:hover{transform:translateY(-2px)}
.contact-submit-label{position:relative;z-index:4;color:#fff}
.contact-note{display:none;margin-top:0;margin-bottom:0;font-size:13px;color:#1a7f4b;text-align:center;line-height:1.5}
.contact-note.is-visible{display:block;margin-top:16px}

/* ===== CTA BAND ===== */
.contact-cta-band{padding:72px 0;background:var(--zd-dark);position:relative;overflow:hidden}
.contact-cta-band::after{
  content:'';position:absolute;inset:0;opacity:.35;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/svg%3E")
}
.contact-cta-inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--page-gutter);display:flex;align-items:center;
  justify-content:space-between;gap:32px;flex-wrap:wrap;position:relative;z-index:1
}
.contact-cta-copy h2{
  font-size:clamp(22px,2.4vw,28px);font-weight:700;color:#fff;
  line-height:1.3;max-width:560px;margin-bottom:10px;letter-spacing:-.02em
}
.contact-cta-copy p{font-size:15px;color:rgba(255,255,255,.65);line-height:1.65;max-width:480px}
.contact-cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ===== RESPONSIVE ===== */
@media(max-width:1100px){
  .contact-hub-shell{grid-template-columns:1fr}
  .contact-channel-rail{
    flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--zd-border);
    padding:8px;gap:6px;scrollbar-width:none
  }
  .contact-channel-rail::-webkit-scrollbar{display:none}
  .contact-channel-item{flex:0 0 auto;min-width:200px;border-left:none;border-bottom:3px solid transparent;padding:12px}
  .contact-channel-item.is-active{border-left-color:transparent;border-bottom-color:var(--zd-blue)}
  .contact-detail-panel.is-visible{grid-template-columns:1fr}
  .contact-detail-aside{border-left:none;border-top:1px solid var(--zd-border);padding:20px 24px}
  .contact-form-section{min-height:auto;align-items:stretch}
  .contact-form-shell{padding:56px 20px}
  .contact-form-wrap{grid-template-columns:1fr;gap:36px}
}
@media(max-width:768px){
  .contact-hero{max-height:min(56vw,240px);min-height:0}
  .contact-hero-overlay{background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.45) 40%,rgba(255,255,255,.12) 100%)}
  .contact-hero-inner{padding:28px 20px}
  .contact-location-list li{
    grid-template-columns:56px 1fr;grid-template-rows:auto auto;gap:6px 12px;align-items:start;padding:12px 16px
  }
  .contact-location-thumb{grid-row:1 / span 2;width:56px;height:40px}
  .contact-location-list strong,.contact-location-list span{grid-column:2}
  .contact-phones{padding:20px 0 24px}
  .contact-phones-head{margin-bottom:16px}
  .contact-phones-intro{max-width:none}
  .contact-phones-grid{grid-template-columns:1fr;gap:12px}
  .contact-phones-grid li{padding:18px 16px}
  .contact-form-card{padding:28px 24px}
  .contact-hub{padding:40px 0 0}
  .contact-section-head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:20px}
  .contact-section-desc{max-width:none}
  .contact-detail-body{padding:24px 20px 20px}
  .contact-detail-list{grid-template-columns:1fr}
  .contact-form .field-row{grid-template-columns:1fr}
  .contact-cta-inner{flex-direction:column;align-items:flex-start}
}

/* ===== COMPANY ADDRESS CTA ===== */
.contact-address{padding:28px 0 48px}
.contact-address-inner{max-width:var(--max);margin:0 auto;padding:0 var(--page-gutter)}
.contact-address-card{background:#fff;border:1px solid var(--zd-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:28px 32px}
.contact-address-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.contact-address-icon{width:22px;height:22px;color:var(--zd-blue);flex-shrink:0}
.contact-address-label{font-size:var(--text-body,16px);font-weight:700;color:var(--zd-dark);letter-spacing:-.01em}
.contact-address-company{margin:0 0 6px;font-size:var(--text-body,16px);font-weight:700;color:var(--zd-dark);line-height:1.5}
.contact-address-line{margin:0;font-size:var(--text-body-sm,15px);color:var(--zd-body);line-height:1.65;text-align:start}
.contact-address-phones{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--zd-border);display:flex;flex-direction:column;gap:12px}
.contact-address-phones li{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:var(--text-body-sm,15px);line-height:1.6}
.contact-address-plabel{font-weight:700;color:var(--zd-dark)}
.contact-address-pvalue{color:var(--zd-blue);text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums}
.contact-address-pvalue:hover{text-decoration:underline}
@media(max-width:640px){.contact-address{padding:20px 0 36px}.contact-address-card{padding:22px 20px}}