/* ============================================================
   Shared page components for the AI pages (AI Services, Java
   modernization workshop, request form).

   These pages drop the content well and run the record straight
   on the page ground: mono keys carry the hard facts, and every
   claim that has evidence shows it.

   The palette comes from theme.css, so these pages follow the
   dark and the light ground like everything else. The --ai-*
   names are kept as aliases because the page sheets on top of
   this one use them.
   ============================================================ */

:root {
	--ai-bg: var(--bg);
	--ai-panel: var(--surface);
	--ai-panel-2: var(--surface-2);
	--ai-line: var(--line);
	--ai-line-2: var(--line-2);
	--ai-text: var(--text);
	--ai-dim: var(--dim);
	--ai-dim-2: var(--dim-2);
	--ai-amber: var(--accent);
	--ai-mint: var(--mint);
}

/* The dark ground has to reach past the content well on both sides. */
body,
.main_container,
.content-wrapper.ai_page {
	background: var(--ai-bg);
}
.main_container { border: 0; }
.leftcol { background: transparent; }

.ai_page {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 5% 72px;
	color: var(--ai-text);
}
.ai_page h1, .ai_page h2, .ai_page h3, .ai_page h4 { color: var(--ai-text); }
.ai_page a, .ai_page a:link, .ai_page a:visited { color: var(--ai-amber); }
.ai_page a:hover { color: var(--accent-hover); }

/* ---------- Hero ---------- */
.ai_hero { padding: 52px 0 46px; }

.ai_lang {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 26px;
	color: var(--ai-dim-2);
}
.ai_page .ai_lang a, .ai_page .ai_lang a:link, .ai_page .ai_lang a:visited { color: var(--ai-dim); }
.ai_page .ai_lang a[aria-current="true"] { color: var(--ai-amber); }
.ai_lang span { padding: 0 8px; color: var(--ai-line-2); }

.ai_kicker {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ai-amber);
	margin-bottom: 18px;
}

.ai_hero h1 {
	font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.06;
	margin: 0 0 22px;
	max-width: 24ch;
}
.ai_hero h1 em { font-style: normal; color: var(--ai-amber); }

.ai_hero > p {
	max-width: 60ch;
	color: var(--ai-dim);
	font-size: 1.08rem;
	line-height: 1.65;
	margin: 0 0 40px;
}

/* The questions the page answers, as a record header. */
.ai_contract {
	list-style: none;
	margin: 0;
	padding: 26px 0 0;
	border-top: 1px solid var(--ai-line);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.ai_contract li {
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--ai-text);
	border-left: 1px solid var(--ai-line);
	padding-left: 16px;
}
/* The one prerequisite that holds for every service, stated once. */
.ai_hero > p.ai_baseline {
	margin: 22px 0 0;
	max-width: 70ch;
	font-size: 0.86rem;
	line-height: 1.6;
	color: var(--ai-dim-2);
}

.ai_contract b {
	display: block;
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ai-amber);
	margin-bottom: 7px;
}

/* ---------- Section ---------- */
.ai_section { padding-top: 46px; }
.ai_section_head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--ai-line);
	padding-bottom: 14px;
	margin-bottom: 8px;
}
.ai_section_head h2 {
	font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0;
}
.ai_count {
	font-family: var(--font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ai-dim-2);
	white-space: nowrap;
}
.ai_section > p {
	color: var(--ai-dim);
	max-width: 68ch;
	margin: 14px 0 26px;
	line-height: 1.65;
}

/* ---------- Panel ---------- */
.ai_panel {
	background: var(--ai-panel);
	border: 1px solid var(--ai-line);
	border-radius: 12px;
	padding: 26px 28px;
}
.ai_panel h3 {
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0 0 0.8rem;
}
.ai_panel p { color: var(--ai-dim); line-height: 1.65; margin: 0 0 1rem; }
.ai_panel p:last-child { margin-bottom: 0; }

.ai_cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: 18px;
}

/* Ticked list, used wherever the page enumerates real items. */
.ai_list { list-style: none; margin: 0; padding: 0; }
.ai_list li {
	position: relative;
	padding-left: 17px;
	margin-bottom: 9px;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--ai-text);
}
.ai_list li::before {
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	content: "";
	background: var(--ai-mint);
	border-radius: 1px;
}
.ai_list--muted li { color: var(--ai-dim); }
.ai_list--muted li::before { background: var(--ai-dim-2); }

/* ---------- Call to action ---------- */
.ai_cta {
	display: inline-block;
	align-self: flex-start;
	padding: 9px 18px;
	border: 1px solid var(--ai-line-2);
	border-radius: 4px;
	font-family: var(--font-mono);
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ai_page a.ai_cta, .ai_page a.ai_cta:link, .ai_page a.ai_cta:visited { color: var(--ai-text); }
.ai_page a.ai_cta:hover, .ai_page a.ai_cta:focus {
	background: var(--accent-strong);
	border-color: var(--accent-strong);
	color: var(--on-accent);
	text-decoration: none;
}
.ai_cta::after { content: " \2192"; color: var(--ai-amber); }
.ai_page a.ai_cta:hover::after { color: var(--on-accent); }

/* ---------- Closing block ---------- */
.ai_outro {
	margin-top: 56px;
	padding: 36px 38px;
	background: var(--ai-panel);
	border: 1px solid var(--ai-line);
	border-radius: 12px;
}
.ai_outro h2 {
	margin: 0 0 0.7rem;
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.ai_outro p {
	margin: 0 0 1.1rem;
	color: var(--ai-dim);
	max-width: 64ch;
	line-height: 1.65;
}

/* ---------- Focus and motion ---------- */
.ai_page a:focus-visible {
	outline: 2px solid var(--ai-amber);
	outline-offset: 3px;
	border-radius: 2px;
}

/* One orchestrated moment: the record header resolves on load. */
@media (prefers-reduced-motion: no-preference) {
	.ai_kicker, .ai_hero h1, .ai_hero > p, .ai_contract li {
		animation: ai_settle 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
	}
	.ai_hero h1 { animation-delay: 0.06s; }
	.ai_hero > p { animation-delay: 0.12s; }
	.ai_contract li:nth-child(1) { animation-delay: 0.18s; }
	.ai_contract li:nth-child(2) { animation-delay: 0.24s; }
	.ai_contract li:nth-child(3) { animation-delay: 0.30s; }
	.ai_contract li:nth-child(4) { animation-delay: 0.36s; }
}
@keyframes ai_settle {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
	.ai_contract { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 640px) {
	.ai_hero { padding: 34px 0 32px; }
	.ai_outro, .ai_panel { padding: 26px 22px; }
}
@media (max-width: 560px) {
	.ai_contract { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   Footer on these pages: the dark ground runs to the bottom
   instead of stopping at a light block under the last panel.
   ============================================================ */
#companyfooter {
	background: var(--ai-panel);
	border-top: 1px solid var(--ai-line);
	color: var(--ai-dim);
	margin-top: 0;
}
#companyfooter a, #companyfooter a:link, #companyfooter a:visited { color: var(--ai-dim); }
#companyfooter a:hover { color: var(--ai-amber); }
#companyfooter h2, #companyfooter h2 a { color: var(--ai-text); }
.companyfooter_bottom { border-top-color: var(--ai-line); }
#social-icons a { background: var(--ai-panel-2); border-color: var(--ai-line); }

/* Contact line under the closing call to action: these pages have no
   sidebar, so the address has to live where the decision is made. */
.ai_contact {
	margin: 18px 0 0;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--ai-dim-2);
}
.ai_page .ai_contact a, .ai_page .ai_contact a:link, .ai_page .ai_contact a:visited { color: var(--ai-dim); }
.ai_page .ai_contact a:hover { color: var(--ai-amber); }