/**
 * Mediserv — page section components.
 *
 * style.css holds the design tokens and site chrome (header, footer, buttons).
 * This file holds everything that makes up the body of a page. Both use the
 * same --ms-* variables, so the palette is still changed in one place.
 */

/* ==========================================================================
   1. Section scaffolding
   ========================================================================== */

.ms-section__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.ms-section__head h2 { margin: .5rem 0 0; }
.ms-section__lead { margin-top: .9rem; font-size: 1.075rem; color: var(--ms-muted); }

.ms-section__head--center { margin-inline: auto; text-align: center; }
.ms-section__head--center .ms-eyebrow { justify-content: center; }

.ms-section__head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: none;
}
@media (max-width: 640px) {
	.ms-section__head--split { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   2. Hero
   ========================================================================== */

.ms-hero { background: var(--ms-surface); overflow: hidden; }

/* The cut-out is positioned, not laid out in a column: it needs to stand the
   full height of the band and run off the right edge, which a grid cell sized
   by its sibling could never do. */
/* No padding on the wrapper — the copy carries it — so the cut-out can sit
   flush against the top of the band. */
.ms-hero__inner {
	position: relative;
	min-height: clamp(560px, 58vw, 820px);
	display: flex;
	align-items: center;
}

.ms-hero__copy {
	position: relative;
	z-index: 1;
	max-width: min(40rem, 52%);
	padding-block: clamp(2rem, 4vw, 3rem);
}

/* Three lines by design:
     Töötervishoiu / täislahendused / ettevõtetele üle Eesti
   The long closing line needs roughly 604px at this size, so the column is the
   constraint, not a ch-based max-width — `ch` measures the digit zero, which is
   far narrower than Manrope's lowercase, and was clipping the line into a
   fourth row. text-wrap:balance stays off; it evens four lines out instead. */
.ms-hero__copy h1 {
	font-weight: 800;
	font-size: clamp(2.05rem, 1rem + 3.2vw, 3.3rem);
	letter-spacing: -.04em;
	line-height: 1.06;
	text-wrap: normal;
	margin-bottom: .55em;
}

.ms-hero__lead { font-size: 1.075rem; color: var(--ms-body); max-width: 33rem; }
.ms-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* Anchored to the bottom-right of the band and sized to its full height, so the
   lime shape reads as part of the band rather than a picture placed inside it.
   .ms-hero clips whatever runs past the edges. */
.ms-hero__media { position: static; }
/* Framing is measured, not guessed. In the source PNG (953x976) the lime shape
   starts at y=0 and x=5.8%, and the doctor's head begins 17.6% down. To land
   his head ~11% below the band top with the shape's left edge ~44% across, the
   image runs at 144% of the band height offset -14% — so it is cropped at both
   the top and the bottom, which is how the original reads. .ms-hero clips it. */
.ms-hero__media img {
	position: absolute;
	right: calc(var(--ms-gutter) * -1);
	top: -10.6%;
	height: 123%;
	width: auto;
	max-width: none;
	object-fit: contain;
	object-position: top right;
}

/* Past the container width there is dead space to the right — run the shape
   into it instead of leaving a gap beside the blob. */
@media (min-width: 1280px) {
	.ms-hero__media img { right: calc((100vw - var(--ms-container)) / -2); }
}

/* Mobile keeps the cut-out — it is the brand's signature shape, and hiding it
   left phone visitors with a plain grey box. It moves below the copy, static
   rather than absolute, and bleeds off the right edge as it does on desktop. */
@media (max-width: 900px) {
	.ms-hero__inner { min-height: 0; display: block; }
	.ms-hero__copy { max-width: none; padding-bottom: 1.5rem; }
	.ms-hero__copy h1 { max-width: none; }

	.ms-hero__media {
		display: block;
		margin-right: calc(var(--ms-gutter) * -1);
		text-align: right;
		overflow: hidden;
	}
	.ms-hero__media img {
		position: static;
		height: auto;
		width: min(420px, 92%);
		max-width: none;
		margin-left: auto;
		margin-bottom: -1px; /* kill the inline-image baseline gap */
	}
}

/* -- licence trust strip ------------------------------------------------- */
.ms-trust { background: var(--ms-white); }
.ms-trust__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem 3rem;
	align-items: center;
	padding-block: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--ms-line);
}
.ms-trust__heading { font-size: clamp(1.15rem, .9rem + .9vw, 1.6rem); margin: 0; }
.ms-trust__text { color: var(--ms-muted); font-size: .95rem; margin: 0; }
@media (max-width: 820px) { .ms-trust__inner { grid-template-columns: 1fr; } }

/* ==========================================================================
   3. Service cards
   ========================================================================== */

.ms-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); }
.ms-cards[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) {
	.ms-cards, .ms-cards[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.ms-cards, .ms-cards[data-count="4"] { grid-template-columns: 1fr; }
}

.ms-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: 1.75rem 1.5rem;
	background: #fff;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	text-decoration: none;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ms-card::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 3px;
	background: var(--ms-green-500);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform .22s ease;
}
.ms-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--ms-shadow-lg);
	border-color: var(--ms-green-200);
}
.ms-card:hover::before { transform: scaleY(1); }

.ms-card__icon {
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	border-radius: 14px;
	background: var(--ms-green-50);
	color: var(--ms-green-700);
	margin-bottom: .35rem;
}
.ms-card__icon svg { width: 22px; height: 22px; }

.ms-card__title { font-size: 1.15rem; margin: 0; }
.ms-card__text { color: var(--ms-muted); font-size: .95rem; margin: 0; flex: 1 1 auto; }

.ms-card__more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .5rem;
	font-family: var(--ms-font-display);
	font-weight: 700;
	font-size: .875rem;
	color: var(--ms-green-700);
}
.ms-card__more svg { width: 14px; height: 14px; transition: transform .18s ease; }
.ms-card:hover .ms-card__more svg { transform: translateX(3px); }

/* ==========================================================================
   4. Audience split
   ========================================================================== */

.ms-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 780px) { .ms-split { grid-template-columns: 1fr; } }

.ms-split__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .65rem;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border-radius: var(--ms-radius-lg);
	text-decoration: none;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.ms-split__panel:hover { transform: translateY(-3px); box-shadow: var(--ms-shadow-lg); }
.ms-split__panel h3 { margin: 0; font-size: clamp(1.35rem, 1rem + 1.1vw, 1.85rem); }
.ms-split__panel p { margin: 0; font-size: 1rem; }

/* Employer gets the green surface, employee stays white, so the pair reads as
   a choice rather than a banner. */
.ms-split__panel--employer { background: var(--ms-green-700); }
.ms-split__panel--employer h3 { color: #fff; }
.ms-split__panel--employer p { color: rgba(255, 255, 255, .85); }
.ms-split__panel--employer .ms-split__cta { color: #fff; }

.ms-split__panel--employee { background: #fff; border: 1px solid var(--ms-line); }
.ms-split__panel--employee h3 { color: var(--ms-ink); }
.ms-split__panel--employee p { color: var(--ms-muted); }
.ms-split__panel--employee .ms-split__cta { color: var(--ms-green-700); }

.ms-split__cta {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: .6rem;
	font-family: var(--ms-font-display);
	font-weight: 700;
	font-size: .9375rem;
}
.ms-split__cta svg { width: 15px; height: 15px; transition: transform .18s ease; }
.ms-split__panel:hover .ms-split__cta svg { transform: translateX(4px); }

/* ==========================================================================
   5. Why Mediserv
   ========================================================================== */

.ms-why {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (max-width: 900px) { .ms-why { grid-template-columns: 1fr; } }

.ms-why__media { position: relative; }
.ms-why__media img { border-radius: var(--ms-radius-lg); box-shadow: var(--ms-shadow-lg); }

/* Flex, not grid: grid stretched the two rows apart inside the circle and left
   a gap between the number and its label. */
.ms-stat {
	position: absolute;
	right: -1rem;
	bottom: -1.75rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .1rem;
	width: 148px; height: 148px;
	padding: .5rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--ms-shadow-lg);
	text-align: center;
}
.ms-stat__num {
	font-family: var(--ms-font-display);
	font-weight: 800;
	font-size: 2.4rem;
	line-height: 1;
	color: var(--ms-green-700);
	letter-spacing: -.04em;
}
.ms-stat__label { font-size: .8125rem; line-height: 1.25; color: var(--ms-muted); max-width: 7.5rem; }
@media (max-width: 520px) {
	.ms-stat { width: 116px; height: 116px; right: 0; }
	.ms-stat__num { font-size: 1.9rem; }
}

.ms-checks { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .8rem; }
.ms-checks li { display: flex; align-items: flex-start; gap: .7rem; }
.ms-checks svg {
	flex: none;
	width: 20px; height: 20px;
	padding: 3px;
	border-radius: 50%;
	background: var(--ms-green-50);
	color: var(--ms-green-700);
	margin-top: .15rem;
}

/* ==========================================================================
   6. Locations
   ========================================================================== */

.ms-locs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 820px) { .ms-locs { grid-template-columns: 1fr; } }

.ms-locCard {
	display: grid;
	grid-template-columns: 1fr 200px;
	background: #fff;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	overflow: hidden;
}
@media (max-width: 520px) { .ms-locCard { grid-template-columns: 1fr; } }

.ms-locCard__body { padding: 1.5rem; }
.ms-locCard__city {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: 0 0 .5rem;
	font-size: 1.15rem;
}
.ms-locCard__city svg { width: 17px; height: 17px; color: var(--ms-green-600); }
.ms-locCard__addr { margin: 0; font-size: .95rem; color: var(--ms-body); }
.ms-locCard__venue { color: var(--ms-muted); }
.ms-locCard__note { margin: .75rem 0 0; font-size: .8125rem; color: var(--ms-muted); line-height: 1.55; }

/* Map facade — the real Google iframe is only injected on click, so the page
   ships no third-party frames. Styled as a stylised street grid so it reads as
   a map waiting to open rather than a broken image. */
.ms-map {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: 172px;
	padding: 1rem;
	border: 0;
	border-left: 1px solid var(--ms-line);
	cursor: pointer;
	background-color: var(--ms-green-50);
	background-image:
		linear-gradient(var(--ms-white) 1.5px, transparent 1.5px),
		linear-gradient(90deg, var(--ms-white) 1.5px, transparent 1.5px),
		linear-gradient(115deg, transparent 44%, var(--ms-white) 44% 52%, transparent 52%);
	background-size: 26px 26px, 26px 26px, 100% 100%;
	transition: background-color .18s ease;
}
.ms-map:hover { background-color: var(--ms-green-100); }
@media (max-width: 520px) { .ms-map { border-left: 0; border-top: 1px solid var(--ms-line); } }

/* When a real static map image is present, it replaces the stylised grid and
   the label drops to the corner so the map reads clearly. The pin sits dead
   centre because each image is centred on its clinic's coordinates. */
.ms-map--img {
	background-color: var(--ms-green-50);
	background-image: none;
	background-size: cover;
	background-position: center;
	justify-content: flex-end;
	padding: .8rem;
}
.ms-map--img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(14, 69, 39, .28), transparent 45%);
	transition: background .18s ease;
}
.ms-map--img:hover::after { background: linear-gradient(to top, rgba(14, 69, 39, .12), transparent 55%); }

.ms-map__pin {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: var(--ms-green-700);
	color: #fff;
	box-shadow: var(--ms-shadow-md);
	transition: transform .18s ease;
}
.ms-map:hover .ms-map__pin { transform: translateY(-2px); }
.ms-map__pin svg { width: 18px; height: 18px; }

/* Pin centred over the marked location on the static image. */
.ms-map--img .ms-map__pin {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -100%);
	z-index: 1;
}
.ms-map--img:hover .ms-map__pin { transform: translate(-50%, -100%) translateY(-3px); }
.ms-map--img .ms-map__label { position: relative; z-index: 1; }

.ms-map__label {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--ms-line);
	border-radius: 999px;
	padding: .35rem .8rem;
	font-family: var(--ms-font-display);
	font-weight: 700;
	font-size: .75rem;
	color: var(--ms-green-800);
	box-shadow: var(--ms-shadow-sm);
}
.ms-map iframe { width: 100%; height: 100%; min-height: 168px; border: 0; display: block; }
.ms-map.is-loaded { display: block; background: none; cursor: default; }
/* Once the live Google map is injected, drop the static overlay entirely. */
.ms-map--img.is-loaded::after { display: none; }

.ms-locs__mobile {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.5rem;
	font-size: .95rem;
	color: var(--ms-muted);
}
.ms-locs__mobile svg { width: 16px; height: 16px; color: var(--ms-green-600); }

/* ==========================================================================
   7. Article cards
   ========================================================================== */

.ms-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 980px) { .ms-posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ms-posts { grid-template-columns: 1fr; } }

.ms-posts--archive { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* The lead article runs the full width of the grid as a horizontal card, so an
   archive page opens with something other than a uniform wall of tiles. */
.ms-post--feature { grid-column: 1 / -1; }
.ms-post--feature .ms-post__link { flex-direction: row; align-items: stretch; }
.ms-post--feature .ms-post__media { flex: 0 0 46%; aspect-ratio: auto; min-height: 300px; }
.ms-post--feature .ms-post__body { justify-content: center; padding: clamp(1.5rem, 3vw, 2.75rem); gap: .7rem; }
.ms-post--feature .ms-post__title { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem); }
.ms-post--feature .ms-post__excerpt { font-size: 1rem; }

@media (max-width: 780px) {
	.ms-post--feature .ms-post__link { flex-direction: column; }
	.ms-post--feature .ms-post__media { flex: none; aspect-ratio: 3 / 2; min-height: 0; }
}

.ms-post__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	overflow: hidden;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}
.ms-post__link:hover { transform: translateY(-3px); box-shadow: var(--ms-shadow-lg); }

.ms-post__media { aspect-ratio: 3 / 2; background: var(--ms-green-50); overflow: hidden; }
.ms-post__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 25%;
	transition: transform .4s ease;
}
.ms-post__link:hover .ms-post__media img { transform: scale(1.04); }
.ms-post__placeholder { display: grid; place-items: center; height: 100%; color: var(--ms-green-300); }
.ms-post__placeholder svg { width: 34px; height: 34px; }

.ms-post__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.35rem; flex: 1 1 auto; }
.ms-post__date { font-size: .8125rem; color: var(--ms-muted); }
.ms-post__title { font-size: 1.1rem; margin: 0; }
.ms-post__excerpt { font-size: .925rem; color: var(--ms-muted); margin: 0; flex: 1 1 auto; }
.ms-post__more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--ms-font-display);
	font-weight: 700;
	font-size: .875rem;
	color: var(--ms-green-700);
}
.ms-post__more svg { width: 14px; height: 14px; transition: transform .18s ease; }
.ms-post__link:hover .ms-post__more svg { transform: translateX(3px); }

/* ==========================================================================
   8. Inner pages
   ========================================================================== */

/* -- page hero ------------------------------------------------------------
   Two columns when the page has a featured image, so the title block and the
   image share the full container width instead of stacking into dead space. */
.ms-pageHero {
	background: var(--ms-surface);
	border-bottom: 1px solid var(--ms-line);
	overflow: hidden;
}
.ms-pageHero__inner { padding-block: clamp(2.25rem, 5vw, 4rem); }

.ms-pageHero--media .ms-pageHero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (max-width: 860px) {
	.ms-pageHero--media .ms-pageHero__inner { grid-template-columns: 1fr; }
	.ms-pageHero__media { display: none; }
}

.ms-pageHero__copy { max-width: 46rem; }
.ms-pageHero h1 {
	margin: .5rem 0 0;
	font-weight: 800;
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem);
	letter-spacing: -.035em;
}
.ms-pageHero__lead {
	margin-top: 1rem;
	font-size: 1.1rem;
	line-height: 1.65;
	color: var(--ms-body);
	max-width: 56ch;
}
.ms-pageHero__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }

/* Contact page: details card in place of a decorative portrait. */
.ms-contactCard {
	background: #fff;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	padding: clamp(1.35rem, 3vw, 1.9rem);
	box-shadow: var(--ms-shadow-md);
}
.ms-contactCard__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.05rem; }
.ms-contactCard__list li { display: flex; align-items: flex-start; gap: .85rem; font-size: 1rem; }
.ms-contactCard__list svg {
	flex: none;
	width: 34px; height: 34px;
	padding: 9px;
	border-radius: 11px;
	background: var(--ms-green-50);
	color: var(--ms-green-700);
}
.ms-contactCard__list > li > span { display: grid; gap: .1rem; min-width: 0; }
.ms-contactCard__label {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ms-muted);
}
.ms-contactCard__list a {
	color: var(--ms-ink);
	font-family: var(--ms-font-display);
	font-weight: 700;
	text-decoration: none;
	word-break: break-word;
}
.ms-contactCard__list a:hover { color: var(--ms-green-700); }

.ms-contactCard__licences {
	margin: 1.35rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--ms-line);
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--ms-muted);
}
/* Licence numbers are reference data — set them as data. */
.ms-contactCard__nums {
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	color: var(--ms-body);
}

.ms-pageHero__media { margin: 0; }
/* No crop at all. Any fixed aspect ratio eventually decapitates someone or
   slices the title off a poster — the Psühholoog image is both. Letting the
   image keep its own proportions costs a little vertical consistency and
   guarantees nothing important is ever cut. */
.ms-pageHero__media img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 440px;
	margin-inline: auto;
	border-radius: var(--ms-radius-lg);
	box-shadow: var(--ms-shadow-lg);
}

/* -- two-column body ------------------------------------------------------
   Content keeps a readable measure; the sticky sidebar occupies the rest of
   the container. This is what fills the width — not longer lines of text. */
.ms-pageBody {
	display: grid;
	grid-template-columns: minmax(0, 74ch) minmax(280px, 330px);
	justify-content: space-between;
	gap: clamp(2rem, 5vw, 4.5rem);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
@media (max-width: 1024px) {
	.ms-pageBody { grid-template-columns: minmax(0, 1fr); }
}

.ms-pageBody__main { padding-block: 0; max-width: none; }

.ms-aside { min-width: 0; }
.ms-aside__sticky { position: sticky; top: calc(var(--ms-header-h) + 1.5rem); display: grid; gap: 1rem; }
@media (max-width: 1024px) { .ms-aside__sticky { position: static; } }

.ms-aside__title {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ms-muted);
	margin: 0 0 .85rem;
}

.ms-toc {
	padding: 1.35rem;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	background: #fff;
}
.ms-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: .1rem; }
.ms-toc li { counter-increment: toc; }
.ms-toc a {
	display: flex;
	gap: .6rem;
	padding: .45rem .5rem;
	border-radius: 8px;
	font-size: .9rem;
	line-height: 1.4;
	color: var(--ms-body);
	text-decoration: none;
}
.ms-toc a::before {
	content: counter(toc);
	flex: none;
	font-family: var(--ms-font-display);
	font-weight: 700;
	font-size: .75rem;
	color: var(--ms-green-600);
	padding-top: .15rem;
}
.ms-toc a:hover { background: var(--ms-green-50); color: var(--ms-green-800); }

.ms-asideCard {
	padding: 1.35rem;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	background: #fff;
}
.ms-asideCard--cta { background: var(--ms-green-700); border-color: var(--ms-green-700); }
.ms-asideCard--cta .ms-asideCard__title { color: #fff; font-size: 1.15rem; margin: 0 0 .4rem; }
.ms-asideCard--cta p { color: rgba(255, 255, 255, .85); font-size: .9rem; margin: 0 0 1.1rem; }

.ms-asideContact { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; font-size: .925rem; }
.ms-asideContact li { display: flex; align-items: center; gap: .6rem; }
.ms-asideContact svg { width: 16px; height: 16px; flex: none; color: var(--ms-green-600); }
.ms-asideContact a { color: var(--ms-body); text-decoration: none; }
.ms-asideContact a:hover { color: var(--ms-green-700); }

.ms-pageHead {
	background: var(--ms-surface);
	padding-block: clamp(2rem, 5vw, 3.75rem);
	border-bottom: 1px solid var(--ms-line);
}
.ms-pageHead h1 { margin: .35rem 0 0; }
.ms-pageHead__lead { margin-top: .9rem; font-size: 1.075rem; color: var(--ms-muted); max-width: 62ch; }

/* Matches .ms-prose so the heading and the body sit on the same measure. */
.ms-pageHead__narrow { max-width: calc(82ch + 2 * var(--ms-gutter)); }
.ms-pageHead--article .ms-pageHead__narrow { max-width: calc(74ch + 2 * var(--ms-gutter)); }
.ms-pageHead--article h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }

.ms-crumbs { font-size: .8125rem; color: var(--ms-muted); }
.ms-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.ms-crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--ms-line); }
.ms-crumbs a { color: var(--ms-muted); text-decoration: none; }
.ms-crumbs a:hover { color: var(--ms-green-700); }

.ms-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin-top: .9rem;
	font-size: .875rem;
	color: var(--ms-muted);
}
.ms-meta__tags { display: inline-flex; flex-wrap: wrap; gap: .5rem; }
.ms-meta__tags a {
	background: var(--ms-green-50);
	color: var(--ms-green-800);
	padding: .2rem .6rem;
	border-radius: 999px;
	font-size: .75rem;
	text-decoration: none;
}

/* -- long-form content ---------------------------------------------------
   Centred, not left-hugging. A text column still needs a readable measure —
   full-width prose at 1240px is unreadable — but left-aligning it inside a
   wide container just looks like a layout bug, which is what it was. */
.ms-prose {
	max-width: 82ch;
	margin-inline: auto;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.ms-prose--narrow { max-width: 74ch; }

.ms-prose > * + * { margin-top: 1.15em; }

/* Section headings sit on a rule with a green tick in the margin, so scanning
   the page shows where each section starts without needing coloured bands. */
.ms-prose h2,
.ms-prose h3 {
	position: relative;
	scroll-margin-top: calc(var(--ms-header-h) + 1.5rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--ms-line);
	font-weight: 800;
	letter-spacing: -.025em;
}
.ms-prose h2::after,
.ms-prose h3::after {
	content: "";
	position: absolute;
	top: -1px; left: 0;
	width: 42px; height: 3px;
	border-radius: 3px;
	background: var(--ms-green-500);
}
.ms-prose h2 { font-size: clamp(1.45rem, 1.1rem + 1.3vw, 1.95rem); margin-top: 2.6em; }
.ms-prose h3 { font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem); margin-top: 2.2em; }

/* The first heading follows the lead paragraph — no rule needed there. */
.ms-prose > h2:first-child,
.ms-prose > h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ms-prose > h2:first-child::after,
.ms-prose > h3:first-child::after { display: none; }

.ms-prose h4, .ms-prose h5 { margin-top: 1.6em; font-size: 1.05rem; }

/* h6 is used as an eyebrow above a section heading in the imported content. */
.ms-prose h6 {
	margin-top: 2.4em;
	margin-bottom: -.9em;
	color: var(--ms-green-700);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .75rem;
	font-weight: 700;
}
.ms-prose h6 + h2,
.ms-prose h6 + h3 { border-top: 0; padding-top: 0; margin-top: 1.1em; }
.ms-prose h6 + h2::after,
.ms-prose h6 + h3::after { display: none; }

/* Opening paragraph reads as a lead. */
.ms-prose > p:first-of-type { font-size: 1.1rem; line-height: 1.7; color: var(--ms-ink); }

.ms-prose img {
	border-radius: var(--ms-radius-lg);
	margin-block: 2rem;
	box-shadow: var(--ms-shadow-md);
}

/* Document downloads — the imported pages link straight to PDFs. */
.ms-prose a[href$=".pdf"] {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .7rem 1.1rem;
	margin-top: .35rem;
	background: var(--ms-green-50);
	border: 1px solid var(--ms-green-200);
	border-radius: 999px;
	font-family: var(--ms-font-display);
	font-weight: 700;
	font-size: .875rem;
	color: var(--ms-green-800);
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}
.ms-prose a[href$=".pdf"]::before { content: "\2193"; font-size: 1rem; line-height: 1; }
.ms-prose a[href$=".pdf"]:hover { background: var(--ms-green-100); border-color: var(--ms-green-400); }
.ms-prose figure { margin: 1.75rem 0; }
.ms-prose figcaption { font-size: .8125rem; color: var(--ms-muted); margin-top: .5rem; }
.ms-prose__hero img { width: 100%; }

.ms-prose ul, .ms-prose ol { padding-left: 0; list-style: none; display: grid; gap: .6rem; }
.ms-prose ol { counter-reset: ms; }
.ms-prose li { position: relative; padding-left: 1.85rem; }
.ms-prose ul > li::before {
	content: "";
	position: absolute;
	left: .35rem; top: .72em;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--ms-green-500);
}
.ms-prose ol > li { counter-increment: ms; }
.ms-prose ol > li::before {
	content: counter(ms);
	position: absolute;
	left: 0; top: .12em;
	width: 1.35rem; height: 1.35rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ms-green-50);
	color: var(--ms-green-800);
	font-family: var(--ms-font-display);
	font-weight: 700;
	font-size: .75rem;
}

.ms-prose a { color: var(--ms-green-700); font-weight: 500; }
.ms-prose strong { color: var(--ms-ink); }
.ms-prose blockquote {
	margin: 1.75rem 0;
	padding: 1.1rem 1.4rem;
	border-left: 3px solid var(--ms-green-500);
	background: var(--ms-green-50);
	border-radius: 0 var(--ms-radius) var(--ms-radius) 0;
	color: var(--ms-ink);
}
.ms-prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--ms-radius); }

/* Estonian compounds ("töötervishoiuteenuse") overflow narrow screens without
   this, and imported tables have no wrapper to scroll inside. */
.ms-prose { overflow-wrap: break-word; }
.ms-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	display: block;
	overflow-x: auto;
	max-width: 100%;
}
.ms-prose th, .ms-prose td { padding: .7rem .9rem; border-bottom: 1px solid var(--ms-line); text-align: left; }
.ms-prose th { font-family: var(--ms-font-display); color: var(--ms-ink); }

/* ==========================================================================
   9. Pagination and 404
   ========================================================================== */

.pagination,
ul.page-numbers {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .4rem;
	list-style: none;
	margin: 0;
	padding: 0 0 3rem;
}
ul.page-numbers li { display: flex; }

.pagination .page-numbers,
ul.page-numbers .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px; height: 42px;
	padding-inline: .6rem;
	border: 1px solid var(--ms-line);
	border-radius: 10px;
	font-family: var(--ms-font-display);
	font-weight: 600;
	font-size: .9rem;
	color: var(--ms-ink);
	text-decoration: none;
}
.pagination .page-numbers:hover,
ul.page-numbers .page-numbers:hover { border-color: var(--ms-green-500); background: var(--ms-green-50); }

.pagination .page-numbers.current,
ul.page-numbers .page-numbers.current {
	background: var(--ms-green-700);
	border-color: var(--ms-green-700);
	color: #fff;
}

.ms-404 { max-width: 58ch; }
.ms-404 h1 { margin-top: .4rem; }

/* ==========================================================================
   10. Booking page
   ========================================================================== */

.ms-booking { padding-block: clamp(2.5rem, 5vw, 4.5rem); max-width: 980px; }

.ms-bookStep { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 1.5rem; }
.ms-bookStep__body { padding-bottom: 3rem; }
.ms-bookStep--last .ms-bookStep__body { padding-bottom: 0; }
.ms-bookStep__body h2 { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.7rem); margin: .35rem 0 1.25rem; }

/* Numbered rail joining the three steps. */
.ms-bookStep__num {
	position: relative;
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--ms-green-700);
	color: #fff;
	font-family: var(--ms-font-display);
	font-weight: 800;
	font-size: 1.35rem;
}
.ms-bookStep:not(.ms-bookStep--last) .ms-bookStep__num::after {
	content: "";
	position: absolute;
	top: 100%; left: 50%;
	width: 2px;
	height: calc(100% + 3rem);
	transform: translateX(-50%);
	background: var(--ms-green-200);
}
@media (max-width: 620px) {
	.ms-bookStep { grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; }
	.ms-bookStep__num { width: 44px; height: 44px; font-size: 1.1rem; }
}

.ms-bookList { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.ms-bookList li { display: flex; align-items: flex-start; gap: .75rem; }
.ms-bookList svg {
	flex: none;
	width: 22px; height: 22px;
	padding: 4px;
	border-radius: 50%;
	background: var(--ms-green-50);
	color: var(--ms-green-700);
	margin-top: .1rem;
}

/* Declaration download */
.ms-bookDecl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: clamp(1.25rem, 3vw, 1.85rem);
	background: var(--ms-green-50);
	border: 1px solid var(--ms-green-200);
	border-radius: var(--ms-radius-lg);
}
.ms-bookDecl h2 { margin: 0; font-size: 1.15rem; }
.ms-bookDecl p { margin: .3rem 0 0; font-size: .925rem; color: var(--ms-muted); }

/* Clinic picker — the conversion point, so these are cards not links. */
.ms-clinics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 720px) { .ms-clinics { grid-template-columns: 1fr; } }

.ms-clinic {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	align-items: center;
	gap: .35rem 1rem;
	padding: 1.35rem;
	background: #fff;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ms-clinic:hover {
	transform: translateY(-3px);
	box-shadow: var(--ms-shadow-lg);
	border-color: var(--ms-green-300);
}

.ms-clinic__icon {
	grid-row: span 2;
	align-self: start;
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: 14px;
	background: var(--ms-green-50);
	color: var(--ms-green-700);
}
.ms-clinic__icon svg { width: 20px; height: 20px; }
.ms-clinic--alt .ms-clinic__icon { background: var(--ms-blue-tint); color: var(--ms-blue); }

.ms-clinic__body { display: grid; gap: .15rem; }
.ms-clinic__city {
	font-family: var(--ms-font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--ms-ink);
}
.ms-clinic__addr { font-size: .875rem; color: var(--ms-muted); }

.ms-clinic__go {
	grid-column: 2;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .5rem;
	font-family: var(--ms-font-display);
	font-weight: 700;
	font-size: .875rem;
	color: var(--ms-green-700);
}
.ms-clinic__go svg { width: 14px; height: 14px; transition: transform .18s ease; }
.ms-clinic:hover .ms-clinic__go svg { transform: translateX(3px); }

.ms-bookNote {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.25rem;
	font-size: .8125rem;
	color: var(--ms-muted);
}
.ms-bookNote svg { width: 15px; height: 15px; flex: none; color: var(--ms-green-600); }

/* ==========================================================================
   19. Silmakeskus — structured service page
   ========================================================================== */

/* Non-linking service card (no hover-lift, no arrow). */
.ms-card--static { cursor: default; }
.ms-card--static:hover { transform: none; box-shadow: none; border-color: var(--ms-line); }
.ms-card--static:hover::before { transform: scaleY(0); }

/* -- full-bleed dark green equipment band -------------------------------- */
.ms-band {
	background: var(--ms-green-800);
	color: rgba(255, 255, 255, .9);
	padding-block: clamp(3rem, 6vw, 5rem);
}
.ms-band__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (max-width: 900px) { .ms-band__inner { grid-template-columns: 1fr; } }

.ms-band__media { position: relative; }
.ms-band__media img { width: 100%; border-radius: var(--ms-radius-lg); display: block; }

.ms-band__stat {
	position: absolute;
	right: -1rem; bottom: -1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 132px; height: 132px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--ms-shadow-lg);
	text-align: center;
}
.ms-band__statNum {
	font-family: var(--ms-font-display);
	font-weight: 800;
	font-size: 2.2rem;
	line-height: 1;
	color: var(--ms-green-700);
	letter-spacing: -.04em;
}
.ms-band__statLabel { font-size: .75rem; color: var(--ms-muted); max-width: 6.5rem; margin-top: .2rem; }
@media (max-width: 520px) { .ms-band__stat { width: 104px; height: 104px; right: 0; } .ms-band__statNum { font-size: 1.7rem; } }

.ms-band__copy h2 { color: #fff; }
.ms-band__copy .ms-eyebrow { color: rgba(255, 255, 255, .85); }
.ms-band__copy .ms-eyebrow::before { background: var(--ms-green-300); }
.ms-band__copy p { color: rgba(255, 255, 255, .8); }

.ms-band__tags { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.ms-band__tags li {
	display: inline-flex;
	align-items: center;
	padding: .4rem .9rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .25);
	background: rgba(255, 255, 255, .06);
	font-family: var(--ms-font-display);
	font-weight: 600;
	font-size: .8125rem;
	color: #fff;
}

/* -- monitor-worker benefit ---------------------------------------------- */
.ms-benefit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
@media (max-width: 860px) { .ms-benefit { grid-template-columns: 1fr; } }

.ms-benefit__intro h2 { margin: .5rem 0 1rem; }
.ms-benefit__intro > p { color: var(--ms-muted); }

.ms-perks { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.ms-perk {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem 1rem;
	border-radius: 999px;
	background: var(--ms-green-50);
	color: var(--ms-green-800);
	font-family: var(--ms-font-display);
	font-weight: 700;
	font-size: .8125rem;
}
.ms-perk svg { width: 14px; height: 14px; color: var(--ms-green-600); }

/* Numbered benefit list as a stacked card set. */
.ms-benefit__points { list-style: none; margin: 0; padding: 0; counter-reset: ben; display: grid; gap: 1rem; }
.ms-benefit__points li {
	counter-increment: ben;
	position: relative;
	padding: 1.25rem 1.35rem 1.25rem 3.6rem;
	background: #fff;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	font-size: .95rem;
	color: var(--ms-body);
}
.ms-benefit__points li::before {
	content: counter(ben);
	position: absolute;
	left: 1.1rem; top: 1.15rem;
	width: 1.9rem; height: 1.9rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--ms-green-700);
	color: #fff;
	font-family: var(--ms-font-display);
	font-weight: 800;
	font-size: .9rem;
}

/* -- pricing table ------------------------------------------------------- */
.ms-pricing { max-width: 780px; }
.ms-priceList {
	background: #fff;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	overflow: hidden;
}
.ms-priceRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.25rem clamp(1.25rem, 3vw, 1.85rem);
}
.ms-priceRow + .ms-priceRow { border-top: 1px solid var(--ms-line); }

.ms-priceRow__info { display: grid; gap: .2rem; min-width: 0; }
.ms-priceRow__name {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
	font-family: var(--ms-font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--ms-ink);
}
.ms-priceRow__tag {
	display: inline-flex;
	padding: .1rem .5rem;
	border-radius: 999px;
	background: var(--ms-green-600);
	color: #fff;
	font-size: .65rem;
	font-weight: 800;
	letter-spacing: .08em;
}
.ms-priceRow__note { font-size: .875rem; color: var(--ms-muted); }
.ms-priceRow__price {
	flex: none;
	font-family: var(--ms-font-display);
	font-weight: 800;
	font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
	color: var(--ms-green-700);
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.ms-priceNote {
	margin: 1.5rem 0 0;
	text-align: center;
	font-size: .95rem;
	color: var(--ms-muted);
}
.ms-priceNote a { color: var(--ms-green-700); font-weight: 600; white-space: nowrap; }

/* ==========================================================================
   20. Töötajale — stepper, downloads, accordion
   ========================================================================== */

.ms-stepWrap { max-width: 820px; }

/* Numbered stepper with a connecting rail. */
.ms-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ms-step {
	position: relative;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
}
.ms-step__num {
	position: relative;
	z-index: 1;
	display: grid; place-items: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--ms-green-700);
	color: #fff;
	font-family: var(--ms-font-display);
	font-weight: 800;
	font-size: 1.4rem;
}
/* rail between numbers */
.ms-step:not(:last-child) .ms-step__num::after {
	content: "";
	position: absolute;
	top: 56px; left: 50%;
	width: 2px; height: calc(100% + 1rem);
	transform: translateX(-50%);
	background: var(--ms-green-200);
}
.ms-step__body {
	background: #fff;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	padding: 1.25rem 1.5rem;
}
.ms-step__body h3 { margin: 0 0 .35rem; font-size: 1.2rem; }
.ms-step__body p { margin: 0; color: var(--ms-muted); font-size: .95rem; }
@media (max-width: 560px) {
	.ms-step { grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; }
	.ms-step__num { width: 44px; height: 44px; font-size: 1.1rem; }
	.ms-step:not(:last-child) .ms-step__num::after { top: 44px; }
}

/* -- document downloads --------------------------------------------------- */
.ms-docs {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
@media (max-width: 780px) { .ms-docs { grid-template-columns: 1fr; } }
.ms-docs__intro h2 { margin: .5rem 0 .5rem; }
.ms-docs__intro p { margin: 0; color: var(--ms-muted); }

.ms-docs__list { display: grid; gap: .75rem; }
.ms-doc {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.35rem;
	background: #fff;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius);
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}
.ms-doc:hover { border-color: var(--ms-green-400); transform: translateY(-2px); }
.ms-doc__icon {
	display: grid; place-items: center;
	width: 44px; height: 44px;
	border-radius: 12px;
	background: var(--ms-green-50);
	color: var(--ms-green-700);
}
.ms-doc__icon svg { width: 20px; height: 20px; }
.ms-doc__name { font-family: var(--ms-font-display); font-weight: 700; color: var(--ms-ink); font-size: .975rem; }
.ms-doc__action {
	font-family: var(--ms-font-display);
	font-weight: 700;
	font-size: .8125rem;
	color: var(--ms-green-700);
	white-space: nowrap;
}

/* -- accordion ------------------------------------------------------------ */
.ms-prep { max-width: 820px; }
.ms-accordion { display: grid; gap: .75rem; }
.ms-acc {
	background: #fff;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius);
	overflow: hidden;
}
.ms-acc[open] { border-color: var(--ms-green-300); }
.ms-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.35rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--ms-font-display);
	font-weight: 700;
	color: var(--ms-ink);
}
.ms-acc__head::-webkit-details-marker { display: none; }
.ms-acc__title { font-size: 1.05rem; }
.ms-acc__sign { position: relative; flex: none; width: 18px; height: 18px; }
.ms-acc__sign::before,
.ms-acc__sign::after {
	content: "";
	position: absolute;
	background: var(--ms-green-700);
	transition: opacity .2s ease, transform .2s ease;
}
.ms-acc__sign::before { top: 8px; left: 0; width: 18px; height: 2px; }
.ms-acc__sign::after  { top: 0; left: 8px; width: 2px; height: 18px; }
.ms-acc[open] .ms-acc__sign::after { opacity: 0; transform: rotate(90deg); }
.ms-acc__body { padding: 0 1.35rem 1.25rem; }
.ms-acc__body p { margin: 0; color: var(--ms-body); font-size: .95rem; line-height: 1.65; }

.ms-prep__outro {
	margin: 1.75rem 0 0;
	text-align: center;
	font-family: var(--ms-font-display);
	font-weight: 700;
	color: var(--ms-green-700);
}

/* ==========================================================================
   21. Tööandjale — lead, checklist, outcome band
   ========================================================================== */

.ms-lead { max-width: 760px; }
.ms-lead h2 { margin: .5rem 0 .75rem; }
.ms-lead > p { font-size: 1.1rem; line-height: 1.7; color: var(--ms-body); }

/* Provider-selection checklist: two-column numbered cards. */
.ms-checklist {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
@media (max-width: 780px) { .ms-checklist { grid-template-columns: 1fr; } }

.ms-checkItem {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 1rem;
	padding: 1.35rem;
	background: #fff;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
}
.ms-checkItem__num {
	display: grid; place-items: center;
	width: 42px; height: 42px;
	border-radius: 12px;
	background: var(--ms-green-50);
	color: var(--ms-green-700);
	font-family: var(--ms-font-display);
	font-weight: 800;
	font-size: 1.15rem;
}
.ms-checkItem h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.ms-checkItem p { margin: 0; font-size: .925rem; color: var(--ms-muted); }

/* Inline document link inside a step body. */
.ms-doc--inline { margin-top: 1rem; }

/* -- outcome band (goals + result on dark green) ------------------------- */
.ms-outcome {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
@media (max-width: 860px) { .ms-outcome { grid-template-columns: 1fr; } }

.ms-outcome__goals h2 { color: #fff; }
.ms-outcome__goals ul { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .85rem; }
.ms-outcome__goals li { display: flex; align-items: flex-start; gap: .7rem; color: rgba(255, 255, 255, .9); }
.ms-outcome__goals svg {
	flex: none;
	width: 22px; height: 22px;
	padding: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	margin-top: .1rem;
}

.ms-outcome__result {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--ms-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}
.ms-outcome__result h3 { color: #fff; margin: 0 0 .6rem; }
.ms-outcome__result p { color: rgba(255, 255, 255, .82); margin: 0; font-size: .95rem; }

.ms-outcome__stats { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1.5rem; }
.ms-outcome__stat { display: flex; flex-direction: column; }
.ms-outcome__statNum {
	font-family: var(--ms-font-display);
	font-weight: 800;
	font-size: 2.6rem;
	line-height: 1;
	color: #fff;
	letter-spacing: -.03em;
}
.ms-outcome__statLabel { font-size: .8125rem; color: rgba(255, 255, 255, .7); margin-top: .3rem; max-width: 9rem; }

/* ==========================================================================
   22. Riskianalüüs — zig-zag, measurement grid, services, training band
   ========================================================================== */

/* Number tag used to mark each numbered offering. */
.ms-numTag {
	display: inline-block;
	font-family: var(--ms-font-display);
	font-weight: 800;
	font-size: 1rem;
	letter-spacing: .05em;
	color: var(--ms-green-600);
	margin-bottom: .5rem;
}
.ms-numTag--light { color: var(--ms-green-300); }

/* -- zig-zag row --------------------------------------------------------- */
.ms-zig {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (max-width: 860px) { .ms-zig { grid-template-columns: 1fr; } .ms-zig__media { order: -1; } }

.ms-zig__copy h2 { margin: .25rem 0 .75rem; }
.ms-zig__copy > p { color: var(--ms-body); }
.ms-zig__note {
	display: flex;
	gap: .75rem;
	margin-top: 1.25rem;
	padding: 1rem 1.2rem;
	background: var(--ms-green-50);
	border-radius: var(--ms-radius);
	font-size: .9rem;
	color: var(--ms-green-900);
}
.ms-zig__note svg { flex: none; width: 20px; height: 20px; color: var(--ms-green-600); margin-top: .1rem; }

.ms-zig__media img { width: 100%; border-radius: var(--ms-radius-lg); box-shadow: var(--ms-shadow-lg); }

/* -- measurement check-grid ---------------------------------------------- */
.ms-measure { margin-top: clamp(2rem, 4vw, 3rem); }
.ms-measure__heading {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ms-muted);
	margin: 0 0 1.1rem;
}
.ms-measure__grid {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem;
}
@media (max-width: 780px) { .ms-measure__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ms-measure__grid { grid-template-columns: 1fr; } }
.ms-measure__grid li {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .85rem 1rem;
	background: #fff;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius);
	font-size: .9rem;
	font-weight: 500;
	color: var(--ms-ink);
}
.ms-measure__grid svg {
	flex: none;
	width: 20px; height: 20px;
	padding: 3px;
	border-radius: 50%;
	background: var(--ms-green-50);
	color: var(--ms-green-700);
}

/* -- specialist services list -------------------------------------------- */
.ms-svc { max-width: 820px; }
.ms-svc__head { margin-bottom: 1.75rem; }
.ms-svc__head h2 { margin: .25rem 0 0; }
.ms-svc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ms-svc__list li {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	padding: 1.1rem 1.35rem;
	background: #fff;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius);
	font-size: 1rem;
	color: var(--ms-body);
	transition: border-color .15s ease, transform .15s ease;
}
.ms-svc__list li:hover { border-color: var(--ms-green-300); transform: translateX(3px); }
.ms-svc__mark {
	flex: none;
	display: grid; place-items: center;
	width: 28px; height: 28px;
	border-radius: 8px;
	background: var(--ms-green-50);
	color: var(--ms-green-700);
	margin-top: -.05rem;
}
.ms-svc__mark svg { width: 15px; height: 15px; }

/* -- training band ------------------------------------------------------- */
.ms-training {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (max-width: 860px) { .ms-training { grid-template-columns: 1fr; } }
.ms-training__copy h2 { color: #fff; margin: .25rem 0 .75rem; }
.ms-training__copy > p { color: rgba(255, 255, 255, .82); margin-bottom: 1.75rem; }

.ms-training__points { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.ms-training__points li { display: flex; align-items: center; gap: .75rem; color: #fff; font-family: var(--ms-font-display); font-weight: 600; }
.ms-training__points svg {
	flex: none;
	width: 24px; height: 24px;
	padding: 5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	color: #fff;
}

/* ==========================================================================
   23. Psühholoog — practitioner profile
   ========================================================================== */

.ms-profile {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}
@media (max-width: 820px) { .ms-profile { grid-template-columns: 1fr; } }

.ms-profile__photo {
	margin: 0;
	position: sticky;
	top: calc(var(--ms-header-h) + 1.5rem);
}
@media (max-width: 820px) { .ms-profile__photo { position: static; } }
.ms-profile__photo img {
	width: 100%;
	border-radius: var(--ms-radius-lg);
	box-shadow: var(--ms-shadow-lg);
	object-fit: cover;
	aspect-ratio: 4 / 5;
	object-position: center 20%;
}

.ms-profile__name { margin: .35rem 0 .1rem; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); }
.ms-profile__role {
	font-family: var(--ms-font-display);
	font-weight: 600;
	color: var(--ms-green-700);
	margin: 0 0 1.5rem;
}
.ms-profile__body > p { color: var(--ms-body); }

.ms-profile__contact {
	margin-top: 1.75rem;
	padding: 1.5rem;
	background: var(--ms-surface);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
}
.ms-profile__note {
	display: inline-block;
	font-family: var(--ms-font-display);
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ms-muted);
	margin-bottom: 1rem;
}
.ms-profile__contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.ms-profile__contact li { display: flex; align-items: center; gap: .75rem; font-size: 1rem; }
.ms-profile__contact svg {
	flex: none;
	width: 34px; height: 34px;
	padding: 9px;
	border-radius: 10px;
	background: var(--ms-green-50);
	color: var(--ms-green-700);
}
.ms-profile__contact a { color: var(--ms-ink); font-family: var(--ms-font-display); font-weight: 700; text-decoration: none; }
.ms-profile__contact a:hover { color: var(--ms-green-700); }

/* -- approach + pull-quote ------------------------------------------------ */
.ms-approach { max-width: 820px; }
.ms-quote {
	margin: 1rem 0 2rem;
	padding: 0 0 0 1.5rem;
	border-left: 3px solid var(--ms-green-500);
	font-family: var(--ms-font-display);
	font-weight: 700;
	font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
	line-height: 1.35;
	letter-spacing: -.02em;
	color: var(--ms-ink);
}
.ms-approach__body { display: grid; gap: 1.1rem; max-width: 68ch; }
.ms-approach__body p { color: var(--ms-body); margin: 0; }

/* ==========================================================================
   24. Töötervishoiuanalüüs
   ========================================================================== */

/* Legal basis list inside the dark band. */
.ms-legalList { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ms-legalList li { display: flex; align-items: flex-start; gap: .6rem; color: rgba(255, 255, 255, .88); font-size: .95rem; }
.ms-legalList svg {
	flex: none; width: 20px; height: 20px; padding: 3px;
	border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; margin-top: .1rem;
}

/* Risk vs analysis comparison. */
.ms-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 780px) { .ms-compare { grid-template-columns: 1fr; } }
.ms-compare__col {
	background: #fff;
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-lg);
	padding: clamp(1.5rem, 3vw, 2rem);
}
.ms-compare__col h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.ms-compare__col > p { color: var(--ms-muted); margin: 0; }
.ms-compare__col--feature { border-color: var(--ms-green-300); box-shadow: var(--ms-shadow-md); }
.ms-compare__col ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.ms-compare__col li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; color: var(--ms-body); }
.ms-compare__col li svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--ms-green-50); color: var(--ms-green-700); margin-top: .1rem; }
.ms-compare__link {
	display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem;
	font-family: var(--ms-font-display); font-weight: 700; font-size: .875rem; color: var(--ms-green-700); text-decoration: none;
}
.ms-compare__link svg { width: 14px; height: 14px; }

/* Data-source grid. */
.ms-sourceGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 820px) { .ms-sourceGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ms-sourceGrid { grid-template-columns: 1fr; } }
.ms-source {
	display: flex; align-items: center; gap: .85rem;
	padding: 1.1rem 1.25rem;
	background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-radius);
	font-size: .95rem; color: var(--ms-ink); font-weight: 500;
}
.ms-source__icon {
	flex: none; display: grid; place-items: center; width: 40px; height: 40px;
	border-radius: 11px; background: var(--ms-green-50); color: var(--ms-green-700);
}
.ms-source__icon svg { width: 19px; height: 19px; }

/* Contains + five-star rating. */
.ms-contains { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (max-width: 860px) { .ms-contains { grid-template-columns: 1fr; } }
.ms-contains__list h2 { margin: .5rem 0 1.25rem; }

.ms-rating {
	position: sticky; top: calc(var(--ms-header-h) + 1.5rem);
	background: var(--ms-green-800);
	color: #fff;
	border-radius: var(--ms-radius-lg);
	padding: clamp(1.75rem, 4vw, 2.5rem);
	text-align: center;
}
@media (max-width: 860px) { .ms-rating { position: static; } }
.ms-rating__stars { display: flex; justify-content: center; gap: .3rem; color: #ffc93c; margin-bottom: 1rem; }
.ms-rating__stars svg { width: 30px; height: 30px; }
.ms-rating h3 { color: #fff; margin: 0 0 .5rem; font-size: 1.35rem; }
.ms-rating p { color: rgba(255, 255, 255, .82); margin: 0; font-size: .95rem; }

/* Audience / frequency info cards. */
.ms-infoCards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 720px) { .ms-infoCards { grid-template-columns: 1fr; } }
.ms-infoCard {
	background: #fff; border: 1px solid var(--ms-line); border-radius: var(--ms-radius-lg);
	padding: clamp(1.5rem, 3vw, 2rem);
}
.ms-infoCard__icon {
	display: grid; place-items: center; width: 48px; height: 48px;
	border-radius: 14px; background: var(--ms-green-50); color: var(--ms-green-700); margin-bottom: 1rem;
}
.ms-infoCard__icon svg { width: 22px; height: 22px; }
.ms-infoCard h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.ms-infoCard p { margin: 0; color: var(--ms-muted); font-size: .95rem; }