/* Hotspot + loyalty stacked in the right column, in the reference design */
#services.ks .ks-side{display:flex;flex-direction:column;gap:16px;min-width:0}
#services.ks .ks-hot{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;border:2px solid #22c3ff!important;background:linear-gradient(160deg,#0a3fd6,#0630b8 60%,#05269a)!important;box-shadow:none!important;color:#fff}
#services.ks .ks-hot::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,40,220,.35),rgba(0,22,150,.75));pointer-events:none}
#services.ks .ks-hot-art{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:-2!important;opacity:.55}
#services.ks .ks-hot-art img{width:100%;height:100%;object-fit:cover;object-position:center 30%!important;filter:none}
#services.ks .ks-hot-art::after{content:"";position:absolute;right:26px;top:28px;width:48px;height:48px;border-radius:50%;background:rgba(160,230,255,.85);border:6px solid #8fe0ff;box-shadow:0 0 0 7px rgba(130,215,255,.35),0 0 24px rgba(120,210,255,.7)}
#services.ks .ks-hot-copy{padding:30px 24px 26px!important}
#services.ks .ks-hot .ks-eyebrow{display:none!important}
#services.ks .ks-hot h3{display:flex;align-items:flex-start;gap:10px;max-width:none!important;margin:0;font-size:30px!important;line-height:1.2!important;font-weight:800;letter-spacing:-.01em;color:#fff!important}
#services.ks .ks-hot h3 .ks-hot-ico{flex:none;width:26px;height:26px;margin-top:5px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#services.ks .ks-hot-text{max-width:none!important;margin:16px 0 0!important;font-size:16px!important;line-height:1.5!important;color:#fff!important;font-weight:500}
#services.ks .ks-hot #hotspot-search{margin-top:20px}
#services.ks .ks-hot .location-search>label,#services.ks .ks-hot .location-divider{display:none}
#services.ks .ks-hot .location-field{display:flex;border-radius:12px;overflow:hidden;background:#e8efff}
#services.ks .ks-hot .location-field input{flex:1;min-width:0;height:55px;padding:0 16px;border:0!important;background:#e8efff!important;color:#0c1f4f!important;font-size:16px!important;border-radius:0!important}
#services.ks .ks-hot .location-go{flex:none;width:58px;border:0!important;border-radius:0!important;background:#0094ff!important;color:#fff!important;display:grid;place-items:center}
#services.ks .ks-hot .location-go svg{width:24px!important;height:24px!important;fill:none;stroke:#fff;stroke-width:2}
#services.ks .ks-hot .coverage-action.secondary{margin-top:10px;background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.4)!important;color:#fff!important}
#services.ks .ks-hot .coverage-status,#services.ks .ks-hot .ks-hot-foot,#services.ks .ks-hot .ks-hot-foot span{color:#e4eeff!important}
#services.ks .ks-hot .ks-cities{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;width:auto}
#services.ks .ks-hot .ks-cities button{padding:9px 12px;border-radius:9px;background:rgba(0,20,130,.55)!important;border:1.5px solid #2f8cff!important;color:#fff!important;font-size:12px!important;font-weight:800}
#services.ks .ks-hot .ks-all{background:rgba(255,255,255,.14)!important;color:#fff!important;border:1px solid rgba(255,255,255,.4)!important}

#services.ks .ks-loy{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;border-radius:22px;border:2px solid #22c3ff;background:linear-gradient(120deg,#0a3fd6,#0630b8 55%,#071e82);color:#fff}
#services.ks .ks-loy-copy{position:relative;z-index:1;padding:26px 0 26px 24px}
#services.ks .ks-loy-kicker{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:700;color:#fff}
#services.ks .ks-loy-kicker svg{width:18px;height:18px;fill:#fff;stroke:none}
#services.ks .ks-loy h3{margin:10px 0 14px;font-size:34px;line-height:1.1;font-weight:800;letter-spacing:-.01em;color:#fff;white-space:nowrap}
#services.ks .ks-loy-copy>p:not(.ks-loy-kicker){margin:0 0 18px;font-size:15px;line-height:1.55;font-weight:500;color:#fff;max-width:300px}
#services.ks .ks-loy-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:9px;border:2px solid rgba(255,255,255,.75);background:linear-gradient(120deg,#ff8a2b,#ff6a00);color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
#services.ks .ks-loy-btn .ar{width:1em;height:1em}
#services.ks .ks-loy img{position:absolute;right:-18px;bottom:-14px;width:58%;height:auto;max-width:330px;pointer-events:none;filter:drop-shadow(0 12px 22px rgba(0,0,60,.45))}
@media(max-width:900px){#services.ks .ks-loy h3{font-size:30px}#services.ks .ks-loy img{width:50%}}
.ks-loy .ks-loy-btn{white-space:nowrap!important;width:auto!important;padding-inline:18px!important}
#services.ks .ks-loy-kicker img{display:block;width:auto;height:30px;max-width:100%;position:static;filter:none;pointer-events:auto}
#services.ks .ks-loy-kicker{margin-bottom:2px}
.site #loyalty.reference-loyalty{display:none!important}
@media(max-width:600px){
#services.ks .ks-hot h3{font-size:24px!important;gap:8px}
#services.ks .ks-hot-ico{width:22px!important;height:22px!important}
#services.ks .ks-loy{grid-template-columns:minmax(0,1fr)}
#services.ks .ks-loy-copy{padding:22px 20px 112px}
#services.ks .ks-loy h3{font-size:26px!important;white-space:normal}
#services.ks .ks-loy-copy>p:not(.ks-loy-kicker){max-width:none}
#services.ks .ks-loy img{width:46%;right:-8px;bottom:-8px}
#services.ks .ks-loy-btn{min-height:42px}
}
/* Phones: 16px form text stops iOS zooming the page when a field is focused */
@media(max-width:600px){input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:12px!important}}
/* Services grid on small screens only: 2 columns, 8px gap (grid-cols-2 gap-2), compact card text. Desktop is unchanged. */
@media (max-width:760px){
 #services.ks .ks-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 #services.ks .ks-card{flex-direction:column;gap:8px;padding:12px!important;border-radius:14px}
 #services.ks .ks-card>svg{width:22px!important;height:22px!important;margin:0!important}
 #services.ks .ks-card h3{font-size:12px!important;line-height:1.25!important;padding-top:0!important}
 #services.ks .ks-card p{font-size:10.5px!important;line-height:1.45!important;margin-top:4px!important}
 #services.ks .ks-card button{font-size:10.5px!important;margin-top:8px!important;gap:4px}
 #services.ks .ks-card button svg{width:12px!important;height:12px!important}
}
/* Small screens only: hide the 9th service (VoIP & PBX) so the 2-column grid ends evenly,
   and set the Hotspot and Loyalty cards side by side (2 columns, 8px gap) with compact text. */
@media (max-width:760px){
 #services.ks #service-grid .ks-card:nth-child(9){display:none!important}
 #services.ks .ks-side{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;align-items:stretch}
 #services.ks .ks-hot,#services.ks .ks-loy{border-radius:14px!important;min-width:0}
 #services.ks .ks-hot-copy{padding:14px 12px!important}
 #services.ks .ks-hot-art::after{display:none}
 #services.ks .ks-hot h3{font-size:14px!important;line-height:1.25!important;gap:6px}
 #services.ks .ks-hot h3 .ks-hot-ico{width:16px!important;height:16px!important;margin-top:1px!important}
 #services.ks .ks-hot-text{font-size:10.5px!important;line-height:1.45!important;margin-top:8px!important}
 #services.ks #hotspots #hotspot-search .location-field{height:36px!important;border-radius:8px!important}
 #services.ks #hotspots .location-field input{height:36px!important;min-height:36px!important;font-size:12px!important;padding:0 8px!important}
 #services.ks #hotspots .location-field input::placeholder{font-size:10.5px}
 #services.ks #hotspots .location-go{width:34px!important;height:36px!important}
 #services.ks #hotspots .location-go svg{width:16px!important;height:16px!important}
 #services.ks #hotspots .ks-cities{gap:4px!important;margin-top:8px!important}
 #services.ks #hotspots .ks-cities button{font-size:10px!important;padding:5px 7px!important;border-radius:7px!important}
 #services.ks .ks-loy{display:flex!important;flex-direction:column}
 #services.ks .ks-loy-copy{padding:14px 12px 84px!important}
 #services.ks .ks-loy-kicker img{height:18px!important}
 #services.ks .ks-loy h3{font-size:16px!important;line-height:1.2!important;margin:8px 0!important;white-space:normal!important}
 #services.ks .ks-loy-copy>p:not(.ks-loy-kicker){font-size:10.5px!important;line-height:1.45!important;margin-bottom:10px!important}
 #services.ks .ks-loy-btn{font-size:10.5px!important;min-height:32px!important;padding:0 10px!important;white-space:normal!important}
 #services.ks .ks-loy img:not(.ks-loy-kicker img){width:62%!important;right:-6px!important;bottom:-6px!important}
}
@media (max-width:760px){
 #services.ks .ks-hot h3{font-size:12px!important;line-height:1.25!important}
 #services.ks .ks-hot-text{font-size:10.5px!important;line-height:1.45!important;margin-top:8px!important}
}
/* Plan finder and plan cards, small screens only: 2 columns with an 8px gap and compact text. */
@media (max-width:760px){
 #packages .kp-finder{padding:18px 14px!important;gap:16px!important;border-radius:16px!important}
 #packages .kp-finder .kp-eyebrow{font-size:10px!important}
 #packages .kp-intro h2{font-size:16px!important;line-height:1.2!important}
 #packages .kp-finder .kp-lead{font-size:10.5px!important;line-height:1.5!important}
 #packages .kp-suggest{padding:10px 12px!important}
 #packages .kp-suggest span{font-size:9.5px!important}
 #packages .kp-suggest strong{font-size:12px!important}
 #packages .kp-suggest em{font-size:10.5px!important}
 #packages .kp-questions{gap:14px!important}
 #packages .kp-questions legend{font-size:12px!important;margin-bottom:8px!important}
 #packages .kp-chips{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 #packages .kp-finder .kp-chip span{font-size:10.5px!important;min-height:34px!important;padding:6px 8px!important;border-radius:9px!important;line-height:1.25!important;width:100%}
 #packages .kp-finder .kp-note{font-size:10px!important;line-height:1.45!important}
 #packages .kp-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding-top:12px!important}
 #packages .kp-cards .kp-card:last-child:nth-child(odd){grid-column:1/-1}
 #packages .kp-card{padding:12px!important;border-radius:14px!important;gap:8px!important}
 #packages .kp-badge{font-size:9px!important;padding:3px 8px!important}
 #packages .kp-card h3{font-size:12px!important;line-height:1.25!important}
 #packages .kp-speed{font-size:10.5px!important}
 #packages .kp-price strong{font-size:16px!important}
 #packages .kp-price small,#packages .kp-price span{font-size:10px!important}
 #packages .kp-card li{font-size:10.5px!important;line-height:1.4!important}
 #packages .kp-card ul{gap:4px!important}
 #packages .kp-cta{font-size:10.5px!important;min-height:34px!important;padding:6px 8px!important}
}
/* Why choose us, FAQ, footer links and contact strip — small screens only: 2 columns, 8px gap, compact text. */
@media (max-width:760px){
 .site #about.reference-values .values-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 .site #about.reference-values .values-grid article{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important;padding:12px!important;border-radius:14px!important;min-width:0}
 .site #about.reference-values .value-icon{width:32px!important;height:32px!important;border-radius:10px!important}
 .site #about.reference-values .value-icon svg{width:17px!important;height:17px!important}
 .site #about.reference-values .values-grid h3{font-size:12px!important;line-height:1.25!important;white-space:normal!important;margin:0 0 4px!important}
 .site #about.reference-values .values-grid p{font-size:10.5px!important;line-height:1.45!important;margin:0!important}

 #faq .faq-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 #faq .faq-column{gap:8px!important;min-width:0}
 #faq .faq-column+.faq-column{margin-top:0!important}
 #faq .faq-grid details{border-radius:12px!important}
 #faq .faq-grid summary{font-size:10.5px!important;line-height:1.35!important;padding:10px 26px 10px 10px!important;min-height:0!important}
 #faq .faq-grid summary::after,#faq .faq-grid summary::before{transform-origin:center;right:8px!important;scale:.8}
 #faq .faq-grid details p{font-size:10.5px!important;line-height:1.5!important;padding:0 10px 10px!important;margin:0!important}

 #contact .footer-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 8px!important}
 #contact .footer-brand{grid-column:1/-1}
 #contact .footer-links{min-width:0;gap:6px!important}
 #contact .footer-links h3{font-size:12px!important;margin:0 0 4px!important}
 #contact .footer-links:last-child{padding-right:0!important}

 #contact .kade-contact-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:10px!important;margin:16px 12px!important}
 #contact .kade-contact-item{gap:8px!important;align-items:center;min-width:0}
 #contact .kade-contact-item:last-child:nth-child(odd){grid-column:1/-1}
 #contact .kade-contact-icon{width:28px!important;height:28px!important}
 #contact .kade-contact-icon svg{width:14px!important;height:14px!important}
 #contact .kade-contact-item p{font-size:10px!important;margin:0 0 2px!important}
 #contact .kade-contact-item a,#contact .kade-contact-item strong{font-size:10.5px!important;line-height:1.35!important}
}
/* Small screens only: hide Opening hours and the Customer reviews section; tighter footer links. */
@media (max-width:760px){
 #contact .kade-contact-strip .kade-contact-item:last-child{display:none!important}
 .site #reviews.customer-reviews{display:none!important}
 #contact .footer-grid a:not(.brand){min-height:6px!important;display:flex!important;align-items:center!important}
}
@media (max-width:760px){#contact .footer-links:has(a[href="/cctv-security"]){display:none!important}}
/* Small screens only (round 2) */
@media (max-width:760px){
 #contact .footer-grid a:not(.brand){min-height:2px!important}
 .site #about.reference-values>h2{margin:10px auto 34px!important;max-width:820px;text-align:center;font-size:clamp(14px,2.6vw,34px)!important}
 /* Why choose us: icon and title on one line, description underneath */
 .site #about.reference-values .values-grid article{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;column-gap:8px!important;row-gap:6px!important}
 .site #about.reference-values .values-grid article>div:not(.value-icon){display:contents}
 .site #about.reference-values .values-grid article h3{grid-column:2;margin:0!important}
 .site #about.reference-values .values-grid article p{grid-column:1/-1}
 .site #about.reference-values .value-icon{width:28px!important;height:28px!important;border-radius:9px!important}
 .site #about.reference-values .value-icon svg{width:15px!important;height:15px!important}
 /* Every plan includes: 2x2 grid, small */
 #packages .kp-includes{flex-direction:column!important;align-items:stretch!important;gap:10px!important;padding:12px!important;border-radius:14px!important}
 #packages .kp-includes h3{font-size:12px!important}
 #packages .kp-includes ul{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%;font-size:10.5px!important}
 #packages .kp-includes li{gap:6px!important;min-width:0;line-height:1.25}
 #packages .kp-includes li span{width:26px!important;height:26px!important;border-radius:8px!important}
 #packages .kp-includes li svg{width:14px!important;height:14px!important}
 /* Stats panel: 3 columns */
 .site .stats.glow-panel{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:620px){#services.ks{padding:0!important}}
/* Small screens only (round 3) */
@media (max-width:760px){
 #packages .kp-finder .kp-chip span{font-size:10px!important;min-height:28px!important;padding:6px 8px!important;border-radius:6px!important;line-height:1.25!important;width:100%}
 #packages .kp-price strong{font-size:12px!important}
 /* Service cards: icon and title on one line, text and button underneath */
 #services.ks .ks-card{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;column-gap:8px!important;row-gap:4px!important}
 #services.ks .ks-card>div{display:contents}
 #services.ks .ks-card>svg{grid-column:1;grid-row:1}
 #services.ks .ks-card h3{grid-column:2;grid-row:1}
 #services.ks .ks-card p,#services.ks .ks-card button{grid-column:1/-1;justify-self:start}
 /* Footer: Popular Links and Contact & Help side by side */
 #contact .footer-links:has(a[href="/abuse"]){grid-column:1!important}
 #contact .footer-links:last-child{grid-column:2!important;grid-row:auto!important}
 /* "Not sure which plan fits?" line: compact */
 #packages .kp-help{gap:4px 14px!important;margin-top:8px!important;font-size:10.5px!important}
 #packages .kp-help a{min-height:28px!important;gap:5px!important;font-size:10.5px!important}
 #packages .kp-help svg{width:13px!important;height:13px!important}
 /* Why choose us: flat full-width band */
 .site #about.reference-values{margin-top:0!important;margin-bottom:0!important;padding:16px 12px!important;border-radius:0!important;border:0!important}
}
/* Phone/tablet menu: a fully rounded card floating just below the header instead of square top corners */
@media (max-width:1100px){
 .site > header #main-navlinks{top:calc(100% + 8px)!important;border-radius:16px!important;border:1px solid #dbe5f7!important;box-shadow:0 18px 40px -18px rgba(3,17,54,.45)!important;overflow:hidden}
 html[data-scheme=dark] .site > header #main-navlinks{border-color:#2b3f77!important}
}
/* Small screens only (round 4) */
@media (max-width:760px){
 #contact .footer-links a{margin:0 0 5px!important}
 .site .stats span{font-size:10px!important;font-weight:600!important;line-height:1.4!important;color:#5a6a8f}
 html[data-scheme=dark] .site .stats span{color:#9db0da}
}
@media (max-width:640px){.site .stats > div > svg{width:30px!important;height:30px!important;padding:7px!important}}
/* Phone type scale (requested): headings 14–16px, card titles 11–12px, body 10–10.5px, buttons 10px, labels 9–10px, fields 12px */
@media (max-width:760px){
 #packages .kp-long{display:none}
 #services.ks .ks-card button,#packages .kp-cta,#packages .kp-help a,#services.ks .ks-loy-btn,.site .ks-cities button{font-size:10px!important}
 #faq .faq-grid summary{font-size:11px!important;line-height:1.35!important;padding:6px!important;min-height:0!important;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:6px!important}
 .site :is(.footer-grid p,.footer-grid a,.hero-benefits span,.plan-help a,.service-card button){font-size:11px!important;line-height:1.5!important}
 #packages .kp-badge{position:absolute;top:-15px;left:24px;border-radius:999px;background:linear-gradient(90deg,var(--kp-blue),var(--kp-violet));color:#fff;font-weight:700;text-transform:capitalize!important;letter-spacing:0!important}
 #faq .kf-sub{margin:12px 0 0!important;font-size:12px!important;line-height:1.55!important;color:var(--kf-mute)}
}
@media (max-width:760px){
 #services.ks #ks-heading,#faq #faq-heading{font-size:16px!important;line-height:1.2!important}
}
/* Phones: small gap between the FAQ list and the footer */
@media (max-width:760px){.site #faq.site-faq{padding-bottom:16px!important;margin-bottom:0!important}}
/* Phones: tighter gaps in the plans block and the footer */
@media (max-width:760px){
 .site #packages.kp{gap:12px!important;margin-top:16px!important;margin-bottom:12px!important}
 .site #packages .kp-help{margin-top:0!important}
 .site #about.reference-values{padding-top:12px!important}
 .site #contact .footer-grid{padding-bottom:4px!important}
 .site #contact .footer-links:last-child{min-height:0!important}
 .site #contact .kade-contact-strip{margin-top:8px!important;margin-bottom:12px!important}
}
/* Phones: requested sizes for answers, card text, buttons and the header */
@media (max-width:760px){
 #faq .faq-grid details p{font-size:11px!important;line-height:1.5!important}
 .site :is(.hero-description,.service-card p,.plan li,.values p,.loyalty-copy p,.hotspot-copy p,.legal-reading p,.legal-reading li,.news-article-body p,.news-article-body li,.site-faq details p){font-size:11px!important;line-height:1.65!important}
 #faq.site-faq .faq-grid details p{line-height:1.5!important}
 #services.ks .ks-card p{font-size:11px!important;line-height:1.45!important;margin-top:4px!important}
 #services.ks .ks-card button,#packages .kp-cta,#packages .kp-help a,#services.ks .ks-loy-btn,.site .ks-cities button{font-size:12px!important}
 html body #contact-form .contact-details h2{font-size:12px!important}
 .site #about.reference-values .values-grid p{font-size:11px!important;line-height:1.65!important}
 .site .site-faq .kf-head,.site .site-faq .faq-grid{width:auto!important}
 .site>header>nav{border-radius:9px!important}
 .site>header #main-navlinks{top:calc(100% + 8px)!important;border-radius:8px!important}
}
/* Phones: content edge, stats panel corners and plans heading */
@media (max-width:760px){
 .site .content{margin:0 1px!important}
 .site .stats.glow-panel{border-radius:9px!important}
 #packages .kp-intro h2{font-size:14px!important;line-height:1.2!important}
}
/* Phones: the hero photo sits under the text, so drop the sideways blue overlay and just fade its top edge into the blue */
@media (max-width:760px){
 .site .hero::after{background:none!important}
 .site .hero .hero-art::before{background:none!important}
 .site .hero .hero-art::after{background:linear-gradient(180deg,rgba(0,50,254,.55) 0,rgba(0,50,254,.12) 30%,rgba(0,50,254,0) 55%)!important}
}
/* Phones: one shared side gutter (13px) so every block's content lines up with the Services and Plans blocks */
@media (max-width:760px){
 .site #about.reference-values{width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:12px!important;padding-right:12px!important}
 .site #faq.site-faq{padding-left:13px!important;padding-right:13px!important}
 .site #contact .footer-grid{padding-left:13px!important;padding-right:13px!important}
 #contact .kade-contact-strip{margin-left:13px!important;margin-right:13px!important}
 #contact .copyright{padding-left:13px!important;padding-right:13px!important}
}
/* Touch screens: iPhone zooms the whole page into any text box smaller than 16px, which pushes the contact form off screen.
   Typing fields stay at 16px there (desktop keeps the smaller sizes). */
@media (hover:none) and (pointer:coarse){
 html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
 html body select,html body textarea,
 html body #contact-form #contact-message-form input,html body #contact-form #contact-message-form select,html body #contact-form #contact-message-form textarea,
 #services.ks #hotspots .location-field input,#kade-assistant .as-form input,#kade-assistant textarea{font-size:16px!important}
 #services.ks #hotspots .location-field input::placeholder{font-size:14px}
}

/* ===== Contact form on phones: bottom sheet ===== */
.cf-chips{display:none}
@media (max-width:700px){
 html body #contact-form{position:fixed!important;inset:auto 0 0 0!important;width:100%!important;max-width:none!important;height:auto!important;max-height:94dvh!important;margin:0!important;border-radius:24px 24px 0 0!important;overflow:hidden!important;display:none;flex-direction:column}
 html body #contact-form[open]{display:flex;animation:cf-sheet .32s cubic-bezier(.2,.9,.3,1.02)}
 @keyframes cf-sheet{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
 html body #contact-form::before{content:"";display:block;flex:none;width:40px;height:4px;margin:8px auto 0;border-radius:4px;background:rgba(12,31,79,.22);position:relative;z-index:6}
 html body #contact-form .contact-layout{display:flex!important;flex-direction:column!important;min-height:0!important;flex:1;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;grid-template-columns:none!important}
 html body #contact-form .contact-close{top:10px!important;right:10px!important;width:34px!important;height:34px!important;font-size:20px!important;background:rgba(255,255,255,.18)!important;color:#fff!important}
 /* Header: compact brand strip with three quick-contact buttons */
 html body #contact-form .contact-details{flex:none;padding:14px 16px 16px!important;gap:0!important;border-radius:0!important;min-height:0!important}
 html body #contact-form .contact-details::after{display:none!important}
 html body #contact-form .contact-details>img{width:96px!important;margin:0 0 10px!important}
 html body #contact-form .contact-details>.eyebrow{display:none!important}
 html body #contact-form .contact-details h2{font-size:18px!important;letter-spacing:-.01em}
 html body #contact-form .contact-details p#contact-description{margin:4px 0 12px!important;max-width:none;font-size:12px!important;line-height:1.5}
 html body #contact-form .cd-list{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
 html body #contact-form .cd-list li:nth-child(4){display:none}
 html body #contact-form .cd-list a{flex-direction:column!important;justify-content:center;text-align:center;gap:6px!important;padding:10px 4px!important;border-radius:14px!important;min-height:68px;transform:none!important}
 html body #contact-form .cd-list i{width:30px!important;height:30px!important;border-radius:10px!important;margin:0}
 html body #contact-form .cd-list i svg{width:16px!important;height:16px!important}
 html body #contact-form .cd-list span{display:block!important}
 html body #contact-form .cd-list small{display:none!important}
 html body #contact-form .cd-list b{display:block;font-size:11px!important;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
 html body #contact-form .cd-list li:nth-child(3) b{font-size:0!important}
 html body #contact-form .cd-list li:nth-child(3) b::after{content:"Email";font-size:11px}
 html body #contact-form .cd-list li:nth-child(1) b{font-size:0!important}
 html body #contact-form .cd-list li:nth-child(1) b::after{content:"Call";font-size:11px}
 html body #contact-form .cd-list li:nth-child(2) b{font-size:0!important}
 html body #contact-form .cd-list li:nth-child(2) b::after{content:"WhatsApp";font-size:11px}
 /* Form */
 html body #contact-form .contact-entry{flex:1;padding:16px 16px 0!important;border-radius:0!important;background:#fff}
 html body #contact-form #contact-message-form{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
 html body #contact-form .contact-name-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
 html body #contact-form #contact-message-form label{display:flex;flex-direction:column;gap:6px;font-size:12px!important;font-weight:700;color:#173052}
 html body #contact-form #contact-message-form input,html body #contact-form #contact-message-form textarea{height:46px!important;padding:0 14px!important;border:1.5px solid #dbe5f6!important;border-radius:12px!important;background:#f6f9ff!important}
 html body #contact-form #contact-message-form textarea{height:auto!important;min-height:96px!important;padding:12px 14px!important}
 html body #contact-form #contact-message-form input:focus,html body #contact-form #contact-message-form textarea:focus{outline:0;border-color:#0032fe!important;background:#fff!important;box-shadow:0 0 0 4px rgba(0,50,254,.1)}
 html body #contact-form #contact-message-form select{display:none!important}
 html body #contact-form .cf-chips{display:flex;flex-wrap:wrap;gap:8px}
 html body #contact-form .cf-chips button{height:36px;padding:0 14px;border:1.5px solid #dbe5f6;border-radius:999px;background:#fff;color:#173052;font-size:12px!important;font-weight:600;cursor:pointer}
 html body #contact-form .cf-chips button.on{background:#0032fe;border-color:#0032fe;color:#fff}
 html body #contact-form #contact-message-form small{font-size:11px!important;line-height:1.5}
 /* Sticky send button above the keyboard / home bar */
 html body #contact-form #contact-message-form>.button{position:sticky;bottom:0;z-index:3;width:100%;height:50px;margin:4px 0 0;border-radius:14px!important;font-size:14px!important;box-shadow:0 -10px 18px rgba(255,255,255,.95),0 8px 20px rgba(0,50,254,.28)}
 html body #contact-form .contact-entry::after{content:"";display:block;height:env(safe-area-inset-bottom,0px)}
 html body #contact-form #contact-success{padding:22px 4px 26px}
}
@media (max-width:700px){
 html body #contact-form .cd-list a.contact-chat-now,html body #contact-form .cd-list li:nth-child(2) a{flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;height:auto!important;min-height:68px!important;padding:10px 4px!important}
 html body #contact-form .cd-list li:nth-child(2) i{background:#1fb25a!important}
 html body #contact-form .cd-list li{min-width:0}
 html body #contact-form .cd-list span{text-align:center}
}

/* Phone chat sheets (assistant + live support): bottom sheet, keyboard-aware, no sideways overflow */
@media (max-width:760px){
 html body #kade-assistant.as-float,html body #kade-support{overflow:hidden;overscroll-behavior:contain}
 html body #kade-assistant.as-float{inset:auto 0 0 0!important;width:100%!important;max-width:100%!important;height:min(720px,calc(100dvh - 12px))!important}
 html body #kade-assistant .as-chat{border-radius:22px 22px 0 0!important;max-width:100%}
 html body #kade-assistant .as-form{padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:8px}
 html body #kade-assistant .as-form input{height:44px;font-size:16px!important;padding:0 16px}
 html body #kade-assistant .as-form button{width:44px;height:44px}
 html body #kade-support{inset:auto 0 0 0!important;width:100%!important;max-width:100%!important;max-height:calc(100dvh - 12px)!important;border-radius:22px 22px 0 0!important;border-left:0;border-right:0;border-bottom:0}
 html body #kade-support .support-shell{height:min(680px,calc(100dvh - 12px))!important;max-height:none!important}
 html body #kade-support .support-foot{padding-right:16px}
 html body #kade-support .support-notice{margin:10px 12px 0!important;transform:none!important;box-shadow:none;border-radius:14px}
 html body #kade-support .chat-tools{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:6px 12px;scrollbar-width:none}
 html body #kade-support .chat-tools::-webkit-scrollbar{display:none}
 html body #kade-support .chat-tools button{flex:none;min-height:32px;border-radius:999px;font-size:12px;padding:0 12px}
 html body #kade-support .support-compose{padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:8px;align-items:flex-end}
 html body #kade-support .support-compose textarea{font-size:16px!important;min-height:44px;max-height:110px;border-radius:22px;padding:11px 16px;resize:none}
 html body #kade-support .support-compose button{width:44px;height:44px;padding:0;border-radius:50%;justify-content:center;flex:none}
 html body #kade-support .support-compose button span{display:none}
 html body #kade-support .support-intro input{font-size:16px!important}
 body:has(#kade-support[open]) :is(#support-launch,.restored-whatsapp),body:has(#kade-assistant[open]) :is(#support-launch,.restored-whatsapp){display:none!important}
 html body #kade-support .support-foot{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
 /* keyboard open: sheet fills the visible area, so nothing is pushed off screen */
 html.kb-open body #kade-assistant.as-float,html.kb-open body #kade-support{top:var(--vvt,0)!important;bottom:auto!important;height:var(--vvh,100dvh)!important;max-height:none!important;border-radius:0!important}
 html.kb-open body #kade-assistant .as-chat,html.kb-open body #kade-support .support-shell{height:100%!important;border-radius:0!important}
 html.kb-open body #kade-assistant .as-chips,html.kb-open body #kade-support .support-foot,html.kb-open body #kade-assistant .as-note{display:none!important}
}