/* About page - scoped to .page-about. Mirrors the dark/gold language
   used across Home / Services / Brands / Magazine / Gallery. */

.page-about {
  background:
    radial-gradient(1200px 480px at 50% -10%, rgba(214, 180, 106, 0.1), transparent),
    radial-gradient(900px 420px at 85% 30%, rgba(214, 180, 106, 0.045), transparent),
    linear-gradient(180deg, #060503 0%, #0a0807 40%, #060503 100%);
}

/* Buffer below the translucent sticky topbar. */
.page-about main {
  padding-top: 1.5rem;
}
.page-about main > .section:first-child {
  padding-top: 5.5rem;
}
@media (max-width: 540px) {
  .page-about main {
    padding-top: 1rem;
  }
  .page-about main > .section:first-child {
    padding-top: 4rem;
  }
}
html:has(.page-about) {
  scroll-padding-top: 90px;
}

/* Tighten generous global section padding so the page feels purposeful
   without crowding. Gently reduced from 2.2rem → 1.8rem. */
.page-about main > .section {
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
}
.page-about main > .section:first-child {
  padding-bottom: 1.3rem;
}
/* Slightly snugger transitions around the process / FAQ pair, which is
   where the eye spent the most "dead space" in the previous version. */
.page-about main > .section:has(.ab-process),
.page-about main > .section.ab-faq-section {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
/* Thin gold-gradient divider between every consecutive section pair.
   Adds visual rhythm without making the page brighter. Skipped before
   the first section and before the final CTA so the page bookends stay
   uninterrupted. */
.page-about main > .section + .section::before {
  content: "";
  display: block;
  width: min(360px, 60%);
  height: 1px;
  margin: 0 auto 1.3rem;
  background: linear-gradient(90deg, transparent, rgba(214, 180, 106, 0.32), transparent);
}
.page-about main > .section:has(.ab-cta)::before {
  display: none;
}

/* ---------- Hero ---------- */
.page-about .ab-hero {
  position: relative;
  padding: 2rem 1.4rem 2.1rem;
  border: 1px solid rgba(214, 180, 106, 0.32);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 65% 80% at 50% 0%, rgba(214, 180, 106, 0.16), transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 100%, rgba(214, 180, 106, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(28, 22, 16, 0.96), rgba(10, 9, 8, 0.97));
  box-shadow:
    inset 0 1px 0 rgba(214, 180, 106, 0.18),
    0 14px 36px rgba(0, 0, 0, 0.45);
  text-align: center;
  overflow: hidden;
}
.page-about .ab-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 180, 106, 0.55), transparent);
  pointer-events: none;
}
@media (min-width: 720px) {
  .page-about .ab-hero {
    padding: 2.4rem 2.2rem 2.5rem;
  }
}
.page-about .ab-hero-eyebrow {
  margin: 0 0 0.45rem;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.page-about .ab-hero h1 {
  margin: 0 0 0.55rem;
  color: var(--champagne);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.25;
}
.page-about .ab-hero p {
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.75;
  max-width: 60ch;
}
.page-about .ab-hero .cta-row {
  margin-top: 1.1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Who-we-are intro (key brand statement) ----------
   Treated as the page's strongest content card - more depth, two-layer
   gold radial, a small "✦" sparkle mark in the corner, and a subtle inset
   highlight at the top edge. */
.page-about .ab-intro {
  position: relative;
  padding: 1.8rem 1.4rem 1.85rem;
  border: 1px solid rgba(214, 180, 106, 0.34);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 55% 70% at 18% 0%, rgba(214, 180, 106, 0.13), transparent 65%),
    radial-gradient(ellipse 40% 55% at 90% 100%, rgba(214, 180, 106, 0.07), transparent 70%),
    linear-gradient(180deg, rgba(28, 22, 16, 0.94), rgba(10, 9, 8, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(214, 180, 106, 0.2),
    0 14px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
@media (min-width: 720px) {
  .page-about .ab-intro {
    padding: 2.1rem 2rem 2.15rem;
  }
}
/* Thin gold seam along the top edge - same accent used on premium CTA blocks. */
.page-about .ab-intro::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 180, 106, 0.6), transparent);
  pointer-events: none;
}
/* Sparkle ornament - small, elegant, unobtrusive. Marks this as the
   key brand-statement section. */
.page-about .ab-intro::after {
  content: "✦";
  position: absolute;
  top: 1rem;
  inset-inline-end: 1.1rem;
  color: rgba(214, 180, 106, 0.55);
  font-size: 0.9rem;
  text-shadow: 0 0 10px rgba(214, 180, 106, 0.4);
  pointer-events: none;
}
@media (min-width: 720px) {
  .page-about .ab-intro {
    padding: 1.8rem 2rem 1.9rem;
  }
}
.page-about .ab-intro h2 {
  margin: 0 0 0.75rem;
  color: var(--champagne);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.35;
  max-width: 36ch;
}
.page-about .ab-intro p {
  margin: 0 0 0.7rem;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.98rem;
  line-height: 1.85;
  max-width: 58ch;
}
.page-about .ab-intro p:last-child {
  margin-bottom: 0;
}
.page-about .ab-intro strong {
  color: var(--gold);
  font-weight: 700;
}

/* Small uppercase eyebrow label sitting above each section H2. Subtle
   variation per section so the three content blocks no longer feel
   visually identical. */
.page-about .ab-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
  padding: 0;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.92;
}
.page-about .ab-eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(214, 180, 106, 0.65), transparent);
}
.page-about .ab-eyebrow::after {
  content: "";
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 180, 106, 0.65));
}
/* Subtle per-section variation. */
.page-about .ab-eyebrow--services::before,
.page-about .ab-eyebrow--services::after {
  background: linear-gradient(90deg, transparent, rgba(214, 180, 106, 0.45), transparent);
  width: 26px;
}
.page-about .ab-eyebrow--process {
  letter-spacing: 0.22em;
}
.page-about .ab-eyebrow--process::before,
.page-about .ab-eyebrow--process::after {
  width: 14px;
}

/* Shared section-heading accent - small centered gold rule under H2s. */
.page-about .ab-why-head,
.page-about .ab-services-head,
.page-about .ab-process-head {
  text-align: center;
  margin: 0 0 1.1rem;
}
.page-about .ab-why-head h2,
.page-about .ab-services-head h2,
.page-about .ab-process-head h2 {
  margin: 0 0 0.45rem;
  color: var(--champagne);
  font-size: clamp(1.2rem, 2.3vw, 1.6rem);
  position: relative;
  display: inline-block;
}
.page-about .ab-why-head h2::after,
.page-about .ab-services-head h2::after,
.page-about .ab-process-head h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin: 0.45rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(214, 180, 106, 0.6), transparent);
}

/* ---------- Why-us 6-card grid ---------- */
.page-about .ab-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.page-about .ab-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 620px) {
  .page-about .ab-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .page-about .ab-why-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.page-about .ab-why-grid {
  align-items: stretch;
}
.page-about .ab-why-card {
  padding: 1.2rem 1.15rem 1.25rem;
  border: 1px solid rgba(214, 180, 106, 0.24);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(214, 180, 106, 0.06), transparent 70%),
    linear-gradient(180deg, rgba(28, 22, 16, 0.92), rgba(12, 10, 8, 0.96));
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  /* Uniform card height across the row; icon stays aligned at top. */
  height: 100%;
  min-height: 170px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: inset 0 1px 0 rgba(214, 180, 106, 0.08);
}
.page-about .ab-why-card:hover {
  border-color: rgba(214, 180, 106, 0.5);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(214, 180, 106, 0.12),
    0 0 18px rgba(214, 180, 106, 0.1),
    0 12px 24px rgba(0, 0, 0, 0.35);
}
.page-about .ab-why-icon {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(214, 180, 106, 0.4);
  background:
    radial-gradient(circle at 30% 20%, rgba(214, 180, 106, 0.22), transparent 65%),
    linear-gradient(160deg, rgba(20, 15, 8, 0.85), rgba(8, 6, 4, 0.9));
  color: var(--gold);
  font-size: 1.05rem;
  box-shadow: inset 0 1px 0 rgba(214, 180, 106, 0.18);
}
.page-about .ab-why-card h3 {
  margin: 0;
  color: var(--champagne);
  font-size: 1rem;
  line-height: 1.35;
}
.page-about .ab-why-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.92rem;
  line-height: 1.75;
  max-width: 36ch;
}

/* ---------- Services chips (existing service links restyled) ---------- */
.page-about .ab-services-sub {
  margin: 0.45rem auto 0;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.94rem;
  line-height: 1.65;
}
.page-about .ab-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 600px) {
  .page-about .ab-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .page-about .ab-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.page-about .ab-services-grid {
  align-items: stretch;
}
.page-about .ab-service-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(214, 180, 106, 0.28);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 80% 80% at 30% 0%, rgba(214, 180, 106, 0.07), transparent 70%),
    linear-gradient(180deg, rgba(28, 22, 16, 0.9), rgba(10, 9, 8, 0.94));
  text-decoration: none;
  color: var(--champagne);
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1.4;
  /* Equal-height chips across the row regardless of label length. */
  height: 100%;
  min-height: 62px;
  box-shadow: inset 0 1px 0 rgba(214, 180, 106, 0.08), 0 6px 16px rgba(0, 0, 0, 0.3);
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.page-about .ab-service-card:hover {
  border-color: rgba(214, 180, 106, 0.6);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(214, 180, 106, 0.14),
    0 0 18px rgba(214, 180, 106, 0.14),
    0 12px 24px rgba(0, 0, 0, 0.4);
}
.page-about .ab-service-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(214, 180, 106, 0.4);
  background:
    radial-gradient(circle at 30% 20%, rgba(214, 180, 106, 0.22), transparent 65%),
    linear-gradient(160deg, rgba(20, 15, 8, 0.85), rgba(8, 6, 4, 0.9));
  color: var(--gold);
  font-size: 1.05rem;
}
.page-about .ab-service-label {
  flex: 1;
  min-width: 0;
}
.page-about .ab-service-arrow {
  flex-shrink: 0;
  color: var(--gold);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.page-about .ab-service-card:hover .ab-service-arrow {
  transform: translateX(-3px);
}

/* ---------- "איך אנחנו עובדים" - 4-step process ---------- */
.page-about .ab-process {
  padding: 1.4rem 1.1rem 1.5rem;
  border: 1px solid rgba(214, 180, 106, 0.24);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005));
}
@media (min-width: 720px) {
  .page-about .ab-process {
    padding: 1.6rem 1.6rem 1.7rem;
  }
}
.page-about .ab-process-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.95rem;
  align-items: stretch;
}
@media (min-width: 600px) {
  .page-about .ab-process-flow {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .page-about .ab-process-flow {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
}
.page-about .ab-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.05rem 0.9rem 1.1rem;
  border: 1px solid rgba(214, 180, 106, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(214, 180, 106, 0.05), rgba(0, 0, 0, 0));
  text-align: center;
  /* Uniform card height when descriptions vary in length. */
  min-height: 170px;
  height: 100%;
}
.page-about .ab-step-num {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: linear-gradient(135deg, rgba(214, 180, 106, 0.22), rgba(214, 180, 106, 0.05));
  color: var(--gold);
  font-weight: 700;
  font-size: 1.05rem;
  display: inline-grid;
  place-items: center;
  box-shadow:
    inset 0 0 0 1px rgba(214, 180, 106, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.35);
}
.page-about .ab-step h3 {
  margin: 0;
  color: var(--gold);
  font-size: 0.98rem;
  line-height: 1.35;
}
.page-about .ab-step p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.88rem;
  line-height: 1.7;
  max-width: 24ch;
}

/* ---------- FAQ section ---------- */
.page-about .ab-faq-section {
  position: relative;
}
.page-about .ab-faq-section .section-title {
  text-align: center;
  position: relative;
  display: block;
  margin-bottom: 1.2rem;
}
.page-about .ab-faq-section .section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin: 0.55rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(214, 180, 106, 0.6), transparent);
}
.page-about .ab-faq-sub {
  margin: 0 auto 1.1rem;
  text-align: center;
  max-width: 56ch;
  color: rgba(245, 234, 210, 0.72);
  font-size: 0.95rem;
  line-height: 1.7;
}
/* Soft gold halo behind the FAQ grid - adds depth without changing colors. */
.page-about .ab-faq-section > .container {
  position: relative;
  z-index: 0;
}
.page-about .ab-faq-section > .container::before {
  content: "";
  position: absolute;
  inset: -0.5rem -0.5rem -0.5rem -0.5rem;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(214, 180, 106, 0.06), transparent 70%);
  pointer-events: none;
  z-index: -1;
  border-radius: var(--radius);
}

/* ---------- Bottom CTA ---------- */
.page-about .ab-cta {
  position: relative;
  margin: 0;
  padding: 1.85rem 1.3rem;
  text-align: center;
  border: 1px solid rgba(214, 180, 106, 0.45);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(214, 180, 106, 0.16), transparent 70%),
    radial-gradient(ellipse 50% 70% at 50% 100%, rgba(214, 180, 106, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(22, 18, 12, 0.96), rgba(8, 7, 6, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(214, 180, 106, 0.22),
    0 0 0 1px rgba(214, 180, 106, 0.08),
    0 22px 44px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  overflow: hidden;
}
.page-about .ab-cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 180, 106, 0.55), transparent);
  pointer-events: none;
}
@media (min-width: 720px) {
  .page-about .ab-cta {
    padding: 2.2rem 2rem;
  }
}
.page-about .ab-cta h2 {
  margin: 0;
  color: var(--champagne);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  max-width: 36ch;
  line-height: 1.3;
}
.page-about .ab-cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  max-width: 60ch;
  line-height: 1.7;
  font-size: 0.98rem;
}
.page-about .ab-cta .cta-row {
  justify-content: center;
  margin-top: 0.5rem;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.page-about .ab-hero .cta-row {
  gap: 0.7rem;
}
@media (max-width: 600px) {
  .page-about .ab-cta .cta-row,
  .page-about .ab-hero .cta-row {
    width: 100%;
  }
  .page-about .ab-cta .cta-row .btn,
  .page-about .ab-hero .cta-row .btn {
    width: 100%;
    text-align: center;
  }
}

/* No-overflow safety */
.page-about main,
.page-about .container,
.page-about .ab-why-grid,
.page-about .ab-services-grid,
.page-about .ab-process-flow,
.page-about .ab-why-card,
.page-about .ab-service-card,
.page-about .ab-step {
  min-width: 0;
}
.page-about .ab-why-card h3,
.page-about .ab-step h3,
.page-about .ab-service-label,
.page-about .ab-intro h2,
.page-about .ab-cta h2 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Two-column intro: text on one side, optional image (home-slot) on the
   other. Falls back gracefully on mobile (stacked) and when the slot has
   no image (a subtle gradient placeholder stays in place). */
.page-about .ab-intro--split {
  display: grid;
  gap: 1.3rem;
  align-items: center;
}
@media (min-width: 880px) {
  .page-about .ab-intro--split {
    grid-template-columns: 1.05fr 0.95fr;
  }
}
.page-about .ab-intro-text {
  display: grid;
  gap: 0.6rem;
}
.page-about .ab-intro-image {
  margin: 0;
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius, 14px);
  overflow: hidden;
  border: 1px solid rgba(214, 180, 106, 0.4);
  background-color: rgba(20, 16, 12, 0.92);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(214, 180, 106, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.4);
}
.page-about .ab-intro-image:not(.has-image) {
  background-image:
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(214, 180, 106, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(20, 16, 12, 0.92), rgba(8, 7, 6, 0.96));
}
@media (max-width: 879px) {
  .page-about .ab-intro-image {
    aspect-ratio: 16 / 9;
  }
}

/* "קצת עלינו..." opening - replaces the heavy hero card. Plain page-flow
   layout, right-aligned title, no card chrome. */
.page-about .ab-opening-section {
  padding-top: 1.4rem;
}
.page-about .ab-opening-title {
  margin: 0 0 0.45rem;
  text-align: right;
  font-size: clamp(2rem, 4.8vw, 2.9rem);
  color: var(--champagne, #f5e7c8);
  font-weight: 700;
}
.page-about .ab-opening-lead {
  margin: 0 0 1.4rem;
  text-align: right;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  line-height: 1.7;
  max-width: 720px;
}

/* "התהליך" - bumped to match the surrounding hierarchy. */
.page-about .ab-process-head h2 {
  font-size: clamp(1.55rem, 3vw, 2.1rem);
}
.page-about .ab-process-flow {
  gap: 1.05rem;
}
.page-about .ab-step {
  padding: 1.3rem 1.2rem;
}
.page-about .ab-step h3 {
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}
.page-about .ab-step p {
  font-size: 0.98rem;
  line-height: 1.65;
}
.page-about .ab-step-num {
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.05rem;
}

/* ===== Opening section: strip the card wrapper =====
   The "קצת עלינו..." section sits naturally on the page background instead
   of inside a bordered/illuminated box. Targets the .ab-intro inside the
   opening section only - other .ab-intro usages keep their styling. */
.page-about .ab-opening-section .ab-intro {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.page-about .ab-opening-section .ab-intro::before,
.page-about .ab-opening-section .ab-intro::after {
  content: none;
  display: none;
}
@media (min-width: 720px) {
  .page-about .ab-opening-section .ab-intro {
    padding: 0;
  }
}
/* Inside the split, give the two columns a sensible inner gap and align
   the buttons cleanly under the prose without the original card padding. */
.page-about .ab-opening-section .ab-intro--split {
  gap: 1.6rem;
  margin-top: 0.4rem;
}
.page-about .ab-opening-section .ab-intro-text {
  gap: 0.85rem;
}
.page-about .ab-opening-section .ab-intro-text .cta-row {
  margin-top: 0.4rem;
}