/*
 * ERECT design layer (2026): loaded after the Autora theme's style.css and custom.css.
 * Base: white page, #f4f4f4 cards, 8px radius, Bebas Neue titles, Manrope text.
 * Motif: surveyor's marks from the master plan — corner brackets, [ labels ], coordinates, a square arrow box.
 */

/* ── Fonts (self-hosted, SIL OFL; licences next to the files) ─────────── */

/* Bebas Neue has no Cyrillic: Russian letters fall back to Oswald 500 under the same family name */
@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/bebas-neue-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/bebas-neue-latin-ext-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/oswald-cyrillic-500-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/oswald-cyrillic-ext-500-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Manrope (variable 200–800). The theme asks for Montserrat, Open Sans and Hind in ~30 rules: those names
   point to Manrope too, so every theme text switches without touching the theme files */
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations'); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-cyrillic-wght-normal.woff2') format('woff2-variations'); font-weight: 200 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; src: url('../fonts/manrope-cyrillic-ext-wght-normal.woff2') format('woff2-variations'); font-weight: 200 800; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/manrope-cyrillic-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Open Sans'; src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Hind'; src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }

/* ── Tokens ───────────────────────────────────────────────────────────── */

:root {
  --brand: #b71c1c;
  --brand-hover: #9e1818;
  --brand-active: #861414;
  --brand-soft: #fbefef;
  --brand-on-dark: #f0443a;

  --bg: #ffffff;
  --surface: #f4f4f4;
  --surface-strong: #ececec;
  --ink: #15171c;
  --ink-muted: #4a4f5c;
  --ink-subtle: #6e7380;
  --ink-faint: #b6b9c2;
  --line: #e4e5e9;
  --dark: #121418;
  --on-dark: #ffffff;
  --on-dark-muted: rgb(255 255 255 / 0.74);
  --on-dark-subtle: rgb(255 255 255 / 0.56);
  --on-dark-line: rgb(255 255 255 / 0.16);
  --star: #f5952a;

  --font-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius: 8px;
  --container: 1400px;
  --gutter: 15px;
  --header-h: 88px;
  --ease: cubic-bezier(0.22, 0.68, 0.3, 1);
  --dur: 0.22s;
  --shadow-float: 0 4px 10px rgb(21 23 28 / 0.05), 0 20px 44px -20px rgb(21 23 28 / 0.22);
  /* the space between two sections, everywhere */
  --section: 120px;
}

@media (max-width: 1023px) {
  :root {
    --section: 96px;
  }
}

@media (max-width: 767px) {
  :root {
    --section: 72px;
  }
}

/* ── Section rhythm: a section owns the space above it and none below, so two sections never add up ── */

.e-section {
  padding-top: var(--section) !important;
  padding-bottom: 0 !important;
}

/* a section with its own background: the same space outside it and inside it */
.e-band {
  margin-top: var(--section) !important;
  padding-top: var(--section) !important;
  padding-bottom: var(--section) !important;
}

/* inner pages: the same space under the breadcrumb band (the footer keeps it above the page's end) */
.e-page {
  padding-top: var(--section) !important;
}

/* the theme's spacers where a page starts or ends: the section spacing replaces them */
.themesflat-spacer.e-edge {
  display: none !important;
}

/* between two blocks of a page: one section gap */
.themesflat-spacer.e-split {
  height: var(--section) !important;
}

/* between a page's column and its sidebar: one section gap once they stack, nothing side by side */
@media (min-width: 768px) {
  .themesflat-spacer.e-gap {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .themesflat-spacer.e-gap {
    height: var(--section) !important;
  }
}

/* a row left empty by a removed spacer (Bootstrap columns are at least 1px tall) */
.row:has(> [class*='col-'] > .themesflat-spacer.e-edge:only-child) {
  display: none;
}

/* the last row of a card grid: its cards' bottom margin is not page space */
.e-page .themesflat-project.has-margin,
.e-page .row-services .themesflat-carousel-box {
  margin-bottom: -30px;
}

.e-page .row-testimonials .row > .row {
  margin-bottom: -15px;
}

.e-page .tab-title .item-title:last-child {
  margin-bottom: 0;
}

/* admin rich text: no margin after its last block, no empty line under an image that did not load */
.e-page :is(p, ul, ol, table, blockquote):last-child {
  margin-bottom: 0;
}

.e-page .inner-content-wrap > div > img {
  display: block;
}

/* the theme's button rows: no line box below the button, so a section ends where its last button does */
.e-section .elm-button,
.e-band .elm-button {
  line-height: 0;
}

/* an anchor lands just under the header, not a section's height above the content */
.e-section[id],
.e-band[id] {
  scroll-margin-top: calc(32px - var(--section));
}

@media (max-width: 1023px) {
  :root {
    --header-h: 72px;
  }
}

/* ── Site-wide: white page, Manrope text, Bebas titles, 8px corners, #f4f4f4 cards ── */

html {
  scroll-padding-top: calc(var(--header-h) + 24px);
  /* no layout jump when a dialog or the menu locks the page */
  scrollbar-gutter: stable;
}

body {
  /* the theme's overflow-x: hidden made the body a scroll container, which breaks position: sticky */
  overflow-x: clip;
  overflow-y: visible;
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--ink-muted);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#wrapper,
#page,
#main-content {
  background: var(--bg);
}

h1, h2, h3, h4, h5, h6,
.heading,
.widget-title,
.feautured-title-heading,
.font-heading,
.themesflat-headings .heading,
.post-title,
.entry-title {
  font-family: var(--font-display);
  font-weight: 400 !important; /* Bebas has one weight: never a synthetic bold */
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* the theme's reset puts a font-family on every element (span, a, div…), so nothing would inherit the heading face */
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
.heading *,
.widget-title *,
.ehero__title *,
.ef__mark *,
.emodal__title * {
  font-family: inherit;
}

.themesflat-headings .sub-heading,
p,
li,
td,
th,
input,
textarea,
button,
select {
  font-family: var(--font-body);
}

.themesflat-button,
.themesflat-button span,
input,
textarea,
select,
.form-control,
#scroll-top,
#scroll-top:before,
.owl-theme .owl-nav [class*='owl-'],
.page-item .page-link {
  border-radius: var(--radius) !important;
}

/* the theme's scroll-to-top button (z-index 1) slid under the project cards' labels; it stays below the header */
#scroll-top {
  z-index: 50;
}

/* card surfaces */
.project-section .themesflat-project.has-margin.mg15 .project-item .inner,
.themesflat-project .project-item .inner,
.themesflat-image-box .image-box-item .inner,
.themesflat-icon-box,
.widget_list,
.widget_help,
.widget_lastest,
.widget_search,
.themesflat-accordions .accordion-item,
.themesflat-testimonials .item .inner,
.testimonial-item,
.themesflat-request-box,
.related-posts .post-item,
.posts-page .post-item .post-content-wrap {
  background-color: var(--surface) !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.thumb,
.thumb img,
.post-media,
.post-media img,
.gallery-item .inner,
.gallery-item img,
.themesflat-partner .thumb,
.item-content img,
.about-section__video iframe {
  border-radius: var(--radius);
}

/* sidebar link lists: were white on a dark card; now ink on #f4f4f4, square markers like the footer */
.widget.widget_list .list-item {
  border-top-color: var(--line);
}
.widget.widget_list .list-item > a {
  color: var(--ink) !important;
  font-weight: 600;
}
.widget.widget_list .list-item > a:before {
  border-radius: 0;
  background-color: var(--ink-faint);
}
.widget.widget_list .list-item > a:hover,
.widget.widget_list .list-item > a.active {
  color: var(--brand) !important;
}
.widget.widget_list .list-item > a:hover:before,
.widget.widget_list .list-item > a.active:before {
  background-color: var(--brand);
}

/* breadcrumb band: a flat #f4f4f4 panel instead of the brick pattern */
#featured-title {
  background: var(--surface) !important;
  background-image: none !important;
}

/* one container for the whole site: 1400px (the theme's Bootstrap container was 1200px) */
@media (min-width: 1200px) {
  .container {
    width: var(--container);
    max-width: 100%;
  }
}

/* theme's own fixed header and top bar are replaced by .eh */
#site-header-wrap,
#top-bar {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── Shared primitives ────────────────────────────────────────────────── */

.e-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* [ label ] — the bracketed eyebrow */
.e-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 12px/1.2 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.e-eyebrow b {
  font-weight: 700;
  color: var(--ink);
}

.e-eyebrow::before,
.e-eyebrow b::after {
  color: var(--brand);
  font-weight: 700;
}

.e-eyebrow::before {
  content: '[';
}

.e-eyebrow b::after {
  content: ' ]';
}

/* buttons: label + detached arrow square (the plan's grid cell); stretched to a row, both stay in the middle */
.e-btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  --btn-box: rgb(255 255 255 / 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding: 6px 6px 6px 24px;
  border: 0;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg) !important;
  font: 700 14px/1.2 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.e-btn:hover {
  background: var(--brand-hover);
}

.e-btn:active {
  background: var(--brand-active);
}

.e-btn__box {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--btn-box);
  transition: transform var(--dur) var(--ease);
}

.e-btn:hover .e-btn__box {
  transform: translateX(3px);
}

.e-btn svg {
  width: 18px;
  height: 18px;
}

.e-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: #fff;
  padding: 6px 24px;
  box-shadow: inset 0 0 0 1px var(--on-dark-line);
}

.e-btn--ghost:hover {
  --btn-bg: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4);
}

.e-btn--dark {
  --btn-bg: var(--ink);
  --btn-box: rgb(255 255 255 / 0.12);
}

.e-btn--dark:hover {
  --btn-bg: #000;
}

/* white, for a red or dark ground */
.e-btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  --btn-box: var(--surface);
}

.e-btn--light:hover {
  --btn-bg: var(--surface);
  --btn-box: #fff;
}

.e-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.e-icon-btn svg {
  width: 20px;
  height: 20px;
}

/* Threads, an SVG among the Font Awesome brand glyphs: their size and colour */
.e-threads {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: top;
}

.e-icon-btn .e-threads {
  width: 16px;
  height: 16px;
}

/* ── Buttons in every state ───────────────────────────────────────────── */

/*
 * The theme paints every hovered or focused <button> #222 (style.css, `button:hover, button:focus`), which beats the
 * site's one-class button rules: dark text would vanish on it. Each button keeps its own colours here instead; the
 * :is() pseudo-classes lift these rules above the theme's.
 */
.e-btn:is(:hover, :focus) {
  background-color: var(--btn-bg);
}

.elang__btn:focus,
.eh__burger:focus {
  background-color: var(--surface);
}

.elang__btn:hover,
.eh__burger:hover {
  background-color: var(--surface-strong);
}

.emodal__close:focus,
.eplan__close:focus {
  background-color: var(--surface);
}

.ehero__arrow:focus {
  background-color: rgb(255 255 255 / 0.14);
}

.ehero__seg:is(:hover, :focus) {
  background: none;
}

.enm-tab:is(:hover, :focus):not([aria-selected='true']) {
  background-color: transparent;
}

.enm-chip:is(:hover, :focus):not([aria-pressed='true']),
.eplan-card__btn:is(:hover, :focus) {
  background-color: #fff;
}

/* project page: "read more" is a text link; the video's still stays dark */
.epd-more:is(:hover, :focus) {
  background-color: transparent;
}

.epd-video__poster:is(:hover, :focus) {
  background-color: var(--dark);
}

/* reviews arrows: white on the grey band, dark when pointed at; a disabled one stays as it is */
.ereviews__arrow:is(:hover, :focus):not(:disabled) {
  background-color: var(--ink);
  color: #fff;
}

.ereviews__arrow:disabled:is(:hover, :focus) {
  background-color: #fff;
  color: var(--ink);
}

/* FAQ tabs: grey track, the chosen one white */
.efaq__tab:is(:hover, :focus):not([aria-selected='true']) {
  background-color: rgb(255 255 255 / 0.6);
  color: var(--ink);
}

.efaq__tab[aria-selected='true']:is(:hover, :focus) {
  background-color: #fff;
  color: var(--ink);
}

/* the theme removes every focus outline: keyboard users get a visible ring on the site's controls */
:is(.e-btn, .elang__btn, .elang__item, .eh__burger, .e-icon-btn, .ehero__seg, .enm-tab, .enm-chip, .eplan-card__btn, .eplan__close, .e-link, .eh__link, .emenu__link, .enm-nav__list a, .ecard__more, .ereviews__arrow, .efaq__tab):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── The old theme's links and buttons in every state ─────────────────── */

/* red theme buttons: custom.css makes every focused link red too, the same red as the button */
.themesflat-button.bg-accent:focus,
.themesflat-button[style*='brand-color-red']:focus {
  color: #fff !important;
}

/* white theme buttons: the theme hovers them with its yellow under white text */
.themesflat-button.bg-white:hover::before,
.themesflat-button.bg-light-white:hover::before {
  background-color: var(--brand);
}

/* in the red strip of the about block a red hover would melt into the strip */
.about-bg__color .themesflat-button.bg-white:hover::before {
  background-color: var(--ink);
}

/* links the theme still turns yellow on hover: the projects' map links */
.project-section .elm-meta a:is(:hover, :focus),
.row-project-detail .list-info a:is(:hover, :focus) {
  color: var(--brand) !important;
}

/* the news meta (date, category, views) was #999 on white */
.post-meta .item,
.post-meta .item a {
  color: var(--ink-subtle) !important;
}

.post-meta .item a:is(:hover, :focus) {
  color: var(--brand) !important;
}

/* ── Header ───────────────────────────────────────────────────────────── */

.eh {
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--header-h);
  background: rgb(255 255 255 / 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 1px 0 var(--line);
  color: var(--ink);
}

.eh__bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.eh__logo {
  display: block;
  flex: none;
  color: var(--ink);
  line-height: 0;
}

.eh .logo {
  width: auto;
  height: 54px;
}

.logo__ink {
  fill: currentColor;
}

.logo__mark {
  fill: var(--brand);
}

.eh__nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

/* one soft highlight that glides to the hovered link and rests on the current page (erect.js) */
.eh__glide {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--gw, 0);
  height: var(--gh, 0);
  border-radius: var(--radius);
  background: rgb(21 23 28 / 0.065);
  opacity: 0;
  transform: translate(var(--gx, 0), var(--gy, 0));
  transition:
    transform 0.4s var(--ease),
    width 0.4s var(--ease),
    opacity 0.2s var(--ease),
    background-color var(--dur) var(--ease);
  pointer-events: none;
}

.eh__nav.is-glide-on .eh__glide {
  opacity: 1;
}

/* sentence-case links (the labels are written capitalised) */
.eh__link {
  position: relative;
  padding: 11px 14px;
  border-radius: var(--radius);
  font: 600 15px/1 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: inherit !important;
  text-decoration: none !important;
  opacity: 0.84;
  transition:
    opacity var(--dur) var(--ease),
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.eh__link:hover,
.eh__link:focus-visible,
.eh__link.is-active {
  opacity: 1;
}

.eh__link.is-active {
  color: var(--brand) !important;
}

/* without the script each link lights up on its own */
.eh__nav:not(.has-glide) .eh__link:hover {
  background: rgb(21 23 28 / 0.065);
}

.eh__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.eh__phone {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: inherit !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.eh__phone small {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.62;
}

.eh__phone strong {
  font: 700 16px/1 var(--font-body);
  letter-spacing: 0.01em;
}

.eh__call {
  background: var(--surface);
}

.eh__call:hover {
  color: var(--brand);
}

/* phone icon: only where the number itself doesn't fit */
.eh__call {
  display: none !important;
}

/* compact CTA in the bar */
.eh__cta {
  min-height: 44px;
  padding: 4px 4px 4px 18px;
  gap: 10px;
  font-size: 13px;
  white-space: nowrap;
}

.eh__cta .e-btn__box {
  width: 36px;
  height: 36px;
}

.eh__cta svg {
  width: 16px;
  height: 16px;
}

/* ── Language dropdown ── */

.eflag {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(21 23 28 / 0.08);
}

.elang {
  position: relative;
}

.elang__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 10px 0 12px;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  font: 700 13px/1 var(--font-body);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.elang__btn:hover {
  background: var(--surface-strong);
}

.elang__btn svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  transition: transform var(--dur) var(--ease);
}

.elang.is-open .elang__btn svg {
  transform: rotate(180deg);
}

.elang__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-float);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0s linear 0.16s;
}

.elang.is-open .elang__list {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}

.elang__list li {
  margin: 0;
  list-style: none;
}

.elang__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  font: 600 15px/1 var(--font-body);
  color: var(--ink) !important;
  text-decoration: none !important;
}

.elang__list a:hover,
.elang__list a:focus-visible {
  background: var(--surface);
  outline: none;
}

.elang__list a[aria-current='true'] {
  background: var(--brand-soft);
  color: var(--brand) !important;
}

.elang__list a svg {
  width: 18px;
  height: 18px;
  margin-left: auto;
}

/* burger: tablets and phones only; turns into a cross while the menu is open */
.eh__burger {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  cursor: pointer;
}

.eh__burger i,
.eh__burger i::before,
.eh__burger i::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.eh__burger i {
  position: relative;
}

.eh__burger i::before,
.eh__burger i::after {
  content: '';
  position: absolute;
  left: 0;
}

.eh__burger i::before {
  transform: translateY(-6px);
}

.eh__burger i::after {
  transform: translateY(6px);
}

.eh.is-menu-open .eh__burger i {
  background: transparent;
}

.eh.is-menu-open .eh__burger i::before {
  transform: rotate(45deg);
}

.eh.is-menu-open .eh__burger i::after {
  transform: rotate(-45deg);
}

/* home: transparent over the hero until the page scrolls (or the menu opens) */
.eh--overlay {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: #fff;
}

.eh--overlay .eh__logo {
  color: #fff;
}

/* over the hero photo: a frosted highlight, the current page stays white */
.eh--overlay:not(.is-stuck):not(.is-menu-open) .eh__glide,
.eh--overlay:not(.is-stuck):not(.is-menu-open) .eh__nav:not(.has-glide) .eh__link:hover {
  background: rgb(255 255 255 / 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.eh--overlay:not(.is-stuck):not(.is-menu-open) .eh__link.is-active {
  color: #fff !important;
}

.eh--overlay .elang__btn,
.eh--overlay .eh__call,
.eh--overlay .eh__burger {
  background: rgb(255 255 255 / 0.14);
}

/* hover over the photo only: once the bar is white, the white text would vanish on the light button */
.eh--overlay:not(.is-stuck):not(.is-menu-open) .elang__btn:hover,
.eh--overlay:not(.is-stuck):not(.is-menu-open) .eh__call:hover,
.eh--overlay:not(.is-stuck):not(.is-menu-open) .eh__burger:is(:hover, :focus) {
  background: rgb(255 255 255 / 0.24);
  color: #fff;
}

.eh--overlay.is-stuck,
.eh--overlay.is-menu-open {
  color: var(--ink);
  background: rgb(255 255 255 / 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 1px 0 var(--line);
}

.eh--overlay.is-stuck {
  position: fixed;
  animation: eh-in 0.32s var(--ease);
}

.eh--overlay.is-stuck .eh__logo,
.eh--overlay.is-menu-open .eh__logo {
  color: var(--ink);
}

.eh--overlay.is-stuck .elang__btn,
.eh--overlay.is-stuck .eh__call,
.eh--overlay.is-stuck .eh__burger,
.eh--overlay.is-menu-open .elang__btn,
.eh--overlay.is-menu-open .eh__call,
.eh--overlay.is-menu-open .eh__burger {
  background: var(--surface);
}

.eh--overlay.is-stuck .eh__call:hover,
.eh--overlay.is-menu-open .eh__call:hover {
  color: var(--brand);
}

.eh--overlay.is-stuck .elang__btn:hover,
.eh--overlay.is-menu-open .elang__btn:hover,
.eh--overlay.is-stuck .eh__burger:is(:hover, :focus),
.eh--overlay.is-menu-open .eh__burger:is(:hover, :focus) {
  background: var(--surface-strong);
  color: var(--ink);
}

@keyframes eh-in {
  from {
    transform: translateY(-100%);
  }
}

/* narrower desktops: the number becomes an icon */
@media (max-width: 1439px) {
  .eh__bar {
    gap: 16px;
  }
  .eh__link {
    padding-inline: 10px;
    font-size: 14px;
  }
  .eh__phone {
    display: none;
  }
  .eh__call {
    display: inline-grid !important;
  }
  .eh__actions {
    gap: 10px;
  }
}

/* tablets and phones: logo, CTA, call, burger; the links and languages move into the dropdown */
@media (max-width: 1199px) {
  .eh__nav,
  .elang {
    display: none;
  }
  .eh__burger {
    display: inline-grid;
  }
}

@media (max-width: 1023px) {
  .eh .logo {
    height: 44px;
  }
}

@media (max-width: 599px) {
  .eh__cta {
    display: none;
  }
}

/* ── Dropdown menu (tablets and phones) ───────────────────────────────── */

.emenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line) inset, 0 28px 48px -28px rgb(21 23 28 / 0.35);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0s linear 0.24s;
}

.emenu.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}

.eh__backdrop {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 1;
  background: rgb(18 20 24 / 0.45);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.24s var(--ease), visibility 0s linear 0.24s;
}

.eh.is-menu-open .eh__backdrop {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.24s var(--ease);
}

.emenu__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding-block: 8px 24px;
}

@media (min-width: 768px) {
  .emenu__body {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: 32px;
    padding-block: 16px 32px;
  }
}

.emenu__links {
  display: grid;
  counter-reset: emenu;
}

.emenu__link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font: 600 20px/1.2 var(--font-body);
  letter-spacing: -0.01em;
  color: var(--ink) !important;
  text-decoration: none !important;
}

.emenu__link::before {
  counter-increment: emenu;
  content: counter(emenu, decimal-leading-zero);
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.1em;
  color: var(--brand);
  transform: translateY(-3px);
}

.emenu__link.is-active {
  color: var(--brand) !important;
}

/* only with a real pointer: a phone keeps a tapped link "hovered", so the menu showed two pages in red */
@media (hover: hover) {
  .emenu__link:hover {
    color: var(--brand) !important;
  }
}

.emenu__aside {
  display: grid;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface);
}

.emenu__phones {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.emenu__phone {
  font: 400 34px/1 var(--font-display);
  letter-spacing: 0.01em;
  color: var(--ink) !important;
  text-decoration: none !important;
}

.emenu__phones small {
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.emenu__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.emenu__socials {
  display: flex;
  gap: 6px;
}

.emenu__social {
  background: #fff;
}

.emenu__social:hover {
  color: var(--brand);
}

.elang-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.elang-chips a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: var(--radius);
  background: #fff;
  font: 600 15px/1 var(--font-body);
  color: var(--ink) !important;
  text-decoration: none !important;
  box-shadow: inset 0 0 0 1px transparent;
}

.elang-chips a.is-active {
  box-shadow: inset 0 0 0 2px var(--brand);
}

@media (min-width: 1200px) {
  .emenu,
  .eh__backdrop {
    display: none !important;
  }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.ehero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(640px, 100svh, 860px);
  background: var(--dark);
  color: var(--on-dark);
  isolation: isolate;
}

.ehero__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(24px, 3.4vh, 40px);
  /* text aligns with the page container's left edge */
  padding: calc(var(--header-h) + 56px) clamp(32px, 4vw, 64px) 40px max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}

.ehero__title {
  margin: 0;
  font: 400 clamp(56px, 6.1vw, 104px) / 0.88 var(--font-display);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff !important;
  text-wrap: balance;
}

.ehero__title span {
  display: block;
}

.ehero__title .is-accent {
  color: var(--brand-on-dark);
}

.ehero__lead {
  max-width: 460px;
  margin: 26px 0 0;
  font: 400 17px/1.6 var(--font-body);
  color: var(--on-dark-muted);
  text-wrap: pretty;
}

.ehero__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--on-dark-line);
}

.ehero__fact {
  padding: 18px 16px 0 0;
}

.ehero__fact + .ehero__fact {
  padding-left: 16px;
  border-left: 1px solid var(--on-dark-line);
}

.ehero__fact dt {
  font: 400 clamp(36px, 3.2vw, 48px) / 1 var(--font-display);
  letter-spacing: 0.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.ehero__fact dd {
  margin: 6px 0 0;
  font: 600 12px/1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-subtle);
}

.ehero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* slider */
.ehero__media {
  position: relative;
  overflow: hidden;
  background: #1c1f25;
  /* a sideways swipe changes the photo (erect.js); otherwise the browser claims it and cancels the touch */
  touch-action: pan-y;
}

.ehero__media::before {
  /* keeps the header legible over bright sky */
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 180px;
  z-index: 2;
  background: linear-gradient(rgb(10 12 16 / 0.55), rgb(10 12 16 / 0));
  pointer-events: none;
}

.ehero__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 220px;
  z-index: 2;
  background: linear-gradient(rgb(10 12 16 / 0), rgb(10 12 16 / 0.6));
  pointer-events: none;
}

.ehero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1s var(--ease);
}

.ehero__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.ehero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* no alt text over the frame while a photo is still downloading */
  color: transparent;
  transform: scale(1.06);
  transition: transform 7s linear;
}

.ehero__slide.is-active img {
  transform: scale(1);
}

/* viewfinder corners: the surveyor's marks around the frame */
.ehero__frame {
  position: absolute;
  inset: calc(var(--header-h) + 8px) 28px 112px;
  z-index: 3;
  pointer-events: none;
}

.ehero__frame i {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 0 solid rgb(255 255 255 / 0.85);
}

.ehero__frame i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.ehero__frame i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.ehero__frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.ehero__frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.ehero__bar {
  position: absolute;
  inset: auto 28px 28px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 24px;
}

.ehero__caption {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 18px 0 6px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: 600 14px/1.3 var(--font-body);
  max-width: min(360px, 60%);
}

.ehero__caption b {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  font: 400 20px/1 var(--font-display);
  letter-spacing: 0.02em;
}

.ehero__caption span {
  transition: opacity 0.4s var(--ease);
}

.ehero__progress {
  display: flex;
  flex: 1;
  gap: 6px;
  padding-bottom: 6px;
}

.ehero__seg {
  position: relative;
  flex: 1;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.ehero__seg::before,
.ehero__seg::after {
  content: '';
  position: absolute;
  inset: auto 0 10px;
  height: 3px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.32);
}

.ehero__seg::after {
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

.ehero__seg.is-done::after {
  transform: scaleX(1);
}

.ehero__seg.is-active::after {
  animation: ehero-seg var(--slide-ms, 6500ms) linear forwards;
}

.ehero.is-paused .ehero__seg.is-active::after {
  animation-play-state: paused;
}

@keyframes ehero-seg {
  to {
    transform: scaleX(1);
  }
}

.ehero__arrows {
  display: flex;
  gap: 6px;
}

.ehero__arrow {
  background: rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
}

.ehero__arrow:hover {
  background: #fff;
  color: var(--ink);
}

@media (max-width: 1199px) {
  .ehero__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ehero__fact:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .ehero__fact:nth-child(n + 3) {
    border-top: 1px solid var(--on-dark-line);
    margin-top: 16px;
  }
}

@media (max-width: 1023px) {
  .ehero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ehero__panel {
    padding: calc(var(--header-h) + 32px) var(--gutter) 32px;
    gap: 32px;
  }
  .ehero__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
    order: 2;
  }
  .ehero__media::before {
    display: none;
  }
  .ehero__frame {
    inset: 20px 20px 96px;
  }
  .ehero__bar {
    inset: auto 16px 16px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .ehero__caption {
    max-width: none;
    flex: 1 1 100%;
    order: -1;
  }
  .ehero__arrows {
    display: none;
  }
}

@media (max-width: 767px) {
  .ehero__title {
    font-size: clamp(54px, 15vw, 76px);
  }
  .ehero__lead {
    font-size: 16px;
    margin-top: 18px;
  }
  .ehero__ctas .e-btn {
    width: 100%;
  }
  .ehero__media {
    aspect-ratio: 1 / 1;
  }
  .ehero__caption {
    min-height: 46px;
    font-size: 13px;
  }
  .ehero__caption b {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }
}

/* ── Scrolling strip under the hero ───────────────────────────────────── */

.estrip {
  overflow: hidden;
}

.estrip__viewport {
  display: flex;
  width: max-content;
}

.estrip__track {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0 12px 0 0;
  list-style: none;
  animation: estrip 72s linear infinite;
}

@keyframes estrip {
  to {
    transform: translateX(-100%);
  }
}

.estrip__item {
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.estrip__item figure {
  margin: 0;
}

.estrip__item img {
  display: block;
  width: 475px;
  height: 350px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface);
}

.estrip__item--p img {
  width: 350px;
  height: 475px;
}

.estrip__item figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  font: 500 15px/1.3 var(--font-body);
  color: var(--ink-subtle);
}

.estrip__item figcaption b {
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.1em;
  color: var(--brand);
}

@media (max-width: 767px) {
  .estrip__item img {
    width: 300px;
    height: 220px;
  }
  .estrip__item--p img {
    width: 220px;
    height: 300px;
  }
  .estrip__track {
    animation-duration: 54s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .estrip {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .estrip__track {
    animation: none;
    padding-left: var(--gutter);
  }
  .estrip__track[aria-hidden='true'] {
    display: none;
  }
  .estrip__item {
    scroll-snap-align: start;
  }
}

/* ── Projects (home): current project, district photo, handed-over grid ─ */

.eprojects__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: end;
  gap: 24px 48px;
  margin-bottom: clamp(28px, 3.6vw, 48px);
}

.eprojects__title {
  margin: 0;
  font: 400 clamp(40px, 4.4vw, 68px) / 0.92 var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
}

.eprojects__intro p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.e-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 14px/1 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink) !important;
  text-decoration: none !important;
  box-shadow: inset 0 -2px 0 var(--brand);
  padding-bottom: 6px;
  transition: color var(--dur) var(--ease);
}

.e-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease);
}

.e-link:hover {
  color: var(--brand) !important;
}

.e-link:hover svg {
  transform: translateX(3px);
}

/* status badges on photos */
.ebadge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px 0 12px;
  border-radius: var(--radius);
  font: 700 12px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ebadge svg {
  width: 14px;
  height: 14px;
}

.ebadge i {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.ebadge i::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: ebadge-pulse 2s var(--ease) infinite;
}

@keyframes ebadge-pulse {
  0% {
    opacity: 0.8;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

.ebadge--new {
  background: var(--brand);
  color: #fff;
}

.ebadge--live {
  background: #fff;
  color: var(--brand);
}

.ebadge--done {
  background: rgb(21 23 28 / 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
}

.ebadge--done svg {
  color: #5fd38d;
}

/* the current project */
.efeature {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.efeature__media {
  position: relative;
  display: block;
  min-height: 520px;
  background: var(--dark);
  overflow: hidden;
}

.efeature__media img {
  transition: transform 0.8s var(--ease);
}

.efeature__media:hover img {
  transform: scale(1.03);
}

.efeature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.efeature__body {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 52px);
}

.efeature__kicker {
  margin: 0 0 12px;
  font: 700 12px/1.3 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  text-wrap: balance;
}

.efeature__title {
  margin: 0;
  font: 400 clamp(40px, 4.2vw, 64px) / 0.9 var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
}

.efeature__title a {
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: color var(--dur) var(--ease);
}

.efeature__title a:hover {
  color: var(--brand) !important;
}

.efeature__text {
  margin: 18px 0 0;
  max-width: 460px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* spec rows: label … value on hairlines */
.especs {
  margin: 26px 0 0;
  border-top: 1px solid var(--line-strong, #d5d9de);
}

.especs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid #e0e1e5;
}

.especs dt {
  font: 500 14px/1.3 var(--font-body);
  color: var(--ink-subtle);
}

.especs dd {
  margin: 0;
  font: 400 24px/1 var(--font-display);
  letter-spacing: 0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.efeature__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 28px;
}

.e-btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  padding: 6px 22px;
  gap: 10px;
  box-shadow: inset 0 0 0 1px #cfd2d8;
}

.e-btn--outline:hover {
  --btn-bg: #fff;
  box-shadow: inset 0 0 0 1px var(--ink);
}

button.e-link,
button.e-link:hover,
button.e-link:focus {
  width: auto;
  height: auto;
  padding: 0 0 6px;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
}

.e-link--light {
  color: #fff !important;
}

.e-link--light:hover {
  color: var(--brand-on-dark) !important;
}

/* payment terms: the dark band closing the current project's card */
.eterms {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 3fr);
  gap: 24px clamp(24px, 3vw, 48px);
  padding: clamp(24px, 2.6vw, 36px) clamp(24px, 3.4vw, 52px);
  background: var(--dark);
  color: var(--on-dark);
}

.eterms__title {
  margin: 0 0 16px;
  font: 400 clamp(30px, 2.6vw, 40px) / 0.95 var(--font-display);
  text-transform: uppercase;
  color: #fff;
}

.eterms__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.eterms__item {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 0 clamp(16px, 2vw, 28px);
  border-left: 1px solid var(--on-dark-line);
  list-style: none;
}

.eterms__name {
  font: 400 clamp(24px, 2vw, 30px) / 1 var(--font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}

.eterms__name a {
  font: inherit;
  color: #fff !important;
  text-decoration: none !important;
  transition: color var(--dur) var(--ease);
}

/* the arrow follows the last word when the name wraps */
.eterms__name svg {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  vertical-align: -1px;
  transition: transform var(--dur) var(--ease);
}

.eterms__name a:hover {
  color: var(--brand-on-dark) !important;
}

.eterms__name a:hover svg {
  transform: translateX(3px);
}

.eterms__item p {
  margin: 0;
  font: 400 14px/1.5 var(--font-body);
  color: var(--on-dark-muted);
}

@media (max-width: 1199px) {
  .eterms {
    grid-template-columns: 1fr;
  }
  .eterms__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 24px;
  }
  .eterms__title {
    margin: 0;
  }
  .eterms__item:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 767px) {
  .eterms__list {
    grid-template-columns: 1fr;
  }
  .eterms__item,
  .eterms__item:first-child {
    padding: 16px 0;
    border-left: 0;
    border-top: 1px solid var(--on-dark-line);
  }
  .eterms__item:last-child {
    padding-bottom: 0;
  }
}

/* the district: handed-over buildings in front, Nurli Makon behind */
.econtext {
  position: relative;
  margin: 16px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.econtext img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.econtext::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(rgb(18 20 24 / 0), rgb(18 20 24 / 0.55));
  pointer-events: none;
}

.econtext figcaption {
  position: absolute;
  left: 24px;
  bottom: 20px;
  z-index: 2;
  font: 400 clamp(26px, 2.6vw, 40px) / 1 var(--font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}

.econtext__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: grid;
  gap: 3px;
  padding: 10px 14px 11px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-float);
  transform: translate(-50%, 18px);
  white-space: nowrap;
}

a.econtext__pin {
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: box-shadow var(--dur) var(--ease);
}

a.econtext__pin:hover {
  box-shadow: 0 0 0 2px var(--brand), var(--shadow-float);
}

/* the pointer: a short line and a dot on the building */
.econtext__pin::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 2px;
  height: 12px;
  background: #fff;
  transform: translateX(-50%);
}

.econtext__pin::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, 50%);
}

.econtext__pin--new::after {
  background: var(--brand);
}

.econtext__pin b {
  font: 400 22px/1 var(--font-display);
  letter-spacing: 0.01em;
}

.econtext__pin small {
  font: 600 12px/1.2 var(--font-body);
  color: var(--ink-subtle);
}

.econtext__pin--new small {
  color: var(--brand);
}

/* handed-over projects */
.eprojects__subhead {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: clamp(48px, 5vw, 72px) 0 24px;
}

.eprojects__subhead :is(h2, h3) {
  margin: 0;
  font: 400 clamp(30px, 2.6vw, 40px) / 1 var(--font-display);
  text-transform: uppercase;
}

/* projects page: the cards by type */
.eprojects__subhead:has(.eprojects__filter) {
  flex-wrap: wrap;
  align-items: center;
}

.eprojects__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.eprojects__filter .enm-chip {
  background: var(--surface);
}

.eprojects__filter .enm-chip:is(:hover, :focus):not([aria-pressed='true']) {
  border-color: transparent;
  background-color: #ececec;
}

.eprojects__filter .enm-chip span {
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}

@media (max-width: 767px) {
  .eprojects__filter {
    width: 100%;
    margin-left: 0;
  }
}

.eprojects__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.ecard {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.ecard__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e6e7ea;
}

.ecard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.6s var(--ease);
}

.ecard:hover .ecard__media img {
  transform: scale(1.04);
}

.ecard__type {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font: 600 12px/1 var(--font-body);
  color: var(--ink);
}

.ecard__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px 24px;
  padding: 24px 26px 26px;
}

.ecard__title {
  grid-column: 1 / -1;
  margin: 0;
  font: 400 clamp(28px, 2.4vw, 38px) / 1 var(--font-display);
  text-transform: uppercase;
}

.ecard__title a {
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: color var(--dur) var(--ease);
}

.ecard__title a:hover {
  color: var(--brand) !important;
}

.ecard__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
}

.ecard__specs dt {
  font: 600 11px/1.2 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.ecard__specs dd {
  margin: 6px 0 0;
  font: 700 16px/1.2 var(--font-body);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ecard__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 6px 0 16px;
  border-radius: var(--radius);
  background: #fff;
  font: 700 13px/1 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.ecard__more svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 6px;
  background: var(--surface);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.ecard__more:hover {
  background: var(--brand);
  color: #fff !important;
}

.ecard__more:hover svg {
  background: rgb(255 255 255 / 0.16);
  transform: translateX(2px);
}

@media (max-width: 1023px) {
  .eprojects__head {
    grid-template-columns: 1fr;
  }
  .efeature {
    grid-template-columns: 1fr;
  }
  .efeature__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 767px) {
  .eprojects__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .econtext img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 54% 50%;
  }
  .econtext__pin {
    /* the 2400×941 photo cropped to 4:3 is 1.913 boxes wide, with 49.3% of the box cut off on the left */
    left: calc(var(--x) * 1.913 - 49.3%);
    padding: 8px 10px;
  }
  .econtext__pin b {
    font-size: 18px;
  }
  .econtext__pin small {
    display: none;
  }
  /* one line, so it stays under the "handed over" pin */
  .econtext figcaption {
    left: 16px;
    bottom: 14px;
    right: 16px;
    font-size: clamp(18px, 5.8vw, 22px);
  }
  .ecard__body {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .ecard__more {
    justify-self: start;
  }
  .efeature__ctas .e-btn {
    width: 100%;
  }
}

/* ── Project page: Nurli Makon ───────────────────────────────────────────── */

.enm section[id] {
  /* html's scroll-padding already clears the header; this clears the section bar and the section's own top space */
  scroll-margin-top: calc(72px - var(--section));
}

/* tab panels, filtered cards: author display rules must not beat [hidden] */
.enm [hidden] {
  display: none !important;
}

.enm-tab,
.enm-chip,
.eplan-card__btn,
.eplan__close {
  margin: 0;
  box-shadow: none;
  text-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.enm-h2 {
  margin: 0;
  font: 400 clamp(40px, 4.4vw, 68px) / 0.95 var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

.enm-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  align-items: end;
  gap: 16px 48px;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.enm-head--row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.enm-head p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.enm-head--row p {
  max-width: 560px;
  margin-top: 14px;
}

/* tabs: lots, 3D/2D, gallery */
.enm-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius);
  background: #fff;
}

.enm-tab {
  flex: none;
  /* the theme stretches every button to full width on phones */
  width: auto;
  height: 40px;
  white-space: nowrap;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: 700 13px/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.enm-tab:hover {
  color: var(--ink);
}

.enm-tab[aria-selected='true'] {
  background: var(--ink);
  color: #fff;
}

.enm-tabs--small .enm-tab {
  height: 34px;
  padding: 0 14px;
  font-size: 12px;
}

/* hero */
.enm-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(660px, 94svh, 920px);
  padding-top: calc(var(--header-h) + 20px);
  background: var(--dark);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}

.enm-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  border-radius: 0;
}

.enm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(10 12 16 / 0.6) 0%, rgb(10 12 16 / 0) 26%),
    linear-gradient(90deg, rgb(10 12 16 / 0.8) 0%, rgb(10 12 16 / 0.32) 58%, rgb(10 12 16 / 0) 100%),
    linear-gradient(0deg, rgb(10 12 16 / 0.86) 0%, rgb(10 12 16 / 0) 46%);
}

.enm-hero__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-bottom: clamp(28px, 3.4vw, 44px);
}

.ecrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: auto;
  padding-bottom: 32px;
  font: 500 13px/1.4 var(--font-body);
  color: rgb(255 255 255 / 0.56);
}

.ecrumbs a {
  color: rgb(255 255 255 / 0.82) !important;
  text-decoration: none !important;
  transition: color var(--dur) var(--ease);
}

.ecrumbs a:hover {
  color: #fff !important;
}

.ecrumbs [aria-current] {
  color: #fff;
}

.enm-hero .ebadge {
  position: static;
  margin-bottom: 20px;
}

.enm-hero__kicker {
  margin: 0 0 10px;
  font: 700 12px/1.3 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.78);
}

.enm-hero__title {
  margin: 0;
  font: 400 clamp(72px, 10.4vw, 168px) / 0.84 var(--font-display);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff !important;
}

.enm-hero__tagline {
  margin: 14px 0 0;
  font: 400 clamp(24px, 2.4vw, 36px) / 1 var(--font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--brand-on-dark);
}

.enm-hero__lead {
  max-width: 520px;
  margin: 18px 0 0;
  font: 400 17px/1.6 var(--font-body);
  color: var(--on-dark-muted);
  text-wrap: pretty;
}

.enm-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.enm-hero__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--on-dark-line);
}

.enm-hero__facts > div {
  padding: 20px 20px 28px 0;
}

.enm-hero__facts > div + div {
  padding-left: 20px;
  border-left: 1px solid var(--on-dark-line);
}

.enm-hero__facts dt {
  font: 400 clamp(36px, 3.4vw, 54px) / 1 var(--font-display);
  letter-spacing: 0.01em;
  color: #fff;
}

.enm-hero__facts dd {
  margin: 6px 0 0;
  font: 600 12px/1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-subtle);
}

/* sticky section nav */
.enm-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: rgb(255 255 255 / 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.enm-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
}

.enm-nav__list {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.enm-nav__list::-webkit-scrollbar {
  display: none;
}

.enm-nav__list a {
  display: block;
  padding: 11px 14px;
  border-radius: var(--radius);
  font: 600 15px/1 var(--font-body);
  white-space: nowrap;
  color: var(--ink-muted) !important;
  text-decoration: none !important;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.enm-nav__list a:hover {
  background: var(--surface);
  color: var(--ink) !important;
}

.enm-nav__list a[aria-current] {
  background: var(--brand-soft);
  color: var(--brand) !important;
}

.enm-nav__cta {
  flex: none;
}

/* master plan */
.enm-master__box {
  padding: clamp(16px, 2.4vw, 32px);
  border-radius: var(--radius);
  background: var(--surface);
}

.enm-lot {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: start;
  gap: clamp(20px, 3vw, 44px);
  margin-top: 20px;
}

.enm-lot__plan {
  margin: 0;
  padding: clamp(12px, 2vw, 24px);
  border-radius: var(--radius);
  background: #fff;
}

.enm-lot__plan img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: contain;
  border-radius: 0;
}

.enm-lot__plan figcaption {
  margin-top: 12px;
  font: 500 13px/1.4 var(--font-body);
  color: var(--ink-subtle);
}

.enm-lot__specs {
  margin: 0;
}

.enm-lot__specs dd small {
  margin-left: 6px;
  font: 700 12px/1 var(--font-body);
  letter-spacing: 0.06em;
  color: var(--ink-subtle);
}

/* advantages */
.enm-adv .enm-h2 {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.enm-adv__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(230px, auto);
  gap: 16px;
}

.enm-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.enm-tile b {
  font: 400 28px/1 var(--font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.enm-tile span {
  max-width: 320px;
  font: 400 14.5px/1.5 var(--font-body);
  color: var(--ink-muted);
}

.enm-tile .enm-tile__big {
  margin-bottom: auto;
  font-size: clamp(64px, 6vw, 96px);
  line-height: 0.85;
  color: var(--brand);
}

.enm-tile--dark {
  background: var(--dark);
}

.enm-tile--dark b {
  color: #fff;
}

.enm-tile--dark span {
  color: var(--on-dark-muted);
}

.enm-tile--dark .enm-tile__big {
  color: var(--brand-on-dark);
}

.enm-tile--brand {
  background: var(--brand);
}

.enm-tile--brand b {
  color: #fff;
}

.enm-tile--brand span {
  color: rgb(255 255 255 / 0.84);
}

.enm-tile--photo {
  padding: 0;
}

.enm-tile--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.8s var(--ease);
}

.enm-tile--photo:hover img {
  transform: scale(1.03);
}

.enm-tile--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 12 16 / 0) 38%, rgb(10 12 16 / 0.74));
}

.enm-tile--photo figcaption {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  padding: 24px;
}

.enm-tile--photo b {
  color: #fff;
}

.enm-tile--photo span {
  color: rgb(255 255 255 / 0.84);
}

.enm-tile.is-big {
  grid-column: span 2;
  grid-row: span 2;
}

.enm-tile.is-wide {
  grid-column: span 2;
}

/* apartment plans */
.enm-plans {
  background: var(--surface);
}

.enm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-bottom: 24px;
}

.enm-filters__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.enm-filters__label {
  margin-right: 6px;
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.enm-chip {
  flex: none;
  width: auto;
  height: 38px;
  white-space: nowrap;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: #fff;
  font: 600 14px/1 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.enm-chip:hover {
  border-color: var(--ink-faint);
}

.enm-chip[aria-pressed='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.enm-plans__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eplan-card {
  margin: 0;
  list-style: none;
}

.eplan-card__btn {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 12px;
  width: 100%;
  height: 100%;
  padding: 16px 18px 20px;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: box-shadow var(--dur) var(--ease);
}

.eplan-card__btn:hover {
  box-shadow: var(--shadow-float);
}

.eplan-card__media {
  grid-column: 1 / -1;
  display: block;
  aspect-ratio: 1;
  margin: 18px 0 14px;
}

.eplan-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  transition: transform 0.6s var(--ease);
}

.eplan-card__btn:hover .eplan-card__media img {
  transform: scale(1.04);
}

.eplan-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--surface);
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.eplan-card__type {
  font: 400 26px/1 var(--font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.eplan-card__type small,
.eplan__title small {
  margin-left: 4px;
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 4px;
  color: var(--brand);
}

.eplan-card__area {
  font: 700 16px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
}

.enm-plans__empty {
  margin: 0;
  padding: 48px 0;
  text-align: center;
  color: var(--ink-subtle);
}

/* plan dialog */
.eplan {
  width: min(1100px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  overflow: hidden;
}

.eplan::backdrop {
  background: rgb(10 12 16 / 0.72);
}

.eplan[open] {
  animation: eplan-in 0.24s var(--ease);
}

@keyframes eplan-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.eplan__box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  max-height: calc(100dvh - 32px);
  overflow: auto;
}

.eplan__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.eplan__close svg {
  width: 20px;
  height: 20px;
}

.eplan__close:hover {
  background: var(--surface-strong);
}

.eplan__stage {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--surface);
}

.eplan__stage .enm-tabs {
  align-self: flex-start;
}

.eplan__view {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 12px;
}

.eplan__view--2d {
  border-radius: 6px;
  background: #fff;
}

.eplan__view img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(68dvh, 620px);
  object-fit: contain;
  border-radius: 0;
}

.eplan__info {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
}

.eplan__kicker {
  margin: 0 56px 10px 0;
  font: 700 12px/1.3 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}

.eplan__title {
  margin: 0;
  font: 400 52px/0.95 var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
}

.eplan__title small {
  vertical-align: 16px;
}

.eplan__area {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font: 400 34px/1 var(--font-display);
}

.eplan__area span {
  font: 600 13px/1 var(--font-body);
  color: var(--ink-subtle);
}

.eplan__rooms {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.eplan__rooms li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font: 500 15px/1.3 var(--font-body);
  color: var(--ink-muted);
  list-style: none;
}

.eplan__rooms i {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  font: 700 12px/1 var(--font-body);
  font-style: normal;
  color: var(--ink);
}

.eplan__rooms b {
  margin-left: auto;
  font: 700 15px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.eplan__cta {
  margin-top: 24px;
}

.eplan__note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-subtle);
}

/* payment terms */
.enm-pay__box {
  display: grid;
  gap: clamp(28px, 3vw, 44px);
  padding: clamp(28px, 4vw, 64px);
  border-radius: var(--radius);
  background: var(--dark);
  color: #fff;
}

.enm-pay__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: end;
  gap: 12px 40px;
}

.enm-pay__head .enm-h2 {
  color: #fff;
}

.enm-pay__head p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-dark-muted);
}

.enm-pay__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.enm-pay__list li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 0 0 1px var(--on-dark-line);
  list-style: none;
}

.enm-pay__list h3 {
  margin: 0;
  font: 400 clamp(28px, 2.4vw, 36px) / 1 var(--font-display);
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}

.enm-pay__list p {
  margin: 0;
  font: 400 15px/1.6 var(--font-body);
  color: var(--on-dark-muted);
}

.enm-pay__list .e-link {
  align-self: flex-start;
  margin-top: auto;
}

.enm-pay__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 28px;
  border-top: 1px solid var(--on-dark-line);
}

.enm-pay__foot p {
  margin: 0;
  font-size: 14px;
  color: var(--on-dark-subtle);
}

.enm-pay__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.enm-pay__ctas .e-btn > svg {
  width: 18px;
  height: 18px;
}

/* gallery */
.enm-gallery .enm-tabs {
  background: var(--surface);
}

.eglry {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(160px, 15vw, 230px);
  grid-auto-flow: dense;
  gap: 12px;
}

.eglry__item {
  position: relative;
  display: block;
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.eglry__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.6s var(--ease);
}

.eglry__item:hover img {
  transform: scale(1.04);
}

.eglry__item.is-big {
  grid-column: span 2;
  grid-row: span 2;
}

.eglry__item.is-wide {
  grid-column: span 2;
}

.eglry--inside {
  grid-auto-rows: auto;
}

.eglry--inside .eglry__item {
  aspect-ratio: 3 / 4;
}

.eglry__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  color: var(--ink-subtle);
}

/* location */
.enm-loc__coords {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.enm-loc__coords > span:first-child {
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.enm-loc__coords b {
  font: 400 28px/1 var(--font-display);
  letter-spacing: 0.02em;
  color: var(--ink);
}

.enm-loc__maps {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 10px;
}

.enm-loc__map {
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.enm-loc__inner {
  position: relative;
}

.enm-loc__inner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.enm-loc__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--brand);
  font: 700 14px/1 var(--font-body);
  color: #fff;
  box-shadow: var(--shadow-float);
  transform: translate(-50%, -50%);
}

.enm-loc__swipe {
  display: none;
}

.enm-loc__legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.enm-loc__legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 15px/1.3 var(--font-body);
  color: var(--ink);
  list-style: none;
}

.enm-loc__legend i {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);
  font: 700 12px/1 var(--font-body);
  font-style: normal;
  color: #fff;
}

.enm-loc__near {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-muted);
}

.enm-loc__near span {
  font-weight: 700;
  color: var(--ink);
}

/* closing call to action */
.enm-cta__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
}

.enm-cta__box .enm-h2 {
  color: #fff;
}

.enm-cta__box p {
  max-width: 560px;
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.86);
}

.enm-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.enm-cta__phone {
  display: grid;
  gap: 6px;
  font: 400 34px/1 var(--font-display);
  letter-spacing: 0.01em;
  color: #fff !important;
  text-decoration: none !important;
}

.enm-cta__phone small {
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.72);
}

@media (max-width: 1199px) {
  .enm-nav__cta {
    display: none;
  }
  .enm-plans__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .enm-head,
  .enm-head--row,
  .enm-pay__head {
    grid-template-columns: 1fr;
  }
  .enm-lot {
    grid-template-columns: 1fr;
  }
  .enm-adv__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .enm-pay__list {
    grid-template-columns: 1fr;
  }
  .eglry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 180px;
  }
  .enm-hero__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .enm-hero__facts > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .enm-hero__facts > div:nth-child(n + 3) {
    border-top: 1px solid var(--on-dark-line);
  }
  .enm-loc__legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .eplan {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .eplan__box {
    grid-template-columns: 1fr;
    max-height: 100dvh;
  }
  .eplan__stage {
    padding: 16px;
  }
  .eplan__view img {
    max-height: 46dvh;
  }
  .eplan__info {
    padding: 24px 20px 28px;
  }
  .eplan__kicker {
    margin-right: 0;
  }
  .eplan__close,
  .eplan__close:focus {
    background: #fff;
  }
}

@media (max-width: 767px) {
  .enm-hero__ctas .e-btn,
  .enm-cta__actions .e-btn,
  .enm-pay__ctas .e-btn {
    width: 100%;
  }
  .enm-filters {
    gap: 14px;
  }
  .enm-filters__label {
    flex-basis: 100%;
    margin: 0 0 2px;
  }
  .enm-chip {
    padding: 0 13px;
  }
  .enm-plans__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .eplan-card__btn {
    grid-template-columns: 1fr;
    padding: 12px 12px 14px;
  }
  .eplan-card__media {
    margin: 22px 0 10px;
  }
  .eplan-card__type {
    font-size: 22px;
  }
  .enm-adv__grid {
    grid-template-columns: 1fr;
  }
  .enm-tile.is-big,
  .enm-tile.is-wide {
    grid-column: auto;
    grid-row: auto;
  }
  .enm-tile.is-big {
    min-height: 340px;
  }
  .eglry--outside .eglry__item.is-big {
    grid-row: span 1;
  }
  .enm-loc__map {
    overflow-x: auto;
  }
  .enm-loc__inner {
    width: 760px;
  }
  .enm-loc__swipe {
    display: block;
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--ink-subtle);
  }
  .enm-pay__list li {
    padding: 22px;
  }
}

/* ── Project page (the projects of the admin panel): Nurli Makon's parts, plus rich text, blocks, video, map ── */

.epd-hero {
  min-height: clamp(600px, 86svh, 840px);
}

.epd-hero .enm-hero__img {
  object-position: 50% 50%;
}

/* project names run longer than "Nurli Makon" ("“Nurafşon Palace” noturar") */
.epd-hero .enm-hero__title {
  font-size: clamp(56px, 7.4vw, 120px);
  line-height: 0.9;
  text-wrap: balance;
}

.epd-hero__address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 560px;
  margin: 18px 0 0;
  font: 500 16px/1.5 var(--font-body);
  color: var(--on-dark-muted);
}

.epd-hero__address svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--brand-on-dark);
}

.enm-hero__facts dt small {
  font-size: 0.5em;
  letter-spacing: 0.02em;
}

/* about: the text, and the facts in a card that stays in view beside it */
.epd-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: start;
  gap: clamp(32px, 5vw, 80px);
}

.epd-about__main .enm-h2 {
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

/* admin rich text: TinyMCE paragraphs, lists, and the one-column tables the old site used as lists */
.eprose {
  font: 400 16px/1.7 var(--font-body);
  color: var(--ink-muted);
  overflow-wrap: break-word;
}

.eprose > :first-child {
  margin-top: 0;
}

.eprose :is(p, ul, ol, table) {
  margin: 0 0 16px;
}

.eprose :is(h2, h3, h4, h5) {
  margin: 28px 0 12px;
  font: 700 18px/1.35 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.eprose :is(strong, b) {
  font-weight: 700;
  color: var(--ink);
}

.eprose ul {
  padding: 0;
  list-style: none;
}

.eprose ul > li {
  position: relative;
  padding: 5px 0 5px 22px;
}

.eprose ul > li::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand);
}

.eprose ol {
  padding-left: 22px;
}

.eprose table {
  width: 100% !important;
  border: 0;
  border-collapse: collapse;
}

.eprose :is(td, th) {
  width: auto !important;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}

.eprose tr:last-child > :is(td, th) {
  border-bottom: 0;
}

.eprose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.eprose a {
  color: var(--brand) !important;
}

/* a long text: cut at about two screens until asked for in full (erect.js; without script it shows whole) */
.js-ready .eprose[data-clamp]:not(.is-open) {
  max-height: 460px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 62%, transparent);
  mask-image: linear-gradient(#000 62%, transparent);
}

.epd-more {
  margin: 20px 0 0;
  padding: 0 0 6px;
  border: 0;
  background: none;
  cursor: pointer;
}

.epd-more svg {
  transition: transform var(--dur) var(--ease);
}

.epd-more[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.epd-spec {
  position: sticky;
  top: calc(var(--header-h) + 88px);
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--radius);
  background: var(--surface);
}

.epd-spec__kicker {
  margin: 0 0 8px;
  font: 700 12px/1.3 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}

.epd-spec__title {
  margin: 0 0 18px;
  font: 400 clamp(30px, 2.6vw, 40px) / 1 var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
}

.epd-spec__list {
  margin: 0 0 24px;
}

.epd-spec__list > div {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 4px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.epd-spec__list dt {
  font: 600 13px/1.45 var(--font-body);
  color: var(--ink-subtle);
}

.epd-spec__list dd {
  margin: 0;
  font: 600 14.5px/1.45 var(--font-body);
  color: var(--ink);
}

.epd-spec__cta {
  width: 100%;
}

.epd-spec__phones {
  display: grid;
  justify-items: start;
  gap: 4px;
  margin-top: 22px;
}

.epd-spec__phones small {
  margin-bottom: 4px;
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.epd-spec__phones a {
  font: 400 30px/1.05 var(--font-display);
  letter-spacing: 0.01em;
  color: var(--ink) !important;
  text-decoration: none !important;
}

.epd-spec__phones a:hover {
  color: var(--brand) !important;
}

/* what every ERECT building has */
.epd-feats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: clamp(48px, 5vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}

.epd-feat {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: 700 12.5px/1.4 var(--font-body);
  letter-spacing: 0.06em;
  color: var(--ink);
}

.epd-feat svg {
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--brand);
}

/* photos: one big and four or eight more; the rest open in the viewer from the last one */
.epd-photos__grid {
  display: grid;
  gap: 12px;
}

.epd-photos__grid--mosaic {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 15vw, 230px);
}

.epd-photos__grid--row {
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
}

.epd-photos__grid--row .epd-photo {
  aspect-ratio: 4 / 3;
}

.epd-photo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  cursor: zoom-in;
}

.epd-photo.is-big {
  grid-column: span 2;
  grid-row: span 2;
}

.epd-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.6s var(--ease);
}

.epd-photo:hover img {
  transform: scale(1.04);
}

.epd-photo__more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgb(14 16 19 / 0.58);
  font: 400 clamp(22px, 2vw, 30px) / 1.05 var(--font-display);
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

/* plans: Nurli Makon's cards, as links to the full image; plan sheets are landscape */
.epd-plans .eplan-card__media {
  aspect-ratio: 7 / 5;
}

.epd-plans:not(.is-all) .eplan-card.is-extra {
  display: none;
}

/* one or two plans: shown large */
.epd-plans__few {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.epd-all {
  display: flex;
  margin: 28px auto 0;
}

.epd-plan {
  color: var(--ink) !important;
  text-decoration: none !important;
  cursor: zoom-in;
}

/* blocks */
.epd-blocks__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.epd-block {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.epd-block__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
}

.epd-block__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  transition: transform 0.6s var(--ease);
}

.epd-block__media:hover img {
  transform: scale(1.03);
}

.epd-block__zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.92);
  color: var(--ink);
}

.epd-block__zoom svg {
  width: 18px;
  height: 18px;
}

.epd-block__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 18px 20px 20px;
}

.epd-block__name {
  margin: 0;
  font: 400 26px/1 var(--font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.epd-block__specs {
  display: flex;
  gap: 20px;
  margin: 0;
}

.epd-block__specs div {
  display: grid;
  gap: 3px;
}

.epd-block__specs dt {
  font: 600 11px/1.2 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.epd-block__specs dd {
  margin: 0;
  font: 700 16px/1.2 var(--font-body);
  color: var(--ink);
}

/* the texts in tabs */
.epd-details__box {
  padding: clamp(16px, 2.4vw, 32px);
  border-radius: var(--radius);
  background: var(--surface);
}

.epd-details__tabs {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.epd-details__tabs::-webkit-scrollbar {
  display: none;
}

.epd-details__panel {
  margin-top: clamp(14px, 1.8vw, 20px);
  padding: clamp(20px, 3vw, 40px);
  border-radius: var(--radius);
  background: #fff;
}

/* lines a reader can follow */
.epd-details__panel > * {
  max-width: 880px;
}

/* video: YouTube's still until it is played */
.epd-video__frame {
  position: relative;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: var(--dark);
  overflow: hidden;
}

.epd-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.epd-video__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--dark);
  cursor: pointer;
}

.epd-video__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  opacity: 0.78;
  transition: opacity var(--dur) var(--ease), transform 0.6s var(--ease);
}

.epd-video__poster:hover img {
  opacity: 0.92;
  transform: scale(1.02);
}

.epd-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(64px, 7vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 10px rgb(193 18 31 / 0.25);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease);
}

.epd-video__play svg {
  width: 40%;
  height: 40%;
  margin-left: 6%;
  fill: #fff;
}

.epd-video__poster:hover .epd-video__play {
  transform: translate(-50%, -50%) scale(1.06);
}

.epd-video__label {
  position: absolute;
  bottom: 20px;
  left: 24px;
  font: 700 13px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

/* location: the address and the map side by side */
.epd-loc__box {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.epd-loc__info {
  padding: clamp(28px, 3.4vw, 48px);
}

.epd-loc__info .enm-h2 {
  margin-bottom: 24px;
}

.epd-loc__address {
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
  font: 600 17px/1.5 var(--font-body);
  color: var(--ink);
}

.epd-loc__address svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--brand);
}

.epd-loc__landmark {
  display: grid;
  gap: 6px;
  margin: 0 0 28px;
  font: 500 15px/1.5 var(--font-body);
  color: var(--ink-muted);
}

.epd-loc__landmark span {
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.epd-loc__maps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.epd-loc__map {
  min-height: 440px;
  background: #e6e7ea;
}

.epd-loc__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 440px;
  border: 0;
}

:is(.epd-photo, .epd-block__media, .epd-video__poster, .epd-more):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

@media (max-width: 1199px) {
  .epd-feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .epd-blocks__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .epd-about__grid {
    grid-template-columns: 1fr;
  }
  .epd-spec {
    position: static;
  }
  .epd-photos__grid--mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 180px;
  }
  .epd-loc__box {
    grid-template-columns: 1fr;
  }
  .epd-loc__map,
  .epd-loc__map iframe {
    min-height: 340px;
  }
}

@media (max-width: 767px) {
  .epd-hero .enm-hero__title {
    font-size: clamp(46px, 13vw, 64px);
  }
  .epd-feats {
    gap: 10px;
  }
  .epd-feat {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 16px;
    font-size: 11.5px;
  }
  .epd-feat svg {
    width: 28px;
    height: 28px;
  }
  .epd-photos__grid--mosaic {
    grid-auto-rows: 130px;
    gap: 8px;
  }
  .epd-photos__grid--row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .epd-plans__few {
    grid-template-columns: 1fr;
  }
  /* every tab in sight: they wrap instead of scrolling away */
  .epd-details__tabs {
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
  }
  .epd-details__tabs .enm-tab {
    flex: 1 1 auto;
    height: auto;
    min-height: 38px;
    padding: 10px 12px;
    white-space: normal;
    font-size: 11.5px;
    line-height: 1.25;
  }
  /* the blocks: a row to swipe */
  .epd-blocks__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 10px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .epd-blocks__grid::-webkit-scrollbar {
    display: none;
  }
  .epd-block {
    scroll-snap-align: start;
  }
  .epd-hero .enm-hero__facts dt {
    font-size: 28px;
  }
  .eprose {
    font-size: 15.5px;
  }
  .epd-video__label {
    display: none;
  }
  .epd-loc__maps .e-btn {
    width: 100%;
  }
}

/* ── Request block (home): sales contacts and the Bitrix24 form ───────── */

.ereq__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  align-items: center;
  gap: clamp(32px, 5vw, 88px);
  padding: clamp(28px, 4.6vw, 72px);
  border-radius: var(--radius);
  background-color: var(--dark);
  /* a faint drawing grid: the master-plan motif of the site */
  background-image:
    linear-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* the grid shows at the top left and fades out towards the form */
.ereq__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(130% 130% at 0% 0%, rgb(18 20 24 / 0) 10%, rgb(18 20 24 / 0.7) 58%, var(--dark) 88%);
}

.ereq__title {
  margin: 0;
  font: 400 clamp(44px, 4.8vw, 76px) / 0.9 var(--font-display);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff !important;
  text-wrap: balance;
}

.ereq__lead {
  max-width: 500px;
  margin: 22px 0 0;
  font: 400 16px/1.65 var(--font-body);
  color: var(--on-dark-muted);
  text-wrap: pretty;
}

.ereq__contacts {
  max-width: 560px;
  margin: 36px 0 0;
  border-top: 1px solid var(--on-dark-line);
}

.ereq__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--on-dark-line);
}

.ereq__row dt {
  font: 700 11px/1.3 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-subtle);
}

.ereq__row dd {
  margin: 0;
  font: 500 15px/1.5 var(--font-body);
  color: #fff;
}

.ereq__row--phone dd {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.ereq__row--phone dd a {
  font: 400 clamp(30px, 2.6vw, 40px) / 1 var(--font-display);
  letter-spacing: 0.02em;
  color: #fff !important;
  text-decoration: none !important;
  transition: color var(--dur) var(--ease);
}

.ereq__row--phone dd a:hover {
  color: var(--brand-on-dark) !important;
}

.ereq__card {
  padding: clamp(24px, 2.8vw, 40px);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.6);
}

.ereq__card-title {
  margin: 0;
  font: 400 clamp(32px, 2.8vw, 44px) / 0.95 var(--font-display);
  text-transform: uppercase;
  color: var(--ink) !important;
}

.ereq__card-text {
  margin: 10px 0 24px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
}

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

@media (max-width: 599px) {
  .ereq__panel {
    padding: 28px 18px 18px;
  }
  .ereq__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .ereq__card {
    padding: 22px 18px;
  }
}

/* ── Bitrix24 forms: the leads go straight to the client's Bitrix24 ───── */

/* The form's design settings arrive as variables on #b24-<id> (an id selector); the site's values win by !important */
.b24-form > [id^='b24-'] {
  --b24-primary-color: var(--brand) !important;
  --b24-primary-hover-color: var(--brand-hover) !important;
  --b24-primary-text-color: #fff !important;
  --b24-text-color: var(--ink) !important;
  --b24-background-color: #fff !important;
  --b24-field-border-color: transparent !important;
  --b24-field-background-color: var(--surface) !important;
  --b24-field-focus-background-color: #fff !important;
  --b24-font-family: var(--font-body) !important;
}

/* Bitrix's stylesheet loads after this one, so these rules carry an extra `body` */
body .b24-form {
  text-align: left;
}

body .b24-form .b24-form-wrapper {
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body .b24-form .b24-form-wrapper:not(.b24-from-state-on) {
  min-height: 0;
}

body .b24-form .b24-form-header {
  padding: 0 0 18px;
  border: 0;
  text-align: left;
}

body .b24-form .b24-form-header-title {
  margin: 0;
  font: 400 34px/1 var(--font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* where the page gives the form its own title */
.ereq .b24-form-header,
.emodal .b24-form-header,
.themesflat-contact-form .b24-form-header {
  display: none;
}

body .b24-form .b24-form-padding-side,
body .b24-form .b24-form-content {
  padding-left: 0;
  padding-right: 0;
}

body .b24-form .b24-form-content {
  padding-top: 0;
  padding-bottom: 0;
}

body .b24-form .b24-form-field {
  margin-bottom: 12px;
}

body .b24-form .b24-form-control-container {
  margin-bottom: 0;
}

/* text fields: #f4f4f4, 8px corners, the label floats up once the field is in use */
body .b24-form .b24-form-control-string .b24-form-control,
body .b24-form .b24-form-control-list .b24-form-control,
body .b24-form .b24-form-control-text .b24-form-control {
  height: 60px;
  padding: 26px 18px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background-color: var(--surface);
  font: 500 16px/1.25 var(--font-body);
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}

body .b24-form .b24-form-control-text .b24-form-control {
  height: 120px;
}

body .b24-form .b24-form-control-string .b24-form-control:hover,
body .b24-form .b24-form-control-text .b24-form-control:hover {
  border-color: #dcdde1;
}

body .b24-form .b24-form-control-string .b24-form-control:focus:not([readonly]),
body .b24-form .b24-form-control-list .b24-form-control:focus:not([readonly]),
body .b24-form .b24-form-control-text .b24-form-control:focus:not([readonly]) {
  border-color: var(--ink);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgb(21 23 28 / 0.06);
}

body .b24-form .b24-form-control-string .b24-form-control-label,
body .b24-form .b24-form-control-list .b24-form-control-label,
body .b24-form .b24-form-control-text .b24-form-control-label {
  /* centred on the 60px field, not on its container (the phone field's is taller) */
  top: 30px;
  left: 0;
  right: 0;
  padding: 0 18px;
  transform: translateY(-50%);
  font: 500 15px/1.2 var(--font-body);
  text-align: left;
  color: var(--ink-subtle);
  opacity: 1;
}

body .b24-form .b24-form-control-not-empty + .b24-form-control-label,
body .b24-form .b24-form-control:focus + .b24-form-control-label {
  top: 10px;
  transform: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body .b24-form .b24-form-control-icon-after .b24-form-control,
body .b24-form .b24-form-control-icon-after .b24-form-control-label {
  padding-right: 44px;
}

body .b24-form .b24-form-control-alert .b24-form-control {
  border-color: var(--brand);
}

body .b24-form .b24-form-control-alert-message {
  left: 14px;
  border-radius: 0 6px 6px 6px;
  background: var(--brand);
  font: 600 12px/1.4 var(--font-body);
}

body .b24-form .b24-form-control-alert-message::after {
  border-color: transparent transparent var(--brand) var(--brand);
}

/* the button: the site's red, the label and its arrow box in the middle */
body .b24-form .b24-form-btn-container {
  margin: 4px 0 0;
}

body .b24-form .b24-form-btn-block {
  padding: 0;
}

body .b24-form .b24-form-btn-block .b24-form-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 60px;
  padding: 7px 24px;
  border-radius: var(--radius);
  box-shadow: none;
  font: 700 14px/1.2 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color var(--dur) var(--ease);
}

body .b24-form .b24-form-btn-block .b24-form-btn::after {
  content: '';
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform var(--dur) var(--ease);
}

body .b24-form .b24-form-btn-block .b24-form-btn:hover::after {
  transform: translateX(3px);
}

/* no "report abuse" line under the forms */
body .b24-form .b24-form-sign {
  display: none !important;
}

/* after sending: the site's grey and red instead of Bitrix's lime green */
body .b24-form .b24-form-state-container .b24-form-state,
body .b24-form .b24-form-state-container .b24-form-loader {
  border-radius: var(--radius);
}

body .b24-form .b24-form-state-container .b24-form-success {
  background-color: var(--surface);
}

body .b24-form .b24-form-success-icon {
  width: 72px;
  height: 72px;
  margin: 0 0 18px;
  border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 32px no-repeat;
}

body .b24-form .b24-form-state-text {
  font: 500 17px/1.45 var(--font-body);
}

body .b24-form .b24-form-success .b24-form-state-text {
  color: var(--ink);
  opacity: 1;
}

body .b24-form .b24-form-state-container .b24-form-error {
  background-color: var(--brand);
}

/* ── Splash: a visit opens with the logo going up ─── */

.esplash {
  display: none;
}

.has-splash .esplash {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0e1013;
  /* it lifts like a curtain, its red hem trailing */
  transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
}

/* nothing scrolls under the splash */
html.has-splash:not(.splash-leaving) {
  overflow: hidden;
}

/* a page Chrome prepared before showing it (prerendered, or a tab opened in the background) keeps the intro at its
   start until it is seen */
.splash-hold .esplash,
.splash-hold .esplash *,
.splash-hold .esplash::before,
.splash-hold .esplash::after {
  animation-play-state: paused !important;
}

/* a drawing grid, fading out from the centre */
.esplash::before {
  content: '';
  position: absolute;
  inset: -64px;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.055) 1px, transparent 1px);
  background-position: center;
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
  mask-image: radial-gradient(closest-side, #000, transparent);
  opacity: 0;
  animation: esplash-grid 1.6s var(--ease) forwards;
}

/* the loading line along the bottom edge becomes the curtain's hem */
.esplash::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  animation: esplash-load 1.7s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

.esplash__stage {
  position: relative;
  width: min(460px, 72vw);
  padding: clamp(26px, 4vw, 44px) clamp(30px, 4.6vw, 52px);
  transition:
    transform 1s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.6s var(--ease);
}

.esplash__logo {
  position: relative;
  display: block;
  aspect-ratio: 1500 / 611;
}

/* every part of the logo is a layer over the whole box (logo.ts): it only moves and fades, so the intro runs on the
   compositor and stays smooth while the page loads underneath */
.esplash__logo svg,
.esplash__mark,
.esplash__word {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.esplash__logo svg {
  overflow: visible;
}

/* viewfinder corners close in on the logo */
.esplash__corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 0 solid rgb(255 255 255 / 0.55);
  opacity: 0;
  animation: esplash-corner 0.9s cubic-bezier(0.22, 0.68, 0.3, 1) 0.1s forwards;
}

.esplash__corner--tl {
  --dx: -48px;
  --dy: -36px;
  top: 0;
  left: 0;
  border-top-width: 2px;
  border-left-width: 2px;
}

.esplash__corner--tr {
  --dx: 48px;
  --dy: -36px;
  top: 0;
  right: 0;
  border-top-width: 2px;
  border-right-width: 2px;
}

.esplash__corner--bl {
  --dx: -48px;
  --dy: 36px;
  bottom: 0;
  left: 0;
  border-bottom-width: 2px;
  border-left-width: 2px;
}

.esplash__corner--br {
  --dx: 48px;
  --dy: 36px;
  right: 0;
  bottom: 0;
  border-right-width: 2px;
  border-bottom-width: 2px;
}

/* the foundation is laid, then the four towers of the mark go up out of the ground, the main one first */
.esplash__ground {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 20.1%;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  animation:
    esplash-place 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.05s forwards,
    esplash-out 0.4s var(--ease) 1.25s forwards;
}

.esplash__mark {
  overflow: hidden;
}

.esplash__mark polygon {
  fill: var(--brand);
}

.esplash__mark svg {
  transform: translateY(var(--h));
  animation: esplash-place 0.9s cubic-bezier(0.22, 0.68, 0.3, 1) var(--d) forwards;
}

.esplash__mark svg:nth-child(1) {
  --d: 0.3s;
}

.esplash__mark svg:nth-child(2) {
  --d: 0.42s;
}

.esplash__mark svg:nth-child(3) {
  --d: 0.15s;
}

.esplash__mark svg:nth-child(4) {
  --d: 0.5s;
}

/* the letters rise from behind their baseline, one by one */
.esplash__word {
  clip-path: inset(0 0 12.9% 0);
}

.esplash__word path {
  fill: #fff;
}

.esplash__word svg {
  transform: translateY(38%);
  animation: esplash-place 0.8s cubic-bezier(0.22, 0.68, 0.3, 1) calc(0.55s + var(--i) * 0.07s) forwards;
}

.esplash__tagline path {
  fill: rgb(255 255 255 / 0.62);
}

.esplash__tagline {
  opacity: 0;
  animation: esplash-fade-up 0.7s var(--ease) 1s forwards;
}

/* leaving: the line completes, the logo drifts up and fades, the curtain lifts */
.splash-leaving .esplash {
  transform: translateY(-100%);
  transition-delay: 0.25s;
}

.splash-leaving .esplash::after {
  animation: esplash-load-end 0.35s var(--ease) forwards;
}

.splash-leaving .esplash__stage {
  opacity: 0;
  transform: translateY(-14vh);
  transition-delay: 0.2s;
}

@keyframes esplash-grid {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes esplash-load {
  to {
    transform: scaleX(0.82);
  }
}

@keyframes esplash-load-end {
  from {
    transform: scaleX(0.82);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes esplash-corner {
  from {
    opacity: 0;
    transform: translate(var(--dx), var(--dy));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* into place: the towers, the letters and the foundation line */
@keyframes esplash-place {
  to {
    transform: none;
  }
}

@keyframes esplash-out {
  to {
    opacity: 0;
  }
}

@keyframes esplash-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Entrance: as the curtain lifts, the header and the first screen build up ─── */

.has-splash :is(.ehero__title > span, .ehero__lead, .ehero__facts, .ehero__ctas, .ehero__frame, .ehero__bar, .enm-hero__body > *, .enm-hero__facts, .featured-title .breadcrumb-trail, .e-page) {
  opacity: 0;
  transform: translateY(32px);
}

/* the header comes down instead (on its own: :is() takes its strongest selector's weight) */
.has-splash .eh__bar {
  opacity: 0;
  transform: translateY(-14px);
}

/* the photo is wiped in from the right: its slide comes in while the image inside goes back the same way, so the
   image stands still and only the edge travels (transforms only, so it stays smooth while the page settles) */
.has-splash .ehero__slide.is-active {
  overflow: hidden;
  transform: translateX(100%);
}

.has-splash .ehero__slide.is-active img {
  translate: -100% 0;
}

/* the Nurli Makon aerial settles into place */
.has-splash .enm-hero__img {
  transform: scale(1.1);
}

.splash-leaving :is(.eh__bar, .ehero__title > span, .ehero__lead, .ehero__facts, .ehero__ctas, .ehero__frame, .ehero__bar, .enm-hero__body > *, .enm-hero__facts, .featured-title .breadcrumb-trail, .e-page) {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.9s var(--ease) calc(0.55s + var(--e, 0s)),
    transform 1.1s cubic-bezier(0.22, 0.68, 0.3, 1) calc(0.55s + var(--e, 0s));
}

/* the slider's own fade and slow zoom keep their transitions */
.splash-leaving .ehero__slide.is-active {
  transform: none;
  transition:
    transform 1.3s cubic-bezier(0.76, 0, 0.24, 1) 0.45s,
    opacity 1s var(--ease);
}

.splash-leaving .ehero__slide.is-active img {
  translate: none;
  transition:
    translate 1.3s cubic-bezier(0.76, 0, 0.24, 1) 0.45s,
    transform 7s linear;
}

.splash-leaving .enm-hero__img {
  transform: none;
  transition: transform 2s cubic-bezier(0.22, 0.68, 0.3, 1) 0.25s;
}

.e-page {
  --e: 0.12s;
}

:is(.ehero__frame, .ehero__bar) {
  --e: 0.6s;
}

.ehero__title > span:nth-child(2) {
  --e: 0.08s;
}

.ehero__lead {
  --e: 0.18s;
}

.ehero__facts {
  --e: 0.26s;
}

.ehero__ctas {
  --e: 0.34s;
}

.eh__bar {
  --e: 0.42s;
}

.enm-hero__body > :nth-child(2) {
  --e: 0.05s;
}

.enm-hero__body > :nth-child(3) {
  --e: 0.1s;
}

.enm-hero__body > :nth-child(4) {
  --e: 0.15s;
}

.enm-hero__body > :nth-child(5) {
  --e: 0.2s;
}

.enm-hero__body > :nth-child(6) {
  --e: 0.25s;
}

.enm-hero__body > :nth-child(7) {
  --e: 0.3s;
}

.enm-hero__facts {
  --e: 0.36s;
}

/* reduced motion (splash-calm): nothing draws, rises or lifts; the logo simply stands there and the screen fades away
   over a page that is already in place */
.splash-calm .esplash *,
.splash-calm .esplash::before,
.splash-calm .esplash::after {
  animation: none !important;
}

.splash-calm .esplash__mark svg,
.splash-calm .esplash__word svg {
  transform: none;
}

.splash-calm .esplash::before,
.splash-calm .esplash__corner,
.splash-calm .esplash__tagline {
  opacity: 1;
  transform: none;
}

.splash-calm .esplash::after,
.splash-calm .esplash__ground {
  display: none;
}

.has-splash.splash-calm .esplash {
  transition: opacity 0.5s var(--ease);
}

.splash-leaving.splash-calm .esplash {
  opacity: 0;
  transform: none;
  transition-delay: 0s;
}

.splash-leaving.splash-calm .esplash__stage {
  opacity: 1;
  transform: none;
}

.splash-calm :is(.eh__bar, .ehero__title > span, .ehero__lead, .ehero__facts, .ehero__ctas, .ehero__frame, .ehero__bar, .enm-hero__body > *, .enm-hero__facts, .featured-title .breadcrumb-trail, .e-page, .ehero__slide.is-active, .enm-hero__img) {
  opacity: 1;
  transform: none;
  transition: none;
}

.splash-calm .ehero__slide.is-active img {
  translate: none;
}

/* ── Section heads: the title at the left, a lead or the section's controls at the right ── */

.ehead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: end;
  gap: 20px 48px;
  margin-bottom: clamp(32px, 3.6vw, 48px);
}

.ehead__title {
  margin: 0;
  font: 400 clamp(40px, 4.4vw, 68px) / 0.92 var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

.ehead__lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* a lead under the title (both in the head's first cell) rather than beside it */
:not(.ehead) > .ehead__title + .ehead__lead {
  max-width: 560px;
  margin-top: 20px;
}

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

/* ── Activities (home): ERECT's own production, a list that switches one large photo ── */

.eworks__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 80px);
}

.eworks__main {
  display: flex;
  flex-direction: column;
}

.eworks__list {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.eworks__item {
  border-bottom: 1px solid var(--line);
}

.eworks__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  color: var(--ink) !important;
  text-decoration: none !important;
}

.eworks__name {
  font: 400 clamp(24px, 2.2vw, 34px) / 1 var(--font-display);
  text-transform: uppercase;
  color: var(--ink-subtle);
  transition: color var(--dur) var(--ease), transform 0.3s var(--ease);
}

.eworks__go {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.eworks__go svg {
  width: 18px;
  height: 18px;
}

.eworks__item.is-active .eworks__name {
  color: var(--ink);
  transform: translateX(6px);
}

.eworks__item.is-active .eworks__go {
  background: var(--ink);
  color: #fff;
}

.eworks__link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

/* on desktop a row's photo and summary are in the stage */
.eworks__thumb,
.eworks__text {
  display: none;
}

/* the stage: one photo at a time behind the surveyor's corner marks, its summary on a card */
.eworks__stage {
  position: relative;
  min-height: 440px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  isolation: isolate;
}

.eworks__shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

.eworks__shot.is-active {
  z-index: 1;
  opacity: 1;
}

.eworks__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transform: scale(1.06);
  transition: transform 1.2s var(--ease);
}

.eworks__shot.is-active img {
  transform: none;
}

.eworks__caption {
  position: absolute;
  left: 44px;
  bottom: 44px;
  display: grid;
  gap: 10px;
  max-width: min(440px, calc(100% - 88px));
  padding: 22px 24px 24px;
  border-radius: var(--radius);
  background: #fff;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}

.eworks__shot.is-active .eworks__caption {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}

.eworks__caption b {
  font: 400 26px/1 var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
}

.eworks__caption span:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.eworks__frame {
  position: absolute;
  inset: 20px;
  z-index: 2;
  pointer-events: none;
}

.eworks__frame i {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 0 solid rgb(255 255 255 / 0.85);
}

.eworks__frame i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.eworks__frame i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.eworks__frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.eworks__frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

/* tablets and phones: no stage, each row is a card with its own photo and summary */
@media (max-width: 1023px) {
  .eworks__grid {
    grid-template-columns: 1fr;
  }
  .eworks__stage {
    display: none;
  }
  .eworks__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
    border-top: 0;
  }
  .eworks__item {
    border-bottom: 0;
  }
  .eworks__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius);
  }
  .eworks__text {
    display: block;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-muted);
  }
  .eworks__link {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 12px;
    padding: 16px 0 10px;
  }
  .eworks__name,
  .eworks__item.is-active .eworks__name {
    color: var(--ink);
    transform: none;
  }
  .eworks__go,
  .eworks__item.is-active .eworks__go {
    background: var(--surface);
    color: var(--ink);
  }
}

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

/* ── FAQ (home): the title stays at the left, the answers open at the right ── */

.efaq {
  interpolate-size: allow-keywords;
}

.efaq__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(40px, 6vw, 96px);
}

.efaq__side {
  position: sticky;
  top: calc(var(--header-h) + 32px);
}

.efaq__tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 32px;
  padding: 4px;
  border-radius: var(--radius);
  background: var(--surface);
}

.efaq__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: 700 12.5px/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.efaq__tab span {
  font-variant-numeric: tabular-nums;
  color: var(--ink-subtle);
}

.efaq__tab[aria-selected='true'] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(21 23 28 / 0.08), 0 4px 12px -6px rgb(21 23 28 / 0.14);
}

.efaq__tab[aria-selected='true'] span {
  color: var(--brand);
}

.efaq__item {
  border-top: 1px solid var(--line);
}

.efaq__item:last-child {
  border-bottom: 1px solid var(--line);
}

.efaq__item > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
}

.efaq__item > summary::-webkit-details-marker {
  display: none;
}

.efaq__item > summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

.efaq__q {
  font: 600 17px/1.4 var(--font-body);
  color: var(--ink);
  text-wrap: pretty;
}

/* a plus that becomes a minus */
.efaq__icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--surface);
  transition: background-color var(--dur) var(--ease);
}

.efaq__icon::before,
.efaq__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 1px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), background-color var(--dur) var(--ease);
}

.efaq__icon::after {
  transform: rotate(90deg);
}

.efaq__item > summary:hover .efaq__icon {
  background: var(--surface-strong);
}

.efaq__item[open] .efaq__icon,
.efaq__item[open] > summary:hover .efaq__icon {
  background: var(--ink);
}

.efaq__item[open] .efaq__icon::before,
.efaq__item[open] .efaq__icon::after {
  background: #fff;
}

.efaq__item[open] .efaq__icon::after {
  transform: rotate(0deg);
}

.efaq__a {
  max-width: 720px;
  padding: 0 56px 26px 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-muted);
}

.efaq__a :is(p, ul, ol) {
  margin: 0 0 10px;
}

.efaq__a :is(p, ul, ol):last-child {
  margin-bottom: 0;
}

/* the answer slides open where the browser can animate to height: auto */
.efaq__item::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size 0.35s var(--ease), content-visibility 0.35s allow-discrete;
}

.efaq__item[open]::details-content {
  block-size: auto;
}

@media (max-width: 1023px) {
  .efaq__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .efaq__side {
    position: static;
  }
}

@media (max-width: 767px) {
  .efaq__tabs {
    display: grid;
    width: 100%;
  }
  .efaq__tab {
    justify-content: space-between;
    width: 100%;
  }
  .efaq__item > summary {
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 12px;
    padding: 18px 0;
  }
  .efaq__q {
    font-size: 16px;
  }
  .efaq__icon {
    width: 36px;
    height: 36px;
  }
  .efaq__a {
    padding: 0 0 22px;
  }
}

/* ── Reviews (home): the average rating, then the reviews in a row that scrolls ── */

.ereviews {
  background: var(--surface);
}

/* the reviews page: the band carries on from the grey breadcrumb bar, the title one section gap below it */
.e-band.ereviews--page {
  margin-top: 0 !important;
}

.ereviews__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 24px 40px;
}

.ereviews__score {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ereviews__score > b {
  font: 400 64px/0.9 var(--font-display);
  color: var(--ink);
}

.ereviews__score > span {
  display: grid;
  gap: 8px;
}

.ereviews__score small {
  font: 600 12px/1.3 var(--font-body);
  letter-spacing: 0.04em;
  color: var(--ink-subtle);
}

.estars {
  display: inline-flex;
  gap: 2px;
}

.estars i {
  display: block;
  width: 16px;
  height: 16px;
  color: var(--ink-faint);
}

.estars i.is-on {
  color: var(--star);
}

.estars svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.ereviews__arrows {
  display: flex;
  gap: 8px;
}

.ereviews__arrow {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.ereviews__arrow svg {
  width: 20px;
  height: 20px;
}

.ereviews__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.ereviews__track {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ereviews__track::-webkit-scrollbar {
  display: none;
}

.erev {
  position: relative;
  display: flex;
  flex: 0 0 calc((100% - 40px) / 3);
  flex-direction: column;
  gap: 18px;
  padding: 30px 30px 26px;
  border-radius: var(--radius);
  background: #fff;
  scroll-snap-align: start;
  overflow: hidden;
}

/* a large closing quote mark, barely there, beside the author (the glyph sits at the top of its line box) */
.erev::after {
  content: '\201D';
  position: absolute;
  right: 26px;
  bottom: -84px;
  font: 400 140px/1 var(--font-display);
  color: var(--surface);
  pointer-events: none;
}

.erev__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.erev__who {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius);
  background: var(--surface);
  font: 600 12px/1 var(--font-body);
  color: var(--ink-muted);
}

.erev__headline {
  margin: 0;
  font: 400 clamp(20px, calc(2.2vw - 6px), 26px) / 1.02 var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

.erev__quote {
  flex: 1;
  margin: 0;
  padding: 0;
  font: 400 15.5px/1.65 var(--font-body);
  font-style: normal;
  color: var(--ink-muted);
}

.erev__quote p {
  margin: 0;
}

/* what came of it, when the review says */
.erev__result {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--brand-soft);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}

.erev__result b {
  margin-right: 6px;
  font-weight: 700;
  color: var(--brand);
}

.erev__result b::after {
  content: ':';
}

.erev__author {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.erev__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  font: 400 18px/1 var(--font-display);
  letter-spacing: 0.04em;
  color: #fff;
}

.erev__author b {
  display: block;
  font: 700 15px/1.3 var(--font-body);
  color: var(--ink);
}

.erev__author small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-subtle);
}

.ereviews__progress {
  position: relative;
  height: 2px;
  margin-top: 36px;
  border-radius: 2px;
  background: rgb(21 23 28 / 0.1);
  overflow: hidden;
}

.ereviews__progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 33.33%;
  background: var(--ink);
  transition: transform 0.15s linear;
}

/* nothing to scroll: no arrows and no line */
.ereviews.is-static :is(.ereviews__arrows, .ereviews__progress) {
  display: none;
}

@media (max-width: 1023px) {
  .ereviews__aside {
    justify-content: space-between;
  }
  .erev {
    flex-basis: calc((100% - 20px) / 2);
  }
}

@media (max-width: 767px) {
  .ereviews__score > b {
    font-size: 52px;
  }
  .ereviews__arrow {
    width: 46px;
    height: 46px;
  }
  .ereviews__track {
    gap: 12px;
  }
  .erev {
    flex-basis: 86%;
    padding: 26px 22px 22px;
  }
}

/* ── Partners (home): logos on grey tiles, five to a row; the closing tile fills the last row ── */

.epartners__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.epartners__grid > li {
  display: flex;
}

.epartners__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 196px;
  padding: 30px 20px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  text-decoration: none !important;
  transition: background-color var(--dur) var(--ease);
}

.epartners__logo {
  display: grid;
  flex: 1;
  place-items: center;
  width: 100%;
}

/* white logo backgrounds melt into the grey */
.epartners__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 78%;
  max-height: 84px;
  object-fit: contain;
  border-radius: 0;
  mix-blend-mode: multiply;
  transition: transform 0.4s var(--ease);
}

.epartners__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.7em;
  overflow: hidden;
  font: 500 12.5px/1.35 var(--font-body);
  color: var(--ink-muted);
}

.epartners__go {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.epartners__go svg {
  width: 16px;
  height: 16px;
}

a.epartners__tile:is(:hover, :focus-visible) {
  background: var(--surface-strong);
}

a.epartners__tile:is(:hover, :focus-visible) .epartners__logo img {
  transform: scale(1.05);
}

a.epartners__tile:is(:hover, :focus-visible) .epartners__go {
  opacity: 1;
  transform: none;
}

a.epartners__tile:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.epartners__cta {
  grid-column: span var(--span-5);
  container-type: inline-size;
}

.epartners__cta-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  width: 100%;
  height: 100%;
  min-height: 196px;
  padding: 28px clamp(24px, 3vw, 44px);
  border-radius: var(--radius);
  background: var(--dark);
}

.epartners__cta h3 {
  margin: 0;
  font: 400 clamp(28px, 2.4vw, 36px) / 1 var(--font-display);
  text-transform: uppercase;
  color: #fff;
}

.epartners__cta p {
  max-width: 420px;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--on-dark-muted);
}

/* the theme stretches every <button> on phones */
.epartners__cta .e-btn {
  flex: none;
  width: auto;
}

/* the tile is as wide as the cells the logos leave: narrower, it stacks, then keeps the title and the arrow */
@container (max-width: 560px) {
  .epartners__cta-in {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }
}

@container (max-width: 300px) {
  .epartners__cta-in {
    padding: 20px;
  }
  .epartners__cta h3 {
    font-size: 26px;
  }
  .epartners__cta p {
    display: none;
  }
  .epartners__cta .e-btn {
    padding: 6px;
  }
  .epartners__cta-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 1023px) {
  .epartners__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .epartners__cta {
    grid-column: span var(--span-3);
  }
}

@media (max-width: 767px) {
  .epartners__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .epartners__cta {
    grid-column: span var(--span-2);
  }
  .epartners__tile,
  .epartners__cta-in {
    min-height: 156px;
  }
  .epartners__tile {
    padding: 22px 12px 14px;
  }
  .epartners__logo img {
    max-height: 60px;
  }
}

/* ── Gallery (home): the newest project photos, three large columns on the dark band ── */

.egallery {
  position: relative;
  background: var(--dark) url('../img/parallax/parallax-1-2000.webp') center / cover no-repeat;
  color: #fff;
  isolation: isolate;
}

/* the building stays a hint behind the photos */
.egallery::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(18 20 24 / 0.9) 0%, rgb(18 20 24 / 0.8) 45%, rgb(18 20 24 / 0.94) 100%);
}

.egallery .ehead__title {
  color: #fff;
}

.egallery__aside {
  display: flex;
  justify-content: flex-end;
}

.egallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.egallery__item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
}

.egallery__shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #fff;
}

/* each photo whole: most are presentation slides, a crop would cut into the plan */
.egallery__shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  transition: transform 0.6s var(--ease);
}

.egallery__zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.egallery__zoom svg {
  width: 18px;
  height: 18px;
}

.egallery__shot:is(:hover, :focus-visible) img {
  transform: scale(1.03);
}

.egallery__shot:is(:hover, :focus-visible) .egallery__zoom {
  opacity: 1;
  transform: none;
}

.egallery__shot:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.egallery__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 16px 20px 18px;
  border-top: 1px solid var(--line);
}

.egallery__caption b {
  font: 400 22px/1 var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
}

.egallery__caption span {
  flex: none;
  font: 600 12px/1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

@media (max-width: 1023px) {
  .egallery {
    background-image: url('../img/parallax/parallax-1-1200.webp');
  }
  .egallery__aside {
    justify-content: flex-start;
  }
  .egallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* phones: a row to swipe, the next photo peeking in */
@media (max-width: 767px) {
  .egallery__grid {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .egallery__grid::-webkit-scrollbar {
    display: none;
  }
  .egallery__item {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.ef {
  position: relative;
  overflow: hidden;
  margin-top: var(--section);
  padding-top: 40px;
  background: var(--dark);
  color: var(--ink);
  isolation: isolate;
}

.ef__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.ef__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.ef__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(18 20 24 / 0.2), rgb(18 20 24 / 0.55) 55%, rgb(18 20 24 / 0.85));
}

.ef__card {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr);
  gap: 40px;
  padding: 40px;
  border-radius: var(--radius);
  background: var(--surface);
}

.ef__brand .logo {
  width: auto;
  height: 62px;
  color: var(--ink);
}

.ef__tagline {
  margin: 18px 0 0;
  max-width: 260px;
  font: 600 13px/1.5 var(--font-body);
  color: var(--ink-subtle);
}

.ef__address {
  display: flex;
  gap: 10px;
  margin: 28px 0 0;
  max-width: 300px;
  font: 500 14px/1.55 var(--font-body);
  color: var(--ink-muted);
}

.ef__address svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--brand);
}

.ef__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  align-content: start;
}

.ef__nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font: 600 15px/1.3 var(--font-body);
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: color var(--dur) var(--ease);
}

.ef__nav a::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--ink-faint);
  transition: background-color var(--dur) var(--ease);
}

.ef__nav a:hover {
  color: var(--brand) !important;
}

.ef__nav a:hover::before {
  background: var(--brand);
}

.ef__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 18px;
}

/* the sales numbers, one under the other, aligned like the rest of the column */
.ef__phones {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: 6px;
}

.ef__phone {
  font: 400 clamp(36px, 3.6vw, 52px) / 1 var(--font-display);
  letter-spacing: 0.01em;
  color: var(--ink) !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.ef__phone:hover {
  color: var(--brand) !important;
}

.ef__mail {
  font: 600 15px/1.3 var(--font-body);
  color: var(--ink-muted) !important;
  text-decoration: none !important;
}

.ef__socials {
  display: flex;
  gap: 6px;
}

.ef__socials a {
  background: #fff;
  color: var(--ink) !important;
}

.ef__socials a:hover {
  background: var(--ink);
  color: #fff !important;
}

.ef__bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font: 500 13px/1.4 var(--font-body);
  color: var(--ink-subtle);
}

.ef__bottom a {
  color: var(--ink) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.ef__bottom a:hover {
  color: var(--brand) !important;
}

/* giant wordmark, letters spread edge to edge like a plan's title block, cropped by the bottom edge */
.ef__mark {
  --mark-size: clamp(120px, 25vw, 380px);
  position: relative;
  margin-top: clamp(28px, 4vw, 56px);
  color: #fff;
  pointer-events: none;
}

.ef__mark b {
  display: flex;
  justify-content: space-between;
  height: calc(var(--mark-size) * 0.66);
  overflow: hidden;
  font: 400 var(--mark-size) / 0.8 var(--font-display);
  letter-spacing: 0;
}

@media (max-width: 1023px) {
  .ef__card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ef__contact {
    grid-column: 1 / -1;
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 767px) {
  .ef {
    padding-top: 16px;
  }
  .ef__card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px;
  }
}

/* ── Request modal ────────────────────────────────────────────────────── */

.emodal {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-float);
}

.emodal::backdrop {
  background: rgb(18 20 24 / 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.emodal[open] {
  animation: emodal-in 0.28s var(--ease);
}

@keyframes emodal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

.emodal__inner {
  position: relative;
  padding: 32px;
}

.emodal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--surface);
}

.emodal__close:hover {
  background: var(--surface-strong);
}

.emodal__title {
  margin: 14px 48px 10px 0;
  font: 400 44px/0.95 var(--font-display);
  color: var(--ink);
}

.emodal__text {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.emodal__phone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--surface);
  font: 600 14px/1.3 var(--font-body);
  color: var(--ink-muted);
}

.emodal__numbers {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.emodal__phone a {
  font: 400 26px/1 var(--font-display);
  color: var(--ink) !important;
  text-decoration: none !important;
  white-space: nowrap;
}

/* the theme makes <html> the scroller (overflow-y: scroll), so the lock goes there */
html:has(> body.is-locked),
body.is-locked {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .ehero__slide,
  .ehero__slide img,
  .emenu,
  .emenu__links a,
  .eh--overlay.is-stuck,
  .eh__glide,
  .emodal[open] {
    transition: none !important;
    animation: none !important;
  }
  .ehero__slide img {
    transform: none;
  }
}

/* ── Social buttons in page sidebars (about, careers): the old footer widget, kept for those pages ── */

.widget-social {
  padding-left: 100px;
}

/* no line box under the buttons (they are inline blocks), so the sidebar ends where its last button does */
.widget-social li {
  padding: 0;
  line-height: 0;
}

.widget-social li + li {
  margin-top: 6px;
}

.widget-social li:last-child .social-btn {
  margin-bottom: 0;
}
.social-btn {
  height: 40px;
  clear: both;
  white-space: nowrap;
  font-size: .8em;
  display: inline-block;
  border-radius: var(--radius);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
  margin: 2px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
  overflow: hidden
}
.social-btn:hover {
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.45);
}
.social-btn:focus {
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.4);
}
.social-btn > span, .social-btn-icon > i {
  float: left;
  padding: 13px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
  line-height: 1em
}
.social-btn > span {
  font-size: 14px;
  white-space: nowrap;
  color: #fff;
  background: #b8b8b8
}
.social-btn-icon > i {
  border-radius: var(--radius) 0 0 var(--radius);
  position: relative;
  width: 35px;
  text-align: center;
  font-size: 1.25em;
  color: #fff;
  background: #414141;
}
.social-btn-icon > i:after {
  content: "";
  border: 8px solid;
  border-color: transparent transparent transparent #414141;
  position: absolute;
  top: 13px;
  right: -15px
}
.social-btn-icon:hover > i, .social-btn-icon:focus > i {
  color: #FFF
}
.social-btn-icon > span {
  width: 100px;
  border-radius: 0 var(--radius) var(--radius) 0;
  text-align: center;
}
.btn-facebook:hover > i, .btn-facebook:focus > i {
  color: #1877f2
}
.btn-facebook > span {
  background: #1877f2
}
.btn-telegram:hover > i, .btn-telegram:focus > i {
  color: #0088cc
}
.btn-telegram > span {
  background: #0088cc
}
.btn-instagram:hover > i, .btn-instagram:focus > i {
  color: #c32aa3
}
.btn-instagram > span {
  background: #c32aa3;
}
.btn-youtube:hover > i, .btn-youtube:focus > i {
  color: #ff0000
}
.btn-youtube > span {
  background: #ff0000
}
.btn-threads:hover > i, .btn-threads:focus > i {
  color: #010101
}
.btn-threads > span {
  background: #010101
}
@media (max-width: 768px) {
  .widget-social {
    padding-left: 0;
  }
}

/* Project cards: between 992 and 1199px the image + text row is too narrow for the button; stack them as on tablets */
@media (min-width: 992px) and (max-width: 1199px) {
  .project-section .themesflat-project.has-margin.mg15 .project-item .inner {
    flex-direction: column !important;
  }
  .project-section .themesflat-project.style-2 .text-wrap,
  .project-section .project-section__thumb {
    width: 100% !important;
  }
}

/* ── Brick calculator (/gisht-kalkulyatori): the steps at the left, the result and the request at the right ── */

.ecalc-head {
  max-width: 860px;
  margin-bottom: clamp(32px, 3.6vw, 48px);
}

.ecalc-head .ehead__title {
  margin-top: 16px;
}

.ecalc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  grid-template-areas: 'form result' 'lead result';
  align-items: start;
  gap: 16px 24px;
}

.ecalc__form {
  display: grid;
  grid-area: form;
  gap: 16px;
  min-width: 0;
}

.ecalc-step {
  min-width: 0;
  margin: 0;
  padding: 28px;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
}

.ecalc-step__title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  float: left;
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  font: 400 30px/1 var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
}

.ecalc-step__title + * {
  clear: both;
}

.ecalc-step__num {
  font-size: 18px;
  color: var(--brand);
}

.ecalc-step__hint {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-subtle);
}

.ecalc-grid {
  display: grid;
  gap: 16px;
}

.ecalc-grid + .ecalc-field,
.ecalc-switch + .ecalc-grid,
.ecalc-bricks + .ecalc-grid {
  margin-top: 16px;
}

.ecalc-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ecalc-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ecalc-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* the house's length and width take two cells of the three-column grid */
.ecalc-pair {
  display: grid;
  grid-column: span 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ecalc [hidden] {
  display: none !important;
}

/* ── Fields ── */

.ecalc-field {
  display: grid;
  gap: 8px;
  margin: 0;
}

.ecalc-field__label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 600 13px/1.3 var(--font-body);
  color: var(--ink-muted);
}

.ecalc-field__label b {
  font-weight: 700;
  color: var(--brand);
}

.ecalc-field__box {
  position: relative;
  display: flex;
  align-items: center;
}

.ecalc input[type='text'],
.ecalc input[type='tel'] {
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font: 600 16px/1 var(--font-body);
  color: var(--ink);
  box-shadow: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.ecalc-field__box input[type='text'] {
  padding-right: 48px;
  font-variant-numeric: tabular-nums;
}

.ecalc input[type='text']:focus,
.ecalc input[type='tel']:focus {
  border-color: var(--brand);
  outline: 0;
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.ecalc-field__unit {
  position: absolute;
  right: 16px;
  font: 600 13px/1 var(--font-body);
  color: var(--ink-subtle);
  pointer-events: none;
}

.ecalc-field__hint {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-subtle);
}

.ecalc-range {
  width: 100%;
  height: 52px;
  margin: 0;
  accent-color: var(--brand);
  cursor: pointer;
}

/* ── Choice cards: the bricks and the wall thicknesses ── */

.ecalc-bricks,
.ecalc-walls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ecalc-brick,
.ecalc-wall {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 14px 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.ecalc-brick:hover,
.ecalc-wall:hover {
  border-color: var(--ink-faint);
}

.ecalc-brick input,
.ecalc-wall input,
.ecalc-switch input,
.ecalc-chips input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ecalc-brick:has(input:checked),
.ecalc-wall:has(input:checked) {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.ecalc-brick:has(input:focus-visible),
.ecalc-wall:has(input:focus-visible),
.ecalc-switch label:has(input:focus-visible),
.ecalc-chips label:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.ecalc-brick__img,
.ecalc-wall__img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 8px;
}

.ecalc-brick__top {
  fill: #d26a4f;
}

.ecalc-brick__front {
  fill: #b5462f;
}

.ecalc-brick__side {
  fill: #8f3523;
}

.ecalc-brick:has(input[value='facing']) .ecalc-brick__top { fill: #e0866a; }
.ecalc-brick:has(input[value='facing']) .ecalc-brick__front { fill: #c95a3d; }
.ecalc-brick:has(input[value='facing']) .ecalc-brick__side { fill: #a4442c; }
.ecalc-brick:has(input[value='light']) .ecalc-brick__top { fill: #e3c9a8; }
.ecalc-brick:has(input[value='light']) .ecalc-brick__front { fill: #cfae86; }
.ecalc-brick:has(input[value='light']) .ecalc-brick__side { fill: #b3926b; }

.ecalc-brick:has(input[value='custom']) polygon {
  fill: var(--surface);
  stroke: var(--ink-faint);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.ecalc-brick__dash {
  display: none;
}

.ecalc-wall__img g {
  fill: #c95a3d;
}

.ecalc-wall:not(:has(input:checked)) .ecalc-wall__img g {
  fill: var(--ink-faint);
}

.ecalc-brick__name,
.ecalc-wall__name {
  font: 700 14px/1.3 var(--font-body);
  color: var(--ink);
}

.ecalc-brick__size,
.ecalc-wall__size {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-subtle);
  font-variant-numeric: tabular-nums;
}

.ecalc-brick__tag {
  align-self: flex-start;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--brand-soft);
  font: 700 10.5px/1.2 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}

/* ── Switch and chips ── */

.ecalc-switch,
.ecalc-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}

.ecalc-switch label,
.ecalc-chips label {
  position: relative;
  margin: 0;
}

.ecalc-switch span,
.ecalc-chips span {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 6px;
  font: 700 12.5px/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.ecalc-chips span {
  padding: 0 14px;
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.ecalc-switch input:checked + span,
.ecalc-chips input:checked + span {
  background: var(--ink);
  color: #fff;
}

/* ── Windows and doors ── */

.ecalc-openings {
  display: grid;
  gap: 10px;
}

.ecalc-opening {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 14px minmax(0, 1fr) 88px 44px;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius);
  background: #fff;
}

.ecalc-opening__kind {
  align-self: center;
  font: 700 13px/1.2 var(--font-body);
  color: var(--ink);
}

.ecalc-opening__x {
  align-self: center;
  padding-top: 22px;
  text-align: center;
  color: var(--ink-subtle);
}

.ecalc-mini {
  display: grid;
  gap: 6px;
  margin: 0;
}

.ecalc-mini span {
  font: 600 11.5px/1.2 var(--font-body);
  color: var(--ink-subtle);
}

.ecalc .ecalc-mini input[type='text'] {
  height: 44px;
  padding: 0 12px;
  font-variant-numeric: tabular-nums;
}

.ecalc-opening__remove {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.ecalc-opening__remove:hover {
  background: var(--brand-soft);
  color: var(--brand);
}

.ecalc-opening__remove svg {
  width: 16px;
  height: 16px;
}

.ecalc-add {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.ecalc-add__btn {
  height: 44px;
  padding: 0 18px;
  border: 1px dashed var(--ink-faint);
  border-radius: var(--radius);
  background: transparent;
  font: 700 13px/1 var(--font-body);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.ecalc-add__btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* ── Result: a dark card that stays in view, the request under it ── */

.ecalc__result {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  grid-area: result;
}

.ecalc-result {
  padding: 28px;
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--on-dark);
}

.ecalc-result__label {
  margin: 0;
  font: 700 12px/1.2 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-subtle);
}

.ecalc-result__total {
  margin: 10px 0 0;
  font: 400 clamp(56px, 6vw, 76px) / 0.95 var(--font-display);
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.ecalc-result__total small {
  font-size: 0.42em;
  color: var(--on-dark-muted);
}

.ecalc-result__sub {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--brand-on-dark);
}

.ecalc-result__list {
  display: grid;
  margin: 22px 0 0;
}

.ecalc-result__list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--on-dark-line);
}

.ecalc-result__list dt {
  font-size: 14px;
  font-weight: 500;
  color: var(--on-dark-muted);
}

.ecalc-result__list dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ecalc-result__note {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--on-dark-subtle);
}

.ecalc-result__cta {
  width: 100%;
  margin-top: 20px;
}

.ecalc-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 14px;
}

.ecalc-link {
  padding: 0;
  border: 0;
  background: none;
  font: 700 13px/1.6 var(--font-body);
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--on-dark-line);
  text-underline-offset: 4px;
  cursor: pointer;
}

.ecalc-link:hover {
  text-decoration-color: currentColor;
}

.ecalc-lead {
  display: grid;
  grid-area: lead;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 40px;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--brand);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.ecalc-lead__head,
.ecalc-lead__body {
  display: grid;
  align-content: start;
  gap: 12px;
}

.ecalc-lead__title {
  margin: 0;
  font: 400 clamp(30px, 3vw, 40px) / 0.95 var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
}

.ecalc-lead__text {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.ecalc-lead__field {
  display: grid;
  gap: 6px;
  margin: 0;
}

.ecalc-lead__field span {
  font: 600 13px/1.3 var(--font-body);
  color: var(--ink-muted);
}

.ecalc-lead__send {
  width: 100%;
  margin-top: 4px;
}

.ecalc-lead__send:disabled {
  opacity: 0.6;
  cursor: wait;
}

.ecalc-lead input[type='text'],
.ecalc-lead input[type='tel'] {
  border-color: #fff;
}

.ecalc-lead.is-sent .ecalc-lead__field,
.ecalc-lead.is-sent .ecalc-lead__send {
  display: none;
}

.ecalc-lead__status {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.ecalc-lead__status:empty {
  display: none;
}

.ecalc-lead__status.is-sent {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: #fff;
  font-weight: 600;
  color: var(--ink);
}

.ecalc-lead__status.is-error {
  color: var(--brand);
}

.ecalc-lead__call {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-subtle);
}

.ecalc-lead__call a {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* phones: the count at the bottom of the screen until the result itself is in view */
.ecalc-bar {
  display: none;
}

/* ── Under the calculator: the table, the steps, the link to the bricks page ── */

.ecalc-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--surface);
}

.ecalc-table {
  width: 100%;
  min-width: 640px;
  margin: 0;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.ecalc-table th,
.ecalc-table td {
  padding: 18px 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  color: var(--ink);
}

.ecalc-table thead th {
  font: 700 12px/1.3 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.ecalc-table tbody tr:last-child > * {
  border-bottom: 0;
}

.ecalc-table tbody th {
  font-weight: 700;
}

.ecalc-how {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: clamp(32px, 3.6vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.ecalc-how li {
  padding: 28px;
  border-radius: var(--radius);
  background: var(--surface);
}

.ecalc-how__num {
  font: 400 34px/1 var(--font-display);
  color: var(--brand);
}

.ecalc-how p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.ecalc-service {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none !important;
}

.ecalc-service > span:first-child {
  display: grid;
  gap: 6px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.ecalc-service b {
  font: 400 30px/1 var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
}

@media (max-width: 1199px) {
  .ecalc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  }

  .ecalc-lead {
    grid-template-columns: 1fr;
  }

  .ecalc-bricks,
  .ecalc-walls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ecalc-how {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .ecalc {
    grid-template-columns: 1fr;
    grid-template-areas: 'form' 'result' 'lead';
  }

  .ecalc__result {
    position: static;
  }

  .ecalc-bar {
    position: fixed;
    right: var(--gutter);
    bottom: 12px;
    left: var(--gutter);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 56px;
    padding: 0 18px;
    border-radius: var(--radius);
    background: var(--dark);
    box-shadow: var(--shadow-float);
    font: 600 13px/1 var(--font-body);
    color: var(--on-dark-muted) !important;
    text-decoration: none !important;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }

  .ecalc-bar b {
    margin-left: auto;
    font: 400 26px/1 var(--font-display);
    color: #fff;
    font-variant-numeric: tabular-nums;
  }

  .ecalc-bar svg {
    width: 18px;
    height: 18px;
    color: #fff;
  }

  .ecalc-bar.is-hidden {
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  .ecalc-step,
  .ecalc-result,
  .ecalc-lead {
    padding: 20px;
  }

  .ecalc-step__title {
    font-size: 26px;
  }

  .ecalc-grid--3,
  .ecalc-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ecalc-grid--2 {
    grid-template-columns: 1fr;
  }

  .ecalc-pair {
    grid-column: 1 / -1;
  }

  .ecalc-opening {
    grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 64px;
    gap: 8px;
  }

  .ecalc-opening__kind {
    grid-column: 1 / -2;
  }

  .ecalc-opening__remove {
    grid-row: 1;
    grid-column: -2 / -1;
    justify-self: end;
    width: 36px;
    height: 36px;
  }

  .ecalc-how {
    grid-template-columns: 1fr;
  }

  .ecalc-service {
    flex-direction: column;
    align-items: flex-start;
  }
}