:root{--c-0a5c63:#0A5C63;--c-0e7c86:#0E7C86;--c-168c49:#168C49;--c-181b1e-rgb:24 27 30;--c-1f7a45:#1F7A45;--c-23272b:#23272B;--c-2563eb:#2563EB;--c-25a65a-rgb:37 166 90;--c-25a65a:rgb(var(--c-25a65a-rgb));--c-29aae1:#29AAE1;--c-2f9e62:#2F9E62;--c-3b82f6-rgb:59 130 246;--c-3b82f6:rgb(var(--c-3b82f6-rgb));--c-4ade80:#4ADE80;--c-5a6169:#5A6169;--c-6e757c:#6E757C;--c-767e86:#767E86;--c-8a5a12:#8A5A12;--c-8e5d14:#8E5D14;--c-9ba3ab:#9BA3AB;--c-b3352b:#B3352B;--c-b4bac0:#B4BAC0;--c-bfdddf:#BFDDDF;--c-c7cbce:#C7CBCE;--c-c93e48:#C93E48;--c-cdd2d7:#CDD2D7;--c-d42027-rgb:212 32 39;--c-d5d9dc:#D5D9DC;--c-df4f58:#DF4F58;--c-e4e7e9:#E4E7E9;--c-e4f8eb:#E4F8EB;--c-e6f2f3:#E6F2F3;--c-e75a62-rgb:231 90 98;--c-e7d3a8:#E7D3A8;--c-e8f0ff:#E8F0FF;--c-e9f6ee:#E9F6EE;--c-eceef1:#ECEEF1;--c-edeef0:#EDEEF0;--c-edeff1:#EDEFF1;--c-edf7f1:#EDF7F1;--c-eff1f4:#EFF1F4;--c-f0616a:#F0616A;--c-f0fcfd:#F0FCFD;--c-f1fcf5:#F1FCF5;--c-f25757-rgb:242 87 87;--c-f4f5f6:#F4F5F6;--c-f4f5f7:#F4F5F7;--c-f4f8ff:#F4F8FF;--c-f6f7f9:#F6F7F9;--c-f7f3f3:#F7F3F3;--c-f8a6aa-rgb:248 166 170;--c-f8a6aa:rgb(var(--c-f8a6aa-rgb));--c-f8eeee:#F8EEEE;--c-fbeef0:#FBEEF0;--c-fcecea:#FCECEA;--c-fdecec:#FDECEC;--c-fdf4e3:#FDF4E3;--c-fdfbfb:#FDFBFB;--c-fef4e4:#FEF4E4;--c-ffb5b8:#FFB5B8;--c-ffe0e0-rgb:255 224 224;--c-fff4f4-rgb:255 244 244;--c-fff6f6:#FFF6F6;--c-fff7f7:#FFF7F7;--sh-183584:0 4px 12px rgb(var(--action-rgb)/.24);--sh-1a3e58:0 12px 26px rgb(var(--c-d42027-rgb)/.18);--sh-1b4c4b:0 4px 12px rgb(var(--c-d42027-rgb)/.24);--sh-1dcae3:0 12px 24px rgb(var(--c-25a65a-rgb)/.16);--sh-2eeafa:0 1px 2px rgb(var(--c-181b1e-rgb)/.05);--sh-357ce8:0 3px 10px rgb(var(--c-d42027-rgb)/.28);--sh-531b0f:0 0 0 4px rgb(var(--c-d42027-rgb)/.11);--sh-766d0c:0 0 0 6px rgb(var(--c-f8a6aa-rgb)/.2),0 10px 22px rgb(var(--c-d42027-rgb)/.15);--sh-7dc321:0 0 0 5px rgb(var(--c-f8a6aa-rgb)/.12),0 8px 18px rgb(var(--c-d42027-rgb)/.1);--sh-85cb74:0 1px 0 var(--line),0 6px 22px rgb(var(--dark-rgb)/.08);--sh-8aaa34:0 12px 24px rgb(var(--ai-rgb)/.16);--sh-94e3b5:-4px 4px 16px rgb(var(--c-d42027-rgb)/.28);--sh-9c75dc:0 3px 10px rgb(var(--c-d42027-rgb)/.24);--sh-a9a55a:0 12px 24px rgb(var(--c-3b82f6-rgb)/.16);--sh-aad8e0:0 6px 14px rgb(var(--c-d42027-rgb)/.34);--sh-af932a:0 2px 8px rgb(var(--c-181b1e-rgb)/.1),0 22px 60px rgb(var(--c-181b1e-rgb)/.24);--sh-bd6cd5:0 6px 18px rgb(var(--c-d42027-rgb)/.36);--sh-c02e7f:0 4px 10px rgb(var(--c-d42027-rgb)/.22);--sh-c7093f:0 6px 16px rgb(var(--c-d42027-rgb)/.36);--sh-d384f2:0 0 0 4px rgb(var(--c-d42027-rgb)/.14);--sh-eac988:0 12px 24px rgb(var(--c-d42027-rgb)/.16);--sh-fe192a:0 -2px 18px rgb(var(--dark-rgb)/.1);--r-blob:56% 44% 53% 47% / 47% 56% 44% 53%;--container:1160px;--lh-heading:1.15;--ease:cubic-bezier(.16,1,.3,1)}

/* =====================================================
   MEDQUEST — AI-Powered Diagnostics
   Brand palette taken from the real logo: grey ink + MQ red.
   Hero = the real marketing banners. Logo = the real file.
   Typography: Plus Jakarta Sans (headings) + Inter (text),
   restrained enterprise scale — no oversized display type.
   Every image embedded; zero external asset requests.
   ===================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Literals, not var(--red): this sheet's red is #D42027 and each of the
   four sheets names its own. See the note in template-home.html. */
::selection{background:rgb(var(--c-d42027-rgb)/.16);color:var(--dark)}
body{font-family:var(--font-body);color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:var(--font-body)}
:focus-visible{outline:3px solid var(--action);outline-offset:3px;border-radius:var(--r-sm)}

/* ---- Type scale: deliberately restrained ---- */
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.22;letter-spacing:-.021em;color:var(--dark);font-weight:800}
h3{font-weight:700;line-height:1.4}
h4{font-weight:700}
p{font-size:.97rem}
.lede{color:var(--muted);font-size:1rem;max-width:60ch;line-height:1.66}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
section{padding:76px 0}
.section-head{max-width:660px;margin-bottom:36px}
.section-head p{margin-top:.55rem}
/* This sheet already had the language the other two were brought to: a
   resting shadow, a 2px lift, a deeper shadow on hover. Only the pressed
   state was missing. .btn-line's hover went to ink-deep, the same weak
   border darken the homepage's secondary had, and goes to brand with it.
   NOTE: these four selectors match no element on any of the 52 pages -
   the twelve pages on this sheet use .bp-btn. Corrected anyway so the
   rule is right if it is ever used, and so the sheet does not teach a
   reader the wrong grammar. */

/* ---------- Utility bar ---------- */
.util{background:var(--dark);color:var(--c-b4bac0);font-size:.76rem}
.util-inner{max-width:var(--container);margin:0 auto;padding:.45rem 24px;display:flex;align-items:center;gap:1.2rem}
.util .c{display:inline-flex;align-items:center;gap:.4rem;letter-spacing:.02em}
.util .c i{width:5px;height:5px;border-radius:var(--r-pill);background:var(--action);display:inline-block}
.util .right{margin-left:auto;display:flex;gap:1.1rem;align-items:center}
.util a:hover{color:var(--surface)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgb(var(--surface-rgb)/.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.nav.scrolled{box-shadow:var(--sh-sm)}
.nav-inner{max-width:var(--container);margin:0 auto;padding:.62rem 24px;display:flex;align-items:center;gap:1.8rem}
.nav-logo img{height:36px;width:auto}
.nav-links{display:flex;gap:1.45rem;margin-left:auto}
.nav-links a,.nav-phone{font-family:var(--font-display);position:relative;isolation:isolate;letter-spacing:-.005em;transition:color .2s ease,transform .2s ease}
.nav-links a{font-weight:600;font-size:.88rem;color:var(--muted)}
.nav-links a::before,.nav-phone::before{content:"";position:absolute;z-index:-1;inset:-.5rem -.72rem;border-radius:var(--r-blob);background:radial-gradient(circle at 28% 35%,rgb(var(--c-fff4f4-rgb)/.96) 0 23%,transparent 49%),radial-gradient(circle at 76% 65%,rgb(var(--c-ffe0e0-rgb)/.9) 0 30%,transparent 63%),rgb(var(--c-f25757-rgb)/.2);filter:blur(2.5px);opacity:0;transform:scale(.7) rotate(-4deg);transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.nav-links a:hover,.nav-links a:focus-visible,.nav-phone:hover,.nav-phone:focus-visible{color:var(--action-hover);transform:translateY(-1px);outline:none}
.nav-links a:hover::before,.nav-links a:focus-visible::before,.nav-phone:hover::before,.nav-phone:focus-visible::before{opacity:1;transform:scale(1.08) rotate(2deg)}
.nav-cta{display:flex;align-items:center;gap:.85rem}
.nav-phone{display:inline-flex;font-weight:700;font-size:.85rem;color:var(--dark)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.35rem;margin-left:auto}
.nav-toggle span{display:block;width:22px;height:2.4px;background:var(--dark);margin:5px 0;border-radius:var(--r-sm)}
.mobile-menu{display:none;position:fixed;top:52px;left:0;right:0;background:var(--surface);z-index:99;padding:1.2rem 24px 1.6rem;box-shadow:var(--sh-md);border-bottom:1px solid var(--line)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:.72rem 0;font-family:var(--font-display);font-weight:700;font-size:.95rem;border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:1rem;width:100%}

/* ---------- HERO: real banner slider ---------- */
.hero{background:linear-gradient(180deg,var(--surface),var(--c-f6f7f9));padding:22px 0 0;position:relative}
.slider{max-width:1280px;margin:0 auto;padding:0 24px;position:relative}
.slider-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);border:1px solid var(--line);background:var(--c-edeef0)}
.slider-strip{display:flex;transition:transform .6s cubic-bezier(.65,0,.25,1)}
.slide{flex:0 0 100%;position:relative}
.slide img{width:100%;height:auto;display:block}
.video-slider .slider-frame{background:var(--c-f7f3f3)}
.hero-video-slide{height:clamp(420px,42vw,560px);overflow:hidden;background:var(--c-f8eeee)}
.hero-video{width:100%;height:100%;display:block;object-fit:cover;object-position:center;filter:saturate(.78) brightness(1.15) contrast(.9)}
.hero-video-slide::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgb(var(--surface-rgb)/.64) 0%,rgb(var(--surface-rgb)/.38) 42%,rgb(var(--surface-rgb)/.2) 100%),linear-gradient(180deg,rgb(var(--surface-rgb)/.13),rgb(var(--surface-rgb)/.3))}
.video-slider .slider-arrow,.video-slider .slider-dots{display:none}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:var(--r-pill);border:1px solid var(--line);background:rgb(var(--surface-rgb)/.94);color:var(--dark);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-md);transition:background .15s,color .15s,transform .15s;z-index:5}
.slider-arrow:hover{background:var(--action);color:var(--surface);border-color:var(--action);transform:translateY(-50%) scale(1.06)}
.slider-arrow.prev{left:16px}
.slider-arrow.next{right:16px}
.slider-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:.45rem;z-index:5}
.slider-dots button{width:30px;height:4px;border-radius:var(--r-pill);border:0;background:rgb(var(--ink-rgb)/.22);cursor:pointer;padding:0;overflow:hidden;position:relative}
.slider-dots button.active{background:rgb(var(--ink-rgb)/.16)}
.slider-dots button.active::after{content:"";position:absolute;inset:0;background:var(--action);transform-origin:left;animation:dotfill 6.5s linear forwards}
@keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Video search panel ---------- */
.aibar-wrap{max-width:960px;position:absolute;left:50%;bottom:24px;width:100%;margin:0;padding:0 24px;z-index:20;transform:translateX(-50%)}
.aibar{padding:1.35rem;background:transparent;border:0;border-radius:0;box-shadow:none;text-shadow:none;display:flex;flex-direction:column}
.aibar-top{order:-1;display:flex;align-items:center;justify-content:flex-start;gap:.8rem;flex-wrap:wrap;margin:0 0 .85rem}
.aibar-top .aibar-h{font-size:1.22rem;letter-spacing:-.018em}
.aibar-top .tagline{font-size:.87rem;color:var(--muted)}
.hero-book{margin:0;white-space:nowrap;align-self:stretch}
.ai-flag{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-display);font-size:var(--fs-min);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ai);background:var(--ai-tint);border-radius:var(--r-pill);padding:.28rem .7rem}
.cmd{position:relative;display:flex;align-items:center;gap:.7rem}
.cmd-box{flex:1;min-width:0;display:flex;align-items:center;gap:.6rem;background:rgb(var(--surface-rgb)/.18);border:2px solid rgb(var(--c-e75a62-rgb)/.5);border-radius:var(--r-pill);padding:.36rem .5rem .36rem 1.05rem;box-shadow:var(--sh-7dc321);transition:border-color .18s,box-shadow .18s,background .18s,transform .18s}
.cmd-box:focus-within{border-color:var(--c-df4f58);background:rgb(var(--surface-rgb)/.3);box-shadow:var(--sh-766d0c);transform:translateY(-1px)}
.cmd-box .ai-ic{color:var(--c-c93e48);flex-shrink:0;display:flex}
.cmd-box input{flex:1;border:0;font-family:var(--font-body);font-size:.97rem;color:var(--ink);background:none;min-width:0;padding:.5rem 0}
.cmd-box input:focus{outline:none}
.cmd-box input::placeholder{color:var(--muted)}
.cmd-box .go{background:linear-gradient(135deg,var(--c-f8a6aa),var(--c-ffb5b8));color:var(--surface);border:0;border-radius:var(--r-pill);width:42px;height:42px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--sh-c02e7f);transition:transform .15s,box-shadow .15s}
.cmd-box .go:hover,.cmd-box .go:focus-visible{transform:scale(1.08);box-shadow:var(--sh-aad8e0);outline:none}
.cmd-results{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:.9rem;display:none;z-index:50;max-height:400px;overflow-y:auto}
.cmd-results.show{display:block;animation:fadeUp .28s ease}
.hero-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem;margin-top:1rem}
.thinking{display:flex;align-items:center;gap:.65rem;color:var(--muted);font-size:.88rem;padding:.35rem .25rem}
.spinner{width:17px;height:17px;border:2.4px solid var(--line);border-top-color:var(--ai);border-radius:var(--r-pill);animation:spin .8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.airesp{font-size:.92rem;color:var(--ink);padding:.25rem .3rem .45rem;line-height:1.62}
.airesp .src{font-family:var(--font-display);font-size:var(--fs-min);font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;display:block;margin-bottom:.45rem}
.test-hit{display:flex;align-items:center;gap:.85rem;padding:.7rem .75rem;border:1px solid var(--line);border-radius:var(--r-md);margin-top:.5rem;transition:border-color .15s,background .15s;cursor:pointer}
.test-hit:hover{border-color:var(--action);background:var(--action-tint)}
.test-hit .tic{width:36px;height:36px;border-radius:var(--r-sm);background:var(--action-tint);color:var(--action);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.test-hit b{font-family:var(--font-display);font-size:.9rem;display:block;font-weight:700}
.test-hit span{font-size:.79rem;color:var(--muted)}
.test-hit .book{margin-left:auto;font-family:var(--font-display);font-size:.78rem;font-weight:700;color:var(--action);flex-shrink:0}
.ai-disc{font-size:var(--fs-min);color:var(--muted);border-top:1px dashed var(--c-cdd2d7);margin-top:.7rem;padding-top:.6rem}

/* ---------- Action tiles ---------- */
.tiles{padding:52px 0 0}
.tiles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:1.4rem 1.35rem;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s,background .2s;display:flex;flex-direction:column;gap:.4rem;text-align:left}
.tile:hover,.tile:focus-visible{transform:translateY(-4px);box-shadow:var(--sh-md);outline:none}
.tile:nth-child(1):hover,.tile:nth-child(1):focus-visible{border-color:var(--action);background:var(--c-fff7f7);box-shadow:var(--sh-eac988)}
.tile:nth-child(2):hover,.tile:nth-child(2):focus-visible{border-color:var(--ai);background:var(--c-f0fcfd);box-shadow:var(--sh-8aaa34)}
.tile:nth-child(3):hover,.tile:nth-child(3):focus-visible{border-color:var(--c-3b82f6);background:var(--c-f4f8ff);box-shadow:var(--sh-a9a55a)}
.tile:nth-child(4):hover,.tile:nth-child(4):focus-visible{border-color:var(--c-25a65a);background:var(--c-f1fcf5);box-shadow:var(--sh-1dcae3)}
.tile .ic{width:42px;height:42px;border-radius:var(--r-md);background:var(--action-tint);color:var(--action);display:flex;align-items:center;justify-content:center;margin-bottom:.35rem}
.tile.alt .ic{background:var(--ai-tint);color:var(--ai)}
.tile b{font-family:var(--font-display);font-size:.96rem;font-weight:800;letter-spacing:-.012em}
.tile span{font-size:.83rem;color:var(--muted);line-height:1.5}
.tile .go{margin-top:auto;font-family:var(--font-display);font-weight:700;font-size:.8rem;color:var(--action);padding-top:.5rem}
.tile.alt .go{color:var(--ai)}
.tile:nth-child(3):hover .ic,.tile:nth-child(3):focus-visible .ic{color:var(--c-2563eb);background:var(--c-e8f0ff)}
.tile:nth-child(3):hover .go,.tile:nth-child(3):focus-visible .go{color:var(--c-2563eb)}
.tile:nth-child(4):hover .ic,.tile:nth-child(4):focus-visible .ic{color:var(--c-168c49);background:var(--c-e4f8eb)}
.tile:nth-child(4):hover .go,.tile:nth-child(4):focus-visible .go{color:var(--c-168c49)}

/* ---------- Trust strip ---------- */
.trust{padding:44px 0 0}
.trust-row{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;justify-content:center;border:1px solid var(--line);border-radius:var(--r-md);background:var(--c-f6f7f9);padding:1.1rem 1.4rem}
.trust-row .badge{display:flex;align-items:center;gap:.7rem}
.trust-row .badge img{height:44px;width:auto;object-fit:contain;background:var(--surface);border-radius:var(--r-sm);padding:.25rem .35rem;border:1px solid var(--line)}
.trust-row .badge b{font-family:var(--font-display);font-size:.85rem;display:block;font-weight:700}
.trust-row .badge span{font-size:var(--fs-min);color:var(--muted)}
.trust-row .sep{width:1px;height:34px;background:var(--c-cdd2d7)}

/* ---------- AI services ---------- */
.ai-sec{background:var(--dark);color:var(--on-dark-muted);margin-top:76px;position:relative;overflow:hidden}
.ai-sec::before{content:"";position:absolute;inset:0;background:
  radial-gradient(620px 420px at 88% 8%,rgb(var(--ai-rgb)/.24),transparent 62%),
  radial-gradient(620px 440px at 6% 92%,rgb(var(--c-d42027-rgb)/.16),transparent 60%)}
.ai-sec .eyebrow{color:var(--ai-on-dark)}
.ai-sec .eyebrow::before{background:var(--ai-on-dark)}
.ai-sec h2{color:var(--surface)}
.ai-sec .lede{color:var(--c-9ba3ab)}
.ai-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1rem;position:relative}
.ai-card{background:rgb(var(--surface-rgb)/.055);border:1px solid rgb(var(--surface-rgb)/.13);border-radius:var(--r-md);padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;transition:transform .2s,border-color .2s,background .2s}
.ai-card:hover{transform:translateY(-4px);border-color:var(--ai-on-dark);background:rgb(var(--surface-rgb)/.085)}
.ai-card .ic{width:42px;height:42px;border-radius:var(--r-md);background:rgb(var(--ai-on-dark-rgb)/.14);color:var(--ai-on-dark);display:flex;align-items:center;justify-content:center;margin-bottom:.25rem}
.ai-card h3{color:var(--surface)}
.ai-card p{font-size:.88rem;color:var(--c-9ba3ab);flex:1}
.ai-card .mini{align-self:flex-start;font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--surface);background:none;border:1.5px solid rgb(var(--surface-rgb)/.28);border-radius:var(--r-sm);padding:.5rem 1.05rem;cursor:pointer;transition:border-color .15s,background .15s;margin-top:.3rem}
.ai-card .mini:hover{border-color:var(--ai-on-dark);background:rgb(var(--ai-on-dark-rgb)/.12)}
.ai-note{position:relative;margin-top:1.8rem;font-size:var(--fs-min);color:var(--c-767e86);font-family:var(--font-body);letter-spacing:.02em}

/* ---------- Tests ---------- */
.tests-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:.9rem}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:1.2rem 1.3rem;display:flex;align-items:center;gap:.9rem;transition:transform .2s,border-color .2s,box-shadow .2s;cursor:pointer}
.tcard:hover{transform:translateY(-4px);border-color:var(--action);box-shadow:var(--sh-sm)}
.tcard .tic{width:40px;height:40px;border-radius:var(--r-md);background:var(--action-tint);color:var(--action);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tcard b{font-family:var(--font-display);font-size:.92rem;display:block;font-weight:700}
.tcard span{font-size:.79rem;color:var(--muted)}
.tcard .go{margin-left:auto;font-family:var(--font-display);font-size:.76rem;font-weight:700;color:var(--action);flex-shrink:0}

/* ---------- Offer ---------- */
.offer{background:var(--c-f6f7f9);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.offer-card{display:grid;grid-template-columns:1.3fr 1fr;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);border:1px solid var(--line);background:var(--surface)}
.offer-img img{width:100%;height:100%;object-fit:cover}
.offer-body{padding:2.1rem 2rem;display:flex;flex-direction:column;justify-content:center;background:var(--dark);color:var(--on-dark-muted)}
.offer-body .eyebrow{color:var(--on-dark-accent)}
.offer-body .eyebrow::before{background:var(--on-dark-accent)}
.offer-body h2{color:var(--surface)}
.offer-body p{margin:.6rem 0 1.3rem;color:var(--c-9ba3ab);font-size:.93rem}
.offer-body .row{display:flex;gap:.75rem;flex-wrap:wrap}
.offer-body .note{font-size:.76rem;color:var(--c-767e86);margin-top:.9rem;font-family:var(--font-body)}

/* ---------- How ---------- */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:1.4rem 1.35rem}
.step .n{font-family:var(--font-display);font-size:var(--fs-min);font-weight:700;letter-spacing:.12em;color:var(--surface);background:var(--action);border-radius:var(--r-sm);padding:.24rem .6rem;display:inline-block;margin-bottom:.7rem}
.step b{font-family:var(--font-display);display:block;font-weight:800;margin-bottom:.2rem;font-size:.98rem}
.step span{font-size:.87rem;color:var(--muted)}

/* ---------- Facility strip ---------- */
.facility{background:var(--c-f6f7f9);border-top:1px solid var(--line)}
.fac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.fac-grid figure{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-sm)}
.fac-grid img{width:100%;height:220px;object-fit:cover;transition:transform .5s}
.fac-grid figure:hover img{transform:scale(1.05)}

/* ---------- Stats ---------- */
.stats{padding:56px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--sh-sm)}
.stat{padding:1.5rem 1.4rem;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .big{font-family:var(--font-display);font-size:1.85rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--dark)}
.stat .big .r{color:var(--action)}
.stat .lbl{font-size:.76rem;color:var(--muted);margin-top:.28rem}

/* ---------- Footer ---------- */
footer{background:var(--dark);color:var(--c-9ba3ab);padding:56px 0 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.2rem;padding-bottom:2.4rem}
.foot-brand .logo-card{background:var(--surface);border-radius:var(--r-md);padding:.6rem .85rem;display:inline-block}
.foot-brand .logo-card img{height:28px;width:auto}
.foot-brand p{font-size:.89rem;max-width:36ch;margin-top:.95rem}
.socials{display:flex;gap:.6rem;margin-top:1.1rem;flex-wrap:wrap}
.socials a{width:35px;height:35px;border-radius:var(--r-sm);background:rgb(var(--surface-rgb)/.07);border:1px solid rgb(var(--surface-rgb)/.13);display:flex;align-items:center;justify-content:center;color:var(--surface);transition:background .15s,transform .15s}
.socials a:hover{background:var(--action);transform:translateY(-2px)}
footer h4{color:var(--surface);margin-bottom:.9rem}
.foot-links li{margin-bottom:.5rem}
.foot-links a{font-size:.87rem;transition:color .15s}
.foot-links a:hover{color:var(--surface)}
.foot-bottom{border-top:1px solid rgb(var(--surface-rgb)/.13);padding:1.2rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.79rem}
.foot-bottom .m{font-size:var(--fs-min);color:var(--c-767e86);letter-spacing:.05em}

/* ---------- Dialogs ---------- */
dialog{border:0;border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:0;max-width:460px;width:calc(100% - 36px);background:var(--surface);color:var(--ink)}
dialog::backdrop{background:rgb(var(--dark-rgb)/.55);backdrop-filter:blur(4px)}
.dlg-head{background:var(--dark);color:var(--surface);padding:1.25rem 1.6rem;display:flex;align-items:flex-start;gap:.9rem}
.dlg-head .ic{width:40px;height:40px;border-radius:var(--r-md);background:rgb(var(--c-d42027-rgb)/.2);color:var(--on-dark-accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dlg-head h3{color:var(--surface);}
.dlg-head p{font-size:.79rem;color:var(--c-9ba3ab);margin-top:.1rem}
.dlg-close{margin-left:auto;background:rgb(var(--surface-rgb)/.13);border:0;color:var(--surface);width:30px;height:30px;border-radius:var(--r-sm);cursor:pointer;flex-shrink:0}
.dlg-close:hover{background:var(--action)}
.dlg-body{padding:1.5rem 1.6rem 1.7rem}
.field{margin-bottom:.95rem}
.field label{font-family:var(--font-display);font-size:.83rem;font-weight:700;display:block;margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--c-cdd2d7);border-radius:var(--r-sm);padding:.75rem .95rem;font-family:var(--font-body);font-size:.93rem;background:var(--c-f6f7f9);transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--action);box-shadow:var(--sh-531b0f);background:var(--surface)}
.field textarea{min-height:104px;resize:vertical}
.dlg-ok{display:none;background:var(--c-edf7f1);border:1px solid var(--c-2f9e62);border-radius:var(--r-sm);padding:.8rem 1rem;font-size:.88rem;margin-top:.9rem}
.dlg-ok.show{display:block;animation:fadeUp .32s ease}
.dlg-hint{font-family:var(--font-body);font-size:var(--fs-min);color:var(--muted);margin-top:1rem;border-top:1px dashed var(--c-cdd2d7);padding-top:.8rem}
.airesp-box{background:var(--c-f6f7f9);border:1px solid var(--line);border-radius:var(--r-md);padding:.95rem 1.05rem;font-size:.89rem;line-height:1.66;margin-top:.9rem;display:none;max-height:270px;overflow-y:auto;white-space:pre-wrap}
.airesp-box.show{display:block;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ---------- FABs + assistant ---------- */
.fab-stack{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;flex-direction:column;gap:.7rem;align-items:flex-end}
.fab{width:54px;display:flex}
.fab-wa{background:var(--whatsapp);color:var(--surface)}
.fab-bot{background:var(--ai);color:var(--surface);position:relative}
.fab-bot .ping{position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:var(--r-pill);background:var(--action);border:2px solid var(--surface);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.chat{position:fixed;right:20px;bottom:86px;z-index:210;width:372px;max-width:calc(100vw - 34px);background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-lg);border:1px solid var(--line);display:none;flex-direction:column;overflow:hidden;max-height:min(580px,calc(100vh - 116px))}
.chat.open{display:flex;animation:chatUp .3s ease}
@keyframes chatUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.chat-head{background:var(--dark);color:var(--surface);padding:.95rem 1.1rem;display:flex;align-items:center;gap:.75rem}
.chat-head .bot-av{width:38px;height:38px;border-radius:var(--r-md);background:var(--ai);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-head b{font-family:var(--font-display);font-size:.94rem;display:block;font-weight:800}
.chat-head small{font-size:var(--fs-min);color:var(--c-9ba3ab);display:flex;align-items:center;gap:.35rem;letter-spacing:.06em}
.chat-head small i{width:6px;height:6px;border-radius:var(--r-pill);background:var(--c-4ade80);display:inline-block}
.chat-head button{margin-left:auto;background:rgb(var(--surface-rgb)/.13);border:0;color:var(--surface);width:29px;height:29px;border-radius:var(--r-sm);cursor:pointer}
.chat-body{padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.6rem;flex:1;background:var(--c-f6f7f9);min-height:170px}
.msg{max-width:86%;padding:.65rem .95rem;border-radius:var(--r-md);font-size:.87rem;line-height:1.55;animation:fadeUp .3s ease;white-space:pre-wrap;word-wrap:break-word}
.msg.bot{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:var(--r-sm);align-self:flex-start}
.msg.user{background:var(--dark);color:var(--surface);border-bottom-right-radius:var(--r-sm);align-self:flex-end}
.quick{display:flex;flex-wrap:wrap;gap:.45rem;padding:.55rem 1rem .8rem;background:var(--c-f6f7f9);border-top:1px solid var(--line)}
.quick button{font-family:var(--font-display);font-size:.75rem;font-weight:600;background:var(--surface);border:1px solid var(--c-cdd2d7);border-radius:var(--r-pill);padding:.38rem .85rem;cursor:pointer;color:var(--muted);transition:border-color .15s,color .15s}
.quick button:hover{border-color:var(--ai);color:var(--ai)}
.chat-input{display:flex;gap:.55rem;padding:.75rem .95rem;border-top:1px solid var(--line);background:var(--surface)}
.chat-input input{flex:1;border:1.5px solid var(--c-cdd2d7);border-radius:var(--r-pill);padding:.6rem 1.05rem;font-family:var(--font-body);font-size:.88rem;background:var(--c-f6f7f9);min-width:0}
.chat-input input:focus{outline:none;border-color:var(--ai);background:var(--surface)}
.chat-input button{width:40px;height:40px;border-radius:var(--r-pill);border:0;background:var(--ai);color:var(--surface);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.chat-input button:hover{transform:scale(1.06)}
.typing{display:inline-flex;gap:4px;padding:.75rem .95rem}
.typing i{width:6px;height:6px;border-radius:var(--r-pill);background:var(--muted);animation:ty .9s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s,transform .65s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
  /* transition:none does not reach transform - a :hover translate is a
     static state and still snaps. These four have lifted 2px for every
     reduced-motion visitor since this sheet was written; the presses
     added below are covered at the same time. */
  }

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .tiles-grid,.stats-grid{grid-template-columns:1fr 1fr}
  .stat{border-bottom:1px solid var(--line)}
  .how-grid,.fac-grid{grid-template-columns:1fr}
  .offer-card{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .aibar-wrap{bottom:20px;margin:0;transform:translateX(-50%)}
}
@media (max-width:620px){
  section{padding:52px 0}
  .util .hide-m{display:none}
  .nav-links,.nav-phone{display:none}
  .nav-toggle{display:block}
  .slider{padding:0 12px}
  .hero-video-slide{height:600px}
  .aibar-wrap{bottom:14px;margin:0;padding:0 12px;transform:translateX(-50%)}
  .aibar{padding:1.1rem}
  .aibar-top{gap:.55rem;margin:0 0 .75rem}
  .aibar-top .aibar-h{font-size:1rem}
  .hero-book{margin:0;padding:.65rem .9rem}
  .hero-actions{grid-template-columns:1fr 1fr;gap:.65rem}
    .slider-arrow{width:34px;height:34px}
  .slider-arrow.prev{left:8px}
  .slider-arrow.next{right:8px}
  .tiles-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
  .stat{border-right:0}
  .foot-grid{grid-template-columns:1fr}
  .chat{right:10px;left:10px;width:auto}
  .trust-row .sep{display:none}
  .fac-grid img{height:190px}
}
/* =====================================================
   ENTERPRISE POLISH + MOTION LAYER
   Signature: the pulse trace. Everything else stays quiet.
   Motion budget: 20px travel, 800ms, no bounce, no overshoot.
   ===================================================== */

/* ---------- Rhythm: one consistent section beat ---------- */
section{padding:clamp(26px,3.2vw,38px) 0}
.ai-sec{margin-top:0}
.section-head{margin-bottom:44px}
.stats{padding:72px 0}
.trust{padding:52px 0 0}

/* ---------- Scroll progress ---------- */
.scrollbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:400;
  background:linear-gradient(90deg,var(--action),var(--c-f0616a));
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* ---------- Nav condense + logo wipe ---------- */
.nav-inner{transition:padding .35s var(--ease)}
.nav.scrolled .nav-inner{padding-top:.4rem;padding-bottom:.4rem}
.nav-logo img{transition:height .35s var(--ease);animation:logoWipe 1s var(--ease) both}
.nav.scrolled .nav-logo img{height:30px}
@keyframes logoWipe{from{clip-path:inset(0 100% 0 0);opacity:0}to{clip-path:inset(0 0 0 0);opacity:1}}

/* ---------- Reveal: longer travel, softer easing ---------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Hero: legibility + entrance ---------- */
.hero-video-slide::after{background:
  linear-gradient(90deg,rgb(var(--surface-rgb)/.74) 0%,rgb(var(--surface-rgb)/.48) 46%,rgb(var(--surface-rgb)/.26) 100%),
  linear-gradient(0deg,rgb(var(--surface-rgb)/.6) 0%,rgb(var(--surface-rgb)/.04) 52%)}
.cmd-box{background:rgb(var(--surface-rgb)/.74);backdrop-filter:blur(14px) saturate(1.25)}
.cmd-box:focus-within{background:rgb(var(--surface-rgb)/.9)}

.aibar>*{opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.aibar.go>*{opacity:1;transform:none}
.aibar.go .aibar-top{transition-delay:.15s}
.aibar.go .cmd{transition-delay:.32s}
.aibar.go .hero-actions{transition-delay:.62s}

/* tilt tiles */

/* ---------- SIGNATURE: pulse rule ---------- */
.pulse-rule{max-width:var(--container);margin:0 auto;padding:0 24px}
.pulse-rule svg{width:100%;height:52px;display:block;overflow:visible}
.pulse-rule .trace{fill:none;stroke:var(--line);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.pulse-rule .live{fill:none;stroke:var(--action);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dashoffset:var(--len,2000);stroke-dasharray:var(--len,2000);
  transition:stroke-dashoffset 2.1s var(--ease)}
.pulse-rule.in .live{stroke-dashoffset:0}
.pulse-rule .blip{fill:var(--action);opacity:0;transition:opacity .5s 1.6s}
.pulse-rule.in .blip{opacity:1}

/* ---------- AI services: drifting grid + gradient edge ---------- */
.ai-sec::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgb(var(--surface-rgb)/.05) 1px,transparent 1px),
    linear-gradient(90deg,rgb(var(--surface-rgb)/.05) 1px,transparent 1px);
  background-size:58px 58px;animation:drift 26s linear infinite;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 42%,#000,transparent);
  mask-image:radial-gradient(72% 62% at 50% 42%,#000,transparent)}
@keyframes drift{to{background-position:58px 58px}}
.ai-sec .container{position:relative;z-index:2}
.ai-card{position:relative;transition:transform .35s var(--ease),
  border-color .3s,background .3s}
.ai-card::before{content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;opacity:0;transition:opacity .4s;
  background:linear-gradient(135deg,var(--ai-on-dark),transparent 42%,transparent 58%,rgb(var(--c-d42027-rgb)/.8));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.ai-card:hover::before{opacity:1}
.ai-card .ic{transition:transform .4s var(--ease),background .3s}
.ai-card:hover .ic{transform:translateY(-3px) scale(1.07);background:rgb(var(--ai-on-dark-rgb)/.22)}

/* compliance bar replaces the old dev note */
.compliance{position:relative;z-index:2;margin-top:2.2rem;padding-top:1.1rem;
  border-top:1px solid rgb(var(--surface-rgb)/.12);display:flex;flex-wrap:wrap;
  gap:.6rem 2rem;font-family:var(--font-display);font-size:var(--fs-min);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--c-767e86)}
.compliance span{display:inline-flex;align-items:center;gap:.5rem}
.compliance span::before{content:"";width:5px;height:5px;border-radius:var(--r-pill);
  background:var(--ai-on-dark);flex-shrink:0}

/* ---------- Tests ---------- */
.tcard{position:relative;overflow:hidden}
.tcard::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--action);transform:scaleY(0);transform-origin:bottom;
  transition:transform .35s var(--ease)}
.tcard:hover::after{transform:scaleY(1);transform-origin:top}
.tcard .tic{transition:transform .4s var(--ease)}
.tcard:hover .tic{transform:rotate(-9deg) scale(1.07)}
.tcard .go{transition:transform .3s var(--ease)}
.tcard:hover .go{transform:translateX(5px)}

/* ---------- Offer: banner stacked full-width so nothing is cropped ---------- */
.offer-card{overflow:hidden;grid-template-columns:1fr}
.offer-img{position:relative;overflow:hidden;background:var(--c-29aae1);line-height:0}
.offer-img img{width:100%;height:auto;object-fit:contain;transition:transform 1.3s var(--ease)}
.offer-card:hover .offer-img img{transform:scale(1.02)}
.offer-img::after{content:"";position:absolute;top:-20%;bottom:-20%;width:36%;
  left:-55%;pointer-events:none;transform:skewX(-14deg);
  background:linear-gradient(90deg,transparent,rgb(var(--surface-rgb)/.35),transparent);
  animation:sheen 9s ease-in-out 2.5s infinite}
@keyframes sheen{0%{left:-55%}18%{left:130%}100%{left:130%}}
.offer-body{padding:2.2rem 2.4rem 2.4rem}
.offer-body p{max-width:64ch}
.offer-card.reveal .offer-img{opacity:0;transform:translateY(20px);
  transition:opacity .95s var(--ease) .1s,transform .95s var(--ease) .1s}
.offer-card.reveal .offer-body{opacity:0;transform:translateY(20px);
  transition:opacity .95s var(--ease) .26s,transform .95s var(--ease) .26s}
.offer-card.reveal.in .offer-img,.offer-card.reveal.in .offer-body{opacity:1;transform:none}
.offer-body .note{font-family:var(--font-display);font-size:var(--fs-min);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase}

/* ---------- How it works: drawn progress rail ---------- */
.how-rail{position:relative;height:2px;background:var(--line);
  border-radius:var(--r-sm);margin:0 16.66% 30px}
.how-rail::after{content:"";position:absolute;inset:0;border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--action),var(--c-f0616a));
  transform:scaleX(0);transform-origin:left;transition:transform 1.7s var(--ease)}
.how-rail.drawn::after{transform:scaleX(1)}
.how-rail i{position:absolute;top:50%;width:12px;height:12px;border-radius:var(--r-pill);
  background:var(--surface);border:2px solid var(--c-cdd2d7);
  transform:translate(-50%,-50%) scale(.4);opacity:0;
  transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .5s}
.how-rail i:nth-child(1){left:0}
.how-rail i:nth-child(2){left:50%}
.how-rail i:nth-child(3){left:100%}
.how-rail.drawn i{opacity:1;transform:translate(-50%,-50%) scale(1);border-color:var(--action)}
.how-rail.drawn i:nth-child(1){transition-delay:.15s}
.how-rail.drawn i:nth-child(2){transition-delay:.8s}
.how-rail.drawn i:nth-child(3){transition-delay:1.45s}
.step{transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.step:hover{transform:translateY(-4px);border-color:var(--c-cdd2d7);box-shadow:var(--sh-md)}

/* ---------- Facility: parallax + captions ---------- */
.fac-grid figure{position:relative}
.fac-grid img{height:250px;transform:scale(1.08);will-change:transform}
.fac-grid figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:1.8rem 1.1rem .95rem;color:var(--surface);font-family:var(--font-display);
  font-weight:700;font-size:.87rem;letter-spacing:-.01em;pointer-events:none;
  background:linear-gradient(0deg,rgb(var(--c-181b1e-rgb)/.86),transparent);
  opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.fac-grid figure:hover figcaption{opacity:1;transform:none}

/* ---------- Stats: underline wipe ---------- */
.stat .big{position:relative;padding-bottom:.55rem}
.stat .big::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:3px;
  border-radius:var(--r-sm);background:var(--action);transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease) .45s}
.stats-grid.in .stat .big::after{transform:scaleX(1)}

/* ---------- FABs ---------- */
.fab-wa{position:relative}
.fab-wa::before,.fab-wa::after{content:"";position:absolute;inset:0;border-radius:var(--r-pill);
  border:2px solid rgb(var(--whatsapp-rgb)/.5);pointer-events:none;
  animation:ripple 3s var(--ease) infinite}
.fab-wa::after{animation-delay:1.5s}
@keyframes ripple{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.8);opacity:0}}
.fab-bot svg{animation:slowspin 11s linear infinite}
@keyframes slowspin{to{transform:rotate(360deg)}}

/* ---------- Skeleton shimmer while the AI thinks ---------- */
.thinking{flex-wrap:wrap}
.thinking::after{content:"";flex:1 0 100%;height:46px;border-radius:var(--r-sm);margin-top:.6rem;
  background:linear-gradient(90deg,var(--c-eff1f4) 25%,var(--surface) 50%,var(--c-eff1f4) 75%);
  background-size:280% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-280% 0}}

/* caret while text types in */
.typing-on::after{content:"";display:inline-block;width:2px;height:1em;
  background:var(--ai);margin-left:3px;vertical-align:-2px;
  animation:blink 1s steps(1) infinite}

/* ---------- Report explainer: animated reference ranges ---------- */
.rng{display:none;margin-top:1rem}
.rng.show{display:block}
.rng-title{font-family:var(--font-display);font-size:var(--fs-min);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.rng-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:.8rem .95rem;margin-bottom:.55rem;opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rng-item.in{opacity:1;transform:none}
.rng-head{display:flex;align-items:baseline;gap:.6rem}
.rng-head b{font-family:var(--font-display);font-size:.87rem;font-weight:700}
.rng-head .v{font-family:var(--font-display);font-size:.95rem;font-weight:800;margin-left:auto}
.rng-tag{font-family:var(--font-display);font-size:var(--fs-min);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;border-radius:var(--r-pill);padding:.18rem .55rem}
.rng-tag.ok{background:var(--c-e9f6ee);color:var(--c-1f7a45)}
.rng-tag.lo{background:var(--c-fef4e4);color:var(--c-8e5d14)}
.rng-tag.hi{background:var(--c-fcecea);color:var(--c-b3352b)}
.rng-track{position:relative;height:8px;border-radius:var(--r-pill);margin:.7rem 0 .35rem}
.rng-mark{position:absolute;top:-4px;left:0;width:4px;height:16px;border-radius:var(--r-sm);
  background:var(--dark);box-shadow:var(--halo);
  transition:left 1.2s var(--ease) .25s}
.rng-scale{display:flex;justify-content:space-between;font-size:var(--fs-min);color:var(--muted)}
.rng-note{font-size:var(--fs-min);color:var(--muted);margin-top:.5rem}

/* ---------- Grids: fixed tracks, no orphan cards ---------- */
@media (min-width:769px){
  .ai-grid{grid-template-columns:repeat(4,1fr)}
  .tests-grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:621px) and (max-width:768px){
  .ai-grid,.tests-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .ai-grid,.tests-grid{grid-template-columns:1fr}
}

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .how-rail{display:none}
  .pulse-rule svg{height:40px}
}
@media (max-width:620px){
  .stats{padding:48px 0}
  .pulse-rule svg{height:32px}
  .compliance{gap:.5rem 1.1rem;font-size:var(--fs-min)}
  .fac-grid img{height:210px}
}

/* ---------- Reduced motion: everything resolves to its end state ---------- */
@media (prefers-reduced-motion:reduce){
  .aibar>*,.rng-item{opacity:1!important;transform:none!important}
  .offer-card.reveal .offer-img,.offer-card.reveal .offer-body{opacity:1;transform:none}
  .pulse-rule .live{stroke-dashoffset:0}
  .pulse-rule .blip,.thinking::after,.typing-on::after{display:none}
  .how-rail::after{transform:scaleX(1)}
  .how-rail i{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .stat .big::after,.scrollbar{transform:scaleX(1)}
  .scrollbar{display:none}
  .fac-grid img{transform:none}
}

/* =====================================================
   PASS 2 — verified ticks, centred dialogs, locations
   ===================================================== */

/* ---------- Accreditation ticks ---------- */
.trust-row .badge{position:relative;padding-right:.2rem}
.vtick{width:23px;height:23px;flex-shrink:0;margin-left:.1rem;display:block}
.vtick svg{width:100%;height:100%;display:block;overflow:visible}
.vt-ring{fill:none;stroke:var(--c-2f9e62);stroke-width:2;stroke-dasharray:63;
  stroke-dashoffset:63;transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset .75s var(--ease)}
.vt-check{fill:none;stroke:var(--c-2f9e62);stroke-width:2.7;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;
  transition:stroke-dashoffset .4s var(--ease)}
.vt-disc{fill:var(--c-2f9e62);opacity:0;transform:scale(.2);transform-origin:50% 50%;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}

.trust-row.in .vt-ring{stroke-dashoffset:0}
.trust-row.in .vt-check{stroke-dashoffset:0}
.trust-row.in .badge:nth-of-type(1) .vt-ring{transition-delay:.15s}
.trust-row.in .badge:nth-of-type(2) .vt-ring{transition-delay:.35s}
.trust-row.in .badge:nth-of-type(3) .vt-ring{transition-delay:.55s}
.trust-row.in .badge:nth-of-type(4) .vt-ring{transition-delay:.75s}
.trust-row.in .badge:nth-of-type(1) .vt-check{transition-delay:.72s}
.trust-row.in .badge:nth-of-type(2) .vt-check{transition-delay:.92s}
.trust-row.in .badge:nth-of-type(3) .vt-check{transition-delay:1.12s}
.trust-row.in .badge:nth-of-type(4) .vt-check{transition-delay:1.32s}
.trust-row.in .vtick{animation:tickPop .45s var(--ease) both}
.trust-row.in .badge:nth-of-type(1) .vtick{animation-delay:.78s}
.trust-row.in .badge:nth-of-type(2) .vtick{animation-delay:.98s}
.trust-row.in .badge:nth-of-type(3) .vtick{animation-delay:1.18s}
.trust-row.in .badge:nth-of-type(4) .vtick{animation-delay:1.38s}
@keyframes tickPop{0%{transform:scale(1)}45%{transform:scale(1.26)}100%{transform:scale(1)}}
.trust-row .badge img{transition:transform .4s var(--ease)}
.trust-row .badge:hover img{transform:scale(1.06)}

/* ---------- Dialogs: locked to centre, scale in ---------- */
dialog{position:fixed;top:50%;left:50%;margin:0;
  transform:translate(-50%,-50%);max-height:88vh;overflow-y:auto;
  overscroll-behavior:contain}
dialog[open]{animation:dlgIn .32s var(--ease) both}
@keyframes dlgIn{
  from{opacity:0;transform:translate(-50%,-50%) scale(.94)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
dialog::backdrop{animation:bdIn .32s ease both}
@keyframes bdIn{from{opacity:0}to{opacity:1}}
.dlg-head{position:sticky;top:0;z-index:2}

/* ---------- Locations ---------- */
.loc-sec{background:var(--c-f6f7f9);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.loc-head-row{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:28px}
.loc-head-row .section-head{margin-bottom:0}

.loc-tabs{display:flex;gap:.4rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.28rem}
.loc-tabs button{font-family:var(--font-display);font-size:.83rem;font-weight:700;
  border:0;background:none;color:var(--muted);padding:.5rem 1.15rem;
  border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease)}
.loc-tabs button:hover{color:var(--dark)}
.loc-tabs button.on{background:var(--action);color:var(--surface);
  box-shadow:var(--sh-9c75dc)}

.loc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:1rem;align-items:start}
.loc-list{display:flex;flex-direction:column;gap:.7rem;
  max-height:530px;overflow-y:auto;padding-right:.35rem}
.loc-list::-webkit-scrollbar{width:6px}
.loc-list::-webkit-scrollbar-thumb{background:var(--c-cdd2d7);border-radius:var(--r-pill)}

.loc-card{position:relative;flex:0 0 auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:1.1rem 1.2rem;cursor:pointer;overflow:hidden;
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .35s var(--ease),
    border-color .25s,box-shadow .25s}
.loc-card.in{opacity:1;transform:none}
.loc-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--action);transform:scaleY(0);transform-origin:bottom;
  transition:transform .35s var(--ease)}
.loc-card:hover{border-color:var(--c-cdd2d7);box-shadow:var(--sh-sm)}
.loc-card.on{border-color:var(--action);box-shadow:var(--sh-md)}
.loc-card.on::after{transform:scaleY(1);transform-origin:top}

.loc-name{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.loc-name b{font-family:var(--font-display);font-size:1rem;font-weight:800;
  letter-spacing:-.015em}
.loc-pin{width:26px;height:26px;border-radius:var(--r-sm);background:var(--action-tint);
  color:var(--action);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:transform .4s var(--ease)}
.loc-pin svg{width:15px;height:15px}
.loc-card.on .loc-pin{background:var(--action);color:var(--surface);
  animation:pinDrop .55s var(--ease)}
@keyframes pinDrop{0%{transform:translateY(-7px) scale(.85)}
  55%{transform:translateY(2px) scale(1.1)}100%{transform:none}}
.loc-hours{margin-left:auto;font-family:var(--font-display);font-size:var(--fs-min);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ai);background:var(--ai-tint);border-radius:var(--r-pill);
  padding:.22rem .6rem;white-space:nowrap}
.loc-addr{font-size:.85rem;color:var(--muted);line-height:1.6;
  margin:.55rem 0 .85rem}
.loc-actions{display:flex;gap:.5rem;flex-wrap:wrap}

.loc-map{position:relative;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);background:var(--c-eff1f4);height:530px;
  box-shadow:var(--sh-sm)}
.loc-map iframe{width:100%;height:100%;border:0;display:block;
  opacity:0;transition:opacity .5s var(--ease);filter:saturate(.92)}
.loc-map iframe.ready{opacity:1}
.loc-note{font-size:.75rem;color:var(--muted);margin-top:1rem}

@media (max-width:768px){
  .loc-grid{grid-template-columns:1fr}
  .loc-list{max-height:none;overflow:visible;padding-right:0}
  .loc-map{height:340px;order:-1}
  .loc-head-row{margin-bottom:22px}
}
@media (max-width:620px){
  .loc-tabs{width:100%;justify-content:center}
  .loc-hours{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .loc-card{opacity:1;transform:none}
  .loc-map iframe{opacity:1}
  .vt-ring,.vt-check{stroke-dashoffset:0}
  dialog[open]{animation:none}
}

/* ---------- Trust row fits one line with the ticks added ---------- */
@media (min-width:769px){
  .trust-row{gap:1rem;justify-content:space-between;padding:1.05rem 1.2rem}
  .trust-row .badge{gap:.55rem}
  .trust-row .badge img{height:40px}
}

/* dialog hint is user-facing copy now, not a code note */
.dlg-hint{font-family:var(--font-body);font-size:.78rem;line-height:1.6;
  border-top:1px solid var(--line);color:var(--muted)}

/* =====================================================
   OFFER PROMO — replaces the raster banner
   Pure CSS/SVG. No image, so nothing crops and nothing
   goes off-brand. Motif: concentric scan rings.
   ===================================================== */
.offer-card{grid-template-columns:1.02fr 1fr;align-items:stretch}

.offer-promo{position:relative;overflow:hidden;isolation:isolate;
  min-height:340px;display:flex;align-items:center;
  padding:2.4rem 2.2rem;
  background:
    radial-gradient(120% 90% at 12% 12%, var(--surface) 0%, var(--c-fff6f6) 44%, var(--c-fdecec) 100%)}

/* soft brand wash */
.offer-promo::before{content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(58% 66% at 82% 46%, rgb(var(--ai-rgb)/.13), transparent 70%),
    radial-gradient(58% 66% at 8% 96%, rgb(var(--c-d42027-rgb)/.13), transparent 70%)}

/* hairline grid, echoes the AI section */
.offer-promo::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgb(var(--c-d42027-rgb)/.055) 1px,transparent 1px),
    linear-gradient(90deg,rgb(var(--c-d42027-rgb)/.055) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(72% 74% at 68% 50%,#000,transparent);
  mask-image:radial-gradient(72% 74% at 68% 50%,#000,transparent)}

/* ---------- scan rings ---------- */
.promo-rings{position:absolute;left:56%;top:50%;width:400px;height:400px;
  transform:translateY(-50%);z-index:-1;pointer-events:none}
.promo-rings i{position:absolute;left:50%;top:50%;width:100%;height:100%;
  margin:-50% 0 0 -50%;border-radius:var(--r-pill);
  border:1.6px solid rgb(var(--c-d42027-rgb)/.42);
  transform:scale(.18);opacity:0;
  animation:scanPulse 5.2s cubic-bezier(.22,.61,.36,1) infinite}
.promo-rings i:nth-child(2){animation-delay:1.3s}
.promo-rings i:nth-child(3){animation-delay:2.6s}
.promo-rings i:nth-child(4){animation-delay:3.9s}
@keyframes scanPulse{
  0%{transform:scale(.18);opacity:0}
  14%{opacity:1}
  100%{transform:scale(1);opacity:0}}

/* static gantry ring for structure */
.promo-rings b{position:absolute;left:50%;top:50%;width:56%;height:56%;
  margin:-28% 0 0 -28%;border-radius:var(--r-pill);
  border:1.6px dashed rgb(var(--c-d42027-rgb)/.34);
  animation:gantry 34s linear infinite}
@keyframes gantry{to{transform:rotate(360deg)}}

/* ---------- content ---------- */
.promo-body{position:relative;max-width:34ch}
.promo-eyebrow{font-family:var(--font-display);font-size:var(--fs-min);font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--action);
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.75rem}
.promo-eyebrow::before{content:"";width:6px;height:6px;border-radius:var(--r-pill);
  background:var(--action);animation:blink 2.4s ease-in-out infinite}

.promo-title{font-family:var(--font-display);font-weight:800;line-height:1.06;
  letter-spacing:-.03em;color:var(--dark);
  font-size:clamp(1.85rem,3.4vw,2.6rem);margin-bottom:.7rem}
.promo-title em{display:block;font-style:normal;color:var(--action)}

.promo-sub{font-size:.93rem;color:var(--muted);line-height:1.62;
  margin-bottom:1.5rem}

.promo-call{position:relative;display:inline-flex;align-items:center;gap:.85rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:.7rem 1.35rem .7rem .75rem;box-shadow:var(--sh-sm);
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.promo-call:hover{transform:translateY(-3px);border-color:var(--action);
  box-shadow:var(--sh-1a3e58)}
.promo-call-ic{position:relative;width:42px;height:42px;border-radius:var(--r-md);
  background:var(--action);color:var(--surface);flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.promo-call-ic::after{content:"";position:absolute;inset:0;border-radius:var(--r-md);
  border:2px solid rgb(var(--c-d42027-rgb)/.5);
  animation:ripple 2.6s var(--ease) infinite}
.promo-call small{display:block;font-size:var(--fs-min);font-weight:700;
  font-family:var(--font-display);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.1rem}
.promo-call b{display:block;font-family:var(--font-display);font-size:1.18rem;
  font-weight:800;letter-spacing:-.02em;color:var(--dark);
  font-variant-numeric:tabular-nums}
.promo-call:hover b{color:var(--action)}

/* ---------- entrance ---------- */
.offer-card.reveal .promo-body>*{opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.offer-card.reveal.in .promo-body>*{opacity:1;transform:none}
.offer-card.reveal.in .promo-eyebrow{transition-delay:.12s}
.offer-card.reveal.in .promo-title{transition-delay:.24s}
.offer-card.reveal.in .promo-sub{transition-delay:.36s}
.offer-card.reveal.in .promo-call{transition-delay:.48s}

@media (max-width:768px){
  .offer-card{grid-template-columns:1fr}
  .offer-promo{min-height:0;padding:2rem 1.6rem 2.2rem}
  .promo-rings{width:300px;height:300px;left:58%;opacity:.75}
  .promo-body{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .promo-rings{display:none}
  .offer-card.reveal .promo-body>*{opacity:1;transform:none}
}

/* =====================================================
   SERVICE CAROUSEL
   ===================================================== */
.svc-sec{background:var(--c-f6f7f9);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.svc-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-md)}
.svc-track{display:flex;transition:transform .72s cubic-bezier(.65,0,.25,1)}

.svc-slide{flex:0 0 100%;min-width:0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:center;
  min-height:420px}

/* ---------- copy ---------- */
.svc-copy{padding:3rem 1rem 3rem 3rem;position:relative;z-index:2}
.svc-eyebrow{font-family:var(--font-display);font-size:var(--fs-min);font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--action);
  display:inline-flex;align-items:center;gap:.55rem;margin-bottom:.85rem}
.svc-eyebrow::before{content:"";width:22px;height:2px;border-radius:var(--r-sm);
  background:var(--action)}
.svc-title{font-family:var(--font-display);font-weight:800;line-height:1.1;
  letter-spacing:-.03em;color:var(--dark);
  font-size:clamp(1.6rem,2.9vw,2.3rem);margin-bottom:.2rem}
.svc-title em{display:block;font-style:normal;color:var(--action)}
.svc-title{max-width:16ch}
.svc-sub{font-size:.95rem;color:var(--muted);line-height:1.66;
  max-width:44ch;margin:.85rem 0 1.6rem}


/* copy animates in per slide, so each one lands rather than just appearing */
.svc-slide .svc-copy>*{opacity:0;transform:translateY(18px)}
.svc-slide.on .svc-copy>*{opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.svc-slide.on .svc-eyebrow{transition-delay:.18s}
.svc-slide.on .svc-title{transition-delay:.28s}
.svc-slide.on .svc-sub{transition-delay:.38s}

/* ---------- art ---------- */
.svc-art{position:relative;height:100%;min-height:420px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.svc-art img{width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.06) translateX(14px);opacity:0;
  transition:transform 1.1s var(--ease),opacity .8s var(--ease)}
.svc-slide.on .svc-art img{transform:scale(1) translateX(0);opacity:1;
  transition-delay:.1s}
/* feather the art into the copy so the two halves read as one panel */
.svc-art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--surface) 0%,rgb(var(--surface-rgb)/.72) 12%,transparent 42%)}

/* narrower artwork sits inside the panel rather than being cropped */
.svc-art.fit-contain{background:linear-gradient(135deg,var(--c-f4f5f7),var(--c-eceef1))}
.svc-art.fit-contain img{object-fit:contain;padding:1.6rem 2rem}
.svc-art.fit-contain::before{background:linear-gradient(90deg,var(--surface) 0%,rgb(var(--surface-rgb)/.55) 14%,transparent 40%)}
@media (max-width:768px){.svc-art.fit-contain img{padding:.9rem 1.2rem}}

/* ---------- controls ---------- */
.svc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:42px;height:42px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:rgb(var(--surface-rgb)/.94);color:var(--dark);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-md);
  transition:background .18s,color .18s,transform .18s var(--ease),border-color .18s}
.svc-arrow:hover{background:var(--action);color:var(--surface);border-color:var(--action);
  transform:translateY(-50%) scale(1.07)}
.svc-arrow.prev{left:14px}
.svc-arrow.next{right:14px}

.svc-dots{position:absolute;left:3rem;bottom:1.6rem;z-index:5;
  display:flex;gap:.4rem}
.svc-dots button{width:32px;height:4px;border-radius:var(--r-pill);border:0;padding:0;
  background:var(--c-cdd2d7);cursor:pointer;position:relative;overflow:hidden;
  transition:background .2s}
.svc-dots button:hover{background:var(--muted)}
.svc-dots button.on{background:rgb(var(--c-d42027-rgb)/.2)}
.svc-dots button.on::after{content:"";position:absolute;inset:0;
  background:var(--action);transform-origin:left;
  animation:svcFill 6.2s linear forwards}
@keyframes svcFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- responsive ---------- */
@media (max-width:768px){
  .svc-slide{grid-template-columns:1fr;min-height:0}
  .svc-art{order:-1;min-height:0;height:210px}
  .svc-art::before{background:linear-gradient(0deg,var(--surface) 0%,rgb(var(--surface-rgb)/.6) 14%,transparent 46%)}
  .svc-art img{transform:scale(1.04) translateY(10px)}
  .svc-slide.on .svc-art img{transform:scale(1) translateY(0)}
  .svc-copy{padding:1.4rem 1.5rem 3.4rem}
  .svc-sub{max-width:none}
  .svc-dots{left:1.5rem;bottom:1.3rem}
  /* arrows ride on the artwork so they never sit over the headline */
  .svc-arrow{width:34px;height:34px;top:105px;transform:none}
  .svc-arrow:hover{transform:none}
  .svc-arrow.prev{left:8px}
  .svc-arrow.next{right:8px}
}
@media (max-width:620px){
  .svc-art{height:180px}
  .svc-arrow{top:90px}
  .svc-title{max-width:none}
  }

@media (prefers-reduced-motion:reduce){
  .svc-track{transition:none}
  .svc-slide .svc-copy>*{opacity:1;transform:none}
  .svc-art img{opacity:1;transform:none}
  .svc-dots button.on::after{animation:none;transform:scaleX(1)}
}

/* =====================================================
   TRUST STRIP — rotating slots
   Height is pinned so the page never reflows mid-rotation.
   ===================================================== */
.trust-row.trust-rot{display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:center;gap:0;padding:0;justify-content:stretch}
.trust-rot .sep{width:1px;height:38px;background:var(--c-cdd2d7);
  justify-self:center;flex:none}

.trust-rot .badge{position:relative;overflow:hidden;
  height:76px;padding:0;min-width:0}

.tr-inner{position:absolute;inset:0;display:flex;align-items:center;
  gap:.65rem;padding:0 .95rem;
  transition:transform .62s var(--ease),opacity .5s var(--ease)}
.tr-inner.enter{transform:translateY(64%);opacity:0}
.tr-inner.leave{transform:translateY(-64%);opacity:0}

/* artwork slot keeps one footprint whether it holds a logo or an icon */
.tr-art{min-width:44px;max-width:66px;height:44px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center}
.tr-art img{height:42px;width:auto;max-width:66px;object-fit:contain;
  background:var(--surface);border-radius:var(--r-sm);padding:.22rem .3rem;
  border:1px solid var(--line)}
.tr-ic{width:40px;height:40px;border-radius:var(--r-md);flex-shrink:0;
  background:var(--action-tint);color:var(--action);
  display:flex;align-items:center;justify-content:center}
.tr-ic svg{width:19px;height:19px}

.tr-txt{min-width:0}
.tr-txt b{font-family:var(--font-display);font-size:.85rem;font-weight:700;
  display:block;line-height:1.3;color:var(--dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-txt span{font-size:var(--fs-min);color:var(--muted);display:block;
  line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the tick draws on every slot as it lands */
.trust-rot .vtick{margin-left:auto}
.trust-rot .vt-ring{stroke-dashoffset:0;transition:none}
.trust-rot .vt-check{stroke-dashoffset:0;transition:none}
.trust-rot .tr-inner.enter .vt-ring{stroke-dashoffset:63}
.trust-rot .tr-inner.enter .vt-check{stroke-dashoffset:22}
.trust-rot .tr-inner:not(.enter):not(.leave) .vt-ring{
  transition:stroke-dashoffset .7s var(--ease) .18s}
.trust-rot .tr-inner:not(.enter):not(.leave) .vt-check{
  transition:stroke-dashoffset .4s var(--ease) .7s}

/* the original staggered first-load ticks still apply */
.trust-row.trust-rot.in .badge:nth-of-type(1) .vt-ring{transition-delay:.15s}
.trust-row.trust-rot.in .badge:nth-of-type(2) .vt-ring{transition-delay:.35s}
.trust-row.trust-rot.in .badge:nth-of-type(3) .vt-ring{transition-delay:.55s}
.trust-row.trust-rot.in .badge:nth-of-type(4) .vt-ring{transition-delay:.75s}

@media (max-width:768px){
  .trust-row.trust-rot{grid-template-columns:1fr auto 1fr}
  .trust-rot .badge:nth-of-type(n+3){display:none}
  .trust-rot .sep:nth-of-type(n+2){display:none}
}
@media (max-width:620px){
  .trust-row.trust-rot{grid-template-columns:1fr}
  .trust-rot .sep{display:none}
  .trust-rot .badge:nth-of-type(n+2){display:none}
  .trust-rot .badge{height:68px}
}

@media (prefers-reduced-motion:reduce){
  .tr-inner{transition:none}
  .tr-inner.enter,.tr-inner.leave{opacity:1;transform:none}
}

/* pinned slot reads as fixed, not mid-rotation */
.trust-rot .badge.pinned{background:linear-gradient(90deg,rgb(var(--c-d42027-rgb)/.045),transparent 70%)}

/* =====================================================
   DEPARTMENTS + SVG SLIDE ARTWORK
   ===================================================== */

/* ---------- drawn artwork inside a carousel slide ---------- */
.svc-art.art-svg{background:linear-gradient(135deg,var(--c-fff7f7),var(--c-fdecec));
  padding:1.5rem 1.8rem}
.svc-art.art-svg svg{width:100%;height:100%;display:block}
.svc-art.art-svg::before{background:linear-gradient(90deg,var(--surface) 0%,rgb(var(--surface-rgb)/.6) 14%,transparent 42%)}

.art-trace{stroke-dasharray:1400;stroke-dashoffset:1400}
.svc-slide.on .art-trace{transition:stroke-dashoffset 2.4s var(--ease) .2s;
  stroke-dashoffset:0}
.art-heart{stroke-dasharray:640;stroke-dashoffset:640}
.svc-slide.on .art-heart{transition:stroke-dashoffset 2s var(--ease) .5s;
  stroke-dashoffset:0}
.art-blip{opacity:0}
.svc-slide.on .art-blip{opacity:1;transition:opacity .5s 2.2s}

/* ---------- departments ---------- */
.dept-sec{background:var(--surface)}
.dept-grid{display:flex;flex-direction:column;gap:2.4rem}

.dept-title{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;
  font-family:var(--font-display);font-size:.78rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.dept-title span{flex-shrink:0}
.dept-title i{font-style:normal;font-size:var(--fs-min);color:var(--action);
  background:var(--action-tint);border-radius:var(--r-pill);padding:.14rem .52rem;
  font-variant-numeric:tabular-nums}
.dept-title::after{content:"";flex:1;height:1px;background:var(--line)}

.dept-items{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem}

.dept-card{display:flex;align-items:center;gap:.8rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1rem 1.05rem;min-width:0;position:relative;overflow:hidden;
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),
    border-color .25s,box-shadow .25s}
.dept-group.in .dept-card{opacity:1;transform:none}
.dept-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--action);transform:scaleY(0);transform-origin:bottom;
  transition:transform .3s var(--ease)}
.dept-card:hover{border-color:var(--c-cdd2d7);box-shadow:var(--sh-sm)}
.dept-card:hover::after{transform:scaleY(1);transform-origin:top}

.dept-ic{width:40px;height:40px;border-radius:var(--r-md);flex-shrink:0;
  background:var(--c-f6f7f9);color:var(--action);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,color .3s,transform .35s var(--ease)}
.dept-ic svg{width:20px;height:20px}
.dept-card:hover .dept-ic{background:var(--action);color:var(--surface);border-color:var(--action);
  transform:translateY(-2px)}

.dept-card b{font-family:var(--font-display);font-size:.9rem;font-weight:700;display:block;
  line-height:1.3;color:var(--dark)}
.dept-card span{font-size:.76rem;color:var(--muted);display:block;line-height:1.4;
  margin-top:.1rem}

.dept-note{margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--muted)}

@media (max-width:768px){ .dept-items{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:620px){  .dept-items{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){
  .dept-items{grid-template-columns:1fr}
  .dept-grid{gap:1.8rem}
}

@media (prefers-reduced-motion:reduce){
  .dept-card{opacity:1;transform:none}
  .art-trace,.art-heart{stroke-dashoffset:0}
  .art-blip{display:none}
}

/* =====================================================
   PASS 8 — hero, nav, glass, responsive
   ===================================================== */

/* ---------- 1. Hero height, down ~12% ---------- */
.hero{padding:16px 0 0}
.hero-video-slide{height:clamp(370px,36vw,492px)}

/* ---------- 8. Video scrim: darker, graded toward the panel ---------- */
/* The panel is frosted glass now, so its text no longer sits on the footage
   and the video does not need a heavy wash to stay readable. Filters removed;
   the scrim only darkens the strip the panel overlaps. */
.hero-video{filter:none}
.hero-video-slide::after{background:
  linear-gradient(180deg,transparent 0%,transparent 42%,rgb(var(--c-181b1e-rgb)/.34) 100%)}

/* ---------- 5. The panel becomes real frosted glass ---------- */
.aibar-wrap{bottom:18px}
.aibar{background:rgb(var(--surface-rgb)/.8);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgb(var(--surface-rgb)/.85);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-af932a);
  padding:1.15rem 1.3rem 1.25rem}
.aibar-top .aibar-h{font-size:1.16rem}

/* controls sit on glass now, so they can be plainer and higher contrast */
.cmd-box{background:var(--surface);border-color:rgb(var(--c-d42027-rgb)/.42);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:var(--sh-2eeafa)}
.cmd-box:focus-within{background:var(--surface);border-color:var(--action);
  box-shadow:var(--sh-d384f2)}

/* ---------- 2. Search CTA attached to the bar ---------- */
.cmd-box{padding:.3rem .3rem .3rem 1.05rem}
.cmd-box .go{width:auto;height:42px;border-radius:var(--r-pill);padding:0 1.25rem;
  gap:.45rem;background:var(--action);
  font-family:var(--font-display);font-weight:700;font-size:.88rem;letter-spacing:-.01em;
  box-shadow:var(--sh-357ce8)}
.cmd-box .go::before{content:"Search"}
.cmd-box .go:hover,.cmd-box .go:focus-visible{background:var(--action-hover);
  transform:none;box-shadow:var(--sh-c7093f)}
.cmd-box .go svg{transition:transform .25s var(--ease)}
.cmd-box .go:hover svg{transform:translateX(3px)}
/* the standalone Book Now is gone; the first action tile carries it */
.hero-book{display:none}

/* ---------- 4. Verified stat line ---------- */
.hero-stats{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem 1.4rem;
  margin-top:.95rem;padding-top:.85rem;
  border-top:1px solid rgb(var(--c-181b1e-rgb)/.1)}
.hero-stat{display:inline-flex;align-items:baseline;gap:.4rem;min-width:0}
.hero-stat b{font-family:var(--font-display);font-weight:800;font-size:.98rem;
  letter-spacing:-.02em;color:var(--dark);font-variant-numeric:tabular-nums}
.hero-stat span{font-size:var(--fs-min);color:var(--muted);white-space:nowrap}
.hero-stat i{font-style:normal;color:var(--action)}
.hero-stats .div{width:1px;height:16px;background:rgb(var(--c-181b1e-rgb)/.14)}

/* ---------- 6. Navigation ---------- */
.nav-links{gap:1.7rem}
/* the old blob hover is replaced with a wiping underline */
.nav-links a::before,.nav-phone::before{display:none}
.nav-links a{padding-bottom:2px}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;
  height:2px;border-radius:var(--r-sm);background:var(--action);
  transform:scaleX(0);transform-origin:right;
  transition:transform .34s var(--ease)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{
  transform:scaleX(1);transform-origin:left}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--dark);transform:none}
.nav-links a.active{color:var(--dark);font-weight:700}
.nav-links a.active::after{transform:scaleX(1);transform-origin:left}
.nav.scrolled{box-shadow:var(--sh-85cb74)}
.nav-phone:hover{transform:none;color:var(--action-hover)}

/* ---------- Responsive: verified at 320 / 375 / 390 / 414 / 768 / 1024 / 1280 / 1440 / 1920 ---------- */
@media (min-width:1241px){
  .hero-video-slide{height:520px}
}
@media (max-width:768px){
  .aibar{padding:1.05rem 1.1rem 1.15rem}
  .hero-stats{gap:.35rem 1rem}
  .hero-stat span{font-size:var(--fs-min)}
}
@media (max-width:768px){
  .hero-video-slide{height:auto;min-height:0}
  .hero-video{position:absolute;inset:0}
  /* below tablet the panel sits under the video rather than over it,
     so nothing has to fight the footage for contrast */
  .slider.video-slider{padding:0 16px}
  .hero-video-slide{height:210px}
  /* relative, not static: z-index is ignored on static elements and the
     positioned video slide was painting over the panel's headline. */
  .aibar-wrap{position:relative;z-index:20;transform:none;max-width:none;
    left:auto;bottom:auto;padding:0 16px;margin-top:-42px}
  .aibar{background:var(--surface);border-color:var(--line);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:var(--sh-md)}
  .aibar-top .aibar-h{font-size:1.05rem}
}
@media (max-width:620px){
  .cmd-box{padding:.28rem .28rem .28rem .85rem}
  .cmd-box .go{padding:0 .9rem;height:38px;font-size:.83rem}
  .hero-stats{gap:.3rem .9rem;margin-top:.8rem;padding-top:.75rem}
  .hero-stats .div{display:none}
}
@media (max-width:400px){
  .aibar{padding:.9rem .95rem 1rem}
  .aibar-top .aibar-h{font-size:.98rem}
  .cmd-box .go::before{content:""}
  .cmd-box .go{padding:0;width:38px;justify-content:center}
    .hero-stat b{font-size:.9rem}
  .hero-stat span{font-size:var(--fs-min)}
}

@media (prefers-reduced-motion:reduce){
  .nav-links a::after{transition:none}
}

/* ---------- Touch targets: nothing interactive under 32px ---------- */
.util .right a,.util .c{padding:.42rem 0;display:inline-flex;align-items:center}
.util-inner{padding:.15rem 24px}
.nav-logo{display:inline-flex;align-items:center;padding:.3rem 0}
.dlg-close{width:34px;height:34px}
.chat-head button{width:34px;height:34px}
.foot-links a{display:inline-block;padding:.36rem 0}
.foot-links li{margin-bottom:.28rem}
.socials a{width:38px;height:38px}
/* The dot reads as 4px but the element itself is 32px, so the hit area is
   real rather than a pseudo-element the accessibility tree can't measure. */
.svc-dots button{height:32px;padding:14px 0;background-clip:content-box;
  border-radius:var(--r-pill)}
.svc-dots button.on::after{top:14px;bottom:14px;border-radius:var(--r-pill)}
.svc-dots{bottom:1.2rem;gap:.3rem}
.slider-dots button{height:32px;padding:14px 0;background-clip:content-box}
.slider-dots button.active::after{top:14px;bottom:14px}
.loc-tabs button{min-height:36px}

/* ---------- Trust strip: 4 slots need more than 1024px ---------- */
@media (max-width:768px) and (min-width:621px){
  .trust-row.trust-rot{grid-template-columns:1fr auto 1fr}
  .trust-rot .badge:nth-of-type(n+3){display:none}
  .trust-rot .sep:nth-of-type(n+2){display:none}
}

/* nav links reach a 32px hit box without changing how they look */
.nav-links a{padding-top:5px;padding-bottom:6px}
.nav-links a::after{bottom:0}
.nav-phone{padding:7px 0}

/* utility bar wraps instead of pushing past the viewport */
.util-inner{flex-wrap:wrap;row-gap:0}
.util .right{gap:.9rem}
@media (max-width:620px){
  .util-inner{justify-content:center;gap:.9rem;padding-left:14px;padding-right:14px}
  .util .right{margin-left:0}
  .util .c{font-size:var(--fs-min)}
}

/* Seven nav items plus a phone number: flex was shrinking them until the
   labels broke across two lines. */
.nav-links a,.nav-phone{white-space:nowrap;flex-shrink:0}
.nav-links{flex-wrap:nowrap}
@media (max-width:1240px) and (min-width:621px){
  .nav-links{gap:1.15rem}
  .nav-links a{font-size:.84rem}
  .nav-inner{gap:1.1rem}
  .nav-phone{font-size:.82rem}
}

/* The touch-target padding above uses inline-flex, which was overriding
   the small-screen hide on the secondary utility items. Restore it. */
@media (max-width:620px){
  .util .hide-m{display:none}
}

@media (max-width:768px){ .nav-plain{display:none} }

/* A three-letter nav link is narrower than the 32px touch minimum, and the
   extra item pushed the row into overflow at tablet width. */
.nav-links a.nav-extra{padding-left:4px;padding-right:4px;min-width:34px;
  text-align:center}
@media (max-width:768px){ .nav-links a.nav-extra{display:none} }

/* Price filter pills and Book buttons were under the 32px touch minimum. */
.pl-filters button{min-height:34px;padding:.5rem 1rem}

/* Footer legal links were 20px tall — below the 32px touch minimum. */
.foot-bottom a{display:inline-flex;align-items:center;min-height:34px}

/* The catalogue link sits in a note paragraph; give it a real touch target. */
.pl-note a{display:inline-flex;align-items:center;min-height:36px}

/* The extra nav items squeezed the logo to 31px wide at 1024. flex-shrink:0
   fixed that but broke mobile, where the logo must adapt - so instead the
   optional nav items drop out earlier and the logo keeps its room. */
@media (max-width:768px){ .nav-links a.nav-extra{display:none} }

/* link through to the full searchable price list */
.pl-all{font:700 .86rem var(--font-display);color:var(--action);display:inline-flex;
  align-items:center;min-height:34px}

/* =====================================================
   ACTION RAIL + QUICK BAR
   ===================================================== */

/* ---------- Desktop rail ---------- */
.act-rail{position:fixed;right:0;top:50%;transform:translateY(-50%);
  z-index:200;display:flex;flex-direction:column;align-items:flex-end;
  gap:.55rem;padding-right:0}

.act-tab{writing-mode:vertical-rl;transform:rotate(180deg);
  background:var(--action);color:var(--surface);border:0;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.02em;
  padding:1.15rem .68rem;border-radius:var(--r-md) 0 0 var(--r-md);margin-right:0;
  box-shadow:var(--sh-94e3b5);
  transition:background .2s,padding .25s var(--ease)}
.act-tab:hover{background:var(--action-hover);padding-right:.9rem}

.act-whatsapp{background:var(--whatsapp);color:var(--surface)}
.act-chat{background:var(--ai);color:var(--surface)}
.act-call:hover{background:var(--action);color:var(--surface)}

.act-tip{position:absolute;right:calc(100% + 10px);top:50%;
  transform:translateY(-50%) translateX(6px);
  background:var(--dark);color:var(--surface);font-family:var(--font-display);
  font-size:.75rem;font-weight:600;white-space:nowrap;
  padding:.32rem .6rem;border-radius:var(--r-sm);pointer-events:none;
  opacity:0;transition:opacity .2s,transform .2s var(--ease)}

/* the original FAB stack is kept in the DOM so its listeners survive,
   but the rail replaces it visually */
.fab-stack{display:none}

/* ---------- Mobile quick bar ---------- */
.quick-bar{display:none}

@media (max-width:768px){
  .act-rail{display:none}

  .quick-bar{display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:210;
    background:rgb(var(--surface-rgb)/.94);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);
    backdrop-filter:blur(18px) saturate(1.4);
    border-top:1px solid var(--line);
    box-shadow:var(--sh-fe192a);
    padding-bottom:env(safe-area-inset-bottom)}

  .qb-item{background:none;border:0;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.2rem;padding:.5rem .2rem .45rem;min-height:58px;color:var(--muted);
    transition:color .2s}
  .qb-item:active{color:var(--action)}
  .qb-ic{display:flex;align-items:center;justify-content:center}
  .qb-lbl{font-family:var(--font-display);font-size:var(--fs-min);font-weight:700;
    letter-spacing:.02em;white-space:nowrap}

  /* centre item lifts out of the bar, the way the reference does */
  .qb-center{position:relative}
  .qb-center .qb-ic{position:absolute;top:-22px;
    width:56px;height:56px;border-radius:var(--r-pill);
    background:var(--action);color:var(--surface);
    border:4px solid var(--surface);
    box-shadow:var(--sh-bd6cd5)}
  .qb-center .qb-lbl{margin-top:2.35rem;color:var(--action)}
  .qb-center::after{content:"";position:absolute;top:-24px;right:6px;
    width:9px;height:9px;border-radius:var(--r-pill);background:var(--ai);
    border:2px solid var(--surface);animation:blink 2.4s ease-in-out infinite}

  /* WhatsApp stays reachable, floating clear of the bar */
  .fab-stack{display:flex;bottom:calc(74px + env(safe-area-inset-bottom));right:14px}
  .fab-stack .fab-bot{display:none}   /* the bar's centre button covers this */

  /* nothing at the end of the page hides behind the bar */
  body.has-quick-bar{padding-bottom:66px}
  .chat{bottom:calc(80px + env(safe-area-inset-bottom))}
}

@media (max-width:400px){
  .qb-lbl{font-size:var(--fs-min)}
  .qb-center .qb-ic{width:52px;height:52px;top:-20px}
  .qb-center .qb-lbl{margin-top:2.1rem}
}

@media (prefers-reduced-motion:reduce){
  .act-tab,.act-tip{transition:none}
  .qb-center::after{animation:none}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* FAQ accordion + FAQPage JSON-LD, both from the same config array */
.faq-sec{background:var(--surface)}
.faq-list{max-width:820px}
.faq-item{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  margin-bottom:.6rem;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.faq-item[open]{border-color:var(--c-cdd2d7);box-shadow:var(--sh-sm)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:.8rem;padding:1rem 1.2rem;font:700 .95rem var(--font-display);color:var(--dark)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";margin-left:auto;font:700 1.1rem var(--font-display);
  color:var(--action);transition:transform .25s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 1.2rem 1.1rem;font-size:.88rem;color:var(--muted);
  line-height:1.65;margin:0}


/* reports + feedback */
.rep-note{font-size:.85rem;color:var(--muted);margin-bottom:1rem;line-height:1.6}
.rep-opt{display:block;border:1px solid var(--line);border-radius:var(--r-md);
  padding:.95rem 1.1rem;margin-bottom:.6rem;cursor:pointer;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.rep-opt:hover{border-color:var(--action);box-shadow:var(--sh-sm);
  transform:translateY(-1px)}
.rep-opt b{font:700 .92rem var(--font-display);color:var(--dark);display:block}
.rep-opt span{font-size:.78rem;color:var(--muted);line-height:1.5;display:block;
  margin-top:.15rem}
.rep-hint{font-size:.78rem;color:var(--muted);border-top:1px solid var(--line);
  padding-top:.9rem;margin-top:1rem;line-height:1.6}
.fb-actions{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.fb-review{margin-top:1.2rem;border-top:1px solid var(--line);padding-top:1rem}
.fb-review b{font:700 .88rem var(--font-display);color:var(--dark);display:block}
.fb-review span{font-size:.78rem;color:var(--muted);display:block;margin:.2rem 0 .5rem}
.fb-review a{font:700 .85rem var(--font-display);color:var(--action)}
textarea.dlg-input{resize:vertical;font-family:var(--font-body)}


.nav-plain{background:none;border:0;cursor:pointer;font:600 .9rem var(--font-display);
  color:var(--muted);padding:5px 0 6px;position:relative;white-space:nowrap}
.nav-plain::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  border-radius:var(--r-sm);background:var(--action);transform:scaleX(0);transform-origin:right;
  transition:transform .34s var(--ease)}
.nav-plain:hover{color:var(--dark)}
.nav-plain:hover::after{transform:scaleX(1);transform-origin:left}
.foot-plain{background:none;border:0;cursor:pointer;font:inherit;color:inherit;
  padding:.36rem 0;display:inline-block}
.foot-plain:hover{color:var(--surface)}


/* action chips: every AI answer ends in a next step, not a dead end */
.msg-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.15rem 0 .5rem;
  padding-right:1.5rem;animation:chipIn .4s var(--ease) both}
@keyframes chipIn{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.msg-chips{animation:none}}


.pl-sec{background:var(--c-f6f7f9)}
.pl-head{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.pl-zone{margin-left:auto;display:flex;align-items:center;gap:.5rem;
  font:600 .82rem var(--font-display);color:var(--muted)}
.pl-zone select{font:700 .84rem var(--font-display);color:var(--dark);background:var(--surface);
  border:1.5px solid var(--c-cdd2d7);border-radius:var(--r-sm);padding:.5rem .8rem;cursor:pointer}
.pl-filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.pl-filters button{font:700 .76rem var(--font-display);border:1.5px solid var(--line);background:var(--surface);
  color:var(--muted);border-radius:var(--r-pill);padding:.42rem .9rem;cursor:pointer;
  transition:border-color .18s,color .18s,background .18s}
.pl-filters button[aria-pressed="true"]{border-color:var(--action);color:var(--action);
  background:var(--action-tint)}
.pl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.pl-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1rem 1.1rem;display:flex;flex-direction:column;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.pl-card:hover{border-color:var(--action);box-shadow:var(--sh-sm);transform:translateY(-2px)}
.pl-card b{font:700 .92rem var(--font-display);color:var(--dark)}
.pl-card span{font-size:.75rem;color:var(--muted);line-height:1.45;margin:.2rem 0 .7rem}
.pl-amt{font:800 1.22rem var(--font-display);color:var(--dark);font-variant-numeric:tabular-nums;
  margin-top:auto}
.pl-amt em{font-style:normal;font-size:var(--fs-min);font-weight:600;color:var(--muted);
  display:block;margin-top:.1rem}
.pl-amt.na{font-size:.9rem;color:var(--muted);font-weight:700}
.pl-note{font-size:.75rem;color:var(--muted);margin-top:1rem;line-height:1.6}
@media(max-width:768px){.pl-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.pl-grid{grid-template-columns:1fr}.pl-zone{margin-left:0;width:100%}}


body{background:var(--c-f6f7f9)}
.bp-top{position:sticky;top:0;z-index:50;background:rgb(var(--surface-rgb)/.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.bp-top-in{max-width:1160px;margin:0 auto;padding:.7rem 24px;
  display:flex;align-items:center;gap:1.2rem}
.bp-top-in a{font:700 .85rem var(--font-display);color:var(--muted);white-space:nowrap;
  display:inline-flex;align-items:center;min-height:34px}
@media (max-width:620px){
  .bp-top-in a:not(:first-child):not(.ph){display:none}
  .bp-top-in{gap:.6rem}
  .bp-top-in .ph{font-size:.78rem}
}
@media (max-width:400px){
  .bp-top-in a:first-child{font-size:.78rem}
}
.bp-top-in a:hover{color:var(--action)}
.bp-top-in .ph{margin-left:auto;color:var(--dark)}
.bp-wrap{max-width:1160px;margin:0 auto;padding:2rem 24px 3rem}
.bp-crumb{font-size:.78rem;color:var(--muted);margin-bottom:1.2rem}
.bp-crumb a{color:var(--action);font-weight:600;display:inline-flex;
  align-items:center;min-height:44px}
.bp-head{display:grid;grid-template-columns:1.15fr 1fr;gap:1rem;margin-bottom:1rem}
.bp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2rem 2.2rem;box-shadow:var(--sh-sm)}
.bp-eyebrow{font-family:var(--font-display);
  color:var(--action);display:block;margin-bottom:.6rem}
.bp-h1{font-weight:800;line-height:1.12;font-family:var(--font-display);letter-spacing:-.03em;
  color:var(--dark);margin-bottom:.75rem}
.bp-h1 em{font-style:normal;color:var(--action)}
.bp-addr{font-size:.92rem;color:var(--muted);line-height:1.65;max-width:46ch}
.bp-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.bp-rating{margin:.5rem 0 0;font:600 14px var(--font-body);color:var(--ink)}
.bp-rating a{display:inline-flex;align-items:center;min-height:44px;color:var(--action)}
.bp-pill{display:inline-flex;align-items:center;gap:.4rem;
  font:700 var(--fs-min) var(--font-display);color:var(--ink);background:var(--ai-tint);
  border-radius:var(--r-pill);padding:.35rem .8rem}
/* --ink, matching .bp-pill above. --red on --red-soft measured 4.59: it
   passes axe, whose floor is 4.50, so it would never have appeared in an
   audit report. It carried the NABL accreditation number. Decided
   here because refusing 4.56 and 4.65 elsewhere and then keeping 4.59 would
   be the same judgement reached two different ways. The pill keeps its red
   ground, so it still reads as the red one. */
.bp-pill.red{color:var(--ink);background:var(--action-tint)}
.bp-ctas{display:flex;gap:.6rem;margin-top:1.5rem;flex-wrap:wrap}
/* ONE LINE OR ONE STACK (Phase 4e): under 600px the three buttons stack at
   full width together instead of wrapping 2 + 1 at uneven widths */
.bp-ctas>*{flex:1 1 calc((600px - 100%) * 999)}
/* A HERO CARD'S ACTIONS TAKE THE RIGHT-HAND COLUMN from 1025 (Phase 4e):
   copy and buttons both sat left, and 45-56% of a 1112px card was empty. */
@media(min-width:1025px){
  .bp-wrap>.bp-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px}
  .bp-wrap>.bp-card>*{grid-column:1}
  .bp-wrap>.bp-card>.bp-ctas{grid-column:2;grid-row:1/span 9;align-self:center;
    flex-direction:column;margin-top:0}
  .bp-wrap>.bp-card>.bp-ctas>*{flex:none}
}
.bp-btn{display:inline-block}
.bp-map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  min-height:320px;background:var(--c-eff1f4)}
.bp-map iframe{width:100%;height:100%;border:0;min-height:320px}
.bp-sec{margin-top:1.2rem}
.bp-sec-title{line-height:var(--lh-heading);font-family:var(--font-display);
  color:var(--muted);display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.bp-sec-title::after{content:"";flex:1;height:1px;background:var(--line)}
.bp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem}
.bp-mod{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:.9rem 1rem}
.bp-mod b{font:700 .88rem var(--font-display);display:block;color:var(--dark)}
.bp-mod span{font-size:var(--fs-min);color:var(--muted);line-height:1.4}
.bp-note{font-size:.75rem;color:var(--muted);margin-top:1.2rem;line-height:1.6}
.bp-inline{color:var(--action);font-weight:600;display:inline-flex;align-items:center;
  min-height:34px}
.bp-foot{border-top:1px solid var(--line);background:var(--surface);margin-top:2.5rem}
.bp-foot-in{max-width:1160px;margin:0 auto;padding:1.4rem 24px;
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;
  font-size:.78rem;color:var(--muted)}
.bp-foot-in a{color:var(--action);font-weight:600;display:inline-flex;
  align-items:center;min-height:34px}
.bp-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.bp-spec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:.9rem 1rem}
.bp-spec b{font:700 .88rem var(--font-display);color:var(--dark);display:block}
.bp-spec span{font-size:.78rem;color:var(--muted);display:block;margin-top:.1rem}
/* .70, not .62. At .62 the composited text of a card that says a service
   is NOT AVAILABLE AT THIS CENTRE measured 4.45 - the fade was making the
   sentence that prevents a wasted journey the hardest one to read. The off
   signal does not live only in the opacity: the card says so in words, and
   the fade reinforces that rather than carrying it. .70 still reads as
   dimmed beside its bright siblings and takes the words to 5.55. */
.bp-spec.off{opacity:.70}
/* --ink-deep, matching .bp-spec b above. This said var(--steel) to mute the
   text of a card that is already faded to .70 - muting twice - and the
   composite measured 3.08, the worst reading on the site. It had also just
   become a no-op: --steel now holds --slate's value, which is exactly what
   .bp-spec span already sets, so the rule was overriding a colour with
   itself. The fade carries the off state; the colour does not need to help.
   5.58 composited. */
.bp-spec.off span{color:var(--dark)}
.bp-spec i{font-style:normal;font-size:var(--fs-min);color:var(--ink);
  background:var(--ai-tint);border-radius:var(--r-pill);padding:.12rem .5rem;
  display:inline-block;margin-top:.35rem}
.mri-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
/* THE PRICE SITS BESIDE THE TITLE (Phase 4e): a short description left
   the card 44% empty at the right. It wraps under the title, still at the
   right, when the two do not fit on one line. */
.mri-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.1rem 1.15rem;transition:border-color .2s,box-shadow .2s,transform .2s;
  display:flex;flex-wrap:wrap;align-items:baseline;align-content:flex-start;column-gap:10px}
.mri-card:hover{border-color:var(--action);box-shadow:var(--sh-sm);
  transform:translateY(-2px)}
.mri-card b{font:700 .95rem/var(--lh-heading) var(--font-display);color:var(--dark);flex:1 1 auto}
.mri-card span{font-size:.78rem;color:var(--muted);line-height:1.5;flex:1 1 100%;order:2;
  margin-top:.25rem}
.mri-card em{font-style:normal;font-size:var(--fs-min);color:var(--action);font-weight:700;
  margin-left:auto;order:1;white-space:nowrap}
.doc-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.doc-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.15rem 1.25rem}
.doc-item b{font:700 .95rem/var(--lh-heading) var(--font-display);color:var(--dark);display:block;
  margin-bottom:.3rem}
.doc-item span{font-size:.84rem;color:var(--muted);line-height:1.6}
@media (max-width:768px){.mri-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){
  .bp-specs{grid-template-columns:1fr}
  .doc-list{grid-template-columns:1fr}
  .bp-head{grid-template-columns:1fr}
  .bp-grid{grid-template-columns:repeat(2,1fr)}
  .bp-top-in{gap:.8rem;overflow-x:auto}
}
@media (max-width:620px){.bp-grid{grid-template-columns:1fr}}

/* KEPT, BECAUSE IT CARRIES BreadcrumbList for search - but tight, small
   and close to the panel rather than a line of its own height. */
.bp-crumb{font-size:12.5px;margin:0 0 10px;padding:0}
.tp-wrap{max-width:1160px}
/* §6: content capped at 1344. THE HEADER IS WIDENED WITH IT, from THIS
   page's stem only. .w is the shell's container and lives in site.css at
   1240; overriding it here reaches tests.html and nothing else, so the page
   and the header above it share an edge without the shared sheet moving by
   a byte. */
.bp-wrap{max-width:1344px}
header .w,.util .w{max-width:1344px}
.tp-home{font:400 .76rem/1.5 var(--font-body);color:var(--c-5a6169);
  margin:0 .6rem .5rem}

/* ---- §1.1 MOST SEARCHED ------------------------------------------------ */
.tp-row3{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:.7rem}
/* ink-soft, not ink-mute: this label sits on the PAGE GROUND, where
   ink-mute measures 4.35:1. Same trap as the Sort label. */
.tp-ms-l{font:600 .78rem var(--font-body);color:var(--c-5a6169);margin-right:.2rem}
.tp-ms{font:500 .78rem var(--font-body);color:var(--ink);background:var(--surface);
  border:1px solid var(--c-e4e7e9);border-radius:var(--r-lg);padding:.35rem .8rem;
  min-height:34px;cursor:pointer}
.tp-ms:hover{border-color:var(--c-d5d9dc);background:var(--c-f4f5f6)}

/* ---- §1.2 BODY-PART ENTRY BAND ---------------------------------------- */
.tp-band{background:var(--surface);border:1px solid var(--c-e4e7e9);
  border-radius:var(--r-lg);padding:1.3rem 1.7rem 1.4rem;margin-bottom:26px}
.tp-band-top{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.tp-band-top p{margin:0;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.tp-band-top b{font:700 1.05rem var(--font-display);color:var(--ink)}
.tp-band-top span{font:400 .88rem var(--font-body);color:var(--c-5a6169)}
/* NOT TEAL, AND THE DESIGN REFERENCE IS WRONG ABOUT THIS ONE.
   main.html draws "Browse by symptom instead" in --teal, and the lock's own
   colour rule says the opposite: "--teal means AI. If a surface is teal, an
   AI wrote what is on it. NOTHING ELSE MAY USE TEAL." This link is
   navigation, not an answer. testspage_test.py caught it copying the
   reference rather than the rule. */
.tp-band-alt{font:600 .85rem var(--font-body);color:var(--action-hover);
  text-decoration:none}
.tp-band-alt:hover{text-decoration:underline}
.tp-tiles{display:flex;gap:12px;flex-wrap:wrap}
.tp-tile{flex:1 1 0;min-width:120px;min-height:88px;border:1px solid var(--c-e4e7e9);
  border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:.6rem;text-decoration:none;background:var(--surface)}
.tp-tile span{font:500 .82rem var(--font-body);color:var(--ink)}
.tp-tile:hover{border-color:var(--action);background:var(--c-fbeef0)}

/* ---- §1.3 AI STRIP. THE ONLY TEAL SURFACE ON THE PAGE ------------------
   The design lock: "If a surface is teal, an AI wrote what is on it."
   testspage_test.py asserts teal appears ONLY inside .tp-ai, so teal
   leaking onto a row or a filter fails rather than merely looking wrong. */
.tp-ai{background:var(--surface);border:1px solid var(--c-bfdddf);
  border-radius:var(--r-lg);padding:1.25rem 1.7rem;margin-bottom:26px;
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  flex-wrap:wrap}
.tp-ai-t{display:flex;flex-direction:column;gap:.25rem;min-width:260px}
.tp-ai-t b{font:700 1.05rem var(--font-display);color:var(--ink)}
.tp-ai-t span{font:400 .86rem var(--font-body);color:var(--c-5a6169)}
.tp-ai-a{display:flex;gap:.6rem;flex-wrap:wrap}
.tp-ai-up,.tp-ai-go{display:inline-flex}
.tp-ai-chev{display:none;font:700 26px/1 var(--font-display)}

/* ---- §2.1 THE QUERY LINE ---------------------------------------------
   search.html's own numbers: 13.5px label, a 16px bold term in curly
   quotes, a #C7CBCE pipe, then the live filters as chips. THE CHIPS ARE
   NOT DECORATION - each one removes the filter it names, because a filter
   a patient cannot see is a filter they cannot undo, and this page has
   four of them (centre, and three checkboxes) spread across a sidebar
   they may have scrolled past. */
.tp-query{margin-bottom:1.1rem}
.tp-q-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.tp-q-line>span{font:400 .84rem var(--font-body);color:var(--c-5a6169)}
.tp-q-line>b{font:700 1rem var(--font-display);color:var(--ink)}
/* A RULE, NOT A CHARACTER. The reference draws this divider as a "|" glyph
   in #C7CBCE, and a glyph is TEXT: testspage_test measured it at 1.33:1 on
   the page ground and was right to - it cannot know that this particular
   text is not meant to be read. Painting it darker to clear 4.5:1 would
   have made a separator louder than the words either side of it, and
   exempting it would have been the gate re-aimed at something easier. It is
   a 1px rule instead, which is what it always was, and carries no text for
   the gate to measure. */
.tp-q-div{width:1px;height:16px;flex-shrink:0;
  background:var(--c-d5d9dc)}
.tp-chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tp-active{margin:-.2rem 0 .8rem}
.tp-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;
  padding:0 12px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--c-d5d9dc);color:var(--ink);
  font:500 .81rem var(--font-body);cursor:pointer}
.tp-chip-c{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.tp-chip:hover{border-color:var(--action);color:var(--action)}
.tp-chip-c:hover{background:var(--c-5a6169);border-color:var(--c-5a6169);
  color:var(--surface)}
.tp-chip svg{flex-shrink:0}

/* ---- §2.3 THE MATCH, AND THE ONE PROMOTED ROW -----------------------
   <mark> on the substring the patient actually typed. The reference paints
   the tag #C3455A on #FBEEF0, WHICH IS 4.33:1 - under the 4.6:1 its own
   lock calls the page minimum, and under 4.5:1 for 11.5px bold text. The
   deep action colour is 5.71:1 on the same tint and is what the selected
   sidebar item already uses for exactly this reason. */
.tp-item mark{background:var(--c-fbeef0);color:var(--ink);
  padding:0 2px;border-radius:var(--r-sm)}
.tp-promo{background:var(--c-fdfbfb)}
.tp-tag{font:600 var(--fs-min) var(--font-body);letter-spacing:.04em;align-self:flex-start;
  color:var(--action-hover);background:var(--c-fbeef0);
  padding:4px 8px;border-radius:var(--r-sm);white-space:nowrap}

/* ---- §1.4 FILTERS ------------------------------------------------------ */
.tp-sl2{margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--c-edeff1)}
.tp-filters{display:block}
.tp-f{display:flex;align-items:center;gap:.55rem;min-height:44px;
  padding:0 .6rem;cursor:pointer}
.tp-f input{accent-color:var(--action);width:16px;height:16px;cursor:pointer}
.tp-f span{font:500 .8rem var(--font-body);color:var(--c-5a6169)}
.tp-f:hover span{color:var(--ink)}

/* ---- §1.4 PAGER · §1.5 PACKAGE NUDGE ----------------------------------- */
.tp-pager{display:flex;flex-direction:column;align-items:center;gap:16px;
  margin-top:1.2rem}
.tp-more[hidden]{display:none}
.tp-showing{font:400 .82rem var(--font-body);color:var(--c-5a6169);margin:0}
.tp-nudge{background:var(--surface);border:1px solid var(--c-e4e7e9);
  border-radius:var(--r-lg);padding:1.4rem 1.8rem;margin-top:26px;
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  flex-wrap:wrap}
.tp-nudge b{font:700 1.1rem var(--font-display);color:var(--ink);display:block}
.tp-nudge span{font:400 .88rem var(--font-body);color:var(--c-5a6169)}
.tp-nudge-go{display:inline-flex}
/* ---- §1.1 THE SEARCH PANEL -------------------------------------------
   Numbers from 01-DESIGN-LOCK and 02-PAGE-SPECS, not estimated: panel
   radius 18 and padding 32/36/28; h1 34px/700 display at -0.02em; eyebrow
   11.5px/600/0.1em in --action; lead 15px --ink-soft capped at 620px; the
   search line 12px gap with every control 62px tall; the note a --ground
   pill at 10px/14px, 13px text. */
.tp-panel{background:var(--surface);border:1px solid var(--c-e4e7e9);
  border-radius:var(--r-lg);padding:32px 36px 28px;margin-bottom:26px}
.tp-panel-h{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:20px}
.tp-eyebrow{font-family:var(--font-body);
  color:var(--action-hover);margin:0 0 6px}
.tp-h1{font-weight:700;line-height:1.15;font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink);
  margin:0 0 8px}
.tp-lead{font-weight:400;line-height:1.55;font-family:var(--font-body);color:var(--c-5a6169);
  max-width:620px;margin:0}
.tp-note-pill{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  background:var(--c-f4f5f6);border-radius:var(--r-md);padding:10px 14px;
  font:400 13px var(--font-body);color:var(--c-5a6169);margin:0}
.tp-controls{position:sticky;top:52px;z-index:40;background:var(--c-f6f7f9);
  padding:.9rem 0 .7rem;border-bottom:1px solid var(--line);margin-bottom:1rem}
.tp-mag{color:var(--action);font-weight:700}
.tp-row1{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.tp-search{flex:1 1 0;min-width:240px;min-height:62px;display:flex;
  align-items:center;gap:.6rem;background:var(--surface);
  border:1.5px solid var(--c-d5d9dc);border-radius:var(--r-md);
  padding:0 20px}
.tp-search input{flex:1;border:0;outline:0;font:500 .95rem var(--font-body);
  padding:.7rem 0;background:transparent;color:var(--dark);min-width:0}
.tp-search input::placeholder{color:var(--muted)}
.tp-search input,.tp-search input::placeholder{text-overflow:ellipsis}
.tp-search:not(.has-text) .tp-clear{display:none}
.tp-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.tp-clear{border:0;background:var(--c-eff1f4);color:var(--muted);border-radius:var(--r-pill);
  width:34px;height:34px;min-height:34px;cursor:pointer;font:700 1rem var(--font-display);
  flex-shrink:0}
.tp-zone select{font:600 15px var(--font-body);color:var(--ink);background:var(--surface);
  border:1.5px solid var(--c-d5d9dc);border-radius:var(--r-md);
  padding:0 14px;min-height:62px;width:232px;cursor:pointer}
/* ======== §3 BODY / SYMPTOM PAGE =======================================
   Same stem as the price list: same tokens, same rows, same controls. */
/* THE SKIP LINK IS STYLED HERE BECAUSE THIS PAGE DOES NOT LOAD style.css.
   .skip lives in the style stem, which tests-body.html does not link - so
   the link rendered as visible text above the trust bar. Two rules, copied
   verbatim from that sheet rather than re-invented, so the two cannot
   disagree about where a focused skip link lands. */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:var(--surface);
  padding:10px 16px;border-radius:var(--r-sm)}
.br-wrap{max-width:1344px}
.br-draft{background:var(--c-fdf4e3);color:var(--c-8a5a12);
  border:1px solid var(--c-e7d3a8);border-radius:var(--r-md);padding:.65rem .9rem;
  font:600 .82rem var(--font-body);margin:0 0 1.1rem}
.br-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:26px}
.br-top .bp-addr{max-width:700px}
.br-tabs{display:flex;gap:5px;background:var(--surface);border:1px solid var(--c-e4e7e9);
  border-radius:var(--r-md);padding:5px}
.br-tab{min-height:42px;padding:0 1.1rem;border:0;background:transparent;
  border-radius:var(--r-sm);font:600 .85rem var(--font-body);color:var(--c-5a6169);
  cursor:pointer}
.br-tab-on{background:var(--ink);color:var(--surface)}
.br-stage[hidden]{display:none}
/* §3.2 and §3.3 SIT SIDE BY SIDE, which is the shape of the screen rather
   than a preference: "Body map - 660px wide" and "Region panel - fills the
   remaining width". Stacked, the reader scrolls past a full-height diagram
   to reach the tests it is a control for. */
#tabBody{display:flex;gap:26px;align-items:flex-start}
.br-map{display:flex;gap:14px;align-items:center;background:var(--surface);
  border:1px solid var(--c-e4e7e9);border-radius:var(--r-lg);
  padding:26px 24px;justify-content:center;flex:0 0 660px}
.br-panels{flex:1;min-width:0}
.bm-col{display:flex;flex-direction:column;gap:12px;width:178px;flex:0 0 178px}
.bm-btn{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  min-height:52px;border:1px solid var(--c-e4e7e9);background:var(--surface);
  border-radius:var(--r-md);padding:0 .85rem;cursor:pointer;text-align:left;
  font:500 .84rem var(--font-body);color:var(--ink)}
.bm-right .bm-btn{flex-direction:row-reverse}
.bm-pip{width:9px;height:9px;border-radius:var(--r-pill);background:var(--c-d5d9dc);
  flex:0 0 9px}
.bm-btn.bm-on{background:var(--c-fbeef0);border:1.5px solid var(--action);
  font-weight:600;color:var(--action-hover)}
.bm-btn.bm-on .bm-pip{background:var(--action)}
/* THE FIGURE (Phase 5, tester point 12): body_figure.py draws it, config places
   its pins. The selected organ fills and outlines in the action colour; a pin is
   hollow until selected, because eleven solid dots read as a rash. */
.bm-figw{position:relative;flex:0 0 228px;width:228px;height:440px}
.bm-fig{display:block}
.bm-hit{position:absolute;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.bm-hit:focus{outline:none}
.bm-body{fill:var(--c-f4f5f6);stroke:var(--c-c7cbce);stroke-width:1.5;stroke-linejoin:round}
.bm-org{fill:var(--surface);stroke:var(--line);stroke-width:1.4;stroke-linejoin:round;transition:fill .15s,stroke .15s}
.bm-hl .bm-org{stroke:var(--action)}
.bm-m-on .bm-org{fill:var(--c-fbeef0);stroke:var(--action)}
.bm-dot{fill:var(--surface);stroke:var(--muted);stroke-width:1.3;transition:r .15s,fill .15s,stroke .15s}
.bm-halo{fill:var(--c-fbeef0);opacity:0;transition:opacity .15s}
.bm-m-on .bm-dot{fill:var(--action);stroke:var(--action);r:3.5}
.bm-m-on .bm-halo,.bm-hl .bm-halo{opacity:1}
.bm-hl .bm-dot{fill:var(--action);stroke:var(--action)}
.bm-fv .bm-halo{opacity:1;stroke:var(--action);stroke-width:2}
.bm-sh:not(.bm-m-on):not(.bm-hl):not(.bm-fv) .bm-dot{visibility:hidden}
.bm-btn.bm-hl{border-color:var(--action)}
@media(prefers-reduced-motion:reduce){.bm-dot,.bm-halo,.bm-org{transition:none}}
.br-panel{background:var(--surface);border:1px solid var(--c-e4e7e9);
  border-radius:var(--r-lg);padding:26px 28px;scroll-margin-top:calc(var(--header-h,72px) + 8px)}
.br-panel[hidden]{display:none}
.br-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;border-bottom:1px solid var(--c-edeff1);
  padding-bottom:.9rem;margin-bottom:1rem}
.br-eyebrow{font-family:var(--font-body);
  color:var(--c-6e757c);margin:0 0 .2rem}
.br-head h2{font-weight:700;font-family:var(--font-display);color:var(--ink);margin:0}
.br-words{font:400 .88rem var(--font-body);color:var(--c-5a6169);margin:.2rem 0 0}
.br-from{font:400 .84rem var(--font-body);color:var(--c-5a6169);margin:0}
.br-tier{margin-bottom:1.1rem}
.br-th{display:flex;align-items:center;gap:.6rem;font:700 .93rem var(--font-display);
  color:var(--ink);margin:0 0 .55rem}
.br-num{width:22px;height:22px;border-radius:var(--r-pill);background:var(--c-d5d9dc);
  color:var(--surface);display:inline-flex;align-items:center;justify-content:center;
  font:700 var(--fs-min) var(--font-body);flex:0 0 22px}
.br-num1{background:var(--ink)}
.br-row{display:flex;align-items:center;gap:20px;
  border:1px solid var(--c-e4e7e9);border-radius:var(--r-md);padding:16px 18px;
  margin-bottom:.5rem}
.br-n{flex:1;min-width:0}
.br-right{display:flex;align-items:center;gap:18px;flex-shrink:0}
.br-t1{border:1.5px solid var(--action);background:var(--c-fdfbfb)}
.br-n b{font:600 .93rem var(--font-body);color:var(--ink)}
.br-t1 .br-n b{font-size:1rem}
/* A FIXED COLUMN, right-aligned, so the figure cannot shift the Book
   button either - a range like "₹5,000 – ₹7,000" is far wider than "₹300". */
.br-p{text-align:right;flex-shrink:0;width:150px}
.br-fig{font:700 1.1rem var(--font-display);color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.br-at{font:400 var(--fs-min) var(--font-body);color:var(--c-6e757c)}
.br-go{width:84px;flex-shrink:0;display:inline-grid;place-items:center}
/* REQUIRED BY §3.3. Not a tooltip, not shortened, and never display:none. */
.br-safety{font:400 .78rem/1.6 var(--font-body);color:var(--c-5a6169);
  margin:.9rem 0 0;padding-top:.8rem;border-top:1px solid var(--c-edeff1)}
.br-grid-h{margin-bottom:1rem}
.br-grid-h b{font:700 1.2rem var(--font-display);color:var(--ink);display:block}
.br-grid-h span{font:400 .88rem var(--font-body);color:var(--c-5a6169)}
.br-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.br-card{background:var(--surface);border:1px solid var(--c-e4e7e9);border-radius:var(--r-md);
  padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.br-card h3{font-weight:600;font-family:var(--font-body);color:var(--ink);margin:0}
.br-card-t{font:400 .8rem/1.5 var(--font-body);color:var(--c-5a6169);margin:0}
.br-card-f{font:600 .8rem var(--font-body);color:var(--action-hover);margin:0}
/* A CARE-FIRST CARD CARRIES NO PRICE AND NO BOOK CONTROL. distressed()
   fires on this symptom's own words, and the gateway answers those words
   care-first with nocard; the page may not answer them the opposite way. */
.br-care{border:1.5px solid var(--c-8a5a12);background:var(--c-fdf4e3)}
.br-care h3{color:var(--c-8a5a12)}
.br-care-l{font:700 .86rem/1.5 var(--font-body);color:var(--c-8a5a12);margin:0}
.br-care-w{font:400 .78rem/1.5 var(--font-body);color:var(--c-8a5a12);margin:0;
  opacity:.85}
.br-ai{margin-top:26px}
@media(max-width:1240px){
  #tabBody{flex-direction:column}
  .br-map{flex:1 1 auto;width:100%}
  /* the column's width, not the panel's min-content: flex-start sized it to
     its fixed price and Book columns, 21px past a 375 screen (Phase 4e) */
  .br-panels{align-self:stretch;width:100%}
}
@media(max-width:768px){
  .br-map{flex-wrap:wrap}
  .br-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  /* THE PICKER FIRST, THE FIGURE OFF (Phase 4e, tester point 9). Stacked,
     the 440px figure sat between five regions and the other five, and the
     tests were four screens down. The figure is aria-hidden reinforcement;
     the ten buttons are the interface, so they become one 2-column grid of
     44px chips straight under the title, and the panel follows them. */
  .br-map{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
  .bm-figw{display:none}
  .bm-col{width:auto;gap:8px}
  .bm-btn{min-height:44px;padding:0 .7rem}
  .br-panel{padding:18px 16px}
  .br-right{flex:1 1 100%;justify-content:space-between}
  .br-p{width:auto;text-align:left}
  .br-grid{grid-template-columns:1fr}
  .br-row{flex-wrap:wrap}
}

/* ---- THE TWO COLUMNS: SIDEBAR 262 + GAP 26 + RESULTS ------------------- */
.tp-cols{display:flex;gap:26px;align-items:flex-start}
/* THE STICKY OFFSET IS WRITTEN ONCE. top: and max-height: need the same
   number and two copies of it is how one goes stale. */
.tp-side{--tp-stick:132px;
  flex:0 0 262px;background:var(--surface);border:1px solid var(--c-e4e7e9);
  border-radius:var(--r-lg);padding:1.1rem .85rem;
  position:sticky;top:var(--tp-stick);
  /* AND IT FITS THE SCREEN IT IS STUCK TO. Ponraman's UAT review: the
     category list pushes the page off screen. Measured at 1440 - the panel
     is 955px tall in a 900px viewport, because Lab tests has TEN legacy
     categories where the design reference's mock listed six. A sticky
     element taller than the viewport does not stay put; it scrolls away,
     and the FILTERS at its foot are then reachable only by scrolling past
     2,006 rows.
     The ten categories are real and hiding four of them would hide
     navigation, so the panel scrolls instead - which is what this same
     element already does as the phone sheet at 767 and below. The 1rem is
     the gap under it, so the last filter is not flush with the edge. */
  max-height:calc(100vh - var(--tp-stick) - 8px);
  overflow-y:auto;overscroll-behavior:contain}
.tp-sl{font:600 var(--fs-min) var(--font-body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-6e757c);margin:0 0 .5rem .35rem}
.tp-res{flex:1;min-width:0}

/* THE SIDEBAR IS STILL .tp-depts. uitest.py asserts this page offers more
   than twenty department filters and that clicking one narrows the list;
   both are still true of the grouped control, so the gate keeps measuring
   the thing it was written for instead of being re-aimed at the new one. */
.tp-depts{display:block}
.tp-depts button{display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;width:100%;text-align:left;font:500 .83rem var(--font-body);
  border:0;background:transparent;color:var(--c-5a6169);
  border-radius:var(--r-md);padding:.5rem .6rem;cursor:pointer;
  min-height:34px}
.tp-depts button:hover{background:var(--c-f4f5f6)}
.tp-all{font-weight:600!important;color:var(--ink)!important;min-height:44px!important}
.tp-all span{font:600 .78rem var(--font-body);color:var(--c-6e757c)}
.tp-depts .tp-gh{font:600 .83rem var(--font-body);color:var(--ink);min-height:44px}
.tp-depts .tp-gh::after{content:"\203A";font-size:1.05rem;line-height:1;
  color:var(--c-6e757c);transform:rotate(90deg);transition:transform .12s}
.tp-depts .tp-gh[aria-expanded="false"]::after{transform:none}
.tp-gc{display:block;padding-left:.75rem}
.tp-gc[hidden]{display:none}
.tp-gc button{font-size:.79rem;padding-left:.75rem}
.tp-depts button[aria-pressed="true"]{background:var(--c-fbeef0);
  color:var(--action-hover);font-weight:600}
.tp-depts button[aria-pressed="true"] span{color:var(--action-hover)}
.tp-grp+.tp-grp,.tp-all+.tp-grp{border-top:1px solid var(--c-edeff1);
  margin-top:.3rem;padding-top:.3rem}

.tp-conds{font-size:.76rem;line-height:1.6;color:var(--c-5a6169);
  margin:0 .6rem}
.tp-conds a{color:var(--action);font-weight:600;text-decoration:underline;
  white-space:nowrap}
.tp-conds a:hover,.tp-conds a:focus-visible{text-decoration:none}

/* ---- RESULTS HEADER ---------------------------------------------------- */
.tp-rh{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin:.1rem 0 .7rem}
.tp-count{font:700 1.1rem var(--font-display);color:var(--ink);margin:0}
.tp-count i{font-style:normal;font-weight:400;font-size:.82rem;
  font-family:var(--font-body);color:var(--c-5a6169)}
.tp-sortw{display:flex;align-items:center;gap:.45rem}
/* --mq-ink-soft, NOT --mq-ink-mute, AND THE DIFFERENCE IS THE BACKGROUND.
   ink-mute is 4.67:1 on white and the design lock calls it the floor on that
   basis - but this label and .tp-note below sit on the PAGE GROUND, not on a
   card, and measured there they are 4.38:1. Nothing in the sheet says so:
   the ground is painted by an ancestor the rule never mentions. Found by
   testspage_test.py measuring every text colour against its EFFECTIVE
   background, after hand arithmetic against white had passed both of them. */
.tp-sortw label{font:500 .78rem var(--font-body);color:var(--c-5a6169)}
.tp-sortw select{font:500 .8rem var(--font-body);color:var(--ink);background:var(--surface);
  border:1px solid var(--c-d5d9dc);border-radius:var(--r-md);padding:.4rem .55rem;
  min-height:40px;cursor:pointer}

/* ---- ROWS, NOT CARDS --------------------------------------------------- */
.tp-list{border:1px solid var(--c-e4e7e9);border-radius:var(--r-lg);
  overflow:hidden;background:var(--surface)}
.tp-item{display:flex;align-items:center;gap:1.4rem;padding:1.05rem 1.3rem;
  border-bottom:1px solid var(--c-edeff1)}
.tp-item:last-child{border-bottom:0}
.tp-item:hover{background:var(--c-fdfbfb)}
.tp-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:.35rem}
.tp-name b{font:600 .94rem/1.35 var(--font-body);color:var(--ink);display:block}
.tp-cat{font:500 var(--fs-min) var(--font-body);color:var(--c-5a6169);
  background:var(--c-f4f5f6);border-radius:var(--r-sm);
  padding:.14rem .45rem;align-self:flex-start}
.tp-tat{font:400 var(--fs-min) var(--font-body);color:var(--c-5a6169)}
/* THE PREPARATION PILL HOLDS MEDQUEST'S OWN WORDS, AT FULL LENGTH.
   The pack draws a 6px tag holding "Fasting 10-12 hrs". config holds the
   line the MD approved on 2026-08-24 - "Usually no fasting. Remove metal
   objects, jewellery, watches." - and shortening it to fit a tag would make
   the stylesheet the editor of clinical copy. The pill wraps instead. */
.tp-prep{font:400 var(--fs-min)/1.5 var(--font-body);color:var(--c-8a5a12);
  background:var(--c-fdf4e3);border-radius:var(--r-sm);padding:.35rem .55rem}
.tp-pr{text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.tp-price{font-weight:700;font-size:1.05rem;font-family:var(--font-display);font-style:normal;
  line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.tp-price.na{font-size:.78rem;font-weight:700;color:var(--c-6e757c)}
/* THE CENTRE TRAVELS WITH THE PRICE. Empty in the HTML and written by
   render(), beside the figure, in one statement - see ZONE-PRICE-REGRESSION-01
   for what two code paths did to a Kakinada visitor's MRI price. */
.tp-at{font:400 var(--fs-min) var(--font-body);color:var(--c-6e757c);margin-top:.15rem;
  white-space:nowrap}
.tp-go{flex-shrink:0}
.tp-empty{padding:2.4rem 1rem;text-align:center;color:var(--c-5a6169);font-size:.9rem}
.tp-note{font-size:.75rem;color:var(--c-5a6169);margin-top:1rem;line-height:1.6}
.tp-wrap :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* the two text fields show focus on the field itself (brand ring), not the
   ink outline, which drew a dark box inside the pill on a phone */
.tp-wrap .tp-search input:focus-visible,.tp-wrap .mqc-form textarea:focus-visible{outline:0}
.tp-wrap .tp-search:focus-within{border-color:var(--action);box-shadow:var(--ring)}
.tp-wrap .mqc-form textarea:focus-visible{border-color:var(--action);box-shadow:var(--ring)}
/* A FIXED HEIGHT, NOT A MINIMUM, AND THE GATE IS WHAT SETTLED IT. min-height
   reserves nothing: the card sat at 232px until a price card arrived, then
   grew to fit it and moved the first row 186px down the page. Measured, and
   exactly the fault this reserve exists to prevent - the list moving under a
   reader who is looking at it.
   So the host IS its reserve. The log takes whatever the composer leaves and
   scrolls inside that, which is why it must also keep its box when empty:
   .mqc-log:empty is display:none everywhere else, and here that would hand
   the space back and reintroduce the shift from the other side. */
/* AND THE CARD NEEDS ITS OWN FRAME HERE. .mqc carries no border or
   background of its own - on the homepage the frame belongs to .askcard,
   which is that page's wrapper and correctly stayed in the home stem. So on
   this page the component arrived unframed: a composer and some chips
   floating on the page ground. The frame is this page's to give, in this
   page's panel values, which is also why it lives in this sheet. */
.tp-wrap .mqc.mqc-inline{height:332px;display:flex;flex-direction:column;
  margin-bottom:1.3rem;background:var(--surface);
  border:1px solid var(--c-e4e7e9);border-radius:var(--r-lg);
  padding:18px 20px}
/* the send button sat flush against the card's rounded border; two
   pixels is the difference between a button at the edge and a button
   being cut by it */
.tp-wrap .mqc.mqc-inline .mqc-form{margin-right:2px}
/* AND THE SEND CONTROL HAS TO FIT ITS OWN LABEL. .mqc-send is a 42px
   SQUARE in the component sheet, sized for an icon, and this host renders
   the word "Search" in it - measured 42px wide against a scrollWidth of
   44, so the label was clipped by two pixels and the button read as cut
   off by the card's border. The homepage does not have this because
   .askcard widens it, and .askcard is that page's wrapper: the same shape
   as the missing frame above, a page-scoped rule the component correctly
   does not carry. These are .askcard's own values. */
.tp-wrap .mqc .mqc-send{width:auto;min-width:44px}
.tp-wrap .mqc.mqc-inline .mqc-log{display:flex;flex:1 1 auto;min-height:0;
  max-height:none;overflow-y:auto;overscroll-behavior:contain}
/* AN EMPTY LOG TAKES NO ROOM. It is display:none everywhere else; here it
   has to keep its box so the reserve is real, but flexing while empty put
   261px of nothing ABOVE the composer and pushed it to the foot of the card.
   Collapsed when empty, the composer sits at the top and the reserve shows
   as space below it - which reads as a card waiting rather than as a
   rendering fault. */
.tp-wrap .mqc.mqc-inline .mqc-log:empty{display:block;flex:0 0 auto;
  min-height:0}
@media(max-width:620px){
  /* a phone: the card is content-high (the fixed reserve read as a fault)
     and the composer stacks, as .askcard does on the home page */
  .tp-wrap .mqc.mqc-inline{height:auto;padding:14px 16px}
  .tp-wrap .mqc.mqc-inline .mqc-log{max-height:340px}
  .tp-wrap .mqc.mqc-inline .mqc-form{flex-wrap:wrap;margin-right:0}
  .tp-wrap .mqc.mqc-inline .mqc-form textarea{flex:1 1 100%}
  .tp-wrap .mqc.mqc-inline .mqc-send{width:100%}
}
/* §2.1's SUPPORT CONTROL is .btn.btn-secondary (Phase 4c: one button
   family, so the paint is the family's, not this page's). It stays on a
   phone because the shell's hide rule names it: .hacts .btn that is not
   .btn-primary is display:none below 1180px, EXCEPT .tp-support - which is
   how the per-test control once vanished from every phone with all its
   gates green, and must not again. */

@media(max-width:768px){
  .tp-cols{flex-direction:column}
  /* NOT STUCK, SO NOT BOUNDED. At 768 and below the columns stack and the
     sidebar sits in the normal flow above the list; a max-height here
     would put a scrollbar inside a panel that has the whole page to grow
     into. The phone sheet at 767 sets its own, and comes after this. */
  /* C9: the sheet (§4.6) covers 621-768 too. */
  /* AND THE RESULTS COLUMN NEEDS ITS WIDTH SAYING TOO, which is not
     symmetry for its own sake. .tp-cols is align-items:flex-start, so the
     moment it turns into a column NOTHING stretches its children: .tp-res
     falls back to fit-content and sizes to the widest row it holds. Measured
     at 390 that is 510px inside a 342px column - 144px of sideways page
     scroll on the width most patients arrive on. It was latent before this
     commit and invisible, because the browser suite ran 1440 and 900 and
     510px fits inside both. min-width:0 does not help: it only permits
     shrinking, and flex-start never asked the box to shrink. */
  .tp-res{width:100%}
  /* §4.6 the sheet. VISIBILITY, NOT TRANSFORM ALONE: a panel translated
     off the bottom of the screen is still in the tab order, so a closed
     sheet would have handed a phone user 28 invisible department buttons
     before the first price. visibility takes it out of the tree for the
     keyboard and is delayed so the slide still plays on the way out. */
  .tp-side{position:fixed;inset:auto 0 0 0;width:auto;max-height:82vh;
    overflow:auto;z-index:61;background:var(--surface);
    border-radius:var(--r-lg) var(--r-lg) 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    /* A BORDER, NOT A SHADOW. 01-DESIGN-LOCK forbids shadows outright -
       elevation on this site is the border and the ground colour - and
       testspage_test asserts nothing in .tp-wrap casts one. The scrim
       behind the sheet is what separates it from the page. */
    border-top:1px solid var(--c-d5d9dc);
    transform:translateY(100%);visibility:hidden;
    transition:transform .22s ease,visibility 0s linear .22s}
  .tp-sheet-on{transform:translateY(0);visibility:visible;
    transition:transform .22s ease,visibility 0s}
  .tp-sheet-x{display:block;position:sticky;top:0;margin-left:auto;
    background:var(--surface);border:none;color:var(--c-5a6169);
    font:400 24px/1 var(--font-display);min-height:44px;width:44px;cursor:pointer}
  .tp-scrim{position:fixed;inset:0;z-index:60;background:rgb(var(--ink-rgb)/.42)}

}
/* §1.1 IS A DESKTOP PANEL AND AT 375 IT WAS A REGRESSION. Applied whole, its
   three 62px controls stack into 186px of chrome before the first price:
   measured, the first row moved from y=1,972 to y=2,404. These are §4's own
   phone numbers - h1 21px, sub 13px, a 52px search field, the centre chip at
   44px per §0.2 - and §4's phone block carries NO Search button and no note
   pill, so neither renders here. This is not the phone layout, which is its
   own commit; it is §1.1 not being allowed to cost 432px on the way there. */
@media(max-width:620px){
  .tp-panel{padding:20px 16px 18px}
  .tp-note-pill{display:none}
  .tp-search{min-height:52px;flex-basis:100%}
  .btn.tp-searchgo{display:none} /* two classes: site.css's .btn beat one (as C9) */
  .tp-zone,.tp-zone select{width:100%;min-height:44px}
  /* §4's phone stack has no Most searched row either - it goes straight
     from the search field to the category scroller. Seven chips wrapping at
     375 is four lines of furniture above the first price. */
  .tp-row3{display:none}
}

/* ---- §4. THE PHONE LAYOUT -------------------------------------------
   §4's own numbers throughout. The previous commit applied the heading
   block alone, to stop §1.1's desktop panel costing 432px here; this is the
   rest of the stack - scroller, strip, sheet, row, bar.

   THE DESKTOP MARKUP IS NOT DUPLICATED. Everything below restyles elements
   that are already in the document, and the two new blocks (the scroller
   and the bar) are display:none above 767. A phone copy of the list would
   have shipped 2,006 rows twice and then had to keep both in step. */
.tp-scroll,.tp-mbar,.tp-sheet-x{display:none}
/* C9: .btn in the later site.css beat a one-class hide at 1440. */
.tp-sheetgo.btn{display:none}
@media(max-width:768px){.tp-sheetgo.btn{display:inline-flex;flex-shrink:0}}
@media(max-width:620px){
  /* §4.4 the category scroller - white, 12px/16px, 36px chips, no wrap */
  .tp-scroll{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    background:var(--surface);padding:12px 16px;margin:0 0 12px;
    border-radius:var(--r-md);scrollbar-width:none}
  .tp-scroll::-webkit-scrollbar{display:none}
  .tp-sc{flex-shrink:0;min-height:36px;padding:0 14px;border-radius:var(--r-lg);
    background:var(--surface);border:1px solid var(--c-d5d9dc);
    color:var(--ink);font:600 .81rem var(--font-body);white-space:nowrap;
    cursor:pointer}
  .tp-sc-on{background:var(--ink);border-color:var(--ink);color:var(--surface)}

  /* §4.5 the AI strip - one full-width card, 38px tile, two lines.
     The desktop band's second action (upload a prescription) is not in
     §4's stack, and a 48px control that is not in the spec is 48px taken
     from the list. It stays on the page above 767. */
  .tp-ai{flex-direction:row;align-items:center;gap:12px;padding:14px 16px;
    border-radius:var(--r-md)}
  .tp-ai::before{content:'\2726';flex-shrink:0;width:38px;height:38px;
    border-radius:var(--r-md);background:var(--c-e6f2f3);color:var(--ai);
    display:flex;align-items:center;justify-content:center;font-size:17px}
  .tp-ai-t{flex:1;min-width:0;gap:2px}
  .tp-ai-t b{font-size:.94rem}
  .tp-ai-t span{font-size:.78rem}
  .tp-ai-a{flex-shrink:0}
  .btn.tp-ai-up{display:none} /* two classes: site.css's .btn beat one (as C9) */
  /* the chevron IS the action - a full-width card with a button inside it
     gives a tap target inside a tap target, and §4.5 draws one card */
  .tp-ai-go{width:44px}
  .tp-ai-lbl{display:none}
  .tp-ai-chev{display:inline}

  /* §4.6 count + control */
  .tp-rh{align-items:center;gap:10px}
  .tp-count{font-size:15.5px}
  .tp-sortw{display:none}

  /* §4.10 the sticky bar, and the list clearing it */
  .tp-mbar{display:flex;gap:12px;position:fixed;inset:auto 0 0 0;z-index:59;
    background:var(--surface);border-top:1px solid var(--c-e4e7e9);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  /* the page's last line clears the bar: 69px, measured (Phase 4d) */
  body:has(.tp-mbar){padding-bottom:calc(69px + env(safe-area-inset-bottom))}
  .tp-mb-wa,.tp-mb-bk{min-height:48px;display:flex;align-items:center;
    justify-content:center;border-radius:var(--r-md);font:600 .91rem var(--font-body);
    text-decoration:none}
  .tp-mb-wa{flex-grow:1;flex-basis:0;background:var(--surface);color:var(--ai);
    border:1.5px solid var(--ai)}
  .tp-mb-bk{flex-grow:1.4;flex-basis:0}
  .tp-wrap{padding-bottom:84px}

  /* §4.8 and §4.9 */
  .tp-more{width:100%}
  .tp-showing{text-align:center;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .tp-side{transition:visibility 0s}
  .tp-sheet-on{transition:visibility 0s}
}
/* §4.7 THE ROW, AND IT IS TWO STACKED BLOCKS WITH A space-between LINE
   UNDER THEM - not the desktop row with wrap turned on, which is what was
   here. §4's numbers: 14px/16px padding, name 15px/600 at 1.35, meta
   12.5px, price 19px/700, Book 44px. */
@media(max-width:620px){
  .tp-list{border-radius:var(--r-md)}
  /* NO NEW WRAPPER ELEMENT. §4.7 draws the price and Book on one
     space-between line under the name, and the row already has exactly
     three children to make it from: the name takes the full width and the
     other two share the line beneath. A .tp-bot <div> would have been ~12
     characters on each of 2,006 rows - 24,000 on a page that is already
     the largest on the site - to arrange elements that are already there. */
  .tp-item{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;
    padding:14px 16px}
  .tp-name{flex:0 0 100%;margin:0}
  .tp-name b{font:600 15px/1.35 var(--font-body)}
  .tp-name .tp-dept,.tp-name .tp-tat,.tp-name .tp-prep{font-size:12.5px}
  /* THE PRICE BLOCK WRAPS INSIDE ITSELF, WHICH IS WHAT KEEPS BOOK ON THE
     PRICE'S LINE. Without min-width:0 and this wrap, .tp-pr cannot shrink
     below its min-content - the figure and "across all centres" side by
     side, 258px - and at 390 that leaves no room for the 68px Book button,
     so the row silently became THREE lines instead of two. Measured: it
     happened on row 2 of the first screen, "Ultrasound - Whole Abdomen",
     and not on rows 1, 3 or 4, which is exactly the kind of fault that
     looks like a rendering accident rather than a rule. */
  .tp-pr{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;
    gap:2px 8px;text-align:left}
  .tp-price{font-size:19px}
  .tp-at{font-size:12px}
  .tp-go{flex-shrink:0;margin-left:auto}
}
.tp-hidden{display:none}
/* 44px TARGETS (Phase 4d), each measured under 44px in the 4c audit */
.tp-gc button,.tp-ms,#tpSort,#tpQ,.tp-sc{min-height:44px}
.br-tab{min-height:44px}
#tpClear{min-width:44px;min-height:44px}
.tp-band-alt,a.skip{display:inline-flex;align-items:center;min-height:44px}
.bp-crumb a{min-width:44px;justify-content:center}
.bp-inline{min-height:44px}
/* 1b9dbf3's button colours for this page and its page-level ink, restored
   2026-11-02: .mqc inherited this page's own :root ink before 4b merged them. */
.btn.tp-searchgo,.btn.tp-searchgo:hover,.btn.tp-searchgo:active{box-shadow:none}
.btn.br-go,.btn.br-go:hover,.btn.br-go:active{box-shadow:none}
.btn.tp-ai-up{background:var(--surface);border-color:var(--c-0e7c86);color:var(--c-0e7c86)}
.btn.tp-ai-up:hover{background:var(--c-0e7c86);border-color:var(--c-0e7c86);color:var(--surface)}
.btn.tp-more{background:var(--surface);border-color:var(--c-d5d9dc);color:var(--ink)}
.btn.tp-more:hover{background:var(--c-f4f5f6);border-color:var(--ink);color:var(--ink)}
.btn.tp-nudge-go{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn.tp-nudge-go:hover{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.hacts .btn.tp-support{background:var(--surface);border-color:transparent;color:var(--c-0b1b2b);box-shadow:var(--sh-183584)}
.btn.bp-btn.btn-primary,.btn.bp-btn.btn-primary:hover{box-shadow:var(--sh-1b4c4b)}
.bp-btn.btn-secondary{background:var(--surface);border-color:var(--c-cdd2d7);color:var(--c-23272b)}
.hacts .btn.tp-support:hover{background:var(--c-f4f5f6);border-color:var(--c-5a6169);color:var(--c-0b1b2b)}
.btn.tp-ai-go:hover{background:var(--c-0a5c63);border-color:var(--c-0a5c63);color:var(--surface)}
.btn.br-go{background:var(--surface);border-color:var(--action);color:var(--action)}
.btn.br-go:hover,.btn.br-go-solid{background:var(--action);border-color:var(--action);color:var(--surface)}
.bp-btn.btn-secondary:hover{background:var(--surface);border-color:var(--c-23272b);color:var(--c-23272b)}
html .mqc-chip{color:var(--ink);border-color:var(--line)}
html .mqc-form textarea{border-color:var(--line)}