/**
 * Tirta Tamiang layer: components for the tirta-tamiang-core blocks, motion,
 * and the dark color scheme. Builds on global.css (rails, cells, tokens).
 *
 * Motion rules only apply when the head script has added `.tt-js`, so the page
 * is fully visible without JavaScript; reduced-motion users get no movement.
 */

:root {
	--tt-ease: var(--wp--custom--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
	--tt-accent-hover: #1a6b2e;
	--tt-radius: 6px;
	--tt-scrim: rgb(14 16 14 / 0.62);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.tt-icon {
	flex: none;
	width: 1.15em;
	height: 1.15em;
}

/* ---------------------------------------------------------------------------
 * Shared atoms
 * ------------------------------------------------------------------------ */

.tt-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.tt-kicker__dot,
.tt-pulse {
	position: relative;
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.tt-kicker__dot::after,
.tt-pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: inherit;
	animation: tt-ping 2.4s var(--tt-ease) infinite;
}

.tt-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: fit-content;
	padding: 0.15rem 0.55rem;
	border: 1px solid var(--af-line);
	border-radius: 999px;
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	white-space: nowrap;
}

.tt-tag--accent {
	border-color: transparent;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-strong);
}

.tt-tone-soft,
.tt-tone-strong {
	display: block;
}

.tt-tone-soft {
	color: var(--wp--preset--color--subtle);
}

.tt-tone-strong {
	color: var(--wp--preset--color--contrast);
}

/* Buttons rendered by blocks (match core buttons). */
.tt-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.65rem 1.1rem;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition), color var(--wp--custom--transition), transform 0.2s var(--tt-ease);
}

.tt-btn .tt-icon {
	width: 1rem;
	height: 1rem;
	transition: transform 0.25s var(--tt-ease);
}

.tt-btn:hover .tt-icon {
	transform: translateX(3px);
}

.tt-btn:active {
	transform: translateY(1px);
}

.tt-btn--primary {
	border-color: var(--wp--preset--color--accent-strong);
	background: var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--base);
}

.tt-btn--primary:hover {
	border-color: var(--tt-accent-hover);
	background: var(--tt-accent-hover);
	color: var(--wp--preset--color--base);
}

.tt-btn--outline {
	border-color: var(--af-line);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.tt-btn--outline:hover {
	border-color: var(--wp--preset--color--subtle);
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
}

.tt-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.tt-avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.tt-avatar--large {
	width: 100%;
	height: 100%;
	border-radius: 0;
	background-color: var(--wp--preset--color--base-3);
	background-image: radial-gradient(circle, var(--af-line) 1px, transparent 1.2px);
	background-size: 12px 12px;
	color: var(--wp--preset--color--accent-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	letter-spacing: 0;
}

/* Section heading row (label + two-tone h2 + optional link). */
.tt-head {
	align-items: flex-end;
	gap: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--70) !important;
}

.tt-head .is-style-af-label {
	margin: 0 0 0.75rem;
}

.tt-head h2 {
	max-width: 40rem;
	margin: 0;
}

.tt-head .af-arrow-link {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* Page hero (inner pages). */
.tt-page-hero .alignwide > * {
	margin-block: 0;
}

.tt-page-hero .alignwide > * + * {
	margin-top: var(--wp--preset--spacing--50);
}

.tt-page-hero__title {
	max-width: 52rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-m);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.015em;
}

.tt-prose {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.7;
}

.tt-prose > :first-child {
	margin-top: 0;
}

.tt-prose:empty {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Header additions
 * ------------------------------------------------------------------------ */

.wp-site-blocks > header.wp-block-template-part .af-header {
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.wp-site-blocks > header.wp-block-template-part.is-scrolled .af-header {
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent);
	box-shadow: 0 10px 30px -18px rgb(0 0 0 / 0.25);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
}

.af-brand {
	gap: 0.6rem;
}

.af-brand .wp-block-site-title {
	white-space: nowrap;
}

.tt-mark {
	display: inline-flex;
	line-height: 0;
}

.tt-mark__bg {
	fill: var(--wp--preset--color--accent-strong);
}

.tt-mark__drop {
	fill: var(--wp--preset--color--base);
}

.tt-mark__wave {
	fill: none;
	stroke: var(--wp--preset--color--accent-strong);
	stroke-linecap: round;
	stroke-width: 1.6;
}

.tt-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--af-line);
	border-radius: var(--wp--custom--radius);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition), transform 0.3s var(--tt-ease);
}

.tt-theme-toggle:hover {
	background: var(--wp--preset--color--base-3);
}

.tt-theme-toggle:active svg {
	transform: rotate(-30deg) scale(0.9);
}

.tt-theme-toggle svg {
	transition: transform 0.35s var(--tt-ease);
}

.tt-theme-toggle__sun,
html[data-theme="dark"] .tt-theme-toggle__moon {
	display: none;
}

html[data-theme="dark"] .tt-theme-toggle__sun {
	display: block;
}

/* Nav link underline that grows from the left. */
.af-header .tt-primary-nav .wp-block-navigation-item__content {
	position: relative;
}

@media (min-width: 1100px) {
	.af-header .tt-primary-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after,
	.af-header .tt-primary-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: -6px;
		left: 0;
		height: 1px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.3s var(--tt-ease);
	}

	.af-header .tt-primary-nav .wp-block-navigation-item__content:hover::after,
	.af-header .tt-primary-nav .current-menu-item > .wp-block-navigation-item__content::after {
		transform: scaleX(1);
	}
}

/* Seven links do not fit below 1100px: switch to the overlay menu earlier. */
@media (min-width: 600px) and (max-width: 1099px) {
	.af-header .tt-primary-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.af-header .tt-primary-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Below 1100px: brand left; color toggle and menu button grouped on the right. */
@media (max-width: 1099px) {
	.af-header .af-header__start,
	.af-header .af-header__end {
		display: contents;
	}

	.af-header .tt-header-cta {
		display: none;
	}

	.af-header__inner {
		gap: var(--wp--preset--spacing--30);
	}

	.af-header__inner > .af-brand,
	.af-header__start > .af-brand {
		order: 1;
		margin-right: auto;
	}

	.af-header .tt-theme-toggle {
		order: 2;
	}

	.af-header .tt-primary-nav {
		order: 3;
		margin-left: 0 !important;
	}
}

/* ---------------------------------------------------------------------------
 * Shared page spacing
 * ------------------------------------------------------------------------ */

main.wp-block-group {
	--tt-section-space: clamp(2rem, 4vw, 3rem);
	--tt-heading-space: var(--wp--preset--spacing--50);
}

main.wp-block-group > .wp-block-group:is(.af-hero, .is-style-af-section, .is-style-af-section-hatch) {
	padding-block: var(--tt-section-space);
}

main.wp-block-group > .wp-block-group.is-style-af-section-hatch {
	padding-top: calc(var(--tt-section-space) + 12px);
}

main.wp-block-group :is(.tt-head, .af-toolbar, .af-section-head) {
	margin-bottom: var(--tt-heading-space) !important;
}

.tt-page-hero .alignwide > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

.af-post-hero .af-split {
	align-items: center;
	gap: var(--wp--preset--spacing--60);
}

.af-post-hero .af-post-hero__text {
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.af-post-hero .af-post-hero__text > * {
	margin-block: 0;
}

.af-post-hero .wp-block-post-featured-image {
	margin-block: 0;
}

.af-post-body > .wp-block-column {
	padding-block: var(--tt-section-space);
}

.tt-front .tt-hero {
	padding-top: var(--tt-section-space);
	padding-bottom: var(--wp--preset--spacing--60);
}

.tt-front .tt-hero-copy {
	gap: var(--wp--preset--spacing--40);
}

.tt-front .tt-stage {
	margin-top: var(--wp--preset--spacing--60) !important;
}

.tt-front .tt-banner__link {
	padding-block: var(--wp--preset--spacing--40);
}

.tt-front .af-cta > .is-style-af-cells {
	margin-top: var(--wp--preset--spacing--60) !important;
}

/* Keep intrinsic image sizes from stretching the mosaic's grid rows. */
.tt-front .tt-mosaic__media {
	position: absolute;
	inset: 0;
}

/* ---------------------------------------------------------------------------
 * Front page hero
 * ------------------------------------------------------------------------ */

.tt-hero {
	padding-top: var(--wp--preset--spacing--90);
	padding-bottom: var(--wp--preset--spacing--80);
}

.tt-hero-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	text-align: center;
}

.tt-hero-copy > * {
	margin: 0;
}

.tt-hero-copy__title {
	max-width: 20ch;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.6rem, 6.2vw, 4.75rem);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.tt-hero-copy__lead {
	max-width: 40rem;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	text-wrap: pretty;
}

.tt-hero-copy .tt-actions {
	justify-content: center;
	margin-top: 0.25rem;
}

/* Stage: framed panel holding the flow illustration and the stats. */
.tt-stage {
	position: relative;
	margin-top: var(--wp--preset--spacing--80) !important;
	overflow: hidden;
	border: 1px solid var(--af-line);
	border-radius: 4px;
	background: var(--wp--preset--color--base-2);
}

.tt-stage > * {
	margin: 0 !important;
}

.tt-flow-wrap {
	line-height: 0;
}

.tt-flow {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 1;
}

.tt-flow__dot {
	fill: var(--af-line);
}

.tt-flow__glow-stop {
	stop-color: var(--wp--preset--color--accent);
	stop-opacity: 0.18;
}

.tt-flow__glow-stop--end {
	stop-opacity: 0;
}

.tt-flow__line {
	fill: none;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 2;
	stroke-linecap: round;
}

.tt-flow__line--dotted {
	stroke: var(--wp--preset--color--subtle);
	stroke-width: 1.25;
	stroke-dasharray: 2 6;
	opacity: 0.8;
}

.tt-flow__particles {
	fill: none;
	stroke: var(--wp--preset--color--accent-strong);
	stroke-width: 4.5;
	stroke-linecap: round;
	stroke-dasharray: 0.1 34;
}

.tt-flow__label {
	fill: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	letter-spacing: 0.08em;
}

.tt-flow__label--center {
	fill: var(--wp--preset--color--accent-strong);
}

.tt-flow__node {
	fill: var(--wp--preset--color--base);
	stroke: var(--wp--preset--color--accent-strong);
	stroke-width: 1.5;
}

.tt-flow__drop {
	fill: var(--wp--preset--color--accent-strong);
}

.tt-flow__wave {
	fill: none;
	stroke: var(--wp--preset--color--base);
	stroke-linecap: round;
	stroke-width: 1.6;
}

.tt-flow__ripple {
	fill: none;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1.25;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

/* Animations run only while the stage is on screen (see tirta.js). */
@media (prefers-reduced-motion: no-preference) {
	.tt-flow__particles {
		animation: tt-flow 2.2s linear infinite;
	}

	.tt-flow__particles--late {
		animation-duration: 2.9s;
		animation-delay: -1.2s;
	}

	.tt-flow__line--dotted {
		animation: tt-dash 1.6s linear infinite;
	}

	.tt-flow__line--reverse {
		animation-direction: reverse;
	}

	.tt-flow__ripple {
		animation: tt-ripple 3.6s var(--tt-ease) infinite;
	}

	.tt-flow__ripple--2 {
		animation-delay: 1.2s;
	}

	.tt-flow__ripple--3 {
		animation-delay: 2.4s;
	}

	.tt-js .tt-flow:not(.is-active) * {
		animation-play-state: paused;
	}
}

@keyframes tt-flow {
	to {
		stroke-dashoffset: -34.1;
	}
}

@keyframes tt-dash {
	to {
		stroke-dashoffset: -8;
	}
}

@keyframes tt-ripple {
	0% {
		opacity: 0.6;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(3.1);
	}
}

@keyframes tt-ping {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}

	80%,
	100% {
		opacity: 0;
		transform: scale(2.8);
	}
}

/* Stats row along the bottom of the stage. */
.tt-metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	border-top: 1px solid var(--af-line);
	background: var(--wp--preset--color--base);
}

.tt-metric {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.tt-metric + .tt-metric {
	border-left: 1px solid var(--af-line);
}

.tt-metric__label,
.tt-metric__note {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

.tt-metric__value {
	order: -1;
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-s);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

@media (max-width: 781px) {
	.tt-flow {
		aspect-ratio: 4 / 3;
	}

	.tt-flow__label:not(.tt-flow__label--center) {
		display: none;
	}

	.tt-metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tt-metric:nth-child(3) {
		border-left: 0;
	}

	.tt-metric:nth-child(n + 3) {
		border-top: 1px solid var(--af-line);
	}
}

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

.tt-banner {
	border-block: 1px solid var(--af-line);
	background-image: linear-gradient(var(--wp--preset--color--base-2), var(--wp--preset--color--base-2));
	background-position: center;
	background-repeat: no-repeat;
	background-size: calc(var(--af-frame-width) - 2px) 100%;
}

.tt-banner__link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.tt-banner__text {
	flex: 1;
}

.tt-banner__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 500;
	white-space: nowrap;
}

.tt-banner__cta .tt-icon {
	transition: transform 0.25s var(--tt-ease);
}

.tt-banner__link:hover .tt-banner__cta .tt-icon {
	transform: translateX(3px);
}

@media (max-width: 781px) {
	.tt-banner__link {
		flex-wrap: wrap;
		gap: 0.6rem;
	}

	.tt-banner__text {
		flex-basis: 100%;
		order: 2;
	}

	.tt-banner__cta {
		order: 3;
	}
}

/* ---------------------------------------------------------------------------
 * Water service disruptions: site bar, homepage strip, lists, detail
 * ------------------------------------------------------------------------ */

:root {
	--tt-warn-bg: #fcf0e3;
	--tt-warn-ink: #7a4300;
	--tt-warn-line: #ecc89c;
	--tt-alert-bg: #fbeae6;
	--tt-alert-ink: #9b2c1c;
	--tt-alert-line: #eab3a8;
	--tt-info-bg: #e5f0fa;
	--tt-info-ink: #0a4b78;
	--tt-info-line: #b4d2ec;
}

html[data-theme="dark"] {
	--tt-warn-bg: #2b1f0d;
	--tt-warn-ink: #f2cf9b;
	--tt-warn-line: #5c4420;
	--tt-alert-bg: #2a1514;
	--tt-alert-ink: #f2c5c1;
	--tt-alert-line: #7a3430;
	--tt-info-bg: #10202d;
	--tt-info-ink: #a9cdee;
	--tt-info-line: #26445e;
}

.tt-tag--active {
	border-color: transparent;
	background: var(--tt-warn-bg);
	color: var(--tt-warn-ink);
}

.tt-tag--active .tt-pulse {
	background: currentColor;
}

.tt-tag--scheduled {
	border-color: transparent;
	background: var(--tt-info-bg);
	color: var(--tt-info-ink);
}

.tt-tag--ended {
	color: var(--wp--preset--color--muted);
}

/* Site bar, printed before the sticky header (scrolls away). */
.tt-outage-bar {
	position: relative;
	z-index: 60;
	border-bottom: 1px solid var(--tt-warn-line);
	background: var(--tt-warn-bg);
	color: var(--tt-warn-ink);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.tt-outage-bar[hidden] {
	display: none;
}

.tt-outage-bar--urgent {
	border-color: var(--tt-alert-line);
	background: var(--tt-alert-bg);
	color: var(--tt-alert-ink);
}

.tt-outage-bar--scheduled {
	border-color: var(--tt-info-line);
	background: var(--tt-info-bg);
	color: var(--tt-info-ink);
}

.tt-outage-bar__inner,
.tt-outage-strip__inner {
	width: min(calc(100% - 2 * var(--af-gutter)), var(--wp--style--global--wide-size));
	margin-inline: auto;
}

.tt-outage-bar__inner {
	display: flex;
	align-items: center;
	gap: 0.5rem 1rem;
	padding-block: 0.55rem;
}

.tt-outage-bar__label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tt-outage-bar__text {
	flex: 1;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.tt-outage-bar__more {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.tt-outage-bar__close {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.tt-outage-bar__close:hover,
.tt-outage-bar__close:focus-visible {
	background: color-mix(in srgb, currentColor 12%, transparent);
}

@media (max-width: 781px) {
	.tt-outage-bar__inner {
		flex-wrap: wrap;
	}

	.tt-outage-bar__close {
		order: 2;
		margin-left: auto;
		margin-block: -0.35rem;
	}

	.tt-outage-bar__text {
		flex-basis: 100%;
		order: 3;
	}
}

/* Homepage status strip (same frame treatment as the announcement banner). */
.tt-outage-strip {
	border-block: 1px solid var(--af-line);
	background-image: linear-gradient(var(--wp--preset--color--base), var(--wp--preset--color--base));
	background-position: center;
	background-repeat: no-repeat;
	background-size: calc(var(--af-frame-width) - 2px) 100%;
}

.tt-outage-strip.has-outages {
	background-image: linear-gradient(var(--tt-warn-bg), var(--tt-warn-bg));
}

.tt-outage-strip + .tt-banner {
	margin-top: 0 !important;
	border-top: 0;
}

.tt-outage-strip__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

.tt-outage-strip__label {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.tt-outage-strip__clear {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.tt-outage-strip__clear .tt-icon {
	color: var(--wp--preset--color--accent-strong);
}

.tt-outage-strip__list {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.4rem;
	min-width: min(100%, 20rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-outage-strip__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.75rem;
	color: inherit;
	text-decoration: none;
}

.tt-outage-strip__text {
	font-weight: 500;
}

.tt-outage-strip__item:hover .tt-outage-strip__text {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tt-outage-strip__time {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

.tt-outage-strip__all {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: auto;
	color: inherit;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.tt-outage-strip__all .tt-icon {
	transition: transform 0.25s var(--tt-ease);
}

.tt-outage-strip__all:hover .tt-icon {
	transform: translateX(3px);
}

/* Lists on the /gangguan/ archive. */
.tt-outages-heading {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

* + .tt-outages-heading {
	margin-top: var(--wp--preset--spacing--80) !important;
}

.tt-outages {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--af-line);
	list-style: none;
}

.tt-outage {
	position: relative;
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--af-line);
	transition: background-color 0.3s ease;
}

.tt-outage:hover {
	background: var(--wp--preset--color--base-2);
}

.tt-outage--active {
	box-shadow: inset 3px 0 0 var(--tt-warn-ink);
}

.tt-outage__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.tt-outage__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.tt-outages--history .tt-outage__title {
	font-size: var(--wp--preset--font-size--large);
}

.tt-outage__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* The whole card is clickable. */
.tt-outage__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tt-outage__facts,
.tt-outage-detail__facts {
	margin: 0;
}

.tt-outage__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.75rem 1.25rem;
}

:is(.tt-outage__facts, .tt-outage-detail__facts) dt {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

:is(.tt-outage__facts, .tt-outage-detail__facts) dd {
	margin: 0.2rem 0 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

.tt-outage__help {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0.6rem 0.75rem;
	border-radius: var(--tt-radius);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-strong);
	font-size: var(--wp--preset--font-size--small);
}

.tt-outages-empty {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	border-block: 1px solid var(--af-line);
	color: var(--wp--preset--color--body);
}

.tt-outages-empty .tt-icon {
	margin-top: 0.15em;
	color: var(--wp--preset--color--accent-strong);
}

@media (max-width: 781px) {
	.tt-outage__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Single outage. */
.tt-outage-detail {
	border: 1px solid var(--af-line);
	background: var(--wp--preset--color--base);
}

.tt-outage-detail__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border-bottom: 1px solid var(--af-line);
	background: var(--wp--preset--color--base-2);
	font-size: var(--wp--preset--font-size--small);
}

.tt-outage-detail__head p {
	margin: 0;
}

.tt-outage-detail--active .tt-outage-detail__head {
	background: var(--tt-warn-bg);
	color: var(--tt-warn-ink);
}

.tt-outage-detail__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tt-outage-detail__facts > div {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border-bottom: 1px solid var(--af-line);
}

.tt-outage-detail__facts > div.is-wide {
	grid-column: 1 / -1;
}

/* Right border on the first cell of each two-cell row (after the wide row). */
.tt-outage-detail__facts > div:not(.is-wide):nth-child(even) {
	border-right: 1px solid var(--af-line);
}

.tt-outage-detail__facts dd {
	font-size: var(--wp--preset--font-size--medium);
}

.tt-outage-detail__help {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border-bottom: 1px solid var(--af-line);
	background: var(--wp--preset--color--accent-soft);
}

.tt-outage-detail__help .tt-kicker {
	color: var(--wp--preset--color--accent-strong);
}

.tt-outage-detail__help p:last-child {
	margin: 0.35rem 0 0;
	color: var(--wp--preset--color--contrast);
}

.tt-outage-detail > .tt-contact {
	margin: 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.tt-outage-notes:not(:empty) {
	margin-top: var(--wp--preset--spacing--70) !important;
}

@media (max-width: 781px) {
	.tt-outage-detail__facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.tt-outage-detail__facts > div:not(.is-wide):nth-child(even) {
		border-right: 0;
	}
}

/* Expired announcement. */
.tt-notice--expired {
	border-color: var(--tt-warn-line);
	background: var(--tt-warn-bg);
	color: var(--tt-warn-ink);
}

/* Complaint call-to-action (GO-TASK). */
.tt-complaint--link > p {
	margin: 0 0 1rem;
}

/* Inside a help panel the panel text already explains; keep only the buttons. */
.tt-panel .tt-complaint--link > p {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Photo mosaic
 * ------------------------------------------------------------------------ */

.tt-mosaic {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
}

.tt-mosaic--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tt-mosaic--3 {
	grid-template-columns: 1.45fr 1fr;
	grid-template-rows: repeat(2, minmax(220px, 1fr));
}

.tt-mosaic--3 .tt-mosaic__item:first-child {
	grid-row: span 2;
}

.tt-mosaic--4 {
	grid-template-columns: 1.45fr 1fr 1fr;
	grid-template-rows: repeat(2, minmax(220px, 1fr));
}

.tt-mosaic--4 .tt-mosaic__item:first-child {
	grid-row: span 2;
}

.tt-mosaic--4 .tt-mosaic__item:last-child {
	grid-column: span 2;
}

.tt-mosaic__item {
	position: relative;
	min-height: 220px;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--af-line);
	border-radius: 4px;
	background: var(--wp--preset--color--base-3);
}

.tt-mosaic__item:first-child {
	min-height: 460px;
}

.tt-mosaic__media,
.tt-mosaic__media img {
	width: 100%;
	height: 100%;
}

.tt-mosaic__media img {
	display: block;
	object-fit: cover;
	transition: transform 1.4s var(--tt-ease);
}

.tt-mosaic__item:hover .tt-mosaic__media img {
	transform: scale(1.035);
}

.tt-mosaic__caption {
	position: absolute;
	bottom: 0.9rem;
	left: 0.9rem;
	display: inline-flex;
	gap: 0.5rem;
	padding: 0.35rem 0.65rem;
	border-radius: 4px;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.tt-mosaic__caption span {
	color: var(--wp--preset--color--accent-strong);
}

@media (max-width: 781px) {
	.tt-mosaic--3,
	.tt-mosaic--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
	}

	.tt-mosaic--3 .tt-mosaic__item:first-child,
	.tt-mosaic--4 .tt-mosaic__item:first-child {
		grid-row: auto;
		grid-column: 1 / -1;
		min-height: 260px;
	}

	.tt-mosaic--4 .tt-mosaic__item:last-child {
		grid-column: 1 / -1;
	}

	.tt-mosaic__item {
		min-height: 180px;
	}
}

/* ---------------------------------------------------------------------------
 * Service overview
 * ------------------------------------------------------------------------ */

.tt-overview {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--wp--preset--spacing--80);
	align-items: start;
}

.tt-overview__lead > * {
	margin: 0;
}

.tt-overview__lead > * + * {
	margin-top: var(--wp--preset--spacing--50);
}

.tt-overview__title {
	font-size: var(--wp--preset--font-size--display-s);
}

.tt-overview__text {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
}

.tt-checklist {
	display: grid;
	gap: 0.9rem;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}

.tt-checklist li {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.tt-checklist .tt-icon {
	width: 22px;
	height: 22px;
	padding: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-strong);
}

.tt-overview__rows {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--af-line);
	list-style: none;
}

.tt-overview__rows li {
	border-bottom: 1px solid var(--af-line);
}

.tt-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.tt-row:hover {
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
}

.tt-row__index {
	padding-top: 0.2rem;
	color: var(--wp--preset--color--subtle);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

.tt-row__body {
	display: grid;
	gap: 0.35rem;
}

.tt-row__title {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.tt-row__text {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
}

.tt-row__arrow {
	display: inline-flex;
	padding: 0.4rem;
	border: 1px solid var(--af-line);
	border-radius: 50%;
	transition: transform 0.35s var(--tt-ease), background-color 0.3s ease, color 0.3s ease;
}

.tt-row:hover .tt-row__arrow {
	border-color: var(--wp--preset--color--accent-strong);
	background: var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--base);
	transform: rotate(45deg);
}

@media (max-width: 1023px) {
	.tt-overview {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--70);
	}
}

/* ---------------------------------------------------------------------------
 * Short videos ("Kilas Tirta")
 * ------------------------------------------------------------------------ */

.tt-shorts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-short__card {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--tt-radius);
	background: var(--wp--preset--color--contrast);
	color: #fff;
	text-decoration: none;
}

.tt-short__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--tt-ease), filter 0.6s ease;
}

.tt-short__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1rem;
	/* Bottom scrim for the title, light top scrim so the index reads on pale covers. */
	background:
		linear-gradient(to bottom, rgb(14 16 14 / 0.38) 0%, rgb(14 16 14 / 0) 18%),
		linear-gradient(to top, var(--tt-scrim) 0%, rgb(14 16 14 / 0.15) 45%, rgb(14 16 14 / 0) 70%);
}

.tt-short__index {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	opacity: 0.85;
}

.tt-short__play,
.tt-short__soon {
	margin-top: auto;
	margin-bottom: 0.75rem;
}

.tt-short__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.92);
	color: #1e1c1a;
	transition: transform 0.4s var(--tt-ease);
}

.tt-short__soon {
	padding: 0.2rem 0.55rem;
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: 999px;
	background: rgb(255 255 255 / 0.12);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.tt-short__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.3;
}

.tt-short__card:hover .tt-short__media img {
	transform: scale(1.06);
}

a.tt-short__card:hover .tt-short__play {
	transform: scale(1.1);
}

@media (max-width: 1023px) {
	.tt-shorts {
		grid-auto-columns: minmax(220px, 62%);
		grid-auto-flow: column;
		grid-template-columns: none;
		margin-inline: calc(-1 * var(--af-gutter));
		padding-inline: var(--af-gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: var(--af-gutter);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.tt-shorts::-webkit-scrollbar {
		display: none;
	}

	.tt-short {
		scroll-snap-align: start;
	}
}

/* ---------------------------------------------------------------------------
 * Post cards and announcement rows
 * ------------------------------------------------------------------------ */

.af-card__media,
.tt-fallback-media {
	overflow: hidden;
}

.af-card__media img {
	transition: transform 1.2s var(--tt-ease);
}

.wp-block-post-template.is-style-af-cards > li:hover .af-card__media img {
	transform: scale(1.04);
}

.af-card__meta .wp-block-post-date,
.tt-reading-time {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

.tt-notices {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--af-line);
	list-style: none;
}

.tt-notices > li {
	margin: 0;
	border-bottom: 1px solid var(--af-line);
}

.tt-notice-row {
	gap: var(--wp--preset--spacing--60) !important;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	transition: background-color 0.3s ease;
}

.tt-notice-row:hover {
	background: var(--wp--preset--color--base-2);
}

.tt-notice-row__meta {
	flex: 0 0 11rem;
	gap: 0.5rem !important;
}

.tt-notice-row__meta .wp-block-post-date {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

.tt-notice-row__body {
	flex: 1;
	min-width: 0;
}

.tt-notice-row__body > * {
	margin-block: 0;
}

.tt-notice-row__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.tt-notice-row__title a {
	color: var(--wp--preset--color--contrast);
}

.tt-notice-row__excerpt {
	margin-top: 0.4rem !important;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
}

.tt-notice-row__excerpt p {
	margin: 0;
}

.tt-notice-row__arrow {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
	transition: transform 0.3s var(--tt-ease);
}

.tt-notice-row:hover .tt-notice-row__arrow {
	transform: translateX(4px);
}

@media (max-width: 781px) {
	.tt-notice-row {
		flex-wrap: wrap !important;
		gap: var(--wp--preset--spacing--40) !important;
	}

	.tt-notice-row__meta {
		flex: 1 1 100%;
		flex-direction: row !important;
		align-items: center !important;
	}

	.tt-notice-row__arrow {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Service areas, quote
 * ------------------------------------------------------------------------ */

.tt-coverage {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--af-line);
	border-left: 1px solid var(--af-line);
	list-style: none;
}

.tt-coverage__item {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border-right: 1px solid var(--af-line);
	border-bottom: 1px solid var(--af-line);
	transition: background-color 0.3s ease;
}

.tt-coverage__item:hover {
	background: var(--wp--preset--color--base-2);
}

.tt-coverage__item > * {
	margin: 0;
}

.tt-coverage__index {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	color: var(--wp--preset--color--accent-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

.tt-coverage__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
}

.tt-coverage__text {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
}

.tt-quote {
	max-width: 52rem;
	margin: 0 auto;
	text-align: center;
}

.tt-quote__text {
	margin: 0;
	padding: 0;
	border: 0;
}

.tt-quote__text p {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-s);
	line-height: 1.3;
	text-wrap: balance;
}

.tt-quote__by {
	display: inline-flex;
	gap: 0.75rem;
	align-items: center;
	margin-top: var(--wp--preset--spacing--60);
	text-align: left;
}

.tt-quote__by strong {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

.tt-quote__by span span {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

/* ---------------------------------------------------------------------------
 * Contact, social
 * ------------------------------------------------------------------------ */

.tt-contact {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-contact__item {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
}

.tt-contact__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-strong);
}

.tt-contact__body {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.tt-contact__label {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

.tt-contact__value {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

a.tt-contact__value {
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 0.35s var(--tt-ease), color 0.2s ease;
}

a.tt-contact__value:hover {
	color: var(--wp--preset--color--accent-strong);
	background-size: 100% 1px;
}

.tt-contact--compact {
	gap: 0.75rem;
}

.tt-contact--compact .tt-contact__icon {
	width: auto;
	height: auto;
	padding-top: 0.15rem;
	background: none;
	color: var(--wp--preset--color--muted);
}

.tt-contact--compact .tt-contact__label {
	display: none;
}

.tt-contact--compact .tt-contact__value {
	color: var(--wp--preset--color--body);
}

/* Cards: frame-wide cells, like the cells block style. */
.tt-contact--cards {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--af-line);
	border-bottom: 1px solid var(--af-line);
}

.has-global-padding > .alignfull.tt-contact--cards {
	margin-inline: max(calc(-1 * var(--af-gutter)), calc((100% - var(--af-frame-width)) / 2));
}

.tt-contact--cards .tt-contact__item {
	flex-direction: column;
	gap: 1.25rem;
	padding: var(--af-cell-pad-y) var(--af-cell-pad-x);
	border-bottom: 1px solid var(--af-line);
}

.tt-contact--cards .tt-contact__item:not(:nth-child(3n + 1)) {
	border-left: 1px solid var(--af-line);
}

.tt-contact--cards .tt-contact__item:nth-last-child(-n + 2):nth-child(3n + 1),
.tt-contact--cards .tt-contact__item:nth-last-child(-n + 2):nth-child(3n + 1) ~ .tt-contact__item {
	border-bottom: 0;
}

.tt-contact--cards .tt-contact__icon {
	width: 44px;
	height: 44px;
}

.tt-contact--cards .tt-contact__value {
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.01em;
}

@media (max-width: 781px) {
	.tt-contact--cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.tt-contact--cards .tt-contact__item {
		border-left: 0 !important;
		border-bottom: 1px solid var(--af-line) !important;
	}

	.tt-contact--cards .tt-contact__item:last-child {
		border-bottom: 0 !important;
	}
}

.tt-social {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--af-line);
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--contrast);
	transition: background-color var(--wp--custom--transition), transform 0.25s var(--tt-ease);
}

.tt-social__link:hover {
	background: var(--wp--preset--color--base-3);
	color: var(--wp--preset--color--contrast);
	transform: translateY(-2px);
}

.af-footer__about {
	max-width: 22rem;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------------------------------------------------------------------------
 * Services page
 * ------------------------------------------------------------------------ */

.tt-service-cells.is-layout-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Service cells rendered by the tirta/services block (Layanan page). */
.tt-services {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--af-line);
	border-left: 1px solid var(--af-line);
}

.tt-services > .tt-service {
	padding: var(--af-cell-pad-y) var(--af-cell-pad-x);
	border-right: 1px solid var(--af-line);
	border-bottom: 1px solid var(--af-line);
}

.has-global-padding > .alignfull.tt-services {
	margin-inline: max(calc(-1 * var(--af-gutter)), calc((100% - var(--af-frame-width)) / 2));
}

.has-global-padding > .alignfull.tt-service-cells {
	margin-inline: max(calc(-1 * var(--af-gutter)), calc((100% - var(--af-frame-width)) / 2));
}

.tt-service {
	transition: background-color 0.3s ease;
}

.tt-service:hover {
	background: var(--wp--preset--color--base-2);
}

.tt-service > * {
	margin-block: 0;
}

.tt-service > * + * {
	margin-top: 0.85rem;
}

@media (max-width: 781px) {
	.tt-service-cells.is-layout-grid,
	.tt-services {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * Organisation
 * ------------------------------------------------------------------------ */

.tt-org {
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

.tt-leader--featured {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	overflow: hidden;
	border: 1px solid var(--af-line);
	border-radius: 4px;
}

.tt-leader__media {
	min-height: 320px;
	background: var(--wp--preset--color--base-3);
}

.tt-leader__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tt-leader__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
	padding: var(--wp--preset--spacing--70);
	border-left: 1px solid var(--af-line);
}

.tt-leader__body > * {
	margin: 0;
}

.tt-leader__name {
	font-size: var(--wp--preset--font-size--display-s);
}

.tt-leader__role {
	color: var(--wp--preset--color--accent-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.tt-leader__quote {
	margin-top: var(--wp--preset--spacing--40) !important;
	padding: 0 0 0 1.25rem;
	border-left: 2px solid var(--wp--preset--color--accent);
}

.tt-leader__quote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.45;
}

.tt-leader__meta {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.tt-people,
.tt-staff {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-people {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.tt-person {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.15rem 1rem;
	align-items: center;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--af-line);
	border-radius: 4px;
	transition: border-color 0.3s ease, transform 0.35s var(--tt-ease);
}

.tt-person:hover {
	border-color: var(--wp--preset--color--subtle);
	transform: translateY(-2px);
}

.tt-person__media {
	grid-row: span 2;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: 50%;
}

.tt-person__media .tt-avatar {
	width: 100%;
	height: 100%;
}

.tt-person__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tt-person__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

.tt-person__role {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.tt-staff {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0;
	border-top: 1px solid var(--af-line);
	border-left: 1px solid var(--af-line);
}

.tt-staff__item {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border-right: 1px solid var(--af-line);
	border-bottom: 1px solid var(--af-line);
	transition: background-color 0.3s ease;
}

.tt-staff__item:hover {
	background: var(--wp--preset--color--base-2);
}

.tt-staff__item > * {
	margin: 0;
}

.tt-staff__name {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

.tt-staff__role {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
}

.tt-vision {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border: 1px solid var(--af-line);
	border-radius: 4px;
}

.tt-vision__cell {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--70);
}

.tt-vision__cell + .tt-vision__cell {
	border-left: 1px solid var(--af-line);
}

.tt-vision__cell > * {
	margin: 0;
}

.tt-vision__statement {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.3;
	text-wrap: balance;
}

.tt-vision__missions {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	counter-reset: tt-mission;
	list-style: none;
}

.tt-vision__missions li {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	counter-increment: tt-mission;
	line-height: 1.55;
}

.tt-vision__missions li::before {
	content: counter(tt-mission, decimal-leading-zero);
	padding-top: 0.2rem;
	color: var(--wp--preset--color--accent-strong);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

@media (max-width: 781px) {
	.tt-leader--featured,
	.tt-vision {
		grid-template-columns: minmax(0, 1fr);
	}

	.tt-leader__media {
		min-height: 220px;
	}

	.tt-leader__body,
	.tt-vision__cell + .tt-vision__cell {
		border-left: 0;
		border-top: 1px solid var(--af-line);
	}

	.tt-leader__body,
	.tt-vision__cell {
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	}
}

/* ---------------------------------------------------------------------------
 * Complaint form and asides
 * ------------------------------------------------------------------------ */

.tt-complaint-layout > .wp-block-column {
	padding: var(--af-cell-pad-y) var(--af-cell-pad-x);
}

.tt-with-aside {
	gap: var(--wp--preset--spacing--70);
}

.tt-aside__stack {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.tt-panel {
	padding: var(--wp--preset--spacing--60) !important;
	border-radius: 4px;
}

.tt-panel > * {
	margin-block: 0;
}

.tt-panel > * + * {
	margin-top: var(--wp--preset--spacing--50);
}

.tt-panel__text {
	font-size: var(--wp--preset--font-size--small);
}

.tt-aside-photo img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.tt-form {
	display: grid;
	gap: 1.25rem;
}

.tt-form > p,
.tt-form__grid > p {
	margin: 0;
}

.tt-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.tt-field-row {
	display: grid;
	align-content: start;
	gap: 0.4rem;
}

.tt-field-row label {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.tt-field-row small {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.tt-field-row :is(input, select, textarea) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 0.7rem 0.85rem;
	font-size: var(--wp--preset--font-size--medium);
}

.tt-field-row textarea {
	resize: vertical;
}

.tt-field-row input[type="file"] {
	padding: 0.45rem;
	font-size: var(--wp--preset--font-size--small);
}

.tt-field-row input[type="file"]::file-selector-button {
	margin-right: 0.75rem;
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--af-line);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	cursor: pointer;
}

.tt-req {
	color: var(--wp--preset--color--accent-strong);
}

.tt-form__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tt-form__submit {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding-top: 0.5rem;
}

.tt-form__privacy {
	max-width: 24rem;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.tt-notice {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin-bottom: var(--wp--preset--spacing--60);
	padding: 1rem 1.25rem;
	border: 1px solid;
	border-radius: var(--tt-radius);
	font-size: var(--wp--preset--font-size--small);
	animation: tt-rise 0.5s var(--tt-ease) both;
}

.tt-notice p {
	margin: 0;
}

.tt-notice--success {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
}

.tt-notice--success .tt-icon {
	color: var(--wp--preset--color--accent-strong);
}

.tt-notice--error {
	border-color: #e3a5a1;
	background: #fdeeed;
	color: #7a1f1a;
}

@media (max-width: 781px) {
	.tt-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * Single post / announcement
 * ------------------------------------------------------------------------ */

.tt-meta-row {
	gap: 0.75rem !important;
	align-items: center;
}

.tt-meta-row > * {
	margin: 0;
}

.tt-meta-row .wp-block-post-date {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

.af-byline .tt-reading-time::before,
.af-byline .wp-block-post-date::after {
	color: var(--wp--preset--color--muted);
}

.af-byline .wp-block-post-date::after {
	content: "•";
	margin-left: 0.5rem;
}

.tt-tags {
	margin-top: var(--wp--preset--spacing--70) !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

.tt-tags a {
	display: inline-block;
	margin: 0 0.25rem 0.25rem 0;
	padding: 0.15rem 0.55rem;
	border: 1px solid var(--af-line);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.tt-tags .wp-block-post-terms__separator {
	display: none;
}

.tt-share {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-top: var(--wp--preset--spacing--60);
}

.tt-share__label {
	margin-right: 0.25rem;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

.tt-share__btn {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--af-line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.tt-share__btn:hover {
	border-color: var(--wp--preset--color--subtle);
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
}

.tt-share__btn .tt-icon {
	width: 15px;
	height: 15px;
}

.tt-share__btn.is-copied {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-strong);
}

.tt-entry-foot {
	align-items: center;
	max-width: var(--wp--style--global--content-size);
	margin-top: var(--wp--preset--spacing--70) !important;
	margin-inline: auto !important;
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--af-line);
}

.tt-entry-foot .tt-share {
	margin-top: 0;
}

.tt-back-link {
	margin: 0;
}

.tt-related {
	margin-top: var(--wp--preset--spacing--80);
}

.tt-related__list {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	border-top: 1px solid var(--af-line);
	list-style: none;
}

.tt-related__list li {
	border-bottom: 1px solid var(--af-line);
}

.tt-related__item {
	display: grid;
	gap: 0.3rem;
	padding: var(--wp--preset--spacing--50) 0;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.tt-related__meta {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

.tt-related__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	transition: color 0.2s ease;
}

.tt-related__item:hover .tt-related__title {
	color: var(--wp--preset--color--accent-strong);
}

/* Pills: the injected "Semua" item. */
.wp-block-categories.is-style-af-pills .cat-item-all a[aria-current="page"] {
	border-color: var(--af-line);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------------------------
 * Mobile bottom navigation
 * ------------------------------------------------------------------------ */

.tt-bottom-nav {
	display: none;
}

@media (max-width: 781px) {
	body {
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}

	.tt-bottom-nav {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 60;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin: 0 !important;
		padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom));
		border-top: 1px solid var(--af-line);
		background: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
		-webkit-backdrop-filter: saturate(1.4) blur(14px);
		backdrop-filter: saturate(1.4) blur(14px);
	}

	.tt-bottom-nav__item {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
		align-items: center;
		padding: 0.45rem 0.25rem;
		border-radius: var(--wp--custom--radius);
		color: var(--wp--preset--color--muted);
		font-size: 11px;
		font-weight: 500;
		text-decoration: none;
		transition: color 0.2s ease, background-color 0.2s ease;
	}

	.tt-bottom-nav__item .tt-icon {
		width: 22px;
		height: 22px;
		transition: transform 0.3s var(--tt-ease);
	}

	.tt-bottom-nav__item:active .tt-icon {
		transform: scale(0.88);
	}

	.tt-bottom-nav__item.is-active {
		background: var(--wp--preset--color--accent-soft);
		color: var(--wp--preset--color--accent-strong);
	}
}

/* ---------------------------------------------------------------------------
 * Motion: reveal on scroll (classes added by tirta.js)
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.tt-js .tt-reveal {
		opacity: 0;
		transform: translate3d(0, 18px, 0);
		transition:
			opacity 0.8s var(--tt-ease),
			transform 0.9s var(--tt-ease);
		transition-delay: calc(var(--tt-i, 0) * 80ms);
	}

	.tt-js .tt-reveal.is-in {
		opacity: 1;
		transform: none;
	}

	/* Media wipes up from a slight crop and settles from a soft zoom. */
	.tt-js .tt-reveal--media {
		clip-path: inset(10% 0 0 0 round 4px);
		transform: none;
		transition:
			opacity 0.9s var(--tt-ease),
			clip-path 1.2s var(--tt-ease);
		transition-delay: calc(var(--tt-i, 0) * 110ms);
	}

	.tt-js .tt-reveal--media img {
		transform: scale(1.08);
		transition: transform 1.6s var(--tt-ease);
		transition-delay: inherit;
	}

	.tt-js .tt-reveal--media.is-in {
		clip-path: inset(0 0 0 0 round 4px);
	}

	.tt-js .tt-reveal--media.is-in img {
		transform: none;
	}

	/* Re-enable hover zoom once revealed. */
	.tt-js .tt-mosaic__item.is-in:hover .tt-mosaic__media img {
		transform: scale(1.035);
		transition-delay: 0s;
	}

	/* Hero headline: lines rise one after the other. */
	.tt-js .tt-hero-copy__title .tt-tone-soft,
	.tt-js .tt-hero-copy__title .tt-tone-strong {
		opacity: 0;
		transform: translate3d(0, 0.35em, 0);
		transition: opacity 0.9s var(--tt-ease), transform 1s var(--tt-ease);
	}

	.tt-js .tt-hero-copy__title .tt-tone-strong {
		transition-delay: 0.14s;
	}

	.tt-js .tt-hero-copy__title.is-in .tt-tone-soft,
	.tt-js .tt-hero-copy__title.is-in .tt-tone-strong {
		opacity: 1;
		transform: none;
	}

	/* Cross-document page transitions (supporting browsers only). */
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: 0.18s ease both tt-fade-out;
	}

	::view-transition-new(root) {
		animation: 0.32s var(--tt-ease) both tt-rise;
	}
}

@keyframes tt-rise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

@keyframes tt-fade-out {
	to {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tt-flow *,
	.tt-kicker__dot::after,
	.tt-pulse::after {
		animation: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Dark color scheme (toggle or system preference, set on <html>)
 * ------------------------------------------------------------------------ */

html[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--base: #121412;
	--wp--preset--color--base-2: #181b18;
	--wp--preset--color--base-3: #1f231f;
	--wp--preset--color--border: #2b302b;
	--wp--preset--color--subtle: #7f877f;
	--wp--preset--color--muted: #9aa29a;
	--wp--preset--color--body: #c3c9c2;
	--wp--preset--color--contrast: #f0f3ee;
	--wp--preset--color--accent: #4cc46a;
	--wp--preset--color--accent-strong: #45b862;
	--wp--preset--color--accent-soft: #163020;
	--tt-accent-hover: #63cf7d;
	--tt-scrim: rgb(0 0 0 / 0.68);
}

html[data-theme="dark"] :where(.wp-element-button, .wp-block-button__link):hover {
	border-color: var(--tt-accent-hover);
	background-color: var(--tt-accent-hover);
	color: var(--wp--preset--color--base);
}

html[data-theme="dark"] :where(input, textarea, select):hover,
html[data-theme="dark"] .wp-block-group.is-style-af-card:hover,
html[data-theme="dark"] .wp-block-post-template.is-style-af-cards > li:hover {
	border-color: #3c423c;
}

html[data-theme="dark"] .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: #3c423c;
}

html[data-theme="dark"] img {
	filter: brightness(0.92) saturate(0.95);
}

html[data-theme="dark"] .tt-notice--error {
	border-color: #7a3430;
	background: #2a1514;
	color: #f2c5c1;
}

html[data-theme="dark"] .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base) !important;
}

/* Smooth color crossfade when the toggle is used (class set briefly by JS). */
html.tt-theme-switching,
html.tt-theme-switching * {
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, fill 0.35s ease, stroke 0.35s ease !important;
}

/* ---------------------------------------------------------------------------
 * Spacing fixes inside framed cells
 * ------------------------------------------------------------------------ */

.wp-block-group.af-cta {
	--af-cell-pad-y: var(--wp--preset--spacing--50);
	padding-top: calc(var(--wp--preset--spacing--60) + 12px);
}

.af-cta > h2 {
	text-align: center;
	text-wrap: balance;
}

.af-cta > .is-style-af-cells {
	margin-top: var(--wp--preset--spacing--50) !important;
}

.tt-front .wp-block-group.af-cta {
	padding-top: calc(var(--wp--preset--spacing--60) + 12px);
}

.tt-front .af-cta > .is-style-af-cells {
	margin-top: var(--wp--preset--spacing--50) !important;
}

.af-cta .wp-block-column > .af-cell-title {
	margin-top: 0;
}

.af-cta .af-cell-text {
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--medium);
}

.af-cta .wp-block-column > .tt-contact {
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

.af-footer__brand > .tt-social {
	margin-top: var(--wp--preset--spacing--50);
}

@media (max-width: 781px) {
	.af-footer__cols > .wp-block-column:last-child {
		grid-column: 1 / -1;
		border-left: 0 !important;
	}
}