/*
  מוסך רנדומלי — פלטה, פונטים ומבנה

  פלטה: גרפיט כהה (#14161A) + פלדה אפורה, מול צבע אזהרה יחיד — ענבר בטיחות (#F5A623).
  גוון כהה אחד לכל העמוד (Page Theme Lock), ללא היפוך תאורה בין סקשנים.

  טיפוגרפיה: Heebo (כותרות, משקל 800-900) + Assistant (טקסט רץ). מתארחים מקומית
  בתיקיית fonts/ (ראו fonts/fonts.css) — אין קריאה חיצונית ל-Google Fonts.

  מבנה: השפה החזותית של האתר הזה היא "לוח בקרה תעשייתי" — רצועת ניווט אנכית
  קבועה בקצה המסך במקום סרגל עליון, הירו מלא-שטח עם מסגרת HUD, ציר תהליך אופקי,
  "מסוע" שירותים בגלילה אופקית, וציטוט ביקורת בודד ומתחלף. זו שפה מבנית שונה
  לחלוטין מהאתרים האחרים בפרויקט (לא רק צבעים שונים).

  רדיוסים: שתי רמות בלבד, עקביות בכל העמוד — --radius-sm (4px) לבקרות/כפתורים,
  --radius-lg (8px) לתמונות/כרטיסים. אין רמה שלישית.

  ניגודיות (WCAG AA, מחושבת בנוסחת luminance היחסי):
    --text-muted (#a3a9b2) על --bg (#14161a)          → 7.66:1  (עובר AA וגם כמעט AAA)
    --text-muted על --bg-elevated (#1b1e23)            → 7.06:1  (עובר AA)
    --text-muted על --bg-card (#1f2329)                → 6.67:1  (עובר AA)
    --accent (#f5a623) על --bg (#14161a)               → 8.95:1  (עובר AA לטקסט רגיל)
    טקסט כפתור #17130a על --accent (#f5a623)           → 9.15:1  (עובר AAA)
    --text (#f1efea) על --bg (#14161a)                 → 17.9:1  (עובר AAA)
  כל הזוגות עומדים ביעד המחמיר יותר (4.5:1) גם כשה"יעד" הוא טקסט רגיל, לא רק גדול.
*/

:root{
  --bg: #14161a;
  --bg-elevated: #1b1e23;
  --bg-card: #1f2329;
  --steel: #3a3f47;
  --steel-light: #6b7280;
  --text: #f1efea;
  --text-muted: #a3a9b2;
  --accent: #f5a623;
  --accent-dim: #c9871a;
  --border: #2a2e34;
  --radius-sm: 4px;
  --radius-lg: 8px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --max-w: 1280px;
  --rail-w: 64px;
  --dock-h: 64px;
  --stage-pad-r: 24px;
}

@media (min-width: 861px){
  :root{ --stage-pad-r: calc(24px + var(--rail-w)); }
}

/* ---------- high contrast override (accessibility widget) ---------- */
html.a11y-contrast{
  --bg: #000000;
  --bg-elevated: #000000;
  --bg-card: #0a0a0a;
  --steel: #ffffff;
  --steel-light: #ffffff;
  --text: #ffffff;
  --text-muted: #ffffff;
  --accent: #ffd23f;
  --accent-dim: #ffd23f;
  --border: #ffffff;
}
html.a11y-contrast .conveyor-card,
html.a11y-contrast .process-num,
html.a11y-contrast .gallery-item{ border-width: 2px; }

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

/* ---------- underline links (accessibility widget) ---------- */
html.a11y-underline a:not(.btn):not(.rail-link):not(.dock-link):not(.fab-whatsapp):not(.a11y-toggle):not(.rail-logo){
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* ---------- reading spacing (accessibility widget) ----------
   Targets WCAG 1.4.12 (Text Spacing): line-height >= 1.5x, letter-spacing
   >= 0.12x, word-spacing >= 0.16x, without loss of content/functionality. */
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); }

/* ---------- stop animations (accessibility widget) ---------- */
html.a11y-stop-motion *,
html.a11y-stop-motion *::before,
html.a11y-stop-motion *::after{
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

*, *::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-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 860px){
  body{ padding-bottom: var(--dock-h); }
}

img{ max-width: 100%; display: block; }

h1, h2, h3{
  font-family: 'Heebo', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0;
}

.accent-text{ color: var(--accent); }

.brand{ display: flex; align-items: center; gap: 10px; }
.brand-text{ font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 1.05rem; }
.brand-mark{ color: var(--accent); width: 28px; height: 28px; flex-shrink: 0; }
.brand-mark svg{ width: 100%; height: 100%; }

.shell{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  padding-right: var(--stage-pad-r);
}

.skip-link{
  position: absolute;
  right: -9999px;
  top: 0;
  background: var(--accent);
  color: #14161a;
  padding: 12px 20px;
  z-index: 999;
  font-weight: 700;
}
.skip-link:focus{ right: 12px; top: 12px; }

a{ color: inherit; text-decoration: none; }

/* focus-visible: consistent amber ring, keyboard only */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out), border-color 200ms var(--ease-out);
  cursor: pointer;
}
.btn svg{ width: 18px; height: 18px; flex-shrink: 0; }
.btn-accent{ background: var(--accent); color: #17130a; }
.btn-ghost{ background: transparent; color: var(--text); border-color: var(--steel); }
@media (hover: hover) and (pointer: fine){
  .btn-accent:hover{ background: #ffb63f; transform: translateY(-2px); }
  .btn-ghost:hover{ border-color: var(--text-muted); transform: translateY(-2px); }
}
.btn:active{ transform: scale(0.97); }
.btn-lg{ padding: 15px 26px; font-size: 1rem; }

/* =========================================================
   VERTICAL ICON RAIL (desktop) / BOTTOM DOCK (mobile)
   ========================================================= */
.rail-nav{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--rail-w);
  z-index: 200;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
}
.rail-logo{
  color: var(--accent);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  flex-shrink: 0;
}
.rail-logo svg{ width: 26px; height: 26px; }

.rail-links{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.rail-link{
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.rail-link svg{ width: 20px; height: 20px; }
.rail-link.is-active{ color: var(--accent); background: var(--bg-card); }
@media (hover: hover) and (pointer: fine){
  .rail-link:hover{ color: var(--text); background: var(--bg-card); }
}

.rail-tooltip{
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .rail-link:hover .rail-tooltip,
  .rail-link:focus-visible .rail-tooltip{
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

.rail-phone{
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-top: 12px;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.rail-phone svg{ width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine){
  .rail-phone:hover{ background: var(--bg-card); transform: translateY(-2px); }
}

@media (max-width: 860px){
  .rail-nav{
    top: auto;
    inset-inline: 0;
    bottom: 0;
    width: auto;
    height: var(--dock-h);
    flex-direction: row;
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 0 6px;
  }
  .rail-logo, .rail-phone{ display: none; }
  .rail-links{
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
    gap: 0;
  }
  .rail-link{ width: 48px; height: 48px; }
  .rail-tooltip{ display: none; }
}

/* =========================================================
   HERO — full-bleed photo, HUD frame, oversized headline
   ========================================================= */
.hero{
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-media{ position: absolute; inset: 0; z-index: 0; }
.hero-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
@media (max-width: 860px){
  /* full-screen-height hero photo left no room for the headline on a phone
     (the image alone filled the viewport). Cap it to a photo band instead.
     Overrides the inset:0 above explicitly (bottom:auto), not just height. */
  .hero{ min-height: 0; }
  .hero-media{ top: 0; left: 0; right: 0; bottom: auto; height: 62vh; min-height: 340px; }
}
.hero-scrim{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(20,22,26,0.88) 34%, rgba(20,22,26,0.42) 64%, rgba(20,22,26,0.12) 100%),
    linear-gradient(to left, rgba(20,22,26,0.55) 0%, rgba(20,22,26,0) 30%);
}

.hero-stage{
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 96px;
  padding-bottom: 88px;
}
@media (max-width: 860px){
  .hero-stage{ padding-top: 64px; padding-bottom: 56px; }
}

.hero-frame{
  position: absolute;
  inset: 28px var(--stage-pad-r) 28px 24px;
  pointer-events: none;
  z-index: 1;
}
.hero-frame::before, .hero-frame::after{
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
}
.hero-frame::before{
  top: 0; right: 0;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}
.hero-frame::after{
  bottom: 0; left: 0;
  border-bottom: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
}
@media (max-width: 860px){
  .hero-frame{ inset: 18px 18px 18px 18px; }
  .hero-frame::before, .hero-frame::after{ width: 22px; height: 22px; }
}

.hero-content{ max-width: 62ch; }
.hero-brand{
  font-family: 'Heebo', sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
  margin: 0 0 18px;
}
.hero-rating-chip{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(31,35,41,0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  margin-bottom: 24px;
  backdrop-filter: blur(6px);
}
.rating-stars{ color: var(--accent); display: flex; gap: 2px; }
.rating-stars svg{ width: 15px; height: 15px; }
.rating-text{ display: flex; flex-direction: column; line-height: 1.2; }
.rating-text strong{ font-family: 'Heebo', sans-serif; font-size: 1.05rem; }
.rating-text span{ font-size: 0.76rem; color: var(--text-muted); }

.hero-title{ font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: 1.05; margin-bottom: 22px; }
.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: 46ch; margin-bottom: 32px; }
.hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; }

/* =========================================================
   PROCESS — horizontal numbered timeline
   ========================================================= */
.process{ padding: 96px 0; border-bottom: 1px solid var(--border); }
.process .section-head{ margin-bottom: 56px; }
.process-track{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  position: relative;
}
.process-track::before{
  content: "";
  position: absolute;
  top: 22px;
  right: calc(12.5% + 22px);
  left: calc(12.5% + 22px);
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.process-step{ position: relative; z-index: 1; padding: 0 12px; text-align: center; }
.process-num{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 18px;
  background: var(--bg);
  border: 2px solid var(--accent);
  color: var(--accent);
  border-radius: 50%;
  font-family: 'Heebo', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
}
.process-step h3{ font-size: 1.05rem; margin-bottom: 8px; }
.process-step p{ color: var(--text-muted); font-size: 0.9rem; margin: 0; max-width: 24ch; margin-inline: auto; }

@media (max-width: 860px){
  .process{ padding: 64px 0; }
  .process-track{ grid-template-columns: 1fr; gap: 32px; }
  .process-track::before{
    top: 0; bottom: 0; right: 22px; left: auto; width: 2px; height: auto;
  }
  .process-step{ display: flex; align-items: flex-start; gap: 18px; text-align: right; padding: 0; }
  .process-num{ margin: 0; flex-shrink: 0; }
  .process-step p{ margin-inline: 0; max-width: none; }
}

/* section head */
.section-head{ margin-bottom: 40px; }
.section-head h2{ font-size: clamp(1.8rem, 3vw, 2.6rem); }

/* =========================================================
   SERVICES — horizontal scroll-snap conveyor
   ========================================================= */
.services{ padding: 96px 0 104px; }
.services-head{ margin-bottom: 32px; }
.conveyor{
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 24px 20px;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}
.conveyor.is-dragging{ cursor: grabbing; scroll-snap-type: none; }
@media (min-width: 861px){
  .conveyor{ padding-right: var(--stage-pad-r); }
}
.conveyor::-webkit-scrollbar{ height: 6px; }
.conveyor::-webkit-scrollbar-thumb{ background: var(--steel); border-radius: 3px; }
.conveyor::-webkit-scrollbar-track{ background: transparent; }

.conveyor-card{
  scroll-snap-align: start;
  flex: 0 0 clamp(260px, 62%, 400px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: border-color 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.conveyor-card--featured{ border-color: var(--accent); }
@media (hover: hover) and (pointer: fine){
  .conveyor-card:hover{ border-color: var(--accent); transform: translateY(-4px); }
}
.service-icon{ width: 32px; height: 32px; color: var(--accent); margin-bottom: 16px; }
.conveyor-card h3{ font-size: 1.1rem; margin-bottom: 8px; }
.conveyor-card p{ color: var(--text-muted); font-size: 0.94rem; margin: 0; }

/* =========================================================
   ABOUT (kept, adjusted for rail clearance)
   ========================================================= */
.about{ padding: 40px 0 104px; }
.about-inner{
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 56px;
  align-items: center;
}
.about-image img{ width: 100%; height: auto; border-radius: var(--radius-lg); aspect-ratio: 4/5; object-fit: cover; }
.about-copy h2{ font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin-bottom: 20px; }
.about-copy p{ color: var(--text-muted); margin-bottom: 24px; max-width: 52ch; }
.about-points{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.about-points li{ padding-right: 26px; position: relative; font-weight: 600; }
.about-points li::before{
  content: "";
  position: absolute;
  right: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
@media (max-width: 860px){
  .about{ padding: 8px 0 72px; }
  .about-inner{ grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================================
   GALLERY (kept, adjusted)
   ========================================================= */
.gallery{ padding: 0 0 104px; }
.gallery-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: 560px;
}
.gallery-item{
  all: unset; box-sizing: border-box; display: block; cursor: pointer;
  overflow: hidden; border-radius: var(--radius-lg); position: relative;
}
.gallery-item:focus-visible{ outline: 3px solid var(--accent); outline-offset: 3px; }
.gallery-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); pointer-events: none; }
.gallery-item::after{
  content: "";
  position: absolute; inset: 0;
  background: rgba(20,22,26,0.28);
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .gallery-item:hover::after{ opacity: 1; }
}
@media (hover: hover) and (pointer: fine){
  .gallery-item:hover img{ transform: scale(1.06); }
}
.gallery-item--tall{ grid-row: span 2; }
@media (max-width: 860px){
  .gallery{ padding-bottom: 72px; }
  .gallery-grid{ grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .gallery-item, .gallery-item--tall{ grid-row: auto; height: 260px; }
}

/* =========================================================
   REVIEWS — single auto-advancing quote
   ========================================================= */
.reviews{ background: var(--bg-elevated); padding: 104px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.reviews-inner{ display: grid; grid-template-columns: 0.55fr 1.45fr; gap: 56px; align-items: center; }
.reviews-score{ display: flex; flex-direction: column; gap: 10px; }
.score-number{ font-family: 'Heebo', sans-serif; font-weight: 900; font-size: 4.5rem; line-height: 1; }
.reviews-score .rating-stars svg{ width: 20px; height: 20px; }
.score-count{ color: var(--text-muted); font-weight: 600; }

.reviews-quote{ min-width: 0; }
.quote-display{ margin: 0 0 24px; min-height: 7.5em; }
.quote-display p{
  margin: 0 0 16px;
  font-size: 1.35rem;
  line-height: 1.5;
  font-weight: 600;
  transition: opacity 220ms var(--ease-out);
}
.quote-display cite{
  display: block;
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  font-size: 0.92rem;
  transition: opacity 220ms var(--ease-out);
}
.quote-display.is-fading p,
.quote-display.is-fading cite{ opacity: 0; }

.quote-dots{ display: flex; gap: 10px; }
.quote-dot{
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.quote-dot::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--steel);
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.quote-dot.is-active::before{ background: var(--accent); transform: scale(1.25); }

@media (max-width: 860px){
  .reviews{ padding: 72px 0; }
  .reviews-inner{ grid-template-columns: 1fr; gap: 32px; }
  .quote-display p{ font-size: 1.15rem; }
}

/* =========================================================
   HOURS + MAP
   ========================================================= */
.hours-contact{ padding: 104px 0; }
.hc-inner{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: stretch; }
.hc-hours h2{ font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin-bottom: 24px; }
.hours-list{ list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; }
.hours-list li{ display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); font-weight: 600; }
.hours-list li span:last-child{ color: var(--text-muted); font-weight: 500; }
.hc-actions{ display: flex; gap: 14px; flex-wrap: wrap; }
.hc-map{ border-radius: var(--radius-lg); overflow: hidden; min-height: 320px; border: 1px solid var(--border); }
.hc-map iframe{ width: 100%; height: 100%; min-height: 320px; border: 0; filter: grayscale(0.3) contrast(1.05); }
@media (max-width: 860px){
  .hours-contact{ padding: 72px 0; }
  .hc-inner{ grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--bg-elevated); border-top: 1px solid var(--border); padding: 40px 0; }
.footer-inner{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.footer-brand p{ color: var(--text-muted); font-size: 0.85rem; margin: 4px 0 0; }
.footer-contact{ display: flex; gap: 20px; font-weight: 600; }
.footer-contact a:hover{ color: var(--accent); }
.footer-legal{
  width: 100%;
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.footer-legal a:hover{ color: var(--accent); }
.footer-copy{ width: 100%; text-align: center; color: var(--text-muted); font-size: 0.8rem; margin: 16px 0 0; }
.footer-credit{ width: 100%; text-align: center; color: var(--text-muted); opacity: 0.65; font-size: 0.72rem; margin: 4px 0 0; }

/* floating whatsapp */
.fab-whatsapp{
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #0b1a10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,0.5);
  z-index: 90;
  transition: transform 200ms var(--ease-out);
}
.fab-whatsapp svg{ width: 28px; height: 28px; }
@media (hover: hover) and (pointer: fine){
  .fab-whatsapp:hover{ transform: scale(1.08); }
}
@media (max-width: 860px){
  .fab-whatsapp{ bottom: calc(var(--dock-h) + 16px); }
}

/* =========================================================
   ACCESSIBILITY WIDGET
   ========================================================= */
.a11y-widget{
  position: fixed;
  bottom: 24px;
  /* desktop: the vertical icon rail owns the right 64px of the viewport (see
     --rail-w) and ends in a phone button pinned to its bottom, in roughly the
     same corner. Clear the rail entirely instead of stacking on top of it. */
  right: calc(var(--rail-w) + 24px);
  z-index: 210;
  /* the button and panel are plain flex children now, not an absolutely
     positioned panel anchored off the button - one less positioning
     context to get wrong. Matches the widget structure already proven to
     work on the other two sites in this project. */
  display: flex;
  flex-direction: column-reverse;
  /* flex-start, not flex-end: in an RTL column flex container the cross-axis
     "end" resolves to the LEFT edge, which shifted the toggle button itself
     leftward whenever the (much wider) panel opened. flex-start keeps both
     children flush with the RIGHT edge, where the button is meant to stay
     put at all times. */
  align-items: flex-start;
  gap: 12px;
}
.a11y-toggle{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,0.5);
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out);
}
.a11y-toggle svg{ width: 28px; height: 28px; }
@media (hover: hover) and (pointer: fine){
  .a11y-toggle:hover{ transform: scale(1.08); background: var(--bg-elevated); }
}
@media (max-width: 860px){
  /* mobile: the rail collapses into a full-width bottom dock, so the right-side
     offset that clears the desktop rail is no longer needed here. */
  .a11y-widget{ bottom: calc(var(--dock-h) + 16px); right: 24px; }
}

.a11y-panel{
  width: min(320px, calc(100vw - 48px));
  max-height: min(60vh, 420px);
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.6);
}
.a11y-panel[hidden]{ display: none; }
.a11y-panel h2{ font-size: 1.05rem; margin-bottom: 16px; }
.a11y-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.a11y-row span{ font-weight: 600; font-size: 0.92rem; }
.a11y-btns{ display: flex; gap: 6px; }
.a11y-btns button{
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  font-family: 'Heebo', sans-serif;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.a11y-btns button:hover{ border-color: var(--accent); }

.a11y-toggle-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
  font-family: 'Assistant', sans-serif;
  cursor: pointer;
  text-align: right;
}
/* real track + knob elements, not a background-image trick: the flat
   painted-on circle read as sunken/pressed-in instead of a raised switch
   knob, because a background-image can't cast its own shadow. A real
   element can. `.a11y-switch` is `position:relative` and is the ONLY
   element the knob's `position:absolute` is ever anchored to (directly,
   as its own parent) - that's what makes absolute positioning safe here,
   unlike the original bug where the knob had no matching relative parent
   at all. */
.a11y-switch{
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 11px;
  flex-shrink: 0;
  background: var(--steel);
  transition: background 200ms var(--ease-out);
}
.a11y-switch-knob{
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 1px 1px rgba(0,0,0,0.25);
  transition: transform 200ms var(--ease-out);
}
.a11y-toggle-row[aria-pressed="true"] .a11y-switch{ background: var(--accent); }
.a11y-toggle-row[aria-pressed="true"] .a11y-switch-knob{ transform: translateX(-16px); }

.a11y-reset{
  width: 100%;
  margin-top: 16px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-weight: 700;
  font-family: 'Assistant', sans-serif;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out);
}
.a11y-reset:hover{ border-color: var(--accent); }

/* =========================================================
   GALLERY LIGHTBOX
   ========================================================= */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10,11,13,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}
.lightbox[hidden]{ display: none; }
.lightbox-close{
  position: absolute;
  top: 20px;
  left: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.lightbox-close svg{ width: 22px; height: 22px; }
.lightbox-close:hover{ border-color: var(--accent); color: var(--accent); }
.lightbox-figure{ margin: 0; max-width: min(1100px, 92vw); max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox-figure img{ max-width: 100%; max-height: 78vh; width: auto; height: auto; border-radius: var(--radius-lg); object-fit: contain; }
.lightbox-figure figcaption{ color: var(--text-muted); font-size: 0.92rem; text-align: center; }
@media (prefers-reduced-motion: no-preference){
  .lightbox-figure img{ animation: lightbox-in 260ms var(--ease-out); }
  @keyframes lightbox-in{ from{ opacity: 0; transform: scale(0.96); } to{ opacity: 1; transform: scale(1); } }
}

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

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

/* =========================================================
   LEGAL PAGES (accessibility.html / privacy.html)
   ========================================================= */
.legal-header{
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.legal-header-inner{ display: flex; align-items: center; gap: 10px; }

.legal-main{ padding: 64px 0 96px; }
.legal-content{ max-width: 65ch; margin: 0 auto; padding: 0 24px; }
.legal-content h1{ font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 28px; }
.legal-content h2{ font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 1.25rem; margin: 36px 0 14px; }
.legal-content p{ color: var(--text-muted); margin: 0 0 16px; }
.legal-content ul{ color: var(--text-muted); padding-right: 22px; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.legal-content strong{ color: var(--text); }
.legal-updated{ color: var(--text-muted); font-size: 0.85rem; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); }

.legal-fade{ opacity: 0; transition: opacity 500ms var(--ease-out); }
.legal-fade.is-visible{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .legal-fade{ opacity: 1; transition: none; }
}