/* blog: the page's own layout, moved into one file (shared menu/footer rules removed; faint greys darkened for accessibility) */

		.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease }
		.js .reveal.visible { opacity: 1; transform: translateY(0) }
		.reveal-delay-1 { transition-delay: .08s }
		.reveal-delay-2 { transition-delay: .16s }
		#blog-head { position: relative; background: #243A5E; padding: 96px 0 84px;
			text-align: center; overflow: hidden; isolation: isolate }
		#blog-head::before { content: ""; position: absolute; inset: 0; z-index: -1;
			background:
				radial-gradient(circle at 18% 28%, rgba(143,182,216,.20) 0%, transparent 42%),
				radial-gradient(circle at 82% 12%, rgba(46,158,107,.16) 0%, transparent 38%),
				radial-gradient(circle at 60% 96%, rgba(95,134,166,.22) 0%, transparent 48%) }
		#blog-head::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
			background-image:
				linear-gradient(rgba(143,182,216,.07) 1px, transparent 1px),
				linear-gradient(90deg, rgba(143,182,216,.07) 1px, transparent 1px);
			background-size: 54px 54px;
			-webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 30%, transparent 100%);
			mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 30%, transparent 100%) }
		@media (max-width:767px) { #blog-head { padding: 56px 0 48px } }

		#blog-head .tw-flag { display: inline-flex; align-items: center; gap: 8px;
			background: rgba(255,255,255,.08); color: #C9DCEC; font-size: 11px; font-weight: 800;
			letter-spacing: 2px; text-transform: uppercase; padding: 8px 16px; border-radius: 30px;
			margin-bottom: 22px; border: 1px solid rgba(143,182,216,.28) }
		#blog-head .tw-flag i { color: #8FB6D8; font-size: 15px }
		#blog-head h1 { color: #fff; font-weight: 900; letter-spacing: -1.6px; margin: 0 0 18px;
			font-size: clamp(34px, 5vw, 58px); line-height: 1.08 }
		#blog-head h1 .tw-hl { color: #8FB6D8 }
		#blog-head p { color: rgba(201,220,236,.9); font-size: 17.5px; line-height: 1.75;
			margin: 0 auto; max-width: 600px }
		#blog-head .tw-rule { width: 52px; height: 3px; border-radius: 3px; margin: 26px auto 0;
			background: linear-gradient(90deg, #8FB6D8 0%, #1B7A50 100%) }

        		#blog-head { position: relative; background: #EDF4FA; padding: 104px 0 88px;
			text-align: center; overflow: hidden; isolation: isolate }
		#blog-head::before { content: ""; position: absolute; inset: 0; z-index: -2;
			background:
				radial-gradient(ellipse 60% 50% at 20% 15%, rgba(255,255,255,.9) 0%, transparent 60%),
				radial-gradient(ellipse 55% 45% at 85% 80%, rgba(143,182,216,.22) 0%, transparent 62%),
				linear-gradient(180deg, #F4F9FD 0%, #E4EFF8 100%) }
		#blog-head::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .8;
			background-image:
				linear-gradient(rgba(36,58,94,.045) 1px, transparent 1px),
				linear-gradient(90deg, rgba(36,58,94,.045) 1px, transparent 1px);
			background-size: 56px 56px;
			-webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 25%, transparent 100%);
			mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 25%, transparent 100%) }
		@media (max-width:767px) { #blog-head { padding: 62px 0 52px } }

		#blog-head .tw-flag { display: inline-flex; align-items: center; gap: 8px;
			background: #fff; color: #243A5E; font-size: 11px; font-weight: 800;
			letter-spacing: 2px; text-transform: uppercase; padding: 8px 17px; border-radius: 30px;
			margin-bottom: 22px; border: 1px solid #CFE3F1;
			box-shadow: 0 4px 14px rgba(36,58,94,.07) }
		#blog-head .tw-flag i { color: #46688A; font-size: 15px }
		#blog-head h1 { color: #243A5E; font-weight: 900; letter-spacing: -1.6px; margin: 0 0 18px;
			font-size: clamp(34px, 5vw, 58px); line-height: 1.08 }
		#blog-head h1 .tw-hl { position: relative; display: inline-block; color: #243A5E }
		#blog-head h1 .tw-hl::after { content: ""; position: absolute; left: -2px; right: -2px;
			bottom: .1em; height: .34em; z-index: -1; border-radius: 3px;
			background: linear-gradient(90deg, rgba(143,182,216,.55) 0%, rgba(46,158,107,.32) 100%) }
		#blog-head p { color: #5a6b81; font-size: 17.5px; line-height: 1.75;
			margin: 0 auto; max-width: 600px }
		#blog-head .tw-rule { width: 54px; height: 3px; border-radius: 3px; margin: 28px auto 0;
			background: linear-gradient(90deg, #8FB6D8 0%, #1B7A50 100%) }
		#blog-list { background: #fff; padding: 76px 0 92px }
		@media (max-width:767px) { #blog-list { padding: 48px 0 60px } }

		.tw-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
			max-width: 1120px; margin: 0 auto; align-items: stretch }

		@media (max-width:980px) { .tw-posts { grid-template-columns: 1fr 1fr } }

		@media (max-width:640px) { .tw-posts { grid-template-columns: 1fr; max-width: 460px } }
		.tw-post { position: relative; display: flex; flex-direction: column; background: #fff;
			border: 1px solid #CFE3F1; border-radius: 16px; overflow: hidden;
			text-decoration: none !important;
			transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .3s ease }
		.tw-post::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
			background: linear-gradient(90deg, #8FB6D8 0%, #1B7A50 100%);
			transform: scaleX(0); transform-origin: right center;
			transition: transform .4s cubic-bezier(.4,0,.2,1); z-index: 2 }
		.tw-post:hover { transform: translateY(-8px); border-color: #8FB6D8;
			box-shadow: 0 22px 44px rgba(36,58,94,.16) }
		.tw-post:hover::after { transform: scaleX(1); transform-origin: left center }
		.tw-post:focus-visible { outline: 3px solid #1B7A50; outline-offset: 3px }

		.tw-post-shot { position: relative; overflow: hidden; border-bottom: 1px solid #E3EDF6 }
		.tw-post-shot::after { content: ""; position: absolute; inset: 0;
			background: linear-gradient(180deg, transparent 45%, rgba(36,58,94,.28) 100%);
			opacity: 0; transition: opacity .35s ease }
		.tw-post:hover .tw-post-shot::after { opacity: 1 }
		.tw-post-img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; display: block;
			background: #EDF4FA; transition: transform .55s cubic-bezier(.2,.7,.3,1) }
		.tw-post:hover .tw-post-img { transform: scale(1.06) }
		.tw-post-noimg { aspect-ratio: 16 / 9; background: #EDF4FA; display: flex;
			align-items: center; justify-content: center }
		.tw-post-noimg i { font-size: 40px; color: #8FB6D8; transition: transform .4s ease }
		.tw-post:hover .tw-post-noimg i { transform: scale(1.14) }

		.tw-post-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1 }
		.tw-post-meta { font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase;
			color: #46688A; font-weight: 800; margin-bottom: 11px }
		.tw-post h2 { font-size: 19px; font-weight: 800; color: #243A5E; line-height: 1.4;
			letter-spacing: -.3px; margin: 0 0 11px; transition: color .25s ease }
		.tw-post:hover h2 { color: #16263F }
		.tw-post p { font-size: 14.5px; color: #5b6882; line-height: 1.65; margin: 0 0 18px; flex: 1 }
		.tw-post-more { position: relative; display: inline-flex; align-items: center; gap: 8px;
			font-size: 14px; font-weight: 700; color: #243A5E; margin-top: auto;
			align-self: flex-start; padding-bottom: 4px }
		.tw-post-more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
			background: #243A5E; transform: scaleX(0); transform-origin: right center;
			transition: transform .35s cubic-bezier(.4,0,.2,1) }
		.tw-post:hover .tw-post-more::after { transform: scaleX(1); transform-origin: left center }
		.tw-post-more i { transition: transform .3s ease }
		.tw-post:hover .tw-post-more i { transform: translateX(5px) }
		.tw-state { text-align: center; padding: 60px 20px; color: #5b6882; font-size: 15.5px;
			line-height: 1.7 }
		.tw-skel { border: 1px solid #E3EDF6; border-radius: 16px; overflow: hidden }
		.tw-skel-img { aspect-ratio: 16/9; background: #EDF4FA }
		.tw-skel-line { height: 12px; background: #EDF4FA; border-radius: 6px; margin: 0 22px 11px }
		.tw-skel-line:first-of-type { margin-top: 22px; width: 55% }
		.tw-skel-line:last-of-type { margin-bottom: 26px; width: 80% }
		@keyframes twpulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
		.tw-skel > * { animation: twpulse 1.4s ease-in-out infinite }
		.tw-blog-cta { position: relative; max-width: 1000px; margin: 62px auto 0;
			padding: 36px 34px 34px 38px; background: #243A5E; border-radius: 16px;
			color: #fff; overflow: hidden; text-align: center }
		.tw-blog-cta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
			width: 4px; background: linear-gradient(180deg, #8FB6D8 0%, #46688A 100%) }
		.tw-blog-cta strong { display: block; font-size: 22px; font-weight: 900;
			letter-spacing: -.3px; margin-bottom: 10px }
		.tw-blog-cta p { font-size: 15px; color: #C9DCEC; line-height: 1.6; margin: 0 auto 22px;
			max-width: 520px }
		.tw-blog-cta a { display: inline-flex; align-items: center; gap: 9px; background: #fff;
			color: #243A5E !important; border-radius: 30px; padding: 13px 26px; font-size: 15px;
			font-weight: 800; text-decoration: none !important;
			transition: transform .2s ease, box-shadow .2s ease }
		.tw-blog-cta a:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.22) }
		.tw-blog-cta a:focus-visible { outline: 3px solid #1B7A50; outline-offset: 3px }
		@media (max-width:520px) { .tw-blog-cta { padding: 28px 20px 26px } }
		@media (max-width:767px) {
			#chat-widget-container, .chat-widget-container { bottom: 88px !important } }
		@media (prefers-reduced-motion: reduce) {
			.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important }
			.tw-post, .tw-post::after, .tw-post-img, .tw-post-more::after, .tw-post-more i,
			.tw-post-shot::after, .tw-blog-cta a { transition: none !important }
			.tw-post:hover, .tw-post:hover .tw-post-img, .tw-blog-cta a:hover { transform: none !important }
			.tw-skel > * { animation: none !important } }

		.tw-blog-cta a:hover { color: #fff !important; transform: none; box-shadow: none }

		@media (prefers-reduced-motion:reduce) {
			.tw-blog-cta a:hover { color: #243A5E !important } }
		#blog-head { padding-top: 168px }
		@media (max-width:991px) { #blog-head { padding-top: 152px } }
		@media (max-width:767px) { #blog-head { padding-top: 140px; padding-bottom: 52px } }
		@media (max-width:600px) { #blog-head { padding-top: 128px } }
		@media (max-width:767px) {
			#blog-head { padding-top: 40px } }