/* v21 responsive overrides for the "marketing-a" page group: scoped to its pages, loaded after every other stylesheet. */
/* Pages and their scopes: About (main.mk.ab), Contact (section.contact-page), Services (main.mk-services),
   Service detail (main.mk-service), Pricing (main.mk-pricing), Case studies (main.mk-cases-page),
   Get a quote (main.mk-quote), Shop (main.uos-shop), Shop product (main.uos-shop-product).
   Text inside components scales with the component (container-type + cqi) or with the viewport (rem + vw);
   every clamp() max equals the previous desktop value, so 1200px and up look the same as before. */

/* ------------------------------------------------------------ shared: long words never push the page sideways */
:is(.mk.ab,.mk-services,.mk-service,.mk-pricing,.mk-cases-page,.mk-quote,.uos-shop,.uos-shop-product,.contact-page) :is(h1,h2,h3,h4,p,li,dt,dd,label,small,strong,em,span,a,td,th){overflow-wrap:anywhere}
:is(.mk.ab,.mk-services,.mk-service,.mk-pricing,.mk-cases-page) .mk-split>*,
:is(.mk-service) .mk-doc-layout>*,
:is(.mk-service,.mk-pricing) .mk-plans>*,
.mk-services .mk-steps-row>li,
.mk.ab .ab-values>li,
.mk.ab .ab-statements>*{min-width:0}

/* ------------------------------------------------------------ mk-* marketing pages (about, services, pricing, case studies) */
:is(.mk-services,.mk-service,.mk-pricing,.mk-cases-page) .mk-pagehead p{font-size:clamp(1rem,.95rem + .3vw,1.08rem)}
:is(.mk.ab,.mk-services,.mk-service,.mk-pricing,.mk-cases-page) .mk-intro{font-size:clamp(1rem,.96rem + .3vw,1.06rem)}
:is(.mk.ab,.mk-services,.mk-service,.mk-pricing,.mk-cases-page) .hm-btn{font-size:clamp(.9rem,.82rem + .45vw,.98rem);padding:8px clamp(16px,1rem + .5vw,22px);white-space:normal;text-align:center;line-height:1.25}
:is(.mk.ab,.mk-services,.mk-service,.mk-pricing,.mk-cases-page) .mk-head-row{min-width:0}

/* services: the four process steps */
.mk-services .mk-steps-row li{container-type:inline-size}
.mk-services .mk-steps-row h3{font-size:clamp(.94rem,min(6.8cqi,.86rem + .45vw),1.08rem)}
.mk-services .mk-steps-row p{font-size:clamp(.875rem,min(6.3cqi,.82rem + .3vw),1rem)}

/* services and service detail: the service list */
:is(.mk-services,.mk-service) .mk-list li{container-type:inline-size;min-width:0}
:is(.mk-services,.mk-service) .mk-list a strong{font-size:clamp(1rem,3.5cqi,1.12rem)}
:is(.mk-services,.mk-service) .mk-list a span{font-size:clamp(.9375rem,3.1cqi,1rem)}
:is(.mk-services,.mk-service) .mk-list a strong>i{flex:0 0 auto}

/* recent case studies rows on the services page */
.mk-services .mk-rows li{container-type:inline-size}
.mk-services .mk-rows a strong{font-size:clamp(1rem,2.8cqi,1.08rem)}
.mk-services .mk-rows a em{white-space:normal}

/* packages (service detail and pricing) */
:is(.mk-service,.mk-pricing) .mk-plan{container-type:inline-size;padding:clamp(16px,2.2vw,24px)}
:is(.mk-service,.mk-pricing) .mk-plan h3,:is(.mk-service,.mk-pricing) .mk-plan .mk-plan-name{font-size:clamp(1.1rem,7.7cqi,1.25rem)}
:is(.mk-service,.mk-pricing) .mk-plan .mk-price{font-size:clamp(1.5rem,11.7cqi,1.9rem)}
:is(.mk-service,.mk-pricing) .mk-plan .mk-price small{font-size:clamp(.8125rem,5.6cqi,.9rem)}
:is(.mk-service,.mk-pricing) .mk-plan p{font-size:clamp(.9375rem,6.2cqi,1rem)}
:is(.mk-service,.mk-pricing) .mk-plan ul{font-size:clamp(.875rem,5.9cqi,.95rem)}
:is(.mk-service,.mk-pricing) .mk-plan .hm-btn{font-size:clamp(.9rem,6.1cqi,.98rem)}
:is(.mk-service,.mk-pricing) .mk-plan-top{flex-wrap:wrap}

/* empty states (no services, no packages, no case studies yet) */
:is(.mk-services,.mk-pricing,.mk-cases-page) .mk-empty-block{container-type:inline-size}
:is(.mk-services,.mk-pricing,.mk-cases-page) .mk-empty-block h2{font-size:clamp(1.2rem,6cqi,1.35rem)}
:is(.mk-services,.mk-pricing,.mk-cases-page) .mk-empty-block p{font-size:clamp(.9375rem,4.5cqi,1rem)}

/* case study list */
.mk-cases-page .mk-cases li{container-type:inline-size}
.mk-cases-page .mk-cases-body strong{font-size:clamp(1.05rem,2.5cqi,1.2rem)}
.mk-cases-page .mk-cases-sum{font-size:clamp(.9375rem,2.2cqi,1rem)}

/* service detail: the consultation card */
.mk-service .mk-aside .uos-card{container-type:inline-size;min-width:0}
.mk-service .mk-aside h2{font-size:clamp(1.05rem,4.8cqi,1.15rem)}
.mk-service .mk-small{font-size:clamp(.875rem,3.8cqi,.92rem)}

/* ------------------------------------------------------------ about page */
.mk.ab .ab-values li{container-type:inline-size}
.mk.ab .ab-values h3{font-size:clamp(.94rem,min(6.6cqi,.86rem + .45vw),1.08rem);margin:clamp(12px,6.1cqi,16px) clamp(12px,6.8cqi,18px) 6px}
.mk.ab .ab-values p{font-size:clamp(.875rem,min(5.8cqi,.82rem + .3vw),.96rem);margin:0 clamp(12px,6.8cqi,18px) clamp(12px,6.8cqi,18px)}
.mk.ab .ab-statement,.mk.ab .ab-promise{container-type:inline-size;min-width:0}
.mk.ab .ab-list div{container-type:inline-size}
.mk.ab .ab-list dt,.mk.ab .ab-list dd{font-size:clamp(.9375rem,3.1cqi,1rem)}
.mk.ab .ab-commit li{min-width:0}
.mk.ab .ab-commit li span{font-size:clamp(.9375rem,.9rem + .2vw,1rem)}
.mk.ab .ab-short{font-size:clamp(.9375rem,.9rem + .2vw,1rem)}

/* ------------------------------------------------------------ contact page (legacy bootstrap markup) */
/* page head (the shared breadcrumb partial, scoped here to the contact page): the trail and the title sit on the same
   gutter as the content (the legacy 8px phone indents are dropped), and the trail text and the head's spacing scale
   with the screen instead of jumping at 420px; 1200px and up keep the desktop values */
main:has(>.contact-page) .bread-crumb .breadcrumb{margin-left:0;padding-top:38px}
main:has(>.contact-page) .bread-crumb h1{margin-left:0;margin-bottom:clamp(12px,-14px + 5.85vw,56px)}
main:has(>.contact-page) .bread-crumb .breadcrumb span{font-size:clamp(.875rem,.8rem + .35vw,1rem);margin-left:clamp(7px,6px + .35vw,10px)}
main:has(>.contact-page) .bread-crumb .breadcrumb-item:not(.p-0){padding-block:clamp(0px,-10.86px + 2.586vw,15px)}
main:has(>.contact-page) .bread-crumb .breadcrumb i{padding-block:clamp(5px,-5.86px + 2.586vw,20px)}
/* between 992px and 1340px the legacy 100px side padding pushed the content 70 to 100px right of the page title */
@media (min-width:992px){.contact-page{padding-left:0;padding-right:0}}
/* phones: the contact details keep the desktop layout (icon left, text right) instead of a centred stack */
.contact-page .office-hour{display:flex;text-align:start}
.contact-page .office-hour .icon i{margin-right:clamp(14px,1rem + .4vw,20px);padding-bottom:0;width:1.125em;text-align:center}
.contact-page .contact-heading p{font-size:clamp(.9375rem,.9rem + .25vw,1rem);max-width:62ch}
.contact-page .office-hour{min-width:0}
.contact-page .office-hour-text{min-width:0}
.contact-page .form-section{container-type:inline-size}
.contact-page .form-section .form-control{padding:clamp(11px,3cqi,15px) clamp(14px,5cqi,26px);margin-bottom:clamp(18px,5.6cqi,30px)}
.contact-page .form-section .form-label{font-size:clamp(.9375rem,3cqi,1rem)}
.contact-page .cheack-box .form-check-input{flex:0 0 auto}
.contact-page .cheack-box .form-check-label{min-width:0}
@media (max-width:639px){
  .contact-page .office-hour-text a{display:inline-block;padding:2px 0;min-height:24px}
  .contact-page .cheack-box .form-check-input{width:24px;height:24px;padding:0;margin-top:2px}
  .contact-page .form-btn .btn{min-height:44px}
}
@media (max-width:479px){
  .contact-page .form-section .col-6{width:100%}
  .contact-page .office-time .col-6{width:100%}
}

/* ------------------------------------------------------------ get a quote */
.mk-quote .uos-card{min-width:0}
.mk-quote .mk-quote-title{font-size:clamp(1.5rem,1.2rem + 1.1vw,1.75rem);margin:0 0 6px}
.mk-quote .mk-quote-h3{font-size:clamp(.9375rem,.9rem + .2vw,1rem)}
.mk-quote .uos-steps li{font-size:clamp(.9375rem,.9rem + .2vw,1rem)}
/* breathing space between the card intro and the first field label (verifier item) */
.mk-quote .uos-card>.mk-quote-title+p.uos-muted,.mk-service #inquiry>p.uos-muted{margin:0 0 clamp(12px,3cqi,18px)}

/* the inquiry form (get a quote and service detail): tap targets and wrapping */
:is(.mk-quote,.mk-service) .uos-form{min-width:0}
:is(.mk-quote,.mk-service) .uos-check{min-height:24px}
:is(.mk-quote,.mk-service) .uos-check>span{min-width:0}
:is(.mk-quote,.mk-service) .uos-check>span a{display:inline;padding:4px 0}
:is(.mk-quote,.mk-service) .uos-check input[type=checkbox],:is(.mk-quote,.mk-service) .uos-check input[type=radio]{width:20px;height:20px;margin-top:1px}
@media (max-width:639px){
  :is(.mk-quote,.mk-service) .uos-check input[type=checkbox],:is(.mk-quote,.mk-service) .uos-check input[type=radio]{width:24px;height:24px;margin-top:0}
  :is(.mk-quote,.mk-service) .uos-chip-row .uos-check{padding:2px 0}
  :is(.mk-quote,.mk-service) .uos-form .uos-btn{min-height:44px}
}

/* ------------------------------------------------------------ shop */
.uos-shop .uos-hero>div{min-width:0}
.uos-shop .uos-shop-filter{min-width:0}
.uos-shop .uos-shop-filter .uos-chip{min-height:32px}
.uos-shop .uos-grid-3>.uos-feature{container-type:inline-size;min-width:0}
.uos-shop .uos-feature h3{font-size:clamp(1rem,5.1cqi,1.125rem)}
@media (max-width:639px){
  .uos-shop .uos-shop-filter .uos-input{max-width:none!important;flex:1 1 100%}
}

/* ------------------------------------------------------------ shop product */
.uos-shop-product .uos-shop-title{font-size:clamp(1.5rem,1.2rem + 1.1vw,1.75rem);margin:0 0 6px}
.uos-shop-product .uos-stack>.uos-card{min-width:0}
.uos-shop-product .uos-kv dd{min-width:0}
.uos-shop-product .uos-btn-block{white-space:normal}
.uos-shop-product>.container>a.uos-link{display:inline-flex;align-items:center;gap:.35em;min-height:24px}
@media (max-width:639px){
  .uos-shop-product .uos-btn-block{min-height:44px}
}