/*
 * Industries we serve — "Different Industries, One Team That Gets It".
 *
 * Figma: node 1752:4020 (1240x1311) — a dark rounded panel holding a
 * two-column head, the tab strip, the per-industry panel (variant set
 * 1752:9392) and the "Let's Build What's Next" CTA banner (1752:4046).
 *
 * The panel sits on a dark navy gradient, so this file intentionally does
 * NOT reuse the light-theme .tp-section__head/__title classes from
 * base.css — every colour here is hand-set for the dark surface.
 *
 * Breakpoints reference (Figma frame = 1440):
 * 1440 desktop / 1024 small-desktop / 768 tablet / 425,375,320 mobile.
 */

/* Drives the tab wash. background-image is a discrete property, so a bare
   `transition: background` snaps the gradient in instead of fading it — a
   registered <number> interpolates, and the gradient re-resolves each frame
   off it. 0 = the inactive tab's hidden fill, 1 = the 8% blue of the active
   one (Figma 1752:9331). */
@property --tp-ind-wash {
	syntax: '<number>';
	inherits: false;
	initial-value: 0;
}

/* Figma 1752:4020 — 1240x1311, radius 24. Content inset: 64px sides,
   100px top (title 1752:4023 at y=100), 32px bottom (the CTA banner
   1752:4046 ends at y=1279).

   The fill is a single navy gradient (client-supplied reference, replacing
   Figma's two stacked fills — those put a near-black purple cast over the
   top ~10% of the panel). */
.tp2026-industries__panel {
	position: relative;
	overflow: hidden;
	border-radius: var(--tp-radius-lg);
	padding: 100px 64px 32px;
	background: linear-gradient(180deg, #0d1b33 0%, #112549 42%, #16305e 86%, #142c57 100%);
	color: var(--tp-white);
}

/* ---------------------------------------------------------------------
 * Head — Figma 1752:4023 (x=64, 454 wide) and 1752:4024 (x=620, 556 wide),
 * both starting at y=100. The gap between them is whatever is left.
 * --------------------------------------------------------------------- */

.tp2026-industries__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}

/* Figma 1752:4023 — 454x100, SemiBold 40/50, textCase=TITLE */
.tp2026-industries__title {
	font: 600 40px/50px var(--tp-font-heading);
	text-transform: capitalize;
	max-width: 454px;
	margin: 0;
	color: var(--tp-white);
}

/* Figma 1752:4024 — 556 wide: copy, then the pill at y=80 */
.tp2026-industries__head-aside {
	flex: 0 1 556px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

/* Figma 1752:4025 — Regular 16/24, white */
.tp2026-industries__desc {
	font: var(--tp-body);
	color: var(--tp-white);
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Shared icon pill — Figma component set 1655:16521 "Know More" (157x44,
 * instanced at 1752:4026) and 1974:1787 "Get in Touch" (165x44, instanced
 * at 1974:1801). Same geometry as .tp-btn--white in base.css: the 36px
 * disc slides from a 4px left inset to a 4px right inset while the label
 * slides the other way (ON_HOVER → CHANGE_TO, SMART_ANIMATE).
 *
 * Both default variants are a transparent face with a 1px white inside
 * stroke, radius 59, padding 4/16 and a 10px gap — Bold 16/24 white label.
 *
 * The two pills invert to DIFFERENT faces on hover, so the inversion is
 * split off from the geometry below:
 *   Know More    1655:16522 → 1655:16527 — #1977f3 face, white label, white disc
 *   Get in Touch 1974:1787  → 1974:1788  — white face, blue label, blue disc
 *
 * The disc itself is a boolean Exclude in Figma (see the arrow markup in
 * industries.php): the arrow is a hole through a solid disc, so it takes
 * the colour of whatever is behind the pill — the panel gradient at rest,
 * the inverted face on hover. Nothing here paints the arrow directly.
 * --------------------------------------------------------------------- */

.tp2026-industries__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	height: 44px;
	/* Figma insets are 4 / 16 measured from the OUTER edge, because its 1px
	   stroke is drawn inside the box; a CSS border sits outside the padding
	   box, so every inset here is authored 1px short. Left: 3 + 36 disc + 10
	   gap = 49, which puts the label at x=50 like the design. */
	padding: 3px 15px 3px 49px;
	border: 1px solid var(--tp-white);
	border-radius: var(--tp-radius-pill);
	/* The banner CTA is a <button> (FR-036 opens the popup form rather than
	   navigating), so the UA's grey face and inherited-font gaps are reset
	   here to keep it identical to the anchor-based "Know More" pill. */
	background: transparent;
	cursor: pointer;
	color: var(--tp-white);
	/* Figma 1544:3888 — Bold 16/24, textCase=TITLE */
	font: var(--tp-btn);
	text-transform: capitalize;
	text-decoration: none;
	white-space: nowrap;
	transition: padding var(--tp-speed-spring) var(--tp-ease-spring), background var(--tp-speed-fast) var(--tp-ease), border-color var(--tp-speed-fast) var(--tp-ease), color var(--tp-speed-fast) var(--tp-ease);
}

/* The disc is the shape's own fill, not a CSS circle behind a glyph — see
   the Exclude note above — so there is no background or border-radius here. */
.tp2026-industries__cta-icon {
	position: absolute;
	left: 3px; /* 3 + the 1px border = the design's 4px inset */
	top: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--tp-white);
	transition: left var(--tp-speed-spring) var(--tp-ease-spring), color var(--tp-speed-fast) var(--tp-ease);
}

.tp2026-industries__cta-icon svg {
	display: block;
}

/* Geometry — identical for both pills. */
.tp2026-industries__cta:hover,
.tp2026-industries__cta:focus-visible {
	padding: 3px 49px 3px 15px;
}

.tp2026-industries__cta:hover .tp2026-industries__cta-icon,
.tp2026-industries__cta:focus-visible .tp2026-industries__cta-icon {
	left: calc(100% - 39px); /* 36 disc + 3 inset (+1px border = 4) */
}

/* Know More — 1655:16527. The variant drops the stroke; the border here is
   recoloured to the face instead of removed so the 157x44 box never reflows
   mid-animation. Label and disc stay white, and the arrow hole picks up the
   blue face on its own. */
.tp2026-industries__cta:not(.tp2026-industries__cta--banner):hover,
.tp2026-industries__cta:not(.tp2026-industries__cta--banner):focus-visible {
	background: var(--tp-blue);
	border-color: var(--tp-blue);
	color: var(--tp-white);
}

/* Get in Touch — 1974:1788: white face, blue label, blue disc. Label 1974:1783
   and disc 1974:1784 are the SAME blue, #1977f3 — the hover is one flat colour
   on a white face, not the darker navy the rest of the banner uses. */
.tp2026-industries__cta--banner:hover,
.tp2026-industries__cta--banner:focus-visible {
	background: var(--tp-white);
	color: var(--tp-blue);
}

.tp2026-industries__cta--banner:hover .tp2026-industries__cta-icon,
.tp2026-industries__cta--banner:focus-visible .tp2026-industries__cta-icon {
	color: var(--tp-blue);
}

/* ---------------------------------------------------------------------
 * Tab strip — Figma 1752:9330. 72px tall, 7px apart. The rule 1752:4022
 * closes the strip at y=338, exactly where the tabs bottom out.
 * --------------------------------------------------------------------- */

.tp2026-industries__tabs {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 42px; /* head bottoms out at y=224, tabs start at y=266 */
	/* Line 534 (1752:4022) is a 2px solid white stroke, not a 1px hairline at
	   20% — the exported SVG is `stroke="white" stroke-width="2"` on a node at
	   full opacity. Painted as a background rather than a border so the active
	   tab's 3px #1977f3 rule covers it instead of stacking 3px blue + 2px white
	   on top of each other; the ≤1024 strip already does it this way. */
	background-image: linear-gradient(to top, var(--tp-white) 0 2px, rgba(0, 0, 0, 0) 2px);
}

/* Figma 1752:9336 — Regular 20, rgba(255,255,255,0.9), textCase=TITLE */
.tp2026-industries__tab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	padding: 0 22px;
	border: 0;
	border-bottom: 3px solid transparent;
	/* One gradient for both states, faded by --tp-ind-wash. Figma authors it
	   the same way: the inactive frame 1752:9335 keeps the identical fill and
	   only marks it visible:false, so the wash fades across the 300ms rather
	   than appearing the instant the tab is picked. */
	--tp-ind-wash: 0;
	background: linear-gradient(180deg, rgba(0, 110, 255, 0) 0%, rgb(0 110 255 / calc(var(--tp-ind-wash) * 0.08)) 100%);
	color: rgba(255, 255, 255, 0.9);
	font: 400 20px/1 var(--tp-font-body);
	text-transform: capitalize;
	white-space: nowrap;
	cursor: pointer;
	box-sizing: border-box;
	/* Every tab in 1752:9392 carries ON_CLICK → CHANGE_TO <variant> with
	   SMART_ANIMATE / EASE_OUT / 300ms, and Smart Animate matches the tab
	   frames and their labels by name across the six variants — so the size,
	   weight, colour, wash and underline all tween rather than snap.
	   --tp-speed-fast (0.3s) + --tp-ease (cubic-bezier(0,0,.58,1)) already IS
	   that curve. font-size and font-weight were the two missing properties;
	   without them the label jumped 20→24 in one frame and shoved every tab to
	   its right sideways. Plus Jakarta Sans is self-hosted as a variable font
	   (wght 200–800, tokens.css), so the weight really does interpolate
	   instead of snapping at the halfway point. The tab's width follows the
	   label, which is how Figma gets 126px → 144px on the Telecom tab. */
	transition: font-size var(--tp-speed-fast) var(--tp-ease), font-weight var(--tp-speed-fast) var(--tp-ease), color var(--tp-speed-fast) var(--tp-ease), --tp-ind-wash var(--tp-speed-fast) var(--tp-ease), border-color var(--tp-speed-fast) var(--tp-ease);
}

/* No :hover styling. The component set 1752:9392 carries a single variant
   property ("Property 1" = the six industries) with no Hover/State value, and
   the only ON_HOVER reactions in the node are on the casestudy cards below the
   strip — so an inactive tab is authored to look identical whether or not the
   pointer is over it. The blue wash that used to live here was invented.
   Keyboard focus still gets a ring; that's an a11y requirement, not a look. */

.tp2026-industries__tab:focus-visible {
	outline: 2px solid var(--tp-blue);
	outline-offset: -2px;
}

/* Figma 1752:9331 — Bold 24 white, 3px #1977f3 underline, faint blue wash */
.tp2026-industries__tab.is-active {
	--tp-ind-wash: 1;
	color: var(--tp-white);
	font: 700 24px/1 var(--tp-font-body);
	border-bottom-color: #1977f3;
}

/* ---------------------------------------------------------------------
 * Panels — Figma 1752:9345, 32px below the rule, 24px between the hero
 * card and the case row.
 * --------------------------------------------------------------------- */

.tp2026-industries__panels {
	margin-top: 32px;
}

.tp2026-industries__panel-content[hidden] {
	display: none;
}

/* Figma 1752:9346 — 279 tall, 1px hairline, radius 12, padded 10 all round
   except 31 on the right; the gradient runs at 173.563deg. */
.tp2026-industries__feature {
	display: flex;
	align-items: center;
	gap: 24px;
	/* The enlarged card is a link to the case study itself (CTA table: "any
	   of 4" leads to the full case study, new tab). */
	text-decoration: none;
	color: inherit;
	transition: border-color var(--tp-speed-fast) var(--tp-ease);
	height: 279px;
	padding: 10px 31px 10px 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	background-image: linear-gradient(173.563deg, rgba(255, 255, 255, 0.15) 15.519%, rgba(255, 255, 255, 0) 106.36%, rgba(255, 255, 255, 0.15) 146.98%);
	box-sizing: border-box;
}

/* Figma 1752:9348 — 415x259, radius 12, clipped */
.tp2026-industries__feature-media {
	position: relative;
	flex: 0 0 415px;
	width: 415px;
	height: 259px;
	border-radius: 12px;
	overflow: hidden;
}

/* The per-industry photograph. Figma frames each one differently in this
   box, so the crop rides in on --ind-size / --ind-pos (set inline in PHP)
   rather than being hard-coded here. */
.tp2026-industries__feature-photo {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: var(--ind-size, cover);
	background-position: var(--ind-pos, center);
}

/* Figma 1244:42991 — a mix-blend-multiply scrim over the photo, plus the
   shared hexagon plate (1244:43000) laid in at left 4 / top -78 at
   584x307, i.e. 140.72% x 118.53% of the 415x259 box. */
.tp2026-industries__feature-media::before,
.tp2026-industries__feature-media::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.tp2026-industries__feature-media::before {
	background-image: linear-gradient(162.759deg, rgba(0, 0, 0, 0) 82.105%, rgba(0, 0, 0, 0.54) 92.55%, rgba(0, 0, 0, 0.54) 101.42%);
	mix-blend-mode: multiply;
}

.tp2026-industries__feature-media::after {
	background-image: url('../images/industries/hero-overlay.png');
	background-repeat: no-repeat;
	background-size: 140.72% 118.53%;
	background-position: -2.37% 162.5%; /* left 4px over (415-584), top -78px over (259-307) */
}

/* Figma 1752:9349 — 632 wide, 16px gap */
.tp2026-industries__feature-copy {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Figma 1752:9350 — SemiBold 28/38, white, textCase=TITLE.
   Figma's placeholder title was one line; real case study titles run to three
   or four, so the card's fixed 279px height needs the copy clamped rather
   than left to spill past the border. */
.tp2026-industries__feature-title {
	font: 600 28px/38px var(--tp-font-heading);
	text-transform: capitalize;
	color: var(--tp-white);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Figma 1752:9351 — Regular 16/24, white at 80%. Five lines is what is left
   of the 259px column once a two-line title and the 16px gap are taken. */
.tp2026-industries__feature-desc {
	font: var(--tp-body);
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow: hidden;
}

/* ---------------------------------------------------------------------
 * Case-study cards — Figma 1752:9353/9354/9355. 355x312, 24px apart.
 * Figma positions the parts absolutely; the equivalent flow layout is:
 *   photo   6 from the top, 7 left / 6 right, 162 tall, radius 11
 *   badge   left 19, top 131 (i.e. 12 / 125 inside the photo)
 *   text    block centred on y=238 -> 16px below the photo at two lines
 * --------------------------------------------------------------------- */

.tp2026-industries__cases {
	display: flex;
	gap: 24px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.tp2026-industries__case {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: 312px;
	padding: 6px 6px 0 7px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	box-sizing: border-box;
	overflow: hidden;
	transition: border-color var(--tp-speed-fast) var(--tp-ease), background var(--tp-speed-fast) var(--tp-ease);
}

.tp2026-industries__case:hover {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.04);
}

.tp2026-industries__case-media {
	position: relative;
	display: block;
	height: 162px;
	border-radius: 11px;
	background-repeat: no-repeat;
	background-size: var(--ind-size, cover);
	background-position: var(--ind-pos, center);
	overflow: hidden;
}

/* Figma 1244:42959 — 10/12.6 Bold white on a #8b65f9 chip at 80%. Same
   component the mobile feature-tag instances (which composite the 80% over
   white and so hard-code #a284fa); here it sits over the photo, so the
   alpha is kept. No stroke and no effects on the component. */
.tp2026-industries__case-tag {
	position: absolute;
	left: 11px;   /* 19 from the card edge, less the 8px card padding+border */
	top: 124px;   /* 131 from the card edge, less the 7px card padding+border */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 10px;
	border-radius: 4px;
	background: rgba(139, 101, 249, 0.8);
	color: var(--tp-white);
	font: 700 10px/12.6px var(--tp-font-body);
	text-transform: capitalize;
	white-space: nowrap;
}

.tp2026-industries__case-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 16px 10px 0 9px; /* lands the block 16px inside both card edges */
}

/* Figma 1238:42879 — Medium 20/24, white, textCase=TITLE, capped at 287.
   Clamped for the same reason as the enlarged card: the card is a fixed
   312px, and real titles are long enough to push the excerpt out of it. */
.tp2026-industries__case-title {
	font: 500 20px/24px var(--tp-font-heading);
	text-transform: capitalize;
	color: var(--tp-white);
	max-width: 287px;
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	/* 2 title lines + 12px gap + 2 excerpt lines sits inside the 312px card
	   once the 162px photo, its 6px inset and the 16px gap are accounted for. */
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Figma 1238:42880 — Regular 16/24, white at 60% */
.tp2026-industries__case-excerpt {
	font: var(--tp-body);
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* ---------------------------------------------------------------------
 * Carousel controls — FR-032/FR-033.
 *
 * A standard card does two things: its face promotes the card to the
 * enlarged slot (FR-033), and its title links out to the case study (CTA
 * table). Those are two separate controls stacked on one card rather than
 * a link nested inside a button, so both stay keyboard-reachable and the
 * promote target keeps the whole card's hit area.
 * --------------------------------------------------------------------- */

.tp2026-industries__feature:hover,
.tp2026-industries__feature:focus-visible {
	border-color: rgba(255, 255, 255, 0.28);
}

/* The enlarged card is one big link but reads as a panel, so nothing signals
   that. Underlining its title on hover/focus gives the same affordance the
   small cards' titles already have. */
.tp2026-industries__feature:hover .tp2026-industries__feature-title,
.tp2026-industries__feature:focus-visible .tp2026-industries__feature-title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.tp2026-industries__case-promote {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	cursor: pointer;
	/* Label lives in a .screen-reader-text child, so there is nothing to
	   show; the card underneath is the visible affordance. */
	appearance: none;
}

.tp2026-industries__case-promote:focus-visible {
	outline: 2px solid var(--tp-white);
	outline-offset: -3px;
}

/* Above the promote overlay so the title stays clickable in its own right. */
.tp2026-industries__case-link {
	position: relative;
	z-index: 2;
	color: inherit;
	text-decoration: none;
}

/* 2px, not the 4px used on the enlarged card: the title is clamped to two
   lines inside an overflow:hidden box only 24px per line, so a deeper offset
   puts the second line's rule outside the clip and it vanishes. */
.tp2026-industries__case-link:hover,
.tp2026-industries__case-link:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* Figure 6 — four progress dots over the enlarged card's photograph, one per
   case study in the sequence, marking which one is currently enlarged. */
.tp2026-industries__dots {
	position: absolute;
	left: 20px;
	bottom: 16px;
	z-index: 1;
	display: flex;
	gap: 6px;
}

.tp2026-industries__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	transition: background var(--tp-speed-fast) var(--tp-ease), width var(--tp-speed-fast) var(--tp-ease);
}

.tp2026-industries__dot.is-active {
	width: 18px;
	border-radius: var(--tp-radius-pill);
	background: var(--tp-white);
}

/* Both mobile-only — the rail that sits under the card and the "Casestudy"
   chip on the enlarged card. See the 768 block for their geometry. */
.tp2026-industries__dots--under,
.tp2026-industries__feature-tag {
	display: none;
}

/* ---------------------------------------------------------------------
 * CTA banner — Figma 1752:4046. 1176x274 (the panel's 64px inset drops to
 * 32 here, hence the negative margins), #153a8f, radius 24, with two
 * blurred #1853da ellipses and two rotated texture plates at 22%.
 * --------------------------------------------------------------------- */

.tp2026-industries__banner {
	position: relative;
	overflow: hidden;
	height: 274px;
	margin: 20px -32px 0; /* Main section bottoms out at y=985, banner at y=1005 */
	border-radius: var(--tp-radius-lg);
	background: #153a8f;
	isolation: isolate;
}

/* Figma 1752:4047 / 1752:4052 — ellipses under a ~60px layer blur. */
.tp2026-industries__banner-glow {
	position: absolute;
	border-radius: 50%;
	background: #1853da;
	filter: blur(30px);
	pointer-events: none;
	z-index: 0;
}

.tp2026-industries__banner-glow--top {
	left: 684px;
	top: -220px;
	width: 795px;
	height: 300px;
}

.tp2026-industries__banner-glow--bottom {
	left: -517px;
	top: 199px;
	width: 1343px;
	height: 506px;
}

/* Figma 1752:4053 / 1752:4054 — the same 376x212 plate twice, rotated
   about its own centre. Figma gives the wrapper box, so the centres are
   (1070.15, 109.62) and (100.46, 178.81). */
.tp2026-industries__banner-plate {
	position: absolute;
	width: 376px;
	height: 212px;
	margin: -106px 0 0 -188px;
	background-image: url('../images/industries/banner-texture.png');
	background-size: cover;
	background-position: center;
	opacity: 0.22;
	pointer-events: none;
	z-index: 0;
}

.tp2026-industries__banner-plate--right {
	left: 1070.15px;
	top: 109.62px;
	transform: rotate(44.74deg);
}

.tp2026-industries__banner-plate--left {
	left: 100.46px;
	top: 178.81px;
	transform: rotate(-147.27deg);
}

/* Figma 1752:4049 — copy block at left 78, top 75, 12px gap */
.tp2026-industries__banner-copy {
	position: absolute;
	left: 78px;
	top: 75px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 1;
}

/* Mobile-only line break (Figma 2272:4098); desktop keeps the title on one
   nowrap line, so the <br> is taken out of flow entirely. */
.tp2026-industries__banner-break {
	display: none;
}

/* Figma 1752:4050 — SemiBold 40/58, textCase=TITLE */
.tp2026-industries__banner-title {
	font: 600 40px/58px var(--tp-font-heading);
	text-transform: capitalize;
	color: var(--tp-white);
	white-space: nowrap;
	margin: 0;
}

/* Figma 1752:4051 — Regular 16/24, 531 wide */
.tp2026-industries__banner-desc {
	font: var(--tp-body);
	color: var(--tp-white);
	max-width: 531px;
	margin: 0;
}

/* Figma 1974:1801 — 165x44 at left 933, top 115 */
.tp2026-industries__cta--banner {
	position: absolute;
	left: 933px;
	top: 115px;
	z-index: 1;
}

/* ---------------------------------------------------------------------
 * Responsive. The Figma panel is a fixed 1240 canvas; below 1024 the
 * fixed card sizes and the banner's absolute positions have to give.
 * --------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.tp2026-industries__panel {
		padding: 64px 40px 24px;
	}

	.tp2026-industries__head {
		flex-direction: column;
		gap: 24px;
	}

	.tp2026-industries__head-aside {
		flex-basis: auto;
		gap: 24px;
	}

	.tp2026-industries__tabs {
		margin-top: 32px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent 100%);
		mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent 100%);
	}

	.tp2026-industries__tabs::-webkit-scrollbar {
		display: none;
	}

	.tp2026-industries__feature {
		flex-direction: column;
		align-items: stretch;
		height: auto;
		padding: 10px 10px 24px;
	}

	.tp2026-industries__feature-media {
		flex: 0 0 auto;
		width: 100%;
		height: 240px;
	}

	/* The per-industry crops are tuned to the 415x259 box; on a wider,
	   shorter card fall back to cover. */
	.tp2026-industries__feature-photo {
		background-size: cover;
		background-position: center;
	}

	.tp2026-industries__feature-copy {
		padding: 0 14px;
	}

	.tp2026-industries__cases {
		flex-wrap: wrap;
	}

	.tp2026-industries__case {
		flex: 1 1 calc(50% - 12px);
	}

	/* The banner's Figma coordinates assume a 1176px box — reflow instead. */
	.tp2026-industries__banner {
		height: auto;
		margin: 24px -16px 0;
		padding: 48px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}

	.tp2026-industries__banner-copy {
		position: static;
	}

	/* Must stay positioned — the 36px disc inside is absolute, and would
	   otherwise anchor itself to the banner instead of to the pill. */
	.tp2026-industries__cta--banner {
		position: relative;
		left: auto;
		top: auto;
	}

	.tp2026-industries__banner-title {
		white-space: normal;
	}

	.tp2026-industries__banner-plate--right {
		left: 92%;
		top: 40%;
	}

	.tp2026-industries__banner-plate--left {
		left: 8%;
		top: 60%;
	}
}

/* ---------------------------------------------------------------------
 * Mobile — Figma 2486:9927 on the 360 frame. This is a different
 * composition, not the desktop panel narrowed:
 *
 *   panel      0,2938   360x882  radius 20, full-bleed, 30 top / 20 bottom
 *   title     20,2968   320x68   28/34 SemiBold white
 *   desc      20,3052   320x36   12/18 white 80%
 *   Know More 20,3108   320x44   outlined white, full width, no icon disc
 *   tab strip  0,3176   360x38   #0b1c3d, 2px white rule, scrolls
 *   card      20,3234   320x240  radius 12, 1px white 10%
 *     photo   32,3246   296x134  radius 11
 *     chip    44,3347    69x21   radius 4, #a284fa
 *     title   32,3392   296x24   14/24 SemiBold
 *     desc    32,3424   296x36   12/18 white 80%
 *   dot rail 146,3486    68x12
 *   banner    20,3522   320x278  radius 20, #153a8f
 *
 * The three standard case cards are gone: mobile shows the enlarged card
 * alone, so the four case studies read one at a time through the same
 * FR-032 rotation and the dot rail moves out from over the photograph to
 * under the card.
 * --------------------------------------------------------------------- */

@media (max-width: 768px) {
	/* Figma runs the panel edge to edge, so it breaks out of the container's
	   20px gutter and the inner blocks carry their own inset instead — which
	   is also what lets the tab strip span the full 360. Fill: the topmost of
	   the panel's three stacked fills is opaque and its two dark stops sit
	   above the box (handles run -98.9%..100%), so the visible ramp is the
	   tail of the third stop only. */
	/* The panel bottoms out at y3820 and "Our Solutions" is at y3884; that
	   section supplies 40 of the 64px gap, as awards/AI do above. */
	.tp2026-industries {
		padding-bottom: 24px;
	}

	.tp2026-industries__panel {
		margin-inline: -20px;
		padding: 30px 0 20px;
		border-radius: 20px;
		background: linear-gradient(180deg, #091835 0%, #122c5b 100%);
	}

	.tp2026-industries__head {
		margin-inline: 20px;
		gap: 16px;
	}

	.tp2026-industries__title {
		font-size: 28px;
		line-height: 34px;
		max-width: none;
	}

	.tp2026-industries__head-aside {
		flex-basis: auto;
		align-self: stretch;
		gap: 20px;
	}

	.tp2026-industries__desc {
		font-size: 12px;
		line-height: 18px;
		color: rgba(255, 255, 255, 0.8);
	}

	/* Figma 2263:3990 / 2276:4117 — both pills lose the disc and stretch to
	   the column: 44px tall, 1px white, radius 59, label centred. With no
	   disc there is nothing for the hover to slide, so the padding swap goes
	   with it and only the fill inverts. */
	.tp2026-industries__cta,
	.tp2026-industries__cta--banner {
		display: flex;
		width: 100%;
		justify-content: center;
		padding: 10px 16px;
		border-radius: 59px;
	}

	.tp2026-industries__cta:hover,
	.tp2026-industries__cta:focus-visible {
		padding: 10px 16px;
	}

	.tp2026-industries__cta-icon {
		display: none;
	}

	/* Figma 2438:5091 "Sticky menu" — a full-bleed #0b1c3d strip under a 2px
	   white rule; the active tab replaces that rule with #1977f3 under
	   itself. The 1024 rule's right-edge mask is dropped: the strip now runs
	   to the viewport edge, so a fade would eat the white rule too. */
	/* The strip's own 2px white rule is painted as a background rather than as
	   a border: the strip is an overflow-x scroller, which clips its children
	   to the padding box, so a real border would sit outside the clip and the
	   active tab's blue rule could never cover it. */
	.tp2026-industries__tabs {
		margin-top: 24px;
		gap: 12px;
		height: 38px;
		background-color: #0b1c3d;
		background-image: linear-gradient(to top, var(--tp-white) 0 2px, rgba(0, 0, 0, 0) 2px);
		border-bottom: 0;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* Figma 2438:5093 — 38px frame, 10px padding, 26px line box, so the label
	   starts 6px down rather than centred on the 36px above the rule. */
	.tp2026-industries__tab {
		height: 38px;
		align-items: flex-start;
		padding: 6px 10px 0;
		color: var(--tp-white); /* Figma drops the 90% on the inactive labels */
		font: 400 14px/26px var(--tp-font-body);
		border-bottom: 2px solid transparent;
		background: none;
	}

	.tp2026-industries__tab.is-active {
		font: 700 18px/26px var(--tp-font-body);
		border-bottom-color: var(--tp-blue);
		background: none;
	}

	/* Figma 2486:6404 "Case mob" — 320x240, 12px padding all round, the photo
	   on top and the copy beneath. No gradient face here, only the hairline. */
	.tp2026-industries__panels {
		margin: 20px 20px 0;
	}

	/* Figma's 1px stroke is drawn inside the frame, so the 12px padding it
	   reports is 12px from the outer edge — a CSS border eats 1 of those. */
	.tp2026-industries__feature {
		flex-direction: column;
		align-items: stretch;
		height: 240px;
		gap: 12px;
		padding: 11px;
		background-image: none;
	}

	.tp2026-industries__feature-media {
		flex: 0 0 auto;
		width: 100%;
		height: 134px;
		border-radius: 11px;
		/* The chip has to reach 101px down a 134px photo, and the rail below
		   the card replaces the one that used to sit inside this box. */
		overflow: visible;
	}

	.tp2026-industries__feature-photo {
		border-radius: 11px;
	}

	/* Figma's mobile photo is a plain image fill — the desktop multiply scrim
	   and its vignette are not on this card. */
	.tp2026-industries__feature-media::before,
	.tp2026-industries__feature-media::after {
		display: none;
	}

	/* Figma 2486:6463 — 10/12.6 Bold on a #8b65f9 chip at 80% over white,
	   which composites to an opaque #a284fa; the background blur behind it
	   therefore never shows, so it is dropped rather than reproduced. */
	.tp2026-industries__feature-tag {
		position: absolute;
		left: 12px;
		top: 101px;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 4px 8px;
		border-radius: 4px;
		background: #a284fa;
		color: var(--tp-white);
		font: 700 10px/12.6px var(--tp-font-body);
		text-transform: capitalize;
		white-space: nowrap;
	}

	.tp2026-industries__feature-copy {
		gap: 8px;
		padding: 0; /* the 1024 rule's 14px side inset is a two-column artefact */
	}

	/* One line each way is what the 240px card leaves, and it is what Figma
	   draws — both strings there are hand-truncated ("…DCIM Tools",
	   "…data center......"). */
	.tp2026-industries__feature-title {
		font: 600 14px/24px var(--tp-font-heading);
		-webkit-line-clamp: 1;
		line-clamp: 1;
	}

	.tp2026-industries__feature-desc {
		font-size: 12px;
		line-height: 18px;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	/* The three standard cards are not in the mobile frame at all — the four
	   case studies rotate through the one card instead. */
	.tp2026-industries__cases {
		display: none;
	}

	.tp2026-industries__dots {
		display: none;
	}

	/* Figma 2486:6347 — 68x12 rail, 12px under the card. The four dots fill
	   only 54px of that 68px box (it is the five-dot frame from the AI card
	   reused), so they sit slightly left of the card's centre exactly as
	   drawn rather than being re-centred. */
	.tp2026-industries__dots--under {
		position: static; /* the shared rule pins the desktop rail over the photo */
		display: flex;
		align-items: center;
		gap: 6px;
		width: 68px;
		margin: 12px auto 0;
	}

	.tp2026-industries__dot {
		width: 8px;
		height: 8px;
		background: rgba(217, 217, 217, 0.6);
	}

	.tp2026-industries__dot.is-active {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: var(--tp-blue);
	}

	/* Figma 2276:4121 — 320x278, radius 20, 40px top/bottom and 20px sides,
	   copy stacked over a full-width pill. */
	.tp2026-industries__banner {
		display: block;
		height: 278px;
		margin: 24px 20px 0;
		padding: 40px 20px;
		border-radius: 20px;
		box-sizing: border-box;
	}

	.tp2026-industries__banner-break {
		display: inline;
	}

	/* Back into flow, but still positioned: the two texture plates behind it
	   are positioned with z-index 0, and a static copy block has no z-index
	   of its own to stay above them — the 22% dot pattern would otherwise
	   print straight over the headline. */
	.tp2026-industries__banner-copy {
		position: relative;
		left: auto;
		top: auto;
		gap: 12px;
	}

	.tp2026-industries__banner-title {
		font-size: 28px;
		line-height: 34px;
		white-space: normal;
	}

	.tp2026-industries__banner-desc {
		font-size: 12px;
		line-height: 18px;
		color: rgba(255, 255, 255, 0.8);
	}

	/* Relative, not static — same stacking reason as the copy block above,
	   and the pill's own 36px disc anchors to it. */
	.tp2026-industries__cta--banner {
		position: relative;
		left: auto;
		top: auto;
		margin-top: 20px;
	}

	/* Both glows and both plates are re-placed from the mobile node's own
	   transforms (2272:4095/4100/4101/4102). Figma reports the rotated
	   bounding box, so each is given its unrotated size, centred on the
	   centre of that box, then rotated — the 88.3 layer blur halves to a
	   44.15px CSS blur. */
	.tp2026-industries__banner-glow {
		filter: blur(44.15px);
	}

	.tp2026-industries__banner-glow--bottom {
		width: 605px;
		height: 495.24px;
		left: 41.96px;
		top: 528.2px;
		margin: -247.62px 0 0 -302.5px;
		transform: rotate(59.47deg);
	}

	.tp2026-industries__banner-glow--top {
		width: 927px;
		height: 842.7px;
		left: 522.6px;
		top: -94.7px;
		margin: -421.35px 0 0 -463.5px;
		transform: rotate(48.8deg);
	}

	.tp2026-industries__banner-plate--right {
		width: 251.74px;
		height: 141.6px;
		left: 269.1px;
		top: 241.85px;
		margin: -70.8px 0 0 -125.87px;
		transform: rotate(127.8deg);
	}

	.tp2026-industries__banner-plate--left {
		width: 221.85px;
		height: 124.79px;
		left: 60.59px;
		top: 17.93px;
		margin: -62.4px 0 0 -110.92px;
		transform: rotate(-39.55deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tp2026-industries__case,
	.tp2026-industries__cta,
	.tp2026-industries__cta-icon,
	.tp2026-industries__tab {
		transition: none;
	}
}