:root { --tp-navy:#0C2A20; --tp-navy-2:#14613A; --tp-blue:#1B7A4B; --blue:#1B7A4B; }
    [x-cloak] { display:none !important; }

    .tp-wrap { font-family:'DM Sans','Plus Jakarta Sans',sans-serif; background:#FBF7F0; min-height:100vh; }

    /* ── Breadcrumb (desktop) ── */
    .tp-crumbs { display:none; align-items:center; gap:8px; padding:14px 0 2px; font-size:12px; font-weight:700; color:#8A968F; }
    @media(min-width:1024px) { .tp-crumbs { display:flex; } }
    .tp-crumbs a { color:#5C6B63; text-decoration:none; transition:.15s ease; }
    .tp-crumbs a:hover { color:var(--tp-navy); }
    .tp-crumbs i { font-size:8px; color:#DCD5C7; }
    .tp-crumbs .crumb-cur { color:var(--tp-navy); font-weight:800; }

    /* ── Cards ── */
    /* ── Hero ── */
    .tp-topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 0 10px; position:relative; z-index:2; }
    @media(min-width:1024px) { .tp-topbar { display:none; } }
    .tp-icon-btn {
        width:38px; height:38px; border-radius:12px; background:#fff; border:1px solid #EAE3D7;
        display:flex; align-items:center; justify-content:center; color:var(--tp-navy);
        transition:.2s ease; cursor:pointer; box-shadow:0 2px 8px rgba(12,42,32,.06);
    }
    .tp-icon-btn:hover { background:#E7F2EB; }
    .tp-icon-btn.active-fav { color:#EF4444; background:#FEF2F2; border-color:#FEE2E2; }

    /* ── Hero band ──
       The copy owns the left of the band; the service photograph enters from
       the right and is masked away before it reaches the type, so the headline
       never has to sit on top of the picture. */
    .tp-container { width:100%; max-width:1520px; margin:0 auto; padding:0 24px; }
    @media(min-width:1280px) { .tp-container { padding:0 40px; } }

    .tp-hero { position:relative; isolation:isolate; overflow:hidden; background:var(--sg-bg); }
    .tp-hero-bg {
        position:absolute; inset:0; z-index:0; pointer-events:none;
        background:url('/images/tech-hero-bg.png') no-repeat;
        background-position:86% 46%;
        background-size:cover;
        /* Two-axis fade. The 90deg ramp clears the entire text column — the
           name, spec and breadcrumb all sit left of 332px, so the photograph
           only becomes opaque past that point and type never lands on it. The
           180deg ramp dissolves it into the page top and bottom so the photo
           never ends on a hard edge. Masks multiply, so the picture is opaque
           only where both axes allow it. */
        -webkit-mask-image:
            linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.7) 50%, rgba(0,0,0,1) 62%),
            linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 9%, rgba(0,0,0,1) 26%, rgba(0,0,0,1) 68%, rgba(0,0,0,.35) 90%, rgba(0,0,0,0) 100%);
        mask-image:
            linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.7) 50%, rgba(0,0,0,1) 62%),
            linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 9%, rgba(0,0,0,1) 26%, rgba(0,0,0,1) 68%, rgba(0,0,0,.35) 90%, rgba(0,0,0,0) 100%);
        -webkit-mask-composite:source-in;
        mask-composite:intersect;
        animation:tpBgIn 1.1s cubic-bezier(.22,.61,.36,1) both;
    }
    @keyframes tpBgIn { from { opacity:0; transform:scale(1.05); } to { opacity:1; transform:scale(1); } }
    @media(max-width:1023px) {
        .tp-hero-bg {
            background-position:72% 26%;
            opacity:.34;
            /* same two-axis fade, softened for the tighter canvas; the 90deg
               ramp still clears the whole text column */
            -webkit-mask-image:
                linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.28) 46%, rgba(0,0,0,.72) 58%, rgba(0,0,0,1) 72%),
                linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 10%, rgba(0,0,0,1) 28%, rgba(0,0,0,1) 66%, rgba(0,0,0,.3) 90%, rgba(0,0,0,0) 100%);
            mask-image:
                linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.28) 46%, rgba(0,0,0,.72) 58%, rgba(0,0,0,1) 72%),
                linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 10%, rgba(0,0,0,1) 28%, rgba(0,0,0,1) 66%, rgba(0,0,0,.3) 90%, rgba(0,0,0,0) 100%);
            -webkit-mask-composite:source-in;
            mask-composite:intersect;
        }
        }
    }
    @media (prefers-reduced-motion: reduce) { .tp-hero-bg { animation:none; } }

    .tp-hero-in { position:relative; z-index:1; padding-top:8px; padding-bottom:34px; }
    .tp-hero-grid { display:flex; flex-direction:column; gap:22px; }

    .tp-photo { position:relative; width:100%; max-width:300px; aspect-ratio:1/1; border-radius:22px; overflow:hidden; background:#E7F2EB; flex-shrink:0; box-shadow:0 34px 60px -40px rgba(12,42,32,.95); }
    .tp-photo img { width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; }
    .tp-photo-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#14613A,#0C2A20); color:#fff; font-size:56px; font-weight:800; letter-spacing:.02em; line-height:1; user-select:none; }
    .tp-online { position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.97); color:#14613A; font-size:12.5px; font-weight:800; padding:7px 14px; border-radius:999px; box-shadow:0 10px 26px -10px rgba(12,42,32,.65); }
    .tp-online .dot { width:8px; height:8px; border-radius:50%; background:#16A34A; box-shadow:0 0 0 3px rgba(22,163,74,.22); }
    .tp-online.is-off { color:#8A968F; }
    .tp-online.is-off .dot { background:#C4BCAC; box-shadow:0 0 0 3px rgba(196,188,172,.3); }

    .tp-name-row { display:flex; align-items:flex-start; gap:11px; }
    .tp-name { font-size:clamp(30px,4.4vw,40px); font-weight:800; color:var(--sg-ink); line-height:1.05; letter-spacing:-1.1px; margin:0; min-width:0; overflow-wrap:anywhere; }
    .tp-name-vf { color:var(--sg-green); font-size:.58em; margin-top:.32em; flex-shrink:0; }
    .tp-spec { font-size:17.5px; font-weight:500; color:#4A5A52; margin:8px 0 0; letter-spacing:-.15px; }

    .tp-hero-rate { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:14px; font-size:16.5px; font-weight:800; color:var(--sg-ink); }
    .tp-hero-rate .star { color:#F59E0B; font-size:15px; }
    .tp-hero-rate .rev { color:#5C6B63; font-weight:600; font-size:15.5px; }
    .tp-hero-rate .sep { width:1px; height:17px; background:#DCD5C7; margin:0 3px; }

    .tp-chips { display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:15px; }
    .tp-chip { display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; color:#4A5A52; }
    .tp-chip i { color:var(--sg-green); font-size:14px; width:17px; text-align:center; }

    .tp-skills { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
    .tp-skill { appearance:none; -webkit-appearance:none; font-family:inherit; display:inline-flex; align-items:center; padding:8px 16px; border-radius:999px; background:rgba(255,255,255,.94); border:1px solid #EAE3D7; color:var(--sg-ink); font-size:13.5px; font-weight:700; cursor:pointer; transition:.18s ease; }
    .tp-skill:hover, .tp-skill:focus-visible { border-color:var(--sg-green); color:var(--sg-green); transform:translateY(-1px); outline:none; }
    .tp-skill-more { background:var(--sg-green-s); border-color:#D6E7DC; color:#14613A; }

    .tp-bio { font-size:15.5px; line-height:1.7; color:#4A5A52; margin:17px 0 0; max-width:66ch; }

    .tp-meta { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:10px; }
    .tp-meta span { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:#4A5A52; }
    .tp-meta .star { color:#F59E0B; }
    .tp-meta .muted { color:#8A968F; font-weight:600; }
    .tp-meta .tp-active { color:#8A968F; }
    .tp-meta .tp-active.is-now { color:#16A34A; }
    .tp-active-dot { width:7px; height:7px; border-radius:50%; background:#DCD5C7; flex-shrink:0; }
    .tp-active.is-now .tp-active-dot { background:#22C55E; animation:tpActivePulse 2s infinite; }
    @keyframes tpActivePulse { 0% { box-shadow:0 0 0 0 rgba(34,197,94,.45); } 70% { box-shadow:0 0 0 6px rgba(34,197,94,0); } 100% { box-shadow:0 0 0 0 rgba(34,197,94,0); } }

    /* ── Sticky mini-profile (mobile) — premium auto-hide card ── */
    .tp-sticky { position:fixed; left:0; right:0; top:78px; z-index:55; padding:9px 16px 10px; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-bottom:1px solid #EAE3D7; box-shadow:0 14px 30px -16px rgba(15,23,42,.28); opacity:0; transform:translate3d(0,-16px,0); pointer-events:none; cursor:pointer; -webkit-tap-highlight-color:transparent; will-change:opacity,transform; transition:opacity .38s cubic-bezier(.22,1,.36,1), transform .38s cubic-bezier(.22,1,.36,1), background .2s ease; }
    .tp-sticky::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg, var(--tp-navy), var(--tp-blue)); opacity:.55; }
    .tp-sticky.show { opacity:1; transform:translate3d(0,0,0); pointer-events:auto; }
    .tp-sticky.show:active { background:rgba(241,245,249,.97); transform:translate3d(0,0,0) scale(.996); }
    .tp-sticky:focus-visible { outline:2.5px solid var(--tp-navy); outline-offset:-3px; background:#fff; }
    .tp-sticky-in { display:flex; align-items:center; gap:11px; max-width:1024px; margin:0 auto; min-width:0; }
    .tp-st-av { position:relative; width:54px; height:54px; border-radius:50%; overflow:visible; background:#E7F2EB; flex-shrink:0; box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #EAE3D7, 0 4px 10px -4px rgba(12,42,32,.35); opacity:0; transform:scale(.82); transition:opacity .34s ease .05s, transform .45s cubic-bezier(.34,1.56,.64,1) .05s; }
    .tp-sticky.show .tp-st-av { opacity:1; transform:scale(1); }
    .tp-st-av img { width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; border-radius:50%; }
    .tp-st-ph { position:absolute; inset:0; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--tp-navy); color:#fff; font-size:20px; font-weight:800; line-height:1; }
    .tp-st-vf { position:absolute; right:-2px; bottom:-2px; width:17px; height:17px; border-radius:50%; background:#1B7A4B; border:2px solid #fff; display:flex; align-items:center; justify-content:center; color:#fff; font-size:7.5px; box-shadow:0 2px 5px rgba(27,122,75,.4); }
    .tp-st-info { min-width:0; flex:1; }
    .tp-st-name { display:flex; align-items:center; gap:7px; min-width:0; }
    .tp-st-nm { font-size:14.5px; font-weight:800; color:#0C2A20; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; letter-spacing:-.1px; }
    .tp-st-rate { flex-shrink:0; display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:800; color:#0C2A20; white-space:nowrap; padding:2px 7px; border-radius:8px; background:linear-gradient(135deg,#FFFBEB,#FEF3C7); border:1px solid #FDE68A; }
    .tp-st-rate i { color:#F59E0B; font-size:10px; }
    .tp-st-rate .muted { color:#8A968F; font-weight:700; }
    .tp-st-serv { font-size:12.5px; font-weight:700; color:#5C6B63; line-height:1.4; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .tp-st-serv i { color:var(--tp-blue); font-size:11.5px; }
    .tp-st-meta.tp-meta { margin-top:3px; gap:3px 12px; flex-wrap:wrap; }
    .tp-st-meta > span { font-size:11.5px; gap:4px; }
    .tp-st-top { flex-shrink:0; width:30px; height:30px; border-radius:10px; background:#F2EEE6; border:1px solid #EAE3D7; display:flex; align-items:center; justify-content:center; color:var(--tp-navy); font-size:11px; opacity:.75; transform:translateY(-1px); transition:.2s ease; }
    .tp-sticky.show:active .tp-st-top { background:var(--tp-navy); color:#fff; border-color:var(--tp-navy); opacity:1; }

    @media (prefers-reduced-motion: reduce) {
        .tp-sticky, .tp-st-av { transition-duration:.01ms !important; }
    }

    /* Hero action rail — save/share on top, then the price card that closes
       the profile with one obvious next step. */
    .tp-cta { display:flex; flex-direction:column; gap:12px; }
    .tp-hero-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
    /* hidden below lg — the mobile topbar already carries Save / Share */
    .tp-cta-top { display:none; gap:10px; flex-wrap:wrap; }
    .tp-pillbtn { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px; border-radius:13px; background:rgba(255,255,255,.94); border:1px solid #EAE3D7; color:var(--sg-ink); font-family:inherit; font-size:14px; font-weight:800; cursor:pointer; transition:.18s ease; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
    .tp-pillbtn:hover { border-color:var(--sg-green); color:var(--sg-green); transform:translateY(-1px); }
    .tp-pillbtn.is-on { color:#EF4444; border-color:#FADADA; background:#FEF2F2; }

    .tp-price-card { background:#fff; border:1px solid rgba(234,227,215,.95); border-radius:24px; padding:18px 20px; box-shadow:0 40px 70px -48px rgba(12,42,32,1), 0 2px 8px rgba(12,42,32,.05); }
    .tp-price-lab { font-size:13.5px; font-weight:700; color:#8A968F; }
    .tp-price-val { display:flex; align-items:center; gap:9px; margin-top:4px; font-size:36px; font-weight:800; color:var(--sg-ink); letter-spacing:-1.6px; line-height:1.05; }
    .tp-price-val .cur { font-size:27px; font-weight:700; letter-spacing:-.5px; }
    .tp-price-val .info { width:21px; height:21px; border-radius:50%; background:#F2EEE6; color:#8A968F; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; letter-spacing:0; flex-shrink:0; }

    .tp-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:52px; border-radius:16px; font-family:inherit; font-weight:800; font-size:16px; border:none; cursor:pointer; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; }
    .tp-btn-primary { background:var(--sg-green); color:#fff; margin-top:11px; box-shadow:0 22px 38px -24px rgba(27,122,75,1); }
    .tp-btn-primary:hover { background:var(--sg-green-d); transform:translateY(-2px); box-shadow:0 28px 44px -24px rgba(27,122,75,1); }
    .tp-btn-ghost { background:#fff; color:var(--sg-ink); border:1.5px solid #D6E7DC; margin-top:9px; }
    .tp-btn-ghost:hover { border-color:var(--sg-green); color:var(--sg-green); transform:translateY(-2px); }
    .tp-btn:active { transform:translateY(0); }
    .tp-trust { display:flex; flex-wrap:wrap; align-items:center; gap:9px 15px; padding-top:13px; margin-top:13px; border-top:1px solid #F0EBE1; }
    .tp-trust span { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:#5C6B63; }
    .tp-trust i { color:var(--sg-green); font-size:13px; }

    /* Mobile bottom bar buttons */
    .tp-hbtn {
        display:flex; align-items:center; justify-content:center; gap:7px; height:46px;
        border-radius:14px; font-weight:800; font-size:13.5px; border:none; cursor:pointer;
        transition:.2s ease; text-decoration:none; white-space:nowrap;
    }
    .tp-hbtn-primary { background:var(--sg-green); color:#fff; box-shadow:0 8px 20px -10px rgba(27,122,75,.9); }
    .tp-hbtn-primary:hover { transform:translateY(-1px); }
    .tp-hbtn-ghost { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.15); }
    .tp-hbtn-ghost:hover { background:rgba(255,255,255,.18); }

    /* ── Content ──
       Three rails on desktop — contact · profile body · ratings — collapsed to
       one column below lg, where the ratings rail is dropped because its
       reviews are one tap away in the tab bar. */
    /* 13px of canvas between the photo band and the card row, as in the comp */
    .tp-cols { display:flex; flex-direction:column; gap:16px; padding-top:13px; }
    .tp-cols .tp-rail { order:2; display:flex; flex-direction:column; gap:16px; min-width:0; }
    .tp-cols .tp-body { order:1; min-width:0; }
    .tp-cols .tp-rpanel { order:3; display:none; }

    .tp-panel { background:#fff; border:1px solid var(--sg-line); border-radius:22px; padding:20px; box-shadow:0 20px 44px -38px rgba(12,42,32,.9); }
    .tp-panel-head { display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:17px; font-weight:800; color:var(--sg-ink); letter-spacing:-.3px; }
    .tp-panel-head i { color:var(--sg-green); font-size:15px; }

    /* Contact rail */
    .tp-crow { display:flex; align-items:center; gap:11px; padding:10px 0; font-size:14.5px; font-weight:600; color:#3A4A43; text-decoration:none; min-width:0; }
    .tp-crow + .tp-crow { border-top:1px dashed #F0EBE1; }
    .tp-crow > i:first-child { color:var(--sg-green); width:18px; text-align:center; font-size:14px; flex-shrink:0; }
    .tp-crow .val { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .tp-crow .val small { display:block; font-size:12px; color:#8A968F; font-weight:600; margin-top:1px; }
    .tp-crow .tp-copy { flex-shrink:0; width:30px; height:30px; border-radius:9px; border:none; background:#F2EEE6; color:#5C6B63; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s ease; }
    .tp-crow .tp-copy:hover { background:var(--sg-green-s); color:var(--sg-green); }
    .tp-crow:hover .val { color:var(--sg-green); }
    .tp-note { display:flex; align-items:center; gap:9px; background:var(--sg-green-s); color:#14613A; font-size:12.5px; font-weight:700; padding:11px 13px; border-radius:13px; margin-top:14px; line-height:1.45; }
    .tp-note i { flex-shrink:0; }
    .tp-idbtn { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:14px; height:46px; border-radius:14px; background:#FBF7F0; border:1px dashed #DCD5C7; color:var(--sg-ink); font-family:inherit; font-size:13.5px; font-weight:800; text-decoration:none; transition:.18s ease; }
    .tp-idbtn:hover { background:var(--sg-green-s); border-color:var(--sg-green); color:var(--sg-green); }

    /* Service areas */
    .tp-area-lead { display:flex; align-items:center; gap:9px; font-size:15.5px; font-weight:800; color:var(--sg-ink); }
    .tp-area-lead i { color:var(--sg-green); }
    .tp-loc-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
    .tp-loc-tag { display:inline-flex; align-items:center; font-size:12.5px; font-weight:600; color:#4A5A52; background:#FBF7F0; padding:6px 12px; border-radius:999px; border:1px solid #EAE3D7; }
    .tp-maplink { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; height:46px; margin-top:14px; border:1.5px solid #EAE3D7; border-radius:14px; background:#fff; color:var(--sg-ink); font-family:inherit; font-size:14.5px; font-weight:800; text-decoration:none; transition:.18s ease; }
    .tp-maplink:hover { border-color:var(--sg-green); color:var(--sg-green); }

    /* Availability */
    .tp-hrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; font-size:14.5px; }
    .tp-hrow + .tp-hrow { border-top:1px dashed #F0EBE1; }
    .tp-hrow .k { color:#8A968F; font-weight:600; }
    .tp-hrow .v { color:var(--sg-ink); font-weight:800; text-align:right; display:inline-flex; align-items:center; gap:8px; }
    .tp-hrow .v .dot { width:8px; height:8px; border-radius:50%; background:#16A34A; box-shadow:0 0 0 3px rgba(22,163,74,.18); flex-shrink:0; }
    .tp-hrow .v.on { color:#14613A; }
    .tp-hrow .v.off { color:#8A968F; }
    .tp-hrow .v.off .dot { background:#C4BCAC; box-shadow:0 0 0 3px rgba(196,188,172,.25); }

    /* Tab rail — evenly spread labels over a live underline */
    .tp-tabs { display:flex; gap:4px; padding:0; margin:0; background:transparent; border-bottom:1px solid #EAE3D7; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
    .tp-tabs::-webkit-scrollbar { display:none; }
    .tp-tab { position:relative; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px 13px 15px; font-family:inherit; font-weight:700; font-size:14.5px; color:#8A968F; background:transparent; border:none; cursor:pointer; white-space:nowrap; transition:color .18s ease; }
    .tp-tab i { font-size:13.5px; }
    .tp-tab:hover { color:var(--sg-ink); }
    .tp-tab.active { color:var(--sg-green); }
    /* bottom:0 not -1px — .tp-tabs is an overflow-x:auto scroll container, so
       anything hanging past its box is clipped and the bar would render 2px. */
    .tp-tab.active::after { content:""; position:absolute; left:7px; right:7px; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--sg-green); }

    /* Sections inside the body panel */
    .tp-block { padding-top:24px; }
    .tp-block:first-of-type { padding-top:22px; }
    .tp-block + .tp-block { margin-top:26px; border-top:1px solid #F0EBE1; }
    .tp-sec-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
    .tp-sec-title { font-size:19.5px; font-weight:800; color:var(--sg-ink); letter-spacing:-.4px; line-height:1.2; }
    .tp-sec-sub { font-size:13.5px; color:#8A968F; margin-top:5px; }
    .tp-sec-link { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px; border:1.5px solid #EAE3D7; border-radius:14px; background:#fff; color:var(--sg-ink); font-family:inherit; font-size:13.5px; font-weight:800; cursor:pointer; text-decoration:none; white-space:nowrap; transition:.18s ease; flex-shrink:0; }
    .tp-sec-link:hover { border-color:var(--sg-green); color:var(--sg-green); }

    /* Similar technicians — sits below the panel, gets its own breathing room
       and an eyebrow-style heading that echoes the hero's green accent. */
    .tp-simsec { margin-top:30px; }
    .tp-simsec .tp-sec-head { align-items:center; margin-bottom:16px; }
    .tp-simsec .tp-sec-title { display:inline-flex; align-items:center; gap:9px; margin:0; font-size:16px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--sg-ink); }
    .tp-simsec .tp-sec-title::before { content:""; width:6px; height:18px; border-radius:99px; background:linear-gradient(180deg, var(--sg-green), #7FD1A3); flex-shrink:0; }

    /* Services offered */
    /* Flex rather than grid: a partial last row stays centred instead of
       stranding one card against the left edge. The 50% basis caps every row at
       two cards — the old auto-fill 3-up squeezed the text body down to ~100px
       once thumb + gap + padding + arrow had taken their cut — and 230px is the
       narrowest the card gets before that chrome swallows the service name, so
       the 356-580px middle column of 1024-1439px falls back to one-up rather
       than crushing it (and a lone card stretches to fill, not to 50%). */
    .tp-svc-grid { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
    .tp-svc-grid > .tp-svc-card { flex:1 1 calc(50% - 6px); min-width:230px; }
    .tp-svc-card { display:flex; align-items:center; gap:13px; padding:13px; background:#fff; border:1px solid #EAE3D7; border-radius:17px; transition:.18s ease; min-width:0; }
    .tp-svc-card:hover { border-color:#D6E7DC; box-shadow:0 22px 38px -30px rgba(12,42,32,1); transform:translateY(-2px); }
    .tp-svc-thumb { width:58px; height:58px; border-radius:15px; background:#F2EEE6; display:flex; align-items:center; justify-content:center; color:var(--sg-green); font-size:20px; flex-shrink:0; }
    .tp-svc-body { flex:1; min-width:0; }
    .tp-svc-name { font-size:15px; font-weight:800; color:var(--sg-ink); line-height:1.3; overflow-wrap:anywhere; }
    .tp-svc-from { font-size:13px; color:#8A968F; margin-top:5px; }
    .tp-svc-from b { color:var(--sg-ink); font-weight:800; font-size:15.5px; }
    .tp-svc-arrow { margin-left:auto; color:#DCD5C7; font-size:13px; flex-shrink:0; }
    .tp-empty { text-align:center; padding:40px 12px; }
    .tp-empty p { margin:0; font-weight:800; color:#3A4A43; font-size:14.5px; }
    .tp-empty span { display:block; font-size:12.5px; color:#8A968F; font-weight:600; margin-top:5px; }

    /* Brands handled */
    .tp-brands { display:flex; flex-wrap:wrap; gap:11px; }
    .tp-brand { display:inline-flex; align-items:center; justify-content:center; height:50px; padding:0 21px; border:1px solid #EAE3D7; border-radius:14px; background:#fff; font-size:15px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
    .tp-brand-more { background:#F2EEE6; border-color:transparent; color:#5C6B63; font-size:13.5px; letter-spacing:0; text-transform:none; }

    /* About me */
    .tp-about-text { font-size:15.5px; line-height:1.8; color:#4A5A52; max-width:78ch; }
    /* same self-sizing treatment: 4-up when the row can carry it (~672px+),
       stepping to 3 then 2 rather than crushing each card to 78px at 1024px */
    .tp-highlights { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,150px), 1fr)); gap:15px; margin-top:22px; }
    .tp-hl { display:flex; align-items:center; gap:11px; font-size:14px; font-weight:700; color:#3A4A43; }
    .tp-hl-ic { width:34px; height:34px; border-radius:50%; background:var(--sg-green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; box-shadow:0 10px 20px -12px rgba(27,122,75,1); }
    .tp-hl-ic.soft { background:var(--sg-green-s); color:var(--sg-green); box-shadow:none; }

    /* Ratings rail */
    .tp-rate-top { display:flex; align-items:center; gap:16px; }
    .tp-rate-num { font-size:46px; font-weight:800; color:var(--sg-ink); line-height:.95; letter-spacing:-2.2px; }
    .tp-rate-stars { display:flex; gap:3px; margin-top:7px; color:#F59E0B; font-size:13px; }
    .tp-rate-count { font-size:13px; color:#8A968F; font-weight:600; margin-top:7px; }
    .tp-rate-bars { display:flex; flex-direction:column; gap:9px; margin-top:18px; }
    .tp-rbar { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:800; color:#8A968F; }
    .tp-rbar .track { flex:1; height:8px; border-radius:99px; background:#F2EEE6; overflow:hidden; }
    .tp-rbar .fill { height:100%; border-radius:99px; background:var(--sg-green); transition:width .7s cubic-bezier(.22,.61,.36,1); }
    .tp-rbar .pct { width:38px; text-align:right; color:#5C6B63; font-weight:700; }
    .tp-rev-sm { display:flex; gap:12px; padding:16px 0; border-top:1px solid #F0EBE1; }
    .tp-rev-sm-av { width:38px; height:38px; border-radius:50%; background:var(--sg-green-s); color:#14613A; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .tp-rev-sm-body { flex:1; min-width:0; }
    .tp-rev-sm-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
    .tp-rev-sm-nm { font-size:14px; font-weight:800; color:var(--sg-ink); }
    .tp-rev-sm-time { font-size:11.5px; color:#8A968F; font-weight:600; white-space:nowrap; }
    .tp-rev-sm-stars { display:flex; gap:2px; margin-top:5px; color:#F59E0B; font-size:11px; }
    .tp-rev-sm-text { font-size:13.5px; color:#4A5A52; line-height:1.6; margin-top:7px; overflow-wrap:anywhere; }
    .tp-rev-sm-tag { display:inline-block; margin-top:9px; font-size:11px; font-weight:800; color:#14613A; background:var(--sg-green-s); border:1px solid #D6E7DC; padding:4px 10px; border-radius:999px; }
    .tp-rpanel .tp-sec-link { width:100%; justify-content:center; margin-top:4px; }
    .tp-rpanel-empty { text-align:center; padding:18px 6px 4px; }
    .tp-rpanel-empty i { font-size:26px; color:#F59E0B; }
    .tp-rpanel-empty p { font-weight:800; color:#3A4A43; font-size:14.5px; margin:11px 0 0; }
    .tp-rpanel-empty span { display:block; font-size:12.5px; color:#8A968F; font-weight:600; margin-top:4px; }

    /* Map */
    .tp-map { border-radius:16px; overflow:hidden; height:180px; background:linear-gradient(135deg,#EAE3D7,#D6E7DC); border:1px solid #EAE3D7; }

    /* Reviews */
    .tp-rev-summary { display:flex; gap:24px; align-items:center; padding-bottom:16px; border-bottom:1px solid #F2EEE6; }
    .tp-rev-big { font-size:42px; font-weight:900; color:#0C2A20; line-height:1; }
    .tp-rev-bar { display:flex; align-items:center; gap:8px; }
    .tp-rev-track { flex:1; height:6px; border-radius:99px; background:#F2EEE6; overflow:hidden; }
    .tp-rev-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,#F59E0B,#FACC15); }
    .tp-rev-card { background:#FBF7F0; border:1px solid #F2EEE6; border-radius:16px; padding:16px; transition:.18s; }
    .tp-rev-card:hover { border-color:#D6E7DC; }
    .tp-rev-avatar { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#0C2A20,#14613A); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; flex-shrink:0; }

    /* Products */
    .tp-prod-card { display:flex; gap:14px; background:#FBF7F0; border:1px solid #F2EEE6; border-radius:16px; padding:14px; transition:.18s ease; text-decoration:none; color:inherit; }
    .tp-prod-card:hover { border-color:#D6E7DC; box-shadow:0 4px 16px rgba(0,0,0,.04); }
    .tp-prod-thumb { width:76px; height:76px; border-radius:14px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid #F2EEE6; }

    /* Bottom bar */
    .tp-bottom-bar { position:fixed; bottom:0; left:0; right:0; z-index:70; background:rgba(255,255,255,.96); backdrop-filter:blur(20px); border-top:1px solid #EAE3D7; box-shadow:0 -4px 24px rgba(12,42,32,.06); padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); display:flex; align-items:stretch; gap:8px; }
    .tp-bottom-bar .tp-hbtn { flex:1 1 0; min-width:0; font-size:11px; gap:4px; padding:0 4px; }
    .tp-bottom-bar .tp-hbtn-primary { flex:1.25 1 0; }
    .tp-bottom-spacer { height:88px; }
    @media(min-width:1024px) { .tp-bottom-spacer { display:none; } }

    /* Modal */
    .tp-modal-overlay { position:fixed; inset:0; background:rgba(12,42,32,.45); backdrop-filter:blur(3px); z-index:200; display:flex; align-items:flex-end; justify-content:center; }
    @media(min-width:768px) { .tp-modal-overlay { align-items:center; } }
    .tp-modal { background:#fff; border-radius:24px 24px 0 0; width:100%; max-width:440px; padding:24px; max-height:90vh; overflow-y:auto; }
    @media(min-width:768px) { .tp-modal { border-radius:24px; } }

    /* Toast */
    .tp-toast { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); z-index:210; background:#0C2A20; color:#fff; font-size:13.5px; font-weight:600; padding:12px 20px; border-radius:16px; box-shadow:0 12px 34px rgba(0,0,0,.25); display:flex; align-items:center; gap:10px; opacity:0; pointer-events:none; transition:opacity .3s ease; white-space:nowrap; }
    .tp-toast.show { opacity:1; }

    /* Desktop */
    @media(min-width:1024px) {
        .tp-hero-in { padding-top:10px; padding-bottom:16px; }
        /* 260 (photo) + 34 (gap) = 294 = 274 (contact rail) + 20 (gap): hero
           copy lands on the same vertical axis as the tab column below it. */
        .tp-hero-grid { display:grid; grid-template-columns:260px minmax(0,1fr) 340px; gap:34px; align-items:start; }
        .tp-photo { max-width:none; height:250px; aspect-ratio:auto; }
        .tp-hero-rate { font-size:17px; }
        .tp-cta-top { display:flex; }

        .tp-cols { display:grid; grid-template-columns:274px minmax(0,1fr) 328px; gap:20px; align-items:start; }
        .tp-cols .tp-rail, .tp-cols .tp-body, .tp-cols .tp-rpanel { order:0; }
        .tp-cols .tp-rpanel { display:flex; flex-direction:column; gap:16px; min-width:0; }

        /* Both side rails ride the scroll. Without it the shorter column
           strands beside the tall centre one and the desktop reads half-empty;
           100px parks them just under the 89px sticky top bar. Service Areas
           lands on whichever rail is opposite the reviews (see its partial), so
           both columns stay close enough in height for neither to outrun the
           other while stuck. */
        .tp-cols .tp-rail, .tp-cols .tp-rpanel { position:sticky; top:100px; align-self:start; }

        .tp-panel { padding:22px; }
        .tp-body { padding-top:4px; }
        /* Tabs stretch to fill the rail, but the rail keeps the base
           overflow-x:auto: the labels need ~503px while this middle column is
           only 356-552px between 1024-1320px, so with overflow:visible the tabs
           spilled out of the panel and under the Ratings & Reviews rail.
           Clipping keeps them contained (scrollable, scrollbar hidden). */
        .tp-tab { flex:1 1 0; }
        /* .tp-svc-grid (flex-wrap off a 300px basis) and .tp-highlights
           (auto-fill) are deliberately NOT pinned to a column count here — they
           self-size from the panel width, because this middle column is only
           356-580px wide between 1024-1439px. */
    }
    @media(min-width:1024px) and (max-width:1319px) {
        /* Same axis at this width: 240 + 26 = 266 = 246 + 20. */
        .tp-hero-grid { grid-template-columns:240px minmax(0,1fr) 302px; gap:26px; }
        .tp-cols { grid-template-columns:246px minmax(0,1fr) 288px; }
        .tp-photo { height:216px; }
        .tp-tab { font-size:13.5px; gap:6px; padding-left:8px; padding-right:8px; }
    }
    @keyframes bkPop { 0%{transform:scale(.5);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }

    /* ── Technician tiles — identical card to the search results grid ── */
    /* .sim-skel rides every .sr-grid rule: the placeholder grid must use the
       exact same track count or revealing it would reflow the row. */
    .sr-grid, .sim-skel {
        display: grid; gap: 12px;
        grid-template-columns: repeat(2, 1fr);
    }
    .sr-grid { position: relative; }   /* containing block for .sim-skel */
    @media(min-width: 640px) { .sr-grid, .sim-skel { grid-template-columns: repeat(3, 1fr); } }
    /* Flex rather than a 4-up track: the rack here shows one technician as
       often as four, and grid left that single card alone against a 1300px
       edge. Wrap + justify-content:center centres every partial row, while the
       340px cap keeps a lone card from ballooning across the full rack. */
    @media(min-width: 1024px) {
        .sr-grid, .sim-skel { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
        .sr-grid > *, .sim-skel > * { flex:1 1 300px; max-width:340px; min-width:0; }
    }

    /* Similar-technicians loading skeleton — one placeholder per real tile, laid
       over the grid while the page boots, so the real cards fade up underneath
       a footprint that never moves. Only exists under `tp-loading` (set in the
       document head), so a JS-less visit paints the real tiles straight away. */
    .sim-skel {
        position: absolute; inset: 0; z-index: 3; display: none;
        align-content: start;
    }
    html.tp-loading .sim-skel { display: grid; }
    /* …and switch to flex with it, or the overlay would keep the base grid
       tracks and reveal into a different footprint than it covered. */
    @media(min-width:1024px) { html.tp-loading .sim-skel { display:flex; } }
    html.tp-loading .tp-simsec .sr-card { animation-play-state: paused; }
    .sims-tile {
        background: #fff; border: 1px solid #EAE3D7; border-radius: 16px;
        box-shadow: 0 8px 22px rgba(0,36,48,.06);
        display: flex; align-items: center; gap: 10px; padding: 12px 10px;
    }
    .sims-av { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; }
    .sims-lines { flex: 1; min-width: 0; }
    .sims-lines .mpsk-l { height: 11px; }
    .sims-lines .mpsk-l:first-child { height: 14px; margin-bottom: 0; }
    .sims-lines .mpsk-l + .mpsk-l { margin-top: 7px; }
    .sims-cta { flex: 0 0 78px; height: 34px; border-radius: 10px; }

    .sr-card {
        background: #fff; border: 1px solid #EAE3D7;
        border-radius: 16px; padding: 20px 16px 16px;
        transition: .2s; position: relative;
        opacity: 0; transform: translateY(12px);
        animation: srIn .4s ease forwards;
        display: flex; flex-direction: column; align-items: center; text-align: center;
        cursor: pointer;
    }
    .sr-card:hover { box-shadow: 0 8px 24px rgba(12,42,32,.07); transform: translateY(-2px); border-color: #DCD5C7; }
    @keyframes srIn { to { opacity: 1; transform: translateY(0); } }
    .sr-badges-tr { position:absolute; top:10px; right:10px; z-index:2; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
    .sr-badge-tr { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; font-size:10px; font-weight:800; }
    .sr-badge-online { background:#E8F5E9; color:#1B5E20; }
    .sr-badge-busy { background:#F2EEE6; color:#5C6B63; }
    .sr-badge-ver { background:#E7F2EB; color:var(--blue); }

    .sr-avatar {
        width: 58px; height: 58px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-weight: 900; color: #fff; font-size: 18px;
        flex-shrink: 0; position: relative;
        margin-bottom: 10px;
    }
    .sr-avatar .live {
        position: absolute; bottom: 0; right: 0;
        width: 14px; height: 14px; border-radius: 50%;
        background: #22C55E; border: 3px solid #fff;
    }

    .sr-card-info { flex: 1; min-width: 0; width: 100%; }
    .sr-card-name {
        font-size: 15px; font-weight: 900; color: #0C2A20;
        display: flex; align-items: center; justify-content: center; gap: 5px;
        line-height: 1.3;
    }
    .sr-card-name .verified { color: var(--blue); font-size: 13px; }
    .sr-card-spec { font-size: 12px; color: #5C6B63; margin-top: 3px; font-weight: 600; }
    .sr-card-loc {
        font-size: 11px; color: #8A968F; margin-top: 4px;
        display: flex; align-items: center; justify-content: center; gap: 3px;
    }
    .sr-card-loc i { font-size: 10px; }

    .sr-card-stats {
        display: flex; align-items: center; justify-content: center; gap: 5px;
        margin-top: 12px; flex-wrap: wrap; width: 100%;
    }
    .sr-stat {
        display: inline-flex; align-items: center; gap: 3px;
        background: #FBF7F0; border: 1px solid #F2EEE6;
        border-radius: 8px; padding: 4px 8px;
        font-size: 11px; font-weight: 700; color: #3A4A43;
    }
    .sr-stat i { font-size: 10px; color: #8A968F; }
    .sr-stat.sr-stat-star i { color: #F59E0B; }
    .sr-stat.sr-stat-exp i { color: var(--blue); }

    .sr-card-price {
        margin-top: 10px; font-size: 17px; font-weight: 900; color: var(--navy);
    }
    .sr-card-price small { font-size: 10px; font-weight: 600; color: #8A968F; }

    .sr-card-bottom {
        display: flex; align-items: center; justify-content: center; gap: 6px;
        margin-top: 10px; width: 100%;
    }
    .sr-card-actions { display: flex; gap: 6px; width: 100%; }
    .sr-book-btn {
        flex: 1; background: var(--navy); color: #fff;
        font-weight: 700; font-size: 11px;
        padding: 8px 0; border-radius: 8px;
        border: none; cursor: pointer; transition: .15s;
        text-align: center;
    }
    .sr-book-btn:hover { background: #14613A; }
    .sr-view-btn {
        flex: 1; padding: 8px 0; border-radius: 8px;
        border: 1.5px solid #EAE3D7; background: #fff;
        font-size: 11px; font-weight: 700; color: var(--navy);
        text-decoration: none; transition: .15s;
        text-align: center;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .sr-view-btn:hover { border-color: var(--blue); }

    /* ── Picture tile extras — hidden by default, shown only on the mobile
       tile (≤639) below; desktop keeps chips, price and action buttons. ── */
    .sr-card-rating { display: none; }
    .sr-call-btn { display: none; }
    .sr-tile-view { display: none; }
    .sr-cta { display: none; }
    .sr-avatar .live-busy { background: #F59E0B; }
    .sr-avatar-img {
        position: absolute; inset: 0; width: 100%; height: 100%;
        object-fit: cover; border-radius: 50%;
    }

    @media(max-width: 639px) {
        /* Full-width tile list (1 col — the 2-col track squeezes the tile) */
        .sr-grid, .sim-skel { grid-template-columns: minmax(0, 1fr); }
        /* Technician tile = picture pattern:
           avatar · name/specialty/rating/location · verified pill + call */
        .sr-card {
            flex-direction: row; align-items: center; text-align: left;
            gap: 10px; padding: 12px 10px;
            box-shadow: 0 8px 22px rgba(0,36,48,.06);
        }
        .sr-card:active { transform: scale(.99); }
        .sr-card .sr-avatar { width: 56px; height: 56px; margin-bottom: 0; font-size: 16px; }
        .sr-card-info { width: auto; }
        .sr-card-name { justify-content: flex-start; font-size: 15px; }
        .sr-card-name .verified { display: none; }
        .sr-card-spec { text-align: left; }
        .sr-card-loc { display: block; justify-content: initial; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .sr-card-loc i { margin-right: 3px; }
        .sr-card-rating {
            display: flex; align-items: center; gap: 4px;
            margin-top: 4px; font-size: 12.5px; font-weight: 800; color: #0C2A20;
        }
        .sr-card-rating i { color: #F59E0B; font-size: 11px; }
        .sr-card-rating span { color: #8A968F; font-weight: 700; font-size: 11.5px; }
        /* Explicit affordance for customers — the desktop "Profile" button lives
           in the hidden bottom row, so the tile gets its own compact pill.
           The right-hand CTA column stacks two equal-width buttons. */
        .sr-cta {
            display: flex; flex-direction: column; gap: 6px;
            align-self: center; flex-shrink: 0;
        }
        .sr-tile-view {
            display: inline-flex; align-items: center; justify-content: center; gap: 6px;
            align-self: stretch; flex-shrink: 0;
            padding: 5px 12px; border-radius: 999px;
            background: var(--sg-green, #1B7A4B); color: #fff;
            font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
            text-decoration: none; white-space: nowrap; line-height: 1.3;
            box-shadow: 0 10px 18px -12px rgba(27,122,75,.9);
            transition: .15s;
        }
        .sr-tile-view i { font-size: 9px; }
        .sr-tile-view:active { transform: scale(.96); }
        .sr-badge-online, .sr-badge-busy, .sr-card-stats, .sr-card-price, .sr-card-bottom { display: none; }
        .sr-badge-ver {
            background: #E8F5E9 !important; color: #1B5E20 !important;
        }
        .sr-call-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 6px;
            align-self: stretch; flex-shrink: 0;
            padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--sg-green, #1B7A4B);
            background: #fff; color: var(--sg-green, #1B7A4B);
            font-size: 11.5px; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
            text-decoration: none; line-height: 1.3; transition: .15s;
        }
        .sr-call-btn i { font-size: 10px; }
        .sr-call-btn:active { transform: scale(.96); }
    }
    /* ── Layered corrections: longhand hero padding so the container keeps its
       side gutters, plus default-margin cleanup for the elements the rails
       reuse as headings. ── */
    .tp-panel h1, .tp-panel h2, .tp-panel h3, .tp-panel p { margin-bottom:0; }
    .tp-sec-title, .tp-sec-sub, .tp-about-text, .tp-svc-name, .tp-svc-from { margin-top:0; }
    .tp-svc-from { margin-top:5px; }
    .tp-sec-sub { margin-top:5px; }

    .tp-crow .val { text-decoration:none; color:inherit; }
    .tp-crow a.val:hover { color:var(--sg-green); }
    .tp-hrow-lead { justify-content:flex-start; padding-top:0; }
    .tp-hrow-lead .v { text-align:left; font-size:15.5px; }

    .tp-loc-more { background:var(--sg-green-s); border-color:#D6E7DC; color:#14613A; font-weight:800; }
    .tp-rbar > span:first-child { width:30px; flex-shrink:0; display:inline-flex; align-items:center; gap:3px; }
    .tp-rev-fill { background:var(--sg-green); }
    .tp-rev-sm-text { margin-bottom:0; }

    .tp-map { background:linear-gradient(135deg,#F2EEE6,#E7F2EB); height:190px; }
    .tp-map-in { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center; padding:0 18px; }
    .tp-map-in i { font-size:26px; color:var(--sg-green); }
    .tp-map-in p { margin:0; font-size:14px; font-weight:700; color:#4A5A52; }

    .tp-price-val.tp-price-req { font-size:23px; letter-spacing:-.5px; color:#5C6B63; }
    .tp-tab-count { font-weight:700; opacity:.75; }

    /* ═══════════════════════════════════════════════════════════════════════
       MOBILE PROFILE VIEW — separate component set
       Comp: ~/Downloads/mobile-profie-view.png
       ═══════════════════════════════════════════════════════════════════════ */

    /* This page floats its own header over the photograph, so the site's mobile
       bar steps aside — page-scoped, this stylesheet only ships on this route. */
    .ss-mobile-topbar { display:none !important; }

    .tp-mob  { display:block; }
    .tp-desk { display:block; }
    @media(max-width:1023px)  { .tp-desk { display:none; } }
    @media(min-width:1024px)  { .tp-mob  { display:none; } }

    /* ── Hero band ─────────────────────────────────────────────────────────── */
    .mp-hero { position:relative; }
    .mp-band { position:relative; height:206px; overflow:hidden; background:#E7F2EB; }
    .mp-img {
        position:absolute; inset:0;
        background:url('/images/tech-hero-bg.png') no-repeat;
        background-size:cover; background-position:64% 40%;
        /* Fade the photograph out at the top so the back · logo · overflow
           controls sit on clear ground, and soften the lower corners so the
           wave is the only thing meeting the page. */
        -webkit-mask-image:
            linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.8) 12%, rgba(0,0,0,1) 26%, rgba(0,0,0,1) 62%, rgba(0,0,0,.5) 88%, rgba(0,0,0,.2) 100%),
            linear-gradient(90deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,1) 78%, rgba(0,0,0,.3) 100%);
        mask-image:
            linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.8) 12%, rgba(0,0,0,1) 26%, rgba(0,0,0,1) 62%, rgba(0,0,0,.5) 88%, rgba(0,0,0,.2) 100%),
            linear-gradient(90deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,1) 78%, rgba(0,0,0,.3) 100%);
        -webkit-mask-composite:source-in;
        mask-composite:intersect;
    }
    .mp-blob {
        position:absolute; left:-72px; top:-70px; width:196px; height:196px;
        border-radius:50%; background:rgba(197,226,211,.66);
    }
    .mp-wave { position:absolute; left:0; right:0; bottom:-1px; width:100%; height:64px; display:block; }

    .mp-head {
        position:absolute; top:0; left:0; right:0; z-index:3;
        display:flex; align-items:center; justify-content:space-between;
        gap:12px; padding:12px 14px;
    }
    .mp-hbtn {
        width:40px; height:40px; flex:0 0 40px; border-radius:50%;
        display:flex; align-items:center; justify-content:center;
        background:rgba(255,255,255,.74); border:1px solid rgba(255,255,255,.9);
        color:var(--tp-navy); font-size:15px; cursor:pointer;
        -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
        transition:.16s ease; -webkit-tap-highlight-color:transparent;
    }
    .mp-hbtn:active { transform:scale(.93); background:#fff; }
    .mp-logo { display:flex; align-items:center; text-decoration:none; }

    .mp-kebab { position:relative; flex:0 0 auto; }
    .mp-menu {
        position:absolute; right:0; top:47px; min-width:210px; z-index:20;
        background:#fff; border:1px solid #EAE3D7; border-radius:16px;
        box-shadow:0 22px 46px -18px rgba(12,42,32,.5); padding:6px;
    }
    .mp-menu a, .mp-menu button {
        display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px;
        border:0; background:none; border-radius:11px; font-family:inherit;
        font-size:13.5px; font-weight:700; color:#0C2A20; text-decoration:none;
        cursor:pointer; text-align:left;
    }
    .mp-menu a:hover, .mp-menu button:hover { background:#F4F8F5; }
    .mp-menu i { width:17px; text-align:center; color:var(--tp-blue); font-size:13px; }

    /* ── Identity ──────────────────────────────────────────────────────────── */
    .mp-body { position:relative; z-index:2; margin-top:-46px; padding:0 16px; }
    .mp-idrow { display:flex; align-items:flex-start; gap:14px; }

    .mp-avatar {
        position:absolute; top:-100px; left:16px; width:100px; height:100px;
        border-radius:50%; background:#E7F2EB;
        border:4px solid #fff; box-shadow:0 16px 32px -16px rgba(12,42,32,.55);
    }
    .mp-avatar img, .mp-avatar .mp-initials {
        width:100%; height:100%; border-radius:50%; object-fit:cover; display:flex;
        align-items:center; justify-content:center;
    }
    .mp-initials { background:var(--tp-navy); color:#fff; font-size:34px; font-weight:800; }
    .mp-online {
        position:absolute; left:50%; bottom:-17px; transform:translateX(-50%);
        display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
        padding:4px 11px; border-radius:999px; background:#fff;
        border:1px solid #EAE3D7; font-size:11px; font-weight:800; color:#0C2A20;
        box-shadow:0 6px 16px -8px rgba(12,42,32,.55);
    }
    .mp-online i { width:7px; height:7px; border-radius:50%; background:#9AA6A0; }
    .mp-online.is-on i { background:#16A34A; box-shadow:0 0 0 2px rgba(22,163,74,.22); }

    .mp-id { flex:1; min-width:0; padding-top:2px; }
    .mp-name {
        display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:26px 0 0;
        font-size:clamp(21px,6.2vw,25px); font-weight:900; color:var(--tp-navy);
        line-height:1.12; letter-spacing:-.7px;
    }
    .mp-vf { display:inline-flex; color:var(--tp-blue); font-size:17px; }
    .mp-spec { margin:3px 0 0; font-size:13.5px; font-weight:700; color:#4A5A52; line-height:1.35; }

    .mp-rate {
        display:flex; align-items:center; flex-wrap:wrap; gap:6px;
        margin-top:8px; font-size:13.5px; font-weight:700; color:#5C6B63;
    }
    .mp-rate > i { color:#F59E0B; font-size:15px; }
    .mp-rate b { color:var(--tp-navy); font-weight:900; font-size:15.5px; }
    .mp-sep { width:1px; height:13px; background:#DCD5C7; margin:0 3px; }

    .mp-meta { display:flex; flex-wrap:wrap; gap:5px 14px; margin-top:8px; font-size:12.5px; font-weight:700; color:#5C6B63; }
    .mp-meta span { display:inline-flex; align-items:center; gap:5px; }
    .mp-meta i { color:var(--tp-navy); font-size:12px; }

    /* ── Skills + actions ──────────────────────────────────────────────────── */
    .mp-skills { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
    .mp-skills:not(.is-all) { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
    .mp-skills:not(.is-all)::-webkit-scrollbar { display:none; }
    .mp-chip {
        flex:0 0 auto; display:inline-flex; align-items:center; white-space:nowrap;
        padding:9px 15px; border-radius:999px; background:#E7F2EB;
        border:1px solid #D6E7DC; color:#14613A; font-size:13px; font-weight:800;
    }
    .mp-chip-more { background:#fff; color:var(--tp-navy); cursor:pointer; font-family:inherit; }

    .mp-cta { display:flex; gap:10px; margin-top:14px; }
    .mp-btn {
        flex:1 1 0; min-width:0; display:inline-flex; align-items:center;
        justify-content:center; gap:7px; height:52px; border-radius:14px;
        font-family:inherit; font-size:clamp(12.5px,3.5vw,14.5px); font-weight:800;
        letter-spacing:-.2px; border:1.5px solid transparent; cursor:pointer;
        text-decoration:none; white-space:nowrap; padding:0 8px; transition:.16s ease;
    }
    .mp-btn i { font-size:15px; flex:0 0 auto; }
    .mp-btn-primary { background:var(--sg-green); color:#fff; box-shadow:0 16px 30px -18px rgba(27,122,75,1); }
    .mp-btn-primary:active { transform:translateY(1px); }
    .mp-btn-ghost { background:#fff; color:var(--sg-green); border-color:var(--sg-green); }
    .mp-btn-ghost:active { background:#F2F8F5; }

    /* ── Tab rail ──────────────────────────────────────────────────────────── */
    .mp-tabs {
        display:flex; gap:3px; margin:18px 16px 0; padding:5px;
        background:#fff; border:1px solid #EAE3D7; border-radius:16px;
        box-shadow:0 10px 26px -20px rgba(12,42,32,.7);
        overflow-x:auto; scrollbar-width:none;
        -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
        scroll-snap-type:x proximity; scroll-behavior:smooth; cursor:grab;
        touch-action:pan-y;
    }
    .mp-tabs::-webkit-scrollbar { display:none; }
    .mp-tabs.is-drag { cursor:grabbing; scroll-behavior:auto; user-select:none; }
    .mp-tabs.is-swipe, .mp-panels.is-swipe { user-select:none; -webkit-user-select:none; cursor:grabbing; }
    .mp-tab {
        flex:1 0 auto; min-width:max-content; scroll-snap-align:start; display:inline-flex; align-items:center;
        justify-content:center; gap:5px; padding:9px 8px 10px; border:0; background:none;
        font-family:inherit; font-size:11.5px; font-weight:800; color:#5C6B63;
        border-bottom:2px solid transparent; white-space:nowrap; cursor:pointer;
        transition:.16s ease; -webkit-tap-highlight-color:transparent;
    }
    .mp-tab i { font-size:14px; }
    .mp-tab.is-on { color:var(--sg-green); border-bottom-color:var(--sg-green); }
    .mp-tab-count { font-size:11px; color:#8A968F; }
    .mp-tab.is-on .mp-tab-count { color:var(--sg-green); }

    /* ── Panel stack + cards ───────────────────────────────────────────────── */
    .mp-panels { display:flex; flex-direction:column; gap:14px; padding:16px 16px 0; }
    .mp-card {
        background:#fff; border:1px solid #EAE3D7; border-radius:18px;
        padding:16px 15px 17px; box-shadow:0 6px 24px -20px rgba(12,42,32,.75);
    }
    .mp-cardhead { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:13px; }
    .mp-cardhead h2 { margin:0; font-size:16.5px; font-weight:900; letter-spacing:-.45px; color:var(--tp-navy); }
    .mp-headnote { font-size:12px; font-weight:800; color:#8A968F; }
    .mp-viewall {
        display:inline-flex; align-items:center; gap:5px; padding:0; border:0;
        background:none; font-family:inherit; font-size:13px; font-weight:800;
        color:var(--sg-green); cursor:pointer; white-space:nowrap;
    }
    .mp-viewall i { font-size:10px; }

    /* Services rail */
    .mp-svcs { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; margin:0 -15px; padding:0 15px; }
    .mp-svcs::-webkit-scrollbar { display:none; }
    /* 2 cards fill the row, the 3rd peeks half-in so the rail reads as scrollable */
    .mp-svc { flex:0 0 calc(39% - 5px); min-width:108px; scroll-snap-align:start; }
    /* 2 services or fewer fill the row instead of leaving a dead gutter */
    .mp-svcs.is-even .mp-svc { flex:1 1 0; min-width:0; }
    /* …but ONE service stretching to the full row turns its 4/3 photo into a
       245px hero that swallows the screen. Keep the row filled, clamp the
       photo so the card ends up rail-tile height like every other profile. */
    .mp-svcs.is-single .mp-svcimg { max-height:100px; }
    .mp-svcimg {
        width:100%; aspect-ratio:4/3; border-radius:12px; overflow:hidden;
        background:#F2EEE6; display:flex; align-items:center; justify-content:center;
        color:#BFCBC4; font-size:19px;
    }
    .mp-svcimg img { width:100%; height:100%; object-fit:cover; display:block; }
    .mp-svcname { margin:8px 0 0; font-size:12.5px; font-weight:800; color:var(--tp-navy); line-height:1.3; }
    .mp-svcfrom { margin:4px 0 0; font-size:11px; font-weight:700; color:#8A968F; }
    .mp-svcprice { margin:1px 0 0; font-size:14.5px; font-weight:900; color:var(--tp-navy); letter-spacing:-.3px; }

    /* Ratings */
    .mp-rating { display:flex; align-items:center; gap:12px; }
    .mp-score { flex:0 0 auto; min-width:94px; text-align:center; }
    .mp-scoretop { display:flex; align-items:center; justify-content:center; gap:7px; }
    .mp-scoretop i { font-size:26px; color:#F59E0B; }
    .mp-scoretop b { font-size:30px; font-weight:900; color:var(--tp-navy); letter-spacing:-1.1px; line-height:1; }
    .mp-scoren { display:block; margin-top:5px; font-size:12px; font-weight:700; color:#8A968F; }
    .mp-bars { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
    .mp-barrow { display:flex; align-items:center; gap:8px; }
    .mp-bark { flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; width:26px; font-size:11px; font-weight:800; color:#5C6B63; }
    .mp-bark i { font-size:9px; color:#F59E0B; }
    .mp-track { flex:1; min-width:0; height:9px; border-radius:999px; background:#F1EDE4; overflow:hidden; }
    .mp-fill { display:block; height:100%; border-radius:999px; background:var(--sg-green); }
    .mp-barp { flex:0 0 auto; width:33px; text-align:right; font-size:11px; font-weight:800; color:#8A968F; }

    /* Brands */
    .mp-brands { display:flex; gap:9px; overflow-x:auto; scrollbar-width:none; margin:0 -15px; padding:0 15px; }
    .mp-brands::-webkit-scrollbar { display:none; }
    .mp-brands.is-all { flex-wrap:wrap; overflow:visible; margin:0; padding:0; }
    .mp-brand {
        flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
        min-width:78px; padding:12px 14px; border-radius:13px; background:#fff;
        border:1px solid #EAE3D7; font-size:13px; font-weight:900; letter-spacing:.2px;
        white-space:nowrap;
    }
    .mp-brand-more { background:#E7F2EB; border-color:#D6E7DC; color:#14613A; }

    /* Locations */
    .mp-loc {
        display:flex; align-items:center; gap:11px; width:100%; text-align:left;
        padding:13px; border:1px solid #EAE3D7; border-radius:14px; background:#FBF7F0;
        font-family:inherit; cursor:pointer;
    }
    .mp-locpin {
        flex:0 0 36px; width:36px; height:36px; border-radius:11px; background:#E7F2EB;
        color:var(--sg-green); display:flex; align-items:center; justify-content:center; font-size:15px;
    }
    .mp-loctext { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
    .mp-loctext b { font-size:13.5px; font-weight:900; color:var(--tp-navy); }
    .mp-loctext span { font-size:12px; font-weight:600; color:#8A968F; line-height:1.45; }
    .mp-locchev { flex:0 0 auto; color:#C7D2CB; font-size:12px; }
    .mp-locmore { display:flex; flex-direction:column; gap:12px; margin-top:13px; padding-top:13px; border-top:1px solid #F0EBE1; }
    .mp-locaddr { display:flex; align-items:flex-start; gap:8px; margin:0; font-size:12.5px; font-weight:700; color:#5C6B63; line-height:1.5; }
    .mp-locaddr i { color:var(--sg-green); margin-top:3px; }
    .mp-loctags { display:flex; flex-wrap:wrap; gap:7px; }
    .mp-loctag { padding:7px 12px; border-radius:999px; background:#FBF7F0; border:1px solid #EAE3D7; font-size:12px; font-weight:700; color:#5C6B63; }
    .mp-locmap {
        display:flex; align-items:center; justify-content:center; gap:8px; height:46px;
        border-radius:13px; border:1.5px solid #D6E7DC; background:#fff;
        color:var(--sg-green); font-size:13.5px; font-weight:800; text-decoration:none;
    }

    /* Reviews */
    .mp-revs { display:flex; flex-direction:column; gap:11px; }
    .mp-rev { border:1px solid #F0EBE1; border-radius:14px; padding:12px 13px; background:#FDFCFA; }
    .mp-revhead { display:flex; align-items:flex-start; gap:10px; }
    .mp-revav {
        flex:0 0 34px; width:34px; height:34px; border-radius:50%; background:var(--tp-navy);
        color:#fff; font-size:14px; font-weight:900; display:flex; align-items:center; justify-content:center;
    }
    .mp-revid { flex:1; min-width:0; }
    .mp-revname { margin:0; font-size:13.5px; font-weight:800; color:var(--tp-navy); }
    .mp-revstars { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:3px; }
    .mp-revstars i { font-size:11px; }
    .mp-revtag { padding:2px 8px; border-radius:999px; background:#E7F2EB; color:#14613A; font-size:10px; font-weight:800; }
    .mp-revtime { flex:0 0 auto; font-size:10.5px; font-weight:700; color:#8A968F; }
    .mp-revtext { margin:8px 0 0; font-size:12.5px; color:#4A5A52; line-height:1.6; }

    /* Products */
    .mp-prods { display:flex; flex-direction:column; gap:10px; }
    .mp-prod { display:flex; align-items:center; gap:11px; padding:9px; border:1px solid #EAE3D7; border-radius:14px; background:#fff; text-decoration:none; }
    .mp-prodthumb { flex:0 0 54px; width:54px; height:54px; border-radius:11px; overflow:hidden; background:#F2EEE6; display:flex; align-items:center; justify-content:center; color:#C7D2CB; font-size:18px; }
    .mp-prodthumb img { width:100%; height:100%; object-fit:cover; display:block; }
    .mp-prodbody { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
    .mp-prodtag { font-size:9.5px; font-weight:800; padding:2px 8px; border-radius:999px; background:#F2EEE6; color:#5C6B63; }
    .mp-prodtag.is-new { background:#D6E7DC; color:#0C2A20; }
    .mp-prodname { max-width:100%; font-size:13.5px; font-weight:800; color:var(--tp-navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mp-prodprice { font-size:15px; font-weight:900; color:var(--tp-navy); }
    .mp-prodchev { flex:0 0 auto; color:#C7D2CB; font-size:12px; }

    /* Empty states */
    .mp-empty { text-align:center; padding:30px 8px; }
    .mp-empty i { display:block; margin-bottom:9px; font-size:24px; color:#D6E7DC; }
    .mp-empty i.mp-empty-star { color:#F59E0B; }
    .mp-empty p { margin:0; font-size:14px; font-weight:800; color:#0C2A20; }
    .mp-empty span { display:block; margin-top:4px; font-size:12.5px; color:#8A968F; line-height:1.5; }

    /* ── Fixed action bar ──────────────────────────────────────────────────── */
    .tp-hbtn-outline { background:#fff; border:1.5px solid #BFDFCD; color:var(--sg-green); }
    .tp-hbtn-outline:active { background:#F2F8F5; }
    .tp-bottom-bar .tp-hbtn { font-size:12.5px; gap:6px; padding:0 6px; }
    .tp-bottom-bar .tp-hbtn-outline { flex:1 1 0; }
    .tp-bottom-bar .tp-hbtn-primary { flex:1.4 1 0; }
    .tp-bottom-bar .tp-hbtn i { font-size:14px; }

    /* Narrow phones — keep the CTA pair and the rating row from crowding */
    @media(max-width:360px) {
        .mp-avatar { flex:0 0 100px; width:100px; height:100px; }
        .mp-body { margin-top:-46px; }
        .mp-svc { flex:0 0 calc(50% - 5px); }
    }