/* ============================================================
   The Next 60 — Boutique Living · Figma-faithful build (v2)
   Single source of truth for design tokens + layout + motion.
   Palette + typography extracted from Figma "קבוצת בינה - Next 60"
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --navy: #01144f;
  --navy-deep: #020e35;
  --green-dark: #18221d;
  --green-deep: #1b2626;
  --sage: #576865;
  --wolf: #d7d1c7;
  --mint: #dde8d7;
  --gold: #c8a96a;
  --gold-soft: #d8bd86;
  --cream-title: #e7dcc7;   /* warm cream for the hero headline (Figma reference) */
  --white: #ffffff;
  --ink: #11150f;

  /* Brand font — swap this single value to "Almoni" (+ @font-face) once the
     licensed webfont arrives. Rubik is the closest free humanist-geometric stand-in. */
  --font-main: "Rubik", "Assistant", "Heebo", system-ui, sans-serif;

  --container: 1280px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-py: clamp(4rem, 9vw, 9rem);

  /* fluid type scale (base 1440px design) */
  --fs-display: clamp(2.7rem, 6.2vw, 5.7rem);  /* 91px */
  --fs-h2: clamp(1.9rem, 4.1vw, 3.75rem);      /* 60px */
  --fs-h3: clamp(1.4rem, 2.4vw, 2rem);         /* 32px */
  --fs-nav: clamp(0.95rem, 1.1vw, 1.15rem);    /* 24px */
  --fs-body: clamp(1.02rem, 1.35vw, 1.32rem);  /* 22px */
  --fs-small: clamp(0.95rem, 1vw, 1.125rem);   /* 18px */
  --fs-script: clamp(2.6rem, 5vw, 3.75rem);    /* Pinyon 60px */
  --fs-numeral: clamp(5rem, 13vw, 11.25rem);   /* Pinyon 180px */

  --card-grad-1: #1b2626;   /* Figma card caption gradient */
  --card-grad-2: #1e4d39;

  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 32px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.3s var(--ease);
  --t-med: 0.55s var(--ease);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--wolf);
  background: var(--green-dark);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- Skip link ---------- */
.skip-link { position: absolute; inset-block-start: -100px; inset-inline-start: 1rem; z-index: 200; background: var(--gold); color: var(--green-dark); padding: 0.6rem 1.2rem; border-radius: 0 0 10px 10px; font-weight: 600; transition: inset-block-start var(--t-fast); }
.skip-link:focus { inset-block-start: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-py); position: relative; }
.bg-navy { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); }
/* Unified green run — Figma uses one continuous deep-green field (#18221d),
   NOT the lighter #1b2626 sub-tone. The "play of light/dark" is the vertical
   gradient on the manifesto (top #080f0d → #18221d), flowing seamlessly down. */
.bg-green { background: var(--green-dark); }
.bg-green-deep { background: var(--green-dark); }
.bg-cream { background: var(--wolf); color: var(--ink); }

.script { font-family: "Pinyon Script", cursive; font-weight: 400; line-height: 1; }
/* Figma: section labels are translucent-white pills with white text */
.eyebrow, .eyebrow-pill {
  display: inline-block;
  font-size: var(--fs-small);
  color: var(--white);
  background: rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 0.5em 1.15em;
  margin-bottom: 1.4rem;
}
.eyebrow.dark, .eyebrow-pill.dark { color: var(--green-dark); background: rgba(24, 34, 29, 0.10); }
.h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.18; letter-spacing: -0.01em; }
.lead { font-size: var(--fs-body); color: var(--wolf); opacity: 0.86; }
.center { text-align: center; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--fs-small); font-weight: 600; white-space: nowrap;
  padding: 0.85em 2.4em; border-radius: 999px;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.btn-pill { background: var(--wolf); color: var(--green-dark); font-weight: 700; }
.btn-pill:hover { background: var(--white); color: var(--green-dark); transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: var(--green-dark); }
.btn-gold:hover { background: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(200,169,106,0.3); }
.btn-dark { background: var(--green-deep); color: var(--mint); font-weight: 800; }
.btn-dark:hover { background: var(--green-dark); transform: translateY(-2px); }

/* ---------- Navbar ---------- */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem var(--gutter);
  transition: background var(--t-fast), padding var(--t-fast), box-shadow var(--t-fast);
}
/* designer note: frosted translucent-white bar on scroll (#fff @10% + blur ≥20) */
.nav.scrolled { background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); padding-block: 0.9rem; box-shadow: 0 8px 30px rgba(0,0,0,0.18); border-bottom: 1px solid rgba(255,255,255,0.14); }
/* keep links legible over the bright frosted bar */
.nav.scrolled .nav-link, .nav.scrolled .lang-switch { text-shadow: 0 1px 6px rgba(1,20,79,0.45); }
/* Figma nav logo is rendered in cream (#d7d1c7), not gold */
.nav-logo img { height: clamp(42px, 5vw, 64px); width: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.2rem); }
.nav-link { font-size: var(--fs-nav); color: var(--wolf); opacity: 0.92; position: relative; padding-block: 0.3em; transition: color var(--t-fast); }
.nav-link::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 0; height: 1.5px; background: var(--gold); transition: width var(--t-fast); }
.nav-link:hover, .nav-link.active { color: var(--gold); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 1rem; }
.lang-switch { font-size: var(--fs-small); color: var(--wolf); border: 1px solid rgba(215,209,199,0.4); border-radius: 999px; padding: 0.35em 0.95em; transition: background var(--t-fast), color var(--t-fast); }
.lang-switch:hover { background: var(--wolf); color: var(--green-dark); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { width: 26px; height: 2px; background: var(--wolf); transition: transform var(--t-fast), opacity var(--t-fast); }
/* brand group — wordmark + round seal sit together at the top-right (wordmark rightmost, seal to its left) */
.nav-brand { display: flex; align-items: center; gap: clamp(0.5rem, 1.4vw, 1rem); }
.nav-seal { display: inline-flex; }
.nav-seal img { height: clamp(38px, 4.6vw, 56px); width: auto; }

/* ---------- Hero ---------- */
/* Hero height tracks the full-bleed image (shown at its natural ratio, never
   cropped) + a navy sky band on top so the title & subtitle sit fully ABOVE the
   building on open sky. 100/1.5126 (image ratio) = 66.1 → image height = 66.1vw. */
.hero { position: relative; min-height: max(100svh, calc(66.1vw + 9rem)); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; overflow: hidden; padding: clamp(7rem, 16vh, 11rem) var(--gutter) 0; }
/* Navy sky backdrop — the image bottom-anchors over it so open sky fills the top
   (matches the Figma reference: building low-right, generous sky above the title). */
/* Backdrop is tuned to the photo's own top-sky tone (~#1e3c76) so the bottom-anchored
   image blends seamlessly — no flat navy band behind the (transparent) navbar. */
.hero-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #18335f 0%, #20407c 17%, #15295a 54%, var(--navy) 100%); }
.hero-bg img { position: absolute; inset-inline: 0; inset-block-end: 0; width: 100%; height: auto; object-fit: cover; object-position: center bottom; transform-origin: center bottom; transform: scale(1.04); animation: heroZoom 18s ease-out forwards;
  filter: brightness(1.12) saturate(1.16) contrast(1.05);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 11%); mask-image: linear-gradient(180deg, transparent 0%, #000 11%); }
/* Designer reference: open navy-blue sky, building stays bright/vivid; a soft
   navy SCRIM behind the hero text (top ~half) for legibility — it deepens the
   twilight where the words sit and fades to transparent so the building stays
   vivid below; + a gentle bottom fade into the green section. */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(100% 64% at 50% 28%, rgba(1,20,79,0.56) 0%, rgba(1,20,79,0.22) 50%, rgba(1,20,79,0) 72%),
  linear-gradient(180deg, rgba(1,20,79,0.52) 0%, rgba(1,20,79,0.34) 22%, rgba(1,20,79,0.14) 42%, rgba(1,20,79,0.03) 58%, rgba(1,20,79,0) 74%, rgba(24,34,29,0.85) 100%); }
.hero-inner { position: relative; z-index: 2; max-width: 60rem; }
.hero-title { font-size: var(--fs-display); font-weight: 500; line-height: 1.05; text-wrap: balance; color: var(--cream-title); letter-spacing: -0.01em; text-shadow: 0 2px 30px rgba(1,20,79,0.55); }
.hero-sub { margin-top: 1.6rem; font-size: var(--fs-body); color: var(--wolf); opacity: 0.94; max-width: 46rem; margin-inline: auto; text-shadow: 0 1px 16px rgba(1,20,79,0.7); }
.hero-seal { position: absolute; z-index: 2; inset-block-end: 7%; left: 6%; right: auto; width: clamp(70px, 9vw, 120px); opacity: 0.9; animation: spin 38s linear infinite; }
/* designer note: replace the word "גלול" with an English "Scroll" label and a
   line that continuously travels downward, pinned to the LEFT edge (both dirs) */
.scroll-cue { position: absolute; inset-block-end: 2rem; left: clamp(1.2rem, 4vw, 3.2rem); right: auto; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; color: var(--wolf); }
.scroll-cue-label { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.7; }
.scroll-cue-line { position: relative; width: 1px; height: 56px; background: rgba(215, 209, 199, 0.22); overflow: hidden; }
.scroll-cue-line::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 42%; background: linear-gradient(var(--wolf), transparent); animation: scrollTravel 1.8s ease-in-out infinite; }

/* ---------- Site-wide scroll progress rail ---------- */
/* a single gold line pinned to the left edge that fills top→bottom with overall
   page scroll progress; the glowing dot at its leading edge travels down with you */
.scroll-rail { position: fixed; inset-block: 0; left: clamp(0.5rem, 2vw, 1.6rem); width: 2px; z-index: 60; pointer-events: none; background: rgba(215, 209, 199, 0.14); }
.scroll-rail-fill { position: absolute; inset-block-start: 0; left: 0; width: 100%; height: 0; background: linear-gradient(180deg, var(--gold-soft), var(--gold)); box-shadow: 0 0 10px rgba(200, 169, 106, 0.45); will-change: height; }
.scroll-rail-fill::after { content: ""; position: absolute; inset-block-end: -3px; left: 50%; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 12px 3px rgba(200, 169, 106, 0.6); }
@media (max-width: 640px) { .scroll-rail { left: 0.35rem; } }
@media (prefers-reduced-motion: reduce) { .scroll-rail-fill { transition: none; } }
@keyframes scrollTravel { 0% { transform: translateY(-110%); } 100% { transform: translateY(260%); } }

/* ---------- Manifesto ---------- */
/* Figma 60:914 — vertical gradient top→bottom (the "play of dark/light green") */
.manifesto { text-align: center; background: linear-gradient(180deg, #080f0d 0%, var(--green-dark) 100%); }
.manifesto .brand-wordmark { display: block; height: clamp(54px, 7vw, 92px); width: auto; margin: 0.2rem auto 2.2rem; }
.manifesto .script { font-size: var(--fs-h2); color: var(--white); margin-block: 0.4rem 2.2rem; }
.manifesto-title-row { display: flex; align-items: center; justify-content: center; gap: 1.3rem; }
.manifesto-head { font-size: var(--fs-h2); font-weight: 500; line-height: 1.22; color: var(--white); max-width: 32ch; margin-inline: auto; }
.manifesto-head .hl { display: block; font-weight: 700; font-size: 1.16em; margin-top: 0.45rem; }
.manifesto-cols { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 2.6rem; text-align: center; max-width: 46rem; margin-inline: auto; }
.manifesto-cols p { opacity: 0.82; }
.manifesto-tag { margin-top: 1.6rem; font-weight: 700; color: var(--mint); opacity: 1; }

/* ---------- Gallery (horizontal marquee strip) + Stats ---------- */
.gallery { direction: ltr; overflow: hidden; width: 100%;
  -webkit-mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.gallery-track { display: flex; gap: 1.2rem; width: max-content; will-change: transform; animation: marquee 42s linear infinite; }
.gallery:hover .gallery-track { animation-play-state: paused; }
.gallery.swipe { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gallery.swipe .gallery-track { animation: none; }
.gallery-track figure { margin: 0; flex: 0 0 auto; width: min(62vw, 720px); aspect-ratio: 16/9;
  border-radius: 24px; overflow: hidden; }
.gallery-track img { width: 100%; height: 100%; object-fit: cover; }
/* direction:ltr keeps the Figma column order (100,000 left … 3 right) */
.stats { direction: ltr; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.8rem;
  align-items: center;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.45); border-radius: var(--radius-pill);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.8rem, 4vw, 3.4rem); }
.stat { direction: rtl; text-align: center; }
.stat-num { font-size: var(--fs-display); font-weight: 500; color: var(--wolf); line-height: 1; }
.stat-label { font-size: clamp(1.2rem, 2.3vw, 2rem); color: var(--wolf); margin-top: 0.5rem; }

/* ---------- Projects ---------- */
.projects-head { text-align: center; margin-bottom: 3rem; }
/* direction:ltr keeps Figma column order (לב הכרם left … THE EMBASSY right) */
.projects-grid { direction: ltr; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
/* Figma card template: top corners rounded, bottom corners straight */
/* designer note: top corners rounded 57px, bottom corners straight */
.proj-card { direction: rtl; border-radius: 57px 57px 0 0; overflow: hidden; display: flex; flex-direction: column; background: var(--card-grad-1); }
.proj-media { position: relative; aspect-ratio: 367/379; overflow: hidden; border-radius: 57px 57px 0 0; }
.proj-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.proj-card:hover .proj-media img { transform: scale(1.06); }
.proj-cap { flex: 1; background: linear-gradient(135deg, var(--card-grad-1), var(--card-grad-2)); padding: 1.25rem 1.4rem 1.5rem; text-align: start; }
.proj-loc { display: flex; align-items: center; gap: 0.4em; font-size: var(--fs-small); font-weight: 300; color: var(--mint); opacity: 0.92; margin-bottom: 0.5rem; }
/* location pin (designer SVG) — masked so it inherits the caption colour */
.loc-icon { flex: 0 0 auto; width: 1.05em; height: 1.05em; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%202C8.13%202%205%205.13%205%209c0%204.78%206.3%2012.42%206.57%2012.74a.56.56%200%200%200%20.86%200C12.7%2021.42%2019%2013.78%2019%209c0-3.87-3.13-7-7-7Zm0%209.5A2.5%202.5%200%201%201%2012%206.5a2.5%202.5%200%200%201%200%205Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%202C8.13%202%205%205.13%205%209c0%204.78%206.3%2012.42%206.57%2012.74a.56.56%200%200%200%20.86%200C12.7%2021.42%2019%2013.78%2019%209c0-3.87-3.13-7-7-7Zm0%209.5A2.5%202.5%200%201%201%2012%206.5a2.5%202.5%200%200%201%200%205Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; }
.proj-title { font-size: 1.35rem; font-weight: 800; color: var(--mint); }
.proj-desc { font-size: var(--fs-small); color: var(--mint); opacity: 0.88; margin-top: 0.45rem; line-height: 1.55; }

/* ---------- Lifestyle / Facilities ---------- */
/* direction:ltr → paragraph on the left, cursive title on the right (Figma) */
.lifestyle-head { direction: ltr; display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; flex-wrap: wrap; }
.lifestyle-head > div { direction: rtl; }
.lifestyle-head .lead { max-width: 38rem; }
.lifestyle-head .manifesto-title-row { direction: ltr; }
.lifestyle-head .script { color: var(--white); font-size: var(--fs-h2); }
/* direction:ltr keeps Figma cell order (Wellness top-left … Absolute Peace bottom-right) */
.facility-grid { direction: ltr; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.facility { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 578/282; display: flex; align-items: center; justify-content: center; }
.facility img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.facility:hover img { transform: scale(1.06); }
.facility::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.48)); transition: background var(--t-med); }
.facility-cap { position: relative; z-index: 2; text-align: center; padding: 1rem 1.4rem; }
.facility-cap b { display: block; font-size: clamp(1.05rem, 1.5vw, 1.4rem); color: var(--mint); font-weight: 800; text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
.facility-cap span { display: block; font-size: var(--fs-small); color: var(--mint); font-weight: 700; opacity: 0.95; margin-top: 0.35rem; }
.facility-desc { display: block; direction: rtl; font-size: var(--fs-small); color: var(--mint); font-weight: 500; line-height: 1.55; max-width: 42ch; margin: 0.55rem auto 0; text-shadow: 0 1px 10px rgba(0,0,0,0.65); }
html[lang="en"] .facility-desc { direction: ltr; }
/* designer note: short title + subtitle ALWAYS visible; on hover the image darkens
   and the full description appears. Touch devices (no hover) show everything. */
@media (hover: hover) {
  .facility-desc { opacity: 0; max-height: 0; overflow: hidden; transform: translateY(8px);
    transition: opacity var(--t-med), transform var(--t-med), max-height var(--t-med), margin-top var(--t-med); margin-top: 0; }
  .facility:hover::after { background: linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.78)); }
  .facility:hover .facility-desc { opacity: 1; max-height: 18em; transform: none; margin-top: 0.55rem; }
}

/* ---------- Cityscape banner ---------- */
.banner { position: relative; min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: var(--section-py) var(--gutter); }
.banner-bg { position: absolute; inset: 0; z-index: 0; }
.banner-bg img { width: 100%; height: 100%; object-fit: cover; }
.banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(24,34,29,0.55), rgba(24,34,29,0.35) 45%, rgba(24,34,29,0.8)); }
.banner-inner { position: relative; z-index: 2; max-width: 54rem; }
/* gold wordmark — contained, never stretched (designer note) */
.banner-logo { width: clamp(240px, 38vw, 520px); height: auto; object-fit: contain; margin: 0 auto 1.6rem; }
.banner-head { font-size: var(--fs-display); font-weight: 600; color: var(--white); line-height: 1.05; text-wrap: balance; }

/* ---------- Economic model (full-bleed image + card on right) ---------- */
.economic { position: relative; overflow: hidden; min-height: 70vh; display: flex; align-items: center; }
.economic-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* designer note: building shifted aside so the text falls on the sunset sky —
   NO white card. A directional overlay keeps the white text legible.
   At wide aspect ratios the full image fits, so object-position alone can't
   shift it — a right-anchored zoom forces the building left out of the text zone. */
.economic-bg img { width: 100%; height: 100%; object-fit: cover; object-position: right top; transform: scale(1.25); transform-origin: right top; }
.economic::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to left, rgba(8,15,13,0.50) 0%, rgba(8,15,13,0.22) 46%, rgba(8,15,13,0) 78%); }
[dir="ltr"] .economic::before { background: linear-gradient(to right, rgba(8,15,13,0.50) 0%, rgba(8,15,13,0.22) 46%, rgba(8,15,13,0) 78%); }
.economic-card { position: relative; z-index: 2; max-width: 460px; margin-inline-end: auto; text-align: right;
  padding: clamp(1rem, 2vw, 1.6rem) 0; }
.economic-card .eyebrow-pill.dark { color: var(--white); background: rgba(255,255,255,0.14); }
.economic-title { font-size: var(--fs-h2); font-weight: 600; color: var(--white); line-height: 1.12; text-wrap: balance; margin-block: 0.4rem 1.1rem; text-shadow: 0 2px 24px rgba(0,0,0,0.5); }
.economic-card p { font-size: var(--fs-body); color: var(--white); opacity: 0.94; text-shadow: 0 1px 16px rgba(0,0,0,0.55); }

/* ---------- Pillars (Figma: 2-col masonry + center divider + bg numerals) ---------- */
.pillars-section { overflow: hidden; }
.pillars-head { text-align: center; margin-bottom: 3.5rem; display: flex; align-items: center; justify-content: center; gap: 1.3rem; }
.pillars-head .h2 { color: var(--white); }
.pillars-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
/* central vertical divider line (Figma Line 7) */
.pillars-grid::before { content: ""; position: absolute; inset-block: 1%; inset-inline-start: 50%; transform: translateX(-50%); width: 1px;
  background: linear-gradient(180deg, transparent, rgba(215,209,199,0.35) 10%, rgba(215,209,199,0.35) 90%, transparent); }
.pillars-col { display: flex; flex-direction: column; gap: clamp(1.6rem, 3.2vw, 2.8rem); justify-content: center; }
.pillars-col:first-child { padding-block-start: clamp(1.4rem, 3vw, 3rem); } /* right-column offset */
/* designer note: numeral sits BESIDE the title (gold accent), not behind it */
.pillar-block { position: relative; padding-block: 0.4rem; display: flex; gap: clamp(0.8rem, 2vw, 1.6rem); align-items: flex-start; }
.pillar-num { flex: 0 0 auto; font-family: "Pinyon Script", cursive; font-size: clamp(3rem, 5.2vw, 4.8rem); line-height: 0.85; color: var(--gold); opacity: 0.92; pointer-events: none; }
.pillar-text { position: relative; z-index: 1; padding-inline-start: 0; }
.pillar-title { font-size: var(--fs-h2); font-weight: 600; color: var(--white); line-height: 1.15; }
.pillar-title small { display: block; font-size: 0.42em; font-weight: 800; opacity: 0.92; margin-top: 0.3em; }
.pillar-desc { margin-top: 1rem; opacity: 0.82; font-size: var(--fs-small); line-height: 1.62; }
.pillar-img { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 641/282; }
.pillar-img img { width: 100%; height: 100%; object-fit: cover; }
.pillars-seal { display: block; width: clamp(90px, 11vw, 150px); margin: 3.5rem auto 0; animation: spin 40s linear infinite; }

/* connector line bridging pillars (rotating seal) → about, drawn on scroll.
   height:0 so it adds no vertical gap — the SVG overlays the section boundary. */
.pillar-connector { position: relative; z-index: 5; height: 0; pointer-events: none; }
.pillar-connector svg { position: absolute; left: 50%; transform: translateX(-50%); top: clamp(-150px, -14vw, -90px); width: clamp(200px, 30vw, 300px); height: clamp(230px, 33vw, 400px); overflow: visible; }
#connectorPath { transition: none; }

/* ---------- About company ---------- */
.about { position: relative; overflow: hidden; }
.about-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.92; }
.about-bg img { width: 100%; height: 100%; object-fit: cover; }
/* lighter overlay so the background image is actually visible (designer note) */
.about::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,15,13,0.55), rgba(24,34,29,0.66)); }
/* direction:ltr → badge on the left, body on the right (Figma) */
.about-grid { direction: ltr; position: relative; z-index: 2; display: grid; grid-template-columns: 0.82fr 1.3fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* designer note: #fff @10% bg, 0.5px white stroke, blur 4 */
.about-badge { background: rgba(255,255,255,0.10); border: 0.5px solid rgba(255,255,255,0.9); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: var(--radius-pill); aspect-ratio: 443/553; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.about-badge img { width: 86%; height: auto; }
.about-body { direction: rtl; }
.about-body .h2 { color: var(--white); margin-block: 0.5rem 1.3rem; }
/* closing paragraph — emphasized (matches designer reference) */
.about-body .about-emph { font-weight: 600; color: var(--white); margin-top: 1.4rem; }

/* ---------- Contact form ---------- */
.contact { position: relative; overflow: hidden; }
.contact-flourish { position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: 0.5; font-family: "Pinyon Script", cursive; font-size: 40vw; color: rgba(87,104,101,0.07); line-height: 1; display: flex; align-items: center; justify-content: center; }
.contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 0.62fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
.contact-form { order: 2; }
.contact-head { text-align: start; margin-bottom: 1.8rem; display: flex; align-items: center; gap: 0.9rem; }
.contact-head .h2 { color: var(--green-dark); font-weight: 700; }
/* right-side portrait visual */
.contact-visual { order: 1; position: relative; border-radius: var(--radius); overflow: hidden; min-height: 440px; }
.contact-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,34,29,0.15), rgba(24,34,29,0.5)); }
.contact-visual .cv-logo { position: absolute; z-index: 2; inset-block-end: 1.6rem; inset-inline: 0; margin-inline: auto; width: 46%; height: auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.4)); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.field { position: relative; margin-bottom: 1.6rem; }
.field label { display: block; font-size: var(--fs-small); color: var(--navy); margin-bottom: 0.4rem; }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1.5px solid var(--navy);
  padding: 0.6rem 0.2rem; font-family: inherit; font-size: var(--fs-small); color: var(--ink);
  text-align: start; transition: border-color var(--t-fast);
}
.field input::placeholder, .field textarea::placeholder { text-align: start; opacity: 0.6; }
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
/* designer note: breathing room between the consent line and the submit button */
.field-check { display: flex; align-items: center; gap: 0.7rem; font-size: var(--fs-small); color: var(--ink); margin-block: 0.4rem 1.7rem; }
.field-check a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.field-check a:hover { color: var(--gold); }
.field-check input { width: 18px; height: 18px; accent-color: var(--navy); }
.form-status { margin-top: 1rem; font-size: var(--fs-small); color: var(--navy); font-weight: 600; min-height: 1.2em; }

/* ---------- Footer ---------- */
.footer { background: var(--green-dark); padding: 2.4rem var(--gutter); }
.footer-row { max-width: var(--container); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border-top: 1px solid rgba(215,209,199,0.15); padding-top: 2rem; }
.footer-links { display: flex; gap: clamp(1rem, 2.2vw, 2.2rem); flex-wrap: wrap; }
.footer-links a { font-size: var(--fs-small); opacity: 0.85; transition: color var(--t-fast); }
.footer-links a:hover { color: var(--gold); }
.footer-copy { font-size: var(--fs-small); opacity: 0.75; }
.footer-credit { display: flex; align-items: center; justify-content: center; gap: 0.55rem; flex-wrap: wrap; font-size: 0.85rem; opacity: 0.75; margin-top: 1.6rem; }
.footer-credit-link { display: inline-flex; align-items: center; transition: opacity var(--t-fast); }
.footer-credit-link img { height: 19px; width: auto; }
.footer-credit-link:hover { opacity: 0.7; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* "opens like an expanding screen" (Figma note, economic model) */
.reveal-expand { opacity: 0; transform: scaleX(0.55) scaleY(0.84); transform-origin: 50% 50%; transition: opacity 0.6s var(--ease), transform 0.85s var(--ease); }
.reveal-expand.in { opacity: 1; transform: none; }
/* scroll-driven typewriter — JS splits .tw-scroll text into .tw-char spans and
   writes them in as the reader scrolls through the section. Un-written chars sit
   as a faint ghost (no layout shift); the write head carries a blinking caret.
   Default (no-JS / reduced-motion): full text, no ghosting. */
.tw-char { opacity: 0.1; transition: opacity 0.22s ease; }
.tw-char.on { opacity: 1; }
.tw-char.cur::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-inline-start: 1px; background: var(--gold); vertical-align: -0.12em; animation: caretBlink 0.8s steps(1) infinite; }

/* time-based typewriter caret (data-typewriter elements) */
.typing::after { content: "|"; display: inline-block; margin-inline-start: 2px; color: var(--gold); animation: caretBlink 0.8s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }

/* ---------- Keyframes ---------- */
@keyframes heroZoom { to { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scrollPulse { 0%,100% { opacity: 0.2; } 50% { opacity: 0.8; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- LTR overrides (EN) ---------- */
[dir="ltr"] .hero, [dir="ltr"] .manifesto, [dir="ltr"] .banner, [dir="ltr"] .contact-head { text-align: center; }
[dir="ltr"] .manifesto-cols, [dir="ltr"] .pillar-body, [dir="ltr"] .split-body, [dir="ltr"] .about-body { text-align: left; }
/* Containers hard-coded direction:rtl (for the Hebrew layout) must flip to LTR in
   English — otherwise trailing punctuation reorders to the start of the line
   (".mind", ".rhythm", ".daily serenity"). */
[dir="ltr"] .about-body, [dir="ltr"] .proj-card,
[dir="ltr"] .stat, [dir="ltr"] .lifestyle-head > div { direction: ltr; }
[dir="ltr"] .economic-card { text-align: left; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .manifesto-cols, .projects-grid, .facility-grid, .about-grid, .contact-grid, .form-row { grid-template-columns: 1fr; }
  /* pillars collapse to a single ordered flow (01 → 02 → 03 with images) */
  .pillars-grid { display: flex; flex-direction: column; gap: 1.8rem; }
  .pillars-grid::before { display: none; }
  .pillars-col { display: contents; }
  .pillars-col:first-child { padding-block-start: 0; }
  .pillar-text { padding-inline-start: 0; }
  .about-badge, .about-body, .contact-form, .contact-visual { order: 0; }
  .gallery-track figure { width: min(78vw, 520px); }
  .economic { min-height: 0; }
  .economic-card { max-width: none; margin-inline-end: 0; }
  .contact-visual { min-height: 280px; }
}
/* tablet + mobile share the hamburger nav (avoids cramming links 768–980) */
@media (max-width: 980px) {
  /* RTL drawer anchored to the RIGHT (inset-inline-start:0 == right:0 in RTL);
     translateX(105%) then fully clears it off-screen when closed. */
  .nav-links { position: fixed; inset-block-start: 0; inset-inline-start: 0; inset-inline-end: auto; height: 100svh; width: min(78vw, 320px); flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.6rem; padding: 2rem; background: var(--navy-deep); transform: translateX(105%); transition: transform var(--t-med); z-index: 100; }
  [dir="ltr"] .nav-links { inset-inline-end: auto; inset-inline-start: 0; transform: translateX(-105%); }
  .nav-links.open { transform: translateX(0); }
  .nav-toggle { display: flex; z-index: 101; }
  .stats { grid-template-columns: 1fr; }
  .stat + .stat { border-inline-start: 0; border-top: 1px solid rgba(215,209,199,0.18); padding-top: 1rem; }
  .gallery { grid-template-columns: 1fr; }
  .footer-row { flex-direction: column; text-align: center; }
}

/* phone: declutter the bar — drop the big CTA pill (redundant with menu +
   contact section) so the wordmark/hamburger never collide or wrap */
@media (max-width: 760px) {
  .nav { padding-inline: 1.1rem; }
  .nav-actions { gap: 0.6rem; }
  .nav .btn-pill { display: none; }
  .nav-logo img { height: clamp(34px, 9vw, 46px); }
  .nav-seal img { height: 34px; width: auto; }
  /* designer note (mobile): raise the main title toward the top + keep the
     rotating seal from crowding it / distorting */
  .hero { justify-content: flex-start; padding-block-start: clamp(6.5rem, 20vh, 10rem); }
  .hero-seal { width: clamp(56px, 16vw, 84px); inset-block-end: 4%; }
}
/* Portrait / narrow viewports (phones, portrait tablets): the hero image is
   scaled to fill HEIGHT, so object-position has no effect and the building rises
   behind the headline. Shrink the image box instead so the building drops and
   the navy gradient sky fills the area behind the text (mask-fade hides the seam). */
@media (max-aspect-ratio: 3/2) {
  .hero { min-height: 100svh; }
  .hero-bg img { height: 62%; object-position: center bottom; }
}
/* keep every seal perfectly round-ish — never stretched */
.nav-seal img, .hero-seal, .pillars-seal { object-fit: contain; height: auto; }
.nav-seal img { height: clamp(38px, 4.6vw, 56px); }
@media (max-width: 760px) { .nav-seal img { height: 34px; } }

/* touch devices have no hover → facility captions must stay visible */
@media (hover: none) {
  .facility::after { background: rgba(0,0,0,0.42); }
  .facility-cap { opacity: 1; transform: none; }
}

/* When the description is permanently visible (mobile width OR touch / no-hover
   devices) the fixed banner ratio clips the full caption — let the card grow to
   fit the whole text instead, and deepen the scrim so the longer text stays
   legible over the photo. */
@media (max-width: 980px), (hover: none) {
  .facility { aspect-ratio: auto; min-height: clamp(190px, 50vw, 260px); }
  .facility-cap { padding-block: 1.7rem; }
  .facility::after { background: linear-gradient(180deg, rgba(0,0,0,0.40), rgba(0,0,0,0.66)); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal, .reveal-expand { opacity: 1; transform: none; }
  .gallery-track { animation: none; }
  .hero-bg img { transform: none; }
}

/* ============================================================
   Accessibility widget (a11y.js) + user-pref classes on <html>
   ============================================================ */
.a11y-fab { position: fixed; inset-block-end: 1.2rem; right: 1.2rem; left: auto; z-index: 300;
  width: 50px; height: 50px; border-radius: 50%; background: var(--navy); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  transition: transform var(--t-fast), background var(--t-fast); }
.a11y-fab:hover { transform: translateY(-2px); background: var(--navy-deep); }
.a11y-fab svg { width: 26px; height: 26px; }
.a11y-panel { position: fixed; inset-block-end: 5.4rem; right: 1.2rem; left: auto; z-index: 300;
  width: min(86vw, 250px); background: var(--white); color: var(--ink); border-radius: 16px;
  padding: 1rem; box-shadow: 0 18px 50px rgba(0,0,0,0.3); display: flex; flex-direction: column; gap: 0.5rem; }
.a11y-panel[hidden] { display: none; }
.a11y-title { font-weight: 800; font-size: 1.05rem; color: var(--navy); margin-bottom: 0.2rem; text-align: center; }
.a11y-panel button { border: 1px solid rgba(1,20,79,0.25); border-radius: 10px; padding: 0.55rem 0.7rem;
  font-size: 0.95rem; color: var(--ink); background: #f4f4ef; text-align: center; transition: background var(--t-fast), border-color var(--t-fast); }
.a11y-panel button:hover { background: #e9e7df; }
.a11y-font { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; }
.a11y-fontval { font-weight: 700; font-size: 0.95rem; color: var(--navy); text-align: center; min-width: 48px; }
.a11y-toggle.on { background: var(--navy); color: var(--white); border-color: var(--navy); }
.a11y-reset { margin-top: 0.3rem; background: transparent; color: var(--navy); font-weight: 700; }
[dir="ltr"] .a11y-fab, [dir="ltr"] .a11y-panel { right: auto; left: 1.2rem; }

/* user preference effects */
html.a11y-contrast { filter: contrast(1.32) saturate(1.08); }
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; outline: 1px dashed currentColor; outline-offset: 2px; }
html.a11y-readable, html.a11y-readable body { font-family: Arial, "Segoe UI", "Helvetica Neue", sans-serif !important; }
html.a11y-readable p, html.a11y-readable li, html.a11y-readable .lead { line-height: 1.9 !important; letter-spacing: 0.01em; }
html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-nomotion .reveal, html.a11y-nomotion .reveal-expand, html.a11y-nomotion .tw-char { opacity: 1 !important; transform: none !important; }
html.a11y-nomotion .tw-char.cur::after { display: none !important; }
html.a11y-nomotion .gallery-track { animation: none !important; }

/* ============================================================
   Embassy Court video — trigger pill + modal
   ============================================================ */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.proj-card .proj-media { position: relative; }

/* play trigger sitting over the Embassy card image */
.video-trigger { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem;
  background: linear-gradient(180deg, rgba(1,20,79,0.05), rgba(1,20,79,0.48)); border: 0; cursor: pointer; color: var(--wolf);
  opacity: 0; transition: opacity var(--t-fast); }
.proj-card:hover .video-trigger, .video-trigger:focus-visible { opacity: 1; }
.vt-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.14); border: 1.5px solid var(--gold);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center;
  transition: transform var(--t-fast), background var(--t-fast); }
.vt-icon::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--wolf); margin-inline-start: 4px; }
.video-trigger:hover .vt-icon { transform: scale(1.08); background: var(--gold); }
.video-trigger:hover .vt-icon::before { border-left-color: var(--green-dark); }
.vt-label { font-weight: 700; font-size: 0.98rem; letter-spacing: 0.02em; text-shadow: 0 2px 10px rgba(0,0,0,0.55); }
/* touch devices have no hover — keep the trigger visible so the video stays reachable */
@media (hover: none) { .video-trigger { opacity: 1; background: linear-gradient(180deg, rgba(1,20,79,0.02), rgba(1,20,79,0.34)); } }

/* modal */
.video-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); }
.video-modal[hidden] { display: none; }
.video-modal__backdrop { position: absolute; inset: 0; background: rgba(1,10,30,0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: vmFade var(--t-fast) ease; }
.video-modal__dialog { position: relative; z-index: 1; width: min(92vw, 960px); aspect-ratio: 16 / 9; max-height: 86vh;
  background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  animation: vmRise var(--t-med) cubic-bezier(0.2,0.7,0.3,1); }
.video-modal__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-modal__close { position: absolute; z-index: 2; inset-block-start: 0.6rem; inset-inline-end: 0.6rem; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.45); color: #fff; font-size: 1.7rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center; transition: background var(--t-fast), transform var(--t-fast); }
.video-modal__close:hover { background: var(--gold); color: var(--green-dark); transform: rotate(90deg); }
@keyframes vmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vmRise { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .video-modal__backdrop, .video-modal__dialog { animation: none; } }
@media (max-width: 600px) { .video-modal { padding: 0.6rem; } .video-modal__dialog { width: 100%; } }

/* ===== Intro logo splash (plays once per session, fades into hero) ===== */
.intro-splash { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #18335f 0%, #15295a 55%, var(--navy) 100%);
  opacity: 1; transition: opacity 0.9s ease-in-out, transform 0.9s ease-in-out; }
.intro-skip .intro-splash, .intro-splash[hidden] { display: none; }
.intro-splash--out { opacity: 0; transform: scale(1.04); pointer-events: none; }
/* full-screen: cover on wide screens (cinematic), contain on narrow/portrait so the logo is never cropped */
.intro-splash__video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-aspect-ratio: 3/2) { .intro-splash__video { object-fit: contain; } }
.intro-splash__skip { position: absolute; inset-block-end: clamp(1.2rem, 4vh, 2.4rem); inset-inline-end: clamp(1.2rem, 4vw, 2.4rem);
  z-index: 1; background: transparent; border: 1px solid rgba(231,220,199,0.4); color: var(--cream-title);
  font-family: inherit; font-size: var(--fs-small); letter-spacing: 0.04em; padding: 0.5rem 1.3rem; border-radius: 999px;
  cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.intro-splash__skip:hover { background: var(--gold); border-color: var(--gold); color: var(--green-dark); }
@media (prefers-reduced-motion: reduce) { .intro-splash { display: none; } }