/* ══════════════════════════════════════════════════════════════════════════
   css/clinic.css — CLINIC DIRECTORY  (/clinic and every filter below it)

   Sibling of css/doctorlist.css and css/bloglist.css. Same three standing
   rules, same token source (css/common.css via custom.css), and NOT the same
   page:

     · No max-width container. 100% plus a gutter — 28px desktop, 14px mobile.
       Measure comes from column ratios, never a ch cap.
     · No card around prose. A clinic tile is a destination with a
       photograph, so it earns a frame; the rail is ruled, not boxed.
     · Outfit only. No serif face on any FertilityWorld page.
     · Every colour is a token from :root. No hex, no rgba, no var() fallback.

   WHY IT LOOKS DIFFERENT FROM /doctor
     A doctor is a PERSON and the doctor directory is built around a face:
     portrait-led tiles, four up, and a drifting wall of faces in the
     masthead. A clinic is a PLACE. So this page is built around geography
     instead — a live map holds the masthead and carries a pin for every
     result in the current filter state, and the tiles are landscape,
     two up, because a building photographs wide and a face photographs
     tall. Hovering a tile lifts its pin; clicking a pin names the tile.

     That is the whole difference in one sentence: /doctor asks WHO, this
     page asks WHERE, and the layout answers the question it is asked.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   00 · TOKENS & PRIMITIVES
   ══════════════════════════════════════════════════════════════ */

.fw-cl-page{
	--pad:28px;
	--sticky:116px;
	--ink:var(--dk-d);
	--sheet:var(--wh);
	--line:color-mix(in srgb, var(--dk) 9%, transparent);
	--line-soft:color-mix(in srgb, var(--dk) 5.5%, transparent);
	--s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
	--sec:clamp(34px,4vw,68px);
	--r1:8px; --r2:12px; --r3:16px; --r4:22px;
	--ease:cubic-bezier(.22,1,.36,1);
	--ease-soft:cubic-bezier(.16,1,.3,1);
	background:var(--sheet);
	-webkit-text-size-adjust:100%
}
.fw-cl{display:block;position:relative}
.fw-cl-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)}

.fw-ico{
	width:1em;height:1em;flex-shrink:0;
	fill:none;stroke:currentColor;stroke-width:1.5;
	stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;overflow:visible
}
.fw-ico-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Canvas's style.css carries a bare `em{font-family:var(--cnvs-secondary-font)}`
   and that token is "Playfair Display", serif — so every <em> on the page
   silently renders in a serif face. One font on this page. */
.fw-cl em{font-family:var(--ff);font-style:normal}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.fw-cl-eyebrow{display:block;font-size:9.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--pk)}

.fw-cl-btn{
	display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:100px;
	font-size:13.5px;font-weight:600;color:var(--wh);
	background:linear-gradient(120deg,var(--pk),var(--pk-d));
	box-shadow:0 12px 28px -12px color-mix(in srgb, var(--pk) 62%, transparent);
	transition:transform .3s var(--ease),box-shadow .3s
}
.fw-cl-btn:hover{color:var(--wh);transform:translateY(-2px);box-shadow:0 18px 34px -14px color-mix(in srgb, var(--pk) 70%, transparent)}

/* The open/closed dot. Green ring that breathes when the doors are open,
   flat grey when they are not — the one place on the page where colour
   alone would be doing the work, so the label beside it always says it too. */
.fw-cl-live{position:relative;width:7px;height:7px;border-radius:50%;background:var(--mt-d);flex-shrink:0}
.fw-cl-live::after{
	content:"";position:absolute;inset:-4px;border-radius:50%;
	border:1px solid var(--mt-d);opacity:.5;animation:fw-cl-ping 2.4s var(--ease-soft) infinite
}
.fw-cl-live--off{background:var(--g4)}
.fw-cl-live--off::after{display:none}
@keyframes fw-cl-ping{0%{transform:scale(.7);opacity:.6}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* ══════════════════════════════════════════════════════════════
   01 · MASTHEAD — the shared band (fw-mast in css/custom.css)

   The same folio, heading, lede and icon figures as /doctor and the care
   area pages; this sheet only adds what the clinic directory has of its
   own: the icon tints, the search and the dotted vector map on the right.
   ══════════════════════════════════════════════════════════════ */

.fw-cl-mast .fw-mast__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.fw-cl-folio .fw-mast__mark{
	display:inline-flex;align-items:center;justify-content:center;
	width:clamp(30px,4vh,36px);height:clamp(30px,4vh,36px);border-radius:50%;
	background:var(--wh);color:var(--pk-d);box-shadow:inset 0 0 0 1px var(--pk-ring),0 8px 18px -6px var(--pk-t2)
}
.fw-cl-folio .fw-mast__mark .fw-ico{width:18px;height:18px;stroke-width:1.8}
.fw-cl-mast .fw-mast__stats{--stat-disc:clamp(34px,4.2vh,42px)}
.fw-cl-mast .fw-mast__stat-ico{border-radius:12px}
.fw-cl-mast .fw-mast__stat-ico--pk{color:var(--pk-d);background:var(--pk-t);box-shadow:inset 0 0 0 1px var(--pk-ring)}
.fw-cl-mast .fw-mast__stat-ico--bl{color:var(--bl-d);background:var(--bl-t);box-shadow:inset 0 0 0 1px var(--bl-ring)}
.fw-cl-mast .fw-mast__stat-ico--mt{color:var(--mt-ink);background:var(--mt-t);box-shadow:inset 0 0 0 1px var(--mt-ring)}
.fw-cl-mast .fw-mast__stat-ico--go{color:var(--go-ink);background:var(--go-t);box-shadow:inset 0 0 0 1px var(--go-ring)}
.fw-cl-mast .fw-mast__stat-ico .fw-ico{width:20px;height:20px;stroke-width:1.8}

/* ── The network, drawn ──
   Our own dotted world (static/maps/world-dots.svg) used as a MASK, so the
   dots take a brand gradient from :root instead of a colour baked into the
   file. The flags are an SVG on the same 1000 x 386 grid, so a marker's
   translate() is its position on the dots at every width. */
.fw-cl-vmap{display:flex;flex-direction:column;gap:clamp(10px,1.6vh,16px)}
.fw-cl-vmap__head{display:flex;align-items:center;gap:10px;margin:0;font-size:12.5px;color:var(--g6)}
.fw-cl-vmap__head b{font-weight:700;color:var(--ink)}
.fw-cl-vmap__live{position:relative;width:8px;height:8px;border-radius:50%;background:var(--mt-d);flex-shrink:0}
.fw-cl-vmap__live::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--mt-d);opacity:.6;
	animation:fw-cl-ping 2.4s ease-out infinite}
.fw-cl-vmap__stage{position:relative;width:100%;aspect-ratio:1000/386}
.fw-cl-vmap__dots{
	position:absolute;inset:0;
	background:linear-gradient(100deg,color-mix(in srgb, var(--bl) 58%, transparent),color-mix(in srgb, var(--pk) 52%, transparent));
	-webkit-mask:url("../static/maps/world-dots.svg") center/100% 100% no-repeat;
	        mask:url("../static/maps/world-dots.svg") center/100% 100% no-repeat
}
.fw-cl-vmap__pins{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fw-cl-vmap__foot{margin:0;font-size:11.5px;color:var(--g5)}

.fw-cl-vmk{cursor:pointer;outline:none}
.fw-cl-vmk__ring{fill:var(--wh);filter:drop-shadow(0 3px 6px var(--ink-a28));transition:transform .25s var(--ease)}
.fw-cl-vmk__pulse{fill:none;stroke:var(--pk);stroke-width:2;opacity:0;transform-origin:center;transform-box:fill-box}
@media(prefers-reduced-motion:no-preference){
	.fw-cl-vmk__pulse{animation:fw-cl-vpulse 3s ease-out infinite}
	.fw-cl-vmk:nth-of-type(3n+2) .fw-cl-vmk__pulse{animation-delay:.8s}
	.fw-cl-vmk:nth-of-type(3n+3) .fw-cl-vmk__pulse{animation-delay:1.6s}
}
@keyframes fw-cl-vpulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
@keyframes fw-cl-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.2);opacity:0}}
.fw-cl-vmk image{transition:transform .25s var(--ease);transform-origin:center;transform-box:fill-box}
.fw-cl-vmk__tip{opacity:0;pointer-events:none;transition:opacity .2s}
.fw-cl-vmk__tip rect{fill:var(--ink)}
.fw-cl-vmk__tip text{fill:var(--wh);font-family:var(--ff);font-size:19px;font-weight:600}
.fw-cl-vmk:hover .fw-cl-vmk__tip,
.fw-cl-vmk:focus-visible .fw-cl-vmk__tip{opacity:1}
.fw-cl-vmk:hover .fw-cl-vmk__ring,
.fw-cl-vmk:focus-visible .fw-cl-vmk__ring{stroke:var(--pk);stroke-width:3}
/* The hovered flag comes forward: SVG paints in document order, so the
   tooltip of a flag early in the list would sit under its neighbours. */
.fw-cl-vmap__pins:hover .fw-cl-vmk:not(:hover){opacity:.55}

/* The search. Flat and quiet: one hairline border, no shadow and no
   glow, a thin divider before a solid button. Focus is the border turning
   pink, not a halo. It sits a clear step below the figures above it. */
.fw-cl-find{margin-top:clamp(28px,4vh,44px)}
.fw-cl-find__row{
	display:flex;align-items:center;gap:12px;
	height:58px;padding:0 6px 0 20px;border-radius:16px;
	background:var(--wh);border:1px solid var(--line);
	transition:border-color .25s
}
.fw-cl-find__row:hover{border-color:var(--g3)}
.fw-cl-find__row:focus-within{border-color:var(--pk)}
.fw-cl-find__row>i{font-size:17px;color:var(--pk)}
.fw-cl-find input{
	flex:1;min-width:0;height:100%;border:0;background:none;outline:0;padding:0;
	font-family:var(--ff);font-size:15px;font-weight:400;letter-spacing:-.005em;color:var(--ink)
}
.fw-cl-find input::placeholder{color:var(--g4)}
.fw-cl-find input::-webkit-search-cancel-button{display:none}
.fw-cl-find button{
	position:relative;display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
	height:46px;padding:0 22px;border:0;border-radius:12px;cursor:pointer;
	font-family:var(--ff);font-size:13.5px;font-weight:600;color:var(--wh);
	background:var(--pk);transition:background .25s
}
.fw-cl-find button::before{
	content:'';position:absolute;left:-7px;top:10px;bottom:10px;width:1px;background:var(--line)
}
.fw-cl-find button:hover{background:var(--pk-d)}
.fw-cl-find button i{font-size:12px;transition:transform .25s var(--ease)}
.fw-cl-find button:hover i{transform:translateX(3px)}

/* Suggestions as quiet text, dot-separated, not a row of grey pills. */
.fw-cl-find__kw{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:14px 0 0;padding:0 0 0 2px;list-style:none;
	font-size:12.5px;color:var(--g5)}
.fw-cl-find__kw li[aria-hidden]{margin-right:12px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g4)}
.fw-cl-find__kw li:not([aria-hidden]) + li::before{content:'\00B7';margin:0 10px;color:var(--g3)}
.fw-cl-find__kw a{color:var(--g6);font-weight:500;text-decoration:underline;text-decoration-color:transparent;
	text-underline-offset:4px;transition:color .22s,text-decoration-color .22s}
.fw-cl-find__kw a:hover{color:var(--pk-d);text-decoration-color:var(--pk-ring)}

/* ── THE MAP ──────────────────────────────────────────────────
   The identity of this page. It is the first thing rendered and
   the last thing to load: an ordinary <div> until the loader in
   core.js says the API is ready, with a plate underneath so the
   band never collapses and never jumps.
   ────────────────────────────────────────────────────────────── */

.fw-cl-map{
	position:relative;border-radius:var(--r4);overflow:hidden;
	min-height:min(52vh,540px);height:100%;
	background:
		radial-gradient(120% 90% at 20% 15%, var(--bl-t) 0%, transparent 60%),
		radial-gradient(120% 90% at 85% 85%, var(--pk-t) 0%, transparent 60%),
		var(--paper-b);
	box-shadow:0 1px 0 var(--line),0 30px 60px -34px color-mix(in srgb, var(--dk) 55%, transparent)
}
.fw-cl-map__canvas{position:absolute;inset:0}
/* Google paints its own white ground the moment it initialises, so the
   waiting state has to sit above the canvas and be removed, not merely
   covered. */
.fw-cl-map__wait{
	position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
	font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--g5)
}
.fw-cl-map__wait i{
	width:34px;height:34px;border-radius:50%;
	border:2px solid var(--pk-t2);border-top-color:var(--pk);
	animation:fw-cl-spin 1s linear infinite
}
@keyframes fw-cl-spin{to{transform:rotate(360deg)}}
.fw-cl-map.is-ready .fw-cl-map__wait{opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.fw-cl-map.is-dead .fw-cl-map__wait i{display:none}

/* The count badge that floats on the map. Reads the same number the
   toolbar does, printed by the server, so the two cannot disagree. */
.fw-cl-map__badge{
	position:absolute;z-index:3;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;
	padding:8px 15px;border-radius:100px;background:var(--wh);
	box-shadow:0 2px 14px -4px color-mix(in srgb, var(--dk) 45%, transparent);
	font-size:11.5px;font-weight:600;color:var(--ink)
}
.fw-cl-map__badge b{color:var(--pk-d)}
.fw-cl-map__badge .fw-ico{font-size:14px;color:var(--pk)}

/* The info bubble Google draws is styled through its own container, which
   we cannot reach; what we CAN own is the node we hand it. */
.fw-cl-pin-card{display:block;min-width:180px;padding:2px 2px 4px;font-family:var(--ff)}
.fw-cl-pin-card b{display:block;font-size:13px;font-weight:600;line-height:1.3;color:var(--ink)}
.fw-cl-pin-card span{display:block;margin-top:3px;font-size:11px;color:var(--g5)}
.fw-cl-pin-card em{display:inline-flex;align-items:center;gap:4px;margin-top:7px;font-size:11px;font-weight:600;color:var(--pk-d)}

/* ══════════════════════════════════════════════════════════════
   01b · RESULTS AS ROWS
   ══════════════════════════════════════════════════════════════ */

/* ── ONE CLINIC PER ROW ───────────────────────────────────────
   A wide photograph (8:5) on the left, the facts beside it, and the
   actions along the foot. The single-clinic page's two-up tiles
   (.fw-cl-grid / .fw-cl-card) are left as they were.
   ────────────────────────────────────────────────────────────── */

.fw-cl-list{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,20px);margin:0;padding:0;list-style:none}
.fw-cl-list>li{animation:fw-cl-rise .55s var(--ease-soft) both}
.fw-cl-list>li:nth-child(3n+2){animation-delay:60ms}
.fw-cl-list>li:nth-child(3n+3){animation-delay:120ms}
@media (prefers-reduced-motion:reduce){.fw-cl-list>li{animation:none}}

.fw-cl-row{
	position:relative;display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);
	border-radius:var(--r3);overflow:hidden;background:var(--wh);
	box-shadow:inset 0 0 0 1px var(--line-soft);
	transition:box-shadow .35s var(--ease),transform .35s var(--ease)
}
.fw-cl-list>li:hover .fw-cl-row,
.fw-cl-list>li.is-lit .fw-cl-row{
	transform:translateY(-2px);
	box-shadow:inset 0 0 0 1px var(--pk-ring),0 24px 48px -30px var(--ink-a40)
}
.fw-cl-row__hit{position:absolute;inset:0;z-index:1}

/* Fills its column and the row's height. An aspect-ratio here would size
   the width from the row's height and push the photo into the text. */
.fw-cl-row__ph{position:relative;display:block;height:100%;min-height:250px;overflow:hidden;background:var(--g1)}
.fw-cl-row__ph img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;
	transition:transform .8s var(--ease-soft)}
.fw-cl-list>li:hover .fw-cl-row__ph img{transform:scale(1.05)}
.fw-cl-row__scrim{position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(to top, color-mix(in srgb, var(--dk-d) 55%, transparent) 0%, transparent 45%),
	           linear-gradient(to bottom, color-mix(in srgb, var(--dk-d) 30%, transparent) 0%, transparent 30%)}
.fw-cl-row__spec{
	position:absolute;z-index:2;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;
	padding:5px 11px 5px 8px;border-radius:100px;font-size:11px;font-weight:600;color:var(--pk-ink);
	background:var(--wh);box-shadow:0 4px 12px -5px var(--ink-a40);transition:color .22s
}
.fw-cl-row__spec .fw-ico{font-size:13px;color:var(--pk)}
.fw-cl-row__spec:hover{color:var(--pk-d)}
.fw-cl-row__rate{
	position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;
	padding:5px 11px;border-radius:100px;font-size:11px;color:var(--g5);background:var(--wh);
	box-shadow:0 4px 12px -5px var(--ink-a40)
}
.fw-cl-row__rate i{font-size:10px;color:var(--go)}
.fw-cl-row__rate b{font-size:12px;font-weight:700;color:var(--ink)}

.fw-cl-row__body{display:flex;flex-direction:column;gap:10px;min-width:0;padding:clamp(16px,1.6vw,22px) clamp(16px,1.8vw,26px)}
.fw-cl-row__top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fw-cl-row__open{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--mt-ink)}
.fw-cl-row__open small{font-size:11px;font-weight:500;color:var(--g5)}
.fw-cl-row__open--off{color:var(--g6)}
.fw-cl-row__since{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--g4)}
.fw-cl-row__name{margin:0;font-family:var(--ff);font-size:clamp(17px,1.25vw,20px);font-weight:600;line-height:1.25;
	letter-spacing:-.02em;color:var(--ink);transition:color .22s}
.fw-cl-list>li:hover .fw-cl-row__name{color:var(--pk-d)}
.fw-cl-row__where{display:flex;align-items:flex-start;gap:7px;margin:0;font-size:12.5px;line-height:1.5;color:var(--g5)}
.fw-cl-row__where i{margin-top:2px;font-size:11px;color:var(--pk)}
.fw-cl-row__blurb{margin:0;font-size:13px;line-height:1.6;color:var(--g6);
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fw-cl-row__svc{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.fw-cl-row__svc a,.fw-cl-row__svc span{position:relative;z-index:2;display:inline-block;padding:4px 11px;border-radius:100px;
	font-size:11px;font-weight:500;color:var(--g6);background:var(--g0);box-shadow:inset 0 0 0 1px var(--line-soft);
	transition:color .2s,background .2s}
.fw-cl-row__svc a:hover{color:var(--bl-ink);background:var(--bl-l)}
.fw-cl-row__svc span{color:var(--g4)}

.fw-cl-row__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
	margin-top:auto;padding-top:12px;border-top:1px solid var(--line-soft)}
.fw-cl-row__stats{display:flex;align-items:center;gap:18px;margin:0;padding:0;list-style:none}
.fw-cl-row__stats li{display:flex;align-items:baseline;gap:5px}
.fw-cl-row__stats b{font-size:15px;font-weight:600;color:var(--ink)}
.fw-cl-row__stats span{font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--g4)}
.fw-cl-row__act{position:relative;z-index:2;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fw-cl-row__icon{
	display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
	font-size:14px;color:var(--g6);background:var(--wh);box-shadow:inset 0 0 0 1px var(--line);
	transition:color .22s,box-shadow .22s
}
.fw-cl-row__icon:hover{color:var(--pk-d);box-shadow:inset 0 0 0 1px var(--pk-edge)}
.fw-cl-row__btn{
	display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 18px;border-radius:100px;
	font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--wh);
	background:linear-gradient(120deg,var(--pk),var(--pk-d));box-shadow:var(--pk-glow-sm);
	transition:transform .25s var(--ease),box-shadow .25s
}
.fw-cl-row__btn:hover{color:var(--wh);transform:translateY(-1px)}
.fw-cl-row__btn--line{color:var(--ink);background:var(--wh);box-shadow:inset 0 0 0 1px var(--line)}
.fw-cl-row__btn--line:hover{color:var(--pk-d);box-shadow:inset 0 0 0 1px var(--pk-edge)}

.fw-cl-skel .fw-cl-row{box-shadow:inset 0 0 0 1px var(--line-soft)}
.fw-cl-skel .fw-cl-row__ph{animation:fw-cl-pulse 1.4s ease-in-out infinite}

/* ══════════════════════════════════════════════════════════════
   02 · RESULTS TOOLBAR
   ══════════════════════════════════════════════════════════════ */

/* Sticky under the site header, like the blog's bar (.fw-blg-bar): the
   count, the country rail, the 24x7 switch and the sort stay in reach
   while the list scrolls. Frosted white over a faint brand wash, a brand
   hairline along the foot. The refine panel's data-offset-top in
   clinic.php clears this bar, so the two never overlap. */
.fw-cl-tools{
	position:sticky;top:var(--sticky);z-index:40;
	background:
		linear-gradient(101deg, color-mix(in srgb, var(--pk) 5.5%, transparent), color-mix(in srgb, var(--bl) 6%, transparent) 52%, color-mix(in srgb, var(--mt) 4.5%, transparent)),
		linear-gradient(180deg, color-mix(in srgb, var(--wh) 94%, transparent), color-mix(in srgb, var(--wh) 88%, transparent));
	-webkit-backdrop-filter:saturate(180%) blur(14px);
	        backdrop-filter:saturate(180%) blur(14px);
	border-top:1px solid var(--line-soft);
	box-shadow:0 1px 0 var(--bl-ring), 0 10px 26px -22px color-mix(in srgb, var(--dk) 50%, transparent)
}
.fw-cl-tools__in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-block:12px}
.fw-cl-tools__count{margin:0;display:flex;align-items:baseline;gap:7px;font-size:12.5px;color:var(--g5)}
.fw-cl-tools__count b{font-size:17px;font-weight:600;color:var(--ink)}
.fw-cl-tools__ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.fw-cl-toggle{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 9px;border-radius:100px;
	font-size:12px;font-weight:600;color:var(--g6);background:var(--g1);
	box-shadow:inset 0 0 0 1px var(--line-soft);transition:color .25s,background .25s,box-shadow .25s}
.fw-cl-toggle:hover{color:var(--ink)}
.fw-cl-toggle__box{position:relative;width:30px;height:17px;border-radius:100px;background:var(--g3);transition:background .3s var(--ease)}
.fw-cl-toggle__box i{position:absolute;top:2.5px;left:2.5px;width:12px;height:12px;border-radius:50%;background:var(--wh);
	transition:transform .3s var(--ease)}
.fw-cl-toggle.is-on{color:var(--mt-ink);background:var(--mt-t);box-shadow:inset 0 0 0 1px var(--mt-edge)}
.fw-cl-toggle.is-on .fw-cl-toggle__box{background:var(--mt-d)}
.fw-cl-toggle.is-on .fw-cl-toggle__box i{transform:translateX(13px)}
.fw-cl-toggle em{font-size:10.5px;font-weight:600;color:var(--g5)}
.fw-cl-toggle.is-on em{color:var(--mt-ink)}

.fw-cl-seg{display:flex;align-items:center;gap:3px;padding:3px;border-radius:100px;background:var(--g1);
	box-shadow:inset 0 0 0 1px var(--line-soft)}
.fw-cl-seg__lbl{padding-inline:9px 4px;font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--g4)}
.fw-cl-seg__o{padding:6px 13px;border-radius:100px;font-size:12px;font-weight:500;color:var(--g6);transition:color .22s,background .22s}
.fw-cl-seg__o:hover{color:var(--ink)}
.fw-cl-seg__o.is-on{color:var(--wh);background:linear-gradient(120deg,var(--pk),var(--pk-d));font-weight:600;
	box-shadow:var(--pk-glow-sm)}
.fw-cl-seg__o.is-on:hover{color:var(--wh)}

/* ── The country rail ──
   Between the count and the controls: the ten busiest countries as flag
   chips, scrolling inside itself. core.js [data-rail] shows the arrows and
   the edge fade only while the row overflows. */
.fw-cl-ctry{position:relative;flex:1 1 auto;min-width:0}
.fw-cl-ctry__track{
	display:flex;gap:6px;margin:0;padding:2px 0;list-style:none;
	overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain
}
.fw-cl-ctry__track::-webkit-scrollbar{display:none}
.fw-cl-ctry.has-rail:not(.at-end) .fw-cl-ctry__track{
	-webkit-mask-image:linear-gradient(90deg,var(--ink) 86%,transparent);mask-image:linear-gradient(90deg,var(--ink) 86%,transparent)}
.fw-cl-ctry.has-rail.at-end:not(.at-start) .fw-cl-ctry__track{
	-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 14%);mask-image:linear-gradient(90deg,transparent,var(--ink) 14%)}
.fw-cl-ctry.has-rail:not(.at-start):not(.at-end) .fw-cl-ctry__track{
	-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 12%,var(--ink) 88%,transparent);
	        mask-image:linear-gradient(90deg,transparent,var(--ink) 12%,var(--ink) 88%,transparent)}
.fw-cl-ctry__track li{flex-shrink:0}
.fw-cl-ctry__c{
	display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 7px;border-radius:100px;white-space:nowrap;
	font-size:12px;font-weight:600;color:var(--g7);background:var(--wh);box-shadow:inset 0 0 0 1px var(--line);
	transition:color .22s,background .22s,box-shadow .22s
}
.fw-cl-ctry__c img{width:20px;height:20px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.fw-cl-ctry__c i{font-size:14px;color:var(--bl);padding-left:4px}
.fw-cl-ctry__c em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--g4)}
.fw-cl-ctry__c:hover{color:var(--pk-d);box-shadow:inset 0 0 0 1px var(--pk-ring)}
.fw-cl-ctry__c.is-on{color:var(--wh);background:linear-gradient(120deg,var(--pk),var(--pk-d));box-shadow:none}
.fw-cl-ctry__c.is-on i,.fw-cl-ctry__c.is-on em{color:var(--wh)}
.fw-cl-ctry__nav{
	position:absolute;top:50%;z-index:2;transform:translateY(-50%);
	display:none;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;
	cursor:pointer;color:var(--g6);background:var(--wh);box-shadow:0 4px 12px -4px var(--ink-a40),inset 0 0 0 1px var(--line);
	transition:opacity .25s,color .22s
}
.fw-cl-ctry.has-rail .fw-cl-ctry__nav{display:flex}
.fw-cl-ctry__nav i{font-size:12px}
.fw-cl-ctry__nav:hover{color:var(--pk-d)}
.fw-cl-ctry__nav[disabled]{opacity:0;pointer-events:none}
.fw-cl-ctry__nav--prev{left:-4px}
.fw-cl-ctry__nav--next{right:-4px}
.fw-cl-tools__in{flex-wrap:nowrap}
.fw-cl-tools__count,.fw-cl-tools__ctl{flex-shrink:0}

/* ══════════════════════════════════════════════════════════════
   03 · LAYOUT  —  results beside the refine rail
   ══════════════════════════════════════════════════════════════ */

.fw-cl-body{padding-block:clamp(22px,3vw,44px) var(--sec);background:var(--wh)}
.fw-cl-layout{display:grid;grid-template-columns:minmax(0,1fr) 274px;gap:clamp(24px,3vw,52px);align-items:start}
.fw-cl-main{min-width:0}

.fw-cl-note{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
	margin:0 0 var(--s5);padding:0 0 12px;border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--g5)}
.fw-cl-note b{color:var(--ink)}
.fw-cl-note a{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--pk-d)}
.fw-cl-note a i{font-size:9px}

.fw-cl-empty{padding:clamp(40px,6vw,80px) 0;text-align:center}
.fw-cl-empty__ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
	font-size:24px;color:var(--pk);background:var(--pk-l)}
.fw-cl-empty h2{margin:18px 0 6px;font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.fw-cl-empty p{margin:0 0 20px;font-size:13.5px;color:var(--g5)}

/* ── THE TILE ─────────────────────────────────────────────────
   Landscape, two up. A building photographs wide; the doctor
   directory's portrait tile would crop every one of these to a
   doorframe.
   ────────────────────────────────────────────────────────────── */

.fw-cl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.6vw,26px);margin:0;padding:0;list-style:none}
.fw-cl-grid>li{animation:fw-cl-rise .55s var(--ease-soft) both}
/* Modulo the column count, so row two starts its own sweep. */
.fw-cl-grid>li:nth-child(4n+2){animation-delay:60ms}
.fw-cl-grid>li:nth-child(4n+3){animation-delay:120ms}
.fw-cl-grid>li:nth-child(4n+4){animation-delay:180ms}
@media (prefers-reduced-motion:reduce){.fw-cl-grid>li{animation:none}}

.fw-cl-card{
	position:relative;display:grid;grid-template-columns:minmax(0,168px) minmax(0,1fr);gap:0;
	height:100%;border-radius:var(--r3);overflow:hidden;background:var(--wh);
	box-shadow:inset 0 0 0 1px var(--line-soft);
	transition:box-shadow .35s var(--ease),transform .35s var(--ease)
}
.fw-cl-grid>li:hover .fw-cl-card,
.fw-cl-grid>li.is-lit .fw-cl-card{
	transform:translateY(-3px);
	box-shadow:inset 0 0 0 1px var(--pk-ring),0 22px 44px -26px color-mix(in srgb, var(--dk) 60%, transparent)
}

.fw-cl-card__ph{position:relative;display:block;overflow:hidden;background:var(--g1)}
.fw-cl-card__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	transition:transform .8s var(--ease-soft)}
.fw-cl-grid>li:hover .fw-cl-card__ph img{transform:scale(1.06)}
.fw-cl-card__scrim{position:absolute;inset:0;
	background:linear-gradient(to top, color-mix(in srgb, var(--dk) 62%, transparent) 0%, transparent 58%)}

/* The rating rides the photograph, because it is the one figure being
   compared across a row and it needs to be findable at the same spot on
   every tile. */
.fw-cl-card__rate{
	position:absolute;left:9px;bottom:9px;display:inline-flex;align-items:center;gap:5px;
	padding:4px 9px;border-radius:100px;background:var(--wh);
	box-shadow:0 2px 10px -3px color-mix(in srgb, var(--bk) 45%, transparent);
	font-size:11px;color:var(--g5)
}
.fw-cl-card__rate i{font-size:9.5px;color:var(--go)}
.fw-cl-card__rate b{font-size:11.5px;font-weight:600;color:var(--ink)}

.fw-cl-card__body{display:flex;flex-direction:column;gap:9px;padding:15px 16px 14px;min-width:0}

.fw-cl-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.fw-cl-card__spec{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:100px;
	font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--pk-ink);background:var(--pk-t);
	box-shadow:inset 0 0 0 1px var(--pk-ring);transition:background .22s}
.fw-cl-card__spec:hover{color:var(--pk-ink);background:var(--pk-t2)}
.fw-cl-card__spec .fw-ico{font-size:13px;color:var(--pk)}
.fw-cl-card__open{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
	font-size:10.5px;font-weight:600;color:var(--mt-ink)}
.fw-cl-card__open--off{color:var(--g5)}

.fw-cl-card__name{display:block;font-size:15.5px;font-weight:600;line-height:1.26;letter-spacing:-.015em;color:var(--ink);
	transition:color .22s}
.fw-cl-card__name:hover{color:var(--pk-d)}
.fw-cl-card__where{display:flex;align-items:center;gap:6px;margin:0;font-size:11.5px;color:var(--g5)}
.fw-cl-card__where i{font-size:11px;color:var(--pk)}
.fw-cl-card__where a{color:var(--g5);transition:color .2s}
.fw-cl-card__where a:hover{color:var(--pk-d)}

/* Procedures. Ruled chips, capped at three plus a remainder — a tile that
   lists eleven services is a menu, not a card. */
.fw-cl-card__svc{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0;list-style:none}
.fw-cl-card__svc a,.fw-cl-card__svc span{display:inline-block;padding:3px 9px;border-radius:100px;
	font-size:10.5px;font-weight:500;color:var(--g6);background:var(--g1);
	box-shadow:inset 0 0 0 1px var(--line-soft);transition:color .2s,background .2s}
.fw-cl-card__svc a:hover{color:var(--bl-ink);background:var(--bl-l)}
.fw-cl-card__svc span{color:var(--g4)}

/* Three figures on a shared baseline. Compared across a row, so they are
   ruled rather than chipped. */
.fw-cl-card__stats{display:flex;align-items:center;gap:0;margin:auto 0 0;padding:10px 0 0;list-style:none;
	border-top:1px solid var(--line-soft)}
.fw-cl-card__stats li{flex:1 1 auto;display:flex;flex-direction:column;gap:1px;position:relative;padding-right:8px}
.fw-cl-card__stats li+li{padding-left:12px}
.fw-cl-card__stats li+li::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:1px;background:var(--line-soft)}
.fw-cl-card__stats b{font-size:13px;font-weight:600;color:var(--ink);line-height:1.1}
.fw-cl-card__stats span{font-size:9.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--g4)}

.fw-cl-card__go{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;align-self:center;
	padding:7px 14px;border-radius:100px;font-size:11.5px;font-weight:600;color:var(--pk-d);
	background:var(--pk-l);transition:color .25s,background .25s}
.fw-cl-card__go:hover{color:var(--wh);background:linear-gradient(120deg,var(--pk),var(--pk-d))}
.fw-cl-card__go i{font-size:10px;transition:transform .25s var(--ease)}
.fw-cl-card__go:hover i{transform:translateX(3px)}

/* The whole tile is one target. A stretched link keeps the name, the
   photograph and the empty space between them clickable without nesting
   an <a> inside an <a>, which is invalid and which browsers un-nest. */
.fw-cl-card__hit{position:absolute;inset:0;z-index:1}
.fw-cl-card__spec,.fw-cl-card__where a,.fw-cl-card__svc a,.fw-cl-card__go{position:relative;z-index:2}

/* Skeleton, cloned while a page is in flight so the grid keeps its height
   and the footer does not jump up. */
.fw-cl-skel .fw-cl-card{box-shadow:inset 0 0 0 1px var(--line-soft)}
.fw-cl-skel__l{display:block;height:9px;border-radius:4px;background:var(--g1);animation:fw-cl-pulse 1.4s ease-in-out infinite}
.fw-cl-skel__l--t{width:72%;height:14px;margin-bottom:9px}
.fw-cl-skel__l--s{width:46%;margin-bottom:9px}
.fw-cl-skel__l--foot{width:60%;margin-top:12px}
.fw-cl-skel .fw-cl-card__ph{min-height:132px;background:var(--g1);animation:fw-cl-pulse 1.4s ease-in-out infinite}
@keyframes fw-cl-pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ══════════════════════════════════════════════════════════════
   04 · PAGER + LOAD MORE

   IDENTICAL TO THE BLOG'S (css/bloglist.css §11 and §12), value for
   value, so the two listings page the same way: the range, then first,
   previous, the numbers, next and last, and Load more underneath.
   ══════════════════════════════════════════════════════════════ */

.fw-cl-pager-wrap{
	display:flex;flex-direction:column;align-items:center;gap:var(--s4);
	margin-top:clamp(24px,3vw,44px);padding-top:clamp(20px,2.6vw,34px);
	border-top:1px solid var(--line)
}
.fw-cl-pager__meta{margin:0;font-size:12.5px;color:var(--g5)}
.fw-cl-pager__meta strong{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.fw-cl-pager{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px}
.fw-cl-pager__n{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.fw-cl-pg{
	display:inline-flex;align-items:center;justify-content:center;gap:7px;
	min-width:40px;height:40px;padding-inline:12px;
	border-radius:100px;
	font-size:13px;font-weight:600;color:var(--g6);
	font-variant-numeric:tabular-nums;
	box-shadow:inset 0 0 0 1px var(--line);
	transition:color .25s, background .25s, box-shadow .25s, transform .25s var(--ease)
}
.fw-cl-pg:hover{
	color:var(--bl-d);background:var(--bl-bg);
	box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bl) 28%, transparent);
	transform:translateY(-1px)
}
.fw-cl-pg.is-current{
	color:var(--wh);background:var(--ink);
	box-shadow:0 8px 18px -8px color-mix(in srgb, var(--dk-d) 65%, transparent)
}
.fw-cl-pg--step span{font-size:12.5px}
.fw-cl-pg--edge{padding-inline:0;color:var(--g4)}
.fw-cl-pg i{font-size:11px}
.fw-cl-pg.is-gap{box-shadow:none;color:var(--g3)}
.fw-cl-pg.is-gap:hover{background:none;transform:none}

.fw-cl-more{display:flex;justify-content:center;margin-top:clamp(18px,2.2vw,28px)}
.fw-cl-more__btn{
	position:relative;overflow:hidden;
	display:inline-flex;align-items:center;gap:10px;
	padding:14px 30px;border:0;cursor:pointer;border-radius:100px;
	font-family:var(--ff);font-size:13.5px;font-weight:600;letter-spacing:.01em;
	color:var(--ink);background:var(--wh);
	box-shadow:inset 0 0 0 1px var(--line), 0 10px 26px -18px color-mix(in srgb, var(--dk) 55%, transparent);
	transition:color .3s, box-shadow .3s, transform .3s var(--ease)
}
.fw-cl-more__btn:hover{
	color:var(--bl-d);transform:translateY(-2px);
	box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bl) 30%, transparent), 0 16px 30px -18px color-mix(in srgb, var(--bl) 70%, transparent)
}
.fw-cl-more__glow{
	position:absolute;inset:0;z-index:0;pointer-events:none;
	background:linear-gradient(101deg, color-mix(in srgb, var(--pk) 10%, transparent), color-mix(in srgb, var(--bl) 12%, transparent) 52%, color-mix(in srgb, var(--mt) 9%, transparent));
	opacity:0;transition:opacity .35s
}
.fw-cl-more__btn:hover .fw-cl-more__glow{opacity:1}
.fw-cl-more__label{position:relative;z-index:1}
.fw-cl-more__spin{
	position:relative;z-index:1;
	width:15px;height:15px;border-radius:50%;
	border:2px solid color-mix(in srgb, var(--bl) 25%, transparent);border-top-color:var(--bl);
	display:none
}
.fw-cl-more__btn.is-loading{cursor:progress;color:var(--g5);transform:none}
.fw-cl-more__btn.is-loading .fw-cl-more__spin{display:block;animation:fw-cl-spin .7s linear infinite}

/* ══════════════════════════════════════════════════════════════
   05 · REFINE RAIL

   Ruled, not boxed. Each facet shows its share of the network as
   a proportion bar: "Delhi holds a fifth of the clinics" is what
   a bare count beside a word cannot tell you.
   ══════════════════════════════════════════════════════════════ */

.fw-cl-rail{position:relative;min-width:0}
.fw-cl-rail__in{display:flex;flex-direction:column;gap:22px;padding-left:clamp(16px,1.6vw,26px);border-left:1px solid var(--line-soft)}
.fw-cl-rail__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fw-cl-rail__title{font-size:9.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--g4)}

.fw-cl-facet__lbl{display:block;margin-bottom:9px;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.fw-cl-facet ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1px}
.fw-cl-facet a{position:relative;display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r1);
	font-size:12px;color:var(--g6);overflow:hidden;transition:color .22s,background .22s}
.fw-cl-facet a:hover{color:var(--ink);background:var(--g0)}
.fw-cl-facet a.is-on{color:var(--pk-ink);background:var(--pk-l);font-weight:600}
.fw-cl-facet .fw-ico{font-size:14px;color:var(--pk);flex-shrink:0}
.fw-cl-facet__t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-cl-facet__n{font-size:10.5px;font-weight:600;color:var(--g4)}
.fw-cl-facet a.is-on .fw-cl-facet__n{color:var(--pk-d)}
/* A <progress value max>: the share is data in the markup, the look is here. */
.fw-cl-facet__bar{position:absolute;left:0;right:0;bottom:0;width:auto;height:2px;border-radius:2px;
	display:block;appearance:none;-webkit-appearance:none;border:0;background:transparent;overflow:hidden;opacity:.55}
.fw-cl-facet__bar::-webkit-progress-bar{background:transparent}
.fw-cl-facet__bar::-webkit-progress-value{border-radius:2px;background:linear-gradient(90deg,var(--pk-t2),var(--pk))}
.fw-cl-facet__bar::-moz-progress-bar{border-radius:2px;background:linear-gradient(90deg,var(--pk-t2),var(--pk))}

.fw-cl-facet--tags ul{flex-direction:row;flex-wrap:wrap;gap:5px}
.fw-cl-facet--tags a{padding:5px 11px;border-radius:100px;font-size:11px;background:var(--g1);
	box-shadow:inset 0 0 0 1px var(--line-soft)}
.fw-cl-facet--tags a:hover{color:var(--bl-ink);background:var(--bl-l);box-shadow:inset 0 0 0 1px var(--bl-ring)}
.fw-cl-facet--tags a.is-on{color:var(--wh);background:linear-gradient(120deg,var(--pk),var(--pk-d));box-shadow:none}
.fw-cl-facet--tags a.is-on em{color:var(--wh)}
.fw-cl-facet--tags em{margin-left:5px;font-size:9.5px;font-weight:600;color:var(--g4)}

.fw-cl-rail__reset{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--pk-d);transition:color .22s}
.fw-cl-rail__reset i{font-size:11px;transition:transform .4s var(--ease)}
.fw-cl-rail__reset:hover{color:var(--ink)}
.fw-cl-rail__reset:hover i{transform:rotate(-180deg)}

/* ── Location: countries with their cities ──
   One native <details> per country (opens with JS off and by keyboard).
   Our own flag file (app_flag_url()); the count is the country's clinics
   in the current selection. */
.fw-cl-facet--geo{display:flex;flex-direction:column}
.fw-cl-geo{border-bottom:1px solid var(--line-soft)}
.fw-cl-geo:first-of-type{border-top:1px solid var(--line-soft)}
.fw-cl-geo__c{
	display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--r1);
	cursor:pointer;list-style:none;transition:background .22s;-webkit-tap-highlight-color:transparent
}
.fw-cl-geo__c::-webkit-details-marker{display:none}
.fw-cl-geo__c::marker{content:''}
.fw-cl-geo__c:hover{background:var(--g0)}
.fw-cl-geo__flag{width:20px;height:15px;flex-shrink:0;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.fw-cl-geo__flag--none{display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:var(--g5);background:var(--g0)}
.fw-cl-geo__name{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-cl-geo__n{flex-shrink:0;min-width:22px;padding:1px 7px;border-radius:100px;text-align:center;
	font-size:10.5px;font-weight:600;color:var(--g6);background:var(--g1);font-variant-numeric:tabular-nums}
.fw-cl-geo__chev{flex-shrink:0;font-size:10px;color:var(--g4);transition:transform .3s var(--ease)}
.fw-cl-geo[open] > .fw-cl-geo__c .fw-cl-geo__chev{transform:rotate(180deg)}
.fw-cl-geo.is-on .fw-cl-geo__name{color:var(--pk-d)}
.fw-cl-geo.is-on .fw-cl-geo__n{color:var(--wh);background:var(--pk)}
.fw-cl-facet .fw-cl-geo__cities{margin:0 0 6px;padding-left:29px;gap:0}
.fw-cl-geo__t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-cl-geo__cn{flex-shrink:0;font-size:10.5px;font-weight:600;color:var(--g4);font-variant-numeric:tabular-nums}
.fw-cl-facet a.is-on .fw-cl-geo__cn{color:var(--pk-d)}

.fw-cl-help{padding-top:18px;border-top:1px solid var(--line-soft)}
.fw-cl-help b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.fw-cl-help p{margin:6px 0 10px;font-size:12px;line-height:1.6;color:var(--g5)}
.fw-cl-help a{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--pk-d)}
.fw-cl-help a i{font-size:9px;transition:transform .25s var(--ease)}
.fw-cl-help a:hover i{transform:translateX(3px)}

/* The sheet's own controls exist only on phones and tablets (§07). */
.fw-cl-filters-btn,.fw-cl-rail__x,.fw-cl-rail__foot,.fw-cl-scrim{display:none}

/* ══════════════════════════════════════════════════════════════
   06 · CLOSING BAND

   BRIGHT. The standing rule for every page on this site is that no
   band goes dark — not a hero, not a closing CTA. Depth here comes
   from a tinted white ground, two blurred brand discs and a hairline,
   which is what the rest of the page is made of.
   ══════════════════════════════════════════════════════════════ */

.fw-cl-close{position:relative;overflow:hidden;padding-block:var(--sec);
	border-top:1px solid var(--line-soft);background:var(--paper-p)}
.fw-cl-close__aura{position:absolute;width:44vw;height:44vw;right:-14vw;top:-18vw;border-radius:50%;
	background:var(--pk-t);filter:blur(90px);pointer-events:none}
.fw-cl-close__aura2{position:absolute;width:34vw;height:34vw;left:-12vw;bottom:-16vw;border-radius:50%;
	background:var(--bl-t);filter:blur(80px);pointer-events:none}
.fw-cl-close__inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(20px,3vw,56px);align-items:center}
.fw-cl-close__title{margin:10px 0 0;font-size:clamp(26px,3.4vw,42px);font-weight:300;line-height:1.1;letter-spacing:-.028em;color:var(--ink)}
.fw-cl-close__title b{font-weight:600;color:var(--pk-d)}
.fw-cl-close__sub{margin:0 0 20px;font-size:14px;line-height:1.7;font-weight:300;color:var(--g6)}
.fw-cl-close__btns{display:flex;flex-wrap:wrap;gap:10px}
/* The second button on a bright ground is an outline, not a ghost. */
.fw-cl-btn--line{color:var(--g7);background:var(--wh);box-shadow:inset 0 0 0 1px var(--line)}
.fw-cl-btn--line:hover{color:var(--pk-d);box-shadow:inset 0 0 0 1px var(--pk-edge)}

/* ══════════════════════════════════════════════════════════════
   07 · RESPONSIVE
   One set of markup. Every difference below is a CSS switch.
   ══════════════════════════════════════════════════════════════ */

@media (max-width:1200px){
	.fw-cl-layout{grid-template-columns:minmax(0,1fr) 244px}
	.fw-cl-card{grid-template-columns:minmax(0,142px) minmax(0,1fr)}
}

@media (max-width:1024px){
	.fw-cl-mast .fw-mast__grid{grid-template-columns:minmax(0,1fr)}
	.fw-cl-tools__in{flex-wrap:wrap}
	.fw-cl-ctry{order:3;flex:1 1 100%}
	.fw-cl-map{min-height:46vh}
	.fw-cl-layout{grid-template-columns:1fr}
	/* THE REFINE PANEL BECOMES A SHEET, the same as /doctor
	   (custom/js/filter-sheet.js). It used to stack above the results,
	   so a phone scrolled past twenty countries before the first clinic.
	   !important on position and overflow only: the theia sticky-sidebar
	   plugin writes them inline. .fw-cl-inner is a z-index:1 stacking
	   context that would trap the sheet under the sticky header (1000),
	   so the results wrapper gives it up here. The sheet sits at 1045,
	   above the tab bar (1040) and under the site menu (1050). */
	.fw-cl-body > .fw-cl-inner{z-index:auto}
	.fw-cl-filters-btn{
		display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
		padding:8px 14px;border:0;border-radius:100px;cursor:pointer;
		font-family:var(--ff);font-size:12px;font-weight:600;color:var(--ink);
		background:var(--wh);box-shadow:inset 0 0 0 1px var(--line),0 2px 8px -2px var(--ink-a06)
	}
	.fw-cl-filters-btn i{font-size:14px;color:var(--pk)}
	.fw-cl-filters-btn em{
		min-width:18px;height:18px;padding:0 5px;border-radius:100px;font-style:normal;
		display:inline-flex;align-items:center;justify-content:center;
		font-size:10.5px;font-weight:700;color:var(--wh);background:var(--pk)
	}
	.fw-cl-rail{
		position:fixed!important;top:0;right:0;bottom:0;z-index:1045;
		width:min(420px,88vw);overflow-y:auto!important;overscroll-behavior:contain;
		background:var(--wh);box-shadow:-24px 0 60px -30px var(--ink-a40);
		transform:translateX(104%);visibility:hidden;
		transition:transform .38s var(--ease),visibility 0s linear .38s
	}
	.fw-filters-open .fw-cl-rail{transform:none;visibility:visible;transition:transform .38s var(--ease)}
	.fw-cl-rail__in{padding:0 18px;border-left:0;gap:22px}
	.fw-cl-rail__head{position:sticky;top:0;z-index:2;margin-inline:-18px;padding:16px 18px 12px;
		background:var(--wh);border-bottom:1px solid var(--line-soft)}
	.fw-cl-rail__title{font-size:15px;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
	.fw-cl-rail__reset{margin-left:auto}
	.fw-cl-rail__x{
		display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
		width:36px;height:36px;margin-left:12px;border:0;border-radius:50%;cursor:pointer;
		font-size:14px;color:var(--g7);background:var(--g0)
	}
	.fw-cl-rail__foot{display:block;position:sticky;bottom:0;margin-inline:-18px;padding:12px 18px 18px;
		background:linear-gradient(180deg,transparent,var(--wh) 28%)}
	.fw-cl-rail__foot .fw-cl-btn{width:100%;justify-content:center;border:0;cursor:pointer;font-family:var(--ff)}
	.fw-cl-scrim{display:block;position:fixed;inset:0;z-index:1044;background:var(--veil);
		opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}
	.fw-filters-open .fw-cl-scrim{opacity:1;visibility:visible;transition:opacity .3s}
	.fw-filters-open{overflow:hidden}
	.fw-cl-close__inner{grid-template-columns:1fr}
}

@media (max-width:820px){
	.fw-cl-grid{grid-template-columns:1fr}
}

@media (max-width:640px){
	.fw-cl-page{--pad:14px}
	.fw-cl-mast__title{font-size:clamp(28px,8vw,38px)}
	.fw-cl-map{min-height:300px;border-radius:var(--r3)}
	.fw-cl-tools__in{align-items:flex-start;flex-direction:column;gap:10px}
	/* A left-aligned column sizes each child to its content, which let the
	   country rail measure its full scroll width and widen the page. */
	.fw-cl-ctry{align-self:stretch;width:100%}
	/* The bar is pinned, so on a phone it is two short rows, not four:
	   the controls in one row that scrolls sideways, then the countries.
	   The count goes (the sheet's Show N button and the filter note carry
	   it); 193px of fixed bar was a quarter of the screen. */
	.fw-cl-tools__in{gap:8px;padding-block:9px}
	.fw-cl-tools__count{display:none}
	.fw-cl-tools__ctl{
		width:100%;flex-wrap:nowrap;justify-content:flex-start;gap:8px;
		overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none
	}
	.fw-cl-tools__ctl::-webkit-scrollbar{display:none}
	.fw-cl-tools__ctl > *{flex-shrink:0}
	.fw-cl-seg__o{white-space:nowrap}
	/* The row turns over: photograph on top, body beneath. Same markup. */
	.fw-cl-row{grid-template-columns:1fr}
	.fw-cl-row__ph{height:auto;aspect-ratio:16/9;min-height:0}
	.fw-cl-row__foot{flex-direction:column;align-items:stretch}
	.fw-cl-row__act{justify-content:flex-start}
	.fw-cl-row__btn{flex:1 1 auto}
	.fw-cl-pg--step span{display:none}
	.fw-cl-pg--step{width:44px;padding:0}
	/* The tile turns over: photograph on top, body beneath. Same markup. */
	.fw-cl-card{grid-template-columns:1fr}
	.fw-cl-card__ph{aspect-ratio:16/9}
	.fw-cl-find button span{display:none}
	.fw-cl-find button{padding-inline:16px}
	.fw-cl-find__row{height:54px;padding-left:16px}
}

/* The 24x7 switch with nothing behind it in the current selection: shown, not offered. */
.fw-cl-toggle.is-empty{opacity:.45;cursor:default;pointer-events:none}