/* ZoSwitch — phone-only styles.
   Loaded with media="(max-width: 760px)", so computers and tablets never use this file.
   Desktop styles live in site.css. */

@media (max-width:600px){
  /* calmer spacing between sections */
  section div[style*="margin: 0 auto; padding: 1"],section div[style*="margin: 0px auto; padding: 1"]{padding-top:76px!important;padding-bottom:76px!important;padding-left:20px!important;padding-right:20px!important}
  .sv-in{padding:76px 20px!important;gap:40px}
  div[style*="margin-bottom: 64px"],div[style*="margin: 0 auto 64px"],div[style*="margin: 0 auto 56px"],div[style*="margin-bottom: 56px"]{margin-bottom:36px!important}
  /* hero */
  .up.d1 > span{font-size:11px!important;letter-spacing:.14em!important;line-height:1.6;flex-wrap:wrap;justify-content:center;text-align:center}
  .up.d1 > span > span[style*="width: 28px"]{display:none}
  h1.up{font-size:clamp(32px,9vw,40px)!important;line-height:1.08!important}
  h1.up:has(.words){font-size:min(32px,8.2vw)!important}
  h1.up .words{font-size:1em!important}
  /* buttons that stack: same full width */
  section div[style*="flex-wrap: wrap"] > .hwrap,section div[style*="flex-wrap: wrap"] > a.chatbtn,section div[style*="flex-wrap: wrap"] > a[style*="border-radius"]{width:100%;justify-content:center}
  .hwrap .hcta{width:100%;justify-content:center}
  .chatbtn{justify-content:center}
  /* four suppliers: readable phone diagram */
  .fs-dia{display:none!important}
  .fs-m{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px}
  .fs-m-l{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .fs-m-l span{padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.1);border-left:2px solid var(--c);background:#121214;font-size:13px;font-weight:500;color:#A1A1AA}
  .fs-m-ar{font-size:20px;color:#71717A}
  .fs-m-r{display:flex;align-items:center;gap:12px;padding:14px 22px;border-radius:14px;border:1px solid rgba(0,177,119,.45);background:linear-gradient(180deg,rgba(0,177,119,.1),#121214);box-shadow:0 20px 50px -30px #00b177}
  .fs-m-r span{display:flex;flex-direction:column;line-height:1.3}.fs-m-r b{font-size:16px;color:#F4F4F5}.fs-m-r small{font-size:12px;color:#00b177}
  /* outcomes: compact cards without the pictures */
  /* outcome animations: shown, but compact */
  .oc-vis{padding:8px 10px!important;border-radius:12px!important;display:flex!important;justify-content:center}
  .oc-vis > svg{width:100%!important;max-width:250px;height:auto!important}
  .card{padding:22px!important;gap:12px!important}
  /* services / who we help */
  .sv-q{padding:16px 16px 16px 44px;font-size:15px}.sv-qm{left:16px;top:10px;font-size:30px}
  .sv-vis{box-shadow:0 24px 60px -45px var(--c)}
  .sv-name{font-size:clamp(46px,13vw,60px)!important}
  .sv-res{padding:18px}
  /* FAQ topics and Zoho app tabs: one swipeable row */
  .fnav{flex-direction:row;overflow-x:auto;padding:6px;gap:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fnav::-webkit-scrollbar,.ztabs::-webkit-scrollbar{display:none}
  .fnav-t,.ftopic .fcount{display:none}
  .ftopic{width:auto;flex:0 0 auto;white-space:nowrap;min-height:42px;padding:10px 14px;font-size:14px}
  .ztabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .ztab{flex:0 0 auto;white-space:nowrap;min-height:42px}
  /* footer: links side by side */
  .fgrid{grid-template-columns:1fr 1fr!important;gap:36px 20px!important}
  .fgrid > :first-child,.fgrid > :nth-child(2){grid-column:1 / -1}
  footer div[style*="padding: 80px 32px 36px"]{padding:56px 20px 32px!important;gap:40px!important}
}
@media (max-width:600px){.ffoot{flex-direction:column;align-items:stretch!important}.ffoot > *,.ffoot-l{width:100%}.ffoot-l{flex-direction:column;align-items:stretch!important}.ffoot .chatbtn,.ffoot .fnext{width:100%;justify-content:center}}
@media (max-width:600px){
  /* icon cards: icon beside the title instead of above it */
  .card:has(> div:first-child[style*="height: 48px"]),.card:has(> div:first-child[style*="height: 52px"]){display:grid!important;grid-template-columns:auto 1fr;column-gap:14px!important;row-gap:10px!important;align-items:center}
  .card:has(> div:first-child[style*="height: 48px"]) > :not(:first-child):not(h3),.card:has(> div:first-child[style*="height: 52px"]) > :not(:first-child):not(h3){grid-column:1 / -1}
  .card > div:first-child[style*="height: 48px"],.card > div:first-child[style*="height: 52px"]{width:42px!important;height:42px!important}
  /* Zoho app list: slimmer rows */
  .card.zapp{padding:12px 14px!important;gap:14px!important}
  .zapp-ic{width:40px!important;height:40px!important}
}
@media (max-width:600px){
  /* grids with a wide minimum column: single column on phones */
  div[style*="repeat(auto-fit, minmax(3"],div[style*="repeat(auto-fit, minmax(2"]{grid-template-columns:1fr!important}
  div[style*="padding: 52px; display: grid"]{padding:28px 20px!important;gap:32px!important}
}
@media (max-width:600px){section div[style*="padding: 90px 32px 120px"]{padding:56px 20px 76px!important}.legal table{font-size:14px}}
@media (max-width:600px){.zlogo{margin:4px auto 0!important;width:140px!important;height:140px!important}.cf-ways,.cf-wrap{padding-left:20px!important;padding-right:20px!important}}
@media (max-width:760px){
  .mbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;display:flex;gap:8px;padding:8px;border-radius:18px;background:rgba(18,18,20,.92);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px -12px rgba(0,0,0,.7);transform:translateY(140%);transition:transform .45s cubic-bezier(.16,1,.3,1)}
  .mbar.show{transform:none}
  .mbar-book{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:12px;background:#F4F4F5;color:#0B0B0C!important;font-size:15px;font-weight:600}
  .mbar-chat{width:52px;min-height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid rgba(255,255,255,.16);position:relative}
  .mbar-chat .chatdot{position:absolute;top:9px;right:9px;width:7px;height:7px}
  body.has-mbar footer{padding-bottom:88px}
  /* keep the Zoho chat bubble above the bar */
  .zsiq_floatmain,.zsiq_float{bottom:92px!important}
}

/* =====================================================================
   Phone design system (all phones, up to 760px wide)
   One type scale, one spacing scale, one alignment rule for section headings.
   ===================================================================== */
@media (max-width:760px){
  /* ---- Type scale ---- */
  h1.up{font-size:clamp(30px,8.4vw,34px)!important;line-height:1.1!important;letter-spacing:-.035em!important}
  section h2[style*="clamp(32px"]{font-size:28px!important;line-height:1.15!important}
  .sv-name{font-size:clamp(38px,11vw,46px)!important;line-height:1.02!important}
  .sv-line{font-size:18px!important}
  .sv-intro{font-size:16px!important}
  .up.d3{font-size:17px!important;line-height:1.6!important}
  section p[style*="font-size: 17px"],section p[style*="font-size: 18px"],section p[style*="font-size: 19px"],section p[style*="font-size: 20px"]{font-size:16px!important;line-height:1.65!important}
  section p[style*="clamp(26px"]{font-size:21px!important;line-height:1.4!important}

  /* ---- Spacing ---- */
  section div[style*="padding: 72px 32px"]{padding:44px 20px 56px!important;gap:22px!important}
  section div[style*="padding: 56px 32px 72px"]{padding:40px 20px 52px!important;gap:22px!important}
  section div[style*="margin: 0 auto; padding: 1"]{padding-top:64px!important;padding-bottom:64px!important}
  .sv-in{padding:64px 20px!important;gap:36px!important}
  section [style*="gap: 72px"],section [style*="gap: 64px"],section [style*="gap: 56px"],section [style*="gap: 48px"]{gap:32px!important}
  .cf-wrap{gap:40px}

  /* ---- One alignment rule: section headings are centred on phones ---- */
  section div:has(> h2):not(.card):not(.cf-head):not(.fhead):not(.cf-done) > h2,
  section div:has(> h2):not(.card):not(.cf-head):not(.fhead):not(.cf-done) > p{text-align:center}
  section div:has(> h2):not(.card):not(.cf-head):not(.fhead):not(.cf-done) > span[style*="letter-spacing: 0.2em"],
  section div:has(> h2):not(.card):not(.cf-head):not(.fhead):not(.cf-done) > div.rv:has(> span[style*="letter-spacing: 0.2em"]){align-self:center;text-align:center}
  .sv-copy{align-items:center;text-align:center}
  .sv-line,.sv-intro{max-width:none}
  .sv-lbl{text-align:center}
  .sv-res{justify-content:center}
  /* eyebrow labels: no side lines on phones (they were only on one side for left-aligned headings) */
  span[style*="letter-spacing: 0.2em"] > span[style*="width: 28px"]{display:none}
  /* About "Why we exist": centre the label and story */
  .faqgrid > .rv:first-child:has(.zlogo){align-items:center;text-align:center}
}
@media (max-width:760px){
  /* About "Why we exist": story text centred under the logo */
  .faqgrid:has(.zlogo) > div:last-child p{text-align:center}
  /* single buttons under a section's text: full width, like every other stacked button */
  section div:has(> h2) > a.rv[style*="border-radius"],section div:has(> h2) > a[style*="border-radius"]:not(.sv-cta){display:flex!important;width:100%;justify-content:center}
}
@media (max-width:760px){
  /* every main button full width on phones */
  .up.d4{align-self:stretch;width:100%}
  .up.d4 > .hwrap,.up.d4 > .hwrap > .hcta{width:100%;justify-content:center}
  section a.btn[style*="display: inline-flex"]{display:flex!important;width:100%;justify-content:center}
}
@media (max-width:760px){
  .sv-note{text-align:left;font-size:14px}
  .sv-gl{text-align:center}
  .sv-mini{font-size:14px;padding:11px 12px}
  .hw4 .hw-line{min-height:0}
}
@media (max-width:760px){
  .sv-minis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sv-mini{flex-direction:column;align-items:flex-start;gap:8px;padding:12px;font-size:13.5px;line-height:1.35}
}
@media (max-width:760px){
  /* Services steps: compact on phones too */
  .sv-in{padding:48px 20px!important;gap:26px!important}
  .sv-top{gap:22px}
  .sv-name{font-size:clamp(34px,10vw,40px)!important}
  .sv-line{font-size:17px!important}
  .sv-q{padding:12px 14px 12px 40px;font-size:14.5px}.sv-qm{left:14px;top:7px;font-size:26px}
  .sv-qs{gap:8px}
  .sv-tile{padding:12px}
  .sv-res{padding:12px}
}
@media (max-width:760px){
  .lx-in{padding:52px 20px 56px}
  .ex-row summary{padding:14px;gap:12px}
  .ex-num{width:34px;height:34px;font-size:12px}
  .ex-t{flex-direction:column;gap:2px}
  .ex-t b{font-size:22px}
  .ex-t small{font-size:13.5px}
  .ex-ch{width:28px;height:28px}
  .ex-body{padding:2px 14px 18px;gap:20px}
  .ex-left,.ex-right{align-items:center;text-align:center}
  .ex-vis{max-width:300px}
  .ex-probs li,.ex-what li{text-align:left}
  .ex-what-d{grid-template-columns:1fr}
  .ex-gl{text-align:center}
  .sv-note{text-align:left}
}
@media (max-width:760px){
  .ex-res-g{grid-template-columns:1fr}
  .ex-res-i{text-align:left;padding:12px}
  .ex-tiles{grid-template-columns:1fr}
  .ex-tile{text-align:left}
}
@media (max-width:760px){.ex-body{grid-template-columns:minmax(0,1fr)!important}.ex-left,.ex-right,.ex-block,.ex-what li,.ex-tile{min-width:0}.ex-what li span,.ex-what li{overflow-wrap:anywhere}}
@media (max-width:760px){
  .in-grid{grid-template-columns:1fr;gap:10px}
  .in-card{padding:18px;text-align:left}
}
@media (max-width:760px){
  .st-nav{top:74px;margin:0 -20px 16px}
  .st-nav-in{max-width:100%;overflow-x:auto;scrollbar-width:none;border-radius:0;border-left:0;border-right:0}
  .st-nav-in::-webkit-scrollbar{display:none}
  .st-nav a{flex-shrink:0;padding:7px 12px;font-size:13.5px}
  .st-head{padding:16px;gap:12px}
  .st-num{width:36px;height:36px;font-size:12px}
  .st-ht h2{font-size:23px}
  .st-line{font-size:14.5px;min-width:0;flex-basis:100%}
  .st-cta{width:100%;justify-content:center}
  .st-body{grid-template-columns:minmax(0,1fr)!important;padding:16px;gap:20px}
  .st-c2{order:0}
  .st-vis{max-width:300px;margin:0 auto}
  .st-what3{grid-template-columns:1fr 1fr!important}
  .st-c2 .ex-tiles,.ex-what-d{grid-template-columns:1fr}
  .st-lbl,.ex-gl{text-align:left}
  .st-card,.st-card p,.st-card li{text-align:left}
}
@media (max-width:760px){.st-nav{top:8px}}
@media (max-width:760px){
  .st-ht,.st-ht h2,.st-ht .st-k{text-align:left!important;align-items:flex-start}
  .st-head{justify-content:flex-start}
  .st-nav{justify-content:flex-start}
  .st-nav-in{width:100%;justify-content:flex-start;padding-left:14px;padding-right:14px}
}
@media (max-width:760px){
  .ch-top-in{padding:56px 20px 4px}
  .ch-wrap .st-nav{top:8px;margin:0 0 -30px;justify-content:flex-start}
  .ch-in{padding:64px 20px 56px!important;gap:32px}
  .ch-l{align-items:flex-start;text-align:left}
  .ch-name{font-size:40px!important}
  .ch-line{font-size:18px!important}
  .ch-intro{font-size:15.5px}
  .ch-r{gap:32px}
  .ch-vis{max-width:320px}
  .ch-list,.ch-list[style]{grid-template-columns:1fr!important;gap:14px}
  .ch-group .ch-list{grid-template-columns:1fr 1fr!important}
  .ch-res{flex-direction:column;gap:10px}
  .ch-l .st-cta{width:100%;justify-content:center}
}
@media (max-width:760px){.ch-l p,.ch-l .ch-q{text-align:left!important}.ch-vis{margin:0 auto}}
@media (max-width:760px){
  .cs-in{padding:64px 20px 56px!important}
  .cs-name{font-size:40px!important}
  .cs-line{font-size:18px!important}
  .cs-vis{max-width:320px;margin:28px auto 32px}
  .cs-row{grid-template-columns:1fr;gap:28px}
  .cs-row p,.cs-row .cs-lbl,.cs-what .cs-lbl{text-align:left!important}
  .cs-act .st-cta{width:100%;justify-content:center}
  .cs-list,.cs-list[style]{grid-template-columns:1fr!important;gap:14px}
  .cs-list[style*="--cols:4"]:not(:has(small)){grid-template-columns:1fr 1fr!important}
}
@media (max-width:760px){.cs-vis{max-width:260px;margin:22px auto 26px}}
.hp-ind{margin-top:56px;padding-top:44px}
.hp-ind-h{font-size:24px}
.hp-ind-p{font-size:15px;margin-bottom:12px}
.hp-ind-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hp-it{padding:14px;gap:10px}
.hp-it-ic{width:34px;height:34px}
.hp-it-n{font-size:14px}
.hp-it-d{font-size:12px}
.hp-it-go{display:none}
.hp-ind-foot{flex-direction:column;font-size:14px}
.ix-intro-in{padding:64px 20px 24px}
.ix-intro-in h2,.ix-how-head h2{font-size:28px}
.ix-intro-in p{font-size:16px}
.ix-other{grid-template-columns:1fr;justify-items:center;text-align:center;padding:64px 20px;gap:18px}
.ix-other h2{font-size:26px}
.ix-other .st-cta{justify-self:stretch;justify-content:center}
.ix-how-in{padding:64px 20px}
.ix-how-head{margin-bottom:28px}
.ix-steps{grid-template-columns:1fr;gap:12px}
.ip-in{padding:64px 20px!important}
.ip-head{margin-bottom:28px}
.ip-head h2{font-size:28px}
.ip-head p{font-size:16px}
.ip-crumb{font-size:11px;gap:8px}
.ip-grid3,.ih-grid,.ih-grid3{grid-template-columns:1fr;gap:12px}
.ip-q,.ip-sv,.ip-res{padding:22px 20px}
.ip-q p{font-size:17px}
.ih-card{padding:20px}
.fq{padding:0 18px}
.fq summary{font-size:16px}
.ob-grid{grid-template-columns:1fr;gap:36px}
.ob-col a{font-size:17px}
.ob-arr{opacity:1;transform:none}
.ob-other{margin-top:40px}