/* Vickathon style.css */
:root{
  --navy:#04577f;
  --navy-deep:#062f45;
  --orange:#f2760a;
  --orange-deep:#c65a02;
  --gold:#b8860b;
  --dark:#0e2230;
  --ink:#2b2b2b;
  --paper:#faf6ee;
  --card:#ffffff;
  --line:#ece3d1;
  --max:1080px;
  --shadow-soft:0 8px 22px rgba(14,34,48,.07);
  --shadow-lift:0 18px 38px rgba(14,34,48,.16);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Assistant","Segoe UI",Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  direction:rtl;
  line-height:1.7;
  font-size:18px;
}
a{color:var(--navy);text-decoration:none;transition:color .15s ease;}
a:hover{text-decoration:underline;color:var(--orange);}
img{max-width:100%;height:auto;display:block;margin-left:auto;margin-right:auto;}
h1,h2,h3,h4{font-family:"Assistant","Segoe UI",Arial,sans-serif;color:var(--dark);line-height:1.25;font-weight:800;letter-spacing:-.01em;}
h1{font-size:2.3rem;margin:0 0 .5rem;}
h2{
  font-size:1.7rem;
  color:var(--dark);
  margin:0 0 1.1rem;
}
h3{font-size:1.25rem;color:var(--navy);font-weight:800;}

/* eyebrow label: small editorial tag above headings */
.eyebrow{
  display:inline-block;
  font-size:1.15rem;
  font-weight:800;
  font-style:italic;
  letter-spacing:.05em;
  color:var(--orange);
  margin-bottom:12px;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:26px;height:3px;
  background:var(--orange);
  vertical-align:middle;
  margin-left:10px;
}

.check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:var(--orange);
  border:none;
  font-weight:bold;
  width:22px;height:22px;
  border-radius:50%;
  font-size:.74rem;
}

/* checkmark + wrapping text block, aligned as a clean flex row (icon stays put, text block wraps beneath itself, not under the icon) */
.check-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.check-row .check{
  flex-shrink:0;
  margin-top:3px;
}
.check-row-text{
  flex:1;
  text-align:right;
}

/* sticky header + nav */
.sticky-top{
  position:sticky;
  top:0;
  z-index:200;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}

/* header */
header.site-header{
  background:var(--dark);
  color:#fff;
  padding:16px 20px;
}
.header-inner{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.brand{
  font-size:1.4rem;
  font-weight:700;
  color:#fff;
  display:flex;
  align-items:center;
}
.brand span{color:var(--orange);font-weight:800;}
.brand img{margin:0 0 0 8px;}

/* v10: top-bar button switched from a bare phone number to a WhatsApp
   call-to-action ("לשיחה בוואטסאפ"), per Galit's request - a plain phone
   number doesn't say what tapping it does. The phone number itself stays
   visible in the footer and contact areas. On narrow screens the label
   shortens to "וואטסאפ" so it doesn't crowd the bar; the icon is always
   shown. */
.phone-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--orange);
  color:#fff;
  font-weight:700;
  padding:10px 24px;
  border-radius:2px;
  font-size:.92rem;
  letter-spacing:.02em;
  transition:background .15s ease;
  white-space:nowrap;
}
.phone-badge:hover{background:var(--orange-deep);text-decoration:none;}
.phone-badge .wa-icon{width:18px;height:18px;fill:#fff;flex-shrink:0;}
.phone-badge .badge-short{display:none;}
@media(max-width:480px){
  .phone-badge{padding:9px 14px;gap:6px;}
  .phone-badge .badge-full{display:none;}
  .phone-badge .badge-short{display:inline;}
}
nav.main-nav{
  background:var(--navy-deep);
  border-top:1px solid rgba(255,255,255,.08);
}
.nav-inner{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:2px;
}
.nav-inner a{
  color:#dce7ee;
  padding:13px 16px;
  font-size:.95rem;
  display:inline-block;
  position:relative;
  transition:color .15s ease;
}
.nav-inner a::after{
  content:"";
  position:absolute;
  right:16px;left:16px;bottom:8px;
  height:2px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s ease;
}
.nav-inner a:hover, .nav-inner a.active{
  color:#fff;
  text-decoration:none;
}
.nav-inner a:hover::after, .nav-inner a.active::after{transform:scaleX(1);}

/* mobile-only: collapse the nav row on scroll-down, reveal on scroll-up.
   Header row (logo + phone) always stays visible. JS toggles .nav-collapsed
   on .sticky-top; this rule only takes effect at mobile widths.

   v9 fix: the previous version animated `max-height` (300px -> 0). Animating
   a layout property like max-height forces the browser to recompute the
   layout of everything below the nav on every single animation frame, so
   that the hero section can reflow in sync as the nav shrinks/grows. On
   this device that reflow was lagging a frame or two behind the paint,
   which is exactly what screen recordings showed: the nav visually
   overlapping/ghosting over the hero text for a moment during the
   transition. That lag is what read as "flickering."
   The fix: the nav's actual layout height now snaps instantly (no
   transition on max-height), so sibling reflow always happens in one
   atomic step with no partial/mismatched state possible. The collapse
   still *looks* animated because opacity (which never touches layout,
   so it can't desync) is what actually transitions. */
@media(max-width:800px){
  nav.main-nav{
    max-height:300px;
    opacity:1;
    overflow:hidden;
    transition:opacity .18s ease, border-top-color .18s ease;
  }
  .sticky-top.nav-collapsed nav.main-nav{
    max-height:0;
    opacity:0;
    border-top-color:transparent;
  }
}

/* breadcrumb */
.breadcrumb{max-width:var(--max);margin:14px auto 0;padding:0 20px;font-size:.9rem;color:#8a8272;}
.breadcrumb a{color:#8a8272;text-decoration:underline;}

/* hero: plain (fallback, text-only pages) */
.hero{
  max-width:1400px;
  margin:0 auto;
  padding:56px 24px;
  text-align:center;
  background:var(--paper);
}
.hero h1{font-size:2.5rem;max-width:820px;margin-left:auto;margin-right:auto;}
.hero h1 em{font-style:italic;color:var(--orange);font-weight:800;}
.hero .sub{font-size:1.2rem;color:var(--navy);font-weight:700;margin-top:12px;}
.hero .tagline{color:#5a5346;margin-top:14px;font-size:1.05rem;max-width:700px;margin-left:auto;margin-right:auto;}
.hero .eyebrow{color:var(--orange);}

/* hero: full-bleed photography variant */
.hero-photo{
  background-size:cover;
  background-position:center;
  padding:90px 24px;
  color:#fff;
  position:relative;
}
.hero-photo::before{
  content:"";
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(650px 500px at 92% -10%, rgba(255,152,46,.55), transparent 62%),
    radial-gradient(520px 420px at -10% 112%, rgba(242,118,10,.42), transparent 62%);
  pointer-events:none;
}
.hero-photo > *{position:relative;z-index:1;}
.hero-photo h1{color:#fff;max-width:760px;}
.hero-photo h1 em{font-style:normal;color:var(--orange);font-weight:800;}
.hero-photo .sub{color:#f3ede0;}
.hero-photo .tagline{color:#d9d2c3;}
.hero-photo .eyebrow{color:var(--orange);font-size:1.2rem;text-shadow:0 2px 6px rgba(0,0,0,.55);}
.hero-photo .eyebrow::before{background:var(--orange);}
.hero-photo .btn{margin-top:22px;}
@media(max-width:700px){
  .hero-photo{padding:60px 20px;}
}

/* entrance animation for hero content on page load */
@keyframes heroUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
.hero-photo .eyebrow{animation:heroUp .7s ease both;}
.hero-photo h1{animation:heroUp .7s ease .1s both;}
.hero-photo .sub{animation:heroUp .7s ease .2s both;}
.hero-photo .tagline{animation:heroUp .7s ease .3s both;}
.hero-photo .btn{animation:heroUp .7s ease .4s both;}
.hero-photo img{animation:heroUp .7s ease .2s both;}

/* scroll-reveal: elements fade up into view as the page scrolls */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .hero-photo .eyebrow,.hero-photo h1,.hero-photo .sub,.hero-photo .tagline,.hero-photo .btn,.hero-photo img{animation:none;}
}

/* about-page portrait hero */
.hero-portrait{
  text-align:center;
}
.hero-portrait img{
  border:5px solid #fff;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* urgency + guarantee bar */
.strip{
  max-width:var(--max);
  margin:18px auto;
  padding:0 20px;
}
.strip-inner{
  background:#fdf1de;
  border-right:4px solid var(--gold);
  border-radius:2px;
  padding:18px 22px;
  text-align:center;
  font-weight:700;
  color:#6b4a10;
}

/* sections */
.section{max-width:var(--max);margin:0 auto;padding:44px 24px;}
.section.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:4px;
  padding:26px;
  margin-bottom:18px;
  transition:border-color .18s ease,transform .18s ease;
}
.card:hover{border-color:var(--orange);transform:translateY(-2px);}

/* bold color-block cards for key value-proposition grids */
.grid-bold .card{border:none;}
.grid-bold .card:nth-child(3n+1){background:var(--dark);color:#fff;}
.grid-bold .card:nth-child(3n+2){background:var(--orange);color:#fff;}
.grid-bold .card:nth-child(3n+1) strong,.grid-bold .card:nth-child(3n+2) strong{color:#fff;}
.grid-bold .card:nth-child(3n+1) .check,.grid-bold .card:nth-child(3n+2) .check{background:#fff;color:var(--dark);}
.grid-bold .card:hover{transform:translateY(-4px);border:none;}
/* explicit color override for grids where a specific checkerboard order is needed */
.grid-bold .card.color-dark{background:var(--dark);color:#fff;}
.grid-bold .card.color-orange{background:var(--orange);color:#fff;}
.grid-bold .card.color-dark strong,.grid-bold .card.color-orange strong{color:#fff;}
.grid-bold .card.color-dark .check,.grid-bold .card.color-orange .check{background:#fff;color:var(--dark);}
.grid-bold .card-title{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin:0;
  text-align:right;
  direction:rtl;
}
.grid-bold .card-title .check{flex-shrink:0;}
.grid-bold .card-desc{
  margin:8px 0 0;
  text-align:right;
  line-height:1.6;
}
.grid{display:grid;gap:18px;align-items:stretch;}
.grid.cols-2{grid-template-columns:1fr 1fr;}
.grid.cols-3{grid-template-columns:1fr 1fr 1fr;}

/* premium card grid: clean 3-column layout with soft shadow cards */
.grid-premium{
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.grid-premium .card{
  background:#FFFFFF;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  border-radius:12px;
  padding:24px;
  margin-bottom:0;
  transition:all .3s ease;
  text-align:right;
}
.grid-premium .card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(0,0,0,.09);
  border-color:rgba(0,0,0,.06);
}
.grid-premium .card-title{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin:0;
  text-align:right;
  direction:rtl;
}
.grid-premium .card-title strong{
  color:var(--dark);
  font-weight:700;
}
.grid-premium .card-title .check{flex-shrink:0;}
.grid-premium .card-desc{
  margin:8px 0 0;
  color:#4A5568;
  text-align:right;
  line-height:1.6;
}

/* format-choice card grid (e.g. frontal/virtual/hybrid options) */
.grid-formats{
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.grid-formats .card{
  background:#FFFFFF;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  border-radius:12px;
  padding:20px;
  margin-bottom:0;
  text-align:right;
  transition:all .3s ease;
}
.grid-formats .card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(0,0,0,.09);
}
.grid-formats .card-title{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin:0;
  text-align:right;
  direction:rtl;
}
.grid-formats .card-title strong{
  color:var(--dark);
  font-weight:700;
}
.grid-formats .card-title .check{flex-shrink:0;}
.grid-formats .card-desc{
  margin:8px 0 0;
  color:#4A5568;
  text-align:right;
  line-height:1.6;
}
@media(max-width:800px){
  .grid.cols-2,.grid.cols-3,.grid-premium,.grid-formats{grid-template-columns:1fr;}
  h1{font-size:1.7rem;}
  .hero h1,.hero-photo h1{font-size:1.9rem;}
  body{font-size:16.5px;}
}

/* static "why choose us" cards list (content always visible, no toggle) */
.accordion{max-width:100%;}
.accordion-item{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  border-radius:12px;
  margin-bottom:14px;
  overflow:hidden;
}
.accordion-header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:none;
  border:none;
  padding:22px 24px;
  cursor:default;
  text-align:right;
  direction:rtl;
  font-family:inherit;
  font-size:1.08rem;
  color:inherit;
}
.accordion-title{display:flex;align-items:center;gap:10px;}
.accordion-title strong{color:var(--dark);font-weight:700;}
.accordion-title .check{flex-shrink:0;}
.accordion-panel{
  display:block;
}
.accordion-panel-inner{overflow:hidden;}
.accordion-desc{
  margin:0 24px 22px;
  color:#4A5568;
  line-height:1.7;
}

/* stats */
.stats{
  display:flex;flex-wrap:wrap;gap:0;justify-content:center;margin:26px 0;
  border-radius:4px;overflow:hidden;
  background:linear-gradient(120deg,var(--dark) 0%,var(--navy-deep) 55%,var(--orange-deep) 130%);
}
.stat{
  background:transparent;
  color:#fff;
  padding:30px 30px;
  text-align:center;
  min-width:150px;
  flex:1;
  border-left:1px solid rgba(255,255,255,.16);
}
.stat:last-child{border-left:none;}
.stat .num{font-size:2.7rem;font-weight:800;color:#fff;display:block;letter-spacing:-.02em;}
.stat .label{font-size:.9rem;margin-top:6px;color:#f0c9a0;}
@media(max-width:700px){.stats{flex-direction:column;}.stat{border-left:none;border-top:1px solid rgba(255,255,255,.16);}.stat:first-child{border-top:none;}}

/* Differentiator strip: bold one-line statement right under the hero H1 */
.differentiator-strip{
  background:linear-gradient(120deg,var(--dark) 0%,var(--navy-deep) 55%,var(--orange-deep) 130%);
  border-bottom:3px solid var(--orange);
  color:#fff;
  text-align:center;
  padding:16px 24px;
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.01em;
}
@media(max-width:700px){.differentiator-strip{font-size:.92rem;padding:14px 18px;}}

/* CTA box */
.cta-box{
  background:linear-gradient(135deg,var(--dark) 0%,var(--navy-deep) 45%,var(--orange-deep) 145%);
  color:#fff;
  border-radius:4px;
  padding:44px 28px;
  text-align:center;
  margin:36px 0;
}
.cta-box h2{color:#fff;}
.cta-box p{font-size:1.1rem;color:#f0e4d5;}
.btn{
  display:inline-block;
  background:var(--orange);
  color:#fff;
  font-weight:700;
  padding:15px 34px;
  border-radius:2px;
  margin-top:14px;
  font-size:1.02rem;
  letter-spacing:.01em;
  transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--orange-deep);transform:translateY(-2px);text-decoration:none;color:#fff;}

/* testimonial cards */
.quote-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  padding:24px;
  margin-bottom:16px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
  text-align:right;
}
.quote-card::before{
  content:"\201C";
  position:absolute;
  top:-6px;right:16px;
  font-size:3.2rem;
  color:var(--line);
  font-family:Georgia,serif;
  line-height:1;
}
.quote-card .txt{font-style:normal;position:relative;z-index:1;text-align:right;flex-grow:1;}
.quote-card .txt[dir="ltr"]{text-align:left;}
.quote-card .who{margin-top:auto;padding-top:16px;font-weight:800;color:var(--dark);font-style:normal;text-align:right;min-height:3.4em;}

.letter-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
  padding:18px;
  margin-bottom:22px;
  text-align:center;
  transition:border-color .18s ease;
}
.letter-card:hover{border-color:var(--orange);}
.letter-card img{border-radius:2px;border:1px solid var(--line);margin:0 auto 12px;max-height:640px;width:auto;}
.letter-card .cap{font-weight:800;color:var(--navy);}
.letter-card .role{color:#6b6355;font-size:.95rem;}
.letter-card details{margin-top:12px;text-align:right;}
.letter-card summary{cursor:pointer;color:var(--navy);font-weight:700;}
.letter-card .letter-text{margin-top:10px;font-size:.92rem;color:#4a4438;line-height:1.7;white-space:pre-line;}

/* case study: photo bleeds to the card edge */
.case{
  border:1px solid var(--line);
  border-radius:4px;
  padding:22px;
  margin-bottom:20px;
  background:#fff;
  overflow:hidden;
  transition:border-color .18s ease,transform .18s ease;
}
.case:hover{border-color:var(--orange);transform:translateY(-2px);}
.case h3,.case h4{margin-top:0;}
.case > img:first-of-type{
  margin:14px -22px 18px -22px;
  width:calc(100% + 44px) !important;
  max-width:none !important;
  height:auto !important;
  border-radius:0;
  transition:transform .5s ease;
}
.case > img:first-child{
  margin:-22px -22px 18px -22px;
}
.case:hover > img:first-of-type{transform:scale(1.025);}
.tag{
  display:inline-block;
  background:var(--navy);
  color:#fff;
  border:none;
  border-radius:20px;
  padding:5px 14px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  margin-left:6px;
  margin-bottom:6px;
}
.tag:nth-of-type(2n){background:var(--orange);}

/* filter tabs (category labels only, static) */
.cat-legend{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}

/* footer */
footer.site-footer{
  background:var(--dark);
  color:#a9b7c0;
  text-align:center;
  padding:34px 20px;
  margin-top:48px;
  font-size:.9rem;
}
footer.site-footer a{color:var(--orange);}

.small-note{font-size:.85rem;color:#8a8272;}

.contact-block{
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
  padding:22px 26px;
}
.contact-block a{font-weight:800;}

.table-scroll{overflow-x:auto;margin:20px 0;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.05);}
.compare-table{width:100%;border-collapse:collapse;background:#fff;min-width:640px;}
.compare-table caption{text-align:right;padding:10px 16px;font-size:.85rem;color:#6b6355;background:#faf7f0;}
.compare-table th,.compare-table td{padding:14px 16px;text-align:right;border-bottom:1px solid var(--line);font-size:.95rem;}
.compare-table thead th{background:var(--dark);color:#fff;font-weight:800;white-space:nowrap;}
.compare-table tbody tr:last-child td{border-bottom:none;}
.compare-table tbody tr:nth-child(odd){background:#faf7f0;}
.compare-table td:first-child,.compare-table th:first-child{font-weight:800;color:var(--dark);}
.compare-table tbody tr.row-highlight td:first-child{color:var(--orange-deep);}

.principle-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 24px;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,.04);}
.principle-card h3{margin:0 0 8px;font-size:1.08rem;color:var(--dark);}
.principle-card .principle-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;font-size:.95rem;margin-left:10px;}
.principle-card .why,.principle-card .how{margin:6px 0 0;font-size:.95rem;line-height:1.6;color:#4A5568;}
.principle-card .why strong,.principle-card .how strong{color:var(--dark);}

.card-link{display:block;text-decoration:none;color:inherit;}
.card-link:hover{transform:translateY(-2px);transition:transform .15s ease;}