/*
Theme Name: Beaver Builder Child Theme
Theme URI: https://www.wpbeaverbuilder.com/
Version: 1.0
Description: SkyTech Projects custom child theme.
Author: SkyTech Projects
Author URI: https://skytechprojects.com.au/
Template: bb-theme
*/

/* ==========================================================
   SKYTECH PROJECTS
   GLOBAL DESIGN FOUNDATION
   ========================================================== */


/* ----------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------- */

:root {

	/* Brand colours */
	--sky-pink: #da6caa;
	--sky-ink: #17171a;
	--sky-body: #3f4248;
	--sky-muted: #6f737a;
	--sky-light: #f6f7f8;
	--sky-border: #e5e7ea;
	--sky-white: #ffffff;

	/* Layout */
	--sky-container: 1280px;
	--sky-reading: 760px;
	--sky-narrow: 960px;

	/* Horizontal page gutters */
	--sky-gutter: 32px;

	/* Section spacing */
	--sky-section-xl: 120px;
	--sky-section-lg: 96px;
	--sky-section-md: 72px;
	--sky-section-sm: 48px;

	/* Component spacing */
	--sky-space-xs: 8px;
	--sky-space-sm: 16px;
	--sky-space-md: 24px;
	--sky-space-lg: 32px;
	--sky-space-xl: 48px;

	/* Shape */
	--sky-radius: 2px;

	/* Motion */
	--sky-transition: 180ms ease;
}


/* ----------------------------------------------------------
   2. DOCUMENT FOUNDATION
   ---------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body {
	color: var(--sky-body);
	background: var(--sky-white);
	font-family: "Inter", Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
}

::selection {
	color: var(--sky-white);
	background: var(--sky-pink);
}


/* ----------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--sky-ink);
	font-family: "Barlow Condensed", Helvetica, Arial, sans-serif;
	font-weight: 700;
}

p:last-child {
	margin-bottom: 0;
}

strong,
b {
	font-weight: 700;
}

a {
	transition:
		color var(--sky-transition),
		background-color var(--sky-transition),
		border-color var(--sky-transition),
		opacity var(--sky-transition);
}


/* ----------------------------------------------------------
   4. ACCESSIBILITY
   ---------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--sky-pink);
	outline-offset: 3px;
}


/* ----------------------------------------------------------
   5. REUSABLE WIDTH UTILITIES
   ---------------------------------------------------------- */

.sky-container {
	width: min(
		calc(100% - (var(--sky-gutter) * 2)),
		var(--sky-container)
	);
	margin-inline: auto;
}

.sky-reading-width {
	width: 100%;
	max-width: var(--sky-reading);
}

.sky-narrow-width {
	width: 100%;
	max-width: var(--sky-narrow);
	margin-inline: auto;
}


/* ----------------------------------------------------------
   6. REUSABLE SECTION UTILITIES
   ---------------------------------------------------------- */

.sky-section {
	padding-top: var(--sky-section-lg);
	padding-bottom: var(--sky-section-lg);
}

.sky-section-xl {
	padding-top: var(--sky-section-xl);
	padding-bottom: var(--sky-section-xl);
}

.sky-section-md {
	padding-top: var(--sky-section-md);
	padding-bottom: var(--sky-section-md);
}

.sky-section-sm {
	padding-top: var(--sky-section-sm);
	padding-bottom: var(--sky-section-sm);
}

.sky-bg-light {
	background-color: var(--sky-light);
}

.sky-bg-ink {
	color: var(--sky-white);
	background-color: var(--sky-ink);
}


/* ----------------------------------------------------------
   7. EYEBROW / SECTION LABEL
   ---------------------------------------------------------- */

.sky-eyebrow {
	display: inline-block;
	margin-bottom: var(--sky-space-sm);
	color: var(--sky-pink);
	font-family: "Inter", Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}


/* ----------------------------------------------------------
   8. BUTTON FOUNDATION
   ---------------------------------------------------------- */

.fl-builder-content a.fl-button,
a.sky-button {
	border-radius: var(--sky-radius);
	font-family: "Inter", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.035em;
	text-transform: uppercase;
}

a.sky-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 15px 24px;
	color: var(--sky-white);
	background: var(--sky-pink);
	border: 0;
	text-decoration: none;
}

a.sky-button:hover,
a.sky-button:focus {
	color: var(--sky-white);
	background: var(--sky-ink);
	text-decoration: none;
}


/* ----------------------------------------------------------
   9. SECONDARY TEXT LINK
   ---------------------------------------------------------- */

.sky-text-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--sky-ink);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.035em;
	text-decoration: none;
	text-transform: uppercase;
}

.sky-text-link::after {
	content: "\2192";
	transition: transform var(--sky-transition);
}

.sky-text-link:hover {
	color: var(--sky-pink);
	text-decoration: none;
}

.sky-text-link:hover::after {
	transform: translateX(4px);
}


/* ----------------------------------------------------------
   10. MEDIA / IMAGE FOUNDATION
   ---------------------------------------------------------- */

.sky-media {
	position: relative;
	overflow: hidden;
}

.sky-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ----------------------------------------------------------
   11. RESPONSIVE FOUNDATION
   ---------------------------------------------------------- */

@media (max-width: 1199px) {

	:root {
		--sky-gutter: 28px;
		--sky-section-xl: 104px;
		--sky-section-lg: 88px;
	}

}


@media (max-width: 991px) {

	:root {
		--sky-gutter: 24px;
		--sky-section-xl: 88px;
		--sky-section-lg: 72px;
		--sky-section-md: 64px;
	}

}


@media (max-width: 767px) {

	:root {
		--sky-gutter: 20px;
		--sky-section-xl: 72px;
		--sky-section-lg: 64px;
		--sky-section-md: 56px;
		--sky-section-sm: 40px;
	}

	body {
		font-size: 16px;
		line-height: 1.6;
	}

}


/* ----------------------------------------------------------
   END GLOBAL DESIGN FOUNDATION
   ---------------------------------------------------------- */
   
/* SkyTech Homepage Hero */
.skytech-hero-copy {
    max-width: 540px;
}

/* ==========================================================
   SKYTECH GLOBAL HEADER
   ========================================================== */

/* ----------------------------------------------------------
   DESKTOP / BASE
   ---------------------------------------------------------- */

.st-header {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 88px;
	padding: 0 var(--sky-gutter);
	background: var(--sky-white);
}

.st-header > .fl-row-content-wrap {
	width: 100%;
}

.st-header > .fl-row-content-wrap > .fl-row-content {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: var(--sky-container);
	margin: 0 auto;
}

.st-header .fl-col-group {
	display: flex;
	align-items: center;
	width: 100%;
}

/* Logo */

.st-header-logo-col {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.st-header-logo .fl-module-content {
	margin: 0;
}

.st-header-logo img {
	display: block;
	width: auto;
	max-width: 190px;
	max-height: 58px;
}

/* Navigation */

.st-header-nav-col {
	display: flex;
	align-items: center;
	justify-content: center;
}

.st-header-menu .fl-module-content {
	margin: 0;
}

.st-header-menu .menu {
	display: flex;
	align-items: center;
	justify-content: center;
}

.st-header-menu .menu > li > a {
	color: var(--sky-ink);
	font-family: "Inter", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

.st-header-menu .menu > li > a:hover,
.st-header-menu .menu > li.current-menu-item > a,
.st-header-menu .menu > li.current-menu-ancestor > a {
	color: var(--sky-pink);
}

/* CTA */

.st-header-cta-col {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.st-header-cta .fl-module-content {
	margin: 0;
}

.st-header-cta a.fl-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 15px 24px;
	color: var(--sky-white);
	background: var(--sky-pink);
	border: 0;
	border-radius: var(--sky-radius);
	font-family: "Inter", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.035em;
	text-transform: uppercase;
}

.st-header-cta a.fl-button:hover,
.st-header-cta a.fl-button:focus {
	color: var(--sky-white);
	background: var(--sky-ink);
}


/* ----------------------------------------------------------
   TABLET — 992px AND BELOW
   ---------------------------------------------------------- */

@media (max-width: 991px) {

	.st-header {
		min-height: 82px;
		padding-left: var(--sky-gutter);
		padding-right: var(--sky-gutter);
	}

	.st-header-logo img {
		max-width: 165px;
		max-height: 52px;
	}

	.st-header-nav-col {
		justify-content: flex-end;
	}

	.st-header-menu .fl-menu-mobile-toggle {
		margin: 0;
	}

	.st-header-cta a.fl-button {
		min-height: 46px;
		padding: 13px 18px;
		font-size: 13px;
	}

}


/* ----------------------------------------------------------
   MOBILE — 767px AND BELOW
   ---------------------------------------------------------- */

@media (max-width: 767px) {

	.st-header {
		min-height: 72px;
		padding-left: var(--sky-gutter);
		padding-right: var(--sky-gutter);
		overflow: visible;
	}

	.st-header > .fl-row-content-wrap {
		width: 100%;
	}

	.st-header > .fl-row-content-wrap > .fl-row-content,
	.st-header .fl-col-group {
		display: flex !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.st-header .fl-col,
	.st-header .fl-col-content {
		min-width: 0 !important;
	}

	.st-header-logo-col {
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
	}

	.st-header-nav-col {
		flex: 0 0 44px !important;
		width: 44px !important;
		min-width: 44px !important;
		margin-left: auto;
	}

	.st-header-cta-col {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 0 !important;
		margin-left: 8px;
	}

	.st-header-logo .fl-module-content,
	.st-header-menu .fl-module-content,
	.st-header-cta .fl-module-content {
		margin: 0 !important;
	}

	.st-header-logo img {
		width: auto;
		max-width: 135px;
		max-height: 46px;
	}

	.st-header-menu .fl-menu-mobile-toggle {
		margin: 0 !important;
		padding: 8px !important;
	}

	.st-header-cta a.fl-button {
		min-height: 42px;
		padding: 11px 13px;
		font-size: 11px;
		letter-spacing: 0.01em;
		white-space: nowrap;
	}

}


/* ----------------------------------------------------------
   SMALL MOBILE — 480px AND BELOW
   ---------------------------------------------------------- */

@media (max-width: 480px) {

	.st-header {
		padding-left: 12px;
		padding-right: 12px;
	}

	.st-header-logo img {
		max-width: 112px;
		max-height: 42px;
	}

	.st-header-nav-col {
		flex-basis: 38px !important;
		width: 38px !important;
		min-width: 38px !important;
	}

	.st-header-menu .fl-menu-mobile-toggle {
		padding: 6px !important;
	}

	.st-header-cta-col {
		margin-left: 4px;
	}

	.st-header-cta a.fl-button {
		min-height: 40px;
		padding: 10px 10px;
		font-size: 10px;
	}
	
		.st-header-cta-col {
		display: none !important;
	}

	.st-header-logo-col {
		flex: 1 1 auto !important;
	}

	.st-header-nav-col {
		flex: 0 0 44px !important;
		width: 44px !important;
		min-width: 44px !important;
		margin-left: auto;
	}

	.st-header-logo img {
		max-width: 145px;
	}

}

/* ==========================================================
   SKYTECH GLOBAL HEADER — RESPONSIVE LAYOUT V2
   BB source columns: 20% | 60% | 20%
   ========================================================== */


/* ----------------------------------------------------------
   DESKTOP / COMPACT DESKTOP
   Keep all navigation on one line
   ---------------------------------------------------------- */

@media (min-width: 992px) {

    .st-header-logo-col {
        width: 19% !important;
    }

    .st-header-nav-col {
        width: 66% !important;
    }

    .st-header-cta-col {
        width: 15% !important;
    }

    .st-header-menu .menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .st-header-menu .menu > li {
        float: none !important;
        flex: 0 0 auto !important;
    }

    .st-header-menu .menu > li > a {
        padding-left: 10px !important;
        padding-right: 10px !important;
        white-space: nowrap !important;
    }

    .st-header-cta a {
        white-space: nowrap !important;
    }

}


/* ----------------------------------------------------------
   TABLET
   768px – 991px
   Logo | Hamburger | CTA — one row
   ---------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 991px) {

    /* THIS is the actual parent of our three BB columns */
    .st-header .fl-col-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Neutralise Beaver Builder responsive column behaviour */
    .st-header .fl-col-group > .fl-col {
        float: none !important;
        clear: none !important;
        margin: 0 !important;
    }

    /* Logo */
    .st-header .st-header-logo-col {
        width: 38% !important;
        max-width: 38% !important;
        flex: 0 0 38% !important;
    }

    /* Hamburger */
    .st-header .fl-col-group > .fl-col:nth-child(2) {
        width: 18% !important;
        max-width: 18% !important;
        flex: 0 0 18% !important;
    }

    /* CTA */
    .st-header .st-header-cta-col {
        width: 44% !important;
        max-width: 44% !important;
        flex: 0 0 44% !important;
    }

    .st-header-logo {
        text-align: left !important;
    }

    .st-header-menu {
        text-align: center !important;
    }

    .st-header-cta {
        text-align: right !important;
    }

    .st-header-cta a {
        white-space: nowrap !important;
    }

}


/* ----------------------------------------------------------
   MOBILE
   Below 768px
   Logo | Hamburger
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    .st-header .fl-row-content {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .st-header .st-header-logo-col,
    .st-header .st-header-nav-col {
        float: none !important;
        clear: none !important;
        margin: 0 !important;
    }

    .st-header .st-header-logo-col {
        width: 75% !important;
        flex: 0 0 75% !important;
    }

    .st-header .st-header-nav-col {
        width: 25% !important;
        flex: 0 0 25% !important;
    }

    .st-header .st-header-cta-col {
        display: none !important;
    }

    .st-header-logo {
        text-align: left !important;
    }

    .st-header-menu {
        text-align: right !important;
    }

}


/* ----------------------------------------------------------
   END SKYTECH GLOBAL HEADER
   ---------------------------------------------------------- */

/* =========================================================
   SKYTECH GLOBAL FOOTER
   ST-FOOTER-3
   ========================================================= */

/* Neutralise Beaver Builder wrapper */
.st-global-footer,
.st-global-footer > .fl-row-content-wrap,
.st-global-footer .fl-row-content,
.st-global-footer .fl-col,
.st-global-footer .fl-col-content,
.st-footer-html,
.st-footer-html .fl-module-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.st-global-footer {
    overflow: hidden;
}

/* ---------------------------------------------------------
   MAIN FOOTER
   --------------------------------------------------------- */

.st-footer {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #151719;
    color: #ffffff;
    font-family: inherit;
}

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

.st-footer-inner {
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;
    padding: 78px 0 70px;

    display: grid;
    grid-template-columns: 1.45fr 1fr 0.85fr 1.1fr;
    gap: 70px;
    align-items: start;
}

/* ---------------------------------------------------------
   BRAND
   --------------------------------------------------------- */

.st-footer-brand {
    min-width: 0;
}

.st-footer-logo {
    display: inline-block;
    width: 100%;
    max-width: 285px;
    margin: 0 0 28px;
}

.st-footer-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.st-footer-intro {
    max-width: 330px;
    margin: 0;
    color: #c8cbd0;
    font-size: 16px;
    line-height: 1.7;
}

/* ---------------------------------------------------------
   HEADINGS
   --------------------------------------------------------- */

.st-footer-heading {
    position: relative;

    margin: 0 0 28px !important;
    padding: 18px 0 0 !important;

    color: #ffffff !important;

    font-family: inherit;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.st-footer-heading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 34px;
    height: 3px;

    background: #d662a2;
}

/* ---------------------------------------------------------
   LINKS
   --------------------------------------------------------- */

.st-footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-footer-links li {
    margin: 0 0 12px;
    padding: 0;
}

.st-footer-links a,
.st-footer-legal a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.st-footer-links a {
    font-size: 16px;
    line-height: 1.45;
}

.st-footer-links a:hover,
.st-footer-links a:focus,
.st-footer-legal a:hover,
.st-footer-legal a:focus {
    color: #d662a2;
}

/* ---------------------------------------------------------
   CONTACT
   --------------------------------------------------------- */

.st-footer-contact p {
    max-width: 260px;
    margin: 0 0 26px;
    color: #c8cbd0;
    font-size: 16px;
    line-height: 1.65;
}

.st-footer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 15px 25px;

    background: #d662a2;
    color: #ffffff !important;

    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none !important;
    text-align: center;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.st-footer-button:hover,
.st-footer-button:focus {
    background: #c74f92;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* ---------------------------------------------------------
   LOWER FOOTER
   --------------------------------------------------------- */

.st-footer-bottom {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.st-footer-bottom-inner {
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;
    padding: 22px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.st-footer-bottom p,
.st-footer-legal {
    margin: 0;
    color: #969ba1;
    font-size: 13px;
    line-height: 1.5;
}

.st-footer-legal a {
    color: #969ba1;
    font-size: 13px;
}

/* =========================================================
   TABLET
   768px - 991px
   ========================================================= */

@media (max-width: 991px) {

    .st-footer-inner {
        width: min(100% - 64px, 760px);
        padding: 62px 0 58px;

        grid-template-columns: 1.25fr 1fr;
        gap: 54px 60px;
    }

    .st-footer-brand {
        grid-column: 1 / -1;
    }

    .st-footer-logo {
        max-width: 240px;
        margin-bottom: 22px;
    }

    .st-footer-intro {
        max-width: 520px;
    }

    .st-footer-contact {
        grid-column: 1 / -1;
    }

    .st-footer-contact p {
        max-width: 500px;
    }

    .st-footer-bottom-inner {
        width: min(100% - 64px, 760px);
    }
}

/* =========================================================
   MOBILE
   767px AND BELOW
   ========================================================= */

@media (max-width: 767px) {

    .st-global-footer,
    .st-footer {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .st-footer-inner {
        width: calc(100% - 40px);
        max-width: none;
        padding: 50px 0 46px;

        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 42px;
    }

    .st-footer-brand,
    .st-footer-column,
    .st-footer-contact {
        width: 100%;
        min-width: 0;
        grid-column: auto;
    }

    .st-footer-logo {
        width: 100%;
        max-width: 245px;
        margin-bottom: 22px;
    }

    .st-footer-intro {
        max-width: 100%;
        font-size: 15px;
    }

    .st-footer-heading {
        margin-bottom: 22px !important;
        font-size: 15px !important;
    }

    .st-footer-links a,
    .st-footer-contact p {
        font-size: 15px;
    }

    .st-footer-contact p {
        max-width: 100%;
    }

    .st-footer-button {
        width: 100%;
        max-width: 280px;
    }

    .st-footer-bottom-inner {
        width: calc(100% - 40px);
        padding: 22px 0 26px;

        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .st-footer-inner,
    .st-footer-bottom-inner {
        width: calc(100% - 36px);
    }

    .st-footer-logo {
        max-width: 225px;
    }
}





/* ============================================================
   SKYTECH PROJECTS
   ST-HOME-1C
   HOME PAGE BODY
   ============================================================ */

.st-home-page {
    --st-pink: #d65fa2;
    --st-dark: #151719;
    --st-navy: #203b59;
    --st-blue: #4288c9;
    --st-light: #f4f5f6;
    --st-white: #ffffff;
    --st-text: #252a2e;
    --st-muted: #69727a;

    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
    color: var(--st-text);
}

.st-home-page *,
.st-home-page *::before,
.st-home-page *::after {
    box-sizing: border-box;
}

.st-home-page h1,
.st-home-page h2,
.st-home-page h3,
.st-home-page p {
    margin-top: 0;
}

.st-home-page a {
    text-decoration: none;
}

.st-home-container {
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;
}

.st-section {
    padding: 110px 0;
}

.st-eyebrow {
    margin: 0 0 20px;
    color: var(--st-pink);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.st-home-page h2 {
    margin-bottom: 0;
    font-size: clamp(42px, 4.1vw, 66px);
    line-height: .95;
    letter-spacing: -.025em;
}

.st-home-page h3 {
    line-height: 1.05;
}

.st-large-copy {
    font-size: 20px;
    line-height: 1.55;
}

.st-btn {
    display: inline-flex;
    min-height: 52px;
    padding: 0 27px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: .2s ease;
}

.st-btn-primary {
    background: var(--st-pink);
    color: #fff !important;
}

.st-btn-primary:hover {
    background: #c74e94;
}

.st-btn-dark {
    background: var(--st-dark);
    color: #fff !important;
}

.st-btn-outline {
    border: 2px solid var(--st-dark);
    color: var(--st-dark) !important;
}

.st-btn-outline:hover {
    background: var(--st-dark);
    color: #fff !important;
}

.st-text-link,
.st-card-link {
    display: inline-block;
    color: var(--st-blue);
    font-size: 13px;
    font-weight: 800;
}

.st-text-link::after,
.st-card-link::after {
    content: " →";
}

.st-text-link-light {
    color: #fff;
}


/* ============================================================
   HERO
   ============================================================ */

.st-home-hero {
    position: relative;
    min-height: 680px;
    display: flex;
    align-items: center;
    background-image:
        linear-gradient(
            90deg,
            rgba(15,35,56,.94) 0%,
            rgba(15,35,56,.77) 33%,
            rgba(15,35,56,.18) 66%,
            rgba(15,35,56,.04) 100%
        ),
        url("/wp-content/uploads/2026/09/skytech-rope-access-sydney-hero.webp");
    background-size: cover;
    background-position: center center;
    color: #fff;
}

.st-home-hero-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.st-home-hero-inner {
    position: relative;
    z-index: 2;
}

.st-home-hero-copy {
    width: min(590px, 55%);
}

.st-home-hero .st-eyebrow {
    color: #fff;
    opacity: .8;
}

.st-home-hero h1 {
    margin: 0 0 26px;
    color: #fff;
    font-size: clamp(54px, 5.4vw, 78px);
    line-height: .92;
    letter-spacing: -.025em;
}

.st-home-hero-lead {
    max-width: 570px;
    margin-bottom: 30px;
    font-size: 19px;
    line-height: 1.55;
}

.st-home-hero-actions {
    display: flex;
    align-items: center;
    gap: 25px;
}

.st-home-hero .st-text-link {
    color: #fff;
}

.st-home-hero-marker {
    position: absolute;
    z-index: 2;
    left: 40px;
    bottom: 24px;
    display: flex;
    gap: 10px;
    align-items: center;
    color: rgba(255,255,255,.7);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
}

.st-home-hero-marker i {
    display: block;
    width: 36px;
    height: 1px;
    background: var(--st-pink);
}


/* ============================================================
   TRUST STRIP
   ============================================================ */

.st-home-trust {
    background: var(--st-dark);
    color: #fff;
}

.st-home-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.st-home-trust-item {
    min-height: 125px;
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgba(255,255,255,.12);
}

.st-home-trust-item:first-child {
    border-left: 1px solid rgba(255,255,255,.12);
}

.st-home-trust-item strong {
    margin-bottom: 7px;
    font-size: 14px;
    letter-spacing: .04em;
}

.st-home-trust-item span {
    color: rgba(255,255,255,.66);
    font-size: 13px;
    line-height: 1.45;
}


/* ============================================================
   SERVICES
   ============================================================ */

.st-section-heading-split {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    align-items: end;
    margin-bottom: 65px;
}

.st-section-intro {
    max-width: 590px;
    padding-bottom: 4px;
}

.st-section-intro p {
    font-size: 17px;
    line-height: 1.65;
}

.st-section-intro p:last-child {
    margin-bottom: 0;
}

.st-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.st-service-card {
    position: relative;
    min-height: 420px;
    padding: 38px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #e9ecee;
}

.st-service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(12,20,27,.88) 0%,
        rgba(12,20,27,.15) 70%
    );
}

.st-service-card-dark {
    background: var(--st-navy);
}

.st-service-card-dark::before {
    background: none;
}

.st-service-card-pink {
    background: var(--st-pink);
}

.st-service-card-pink::before {
    background: none;
}

.st-service-image-02 {
    background:
        linear-gradient(rgba(30,45,60,.10), rgba(30,45,60,.10)),
        #88949d;
    background-size: cover;
    background-position: center;
}

.st-service-image-03 {
    background:
        linear-gradient(rgba(30,45,60,.10), rgba(30,45,60,.10)),
        #687781;
    background-size: cover;
    background-position: center;
}

.st-card-number {
    position: absolute;
    z-index: 2;
    top: 32px;
    right: 34px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    font-weight: 800;
}

.st-service-card-content {
    position: relative;
    z-index: 2;
    max-width: 420px;
    color: #fff;
}

.st-service-card h3 {
    margin: 0 0 16px;
    color: #fff;
    font-size: 31px;
}

.st-service-card p {
    margin-bottom: 22px;
    color: rgba(255,255,255,.8);
    font-size: 15px;
    line-height: 1.55;
}

.st-service-card .st-card-link {
    color: #fff;
}


/* ============================================================
   WHY SKYTECH
   ============================================================ */

.st-home-access {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    min-height: 670px;
    background: var(--st-navy);
}

.st-home-access-visual {
    min-height: 670px;
}

.st-home-access-visual .st-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 670px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(rgba(21,23,25,.18), rgba(21,23,25,.18)),
        #667988;
    color: rgba(255,255,255,.6);
}

.st-home-access-content {
    display: flex;
    align-items: center;
    padding: 80px clamp(45px, 6vw, 100px);
    color: #fff;
}

.st-home-access-copy {
    max-width: 540px;
}

.st-home-access h2 {
    margin-bottom: 30px;
    color: #fff;
}

.st-home-access .st-large-copy {
    margin-bottom: 20px;
    color: #fff;
}

.st-home-access-copy > p:not(.st-eyebrow):not(.st-large-copy) {
    color: rgba(255,255,255,.74);
    line-height: 1.65;
}


/* ============================================================
   PROJECTS
   ============================================================ */

.st-home-projects {
    background: #fff;
}

.st-project-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 60px;
}

.st-project-grid {
    display: grid;
    grid-template-columns: 1.35fr .825fr .825fr;
    gap: 20px;
}

.st-project-card .st-image-placeholder {
    height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d8dde0;
    color: #78828a;
    font-size: 11px;
    letter-spacing: .08em;
}

.st-project-card-large .st-image-placeholder {
    height: 440px;
}

.st-project-meta {
    padding-top: 20px;
}

.st-project-meta span {
    color: var(--st-pink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.st-project-meta h3 {
    margin: 7px 0 0;
    font-size: 23px;
}


/* ============================================================
   INDUSTRIES
   ============================================================ */

.st-home-industries {
    padding: 110px 0;
    background: var(--st-dark);
    color: #fff;
}

.st-industries-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 100px;
}

.st-industries-heading h2 {
    color: #fff;
}

.st-industries-list {
    border-top: 1px solid rgba(255,255,255,.18);
}

.st-industry-item {
    min-height: 92px;
    display: grid;
    grid-template-columns: 50px 1fr 30px;
    gap: 15px;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.18);
    color: #fff !important;
    transition: .2s ease;
}

.st-industry-item:hover {
    padding-left: 10px;
}

.st-industry-number {
    color: var(--st-pink);
    font-size: 12px;
    font-weight: 800;
}

.st-industry-item strong {
    font-size: 16px;
    letter-spacing: .02em;
}

.st-industry-arrow {
    font-size: 22px;
    text-align: right;
}


/* ============================================================
   SAFETY
   ============================================================ */

.st-home-safety {
    background: var(--st-light);
}

.st-safety-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    align-items: center;
}

.st-safety-copy {
    max-width: 520px;
}

.st-safety-copy h2 {
    margin-bottom: 30px;
}

.st-safety-copy > p:not(.st-eyebrow) {
    line-height: 1.65;
}

.st-safety-panel {
    background: #fff;
    padding: 20px 55px;
}

.st-safety-stat {
    position: relative;
    padding: 35px 0 35px 58px;
    border-bottom: 1px solid #dfe2e4;
}

.st-safety-stat:last-child {
    border-bottom: 0;
}

.st-safety-stat > span {
    position: absolute;
    left: 0;
    top: 38px;
    color: var(--st-pink);
    font-size: 12px;
    font-weight: 800;
}

.st-safety-stat strong {
    display: block;
    margin-bottom: 8px;
    font-size: 19px;
}

.st-safety-stat p {
    margin: 0;
    color: var(--st-muted);
    line-height: 1.5;
}


/* ============================================================
   FINAL CTA
   ============================================================ */

.st-home-cta {
    padding: 90px 0;
    background: var(--st-pink);
}

.st-home-cta .st-eyebrow {
    color: #fff;
    opacity: .8;
}

.st-home-cta-inner {
    display: grid;
    grid-template-columns: 1fr .7fr;
    gap: 100px;
    align-items: center;
}

.st-home-cta h2 {
    color: #fff;
}

.st-home-cta-action {
    max-width: 430px;
}

.st-home-cta-action p {
    margin-bottom: 25px;
    color: #fff;
    font-size: 18px;
    line-height: 1.55;
}


/* ============================================================
   MEDIUM
   769px - 992px
   ============================================================ */

@media (min-width: 769px) and (max-width: 992px) {

    .st-home-container {
        width: calc(100% - 64px);
    }

    .st-section,
    .st-home-industries {
        padding: 85px 0;
    }

    .st-home-hero {
        min-height: 610px;
    }

    .st-home-hero-copy {
        width: 67%;
    }

    .st-home-hero h1 {
        font-size: 58px;
    }

    .st-home-trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .st-home-trust-item {
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .st-section-heading-split {
        grid-template-columns: 1fr 1fr;
        gap: 55px;
    }

    .st-service-card {
        min-height: 370px;
    }

    .st-home-access {
        grid-template-columns: 1fr 1fr;
    }

    .st-home-access-content {
        padding: 60px 42px;
    }

    .st-project-grid {
        grid-template-columns: 1.25fr 1fr;
    }

    .st-project-card:last-child {
        grid-column: 2;
    }

    .st-industries-layout,
    .st-safety-layout {
        gap: 55px;
    }

    .st-home-cta-inner {
        gap: 55px;
    }
}


/* ============================================================
   SMALL / MOBILE
   <= 768px
   ============================================================ */

@media (max-width: 768px) {

    .st-home-container {
        width: calc(100% - 40px);
    }

    .st-section,
    .st-home-industries {
        padding: 68px 0;
    }

    .st-eyebrow {
        margin-bottom: 14px;
        font-size: 10px;
    }

    .st-home-page h2 {
        font-size: 39px;
    }

    .st-large-copy {
        font-size: 17px;
    }

    .st-btn {
        min-height: 50px;
        padding: 0 22px;
    }


    /* HERO */

    .st-home-hero {
        min-height: 650px;
        align-items: flex-end;
        padding: 100px 0 75px;
        background-position: 62% center;
        background-image:
            linear-gradient(
                90deg,
                rgba(15,35,56,.91) 0%,
                rgba(15,35,56,.68) 65%,
                rgba(15,35,56,.28) 100%
            ),
            url("/wp-content/uploads/2026/09/skytech-rope-access-sydney-hero.webp");
    }

    .st-home-hero-copy {
        width: 100%;
    }

    .st-home-hero h1 {
        margin-bottom: 22px;
        font-size: clamp(43px, 13vw, 58px);
    }

    .st-home-hero-lead {
        max-width: 95%;
        font-size: 16px;
    }

    .st-home-hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
    }

    .st-home-hero-marker {
        display: none;
    }


    /* TRUST */

    .st-home-trust-grid {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .st-home-trust-item {
        min-height: 115px;
        padding: 22px 20px;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .st-home-trust-item strong {
        font-size: 12px;
    }

    .st-home-trust-item span {
        font-size: 11px;
    }


    /* SERVICES */

    .st-section-heading-split {
        display: block;
        margin-bottom: 42px;
    }

    .st-section-intro {
        margin-top: 28px;
    }

    .st-section-intro p {
        font-size: 15px;
    }

    .st-services-grid {
        grid-template-columns: 1fr;
    }

    .st-service-card {
        min-height: 350px;
        padding: 28px 25px;
    }

    .st-service-card h3 {
        font-size: 27px;
    }


    /* WHY SKYTECH */

    .st-home-access {
        display: block;
        min-height: 0;
    }

    .st-home-access-visual,
    .st-home-access-visual .st-image-placeholder {
        min-height: 360px;
        height: 360px;
    }

    .st-home-access-content {
        padding: 65px 20px 70px;
    }


    /* PROJECTS */

    .st-project-heading {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 42px;
    }

    .st-project-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .st-project-card-large .st-image-placeholder,
    .st-project-card .st-image-placeholder {
        height: 300px;
    }

    .st-project-meta h3 {
        font-size: 21px;
    }


    /* INDUSTRIES */

    .st-industries-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .st-industry-item {
        min-height: 80px;
        grid-template-columns: 35px 1fr 25px;
    }

    .st-industry-item strong {
        font-size: 14px;
    }


    /* SAFETY */

    .st-safety-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .st-safety-panel {
        padding: 5px 25px;
    }

    .st-safety-stat {
        padding-left: 45px;
    }


    /* FINAL CTA */

    .st-home-cta {
        padding: 65px 0;
    }

    .st-home-cta-inner {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .st-home-cta-action p {
        font-size: 16px;
    }
}


/* ============================================================
   NARROW MOBILE
   ============================================================ */

@media (max-width: 420px) {

    .st-home-container {
        width: calc(100% - 32px);
    }

    .st-home-page h2 {
        font-size: 36px;
    }

    .st-home-hero h1 {
        font-size: 43px;
    }

    .st-home-trust-grid {
        grid-template-columns: 1fr;
    }

    .st-home-trust-item {
        min-height: 92px;
    }

    .st-home-access-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .st-home-cta .st-btn {
        width: 100%;
    }
}









/* ============================================================
   SKYTECH PROJECTS
   ST-HOME-2A
   RESPONSIVE REFINEMENT
   Mobile polish only - desktop/tablet protected
   ============================================================ */

@media (max-width: 480px) {

    /* GLOBAL MOBILE RHYTHM */

    .st-home-container {
        width: calc(100% - 32px);
    }

    .st-section,
    .st-home-industries {
        padding: 58px 0;
    }

    .st-eyebrow {
        margin-bottom: 12px;
    }

    .st-home-page h2 {
        font-size: 35px;
        line-height: .96;
    }

    .st-large-copy {
        font-size: 16px;
        line-height: 1.55;
    }


    /* HERO */

    .st-home-hero {
        min-height: 620px;
        padding: 90px 0 60px;
        background-position: 64% center;
    }

    .st-home-hero h1 {
        margin-bottom: 18px;
        font-size: 42px;
        line-height: .92;
    }

    .st-home-hero-lead {
        max-width: 100%;
        margin-bottom: 24px;
        font-size: 15px;
        line-height: 1.5;
    }

    .st-home-hero-actions {
        gap: 14px;
    }


    /* TRUST STRIP */

    .st-home-trust-item {
        min-height: 82px;
        padding: 18px 16px;
    }

    .st-home-trust-item strong {
        margin-bottom: 5px;
    }


    /* SERVICES INTRO */

    .st-section-heading-split {
        margin-bottom: 34px;
    }

    .st-section-intro {
        margin-top: 22px;
    }

    .st-section-intro p {
        font-size: 14px;
        line-height: 1.6;
    }


    /* SERVICE CARDS */

    .st-service-card {
        min-height: 285px;
        padding: 24px 20px;
    }

    .st-card-number {
        top: 20px;
        right: 20px;
    }

    .st-service-card h3 {
        margin-bottom: 12px;
        font-size: 25px;
    }

    .st-service-card p {
        margin-bottom: 16px;
        font-size: 14px;
        line-height: 1.5;
    }


    /* WHY SKYTECH */

    .st-home-access-visual,
    .st-home-access-visual .st-image-placeholder {
        height: 310px;
        min-height: 310px;
    }

    .st-home-access-content {
        padding: 48px 16px 54px;
    }

    .st-home-access h2 {
        margin-bottom: 22px;
    }

    .st-home-access .st-large-copy {
        margin-bottom: 16px;
    }


    /* PROJECTS */

    .st-project-heading {
        gap: 22px;
        margin-bottom: 32px;
    }

    .st-project-grid {
        gap: 30px;
    }

    .st-project-card-large .st-image-placeholder,
    .st-project-card .st-image-placeholder {
        height: 220px;
    }

    .st-project-meta {
        padding-top: 14px;
    }

    .st-project-meta h3 {
        font-size: 19px;
    }


    /* INDUSTRIES */

    .st-industries-layout {
        gap: 32px;
    }

    .st-industry-item {
        min-height: 70px;
    }


    /* SAFETY */

    .st-safety-layout {
        gap: 32px;
    }

    .st-safety-copy h2 {
        margin-bottom: 22px;
    }

    .st-safety-panel {
        padding: 4px 20px;
    }

    .st-safety-stat {
        padding: 26px 0 26px 40px;
    }

    .st-safety-stat > span {
        top: 29px;
    }

    .st-safety-stat strong {
        font-size: 17px;
    }


    /* FINAL CTA */

    .st-home-cta {
        padding: 54px 0;
    }

    .st-home-cta-inner {
        gap: 28px;
    }

    .st-home-cta-action p {
        margin-bottom: 20px;
        font-size: 15px;
    }
}



/* ============================================================
   SKYTECH PROJECTS
   ST-HEADER-3
   PREMIUM MOBILE NAVIGATION
   ============================================================ */

@media (max-width: 991px) {

    /* --------------------------------------------------------
       MOBILE MENU TOGGLE
       -------------------------------------------------------- */

    .st-header-menu .fl-menu-mobile-toggle {
        position: relative;
        z-index: 1002;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        margin: 0 !important;
        padding: 12px !important;
        border: 1px solid rgba(214, 95, 162, .55) !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        color: #d65fa2 !important;
        cursor: pointer;
    }

    .st-header-menu .fl-menu-mobile-toggle .fl-menu-icon {
        display: block;
        width: 22px;
        height: 22px;
    }

    .st-header-menu .fl-menu-mobile-toggle svg {
        display: block;
        width: 22px;
        height: 22px;
        fill: #d65fa2;
    }


    /* --------------------------------------------------------
       OPENED NAVIGATION PANEL
       Break menu out of Beaver Builder's narrow nav column
       -------------------------------------------------------- */

    .st-header-menu nav {
        position: static;
    }

    .st-header-menu nav > ul.menu {
        position: absolute !important;
        z-index: 1000;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;

        width: min(420px, 100vw) !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 22px 0 28px !important;

        background: #151719 !important;
        border: 0 !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .22);

        text-align: left !important;
    }


    /* --------------------------------------------------------
       MENU ITEMS
       -------------------------------------------------------- */

    .st-header-menu nav > ul.menu > li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        border-bottom: 1px solid rgba(255, 255, 255, .10);
    }

    .st-header-menu nav > ul.menu > li:last-child {
        border-bottom: 0;
    }

    .st-header-menu nav > ul.menu > li > a {
        position: relative;
        display: flex !important;
        align-items: center;

        width: 100% !important;
        min-height: 58px;
        margin: 0 !important;
        padding: 16px 58px 16px 28px !important;

        color: #ffffff !important;
        background: transparent !important;

        font-family: "Inter", Helvetica, Arial, sans-serif;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: .045em !important;

        text-align: left !important;
        text-decoration: none !important;
        text-transform: uppercase;
        white-space: nowrap !important;

        transition:
            color 180ms ease,
            background-color 180ms ease,
            padding-left 180ms ease;
    }

    .st-header-menu nav > ul.menu > li > a::after {
        content: "\2192";
        position: absolute;
        right: 28px;

        color: #d65fa2;
        font-size: 18px;
        line-height: 1;

        transition: transform 180ms ease;
    }

    .st-header-menu nav > ul.menu > li > a:hover,
    .st-header-menu nav > ul.menu > li > a:focus,
    .st-header-menu nav > ul.menu > li.current-menu-item > a {
        padding-left: 34px !important;
        color: #ffffff !important;
        background: rgba(255, 255, 255, .06) !important;
    }

    .st-header-menu nav > ul.menu > li > a:hover::after,
    .st-header-menu nav > ul.menu > li > a:focus::after {
        transform: translateX(4px);
    }


    /* --------------------------------------------------------
       ALLOW PANEL TO ESCAPE BB HEADER COLUMNS
       -------------------------------------------------------- */

    .st-header,
    .st-header > .fl-row-content-wrap,
    .st-header > .fl-row-content-wrap > .fl-row-content,
    .st-header .fl-col-group,
    .st-header-nav-col,
    .st-header-nav-col .fl-col-content,
    .st-header-menu,
    .st-header-menu .fl-module-content,
    .st-header-menu .fl-menu {
        overflow: visible !important;
    }

    .st-header-menu,
    .st-header-menu .fl-module-content,
    .st-header-menu .fl-menu {
        position: relative;
    }

}


/* ------------------------------------------------------------
   PHONE
   Full-width navigation panel
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    .st-header-menu nav > ul.menu {
        position: fixed !important;
        top: 72px !important;
        right: 0 !important;
        left: 0 !important;

        width: 100vw !important;
        max-width: none !important;
        padding: 18px 0 24px !important;
    }

    .st-header-menu nav > ul.menu > li > a {
        min-height: 60px;
        padding-left: 24px !important;
        padding-right: 54px !important;
        font-size: 15px !important;
    }

    .st-header-menu nav > ul.menu > li > a::after {
        right: 24px;
    }

    .st-header-menu nav > ul.menu > li > a:hover,
    .st-header-menu nav > ul.menu > li > a:focus,
    .st-header-menu nav > ul.menu > li.current-menu-item > a {
        padding-left: 30px !important;
    }

}


/* ------------------------------------------------------------
   SMALL PHONE
   Match compact SkyTech header height
   ------------------------------------------------------------ */

@media (max-width: 480px) {

    .st-header-menu nav > ul.menu {
        top: 72px !important;
    }

}


/* ============================================================
   END ST-HEADER-3
   ============================================================ */
   
/* ============================================================
   SKYTECH PROJECTS
   ST-HEADER-3.3
   MOBILE NAVIGATION FINAL POLISH
   ============================================================ */

@media (max-width: 991px) {

    /* Remove UI-style box from hamburger.
       Pink icon alone becomes the control. */

    .st-header-menu .fl-menu-mobile-toggle {
        width: 46px;
        height: 46px;
        padding: 11px !important;

        border: 0 !important;
        outline: 0;
        box-shadow: none !important;

        background: transparent !important;
    }

    .st-header-menu .fl-menu-mobile-toggle:hover,
    .st-header-menu .fl-menu-mobile-toggle:focus,
    .st-header-menu .fl-menu-mobile-toggle:active {
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

}


/* ------------------------------------------------------------
   PHONE
   Keep complete white header visible above navigation
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    .st-header-menu nav > ul.menu {
        top: 188px !important;
    }

}


/* ============================================================
   END ST-HEADER-3.3
   ============================================================ */
   
/* ============================================================
   SKYTECH PROJECTS
   ST-HEADER-3.4
   MOBILE NAV ACTIVE + TOGGLE FINISH
   ============================================================ */

@media (max-width: 991px) {

    /* --------------------------------------------------------
       HAMBURGER
       Remove Beaver click/focus box while preserving
       accessible keyboard focus
       -------------------------------------------------------- */

    .st-header-menu .fl-menu-mobile-toggle,
    .st-header-menu .fl-menu-mobile-toggle:hover,
    .st-header-menu .fl-menu-mobile-toggle:focus,
    .st-header-menu .fl-menu-mobile-toggle:active {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .st-header-menu .fl-menu-mobile-toggle:focus-visible {
        outline: 2px solid #d65fa2 !important;
        outline-offset: 4px !important;
    }


    /* --------------------------------------------------------
       CURRENT PAGE
       -------------------------------------------------------- */

    .st-header-menu nav > ul.menu > li.current-menu-item > a,
    .st-header-menu nav > ul.menu > li.current-menu-ancestor > a {
        padding-left: 34px !important;
        color: #d65fa2 !important;
        background: rgba(255, 255, 255, .045) !important;
    }

    .st-header-menu nav > ul.menu > li.current-menu-item > a::before,
    .st-header-menu nav > ul.menu > li.current-menu-ancestor > a::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 20px;

        width: 3px;
        height: 22px;

        background: #d65fa2;
        transform: translateY(-50%);
    }

}


/* ============================================================
   END ST-HEADER-3.4
   ============================================================ */
   
/* ============================================================
   SKYTECH PROJECTS
   ST-HEADER-3.5
   MOBILE NAVIGATION NATURAL FLOW
   ============================================================ */

@media (max-width: 767px) {

    /*
     * Return the opened phone navigation to document flow.
     * This prevents the page scrolling behind a fixed menu
     * and keeps every navigation item accessible on short screens.
     */

    .st-header-menu nav > ul.menu {
        position: absolute !important;

        top: calc(100% + 13px) !important;
        right: 0 !important;
        left: auto !important;

        width: 100vw !important;
        max-width: 100vw !important;

        margin: 0 !important;
    }

}


/* ============================================================
   END ST-HEADER-3.5
   ============================================================ */

/* ============================================================
   SKYTECH PROJECTS
   ST-HEADER-3.6
   PREMIUM NAVIGATION HOVER
   Pointer devices only
   ============================================================ */

@media (max-width: 991px) and (hover: hover) and (pointer: fine) {

    .st-header-menu nav > ul.menu > li > a {
        transition:
            color 180ms ease,
            background-color 180ms ease,
            padding-left 180ms ease;
    }

    .st-header-menu nav > ul.menu > li:not(.current-menu-item) > a:hover,
    .st-header-menu nav > ul.menu > li:not(.current-menu-ancestor) > a:hover {
        padding-left: 34px !important;
        color: #d65fa2 !important;
        background: rgba(255, 255, 255, .045) !important;
    }

    .st-header-menu nav > ul.menu > li > a:hover::after {
        transform: translateX(5px);
    }

}


/* ============================================================
   END ST-HEADER-3.6
   ============================================================ */

/* ============================================================
   SKYTECH PROJECTS
   ST-SERVICES-1B
   SERVICES PAGE — FULL PAGE STYLING
   ============================================================ */


/* ============================================================
   PAGE FOUNDATION
   ============================================================ */

.st-services-page {
    --st-pink: #d65fa2;
    --st-dark: #151719;
    --st-navy: #203b59;
    --st-blue: #4288c9;
    --st-light: #f4f5f6;
    --st-white: #ffffff;
    --st-text: #252a2e;
    --st-muted: #69727a;

    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
    color: var(--st-text);
}

.st-services-page *,
.st-services-page *::before,
.st-services-page *::after {
    box-sizing: border-box;
}

.st-services-page h1,
.st-services-page h2,
.st-services-page h3,
.st-services-page p {
    margin-top: 0;
}

.st-services-page a {
    text-decoration: none;
}

.st-services-page .st-page-shell {
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;
}

.st-services-page .st-eyebrow {
    margin: 0 0 20px;
    color: var(--st-pink);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.st-services-page h2 {
    margin-bottom: 0;
    font-size: clamp(42px, 4.1vw, 66px);
    line-height: .95;
    letter-spacing: -.025em;
}

.st-services-page h3 {
    line-height: 1.05;
}

.st-services-page .st-btn {
    display: inline-flex;
    min-height: 52px;
    padding: 0 27px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: .2s ease;
}

.st-services-page .st-btn-primary {
    background: var(--st-pink);
    color: #fff !important;
}

.st-services-page .st-btn-primary:hover,
.st-services-page .st-btn-primary:focus {
    background: #c74e94;
}

.st-services-page .st-btn-dark {
    background: var(--st-dark);
    color: #fff !important;
}

.st-services-page .st-btn-dark:hover,
.st-services-page .st-btn-dark:focus {
    background: var(--st-navy);
}

.st-services-page .st-btn-light {
    background: #fff;
    color: var(--st-dark) !important;
}

.st-services-page .st-btn-light:hover,
.st-services-page .st-btn-light:focus {
    background: var(--st-pink);
    color: #fff !important;
}

.st-services-page .st-text-link {
    display: inline-block;
    color: var(--st-blue);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.st-services-page .st-text-link::after {
    content: " →";
    display: inline-block;
    transition: transform .2s ease;
}

.st-services-page .st-text-link:hover::after,
.st-services-page .st-text-link:focus::after {
    transform: translateX(5px);
}


/* ============================================================
   HERO
   ============================================================ */

.st-services-hero {
    position: relative;
    background: var(--st-dark);
    color: #fff;
}

.st-services-hero-grid {
    min-height: 650px;
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    align-items: stretch;
}

.st-services-hero-copy {
    position: relative;
    z-index: 2;
    padding: 105px 70px 100px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.st-services-hero .st-eyebrow {
    color: var(--st-pink);
}

.st-services-hero h1 {
    max-width: 570px;
    margin: 0 0 28px;
    color: #fff;
    font-size: clamp(58px, 5.3vw, 80px);
    line-height: .9;
    letter-spacing: -.025em;
}

.st-services-hero-lead {
    max-width: 570px;
    margin: 0 0 34px;
    color: rgba(255,255,255,.78);
    font-size: 18px;
    line-height: 1.6;
}

.st-services-hero-actions {
    display: flex;
    align-items: center;
    gap: 26px;
}

.st-services-hero .st-text-link {
    color: #fff;
}

.st-services-hero-image {
    position: relative;
    min-height: 650px;
    overflow: hidden;
}

.st-services-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(21,23,25,.42) 0%,
            rgba(21,23,25,.08) 32%,
            rgba(21,23,25,0) 62%
        );
    pointer-events: none;
}

.st-services-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 650px;
    object-fit: cover;
    object-position: center;
}


/* ============================================================
   POSITIONING
   ============================================================ */

.st-services-positioning {
    padding: 115px 0;
    background: #fff;
}

.st-services-positioning-grid {
    display: grid;
    grid-template-columns: 1fr .82fr;
    gap: 110px;
    align-items: start;
}

.st-services-positioning-heading h2 span {
    color: var(--st-pink);
}

.st-services-positioning-copy {
    max-width: 500px;
    padding-top: 32px;
}

.st-services-positioning-copy p {
    margin-bottom: 20px;
    color: var(--st-muted);
    font-size: 16px;
    line-height: 1.7;
}

.st-services-positioning-copy .st-services-positioning-lead {
    color: var(--st-dark);
    font-size: 21px;
    line-height: 1.5;
    font-weight: 700;
}


/* ============================================================
   CAPABILITIES
   ============================================================ */

.st-services-capabilities {
    padding: 110px 0;
    background: var(--st-light);
}

.st-services-section-head {
    display: grid;
    grid-template-columns: 1fr .72fr;
    gap: 100px;
    align-items: end;
    margin-bottom: 65px;
}

.st-services-section-head > p {
    max-width: 470px;
    margin: 0 0 5px;
    color: var(--st-muted);
    font-size: 16px;
    line-height: 1.65;
}

.st-capability-list {
    border-top: 1px solid #d9dde0;
}

.st-capability-row {
    min-height: 180px;
    padding: 35px 0;
    display: grid;
    grid-template-columns: 70px 1.08fr .92fr;
    gap: 40px;
    align-items: center;
    border-bottom: 1px solid #d9dde0;
}

.st-capability-number {
    align-self: start;
    padding-top: 5px;
    color: var(--st-pink);
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .08em;
}

.st-capability-main {
    max-width: 500px;
}

.st-capability-main h3 {
    margin: 0 0 12px;
    color: var(--st-dark);
    font-size: 27px;
    letter-spacing: -.01em;
}

.st-capability-main p {
    margin: 0;
    color: var(--st-muted);
    font-size: 15px;
    line-height: 1.6;
}

.st-capability-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 25px;
}

.st-capability-detail span {
    position: relative;
    padding-left: 17px;
    color: var(--st-text);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}

.st-capability-detail span::before {
    content: "";
    position: absolute;
    top: .6em;
    left: 0;
    width: 6px;
    height: 2px;
    background: var(--st-pink);
}

@media (hover: hover) and (pointer: fine) {

    .st-capability-row {
        transition:
            padding-left .2s ease,
            padding-right .2s ease,
            background-color .2s ease;
    }

    .st-capability-row:hover {
        padding-left: 18px;
        padding-right: 18px;
        background: #fff;
    }
}


/* ============================================================
   FEATURE
   ============================================================ */

.st-services-feature {
    background: var(--st-dark);
    color: #fff;
}

.st-services-feature-grid {
    min-height: 690px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
}

.st-services-feature-image {
    position: relative;
    min-height: 690px;
    overflow: hidden;
}

.st-services-feature-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 690px;
    object-fit: cover;
    object-position: center;
}

.st-services-feature-copy {
    padding: 105px 0 105px 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.st-services-feature-copy h2 {
    margin-bottom: 32px;
    color: #fff;
}

.st-services-feature-copy > p:not(.st-eyebrow) {
    max-width: 540px;
    margin-bottom: 20px;
    color: rgba(255,255,255,.72);
    font-size: 16px;
    line-height: 1.7;
}

.st-services-feature-copy .st-text-link {
    margin-top: 12px;
    color: #fff;
}


/* ============================================================
   APPROACH
   ============================================================ */

.st-services-approach {
    padding: 115px 0;
    background: #fff;
}

.st-services-approach-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 115px;
    align-items: start;
}

.st-services-approach-intro {
    position: sticky;
    top: 120px;
}

.st-services-approach-list {
    border-top: 1px solid #dfe2e4;
}

.st-services-approach-item {
    padding: 38px 0;
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 25px;
    border-bottom: 1px solid #dfe2e4;
}

.st-services-approach-number {
    padding-top: 4px;
    color: var(--st-pink);
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
}

.st-services-approach-item h3 {
    margin: 0 0 10px;
    color: var(--st-dark);
    font-size: 25px;
}

.st-services-approach-item p {
    max-width: 570px;
    margin: 0;
    color: var(--st-muted);
    font-size: 15px;
    line-height: 1.65;
}


/* ============================================================
   COMMERCIAL PROOF
   ============================================================ */

.st-services-proof {
    min-height: 610px;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    background: var(--st-navy);
}

.st-services-proof-image {
    min-height: 610px;
    overflow: hidden;
}

.st-services-proof-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 610px;
    object-fit: cover;
    object-position: center;
}

.st-services-proof-panel {
    padding: 90px max(55px, calc((100vw - 1180px) / 2)) 90px 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}

.st-services-proof-panel h2 {
    margin-bottom: 30px;
    color: #fff;
}

.st-services-proof-panel > p:not(.st-eyebrow) {
    max-width: 490px;
    margin-bottom: 19px;
    color: rgba(255,255,255,.76);
    font-size: 16px;
    line-height: 1.68;
}

.st-services-proof-panel .st-btn {
    align-self: flex-start;
    margin-top: 14px;
}


/* ============================================================
   FINAL CTA
   ============================================================ */

.st-services-cta {
    padding: 90px 0;
    background: var(--st-pink);
}

.st-services-cta .st-eyebrow {
    color: #fff;
    opacity: .8;
}

.st-services-cta-grid {
    display: grid;
    grid-template-columns: 1fr .72fr;
    gap: 100px;
    align-items: center;
}

.st-services-cta h2 {
    color: #fff;
}

.st-services-cta-copy {
    max-width: 440px;
}

.st-services-cta-copy > p {
    margin: 0 0 26px;
    color: #fff;
    font-size: 18px;
    line-height: 1.55;
}

.st-services-cta-actions {
    display: flex;
    align-items: center;
    gap: 25px;
}

.st-services-cta .st-text-link-dark {
    color: var(--st-dark);
}


/* ============================================================
   MEDIUM / TABLET
   769px - 992px
   ============================================================ */

@media (min-width: 769px) and (max-width: 992px) {

    .st-services-page .st-page-shell {
        width: calc(100% - 64px);
    }

    .st-services-hero-grid {
        min-height: 570px;
        grid-template-columns: 1fr 1fr;
    }

    .st-services-hero-copy {
        padding: 75px 45px 75px 0;
    }

    .st-services-hero h1 {
        font-size: 55px;
    }

    .st-services-hero-lead {
        font-size: 16px;
    }

    .st-services-hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
    }

    .st-services-hero-image,
    .st-services-hero-image img {
        min-height: 570px;
    }

    .st-services-positioning,
    .st-services-capabilities,
    .st-services-approach {
        padding: 85px 0;
    }

    .st-services-positioning-grid {
        gap: 55px;
    }

    .st-services-positioning-copy {
        padding-top: 15px;
    }

    .st-services-section-head {
        gap: 55px;
    }

    .st-capability-row {
        grid-template-columns: 45px 1fr;
        gap: 20px 25px;
    }

    .st-capability-detail {
        grid-column: 2;
    }

    .st-services-feature-grid {
        min-height: 590px;
        grid-template-columns: 1fr 1fr;
    }

    .st-services-feature-image,
    .st-services-feature-image img {
        min-height: 590px;
    }

    .st-services-feature-copy {
        padding: 70px 0 70px 55px;
    }

    .st-services-approach-grid {
        gap: 65px;
    }

    .st-services-approach-intro {
        position: static;
    }

    .st-services-proof {
        min-height: 540px;
        grid-template-columns: 1fr 1fr;
    }

    .st-services-proof-image,
    .st-services-proof-image img {
        min-height: 540px;
    }

    .st-services-proof-panel {
        padding: 65px 40px 65px 50px;
    }

    .st-services-cta-grid {
        gap: 55px;
    }
}


/* ============================================================
   MOBILE
   <= 768px
   ============================================================ */

@media (max-width: 768px) {

    .st-services-page .st-page-shell {
        width: calc(100% - 40px);
    }

    .st-services-page .st-eyebrow {
        margin-bottom: 14px;
        font-size: 10px;
    }

    .st-services-page h2 {
        font-size: 39px;
    }


    /* HERO */

    .st-services-hero .st-page-shell {
        width: 100%;
    }

    .st-services-hero-grid {
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .st-services-hero-copy {
        order: 2;
        padding: 50px 20px 60px;
    }

    .st-services-hero-image {
        order: 1;
        min-height: 0;
        height: 360px;
    }

    .st-services-hero-image img {
        min-height: 0;
        height: 100%;
        object-position: center;
    }

    .st-services-hero-image::after {
        background:
            linear-gradient(
                0deg,
                rgba(21,23,25,.38) 0%,
                rgba(21,23,25,0) 55%
            );
    }

    .st-services-hero h1 {
        margin-bottom: 22px;
        font-size: clamp(45px, 13vw, 58px);
    }

    .st-services-hero-lead {
        margin-bottom: 27px;
        font-size: 16px;
        line-height: 1.55;
    }

    .st-services-hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
    }


    /* POSITIONING */

    .st-services-positioning {
        padding: 68px 0;
    }

    .st-services-positioning-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .st-services-positioning-copy {
        max-width: none;
        padding-top: 0;
    }

    .st-services-positioning-copy .st-services-positioning-lead {
        font-size: 19px;
    }


    /* CAPABILITIES */

    .st-services-capabilities {
        padding: 68px 0;
    }

    .st-services-section-head {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 42px;
    }

    .st-services-section-head > p {
        margin: 0;
    }

    .st-capability-row {
        min-height: 0;
        padding: 30px 0;
        grid-template-columns: 35px 1fr;
        gap: 18px;
        align-items: start;
    }

    .st-capability-main h3 {
        font-size: 24px;
    }

    .st-capability-detail {
        grid-column: 2;
        grid-template-columns: 1fr 1fr;
        gap: 10px 18px;
    }

    .st-capability-detail span {
        font-size: 12px;
    }


    /* FEATURE */

    .st-services-feature-grid {
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .st-services-feature-image {
        min-height: 0;
        height: 470px;
    }

    .st-services-feature-image img {
        min-height: 0;
        height: 100%;
        object-position: center;
    }

    .st-services-feature-copy {
        padding: 62px 20px 68px;
    }

    .st-services-feature-copy h2 {
        margin-bottom: 25px;
    }


    /* APPROACH */

    .st-services-approach {
        padding: 68px 0;
    }

    .st-services-approach-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .st-services-approach-intro {
        position: static;
    }

    .st-services-approach-item {
        padding: 30px 0;
        grid-template-columns: 38px 1fr;
        gap: 18px;
    }

    .st-services-approach-item h3 {
        font-size: 23px;
    }


    /* PROOF */

    .st-services-proof {
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .st-services-proof-image {
        min-height: 0;
        height: 360px;
    }

    .st-services-proof-image img {
        min-height: 0;
        height: 100%;
    }

    .st-services-proof-panel {
        padding: 62px 20px 68px;
    }


    /* CTA */

    .st-services-cta {
        padding: 65px 0;
    }

    .st-services-cta-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .st-services-cta-copy {
        max-width: none;
    }

    .st-services-cta-copy > p {
        font-size: 16px;
    }

    .st-services-cta-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
    }
}


/* ============================================================
   NARROW MOBILE
   <= 480px
   ============================================================ */

@media (max-width: 480px) {

    .st-services-page .st-page-shell {
        width: calc(100% - 32px);
    }

    .st-services-page h2 {
        font-size: 35px;
        line-height: .96;
    }

    .st-services-hero-image {
        height: 300px;
    }

    .st-services-hero-copy {
        padding: 46px 16px 55px;
    }

    .st-services-hero h1 {
        font-size: 43px;
    }

    .st-services-hero-lead {
        font-size: 15px;
    }

    .st-services-positioning,
    .st-services-capabilities,
    .st-services-approach {
        padding: 58px 0;
    }

    .st-capability-row {
        grid-template-columns: 28px 1fr;
        gap: 15px;
    }

    .st-capability-main h3 {
        font-size: 22px;
    }

    .st-capability-detail {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .st-services-feature-image {
        height: 400px;
    }

    .st-services-feature-copy {
        padding: 55px 16px 60px;
    }

    .st-services-proof-image {
        height: 300px;
    }

    .st-services-proof-panel {
        padding: 55px 16px 60px;
    }

    .st-services-cta {
        padding: 58px 0;
    }

    .st-services-cta .st-btn {
        width: 100%;
    }
}


/* ============================================================
   END ST-SERVICES-1B
   ============================================================ */

/* ============================================================
   ST-ABOUT-1B — ABOUT PAGE
   SkyTech Projects
   ============================================================ */

.st-about-page {
  --st-pink: #d65fa2;
  --st-dark: #151719;
  --st-navy: #203b59;
  --st-blue: #4288c9;
  --st-light: #f4f5f6;
  --st-text: #252a2e;
  --st-muted: #69727a;
  --st-white: #ffffff;
  --st-border: rgba(21, 23, 25, 0.13);

  background: var(--st-white);
  color: var(--st-text);
  overflow: hidden;
}

.st-about-page *,
.st-about-page *::before,
.st-about-page *::after {
  box-sizing: border-box;
}

.st-about-page h1,
.st-about-page h2,
.st-about-page h3,
.st-about-page p {
  margin-top: 0;
}

.st-about-page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.st-about-shell {
  width: min(1180px, calc(100% - 80px));
  margin: 0 auto;
}


/* ------------------------------------------------------------
   COMMON TYPOGRAPHY
   ------------------------------------------------------------ */

.st-about-eyebrow {
  margin-bottom: 22px;
  color: var(--st-pink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.st-about-page h2 {
  margin-bottom: 0;
  color: var(--st-dark);
  font-size: clamp(42px, 4.4vw, 67px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.st-about-page h2 span {
  color: var(--st-pink);
}

.st-about-page p {
  font-size: 17px;
  line-height: 1.75;
}

.st-about-copy-lead {
  color: var(--st-dark);
  font-size: 21px !important;
  font-weight: 600;
  line-height: 1.55 !important;
}


/* ------------------------------------------------------------
   BUTTONS / LINKS
   ------------------------------------------------------------ */

.st-about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 29px;
  border: 0;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  transition:
    transform 0.22s ease,
    background-color 0.22s ease,
    color 0.22s ease;
}

.st-about-btn-pink {
  background: var(--st-pink);
  color: var(--st-white) !important;
}

.st-about-btn-dark {
  background: var(--st-dark);
  color: var(--st-white) !important;
}

.st-about-text-link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 14px;
  color: inherit !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.st-about-text-link span {
  color: var(--st-pink);
  font-size: 21px;
  transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .st-about-btn:hover {
    transform: translateY(-2px);
  }

  .st-about-btn-pink:hover {
    background: #c95395;
  }

  .st-about-btn-dark:hover {
    background: #292c30;
  }

  .st-about-text-link:hover span {
    transform: translateX(5px);
  }
}

.st-about-btn:focus-visible,
.st-about-text-link:focus-visible,
.st-about-cta-phone:focus-visible {
  outline: 3px solid var(--st-blue);
  outline-offset: 4px;
}


/* ============================================================
   HERO
   ============================================================ */

.st-about-hero {
  background: var(--st-dark);
  color: var(--st-white);
}

.st-about-hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  width: 100%;
  max-width: none;
  min-height: 650px;
}

.st-about-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 86px max(54px, calc((100vw - 1180px) / 2));
  padding-right: 65px;
}

.st-about-hero-copy .st-about-eyebrow {
  margin-bottom: 26px;
}

.st-about-hero h1 {
  margin: 0 0 32px;
  color: var(--st-white);
  font-size: clamp(57px, 5.7vw, 88px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.055em;
}

.st-about-hero-lead {
  max-width: 520px;
  margin-bottom: 34px;
  color: rgba(255, 255, 255, 0.77);
  font-size: 19px !important;
  line-height: 1.65 !important;
}

.st-about-hero-image {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  background: #272a2d;
}

.st-about-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(21, 23, 25, 0.28) 0%,
      rgba(21, 23, 25, 0) 28%
    );
}


/* ============================================================
   TEMPORARY IMAGE PLACEHOLDERS
   ============================================================ */

.st-about-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: 30px;
  background:
    linear-gradient(
      135deg,
      #34383c 0%,
      #222529 100%
    );
  color: rgba(255, 255, 255, 0.42);
  text-align: center;
}

.st-about-image-placeholder span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
}


/* ============================================================
   WHO WE ARE
   ============================================================ */

.st-about-intro {
  padding: 120px 0;
  background: var(--st-white);
}

.st-about-intro-grid {
  display: grid;
  grid-template-columns: 1.03fr 0.8fr;
  gap: 110px;
  align-items: start;
}

.st-about-intro-copy {
  padding-top: 39px;
}

.st-about-intro-copy p:not(.st-about-copy-lead) {
  margin-bottom: 20px;
  color: var(--st-muted);
}

.st-about-intro-copy p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   DIRECTORS
   ============================================================ */

.st-about-directors {
  padding: 115px 0 125px;
  background: var(--st-light);
}

.st-about-section-heading {
  max-width: 860px;
  margin-bottom: 75px;
}

.st-about-director-row {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  min-height: 590px;
  margin-bottom: 44px;
  background: var(--st-white);
}

.st-about-director-row:last-child {
  margin-bottom: 0;
}

.st-about-director-row-reverse .st-about-director-image {
  order: 2;
}

.st-about-director-row-reverse .st-about-director-copy {
  order: 1;
}

.st-about-director-image {
  min-height: 590px;
  overflow: hidden;
  background: #282b2e;
}

.st-about-director-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 68px 75px;
}

.st-about-director-number {
  margin-bottom: 27px !important;
  color: var(--st-pink);
  font-size: 13px !important;
  font-weight: 800;
  line-height: 1 !important;
  letter-spacing: 0.13em;
}

.st-about-director-copy h3 {
  margin-bottom: 4px;
  color: var(--st-dark);
  font-size: clamp(44px, 4vw, 64px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.st-about-director-role {
  margin-bottom: 30px !important;
  color: var(--st-pink);
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.2 !important;
  letter-spacing: 0.15em;
}

.st-about-director-copy > p:not(
  .st-about-director-number,
  .st-about-director-role
) {
  max-width: 570px;
  margin-bottom: 17px;
  color: var(--st-muted);
}

.st-about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 17px;
}

.st-about-tags span {
  padding: 9px 12px 8px;
  border: 1px solid var(--st-border);
  color: var(--st-dark);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
}


/* ============================================================
   EXPERIENCE / STATS BAND
   ============================================================ */

.st-about-experience {
  padding: 110px 0 105px;
  background: var(--st-navy);
  color: var(--st-white);
}

.st-about-experience .st-about-eyebrow {
  color: var(--st-pink);
}

.st-about-experience h2 {
  color: var(--st-white);
}

.st-about-experience-intro {
  max-width: 870px;
  margin-bottom: 73px;
}

.st-about-experience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.st-about-stat {
  min-height: 190px;
  padding: 39px 28px 35px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.st-about-stat:first-child {
  padding-left: 0;
}

.st-about-stat:last-child {
  border-right: 0;
}

.st-about-stat strong {
  display: block;
  margin-bottom: 18px;
  color: var(--st-pink);
  font-size: clamp(43px, 4vw, 63px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.st-about-stat span {
  color: rgba(255, 255, 255, 0.77);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0.1em;
}


/* ============================================================
   TEAM
   ============================================================ */

.st-about-team {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  min-height: 680px;
  background: var(--st-dark);
  color: var(--st-white);
}

.st-about-team-image {
  min-height: 680px;
  overflow: hidden;
  background: #282b2e;
}

.st-about-team-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:
    85px
    max(55px, calc((100vw - 1180px) / 2))
    85px
    80px;
}

.st-about-team-panel h2 {
  margin-bottom: 34px;
  color: var(--st-white);
}

.st-about-team-panel > p:not(.st-about-eyebrow) {
  max-width: 570px;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.7);
}

.st-about-team-panel .st-about-copy-lead {
  color: var(--st-white) !important;
}

.st-about-team-panel .st-about-text-link {
  color: var(--st-white) !important;
}


/* ============================================================
   APPROACH
   ============================================================ */

.st-about-approach {
  padding: 120px 0;
  background: var(--st-white);
}

.st-about-approach-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 105px;
  align-items: start;
}

.st-about-approach-heading {
  position: sticky;
  top: 130px;
}

.st-about-principles {
  border-top: 1px solid var(--st-border);
}

.st-about-principle {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 25px;
  padding: 34px 0 36px;
  border-bottom: 1px solid var(--st-border);
}

.st-about-principle-number {
  padding-top: 4px;
  color: var(--st-pink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.st-about-principle h3 {
  margin-bottom: 11px;
  color: var(--st-dark);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.st-about-principle p {
  max-width: 590px;
  margin-bottom: 0;
  color: var(--st-muted);
  font-size: 16px;
  line-height: 1.7;
}


/* ============================================================
   COMMERCIAL PROOF
   ============================================================ */

.st-about-proof {
  padding: 115px 0;
  background: var(--st-light);
}

.st-about-proof-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 110px;
  align-items: center;
}

.st-about-proof-copy h2 {
  margin-bottom: 32px;
}

.st-about-proof-copy > p:not(.st-about-eyebrow) {
  max-width: 500px;
  margin-bottom: 23px;
  color: var(--st-muted);
}

.st-about-proof-list {
  border-top: 1px solid var(--st-border);
}

.st-about-proof-list > div {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  align-items: center;
  min-height: 78px;
  border-bottom: 1px solid var(--st-border);
}

.st-about-proof-list span {
  color: var(--st-pink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.st-about-proof-list p {
  margin: 0;
  color: var(--st-dark);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.06em;
}


/* ============================================================
   FINAL CTA
   ============================================================ */

.st-about-cta {
  padding: 105px 0;
  background: var(--st-pink);
  color: var(--st-dark);
}

.st-about-cta .st-about-eyebrow {
  color: var(--st-dark);
}

.st-about-cta-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.75fr;
  gap: 110px;
  align-items: center;
}

.st-about-cta h2 {
  color: var(--st-dark);
}

.st-about-cta-copy > p {
  max-width: 480px;
  margin-bottom: 29px;
  color: rgba(21, 23, 25, 0.76);
  font-size: 18px;
}

.st-about-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 27px;
  align-items: center;
}

.st-about-cta-phone {
  color: var(--st-dark) !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 992px) and (min-width: 769px) {

  .st-about-shell {
    width: min(100% - 56px, 1180px);
  }

  .st-about-hero-grid {
    grid-template-columns: 0.95fr 1.05fr;
    min-height: 590px;
  }

  .st-about-hero-copy {
    padding: 70px 45px;
  }

  .st-about-hero h1 {
    font-size: 58px;
  }

  .st-about-hero-image {
    min-height: 590px;
  }

  .st-about-intro {
    padding: 95px 0;
  }

  .st-about-intro-grid {
    gap: 65px;
  }

  .st-about-directors {
    padding: 95px 0;
  }

  .st-about-director-row {
    grid-template-columns: 0.85fr 1.15fr;
    min-height: 540px;
  }

  .st-about-director-image {
    min-height: 540px;
  }

  .st-about-director-copy {
    padding: 50px 45px;
  }

  .st-about-experience {
    padding: 90px 0;
  }

  .st-about-stat {
    padding-left: 18px;
    padding-right: 18px;
  }

  .st-about-team {
    grid-template-columns: 1fr 1fr;
    min-height: 620px;
  }

  .st-about-team-image {
    min-height: 620px;
  }

  .st-about-team-panel {
    padding: 65px 45px;
  }

  .st-about-approach {
    padding: 95px 0;
  }

  .st-about-approach-grid {
    gap: 65px;
  }

  .st-about-proof {
    padding: 95px 0;
  }

  .st-about-proof-grid {
    gap: 65px;
  }

  .st-about-cta {
    padding: 90px 0;
  }

  .st-about-cta-grid {
    gap: 65px;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

  .st-about-shell {
    width: calc(100% - 44px);
  }

  .st-about-page h2 {
    font-size: 40px;
    line-height: 0.98;
  }

  .st-about-eyebrow {
    margin-bottom: 17px;
    font-size: 11px;
  }

  .st-about-page p {
    font-size: 16px;
  }

  .st-about-copy-lead {
    font-size: 18px !important;
  }


  /* Hero */

  .st-about-hero-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
  }

  .st-about-hero-image {
    order: 1;
    min-height: 360px;
    height: 360px;
  }

  .st-about-hero-copy {
    order: 2;
    padding: 58px 22px 67px;
  }

  .st-about-hero h1 {
    margin-bottom: 25px;
    font-size: 53px;
  }

  .st-about-hero-lead {
    margin-bottom: 29px;
    font-size: 17px !important;
  }

  .st-about-hero-image::after {
    background:
      linear-gradient(
        180deg,
        rgba(21, 23, 25, 0) 65%,
        rgba(21, 23, 25, 0.18) 100%
      );
  }


  /* Intro */

  .st-about-intro {
    padding: 76px 0 80px;
  }

  .st-about-intro-grid {
    grid-template-columns: 1fr;
    gap: 37px;
  }

  .st-about-intro-copy {
    padding-top: 0;
  }


  /* Directors */

  .st-about-directors {
    padding: 76px 0 82px;
  }

  .st-about-section-heading {
    margin-bottom: 47px;
  }

  .st-about-director-row,
  .st-about-director-row-reverse {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 28px;
  }

  .st-about-director-row-reverse .st-about-director-image {
    order: 1;
  }

  .st-about-director-row-reverse .st-about-director-copy {
    order: 2;
  }

  .st-about-director-image {
    order: 1;
    min-height: 430px;
    height: 430px;
  }

  .st-about-director-copy {
    order: 2;
    padding: 45px 29px 48px;
  }

  .st-about-director-number {
    margin-bottom: 22px !important;
  }

  .st-about-director-copy h3 {
    font-size: 47px;
  }

  .st-about-tags {
    margin-top: 14px;
  }


  /* Experience */

  .st-about-experience {
    padding: 78px 0;
  }

  .st-about-experience-intro {
    margin-bottom: 49px;
  }

  .st-about-experience-grid {
    grid-template-columns: 1fr 1fr;
  }

  .st-about-stat,
  .st-about-stat:first-child {
    min-height: 165px;
    padding: 29px 20px;
  }

  .st-about-stat:nth-child(2) {
    border-right: 0;
  }

  .st-about-stat:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }

  .st-about-stat strong {
    font-size: 44px;
  }


  /* Team */

  .st-about-team {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .st-about-team-image {
    min-height: 440px;
    height: 440px;
  }

  .st-about-team-panel {
    padding: 65px 22px 73px;
  }

  .st-about-team-panel h2 {
    margin-bottom: 28px;
  }


  /* Approach */

  .st-about-approach {
    padding: 78px 0 82px;
  }

  .st-about-approach-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .st-about-approach-heading {
    position: static;
  }

  .st-about-principle {
    grid-template-columns: 42px 1fr;
    gap: 15px;
    padding: 28px 0 30px;
  }


  /* Proof */

  .st-about-proof {
    padding: 78px 0 82px;
  }

  .st-about-proof-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .st-about-proof-copy h2 {
    margin-bottom: 26px;
  }


  /* CTA */

  .st-about-cta {
    padding: 74px 0 80px;
  }

  .st-about-cta-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .st-about-cta-copy > p {
    margin-bottom: 26px;
    font-size: 17px;
  }
}


/* ============================================================
   NARROW MOBILE
   ============================================================ */

@media (max-width: 480px) {

  .st-about-shell {
    width: calc(100% - 32px);
  }

  .st-about-page h2 {
    font-size: 35px;
  }

  .st-about-hero-image {
    min-height: 300px;
    height: 300px;
  }

  .st-about-hero-copy {
    padding: 50px 16px 60px;
  }

  .st-about-hero h1 {
    font-size: 45px;
  }

  .st-about-director-image {
    min-height: 390px;
    height: 390px;
  }

  .st-about-director-copy {
    padding: 40px 23px 43px;
  }

  .st-about-director-copy h3 {
    font-size: 43px;
  }

  .st-about-stat,
  .st-about-stat:first-child {
    padding: 26px 14px;
  }

  .st-about-stat strong {
    font-size: 39px;
  }

  .st-about-stat span {
    font-size: 9px;
  }

  .st-about-team-image {
    min-height: 390px;
    height: 390px;
  }

  .st-about-team-panel {
    padding-left: 16px;
    padding-right: 16px;
  }

  .st-about-principle {
    grid-template-columns: 36px 1fr;
  }

  .st-about-proof-list > div {
    grid-template-columns: 42px 1fr;
  }

  .st-about-cta-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   SKYTECH PROJECTS
   ST-PROJECTS-1B
   Projects page — layout, placeholders + responsive
   ========================================================= */

.st-projects-page {
    --st-pink: #d65fa2;
    --st-dark: #151719;
    --st-navy: #203b59;
    --st-blue: #4288c9;
    --st-light: #f4f5f6;
    --st-text: #252a2e;
    --st-muted: #69727a;
    --st-white: #ffffff;
    --st-border: #e3e6e8;
    --st-container: 1280px;
    --st-gutter: 32px;

    background: var(--st-white);
    color: var(--st-text);
    overflow: hidden;
}

.st-projects-page *,
.st-projects-page *::before,
.st-projects-page *::after {
    box-sizing: border-box;
}

.st-projects-page a {
    text-decoration: none;
}

.st-projects-container {
    width: min(
        calc(100% - (var(--st-gutter) * 2)),
        var(--st-container)
    );
    margin-inline: auto;
}


/* =========================================================
   SHARED TYPOGRAPHY
   ========================================================= */

.st-projects-eyebrow {
    margin: 0 0 20px;
    color: var(--st-pink);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.st-projects-page h1,
.st-projects-page h2,
.st-projects-page h3 {
    margin-top: 0;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.st-projects-page h1 span,
.st-projects-page h2 span {
    color: var(--st-pink);
}


/* =========================================================
   BUTTONS / LINKS
   ========================================================= */

.st-projects-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 15px 25px;
    border: 2px solid transparent;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.035em;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.st-projects-btn-pink {
    background: var(--st-pink);
    color: var(--st-white);
}

.st-projects-btn-dark {
    background: var(--st-dark);
    color: var(--st-white);
}

.st-projects-text-link,
.st-projects-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.025em;
}

.st-projects-text-link {
    color: var(--st-white);
}

.st-projects-inline-link {
    margin-top: 34px;
    color: var(--st-dark);
}

.st-projects-text-link span,
.st-projects-inline-link span {
    transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {

    .st-projects-btn:hover {
        transform: translateY(-2px);
    }

    .st-projects-btn-pink:hover {
        background: var(--st-white);
        color: var(--st-dark);
    }

    .st-projects-btn-dark:hover {
        background: var(--st-white);
        color: var(--st-dark);
        border-color: var(--st-dark);
    }

    .st-projects-text-link:hover,
    .st-projects-inline-link:hover {
        color: var(--st-pink);
    }

    .st-projects-text-link:hover span,
    .st-projects-inline-link:hover span {
        transform: translateX(4px);
    }
}

.st-projects-page a:focus-visible {
    outline: 3px solid var(--st-blue);
    outline-offset: 4px;
}


/* =========================================================
   HERO
   ========================================================= */

.st-projects-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 640px;
    background:
        linear-gradient(
            115deg,
            rgba(21, 23, 25, 1) 0%,
            rgba(21, 23, 25, 0.97) 48%,
            rgba(32, 59, 89, 0.94) 100%
        );
    color: var(--st-white);
}

.st-projects-hero::after {
    content: "";
    position: absolute;
    top: 0;
    right: 8%;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
}

.st-projects-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 920px;
    padding: 110px 0;
}

.st-projects-hero h1 {
    max-width: 900px;
    margin-bottom: 28px;
    color: var(--st-white);
    font-size: clamp(58px, 7vw, 102px);
    line-height: 0.91;
}

.st-projects-hero-lead {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 19px;
    line-height: 1.72;
}

.st-projects-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 38px;
}


/* =========================================================
   INTRO
   ========================================================= */

.st-projects-intro {
    padding: 110px 0;
    background: var(--st-white);
}

.st-projects-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.8fr);
    gap: clamp(70px, 10vw, 150px);
    align-items: start;
}

.st-projects-section-heading h2,
.st-projects-collection-heading h2,
.st-projects-capability-heading h2,
.st-projects-proof h2 {
    margin-bottom: 0;
    color: var(--st-dark);
    font-size: clamp(42px, 5vw, 70px);
    line-height: 0.98;
}

.st-projects-intro-copy {
    padding-top: 30px;
}

.st-projects-intro-copy p {
    margin: 0 0 20px;
    color: var(--st-muted);
    font-size: 16px;
    line-height: 1.8;
}

.st-projects-intro-copy .st-projects-intro-large {
    margin-bottom: 24px;
    color: var(--st-dark);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.45;
}


/* =========================================================
   IMAGE PLACEHOLDERS
   ========================================================= */

.st-projects-image-placeholder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #22272c 0%,
            #29333d 52%,
            #203b59 100%
        );
}

.st-projects-image-placeholder::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, 0.11);
}

.st-projects-image-placeholder::after {
    content: "";
    position: absolute;
    width: 150%;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    transform: rotate(-32deg);
}

.st-projects-placeholder-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 30px;
    text-align: center;
}

.st-projects-placeholder-inner span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.st-projects-placeholder-inner small {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    letter-spacing: 0.04em;
}

.st-projects-image-featured {
    min-height: 690px;
}

.st-projects-card-image {
    aspect-ratio: 16 / 10;
}

.st-projects-no-photo {
    background:
        linear-gradient(
            135deg,
            #e8eaec 0%,
            #dfe3e6 100%
        );
}

.st-projects-no-photo::before {
    border-color: rgba(21, 23, 25, 0.1);
}

.st-projects-no-photo::after {
    background: rgba(21, 23, 25, 0.07);
}

.st-projects-no-photo .st-projects-placeholder-inner span {
    color: rgba(21, 23, 25, 0.62);
}

.st-projects-no-photo .st-projects-placeholder-inner small {
    color: rgba(21, 23, 25, 0.42);
}


/* =========================================================
   FEATURED PROJECT
   ========================================================= */

.st-projects-featured {
    padding: 0 0 120px;
    background: var(--st-white);
}

.st-projects-featured-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    min-height: 690px;
    background: var(--st-dark);
}

.st-projects-featured-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(55px, 6vw, 90px);
    color: var(--st-white);
}

.st-projects-project-number {
    margin: 0 0 25px;
    color: var(--st-pink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.17em;
}

.st-projects-project-meta {
    display: flex;
    gap: 18px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
}

.st-projects-featured-content h2 {
    margin-bottom: 7px;
    color: var(--st-white);
    font-size: clamp(42px, 4.6vw, 66px);
    line-height: 0.98;
}

.st-projects-client {
    margin: 0 0 22px;
    color: var(--st-pink);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.st-projects-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}

.st-projects-tags span {
    display: inline-flex;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.st-projects-featured-content > p:not(.st-projects-project-number):not(.st-projects-client) {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.67);
    font-size: 15px;
    line-height: 1.72;
}

.st-projects-featured-content .st-projects-featured-lead {
    color: var(--st-white) !important;
    font-size: 19px !important;
    font-weight: 700;
    line-height: 1.55 !important;
}

.st-projects-result {
    margin-top: 22px;
    padding: 22px 0 0 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid var(--st-pink);
}

.st-projects-result-label {
    display: block;
    margin-bottom: 7px;
    color: var(--st-pink);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.st-projects-result p {
    margin: 0;
    color: rgba(255, 255, 255, 0.77);
    font-size: 14px;
    line-height: 1.65;
}


/* =========================================================
   PROJECT COLLECTION
   ========================================================= */

.st-projects-collection {
    padding: 115px 0 125px;
    background: var(--st-light);
}

.st-projects-collection-heading {
    max-width: 850px;
    margin-bottom: 65px;
}

.st-projects-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.st-project-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--st-white);
}

.st-project-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 40px 42px 44px;
}

.st-project-card-topline {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 21px;
    color: var(--st-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.st-project-card-topline span:first-child {
    color: var(--st-pink);
}

.st-project-card h3 {
    margin-bottom: 6px;
    color: var(--st-dark);
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1;
}

.st-project-card .st-projects-client {
    margin-bottom: 20px;
}

.st-project-card .st-projects-tags {
    margin-bottom: 25px;
}

.st-project-card .st-projects-tags span {
    border-color: var(--st-border);
    color: var(--st-muted);
}

.st-project-card-body > p:not(.st-projects-client) {
    margin: 0 0 15px;
    color: var(--st-muted);
    font-size: 14px;
    line-height: 1.72;
}

.st-project-card-result {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--st-border);
}

.st-project-card-result strong {
    display: block;
    margin-bottom: 7px;
    color: var(--st-pink);
    font-size: 10px;
    letter-spacing: 0.15em;
}

.st-project-card-result p {
    margin: 0;
    color: var(--st-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.65;
}

.st-projects-status {
    align-self: flex-start;
    margin: -2px 0 15px;
    padding: 6px 9px;
    background: var(--st-navy);
    color: var(--st-white);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15em;
}


/* =========================================================
   CAPABILITY
   ========================================================= */

.st-projects-capability {
    padding: 125px 0;
    background: var(--st-navy);
    color: var(--st-white);
}

.st-projects-capability-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.8fr);
    gap: clamp(70px, 10vw, 150px);
}

.st-projects-capability-heading h2 {
    color: var(--st-white);
}

.st-projects-capability-copy {
    padding-top: 28px;
}

.st-projects-capability-copy > p {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 15px;
    line-height: 1.8;
}

.st-projects-capability-copy .st-projects-capability-lead {
    color: var(--st-white);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
}

.st-projects-capability-list {
    margin-top: 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.st-projects-capability-list > div {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 10px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.st-projects-capability-list span {
    color: var(--st-pink);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.st-projects-capability-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14px;
    font-weight: 600;
}

.st-projects-capability .st-projects-inline-link {
    color: var(--st-white);
}


/* =========================================================
   COMMERCIAL PROOF
   ========================================================= */

.st-projects-proof {
    padding: 115px 0;
    background: var(--st-white);
}

.st-projects-proof-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    gap: clamp(70px, 10vw, 150px);
    align-items: center;
}

.st-projects-proof-copy p {
    margin: 0 0 20px;
    color: var(--st-muted);
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.st-projects-cta {
    padding: 105px 0;
    background: var(--st-pink);
}

.st-projects-cta .st-projects-eyebrow {
    color: rgba(21, 23, 25, 0.66);
}

.st-projects-cta-inner {
    max-width: 980px;
}

.st-projects-cta h2 {
    margin-bottom: 25px;
    color: var(--st-dark);
    font-size: clamp(48px, 6vw, 80px);
    line-height: 0.94;
}

.st-projects-cta h2 span {
    color: var(--st-white);
}

.st-projects-cta-inner > p:not(.st-projects-eyebrow) {
    max-width: 680px;
    margin: 0;
    color: rgba(21, 23, 25, 0.77);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.65;
}

.st-projects-cta-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 27px;
    margin-top: 35px;
}

.st-projects-phone {
    color: var(--st-dark);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.06em;
}

@media (hover: hover) and (pointer: fine) {
    .st-projects-phone:hover {
        color: var(--st-white);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .st-projects-page {
        --st-gutter: 28px;
    }

    .st-projects-hero {
        min-height: 570px;
    }

    .st-projects-hero-inner {
        padding: 90px 0;
    }

    .st-projects-intro,
    .st-projects-collection,
    .st-projects-capability,
    .st-projects-proof {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .st-projects-intro-grid,
    .st-projects-capability-grid,
    .st-projects-proof-inner {
        gap: 60px;
    }

    .st-projects-featured {
        padding-bottom: 95px;
    }

    .st-projects-featured-grid {
        grid-template-columns: 0.9fr 1.1fr;
    }

    .st-projects-featured-content {
        padding: 50px;
    }

    .st-projects-image-featured {
        min-height: 650px;
    }

    .st-project-card-body {
        padding: 34px;
    }
}


/* =========================================================
   MOBILE / SMALL TABLET
   ========================================================= */

@media (max-width: 768px) {

    .st-projects-page {
        --st-gutter: 22px;
    }

    .st-projects-hero {
        min-height: auto;
    }

    .st-projects-hero::after {
        display: none;
    }

    .st-projects-hero-inner {
        padding: 78px 0 82px;
    }

    .st-projects-hero h1 {
        margin-bottom: 23px;
        font-size: clamp(48px, 14vw, 72px);
    }

    .st-projects-hero-lead {
        font-size: 16px;
        line-height: 1.7;
    }

    .st-projects-hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
        margin-top: 31px;
    }

    .st-projects-intro,
    .st-projects-collection,
    .st-projects-capability,
    .st-projects-proof {
        padding: 75px 0;
    }

    .st-projects-intro-grid,
    .st-projects-capability-grid,
    .st-projects-proof-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .st-projects-intro-copy,
    .st-projects-capability-copy {
        padding-top: 0;
    }

    .st-projects-section-heading h2,
    .st-projects-collection-heading h2,
    .st-projects-capability-heading h2,
    .st-projects-proof h2 {
        font-size: clamp(38px, 11vw, 54px);
    }

    .st-projects-intro-copy .st-projects-intro-large,
    .st-projects-capability-copy .st-projects-capability-lead {
        font-size: 20px;
    }

    .st-projects-featured {
        padding-bottom: 75px;
    }

    .st-projects-featured-grid {
        grid-template-columns: 1fr;
    }

    .st-projects-image-featured {
        min-height: auto;
        aspect-ratio: 4 / 3;
    }

    .st-projects-featured-content {
        padding: 44px 30px 48px;
    }

    .st-projects-featured-content h2 {
        font-size: clamp(39px, 11vw, 54px);
    }

    .st-projects-featured-content .st-projects-featured-lead {
        font-size: 17px !important;
    }

    .st-projects-collection-heading {
        margin-bottom: 45px;
    }

    .st-projects-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .st-project-card-body {
        padding: 31px 28px 34px;
    }

    .st-project-card h3 {
        font-size: clamp(30px, 9vw, 40px);
    }

    .st-projects-capability-list > div {
        grid-template-columns: 35px 1fr;
    }

    .st-projects-cta {
        padding: 78px 0 82px;
    }

    .st-projects-cta h2 {
        font-size: clamp(42px, 12vw, 60px);
    }

    .st-projects-cta-inner > p:not(.st-projects-eyebrow) {
        font-size: 16px;
    }
}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 480px) {

    .st-projects-page {
        --st-gutter: 20px;
    }

    .st-projects-eyebrow {
        margin-bottom: 16px;
        font-size: 10px;
    }

    .st-projects-hero-inner {
        padding: 68px 0 72px;
    }

    .st-projects-hero h1 {
        font-size: clamp(44px, 14vw, 59px);
    }

    .st-projects-btn {
        width: 100%;
    }

    .st-projects-intro,
    .st-projects-collection,
    .st-projects-capability,
    .st-projects-proof {
        padding: 64px 0;
    }

    .st-projects-section-heading h2,
    .st-projects-collection-heading h2,
    .st-projects-capability-heading h2,
    .st-projects-proof h2 {
        font-size: clamp(36px, 11.5vw, 47px);
    }

    .st-projects-featured {
        padding-bottom: 64px;
    }

    .st-projects-image-featured {
        aspect-ratio: 1 / 1;
    }

    .st-projects-featured-content {
        padding: 38px 23px 42px;
    }

    .st-projects-project-meta {
        flex-wrap: wrap;
    }

    .st-projects-featured-content h2 {
        font-size: clamp(36px, 11vw, 46px);
    }

    .st-projects-tags {
        gap: 6px;
    }

    .st-projects-tags span {
        padding: 6px 8px;
        font-size: 9px;
    }

    .st-projects-result {
        padding-left: 17px;
    }

    .st-project-card-body {
        padding: 28px 22px 31px;
    }

    .st-project-card-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .st-project-card h3 {
        font-size: clamp(29px, 9.5vw, 38px);
    }

    .st-projects-placeholder-inner {
        padding: 20px;
    }

    .st-projects-capability-list p {
        font-size: 13px;
    }

    .st-projects-cta {
        padding: 68px 0 72px;
    }

    .st-projects-cta h2 {
        font-size: clamp(39px, 12vw, 51px);
    }

    .st-projects-cta-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;
    }

    .st-projects-phone {
        align-self: flex-start;
    }
}

/* =========================================================
   SKYTECH INDUSTRIES
   ST-INDUSTRIES-1B
   Industries page — full visual + responsive treatment
   ========================================================= */

.st-industries-page {
    --st-pink: #d65fa2;
    --st-dark: #151719;
    --st-navy: #203b59;
    --st-blue: #4288c9;
    --st-light: #f4f5f6;
    --st-text: #252a2e;
    --st-muted: #69727a;
    --st-white: #ffffff;
    --st-border: #e3e6e8;
    --st-container: 1280px;
    --st-gutter: 32px;

    background: var(--st-white);
    color: var(--st-text);
    overflow: hidden;
}

.st-industries-page *,
.st-industries-page *::before,
.st-industries-page *::after {
    box-sizing: border-box;
}

.st-industries-page a {
    text-decoration: none;
}

.st-industries-container {
    width: min(
        calc(100% - (var(--st-gutter) * 2)),
        var(--st-container)
    );
    margin-inline: auto;
}


/* =========================================================
   SHARED TYPOGRAPHY
   ========================================================= */

.st-industries-eyebrow {
    margin: 0 0 20px;
    color: var(--st-pink);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.st-industries-page h1,
.st-industries-page h2,
.st-industries-page h3 {
    margin-top: 0;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.st-industries-page h1 span,
.st-industries-page h2 span {
    color: var(--st-pink);
}


/* =========================================================
   BUTTONS + LINKS
   ========================================================= */

.st-industries-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 15px 25px;
    border: 2px solid transparent;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.035em;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.st-industries-btn-pink {
    background: var(--st-pink);
    color: var(--st-white);
}

.st-industries-btn-dark {
    background: var(--st-dark);
    color: var(--st-white);
}

.st-industries-text-link,
.st-industries-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.025em;
}

.st-industries-text-link {
    color: var(--st-white);
}

.st-industries-inline-link {
    margin-top: 29px;
    color: var(--st-dark);
}

.st-industries-text-link span,
.st-industries-inline-link span {
    transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {

    .st-industries-btn:hover {
        transform: translateY(-2px);
    }

    .st-industries-btn-pink:hover {
        background: var(--st-white);
        color: var(--st-dark);
    }

    .st-industries-btn-dark:hover {
        background: var(--st-white);
        border-color: var(--st-dark);
        color: var(--st-dark);
    }

    .st-industries-text-link:hover,
    .st-industries-inline-link:hover {
        color: var(--st-pink);
    }

    .st-industries-text-link:hover span,
    .st-industries-inline-link:hover span {
        transform: translateX(4px);
    }
}

.st-industries-page a:focus-visible {
    outline: 3px solid var(--st-blue);
    outline-offset: 4px;
}


/* =========================================================
   HERO
   ========================================================= */

.st-industries-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 640px;
    overflow: hidden;
    background:
        linear-gradient(
            115deg,
            #151719 0%,
            #151719 53%,
            #203b59 100%
        );
    color: var(--st-white);
}

.st-industries-hero::before {
    content: "";
    position: absolute;
    top: -35%;
    right: -5%;
    width: 52vw;
    height: 135%;
    border: 1px solid rgba(255,255,255,0.07);
    transform: rotate(18deg);
}

.st-industries-hero::after {
    content: "";
    position: absolute;
    top: -20%;
    right: 15%;
    width: 1px;
    height: 145%;
    background: rgba(255,255,255,0.1);
    transform: rotate(18deg);
}

.st-industries-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1040px;
    padding: 110px 0;
}

.st-industries-hero h1 {
    max-width: 1050px;
    margin-bottom: 29px;
    color: var(--st-white);
    font-size: clamp(56px, 7vw, 100px);
    line-height: 0.91;
}

.st-industries-hero-lead {
    max-width: 735px;
    margin: 0;
    color: rgba(255,255,255,0.76);
    font-size: 19px;
    line-height: 1.72;
}

.st-industries-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 27px;
    margin-top: 39px;
}


/* =========================================================
   INTRO
   ========================================================= */

.st-industries-intro {
    padding: 115px 0;
    background: var(--st-white);
}

.st-industries-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.78fr);
    gap: clamp(70px, 10vw, 150px);
    align-items: start;
}

.st-industries-section-heading h2,
.st-industries-sectors-heading h2,
.st-industries-complex-heading h2,
.st-industries-approach-heading h2,
.st-industries-area-title h2 {
    margin-bottom: 0;
    color: var(--st-dark);
    font-size: clamp(42px, 5vw, 70px);
    line-height: 0.98;
}

.st-industries-intro-copy {
    padding-top: 29px;
}

.st-industries-intro-copy p {
    margin: 0 0 20px;
    color: var(--st-muted);
    font-size: 16px;
    line-height: 1.8;
}

.st-industries-intro-copy .st-industries-intro-lead {
    margin-bottom: 24px;
    color: var(--st-dark);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.45;
}


/* =========================================================
   INDUSTRY SECTOR GRID
   ========================================================= */

.st-industries-sectors {
    padding: 115px 0 125px;
    background: var(--st-light);
}

.st-industries-sectors-heading {
    max-width: 900px;
    margin-bottom: 65px;
}

.st-industries-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #d7dadd;
    border-left: 1px solid #d7dadd;
}

.st-industry-card {
    position: relative;
    min-height: 410px;
    padding: 38px 36px 40px;
    overflow: hidden;
    background: var(--st-white);
    border-right: 1px solid #d7dadd;
    border-bottom: 1px solid #d7dadd;
    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}

.st-industry-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: var(--st-pink);
    transition: width 0.3s ease;
}

.st-industry-card::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -100px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(32,59,89,0.07);
    transform: rotate(35deg);
}

.st-industry-number {
    position: relative;
    z-index: 2;
    display: block;
    margin-bottom: 74px;
    color: var(--st-pink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.st-industry-card-content {
    position: relative;
    z-index: 2;
}

.st-industry-card h3 {
    margin-bottom: 19px;
    color: var(--st-dark);
    font-size: clamp(25px, 2.2vw, 33px);
    line-height: 1.03;
}

.st-industry-card-content > p {
    margin: 0 0 27px;
    color: var(--st-muted);
    font-size: 14px;
    line-height: 1.72;
}

.st-industry-audience {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.st-industry-audience span {
    padding: 6px 8px;
    background: var(--st-light);
    color: var(--st-muted);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {

    .st-industry-card:hover {
        background: #fafafb;
        transform: translateY(-4px);
    }

    .st-industry-card:hover::before {
        width: 100%;
    }
}


/* =========================================================
   COMPLEX ENVIRONMENTS — DARK
   ========================================================= */

.st-industries-complex {
    position: relative;
    padding: 125px 0;
    overflow: hidden;
    background: var(--st-dark);
    color: var(--st-white);
}

.st-industries-complex::after {
    content: "";
    position: absolute;
    top: -160px;
    right: -170px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(255,255,255,0.055);
    transform: rotate(35deg);
}

.st-industries-complex-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    gap: clamp(70px, 10vw, 150px);
}

.st-industries-complex-heading h2 {
    color: var(--st-white);
}

.st-industries-complex-copy {
    padding-top: 29px;
}

.st-industries-complex-copy p {
    margin: 0 0 20px;
    color: rgba(255,255,255,0.64);
    font-size: 15px;
    line-height: 1.8;
}

.st-industries-complex-copy .st-industries-complex-lead {
    color: var(--st-white);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
}

.st-industries-complex .st-industries-inline-link {
    color: var(--st-white);
}


/* =========================================================
   PROJECT APPROACH
   ========================================================= */

.st-industries-approach {
    padding: 120px 0 125px;
    background: var(--st-white);
}

.st-industries-approach-heading {
    max-width: 920px;
    margin-bottom: 68px;
}

.st-industries-approach-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--st-border);
    border-bottom: 1px solid var(--st-border);
}

.st-industries-approach-item {
    position: relative;
    padding: 38px 31px 42px;
    border-right: 1px solid var(--st-border);
}

.st-industries-approach-item:first-child {
    border-left: 1px solid var(--st-border);
}

.st-industries-approach-item > span {
    display: block;
    margin-bottom: 54px;
    color: var(--st-pink);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.st-industries-approach-item h3 {
    margin-bottom: 18px;
    color: var(--st-dark);
    font-size: 22px;
    line-height: 1.05;
}

.st-industries-approach-item p {
    margin: 0;
    color: var(--st-muted);
    font-size: 13px;
    line-height: 1.72;
}


/* =========================================================
   SERVICE AREA
   ========================================================= */

.st-industries-area {
    padding: 110px 0;
    background: var(--st-light);
}

.st-industries-area-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.75fr);
    gap: clamp(70px, 10vw, 150px);
    align-items: center;
}

.st-industries-area-copy {
    padding: 36px 0 36px 38px;
    border-left: 3px solid var(--st-pink);
}

.st-industries-area-copy p {
    margin: 0 0 18px;
    color: var(--st-muted);
    font-size: 16px;
    line-height: 1.75;
}

.st-industries-area-copy strong {
    color: var(--st-dark);
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.st-industries-cta {
    padding: 105px 0;
    background: var(--st-pink);
}

.st-industries-cta .st-industries-eyebrow {
    color: rgba(21,23,25,0.66);
}

.st-industries-cta-inner {
    max-width: 990px;
}

.st-industries-cta h2 {
    margin-bottom: 25px;
    color: var(--st-dark);
    font-size: clamp(48px, 6vw, 80px);
    line-height: 0.94;
}

.st-industries-cta h2 span {
    color: var(--st-white);
}

.st-industries-cta-inner > p:not(.st-industries-eyebrow) {
    max-width: 680px;
    margin: 0;
    color: rgba(21,23,25,0.77);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.65;
}

.st-industries-cta-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 27px;
    margin-top: 35px;
}

.st-industries-phone {
    color: var(--st-dark);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.06em;
}

@media (hover: hover) and (pointer: fine) {
    .st-industries-phone:hover {
        color: var(--st-white);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .st-industries-page {
        --st-gutter: 28px;
    }

    .st-industries-hero {
        min-height: 570px;
    }

    .st-industries-hero-inner {
        padding: 90px 0;
    }

    .st-industries-intro,
    .st-industries-sectors,
    .st-industries-complex,
    .st-industries-approach,
    .st-industries-area {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .st-industries-intro-grid,
    .st-industries-complex-grid,
    .st-industries-area-inner {
        gap: 60px;
    }

    .st-industries-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .st-industry-card {
        min-height: 370px;
    }

    .st-industry-number {
        margin-bottom: 55px;
    }

    .st-industries-approach-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .st-industries-approach-item:nth-child(3) {
        border-left: 1px solid var(--st-border);
        border-top: 1px solid var(--st-border);
    }

    .st-industries-approach-item:nth-child(4) {
        border-top: 1px solid var(--st-border);
    }
}


/* =========================================================
   MOBILE / SMALL TABLET
   ========================================================= */

@media (max-width: 768px) {

    .st-industries-page {
        --st-gutter: 22px;
    }

    .st-industries-hero {
        min-height: auto;
    }

    .st-industries-hero::before,
    .st-industries-hero::after {
        opacity: 0.6;
    }

    .st-industries-hero-inner {
        padding: 78px 0 82px;
    }

    .st-industries-hero h1 {
        margin-bottom: 23px;
        font-size: clamp(46px, 13.5vw, 70px);
    }

    .st-industries-hero-lead {
        font-size: 16px;
        line-height: 1.7;
    }

    .st-industries-hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
        margin-top: 31px;
    }

    .st-industries-intro,
    .st-industries-sectors,
    .st-industries-complex,
    .st-industries-approach,
    .st-industries-area {
        padding: 75px 0;
    }

    .st-industries-intro-grid,
    .st-industries-complex-grid,
    .st-industries-area-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .st-industries-intro-copy,
    .st-industries-complex-copy {
        padding-top: 0;
    }

    .st-industries-section-heading h2,
    .st-industries-sectors-heading h2,
    .st-industries-complex-heading h2,
    .st-industries-approach-heading h2,
    .st-industries-area-title h2 {
        font-size: clamp(38px, 11vw, 54px);
    }

    .st-industries-intro-copy .st-industries-intro-lead,
    .st-industries-complex-copy .st-industries-complex-lead {
        font-size: 20px;
    }

    .st-industries-sectors-heading,
    .st-industries-approach-heading {
        margin-bottom: 45px;
    }

    .st-industries-grid {
        grid-template-columns: 1fr;
    }

    .st-industry-card {
        min-height: auto;
        padding: 32px 29px 35px;
    }

    .st-industry-number {
        margin-bottom: 42px;
    }

    .st-industry-card h3 {
        font-size: clamp(27px, 8vw, 35px);
    }

    .st-industries-approach-grid {
        grid-template-columns: 1fr;
        border-bottom: 0;
    }

    .st-industries-approach-item,
    .st-industries-approach-item:first-child,
    .st-industries-approach-item:nth-child(3),
    .st-industries-approach-item:nth-child(4) {
        padding: 30px 0 33px;
        border-top: 0;
        border-right: 0;
        border-bottom: 1px solid var(--st-border);
        border-left: 0;
    }

    .st-industries-approach-item > span {
        margin-bottom: 27px;
    }

    .st-industries-area-copy {
        padding: 28px 0 0;
        border-top: 3px solid var(--st-pink);
        border-left: 0;
    }

    .st-industries-cta {
        padding: 78px 0 82px;
    }

    .st-industries-cta h2 {
        font-size: clamp(42px, 12vw, 60px);
    }

    .st-industries-cta-inner > p:not(.st-industries-eyebrow) {
        font-size: 16px;
    }
}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 480px) {

    .st-industries-page {
        --st-gutter: 20px;
    }

    .st-industries-eyebrow {
        margin-bottom: 16px;
        font-size: 10px;
    }

    .st-industries-hero-inner {
        padding: 68px 0 72px;
    }

    .st-industries-hero h1 {
        font-size: clamp(42px, 13vw, 56px);
    }

    .st-industries-btn {
        width: 100%;
    }

    .st-industries-intro,
    .st-industries-sectors,
    .st-industries-complex,
    .st-industries-approach,
    .st-industries-area {
        padding: 64px 0;
    }

    .st-industries-section-heading h2,
    .st-industries-sectors-heading h2,
    .st-industries-complex-heading h2,
    .st-industries-approach-heading h2,
    .st-industries-area-title h2 {
        font-size: clamp(35px, 11vw, 47px);
    }

    .st-industry-card {
        padding: 29px 23px 32px;
    }

    .st-industry-number {
        margin-bottom: 34px;
    }

    .st-industry-card h3 {
        font-size: clamp(26px, 8.5vw, 33px);
    }

    .st-industry-audience {
        gap: 5px;
    }

    .st-industries-complex-heading h2 {
        font-size: clamp(34px, 10.7vw, 45px);
    }

    .st-industries-cta {
        padding: 68px 0 72px;
    }

    .st-industries-cta h2 {
        font-size: clamp(38px, 11.7vw, 50px);
    }

    .st-industries-cta-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;
    }

    .st-industries-phone {
        align-self: flex-start;
    }
}










/* =========================================================
   SKYTECH — SAFETY
   ST-SAFETY-1B
   ========================================================= */

.st-safety-page {
  --st-pink: #d65fa2;
  --st-dark: #151719;
  --st-navy: #203b59;
  --st-blue: #4288c9;
  --st-light: #f4f5f6;
  --st-text: #252a2e;
  --st-muted: #69727a;
  --st-white: #ffffff;
  --st-border: #e3e6e8;
  --st-container: 1280px;
  --st-gutter: 32px;

  background: var(--st-white);
  color: var(--st-text);
  overflow: hidden;
}

.st-safety-page *,
.st-safety-page *::before,
.st-safety-page *::after {
  box-sizing: border-box;
}

.st-safety-container {
  width: min(
    calc(100% - (var(--st-gutter) * 2)),
    var(--st-container)
  );
  margin-inline: auto;
}

.st-safety-page h1,
.st-safety-page h2,
.st-safety-page h3,
.st-safety-page p {
  margin-top: 0;
}

.st-safety-page h1,
.st-safety-page h2,
.st-safety-page h3 {
  text-wrap: balance;
}

.st-safety-page p {
  line-height: 1.72;
}

.st-safety-eyebrow {
  margin-bottom: 22px;
  color: var(--st-pink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3 !important;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}


/* =========================================================
   HERO
   ========================================================= */

.st-safety-hero {
  position: relative;
  isolation: isolate;
  padding: 132px 0 138px;
  overflow: hidden;
  background:
    linear-gradient(
      112deg,
      #151719 0%,
      #182330 56%,
      #203b59 100%
    );
  color: var(--st-white);
}

/* technical line field */
.st-safety-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: -30%;
  right: -10%;
  width: 62%;
  height: 160%;
  opacity: 0.16;
  background:
    linear-gradient(
      90deg,
      transparent 0 24%,
      rgba(255,255,255,.24) 24% 24.2%,
      transparent 24.2% 49%,
      rgba(255,255,255,.18) 49% 49.2%,
      transparent 49.2% 74%,
      rgba(255,255,255,.16) 74% 74.2%,
      transparent 74.2%
    );
  transform: rotate(24deg);
  pointer-events: none;
}

/* precision diagonal */
.st-safety-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -180px;
  right: 14%;
  width: 1px;
  height: 720px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(214,95,162,.75),
    transparent
  );
  transform: rotate(36deg);
  transform-origin: center;
  pointer-events: none;
}

.st-safety-hero-inner {
  position: relative;
  max-width: 920px;
}

.st-safety-hero-inner::after {
  content: "";
  position: absolute;
  top: -34px;
  left: -42px;
  width: 96px;
  height: 96px;
  border-top: 1px solid rgba(255,255,255,.15);
  border-left: 1px solid rgba(255,255,255,.15);
  pointer-events: none;
}

.st-safety-hero h1 {
  max-width: 900px;
  margin-bottom: 32px;
  color: var(--st-white);
  font-size: clamp(50px, 6.1vw, 88px);
  font-weight: 800;
  line-height: .93;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.st-safety-hero h1 span {
  color: var(--st-pink);
}

.st-safety-hero-lead {
  max-width: 720px;
  margin-bottom: 38px;
  color: rgba(255,255,255,.78);
  font-size: 19px;
}

.st-safety-hero-actions {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}


/* =========================================================
   BUTTONS / LINKS
   ========================================================= */

.st-safety-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 25px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .08em;
  text-decoration: none !important;
  text-transform: uppercase;
  transition:
    transform .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease;
}

.st-safety-btn-pink {
  background: var(--st-pink);
  color: var(--st-white) !important;
}

.st-safety-btn-dark {
  background: var(--st-dark);
  color: var(--st-white) !important;
}

.st-safety-text-link,
.st-safety-inline-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 5px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .07em;
  text-decoration: none !important;
  text-transform: uppercase;
}

.st-safety-text-link {
  color: var(--st-white) !important;
}

.st-safety-inline-link {
  margin-top: 12px;
  color: var(--st-dark) !important;
}

.st-safety-text-link::after,
.st-safety-inline-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 38px;
  height: 1px;
  background: var(--st-pink);
  transition: width .25s ease;
}

.st-safety-text-link span,
.st-safety-inline-link span {
  transition: transform .22s ease;
}


/* =========================================================
   INTRO
   ========================================================= */

.st-safety-intro {
  padding: 112px 0;
  background: var(--st-white);
}

.st-safety-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 100px;
  align-items: start;
}

.st-safety-section-heading h2,
.st-safety-principles-heading h2,
.st-safety-people-heading h2,
.st-safety-compliance-heading h2,
.st-safety-rescue-heading h2,
.st-safety-standards-title h2,
.st-safety-cta h2 {
  margin-bottom: 0;
  color: var(--st-dark);
  font-size: clamp(39px, 4vw, 62px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.st-safety-section-heading h2 span,
.st-safety-principles-heading h2 span,
.st-safety-people-heading h2 span,
.st-safety-compliance-heading h2 span,
.st-safety-rescue-heading h2 span,
.st-safety-standards-title h2 span {
  color: var(--st-pink);
}

.st-safety-intro-copy {
  max-width: 650px;
}

.st-safety-intro-copy p {
  color: var(--st-muted);
  font-size: 16px;
}

.st-safety-intro-copy .st-safety-intro-lead {
  margin-bottom: 22px;
  color: var(--st-text);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.55;
}


/* =========================================================
   PRINCIPLES
   ========================================================= */

.st-safety-principles {
  position: relative;
  padding: 110px 0 120px;
  background: var(--st-light);
}

.st-safety-principles::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 640px);
  width: 1px;
  height: 100%;
  background: rgba(32,59,89,.07);
  pointer-events: none;
}

.st-safety-principles-heading {
  max-width: 670px;
  margin-bottom: 68px;
}

.st-safety-principles-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--st-border);
  border-bottom: 1px solid var(--st-border);
}

.st-safety-principle {
  position: relative;
  min-height: 320px;
  padding: 40px 32px 36px;
  border-right: 1px solid var(--st-border);
  background: rgba(255,255,255,.28);
  transition:
    background-color .25s ease,
    transform .25s ease;
}

.st-safety-principle:first-child {
  border-left: 1px solid var(--st-border);
}

.st-safety-principle::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--st-pink);
  transition: width .28s ease;
}

.st-safety-number {
  display: block;
  margin-bottom: 58px;
  color: var(--st-pink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

.st-safety-principle h3 {
  margin-bottom: 17px;
  color: var(--st-dark);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.015em;
}

.st-safety-principle p {
  margin-bottom: 0;
  color: var(--st-muted);
  font-size: 14px;
}


/* =========================================================
   PEOPLE / COMPETENCE
   ========================================================= */

.st-safety-people {
  position: relative;
  padding: 120px 0;
  background: var(--st-navy);
  color: var(--st-white);
  overflow: hidden;
}

.st-safety-people::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -300px;
  width: 620px;
  height: 620px;
  border: 1px solid rgba(255,255,255,.06);
  transform: rotate(45deg);
  pointer-events: none;
}

.st-safety-people-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 105px;
  align-items: start;
}

.st-safety-people-heading h2 {
  color: var(--st-white);
}

.st-safety-people-copy {
  max-width: 690px;
}

.st-safety-people-copy > p {
  color: rgba(255,255,255,.72);
}

.st-safety-people-copy .st-safety-people-lead {
  margin-bottom: 22px;
  color: var(--st-white);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.55;
}

.st-safety-capability-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 42px;
  border-top: 1px solid rgba(255,255,255,.14);
}

.st-safety-capability-list > div {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 70px;
  padding: 15px 14px 15px 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.st-safety-capability-list > div:nth-child(odd) {
  border-right: 1px solid rgba(255,255,255,.14);
  padding-right: 25px;
}

.st-safety-capability-list > div:nth-child(even) {
  padding-left: 25px;
}

.st-safety-capability-list span {
  color: var(--st-pink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

.st-safety-capability-list p {
  margin: 0;
  color: rgba(255,255,255,.9);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}


/* =========================================================
   COMMERCIAL READINESS
   ========================================================= */

.st-safety-compliance {
  padding: 118px 0 126px;
  background: var(--st-white);
}

.st-safety-compliance-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .65fr);
  column-gap: 80px;
  align-items: end;
  margin-bottom: 65px;
}

.st-safety-compliance-heading .st-safety-eyebrow {
  grid-column: 1 / -1;
}

.st-safety-compliance-heading h2 {
  max-width: 660px;
}

.st-safety-compliance-heading > p:last-child {
  margin-bottom: 3px;
  color: var(--st-muted);
  font-size: 16px;
}

.st-safety-compliance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--st-border);
}

.st-safety-compliance-card {
  position: relative;
  min-height: 330px;
  padding: 32px 28px 34px;
  border-right: 1px solid var(--st-border);
  background: var(--st-white);
  overflow: hidden;
  transition:
    transform .24s ease,
    background-color .24s ease;
}

.st-safety-compliance-card:last-child {
  border-right: 0;
}

.st-safety-compliance-card::after {
  content: "";
  position: absolute;
  right: -48px;
  bottom: -48px;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(32,59,89,.09);
  transform: rotate(45deg);
  transition:
    border-color .25s ease,
    transform .3s ease;
}

.st-safety-compliance-featured {
  background: var(--st-dark);
  border-color: var(--st-dark);
}

.st-safety-compliance-label {
  display: block;
  min-height: 34px;
  margin-bottom: 40px;
  color: var(--st-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.st-safety-compliance-featured .st-safety-compliance-label {
  color: rgba(255,255,255,.5);
}

.st-safety-compliance-card strong {
  display: block;
  margin-bottom: 13px;
  color: var(--st-pink);
  font-size: clamp(42px, 4vw, 61px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.045em;
}

.st-safety-compliance-card h3 {
  margin-bottom: 17px;
  color: var(--st-dark);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .015em;
}

.st-safety-compliance-featured h3 {
  color: var(--st-white);
}

.st-safety-compliance-card p {
  margin-bottom: 0;
  color: var(--st-muted);
  font-size: 13px;
}

.st-safety-compliance-featured p {
  color: rgba(255,255,255,.65);
}


/* =========================================================
   RESCUE / SPECIALIST
   ========================================================= */

.st-safety-rescue {
  position: relative;
  padding: 125px 0;
  background: var(--st-light);
  overflow: hidden;
}

.st-safety-rescue::before {
  content: "";
  position: absolute;
  top: -180px;
  left: 53%;
  width: 1px;
  height: 700px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(32,59,89,.14),
    transparent
  );
  transform: rotate(31deg);
  pointer-events: none;
}

.st-safety-rescue-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 120px;
  align-items: start;
}

.st-safety-rescue-heading h2 {
  font-size: clamp(54px, 6vw, 84px);
  line-height: .88;
}

.st-safety-rescue-copy {
  max-width: 650px;
  padding-top: 34px;
}

.st-safety-rescue-copy p {
  color: var(--st-muted);
}

.st-safety-rescue-copy .st-safety-rescue-lead {
  color: var(--st-text);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
}


/* =========================================================
   QUALIFICATIONS / STANDARDS
   ========================================================= */

.st-safety-standards {
  position: relative;
  padding: 100px 0;
  background: var(--st-dark);
  color: var(--st-white);
}

.st-safety-standards::after {
  content: "";
  position: absolute;
  top: 0;
  right: 8%;
  width: 170px;
  height: 100%;
  opacity: .16;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 31px,
      rgba(255,255,255,.12) 31px 32px
    );
  pointer-events: none;
}

.st-safety-standards-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 100px;
  align-items: center;
}

.st-safety-standards-title h2 {
  color: var(--st-white);
}

.st-safety-standards-copy {
  max-width: 620px;
}

.st-safety-standards-copy p {
  color: rgba(255,255,255,.72);
}

.st-safety-standards-copy p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   CTA
   ========================================================= */

.st-safety-cta {
  position: relative;
  padding: 110px 0;
  background: var(--st-pink);
  color: var(--st-white);
  overflow: hidden;
}

.st-safety-cta::after {
  content: "";
  position: absolute;
  top: -90px;
  right: 5%;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(255,255,255,.18);
  transform: rotate(45deg);
  pointer-events: none;
}

.st-safety-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 870px;
}

.st-safety-cta .st-safety-eyebrow {
  color: rgba(255,255,255,.72);
}

.st-safety-cta h2 {
  margin-bottom: 28px;
  color: var(--st-white);
  font-size: clamp(44px, 5vw, 70px);
}

.st-safety-cta h2 span {
  color: var(--st-dark);
}

.st-safety-cta-inner > p:not(.st-safety-eyebrow) {
  max-width: 680px;
  margin-bottom: 34px;
  color: rgba(255,255,255,.88);
  font-size: 17px;
}

.st-safety-cta-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.st-safety-phone {
  color: var(--st-white) !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
  text-decoration: none !important;
}


/* =========================================================
   INTERACTION — POINTER DEVICES ONLY
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .st-safety-btn:hover {
    transform: translateY(-2px);
  }

  .st-safety-btn-pink:hover {
    background: var(--st-white);
    color: var(--st-dark) !important;
  }

  .st-safety-btn-dark:hover {
    background: var(--st-white);
    border-color: var(--st-white);
    color: var(--st-dark) !important;
  }

  .st-safety-text-link:hover::after,
  .st-safety-inline-link:hover::after {
    width: 100%;
  }

  .st-safety-text-link:hover span,
  .st-safety-inline-link:hover span {
    transform: translateX(5px);
  }

  .st-safety-principle:hover {
    background: var(--st-white);
    transform: translateY(-4px);
  }

  .st-safety-principle:hover::before {
    width: 100%;
  }

  .st-safety-compliance-card:not(.st-safety-compliance-featured):hover {
    background: var(--st-light);
    transform: translateY(-4px);
  }

  .st-safety-compliance-card:hover::after {
    border-color: rgba(214,95,162,.4);
    transform: rotate(45deg) scale(1.12);
  }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.st-safety-page a:focus-visible {
  outline: 3px solid var(--st-blue);
  outline-offset: 4px;
}

.st-safety-cta a:focus-visible,
.st-safety-hero a:focus-visible {
  outline-color: var(--st-white);
}


/* =========================================================
   TABLET — 769px TO 1024px
   ========================================================= */

@media (max-width: 1024px) {

  .st-safety-hero {
    padding: 110px 0 116px;
  }

  .st-safety-intro {
    padding: 92px 0;
  }

  .st-safety-intro-grid,
  .st-safety-people-grid,
  .st-safety-rescue-grid,
  .st-safety-standards-inner {
    gap: 65px;
  }

  .st-safety-principles {
    padding: 92px 0 100px;
  }

  .st-safety-principles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .st-safety-principle {
    min-height: 280px;
    border-bottom: 1px solid var(--st-border);
  }

  .st-safety-principle:nth-child(2) {
    border-right: 1px solid var(--st-border);
  }

  .st-safety-principle:nth-child(3) {
    border-left: 1px solid var(--st-border);
  }

  .st-safety-number {
    margin-bottom: 42px;
  }

  .st-safety-people {
    padding: 100px 0;
  }

  .st-safety-compliance {
    padding: 98px 0 105px;
  }

  .st-safety-compliance-heading {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .st-safety-compliance-heading > p:last-child {
    max-width: 650px;
  }

  .st-safety-compliance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .st-safety-compliance-card {
    border-bottom: 1px solid var(--st-border);
  }

  .st-safety-compliance-card:nth-child(2) {
    border-right: 0;
  }

  .st-safety-compliance-card:nth-child(3) {
    border-bottom: 0;
  }

  .st-safety-compliance-card:nth-child(4) {
    border-right: 0;
    border-bottom: 0;
  }

  .st-safety-rescue {
    padding: 100px 0;
  }

  .st-safety-standards {
    padding: 90px 0;
  }

  .st-safety-cta {
    padding: 95px 0;
  }
}


/* =========================================================
   MOBILE / NARROW TABLET
   ========================================================= */

@media (max-width: 768px) {

  .st-safety-page {
    --st-gutter: 22px;
  }

  .st-safety-hero {
    padding: 88px 0 92px;
  }

  .st-safety-hero::before {
    right: -50%;
    width: 120%;
    opacity: .11;
  }

  .st-safety-hero::after {
    right: 8%;
    opacity: .65;
  }

  .st-safety-hero-inner::after {
    display: none;
  }

  .st-safety-hero h1 {
    font-size: clamp(43px, 11vw, 66px);
  }

  .st-safety-hero-lead {
    font-size: 17px;
  }

  .st-safety-intro,
  .st-safety-principles,
  .st-safety-people,
  .st-safety-compliance,
  .st-safety-rescue,
  .st-safety-standards,
  .st-safety-cta {
    padding-top: 78px;
    padding-bottom: 82px;
  }

  .st-safety-intro-grid,
  .st-safety-people-grid,
  .st-safety-rescue-grid,
  .st-safety-standards-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .st-safety-section-heading h2,
  .st-safety-principles-heading h2,
  .st-safety-people-heading h2,
  .st-safety-compliance-heading h2,
  .st-safety-standards-title h2 {
    font-size: clamp(37px, 9vw, 52px);
  }

  .st-safety-principles-heading {
    margin-bottom: 48px;
  }

  .st-safety-principles-grid {
    grid-template-columns: 1fr;
    border-bottom: 0;
  }

  .st-safety-principle,
  .st-safety-principle:first-child,
  .st-safety-principle:nth-child(3) {
    min-height: 0;
    padding: 32px 25px;
    border-right: 1px solid var(--st-border);
    border-left: 1px solid var(--st-border);
    border-bottom: 1px solid var(--st-border);
  }

  .st-safety-number {
    margin-bottom: 30px;
  }

  .st-safety-capability-list {
    grid-template-columns: 1fr;
  }

  .st-safety-capability-list > div,
  .st-safety-capability-list > div:nth-child(odd),
  .st-safety-capability-list > div:nth-child(even) {
    padding: 15px 0;
    border-right: 0;
  }

  .st-safety-compliance-heading {
    margin-bottom: 48px;
  }

  .st-safety-compliance-grid {
    grid-template-columns: 1fr;
  }

  .st-safety-compliance-card,
  .st-safety-compliance-card:nth-child(2),
  .st-safety-compliance-card:nth-child(3),
  .st-safety-compliance-card:nth-child(4) {
    min-height: 280px;
    border-right: 0;
    border-bottom: 1px solid var(--st-border);
  }

  .st-safety-compliance-card:last-child {
    border-bottom: 0;
  }

  .st-safety-compliance-label {
    margin-bottom: 30px;
  }

  .st-safety-rescue-heading h2 {
    font-size: clamp(50px, 14vw, 72px);
  }

  .st-safety-rescue-copy {
    padding-top: 0;
  }

  .st-safety-standards::after {
    right: -70px;
  }

  .st-safety-cta h2 {
    font-size: clamp(40px, 10vw, 58px);
  }
}


/* =========================================================
   SMALL MOBILE — 360px
   ========================================================= */

@media (max-width: 420px) {

  .st-safety-page {
    --st-gutter: 20px;
  }

  .st-safety-hero {
    padding: 76px 0 80px;
  }

  .st-safety-eyebrow {
    margin-bottom: 18px;
    font-size: 10px;
  }

  .st-safety-hero h1 {
    margin-bottom: 25px;
    font-size: clamp(39px, 12vw, 50px);
  }

  .st-safety-hero-actions,
  .st-safety-cta-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }

  .st-safety-btn {
    width: 100%;
  }

  .st-safety-intro,
  .st-safety-principles,
  .st-safety-people,
  .st-safety-compliance,
  .st-safety-rescue,
  .st-safety-standards,
  .st-safety-cta {
    padding-top: 66px;
    padding-bottom: 70px;
  }

  .st-safety-intro-grid,
  .st-safety-people-grid,
  .st-safety-rescue-grid,
  .st-safety-standards-inner {
    gap: 38px;
  }

  .st-safety-section-heading h2,
  .st-safety-principles-heading h2,
  .st-safety-people-heading h2,
  .st-safety-compliance-heading h2,
  .st-safety-standards-title h2 {
    font-size: 37px;
  }

  .st-safety-intro-copy .st-safety-intro-lead,
  .st-safety-people-copy .st-safety-people-lead,
  .st-safety-rescue-copy .st-safety-rescue-lead {
    font-size: 18px;
  }

  .st-safety-principle {
    padding: 28px 22px;
  }

  .st-safety-compliance-card,
  .st-safety-compliance-card:nth-child(2),
  .st-safety-compliance-card:nth-child(3),
  .st-safety-compliance-card:nth-child(4) {
    min-height: 0;
    padding: 29px 24px 34px;
  }

  .st-safety-compliance-card strong {
    font-size: 48px;
  }

  .st-safety-rescue-heading h2 {
    font-size: 52px;
  }

  .st-safety-cta h2 {
    font-size: 40px;
  }
}

/* =========================================================
   SKYTECH — SAFETY IMAGE ARCHITECTURE
   ST-SAFETY-1C
   Requires ST-SAFETY-1B
   ========================================================= */


/* =========================================================
   01 — WORKING AT HEIGHT CINEMATIC FEATURE
   ========================================================= */

.st-safety-height-feature {
  position: relative;
  height: clamp(480px, 53vw, 720px);
  min-height: 480px;
  background: var(--st-dark);
  overflow: hidden;
}

.st-safety-height-image {
  position: absolute;
  inset: 0;
}

.st-safety-height-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(10, 15, 20, .48) 0%,
      rgba(10, 15, 20, .08) 42%,
      rgba(10, 15, 20, .02) 70%
    ),
    linear-gradient(
      0deg,
      rgba(10, 15, 20, .38) 0%,
      transparent 42%
    );
  pointer-events: none;
}

.st-safety-height-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.st-safety-height-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding-bottom: 52px;
}

.st-safety-height-overlay .st-safety-container {
  width: min(
    calc(100% - (var(--st-gutter) * 2)),
    var(--st-container)
  );
}

.st-safety-height-note {
  position: relative;
  width: min(420px, 100%);
  padding: 27px 30px 28px;
  border-left: 3px solid var(--st-pink);
  background: rgba(21, 23, 25, .88);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.st-safety-height-index {
  display: block;
  margin-bottom: 13px;
  color: var(--st-pink);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.st-safety-height-note p {
  margin: 0;
  color: var(--st-white);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}


/* =========================================================
   02 — COMMERCIAL SITE / WORK AREA DETAIL
   ========================================================= */

.st-safety-site-detail {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  max-width: 1100px;
  margin: 82px auto 0;
  background: var(--st-light);
}

.st-safety-site-image {
  position: relative;
  min-height: 470px;
  overflow: hidden;
}

.st-safety-site-image::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 70px;
  height: 3px;
  background: var(--st-pink);
}

.st-safety-site-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 470px;
  object-fit: cover;
  object-position: center center;
  transition: transform .55s ease;
}

.st-safety-site-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 54px 44px;
  overflow: hidden;
}

.st-safety-site-copy::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(32, 59, 89, .09);
  transform: rotate(45deg);
  pointer-events: none;
}

.st-safety-site-index {
  display: block;
  margin-bottom: 26px;
  color: var(--st-pink);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.st-safety-site-copy h3 {
  max-width: 510px;
  margin-bottom: 24px;
  color: var(--st-dark);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.st-safety-site-copy h3 span {
  display: block;
  color: var(--st-pink);
}

.st-safety-site-copy p {
  max-width: 500px;
  margin-bottom: 0;
  color: var(--st-muted);
  font-size: 15px;
}


/* =========================================================
   03 — RESCUE IMAGE ARCHITECTURE
   Overrides original 1B rescue grid
   ========================================================= */

.st-safety-rescue {
  padding: 0;
}

.st-safety-rescue::before {
  left: 42%;
}

.st-safety-rescue-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: 90px;
  align-items: stretch;
}

.st-safety-rescue-content {
  display: grid;
  align-content: center;
  padding: 115px 0 120px;
}

.st-safety-rescue-heading {
  margin-bottom: 48px;
}

.st-safety-rescue-copy {
  max-width: 610px;
  padding-top: 0;
}

.st-safety-rescue-figure {
  position: relative;
  align-self: stretch;
  min-height: 790px;
  margin: 0;
  background: var(--st-dark);
}

.st-safety-rescue-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.st-safety-rescue-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      transparent 48%,
      rgba(10, 15, 20, .12) 66%,
      rgba(10, 15, 20, .88) 100%
    );
  pointer-events: none;
}

.st-safety-rescue-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform .6s ease;
}

.st-safety-rescue-figure figcaption {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 34px 35px 36px;
}

.st-safety-rescue-figure figcaption span {
  display: block;
  margin-bottom: 12px;
  color: var(--st-pink);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.st-safety-rescue-figure figcaption p {
  max-width: 390px;
  margin: 0;
  color: var(--st-white);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}


/* =========================================================
   IMAGE INTERACTION — POINTER DEVICES ONLY
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .st-safety-site-detail:hover .st-safety-site-image img {
    transform: scale(1.025);
  }

  .st-safety-rescue-figure:hover .st-safety-rescue-image img {
    transform: scale(1.025);
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .st-safety-height-feature {
    height: 560px;
  }

  .st-safety-height-image img {
    object-position: center center;
  }

  .st-safety-site-detail {
    grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr);
    margin-top: 68px;
  }

  .st-safety-site-image,
  .st-safety-site-image img {
    min-height: 430px;
  }

  .st-safety-site-copy {
    padding: 45px 42px;
  }

  .st-safety-rescue-layout {
    grid-template-columns: minmax(0, 1fr) minmax(330px, .82fr);
    gap: 58px;
  }

  .st-safety-rescue-content {
    padding: 95px 0 100px;
  }

  .st-safety-rescue-figure {
    min-height: 720px;
  }
}


/* =========================================================
   769px TARGET / NARROW TABLET
   ========================================================= */

@media (max-width: 820px) {

  .st-safety-height-feature {
    height: 500px;
    min-height: 500px;
  }

  .st-safety-height-image img {
    object-position: 48% center;
  }

  .st-safety-height-overlay {
    padding-bottom: 32px;
  }

  .st-safety-height-note {
    width: min(390px, 72%);
  }

  .st-safety-site-detail {
    grid-template-columns: .82fr 1.18fr;
  }

  .st-safety-site-copy {
    padding: 38px 32px;
  }

  .st-safety-site-copy h3 {
    font-size: 30px;
  }

  .st-safety-rescue-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .st-safety-rescue-content {
    padding: 82px 0;
  }

  .st-safety-rescue-figure {
    width: min(560px, 100%);
    min-height: 690px;
    margin: 0 auto 82px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .st-safety-height-feature {
    height: 460px;
    min-height: 460px;
  }

  .st-safety-height-image img {
    object-position: 43% center;
  }

  .st-safety-height-image::after {
    background:
      linear-gradient(
        0deg,
        rgba(10,15,20,.52) 0%,
        rgba(10,15,20,.06) 58%
      );
  }

  .st-safety-height-note {
    width: min(410px, 90%);
    padding: 22px 24px 23px;
  }

  .st-safety-height-note p {
    font-size: 15px;
  }

  .st-safety-site-detail {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 60px auto 0;
  }

  .st-safety-site-image {
    min-height: 500px;
    max-height: 620px;
  }

  .st-safety-site-image img {
    min-height: 500px;
    max-height: 620px;
    object-position: center center;
  }

  .st-safety-site-copy {
    padding: 42px 34px 46px;
  }

  .st-safety-site-copy h3 {
    font-size: clamp(29px, 8vw, 38px);
  }

  .st-safety-rescue {
    padding: 0;
  }

  .st-safety-rescue::before {
    display: none;
  }

  .st-safety-rescue-content {
    padding: 78px 0 68px;
  }

  .st-safety-rescue-heading {
    margin-bottom: 38px;
  }

  .st-safety-rescue-figure {
    width: 100%;
    min-height: 680px;
    margin-bottom: 78px;
  }

  .st-safety-rescue-image img {
    object-position: center center;
  }
}


/* =========================================================
   SMALL MOBILE — 360px
   ========================================================= */

@media (max-width: 420px) {

  .st-safety-height-feature {
    height: 400px;
    min-height: 400px;
  }

  .st-safety-height-image img {
    object-position: 39% center;
  }

  .st-safety-height-overlay {
    padding-bottom: 22px;
  }

  .st-safety-height-note {
    width: 100%;
    padding: 19px 20px 20px;
  }

  .st-safety-height-note p {
    font-size: 14px;
  }

  .st-safety-site-detail {
    margin-top: 52px;
  }

  .st-safety-site-image,
  .st-safety-site-image img {
    min-height: 460px;
    max-height: 520px;
  }

  .st-safety-site-copy {
    padding: 35px 26px 39px;
  }

  .st-safety-site-index {
    margin-bottom: 20px;
  }

  .st-safety-site-copy h3 {
    margin-bottom: 20px;
    font-size: 30px;
  }

  .st-safety-rescue-content {
    padding: 68px 0 58px;
  }

  .st-safety-rescue-figure {
    min-height: 570px;
    margin-bottom: 68px;
  }

  .st-safety-rescue-figure figcaption {
    padding: 27px 25px 29px;
  }

  .st-safety-rescue-figure figcaption p {
    font-size: 14px;
  }
}

/* ============================================================
   SKYTECH PROJECTS
   ST-HEADER-4B
   GLOBAL PHONE VISIBILITY
   ============================================================ */


/* ------------------------------------------------------------
   DESKTOP PHONE
   ------------------------------------------------------------ */

.st-header-phone .fl-module-content {
    margin: 0 0 7px !important;
}

.st-header-phone-inner {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;

    white-space: nowrap;

    font-family: "Inter", Helvetica, Arial, sans-serif;
}

.st-header-phone-label {
    color: #69727a;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.st-header-phone-number {
    color: #203b59 !important;

    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .015em;

    text-decoration: none !important;

    transition: color 180ms ease;
}

.st-header-phone-number:hover {
    color: #d65fa2 !important;
}

.st-header-phone-number:focus-visible {
    color: #d65fa2 !important;
    outline: 2px solid #d65fa2;
    outline-offset: 4px;
}


/* ------------------------------------------------------------
   CTA COLUMN
   Phone + project button become one contact block
   ------------------------------------------------------------ */

.st-header-cta-col > .fl-col-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.st-header-cta-col .st-header-phone,
.st-header-cta-col .st-header-cta {
    width: auto;
}


/* ------------------------------------------------------------
   COMPACT DESKTOP
   Lose the small label before sacrificing navigation space
   ------------------------------------------------------------ */

@media (min-width: 992px) and (max-width: 1180px) {

    .st-header-phone-label {
        display: none;
    }

    .st-header-phone-number {
        font-size: 13px;
    }

}


/* ------------------------------------------------------------
   TABLET + MOBILE
   Preserve our already-GREEN compact header/navigation.
   Mobile telephone access will be handled inside the menu.
   ------------------------------------------------------------ */

@media (max-width: 991px) {

    .st-header-phone {
        display: none !important;
    }

}


/* ============================================================
   END ST-HEADER-4B
   ============================================================ */

/* ============================================================
   SKYTECH PROJECTS
   ST-HEADER-4C
   MOBILE CALL ROUTE
   ============================================================ */

@media (max-width: 991px) {

    /*
     * Dedicated telephone action at bottom of opened navigation.
     * Keeps the closed header clean while making direct contact
     * obvious inside the mobile menu.
     */

    .st-header-menu .menu-item.st-mobile-call {
        margin-top: 12px;
        padding-top: 14px;

        border-top: 1px solid rgba(255, 255, 255, .16);
    }

    .st-header-menu .menu-item.st-mobile-call > a {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 100%;

        padding: 14px 18px !important;

        background: #d65fa2 !important;
        color: #ffffff !important;

        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        letter-spacing: .08em !important;
        text-align: center;
        text-transform: uppercase;

        text-decoration: none !important;

        transition:
            background-color 180ms ease,
            color 180ms ease;
    }

    .st-header-menu .menu-item.st-mobile-call > a:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: -4px;
    }
}


/* Pointer devices only — avoid sticky hover behaviour on phones */

@media (max-width: 991px) and (hover: hover) and (pointer: fine) {

    .st-header-menu .menu-item.st-mobile-call > a:hover {
        background: #ffffff !important;
        color: #203b59 !important;
    }
}


/* ============================================================
   END ST-HEADER-4C
   ============================================================ */

/* ============================================================
   SKYTECH PROJECTS
   ST-HEADER-4C.1
   MOBILE CALL ROUTE — DESKTOP VISIBILITY FIX
   ============================================================ */

/*
 * The telephone item exists in the WordPress navigation
 * so it must be explicitly hidden on desktop.
 */

@media (min-width: 992px) {

    .st-header-menu .menu-item.st-mobile-call {
        display: none !important;
    }

}


/* ============================================================
   END ST-HEADER-4C.1
   ============================================================ */

/* ============================================================
   SKYTECH PROJECTS
   ST-HEADER-4C.2
   COMPACT DESKTOP / TABLET BRIDGE
   Prevent desktop header crowding around 992–1100px
   ============================================================ */

@media (min-width: 992px) and (max-width: 1180px) {

    /*
     * Hide desktop-only contact treatments.
     * The dedicated telephone route remains available
     * from 991px downward with the mobile navigation.
     */

    .st-header-phone,
    .st-header-cta-col {
        display: none !important;
    }


    /*
     * Give the logo and navigation the full header width.
     */

    .st-header-logo-col {
        flex: 0 0 24% !important;
        width: 24% !important;
        max-width: 24% !important;
    }

    .st-header-nav-col {
        flex: 0 0 76% !important;
        width: 76% !important;
        max-width: 76% !important;

        justify-content: flex-end !important;
    }


    /*
     * Keep navigation compact but fully desktop.
     */

    .st-header-menu .menu {
        justify-content: flex-end;
        gap: 0;
    }

    .st-header-menu .menu > li > a {
        padding-left: 8px !important;
        padding-right: 8px !important;

        font-size: 12px !important;
        white-space: nowrap;
    }

}


/* ============================================================
   END ST-HEADER-4C.2
   ============================================================ */

/* ============================================================
   SKYTECH PROJECTS
   ST-FOOTER-1
   GLOBAL CONTACT NUMBERS
   ============================================================ */

.st-footer-contact {
    min-width: 0;
}

.st-footer-contact .st-footer-contact-intro {
    max-width: 280px;
    margin: 0 0 25px;
}

.st-footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 19px;

    margin: 0 0 29px;
}

.st-footer-contact-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.st-footer-contact-label {
    display: block;

    color: #aeb6c0;

    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.st-footer-contact-number {
    display: inline-block;

    color: #ffffff !important;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .01em;

    text-decoration: none !important;

    transition: color 180ms ease;
}

.st-footer-contact-number:hover {
    color: #d65fa2 !important;
}

.st-footer-contact-number:focus-visible {
    color: #d65fa2 !important;
    outline: 2px solid #d65fa2;
    outline-offset: 4px;
}


/* ------------------------------------------------------------
   TABLET AND MOBILE
   ------------------------------------------------------------ */

@media (max-width: 991px) {

    .st-footer-contact .st-footer-contact-intro {
        max-width: 500px;
    }

}

@media (max-width: 767px) {

    .st-footer-contact-list {
        gap: 21px;
        margin-bottom: 30px;
    }

    .st-footer-contact-number {
        font-size: 18px;
    }

}


/* ============================================================
   END ST-FOOTER-1
   ============================================================ */

/* =========================================================
   SKYTECH PROJECTS — CONTACT PAGE
   ST-CONTACT-1B — COMPLETE REPLACEMENT
   Replace the existing ST-CONTACT-1B section through EOF.
   ========================================================= */
.st-contact-page {
    --stc-pink: #d65fa2;
    --stc-dark: #151719;
    --stc-navy: #203b59;
    --stc-blue: #4288c9;
    --stc-light: #f4f5f6;
    --stc-text: #252a2e;
    --stc-muted: #69727a;
    --stc-white: #fff;
    --stc-border: #e3e6e8;
    color: var(--stc-text);
    font-family: inherit;
    overflow: hidden;
}
.st-contact-page *,
.st-contact-page *::before,
.st-contact-page *::after { box-sizing: border-box; }
.st-contact-page .st-contact-container {
    width: min(calc(100% - 64px), 1280px);
    margin-inline: auto;
}
.st-contact-page section[id] { scroll-margin-top: 110px; }
.st-contact-page a { text-decoration: none; }
.st-contact-page a:focus-visible,
.st-contact-page button:focus-visible,
.st-contact-page input:focus-visible,
.st-contact-page textarea:focus-visible,
.st-contact-page select:focus-visible {
    outline: 3px solid var(--stc-blue);
    outline-offset: 4px;
}

/* SHARED TYPE */
.st-contact-page .st-contact-kicker,
.st-contact-page .st-contact-eyebrow {
    display: block;
    margin-bottom: 20px;
    color: var(--stc-pink);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
.st-contact-page h1,
.st-contact-page h2,
.st-contact-page h3 {
    margin: 0;
    font-family: inherit;
    font-weight: 800;
    text-transform: uppercase;
}
.st-contact-page h1 span,
.st-contact-page h2 span { display: block; color: var(--stc-pink); }
.st-contact-page p { margin-top: 0; }
.st-contact-page .st-contact-section-heading h2,
.st-contact-page .st-contact-enquiry-intro h2,
.st-contact-page .st-contact-tender-intro h2,
.st-contact-page .st-contact-final h2 {
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.08;
    letter-spacing: -1.5px;
}

/* BUTTONS */
.st-contact-page .st-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 15px 26px;
    border: 2px solid transparent;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 1.1px;
    text-align: center;
    text-transform: uppercase;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.st-contact-page .st-contact-btn-primary {
    background: var(--stc-pink);
    border-color: var(--stc-pink);
    color: var(--stc-white);
}
.st-contact-page .st-contact-btn-outline {
    background: transparent;
    border-color: rgba(255,255,255,.65);
    color: var(--stc-white);
}
@media (hover: hover) and (pointer: fine) {
    .st-contact-page .st-contact-btn-primary:hover {
        background: #bf4e90;
        border-color: #bf4e90;
        color: var(--stc-white);
        transform: translateY(-2px);
    }
    .st-contact-page .st-contact-btn-outline:hover {
        background: var(--stc-white);
        border-color: var(--stc-white);
        color: var(--stc-dark);
        transform: translateY(-2px);
    }
}

/* HERO */
.st-contact-page .st-contact-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 570px;
    padding: 115px 0 120px;
    background: radial-gradient(ellipse at 90% 20%, rgba(66,136,201,.16), transparent 48%),
                linear-gradient(125deg, #151719 0%, #1d2936 100%);
    color: var(--stc-white);
}
.st-contact-page .st-contact-hero::after {
    position: absolute;
    right: -120px;
    bottom: -210px;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}
.st-contact-page .st-contact-hero-content {
    position: relative;
    z-index: 1;
    max-width: 860px;
}
.st-contact-page .st-contact-hero h1 {
    margin-bottom: 30px;
    color: var(--stc-white);
    font-size: clamp(48px, 6vw, 82px);
    line-height: 1.02;
    letter-spacing: -3px;
}
.st-contact-page .st-contact-hero-intro {
    max-width: 690px;
    margin-bottom: 36px;
    color: rgba(255,255,255,.78);
    font-size: 18px;
    line-height: 1.8;
}
.st-contact-page .st-contact-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* DIRECT CONTACT */
.st-contact-page .st-contact-details {
    padding: 105px 0 115px;
    background: var(--stc-white);
}
.st-contact-page .st-contact-section-heading { max-width: 700px; margin-bottom: 48px; }
.st-contact-page .st-contact-section-heading h2 { margin-bottom: 22px; }
.st-contact-page .st-contact-section-heading > p {
    max-width: 620px;
    margin-bottom: 0;
    color: var(--stc-muted);
    font-size: 17px;
    line-height: 1.8;
}
.st-contact-page .st-contact-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.st-contact-page .st-contact-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 330px;
    padding: 36px 30px;
    border: 1px solid var(--stc-border);
    background: var(--stc-light);
}
.st-contact-page .st-contact-card-primary {
    border-color: var(--stc-navy);
    background: var(--stc-navy);
    color: var(--stc-white);
}
.st-contact-page .st-contact-card-label {
    display: block;
    margin-bottom: 23px;
    color: var(--stc-pink);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 2px;
}
.st-contact-page .st-contact-card h3 {
    margin-bottom: 18px;
    color: inherit;
    font-size: clamp(19px, 2vw, 25px);
    line-height: 1.25;
    letter-spacing: -.5px;
}
.st-contact-page .st-contact-card-number {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 24px;
    color: var(--stc-text);
    font-size: clamp(21px, 2.1vw, 28px);
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.st-contact-page .st-contact-card-primary .st-contact-card-number { color: var(--stc-white); }
.st-contact-page .st-contact-card > p {
    margin-bottom: 30px;
    color: var(--stc-muted);
    font-size: 14px;
    line-height: 1.8;
}
.st-contact-page .st-contact-card-primary > p { color: rgba(255,255,255,.76); }
.st-contact-page .st-contact-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    align-self: flex-start;
    margin-top: auto;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--stc-pink);
    color: var(--stc-text);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1.2px;
}
.st-contact-page .st-contact-card-primary .st-contact-card-link { color: var(--stc-white); }
.st-contact-page .st-contact-card-link span {
    color: var(--stc-pink);
    font-size: 18px;
    line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
    .st-contact-page .st-contact-card-link:hover { color: var(--stc-pink); }
    .st-contact-page .st-contact-card-primary .st-contact-card-link:hover { color: var(--stc-white); }
}

/* PROJECT ENQUIRY */
.st-contact-page .st-contact-enquiry {
    padding: 110px 0;
    background: var(--stc-light);
}
.st-contact-page .st-contact-enquiry-layout,
.st-contact-page .st-contact-tender-layout {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: start;
    gap: clamp(36px, 6vw, 96px);
}
.st-contact-page .st-contact-enquiry-intro,
.st-contact-page .st-contact-tender-intro { min-width: 0; }
.st-contact-page .st-contact-enquiry-intro h2,
.st-contact-page .st-contact-tender-intro h2 { margin-bottom: 28px; }
.st-contact-page .st-contact-enquiry-intro > p,
.st-contact-page .st-contact-tender-intro > p {
    max-width: 580px;
    margin-bottom: 19px;
    color: var(--stc-muted);
    font-size: 17px;
    line-height: 1.8;
}
.st-contact-page .st-contact-enquiry-note {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 36px;
    padding: 23px 26px;
    border-left: 4px solid var(--stc-pink);
    background: var(--stc-white);
    color: var(--stc-text);
    font-size: 15px;
    line-height: 1.7;
}
.st-contact-page .st-contact-enquiry-note strong { font-weight: 800; }
.st-contact-page .st-contact-enquiry-note a,
.st-contact-page .st-contact-form-pending a { color: var(--stc-navy); font-weight: 800; text-decoration: underline; }

/* FORM PANELS AND MOUNT POINTS */
.st-contact-page .st-contact-form-panel {
    min-width: 0;
    padding: clamp(28px, 3.5vw, 48px);
    border: 1px solid var(--stc-border);
    background: var(--stc-white);
    box-shadow: 0 14px 45px rgba(21,23,25,.06);
}
.st-contact-page .st-contact-form-heading { margin-bottom: 30px; }
.st-contact-page .st-contact-form-heading > span {
    display: block;
    margin-bottom: 16px;
    color: var(--stc-pink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}
.st-contact-page .st-contact-form-heading h3 {
    margin-bottom: 13px;
    color: var(--stc-dark);
    font-size: clamp(22px, 2.5vw, 30px);
    line-height: 1.18;
    letter-spacing: -.5px;
}
.st-contact-page .st-contact-form-heading p {
    margin-bottom: 0;
    color: var(--stc-muted);
    font-size: 15px;
    line-height: 1.75;
}
.st-contact-page .st-contact-form-mount { min-width: 0; }
.st-contact-page .st-contact-form-pending {
    margin: 0;
    padding: 23px 24px;
    border: 1px dashed #cbd2d8;
    background: var(--stc-light);
    color: var(--stc-muted);
    font-size: 15px;
    line-height: 1.75;
}
/* Future plugin form fields; scoped to the existing mount points. */
.st-contact-page .st-contact-form-mount form { display: grid; gap: 19px; }
.st-contact-page .st-contact-form-mount label {
    display: block;
    margin-bottom: 7px;
    color: var(--stc-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}
.st-contact-page .st-contact-form-mount input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.st-contact-page .st-contact-form-mount select,
.st-contact-page .st-contact-form-mount textarea {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #cbd2d8;
    border-radius: 2px;
    background: var(--stc-white);
    color: var(--stc-text);
    font: inherit;
    font-size: 15px;
}
.st-contact-page .st-contact-form-mount textarea { min-height: 130px; resize: vertical; }
.st-contact-page .st-contact-form-mount input[type="file"] {
    display: block;
    max-width: 100%;
    font: inherit;
    font-size: 14px;
}
.st-contact-page .st-contact-form-mount button[type="submit"] {
    min-height: 52px;
    padding: 14px 22px;
    border: 2px solid var(--stc-pink);
    border-radius: 3px;
    background: var(--stc-pink);
    color: var(--stc-white);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}
.st-contact-page .st-contact-form-mount button[type="submit"]:disabled { opacity: .6; cursor: wait; }

/* TENDER SUBMISSION */
.st-contact-page .st-contact-tender {
    padding: 110px 0;
    background: var(--stc-white);
}
.st-contact-page .st-contact-tender-points {
    display: grid;
    gap: 15px;
    margin-top: 36px;
}
.st-contact-page .st-contact-tender-point {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--stc-border);
}
.st-contact-page .st-contact-tender-point > span {
    flex: 0 0 36px;
    color: var(--stc-pink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.7;
}
.st-contact-page .st-contact-tender-point > p {
    margin: 0;
    color: var(--stc-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.7;
}
.st-contact-page .st-contact-tender-panel { background: var(--stc-light); }
.st-contact-page .st-contact-tender-panel .st-contact-form-pending { background: var(--stc-white); }

/* FINAL CTA */
.st-contact-page .st-contact-final {
    padding: 100px 0 110px;
    background: linear-gradient(125deg, #151719 0%, #203b59 100%);
    color: var(--stc-white);
    text-align: center;
}
.st-contact-page .st-contact-final .st-contact-container { max-width: 900px; }
.st-contact-page .st-contact-final h2 { margin-bottom: 24px; color: var(--stc-white); }
.st-contact-page .st-contact-final > .st-contact-container > p {
    max-width: 700px;
    margin: 0 auto 32px;
    color: rgba(255,255,255,.78);
    font-size: 17px;
    line-height: 1.8;
}

/* TABLET */
@media (max-width: 991px) {
    .st-contact-page .st-contact-hero { min-height: 490px; padding: 90px 0; }
    .st-contact-page .st-contact-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-contact-page .st-contact-card-primary { grid-column: 1 / -1; min-height: 0; }
    .st-contact-page .st-contact-enquiry-layout,
    .st-contact-page .st-contact-tender-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .st-contact-page .st-contact-enquiry-intro,
    .st-contact-page .st-contact-tender-intro { max-width: 760px; }
    .st-contact-page .st-contact-form-panel { max-width: 760px; width: 100%; }
    .st-contact-page .st-contact-details,
    .st-contact-page .st-contact-enquiry,
    .st-contact-page .st-contact-tender { padding: 80px 0; }
}

/* MOBILE */
@media (max-width: 767px) {
    .st-contact-page .st-contact-container { width: min(calc(100% - 36px), 1280px); }
    .st-contact-page section[id] { scroll-margin-top: 82px; }
    .st-contact-page .st-contact-hero { min-height: 0; padding: 78px 0 82px; }
    .st-contact-page .st-contact-hero::after { right: -250px; bottom: -310px; }
    .st-contact-page .st-contact-hero h1 {
        margin-bottom: 24px;
        font-size: clamp(39px, 10vw, 58px);
        line-height: 1.04;
        letter-spacing: -1.8px;
        overflow-wrap: anywhere;
    }
    .st-contact-page .st-contact-hero-intro { margin-bottom: 28px; font-size: 16px; line-height: 1.7; }
    .st-contact-page .st-contact-hero-actions { flex-direction: column; align-items: stretch; }
    .st-contact-page .st-contact-btn { width: 100%; }
    .st-contact-page .st-contact-details,
    .st-contact-page .st-contact-enquiry,
    .st-contact-page .st-contact-tender { padding: 64px 0; }
    .st-contact-page .st-contact-section-heading { margin-bottom: 30px; }
    .st-contact-page .st-contact-section-heading h2,
    .st-contact-page .st-contact-enquiry-intro h2,
    .st-contact-page .st-contact-tender-intro h2,
    .st-contact-page .st-contact-final h2 {
        font-size: clamp(31px, 8.5vw, 42px);
        letter-spacing: -1px;
    }
    .st-contact-page .st-contact-section-heading > p,
    .st-contact-page .st-contact-enquiry-intro > p,
    .st-contact-page .st-contact-tender-intro > p { font-size: 16px; line-height: 1.7; }
    .st-contact-page .st-contact-card-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .st-contact-page .st-contact-card-primary { grid-column: auto; }
    .st-contact-page .st-contact-card { min-height: 0; padding: 29px 25px; }
    .st-contact-page .st-contact-card h3 { font-size: 22px; }
    .st-contact-page .st-contact-card-number { font-size: 24px; }
    .st-contact-page .st-contact-form-panel { padding: 25px 20px; }
    .st-contact-page .st-contact-enquiry-layout,
    .st-contact-page .st-contact-tender-layout { gap: 30px; }
    .st-contact-page .st-contact-enquiry-note { padding: 20px; }
    .st-contact-page .st-contact-final { padding: 75px 0 80px; }
    .st-contact-page .st-contact-final > .st-contact-container > p { font-size: 16px; line-height: 1.7; }
}

@media (max-width: 380px) {
    .st-contact-page .st-contact-container { width: calc(100% - 32px); }
    .st-contact-page .st-contact-card { padding: 25px 21px; }
    .st-contact-page .st-contact-form-panel { padding: 23px 17px; }
    .st-contact-page .st-contact-hero h1 { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    .st-contact-page .st-contact-btn { transition: none; }
}


/* =========================================================
   ST-SITE-ALIGN — CONTENT WIDTH CONSISTENCY
   Align Contact with Home and About
   ========================================================= */

@media (min-width: 993px) {
    .st-contact-page .st-contact-container {
        width: min(1180px, calc(100% - 80px));
        margin-inline: auto;
    }
}


/* =========================================================
   ST-SITE-ALIGN — REMAINING PAGE ALIGNMENT
   Projects, Industries and Safety
   ========================================================= */

@media (min-width: 993px) {

    .st-projects-page .st-projects-container,
    .st-industries-page .st-industries-container,
    .st-safety-page .st-safety-container {
        width: min(1180px, calc(100% - 80px));
        margin-inline: auto;
    }

}










/* =========================================================
   ST-PROJECTS-IMAGES-1 — PROJECT PHOTOS AND EXPANDABLE GALLERIES
   Scoped to Projects; preserves ST-SITE-ALIGN and other pages.
   ========================================================= */
.st-projects-page .st-projects-photo {
    margin: 0;
    overflow: hidden;
    background: #e7ebef;
}
.st-projects-page .st-projects-photo > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.st-projects-page .st-projects-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.st-projects-page .st-projects-photo.st-projects-image-featured {
    position: relative;
    min-height: 690px;
    background: #151719;
}
.st-projects-page .st-projects-photo.st-projects-image-featured > a {
    position: absolute;
    inset: 0;
}
.st-projects-page .st-projects-photo.st-projects-card-image {
    position: relative;
    aspect-ratio: 16 / 10;
}
.st-projects-page .st-projects-photo.st-projects-card-image > a {
    position: absolute;
    inset: 0;
}
.st-projects-page .st-projects-gallery {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e3e6e8;
    color: #203b59;
}
.st-projects-page .st-projects-gallery summary {
    display: list-item;
    min-height: 44px;
    padding: 10px 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}
.st-projects-page .st-projects-gallery summary::marker {
    color: #d65fa2;
}
.st-projects-page .st-projects-gallery summary:focus-visible {
    outline: 2px solid #d65fa2;
    outline-offset: 4px;
}
.st-projects-page .st-projects-gallery-help {
    margin: 4px 0 14px;
    font-size: 12px;
    line-height: 1.6;
    color: #69727a;
}
.st-projects-page .st-projects-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.st-projects-page .st-projects-gallery-grid > a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e7ebef;
}
.st-projects-page .st-projects-gallery-grid img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
}
.st-projects-page .st-projects-featured-content .st-projects-gallery {
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}
.st-projects-page .st-projects-featured-content .st-projects-gallery-help {
    color: #cbd3db;
}
@media (max-width: 992px) {
    .st-projects-page .st-projects-photo.st-projects-image-featured {
        min-height: 0;
        aspect-ratio: 3 / 4;
    }
}
@media (max-width: 420px) {
    .st-projects-page .st-projects-gallery-grid {
        gap: 8px;
    }
}

/* ST-PROJECTS-OVERLAY-1 — SAME-PAGE PHOTO VIEWER */
.st-projects-page .st-lightbox {
    width: min(1280px, calc(100% - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 16px;
    border: 1px solid #42505d;
    border-radius: 6px;
    background: #151719;
    color: #fff;
    box-sizing: border-box;
    overflow: auto;
    overscroll-behavior: contain;
}
.st-projects-page .st-lightbox::backdrop {
    background: rgba(8, 14, 20, 0.9);
}
.st-projects-page .st-lightbox-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.st-projects-page .st-lightbox-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
}
.st-projects-page .st-lightbox-count {
    margin: 0 auto 0 0;
    color: #d4dbe2;
    font-size: 13px;
}
.st-projects-page .st-lightbox button {
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #73808d;
    border-radius: 3px;
    background: #203b59;
    color: #fff;
    font: 700 14px/1.2 Arial, sans-serif;
    cursor: pointer;
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
}
.st-projects-page .st-lightbox button:hover {
    background: #354e68;
}
.st-projects-page .st-lightbox button:focus-visible {
    outline: 3px solid #d65fa2;
    outline-offset: 3px;
}
.st-projects-page .st-lightbox button:disabled {
    opacity: 0.4;
    cursor: default;
}
.st-projects-page .st-lightbox-stage {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 12px;
}
.st-projects-page .st-lightbox-picture {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    min-height: 160px;
}
.st-projects-page .st-lightbox-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 200px);
    max-height: calc(100dvh - 200px);
    object-fit: contain;
}
.st-projects-page .st-lightbox-status {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 20px;
    color: #fff;
    text-align: center;
    font-size: 14px;
}
.st-projects-page .st-lightbox-status[hidden] { display: none; }
.st-projects-page .st-lightbox-caption {
    margin: 16px 56px 0;
    color: #d4dbe2;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
}
@media (max-width: 600px) {
    .st-projects-page .st-lightbox { padding: 12px; width: calc(100% - 16px); }
    .st-projects-page .st-lightbox-toolbar { gap: 8px; }
    .st-projects-page .st-lightbox-title { font-size: 11px; letter-spacing: 0.03em; }
    .st-projects-page .st-lightbox-stage { gap: 6px; }
    .st-projects-page .st-lightbox-caption { margin-inline: 0; font-size: 12px; }
}
@media (max-width: 600px) {
    .st-projects-page .st-lightbox-stage { grid-template-columns: 1fr 1fr; gap: 10px; }
    .st-projects-page .st-lightbox-picture { grid-column: 1 / -1; grid-row: 1; }
    .st-projects-page .st-lightbox-previous { grid-column: 1; grid-row: 2; justify-self: start; }
    .st-projects-page .st-lightbox-next { grid-column: 2; grid-row: 2; justify-self: end; }
    .st-projects-page .st-lightbox-image { max-height: calc(100dvh - 250px); }
}

/* ST-PROJECTS-LEAD-FILL-1
   Append AFTER the current site stylesheet and overlay rules.
   Fills lead-photo frames only; overlay and gallery thumbnails keep full photos.
*/
.st-projects-page .st-projects-photo > a > img {
    object-fit: cover;
    object-position: 50% 40%;
}
/* Keep the technician higher in the crop on portrait lead photos. */
.st-projects-page .st-projects-photo > a > img[src$="skytech-york-street-lead.webp"],
.st-projects-page .st-projects-photo > a > img[src$="skytech-chifley-tower-lead.webp"] {
    object-position: 50% 25%;
}
.st-projects-page .st-projects-photo > a > img[src$="skytech-salvation-army-headquarters-lead.webp"] {
    object-position: 50% 28%;
}