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

.fw-cat-page{
	--pad:28px;
	--article-top:116px;
	--article-progress:0;

	--ink:var(--dk-d);
	--paper:var(--wh);
	--paper-2:var(--paper);
	--line:color-mix(in srgb, var(--dk) 9%, transparent);
	--line-soft:color-mix(in srgb, var(--dk) 5.5%, transparent);
	--ring:0 0 0 1px var(--ink-a06);

	--s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
	--s6:32px; --s7:48px; --s8:64px;
	--sec:clamp(38px, 4.4vw, 80px);

	--r1:8px; --r2:12px; --r3:16px;

	--ease:cubic-bezier(.22,1,.36,1);
	--ease-soft:cubic-bezier(.16,1,.3,1);

	background:var(--paper);
	-webkit-text-size-adjust:100%
}

.fw-lst{display:block;position:relative}

/* The one layout primitive: width:100% plus the gutter. No max-width and
   no margin-inline:auto anywhere in this file. */
.fw-cat-jump__inner,
.fw-cat-sec__inner,
.fw-cat-team__in,
.fw-cat-close__inner{
	position:relative;z-index:1;
	width:100%;
	padding-inline:var(--pad)
}

.fw-cat-eyebrow{
	display:flex;align-items:center;gap:9px;
	font-size:9.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
	color:var(--g5)
}
.fw-cat-eyebrow::before{
	content:'';width:14px;height:1.5px;border-radius:2px;background:var(--pk);flex-shrink:0
}
.fw-cat-eyebrow--onDark{color:var(--pk-l3)}
.fw-cat-eyebrow--onDark::before{background:var(--pk-l3)}

.fw-cat-link{
	display:inline-flex;align-items:center;gap:6px;
	font-size:12px;font-weight:600;letter-spacing:-.005em;
	color:var(--bl);
	transition:color .25s
}
.fw-cat-link i{font-size:11px;transition:transform .3s var(--ease)}
.fw-cat-link:hover{color:var(--bl-d)}
.fw-cat-link:hover i{transform:translateX(3px)}

.fw-cat-txtlink{
	display:inline-flex;align-items:center;gap:7px;
	font-size:13.5px;font-weight:500;color:var(--g6);
	transition:color .25s
}
.fw-cat-txtlink i{font-size:12px;color:var(--pk);transition:transform .3s var(--ease)}
.fw-cat-txtlink:hover{color:var(--ink)}
.fw-cat-txtlink:hover i{transform:translateY(3px)}

.fw-cat-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	min-height:46px;padding:0 22px;
	border-radius:100px;
	font-size:14px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
	color:var(--wh);background:var(--pk);
	box-shadow:0 1px 2px color-mix(in srgb, var(--pk) 20%, transparent), 0 10px 24px -8px color-mix(in srgb, var(--pk) 50%, transparent);
	transition:background .25s, box-shadow .3s, transform .25s var(--ease);
	-webkit-tap-highlight-color:transparent
}
.fw-cat-btn:hover{background:var(--pk-d);box-shadow:0 1px 2px color-mix(in srgb, var(--pk) 24%, transparent), 0 16px 32px -10px color-mix(in srgb, var(--pk) 55%, transparent)}
.fw-cat-btn:active{transform:scale(.975)}
.fw-cat-btn--wh{color:var(--ink);background:var(--wh);box-shadow:0 12px 28px -10px color-mix(in srgb, var(--bk) 50%, transparent)}
.fw-cat-btn--wh:hover{background:var(--wh);color:var(--ink);transform:translateY(-1px)}
.fw-cat-btn--onDark{
	color:color-mix(in srgb, var(--wh) 94%, transparent);background:color-mix(in srgb, var(--wh) 7%, transparent);
	box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--wh) 18%, transparent)
}
.fw-cat-btn--onDark:hover{background:color-mix(in srgb, var(--wh) 13%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--wh) 32%, transparent)}

/* Breadcrumb — solid brand blue badges, the site-wide device. A frosted
   pill borrows its colour from whatever is behind it; a solid fill is the
   same blue on every page. */
/* Set as type, not as pills. A trail of coloured capsules is the loudest
   thing on the page and it is the least important — it should be readable
   and otherwise invisible. */

/* ── Icon primitive ──
   Every SVG on the page is one <use> of a <symbol> printed once in the
   body. stroke and fill are inherited properties, so they cross the <use>
   shadow boundary — which is why a single rule here styles every icon and
   why colour can simply be set on the parent as currentColor.
   1em sizing means an icon is scaled by the font-size of whatever it sits
   in, so a chip resizes its glyph by changing one number. */
.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}
@keyframes fwRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* The `img.` prefix is load bearing: it has to out-specify the theme's
   `img.lazy{max-width:100%}`, and vanilla-lazyload KEEPS .lazy when it adds
   .lazy-loaded — a lower-specificity reveal loses, and the picture loads
   perfectly and then sits at opacity:0 with no error anywhere. */
img.lazy-loaded,
img.lazy-error{opacity:1}

/* ══════════════════════════════════════════════════════════════
   02 · §2 JUMP RAIL (category page)

   The same rail /services carries, because it is the same job one level
   down: there it lists the eight care areas, here the nine treatments in
   this one. No radius, no ring, no fill — the only thing that marks a link
   is the rule under it, blue while the pointer is on it and brand pink
   when it is the section you are in. The border is always THERE and only
   changes colour, so nothing shifts by 2px as you move across the row.
   ══════════════════════════════════════════════════════════════ */

.fw-cat-jump{
	position:sticky;top:var(--article-top);z-index:60;
	background:color-mix(in srgb, var(--wh) 90%, transparent);
	backdrop-filter:blur(14px) saturate(180%);
	-webkit-backdrop-filter:blur(14px) saturate(180%);
	border-block:1px solid var(--line-soft)
}
/* padding-block belongs to the SCROLLING <ul>, never to the wrapper:
   overflow-x:auto forces overflow-y:auto too, and a wrapper's padding sits
   outside that scroll box — so anything overflowing an item is sliced off
   top and bottom. */
.fw-cat-jump__inner{padding-block:0}
.fw-cat-jump ul{
	display:flex;align-items:stretch;gap:0;
	margin:0;padding:0;list-style:none;
	overflow-x:auto;overflow-y:hidden;
	scroll-snap-type:x proximity;
	scroll-padding-inline:var(--pad);
	overscroll-behavior-x:contain;
	scrollbar-width:none;-ms-overflow-style:none;
	-webkit-overflow-scrolling:touch
}
.fw-cat-jump ul::-webkit-scrollbar{display:none}
.fw-cat-jump li{position:relative;flex:0 0 auto;scroll-snap-align:start;display:flex}

/* The leading word: it says what the row is before you read any of it. */
.fw-cat-jump__lbl{
	align-items:center;
	padding:0 clamp(12px, 1.2vw, 18px) 0 0;
	font-size:9.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
	color:var(--g4);white-space:nowrap
}

/* A divider between items, faded at both ends. A rule that runs the full
   height and stops dead reads as a table border. */
.fw-cat-jump li + li::before{
	content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;
	background:linear-gradient(180deg, transparent, var(--line) 26%, var(--line) 74%, transparent)
}

.fw-cat-jump__link{
	display:flex;align-items:center;gap:9px;white-space:nowrap;
	padding:13px clamp(12px, 1.3vw, 20px);
	border-bottom:2px solid transparent;
	font-size:12.5px;font-weight:500;letter-spacing:-.005em;color:var(--g6);
	transition:color .25s, border-color .25s, background .25s;
	-webkit-tap-highlight-color:transparent
}
.fw-cat-jump__link:hover{color:var(--bl-d);border-bottom-color:var(--bl);background:var(--bl-bg)}
.fw-cat-jump__link.is-on{color:var(--pk-d);font-weight:600;border-bottom-color:var(--pk)}

/* The uploaded icon. Greyed back until the item is hovered or current, so
   nine raster marks in a row read as one quiet strip rather than nine
   competing colours. */
.fw-cat-jump__ico{
	width:20px;height:20px;flex-shrink:0;object-fit:contain;
	opacity:.45;filter:grayscale(1);
	transition:opacity .25s, filter .25s
}
.fw-cat-jump__link:hover .fw-cat-jump__ico,
.fw-cat-jump__link.is-on .fw-cat-jump__ico{opacity:1;filter:none}

/* ── When the row is wider than the screen ──
   Two arrows and an edge fade, both switched on by core.js and only when
   the row actually overflows: `.has-rail` on the nav, plus `.at-start` /
   `.at-end` so each side's fade and arrow disappear once there is nothing
   further that way. On a phone there is nothing to show — a swipe is the
   affordance — so the arrows stay hidden there and the fade does the work.

   The fade starts at the gutter, not at 0: the scrolling <ul> sits inside
   the padded wrapper, so that IS the edge content is clipped at. */
.fw-cat-jump__inner::before,
.fw-cat-jump__inner::after{
	content:'';position:absolute;top:0;bottom:0;z-index:2;
	width:clamp(40px, 5vw, 74px);
	pointer-events:none;opacity:0;transition:opacity .3s
}
.fw-cat-jump__inner::before{left:var(--pad);background:linear-gradient(90deg, var(--wh) 22%, transparent)}
.fw-cat-jump__inner::after{right:var(--pad);background:linear-gradient(270deg, var(--wh) 22%, transparent)}
.fw-cat-jump.has-rail:not(.at-start) .fw-cat-jump__inner::before{opacity:1}
.fw-cat-jump.has-rail:not(.at-end) .fw-cat-jump__inner::after{opacity:1}

.fw-cat-jump__nav{
	position:absolute;top:50%;transform:translateY(-50%);z-index:3;
	display:none;align-items:center;justify-content:center;
	width:30px;height:30px;padding:0;border:0;border-radius:50%;
	background:var(--wh);color:var(--g6);cursor:pointer;
	box-shadow:0 4px 14px -5px var(--ink-a40), inset 0 0 0 1px var(--line);
	transition:color .22s, background .22s, opacity .25s, transform .25s var(--ease)
}
.fw-cat-jump.has-rail .fw-cat-jump__nav{display:flex}
.fw-cat-jump__nav i{font-size:12px;line-height:1}
.fw-cat-jump__nav:hover{color:var(--bl-d);background:var(--wh)}
.fw-cat-jump__nav:active{transform:translateY(-50%) scale(.94)}
/* Disabled rather than removed: taking the button out of the flow at the
   end of the travel would shift the fade and flicker on every click. */
.fw-cat-jump__nav[disabled]{opacity:0;pointer-events:none}
.fw-cat-jump__nav--prev{left:calc(var(--pad) - 5px)}
.fw-cat-jump__nav--next{right:calc(var(--pad) - 5px)}

/* Phones keep the fade and lose the arrows: a swipe is the affordance
   there, and two 30px targets over a 14px gutter crowd the row. Not
   keyed to (hover:none) — a touchscreen laptop is still a desktop
   layout, and would lose the arrows with nothing replacing them. */
@media(max-width:768px){
	.fw-cat-jump.has-rail .fw-cat-jump__nav{display:none}}

/* ── The masthead photograph ──
   The care area covers are uploaded at 16:9, so the frame is 16:9 and the
   whole picture shows: square corners and no shadow, the printed-plate
   treatment /services gives its reel. contain, not cover, so a cover
   uploaded at another ratio is letterboxed rather than cut. No height cap:
   at 16:9 the column width already keeps it inside the band. */
.fw-cat-page .fw-mast__cover{
	aspect-ratio:16/9;max-height:none;
	border-radius:0;box-shadow:none;background:transparent
}
.fw-cat-page .fw-mast__cover img.lazy{object-fit:contain}

/* ══════════════════════════════════════════════════════════════
   03 · SECTION SHELL & PROSE
   ══════════════════════════════════════════════════════════════ */

.fw-cat-body{position:relative}
.fw-cat-sec{position:relative;padding:var(--sec) 0}
.fw-cat-sec--tint{
	background:var(--paper-2);
	border-block:1px solid var(--line-soft)
}

/* ── §4 The overview as a timeline ──
   A heading and the care area's description side by side, then every
   treatment as a stop on one horizontal line. Nothing is boxed: the
   line, the node discs and the type carry the structure. The track
   scrolls sideways (core.js [data-rail] adds the arrows only when it
   overflows), so nine treatments or three, the band keeps one height.
   Height and display type run on vh, the 55vh band rule. */
.fw-cat-tl{
	--node:clamp(44px, 6vh, 56px);
	--stop:clamp(210px, 17vw, 260px);
	overflow:hidden;
	padding:clamp(28px, 5vh, 56px) 0 clamp(24px, 4.4vh, 48px)
}
.fw-cat-tl__fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fw-cat-tl__fx i{
	position:absolute;border-radius:50%;
	width:clamp(280px, 34vw, 520px);aspect-ratio:1;
	filter:blur(100px);opacity:.1
}
.fw-cat-tl__fx i:first-child{top:-22%;left:-6%;background:var(--pk)}
.fw-cat-tl__fx i:last-child{bottom:-30%;right:4%;background:var(--bl)}

.fw-cat-tl__head{
	display:grid;
	grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
	column-gap:clamp(28px, 4vw, 88px);
	align-items:end
}
.fw-cat-tl__title h2{
	margin:var(--s3) 0 0;
	font-family:var(--ff);
	font-size:clamp(24px, 4.2vh, 40px);font-weight:600;
	line-height:1.1;letter-spacing:-.034em;
	color:var(--ink);text-wrap:balance
}
.fw-cat-tl__lead{
	margin:0;
	font-size:clamp(14.5px, 2.05vh, 17.5px);font-weight:300;
	line-height:1.62;letter-spacing:-.006em;
	color:var(--g6);text-wrap:pretty
}

.fw-cat-tl__rail{position:relative;z-index:1;margin-top:clamp(20px, 3.6vh, 40px)}
.fw-cat-tl__track{
	display:flex;
	/* The top inset gives the nodes' halo and hover lift room: a track
	   that scrolls on x clips on y too. */
	--tl-top:12px;
	margin:0;padding:var(--tl-top) var(--pad) var(--s2);
	list-style:none;
	overflow-x:auto;overscroll-behavior-x:contain;
	scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
	scrollbar-width:none
}
.fw-cat-tl__track::-webkit-scrollbar{display:none}
/* The edge fade appears only while there is more line to see. */
.fw-cat-tl__rail.has-rail:not(.at-end) .fw-cat-tl__track{
	-webkit-mask-image:linear-gradient(90deg, var(--ink) 88%, transparent);
	        mask-image:linear-gradient(90deg, var(--ink) 88%, transparent)
}
.fw-cat-tl__rail.has-rail.at-end:not(.at-start) .fw-cat-tl__track{
	-webkit-mask-image:linear-gradient(90deg, transparent, var(--ink) 12%);
	        mask-image:linear-gradient(90deg, transparent, var(--ink) 12%)
}

/* Each stop carries one accent, cycled so any count keeps the rhythm. */
.fw-cat-tl__stop{
	--ac:var(--pk);--ac-ink:var(--pk-ink);--ac-t:var(--pk-t);--ac-ring:var(--pk-ring);
	position:relative;flex:0 0 var(--stop);
	padding-right:clamp(18px, 2vw, 30px);
	scroll-snap-align:start
}
.fw-cat-tl__stop:nth-child(6n+2){--ac:var(--bl);--ac-ink:var(--bl-ink);--ac-t:var(--bl-t);--ac-ring:var(--bl-ring)}
.fw-cat-tl__stop:nth-child(6n+3){--ac:var(--mt);--ac-ink:var(--mt-ink);--ac-t:var(--mt-t);--ac-ring:var(--mt-ring)}
.fw-cat-tl__stop:nth-child(6n+4){--ac:var(--pu);--ac-ink:var(--pu-ink);--ac-t:var(--pu-t);--ac-ring:var(--pu-ring)}
.fw-cat-tl__stop:nth-child(6n+5){--ac:var(--go);--ac-ink:var(--go-ink);--ac-t:var(--go-t);--ac-ring:var(--go-ring)}
.fw-cat-tl__stop:nth-child(6n+6){--ac:var(--co);--ac-ink:var(--co-ink);--ac-t:var(--co-t);--ac-ring:var(--co-ring)}

/* The line: a segment per stop, from this node's centre to the next
   one's, fading from this accent into a neutral hairline. The last stop
   draws none, so the line ends at the invitation. */
.fw-cat-tl__stop::before{
	content:'';position:absolute;z-index:0;
	top:calc(var(--node) / 2 - 1px);left:calc(var(--node) / 2);right:calc(var(--node) / -2);
	height:2px;border-radius:2px;
	background:linear-gradient(90deg, color-mix(in srgb, var(--ac) 55%, transparent), var(--line))
}
.fw-cat-tl__stop:last-child::before{display:none}

.fw-cat-tl__a{
	position:relative;z-index:1;
	display:flex;flex-direction:column;align-items:flex-start;
	color:inherit;-webkit-tap-highlight-color:transparent
}
.fw-cat-tl__node{
	display:grid;place-items:center;
	width:var(--node);height:var(--node);border-radius:50%;
	background:var(--wh);
	box-shadow:0 0 0 1px var(--ac-ring), 0 0 0 6px var(--paper), 0 10px 24px -14px var(--ink-a40);
	transition:background .3s, box-shadow .3s, transform .35s var(--ease)
}
.fw-cat-tl__node img{width:52%;height:52%;object-fit:contain}
.fw-cat-tl__node .fw-ico{width:50%;height:50%;color:var(--wh)}
.fw-cat-tl__num{
	margin-top:clamp(10px, 1.6vh, 16px);
	font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
	font-variant-numeric:tabular-nums;color:var(--ac-ink)
}
.fw-cat-tl__name{
	margin-top:5px;
	font-size:clamp(15px, 2.1vh, 17.5px);font-weight:600;
	line-height:1.25;letter-spacing:-.02em;color:var(--ink);
	transition:color .25s
}
.fw-cat-tl__txt{
	margin-top:6px;
	display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
	font-size:13px;font-weight:400;line-height:1.55;color:var(--g6)
}
.fw-cat-tl__more{
	display:inline-flex;align-items:center;gap:6px;
	margin-top:clamp(8px, 1.6vh, 14px);
	font-size:12px;font-weight:600;color:var(--ac-ink)
}
.fw-cat-tl__more i{font-size:11px;transition:transform .3s var(--ease)}

.fw-cat-tl__a:hover .fw-cat-tl__node{
	background:var(--ac-t);transform:translateY(-3px);
	box-shadow:0 0 0 1px var(--ac), 0 0 0 6px var(--paper), 0 14px 28px -14px var(--ink-a40)
}
.fw-cat-tl__a:hover .fw-cat-tl__name{color:var(--ac-ink)}
.fw-cat-tl__a:hover .fw-cat-tl__more i{transform:translateX(3px)}

/* The last stop is the way out: a filled pink node, the site's action colour. */
.fw-cat-tl__stop.fw-cat-tl__stop--end{--ac:var(--pk);--ac-ink:var(--pk-ink);--ac-t:var(--pk-t);--ac-ring:var(--pk-ring)}
.fw-cat-tl__stop--end .fw-cat-tl__node,
.fw-cat-tl__stop--end .fw-cat-tl__a:hover .fw-cat-tl__node{background:var(--pk)}

.fw-cat-tl__nav{
	position:absolute;top:calc(var(--node) / 2 + 12px);transform:translateY(-50%);z-index:3;
	display:none;align-items:center;justify-content:center;
	width:34px;height:34px;padding:0;border:0;border-radius:50%;
	background:var(--wh);color:var(--g6);cursor:pointer;
	box-shadow:0 4px 14px -5px var(--ink-a40), inset 0 0 0 1px var(--line);
	transition:color .22s, opacity .25s, transform .25s var(--ease)
}
.fw-cat-tl__rail.has-rail .fw-cat-tl__nav{display:flex}
.fw-cat-tl__nav i{font-size:12px;line-height:1}
.fw-cat-tl__nav:hover{color:var(--bl-d)}
.fw-cat-tl__nav:active{transform:translateY(-50%) scale(.94)}
.fw-cat-tl__nav[disabled]{opacity:0;pointer-events:none}
.fw-cat-tl__nav--prev{left:calc(var(--pad) - 6px)}
.fw-cat-tl__nav--next{right:calc(var(--pad) - 6px)}

/* ══════════════════════════════════════════════════════════════
   05b · §3 THE NINE SUB-CATEGORIES, AND THEIR SERVICES

   A category holds sub-categories; a sub-category holds services. So this
   is nine SECTIONS rather than one grid of nine tiles — each opens with
   the sub-category (mark, line, count, blurb, way in) and then lists what
   is inside it as cards.

   Cards are right here and wrong in the article rails, and the difference
   is not taste: a card is right when the thing IS a destination with a
   picture, wrong when it is a paragraph wearing a box.

   Everything that varies between sections varies on :nth-child — the
   ground, the folio colour, the ambient spot. Nothing in PHP decides how a
   section looks, so seven children or fourteen keep the rhythm.
   ══════════════════════════════════════════════════════════════ */

.fw-cat-sub{
	position:relative;overflow:hidden;
	padding:clamp(38px, 4vw, 66px) 0;
	scroll-margin-top:calc(var(--article-top) + 6px)
}
.fw-cat-sub + .fw-cat-sub{border-top:1px solid var(--line-soft)}

/* Four grounds, not two: alternating one tint reads as a stripe, four
   reads as a sequence of chapters. */
.fw-cat-subs > .fw-cat-sub:nth-child(4n+1){background:var(--paper)}
.fw-cat-subs > .fw-cat-sub:nth-child(4n+2){background:linear-gradient(180deg, var(--paper-b), var(--paper-b2))}
.fw-cat-subs > .fw-cat-sub:nth-child(4n+3){background:linear-gradient(180deg, var(--paper-p), var(--paper-p2))}
.fw-cat-subs > .fw-cat-sub:nth-child(4n+4){background:linear-gradient(180deg, var(--paper-m), var(--paper-m2))}

/* One blurred disc per section, behind the head. A solid circle under
   filter:blur() has a centre of mass and reads as light falling on the
   page; a gradient wash reads as paint. */
.fw-cat-sub__fx{
	position:absolute;z-index:0;pointer-events:none;
	top:-140px;right:4%;
	width:clamp(240px, 26vw, 420px);aspect-ratio:1;border-radius:50%;
	filter:blur(90px);opacity:.5
}
.fw-cat-subs > .fw-cat-sub:nth-child(4n+1) .fw-cat-sub__fx{background:color-mix(in srgb, var(--pk) 26%, transparent)}
.fw-cat-subs > .fw-cat-sub:nth-child(4n+2) .fw-cat-sub__fx{background:color-mix(in srgb, var(--bl) 26%, transparent)}
.fw-cat-subs > .fw-cat-sub:nth-child(4n+3) .fw-cat-sub__fx{background:color-mix(in srgb, var(--pu) 22%, transparent)}
.fw-cat-subs > .fw-cat-sub:nth-child(4n+4) .fw-cat-sub__fx{background:color-mix(in srgb, var(--mt) 24%, transparent)}

/* ── The section head ──
   Folio, mark and title on one line; the blurb under it in the same
   column, so the eye returns to a single left edge instead of tracking
   across a centred block. */
.fw-cat-sub__head{
	position:relative;z-index:1;
	display:grid;
	grid-template-columns:auto minmax(0,1fr) auto;
	align-items:center;
	column-gap:clamp(14px, 1.6vw, 24px);
	row-gap:clamp(10px, 1.1vw, 15px);
	padding-bottom:clamp(15px, 1.6vw, 22px);
	margin-bottom:clamp(20px, 2.2vw, 30px);
	border-bottom:1px solid var(--line)
}

/* Filled, not outlined. An outlined numeral at this weight reads as a
   rendering fault rather than a device. */
.fw-cat-sub__no{
	grid-column:1;grid-row:1;
	font-size:clamp(30px, 2.6vw, 46px);font-weight:700;line-height:.85;
	letter-spacing:-.055em;font-variant-numeric:tabular-nums
}
.fw-cat-subs > .fw-cat-sub:nth-child(4n+1) .fw-cat-sub__no{color:color-mix(in srgb, var(--pk) 36%, transparent)}
.fw-cat-subs > .fw-cat-sub:nth-child(4n+2) .fw-cat-sub__no{color:var(--bl-edge)}
.fw-cat-subs > .fw-cat-sub:nth-child(4n+3) .fw-cat-sub__no{color:color-mix(in srgb, var(--pu) 34%, transparent)}
.fw-cat-subs > .fw-cat-sub:nth-child(4n+4) .fw-cat-sub__no{color:color-mix(in srgb, var(--mt) 50%, transparent)}

.fw-cat-sub__id{grid-column:2;grid-row:1;display:flex;align-items:center;gap:clamp(10px, 1vw, 14px);min-width:0}
.fw-cat-sub__ico{
	width:clamp(30px, 2.4vw, 38px);height:auto;aspect-ratio:1;
	flex-shrink:0;object-fit:contain
}
.fw-cat-sub__t{
	margin:0;
	font-size:clamp(19px, 1.1vw + 8px, 28px);font-weight:600;
	line-height:1.1;letter-spacing:-.035em;color:var(--bl-d)
}
.fw-cat-sub__meta{
	display:flex;align-items:center;flex-wrap:wrap;gap:7px;
	margin:4px 0 0;font-size:12.5px;color:var(--g5)
}
.fw-cat-sub__meta i{width:3px;height:3px;border-radius:50%;background:var(--g3)}
.fw-cat-sub__meta b{font-weight:600;color:var(--pk-d)}

.fw-cat-sub__blurb{
	grid-column:2 / 4;grid-row:2;
	margin:0;font-size:clamp(13.5px, .35vw + 12px, 15px);line-height:1.62;color:var(--g5)
}

.fw-cat-sub__open{
	grid-column:3;grid-row:1;justify-self:end;
	display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
	padding-bottom:3px;border-bottom:1px solid color-mix(in srgb, var(--bl) 28%, transparent);
	font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--bl);
	transition:color .25s, border-color .25s
}
.fw-cat-sub__open i{font-size:11px;transition:transform .3s var(--ease)}
.fw-cat-sub__open:hover{color:var(--pk-d);border-bottom-color:var(--pk)}
.fw-cat-sub__open:hover i{transform:translateX(4px)}

/* ── The service cards ──
   A compact tile, magazine-style: the wide thumbnail on its own first row,
   then a kicker line (treatment · date), a blue title, two lines of
   standfirst and a full-width outlined button. No border, no shadow, no
   lift — the surface is a white panel with a pink and a blue spot of
   light in its corners, painted as radial gradients so 35 tiles cost
   nothing to scroll. Peutz, 11 Sep 2026: "magazine style, blue pink spot
   blur in card, no border 1px, hover don't lift or add shadow … image
   first row and other in second row, image in rectangle shape". auto-fill
   keeps the count free: four across on a desktop, two on a laptop, one on
   a phone. */
.fw-cat-svc{
	position:relative;z-index:1;
	display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
	gap:clamp(14px, 1.4vw, 22px);
	margin:0;padding:0;list-style:none
}
.fw-cat-svc > li{min-width:0;display:flex}
.fw-cat-svc__a{
	position:relative;isolation:isolate;
	display:flex;flex-direction:column;
	width:100%;
	border-radius:8px;overflow:hidden;
	/* Both spots sit in the copy half — the thumbnail covers the top. */
	background:
		radial-gradient(circle at 100% 62%, color-mix(in srgb, var(--pk) 18%, transparent), transparent 38%),
		radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--bl) 15%, transparent), transparent 36%),
		var(--wh);
	-webkit-tap-highlight-color:transparent
}
/* The spots come up a touch on hover — the only thing the surface does. */
.fw-cat-svc__a::before{
	content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
	background:
		radial-gradient(circle at 100% 62%, color-mix(in srgb, var(--pk) 30%, transparent), transparent 42%),
		radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--bl) 24%, transparent), transparent 40%);
	transition:opacity .45s var(--ease)
}
a.fw-cat-svc__a:hover::before{opacity:1}

/* The thumbnail is a wide rectangle across the whole tile, fixed ratio:
   the box is reserved before the photograph arrives, so a grid of eight
   never reflows as they load. */
.fw-cat-svc__img{
	position:relative;display:block;
	aspect-ratio:16 / 9;overflow:hidden;
	background:linear-gradient(160deg, var(--g1), var(--g2))
}
.fw-cat-svc__img img{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
	transition:transform .65s var(--ease)
}
a.fw-cat-svc__a:hover .fw-cat-svc__img img{transform:scale(1.05)}

.fw-cat-svc__b{
	display:flex;flex-direction:column;flex:1;min-width:0;
	padding:clamp(13px, 1.1vw, 16px) clamp(14px, 1.2vw, 18px) clamp(13px, 1.1vw, 16px)
}
/* Kicker: the treatment in pink small caps, a dot, the date in grey. The
   treatment is never cut short for the date's sake — when the tile is too
   narrow for both, the date wraps under it instead. */
.fw-cat-svc__meta{
	display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;min-width:0;margin-bottom:8px;
	font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
	color:var(--g5);font-variant-numeric:tabular-nums;white-space:nowrap
}
.fw-cat-svc__tag{
	display:inline-flex;align-items:center;gap:5px;max-width:100%;
	color:var(--pk-d);overflow:hidden;text-overflow:ellipsis
}
.fw-cat-svc__tag i{font-size:10px;color:var(--pk);flex-shrink:0}
.fw-cat-svc__meta time{display:inline-flex;align-items:center;gap:5px;font-weight:500;letter-spacing:.06em}
.fw-cat-svc__meta time i{font-size:10px;color:var(--pk)}
.fw-cat-svc__dot{width:3px;height:3px;border-radius:50%;background:var(--g3)}
.fw-cat-svc__t{
	font-size:clamp(15px, .45vw + 13px, 17.5px);font-weight:600;
	line-height:1.28;letter-spacing:-.024em;color:var(--bl-d)
}
/* Two lines, always. The clamp needs a height it can cut at, so the body
   is a column and this element keeps its own height rather than
   stretching to the row. */
.fw-cat-svc__d{
	margin-top:5px;
	font-size:12.5px;line-height:1.55;color:var(--g5);
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
	margin-bottom:12px
}
/* Full width, outlined in the pink, filled with it on hover. Sits at the
   tile's foot whatever the copy above it did. */
.fw-cat-svc__btn{
	margin-top:auto;
	display:flex;align-items:center;justify-content:center;gap:8px;
	min-height:38px;padding:0 14px;border-radius:8px;
	border:1px solid var(--pk);
	font-size:12.5px;font-weight:600;letter-spacing:-.005em;
	color:var(--pk-d);background:transparent;
	transition:background .3s var(--ease), color .3s, border-color .3s
}
.fw-cat-svc__btn i{font-size:12px;transition:transform .3s var(--ease)}
a.fw-cat-svc__a:hover .fw-cat-svc__btn{color:var(--wh);background:var(--pk);border-color:var(--pk)}
a.fw-cat-svc__a:hover .fw-cat-svc__btn i{transform:translateX(3px)}

/* ══════════════════════════════════════════════════════════════
   05c · SCROLL REVEAL
   Scroll-driven CSS animations — no library, no observer, and no risk of a
   flash of hidden content: a browser without support simply never applies
   the rule and shows the element normally. The grid stagger is positional
   (nth-child); nothing in the markup carries a delay.
   ══════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.fw-cat-svc > li,
		.fw-cat-cards li,
		.fw-cat-sib__grid li{
			animation:fwRise both linear;
			animation-timeline:view();
			animation-range:entry 4% entry 32%
		}
		/* 50ms apart across a row — inside the 0.02–0.06s window the stagger
		   guidance gives for short lists. Modulo the column count, so row two
		   starts its own sweep instead of inheriting a delay that would have
		   the last tile arrive half a second late. Position, not an
		   attribute — nothing in the markup carries a delay. */
		.fw-cat-svc > li:nth-child(4n+2){animation-delay:50ms}
		.fw-cat-svc > li:nth-child(4n+3){animation-delay:100ms}
		.fw-cat-svc > li:nth-child(4n+4){animation-delay:150ms}
		.fw-cat-sib__grid li:nth-child(4n+2){animation-delay:40ms}
		.fw-cat-sib__grid li:nth-child(4n+3){animation-delay:80ms}
		.fw-cat-sib__grid li:nth-child(4n+4){animation-delay:120ms}}}

/* ══════════════════════════════════════════════════════════════
   05d · §3b WHO DOES IT — specialists and clinics
   Peutz, 11 Sep 2026: "a section with a clinic and doctor tab, with a
   scroll of who is there; on every reload randomly other clinics or
   doctors … fully random … 6 each". Two tabs on a segmented control whose
   white pill glides to the active one; under it a snapping scroll rail
   of six cards and a last tile to the full listing. The cards are the
   magazine portrait: the photograph carries the name, a scrim under it,
   the rating and the badge as chips, and an outlined pink button below.
   No card border, no shadow and no lift — the family rule. Behaviour is
   core.js ([data-fw-tabs], [data-rail]); this is only the look.
   ══════════════════════════════════════════════════════════════ */
.fw-cat-team{
	position:relative;
	padding:clamp(28px, 4.6vh, 54px) 0;
	background:
		radial-gradient(ellipse 30% 55% at 92% 28%, color-mix(in srgb, var(--pk) 10%, transparent), transparent 72%),
		radial-gradient(ellipse 28% 55% at 6% 78%, color-mix(in srgb, var(--bl) 9%, transparent), transparent 72%),
		linear-gradient(180deg, var(--paper-b), var(--paper-b2))
}
.fw-cat-team__head{
	display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
	gap:16px 32px;margin-bottom:clamp(14px, 2.1vh, 24px)
}
.fw-cat-team__h{
	margin:10px 0 0;font-family:var(--ff);
	font-size:clamp(22px, 1vw + 16px, 32px);font-weight:600;line-height:1.12;letter-spacing:-.03em;
	color:var(--bl-d);text-wrap:balance
}
.fw-cat-team__lede{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--g5)}

/* ── The tabs: a segmented control ──
   Equal halves, so the pill's travel is exactly its own width and the
   whole animation is one transform. :has() reads which tab is selected,
   so the script never has to touch the pill. */
.fw-cat-team__tabs{
	position:relative;flex-shrink:0;
	display:grid;grid-template-columns:1fr 1fr;
	padding:4px;border-radius:12px;
	background:color-mix(in srgb, var(--dk) 5%, transparent)
}
.fw-cat-team__ink{
	position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
	border-radius:9px;background:var(--wh);
	box-shadow:0 0 0 1px var(--pk-ring), 0 8px 18px -12px var(--pk-edge);
	transition:transform .45s var(--ease)
}
.fw-cat-team__tabs:has(.fw-cat-team__tab:nth-of-type(2)[aria-selected="true"]) .fw-cat-team__ink{transform:translateX(100%)}
.fw-cat-team__tab{
	position:relative;z-index:1;
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	min-height:40px;padding:0 18px;border:0;border-radius:9px;background:none;cursor:pointer;
	font-family:var(--ff);font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
	color:var(--g5);
	transition:color .3s;
	-webkit-tap-highlight-color:transparent
}
.fw-cat-team__tab i{font-size:14px}
.fw-cat-team__tab b{
	min-width:24px;padding:2px 7px;border-radius:100px;
	font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
	color:var(--g6);background:color-mix(in srgb, var(--dk) 6%, transparent);
	transition:color .3s, background .3s
}
.fw-cat-team__tab:hover{color:var(--ink)}
.fw-cat-team__tab[aria-selected="true"]{color:var(--pk-d)}
.fw-cat-team__tab[aria-selected="true"] b{color:var(--pk-d);background:var(--pk-l)}
.fw-cat-team__tab:focus-visible{outline:2px solid var(--pk);outline-offset:2px}

/* ── The rail ── */
.fw-cat-team__panel{position:relative}
.fw-cat-team__track{
	display:flex;gap:clamp(14px, 1.4vw, 20px);
	margin:0;padding:2px 0 6px;list-style:none;
	overflow-x:auto;overscroll-behavior-x:contain;
	scroll-snap-type:x mandatory;scrollbar-width:none
}
.fw-cat-team__track::-webkit-scrollbar{display:none}
.fw-cat-team__track > li{flex:0 0 auto;display:flex;scroll-snap-align:start}
.fw-cat-team__track--doc > li{width:clamp(200px, 16vw, 246px)}
.fw-cat-team__track--cln > li{width:clamp(250px, 21.5vw, 310px)}
.fw-cat-team__track > li.fw-cat-team__more{width:clamp(170px, 13vw, 200px)}

/* Arrows over the rail's ends, on the photographs' middle; only when the
   rail overflows (.has-rail, set by core.js), and faded at an end. */
.fw-cat-team__arrow{
	position:absolute;z-index:3;top:40%;
	display:none;place-items:center;width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
	color:var(--pk-d);background:var(--wh);
	box-shadow:0 0 0 1px var(--pk-ring), 0 10px 24px -14px var(--pk-edge);
	transition:opacity .3s, color .25s, background .25s
}
.fw-cat-team__arrow i{font-size:16px}
.fw-cat-team__arrow--prev{left:-10px}
.fw-cat-team__arrow--next{right:-10px}
.fw-cat-team__panel.has-rail .fw-cat-team__arrow{display:grid}
.fw-cat-team__arrow:hover{color:var(--wh);background:var(--pk)}
.fw-cat-team__arrow:disabled{opacity:0;pointer-events:none}

/* The entrance when a tab shows its panel: the panel eases in and the
   cards follow one after another, 50ms apart. Position, not attributes. */
@media (prefers-reduced-motion: no-preference){
	.fw-cat-team__panel:not([hidden]) .fw-cat-team__track > li{animation:fwTeamIn .55s var(--ease) both}
	.fw-cat-team__track > li:nth-child(2){animation-delay:50ms}
	.fw-cat-team__track > li:nth-child(3){animation-delay:100ms}
	.fw-cat-team__track > li:nth-child(4){animation-delay:150ms}
	.fw-cat-team__track > li:nth-child(5){animation-delay:200ms}
	.fw-cat-team__track > li:nth-child(6){animation-delay:250ms}
	.fw-cat-team__track > li:nth-child(7){animation-delay:300ms}
}
@keyframes fwTeamIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* ── The cards ──
   A white tile with 8px corners; the photograph is the card and carries
   the name over a scrim; the footer holds the one button. The stretched
   link (__hit) covers the tile; the chips and the button sit above it. */
.fw-cat-doc,
.fw-cat-cln{
	position:relative;isolation:isolate;
	display:flex;flex-direction:column;width:100%;
	border-radius:8px;overflow:hidden;background:var(--wh)
}
.fw-cat-doc__hit,
.fw-cat-cln__hit{position:absolute;inset:0;z-index:1;border-radius:inherit}
.fw-cat-doc__hit:focus-visible,
.fw-cat-cln__hit:focus-visible{outline:2px solid var(--pk);outline-offset:-2px}
.fw-cat-doc__ph,
.fw-cat-cln__ph{
	position:relative;display:block;overflow:hidden;
	background:linear-gradient(160deg, var(--g1), var(--g2))
}
.fw-cat-doc__ph{aspect-ratio:1}
.fw-cat-cln__ph{aspect-ratio:4 / 3}
.fw-cat-doc__ph img,
.fw-cat-cln__ph img{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
	transition:transform .7s var(--ease), opacity 1s
}
.fw-cat-doc__ph img{object-position:50% 18%}
.fw-cat-doc:hover .fw-cat-doc__ph img,
.fw-cat-cln:hover .fw-cat-cln__ph img{transform:scale(1.05)}
/* The scrim the name is set on: clear at the top, dense at the foot. */
.fw-cat-doc__ph::after,
.fw-cat-cln__ph::after{
	content:'';position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--dk) 78%, transparent))
}
.fw-cat-doc__cap,
.fw-cat-cln__cap{
	position:absolute;left:12px;right:12px;bottom:11px;z-index:1;
	display:flex;flex-direction:column;gap:2px;color:var(--wh);pointer-events:none
}
.fw-cat-doc__cap b,
.fw-cat-cln__cap b{
	font-size:15.5px;font-weight:600;line-height:1.25;letter-spacing:-.015em;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.fw-cat-doc__cap small,
.fw-cat-cln__cap small{
	font-size:12px;line-height:1.4;color:color-mix(in srgb, var(--wh) 86%, transparent);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.fw-cat-cln__cap small i{font-size:10px;margin-right:4px;color:var(--pk-l)}
.fw-cat-doc__meta{
	display:flex;align-items:center;gap:10px;margin-top:3px;
	font-size:11px;font-weight:500;color:color-mix(in srgb, var(--wh) 80%, transparent)
}
.fw-cat-doc__meta i{font-size:10px;margin-right:4px;color:var(--pk-l)}
.fw-cat-doc__meta span + span::before{
	content:'';display:inline-block;width:3px;height:3px;margin-right:10px;border-radius:50%;
	vertical-align:middle;background:color-mix(in srgb, var(--wh) 60%, transparent)
}

/* No photograph yet: the generated initials disc on its pastel ground.
   A dark scrim over a pastel reads as dirt, so the caption sits on a
   white fade instead and is set in ink. */
.fw-cat-doc--initials .fw-cat-doc__ph::after,
.fw-cat-cln--initials .fw-cat-cln__ph::after{
	background:linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--wh) 94%, transparent) 86%)
}
.fw-cat-doc--initials .fw-cat-doc__cap,
.fw-cat-cln--initials .fw-cat-cln__cap{color:var(--ink)}
.fw-cat-doc--initials .fw-cat-doc__cap small,
.fw-cat-cln--initials .fw-cat-cln__cap small{color:var(--g6)}
.fw-cat-doc--initials .fw-cat-doc__meta{color:var(--g5)}
.fw-cat-doc--initials .fw-cat-doc__meta span + span::before{background:var(--g3)}
.fw-cat-doc--initials .fw-cat-doc__meta i,
.fw-cat-cln--initials .fw-cat-cln__cap small i{color:var(--pk)}

/* Chips on the photograph: the badge or the opening status top-left,
   the rating top-right. */
.fw-cat-doc__v,
.fw-cat-cln__open,
.fw-cat-team__rate{
	position:absolute;top:10px;z-index:2;
	display:inline-flex;align-items:center;gap:5px;
	padding:4px 9px;border-radius:100px;
	font-size:10.5px;font-weight:600;line-height:1.3;white-space:nowrap;
	background:var(--wh);box-shadow:0 6px 14px -8px var(--ink-a40)
}
.fw-cat-doc__v,
.fw-cat-cln__open{left:10px;color:var(--mt-d)}
.fw-cat-doc__v i{font-size:11px}
.fw-cat-cln__open i{width:6px;height:6px;border-radius:50%;background:var(--mt-d);box-shadow:0 0 0 3px color-mix(in srgb, var(--mt) 25%, transparent)}
.fw-cat-cln__open--hrs{color:var(--g6)}
.fw-cat-cln__open--hrs i{background:var(--g4);box-shadow:none}
.fw-cat-team__rate{right:10px;color:var(--ink)}
.fw-cat-team__rate i{font-size:10px;color:var(--go)}
.fw-cat-team__rate small{font-weight:500;color:var(--g5)}

/* The footer and its button: outlined in the pink, filled with it on
   hover — the page's service cards' button. */
.fw-cat-doc__f,
.fw-cat-cln__f{position:relative;z-index:2;display:flex;padding:10px}
.fw-cat-team__btn{
	flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
	min-height:38px;padding:0 14px;
	border:1px solid var(--pk);border-radius:8px;
	font-size:12.5px;font-weight:600;letter-spacing:-.005em;
	color:var(--pk-d);background:transparent;
	transition:background .3s var(--ease), color .3s;
	-webkit-tap-highlight-color:transparent
}
.fw-cat-team__btn i{font-size:12px;transition:transform .3s var(--ease)}
.fw-cat-team__btn:hover{color:var(--wh);background:var(--pk)}
.fw-cat-team__btn:hover i{transform:translateX(3px)}

/* ── The last tile: everyone else ── */
.fw-cat-team__more a{
	position:relative;overflow:hidden;
	display:flex;flex-direction:column;justify-content:space-between;gap:12px;
	width:100%;padding:18px;border-radius:8px;
	color:var(--ink);
	background:
		radial-gradient(ellipse 90% 60% at 100% 0%, color-mix(in srgb, var(--pk) 16%, transparent), transparent 72%),
		radial-gradient(ellipse 90% 60% at 0% 100%, color-mix(in srgb, var(--bl) 14%, transparent), transparent 72%),
		var(--wh);
	transition:color .25s
}
.fw-cat-team__more b{
	font-size:clamp(40px, 6vh, 56px);font-weight:700;line-height:1;letter-spacing:-.04em;
	font-variant-numeric:tabular-nums;
	background:linear-gradient(150deg, var(--pk) 10%, var(--bl) 90%);
	-webkit-background-clip:text;background-clip:text;color:transparent
}
.fw-cat-team__more span{font-size:14px;font-weight:600;line-height:1.35;letter-spacing:-.012em}
.fw-cat-team__more i{
	display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
	font-size:15px;color:var(--pk-d);box-shadow:inset 0 0 0 1px var(--pk);
	transition:background .3s var(--ease), color .3s, transform .3s var(--ease)
}
.fw-cat-team__more a:hover{color:var(--bl-d)}
.fw-cat-team__more a:hover i{color:var(--wh);background:var(--pk);transform:translateX(3px)}

/* ══════════════════════════════════════════════════════════════
   06 · FAQ
   Native <details>: opens with JS disabled and is keyboard operable for
   free. custom/js/article.js only closes siblings.
   ══════════════════════════════════════════════════════════════ */

/* The head: heading left, the invitation to ask right, bottom aligned,
   the same grammar as the timeline above it. */
.fw-cat-faq{overflow:hidden}
.fw-cat-faq__head{
	display:grid;
	grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
	column-gap:clamp(28px, 4vw, 88px);
	align-items:end;
	margin-bottom:clamp(26px, 3.4vw, 52px)
}
.fw-cat-faq__title{
	margin:var(--s3) 0 0;
	font-family:var(--ff);
	font-size:clamp(24px, 1.6vw + 14px, 40px);font-weight:600;
	line-height:1.1;letter-spacing:-.034em;
	color:var(--ink);text-wrap:balance
}
.fw-cat-faq__lead{
	margin:0;
	font-size:clamp(14.5px, 1.1vw, 17px);font-weight:300;
	line-height:1.62;letter-spacing:-.006em;
	color:var(--g6);text-wrap:pretty
}
.fw-cat-faq__act{
	display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);
	margin-top:clamp(14px, 1.6vw, 22px)
}
.fw-cat-faq__act .fw-cat-txtlink:hover i{transform:translateX(3px)}

/* Two columns of questions across the full width. Each column is its own
   list, so an answer opening in one never pushes the other about. */
.fw-cat-faq__cols{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	column-gap:clamp(28px, 4vw, 88px);
	align-items:start
}
.fw-cat-faq__list{border-top:1px solid var(--line);min-width:0}
.fw-cat-faq__item{position:relative;border-bottom:1px solid var(--line)}
/* The open answer is marked by a pink rule down its left edge, not a box. */
.fw-cat-faq__item::before{
	content:'';position:absolute;left:0;top:-1px;bottom:-1px;width:2px;
	background:var(--pk);border-radius:2px;
	transform:scaleY(0);transform-origin:top;
	transition:transform .45s var(--ease)
}
.fw-cat-faq__item[open]::before{transform:scaleY(1)}

.fw-cat-faq__q{
	display:grid;
	grid-template-columns:34px minmax(0, 1fr) 32px;
	align-items:center;column-gap:var(--s3);
	padding:clamp(15px, 1.35vw, 20px) 0 clamp(15px, 1.35vw, 20px) var(--s4);
	cursor:pointer;list-style:none;
	-webkit-tap-highlight-color:transparent
}
.fw-cat-faq__q::-webkit-details-marker{display:none}
.fw-cat-faq__q::marker{content:''}
.fw-cat-faq__n{
	font-size:11px;font-weight:600;letter-spacing:.12em;
	font-variant-numeric:tabular-nums;color:var(--g5);
	transition:color .25s
}
.fw-cat-faq__q-txt{
	font-size:clamp(15px, 1.05vw, 17px);font-weight:600;
	line-height:1.4;letter-spacing:-.016em;color:var(--ink);
	text-wrap:pretty;transition:color .25s
}
.fw-cat-faq__q:hover .fw-cat-faq__q-txt{color:var(--pk-ink)}
.fw-cat-faq__item[open] .fw-cat-faq__n{color:var(--pk-ink)}

/* +/− drawn from two bars inside a round chip, so opening is one bar
   collapsing while the chip fills pink. */
.fw-cat-faq__q-ico{
	position:relative;width:32px;height:32px;border-radius:50%;
	box-shadow:inset 0 0 0 1px var(--line);
	transition:background .3s, box-shadow .3s
}
.fw-cat-faq__q-ico::before,
.fw-cat-faq__q-ico::after{
	content:'';position:absolute;left:50%;top:50%;
	background:var(--g5);border-radius:2px;
	transition:transform .4s var(--ease), background .3s
}
.fw-cat-faq__q-ico::before{width:12px;height:1.5px;transform:translate(-50%,-50%)}
.fw-cat-faq__q-ico::after {width:1.5px;height:12px;transform:translate(-50%,-50%)}
.fw-cat-faq__q:hover .fw-cat-faq__q-ico{box-shadow:inset 0 0 0 1px var(--pk-ring)}
.fw-cat-faq__item[open] .fw-cat-faq__q-ico{background:var(--pk);box-shadow:none}
.fw-cat-faq__item[open] .fw-cat-faq__q-ico::after{transform:translate(-50%,-50%) scaleY(0)}
.fw-cat-faq__item[open] .fw-cat-faq__q-ico::before{background:var(--wh)}

/* The answer starts under the question text, not under the number. */
.fw-cat-faq__a{padding:0 calc(32px + var(--s3)) clamp(18px, 1.8vw, 24px) calc(var(--s4) + 34px + var(--s3))}
.fw-cat-faq__a p{
	margin:0;
	font-size:clamp(14px, .95vw, 15.5px);line-height:1.72;color:var(--g6);
	text-wrap:pretty
}

/* ══════════════════════════════════════════════════════════════
   07 · SIBLINGS
   The lateral move — other care areas from a category page, other
   specialities from a sub-category page. Same component, because it is
   the same decision at two depths.
   ══════════════════════════════════════════════════════════════ */

.fw-cat-sib__head{
	display:flex;align-items:baseline;justify-content:space-between;
	gap:16px;margin-bottom:clamp(18px, 2.2vw, 30px)
}
.fw-cat-sib__grid{
	display:grid;grid-template-columns:repeat(4, minmax(0,1fr));
	gap:0;margin:0;padding:0;list-style:none;
	/* Both rules on the container, not just the top. Seven items in a
	   four-up grid leave one cell empty, and a bottom border drawn per
	   cell would stop three-quarters of the way across. */
	border-block:1px solid var(--line)
}
/* Vertical rules between the columns and a single rule under them — a
   grid ruled like a table rather than three boxes floating apart. */
.fw-cat-sib__grid li{position:relative;border-bottom:1px solid var(--line)}
.fw-cat-sib__grid li:nth-child(4n+1)::before{display:none}
.fw-cat-sib__grid li + li::before{
	content:'';position:absolute;left:0;top:clamp(16px,1.8vw,24px);bottom:clamp(16px,1.8vw,24px);
	width:1px;background:var(--line)
}
.fw-cat-sib__grid a{
	display:flex;flex-direction:column;gap:6px;
	height:100%;
	padding:clamp(18px, 2vw, 26px) clamp(16px, 1.8vw, 26px);
	transition:background .25s;
	-webkit-tap-highlight-color:transparent
}
/* Every row starts on the gutter, not only the first one. */
.fw-cat-sib__grid li:nth-child(4n+1) a{padding-left:0}
.fw-cat-sib__grid a:hover{background:var(--bl-bg)}
.fw-cat-sib__grid b{
	font-size:clamp(15.5px, 1.05vw, 18px);font-weight:600;letter-spacing:-.02em;color:var(--ink);
	transition:color .25s
}
.fw-cat-sib__grid a > span{
	font-size:12.5px;line-height:1.5;color:var(--g5)
}
.fw-cat-sib__grid small{
	display:inline-flex;align-items:center;gap:6px;
	margin-top:auto;padding-top:var(--s3);
	font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--bl);
	font-variant-numeric:tabular-nums
}
.fw-cat-sib__grid small i{font-size:10px;transition:transform .3s var(--ease)}
.fw-cat-sib__grid a:hover b{color:var(--bl-d)}
.fw-cat-sib__grid a:hover small i{transform:translateX(3px)}

/* The sibling's own mark. Specificity here is deliberate: the description
   is also a direct span child, so `.fw-cat-sib__grid a > span` (0,2,1)
   would win over a plain `.fw-cat-sib__ico` (0,1,0) and force the icon to
   12.5px. Matching the child combinator settles it. */
.fw-cat-sib__grid a > .fw-cat-sib__ico{
	display:flex;align-items:center;justify-content:center;
	width:34px;height:34px;margin-bottom:9px;
	border-radius:11px;
	font-size:17px;color:var(--bl);background:var(--bl-l);
	box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bl) 13%, transparent);
	transition:color .3s, background .3s, transform .3s var(--ease)
}
.fw-cat-sib__ico img{width:24px;height:24px;object-fit:contain}
.fw-cat-sib__grid a:hover > .fw-cat-sib__ico{
	color:var(--wh);background:linear-gradient(140deg, var(--bl), var(--bl-d));
	transform:translateY(-2px)
}

/* ══════════════════════════════════════════════════════════════
   09 · RESPONSIVE — mode switches only
   ══════════════════════════════════════════════════════════════ */

@media(max-width:1180px){
	.fw-cat-sib__grid{grid-template-columns:repeat(2, minmax(0,1fr))}
	.fw-cat-sib__grid li:nth-child(4n+1)::before{display:block}
	.fw-cat-sib__grid li:nth-child(2n+1)::before{display:none}
	.fw-cat-sib__grid li:nth-child(4n+1) a{padding-left:clamp(16px, 1.8vw, 26px)}
	.fw-cat-sib__grid li:nth-child(2n+1) a{padding-left:0}}

@media(max-width:1024px){
	/* The house gutter on mobile — the same 14px the header drops to. */
	.fw-cat-page{--pad:14px}

	/* The head's third column goes: at this width the way-in link and the
	   title were sharing about 380px between them. It drops under the
	   blurb, still in the same left edge as everything above it. */
	.fw-cat-sub__head{grid-template-columns:auto minmax(0,1fr)}
	.fw-cat-sub__open{grid-column:2;grid-row:3;justify-self:start}
	.fw-cat-sub__blurb{grid-column:2}

	/* One column: the timeline and FAQ heads stack, the timeline's type
	   returns to the width axis, and the two question columns become one
	   list. */
	.fw-cat-tl__head{grid-template-columns:minmax(0,1fr);row-gap:var(--s4)}
	.fw-cat-tl__title h2{font-size:clamp(24px, 4.6vw, 34px)}
	.fw-cat-tl__lead{font-size:clamp(14.5px, 1.9vw, 16.5px)}
	.fw-cat-faq__head{grid-template-columns:minmax(0,1fr);row-gap:var(--s4)}
	.fw-cat-faq__cols{grid-template-columns:minmax(0,1fr)}
	.fw-cat-faq__cols > .fw-cat-faq__list + .fw-cat-faq__list{border-top:0}

	.fw-cat-close__inner{grid-template-columns:minmax(0,1fr);row-gap:var(--s6)}}

@media(max-width:768px){
	/* Three sibling columns become one ruled list — at this width even two
	   give each blurb about 150px and break every one. */
	.fw-cat-sib__grid{grid-template-columns:minmax(0,1fr)}
	.fw-cat-sib__grid li::before{display:none}
	.fw-cat-sib__grid li:first-child a{padding-left:0}
	.fw-cat-sib__grid a{padding-inline:0}

	.fw-cat-close__btns .fw-cat-btn{flex:1 1 100%}

	/* The FAQ gives the answer the width the number and chip were holding. */
	.fw-cat-faq__q{grid-template-columns:26px minmax(0,1fr) 30px;padding-left:var(--s3);column-gap:10px}
	.fw-cat-faq__q-ico{width:30px;height:30px}
	.fw-cat-faq__a{padding:0 0 16px calc(var(--s3) + 26px + 10px)}

	/* A thumb swipes the line; the next stop peeking in says there is more. */
	.fw-cat-tl{--stop:clamp(200px, 66vw, 250px);--node:46px}
	.fw-cat-tl__rail.has-rail .fw-cat-tl__nav{display:none}

	/* Who does it: the tabs take the column's full width; the arrows go —
	   a thumb swipes the rail — and each card is sized so the next one
	   peeks in from the edge, which is the sign that there is more. */
	.fw-cat-team__head > div{flex:1 1 100%}
	.fw-cat-team__tabs{flex:1 1 100%}
	.fw-cat-team__panel.has-rail .fw-cat-team__arrow{display:none}
	.fw-cat-team__track{scroll-padding-inline:0}
	.fw-cat-team__track--doc > li{width:clamp(200px, 62vw, 250px)}
	.fw-cat-team__track--cln > li{width:clamp(240px, 78vw, 320px)}
	.fw-cat-team__track > li.fw-cat-team__more{width:clamp(160px, 44vw, 200px)}}

/* One column of the same upright tile; the thumbnail keeps its width. */
@media(max-width:560px){
	.fw-cat-svc{grid-template-columns:minmax(0,1fr);gap:12px}
	.fw-cat-svc__b{padding:12px 13px}}

/* ══════════════════════════════════════════════════════════════
   08 · §  CLOSING BAND
   ══════════════════════════════════════════════════════════════ */

.fw-cat-close{
	position:relative;overflow:hidden;
	padding:clamp(42px, 4.8vw, 92px) 0;
	background:var(--ink)
}
.fw-cat-close__aura{
	position:absolute;inset:0;pointer-events:none;
	background:
		radial-gradient(900px 620px at 12% -10%, var(--arc-3), transparent 62%),
		radial-gradient(820px 640px at 90% 108%, var(--bl-edge), transparent 60%),
		radial-gradient(620px 460px at 60% 36%,  color-mix(in srgb, var(--mt) 9%, transparent), transparent 64%)
}
/* Brand hairline on the top edge — the same device .fw-tm uses. */
.fw-cat-close::before{
	content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:1;
	background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--pk) 70%, transparent) 22%, color-mix(in srgb, var(--bl) 70%, transparent) 62%, transparent);
	opacity:.8
}
.fw-cat-close__inner{
	display:grid;
	grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
	column-gap:clamp(32px, 5vw, 110px);
	align-items:end
}
.fw-cat-close__title{
	margin-top:var(--s5);
	font-family:var(--ff);
	font-size:clamp(26px, 3.1vw, 48px);font-weight:600;
	line-height:1.08;letter-spacing:-.038em;
	color:var(--wh);text-wrap:balance
}
.fw-cat-close__sub{
	font-size:clamp(14.5px, 1.15vw, 17px);font-weight:300;
	line-height:1.62;letter-spacing:-.008em;
	color:color-mix(in srgb, var(--wh) 68%, transparent);
	text-wrap:pretty
}
.fw-cat-close__btns{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:clamp(20px, 2.4vw, 30px)}

/* ══════════════════════════════════════════════════════════════
   TOUCH · MOTION · FOCUS
   ══════════════════════════════════════════════════════════════ */

/* A :hover transform latches after a tap on a touch screen. Strip the
   movement; the colour changes still read as feedback. */
@media(hover:none){
	.fw-cat-btn--wh:hover{transform:none}
	a.fw-cat-svc__a:hover{transform:none}
	a.fw-cat-svc__a:hover .fw-cat-svc__img img,
	.fw-cat-doc:hover .fw-cat-doc__ph img,
	.fw-cat-cln:hover .fw-cat-cln__ph img,
	.fw-cat-team__btn:hover i,
	.fw-cat-team__more a:hover i,
	.fw-cat-sib__grid a:hover > .fw-cat-sib__ico,
	.fw-cat-tl__a:hover .fw-cat-tl__node,
	.fw-cat-tl__a:hover .fw-cat-tl__more i{transform:none}}

@media(prefers-reduced-motion:reduce){
	.fw-cat-page *,
	.fw-cat-page *::before,
	.fw-cat-page *::after{
		animation-duration:.01ms!important;
		animation-iteration-count:1!important;
		transition-duration:.01ms!important;
		scroll-behavior:auto!important
	}
	.fw-cat-svc__img img{opacity:1}}

/* ANCHOR OFFSET
   Every id inside the page, not just the headings prose.css covers.
   custom/js/core.js scrolls in-page links with scrollIntoView, which
   honours scroll-margin-top — so this is the single place that records how
   far the sticky chrome and the jump rail reach together. */
.fw-lst [id]{scroll-margin-top:calc(var(--article-top) + 96px)}

.fw-cat-page a:focus-visible,
.fw-cat-page button:focus-visible,
.fw-cat-page summary:focus-visible{
	outline:2px solid var(--bl);
	outline-offset:3px;
	border-radius:8px
}