/* ============================================================================
   Site header v2, site-wide since v2.99.0 (owner, 2026-11-06): header WhatsApp
   "Instant talk" pill, mobile dock (Emergency / Our Work), the Emergency form
   (mobile bottom sheet, desktop panel from the red button bottom-right), the
   Our Work drawer and the menu drawer. Loaded on every page; the homepage's own
   sections stay in home-v2.css.
   ========================================================================== */
@keyframes hq-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }

.wm-hide-v2 { display: none !important; }
.wm-head-wa { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 10px; border-radius: 50%; color: #fff; background: #1FAA53; box-shadow: 0 8px 18px -8px rgba(31,170,83,.9); transition: transform .2s; }
.wm-head-wa:hover { color: #fff; transform: scale(1.06); }
.wm-head-wa svg { position: relative; z-index: 1; }
.wm-head-wa-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #1FAA53; animation: wm-wa-ring 2.4s ease-out infinite; }
@keyframes wm-wa-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

/* dock */
.wm-mobile-cta-bar.wm-dock { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); padding: 7px; gap: 7px; border: 1px solid rgba(255,255,255,.7); border-radius: 22px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 18px 40px -12px rgba(11,22,56,.45); }
.wm-dock-btn { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; text-align: left; color: #fff; transition: transform .15s; }
.wm-dock-btn:active { transform: scale(.98); }
.wm-dock-em { background: #0B1324; }
.wm-dock-work { background: #0B5FFF; }
.wm-dock-ic { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.14); }
.wm-dock-em .wm-dock-ic { color: #FCA5A5; }
.wm-dock-pulse { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: #EF4444; border: 2px solid #0B1324; animation: wm-dock-pulse 1.6s ease-in-out infinite; }
@keyframes wm-dock-pulse { 50% { box-shadow: 0 0 0 5px rgba(239,68,68,.25); } }
.wm-dock-t { min-width: 0; display: grid; line-height: 1.15; }
.wm-dock-t b { font-size: .9rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-dock-t small { font-size: .7rem; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-dock-badge { position: absolute; top: -8px; right: 8px; padding: 2px 7px; border-radius: 999px; font-size: .58rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #0B1324; background: #FBBF24; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
html.em-lock .wm-mobile-cta-bar { visibility: hidden; }

@media (max-width: 768px) {
  .wm-head-wa { margin-left: auto; margin-right: 8px; }
}
/* 769–1199px: the full menu does not fit beside WhatsApp and Free Checkup,
   so the menu moves into the drawer (the same one phones use). */
@media (min-width: 769px) and (max-width: 1365px) {
  .wm-nav { display: none !important; }
  .wm-hamburger { display: flex !important; }
  .wm-head-wa { margin-left: auto; }
}

/* ---------- Emergency: red alert dock button + three-step sheet ---------- */
.wm-dock-em { background: linear-gradient(135deg, #EF4444, #B91C1C); box-shadow: 0 10px 22px -10px rgba(220,38,38,.8); animation: em-glow 2.4s ease-in-out infinite; }
.wm-dock-em .wm-dock-ic { color: #fff; background: rgba(255,255,255,.18); }
.wm-dock-em .wm-dock-t small { color: rgba(255,255,255,.85); }
.wm-dock-pulse { border-color: #DC2626; background: #FDE047; }
@keyframes em-glow { 50% { box-shadow: 0 10px 26px -6px rgba(239,68,68,.95); } }

html.em-lock { overflow: hidden; }
.em-sheet { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 20px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.em-sheet[hidden] { display: none; }
.em-backdrop { position: absolute; inset: 0; background: rgba(40,6,6,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; }
.em-panel { position: relative; width: min(500px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 0 0 16px; border-radius: 24px; color: #0B1324; background: #fff; box-shadow: 0 40px 100px rgba(60,8,8,.4); opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
.em-sheet.is-open .em-backdrop { opacity: 1; }
.em-sheet.is-open .em-panel { opacity: 1; transform: none; }

.em-alert { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 16px 18px; color: #fff; background: linear-gradient(135deg, #EF4444 0%, #DC2626 50%, #991B1B 100%); }
.em-alert::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 10px, transparent 10px 20px); animation: em-stripes 1.2s linear infinite; pointer-events: none; }
.em-siren { position: relative; z-index: 1; flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #DC2626; background: #fff; }
.em-siren i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; animation: em-wave 1.8s ease-out infinite; }
.em-siren i + i { animation-delay: .9s; }
.em-siren svg { animation: em-blink 1.2s ease-in-out infinite; }
.em-alert-t { position: relative; z-index: 1; flex: 1; min-width: 0; }
.em-kicker { margin: 0; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.em-title { margin: 2px 0 0; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.em-close { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(255,255,255,.18); }
.em-close:hover { background: rgba(255,255,255,.28); }

.em-progress { display: flex; align-items: center; gap: 6px; padding: 14px 18px 4px; }
.em-progress span { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; color: #94A3B8; white-space: nowrap; transition: color .3s; }
.em-progress b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .7rem; color: #94A3B8; background: #F1F5F9; transition: all .3s; }
.em-progress i { flex: 1; height: 2px; border-radius: 2px; background: #F1F5F9; position: relative; overflow: hidden; }
.em-progress i::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: #DC2626; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.em-progress span.is-on { color: #B91C1C; }
.em-progress span.is-on b { color: #fff; background: #DC2626; box-shadow: 0 0 0 4px rgba(220,38,38,.15); }
.em-progress span.is-done { color: #475569; }
.em-progress span.is-done b { color: #fff; background: #16A34A; }
.em-progress span.is-done + i::after { transform: scaleX(1); }

.em-form { padding: 10px 18px 0; }
.em-step { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 12px; }
.em-js .em-step:not(.is-on) { display: none; }
.em-js .em-step.is-on { animation: em-in .4s cubic-bezier(.2,.8,.2,1) both; }
.em-js .em-step.from-back { animation-name: em-in-back; }
.em-q { padding: 0; margin: 0 0 2px; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.em-q small { font-family: Inter, sans-serif; font-size: .74rem; font-weight: 600; color: #94A3B8; }
.em-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.em-tile { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; cursor: pointer; border: 1.5px solid #F1E3E3; background: #FFF8F8; transition: border-color .15s, background .15s, transform .15s; animation: em-in .4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * .04s); }
.em-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.em-tile:hover { border-color: #FCA5A5; transform: translateY(-1px); }
.em-tile-ic { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #DC2626; background: #FEE2E2; }
.em-tile-t { font-size: .88rem; font-weight: 700; line-height: 1.2; color: #0B1324; }
.em-tile:has(input:checked) { border-color: #DC2626; background: #DC2626; }
.em-tile:has(input:checked) .em-tile-t { color: #fff; }
.em-tile:has(input:checked) .em-tile-ic { color: #DC2626; background: #fff; }
.em-tile:has(input:focus-visible) { outline: 3px solid #FCA5A5; outline-offset: 2px; }

.em-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.em-field label { font-size: .78rem; font-weight: 700; color: #22304A; }
.em-field label span { color: #DC2626; }
.em-field label small { font-weight: 600; color: #8090A8; }
.em-form textarea, .em-form input[type="text"], .em-form input[type="email"], .em-form input[type="tel"] { width: 100%; min-height: 46px; margin: 0; padding: 11px 13px; border-radius: 12px; font: inherit; font-size: .93rem; color: #0B1324; background: #F5F7FB; border: 1.5px solid #E0E6F0; resize: none; transition: border-color .18s, box-shadow .18s, background .18s; }
.em-form textarea:focus, .em-form input:focus { outline: 0; background: #fff; border-color: #DC2626; box-shadow: 0 0 0 4px rgba(220,38,38,.12); }
.em-phone { display: flex; align-items: stretch; gap: 0; min-height: 46px; border-radius: 12px; background: #F5F7FB; border: 1.5px solid #E0E6F0; }
.em-phone:focus-within { background: #fff; border-color: #DC2626; box-shadow: 0 0 0 4px rgba(220,38,38,.12); }
.em-phone > .wm-cc { flex: 0 0 auto; width: auto; display: flex; position: relative; }
.em-phone .wm-cc-btn { display: inline-flex; align-items: center; height: 100%; margin: 0; padding: 0 10px 0 12px; border: 0; border-right: 1.5px solid #E0E6F0; border-radius: 11px 0 0 11px; font: inherit; font-size: .86rem; font-weight: 700; color: #0B1324; background: transparent; cursor: pointer; }
.em-form .em-phone > input { flex: 1 1 0; min-width: 0; min-height: 0; border: 0; border-radius: 0 11px 11px 0; background: transparent; box-shadow: none !important; }
.em-consent { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: .78rem; line-height: 1.5; color: #56637C; background: #F7F9FC; }
.em-consent input { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; accent-color: #DC2626; }
.em-consent a { color: #DC2626; }
.em-err { margin: 0; font-size: .82rem; font-weight: 600; color: #B91C1C; }
.em-submit { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-size: 1rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #EF4444, #B91C1C); box-shadow: 0 14px 30px -10px rgba(220,38,38,.6); }
.em-submit::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent); transform: skewX(-20deg); animation: hq-shine 3.5s ease-in-out 1s infinite; }

.em-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.em-back { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; color: #475569; background: #fff; border: 1.5px solid #E2E8F0; }
.em-next { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 800; color: #fff; background: #0B1324; }
.em-next:hover { background: #DC2626; }
.em-sheet:not(.em-js) .em-nav { display: none; }
.em-sheet[data-step="1"] .em-back { visibility: hidden; }
/* steps 1 and 2 move on by themselves when a tile is picked; Next shows only
   once something is chosen (e.g. after going back). Step 4 submits instead. */
.em-sheet[data-step="1"]:not(:has(input[name="wm_details[problem]"]:checked)) .em-next,
.em-sheet[data-step="2"]:not(:has(input[name="wm_region"]:checked)) .em-next,
.em-sheet[data-step="4"] .em-next { display: none; }
.em-sheet[data-step="4"] .em-nav { margin-top: 8px; }
.em-alt { margin: 12px 18px 0; text-align: center; font-size: .82rem; color: #6B7891; }
.em-alt a { font-weight: 700; color: #128C4A; }

@keyframes em-wave    { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes em-blink   { 50% { opacity: .45; } }
@keyframes em-stripes { to { background-position: 28px 0; } }
@keyframes em-in      { from { opacity: 0; transform: translateX(22px); } }
@keyframes em-in-back { from { opacity: 0; transform: translateX(-22px); } }

@media (max-width: 760px) {
  .em-sheet { place-items: end stretch; padding: 0; }
  .em-panel { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; transform: translateY(100%); transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .2s; }
  .em-sheet.is-open .em-panel { transform: none; }
  .em-alert { padding: 14px 16px; }
  .em-title { font-size: 1.12rem; }
  .em-progress, .em-form { padding-left: 16px; padding-right: 16px; }
  .em-progress span { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .em-sheet *, .wm-dock-em { animation: none !important; }
}

/* ============================================================================
   "Our Work" drawer, modern (preview only): browser-frame cards.
   ========================================================================== */
.wm-drawer.wm-wd2 { display: flex; flex-direction: column; width: min(420px, 92vw); padding: 0; background: #F4F7FC; border-radius: 26px 0 0 26px; box-shadow: -30px 0 80px rgba(8,16,40,.25); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.wm-wd2-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 22px 20px 16px; background: linear-gradient(160deg, #0B1324 0%, #13234A 100%); color: #fff; border-radius: 26px 0 0 0; }
.wm-wd2-kicker { margin: 0; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #7FB0FF; }
.wm-wd2-title { margin: 4px 0 0; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.wm-wd2-sub { margin: 4px 0 0; font-size: .8rem; color: rgba(255,255,255,.7); }
.wm-drawer.wm-wd2 .wm-wd2-close { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.12); }
.wm-drawer.wm-wd2 .wm-wd2-close:hover { background: rgba(255,255,255,.22); }
.wm-wd2-list { flex: 1; overflow-y: auto; display: grid; gap: 14px; align-content: start; padding: 16px; }
.wm-drawer.wm-wd2 .wm-wd2-card { display: block; margin: 0; padding: 0; overflow: hidden; border: 1px solid #E3E8F1; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px -16px rgba(16,32,72,.35); cursor: pointer; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s; }
.wm-drawer.wm-wd2.is-open .wm-wd2-card, .wm-drawer.wm-wd2[aria-hidden="false"] .wm-wd2-card { animation: wd2-in .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.08s + var(--i) * .05s); }
.wm-drawer.wm-wd2 .wm-wd2-card:hover, .wm-drawer.wm-wd2 .wm-wd2-card:focus-visible { transform: translateY(-3px); border-color: #9DBBF5; box-shadow: 0 20px 36px -18px rgba(11,95,255,.45); outline: 0; }
.wm-wd2-bar { display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: #F1F4F9; border-bottom: 1px solid #E6EAF1; }
.wm-wd2-bar i { width: 7px; height: 7px; border-radius: 50%; background: #FF5F57; }
.wm-wd2-bar i:nth-child(2) { background: #FEBC2E; }
.wm-wd2-bar i:nth-child(3) { background: #28C840; }
.wm-wd2-bar span { margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: .68rem; font-weight: 600; color: #6B7891; background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-wd2-shot { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #E9EEF6; }
.wm-drawer.wm-wd2 .wm-wd2-shot img { display: block; width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; object-position: top; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.wm-wd2-card:hover .wm-wd2-shot img { transform: scale(1.05); }
.wm-wd2-play { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; color: #fff; background: rgba(11,19,36,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s; }
.wm-wd2-card:hover .wm-wd2-play { background: #0B5FFF; }
.wm-wd2-info { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px 14px; }
.wm-drawer.wm-wd2 .wm-wd-name { margin: 0; font-size: .98rem; font-weight: 800; color: #0B1324; }
.wm-wd2-tag { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #0B5FFF; background: #EEF4FF; }
.wm-wd2-go { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #0B1324; background: #F1F4F9; transition: background .2s, color .2s, transform .2s; }
.wm-wd2-card:hover .wm-wd2-go { color: #fff; background: #0B5FFF; transform: rotate(45deg); }
.wm-wd2-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #E6EAF1; }
.wm-wd2-btn { display: flex; align-items: center; justify-content: center; padding: 13px 10px; border-radius: 13px; font-size: .88rem; font-weight: 800; text-decoration: none; color: #0B1324; border: 1.5px solid #E0E6F0; background: #fff; transition: all .2s; }
.wm-wd2-btn:hover { border-color: #0B5FFF; color: #0B5FFF; }
.wm-wd2-btn-main { color: #fff; border-color: transparent; background: linear-gradient(135deg, #2F7BFF, #0B5FFF); box-shadow: 0 10px 24px -12px rgba(11,95,255,.7); }
.wm-wd2-btn-main:hover { color: #fff; }
@keyframes wd2-in { from { opacity: 0; transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) { .wm-wd2 * { animation: none !important; transition: none !important; } }
.wm-drawer.wm-wd2 .wm-wd2-list { display: flex; flex-direction: column; gap: 14px; }
.wm-drawer.wm-wd2 .wm-wd2-card { flex: 0 0 auto; }

/* Header WhatsApp as a highlighted "Instant talk" button */
.wm-head-wa { width: auto; height: auto; display: inline-flex; align-items: center; gap: 9px; padding: 5px 16px 5px 5px; border-radius: 999px; text-decoration: none; background: linear-gradient(135deg, #25D366, #128C4A); box-shadow: 0 10px 22px -8px rgba(18,140,74,.75); }
.wm-head-wa:hover { transform: translateY(-1px); color: #fff; }
.wm-head-wa-ring { border-radius: 999px; border-color: #25D366; }
.wm-head-wa-ic { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #128C4A; background: #fff; }
.wm-head-wa-live { position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: #FDE047; border: 2px solid #128C4A; animation: wm-dock-pulse 1.6s ease-in-out infinite; }
.wm-head-wa-t { position: relative; z-index: 1; display: grid; line-height: 1.05; color: #fff; text-align: left; }
.wm-head-wa-t small { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.wm-head-wa-t b { font-size: .92rem; font-weight: 800; white-space: nowrap; }
@media (max-width: 768px) {
  .wm-head-wa { gap: 7px; padding: 4px 12px 4px 4px; margin-right: 8px; }
  .wm-head-wa-ic { width: 30px; height: 30px; }
  .wm-head-wa-ic svg { width: 16px; height: 16px; }
  .wm-head-wa-t small { font-size: .56rem; }
  .wm-head-wa-t b { font-size: .82rem; }
}
@media (max-width: 359px) {
  .wm-head-wa-t small { display: none; }
}

/* wide screens: give the header row more room for the Instant talk button */
@media (min-width: 1280px) {
  .wm-header .wm-container { max-width: 1400px; }
}

/* ============================================================================
   Menu drawer, modern (preview only, .wm-dr2): icon rows, staggered entrance.
   ========================================================================== */
.wm-drawer.wm-dr2 { display: flex; flex-direction: column; width: min(380px, 88vw); padding: 0; background: #fff; border-radius: 26px 0 0 26px; box-shadow: -30px 0 80px rgba(8,16,40,.25); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.wm-dr2 .wm-drawer-head { padding: 18px 18px 14px; border-bottom: 1px solid #EEF1F6; }
.wm-dr2 .wm-drawer-close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; color: #33415C; background: #F1F4F9; }
.wm-dr2 .wm-drawer-close:hover { background: #E4E9F2; }
.wm-dr2-label { margin: 14px 20px 6px; font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #94A3B8; }
.wm-dr2 .wm-drawer-nav { flex: 1; overflow-y: auto; padding: 0 10px 10px; }
.wm-dr2 .wm-drawer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wm-dr2 .wm-drawer-menu li { margin: 0; padding: 0; border: 0; }
.wm-dr2 .wm-drawer-menu li::before { content: none; }
.wm-dr2 .wm-drawer-menu a { --ac: #0B5FFF; --soft: #EEF4FF; position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 12px; border: 0; border-radius: 14px; font-size: .98rem; font-weight: 700; color: #0B1324; text-decoration: none; transition: background .18s, color .18s; }
.wm-dr2 .wm-drawer-menu a::before { content: ""; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: var(--soft); box-shadow: inset 0 0 0 1px rgba(0,0,0,.02); }
.wm-dr2 .wm-drawer-menu a::after { content: ""; position: absolute; left: 21px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--ac); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.wm-dr2 .wm-drawer-menu a > * { pointer-events: none; }
.wm-dr2 .wm-drawer-menu li { position: relative; }
.wm-dr2 .wm-drawer-menu li > a { padding-right: 36px; }
.wm-dr2 .wm-drawer-menu li::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid #CBD5E1; border-top: 2px solid #CBD5E1; transform: rotate(45deg); pointer-events: none; transition: transform .2s, border-color .2s; }
.wm-dr2 .wm-drawer-menu li:hover::after { border-color: var(--ac, #0B5FFF); transform: translateX(3px) rotate(45deg); }
.wm-dr2 .wm-drawer-menu a:hover, .wm-dr2 .wm-drawer-menu a:focus-visible { background: #F6F8FC; outline: 0; }
.wm-dr2 .wm-drawer-menu .current-menu-item > a, .wm-dr2 .wm-drawer-menu a[aria-current="page"] { color: var(--ac); background: var(--soft); }
.wm-drawer.wm-dr2[aria-hidden="false"] .wm-drawer-menu li, .wm-drawer.wm-dr2.open .wm-drawer-menu li { animation: dr2-in .45s cubic-bezier(.2,.8,.2,1) both; }

.wm-dr2 .wm-drawer-menu li:nth-child(1) { animation-delay: 0.08s; }
.wm-dr2 .wm-drawer-menu li:nth-child(2) { animation-delay: 0.11s; }
.wm-dr2 .wm-drawer-menu li:nth-child(3) { animation-delay: 0.15s; }
.wm-dr2 .wm-drawer-menu li:nth-child(4) { animation-delay: 0.18s; }
.wm-dr2 .wm-drawer-menu li:nth-child(5) { animation-delay: 0.22s; }
.wm-dr2 .wm-drawer-menu li:nth-child(6) { animation-delay: 0.25s; }
.wm-dr2 .wm-drawer-menu li:nth-child(7) { animation-delay: 0.29s; }
.wm-dr2 .wm-drawer-menu li:nth-child(8) { animation-delay: 0.32s; }
.wm-dr2 .wm-drawer-menu li:nth-child(9) { animation-delay: 0.36s; }
.wm-dr2 .wm-drawer-menu li:nth-child(10) { animation-delay: 0.39s; }
.wm-dr2 .wm-drawer-menu li:nth-child(11) { animation-delay: 0.42s; }
.wm-dr2 .wm-drawer-menu a[href*="/website-services-india"] { --ac: #0B5FFF; --soft: #EEF4FF; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z'/%3E%3C/svg%3E"); }
.wm-dr2 .wm-drawer-menu a[href*="/website-maintenance-services-india"] { --ac: #0B5FFF; --soft: #EEF4FF; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5zM9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.wm-dr2 .wm-drawer-menu a[href*="/wordpress-support-services-india"] { --ac: #E8590C; --soft: #FFF1E6; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14v-2a9 9 0 0 1 18 0v2M21 15a2 2 0 0 1-2 2h-1v-6h1a2 2 0 0 1 2 2zM3 15a2 2 0 0 0 2 2h1v-6H5a2 2 0 0 0-2 2z'/%3E%3C/svg%3E"); }
.wm-dr2 .wm-drawer-menu a[href*="/website-development-services-india"] { --ac: #7C3AED; --soft: #F3EEFF; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 18 6-6-6-6M8 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.wm-dr2 .wm-drawer-menu a[href*="/digital-marketing-services"] { --ac: #0E9F6E; --soft: #E8F8F1; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M14 7h7v7'/%3E%3C/svg%3E"); }
.wm-dr2 .wm-drawer-menu a[href*="/ai-chatbot"] { --ac: #0891B2; --soft: #E6F7FB; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2zM8 9h8M8 13h5'/%3E%3C/svg%3E"); }
.wm-dr2 .wm-drawer-menu a[href*="/pricing"] { --ac: #CA8A04; --soft: #FEF9E7; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8zM7.5 7.5h.01'/%3E%3C/svg%3E"); }
.wm-dr2 .wm-drawer-menu a[href*="/blog"] { --ac: #DB2777; --soft: #FDECF5; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5zM4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5'/%3E%3C/svg%3E"); }
.wm-dr2 .wm-drawer-menu a[href*="/contact"] { --ac: #475569; --soft: #F1F5F9; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4zM22 6l-10 7L2 6'/%3E%3C/svg%3E"); }

.wm-dr2 .wm-drawer-contact { margin: 0; padding: 12px 16px; border-top: 1px solid #EEF1F6; background: #F8FAFD; display: grid; gap: 6px; }
.wm-dr2 .wm-drawer-contact-label { margin: 0 0 2px; font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #94A3B8; }
.wm-dr2 .wm-drawer-contact-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #E6EAF1; border-radius: 12px; font-size: .84rem; font-weight: 600; color: #22304A; background: #fff; text-decoration: none; }
.wm-dr2 .wm-drawer-contact-item:hover { border-color: #9DBBF5; }
.wm-dr2 .wm-drawer-contact-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #0B5FFF; background: #EEF4FF; }
.wm-dr2 .wm-drawer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #EEF1F6; }
.wm-dr2 .wm-drawer-actions .wm-btn { position: relative; flex-direction: column; justify-content: center; gap: 2px; min-height: 58px; padding: 8px 10px; border-radius: 14px; font-size: .86rem; font-weight: 800; line-height: 1.15; text-align: center; }
.wm-dr2 .wm-drawer-actions .wm-btn svg { margin-bottom: 2px; }
.wm-dr2 .wm-drawer-actions .wm-btn-whatsapp { background: linear-gradient(135deg, #25D366, #128C4A); }
.wm-dr2-wa-k { order: -1; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
@keyframes dr2-in { from { opacity: 0; transform: translateX(26px); } }
@media (prefers-reduced-motion: reduce) { .wm-dr2 * { animation: none !important; } }
/* override the old drawer link rules (space-between, hidden arrow, hover shift) */
.wm-dr2 .wm-drawer-menu li > a { justify-content: flex-start; padding: 8px 36px 8px 12px; letter-spacing: 0; }
.wm-dr2 .wm-drawer-menu li > a:hover { padding-left: 12px; color: #0B1324; background: #F6F8FC; }
.wm-dr2 .wm-drawer-menu li > a::after { opacity: 1; transform: none; font-size: 0; color: transparent; transition: none; }
.wm-dr2 .wm-drawer-menu li > a:hover::after, .wm-dr2 .wm-drawer-menu li.current-menu-item > a::after { opacity: 1; transform: none; }
.wm-dr2 .wm-drawer-menu li.current-menu-item > a { color: var(--ac); background: var(--soft); }

/* Emergency on desktop: a red button bottom-right; the form slides in from the right. */
.wm-em-fab { display: none; }
@media (min-width: 769px) {
  .wm-em-fab { position: fixed; right: 22px; bottom: 22px; z-index: 900; display: inline-flex; align-items: center; gap: 11px; padding: 9px 20px 9px 9px; border: 0; border-radius: 999px; cursor: pointer; font-family: Inter, ui-sans-serif, system-ui, sans-serif; text-align: left; color: #fff; background: linear-gradient(135deg, #EF4444, #B91C1C); box-shadow: 0 16px 34px -12px rgba(220,38,38,.75), 0 0 0 4px rgba(239,68,68,.14); animation: em-glow 2.4s ease-in-out infinite, wm-em-fab-in .6s cubic-bezier(.2,.8,.2,1) .8s both; transition: transform .2s, box-shadow .2s; }
  .wm-em-fab:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -12px rgba(220,38,38,.85), 0 0 0 6px rgba(239,68,68,.16); }
  .wm-em-fab:focus-visible { outline: 3px solid #FDE047; outline-offset: 3px; }
  .wm-em-fab-ic { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #DC2626; background: #fff; }
  .wm-em-fab-ic i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; animation: em-wave 1.8s ease-out infinite; }
  .wm-em-fab-ic i + i { animation-delay: .9s; }
  .wm-em-fab-ic svg { position: relative; animation: em-blink 1.2s ease-in-out infinite; }
  .wm-em-fab-t { display: grid; line-height: 1.15; }
  .wm-em-fab-t b { font-size: .98rem; font-weight: 800; }
  .wm-em-fab-t small { font-size: .74rem; font-weight: 600; color: rgba(255,255,255,.85); }
  html.em-lock .wm-em-fab { visibility: hidden; }

  /* the sheet becomes a panel at the bottom right, where the button is */
  .em-sheet { place-items: end end; padding: 22px; }
  .em-panel { width: min(460px, 100%); max-height: calc(100vh - 44px); max-height: calc(100dvh - 44px); transform: translate(30px, 30px) scale(.96); transform-origin: bottom right; }
  .em-sheet.is-open .em-panel { transform: none; }
}
@keyframes wm-em-fab-in { from { opacity: 0; transform: translateY(20px) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .wm-em-fab, .wm-em-fab * { animation: none !important; } }

/* Pages with a sticky side form on the right (accessibility hub): the button is
   just the round icon, so it never covers that form; its label opens on hover. */
@media (min-width: 769px) {
  body:has(.ax-side) .wm-em-fab { right: 10px; bottom: 14px; padding: 9px; gap: 0; }
  body:has(.ax-side) .wm-em-fab-t { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s ease; }
  body:has(.ax-side) .wm-em-fab:hover, body:has(.ax-side) .wm-em-fab:focus-visible { padding-right: 20px; gap: 11px; }
  body:has(.ax-side) .wm-em-fab:hover .wm-em-fab-t, body:has(.ax-side) .wm-em-fab:focus-visible .wm-em-fab-t { max-width: 160px; }
}
/* 769–1279px: the side form reaches the right edge, so it stops 76px higher and
   the round button sits in the space below it (the form scrolls inside, as before). */
@media (min-width: 769px) and (max-width: 1279px) {
  body:has(.wm-em-fab) .ax-side { max-height: calc(100vh - 188px); }
}

/* ============================================================================
   Step forms (contact, accessibility, referral): one card, short steps,
   country tiles. Styles keyed to .sf-*; the Emergency form keeps its own .em-*.
   ========================================================================== */
.sf-card { position: relative; overflow: hidden; border-radius: 26px; color: #0B1324; background: #fff; border: 1px solid #E3E8F1; box-shadow: 0 40px 80px -44px rgba(16,32,72,.55); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.sf-card *, .sf-card *::before, .sf-card *::after { box-sizing: border-box; }
.sf-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, #2F7BFF, #18B47B, #7C3AED); }
.sf-head { padding: 28px 28px 0; }
.sf-title { margin: 0; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 1.5rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #0B1324; }
.sf-sub { margin: 6px 0 0; font-size: .92rem; line-height: 1.55; color: #55627B; }
.sf-rail { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin: 20px 0 0; padding: 0; }
.sf-rail li { display: grid; gap: 7px; font-size: .74rem; font-weight: 700; color: #8592AC; }
.sf-rail li::before { content: ""; height: 5px; border-radius: 5px; background: #E8EDF5; transition: background .3s; }
.sf-rail li.is-on, .sf-rail li.is-done { color: #0B1324; }
.sf-rail li.is-on::before { background: linear-gradient(90deg, #2F7BFF, #0B5FFF); }
.sf-rail li.is-done::before { background: #18B47B; }
.sf-form { padding: 22px 28px 26px; }
.sf-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.sf-q { margin: 0 0 4px; padding: 0; font-size: 1.12rem; font-weight: 800; line-height: 1.3; color: #0B1324; }
.sf-q:focus { outline: none; }
.sf-q span { color: #DC2626; }
.sf-q-hint { margin: 0 0 14px; font-size: .82rem; font-weight: 600; color: #8592AC; }
.sf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sf-tile { position: relative; display: grid; justify-items: start; gap: 10px; padding: 14px; border-radius: 16px; cursor: pointer; background: #fff; border: 1.5px solid #E3E8F1; transition: border-color .2s, box-shadow .2s, transform .2s, background .2s; animation: sf-rise .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * .035s); }
.sf-tile:hover { border-color: #B9C7E0; transform: translateY(-2px); }
.sf-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sf-tile-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #0B5FFF; background: #EEF4FF; transition: background .2s, color .2s; }
.sf-tile-ic.is-flag { overflow: hidden; border-radius: 50%; background: #F1F4F9; }
.sf-tile-ic.is-flag img { width: 100%; height: 100%; object-fit: cover; }
.sf-tile-t { min-width: 0; font-size: .88rem; font-weight: 700; line-height: 1.3; color: #0B1324; overflow-wrap: anywhere; }
.sf-tile:has(input:checked) { border-color: #0B5FFF; background: #F5F9FF; box-shadow: 0 0 0 4px rgba(11,95,255,.12); }
.sf-tile:has(input:checked) .sf-tile-ic:not(.is-flag) { color: #fff; background: #0B5FFF; }
.sf-tile:has(input:checked) .sf-tile-ic.is-flag { box-shadow: 0 0 0 3px #0B5FFF; }
.sf-tile:has(input:focus-visible) { outline: 3px solid rgba(11,95,255,.45); outline-offset: 2px; }
.sf-regions .sf-tile { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.sf-err { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; font-size: .84rem; font-weight: 600; color: #B91C1C; background: #FEF2F2; }
.sf-form .wm-form-group { margin-bottom: 14px; }
.sf-form .wm-form-control { border-radius: 12px; }
.sf-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 16px; padding: 15px 18px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-size: 1rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #2F7BFF, #0B5FFF); box-shadow: 0 16px 32px -14px rgba(11,95,255,.8); transition: transform .2s, box-shadow .2s; }
.sf-submit:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 20px 36px -14px rgba(11,95,255,.95); }
.sf-nav { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.sf-back { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; cursor: pointer; color: #0B1324; background: #fff; border: 1px solid #E3E8F1; }
.sf-next { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 12px 20px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-size: .95rem; font-weight: 800; color: #fff; background: #0B1324; transition: background .2s, gap .2s; }
.sf-next:hover { background: #0B5FFF; gap: 12px; }
.sf-foot { margin: 14px 0 0; text-align: center; font-size: .78rem; line-height: 1.5; color: #55627B; }
.sf-js .sf-step { display: none; }
.sf-js .sf-step.is-on { display: block; animation: sf-in .35s cubic-bezier(.2,.8,.2,1); }
.sf-js .sf-step.from-back { animation-name: sf-back; }
[data-sf]:not(.sf-js) .sf-nav { display: none; }
[data-sf]:not(.sf-js) .sf-step + .sf-step { margin-top: 22px; padding-top: 22px; border-top: 1px solid #EEF1F6; }
.sf-js.is-first .sf-back { visibility: hidden; }
.sf-js.is-last .sf-next { display: none; }
@keyframes sf-in { from { opacity: 0; transform: translateX(18px); } }
@keyframes sf-back { from { opacity: 0; transform: translateX(-18px); } }
@keyframes sf-rise { from { opacity: 0; transform: translateY(10px); } }
/* narrow places (the accessibility side form) and phones: two tiles a row */
[data-sf].is-narrow .sf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-card.is-narrow .sf-head { padding: 22px 20px 0; }
.sf-card.is-narrow .sf-form { padding: 18px 20px 22px; }
[data-sf].is-narrow .sf-tile, .sf-tiles.is-rows .sf-tile { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 11px; }
@media (max-width: 760px) {
  .sf-head { padding: 22px 18px 0; }
  .sf-form { padding: 18px 18px 22px; }
  .sf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sf-tile { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 11px; }
  .sf-tile-ic { width: 32px; height: 32px; }
  .sf-tile-t { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .sf-card *, .sf-card *::before { animation: none !important; transition: none !important; } }

/* Emergency form: the country step uses the same flags inside .em tiles */
.em-tile-ic.is-flag { overflow: hidden; border-radius: 50%; background: #FFF; }
.em-tile-ic.is-flag img { width: 100%; height: 100%; object-fit: cover; }
.em-tile:has(input:checked) .em-tile-ic.is-flag { box-shadow: 0 0 0 3px #DC2626; }

/* accessibility hub side form: same steps inside its own card */
.ax-form[data-sf] .sf-rail { margin: 4px 0 18px; }
.ax-form[data-sf] .sf-q { font-size: 1.02rem; margin-bottom: 10px; }
.ax-form[data-sf] .sf-q-hint { margin-top: -6px; }
.ax-form[data-sf] .sf-tile { padding: 10px; gap: 8px; }
.ax-form[data-sf] .sf-tile-t { font-size: .82rem; }
.ax-form[data-sf] .sf-submit { width: 100%; }
.sf-card.wm-form-wrap { padding: 0; max-width: none; }