/* MeshPros homepage: the live meshpros.com design (Figtree, #00a1f1, cream/mint/lavender tints), rebuilt in clean CSS. Kashif, 2026-10-07: "copy homepage as it is". */
@font-face{font-family:Figtree;src:url(/assets/fonts/figtree-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Figtree;src:url(/assets/fonts/figtree-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url(/assets/fonts/figtree-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Figtree;src:url(/assets/fonts/figtree-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Figtree;src:url(/assets/fonts/figtree-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  color-scheme:light;
  --ink:#090b0e;
  --text:#3d4c5e;
  --blue:#00a1f1;
  --blue-dark:#0088cc;
  --blue-soft:#4aa2f1;
  --peach:#ffdec7;
  --cream:#fcfbf9;  /* chalk, Kashif 2026-10-07; lightened from #faf9f6 on 2026-10-10 ("chalk color seems too dark") */
  --cream-line:#ebe8e1;
  --mint:rgba(211,255,236,.44);
  --lavender:rgba(229,227,255,.4);
  --sand:rgba(255,243,208,.32);
  --line:#e6e9ee;
  --control:#8c97a4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;color:var(--text);font-family:Figtree,Arial,sans-serif;font-size:16px;line-height:30px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img,svg{display:block}
img{max-width:100%;height:auto}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3,h4{color:var(--ink);font-weight:600}
h1{font-size:64px;line-height:70px;font-weight:700}
h2{font-size:44px;line-height:52px}
/* A heading that must wrap splits into even lines, never one word alone (Kashif 2026-10-10). The homepage hero keeps normal wrapping for its rotating word. */
h1,h2{text-wrap:balance}
.hero h1{text-wrap:wrap}
h3{font-size:24px;line-height:1.3}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.container{width:min(1140px,calc(100% - 50px));margin-inline:auto}
.icon{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.skip-link{position:fixed;top:-100px;left:16px;background:var(--ink);color:#fff;padding:12px 16px;border-radius:8px;z-index:100}
.skip-link:focus{top:12px}

/* Buttons (pill, as on the live site) */
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;border-radius:999px;border:1px solid var(--blue);background:var(--blue);color:#fff;font-weight:700;font-size:16px;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.button:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.button-peach{background:var(--peach);border-color:var(--peach);color:var(--ink)}
.button-peach:hover{background:#ffd0b0;border-color:#ffd0b0;color:var(--ink)}
/* Header call to action: the site's blue pill, sized for the 72px header (Kashif 2026-10-08: replaced the square grey-outlined box). */
.header-cta{min-height:44px;padding:0 20px;gap:8px;font-size:15px;box-shadow:0 6px 16px rgba(0,161,241,.25)}
.header-cta .icon{width:18px;height:18px;stroke-width:2.2;transition:transform .15s}
.header-cta:hover .icon{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.header-cta .icon{transition:none}}
.button .circle{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--ink)}
.button .circle .icon{width:16px;height:16px}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(9,11,14,.05)}
.header-inner{height:72px;display:flex;align-items:center;gap:40px}
.brand{display:block;width:180px;flex-shrink:0}
.brand img{width:100%}
.site-nav{display:flex;align-items:center;gap:32px;margin-left:auto;margin-right:auto;font-size:17px;font-weight:500;color:var(--ink)}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--blue)}
.header-actions{display:flex;align-items:center;gap:16px}
.nav-services{display:inline-flex;align-items:center;gap:6px;padding:0;background:none;border:0;font:inherit;color:inherit;cursor:pointer}
.nav-services .icon{width:16px;height:16px;stroke-width:2.2;transform:rotate(90deg);transition:transform .2s ease}
.nav-services[aria-expanded="true"] .icon{transform:rotate(-90deg)}
.nav-services:hover,.nav-services.is-current,.nav-services[aria-expanded="true"]{color:var(--blue)}
.mega{position:absolute;top:calc(100% + 8px);left:50%;z-index:30;width:min(880px,calc(100% - 50px));transform:translateX(-50%);overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(9,11,14,.12)}
.mega:not([hidden]){animation:mega-in .18s ease-out}
@keyframes mega-in{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translateX(-50%)}}
.mega-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;padding:28px 32px 20px}
.mega-title{position:relative;margin-bottom:8px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:13px;line-height:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.mega-title::after{content:"";position:absolute;left:0;bottom:-2px;width:40px;height:3px;border-radius:2px;background:var(--blue)} /* the site's section-label bar, sitting on the hairline */
.mega-link{display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:center;margin:0 -12px;padding:10px 12px;border-radius:12px}
.mega-link:hover,.mega-link:focus-visible{background:#f3f7fb}
.mega-icon{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#e6f5fe;color:var(--blue-dark);transition:background .15s,color .15s}
.mega-link:hover .mega-icon.mega-icon{background:var(--blue-dark);color:#fff}
.mega-icon .icon{width:20px;height:20px}
.mega-link b{font-size:15px;line-height:21px;font-weight:600;color:var(--ink)}
.mega-desc{font-size:14px;line-height:20px;color:var(--text)}
.mega .service-link{margin-top:0;font-size:15px}
.page-home .mega .service-link{color:var(--blue-dark)} /* the menu looks the same on every page; the homepage greys its own text links */
.mega-foot{display:flex;justify-content:space-between;gap:24px;padding:14px 32px;border-top:1px solid var(--line);background:#fbfcfd}
@media (prefers-reduced-motion:reduce){.mega:not([hidden]){animation:none}.nav-services .icon,.mega-icon{transition:none}}
.menu-toggle{display:none;width:44px;height:44px;background:#fff;border:0;padding:8px}
.menu-toggle span{display:block;height:3px;background:var(--ink);margin:6px 0}
.mobile-nav{padding:8px 0 20px;border-top:1px solid var(--line)}
.mobile-services summary{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:18px;font-weight:500;color:var(--ink);cursor:pointer;list-style:none}
.mobile-services summary::-webkit-details-marker{display:none}
.mobile-services summary .icon{width:18px;height:18px;transform:rotate(90deg);transition:transform .2s ease}
.mobile-services[open] summary .icon{transform:rotate(-90deg)}
.mobile-group{padding:16px 0 8px;border-bottom:1px solid var(--line)}
.mobile-nav .mega-link{display:grid;margin:0;padding:8px 0;border-bottom:0}
.mobile-nav .mobile-all{padding:8px 0 4px;border-bottom:0;font-size:15px;font-weight:700;color:var(--blue-dark)}
.mobile-nav a{display:block;padding:12px 0;font-size:18px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line)}

/* Hero */
.hero-band{position:relative;overflow:hidden}
.hero{display:grid;grid-template-columns:1.2fr 1fr;align-items:start;gap:24px;padding:72px 0} /* same space above and below the hero content (Kashif 2026-10-08) */
.hero-band .blob{position:absolute;right:-6%;top:-18%;width:46%;max-width:720px;height:auto;z-index:0;pointer-events:none;opacity:.45} /* softened (Kashif 2026-10-10: "top bg soften") */
.hero-copy{position:relative;z-index:2}
.eyebrow{display:flex;align-items:center;gap:8px;color:var(--blue);font-weight:600;font-size:18px;line-height:1.4}
.eyebrow-line{display:block;width:24px;height:3px;background:var(--blue);margin-bottom:8px}
.eyebrow img{width:24px;height:24px}
.hero h1{margin:16px 0 20px;max-width:11em}
.hero p{max-width:560px}
.hero-actions{display:flex;flex-wrap:wrap;gap:28px;margin-top:40px}
/* The screen's top edge lines up with the top of the text column (Kashif 2026-10-08); the 10% shift right only where the screen has room for it. */
.hero-art{position:relative;z-index:1;justify-self:end;width:100%;max-width:560px;display:grid;place-items:start center;transform:translateX(10%)}
@media (max-width:1299px){.hero-art{transform:none}}
.deco{position:absolute;pointer-events:none;z-index:1}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(6px,-6px) rotate(-6deg)}}
.deco-arrow{animation:bob 3.5s ease-in-out infinite}
.deco-star{animation:spin 40s linear infinite}
.deco-dot{animation:float 4s ease-in-out infinite}
.deco-dot2{animation:float 5s ease-in-out .8s infinite}
.rotator{display:block;position:relative;height:1.1em;height:1lh}
.rotator-word{position:absolute;left:0;top:0;white-space:nowrap;padding-bottom:.08em;background:linear-gradient(90deg,#00a1f1,#62c4f8);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;transform:translateY(45%);filter:blur(8px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1),filter .7s ease}
.rotator-word.is-current{opacity:1;transform:none;filter:none}
.rotator-word.is-leaving{opacity:0;transform:translateY(-45%);filter:blur(8px)}
@media (prefers-reduced-motion:reduce){.rotator-word{transition:none}}
@media (prefers-reduced-motion:reduce){.deco-arrow,.deco-star,.deco-dot,.deco-dot2{animation:none}}
/* Hero showcase: one large screen at a time, in step with the headline word (website, web app, AI chatbot).
   Replaced the three-screen collage, which looked cramped (Kashif 2026-10-07). Sized in em from the column width. */
.hero-show{position:relative;z-index:2;width:100%;container-type:inline-size}
.show-stage{position:relative;width:100%;aspect-ratio:50/40;font-size:10px;font-size:calc(100cqw / 50)}
/* Showcase motion: the outgoing screen slides out to the left as the next one slides in from the right, then its contents settle in order.
   --show-time is how long a screen stays; each label in the markup sets its own, site.js reads it, and the progress pill fills over it. */
.hero-show{--show-time:5s}
.show-view{position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateX(7%) scale(.95);filter:blur(6px)}
.show-view.is-active{opacity:1;visibility:visible;transform:none;filter:none;transition:opacity .7s ease .15s,transform .9s cubic-bezier(.22,1,.36,1) .15s,filter .7s ease .15s,visibility 0s}
.show-view.is-leaving{opacity:0;visibility:visible;transform:translateX(-7%) scale(.95);filter:blur(6px);transition:opacity .5s ease,transform .6s cubic-bezier(.55,0,.75,.2),filter .5s ease}
@keyframes show-rise{from{opacity:0;transform:translateY(.9em)}to{opacity:1;transform:none}}
@keyframes show-settle{from{transform:scale(1.07)}to{transform:none}}
.show-view.is-active .show-shot{animation:show-settle 1.6s cubic-bezier(.22,1,.36,1) .15s both}
.show-view.is-active :is(.show-bar em,.show-head,.show-tabs,.show-week,.show-rows li,.aiw-me,.aiw-avatar,.aiw-answer>*,.aiw-suggest){animation:show-rise .6s cubic-bezier(.22,1,.36,1) both}
.show-view.is-active .show-head{animation-delay:.3s}
.show-view.is-active .show-tabs{animation-delay:.38s}
.show-view.is-active .show-week{animation-delay:.46s}
.show-view.is-active .show-rows li:nth-child(1){animation-delay:.54s}
.show-view.is-active .show-rows li:nth-child(2){animation-delay:.62s}
.show-view.is-active .show-rows li:nth-child(3){animation-delay:.7s}
.show-view.is-active .show-rows li:nth-child(4){animation-delay:.78s}
.show-view.is-active .show-rows li:nth-child(5){animation-delay:.86s}
.show-view.is-active .show-bar em{animation-delay:.6s}
.show-view.is-active .aiw-me{animation-delay:.35s}
.show-view.is-active :is(.aiw-avatar,.aiw-answer>:nth-child(1)){animation-delay:.6s}
.show-view.is-active .aiw-answer>:nth-child(2){animation-delay:.72s}
.show-view.is-active .aiw-answer>:nth-child(3){animation-delay:.84s}
.show-view.is-active .aiw-suggest{animation-delay:.96s}
/* All three screens share one size: 48em by 40em, one radius, one border, one shadow. */
.show-browser,.show-app,.show-view .ai-window{width:48em;height:40em;max-width:none;flex:none}
.show-frame{background:#fff;border:1px solid var(--line);border-radius:1.8em;box-shadow:0 3em 6em rgba(9,11,14,.13),0 .8em 1.6em rgba(9,11,14,.05)}
.show-browser{display:flex;flex-direction:column;overflow:hidden}
.show-bar{display:flex;align-items:center;gap:.6em;padding:1em 1.4em;background:#f3f5f8;border-bottom:1px solid var(--line)}
.show-bar i{width:.9em;height:.9em;border-radius:50%;background:#d3dde6}
.show-bar span{margin-left:.8em;padding:.2em 1.2em;border-radius:999px;background:#fff;font-size:1.2em;line-height:1.6;color:var(--text)}
.show-bar em{display:inline-flex;align-items:center;gap:.35em;margin-left:auto;padding:.25em .9em;border-radius:999px;background:#e6f5fe;color:var(--blue-dark);font-style:normal;font-size:1.1em;line-height:1.5;font-weight:700}
.show-bar em .icon{width:1.1em;height:1.1em;stroke-width:2.6}
.show-shot{display:block;flex:1 1 0;min-height:0;width:100%;object-fit:cover;object-position:top}
.show-app{display:grid;grid-template-columns:6em 1fr;overflow:hidden}
.show-side{display:flex;flex-direction:column;align-items:center;gap:1em;padding:2em 0;background:#f7f8fc;border-right:1px solid var(--line)}
.show-side span{display:grid;place-items:center;width:3.4em;height:3.4em;border-radius:1em;color:#8c97a4}
.show-side span:first-child{margin-bottom:.6em;background:linear-gradient(135deg,#00a1f1,#62c4f8);color:#fff}
.show-side span.on{background:#e6f5fe;color:var(--blue)}
.show-side .icon{width:1.7em;height:1.7em}
.show-main{display:flex;flex-direction:column;min-height:0;padding:1.9em 2.6em 1.3em}
.show-head{display:flex;align-items:center;justify-content:space-between;gap:1em;font-size:1.8em;line-height:1.3;color:var(--ink)}
.show-head em{display:inline-flex;align-items:center;gap:.25em;padding:.3em .8em;border-radius:999px;background:var(--blue);color:#fff;font-style:normal;font-size:.65em;font-weight:700}
.show-head em .icon{width:1.1em;height:1.1em;stroke-width:2.4}
.show-tabs{display:flex;gap:.6em;margin:1em 0 .5em}
.show-tabs span{padding:.4em 1em;border-radius:999px;background:#f3f5f8;color:var(--text);font-size:1.15em;line-height:1.3;font-weight:600}
.show-tabs span.on{background:#e6f5fe;color:var(--blue-dark)}
.show-week{display:grid;grid-template-columns:repeat(5,1fr);gap:.6em;margin:.3em 0 .5em}
.show-week span{display:flex;flex-direction:column;align-items:center;gap:.4em;padding:.6em 0 .55em;border-radius:.9em;background:#f7f9fc;color:var(--text);font-size:1.1em;line-height:1.2;font-weight:600}
.show-week span.on{background:linear-gradient(135deg,#00a1f1,#4aa2f1);color:#fff;box-shadow:0 .4em 1em rgba(0,161,241,.25)}
.show-week i{width:.45em;height:.45em;border-radius:50%;background:var(--blue)}
.show-week span.on i{background:#fff}
.show-week i.off{background:transparent}
.show-rows{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.show-rows li{display:grid;grid-template-columns:2.6em 1fr auto;align-items:center;gap:1em;padding:.65em 0;border-bottom:1px solid var(--line);font-size:1.3em;line-height:1.3;color:var(--text)}
.show-rows li:last-child{border-bottom:0}
.show-rows b{display:block;font-weight:600;color:var(--ink)}
.show-av{display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:50%;background:linear-gradient(135deg,#00a1f1,#62c4f8);color:#fff;font-size:.85em;font-weight:700}
.show-av.v2{background:#8f8bd8}.show-av.v3{background:#4aa2f1}.show-av.v4{background:#62c4f8}
.show-rows em{padding:.3em .9em;border-radius:999px;background:#e6f5fe;color:var(--blue-dark);font-style:normal;font-size:.85em;font-weight:600;white-space:nowrap}
.show-rows em.wait{background:#f1f0ff;color:#5f58b8}
.show-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;margin-top:12px;font-size:14px;line-height:20px;font-weight:600;color:var(--text)}
.show-dots li{display:flex;align-items:center;gap:8px;transition:color .4s ease}
.show-dots i{position:relative;overflow:hidden;width:8px;height:8px;border-radius:999px;background:#d3dde6;transition:width .4s ease,background .4s ease}
.show-dots li.is-active{color:var(--blue-dark)}
.show-dots li.is-active i{width:28px;background:#cfe6f6}
.show-dots li.is-active i::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--blue);transform-origin:left;animation:show-fill var(--show-time) linear both}
@keyframes show-fill{from{transform:scaleX(0)}to{transform:none}}
/* AI chat window (Kashif 2026-10-07: "why phone only?"): one assistant on every channel, as wide as the other hero screens.
   Sized in em: the hero stage sets the em, the services stage sets 10px. Customer on the right in a bubble; the AI answers in plain text with its sources. */
.ai-window{width:48em;max-width:100%;border-radius:1.8em;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 3em 6em rgba(9,11,14,.13),0 .8em 1.6em rgba(9,11,14,.05);text-align:left}
.aiw-head{display:flex;align-items:center;gap:1em;padding:1.3em 1.6em;background:linear-gradient(90deg,#f2f9fe,#f5f3ff)}
.aiw-head .ai-orb{width:3.4em;height:3.4em}
.aiw-title{line-height:1.3}
.aiw-title b{display:block;font-size:1.4em;color:var(--ink)}
.aiw-title small{display:flex;align-items:center;gap:.45em;font-size:1.05em;color:var(--text)}
.aiw-title small i{width:.6em;height:.6em;border-radius:50%;background:var(--blue);box-shadow:0 0 0 .25em rgba(0,161,241,.18)}
.aiw-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em;margin:1.2em 1.6em 0;padding:.35em;border-radius:999px;background:#f3f5f8}
.aiw-tabs span{display:flex;align-items:center;justify-content:center;gap:.5em;padding:.55em .6em;border-radius:999px;font-size:1.15em;line-height:1.3;font-weight:600;color:var(--text);white-space:nowrap}
.aiw-tabs .on{background:#fff;color:var(--blue-dark);box-shadow:0 .2em .6em rgba(9,11,14,.08)}
.aiw-tabs .icon,.aiw-tabs img,.aiw-ig{flex-shrink:0;width:1.25em;height:1.25em}
.aiw-ig{position:relative;border-radius:.35em;background:radial-gradient(circle at 30% 110%,#ffdb73 0 18%,#fd5949 40%,#d6249f 62%,#285aeb 95%)}
.aiw-ig::after{content:'';position:absolute;inset:.3em;border:.12em solid #fff;border-radius:50%}
.aiw-body{display:flex;flex-direction:column;gap:1.2em;padding:1.6em 1.6em 1.3em}
.aiw-me{align-self:flex-end;max-width:75%;margin:0;padding:.7em 1.1em;border-radius:1.4em 1.4em .4em 1.4em;background:linear-gradient(135deg,#00a1f1,#4aa2f1);color:#fff;font-size:1.3em;line-height:1.45;box-shadow:0 .4em 1em rgba(0,161,241,.25)}
.aiw-ai{display:grid;grid-template-columns:2.8em 1fr;gap:1em;align-items:start}
.aiw-avatar{width:2.8em;height:2.8em}
.aiw-avatar .icon{width:1.4em;height:1.4em}
.aiw-answer{display:flex;flex-direction:column;align-items:flex-start;gap:.9em;min-width:0}
.aiw-answer>p:first-child{margin:0;font-size:1.3em;line-height:1.5;color:var(--ink)}
.aiw-card{display:flex;align-items:center;gap:.9em;width:100%;max-width:26em;padding:.8em .9em;border-radius:1.1em;background:#fff;border:1px solid #e3eefb;box-shadow:0 .2em .8em rgba(9,11,14,.05);font-size:1.1em;line-height:1.35;color:var(--text)}
.aiw-card-icon{display:grid;place-items:center;flex-shrink:0;width:2.6em;height:2.6em;border-radius:.8em;background:#e6f5fe;color:var(--blue)}
.aiw-card-icon .icon{width:1.3em;height:1.3em}
.aiw-card>span:nth-child(2){flex:1}
.aiw-card b{display:block;font-size:1.05em;color:var(--ink)}
.aiw-card em{padding:.4em 1em;border-radius:999px;background:var(--blue);color:#fff;font-style:normal;font-weight:700}
.aiw-sources{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;margin:0;font-size:1.05em;line-height:1.3;color:var(--text)}
.aiw-sources em{display:inline-flex;align-items:center;gap:.35em;padding:.3em .8em;border-radius:999px;background:#f1f0ff;color:#5f58b8;font-style:normal;font-weight:600}
.aiw-sources .icon{width:1.1em;height:1.1em}
.aiw-suggest{display:flex;flex-wrap:wrap;gap:.6em;margin:0 0 0 3.8em}
.aiw-suggest span{padding:.5em 1.1em;border-radius:999px;border:1px solid #9dd7f7;background:#fff;color:var(--blue-dark);font-size:1.15em;line-height:1.3;font-weight:600}
.aiw-input{display:flex;align-items:center;gap:.8em;margin:0 1.6em 1.6em;padding:.5em .5em .5em 1.2em;border-radius:999px;background:#f6f8fb;border:1px solid var(--line);font-size:1.2em;color:#7a8794}
.aiw-input>span:first-child{display:flex;align-items:center;gap:.5em;flex:1}
.aiw-input>span:first-child .icon{width:1.1em;height:1.1em;color:#8f8bd8}
.aiw-input .ai-send{width:2.4em;height:2.4em}
.svc-stage .ai-window{width:100%;max-width:48em;font-size:10px}
.show-view .ai-window{display:flex;flex-direction:column}
.show-view .aiw-input{margin-top:auto}
.ai-orb{position:relative;display:grid;place-items:center;flex-shrink:0;width:3em;height:3em;border-radius:50%;overflow:hidden;color:#fff;box-shadow:0 .4em 1em rgba(0,161,241,.35)}
.ai-orb::before{content:'';position:absolute;inset:0;background:conic-gradient(from 0deg,#00a1f1,#8f8bd8,#62c4f8,#00a1f1);animation:spin 6s linear infinite}
.ai-orb .icon{position:relative;width:1.6em;height:1.6em;stroke-width:2}
.ai-send{display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:50%;background:linear-gradient(135deg,#00a1f1,#8f8bd8);color:#fff}
.ai-send .icon{width:1.2em;height:1.2em;stroke-width:2.2}
@media (prefers-reduced-motion:reduce){.show-view,.show-view.is-active,.show-view.is-leaving,.show-dots li,.show-dots i{transition:none;filter:none}.show-view.is-active *,.show-dots li.is-active i::after,.ai-orb::before{animation:none!important}}

.deco-arrow{left:-80px;top:38%;width:111px}
.deco-star{left:-130px;bottom:14%;width:150px;opacity:.9}
.deco-dot{right:-30px;bottom:10%;width:34px}
.deco-dot2{right:24%;top:-6px;width:28px}

/* Tools strip */
/* The strip sits inside the page width like every other band, as one bar with the About bar's radius and shadow; the logos fade out at both ends instead of running off the screen (Kashif 2026-10-09). */
.tools-band{position:relative;z-index:1;padding-bottom:72px} /* inside .hero-band, so the hero glow runs on behind it instead of stopping in a hard line */
.tools{display:grid;grid-template-columns:210px minmax(0,1fr);background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 6px 20px rgba(60,50,30,.05)}
.tools-label{background:var(--blue);color:#fff;font-size:18px;font-weight:600;display:flex;align-items:center;padding:0 24px;min-height:100px}
.tools-track{overflow:hidden;background:#fff;-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.tools-list{display:flex;align-items:center;gap:0;width:max-content;animation:marquee 70s linear infinite}
.tools-list li{height:100px;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0 24px}
.tools-list img{max-width:none}
.tools-list .lockup{gap:7px;font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
.tools-track:hover .tools-list,.tools-track:focus-within .tools-list{animation-play-state:paused}
.tools-track:focus-visible{outline-offset:-3px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Reduced motion keeps one compact row; every logo remains reachable by touch or keyboard. */
@media (prefers-reduced-motion:reduce){
  .tools-list{animation:none;width:max-content;flex-wrap:nowrap}
  .tools-list li[aria-hidden="true"]{display:none}
  .tools-track{overflow-x:auto;overflow-y:hidden;scroll-behavior:auto;-webkit-mask-image:none;mask-image:none}
}

/* About */
.about-band{background:var(--cream);border-bottom:1px solid var(--cream-line)}
.about{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:center;padding:90px 0 48px}
.about-art img{width:100%;max-width:470px;margin:0 auto}
.about-band{padding-bottom:90px}
.about-bar{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:32px;column-gap:0;padding:20px 20px 20px 8px;background:#fff;border:1px solid var(--cream-line);border-radius:16px;box-shadow:0 6px 20px rgba(60,50,30,.05)}
.about-proof{display:grid}
.about-proof li{display:flex;align-items:baseline;justify-content:center;gap:10px;padding:6px 16px;border-left:1px solid var(--cream-line)}
.about-proof li:first-child{border-left:0}
/* Home strip: cell, gap, divider, gap, cell, gap; the three gaps share the space equally so the divider sits mid-gap. */
.about-bar .about-proof{grid-template-columns:auto 1fr auto 1fr auto 1fr;align-items:center}
.about-bar .about-proof li{border-left:0;padding:6px 0}
.about-bar .about-proof li:first-child{grid-area:1/1;padding-left:16px}
.about-bar .about-proof::before{content:"";grid-area:1/3;width:1px;height:32px;background:var(--cream-line)}
.about-bar .about-proof li:last-child{grid-area:1/5}
.about-proof strong{font-size:22px;line-height:1.2;color:var(--blue);font-weight:700;white-space:nowrap}
.about-proof span{font-size:15px;line-height:1.4;white-space:nowrap}
.section-label{display:inline-block;color:var(--blue);font-weight:600;font-size:19px;line-height:1.4;letter-spacing:.01em}
.section-label::before{content:'';display:block;width:48px;height:3px;border-radius:2px;background:var(--blue);margin-bottom:14px}
.about h2{font-size:37px;line-height:48px;margin:10px 0 20px;max-width:14em}
.about p strong{color:var(--ink);font-weight:600}
/* Homepage About: text beside four small cards (what we do best), no illustration. */
.about-cards{grid-template-columns:1fr 1fr;gap:56px}
.best{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.best li{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px;background:#fff;border:1px solid var(--cream-line);border-radius:16px;box-shadow:0 6px 20px rgba(60,50,30,.04);font-size:14px;line-height:22px;color:var(--text)}
.best li strong{display:block;font-size:16px;line-height:24px;color:var(--ink);font-weight:600;margin-top:4px}
.best li .best-icon{background:#e6f5fe;border-color:#e6f5fe}
.best-icon{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--cream-line);color:var(--blue)}
.best-icon .icon{width:22px;height:22px;stroke-width:1.75}

/* Services */
.services-band{padding:90px 0 80px}
.centered{text-align:center;margin:0 auto}
/* Only the intro line under a centred heading is capped for reading; the heading itself uses the full page width (Kashif 2026-10-10: the 780px cap pushed one word onto a second line on 59 headings). */
.centered>p{max-width:780px;margin-left:auto;margin-right:auto;text-wrap:pretty}
.centered .section-label::before{margin-inline:auto}
.centered h2{margin:10px 0 16px}
.services-band .centered>p{max-width:720px}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;align-items:stretch}
.service{display:flex;flex-direction:column;padding:36px 32px 32px;border-radius:16px;border:1px solid rgba(9,11,14,.07)}
.service img{width:72px;height:72px;object-fit:contain;margin-bottom:22px}
.service h3{font-size:24px;line-height:1.25;color:var(--ink);font-weight:600;margin-bottom:10px}
.service .for{font-size:16px;line-height:26px;margin-bottom:20px}
.ticks{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.ticks li{display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:24px;color:var(--ink)}
.ticks .icon{width:20px;height:20px;margin-top:2px;color:var(--blue);stroke-width:2.25}
.service .proof{font-size:14px;line-height:22px;padding-top:16px;border-top:1px solid rgba(9,11,14,.08);margin-bottom:20px}
.service-link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blue-dark)}
.service-link .icon{width:18px;height:18px;transition:transform .15s}
.service-link:hover .icon{transform:translateX(3px)}
.service-links{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.service-links .service-link{margin-top:0}
.care-strip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;margin-top:24px;padding:20px 24px;background:var(--cream);border:1px solid var(--cream-line);border-radius:16px}
.care-icon img{width:52px;height:52px;object-fit:contain}
.care-strip p{font-size:17px;line-height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1100px){.care-strip p{white-space:normal}}
.care-strip strong{color:var(--ink)}
.tint-mint{background:rgba(211,255,236,.2)}
.tint-lavender{background:rgba(229,227,255,.22)}
.tint-sand{background:rgba(255,243,208,.18)}

/* Why */
.why-band{background:var(--cream);overflow:clip;padding:90px 0 80px;border-top:1px solid var(--cream-line);border-bottom:1px solid var(--cream-line)}
/* Why: promise plus proof. Four promise cards, each with a drawn proof, replaced the stock illustration and four identical icon cards (Kashif 2026-10-08). */
.why{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;margin-top:40px}
.holds{display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.holds li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:start}
.holds h3{font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px;text-wrap:pretty}
.holds h3 em{font-style:normal;color:var(--blue-dark)}
.holds p{font-size:15px;line-height:24px}
.hold-art{position:relative;isolation:isolate;display:grid;place-items:stretch;min-width:0}
/* A soft lavender glow that fades into the chalk behind the card, not a boxed stage: the card then reads like the other white cards on the page (Kashif 2026-10-08: "more blended, coherent"). Both gradients reach zero before the edges, so there is no hard rectangle. */
.hold-art::before{content:'';position:absolute;inset:-48px -64px;z-index:-1;background:radial-gradient(ellipse closest-side at 50% 50%,rgba(214,210,255,1),rgba(214,210,255,.55) 60%,rgba(214,210,255,0) 100%),radial-gradient(circle closest-side at 72% 28%,rgba(0,161,241,.2),rgba(0,161,241,0))}
/* The card fills the stage whatever height the list beside it has: the rows share the spare height, so the stage is never a frame around empty space. */
.hold-art .mock-report{max-width:none;display:flex;flex-direction:column;border:1px solid var(--cream-line);border-radius:16px;box-shadow:0 6px 20px rgba(60,50,30,.05)}
.hold-art .report-rows{flex:1;display:flex;flex-direction:column}
.hold-art .report-head{padding:20px 24px}
.hold-art .report-head b{font-size:17px;line-height:22px}
.hold-art .report-rows li{flex:1;grid-template-columns:34px minmax(0,1fr) 36px;gap:16px;padding:12px 24px;font-size:14px;line-height:20px}
.hold-art .report-rows b{font-size:16px;line-height:22px}
.hold-art .report-rows li:last-child{border-bottom:0}
.hold-art .report-rows .chip-dot{width:34px;height:34px;font-size:14px;font-weight:700;color:var(--blue-dark)}
/* Each step ends in the icon of the promise it keeps, so the row is filled edge to edge and the card does not leave an empty strip down its right side. */
.step-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#e6f5fe;color:var(--blue)}
.step-ico .icon{width:18px;height:18px;stroke-width:1.75}

/* Quote form */
.reviews-band{padding:90px 0}
#reviews-title em{font-style:normal;color:var(--blue)}
.reviews-band{background:var(--cream);border-top:1px solid var(--cream-line);border-bottom:1px solid var(--cream-line)}
.reviews-list{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:24px;margin-top:88px;align-items:stretch}
.review-card.review-featured{border-color:#cfe6f6;border-top:4px solid var(--blue);box-shadow:0 16px 40px rgba(0,161,241,.10)}
.review-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 26px 64px;background:#fff;border:1px solid var(--cream-line);border-radius:24px;box-shadow:0 12px 32px rgba(60,50,30,.06);transition:transform .2s,box-shadow .2s}
.review-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(60,50,30,.1)}
.review-avatar{position:absolute;top:-36px;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#00a1f1,#62c4f8);color:#fff;font-size:20px;font-weight:700;letter-spacing:.03em;border:5px solid #fff;box-shadow:0 8px 20px rgba(0,161,241,.22)}
.review-mark{position:absolute;bottom:20px;right:24px;width:40px;height:40px;transform:rotate(180deg);color:var(--blue);fill:currentColor;stroke:none;opacity:.12}
.review-by{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.review-by strong{font-size:19px;line-height:26px;font-weight:700;color:var(--ink)}
.review-by span{font-size:14px;line-height:20px;color:var(--text)}
.review-by a{color:var(--blue-dark);font-weight:600}
.review-by a:hover{text-decoration:underline;text-underline-offset:3px}
.review-stars{display:flex;gap:4px;margin-bottom:18px}
.review-stars .icon{width:18px;height:18px;color:#f5a623;fill:currentColor;stroke:none}
/* Left-aligned like every other paragraph on the site; the card's header stays centred (Kashif 2026-10-08: justified, then centred quotes both looked wrong). */
.review-card blockquote{margin:0;max-width:none;font-size:16px;line-height:28px;color:#3d4c5e;text-align:left;hyphens:manual;text-wrap:pretty}
.review-avatar.has-photo{padding:0;overflow:hidden;background:#e6f5fe}
.review-avatar img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){.review-card{transition:none}.review-card:hover{transform:none}}
.quote-band{padding:90px 0}
.quote-stack{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.quote-copy h2{margin:10px 0 12px}
.email-line{text-align:center;font-size:15px}
.email-line a{color:var(--blue-dark);font-weight:600}
.enquiry-form{display:flex;flex-direction:column;gap:16px;padding:32px;background:#fff;border:1px solid var(--line);border-radius:12px;position:relative}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:15px;font-weight:600;color:var(--ink);line-height:1.5}
.optional{font-weight:400;color:var(--text)}
.field input,.field textarea,.rich-select-button{width:100%;min-height:50px;border:1px solid var(--control);background:#fff;color:var(--ink);border-radius:8px;padding:12px 16px;font-size:16px;line-height:1.5}
.field textarea{resize:vertical;min-height:190px}
.brief-field{position:relative}
.brief-input{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;clip-path:inset(50%)}
.brief-drop{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px dashed var(--control);border-radius:8px;background:#fbfcfd;cursor:pointer;font-weight:400!important;transition:border-color .15s,background .15s}
.brief-drop:hover,.brief-field.dragging .brief-drop{border-color:var(--blue);background:#f2f9fe}
.brief-input:focus-visible+.brief-chosen,.brief-field:focus-within .brief-drop{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.brief-icon{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:10px;background:#e6f5fe;color:var(--blue);transition:background .15s,color .15s}
.brief-icon .icon{width:20px;height:20px;stroke-width:2;transition:transform .15s}
.brief-drop *{cursor:pointer}
.brief-drop:hover .brief-icon,.brief-field.dragging .brief-icon{background:var(--blue);color:#fff}
.brief-drop:hover .brief-icon .icon,.brief-field.dragging .brief-icon .icon{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.brief-icon .icon{transition:none}}
.brief-drop strong{font-weight:600;color:var(--ink)}
.brief-drop small{display:block;font-size:13px;line-height:20px;color:var(--text)}
.brief-chosen{display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;font-size:14px;line-height:20px;color:var(--ink)}
.brief-chosen .icon{width:18px;height:18px;color:var(--blue)}
.brief-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brief-remove{border:0;background:none;color:var(--blue-dark);font-weight:600;font-size:14px;padding:0}
.field input::placeholder,.field textarea::placeholder{color:#7a8794;opacity:1}
.field input:focus-visible,.field textarea:focus-visible,.rich-select-button:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.form-note,.email-fallback{font-size:14px;line-height:1.6}
.email-fallback a{color:var(--blue);font-weight:600}
.submit-button{width:100%;justify-content:space-between}
.submit-button:disabled{opacity:.65;cursor:wait}
.honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.form-feedback{padding:12px 16px;border:1px solid currentColor;border-radius:8px;font-size:15px;line-height:1.5}
.form-feedback.error{background:#fff5f5;color:#8f2a2a}
.form-feedback.success{background:#eef8f1;color:#1d5c38}
.rich-select{position:relative}
.rich-select select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.rich-select-button{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}
.rich-select-button.placeholder{color:#7a8794}
.rich-select-button::after{content:'';width:8px;height:8px;border-right:2px solid var(--control);border-bottom:2px solid var(--control);transform:rotate(45deg);margin:0 4px 4px 0;flex-shrink:0}
.rich-select-button[aria-expanded=true]{border-color:var(--blue)}
.rich-select-list{position:absolute;z-index:5;top:calc(100% + 6px);left:0;right:0;margin:0;padding:6px;background:#fff;border:1px solid var(--control);border-radius:8px;max-height:360px;overflow:auto;box-shadow:0 12px 32px rgba(9,11,14,.08)}
.rich-select-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:6px;font-size:15px;line-height:1.5;cursor:pointer}
.option-icon{width:18px;height:18px;color:var(--blue);stroke-width:1.9}
.rich-select-button .option-label{flex:1}
.rich-select-button .option-icon{margin-right:-2px}
.rich-select-button.placeholder .option-icon{display:none}
.rich-select-list li[aria-selected=true]{color:var(--blue);font-weight:600}
.rich-select-list li.active,.rich-select-list li:hover{background:#f3f7fb}

/* Inner pages: page hero, bands, offers, tiles, steps, FAQ, plans, contact, work, CTA (design-system.md, section 8) */
.page-hero{background:var(--cream);border-bottom:1px solid var(--cream-line);padding:56px 0 64px}
.page-hero .centered{max-width:none}
.crumbs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;font-size:14px;line-height:22px;margin-bottom:20px}
.crumbs a{color:var(--blue-dark);font-weight:600}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--text)}
.crumb-sep{width:14px;height:14px;color:var(--control)}
.page-hero h1{font-size:52px;line-height:60px;margin-bottom:18px}
.page-hero h1 em{display:inline-block;font-style:normal;color:var(--blue)}
.page-hero p{font-size:18px;line-height:30px;max-width:720px;margin:0 auto}
.page-hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:32px}
.band{padding:80px 0}
.band-chalk{background:var(--cream);border-top:1px solid var(--cream-line);border-bottom:1px solid var(--cream-line)}
.band-chalk+.band-chalk{border-top:0}
/* A white band that continues the white band above it, so the last band before the chalk footer is white without doubling the gap. */
.band.band-continue{padding-top:0}
.section-head{margin-bottom:48px}
.section-head h2{margin:10px 0 0}
.section-head p{margin-top:14px}
.page-hero+.band-chalk{border-top:0}
.offer{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.offer-icon{width:72px;height:72px;object-fit:contain;margin-bottom:20px}
.offer h2{font-size:37px;line-height:48px;margin:10px 0 18px}
.offer-copy>p{margin-bottom:16px}
.offer-proof{display:flex;align-items:center;gap:10px;font-size:15px;line-height:24px;color:var(--ink);font-weight:600;padding-top:16px;border-top:1px solid var(--line)}
.band-chalk .offer-proof{border-top-color:var(--cream-line)}
.offer-proof .icon{width:20px;height:20px;color:var(--blue)}
.offer-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:28px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tiles.tiles-2{grid-template-columns:1fr 1fr;gap:16px}
.tile{display:flex;flex-direction:column;gap:8px;padding:28px 26px;background:#fff;border:1px solid var(--line);border-radius:16px}
.band-chalk .tile,.band-chalk .pair-card,.band-chalk .step,.band-chalk .faq details{border-color:var(--cream-line);box-shadow:0 6px 20px rgba(60,50,30,.04)}
.tiles-2 .tile{padding:22px 22px}
.tile h3{font-size:18px;line-height:1.35}
.tile p{font-size:15px;line-height:24px}
.round{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--blue);color:#fff;margin-bottom:6px;flex-shrink:0}
.round .icon{width:22px;height:22px}
.tiles-2 .round{width:42px;height:42px}
.tiles-2 .round .icon{width:20px;height:20px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pair-card{display:flex;flex-direction:column;gap:12px;padding:32px;background:#fff;border:1px solid var(--line);border-radius:16px}
.pair-card h3{font-size:22px}
.pair-card .service-link{margin-top:auto}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:none}
.step{position:relative;display:flex;flex-direction:column;gap:8px;padding:28px 24px;background:#fff;border:1px solid var(--line);border-radius:16px}
.step-number{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#e6f5fe;color:var(--blue-dark);font-weight:700;font-size:17px;margin-bottom:6px}
.step h3{font-size:18px;line-height:1.35}
.step p{font-size:15px;line-height:24px}
.faq{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font-size:18px;line-height:1.4;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue-dark)}
.faq-icon{width:22px;height:22px;color:var(--blue);transition:transform .2s}
.faq details[open] .faq-icon{transform:rotate(45deg)}
.faq details p{padding:0 24px 22px;font-size:16px;line-height:28px}
.cta-band{padding:80px 0}
/* After a white band the panel sits one band gap below it, not two. */
.band:not(.band-chalk)+.cta-band{padding-top:0}
.cta-panel{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;padding:40px 44px;background:var(--cream);border:1px solid var(--cream-line);border-top:4px solid var(--blue);border-radius:16px}
.cta-panel h2{font-size:32px;line-height:40px;margin-bottom:8px}
.cta-actions{display:flex;flex-direction:column;align-items:center;gap:14px}
.cta-email{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--blue-dark)}
.cta-email .icon{width:18px;height:18px}
.cta-email:hover{text-decoration:underline;text-underline-offset:3px}
.reviews-list.reviews-row-b{grid-template-columns:.85fr 1fr 1.45fr}
.case-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;min-height:360px;padding:48px 40px;background:#fff}
.case-brand>img{width:72%;max-width:360px;max-height:none}
.case-media.case-brand>img{aspect-ratio:auto}
.channel-list{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.channel-list li{display:flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;font-size:15px;font-weight:600;color:var(--ink)}
.case-brand .channel-list img,.channel-list .icon{width:22px;height:22px;max-height:22px;object-fit:contain;color:var(--blue)}
.work-strip h2{font-size:22px;line-height:1.3;margin:2px 0 4px}
.work-strip p{white-space:normal;font-size:16px;line-height:26px}
.strip-label{font-size:14px;font-weight:600;color:var(--blue-dark)}
.work-strip .button .icon{width:18px;height:18px}
.band .reviews-list{margin-top:88px}
.band .section-head+.reviews-list{margin-top:88px}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pair-card p{font-size:16px;line-height:26px}
.more-link{text-align:center;margin-top:48px}
.cta-chalk{background:#fff}
.button-line{background:#fff;color:var(--blue-dark);border-color:var(--blue)}
.button-line:hover{background:var(--blue);color:#fff}
/* Care plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plan{display:flex;flex-direction:column;padding:32px 28px;background:#fff;border:1px solid var(--cream-line);border-radius:16px;box-shadow:0 12px 32px rgba(60,50,30,.06)}
.plan.plan-featured{border-color:#cfe6f6;box-shadow:inset 0 4px 0 var(--blue),0 16px 40px rgba(0,161,241,.10)}
.plan h3{font-size:22px}
.plan-price{display:flex;align-items:baseline;gap:6px;margin:10px 0 6px;font-size:15px}
.plan-price strong{font-size:44px;line-height:1.1;color:var(--ink);font-weight:700}
.plan-for{font-size:15px;line-height:24px;min-height:48px;margin-bottom:18px}
.plan-rows{margin:0 0 24px;border-top:1px solid var(--line)}
.plan-rows div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:20px}
.plan-rows dt{color:var(--text)}
.plan-rows dd{margin:0;color:var(--ink);font-weight:600;text-align:right}
.plan-rows .is-off dt{color:#6b7886}
.plan-yes{width:20px;height:20px;color:var(--blue);stroke-width:2.25}
.plan-no{width:18px;height:18px;color:#a3adb8;stroke-width:2}
.plan .button{margin-top:auto;width:100%}
.care-notes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.care-notes p{display:flex;align-items:center;gap:14px;padding:18px 22px;background:#fff;border:1px solid var(--cream-line);border-radius:16px;font-size:15px;line-height:24px}
.care-notes .icon{color:var(--blue)}
.care-notes strong{color:var(--ink)}
.care-laravel{margin-top:0}
.care-laravel h2{font-size:22px;line-height:1.3;margin-bottom:4px}
.care-laravel p{white-space:normal;font-size:16px;line-height:26px}
/* About */
.about-page{padding:0}
.about-page p{margin-bottom:16px}
.about-page h2{margin-bottom:20px}
.founder{display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:center}
.founder-photo{width:100%;aspect-ratio:1;object-fit:cover;border-radius:24px;border:1px solid var(--cream-line);box-shadow:0 12px 32px rgba(60,50,30,.08)}
.founder h2{margin:10px 0 2px}
.founder-role{color:var(--blue-dark);font-weight:600;margin-bottom:16px}
.founder p{margin-bottom:14px}
.founder p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:3px}
.founder p a:hover{text-decoration-color:var(--blue-dark);background:rgba(0,161,241,.08)}
.founder-proof{grid-template-columns:repeat(3,1fr);margin-top:24px;padding:14px 0;background:#fff;border:1px solid var(--cream-line);border-radius:16px}
.founder-proof li{flex-direction:column;align-items:center;gap:0;text-align:center}
.founder-proof strong{font-size:20px}
.about-page h2 em,.section-head h2 em{font-style:normal;color:var(--blue)}
/* Contact */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.contact-card{display:flex;flex-direction:column;gap:10px;padding:32px;border:1px solid var(--line);border-radius:16px;background:#fff}
.contact-card h2{font-size:22px;line-height:1.3}
.contact-card p{font-size:15px;line-height:24px}
.contact-card .service-link{margin-top:auto;overflow-wrap:anywhere}
/* Portfolio case studies */
.case{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.case-flip .case-media{order:2}
.case-media{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 16px 40px rgba(9,11,14,.08);background:#fff}
.band-chalk .case-media{border-color:var(--cream-line)}
.case-media img{width:100%;aspect-ratio:1;max-height:560px;object-fit:cover;object-position:top}
.case-body h2{font-size:37px;line-height:48px;margin:10px 0 10px}
.case-lead{font-size:18px;line-height:28px;color:var(--ink);font-weight:500;margin-bottom:12px}
.case-body>p{margin-bottom:14px}
.case-body h3{font-size:18px;margin:20px 0 12px}
.case-body .ticks{margin-bottom:20px}
.case-body .ticks li{font-size:15px;line-height:23px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chips li{padding:4px 12px;border-radius:999px;background:#e6f5fe;color:var(--blue-dark);font-size:13px;line-height:20px;font-weight:600}
.case-links{display:flex;flex-wrap:wrap;gap:12px 28px}
.reviews-page .reviews-list{margin-top:48px}
.reviews-page .reviews-list+.reviews-list{margin-top:88px}

/* Services: picker and outcome panels (Kashif 2026-10-07: show what the client gets, catchy and modern) */
.page-hero:has(+.svc-picker-band){border-bottom:0;padding-bottom:16px}
.svc-picker-band{padding:24px 0 80px;background:var(--cream);border-bottom:1px solid var(--cream-line)}
.svc-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-pick{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;padding:28px 28px 24px;border-radius:24px;background:#fff;border:1px solid var(--cream-line);box-shadow:0 18px 44px rgba(60,50,30,.08);overflow:hidden;transition:transform .2s,box-shadow .2s}
.svc-pick::before{content:'';position:absolute;inset:auto -30% -60% auto;width:240px;height:240px;border-radius:50%;opacity:.9;z-index:0}
.pick-mint::before{background:radial-gradient(circle,rgba(211,255,236,.9),rgba(211,255,236,0) 70%)}
.pick-lavender::before{background:radial-gradient(circle,rgba(229,227,255,.95),rgba(229,227,255,0) 70%)}
.pick-sand::before{background:radial-gradient(circle,rgba(255,236,190,.8),rgba(255,243,208,0) 70%)}
.svc-pick>*{position:relative;z-index:1}
.svc-pick:hover{transform:translateY(-4px);box-shadow:0 24px 52px rgba(0,161,241,.14)}
.svc-num{position:absolute!important;top:22px;right:26px;font-size:44px;line-height:1;font-weight:700;color:transparent;-webkit-text-stroke:1.5px #9dd7f7}
.svc-pick img{width:56px;height:56px;object-fit:contain;margin-bottom:10px}
.svc-pick strong{font-size:21px;line-height:1.3;color:var(--ink);font-weight:600}
.svc-pick span{font-size:15px;line-height:24px}
.svc-pick em{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;font-style:normal;font-weight:700;font-size:15px;color:var(--blue-dark)}
.svc-pick em .icon{width:18px;height:18px;transition:transform .15s}
.svc-pick:hover em .icon{transform:translateX(4px)}
.svc{padding:88px 0}
.svc-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.svc-flip .svc-stage{order:2}
.svc-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-width:0;min-height:520px;padding:48px 40px;border-radius:32px;overflow:visible;isolation:isolate}
.svc-stage::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;border:1px solid var(--cream-line)}
.stage-mint::before,.pair-tint.stage-mint::before{background:radial-gradient(circle at 18% 20%,rgba(0,161,241,.14),transparent 45%),radial-gradient(circle at 85% 85%,rgba(211,255,236,1),transparent 55%),#f6fbf9}
.stage-lavender::before,.pair-tint.stage-lavender::before{background:radial-gradient(circle at 80% 18%,rgba(0,161,241,.13),transparent 45%),radial-gradient(circle at 15% 85%,rgba(229,227,255,1),transparent 55%),#f8f7ff}
.stage-sand::before{background:radial-gradient(circle at 20% 80%,rgba(0,161,241,.12),transparent 45%),radial-gradient(circle at 85% 15%,rgba(255,236,190,.9),transparent 55%),#fffcf3}
.band-chalk .svc-stage::before{border-color:#e4dfd3}
.mock-browser{width:100%;max-width:440px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 60px rgba(9,11,14,.14);transform:rotate(-2deg)}
.mock-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f3f5f8;border-bottom:1px solid var(--line)}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:#d3dde6}
.mock-bar span{margin-left:10px;padding:2px 12px;border-radius:999px;background:#fff;font-size:12px;line-height:20px;color:var(--text)}
.mock-browser img{width:100%;height:300px;object-fit:cover;object-position:top}
.float-chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;background:#fff;border-radius:999px;box-shadow:0 14px 34px rgba(9,11,14,.12);font-size:14px;line-height:20px;font-weight:600;color:var(--ink);white-space:nowrap;animation:float 6s ease-in-out infinite}
.chip-a{top:36px;right:-18px}
.chip-b{bottom:40px;left:-22px;animation-delay:1.5s}
/* Inside a panel stage the labels straddle its top and bottom edges, above and below the drawn screen, so they never cover it at any width (2026-10-10). */
.svc-stage>.chip-a{top:-20px}
.svc-stage>.chip-b{bottom:-20px}
.chip-dot{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff}
.chip-dot .icon{width:16px;height:16px;stroke-width:2}
.mock-app{display:grid;grid-template-columns:132px 1fr;width:100%;max-width:470px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 60px rgba(9,11,14,.14)}
.app-side{display:flex;flex-direction:column;gap:4px;padding:16px 12px;background:#f7f8fc;border-right:1px solid var(--line);font-size:13px;line-height:18px}
.app-side span{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;color:var(--text)}
.app-side span.on{background:#e6f5fe;color:var(--blue-dark);font-weight:600}
.app-side .icon{width:16px;height:16px}
.app-logo{width:34px;height:34px;justify-content:center;padding:0!important;margin-bottom:10px;border-radius:10px!important;background:var(--blue);color:#fff!important}
.app-main{padding:18px}
.app-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;font-size:14px;color:var(--ink)}
.app-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;background:var(--blue);color:#fff;font-size:12px;font-weight:600}
.app-btn .icon{width:14px;height:14px}
.app-rows li{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px;line-height:16px;color:var(--text)}
.app-rows li:last-child{border-bottom:0}
.app-rows b{display:block;font-size:13px;color:var(--ink);font-weight:600}
.av{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:11px;font-weight:700;color:#fff}
.av1{background:#00a1f1}.av2{background:#8f8bd8}.av3{background:#62c4f8}.av4{background:#4aa2f1}
.app-rows em{font-style:normal;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px}
.app-rows .ok{background:#e6f5fe;color:var(--blue-dark)}
.app-rows .wait{background:#f1f0ff;color:#5f58b8}
.svc-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.svc-built{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:14px;line-height:20px;font-weight:600}
.band-chalk .svc-built{border-color:var(--cream-line)}
.svc-built img{width:18px;height:18px}
.svc-logo{display:grid;place-items:center;flex-shrink:0;width:56px;height:56px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px rgba(9,11,14,.08)}
.band-chalk .svc-logo{border-color:var(--cream-line)}
.svc-logo img{width:36px;height:36px;object-fit:contain}
.svc-tag{display:inline-block;padding:6px 14px;border-radius:999px;background:#e6f5fe;color:var(--blue-dark);font-size:14px;font-weight:600;line-height:20px}
.svc-body h2{font-size:42px;line-height:50px;margin:16px 0 14px}
.svc-body h2 em{font-style:normal;color:var(--blue)}
.svc-lead{font-size:17px;line-height:28px;margin-bottom:24px}
.gets-title{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.gets{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:26px}
.gets li{display:flex;align-items:center;gap:12px;font-size:16px;line-height:24px;color:var(--ink);font-weight:500}
.gets .icon{flex-shrink:0;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--blue);color:#fff;stroke-width:3}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.pills li{padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;line-height:18px;font-weight:600;color:var(--text)}
.band-chalk .pills li{border-color:var(--cream-line)}
.mini-quote{display:flex;align-items:center;gap:14px;margin:0 0 26px;padding:14px 18px;border-radius:16px;background:var(--cream);border:1px solid var(--cream-line)}
.mini-quote img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.mini-quote .review-stars{margin-bottom:2px}
.mini-quote .review-stars .icon{width:14px;height:14px}
.mini-quote blockquote{margin:0;font-size:16px;line-height:22px;font-weight:600;color:var(--ink)}
.mini-quote figcaption{font-size:13px;line-height:18px}
.svc-proof{display:flex;align-items:center;gap:12px;margin-bottom:26px;font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.inline-link{color:var(--blue-dark);text-decoration:underline;text-underline-offset:3px}
.service .proof .inline-link{font-weight:600}
.svc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
@media (prefers-reduced-motion:reduce){.float-chip,.ai-orb::before{animation:none}.svc-pick{transition:none}}
.pair-tint{position:relative;isolation:isolate;display:grid;grid-template-columns:56px 1fr;column-gap:20px;align-content:start;padding:32px;border-radius:24px;border:0!important;box-shadow:none!important;background:none}
.pair-tint::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;border:1px solid #e4dfd3}
.pair-tint .round{grid-row:1/4;width:56px;height:56px;box-shadow:0 10px 24px rgba(0,161,241,.25)}
.pair-tint>*:not(.round){grid-column:2}
.pair-tint .service-link{margin-top:10px}

.float-chip b{display:block;font-size:14px;line-height:18px}
.float-chip small{display:block;font-size:12px;line-height:16px;font-weight:500;color:var(--text)}

/* Care report mock-up and plan lists */
.mock-report{width:100%;max-width:440px;border-radius:18px;background:#fff;box-shadow:0 30px 60px rgba(9,11,14,.14);overflow:hidden}
.report-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);font-size:12px;line-height:16px;color:var(--text)}
.report-head b{display:block;font-size:15px;line-height:20px;color:var(--ink)}
.report-head em{margin-left:auto;padding:4px 10px;border-radius:999px;background:#e6f5fe;color:var(--blue-dark);font-style:normal;font-size:12px;font-weight:700}
.report-logo{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#00a1f1,#62c4f8);color:#fff}
.report-logo .icon{width:20px;height:20px}
.report-rows li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--line);font-size:12px;line-height:17px;color:var(--text)}
.report-rows b{display:block;font-size:13.5px;line-height:19px;color:var(--ink);font-weight:600}
.report-rows .chip-dot{background:#e6f5fe;color:var(--blue)}
.report-rows i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff}
.report-rows i .icon{width:13px;height:13px;stroke-width:3}
.report-foot{display:flex;align-items:center;gap:8px;padding:14px 20px;background:#f7f9fc;font-size:12.5px;font-weight:600;color:var(--blue-dark)}
.report-foot .icon{width:16px;height:16px}
.plan-lead{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ink);margin:4px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.plan-list{display:flex;flex-direction:column;gap:11px;margin-bottom:28px}
.plan-list li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:22px;color:var(--ink)}
.plan-list .icon{flex-shrink:0;width:20px;height:20px;padding:3px;margin-top:1px;border-radius:50%;background:#e6f5fe;color:var(--blue);stroke-width:3}
.plan-featured .plan-list .icon{background:var(--blue);color:#fff}
.plan-price strong{letter-spacing:-.01em}

/* Pricing cards and compare table (Kashif 2026-10-07: cards to decide, one table for the detail) */
.price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.price-card{position:relative;display:flex;flex-direction:column;padding:36px 32px 32px;background:#fff;border:1px solid var(--cream-line);border-radius:24px;box-shadow:0 12px 32px rgba(60,50,30,.06)}
.price-card.is-featured{background:linear-gradient(180deg,#eaf6fe,#fff 55%);border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 24px 56px rgba(0,161,241,.18)}
.price-badge{position:absolute;top:37px;right:28px;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:linear-gradient(135deg,#00a1f1,#4aa2f1);color:#fff;font-size:12px;line-height:18px;font-weight:700;white-space:nowrap;box-shadow:0 6px 16px rgba(0,161,241,.3)}
.price-badge .icon{width:12px;height:12px;fill:#fff;stroke:none}
.price-card h3{font-size:22px;line-height:1.3}
.price-for{font-size:15px;line-height:24px;margin:6px 0 20px;min-height:48px}
.price-amount{display:flex;align-items:baseline;gap:6px;margin-bottom:22px;font-size:15px;color:var(--text)}
.price-amount strong{font-size:52px;line-height:1;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.price-card .button{width:100%}
.price-lead{margin:26px 0 14px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.price-list{display:flex;flex-direction:column;gap:12px}
.price-list li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:22px;color:var(--ink)}
.price-list .icon{flex-shrink:0;width:20px;height:20px;padding:3px;margin-top:1px;border-radius:50%;background:#e6f5fe;color:var(--blue);stroke-width:3}
.is-featured .price-list .icon{background:var(--blue);color:#fff}
.compare-tabs{display:none}
.compare-wrap{border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 12px 32px rgba(9,11,14,.05)}
.compare{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;line-height:22px}
.compare th,.compare td{padding:15px 20px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.compare tbody th[scope=row]{text-align:left;font-weight:400;color:var(--ink);width:40%}
.compare td{color:var(--ink);font-weight:600;width:20%}
.compare td .icon{margin:0 auto}
.compare thead th{position:sticky;top:72px;z-index:2;background:#fff;font-size:18px;font-weight:600;color:var(--ink);padding:20px;border-bottom:1px solid var(--line)}
.compare thead th:first-child{border-top-left-radius:20px}
.compare thead th:last-child{border-top-right-radius:20px}
.compare thead th span{display:block;font-size:13px;font-weight:500;color:var(--text)}
.compare .is-featured{background:#f2f9fe}
.compare thead th.is-featured{background:#e6f5fe;color:var(--blue-dark)}
.compare-group th{padding:22px 20px 10px;text-align:left;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--blue-dark);background:#fafbfc}
.compare tfoot td{border-bottom:0;padding:20px}
.compare tfoot .button{width:100%;min-height:46px;font-size:15px}
.compare tfoot td:first-child{border-bottom-left-radius:20px}
.compare tfoot td:last-child{border-bottom-right-radius:20px}
#compare .care-laravel{margin-top:40px}
.hours-note{display:flex;align-items:flex-start;gap:12px;max-width:880px;margin:40px auto 0;padding:16px 20px;border-radius:16px;background:#fff;border:1px solid #bfe3f8;font-size:15px;line-height:24px}
.hours-note .icon{flex-shrink:0;margin-top:1px;color:var(--blue)}
.hours-note strong{color:var(--ink)}
@media (max-width:1100px){
  .price-cards{grid-template-columns:1fr;max-width:560px;margin-inline:auto;gap:36px}
  .price-card.is-featured{transform:none}
  .price-for{min-height:0}
}
@media (max-width:760px){
  .compare-tabs{display:flex;gap:6px;padding:5px;margin-bottom:16px;border-radius:999px;background:#f3f7fb}
  .compare-tabs button{flex:1;min-height:42px;border:0;border-radius:999px;background:none;font-weight:600;font-size:15px;color:var(--text)}
  .compare-tabs button[aria-selected=true]{background:#fff;color:var(--blue-dark);box-shadow:0 2px 8px rgba(9,11,14,.08)}
  .compare thead{display:none}
  .compare th,.compare td{padding:13px 14px}
  .compare tbody th[scope=row]{width:auto}
  .compare td{width:42%;text-align:right}
  .compare td .icon{margin:0 0 0 auto}
  .compare[data-show="1"] td:not(:nth-child(2)),.compare[data-show="2"] td:not(:nth-child(3)),.compare[data-show="3"] td:not(:nth-child(4)){display:none}
  .compare[data-show="1"] tfoot td:first-child,.compare[data-show="2"] tfoot td:first-child,.compare[data-show="3"] tfoot td:first-child{display:none}
  .compare tfoot td{text-align:center}
  .compare .is-featured{background:none}
}

/* Long-form text (privacy policy) */
.page{max-width:760px;padding:64px 0 80px}
.page h2{font-size:24px;line-height:1.3;margin:32px 0 8px}
.page p,.page li{margin-bottom:16px}
.page ul{list-style:disc;padding-left:20px}
.page .updated{font-size:14px}

/* Footer */
/* Chalk, so it never matches the white band above it (Kashif 2026-10-08: "why contact and footer both white?"). */
.footer{padding:64px 0 0;background:var(--cream);border-top:4px solid var(--blue)}
.footer a:hover,.footer nav a:hover{color:var(--blue-dark)}
/* Four equal columns that share one top line and one bottom line: the last line of each column is pinned to the bottom. */
/* Columns hug their content and the free space is shared equally, so the gap between every pair of columns is the same. */
.footer-top{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:48px;padding-bottom:48px}
.footer-col{display:flex;flex-direction:column;min-width:0}
.footer .brand{width:180px;height:31px;margin-bottom:18px}
.footer-about p{max-width:232px;font-size:15px;line-height:26px;margin-bottom:18px}
.footer-reviews{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-size:15px;line-height:26px;font-weight:600;color:var(--ink)}
.footer-reviews .review-stars{margin:0;gap:2px}
.footer-reviews .review-stars .icon{width:15px;height:15px}
.footer-reviews>.icon{width:16px;height:16px;color:var(--blue);transition:transform .15s}
.footer-reviews:hover>.icon{transform:translateX(3px)}
.footer h3{font-size:17px;line-height:31px;font-weight:600;margin-bottom:18px}
.footer nav{display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:26px}
/* Contact rows: one style for all three ways to reach us, spread to the column's height like the link lists. */
.footer-ways{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.footer-ways a{display:flex;align-items:center;gap:14px}
.way-icon{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--cream-line);color:var(--blue);box-shadow:0 4px 12px rgba(60,50,30,.05);transition:border-color .15s}
.way-icon .icon{width:18px;height:18px}
.way-icon img{width:20px;height:20px}
/* WhatsApp's own glyph in its own green, so both platform tiles carry their real marks. */
.way-wa{width:20px;height:20px;background:#25d366;-webkit-mask:url(/assets/tech/whatsapp.svg) center/contain no-repeat;mask:url(/assets/tech/whatsapp.svg) center/contain no-repeat}
.way-text b{display:block;font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.way-text small{display:block;font-size:14px;line-height:20px;color:var(--text)}
.footer-ways a:hover .way-icon{border-color:var(--blue)}
.footer-ways a:hover b{color:var(--blue-dark)}
.footer-col nav{flex:1;justify-content:space-between}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--cream-line);padding:22px 0 28px;font-size:14px;line-height:22px}
.footer-bottom nav{display:flex;flex-direction:row;gap:24px;font-size:14px;line-height:22px}
.to-top{display:inline-flex;align-items:center;gap:6px}
.to-top .icon{width:14px;height:14px;transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){.footer-reviews>.icon,.way-icon{transition:none}}

/* Tablet */
@media (max-width:1100px){
  h1{font-size:50px;line-height:56px}
  h2{font-size:36px;line-height:44px}
  .site-nav{gap:24px;font-size:16px}
  .hero{gap:16px;padding:56px 0}
  .hero-band .blob{right:-10%;top:-12%;width:50%}
  .deco-arrow,.deco-star{display:none}
  .about{grid-template-columns:1fr 1.2fr;gap:36px;padding:70px 0 50px}
  .about-cards{grid-template-columns:1fr 1fr}
  .about h2{font-size:32px;line-height:42px}
  .about-proof li{flex-direction:column;align-items:center;gap:0;text-align:center}
  .services{grid-template-columns:1fr}
  .service{display:grid;grid-template-columns:72px 1fr;column-gap:24px}
  .service>*:not(img){grid-column:2}
  .service img{grid-row:1/3}
  .why{grid-template-columns:1fr 1fr;gap:40px}
  .hold-art .report-rows li{grid-template-columns:34px minmax(0,1fr)}
  .step-ico{display:none}
  .reviews-list{grid-template-columns:1fr;gap:64px;max-width:560px;margin-inline:auto}
  .footer-top{grid-template-columns:1fr 1fr;justify-content:normal;gap:40px 48px}
  .footer-about{order:-2}
  .footer-contact{order:-1}
  .page-hero h1{font-size:44px;line-height:52px}
  .offer{grid-template-columns:1fr;gap:40px}
  .offer h2{font-size:32px;line-height:42px}
  .steps{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .reviews-list.reviews-row-b{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .svc-grid{grid-template-columns:1fr;gap:48px}
  .svc-flip .svc-stage{order:0}
  .svc-stage{min-height:0;padding:56px 32px}
  .svc-body h2{font-size:36px;line-height:44px}
  .svc-picker{grid-template-columns:1fr}
  .svc-pick{display:grid;grid-template-columns:56px 1fr;column-gap:18px}
  .svc-pick img{grid-row:1/4;margin:0}
  .svc-pick em{grid-column:2;padding-top:6px}
  .plan-for{min-height:0}
  .founder{grid-template-columns:280px 1fr;gap:40px}
  .case{grid-template-columns:1fr;gap:36px}
  .case-flip .case-media{order:0}
  .contact-cards{grid-template-columns:1fr}
}
@media (max-width:850px){
  .site-nav{display:none}
  .menu-toggle{display:block}
  .header-actions .header-cta{display:none}
  .header-inner{height:64px}
  .header-actions{margin-left:auto}
  .hero{grid-template-columns:1fr;padding:48px 0}
  .hero-art{justify-self:center;max-width:460px;margin-top:24px}
  .hero-band .blob{display:none}
  .hero-art{transform:none;background:radial-gradient(circle at 60% 45%,rgba(255,228,236,.45),rgba(255,255,255,0) 62%)}
  .tools{grid-template-columns:1fr}
  .tools-label{min-height:64px;justify-content:center}
  .why{grid-template-columns:1fr;gap:40px}
  .hold-art{width:100%;max-width:560px;margin:0 auto}
  .about{grid-template-columns:1fr;padding:56px 0 40px}
  .about-art img{max-width:360px}
  .about-band{padding-bottom:56px}
  .about-bar{grid-template-columns:1fr;gap:16px;padding:16px}
  .about-bar .button{justify-self:start}

}
/* Phone */
@media (max-width:560px){
  .container{width:calc(100% - 32px)}
  h1{font-size:40px;line-height:46px}
  h2,.about h2{font-size:30px;line-height:38px}
  body{line-height:28px}
  .brand{width:170px}
  .hero{padding:40px 0}
  .hero h1{margin:12px 0 16px}
  .hero-actions{gap:14px;margin-top:28px}
  .hero-actions .button{width:100%}
  .hero-art{max-width:100%}
  .deco-dot,.deco-dot2{display:none}
  .best{grid-template-columns:1fr;gap:12px}
  .best li{display:grid;grid-template-columns:44px 1fr;gap:2px 14px;padding:16px 18px}
  .best li .best-icon{grid-row:1/3}
  .best li strong{margin-top:0}
  .holds{gap:22px}
  .holds h3{font-size:19px;line-height:25px}
  .hold-art{padding:20px 16px}
  .hold-art .report-head{padding:18px 20px}
  .hold-art .report-head b{font-size:15px;line-height:20px}
  .hold-art .report-rows li{grid-template-columns:30px minmax(0,1fr);gap:12px;padding:13px 20px;font-size:12px;line-height:17px}
  .hold-art .report-rows b{font-size:13.5px;line-height:19px}
  .hold-art .report-rows .chip-dot{width:30px;height:30px;font-size:13px}
  .about-bar .about-proof{grid-template-columns:1fr}
  .about-bar .about-proof::before{display:none}
  .about-bar .about-proof li,.about-bar .about-proof li:first-child,.about-bar .about-proof li:last-child{grid-area:auto;padding:12px 4px}
  .about-proof li{border-left:0;border-top:1px solid var(--cream-line);flex-direction:column;align-items:flex-start;gap:2px;padding:12px 4px;text-align:left}
  .about-proof span{white-space:normal}
  .about-proof li:first-child{border-top:0}
  .about-bar .button{width:100%}
  .services{margin-top:36px}
  .service{display:flex;padding:28px 22px}
  .care-strip{grid-template-columns:1fr;gap:14px;padding:20px}
  .care-strip .button{width:100%}
  .services-band,.why-band,.quote-band{padding:60px 0}
  .form-row{grid-template-columns:1fr}
  .reviews-band{padding:60px 0}
  .reviews-list{margin-top:72px}
    .review-card{padding:52px 22px 70px}
  .review-mark{width:34px;height:34px;bottom:18px;right:20px}
  .review-avatar{width:64px;height:64px;top:-32px;font-size:18px}
      .enquiry-form{padding:20px}
  .footer-top{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:36px 16px}
  .footer-about p{max-width:none}
  .footer-about,.footer-contact{grid-column:1/-1}
  .footer-col nav{justify-content:flex-start}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  .page-hero{padding:40px 0 48px}
  .page-hero h1{font-size:34px;line-height:42px}
  .page-hero p{font-size:17px;line-height:28px}
  .page-hero-actions .button{width:100%}
  .band,.cta-band{padding:60px 0}
  .section-head{margin-bottom:32px}
  .offer h2{font-size:30px;line-height:38px}
  .tiles,.tiles.tiles-2,.pair,.steps{grid-template-columns:1fr}
  .tile,.tiles-2 .tile,.pair-card,.step{padding:22px}
  .offer-actions .button{width:100%}
  .faq summary{padding:18px 18px;font-size:17px}
  .faq details p{padding:0 18px 18px}
  .cta-panel{grid-template-columns:1fr;gap:24px;padding:28px 22px}
  .cta-panel h2{font-size:26px;line-height:34px}
  .cta-actions .button{width:100%}
  .care-notes{grid-template-columns:1fr}
  .svc{padding:56px 0}
  .svc-stage{padding:40px 16px;border-radius:24px}
  .chip-a{right:8px;top:12px}
  .chip-b{left:8px;bottom:12px}
  .float-chip{font-size:12px;padding:6px 12px 6px 6px}
  .chip-dot{width:24px;height:24px}
  .mock-app{grid-template-columns:1fr}
  .app-side{display:none}
  .svc-stage .ai-window{font-size:8.5px}
  .svc-body h2{font-size:30px;line-height:38px}
  .gets{grid-template-columns:1fr}
  .svc-actions .button{width:100%}
  .svc-picker-band{padding:16px 0 56px}
  .care-laravel,.work-strip{grid-template-columns:1fr}
  .work-strip .button{width:100%}
  .founder{grid-template-columns:1fr;gap:28px}
  .founder-photo{max-width:280px}
  .founder-proof{grid-template-columns:1fr;padding:6px 16px}
  .founder-proof li{flex-direction:row;justify-content:space-between;border-left:0;border-top:1px solid var(--cream-line);padding:10px 4px}
  .founder-proof li:first-child{border-top:0}
  .case-body h2{font-size:30px;line-height:38px}
  .contact-card,.plan{padding:24px 22px}
  .more-link{margin-top:36px}
}

/* Homepage readability: keep the logo blue for fills and rules, use existing ink and text colours for small labels. */
.page-home .eyebrow,.page-home .section-label,.page-home .service-link,.page-home .inline-link,.page-home .email-line a,.page-home .email-fallback a,.page-home .review-by a{color:var(--text)}
.page-home .service-link .icon{color:var(--blue-dark)}
.page-home .site-nav a:hover,.page-home .site-nav a[aria-current],.page-home .nav-services:hover,.page-home .nav-services[aria-expanded="true"]{color:var(--text)}
.page-home .about-proof strong,.page-home #reviews-title em{color:var(--blue-dark)}
.page-home .rotator-word{background:none;color:var(--blue-dark)}

/* Clinic industry pages (includes/industry-page.php, pages/industries.php): gaps we fix, drawn practice site, systems strip, five-step journey, two-column point card. */
.mock-site{max-width:460px}
.ms-body{padding:18px 20px 20px}
.ms-nav{display:flex;align-items:center;gap:16px;font-size:12px;line-height:18px;color:var(--text)}
.ms-nav b{display:flex;align-items:center;gap:6px;margin-right:auto;font-size:14px;color:var(--ink)}
.ms-nav b .icon{width:18px;height:18px;color:var(--blue)}
.ms-hero{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:16px 0;padding:22px 22px 20px;border-radius:12px;background:linear-gradient(135deg,#e6f5fe,#f8f7ff)}
.ms-hero b{font-size:21px;line-height:27px;color:var(--ink)}
.ms-hero span{font-size:13px;line-height:19px;color:var(--text)}
.ms-hero em{margin-top:8px;padding:6px 14px;border-radius:999px;background:var(--blue);color:#fff;font-style:normal;font-size:12px;line-height:16px;font-weight:700}
.ms-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ms-cards li{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:13px;line-height:18px;font-weight:600;color:var(--ink)}
.ms-cards span{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#e6f5fe;color:var(--blue)}
.ms-cards .icon{width:16px;height:16px}
.systems{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px 24px;margin-top:56px;padding:24px 32px;background:var(--cream);border:1px solid var(--cream-line);border-radius:16px}
.systems-label{display:flex;align-items:center;gap:10px;font-size:16px;line-height:24px;font-weight:700;color:var(--ink)}
.systems-label .icon{width:22px;height:22px;color:var(--blue)}
.systems .chips{margin:0}
.systems .chips li{color:var(--ink)}
.systems-note{grid-column:1/-1;font-size:15px;line-height:24px}
.case-body h2 em{font-style:normal;color:var(--blue)}
.related .case-media img{aspect-ratio:16/11}
.related-list li{font-size:16px;line-height:26px;color:var(--text)}
.related-list strong{color:var(--ink)}
.point-card{display:grid;grid-template-columns:1fr 1fr;max-width:1000px;margin:0 auto;border:1px solid var(--cream-line);border-radius:16px;background:var(--cream);overflow:hidden}
.point-card li{display:flex;align-items:center;gap:16px;padding:20px 28px;border-bottom:1px solid var(--cream-line);font-size:16px;line-height:24px;font-weight:500;color:var(--ink)}
.point-card li:nth-child(odd){border-right:1px solid var(--cream-line)}
.point-card li:nth-last-child(-n+2){border-bottom:0}
.point-card .round{width:40px;height:40px;margin:0;background:#fff;color:var(--blue);border:1px solid var(--cream-line)}
.point-card .round .icon{width:20px;height:20px}
@media (max-width:850px){
  .point-card{grid-template-columns:1fr}
  .point-card li:nth-child(odd){border-right:0}
  .point-card li:nth-last-child(2){border-bottom:1px solid var(--cream-line)}
}
@media (max-width:760px){
  .systems{grid-template-columns:1fr;padding:22px}
}
@media (max-width:560px){
  .ms-body{padding:14px}
  .ms-nav span{display:none}
  .ms-hero b{font-size:18px;line-height:24px}
  .ms-cards li{padding:10px 8px;font-size:12px}
  .point-card li{padding:16px 18px}
}

/* Industry pages v2 (2026-10-10): one accent per industry from the existing stage tints, split hero, before and after rows, journey path, estimator, booking slots, overview tiles. */
.ind-mint{--acc-wash:rgba(211,255,236,.5);--acc-tile:#d3ffec;--acc:#f6fbf9;--acc-glow:rgba(211,255,236,1);--acc-line:#d6ecdf;--acc-soft:#ecf9f3}
.ind-lavender{--acc-wash:rgba(229,227,255,.5);--acc-tile:#e5e3ff;--acc:#f8f7ff;--acc-glow:rgba(229,227,255,1);--acc-line:#e0ddf6;--acc-soft:#f1f0ff}
.ind-sky{--acc-wash:rgba(217,239,252,.55);--acc-tile:#d9effc;--acc:#f3f9fe;--acc-glow:#d9effc;--acc-line:#cfe6f6;--acc-soft:#e9f6fe}
.ind-sand{--acc-wash:rgba(255,236,190,.4);--acc-tile:#ffeec5;--acc:#fffcf3;--acc-glow:rgba(255,236,190,.9);--acc-line:#efe4c6;--acc-soft:#fff6de}
/* Industry icon tiles (menu, hero badge, industries page) take the industry tint; the darker blue keeps the icon at 3:1 or better on every tint. */
.mega-link.ind-mint .mega-icon,.mega-link.ind-lavender .mega-icon,.mega-link.ind-sky .mega-icon,.mega-link.ind-sand .mega-icon,.ind .ind-badge .mega-icon,.ind-tile .mega-icon{background:var(--acc-tile);color:var(--blue-dark)}
.stage-acc::before{background:radial-gradient(circle at 85% 15%,rgba(0,161,241,.11),transparent 42%),radial-gradient(circle at 12% 88%,var(--acc-glow),transparent 55%),var(--acc)}
/* Hero, journey band and industry tiles: a softer wash than the panel stages (Kashif 2026-10-10: "can we make it subtle"). */
.ind-hero,.path-band,.ind-tile-art{background:radial-gradient(circle at 85% 15%,rgba(0,161,241,.05),transparent 40%),radial-gradient(circle at 10% 90%,var(--acc-wash),transparent 50%),linear-gradient(#fff,#fff)}
.stage-acc::before{border-color:var(--acc-line)}
.ind-hero{padding:56px 0 72px;border-bottom:1px solid var(--acc-line)}
.ind-hero-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:48px;align-items:center}
.ind-hero .crumbs{justify-content:flex-start;margin-bottom:24px}
.ind-badge{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;background:#fff;border:1px solid var(--acc-line);border-radius:999px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.ind-badge .mega-icon{width:32px;height:32px;border-radius:50%}
.ind-badge .mega-icon .icon{width:18px;height:18px}
.ind-hero h1{margin:18px 0 16px;font-size:48px;line-height:56px}
.ind-hero h1 em{display:inline-block;font-style:normal;color:var(--blue)} /* the blue phrase wraps as one piece, so no "&" is left alone on a line */
.ind-lead{font-size:18px;line-height:30px}
.ind-points{display:flex;flex-direction:column;gap:10px;margin:22px 0 30px}
.ind-points li{display:flex;align-items:center;gap:12px;font-size:16px;line-height:24px;font-weight:500;color:var(--ink)}
.ind-points .icon{flex-shrink:0;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--blue);color:#fff;stroke-width:3}
.ind-actions{display:flex;flex-wrap:wrap;gap:14px}
.ind-hero-art{position:relative;display:grid;place-items:center;min-width:0}
.ind-hero-art .mock-app,.ind-hero-art .ai-window{width:100%;max-width:520px}
.ind-hero-art .ai-window{font-size:10.5px}
.ind-hero-art .chip-a{top:-36px;right:-8px}
.ind-hero-art .chip-b{bottom:-48px;left:-8px}
.path-band{padding:88px 0;border-top:1px solid var(--acc-line);border-bottom:1px solid var(--acc-line)}
.shift ul{display:flex;flex-direction:column;gap:12px}
.shift-labels,.shift li{display:grid;grid-template-columns:1fr 44px 1.12fr;gap:16px}
.shift-labels{margin-bottom:12px;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.shift-labels span{padding:0 22px}
.shift li{align-items:stretch}
.shift-now,.shift-new{display:flex;align-items:center;gap:14px;padding:16px 22px;border-radius:14px;font-size:16px;line-height:25px}
.shift-now{background:#f5f6f8;color:var(--text)}
.shift-new{background:var(--acc-soft);border:1px solid var(--acc-line);color:var(--ink);font-weight:500}
.shift-now .icon,.shift-new .icon{flex-shrink:0;width:22px;height:22px;padding:4px;border-radius:50%;stroke-width:3}
.shift-now .icon{background:#fdecec;color:#d64545} /* red for the problem side only (Kashif 2026-10-10); icon 3.8:1 on its tile */
.shift-new .icon{background:var(--blue);color:#fff}
.shift-arrow{align-self:center;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--blue)}
.shift-arrow .icon{width:20px;height:20px}
.path{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.path::before{content:'';position:absolute;top:32px;left:10%;right:10%;border-top:2px dashed #9dd7f7}
.path li{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.path-icon{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff;border:1px solid var(--acc-line);box-shadow:0 10px 24px rgba(9,11,14,.07);color:var(--blue)}
.path-icon .icon{width:26px;height:26px}
.path-num{position:absolute;top:-4px;right:-6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;line-height:1;font-weight:700}
.path h3{font-size:18px;line-height:24px}
.path p{max-width:210px;margin:6px auto 0;font-size:15px;line-height:24px}
.estimator{width:100%;max-width:560px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 60px rgba(9,11,14,.12);overflow:hidden;text-align:left}
.est-head{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line);font-size:13px;line-height:18px;color:var(--text)}
.est-head b{display:block;font-size:16px;line-height:22px;color:var(--ink)}
.est-head em{margin-left:auto;padding:4px 10px;border-radius:999px;background:var(--acc-soft);border:1px solid var(--acc-line);color:var(--ink);font-style:normal;font-size:12px;line-height:16px;font-weight:700;white-space:nowrap}
.est-body{padding:4px 22px}
.est-group{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.est-group:last-child{border-bottom:0}
.est-legend{font-size:14px;line-height:20px;font-weight:700;color:var(--ink)}
.est-options,.est-currency{display:flex;flex-wrap:wrap;gap:6px}
.est-opt{position:relative}
.est-opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.est-opt span{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border:1px solid var(--control);border-radius:999px;background:#fff;font-size:14px;line-height:18px;font-weight:600;color:var(--text);cursor:pointer;transition:border-color .15s,background .15s}
.est-opt:hover span{border-color:var(--blue)}
.est-opt input:checked+span{border-color:var(--blue);background:#e6f5fe;color:var(--ink);box-shadow:inset 0 0 0 1px var(--blue)}
.est-opt input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.est-result{display:flex;flex-direction:column;gap:2px;margin:6px 22px 0;padding:14px 20px;border-radius:14px;background:var(--acc-soft);border:1px solid var(--acc-line)}
.est-label{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.est-price{font-size:32px;line-height:40px;font-weight:700;color:var(--ink)}
.est-unit{font-size:14px;line-height:20px;color:var(--text)}
.est-rates{margin:10px 22px 0}
.est-rates summary{display:inline-flex;align-items:center;gap:6px;padding:6px 0;font-size:15px;line-height:22px;font-weight:700;color:var(--blue-dark);cursor:pointer;list-style:none}
.est-rates summary::-webkit-details-marker{display:none}
.est-rates summary .icon{width:16px;height:16px;stroke-width:2.4;transition:transform .2s ease}
.est-rates[open] summary .icon{transform:rotate(90deg)}
.est-rate-fields{display:grid;grid-template-columns:auto 1fr 1fr;align-items:end;gap:12px;padding:8px 0 4px}
.est-field{display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:18px;font-weight:700;color:var(--ink)}
.est-field input{width:100%;height:40px;padding:0 12px;border:1px solid var(--control);border-radius:8px;font:inherit;font-size:15px;font-weight:500;color:var(--ink);background:#fff}
.est-field input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.est-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px 20px}
.est-note{font-size:13px;line-height:19px;color:var(--text)}
.est-mode{font-weight:700;color:var(--ink)}
.est-next{flex-shrink:0;min-height:44px;padding:0 20px;font-size:15px}
.est-next .icon{width:16px;height:16px}
.mock-slots{width:100%;max-width:420px;background:#fff;border-radius:18px;box-shadow:0 30px 60px rgba(9,11,14,.14);overflow:hidden}
.slots-body{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px}
.slots-service{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1px solid var(--line);border-radius:10px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.slots-service small{display:block;font-size:11px;line-height:14px;font-weight:600;color:var(--text)}
.slots-service .icon{width:16px;height:16px;transform:rotate(90deg);color:var(--text)}
.slots-label{font-size:12px;line-height:16px;font-weight:700;color:var(--text)}
.slots-days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.slots-days span,.slots-times span{display:grid;place-items:center;padding:8px 0;border-radius:10px;background:#f5f7fa;font-size:13px;line-height:16px;font-weight:600;color:var(--text)}
.slots-times{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.slots-days .on,.slots-times .on{background:var(--blue);color:#fff;box-shadow:0 6px 14px rgba(0,161,241,.25)}
.slots-button{display:grid;place-items:center;margin-top:6px;padding:11px;border-radius:999px;background:var(--blue);color:#fff;font-size:14px;font-weight:700}
.ind-tiles{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ind-tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.ind-tile:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(9,11,14,.08)}
.ind-tile-art{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;height:168px;padding:0 32px;border-bottom:1px solid var(--acc-line)}
.ind .svc-body h2 em,.path-band h2 em{display:inline-block}
.tile-chip{display:inline-flex;align-items:center;gap:10px;transform:translateX(-36px);padding:8px 16px 8px 8px;background:#fff;border-radius:999px;box-shadow:0 12px 28px rgba(9,11,14,.09);font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.tile-chip+.tile-chip{transform:translateX(36px)}
.ind-tile-body{display:flex;flex:1;flex-direction:column;gap:12px;padding:28px 32px 32px}
.ind-tile-body h3{display:flex;align-items:center;gap:12px;font-size:22px;line-height:28px}
.ind-tile-body p{font-size:16px;line-height:26px}
.ind-tile-body .ticks{margin:0}
.ind-tile-body .service-link{margin-top:auto}
.mega-help{display:flex;align-items:center;gap:10px;margin-left:auto;font-size:14px;line-height:20px;color:var(--text)}
@media (prefers-reduced-motion:reduce){.ind-tile{transition:none}.ind-tile:hover{transform:none}.est-opt span,.est-rates summary .icon{transition:none}}
@media (max-width:1100px){
  .ind-hero-grid{grid-template-columns:1fr;gap:48px}
  .ind-hero-art{justify-self:center;width:100%;max-width:560px}
  .ind-hero h1{font-size:44px;line-height:52px}
}
@media (max-width:850px){
  .path{grid-template-columns:1fr;gap:20px}
  .path::before{top:32px;bottom:32px;left:31px;right:auto;border-top:0;border-left:2px dashed #9dd7f7}
  .path li{flex-direction:row;align-items:flex-start;text-align:left;gap:20px}
  .path p{max-width:none;margin:4px 0 0}
  .path-icon{flex-shrink:0}
  .ind-tiles{grid-template-columns:1fr}
  .mega-foot{flex-wrap:wrap}
}
@media (max-width:760px){
  .shift-labels{display:none}
  .shift li{grid-template-columns:1fr;gap:8px}
  .shift-arrow{justify-self:center;width:36px;height:36px;transform:rotate(90deg)}
  .shift ul{gap:24px}
}
@media (max-width:560px){
  .ind-hero{padding:40px 0 56px}
  .ind-hero h1{font-size:34px;line-height:42px}
  .ind-hero-art .ai-window{font-size:8.5px}
  .ind-hero-art .chip-a{right:0}
  .ind-hero-art .chip-b{left:0}
  .ind-lead{font-size:17px;line-height:28px}
  .ind-actions .button{width:100%}
  .path-band{padding:60px 0}
  .est-body,.est-head,.est-foot{padding-left:16px;padding-right:16px}
  .est-result,.est-rates{margin-left:16px;margin-right:16px}
  .est-group{grid-template-columns:1fr;gap:8px}
  .est-rate-fields{grid-template-columns:1fr 1fr}
  .est-currency{grid-column:1/-1}
  .est-foot{flex-direction:column;align-items:stretch}
  .est-next{width:100%}
  .ind-tile-art{padding:0 24px}
  .tile-chip{transform:translateX(-16px)}
  .tile-chip+.tile-chip{transform:translateX(16px)}
  .ind-tile-body{padding:24px 22px 26px}
}