/* ==========================================================================
   UNITYPAY HOLDINGS — CORPORATE SECTIONS
   --------------------------------------------------------------------------
   Content migrated from unitypayholdings.com onto the Likoma platform site.
   Built on the host theme's tokens (--c-blue-gray, --c-border, --c-metal…)
   so the corporate story reads as one piece with the project showcase.

   Blocks:
     .up-sec      section shell + heading group
     .up-grid     responsive card grid (column count set per instance)
     .up-card     program / capability / pathway card
     .up-rail     numbered pillar list
     .up-chips    inline tag row
     .up-note     diligence + disclaimer copy
   ========================================================================== */

.up-sec {
	position: relative;
	overflow: hidden;
}

.up-sec--dark {
	background: var(--c-blue-gray, #070b20);
	color: var(--c-gray-light, #e3e6eb);
}

.up-sec--light {
	background: var(--c-white, #fff);
	color: var(--c-blue-gray, #070b20);
}

/* A single chrome hairline separating the corporate story from the project. */
.up-sec--seam::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: var(--c-metal, linear-gradient(180deg, #c7cbd4, #5a5f65));
	opacity: 0.5;
}

.up-sec__inner {
	max-width: 1560px;
	margin: 0 auto;
}

/* ---- Heading group ------------------------------------------------------ */

.up-sec__head {
	max-width: 62rem;
	margin-bottom: clamp(36px, 5vw, 68px);
}

.up-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 clamp(16px, 2vw, 24px);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #8ea6c9;
}

.up-sec--light .up-eyebrow { color: #3d6293; }

.up-eyebrow::before {
	content: '';
	flex: none;
	width: 34px;
	height: 1px;
	background: var(--c-metal, linear-gradient(180deg, #c7cbd4, #5a5f65));
}

.up-sec__title {
	margin: 0;
	font-size: clamp(30px, 4.2vw, 62px);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.up-sec__lede {
	margin: clamp(20px, 2.4vw, 30px) 0 0;
	max-width: 54ch;
	font-size: clamp(16px, 1.35vw, 21px);
	line-height: 1.55;
	color: var(--c-gray, #bdbec4);
}

.up-sec--light .up-sec__lede { color: #4a4f60; }

/* ---- Card grid ---------------------------------------------------------- */

.up-grid {
	display: grid;
	grid-template-columns: repeat(var(--up-cols, 4), minmax(0, 1fr));
	gap: clamp(14px, 1.4vw, 22px);
}

@media (max-width: 1200px) { .up-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .up-grid { grid-template-columns: 1fr; } }

.up-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(22px, 2vw, 32px);
	border: 1px solid var(--c-border, #393c4d);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.028);
	overflow: hidden;
	transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.up-sec--light .up-card {
	border-color: #d8dde6;
	background: #fff;
	box-shadow: 0 1px 2px rgba(7, 11, 32, 0.04);
}

/* Chrome edge lights up on approach — the same alloy as the mark. */
.up-card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: var(--c-metal, linear-gradient(180deg, #c7cbd4, #5a5f65));
	opacity: 0;
	transition: opacity 0.4s ease;
}

.up-card:hover {
	transform: translateY(-3px);
	border-color: #5b607a;
	background: rgba(255, 255, 255, 0.055);
}
.up-sec--light .up-card:hover { border-color: #9fb0c9; background: #fff; }
.up-card:hover::before { opacity: 0.85; }

.up-card__status {
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #8ea6c9;
}

.up-sec--light .up-card__status { color: #3d6293; }

.up-card__title {
	margin: 0;
	font-size: clamp(19px, 1.6vw, 25px);
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.02em;
	color: var(--c-white, #fff);
	text-wrap: balance;
}

.up-sec--light .up-card__title { color: var(--c-blue-gray, #070b20); }

.up-card__body {
	margin: 0;
	font-size: 15px;
	line-height: 1.58;
	color: var(--c-gray, #bdbec4);
}

.up-sec--light .up-card__body { color: #565b6d; }

/* Push the body to the base so uneven titles still line their text up. */
.up-card__body { margin-top: auto; padding-top: 6px; }

.up-card__index {
	position: absolute;
	top: clamp(22px, 2vw, 32px);
	right: clamp(22px, 2vw, 32px);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: rgba(189, 190, 196, 0.35);
	font-variant-numeric: tabular-nums;
}

.up-sec--light .up-card__index { color: rgba(7, 11, 32, 0.22); }

/* ---- Numbered pillars --------------------------------------------------- */

.up-rail {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--c-border, #393c4d);
}

.up-sec--light .up-rail,
.up-sec--light .up-rail > li { border-color: #d8dde6; }

.up-rail > li {
	display: grid;
	grid-template-columns: 66px minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(14px, 2.4vw, 44px);
	align-items: start;
	padding: clamp(20px, 2vw, 30px) 0;
	border-bottom: 1px solid var(--c-border, #393c4d);
}

@media (max-width: 760px) {
	.up-rail > li { grid-template-columns: 46px 1fr; row-gap: 10px; }
	.up-rail > li p { grid-column: 2; }
}

.up-rail__idx {
	font-size: 12px;
	letter-spacing: 0.1em;
	color: #8ea6c9;
	padding-top: 5px;
	font-variant-numeric: tabular-nums;
}

.up-sec--light .up-rail__idx { color: #3d6293; }

.up-rail__title {
	margin: 0;
	font-size: clamp(18px, 1.5vw, 24px);
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: var(--c-white, #fff);
}

.up-sec--light .up-rail__title { color: var(--c-blue-gray, #070b20); }

.up-rail > li p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.58;
	color: var(--c-gray, #bdbec4);
}

.up-sec--light .up-rail > li p { color: #565b6d; }

/* ---- Chips -------------------------------------------------------------- */

.up-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: clamp(28px, 3vw, 42px) 0 0;
	padding: 0;
	list-style: none;
}

.up-chip {
	padding: 9px 17px;
	border: 1px solid var(--c-border, #393c4d);
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-gray-light, #e3e6eb);
	white-space: nowrap;
}

.up-sec--light .up-chip { border-color: #d8dde6; color: #232739; }

/* ---- Notes / disclaimers ------------------------------------------------ */

.up-note {
	margin: clamp(30px, 3.4vw, 48px) 0 0;
	padding: clamp(20px, 2vw, 28px);
	border-left: 1px solid;
	border-image: var(--c-metal, linear-gradient(180deg, #c7cbd4, #5a5f65)) 1;
	background: rgba(255, 255, 255, 0.022);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--c-gray, #bdbec4);
	max-width: 78ch;
}

.up-sec--light .up-note {
	background: #f4f6fa;
	color: #565b6d;
}

/* ---- Contact block ------------------------------------------------------ */

.up-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: clamp(22px, 2.6vw, 40px);
	margin-top: clamp(30px, 3.4vw, 48px);
	padding-top: clamp(26px, 3vw, 40px);
	border-top: 1px solid var(--c-border, #393c4d);
}

.up-sec--light .up-contact { border-color: #d8dde6; }

.up-contact__label {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #8ea6c9;
}

.up-sec--light .up-contact__label { color: #3d6293; }

.up-contact a,
.up-contact p {
	display: block;
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--c-gray-light, #e3e6eb);
	text-decoration: none;
}

.up-sec--light .up-contact a,
.up-sec--light .up-contact p { color: var(--c-blue-gray, #070b20); }

.up-contact a:hover { color: #fff; text-decoration: underline; }
.up-sec--light .up-contact a:hover { color: #3d6293; }

/* ---- Scroll reveal (self-contained; not the host reveal plugin) ---------- */

.up-rise {
	opacity: 0;
	transform: translateY(16px);
}

.up-rise.is-seen {
	opacity: 1;
	transform: none;
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	.up-rise { opacity: 1; transform: none; }
	.up-card { transition: none; }
	.up-card:hover { transform: none; }
}

/* ==========================================================================
   TYPOGRAPHY OVERRIDES
   --------------------------------------------------------------------------
   global.css sets `text-transform: uppercase` on body, h1-h3 and the .text-*
   scale — the template's house voice. That voice is kept for headings and
   labels, but the migrated copy is dense technical prose, and paragraphs of
   uppercase are unreadable. So: headings and labels shout, body speaks.

   Class selectors (0,1,0) out-rank the element selectors (0,0,1) they fight,
   and this sheet loads after global.css.
   ========================================================================== */

/* --- Headings and labels keep the house voice --- */
.up-sec__title,
.up-eyebrow,
.up-card__status,
.up-chip,
.up-contact__label {
	text-transform: uppercase;
}

.up-sec__title {
	color: var(--c-white, #fff);
}

.up-sec--light .up-sec__title {
	color: var(--c-blue-gray, #070b20);
}

/* --- Everything read as prose drops to sentence case --- */
.up-sec__lede,
.up-card__title,
.up-card__body,
.up-card__index,
.up-rail__title,
.up-rail__idx,
.up-rail > li p,
.up-note,
.up-contact a,
.up-contact p {
	text-transform: none;
	letter-spacing: normal;
}

/* Card and pillar titles: sentence case, but weighted so they still lead. */
.up-card__title,
.up-rail__title {
	font-weight: 600;
	letter-spacing: -0.015em;
}

/* The host scale is enormous; hold the migrated copy to its own sizes. */
.up-note,
.up-note strong {
	font-size: 14.5px;
	line-height: 1.6;
}

.up-note strong {
	color: var(--c-white, #fff);
	font-weight: 600;
}

.up-sec--light .up-note strong { color: var(--c-blue-gray, #070b20); }

/* ==========================================================================
   HERO FILM
   --------------------------------------------------------------------------
   Replaces the still island plate and the WebGL mark in SECTION 1.
   The theme already handles `video.background--cover` (object-fit: cover,
   full height), so this only sets the framing and a ground colour for the
   moment before the first frame paints.
   ========================================================================== */

.intro__video {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--c-blue-gray, #070b20);
	/* Sit the horizon high so the island holds the middle of the frame
	   as the sticky hero scrolls up. */
	object-position: 50% 45%;
}

@media (max-width: 979px) {
	/* Portrait crops hard into a 16:9 frame — favour the island over sky. */
	.intro__video { object-position: 50% 50%; }
}

/* ---- Hero head block ----------------------------------------------------
   landing.css sizes the white panel behind the logo with `--head-height` on
   `.intro`, using the theme's breakpoint space-toggle pattern. Same structure
   here, every value at 70% of the original, so the panel shortens and the
   logo row rides up with it.
   Originals: 370 / 310 / 250 / 36svh.
   ------------------------------------------------------------------------- */

.intro {
	--head-height:
		var(--xxxxl, calc(var(--scale-px) * 194))
		var(--n-xxxxl, var(--xxxl, calc(var(--scale-px) * 163))
		var(--n-xxxl, var(--md, calc(var(--scale-px) * 131))
		var(--n-md, 18.9svh)));
}

/* ---- Hero logo offset ---------------------------------------------------
   The big lockup is not laid out inside the head block — global.css drives it
   with `--offset-y` on `.header--landing`, which knows nothing about
   `--head-height`. Shortening the panel alone left the logo hanging over the
   film, so each breakpoint drops by the exact pixels the panel lost (30% of
   the matching head-height value), keeping the logo in the same spot within it.

     breakpoint   head-height          offset-y
     Cumulative: 70% pass, then a further 25% off that = 52.5% of original.

     breakpoint   head-height          offset-y
     xxxxl        370 -> 194           444 -> 268
     xxxl         310 -> 163           364 -> 217
     xxl          250 -> 131           297 -> 178   (head has no xxl branch)
     md           250 -> 131           287 -> 168
     below md     36svh -> 18.9svh     36.5svh -> 19.4svh
   ------------------------------------------------------------------------- */

.header--landing {
	--offset-y:
		var(--xxxxl, calc(var(--scale-px) * 268))
		var(--n-xxxxl, var(--xxxl, calc(var(--scale-px) * 217))
		var(--n-xxxl, var(--xxl, calc(var(--scale-px) * 178))
		var(--n-xxl, var(--md, calc(var(--scale-px) * 168))
		var(--n-md, 19.4svh))));
}

/* ---- Location film ------------------------------------------------------
   `video.background--cover` already gets object-fit: cover from global.css;
   this only frames it. The boulevard runs to a vanishing point just below
   centre, so bias slightly downward to keep it in shot as the layer parallaxes.
   ------------------------------------------------------------------------- */

.location__video {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--c-blue-gray, #070b20);
	object-position: 50% 55%;
}

/* ---- Header lockup ------------------------------------------------------
   Replaces the flat `#logo-eng` sprite in the three header anchors (main
   header, duplicate header, menu drawer) with the chrome render + wordmark.
   global.css sized the old svg with the breakpoint space-toggle pattern
   (20 / 16 / 14 px tall); the lockup keeps the exact same toggle so the
   compact header measures identically, and mirrors it onto font-size so the
   type can be cut in em off the lockup height. The parallax "logo" pattern
   scales the whole anchor ~2.2-6x at the hero state, so the tiny base type
   renders large on the white panel.
   ------------------------------------------------------------------------- */

.header__logo .up-lockup {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	height:
		var(--xxxl, calc(var(--scale-px) * 20))
		var(--n-xxxl, var(--md, calc(var(--scale-px) * 16))
		var(--n-md, calc(var(--scale-px) * 14)));
	font-size:
		var(--xxxl, calc(var(--scale-px) * 20))
		var(--n-xxxl, var(--md, calc(var(--scale-px) * 16))
		var(--n-md, calc(var(--scale-px) * 14)));
}

.up-lockup__mark {
	display: block;
	height: 100%;
	width: auto;
	flex: none;
}

.up-lockup__words {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 0.1em;
}

/* Solid mid-grey is the no-background-clip fallback; browsers that can clip
   get the silver gradient below. Weights match the entry gate lockup. */

.up-lockup__name,
.up-lockup__sub {
	line-height: 1;
	white-space: nowrap;
	color: #9aa3b0;
}

.up-lockup__name {
	font-size: 0.5em;
	font-weight: 600;
	letter-spacing: 0.14em;
}

.up-lockup__sub {
	font-size: 0.31em;
	font-weight: 400;
	letter-spacing: 0.4em;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.up-lockup__name,
	.up-lockup__sub {
		background-image: linear-gradient(
			180deg,
			#f6f8fb 0%,
			#d4d9e0 30%,
			#9aa3b0 50%,
			#e8ebf0 62%,
			#a8b0bc 82%,
			#cfd4dc 100%
		);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

/* The two modal headers (#menu drawer, #selector) sit on the modals' white
   panels with no difference blend to invert them, so the bright silver above
   would wash out. Scope them a steel cut of the same ramp — dark enough to
   read on white, still banded like metal. */

.header--modal .up-lockup__name,
.header--modal .up-lockup__sub {
	color: #6b7482;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.header--modal .up-lockup__name,
	.header--modal .up-lockup__sub {
		background-image: linear-gradient(
			180deg,
			#b9c0ca 0%,
			#8b94a2 32%,
			#55606e 50%,
			#9aa3b0 64%,
			#6b7482 85%,
			#8f98a5 100%
		);
	}
}

/* ---- Accessibility film -------------------------------------------------
   Same contract as the location film; centre framing suits the aerial. -- */

.accessibility__video {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--c-blue-gray, #070b20);
	object-position: 50% 50%;
}

/* ---- Accessibility intro panel: liquid glass ----------------------------
   The white shape in SECTION 5 (one element that clip-path-morphs between
   the intro card and the white map cards) becomes translucent frosted glass
   so the utopia film reads through it. The paint sits on the inner
   __background-color div, so the glass edge follows the morphing shape.
   Text overlays live outside this element and keep their own colors.
   ------------------------------------------------------------------------- */

.accessibility__background .accessibility__background-color {
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.46) 0%,
		rgba(244, 247, 252, 0.26) 55%,
		rgba(255, 255, 255, 0.38) 100%
	) !important;
	-webkit-backdrop-filter: blur(26px) saturate(1.55);
	backdrop-filter: blur(26px) saturate(1.55);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		inset 0 -1px 0 rgba(255, 255, 255, 0.18),
		0 24px 60px -28px rgba(7, 11, 32, 0.5);
}

/* Browsers without backdrop-filter get a near-solid card back. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.accessibility__background .accessibility__background-color {
		background: rgba(244, 247, 252, 0.92) !important;
	}
}