/* Treatment template. Loaded only on pages using template-treatment.php.
   Palette and type come from the theme: copper #d1936c, warm ink #211e1c,
   Quicksand throughout - no additional webfont is requested. */

/* The theme puts overflow-x:hidden on body, which turns it into a scroll
   container and stops position:sticky working anywhere inside. `clip` gives the
   same horizontal containment without creating that scroll container. */
body.tlc-treatment-page { overflow-x: clip; }

/* The theme does not set border-box on everything, so any `width: 100%` with
   padding (the rail button, the mobile bar) spills past the viewport. */
.tlc, .tlc *, .tlc *::before, .tlc *::after { box-sizing: border-box; }

.tlc {
	--ink: #211e1c;
	--ink-soft: #5f5754;
	--copper: #d1936c;
	--copper-deep: #9d5f36;   /* passes contrast on white where copper does not */
	--blush: #fdf0ed;
	--paper: #fff;
	--line: #ecdfe2;
	--wrap: 1200px;
	--radius: 14px;

	font-family: "Quicksand", sans-serif;
	color: var(--ink);
}

.tlc .tlc-label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--copper-deep);
	margin: 0 0 .75rem;
}

.tlc .tlc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 15px 30px;
	border-radius: 50px;
	background: var(--copper);
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .02em;
	text-decoration: none;
	border: 2px solid var(--copper);
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.tlc .tlc-btn:hover { background: var(--copper-deep); border-color: var(--copper-deep); color: #fff; transform: translateY(-1px); }
.tlc .tlc-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.tlc .tlc-btn--quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.tlc .tlc-btn--quiet:hover { background: var(--blush); color: var(--ink); border-color: var(--copper); }
.tlc .tlc-btn--block { display: flex; width: 100%; }

/* ---------- Banner ----------
   Asymmetric split: the copy column leads, the photo panel bleeds off the right
   and top edges and carries one oversized rounded corner, picking up the round
   terminals of Quicksand rather than inventing a new shape language. */

.tlc-hero {
	position: relative;
	background: linear-gradient(180deg, var(--blush), #fff 85%);
	overflow: hidden;
}

/* A quiet photographic presence, not a banner: faded in from the right behind
   the lead card and masked out entirely behind the copy/H1, so it reads as
   texture rather than competing with the text. */
.tlc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--tlc-hero-bg, none);
	background-size: auto 135%;
	background-position: 100% 3%;
	opacity: .55;
	mix-blend-mode: multiply;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 32%, #000 55%);
	        mask-image: linear-gradient(to right, transparent 0%, transparent 32%, #000 55%);
	pointer-events: none;
}

/* Same container as the article below, so the hero and the body text share one
   left edge all the way down the page. */
.tlc-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--wrap);
	margin: 0 auto;
	/* top padding clears the theme's floating header */
	padding: clamp(104px, 9vw, 148px) clamp(20px, 4vw, 40px) clamp(48px, 5vw, 72px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.tlc-hero__copy { min-width: 0; }

/* Three facts, each one already stated in the article: the questions people
   need answered before they will give up a phone number. */
.tlc-hero__points {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.tlc-hero__points li {
	position: relative;
	padding-left: 30px;
	font-size: .98rem;
	font-weight: 500;
	color: var(--ink);
}
.tlc-hero__points li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .34em;
	width: 15px;
	height: 8px;
	border-left: 2.5px solid var(--copper-deep);
	border-bottom: 2.5px solid var(--copper-deep);
	transform: rotate(-45deg);
}

/* ---------- Hero lead card: the page's primary conversion point ---------- */
.tlc-lead {
	background: #fff;
	border-radius: var(--radius);
	padding: clamp(24px, 3vw, 32px);
	box-shadow: 0 18px 44px rgba(33, 30, 28, .1), 0 2px 6px rgba(33, 30, 28, .04);
	border: 1px solid rgba(209, 147, 108, .22);
}
.tlc-lead__title {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 6px;
	line-height: 1.2;
}
.tlc-lead__line { font-size: .95rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 20px; }

.tlc-lead .tlc-field { margin: 0 0 12px; }
.tlc-lead .tlc-field--submit { margin: 4px 0 0; }
/* Unscoped: the hero card and the booking popup share one input style. */
.tlc-input {
	width: 100%;
	padding: 14px 16px;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: #fdfbfa;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	transition: border-color .2s ease, background .2s ease;
}
.tlc-input::placeholder { color: #9a908c; }
.tlc-input:focus {
	outline: none;
	background: #fff;
	border-color: var(--copper);
	box-shadow: 0 0 0 3px rgba(209, 147, 108, .18);
}
.tlc-lead input.tlc-btn { border: 2px solid var(--copper); cursor: pointer; }

/* Select matches the text inputs, with a drawn chevron so it does not inherit
   the browser's default arrow. */
.tlc-select {
	width: 100%;
	padding: 14px 42px 14px 16px;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background-color: #fdfbfa;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239d5f36' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	border: 1.5px solid var(--line);
	border-radius: 10px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
.tlc-select:focus {
	outline: none;
	background-color: #fff;
	border-color: var(--copper);
	box-shadow: 0 0 0 3px rgba(209, 147, 108, .18);
}
.tlc-modal__form .tlc-select { margin-bottom: 12px; }

/* WhatsApp submit. Brand copper, not WhatsApp green: the button belongs to the
   page, and the glyph already says where it goes. */
.tlc-wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 15px 24px;
	border: 0;
	border-radius: 50px;
	background: var(--copper);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s ease, transform .18s ease;
}
.tlc-wa svg { width: 19px; height: 19px; flex: 0 0 auto; }
.tlc-wa:hover { background: var(--copper-deep); transform: translateY(-1px); }
.tlc-wa:active { transform: translateY(0) scale(.99); }
.tlc-wa:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* The WP theme stylesheet colours every `a` pink (#cd2653). These were lost in
   an edit and had to be restored; keep them ahead of the popup block. */
.tlc-lead__alt { font-size: .92rem; color: var(--ink-soft); margin: 18px 0 0; text-align: center; }
.tlc-lead__alt a { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--copper); }
.tlc-lead__alt a:hover { color: var(--copper-deep); }
.tlc-lead__doc {
	font-size: .85rem;
	color: var(--ink-soft);
	margin: 16px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	text-align: center;
}
.tlc-lead__doc a { color: var(--ink); font-weight: 700; text-decoration: none; }
.tlc-lead__doc a:hover { color: var(--copper-deep); }

/* CF7's own wrappers and messages, brought into the card's language. */
.tlc-lead .wpcf7 { margin: 0; }
.tlc-lead .wpcf7-not-valid-tip { font-size: .82rem; color: #b3261e; margin-top: 6px; }
.tlc-lead .wpcf7-response-output {
	margin: 16px 0 0 !important;
	padding: 12px 14px !important;
	border: 0 !important;
	border-radius: 10px;
	background: var(--blush);
	font-size: .9rem;
	color: var(--ink);
}
.tlc-lead .wpcf7-spinner { display: block; margin: 10px auto 0; }

/* ---------- Booking popup ----------
   Modelled on the Al Bedaya panel: a WhatsApp-style card anchored bottom right,
   with a titled top bar and option chips instead of a dropdown. */
.tlc-chat {
	--ink: #211e1c;
	--ink-soft: #5f5754;
	--copper: #d1936c;
	--copper-deep: #9d5f36;
	--blush: #fdf0ed;
	--line: #ecdfe2;

	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: 20px;
	font-family: "Quicksand", sans-serif;
}
.tlc-chat[hidden] { display: none; }
.tlc-chat *, .tlc-chat *::before, .tlc-chat *::after { box-sizing: border-box; }
.tlc-chat__veil { position: absolute; inset: 0; background: rgba(33, 30, 28, .55); backdrop-filter: blur(3px); }

/* Centred, not anchored to a corner: it keeps clear of the floating chat
   widget and reads as a deliberate step rather than a notification. */
.tlc-chat__panel {
	position: relative;
	width: 380px;
	max-width: 100%;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(33, 30, 28, .3);
	animation: tlc-chat-in .2s cubic-bezier(.2, .7, .3, 1);
}
@keyframes tlc-chat-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .tlc-chat__panel { animation: none; } }

.tlc-chat__top {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 14px;
	background: var(--ink);
	color: #fff;
}
.tlc-chat__avatar {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--copper);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
}
.tlc-chat__who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.tlc-chat__who strong { font-size: .95rem; font-weight: 700; }
.tlc-chat__who em { font-style: normal; font-size: .72rem; color: rgba(255, 255, 255, .62); }
.tlc-chat__x {
	margin-left: auto;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: none;
	color: rgba(255, 255, 255, .8);
	cursor: pointer;
}
.tlc-chat__x svg { width: 16px; height: 16px; }
.tlc-chat__x:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.tlc-chat__x:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

.tlc-chat__body { padding: 16px 14px 14px; }
.tlc-chat__line { font-size: .88rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 12px; }
.tlc-chat__body .tlc-input { margin-bottom: 9px; padding: 12px 14px; font-size: .95rem; }
.tlc-chat__err { margin: 2px 0 10px; font-size: .8rem; color: #b3261e; }
.tlc-chat__hint { margin: 9px 0 0; text-align: center; font-size: .72rem; color: #9a908c; }

/* Options as chips, the way the reference does it, not a dropdown. */
.tlc-chat__ask, .tlc-lead .tlc-chat__ask { margin: 4px 0 7px; font-size: .8rem; font-weight: 600; color: var(--ink); }
.tlc-chip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 0 0 12px; }
.tlc-chip-row--two { grid-template-columns: repeat(2, 1fr); }
/* wpautop can still wrap the buttons in a <p>; display:contents keeps them as
   direct grid items either way. */
.tlc-chip-row p { display: contents; margin: 0; }
.tlc-chip-row br { display: none; }
.tlc-chip {
	padding: 9px 6px;
	text-align: center;
	border: 1.5px solid var(--line);
	border-radius: 50px;
	background: #fff;
	font: inherit;
	font-size: .83rem;
	font-weight: 600;
	color: var(--ink-soft);
	cursor: pointer;
	transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.tlc-chip:hover { border-color: var(--copper); color: var(--ink); }
.tlc-chip:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 2px; }
.tlc-chip.is-on { border-color: var(--copper); background: var(--blush); color: var(--copper-deep); }

.tlc-chat .tlc-wa { padding: 13px 20px; font-size: .95rem; }

@media (max-width: 560px) {
	.tlc-chat { padding: 14px; }
	.tlc-chat__panel { width: 100%; }
}

/* Breadcrumb reads as an eyebrow rather than a stray line of navigation. */
.tlc-hero__crumbs, .tlc-hero__crumbs p {
	margin: 0 0 22px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--copper-deep);
}
.tlc-hero__crumbs a { color: var(--ink-soft); text-decoration: none; }
.tlc-hero__crumbs a:hover { color: var(--copper-deep); }

.tlc-hero__title {
	font-size: clamp(2.25rem, 1.2rem + 3.4vw, 3.9rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.025em;
	margin: 0 0 20px;
	color: var(--ink);
	text-wrap: balance;
}
.tlc-hero__standfirst {
	font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 0;
	max-width: 54ch;
}

/* Restrained entrance: one orchestrated move, not scattered effects. */
@media (prefers-reduced-motion: no-preference) {
	.tlc-hero__crumbs, .tlc-hero__title, .tlc-hero__standfirst, .tlc-hero__points, .tlc-lead {
		animation: tlc-rise .7s cubic-bezier(.2, .6, .2, 1) backwards;
	}
	.tlc-hero__title { animation-delay: .06s; }
	.tlc-hero__standfirst { animation-delay: .12s; }
	.tlc-hero__points { animation-delay: .18s; }
	.tlc-lead { animation-delay: .1s; }
}
@keyframes tlc-rise { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Treatment video ----------
   The clinic films vertical reels, so the default frame is portrait and sized
   like a phone rather than letterboxed into a 16:9 slot. */

/* The page runs light-on-light from the hero into the article, so this section
   takes the ink ground: it gives the page a rhythm, and a dark surround is how
   moving image is normally presented. The reel then breaks the top edge of the
   band so the section reads as composed rather than stacked. */
.tlc-video {
	background: var(--ink);
	margin-top: clamp(70px, 8vw, 110px);   /* room for the reel to break out */
}
.tlc-video__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 40px) clamp(56px, 6vw, 84px);
	display: grid;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}
.tlc-video--tall .tlc-video__inner { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
/* A landscape case video earns more of the row than a phone-shaped reel does. */
.tlc-video--wide .tlc-video__inner { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }

/* The stage carries the negative offset; the frame keeps its own overflow so
   the rounded corners still clip the video. `align-self: start` is required:
   with the grid centring items, a negative margin just re-centres and the
   break-out never happens. */
.tlc-video__stage { margin-top: clamp(-110px, -8vw, -70px); align-self: start; position: relative; }
/* A landscape clip is short and wide, so the portrait break-out does not suit
   it: pulled above the band it strands a large void underneath. It sits inside
   the band instead, nudged up off centre, and the band is tightened to match. */
.tlc-video--wide .tlc-video__stage { margin-top: clamp(-54px, -3.5vw, -34px); align-self: center; }
.tlc-video--wide .tlc-video__inner { padding-bottom: clamp(44px, 4.5vw, 64px); }
.tlc-video__stage::after {
	/* warm floor light under the reel, as if the screen were lighting the room */
	content: "";
	position: absolute;
	z-index: 0;
	left: 50%;
	bottom: -60px;
	width: 190%;
	height: 260px;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(209, 147, 108, .55), rgba(209, 147, 108, .12) 55%, transparent 78%);
	filter: blur(6px);
	pointer-events: none;
}

.tlc-video__frame {
	position: relative;
	z-index: 1;
	overflow: hidden;
	border-radius: 22px;
	background: #16110f;
	box-shadow: 0 34px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .07);
}
.tlc-video--tall .tlc-video__frame { aspect-ratio: 9 / 16; }
.tlc-video--wide .tlc-video__frame { aspect-ratio: 16 / 9; }
.tlc-video__frame video,
.tlc-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	display: block;
}

.tlc-video__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: rgba(33, 30, 28, .28);
	color: #fff;
	transition: background .2s ease, opacity .2s ease;
}
.tlc-video__play::before {
	content: "";
	position: absolute;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: var(--copper);
	box-shadow: 0 8px 24px rgba(33, 30, 28, .3);
}
.tlc-video__play svg { position: relative; width: 34px; height: 34px; margin-left: 3px; }
.tlc-video__play:hover { background: rgba(33, 30, 28, .18); }
.tlc-video__play:focus-visible { outline: 3px solid var(--copper-deep); outline-offset: -6px; }
.tlc-video__frame.is-playing .tlc-video__play { opacity: 0; pointer-events: none; }

/* Runtime badge: the real clip length, read from the file itself. */
.tlc-video__dur {
	position: absolute;
	z-index: 2;
	top: 14px;
	left: 14px;
	padding: 5px 10px;
	border-radius: 30px;
	background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
	opacity: 0;
	transition: opacity .3s ease;
}
.tlc-video__dur.is-set { opacity: 1; }
.tlc-video__frame.is-playing .tlc-video__dur { opacity: 0; }

.tlc-video__copy { max-width: 34rem; padding-top: clamp(24px, 3vw, 48px); }
.tlc-video__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--copper);
}
/* The rule runs off toward the reel, tying the two columns together. */
.tlc-video__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, rgba(209, 147, 108, .55), transparent);
}
.tlc-video__copy h2 {
	font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.025em;
	color: #fff;
	margin: 0 0 30px;
}
.tlc-video__copy h2 em { font-style: normal; color: var(--copper); }
.tlc-video__copy h2 { margin-bottom: 16px; }
.tlc-video__line {
	font-size: 1.02rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .68);
	margin: 0 0 30px;
	max-width: 40ch;
}

.tlc-video__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 44px;
	margin: 0 0 32px;
	padding: 22px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .13);
}
.tlc-video__meta dt {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
	margin-bottom: 5px;
}
.tlc-video__meta dd { margin: 0; font-size: .98rem; font-weight: 600; color: #fff; }
.tlc-video__meta a { color: #fff; text-decoration: none; border-bottom: 2px solid var(--copper); }
.tlc-video__meta a:hover { color: var(--copper); }

@media (max-width: 860px) {
	.tlc-video--tall .tlc-video__inner,
	.tlc-video--wide .tlc-video__inner { grid-template-columns: 1fr; gap: 32px; }
	/* Explicit width, not `margin:0 auto`: an auto margin makes a grid item size
	   to its content, and the video inside is absolutely positioned, so the
	   frame would collapse to zero. */
	.tlc-video--tall .tlc-video__stage { width: min(272px, 100%); justify-self: center; }
	.tlc-video__copy { max-width: none; padding-top: 0; }
	.tlc-video__meta { gap: 12px 32px; }
}

/* ---------- Two column body ---------- */

.tlc-layout {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 40px) 96px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(40px, 5vw, 72px);
	align-items: start;
}

.tlc-body {
	max-width: 720px;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--ink-soft);
}
/* Vertical rhythm.
   The reset is wrapped in :where() so it carries zero specificity: a plain
   `.tlc-body p { margin: 0 }` outranks the flow rule below and collapses every
   paragraph gap to nothing. Spacing is owned by one rule, applied to the body
   and to group inner containers alike so cards space like the page does. */
.tlc-body :where(p, ul, ol, figure, details, .wp-block-group) { margin: 0; }

.tlc-body > * + *,
.tlc-body .wp-block-group__inner-container > * + * { margin-top: 1.5em; }
.tlc-body > *:first-child,
.tlc-body .wp-block-group__inner-container > *:first-child { margin-top: 0; }

.tlc-body strong { color: var(--ink); font-weight: 700; }
.tlc-body a { color: var(--copper-deep); text-underline-offset: 3px; }

.tlc-body h2 {
	margin-top: 2.4em;
	margin-bottom: .6em;
	font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--ink);
	scroll-margin-top: 100px;
}
/* A short copper rule marks each section start. */
.tlc-body h2::before {
	content: "";
	display: block;
	width: 42px;
	height: 3px;
	border-radius: 2px;
	background: var(--copper);
	margin-bottom: .7em;
}
.tlc-body h3 {
	margin-top: 2em;
	margin-bottom: .5em;
	font-size: clamp(1.3rem, 1.1rem + .8vw, 1.875rem);
	font-weight: 700;
	color: var(--ink);
}

.tlc-body ul { padding-left: 0; list-style: none; }
.tlc-body li { position: relative; padding-left: 1.75rem; }
.tlc-body li + li { margin-top: .55em; }
.tlc-body li::before {
	content: "";
	position: absolute;
	left: .35rem;
	top: .72em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 2px solid var(--copper);
}

.tlc-body img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }
.tlc-body figure { margin: 2em 0; }

/* core/group renders an inner container, so layout is declared on both the
   group and that wrapper - whichever holds the figures does the work. */
.tlc-media-pair,
.tlc-media-pair > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}
.tlc-media-pair { margin: 2.2em 0; }
.tlc-media-pair figure { margin: 0; }
.tlc-media-pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Self-check: the one loud element on the page ----------
   The offset outline deliberately extends past the card edge, echoing the
   defining trait of a keloid - it grows beyond the original boundary. */
.tlc-selfcheck {
	position: relative;
	background: var(--blush);
	border-radius: var(--radius);
	padding: clamp(28px, 4vw, 40px);
	margin: 2.6em 0;
}
.tlc-selfcheck::after {
	content: "";
	position: absolute;
	inset: -12px -12px 12px 12px;   /* uniform diagonal shift, so it reads as intent */
	border: 2px solid var(--copper);
	border-radius: var(--radius);
	pointer-events: none;
}
.tlc-selfcheck > .wp-block-group__inner-container > *:first-child,
.tlc-selfcheck > *:first-child { margin-top: 0; }
.tlc-selfcheck h2 { margin-top: 0; }
.tlc-selfcheck li::before { border-color: var(--copper-deep); }

/* ---------- FAQ ---------- */
.tlc-body details {
	border-bottom: 1px solid var(--line);
	background: none;
	margin-top: 0;
}
.tlc-body details:first-of-type { border-top: 1px solid var(--line); }
.tlc-body details > summary {
	cursor: pointer;
	list-style: none;
	padding: 20px 48px 20px 0;
	font-weight: 700;
	color: var(--ink);
	position: relative;
}
.tlc-body details > summary::-webkit-details-marker { display: none; }
.tlc-body details > summary::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--copper-deep);
	border-bottom: 2px solid var(--copper-deep);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}
.tlc-body details[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.tlc-body details > *:not(summary) { padding: 0 0 22px; margin: 0; }
.tlc-body details > summary:focus-visible { outline: 3px solid var(--copper-deep); outline-offset: 2px; }

/* ---------- Tabs: same pattern as the theme's own tabs-style1, rebuilt without
   the plugin markup ---------- */
.tlc-tabs { margin-top: 1.4em; }
.tlc-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
	border-bottom: 1px solid var(--line);
	margin: 0 0 1.6em;
}
.tlc-tabs__btn {
	appearance: none;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	font-size: .98rem;
	color: var(--ink-soft);
	padding: 0 0 14px;
	position: relative;
}
.tlc-tabs__btn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: transparent;
}
.tlc-tabs__btn.is-active { color: var(--ink); }
.tlc-tabs__btn.is-active::after { background: var(--copper); }
.tlc-tabs__btn:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 3px; }
.tlc-tabs__panel { display: none; }
.tlc-tabs__panel.is-active { display: block; }
.tlc-tabs__panel > *:first-child { margin-top: 0; }
.tlc-tabs__panel > * + * { margin-top: 1.5em; }

/* ---------- Before &amp; after: the one loud proof element, boxed like the
   self-check card rather than left to sit as a plain content image. ---------- */
.tlc-showcase,
.tlc-showcase > .wp-block-group__inner-container {
	background: var(--blush);
	border-radius: var(--radius);
}
.tlc-showcase { padding: clamp(28px, 4vw, 40px); margin: 2.6em 0; }
.tlc-showcase > .wp-block-group__inner-container > *:first-child,
.tlc-showcase > *:first-child { margin-top: 0; }
.tlc-showcase h2 { margin-top: 0; }
.tlc-showcase p { color: var(--ink-soft); }
/* One large comparison photo leads; the rest support it at a smaller size,
   so the section reads as a proof point rather than a flat thumbnail grid. */
.tlc-showcase__media { margin-top: 1.4em; }
.tlc-showcase__feature {
	margin: 0 0 14px;
	border-radius: calc(var(--radius) - 4px);
	overflow: hidden;
	box-shadow: 0 20px 44px rgba(45, 26, 15, .2);
}
.tlc-showcase__feature img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.tlc-showcase__strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.tlc-showcase__strip figure {
	margin: 0;
	border-radius: calc(var(--radius) - 10px);
	overflow: hidden;
	box-shadow: 0 10px 24px rgba(45, 26, 15, .14);
}
.tlc-showcase__strip img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
@media (max-width: 560px) {
	.tlc-showcase__strip { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* ---------- Associations: a quiet trust line, not a feature ---------- */
.tlc-assoc,
.tlc-assoc > .wp-block-group__inner-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 34px;
}
.tlc-assoc { margin: 1.6em 0; padding-top: 1.6em; border-top: 1px solid var(--line); }
.tlc-assoc figure { margin: 0; }
.tlc-assoc img { max-height: 56px; width: auto; border-radius: 0; filter: grayscale(1); opacity: .65; transition: filter .2s ease, opacity .2s ease; }
.tlc-assoc img:hover { filter: none; opacity: 1; }

/* ---------- Booking rail ----------
   The aside must span the full row for sticky to have travel: with
   align-items:start on the grid it would collapse to its own height. */
.tlc-rail { align-self: stretch; height: 100%; }
/* The booking card must never be clipped or scrolled out of reach, so it keeps
   its natural height and the contents list absorbs whatever space is left. On a
   short viewport the list scrolls; the call to action never does. */
.tlc-rail__inner {
	position: sticky;
	top: 96px;
	display: grid;
	/* 1fr, not auto: an auto row grows to its content and pushes the card out of
	   the box. 1fr yields the leftover space and shrinks when the screen is short. */
	grid-template-rows: minmax(0, 1fr) auto;
	gap: 22px;
	max-height: calc(100vh - 120px);
	overflow: hidden;
}
.tlc-toc {
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.tlc-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.tlc-toc li { margin: 0; }
.tlc-toc a {
	display: block;
	padding: 7px 0 7px 16px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	font-size: .9rem;
	line-height: 1.4;
	color: var(--ink-soft);
	text-decoration: none;
	transition: color .2s ease, border-color .2s ease;
}
.tlc-toc a:hover { color: var(--ink); border-left-color: var(--copper); }
.tlc-toc a:focus-visible { outline: 2px solid var(--copper-deep); outline-offset: 2px; }
/* Marks where the reader is, so a long clinical page keeps its bearings. */
.tlc-toc a.is-current { color: var(--ink); font-weight: 700; border-left-color: var(--copper); }

.tlc-book {
	background: var(--ink);
	color: #fff;
	border-radius: var(--radius);
	padding: 20px;
}
.tlc-book .tlc-label { color: var(--copper); margin-bottom: .5rem; }
.tlc-book__line { font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .8); margin: 0 0 14px; }
.tlc-book .tlc-btn { padding: 13px 24px; }
.tlc-book__phone {
	display: block;
	margin-top: 12px;
	text-align: center;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}
.tlc-book__phone:hover { color: var(--copper); }
.tlc-book__doc {
	display: block;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: .82rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, .6);
	text-decoration: none;
	text-align: center;
}
.tlc-book__doc strong { color: #fff; font-weight: 700; }
.tlc-book__doc:hover strong { color: var(--copper); }


/* ---------- Mobile booking bar ---------- */
.tlc-bar { display: none; }

@media (max-width: 1024px) {
	.tlc-hero__inner {
		grid-template-columns: 1fr;
		gap: 22px;
		padding: clamp(60px, 14vw, 82px) 20px clamp(36px, 7vw, 48px);
	}
	.tlc-hero__title { font-size: clamp(1.9rem, 1.2rem + 3.2vw, 2.4rem); margin-bottom: 14px; }
	.tlc-hero__standfirst { font-size: 1rem; }
	/* The proof points sit under the form on small screens: the ask comes first,
	   the reassurance is there for anyone who scrolls past it. */
	.tlc-hero__points { order: 3; margin-top: 0; }
	.tlc-hero__copy { display: contents; }
	.tlc-lead { order: 2; }
	.tlc-layout { grid-template-columns: 1fr; padding-bottom: 56px; }
	.tlc-body { max-width: none; }
	.tlc-rail__inner { position: static; max-height: none; overflow: visible; }
	.tlc-toc { display: none; }
	.tlc-hero__actions { margin-top: 26px; }

	.tlc-bar {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 10px;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .96);
		border-top: 1px solid var(--line);
		box-shadow: 0 -6px 24px rgba(33, 30, 28, .08);
		transform: translateY(110%);
		transition: transform .25s ease;
	}
	.tlc-bar.is-shown { transform: none; }
	.tlc-bar__call {
		padding: 14px 22px;
		border: 2px solid var(--line);
		border-radius: 50px;
		font-weight: 700;
		color: var(--ink);
		text-decoration: none;
	}
	.tlc-bar__book { width: 100%; }
}

@media (max-width: 600px) {
	.tlc-body { font-size: 1rem; }
	.tlc-selfcheck::after { inset: -6px -6px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.tlc *, .tlc *::before, .tlc *::after { transition: none !important; }
}

/* ---- Hero palette matched to tlcskyn.com: solid dusty rose, photo at full strength, white logo ---- */
body.tlc-treatment-page .tlc-hero { background: #d6a996; }
body.tlc-treatment-page .tlc-hero::before {
	opacity: 1;
	mix-blend-mode: normal;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 11%, #000 33%);
	        mask-image: linear-gradient(to right, transparent 0%, transparent 11%, #000 33%);
}
body.tlc-treatment-page .tlc-hero__crumbs,
body.tlc-treatment-page .tlc-hero__crumbs p,
body.tlc-treatment-page .tlc-hero__crumbs a,
body.tlc-treatment-page .tlc-hero__standfirst { color: var(--ink); }
body.tlc-treatment-page .tlc-hero__points li::before { border-color: #fff; }
body.tlc-treatment-page .nav:not(.is-stuck) .nav__brand img { filter: brightness(0) invert(1); }

/* Tinted fade behind the hero copy so the photo never reduces text contrast */
body.tlc-treatment-page .tlc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(214,169,150,.94) 0%, rgba(214,169,150,.9) 40%, rgba(214,169,150,.55) 55%, rgba(214,169,150,0) 68%);
	pointer-events: none;
}

/* Doctor cut-out pops up past the top edge of the dark booking card */
.tlc-book { position: relative; margin-top: 78px; }
.tlc-book__pop { position: absolute; right: 6px; top: -78px; width: 146px; height: auto; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }
.tlc-book__copy { padding-right: 50%; min-height: 124px; }
.tlc-book__copy .tlc-label { margin: 0 0 4px; }
.tlc-book__name { display: block; margin: 0 0 10px; font-size: .85rem; line-height: 1.3; color: rgba(255,255,255,.7); text-decoration: none; }
.tlc-book__name strong { display: block; color: #fff; font-size: .95rem; font-weight: 700; }
a.tlc-book__name:hover strong { color: var(--copper); }
.tlc-book__copy .tlc-book__line { font-size: .82rem; margin: 0; }

/* MOBILE CLEARANCE: the fixed header is about 78px tall on phones, so the
   breadcrumb at the top of the hero has to start below it. */
@media (max-width: 1024px) {
	.tlc-hero__inner { padding-top: clamp(96px, 25vw, 112px); }
}

/* Beige hero: tinted to the homepage beige on every treatment page. */
body.tlc-treatment-page .tlc-hero { background: #c8ac94; }
body.tlc-treatment-page .tlc-hero::after {
	background: linear-gradient(to right, rgba(200,172,148,.94) 0%, rgba(200,172,148,.9) 40%, rgba(200,172,148,.55) 55%, rgba(200,172,148,0) 68%);
}

/* The dark video band meets the hero directly and the reel overlaps the seam,
   instead of floating in a white strip. */
body.tlc-treatment-page .tlc-video { margin-top: 0; }
@media (min-width: 1025px) {
	body.tlc-treatment-page .tlc-hero__inner { padding-bottom: clamp(100px, 9vw, 150px); }
}
@media (max-width: 1024px) {
	body.tlc-treatment-page .tlc-video__stage { margin-top: 0; }
	body.tlc-treatment-page .tlc-video__inner { padding-top: 44px; }
}