/* SIS Navigation: header, mega menu, mobile drawer and footer.
   Colors and sizes come from custom properties set in wp-admin
   (see sisn_css_vars()). Everything is scoped to .sisn so the Werkstatt
   theme's global rules for a, p, ul and button do not leak in. */

:root {
	--sisn-ink: #141414;
	--sisn-muted: #5b6b6b;
	--sisn-line: #e3e8e8;
	--sisn-tint: #eef4f3;
	--sisn-foot-ink: #d6e6e5;
	--sisn-ease: cubic-bezier(.2, .7, .2, 1);
	--sisn-top: var(--wp-admin--admin-bar--height, 0px);
	--sisn-bp: 1100px;
}

.sisn,
.sisn * {
	box-sizing: border-box;
}

.sisn {
	font-family: var(--sisn-font, inherit);
	color: var(--sisn-ink);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.sisn ul,
.sisn li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The theme sets 22px type on p, li, ul and "body a". Same weight as that
   rule (loaded later, so it wins) and below every class rule here. */
body :where(.sisn) :is(ul, li, a, div, span, button) {
	font-size: inherit;
	line-height: inherit;
}

.sisn a {
	text-decoration: none;
	box-shadow: none;
	display: inline;
}

.sisn button {
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	margin: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.sisn img {
	max-width: none;
}

.sisn-ico {
	flex-shrink: 0;
	display: block;
}

.sisn a:focus-visible,
.sisn button:focus-visible {
	outline: 2px solid var(--sisn-accent);
	outline-offset: 2px;
	border-radius: 6px;
}

.sisn-wrap {
	max-width: var(--sisn-max, 1280px);
	margin: 0 auto;
	padding: 0 32px;
}

.sisn-skip {
	position: absolute !important;
	left: 16px;
	top: -100px;
	z-index: 100001;
	background: var(--sisn-ink);
	color: #fff !important;
	padding: 10px 16px;
	border-radius: 8px;
}

.sisn-skip:focus {
	top: calc(var(--sisn-top) + 8px);
}

.sisn-anchor {
	display: block;
	height: 0;
}

.sisn-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--sisn-accent);
	color: var(--sisn-ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: 2px;
}

/* ---------- Theme leftovers while the new header is on ---------- */

body.sisn-on #wrapper > .header,
body.sisn-on #mobile-menu,
body.sisn-on .mobile-toggle-holder {
	display: none !important;
}

body.sisn-on .page-padding {
	padding-top: 0;
}

/* ---------- Header shell ---------- */

.sisn-head {
	position: relative;
	z-index: 1000;
	width: 100%;
}

.sisn-head.is-sticky {
	position: fixed;
	top: var(--sisn-top);
	left: 0;
	right: 0;
}

.sisn-spacer {
	height: calc(var(--sisn-bar-h) + 41px);
}

.sisn-head.is-overlay:not(.is-sticky) {
	position: absolute;
	left: 0;
	right: 0;
}

.sisn-fold {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .35s var(--sisn-ease);
}

.sisn-fold__in {
	overflow: hidden;
	min-height: 0;
}

.sisn-head.is-shrunk .sisn-fold {
	grid-template-rows: 0fr;
}

/* ---------- Announcement ---------- */

.sisn-notice {
	background: var(--sisn-accent);
	color: var(--sisn-ink);
	font-size: 14px;
}

.sisn-notice--primary {
	background: var(--sisn-primary);
	color: #fff;
}

.sisn-notice--alert {
	background: #b42318;
	color: #fff;
}

.sisn-notice__in {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.sisn-notice__text {
	flex-grow: 1;
	text-align: center;
}

.sisn .sisn-notice a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

.sisn-notice__close {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color .2s ease;
}

.sisn-notice__close:hover {
	background: rgba(0, 0, 0, .12);
}

.sisn-notice.is-closing {
	animation: sisnFoldUp .3s var(--sisn-ease) forwards;
}

@keyframes sisnFoldUp {
	to { opacity: 0; margin-top: -44px; }
}

/* ---------- Utility bar ---------- */

.sisn-util {
	background: var(--sisn-footer-bg);
	color: var(--sisn-foot-ink);
	font-size: 13px;
}

.sisn-util__in {
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.sisn-util__left,
.sisn-util__contact {
	display: flex;
	align-items: center;
	gap: 22px;
	min-width: 0;
}

.sisn .sisn-util a {
	color: var(--sisn-foot-ink);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color .2s ease;
}

.sisn .sisn-util a:hover {
	color: #fff;
}

.sisn-langs {
	display: flex;
	gap: 2px;
}

.sisn .sisn-langs .sisn-lang {
	padding: 3px 9px;
	border-radius: 4px;
	transition: background-color .25s ease, color .25s ease;
}

.sisn .sisn-langs .sisn-lang.is-on {
	background: var(--sisn-accent);
	color: var(--sisn-ink);
	font-weight: 600;
}

/* ---------- Main bar ---------- */

.sisn-bar {
	position: relative;
	background: #fff;
	border-bottom: 1px solid var(--sisn-line);
	transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.sisn-head.is-shrunk .sisn-bar {
	box-shadow: 0 6px 24px rgba(8, 47, 48, .08);
}

.sisn-bar__in {
	height: var(--sisn-bar-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	transition: height .35s var(--sisn-ease);
}

.sisn-head.is-shrunk .sisn-bar__in {
	height: var(--sisn-bar-h-shrunk);
}

.sisn-brand {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.sisn .sisn-brand a {
	display: flex;
	align-items: center;
}

.sisn-brand img {
	display: block;
	width: auto;
	height: var(--sisn-logo-h);
	transition: height .35s var(--sisn-ease);
}

.sisn-head.is-shrunk .sisn-bar .sisn-brand img {
	height: var(--sisn-logo-h-shrunk);
}

.sisn-brand__sep {
	width: 1px;
	/* Follows the logo height; % margins would be taken from the width. */
	align-self: stretch;
	margin: 8px 0;
	flex-shrink: 0;
	background: #d5dddd;
}

.sisn-nav {
	flex-grow: 1;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.sisn-menu {
	display: flex;
	align-items: stretch;
	gap: 2px;
}

.sisn .sisn-top-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	height: var(--sisn-bar-h);
	padding: 0 14px;
	border: 0;
	background: none;
	color: var(--sisn-ink);
	font-size: 16px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: color .2s ease, height .35s var(--sisn-ease);
}

.sisn-head.is-shrunk .sisn-top-link {
	height: var(--sisn-bar-h-shrunk);
}

.sisn .sisn-top-link::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: -1px;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--sisn-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .32s var(--sisn-ease);
}

.sisn .sisn-top-link:hover,
.sisn .sisn-top-link[aria-expanded="true"],
.sisn .sisn-top-link[aria-current="page"],
.sisn .sisn-top-link[data-current] {
	color: var(--sisn-primary);
}

.sisn .sisn-top-link:hover::after,
.sisn .sisn-top-link[aria-expanded="true"]::after,
.sisn .sisn-top-link[aria-current="page"],
.sisn .sisn-top-link[data-current]::after {
	transform: scaleX(1);
}

.sisn-top-link .sisn-ico {
	transition: transform .3s var(--sisn-ease);
}

.sisn-top-link[aria-expanded="true"] .sisn-ico {
	transform: rotate(180deg);
}

.sisn-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.sisn .sisn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--sisn-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.sisn .sisn-cta:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(8, 47, 48, .25);
	filter: brightness(1.08);
}

.sisn .sisn-cta:active {
	transform: scale(.98);
	box-shadow: none;
}

.sisn-cta .sisn-ico {
	transition: transform .2s ease;
}

.sisn-cta:hover .sisn-ico {
	transform: translateX(3px);
}

.sisn .sisn-iconbtn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #d5dddd;
	border-radius: 10px;
	background: #fff;
	color: var(--sisn-ink);
	cursor: pointer;
	transition: background-color .2s ease, transform .15s ease;
}

.sisn .sisn-iconbtn:active {
	transform: scale(.92);
}

.sisn-burger {
	display: none !important;
}

/* ---------- Mega menu ---------- */

.sisn-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 2;
	background: #fff;
	border-top: 1px solid var(--sisn-line);
	box-shadow: 0 24px 48px rgba(8, 47, 48, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	pointer-events: none;
	transition: opacity .2s ease, transform .3s var(--sisn-ease), visibility 0s linear .3s;
	max-height: calc(100vh - var(--sisn-top) - var(--sisn-bar-h));
	overflow-y: auto;
}

.sisn-mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition: opacity .25s ease, transform .35s var(--sisn-ease), visibility 0s;
}

/* Moving from one open menu to the next swaps panels without the slide. */
.sisn-head.is-swapping .sisn-mega {
	transition: none;
}

.sisn-mega__in {
	display: flex;
	gap: 40px;
	align-items: stretch;
	padding-top: 32px;
	padding-bottom: 36px;
}

/* Columns sit on a grid of --sisn-mcols tracks (the PHP works it out from
   the layout, the column count and each column's span). */
.sisn-mega__cols {
	display: grid;
	grid-template-columns: repeat(var(--sisn-mcols, 3), minmax(0, 1fr));
	gap: 28px 32px;
	align-content: start;
	flex-grow: 1;
	min-width: 0;
}

.sisn-col {
	min-width: 0;
}

/* A wide column takes two tracks and flows its links in two columns. */
.sisn-col.is-wide {
	grid-column: span var(--sisn-span, 2);
}

.sisn-col.is-wide > ul {
	columns: var(--sisn-span, 2);
	column-gap: 16px;
}

.sisn-col.is-wide > ul > li {
	break-inside: avoid;
}

.sisn-mega.is-open .sisn-col,
.sisn-mega.is-open .sisn-feature {
	animation: sisnUp .4s var(--sisn-ease) both;
}

.sisn-mega.is-open .sisn-col:nth-child(2) { animation-delay: .05s; }
.sisn-mega.is-open .sisn-col:nth-child(3) { animation-delay: .1s; }
.sisn-mega.is-open .sisn-col:nth-child(4) { animation-delay: .15s; }
.sisn-mega.is-open .sisn-col:nth-child(n+5) { animation-delay: .2s; }
.sisn-mega.is-open .sisn-feature { animation-delay: .1s; }

/* "lines" (auto from four columns up): columns split by thin lines,
   tighter type and a slimmer side card, so long Thai labels keep to a
   line or two. Every column draws a line on its left; the clip hides the
   line of the first column in each row. */
.sisn-mega--lines .sisn-mega__in,
.sisn-mega--list .sisn-mega__in,
.sisn-mega--cards .sisn-mega__in {
	gap: 28px;
}

.sisn-mega--lines .sisn-mega__cols {
	gap: 28px 0;
	margin-left: -15px;
	clip-path: inset(-20px -20px -20px 15px);
}

.sisn-mega--lines .sisn-col {
	padding: 0 6px 0 14px;
	border-left: 1px solid var(--sisn-line);
}

.sisn .sisn-mega--lines .sisn-col__title,
.sisn .sisn-mega--list .sisn-col__title {
	letter-spacing: .04em;
	border-bottom: 0;
	padding-bottom: 4px;
	margin-bottom: 2px;
}

.sisn .sisn-mega--lines .sisn-mlink {
	padding: 8px 12px;
}

.sisn .sisn-mega--lines .sisn-mlink__label {
	font-size: 15px;
}

.sisn .sisn-mega--lines .sisn-mlink__desc {
	font-size: 12.5px;
}

:is(.sisn-mega--lines, .sisn-mega--list, .sisn-mega--cards) :is(.sisn-feature, .sisn-mside) {
	width: 260px;
}

@media (max-width: 1240px) {
	:is(.sisn-mega--lines, .sisn-mega--list, .sisn-mega--cards) :is(.sisn-feature, .sisn-mside) {
		width: 230px;
	}
}

/* "list": labels only, close together, for menus with many links. */
.sisn-mega--list .sisn-mega__cols {
	gap: 24px 28px;
}

.sisn .sisn-mega--list .sisn-mlink {
	padding: 6px 12px;
}

.sisn .sisn-mega--list .sisn-mlink__label {
	font-size: 15px;
	font-weight: 400;
}

/* "cards": each column is a section of link cards, --sisn-mcols a row. */
.sisn-mega--cards .sisn-mega__cols {
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
}

.sisn-mega--cards .sisn-col > ul {
	display: grid;
	grid-template-columns: repeat(var(--sisn-mcols, 3), minmax(0, 1fr));
	gap: 12px;
}

.sisn .sisn-mega--cards .sisn-col__title {
	padding-left: 0;
	padding-right: 0;
	border-bottom: 0;
	margin-bottom: 4px;
}

.sisn .sisn-mega--cards .sisn-mlink {
	height: 100%;
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--sisn-line);
	border-radius: 12px;
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease;
}

.sisn .sisn-mega--cards .sisn-mlink:hover,
.sisn .sisn-mega--cards .sisn-mlink[aria-current="page"],
.sisn .sisn-mega--cards .sisn-mlink.has-subs[aria-expanded="true"] {
	background: #fff;
	border-color: color-mix(in srgb, var(--sisn-primary) 35%, transparent);
	box-shadow: 0 8px 20px rgba(8, 47, 48, .08);
	transform: translateY(-2px);
}

.sisn-mega--cards .sisn-mlink__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
}

.sisn-mega--cards .sisn-mlink.has-subs {
	align-items: flex-start;
}

.sisn-mega--cards .sisn-mlink__more {
	align-self: center;
}

/* Link icon, in every layout. */
.sisn .sisn-mlink.has-icon {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}

.sisn-mlink__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--sisn-tint);
	color: var(--sisn-primary);
	transition: background-color .18s ease, color .18s ease;
}

.sisn .sisn-mlink:hover .sisn-mlink__icon,
.sisn .sisn-mlink[aria-current="page"] .sisn-mlink__icon,
.sisn .sisn-mlink[aria-expanded="true"] .sisn-mlink__icon {
	background: var(--sisn-primary);
	color: #fff;
}

.sisn-mega--list .sisn-mlink__icon {
	width: 26px;
	height: 26px;
	border-radius: 7px;
}

.sisn .sisn-mlink.has-icon .sisn-mlink__text {
	flex: 1 1 auto;
	align-self: center;
}

/* Link tag (PDF, Video…). */
.sisn-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 0 6px;
	border: 1px solid var(--sisn-line);
	border-radius: 4px;
	color: var(--sisn-muted);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .03em;
	line-height: 1.6;
	white-space: nowrap;
}

@keyframes sisnUp {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.sisn .sisn-col__title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sisn-muted);
	padding: 0 12px 8px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--sisn-line);
}

.sisn .sisn-mlink {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border-radius: 8px;
	color: var(--sisn-ink);
	transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.sisn .sisn-mlink:hover,
.sisn .sisn-mlink[aria-current="page"] {
	background: var(--sisn-tint);
	color: var(--sisn-primary);
	transform: translateX(3px);
}

/* Inline, so the badge, tag and new-tab mark follow the text and wrap
   with it instead of squeezing it into a narrow box. */
.sisn-mlink__label {
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
}

.sisn-mlink__label :is(.sisn-badge, .sisn-tag, .sisn-ico) {
	margin-left: 6px;
	vertical-align: 1px;
}

.sisn-mlink__label .sisn-ico {
	display: inline-block;
	color: var(--sisn-muted);
}

.sisn-mlink__desc {
	font-size: 13px;
	color: var(--sisn-muted);
	line-height: 1.4;
}

/* Third level, desktop: a link with sub-links shows them in the side
   column (where the feature card sits) while it is pointed at or focused. */
.sisn .sisn-mlink.has-subs {
	width: 100%;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.sisn-mlink__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sisn-mlink__more {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: var(--sisn-muted);
	transition: background-color .18s ease, color .18s ease, transform .25s var(--sisn-ease);
}

.sisn-mlink__more .sisn-ico {
	transform: rotate(-90deg);
}

.sisn .sisn-mlink.has-subs:hover,
.sisn .sisn-mlink.has-subs[aria-expanded="true"] {
	background: var(--sisn-tint);
	color: var(--sisn-primary);
	transform: none;
}

.sisn-mlink.has-subs[aria-expanded="true"] .sisn-mlink__more {
	background: var(--sisn-primary);
	color: #fff;
	transform: translateX(3px);
}

.sisn-mside {
	width: 300px;
	flex-shrink: 0;
	display: grid;
}

/* The feature card and the panels share one cell, so switching never
   changes the height of the menu. */
.sisn-mside > * {
	grid-area: 1 / 1;
	width: auto;
}

.sisn-mside > .is-off {
	visibility: hidden;
}

/* Hint shown at rest when the menu has no feature card. */
.sisn-mhint {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	border: 1px dashed var(--sisn-line);
	border-radius: 14px;
	color: var(--sisn-muted);
}

.sisn-mhint__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--sisn-tint);
	color: var(--sisn-primary);
}

.sisn-mhint__mark .sisn-ico {
	transform: rotate(-90deg);
}

.sisn .sisn-mhint__text {
	font-size: 14px;
	line-height: 1.5;
}

/* The link whose sub-links hold the page being viewed. */
.sisn .sisn-mlink.has-subs.is-current-group {
	color: var(--sisn-primary);
}

.sisn-mpanel {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	border-radius: 14px;
	background: var(--sisn-tint);
	animation: sisnPanel .25s var(--sisn-ease) both;
}

/* Hidden panels keep their place, so the column is as tall as the
   longest one and the menu stays still while pointing around. */
.sisn-mpanel[hidden] {
	display: flex;
	visibility: hidden;
	animation: none;
}

@keyframes sisnPanel {
	from { opacity: 0; transform: translateX(-8px); }
	to { opacity: 1; transform: none; }
}

.sisn .sisn-mpanel__title {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--sisn-primary);
}

.sisn .sisn-mpanel__desc {
	font-size: 13px;
	line-height: 1.4;
	color: var(--sisn-muted);
}

.sisn .sisn-mpanel__list {
	margin: 6px -10px 4px;
}

.sisn .sisn-mpanel__link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--sisn-ink);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	transition: background-color .18s ease, color .18s ease;
}

.sisn .sisn-mpanel__link > .sisn-ico:last-child {
	margin-left: auto;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .18s ease, transform .18s ease;
}

.sisn .sisn-mpanel__link:hover,
.sisn .sisn-mpanel__link:focus-visible,
.sisn .sisn-mpanel__link[aria-current="page"] {
	background: #fff;
	color: var(--sisn-primary);
}

.sisn .sisn-mpanel__link:hover > .sisn-ico:last-child,
.sisn .sisn-mpanel__link:focus-visible > .sisn-ico:last-child {
	opacity: 1;
	transform: none;
}

.sisn .sisn-mpanel__link .sisn-badge {
	margin-left: 0;
}

.sisn-mpanel__all {
	margin-top: auto;
	padding-top: 8px;
}

.sisn-feature {
	width: 300px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	border-radius: 14px;
	background: var(--sisn-tint);
}

.sisn-feature__bar {
	width: 36px;
	height: 4px;
	border-radius: 2px;
	background: var(--sisn-accent);
}

.sisn .sisn-feature__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sisn-primary-dark);
}

.sisn .sisn-feature__body {
	font-size: 14px;
	line-height: 1.55;
	color: #3d4c4c;
}

/* On its own the card is as tall as what it holds, not the columns. */
.sisn-mega__in > .sisn-feature {
	align-self: flex-start;
}

.sisn-feature.has-img {
	padding-top: 0;
	overflow: hidden;
}

.sisn-feature__img {
	display: block;
	width: calc(100% + 48px);
	max-width: none;
	height: 150px;
	margin: 0 -24px 6px;
	object-fit: cover;
}

.sisn .sisn-feature__contact {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.5;
	color: #3d4c4c;
}

.sisn-feature__contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.sisn-feature__contact .sisn-ico {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--sisn-primary);
}

.sisn .sisn-feature__contact a {
	color: inherit;
	text-decoration: none;
}

.sisn .sisn-feature__contact a:hover {
	color: var(--sisn-primary);
	text-decoration: underline;
}

.sisn .sisn-feature__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sisn-primary);
}

.sisn-feature__cta .sisn-ico {
	transition: transform .2s ease;
}

.sisn-feature__cta:hover .sisn-ico {
	transform: translateX(4px);
}

.sisn-scrim {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 100vh;
	z-index: 1;
	background: rgba(8, 47, 48, .28);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease, visibility 0s linear .3s;
}

.sisn-head.is-mega .sisn-scrim {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .3s ease, visibility 0s;
}

/* ---------- Transparent header over a hero ---------- */

.sisn-head.is-overlay:not(.is-solid):not(.is-mega):not(.is-drawer-open) .sisn-bar {
	background: transparent;
	border-bottom-color: rgba(255, 255, 255, .2);
}

.sisn-head.is-overlay:not(.is-solid):not(.is-mega):not(.is-drawer-open) .sisn-util {
	background: rgba(0, 0, 0, .25);
}

.sisn-head.is-overlay:not(.is-solid):not(.is-mega):not(.is-drawer-open) .sisn-top-link {
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

.sisn-head.is-overlay:not(.is-solid):not(.is-mega):not(.is-drawer-open) .sisn-bar .sisn-brand {
	background: #fff;
	border-radius: 12px;
	padding: 6px 12px;
}

.sisn-head.is-overlay:not(.is-solid):not(.is-mega):not(.is-drawer-open) .sisn-burger {
	background: rgba(255, 255, 255, .9);
}

/* ---------- Mobile drawer ---------- */

/* Opens under the header bar (the script sets top to where the bar ends)
   and fills the screen below it, so bar and menu read as one piece. */
.sisn-drawer {
	position: fixed;
	top: var(--sisn-top);
	left: 0;
	right: 0;
	bottom: 0;
	/* Above chat widgets such as Messenger. */
	z-index: 2147483646;
	display: flex;
	flex-direction: column;
	background: #fff;
	transform: translateX(100%);
	transition: transform .45s var(--sisn-ease);
}

/* The header sits above the open menu (and the chat widgets), so its
   burger can close it. */
.sisn-head.is-drawer-open {
	z-index: 2147483647;
}

.sisn-head.is-drawer-open .sisn-bar {
	box-shadow: none;
}

/* Burger: three lines when closed, a cross when open. */
.sisn-burger {
	position: relative;
}

.sisn-burger__open,
.sisn-burger__close {
	display: inline-flex;
	transition: opacity .2s ease, transform .3s var(--sisn-ease);
}

.sisn-burger__close {
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: rotate(-90deg) scale(.6);
}

.sisn-burger[aria-expanded="true"] .sisn-burger__open {
	opacity: 0;
	transform: rotate(90deg) scale(.6);
}

.sisn-burger[aria-expanded="true"] .sisn-burger__close {
	opacity: 1;
	transform: none;
}

.sisn .sisn-burger[aria-expanded="true"] {
	border-color: transparent;
	background: var(--sisn-tint);
	color: var(--sisn-primary);
}

.sisn-drawer[hidden] {
	display: none;
}

.sisn-drawer.is-open {
	transform: none;
}

.sisn-drawer.is-open .sisn-acc-item {
	animation: sisnIn .45s var(--sisn-ease) both;
}

.sisn-drawer.is-open .sisn-acc-item:nth-child(2) { animation-delay: .05s; }
.sisn-drawer.is-open .sisn-acc-item:nth-child(3) { animation-delay: .1s; }
.sisn-drawer.is-open .sisn-acc-item:nth-child(4) { animation-delay: .15s; }
.sisn-drawer.is-open .sisn-acc-item:nth-child(n+5) { animation-delay: .2s; }
.sisn-drawer.is-open .sisn-drawer__foot { animation: sisnRise .45s var(--sisn-ease) .2s both; }

@keyframes sisnIn {
	from { opacity: 0; transform: translateX(24px); }
	to { opacity: 1; transform: none; }
}

@keyframes sisnRise {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

html.sisn-locked,
html.sisn-locked body {
	overflow: hidden;
}

.sisn-drawer__nav {
	flex-grow: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 16px 20px;
}

.sisn .sisn-acc-btn {
	width: 100%;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 0 4px;
	border: 0;
	border-bottom: 1px solid var(--sisn-line);
	background: none;
	color: var(--sisn-ink);
	font-size: 18px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: color .2s ease;
}

.sisn .sisn-acc-btn[aria-expanded="true"] {
	color: var(--sisn-primary);
}

.sisn-acc-btn .sisn-ico {
	transition: transform .3s var(--sisn-ease);
}

.sisn-acc-btn[aria-expanded="true"] .sisn-ico {
	transform: rotate(180deg);
}

.sisn-acc {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .35s var(--sisn-ease);
}

.sisn-acc.is-open {
	grid-template-rows: 1fr;
}

.sisn-acc__clip {
	overflow: hidden;
	min-height: 0;
}

/* Folded sections leave the tab order once they have closed. */
.sisn-acc:not(.is-open) > .sisn-acc__clip {
	visibility: hidden;
	transition: visibility 0s linear .35s;
}

/* Third level, phones: a screen that slides over the menu. */
.sisn-drawer__body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.sisn-drawer__nav {
	transition: transform .5s var(--sisn-ease), opacity .4s ease, visibility 0s;
}

.sisn-drawer__body.has-drill .sisn-drawer__nav {
	transform: translateX(-24%);
	opacity: 0;
	visibility: hidden;
	transition: transform .5s var(--sisn-ease), opacity .4s ease, visibility 0s linear .5s;
}

.sisn .sisn-acc__link.sisn-drill-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 16px;
	text-align: left;
	cursor: pointer;
}

.sisn-drill-btn > .sisn-ico {
	flex-shrink: 0;
	box-sizing: content-box;
	padding: 5px;
	border-radius: 50%;
	background: var(--sisn-tint);
	color: var(--sisn-primary);
	transform: rotate(-90deg);
}

.sisn .sisn-acc__link.sisn-drill-btn.is-current {
	color: var(--sisn-primary);
	font-weight: 600;
}

.sisn-drill {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 16px 20px;
	background: #fff;
	box-shadow: -12px 0 24px rgba(8, 47, 48, .08);
	transform: translateX(100%);
	transition: transform .5s var(--sisn-ease);
}

.sisn-drill.is-open {
	transform: none;
}

.sisn .sisn-drill__back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	margin: 0 0 4px -8px;
	padding: 0 12px 0 4px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--sisn-primary);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.sisn-drill__back .sisn-ico {
	transform: rotate(90deg);
}

.sisn .sisn-drill__back:hover {
	background: var(--sisn-tint);
}

.sisn .sisn-drill__title {
	padding: 8px 4px 12px;
	border-bottom: 1px solid var(--sisn-line);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--sisn-ink);
}

.sisn .sisn-drill__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	margin: 10px 0 6px;
	padding: 0 16px;
	border-radius: 10px;
	background: var(--sisn-tint);
	color: var(--sisn-primary);
	font-size: 15px;
	font-weight: 600;
}

.sisn-drill__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 6px;
}

/* Not inside an accordion, so not waiting for one to open. */
.sisn .sisn-drill .sisn-acc__link {
	opacity: 1;
	transform: none;
}

.sisn-acc__in {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 0 12px;
	border-bottom: 1px solid var(--sisn-line);
}

.sisn-acc__title,
.sisn .sisn-acc__link {
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .2s ease, transform .2s ease, background-color .18s ease;
}

.sisn-acc.is-open .sisn-acc__title,
.sisn-acc.is-open .sisn-acc__link {
	opacity: 1;
	transform: none;
	transition: opacity .3s ease .08s, transform .3s ease .08s, background-color .18s ease;
}

.sisn .sisn-acc__title {
	padding: 10px 16px 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sisn-muted);
}

.sisn .sisn-acc__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 44px;
	padding: 11px 16px;
	border-radius: 8px;
	color: var(--sisn-ink);
	font-size: 16px;
}

.sisn .sisn-acc__link:hover,
.sisn .sisn-acc__link[aria-current="page"] {
	background: var(--sisn-tint);
	color: var(--sisn-primary);
}

.sisn-langs--drawer {
	display: flex;
	gap: 8px;
	margin-top: 24px;
}

.sisn .sisn-langs--drawer .sisn-lang {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid #d5dddd;
	border-radius: 999px;
	color: var(--sisn-ink);
	font-size: 14px;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.sisn .sisn-langs--drawer .sisn-lang.is-on {
	background: var(--sisn-primary-dark);
	border-color: var(--sisn-primary-dark);
	color: #fff;
	font-weight: 600;
}

.sisn-drawer__contact {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 20px;
	font-size: 14px;
}

.sisn .sisn-drawer__contact a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	color: #3d4c4c;
}

.sisn-drawer__foot {
	flex-shrink: 0;
	padding: 12px 16px 20px;
	border-top: 1px solid var(--sisn-line);
}

.sisn .sisn-cta--block {
	display: flex;
	width: 100%;
	min-height: 52px;
	font-size: 16px;
}

/* ---------- Footer ---------- */

.sisn-foot {
	position: relative;
	overflow: hidden;
	background: var(--sisn-footer-bg);
	color: var(--sisn-foot-ink);
	font-size: 15px;
}

.sisn-foot__in {
	padding-top: 64px;
	padding-bottom: 48px;
}

.sisn-foot__grid {
	display: grid;
	grid-template-columns: 1.5fr repeat(var(--sisn-foot-cols, 3), minmax(0, 1fr));
	gap: 48px;
}

.sisn-foot__grid.has-mark-side {
	grid-template-columns: 1.4fr repeat(var(--sisn-foot-cols, 3), minmax(0, 1fr)) var(--sisn-mark-size);
	column-gap: 40px;
}

/* ---------- Footer badge ---------- */

.sisn-foot__mark {
	grid-column: 1 / -1;
	justify-self: end;
	pointer-events: none;
	user-select: none;
}

.sisn-foot__mark--center {
	justify-self: center;
}

.sisn-foot__mark--left {
	justify-self: start;
}

.has-mark-side .sisn-foot__mark--right {
	grid-column: auto;
	align-self: end;
}

.sisn-foot__mark img,
.sisn-foot__mark svg {
	display: block;
	width: var(--sisn-mark-size, 180px);
	max-width: 100%;
	height: auto;
	opacity: var(--sisn-mark-opacity, .3);
	color: #fff;
}

.sisn-foot__mark--accent svg {
	color: var(--sisn-accent);
}

/* front.js adds .is-pending, then .is-in once the footer is in view; without
   JS the picture simply shows. */
.sisn-foot__mark.is-pending:not(.is-in) img,
.sisn-foot__mark.is-pending:not(.is-in) svg {
	visibility: hidden;
}

/* A chosen image fades in. */
.sisn-foot__mark.is-in img {
	animation: sisnFade 1.2s ease both;
}

@keyframes sisnFade {
	from { opacity: 0; }
}

/* ---------- Rice: grows from the ground up ---------- */

.sisn-rice--drawn .r-stem,
.sisn-rice--drawn .r-axis {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
}

.sisn-rice--drawn .r-stem {
	stroke-width: 3.2;
}

.sisn-rice--drawn .r-axis {
	stroke-width: 1.8;
}

.sisn-rice--drawn .r-leaf,
.sisn-rice--drawn .r-grain {
	transform-box: fill-box;
}

.sisn-rice--drawn .r-grain {
	transform-origin: 0 50%;
}

/* Each head sways around the point where it leaves the stem. */
.sisn-rice--drawn .r-head {
	transform-box: view-box;
}

/* 1. The stem draws upward. */
.is-in .sisn-rice--drawn .r-stem {
	stroke-dasharray: 1;
	animation: sisnDraw 1.2s cubic-bezier(.3, .6, .3, 1) .1s both;
}

/* 2. Leaves unfurl from their base, one after another. */
.is-in .sisn-rice--drawn .r-leaf {
	animation: sisnLeaf 1.1s var(--sisn-ease) var(--d) both;
}

/* 3. Each panicle's stalk branches out. */
.is-in .sisn-rice--drawn .r-axis {
	stroke-dasharray: 1;
	animation: sisnDraw .9s ease-out calc(1.3s + var(--k) * .2s) both;
}

/* 4. Grains swell one by one, from the stalk's base to its tip. */
.is-in .sisn-rice--drawn .r-grain {
	animation: sisnGrain .5s cubic-bezier(.34, 1.4, .5, 1) calc(1.5s + var(--k) * .2s + var(--g) * .09s) both;
}

/* 5. Then the heads move gently in the wind. */
.is-in .sisn-rice--drawn .r-head {
	animation: sisnSway var(--sway) ease-in-out calc(3.4s + var(--k) * .5s) infinite;
}

/* ---------- Rice of the SIS badge (HD) ----------
   rice-hd.html stacks one small svg per part, all filling the same box, in
   plain wrappers for the heads and the tall leaves. Every movement is a
   transform / rotate / scale of those HTML boxes, which the browser runs on
   the compositor: smooth even while the page is busy. (Animating parts
   inside one svg is redrawn on the main thread every frame and stutters.)

   Every part grows from its own base point (transform-origin as % of the
   box): curls sprout, leaves unfurl, grains bloom from the end that faces
   their stalk. Then a gold light runs through the parts and the heads sway;
   a hover or tap sends a gust through them (front.js). */
.sisn-foot__mark .sisn-rice--hd {
	position: relative;
	width: var(--sisn-mark-size, 180px);
	max-width: 100%;
	aspect-ratio: 3444 / 4388;
	color: #fff;
	pointer-events: auto;
}

.sisn-foot__mark--accent .sisn-rice--hd {
	color: var(--sisn-accent);
}

.sisn-rice--hd .r-plant,
.sisn-rice--hd .r-head,
.sisn-rice--hd .r-sway,
.sisn-rice--hd .r-lean,
.sisn-rice--hd .r-part {
	position: absolute;
	inset: 0;
}

.sisn-rice--hd .r-plant {
	opacity: var(--sisn-mark-opacity, .35);
}

/* While the gold light runs through, the plant (and so the gold) shows at
   full strength, then settles back to the chosen opacity. Same 12s cycle as
   the light: up just before the first part is lit (.9s in), back down once
   the last glow has faded (about 3.4s in). */
.is-in .sisn-rice--hd .r-plant {
	animation: sisnLightUp 12s ease-in-out var(--shine-at) infinite;
}

.sisn-rice--hd .r-part {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	overflow: visible;
	opacity: 1;
	color: inherit;
}

.sisn-foot__mark {
	contain: layout;
}

/* front.js marks the badge .is-visible while it is on screen; off screen
   every animation waits. */
.sisn-foot__mark.is-pending:not(.is-visible) .sisn-rice--hd * {
	animation-play-state: paused !important;
}

/* When the gold light starts running through the plant; every 12s after
   that (it restarts with each grow cycle when looping). Each part lights up
   at its own --hit moment, so the light travels across the real plant. */
.sisn-rice--hd {
	--shine-at: 3.4s;
}

.is-in .sisn-rice--hd .r-curl {
	animation:
		sisnUnfurl var(--dur) cubic-bezier(.2, .9, .3, 1) var(--d) both,
		sisnCatchLight 12s ease-out calc(var(--shine-at) + var(--hit)) infinite;
}

/* Wind uses the rotate property, which adds to the transform of the grow,
   fold and gust animations instead of replacing it, so the plant keeps
   moving through all of them.

   Each wind layer is one smooth swing between two angles (ease-in-out,
   alternate): with more keyframes the easing applies to every segment and
   the motion stops at each one, which looks jerky. The irregular feel comes
   from stacking layers whose periods never line up (head, ripple, grain,
   leaf, each with its own length and phase from rice-hd.html). */
.is-in .sisn-rice--hd .r-leaf {
	animation:
		sisnUnfurl var(--dur) cubic-bezier(.2, .9, .3, 1) var(--d) both,
		sisnLeafWind calc(var(--wl) / 2) ease-in-out calc(-1 * var(--wp)) infinite alternate,
		sisnCatchLight 12s ease-out calc(var(--shine-at) + var(--hit)) infinite;
}

.is-in .sisn-rice--hd .r-grain {
	animation:
		sisnBloom .65s cubic-bezier(.3, 1.45, .5, 1) var(--d) both,
		sisnFlutter calc(var(--fl) / 2) ease-in-out calc(-1 * var(--fp)) infinite alternate,
		sisnGlint 12s ease-out calc(var(--shine-at) + var(--hit)) infinite;
}

/* The tall leaves lean as a whole besides flexing. */
.is-in .sisn-rice--hd .r-lean {
	animation: sisnLean 4.6s ease-in-out -2s infinite alternate;
}

/* Each head: a slow swing, and a quicker ripple on top of it. */
.is-in .sisn-rice--hd .r-head {
	animation: sisnWindSlow calc(var(--wind) / 2) ease-in-out calc(-1 * var(--ph)) infinite alternate;
}

.is-in .sisn-rice--hd .r-sway {
	animation:
		sisnWindQuick calc(var(--wind) * .19) ease-in-out calc(-1.3s * var(--k)) infinite alternate,
		sisnNod 12s linear calc(var(--shine-at) + var(--hit)) infinite;
}

/* The gust is listed after the wind with the same values, so the wind
   carries on underneath instead of restarting. */
.is-in .sisn-rice--hd .r-head.is-gust {
	animation:
		sisnWindSlow calc(var(--wind) / 2) ease-in-out calc(-1 * var(--ph)) infinite alternate,
		sisnGust 1.9s linear calc(var(--k) * .09s) both;
}

/* Loop: before growing again the plant folds back into the ground in
   reverse: grains shrink, then leaves fold to their base, last one first. */
.is-out .sisn-rice--hd .r-grain {
	animation:
		sisnShrink .45s cubic-bezier(.5, 0, .75, 0) both,
		sisnFlutter calc(var(--fl) / 2) ease-in-out calc(-1 * var(--fp)) infinite alternate;
}

.is-out .sisn-rice--hd .r-leaf {
	animation:
		sisnFold .6s cubic-bezier(.5, 0, .75, 0) calc(.15s + (1.3s - var(--d)) * .35) both,
		sisnLeafWind calc(var(--wl) / 2) ease-in-out calc(-1 * var(--wp)) infinite alternate;
}

.is-out .sisn-rice--hd .r-curl {
	animation: sisnFold .6s cubic-bezier(.5, 0, .75, 0) calc(.15s + (1.3s - var(--d)) * .35) both;
}

@keyframes sisnShrink {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: scale(0) rotate(-20deg); }
}

@keyframes sisnFold {
	from { opacity: 1; transform: none; }
	70% { opacity: 1; }
	to { opacity: 0; transform: scale(.04) rotate(-16deg); }
}

@keyframes sisnUnfurl {
	0% { opacity: 0; transform: scale(.04) rotate(-16deg); }
	35% { opacity: 1; }
	75% { transform: scale(1.025) rotate(.8deg); }
	100% { opacity: 1; transform: none; }
}

@keyframes sisnBloom {
	0% { opacity: 0; transform: scale(0) rotate(-30deg); }
	60% { opacity: 1; }
	100% { opacity: 1; transform: none; }
}

/* Wind layers: one smooth swing each (run with alternate). Heads lean with
   the wind more than against it. */
@keyframes sisnLean {
	from { rotate: .2deg; }
	to { rotate: -1.1deg; }
}

@keyframes sisnWindSlow {
	from { rotate: -1deg; }
	to { rotate: 2.8deg; }
}

@keyframes sisnWindQuick {
	from { rotate: -.5deg; }
	to { rotate: .8deg; }
}

/* Grains hang loosely from the stalk and tremble on their own. */
@keyframes sisnFlutter {
	from { rotate: calc(var(--fa) * -.5deg); }
	to { rotate: calc(var(--fa) * 1deg); }
}

/* Long leaves flex a little, the tip moving most. */
@keyframes sisnLeafWind {
	from { rotate: calc(var(--wa) * -.5deg); }
	to { rotate: calc(var(--wa) * 1deg); }
}

/* Gust: a damped swing, 7.2·e^(-3.2t)·sin(2π·1.7t) with a soft start and a
   soft landing, sampled every 5% and played linearly, so the speed changes
   smoothly instead of stopping at each keyframe. */
@keyframes sisnGust {
	0% { transform: none; }
	5% { transform: rotate(2.13deg); }
	10% { transform: rotate(4.58deg); }
	15% { transform: rotate(4.45deg); }
	20% { transform: rotate(3.2deg); }
	25% { transform: rotate(1.47deg); }
	30% { transform: rotate(-.17deg); }
	35% { transform: rotate(-1.32deg); }
	40% { transform: rotate(-1.81deg); }
	45% { transform: rotate(-1.7deg); }
	50% { transform: rotate(-1.18deg); }
	55% { transform: rotate(-.49deg); }
	60% { transform: rotate(.13deg); }
	65% { transform: rotate(.55deg); }
	70% { transform: rotate(.63deg); }
	75% { transform: rotate(.53deg); }
	80% { transform: rotate(.32deg); }
	85% { transform: rotate(.1deg); }
	90% { transform: rotate(-.04deg); }
	100% { transform: none; }
}

/* The light, each reaction in the first part of the same 12s cycle. Parts
   are painted in currentColor, so the glow animates color: gold on the white
   plant, near-white on the gold one. */
.sisn-rice--hd {
	--glint: var(--sisn-accent, #e3a033);
}

.sisn-foot__mark--accent .sisn-rice--hd {
	--glint: #fff6dc;
}

/* A grain catches the light: glints and swells (scale adds to the grow
   transform), then fades back. */
/* The glow is short (about .8s) next to the 1.8s the light takes to cross
   the plant, so at any moment only a band of parts is lit and the light is
   seen travelling. */
@keyframes sisnGlint {
	0% { color: inherit; scale: 1; }
	1.6% { color: var(--glint); scale: 1.24; }
	3.6% { color: var(--glint); scale: 1.06; }
	7.5%, 100% { color: inherit; scale: 1; }
}

@keyframes sisnLightUp {
	0% { opacity: var(--sisn-mark-opacity, .35); }
	6%, 29% { opacity: 1; }
	38%, 100% { opacity: var(--sisn-mark-opacity, .35); }
}

/* A leaf or curl glows as the light runs over it. */
@keyframes sisnCatchLight {
	0% { color: inherit; }
	2% { color: var(--glint); }
	7.5%, 100% { color: inherit; }
}

/* A head bows a little under the light, springs back and settles: a damped
   swing, 3.4·e^(-2.8t)·sin(2π·1.45t) over the first 14% (1.7s), played
   linearly like the gust. */
@keyframes sisnNod {
	0% { transform: none; }
	.7% { transform: rotate(.89deg); }
	1.4% { transform: rotate(2.03deg); }
	2.1% { transform: rotate(2.19deg); }
	2.8% { transform: rotate(1.88deg); }
	4.2% { transform: rotate(.58deg); }
	5.6% { transform: rotate(-.54deg); }
	7% { transform: rotate(-.83deg); }
	8.4% { transform: rotate(-.46deg); }
	9.8% { transform: rotate(.04deg); }
	11.2% { transform: rotate(.23deg); }
	12.6% { transform: rotate(.12deg); }
	14%, 100% { transform: none; }
}

@keyframes sisnDraw {
	from { stroke-dashoffset: 1; }
	to { stroke-dashoffset: 0; }
}

@keyframes sisnLeaf {
	from { opacity: 0; transform: rotate(-10deg) scale(.2, 0); }
	40% { opacity: 1; }
	to { opacity: 1; transform: none; }
}

@keyframes sisnGrain {
	from { opacity: 0; transform: scale(0); }
	to { opacity: 1; transform: none; }
}

@keyframes sisnSway {
	0%, 100% { transform: rotate(0deg); }
	30% { transform: rotate(1.8deg); }
	70% { transform: rotate(-1.2deg); }
}

.sisn-foot__about {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sisn-brand--foot {
	align-self: flex-start;
	gap: 14px;
	padding: 12px 16px;
	border-radius: 12px;
	background: #fff;
}

.sisn-brand--foot img {
	height: 48px;
}

.sisn-foot__office {
	font-size: 18px;
	font-weight: 600;
	color: #fff;
}

.sisn-foot__address {
	max-width: 380px;
	line-height: 1.6;
}

.sisn-foot__contact {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sisn-foot__row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.sisn-foot__contact .sisn-ico {
	margin-top: 4px;
	color: var(--sisn-accent);
}

.sisn-foot a {
	color: var(--sisn-foot-ink);
	transition: color .18s ease;
}

.sisn-foot a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sisn-foot__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.sisn-foot .sisn-social {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 999px;
	color: #fff;
	transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}

.sisn-foot .sisn-social:hover {
	background: rgba(255, 255, 255, .12);
	border-color: var(--sisn-accent);
	transform: translateY(-2px);
	text-decoration: none;
}

.sisn-foot__title {
	margin-bottom: 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--sisn-accent);
}

.sisn-foot__col ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* The accordion toggle is only used on phones (see the script). */
.sisn-foot__toggle {
	display: none;
}

.sisn-foot .sisn-flink {
	line-height: 1.5;
}

.sisn-foot__bottom {
	border-top: 1px solid rgba(255, 255, 255, .15);
	font-size: 13px;
}

.sisn-foot__bottom-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 20px;
	padding-bottom: 20px;
}

/* At the bottom of the page the back-to-top button sits over the right end
   of this row; keep the text out from under it. The inset counts from the
   screen edge, so wide screens with room beside the wrap need none. */
body:has(.sisn-totop) .sisn-foot__bottom-in {
	padding-right: max(32px, calc(84px - max(0px, (100vw - var(--sisn-max, 1280px)) / 2)));
}

.sisn-foot__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 1240px) {
	.sisn .sisn-top-link {
		padding: 0 10px;
		font-size: 15px;
	}

	.sisn .sisn-top-link::after {
		left: 10px;
		right: 10px;
	}

	.sisn-feature,
	.sisn-mside {
		width: 260px;
	}
}

@media (max-width: 1240px) {
	.sisn-foot__grid.has-mark-side {
		grid-template-columns: 1.5fr repeat(var(--sisn-foot-cols, 3), minmax(0, 1fr));
		column-gap: 48px;
	}

	.has-mark-side .sisn-foot__mark--right {
		grid-column: 1 / -1;
	}
}

/* More items than the bar holds at this width (the script measures):
   tighter first, then the phone menu. */
.sisn-head.is-tight .sisn-bar__in {
	gap: 16px;
}

.sisn .sisn-head.is-tight .sisn-top-link {
	padding: 0 8px;
	font-size: 14.5px;
}

.sisn .sisn-head.is-tight .sisn-top-link::after {
	left: 8px;
	right: 8px;
}

.sisn-head.is-cramped :is(.sisn-nav, .sisn-cta--bar, .sisn-mega, .sisn-scrim) {
	display: none !important;
}

.sisn-head.is-cramped .sisn-burger {
	display: inline-flex !important;
}

@media (max-width: 1100px) {
	.sisn-nav,
	.sisn-cta--bar,
	.sisn-mega,
	.sisn-scrim,
	.sisn-fold .sisn-util {
		display: none !important;
	}

	.sisn-burger {
		display: inline-flex !important;
	}

	.sisn-spacer {
		height: var(--sisn-bar-h);
	}

	.sisn-foot__grid,
	.sisn-foot__grid.has-mark-side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 32px;
	}

	.sisn-foot__about {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.sisn-wrap {
		padding: 0 16px;
	}

	.sisn-bar__in {
		height: 68px;
		gap: 12px;
	}

	.sisn-head.is-shrunk .sisn-bar__in {
		height: 60px;
	}

	.sisn-brand {
		gap: 12px;
	}

	.sisn-brand img,
	.sisn-head.is-shrunk .sisn-bar .sisn-brand img {
		height: 40px;
	}

	.sisn-spacer {
		height: 68px;
	}

	.sisn-notice__in {
		font-size: 13px;
	}

	.sisn-notice__in > .sisn-ico {
		display: none;
	}

	.sisn-notice__text {
		text-align: left;
	}

	.sisn-foot__in {
		padding-top: 48px;
		padding-bottom: 32px;
	}

	.sisn-foot__mark img {
		width: calc(var(--sisn-mark-size, 180px) * .8);
	}

	.sisn-foot__grid,
	.sisn-foot__grid.has-mark-side {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.sisn-foot__bottom-in {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		/* .sisn-wrap's phone padding would zero these. */
		padding-top: 18px;
		padding-bottom: 24px;
	}

	body:has(.sisn-totop) .sisn-foot__bottom-in {
		padding-right: 72px;
	}

	.sisn-foot__legal {
		gap: 6px 16px;
	}

	/* A small sign-off under the links instead of a big empty block. */
	.sisn-foot .sisn-foot__mark {
		--sisn-mark-size: 120px;
		justify-self: center;
		margin-top: 28px;
	}

	.sisn-foot .sisn-foot__mark img {
		width: var(--sisn-mark-size);
	}

	/* Link columns as an accordion. */
	.sisn-foot.is-acc .sisn-foot__grid {
		row-gap: 0;
	}

	.sisn-foot.is-acc .sisn-foot__about {
		margin-bottom: 28px;
	}

	.sisn-foot.is-acc .sisn-foot__col:first-of-type {
		border-top: 1px solid rgba(255, 255, 255, .15);
	}

	.sisn-foot.is-acc .sisn-foot__col {
		border-bottom: 1px solid rgba(255, 255, 255, .15);
	}

	.sisn-foot.is-acc .sisn-foot__title {
		margin: 0;
	}

	.sisn-foot.is-acc .sisn-foot__label {
		display: none;
	}

	.sisn-foot.is-acc .sisn-foot__toggle {
		width: 100%;
		min-height: 54px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--sisn-accent);
		font: inherit;
		font-size: 16px;
		font-weight: 700;
		text-align: left;
		cursor: pointer;
	}

	.sisn-foot.is-acc .sisn-foot__toggle .sisn-ico {
		flex: none;
		transition: transform .3s var(--sisn-ease);
	}

	.sisn-foot.is-acc .sisn-foot__toggle[aria-expanded="true"] .sisn-ico {
		transform: rotate(180deg);
	}

	.sisn-foot.is-acc .sisn-foot__links {
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		transition: grid-template-rows .35s var(--sisn-ease), visibility 0s linear .35s;
	}

	.sisn-foot.is-acc .sisn-foot__col.is-open .sisn-foot__links {
		grid-template-rows: 1fr;
		visibility: visible;
		transition: grid-template-rows .35s var(--sisn-ease), visibility 0s;
	}

	.sisn-foot.is-acc .sisn-foot__links > ul {
		min-height: 0;
		overflow: hidden;
		gap: 0;
	}

	.sisn-foot.is-acc .sisn-flink {
		display: block;
		padding: 9px 0;
	}

	.sisn-foot.is-acc .sisn-foot__links li:last-child {
		margin-bottom: 12px;
	}
}

/* Below 600px the admin bar scrolls away with the page. */
@media (max-width: 600px) {
	:root {
		--sisn-top: 0px;
	}

}

/* ---------- Back to top ---------- */

/* Other fixed buttons in the corner (SIS Home's chat button) move it up
   with --sisn-totop-bottom. */
.sisn-totop {
	position: fixed;
	right: var(--sisn-totop-right, 24px);
	bottom: var(--sisn-totop-bottom, 24px);
	z-index: 99970;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sisn-primary);
	color: #fff;
	box-shadow: 0 8px 20px rgba(7, 51, 52, .25);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s, background-color .2s;
}
.sisn-totop.is-shown {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .25s ease, transform .25s ease, visibility 0s, background-color .2s;
}
.sisn-totop:hover { background: var(--sisn-primary-dark); }
.sisn-totop > svg { transition: transform .2s ease; }
.sisn-totop:hover > svg:not(.sisn-totop__ring) { transform: translateY(-2px); }
.sisn-totop:focus-visible { outline: 3px solid var(--sisn-accent); outline-offset: 3px; }
.sisn-totop__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	fill: none;
	stroke: var(--sisn-accent);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: var(--sisn-progress, 0) 100;
}
@media (max-width: 600px) {
	.sisn-totop {
		right: var(--sisn-totop-right, 12px);
		bottom: var(--sisn-totop-bottom, 16px);
		width: 44px;
		height: 44px;
	}
}
@media print {
	.sisn-totop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sisn-totop { transition: none; }
	.sisn *,
	.sisn *::before,
	.sisn *::after {
		animation-duration: .01ms !important;
		animation-delay: 0s !important;
		transition-duration: .01ms !important;
	}

	/* Show the grown plant at once; a looping sway at .01ms would flicker. */
	.sisn-foot__mark img,
	.sisn-rice * {
		animation: none !important;
	}
}

/* One back-to-top button on every page: the theme's and the ones pages
   carry in their own code are hidden (the script finds the unnamed ones). */
body.sisn-own-top :is(#scroll_to_top, #back-to-top, .back-to-top, #backToTop, .backToTop, #scroll-to-top, .scroll-to-top, #scrollTop, .scrolltop, #go-top, .go-top, .btn-back-to-top, .sisn-other-top):not(.sisn-totop) {
	display: none !important;
}

.sisn-nowrap {
	white-space: nowrap;
}

/* Phone menu: the mark that says a link goes to another page. */
.sisn-acc__go {
	flex-shrink: 0;
	display: inline-flex;
	color: var(--sisn-muted);
	opacity: .7;
	transition: transform .2s ease, color .2s ease, opacity .2s ease;
}

.sisn .sisn-acc__link:hover .sisn-acc__go,
.sisn .sisn-acc__link:focus-visible .sisn-acc__go,
.sisn .sisn-acc__link[aria-current="page"] .sisn-acc__go {
	color: var(--sisn-primary);
	opacity: 1;
	transform: translateX(3px);
}