@charset "utf-8";
/* ============================================================
   E.F.G. House — white product site (livinghouse.nz-inspired)
   Giant black type, clean grid, product-brochure feel.
   ============================================================ */

@font-face { font-family: "Commissioner"; src: url("../assets/fonts/Commissioner-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Commissioner"; src: url("../assets/fonts/Commissioner-greek.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }

:root {
  --white: #ffffff;
  --ink: #0e0e0e;
  --gray: #6d6d6d;
  --line: #e4e4e2;
  --off: #f6f6f4;

  --font: "Commissioner", "Inter", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(1.1rem, 3.5vw, 3rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
h2 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }

section { padding: clamp(4rem, 10vh, 7.5rem) var(--pad); max-width: 90rem; margin: 0 auto; }

.label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gray);
  margin-bottom: 1.6rem;
}

.pill {
  display: inline-block;
  border: 1.5px solid var(--ink);
  border-radius: 100px;
  padding: 0.6rem 1.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.25s, color 0.25s, transform 0.25s var(--ease);
  cursor: pointer;
}
.pill:hover { transform: scale(1.03); }
.pill--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill--dark:hover { background: #333; }

.link-arrow {
  font-weight: 600;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.15rem;
}
.link-arrow::after { content: " \2192"; }
.fineprint { font-size: 0.75rem; color: var(--gray); margin-top: 1rem; }

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem var(--pad);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__logo { height: 2.1rem; width: auto; }
.nav__links { display: flex; gap: 1.6rem; }
.nav__links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray);
  transition: color 0.25s;
}
.nav__links a:hover { color: var(--ink); }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding-top: clamp(1.5rem, 4vh, 3rem); position: relative; background: transparent; }

/* Fixed one-line wordmark pinned under the nav; content scrolls over it,
   and it reappears through the transparent .gap strips */
.hero__wordmark {
  position: fixed;
  top: clamp(5rem, 8.5vh, 6.5rem);
  left: 0;
  z-index: 0;
  font-size: 11.2vw; /* fallback — JS fits it exactly edge-to-edge */
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.hero__wordmark-space { height: clamp(3rem, 13.5vw, 14rem); }

main > section, main > footer { position: relative; z-index: 1; background: transparent; }
/* full-bleed white backdrop — sections are max-width-capped, but their cover
   must span the whole viewport so the fixed wordmark hides completely */
main > section::before, main > footer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--white);
  z-index: -1;
}
main > .hero::before { content: none; }
.gap { height: 55vh; position: relative; z-index: 0; }
.hero__row { display: flex; margin: clamp(1.5rem, 4vh, 3rem) 0; }
.hero__spacer { flex: 1; }
.hero__intro { max-width: 24rem; display: flex; flex-direction: column; gap: 1.4rem; }
.hero__intro p { font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
.hero__intro .pill { align-self: flex-start; }

.hero__media {
  position: relative;
  z-index: 2; /* photo slides over the fixed wordmark */
}
.hero__media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 92vh;
  margin: 0 auto;
}

/* Floating mini player */
.miniplayer {
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 60;
  width: min(14rem, 40vw);
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.miniplayer:hover { transform: scale(1.03); }
.miniplayer.is-hidden { opacity: 0; pointer-events: none; transform: translateY(1rem); }
.miniplayer__screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(80% 60% at 30% 30%, #4a4a48 0%, transparent 60%),
    linear-gradient(150deg, #3a3a38, #191918);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
}
.miniplayer__close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

/* ============================================================
   Scroll assembly
   ============================================================ */
.assembly { padding: 0; max-width: none; position: relative; }
.assembly__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--white);
}
#houseSvg {
  width: min(88vw, 62rem);
  height: auto;
  max-height: 88vh;
  overflow: visible;
  color: var(--ink);
}
#houseSvg polygon, #houseSvg line {
  fill: #fff;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
#houseSvg line { fill: none; }
#houseSvg .grey polygon { fill: #e4e4e2; }
#houseSvg .dark polygon { fill: #3a3a38; stroke: #222; }
#houseSvg polygon.glass { fill: #eef3f5; stroke: #86929a; stroke-width: 1.1; }
#houseSvg polygon.win { fill: #dfe7ea; stroke: #5c666c; stroke-width: 1.1; }
#houseSvg .gold polygon { fill: #dcb97e; stroke: #a8823f; }
#houseSvg .gold line { stroke: #a8823f; }
#houseSvg polygon.pool { fill: #bcd9e6; stroke: #7fa9bd; stroke-width: 1.1; }
/* cutaway diorama — interior objects traced from the floor plans */
#houseSvg polygon.inwall { fill: #fcfbf9; stroke: #6d6963; stroke-width: 1.2; }
#houseSvg polygon.furn { fill: #f1ece3; stroke: #8d8579; stroke-width: 1.1; }
#houseSvg polygon.wood { fill: #e6d9c3; stroke: #a28e69; stroke-width: 1.1; }
#houseSvg polygon.soft { fill: #fefdfb; stroke: #9a948a; stroke-width: 1.1; }
#houseSvg polygon.canopy { fill: #abcda6; stroke: #6f9c6c; stroke-width: 1.1; }
#houseSvg polygon.duvet { fill: #f4efe6; stroke: #a39c8e; stroke-width: 1.1; }
#houseSvg .diorama g { transition: none; }
.assembly__caption {
  position: absolute;
  left: var(--pad);
  bottom: 2rem;
  max-width: 30rem;
  font-size: 1rem;
  font-weight: 500;
}
.assembly__hint {
  position: absolute;
  right: var(--pad);
  bottom: 2rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gray);
  transition: opacity 0.4s;
}

/* ============================================================
   Statement
   ============================================================ */
.statement {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  border-top: 1px solid var(--line);
}
.statement h2 { font-size: clamp(2.2rem, 5.5vw, 4.6rem); }
.statement__side { display: flex; flex-direction: column; gap: 1.5rem; max-width: 26rem; }
.statement__side p { color: var(--gray); font-size: 1.05rem; }
.statement__side .pill { align-self: flex-start; }

/* ============================================================
   Sizes
   ============================================================ */
.sizes { border-top: 1px solid var(--line); }
.sizes__toggle {
  display: inline-flex;
  border: 1.5px solid var(--ink);
  border-radius: 100px;
  padding: 0.25rem;
  margin-bottom: 2.5rem;
}
.sizes__toggle button {
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.55rem 1.3rem;
  border-radius: 100px;
  cursor: pointer;
  color: var(--gray);
  transition: background 0.25s, color 0.25s;
}
.sizes__toggle button.is-active { background: var(--ink); color: #fff; }

.sizes__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.sizes__big {
  display: block;
  font-size: clamp(1.9rem, 4.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.sizes__facts p { color: var(--gray); font-size: 0.85rem; margin-top: 0.3rem; }
.sizes__copy { max-width: 52ch; font-size: 1.05rem; margin-bottom: 1.6rem; }

/* ============================================================
   Available
   ============================================================ */
.available {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  background: var(--ink);
  color: #fff;
  max-width: none;
}
.available__title {
  font-size: clamp(3rem, 9vw, 7.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.available__body { max-width: 34rem; display: flex; flex-direction: column; gap: 1.6rem; }
.available__body p { font-size: 1.1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.available__body strong { color: #fff; }
.available .pill--dark { background: #fff; color: var(--ink); border-color: #fff; align-self: flex-start; }
.available .pill--dark:hover { background: #e8e8e8; }

/* ============================================================
   Colours
   ============================================================ */
.colours { text-align: center; }
.colours h2 { font-size: clamp(1.5rem, 3.4vw, 2.6rem); margin-bottom: 2rem; }
.colours__preview {
  height: clamp(14rem, 40vh, 24rem);
  border-radius: 14px;
  background: #e9e6df;
  transition: background 0.6s var(--ease);
  margin-bottom: 2rem;
  background-image: linear-gradient(160deg, rgba(255,255,255,0.25), transparent 45%),
                    linear-gradient(20deg, rgba(0,0,0,0.18), transparent 50%);
}
.colours__swatches { display: flex; justify-content: center; gap: 1rem; }
.colours__swatches button {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 2px solid transparent;
  outline: 2px solid transparent;
  background: var(--c);
  cursor: pointer;
  transition: transform 0.25s var(--ease), outline-color 0.25s;
}
.colours__swatches button:hover { transform: scale(1.12); }
.colours__swatches button.is-active { outline-color: var(--ink); outline-offset: 3px; }
.colours__note { margin-top: 2rem; font-size: 1.15rem; font-weight: 600; }

/* ============================================================
   Benefits
   ============================================================ */
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.benefit h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.7rem; }
.benefit p { font-size: 0.9rem; color: var(--gray); }

/* ============================================================
   Floorplan
   ============================================================ */
.floorplan { border-top: 1px solid var(--line); }
.floorplan__tabs { display: flex; gap: 0.8rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.floorplan__tabs button {
  border: 1.5px solid var(--line);
  background: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem 1.3rem;
  border-radius: 100px;
  cursor: pointer;
  color: var(--gray);
  transition: border-color 0.25s, color 0.25s;
}
.floorplan__tabs button.is-active { border-color: var(--ink); color: var(--ink); }

.floorplan__wrap {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
#planSvg { width: 100%; height: auto; color: var(--ink); }
.plan-label { font-family: var(--font); font-size: 22px; font-weight: 600; fill: var(--ink); }
.plan-sub { font-family: var(--font); font-size: 17px; fill: var(--gray); }
.floorplan__copy { color: var(--gray); font-size: 1rem; max-width: 40ch; }

/* ============================================================
   Gallery
   ============================================================ */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
}
.gallery figure img { width: 100%; aspect-ratio: 10 / 7; object-fit: cover; }
.gallery figcaption { font-size: 0.85rem; color: var(--gray); margin-top: 0.8rem; max-width: 46ch; }

/* ============================================================
   Media list
   ============================================================ */
.media { border-top: 1px solid var(--line); }
.media__list li { border-bottom: 1px solid var(--line); }
.media__list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 1.2rem 0.2rem;
  transition: padding-left 0.3s var(--ease);
}
.media__list a:hover { padding-left: 0.8rem; }
.media__list span { font-weight: 600; font-size: clamp(1rem, 2vw, 1.3rem); }
.media__list em { font-style: normal; color: var(--gray); font-size: 0.85rem; white-space: nowrap; }

/* ============================================================
   Process + accordions
   ============================================================ */
.process h2 { font-size: clamp(2.2rem, 5vw, 4rem); margin-bottom: 1.2rem; }
.process__lede { color: var(--gray); max-width: 52ch; margin-bottom: 3rem; }

.steps li, .included li { border-top: 1px solid var(--line); }
.steps li:last-child, .included li:last-child { border-bottom: 1px solid var(--line); }

.step__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  padding: 1.3rem 0.2rem;
  cursor: pointer;
}
.step__head span { color: var(--gray); font-size: 0.85rem; font-weight: 600; min-width: 2rem; }
.step__head h3 { font-size: clamp(1.05rem, 2.2vw, 1.4rem); font-weight: 700; flex: 1; }
.step__head i {
  font-style: normal;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--gray);
  transition: transform 0.35s var(--ease);
}
li.is-open .step__head i { transform: rotate(45deg); }

.step__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
}
.step__body p {
  padding: 0 0.2rem 1.6rem 3.6rem;
  color: var(--gray);
  max-width: 62ch;
}
.included .step__body p { padding-left: 0.2rem; }

/* ============================================================
   Plans
   ============================================================ */
.plans {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  border-top: 1px solid var(--line);
}
.plans__info h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); margin-bottom: 1rem; }
.plans__info h2 span { font-size: 0.4em; font-weight: 600; color: var(--gray); }
.plans__lede { color: var(--gray); max-width: 44ch; margin-bottom: 2.5rem; }

.plans__form {
  background: var(--off);
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-self: start;
  position: sticky;
  top: 5rem;
}
.plans__row { display: flex; gap: 0.9rem; }
.plans__form input {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  outline: 0;
  transition: border-color 0.25s;
}
.plans__form input:focus { border-color: var(--ink); }
.plans__form .pill { border: 0; margin-top: 0.4rem; }

/* ============================================================
   Costs
   ============================================================ */
.costs { border-top: 1px solid var(--line); }
.costs__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.costs__summary div { display: flex; flex-direction: column; gap: 0.2rem; }
.costs__summary span { color: var(--gray); font-size: 0.82rem; }
.costs__summary strong { font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-weight: 700; }

.costs__table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
.costs__table td { padding: 0.95rem 0.2rem; border-top: 1px solid var(--line); font-size: 0.95rem; }
.costs__table td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.costs__table tr:last-child td { border-bottom: 1px solid var(--line); }

/* ============================================================
   Footer
   ============================================================ */
.footer { padding: clamp(3rem, 8vh, 5rem) var(--pad); border-top: 1px solid var(--line); max-width: 90rem; margin: 0 auto; }
.footer__sub { display: flex; gap: 0.8rem; max-width: 26rem; margin-bottom: 3rem; }
.footer__sub input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: inherit;
  font-size: 0.92rem;
  padding: 0.7rem 1.2rem;
  outline: 0;
}
.footer__sub input:focus { border-color: var(--ink); }
.footer__sub .pill { border: 0; }
.footer__row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--gray);
}
.footer__row nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer__row a:hover { color: var(--ink); }

/* ============================================================
   Language toggle
   ============================================================ */
body.en .l.el { display: none; }
body.el .l.en { display: none; }
.nav__right { display: flex; align-items: center; gap: 1.2rem; }
.nav__lang {
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  color: var(--gray);
  transition: border-color 0.25s, color 0.25s;
}
.nav__lang:hover { border-color: var(--ink); color: var(--ink); }

/* ============================================================
   About / project sections
   ============================================================ */
.about { border-top: 1px solid var(--line); }
.about h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); margin-bottom: 2.2rem; }
.about__text {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 68rem;
}
.about__text p { color: var(--gray); font-size: 1.02rem; line-height: 1.7; }

.project-s { border-top: 1px solid var(--line); }
.project-s h2 { font-size: clamp(2.4rem, 6.5vw, 5.2rem); letter-spacing: -0.03em; margin-bottom: 1.4rem; }
.project-s__lede { max-width: 60ch; font-size: 1.08rem; line-height: 1.65; color: var(--gray); }
.project-s__media { margin: clamp(2.5rem, 6vh, 4rem) 0; }
.project-s__media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 88vh;
  margin: 0 auto;
}
.project-s__note { max-width: 62ch; color: var(--gray); margin-top: 2rem; line-height: 1.7; }

.location {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-bottom: clamp(3rem, 7vh, 5rem);
}
.location h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.9rem; }
.location p { color: var(--gray); line-height: 1.7; margin-bottom: 1rem; }

.units-label { margin-top: 1rem; }
.unit__meta {
  color: var(--gray);
  font-size: 0.82rem;
  font-weight: 600;
  min-width: 10.5rem;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .step__head { flex-wrap: wrap; gap: 0.4rem 1rem; }
  .unit__meta { order: 3; width: 100%; }
}

.interiors { margin-top: clamp(3.5rem, 8vh, 5.5rem); }
.interiors__group {
  font-size: 1.15rem;
  font-weight: 700;
  margin: clamp(1.8rem, 4vh, 2.6rem) 0 1.2rem;
}
.int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.2rem;
}
.int-grid figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--off);
  transition: opacity 0.35s;
}
.int-grid figure:hover img { opacity: 0.9; }
.int-grid figcaption {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.specs { margin-top: clamp(3.5rem, 8vh, 5.5rem); }
.specs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.specs__grid h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.6rem; }
.specs__grid p { font-size: 0.9rem; color: var(--gray); line-height: 1.6; }

.unit-table { margin-top: clamp(2rem, 5vh, 3rem); max-width: 56rem; }
.unit-table li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 1.05rem 0.2rem;
  border-top: 1px solid var(--line);
}
.unit-table li:last-child { border-bottom: 1px solid var(--line); }
.unit-table span { font-weight: 600; }
.unit-table em { font-style: normal; color: var(--gray); font-size: 0.9rem; white-space: nowrap; }

/* ============================================================
   Reveal
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 820px) {
  .nav__links { display: none; }
  .statement, .available, .plans, .floorplan__wrap { grid-template-columns: 1fr; }
  .hero__row .hero__spacer { display: none; }
  .plans__form { position: static; }
  .miniplayer { width: min(11rem, 44vw); }
}

/* ============================================================
   TEO sections wrapper (who / works / team / featured / footer)
   ============================================================ */
main > .teo { position: relative; z-index: 1; }
main > .teo::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--white);
  z-index: -1;
}
.teo section, .teo footer { max-width: none; margin: 0; padding: 0; }
.teo section::before, .teo footer::before { content: none; }

/* ============================================================
   Cutaway floor tour (experimental)
   ============================================================ */
#houseSvg g { transition: opacity 0.45s; }
#houseSvg g.ghost { opacity: 0.07; }
/* finale apartment selector: everything fades except the hovered property */
#houseSvg.pick-dim :is(polygon, line) { opacity: 0.15; }
#houseSvg.pick-dim .u-hot { opacity: 1; }
.assembly__sticky.is-choose #houseSvg :is(polygon, line) { transition: opacity 0.3s; }
.assembly__sticky.is-choose #houseSvg { cursor: pointer; }
.floor-tag {
  position: absolute;
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  max-width: 17rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  padding: 1rem 1.3rem;
  border-left: 3px solid #dcb97e;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
  z-index: 3;
}
.floor-tag::after { content: " →"; color: #a8823f; }
.floor-tag.show { opacity: 1; pointer-events: auto; }
.floor-tag:hover { background: #fff; }

/* tour: soft fades at the frame edges instead of hard clipping */
.assembly__sticky::before, .assembly__sticky::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 2;
}
.assembly__sticky::before {
  top: 0; height: 7vh;
  background: linear-gradient(var(--white), rgba(255, 255, 255, 0));
}
.assembly__sticky::after {
  bottom: 0; height: 9vh;
  background: linear-gradient(rgba(255, 255, 255, 0), var(--white));
}
.assembly__sticky.is-touring::before, .assembly__sticky.is-touring::after { opacity: 1; }

/* ============================================================
   Έργα: the finished building becomes the property selector WITH the floor
   plans + unit list beside it. Once the build completes (.is-choose) the sticky
   reserves a right column, so the centred building glides left and the panel
   fades in. Hardened per review: one gap token for both the panel and the
   reserved column; constant panel height (fixed plan box) so rows never move
   under the cursor; a symmetric safe band keeps it clear of the sticky nav.
   ============================================================ */
.assembly__sticky.has-side {
  --side-w: min(34vw, 26rem); --side-gap: clamp(1.1rem, 3.5vw, 3rem); --nav-h: 4.7rem;
  transition: padding-right 0.6s ease;
}
.assembly__sticky.has-side #houseSvg { transition: width 0.6s ease, max-height 0.6s ease; }
.assembly__sticky .assembly__side {
  position: absolute; top: 50%; right: var(--side-gap); width: var(--side-w);
  max-height: calc(100svh - 2 * (var(--nav-h) + 1rem));
  transform: translateY(-50%) translateX(24px);
  opacity: 0; pointer-events: none; z-index: 3;
  background: transparent; overflow: visible;      /* undo the .teo wrapper's white box + clipping */
  transition: opacity 0.5s ease 0.1s, transform 0.6s ease;
}
.assembly__sticky .assembly__side .unitsel__plan-imgs { height: min(320px, 28vh); justify-content: center; }
.assembly__sticky .assembly__side .unitsel__plan-imgs img { flex: 0 1 auto; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
@media (max-height: 760px) { .assembly__sticky .assembly__side .unitsel__row a { padding: 0.7rem 0.6rem; } }
.assembly__sticky.has-side.is-choose { padding-right: calc(var(--side-w) + 2 * var(--side-gap)); }
.assembly__sticky.has-side.is-choose #houseSvg { width: min(56vw, 52rem); max-height: 80vh; }
.assembly__sticky.has-side.is-choose .assembly__side { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.assembly__sticky.has-side.is-choose .floor-tag,
.assembly__sticky.has-side.is-choose .assembly__hint { display: none; }
@media (max-width: 900px) {
  .assembly__sticky .assembly__side { display: none; }
  .assembly__sticky.has-side.is-choose { padding-right: 0; }
  .assembly__sticky.has-side.is-choose #houseSvg { width: min(88vw, 62rem); max-height: 88vh; }
  .assembly__sticky.has-side.is-choose .floor-tag,
  .assembly__sticky.has-side.is-choose .assembly__hint { display: block; }
}

/* Έργα: gold hover on the finished building — the same highlight the old static
   selector used (#dcb97e / #a8823f, windows #e9d5ab). !important because the
   engine shades some faces with inline fills; interior diorama pieces excluded. */
#houseSvg.pick-dim polygon.u-hot:not(.inwall):not(.furn):not(.wood):not(.soft):not(.canopy):not(.duvet) { fill: #dcb97e !important; stroke: #a8823f !important; }
#assembly #houseSvg.pick-dim polygon.u-hot.win, #assembly #houseSvg.pick-dim polygon.u-hot.glass { fill: #e9d5ab !important; } /* #assembly: outranks the :not() chain above */
#houseSvg.pick-dim line.u-hot { stroke: #a8823f !important; }
.assembly__sticky.is-choose #houseSvg :is(polygon, line) { transition: opacity 0.3s, fill 0.2s, stroke 0.2s; }

/* a wordmark scaled below the full width (data-fit) sits centred, not flush-left */
.hero__wordmark[data-fit] { left: 50%; transform: translateX(-50%); }

/* homepage hero photo (the TEO-draft concrete façade): keep the same box
   proportions the previous render had, cropping instead of growing taller */
.hero__media img[src$="hero.jpg"] { aspect-ratio: 1077 / 686; object-fit: cover; width: 100%; }

/* homepage hero (the square building render): a true 6:5 frame whose width follows
   the height cap (full screen under the nav). The old 4:3 box kept width:84% while max-height clamped its
   height, which squashed it to ~1.55:1 and cut the roof and the gate. 6:5 + 67%
   keeps roof-to-gate in view even at the Ken Burns zoom peak (scale 1.09). The frame
   is sized on the .tilt wrapper extras.js adds (desktop), or on the img itself where
   there is no wrapper (touch, reduced motion), so the zoom crops inside the frame. */
.hero__media--home > img[src$="hero-building.jpg"],
.hero__media--home > .tilt {
  /* more room: the frame may be as tall as the whole screen under the sticky nav
     (was 80vh). vh line = fallback for browsers without svh. */
  width: min(84%, calc((100vh - 6rem) * 6 / 5));
  width: min(84%, calc((100svh - 6rem) * 6 / 5));
  margin-inline: auto;
}
.hero__media--home img[src$="hero-building.jpg"] { aspect-ratio: 6 / 5; max-height: none; object-fit: cover; object-position: 50% 67%; }
.hero__media--home > .tilt > img[src$="hero-building.jpg"] { width: 100%; }

/* Έργα: the footer's white block used to get a full-screen min-height so the fixed wordmark
   could not peek out above it at the end of the page. Since 2026-10-14 the tall, opaque dark
   virtual-tour section sits right above the footer and covers that area itself — the
   min-height only added an empty white band under the dark section, so it is gone. */

/* Έργα end state on short viewports: the building is vertically centred and the
   caption is pinned 2rem above the sticky's bottom edge, so at ~450–600px viewport
   heights the building's base ran into the caption. Cap the building so its bottom
   stays above the caption zone (caption ≈ 3rem tall + 2rem offset, ×2 because the
   building is centred) — the caption never overlaps it. Desktop only; the mobile
   rules keep their own sizing. */
@media (min-width: 901px) {
  .assembly__sticky.has-side.is-choose #houseSvg { max-height: min(80vh, calc(100svh - 12rem)); }
}

/* Έργα footer: full width inside its wrapper (max-width 96rem + auto margins still centre it;
   needed while .teo--end was a flex column, harmless now) */
main > .teo.teo--end > .footer { width: 100%; }

/* in-page anchors (#vision, #about, #contacts…) land below the sticky nav, not under it */
html { scroll-padding-top: 5rem; }

/* Έργα end state on short windows. The panel is centred in a band clear of the nav, but
   its content (plans + caption + five rows) kept its full height and spilled below the
   sticky, which clips: under ~600px tall the last flats were cut off and unclickable.
   1) the plan box yields first: it gets what is left after the nav band, caption and
      the list (32rem reserve, sized for the English labels that wrap to two lines);
   2) under 620px tall the plans are dropped, the panel hangs just below the nav instead
      of being centred, and it scrolls if even the list alone does not fit. */
.assembly__sticky .assembly__side .unitsel__plan-imgs { height: min(320px, 28vh, calc(100svh - 32rem)); }
@media (min-width: 901px) and (max-height: 620px) {
  .assembly__sticky .assembly__side { top: calc(var(--nav-h) + 0.75rem); max-height: calc(100svh - var(--nav-h) - 1.5rem); overflow-y: auto; transform: translateX(24px); }
  .assembly__sticky.has-side.is-choose .assembly__side { transform: translateX(0); }
  .assembly__sticky .assembly__side .unitsel__plan { display: none; }
}

/* Έργα hero photo: extras.js wraps it in .tilt, whose `img { width: 100% }` (teo.css) plus
   the 92vh height cap stretched it out of shape (object-fit: fill) on any screen wider
   than 1.5 × 92vh, e.g. ~17% squashed at 1366×768. Size the frame from the height cap
   instead: the whole photo at its true 3:2, no distortion, no crop. */
.hero__media--photo > .tilt { width: min(100%, calc(92vh * 3 / 2)); margin-inline: auto; }
.hero__media--photo > .tilt > img { max-height: none; }

/* phones: the build hint ("Scroll to build" … "Choose your property on the building")
   sat on the same bottom line as the three-line caption and overprinted it. Move it to
   the empty band above the building, centred, clear of the sticky nav. */
@media (max-width: 700px) {
  .assembly__hint { top: calc(4.7rem + 0.75rem); bottom: auto; left: var(--pad); right: var(--pad); text-align: center; }
}

/* footer heading ("Επικοινωνήστε μαζί μας"): sentence case as written, not all caps —
   teo.css sets it uppercase with `.teo .footer__right h2` and loads later, hence the
   extra .footer. (Header links are sentence case in the markup, no rule needed.) */
.teo .footer .footer__right h2 { text-transform: none; }

/* ============================================================
   The people behind EFG — co-founder bios (homepage, after "Ποιοι είμαστε").
   Same frame as .who (side label, 9vw left gutter, 96rem max) with a shorter top
   so it reads as the continuation of "who we are"; portraits 4:5 as in the mockup.
   ============================================================ */
.teo .people { position: relative; max-width: 96rem; margin: 0 auto; padding: clamp(1.5rem, 4vh, 3rem) var(--pad) clamp(4rem, 10vh, 8rem); padding-left: clamp(4rem, 9vw, 10rem); }
.teo .people .side-label { top: clamp(1.5rem, 4vh, 3rem); }
.teo .people__intro { max-width: 46rem; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.teo .people__intro h2 { font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 400; margin-bottom: 1.4rem; }
.teo .people__intro p { color: #555; max-width: 60ch; font-size: 0.98rem; line-height: 1.75; }
.teo .people__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem); max-width: 68rem; }
.teo .person__photo { margin: 0 0 1.6rem; aspect-ratio: 4 / 5; overflow: hidden; background: #ece9e5; }
.teo .person__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.teo .person__role { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray); }
.teo .person__name { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 600; line-height: 1.2; margin: 0.45rem 0 1rem; }
.teo .person__lead { color: var(--ink); font-size: 1rem; line-height: 1.7; margin-bottom: 0.9rem; }
.teo .person__bio { color: #555; font-size: 0.95rem; line-height: 1.75; }
.teo .person__schools { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid #cdcdcd; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); }
.teo .people__grid .person:nth-child(2) { transition-delay: 0.12s; } /* the second card reveals a beat later */
@media (max-width: 900px) {
  .teo .people { padding-left: var(--pad); }
  .teo .people__grid { grid-template-columns: 1fr; max-width: 34rem; }
}

/* ============================================================
   Έργα: the finished building, STATIC (data-mode="static") — a normal section, not
   pinned and not scroll-driven, one screen tall, laid out like the old end state
   (building left, plans + list right, caption bottom-left).
   ============================================================ */
.assembly[data-mode="static"] .assembly__sticky { position: relative; top: auto; height: min(calc(100svh - 4.7rem), 58rem); min-height: 34rem; }
/* static: it starts in its final layout (is-choose is in the markup), so no shrink /
   fade-in transitions on load; and the building is sized from THIS box (shorter than a
   full screen), keeping ~5.5rem clear top and bottom so it never meets the caption */
.assembly[data-mode="static"] .assembly__sticky,
.assembly[data-mode="static"] .assembly__sticky #houseSvg,
.assembly[data-mode="static"] .assembly__sticky .assembly__side { transition: none; }
@media (min-width: 901px) {
  .assembly[data-mode="static"] .assembly__sticky.has-side.is-choose #houseSvg { max-height: calc(min(calc(100svh - 4.7rem), 58rem) - 11rem); }
}
@media (max-width: 900px) {
  /* phones / tablets: stack hint → building → plans + list → caption, all in flow */
  .assembly[data-mode="static"] .assembly__sticky { height: auto; min-height: 0; flex-direction: column; padding: 2rem var(--pad) 3rem; }
  .assembly[data-mode="static"] .assembly__sticky .assembly__side { display: block; position: static; transform: none; opacity: 1; pointer-events: auto; width: 100%; max-height: none; margin-top: 1.5rem; }
  .assembly[data-mode="static"] .assembly__caption { position: static; margin-top: 1.5rem; max-width: none; }
  .assembly[data-mode="static"] .assembly__hint { position: static; order: -1; margin-bottom: 1rem; text-align: center; }
  .assembly[data-mode="static"] .floor-tag { display: none !important; } /* the list below names the properties */
}

/* homepage statement heading ("Σχεδιασμός Υψηλών προδιαγραφών…") a little smaller:
   was clamp(2.2rem, 5.5vw, 4.6rem) → ~17% less at every width */
.statement h2 { font-size: clamp(1.9rem, 4.5vw, 3.8rem); }

/* co-founder portraits smaller: capped at 21rem wide (4:5 → ~336×420) instead of the
   full card width; the bio text keeps the card's width */
.teo .person__photo { max-width: 21rem; }

/* co-founder cards as boxes: photo + text framed together — thin line, very light fill,
   inner padding; both boxes share the row height and end on the universities line */
.teo .person { display: flex; flex-direction: column; border: 1px solid #d9d9d9; background: #e6e6e6; padding: clamp(1.25rem, 2.4vw, 2.2rem); } /* 10% black, same as the footer band (Filip, 2026-10-15) */
.teo .person .person__role { color: #666; } /* keeps the small label readable on the darker grey */
.teo .person__schools { margin-top: auto; }
.teo .person__bio { margin-bottom: 1.3rem; }

/* ============================================================
   Apartment pages: photo tour — the gallery beside a sticky floor plan; a gold dot
   glides to where each photo was taken and the plan switches floor for maisonettes
   (engine: extras.js "Recent works" block; layout: teo.css .tworks__*).
   ============================================================ */
.teo .unit-tour { margin-top: clamp(3rem, 8vh, 5rem); padding-top: clamp(2rem, 5vh, 3rem); border-top: 1px solid var(--line); }
.teo .unit-tour__intro { max-width: 36rem; color: #6f6b64; line-height: 1.65; margin-bottom: clamp(1.8rem, 4vh, 2.8rem); }
@media (min-width: 901px) {
  /* keep the whole plan on screen while it is pinned; the figure keeps the plans'
     own 890:1100 shape, so the dot's % position lines up with the drawing */
  .teo .unit-tour .tworks__plan { width: min(100%, calc((100vh - 12rem) * 890 / 1100)); margin-inline: auto; }
}

/* Έργα hero: "Projects" on the LEFT (on the content's left edge, like the rest of the page)
   and the intro text + button on the RIGHT of the same band, instead of under the title */
.hero__wordmark.hero__wordmark--left { left: calc(max(0px, (100vw - 90rem) / 2) + var(--pad)); transform: none; }
@media (min-width: 821px) {
  .hero--split { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero--split > .hero__wordmark-space,
  .hero--split > .hero__row { grid-area: 1 / 1; }
  .hero--split > .hero__row { align-self: center; margin: 0; }
  .hero--split > .hero__media { grid-area: 2 / 1; margin-top: clamp(1.5rem, 4vh, 3rem); }
}

/* Έργα: 360° virtual tour (Kuula embed). Base rules; on Έργα the tours sit inside the dark
   virtual-tour section (.works--tours) — see the .teo .works .vtour overrides at the end */
.teo .vtour { padding: 0 var(--pad) clamp(4rem, 10vh, 7rem); }
.teo .vtour__head { max-width: 46rem; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.teo .vtour__eyebrow { margin-bottom: 0.9rem; }
.teo .vtour__title { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin-bottom: 0.8rem; }
.teo .vtour__head p:not(.eyebrow-dot) { color: #4c4c4c; font-size: 1rem; line-height: 1.8; }
.teo .vtour__frame { display: block; width: 100%; height: 640px; border: 0; background: var(--off); }
@media (max-width: 700px) { .teo .vtour__frame { height: 460px; } }
/* the same tour on the 3rd–4th floor maisonette pages, below their photo tour */
.teo .unit-vtour { margin-top: clamp(3rem, 8vh, 5rem); padding-top: clamp(2rem, 5vh, 3rem); border-top: 1px solid var(--line); }

/* homepage title: never touch the window edges — it starts at the page's side margin and
   main.js fits it to the window width minus that margin on both sides */
.hero__wordmark:not([data-fit]) { left: var(--pad); }

/* fixed title on a white band: the band spans the window from under the nav to the
   bottom of the letters, so the intro text + button that scroll up after it slide BEHIND
   the title and disappear, instead of running through the letters. (The band sits inside
   the title's own layer, so the hero photo still slides over title and band together.)
   Έργα: its intro is beside the title on desktop, so the band is used there only when
   the layout is stacked (phones / tablets). */
.hero__wordmark:not([data-fit])::before {
  content: ""; position: absolute; z-index: -1;
  top: -8rem; bottom: -0.1em; left: -100vw; right: -100vw;
  background: var(--white);
}
@media (max-width: 820px) {
  .hero__wordmark[data-fit]::before {
    content: ""; position: absolute; z-index: -1;
    top: -8rem; bottom: -0.1em; left: -100vw; right: -100vw;
    background: var(--white);
  }
}

/* Έργα: the 360° tours sit inside the dark virtual-tour section (styled like the homepage's
   "Recent works"), under its title. position: relative lifts them above the gridlines. */
.teo .works .vtour { position: relative; padding: 0; }
.teo .works .vtour__head p:not(.eyebrow-dot) { color: rgba(255, 255, 255, 0.72); }
.teo .works .vtour__frame { background: #111; }
.teo .works .vtour + .vtour { margin-top: clamp(3rem, 8vh, 5rem); } /* second tour under the first */
/* "Εικονική περιήγηση" is longer than "Πρόσφατα Έργα": a slightly smaller title keeps it on one line.
   Written as typed (sentence case), not in capitals — Filip, 2026-10-14 */
.teo .works--tours .works__title { font-size: clamp(2.6rem, 7.2vw, 7rem); text-transform: none; }
.teo .works--tours .works__title { margin-bottom: calc(clamp(2rem, 6vh, 4rem) + 2px); } /* 2px more room above the first tour (Filip, 2026-10-15) */
@media (max-width: 900px) {
  /* phones/tablets: room between the last tour and the Επικοινωνία button (between the two
     tours this margin collapses into the larger margin-top above) */
  .teo .works .vtour { margin-bottom: clamp(2rem, 6vh, 4rem); }
}

/* very narrow phones (~320px): logo + language button + contact pill do not fit on one
   line in Greek, and the pill was cut off at the right edge — tighten the header there */
@media (max-width: 359px) {
  .nav { gap: 0.6rem; }
  .nav__logo { height: 1.7rem; }
  .nav__right { gap: 0.5rem; }
}

/* footer: both phone numbers on one line split by a bar, and a little more room under the logo
   (.footer__left in the selector so it outranks teo.css, which loads after this file) */
.teo .footer__left .footer__logo { margin-bottom: 3.6rem; }
.teo .footer__phones a { white-space: nowrap; }
.teo .footer__phones a:hover { opacity: 0.6; }
.teo .footer__sep { margin: 0 0.7em; opacity: 0.4; }

/* footer: "Τα έργα μας" + a link to the project; the label looks like the "· ΜΕΖΟΝΕΤΑ"
   captions under the homepage's Recent works photos as they actually render: the em is 0.72rem,
   but its language span picks up `.work figcaption span` (1.15rem, display font) — so 1.15rem,
   600, uppercase, 70% opacity, and the em's 1.38px tracking (0.075em at this size) */
.teo .footer__works { margin-top: 2.2rem; }
.teo .footer__label { font-family: var(--display); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.075em; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.8rem; }

/* footer on a full-width 10% grey band (Filip, 2026-10-14). Same full-bleed ::before trick as
   main > .teo::before; z-index -1 keeps it under the footer's content but above the white panel.
   On the grey: the email field is a slightly darker grey, the message underline and the legal
   line get a little darker so they still read; the send button is the site's black pill. */
.teo .footer { position: relative; }
.teo footer.footer::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: #e6e6e6; z-index: -1;
}
.teo .footer .footer__form input { background: #dcdcdc; }  /* grey, a shade darker than the band so it still reads as a field (Filip: "make the whites grey") */
/* send button: the site's black pill (same as the header's Επικοινωνία, .pill--dark) — Filip: "more like a button" */
.teo .footer .footer__form button {
  background: var(--ink); color: #fff; border-radius: 100px;
  padding: 0.75rem 1.9rem; font-size: 0.9rem; font-weight: 600;
  transition: background 0.25s, transform 0.25s var(--ease);
}
.teo .footer .footer__form button:hover { background: #333; transform: scale(1.03); }
.teo .footer .footer__form--full textarea { border-bottom-color: #bdb9b3; }
.teo .footer .footer__form--full textarea:focus { border-bottom-color: var(--ink); }
.teo .footer .footer__legal { color: #5f5f5f; }