/* Reset + base layout primitives shared by every section. */

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font: var(--tp-body);
	color: var(--tp-black);
	background: var(--tp-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font-family: var(--tp-font-body);
	cursor: pointer;
	border: none;
	background: none;
	/* The UA gives buttons `padding: 1px 6px`. Combined with the global
	   border-box and a fixed width, that silently eats 12px of content box —
	   which was squashing the 24px search-close glyph to 12px wide. Buttons
	   that want padding set it themselves. */
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--tp-font-heading);
	font-weight: 600;
}

p {
	margin: 0;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 12px 20px;
	background: var(--tp-blue);
	color: var(--tp-white);
	border-radius: var(--tp-radius-sm);
	z-index: 10000;
	clip: auto;
}

.tp2026-container {
	width: 100%;
	max-width: var(--tp-container);
	margin: 0 auto;
	padding: 0 20px;
}

.tp2026-container--narrow {
	max-width: var(--tp-container-narrow);
}

.tp-section {
	padding: 64px 0;
}

/* Figma 1752:4337 "Separator" — a 1px #dde4ee rule sitting on the root
   canvas at y=1601, spanning the full 1112px narrow container. It closes
   the business-stats block (content bottoms out at y=1521, so 80px above)
   and stands 87px clear of the Awards frame at y=1688. The section
   paddings either side supply 64px each, so the margins here only make up
   the difference. Decorative, hence aria-hidden on the element. */
.tp-divider {
	border: 0;
	height: 1px;
	margin: 16px 0 24px;
	background: var(--tp-divider);
}

.tp-section__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 48px;
}

.tp-section__title {
	font: var(--tp-h2);
	color: var(--tp-heading);
}

.tp-section__desc {
	font: var(--tp-body);
	color: var(--tp-gray-700);
	max-width: 555px;
}

/* Buttons — Figma pill: 44px tall, radius 59, Bold 16/24.
   Primary pads 0 35px; icon variants pad 16px left / 4px right with a 36px icon. */
.tp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px 35px;
	border-radius: var(--tp-radius-pill);
	font: var(--tp-btn);
	white-space: nowrap;
	transition: transform var(--tp-speed-fast) var(--tp-ease), box-shadow var(--tp-speed-fast) var(--tp-ease), background var(--tp-speed-fast) var(--tp-ease), color var(--tp-speed-fast) var(--tp-ease), border-color var(--tp-speed-fast) var(--tp-ease), padding var(--tp-speed-spring) var(--tp-ease-spring);
}

.tp-btn--primary {
	background: var(--tp-blue);
	color: var(--tp-white);
}

.tp-btn--primary:hover {
	background: var(--tp-blue-dark);
	transform: translateY(-2px);
}

/* ----------------------------------------------------------------
 * Icon-pill hover — the signature ThinkPalm CTA interaction.
 *
 * Every icon pill in the Figma prototype animates the same way on hover
 * (SMART_ANIMATE, SPRING_PRESET_THREE — 1250ms envelope, and because the
 * preset is overdamped it settles at --tp-speed-spring = 0.72s, not the 0.4s
 * an underdamped reading of it suggests): the 36px arrow disc slides from
 * the left inset to the right inset and the
 * label slides the other way to fill the space. Verified on 1006:72674→72676
 * (Consult Our Team), 1974:1787→1788 (Get in Touch), 1122:4554→4555
 * (Contact Us Now) and 1546:3890→3889 (Discover More).
 *
 * Default geometry: icon at 4px from the left, label ending 16px from the
 * right. Hover: label starting 16px from the left, icon 4px from the right.
 * The icon is absolutely positioned so `left` can animate; the label is moved
 * by animating the button's own padding, which keeps the pill width stable.
 *
 * Outline pills additionally invert their fill on hover — that part is
 * per-section because the accent colour differs; this base pattern is the
 * geometry only. Reuse it by copying these three rules onto a section class.
 * ---------------------------------------------------------------- */
.tp-btn--white {
	position: relative;
	justify-content: flex-start;
	background: var(--tp-white);
	color: var(--tp-black);
	padding: 4px 16px 4px 50px; /* 4 icon inset + 36 icon + 10 gap = 50 */
}

.tp-btn--white .tp-btn__icon {
	position: absolute;
	left: 4px;
	top: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--tp-blue);
	color: var(--tp-white);
	transition: left var(--tp-speed-spring) var(--tp-ease-spring), background var(--tp-speed-fast) var(--tp-ease), color var(--tp-speed-fast) var(--tp-ease);
}

.tp-btn--white:hover,
.tp-btn--white:focus-visible {
	padding: 4px 50px 4px 16px;
}

.tp-btn--white:hover .tp-btn__icon,
.tp-btn--white:focus-visible .tp-btn__icon {
	left: calc(100% - 40px); /* 36 icon + 4 inset */
}

@media (prefers-reduced-motion: reduce) {
	.tp-btn--white,
	.tp-btn--white .tp-btn__icon {
		transition: none;
	}
}

/* ----------------------------------------------------------------
 * Outline blue icon pill — the "new white" component's own branded
 * colourway, Figma 1122:4554 (default) → 1122:4555 (hover).
 *
 * Default 1122:4554: 193x44, radius 59, transparent fill (the component's
 * #1D1D1D fill is toggled off), 1px INSIDE stroke #1977f3. Padding 4 left /
 * 16 right, 10px gap, 36px disc, Bold 16/24 #1977f3 label, textCase TITLE.
 * Hover 1122:4555: the straight inversion — solid #1977f3 fill, no stroke,
 * white label, white disc — and the disc and label trade sides (padding
 * flips to 16 left / 4 right).
 *
 * Unlike the rest of the theme's icon pills, this component's own prototype
 * transition is SMART_ANIMATE / EASE_OUT / 300ms rather than a spring — which
 * is exactly --tp-speed-fast + --tp-ease, so the transition below overrides
 * .tp-btn's spring padding ramp on purpose.
 * ---------------------------------------------------------------- */
.tp-btn--outline {
	position: relative;
	justify-content: flex-start;
	/* .tp-btn's 10px block padding goes away below, which would leave the pill
	   at 24 + 8 = 32px; the Figma box is a fixed 44 and the absolutely
	   positioned disc needs that to sit on its 4px top/bottom inset. */
	min-height: 44px;
	padding: 4px 16px 4px 50px; /* 4 inset + 36 disc + 10 gap = 50 */
	background: transparent;
	color: var(--tp-blue);
	text-transform: capitalize; /* 1122:4548 textCase TITLE */
	/* Inside stroke as an inset shadow, not a border: a real 1px border would
	   add 2px to the 44px box and knock the disc off its 4px inset. */
	box-shadow: inset 0 0 0 1px var(--tp-blue);
	transition: background var(--tp-speed-fast) var(--tp-ease),
		color var(--tp-speed-fast) var(--tp-ease),
		box-shadow var(--tp-speed-fast) var(--tp-ease),
		padding var(--tp-speed-fast) var(--tp-ease);
}

.tp-btn--outline .tp-btn__icon {
	position: absolute;
	left: 4px;
	top: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	/* The disc is the SVG's own fill — 1122:4545 is a BOOLEAN_OPERATION set to
	   EXCLUDE, so the arrow is a hole and whatever sits behind the pill shows
	   through it. A CSS background circle here would fill that knockout in. */
	background: transparent;
	color: var(--tp-blue);
	transition: left var(--tp-speed-fast) var(--tp-ease),
		color var(--tp-speed-fast) var(--tp-ease);
}

.tp-btn--outline .tp-btn__icon svg {
	display: block;
}

.tp-btn--outline:hover,
.tp-btn--outline:focus-visible {
	padding: 4px 50px 4px 16px;
	background: var(--tp-blue);
	box-shadow: inset 0 0 0 1px var(--tp-blue);
	color: var(--tp-white);
}

.tp-btn--outline:hover .tp-btn__icon,
.tp-btn--outline:focus-visible .tp-btn__icon {
	left: calc(100% - 40px); /* 36 disc + 4 inset */
	color: var(--tp-white);
}

/* The pill is a container: keep any visually-hidden hint out of the
   inherited capitalize. */
.tp-btn--outline .screen-reader-text {
	text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.tp-btn--outline,
	.tp-btn--outline .tp-btn__icon {
		transition: none;
	}
}

.tp-btn--link {
	color: var(--tp-blue);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
}

.tp-btn--link:hover {
	text-decoration: underline;
}

.tp-btn--arrow-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--tp-gray-300);
	color: var(--tp-black);
	transition: background var(--tp-speed-fast) var(--tp-ease), color var(--tp-speed-fast) var(--tp-ease), border-color var(--tp-speed-fast) var(--tp-ease);
}

.tp-btn--arrow-circle:hover {
	background: var(--tp-blue);
	border-color: var(--tp-blue);
	color: var(--tp-white);
}

.tp-btn--arrow-circle:disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* Responsive breakpoints reference (Figma frame = 1440):
   1440 desktop / 1024 small-desktop / 768 tablet / 425,375,320 mobile */
@media (max-width: 1024px) {
	.tp-section {
		padding: 48px 0;
	}
}

@media (max-width: 768px) {
	.tp-section {
		padding: 40px 0;
	}

	/* the surrounding section padding tightens here too, so the rule's own
	   margins come down with it rather than opening a gap. */
	.tp-divider {
		margin: 8px 0 12px;
	}

	.tp-section__head {
		flex-direction: column;
		gap: 16px;
		margin-bottom: 32px;
	}
}

/* Mobile section H2 — 35/47 across every section. The per-section headings
   (business-stats, solutions, testimonials, global offices) don't share this
   class, so each carries the same pair in its own 425px block; keep the six
   in step if this ever changes. */
@media (max-width: 425px) {
	.tp-section__title {
		font-size: 35px;
		line-height: 47px;
	}
}