/*
Theme Name:   Woodmart Child - Luxland
Theme URI:    https://www.luxland.ae/
Description:  Child theme for Woodmart. All Luxland Landscaping customisations live here so they survive parent theme updates. Do not edit the parent Woodmart theme directly.
Author:       Luxland Landscaping LLC
Author URI:   https://www.luxland.ae/
Template:     woodmart
Version:      1.4.0
Text Domain:  woodmart-child
*/

/* ==========================================================================
   Custom CSS for Luxland Landscaping
   --------------------------------------------------------------------------
   Loads AFTER the parent Woodmart stylesheet, so anything here overrides it.
   The stylesheet is versioned by file modification time (see functions.php),
   so edits appear immediately rather than being masked by browser cache.
   ========================================================================== */

:root {
	--lux-sage: #aab4a1;
	--lux-sage-dark: #8b9781;
	--lux-ink: #1c1f1a;
	--lux-muted: #6d7268;
	--lux-line: rgba(28, 31, 26, 0.10);
	--lux-radius: 4px;
}


/* --------------------------------------------------------------------------
   1. Accessibility fixes
   -------------------------------------------------------------------------- */

/* Visible keyboard focus outline - the parent theme suppresses this, which
   makes the site unusable for keyboard navigation. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   2. Contact Form 7 - hide the hidden-fields wrapper
   --------------------------------------------------------------------------
   CF7 wraps its hidden inputs in <fieldset class="hidden-fields-container">.
   The parent theme gives every fieldset a border and padding, so this renders
   as an empty bordered box above the first real field. The inputs inside are
   hidden ones only; display:none does not stop them being submitted.
   -------------------------------------------------------------------------- */

.wpcf7-form .hidden-fields-container {
	display: none;
}


/* ==========================================================================
   3. Shared section scaffolding  (Our Team / Our Certifications)
   ========================================================================== */

.lux-section {
	padding: clamp(48px, 7vw, 96px) 0;
}

.lux-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.lux-section__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto clamp(32px, 4vw, 56px);
}

.lux-section__title {
	margin: 0;
	color: var(--lux-ink);
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* Understated rule beneath the heading, echoing the site's sage accent. */
.lux-section__title::after {
	content: "";
	display: block;
	width: 52px;
	height: 2px;
	margin: 18px auto 0;
	background: var(--lux-sage);
}

.lux-section__sub {
	margin: 16px 0 0;
	color: var(--lux-muted);
	font-size: 16px;
	line-height: 1.65;
}


/* --------------------------------------------------------------------------
   4. Scroll reveal
   --------------------------------------------------------------------------
   Elements are only hidden once JavaScript has confirmed it can reveal them
   again (the .lux-reveal--armed class). Without JS everything stays visible,
   so content is never trapped behind a failed animation.
   -------------------------------------------------------------------------- */

.lux-reveal--armed {
	opacity: 0;
	transform: translateY(18px);
}

.lux-reveal--armed.is-visible {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--lux-delay, 0ms),
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--lux-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	.lux-reveal--armed,
	.lux-reveal--armed.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* ==========================================================================
   5. Our Team
   ========================================================================== */

/* Flex rather than grid, so an incomplete final row centres itself instead
   of leaving one lonely card hanging on the left. The team list will grow, and
   this stays tidy at any count. */
.lux-team__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(20px, 3vw, 36px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lux-team__item {
	flex: 0 1 210px;
	max-width: 250px;
	text-align: center;
}

@media (max-width: 520px) {
	.lux-team__item {
		flex: 0 1 140px;
		max-width: 46%;
	}
}

.lux-team__photo {
	position: relative;
	aspect-ratio: 1 / 1;
	margin-bottom: 18px;
	overflow: hidden;
	border-radius: var(--lux-radius);
	background: #eef0ec;
}

/* Fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 1 / 1) {
	.lux-team__photo::before {
		content: "";
		display: block;
		padding-top: 100%;
	}
	.lux-team__photo > * {
		position: absolute;
		inset: 0;
	}
}

.lux-team__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lux-team__item:hover .lux-team__photo img {
	transform: scale(1.04);
}

/* Monogram shown until a real photo is supplied. */
.lux-team__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(150deg, #e6e9e3 0%, #d4dacd 100%);
	color: var(--lux-sage-dark);
	font-size: clamp(30px, 5vw, 44px);
	font-weight: 600;
	letter-spacing: 0.06em;
}

.lux-team__name {
	margin: 0 0 4px;
	color: var(--lux-ink);
	font-size: 17px;
	line-height: 1.3;
}

.lux-team__role {
	margin: 0;
	color: var(--lux-muted);
	font-size: 14px;
	line-height: 1.45;
}


/* ==========================================================================
   6. Our Certifications
   ========================================================================== */

.lux-certs__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(20px, 3vw, 36px);
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Woodmart styles every <button> as inline-flex with its own padding,
   background and min-height. That put the certificate image and its caption
   side by side instead of stacked, so the card needs a full reset. The extra
   specificity (and one !important on display) is what it takes to win against
   the parent theme's button rules. */
.lux-certs__item > .lux-certs__card {
	display: block !important;
	width: 100%;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	text-align: center;
	cursor: zoom-in;
}

.lux-certs__item > .lux-certs__card:hover,
.lux-certs__item > .lux-certs__card:focus,
.lux-certs__item > .lux-certs__card:active {
	background: none;
	box-shadow: none;
	color: inherit;
	transform: none;
}

.lux-certs__figure {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--lux-line);
	border-radius: var(--lux-radius);
	background: #fff;
	box-shadow: 0 2px 10px rgba(28, 31, 26, 0.05);
	transition:
		box-shadow 0.4s ease,
		transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lux-certs__card:hover .lux-certs__figure,
.lux-certs__card:focus-visible .lux-certs__figure {
	transform: translateY(-5px);
	box-shadow: 0 14px 32px rgba(28, 31, 26, 0.14);
}

.lux-certs__figure img {
	display: block;
	width: 100%;
	height: auto;
}

/* Magnifier badge, so it is obvious the card opens a larger view. */
.lux-certs__zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--lux-sage);
	color: #fff;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.lux-certs__card:hover .lux-certs__zoom,
.lux-certs__card:focus-visible .lux-certs__zoom {
	opacity: 1;
	transform: none;
}

/* Touch devices have no hover, so keep the badge permanently visible. */
@media (hover: none) {
	.lux-certs__zoom {
		opacity: 1;
		transform: none;
	}
}

.lux-certs__meta {
	display: block;
	margin-top: 16px;
}

.lux-certs__standard {
	display: block;
	color: var(--lux-sage-dark);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lux-certs__title {
	display: block;
	margin-top: 5px;
	color: var(--lux-ink);
	font-size: 16px;
	line-height: 1.35;
}

.lux-certs__number {
	display: block;
	margin-top: 5px;
	color: var(--lux-muted);
	font-size: 13px;
	letter-spacing: 0.02em;
}


/* ==========================================================================
   7. Project pages
   --------------------------------------------------------------------------
   Every block here is optional in the markup, so a project without renders or
   before-and-after photography simply renders fewer sections. Nothing is
   styled to look "empty".
   ========================================================================== */

/* --- escape the theme's page layout ---------------------------------------
   Woodmart wraps page content in .container (1222px) > .site-content (75%
   column) with an aside.sidebar-container next to it, and prints its own
   .page-title bar above. A project page needs the whole viewport instead.
   The body class is added from PHP whenever the shortcode is present. */

.lux-project-page .page-title{display:none}

.lux-project-page aside.sidebar-container{display:none}

.lux-project-page .main-page-wrapper > .container{
	max-width:100%;
	padding-left:0;
	padding-right:0;
}

.lux-project-page .content-layout-wrapper{
	margin-left:0;
	margin-right:0;
}

.lux-project-page .site-content{
	max-width:100%;
	width:100%;
	flex:0 0 100%;
	padding-left:0;
	padding-right:0;
}

.lux-proj{overflow:hidden}

/* --- hero --- */
.lux-proj__hero{position:relative;height:88vh;min-height:480px;overflow:hidden;background:#111}
.lux-proj__hero img{width:100%;height:100%;object-fit:cover;animation:luxHeroZoom 20s ease-out forwards}
@keyframes luxHeroZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.lux-proj__hero::after{content:"";position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,.58) 100%)}
.lux-proj__cap{position:absolute;z-index:2;left:0;right:0;bottom:7vh;padding:0 24px;text-align:center;color:#fff}
.lux-proj__kicker{margin:0 0 14px;font-size:12px;letter-spacing:.26em;text-transform:uppercase;opacity:.88}
.lux-proj__name{margin:0;font-size:clamp(32px,5.6vw,68px);font-weight:600;line-height:1.06;letter-spacing:-.02em;color:#fff}
.lux-proj__loc{margin:14px 0 0;font-size:clamp(12px,1.3vw,15px);letter-spacing:.14em;text-transform:uppercase;opacity:.9}

/* --- facts --- */
.lux-proj__facts{border-bottom:1px solid var(--lux-line);background:var(--lux-bg-alt,#f7f8f6)}
.lux-facts{display:flex;flex-wrap:wrap;justify-content:center;margin:0;padding:0}
.lux-fact{padding:26px 34px;text-align:center}
.lux-fact dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lux-muted);margin-bottom:7px}
.lux-fact dd{margin:0;font-size:18px;font-weight:600}

/* --- story --- */
.lux-proj__story{padding:clamp(52px,7.5vw,104px) 0}
.lux-story{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(30px,5.5vw,80px);align-items:start}
.lux-story__lead{margin:0;font-size:clamp(19px,2.2vw,26px);line-height:1.45;font-weight:500;letter-spacing:-.01em}
.lux-story__lead::after{content:"";display:block;width:46px;height:2px;background:var(--lux-sage);margin-top:22px}
.lux-story__body p{margin:0 0 18px;color:var(--lux-muted);font-size:16.5px;line-height:1.8}
.lux-story__tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.lux-story__tags li{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lux-sage-dark);
	border:1px solid var(--lux-line);border-radius:2px;padding:7px 12px}
@media(max-width:820px){.lux-story{grid-template-columns:1fr}}

/* --- shared section heading --- */
.lux-shead{text-align:center;max-width:640px;margin:0 auto clamp(26px,3.5vw,46px)}
.lux-shead h2{margin:0;font-size:clamp(22px,2.8vw,34px);letter-spacing:-.01em}
.lux-shead h2::after{content:"";display:block;width:46px;height:2px;background:var(--lux-sage);margin:15px auto 0}

/* --- before / after --- */
.lux-proj__ba,.lux-proj__rv{padding:clamp(46px,6.5vw,88px) 0;background:var(--lux-bg-alt,#f7f8f6)}
.lux-ba{position:relative;max-width:1000px;margin:0 auto;aspect-ratio:3/2;overflow:hidden;border-radius:3px;
	background:#111;cursor:ew-resize;user-select:none;touch-action:none}
.lux-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lux-ba__after{clip-path:inset(0 0 0 var(--lux-x,50%))}
.lux-ba__handle{position:absolute;top:0;bottom:0;left:var(--lux-x,50%);width:2px;background:#fff;z-index:3;
	box-shadow:0 0 14px rgba(0,0,0,.45)}
.lux-ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
	background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.lux-ba__tag{position:absolute;bottom:15px;z-index:4;background:rgba(28,31,26,.8);color:#fff;font-size:11px;
	letter-spacing:.13em;text-transform:uppercase;padding:6px 12px;border-radius:2px;pointer-events:none}
.lux-ba__tag--l{left:15px}.lux-ba__tag--r{right:15px}

/* --- render vs built --- */
.lux-rv{display:grid;grid-template-columns:1fr 1fr;gap:2px;max-width:1060px;margin:0 auto;background:var(--lux-line)}
.lux-rv figure{position:relative;margin:0;overflow:hidden;background:#111;aspect-ratio:4/3}
.lux-rv img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.lux-rv figure:hover img{transform:scale(1.04)}
.lux-rv figcaption{position:absolute;left:0;right:0;bottom:0;padding:15px 17px;color:#fff;font-size:11.5px;
	letter-spacing:.15em;text-transform:uppercase;background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,0))}
@media(max-width:700px){.lux-rv{grid-template-columns:1fr}}

/* --- gallery ---------------------------------------------------------------
   Edge to edge, no side margins: on a large screen the photography should
   fill the viewport, which is the whole point of shooting it at 42 MP.

   Sizes come from a repeating six-item rhythm rather than per-image settings,
   because a rhythm always tiles: one full-width, then two halves, then three
   thirds = 6 + 6 + 6 columns. No orphan gaps, whatever the photo count.

   Gallery images are deliberately NOT scroll-revealed. A fast scroller would
   otherwise see blank bands where the photographs should be. */

.lux-proj__gal{padding:clamp(40px,5.5vw,80px) 0}

.lux-proj__gal > .lux-container{
	max-width:100%;
	padding:0;
}

.lux-gal{
	display:grid;
	grid-template-columns:repeat(6,1fr);
	gap:6px;
}

.lux-gal__item{
	position:relative;
	margin:0;
	overflow:hidden;
	background:#eef0ec;
	cursor:zoom-in;
	grid-column:span 2;
	aspect-ratio:4/3;
}

.lux-gal__item img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .9s cubic-bezier(.22,.61,.36,1);
}

.lux-gal__item:hover img{transform:scale(1.04)}

/* 1 full-width */
.lux-gal__item:nth-child(6n+1){grid-column:span 6;aspect-ratio:21/9}
/* 2 halves */
.lux-gal__item:nth-child(6n+2),
.lux-gal__item:nth-child(6n+3){grid-column:span 3;aspect-ratio:3/2}
/* 3 thirds */
.lux-gal__item:nth-child(6n+4),
.lux-gal__item:nth-child(6n+5),
.lux-gal__item:nth-child(6n+6){grid-column:span 2;aspect-ratio:4/3}

/* Make the LAST row fill, whatever the photo count.
   Without these the rhythm only tiles cleanly at counts of 6n, 6n+1 and 6n+3,
   which would mean curating photo counts to suit the CSS. It should be the
   other way round. */

/* a lone half, or a lone third, left at the end -> take the whole row */
.lux-gal__item:last-child:nth-child(6n+2),
.lux-gal__item:last-child:nth-child(6n+4){grid-column:span 6;aspect-ratio:21/9}

/* two thirds left at the end -> split the row between them */
.lux-gal__item:nth-last-child(2):nth-child(6n+4),
.lux-gal__item:last-child:nth-child(6n+5){grid-column:span 3;aspect-ratio:3/2}

/* Tablet: halves and thirds both become halves, still tiles. */
@media(max-width:1024px){
	.lux-gal{grid-template-columns:repeat(2,1fr);gap:5px}
	.lux-gal__item,
	.lux-gal__item:nth-child(6n+2),
	.lux-gal__item:nth-child(6n+3),
	.lux-gal__item:nth-child(6n+4),
	.lux-gal__item:nth-child(6n+5),
	.lux-gal__item:nth-child(6n+6){grid-column:span 1;aspect-ratio:4/3}
	.lux-gal__item:nth-child(6n+1){grid-column:span 2;aspect-ratio:16/9}
}

/* Phone: a single column reads better than two tiny ones. */
@media(max-width:560px){
	.lux-gal{grid-template-columns:1fr;gap:4px}
	.lux-gal__item,
	.lux-gal__item:nth-child(6n+1),
	.lux-gal__item:nth-child(6n+2),
	.lux-gal__item:nth-child(6n+3),
	.lux-gal__item:nth-child(6n+4),
	.lux-gal__item:nth-child(6n+5),
	.lux-gal__item:nth-child(6n+6){grid-column:span 1;aspect-ratio:3/2}
}

/* --- next project --- */
.lux-proj__next{position:relative;display:block;height:52vh;min-height:300px;overflow:hidden;background:#111;text-decoration:none}
.lux-proj__next img{width:100%;height:100%;object-fit:cover;opacity:.6;transition:opacity .6s ease,transform 1.1s ease}
.lux-proj__next:hover img{opacity:.76;transform:scale(1.03)}
.lux-proj__next-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
	text-align:center;color:#fff;padding:0 24px}
.lux-proj__next-k{font-size:11px;letter-spacing:.25em;text-transform:uppercase;opacity:.85;margin-bottom:12px}
.lux-proj__next-t{font-size:clamp(24px,4vw,44px);font-weight:600;letter-spacing:-.01em}
.lux-proj__next-l{margin-top:11px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.9}

/* --- cta --- */
.lux-proj__cta{background:var(--lux-sage);color:#fff;text-align:center;padding:clamp(48px,6.5vw,84px) 0}
.lux-proj__cta h2{margin:0 0 10px;color:#fff;font-size:clamp(22px,3vw,36px);letter-spacing:-.01em}
.lux-proj__cta p{margin:0 0 26px;font-size:16px;opacity:.94}
.lux-btn{display:inline-block;padding:15px 34px;border:1.5px solid #fff;color:#fff;text-decoration:none;
	font-size:13px;letter-spacing:.14em;text-transform:uppercase;transition:background .3s ease,color .3s ease}
.lux-btn:hover,.lux-btn:focus{background:#fff;color:var(--lux-sage-dark)}

@media(prefers-reduced-motion:reduce){
	.lux-proj__hero img{animation:none}
	.lux-gal__item img,.lux-rv img,.lux-proj__next img{transition:none}
}


/* ==========================================================================
   The project index  (Projects page)
   --------------------------------------------------------------------------
   A wall of cards, edge to edge like the project galleries. Two columns on
   desktop; the last card spans both if the count is odd, so the grid always
   finishes flush instead of leaving a half-empty row.
   ========================================================================== */

.lux-work{padding:0}

/* The active header layout ("Header Overlap") is position:absolute and 172px
   tall on desktop, so it sits ON TOP of the content. On a project page that is
   intentional - the hero runs behind it. Here it would bury the heading, so the
   index needs enough top clearance to sit below it. */
.lux-work__head{
	text-align:center;
	max-width:680px;
	margin:0 auto;
	padding:140px 24px clamp(32px,4vw,54px);
}

@media(min-width:1025px){
	.lux-work__head{padding-top:215px}
}

.lux-work__head h2{
	margin:0;
	font-size:clamp(26px,3.4vw,40px);
	letter-spacing:-.01em;
}

.lux-work__head h2::after{
	content:"";
	display:block;
	width:46px;
	height:2px;
	margin:16px auto 0;
	background:var(--lux-sage);
}

.lux-work__head p{
	margin:15px 0 0;
	color:var(--lux-muted);
	font-size:16px;
	line-height:1.7;
}

.lux-work__grid{
	display:grid;
	grid-template-columns:repeat(6,1fr);
	gap:18px;
}

/* Three per row on desktop. Two 950px cards per screen was far too heavy - at
   this size six projects are visible at once and each photograph still reads. */
.lux-work__item{
	position:relative;
	display:block;
	overflow:hidden;
	grid-column:span 2;
	aspect-ratio:3/2;
	background:#111;
	text-decoration:none;
	color:#fff;
}

/* Fill an incomplete last row so the grid never ends ragged, at any count:
   1 left over -> that card spans the full row
   2 left over -> those two split the row */
.lux-work__item:last-child:nth-child(3n+1){grid-column:span 6;aspect-ratio:21/9}
.lux-work__item:nth-last-child(2):nth-child(3n+1),
.lux-work__item:last-child:nth-child(3n+2){grid-column:span 3;aspect-ratio:3/2}

.lux-work__item img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}

.lux-work__item:hover img,
.lux-work__item:focus-visible img{transform:scale(1.05)}

.lux-work__veil{
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.68) 100%);
	transition:background .5s ease;
}

.lux-work__item:hover .lux-work__veil,
.lux-work__item:focus-visible .lux-work__veil{
	background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.06) 42%,rgba(0,0,0,.78) 100%);
}

.lux-work__meta{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	padding:clamp(20px,2.6vw,38px);
	display:flex;
	flex-direction:column;
	text-align:left;
}

.lux-work__cat{
	font-size:11px;
	letter-spacing:.22em;
	text-transform:uppercase;
	opacity:.86;
	margin-bottom:9px;
}

.lux-work__name{
	font-size:clamp(19px,1.7vw,27px);
	font-weight:600;
	line-height:1.15;
	letter-spacing:-.01em;
}

.lux-work__loc{
	margin-top:8px;
	font-size:12px;
	letter-spacing:.13em;
	text-transform:uppercase;
	opacity:.85;
}

/* Tablet: two per row. Phone: one. Both keep the fill-the-last-row rules
   simple by resetting every span. */
@media(max-width:1200px) and (min-width:761px){
	.lux-work__grid{grid-template-columns:repeat(2,1fr);gap:14px}
	.lux-work__item,
	.lux-work__item:last-child:nth-child(3n+1),
	.lux-work__item:nth-last-child(2):nth-child(3n+1),
	.lux-work__item:last-child:nth-child(3n+2){grid-column:span 1;aspect-ratio:3/2}
	.lux-work__item:last-child:nth-child(odd){grid-column:span 2;aspect-ratio:21/9}
}

@media(max-width:760px){
	.lux-work__grid{grid-template-columns:1fr;gap:12px}
	.lux-work__item,
	.lux-work__item:last-child:nth-child(3n+1),
	.lux-work__item:nth-last-child(2):nth-child(3n+1),
	.lux-work__item:last-child:nth-child(3n+2),
	.lux-work__item:last-child:nth-child(odd){grid-column:span 1;aspect-ratio:3/2}
}

@media(prefers-reduced-motion:reduce){
	.lux-work__item img{transition:none}
}


/* ==========================================================================
   8. Certificate lightbox
   ========================================================================== */

.lux-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.lux-lightbox[hidden] {
	display: none;
}

.lux-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 18, 15, 0.88);
	cursor: zoom-out;
}

.lux-lightbox__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: min(720px, 100%);
	max-height: 100%;
}

.lux-lightbox__pic {
	display: block;
	overflow: auto;
	border-radius: var(--lux-radius);
	background: #fff;
}

.lux-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 150px);
	width: auto;
	height: auto;
}

.lux-lightbox__caption {
	margin: 14px 0 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 14px;
	text-align: center;
	line-height: 1.5;
}

.lux-lightbox__close {
	position: absolute;
	top: -46px;
	right: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background 0.25s ease;
}

.lux-lightbox__close:hover,
.lux-lightbox__close:focus-visible {
	background: rgba(255, 255, 255, 0.24);
}

/* Stop the page behind the dialog from scrolling. */
body.lux-lightbox-open {
	overflow: hidden;
}

@media (max-width: 600px) {
	.lux-lightbox {
		padding: 16px;
	}
	.lux-lightbox__close {
		top: -44px;
		right: 0;
	}
	.lux-lightbox__img {
		max-height: calc(100vh - 170px);
	}
}


/* --------------------------------------------------------------------------
   9. Projects section on the home page
   --------------------------------------------------------------------------
   The same grid is reused on the home page, limited to three projects. There
   the section is followed by a View More button, which sat almost flush
   against the cards, so the two read as one block. This gives them air.
   -------------------------------------------------------------------------- */

.home .lux-work__grid {
	margin-bottom: 34px;
}


/* --------------------------------------------------------------------------
   10. Design & Visualisation (Services page)
   --------------------------------------------------------------------------
   The renders are 1024px originals from 2022. They are deliberately shown at a
   third of the width: at that size the resolution holds, whereas full bleed
   next to the new 1600px photography they looked soft.

   Presentation is a staggered three-column rhythm - the middle column drops,
   the third rises - so the block reads as a studio board rather than a product
   grid. Each tile wipes in from the left as it enters view, and the image
   drifts slowly inside its frame while you scroll, which is what gives the
   section depth. All of it degrades to a plain visible grid if JavaScript is
   unavailable or the visitor has asked for reduced motion.
   -------------------------------------------------------------------------- */

.lux-renders {
	padding: 30px 0 50px;
	overflow: hidden;
}

.lux-renders__head {
	text-align: center;
	margin-bottom: 46px;
}

.lux-renders__head h2 {
	margin: 0 0 12px;
}

.lux-renders__head p {
	margin: 0 auto;
	max-width: 660px;
	opacity: .78;
	line-height: 1.7;
}

.lux-renders__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	align-items: start;
}

/* The stagger. Only from three columns up, or it reads as broken spacing. */
@media (min-width: 1025px) {
	.lux-renders__grid > *:nth-child(3n+2) {
		margin-top: 64px;
	}
	.lux-renders__grid > *:nth-child(3n+3) {
		margin-top: 26px;
	}
}

.lux-renders__grid .lux-renders__item {
	display: block !important;
	position: relative;
	padding: 0;
	margin-left: 0;
	margin-right: 0;
	border: 0;
	border-radius: 0;
	background: #eef0ec;
	box-shadow: none;
	width: 100%;
	height: auto;
	min-height: 0;
	line-height: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	cursor: zoom-in;
}

.lux-renders__item img {
	width: 100%;
	/* Taller than the frame, so it can drift without exposing an edge. */
	height: 118%;
	object-fit: cover;
	display: block;
	will-change: transform;
	transition: transform .7s ease;
}

.lux-renders__item:hover img {
	transform: scale(1.05);
}

/* Armed by JavaScript, so a no-JS visitor never meets a permanently hidden tile.

   The clip is on the image, not on the button. A clip-path that collapses an
   element to zero width also collapses the rectangle IntersectionObserver
   measures, so a tile clipped on the button could never report itself as
   visible and the wipe would never fire. Clipping the child keeps the button
   its full size and observable, and leaves a soft placeholder behind the
   image while it wipes in. */
.lux-renders__item.lux-wipe--armed img {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1s cubic-bezier(.22,.61,.36,1), transform .7s ease;
}

.lux-renders__item.lux-wipe--armed.is-in img {
	clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
	.lux-renders__item.lux-wipe--armed img,
	.lux-renders__item.lux-wipe--armed.is-in img {
		clip-path: none;
		transition: none;
	}
	.lux-renders__item img {
		transform: none !important;
		transition: none;
	}
}

@media (max-width: 1024px) {
	.lux-renders__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

@media (max-width: 600px) {
	.lux-renders__grid {
		grid-template-columns: 1fr;
	}
	.lux-renders__head {
		margin-bottom: 30px;
	}
}


/* --------------------------------------------------------------------------
   11. Lightbox close button
   --------------------------------------------------------------------------
   The parent theme collapses inline SVG inside a button to zero width, so the
   close control rendered as a blank pale square with no cross in it - on the
   certificates, on every project gallery, and on the renders. The dimensions
   have to be forced back, because the rule that flattens them is itself set
   with high specificity.
   -------------------------------------------------------------------------- */

.lux-lightbox__close svg {
	/* The button is a flex container in the parent theme, and an SVG with no
	   intrinsic width is shrunk to nothing inside one. A width alone does not
	   survive that - the shrink has to be switched off as well. */
	flex: none !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	max-width: none !important;
	display: block;
	margin: auto;
}


/* --------------------------------------------------------------------------
   12. Lightbox close button - appearance  (lux-lightbox__close-restyle)
   --------------------------------------------------------------------------
   It was a pale square sitting above the image, which read as a stray blank
   tile rather than a control. It is now a dark disc tucked into the top right
   corner of the panel, where a close control is expected, with a white cross
   that stays legible over any photograph behind it.
   -------------------------------------------------------------------------- */

.lux-lightbox__panel {
	position: relative;
}

.lux-lightbox__close {
	position: absolute !important;
	top: -6px;
	right: -6px;
	z-index: 3;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	min-height: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(20, 22, 20, .78) !important;
	color: #fff !important;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
	backdrop-filter: blur(3px);
	transition: background .25s ease, transform .25s ease;
}

.lux-lightbox__close:hover,
.lux-lightbox__close:focus-visible {
	background: rgba(20, 22, 20, .95) !important;
	transform: scale(1.06);
}

.lux-lightbox__close svg {
	color: #fff !important;
	stroke: #fff !important;
}

@media (max-width: 600px) {
	.lux-lightbox__close {
		top: 4px;
		right: 4px;
	}
}


/* --------------------------------------------------------------------------
   13. Site-wide scroll reveal
   --------------------------------------------------------------------------
   The class is added by JavaScript, never by PHP. If the script fails or is
   blocked, no element is ever hidden - the page just renders normally. That is
   the whole safety model, and it is why the hidden state lives on a class the
   server never prints.

   Deliberately restrained: 22px of travel and a fade, over three quarters of a
   second. Big movement on every block makes a site feel slow to read, which is
   the opposite of alive.
   -------------------------------------------------------------------------- */

.lux-rise {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition:
		opacity .6s cubic-bezier(.22, .61, .36, 1),
		transform .6s cubic-bezier(.22, .61, .36, 1);
}

.lux-rise.is-in {
	opacity: 1;
	transform: none;
}

/* Someone who has asked for less motion gets the content, immediately. */
@media (prefers-reduced-motion: reduce) {
	.lux-rise,
	.lux-rise.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}