/* =========================================================
   Sweet Box 2026 — page-about.css (עמוד אודות)
   ========================================================= */

/* === HERO === */
.about-hero {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 32px 50px;
  text-align: center;
}
.about-hero h1 {
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 900;
  color: var(--brown);
  letter-spacing: 1px;
  line-height: 1.15;
  margin-bottom: 28px;
}
.about-hero .tagline {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400;
  color: var(--blue-deep);
  line-height: 1.5;
  max-width: 640px;
  margin: 0 auto;
  font-style: italic;
}

/* === STORY === */
.about-story {
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 32px;
  position: relative;
}
.about-story::before,
.about-story::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: var(--blue);
  margin: 0 auto;
}
.about-story::before { margin-bottom: 50px; }
.about-story::after { margin-top: 50px; }
.about-story p {
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.9;
  margin-bottom: 22px;
}
.about-story p:last-child { margin-bottom: 0; }
.about-story p strong { color: var(--brown); font-weight: 600; }

/* === CONTACT CALLOUT === */
.contact-block {
  max-width: 720px;
  margin: 0 auto 60px;
  padding: 0 32px;
}
.contact-card {
  background: var(--blue-soft);
  border-radius: 20px;
  padding: 40px 36px;
  text-align: center;
}
.contact-card .ask {
  font-size: 19px;
  color: var(--brown);
  font-weight: 400;
  margin-bottom: 12px;
}
.contact-card .invite {
  font-size: 16px;
  color: var(--ink-soft);
  font-weight: 300;
  margin-bottom: 26px;
}
.contact-card .methods {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.contact-card .methods a {
  background: white;
  border: 1px solid var(--line);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brown);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.3s, border-color 0.3s, transform 0.2s;
}
.contact-card .methods a:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: white;
  transform: translateY(-1px);
}
.contact-card .methods .ico { font-size: 16px; line-height: 1; }

/* === CLOSING === */
.closing-line {
  max-width: 860px;
  margin: 0 auto 70px;
  text-align: center;
  padding: 0 32px;
}
.closing-line p {
  font-family: 'Frank Ruhl Libre', 'Heebo', serif;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--brown);
  font-weight: 400;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .about-hero { padding: 0 16px 30px; }
  .about-story { padding: 36px 16px; }
  .about-story::before { margin-bottom: 30px; }
  .about-story::after { margin-top: 30px; }
  .about-story p { font-size: 16px; }
  .contact-block { padding: 0 16px; margin-bottom: 40px; }
  .contact-card { padding: 28px 20px; }
  .closing-line { margin-bottom: 44px; }
}