/*
 * Hero section — full-bleed looping background video
 * (assets/video/hero-bg.mp4) behind the headline, in place of the earlier
 * pure-CSS grid + speckle "starfield" texture. The navy gradient it used to
 * sit on is kept on .tp-hero__bg as the first-paint / fallback colour.
 *
 * Figma: background rect 1752:3948 (1440x600), content frame 1752:4014.
 * The site header is fixed/transparent at --tp-header-height (~118px) and
 * overlays the top of this section, so padding-top pushes the headline
 * down to line up with the Figma content y-position (218px) instead of
 * being hidden underneath the header.
 */

/* Height: Figma draws the panel 600px tall on the 1440 frame. Pixel-perfect to
   the design wins over the earlier "3/4 of the screen" reading, so this is a
   flat 600px at every desktop viewport height — no 75vh growth.

   The section stays a centring flex column: padding-top clears the fixed
   header, and padding-bottom 36px is the offset that reproduces Figma's 218px
   title-top exactly at 600px (600 - 118 header - 36 = 446 free, minus the
   246px content block = 200, halved = 100 → 118 + 100 = 218). */
.tp-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 600px;
	padding-top: var(--tp-header-height, 118px);
	padding-bottom: 36px;
	background: var(--tp-navy-900);
	color: var(--tp-white);
	text-align: center;
}

/* ----------------------------------------------------------------
 * Background: looping video, over a navy gradient fallback.
 * ---------------------------------------------------------------- */
.tp-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	/* Painted before the video decodes, and left showing if it never plays.
	   The grade in .tp-hero__scrim sits on top of this as well as on the video,
	   so this stands in for the *ungraded* clip, not for the finished look: a
	   deep navy field with the clip's broad glow low and centred. The previous
	   fallback put that glow top-left, where neither the clip nor the design
	   has one, so the first paint flashed a shape the hero never settles into. */
	background:
		radial-gradient(80% 68% at 50% 80%, rgba(0, 42, 190, 0.55) 0%, rgba(0, 42, 190, 0) 72%),
		linear-gradient(180deg, #00081f 0%, #000a2e 55%, #000617 100%);
}

/* object-fit: cover crops the render to the section box at any aspect ratio,
   the same way a background-size: cover image would.
 *
 * ORIENTATION — the clip is played rotated 180deg on purpose. Figma's image
 * fill on 1752:3948 carries imageTransform
 *
 *     [[-1, 0, 1], [0, -0.73686, 0.99568]]
 *
 * i.e. u_img = 1 - u and v_img = 0.99568 - 0.73686v: the source is mirrored on
 * BOTH axes before it is cropped. The raw asset (and our clip) has its one big
 * light source at top centre; the design flips it so the glow sits low and
 * centred, under the CTA, and the strip beneath the fixed header is the dark
 * end of the frame. Played straight, the hero was bright exactly where the
 * design is darkest, which no amount of grading on top could correct — the
 * scrim reads as "the grade is wrong at the top" but the frame itself was
 * upside down.
 *
 * object-position — solving v0 + f = 0.99568 for the cover window (f is the
 * visible fraction of source height, ~0.7407 for a 16:9 clip in the 1440x600
 * box) puts the window's origin at v0/(1-f) = 98.3%, not the 50% default.
 * Expressed as a percentage it stays correct at any box size. */
.tp-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 98.3%;
	transform: rotate(180deg);
	display: block;
	border: 0;
}

/* Colour grade + legibility scrim.
 *
 * This is a port of the exact fill stack Figma paints on the hero rectangle
 * (1752:3948), which had previously been stood in for by a flat "darken
 * everything" scrim. That stand-in was wrong in shape as well as amount: it
 * laid a full-height 30-60% wash of #060b1f over the clip, which crushed the
 * blue channel (mean B 80 -> 51 against the design's 63) and flattened the
 * bottom-centre glow the design leans on, so the hero read near-black where
 * the design reads deep saturated blue.
 *
 * Figma's grade is only two layers, and neither is a full-height wash:
 *
 *   1. a black elliptical vignette that darkens the MIDDLE of the box (not
 *      the edges) — which is also what gives the headline its contrast, so
 *      it doubles as the legibility scrim;
 *   2. a short #082240 ramp across the top of the box, composited with
 *      DIFFERENCE, which is what pulls the top strip under the fixed header
 *      down to near-black while leaving the lower half untouched.
 *
 * Both are expressed in percentages, so they track the hero box the same
 * way they track Figma's 600px artboard.
 */

/* Fill 3 — GRADIENT_RADIAL, layer opacity 0.51.
 * Figma handles: centre (0.5,0.5), radii 0.35712w x 0.35734h. Stops are pure
 * black at alpha 1 / 0.5240 / 0, which the layer opacity scales to
 * 0.51 / 0.2673 / 0. */
.tp-hero__scrim {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		35.712% 35.734% at 50% 50%,
		rgba(0, 0, 0, 0.51) 0%,
		rgba(0, 0, 0, 0.2673) 52.404%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* Fill 5 — GRADIENT_LINEAR, blendMode DIFFERENCE.
 * Figma's axis runs from the top of the box to 48.99% of its height, and the
 * ramp ends at 45.673% along that axis: 0.4899 x 0.45673 = 22.376% of the box.
 *
 * The three interior stops are not decoration. Figma lerps the stop colour
 * toward black as the alpha falls, whereas a CSS gradient interpolates in
 * PREMULTIPLIED alpha and so would hold #082240 at full strength the whole way
 * down — a difference worth up to ~16/255 in the top band. Sampling the true
 * ramp at each quarter (colour x (1-t), alpha 1-t) brings that back under 1.
 *
 * The blend resolves inside .tp-hero__bg, which is a stacking context, so it
 * sees the video and the vignette above and nothing else — the headline lives
 * outside that box and is not affected. */
.tp-hero__scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	mix-blend-mode: difference;
	background: linear-gradient(
		180deg,
		rgb(8, 34, 63) 0%,
		rgba(6, 25, 47, 0.75) 5.594%,
		rgba(4, 17, 31, 0.5) 11.188%,
		rgba(2, 8, 16, 0.25) 16.782%,
		rgba(0, 0, 0, 0) 22.376%
	);
}

/* Users who ask for less motion get the static navy gradient instead of a
   continuously moving background. */
@media (prefers-reduced-motion: reduce) {
	.tp-hero__video {
		display: none;
	}
}

/* ----------------------------------------------------------------
 * Content
 * ---------------------------------------------------------------- */
.tp-hero__container {
	position: relative;
	z-index: 1;
}

.tp-hero__content {
	max-width: 837px;
	margin: 0 auto;
}

/* Figma 1752:4016 — Plus Jakarta Sans Medium 72/82, white, centred.
   textCase=TITLE, hence the capitalize (see .tp-hero__subtitle note).

   Flat 72/82 from --tp-h1, no fluid scaling: `clamp(32px, 5vw, 72px)` only hit
   the design size at exactly 1440 and shrank from the first pixel below it
   (1366 -> 68.3, 1280 -> 64, 1024 -> 51.2), so no normal laptop window ever
   rendered the headline the design asks for. The scaling now starts at the
   1024 breakpoint instead, where the desktop frame stops being the reference
   (see the tablet block below). "Engineering Intelligence" measures 836px at
   72px against the 837px content box, i.e. it stays on one line exactly as
   Figma draws it. */
.tp-hero__title {
	font: var(--tp-h1);
	color: var(--tp-white);
	text-transform: capitalize;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

/* Figma 1752:4016 mixes two runs: "Engineering " Medium 500, "Intelligence" Bold 700. */
.tp-hero__title-emphasis {
	font-weight: 700;
}

/* Figma 1752:4017 — Regular 24/34, white, max 545px, centred.
   Figma sets textCase=TITLE on this node and renders it title-cased, so the
   transform is reproduced here rather than baked into the copy string. */
.tp-hero__subtitle {
	margin-top: 20px;
	font: 400 24px/34px var(--tp-font-body);
	max-width: 545px;
	margin-inline: auto;
	color: var(--tp-white);
	text-transform: capitalize;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.tp-hero__cta {
	margin-top: 32px;
	display: flex;
	justify-content: center;
}

.tp-hero__btn {
	min-height: 44px;
}

/* No scale on hover: Figma 1006:72674 → 1006:72676 keeps the pill at 204x44 in
   both states — the only movement is the arrow disc swapping sides, which
   base.css handles for every .tp-btn--white. */

/* Responsive breakpoints reference (Figma frame = 1440):
   1440 desktop / 1024 small-desktop / 768 tablet / 425,375,320 mobile */
@media (max-width: 1024px) {
	/* The 600px/centred rule above is the 1440 desktop frame's box.
	   Below 1025 the heights come from the tablet ratios and the 360px mobile
	   artboard, which fix the headline to an absolute top offset — so the
	   panel goes back to a fixed height and top-anchored content here. */
	.tp-hero {
		justify-content: flex-start;
		padding-top: calc(var(--tp-header-height, 118px) + 72px);
		padding-bottom: 72px;
		min-height: 560px;
	}

	/* Figma has exactly two artboards for this headline: 1440 -> 72/82
	   (1752:4016) and 360 -> 40/48 (2221:2515). There is no tablet frame, so
	   rather than invent a slope this interpolates linearly between the two
	   supplied anchors: 7.11vw - 0.8px lands on 72px at 1025 and 40px at 575,
	   where the mobile block below takes over with its flat 40/48. */
	.tp-hero__title {
		font-size: clamp(40px, calc(7.11vw - 0.8px), 72px);
		line-height: 1.14;
	}

	.tp-hero__subtitle {
		margin-top: 18px;
	}
}

@media (max-width: 768px) {
	.tp-hero {
		padding-top: calc(var(--tp-header-height, 118px) + 48px);
		padding-bottom: 56px;
		min-height: 520px;
	}

	.tp-hero__content {
		max-width: 600px;
		padding: 0 8px;
	}

	.tp-hero__cta {
		margin-top: 28px;
	}
}

@media (max-width: 425px) {
	.tp-hero {
		padding-top: calc(var(--tp-header-height, 118px) + 32px);
		padding-bottom: 48px;
		min-height: 480px;
	}

	.tp-hero__subtitle {
		margin-top: 14px;
	}

	.tp-hero__cta {
		margin-top: 24px;
	}

	/* At 320-425px the base .tp-btn--white pill (44px tall, 36px icon disc,
	   16px label) reads oversized against the hero copy — it was stretching
	   to a 320px-wide bar. Shrink the pill itself rather than just its
	   wrapper so it sits as a normal-sized button, not a full-width strip.
	   Every value below is the Figma desktop pill scaled by 0.86 and rounded
	   to whole pixels, so the mobile button is the same design, not a
	   redrawn one: 44->38 tall, 36->30 disc, 4px inset kept (4 + 30 + 4 = 38,
	   so the disc still sits in an even ring like the 4/36/4 desktop pill),
	   10->8 gap, 16->14 right padding, 16/24->14/20 label. */
	.tp-hero__btn {
		width: auto;
		max-width: none;
		min-height: 38px;
		padding: 4px 14px 4px 42px; /* 4 icon inset + 30 icon + 8 gap = 42 */
		font-size: 14px;
		line-height: 20px;
	}

	.tp-hero__btn .tp-btn__icon {
		left: 4px;
		top: 4px;
		width: 30px;
		height: 30px;
	}

	/* The arrow is a fixed 16x16 SVG sized for the 36px desktop disc; left
	   alone it keeps its full size inside the smaller disc and reads chunky. */
	.tp-hero__btn .tp-btn__icon svg {
		width: 14px;
		height: 14px;
	}

	.tp-hero__btn:hover,
	.tp-hero__btn:focus-visible {
		padding: 4px 42px 4px 14px;
	}

	/* Base.css slides the icon to `calc(100% - 40px)` on hover, sized for the
	   36px desktop disc (36 + 4 inset). Ours is 30px, so it needs its own end
	   position or the disc overshoots past the pill edge. */
	.tp-hero__btn:hover .tp-btn__icon,
	.tp-hero__btn:focus-visible .tp-btn__icon {
		left: calc(100% - 34px); /* 30 icon + 4 inset */
	}
}

@media (max-width: 375px) {
	.tp-hero {
		min-height: 460px;
	}
}

@media (max-width: 320px) {
	.tp-hero {
		padding-top: calc(var(--tp-header-height, 118px) + 24px);
		min-height: 440px;
	}
}

/* ================================================================
 * Figma mobile frame 2215:1750 ("homepage thinkpalm mobile", 360px)
 * ----------------------------------------------------------------
 * Everything above was derived from the 1440 desktop frame and scaled
 * down by eye. The client has since supplied a dedicated 360px mobile
 * artboard, so the phone breakpoint is now driven by measured values
 * from that frame rather than by ratios off the desktop one.
 *
 * Node map (y positions are absolute inside the 360x10223 frame):
 *   2215:1795  hero panel      0 -> 544
 *   2221:2515  title          165 -> 261   Medium 500 + Bold 700, 40/48
 *   2221:2516  subtitle       273 -> 313   Regular 400, 18/20, 304 wide
 *   2221:2589  CTA pill       345 -> 389   204 x 44
 *   2221:2571  highlight card 470 -> 887   (overlaps the panel by 74px)
 *
 * Placed last in the file on purpose: it has to win over the 425/375/320
 * blocks above, which carry the older desktop-derived values.
 * ================================================================ */
@media (max-width: 575px) {
	/* 165 title top + 224 content + 155 = the 544px panel in the frame.
	   The header is fixed and transparent over this, so the top padding is
	   an absolute number rather than header-height + offset — the mobile
	   header measures 72px locally against 79px in the frame, and chaining
	   off it would carry that 7px error into the headline position. */
	.tp-hero {
		min-height: 544px;
		padding-top: 165px;
		padding-bottom: 155px;
	}

	/* 2221:2515 — the frame asks for a flat 40/48 with no fluid scaling. This
	   is also the bottom anchor of the tablet interpolation above, so the two
	   meet at 40px with no jump across the 575/576 boundary. */
	.tp-hero__title {
		font-size: 40px;
		line-height: 48px;
	}

	/* 2221:2516 — 24/34 was the desktop value carried down. The frame drops
	   it to 18/20 on a 304px measure (i.e. a 28px inset each side). */
	.tp-hero__subtitle {
		margin-top: 12px;
		font-size: 18px;
		line-height: 20px;
		max-width: 304px;
	}

	.tp-hero__cta {
		margin-top: 32px;
	}

	/* Undo the 0.86x pill shrink from the 425px block above: the mobile
	   frame draws the CTA at the full desktop size (204x44 pill, 36px disc,
	   16/24 label), so the scaled-down variant is no longer the design. */
	.tp-hero__btn {
		min-height: 44px;
		padding: 4px 16px 4px 50px; /* 4 inset + 36 disc + 10 gap */
		font-size: 16px;
		line-height: 24px;
	}

	.tp-hero__btn .tp-btn__icon {
		left: 4px;
		top: 4px;
		width: 36px;
		height: 36px;
	}

	.tp-hero__btn .tp-btn__icon svg {
		width: 16px;
		height: 16px;
	}

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

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