/* ==========================================================================
   אור טוב התחדשות עירונית – theme styles
   Layout language modelled on netanel.co.il: fixed dark navbar with a centred
   logo, full-screen stacked sticky sections, pill buttons, vertical projects
   accordion, dark contact footer. Brand palette from the Or Tov logo.
   ========================================================================== */

@font-face { font-family: "Lia Diplomat"; src: url("../fonts/LiaDiplomat-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lia Diplomat"; src: url("../fonts/LiaDiplomat-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --dark: #163049;
  --dark-2: #0f2236;
  --cream: #e6e4da;
  --cream-2: #f3f2ed;
  --paper: #fdfaee;
  --white: #ffffff;
  --ink: #163049;
  --ink-2: #3d4f63;
  --ink-3: #6b7a8b;
  --sage: #5b7290;
  --line: rgba(22, 48, 73, 0.16);
  --line-soft: rgba(22, 48, 73, 0.09);

  --stage-done: #163049;
  --stage-build: #2f4d6e;
  --stage-permit: #5b7290;
  --stage-licensing: #9aabbd;
  --stage-signed: #cfd6de;
  --stage-early: #e4e8ec;
  --stage-none: #eceff2;
  --placeholder-bg: #dfe4ea;
  --placeholder-fg: #8797aa;

  --font: "Lia Diplomat", "Arial Hebrew", Arial, sans-serif;
  --header-h: 96px;
  --gutter: clamp(16px, 4vw, 48px);
  --container: 1360px;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
}
@media (max-width: 767px) { :root { --header-h: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body { margin: 0; overflow-x: clip; background: var(--white); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.4; direction: rtl; text-align: start; -webkit-font-smoothing: antialiased; }
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 700; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.05; margin: 0 0 0.5em; }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.skip-link { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--dark); color: var(--cream); padding: 8px 14px; z-index: 200; }
.skip-link:focus { top: 8px; }
.site-main { margin-top: var(--header-h); }

/* Pills (buttons) ---------------------------------------------------------- */
.pill, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; width: fit-content;
  border: 2px solid var(--white); border-radius: 999px; color: var(--white); background: transparent;
  font-size: 1.25rem; line-height: 1.1; padding: 0.7em 2.4em; cursor: pointer; white-space: nowrap;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.pill:hover, .btn:hover { background: var(--white); color: var(--dark); }
.pill--white { background: var(--white); color: var(--dark); }
.pill--white:hover { background: var(--cream); }
.pill--dark, .btn--solid { background: var(--dark); border-color: var(--dark); color: var(--white); }
.pill--dark:hover, .btn--solid:hover { background: var(--dark-2); border-color: var(--dark-2); color: var(--white); }
.pill--outline, .btn--ghost { border-color: var(--dark); color: var(--dark); }
.pill--outline:hover, .btn--ghost:hover { background: var(--dark); color: var(--white); }
.pill--big { font-size: 1.35rem; padding: 0.9em 3.2em; }
.btn--light { background: var(--white); color: var(--dark); }
.btn--small { font-size: 1rem; padding: 0.5em 1.4em; border-color: var(--dark); color: var(--dark); }
.btn--small:hover { background: var(--dark); color: var(--white); }
@media (max-width: 767px) { .pill, .btn { font-size: 1.1rem; padding: 0.7em 1.9em; } }

/* Navbar ------------------------------------------------------------------- */
.navbar { position: fixed; top: 0; inset-inline: 0; z-index: 90; background: var(--dark); color: var(--cream); }
.admin-bar .navbar { top: 32px; }
@media (max-width: 782px) { .admin-bar .navbar { top: 46px; } }
.navbar__bar { height: var(--header-h); padding: 0 20px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; position: relative; z-index: 2; }
@media (min-width: 1536px) { .navbar__bar { padding: 0 48px; } }
.navbar__nav { display: none; justify-self: start; }
@media (min-width: 1200px) { .navbar__nav { display: block; } }
.navbar__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; font-size: 1.2rem; }
.navbar__list a { display: block; padding: 1rem 0; border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.navbar__list a:hover, .navbar__list .current-menu-item > a { border-bottom-color: var(--cream); }
.navbar__logo { justify-self: center; display: block; height: 54px; transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.4s ease; }
.navbar__logo img { height: 100%; width: auto; }
.navbar__logo--hidden { opacity: 0; }
.menu-open .navbar__logo { opacity: 1 !important; visibility: visible !important; }
/* When the menu is opened from the hero, the navbar logo drops in with the panel */
.navbar__logo--drop { transform: translateY(-160%); opacity: 1 !important; visibility: visible !important; }
.menu-open .navbar__logo--drop { transform: translateY(0); }
.navbar__logo--no-anim { transition: none !important; }
.menu-open .hero-logo { opacity: 0; }
@media (max-width: 767px) { .navbar__logo { height: 36px; } }
.navbar__end { justify-self: end; display: flex; align-items: center; gap: 1.25rem; direction: ltr; }
.navbar__phone { font-size: 1.5rem; font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.navbar__phone:hover { text-decoration: underline; }
@media (min-width: 1024px) { .navbar__phone { font-size: 1.8rem; } }
.burger { width: 28px; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; }
.burger span { display: block; width: 100%; height: 2px; background: var(--white); border-radius: 2px; transition: transform 0.3s ease-in-out; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-9px) rotate(-45deg); }
@media (max-width: 767px) { .burger { width: 22px; height: 14px; } .burger[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); } .burger[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); } }

/* Overlay menu -------------------------------------------------------------- */
/* Overlay menu slides down from behind the top bar (netanel-style) */
.menu { position: fixed; inset: 0; z-index: 85; background: var(--dark); color: var(--cream); padding-top: var(--header-h); overflow-y: auto; transform: translateY(-100%); transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1); will-change: transform; }
.menu.is-open { transform: translateY(0); }
.admin-bar .menu { padding-top: calc(var(--header-h) + 32px); }
.menu[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .menu { transition-duration: 0.01ms; } }
.menu__inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: clamp(2rem, 12vh, 10rem) 40px 3rem; display: grid; grid-template-columns: 320px 1fr; gap: 3rem; align-items: start; }
.menu__watermark { position: absolute; inset-inline: 0; top: clamp(6rem, 16vh, 13rem); z-index: 0; display: flex; justify-content: center; pointer-events: none; opacity: 0.06; }
.menu__watermark img { width: min(70vw, 900px); height: auto; }
@media (max-width: 767px) { .menu__watermark { top: 8rem; opacity: 0.05; } .menu__watermark img { width: 85vw; } }
.menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; font-size: 1.3rem; padding-top: 3.5rem; }
.menu__list a { display: inline-block; padding: 0.15em 0.35em; border: 1px solid transparent; }
.menu__list .current-menu-item > a { border-color: var(--cream); }
.menu__list a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.menu__title { font-size: 2.5rem; font-weight: 400; margin: 0 0 1rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(230, 228, 218, 0.5); }
.menu__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.menu__card { position: relative; aspect-ratio: 216 / 316; overflow: hidden; background: var(--dark-2); display: block; }
.menu__card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.menu__card:hover img { transform: scale(1.05); }
.menu__card-label { position: absolute; inset-inline: 0; bottom: 0; padding: 2.5rem 1rem 0.9rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent); display: flex; justify-content: space-between; align-items: center; font-size: 1.05rem; color: var(--white); }
.menu__card-label i { width: 14px; height: 14px; border-inline-start: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
@media (max-width: 1023px) { .menu__cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .menu__inner { grid-template-columns: 1fr; padding: 2rem 20px 4rem; gap: 2.5rem; }
  .menu__list { padding-top: 0; font-size: 1.25rem; }
  .menu__title { font-size: 1.9rem; }
  .menu__cards { gap: 0.75rem; }
}

/* Hero logo (scrolls into the navbar) and side dots --------------------------- */
.hero-logo { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: center; align-items: center; pointer-events: none; transition: opacity 0.3s; }
.hero-logo img { width: 62%; max-width: 760px; height: auto; opacity: 0.5; will-change: transform; }
@media (max-width: 767px) { .hero-logo { height: 80vh; } .hero-logo img { width: 80%; } }
.dots { position: fixed; inset-inline-start: 20px; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 12px; mix-blend-mode: difference; }
.dots a { display: block; width: 2px; height: 20px; border-radius: 2px; background: rgba(255, 255, 255, 0.4); transition: height 0.5s, background-color 0.5s; }
.dots a.is-active { height: 40px; background: var(--white); }
@media (max-width: 767px) { .dots { display: none; } }
.contact-tab { position: fixed; left: 0; bottom: 20vh; z-index: 60; background: var(--dark); color: var(--cream); writing-mode: vertical-rl; transform: rotate(180deg); padding: 1.4rem 0.9rem 1.2rem; font-size: 1rem; clip-path: polygon(100% 0, 0 12%, 0 88%, 100% 100%); transition: background-color 0.3s; }
.contact-tab:hover { background: var(--dark-2); }
@media (max-width: 767px) { .contact-tab { font-size: 0.85rem; padding: 1.1rem 0.7rem 0.9rem; bottom: 22vh; } }

/* Stacked sections ----------------------------------------------------------- */
.stack { position: sticky; top: var(--header-h); }
.admin-bar .stack { top: calc(var(--header-h) + 32px); }
.hero { z-index: 1; }
.sec1 { z-index: 2; }
.sec2 { z-index: 3; }
.sec3 { z-index: 4; }
.sec4 { z-index: 5; }
.sec5, .sec6 { position: relative; z-index: 30; background: var(--white); }

/* Hero */
.hero { background: var(--dark); }
.hero__media { position: relative; height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); overflow: hidden; background: var(--cream); }
.hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; transition: opacity 0.8s; }
.hero__media.is-playing .hero__poster { opacity: 0; }
.hero__video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.8s; }
.hero__media.is-playing .hero__video { opacity: 1; }
.hero__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); aspect-ratio: 16 / 9; min-width: 100%; min-height: 100%; max-width: none; width: auto; height: auto; border: 0; }
.hero__shade { position: absolute; inset: 0; z-index: 3; background: rgba(0, 0, 0, 0.2); }
.hero__sound { position: absolute; bottom: 20px; inset-inline-end: 20px; z-index: 5; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.4); color: var(--white); display: grid; place-items: center; cursor: pointer; transition: background-color 0.3s; }
.hero__sound:hover { background: rgba(0, 0, 0, 0.6); }
.hero__sound.is-on .hero__sound-x { display: none; }
/* Optional headline/subtext over the hero (empty by default; set in the Customizer). */
.hero__caption { position: absolute; z-index: 4; inset-inline: 0; bottom: clamp(2.5rem, 7vw, 5rem); padding: 0 var(--gutter); text-align: center; color: var(--white); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); pointer-events: none; }
.hero__title { margin: 0 auto; max-width: 20ch; font-size: clamp(1.8rem, 4.5vw, 3.4rem); font-weight: 700; line-height: 1.1; }
.hero__text { margin: 0.75rem auto 0; max-width: 46ch; font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 300; }
@media (max-width: 767px) { .hero__media { height: auto; aspect-ratio: 1 / 1; } .hero__sound { inset-inline-end: auto; inset-inline-start: 20px; } .hero__caption { bottom: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
/* On phones the YouTube player shows its own chrome for a moment; default to the still image there. */
@media (max-width: 767px) { body:not(.hero-video-mobile) .hero__video:not(.hero__video--native), body:not(.hero-video-mobile) .hero__video:not(.hero__video--native) ~ .hero__sound { display: none; } }

/* Sec1: white frame with image and two-tone headline */
.sec1 { background: var(--white); min-height: calc(100vh - var(--header-h)); padding: 40px; }
.sec1__frame { position: relative; min-height: calc(100vh - var(--header-h) - 80px); overflow: hidden; display: flex; align-items: flex-start; background: var(--cream); }
.sec1__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.sec1__frame::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.28) 30%, rgba(0, 0, 0, 0.05) 55%, transparent 70%); }
.sec1__content { position: relative; z-index: 1; padding: 3rem 4rem 5rem; width: 100%; }
.sec1__title { font-size: clamp(2.6rem, 6vw, 6.5rem); line-height: 0.95; letter-spacing: 0.02em; margin: 0 0 2.5rem; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.15); }
.sec1__line { display: block; }
.sec1__line--light { color: var(--white); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 18px rgba(0, 0, 0, 0.4); }
.sec1__line--dark { color: var(--dark); }
@media (max-width: 767px) {
  .sec1 { padding: 12px; min-height: calc(100vh - 4rem); }
  .sec1__frame { min-height: 824px; align-items: flex-start; }
  .sec1__content { padding: 2.5rem 1.25rem; }
  .sec1__title { margin-bottom: 2rem; }
}

/* Sec2: full image with centred title */
.sec2 { position: sticky; height: calc(100vh - var(--header-h)); background: var(--dark); overflow: hidden; }
.sec2__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sec2__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); color: var(--white); display: flex; justify-content: center; align-items: center; text-align: center; padding: 0 20px; }
.sec2__content { padding-bottom: 4rem; }
.sec2__title { font-size: clamp(1.7rem, 4vw, 3.5rem); line-height: 1.1; color: var(--white); margin: 0 0 1.25rem; }
.sec2__content .pill { margin: 0 auto; }
@media (max-width: 767px) { .sec2 { height: 814px; } .sec2__overlay { align-items: flex-start; padding-top: 10rem; } }

/* Sec3: fade slider */
.sec3 { background: var(--white); }
.sec3__swiper { height: calc(100vh - var(--header-h)); }
.sec3__slide { position: relative; }
.sec3__img { width: 100%; height: 100%; object-fit: cover; }
/* Caption group anchored top-left (align-items: flex-end = left in RTL); text stays centered inside the group */
.sec3__caption { position: absolute; inset-inline: 0; top: 0; bottom: auto; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), transparent); color: var(--white); display: flex; flex-direction: column; align-items: flex-end; padding: 4rem 4rem 9rem; }
.sec3__cap-inner { width: min(440px, 82vw); text-align: center; }
.sec3__caption h2 { margin: 0 0 1rem; }
.sec3__kicker { display: block; font-size: clamp(1.1rem, 2vw, 2rem); letter-spacing: 0.25rem; margin-bottom: 1.25rem; }
.sec3__name { display: block; font-size: clamp(2.5rem, 5.5vw, 5rem); line-height: 1.1; font-weight: 700; }
.sec3__name small { display: block; font-size: 0.35em; font-weight: 400; letter-spacing: 0.2em; margin-top: 0.5rem; }
.sec3__dots { inset-inline: auto !important; left: 4rem !important; right: auto !important; bottom: auto !important; top: 20rem !important; width: min(440px, 82vw) !important; text-align: center !important; }
.sec3__dots .swiper-pagination-bullet { width: 10px; height: 10px; background: var(--white); opacity: 0.5; border-radius: 6px; transition: width 0.4s, opacity 0.4s; }
.sec3__dots .swiper-pagination-bullet-active { width: 60px; opacity: 1; }
@media (max-width: 767px) { .sec3__swiper { height: 828px; } .sec3__caption { padding: 3rem 1.5rem 6rem; } .sec3__cap-inner { width: min(320px, 86vw); } .sec3__dots { left: 1.5rem !important; top: 13rem !important; width: min(320px, 86vw) !important; } }

/* Sec4: numbers on cream with three tall images */
.sec4 { background: var(--cream); }
.sec4__inner { display: flex; flex-direction: row; min-height: calc(100vh - var(--header-h)); }
.sec4__text { width: 50%; padding: 40px; display: flex; align-items: center; }
.sec4__text > * { margin: 0 auto; }
.sec4__title { font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; margin: 0 0 2.5rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 1.5rem; max-width: 540px; }
.stat b { display: block; font-size: 2.3rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { display: block; font-size: 1rem; line-height: 1.25; color: var(--ink-2); }
.sec4__media { width: 58%; padding: 40px 40px 40px 60px; }
.sec4__media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-content: center; }
.sec4__card { position: relative; aspect-ratio: 298 / 658; overflow: hidden; background: var(--stage-signed); }
.sec4__card img { width: 100%; height: 100%; object-fit: cover; }
.sec4__fade { position: absolute; inset-inline: 0; bottom: 0; height: 40%; background: linear-gradient(to top, var(--cream), transparent); }
@media (max-width: 1023px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .sec4 { position: relative; top: auto; }
  .sec4__inner { flex-direction: column; }
  .sec4__text, .sec4__media { width: 100%; padding: 4rem 20px 2rem; }
  .sec4__title, .stats { text-align: center; }
  .stats { margin: 0 auto; }
  .sec4__media { padding: 20px; gap: 12px; }
  .sec4__card { aspect-ratio: 298 / 286; }
}

/* Sec5: story + projects accordion */
.sec5 { padding: 40px 40px 80px; }
.sec5__title { font-size: 2.5rem; text-align: center; font-weight: 400; margin: 0.5rem 0 1.5rem; }
.sec5__story { display: flex; gap: 3rem; align-items: center; justify-content: center; padding: 1.25rem 0 3rem; max-width: 1240px; margin: 0 auto; }
.sec5__figure { flex: 0 0 34%; max-width: 420px; }
.sec5__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sec5__figure .sec5__logo { aspect-ratio: auto; width: 85%; margin: 0 auto; object-fit: contain; }
.sec5__lead { margin: 0.75rem 0 0; font-size: 1rem; color: var(--ink-2); }
.sec5__lead b { font-size: 1.15rem; color: var(--ink); margin-inline-end: 0.4em; }
.sec5__text { flex: 0 1 620px; }
.sec5__prose { font-size: 1.25rem; line-height: 1.35; text-align: justify; }
.sec5__prose p { margin: 0 0 1em; }
.sec5__text .pill { margin-top: 0.5rem; }
@media (max-width: 767px) {
  .sec5 { padding: 3rem 12px 3rem; background: var(--paper); }
  .sec5__title { font-size: 2.2rem; padding-top: 2rem; }
  .sec5__story { flex-direction: column; gap: 2rem; text-align: center; }
  .sec5__figure { flex-basis: auto; width: 70%; }
  .sec5__prose { text-align: center; font-size: 1.15rem; }
  .sec5__text .pill { margin-inline: auto; }
}

.projects-view { max-width: 1400px; margin: 0 auto; }
.projects-view__head { display: flex; justify-content: space-between; align-items: center; padding: 5rem 0 1.25rem; }
.projects-view__spacer, .projects-view__toggle { width: 10rem; }
.projects-view__title { font-size: 2.5rem; text-align: center; font-weight: 400; margin: 0; }
.projects-view__toggle { display: flex; justify-content: flex-end; gap: 0.5rem; }
.projects-view__toggle button { border: 0; background: transparent; padding: 4px; opacity: 0.4; cursor: pointer; transition: opacity 0.3s; color: var(--dark); }
.projects-view__toggle button:hover, .projects-view__toggle button.is-active { opacity: 1; }
@media (max-width: 767px) {
  .projects-view { background: var(--white); padding: 12px; }
  .projects-view__head { flex-wrap: wrap; padding: 2rem 0 1rem; }
  .projects-view__spacer { display: none; }
  .projects-view__title { width: 100%; font-size: 2.2rem; margin-bottom: 1rem; }
  .projects-view__toggle { width: 100%; }
}

/* Accordion */
.acc { --acc-closed: 85px; --acc-open: 850px; display: flex; flex-direction: row; height: min(730px, calc(100vh - var(--header-h) - 40px)); min-height: 460px; width: 100%; overflow: hidden; user-select: none; }
.acc[hidden] { display: none; }
.acc__panel { position: relative; overflow: hidden; flex: 0 0 var(--acc-closed); width: var(--acc-closed); border-inline-start: 8px solid rgba(255, 255, 255, 0.2); cursor: pointer; transition: flex-basis 0.6s var(--ease-out), width 0.6s var(--ease-out); --panel-color: var(--stage-none); }
.acc__panel:first-child { border-inline-start: 0; }
.acc__panel.is-active { flex-basis: var(--acc-open); width: var(--acc-open); cursor: default; }
.acc__panel--done { --panel-color: var(--stage-done); }
.acc__panel--build { --panel-color: var(--stage-build); }
.acc__panel--permit { --panel-color: var(--stage-permit); }
.acc__panel--licensing { --panel-color: var(--stage-licensing); }
.acc__panel--signed { --panel-color: var(--stage-signed); }
.acc__panel--early { --panel-color: var(--stage-early); }
.acc__media { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--acc-open); }
.acc__media img, .acc__media .acc__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.acc__overlay { position: absolute; inset: 0; background: var(--panel-color); opacity: 0.7; transition: opacity 0.4s; }
.acc__panel.is-active .acc__overlay { opacity: 0; pointer-events: none; }
.acc__closed { position: absolute; inset: 0; width: 100%; padding: 2rem 0; border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; align-items: center; color: var(--white); opacity: 1; transition: opacity 0.4s; }
.acc__panel.is-active .acc__closed { opacity: 0; pointer-events: none; }
.acc__vname { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.2rem; letter-spacing: 0.05em; white-space: nowrap; max-height: 24ch; overflow: hidden; text-overflow: ellipsis; }
.acc__vcity { font-size: 0.9rem; font-weight: 700; margin-top: auto; }
.acc__open { position: absolute; inset: 0; padding: 1.25rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 60%); color: var(--white); opacity: 0; pointer-events: none; transition: opacity 0.5s 0.1s; display: flex; flex-direction: column; justify-content: flex-end; }
.acc__panel.is-active .acc__open { opacity: 1; pointer-events: auto; }
.acc__center { position: absolute; top: 33%; inset-inline-start: 50%; transform: translateX(50%); text-align: center; width: max-content; max-width: 90%; }
.acc__name { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; margin: 0; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); }
.acc__sub { font-size: clamp(1rem, 1.6vw, 1.5rem); letter-spacing: 0.15em; border-top: 2px solid var(--white); border-bottom: 2px solid var(--white); padding: 0.4em 0; margin: 1rem auto 0; width: fit-content; }
.acc__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.acc__units { margin: 0; font-size: 1rem; }
.acc__units b { font-size: 1.5rem; }
@media (max-width: 767px) {
  .acc { flex-direction: column; height: auto; min-height: 0; --acc-closed: 80px; }
  .acc__panel { flex: 0 0 var(--acc-closed); width: 100% !important; height: var(--acc-closed); border-inline-start: 0; border-top: 8px solid rgba(255, 255, 255, 0.2); transition: flex-basis 0.6s var(--ease-out), height 0.6s var(--ease-out); }
  .acc__panel.is-active { flex-basis: 460px; height: 460px; }
  .acc__media { width: 100%; }
  .acc__closed { flex-direction: row; padding: 0.5rem 1.5rem; }
  .acc__vname { writing-mode: horizontal-tb; transform: none; }
  .acc__vcity { margin-top: 0; }
  .acc__bottom { flex-direction: column; align-items: center; text-align: center; }
  .acc__center { top: 28%; }
}

/* Grid view */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pgrid[hidden] { display: none; }
.pgrid__card img, .pgrid__card .pgrid__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pgrid__name { display: block; font-size: 1.25rem; font-weight: 700; margin-top: 0.6rem; }
.pgrid__meta { display: block; font-size: 0.95rem; color: var(--ink-2); }
@media (max-width: 1023px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .pgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* Projects archive: 3-view toggle (grid / accordion / bands) */
.projects-archive__bar { max-width: var(--container); margin: 0 auto; display: flex; justify-content: flex-end; padding: 0.5rem var(--gutter) 1.5rem; }
.pgrid--archive { max-width: var(--container); margin: 0 auto 4rem; padding: 0 var(--gutter); }
.acc--scroll { max-width: var(--container); margin: 0 auto 4rem; overflow-x: auto; overflow-y: hidden; --acc-open: min(680px, 78vw); scroll-snap-type: x proximity; }
.acc--scroll .acc__panel { scroll-snap-align: end; }
.pgrid__card.is-hidden, .acc__panel.is-hidden { display: none; }
@media (max-width: 767px) { .acc--scroll { max-width: none; margin-inline: 0; overflow: visible; } }

/* Sec6 */
.sec6 { padding: 5rem 20px; display: flex; justify-content: center; }

/* Contact + footer ------------------------------------------------------------ */
.contact { position: relative; z-index: 30; background: var(--dark); color: var(--white); }
.contact__inner { max-width: 1520px; margin: 0 auto; padding: 5rem 40px 3rem; display: flex; gap: 3rem; justify-content: space-between; }
.contact__brand { flex: 0 1 58%; }
.contact__logo { display: block; width: 320px; margin-bottom: 1.5rem; }
.contact__social { display: flex; gap: 1rem; margin-bottom: 2rem; }
.contact__social a { opacity: 0.9; }
.contact__social a:hover { opacity: 1; }
.contact__details { list-style: none; margin: 0 0 2.5rem; padding: 0 1.5rem 0 0; position: relative; font-size: 1.25rem; font-weight: 300; display: flex; flex-direction: column; gap: 0.6rem; }
.contact__details::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.6em; bottom: 0.6em; width: 2px; background: var(--white); }
.contact__details::after, .contact__details li:first-child::before { content: ""; position: absolute; inset-inline-start: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--white); }
.contact__details li:first-child::before { top: 0.4em; }
.contact__details::after { bottom: 0.4em; }
.contact__details li { position: relative; }
.contact__details--empty { padding-inline-end: 0; font-size: 1rem; opacity: 0.7; }
.contact__details--empty::before, .contact__details--empty::after, .contact__details--empty li:first-child::before { display: none; }
.contact__details a:hover { text-decoration: underline; }
.contact__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, max-content); gap: 1rem 4rem; font-size: 1.25rem; }
.contact__links a:hover { text-decoration: underline; }
.contact__tagline { margin: 1.75rem 0 0; max-width: 52ch; font-size: 1.05rem; font-weight: 300; line-height: 1.6; opacity: 0.85; }
.contact__form { flex: 0 1 480px; }
.contact__title { font-size: 1.625rem; margin: 0.3rem 0 0.75rem; }
.contact__text { font-size: 1.25rem; font-weight: 300; margin: 0 0 1.25rem; }
.contact__legal { max-width: 1520px; margin: 0 auto; padding: 1.25rem 40px 4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.95rem; font-weight: 300; }
.contact__legal-links { display: flex; gap: 1.5rem; }
.contact__legal-links a:hover { text-decoration: underline; }
@media (max-width: 1023px) {
  .contact__inner { flex-direction: column; padding: 3rem 20px 2rem; }
  .contact__brand { text-align: center; }
  .contact__logo, .contact__social, .contact__details { margin-inline: auto; justify-content: center; }
  .contact__details { padding-inline-end: 0; }
  .contact__details::before, .contact__details::after, .contact__details li:first-child::before { display: none; }
  .contact__links { grid-template-columns: 1fr; justify-items: center; gap: 0.6rem; }
  .contact__form { flex-basis: auto; max-width: 480px; margin: 0 auto; width: 100%; }
  .contact__title, .contact__text { text-align: center; }
  .contact__legal { justify-content: center; text-align: center; padding-bottom: 2.5rem; }
}

/* Form (underline style) */
.form { display: grid; grid-template-columns: 1fr; gap: 1.25rem; font-size: 1.25rem; }
.field { position: relative; }
.field input, .field select, .field textarea { width: 100%; font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 0.6rem 0.75rem; appearance: none; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: 0 1px 0 0 currentColor; }
.field label { position: absolute; top: 0.6rem; inset-inline-start: 0.75rem; pointer-events: none; transition: opacity 0.3s; }
.field input:focus + label, .field input:not(:placeholder-shown) + label { opacity: 0; }
.field select option { color: var(--ink); }
.field--select select { padding-inline-start: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 20px; background-position: left 0.5rem center; }
.field--area textarea { border: 1px solid currentColor; border-top: 0; border-inline-end: 0; margin-top: 0.75rem; padding-top: 0; min-height: 5rem; resize: vertical; }
.field textarea::placeholder, .field input::placeholder { color: inherit; opacity: 1; }
.form__consent { font-size: 0.875rem; font-weight: 300; border-bottom: 1px solid currentColor; padding-bottom: 0.75rem; }
.form__consent label { display: flex; align-items: center; gap: 0.6rem; }
.form__consent input { width: 18px; height: 18px; accent-color: var(--white); }
.form__consent p { margin: 0.5rem 0 0; }
.form__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: flex-start; }
.form__actions .pill--white { min-width: 50%; }
.form__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form__notice { padding: 0.8em 1em; border: 1px solid currentColor; border-radius: 4px; margin: 0; font-size: 1rem; }
.form__notice--error { background: rgba(160, 60, 50, 0.3); }
@media (max-width: 767px) { .form__actions { justify-content: center; } .form__actions .pill--white { width: 100%; } }

/* Light variant of the form on the contact page */
.page--contact .form { color: var(--ink); }
.page--contact .field--select select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23163049' stroke-width='1.5'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); }
.page--contact .form__consent input { accent-color: var(--dark); }
.page--contact .pill--white { background: var(--dark); color: var(--white); border-color: var(--dark); }
.page--contact .pill--outline { border-color: var(--dark); color: var(--dark); }
.page--contact .form__notice--ok { background: var(--cream); }

/* Contact page — netanel-style form card + info column */
.contact-page { background: var(--white); color: var(--ink); }
.contact-page__inner { max-width: var(--container); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) clamp(3rem, 7vw, 6rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact-page__title { margin: 0 0 1.25rem; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; }
.contact-page__lead { margin: 0 0 2rem; font-size: 1.15rem; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.contact-page__details { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.contact-page__detail { font-size: 1.15rem; padding-inline-start: 0.9rem; border-inline-start: 2px solid var(--dark); }
.contact-page__detail--note { border-inline-start-color: var(--line); color: var(--ink-3); font-size: 1rem; }
.contact-page__detail a:hover { text-decoration: underline; }
.contact-page__social { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; color: var(--dark); }
.contact-page__wa { font-weight: 700; }
.contact-page__wa:hover { text-decoration: underline; }

.contact-card { position: relative; background: #f3f2ed; border-radius: 8px; padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 2.75rem) calc(clamp(1.75rem, 3vw, 2.75rem) + 10px); box-shadow: 0 30px 60px -32px rgba(22, 48, 73, 0.4); overflow: hidden; }
.contact-card::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 10px; background: var(--dark); }
.contact-card__title { margin: 0 0 0.5rem; font-size: 1.6rem; font-weight: 700; }
.contact-card__text { margin: 0 0 1.5rem; font-size: 1.05rem; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 860px) { .contact-page__inner { grid-template-columns: 1fr; } }

/* Contact page with a project image as background */
.contact-page--bg { position: relative; background: var(--dark); color: var(--white); isolation: isolate; }
.contact-page--bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--contact-bg); background-size: cover; background-position: center;
}
.contact-page--bg::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(22, 48, 73, 0.72), rgba(22, 48, 73, 0.82));
}
.contact-page--bg .contact-page__title,
.contact-page--bg .contact-page__lead,
.contact-page--bg .contact-page__detail,
.contact-page--bg .contact-page__detail a,
.contact-page--bg .contact-page__social { color: var(--white); }
.contact-page--bg .kicker { color: rgba(255, 255, 255, 0.75); }
.contact-page--bg .contact-page__detail { border-inline-start-color: rgba(255, 255, 255, 0.6); }
.contact-page--bg .contact-page__detail--note { border-inline-start-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.75); }

/* Footer with the form suppressed (contact page) — center the brand block */
.contact__inner--brand-only { justify-content: center; }
.contact__inner--brand-only .contact__brand { flex: 1 1 100%; max-width: 900px; text-align: center; }
.contact__inner--brand-only .contact__logo, .contact__inner--brand-only .contact__social, .contact__inner--brand-only .contact__details { margin-inline: auto; }
.contact__inner--brand-only .contact__social { justify-content: center; }
.contact__inner--brand-only .contact__details { justify-content: center; padding-inline-end: 0; }
.contact__inner--brand-only .contact__details::before, .contact__inner--brand-only .contact__details::after, .contact__inner--brand-only .contact__details li:first-child::before { display: none; }
.contact__inner--brand-only .contact__links { justify-content: center; }

.wa-float { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 40; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(20, 24, 22, 0.25); }
.wa-float:hover { background: #1fb457; }

/* Page-load fade (like Netanel's animate-fade-in) */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.js-ready .fade-in { animation: fadeUp 1s ease-out 0.6s forwards; opacity: 0; }

/* ==========================================================================
   Inner pages: projects archive (bands), single project, generic pages
   ========================================================================== */
.section-title { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom: 0.4em; }
.page-title { font-size: clamp(2.2rem, 4.5vw, 3.6rem); margin-bottom: 0.3em; }
.section-lead { font-size: 1.15rem; color: var(--ink-2); max-width: 62ch; margin: 0 0 1.5rem; }
.prose { max-width: 66ch; }
.prose p { margin: 0 0 1.1em; }
.prose p:last-child { margin-bottom: 0; }
.prose h2, .prose h3 { margin-top: 1.6em; }

.units { display: flex; align-items: center; gap: 1.1rem; margin: 0 0 1.5rem; }
.units__item { display: flex; flex-direction: column; line-height: 1; }
.units__item b { font-size: 2.4rem; font-variant-numeric: tabular-nums; }
.units__item span { font-size: 0.85rem; opacity: 0.8; margin-top: 0.35rem; }
.units__arrow { width: 44px; height: 1px; background: currentColor; position: relative; opacity: 0.7; }
.units__arrow::before { content: ""; position: absolute; left: 0; top: -4px; width: 8px; height: 8px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.band__content .btn, .project__content .btn { display: flex; width: fit-content; }

.projects-head { padding: clamp(2.5rem, 6vw, 4.5rem) 0 2rem; }
.projects-head__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; }
.filter__btn { padding: 0.5em 1em; border: 1px solid var(--line); border-radius: 999px; font-size: 0.95rem; color: var(--ink-2); background: transparent; }
.filter__btn small { font-size: 0.8em; color: var(--ink-3); margin-inline-start: 0.25em; }
.filter__btn:hover { border-color: var(--ink); color: var(--ink); }
.filter__btn.is-active { background: var(--dark); color: var(--white); border-color: var(--dark); }
.filter__btn.is-active small { color: rgba(255, 255, 255, 0.7); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.85rem; color: var(--ink-2); }
.legend__item::before { content: ""; display: inline-block; width: 22px; height: 11px; margin-inline-end: 0.5em; vertical-align: -1px; background: var(--stage-none); border: 1px solid rgba(36, 40, 42, 0.15); }
.legend__item--done::before { background: var(--stage-done); }
.legend__item--build::before { background: var(--stage-build); }
.legend__item--permit::before { background: var(--stage-permit); }
.legend__item--licensing::before { background: var(--stage-licensing); }
.legend__item--signed::before { background: var(--stage-signed); }
.legend__item--early::before { background: var(--stage-early); }

.bands { border-top: 1px solid var(--line); }
.band { position: relative; --strip-bg: var(--stage-none); --strip-fg: var(--ink); }
.band--done { --strip-bg: var(--stage-done); --strip-fg: var(--cream); }
.band--build { --strip-bg: var(--stage-build); --strip-fg: var(--cream); }
.band--permit { --strip-bg: var(--stage-permit); --strip-fg: var(--ink); }
.band--licensing { --strip-bg: var(--stage-licensing); }
.band--signed { --strip-bg: var(--stage-signed); }
.band--early { --strip-bg: var(--stage-early); }
.band.is-hidden { display: none; }
.band__strip { position: sticky; top: var(--header-h); z-index: 5; background: var(--strip-bg); color: var(--strip-fg); border-bottom: 1px solid rgba(36, 40, 42, 0.12); }
.admin-bar .band__strip { top: calc(var(--header-h) + 32px); }
.band__strip-inner { padding: 0.8rem var(--gutter); display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; }
.band__name { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; display: flex; align-items: baseline; gap: 0.6em; }
.band__name small { font-size: 0.95rem; font-weight: 400; opacity: 0.8; }
.band__meta { display: flex; align-items: baseline; gap: 1.5rem; font-size: 0.95rem; white-space: nowrap; }
.band__status { opacity: 0.9; }
.band__units b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.band__units i { display: inline-block; width: 18px; height: 1px; background: currentColor; vertical-align: middle; margin: 0 0.4em; opacity: 0.6; }
.band__units span { opacity: 0.75; font-size: 0.85rem; }
.band__count { opacity: 0.6; font-variant-numeric: tabular-nums; }
.band__body { position: relative; height: min(78vh, 780px); min-height: 460px; background: var(--placeholder-bg); overflow: hidden; }
.band__media { position: absolute; inset: 0; display: block; }
.band__img { width: 100%; height: 100%; object-fit: cover; }
.band__body::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to left, rgba(20, 24, 22, 0.72) 0%, rgba(20, 24, 22, 0.42) 38%, rgba(20, 24, 22, 0.05) 68%); }
.band__content { position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); z-index: 2; color: var(--white); padding: 0 var(--gutter); max-width: min(560px, 90%); }
.band__kicker { margin: 0 0 0.5rem; font-size: 0.95rem; opacity: 0.85; }
.band__title { font-size: clamp(1.9rem, 3.4vw, 3rem); color: var(--white); margin-bottom: 0.4em; }
.band__text { margin: 0 0 1.4rem; font-size: 1.05rem; max-width: 40ch; opacity: 0.92; }
.band__content .units { color: var(--white); }
@media (max-width: 720px) {
  .band__strip-inner { flex-direction: column; gap: 0.2rem; padding: 0.65rem var(--gutter); }
  .band__meta { gap: 1rem; font-size: 0.85rem; }
  .band__count { display: none; }
  .band__body { height: 64vh; min-height: 420px; }
  .band__body::after { background: linear-gradient(to top, rgba(20, 24, 22, 0.85) 0%, rgba(20, 24, 22, 0.35) 55%, rgba(20, 24, 22, 0.05) 100%); }
  .band__content { top: auto; bottom: 0; transform: none; padding-bottom: 1.5rem; max-width: 100%; }
  .band__text { display: none; }
  .units__item b { font-size: 2rem; }
}

.project { --strip-bg: var(--stage-none); --strip-fg: var(--ink); }
.project--done { --strip-bg: var(--stage-done); --strip-fg: var(--cream); }
.project--build { --strip-bg: var(--stage-build); --strip-fg: var(--cream); }
.project--permit { --strip-bg: var(--stage-permit); }
.project--licensing { --strip-bg: var(--stage-licensing); }
.project--signed { --strip-bg: var(--stage-signed); }
.project--early { --strip-bg: var(--stage-early); }
.project__strip { background: var(--strip-bg); color: var(--strip-fg); }
.project__strip-inner { max-width: var(--container); margin: 0 auto; padding: 1.5rem var(--gutter) 1.25rem; display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1.5rem; align-items: baseline; }
.project__back { grid-column: 1 / -1; font-size: 0.9rem; opacity: 0.8; }
.project__back::before { content: "→ "; }
.project__title { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); }
.project__title small { font-size: 1rem; font-weight: 400; opacity: 0.8; margin-inline-start: 0.5em; }
.project__status { font-size: 1rem; font-weight: 700; }
.project__hero { height: min(70vh, 720px); min-height: 320px; background: var(--placeholder-bg); }
.project__img { width: 100%; height: 100%; object-fit: cover; }
.project__inner { max-width: var(--container); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--gutter); display: grid; grid-template-columns: 300px 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.project__facts dl { margin: 0 0 1.5rem; border-top: 1px solid var(--ink); }
.project__facts dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line-soft); }
.project__facts dt { color: var(--ink-3); font-size: 0.9rem; }
.project__facts dd { margin: 0; text-align: end; }
.project__content .prose { font-size: 1.12rem; margin-bottom: 2rem; }
@media (max-width: 860px) { .project__inner { grid-template-columns: 1fr; } .project__facts { order: 2; } }

/* Single project — netanel-style hero rail + fact list */
.pback { display: inline-block; padding: 1rem var(--gutter); font-size: 0.9rem; color: var(--ink-2); }
.pback::before { content: "→ "; }
.phero { display: grid; grid-template-columns: clamp(110px, 15vw, 220px) 1fr; min-height: min(78vh, 760px); }
.phero__rail { position: relative; background: var(--strip-bg); color: var(--strip-fg); display: flex; align-items: center; justify-content: center; padding: 3.5rem 0.5rem; overflow: hidden; }
.phero__name { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; }
.phero__street { display: block; font-size: clamp(1.8rem, 3.2vw, 3.4rem); font-weight: 700; letter-spacing: 0.02em; }
.phero__city { display: block; font-size: 1rem; font-weight: 400; margin-top: 0.9rem; opacity: 0.85; letter-spacing: 0.15em; }
.phero__stage { position: absolute; bottom: 1.5rem; inset-inline: 0; text-align: center; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; }
.phero__media { position: relative; overflow: hidden; background: var(--placeholder-bg); }
.phero__img { width: 100%; height: 100%; object-fit: cover; }

.pdetails { max-width: var(--container); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.pdetails__title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; margin: 0 0 1.5rem; }
.pdetails__lead { font-size: 1.1rem; margin-bottom: 1.75rem; }
.pdetails__lead p { margin: 0 0 0.75rem; }
.pfacts { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--ink); }
.pfacts li { padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft); font-size: 1.1rem; }
.pdetails__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pdetails__media { align-self: stretch; }
.pdetails__media img, .pdetails__media .pdetails__img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
@media (max-width: 860px) {
  .phero { grid-template-columns: 1fr; min-height: 0; }
  .phero__rail { flex-direction: row; gap: 1rem; padding: 1.1rem var(--gutter); }
  .phero__name { writing-mode: horizontal-tb; transform: none; display: flex; align-items: baseline; gap: 0.6rem; text-align: start; }
  .phero__city { margin-top: 0; }
  .phero__stage { position: static; text-align: start; inset-inline: auto; margin-inline-start: auto; }
  .phero__media { height: 52vh; min-height: 260px; }
  .pdetails { grid-template-columns: 1fr; }
  .pdetails__media { order: -1; }
}

/* Legibility: a soft shadow around any text that sits over imagery */
.sec2__title,
.sec3__kicker, .sec3__name,
.acc__name, .acc__sub, .acc__vname, .acc__vcity, .acc__units,
.menu__card-label {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 16px rgba(0, 0, 0, 0.4);
}

/* Story page ("הסיפור שלנו") — netanel-style */
.kicker { margin: 0 0 0.6rem; font-size: 0.85rem; letter-spacing: 0.22em; color: var(--ink-3); }

.story-hero { position: relative; height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); min-height: 480px; display: grid; place-items: center; overflow: hidden; background: var(--dark); }
.story-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.story-hero__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(22, 48, 73, 0.55), rgba(22, 48, 73, 0.8)); }
.story-hero__center { position: relative; text-align: center; color: var(--cream); padding: 0 var(--gutter); }
.story-hero__kicker { margin: 0 0 1.6rem; font-size: clamp(0.9rem, 1.6vw, 1.25rem); letter-spacing: 0.3em; opacity: 0.9; }
.story-hero__logo { width: min(62vw, 520px); height: auto; }
.story-hero__sub { margin: 1.6rem 0 0; font-size: clamp(0.85rem, 1.4vw, 1.1rem); letter-spacing: 0.38em; opacity: 0.85; }

.story-intro { background: var(--cream); color: var(--ink); }
.story-intro__inner { max-width: var(--container); margin: 0 auto; padding: clamp(3rem, 8vw, 7rem) var(--gutter); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.story-intro__title { margin: 0; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.05; font-weight: 700; }
.story-intro__prose { font-size: 1.15rem; line-height: 1.65; }
.story-intro__prose p { margin: 0 0 1.1rem; }
.story-intro__prose p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .story-intro__inner { grid-template-columns: 1fr; gap: 1.5rem; } }

.story-values { background: var(--white); color: var(--ink); }
.story-values__inner { max-width: var(--container); margin: 0 auto; padding: clamp(3rem, 8vw, 7rem) var(--gutter); }
.story-values__title { margin: 0.3rem 0 2.75rem; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; }
.story-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
.vcard { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.vcard__num { display: block; font-size: 0.9rem; color: var(--ink-3); letter-spacing: 0.1em; }
.vcard__title { margin: 0.6rem 0 0.7rem; font-size: 1.45rem; font-weight: 700; }
.vcard__text { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 1023px) { .story-values__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; } }
@media (max-width: 560px) { .story-values__grid { grid-template-columns: 1fr; } }

.story-stats { background: var(--dark); color: var(--cream); }
.story-stats__inner { max-width: var(--container); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--gutter); text-align: center; }
.story-stats__title { margin: 0 0 2.5rem; font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 700; }
.story-stats .stats { grid-template-columns: repeat(4, 1fr); max-width: 900px; margin: 0 auto; gap: 1.5rem; text-align: center; }
.story-stats .stat b { font-size: clamp(2rem, 4vw, 3rem); color: var(--white); }
.story-stats .stat span { color: rgba(230, 228, 218, 0.75); }
@media (max-width: 640px) { .story-stats .stats { grid-template-columns: repeat(2, 1fr); } }

.story-cta { background: var(--cream); color: var(--ink); }
.story-cta__inner { max-width: 900px; margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--gutter); text-align: center; }
.story-cta__title { margin: 0 0 2rem; font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 700; }
.story-cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.story-cta .pill { color: var(--dark); border-color: var(--dark); }
.story-cta .pill:hover { background: var(--dark); color: var(--white); }
.story-cta .pill--dark { color: var(--white); }
.gallery { padding: 0 0 clamp(3rem, 7vw, 6rem); }
.gallery__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.gallery__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
.gallery__item:first-child img { height: 100%; aspect-ratio: auto; }
@media (max-width: 720px) { .gallery__grid { grid-template-columns: 1fr 1fr; } .gallery__item:first-child { grid-column: span 2; grid-row: auto; } .gallery__item:first-child img { aspect-ratio: 3 / 2; } }
.project-nav { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) clamp(3rem, 7vw, 6rem); display: flex; justify-content: space-between; gap: 1rem; }
.project-nav__link { font-size: 1.3rem; font-weight: 700; display: flex; flex-direction: column; }
.project-nav__link small { font-size: 0.8rem; font-weight: 400; color: var(--ink-3); }
.project-nav__link--next { text-align: end; }
.lightbox { border: 0; padding: 0; background: rgba(20, 24, 22, 0.94); max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(20, 24, 22, 0.94); }
.lightbox img { width: 100%; height: 100%; object-fit: contain; }
.lightbox__close { position: absolute; top: 16px; inset-inline-end: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); background: transparent; color: var(--white); font-size: 1.5rem; cursor: pointer; }

.page__head, .page__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.page__head { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.page__inner { padding-bottom: clamp(3rem, 7vw, 6rem); }
.page__figure { max-width: var(--container); margin: 0 auto 2rem; padding: 0 var(--gutter); }
.page__date { color: var(--ink-3); }
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line-soft); }
.post-list a { font-size: 1.3rem; font-weight: 700; }
.post-list time { color: var(--ink-3); font-size: 0.9rem; }
.empty { color: var(--ink-3); }
.page--404 .page__inner { padding-top: clamp(4rem, 10vw, 8rem); text-align: center; }
.page--404 .section-lead { margin-inline: auto; }
.contact__inner-page { max-width: var(--container); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(3rem, 7vw, 6rem); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); }
.cta__contact { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 1.1rem; }
@media (max-width: 860px) { .contact__inner-page { grid-template-columns: 1fr; } }