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

.fw-sub-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 masthead photograph ──
   Treatment covers are uploaded at 16:9, so the frame is 16:9 and the
   whole picture shows: square corners and no shadow, the same treatment
   the care area page gives its cover. 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-sub-page .fw-mast__cover{
	aspect-ratio:16/9;max-height:none;
	border-radius:0;box-shadow:none;background:transparent
}
.fw-sub-page .fw-mast__cover img.lazy{object-fit:contain}

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

.fw-sub-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-sub-eyebrow::before{
	content:'';width:14px;height:1.5px;border-radius:2px;background:var(--pk);flex-shrink:0
}
.fw-sub-eyebrow--onDark{color:var(--pk-l3)}
.fw-sub-eyebrow--onDark::before{background:var(--pk-l3)}

.fw-sub-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-sub-link i{font-size:11px;transition:transform .3s var(--ease)}
.fw-sub-link:hover{color:var(--bl-d)}
.fw-sub-link:hover i{transform:translateX(3px)}

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

.fw-sub-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-sub-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-sub-btn:active{transform:scale(.975)}
.fw-sub-btn--wh{color:var(--ink);background:var(--wh);box-shadow:0 12px 28px -10px color-mix(in srgb, var(--bk) 50%, transparent)}
.fw-sub-btn--wh:hover{background:var(--wh);color:var(--ink);transform:translateY(-1px)}
.fw-sub-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-sub-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}

/* Entrance used by the section reveals below; it lived in the old
   masthead block, which is gone — the band is shared now. */
@keyframes fwRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

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

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

/* ══════════════════════════════════════════════════════════════
   04 · §2 OVERVIEW — the spread
   Peutz, 11 Sep 2026: "this section improve premiumness". It was one
   sentence in a grey band, and the same sentence as the masthead's lede.
   Now a magazine spread: kicker, blue heading and the treatment in one
   large standfirst on the left; a ruled fact file on the right whose rows
   are doors — the care area, the next treatment, the services, the
   questions — and the date of the latest edit. Bright ground with a pink
   and a blue spot of light painted as background layers, so there is no
   card, no border and no shadow. Capped at 55vh with its type in vh (the
   cap is on the element carrying the padding, so it measures true);
   released at 1024 with the type back on the width axis.
   ══════════════════════════════════════════════════════════════ */
.fw-sub-ov{
	position:relative;
	max-height:55vh;
	padding:clamp(30px, 6.6vh, 76px) 0;
	/* Each spot is centred far enough inside the box that it has faded to
	   nothing before it reaches an edge — a spot cut by the section's top
	   leaves a straight seam against the band above. */
	background:
		radial-gradient(ellipse 32% 50% at 86% 50%, color-mix(in srgb, var(--pk) 13%, transparent), transparent 72%),
		radial-gradient(ellipse 30% 50% at 8% 58%, color-mix(in srgb, var(--bl) 11%, transparent), transparent 72%),
		var(--wh)
}
.fw-sub-ov__in{
	display:grid;grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
	gap:clamp(28px, 5.4vw, 104px);align-items:center
}
.fw-sub-ov__lead{min-width:0}

/* Kicker: a pink-to-blue tick and the word, in small caps. */
.fw-sub-ov__kick{
	display:flex;align-items:center;gap:10px;margin:0 0 clamp(8px, 1.4vh, 14px);
	font-size:clamp(9.5px, 1.25vh, 11px);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
	color:var(--pk-d)
}
.fw-sub-ov__kick i{flex-shrink:0;width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg, var(--pk), var(--bl))}
.fw-sub-ov__h{
	margin:0;font-family:var(--ff);
	font-size:clamp(22px, 3.9vh, 38px);font-weight:600;line-height:1.1;letter-spacing:-.03em;
	color:var(--bl-d);text-wrap:balance
}
/* The standfirst: large, set against a pink-to-blue rule — the magazine
   device for "read this first". A rule, not a quotation mark: the line is
   the treatment described, not somebody quoted. */
.fw-sub-ov__stand{
	position:relative;margin:clamp(12px, 2.1vh, 24px) 0 0;
	padding-left:clamp(16px, 1.5vw, 24px);
	font-size:clamp(16px, 2.55vh, 24px);font-weight:400;line-height:1.5;letter-spacing:-.014em;
	color:var(--g7);text-wrap:pretty
}
.fw-sub-ov__stand::before{
	content:'';position:absolute;left:0;top:.28em;bottom:.28em;width:3px;border-radius:3px;
	background:linear-gradient(180deg, var(--pk), var(--bl))
}
.fw-sub-ov__act{
	display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
	margin-top:clamp(14px, 2.6vh, 28px);padding-left:clamp(16px, 1.5vw, 24px)
}
/* Outlined in the pink, filled with it on hover — the service card's
   button, so the two read as one family. */
.fw-sub-ov__btn{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	min-height:clamp(38px, 5vh, 44px);padding:0 18px;
	border:1px solid var(--pk);border-radius:8px;
	font-size:clamp(12.5px, 1.6vh, 13.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-sub-ov__btn i{font-size:12px;transition:transform .3s var(--ease)}
.fw-sub-ov__btn:hover{color:var(--wh);background:var(--pk)}
.fw-sub-ov__btn:hover i{transform:translateX(3px)}

/* ── The fact file ──
   A ruled list, not a box: label in small caps on the left, the value on
   the right, a hairline between rows. A row that is a link turns its
   value blue and nudges its arrow; nothing lifts and nothing casts. */
.fw-sub-ov__file{min-width:0}
.fw-sub-ov__file-h{
	display:flex;align-items:center;gap:10px;margin:0 0 clamp(6px, 1.1vh, 12px);
	font-size:clamp(9.5px, 1.25vh, 11px);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
	color:var(--g5)
}
.fw-sub-ov__file-ico{
	display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
	width:clamp(28px, 3.9vh, 36px);height:clamp(28px, 3.9vh, 36px);border-radius:10px;
	background:var(--wh);box-shadow:0 0 0 1px var(--pk-ring), 0 6px 16px -10px var(--pk-edge)
}
.fw-sub-ov__file-ico img{display:block;width:56%;height:56%;object-fit:contain}
/* The file opens on a brand rule — pink into blue, fading out — the
   standfirst's rule turned on its side. */
.fw-sub-ov__facts{
	margin:0;padding-top:2px;
	background:linear-gradient(90deg, var(--pk), var(--bl) 45%, transparent) top left / 100% 2px no-repeat
}
.fw-sub-ov__row:first-child{border-top:0}
.fw-sub-ov__row{
	display:grid;grid-template-columns:clamp(84px, 8vw, 116px) minmax(0, 1fr);
	align-items:stretch;gap:12px;
	min-height:clamp(36px, 5.4vh, 52px);
	border-top:1px solid var(--ink-a06)
}
.fw-sub-ov__row:last-child{border-bottom:1px solid var(--ink-a06)}
.fw-sub-ov__row dt{
	display:flex;align-items:center;
	font-size:clamp(9px, 1.15vh, 10.5px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
	color:var(--g5)
}
.fw-sub-ov__row dd{
	display:flex;align-items:center;margin:0;min-width:0;
	font-size:clamp(12.5px, 1.75vh, 15px);font-weight:500;letter-spacing:-.01em;
	color:var(--ink);font-variant-numeric:tabular-nums
}
/* The link fills the row's height: the whole row is the target. */
.fw-sub-ov__row dd a{
	flex:1;align-self:stretch;min-width:0;
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	color:inherit;transition:color .25s
}
.fw-sub-ov__row dd a > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-sub-ov__row dd b{font-weight:600;color:var(--bl-d)}
.fw-sub-ov__row dd em{font-family:var(--ff);font-style:normal;margin-left:10px;color:var(--g5);font-weight:400}
.fw-sub-ov__row dd a i{flex-shrink:0;font-size:12px;color:var(--pk);transition:transform .3s var(--ease)}
.fw-sub-ov__row dd a:hover{color:var(--bl-d)}
.fw-sub-ov__row dd a:hover em{color:var(--bl-d)}
.fw-sub-ov__row dd a:hover .bi-arrow-right{transform:translateX(3px)}
.fw-sub-ov__row dd a:hover .bi-arrow-down{transform:translateY(3px)}
.fw-sub-rail .fw-sub-link{margin-top:var(--s4)}

/* ══════════════════════════════════════════════════════════════
   05 · SERVICE LIST   (sub-category page)
   Row by row, per Peutz (11 Sep 2026): "row by row is fine but add left
   side image after number, title, description, button and something more
   that make it premium, hover animation". Each row: an outlined numeral,
   the service's own 16:9 picture, a kicker (treatment guide · date), the
   title in brand blue, two lines of standfirst and an outlined pink
   button. Hover is the only motion — the row's spots of light come up, a
   pink-to-blue bar draws down its left edge, the numeral fills, the
   picture eases in and the button fills. No lift and no shadow, as on
   the category cards.
   ══════════════════════════════════════════════════════════════ */

.fw-sub-list__head{
	display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
	gap:14px 24px;margin-bottom:clamp(16px, 2.2vw, 28px)
}
.fw-sub-list__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-sub-cards{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.fw-sub-cards li{border-bottom:1px solid var(--line)}
.fw-sub-cards__row{
	--row-pad:clamp(10px, 1vw, 16px);
	position:relative;isolation:isolate;
	display:grid;
	grid-template-columns:clamp(40px, 3.4vw, 56px) clamp(168px, 16vw, 248px) minmax(0, 1fr) auto;
	grid-template-areas:"n img body btn";
	gap:clamp(14px, 2vw, 32px);align-items:center;
	padding:clamp(14px, 1.4vw, 20px) var(--row-pad);
	margin-inline:calc(var(--row-pad) * -1);
	border-radius:12px;
	-webkit-tap-highlight-color:transparent
}
/* Light, not a panel: a pink spot at the row's right end and a blue one
   at its left fade in behind it. */
.fw-sub-cards__row::before{
	content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
	background:
		radial-gradient(ellipse 34% 100% at 100% 50%, color-mix(in srgb, var(--pk) 13%, transparent), transparent 72%),
		radial-gradient(ellipse 30% 100% at 0% 50%, color-mix(in srgb, var(--bl) 10%, transparent), transparent 72%);
	transition:opacity .45s var(--ease)
}
/* The bar that draws down the row's left edge. */
.fw-sub-cards__row::after{
	content:'';position:absolute;left:0;top:16%;bottom:16%;width:3px;border-radius:3px;pointer-events:none;
	background:linear-gradient(180deg, var(--pk), var(--bl));
	transform:scaleY(0);transform-origin:top;
	transition:transform .45s var(--ease)
}
.fw-sub-cards__row:hover::before{opacity:1}
.fw-sub-cards__row:hover::after{transform:scaleY(1)}

/* The numeral, drawn in outline and filled on hover. */
.fw-sub-cards__n{
	grid-area:n;
	font-size:clamp(24px, 2.2vw, 34px);font-weight:700;line-height:1;letter-spacing:-.04em;
	font-variant-numeric:tabular-nums;
	color:transparent;-webkit-text-stroke:1px color-mix(in srgb, var(--pk) 55%, transparent);
	transition:color .35s var(--ease), -webkit-text-stroke-color .35s
}
.fw-sub-cards__row:hover .fw-sub-cards__n{color:var(--pk);-webkit-text-stroke-color:var(--pk)}

/* The picture: 16:9, the ratio the covers are cut to, so the box is
   reserved before it arrives and a list of eight never reflows. */
.fw-sub-cards__img{
	grid-area:img;position:relative;display:block;
	aspect-ratio:16 / 9;overflow:hidden;border-radius:8px;
	background:linear-gradient(160deg, var(--g1), var(--g2))
}
.fw-sub-cards__img img{
	display:block;width:100%;height:100%;object-fit:cover;
	transition:transform .7s var(--ease), opacity 1s
}
.fw-sub-cards__row:hover .fw-sub-cards__img img{transform:scale(1.06)}

.fw-sub-cards__body{grid-area:body;display:flex;flex-direction:column;gap:5px;min-width:0}
/* Kicker: "Treatment guide" in pink small caps, a dot, the date in grey.
   The date wraps under the tag rather than cutting it short. */
.fw-sub-cards__meta{
	display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;
	font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;line-height:1.4;
	color:var(--g5);font-variant-numeric:tabular-nums;white-space:nowrap
}
.fw-sub-cards__tag{display:inline-flex;align-items:center;gap:5px;color:var(--pk-d)}
.fw-sub-cards__meta i{font-size:10px;color:var(--pk)}
.fw-sub-cards__meta time{display:inline-flex;align-items:center;gap:5px;font-weight:500;letter-spacing:.06em}
.fw-sub-cards__dot{width:3px;height:3px;border-radius:50%;background:var(--g3)}
.fw-sub-cards__body b{
	font-size:clamp(16px, .5vw + 13px, 20px);font-weight:600;line-height:1.28;letter-spacing:-.022em;
	color:var(--bl-d)
}
/* Two lines, always: -webkit-line-clamp needs a height it can cut at, so
   the body is a column and this keeps its own height. */
.fw-sub-cards__d{
	font-size:13px;line-height:1.55;color:var(--g5);
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}

/* Outlined in the pink, filled with it on hover — the category card's
   button and the overview's, so the three read as one family. */
.fw-sub-cards__btn{
	grid-area:btn;
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	min-height:40px;padding:0 18px;
	border:1px solid var(--pk);border-radius:8px;
	font-size:13px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
	color:var(--pk-d);background:transparent;
	transition:background .3s var(--ease), color .3s
}
.fw-sub-cards__btn i{font-size:12px;transition:transform .3s var(--ease)}
.fw-sub-cards__row:hover .fw-sub-cards__btn{color:var(--wh);background:var(--pk)}
.fw-sub-cards__row:hover .fw-sub-cards__btn i{transform:translateX(3px)}

.fw-sub-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)
}

/* ══════════════════════════════════════════════════════════════
   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. Staggers are positional
   (nth-child); nothing in the markup carries a delay.
   ══════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.fw-sub-svc > li,
		.fw-sub-cards li,
		.fw-sub-ov__lead,
		.fw-sub-ov__row,
		.fw-sub-sib__grid li{
			animation:fwRise both linear;
			animation-timeline:view();
			animation-range:entry 4% entry 32%
		}
		.fw-sub-sib__grid li:nth-child(4n+2){animation-delay:40ms}
		.fw-sub-sib__grid li:nth-child(4n+3){animation-delay:80ms}
		.fw-sub-sib__grid li:nth-child(4n+4){animation-delay:120ms}}}

/* ══════════════════════════════════════════════════════════════
   06 · FAQ
   Peutz, 11 Sep 2026: "FAQ left side, right an icon watermark-type
   design — some symbol or sign or animation or circle — premium, compact".
   Left: a compact numbered accordion. Native <details>: opens with JS
   disabled and is keyboard operable for free; custom/js/article.js only
   closes siblings. Right: a sign — a large question mark in the brand
   gradient inside two fine rings that turn slowly, each carrying one
   brand dot, sealed with the treatment's own icon — over a short prompt
   to ask a specialist. Bright ground, a pink spot of light behind the
   sign, no card and no border.
   ══════════════════════════════════════════════════════════════ */

/* Compact: its own, tighter padding than the page's section rhythm, and
   48px rows — six questions with one open fit a laptop screen. */
.fw-sub-faq{
	padding:clamp(30px, 5.2vh, 58px) 0;
	background:
		radial-gradient(ellipse 26% 50% at 82% 50%, color-mix(in srgb, var(--pk) 10%, transparent), transparent 72%),
		radial-gradient(ellipse 22% 46% at 92% 62%, color-mix(in srgb, var(--bl) 8%, transparent), transparent 72%),
		var(--wh)
}
.fw-sub-faq__in{
	display:grid;grid-template-columns:minmax(0, 1.45fr) minmax(0, .55fr);
	gap:clamp(28px, 5vw, 96px);align-items:center
}
.fw-sub-faq__main{min-width:0}
.fw-sub-faq__head{margin-bottom:clamp(12px, 1.8vh, 20px)}
.fw-sub-faq__title{
	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
}

/* ── The accordion ── */
.fw-sub-faq__list{border-top:1px solid var(--line);min-width:0}
.fw-sub-faq__item{position:relative;border-bottom:1px solid var(--line)}
.fw-sub-faq__q{
	display:grid;grid-template-columns:30px minmax(0, 1fr) 30px;align-items:center;
	gap:clamp(10px, 1.2vw, 16px);
	padding:clamp(9px, 1.3vh, 13px) 0;
	cursor:pointer;list-style:none;
	font-size:clamp(14.5px, .3vw + 13px, 16px);font-weight:550;letter-spacing:-.015em;line-height:1.4;
	color:var(--ink);
	transition:color .25s;
	-webkit-tap-highlight-color:transparent
}
.fw-sub-faq__q::-webkit-details-marker{display:none}
.fw-sub-faq__q::marker{content:''}
.fw-sub-faq__q-txt{min-width:0;text-wrap:pretty}
.fw-sub-faq__n{
	font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--g3);
	font-variant-numeric:tabular-nums;transition:color .25s
}
.fw-sub-faq__q:hover,
.fw-sub-faq__item[open] .fw-sub-faq__q{color:var(--bl-d)}
.fw-sub-faq__q:hover .fw-sub-faq__n,
.fw-sub-faq__item[open] .fw-sub-faq__n{color:var(--pk)}
/* +/− in a ring: two bars, so the change is one bar collapsing rather
   than a whole element spinning into a diamond. The ring fills pink when
   its answer is open. */
.fw-sub-faq__q-ico{
	position:relative;justify-self:end;width:28px;height:28px;border-radius:50%;
	box-shadow:inset 0 0 0 1px var(--pk-ring);
	transition:background .3s var(--ease), box-shadow .3s
}
.fw-sub-faq__q-ico::before,
.fw-sub-faq__q-ico::after{
	content:'';position:absolute;left:50%;top:50%;
	background:var(--pk);border-radius:2px;
	transition:transform .4s var(--ease), background .3s
}
.fw-sub-faq__q-ico::before{width:11px;height:1.5px;transform:translate(-50%,-50%)}
.fw-sub-faq__q-ico::after {width:1.5px;height:11px;transform:translate(-50%,-50%)}
.fw-sub-faq__q:hover .fw-sub-faq__q-ico{box-shadow:inset 0 0 0 1px var(--pk)}
.fw-sub-faq__item[open] .fw-sub-faq__q-ico{background:var(--pk);box-shadow:none}
.fw-sub-faq__item[open] .fw-sub-faq__q-ico::after{transform:translate(-50%,-50%) scaleY(0)}
.fw-sub-faq__item[open] .fw-sub-faq__q-ico::before,
.fw-sub-faq__item[open] .fw-sub-faq__q-ico::after{background:var(--wh)}
/* The answer sits under the question text, against a pink-to-blue rule. */
.fw-sub-faq__a{
	position:relative;
	margin:-2px 0 clamp(12px, 1.8vh, 18px) calc(30px + clamp(10px, 1.2vw, 16px));
	padding:2px 46px 2px 16px
}
.fw-sub-faq__a::before{
	content:'';position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:2px;
	background:linear-gradient(180deg, var(--pk), var(--bl))
}
.fw-sub-faq__a p{
	margin:0;font-size:clamp(13.5px, .3vw + 12.5px, 15px);line-height:1.7;color:var(--g6);
	text-wrap:pretty
}
@media (prefers-reduced-motion: no-preference){
	.fw-sub-faq__item[open] .fw-sub-faq__a{animation:fwFaqIn .4s var(--ease) both}
}
@keyframes fwFaqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Where the browser can animate to height:auto, the answer slides open
   rather than snapping; everywhere else it simply appears. */
@supports (interpolate-size: allow-keywords){
	.fw-sub-faq__list{interpolate-size:allow-keywords}
	.fw-sub-faq__item::details-content{
		block-size:0;overflow:hidden;
		transition:block-size .4s var(--ease), content-visibility .4s allow-discrete
	}
	.fw-sub-faq__item[open]::details-content{block-size:auto}
}

/* ── The sign ──
   A square sized in vh so it never drives the section's height: two
   hairline rings (the outer dashed), each turning slowly and carrying one
   brand dot; the question mark in the brand gradient at the centre,
   drifting a few pixels; and the treatment's icon as a seal on the ring. */
.fw-sub-faq__side{
	min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;
	gap:clamp(14px, 2.2vh, 22px)
}
.fw-sub-faq__sign{
	position:relative;width:min(100%, clamp(170px, 27vh, 250px));aspect-ratio:1;
	display:grid;place-items:center;border-radius:50%;
	background:radial-gradient(circle at 50% 45%, var(--wh) 0 38%, color-mix(in srgb, var(--pk) 7%, transparent) 62%, transparent 72%)
}
.fw-sub-faq__ring{position:absolute;border-radius:50%;pointer-events:none}
.fw-sub-faq__ring--a{inset:0;border:1px dashed color-mix(in srgb, var(--pk) 38%, transparent)}
.fw-sub-faq__ring--b{inset:15%;border:1px solid color-mix(in srgb, var(--bl) 22%, transparent)}
.fw-sub-faq__ring::before{
	content:'';position:absolute;left:50%;top:0;border-radius:50%;
	transform:translate(-50%, -50%)
}
.fw-sub-faq__ring--a::before{width:10px;height:10px;background:var(--pk);box-shadow:0 0 0 4px var(--pk-t)}
.fw-sub-faq__ring--b::before{width:7px;height:7px;background:var(--bl);box-shadow:0 0 0 3px color-mix(in srgb, var(--bl) 12%, transparent)}
.fw-sub-faq__mark{
	position:relative;
	font-family:var(--ff);font-size:clamp(84px, 13vh, 124px);font-weight:700;line-height:1;letter-spacing:-.04em;
	background:linear-gradient(150deg, var(--pk) 10%, var(--bl) 90%);
	-webkit-background-clip:text;background-clip:text;color:transparent
}
.fw-sub-faq__seal{
	position:absolute;right:6%;bottom:6%;
	display:grid;place-items:center;width:clamp(38px, 5.4vh, 48px);aspect-ratio:1;border-radius:50%;
	background:var(--wh);box-shadow:0 0 0 1px var(--pk-ring), 0 10px 22px -12px var(--pk-edge)
}
.fw-sub-faq__seal img{display:block;width:52%;height:52%;object-fit:contain}
@media (prefers-reduced-motion: no-preference){
	.fw-sub-faq__ring--a{animation:fwFaqTurn 38s linear infinite}
	.fw-sub-faq__ring--b{animation:fwFaqTurn 26s linear infinite reverse}
	.fw-sub-faq__mark{animation:fwFaqDrift 6s ease-in-out infinite}
}
@keyframes fwFaqTurn{to{transform:rotate(360deg)}}
@keyframes fwFaqDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ── The prompt under it ── */
.fw-sub-faq__ask{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:100%}
.fw-sub-faq__ask b{font-size:clamp(15px, .3vw + 14px, 17px);font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.fw-sub-faq__ask p{margin:0;font-size:13px;line-height:1.5;color:var(--g5);text-wrap:balance}
/* Outlined in the pink, filled with it on hover — the family's button. */
.fw-sub-faq__btn{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;
	min-height:40px;padding:0 18px;
	border:1px solid var(--pk);border-radius:8px;
	font-size:13px;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-sub-faq__btn i{font-size:12px;transition:transform .3s var(--ease)}
.fw-sub-faq__btn:hover{color:var(--wh);background:var(--pk)}
.fw-sub-faq__btn:hover i{transform:translateX(3px)}

/* ══════════════════════════════════════════════════════════════
   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-sub-sib__head{
	display:flex;align-items:baseline;justify-content:space-between;
	gap:16px;margin-bottom:clamp(18px, 2.2vw, 30px)
}
.fw-sub-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-sub-sib__grid li{position:relative;border-bottom:1px solid var(--line)}
.fw-sub-sib__grid li:nth-child(4n+1)::before{display:none}
.fw-sub-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-sub-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
}
.fw-sub-sib__grid li:first-child a{padding-left:0}
.fw-sub-sib__grid a:hover{background:var(--bl-bg)}
.fw-sub-sib__grid b{
	font-size:clamp(15.5px, 1.05vw, 18px);font-weight:600;letter-spacing:-.02em;color:var(--ink);
	transition:color .25s
}
.fw-sub-sib__grid a > span{
	font-size:12.5px;line-height:1.5;color:var(--g5)
}
.fw-sub-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-sub-sib__grid small i{font-size:10px;transition:transform .3s var(--ease)}
.fw-sub-sib__grid a:hover b{color:var(--bl-d)}
.fw-sub-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-sub-sib__grid a > span` (0,2,1)
   would win over a plain `.fw-sub-sib__ico` (0,1,0) and force the icon to
   12.5px. Matching the child combinator settles it. */
.fw-sub-sib__grid a > .fw-sub-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-sub-sib__ico img{width:24px;height:24px;object-fit:contain}
.fw-sub-sib__grid a:hover > .fw-sub-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-sub-sib__grid{grid-template-columns:repeat(2, minmax(0,1fr))}
	.fw-sub-sib__grid li:nth-child(4n+1)::before{display:block}
	.fw-sub-sib__grid li:nth-child(2n+1)::before{display:none}}

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

	/* The overview stacks, standfirst first. A spread that has become one
	   column is no longer a spread: release the cap and put the type back
	   on the width axis. */
	.fw-sub-ov{max-height:none;padding:clamp(30px, 7vw, 54px) 0}
	.fw-sub-ov__in{grid-template-columns:minmax(0,1fr);gap:clamp(24px, 5.4vw, 38px)}
	.fw-sub-ov__h{font-size:clamp(24px, 5.2vw, 34px)}
	.fw-sub-ov__stand{font-size:clamp(16px, 3.4vw, 20px)}
	.fw-sub-ov__kick,
	.fw-sub-ov__file-h{font-size:10.5px}
	.fw-sub-ov__file-ico{width:32px;height:32px}
	.fw-sub-ov__row{grid-template-columns:104px minmax(0,1fr);min-height:48px}
	.fw-sub-ov__row dt{font-size:10px}
	.fw-sub-ov__row dd{font-size:14.5px}
	/* Service rows: the button drops under the copy; the numeral and the
	   picture span both lines. */
	.fw-sub-cards__row{
		grid-template-columns:36px clamp(150px, 26vw, 220px) minmax(0, 1fr);
		grid-template-areas:"n img body" "n img btn";
		row-gap:12px
	}
	.fw-sub-cards__btn{justify-self:start;align-self:start}
	.fw-sub-sub__blurb{grid-column:2}
	/* FAQ: one column. The sign shrinks and sits beside the prompt under
	   the questions, left-aligned — a sign-off, not a second column. */
	.fw-sub-faq__in{grid-template-columns:minmax(0, 1fr);gap:clamp(24px, 5vw, 36px)}
	.fw-sub-faq__side{flex-direction:row;align-items:center;text-align:left;gap:clamp(16px, 4vw, 28px)}
	.fw-sub-faq__sign{flex-shrink:0;width:clamp(104px, 22vw, 150px)}
	.fw-sub-faq__mark{font-size:clamp(52px, 11vw, 76px)}
	.fw-sub-faq__seal{width:34px}
	.fw-sub-faq__ask{align-items:flex-start}
	.fw-sub-faq__ask p{text-wrap:pretty}

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

@media(max-width:768px){
	/* The answer keeps its indent under the question but gives back the
	   right-hand gutter it held for the toggle. */
	.fw-sub-faq__a{padding-right:0}
	/* A thumb-sized target the full width of the column. */
	.fw-sub-ov__btn{width:100%}
	/* "Next: …" drops under the position rather than being cut short. */
	.fw-sub-ov__row dd a > span{white-space:normal}
	.fw-sub-ov__row dd em{display:block;margin:2px 0 0}
	/* Three sibling columns become one ruled list — at this width even two
	   give each blurb about 150px and break every one. */
	.fw-sub-sib__grid{grid-template-columns:minmax(0,1fr)}
	.fw-sub-sib__grid li::before{display:none}
	.fw-sub-sib__grid li:first-child a{padding-left:0}
	.fw-sub-sib__grid a{padding-inline:0}

	/* Service rows: picture left, copy right, the button full width
	   underneath. The numeral moves onto the picture's corner as a chip —
	   the same cell, stacked above it — rather than taking a column the
	   copy needs. */
	.fw-sub-cards__row{
		grid-template-columns:clamp(112px, 36%, 150px) minmax(0, 1fr);
		grid-template-areas:"img body" "btn btn";
		column-gap:12px;row-gap:12px;align-items:start
	}
	.fw-sub-cards__n{
		grid-area:img;z-index:1;align-self:start;justify-self:start;margin:6px;
		padding:3px 7px;border-radius:100px;
		font-size:10.5px;font-weight:700;letter-spacing:.04em;line-height:1.2;
		color:var(--pk-d);-webkit-text-stroke:0;background:var(--wh)
	}
	.fw-sub-cards__row:hover .fw-sub-cards__n{color:var(--pk-d)}
	.fw-sub-cards__btn{width:100%;justify-self:stretch}
	.fw-sub-cards__meta{font-size:10px}
	.fw-sub-cards__dot{display:none}

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

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

.fw-sub-close{
	position:relative;overflow:hidden;
	padding:clamp(42px, 4.8vw, 92px) 0;
	background:var(--ink)
}
.fw-sub-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-sub-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-sub-close__inner{
	display:grid;
	grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
	column-gap:clamp(32px, 5vw, 110px);
	align-items:end
}
.fw-sub-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-sub-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-sub-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-sub-btn--wh:hover{transform:none}
	.fw-sub-cards__row:hover .fw-sub-cards__img img,
	.fw-sub-cards__row:hover .fw-sub-cards__btn i{transform:none}
	.fw-sub-ov__btn:hover i,
	.fw-sub-faq__btn:hover i,
	.fw-sub-ov__row dd a:hover .bi-arrow-right,
	.fw-sub-ov__row dd a:hover .bi-arrow-down,
	a.fw-sub-svc__a:hover .fw-sub-svc__img img,
	.fw-sub-sib__grid a:hover > .fw-sub-sib__ico{transform:none}}

@media(prefers-reduced-motion:reduce){
	.fw-sub-page *,
	.fw-sub-page *::before,
	.fw-sub-page *::after{
		animation-duration:.01ms!important;
		animation-iteration-count:1!important;
		transition-duration:.01ms!important;
		scroll-behavior:auto!important
	}
	.fw-sub-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-sub-page a:focus-visible,
.fw-sub-page button:focus-visible,
.fw-sub-page summary:focus-visible{
	outline:2px solid var(--bl);
	outline-offset:3px;
	border-radius:8px
}