/*
 * Kea UI system
 *
 * This file is the final shared visual layer for Kea-owned templates.
 * Page styles define unique layouts; this layer owns recurring typography,
 * colour and hierarchy so new pages do not recreate the fundamentals.
 */

:root {
	--kea-ui-ink: #07141a;
	--kea-ui-paper: #f4f0e8;
	--kea-ui-white: #fffdf9;
	--kea-ui-orange: #d86c2f;
	--kea-ui-orange-light: #f09458;
	--kea-ui-muted: #607279;
	--kea-ui-display: "Newsreader", Georgia, serif;
	--kea-ui-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
	--kea-ui-interior-title: clamp(3.6rem, 4.8vw, 5.3rem);
	--kea-ui-section-title: clamp(2.8rem, 4.1vw, 4.6rem);
	--kea-ui-panel-title: clamp(2.4rem, 3.6vw, 3.8rem);
	--kea-ui-copy: 17px;
	--kea-ui-copy-leading: 1.72;
}

/* Align the shared header with the existing .kea-shell content margins. */
.kea-redesign .header-top-inner .site-logo .brand {
	background-position: left center;
}

.kea-redesign .header-top-inner > .container {
	width: min(1240px, calc(100% - 56px));
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
}

.kea-redesign .header-top-inner > .container > .row {
	margin-inline: 0;
}

.kea-redesign .header-top-inner .hfg-slot.left > .builder-item:first-child {
	padding-left: 0;
}

.kea-redesign .header-top-inner .hfg-slot.right > .builder-item:last-child {
	padding-right: 0;
}

@media (max-width: 680px) {
	.kea-redesign .header-top-inner > .container {
		width: min(1240px, calc(100% - 32px));
	}
}

/* Reusable primitives for every future Kea page. */
.kea-ui-eyebrow {
	margin: 0 0 22px;
	color: var(--kea-ui-orange-light) !important;
	font-family: var(--kea-ui-body);
	font-size: .75rem !important;
	font-weight: 700;
	letter-spacing: .17em;
	line-height: 1.3;
	text-transform: uppercase;
}

.kea-ui-title,
.kea-ui-section-title {
	margin: 0;
	font-family: var(--kea-ui-display);
	font-weight: 500;
	letter-spacing: -.052em;
}

.kea-ui-title {
	color: var(--kea-ui-white);
	font-size: var(--kea-ui-interior-title);
	line-height: .92;
}

.kea-ui-section-title {
	font-size: var(--kea-ui-section-title);
	line-height: .98;
}

.kea-ui-copy {
	font-family: var(--kea-ui-body);
	font-size: var(--kea-ui-copy);
	line-height: var(--kea-ui-copy-leading);
}

/*
 * Compatibility layer for the current Kea templates.
 * Eyebrows above titles are orange on dark backgrounds; titles are white.
 */
.kea-hero .kea-eyebrow,
.kea-why-story__hero .kea-why-story__eyebrow,
.kea-ready__intro .kea-ready__eyebrow,
.kea-knowledge__hero .kea-knowledge__eyebrow,
.kea-services__hero .kea-services__eyebrow,
.kea-support__hero .kea-support__eyebrow,
.kea-araas__hero .kea-araas__eyebrow,
.kea-workshops__hero .kea-workshops__eyebrow,
.kea-about__hero .kea-about__eyebrow,
.kea-contact__hero .kea-contact__eyebrow,
.kea-persona-hero .kea-eyebrow,
.kea-persona-choice > .kea-shell > .kea-eyebrow,
.kea-final-cta > .kea-shell > .kea-eyebrow {
	color: var(--kea-ui-orange-light) !important;
}

/* Dark-section titles always retain the white/orange hierarchy. */
.kea-why-story__hero h1,
.kea-ready__intro h1,
.kea-knowledge__hero h1,
.kea-services__hero h1,
.kea-support__hero h1,
.kea-araas__hero h1,
.kea-workshops__hero h1,
.kea-about__hero h1,
.kea-contact__hero h1,
.kea-persona-hero h1 {
	color: var(--kea-ui-white);
}

/* Desktop hierarchy. The homepage proposition remains the sole oversized H1. */
@media (min-width: 981px) {
	.kea-why-story__hero h1,
	.kea-ready__intro h1,
	.kea-knowledge__hero h1,
	.kea-services__hero h1,
	.kea-support__hero h1,
	.kea-araas__hero h1,
	.kea-workshops__hero h1,
	.kea-about__hero h1,
	.kea-contact__hero h1 {
		font-size: var(--kea-ui-interior-title);
		line-height: .92;
		letter-spacing: -.052em;
	}

	.kea-split h2,
	.kea-section-heading h2,
	.kea-g2 h2,
	.kea-final-cta h2,
	.kea-why-story__premise h2,
	.kea-why-story__loop-heading h2,
	.kea-why-story__next h2,
	.kea-why-story__statement,
	.kea-ready__question h2,
	.kea-ready__result h2,
	.kea-ready__why h2,
	.kea-knowledge__body-head h2,
	.kea-knowledge__next h2,
	.kea-services__premise h2,
	.kea-services__selector-heading h2,
	.kea-services__decision h2,
	.kea-support__reframe h2,
	.kea-support__map-heading h2,
	.kea-support__cadence h2,
	.kea-support__fit-heading h2,
	.kea-support__closing h2,
	.kea-araas__section-heading h2,
	.kea-araas__runway-heading h2,
	.kea-araas__fit-heading h2,
	.kea-araas__system-heading h2,
	.kea-araas__always-intro h2,
	.kea-araas__closing h2,
	.kea-workshops__why h2,
	.kea-workshops__room-heading h2,
	.kea-workshops__agenda h2,
	.kea-workshops__fit-heading h2,
	.kea-workshops__closing h2,
	.kea-about__name-copy h2,
	.kea-about__section-head h2,
	.kea-about__code h2,
	.kea-about__proof h2,
	.kea-about__focus h2,
	.kea-about__next h2,
	.kea-about__bird-card h2 {
		font-size: var(--kea-ui-section-title);
		line-height: .98;
	}

	.kea-services__panel h3,
	.kea-support__panel h3,
	.kea-araas__panel h3,
	.kea-workshops__panel h3 {
		font-size: var(--kea-ui-panel-title);
		line-height: 1;
	}

	.kea-ready__intro-copy > p:first-child,
	.kea-knowledge__hero-copy p,
	.kea-services__hero-side > p,
	.kea-support__hero-copy p,
	.kea-araas__hero-copy p,
	.kea-workshops__hero-copy p,
	.kea-about__hero-copy p {
		font-family: var(--kea-ui-body);
		font-size: var(--kea-ui-copy);
		line-height: var(--kea-ui-copy-leading);
	}
}

/*
 * Insight author cards: compact identity header and full-width biography on
 * mobile. The shared article template makes this apply to every live author.
 */
@media (max-width: 700px) {
	.kea-article-footer {
		width: min(100% - 32px, 930px);
		margin-bottom: 72px;
		padding-top: 24px;
	}

	.kea-author-card {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 4px 18px;
		align-items: center;
		margin-top: 36px;
		padding: 24px 20px 26px;
	}

	.kea-author-card > div:first-child {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
	}

	.kea-author-card > div:last-child {
		display: contents;
	}

	.kea-author-card img {
		width: 72px;
		height: 72px;
	}

	.kea-author-card .kea-eyebrow {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
		margin: 0 0 2px;
		font-size: 10px !important;
		letter-spacing: .14em;
	}

	.kea-author-card h3 {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		margin: 0;
		font-size: clamp(1.75rem, 8vw, 2.15rem);
		line-height: 1;
	}

	.kea-author-card p:not(.kea-eyebrow) {
		grid-column: 1 / -1;
		grid-row: 3;
		margin: 18px 0 0;
		color: var(--kea-ui-muted);
		font-size: 15px;
		line-height: 1.62;
	}
}

/*
 * Homepage mobile section controls.
 * This is intentionally the last rule in the final shared stylesheet so the
 * controls cannot be displaced or hidden by page-specific layout rules.
 */
@media (max-width: 700px) {
	.kea-site-progress--home {
		position: fixed !important;
		z-index: 2147483646 !important;
		left: 10px !important;
		right: 10px !important;
		bottom: max(14px, env(safe-area-inset-bottom)) !important;
		top: auto !important;
		display: block !important;
		width: auto !important;
		height: 42px !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
		clip: auto !important;
		clip-path: none !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: none !important;
	}

	.kea-site-progress--home .kea-site-progress__bar {
		display: none !important;
	}

	.kea-site-progress--home .kea-site-progress__next,
	.kea-site-progress--home .kea-site-progress__top {
		position: absolute !important;
		top: 0 !important;
		bottom: auto !important;
		display: inline-flex !important;
		width: 82px !important;
		height: 42px !important;
		margin: 0 !important;
		transform: none !important;
		pointer-events: auto !important;
	}

	.kea-site-progress--home .kea-site-progress__next {
		right: 0 !important;
		left: auto !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	.kea-site-progress--home .kea-site-progress__top {
		left: 0 !important;
		right: auto !important;
	}

	.kea-site-progress--home[data-kea-home-past-hero="false"] .kea-site-progress__top {
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.kea-site-progress--home[data-kea-home-past-hero="true"] .kea-site-progress__top {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}
}

/* Buyer journey: compact engagement summaries, using the existing Kea palette. */
.kea-engagement { padding: 48px 0; background: #f4f0e8; color: #0b222b; }
.kea-engagement h2 { margin: 0 0 24px; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.12; }
.kea-engagement__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; margin: 0; }
.kea-engagement__grid > div, .kea-engagement__compare > article { border-top: 1px solid rgba(11,34,43,.22); padding-top: 16px; min-width: 0; }
.kea-engagement dt { font: 600 16px/1.4 "IBM Plex Sans",sans-serif; margin-bottom: 8px; }
.kea-engagement dd, .kea-engagement__compare p { margin: 0; font: 400 16px/1.6 "IBM Plex Sans",sans-serif; color: #3e5259; }
.kea-engagement .kea-engagement__grid dd { padding: 0; margin: 0; }
.kea-engagement h2[id], #first-90-days { scroll-margin-top: 32px; }
.kea-engagement a { color: #0b222b; text-decoration: underline; text-underline-offset: 3px; }
.kea-engagement a:hover { color: #a74619; }
.kea-engagement__compare { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.kea-engagement__compare h3 { font-size: 24px; margin: 0 0 12px; }
.kea-engagement__compare p + p { margin-top: 12px; }
.kea-contact .kea-contact__conversation-layout--direct { display: block; max-width: 920px; }
.kea-site-progress:not([data-kea-scrolled="true"]) .kea-site-progress__top { display: none !important; }
.kea-site-progress { justify-content: flex-end !important; }
.kea-site-progress .kea-site-progress__top { width: 82px; height: 44px; }
@media (max-width: 700px) {
 .kea-engagement { padding: 32px 0; }
 .kea-engagement__grid, .kea-engagement__compare { grid-template-columns: 1fr; gap: 20px; }
}

/* Compact About and Services sections following draft review. */
.kea-about .kea-about__proof { padding-block: 48px; }
.kea-about .kea-about__people { padding-block: 48px; }
.kea-about .kea-about__people-head { display: block; margin-bottom: 28px; }
.kea-about .kea-about__people-head .kea-about__eyebrow { margin: 0 0 12px; }
.kea-about .kea-about__people-head h2 { max-width: none; font-size: clamp(30px, 3vw, 44px); line-height: 1.08; }
.kea-about .kea-about__people-head > p:last-child { max-width: 780px; margin: 14px 0 0; }
.kea-about .kea-about__focus::after { display: none; }
.kea-about .kea-about__focus h2 { max-width: none; width: 100%; font-size: clamp(28px, 2.7vw, 40px); text-wrap: balance; }
.kea-about .kea-about__traits { padding-block: 48px; }
.kea-about .kea-about__traits .kea-about__section-head { display: block; margin-bottom: 28px; }
.kea-about .kea-about__traits .kea-about__section-head .kea-about__eyebrow { margin: 0 0 12px; }
.kea-about .kea-about__traits .kea-about__section-head h2 { max-width: none; width: 100%; font-size: clamp(28px, 2.7vw, 40px); line-height: 1.12; text-wrap: balance; }
@media (max-width: 700px) { .kea-about .kea-about__traits { padding-block: 32px; } }

.kea-about .kea-about__focus-list p { background: #172e36; border: 1px solid rgba(255,255,255,.18); border-top: 2px solid #d86c2f; backdrop-filter: none; }
.kea-services .kea-services__hero { min-height: auto; }
.kea-services .kea-services__hero-layout { padding-block: 48px; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(32px,5vw,72px); align-items: center; }
.kea-services .kea-services__hero h1 { font-size: clamp(36px,4vw,56px); line-height: 1.02; }
.kea-services .kea-services__hero-side > p { margin-bottom: 20px; }
.kea-services .kea-services__decision { padding-block: 48px; }
.kea-services .kea-services__decision-layout { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.kea-services .kea-services__decision h2 { font-size: clamp(30px,3vw,44px); line-height: 1.08; }
.kea-services .kea-services__decision-layout > div:last-child > p { margin-bottom: 20px; }
@media (max-width: 940px) {
 .kea-services .kea-services__hero-layout, .kea-services .kea-services__decision-layout { grid-template-columns: 1fr; gap: 24px; }
 .kea-services .kea-services__hero-layout { padding-block: 32px; }
 .kea-services .kea-services__decision, .kea-about .kea-about__people, .kea-about .kea-about__proof { padding-block: 32px; }
}