/*
Theme Name: theplace
Theme URI: https://theplace.lt
Author: theplace
Author URI: https://theplace.lt
Description: Premium real estate developer theme — cinematic, editorial, bilingual LT/EN. Custom Post Type for projects (Projektai) so a non-technical owner can add finished homes through the WordPress admin.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theplace
*/

/* ==========================================================================
   theplace — design system
   Aesthetic: editorial / cinematic / architectural
   ========================================================================== */

:root{
  --ink:        #0b0b0a;
  --ink-2:      #14130f;
  --ink-3:      #1c1b16;
  --bone:       #efe9dc;
  --bone-2:     #ddd5c3;
  --paper:      #ffffff;
  --wood:       #a87d5a;
  --wood-soft:  #c9a884;
  --wood-glow:  #f1c98a;
  --grey:       #6b6863;
  --grey-soft:  #a39e92;
  --line:       rgba(239,233,220,0.10);
  --line-2:     rgba(239,233,220,0.18);
  --line-dark:  rgba(11,11,10,0.10);

  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans:  'Manrope', system-ui, -apple-system, sans-serif;

  --ease:   cubic-bezier(.2,.7,.2,1);
  --ease-2: cubic-bezier(.85,0,.15,1);

  --pad-x: clamp(20px, 4vw, 56px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--bone);
  font-weight:400;
  line-height:1.55;
  font-size:16px;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer}

::selection{background:var(--wood);color:var(--ink)}

/* Subtle film grain over entire page */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:200;
  opacity:.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
  mix-blend-mode:overlay;
}

/* =========================  NAVIGATION  ========================= */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  padding:22px var(--pad-x);
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px;
  letter-spacing:.02em;
  mix-blend-mode: difference;
  color:#fff;
}
.nav__logo{
  font-family:var(--serif);
  font-weight:300;
  font-size:22px;
  font-style:italic;
  letter-spacing:-.02em;
  font-variation-settings:"opsz" 144;
}
.nav__logo .dot{color:var(--wood-soft)}
.nav__menu{display:flex;gap:32px}
.nav__menu a{color:inherit;opacity:.85;transition:opacity .3s var(--ease)}
.nav__menu a:hover{opacity:1}
.lang{
  display:flex;gap:0;align-items:center;
  border:1px solid currentColor;border-radius:999px;
  padding:4px;
  font-size:11px;letter-spacing:.12em;font-weight:500;
}
.lang button{
  padding:5px 11px;border-radius:999px;
  letter-spacing:inherit;
  transition:all .3s var(--ease);
}
.lang button.active{background:#fff;color:var(--ink)}
@media (max-width:760px){
  .nav{padding:16px 18px}
  .nav__menu{display:none}
}

/* =========================  HERO (cinematic stage)  ========================= */
.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-rows: 55fr 45fr;
  padding: 100px var(--pad-x) 60px;
  background:
    radial-gradient(120% 90% at 50% 30%, #1a1a16 0%, #0c0c0a 55%, #050504 100%);
  overflow:hidden;
  isolation:isolate;
}

/* upper zone: house composition */
.stage{
  position:relative;
  display:flex;align-items:flex-end;justify-content:center;
  min-height: 0;
}
.stage__svg{
  width:min(1100px, 94vw);
  height:auto;
  max-height: 100%;
  filter: drop-shadow(0 50px 60px rgba(0,0,0,.7));
  animation: floaty 12s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{ transform: translateY(0) }
  50%   { transform: translateY(-8px) }
}

/* lower zone: type */
.hero__copy{
  position:relative; z-index:2;
  max-width: 1100px;
  margin: 0 auto;
  text-align:center;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap: 22px;
  padding-top: 20px;
}
.hero__kicker{
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--wood-soft);
  opacity:0;
  animation: fadeUp 1s var(--ease) 4.0s forwards;
}
.hero__title{
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  font-variation-settings:"opsz" 144;
  font-size: clamp(28px, 4.8vw, 64px);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--bone);
  max-width: 22ch;
  opacity:0;
  animation: fadeUp 1.2s var(--ease) 4.2s forwards;
}
.hero__title em{
  font-style:normal;
  color:var(--wood-glow);
  font-weight:400;
}
.hero__sub{
  font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  color: var(--grey-soft);
  opacity:0;
  animation: fadeUp 1s var(--ease) 4.6s forwards;
}
.hero__scroll{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--grey-soft);
  opacity:0;
  animation: fadeUp 1s var(--ease) 4.8s forwards;
}
.hero__scroll::after{
  content:""; display:block; width:1px; height:30px;
  background:linear-gradient(var(--grey-soft), transparent);
  margin: 10px auto 0;
  animation: pulse 2.2s var(--ease) infinite;
}
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(24px) }
  to  { opacity:1; transform: translateY(0) }
}
@keyframes pulse{
  0%,100%{ transform: scaleY(1); opacity:.6 }
  50%    { transform: scaleY(1.4); opacity:1 }
}

/* =========================  HOUSE SVG ANIMATIONS  ========================= */
/* stars */
.s-star{ opacity:0; animation: twinkle 4s ease-in-out infinite }
.s-star:nth-child(odd){ animation-delay:1s }
.s-star:nth-child(3n){ animation-delay:2s }
@keyframes twinkle{
  0%,100%{ opacity:.25 }
  50%    { opacity:.9 }
}
.s-stars{ animation: fadeIn 1.4s var(--ease) .2s forwards; opacity:0 }
@keyframes fadeIn{ to{ opacity:1 } }

/* moon */
.s-moon{ opacity:0; animation: fadeIn 1.8s var(--ease) .8s forwards; transform-origin:center }

/* horizon line */
.s-ground{
  stroke-dasharray:1200; stroke-dashoffset:1200;
  animation: draw 1.4s var(--ease) 1.2s forwards;
}

/* volumes rise */
.s-volume-l, .s-volume-r{
  transform-origin: 50% 100%;
  transform: scaleY(0);
}
.s-volume-l{ animation: rise 1.1s var(--ease) 1.8s forwards }
.s-volume-r{ animation: rise 1.1s var(--ease) 2.0s forwards }

/* gables draw + fill */
.s-gable-l, .s-gable-r{
  stroke-dasharray:700; stroke-dashoffset:700;
  fill-opacity:0;
}
.s-gable-l{ animation: drawFill 1.2s var(--ease) 2.5s forwards }
.s-gable-r{ animation: drawFill 1.2s var(--ease) 2.7s forwards }

/* connector */
.s-middle{
  transform-origin: 50% 100%;
  transform: scaleY(0);
  animation: rise .9s var(--ease) 3.1s forwards;
}

/* windows (glass) */
.s-windows > *{ opacity:0; animation: fadeIn .8s var(--ease) forwards }
.s-windows > *:nth-child(1){ animation-delay:3.5s }
.s-windows > *:nth-child(2){ animation-delay:3.6s }
.s-windows > *:nth-child(3){ animation-delay:3.7s }
.s-windows > *:nth-child(4){ animation-delay:3.8s }
.s-windows > *:nth-child(5){ animation-delay:3.9s }

/* mullions */
.s-mullion{ opacity:0; animation: fadeIn .6s var(--ease) 4.0s forwards }

/* interior lights — the warm glow inside the gable windows */
.s-light{
  opacity:0;
  animation: lightOn 1.4s var(--ease) 4.2s forwards,
             breathe 5s ease-in-out 5.6s infinite;
}
@keyframes lightOn{ to{ opacity:.7 } }
@keyframes breathe{
  0%,100%{ opacity:.65 }
  50%    { opacity:.85 }
}

/* deck stretches */
.s-deck{
  transform-origin: 50% 50%;
  transform: scaleX(0);
  animation: stretch 1s var(--ease) 4.0s forwards;
}

/* mist */
.s-mist{ opacity:0; animation: mistDrift 8s ease-in-out 4.5s infinite }
@keyframes mistDrift{
  0%,100%{ opacity:0; transform: translateX(0) }
  50%    { opacity:.35; transform: translateX(-30px) }
}

@keyframes draw     { to{ stroke-dashoffset:0 } }
@keyframes drawFill { 0%{stroke-dashoffset:700;fill-opacity:0} 60%{stroke-dashoffset:0;fill-opacity:0} 100%{stroke-dashoffset:0;fill-opacity:1} }
@keyframes rise     { to{ transform: scaleY(1) } }
@keyframes stretch  { to{ transform: scaleX(1) } }

/* =========================  SECTION SHELL  ========================= */
section{ position:relative; padding: clamp(80px, 12vw, 160px) var(--pad-x) }
.shell{ max-width: 1240px; margin: 0 auto }
.eyebrow{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--wood-soft);
  margin-bottom:24px;
  display:flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:var(--wood-soft);
}
.eyebrow.center{ justify-content:center }

/* =========================  MANIFESTO  ========================= */
.manifesto{ background: var(--ink) }
.manifesto__grid{
  display:grid; grid-template-columns: 1.05fr 1fr; gap:clamp(40px, 7vw, 100px);
  align-items:start;
}
.manifesto__lead{
  font-family:var(--serif);
  font-weight:300;
  font-size: clamp(28px, 3.6vw, 50px);
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--bone);
  font-variation-settings:"opsz" 144;
}
.manifesto__lead em{ font-style:italic; color: var(--wood-glow) }
.manifesto__body{
  font-size:15px;
  line-height:1.78;
  color: var(--grey-soft);
  padding-top: 8px;
}
.manifesto__body p + p{ margin-top: 18px }
.manifesto__sign{
  margin-top:32px;
  display:inline-block;
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  color: var(--bone);
}
@media (max-width:860px){
  .manifesto__grid{ grid-template-columns: 1fr; gap:32px }
}

/* =========================  PROJECTS PREVIEW (front page)  ========================= */
.preview{
  background: var(--bone);
  color: var(--ink);
}
.preview .eyebrow{ color: var(--ink) }
.preview .eyebrow::before{ background: var(--ink) }
.preview__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:60px; gap:40px; flex-wrap:wrap;
}
.preview__head h2{
  font-family:var(--serif);
  font-weight:300;
  font-size: clamp(40px, 6vw, 92px);
  line-height:.96;
  letter-spacing:-.03em;
  color:var(--ink);
  max-width: 16ch;
  font-variation-settings:"opsz" 144;
}
.preview__head h2 em{ font-style:italic; color:var(--wood) }
.preview__head .link{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  align-self: flex-start; margin-top:8px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.preview__head .link:hover{ color: var(--wood); border-color: var(--wood) }

.cards{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
@media (max-width:760px){ .cards{ grid-template-columns: 1fr } }

.card{
  display:flex; flex-direction:column;
  position:relative;
  transition: transform .5s var(--ease);
}
.card:hover{ transform: translateY(-6px) }
.card__img{
  position:relative;
  aspect-ratio: 4/3;
  background: var(--ink);
  overflow:hidden;
  margin-bottom: 22px;
}
.card__img img, .card__img svg{
  width:100%; height:100%; object-fit:cover; transition: transform 1.4s var(--ease);
}
.card:hover .card__img img, .card:hover .card__img svg{ transform: scale(1.04) }
.card__status{
  position:absolute; top:18px; left:18px;
  background: var(--ink); color: var(--bone);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  padding: 8px 14px;
  border-radius: 999px;
}
.card__status--sold{ background: var(--grey) }
.card__status--reserved{ background: var(--wood); color: var(--ink) }

.card__title{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing:-.015em;
  color: var(--ink);
  margin-bottom: 8px;
  font-variation-settings:"opsz" 144;
}
.card__title em{ font-style:italic; color: var(--wood) }
.card__meta{
  display:flex; gap:18px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--grey);
}

/* =========================  PROCESS (buyer's journey)  ========================= */
.process{ background: var(--ink-2) }
.process__head{
  text-align:center; margin-bottom:80px;
}
.process__head h2{
  font-family:var(--serif);
  font-weight:300;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height:1.05;
  letter-spacing:-.02em;
  max-width: 20ch;
  margin: 0 auto;
  font-variation-settings:"opsz" 144;
}
.process__head h2 em{ font-style:italic; color: var(--wood-glow) }

.process__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.process__step{
  background: var(--ink-2);
  padding: 40px 28px 48px;
  display:flex; flex-direction:column; gap:18px;
  transition: background .4s var(--ease);
}
.process__step:hover{ background: var(--ink-3) }
.process__step .n{
  font-family:var(--serif);
  font-style:italic;
  font-size: 56px;
  font-weight: 300;
  color: var(--wood-soft);
  line-height:1;
  font-variation-settings:"opsz" 144;
}
.process__step h3{
  font-family:var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing:-.01em;
  color: var(--bone);
  font-variation-settings:"opsz" 144;
}
.process__step p{
  font-size: 14px;
  line-height: 1.65;
  color: var(--grey-soft);
}
@media (max-width:900px){ .process__grid{ grid-template-columns: repeat(2,1fr) } }
@media (max-width:520px){ .process__grid{ grid-template-columns: 1fr } }

/* =========================  CTA / CONTACT  ========================= */
.cta{
  background: var(--bone);
  color: var(--ink);
  padding: clamp(100px, 14vw, 180px) var(--pad-x);
  text-align:center;
}
.cta h2{
  font-family:var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1.02;
  letter-spacing:-.025em;
  max-width: 16ch;
  margin: 0 auto 40px;
  font-variation-settings:"opsz" 144;
}
.cta h2 em{ font-style:normal; color: var(--wood) }
.cta__btn{
  display:inline-flex; align-items:center; gap:14px;
  background: var(--ink);
  color: var(--bone);
  padding: 22px 36px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing:.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all .4s var(--ease);
}
.cta__btn:hover{ background: var(--wood); color: var(--ink); transform: translateY(-2px) }
.cta__btn svg{ transition: transform .4s var(--ease) }
.cta__btn:hover svg{ transform: translateX(4px) }
.cta__meta{
  margin-top: 60px;
  display:flex; gap:60px; justify-content:center; flex-wrap:wrap;
  font-size:13px;
  color: var(--grey);
}
.cta__meta strong{
  display:block;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  margin-top: 4px;
}

/* =========================  FOOTER  ========================= */
.foot{
  background: var(--ink);
  color: var(--grey-soft);
  padding: 60px var(--pad-x) 40px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:20px;
  font-size: 12px;
  letter-spacing: .04em;
  border-top: 1px solid var(--line);
}
.foot__brand{
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  color: var(--bone);
  font-weight:300;
  font-variation-settings:"opsz" 144;
}
.foot__brand .dot{ color: var(--wood-soft) }

/* =========================  ARCHIVE (Projects listing page)  ========================= */
.archive{
  background: var(--ink);
  min-height: 100vh;
  padding: 140px var(--pad-x) 100px;
}
.archive__head{
  max-width: 1240px; margin: 0 auto 80px;
  text-align:center;
}
.archive__head h1{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 7vw, 110px);
  line-height: .95;
  letter-spacing:-.03em;
  margin-bottom: 24px;
  font-variation-settings:"opsz" 144;
}
.archive__head h1 em{ font-style:italic; color: var(--wood-glow) }
.archive__head p{
  max-width: 56ch; margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
  color: var(--grey-soft);
}
.archive__grid{
  max-width: 1240px; margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}
@media (max-width:760px){ .archive__grid{ grid-template-columns: 1fr; gap: 32px } }

.archive .card__title{ color: var(--bone) }
.archive .card__title em{ color: var(--wood-glow) }
.archive .card__meta{ color: var(--grey-soft) }

/* =========================  SINGLE PROJECT  ========================= */
.single{
  background: var(--ink);
  min-height: 100vh;
}
.single__back{
  position: absolute;
  top: 100px; left: var(--pad-x);
  font-size: 11px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--grey-soft);
  z-index: 5;
  transition: color .3s var(--ease);
}
.single__back:hover{ color: var(--bone) }
.single__back::before{ content: "← "; }

.single__hero{
  position: relative;
  height: 80vh; min-height: 540px;
  overflow:hidden;
}
.single__hero img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.single__hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(11,11,10,.9) 100%);
}
.single__heroCopy{
  position: absolute;
  left: var(--pad-x); right: var(--pad-x); bottom: 50px;
  z-index: 2;
  max-width: 1240px; margin: 0 auto;
}
.single__status{
  display:inline-block;
  background: var(--ink); color: var(--bone);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  padding: 9px 16px; border-radius: 999px;
  margin-bottom: 20px;
}
.single__status--sold{ background: var(--grey) }
.single__status--reserved{ background: var(--wood); color: var(--ink) }
.single__title{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 96px);
  line-height: .98;
  letter-spacing:-.03em;
  color: var(--bone);
  max-width: 16ch;
  font-variation-settings:"opsz" 144;
}
.single__title em{ font-style:italic; color: var(--wood-glow) }

.single__body{
  max-width: 1240px;
  margin: 0 auto;
  padding: 100px var(--pad-x);
}
.single__specs{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 80px;
}
.single__specs .cell{
  padding: 30px 24px 30px 0;
  border-right: 1px solid var(--line);
}
.single__specs .cell:last-child{ border-right: 0 }
.single__specs dt{
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color: var(--grey-soft);
  margin-bottom: 12px;
}
.single__specs dd{
  font-family: var(--serif);
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  color: var(--bone);
  font-variation-settings:"opsz" 144;
}
.single__specs dd small{
  font-size: 14px; font-style: italic; color: var(--grey-soft); margin-left: 4px;
}
@media (max-width:760px){
  .single__specs{ grid-template-columns: repeat(2, 1fr) }
  .single__specs .cell:nth-child(2){ border-right: 0 }
}

.single__content{
  display:grid; grid-template-columns: 1fr 1.4fr; gap: 80px;
}
.single__content h2{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.1;
  color: var(--bone);
  font-variation-settings:"opsz" 144;
}
.single__content h2 em{ font-style: italic; color: var(--wood-glow) }
.single__content .body{
  font-size: 15px;
  line-height: 1.8;
  color: var(--grey-soft);
}
.single__content .body p + p{ margin-top: 18px }
.single__content .body h2, .single__content .body h3{
  color: var(--bone);
  font-family: var(--serif);
  font-weight: 400;
  margin: 32px 0 12px;
}
@media (max-width:860px){
  .single__content{ grid-template-columns: 1fr; gap: 32px }
}

/* generic page template */
.page{
  background: var(--ink);
  min-height: 100vh;
  padding: 140px var(--pad-x) 100px;
}
.page__inner{ max-width: 800px; margin: 0 auto }
.page h1{
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 6vw, 80px);
  line-height: .98; letter-spacing:-.025em;
  margin-bottom: 40px;
  font-variation-settings:"opsz" 144;
}
.page__content{
  font-size: 16px; line-height: 1.75; color: var(--grey-soft);
}
.page__content p + p{ margin-top: 18px }
.page__content h2{ color: var(--bone); font-family: var(--serif); margin: 32px 0 12px; font-weight: 400 }

/* Scroll reveal */
.reveal{ opacity:0; transform: translateY(40px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease) }
.reveal.in{ opacity:1; transform: translateY(0) }

/* hide scroll cue on short screens */
@media (max-height: 700px){
  .hero__scroll{ display:none }
}


/* ==========================================================================
   NEW COMPONENTS (gallery, lightbox, floor plan, map, forms, newsletter,
   cookie banner, modal, WP menu integration)
   ========================================================================== */

/* ---------------- Section titles inside single project ---------------- */
.single__sectionTitle{
	font-family:var(--serif);
	font-size:clamp(28px, 4vw, 44px);
	font-weight:400;
	margin:90px 0 30px;
	letter-spacing:-.02em;
}
.single__sectionTitle .muted{
	color:var(--grey-soft);
	font-size:.5em;
	font-style:italic;
	margin-left:8px;
	vertical-align:middle;
}

/* ---------------- Gallery grid ---------------- */
.gallery-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
	gap:14px;
}
.gallery-grid__item{
	position:relative;
	display:block;
	aspect-ratio:4/3;
	overflow:hidden;
	background:var(--ink-2);
	cursor:zoom-in;
}
.gallery-grid__item img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .4s;
	display:block;
}
.gallery-grid__item:hover img{
	transform:scale(1.04);
	filter:brightness(1.05);
}
.gallery-grid__item::after{
	content:'+';
	position:absolute;
	top:14px;
	right:14px;
	width:36px;
	height:36px;
	background:rgba(11,11,10,.7);
	color:var(--bone);
	border-radius:50%;
	display:grid;
	place-items:center;
	font-size:22px;
	font-weight:300;
	opacity:0;
	transform:translateY(-4px);
	transition:opacity .3s, transform .3s;
	pointer-events:none;
}
.gallery-grid__item:hover::after{ opacity:1; transform:translateY(0); }

/* Make every 6th item span 2 columns wide for visual rhythm */
@media (min-width: 900px){
	.gallery-grid__item:nth-child(6n+1){ grid-column:span 2; aspect-ratio:21/9; }
}

/* ---------------- Floor plan ---------------- */
.single__floor{ margin-top:30px; }
.floor-plan{
	position:relative;
	display:block;
	background:var(--bone);
	padding:40px;
	max-width:900px;
	margin:0 auto;
	cursor:zoom-in;
	overflow:hidden;
}
.floor-plan img{
	width:100%;
	height:auto;
	display:block;
	transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.floor-plan:hover img{ transform:scale(1.02); }
.floor-plan__hint{
	position:absolute;
	bottom:16px;
	right:20px;
	background:var(--ink);
	color:var(--bone);
	padding:6px 12px;
	font-size:11px;
	letter-spacing:.06em;
	text-transform:uppercase;
	font-family:var(--sans);
}

/* ---------------- Map ---------------- */
.single__map{ margin-top:30px; }
.map{
	width:100%;
	height:460px;
	background:var(--ink-2);
	border-radius:0;
	position:relative;
	z-index:1;
}
.map .leaflet-container{ background:var(--ink-2); }
.map .leaflet-popup-content-wrapper{
	background:var(--ink);
	color:var(--bone);
	border-radius:0;
	box-shadow:0 6px 30px rgba(0,0,0,.4);
}
.map .leaflet-popup-content{ margin:14px 18px; font-family:var(--sans); font-size:13px; }
.map .leaflet-popup-tip{ background:var(--ink); }

/* ---------------- Lightbox ---------------- */
.lightbox{
	position:fixed; inset:0;
	background:rgba(8,7,5,.96);
	z-index:9999;
	display:none;
	align-items:center;
	justify-content:center;
	padding:40px;
	cursor:zoom-out;
	animation:lightboxFade .25s ease-out;
}
@keyframes lightboxFade{ from{opacity:0} to{opacity:1} }
.lightbox.is-open{ display:flex; }
.lightbox__img{
	max-width:96vw;
	max-height:90vh;
	object-fit:contain;
	display:block;
	box-shadow:0 30px 100px rgba(0,0,0,.6);
}
.lightbox__close,
.lightbox__nav{
	position:absolute;
	background:transparent;
	border:0;
	color:var(--bone);
	cursor:pointer;
	width:48px;
	height:48px;
	display:grid;
	place-items:center;
	font-size:24px;
	font-weight:300;
	transition:transform .3s, background .3s;
}
.lightbox__close{ top:24px; right:24px; font-size:34px; }
.lightbox__nav{ top:50%; transform:translateY(-50%); border:1px solid rgba(239,233,220,.2); }
.lightbox__nav--prev{ left:24px; }
.lightbox__nav--next{ right:24px; }
.lightbox__nav:hover{ background:rgba(239,233,220,.1); }
.lightbox__counter{
	position:absolute;
	bottom:24px;
	left:50%;
	transform:translateX(-50%);
	color:var(--bone);
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:.1em;
	opacity:.6;
}

/* ---------------- Modal (inquiry form) ---------------- */
.modal{
	position:fixed; inset:0;
	z-index:9000;
	display:none;
	align-items:center;
	justify-content:center;
	padding:40px 20px;
}
.modal.is-open{ display:flex; animation:modalFade .3s ease-out; }
@keyframes modalFade{ from{opacity:0} to{opacity:1} }
.modal__backdrop{
	position:absolute; inset:0;
	background:rgba(8,7,5,.85);
	cursor:pointer;
}
.modal__panel{
	position:relative;
	background:var(--bone);
	color:var(--ink);
	max-width:540px;
	width:100%;
	padding:50px 50px 40px;
	max-height:90vh;
	overflow-y:auto;
	box-shadow:0 30px 80px rgba(0,0,0,.4);
	animation:modalRise .4s cubic-bezier(.2,.7,.2,1);
}
@keyframes modalRise{ from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal__close{
	position:absolute;
	top:16px;
	right:18px;
	background:transparent;
	border:0;
	font-size:26px;
	cursor:pointer;
	color:var(--ink);
	width:36px;
	height:36px;
	line-height:1;
}
.modal__title{
	font-family:var(--serif);
	font-size:34px;
	font-weight:400;
	margin:0 0 8px;
	letter-spacing:-.02em;
}
.modal__lead{
	color:#555;
	margin:0 0 28px;
	font-size:15px;
	line-height:1.5;
}

/* ---------------- Form ---------------- */
.form__field{
	display:block;
	margin-bottom:16px;
}
.form__field > span{
	display:block;
	font-size:12px;
	letter-spacing:.08em;
	text-transform:uppercase;
	margin-bottom:6px;
	color:#444;
}
.form__field input,
.form__field textarea{
	width:100%;
	padding:12px 14px;
	border:1px solid #cfc8b6;
	background:transparent;
	font-family:var(--sans);
	font-size:15px;
	color:var(--ink);
	border-radius:0;
	transition:border-color .3s, background .3s;
}
.form__field input:focus,
.form__field textarea:focus{
	outline:none;
	border-color:var(--ink);
	background:rgba(255,255,255,.4);
}
.form__field textarea{ resize:vertical; min-height:90px; }
.form__bottom{
	display:flex;
	align-items:center;
	gap:16px;
	margin-top:24px;
	flex-wrap:wrap;
}
.form__bottom .cta__btn{ background:var(--ink); color:var(--bone); }
.form__status{
	font-size:13px;
	color:#555;
	flex:1;
}
.form__status.is-error{ color:#a83232; }
.form__status.is-success{ color:#3a7a3a; }
.form__legal{
	display:block;
	margin-top:18px;
	font-size:11px;
	line-height:1.5;
	color:#888;
}

/* ---------------- Newsletter ---------------- */
.newsletter{
	background:var(--ink-2);
	color:var(--bone);
	padding:90px 20px;
	text-align:center;
	border-top:1px solid rgba(239,233,220,.06);
}
.newsletter__inner{
	max-width:560px;
	margin:0 auto;
}
.newsletter__title{
	font-family:var(--serif);
	font-size:clamp(28px, 4vw, 42px);
	font-weight:400;
	margin:0 0 12px;
	letter-spacing:-.02em;
}
.newsletter__lead{
	color:rgba(239,233,220,.6);
	max-width:440px;
	margin:0 auto 30px;
	font-size:15px;
	line-height:1.6;
}
.newsletter__form{
	display:flex;
	gap:0;
	max-width:440px;
	margin:0 auto;
	border:1px solid rgba(239,233,220,.2);
	position:relative;
	flex-wrap:wrap;
}
.newsletter__form input[type="email"]{
	flex:1;
	min-width:0;
	padding:14px 18px;
	background:transparent;
	border:0;
	color:var(--bone);
	font-family:var(--sans);
	font-size:14px;
}
.newsletter__form input[type="email"]:focus{ outline:none; background:rgba(239,233,220,.04); }
.newsletter__form input[type="email"]::placeholder{ color:rgba(239,233,220,.4); }
.newsletter__form button{
	background:var(--bone);
	color:var(--ink);
	border:0;
	padding:0 24px;
	font-family:var(--sans);
	font-size:13px;
	letter-spacing:.06em;
	text-transform:uppercase;
	font-weight:600;
	cursor:pointer;
	transition:background .3s;
}
.newsletter__form button:hover{ background:#fff; }
.newsletter__status{
	position:absolute;
	bottom:-32px;
	left:0;
	right:0;
	text-align:center;
	font-size:13px;
	color:rgba(239,233,220,.7);
}
.newsletter__status.is-error{ color:#e08080; }
.newsletter__status.is-success{ color:#9bbf7a; }

/* ---------------- Cookie consent ---------------- */
.cookie{
	position:fixed;
	bottom:20px;
	left:20px;
	right:20px;
	max-width:540px;
	background:var(--ink);
	color:var(--bone);
	padding:18px 22px;
	display:flex;
	align-items:center;
	gap:18px;
	z-index:8000;
	box-shadow:0 14px 40px rgba(0,0,0,.5);
	font-size:13px;
	line-height:1.5;
	animation:cookieRise .5s cubic-bezier(.2,.7,.2,1);
}
@keyframes cookieRise{ from{transform:translateY(40px);opacity:0} to{transform:translateY(0);opacity:1} }
.cookie p{ margin:0; flex:1; }
.cookie__btn{
	background:var(--bone);
	color:var(--ink);
	border:0;
	padding:9px 18px;
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:.06em;
	text-transform:uppercase;
	font-weight:600;
	cursor:pointer;
	white-space:nowrap;
	transition:background .3s;
}
.cookie__btn:hover{ background:#fff; }

/* ---------------- WP menu integration ---------------- */
.nav__menu .nav__menuList{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	gap:36px;
	align-items:center;
}
.nav__menu .nav__menuList li{ margin:0; padding:0; }
.nav__menu .nav__menuList a{
	color:var(--bone);
	text-decoration:none;
	font-size:13px;
	letter-spacing:.04em;
	font-family:var(--sans);
	transition:opacity .3s;
	opacity:.78;
}
.nav__menu .nav__menuList a:hover,
.nav__menu .nav__menuList .current-menu-item a{ opacity:1; }

/* ---------------- Logo image override ---------------- */
.nav__logo img,
.foot__brand img{ display:block; }

/* ---------------- Responsive form/modal ---------------- */
@media (max-width: 540px){
	.modal__panel{ padding:36px 24px 30px; }
	.modal__title{ font-size:26px; }
	.newsletter__form{ flex-direction:column; }
	.newsletter__form button{ padding:14px; }
	.cookie{ flex-direction:column; align-items:stretch; text-align:center; }
	.cookie__btn{ align-self:center; }
	.gallery-grid{ grid-template-columns:1fr; }
	.lightbox__nav{ width:42px; height:42px; }
	.lightbox__nav--prev{ left:8px; }
	.lightbox__nav--next{ right:8px; }
}
