/* Target Media Toolkit: Under Construction templates.
 * Each template sets --t-* defaults; admin overrides arrive as --tm-* on :root. */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.tm {
	--accent: var(--tm-accent, var(--t-accent, #2f6bff));
	--bg: var(--tm-bg, var(--t-bg, #fafaf7));
	--font: var(--tm-font, var(--t-font, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));
	--fg: var(--t-fg, #14151a);
	--muted: var(--t-muted, #5d6170);
	--line: var(--t-line, rgba(20, 21, 26, .12));
	--surface: var(--t-surface, transparent);
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.tm-preview-bar {
	position: fixed;
	z-index: 99;
	inset: 0 0 auto;
	padding: 6px 12px;
	background: #1d2327;
	color: #fff;
	font: 600 13px/1.4 system-ui, sans-serif;
	text-align: center;
}

.tm-page {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow: hidden;
}

.tm-main {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	padding: 56px 24px 32px;
}

.tm-inner {
	width: 100%;
	max-width: 640px;
	text-align: center;
}

.tm-brand { margin-bottom: 40px; }
.tm-logo { max-width: 180px; max-height: 72px; width: auto; height: auto; }
.tm-sitename { font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; }

.tm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	color: var(--accent);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.tm-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent);
	animation: tm-pulse 2s ease-in-out infinite;
}

.tm-title {
	margin: 0 0 18px;
	font-size: clamp(2.2rem, 6vw, 3.6rem);
	font-weight: 750;
	line-height: 1.08;
	letter-spacing: -.025em;
	text-wrap: balance;
}

.tm-message { color: var(--muted); font-size: 1.08rem; }
.tm-message p { margin: 0 0 .8em; }
.tm-message a { color: var(--accent); }

/* Progress */
.tm-progress { max-width: 420px; margin: 32px auto 0; text-align: left; }
.tm-progress__label { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: .85rem; font-weight: 600; }
.tm-progress__track { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.tm-progress__bar { height: 100%; border-radius: inherit; background: var(--accent); }

/* Countdown */
.tm-countdown {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 36px 0 0;
}
.tm-countdown__unit {
	min-width: 84px;
	padding: 14px 10px 10px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface);
}
.tm-countdown__num {
	display: block;
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.tm-countdown__label {
	display: block;
	margin-top: 8px;
	color: var(--muted);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Contact + social */
.tm-contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
	font-size: .95rem;
}
.tm-contact li { display: inline-flex; align-items: center; gap: 8px; }
.tm-contact svg { flex: none; width: 18px; height: 18px; color: var(--accent); }
.tm-contact a { text-decoration: none; }
.tm-contact a:hover { text-decoration: underline; }

.tm-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}
.tm-social a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--line);
	border-radius: 50%;
	transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.tm-social a:hover,
.tm-social a:focus-visible {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--t-on-accent, #fff);
	transform: translateY(-2px);
}
.tm-social svg { width: 18px; height: 18px; }

/* Footer */
.tm-footer {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 20px;
	padding: 20px 24px 28px;
	color: var(--muted);
	font-size: .8rem;
}
.tm-footer a { text-decoration: none; }
.tm-footer a:hover { color: var(--fg); text-decoration: underline; }

a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@keyframes tm-pulse {
	50% { box-shadow: 0 0 0 7px color-mix(in srgb, currentColor 6%, transparent); }
}

@media (max-width: 560px) {
	body.tm { font-size: 16px; }
	.tm-countdown { gap: 8px; }
	.tm-countdown__unit { min-width: 0; flex: 1; padding: 12px 4px 8px; }
	.tm-countdown__num { font-size: 1.6rem; }
	.tm-countdown__label { font-size: .6rem; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ================================================================
 * 1. Minimal
 * ============================================================== */
.tm-t-minimal {
	--t-bg: #fafaf7;
	--t-accent: #2f6bff;
}
.tm-t-minimal .tm-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin: 24px auto 0;
	border-radius: 3px;
	background: var(--accent);
}

/* ================================================================
 * 2. Midnight
 * ============================================================== */
.tm-t-midnight {
	--t-bg: #0b0d17;
	--t-fg: #eef0f7;
	--t-muted: #a1a7bb;
	--t-line: rgba(255, 255, 255, .12);
	--t-surface: rgba(255, 255, 255, .04);
	--t-accent: #8b6cff;
}
.tm-t-midnight .tm-page::before,
.tm-t-midnight .tm-page::after {
	content: "";
	position: absolute;
	width: 60vmax;
	height: 60vmax;
	border-radius: 50%;
	filter: blur(80px);
	opacity: .35;
	pointer-events: none;
}
.tm-t-midnight .tm-page::before { top: -30vmax; left: -20vmax; background: var(--accent); }
.tm-t-midnight .tm-page::after { right: -25vmax; bottom: -35vmax; background: #1fb6ff; opacity: .22; }
.tm-t-midnight .tm-title {
	background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--accent) 55%, #fff));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ================================================================
 * 3. Aurora
 * ============================================================== */
.tm-t-aurora {
	--t-bg: linear-gradient(120deg, #ff7a59, #ff3d77, #7b61ff, #2ec5ff, #ff7a59);
	--t-fg: #fff;
	--t-muted: rgba(255, 255, 255, .86);
	--t-line: rgba(255, 255, 255, .35);
	--t-surface: rgba(255, 255, 255, .12);
	--t-accent: #fff;
	--t-on-accent: #7b61ff;
}
body.tm-t-aurora {
	background-size: 400% 400%;
	animation: tm-aurora 18s ease infinite;
}
.tm-t-aurora .tm-inner {
	padding: 48px 40px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 28px;
	background: rgba(255, 255, 255, .14);
	box-shadow: 0 30px 80px rgba(40, 10, 80, .25);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}
.tm-t-aurora .tm-progress__track { background: rgba(255, 255, 255, .25); }
@keyframes tm-aurora {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}
@media (max-width: 560px) {
	.tm-t-aurora .tm-inner { padding: 32px 20px; }
}

/* ================================================================
 * 4. Split screen
 * ============================================================== */
.tm-t-split {
	--t-bg: #ffffff;
	--t-accent: #0f766e;
}
.tm-layout-split .tm-page {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: 1fr auto;
}
.tm-layout-split .tm-media {
	grid-row: 1 / span 2;
	position: relative;
	min-height: 100vh;
	background:
		var(--tm-image, none) center / cover no-repeat,
		linear-gradient(160deg, color-mix(in srgb, var(--accent) 85%, #000), color-mix(in srgb, var(--accent) 40%, #fff));
}
.tm-layout-split.tm-has-image .tm-media__art { display: none; }
.tm-media__art,
.tm-media__art::before,
.tm-media__art::after {
	position: absolute;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .35);
}
.tm-media__art { inset: 18% 18%; }
.tm-media__art::before { content: ""; inset: 14%; border-color: rgba(255, 255, 255, .5); }
.tm-media__art::after { content: ""; inset: 34%; background: rgba(255, 255, 255, .85); border: 0; }
.tm-layout-split .tm-main { justify-content: flex-start; padding: 64px clamp(24px, 6vw, 88px) 24px; }
.tm-layout-split .tm-inner { max-width: 520px; text-align: left; }
.tm-layout-split .tm-countdown,
.tm-layout-split .tm-contact,
.tm-layout-split .tm-social { justify-content: flex-start; }
.tm-layout-split .tm-progress { margin-left: 0; }
.tm-layout-split .tm-footer { justify-content: flex-start; padding-left: clamp(24px, 6vw, 88px); }
@media (max-width: 860px) {
	.tm-layout-split .tm-page { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
	.tm-layout-split .tm-media { grid-row: auto; min-height: 34vh; }
	.tm-media__art { inset: 12% 30%; }
	.tm-layout-split .tm-main { padding-top: 40px; }
}

/* ================================================================
 * 5. Corporate
 * ============================================================== */
.tm-t-corporate {
	--t-bg: #eef1f6;
	--t-fg: #0f1b2d;
	--t-muted: #4f5b6d;
	--t-line: #d8dee8;
	--t-surface: #f6f8fb;
	--t-accent: #0b3d91;
}
.tm-t-corporate .tm-page { border-top: 6px solid var(--accent); }
.tm-t-corporate .tm-inner {
	max-width: 720px;
	padding: 56px 56px 48px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 27, 45, .06), 0 20px 50px rgba(15, 27, 45, .08);
}
.tm-t-corporate .tm-eyebrow::before { border-radius: 2px; animation: none; box-shadow: none; }
.tm-t-corporate .tm-title { font-size: clamp(2rem, 5vw, 2.9rem); }
.tm-t-corporate .tm-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	text-align: left;
}
.tm-t-corporate .tm-contact li {
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	font-size: .9rem;
	overflow-wrap: anywhere;
}
.tm-t-corporate .tm-social a { border-radius: 10px; }
@media (max-width: 560px) {
	.tm-t-corporate .tm-inner { padding: 36px 22px; }
}

/* ================================================================
 * 6. Bold type
 * ============================================================== */
.tm-t-bold {
	--t-bg: #ffe14d;
	--t-fg: #111;
	--t-muted: #2b2b2b;
	--t-line: rgba(0, 0, 0, .9);
	--t-accent: #111;
	--t-on-accent: #ffe14d;
}
.tm-t-bold .tm-page::before {
	content: "";
	position: absolute;
	top: -12vmax;
	right: -10vmax;
	width: 46vmax;
	height: 46vmax;
	border-radius: 50%;
	background: #111;
}
.tm-t-bold .tm-page::after {
	content: "";
	position: absolute;
	right: 22vmax;
	bottom: -6vmax;
	width: 18vmax;
	height: 18vmax;
	border: 3px solid #111;
	border-radius: 50%;
}
.tm-layout-left .tm-main { justify-content: flex-start; padding-left: clamp(24px, 7vw, 120px); padding-right: clamp(24px, 7vw, 120px); }
.tm-layout-left .tm-inner { max-width: 880px; text-align: left; }
.tm-layout-left .tm-countdown,
.tm-layout-left .tm-contact,
.tm-layout-left .tm-social { justify-content: flex-start; }
.tm-layout-left .tm-progress { margin-left: 0; }
.tm-layout-left .tm-footer { justify-content: flex-start; padding-left: clamp(24px, 7vw, 120px); }
.tm-t-bold .tm-title {
	font-size: clamp(3rem, 10vw, 7.5rem);
	font-weight: 900;
	line-height: .92;
	letter-spacing: -.045em;
	text-transform: uppercase;
}
.tm-t-bold .tm-message { max-width: 520px; color: var(--fg); font-size: 1.15rem; font-weight: 500; }
.tm-t-bold .tm-eyebrow { padding: 6px 12px; background: #111; color: #ffe14d; }
.tm-t-bold .tm-eyebrow::before { display: none; }
.tm-t-bold .tm-countdown__unit { border: 2px solid #111; border-radius: 0; background: #fff; }
.tm-t-bold .tm-social a { border: 2px solid #111; }
.tm-t-bold .tm-progress__track { background: rgba(0, 0, 0, .15); }
@media (max-width: 860px) {
	.tm-t-bold .tm-page::before { top: -20vmax; right: -30vmax; opacity: .9; }
	.tm-t-bold .tm-page::after { display: none; }
}

/* ================================================================
 * 7. Big countdown
 * ============================================================== */
.tm-t-countdown {
	--t-bg: #111418;
	--t-fg: #f4f5f7;
	--t-muted: #9aa1ad;
	--t-line: rgba(255, 255, 255, .1);
	--t-surface: #181c22;
	--t-accent: #ffb020;
	--t-on-accent: #111418;
}
.tm-t-countdown .tm-inner { max-width: 860px; }
.tm-t-countdown .tm-title { font-size: clamp(1.8rem, 4.4vw, 2.6rem); }
.tm-t-countdown .tm-countdown { gap: clamp(8px, 2vw, 20px); margin-top: 44px; }
.tm-t-countdown .tm-countdown__unit {
	flex: 1;
	max-width: 180px;
	padding: clamp(18px, 3vw, 30px) 8px clamp(14px, 2vw, 20px);
	border-radius: 18px;
	position: relative;
}
.tm-t-countdown .tm-countdown__unit::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: rgba(0, 0, 0, .55);
}
.tm-t-countdown .tm-countdown__num {
	color: var(--accent);
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: clamp(2.4rem, 9vw, 5.6rem);
	font-weight: 700;
	letter-spacing: -.04em;
}
.tm-t-countdown .tm-countdown__label { margin-top: 14px; }

/* ================================================================
 * 8. Full-screen photo
 * ============================================================== */
.tm-t-photo {
	--t-bg: #1b1f27;
	--t-fg: #fff;
	--t-muted: rgba(255, 255, 255, .85);
	--t-line: rgba(255, 255, 255, .4);
	--t-surface: rgba(0, 0, 0, .25);
	--t-accent: #ffd166;
	--t-on-accent: #1b1f27;
}
.tm-t-photo .tm-page {
	background:
		linear-gradient(180deg, rgba(10, 12, 18, .45), rgba(10, 12, 18, .72)),
		var(--tm-image, radial-gradient(circle at 20% 20%, #3a4a6b 0, transparent 45%), radial-gradient(circle at 80% 70%, #6b3a52 0, transparent 50%), #1b1f27) center / cover no-repeat;
}
.tm-t-photo .tm-inner { text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
.tm-t-photo .tm-title { font-size: clamp(2.4rem, 7vw, 4.4rem); }
.tm-t-photo .tm-countdown__unit {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* ================================================================
 * 9. Construction site
 * ============================================================== */
.tm-t-construction {
	--t-bg: #1c1c1c;
	--t-fg: #fff;
	--t-muted: #c9c9c9;
	--t-line: rgba(255, 255, 255, .16);
	--t-surface: #262626;
	--t-accent: #ffc400;
	--t-on-accent: #111;
	--t-font: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
}
.tm-t-construction .tm-page::before,
.tm-t-construction .tm-page::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 22px;
	background: repeating-linear-gradient(-45deg, var(--accent) 0 24px, #111 24px 48px);
}
.tm-t-construction .tm-page::before { top: 0; }
.tm-t-construction .tm-page::after { bottom: 0; }
.tm-t-construction .tm-eyebrow { padding: 6px 14px; background: var(--accent); color: #111; letter-spacing: .2em; }
.tm-t-construction .tm-eyebrow::before { display: none; }
.tm-t-construction .tm-title {
	font-size: clamp(2.4rem, 7vw, 4.4rem);
	font-weight: 800;
	letter-spacing: -.01em;
	text-transform: uppercase;
}
.tm-t-construction .tm-progress__track { height: 14px; border-radius: 3px; }
.tm-t-construction .tm-progress__bar {
	border-radius: 3px;
	background: repeating-linear-gradient(-45deg, var(--accent) 0 12px, color-mix(in srgb, var(--accent) 70%, #000) 12px 24px);
	background-size: 34px 34px;
	animation: tm-stripes 1s linear infinite;
}
.tm-t-construction .tm-countdown__unit { border-radius: 4px; border-top: 3px solid var(--accent); }
.tm-t-construction .tm-social a { border-radius: 4px; }
.tm-t-construction .tm-footer { padding-bottom: 44px; }
@keyframes tm-stripes { to { background-position: 34px 0; } }

/* ================================================================
 * 10. Soft pastel
 * ============================================================== */
.tm-t-pastel {
	--t-bg:
		radial-gradient(circle at 12% 18%, #ffd9c7 0, transparent 38%),
		radial-gradient(circle at 88% 22%, #e3d7ff 0, transparent 36%),
		radial-gradient(circle at 70% 90%, #c9f2e3 0, transparent 40%),
		#fdf6f0;
	--t-fg: #3b3355;
	--t-muted: #6e6888;
	--t-line: rgba(59, 51, 85, .14);
	--t-surface: rgba(255, 255, 255, .7);
	--t-accent: #d9668f;
	--t-font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif;
}
.tm-t-pastel .tm-inner {
	padding: 52px 44px;
	border-radius: 36px;
	background: rgba(255, 255, 255, .62);
	box-shadow: 0 24px 60px rgba(120, 90, 140, .14);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.tm-t-pastel .tm-countdown__unit { border-radius: 20px; border: 0; box-shadow: 0 4px 14px rgba(120, 90, 140, .1); }
.tm-t-pastel .tm-progress__bar { background: linear-gradient(90deg, #ffb59a, var(--accent), #a58bff); }
@media (max-width: 560px) {
	.tm-t-pastel .tm-inner { padding: 34px 20px; border-radius: 26px; }
}