/*
Theme Name: Houzez Child
Theme URI: http://www.favethemes.com/
Author: Favethemes
Author URI: http://www.favethemes.com/
Description: Houzez is a premium WordPress theme for real estate agents where modern aesthetics are combined with tasteful simplicity, and where the ease of use is achieved without compromise in your ability to customise the design. Whether you are a real estate agent looking to build a website for your company or a web developer seeking a perfect WordPress theme for your next project, you are certain to appreciate the numerous features and benefits that our theme provides.
Version: 1.0
Tags: white, right-sidebar, left-sidebar, custom-colors, custom-menu, featured-images, post-formats, theme-options, translation-ready
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: houzez
Template: houzez
*/


@import url("../houzez/style.css");

/* Levent Living
==================================================== */

:root {
	/* One rhythm between sections, in two steps, rather than the nine different
	   values the components each carried. 60px a side is 120px at a boundary,
	   down from 172; the larger step is for a section that opens or closes a
	   page on its own. */
	--ll-gap: clamp(2.5rem, 4.2vw, 3.75rem);
	--ll-gap-lg: clamp(3rem, 5.6vw, 5rem);
	--ll-primary: #014455;
	--ll-primary-hover: #02637C;
	--ll-accent: #7FB3A3;
	--ll-ground: #012C38;
	--ll-hairline: rgba(1, 68, 85, .12);

	/* The content band grows with the window instead of stopping at 1240px,
	   which left roughly 330px of dead margin each side on a 1900px screen and
	   is why the whole page read small until it was zoomed. */
	--ll-measure: min(1560px, 90vw);
}

/* Playfair ships old-style figures, so a year set in it drops its nines below
   the baseline and sits its ones at x-height: 1961 read as a mistake beside
   2,500+. Every number here is display type or a statistic, never running
   prose, so lining figures are what is wanted throughout. Jost carries lining
   figures only, so this changes nothing outside the display face. */
body {
	font-variant-numeric: lining-nums;
}

/* Header
---------------------------------------------------- */

/* container-fluid runs content to the viewport edge. A premium header needs
   air on both sides that scales with the window. */
.header-v6 .container-fluid {
	padding-left: clamp(1.5rem, 5vw, 5rem);
	padding-right: clamp(1.5rem, 5vw, 5rem);
}

.header-v6 .header-inner-wrap > .d-flex {
	min-height: clamp(96px, 6vw, 116px);
	max-width: var(--ll-measure);
	margin: 0 auto;
}

/* Both menus otherwise collapse toward the logo, which leaves a wide dead
   margin at each edge and reads as unintentional. Anchor them instead. */
.header-wrap-6-left-menu .main-nav,
.header-wrap-6-right-menu .main-nav {
	display: flex;
	width: 100%;
}

.header-wrap-6-left-menu .main-nav {
	justify-content: flex-start;
}

.header-wrap-6-right-menu .main-nav {
	justify-content: flex-end;
}

.header-v6 {
	background: #fff;
}

/* Three columns, not five. The menus share the space evenly so the logo sits
   on the true centre line rather than wherever the flex gaps leave it. */
.header-wrap-6-left-menu,
.header-wrap-6-right-menu {
	flex: 1 1 0;
	min-width: 0;
}

.header-wrap-6-left-menu .navbar-nav {
	justify-content: flex-start;
}

.header-wrap-6-right-menu .navbar-nav {
	justify-content: flex-end;
}

.header-wrap-6-logo {
	flex: 0 0 auto;
	padding: 0 3rem;
}

/* The wrapper was stretching to the full height of the header row with the
   mark sitting at the top of it, which read as the logo being too high. It is
   centred now, and centring is computed rather than a fixed offset, so it holds
   through the shrink on scroll: the row goes 96 to 78 and the mark 56 to 46,
   and the logo stays on the middle line the whole way. */
.header-v6 .logo {
	display: flex;
	align-items: center;
	align-self: center;
}

.header-v6 .logo a {
	line-height: 0;
}

.header-v6 .logo img,
.header-mobile .logo img {
	height: 56px;
	width: auto;
	display: block;
	/* Houzez ships `.logo img { top: -3px }` against its own layout. With the
	   wrapper centring properly that nudge is three pixels of nothing. */
	top: 0;
}

/* Navigation
---------------------------------------------------- */

/* Houzez puts Bootstrap's h-100 on the nav, the list and the items, and that
   utility is height:100% !important. Left alone the links stretch the full
   header height, which turns the pill into a circle and drops the underline
   out of the header entirely. */
.header-v6 .main-nav,
.header-v6 .navbar-nav,
.header-v6 .navbar-nav > .nav-item,
.header-v6 .navbar-nav > .nav-item > .nav-link {
	height: auto !important;
}

.header-v6 .navbar-nav {
	display: flex;
	align-items: center;
	gap: 2.5rem;
}

.header-v6 .navbar-nav > .nav-item {
	display: flex;
	align-items: center;
}

.header-v6 .navbar-nav > .nav-item > .nav-link {
	position: relative;
	/* The text is 15px tall and that was the whole target. The padding takes
	   the box to 44 without moving the type: the header row is 96px, so there
	   is room either side and nothing shifts. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	line-height: 1.25;
	font-size: clamp(12px, .72vw, 13.5px);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ll-primary);
	white-space: nowrap;
	transition: color .25s ease;
}

.header-v6 .navbar-nav > .nav-item > .nav-link:hover {
	color: var(--ll-primary-hover);
}

/* A hairline that opens from the centre. Reads as considered without being
   decorative. */
.header-v6 .navbar-nav > .nav-item > .nav-link::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: -8px;
	height: 1px;
	background: currentColor;
	transition: left .32s cubic-bezier(.22, .61, .36, 1),
	            right .32s cubic-bezier(.22, .61, .36, 1);
}

.header-v6 .navbar-nav > .current-menu-item > .nav-link::after {
	left: 0;
	right: 0;
}

/* One underline at a time. The page you are on keeps its rule until the menu
   is pointed at; from then on the item under the pointer is the only one
   marked. Without this, opening another item's dropdown left two items
   underlined and neither of them was where you were going. */
.header-v6 .navbar-nav:hover > .current-menu-item > .nav-link::after {
	left: 50%;
	right: 50%;
}

/* On the item, not on the link: the dropdown hangs off the item, so pointing
   at the panel is still pointing at that entry and the rule should hold. */
.header-v6 .navbar-nav > .nav-item:hover > .nav-link::after,
.header-v6 .navbar-nav > .nav-item > .nav-link:focus-visible::after {
	left: 0;
	right: 0;
}

/* Language switcher. A code and a caret, opening onto the other languages.
   Codes rather than names so a third and fourth cost no header width. */
.header-v6 .navbar-nav > .pll-parent-menu-item {
	position: relative;
}

.header-v6 .navbar-nav > .pll-parent-menu-item > .nav-link,
.header-v6 .navbar-nav > .pll-parent-menu-item:hover > .nav-link {
	background: none !important;
}

.header-v6 .navbar-nav > .pll-parent-menu-item > .nav-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	opacity: .65;
	transition: opacity .25s ease;
}

.header-v6 .navbar-nav > .pll-parent-menu-item:hover > .nav-link {
	opacity: 1;
}

/* A caret drawn from a rotated corner, so it inherits colour on every ground. */
.header-v6 .navbar-nav > .pll-parent-menu-item > .nav-link::after {
	content: "";
	position: static;
	width: 4px;
	height: 4px;
	margin-bottom: 2px;
	border: 0;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	background: none;
	opacity: .8;
	transform: rotate(45deg);
	transition: transform .25s ease, margin .25s ease;
}

.header-v6 .navbar-nav > .pll-parent-menu-item:hover > .nav-link::after {
	transform: rotate(225deg);
	margin-bottom: -2px;
}

/* Header dropdowns
   One component for both the navigation and the language switcher, because two
   panels that open differently in the same header read as two websites.

   Houzez opens them with a bare CSS li:hover and positions them with
   position:fixed, so a right:0 anchored to the viewport rather than the toggle.
   Worse, the language panel sat calc(100% + .5rem) below its trigger: eight
   pixels of dead space that closes the menu the moment the pointer enters it,
   which is why it had to be crossed quickly. Both now sit flush and both are
   held open by script for a moment after the pointer leaves.
---------------------------------------------------- */

.header-v6 .navbar-nav > li > .dropdown-menu {
	position: absolute !important;
	top: 100% !important;
	bottom: auto !important;
	margin: 0 !important;
	padding: .4rem 0 !important;
	border: 1px solid rgba(1, 68, 85, .10);
	border-radius: 4px;
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	backdrop-filter: blur(22px) saturate(160%);
	box-shadow: 0 14px 38px rgba(1, 68, 85, .14);
	transform: translateY(-6px) !important;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	transition: opacity .22s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}

.header-v6 .navbar-nav > li.is-open > .dropdown-menu,
.header-v6 .navbar-nav > li:focus-within > .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: none !important;
}

.header-v6 .navbar-nav > li > .dropdown-menu li,
.header-v6 .navbar-nav > li > .dropdown-menu .dropdown-item {
	width: 100% !important;
	min-width: 0 !important;
}

.header-v6 .navbar-nav > li > .dropdown-menu .dropdown-item {
	display: block;
	padding: .72rem 1.35rem;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 1.4;
	white-space: nowrap;
	text-transform: none;
	color: var(--ll-primary);
	background: none;
	transition: background-color .2s ease, padding-left .28s ease;
}

.header-v6 .navbar-nav > li > .dropdown-menu .dropdown-item:hover,
.header-v6 .navbar-nav > li > .dropdown-menu .dropdown-item:focus-visible {
	background: rgba(1, 68, 85, .07);
	padding-left: 1.7rem;
	color: var(--ll-primary);
}

/* The navigation panel is left aligned under its item and sized for words. */
.header-v6 .navbar-nav > li.menu-item-has-children:not(.pll-parent-menu-item) > .dropdown-menu {
	left: 0 !important;
	right: auto !important;
	min-width: 15rem !important;
	width: auto !important;
}

/* The language panel holds two letter codes and hangs off the right edge. */
.header-v6 .navbar-nav > .pll-parent-menu-item > .dropdown-menu {
	left: auto !important;
	right: 0 !important;
	min-width: 6.5rem !important;
	width: auto !important;
}

.header-v6 .navbar-nav > .pll-parent-menu-item > .dropdown-menu .dropdown-item {
	text-align: center;
	letter-spacing: .16em;
	font-weight: 600;
}

.header-v6 .navbar-nav > .pll-parent-menu-item > .dropdown-menu .dropdown-item:hover {
	padding-left: 1.35rem;
}

/* Over a hero both sit on photography rather than on white. */
.levent-has-hero .header-v6 .navbar-nav > li > .dropdown-menu {
	border-color: rgba(255, 255, 255, .16);
	background: rgba(1, 44, 56, .74);
	box-shadow: 0 12px 34px rgba(0, 22, 30, .22);
}

.levent-has-hero .header-v6 .navbar-nav > li > .dropdown-menu .dropdown-item {
	color: #fff;
}

.levent-has-hero .header-v6 .navbar-nav > li > .dropdown-menu .dropdown-item:hover,
.levent-has-hero .header-v6 .navbar-nav > li > .dropdown-menu .dropdown-item:focus-visible {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

/* Once the header goes solid the glass goes back to light. */
.levent-header-solid .header-v6 .navbar-nav > li > .dropdown-menu {
	border-color: rgba(1, 68, 85, .10);
	background: rgba(255, 255, 255, .86);
	box-shadow: 0 14px 38px rgba(1, 68, 85, .14);
}

.levent-header-solid .header-v6 .navbar-nav > li > .dropdown-menu .dropdown-item {
	color: var(--ll-primary);
}

.levent-header-solid .header-v6 .navbar-nav > li > .dropdown-menu .dropdown-item:hover,
.levent-header-solid .header-v6 .navbar-nav > li > .dropdown-menu .dropdown-item:focus-visible {
	background: rgba(1, 68, 85, .07);
	color: var(--ll-primary);
}

@media (prefers-reduced-motion: reduce) {
	.header-v6 .navbar-nav > li > .dropdown-menu {
		transition: none;
	}
}

/* Contact Us is the one thing we are asking the visitor to do. */
.header-v6 .navbar-nav > .menu-item-cta > .nav-link {
	padding: .8rem 1.75rem !important;
	border: 1px solid rgba(1, 68, 85, .3);
	border-radius: 999px;
	transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.header-v6 .navbar-nav > .menu-item-cta > .nav-link::after {
	display: none;
}

.header-v6 .navbar-nav > .menu-item-cta > .nav-link:hover {
	background: var(--ll-primary);
	border-color: var(--ll-primary);
	color: #fff;
}

/* Sticky
---------------------------------------------------- */

.sticky-nav-area .header-v6,
.header-v6.sticky-nav-area {
	box-shadow: 0 1px 24px rgba(1, 68, 85, .08);
}

.sticky-nav-area .header-v6 .header-inner-wrap > .d-flex {
	min-height: 76px;
	transition: min-height .3s ease;
}

.sticky-nav-area .header-v6 .logo img {
	height: 44px;
	transition: height .3s ease;
}

/* Page headings
---------------------------------------------------- */

.page-title-wrap h1,
.page-title-wrap .page-title {
	font-size: clamp(2.25rem, 4vw, 3.5rem);
	line-height: 1.1;
	letter-spacing: -.01em;
}

/* Footer
---------------------------------------------------- */

/* Houzez prints the footer logo with no dimensions, so it renders at its
   natural 614px. */
.footer_logo img,
.footer-bottom .logo img {
	max-width: 150px;
	height: auto;
}

@media (max-width: 991px) {
	.header-v6 .header-inner-wrap > .d-flex {
		min-height: 72px;
	}
}

/* Social and login/register are both switched off, but header-6 still prints
   their wrappers. Left in place they take part in the flex distribution and
   push the logo off the centre line. */
.header-v6 .header-wrap-6-icons,
.header-v6 .header-wrap-6-login-register {
	display: none;
}

/* Homepage hero
==================================================== */

.levent-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	/* The content sat at 57% of the screen with the index right under it, both
	   crowded into the bottom third. The name now starts nearer the upper
	   third, which is where the eye goes first, and the index keeps the floor
	   to itself. */
	justify-content: flex-start;
	overflow: hidden;
	background: var(--ll-ground);
	color: #fff;
}

.levent-hero__stage {
	position: absolute;
	inset: 0;
}

.levent-hero__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	z-index: 0;
}

/* The incoming frame fades in on top; the outgoing one holds at full opacity
   underneath until it is covered. Cross-fading both at once dips the whole
   picture through a washed out middle. */
.levent-hero__slide.is-active {
	opacity: 1;
	z-index: 2;
	transition: opacity 1.2s cubic-bezier(.33, 0, .2, 1);
}

.levent-hero__slide.is-leaving {
	opacity: 1;
	z-index: 1;
}

.levent-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A very slow push in. Enough to feel alive, not enough to notice. */
.levent-hero__slide.is-active .levent-hero__image,
.levent-hero__slide.is-leaving .levent-hero__image {
	animation: levent-drift 16s ease-out forwards;
}

@keyframes levent-drift {
	from { transform: scale(1.06); }
	to   { transform: scale(1); }
}

/* A development with no photography yet shows a plain white plate, at the
   client's request, rather than a picture of somewhere else. Over white the
   headline measured 2.11:1 and the label 1.49:1 through the ordinary scrim, so
   the whole hero inverts for as long as that slide is up: scrim off, ink dark,
   buttons flipped. The header takes its own dark ground at the same time,
   which the carousel asks for by event. */
.levent-hero.is-light .levent-hero__scrim {
	display: none;
}

.levent-hero.is-light .levent-hero__title {
	color: var(--ll-ground);
}

.levent-hero.is-light .levent-hero__lead {
	color: rgba(1, 44, 56, .72);
}

.levent-hero.is-light .levent-hero__project {
	color: rgba(1, 44, 56, .55);
}

.levent-hero.is-light .levent-hero__project.is-active {
	color: var(--ll-ground);
}

.levent-hero.is-light .levent-btn--solid {
	background: var(--ll-ground);
	border-color: var(--ll-ground);
	color: #fff;
}

.levent-hero.is-light .levent-btn--ghost {
	border-color: rgba(1, 44, 56, .45);
	color: var(--ll-ground);
}

.levent-hero.is-light .levent-btn--ghost:hover,
.levent-hero.is-light .levent-btn--ghost:focus-visible {
	background: var(--ll-ground);
	border-color: var(--ll-ground);
	color: #fff;
}

/* Type sits on photography, so it needs its own ground rather than relying on
   whatever happens to be in the frame. */
.levent-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(to top, rgba(1, 32, 42, .88) 0%, rgba(1, 32, 42, .55) 38%, rgba(1, 32, 42, .12) 72%),
		linear-gradient(to bottom, rgba(1, 32, 42, .62) 0%, rgba(1, 32, 42, .28) 14%, transparent 30%);
}

/* The accent green does not hold against bright sea and sky, so the label is
   white and the accent becomes the rule beside it. */
.levent-hero__title {
	max-width: 20ch;
	margin: 0 0 clamp(2.25rem, 4.4vh, 3.5rem);
	font-size: clamp(2.4rem, 5.2vw, 6.25rem);
	line-height: 1.06;
	font-weight: 400;
	letter-spacing: -.015em;
	color: #fff;
	text-wrap: balance;
}

.levent-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.levent-btn {
	display: inline-block;
	padding: clamp(1rem, .85vw, 1.2rem) clamp(2.25rem, 2.2vw, 3rem);
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: clamp(12px, .7vw, 13.5px);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

.levent-btn--solid {
	background: #fff;
	color: var(--ll-primary);
}

.levent-btn--solid:hover {
	background: var(--ll-accent);
	color: var(--ll-ground);
}

.levent-btn--ghost {
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}

.levent-btn--ghost:hover {
	background: #fff;
	border-color: #fff;
	color: var(--ll-primary);
}

/* Panels crossfade with the images so each development gets its own title.
   The top padding is what lifts the name off the floor of the screen; the hero
   is flex-start now and the index takes the bottom on its own. */
.levent-hero__content {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: var(--ll-measure);
	margin: 0 auto;
	/* Very little at the foot: the index follows straight on and the two read
	   as one block rather than as two things at opposite ends of the screen. */
	padding: clamp(7rem, 33vh, 19rem) clamp(1.5rem, 5vw, 2rem) clamp(.75rem, 1.5vh, 1.25rem);
	display: grid;
}

/* The line the development opens with, between the name and the buttons. It
   is what fills the middle of the hero now that the name has moved up. */
.levent-hero__lead {
	max-width: 34ch;
	margin: 0 0 clamp(2.5rem, 5vh, 3.75rem);
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.05rem, 1.5vw, 1.5rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: -.01em;
	color: rgba(255, 255, 255, .88);
	text-wrap: pretty;
}

/* Two now: the development, and everything else. */
.levent-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(.6rem, 1.2vw, 1rem);
}

.levent-hero__panel {
	grid-area: 1 / 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity .5s ease;
}

.levent-hero__panel.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* The panel's own parts rise in, on first paint and again whenever a different
   development takes over. */
.levent-hero.is-ready .levent-hero__panel.is-active > * {
	animation: levent-rise .9s cubic-bezier(.22, .61, .36, 1) both;
}

.levent-hero.is-ready .levent-hero__panel.is-active > .levent-hero__title {
	animation-delay: .1s;
}

.levent-hero.is-ready .levent-hero__panel.is-active > .levent-btn {
	animation-delay: .2s;
}

.levent-hero.is-ready .levent-hero__index {
	animation: levent-rise 1s .35s cubic-bezier(.22, .61, .36, 1) both;
}

.levent-hero.is-ready .levent-hero__slide.is-active .levent-hero__image {
	animation: levent-drift 16s ease-out forwards, levent-hero-in 1.5s ease both;
}

@keyframes levent-rise {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: none; }
}

@keyframes levent-hero-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* The developments are the navigation. Competitors use anonymous tick marks;
   naming them turns the control into content. */
.levent-hero__index {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: var(--ll-measure);
	/* Held just under the button rather than pushed to the floor of the hero.
	   It was `auto auto 0`, which pinned it to the bottom and left the whole
	   middle of the screen empty between the button and the list. The top value
	   has to live in this shorthand: a separate margin-top declaration is
	   overwritten by it, which is how it was lost once before. */
	margin: clamp(1rem, 2.5vh, 1.75rem) auto 0;
	padding: 0 clamp(1.5rem, 5vw, 2rem) clamp(2rem, 4vh, 2.75rem);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	border-top: 0;
}

.levent-hero__project {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: .7rem;
	padding: 1.1rem 0 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: rgba(255, 255, 255, .55);
	transition: color .3s ease;
}

.levent-hero__project:hover,
.levent-hero__project.is-active {
	color: #fff;
}

.levent-hero__label {
	font-size: clamp(13px, .74vw, 14.5px);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* A hairline above each name that fills while its slide is showing. */
.levent-hero__progress {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(255, 255, 255, .25);
	overflow: hidden;
}

.levent-hero__progress::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ll-accent);
	transform: scaleX(0);
	transform-origin: left;
}

.is-playing .levent-hero__project.is-active .levent-hero__progress::after {
	animation: levent-fill 7s linear forwards;
}

@keyframes levent-fill {
	to { transform: scaleX(1); }
}

/* Front page header.
   It stays fixed from the first paint, transparent while the hero is behind it
   and solid once the hero has passed. No hiding, no sliding back in, and no
   layout shift, because the wrapper is out of the flow the whole time.

   The solid state is the deep brand ground rather than white, so the reversed
   logo stays correct and no image has to be swapped mid-scroll. */
.levent-has-hero .header-main-wrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	height: 0;
}

.levent-has-hero .header-v6,
.levent-has-hero .header-v6 .header-top {
	position: relative;
	background: transparent;
	transition: background-color .35s ease;
}

.levent-has-hero .header-v6 .navbar-nav > .nav-item > .nav-link {
	color: #fff;
}

.levent-has-hero .header-v6 .navbar-nav > .menu-item-cta > .nav-link {
	border-color: rgba(255, 255, 255, .55);
}

.levent-has-hero .header-v6 .navbar-nav > .menu-item-cta > .nav-link:hover {
	background: #fff;
	border-color: #fff;
	color: var(--ll-primary);
}

/* Frosted glass rather than a solid bar. The background has to stay well
   short of opaque or the blur behind it is never seen, and the blur and the
   translucent fill have to sit on the same element, so .header-top is cleared. */
.levent-header-solid .header-v6 {
	/* .64 is the floor. Over a white render the glass blends to #5C7880 and
	   white nav text lands at 4.72:1; at .58 it drops to 3.91:1 and fails AA. */
	background: rgba(1, 44, 56, .64);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	backdrop-filter: blur(22px) saturate(160%);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	box-shadow: 0 10px 36px rgba(0, 22, 30, .18);
}

.levent-header-solid .header-v6 .header-top {
	background: transparent;
}

/* Safari and Chrome carry this, but a browser without it would render white
   text on a 58% wash of whatever photograph happens to be behind. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.levent-header-solid .header-v6 {
		background: rgba(1, 44, 56, .95);
	}
}

.levent-header-solid .header-v6 .header-inner-wrap > .d-flex {
	min-height: 78px;
	transition: min-height .35s ease;
}

.levent-header-solid .header-v6 .logo img {
	height: 46px;
	transition: height .35s ease;
}

/* The front page carries its own spacing. */
.levent-has-hero .page-wrap > .container > .page-title-wrap,
.levent-has-hero .page-content-wrap {
	padding-top: 0;
}

@media (max-width: 767px) {
	.levent-hero {
		min-height: 88svh;
	}

	.levent-hero__index {
		gap: 1.25rem 1.75rem;
	}

	.levent-hero__label {
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.levent-hero__panel,
	.levent-hero__progress::after {
		transition: none;
		animation: none;
	}

	.levent-hero__slide.is-active .levent-hero__image {
		animation: none;
	}

	.levent-hero__slide {
		transition: none;
	}
}

/* Houzez's own sticky is disabled in theme options, but leave this in place:
   its script pushes #main-wrap down to compensate for a header that normally
   sits in the flow, and ours never does. */
.levent-has-hero #main-wrap {
	margin-top: 0 !important;
}

/* No backdrop-filter support means a translucent panel over live text. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.header-v6 .navbar-nav > .pll-parent-menu-item > .dropdown-menu {
		background: #fff;
	}

	.levent-has-hero .header-v6 .navbar-nav > .pll-parent-menu-item > .dropdown-menu {
		background: rgba(1, 44, 56, .96);
	}
}

/* Reveal on scroll
---------------------------------------------------- */

/* Gated on a class the script adds itself, so nothing is ever hidden unless
   the code that un-hides it is definitely running. */
.levent-reveal-ready [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
}

.levent-reveal-ready [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	transition: opacity .8s cubic-bezier(.22, .61, .36, 1),
	            transform .8s cubic-bezier(.22, .61, .36, 1);
}

/* Children follow in sequence rather than the block arriving in one piece. */
.levent-reveal-ready [data-reveal].is-revealed > * {
	animation: levent-rise .8s cubic-bezier(.22, .61, .36, 1) both;
	animation-delay: var(--levent-stagger, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	.levent-reveal-ready [data-reveal],
	.levent-reveal-ready [data-reveal].is-revealed,
	.levent-reveal-ready [data-reveal].is-revealed > * {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}

	.levent-hero.is-ready .levent-hero__panel.is-active > *,
	.levent-hero.is-ready .levent-hero__index,
	.levent-hero.is-ready .levent-hero__slide.is-active .levent-hero__image {
		animation: none;
	}
}

/* Page sections
==================================================== */

.levent-eyebrow {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 0 0 1.4rem;
	font-size: clamp(11px, .62vw, 12.5px);
	font-weight: 500;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--ll-primary);
}

.levent-eyebrow::before {
	content: "";
	width: 40px;
	height: 1px;
	flex: 0 0 auto;
	background: var(--ll-accent);
}

.levent-eyebrow--light {
	color: rgba(255, 255, 255, .9);
}

/* Down about 22%, on the client's note that the headings dominate and read as
   a corporate information page rather than a brand story. Was
   clamp(1.9rem, 3vw, 3.1rem). */
.levent-h2 {
	margin: 0 0 1.35rem;
	font-size: clamp(1.5rem, 2.35vw, 2.4rem);
	line-height: 1.16;
	font-weight: 400;
	letter-spacing: -.01em;
	color: var(--ll-primary);
}

.levent-prose p {
	margin: 0 0 1.15em;
	font-size: clamp(15px, .95vw, 17.5px);
	line-height: 1.75;
	color: #45585f;
}

.levent-prose p:last-child {
	margin-bottom: 0;
}

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

.levent-pagehero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(560px, 88svh, 960px);
	overflow: hidden;
	background: var(--ll-ground);
}

/* Waiting on its photograph: the ground colour carries it, and it does not
   need the full height a picture earns. */
.levent-pagehero.is-plain {
	min-height: clamp(340px, 46svh, 520px);
}

.levent-pagehero__media {
	position: absolute;
	inset: 0;
}

.levent-pagehero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	animation: levent-drift 18s ease-out forwards;
}

/* Two jobs, two gradients. The one running up from the floor carries the title.
   The one at the top exists only so the header stays readable, so it is measured
   in the header's own pixels rather than as a share of the picture: on a tall
   hero a percentage stop pushed the shading a third of the way down the
   photograph and greyed out the sky.

   It is dense where the links sit and gone by 160px. Over the brightest hero,
   the Projects aerial, the nav measured 3.19:1 at .56 and .42; it needs 4.5.
   The reach is what the client objected to, not the depth, and the reach has
   not changed. */
.levent-pagehero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(1, 32, 42, .86) 0%, rgba(1, 32, 42, .38) 46%, rgba(1, 32, 42, .10) 78%),
		linear-gradient(to bottom, rgba(1, 32, 42, .68) 0, rgba(1, 32, 42, .58) 64px, rgba(1, 32, 42, .12) 120px, transparent 160px);
}

/* A hero standing in for photography that has not arrived. The client would
   rather see a plain white plate than a picture of somewhere else, so
   everything on it inverts: the scrim has nothing to darken and the type has to
   come off the white. The header keeps its own dark ground on these pages
   rather than floating transparent, which is handled in the footer script. */
.levent-pagehero.is-light .levent-pagehero__scrim {
	display: none;
}

.levent-pagehero.is-light .levent-pagehero__inner,
.levent-pagehero.is-light .levent-pagehero__title {
	color: var(--ll-ground);
}

.levent-pagehero.is-light .levent-pagehero__lead {
	color: rgba(1, 44, 56, .72);
}

.levent-pagehero.is-light .levent-eyebrow {
	color: var(--ll-primary);
}

/* A picture bright enough that the ordinary floor gradient cannot hold type on
   it. The sustainability render is white walls in sunlight, and its eyebrow
   measured 3.21:1 against a 4.5:1 requirement. Asked for per picture rather
   than applied to every hero: on the fourteen other heroes this same gradient
   buys nothing, their eyebrows already measure about 15:1, and it would cost
   them a visibly darker photograph. Comes off when a better picture arrives. */
.levent-pagehero.has-strong-scrim .levent-pagehero__scrim {
	background:
		linear-gradient(to top, rgba(1, 32, 42, .90) 0%, rgba(1, 32, 42, .58) 46%, rgba(1, 32, 42, .14) 82%),
		linear-gradient(to bottom, rgba(1, 32, 42, .68) 0, rgba(1, 32, 42, .58) 64px, rgba(1, 32, 42, .12) 120px, transparent 160px);
}

/* On a phone the hero is portrait, not landscape: the crop keeps only the
   middle third of the picture and the type covers far more of what is left. On
   the sustainability hero, whose middle third is a white wall in sunlight, the
   eyebrow measured 2.36:1 and the title 3.3:1 at the desktop stops. The floor
   gradient reaches higher and holds darker here. The top band is untouched, so
   the picture still opens clean under the header. */
@media (max-width: 760px) {
	/* Both selectors, because a media query adds no specificity: on its own
	   `.levent-pagehero__scrim` loses to the two-class strong variant above and
	   the phone would quietly keep the desktop gradient. */
	.levent-pagehero__scrim,
	.levent-pagehero.has-strong-scrim .levent-pagehero__scrim {
		background:
			linear-gradient(to top, rgba(1, 32, 42, .92) 0%, rgba(1, 32, 42, .72) 42%, rgba(1, 32, 42, .30) 78%),
			linear-gradient(to bottom, rgba(1, 32, 42, .68) 0, rgba(1, 32, 42, .58) 64px, rgba(1, 32, 42, .12) 120px, transparent 160px);
	}
}

.levent-pagehero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem) clamp(3rem, 7vh, 5rem);
	color: #fff;
}

.levent-pagehero__title {
	margin: 0;
	font-size: clamp(2.2rem, 4.6vw, 5rem);
	line-height: 1.06;
	font-weight: 400;
	letter-spacing: -.015em;
	color: #fff;
	text-wrap: balance;
}

/* The purpose reads better held under the title, on the photograph, than as a
   separate band of white further down the page. */
.levent-pagehero__lead {
	max-width: 46ch;
	margin: clamp(1.5rem, 2.5vw, 2.25rem) 0 0;
	font-size: clamp(15px, 1.05vw, 19px);
	line-height: 1.7;
	color: rgba(255, 255, 255, .88);
	text-wrap: pretty;
}

/* Statement
---------------------------------------------------- */

/* Asymmetric, not centred. A label held in the left margin against the line
   itself, which is what stops a long sentence reading as a template quote. */
.levent-statement {
	background: #F4F6F6;
	border-top: 1px solid var(--ll-hairline);
	border-bottom: 1px solid var(--ll-hairline);
}

.levent-statement__inner {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	gap: clamp(1.5rem, 5vw, 5rem);
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: var(--ll-gap) clamp(1.5rem, 5vw, 2rem);
}

/* Three parts to twelve on a wide screen, but at 440px that is an 81px column,
   and an uppercase label with .3em of letter spacing came out seventeen lines
   tall. It stacks. */
@media (max-width: 760px) {
	.levent-statement__inner {
		grid-template-columns: 1fr;
		gap: clamp(.6rem, 2.5vw, 1rem);
	}
}

.levent-statement__label {
	margin: .6rem 0 0;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--ll-accent);
	white-space: nowrap;
}

.levent-statement__text {
	/* No image to sit beside, so it takes the whole column. Capped at 26ch it
	   filled less than half the width it had been given and the section read
	   as a narrow paragraph adrift in an empty band. */
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.45rem, 2.4vw, 2.5rem);
	line-height: 1.34;
	letter-spacing: -.005em;
	color: var(--ll-primary);
	text-wrap: pretty;
}

/* Split
---------------------------------------------------- */

/* The image runs to the edge of the window and the prose sits in the measure,
   so the two halves are never the same shape. */
/* Two columns of exactly equal height.
 *
 * The client's requirement was that the picture and the text be the same
 * height and that the picture not be the bigger of the two. The old version
 * gave the media a fixed height, clamp(440px, 44vw, 660px), so the row was
 * always as tall as the photograph and the text sat centred in whatever was
 * left: 660px of picture against 508px of copy.
 *
 * Now nothing in the media column contributes height. The image is absolutely
 * positioned inside it, so the row is exactly as tall as the text column, and
 * `align-items: stretch` gives the picture that same height. Same height, by
 * construction rather than by tuning, whatever the copy runs to.
 */
.levent-split {
	display: grid;
	/* 57/43 to the picture. Shortening the copy makes the row shorter, and with
	   equal heights that would have made the picture smaller too. Width is the
	   only axis left, so the picture gains it. */
	grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
	/* The breathing room lives here rather than inside the text column. Put it
	   on the column and the copy starts lower than the picture it is meant to
	   line up with. */
	padding: var(--ll-gap) 0;
}

.levent-split.is-tinted {
	background: #F4F6F6;
}

/* Figures under the prose, standing on their own rule.
   Deliberately not the device used at the top of the page: those are stacked
   down a column, set at 67px, and count up as they arrive. These sit in a row,
   read at a third that size, and do not move. Same voice, different sentence,
   so the page does not say the same thing twice in the same way. */
.levent-split__facts {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0;
	width: 100%;
	max-width: var(--ll-measure);
	margin: clamp(2.5rem, 5vh, 4rem) auto 0;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
	border-top: 1px solid rgba(255, 255, 255, .18);
}

.levent-split:not(.is-dark) .levent-split__facts {
	border-top-color: var(--ll-hairline);
}

.levent-split__facts > div {
	padding: clamp(1.1rem, 2vw, 1.5rem) clamp(.9rem, 1.6vw, 1.4rem) 0;
	border-left: 1px solid rgba(255, 255, 255, .14);
}

.levent-split:not(.is-dark) .levent-split__facts > div {
	border-left-color: var(--ll-hairline);
}

.levent-split__facts > div:first-child {
	padding-left: 0;
	border-left: 0;
}

.levent-split__facts dt {
	margin: 0 0 .4rem;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.5rem, 2.4vw, 2.35rem);
	white-space: nowrap;
	line-height: 1;
	letter-spacing: -.02em;
	color: #FFFFFF;
}

.levent-split:not(.is-dark) .levent-split__facts dt {
	color: var(--ll-primary);
}

.levent-split__facts dd {
	margin: 0;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .2em;
	line-height: 1.5;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .58);
}

.levent-split:not(.is-dark) .levent-split__facts dd {
	color: rgba(1, 44, 56, .55);
}

/* Stacked, so the rule that separated the columns has to become the rule that
   separates the rows. Left on, it draws a line down the side of nothing. */
@media (max-width: 700px) {
	.levent-split__facts > div {
		padding: clamp(1rem, 3.5vw, 1.4rem) 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .14);
	}

	.levent-split:not(.is-dark) .levent-split__facts > div {
		border-top-color: var(--ll-hairline);
	}

	.levent-split__facts > div:first-child {
		border-top: 0;
	}
}

/* Dark, and the same dark the developments block below it uses. The two run
   together as one field on the home page, which is what was wanted: the
   capability statement and the developments it is vouching for. */
.levent-split.is-dark {
	background: #01202A;
}

.levent-split.is-dark .levent-split__title {
	color: #FFFFFF;
}

.levent-split.is-dark .levent-prose p {
	color: rgba(255, 255, 255, .74);
}

.levent-split.is-dark .levent-eyebrow {
	color: rgba(255, 255, 255, .9);
}

.levent-split.is-dark .levent-split__index {
	color: rgba(255, 255, 255, .22);
}

.levent-split.is-dark .levent-split__caption {
	color: rgba(255, 255, 255, .6);
}

/* No picture, so no half empty grid. The prose takes the page and widens,
   because a column measured for half a screen looks lost across a whole one. */
.levent-split.is-plain {
	display: block;
}

.levent-split.is-plain .levent-split__body {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-split.is-plain .levent-split__inner {
	max-width: 46rem;
}

.levent-split.is-flipped .levent-split__media {
	order: 2;
}

/* Contributes no height of its own, so the row is exactly as tall as the copy
   beside it. The floor is low on purpose: anything higher and it, rather than
   the text, decides the height, which is what the client is looking at. */
.levent-split__media {
	position: relative;
	margin: 0;
	min-height: clamp(300px, 25vw, 400px);
	overflow: hidden;
}

/* A diagram rather than a photograph: cropping it to a fixed height cuts the
   outer panels off, and at narrow widths that is most of the picture. Here the
   column takes the picture's own proportions, so the whole of it stays visible
   at every window size. Placed before the base rules it overrides so the two
   read in the order they apply. */
.levent-split.is-whole .levent-split__media {
	height: auto;
	min-height: 0;
}

.levent-split.is-whole .levent-split__image {
	position: static;
	width: 100%;
	height: auto;
}

.levent-split__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Favour the upper middle: it keeps heads and rooflines in frame. */
	object-fit: cover;
	object-position: 50% 35%;
	display: block;
}

/* Over the still, never instead of it: the picture is the poster and the
   fallback, so the column holds its ground while the clip loads and for anyone
   who has asked for less motion. */
.levent-split__video {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.levent-split__video {
		display: none;
	}
}

/* A caption is a small thing that reads as care. */
.levent-split__caption {
	position: absolute;
	left: clamp(1rem, 2vw, 1.75rem);
	bottom: clamp(1rem, 2vw, 1.5rem);
	padding: .55rem .9rem;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(1, 44, 56, .6);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

/* No vertical padding, so the eyebrow starts on the same line as the top of the
   picture and the last paragraph ends on its bottom edge. This column sets the
   height; the picture takes it. */
.levent-split__body {
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding: 0 clamp(1.5rem, 4.5vw, 4.5rem);
}

/* Usually the copy is exactly the height of the column, and space-between does
   nothing. Where it is shorter than the picture's floor, on Citium and Petra,
   the difference is spread between the heading and the prose rather than left
   as a gap under the last line, so the text still runs the full height. */
.levent-split__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	max-width: 34rem;
}

/* Held back from the display size used elsewhere. In half a screen the old
   size set a long title as three lines and pushed the row taller than the
   picture needed to be. */
.levent-split__title {
	margin: 0 0 clamp(1rem, 2vw, 1.4rem);
	font-size: clamp(1.4rem, 2vw, 2.05rem);
	line-height: 1.2;
}

/* An index in the margin, the way a printed report numbers its sections. */
.levent-split__index {
	display: block;
	margin-bottom: 1.4rem;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(2.6rem, 3.4vw, 3.6rem);
	line-height: 1;
	color: var(--ll-hairline);
}

/* Statistics
---------------------------------------------------- */

.levent-stats {
	background: #01202A;
	color: #fff;
}

.levent-stats__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 2rem);
}

.levent-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* Hairlines between rather than above, which reads as one instrument rather
   than three stacked cards. */
.levent-stat {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 0 clamp(1rem, 2.5vw, 2.5rem);
	border-left: 1px solid rgba(255, 255, 255, .16);
}

.levent-stat:first-child {
	padding-left: 0;
	border-left: 0;
}

.levent-stat__figure {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(3rem, 5.6vw, 5.6rem);
	line-height: .95;
	letter-spacing: -.02em;
	color: #fff;
}

.levent-stat__label {
	font-size: clamp(10px, .58vw, 11.5px);
	font-weight: 500;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--ll-accent);
}

/* Typographic index
---------------------------------------------------- */

.levent-listgrid__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.5rem, 5vw, 2rem);
}

/* Sits under the heading, holding the same measure as a split's prose so the
   page keeps one reading width. */
.levent-listgrid__lead {
	max-width: 60ch;
	margin: 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .68);
}

.levent-listgrid__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	column-gap: clamp(2rem, 5vw, 5rem);
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ll-hairline);
}

.levent-listgrid__grid li {
	display: flex;
	align-items: center;
	gap: clamp(.9rem, 1.4vw, 1.25rem);
	padding: clamp(1rem, 1.6vw, 1.4rem) 0;
	border-bottom: 1px solid var(--ll-hairline);
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.05rem, 1.35vw, 1.35rem);
	color: var(--ll-primary);
	transition: color .3s ease, border-color .3s ease;
}

.levent-listgrid__grid li:hover {
	color: var(--ll-primary-hover);
	border-bottom-color: var(--ll-primary);
}

.levent-listgrid__num {
	flex: 0 0 auto;
	font-family: "Jost", sans-serif;
	font-size: 10px;
	letter-spacing: .22em;
	color: var(--ll-accent);
	transition: color .3s ease;
}

.levent-listgrid__name {
	min-width: 0;
}

/* The mark sits in a ring that fills on hover. Everything moves together, so
   the whole row reads as one thing responding rather than three. */
.levent-listgrid__mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: clamp(40px, 3.4vw, 48px);
	height: clamp(40px, 3.4vw, 48px);
	border-radius: 50%;
	color: var(--ll-primary);
	background: rgba(1, 68, 85, .05);
	box-shadow: inset 0 0 0 1px var(--ll-hairline);
	transition: background-color .35s ease, color .35s ease, box-shadow .35s ease,
		transform .35s cubic-bezier(.22, .61, .36, 1);
}

.levent-listgrid__grid li:hover .levent-listgrid__mark {
	color: #FFFFFF;
	background: var(--ll-primary);
	box-shadow: inset 0 0 0 1px var(--ll-primary);
	transform: translateY(-2px);
}

.levent-listgrid__grid li:hover .levent-listgrid__num {
	color: var(--ll-primary);
}

.levent-listgrid__icon {
	display: block;
	width: 55%;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	.levent-listgrid__mark {
		transition: none;
	}
}

/* Closing band
---------------------------------------------------- */

.levent-band {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(340px, 52svh, 560px);
	overflow: hidden;
	background: var(--ll-ground);
}

.levent-band__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.levent-band__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(to top, rgba(1, 32, 42, .78), rgba(1, 32, 42, .48));
}

/* Footage moves, so the ground under the type keeps changing. A still can
   carry white text on a 48% wash; a clip cannot. This lays a flat wash under
   the gradient and darkens the clip itself, which together hold the contrast
   wherever the shot happens to be bright. */
.levent-band.has-video .levent-band__scrim {
	background:
		linear-gradient(to top, rgba(1, 32, 42, .82), rgba(1, 32, 42, .62)),
		rgba(1, 32, 42, .28);
}

.levent-band.has-video .levent-band__video {
	filter: saturate(.92) brightness(.86);
}

.levent-band__inner {
	position: relative;
	z-index: 3;
	max-width: var(--ll-measure);
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 2rem);
	color: #fff;
}

/* One paragraph stays as it was: a centred statement. Two columns only appear
   when there is enough copy to need them. */
.levent-band__inner:has(.levent-band__body) {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(1.75rem, 5vw, 4.5rem);
	align-items: start;
	text-align: left;
}

/* Under both columns, centred on the band rather than on one side of it. */
.levent-band__action {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.levent-band__inner:not(:has(.levent-band__body)) {
	max-width: 54rem;
	text-align: center;
}

.levent-band__lead {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.levent-band__inner:not(:has(.levent-band__body)) .levent-band__lead {
	align-items: center;
}

.levent-band__text {
	margin: 0 0 2rem;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.5rem, 2.8vw, 2.7rem);
	line-height: 1.28;
	text-wrap: balance;
}

/* When paragraphs follow it, the opening line is a lede rather than the whole
   statement, so it comes down a size and the gap under it closes up. */
.levent-band__text.is-lede {
	margin-bottom: 0;
	font-size: clamp(1.3rem, 2.1vw, 2rem);
	line-height: 1.32;
	text-wrap: pretty;
}

.levent-band__body {
	margin-bottom: 0;
	/* Set against the top of the opening line, on a rule, so the two columns
	   start together rather than one floating beside the other. */
	padding-top: clamp(.75rem, 1.5vw, 1.1rem);
	border-top: 1px solid rgba(255, 255, 255, .22);
}

.levent-band__body p {
	margin: 0 0 1rem;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.75;
	color: rgba(255, 255, 255, .88);
	text-wrap: pretty;
}

.levent-band__body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.levent-split {
		grid-template-columns: 1fr;
	}

	.levent-split.is-flipped .levent-split__media {
		order: 0;
	}

	/* Stacked, so the picture needs a height of its own again. */
	.levent-split__media {
		height: clamp(260px, 56vw, 380px);
	}
}

/* Group companies
---------------------------------------------------- */

.levent-logos {
	background: #F7F6F3;
	border-top: 1px solid var(--ll-hairline);
	/* The vertical rhythm belongs to the section now the rail has left the
	   measured container and runs the full width of the screen. */
	padding: var(--ll-gap) 0;
	overflow: hidden;
}

/* Holds the heading only. The rail is a sibling, not a child, so it is not
   boxed into the measure: a moving band that stops short of both edges reads
   as a mistake rather than as a decision. */
.levent-logos__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-logos__head {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(1.5rem, 5vw, 5rem);
	align-items: end;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.levent-logos__intro p {
	margin: 0;
}

/* One continuous line rather than a grid. Twelve marks in a block all compete
   at once; moving them means the eye takes one at a time. */
.levent-logos__rail {
	position: relative;
	overflow: hidden;
	padding: clamp(2.25rem, 4vw, 3.5rem) 0;
	border-top: 1px solid var(--ll-hairline);
	border-bottom: 1px solid var(--ll-hairline);
	/* Just enough of a fade that a mark is not sliced off mid stroke at the
	   edge. It was 6% a side, which ate nearly a whole plate at each end. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 1.5%, #000 98.5%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 1.5%, #000 98.5%, transparent);
}

.levent-logos__track {
	display: flex;
	/* Stretch, not center: the separators are drawn on the items, so they only
	   run the full height of the rail if the items do. */
	align-items: stretch;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: levent-marquee 56s linear infinite;
}

.levent-logos__rail:hover .levent-logos__track {
	animation-play-state: paused;
}

/* Half, because the marks are rendered twice. */
@keyframes levent-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.levent-logos__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(.9rem, 1.6vw, 1.35rem);
	flex: 0 0 auto;
	width: clamp(240px, 21vw, 340px);
	padding: 0 clamp(1.25rem, 2.5vw, 2.5rem);
	/* Full height of the rail, and dark enough to be a rule rather than a
	   suggestion of one. Anything under about 40% disappears against the
	   section ground once the coloured plates are sitting next to it. */
	border-left: 1px solid rgba(1, 68, 85, .45);
}

/* The plate. Every mark is a transparent WebP and several are drawn for white,
   so each gets its own ground instead of borrowing the section's. */
.levent-logos__plate {
	display: grid;
	place-items: center;
	width: 100%;
	min-height: clamp(104px, 10vw, 148px);
	padding: clamp(1rem, 2vw, 1.6rem) clamp(1rem, 2vw, 1.75rem);
	/* No ground and no ring: the marks sit on the page itself. min-height is
	   kept so the rail still lines up whatever height each mark is. */
	transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.levent-logos__item:hover .levent-logos__plate {
	transform: translateY(-3px);
}

.levent-logos__mark {
	width: auto;
	max-width: 100%;
	/* Full colour and considerably larger. Greyed marks read as placeholders
	   or as logos of companies that no longer trade; these are live brands and
	   several carry meaning only in their own colour. */
	max-height: clamp(64px, 6.5vw, 104px);
	object-fit: contain;
	transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.levent-logos__item:hover .levent-logos__mark {
	transform: scale(1.06);
}

.levent-logos__name {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.5;
	color: rgba(1, 44, 56, .45);
	transition: color .3s ease;
}

.levent-logos__item:hover .levent-logos__name {
	color: var(--ll-primary);
}

@media (prefers-reduced-motion: reduce) {
	.levent-logos__track {
		animation: none;
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
	}

	/* Without motion the duplicate pass is noise. */
	.levent-logos__item[aria-hidden="true"] {
		display: none;
	}
}

@media (max-width: 900px) {
	.levent-logos__head {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

/* Footer
==================================================== */

.levent-footer {
	background: #01202A;
	color: rgba(255, 255, 255, .72);
}

.levent-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 4fr) repeat(2, minmax(0, 2fr)) minmax(0, 3fr);
	gap: clamp(2.5rem, 5vw, 5rem);
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 5vw, 2rem) clamp(3rem, 5vw, 4.5rem);
}

.levent-footer__logo img {
	display: block;
	width: clamp(112px, 9vw, 150px);
	height: auto;
}

.levent-footer__line {
	max-width: 26ch;
	margin: clamp(1.5rem, 2vw, 2rem) 0 0;
	font-size: clamp(13px, .8vw, 15px);
	line-height: 1.7;
	color: rgba(255, 255, 255, .58);
}

.levent-footer__heading {
	margin: 0 0 1.5rem;
	font-family: "Jost", sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--ll-accent);
}

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

.levent-footer__col li {
	margin-bottom: .9rem;
	font-size: clamp(14px, .88vw, 16px);
	line-height: 1.6;
}

.levent-footer__col a:not(.levent-social) {
	position: relative;
	color: rgba(255, 255, 255, .78);
	transition: color .25s ease;
}

.levent-footer__col a:not(.levent-social)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -3px;
	height: 1px;
	background: var(--ll-accent);
	transition: right .32s cubic-bezier(.22, .61, .36, 1);
}

.levent-footer__col a:not(.levent-social):hover {
	color: #fff;
}

.levent-footer__col a:not(.levent-social):hover::after {
	right: 0;
}

.levent-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	/* No rule above them. The gap already separates the marks from the address,
	   and a line across a three icon row cut the column in half. */
	margin-top: clamp(1.75rem, 2.5vw, 2.5rem) !important;
}

.levent-footer__social li {
	margin: 0;
}

/* Marks, not names. The circle gives the glyph a target big enough to hit on a
   phone without making the icon itself heavy. Each carries its own network
   colour, and the hover fills the circle with it rather than underlining
   anything: the theme puts an underline on every hovered link, which on an
   icon draws a line under nothing. */
.levent-social {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--ll-social, #FFFFFF);
	background: rgba(255, 255, 255, .06);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
	text-decoration: none !important;
	transition: color .25s ease, background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.levent-social:hover,
.levent-social:focus-visible {
	color: #FFFFFF;
	background: var(--ll-social, #FFFFFF);
	box-shadow: inset 0 0 0 1px var(--ll-social, #FFFFFF);
	text-decoration: none !important;
	transform: translateY(-2px);
}

.levent-social.is-instagram { --ll-social: #E1306C; }
.levent-social.is-facebook  { --ll-social: #1877F2; }
.levent-social.is-linkedin  { --ll-social: #0A66C2; }

/* Instagram is a gradient rather than a colour, so its filled state is too. */
.levent-social.is-instagram:hover,
.levent-social.is-instagram:focus-visible {
	background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF 78%, #515BD4);
}

.levent-social__icon {
	display: block;
}

/* Sits in the contact band beside Visit, Call and Write, so it takes the same
   cell and the same label underneath. */
.levent-contact__social {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 0 0 .9rem;
	padding: 0;
	list-style: none;
}

/* A quiet legal line, separated by a hairline rather than a second dark band. */
.levent-footer__base {
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.levent-footer__base-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 5vw, 2rem);
}

.levent-footer__base p {
	margin: 0;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}

@media (max-width: 900px) {
	.levent-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.levent-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.levent-footer__inner {
		grid-template-columns: 1fr;
	}
}

/* Featured development
---------------------------------------------------- */

.levent-feature {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(520px, 82svh, 900px);
	overflow: hidden;
	background: var(--ll-ground);
	color: #fff;
}

.levent-feature__media {
	position: absolute;
	inset: 0;
}

.levent-feature__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.levent-feature__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(1, 32, 42, .88) 0%, rgba(1, 32, 42, .42) 46%, rgba(1, 32, 42, .12) 76%),
		linear-gradient(to right, rgba(1, 32, 42, .55) 0%, transparent 58%);
}

.levent-feature__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 2rem) clamp(2.5rem, 4vw, 3.5rem);
}

.levent-feature__title {
	margin: 0;
	font-size: clamp(2.6rem, 5.6vw, 6rem);
	line-height: 1;
	font-weight: 400;
	letter-spacing: -.015em;
	color: #fff;
}

.levent-feature__tagline {
	margin: clamp(1rem, 1.6vw, 1.5rem) 0 clamp(1.75rem, 2.6vw, 2.5rem);
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.05rem, 1.6vw, 1.6rem);
	font-style: italic;
	color: rgba(255, 255, 255, .84);
}

/* Facts on a hairline rail, so the section carries substance and not only a
   name and a picture. */
.levent-feature__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0;
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	border-top: 1px solid rgba(255, 255, 255, .22);
}

.levent-feature__facts > div {
	padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1rem, 2vw, 2rem) 0;
	border-left: 1px solid rgba(255, 255, 255, .16);
}

.levent-feature__facts > div:first-child {
	padding-left: 0;
	border-left: 0;
}

.levent-feature__facts dt {
	margin: 0 0 .55rem;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ll-accent);
}

.levent-feature__facts dd {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.05rem, 1.5vw, 1.5rem);
	color: #fff;
}

@media (max-width: 700px) {
	.levent-feature__facts > div {
		padding-left: 0;
		border-left: 0;
	}
}

/* Credentials
---------------------------------------------------- */

/* Same facts as the About page, deliberately a different shape: statement and
   figures in one section, the numbers running down the right at display size
   rather than sitting in a band of three equal columns. */
.levent-cred {
	position: relative;
	background: #01202A;
	color: #fff;
	overflow: hidden;
}

/* Every other page closes on a light section, and that is what separates the
   page from the dark footer. Sustainability ends on the credentials band, the
   same #01202A as the footer, so the two read as one block. The light field is
   laid in between them instead. :has() keeps this tied to the condition rather
   than to a page id; where it is unsupported the page simply looks as before. */
body:has(.content-wrap > .levent-cred:last-child) .levent-footer::before {
	content: "";
	display: block;
	height: calc(var(--ll-gap) * 2);
	background: #F7F6F3;
}

/* A single soft light off the top left, so a flat dark block has some depth. */
.levent-cred::before {
	content: "";
	position: absolute;
	top: -30%;
	left: -10%;
	width: 60%;
	height: 140%;
	background: radial-gradient(closest-side, rgba(127, 179, 163, .10), transparent 70%);
	pointer-events: none;
}

.levent-cred__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	max-width: var(--ll-measure);
	margin: 0 auto;
	/* 8rem a side put 147px between the top of the band and a 12px label, which
	   read as a gap rather than as room. The figures beside it are what set the
	   height anyway. */
	padding: var(--ll-gap) clamp(1.5rem, 5vw, 2rem);
}

.levent-cred__lede {
	align-self: center;
}

.levent-cred__statement {
	max-width: 24ch;
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.5rem, 2.6vw, 2.7rem);
	line-height: 1.28;
	letter-spacing: -.01em;
	color: #fff;
	text-wrap: pretty;
}

/* The ranking body's own mark, under the claim it belongs to. It arrives on a
   white advertising board, so the white is cut away and the mark keeps its own
   colours on the dark ground rather than sitting in a pale box. */
.levent-cred__logo {
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
}

/* Sized against the column it sits in, not against the type: the lede column
   runs 636px at a desktop width and still has 224px of height spare under the
   statement, so the mark can be read as a credential rather than a footnote. */
.levent-cred__mark {
	display: block;
	width: clamp(180px, 22vw, 340px);
	height: auto;
}

.levent-cred__support {
	max-width: 42ch;
	margin: clamp(1.25rem, 2vw, 1.75rem) 0 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(255, 255, 255, .68);
}

.levent-cred__list {
	margin: 0;
	padding: 0;
}

.levent-cred__row {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: clamp(1rem, 2.5vw, 2.5rem);
	padding: clamp(1.5rem, 2.5vw, 2.25rem) 0;
}

.levent-cred__row dt {
	flex: 0 0 auto;
	min-width: clamp(150px, 13vw, 260px);
	margin: 0;
}

/* Tabular figures so the number does not jitter sideways while it counts. */
.levent-cred__figure {
	display: block;
	font-family: "Playfair Display", Georgia, serif;
	/* Was 7rem, which was sized for "57" and became uncomfortable once the
	   figures grew to 1,000,000 m²+: the number filled its row and the count
	   read as thrashing rather than counting. */
	font-size: clamp(2.4rem, 4.2vw, 4.2rem);
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: lining-nums tabular-nums;
	color: #fff;
}

.levent-cred__row dd {
	margin: 0;
	font-size: clamp(11px, .66vw, 13px);
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ll-accent);
}

/* Compact: short figures, so the text side leads and the rules stop before the
   empty half of the row. Without this a four character ordinal sits in a
   column sized for a seven figure number. */
.levent-cred--compact .levent-cred__inner {
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	padding-top: clamp(3rem, 6.5vw, 5.5rem);
	padding-bottom: clamp(3rem, 6.5vw, 5.5rem);
}

/* Short figures and short labels, so the rule ends a little after the label
   rather than running on across nothing. */
.levent-cred--compact .levent-cred__list {
	max-width: 23rem;
}

.levent-cred--compact .levent-cred__row {
	padding: clamp(1.1rem, 1.8vw, 1.6rem) 0;
}

.levent-cred--compact .levent-cred__row dt {
	min-width: clamp(90px, 6.5vw, 130px);
}

.levent-cred--compact .levent-cred__figure {
	font-size: clamp(2rem, 3.2vw, 3.2rem);
}

/* The rule draws itself as the figure counts, so the motion is one gesture
   rather than a number ticking on its own. */
.levent-cred__rule {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, .16);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.6s cubic-bezier(.22, .61, .36, 1);
}

.levent-cred.is-counting .levent-cred__rule {
	transform: scaleX(1);
}

.levent-cred__row:last-child .levent-cred__rule {
	background: var(--ll-accent);
}

@media (prefers-reduced-motion: reduce) {
	.levent-cred__rule {
		transform: scaleX(1);
		transition: none;
	}
}

@media (max-width: 900px) {
	/* The compact variant names two classes, so it outranks a single class
	   rule here no matter where it sits in the file, and the figures stayed in
	   two columns of 168 and 140 pixels on a phone. It has to be named too. */
	.levent-cred__inner,
	.levent-cred--compact .levent-cred__inner {
		grid-template-columns: 1fr;
	}

	.levent-cred__row dt {
		min-width: 0;
	}

	.levent-cred--compact .levent-cred__list {
		max-width: none;
	}
}

/* Development preview
---------------------------------------------------- */

/* Light, after two dark sections. The change of ground is what stops this
   reading as a second hero. */
.levent-preview {
	background: #fff;
}

.levent-preview__inner {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 2rem);
}

.levent-preview__title {
	margin: 0;
	font-size: clamp(2.4rem, 4.4vw, 4.4rem);
	line-height: 1.02;
	font-weight: 400;
	letter-spacing: -.02em;
	color: var(--ll-primary);
}

.levent-preview__tagline {
	margin: clamp(.75rem, 1.2vw, 1.1rem) 0 0;
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-size: clamp(1rem, 1.35vw, 1.35rem);
	color: #5a6f76;
}

.levent-preview__facts {
	margin: clamp(2rem, 3.5vw, 3rem) 0 clamp(2rem, 3.5vw, 2.75rem);
	border-top: 1px solid var(--ll-hairline);
}

.levent-preview__facts > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding: .9rem 0;
	border-bottom: 1px solid var(--ll-hairline);
}

.levent-preview__facts dt {
	margin: 0;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #7d8f95;
}

.levent-preview__facts dd {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1rem, 1.25vw, 1.25rem);
	color: var(--ll-primary);
}

.levent-btn--dark {
	background: var(--ll-primary);
	color: #fff;
}

.levent-btn--dark:hover {
	background: var(--ll-ground);
	color: #fff;
}

/* The frame is one link through to the project; the thumbnails below change
   what it shows. A click on the picture never does two things. */
.levent-preview__frame {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ll-ground);
}

.levent-preview__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity .7s ease;
}

.levent-preview__slide.is-active {
	opacity: 1;
}

.levent-preview__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}

.levent-preview__frame:hover .levent-preview__slide.is-active .levent-preview__image {
	transform: scale(1.03);
}

.levent-preview__count {
	position: absolute;
	right: clamp(1rem, 2vw, 1.5rem);
	bottom: clamp(1rem, 2vw, 1.5rem);
	z-index: 2;
	padding: .5rem .85rem;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .2em;
	color: #fff;
	background: rgba(1, 44, 56, .55);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.levent-preview__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: clamp(.5rem, 1vw, .75rem);
	margin: clamp(.5rem, 1vw, .75rem) 0 0;
	padding: 0;
	list-style: none;
}

.levent-preview__thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	padding: 0;
	border: 0;
	overflow: hidden;
	cursor: pointer;
	background: none;
}

.levent-preview__thumbimg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: .45;
	transition: opacity .35s ease;
}

.levent-preview__thumb.is-active .levent-preview__thumbimg,
.levent-preview__thumb:hover .levent-preview__thumbimg {
	opacity: 1;
}

/* A rule rather than a border, so the active thumbnail does not shift. */
.levent-preview__thumb::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--ll-primary);
	transition: right .35s cubic-bezier(.22, .61, .36, 1);
}

.levent-preview__thumb.is-active::after {
	right: 0;
}

@media (max-width: 900px) {
	.levent-preview__inner {
		grid-template-columns: 1fr;
	}
}

/* Developments accordion
---------------------------------------------------- */

.levent-projects {
	background: #01202A;
	color: #fff;
	padding: var(--ll-gap) 0 0;
}

.levent-projects__head {
	max-width: var(--ll-measure);
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-projects__title {
	margin: 0;
	font-size: clamp(1.9rem, 3.2vw, 3.2rem);
	line-height: 1.1;
	font-weight: 400;
	letter-spacing: -.01em;
	color: #fff;
}

.levent-projects__rail {
	display: flex;
	height: clamp(460px, 68svh, 760px);
	overflow: hidden;
}

.levent-project {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	border-left: 1px solid rgba(255, 255, 255, .14);
	/* The width itself is the animation. */
	transition: flex-grow .7s cubic-bezier(.22, .61, .36, 1);
}

.levent-project:first-child {
	border-left: 0;
}

.levent-project.is-open {
	flex-grow: 4;
}

.levent-project__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04);
	transition: transform 1.2s cubic-bezier(.22, .61, .36, 1), filter .7s ease;
	filter: saturate(.7);
}

.levent-project.is-open .levent-project__image {
	transform: scale(1);
	filter: none;
}

.levent-project__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(1, 32, 42, .9) 0%, rgba(1, 32, 42, .45) 45%, rgba(1, 32, 42, .25) 100%);
	transition: opacity .7s ease;
}

.levent-project.is-open .levent-project__scrim {
	background: linear-gradient(to top, rgba(1, 32, 42, .92) 0%, rgba(1, 32, 42, .35) 52%, transparent 100%);
}

/* A development whose photography has not arrived. The client would rather see
   a plain white plate than a stand-in picture, so the card inverts rather than
   setting white type on white: over a white plate the closed scrim reaches
   only .25, which puts the spine at 1.65:1, invisible. Ink goes dark, rules go
   dark, and the card reads as a deliberate blank among the photographs. */
.levent-project.is-plain .levent-project__scrim,
.levent-project.is-plain.is-open .levent-project__scrim {
	background: none;
}

.levent-project.is-plain .levent-project__spine,
.levent-project.is-plain .levent-project__name,
.levent-project.is-plain .levent-project__facts,
.levent-project.is-plain .levent-project__facts li {
	color: var(--ll-ground);
}

.levent-project.is-plain .levent-project__facts {
	border-top-color: rgba(1, 44, 56, .18);
}

.levent-project.is-plain .levent-project__facts span {
	color: var(--ll-primary);
}

/* The solid button is a white pill, which disappears here. */
.levent-project.is-plain .levent-btn--solid {
	background: var(--ll-ground);
	color: #fff;
}

.levent-project.is-plain .levent-btn--solid:hover,
.levent-project.is-plain .levent-btn--solid:focus-visible {
	background: var(--ll-primary);
	color: #fff;
}

/* Its left edge is a white hairline on a white plate. */
.levent-project.is-plain {
	border-left-color: rgba(1, 44, 56, .18);
}

/* Closed panels carry the name turned on its side, which is what makes a
   narrow column still readable. */
.levent-project__spine {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 1.5rem;
	width: 100%;
	padding: 0 0 clamp(1.75rem, 3vw, 2.5rem);
	background: none;
	border: 0;
	cursor: pointer;
	color: #fff;
}

.levent-project__spinename {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: clamp(13px, .9vw, 16px);
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: opacity .4s ease;
}

.levent-project__spinenum {
	font-size: 10px;
	letter-spacing: .2em;
	color: var(--ll-accent);
	transition: opacity .4s ease;
}

.levent-project.is-open .levent-project__spine {
	cursor: default;
}

.levent-project.is-open .levent-project__spinename,
.levent-project.is-open .levent-project__spinenum {
	opacity: 0;
	pointer-events: none;
}

.levent-project__panel {
	position: absolute;
	z-index: 4;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(1.75rem, 3.5vw, 3.25rem);
	opacity: 0;
	transform: translateY(18px);
	pointer-events: none;
	transition: opacity .5s ease .15s, transform .6s ease .15s;
}

/* Renders arrive with the development's own signage baked into them, and the
   panel lands straight on top of it. A wash anchored to the corner the text
   occupies clears it without flattening the picture, which is what deepening
   the whole scrim would do. */
.levent-project__panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: -5rem;
	z-index: -1;
	background: linear-gradient(to top right,
		rgba(1, 32, 42, .95) 0%,
		rgba(1, 32, 42, .74) 28%,
		rgba(1, 32, 42, .32) 56%,
		transparent 78%);
	pointer-events: none;
}

.levent-project.is-open .levent-project__panel {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.levent-project__name {
	margin: 0;
	font-size: clamp(1.9rem, 3.4vw, 3.4rem);
	line-height: 1.02;
	font-weight: 400;
	letter-spacing: -.015em;
	color: #fff;
}

.levent-project__tagline {
	margin: .6rem 0 0;
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-size: clamp(.95rem, 1.2vw, 1.2rem);
	color: rgba(255, 255, 255, .82);
}

.levent-project__facts {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	margin: clamp(1.5rem, 2.5vw, 2rem) 0;
	padding: clamp(1.25rem, 2vw, 1.5rem) 0 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, .2);
}

.levent-project__facts li {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(.95rem, 1.15vw, 1.15rem);
	color: #fff;
}

.levent-project__facts span {
	display: block;
	margin-bottom: .35rem;
	font-family: "Jost", sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ll-accent);
}

/* Stacked on a phone: there is no room to collapse sideways. */
@media (max-width: 900px) {
	.levent-projects__rail {
		flex-direction: column;
		height: auto;
	}

	.levent-project {
		flex: none;
		height: clamp(300px, 46svh, 420px);
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .14);
	}

	.levent-project.is-open {
		height: clamp(440px, 66svh, 560px);
	}

	.levent-project__spinename {
		writing-mode: horizontal-tb;
		transform: none;
	}

	.levent-project__spine {
		justify-content: flex-end;
		flex-direction: row;
		align-items: center;
		gap: 1rem;
		padding: 0 clamp(1.25rem, 4vw, 2rem) clamp(1.25rem, 3vw, 1.75rem);
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.levent-project,
	.levent-project__image,
	.levent-project__panel {
		transition: none;
	}
}

/* Completed projects
   Cards, where the developments on sale above are a list. Finished work is not
   being compared line by line, it is being shown, so the picture leads and the
   type follows it.
---------------------------------------------------- */

.levent-completed {
	background: #F7F6F3;
	padding: var(--ll-gap) 0 var(--ll-gap-lg);
}

/* The heading takes the first column and the cards take the rest. Two cards
   under a full width heading left a third of the row empty, which reads as a
   card that failed to load rather than as space. This fills the row at two
   cards and still wraps cleanly at three or more. */
.levent-completed__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-completed__head {
	position: sticky;
	top: clamp(7rem, 12vw, 10rem);
}

.levent-completed__lead {
	margin: clamp(1rem, 2vw, 1.4rem) 0 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .68);
}

.levent-completed__grid {
	display: grid;
	/* Neither auto-fill nor auto-fit: auto-fill held four tracks open for two
	   cards and emptied half the row, auto-fit then overcorrected and made
	   each card 728px wide. A card has a size; three across is that size. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.levent-completed__item {
	display: flex;
}

.levent-completed__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
}

a.levent-completed__card:hover,
a.levent-completed__card:focus-visible {
	color: inherit;
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(1, 44, 56, .12);
}

/* The frame clips the zoom; the image cannot do it alone because the card
   itself is what lifts. */
.levent-completed__frame {
	display: block;
	overflow: hidden;
}

.levent-completed__image {
	display: block;
	width: 100%;
	/* A fixed height letterboxes badly once auto-fit widens the cards; a ratio
	   keeps the crop the same shape at any card width. */
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	object-position: 50% 45%;
	transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}

a.levent-completed__card:hover .levent-completed__image {
	transform: scale(1.05);
}

.levent-completed__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

.levent-completed__name {
	display: block;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.2rem, 1.5vw, 1.5rem);
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--ll-ground);
}

.levent-completed__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1.1rem;
	margin-top: .6rem;
	font-size: .85rem;
	color: rgba(1, 44, 56, .6);
}

.levent-completed__meta span + span::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: 1.1rem;
	margin-bottom: 3px;
	border-radius: 50%;
	background: var(--ll-accent);
	vertical-align: middle;
}

.levent-completed__note {
	margin-top: .7rem;
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-size: .95rem;
	color: rgba(1, 44, 56, .62);
}

/* Pushed to the bottom so the cue sits on one line across the row however
   much text each card carries. */
.levent-completed__more {
	margin-top: auto;
	padding-top: clamp(1rem, 2vw, 1.5rem);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ll-primary);
}

.levent-completed__more span {
	display: inline-block;
	margin-left: .5rem;
	transition: transform .35s ease;
}

a.levent-completed__card:hover .levent-completed__more span {
	transform: translateX(.35rem);
}

@media (max-width: 1100px) {
	.levent-completed__inner {
		grid-template-columns: 1fr;
	}

	.levent-completed__head {
		position: static;
	}
}

@media (max-width: 640px) {
	.levent-completed__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.levent-completed__card,
	.levent-completed__image,
	.levent-completed__more span {
		transition: none;
	}
}

/* Project pages
---------------------------------------------------- */

/* Key numbers, straight under the introduction. */
.levent-factbar {
	background: var(--ll-ground);
	color: #fff;
}

.levent-factbar__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-factbar__cell {
	padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem);
	border-left: 1px solid rgba(255, 255, 255, .14);
}

.levent-factbar__cell:first-child {
	border-left: 0;
	padding-left: 0;
}

.levent-factbar__value {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.5rem, 2.4vw, 2.4rem);
	line-height: 1.1;
	font-weight: 400;
}

.levent-factbar__label {
	margin: .5rem 0 0;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ll-accent);
}

/* Amenities. Two type sizes and a hairline, nothing else: the list is long, so
   any decoration per row multiplies into noise. */
.levent-amenities {
	background: #F7F6F3;
	padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

.levent-amenities__inner,
.levent-gallery__inner,
.levent-types__inner,
.levent-map__inner,
.levent-compare__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-amenities__head,
.levent-gallery__head,
.levent-types__head,
.levent-compare__head {
	display: grid;
	/* A 34ch column made the standfirst seven lines tall next to a one line
	   heading, so the head read top heavy. Proportional columns keep the
	   paragraph to three or four lines whatever it says. */
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--ll-hairline);
}

.levent-amenities__intro,
.levent-gallery__lead,
.levent-types__lead,
.levent-compare__lead {
	margin: 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .68);
}

.levent-amenities__grid {
	display: grid;
	/* Explicit counts, not auto-fit. Sixteen amenities over auto-fit's five
	   columns left one on a row of its own. Four divides cleanly. */
	grid-template-columns: repeat(4, 1fr);
	gap: 0 clamp(2rem, 4vw, 4rem);
	margin: 0;
	padding: clamp(1rem, 2vw, 1.5rem) 0 0;
	list-style: none;
}

.levent-amenities__grid li {
	padding: clamp(.85rem, 1.4vw, 1.1rem) 0;
	border-bottom: 1px solid var(--ll-hairline);
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1rem, 1.2vw, 1.2rem);
	color: var(--ll-ground);
}

/* Gallery. The first picture is the one that sells the place, so it gets the
   full width and the rest pair up under it. */
.levent-gallery {
	background: #fff;
	padding: var(--ll-gap) 0;
}

.levent-gallery.is-dark {
	background: #01202A;
}

.levent-gallery.is-dark .levent-h2,
.levent-gallery.is-dark .levent-gallery__lead {
	color: #fff;
}

.levent-gallery.is-dark .levent-gallery__head {
	border-bottom-color: rgba(255, 255, 255, .18);
}

.levent-gallery.is-dark figcaption {
	color: rgba(255, 255, 255, .6);
}

.levent-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2vw, 1.75rem);
	padding-top: clamp(2rem, 4vw, 3.5rem);
}

.levent-gallery__item {
	margin: 0;
	overflow: hidden;
}

/* A pair is a pair. With only two pictures the first one is not a lead with a
   straggler beside it, so it stops spanning the row and they sit side by side.
   The class is simply not printed in that case. */
.levent-gallery__item.is-wide {
	grid-column: 1 / -1;
}

.levent-gallery__image {
	display: block;
	width: 100%;
	height: clamp(220px, 24vw, 340px);
	object-fit: cover;
	transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}

.levent-gallery__item.is-wide .levent-gallery__image {
	height: clamp(300px, 42vw, 620px);
}

.levent-gallery__item:hover .levent-gallery__image {
	transform: scale(1.03);
}

.levent-gallery figcaption {
	margin-top: .7rem;
	font-size: .85rem;
	color: rgba(1, 44, 56, .6);
}

/* Location. Copy and distances on the left, the map holding its own column so
   it is never a letterbox strip under the text. */
.levent-map {
	background: #F7F6F3;
	padding: var(--ll-gap-lg) 0;
}

.levent-map__inner {
	display: grid;
	/* A ch-based column sizes off the body font, not the heading, so the h2
	   landed on five lines. Fixed width plus a smaller heading here. */
	grid-template-columns: minmax(0, 30rem) 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.levent-map .levent-h2 {
	font-size: clamp(1.5rem, 2.1vw, 2.1rem);
}

.levent-map__distances {
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}

.levent-map__distances > div {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: clamp(.75rem, 1.3vw, 1rem) 0;
	border-bottom: 1px solid var(--ll-hairline);
}

.levent-map__distances dt {
	font-weight: 400;
	color: var(--ll-ground);
}

.levent-map__distances dd {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	color: rgba(1, 44, 56, .7);
	text-align: right;
}

.levent-map__link {
	display: inline-block;
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ll-primary);
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
}

.levent-map__frame {
	position: relative;
}

.levent-map__canvas {
	height: clamp(340px, 42vw, 580px);
	background: #E9EDEE;
	z-index: 0;
}

/* OSM tiles are more saturated than anything else on the page. The pins are
   drawn by us and must not be desaturated with them. */
.levent-map__canvas .leaflet-tile-pane {
	filter: saturate(.72) contrast(.96);
}

.levent-map__canvas .leaflet-control-attribution {
	font-size: 10px;
	background: rgba(255, 255, 255, .8);
}

.levent-map__canvas .leaflet-control-zoom a {
	color: var(--ll-primary);
	border-radius: 0;
}

.levent-map__hint {
	margin: .7rem 0 0;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(1, 44, 56, .45);
}

/* Pins are drawn rather than iconographic: a dot and a label on the ground,
   which reads as a plan of the area instead of a cluster of balloons. */
.levent-pin {
	display: flex;
	align-items: center;
	gap: .4rem;
	white-space: nowrap;
	transform: translate(-6px, -6px);
}

.levent-pin__dot {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--ll-accent);
	border: 2px solid #fff;
	box-shadow: 0 1px 5px rgba(1, 44, 56, .4);
}

.levent-pin__label {
	font-family: "Jost", sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--ll-ground);
	background: rgba(255, 255, 255, .88);
	padding: 2px 7px;
	border-radius: 2px;
	box-shadow: 0 1px 4px rgba(1, 44, 56, .18);
}

.levent-pin__label em {
	font-style: normal;
	color: rgba(1, 44, 56, .55);
}

/* The development itself outranks the shops around it. */
.levent-pin--site .levent-pin__dot {
	width: 15px;
	height: 15px;
	background: var(--ll-primary);
}

.levent-pin--site .levent-pin__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	background: var(--ll-primary);
	padding: 4px 10px;
}

/* Residence types
   A vertical version of the homepage accordion. The closed row keeps the shape
   it had, with its own picture behind it; pressing it grows the page downward
   and lays out the floor plan and the interior renders with their labels.
---------------------------------------------------- */

.levent-types {
	background: #01202A;
	padding: var(--ll-gap) 0 0;
}

.levent-types__inner {
	max-width: none;
	padding: 0;
}

.levent-types__head {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem) clamp(1.75rem, 3vw, 2.5rem);
	border-bottom: 0;
}

.levent-types .levent-h2 {
	color: #fff;
}

.levent-types__lead {
	margin: 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(255, 255, 255, .68);
}

.levent-types__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.levent-type__row {
	position: relative;
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.levent-type__row:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

/* The picture is behind the row, not beside it, so eight rows do not become
   eight cards. It lifts as the row is approached. */
.levent-type__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 55%;
	opacity: .3;
	transform: scale(1.05);
	transition: opacity .6s ease, transform 1.4s cubic-bezier(.22, .61, .36, 1);
}

.levent-type__row:hover .levent-type__bg,
.levent-type__row.is-open .levent-type__bg {
	opacity: .48;
	transform: scale(1);
}

.levent-type__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(1, 32, 42, .94) 0%, rgba(1, 32, 42, .72) 45%, rgba(1, 32, 42, .58) 100%);
	pointer-events: none;
}

.levent-type {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr) auto auto 2.5rem;
	align-items: baseline;
	gap: .35rem 1.5rem;
	width: 100%;
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: clamp(1.5rem, 2.6vw, 2.1rem) clamp(1.5rem, 5vw, 2rem);
	background: none;
	border: 0;
	text-align: left;
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: padding-left .35s ease;
}

.levent-type__row:not(.is-expandable) .levent-type {
	cursor: default;
}

.levent-type__num {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	color: var(--ll-accent);
}

.levent-type__name {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.2rem, 1.7vw, 1.7rem);
	line-height: 1.1;
	letter-spacing: -.01em;
	color: #fff;
}

.levent-type__size {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1rem, 1.2vw, 1.2rem);
	white-space: nowrap;
	color: #fff;
}

.levent-type__note {
	font-size: .88rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .62);
}

.levent-type__size:empty,
.levent-type__note:empty {
	display: none;
}

/* A chevron that turns, so the row says what it will do before it is pressed. */
.levent-type__chev {
	justify-self: end;
	width: 10px;
	height: 10px;
	border-right: 1px solid var(--ll-accent);
	border-bottom: 1px solid var(--ll-accent);
	transform: rotate(45deg);
	transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

.levent-type__row.is-open .levent-type__chev {
	transform: rotate(225deg);
}

.levent-type__panel {
	position: relative;
	z-index: 2;
	height: 0;
	overflow: hidden;
	transition: height .55s cubic-bezier(.22, .61, .36, 1);
}

.levent-type__plates {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	/* Figures must not stretch to the tallest in the row, or every plate takes
	   the height of the one portrait bathroom shot. */
	align-items: start;
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
}

.levent-type__plate {
	margin: 0;
}

/* A definite height, not aspect-ratio: the theme sets img { height: auto } and
   the plates were rendering at their natural shape, which is three different
   shapes across one row. */
.levent-type__plateimg {
	display: block;
	width: 100%;
	height: clamp(190px, 17vw, 250px);
	object-fit: cover;
	object-position: 50% 45%;
	background: rgba(255, 255, 255, .06);
}

/* A plan is a drawing, not a photograph. It has to be seen whole, and at a
   quarter of the measure it cannot be read at all, so it takes two columns. */
.levent-type__plate.is-plan {
	grid-column: span 2;
}

.levent-type__plate.is-plan .levent-type__plateimg {
	/* The plans are square renders. In a wide, short box contain shrinks them
	   to the box height and wastes the width, so the box is deep enough for the
	   drawing to be read. */
	height: clamp(300px, 30vw, 470px);
	object-fit: contain;
	background: #fff;
	padding: .75rem;
}

.levent-type__plate figcaption {
	margin-top: .7rem;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ll-accent);
}

.levent-type__more {
	display: inline-block;
	max-width: var(--ll-measure);
	margin: 0 auto clamp(2rem, 3.5vw, 3rem);
	padding-left: clamp(1.5rem, 5vw, 2rem);
}

.levent-types .levent-btn--solid {
	background: #fff;
	color: var(--ll-primary);
}

@media (max-width: 1100px) {
	.levent-type__plates {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.levent-type__plates {
		grid-template-columns: 1fr;
	}

	.levent-type__plate.is-plan {
		grid-column: span 1;
	}
}

@media (max-width: 900px) {
	.levent-type {
		grid-template-columns: 2.5rem 1fr 1.75rem;
		row-gap: .4rem;
	}

	.levent-type__size,
	.levent-type__note {
		grid-column: 2 / 4;
	}

	.levent-type__chev {
		grid-row: 1;
		grid-column: 3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.levent-type,
	.levent-type__bg,
	.levent-type__chev,
	.levent-type__panel {
		transition: none;
	}
}

/* Render beside the delivered building. */
.levent-compare {
	background: #01202A;
	padding: clamp(4rem, 8vw, 7rem) 0;
}

.levent-compare .levent-h2,
.levent-compare__lead {
	color: #fff;
}

.levent-compare__head {
	border-bottom-color: rgba(255, 255, 255, .18);
}

.levent-compare__pair {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2vw, 1.75rem);
	padding-top: clamp(2rem, 4vw, 3.5rem);
}

.levent-compare__side {
	margin: 0;
}

.levent-compare__image {
	display: block;
	width: 100%;
	height: clamp(240px, 30vw, 460px);
	object-fit: cover;
}

.levent-compare__side figcaption {
	margin-top: .8rem;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ll-accent);
}

/* Enquiry. */
/* Light, and shorter than it was. On a dark teal ground directly above a near
   black footer it read as two footers stacked, and it printed the phone number
   and email address the footer already carries. */
.levent-cta {
	background: #F7F6F3;
	color: var(--ll-ground);
	padding: var(--ll-gap) 0;
	text-align: center;
	border-top: 1px solid var(--ll-hairline);
}

.levent-cta__inner {
	max-width: 62ch;
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-cta .levent-eyebrow {
	justify-content: center;
}

.levent-cta__title {
	margin: 0;
	/* These are centred straplines of two or three sentences, so the default
	   greedy wrap keeps stranding a single word on the last line. */
	text-wrap: balance;
	font-size: clamp(1.6rem, 2.4vw, 2.4rem);
	line-height: 1.12;
	font-weight: 400;
	letter-spacing: -.015em;
	color: var(--ll-ground);
}

.levent-cta__text {
	margin: clamp(.85rem, 1.6vw, 1.15rem) auto 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .68);
}

.levent-cta__actions {
	margin-top: clamp(1.5rem, 2.5vw, 2rem);
}

/* --solid is a white pill built for dark grounds; invisible on this one. */
.levent-cta .levent-btn--solid {
	background: var(--ll-primary);
	color: #fff;
}

.levent-cta .levent-btn--solid:hover {
	background: var(--ll-ground);
	color: #fff;
}

@media (max-width: 900px) {
	.levent-map__inner {
		grid-template-columns: 1fr;
	}

	.levent-type {
		grid-template-columns: 2.5rem 1fr;
		row-gap: .35rem;
	}

	.levent-type__size,
	.levent-type__note {
		grid-column: 2;
	}
}

/* Four explicit columns fixed the orphaned sixteenth amenity on desktop and
   broke every phone: 110px tracks that "Indoor and outdoor sports facilities"
   runs straight out of. auto-fit used to collapse on its own; explicit counts
   have to be told. */
@media (max-width: 1100px) {
	.levent-amenities__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 780px) {
	.levent-amenities__grid {
		grid-template-columns: 1fr;
	}

	.levent-amenities__head,
	.levent-gallery__head,
	.levent-types__head,
	.levent-compare__head {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.levent-gallery__grid,
	.levent-compare__pair {
		grid-template-columns: 1fr;
	}

	.levent-factbar__cell {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .14);
		padding-left: 0;
	}

	.levent-factbar__cell:first-child {
		border-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.levent-gallery__image,
	.levent-type {
		transition: none;
	}
}

/* Projects index
   The list is the page. One picture sits beside it and changes as the eye
   moves down, so there is only ever one image on screen and the comparison
   between developments stays in the type.
---------------------------------------------------- */

.levent-index {
	background: #fff;
	padding: var(--ll-gap) 0 var(--ll-gap-lg);
}

.levent-index__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-index__head {
	padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.levent-index__body {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.levent-index__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.levent-index__row {
	border-top: 1px solid var(--ll-hairline);
}

.levent-index__row:last-child {
	border-bottom: 1px solid var(--ll-hairline);
}

/* Delivered work is in the same list as work on sale, because comparing them
   is the reason to have an index at all. A rule and a label separate them. */
/* The break row's own hairline plus the label's rule drew two lines with a
   gap between them. The label carries the rule; the row gives its up. */
.levent-index__row.is-break {
	border-top: 0;
}

.levent-index__group {
	margin: clamp(2rem, 3.5vw, 3rem) 0 0;
	padding-top: clamp(1rem, 1.6vw, 1.25rem);
	border-top: 1px solid var(--ll-primary);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ll-primary);
}

.levent-index__link {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr) auto 1.5rem;
	align-items: baseline;
	gap: .35rem 1.25rem;
	padding: clamp(1.4rem, 2.4vw, 2rem) 0;
	color: inherit;
	text-decoration: none;
	transition: padding-left .4s cubic-bezier(.22, .61, .36, 1);
}

.levent-index__link:hover,
.levent-index__link:focus-visible {
	padding-left: .85rem;
	color: inherit;
}

.levent-index__num {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	color: var(--ll-accent);
}

.levent-index__name {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.6rem, 2.9vw, 2.9rem);
	line-height: 1.05;
	letter-spacing: -.015em;
	color: var(--ll-ground);
	transition: color .35s ease;
}

.levent-index__link.is-current .levent-index__name {
	color: var(--ll-primary-hover);
}

.levent-index__status {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ll-primary);
}

.levent-index__row.is-break ~ .levent-index__row .levent-index__status,
.levent-index__row.is-break .levent-index__status {
	color: rgba(1, 44, 56, .45);
}

.levent-index__arrow {
	justify-self: end;
	font-size: 1.1rem;
	color: var(--ll-accent);
	opacity: 0;
	transform: translateX(-.5rem);
	transition: opacity .35s ease, transform .35s ease;
}

.levent-index__link:hover .levent-index__arrow,
.levent-index__link:focus-visible .levent-index__arrow {
	opacity: 1;
	transform: none;
}

/* The facts sit under the name, in the name's column, so the rows read as
   entries rather than as a spreadsheet. */
.levent-index__meta {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.5rem;
	font-size: .9rem;
	color: rgba(1, 44, 56, .6);
}

.levent-index__meta span + span::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: 1.5rem;
	margin-bottom: 3px;
	border-radius: 50%;
	background: var(--ll-accent);
	vertical-align: middle;
}

.levent-index__thumb {
	display: none;
}

.levent-index__preview {
	position: sticky;
	top: clamp(7rem, 12vw, 10rem);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	transition: background-color .5s ease;
}

/* The hovered development has no photograph yet. A clean plate says so;
   holding the previous one would put the wrong building beside the name. */
.levent-index__preview.is-empty {
	background: #F7F6F3;
	border: 1px solid var(--ll-hairline);
}

.levent-index__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity .6s ease, transform 1.1s cubic-bezier(.22, .61, .36, 1);
}

.levent-index__image.is-active {
	opacity: 1;
	transform: none;
}

/* No second column to put a picture in, so each row carries its own. */
@media (max-width: 900px) {
	.levent-index__body {
		grid-template-columns: 1fr;
	}

	.levent-index__preview {
		display: none;
	}

	.levent-index__link {
		grid-template-columns: 2.5rem 1fr auto;
	}

	.levent-index__arrow {
		display: none;
	}

	.levent-index__thumb {
		display: block;
		grid-column: 1 / -1;
		width: 100%;
		height: clamp(180px, 40vw, 260px);
		margin-top: .9rem;
		object-fit: cover;
	}

	/* Centro Mare has no photography yet. The client asked for a plain white
	   plate wherever a picture would go, so this matches the card on the home
	   page and the hero on its own page rather than being the one place that
	   shows a grey box instead. */
	.levent-index__thumb--empty {
		background: #FFFFFF;
		border: 1px solid var(--ll-hairline);
	}
}

@media (prefers-reduced-motion: reduce) {
	.levent-index__link,
	.levent-index__image,
	.levent-index__arrow {
		transition: none;
	}
}

/* Homepage enquiry
   The one place on the site that converts. Light, because it follows the white
   logo wall and a dark band there would read as the footer starting early.
   Fields are underlined rather than boxed, which is the same hairline language
   the rest of the page uses.
---------------------------------------------------- */

.levent-invite {
	/* White, flush with the logo wall above it. The hairline is the only thing
	   separating them, which is enough: the footer immediately below is near
	   black, so the enquiry still reads as its own band. */
	background: #fff;
	padding: var(--ll-gap) 0;
	border-top: 1px solid var(--ll-hairline);
}

.levent-invite__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 6vw, 5.5rem);
	align-items: start;
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-invite__title {
	margin: 0;
	font-size: clamp(1.8rem, 3vw, 3rem);
	line-height: 1.08;
	font-weight: 400;
	letter-spacing: -.015em;
	color: var(--ll-ground);
}

.levent-invite__text {
	max-width: 40ch;
	margin: clamp(1rem, 2vw, 1.4rem) 0 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .68);
}

.levent-invite__form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.levent-field {
	margin: 0;
}

.levent-field label {
	display: block;
	margin-bottom: .5rem;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(1, 44, 56, .55);
}

.levent-field input,
.levent-field select {
	width: 100%;
	padding: .5rem 0;
	font-family: inherit;
	font-size: 1rem;
	color: var(--ll-ground);
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(1, 68, 85, .25);
	border-radius: 0;
	appearance: none;
	transition: border-color .3s ease;
}

.levent-field select {
	/* appearance:none removes the arrow, so draw one. */
	background-image: linear-gradient(45deg, transparent 50%, var(--ll-primary) 50%),
		linear-gradient(135deg, var(--ll-primary) 50%, transparent 50%);
	background-position: right 6px center, right 1px center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 1.5rem;
}

.levent-field input:focus,
.levent-field select:focus {
	outline: none;
	border-bottom-color: var(--ll-primary);
}

.levent-invite__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Every other place --solid appears sits on a dark ground, so it is a white
   pill. On a white section it disappeared entirely. Inverted here rather than
   changed globally, because it is right everywhere else. */
.levent-invite .levent-btn--solid {
	background: var(--ll-primary);
	color: #fff;
}

.levent-invite .levent-btn--solid:hover,
.levent-invite .levent-btn--solid:focus-visible {
	background: var(--ll-ground);
	color: #fff;
}

.levent-invite .levent-btn--solid:disabled {
	opacity: .55;
	cursor: default;
}

.levent-invite__submit {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
	margin-top: clamp(.5rem, 1.5vw, 1rem);
}

.levent-invite__note {
	max-width: 34ch;
	font-size: .85rem;
	line-height: 1.6;
	color: rgba(1, 44, 56, .55);
}

.levent-invite__result {
	grid-column: 1 / -1;
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.05rem;
	color: var(--ll-primary);
}

.levent-invite__result.is-error {
	font-family: inherit;
	font-size: .9rem;
	color: #A63A2E;
}

/* Once it has been sent there is nothing left to fill in. */
.levent-invite__form.is-done .levent-field,
.levent-invite__form.is-done .levent-invite__submit {
	display: none;
}

@media (max-width: 900px) {
	.levent-invite__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.levent-invite__form {
		grid-template-columns: 1fr;
	}
}

/* Mission and vision
---------------------------------------------------- */

.levent-pair {
	background: #F7F6F3;
	padding: var(--ll-gap) 0;
}

.levent-pair__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-pair__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 4.5rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* A rule between them, not around each. Two boxes would read as two cards; a
   single division reads as one idea with two halves. */
.levent-pair__cell + .levent-pair__cell {
	padding-left: clamp(2rem, 5vw, 4.5rem);
	border-left: 1px solid var(--ll-hairline);
}

.levent-pair__label {
	margin: 0 0 clamp(.85rem, 1.6vw, 1.25rem);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ll-accent);
}

.levent-pair__text {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.25rem, 1.9vw, 1.9rem);
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--ll-ground);
}

@media (max-width: 780px) {
	.levent-pair__grid {
		grid-template-columns: 1fr;
	}

	.levent-pair__cell + .levent-pair__cell {
		padding-left: 0;
		padding-top: clamp(1.75rem, 4vw, 2.5rem);
		border-left: 0;
		border-top: 1px solid var(--ll-hairline);
	}
}

/* A signed message
---------------------------------------------------- */

.levent-message {
	background: #fff;
	padding: var(--ll-gap-lg) 0;
}

.levent-message__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

/* A letter is a narrower thing than a page. Held in from the full measure so
   the portrait sits beside the writing rather than across the room from it:
   at full width the prose ended 400px short of the picture. */
.levent-message.has-portrait .levent-message__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(2rem, 4.5vw, 4rem);
	align-items: start;
	max-width: 80rem;
}

/* Set as a letter: the quote holds one column at display size, the prose and
   the signature hold the other. A single 62ch column left nearly a thousand
   pixels of empty page beside it. */
.levent-message__body {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

/* With a portrait there is only room for one column of text, and the column
   itself sets the measure, so the caps that stop it running away on a full
   width page are not wanted here. */
.levent-message.has-portrait .levent-message__body {
	grid-template-columns: 1fr;
	max-width: none;
}

.levent-message.has-portrait .levent-message__prose {
	max-width: 56ch;
}

.levent-message__prose {
	max-width: 46ch;
}

/* The quote is the page. Set at heading size so the prose beneath reads as the
   explanation rather than as more of the same. */
.levent-message__quote {
	margin: clamp(1rem, 2vw, 1.5rem) 0 0;
	padding: 0;
	border: 0;
}

.levent-message__quote p {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-size: clamp(1.5rem, 3vw, 2.9rem);
	line-height: 1.22;
	letter-spacing: -.015em;
	color: var(--ll-ground);
}

.levent-message.has-portrait .levent-message__prose {
	margin-top: clamp(2rem, 3.5vw, 3rem);
}

.levent-message__sign {
	margin-top: clamp(2rem, 3.5vw, 3rem);
	padding-top: clamp(1.25rem, 2vw, 1.75rem);
	border-top: 1px solid var(--ll-hairline);
}

.levent-message__name {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.15rem, 1.4vw, 1.4rem);
	color: var(--ll-ground);
}

.levent-message__role {
	margin: .35rem 0 0;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(1, 44, 56, .5);
}

.levent-message__portrait {
	margin: 0;
	overflow: hidden;
}

/* The letter runs a few hundred pixels past the foot of the portrait, which
   left a tall empty column beside the signature. The picture keeps pace with
   the reading instead. Stretching the figure is what gives it somewhere to
   travel, and the clipping has to go or the sticky picture is clipped away. */
.levent-message.has-portrait .levent-message__portrait {
	align-self: stretch;
	overflow: visible;
}

.levent-message.has-portrait .levent-message__image {
	position: sticky;
	top: clamp(6rem, 14vh, 8.5rem);
}

.levent-message__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	/* Without this the height attribute WordPress writes into the tag wins and
	   the ratio is ignored: the portrait came out 545 by 1024 instead of 545 by
	   681, stretched half a head taller than it was shot. */
	height: auto;
	object-fit: cover;
}

@media (max-width: 900px) {
	.levent-message.has-portrait .levent-message__inner,
	.levent-message__body {
		grid-template-columns: 1fr;
	}

	.levent-message__rest {
		margin-top: clamp(1.75rem, 4vw, 2.5rem);
	}

	/* Stacked, the picture has nothing to keep pace with. */
	.levent-message.has-portrait .levent-message__image {
		position: static;
	}
}

/* Mobile header
   None of the header work above applies here: Houzez swaps .header-desktop for
   .header-mobile under 992px, so a phone was getting the stock bar. It sat as
   a solid block above the hero rather than over it, and the logo it used was
   the teal one on a teal ground, which made it invisible. The artwork is now
   the white lockup; the rest is here.
---------------------------------------------------- */

@media (max-width: 991px) {
	/* Over a hero the bar floats on the picture, as the desktop one does. */
	.levent-has-hero .header-mobile {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 20;
		background: transparent;
	}

	.levent-has-hero .header-main-wrap {
		position: relative;
		z-index: 20;
	}

	/* Once past the hero it needs a ground to be readable on. Frosted rather
	   than flat, to match the desktop treatment. */
	.levent-header-solid .header-mobile {
		position: fixed;
		background: rgba(1, 68, 85, .82);
		-webkit-backdrop-filter: blur(18px) saturate(160%);
		backdrop-filter: blur(18px) saturate(160%);
		box-shadow: 0 8px 24px rgba(1, 44, 56, .16);
	}

	.admin-bar .levent-header-solid .header-mobile {
		top: 32px;
	}

	.header-mobile {
		min-height: 62px;
	}

	/* 65px of logo on a 440px bar is a stamp. */
	.logo-mobile img {
		max-height: 34px !important;
		width: auto !important;
	}
}

/* Meta lists on narrow screens
   The dot separators are drawn with span + span::before, so when the row wraps
   the dot leads the new line and reads as a stray bullet. One fact per line
   below 640px, no separators needed.
---------------------------------------------------- */

@media (max-width: 640px) {
	.levent-index__meta,
	.levent-completed__meta {
		flex-direction: column;
		gap: .3rem;
	}

	.levent-index__meta span + span::before,
	.levent-completed__meta span + span::before {
		display: none;
	}
}

/* An anchored jump has to clear the fixed header, or the section lands under it. */
#ongoing,
#completed {
	scroll-margin-top: clamp(5rem, 8vw, 7.5rem);
}

/* Grouped amenities
---------------------------------------------------- */

.levent-groups {
	background: #F7F6F3;
	padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

.levent-groups__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-groups__head {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--ll-hairline);
}

.levent-groups__lead {
	margin: 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .68);
}

/* One column per group. Five groups of four short lines read as five columns
   far better than as a grid with a gap in it. */
.levent-groups__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding-top: clamp(2rem, 3.5vw, 3rem);
}

.levent-groups__grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.levent-groups__grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.levent-groups__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.levent-groups__col {
	padding-top: clamp(.9rem, 1.5vw, 1.2rem);
	border-top: 1px solid var(--ll-primary);
}

.levent-groups__label {
	display: flex;
	align-items: baseline;
	gap: .7rem;
	margin: 0 0 clamp(.9rem, 1.6vw, 1.25rem);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--ll-primary);

	/* Room for two lines whether or not a heading needs them, so one long
	   label does not drop its own list below the others. */
	min-height: 3em;
}

.levent-groups__label span {
	font-size: 10px;
	letter-spacing: .24em;
	color: var(--ll-accent);
}

.levent-groups__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.levent-groups__list li {
	padding: .42rem 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(.98rem, 1.1vw, 1.1rem);
	line-height: 1.45;
	color: var(--ll-ground);
}

@media (max-width: 1200px) {
	.levent-groups__grid,
	.levent-groups__grid[data-count="4"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.levent-groups__grid,
	.levent-groups__grid[data-count="4"],
	.levent-groups__grid[data-count="3"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 780px) {
	.levent-groups__head {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

@media (max-width: 520px) {
	.levent-groups__grid,
	.levent-groups__grid[data-count="4"],
	.levent-groups__grid[data-count="3"],
	.levent-groups__grid[data-count="2"] {
		grid-template-columns: 1fr;
	}
}

/* Technical specifications
   Light, like every other reading section. It used to be dark, which put two
   near black bands back to back with the residence accordion above it and made
   the specification look like a second hero rather than the reference table it
   is.
---------------------------------------------------- */

.levent-specs {
	background: #fff;
	color: var(--ll-ground);
	padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

.levent-specs__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-specs__head {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--ll-hairline);
}

.levent-specs__lead {
	margin: 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .68);
}

.levent-specs__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 4.5rem);
	padding-top: clamp(2rem, 3.5vw, 3rem);
}

.levent-specs__name {
	margin: 0;
	font-size: clamp(1.3rem, 1.8vw, 1.8rem);
	font-weight: 400;
	letter-spacing: -.01em;
	color: var(--ll-ground);
}

.levent-specs__note {
	margin: .5rem 0 0;
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	color: rgba(1, 44, 56, .62);
}

.levent-specs__list {
	margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
}

/* Label above, value below: the values are long enough that a two column row
   would break them into slivers. */
.levent-specs__list > div {
	padding: clamp(.85rem, 1.4vw, 1.1rem) 0;
	border-top: 1px solid var(--ll-hairline);
}

.levent-specs__list dt {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ll-primary);
}

.levent-specs__list dd {
	margin: .5rem 0 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.6;
	color: rgba(1, 44, 56, .82);
}

@media (max-width: 860px) {
	.levent-specs__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 780px) {
	.levent-specs__head {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

/* Image preview
---------------------------------------------------- */

.is-zoomable {
	cursor: zoom-in;
}

.levent-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(1, 32, 42, .95);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity .26s ease;
}

.levent-lightbox.is-open {
	opacity: 1;
}

.levent-lightbox__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(.9rem, 2vw, 1.4rem);
	margin: 0;
	max-width: 100%;
}

.levent-lightbox__image {
	display: block;
	max-width: min(1500px, 92vw);
	/* Room for the caption underneath, or a tall plan pushes it off screen. */
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
	background: #fff;
	transform: scale(.98);
	transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.levent-lightbox.is-open .levent-lightbox__image {
	transform: none;
}

.levent-lightbox__stage figcaption {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}

.levent-lightbox__count {
	color: var(--ll-accent);
}

.levent-lightbox__close,
.levent-lightbox__nav {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.levent-lightbox__close:hover,
.levent-lightbox__nav:hover,
.levent-lightbox__close:focus-visible,
.levent-lightbox__nav:focus-visible {
	background: rgba(255, 255, 255, .2);
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}

.levent-lightbox__close {
	top: clamp(1rem, 3vw, 2rem);
	right: clamp(1rem, 3vw, 2rem);
	font-size: 26px;
}

.levent-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
}

.levent-lightbox__nav.is-prev {
	left: clamp(.5rem, 2.5vw, 2rem);
}

.levent-lightbox__nav.is-next {
	right: clamp(.5rem, 2.5vw, 2rem);
}

@media (max-width: 640px) {
	.levent-lightbox__nav {
		top: auto;
		bottom: clamp(1rem, 4vw, 2rem);
		transform: none;
	}

	.levent-lightbox__image {
		max-height: 66vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.levent-lightbox,
	.levent-lightbox__image {
		transition: none;
	}
}

/* Gallery: the set beyond what is laid out
---------------------------------------------------- */

.levent-gallery__item {
	position: relative;
}

/* The last tile on show says how many are behind it, so the preview is
   discoverable rather than a surprise. */
.levent-gallery__more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.8rem, 3vw, 3rem);
	color: #fff;
	background: rgba(1, 32, 42, .55);
	pointer-events: none;
	transition: background-color .4s ease;
}

.levent-gallery__item.has-more:hover .levent-gallery__more {
	background: rgba(1, 32, 42, .35);
}

.levent-gallery__count {
	margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(1, 44, 56, .5);
}

.levent-gallery.is-dark .levent-gallery__count {
	color: rgba(255, 255, 255, .5);
}

/* Houzez ships a property comparison tray, fixed to the right edge and parked
   just off screen. Ten pixels of it are left showing: a white full height strip
   down the right of every page, and it takes taps, so it sits over the edge of
   anything beside it. Nothing on this site compares properties, because the
   developments are pages rather than Houzez property posts, so the tray has
   nothing to hold and simply goes. */
.compare-property-panel {
	display: none !important;
}

/* Tap targets
----------------------------------------------------

   Everything a finger has to hit gets 44px, which is the floor both Apple and
   the WCAG target-size rule use. Three things were under it: the burger at
   45x41, the drawer's close button at 29x29, and the footer links at 42.
   The footer links stay visually the same size, the box around them grows. */

.levent-footer__col ul a:not(.levent-social),
.levent-footer__bottom a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	/* A short label makes a narrow target: the Turkish for FAQs is "SSS" and
	   came out 22px wide. 24px is the floor the WCAG target rule actually asks
	   for, and the height already carries 44. Widening the box to 44 instead
	   stretched the hover underline, which spans the box, to twice the width of
	   a three letter word. */
	min-width: 24px;
}

.header-v6 .logo a,
.logo-mobile a,
.header-mobile .logo a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.header-mobile .toggle-button-left,
.toggle-button-left {
	min-width: 44px;
	min-height: 44px;
}

.offcanvas .btn-close,
.offcanvas-header .btn-close {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Each published line is a WhatsApp line. The mark carries that rather than the
   word being repeated beside every number, and it is the same mark the floating
   button draws. */
.levent-footer__wa a {
	gap: .55rem;
}

/* The phone mark sits before the WhatsApp one and is decorative: the row is a
   WhatsApp link, so this takes the text colour rather than a brand green,
   which would promise a second target that is not there. currentColor also
   means it brightens with the row on hover instead of staying flat. */
/* The flags say which languages the line is answered in. They sit after the
   number rather than before it, so the eye reads the number first and the
   languages as a qualification. The inset ring gives the white-edged flags
   (Russia, the UK) a boundary against the dark footer. */
/* In the contact block the flags sit under the label rather than beside the
   number: the cells are wide and centred, and a trailing pair would drift
   away from the number it belongs to. */
.levent-contact__langs {
	display: inline-flex;
	gap: .35rem;
	margin-top: .55rem;
}

.levent-footer__langs {
	display: inline-flex;
	flex: 0 0 auto;
	gap: .3rem;
	margin-left: .25rem;
}

.levent-flag {
	display: block;
	width: 18px;
	height: 12px;
	border-radius: 1px;
	/* The ring keeps a white-edged flag (Russia, the UK) from bleeding into the
	   ground it sits on. The default is for the pale sections; the dark ones
	   below flip it, because a dark ring on a dark ground draws nothing. */
	box-shadow: inset 0 0 0 1px rgba(1, 44, 56, .22);
}

.levent-footer__langs .levent-flag,
.levent-contact__langs .levent-flag {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

/* The people list is a flex column, so the flags simply take the next line
   under the number; align-self keeps the span off the full column width. */
.levent-person__langs {
	display: inline-flex;
	align-self: start;
	gap: .3rem;
	margin-top: .15rem;
}

.levent-footer__telicon {
	display: inline-flex;
	flex: 0 0 auto;
}

.levent-footer__waicon {
	display: inline-flex;
	flex: 0 0 auto;
	color: #25D366;
}

/* The current page, marked rather than left for the reader to work out. Only in
   the footer: the header already draws its own hairline under the current item,
   and adding this there gave it two. */
.levent-footer__col ul a[aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: .4em;
	text-decoration-thickness: 1px;
}

/* Reel
---------------------------------------------------- */

/* A strip of pictures that runs sideways under its heading. The pictures come
   at different shapes and sizes, so they share one height and are cropped to
   it: a row whose top and bottom edges wander does not read as a row. */
.levent-reel {
	background: #fff;
}

.levent-reel__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: var(--ll-gap) clamp(1.5rem, 5vw, 2rem);
}

.levent-reel__head {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.levent-reel__lead {
	margin: 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .68);
}

.levent-reel__frame {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(.5rem, 1.5vw, 1.25rem);
}

.levent-reel__nav {
	width: clamp(2.25rem, 3vw, 2.75rem);
	height: clamp(2.25rem, 3vw, 2.75rem);
	padding: 0;
	background: transparent;
	border: 1px solid var(--ll-hairline);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color .3s ease, background-color .3s ease, opacity .3s ease;
}

.levent-reel__nav span {
	display: block;
	width: 8px;
	height: 8px;
	margin: 0 auto;
	border-right: 1px solid var(--ll-primary);
	border-bottom: 1px solid var(--ll-primary);
	transition: border-color .3s ease;
}

.levent-reel__nav--prev span {
	transform: translateX(1px) rotate(135deg);
}

.levent-reel__nav--next span {
	transform: translateX(-1px) rotate(-45deg);
}

.levent-reel__nav:hover:not(:disabled) {
	background: var(--ll-primary);
	border-color: var(--ll-primary);
}

.levent-reel__nav:hover:not(:disabled) span {
	border-color: #FFFFFF;
}

.levent-reel__nav:disabled {
	opacity: .3;
	cursor: default;
}

.levent-reel__nav:focus-visible {
	outline: 2px solid var(--ll-primary);
	outline-offset: 3px;
}

/* Nothing to page through: the arrows go and the strip takes the full width. */
.levent-reel.is-static .levent-reel__nav {
	display: none;
}

.levent-reel.is-static .levent-reel__frame {
	grid-template-columns: minmax(0, 1fr);
}

.levent-reel__track {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.levent-reel__track::-webkit-scrollbar {
	display: none;
}

.levent-reel__track:focus-visible {
	outline: 2px solid var(--ll-primary);
	outline-offset: 4px;
}

.levent-reel__item {
	flex: 0 0 clamp(260px, 38vw, 520px);
	scroll-snap-align: start;
}

.levent-reel__figure {
	margin: 0;
}

.levent-reel__image {
	display: block;
	width: 100%;
	height: clamp(240px, 34vh, 400px);
	object-fit: cover;
	cursor: zoom-in;
}

/* Proper nouns, not labels: no text-transform, because a page marked lang="tr"
   uppercases i to I with a dot and turns Izmir into a word with two of them. */
.levent-reel__figure figcaption {
	display: grid;
	gap: .2rem;
	margin-top: 1rem;
}

.levent-reel__name {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.05rem, 1.3vw, 1.25rem);
	line-height: 1.25;
	color: var(--ll-primary);
}

.levent-reel__place {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .06em;
	color: rgba(1, 44, 56, .5);
}

.levent-reel__note {
	margin-top: .35rem;
	font-size: clamp(.85rem, .92vw, .92rem);
	line-height: 1.6;
	color: rgba(1, 44, 56, .68);
}

@media (max-width: 780px) {
	.levent-reel__head {
		grid-template-columns: 1fr;
		align-items: start;
	}

	/* On a phone the strip is swiped, and two arrows would eat the width the
	   pictures need. */
	.levent-reel__nav {
		display: none;
	}

	.levent-reel__frame {
		grid-template-columns: minmax(0, 1fr);
	}

	.levent-reel__item {
		flex-basis: 78vw;
	}
}

/* Tightened page
---------------------------------------------------- */

/* Asked for on the sustainability page, where four short sections follow one
   another and the site's usual rhythm reads as loose. Every section sheds
   about a third of its vertical padding, so the band between two of them comes
   down from 176px to 104px at a desktop width. Nothing else on the site moves:
   the class is only ever on that page. */
.levent-tight .levent-split,
.levent-tight .levent-gallery {
	padding-top: clamp(2rem, 3.6vw, 3.25rem);
	padding-bottom: clamp(2rem, 3.6vw, 3.25rem);
}

.levent-tight .levent-statement__inner,
.levent-tight .levent-reel__inner {
	padding-top: clamp(2rem, 3.6vw, 3.25rem);
	padding-bottom: clamp(2rem, 3.6vw, 3.25rem);
}

.levent-tight .levent-cred__inner {
	padding-top: clamp(2.5rem, 5vw, 4.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* Master plan
---------------------------------------------------- */

.levent-plan {
	background: #fff;
	padding: var(--ll-gap) 0;
}

.levent-plan__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-plan__head {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--ll-hairline);
}

.levent-plan__lead {
	margin: 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .68);
}

.levent-plan__figure {
	margin: clamp(2rem, 3.5vw, 3rem) 0 0;
}

/* Contained, not cropped: an estate cut in half is not a plan. */
.levent-plan__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 78vh;
	object-fit: contain;
	background: #F7F6F3;
}

.levent-plan__figure figcaption {
	margin-top: .8rem;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(1, 44, 56, .5);
}

.levent-plan__legend {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: clamp(.75rem, 1.6vw, 1.1rem) clamp(1.5rem, 3vw, 2.5rem);
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	padding: clamp(1.5rem, 2.5vw, 2rem) 0 0;
	border-top: 1px solid var(--ll-hairline);
	list-style: none;
}

.levent-plan__legend li {
	display: flex;
	align-items: baseline;
	gap: .6rem;
}

/* Read off the plan itself so the key matches the drawing. */
.levent-plan__swatch {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	border-radius: 2px;
	background: var(--ll-accent);
}

.levent-plan__swatch--0 { background: #F2C078; }
.levent-plan__swatch--1 { background: #6FC26F; }
.levent-plan__swatch--2 { background: #9C8CE8; }
.levent-plan__swatch--3 { background: #4FD0E0; }
.levent-plan__swatch--4 { background: #3A76C4; }

.levent-plan__name {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1rem, 1.15vw, 1.15rem);
	color: var(--ll-ground);
}

.levent-plan__type {
	font-size: .85rem;
	color: rgba(1, 44, 56, .55);
}

@media (max-width: 780px) {
	.levent-plan__head {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

/* A live figure fades in when it arrives, so the dash does not blink. */
.levent-factbar__value.is-live {
	opacity: .35;
	transition: opacity .5s ease;
}

.levent-factbar__value.is-live.is-loaded {
	opacity: 1;
}

/* Why North Cyprus: chapters
---------------------------------------------------- */

.levent-chapter {
	position: relative;
	overflow: hidden;
	background: var(--ll-ground);
	color: #fff;
	padding: clamp(6rem, 12vw, 10rem) 0 clamp(3.5rem, 6vw, 5.5rem);
}

.levent-chapter__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

.levent-chapter__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(1, 44, 56, .93) 0%, rgba(1, 44, 56, .72) 55%, rgba(1, 44, 56, .55) 100%);
}

.levent-chapter__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: end;
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

/* The number is the chapter mark: large, quiet, and behind the title in the
   reading order rather than in front of it. */
.levent-chapter__number {
	margin: clamp(.5rem, 1.5vw, 1rem) 0 clamp(.25rem, 1vw, .75rem);
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(3rem, 7vw, 7rem);
	line-height: .85;
	letter-spacing: -.03em;
	color: rgba(255, 255, 255, .22);
}

.levent-chapter__title {
	margin: 0;
	font-size: clamp(2rem, 4vw, 4rem);
	line-height: 1.04;
	font-weight: 400;
	letter-spacing: -.02em;
	color: #fff;
}

.levent-chapter__lead {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-size: clamp(1.25rem, 1.9vw, 1.9rem);
	line-height: 1.3;
	color: var(--ll-accent);
}

.levent-chapter__prose {
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.levent-chapter__prose p {
	font-size: clamp(1rem, 1.1vw, 1.1rem);
	line-height: 1.75;
	color: rgba(255, 255, 255, .82);
}

.levent-chapter__prose p:last-child {
	margin-bottom: 0;
}

@media (max-width: 860px) {
	.levent-chapter__inner {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

/* A qualification set beside the claim, not under it in small print. */
.levent-note {
	background: #F7F6F3;
	padding: clamp(2.5rem, 4vw, 3.5rem) 0;
	border-top: 1px solid var(--ll-hairline);
	border-bottom: 1px solid var(--ll-hairline);
}

.levent-note__inner {
	display: grid;
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 3rem);
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-note__label {
	margin: 0;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ll-primary);
}

.levent-note__body p {
	margin: 0 0 .75rem;
	max-width: 62ch;
	font-size: .95rem;
	line-height: 1.7;
	color: rgba(1, 44, 56, .72);
}

.levent-note__body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 780px) {
	.levent-note__inner {
		grid-template-columns: 1fr;
	}
}

/* Chapter pager
---------------------------------------------------- */

.levent-pager {
	background: #fff;
	padding: clamp(2rem, 3.5vw, 3rem) 0;
	border-top: 1px solid var(--ll-hairline);
}

.levent-pager__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-pager__link {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.levent-pager__link.is-next {
	text-align: right;
}

.levent-pager__link.is-prev:hover { transform: translateX(-.35rem); }
.levent-pager__link.is-next:hover { transform: translateX(.35rem); }

.levent-pager__dir {
	display: block;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ll-accent);
}

.levent-pager__title {
	display: block;
	margin-top: .35rem;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1rem, 1.3vw, 1.3rem);
	line-height: 1.25;
	color: var(--ll-ground);
}

.levent-pager__index {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ll-primary);
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
}

@media (max-width: 640px) {
	.levent-pager__inner {
		grid-template-columns: 1fr 1fr;
		row-gap: 1.5rem;
	}

	.levent-pager__index {
		grid-column: 1 / -1;
		order: 3;
		justify-self: center;
	}
}

/* The sequence as an index
---------------------------------------------------- */

.levent-journey {
	background: #fff;
	padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

.levent-journey__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-journey__head {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--ll-hairline);
}

.levent-journey__lead {
	margin: 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .68);
}

/* Each act is one of the three questions the sequence answers. */
.levent-journey__act {
	padding-top: clamp(2rem, 3.5vw, 3rem);
}

.levent-journey__actname {
	margin: 0 0 clamp(.75rem, 1.5vw, 1.25rem);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ll-primary);
}

.levent-journey__actname span {
	margin-left: 1rem;
	font-family: "Playfair Display", Georgia, serif;
	font-style: italic;
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(1, 44, 56, .5);
}

.levent-journey__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.levent-journey__steps a {
	display: grid;
	grid-template-columns: 3rem minmax(0, 22rem) 1fr;
	align-items: baseline;
	gap: .3rem 1.5rem;
	padding: clamp(.9rem, 1.5vw, 1.2rem) 0;
	border-top: 1px solid var(--ll-hairline);
	color: inherit;
	text-decoration: none;
	transition: padding-left .35s ease;
}

.levent-journey__steps a:hover {
	padding-left: .75rem;
	color: inherit;
}

.levent-journey__num {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	color: var(--ll-accent);
}

.levent-journey__title {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.1rem, 1.4vw, 1.4rem);
	color: var(--ll-ground);
}

.levent-journey__note {
	font-size: .9rem;
	color: rgba(1, 44, 56, .55);
}

@media (max-width: 900px) {
	.levent-journey__steps a {
		grid-template-columns: 2.5rem 1fr;
	}

	.levent-journey__note {
		grid-column: 2;
	}
}

@media (max-width: 780px) {
	.levent-journey__head {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

/* ---------------------------------------------------------------------------
   Houzez dashboard, the board at /board/

   The theme gives the sidebar logo a 64px bar and puts no constraint on the
   image inside it. A wide Houzez wordmark fits; the Levent lockup is stacked
   at 614 by 376, so it centres in a box shorter than itself and loses its top
   edge off the screen. Give the bar room and cap the image.
   --------------------------------------------------------------------------- */

.houzez-dashboard-body .sidebar-logo .logo {
	height: 104px;
	justify-content: center;
}

.houzez-dashboard-body .sidebar-logo .logo img {
	max-height: 64px;
	width: auto;
}

/* ---------------------------------------------------------------------------
   Business areas

   Cards that leave the site. Every one of them opens the matching page on
   levent.com, so the destination is printed on the card rather than hidden
   behind an arrow: nobody should click into a new tab without being told.
   --------------------------------------------------------------------------- */

.levent-biz {
	background: #FFFFFF;
	padding: var(--ll-gap) 0;
}

.levent-biz__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-biz__head {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--ll-hairline);
}

.levent-biz__lead {
	margin: 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .68);
}

.levent-biz__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(.75rem, 1.2vw, 1.1rem);
	margin: 0;
	padding: clamp(1.5rem, 2.5vw, 2.25rem) 0 0;
	list-style: none;
}

.levent-biz__card.is-lead {
	grid-column: span 4;
}

/* A single card left over on the last row reads as a mistake. Give it the
   whole row so it reads as the end of the list instead. */
.levent-biz__card:last-child:nth-child(4n + 1) {
	grid-column: span 4;
}

.levent-biz__link {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	height: 100%;
	padding: clamp(1rem, 1.4vw, 1.25rem);
	border: 1px solid rgba(1, 68, 85, .22);
	color: var(--ll-ground);
	text-decoration: none;
	transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.levent-biz__link:hover,
.levent-biz__link:focus-visible {
	border-color: var(--ll-primary);
	background: #F7F6F3;
	transform: translateY(-2px);
}

.levent-biz__card.is-lead .levent-biz__link {
	background: var(--ll-ground);
	border-color: var(--ll-ground);
	color: #FFFFFF;
}

.levent-biz__card.is-lead .levent-biz__link:hover,
.levent-biz__card.is-lead .levent-biz__link:focus-visible {
	background: var(--ll-primary);
	border-color: var(--ll-primary);
}

/* The plate holds either a logo or a name, at one height, so a row of cards
   lines up whether or not the business has a mark. The logo files are all
   520 by 260 with the mark centred, so a single width gives them all the
   same optical size without fiddling with each one. */
.levent-biz__plate {
	display: flex;
	align-items: center;
	/* Centred, not left aligned: the marks carry different amounts of internal
	   whitespace, so a left edge put some against the wall and others adrift. */
	justify-content: center;
	/* Tall enough to clear a 44px mark plus its padding, so a plate carrying a
	   name is exactly as tall as one carrying a logo and the names below them
	   sit on one line across the row. */
	min-height: 66px;
	margin: 0 0 .5rem;
	padding: clamp(.5rem, .9vw, .7rem);
}

.levent-biz__logo {
	width: 118px;
	height: auto;
	max-height: 44px;
	object-fit: contain;
}

.levent-biz__title {
	font-family: "Playfair Display", Georgia, serif;
	/* A business with no mark shows its name on the plate instead. Held near
	   the optical size of the logos beside it, or the row reads as one loud
	   card among eleven quiet ones. */
	font-size: clamp(.95rem, 1.05vw, 1.15rem);
	line-height: 1.25;
	text-align: center;
	color: var(--ll-primary);
}

.levent-biz__card.is-lead .levent-biz__title {
	font-size: clamp(1.5rem, 2.4vw, 2.4rem);
	color: #FFFFFF;
}

.levent-biz__name {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ll-primary);
}

.levent-biz__card.is-lead .levent-biz__name {
	color: #FFFFFF;
}

.levent-biz__note {
	max-width: 52ch;
	font-size: clamp(.82rem, .9vw, .9rem);
	line-height: 1.55;
	color: rgba(1, 44, 56, .68);
}

.levent-biz__card.is-lead .levent-biz__note {
	max-width: 68ch;
	color: rgba(255, 255, 255, .78);
}

/* Company names keep their own casing. The micro label style elsewhere
   uppercases in CSS, which on the Turkish page turns Stonite into STONİTE
   and Levent Living into LEVENT LİVİNG: the browser applies Turkish casing
   rules to a page marked lang="tr", and a brand name does not want them. */
.levent-biz__companies {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .9rem;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .06em;
	color: rgba(1, 44, 56, .5);
}

.levent-biz__card.is-lead .levent-biz__companies {
	color: rgba(255, 255, 255, .6);
}

.levent-biz__companies span + span::before {
	content: "/";
	margin-right: .9rem;
	color: rgba(1, 44, 56, .28);
}

.levent-biz__card.is-lead .levent-biz__companies span + span::before {
	color: rgba(255, 255, 255, .35);
}

.levent-biz__go {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-top: auto;
	padding-top: .5rem;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ll-primary);
}

.levent-biz__card.is-lead .levent-biz__go {
	color: var(--ll-accent);
}

@media (max-width: 1200px) {
	.levent-biz__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.levent-biz__card.is-lead,
	.levent-biz__card:last-child:nth-child(3n + 1) {
		grid-column: span 3;
	}

	.levent-biz__card:last-child:nth-child(4n + 1) {
		grid-column: auto;
	}
}

@media (max-width: 900px) {
	.levent-biz__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.levent-biz__card.is-lead,
	.levent-biz__card:last-child:nth-child(2n + 1) {
		grid-column: span 2;
	}

	.levent-biz__card:last-child:nth-child(3n + 1),
	.levent-biz__card:last-child:nth-child(4n + 1) {
		grid-column: auto;
	}
}

@media (max-width: 780px) {
	.levent-biz__head {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

@media (max-width: 560px) {
	.levent-biz__grid,
	.levent-biz__card.is-lead {
		grid-template-columns: 1fr;
		grid-column: auto;
	}
}

/* Each residence panel ends with the things the client asked every residence
   to carry: the specifications for its building type, and its tour when there
   is one. Absent attributes render nothing, so "where available" is literal. */
.levent-type__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
	/* Same measure and gutters as the plates above, or it hangs off the left. */
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 5vw, 2rem) clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--ll-hairline);
}

.levent-type__action {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ll-primary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}

.levent-type__action:hover,
.levent-type__action:focus-visible {
	color: var(--ll-primary);
	border-bottom-color: var(--ll-primary);
}

.levent-type__actions .levent-type__more {
	margin: 0 0 0 auto;
}

.levent-specs__col {
	scroll-margin-top: 120px;
}

@media (max-width: 620px) {
	.levent-type__actions .levent-type__more {
		margin-left: 0;
	}
}

/* ---------------------------------------------------------------------------
   How to reach us

   The factbar, with live values. Same ground, same cells, same hairlines, so
   the contact page opens exactly the way every other page does. The only
   addition is that a value can be a link, because a phone number you cannot
   tap is decoration.
   --------------------------------------------------------------------------- */

.levent-contact {
	background: var(--ll-ground);
	color: #FFFFFF;
}

.levent-contact__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-contact__cell {
	padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem);
	border-left: 1px solid rgba(255, 255, 255, .14);
}

.levent-contact__cell:first-child {
	border-left: 0;
	padding-left: 0;
}

.levent-contact__value {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	/* A step below the factbar: an address is a sentence, not a figure. */
	font-size: clamp(1.15rem, 1.5vw, 1.5rem);
	line-height: 1.25;
	font-weight: 400;
}

/* The footer's behaviour, which is the site's one pattern for a link on the
   ground: nothing at rest, then an accent rule wipes in and the text lifts to
   white. Drawn as a background gradient rather than a border because the
   address wraps to three lines, and box-decoration-break gives each line its
   own rule instead of one stranded under the last. */
.levent-contact__value a {
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	background-image: linear-gradient(var(--ll-accent), var(--ll-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size .32s cubic-bezier(.22, .61, .36, 1), color .25s ease;
}

.levent-contact__value a:hover,
.levent-contact__value a:focus-visible {
	color: #FFFFFF;
	background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
	.levent-contact__value a {
		transition: none;
	}
}

.levent-contact__label {
	margin: .5rem 0 0;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ll-accent);
}

/* ---------------------------------------------------------------------------
   Questions and answers

   <details> rows on a hairline. The marker is drawn rather than typed so it
   can rotate, and the native triangle is removed in both syntaxes because
   Safari still wants the WebKit one.
   --------------------------------------------------------------------------- */

.levent-faq {
	background: #FFFFFF;
	padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

/* A reading column, not the full page measure. The questions sat in a 864px
   list pinned to the left of a 1440px container, so the heading started a long
   way from the answers and half the section was empty. Narrower and centred,
   with the head landing on the same line as the list. */
.levent-faq__inner {
	max-width: min(58rem, var(--ll-measure));
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-faq__head {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--ll-hairline);
}

.levent-faq__lead {
	margin: 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .68);
}

.levent-faq__list {
	margin: clamp(2rem, 3.5vw, 3rem) 0 0;
}

.levent-faq__group {
	margin: clamp(2rem, 3.5vw, 3rem) 0 .5rem;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(1, 44, 56, .5);
}

.levent-faq__group:first-child {
	margin-top: 0;
}

.levent-faq__item {
	border-bottom: 1px solid var(--ll-hairline);
}

.levent-faq__q {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding: clamp(1.1rem, 2vw, 1.5rem) 0;
	cursor: pointer;
	list-style: none;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.05rem, 1.3vw, 1.3rem);
	line-height: 1.35;
	color: var(--ll-primary);
	transition: color .2s ease;
}

.levent-faq__q::-webkit-details-marker {
	display: none;
}

.levent-faq__q:hover {
	color: var(--ll-primary-hover);
}

/* A plus that becomes a minus. Two rules, one of which folds away. */
.levent-faq__mark {
	position: relative;
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	margin-top: .35rem;
}

.levent-faq__mark::before,
.levent-faq__mark::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1px;
	background: var(--ll-primary);
	transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.levent-faq__mark::after {
	transform: rotate(90deg);
}

.levent-faq__item[open] .levent-faq__mark::after {
	transform: rotate(0deg);
}

.levent-faq__a {
	padding: 0 clamp(1.5rem, 3vw, 3rem) clamp(1.4rem, 2.5vw, 2rem) 0;
}

/* Answers were setting at about 108 characters a line. */
.levent-faq__a p {
	max-width: 68ch;
	margin: 0 0 .9rem;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.75;
	color: rgba(1, 44, 56, .78);
}

.levent-faq__a p:last-child {
	margin-bottom: 0;
}

@media (max-width: 780px) {
	.levent-faq__head {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

/* ---------------------------------------------------------------------------
   Cookie notice

   Bottom left, not a full width bar and not a modal: it says something true
   and small, so it should not behave like a gate. Decline is a real button
   sitting beside Accept, at the same size.
   --------------------------------------------------------------------------- */

.levent-cookies {
	position: fixed;
	left: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 9000;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	width: min(30rem, calc(100vw - 2rem));
	padding: clamp(1.4rem, 2.5vw, 1.9rem);
	background: var(--ll-ground);
	color: #FFFFFF;
	box-shadow: 0 18px 50px rgba(1, 30, 38, .35);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
}

.levent-cookies.is-in {
	opacity: 1;
	transform: none;
}

.levent-cookies__text {
	margin: 0;
	font-size: .92rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, .82);
}

.levent-cookies__text a {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.levent-cookies__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
}

/* These are <button> elements, so the theme's own button background has to be
   turned off before the outline style shows through. */
.levent-cookies .levent-btn {
	flex: 1 1 auto;
	background: transparent;
	border-color: rgba(255, 255, 255, .4);
	color: #FFFFFF;
	font-family: inherit;
	text-align: center;
	cursor: pointer;
}

.levent-cookies .levent-btn:hover {
	border-color: #FFFFFF;
}

.levent-cookies .levent-btn--solid {
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--ll-ground);
}

.levent-cookies .levent-btn--solid:hover {
	background: var(--ll-accent);
	border-color: var(--ll-accent);
	color: var(--ll-ground);
}

@media (prefers-reduced-motion: reduce) {
	.levent-cookies {
		transition: none;
	}
}

/* The way back to the notice once a choice has been made. A button, because it
   does something rather than going somewhere, dressed as the text beside it. */
.levent-footer__cookies {
	margin-right: 1.25rem;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: color .25s ease;

	/* Chrome's own sheet strips case and spacing from form controls, so both
	   have to be asked for by name to match the line they sit on. */
	letter-spacing: inherit;
	text-transform: inherit;
}

.levent-footer__cookies:hover,
.levent-footer__cookies:focus-visible {
	color: var(--ll-accent);
}

/* ---------------------------------------------------------------------------
   Prices

   A table drawn as rows on hairlines rather than a bordered grid, so it reads
   like the rest of the page. The launch column carries the weight because it
   is the figure being offered. Below 760px each row folds into a card and the
   column headings move inline, since a two column table that narrow stops
   being readable.
   --------------------------------------------------------------------------- */

.levent-prices {
	background: var(--ll-paper);
	padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

.levent-prices__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-prices__head {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.levent-prices__lead {
	margin: 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .68);
}

.levent-prices__row {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 3vw, 2.5rem);
	align-items: baseline;
	padding: clamp(1.15rem, 2vw, 1.6rem) 0;
	border-bottom: 1px solid var(--ll-hairline);
}

.levent-prices__row--head {
	padding-bottom: .75rem;
	border-bottom-color: var(--ll-primary);
}

.levent-prices__label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(1, 44, 56, .5);
}

/* Only shown once the row folds. */
.levent-prices__label--inline {
	display: none;
}

.levent-prices__type {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.levent-prices__name {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.05rem, 1.25vw, 1.25rem);
	line-height: 1.3;
	color: var(--ll-primary);
}

.levent-prices__meta {
	font-size: .85rem;
	color: rgba(1, 44, 56, .55);
}

.levent-prices__figure {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.1rem, 1.5vw, 1.45rem);
	color: rgba(1, 44, 56, .72);
}

.levent-prices__cell.is-lead .levent-prices__figure {
	color: var(--ll-primary);
}

.levent-prices__from {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(1, 44, 56, .45);
	font-family: "Jost", sans-serif;
}

.levent-prices__figure.is-pending {
	font-family: "Jost", sans-serif;
	font-size: .95rem;
	font-style: italic;
	color: rgba(1, 44, 56, .5);
}

.levent-prices__note {
	margin: clamp(1.5rem, 3vw, 2rem) 0 0;
	max-width: 54rem;
	font-size: .85rem;
	line-height: 1.7;
	color: rgba(1, 44, 56, .55);
}

@media (max-width: 760px) {
	.levent-prices__head {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.levent-prices__row--head {
		display: none;
	}

	.levent-prices__row {
		grid-template-columns: 1fr;
		gap: .9rem;
	}

	.levent-prices__label--inline {
		display: block;
		margin-bottom: .2rem;
	}
}

/* ---------------------------------------------------------------------------
   Price inside an opened residence

   Sits above the plates so the figure is the first thing in the panel. Two
   columns on a hairline, the launch one carrying the weight, and a note under
   them where the figure belongs to a family of layouts rather than this one.
   --------------------------------------------------------------------------- */

.levent-type__price {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 4rem);
	/* Same measure and gutter as the plates below, so the figures line up with
	   the first drawing rather than running to the edge of the section. */
	max-width: var(--ll-measure);
	margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
	padding: 0 clamp(1.5rem, 5vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem);
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.levent-type__pricecol {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.levent-type__pricelabel {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ll-accent);
}

.levent-type__pricefig {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.3rem, 2vw, 1.9rem);
	line-height: 1.2;
	color: rgba(255, 255, 255, .72);
}

.levent-type__pricecol.is-lead .levent-type__pricefig {
	color: #FFFFFF;
}

.levent-type__from {
	font-family: "Jost", sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}

.levent-type__pricefig.is-pending {
	font-family: "Jost", sans-serif;
	font-size: 1rem;
	font-style: italic;
	color: rgba(255, 255, 255, .5);
}

.levent-type__pricenote {
	grid-column: 1 / -1;
	margin: 0;
	max-width: 46rem;
	font-size: .85rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, .55);
}

@media (max-width: 600px) {
	.levent-type__price {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Direct lines

   Each desk is a full width row: what it is and who it is for on the left, the
   people on the right. Stacking the desks in two columns left one of them with
   a single name and a great deal of nothing beside it, and it is the same
   label-left rhythm the specification and location sections already use.
   --------------------------------------------------------------------------- */

.levent-people {
	background: var(--ll-paper);
	padding: var(--ll-gap) 0;
}

.levent-people__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-people__head {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.levent-people__lead {
	margin: 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .68);
}

.levent-people__desk {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: start;
	padding: clamp(1.75rem, 3vw, 2.5rem) 0;
	border-top: 1px solid var(--ll-hairline);
}

.levent-people__desk:first-child {
	border-top-color: var(--ll-primary);
}

.levent-people__desk:last-child {
	border-bottom: 1px solid var(--ll-hairline);
}

.levent-people__title {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.2rem, 1.6vw, 1.6rem);
	line-height: 1.25;
	color: var(--ll-primary);
}

.levent-people__line {
	margin: .65rem 0 0;
	max-width: 38ch;
	font-size: .95rem;
	line-height: 1.7;
	color: rgba(1, 44, 56, .65);
}

.levent-people__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.levent-person {
	display: flex;
	align-items: center;
	gap: clamp(.9rem, 1.6vw, 1.25rem);
	min-width: 0;
}

.levent-person__avatar {
	display: grid;
	place-items: center;
	overflow: hidden;
	flex: 0 0 auto;
	width: clamp(68px, 5.5vw, 88px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(1, 68, 85, .06);
	box-shadow: inset 0 0 0 1px rgba(1, 68, 85, .14);
}

.levent-person__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.levent-person__initial {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.4rem, 2vw, 1.9rem);
	line-height: 1;
	color: rgba(1, 68, 85, .38);
}

.levent-person__body {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	min-width: 0;
}

/* Set as written, not uppercased. Turkish uppercases i as İ, so a CSS
   text-transform turned Baterincea into BATERİNCEA on the Turkish page, and a
   full name is easier to read in its own case anyway. */
.levent-person__name {
	font-size: .82rem;
	font-weight: 500;
	letter-spacing: .04em;
	color: rgba(1, 44, 56, .55);
}

.levent-person__contact {
	align-self: start;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.05rem, 1.25vw, 1.25rem);
	color: var(--ll-primary);
	white-space: nowrap;
	background-image: linear-gradient(var(--ll-accent), var(--ll-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size .32s cubic-bezier(.22, .61, .36, 1);
}

.levent-person__contact:hover,
.levent-person__contact:focus-visible {
	background-size: 100% 1px;
}

@media (max-width: 820px) {
	.levent-people__head,
	.levent-people__desk {
		grid-template-columns: 1fr;
	}

	.levent-people__head {
		align-items: start;
	}
}

/* ---------------------------------------------------------------------------
   WhatsApp

   Bottom right, opposite the cookie notice so the two never overlap, and
   above the back to top control. Only drawn when a number has been entered.
   --------------------------------------------------------------------------- */

.levent-whatsapp {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(4.75rem, 8vw, 6rem);
	z-index: 8000;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #25D366;
	color: #FFFFFF;
	box-shadow: 0 6px 20px rgba(1, 44, 56, .28);
	text-decoration: none !important;
	transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}

.levent-whatsapp:hover,
.levent-whatsapp:focus-visible {
	color: #FFFFFF;
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(1, 44, 56, .34);
}

@media (prefers-reduced-motion: reduce) {
	.levent-whatsapp {
		transition: none;
	}
}

/* The notice is nearly the full width of a phone, so the WhatsApp button would
   sit across its Accept and Decline. It stands down until a choice is made.
   On a wide screen the two are at opposite corners and never meet. */
@media (max-width: 760px) {
	:root.ll-cookies-open .levent-whatsapp {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(8px);
	}
}

/* On a phone the footer links were 20px tall, which is half a comfortable tap
   target. The link becomes a block with real vertical padding so the whole row
   is tappable rather than just the glyphs. Desktop keeps the tighter list. */
@media (max-width: 760px) {
	.levent-footer__col li {
		margin-bottom: .25rem;
	}

	.levent-footer__col a:not(.levent-social),
	.levent-footer__cookies {
		display: inline-block;
		padding: .6rem 0;
	}

	.levent-footer__col a:not(.levent-social)::after {
		bottom: .35rem;
	}
}

/* Same arrangement in a page hero. The picture stays underneath, so a browser
   that will not play the clip loses nothing. */
.levent-pagehero__video {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.levent-pagehero.has-video .levent-pagehero__image {
	z-index: 0;
}

.levent-pagehero__scrim {
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.levent-pagehero__video {
		display: none;
	}
}

/* A clip behind the band. The still stays underneath as the poster and as the
   fallback: the video is the enhancement, never the only thing there. */
.levent-band__video {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.levent-band.has-video .levent-band__image {
	z-index: 0;
}

/* Asked for less motion, so the still is what they get. */
@media (prefers-reduced-motion: reduce) {
	.levent-band__video {
		display: none;
	}
}

@media (max-width: 820px) {
	/* Stacked, and the rule above the detail becomes the separator between the
	   two blocks rather than a column edge. */
	.levent-band__inner:has(.levent-band__body) {
		grid-template-columns: 1fr;
		gap: clamp(1.5rem, 4vw, 2rem);
	}
}

/* ---------------------------------------------------------------------------
   The journey

   A photograph, a year and one sentence, running left to right on a rule. The
   rule sits behind the years so the row reads as a line of time rather than a
   set of cards, and the picture leads because the brief was for the page to
   carry the story visually.
   --------------------------------------------------------------------------- */

.levent-journeyline {
	background: var(--ll-paper);
	padding: clamp(3.5rem, 6.5vw, 6rem) 0;
}

.levent-journeyline__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-journeyline__head {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}

.levent-journeyline__lead {
	margin: 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .68);
}

/* Vertical, not a row of cards.
 *
 * Two of the six moments have a photograph and the archive images for the early
 * years do not exist. Across a row that leaves gap toothed cells; down a column
 * a moment without a picture is simply a shorter row and nothing looks missing.
 * It is also literally a line of time, which a grid of cards is not.
 */
.levent-journeyline__track {
	position: relative;
	margin: 0;
	padding: 0 0 0 clamp(1.75rem, 3vw, 2.75rem);
	list-style: none;
}

/* The line itself. Runs from the first marker to the foot of the last row, so
   the journey reads as continuing rather than stopping dead. */
.levent-journeyline__track::before {
	content: "";
	position: absolute;
	top: .9rem;
	bottom: 0;
	left: 3px;
	width: 1px;
	background: linear-gradient(to bottom, var(--ll-hairline) 88%, transparent);
}

.levent-moment {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 3rem);
	align-items: start;
	padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
	border-top: 1px solid var(--ll-hairline);
}

.levent-moment:first-child {
	border-top: 0;
	padding-top: 0;
}

/* The marker on the line. */
.levent-moment::before {
	content: "";
	position: absolute;
	top: clamp(1.75rem, 3.5vw, 2.75rem);
	left: calc(clamp(1.75rem, 3vw, 2.75rem) * -1);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ll-accent);
	transform: translateY(.6rem);
	transition: transform .3s ease, background-color .3s ease;
}

.levent-moment:first-child::before {
	top: 0;
}

.levent-moment:hover::before {
	background: var(--ll-primary);
	transform: translateY(.6rem) scale(1.55);
}

/* Nothing beside it, so the sentence takes the width at a readable measure. */
.levent-moment.is-plain .levent-moment__body {
	grid-column: 1 / -1;
	max-width: 52rem;
}

/* The chronology. Four at a time on a line, paged, the way the Group's own
   site does it: year above the mark, the brand under it. */
.levent-chrono {
	background: var(--ll-paper);
	padding: var(--ll-gap) 0;
	--chrono-gap: clamp(1rem, 2.2vw, 2rem);
	--chrono-per: 4;
}

.levent-chrono__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-chrono__head {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.levent-chrono__lead {
	margin: 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .68);
}

/* Arrows sit outside the years, not on top of them. */
.levent-chrono__frame {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(.5rem, 1.5vw, 1.25rem);
}

.levent-chrono__nav {
	width: clamp(2.25rem, 3vw, 2.75rem);
	height: clamp(2.25rem, 3vw, 2.75rem);
	padding: 0;
	background: transparent;
	border: 1px solid var(--ll-hairline);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color .3s ease, background-color .3s ease, opacity .3s ease;
}

.levent-chrono__nav span {
	display: block;
	width: 8px;
	height: 8px;
	margin: 0 auto;
	border-right: 1px solid var(--ll-primary);
	border-bottom: 1px solid var(--ll-primary);
	transition: border-color .3s ease;
}

.levent-chrono__nav--prev span {
	transform: translateX(1px) rotate(135deg);
}

.levent-chrono__nav--next span {
	transform: translateX(-1px) rotate(-45deg);
}

.levent-chrono__nav:hover:not(:disabled) {
	background: var(--ll-primary);
	border-color: var(--ll-primary);
}

.levent-chrono__nav:hover:not(:disabled) span {
	border-color: #FFFFFF;
}

.levent-chrono__nav:disabled {
	opacity: .3;
	cursor: default;
}

.levent-chrono__nav:focus-visible {
	outline: 2px solid var(--ll-primary);
	outline-offset: 3px;
}

.levent-chrono__track {
	display: flex;
	gap: var(--chrono-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.levent-chrono__track::-webkit-scrollbar {
	display: none;
}

.levent-chrono__track:focus-visible {
	outline: 2px solid var(--ll-primary);
	outline-offset: 4px;
}

.levent-chrono__item {
	flex: 0 0 calc(
		(100% - (var(--chrono-per) - 1) * var(--chrono-gap)) / var(--chrono-per)
	);
	scroll-snap-align: start;
}

.levent-chrono__year {
	margin: 0 0 clamp(.6rem, 1.2vw, .9rem);
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.15rem, 1.7vw, 1.6rem);
	line-height: 1;
	text-align: center;
	color: var(--ll-primary);
}

/* The line and its mark. A border would stop at each item and break in every
   gutter, so each draws its own reaching across, and the run reads as one. */
.levent-chrono__mark {
	position: relative;
	display: block;
	height: 7px;
	margin-bottom: clamp(1.1rem, 2.2vw, 1.75rem);
}

.levent-chrono__mark::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: calc(100% + var(--chrono-gap));
	height: 1px;
	background: var(--ll-hairline);
}

.levent-chrono__item:last-child .levent-chrono__mark::before {
	width: 100%;
}

.levent-chrono__mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ll-accent);
	transform: translate(-50%, -50%);
	transition: transform .3s ease, background-color .3s ease;
}

.levent-chrono__item:hover .levent-chrono__mark::after {
	background: var(--ll-primary);
	transform: translate(-50%, -50%) scale(1.6);
}

.levent-chrono__media {
	margin: 0 0 clamp(.75rem, 1.4vw, 1rem);
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid var(--ll-hairline);
	transition: border-color .35s ease, transform .35s ease;
}

.levent-chrono__item:hover .levent-chrono__media {
	border-color: rgba(1, 68, 85, .35);
	transform: translateY(-3px);
}

.levent-chrono__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A brand mark sits in the plate. Only two of the nineteen are photographs. */
.levent-chrono__media.has-logo .levent-chrono__image {
	object-fit: contain;
	padding: clamp(1rem, 2vw, 1.6rem);
}

.levent-chrono__name {
	margin: 0;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .2em;
	line-height: 1.5;
	text-align: center;
	text-transform: uppercase;
	color: rgba(1, 44, 56, .62);
}

.levent-chrono__pages {
	display: flex;
	justify-content: center;
	gap: .55rem;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* A 7px dot is a 7px target. The dot stays 7px and the button around it grows
   to 44, which is the floor a finger needs; the extra is transparent, so the
   row still reads as a line of small marks. */
.levent-chrono__page {
	/* Ten dots at 44 wide need 440px and the phone has 390, so they were being
	   squeezed to 22. Height carries the target instead, and the width falls to
	   24, which is the floor WCAG asks for and still leaves them spaced. */
	flex: 0 0 auto;
	width: clamp(24px, 6vw, 44px);
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.levent-chrono__page::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(1, 68, 85, .22);
	transition: background-color .3s ease, transform .3s ease;
}

.levent-chrono__page.is-active::before {
	background: var(--ll-primary);
	transform: scale(1.3);
}

.levent-chrono__page:focus-visible {
	outline: 2px solid var(--ll-primary);
	outline-offset: 3px;
}

@media (max-width: 1000px) {
	.levent-chrono {
		--chrono-per: 3;
	}
}

@media (max-width: 760px) {
	.levent-chrono {
		--chrono-per: 2;
	}

	.levent-chrono__head {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

/* The arrows cost about ninety pixels of a phone's width, which took each
   plate down to a hundred. Swiping is the gesture there anyway, and the page
   marks still say where you are. */
@media (max-width: 560px) {
	.levent-chrono__frame {
		grid-template-columns: minmax(0, 1fr);
	}

	.levent-chrono__nav {
		display: none;
	}
}

.levent-moment__year {
	margin: 0 0 .15rem;
	font-family: "Jost", sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	color: rgba(1, 44, 56, .45);
}

/* Two lines are reserved whether the name needs them or not. Cyprus
   International University wraps and every card under it in that column
   dropped, so the rows stopped lining up across the six columns. */
.levent-journeyline--decades .levent-moment__title {
	margin: 0;
	min-height: 2.6em;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(.95rem, 1.15vw, 1.1rem);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--ll-ground);
}

.levent-moment__year {
	margin: 0 0 .3rem;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.5rem, 2.1vw, 2.1rem);
	line-height: 1.1;
	color: var(--ll-primary);
}

.levent-moment__title {
	margin: 0 0 .5rem;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(1, 44, 56, .5);
}

.levent-moment__note {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(.92rem, 1vw, 1rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .72);
}

.levent-moment__media {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.levent-moment__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.levent-moment:hover .levent-moment__image {
	transform: scale(1.04);
}

@media (max-width: 820px) {
	.levent-journeyline__head {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.levent-moment {
		grid-template-columns: 1fr;
	}

	.levent-moment.is-plain .levent-moment__body {
		max-width: none;
	}
}

/* Principles
   Numbered rows, a title against a paragraph, hairline between each. Rows
   rather than cards so a section of four and a section of five sit on the
   same page without one of them ending in an orphan.
---------------------------------------------------- */

.levent-principles {
	padding: clamp(3.5rem, 6vw, 5.5rem) 0;
	background: #FFFFFF;
}

/* Two of these sit next to each other on the sustainability page. The page
   ground is #F7F8F9, so a sand block against it is a difference of four or
   five values and reads as nothing; white against sand is what separates
   them. */
.levent-principles--quiet {
	background: #F7F6F3;
}

.levent-principles__inner {
	max-width: var(--ll-measure);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 5vw, 2rem);
}

.levent-principles__head {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 4vw, 4rem);
	align-items: end;
	padding-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}

.levent-principles__head .levent-h2 {
	margin-bottom: 0;
}

.levent-principles__lead {
	max-width: 44ch;
	margin: 0;
	font-size: clamp(.95rem, 1.05vw, 1.05rem);
	line-height: 1.7;
	color: rgba(1, 44, 56, .68);
}

.levent-principle {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 14rem) minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 2.75rem);
	align-items: start;
	padding: clamp(1.4rem, 2.4vw, 2rem) clamp(.5rem, 1vw, 1rem);
	border-top: 1px solid var(--ll-hairline);
	transition: background .35s ease;
}

.levent-principle:last-child {
	border-bottom: 1px solid var(--ll-hairline);
}

.levent-principle:hover {
	background: rgba(1, 44, 56, .035);
}

.levent-principle__num {
	margin: 0;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	line-height: 1.9;
	color: rgba(1, 44, 56, .35);
	transition: color .35s ease;
}

.levent-principle:hover .levent-principle__num {
	color: var(--ll-accent);
}

.levent-principle__title {
	margin: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(1.05rem, 1.35vw, 1.3rem);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--ll-ground);
}

.levent-principle__text {
	max-width: 62ch;
	margin: 0;
	font-size: clamp(.92rem, 1vw, 1rem);
	line-height: 1.75;
	color: rgba(1, 44, 56, .72);
}

@media (max-width: 900px) {
	.levent-principles__head {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.levent-principle {
		grid-template-columns: 2.5rem minmax(0, 1fr);
		gap: .5rem clamp(.75rem, 3vw, 1.25rem);
	}

	/* The number keeps its own column, the title and the paragraph stack
	   beside it. */
	.levent-principle__text {
		grid-column: 2;
	}
}

/* The header menu against the centred logo
   A fourth top level item, Sustainability, pushed the left menu into the logo
   below about 1490px: 33px of overlap at 1400 and 112px at 1200. The menu is a
   flex item that shrinks while its contents do not, so it spills rather than
   pushing the logo along. Tightening it in three steps keeps every width clear.
---------------------------------------------------- */

@media (max-width: 1520px) {
	.header-v6 .navbar-nav {
		gap: 14px;
	}

	.header-v6 .main-nav .navbar-nav > li > a {
		padding-left: 7px;
		padding-right: 7px;
	}
}

@media (max-width: 1380px) {
	.header-v6 .header-top .container-fluid {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.header-v6 .main-nav .navbar-nav > li > a {
		font-size: 11px;
		letter-spacing: .08em;
		padding-left: 4px;
		padding-right: 4px;
	}

	.header-v6 .navbar-nav {
		gap: 8px;
	}
}

/* Bootstrap widens the container at its xl breakpoint, which is why 1200 to
   1220 stayed tight when everything either side of it had cleared. */
@media (min-width: 1200px) and (max-width: 1380px) {
	.header-v6 .header-top .container-fluid {
		padding-left: .5rem;
		padding-right: .5rem;
	}

	.header-v6 .navbar-nav {
		gap: 2px;
	}

	.header-v6 .main-nav .navbar-nav > li > a {
		padding-left: 2px;
		padding-right: 2px;
		letter-spacing: .06em;
	}
}

/* Mobile menu motion
   The drawer itself slides, Bootstrap sees to that. Its submenus toggle
   display, which cannot be transitioned, so they snapped open while every
   other moving thing on this site eases. Display cannot animate; an animation
   on the element as it becomes displayed can.
---------------------------------------------------- */

@keyframes levent-submenu-in {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.offcanvas-mobile-menu .dropdown-menu.show {
	animation: levent-submenu-in .32s cubic-bezier(.22, .61, .36, 1) both;
}

/* The chevron turns with the list rather than flipping under it. */
.offcanvas-mobile-menu .nav-mobile-trigger .houzez-icon,
.offcanvas-mobile-menu .nav-mobile-trigger::after {
	display: inline-block;
	transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

.offcanvas-mobile-menu .nav-mobile-trigger.dropdown-toggle.show .houzez-icon,
.offcanvas-mobile-menu .nav-mobile-trigger.dropdown-toggle.show::after {
	transform: rotate(180deg);
}

/* A row lights under the finger, the way the rest of the site answers a
   pointer. */
.offcanvas-mobile-menu .navbar-nav > li > .nav-link,
.offcanvas-mobile-menu .dropdown-menu > li > a {
	transition: background-color .25s ease, color .25s ease;
}

.offcanvas-mobile-menu .navbar-nav > li > .nav-link:active,
.offcanvas-mobile-menu .dropdown-menu > li > a:active {
	background: rgba(1, 68, 85, .06);
}

@media (prefers-reduced-motion: reduce) {
	.offcanvas-mobile-menu .dropdown-menu.show {
		animation: none;
	}

	.offcanvas-mobile-menu .nav-mobile-trigger .houzez-icon,
	.offcanvas-mobile-menu .nav-mobile-trigger::after {
		transition: none;
	}
}

/* The master plan legend is navigation
   Each colour names a building and the bed count it holds, and points at the
   residences of that count. The drawing itself stays a drawing: nothing on it
   is clickable, which is why the legend has to be.
---------------------------------------------------- */

.levent-plan__entry {
	display: inline-flex;
	align-items: center;
	/* It is a link now, so it has to be a target. Twenty eight pixels was the
	   text height and nothing more. */
	min-height: 44px;
	gap: .6rem;
	color: inherit;
	text-decoration: none;
	transition: color .25s ease;
}

a.levent-plan__entry:hover .levent-plan__name,
a.levent-plan__entry:focus-visible .levent-plan__name {
	color: var(--ll-primary);
	text-decoration: underline;
	text-underline-offset: .3em;
	text-decoration-thickness: 1px;
}

a.levent-plan__entry:hover .levent-plan__swatch {
	transform: scale(1.25);
}

.levent-plan__swatch {
	transition: transform .25s ease;
}

a.levent-plan__entry:focus-visible {
	outline: 2px solid var(--ll-primary);
	outline-offset: 4px;
}