/* ==========================================================================
   IDEA — Landing pages (additive layer)
   --------------------------------------------------------------------------
   Loaded AFTER style.css. Contains ONLY what the landing pages need on top of
   the existing theme. Nothing here overrides an existing component's look —
   it fills gaps the theme never had a page for.

   Keep this file separate so style.css can be replaced wholesale when the
   live theme is updated.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Landing-page header
   The theme header is a solid black bar. On a landing page the hero owns the
   first screen, so the header floats over it and the sticky clone takes over
   on scroll (handled by sticky.min.js, unchanged).
   -------------------------------------------------------------------------- */

.page-lp .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	background-color: transparent;
	border-bottom: 0;
}

/* Scrim so the logo + nav stay legible over photography */
.page-lp .site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 100%);
}

.page-lp .site-header .inside-header {
	position: relative;
	z-index: 1;
}

/* Align the logo with the hero panel's text column instead of the theme's
   centred max-width container — otherwise the logo floats ~180px inboard of
   the headline directly beneath it. */
.page-lp .site-header .inside-header.grid-container {
	max-width: none;
	width: 100%;
	padding-left: 3.25rem;
	padding-right: 3rem;
}

/* The theme gives #site-navigation a blurred dark plate so it stays readable
   once sticky.min.js pins it. Before it is pinned that plate reads as a stray
   floating rectangle over the hero, so only show it while stuck. */
.page-lp #site-navigation:not(.navigation-stick) {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

@media (max-width: 900px) {
	.page-lp .site-header .inside-header.grid-container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   2. hero-pages — gaps in the original component
   -------------------------------------------------------------------------- */

/* .hero-pages__info-num is referenced in the markup contract but was never styled */
.hero-pages__info-num {
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .12em;
	color: rgba(255, 255, 255, .85);
	line-height: 1;
}

/* The base title clamp tops out at 5.5rem, which only fits ~9 uppercase
   characters inside the 34% panel. Longer Bulgarian words ("АРХИТЕКТУРА")
   need a smaller ceiling or they collide with the panel edge. */
.hero-pages__title--tight span {
	font-size: clamp(1.9rem, 5.2vw, 4.5rem);
}

/* Eyebrow above the hero title.
   max(...) floors this at 11px — .62rem alone renders 9.92px, which is below
   the legible minimum on a phone. Theme-owned eyebrows keep their own sizing. */
.hero-pages__eyebrow {
	margin: 0 0 1.4rem;
	font-size: max(.62rem, 11px);
	font-weight: 600;
	letter-spacing: .45em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	line-height: 1;
}

.hero-pages__lede {
	margin: 1.6rem 0 2.25rem;
	max-width: 34ch;
	font-size: 1.05rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, .72);
	font-weight: 300;
}

/* The image needs a floor so light interiors don't wash out the info bar */
.hero-pages__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .45) 100%);
}

.hero-pages__info-bar {
	z-index: 5;
}

/* --------------------------------------------------------------------------
   3. Generic landing-page section shell
   -------------------------------------------------------------------------- */

.lp-section {
	position: relative;
	z-index: 20;
	background: #000;
	padding: clamp(3.5rem, 9vh, 7rem) 0;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.lp-section--flush {
	border-top: 0;
}

.lp-head {
	display: grid;
	gap: clamp(.9rem, 2vw, 1.4rem);
	max-width: 68ch;
	margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.lp-eyebrow {
	margin: 0;
	font-size: max(.62rem, 11px);
	font-weight: 600;
	letter-spacing: .45em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	line-height: 1;
}

.lp-title {
	margin: 0;
	font-size: clamp(2rem, 4.6vw, 3.6rem);
	line-height: .98;
	letter-spacing: -.02em;
	font-weight: 700;
	color: #e9e4e0;
	text-wrap: balance;
}

.lp-lede {
	margin: 0;
	font-size: clamp(1rem, 1.25vw, 1.2rem);
	line-height: 1.4;
	color: rgba(233, 228, 224, .72);
}

/* --------------------------------------------------------------------------
   4. Proof strip — numbers under the hero
   -------------------------------------------------------------------------- */

.lp-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(255, 255, 255, .1);
	border-top: 1px solid rgba(255, 255, 255, .1);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.lp-stat {
	background: #000;
	padding: clamp(1.5rem, 4vw, 2.6rem) clamp(1rem, 2.5vw, 2rem);
	display: grid;
	gap: .5rem;
	align-content: start;
}

.lp-stat__num {
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	font-weight: 700;
	line-height: .9;
	letter-spacing: -.02em;
	color: #e9e4e0;
}

.lp-stat__label {
	font-size: .78rem;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(233, 228, 224, .52);
}

@media (max-width: 780px) {
	.lp-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------------------------------------
   5. Value grid — "what you get"
   -------------------------------------------------------------------------- */

.lp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
}

.lp-card {
	border: 1px solid rgba(255, 255, 255, .1);
	background: linear-gradient(160deg, #000 0%, #131313 100%);
	padding: clamp(1.4rem, 2.6vw, 2.1rem);
	display: grid;
	gap: .75rem;
	align-content: start;
	transition: border-color .3s var(--ease), transform .4s var(--ease);
}

.lp-card:hover {
	border-color: rgba(233, 228, 224, .38);
	transform: translateY(-3px);
}

.lp-card__num {
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .3em;
	color: rgba(233, 228, 224, .45);
}

.lp-card__title {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.05;
	font-weight: 700;
	color: #e9e4e0;
}

.lp-card__text {
	margin: 0;
	font-size: .95rem;
	line-height: 1.42;
	color: rgba(233, 228, 224, .66);
}

@media (max-width: 980px) {
	.lp-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.lp-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   6. Lead form
   Markup mirrors Contact Form 7 output (.wpcf7 / .wpcf7-form-control-wrap) so
   dropping this into WordPress is a copy-paste, not a rebuild.
   -------------------------------------------------------------------------- */

.lp-form-section {
	position: relative;
	z-index: 22;
	background: #000;
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: clamp(3.5rem, 9vh, 7rem) 0;
}

.lp-form-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.lp-form-aside {
	display: grid;
	gap: clamp(1rem, 2.4vw, 1.6rem);
	align-content: start;
}

.lp-form-aside__title {
	margin: 0;
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	line-height: .98;
	letter-spacing: -.02em;
	font-weight: 700;
	color: #e9e4e0;
	text-wrap: balance;
}

.lp-form-aside__text {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.42;
	color: rgba(233, 228, 224, .7);
	max-width: 46ch;
}

.lp-form-aside__list {
	list-style: none;
	margin: .5rem 0 0;
	padding: 0;
	display: grid;
	gap: .7rem;
}

.lp-form-aside__list li {
	position: relative;
	padding-left: 1.5rem;
	font-size: .95rem;
	line-height: 1.35;
	color: rgba(233, 228, 224, .66);
}

.lp-form-aside__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 12px;
	height: 1px;
	background: rgba(233, 228, 224, .5);
}

.lp-form {
	display: grid;
	gap: 1.15rem;
	border: 1px solid rgba(255, 255, 255, .12);
	background: linear-gradient(160deg, #000 0%, #141414 100%);
	padding: clamp(1.5rem, 3.4vw, 2.6rem);
}

.lp-field {
	display: grid;
	gap: .45rem;
}

.lp-field__label {
	/* Floored at 11px — these are form labels, not decoration. */
	font-size: max(.66rem, 11px);
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(233, 228, 224, .5);
}

/* style.css sets `.wpcf7-form-control-wrap .wpcf7-form-control { text-align:
   center }` (specificity 0,2,0). These selectors must out-specify it or the
   select and textarea silently centre their text while the inputs don't —
   hence the .wpcf7-form-control-wrap in the chain rather than a bare
   `.lp-form select`. */
.lp-form .wpcf7-form-control-wrap input[type="text"],
.lp-form .wpcf7-form-control-wrap input[type="email"],
.lp-form .wpcf7-form-control-wrap input[type="tel"],
.lp-form .wpcf7-form-control-wrap select,
.lp-form .wpcf7-form-control-wrap textarea {
	width: 100%;
	box-sizing: border-box;
	padding: .8rem .9rem;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 0;
	color: #e9e4e0;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.2;
	letter-spacing: .5px;
	text-align: left;
	transition: border-color .25s var(--ease), background-color .25s var(--ease);
}

.lp-form .wpcf7-form-control-wrap textarea {
	min-height: 116px;
	resize: vertical;
}

.lp-form .wpcf7-form-control-wrap select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 330 512'%3E%3Cpath fill='%23e9e4e0' d='M305.9 197.1c0 2.3-1.1 4.8-2.8 6.5L171.1 335.6c-1.7 1.7-4.2 2.8-6.5 2.8s-4.8-1.1-6.5-2.8L26.1 203.6c-1.7-1.7-2.8-4.2-2.8-6.5s1.1-4.8 2.8-6.5l14.2-14.2c1.7-1.7 4-2.8 6.5-2.8 2.3 0 4.8 1.1 6.5 2.8l111.3 111.3L275.9 176.4c1.7-1.7 4.2-2.8 6.5-2.8s4.8 1.1 6.5 2.8l14.2 14.2c1.7 1.7 2.8 4.2 2.8 6.5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .9rem center;
	background-size: .7rem;
	padding-right: 2.4rem;
}

.lp-form .wpcf7-form-control-wrap input::placeholder,
.lp-form .wpcf7-form-control-wrap textarea::placeholder {
	color: rgba(233, 228, 224, .34);
}

.lp-form .wpcf7-form-control-wrap input:focus,
.lp-form .wpcf7-form-control-wrap select:focus,
.lp-form .wpcf7-form-control-wrap textarea:focus {
	outline: none;
	border-color: rgba(233, 228, 224, .6);
	background: rgba(255, 255, 255, .07);
	color: #e9e4e0;
}

.lp-field--row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.15rem;
}

.lp-form__submit {
	position: relative;
	display: inline-block;
	justify-self: start;
	overflow: hidden;
	margin-top: .35rem;
	padding: 10px 26px;
	border: 0;
	background: #e9e4e0;
	color: #000;
	font-family: inherit;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: 1px;
	cursor: pointer;
	transition: none;
}

.lp-form__consent {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .8rem;
	line-height: 1.35;
	color: rgba(233, 228, 224, .5);
}

.lp-form__consent input {
	margin-top: .18em;
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	accent-color: #e9e4e0;
}

.lp-form__consent a {
	color: rgba(233, 228, 224, .8);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Static-build feedback (replaced by CF7's own response output in WordPress) */
.lp-form__note {
	margin: 0;
	font-size: .86rem;
	line-height: 1.35;
	color: rgba(233, 228, 224, .75);
	border: 1px solid rgba(233, 228, 224, .28);
	padding: .7rem .9rem;
	display: none;
}

.lp-form__note.is-visible {
	display: block;
}

.lp-form :invalid {
	box-shadow: none;
}

@media (max-width: 900px) {
	.lp-form-wrap {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.lp-field--row {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   7. FAQ — theme has .faq-item styling but no layout wrapper
   -------------------------------------------------------------------------- */

.lp-faq-list {
	display: grid;
	gap: .75rem;
	max-width: 900px;
}

.faq-item .faq-title {
	margin: 0;
}

/* --------------------------------------------------------------------------
   8. Breadcrumb
   -------------------------------------------------------------------------- */

.lp-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	padding: 1.1rem 0;
	font-size: .74rem;
	letter-spacing: .08em;
	color: rgba(233, 228, 224, .45);
	background: #000;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.lp-crumbs a {
	color: rgba(233, 228, 224, .62);
}

.lp-crumbs a:hover {
	color: #e9e4e0;
}

.lp-crumbs span[aria-current] {
	color: rgba(233, 228, 224, .9);
}

/* --------------------------------------------------------------------------
   9. Projects grid reuse — theme card is 500px tall, too heavy for a 3-up
   -------------------------------------------------------------------------- */

.lp-projects .rzn-col-3 .our-projects_img {
	height: 380px;
}

@media (max-width: 900px) {
	.lp-projects .rzn-col-3 {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 620px) {
	.lp-projects .rzn-col-3,
	.lp-projects .rzn-col-2 {
		grid-template-columns: 1fr;
	}

	.lp-projects .our-projects_img {
		height: 260px;
	}
}

/* --------------------------------------------------------------------------
   10. Accessibility + motion
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid rgba(233, 228, 224, .75);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	.lp-card,
	.hero-pages__cta {
		transition: none;
	}
}