/* Phone layer (2026-10-03). Loaded last on every page. Everything in here sits inside a phone media query, so the
   approved desktop is untouched: this file only changes what a visitor on a phone sees. It follows the mobile audit
   (G1 to G12 site-wide, H1 to H8 home, N1 and N2, I1 to I4). m.js adds the behaviours that need script: the bottom
   booking bar, swipe-row dots, the sector rows on home, the tools fold in the calculator, the footer sitemap rows,
   and the "Read more" folds. */

@media (max-width:860px){
  /* ---- tokens: the muted grey one step darker so small text on tinted and glass backgrounds clears 4.5:1 ---- */
  :root{--muted:#58625A;--dim:#7E867B;--pad:16px}

  /* ---- G1, G2: the top bar. Wordmark left, menu at the far right at 44px; the call button moves to the bottom bar.
     The frosting is near-solid so page text never shows through the logo. ---- */
  .nbar{display:flex;gap:.6rem}
  .nbar .logo{margin-right:auto}
  .nright{margin-left:0;justify-self:auto}
  .nright .nbtn{display:none}
  .nmenu{width:44px;height:44px;margin:0;border-radius:13px}
  .nav::before{background:rgba(255,255,255,.93)}

  /* ---- G3, G4, N1: heroes sized to their content, 28px under the bar, headlines at 32px with eased tracking ---- */
  header.hero,header#top{min-height:0;padding-top:calc(64px + 1.25rem)}
  .herotext{padding-top:.5rem;gap:1rem;justify-items:start;text-align:left;max-width:none}
  .herotext .lede{text-align:left;max-width:none}
  h1,.ind .hero h1,.ct-htext h1,.in-htext h1,.mtext h1,.ah-hero h1,.ab-hero h1{font-size:2rem!important;line-height:1.1!important;letter-spacing:-.03em!important;text-wrap:balance;max-width:none}
  h2,.lleft h2,.in-bar h2,.ct-form>h2{font-size:1.7rem!important;line-height:1.14;letter-spacing:-.028em!important}
  h3{letter-spacing:-.02em}
  .crumb{margin-bottom:.6rem}
  .crumb a{display:inline-block;padding-block:.35rem}
  .hero .ticks{display:none}
  .hero .ctas,.lleft .ctas{display:grid;width:100%;gap:.25rem;justify-items:stretch;justify-content:stretch;margin-top:0}
  .hero .ctas .btn,.lleft .ctas .btn{justify-content:center;min-height:50px;font-size:.98rem}
  /* the second button becomes a text link under the first */
  .btn.glassb:not(.sm),.btn.lglass{background:none!important;border-color:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
  .btn.glassb:not(.sm){color:#1F4A31}
  .btn.lglass{color:#fff}
  /* except the home page's enquiry button, which stays a full button so the form is as easy to reach as the call */
  .hero .ctas .btn.glassb.enq{background:rgba(255,255,255,.55)!important;border:1.5px solid #1F4A31!important;text-decoration:none;margin-top:.45rem}
  .lleft .ctas .btn.lglass.enq{border:1.5px solid rgba(255,255,255,.85)!important;text-decoration:none;justify-content:center;padding-inline:1.1rem;margin-top:.45rem}
  .marq{padding-block:1.6rem 1.4rem}

  /* ---- G5: one alignment on phones. Headings and what sits under them share the left edge. ---- */
  .shead,.cpanel .shead{justify-items:start;text-align:left;margin-inline:0;max-width:none}
  .shead .lede,.cpanel .shead .lede{text-align:left;max-width:none;text-wrap:pretty}
  .fine{text-align:left;font-size:.82rem;line-height:1.5}
  .ah-whyhead,.mintro,.mcopy,.cd-copy,.thcopy,.ph-close,.pkclose>.wrap,.ab-purpose .wrap,.dn-tile,.dn-chead{justify-items:start;align-items:flex-start;text-align:left}
  .cdp .hero h1{font-size:1.85rem!important}
  .ah-whyhead .lede{text-align:left}
  .ai-step,.dn-reason,.ab-rules article{justify-items:start;align-items:flex-start;text-align:left}

  /* ---- G6: one swipe row. 84% cards, a 16px margin that survives snapping, the next card peeking on the right. ---- */
  .bento,.ptiles,.mbento,.mcards,.ah-reasons,.ai-svcs,.ph-pgrid,.ph-cards,.pkcols,#row-mkt,#row-ai,.dn-tiles{scroll-padding-inline:var(--pad);gap:.7rem}
  .tile,.ptile,.mtile,.mcard,.ah-reason,.ph-pcard,.dn-tile{scroll-snap-align:start}
  .tile{flex:0 0 84%;min-height:0;padding:1.2rem;gap:.45rem}
  .tile.photo,.tile.tall{min-height:0}
  .tile .big{font-size:2.5rem}
  .tile h3{margin-top:auto;max-width:none}
  .tile.tall{align-items:flex-start;text-align:left;justify-content:flex-start}
  .tile.tall h3,.tile.tall p{text-align:left;max-width:none}
  .gauge{width:132px;height:132px;margin:0 0 .3rem}
  .gauge .word{font-size:1.6rem}
  /* the photo tile: a heavier wash under the words, a shorter line, no button (the bottom bar has it) */
  .tile.photo{background-position:100% 50%}
  .tile.photo::before{background:linear-gradient(0deg,rgba(5,32,42,.86) 0%,rgba(5,32,42,.55) 48%,rgba(5,32,42,.1) 80%,rgba(5,32,42,0) 100%),linear-gradient(180deg,rgba(5,32,42,.5) 0%,rgba(5,32,42,0) 40%)}
  .tile.photo h3{font-size:1.1rem;max-width:20ch}
  .tile.photo .btn{display:none}
  .m-dots{display:flex;justify-content:center;gap:.4rem;margin-top:.85rem}
  .m-dots i{width:7px;height:7px;border-radius:99px;background:rgba(34,53,42,.25);transition:width .35s var(--ease),background .3s}
  .m-dots i.on{width:22px;background:#1F4A31}
  .cpanel .m-dots i{background:rgba(255,255,255,.4)}.cpanel .m-dots i.on{background:#fff}
  .m-count{display:block;text-align:center;margin-top:.5rem;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}

  /* ---- H2: sources behind a tap ---- */
  .m-src summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;font-size:.88rem;font-weight:600;color:#3F5C3B}
  .m-src summary::-webkit-details-marker{display:none}
  .m-src summary::after{content:"+";margin-left:.4rem}
  .m-src[open] summary::after{content:"\2212"}
  .m-src .fine{margin-top:.2rem}

  /* ---- H3: capabilities. Each card shows its title, line and measure; the eight services open as a list with the
     explainer under each name. Nothing moves on its own. ---- */
  section.silk .cap{align-items:flex-start;text-align:left;padding:1.5rem 1.2rem 1.3rem;gap:.5rem}
  section.silk .cap p{margin-inline:0}
  section.silk .cap .mt{justify-content:flex-start;margin-top:.1rem;padding-top:.2rem}
  .subs{display:none;margin-top:.6rem;padding-top:.2rem;border-top:0}
  .cap.m-open .subs{display:grid;grid-template-columns:1fr;gap:0;width:100%}
  .subs li{display:block}
  .subs li::before{display:none}
  .subs button{display:block;width:100%;min-height:44px;padding:.55rem 0 .6rem;border-radius:0;border-bottom:1px solid var(--line2);text-align:left;font-size:1rem;letter-spacing:-.015em;color:var(--ink);background:none!important}
  .subs button::after{content:attr(data-d);display:block;margin-top:.1rem;font:400 .86rem/1.4 var(--sans);letter-spacing:0;color:var(--muted)}
  .subs li:last-child button{border-bottom:0}
  .subcap{display:none}
  .m-more{appearance:none;border:0;background:none;padding:.4rem 0;min-height:44px;display:inline-flex;align-items:center;gap:.4rem;font:600 .92rem/1 var(--sans);color:#1F4A31;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .m-more::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
  .m-open>.m-more::after,.m-more[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-1px)}
  .cap .m-more{margin-top:.3rem}
  .ab-panel.ai .m-more,.kout .m-more,.t-build .m-more,.t-deploy .m-more{color:#C6E57C}

  /* ---- H4: process tiles, left-aligned and sized to their copy; the drawing keeps real room ---- */
  .ptile{flex:0 0 84%;height:auto;min-height:0;align-items:flex-start;text-align:left;padding:1.3rem 1.2rem 1.4rem;gap:.55rem}
  .ptile h3{white-space:normal}
  .ptile .pd{max-width:none;font-size:.92rem;line-height:1.5}
  .pmid{flex:0 0 auto;height:112px;justify-content:flex-start}
  .pgfx{max-width:230px;max-height:112px}
  .pg{justify-items:start;width:100%}
  .pg ul{justify-items:start;width:100%}
  .pg li{display:flex;align-items:flex-start;gap:.5rem;text-align:left;text-wrap:pretty}
  .pg li::before{display:block;margin:.5em 0 0;flex:none}
  .t-build .pg li::before,.t-deploy .pg li::before{opacity:.8}
  .pcta{display:none}

  /* ---- H5: clients as seven sector rows on the photo panel ---- */
  .m-sectors{list-style:none;margin:0;padding:0 var(--pad);display:grid;gap:.45rem}
  .m-sectors a{display:flex;align-items:center;justify-content:space-between;gap:.8rem;min-height:52px;padding:.7rem 1rem .7rem 1.1rem;border-radius:14px;color:#fff;text-decoration:none;
    background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.3);font:600 1rem/1.2 var(--display);letter-spacing:-.015em;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
  .m-sectors a:active{background:rgba(255,255,255,.26)}
  .m-sectors svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
  .m-rows .ctabs,.m-rows .carousel,.m-rows .cnav{display:none}
  .cpanel{padding-bottom:1.4rem}

  /* ---- H6: the calculator, lighter. Result first, two sliders under it, the tools behind a tap. ---- */
  .kcard{display:flex;flex-direction:column;gap:.5rem;padding:.5rem}
  .kout{order:-1;text-align:left;padding:1.4rem 1.2rem 1.2rem;gap:.7rem}
  .knum{justify-content:flex-start}
  .odo{font-size:2.6rem}
  .kbar{display:none!important}
  .kin{padding:.9rem .8rem .8rem;gap:1rem}
  .kslh label span{display:block;margin-left:0}
  .krng{height:40px}
  .krng::-webkit-slider-thumb{margin-top:-9px;width:30px;height:30px}
  .ktools{display:none}
  .kin.m-open .ktools{display:block}
  .kth{display:none}
  .kchips{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
  .kchip{justify-content:flex-start;min-height:46px;padding-inline:.7rem .9rem}
  .kscope{font-size:.85rem;align-items:flex-start}
  .kscope .ic{margin-top:.2rem}
  .khow{font-size:.84rem}
  .khow summary{display:inline-flex;align-items:center;min-height:44px}
  .btn.kbtn{min-height:50px}

  /* ---- H7: privacy ---- */
  .prob{gap:.85rem}
  .prob .ico{width:40px;height:40px}

  /* ---- G10, H8: the footer. One button, a text link, three tap-to-open rows, then the hills. ---- */
  .land{--S:84px}
  .lback{height:300px}
  .lfront{height:200px}
  .land .ltop{padding-top:1.9rem;gap:1.2rem}
  .lleft{gap:.55rem}
  .lleft .btn{padding:.8rem 1.1rem;font-size:.95rem}
  .lleft .btn.lglass{min-height:44px;justify-content:flex-start;padding-inline:0}
  .labout{margin-top:.6rem;padding-top:.8rem;gap:.35rem}
  .labout p{max-width:none}
  .labout a{display:inline-flex;align-items:center;min-height:44px;font-size:.95rem}
  .lmap{grid-template-columns:1fr;gap:0;padding-top:0;border-top:1px solid rgba(255,255,255,.22)}
  .lmap .lind{grid-row:auto}
  .lcol{border-bottom:1px solid rgba(255,255,255,.22)}
  .lcol h3{margin:0;min-height:50px;display:flex;align-items:center;justify-content:space-between;font-size:.98rem;font-weight:500;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .lcol h3::after{content:"";width:9px;height:9px;margin-right:.3rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease);opacity:.8}
  .lcol.open h3::after{transform:rotate(225deg) translateY(-1px)}
  .lcol ul{display:none;gap:0;padding:0 0 .6rem .2rem}
  .lcol.open ul{display:grid}
  .lmap a{display:flex;align-items:center;min-height:44px;font-size:.95rem;white-space:normal}
  .lmap h3{color:#fff}
  .land .lfoot{padding-block:.8rem 1rem;gap:.3rem}
  .lright{gap:.4rem}
  .lright a{width:44px;height:44px}
  .m-contact .lleft h2,.m-contact .lleft .lede,.m-contact .lleft .ctas{display:none}
  .m-contact .labout{margin-top:0;padding-top:0;border-top:0}

  /* ---- G12: one booking button that follows the thumb once the hero has gone ---- */
  .m-book{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;justify-content:center;padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.92);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 -1px 0 rgba(34,53,42,.08);
    transform:translateY(110%);transition:transform .35s var(--ease)}
  .m-book.show{transform:none}
  body.m-foot .m-book,body.navlock .m-book,.m-contact .m-book{transform:translateY(110%)}
  .m-book a{display:flex;align-items:center;justify-content:center;width:100%;max-width:520px;min-height:50px;border-radius:999px;background:#1F4A31;color:#fff;text-decoration:none;font:600 1rem/1 var(--sans)}
  .m-book a:active{background:#173D29}

  /* ---- G11, I1: folds. A clamped paragraph with a "Read more" under it. ---- */
  .m-clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .m-clamp.l3{-webkit-line-clamp:3}
  .m-clamp.l4{-webkit-line-clamp:4}
  .m-fold-hide{display:none!important}
  .m-fold.m-open .m-clamp{display:block;-webkit-line-clamp:none}
  .m-fold.m-open .m-fold-hide{display:block!important}
  .hero .lede+.m-more,.herotext .m-more{margin-top:-.5rem}

  /* ---- N2: the questions block. Five on phones, full-width question text, a smaller plus. ---- */
  .iq-acc{padding-inline:1rem}
  .iq-q{padding:.85rem 0;gap:.7rem;font-size:1rem}
  .iq-plus{width:34px;height:34px;padding:9px}
  .iq-a p{padding-right:0}
  .iq-split:not(.m-open) .iq-qa:nth-child(n+6){display:none}
  .iq-acc+.m-more,.iq-split .m-more{margin-top:.2rem}

  /* ---- I2 light: problem blocks lose their per-card drawings on phones; dental tiles fit their copy ---- */
  .thp #problem .thc>svg{display:none}
  .thp #problem .thc{min-height:0}
  .dn-tile{height:auto!important;min-height:0!important}
  .dn-tile .dn-gx{display:none}
  .dn-tb{min-height:44px}
  .ah-pc{padding:1rem 1rem 1.1rem}

  /* ---- I4 light: pharmacies' nested rows clip at the screen edge, not the panel ---- */
  .ph-cards{margin-inline:calc(-1*var(--pad));padding-inline:var(--pad)}

  /* ---- P1: About's two growth cards stack, each showing two points with the rest behind a tap ---- */
  .ab-duo{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;margin-inline:0!important;padding-inline:0!important;gap:.8rem}
  .ab-panel{flex:none!important;width:auto!important}
  .ab-items:not(.m-open) li:nth-child(n+3){display:none}

  /* ---- P3: the AI page's eight service cards as a list ---- */
  .ai-svcs{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;margin-inline:0!important;padding-inline:0!important;gap:.5rem}
  .ai-svcs>*{flex:none!important;width:auto!important}
  .ai-svcs:not(.m-open)>*:nth-child(n+5){display:none}

  /* ---- G7, G8: tap targets and small type ---- */
  .in-tab{min-height:44px}
  .cm-more,.ai-plink,.tlink,.in-more{min-height:44px;display:inline-flex;align-items:center}
  .ctab{min-height:44px}
  .kscope,.gkey,.pg>span,.khow summary,.in-meta,.in-when,.ai-eg,.ai-node,.thstamp{font-size:.82rem}
  .lmap h3,.klbl{font-size:.9rem}

  /* ---- G9: glass without blur on cards that sit on flat or gradient backgrounds. Same look, far cheaper. ---- */
  .cap,.kcard,.kchip,.ah-pc,.ah-col,.ah-reason,.iq-acc,.mtile.glassy,.mcard,.in-feature a,.ct-card,.ct-mail,.ab-panel,.ph-pcard,.pkrow,.cd-card,.dn-tile,.thc,.ai-svc,.cm-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  section.silk .cap{background:rgba(255,255,255,.9)}
  .kcard{background:rgba(255,255,255,.55)}
  /* looping drawings play once, then rest */
  .js .ah-ring,.js .ah-ripple,.js .ah-halo{animation-iteration-count:1}
}

/* bottom bar and sector rows exist in the markup on every width; they only show on phones */
@media (min-width:861px){
  .m-book,.m-sectors,.m-dots,.m-more,.m-count{display:none!important}
}