/*
 * Site-wide footer — Figma 2045:5739 "Group 1321314717" (1240x420).
 *
 * It sits on the bottom 460px of the 1440x1317 gradient rectangle
 * (1752:4006) that also backs the Get In Touch section, so the gradient
 * resumes here at #040a16 — the exact colour the full-height gradient
 * has reached at the seam — and runs out to #131313.
 *
 * Column x-offsets inside the 1240 container: 0 / 291 / 518 / 746 / 973,
 * i.e. a 291px brand column followed by a ~227px pitch. Below 1120px the
 * five columns fold to two and the brand block goes full width.
 */

.site-footer {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: 0 20px 40px;
	background: linear-gradient(180deg, #040a16 0%, #131313 100%);
	font-family: var(--tp-font-body);
}

/* Corner watermark — Figma 1752:4007 "Group 1321314642": the ThinkPalm mark
   at 531x382, opacity 0.04 (baked into the SVG), whose bottom edge overhangs
   the band by 9px and is clipped.
   At <=1440 it sits 42px in from the viewport edge, exactly as drawn; above
   that the max() switches to tracking the 1240 container (58px of overhang)
   so it stays tied to the content instead of drifting into empty margin. */
.site-footer::after {
	content: '';
	position: absolute;
	right: max(42px, calc(50% - 678px));
	bottom: -9px;
	/* 531px is the Figma size and holds down to ~966px wide; below that the
	   55vw cap keeps the mark a corner accent instead of a full-width wash. */
	width: min(531px, 55vw);
	aspect-ratio: 531 / 382;
	background: url('../images/footer-watermark.svg') no-repeat center / contain;
	pointer-events: none;
	z-index: -1;
}

.site-footer__inner {
	position: relative;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	/* Figma Line 531: the hairline is 1240 wide — it stops at the container,
	   it is not full-bleed. */
	border-top: 2px solid rgba(255, 255, 255, 0.1);
}

/* ------------------------------------------------------------------ *
 * Main grid
 * ------------------------------------------------------------------ */

.site-footer__grid {
	display: grid;
	grid-template-columns: 291px 227px 228px 227px auto;
	align-items: start;
	padding-top: 62px;
}

/* ---- Brand column (logo + contact) ---- */

.site-footer__brand {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.site-footer__logo {
	display: block;
	/* Figma puts the mark at y49, 13px above the column headings at y62. */
	margin-top: -13px;
	width: 121px;
	transition: opacity 0.2s ease;
}

/* The mobile lockup only exists below 768 — see the mobile block. Scoped
   through the link so it outranks `.site-footer__logo img` below, which would
   otherwise put both marks on screen. */
.site-footer__logo .site-footer__logo-img--mobile {
	display: none;
}

.site-footer__logo img {
	display: block;
	width: 121px;
	height: 128px;
	object-fit: contain;
}

.site-footer__logo:hover {
	opacity: 0.85;
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* logo bottom sits at y177; the email row starts at y256. */
	margin-top: 79px;
}

.site-footer__contact-link {
	display: flex;
	align-items: center;
	gap: 12px;
	font: 400 16px/24px var(--tp-font-body);
	color: #8c9090;
	text-decoration: none;
	transition: color 0.2s ease;
}

/* Figma 1752:4206 underlines the email address; 1752:4211, the phone
   number, is left plain. */
.site-footer__contact-link[href^='mailto:'] span:last-child {
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
}

.site-footer__contact-icon {
	flex: 0 0 24px;
	display: block;
	width: 24px;
	height: 24px;
	color: #8c9090;
	transition: color 0.2s ease;
}

.site-footer__contact-icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.site-footer__contact-link:hover,
.site-footer__contact-link:hover .site-footer__contact-icon,
.site-footer__contact-link:focus-visible {
	color: #fff;
}

/* ---- Link columns ---- */

.site-footer__col {
	grid-row: 1;
	min-width: 0;
}

.site-footer__col-heading {
	margin: 0 0 12px;
	font: 600 20px/24px var(--tp-font-heading);
	letter-spacing: 0;
	color: #d9d9d9;
}

.site-footer__col-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__col-list a,
.site-footer__address {
	display: block;
	font: 400 12px/24px var(--tp-font-body);
	color: #8c9090;
	text-decoration: none;
	white-space: nowrap;
}

.site-footer__col-list a {
	transition: color 0.18s ease;
}

.site-footer__col-list a:hover,
.site-footer__col-list a:focus-visible {
	color: #fff;
}

/* Figma 1752:4180 sets the address on a 20px leading, not the 24px the link
   columns use — the block is 80px tall over four lines, not 96px. */
.site-footer__address {
	margin: 0;
	line-height: 20px;
}

/* Figma widths: Services runs to 183px and Address to 193px, both wider
   than their 227px pitch allows for wrapping — keep them on one line. */
.site-footer__col--services,
.site-footer__col--address {
	white-space: nowrap;
}

/* ---- Follow Us (row 2, starting in the second column at y296) ---- */

.site-footer__social {
	grid-column: 2 / span 3;
	grid-row: 2;
	display: flex;
	align-items: center;
	gap: 20px;
	/* Row 1 bottoms out at y266 (Services); Follow Us sits at y296. */
	margin-top: 30px;
}

.site-footer__social-label {
	font: 500 12px/24px var(--tp-font-body);
	letter-spacing: -0.4px;
	color: #d9d9d9;
}

.site-footer__social-list {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__social-list a {
	display: block;
	color: #fff;
	transition: color 0.2s ease, transform 0.2s ease;
}

.site-footer__social-list svg {
	display: block;
}

.site-footer__social-list a:hover,
.site-footer__social-list a:focus-visible {
	color: #1977f3;
	transform: translateY(-2px);
}

/* ------------------------------------------------------------------ *
 * Bottom row — hairline at y372, text at y396
 * ------------------------------------------------------------------ */

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	/* grid bottoms out at y320; hairline at y372. */
	margin-top: 52px;
	padding-top: 23px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* The 12px/24px font has to sit on the list itself, not just the anchors:
   the <li> strut would otherwise inherit the 16px/normal body font and give
   each item a 26px line box, making the bottom row 2px taller than Figma. */
.site-footer__legal {
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 0;
	padding: 0;
	font: 500 12px/24px var(--tp-font-body);
	letter-spacing: -0.4px;
	list-style: none;
}

.site-footer__legal a {
	font: 500 12px/24px var(--tp-font-body);
	letter-spacing: -0.4px;
	color: #d9d9d9;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.18s ease;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
	color: #fff;
}

.site-footer__legal-sep {
	font: 500 12px/24px var(--tp-font-body);
	letter-spacing: -0.4px;
	color: #d9d9d9;
}

.site-footer__copyright {
	margin: 0;
	font: 500 12px/24px var(--tp-font-body);
	letter-spacing: -0.4px;
	color: #d9d9d9;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 1279px) and (min-width: 1120px) {
	.site-footer__grid {
		grid-template-columns: 240px repeat(4, 1fr);
		column-gap: 24px;
	}

	.site-footer__col--services,
	.site-footer__col--address,
	.site-footer__col-list a,
	.site-footer__address {
		white-space: normal;
	}
}

@media (max-width: 1119px) {
	.site-footer__col--services,
	.site-footer__col--address,
	.site-footer__col-list a,
	.site-footer__address {
		white-space: normal;
	}

	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 32px;
		padding-top: 48px;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.site-footer__logo {
		margin-top: 0;
	}

	.site-footer__contact {
		margin-top: 24px;
	}

	.site-footer__col {
		grid-row: auto;
	}

	.site-footer__social {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-top: 0;
	}

	.site-footer__bottom {
		margin-top: 40px;
	}
}

/* ---------------------------------------------------------------------------
   Mobile — Figma 2334:3288 / 3271 / 2336:3296 on the 360 frame:

     rule       20,9298  320x2
     logo       20,9330  208x38
     socials    20,9392  143x24   five marks, 8 apart, no "Follow Us" label
     contact    20,9428  171x56   20px icon + 12/24 label, rows 8 apart
     Company    20,9508   95x100  | Products 190,9508 102x164
     Services   20,9688  183x260
     Address    20,9964  193x100
     bottom rule 20,10128 + links and copyright, both centred

   The socials move up between the logo and the contact links, and the five
   link columns fold to a 2-up row (Company | Products) with Services and
   Address full width beneath. The band behind all of this is the same 1960px
   gradient the Get In Touch section starts — see section-get-in-touch.css.
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.site-footer {
		padding: 0 20px 23px;
		/* Continues the Get In Touch band: that section is --tp-git-height tall
		   and starts the same 1960px artwork at its own top edge, so the footer
		   shows the remainder of the very same picture pulled up by that height.
		   Because both halves are one image rather than two ramps, the seam is
		   exact by construction. Gradient underneath is the load fallback. */
		background-image: url('../images/footer-band-mobile.webp'), linear-gradient(180deg, #132c5b 0%, #010816 57.692%, #131313 100%);
		background-repeat: no-repeat, no-repeat;
		background-size: 100% 1960px, 100% 1960px;
		background-position: left calc(-1 * var(--tp-git-height, 1003px)), left calc(-1 * var(--tp-git-height, 1003px));
	}

	/* The band artwork already carries the watermark — Figma draws it inside
	   group 2619:2077, at 301x217 from x=105, overhanging the frame's right
	   edge. Painting the standalone SVG on top would double the mark at a
	   different size and offset. */
	.site-footer::after {
		display: none;
	}

	.site-footer__grid {
		display: grid;
		/* Company at x0, Products at x170 of the 320 column. */
		grid-template-columns: 170px minmax(0, 1fr);
		column-gap: 0;
		row-gap: 0;
		/* 32 from the rule itself, which is 2px of that. */
		padding-top: 30px;
	}

	/* Dissolved so the logo, the socials and the contact links become three
	   orderable rows of the grid — Figma puts the socials between the first
	   two, where the brand block itself has no slot for them. */
	.site-footer__brand {
		display: contents;
	}

	.site-footer__logo {
		grid-column: 1 / -1;
		grid-row: 1;
		width: 208px;
		margin: 0;
	}

	/* Scoped through .site-footer__logo so it outranks `.site-footer__logo img`
	   above, which sets display:block on both. */
	.site-footer__logo .site-footer__logo-img--desktop {
		display: none;
	}

	.site-footer__logo .site-footer__logo-img--mobile {
		display: block;
		width: 208px;
		height: auto;
	}

	.site-footer__social {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 24px;
	}

	.site-footer__social-label {
		display: none;
	}

	.site-footer__social-list {
		gap: 8px;
	}

	.site-footer__contact {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: 12px;
		gap: 8px;
	}

	.site-footer__contact-link {
		gap: 12px;
		font: 400 12px/24px var(--tp-font-body);
	}

	.site-footer__contact-icon,
	.site-footer__contact-icon svg {
		width: 20px;
		height: 20px;
	}

	.site-footer__col--company {
		grid-column: 1;
		grid-row: 4;
		margin-top: 24px;
	}

	.site-footer__col--products {
		grid-column: 2;
		grid-row: 4;
		margin-top: 24px;
	}

	.site-footer__col--services {
		grid-column: 1 / -1;
		grid-row: 5;
		margin-top: 16px;
	}

	.site-footer__col--address {
		grid-column: 1 / -1;
		grid-row: 6;
		margin-top: 16px;
	}

	.site-footer__col-heading {
		margin-bottom: 12px;
		font: 600 14px/24px var(--tp-font-heading);
	}

	.site-footer__col-list {
		font-size: 12px;
		line-height: 32px;
	}

	.site-footer__col-list a {
		font: 400 12px/32px var(--tp-font-body);
	}

	.site-footer__address {
		font: 400 12px/16px var(--tp-font-body);
	}

	/* 2336:3295 — 64px clear of the address block, then a 12px step from the
	   rule to a centred two-line block. */
	.site-footer__bottom {
		flex-direction: column;
		align-items: center;
		gap: 12px;
		margin-top: 64px;
		padding-top: 12px;
	}

	.site-footer__legal {
		justify-content: center;
		flex-wrap: wrap;
		gap: 15px;
	}

	.site-footer__copyright {
		text-align: center;
	}
}

@media (max-width: 340px) {
	.site-footer__grid {
		grid-template-columns: 150px minmax(0, 1fr);
	}

	.site-footer__legal {
		gap: 10px;
	}
}