:root {
	--shki-navy: #101a33;
	--shki-navy-2: #1a2547;
	--shki-accent: #7c5cff;
	--shki-accent-2: #00d4ff;
	--shki-pink: #ff4d8d;
	--shki-text: #232a3d;
	--shki-muted: #6b7390;
	--shki-bg: #f4f6fc;
	--shki-surface: #1a2340;
	--shki-on-surface: #dfe6fa;
	--shki-nav-h: 78px;
	/* Motion: custom curves beat the built-in easings (Emil Kowalski) */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--dur-press: 120ms;
	--dur-base: 200ms;
}
html {
	scroll-behavior: smooth;
	background-color: #101a33;
	color-scheme: light;
	scroll-padding-top: calc(var(--shki-nav-h) + 16px);
	overflow-x: hidden;
}
body {
	font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--shki-text);
	background: #fff;
	padding-top: 0;
	overflow-x: hidden;
}
a { text-decoration: none; }
/* Sticky header must never cover an anchor/focus target */
:target, h1, h2, h3, h4 { scroll-margin-top: calc(var(--shki-nav-h) + 20px); }
h1, h2, h3, .hero-title { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Visible focus for every interactive element */
a:focus-visible, button:focus-visible, input:focus-visible,
[tabindex]:focus-visible { outline: 3px solid var(--shki-accent); outline-offset: 2px; border-radius: 0.35rem; }
.shki-nav a:focus-visible, .shki-footer a:focus-visible { outline-color: #ffd166; }

/* Skip link */
.skip-link {
	position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
	z-index: 2000; background: #fff; color: var(--shki-navy);
	font-weight: 700; padding: 0.7rem 1.3rem; border-radius: 0 0 0.8rem 0.8rem;
	box-shadow: 0 8px 24px rgba(5, 8, 22, 0.4);
	transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* NAV */
.shki-nav { position: sticky; top: 0; z-index: 1030; background: rgba(16, 26, 51, 0.97); box-shadow: 0 2px 18px rgba(10, 16, 36, 0.35); }
.shki-nav .container { align-items: center; }
.shki-nav .navbar-toggler { border-color: #ffffff44; padding: 0.45rem 0.6rem; line-height: 1; }
.shki-nav .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem #7c5cff66; }
.shki-nav .navbar-brand { color: #fff; font-weight: 800; letter-spacing: 0.5px; }
.shki-nav .navbar-brand img { height: 44px; width: auto; }
.shki-nav .brand-text small { display: block; font-size: 0.65rem; font-weight: 400; color: #aab4d8; letter-spacing: 2px; text-transform: uppercase; }
.shki-nav .nav-link { color: #cdd6f4; font-weight: 600; margin: 0 0.25rem; }
.shki-nav .nav-link:hover, .shki-nav .nav-link.active { color: #fff; }
.shki-nav .dropdown-menu {
	background: #1a2340; border: 1px solid #7c5cff66; border-radius: 0.9rem;
	padding: 0.5rem; box-shadow: 0 18px 44px rgba(5, 8, 22, 0.55);
}
.shki-nav .dropdown-menu.show { animation: shkiDrop 0.18s ease; }
@keyframes shkiDrop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.shki-nav .dropdown-item { color: #cdd6f4; font-weight: 600; border-radius: 0.55rem; padding: 0.55rem 0.9rem; transition: background 0.15s ease, color 0.15s ease; }
.shki-nav .dropdown-item:hover, .shki-nav .dropdown-item:focus { background: linear-gradient(90deg, #7c5cff55, #ff4d8d44); color: #fff; }
.shki-nav .dropdown-toggle.show { color: #fff; }
.gap-2 { gap: 0.5rem; }

/* HERO */
.shki-hero {
	position: relative;
	background: radial-gradient(900px 440px at 88% -10%, #7c5cff33, transparent),
		radial-gradient(760px 420px at 8% 108%, #3a86ff2e, transparent),
		linear-gradient(135deg, #141b3d 0%, #2c2a6e 52%, #5b3aa8 82%, #8a4f9e 100%);
	color: #fff;
	padding: 4.5rem 0 7rem;
	overflow: hidden;
}
.hero-badge {
	display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 1.5px;
	text-transform: uppercase; color: #0b1020; background: #ffd166;
	border-radius: 999px; padding: 0.35rem 1rem; margin-bottom: 1rem;
}
.hero-title { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.1; }
.hero-slogan { font-size: 1.35rem; color: #ffd166; font-weight: 700; }
.hero-desc { color: #cdd6f4; max-width: 36rem; }
.btn-shki {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: linear-gradient(90deg, var(--shki-accent), var(--shki-pink));
	color: #fff; font-weight: 700; border: 0; border-radius: 999px; padding: 0.8rem 1.8rem;
	transition: transform var(--dur-press) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.btn-shki:hover { color: #fff; filter: brightness(1.1); }
.btn-shki:active { transform: scale(0.97); }
.btn-shki svg { width: 1.1em; height: 1.1em; }
.btn-shki i.bi { font-size: 1.1em; }
.btn-shki-2 {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: linear-gradient(90deg, #0ea5e9, #00c48c);
	color: #fff; font-weight: 700; border: 0; border-radius: 999px; padding: 0.8rem 1.8rem;
	transition: transform var(--dur-press) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.btn-shki-2:hover { color: #fff; filter: brightness(1.1); }
.btn-shki-2:active { transform: scale(0.97); }
.btn-shki-2 svg { width: 1.1em; height: 1.1em; }
.btn-shki-2 i.bi { font-size: 1.1em; }
.btn-ghost {
	display: inline-flex; align-items: center; color: #fff; font-weight: 600;
	border: 1px solid #ffffff55; border-radius: 999px; padding: 0.8rem 1.8rem;
	transition: transform var(--dur-press) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.btn-ghost:hover { color: #fff; background: #ffffff18; }
.btn-ghost:active { transform: scale(0.97); }
.hero-logo { max-width: 300px; width: 100%; height: auto; filter: drop-shadow(0 14px 30px rgba(0,0,0,0.45)); }
.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; fill: #fff; }

/* SECTIONS */
.section { padding: 4rem 0; }
.section-alt { background: var(--shki-bg); }
.section-head { max-width: 46rem; margin-bottom: 2.2rem; }
.section-head h2 { font-weight: 800; font-size: 2rem; }
.section-head p { color: var(--shki-muted); }

/* STUDIO CARDS */
.studio-card {
	display: flex; flex-direction: column; gap: 0.6rem; height: 100%;
	background: #fff; border: 1px solid #e6eaf6; border-radius: 1.25rem;
	padding: 1.6rem; color: var(--shki-text);
	border-top: 6px solid var(--shki-accent);
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.studio-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(30, 40, 90, 0.16); color: var(--shki-text); }
.studio-card:active { transform: translateY(-3px); }
.studio-card.color-1 { border-top-color: #7c5cff; } .studio-card.color-2 { border-top-color: #00b3ff; }
.studio-card.color-3 { border-top-color: #ff4d8d; } .studio-card.color-4 { border-top-color: #00c48c; }
.studio-card.color-5 { border-top-color: #ff9f1c; } .studio-card.color-6 { border-top-color: #3a86ff; }
.studio-icon { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--shki-accent), var(--shki-pink)); }
.studio-icon svg { width: 28px; height: 28px; }
.studio-icon i.bi { font-size: 26px; line-height: 1; }
.studio-title { font-size: 1.2rem; font-weight: 800; }
.studio-more { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--shki-accent); font-weight: 700; margin-top: auto; }
.studio-more svg { width: 1.1em; height: 1.1em; }
.studio-more i.bi { font-size: 1.1em; }

/* INFO + NEWS */
.info-card { position: relative; overflow: hidden; background: #fff; border: 1px solid #dfe4f0; border-radius: 1rem; padding: 1.8rem; height: 100%; }
.info-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #1f2a4d; }
.info-1::before, .info-2::before, .info-3::before { background: #1f2a4d; }
.info-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.6rem; color: #1f2a4d; }
.info-card p { color: #4a5470; margin-bottom: 0.4rem; }
.info-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: #1f2a4d; margin-bottom: 1rem; }
.info-1 .info-icon, .info-2 .info-icon, .info-3 .info-icon { background: #1f2a4d; }
.info-icon svg { width: 24px; height: 24px; }
.info-icon i.bi { font-size: 22px; line-height: 1; }
.info-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: #1f2a4d; margin-top: 0.4rem; text-decoration: underline; text-underline-offset: 3px; }
.info-link svg, .info-link i.bi { font-size: 1em; }
.info-phone a { font-size: 1.25rem; font-weight: 700; color: #1f2a4d; }
.info-note { font-size: 0.92rem; }
.info-socials { display: flex; flex-direction: column; gap: 0.5rem; }
.mini-social { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; color: #1f2a4d; background: #f4f6fb; border: 1px solid #dfe4f0; border-radius: 0.7rem; padding: 0.5rem 0.85rem; transition: background var(--dur-base) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.mini-social:hover { background: #e9edf6; color: #1f2a4d; }
.mini-social:active { transform: scale(0.97); }
.mini-social svg { width: 1.25em; height: 1.25em; }
.mini-social i.bi { font-size: 1.25em; }
.max-badge.dark { display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px; background: #1f2a4d; color: #fff; border-radius: 6px; padding: 0.1rem 0.4rem; }
.social-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.social-pill {
	display: inline-flex; align-items: center; gap: 0.5rem;
	color: #fff; font-weight: 600; font-size: 0.95rem;
	border: 1px solid #ffffff44; border-radius: 999px; padding: 0.5rem 1.1rem;
	background: #ffffff10;
	transition: background var(--dur-base) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.social-pill:hover { color: #fff; background: #ffffff26; }
.social-pill:active { transform: scale(0.97); }
.social-pill svg { width: 1.2em; height: 1.2em; }
.social-pill i.bi { font-size: 1.2em; }
.social-pill .max-badge {
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px;
	background: #fff; color: #101a33; border-radius: 6px; padding: 0.1rem 0.4rem;
}
.director-photo { width: 100%; max-width: 220px; border-radius: 1rem; box-shadow: 0 12px 30px rgba(16,26,51,0.18); }
img.emoji { width: 1.25em; height: 1.25em; vertical-align: -0.2em; }
/* ---------- Cookie consent (152-FZ) ---------- */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; display: flex; justify-content: center; padding: 0 1rem 1rem; pointer-events: none; }
.cookie-bar[hidden] { display: none !important; }
.cookie-line {
	pointer-events: auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	justify-content: center; max-width: 900px;
	background: var(--shki-navy); color: #e8ecf8; border-radius: 1rem;
	padding: 0.85rem 1.2rem; font-size: 0.9rem;
	box-shadow: 0 -6px 30px rgba(10, 16, 36, 0.4);
	transform: translateY(0); opacity: 1;
	transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
@starting-style { .cookie-line { transform: translateY(24px); opacity: 0; } }
.cookie-line a { color: #ffd166; text-decoration: underline; text-underline-offset: 2px; }
.cookie-line button {
	background: #ffd166; color: var(--shki-navy); font-weight: 700; border: 0;
	border-radius: 999px; padding: 0.5rem 1.5rem; cursor: pointer; white-space: nowrap;
	transition: transform var(--dur-press) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.cookie-line button:hover { filter: brightness(1.05); }
.cookie-line button:active { transform: scale(0.97); }
body.dark .cookie-line { background: #0a0f22; }
body.a11y-hc-bw .cookie-line { background: #000 !important; color: #fff !important; border: 2px solid #fff; }
body.a11y-hc-bw .cookie-line a { color: #fff !important; }
body.a11y-hc-bw .cookie-line button { background: #fff !important; color: #000 !important; }
/* ---------- Card with leading icon (contacts, and anything similar) ----------
   Three things must hold at once. Keep all three or the row looks crooked:
   1. EQUAL-SIZE CARDS: the grid stretches every card in a row to the same
      height. So the card itself is a plain block, not a flex container -
      centring inside it would otherwise depend on the stretched card height.
   2. ICONS ON ONE SHARED LINE: the icon lives INSIDE .shki-card-head, in the
      same row as the label, centred against it. Do NOT hang the icon off to
      the side and centre it on the whole text block: every card has a
      different amount of text, so the icons end up at different heights and
      the row reads as crooked.
   3. LABELS ON ONE SHARED LINE: .shki-card-head is top-aligned inside the
      stretched card, so every label starts at the same y. */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 1.5rem 0; align-items: stretch; }
.shki-card { background: #fff; border: 1px solid #e6eaf6; border-radius: 1.25rem; padding: 1.4rem; box-shadow: 0 6px 20px rgba(30, 40, 90, 0.06); }
.shki-card-inner { display: flex; gap: 1.1rem; align-items: center; }
.shki-card-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.shki-card-head h3, .shki-card-head h4 { font-size: 1.05rem; font-weight: 800; margin: 0; }
.shki-card + .shki-card { margin-top: 1rem; }
.contact-grid .shki-card + .shki-card { margin-top: 0; }
.shki-card-body { min-width: 0; }
.shki-card h3, .shki-card h4 { font-size: 1.05rem; font-weight: 800; margin: 0 0 0.35rem; }
.shki-card-head h3, .shki-card-head h4 { margin: 0; }
.shki-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: 0.8rem; background: #eef1fb; color: #2c4bd8; }
.shki-ico i, .shki-ico svg { font-size: 1.25rem; line-height: 1; vertical-align: 0; width: 1.25rem; height: 1.25rem; }
.shki-ico svg { display: block; fill: currentColor; }
.shki-card p { margin: 0; color: #4a5470; }
.shki-card a { font-weight: 600; }
.shki-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.shki-card li { display: flex; align-items: center; gap: 0.55rem; }
.shki-card li i, .shki-card li svg { color: #2c4bd8; font-size: 1.1rem; line-height: 1; vertical-align: 0; width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.shki-card li svg { display: block; fill: currentColor; }
.director-card .shki-card-inner { align-items: center; }
.director-card img { width: 130px; height: 160px; object-fit: cover; border-radius: 0.9rem; flex-shrink: 0; }
.director-card .director-name { font-size: 1.15rem; }
.pager { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.pager a, .pager span { border: 1px solid #c9d1ec; border-radius: 0.6rem; padding: 0.4rem 0.9rem; font-weight: 700; color: var(--shki-text); }
.pager span.current { background: #101a33; color: #fff; border-color: #101a33; }
body.dark .shki-card { background: #1a2340; border-color: #2e3c66; box-shadow: none; }
body.dark .shki-card p { color: #aab4d8; }
body.dark .shki-ico { background: #26325a; color: #9fb4ff; }
body.a11y-hc-bw .shki-card { background: #fff !important; border: 2px solid #000; box-shadow: none; }
body.a11y-hc-bw .shki-card p { color: #000 !important; }
body.a11y-hc-bw .shki-ico { background: #fff !important; color: #000 !important; border: 2px solid #000; }

/* ---------- Floating dark-theme button ---------- */
.theme-fab {
	position: fixed; right: 22px; bottom: 22px; z-index: 1050;
	width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff; font-size: 24px; line-height: 1;
	background: linear-gradient(135deg, #7c5cff, #ff4d8d);
	box-shadow: 0 10px 28px rgba(124, 92, 255, 0.45);
	transition: transform var(--dur-press) var(--ease-out);
}
.theme-fab:hover { transform: scale(1.07); }
.theme-fab:active { transform: scale(0.94); }
.theme-fab .bi-sun-fill { display: none; }
body.dark .theme-fab .bi-moon-fill { display: none; }
body.dark .theme-fab .bi-sun-fill { display: inline; }

/* ---------- Dark theme ---------- */
body.dark { background: #0e1428; color: var(--shki-on-surface); color-scheme: dark; }
body.dark .section-alt { background: #131a30; }
body.dark .studio-card, body.dark .info-card, body.dark .news-card { background: var(--shki-surface); border-color: #2e3c66; color: var(--shki-on-surface); }
/* Info cards kept hardcoded light-on-dark colours: override them explicitly */
body.dark .info-card h3 { color: #fff; }
body.dark .info-card p { color: #aab4d8; }
body.dark .info-card::before { background: var(--shki-accent); }
body.dark .mini-social { background: #252f55; border-color: #3a4a7d; color: #e8ecf8; }
body.dark .mini-social:hover { background: #2f3c6b; color: #fff; }
body.dark .info-phone a, body.dark .info-link { color: #fff; }
body.dark .studio-card:hover { color: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
body.dark .section-head p, body.dark .news-card p { color: #aab4d8; }
body.dark .news-card h3 a { color: #fff; }
body.dark .richtext { color: #dfe6fa; }
body.dark .richtext a { color: #9d8cff; }
body.dark .doc-table td { border-color: #2e3c66; }
body.dark .crumbs { color: #8f99c4; }
body.dark .dropdown-menu { background: #1a2340; border-color: #2e3c66; }
body.dark .dropdown-item { color: #dfe6fa; }
body.dark .dropdown-item:hover { background: #2a3763; color: #fff; }
body.dark .hero-wave { fill: #0e1428; }
body.dark .info-card a, body.dark .news-more, body.dark .studio-more { color: #b3a4ff; }

/* ---------- Accessibility: eye button + panel ---------- */
.btn-eye {
	display: inline-flex; align-items: center; gap: 0.45rem;
	color: #fff; font-weight: 600; font-size: 0.9rem;
	background: transparent; border: 1px solid #ffffff55; border-radius: 999px;
	padding: 0.42rem 0.9rem; margin-right: 0.6rem; cursor: pointer; white-space: nowrap;
}
.btn-eye:hover { color: #fff; background: #ffffff1c; }
.btn-eye i.bi { font-size: 1.15em; }
.a11y-panel {
	position: fixed; top: 84px; right: 12px; z-index: 1060; width: 300px; max-width: calc(100vw - 24px);
	background: #fff; color: #232a3d; border: 1px solid #dfe4f3; border-radius: 1rem;
	box-shadow: 0 18px 50px rgba(10, 16, 36, 0.3); padding: 1.1rem 1.2rem;
}
.a11y-panel h6 { font-weight: 800; margin-bottom: 0.8rem; }
.a11y-group { margin-bottom: 0.8rem; }
.a11y-group > span { display: block; font-size: 0.82rem; color: #6b7390; margin-bottom: 0.35rem; }
.a11y-btn {
	border: 1px solid #c9d1ec; background: #f4f6fc; color: #232a3d; border-radius: 0.6rem;
	padding: 0.35rem 0.7rem; font-weight: 700; cursor: pointer; margin-right: 0.3rem; margin-bottom: 0.3rem;
}
.a11y-btn.active { background: #101a33; color: #fff; border-color: #101a33; }
.a11y-check { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; margin-bottom: 0.8rem; }
body.dark .a11y-panel { background: #1a2340; color: #e8ecf8; border-color: #2e3c66; }
body.dark .a11y-group > span { color: #aab4d8; }
body.dark .a11y-btn { background: #252f55; border-color: #3a4a7d; color: #e8ecf8; }
body.dark .a11y-btn.active { background: #7c5cff; border-color: #7c5cff; color: #fff; }

/* ---------- Accessibility modes ---------- */
html.a11y-f1 { font-size: 112.5%; }
html.a11y-f2 { font-size: 130%; }
body.a11y .richtext { line-height: 2; }
body.a11y-hc-bw { background: #fff !important; color: #000 !important; }
body.a11y-hc-bw .section-alt { background: #fff !important; }
body.a11y-hc-bw .shki-nav { background: #000 !important; }
body.a11y-hc-bw .shki-nav .nav-link, body.a11y-hc-bw .shki-nav .navbar-brand { color: #fff !important; }
body.a11y-hc-bw .shki-hero { background: #000 !important; color: #fff !important; }
body.a11y-hc-bw .hero-slogan, body.a11y-hc-bw .hero-desc { color: #fff !important; }
body.a11y-hc-bw .page-hero { background: #000 !important; color: #fff !important; }
body.a11y-hc-bw .shki-footer { background: #000 !important; color: #fff !important; }
body.a11y-hc-bw .shki-footer a { color: #fff !important; }
body.a11y-hc-bw .studio-card, body.a11y-hc-bw .info-card, body.a11y-hc-bw .news-card { background: #fff !important; color: #000 !important; border: 2px solid #000 !important; box-shadow: none !important; }
body.a11y-hc-bw .studio-icon, body.a11y-hc-bw .info-icon { background: #000 !important; color: #fff !important; }
body.a11y-hc-bw .mini-social { background: #fff !important; color: #000 !important; border: 2px solid #000 !important; }
body.a11y-hc-bw .mini-social svg, body.a11y-hc-bw .mini-social i.bi { color: #000 !important; }
body.a11y-hc-bw .info-link, body.a11y-hc-bw .info-phone a { color: #000 !important; }
body.a11y-hc-bw .info-card::before { background: #000 !important; }
body.a11y-hc-bw .studio-title, body.a11y-hc-bw .info-card h3, body.a11y-hc-bw .news-card h3 a, body.a11y-hc-bw .section-head h2 { color: #000 !important; }
body.a11y-hc-bw .section-head p, body.a11y-hc-bw .news-card p, body.a11y-hc-bw .news-date { color: #000 !important; }
body.a11y-hc-bw a { color: #000 !important; }
body.a11y-hc-bw .shki-hero a, body.a11y-hc-bw .page-hero a { color: #fff !important; }
body.a11y-hc-bw .btn-shki, body.a11y-hc-bw .btn-shki-2 { background: #fff !important; color: #000 !important; border: 2px solid #fff !important; }
body.a11y-hc-bw .btn-ghost, body.a11y-hc-bw .social-pill { color: #fff !important; border: 2px solid #fff !important; background: transparent !important; }
body.a11y-hc-bw .social-pill .max-badge { background: #fff !important; color: #000 !important; }
body.a11y-hc-bw .hero-badge { background: #fff !important; color: #000 !important; }
body.a11y-hc-bw .theme-fab { background: #000 !important; color: #fff !important; border: 2px solid #fff; box-shadow: none; }
body.a11y-hc-bw .a11y-panel { background: #fff !important; color: #000 !important; border: 2px solid #000; }
body.a11y-hc-bw .a11y-group > span { color: #000 !important; }
body.a11y-hc-bw .a11y-btn { background: #fff !important; color: #000 !important; border: 1px solid #000; }
body.a11y-hc-bw .a11y-btn.active { background: #000 !important; color: #fff !important; }
body.a11y-hc-bw .hero-wave { fill: #fff; }
body.a11y-hc-bw .dropdown-menu { background: #000 !important; border: 2px solid #fff !important; }
body.a11y-hc-bw .dropdown-item { color: #fff !important; }
body.a11y-hc-bw .dropdown-item:hover { background: #333 !important; color: #fff !important; }
body.a11y-hc-bw .richtext a { color: #000 !important; text-decoration: underline; }
body.a11y-hc-bw .doc-table td { border-color: #000 !important; }
body.a11y-hc-bw .crumbs, body.a11y-hc-bw .crumbs a, body.a11y-hc-bw .page-date { color: #fff !important; }
body.a11y-noimg img { display: none !important; }

/* ---------- Mobile ---------- */
@media (max-width: 991px) {
	.shki-hero { padding: 3rem 0 5.5rem; }
	.hero-logo { max-width: 200px; margin-top: 1rem; }
	.section { padding: 3rem 0; }
}
@media (max-width: 575px) {
	.navbar-brand img { height: 36px !important; }
	.btn-eye span { display: none; }
	.btn-eye { padding: 0.42rem 0.65rem; }
	.btn-shki, .btn-shki-2, .btn-ghost { width: 100%; justify-content: center; }
	.section { padding: 2.5rem 0; }
	.section-head h2 { font-size: 1.6rem; }
	.richtext table { display: block; overflow-x: auto; }
	.director-photo { max-width: 170px; }
	.director-card { flex-direction: column; text-align: center; }
	.theme-fab { width: 52px; height: 52px; right: 16px; bottom: 16px; }
	.a11y-panel { top: 74px; }
}
.news-card { background: #fff; border: 1px solid #e6eaf6; border-radius: 1.25rem; padding: 1.6rem; height: 100%; display: flex; flex-direction: column; gap: 0.6rem; overflow: hidden; }
.news-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0.8rem; margin: -0.4rem -0.4rem 0.4rem; background: var(--shki-bg); }
.news-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-cover { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1.25rem; margin-top: 1.5rem; background: var(--shki-bg); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.richtext img { max-width: 100%; height: auto; border-radius: 0.8rem; cursor: zoom-in; }
.gallery-title { font-weight: 800; margin-top: 2.2rem; }
.news-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; margin-top: 1rem; }
.gallery-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0.8rem; background: var(--shki-bg); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; transition: transform var(--dur-base) var(--ease-out); }
.gallery-thumb:hover img { transform: scale(1.05); }
/* ---------- Lightbox gallery ---------- */
.shki-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(8, 12, 26, 0.92); display: flex; align-items: center; justify-content: center; overscroll-behavior: contain; }
.shki-lb-frame { position: relative; display: inline-block; line-height: 0; max-width: 94vw; }
.shki-lb-frame img { max-width: 94vw; max-height: 84vh; width: auto; height: auto; border-radius: 0.6rem; box-shadow: 0 20px 80px rgba(0,0,0,0.6); }
.shki-lb-btn { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid #ffffff66; background: rgba(10, 15, 30, 0.55); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); z-index: 2001; transition: background var(--dur-base) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.shki-lb-btn svg { width: 24px; height: 24px; }
.shki-lb-prev { left: 14px; } .shki-lb-next { right: 14px; }
.shki-lb-btn:hover { background: rgba(20, 28, 52, 0.8); }
.shki-lb-btn:active { transform: translateY(-50%) scale(0.93); }
.shki-lb-close { position: fixed; top: 18px; right: 22px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #ffffff66; background: rgba(10, 15, 30, 0.55); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); z-index: 2001; transition: background var(--dur-base) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.shki-lb-close svg { width: 20px; height: 20px; }
.shki-lb-close:hover { background: rgba(20, 28, 52, 0.8); }
.shki-lb-close:active { transform: scale(0.93); }
.shki-lb-count { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-weight: 700; background: rgba(10, 15, 30, 0.55); border-radius: 999px; padding: 0.25rem 0.9rem; line-height: 1.5; z-index: 2001; }
.news-card h3 { font-size: 1.15rem; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card h3 a { color: var(--shki-text); }
.news-card p { color: var(--shki-muted); }
.news-date { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--shki-muted); font-size: 0.85rem; }
.news-date svg { width: 1em; height: 1em; }
.news-date i.bi { font-size: 1em; }
.news-more { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--shki-accent); margin-top: auto; }
.news-more svg { width: 1.1em; height: 1.1em; }
.news-more i.bi { font-size: 1.1em; }

/* INNER PAGES */
.page-hero { background: linear-gradient(135deg, #101a33, #2b2a6e 60%, #5b2a86); color: #fff; padding: 3rem 0; }
.page-hero h1 { font-weight: 800; }
.crumbs { color: #aab4d8; font-size: 0.9rem; margin-bottom: 0.6rem; }
.crumbs a { color: #fff; }
.page-date { display: inline-flex; align-items: center; gap: 0.4rem; color: #cdd6f4; }
.page-date svg { width: 1em; height: 1em; }
.page-date i.bi { font-size: 1em; }
.content-narrow { max-width: 52rem; }
.richtext { font-size: 1.08rem; line-height: 1.75; }
.richtext h2, .richtext h3 { font-weight: 800; margin-top: 2rem; }
.richtext table { width: 100%; }
.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 0.8rem; margin: 1.2rem 0; background: #000; }
.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.video-cover { position: relative; cursor: pointer; border-radius: 0.8rem; overflow: hidden; margin: 1.2rem 0; background: #000; }
.video-cover img { width: 100%; display: block; }
.video-cover .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: rgba(10, 15, 30, 0.65); border: 2px solid #fff; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--dur-base) var(--ease-out); }
.video-cover:hover .play-btn { transform: translate(-50%, -50%) scale(1.08); }
.video-cover .play-btn svg { width: 30px; height: 30px; margin-left: 4px; }
.video-overlay { position: fixed; inset: 0; z-index: 2100; background: rgba(5, 8, 18, 0.94); display: flex; align-items: center; justify-content: center; overscroll-behavior: contain; }
.video-frame { position: relative; width: min(92vw, 960px); }
.video-frame .video-wrap { margin: 0; }
.video-overlay .shki-lb-close { position: fixed; }
.doc-table td { padding: 0.7rem 0.4rem; border-bottom: 1px solid #e6eaf6; }

/* FOOTER */
.shki-footer { background: var(--shki-navy); color: #cdd6f4; padding: 3rem 0 1.5rem; }
.shki-footer h5 { color: #fff; font-weight: 800; }
.shki-footer a { color: #cdd6f4; }
.shki-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.shki-footer hr { border-color: #ffffff22; }
.shki-footer .footer-logo { height: 52px; width: auto; }
.shki-footer small { display: block; font-size: 0.7rem; color: #aab4d8; letter-spacing: 2px; }

/* ---------- Hover only on real pointers ----------
   Touch devices fire :hover on tap, leaving sticky hover states. Only the
   movement is neutralised — colours stay, so button surfaces keep their base. */
@media (hover: none), (pointer: coarse) {
	.studio-card:hover { transform: none; box-shadow: none; }
	.gallery-thumb:hover img, .video-cover:hover .play-btn { transform: none; }
	.theme-fab:hover { transform: none; }
}

/* ---------- Reduced motion ----------
   Keep opacity/colour feedback, drop movement. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.studio-card:hover,
	.studio-card:active,
	.gallery-thumb:hover img,
	.theme-fab:hover,
	.theme-fab:active,
	.shki-lb-btn:active,
	.shki-lb-close:active,
	.cookie-line button:active,
	.btn-shki:active,
	.btn-shki-2:active,
	.btn-ghost:active,
	.mini-social:active,
	.social-pill:active { transform: none !important; }
	.video-cover:hover .play-btn { transform: translate(-50%, -50%) !important; }
	@starting-style { .cookie-line { transform: none; opacity: 1; } }
}

/* ---------- 360-degree studio viewer ----------
   One component reused by every studio page. The block is sized by aspect-ratio
   so it never shifts layout while Pannellum boots. */
.shki-pano { margin: 2rem 0 0; }
.pano-frame {
	position: relative; width: 100%; aspect-ratio: 16 / 9;
	border-radius: 1.25rem; overflow: hidden; background: var(--shki-bg);
	border: 1px solid #e6eaf6; box-shadow: 0 6px 20px rgba(30, 40, 90, 0.06);
}
.pano-holder { position: absolute; inset: 0; }
.pano-holder .pnlm-container { background: var(--shki-bg); }

/* poster + start button */
.pano-start {
	position: absolute; inset: 0; width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center; gap: 1rem;
	border: 0; padding: 0; cursor: pointer; overflow: hidden;
	background: #101a33 url('../pano/test-studio.jpg') center 50% / cover no-repeat;
	color: #fff; text-align: center;
	transition: transform var(--dur-base) var(--ease-out);
}
.pano-start::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(8, 12, 26, 0.45), rgba(8, 12, 26, 0.75));
}
.pano-start:hover::after { background: linear-gradient(180deg, rgba(8, 12, 26, 0.3), rgba(8, 12, 26, 0.65)); }
.pano-start:active { transform: scale(0.99); }
.pano-start-badge {
	position: relative; z-index: 1; flex-shrink: 0;
	width: 64px; height: 64px; border-radius: 50%;
	background: #ffd166; color: #101a33;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	transition: transform var(--dur-base) var(--ease-out);
}
.pano-start:hover .pano-start-badge { transform: scale(1.07); }
.pano-start-badge svg { width: 28px; height: 28px; }
.pano-start-txt { position: relative; z-index: 1; font-weight: 800; font-size: 1.05rem; line-height: 1.35; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.pano-start-txt small { display: block; font-weight: 600; font-size: 0.85rem; opacity: 0.85; }

/* hint that fades once the user starts dragging */
.pano-hint {
	position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
	z-index: 3; pointer-events: none; white-space: nowrap;
	background: rgba(8, 12, 26, 0.72); color: #e8ecf8; font-size: 0.85rem;
	padding: 0.35rem 0.9rem; border-radius: 999px; backdrop-filter: blur(2px);
	opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.pano-live .pano-hint { opacity: 1; }
.pano-hint-out { opacity: 0; }
.pano-error {
	position: absolute; inset: 0; z-index: 4; display: flex;
	align-items: center; justify-content: center; padding: 1.5rem;
	background: #101a33; color: #e8ecf8; text-align: center; font-weight: 600;
}
.pano-caption { margin-top: 0.7rem; font-size: 0.9rem; color: var(--shki-muted); }
.pano-live .pano-start { display: none; }

/* Pannellum's own chrome, tuned to the site palette */
.shki-pano .pnlm-container { font-family: inherit; }
.shki-pano .pnlm-controls { margin: 10px; }
.shki-pano .pnlm-controls-container { display: flex; }
.shki-pano .pnlm-btn-container { margin-right: 6px; }
.shki-pano .pnlm-btn {
	opacity: 0.8; transition: opacity var(--dur-base) var(--ease-out);
	box-shadow: none; border-radius: 0.6rem;
}
.shki-pano .pnlm-btn:hover { opacity: 1; }
.shki-pano .pnlm-load-box { display: none; }
.shki-pano .pnlm-lbox { width: 90px; }
.shki-pano .pnlm-tooltip span { font-size: 1rem; padding: 8px 12px; }
.shki-pano .pnlm-panorama { cursor: grab; }
.shki-pano .pnlm-panorama:active { cursor: grabbing; }

body.dark .pano-frame { background: #131a30; border-color: #2e3c66; box-shadow: none; }
body.dark .pano-caption { color: #aab4d8; }
body.a11y-hc-bw .pano-frame { background: #000 !important; border: 2px solid #fff; }
body.a11y-hc-bw .pano-start { background: #000; }
body.a11y-hc-bw .pano-start::after { background: rgba(0, 0, 0, 0.7); }
body.a11y-hc-bw .pano-start-txt { color: #fff !important; }
body.a11y-hc-bw .pano-caption { color: #fff !important; }

@media (max-width: 575px) {
	.pano-frame { aspect-ratio: 4 / 3; }
	.pano-start-badge { width: 52px; height: 52px; }
	.pano-start-badge svg { width: 22px; height: 22px; }
	.pano-start-txt { font-size: 0.95rem; }
}
@media (hover: none), (pointer: coarse) {
	.pano-start:hover .pano-start-badge { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.pano-start, .pano-start-badge, .pano-hint { transition: none !important; }
}
/* ---------- Panorama: fullscreen ----------
   CSS fullscreen is the fallback that works on every phone, including iOS
   where the Fullscreen API is unavailable for plain elements. When the API
   does work, JS also enters real fullscreen so the screen can be locked
   to landscape. */
.pano-fs {
	position: fixed; inset: 0; z-index: 3000; margin: 0;
	background: #000; overscroll-behavior: contain;
}
.pano-fs .pano-frame {
	position: absolute; inset: 0;
	width: 100%; height: 100%; aspect-ratio: auto;
	border-radius: 0; border: 0; box-shadow: none;
}
.pano-fs .pano-caption { display: none; }
.pano-fs .pano-hint { bottom: 20px; }
html.pano-lock, html.pano-lock body { overflow: hidden !important; }

/* our own fullscreen / collapse button */
.pano-fs-btn {
	position: absolute; top: 10px; right: 10px; z-index: 5;
	width: 42px; height: 42px; padding: 0; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid #ffffff44; border-radius: 0.7rem;
	background: rgba(10, 15, 30, 0.55); color: #fff;
	backdrop-filter: blur(2px);
	opacity: 0; pointer-events: none;
	transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-press) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.pano-live .pano-fs-btn { opacity: 1; pointer-events: auto; }
.pano-fs-btn:hover { background: rgba(20, 28, 52, 0.8); }
.pano-fs-btn:active { transform: scale(0.93); }
.pano-fs-btn svg { width: 20px; height: 20px; }
/* swap the icon to "collapse" while fullscreen */
.pano-fs-btn .pano-i-exit { display: none; }
.pano-fs .pano-fs-btn .pano-i-enter { display: none; }
.pano-fs .pano-fs-btn .pano-i-exit { display: block; }

body.dark .pano-fs { background: #000; }
body.a11y-hc-bw .pano-fs-btn { background: #000 !important; border: 2px solid #fff; }

@media (max-width: 575px) {
	/* Bigger hit target on a phone, thumb-reachable in the top corner. */
	.pano-fs-btn { width: 48px; height: 48px; top: 8px; right: 8px; }
	.pano-fs-btn svg { width: 23px; height: 23px; }
}
@media (prefers-reduced-motion: reduce) {
	.pano-fs-btn { transition: none !important; }
}
/* ---------- Panorama: true fullscreen on iPhone ----------
   iOS Safari cannot enter element fullscreen (support was added in 17.2 and
   pulled back in 17.4; WebKit bug closed as WONTFIX). So the best we can do in
   a browser tab is fill the visual viewport with no letterboxing: black
   behind the canvas and dvh sizing so Safari's collapsing toolbars cannot
   leave white gaps. Added to the Home Screen (standalone) the same CSS fills
   the real screen with no browser chrome at all. */
.pano-fs, .pano-fs .pano-frame, .pano-fs .pano-holder, .pano-fs .pnlm-container {
	background: #000 !important;
}
.pano-fs .pano-frame {
	position: fixed; top: 0; left: 0;
	width: 100vw; height: 100vh; height: 100dvh;
}

/* Keep the controls clear of the notch and the home indicator. */
.pano-fs-btn {
	top: calc(10px + env(safe-area-inset-top));
	right: calc(10px + env(safe-area-inset-right));
}
.pano-fs .pano-hint { bottom: calc(16px + env(safe-area-inset-bottom)); }
.shki-pano .pnlm-controls { margin-top: calc(10px + env(safe-area-inset-top)); }

/* Site-wide safe areas, active once viewport-fit=cover is set. */
.shki-nav { padding-top: env(safe-area-inset-top); }
.cookie-bar { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.cookie-line { padding-bottom: calc(0.85rem + env(safe-area-inset-bottom)); }
.theme-fab {
	right: calc(22px + env(safe-area-inset-right));
	bottom: calc(22px + env(safe-area-inset-bottom));
}
.shki-lb-close {
	top: calc(18px + env(safe-area-inset-top));
	right: calc(22px + env(safe-area-inset-right));
}
.shki-lb-count { bottom: calc(20px + env(safe-area-inset-bottom)); }

@media (max-width: 575px) {
	.pano-fs-btn {
		width: 48px; height: 48px;
		top: calc(8px + env(safe-area-inset-top));
		right: calc(8px + env(safe-area-inset-right));
	}
	.theme-fab {
		right: calc(16px + env(safe-area-inset-right));
		bottom: calc(16px + env(safe-area-inset-bottom));
	}
}