/* =========================================================================
   Sunbird Reimagined — Base
   Reset + @font-face + bas-typografi + knappar + utilities.
   Beror på tokens.css (enqueue:as före denna fil).
   Inga effekter utöver Figma (ingen shadow/radius/transition som ej finns i Figma).
   ========================================================================= */

/* --- Self-hostade fonter (variable woff2, roman + italic) ---------------- */
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Italic-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Inter Tight";
	src: url("../fonts/InterTight-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter Tight";
	src: url("../fonts/InterTight-Italic-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* --- Reset (strukturell) ------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Mjuk scroll vid ankar-/hash-navigering (användarbegärt, hela sajten). Ankar-
   målens offset under den fasta headern hanteras av [id]-regeln i header.css.
   Stängs av vid prefers-reduced-motion. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body { margin: 0; }

img, picture, svg, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

/* --- Bas ----------------------------------------------------------------- */
body {
	font-family: var(--font-body);
	font-size: var(--text-body-l);      /* Figma bas/löptext = 18px (Body L) */
	line-height: var(--leading-normal);
	color: var(--color-text);
	background-color: var(--color-bg);
}

/* --- Rubriker -----------------------------------------------------------
   Stil (.display/.h1–.h6) är separerad från tagg så att Heading-klonen kan
   sätta semantisk tagg ≠ visuell stil (t.ex. <h2 class="h3">). */
h1, h2, h3, h4, h5, h6,
.display, .h1, .h2, .h3, .h4, .h5, .h6 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--fw-extrabold);
}

.display          { font-size: var(--text-display); line-height: var(--leading-tight); }
h1, .h1           { font-size: var(--text-h1);      line-height: var(--leading-tight); }
h2, .h2           { font-size: var(--text-h2);      line-height: var(--leading-tight); }
h3, .h3           { font-size: var(--text-h3);      line-height: var(--leading-snug); }
h4, .h4           { font-size: var(--text-h4);      line-height: var(--leading-snug); }
h5, .h5           { font-size: var(--text-h5);      line-height: var(--leading-snug); }
h6, .h6           { font-size: var(--text-h6);      line-height: var(--leading-snug); font-weight: var(--fw-extrabold); }

/* H6 = Bold 700 på desktop, ExtraBold 800 på mobil (Figma). */
@media (min-width: 1024px) {
	h6, .h6 { font-weight: var(--fw-bold); }
}

/* --- Brödtext-stilar ----------------------------------------------------- */
.body-l { font-size: var(--text-body-l); line-height: var(--leading-normal); }
.body-m { font-size: var(--text-body-m); line-height: var(--leading-normal); }
.body-s { font-size: var(--text-body-s); line-height: var(--leading-normal); }

p { margin: 0; }

/* --- Inline-element (enligt styleguide-specimen) ------------------------- */
/* Länk: coral, ingen underline. Default = INGEN hover-effekt (fidelity-kontrakt:
   ingen hover-state om Figma saknar den). Underline-på-hover är opt-in via
   klassen .link-underline på det enskilda <a> där det faktiskt behövs. */
a {
	color: var(--color-link);
	text-decoration: none;
}
.link-underline:hover {
	text-decoration: underline;
	text-underline-position: from-font;
}

strong, b { font-weight: var(--fw-semibold); } /* bold-run = SemiBold 600 (specimen) */
em, i     { font-style: italic; font-weight: var(--fw-regular); }

/* --- Container ----------------------------------------------------------- */
/* Content maxar vid --container-max (1460) men behåller ALLTID gutter. max-width =
   1460 + 2×gutter → inre content = 1460 vid ≥1524, annars viewport−2×gutter. Så
   nuddar innehållet aldrig kanten (gammal bugg i 1460–1524-spannet) och alla
   icke-full-bleed block linjerar mot samma gutter. */
.container {
	width: 100%;
	max-width: calc(var(--container-max) + 2 * var(--container-gutter));
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

/* blog-text-blocket har ingen egen container — i artikel-/info-kolumnen ger
   .single__main bredden. Utanför den (front-page/sidor) saknar blocket maxbredd
   och spänner hela viewporten. Ge det samma container-mått som övriga block så det
   linjerar. Återställs i .single__main (single-article.css) → artiklar/info orörda. */
.blog-text {
	width: 100%;
	max-width: calc(var(--container-max) + 2 * var(--container-gutter));
	margin-inline: auto;
	padding-inline: var(--container-gutter);
	/* Vertikal padding (användarbegärt): fluid 20px (mobil) → 30px (desktop).
	   Samma interpolationsmönster som --padding-* (375 → 1920). Nollställs i
	   .single__main (single-article.css) så artiklar/info behåller sin rytm. */
	padding-block: clamp(1.25rem, calc(1.25rem + 10 * (100vw - 375px) / 1545), 1.875rem);
}

/* blog-image: samma container-fix som .blog-text. I artikel-/info-kolumnen ger
   .single__main bredden (+ bild-bleed i blockets egen CSS); utanför den (front-
   page/sidor) saknar blocket maxbredd och spänner hela viewporten → ge det
   innehållskolumnens mått så det linjerar. Återställs i .single__main
   (single-article.css) → artiklar/info orörda. */
.blog-image {
	width: 100%;
	max-width: calc(var(--container-max) + 2 * var(--container-gutter));
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

/* --- Knappar ------------------------------------------------------------
   Figma CTA (1088:5277). Pill, 16/24-padding, gap 8, ikon 24, text Inter Tight
   SemiBold 16/1.2. "Dark=yes"-varianter = default (ljus bakgrund); "Dark=No"
   = ljusa knappar för mörk sektion → hanteras via .is-dark-kontext, ej toggle. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 24px;
	border: 0;
	border-radius: 100px;
	font-family: var(--font-heading);
	font-weight: var(--fw-semibold);
	font-size: var(--text-button);
	line-height: var(--leading-snug);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	/* Liten hover-transition på begäran av användaren (avsteg från no-effects-policyn). */
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn__icon { width: 24px; height: 24px; flex: none; }
/* Ikoner renderas som-de-är på båda sidor (Figma visar → på både vänster och
   höger ikon). Vill man ha en vänsterpil väljer man ikonen "arrow-left". */

/* Primary: coral-600 → hover coral-500 */
.btn--primary { background-color: var(--color-coral-600); color: var(--color-neutral-100); }
.btn--primary:hover { background-color: var(--color-coral-500); }

/* Secondary: neutral-900 → hover neutral-800 */
.btn--secondary { background-color: var(--color-neutral-900); color: var(--color-neutral-100); }
.btn--secondary:hover { background-color: var(--color-neutral-800); }

/* Tertiary: transparent + 1px border = currentColor (neutral-900); hover = fylld.
   Vertikal padding 15px (ej 16) kompenserar för 1px-bordern → bevarar 56px höjd
   och horisontell bredd-paritet med övriga knappar (Figma: alla 56px höga). */
.btn--tertiary {
	padding: 15px 23px;
	background-color: transparent;
	border: 1px solid currentColor;
	color: var(--color-neutral-900);
}
.btn--tertiary:hover {
	background-color: var(--color-neutral-900);
	color: var(--color-neutral-100);
}

/* Text: ingen sido-padding, ingen underline (på begäran av användaren), neutral-900 */
.btn--text {
	padding-block: 16px;
	padding-inline: 0;
	background-color: transparent;
	color: var(--color-neutral-900);
}

/* Mörk sektion (Figma "Dark=No"-varianter). Idle-states bekräftade;
   hover-states i mörkt läge verifieras mot Figma när de används. */
.is-dark .btn--secondary { background-color: var(--color-neutral-100); color: var(--color-neutral-900); }
.is-dark .btn--tertiary  { color: var(--color-neutral-100); }
.is-dark .btn--text      { color: var(--color-neutral-100); }
/* Primary oförändrad i mörkt läge (coral fungerar på båda bakgrunder). */

/* Disabled (Figma "disabled"). Exakta toner verifieras mot Figma. */
.btn:disabled,
.btn[aria-disabled="true"],
.btn--disabled {
	background-color: var(--color-neutral-300);
	color: var(--color-neutral-400);
	border-color: var(--color-neutral-300);
	pointer-events: none;
}

/* --- Stjärnbetyg (delas av reviews-blocken; renderas av sunbird_render_stars) */
.stars {
	display: inline-flex; /* gap 0 — luften ligger i glyfen (Figma-stripen är 5 tätt satta 32-celler) */
	color: var(--color-star);
}
.stars svg {
	display: block;
	flex: none;
	width: 24px;  /* hero-storlek (Figma 1346:22964); korten overridar till 32px */
	height: 24px;
}
.stars__star--empty {
	color: var(--color-neutral-300); /* betyg < 5: tomma platshållare (användarbeslut 2026-06-11) */
}

/* --- Padding-utilities (sätts på block-wrapper av sunbird_padding_classes) */
.pt-none { padding-top: var(--padding-none); }
.pt-xs   { padding-top: var(--padding-xs); }
.pt-s    { padding-top: var(--padding-s); }
.pt-m    { padding-top: var(--padding-m); }
.pt-l    { padding-top: var(--padding-l); }
.pt-xl   { padding-top: var(--padding-xl); }
.pt-2xl  { padding-top: var(--padding-2xl); }
.pt-3xl  { padding-top: var(--padding-3xl); }

.pb-none { padding-bottom: var(--padding-none); }
.pb-xs   { padding-bottom: var(--padding-xs); }
.pb-s    { padding-bottom: var(--padding-s); }
.pb-m    { padding-bottom: var(--padding-m); }
.pb-l    { padding-bottom: var(--padding-l); }
.pb-xl   { padding-bottom: var(--padding-xl); }
.pb-2xl  { padding-bottom: var(--padding-2xl); }
.pb-3xl  { padding-bottom: var(--padding-3xl); }

/* --- A11y ---------------------------------------------------------------- */
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   Site footer (template-parts/footer/site-footer.php) — Figma 1274:8850 +
   länk-moln 1274:8851. Drivs av Theme Settings → Footer. Två vita sektioner:
   (A) länk-moln (container 1460) + (B) main (p-80, content bredare än molnet —
   avsiktlig skillnad enligt Figma). Endast Figma-värden.
   ========================================================================= */
.site-footer { background-color: #fff; }

/* --- (A) Länk-moln ---------------------------------------------------- */
.site-footer__cloud {
	border-top: 1px solid var(--color-text); /* Figma topp-border #2d2d2b */
	padding-block: var(--padding-m); /* 64→144 (samma clamp som sektions-padding "m") */
}
/* Content maxar vid 1462 (Figma px-229 @1920) men behåller ALLTID gutter (annars
   nuddar molnet skärmkanten i 1462–1526-spannet). max-width = 1462 + 2×gutter. */
.site-footer__cloud-inner.container {
	max-width: calc(1462px + 2 * var(--container-gutter));
}
.site-footer__cloud-inner {
	display: flex;
	flex-wrap: wrap;
	/* row-gap 48 (användarbeslut, grupprad → grupprad); column-gap 24 (Figma, grupp → grupp). */
	gap: 48px 24px;
}
.site-footer__cloud-group {
	display: flex;
	flex-direction: column;
	gap: 34px; /* rubrik → länkar (Figma 58−24) */
}
.site-footer__cloud-heading {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--fw-bold); /* Inter Tight Bold 24 */
	font-size: 1.5rem; /* 24px */
	line-height: 1; /* Figma leading-none */
	min-height: 1em; /* reservera rubrik-raden även när tom → länkar linjerar */
	color: var(--color-text);
}
.site-footer__cloud-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column; /* fyll nedåt, bryt till ny sub-kolumn */
	grid-template-rows: repeat(3, auto); /* 3 länkar/kolumn → 6 = 2×3, 3 = 1×3 */
	grid-auto-columns: 273px; /* Figma kolumnbredd */
	row-gap: 16px; /* Figma */
	column-gap: 24px; /* Figma */
}
.site-footer__cloud-link {
	display: block; /* länken styr radhöjden (20px) → annars ärver <li> 18/1.5 = 27px */
	font-family: var(--font-heading);
	font-weight: var(--fw-regular); /* Inter Tight Regular 20 */
	font-size: 1.25rem; /* 20px */
	line-height: 1; /* Figma leading-none */
	color: var(--color-text);
	transition: color 0.15s ease; /* hover → coral (begärd) */
}
/* EN grupp (site-footer__cloud--single, se site-footer.php): länkarna fylls
   VÅGRÄTT i 5 kolumner (länk 1→kol 1 … länk 5→kol 5, länk 6→kol 1 nästa rad)
   istället för lodrätt 3-rads-kolumner. Endast desktop; mobil (≤768) behåller
   1 kolumn via media-regeln längre ned. Användarbeslut 2026-06-24. */
@media (min-width: 769px) {
	/* Gruppen (flex-item) sträcker sig över HELA bredden så de 5 kolumnerna fyller
	   footern (annars krymper flex-itemet till innehållet → smalt rutnät). */
	.site-footer__cloud--single .site-footer__cloud-group {
		flex: 1 1 100%;
		width: 100%;
	}
	.site-footer__cloud--single .site-footer__cloud-links {
		grid-auto-flow: row;
		grid-template-rows: none;
		grid-auto-columns: auto;
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* --- (B) Footer-main -------------------------------------------------- */
.site-footer__main {
	padding-block: 80px; /* vertikal Figma p-80; horisontellt via inner-containern nedan */
}
.site-footer__main-inner {
	/* Footer-main maxar vid 1760 (Figma p-80 @1920) men behåller gutter → linjerar med
	   sidblocken på skärmar < ~1524 (då båda är viewport−2×gutter), bredare däröver. */
	max-width: calc(1760px + 2 * var(--container-gutter));
	margin-inline: auto;
	padding-inline: var(--container-gutter);
	display: flex;
	flex-direction: column;
	gap: 144px; /* topp → botten (Figma gap-144) */
}
.site-footer__intro {
	display: flex;
	flex-direction: column;
	gap: 48px; /* rubrik → CTA (Figma gap-48) */
}
.site-footer__headline {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--fw-extrabold); /* Display ExtraBold 157 */
	font-size: var(--text-display);
	line-height: 1; /* Figma leading-none */
	color: var(--color-text);
	overflow-wrap: break-word;
	max-width: 100%;
}
.site-footer__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 32px; /* Figma gap-32 (knappar = .btn--primary / .btn--tertiary) */
}

.site-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 80px; /* rad → legal (Figma gap-80) */
}
.site-footer__bottom-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 48px;
}
.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 47px; /* logo → kontakt (Figma gap-47) */
	align-items: flex-start;
}
.site-footer__logo-img { width: 187px; height: auto; } /* Figma 187×47 */
.site-footer__logo--text {
	font-family: var(--font-heading);
	font-weight: var(--fw-extrabold);
	font-size: 1.75rem;
	color: var(--color-text);
}
.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 18px; /* telefon → adress (Figma mb-18) */
	font-family: var(--font-body);
	font-size: var(--text-body-l); /* 18px */
	line-height: var(--leading-normal);
}
.site-footer__phone,
.site-footer__address {
	margin: 0;
	color: var(--color-text);
	text-decoration: none;
	transition: color 0.15s ease; /* telefon: hover → coral (begärd) */
}

.site-footer__nav {
	display: flex;
	gap: 90px; /* kolumn-gap (Figma) */
}
.site-footer__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px; /* item-gap (Figma mb-24) */
}
.site-footer__nav-link {
	display: inline-grid; /* tillåter osynlig spök-kopia (::after) som reserverar fet bredd → ingen layout-shift på hover */
	font-family: var(--font-heading);
	font-size: 2.5rem; /* 40px */
	line-height: var(--leading-snug); /* 1.2 */
	color: var(--color-text);
	text-decoration: none;
	transition: color 0.15s ease;
}
.site-footer__nav-link .site-footer__link-text {
	grid-area: 1 / 1;
	font-weight: var(--fw-regular); /* Inter Tight Regular 40 */
	transition: font-weight 0.15s ease; /* variabel font → mjuk vikt-övergång */
}
.site-footer__nav-link::after {
	content: attr(data-label);
	grid-area: 1 / 1;
	font-weight: var(--fw-extrabold); /* osynlig fet kopia reserverar bredden */
	visibility: hidden;
}
/* Hover (begärd): nav-länk → ExtraBold + understruken (Figma "Tjänster"-state).
   Spök-kopian gör att vikt-ändringen inte flyttar layouten. */
@media (hover: hover) {
	.site-footer__nav-link:hover .site-footer__link-text {
		font-weight: var(--fw-extrabold);
		text-decoration: underline;
		text-underline-position: from-font;
	}
}

.site-footer__legal {
	display: flex;
	flex-direction: column;
	gap: 31px; /* länkrad → bar (Figma gap-31) */
}
.site-footer__legal-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 32px; /* Figma */
}
.site-footer__legal-bar {
	display: flex;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
.site-footer__policy-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 32px;
}
.site-footer__legal-link,
.site-footer__copyright,
.site-footer__policy-link {
	margin: 0;
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--text-body-s); /* 11px */
	line-height: var(--leading-normal);
	color: var(--color-text);
	transition: color 0.15s ease; /* länkar: hover → coral (begärd) */
}
.site-footer__policy-link {
	text-decoration: underline;
	text-underline-position: from-font;
}

/* Hover (begärd): övriga footer-länkar → coral. */
@media (hover: hover) {
	.site-footer__cloud-link:hover,
	.site-footer__phone:hover,
	.site-footer__legal-link:hover,
	.site-footer__policy-link:hover {
		color: var(--color-link);
	}
}

/* --- Footer responsivt (matchat mot mobil-noder 1364:27301 + 1364:26665) --- */
@media (max-width: 1200px) {
	/* Stackar: nav ovanför logo/kontakt (Figma mobil-ordning), gap 64. */
	.site-footer__bottom-row {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 64px;
	}
}
@media (max-width: 768px) {
	/* --- Länk-moln (Figma mobil 1364:26665): en kolumn per grupp --- */
	.site-footer__cloud-inner { flex-direction: column; gap: 32px; } /* grupp → grupp */
	.site-footer__cloud-group { gap: 16px; } /* rubrik → länkar (mobil; desktop 34) */
	.site-footer__cloud-heading:empty { display: none; } /* ingen reserverad tom rubrik på mobil */
	.site-footer__cloud-links {
		grid-auto-flow: row;
		grid-template-rows: none;
		grid-template-columns: 1fr;
		grid-auto-columns: auto;
	}
	/* --- Footer-main (Figma mobil 1364:27301) --- */
	.site-footer__main { padding-block: 40px; } /* horisontellt sköts av inner-containerns gutter (annars dubbel padding) */
	.site-footer__main-inner { gap: 64px; }
	.site-footer__headline { line-height: 1.1; } /* mobil 60px lh1.1 (desktop lh1) */
	.site-footer__ctas { gap: 24px; } /* flex-wrap → stackar på 375 */
	.site-footer__bottom { gap: 64px; }
	/* Nav: en kolumn (de två listorna staplas), 26px, gap 24. */
	.site-footer__nav { flex-direction: column; gap: 24px; }
	.site-footer__nav-link { font-size: 1.625rem; } /* 26px */
	/* Småänkar tightare; copyright ovanför policy-länkar. */
	.site-footer__legal-links { gap: 0px 16px; } /* row-gap 0 vid wrap, kolumn-gap 16px (användarbegärt) */
	.site-footer__legal-bar { flex-direction: column; gap: 24px; }
}

/* =========================================================================
   Case-kort (DELAT) — används av `cases`- och `all-cases`-blocken samt
   REST-endpointen (sunbird_render_case_card). Globalt här så korten har stil
   även på sidor utan cases-blocket. Kvadratiskt kort, full-bleed bakgrund
   (bild/video), innehåll nere till vänster. Endast Figma-värden.
   ========================================================================= */
.cases__item { display: flex; }

.cases__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0 3rem 2.875rem 3rem; /* pb 46px / px 48px — symmetriska sidor (begärt: content hela vägen ut, lika gutter v/h) */
	overflow: hidden;
	color: var(--color-neutral-100); /* vit text på mörk bild */
}

/* Bakgrund (img ELLER video, samma klass). */
.cases__card-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease; /* hover-zoom (begärd) */
}
@media (hover: hover) {
	.cases__card:hover .cases__card-bg { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
	.cases__card-bg { transition: none; }
	.cases__card:hover .cases__card-bg { transform: none; }
}

.cases__card-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.75rem; /* 12px */
	align-self: stretch; /* content hela vägen ut (begärt) — gutter kommer från kortets px-padding, ingen max-width */
}

.cases__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem; /* 8px */
	margin: 0;
	padding: 0;
	list-style: none;
}
.cases__tag {
	padding: 0.5rem 0.75rem; /* 8px 12px */
	background-color: var(--color-neutral-900); /* #2d2d2b */
	border-radius: 100px;
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--text-body-s); /* 11px */
	line-height: var(--leading-normal);
	color: var(--color-neutral-100);
	white-space: nowrap;
}

.cases__card-title {
	margin: 0;
	color: var(--color-neutral-100);
}
.cases__card-result {
	margin: 0;
	font-size: var(--text-body-l); /* 18px */
	line-height: var(--leading-normal);
	color: var(--color-neutral-100);
}
.cases__result-value {
	font-weight: var(--fw-bold); /* 700 (Inter Bold) */
}

@media (max-width: 768px) {
	.cases__card { padding-inline: 2rem; } /* 32px sidor (Figma mobil) — symmetriskt v/h */
}