/*
 * "Our Global Offices" — country pill tablist (Singapore/India/USA/Japan/UK)
 * switching between a hero photo and a bordered address card.
 * Figma ref: heading 1752:4212 + instance 1752:4213 "locations" (1112.5x476),
 * country variants 1307:5417, address card 1304:5174.
 */

.tp2026-global-offices__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	/* Heading bottom absY 8049 → panel top absY 8088. */
	margin-bottom: 40px;
}

.tp2026-global-offices__title {
	font: var(--tp-h2);
	/* 1752:4212 — SemiBold 40/100% #021b42, textCase=TITLE */
	color: var(--tp-heading);
	text-transform: capitalize;
	margin: 0;
}

/* 1307:5377 — horizontal, gap 16, right-aligned within the 1112 row. */
.tp2026-global-offices__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.tp2026-global-offices__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	/* 1307:5343 — 44px tall, pad 0 24, radius 59, 1px #e6f1ff */
	padding: 0 24px;
	border-radius: var(--tp-radius-pill);
	border: 1px solid #e6f1ff;
	background: var(--tp-white);
	color: var(--tp-gray-600);
	font: var(--tp-body);
	/* textCase=TITLE on the unselected pills — 1307:5342 Singapore,
	   1307:5344 USA, 1307:5346 Japan, 1307:5348 UK. */
	text-transform: capitalize;
	cursor: pointer;
	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);
}

.tp2026-global-offices__tab:hover {
	border-color: var(--tp-blue);
	color: var(--tp-blue);
}

/* Selected pill — fill #1977f3, white Bold label, no border. */
.tp2026-global-offices__tab.is-active {
	background: var(--tp-blue);
	border-color: var(--tp-blue);
	color: var(--tp-white);
	font-weight: 700;
	/* The selected pill (1307:5340 "India") is the one label in the switcher
	   with no textCase set, so the inherited capitalize is reset here. */
	text-transform: none;
}

/* Panels — 1307:5349 photo 366 + gap 24 + card 722, centre-aligned. */
.tp2026-global-offices__panel {
	display: flex;
	align-items: center;
	gap: 24px;
}

.tp2026-global-offices__panel[hidden] {
	display: none;
}

/*
 * Tab switch — 1307:5343 (USA), 1307:5345 (Japan), 1307:5341 (Singapore):
 * ON_CLICK SMART_ANIMATE 300ms OUT_CUBIC swapping the "locations" component
 * to that country's variant. section-global-offices.js already toggles
 * `hidden` + `.is-active` on the panels, so the incoming panel is animated
 * on class application — no JS change needed. Smart-animate morphs matching
 * layers; the CSS stand-in is a short fade + rise on the panel that appears.
 */
.tp2026-global-offices__panel.is-active {
	animation: tp2026-office-panel-in var(--tp-speed-fast) var(--tp-ease) both;
}

@keyframes tp2026-office-panel-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* 1304:5137 — 366x390, radius 21. */
.tp2026-global-offices__photo {
	position: relative;
	flex: 0 0 366px;
	width: 366px;
	height: 390px;
	border-radius: 21px;
	overflow: hidden;
}

.tp2026-global-offices__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * Hovering an office swaps this photo for that office's own building shot
 * (variants 1304:5175 / 5205 / 5237). All the layers are stacked in the same
 * box and cross-faded, so the swap never reflows the row.
 */
.tp2026-global-offices__photo-img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	/* Same 300ms OUT_CUBIC the country tabs smart-animate with. */
	transition: opacity var(--tp-speed-fast) var(--tp-ease);
}

.tp2026-global-offices__photo-img--hover.is-active {
	opacity: 1;
}

/* 1304:5136 — 722x390, radius 21, 1px #d4e7ff, 32px padding. */
.tp2026-global-offices__card {
	flex: 1 1 auto;
	min-width: 0;
	height: 390px;
	border: 1px solid #d4e7ff;
	border-radius: 21px;
	padding: 32px;
}

/*
 * 2147227085 — two columns of 325 / 301 with a 32px gutter and 24px between
 * rows. India fills all four cells (Cochin | map / Trivandrum | Chennai);
 * every other country has a single office beside a full-height map.
 */
.tp2026-global-offices__grid {
	display: grid;
	grid-template-columns: 325px 301px;
	column-gap: 32px;
	row-gap: 24px;
	align-items: start;
	height: 100%;
}

.tp2026-global-offices__grid--single {
	align-items: center;
}

/* 2147227079/84 — each block is inset 12px inside its grid cell. */
.tp2026-global-offices__office {
	padding: 12px;
}

/*
 * Hovered office — 1304:5183 (cochin) / 5217 (tvm) / 5252 (Variant4). Figma
 * draws the identical treatment in all three: 1px #bfecff, radius 12, over a
 * ~183.7deg wash from #effaff to #fff. The border is transparent rather than
 * absent in the rest state so nothing shifts by a pixel when it appears.
 */
.tp2026-global-offices__office--interactive {
	border: 1px solid transparent;
	border-radius: 12px;
	cursor: pointer;
	transition: border-color var(--tp-speed-fast) var(--tp-ease), background-color var(--tp-speed-fast) var(--tp-ease);
}

.tp2026-global-offices__office--interactive:hover,
.tp2026-global-offices__office--interactive:focus-visible,
.tp2026-global-offices__office--interactive.is-hovered {
	border-color: #bfecff;
	background: linear-gradient(183.7deg, #effaff 23.204%, #ffffff 102.13%);
	outline: none;
}

/* 1304:5141 / 5144 / 5147 — SemiBold 16/20.16 #000000, textCase=TITLE. */
.tp2026-global-offices__office-name {
	font: var(--tp-body);
	font-weight: 600;
	line-height: 20.16px;
	color: #000000;
	text-transform: capitalize;
	/* Figma stacks name over address with a 10px gap. */
	margin: 0 0 10px;
}

/* 1304:5142 / 5145 / 5148 — Regular 16/24 #595959, NO textCase. Street
   addresses and phone numbers must never be capitalize()d ("B-1, 1st Floor"
   → "B-1, 1st Floor" is fine, but the reset guards against any future
   container-level transform leaking in). */
.tp2026-global-offices__office-address {
	font: var(--tp-body);
	color: var(--tp-gray-700);
	text-transform: none;
	margin: 0;
}

/* Same text node as the address, but the trailing "Tel: …" run carries a
   SemiBold per-character override on the three Indian offices. The USA
   office has no override, hence the --regular modifier. */
.tp2026-global-offices__office-tel {
	font-weight: 600;
	color: var(--tp-gray-700);
}

.tp2026-global-offices__office-tel--regular {
	font-weight: 400;
}

/* 1304:5203 — map thumbnail, radius 16. The exported map PNGs are plain
   Google Maps screenshots with no marker baked in; the pins below are the
   `fi_854853` vector overlays Figma draws on top. */
.tp2026-global-offices__map {
	position: relative;
	width: 301px;
	height: 152px;
	border-radius: var(--tp-radius-md);
	overflow: hidden;
}

/* The per-office map printed above each address belongs to the phone layout
   only — desktop keeps the single wide map with its three markers. */
.tp2026-global-offices__office-map {
	display: none;
}

/* Single-office countries get the full-height 301x326 map. */
.tp2026-global-offices__map--tall {
	height: 326px;
	align-self: stretch;
}

.tp2026-global-offices__map-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Each hoverable office brings its own zoomed map, stacked over the wide one
   and cross-faded in step with the photo. */
.tp2026-global-offices__map-img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--tp-speed-fast) var(--tp-ease);
}

.tp2026-global-offices__map-img--hover.is-active {
	opacity: 1;
}

/* Positioned by the percentages recorded per country in the template; the
   pin.svg canvas carries its own drop shadow, so no extra styling here. */
.tp2026-global-offices__pin {
	position: absolute;
	height: auto;
	pointer-events: none;
}

/*
 * Marker set — the small pins of the country-wide view. They fade out with
 * the wide map beneath them as soon as an office is hovered.
 */
.tp2026-global-offices__pins {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tp-speed-fast) var(--tp-ease);
}

.tp2026-global-offices__pins.is-active {
	opacity: 1;
}

/*
 * The lead marker — the one Figma smart-animates. It belongs to no layer, so
 * while the maps cross-fade underneath it, it grows and travels to the
 * hovered office's coordinate: 14→40px over (17, -36) for Cochin
 * (kf_1304_5199-5201), 14→30px over (22, -31) for Trivandrum
 * (kf_1304_5229-5231) and 14→25px over (25, -28) for Chennai
 * (kf_1304_5261-5263). The nested `Vector` keyframes in each of those sets
 * are the same uniform scale applied to the two shapes inside the glyph,
 * which the SVG handles on its own — hence a single width, with the height
 * left to follow.
 *
 * Destinations arrive as custom properties on the map (the template writes
 * one trio per office); the JS only has to record which office is hovered in
 * `data-office-lead`.
 */
.tp2026-global-offices__pin--lead {
	left: var(--tp2026-lead-left);
	top: var(--tp2026-lead-top);
	width: var(--tp2026-lead-width);
	transition:
		left var(--tp-speed-fast) var(--tp-ease),
		top var(--tp-speed-fast) var(--tp-ease),
		width var(--tp-speed-fast) var(--tp-ease);
}

.tp2026-global-offices__map[data-office-lead="0"] .tp2026-global-offices__pin--lead {
	left: var(--tp2026-lead-0-left);
	top: var(--tp2026-lead-0-top);
	width: var(--tp2026-lead-0-width);
}

.tp2026-global-offices__map[data-office-lead="1"] .tp2026-global-offices__pin--lead {
	left: var(--tp2026-lead-1-left);
	top: var(--tp2026-lead-1-top);
	width: var(--tp2026-lead-1-width);
}

.tp2026-global-offices__map[data-office-lead="2"] .tp2026-global-offices__pin--lead {
	left: var(--tp2026-lead-2-left);
	top: var(--tp2026-lead-2-top);
	width: var(--tp2026-lead-2-width);
}

/*
 * Hover-to-hover restart — see `activate()` in section-global-offices.js.
 * Moving straight from one office to another has to rewind to the
 * country-wide rest state before the new office's move begins, and that
 * rewind must be instant: with the transitions still attached the browser
 * would simply retarget whatever was in flight, so the lead marker would
 * slide across from the previous office instead of setting off from the
 * neutral position the way it does when the pointer arrives from outside.
 * The class is on for a single frame only.
 */
.tp2026-global-offices__panel.is-swap-resetting .tp2026-global-offices__photo-img--hover,
.tp2026-global-offices__panel.is-swap-resetting .tp2026-global-offices__map-img--hover,
.tp2026-global-offices__panel.is-swap-resetting .tp2026-global-offices__pins,
.tp2026-global-offices__panel.is-swap-resetting .tp2026-global-offices__pin--lead {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.tp2026-global-offices__panel.is-active {
		animation: none;
	}

	.tp2026-global-offices__tab {
		transition: none;
	}

	/* The swap itself still happens — only the motion is dropped, so the lead
	   marker jumps to its coordinate instead of travelling there. */
	.tp2026-global-offices__photo-img--hover,
	.tp2026-global-offices__map-img--hover,
	.tp2026-global-offices__pins,
	.tp2026-global-offices__pin--lead,
	.tp2026-global-offices__office--interactive {
		transition: none;
	}
}

/* Responsive breakpoints reference (Figma frame = 1440):
   1440 desktop / 1024 small-desktop / 768 tablet / 425,375,320 mobile */

/* Below the 1112px design width the fixed 325/301 columns no longer fit, so
   the grid switches to fluid columns and the fixed heights are released. */
@media (max-width: 1180px) {
	.tp2026-global-offices__photo {
		flex: 0 1 366px;
		height: auto;
		min-height: 390px;
	}

	.tp2026-global-offices__card {
		height: auto;
		min-height: 390px;
	}

	.tp2026-global-offices__grid {
		grid-template-columns: minmax(0, 325fr) minmax(0, 301fr);
	}

	.tp2026-global-offices__map,
	.tp2026-global-offices__map--tall {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Mobile — Figma 2308:2806 / 2710 / 2761 / 2769 on the 360 frame:

     heading  54,7489  252x34   28/34 SemiBold #021b42, centred
     pills    20,7547  320x101  two centred rows, 12 apart, 44 tall
     photo    20,7672  320x122  radius 20
     card     20,7806  320x393  radius 20, 1px #d4e7ff, no padding of its own
       office          320x131  20 padding, name over address 12 apart

   The card is three flush 131px blocks divided by hairlines rather than a
   padded box with gaps, and there is no map on the mobile frame at all.
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
	/* The card bottoms out at y8199 and the Get In Touch band starts at
	   y8263; that section supplies 40 of the 64px gap. */
	.tp2026-global-offices {
		padding-bottom: 24px;
	}

	.tp2026-global-offices__head {
		flex-direction: column;
		align-items: center;
		gap: 24px;
		margin-bottom: 24px;
	}

	.tp2026-global-offices__title {
		font-size: 28px;
		line-height: 34px;
		text-align: center;
	}

	/* 2308:2711 — 12px apart, wrapping to a second centred row; the fill is
	   off on the unselected pills, so the page shows through. */
	.tp2026-global-offices__tabs {
		justify-content: center;
		gap: 12px;
	}

	.tp2026-global-offices__tab {
		padding: 10px 24px;
		background: transparent;
		border-color: #e7f1ff;
		font: 400 12px/24px var(--tp-font-body);
		color: #646464;
	}

	.tp2026-global-offices__tab.is-active {
		background: var(--tp-blue);
		border-color: transparent;
		font-weight: 700;
		color: var(--tp-white);
	}

	.tp2026-global-offices__panel {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.tp2026-global-offices__photo {
		width: 100%;
		flex-basis: auto;
		min-height: 0;
		height: 122px;
		border-radius: 20px;
	}

	/* Figma's 1px stroke sits inside the card without displacing anything, and
	   its block dividers are zero-height lines — reproduced as inset/outset
	   shadows so the three blocks stay a flat 131 each and their copy still
	   lands on x=40. A real border would cost 1px of inset and 2px of height. */
	.tp2026-global-offices__card {
		padding: 0;
		height: auto;
		min-height: 0;
		border: 0;
		border-radius: 20px;
		box-shadow: inset 0 0 0 1px #d4e7ff;
		overflow: hidden;
	}

	/* One column on tablet and below. DOM order puts the map after the first
	   office (it sits top-right of the two-column desktop grid), which stacked
	   it between Cochin and Trivandrum; `order` lifts it above every office so
	   the map leads the card on narrow screens. */
	/* Figma 2308:2776 — the three blocks sit flush inside the card, divided by
	   a hairline, rather than being separated by a row gap. */
	.tp2026-global-offices__grid {
		grid-template-columns: minmax(0, 1fr);
		height: auto;
		row-gap: 0;
	}

	.tp2026-global-offices__map {
		order: -1;
	}

	.tp2026-global-offices__office,
	.tp2026-global-offices__office--interactive {
		padding: 20px;
		border: 0;
		border-radius: 0;
	}

	/* General sibling, not adjacent: the country map is still in the grid
	   between offices 1 and 2 (hidden, order:-1), so `+` would skip the first
	   divider and only rule off the third block. */
	.tp2026-global-offices__office ~ .tp2026-global-offices__office {
		box-shadow: inset 0 1px 0 #d4e7ff;
	}

	/* 2308:2765 / 2766 — 12/15.12 SemiBold black over 12/16 Regular #595959,
	   12px apart. */
	.tp2026-global-offices__office-name {
		font: 600 12px/15.12px var(--tp-font-body);
		margin: 0 0 12px;
	}

	.tp2026-global-offices__office-address {
		font: 400 12px/16px var(--tp-font-body);
	}

	/* Figma 2308:2766 breaks before "Tel:", which is what makes each block a
	   flat four lines (and the card its 393). Running on from the city line is
	   what our natural wrap does at 280px. */
	.tp2026-global-offices__office-tel {
		display: block;
	}

	.tp2026-global-offices__map,
	.tp2026-global-offices__map--tall {
		height: 220px;
		align-self: auto;
	}

	/*
	 * Multi-office countries (India) drop the shared country map here: stacked
	 * to one column it led the card with three markers spread across a whole
	 * region, which told you nothing about the address you were reading. Each
	 * office now carries its own zoomed map directly above its name instead.
	 * Single-office panels are untouched — their map already sits with the one
	 * address it belongs to.
	 */
	.tp2026-global-offices__grid:not(.tp2026-global-offices__grid--single) > .tp2026-global-offices__map {
		display: none;
	}

	/* The per-office zoomed maps added here previously are not on the mobile
	   frame — 2308:2776 is three address blocks and nothing else, with the
	   country photo above the card doing the locating. Kept in the markup so
	   the treatment can be restored if the client wants it back. */
	.tp2026-global-offices__office-map {
		display: none;
	}
}

/* The 35/47 heading, the shrunken pills and the 20px card inset this block
   used to carry are all superseded by Figma 2308:2806/2710/2769, which hold
   28/34, 44px pills and a flush card the whole way down the mobile range. */

@media (max-width: 340px) {
	/* Singapore + India + USA come to 269 on one line; below this the row
	   breaks differently, so the pills give a little rather than the row. */
	.tp2026-global-offices__tab {
		padding: 10px 18px;
	}
}