/*
 * ShineSky 006 — Footer 09. All selectors rooted at .ss6-footer.
 * Desktop 1440 / phone 390 are Figma targets; 768–1199 is interpolation.
 */
.ss6-footer {
	--ss6f-dark: #171615;
	--ss6f-scene: #d9d9d9;
	--ss6f-orange: #f1892e;
	--ss6f-white: #fff;
	--ss6f-ink: #171615;
	--ss6f-muted: rgba(255, 255, 255, 0.6);
	--ss6f-line: rgba(255, 255, 255, 0.2);
	--ss6f-sans: "Inter Variable", Inter, system-ui, sans-serif;
	--ss6f-display: "Montserrat Variable", Montserrat, system-ui, sans-serif;
	display: block;
	overflow-x: clip;
	color: var(--ss6f-white);
	font-family: var(--ss6f-sans);
	font-size: 14px;
	line-height: 1.5;
	scroll-margin-top: 0;
}
.ss6-footer *,
.ss6-footer *::before,
.ss6-footer *::after { box-sizing: border-box; }
/* :where() keeps the local reset at class-level specificity so BEM rules win. */
.ss6-footer :where(h3, p, ul, dl, dd) { margin: 0; padding: 0; }
.ss6-footer :where(ul) { list-style: none; }
.ss6-footer :where(a) { color: inherit; text-decoration: none; }
.ss6-footer__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.ss6-footer a:focus-visible,
.ss6-footer summary:focus-visible,
.ss6-footer input:focus-visible,
.ss6-footer button:focus-visible,
.ss6-footer__ntitle:focus-visible {
	outline: 2px solid var(--ss6f-orange);
	outline-offset: 3px;
}
/* On the orange card the orange ring would vanish: use ink. */
.ss6-footer__card input:focus-visible,
.ss6-footer__card .ss6-footer__ntitle:focus-visible { outline-color: var(--ss6f-ink); }

/* ---------- Directory (dark), desktop base >= 1200 ---------- */
.ss6-footer__dir {
	position: relative;
	display: grid;
	grid-template-columns: 350px 1fr;
	grid-template-rows: auto auto;
	column-gap: 49.75px; /* contact ends 416.25 -> divider x466 */
	min-height: 840px;
	/* 1307.5 = 1440 - 2*66.25; centres the 1440 frame on wider screens. */
	padding: 64px max(66.25px, calc((100% - 1307.5px) / 2)) 0;
	background: var(--ss6f-dark);
}
.ss6-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}
.ss6-footer__logo { display: block; width: 220px; max-width: 100%; height: auto; aspect-ratio: 275 / 28; }
.ss6-footer__logo--text {
	aspect-ratio: auto;
	font-family: var(--ss6f-display);
	font-size: 22px;
	font-weight: 700;
	line-height: 22.4px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
/* Desktop + tablet: Phone, Email, Address, Legal stacked vertically.
 * Phone (two-column) layout is applied only in the phone media query. */
.ss6-footer__facts {
	display: flex;
	flex-direction: column;
	gap: 33px; /* 45px fact + 33 -> label tops y134 / y212 / y290 */
	margin-top: 15.6px; /* logo ends y86.4 + 32 gap + 15.6 -> Phone y134 */
}
/* Reserve address height so Legal entity lands ~y415 (290 + 92 + 33). */
.ss6-footer__fact--addr { min-height: 92px; }
.ss6-footer__fact dt {
	margin-bottom: 6px;
	color: var(--ss6f-muted);
	font-size: 12px;
	letter-spacing: 0.04em;
}
.ss6-footer__fact dd { overflow-wrap: anywhere; font-size: 14px; }
/* "Get the latest news" + "Subscribe for updates" pill (no NEWSLETTER here). */
.ss6-footer__news {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}
.ss6-footer__newstext {
	font-family: var(--ss6f-display);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}
/* Full-column outlined pill (350x48) with CSS-drawn orange arrow disc. */
.ss6-footer__news { align-items: stretch; }
.ss6-footer__pill {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 48px;
	padding: 0 54px 0 22px;
	border: 1px solid var(--ss6f-line);
	border-radius: 999px;
	color: var(--ss6f-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
}
.ss6-footer__pill--link:hover { border-color: var(--ss6f-white); color: var(--ss6f-white); }
.ss6-footer__pilltext { min-width: 0; overflow-wrap: anywhere; }
.ss6-footer__arrow {
	position: absolute;
	top: 50%;
	right: 3px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ss6f-orange);
	transform: translateY(-50%);
}
/* Shaft */
.ss6-footer__arrow::before {
	content: "";
	position: absolute;
	top: 19px;
	left: 12px;
	width: 15px;
	height: 2px;
	background: var(--ss6f-ink);
}
/* Head (rotated chevron, tip at shaft end) */
.ss6-footer__arrow::after {
	content: "";
	position: absolute;
	top: 15.5px;
	left: 18px;
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--ss6f-ink);
	border-right: 2px solid var(--ss6f-ink);
	transform: rotate(45deg);
}

/* Directory: divider x466/y64 h688, groups from x600. */
.ss6-footer__nav { position: relative; min-width: 0; padding-left: 134px; }
.ss6-footer__nav::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 688px;
	background: var(--ss6f-line);
}
.ss6-footer__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 238.25px));
	grid-template-rows: minmax(363px, auto) auto; /* row 2 at y442 */
	gap: 15px;
}
.ss6-footer__group { min-width: 0; }
.ss6-footer__gtitle {
	margin-bottom: 24px;
	font-family: var(--ss6f-display);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.02em;
}
.ss6-footer__list { display: grid; gap: 12px; }
.ss6-footer__item {
	display: inline-block;
	color: var(--ss6f-muted);
	font-size: 14px;
	overflow-wrap: anywhere;
}
.ss6-footer__item--link { color: var(--ss6f-white); }
.ss6-footer__item--link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ss6-footer__acc { display: none; }

/* Copyright + utility line near directory bottom. */
/* Thin separator ~y780 (1 + 17 + 24 row + 18 = 60 -> top 780 in an 840 block).
 * Copyright at x66; utility starts at x766 (66.25 + 699.75), not flush right. */
.ss6-footer__base {
	display: grid;
	grid-template-columns: minmax(0, 699.75px) auto;
	justify-content: start;
	align-items: center;
	gap: 12px 0;
	grid-column: 1 / -1;
	align-self: end;
	padding: 17px 0 18px;
	border-top: 1px solid var(--ss6f-line);
	color: var(--ss6f-muted);
	font-size: 12px;
}
.ss6-footer__copy { padding-right: 24px; }
.ss6-footer__copy { overflow-wrap: anywhere; }
.ss6-footer__util { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ss6-footer__uitem { display: inline-flex; align-items: center; min-height: 24px; }
.ss6-footer__uitem--link { color: var(--ss6f-white); }
.ss6-footer__uitem--link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Scene (gray placeholder) + orange card ---------- */
.ss6-footer__scene {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 900px;
	/* card y125; 28px bottom puts the 44px shortcut row at scene y828..872
	 * (Footer y1668..1712), 34px glyphs centred ~y1690 as in the formal frame. */
	padding: 125px 20px 28px;
	background: var(--ss6f-scene);
	color: var(--ss6f-ink);
}
.ss6-footer__card {
	display: flex;
	flex-direction: column;
	width: 430.344px;
	max-width: 100%;
	min-height: 650px;
	margin: 0;
	padding: 0 14px 14px;
	background: var(--ss6f-orange);
	color: var(--ss6f-ink);
}
/* White "NEWSLETTER" strip: full card width, flush to the card top. */
.ss6-footer__eyebrow {
	display: flex;
	align-items: center;
	min-height: 28px;
	margin: 0 -14px;
	padding: 0 14px;
	background: var(--ss6f-white);
	font-family: var(--ss6f-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
}
.ss6-footer__ntitle {
	margin: 18px 0 10px;
	padding: 0; /* x = card + 14 (~x519 desktop / x34 mobile) */
	font-family: var(--ss6f-display);
	font-size: 35.25px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.01em;
	overflow-wrap: anywhere;
	scroll-margin-top: 96px;
}
.ss6-footer__ndesc {
	margin-bottom: 8px;
	padding: 0;
	font-size: 14px;
	line-height: 1.45;
}
.ss6-footer__fields { display: flex; flex-direction: column; }
.ss6-footer__req { padding: 10px 0 14px; font-size: 12px; }
/*
 * Underlined rows. The input fills the row; its <label> (DOM-after, linked by
 * for/id) overlays it as one large text line while the field is empty and
 * unfocused. On focus, typed value or autofill the label floats to a small
 * caption at the row top and the value sits below it, so they never overlap.
 * Requires placeholder=" " on each input for :placeholder-shown.
 */
.ss6-footer__field {
	position: relative;
	height: 55.078px;
	border-bottom: 1px solid var(--ss6f-ink);
}
.ss6-footer__field input {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 24px 0 5px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ss6f-ink);
	font: inherit;
	font-size: 20px; /* >=16px avoids iOS zoom on focus */
	line-height: 1.2;
	appearance: none;
}
.ss6-footer__field input::placeholder { color: transparent; opacity: 0; }
.ss6-footer__field label {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	overflow: hidden;
	color: var(--ss6f-ink);
	font-size: 23px;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
	text-overflow: ellipsis;
	transform: translateY(-50%);
	pointer-events: none; /* clicks reach the input underneath */
}
.ss6-footer__field input:focus + label,
.ss6-footer__field input:not(:placeholder-shown) + label {
	top: 5px;
	font-size: 11px;
	font-weight: 500;
	transform: none;
}
/* Autofill selectors kept in separate rules so an unsupported one can't void the others. */
.ss6-footer__field input:autofill + label {
	top: 5px;
	font-size: 11px;
	font-weight: 500;
	transform: none;
}
.ss6-footer__field input:-webkit-autofill + label {
	top: 5px;
	font-size: 11px;
	font-weight: 500;
	transform: none;
}
.ss6-footer__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%; /* card inner width: 402 desktop / 322 mobile */
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--ss6f-ink);
	color: var(--ss6f-white);
	font-family: var(--ss6f-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
}
/* Orange area remains below the button (card min-height fills it). */
/* Disabled but kept as the black design element (no status text in card). */
.ss6-footer__submit:disabled { cursor: not-allowed; }

/* Desktop: three columns across the 1307.5 frame (scene inner width is
 * 1400 at 1440, so 46.25px inline padding lands column 1 at x66.25).
 * 504 / 508 / 295.5 fr -> starts x66.25 / x570.25 / x1078.25 at 1440. */
.ss6-footer__snav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* 80px at 1200, rising to 100px at 1440. */
	gap: 0 clamp(80px, calc(80px + (100vw - 1200px) * 0.083333), 100px);
	align-self: stretch;
	width: 100%;
	max-width: 1400px;
	margin: auto auto 0;
	padding: 32px 46.25px 0;
}
.ss6-footer__sitem {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	font-family: var(--ss6f-display);
	font-size: 34px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	overflow-wrap: anywhere;
	flex: 0 0 auto;
	white-space: nowrap;
}
.ss6-footer__sitem--link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ss6-footer__scene a:focus-visible { outline-color: var(--ss6f-ink); }

/* ---------- Tablet 768–1199: interpolation (no Figma frame) ---------- */
@media (max-width: 1199.98px) {
	.ss6-footer__dir {
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
		column-gap: 40px;
		min-height: 0;
		padding: 56px 40px 0;
	}
	/* Tablet keeps the stacked rail: a 300px column can't fit email beside phone. */
	.ss6-footer__facts { gap: 20px; margin-top: 0; }
	.ss6-footer__fact--addr { min-height: 0; }
	.ss6-footer__nav { padding-left: 40px; }
	.ss6-footer__nav::before { height: 100%; }
	.ss6-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		gap: 40px 24px;
	}
	.ss6-footer__base {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 12px 32px;
		margin-top: 48px;
		padding: 17px 0 24px;
	}
	.ss6-footer__copy { padding-right: 0; }
	.ss6-footer__scene { min-height: 0; padding: 96px 24px 32px; }
	/* Tablet: natural-width labels form one group centred in the content box;
	 * gap 60px at 768, 80px from 1024 up. */
	.ss6-footer__snav {
		gap: 0 clamp(60px, 7.8125vw, 80px);
		max-width: none;
		padding: 40px 16px 0;
	}
	.ss6-footer__sitem { font-size: clamp(18px, 2.6vw, 28px); }
}

/* ---------- Phone <= 767: formal 390 mobile frame ---------- */
@media (max-width: 767.98px) {
	.ss6-footer__dir {
		display: flex;
		flex-direction: column;
		min-height: 986.4px;
		padding: 44px 20px 30px;
	}
	.ss6-footer__contact { gap: 0; }
	/* Phone + Email side by side; Address and Legal span full width. y106.4 */
	.ss6-footer__facts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 20px;
		margin-top: 40px;
	}
	.ss6-footer__fact--wide { grid-column: 1 / -1; }
	.ss6-footer__news { margin-top: 40px; } /* target y392.4; verify vs final copy length */
	/* 78 (was 82) offsets the 48px pill (was 44) to keep rows at y522.4. */
	.ss6-footer__nav { margin-top: 78px; padding-left: 0; }
	.ss6-footer__nav::before { display: none; }
	.ss6-footer__grid { display: none; }
	.ss6-footer__acc { display: block; border-top: 1px solid var(--ss6f-line); }
	.ss6-footer__disc { border-bottom: 1px solid var(--ss6f-line); }
	.ss6-footer__sum {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: 56px; /* + 1px border = 57 */
		cursor: pointer;
		list-style: none;
		font-family: var(--ss6f-display);
		font-size: 16px;
		font-weight: 600;
		letter-spacing: 0.01em;
		text-transform: none; /* formal mobile: title case */
	}
	.ss6-footer__sum::-webkit-details-marker { display: none; }
	.ss6-footer__sum::marker { content: ""; }
	.ss6-footer__disc .ss6-footer__list { padding: 0 0 20px; }
	.ss6-footer__base {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		/* Flex-column item: desktop align-self:end pushed it right (x157).
		 * Stretch to the full 350px content width so text starts at x20. */
		align-self: stretch;
		width: 100%;
		gap: 18px;
		/* Boxes y896.4 / y932.4 -> glyphs ~y901 / ~y938; dir ends 986.4 exactly. */
		margin-top: 32px;
		padding: 0;
		border-top: 0; /* no separator in formal mobile; keeps y offsets */
		text-align: left;
	}
	.ss6-footer__util { justify-content: flex-start; }
	.ss6-footer__scene { min-height: 844px; padding: 106px 20px 0; }
	.ss6-footer__card { width: 350px; min-height: 618px; }
	.ss6-footer__ntitle { margin-top: 14px; font-size: 30.769px; } /* BRIEF mobile title size */
	.ss6-footer__ndesc { font-size: 13px; }
	/* Rows 322x48 from ~y199 inside card (28 bar +14 +64.6 title +10 +37.7 desc +8 +37). */
	.ss6-footer__fields { margin-top: 37px; }
	.ss6-footer__field { height: 48px; }
	.ss6-footer__field input { padding: 20px 0 4px; font-size: 16px; }
	.ss6-footer__field label { font-size: 15px; }
	.ss6-footer__fact--addr { min-height: 0; }
	.ss6-footer__field input:focus + label,
	.ss6-footer__field input:not(:placeholder-shown) + label { top: 4px; font-size: 10px; }
	.ss6-footer__field input:autofill + label { top: 4px; font-size: 10px; }
	.ss6-footer__field input:-webkit-autofill + label { top: 4px; font-size: 10px; }
	/* Pill: x20..370 = full 350 content width (inherits width:100%). */
	/* Mobile: natural-width labels form one centred group. */
	.ss6-footer__snav {
		gap: 4px clamp(20px, 6.154vw, 24px);
		padding: 0 0 25px;
	}
	.ss6-footer__sitem { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }

	/* CSS-drawn plus; vertical bar hidden when open (static, no transition). */
	.ss6-footer__plus { position: relative; flex: none; width: 14px; height: 14px; }
	.ss6-footer__plus::before,
	.ss6-footer__plus::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		background: currentColor;
		transform: translate(-50%, -50%);
	}
	.ss6-footer__plus::before { width: 14px; height: 2px; }
	.ss6-footer__plus::after { width: 2px; height: 14px; }
	.ss6-footer__disc[open] .ss6-footer__plus::after { display: none; }
}

/* Narrow phones: stack phone/email to avoid overflow. */
@media (max-width: 359.98px) {
	.ss6-footer__facts { grid-template-columns: minmax(0, 1fr); }
	/* Figma 320 keeps the centred group at a 20px gap. */
	.ss6-footer__snav { gap: 4px 20px; }
}

/* Footer has no motion; enforce static behaviour regardless. */
@media (prefers-reduced-motion: reduce) {
	.ss6-footer *,
	.ss6-footer *::before,
	.ss6-footer *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* Windows High Contrast: keep disabled button and dividers perceivable. */
@media (forced-colors: active) {
	.ss6-footer__submit:disabled { border: 1px solid GrayText; color: GrayText; }
	.ss6-footer__nav::before { background: CanvasText; }
}