/*
 * Siwar - front page only.
 *
 * The hero, the pinned process scrubber, the client marquee, the studio
 * switcher, the portfolio panel, the industry map and the results chart appear
 * nowhere else, so no other view pays to download them.
 */

/* ------------------------------------------------------------------- hero - */

.siwar-hero {
	position: relative;
	min-height: 100svh;
	/*
	 * The glow and the scrim are intentionally wider than the viewport so their
	 * gradients fade off-screen rather than ending at a visible edge. `clip`
	 * rather than `hidden` because it contains them without turning the section
	 * into a scroll container - which also leaves the sticky stage below free to
	 * measure itself against the viewport.
	 */
	overflow: clip;
}

.siwar-hero__stage {
	position: relative;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: 120px var(--siwar-pad) 90px;
}

/*
 * The locked entrance. The section is given about two screens of height and the
 * stage sticks to the top of it, so the scroll that opens the mark and brings
 * the copy in happens while the hero itself holds still - the visitor is not
 * chasing the words off the top of the screen as they arrive.
 *
 * Only with JavaScript, because only then is anything hidden that needs
 * revealing. Reduced motion opts back out: the copy is already there, so the
 * extra screen of scrolling would be a screen of nothing.
 */
.siwar-js .siwar-hero {
	min-height: 190svh;
}

.siwar-js .siwar-hero__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
	.siwar-js .siwar-hero {
		min-height: 100svh;
	}

	.siwar-js .siwar-hero__stage {
		position: relative;
		height: auto;
		min-height: 100svh;
	}
}

.siwar-hero__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(1000px, 105vw);
	height: min(700px, 74vh);
	transform: translate(-50%, -50%);
	background: radial-gradient(
		50% 50% at 50% 50%,
		color-mix(in srgb, var(--siwar-accent) 15%, transparent),
		transparent 70%
	);
	filter: blur(34px);
	pointer-events: none;
}

.siwar-hero__markwrap {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(720px, 60vw);
	aspect-ratio: 358 / 267;
	transform: translate(-50%, -50%);
	/* Full strength, always. The mark is the entrance; nothing fades it. */
	opacity: 1;
	pointer-events: none;
}

.siwar-hero__par {
	position: absolute;
	inset: 0;
	transform: translate3d(var(--siwar-hpx, 0px), var(--siwar-hpy, 0px), 0);
	transition: transform 0.8s var(--siwar-ease);
}

.siwar-hero__mark {
	position: absolute;
	inset: 0;
	animation: siwarDrift 9s ease-in-out infinite;
}

.siwar-hero__scrim {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(1200px, 120vw);
	height: min(900px, 96vh);
	transform: translate(-50%, -50%);
	/*
	 * A whisper of a scrim - barely a third of what it was. Its only job now is
	 * to stop the headline sitting on raw accent blue; the mark itself stays at
	 * full strength behind it, and the copy carries its own shadow.
	 */
	background: radial-gradient(
		38% 30% at 50% 50%,
		rgba(6, 7, 10, 0.42),
		rgba(6, 7, 10, 0.2) 60%,
		rgba(6, 7, 10, 0) 84%
	);
	z-index: 2;
	pointer-events: none;
}

.siwar-hero__body {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
	max-width: 1000px;
}

.siwar-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-size: 13px;
	color: #c2c2c9;
	text-shadow: 0 1px 8px rgba(6, 7, 10, 0.95);
}

.siwar-hero__badge .siwar-en {
	font-family: var(--siwar-mono);
	font-size: 10.5px;
	letter-spacing: 0.24em;
}

.siwar-hero__title {
	margin: 0;
	font-family: var(--siwar-display);
	font-weight: 700;
	font-size: clamp(44px, 8.6vw, 132px);
	line-height: var(--siwar-lh-d);
	letter-spacing: var(--siwar-ls-d);
	text-wrap: balance;
	/* Two shadows: a tight one that lifts the letterforms off the mark, and a
	   wide soft one that seats the whole line. Cheaper than dimming the logo. */
	text-shadow: 0 2px 10px rgba(6, 7, 10, 0.9), 0 6px 60px rgba(6, 7, 10, 0.85);
	color: var(--siwar-head);
}

.siwar-hero__text {
	margin: 0;
	max-width: 56ch;
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: var(--siwar-lh-b);
	color: var(--siwar-muted);
	text-shadow: 0 1px 8px rgba(6, 7, 10, 0.95), 0 2px 24px rgba(6, 7, 10, 0.8);
}

.siwar-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 8px;
}

/*
 * Entrance: the mark is locked shut and the copy is not there yet. Scrolling
 * is what opens the mark and brings the words up - so --siwar-hr is written
 * per line by siwar-home.js from the hero's own scroll progress, staggered so
 * the badge arrives before the headline and the headline before the buttons.
 *
 * The value defaults to 1 everywhere, which is what a visitor without
 * JavaScript gets: everything simply visible. Only once the document is known
 * to be running scripts (body.siwar-js, set inline in the header before first
 * paint) does the starting value drop to 0, so the copy is never seen and then
 * taken away again.
 */
.siwar-hero [data-siwar-hero-line] {
	will-change: opacity, transform;
	opacity: var(--siwar-hr, 1);
	transform: translate3d(0, calc((1 - var(--siwar-hr, 1)) * 30px), 0);
}

.siwar-js .siwar-hero [data-siwar-hero-line] {
	--siwar-hr: 0;
}

.siwar-hero__title[data-siwar-hero-line] {
	filter: blur(calc((1 - var(--siwar-hr, 1)) * 8px));
}

/* The mark's own drift is a nine-second loop; while it is still locked there is
 * nothing to drift, so hold it still until the first line has begun to arrive. */
.siwar-js .siwar-hero .siwar-hero__mark {
	animation-play-state: paused;
}

.siwar-js .siwar-hero.is-open .siwar-hero__mark {
	animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
	.siwar-js .siwar-hero [data-siwar-hero-line] {
		--siwar-hr: 1;
	}

	.siwar-hero [data-siwar-hero-line] {
		transform: none;
		filter: none;
	}
}

.siwar-hero__note,
.siwar-hero__scroll {
	position: absolute;
	bottom: 34px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: var(--siwar-dim);
}

.siwar-hero__note {
	inset-inline-start: var(--siwar-pad);
}

.siwar-hero__note-rule {
	display: block;
	width: 44px;
	height: 1px;
	background: linear-gradient(to left, var(--siwar-accent), transparent);
}

.siwar-hero__scroll {
	inset-inline-end: var(--siwar-pad);
	/* The prompt has done its job the moment the visitor takes it up. */
	opacity: calc(1 - var(--siwar-hero-open, 0) * 1.6);
}

.siwar-hero__scroll-rail {
	position: relative;
	width: 1px;
	height: 44px;
	overflow: hidden;
	background: rgba(236, 236, 239, 0.12);
}

.siwar-hero__scroll-rail::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--siwar-accent);
	animation: siwarHint 2.1s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

@media (max-width: 760px) {
	.siwar-hero__note {
		display: none;
	}
}

/* ---------------------------------------------------------------- clients - */

.siwar-clients {
	position: relative;
	padding: clamp(52px, 6vw, 84px) 0;
	border-top: 1px solid var(--siwar-line-1);
	border-bottom: 1px solid var(--siwar-line-1);
	overflow: hidden;
}

.siwar-clients__head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 var(--siwar-pad);
	margin-bottom: 34px;
}

.siwar-clients__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--siwar-accent);
	flex: none;
}

.siwar-clients__label {
	font-size: 13px;
	color: var(--siwar-muted);
}

.siwar-clients__rule {
	flex: 1;
	height: 1px;
	background: var(--siwar-line-2);
}

.siwar-marq {
	display: flex;
	flex-direction: column;
	gap: 16px;
	/*
	 * The lanes are laid out left-to-right regardless of the page direction.
	 * A max-content row inside an RTL container is anchored to its right edge,
	 * so the reverse lane's translate(-50%) would carry it clean off screen.
	 * Each tile's own text keeps its natural direction through the isolate
	 * below, so Arabic names still read correctly.
	 */
	direction: ltr;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.siwar-marq__lane {
	display: flex;
	width: max-content;
}

.siwar-marq__lane--a { animation: siwarMarqA 46s linear infinite; }
.siwar-marq__lane--b { animation: siwarMarqB 58s linear infinite; }

.siwar-clients:hover .siwar-marq__lane {
	animation-play-state: paused;
}

.siwar-marq__row {
	display: flex;
	gap: 16px;
	padding-inline-end: 16px;
}

.siwar-clienttile {
	flex: none;
	display: flex;
	align-items: center;
	gap: 14px;
	height: 74px;
	padding: 0 26px;
	border: 1px solid var(--siwar-line-3);
	border-radius: 999px;
	background: rgba(236, 236, 239, 0.02);
	white-space: nowrap;
	transition: border-color 0.4s, background-color 0.4s, transform 0.5s var(--siwar-ease);
}

.siwar-clienttile:hover {
	border-color: color-mix(in srgb, var(--siwar-accent) 60%, transparent);
	background-color: color-mix(in srgb, var(--siwar-accent) 10%, transparent);
	transform: translateY(-3px);
}

.siwar-clienttile__mono {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--siwar-accent) 18%, transparent);
	font-family: var(--siwar-mono);
	direction: ltr;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--siwar-ink);
	flex: none;
	overflow: hidden;
}

.siwar-clienttile__mono img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.siwar-clienttile__name {
	font-family: var(--siwar-display);
	font-weight: 500;
	font-size: clamp(17px, 1.6vw, 23px);
	color: var(--siwar-dim);
	transition: color 0.4s;
	unicode-bidi: isolate;
}

.siwar-clienttile:hover .siwar-clienttile__name {
	color: var(--siwar-ink);
}

/* ---------------------------------------------------------------- process - */

.siwar-scrub {
	position: relative;
}

.siwar-scrub__pin {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
	display: grid;
	align-items: center;
	padding: 0 var(--siwar-pad);
}

.siwar-scrub__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		58% 58% at calc(88% - var(--siwar-p, 0) * 66%) 50%,
		color-mix(in srgb, var(--siwar-accent) 12%, transparent),
		transparent 70%
	);
	pointer-events: none;
}

.siwar-scrub__rule {
	position: absolute;
	top: 50%;
	inset-inline-start: var(--siwar-pad);
	width: calc(var(--siwar-p, 0) * 70vw);
	height: 1px;
	background: var(--siwar-accent);
	opacity: 0.45;
}

.siwar-scrub__inner {
	position: relative;
	width: 100%;
	max-width: var(--siwar-wrap);
	margin: 0 auto;
}

.siwar-scrub__head {
	margin-bottom: clamp(24px, 4vh, 48px);
}

.siwar-scrub__stage {
	position: relative;
	height: clamp(300px, 52vh, 440px);
}

.siwar-scrub__step {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
}

.siwar-scrub__step-num {
	display: inline-flex;
	font-family: var(--siwar-mono);
	direction: ltr;
	unicode-bidi: isolate;
	font-size: 10px;
	letter-spacing: 0.22em;
	color: var(--siwar-accent);
	margin-bottom: 12px;
}

.siwar-scrub__step-title {
	margin: 0;
	font-family: var(--siwar-display);
	font-weight: 800;
	font-size: clamp(52px, 11vw, 170px);
	line-height: var(--siwar-lh-d);
	letter-spacing: var(--siwar-ls-d);
	color: var(--siwar-head);
	/*
	 * A line box is sized from the font's declared metrics, and an Arabic
	 * display face routinely draws past them: the tail on a final ya sweeps
	 * well below the baseline and lands in whatever sits underneath. At 170px
	 * that is a word written across the paragraph. Reserve the room in em so it
	 * scales with the type, and give Arabic more of it than Latin needs.
	 */
	padding-bottom: 0.08em;
}

.siwar-lang-ar .siwar-scrub__step-title {
	padding-bottom: 0.2em;
}

.siwar-scrub__step-text {
	max-width: 40ch;
	margin: clamp(18px, 2vw, 30px) 0 0;
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: var(--siwar-lh-b);
	color: var(--siwar-muted);
}

.siwar-scrub__bars {
	display: flex;
	gap: 10px;
	margin-top: clamp(24px, 4vh, 48px);
}

.siwar-scrub__bar {
	position: relative;
	width: clamp(38px, 5vw, 64px);
	height: 2px;
	background: rgba(236, 236, 239, 0.12);
	overflow: hidden;
}

.siwar-scrub__bar span {
	position: absolute;
	inset: 0;
	transform-origin: right center;
	transform: scaleX(var(--siwar-bar, 0));
	background: var(--siwar-accent);
}

.siwar-lang-en .siwar-scrub__bar span {
	transform-origin: left center;
}

/* Without JS the pinned section would show nothing, so fall back to a plain
   stack of the five steps. */
.siwar-no-js .siwar-scrub { height: auto !important; }
.siwar-no-js .siwar-scrub__pin { position: static; height: auto; padding-block: 60px; }
.siwar-no-js .siwar-scrub__stage { height: auto; }
.siwar-no-js .siwar-scrub__step { position: static; opacity: 1; margin-bottom: 48px; }
.siwar-no-js .siwar-scrub__step-title { font-size: clamp(36px, 6vw, 72px); }

/* ----------------------------------------------------------------- studio - */

.siwar-studio {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(26px, 4vw, 64px);
	align-items: start;
	margin-top: clamp(40px, 5vw, 72px);
}

.siwar-studio__list {
	display: flex;
	flex-direction: column;
}

.siwar-studio__btn {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 22px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--siwar-line-2);
	text-align: start;
	cursor: pointer;
	color: var(--siwar-dim);
	font-family: inherit;
	transition: color 0.3s;
}

.siwar-studio__btn.is-on {
	color: var(--siwar-ink);
}

.siwar-studio__key {
	display: inline-flex;
	font-family: var(--siwar-mono);
	direction: ltr;
	unicode-bidi: isolate;
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--siwar-accent);
	flex: none;
}

.siwar-studio__label { flex: 1; }

.siwar-studio__name {
	display: block;
	font-family: var(--siwar-display);
	font-weight: 600;
	font-size: clamp(19px, 2vw, 27px);
	line-height: 1.45;
}

.siwar-studio__sub {
	display: block;
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--siwar-muted);
	opacity: 0.68;
	transition: opacity 0.3s;
}

.siwar-studio__btn.is-on .siwar-studio__sub { opacity: 1; }

.siwar-studio__stage {
	position: relative;
	aspect-ratio: 16 / 11;
	border: 1px solid var(--siwar-line-3);
	overflow: hidden;
	background: #080910;
}

.siwar-studio__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		70% 70% at 78% 26%,
		color-mix(in srgb, var(--siwar-accent) 20%, transparent),
		transparent 72%
	);
}

.siwar-studio__scene {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.6s var(--siwar-ease);
}

.siwar-studio__scene.is-on { opacity: 1; }

.siwar-studio__scene svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.siwar-studio__caption {
	position: absolute;
	bottom: 18px;
	inset-inline-end: 20px;
	display: inline-flex;
	font-family: var(--siwar-mono);
	direction: ltr;
	unicode-bidi: isolate;
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--siwar-muted);
}

@media (max-width: 1100px) {
	.siwar-studio { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------- portfolio - */

/*
 * One panel, one link - composed rather than stacked.
 *
 * The first version of this was a full-width window with a thin strip of text
 * under it. At laptop width that is a very large dark rectangle above a very
 * thin line, with the heading floating in half a screen of air beside nothing:
 * the proportions of a placeholder. So the heading now shares a row with the
 * address, and the panel is split - the window on one side, a narrow column of
 * type on the other. Same content, same single anchor, but every part of it is
 * carrying something.
 */

.siwar-pfsec {
	position: relative;
	/* The same gutter every other band uses; the panel is a boxed element, not
	   a full-bleed strip, so it has to respect the page's margins. */
	padding: clamp(84px, 9vw, 140px) var(--siwar-pad);
	border-top: 1px solid var(--siwar-line-1);
}

.siwar-pfsec__head {
	margin-bottom: clamp(30px, 3.2vw, 46px);
}

.siwar-pfsec__heading {
	min-width: 0;
}

/*
 * Tighter than the house lead heading on purpose. This one sits on a row rather
 * than above an empty half-screen, so it wants a shorter measure, a smaller top
 * size and closer leading - three lines that hold together, not four that drift.
 */
.siwar-pfsec__title {
	margin-top: 18px;
	max-width: 17ch;
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 1.14;
	/* Two even lines rather than a long one and an orphan. On a heading this
	   short the difference is the whole impression. */
	text-wrap: balance;
}

/* ---- the panel ---- */

.siwar-pfsec__panel {
	position: relative;
	display: grid;
	/* The window earns the space; the column beside it only needs a measure
	   narrow enough to read in one go. */
	grid-template-columns: minmax(0, 1.78fr) minmax(300px, 1fr);
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--siwar-line-3);
	border-radius: 6px;
	background:
		radial-gradient(110% 120% at 100% 0%, color-mix(in srgb, var(--siwar-accent) 11%, transparent), transparent 58%),
		rgba(10, 11, 16, 0.72);
	overflow: hidden;
	/* One property animates, and it is a compositor one. A panel this large
	   cannot afford to transition a shadow on hover. */
	transform: translate3d(0, 0, 0);
	transition: transform 0.5s var(--siwar-ease), border-color 0.5s var(--siwar-ease);
}

.siwar-pfsec__panel:hover,
.siwar-pfsec__panel:focus-visible {
	transform: translate3d(0, -3px, 0);
	border-color: color-mix(in srgb, var(--siwar-accent) 42%, transparent);
}

/* A hairline just inside the border. It is the whole difference between a box
   drawn round some content and a piece of hardware. */
.siwar-pfsec__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(236, 236, 239, 0.045);
}

/* ---- the window ---- */

.siwar-pfsec__window {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-inline-end: 1px solid var(--siwar-line-2);
	background: #07080d;
}

.siwar-pfsec__chrome {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
	padding: 10px 14px;
	border-bottom: 1px solid var(--siwar-line-2);
	background: rgba(236, 236, 239, 0.035);
}

.siwar-pfsec__dots {
	display: inline-flex;
	gap: 5px;
	flex: none;
}

.siwar-pfsec__dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--siwar-line-6);
}

/* .siwar-mono is an inline-flex, on which text-align does nothing - the address
   sat next to the dots instead of in the middle of the bar. */
.siwar-pfsec__addr {
	display: block;
	flex: 1;
	min-width: 0;
	direction: ltr;
	unicode-bidi: isolate;
	text-align: center;
	font-size: 10.5px;
	letter-spacing: 0.1em;
	color: var(--siwar-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.siwar-pfsec__screen {
	position: relative;
	display: block;
	flex: 1;
	/*
	 * The window sets the panel's height, so its ratio is really a decision
	 * about the column beside it: too tall and that column becomes a short
	 * paragraph stranded in the middle of a long empty box. 16/9 is both the
	 * shape of a real browser window and the one that leaves the type a
	 * comfortable margin rather than a void.
	 */
	aspect-ratio: 16 / 9;
	/* And a ceiling on top of the ratio, because at 1600px wide the ratio alone
	   makes a 500px-tall window - which pushes the type column's slack past the
	   point where centring reads as composition rather than as a gap. */
	max-height: min(50vh, 440px);
	overflow: hidden;
}

.siwar-pfsec__shot {
	display: block;
	width: 100%;
	height: auto;
	/* A tall screenshot parked at the top and slid upward on hover: a still
	   picture that behaves like a scrolling screen. min() so one shorter than
	   the frame travels nowhere instead of opening a gap beneath itself. */
	transition: transform 3.6s var(--siwar-ease);
}

.siwar-pfsec__panel:hover .siwar-pfsec__shot,
.siwar-pfsec__panel:focus-visible .siwar-pfsec__shot {
	transform: translateY(min(0px, calc(-100% + 380px)));
}

/*
 * With no screenshot the window is empty, and an empty window is the one thing
 * that must not look unfinished. A faint grid gives the surface something to be,
 * and the mark sits on it the way a logo sits on a holding page.
 */
.siwar-pfsec__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-image:
		linear-gradient(rgba(236, 236, 239, 0.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(236, 236, 239, 0.028) 1px, transparent 1px);
	background-size: 46px 46px, 46px 46px;
	background-position: center;
}

.siwar-pfsec__placeholder .siwar-mark {
	width: clamp(64px, 7vw, 96px);
}

.siwar-pfsec__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #07080d;
	opacity: 0;
	/* Inert on purpose: the one gesture this window supports is opening the
	   real thing, and the anchor around it does that. */
	pointer-events: none;
	transition: opacity 0.8s var(--siwar-ease);
}

.siwar-pfsec__frame.is-in {
	opacity: 1;
}

/* A scrim that deepens under the pointer, so the panel answers the hover
   without anything moving that would cost a layout. */
.siwar-pfsec__screen::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(to top, rgba(6, 7, 10, 0.5), transparent 45%);
	opacity: 0;
	transition: opacity 0.5s var(--siwar-ease);
}

.siwar-pfsec__panel:hover .siwar-pfsec__screen::after,
.siwar-pfsec__panel:focus-visible .siwar-pfsec__screen::after {
	opacity: 1;
}

/* ---- the column beside it ---- */

/*
 * One block, centred against the window - not three things pinned to three
 * different edges. Pushing the type to the bottom of a 450px column opened a
 * void under the mark that read as an unfinished layout; held together and
 * centred, the same elements read as a card.
 */
.siwar-pfsec__aside {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: clamp(28px, 2.8vw, 42px);
	transition: background-color 0.5s var(--siwar-ease);
}

.siwar-pfsec__panel:hover .siwar-pfsec__aside,
.siwar-pfsec__panel:focus-visible .siwar-pfsec__aside {
	background: color-mix(in srgb, var(--siwar-accent) 8%, transparent);
}

/* A low glow behind the type, picked up from the window's own light. Without it
   the column beside a lit screen reads as the unlit half of the panel. */
.siwar-pfsec__aside::before {
	content: "";
	position: absolute;
	inset-inline-start: -10%;
	bottom: -30%;
	width: 90%;
	height: 80%;
	pointer-events: none;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--siwar-accent) 12%, transparent), transparent);
	opacity: 0.75;
}

.siwar-pfsec__mark {
	position: relative;
	width: 38px;
	flex: none;
	align-self: flex-start;
	/* Held open, and closing under the pointer. The gesture that opens the logo
	   is the gesture that opens the portfolio. */
	--siwar-msep: calc(7.06% * var(--siwar-mark-split, 0));
	--siwar-msepy: calc(12.98% * var(--siwar-mark-split, 0));
}

.siwar-pfsec__panel:hover .siwar-pfsec__mark,
.siwar-pfsec__panel:focus-visible .siwar-pfsec__mark {
	--siwar-msep: 0%;
	--siwar-msepy: 0%;
}

.siwar-pfsec__copy {
	position: relative;
	display: block;
	margin-top: clamp(20px, 2vw, 30px);
}

.siwar-pfsec__lead {
	display: block;
	font-family: var(--siwar-display);
	font-weight: 600;
	font-size: clamp(21px, 1.85vw, 30px);
	line-height: 1.24;
	letter-spacing: var(--siwar-ls-d);
	color: var(--siwar-head);
	text-wrap: balance;
}

.siwar-pfsec__note {
	display: block;
	margin-top: 14px;
	max-width: 34ch;
	font-size: 14px;
	line-height: 1.6;
	color: var(--siwar-muted);
}

.siwar-pfsec__go {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: clamp(26px, 2.6vw, 38px);
	padding-top: 18px;
	border-top: 1px solid var(--siwar-line-2);
}

.siwar-pfsec__go-host {
	display: block;
	flex: 1;
	min-width: 0;
	direction: ltr;
	unicode-bidi: isolate;
	font-size: 10.5px;
	letter-spacing: 0.14em;
	color: var(--siwar-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.5s var(--siwar-ease);
}

/* An arrow that points the way the language reads. scaleX, not width - a rule
   that grows by changing its width relays out its own row on every frame. */
.siwar-pfsec__go-arrow {
	position: relative;
	flex: none;
	width: 26px;
	height: 1px;
	background: var(--siwar-line-6);
	transform-origin: right center;
	transition: transform 0.5s var(--siwar-ease), background-color 0.5s var(--siwar-ease);
}

.siwar-pfsec__go-arrow::before,
.siwar-pfsec__go-arrow::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	width: 7px;
	height: 1px;
	background: inherit;
}

.siwar-pfsec__go-arrow::before {
	top: -2.4px;
	transform: rotate(45deg);
	transform-origin: left center;
}

.siwar-pfsec__go-arrow::after {
	top: 2.4px;
	transform: rotate(-45deg);
	transform-origin: left center;
}

.siwar-lang-en .siwar-pfsec__go-arrow {
	transform-origin: left center;
}

.siwar-lang-en .siwar-pfsec__go-arrow::before,
.siwar-lang-en .siwar-pfsec__go-arrow::after {
	inset-inline-start: auto;
	inset-inline-end: 0;
	transform-origin: right center;
}

.siwar-lang-en .siwar-pfsec__go-arrow::before {
	transform: rotate(-45deg);
}

.siwar-lang-en .siwar-pfsec__go-arrow::after {
	transform: rotate(45deg);
}

.siwar-pfsec__panel:hover .siwar-pfsec__go-arrow,
.siwar-pfsec__panel:focus-visible .siwar-pfsec__go-arrow {
	transform: scaleX(1.35);
	background: var(--siwar-accent);
}

.siwar-pfsec__panel:hover .siwar-pfsec__go-host,
.siwar-pfsec__panel:focus-visible .siwar-pfsec__go-host {
	color: var(--siwar-muted);
}

/* ---- narrower ---- */

@media (max-width: 1080px) {
	.siwar-pfsec__panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.siwar-pfsec__window {
		border-inline-end: 0;
		border-bottom: 1px solid var(--siwar-line-2);
	}

	.siwar-pfsec__screen {
		aspect-ratio: 16 / 9;
	}

	/* Stacked, the column is a band rather than a tower: the mark goes back
	   beside the type instead of floating above a gap. */
	.siwar-pfsec__aside {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: clamp(16px, 2vw, 24px);
	}

	.siwar-pfsec__copy {
		margin-top: 0;
		padding-top: 0;
	}

	.siwar-pfsec__go {
		grid-column: 1 / -1;
	}
}

@media (max-width: 620px) {
	.siwar-pfsec__screen {
		aspect-ratio: 4 / 3;
	}

	.siwar-pfsec__aside {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.siwar-pfsec__panel,
	.siwar-pfsec__shot,
	.siwar-pfsec__panel:hover .siwar-pfsec__shot {
		transition: none;
		transform: none;
	}
}

/* ------------------------------------------------- saudi national day - */

/*
 * A seasonal coat for the hero, and only the hero.
 *
 * The idea in one line: the Siwar mark is two halves split by a diagonal, and
 * the whole brand gesture is that diagonal opening as you scroll. So the
 * National Day colour does not sit on top of that gesture - it comes out of
 * it. Green light lives in the cut. Blue stays on one side of the seam, green
 * arrives on the other, and the two meet along the logo's own edge. That is
 * the entire blend; there is no second accent anywhere.
 *
 * Every layer below is driven by --siwar-hero-open, the 0-to-1 value the
 * hero's existing scroll handler already writes on the section every frame.
 * Nothing here adds a listener, measures a box, or starts a loop, and every
 * property that moves is a transform or an opacity. The entrance animation
 * costs in September exactly what it costs in March.
 */

.siwar-nd-on .siwar-hero {
	/*
	 * Two greens, for two jobs.
	 *
	 * --siwar-nd is the flag's own #006c35, and it is what every atmospheric
	 * layer is tinted with: the weave, the light, the chip.
	 *
	 * --siwar-nd-lit is that green lifted for a dark screen, and it is only
	 * ever used where the green has to hold a line beside #0030ff. Electric
	 * blue is a far brighter colour than flag green; printed side by side on
	 * near-black at the same value, the green reads as the dirty half of a
	 * two-colour mark. Lifting it is what makes them look like a pair.
	 */
	--siwar-nd: #006c35;
	--siwar-nd-lit: #00934a;
	--siwar-nd-deep: #04241d;

	/* One local alias so every layer can be written once and still be right
	   with no JavaScript, where the hero is fully revealed from the start. */
	--siwar-nd-open: var(--siwar-hero-open, 0);
}

/* Scoped like everything else here: with the treatment off, this file must not
   define so much as an unused custom property on the hero. */
.siwar-no-js.siwar-nd-on .siwar-hero {
	--siwar-nd-open: 1;
}

/* ---- the woven ground ---- */

/*
 * Sadu, drawn rather than loaded: a checker at two scales plus a fine diagonal
 * hatch, which is the weave's structure without pretending to be a photograph
 * of a textile. It is at its densest before anything is readable and thins to
 * a texture as the words arrive, so it is never what the headline is sitting
 * on.
 */
/*
 * Two elements, two masks. A mask can only be intersected with another by
 * nesting - mask-composite unions the layers on one element, which is the
 * wrong direction - so the wrapper fades the left and right edges, the weave
 * inside it clears the middle band, and what survives both is a pattern that
 * has no edge anywhere. The wrapper also carries the drift, because the weave
 * is already spending its transform on the scroll.
 */
.siwar-nd__ground {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
	animation: siwarNdDrift 34s ease-in-out infinite;
}

.siwar-nd__weave {
	position: absolute;
	/* Oversized so the mask, not an edge, is what ends it. */
	inset: -12%;
	/*
	 * The check and a fine diagonal hatch, and nothing else. An earlier version
	 * layered a second check at four times the scale for depth; at this opacity
	 * it only produced blotches, which is what a weave must never look like.
	 */
	background-image:
		conic-gradient(
			from 90deg at 50% 50%,
			color-mix(in srgb, var(--siwar-nd) 62%, transparent) 0 25%,
			transparent 0 50%,
			color-mix(in srgb, var(--siwar-nd) 62%, transparent) 0 75%,
			transparent 0
		),
		repeating-linear-gradient(
			45deg,
			color-mix(in srgb, var(--siwar-nd) 26%, transparent) 0 1px,
			transparent 1px 11px
		);
	background-size: 14px 14px, 22px 22px;
	/* Clear of the middle band, where the headline lives. */
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 34%, transparent 66%, #000);
	mask-image: linear-gradient(to bottom, #000, transparent 34%, transparent 66%, #000);
	opacity: calc(0.09 + (1 - var(--siwar-nd-open, 0)) * 0.2);
	transform:
		translate3d(0, calc(var(--siwar-nd-open, 0) * -16px), 0)
		scale(calc(1.05 - var(--siwar-nd-open, 0) * 0.05));
}

@keyframes siwarNdDrift {
	0%,
	100% {
		transform: translate3d(0, 0, 0);
	}

	50% {
		transform: translate3d(-14px, 9px, 0);
	}
}

/* ---- the mark, halved ---- */

/*
 * The idea, stated as plainly as it can be: one half of the Siwar mark is the
 * brand's blue, the other is the flag's green, and the line between them is
 * the logo's own diagonal. No new shape, no badge, no overlay - the mark was
 * already two pieces, and for these few days the two pieces are two colours.
 *
 * The halves are filled from an SVG, so the colour cannot simply be set. The
 * same artwork exists in white, which as a mask is a silhouette and takes any
 * colour at all - so the green half swaps its background for a mask of that
 * silhouette and paints through it.
 */
.siwar-nd-on .siwar-hero__mark .siwar-mark__half--b::before {
	background-image: none;
	background-color: var(--siwar-nd-lit);
	-webkit-mask-image: var(--siwar-mark-white);
	mask-image: var(--siwar-mark-white);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* The halo answers both halves. One colour over a two-coloured mark is what
   makes a duotone look like a mistake rather than a decision. */
.siwar-nd-on .siwar-hero__mark .siwar-mark--glow {
	filter:
		drop-shadow(0 0 24px color-mix(in srgb, var(--siwar-accent) 52%, transparent))
		drop-shadow(0 0 34px color-mix(in srgb, var(--siwar-nd-lit) 58%, transparent))
		drop-shadow(0 0 86px color-mix(in srgb, var(--siwar-nd-lit) 34%, transparent));
}

/* ---- the seam ---- */

/*
 * The one that matters. It sits inside the mark's own box and behind it, so as
 * the two halves draw apart the gap between them stops being empty: the green
 * is what is behind the logo, and opening the logo is what shows it.
 *
 * 134deg because that is the angle the mark's diagonal was drawn at. The blue
 * on the near side of that gradient is Siwar's own accent, so the meeting of
 * the two colours happens exactly on the cut and nowhere else.
 */
.siwar-nd__seam {
	position: absolute;
	/*
	 * Deliberately much larger than the mark. Confined to the logo's own box
	 * the light was entirely behind the logo and invisible; spilling well past
	 * it, what you see is a green rake of light along the seam's angle,
	 * escaping the cut as it opens.
	 */
	inset: -48%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(
			30% 30% at 50% 50%,
			color-mix(in srgb, var(--siwar-nd) 40%, transparent),
			transparent 78%
		),
		linear-gradient(
			134deg,
			transparent 32%,
			color-mix(in srgb, var(--siwar-nd-lit) 80%, transparent) 50%,
			color-mix(in srgb, var(--siwar-nd) 26%, transparent) 58%,
			transparent 70%
		);
	/*
	 * Masked to a lens, not left as a box. Blurring a gradient inside a
	 * rectangle leaves the rectangle: the first build of this had four soft
	 * straight edges across the middle of the hero, which read as a panel
	 * someone had forgotten to remove rather than as light.
	 */
	-webkit-mask-image: radial-gradient(closest-side, #000 14%, transparent 80%);
	mask-image: radial-gradient(closest-side, #000 14%, transparent 80%);
	filter: blur(26px);
	opacity: calc(var(--siwar-nd-open, 0) * 0.62);
	transform: scale(calc(0.78 + var(--siwar-nd-open, 0) * 0.28));
}

/* ---- the numeral ---- */

/*
 * Hollow, not filled: at this size a solid figure is a wall, while an outline
 * is a piece of architecture the composition stands in front of.
 *
 * It sits at the reading edge rather than behind the mark. Centred, the logo
 * covered all but a sliver of it and that sliver read as a stray piece of
 * geometry - a number nobody can finish is worse than no number. Out here it
 * is whole, and it is the only thing in the corner.
 */
.siwar-nd__numeral {
	position: absolute;
	/* On the page's own gutter, not bled off it. Half a glyph disappearing
	   past the edge reads as a mistake rather than as a crop. */
	inset-inline-start: var(--siwar-pad);
	bottom: 11%;
	z-index: 0;
	pointer-events: none;
	font-family: var(--siwar-display);
	font-weight: 700;
	font-size: clamp(120px, 21vw, 300px);
	line-height: 0.82;
	letter-spacing: -0.045em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 2px color-mix(in srgb, var(--siwar-nd-lit) 80%, transparent);
	opacity: calc(var(--siwar-nd-open, 0) * 0.5);
	transform: translate3d(0, calc((1 - var(--siwar-nd-open, 0)) * 26px), 0);
	animation: siwarNdDrift 34s ease-in-out infinite;
}

/* ---- the lockup in the eyebrow ---- */

.siwar-nd__lockup {
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 14px;
}

/*
 * The woven chip from the campaign art: a ruled box with the pattern inside it
 * and the slogan sitting on top. Same construction as the ground, at a scale
 * small enough to read as a texture rather than a grid.
 */
.siwar-nd__chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 6px 12px;
	border: 1px solid color-mix(in srgb, var(--siwar-nd) 58%, transparent);
	border-radius: 2px;
	background-color: color-mix(in srgb, var(--siwar-nd-deep) 88%, transparent);
	background-image:
		conic-gradient(
			from 90deg at 50% 50%,
			color-mix(in srgb, var(--siwar-nd) 55%, transparent) 0 25%,
			transparent 0 50%,
			color-mix(in srgb, var(--siwar-nd) 55%, transparent) 0 75%,
			transparent 0
		);
	background-size: 8px 8px;
}

.siwar-nd__pip {
	width: 6px;
	height: 6px;
	flex: none;
	rotate: 45deg;
	background: color-mix(in srgb, var(--siwar-nd-lit) 80%, #ffffff);
}

.siwar-nd__slogan {
	font-family: var(--siwar-display);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0;
	color: #f2f6f3;
	text-shadow: 0 1px 4px rgba(4, 8, 12, 0.7);
}

/* The chip's own type must not be overwritten by the eyebrow's English rule,
   which sets everything in the row in mono at ten and a half pixels. */
.siwar-nd__lockup .siwar-nd__slogan .siwar-en {
	font-family: var(--siwar-display);
	font-size: 13px;
	letter-spacing: 0.01em;
}

/*
 * The eyebrow sits directly over the mark, and for these few days the mark has
 * a bright blue half. Grey type on #0030ff is unreadable, so this line carries
 * its own night behind it rather than trusting the background to be dark.
 */
.siwar-nd__ed {
	color: color-mix(in srgb, var(--siwar-nd-lit) 30%, #e4ece7);
	font-size: 12.5px;
	text-shadow:
		0 0 10px rgba(4, 8, 12, 0.95),
		0 0 22px rgba(4, 8, 12, 0.9),
		0 1px 3px rgba(4, 8, 12, 0.95);
}

.siwar-nd__lockup .siwar-nd__ed .siwar-en {
	font-family: var(--siwar-mono);
	font-size: 10px;
	letter-spacing: 0.24em;
}

@media (max-width: 560px) {
	/* Smaller and fainter on a phone, where the numeral shares its corner with
	   the buttons instead of having the margin to itself. */
	.siwar-nd__numeral {
		font-size: 96px;
		bottom: 6%;
		opacity: calc(var(--siwar-nd-open, 0) * 0.34);
	}

	.siwar-nd__chip {
		padding: 5px 10px;
	}
}

/*
 * Reduced motion already receives a fully opened hero, so every layer here is
 * simply at rest - which is the composition, complete, with nothing moving.
 * All that is left to stop is the ambient drift.
 */
@media (prefers-reduced-motion: reduce) {
	.siwar-nd__ground {
		animation: none;
	}

	.siwar-nd__numeral {
		transition: none;
	}
}

/* ------------------------------------------------------------- industries - */

.siwar-map {
	position: relative;
	margin-top: clamp(44px, 5vw, 80px);
	aspect-ratio: 16 / 9;
	min-height: 400px;
	border: 1px solid var(--siwar-line-2);
	overflow: hidden;
	background: #07080d;
}

.siwar-map__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.siwar-map__lines path {
	stroke-dasharray: 2000;
	stroke-dashoffset: calc(2000 - 2000 * var(--siwar-draw, 0));
	transition: stroke-dashoffset 1.6s var(--siwar-ease);
}

.siwar-map__node {
	position: absolute;
	transform: translate(50%, -50%);
}

.siwar-map__pill {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	border: 1px solid var(--siwar-line-4);
	border-radius: 999px;
	background: rgba(6, 7, 10, 0.72);
	backdrop-filter: blur(6px);
	transition: border-color 0.35s, transform 0.45s var(--siwar-ease), background-color 0.35s;
}

.siwar-map__pill:hover {
	border-color: var(--siwar-accent);
	transform: scale(1.06);
	background-color: color-mix(in srgb, var(--siwar-accent) 16%, transparent);
}

.siwar-map__pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--siwar-accent);
	animation: siwarPulse var(--siwar-pulse, 3s) ease-in-out infinite;
	flex: none;
}

.siwar-map__name {
	font-size: 14px;
	white-space: nowrap;
}

@media (max-width: 900px) {
	/* Absolute placement stops working once the pills are wider than the map,
	   so below this width the constellation becomes a simple wrap. */
	.siwar-map {
		aspect-ratio: auto;
		min-height: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		padding: 24px;
	}

	.siwar-map__lines { display: none; }

	.siwar-map__node {
		position: static;
		transform: none;
	}
}

/* ---------------------------------------------------------------- results - */

.siwar-results {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(26px, 4vw, 56px);
	align-items: stretch;
	margin-top: clamp(40px, 5vw, 72px);
}

.siwar-chart {
	position: relative;
	border: 1px solid var(--siwar-line-2);
	padding: clamp(20px, 2.4vw, 34px);
	background: rgba(236, 236, 239, 0.015);
}

.siwar-chart__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.siwar-chart__title { font-size: 14px; }

.siwar-chart svg {
	width: 100%;
	height: auto;
	display: block;
}

.siwar-chart__line {
	stroke-dasharray: 1400;
	stroke-dashoffset: calc(1400 - 1400 * var(--siwar-draw, 0));
	transition: stroke-dashoffset 1.9s var(--siwar-ease);
}

.siwar-chart__dots {
	opacity: var(--siwar-draw, 0);
	transition: opacity 1s ease 0.6s;
}

.siwar-chart__axis {
	display: flex;
	justify-content: space-between;
	margin-top: 14px;
	font-family: var(--siwar-mono);
	direction: ltr;
	unicode-bidi: isolate;
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--siwar-dim);
}

.siwar-counters {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--siwar-line-2);
	border: 1px solid var(--siwar-line-2);
}

.siwar-counter {
	background: var(--siwar-bg);
	padding: clamp(20px, 2.4vw, 32px);
}

.siwar-counter__value {
	font-family: var(--siwar-display);
	font-weight: 700;
	font-size: clamp(32px, 4vw, 56px);
	line-height: 1.1;
	color: var(--siwar-head);
	direction: ltr;
	unicode-bidi: isolate;
}

.siwar-counter__label {
	margin-top: 12px;
	font-size: 13.5px;
	color: var(--siwar-muted);
}

@media (max-width: 1100px) {
	.siwar-results { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
	.siwar-counters { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
 * 06 - Dashboard
 *
 * The media dashboard is a whole application living in an iframe, so
 * everything below styles the shell around it: the tab strip, the
 * frame, and the placeholder that holds the space until the frame is
 * scrolled to and its src is set. The application skins itself from
 * assets/dashboard/siwar-skin.css.
 * ------------------------------------------------------------------ */

.siwar-dash {
	margin-top: clamp(28px, 3.4vw, 48px);
}

.siwar-dash__bar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.siwar-dash__tabs {
	display: flex;
	gap: 1px;
	background: var(--siwar-line-2);
	border: 1px solid var(--siwar-line-2);
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

.siwar-dash__tabs::-webkit-scrollbar {
	display: none;
}

.siwar-dash__tab {
	appearance: none;
	border: 0;
	margin: 0;
	background: var(--siwar-bg);
	color: var(--siwar-muted);
	font: inherit;
	font-size: 13.5px;
	line-height: 1;
	padding: 12px 18px;
	cursor: pointer;
	transition: color 0.35s var(--siwar-ease, ease), background-color 0.35s var(--siwar-ease, ease);
}

.siwar-dash__tab:hover,
.siwar-dash__tab:focus-visible {
	color: var(--siwar-head);
	background: var(--siwar-bg-card);
}

.siwar-dash__tab.is-on {
	color: #fff;
	background: var(--siwar-accent);
}

.siwar-dash__open {
	font-size: 12.5px;
	color: var(--siwar-dim);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}

/* Tracking and uppercasing are for the Latin half only: letter-spacing pulls
   Arabic letters out of their joins and renders the word as loose glyphs. */
.siwar-dash__open .siwar-en {
	font-family: var(--siwar-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.siwar-dash__open:hover,
.siwar-dash__open:focus-visible {
	color: var(--siwar-head);
}

.siwar-dash__open:hover .siwar-more__rule,
.siwar-dash__open:focus-visible .siwar-more__rule {
	/* The rule is drawn full length and scaled; see siwar.css. */
	transform: scaleX(1);
	background: var(--siwar-accent);
}

.siwar-dash__frame {
	position: relative;
	height: var(--siwar-dash-h, 720px);
	border: 1px solid var(--siwar-line-2);
	background: var(--siwar-bg-soft);
	overflow: hidden;
}

/*
 * The frame is positioned rather than sized to its parent, because on a narrow
 * screen siwar-home.js lays the dashboard out at a desktop width and scales the
 * whole thing down - the application inside has its own desktop layout and no
 * responsive breakpoints of its own, so shrinking the viewport would crop it
 * rather than reflow it. Scaling keeps it a faithful, readable preview.
 */
.siwar-dash__iframe {
	position: absolute;
	/* Physical, not logical: this pairs with transform-origin below, and the
	   origin has to be the same corner in both writing directions or the
	   scaled frame shrinks away off the edge of its box. */
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	opacity: 0;
	transform-origin: top left;
	transition: opacity 0.6s var(--siwar-ease, ease);
}

.siwar-dash__iframe.is-in {
	opacity: 1;
}

.siwar-dash__idle {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	pointer-events: none;
	transition: opacity 0.5s var(--siwar-ease, ease);
}

.siwar-dash__idle .siwar-mono {
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--siwar-dim);
}

.siwar-dash.is-loaded .siwar-dash__idle {
	opacity: 0;
}

/* No JavaScript means the <noscript> frame is already loaded and the
   placeholder would sit over it saying "loading" forever. */
.siwar-no-js .siwar-dash__idle {
	display: none;
}

.siwar-dash__caption {
	margin-top: 14px;
	font-size: 12.5px;
	color: var(--siwar-dim);
}

@media (max-width: 760px) {
	.siwar-dash__frame {
		height: min(var(--siwar-dash-h, 720px), 560px);
	}

	.siwar-dash__tab {
		padding: 11px 14px;
		font-size: 12.5px;
		white-space: nowrap;
	}

	.siwar-dash__bar {
		align-items: flex-start;
		flex-direction: column;
	}
}