/**
 * Site-wide typography — aligned with legacy i3D Mobility website scale.
 * Loads last so one rhythm applies on homepage and inner pages.
 */

:root {
	/* Legacy site scale (16px base, reference Hostinger builder) */
	--tx-font-size: 16px;
	--tx-font-h1: 3rem;
	--tx-font-h2: 2.25rem;
	--tx-font-h3: 1.375rem;
	--tx-line-height: 1.6;
	--tx-btn-font-size: 15px;
	--tx-nav-font-size: 16px;

	--wh-copy: 16px;
	--wh-copy-lg: 18px;
	--wh-copy-title: clamp(1.25rem, 1.4vw, 1.375rem);
	--wh-copy-meta: 12px;
	--wh-hero-title: clamp(2.75rem, 5vw, 3.5rem);
	--wh-section-title: clamp(2rem, 3.2vw, 2.5rem);
	--wh-metric-value: clamp(2.5rem, 4vw, 3rem);
	--wh-lh-body: 1.6;
	--wh-lh-tight: 1.15;
	--wh-text-body: #4a4a4a;
	--wh-text-muted: #666666;
	--wh-accent-gold: #b69a6b;
}

html {
	font-size: var(--tx-font-size) !important;
}

body {
	line-height: var(--wh-lh-body) !important;
}

h1 {
	font-size: var(--tx-font-h1) !important;
	line-height: 1.12 !important;
}

h2 {
	font-size: var(--tx-font-h2) !important;
	line-height: 1.18 !important;
}

h3 {
	font-size: var(--tx-font-h3) !important;
	line-height: 1.25 !important;
}

/* --------------------------------------------------------------------------
   Kickers / eyebrows — 12px uppercase
   -------------------------------------------------------------------------- */
.i3d-kicker,
.i3d-spotlight__index,
.i3d-range-card__eyebrow,
.wh-landing-kicker,
.wh-section-eyebrow,
.wh-cs-card__eyebrow,
.i3d-about-fact span,
.wh-rnd-step__num,
.i3d-about-video-card__tag,
.i3d-video__kicker {
	font-size: var(--wh-copy-meta) !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	line-height: 1.35 !important;
}

.i3d-kicker--gold,
.wh-landing-kicker {
	color: var(--wh-accent-gold, #b69a6b) !important;
}

/* --------------------------------------------------------------------------
   Hero display titles — ~48–56px
   -------------------------------------------------------------------------- */
.i3d-hero--split .i3d-hero__title,
.i3d-intro__title,
.i3d-about-hero__title,
.wh-rnd-hero__title,
.wh-landing-hero__title,
.wh-cs-hub-hero__title,
.i3d-masthead__title,
.wh-landing-masthead__title {
	font-size: var(--wh-hero-title) !important;
	line-height: var(--wh-lh-tight) !important;
	letter-spacing: -0.03em !important;
}

/* --------------------------------------------------------------------------
   Section titles — ~32–40px
   -------------------------------------------------------------------------- */
.i3d-section-title,
.i3d-metrics__title,
.i3d-spotlight__title,
.i3d-split__title,
.wh-landing-section-head h2,
.wh-landing-split__copy h2,
.wh-site-page .wh-section-title,
.wh-rnd-outcomes__title,
.wh-rnd-pillars__title,
.wh-rnd-process__title,
.wh-case-study-outcomes__head .wh-rnd-outcomes__title,
.wh-case-study-problem__head .i3d-section-title,
.wh-videos-section__title {
	font-size: var(--wh-section-title) !important;
	line-height: var(--wh-lh-tight) !important;
	letter-spacing: -0.025em !important;
}

/* --------------------------------------------------------------------------
   Paragraphs & lead copy — 18px leads, 16px body
   -------------------------------------------------------------------------- */
.i3d-hero__lead,
.i3d-intro__lead,
.i3d-intro__lead p,
.i3d-spotlight__lead,
.i3d-about-hero__lead,
.wh-rnd-hero__lead,
.wh-landing-hero__lead,
.wh-cs-hub-hero__lead,
.i3d-masthead__lead,
.wh-landing-masthead__lead,
.i3d-section-lead,
.wh-landing-section-head p,
.i3d-vision .i3d-section-lead {
	font-size: var(--wh-copy-lg) !important;
	line-height: var(--wh-lh-body) !important;
	color: var(--wh-text-body, #4a4a4a) !important;
}

.i3d-split__text,
.i3d-brand__copy p,
.i3d-highlights__card-text,
.i3d-rnd__copy .i3d-section-lead,
.i3d-compare .i3d-section-lead,
.i3d-qa .i3d-section-lead,
.i3d-highlights .i3d-section-lead,
.wh-rnd-prose,
.wh-rnd-prose p,
.wh-archive-lead,
.wh-contact-lead,
.wh-about-mission-copy,
.wh-landing-split__text,
.wh-landing-card p,
.wh-landing-cta p,
.wh-cs-card__excerpt,
.entry-content:not(.i3d-about-content) p,
.front-page-main p:not(.i3d-kicker):not(.wh-announce):not(.i3d-cat-strip__label):not(.i3d-consult__text) {
	font-size: var(--wh-copy) !important;
	line-height: var(--wh-lh-body) !important;
	color: var(--wh-text-body, #4a4a4a) !important;
}

.i3d-consult--campaign .i3d-consult__text,
.i3d-consult--campaign .i3d-consult__lead {
	font-size: var(--wh-copy-lg) !important;
	line-height: var(--wh-lh-body) !important;
	color: #cbc7c7 !important;
}

/* --------------------------------------------------------------------------
   Card / point titles — ~20–22px
   -------------------------------------------------------------------------- */
.i3d-intro__points strong,
.i3d-spotlight__feature,
.i3d-process__step h3,
.i3d-brand__benefits h3,
.i3d-range-card__title,
.i3d-range-card__title a,
.i3d-testimonial__author strong,
.i3d-frame-card h3,
.i3d-highlights__card-title,
.i3d-highlights__item h3,
.i3d-benefits__item h3,
.wh-rnd-problem__grid strong,
.wh-case-study-problem__title,
.wh-rnd-pillar h3,
.wh-rnd-process__steps strong,
.wh-rnd-partners__grid h3,
.wh-about-value h3,
.wh-case-study-outcome__title,
.wh-landing-card h3,
.i3d-about-video-card__title {
	font-size: var(--wh-copy-title) !important;
	line-height: 1.35 !important;
}

/* --------------------------------------------------------------------------
   Card body / secondary lines — 16px
   -------------------------------------------------------------------------- */
.i3d-intro__points span,
.i3d-process__step p,
.i3d-brand__benefits p,
.i3d-range-card__text,
.i3d-metric span,
.i3d-testimonial__quote p,
.i3d-testimonial__author span,
.i3d-checklist__points li,
.wh-rnd-problem__grid span,
.wh-case-study-problem__text,
.wh-rnd-pillar p,
.wh-rnd-process__steps span,
.wh-rnd-outcomes__grid p,
.wh-case-study-outcome__text,
.wh-rnd-partners__grid p,
.wh-about-value p,
.wh-videos-empty__text,
.wh-videos-cta__text,
.wh-videos-featured__description,
.i3d-about-video-card__text {
	font-size: var(--wh-copy) !important;
	line-height: var(--wh-lh-body) !important;
	color: var(--wh-text-body, #4a4a4a) !important;
}

/* About story beats — sized to balance left story image (source: i3d-brand.css) */
.i3d-about-content h2,
.i3d-about-content h3,
.i3d-about-content h4,
.i3d-about-content h5,
.entry-content.i3d-about-content h2,
.entry-content.i3d-about-content h3,
.entry-content.i3d-about-content h4,
.entry-content.i3d-about-content h5 {
	font-size: clamp(1.375rem, 2vw, 1.75rem) !important;
	line-height: 1.25 !important;
	font-weight: 700 !important;
	letter-spacing: -0.025em !important;
	color: #0a0a0a !important;
}

.i3d-about-content p,
.entry-content.i3d-about-content p {
	font-size: clamp(1.0625rem, 1.35vw, 1.1875rem) !important;
	line-height: 1.75 !important;
	color: #3f4650 !important;
}

.wh-videos-featured__description p {
	margin: 0 0 1em !important;
}

.wh-videos-featured__description p:last-child {
	margin-bottom: 0 !important;
}

.i3d-testimonial__quote p {
	color: var(--tx-text, #141414) !important;
}

/* --------------------------------------------------------------------------
   Metrics — dark band + large values ~40–48px (legacy home)
   -------------------------------------------------------------------------- */
.i3d-metrics {
	background: #262626 !important;
	color: #fff !important;
}

.i3d-metrics .i3d-kicker {
	color: rgba(255, 255, 255, 0.55) !important;
}

.i3d-metrics__title {
	color: #fff !important;
}

.i3d-metric {
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
}

.i3d-metric strong,
.wh-landing-band-card strong,
.wh-about-stat strong {
	font-size: var(--wh-metric-value) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.03em !important;
	color: #fff !important;
}

.i3d-metric span {
	color: rgba(255, 255, 255, 0.65) !important;
	font-size: 14px !important;
}

/* --------------------------------------------------------------------------
   Process step numbers — large light grey (legacy home)
   -------------------------------------------------------------------------- */
.i3d-process__num {
	display: block !important;
	margin-bottom: 12px !important;
	font-family: var(--tx-font-heading, Syne, sans-serif) !important;
	font-size: clamp(2.25rem, 3.5vw, 3rem) !important;
	font-weight: 300 !important;
	letter-spacing: -0.02em !important;
	line-height: 1 !important;
	color: #d1d5db !important;
	text-transform: none !important;
}

.i3d-process__step:hover .i3d-process__num {
	color: var(--tx-accent, #c8102e) !important;
	letter-spacing: -0.02em !important;
}

/* --------------------------------------------------------------------------
   Buttons & navigation
   -------------------------------------------------------------------------- */
.i3d-btn,
button.i3d-btn,
a.i3d-btn,
.wh-btn,
.wh-btn--primary,
.wh-site-page .wh-btn {
	font-size: var(--tx-btn-font-size) !important;
	min-height: 44px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0.01em !important;
}

.wh-nav-menu > li > a,
.terea-nav-menu > li > a,
.main-navigation a,
.site-header .menu a {
	font-size: var(--tx-nav-font-size) !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
}

/* --------------------------------------------------------------------------
   Dark sections
   -------------------------------------------------------------------------- */
.wh-rnd-problem .i3d-section-lead {
	color: rgba(255, 255, 255, 0.86) !important;
}

.wh-rnd-problem__grid span {
	color: rgba(255, 255, 255, 0.78) !important;
}

.wh-rnd-problem__grid strong,
.wh-case-study-problem__title {
	color: #fff !important;
}

.wh-case-study-problem__text {
	color: rgba(255, 255, 255, 0.78) !important;
}

.wh-case-study-problem .wh-case-study-problem__num,
.wh-case-study-outcomes .wh-case-study-outcome__num,
.wh-rnd-problem .wh-case-study-problem__num {
	background: var(--tx-accent, #c8102e) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
}

.wh-case-study-outcome__title {
	color: var(--tx-accent, #c8102e) !important;
}

.wh-videos-hero .wh-rnd-hero__lead,
.wh-videos-hero .i3d-kicker {
	color: rgba(255, 255, 255, 0.78) !important;
}

.wh-videos-hero .wh-rnd-hero__title {
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   Header / footer chrome
   -------------------------------------------------------------------------- */
.wh-site-footer .footer-title,
.wh-site-footer .footer-widget-title,
.wh-site-footer .widget-title,
.footer-col h3.footer-title,
.footer-col .footer-widget-title {
	font-family: var(--tx-font-heading, Syne, sans-serif) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	line-height: 1.3 !important;
	margin-bottom: 18px !important;
	color: var(--wh-accent-gold, #b69a6b) !important;
}

.wh-site-footer .footer-description,
.wh-site-footer .footer-col ul a,
.wh-site-footer .footer-col .widget a,
.wh-site-footer .footer-col p,
.wh-site-footer .footer-col .textwidget,
.wh-site-footer .footer-contact-list li,
.wh-site-footer .footer-contact-list a,
.wh-site-footer .footer-contact-list span,
.footer-col a,
.footer-col .widget a {
	font-size: 16px !important;
	line-height: 1.55 !important;
	font-weight: 500 !important;
}

.wh-site-footer .footer-description,
.footer-description {
	font-size: 16px !important;
	line-height: 1.55 !important;
	font-weight: 500 !important;
	color: #4b5563 !important;
}

.wh-site-footer .footer-col a:hover,
.wh-site-footer .footer-contact-list a:hover {
	color: var(--tx-accent, #c8102e) !important;
}

.wh-site-footer .footer-copyright,
.wh-site-footer .footer-bottom-links a,
.wh-site-footer .footer-bottom a {
	font-size: 14px !important;
	font-weight: 500 !important;
}

.wh-site-footer .footer-social {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin-top: 18px !important;
}

.wh-site-footer .footer-social .social-link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	border-radius: 10px !important;
}

.wh-site-footer .footer-social .social-link svg {
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	fill: currentColor !important;
}

.wh-site-footer .footer-social .social-link:hover,
.wh-site-footer .footer-social .social-link:focus-visible,
.wh-site-footer .footer-col a.social-link:hover,
.wh-site-footer .footer-col a.social-link:focus-visible {
	color: #fff !important;
}

.wh-site-footer .footer-col p a + a {
	margin-left: 10px;
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.wh-contact-main {
	padding-bottom: clamp(48px, 6vw, 72px);
}

.wh-contact-page {
	padding-top: clamp(16px, 2.5vw, 28px);
}

.wh-contact-form label {
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0.01em !important;
	color: #374151 !important;
}

.wh-contact-form input,
.wh-contact-form select,
.wh-contact-form textarea {
	font-size: 16px !important;
	min-height: 42px !important;
	padding: 10px 14px !important;
}

.wh-contact-form textarea {
	min-height: 120px !important;
}

.wh-contact-title {
	font-size: clamp(1.5rem, 2vw, 1.875rem) !important;
	font-weight: 700 !important;
}

.wh-contact-form .wh-contact-submit {
	justify-self: start !important;
	width: auto !important;
	min-width: 148px !important;
	min-height: 44px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0.02em !important;
}

.wh-contact-consent {
	font-size: 13px !important;
	color: #6b7280 !important;
}
