/* ==========================================================================
   STAR Bento — design system
   Light blue and white palette.
   ========================================================================== */

:root {
	/* Light blue + white. Every text/background pair below was checked for
	   WCAG AA contrast (≥ 4.5:1); --sb-sky never carries text. */
	--sb-ink: #152a3e;
	--sb-ink-soft: #37506a;
	--sb-muted: #586c80;
	--sb-primary: #1b6bb0;        /* buttons, links — white text 5.6:1 */
	--sb-primary-dark: #134f85;
	--sb-accent: #1966aa;         /* eyebrows — ≥ 5:1 on every light surface */
	--sb-sky: #7cc0ef;            /* decoration only */
	--sb-sky-soft: #dcedfb;
	--sb-bg: #f4f9fe;
	--sb-alt: #e6f2fc;
	--sb-surface: #ffffff;
	--sb-line: #d5e6f4;
	--sb-line-strong: #b8d2ea;
	--sb-strip: #ddeefb;
	--sb-foot: #e8f3fc;
	--sb-tint: rgba(27, 107, 176, .08);
	--sb-tint-weak: rgba(27, 107, 176, .035);

	--sb-radius-tile: 28px;
	--sb-radius-card: 20px;
	--sb-radius-sm: 12px;
	--sb-gap: 16px;

	/* The review called out that the old layout stopped scaling on wide screens
	   and left the page half empty. Everything is capped and centred instead. */
	--sb-max: 1440px;
	--sb-pad: clamp(20px, 5vw, 72px);

	--sb-shadow: 0 1px 2px rgba(18, 52, 86, .05), 0 8px 24px rgba(18, 52, 86, .07);
	--sb-shadow-lift: 0 2px 4px rgba(18, 52, 86, .07), 0 16px 40px rgba(18, 52, 86, .12);

	--sb-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* --- reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

/* No overflow-x containment here on purpose: it breaks the sticky header in
   Chromium, and nothing in the layout extends past the viewport any more. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--sb-bg);
	color: var(--sb-ink);
	font-family: var(--sb-font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

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

h1, h2, h3, h4 {
	margin: 0;
	line-height: 1.08;
	letter-spacing: -0.03em;
	font-weight: 700;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
	outline: 3px solid var(--sb-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

.sb-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sb-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--sb-primary);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 10px 0;
	font-weight: 700;
}
.sb-skip:focus { left: 0; }

/* --- layout --------------------------------------------------------------- */

.sb-shell {
	max-width: var(--sb-max);
	margin-inline: auto;
	padding-inline: var(--sb-pad);
}

.sb-section { padding-block: clamp(48px, 7vw, 92px); }
.sb-section--tight { padding-block: clamp(32px, 4vw, 56px); }
.sb-section--alt { background: var(--sb-alt); }

.sb-section-head {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: clamp(24px, 4vw, 60px);
	align-items: end;
	margin-bottom: clamp(24px, 3vw, 42px);
}

.sb-section-head h2 {
	font-size: clamp(30px, 4.2vw, 56px);
	margin-top: 10px;
}

.sb-section-head p {
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.65;
	color: var(--sb-muted);
}

.sb-section-head--simple { grid-template-columns: 1fr; }

@media (max-width: 860px) {
	.sb-section-head { grid-template-columns: 1fr; align-items: start; }
}

.sb-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sb-accent);
}

/* --- buttons -------------------------------------------------------------- */

.sb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 20px;
	border-radius: 10px;
	border: 1px solid transparent;
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.sb-btn--primary { background: var(--sb-primary); color: #fff; }
.sb-btn--primary:hover { background: var(--sb-primary-dark); }

.sb-btn--ghost { border-color: var(--sb-line-strong); color: var(--sb-ink); background: transparent; }
.sb-btn--ghost:hover { border-color: var(--sb-primary); color: var(--sb-primary); }

.sb-btn--light { background: #fff; color: var(--sb-primary); }
.sb-btn--light:hover { background: var(--sb-alt); }

.sb-btn--sm { padding: 9px 14px; font-size: 13px; border-radius: 8px; }

.sb-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	color: var(--sb-primary);
}
.sb-link::after { content: "→"; transition: transform .18s ease; }
.sb-link:hover::after { transform: translateX(3px); }

/* --- header --------------------------------------------------------------- */

.sb-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--sb-line);
}

.sb-header__inner {
	max-width: var(--sb-max);
	margin-inline: auto;
	padding: 10px var(--sb-pad);
	display: flex;
	align-items: center;
	gap: 24px;
	/* Reserving the row height keeps the logo swap from shifting the page (CLS). */
	min-height: 72px;
}

.sb-brand { display: flex; align-items: center; flex: 0 0 auto; }
/* Intrinsic ratio is 356×115; the box is fixed so the header never reflows. */
.sb-brand img { width: 174px; height: 56px; object-fit: contain; object-position: left center; }

@media (max-width: 480px) {
	.sb-brand img { width: 140px; height: 45px; }
}

.sb-nav { margin-left: auto; }
.sb-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.sb-nav__list > li { position: relative; }

.sb-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 10px 12px;
	border-radius: 9px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sb-ink-soft);
	white-space: nowrap;
}

.sb-nav__list > li > a:hover,
.sb-nav__list > li.current-menu-item > a,
.sb-nav__list > li.current-menu-ancestor > a {
	background: var(--sb-alt);
	color: var(--sb-primary);
}

.sb-nav__list > li.menu-item-has-children > a::after {
	content: "";
	width: 6px; height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .55;
}

/* dropdown */
.sb-nav .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 280px;
	list-style: none;
	margin: 0;
	padding: 10px;
	background: var(--sb-surface);
	border: 1px solid var(--sb-line);
	border-radius: 18px;
	box-shadow: var(--sb-shadow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.sb-nav__list > li:hover > .sub-menu,
.sb-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.sb-nav .sub-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--sb-ink-soft);
}
.sb-nav .sub-menu a:hover { background: var(--sb-alt); color: var(--sb-primary); }

.sb-nav .sub-menu .current-menu-item > a { color: var(--sb-primary); }

.sb-header__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.sb-lang {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	border-radius: 9px;
	background: var(--sb-alt);
	font-size: 12px;
	font-weight: 800;
}
.sb-lang a { padding: 5px 8px; border-radius: 6px; color: var(--sb-muted); }
.sb-lang a:hover { color: var(--sb-primary); }
.sb-lang .is-active { background: var(--sb-surface); color: var(--sb-primary); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.sb-burger {
	display: none;
	width: 44px; height: 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--sb-line-strong);
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
}
.sb-burger span {
	display: block;
	width: 18px; height: 2px;
	background: var(--sb-ink);
	position: relative;
}
.sb-burger span::before,
.sb-burger span::after {
	content: ""; position: absolute; left: 0;
	width: 18px; height: 2px; background: var(--sb-ink);
}
.sb-burger span::before { top: -6px; }
.sb-burger span::after { top: 6px; }

@media (max-width: 1340px) {
	.sb-burger { display: inline-flex; }

	/* backdrop-filter makes the header a containing block for fixed-position
	   descendants, which trapped the menu panel inside the 72px header strip.
	   The blur is a desktop flourish; drop it where the panel lives. */
	.sb-header { backdrop-filter: none; background: var(--sb-surface); }

	.sb-nav {
		position: fixed;
		inset: 72px 0 0 0;
		margin: 0;
		background: var(--sb-surface);
		overflow-y: auto;
		padding: 16px var(--sb-pad) 48px;
		border-top: 1px solid var(--sb-line);
		/* The panel never leaves the viewport box: parking it at
		   translateX(100%) made the document 2x wider than the screen and let
		   phones pan sideways. It fades and lifts in place instead, and stays
		   out of the tab order while closed. */
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .2s ease, transform .2s ease, visibility .2s;
	}
	body.sb-nav-open .sb-nav { opacity: 1; visibility: visible; transform: translateY(0); }
	body.sb-nav-open { overflow: hidden; }
	.sb-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
	.sb-nav__list > li > a { font-size: 17px; padding: 14px 12px; justify-content: space-between; }
	.sb-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--sb-line);
		border-radius: 0;
		margin: 0 0 8px 12px;
		padding: 0 0 0 8px;
		min-width: 0;
	}
	.sb-header__actions .sb-btn--starnet { display: none; }
}

/* --- bento grid ----------------------------------------------------------- */

.sb-bento {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sb-gap);
}

.sb-tile {
	position: relative;
	background: var(--sb-surface);
	border-radius: var(--sb-radius-tile);
	padding: clamp(20px, 2.2vw, 30px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--sb-shadow);
	transition: box-shadow .2s ease, transform .2s ease;
}

a.sb-tile:hover,
.sb-tile--link:hover { box-shadow: var(--sb-shadow-lift); transform: translateY(-2px); }

.sb-tile--w2 { grid-column: span 2; }
.sb-tile--w3 { grid-column: span 3; }
.sb-tile--w4 { grid-column: 1 / -1; }
.sb-tile--h2 { grid-row: span 2; }

/* On the blue tile secondary text stays near-opaque: translucent white
   measured 3.7:1 against --sb-primary. */
.sb-tile--ink { background: var(--sb-primary); color: #fff; }
.sb-tile--ink .sb-eyebrow { color: #fff; }
.sb-tile--ink .sb-link { color: #fff; }

.sb-tile--dark { background: var(--sb-sky-soft); color: var(--sb-ink); }
.sb-tile--dark .sb-eyebrow { color: var(--sb-accent); }
.sb-tile--dark .sb-link { color: var(--sb-primary); }
.sb-tile--dark p { color: var(--sb-muted) !important; }
.sb-tile--ink p { color: rgba(255, 255, 255, .94) !important; }

.sb-tile--alt { background: var(--sb-alt); }

/* the hero tile */
.sb-tile--hero { justify-content: center; min-height: 340px; }
.sb-tile--hero h1 {
	font-size: clamp(34px, 4.6vw, 64px);
	letter-spacing: -.045em;
	margin: 14px 0 16px;
	max-width: 15ch;
}
.sb-tile--hero p {
	font-size: clamp(15px, 1.3vw, 18px);
	color: var(--sb-muted);
	max-width: 52ch;
	line-height: 1.65;
}
.sb-tile__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* number tile */
.sb-tile--stat { justify-content: center; gap: 2px; min-height: 150px; }
.sb-stat__value {
	font-size: clamp(38px, 4vw, 58px);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
}
.sb-stat__label { font-size: 13.5px; color: var(--sb-muted); font-weight: 600; }
.sb-tile--ink .sb-stat__label { color: rgba(255, 255, 255, .94); }
.sb-tile--dark .sb-stat__label { color: var(--sb-muted); }

/* brand tile */
.sb-tile--brand { justify-content: space-between; min-height: 150px; }
/* The seal sits on a white chip so it reads the same on any tile colour. */
.sb-tile--brand__chip {
	align-self: flex-start;
	display: inline-flex;
	padding: 8px 10px;
	border-radius: 12px;
	background: #fff;
}
.sb-tile--brand__chip img { width: 52px; height: 44px; object-fit: contain; }
.sb-tile--brand strong { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.25; letter-spacing: -.02em; display: block; margin-top: 16px; }

/* link tile */
.sb-tile--link { justify-content: space-between; gap: 18px; min-height: 150px; }
.sb-tile--link h3 { font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -.02em; line-height: 1.25; }

/* media tile — a photo that fills the tile */
.sb-tile--media { padding: 0; min-height: 220px; }
.sb-tile--media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.sb-tile__caption {
	position: relative;
	margin-top: auto;
	padding: clamp(18px, 2vw, 26px);
	color: #fff;
	background: linear-gradient(to top, rgba(10, 32, 54, .86) 12%, rgba(10, 32, 54, .5) 55%, rgba(10, 32, 54, 0) 100%);
}
.sb-tile__caption h3 { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.25; }
.sb-tile__caption time { font-size: 12.5px; opacity: .8; font-weight: 600; }

@media (max-width: 1000px) {
	.sb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sb-tile--w3 { grid-column: span 2; }
	.sb-tile--h2 { grid-row: auto; }
}

@media (max-width: 600px) {
	.sb-bento { grid-template-columns: minmax(0, 1fr); }
	.sb-tile--w2,
	.sb-tile--w3 { grid-column: span 1; }
}

/* --- generic card grids --------------------------------------------------- */

.sb-grid { display: grid; gap: var(--sb-gap); }
.sb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) {
	.sb-grid--3,
	.sb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.sb-grid--2,
	.sb-grid--3,
	.sb-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.sb-card {
	background: var(--sb-surface);
	border-radius: var(--sb-radius-card);
	padding: clamp(18px, 2vw, 26px);
	box-shadow: var(--sb-shadow);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* --- news / announcement cards -------------------------------------------- */

.sb-news { display: flex; flex-direction: column; overflow: hidden; padding: 0; background: var(--sb-surface); border-radius: var(--sb-radius-card); box-shadow: var(--sb-shadow); transition: box-shadow .2s ease, transform .2s ease; }
.sb-news:hover { box-shadow: var(--sb-shadow-lift); transform: translateY(-2px); }

/* Fixed aspect ratio: the image box is reserved before the file loads, so the
   card never reflows — this is the CLS 0.16 fix from the review. */
.sb-news__media { aspect-ratio: 16 / 10; background: var(--sb-alt); overflow: hidden; }
.sb-news__media img { width: 100%; height: 100%; object-fit: cover; }

.sb-news__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sb-news__date { font-size: 12.5px; font-weight: 700; color: var(--sb-accent); letter-spacing: .02em; }
.sb-news__title { font-size: 17.5px; line-height: 1.3; letter-spacing: -.02em; }
.sb-news__excerpt { font-size: 14.5px; color: var(--sb-muted); line-height: 1.6; margin: 0; }
.sb-news__more { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 700; color: var(--sb-primary); }

/* --- person cards --------------------------------------------------------- */

/* No photographs of people anywhere on the site, so these carry no portrait
   slot: the role, the name and the title are the whole card. */
.sb-person {
	position: relative;
	background: var(--sb-surface);
	border-radius: var(--sb-radius-card);
	box-shadow: var(--sb-shadow);
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	overflow: hidden;
}

.sb-person::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(to right, var(--sb-primary), var(--sb-sky));
}

.sb-person__role {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sb-accent);
	margin-top: 4px;
}
.sb-person__name { font-size: 16.5px; line-height: 1.3; letter-spacing: -.01em; }
.sb-person__title { font-size: 13px; color: var(--sb-muted); }

/* The chair leads the grid, so the first card gets a little more weight. */
.sb-people .sb-person:first-child { background: var(--sb-sky-soft); }

/* --- document cards ------------------------------------------------------- */

/* The review's most repeated complaint: downloads did not look clickable.
   Each document is now an explicit card with an icon, a type badge and an
   action label. */
.sb-doc {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	background: var(--sb-surface);
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius-card);
	box-shadow: var(--sb-shadow);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.sb-doc:hover {
	border-color: var(--sb-primary);
	box-shadow: var(--sb-shadow-lift);
	transform: translateY(-2px);
}

.sb-doc__icon {
	flex: 0 0 auto;
	width: 46px; height: 46px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: var(--sb-tint);
	color: var(--sb-primary);
}
.sb-doc__icon svg { width: 22px; height: 22px; }

.sb-doc__body { min-width: 0; flex: 1; }
.sb-doc__title { font-size: 15.5px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.sb-doc__meta { font-size: 12.5px; color: var(--sb-muted); font-weight: 600; margin-top: 3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.sb-doc__badge {
	display: inline-block;
	padding: 2px 7px;
	border-radius: 5px;
	background: var(--sb-alt);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sb-ink-soft);
}

.sb-doc__action {
	flex: 0 0 auto;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sb-primary);
	display: flex;
	align-items: center;
	gap: 6px;
}
.sb-doc__action svg { width: 16px; height: 16px; }

@media (max-width: 520px) {
	.sb-doc { flex-wrap: wrap; }
	.sb-doc__action { width: 100%; padding-left: 62px; }
}

/* --- partner wall --------------------------------------------------------- */

.sb-partner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(20px, 2.2vw, 28px);
	background: var(--sb-surface);
	border-radius: var(--sb-radius-card);
	box-shadow: var(--sb-shadow);
}

.sb-partner__mark {
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.sb-partner__mark img { max-height: 64px; width: auto; object-fit: contain; }

/* Partner logos are not in the media library either — a wordmark stands in. */
.sb-partner__wordmark {
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--sb-primary);
}

.sb-partner__name { font-size: 14px; font-weight: 700; line-height: 1.35; }
.sb-partner__desc { font-size: 14px; color: var(--sb-muted); line-height: 1.6; margin: 0; }
.sb-partner__tag {
	align-self: flex-start;
	padding: 4px 9px;
	border-radius: 6px;
	background: var(--sb-tint);
	color: var(--sb-primary);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* --- page header ---------------------------------------------------------- */

.sb-page-head {
	background: var(--sb-surface);
	border-bottom: 1px solid var(--sb-line);
	padding-block: clamp(32px, 5vw, 60px);
}
.sb-page-head h1 { font-size: clamp(30px, 4.4vw, 56px); max-width: 22ch; }
.sb-page-head__lead {
	margin-top: 14px;
	font-size: clamp(15px, 1.2vw, 18px);
	color: var(--sb-muted);
	max-width: 68ch;
}

.sb-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--sb-muted); margin-bottom: 14px; }
.sb-breadcrumb a { font-weight: 600; }
.sb-breadcrumb a:hover { color: var(--sb-primary); }
.sb-breadcrumb span[aria-hidden] { opacity: .5; }

/* --- article / entry content --------------------------------------------- */

.sb-entry {
	background: var(--sb-surface);
	border-radius: var(--sb-radius-tile);
	padding: clamp(24px, 3.4vw, 52px);
	box-shadow: var(--sb-shadow);
}

.sb-entry > *:first-child { margin-top: 0; }
.sb-entry h2 { font-size: clamp(23px, 2.4vw, 32px); margin: 1.8em 0 .5em; }
.sb-entry h3 { font-size: clamp(19px, 1.9vw, 24px); margin: 1.6em 0 .45em; }
.sb-entry h4 { font-size: 17px; margin: 1.4em 0 .4em; }
.sb-entry p,
.sb-entry li { font-size: 16px; line-height: 1.75; color: var(--sb-ink-soft); }
.sb-entry ul,
.sb-entry ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.sb-entry li { margin-bottom: .45em; }
.sb-entry img { border-radius: var(--sb-radius-sm); margin-block: 1.4em; }
.sb-entry hr { border: 0; border-top: 1px solid var(--sb-line); margin: 2.4em 0; }

.sb-entry blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--sb-accent);
	color: var(--sb-ink-soft);
	font-size: 17px;
}

/* inline links inside prose must read as links — another review item */
.sb-entry a:not(.sb-btn):not(.sb-doc) {
	color: var(--sb-primary);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
.sb-entry a:not(.sb-btn):not(.sb-doc):hover { color: var(--sb-accent); }

/* tables (accreditation lists, calendars, fee tables) */
.sb-entry__scroll { overflow-x: auto; }
.sb-entry table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.4em 0;
	font-size: 14.5px;
}
.sb-entry th,
.sb-entry td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--sb-line); vertical-align: top; }
.sb-entry thead th {
	background: var(--sb-alt);
	font-weight: 800;
	font-size: 12.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sb-ink-soft);
}
.sb-entry tbody tr:hover { background: var(--sb-tint-weak); }

/* --- empty-state ---------------------------------------------------------- */

/* Pages like "Misyon ve Vizyon" were nearly blank. When a page really has
   little to say, say it deliberately and offer the next step. */
.sb-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: clamp(28px, 4vw, 48px);
	background: var(--sb-alt);
	border-radius: var(--sb-radius-tile);
}
.sb-empty h3 { font-size: clamp(19px, 2vw, 24px); }
.sb-empty p { color: var(--sb-muted); max-width: 60ch; }

/* --- pagination ----------------------------------------------------------- */

.sb-pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; justify-content: center; }
.sb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: 10px;
	background: var(--sb-surface);
	border: 1px solid var(--sb-line);
	font-weight: 700;
	font-size: 14px;
}
.sb-pagination .page-numbers:hover { border-color: var(--sb-primary); color: var(--sb-primary); }
.sb-pagination .page-numbers.current { background: var(--sb-primary); border-color: var(--sb-primary); color: #fff; }

/* --- CTA band ------------------------------------------------------------- */

.sb-cta {
	/* Inset by the page gutter: with plain max-width the band met both screen
	   edges at 1440px and below, unlike every other block on the page. */
	max-width: calc(var(--sb-max) - 2 * var(--sb-pad));
	margin: 0 var(--sb-pad) clamp(40px, 6vw, 72px);
	padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 60px);
	background: var(--sb-primary);
	color: #fff;
	border-radius: var(--sb-radius-tile);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}
.sb-cta h2 { font-size: clamp(24px, 3.2vw, 42px); max-width: 20ch; margin-top: 8px; }
.sb-cta .sb-eyebrow { color: #fff; }

@media (min-width: 1441px) { .sb-cta { margin-inline: auto; } }

/* --- footer --------------------------------------------------------------- */

/* The site had no footer at all. This one carries a full sitemap so every
   page ends with a way forward. */
.sb-footer { background: var(--sb-foot); color: var(--sb-ink-soft); border-top: 1px solid var(--sb-line); margin-top: auto; }

.sb-footer__inner {
	max-width: var(--sb-max);
	margin-inline: auto;
	padding: clamp(40px, 5vw, 64px) var(--sb-pad) 28px;
	display: grid;
	grid-template-columns: minmax(240px, 1.3fr) repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
}

@media (max-width: 1000px) { .sb-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sb-footer__inner { grid-template-columns: 1fr; } }

.sb-footer__brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
/* The lockup sits on a white plate so the footer tint never muddies it. */
.sb-footer__chip { display: inline-flex; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--sb-line); }
.sb-footer__chip img { width: 156px; height: 50px; object-fit: contain; }
.sb-footer__brand strong { color: var(--sb-ink); font-size: 17px; display: block; }
.sb-footer__brand p { font-size: 14px; line-height: 1.65; max-width: 38ch; margin: 0; }

.sb-footer__col h3 {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sb-muted);
	margin-bottom: 14px;
}
.sb-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sb-footer__col a { font-size: 14.5px; }
.sb-footer__col a:hover { color: var(--sb-primary); }

.sb-footer__contact { font-size: 14.5px; line-height: 1.7; font-style: normal; }
.sb-footer__contact a:hover { color: var(--sb-primary); }

.sb-footer__bar {
	max-width: var(--sb-max);
	margin-inline: auto;
	padding: 20px var(--sb-pad) 32px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13px;
}
.sb-footer__bar::before {
	content: "";
	position: absolute;
	left: 0; right: 0;
	border-top: 1px solid var(--sb-line);
}
.sb-footer__bar { position: relative; }

/* --- misc ----------------------------------------------------------------- */

.sb-site { display: flex; flex-direction: column; min-height: 100vh; }
.sb-main { flex: 1; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Specificity guard
   --------------------------------------------------------------------------
   Elementor's global kit writes element-level rules scoped to the body class
   (".elementor-kit-8 h3 { font-size: … }"), which out-specifies a plain
   component class. Inner pages still need that stylesheet for their Elementor
   content, so rather than dropping it, the theme's own components re-assert
   their typography from the body class and win on equal ground.
   ========================================================================== */

body.sb-site .sb-page-head h1 { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -.03em; }
body.sb-site .sb-tile--hero h1 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.08; letter-spacing: -.045em; }

body.sb-site .sb-section-head h2 { font-size: clamp(30px, 4.2vw, 56px); line-height: 1.08; letter-spacing: -.03em; }
body.sb-site .sb-cta h2 { font-size: clamp(24px, 3.2vw, 42px); line-height: 1.08; color: #fff; }

body.sb-site .sb-person__name { font-size: 16.5px; line-height: 1.25; letter-spacing: -.01em; color: var(--sb-ink); }
body.sb-site .sb-news__title { font-size: 17.5px; line-height: 1.3; letter-spacing: -.02em; color: var(--sb-ink); }
body.sb-site .sb-tile--link h3 { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.25; letter-spacing: -.02em; }
body.sb-site .sb-tile--dark h3 { color: var(--sb-ink); }
body.sb-site .sb-tile--ink h3 { color: #fff; }
body.sb-site .sb-tile__caption h3 { font-size: clamp(16px, 1.5vw, 21px); line-height: 1.25; color: #fff; }
body.sb-site .sb-empty h3 { font-size: clamp(19px, 2vw, 24px); line-height: 1.15; color: var(--sb-ink); }
body.sb-site .sb-partner__name { font-size: 14px; line-height: 1.35; }
body.sb-site .sb-footer__col h3 {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sb-muted);
	line-height: 1.4;
}

body.sb-site .sb-section-head p { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.65; color: var(--sb-muted); }
body.sb-site .sb-news__excerpt { font-size: 14.5px; line-height: 1.6; color: var(--sb-muted); }
body.sb-site .sb-partner__desc { font-size: 14px; line-height: 1.6; color: var(--sb-muted); }
body.sb-site .sb-tile--hero p { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.65; color: var(--sb-muted); }

/* --- statement cards (thin pages) ----------------------------------------- */

.sb-grid--1 { grid-template-columns: minmax(0, 1fr); }

.sb-statement {
	background: var(--sb-surface);
	border-radius: var(--sb-radius-tile);
	padding: clamp(24px, 3vw, 44px);
	box-shadow: var(--sb-shadow);
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
	overflow: hidden;
}

/* A blue edge gives the card weight so a two-sentence page still reads as
   a designed page rather than a blank sheet. */
.sb-statement::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: linear-gradient(to bottom, var(--sb-primary), var(--sb-accent));
}

body.sb-site .sb-statement__heading {
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--sb-ink);
	margin: 2px 0 0;
}

body.sb-site .sb-statement__body {
	font-size: clamp(15px, 1.2vw, 17.5px);
	line-height: 1.7;
	color: var(--sb-ink-soft);
	margin: 0;
}

/* --- one typography baseline across the whole site ------------------------ */

/* Pages that still render builder content also load the Elementor kit, which
   sets its own body font (DM Sans, 17px) on the body element. That left
   theme-rendered pages and builder pages reading at different sizes in
   different faces. `body.sb-site` out-specifies `.elementor-kit-8`, so the
   theme's baseline holds everywhere. */
body.sb-site {
	font-family: var(--sb-font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--sb-ink);
	background: var(--sb-bg);
}

body.sb-site .sb-entry p,
body.sb-site .sb-entry li,
body.sb-site .sb-entry td,
body.sb-site .sb-entry th { font-family: var(--sb-font); }

body.sb-site h1,
body.sb-site h2,
body.sb-site h3,
body.sb-site h4,
body.sb-site h5,
body.sb-site h6 { font-family: var(--sb-font); }

/* --- utility strip -------------------------------------------------------- */

/* The old header carried SSS / İletişim and the two external portals
   (STARNET, STAR AGENT) above the main nav. They belong to a different task
   than browsing the site, so they sit in their own quiet strip. */
.sb-utility {
	background: var(--sb-strip);
	color: var(--sb-ink-soft);
	font-size: 13px;
}

.sb-utility__inner {
	max-width: var(--sb-max);
	margin-inline: auto;
	padding: 0 var(--sb-pad);
	min-height: 38px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
	flex-wrap: wrap;
}

.sb-utility a { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.sb-utility a:hover { color: var(--sb-primary); }

.sb-utility__sep {
	width: 1px;
	height: 16px;
	background: var(--sb-line-strong);
}

.sb-utility__service { font-weight: 800; letter-spacing: .04em; font-size: 12px; }
.sb-utility .sb-ext { width: 12px; height: 12px; opacity: .7; }

/* On the tinted strip the switcher uses a translucent white pill. */
.sb-utility .sb-lang { background: rgba(255, 255, 255, .7); }
.sb-utility .sb-lang a { color: var(--sb-muted); padding: 4px 8px; }
.sb-utility .sb-lang .is-active { background: var(--sb-surface); color: var(--sb-primary); box-shadow: 0 1px 2px rgba(18, 52, 86, .12); }

@media (max-width: 720px) {
	.sb-utility__inner { justify-content: center; gap: 12px; min-height: 34px; padding-block: 6px; }
	.sb-utility__sep { display: none; }
}

/* --- contact page --------------------------------------------------------- */

.sb-contact .sb-tile { min-height: 200px; justify-content: space-between; gap: 16px; }

body.sb-site .sb-contact__address-text {
	font-size: clamp(18px, 1.8vw, 24px);
	line-height: 1.4;
	letter-spacing: -.01em;
	color: var(--sb-ink);
	margin: 10px 0 0;
	max-width: 22ch;
}

.sb-contact__phones {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 22px;
}
.sb-contact__phones a {
	font-size: clamp(15px, 1.4vw, 18px);
	font-weight: 700;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.sb-contact__phones a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 600px) {
	.sb-contact__phones { grid-template-columns: minmax(0, 1fr); }
}

/* Each address is a card rather than a line of text, so the purpose of the
   inbox ("İtirazlar için") is what you read first. */
.sb-mail {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: var(--sb-surface);
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius-card);
	box-shadow: var(--sb-shadow);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.sb-mail:hover {
	border-color: var(--sb-primary);
	box-shadow: var(--sb-shadow-lift);
	transform: translateY(-2px);
}

.sb-mail__icon {
	flex: 0 0 auto;
	width: 42px; height: 42px;
	border-radius: 11px;
	display: grid;
	place-items: center;
	background: var(--sb-tint);
	color: var(--sb-primary);
}
.sb-mail__icon svg { width: 20px; height: 20px; }

.sb-mail__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-mail__label {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sb-accent);
}
.sb-mail__address {
	font-size: 15px;
	font-weight: 700;
	color: var(--sb-ink);
	overflow-wrap: anywhere;
}

/* --- external service tiles / footer services ----------------------------- */

.sb-tile--service {
	background: var(--sb-alt);
	border: 1px solid var(--sb-line);
	box-shadow: none;
	min-height: 160px;
}
.sb-tile--service:hover { border-color: var(--sb-primary); background: var(--sb-surface); }
.sb-tile--service .sb-eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.sb-tile--service .sb-ext { width: 12px; height: 12px; }

.sb-footer__services { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-footer__services a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border: 1px solid var(--sb-line-strong);
	border-radius: 9px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .04em;
	color: var(--sb-ink);
	background: var(--sb-surface);
}
.sb-footer__services a:hover { border-color: var(--sb-primary); color: var(--sb-primary); }
.sb-footer__services .sb-ext { width: 12px; height: 12px; opacity: .7; }

/* --- featured document + sibling navigation ------------------------------- */

.sb-doc--feature {
	padding: clamp(22px, 2.6vw, 34px);
	gap: 22px;
	border-radius: var(--sb-radius-tile);
}
.sb-doc--feature .sb-doc__icon { width: 60px; height: 60px; border-radius: 16px; }
.sb-doc--feature .sb-doc__icon svg { width: 28px; height: 28px; }
body.sb-site .sb-doc--feature .sb-doc__title { font-size: clamp(19px, 2vw, 26px); letter-spacing: -.02em; }
.sb-doc--feature .sb-doc__meta { margin-top: 7px; }
.sb-doc--feature .sb-btn { flex: 0 0 auto; }
.sb-doc--feature .sb-btn svg { width: 16px; height: 16px; }

@media (max-width: 640px) {
	.sb-doc--feature { flex-wrap: wrap; }
	.sb-doc--feature .sb-btn { width: 100%; }
}

.sb-related {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 20px;
	background: var(--sb-surface);
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius-card);
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sb-related:hover {
	border-color: var(--sb-primary);
	transform: translateY(-2px);
	box-shadow: var(--sb-shadow);
}
.sb-related__title { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.sb-related__arrow { color: var(--sb-primary); font-weight: 800; transition: transform .18s ease; }
.sb-related:hover .sb-related__arrow { transform: translateX(3px); }

/* --- header fits a phone -------------------------------------------------- */

/* The action row sits next to the burger on small screens; without these the
   long apply label pushed the document wider than the viewport and covered the
   burger, making the menu impossible to open. */
.sb-header__inner { flex-wrap: nowrap; }
.sb-header__actions { min-width: 0; }
.sb-brand { min-width: 0; }

.sb-btn__short { display: none; }

@media (max-width: 900px) {
	.sb-btn--apply .sb-btn__long { display: none; }
	.sb-btn--apply .sb-btn__short { display: inline; }
}

@media (max-width: 420px) {
	:root { --sb-pad: 16px; }
	.sb-header__inner { gap: 10px; }
	.sb-header__actions { gap: 6px; }
	.sb-btn--sm { padding: 9px 11px; font-size: 12.5px; }
	.sb-burger { width: 40px; height: 40px; }
	.sb-brand img { width: 118px; height: 38px; }
}

/* --- embedded form -------------------------------------------------------- */

.sb-formcard {
	background: var(--sb-surface);
	border-radius: var(--sb-radius-tile);
	padding: clamp(22px, 3vw, 40px);
	box-shadow: var(--sb-shadow);
}
.sb-formcard input[type="text"],
.sb-formcard input[type="email"],
.sb-formcard input[type="tel"],
.sb-formcard select,
.sb-formcard textarea {
	font: inherit;
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--sb-line-strong);
	border-radius: 10px;
	background: var(--sb-surface);
	color: var(--sb-ink);
}
.sb-formcard input:focus,
.sb-formcard select:focus,
.sb-formcard textarea:focus { border-color: var(--sb-primary); outline: none; }
.sb-formcard button[type="submit"],
.sb-formcard input[type="submit"] {
	font: inherit;
	font-weight: 700;
	padding: 13px 22px;
	border: 0;
	border-radius: 10px;
	background: var(--sb-primary);
	color: #fff;
	cursor: pointer;
}
.sb-formcard button[type="submit"]:hover,
.sb-formcard input[type="submit"]:hover { background: var(--sb-primary-dark); }

/* Fluent Forms ships its own blue submit button; bring it into the palette.
   The plugin's stylesheet loads after the theme's, so this needs the extra
   specificity rather than a plain class selector. */
body.sb-site .sb-formcard .ff-btn-submit,
body.sb-site .sb-formcard button.ff-btn.ff-btn-submit {
	background: var(--sb-primary);
	border-color: var(--sb-primary);
	color: #fff;
	border-radius: 10px;
	font-weight: 700;
	box-shadow: none;
}
body.sb-site .sb-formcard .ff-btn-submit:hover,
body.sb-site .sb-formcard button.ff-btn.ff-btn-submit:hover {
	background: var(--sb-primary-dark);
	border-color: var(--sb-primary-dark);
}

/* --- header fit at laptop widths ------------------------------------------ */

/* Measured: with the long apply label the Turkish bar needed 1326px and the
   English one (seven top-level items) 1446px, so both spilled out between the
   burger breakpoint and 1440px. The short label and a tighter nav close it. */
/* Three buttons share the bar, so the application button always uses its
   short label; the long one is kept in the markup for screen readers. */
.sb-btn--apply .sb-btn__long { display: none; }
.sb-btn--apply .sb-btn__short { display: inline; }

@media (min-width: 1341px) {
	.sb-header__inner { gap: 16px; }
	.sb-nav__list { gap: 0; }
	.sb-nav__list > li > a { padding: 9px 9px; font-size: 14.5px; }
	.sb-brand img { width: 150px; height: 48px; }
}

/* The English bar carries seven top-level items against Turkish six, and
   "Apply for accreditation" is ~130px longer than "Apply" — measured 46px of
   overflow at full width. English always uses the short label. */
/* Just above the burger breakpoint the English bar still came up 42px short. */
}

/* Dropdowns of the right-most items open leftwards. Anchored at left: 0 the
   Turkish "İletişim" panel reached past the viewport edge — hidden, but a
   visibility: hidden box still widens the scrollable area. */
@media (min-width: 1341px) {
	.sb-nav__list > li:nth-last-child(-n+2) > .sub-menu { left: auto; right: 0; }
}

/* --- builder tables in the palette ---------------------------------------- */

/* Essential Addons prints its default header colour (#4a4893, a purple) per
   widget, scoped by element ID — more specific than anything a theme can
   reasonably write. Colour alone is forced; layout is left to the widget. */
body.sb-site .sb-entry .eael-data-table thead th,
body.sb-site .sb-entry .eael-data-table thead tr th {
	background-color: var(--sb-primary) !important;
	color: #fff !important;
	border-color: var(--sb-primary) !important;
}
body.sb-site .sb-entry .eael-data-table thead th:hover { background-color: var(--sb-primary-dark) !important; }
body.sb-site .sb-entry .eael-data-table tbody tr:nth-child(even) td { background-color: var(--sb-tint-weak); }

/* --- committees ----------------------------------------------------------- */

.sb-committee {
	background: var(--sb-surface);
	border-radius: var(--sb-radius-card);
	box-shadow: var(--sb-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.sb-committee__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px;
	background: var(--sb-alt);
	border-bottom: 1px solid var(--sb-line);
}
body.sb-site .sb-committee__name { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; color: var(--sb-ink); }
.sb-committee__count { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--sb-muted); }

.sb-committee__list { list-style: none; margin: 0; padding: 6px 22px 14px; }
.sb-committee__list li {
	display: grid;
	grid-template-columns: 118px minmax(0, 1fr);
	gap: 14px;
	align-items: baseline;
	padding: 11px 0;
	border-bottom: 1px solid var(--sb-line);
}
.sb-committee__list li:last-child { border-bottom: 0; }

.sb-committee__role {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sb-accent);
}
.sb-committee__person { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sb-committee__person strong { font-size: 15px; color: var(--sb-ink); }
.sb-committee__person span { font-size: 13px; color: var(--sb-muted); }

@media (max-width: 480px) {
	.sb-committee__list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* --- category illustrations ----------------------------------------------- */

/* Listings show flat artwork rather than photographs. The dark scrim that
   makes white text readable over a photo would sit like a slab on pale
   artwork, so the caption becomes a light panel with ink text instead. */
.sb-tile--art .sb-tile__caption {
	background: linear-gradient(to top, rgba(255, 255, 255, .97) 70%, rgba(255, 255, 255, 0) 100%);
	color: var(--sb-ink);
	padding-top: clamp(28px, 4vw, 48px);
}
.sb-tile--art .sb-tile__caption time { color: var(--sb-accent); opacity: 1; font-weight: 700; }
body.sb-site .sb-tile--art .sb-tile__caption h3 { color: var(--sb-ink); }

/* The artwork is drawn on its own tint; letting it fill the box keeps the
   icon centred at every card size. */
.sb-news__media--art { background: var(--sb-sky-soft); }
.sb-news__media--art img { width: 100%; height: 100%; object-fit: cover; }

/* --- opening block (no artwork) ------------------------------------------- */

.sb-opening { padding-top: clamp(20px, 3vw, 34px); padding-bottom: clamp(28px, 4vw, 48px); }

/* With no picture beside it the hero carries the whole first screen, so it
   gets a little more room to breathe than a standard tile. */
.sb-opening .sb-tile--hero { padding: clamp(26px, 3vw, 44px); }

.sb-tile--claim {
	justify-content: center;
	gap: 10px;
	min-height: 150px;
}
.sb-tile--claim strong {
	font-size: clamp(20px, 2.1vw, 28px);
	line-height: 1.2;
	letter-spacing: -.02em;
	display: block;
}
.sb-tile--claim span { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .94); max-width: 34ch; }

/* Portal tiles sit beside the two-row hero, so pushing the link to the bottom
   left a hole in the middle. Centre the pair instead. */
.sb-tile--service { justify-content: center; gap: 14px; }
.sb-tile--service .sb-link { align-self: flex-start; }

/* --- opening hero (single block) ------------------------------------------ */

.sb-hero {
	background: var(--sb-surface);
	border-radius: var(--sb-radius-tile);
	box-shadow: var(--sb-shadow);
	padding: clamp(32px, 6vw, 88px) clamp(26px, 5vw, 72px);
}

body.sb-site .sb-hero h1 {
	font-size: clamp(32px, 5vw, 62px);
	/* Turkish descenders (ğ, ş) collide at display sizes with a tighter line. */
	line-height: 1.14;
	letter-spacing: -.045em;
	max-width: 18ch;
}
body.sb-site .sb-hero p {
	margin: clamp(16px, 2vw, 24px) 0 0;
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.65;
	color: var(--sb-muted);
	max-width: 62ch;
}
.sb-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }

/* Quick-access tiles carry a title only, with the arrow set beside it. */
.sb-tile--quick { min-height: 104px; justify-content: center; position: relative; padding-right: 52px; }
body.sb-site .sb-tile--quick h3 { font-size: clamp(16px, 1.4vw, 19px); }
/* Pinned rather than inline: after a two-line title the arrow wrapped onto a
   line of its own. */
.sb-tile--quick__arrow {
	position: absolute;
	right: clamp(18px, 2vw, 26px);
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	color: var(--sb-primary);
	transition: transform .18s ease;
}
.sb-tile--quick:hover .sb-tile--quick__arrow { transform: translateY(-50%) translateX(3px); }

/* A one-word section label does not need display scale. */
body.sb-site .sb-section-head--simple h2 { font-size: clamp(24px, 2.6vw, 36px); }

/* --- portal buttons in the header ----------------------------------------- */

.sb-btn--portal { font-size: 12px; letter-spacing: .02em; white-space: nowrap; padding: 9px 11px; }

/* Below the burger breakpoint there is no room for them, and the utility
   strip carries the same two links instead. */
@media (max-width: 1340px) {
	.sb-btn--portal { display: none; }
}
@media (min-width: 1341px) {
	/* `.sb-utility a` is more specific than a bare class, hence the element. */
	.sb-utility a.sb-utility__portal { display: none; }
}

/* The English bar is the widest (seven items, longer labels). Measured: it ran
   3px over at full width and 92px over just above the burger breakpoint. */
@media (min-width: 1341px) {
	.sb-header__inner { gap: 12px; }
	.sb-brand img { width: 144px; height: 46px; }
}
@media (min-width: 1341px) and (max-width: 1460px) {
	.sb-header__inner { gap: 10px; }
	.sb-nav__list > li > a { padding: 8px 6px; font-size: 13.5px; }
	.sb-brand img { width: 132px; height: 42px; }
	.sb-btn--portal { padding: 9px 9px; }
}

/* --- events --------------------------------------------------------------- */

/* The card is an article, not a link, because an optional "register" button
   sits inside it and links must not nest. */
.sb-event { position: relative; }
.sb-event__link { display: flex; flex-direction: column; height: 100%; }
.sb-event .sb-news__body { gap: 8px; }
.sb-event__cta { margin: 0 20px 20px; align-self: flex-start; }

body.sb-site .sb-empty-note {
	margin: 0;
	padding: clamp(22px, 3vw, 32px);
	background: var(--sb-surface);
	border: 1px dashed var(--sb-line-strong);
	border-radius: var(--sb-radius-card);
	color: var(--sb-muted);
	font-size: clamp(15px, 1.3vw, 17px);
}

.sb-event-detail__facts { gap: 20px; justify-content: center; }
.sb-event-detail__facts > div { display: flex; flex-direction: column; gap: 4px; }
.sb-event-detail__facts strong { font-size: clamp(18px, 1.8vw, 23px); letter-spacing: -.01em; line-height: 1.25; }
.sb-event-detail__facts .sb-btn { align-self: flex-start; margin-top: 4px; }
.sb-event-detail__past { margin: 0; color: var(--sb-muted); font-size: 14.5px; }
.sb-event-detail__art { min-height: 240px; }