/*
 * Native Space — WordPress-side rules.
 *
 * The production site expressed these through YOOtheme's per-element
 * "#page#N / #footer#N" inline styles, which are builder artefacts. Because the
 * WordPress build emits semantic classes instead, the same declarations are
 * reproduced here against stable class names. Values are taken verbatim from
 * the production markup.
 */

/* ---------------------------------------------------------------- footer */

.ns-footer {
	background: #3B3E3D;
}

/* footer#1 — logo/social card */
.ns-footer-card {
	max-width: 341px;
	margin-left: auto;
	margin-right: auto;
	padding: 16px;
	align-items: center;
	border-radius: 8px;
	border: 0 solid #CFD2D0;
	background: #222423;
}

/* footer#2 — "EXPLORE NATIVE SPACE" */
.ns-footer-heading {
	color: #FFF;
	font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 120%;
	text-transform: uppercase;
	margin-bottom: 16px;
}

/* footer#7 — link list */
.ns-footer-links .uk-subnav > li > a,
.ns-footer-links .uk-subnav > li > span > .el-link,
.ns-footer-links .el-link {
	color: #FFF;
	text-transform: capitalize;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 120%;
}

.ns-footer-links .uk-subnav {
	row-gap: 24px;
}

.ns-footer-links .uk-subnav > li > a:hover,
.ns-footer-links .el-link:hover {
	color: #C5EA76;
}

/* footer#8 — CTA button */
.ns-footer-cta {
	max-width: 321px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #000;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.32px;
}

.ns-accreditation {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* ---------------------------------------------------------------- hero */

/* page#0 — hero headline */
.ns-hero-title {
	width: 738px;
	max-width: 100%;
	color: #FFF;
}

/* page#1 — hero CTA wrapper */
.ns-hero-cta {
	max-width: 552px;
	height: 48px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.ns-hero-cta .el-content,
.ns-cta-wide .el-content {
	padding: 0 74px;
}

/* page#2 — scroll-down pill */
.ns-scroll-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 187px;
	height: 64px;
}

.ns-scroll-pill .el-content {
	background-color: #222423;
	background-size: contain;
	border-radius: 32px;
	padding-left: 16px;
	padding-right: 16px;
	white-space: nowrap;
}

.ns-scroll-pill .el-content img {
	margin-left: 16px;
	vertical-align: middle;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* page#3 — hero subheading */
.ns-hero-sub {
	color: #FFF;
	width: 392px;
	max-width: 100%;
}

/* ---------------------------------------------------------------- cards */

/* page#9 — capability tiles */
.ns-capability-grid .el-item {
	padding: 24px;
}

.ns-capability-grid h3 {
	color: #fff;
}

#capabilities .el-title {
	display: flex;
	align-items: center;
	gap: 16px;
}

#capabilities img {
	display: block;
}

.ns-section-heading-center {
	color: #FFF;
	text-align: center;
	padding-bottom: 24px;
}

/* ---------------------------------------------------------------- misc */

.ns-map-panel {
	height: 280px;
	margin-top: 6rem;
}

@media (max-width: 959px) {
	.ns-hero-title,
	.ns-hero-sub {
		width: auto;
	}

	.ns-hero-cta .el-content,
	.ns-cta-wide .el-content {
		padding: 0 24px;
	}
}

/* ------------------------------------------------------- project cards */

/* Matches the production panel-slider item: 435x440 crop, dark scrim,
   title bottom-left in Inter 500 / 24px / +2% tracking. */
.ns-project-card-overlay {
	background: rgba(35, 35, 35, 0.35);
	width: 100%;
}

.ns-project-card-overlay .el-title {
	font-family: Inter, sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 100%;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
}

.ns-section-title {
	font-family: Inter, sans-serif;
	font-weight: 500;
}

/* ------------------------------------------------------- inverse headings */

/*
 * Production's compiled theme.12.css colours headings white inside an
 * .uk-inverse-light section; the yootheme.css bundled here only sets
 * --uk-inverse: light, with no rule consuming it for headings, so the hero
 * headline rendered dark against the video. Restored explicitly.
 */
.uk-inverse-light h1,
.uk-inverse-light h2,
.uk-inverse-light h3,
.uk-inverse-light h4,
.uk-inverse-light .uk-h1,
.uk-inverse-light .uk-h2,
.uk-inverse-light .uk-h3,
.uk-inverse-light .uk-heading-medium,
.uk-inverse-light .uk-heading-small {
	color: #FFF;
}

/* page#0 / mobile hero headline — white in both hero variants. */
.ns-hero-title,
.ns-hero-title > div {
	color: #FFF;
}

/* ------------------------------------------------- homepage body sections */

/* fs-section-6 — intro band sits on the light brand tint. */
.ns-section-intro {
	background-color: #F0F2EE;
}

.ns-section-intro .el-image {
	border-radius: 8px;
	max-width: 100%;
	height: auto;
}

/*
 * "Where We Operate" — the green band inherits uk-section-primary, whose
 * heading colour is already light; the city headings use uk-text-success.
 */

/* page#9 — delivery-category tiles. */
.ns-delivery-grid .el-item {
	padding: 16px;
	border-radius: 8px;
}

.ns-delivery-grid .el-title {
	color: #FFF;
}

.ns-delivery-grid .el-image {
	display: block;
}

/* Accreditation strip background, per production #module-125#2. */
.ns-accreditations {
	background-color: #F0F2EE;
}

/* --------------------------------------------- Start A Project With Us CTA */

/*
 * The CTA sits on the dark "Rectangle 100" band, so the heading needs to be
 * white — uk-section-default gives it the light-background body colour, which
 * rendered it dark against the artwork. Extra top margin lifts the heading and
 * button off the band's top edge and clears the team cutout, which is pulled
 * up out of the section (bottom: -85px) on @m.
 */
.ns-cta-section {
	margin-top: 64px;
}

.ns-cta-section .ns-cta-title,
.ns-cta-section .ns-cta-title * {
	color: #FFF;
}

.ns-cta-section .ns-cta-title {
	margin-top: 40px;
}

.ns-cta-section .ns-cta-button {
	margin-bottom: 40px;
}

@media (max-width: 959px) {
	.ns-cta-section {
		margin-top: 40px;
	}

	.ns-cta-section .ns-cta-title {
		margin-top: 24px;
	}
}

/* ------------------------------------------------------ accreditation row */

/*
 * The five badges are drawn at different intrinsic sizes (the LGCA badge is
 * 242x142 against roughly 101x96 for the ISO marks). Capping the rendered
 * height inside the equal-width columns makes them read as one consistent
 * row instead of the LGCA badge towering over — and overflowing — the rest.
 */
.ns-accreditations .ns-accreditation {
	max-height: 84px;
	width: auto;
}

/*
 * On the single-row layout each column is only ~1/5 of the 3-5 block, so
 * between @s and @xl a fixed pixel height would let max-width: 100% shrink
 * the wide LGCA badge below its siblings and leave the row uneven. Scaling
 * the cap with the viewport keeps every badge inside its column at its own
 * aspect ratio, so they stay visually matched; the clamp ceiling is the
 * production 72px render height.
 */
.ns-accreditations .uk-visible\@s .ns-accreditation {
	max-height: clamp(28px, 4.5vw, 72px);
}

.ns-membership .ns-accreditation {
	max-height: 72px;
	width: auto;
}

/* ------------------------------------------------------------ contact us */

/*
 * Reproduces the per-element "#page#N" inline styles YOOtheme emitted on
 * nativespace.com.au/contact-us. Values are verbatim from that markup; the
 * mapping from builder id to class is noted on each rule so the two can be
 * diffed against production again later.
 *
 * The shared Inter heading stack (32px/500, 110% leading, +0.64px tracking,
 * capitalised) is used by page#7, page#11 and page#15 — the "Locations" and
 * both "Contact Details" headings — so it is written once as
 * .ns-contact-heading.
 */

/*
 * page#3 — dark band behind the desktop "Get In Touch".
 *
 * Production sets no inline padding on this section — it is a plain
 * uk-section, and the overlay header is position:absolute so it reserves no
 * space. The padding is therefore stated explicitly here rather than left to
 * the cascade, because this theme's yootheme.css resolves .uk-section to the
 * 40px base (its 70px @m override does not apply at this breakpoint), which
 * put the heading 66px higher than production.
 *
 * Values measured from the live page at 1440px: the band runs 211px tall with
 * the headline starting 78px below its top edge.
 */
.ns-contact-intro {
	background-color: #222423;
	padding-top: 70px;
	padding-bottom: 70px;
}

/*
 * page#2 / page#5 — inner container column gap.
 *
 * The 80px top margin is the one piece of this band that production does not
 * get from CSS: UIkit's Grid component adds .uk-grid-margin to the row at
 * runtime, and the stylesheet's own `* + .uk-grid-margin` rule cannot match
 * because this container is the first child of .fs-section-content. Measured
 * on the live page (section padding edge at y=70, headline at y=150), so it
 * is set explicitly here — leaving it to the cascade puts the headline 80px
 * too high and shortens the band from 362px to 260px.
 */
.ns-contact-intro-grid {
	column-gap: 16px;
}

.ns-contact-intro .ns-contact-intro-grid {
	margin-top: 80px;
}

/* page#0 / page#1 — headline and lead copy on the dark band. */
.ns-contact-intro-title,
.ns-contact-intro-text {
	color: #fff;
}

/*
 * Mobile band: production set the background and padding inline on the
 * section itself (background-color: #222423; padding-top: 136px;
 * padding-bottom: 24px) — the top padding clears the fixed header.
 */
.ns-contact-intro-mobile {
	background-color: #222423;
	padding-top: 136px;
	padding-bottom: 24px;
}

/* page#4 — mobile headline, H2_Mobile token. */
.ns-contact-intro-title-mobile {
	color: var(--Type-primary, #FFF);
	font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 28px;
	font-style: normal;
	font-weight: 600;
	line-height: 30.8px;
	letter-spacing: 0.56px;
	text-transform: capitalize;
}

/* page#6 — light tint behind the form. */
.ns-contact-form-section {
	background-color: #E6E7E6;
}

/*
 * RSForm's front.min.css carries `.formNoError{display:none}` — the
 * "Invalid Input" span next to every field is the placeholder its validation
 * script swaps to .formError on a failed submit, and it is never visible in
 * the form's resting state. inc/contact-form.php reproduces the span so the
 * DOM matches production, but that stylesheet is a Joomla asset and is not
 * vendored here (no stylesheet transfer from the compromised source), so the
 * one rule that matters is restated.
 */
.formNoError {
	display: none;
}

/*
 * page#23 — the green card holding the maps and contact details. Production
 * set the radius and background inline, with padding-top: 0 so the card butts
 * up against the form section above it.
 */
.ns-contact-locations {
	background: #71867C;
	border-radius: 8px;
	padding-top: 0;
	padding-bottom: 48px;
}

/* page#7 / page#11 / page#15 — H4 token, shared by all three headings. */
.ns-contact-heading {
	color: #ffffff;
	font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 32px;
	font-style: normal;
	font-weight: 500;
	line-height: 35.2px;
	letter-spacing: 0.64px;
	text-transform: capitalize;
}

/* page#8 / page#9 / page#16 / page#17 — office addresses. */
.ns-contact-address {
	color: #ffffff;
}

/* page#10 — stacked-map grid padding. */
.ns-contact-map-grid {
	padding-top: 20px;
	padding-bottom: 44px;
}

/* page#14 — phone-only contact block. */
.ns-contact-details-grid {
	padding-top: 40px;
}

/*
 * page#22 — desktop grid. The 36px left margin indents the maps column away
 * from the "Contact Details" heading, matching production.
 */
.ns-contact-desktop-grid {
	padding-top: 37px;
	padding-bottom: 80px;
	margin-left: 36px;
}

/* page#12 / page#13 / page#19 — phone and email, both states white. */
.ns-contact-phone,
.ns-contact-phone p,
.ns-contact-email,
.ns-contact-email p {
	color: #ffffff;
}

.ns-contact-phone a,
.ns-contact-email a {
	color: #ffffff;
	text-decoration: none;
}

/*
 * page#18 set a .el-title Subheading token, but that class belongs to
 * YOOtheme's own element wrapper and matches nothing in this markup — the
 * office captions are plain <h1>/<h3 class="ns-button">, styled entirely by
 * the .ns-button rule already in yootheme.css (dark pill, 34px, white, and
 * notably no text-transform). Nothing extra is needed here; applying the
 * token to .ns-button instead would uppercase captions that production
 * renders as "Head Office".
 */

/*
 * page#20 carried margin-top: 32px, but production's own measurement shows
 * this row at margin-top: 0 — the builder emitted the declaration inside a
 * malformed block (`#page#19 .el-ement{...}}` closes early, so the following
 * `#page#20` rule is discarded by the CSS parser). Reproducing the declared
 * value rather than the rendered one would push this block 32px down, so it
 * is deliberately not set. Its sibling `#page#21 .el-item{margin-top: : 32px}`
 * is likewise dead — a doubled colon makes it invalid.
 */

@media (max-width: 1199px) {
	/* The 36px indent belongs to the @l layout only. */
	.ns-contact-desktop-grid {
		margin-left: 0;
	}
}

/* --------------------------------------------------- capability page header */

/*
 * The hero/heading bands on every /capabilities/<slug> page. Values are
 * verbatim from the builder's own per-element styles, which are identical on
 * all nine pages (verified against each page's first inline <style> block):
 *
 *   #page#0 { color: #FFFFFF }                 heading
 *   #page#1 { color: #FFFFFF }                 tagline
 *   #page#2 { max-width: 776px }               body intro column
 *   #page#3/#5 .el-content { … }               the two buttons
 *
 * Without the first two the heading and tagline rendered in the body colour
 * (#222423) against the #222423 band — present in the DOM but invisible.
 * `uk-section-custom` sets no colour of its own in either stylesheet, and the
 * builder never emitted a uk-light class here, so the declaration has to be
 * restated rather than inherited.
 */
.ns-capability-header .ns-capability-title,
.ns-capability-header .ns-capability-title *,
.ns-capability-header .ns-capability-lead,
.ns-capability-header .ns-capability-lead * {
	color: #FFFFFF;
}

/*
 * #page#4 { color: #FFFFFF; max-width: 885px } — the lead copy, which sits in
 * this same dark band on production as a two-column panel.
 */
.ns-capability-header .ns-capability-body,
.ns-capability-header .ns-capability-body * {
	color: #FFFFFF;
}

.ns-capability-header .ns-capability-body {
	max-width: 885px;
}

/* #page#3 / #page#5 .el-content — "Back To Capabilities" / "Enquire Now". */
.ns-capability-header .el-content {
	color: var(--Buttons-button-secondary, #FFF);
	padding-top: 14px;
	padding-bottom: 14px;
	max-width: 264px;
	font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.32px;
	text-transform: uppercase;
}

/*
 * fs-section-1 responsive padding, from the builder's own media queries. It
 * uses !important there, and the same is needed here to beat .uk-section.
 */
.ns-capability-header {
	padding-top: 48px !important;
	padding-bottom: 32px !important;
}

@media (min-width: 640px) {
	.ns-capability-header {
		padding-bottom: 36px !important;
	}
}

@media (min-width: 960px) {
	.ns-capability-header {
		padding-top: 96px !important;
		padding-bottom: 72px !important;
	}
}

/* -------------------------------------------------------------- about us */

/*
 * fs-section-1 padding on About Us. The builder emits a per-page media-query
 * block for this section, and About Us's values differ from the capability
 * pages' (48/48 then 96/96, with no distinct @s step), so it gets its own
 * class rather than sharing .ns-capability-header.
 */
.ns-about-band {
	padding-top: 48px !important;
	padding-bottom: 48px !important;
}

@media (min-width: 960px) {
	.ns-about-band {
		padding-top: 96px !important;
		padding-bottom: 96px !important;
	}
}

/* --------------------------------------------- capabilities index page */

/* #page#0 — "Our Capabilities" on the dark header band. */
.ns-capindex-header .ns-capindex-title {
	color: var(--Type-primary, #FFF);
}

/* #page#1 — the @l-only rule under the heading. */
.ns-capindex-header .ns-capindex-rule {
	padding-left: 48px;
	width: 776px;
	max-width: 100%;
}

/* #page#2 — intro copy column. */
.ns-capindex-intro .ns-capindex-lead {
	max-width: 548px;
}

/* #page#3 / #page#4 / #page#5 .el-image — every band image is rounded. */
.ns-capindex-intro .el-image,
.ns-capindex-intro img,
article .fs-section .el-image {
	border-radius: 8px;
}

/* fs-section-0 padding, from the builder's per-page media queries. */
.ns-capindex-header {
	padding-top: 32px !important;
	padding-bottom: 28px !important;
}

@media (min-width: 640px) {
	.ns-capindex-header {
		padding-top: 48px !important;
	}
}

@media (min-width: 1200px) {
	.ns-capindex-header {
		padding-top: 96px !important;
		padding-bottom: 56px !important;
	}
}

/* fs-section-1 padding. */
.ns-capindex-intro {
	padding-top: 40px !important;
	padding-bottom: 40px !important;
}

@media (min-width: 960px) {
	.ns-capindex-intro {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}
}

/* ---------------------------------------------------------------- Projects
 * The Joomla page carried these rules in an inline <style> scoped to a
 * YOOtheme builder id (#template-5R83dIAH\#7). The migration flattened the
 * builder markup, so that id no longer exists and the rules were lost --
 * leaving the filter as plain 24px text (white, so the inactive items were
 * invisible against the page) and the cards oversized.
 *
 * Re-scoped to the filter block's own classes and measured from
 * https://nativespace.com.au/projects.
 */

/* Filter rail: pill buttons, stacked. */
[uk-filter] .el-nav {
	padding-top: 56px;
}

[uk-filter] .el-nav a {
	display: flex;
	height: 40px;
	max-width: 206px;
	padding: 8px 20px;
	margin-bottom: 16px;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	text-align: center;
	border: 1px solid #848C87;
	border-radius: 24px;
	color: #222423;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.32px;
	text-transform: uppercase;
}

[uk-filter] .el-nav a:hover,
[uk-filter] .el-nav > li.uk-active > a {
	background-color: #71867C;
	color: #FFFFFF;
}

/* Project cards. */
[uk-filter] .el-title {
	font-family: Inter, sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.48px;
	text-transform: uppercase;
}

[uk-filter] .el-image {
	height: 328px;
	object-fit: cover;
}

/*
 * Contact form honeypot (inc/contact-form.php).
 *
 * Positioned off-screen rather than display:none or visibility:hidden on
 * purpose: a bot that honours CSS skips a display:none field, which is exactly
 * the bot we want to catch. Off-screen is invisible to a sighted user while
 * still being a "real" field in the DOM. aria-hidden + tabindex="-1" on the
 * markup keep it away from screen readers and the keyboard tab order.
 */
.ns-contact-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Submission notice above the form. */
.ns-contact-notice {
	margin-bottom: 24px;
}

.ns-contact-notice:focus {
	outline: 2px solid #71867C;
	outline-offset: 2px;
}