/*
  לק ג'ל באופקים — טניה קזקוב — פלטה ופונטים

  פלטה: בלאש רך (#FBEEF1) עם טקסט מרּון עמוק (#4A2530) וזהב-רוז יחיד (--accent).
  במכוון לא נבחר סגול/לבנדר — הצבע ה"ברירת מחדל" שה-AI נוטה אליו בתחום היופי.

  תיקוני נגישות (על גבי הגרסה המקורית): --text-muted הועמק מ-#93707c (כ-3.8:1,
  נכשל מול הדרישה של 4.5:1) ל-#7d5a67 (כ-5.27:1). --accent הועמק מ-#b98d6f
  (נכשל כטקסט/מילוי כפתור על רקע בהיר, כ-2.6-4.4:1 בהתאם לשימוש) ל-#82593d
  (כ-5.4:1 כטקסט, כ-6.1:1 כלבן-על-מילוי) — אותו גוון משפחתי, פשוט כהה יותר.

  טיפוגרפיה: Frank Ruhl Libre (סריף עברי אלגנטי) לכותרות, ו-Assistant קליל (300)
  לטקסט רץ. זהו הפרויקט היחיד מבין השלושה שמשתמש בסריף. הגופנים מתארחים מקומית
  תחת fonts/ (ראו fonts/fonts.css) ואינם נטענים מ-Google.

  קומפוזיציה: צפיפות ויזואלית נמוכה, הרבה אוויר בין הסקשנים. מסגרת תמונה אורגנית
  ("blob") במקום ריבוע או עיגול מושלם, כרטיסי שירות בצורת גלולה (pill) עם אייקון עגול.

  אנימציה: תנועה רכה ואיטית יחסית (power3/power2, בלי back/bounce), ורגע חתימה אחד:
  "ברק" עדין שעובר על תמונת הירו בטעינה הראשונה.
*/

:root{
  --bg: #fbeef1;
  --bg-elevated: #f6e1e6;
  --bg-card: #ffffff;
  --text: #4a2530;
  --text-muted: #7d5a67;
  --accent: #82593d;
  --accent-soft: rgba(130, 89, 61, 0.12);
  --border: #ecd6da;
  --radius: 22px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-soft: cubic-bezier(0.34, 1.2, 0.64, 1);
  --max-w: 1180px;
}

/* ---------- high contrast override (accessibility widget) ---------- */
html.a11y-contrast{
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --text: #000000;
  --text-muted: #000000;
  --accent: #6e1233;
  --border: #000000;
}
html.a11y-contrast .service-pill,
html.a11y-contrast .review-card,
html.a11y-contrast .gallery-item{ border: 2px solid #000; }
html.a11y-contrast .site-header{ background: #fff !important; border-bottom: 2px solid #000; }

/* ---------- font-size steps (accessibility widget) ---------- */
html.a11y-font-lg{ font-size: 112%; }
html.a11y-font-xl{ font-size: 125%; }

/* ---------- underline-links (accessibility widget) ---------- */
html.a11y-underline a{ text-decoration: underline !important; text-underline-offset: 3px; }

/* ---------- reading spacing (accessibility widget) ----------
   WCAG 1.4.12 Text Spacing: line-height >= 1.5x, letter-spacing >= 0.12x,
   word-spacing >= 0.16x. */
html.a11y-spacing body{ letter-spacing: 0.03em; word-spacing: 0.08em; }
html.a11y-spacing p, html.a11y-spacing li, html.a11y-spacing h1, html.a11y-spacing h2,
html.a11y-spacing h3, html.a11y-spacing a, html.a11y-spacing span, html.a11y-spacing button{
  line-height: 1.9 !important; letter-spacing: 0.03em !important;
}

/* ---------- grayscale (accessibility widget) ---------- */
html.a11y-grayscale{ filter: grayscale(1); }

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Assistant', system-ui, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
h1, h2, h3{ font-family: 'Frank Ruhl Libre', Georgia, serif; font-weight: 500; margin: 0; }
.accent-text{ color: var(--accent); font-style: italic; }
a{ color: inherit; text-decoration: none; }

/* focus-visible, everywhere, gated so mouse clicks stay quiet */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link{ position: absolute; right: -9999px; top: 0; background: var(--accent); color: #fff; padding: 12px 20px; z-index: 999; font-weight: 600; }
.skip-link:focus{ right: 12px; top: 12px; border-radius: 8px; }

.btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 30px; border-radius: 999px; font-weight: 600; font-size: 0.94rem;
  white-space: nowrap; border: 1px solid transparent; cursor: pointer;
  transition: transform 260ms var(--ease-soft), background 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.btn-accent{ background: var(--accent); color: #fff; }
.btn-ghost{ background: transparent; color: var(--text); border-color: var(--accent); }
@media (hover: hover) and (pointer: fine){
  .btn-accent:hover{ background: #6b4630; transform: translateY(-2px); }
  .btn-ghost:hover{ background: var(--accent-soft); transform: translateY(-2px); }
}
.btn:active{ transform: scale(0.97); }
.btn-lg{ padding: 17px 34px; }

/* header */
.site-header{ position: sticky; top: 0; z-index: 100; background: rgba(251, 238, 241, 0.86); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
.header-inner{ max-width: var(--max-w); margin: 0 auto; padding: 0 24px; height: 84px; display: flex; align-items: center; gap: 32px; }
.brand{ display: flex; align-items: center; gap: 10px; margin-left: auto; }
.brand-mark{ color: var(--accent); width: 26px; height: 26px; flex-shrink: 0; }
.brand-mark svg{ width: 100%; height: 100%; }
.brand-text{ font-family: 'Frank Ruhl Libre', serif; font-size: 1.15rem; }
.main-nav{ display: flex; gap: 30px; margin-right: auto; }
.main-nav a{ font-size: 0.92rem; font-weight: 500; color: var(--text-muted); transition: color 200ms var(--ease-out); }
.main-nav a:hover{ color: var(--accent); }
.nav-cta{ flex-shrink: 0; }
.nav-toggle{ display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; cursor: pointer; }
.nav-toggle span{ width: 22px; height: 1.5px; background: var(--text); }
.mobile-nav{ display: none; flex-direction: column; gap: 4px; padding: 12px 24px 24px; border-top: 1px solid var(--border); }
.mobile-nav a{ padding: 12px 4px; font-weight: 500; border-bottom: 1px solid var(--border); min-height: 44px; display: flex; align-items: center; }
.mobile-nav .btn{ margin-top: 12px; justify-content: center; }
.mobile-nav.open{ display: flex; }
@media (max-width: 860px){ .main-nav, .nav-cta{ display: none; } .nav-toggle{ display: flex; } }

/* hero */
.hero{ padding: 64px 0 40px; }
.hero-inner{ max-width: var(--max-w); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 0.9fr; gap: 64px; align-items: center; }
.hero-title{ font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.25; margin-bottom: 26px; font-weight: 500; }
.reveal-line{ display: block; overflow: hidden; }
.reveal-line span{ display: inline-block; will-change: transform; }
.hero-sub{ font-size: 1.12rem; color: var(--text-muted); max-width: 42ch; margin-bottom: 34px; }
.hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; }

.hero-visual{ position: relative; }
.hero-blob-shape{
  border-radius: 62% 38% 55% 45% / 55% 45% 55% 45%;
  overflow: hidden;
  aspect-ratio: 6/7;
  position: relative;
}
.hero-blob-shape img{ width: 100%; height: 100%; object-fit: cover; }
.hero-shine{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
  transform: translateX(-120%);
}
.hero-rating-chip{
  position: absolute; bottom: -14px; right: 20px;
  background: var(--bg-card); border-radius: 999px; padding: 10px 18px 10px 14px;
  display: flex; align-items: center; gap: 8px; box-shadow: 0 16px 32px -14px rgba(74,37,48,0.28);
  font-size: 0.86rem;
}
.hero-rating-chip .rating-stars svg{ width: 15px; height: 15px; color: var(--accent); }
.hero-rating-chip strong{ font-weight: 700; }
.hero-rating-chip span{ color: var(--text-muted); }
@media (max-width: 860px){
  .hero{ padding: 32px 0 32px; }
  .hero-inner{ grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero-sub{ margin-inline: auto; }
  .hero-actions{ justify-content: center; }
  .hero-blob-shape{ max-width: 340px; margin: 0 auto; }
}

/* hero entrance: plain CSS, not GSAP - starts the instant CSS is parsed,
   with zero dependency on any script (GSAP included) having downloaded or
   run yet. Pure predetermined motion, no interactivity, so CSS is the
   right tool here regardless of load-speed concerns. */
@media (prefers-reduced-motion: no-preference){
  .reveal-line span{ animation: hero-rise 0.9s cubic-bezier(0.16,1,0.3,1) both; }
  .reveal-line:nth-of-type(1) span{ animation-delay: 0s; }
  .reveal-line:nth-of-type(2) span{ animation-delay: 0.12s; }
  .hero-sub{ animation: hero-fade-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.25s both; }
  .hero-actions{ animation: hero-fade-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.35s both; }
  .hero-blob-shape{ animation: hero-scale-in 0.9s cubic-bezier(0.16,1,0.3,1) 0.05s both; }
  .hero-rating-chip{ animation: hero-fade-up 0.6s cubic-bezier(0.16,1,0.3,1) 0.55s both; }
  .hero-shine{ animation: hero-shine-sweep 1.2s ease-in-out 0.7s 1 both; }
}
@keyframes hero-rise{
  from{ transform: translateY(100%); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}
@keyframes hero-fade-up{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes hero-scale-in{
  from{ opacity: 0; transform: scale(0.92); }
  to{ opacity: 1; transform: scale(1); }
}
@keyframes hero-shine-sweep{
  from{ transform: translateX(-120%); }
  to{ transform: translateX(220%); }
}

/* trust strip */
.trust-strip{ padding: 8px 0 8px; }
.trust-inner{ max-width: var(--max-w); margin: 0 auto; padding: 22px 24px; display: flex; justify-content: center; gap: 44px; flex-wrap: wrap; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-item{ display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 500; color: var(--text-muted); }
.trust-item svg{ width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }

/* section head */
.section-head{ max-width: var(--max-w); margin: 0 auto; padding: 0 24px; margin-bottom: 52px; text-align: center; }
.section-head h2{ font-size: clamp(1.9rem, 3vw, 2.5rem); }

/* services: pills */
.services{ padding: 120px 0; }
.services-grid{ max-width: 920px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.service-pill{
  background: var(--bg-card); border-radius: 999px; padding: 18px 26px; display: flex; align-items: center; gap: 18px;
  border: 1px solid var(--border); transition: transform 280ms var(--ease-soft), box-shadow 280ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine){ .service-pill:hover{ transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(74,37,48,0.25); } }
.service-icon{ width: 40px; height: 40px; border-radius: 50%; background: var(--bg-elevated); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.service-icon svg{ width: 20px; height: 20px; }
.service-pill h3{ font-size: 1.02rem; margin-bottom: 3px; }
.service-pill p{ margin: 0; color: var(--text-muted); font-size: 0.86rem; }
@media (max-width: 700px){ .services{ padding: 80px 0; } .services-grid{ grid-template-columns: 1fr; } }

/* about */
.about{ padding: 0 0 120px; }
.about-inner{ max-width: var(--max-w); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 0.75fr 1fr; gap: 64px; align-items: center; }
.about-image img{ width: 100%; height: auto; border-radius: 45% 55% 50% 50% / 55% 50% 50% 45%; aspect-ratio: 4/5; object-fit: cover; }
.about-copy h2{ font-size: clamp(1.8rem, 2.8vw, 2.3rem); margin-bottom: 22px; }
.about-copy p{ color: var(--text-muted); max-width: 50ch; font-size: 1.05rem; }
@media (max-width: 860px){ .about{ padding: 0 0 80px; } .about-inner{ grid-template-columns: 1fr; gap: 36px; text-align: center; } .about-copy p{ margin-inline: auto; } }

/* gallery */
.gallery{ padding: 0 0 120px; }
.gallery-grid{ max-width: var(--max-w); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gallery-item{ border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; }
.gallery-item--offset{ margin-top: 40px; }
.gallery-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine){ .gallery-item:hover img{ transform: scale(1.06); } }
@media (max-width: 860px){ .gallery{ padding: 0 0 80px; } .gallery-grid{ grid-template-columns: 1fr 1fr; } .gallery-item--offset{ margin-top: 24px; } .gallery-grid > :last-child{ grid-column: span 2; aspect-ratio: 16/9; } }

/* reviews */
.reviews{ background: var(--bg-elevated); padding: 120px 0; }
.reviews-inner{ max-width: var(--max-w); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 0.65fr 1.35fr; gap: 60px; }
.reviews-score{ display: flex; flex-direction: column; gap: 10px; }
.score-number{ font-family: 'Frank Ruhl Libre', serif; font-weight: 500; font-size: 4.2rem; line-height: 1; }
.reviews-score .rating-stars{ display: flex; gap: 3px; }
.reviews-score .rating-stars svg{ width: 18px; height: 18px; color: var(--accent); }
.score-count{ color: var(--text-muted); }
.reviews-list{ display: flex; flex-direction: column; gap: 20px; }
.review-card{ margin: 0; background: var(--bg-card); border-radius: var(--radius); padding: 26px 30px; }
.review-card p{ margin: 0 0 14px; font-size: 1.04rem; font-style: italic; }
.review-card cite{ font-style: normal; font-weight: 600; color: var(--accent); font-size: 0.88rem; font-family: 'Assistant', sans-serif; }
@media (max-width: 860px){ .reviews{ padding: 80px 0; } .reviews-inner{ grid-template-columns: 1fr; gap: 32px; } }

/* hours + map */
.hours-contact{ padding: 120px 0; }
.hc-inner{ max-width: var(--max-w); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: stretch; }
.hc-hours h2{ font-size: clamp(1.8rem, 2.8vw, 2.3rem); margin-bottom: 26px; }
.hours-list{ list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; }
.hours-list li{ display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--border); }
.hours-list li span:last-child{ color: var(--text-muted); }
.hc-note{ color: var(--text-muted); font-size: 0.9rem; margin: 12px 0 28px; }
.hc-actions{ display: flex; gap: 14px; flex-wrap: wrap; }
.hc-map{ border-radius: var(--radius); overflow: hidden; min-height: 320px; }
.hc-map iframe{ width: 100%; height: 100%; min-height: 320px; border: 0; }
@media (max-width: 860px){ .hours-contact{ padding: 80px 0; } .hc-inner{ grid-template-columns: 1fr; gap: 32px; } }

/* footer */
.site-footer{ background: var(--text); color: var(--bg); padding: 44px 0 0; }
.footer-inner{ max-width: var(--max-w); margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.footer-brand .brand-text{ color: var(--bg); }
.footer-brand p{ color: rgba(251,238,241,0.65); font-size: 0.85rem; margin: 4px 0 0; }
.footer-contact{ display: flex; gap: 20px; font-weight: 500; }
.footer-contact a{ min-height: 44px; display: inline-flex; align-items: center; }
.footer-contact a:hover{ color: var(--accent); }
.footer-legal{ width: 100%; display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin: 22px 0 0; padding-top: 22px; border-top: 1px solid rgba(251,238,241,0.15); }
.footer-legal a{ color: rgba(251,238,241,0.75); font-size: 0.85rem; min-height: 44px; display: inline-flex; align-items: center; }
.footer-legal a:hover{ color: var(--accent); }
.footer-copy{ width: 100%; text-align: center; color: rgba(251,238,241,0.5); font-size: 0.8rem; margin: 0; padding: 18px 0 26px; }
.footer-credit{ width: 100%; text-align: center; color: rgba(251,238,241,0.38); font-size: 0.72rem; margin: 0 0 18px; }

/* floating whatsapp */
.fab-whatsapp{ position: fixed; bottom: 24px; left: 24px; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #0b1a10; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px -10px rgba(74,37,48,0.4); z-index: 90; transition: transform 260ms var(--ease-soft); }
.fab-whatsapp svg{ width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine){ .fab-whatsapp:hover{ transform: scale(1.08); } }

/* accessibility widget (bottom-right, opposite the WhatsApp fab) */
.a11y-widget{
  position: fixed; bottom: 24px; right: 24px; z-index: 95;
  /* flex column-reverse, not position:absolute for the panel: with
     position:absolute + a fixed bottom offset, adding the two new rows
     (spacing, grayscale) made the panel tall enough to push its own top
     edge above the viewport on shorter screens - the exact same bug this
     was already rebuilt to avoid on the garage site, just never ported
     here. column-reverse keeps the toggle button pinned in place while
     the panel (last in DOM, first visually) grows upward as a normal
     flex sibling instead of an absolutely positioned overlay. */
  display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 12px;
}
.a11y-toggle{
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -10px rgba(74,37,48,0.4);
  transition: transform 260ms var(--ease-soft);
}
.a11y-toggle svg{ width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine){ .a11y-toggle:hover{ transform: scale(1.08); } }

.a11y-panel{
  width: min(280px, calc(100vw - 48px));
  max-height: min(60vh, 420px);
  overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 48px -18px rgba(74,37,48,0.35);
  padding: 18px; display: none; flex-direction: column; gap: 14px;
}
.a11y-panel.open{ display: flex; }
.a11y-panel h2{ font-size: 1rem; margin: 0 0 2px; }
.a11y-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.a11y-row span{ font-size: 0.88rem; font-weight: 500; }
.a11y-stepper{ display: flex; align-items: center; gap: 6px; }
.a11y-btn{
  all: unset; box-sizing: border-box; cursor: pointer; min-width: 44px; min-height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: var(--text);
  padding: 6px 10px;
}
.a11y-btn:hover{ border-color: var(--accent); color: var(--accent); }
.a11y-switch{
  all: unset; box-sizing: border-box; cursor: pointer; min-width: 44px; min-height: 26px;
  width: 44px; height: 26px; border-radius: 999px; background: var(--border); position: relative;
  transition: background 180ms var(--ease-out);
}
.a11y-switch::before{
  content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform 180ms var(--ease-out);
}
.a11y-switch[aria-checked="true"]{ background: var(--accent); }
.a11y-switch[aria-checked="true"]::before{ transform: translateX(-18px); }
.a11y-reset{ margin-top: 4px; width: 100%; justify-content: center; padding: 10px; }
@media (prefers-reduced-motion: reduce){
  .a11y-toggle, .a11y-switch, .a11y-switch::before{ transition: none; }
}

/* stop-animations toggle: mirrors prefers-reduced-motion, applied on demand */
html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after{
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
html.a11y-no-motion .hero-shine{ display: none; }

/* scroll reveal base state (JS adds .is-visible) */
[data-reveal]{ opacity: 0; transform: translateY(24px); }
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-soft); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
  .reveal-line span{ transform: none !important; }
  .hero-shine{ display: none; }
}

/* legal pages (accessibility.html / privacy.html): calm, minimal motion */
.legal-main{ padding: 56px 0 100px; }
.legal-inner{ max-width: 65ch; margin: 0 auto; padding: 0 24px; }
.legal-inner h1{ font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 8px; }
.legal-updated{ color: var(--text-muted); font-size: 0.9rem; margin: 0 0 40px; }
.legal-inner h2{ font-size: 1.3rem; margin: 40px 0 14px; }
.legal-inner p, .legal-inner li{ color: var(--text-muted); font-size: 1.02rem; margin: 0 0 14px; }
.legal-inner ul{ padding-inline-start: 22px; margin: 0 0 20px; }
.legal-inner li{ margin-bottom: 8px; }
.legal-fade{ opacity: 0; }
.legal-fade.is-visible{ opacity: 1; transition: opacity 500ms var(--ease-out); }
@media (prefers-reduced-motion: reduce){
  .legal-fade{ opacity: 1; transition: none; }
}