:root{--brand-rgb:225 25 31;--brand:rgb(var(--brand-rgb));--action-rgb:195 69 90;--action:rgb(var(--action-rgb));--action-hover:#A93348;--action-tint-rgb:254 246 247;--action-tint:rgb(var(--action-tint-rgb));--ai-rgb:14 124 134;--ai:rgb(var(--ai-rgb));--ai-hover:#0A5C63;--ai-tint:#E6F3F4;--ai-on-dark-rgb:95 208 217;--ai-on-dark:rgb(var(--ai-on-dark-rgb));--ink-rgb:46 51 56;--ink:rgb(var(--ink-rgb));--muted:#5F676E;--line:#E4E7EA;--bg-rgb:247 248 250;--bg:rgb(var(--bg-rgb));--surface-rgb:255 255 255;--surface:rgb(var(--surface-rgb));--dark-rgb:35 39 43;--dark:rgb(var(--dark-rgb));--on-dark-muted:#B9BFC5;--on-dark-accent:#FF8A8F;--ok-rgb:8 122 87;--ok:rgb(var(--ok-rgb));--ok-tint-rgb:227 246 239;--ok-tint:rgb(var(--ok-tint-rgb));--warn-rgb:154 91 3;--warn:rgb(var(--warn-rgb));--warn-tint-rgb:253 243 227;--warn-tint:rgb(var(--warn-tint-rgb));--info-rgb:15 111 156;--info:rgb(var(--info-rgb));--info-tint-rgb:232 240 250;--info-tint:rgb(var(--info-tint-rgb));--whatsapp-rgb:37 211 102;--whatsapp:rgb(var(--whatsapp-rgb));--font-display:"Plus Jakarta Sans",system-ui,sans-serif;--font-body:"Inter",system-ui,sans-serif;--fs-h1:clamp(28px,2.2vw + 16px,44px);--fs-h2:clamp(24px,1.4vw + 16px,34px);--fs-h3:20px;--fs-h4:17px;--fs-lead:18px;--fs-body:16px;--lh-body:1.6;--fs-small:14px;--fs-eyebrow:12px;--fs-min:12px;--r-sm:8px;--r-md:12px;--r-lg:20px;--r-pill:999px;--sh-sm:0 1px 2px rgb(var(--dark-rgb)/.05),0 2px 8px rgb(var(--dark-rgb)/.05);--sh-md:0 6px 16px rgb(var(--dark-rgb)/.08),0 14px 36px rgb(var(--dark-rgb)/.07);--sh-lg:0 12px 30px rgb(var(--dark-rgb)/.12),0 32px 70px rgb(var(--dark-rgb)/.1);--ring:0 0 0 4px rgb(var(--action-rgb)/.14);--ring-ai:0 0 0 3px rgb(var(--ai-rgb)/.12);--halo:0 0 0 3px var(--surface);--bar-inset:inset 3px 0 0 0 var(--dark);--c-0b1b2b-rgb:11 27 43;--c-0b1b2b:rgb(var(--c-0b1b2b-rgb));--c-10243a:#10243A;--c-11794b:#11794B;--c-14181c-rgb:20 24 28;--c-14181c:rgb(var(--c-14181c-rgb));--c-14211c:#14211C;--c-14795a-rgb:20 121 90;--c-14795a:rgb(var(--c-14795a-rgb));--c-16181b:#16181B;--c-16221f:#16221F;--c-171310-rgb:23 19 16;--c-171310:rgb(var(--c-171310-rgb));--c-2e3338:#2E3338;--c-2f343b:#2F343B;--c-2f6b56:#2F6B56;--c-4a48a6-rgb:74 72 166;--c-4a48a6:rgb(var(--c-4a48a6-rgb));--c-4a534c:#4A534C;--c-4b5157:#4B5157;--c-4d4bab:#4D4BAB;--c-4e6478:#4E6478;--c-52657a:#52657A;--c-56604f:#56604F;--c-575d54:#575D54;--c-5f7183:#5F7183;--c-607182:#607182;--c-616a66:#616A66;--c-646a61:#646A61;--c-666f62:#666F62;--c-666f6b:#666F6B;--c-677064:#677064;--c-696f65:#696F65;--c-6a7267:#6A7267;--c-6b6259:#6B6259;--c-6b7264:#6B7264;--c-6f8d7e:#6F8D7E;--c-8fa69a:#8FA69A;--c-8fb7a3:#8FB7A3;--c-9e0c24:#9E0C24;--c-9ec9ae:#9EC9AE;--c-9fae9f:#9FAE9F;--c-a5374a:#A5374A;--c-a6394b-rgb:166 57 75;--c-a6394b:rgb(var(--c-a6394b-rgb));--c-a8c8b4:#A8C8B4;--c-b2531e:#B2531E;--c-b2620a:#B2620A;--c-b3541e:#B3541E;--c-b6c5bb:#B6C5BB;--c-b7c7d6:#B7C7D6;--c-b9c6d1:#B9C6D1;--c-be4a5d:#BE4A5D;--c-c3cbbd:#C3CBBD;--c-c5d4c7:#C5D4C7;--c-cfeee2:#CFEEE2;--c-d3d7db:#D3D7DB;--c-d3dde6:#D3DDE6;--c-d5d9dd:#D5D9DD;--c-dcdcf5:#DCDCF5;--c-dcebe1-rgb:220 235 225;--c-dcebe1:rgb(var(--c-dcebe1-rgb));--c-dde4ea:#DDE4EA;--c-dfeae3:#DFEAE3;--c-e2e5dd:#E2E5DD;--c-e3e6e9:#E3E6E9;--c-e4eaf0:#E4EAF0;--c-e6e3dd:#E6E3DD;--c-e7f0e9:#E7F0E9;--c-e8eae3:#E8EAE3;--c-e8ebee:#E8EBEE;--c-e9f1ec:#E9F1EC;--c-eaf0ec:#EAF0EC;--c-eaf1ec:#EAF1EC;--c-eaf1f7:#EAF1F7;--c-eceee8:#ECEEE8;--c-ecf8f3:#ECF8F3;--c-edf1f3:#EDF1F3;--c-eeeefb:#EEEEFB;--c-eef0f2:#EEF0F2;--c-eef0f6:#EEF0F6;--c-eef1ea:#EEF1EA;--c-eef2ea:#EEF2EA;--c-f1ece2-rgb:241 236 226;--c-f1ece2:rgb(var(--c-f1ece2-rgb));--c-f28c1c-rgb:242 140 28;--c-f28c1c:rgb(var(--c-f28c1c-rgb));--c-f2f6f1:#F2F6F1;--c-f3eff1:#F3EFF1;--c-f3f5ef:#F3F5EF;--c-f4eee5:#F4EEE5;--c-f4f2ee:#F4F2EE;--c-f5f7f8:#F5F7F8;--c-f5f8fa:#F5F8FA;--c-f6f7f4:#F6F7F4;--c-f7a6b4:#F7A6B4;--c-f9fdfb:#F9FDFB;--c-fafaff:#FAFAFF;--c-fbfaf8:#FBFAF8;--c-fbfcfa:#FBFCFA;--c-fdf4e7:#FDF4E7;--c-fdfdfb:#FDFDFB;--c-ffd9d3:#FFD9D3;--c-ffe3bd:#FFE3BD;--c-fff0ec:#FFF0EC;--c-fff3e4:#FFF3E4;--c-fffaf5:#FFFAF5;--c-fffaf8:#FFFAF8;--sh-39bc86:0 20px 40px -26px rgb(var(--c-14181c-rgb)/.45);--sh-3bd8cd:inset 3px 0 0 0 var(--c-0b1b2b);--sh-422b2d:0 30px 64px rgb(var(--c-0b1b2b-rgb)/.2);--sh-5a1b28:0 16px 34px -18px rgb(var(--action-rgb)/.95);--sh-65311d:0 16px 34px -18px rgb(var(--c-171310-rgb)/.95);--sh-90f8f0:0 18px 40px rgb(var(--c-0b1b2b-rgb)/.14);--sh-997ee1:0 16px 34px -18px rgb(var(--c-f28c1c-rgb)/.95);--sh-a5398e:0 10px 26px -16px rgb(var(--c-0b1b2b-rgb)/.3);--sh-a6170a:0 16px 34px -18px rgb(var(--c-14795a-rgb)/.95);--sh-a8e0ae:0 16px 34px -18px rgb(var(--c-4a48a6-rgb)/.95);--sh-be3fb8:0 14px 28px -22px rgb(var(--c-14181c-rgb)/.45);--sh-c4779d:0 18px 34px -24px rgb(var(--c-14181c-rgb)/.45);--sh-e14994:0 0 0 3px var(--action-tint);--sh-e491d0:-24px 0 60px rgb(var(--c-0b1b2b-rgb)/.22);--c-0a2029:#0A2029;--c-123c48:#123C48;--c-17a673-rgb:23 166 115;--c-1d3550:#1D3550;--c-2c4e9a:#2C4E9A;--c-37d39a:#37D39A;--c-3f464d:#3F464D;--c-575e65:#575E65;--c-8aa0b4:#8AA0B4;--c-9fb2c4:#9FB2C4;--c-b7c6d4:#B7C6D4;--c-e6edf3:#E6EDF3;--c-edf0fa:#EDF0FA;--sh-094173:0 0 0 0 rgb(var(--c-17a673-rgb)/.55);--sh-0fecbe:0 8px 20px rgb(var(--action-rgb)/.32);--sh-183584:0 4px 12px rgb(var(--action-rgb)/.24);--sh-6a892a:0 2px 6px rgb(var(--action-rgb)/.28);--sh-bb04dc:0 0 0 8px rgb(var(--c-17a673-rgb)/0);--sh-c6851a:0 24px 54px -26px rgb(var(--c-0b1b2b-rgb)/.36)} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* Fragment offset: measured, not typed. Do not edit between the markers - run build/hdroffset.py. */ /* ---- 8< ---- scroll offset, derived by build/hdroffset.py - 6 steps measured 320-1920px, clearance 14px. */ :root{--header-h:calc(var(--uat-h,0px) + 68px)} @media(max-width:620px){:root{--header-h:calc(var(--uat-h,0px) + 107px)}} @media(max-width:400px){:root{--header-h:calc(var(--uat-h,0px) + 108px)}} :target,#ai,#centres,#duty,#faq,#finderIn,#main,#prices,#reports,#s1,#s2,#s3,#s4,#s5,#s6,#s7,#s8,#s9,#s10,#s11,#s12,#s13,#s14,#s15,#s16,#s17,#s18,#s19,#s20,#s21,#s22,#s23,#s24,#s25,#services,#why{scroll-margin-top:calc(var(--header-h) + 14px)} /* ---- >8 ---- end derived scroll offset ---- */ body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);color:var(--c-0b1b2b);background:var(--c-f5f8fa);line-height:var(--lh-body)} h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.022em;margin:0;line-height:1.15} h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}h4{font-size:var(--fs-h4)} small{font-size:var(--fs-small)} .eyebrow{font-size:var(--fs-eyebrow);font-weight:600;text-transform:uppercase;letter-spacing:.12em} .lead{font-size:var(--fs-lead)} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} :focus-visible{outline:3px solid var(--action);outline-offset:2px;border-radius:var(--r-sm)} ::selection{background:rgb(var(--action-rgb)/.18);color:var(--c-0b1b2b)} .w{max-width:clamp(1240px,calc(100vw - 260px),1680px);margin:0 auto;padding:0 clamp(14px,3vw,28px)} /* ---- PHASE 4c: ONE BUTTON FAMILY ------------------------------------------ Every button on every page is .btn plus one variant. The per-page families (the old p / pri modifiers, bp-btn, tp-go, pk-btn, the chat's rungs ...) keep their class names only as hooks for scripts and gates; none of them sets the look. 44px is the floor everywhere; .btn-sm draws 36px for dense rows and keeps a 44px target through its ::after. .tp-go IS THE ONE MEMBER BY NAME: the price list's 2,006 row Book buttons are .btn.btn-secondary.btn-sm by these selectors, not by three classes each - 52KB the 966KB page cannot carry. shoot.py's button check counts it. */ .btn,.tp-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px; border-radius:var(--r-md);border:1.5px solid transparent;background:transparent;color:var(--action); font:600 15px/1.2 var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer; transition:background .15s,border-color .15s,color .15s} .btn:focus-visible,.tp-go:focus-visible{outline:2px solid var(--action);outline-offset:2px} .btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none} .btn-primary{background:var(--action);border-color:var(--action);color:var(--surface)} .btn-primary:hover{background:var(--action-hover);border-color:var(--action-hover);color:var(--surface)} .btn-primary{box-shadow:var(--sh-183584)} .btn-primary:hover{box-shadow:var(--sh-0fecbe)} .btn-primary:active{box-shadow:var(--sh-6a892a)} .btn-secondary{background:var(--surface);border-color:var(--c-d3dde6);color:var(--c-0b1b2b)} .btn-secondary:hover{border-color:var(--action);color:var(--action)} .tp-go{background:var(--surface);border-color:var(--action);color:var(--action)} .tp-go:hover{background:var(--action)} .btn-ai{background:var(--ai);border-color:var(--ai);color:var(--surface)} .btn-ai:hover{background:var(--ai-hover);border-color:var(--ai-hover);color:var(--surface)} .btn-neutral{background:var(--surface);border-color:var(--line);color:var(--ink)} .btn-neutral:hover{background:var(--bg);border-color:var(--muted)} .btn-ghost{padding-inline:4px} .btn-ghost:hover{text-decoration:underline} .btn-icon{width:44px;padding:0} .btn-sm,.tp-go{position:relative;min-height:36px;padding:0 14px;font-size:14px} .btn-sm::after,.tp-go::after{content:"";position:absolute;inset:-4px 0} .card{background:var(--surface);border:1px solid var(--c-e4eaf0);border-radius:var(--r-lg)} /* ---- PHASE 4c: ONE TABLE --------------------------------------------------- A real or a grid of .th/.tr rows: header row on --bg, 14px/600 --muted labels, 12px 16px cells, --line rules, no zebra, numbers right and tabular. At 620px and under it keeps its columns and scrolls inside .mq-wrap rather than reflowing. */ .mq-wrap{overflow-x:auto;width:0;min-width:100%} .mq-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface); border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;font-variant-numeric:tabular-nums} .mq-table th,.mq-table td,.mq-table .th,.mq-table .tr{padding:12px 16px;border-bottom:1px solid var(--line)} .mq-table tbody tr:last-child td,.mq-table .tr:last-child{border-bottom:0} .mq-table th,.mq-table .th{background:var(--bg)} .mq-table th,.mq-table .th>*{font:600 14px/1.3 var(--font-body);color:var(--muted);text-align:left; text-transform:none;letter-spacing:0} .mq-table .num{text-align:right;justify-self:end} .mq-wrap>.mq-table:not(table){width:fit-content;min-width:100%} .sec{padding:clamp(26px,3.2vw,38px) 0} .lab{font:700 var(--fs-min) var(--font-body);letter-spacing:.11em;text-transform:uppercase;color:var(--c-5f7183)} /* utility bar */ /* THE UAT BANNER IS PART OF THE FLOW (Phase 4d): it pins at top:0, 36px exactly (environment.py), and the header pins --uat-h below it. */ :root:has(#uatbar){--uat-h:36px} /* THE TRUST BAR SCROLLS AWAY AT EVERY WIDTH (Phase 4d). Only the header pins, so the strip can be a 44px row and its phone link a 44px target. */ .util{background:var(--c-10243a);color:var(--c-b7c6d4);font-size:12.5px;} .util .w{display:flex;align-items:center;gap:16px;min-height:44px;padding-block:0; flex-wrap:nowrap;overflow:hidden;white-space:nowrap} .util span,.util a{flex:none} /* THE CALL CENTRE, WHERE THE PROMO USED TO BE. The promo and its pill were config-driven copy; this is a destination, and it is the only phone route left in the header now that the call icon has gone. tel: on the dial form from config, the display form as the label - both read from contact.phoneDial / contact.phoneDisplay through the same MQ_PHONE_ substitutions the group-pricing line and the report form already use, so there is one source for the number and not a third copy of it. #E6EDF3 not #B7C6D4: this is a link on the navy bar and has to read as one against text that is deliberately quiet. */ .uphone{display:flex;align-items:center;gap:7px;flex:none;color:var(--c-e6edf3)} .uphone a{color:var(--c-e6edf3);font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px} .uphone a:hover{color:var(--surface);text-decoration:underline;text-underline-offset:3px} .uphone svg{flex:0 0 auto;opacity:.85} /* NAV ITEMS CARRY AN ICON NOW. currentColor, not the brand red the + menu's icons use: these sit immediately beside their own label, and a red mark against dark text reads as a warning rather than as part of the word. */ .main a{display:inline-flex;align-items:center;gap:7px} .navico{flex:0 0 auto} .util .ushort{display:none} @media(max-width:620px){.util .ufull{display:none}.util .ushort{display:inline}} .util span{display:inline-flex;align-items:center;gap:6px} .util i{width:6px;height:6px;border-radius:var(--r-pill);background:var(--c-37d39a);flex:none} .util .sp{flex:1} .util a{color:var(--surface);font-weight:500} .util .ulab{display:inline-flex;align-items:center;min-height:44px} .util .ulab:hover{text-decoration:underline;text-underline-offset:3px} /* header */ header{background:rgb(var(--surface-rgb)/.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--c-e4eaf0); position:sticky;top:var(--uat-h,0px);z-index:60;overflow:visible} /* 64px: 57px of centre picker - the tallest thing in the row - plus 3px either side plus the 1px border. THE PICKER IS WHAT SETS THIS, and it is frozen this round, so 3px is the largest padding a 64px row can carry while it stays 57px tall. Phase 3b restyles the picker; if the row wants more breathing room, that is where it comes from. */ .bar{display:flex;align-items:center;gap:14px;padding-block:3px;min-width:0} .bar>*{min-width:0} .logo{display:flex;align-items:center;gap:9px;min-height:44px;flex:none} .logo img{height:30px;width:auto;max-width:250px;object-fit:contain;display:block} .logo .l-mark{display:none;height:26px;max-width:186px} .logo .lofb{display:none;flex-direction:column;justify-content:center;line-height:1.05} .logo .lofb b{font:800 21px var(--font-display);letter-spacing:-.035em;color:var(--c-0b1b2b)} .logo .lofb small{font:600 var(--fs-min) var(--font-body);letter-spacing:.24em;color:var(--c-4e6478)} .logo .lofb.light b{color:var(--surface)} .logo .lofb.light small{color:var(--c-8aa0b4)} /* if the logo file cannot load, fall back to the drawn mark */ .logo.nologo img{display:none} .logo.nologo .lofb{display:flex} .flogo{display:inline-flex;align-items:center;min-height:44px;width:auto;align-self:flex-start} .flogo img{height:32px;max-width:270px} .logo b{font:800 20px/1 var(--font-display);letter-spacing:-.035em;display:block} .logo small{font:600 var(--fs-min) var(--font-body);letter-spacing:.24em;color:var(--c-4e6478);display:block;margin-top:2px} nav.main{display:flex;gap:15px;flex:1 1 auto;min-width:0;margin-left:2px;flex-wrap:nowrap; justify-content:flex-start} nav.main .navhide{display:none} nav.main>a{color:var(--c-4e6478);font-weight:500;font-size:14px;display:inline-flex; align-items:center;gap:5px;white-space:nowrap;background:none;border:0;cursor:pointer; font-family:var(--font-body);padding:6px 0} nav.main>a:hover{color:var(--action)} nav.main>a.here{color:var(--action);font-weight:600} nav.main>a.here::after{content:'';position:absolute;left:0;right:0; bottom:-14px;height:2.5px;background:var(--action);border-radius:var(--r-sm)} nav.main>a{position:relative;min-height:44px} nav.main a:hover{color:var(--action)} nav.main a svg{opacity:.55} .centrepick{position:relative;min-width:0;flex:0 0 auto} .cpbtn{display:flex;align-items:center;gap:9px;background:var(--c-f5f8fa);border:1px solid var(--c-e4eaf0); border-radius:var(--r-md);padding:6px 12px;cursor:pointer;font-family:var(--font-body);min-width:0; text-align:left;max-width:100%} .cpbtn:hover,.cpbtn[aria-expanded="true"]{border-color:var(--action);background:var(--surface)} .cpbtn>span{min-width:0} .cpchev{color:var(--c-5f7183);flex:none;transition:transform .18s} .cpbtn[aria-expanded="true"] .cpchev{transform:rotate(180deg)} .cpveil{position:fixed;inset:0;background:rgb(var(--c-0b1b2b-rgb)/.45);z-index:75} .cppanel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:80;width:min(620px,calc(100vw - 40px));max-height:calc(100vh - 64px);overflow:auto; background:var(--surface);border:1px solid var(--c-e4eaf0);border-radius:var(--r-md);box-shadow:var(--sh-c6851a); overflow:hidden} .cpopt{padding:9px 11px;border-radius:var(--r-sm);cursor:pointer;display:grid; grid-template-columns:1fr auto;gap:2px 9px;align-items:baseline} .cpopt:hover{background:var(--c-f5f8fa)} .cpopt[aria-selected="true"]{background:var(--action-tint)} .cpopt[aria-selected="true"] b::after{content:'✓';color:var(--action);margin-left:7px;font-size:12px} .cpopt b{font:600 14px var(--font-body)} .cpopt small{color:var(--c-4e6478);font-size:12px;text-align:right} .cptag{grid-column:1/-1;justify-self:start;font:700 var(--fs-min) var(--font-body);letter-spacing:.02em; background:var(--ok-tint);color:var(--ok);padding:2px 7px;border-radius:var(--r-sm);margin-top:2px} .cptag.t3{background:var(--c-edf0fa);color:var(--c-2c4e9a)} .cptag.warn{background:var(--warn-tint);color:var(--warn)} /* An action the site cannot perform keeps its place in the layout but is not a link. No href means no focus stop and no link role; this only removes the affordances that would promise a destination. */ a.nolink{cursor:default} .fg a.nolink:hover{color:var(--c-9fb2c4);text-decoration:none} .util a.nolink:hover{color:var(--surface)} /* Unverified facts. A claim MedQuest has not confirmed is marked, never asserted as plain text. Uses the design's own warn pair (AA 5.42 on white, 4.93 on wash). The toggle is for review only and is not shipped enabled. */ .unver{color:var(--warn);background:var(--warn-tint);border-bottom:1px dotted var(--warn); padding:0 3px;border-radius:var(--r-sm)} .cpbtn small{display:block;font:600 var(--fs-min)/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase; color:var(--c-5f7183);margin-bottom:2px} .cpbtn b{display:block;font:700 13.5px/1.15 var(--font-display);color:var(--c-0b1b2b); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cptxt{min-width:0;max-width:178px} .cpbtn em{display:block;font-style:normal;font-size:var(--fs-min);color:var(--c-4e6478);line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .cpbtn em .on{color:var(--ok);font-weight:700} @media(min-width:621px) and (max-width:768px){ .cpbtn em .lmk{display:none} } .hacts{display:flex;align-items:center;gap:9px;flex:0 0 auto} /* .hacts .menubtn, NOT .menubtn, AND THE SPECIFICITY IS THE WHOLE FIX. This read .menubtn{display:none} and had NEVER hidden anything: .iconbtn sets display:grid, carries the same 0,1,0 specificity, and is written later in this file, so it won every time. The desktop hamburger has been on screen at every width since it was written - visible in HEADER-P3A's own 1440 screenshots - while the rule meant to hide it read as if it did. HEADER-P3B removes that control from the desktop header, so the rule now has to actually win: 0,2,0 beats .iconbtn, and the tier rules below match it. */ .hacts .menubtn{display:none} /* UAT 9: as a flex child of .bar, unhiding it re-laid out the header row and moved the hamburger out from under the cursor. Out of flow, not wrapped - wrapping .bar made the header itself wrap. See TESTING.md. */ .menupanel{position:absolute;top:100%;left:0;right:0;z-index:1; border-top:1px solid var(--c-e4eaf0);background:var(--surface);max-height:70vh;overflow:auto} .menupanel .w{padding-block:10px 16px} .menupanel .lab{display:block;margin:12px 0 4px} .menupanel a{display:block;padding:11px 2px;border-bottom:1px solid var(--c-e4eaf0); font:600 15px var(--font-body);color:var(--c-0b1b2b)} .menupanel a:last-child{border-bottom:0;color:var(--action)} .hvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:2} @media(max-width:768px){ .hvid,.vpause{display:none} } @media(prefers-reduced-motion:reduce){ .hvid,.vpause{display:none} } /* ---- hero: the assistant floats on the footage, 901px and up ---------- HERO-MERGE-01 PUT A SOLID CARD OVER THE VIDEO AND THAT WAS THE MISTAKE. It gave .heromerge background:#fff so the headline, the rail and the assistant read as one surface - and an opaque surface spanning the whole hero is a lid on the one thing the section is built around. The footage and the veil were never changed; they were simply covered. So .heromerge carries NO background now. It is a layout wrapper and nothing else, and the headline and the rail sit on the footage exactly as they did before that commit. The quick-link cards keep their own white backgrounds, which they always had. THE ASSISTANT STAYS A CARD, BUT A TRANSLUCENT ONE. It needs a surface - there is a search input, five chips and two buttons on it - so it keeps its shape and takes the footage through it instead of hiding it. The border is the neutral line, not .cap.sig's 2px brand red: an outline that heavy around a translucent panel reads as a warning rather than a card. SCOPED TO THE SAME BREAKPOINT THE FOOTAGE USES. Below 901px there is no video and no veil - the JS branch removes both - so a translucent card there would be translucent over nothing but the page background. */ /* THE CARD'S OWN GRADIENT FOLLOWS THE VEIL'S. A flat rgba(...,.82) was tried first and measured: the veil under the card runs 94.3% white at its left edge to 47.4% at its right, so one flat value either hid the footage everywhere or thinned the wash under the headline. The card now leans the same way the veil does - near-opaque on the left where the words are, opening up on the right where the film already reads - so the two gradients add up instead of fighting. 100deg, THE SAME ANGLE AS .bgveil, so the two stay parallel at every width rather than crossing somewhere in the middle of the card. blur(2px), NOT 6. Six smeared the 9% of footage that got through into a wash with no recognisable content in it - the defect that stopped the first attempt shipping. Two is enough to keep text off busy detail without destroying the shapes behind it. */ /* a grid item's auto min-width let the nowrap ticker widen the card past the panel's padding at 375 */ .bot{width:120px;height:120px;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--c-123c48),var(--c-0a2029)); display:grid;place-items:center} /* services */ /* -2 -> -3: see the token block - -1 carries no ink, and this panel has six. */ .ds{border-radius:var(--r-lg);padding:24px} .ds.home{background:var(--surface);border:1px solid var(--c-e4eaf0);display:grid; grid-template-columns:1fr 200px;gap:18px;align-items:center} .ds h3{margin:8px 0 8px} .ds p{color:var(--c-4e6478);font-size:13.5px;margin:0 0 16px;max-width:42ch} /* THE SAME 135deg RAMP AS .carousel, deliberately identical - two dark slides in one carousel is a literal match, not an approximation. */ .ds.emg{background:linear-gradient(135deg,var(--c-575e65),var(--c-3f464d)); color:var(--surface)} .ds.emg .lab{color:var(--c-d3dde6)} .ds.emg p{color:var(--c-e6edf3)} .ds.emg .note{display:block;margin-top:12px;color:var(--c-d3dde6);font-size:var(--fs-min)} .svc{display:grid;grid-template-columns:repeat(6,1fr);gap:10px} .tier{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:12px} .tier td{padding:5px 0;border-bottom:1px solid var(--c-e4eaf0);color:var(--c-4e6478)} .tier td:last-child{text-align:right;font-weight:700;color:var(--c-0b1b2b);font-variant-numeric:tabular-nums} .tier tr:last-child td{border-bottom:0} /* centres short state + reviews (CENTRES-MOVE commit 2). The notes are in gen_home.py: a comment here ships in the shared sheet. */ .hc-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px} @keyframes hrvblink{50%{opacity:0}} @keyframes hcpulse{50%{opacity:.35;transform:scale(.7)}} @keyframes hcmesh{to{transform:translate(44px,44px)}} footer{background:var(--c-10243a);color:var(--c-9fb2c4)} footer .w{padding-block:36px 22px} .fg{display:grid;grid-template-columns:1.5fr repeat(4,1fr) 1.15fr;gap:24px;padding-bottom:26px; border-bottom:1px solid var(--c-1d3550)} .fg h4{color:var(--surface);margin-bottom:11px} .fg a{display:flex;align-items:center;min-height:44px;color:var(--c-9fb2c4);font-size:13px} /* An underline on hover, not a colour shift alone: at 13px on a navy ground #9FB2C4 -> #fff is a small change to see. .fg a.nolink:hover is left as it was and explicitly opts out above - it has no destination, and an underline would promise one. */ .fg a:hover{color:var(--surface);text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:rgb(var(--surface-rgb)/.55)} .fg p{font-size:13px;margin:10px 0 0;max-width:30ch} .fbot{display:flex;justify-content:space-between;gap:14px;padding-top:16px;font-size:12.5px;flex-wrap:wrap} .fcon{display:flex;align-items:baseline;gap:8px;padding:5px 0;font-size:13px;line-height:1.45} .fcon a{display:inline-flex;align-items:center;min-height:44px} /* WHITE CHIPS, AND THAT IS NOT DECORATION. All three files are dark ink on transparent - measured, not assumed: 87% of cert-icmr's opaque pixels and 83% of cert-iso's fall below luminance 100, against this footer's --navy at 33. Composited on #10243A before anything here was written, they are close to invisible. THE TWO ALTERNATIVES WERE WORSE. filter:invert() makes them legible by recolouring a NABL mark and ICMR's orange into something the issuing bodies never authorised - the exact thing config's _verify_video required be stopped after a FABRICATED NABL seal was cut from the hero video on 2026-08-07. White variants mean new image files, which this round was told not to add. A chip changes the ground and leaves the artwork alone. STILL A REPORTED FINDING, NOT A SOLVED ONE: at 24px the NABL and ISO seals are ring text around a small mark and neither resolves, chip or no chip. Knockout artwork is Ponraman's call. */ .fcerts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:18px} .fcerts img{height:24px;width:auto;max-width:60px;object-fit:contain; background:var(--surface);border-radius:var(--r-sm);padding:5px 7px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); clip-path:inset(50%);white-space:nowrap} @media(max-width:1240px){ /* THE EXCLUSION IS THE WHOLE OF THIS EDIT, and it has now been needed twice. These rules strip the trust bar POSITIONALLY as it narrows - "hide the third span" - which was safe while the third span was a divider nobody needed. HEADER-P3B made the third span the promo and this silently hid it below 1240: it rendered at 1440 and nowhere else, with the markup, the config and the build all correct and nothing failing. Caught by screenshotting 1180 and asking the browser which rule matched. The header trim replaced the promo with the call-centre number, which is now the third span and inherits the same trap - hence :not(.uphone). A positional selector captures whatever moves into its position, so anything put here in future needs adding to this exclusion or it disappears below 1240 with no error anywhere. */ .util .w>span:nth-child(3):not(.uphone),.util .udiv, .util a:not(:first-of-type){display:none} } /* THE NAV ROW HOLDS FROM 1025 (Phase 4e). At 1025-1240 the nav sat behind the menu with ~460px of the bar empty; the desktop row needs ~833px (939 with the price list's Support) and the bar has 969 at 1025. */ @media(max-width:1024px){ nav.main{display:none} /* matched to .hacts .menubtn above, or the base rule would outrank this and the hamburger would vanish on the tier that needs it most. */ .hacts .menubtn{display:inline-flex} /* one clean row: logo · centre · actions */ .bar{gap:12px} .logo .l-full{display:none} .logo .l-mark{display:block;height:26px;max-width:190px} .centrepick{order:2;flex:1 1 auto;max-width:300px} .cpbtn{width:100%} .hacts{order:3;flex:0 0 auto;gap:8px} .hacts .btn:not(.btn-primary):not(.tp-support):not(.menubtn){display:none} } @media(max-width:1240px){ /* 3 across */ .svc{grid-template-columns:repeat(3,1fr)} .fg{grid-template-columns:1fr 1fr 1fr} } @media(max-width:768px){ .ds.home{grid-template-columns:1fr} .aigrid{grid-template-columns:1fr} } @media(max-width:620px){ .cptag{font-size:var(--fs-min)} .lab{font-size:var(--fs-min)} .qt,.svc,.fg{grid-template-columns:1fr} .bot{margin:0 auto} .util .w>span:nth-child(n+2){display:none} .util a:not(:nth-last-child(-n+2)){display:none} /* PHONE LOGO (tester point 8, 2026-11-04): the wordmark is 904x77, so in the ~130px a phone row leaves it drew 11px tall. The row now shows the brand's MM emblem - the left slice of the same image, cropped by object-fit, no second file - beside the name as text, the lockup the site already keeps as its no-image fallback. 44px tall, row unchanged. */ .logo{gap:8px} .logo .l-mark{display:block;width:40px;height:32px;max-width:40px;object-fit:cover;object-position:0 50%} .logo .lofb{display:flex;white-space:nowrap} .logo .lofb b{font-size:16px;line-height:1} .logo .lofb small{font-size:10px;letter-spacing:.2em;margin-top:3px} .hacts .btn-primary{padding-inline:12px} /* PHASE 4d: TWO ROWS, 107px, ON EVERY PAGE. Row one is the logo, Book and the menu, each 44px; row two is the picker as a single 44px line - the centre's name and a chevron, no label, no second line - with Support beside it on the pages that carry Support. .hacts dissolves so its buttons can sit on either row. It was 136px here and 187px on the price list, where Support pushed a third row. */ .bar{gap:6px 10px;flex-wrap:wrap;padding-block:6px} .logo{order:1;flex:1 1 auto;min-width:0} .hacts{display:contents} .hacts .btn-primary{order:2} .hacts .menubtn{order:3} .tp-support{order:5} .centrepick{order:4;flex:1 1 60%;max-width:none} .cpbtn{width:100%;min-height:44px;padding:0 12px} .cpbtn small,.cpbtn em{display:none} .cppanel{top:0;left:0;transform:none;width:100%;max-width:none;height:100%;max-height:none;border-radius:0;border:0} } /* ---- the slider's four steps, and the one place they are written ----- 5 / 4 / 3 / 2 / one-up-with-a-peek. THE 720 STEP HIDES THE ARROWS: at two across the thumb is already on the track and a 34px arrow beside a 2-card row is a control competing with the gesture that works better. Swipe and the counter remain. THE 480 STEP SHOWS 80% OF ONE CARD, not 100%: a card that exactly fills the viewport gives no signal that anything follows it, and the whole argument for a slider over a grid is that the next card is visible. */ @media(max-width:400px){ .flogo img{max-width:190px;height:26px} .fg{gap:18px} .bar{gap:7px} .util{font-size:var(--fs-min)} .util .w{gap:10px} .w{padding-inline:12px} .cpbtn{padding:8px 10px} } @media(min-width:621px) and (max-width:1024px){ .cptxt{max-width:none} .centrepick{flex:1 1 auto;min-width:0} .cpbtn{width:100%} } @media(min-width:621px) and (max-width:1240px){ /* tablets: enough room for two columns, which the phone layout wasted */ .svc{grid-template-columns:repeat(3,1fr)} .fg{grid-template-columns:repeat(3,1fr)} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} /* transition:none above does not reach transform. A :hover translate is a static state, not an animation, so it still snaps into place - and .qtile and .sv have done exactly that for every reduced-motion visitor since the redesign shipped. Named one by one rather than *:hover{transform:none!important}, which would also flatten any disclosure chevron: that rotate is a state indicator, not decoration, and a reader who cannot see it cannot tell open from shut. .qtile has no elements on any page - it is fixed anyway so the rule is right if it is ever used. */ .qtile:hover,.sv:hover,.btn:active{transform:none} } @keyframes mqcbob{0%,60%,100%{opacity:.28;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)}} /* ---- 44px, measured, not eyeballed -------------------------------- Eight of nine interactive controls measured under 44px at 375 on 2026-08-26: Book this package 41, the mobile field 39 AND ONLY 95px WIDE for a ten-digit number, the track field 37, Track 41, View my reports 41, the chat send 42, a suggestion chip 29, the modal close 30. 44px is not a preference. It is the smallest target most adults hit reliably with a thumb, and this is a site people reach while worried about a test result. Height is set with min-height rather than height so a control that needs two lines still grows. */ @media(max-width:620px){ .trackbox{padding:8px 8px 8px 14px} .trackbox input{min-height:44px} /* .iconbtn COVERED Call, the prescription icon and the menu button. The first two went in HEADER-P3B, so their selectors go with them and the menu button is what is left: BUTTON#menuBtn.iconbtn.menubtn, which a .navtoggle guess did not match - found by measuring rather than assuming, and the reason the id is named alongside the classes. */ /* HEADER-P3B's controls join the EXISTING band rather than starting a second one. The three nav links, Support and the promo pill are all tap targets at this width, and a 41px control here is the same defect the nine above were measured for. */ /* THE MENU SHEET IS THE PHONE ROUTE NOW. HEADER-P3B removed the header's call icon, which was the one control this band already covered at 44px. What remains is this sheet's "Call 040 48849999" - it worked, but it measured 41px, so removing the icon would have quietly demoted the whole call path below the standard the other nine controls are held to. The sheet's items are all one tap from the same button, so the band takes the row rather than the phone link alone. */ #menuPanel a{min-height:44px;display:flex;align-items:center} } @keyframes locpin{ 0%{transform:scale(1)} 30%{transform:scale(1.28)} 60%{transform:scale(.94)} 100%{transform:scale(1)} } /* [hidden]{display:none} sits EARLIER in this sheet and has the same specificity, so a bare .cpstep{display:grid} silently overrides it and every step renders at once. The hidden step-2 blocks were visible below step 1 in the first screenshot - markup said hidden, CSS said otherwise. Same family as the booking control that was display:none on phones: the attribute and the rendering disagreed. */ /* BUTTON RESET ONLY - no layout. It carried PICKER-01's grid template until 2026-08-31 and survived the trim by being a GROUPED selector, so .cparea inherited two columns it never asked for. Each of the three sets its own layout now. See TESTING.md. */ .cparea,.cpall,.cpback{background:none;border:0;cursor:pointer;font:inherit} /* The chevrons are drawn, not shipped six times as inline SVG. They are decoration - the button's own text says where it goes. */ /* the panel's own options are buttons now, so they need the button reset */ /* "Nearest you" is a LABEL on a card the patient still presses - never a selection. c. in the brief, and the reason it is not aria-selected. */ /* ---- PICKER-02: the centre modal. Was a dropdown until 2026-08-31; PICKER-01 changed the list inside it and kept the shell. Follows .mqc-modal. Every display rule names [hidden] explicitly - see TESTING.md, "four ways one picker looked wrong". */ .cppanel[hidden]{display:none} /* A fixed child of a backdrop-filtered ancestor is not fixed to the viewport: top:50% resolved to half the header. The blur goes while the modal is open. See TESTING.md. */ header.cp-open{backdrop-filter:none;-webkit-backdrop-filter:none} .cpx{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0; background:none;color:var(--c-4e6478);font-size:22px;line-height:1;cursor:pointer; border-radius:var(--r-sm);z-index:2} .cpx:hover,.cpx:focus-visible{background:var(--c-f5f8fa);color:var(--c-0b1b2b)} .cpstep{position:relative} .cpstep[hidden]{display:none} .cphead{padding:20px 22px 4px} .cpeyebrow{display:block;font-family:var(--font-body); color:var(--action)} .cptitle{margin:4px 0 2px;font-weight:700;font-family:var(--font-display);color:var(--c-0b1b2b)} .cpwhy{margin:0 0 14px;color:var(--c-4e6478);font:400 13.5px var(--font-body)} .cpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 22px} .cparea{display:grid;gap:2px;padding:18px 12px;border:1px solid var(--c-e4eaf0); border-radius:var(--r-md);background:var(--surface);cursor:pointer;text-align:center; min-height:118px;align-content:center;position:relative} .cparea:hover,.cparea:focus-visible{border-color:var(--action);background:var(--action-tint)} .cpnum{font:700 30px var(--font-display);color:var(--c-0b1b2b);line-height:1} .cpareaname{font:600 14px var(--font-body);color:var(--c-0b1b2b)} .cpunit{font:400 12px var(--font-body);color:var(--c-4e6478)} /* a LABEL, never a selection - hence no aria-selected */ .cpnear{position:absolute;top:-9px;left:50%;transform:translateX(-50%); font:700 var(--fs-min) var(--font-body);letter-spacing:.02em;background:var(--action); color:var(--surface);padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap} .cpall{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;width:calc(100% - 44px);margin:12px 22px 0; padding:13px 16px;border:1px solid var(--c-e4eaf0);border-radius:var(--r-md); background:var(--surface);cursor:pointer;text-align:left;min-height:56px;align-content:center} .cpall:hover,.cpall:focus-visible{border-color:var(--action);background:var(--action-tint)} .cpall b{font:600 14px var(--font-body);color:var(--c-0b1b2b)} .cpall small{font:400 12px var(--font-body);color:var(--c-4e6478);text-align:right} /* IN THE FLOW, NOT OVER IT - absolute, it printed across the eyebrow and the area name. First child of .cphead, so static is all it needs. */ .cpback{display:inline-flex;align-items:center;border:0;background:none; color:var(--c-4e6478);font:600 12.5px var(--font-body);cursor:pointer; padding:6px 10px;margin:0 0 6px -10px;border-radius:var(--r-sm);min-height:36px} .cpback:hover,.cpback:focus-visible{background:var(--c-f5f8fa);color:var(--c-0b1b2b)} .cpgrid-c{grid-template-columns:1fr;gap:8px} .cpgrid-c .cpopt{display:grid;grid-template-columns:1fr auto;gap:2px 10px; align-items:center;text-align:left;padding:12px 15px;border:1px solid var(--c-e4eaf0); border-radius:var(--r-md);background:var(--surface);cursor:pointer;min-height:56px;width:100%} .cpgrid-c .cpopt:hover,.cpgrid-c .cpopt:focus-visible{border-color:var(--action); background:var(--action-tint)} /* UAT 27: the highlight lost the cascade to .cpgrid-c .cpopt at equal specificity, leaving the tick alone. Restated at (0,3,0). */ .cpgrid-c .cpopt[aria-selected="true"]{background:var(--action-tint); border-color:var(--action)} .cpgrid-c .cpopt b{font:600 14px var(--font-body);color:var(--c-0b1b2b)} .cpgrid-c .cpopt small{color:var(--c-4e6478);font-size:12px;text-align:right} .cpgrid-c .cptag{grid-column:1/-1;justify-self:start;margin-top:3px} /* 2026-11-03 (5_WEBSITE C6): the location control is the FIRST thing on step 1 - a full-width secondary button, not a small link under the grid - because on a phone it is the fastest honest answer to "which area?". It stays secondary: choosing a centre by name is the main act. */ .cploc{display:flex;align-items:center;justify-content:center;gap:8px; width:calc(100% - 44px);margin:0 22px 14px;background:var(--surface); border:1.5px solid var(--action);color:var(--action); font:600 14px var(--font-body);cursor:pointer;min-height:48px; border-radius:var(--r-md)} .cploc:hover,.cploc:focus-visible{background:var(--action-tint)} .cploc:disabled{opacity:1;color:var(--c-4e6478);border-color:var(--c-e4eaf0)} @media(max-width:620px){ .cpgrid{grid-template-columns:1fr} .cparea{min-height:76px;grid-template-columns:auto 1fr;text-align:left; align-items:center;gap:2px 14px;padding:14px 16px} .cpnum{grid-row:1/3;font-size:26px} .cpnear{position:static;transform:none;justify-self:start;grid-column:2; margin-top:4px} } .pkfrom{font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--pk-from,var(--c-6b6259))} @keyframes rpt-drop{0%{opacity:0;transform:translate(var(--x,0),calc(var(--y,0) - 34px)) rotate(var(--r,0)) scale(.97)}60%{opacity:1}100%{opacity:1;transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0)) scale(1)}} @keyframes rpt-float{0%,100%{transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0))}50%{transform:translate(var(--x,0),calc(var(--y,0) - 9px)) rotate(var(--r,0))}} @keyframes rpt-sweep{0%{transform:translateY(-120%);opacity:0}12%{opacity:.9}88%{opacity:.9}100%{transform:translateY(320%);opacity:0}} @keyframes rpt-pulse{0%,100%{box-shadow:var(--sh-094173)}70%{box-shadow:var(--sh-bb04dc)}} @keyframes rpt-line{0%{opacity:0;transform:translateY(7px)}100%{opacity:1;transform:translateY(0)}} @keyframes rpt-rise{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}} @keyframes rpt-radar{0%{opacity:.8;transform:scale(.35)}100%{opacity:0;transform:scale(1.15)}} @keyframes rpt-cycle{0%{opacity:0;transform:translateY(10px)}4%{opacity:1;transform:translateY(0)}30%{opacity:1;transform:translateY(0)}36%{opacity:0;transform:translateY(-10px)}100%{opacity:0;transform:translateY(-10px)}} #finderIn{min-height:44px}