/* ================= v2 design pass =================
   Palette / typography / hero rework per הנחיות-לקלוד.md.
   Scoped entirely under body.sf-design-v2 so the live page (no class) is
   untouched — both pages share sf-extras.css, this file overrides on top. */

body.sf-design-v2 {
  --sf2-navy: #0b2138;
  --sf2-navy-2: #0e2c4a;
  --sf2-cream: #f4ecdd;
  --sf2-cream-2: #fbf6ea;
  --sf2-accent: #4a77a9;
  --sf2-accent-light: #6f97c2;
  --sf2-accent-eyebrow: #bcd0e8;
  --sf2-accent-dark: #2c5488;
  --sf2-body-on-cream: #4a5a6b;
}

/* ---------- Side-nav brand mark: bigger, sitting right above "01" instead of
   pinned to the very top of the nav column ---------- */

body.sf-design-v2 .sf-side-nav {
  background: #0a2b4a !important;
  justify-content: center !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

body.sf-design-v2 .sf-side-nav__brand {
  border: none !important;
  flex: 0 0 auto !important;
  height: 162px !important;
  margin-bottom: 18px !important;
  width: 162px !important;
}

body.sf-design-v2 .sf-side-nav__brand-logo {
  height: 96px !important;
  width: 96px !important;
}

/* Active-item arrow — match the button/accent color instead of the old electric blue. */
body.sf-design-v2 .sf-side-nav__list a::after {
  border-right-color: #4a76a8 !important;
}

body.sf-design-v2 .sf-side-nav__list {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
}

/* ---------- Typography ---------- */

body.sf-design-v2 h1.elementor-heading-title,
body.sf-design-v2 h2.elementor-heading-title,
body.sf-design-v2 h3.elementor-heading-title,
body.sf-design-v2 h6.elementor-heading-title {
  font-family: "Heebo", sans-serif !important;
}

body.sf-design-v2 .elementor-text-editor,
body.sf-design-v2 .elementor-button {
  font-family: "Assistant", sans-serif !important;
}

body.sf-design-v2 #top h1.elementor-heading-title {
  font-weight: 900 !important;
  font-size: clamp(56px, 6vw, 104px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.02em !important;
}

body.sf-design-v2 .sf-scroll-section h2.elementor-heading-title {
  font-weight: 800 !important;
}

/* Section title pattern: big colored number sitting directly above the bold
   title (h1 = number, h2 = label). #top's own h1 (the hero) stays untouched —
   its ID-scoped rule always wins specificity over this class-scoped one. */
body.sf-design-v2 .sf-scroll-section:not(#top) h1.elementor-heading-title {
  color: #4a76a8 !important;
  font-family: "Heebo", sans-serif !important;
  font-size: clamp(48px, 6vw, 88px) !important;
  font-weight: 800 !important;
  line-height: 0.95 !important;
  margin-bottom: -6px !important;
}

body.sf-design-v2 #top .sf2-highlight {
  color: var(--sf2-accent-eyebrow);
}

/* ---------- Hero: scrim, CTA button, badge ---------- */

body.sf-design-v2 #top .elementor-background-overlay {
  background-image: linear-gradient(280deg, rgba(6, 18, 32, 0.94), rgba(8, 25, 42, 0.05)),
    linear-gradient(0deg, rgba(6, 18, 32, 0.85), transparent 45%) !important;
  opacity: 1 !important;
}

body.sf-design-v2 #top .elementor-button {
  background: var(--sf2-accent) !important;
  border: none !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-family: "Heebo", sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 16px 30px !important;
}

body.sf-design-v2 #top .elementor-button:hover {
  background: var(--sf2-accent-light) !important;
  opacity: 1;
}

body.sf-design-v2 .sf2-badge {
  align-items: center;
  background: rgba(11, 33, 56, 0.55) !important;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px !important;
  color: #fff;
  display: flex !important;
  font-family: "Assistant", sans-serif;
  font-size: 13px;
  gap: 8px;
  left: 32px;
  padding: 8px 18px !important;
  position: absolute !important;
  top: 32px;
  width: fit-content !important;
  max-width: 260px;
  z-index: 5;
}

body.sf-design-v2 .sf2-badge .elementor-heading-title {
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

/* ---------- Section background / text colors ---------- */

body.sf-design-v2 #story,
body.sf-design-v2 #projects,
body.sf-design-v2 #urban {
  background-color: var(--sf2-cream) !important;
}

body.sf-design-v2 #story h2.elementor-heading-title,
body.sf-design-v2 #projects h2.elementor-heading-title,
body.sf-design-v2 #urban h2.elementor-heading-title {
  color: var(--sf2-navy) !important;
}

body.sf-design-v2 #story .elementor-text-editor,
body.sf-design-v2 #projects .elementor-text-editor,
body.sf-design-v2 #urban .elementor-text-editor {
  color: var(--sf2-body-on-cream) !important;
}

body.sf-design-v2 #planning,
body.sf-design-v2 #building,
body.sf-design-v2 #team,
body.sf-design-v2 #contact {
  background-color: var(--sf2-navy) !important;
}

body.sf-design-v2 #planning h2.elementor-heading-title,
body.sf-design-v2 #building h2.elementor-heading-title,
body.sf-design-v2 #team h2.elementor-heading-title,
body.sf-design-v2 #contact h2.elementor-heading-title {
  color: #fff !important;
}

body.sf-design-v2 #planning .elementor-text-editor,
body.sf-design-v2 #building .elementor-text-editor,
body.sf-design-v2 #team .elementor-text-editor {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ---------- Card grid (planning / projects / building / urban / team) ---------- */

body.sf-design-v2 .sf2-card {
  background: var(--sf2-navy-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-inline-start: 3px solid transparent;
  border-radius: 8px;
  padding: 28px 24px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

body.sf-design-v2 .sf2-card:hover {
  border-inline-start-color: var(--sf2-accent);
  transform: translateY(-4px);
}

body.sf-design-v2 .sf2-card .sf2-card-num {
  color: rgba(255, 255, 255, 0.15);
  display: block;
  font-family: "Heebo", sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 12px;
}

body.sf-design-v2 .sf2-card h3 {
  color: #fff;
  font-family: "Heebo", sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
}

body.sf-design-v2 .sf2-card p {
  color: rgba(255, 255, 255, 0.65);
  font-family: "Assistant", sans-serif;
  font-size: 14px;
  margin: 0;
}

body.sf-design-v2 #projects .sf2-card,
body.sf-design-v2 #urban .sf2-card {
  background: var(--sf2-cream-2);
  border-color: rgba(11, 33, 56, 0.08);
}

body.sf-design-v2 #projects .sf2-card .sf2-card-num,
body.sf-design-v2 #urban .sf2-card .sf2-card-num {
  color: rgba(11, 33, 56, 0.12);
}

body.sf-design-v2 #projects .sf2-card h3,
body.sf-design-v2 #urban .sf2-card h3 {
  color: var(--sf2-navy);
}

body.sf-design-v2 #projects .sf2-card p,
body.sf-design-v2 #urban .sf2-card p {
  color: var(--sf2-body-on-cream);
}

body.sf-design-v2 .sf2-card img {
  border-radius: 4px;
  margin-bottom: 16px;
}

/* ---------- Story: lead quote + numbered value blocks ---------- */

body.sf-design-v2 .sf2-lead {
  color: var(--sf2-navy);
  font-family: "Assistant", sans-serif;
  font-size: 20px;
  font-weight: 500;
}

body.sf-design-v2 .sf2-value-block {
  border-inline-start: 3px solid var(--sf2-accent);
  margin-bottom: 20px;
  padding-inline-start: 18px;
}

body.sf-design-v2 .sf2-value-block .sf2-value-num {
  color: var(--sf2-accent);
  display: block;
  font-family: "Heebo", sans-serif;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 4px;
}

/* ---------- Contact strip ---------- */

body.sf-design-v2 #contact .elementor-button {
  background: var(--sf2-accent-dark) !important;
  border: none !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-family: "Heebo", sans-serif !important;
  font-weight: 700 !important;
}

body.sf-design-v2 #contact .elementor-button:hover {
  background: var(--sf2-accent) !important;
}