/* ============ TOKENS ============ */
:root{
  --ink:#241C33;          /* deep plum-black: text, header, footer */
  --plum:#3B2E56;         /* primary brand */
  --plum-soft:#6B5B8A;    /* muted plum for secondary text on dark */
  --sage:#6F8F76;         /* accent: calm, human, non-corporate */
  --sage-deep:#4E6B55;
  --amber:#C08A3E;        /* used only for the phone CTA */
  --paper:#F5F3F6;        /* cool paper, not cream */
  --paper-2:#FFFFFF;
  --line:#DFD9E4;
  --muted:#635B70;

  --display:"Frank Ruhl Libre", "Times New Roman", serif;
  --body:"Assistant", "Segoe UI", Arial, sans-serif;
  --util:"Heebo", Arial, sans-serif;

  --wrap:1180px;
  --r:14px;
  --shadow:0 1px 2px rgba(36,28,51,.05), 0 14px 40px -22px rgba(36,28,51,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17.5px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.22; margin:0 0 .5em; letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem); font-weight:900}
h2{font-size:clamp(1.6rem,3.4vw,2.35rem)}
h3{font-size:1.24rem}
p{margin:0 0 1.05em}
.wrap{width:min(100% - 40px, var(--wrap)); margin-inline:auto}
.eyebrow{
  font-family:var(--util); font-size:.76rem; font-weight:700; letter-spacing:.16em;
  color:var(--sage-deep); text-transform:none; margin:0 0 .9rem; display:flex; align-items:center; gap:.6rem;
}
.eyebrow::after{content:""; height:1px; flex:1; background:var(--line); max-width:110px}
.lead{font-size:1.16rem; color:#4A4256}
.muted{color:var(--muted)}
.skip{position:absolute; right:-9999px; top:0; background:var(--ink); color:#fff; padding:12px 18px; z-index:999}
.skip:focus{right:12px; top:12px}
:focus-visible{outline:3px solid var(--sage); outline-offset:3px; border-radius:4px}

/* ============ HEADER ============ */
.topbar{
  background:var(--ink); color:#CFC7DD; font-family:var(--util);
  font-size:.82rem; padding:.5rem 0;
}
.topbar .wrap{display:flex; gap:1.4rem; justify-content:space-between; align-items:center; flex-wrap:wrap}
.topbar a{text-decoration:none}
.topbar a:hover{color:#fff}
.topbar .dot{color:var(--sage)}

.site-header{
  position:sticky; top:0; z-index:60; background:rgba(245,243,246,.88);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.header-in{display:flex; align-items:center; gap:1.6rem; min-height:76px}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; margin-inline-end:auto}
.mark{
  width:44px;height:44px;border-radius:11px;background:var(--plum);color:#fff;
  display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:1.1rem;
  letter-spacing:-.04em; flex:none;
}
.brand b{font-family:var(--display); font-size:1.32rem; font-weight:700; display:block; line-height:1.1}
.brand span{font-family:var(--util); font-size:.72rem; letter-spacing:.13em; color:var(--muted); display:block}

.nav{display:flex; align-items:center; gap:.15rem}
.nav a, .nav button{
  font-family:var(--util); font-size:.95rem; font-weight:500; color:var(--ink);
  background:none; border:0; padding:.55rem .7rem; border-radius:8px; cursor:pointer;
  text-decoration:none; white-space:nowrap;
}
.nav a:hover,.nav button:hover{background:#EAE5EF}
.nav a.active{color:var(--sage-deep); font-weight:700}
.has-menu{position:relative}
.has-menu > button::after{content:"⌄"; margin-inline-start:.3rem; font-size:.85em; opacity:.6}
.menu{
  position:absolute; top:calc(100% + 8px); inset-inline-start:0; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  padding:.5rem; width:min(94vw,560px); display:none; grid-template-columns:1fr 1fr; gap:.15rem;
}
.has-menu.open .menu{display:grid}
.menu a{display:block; padding:.6rem .7rem; border-radius:9px; font-size:.92rem}
.menu a:hover{background:#F1EDF5; color:var(--plum)}
.btn{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--util); font-weight:700;
  background:var(--plum); color:#fff; padding:.72rem 1.25rem; border-radius:999px;
  text-decoration:none; border:0; cursor:pointer; font-size:.95rem; transition:background .2s,transform .2s;
}
.btn:hover{background:var(--ink); transform:translateY(-1px)}
.btn--ghost{background:transparent; color:var(--plum); border:1.5px solid var(--line)}
.btn--ghost:hover{background:#fff; border-color:var(--plum); color:var(--plum)}
.btn--sage{background:var(--sage-deep)}
.btn--sage:hover{background:#3D5544}
.burger{display:none; background:none;border:0;cursor:pointer;padding:.5rem}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}

/* ============ HERO ============ */
.hero{padding:clamp(3rem,7vw,5.5rem) 0 0; position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.hero h1 .mark-line{
  background-image:linear-gradient(transparent 62%, rgba(111,143,118,.38) 62%);
  padding:0 .12em;
}
.hero p.lead{max-width:44ch}
.hero-cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.6rem}
.credential{
  display:flex; gap:2.2rem; flex-wrap:wrap; margin-top:2.8rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.credential div b{font-family:var(--display); font-size:1.9rem; display:block; line-height:1}
.credential div span{font-family:var(--util); font-size:.78rem; letter-spacing:.08em; color:var(--muted)}

/* signature: situation-based entry card */
.situation{
  background:var(--ink); color:#fff; border-radius:20px; padding:1.9rem 1.6rem;
  box-shadow:0 30px 60px -35px rgba(36,28,51,.8);
}
.situation h2{font-size:1.28rem; color:#fff; margin-bottom:.35rem}
.situation p{color:#B9AFCA; font-size:.94rem; margin-bottom:1.2rem}
.chips{display:flex; flex-direction:column; gap:.5rem}
.chip{
  text-align:start; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12);
  color:#F0ECF6; border-radius:11px; padding:.75rem .95rem; font-family:var(--body); font-size:.97rem;
  cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:.6rem;
  transition:background .18s, border-color .18s, transform .18s;
}
.chip:hover{background:rgba(111,143,118,.22); border-color:var(--sage); transform:translateX(-4px)}
.chip::after{content:"←"; color:var(--sage); font-size:1.05rem}

/* ============ SECTIONS ============ */
.section{padding:clamp(3.2rem,6.5vw,5.4rem) 0}
.section--tint{background:#EFEBF3}
.section--ink{background:var(--ink); color:#EFEAF5}
.section--ink h2,.section--ink h3{color:#fff}
.section--ink .eyebrow{color:#9DBBA4}
.section--ink .eyebrow::after{background:rgba(255,255,255,.18)}
.section--ink p{color:#BEB4CE}
.sec-head{max-width:62ch; margin-bottom:2.4rem}

.grid{display:grid; gap:1rem}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  padding:1.5rem 1.4rem; text-decoration:none; display:block; transition:border-color .2s, transform .2s, box-shadow .2s;
}
a.card:hover{border-color:var(--sage); transform:translateY(-3px); box-shadow:var(--shadow)}
.card h3{margin-bottom:.35rem}
.card p{font-size:.96rem; color:var(--muted); margin:0}
.card .go{font-family:var(--util); font-size:.85rem; color:var(--sage-deep); font-weight:700; margin-top:.9rem; display:inline-block}
.card-ico{
  width:38px;height:38px;border-radius:10px;background:#EDF2EE;color:var(--sage-deep);
  display:grid;place-items:center;font-size:1.1rem;margin-bottom:.9rem;font-family:var(--display);font-weight:700;
}

/* process — Hebrew-letter sequence (real order, not decoration) */
.steps{border-top:1px solid rgba(255,255,255,.14)}
.step{
  display:grid; grid-template-columns:64px 1fr 1.3fr; gap:1.4rem; align-items:start;
  padding:1.7rem 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.step .ot{
  font-family:var(--display); font-size:2rem; font-weight:900; color:var(--sage); line-height:1;
}
.step h3{margin:0}
.step p{margin:0; font-size:.97rem}

/* quote */
.quote{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.6rem 1.5rem;
}
.quote p{font-family:var(--display); font-size:1.08rem; line-height:1.7; color:#33293F}
.quote footer{font-family:var(--util); font-size:.82rem; color:var(--muted); letter-spacing:.04em}
.stars{color:var(--amber); letter-spacing:.14em; font-size:.9rem; margin-bottom:.6rem}

/* FAQ */
details.qa{
  background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:.7rem; overflow:hidden;
}
details.qa summary{
  cursor:pointer; padding:1.05rem 1.25rem; font-family:var(--display); font-weight:700; font-size:1.06rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; list-style:none;
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+"; color:var(--sage-deep); font-size:1.3rem; font-family:var(--util); flex:none}
details.qa[open] summary::after{content:"−"}
details.qa[open] summary{border-bottom:1px solid var(--line)}
.qa-body{padding:1.05rem 1.25rem; font-size:1rem; color:#4A4256}
.qa-body p:last-child{margin:0}

/* article page */
.prose{max-width:70ch}
.prose h2{margin-top:2.2rem}
.prose ul{padding-inline-start:1.2rem; margin:0 0 1.2em}
.prose li{margin-bottom:.5em}
.pagehead{background:#EFEBF3; border-bottom:1px solid var(--line); padding:clamp(2.4rem,5vw,3.8rem) 0 clamp(2rem,4vw,3rem)}
.crumbs{font-family:var(--util); font-size:.83rem; color:var(--muted); margin-bottom:1rem}
.crumbs a{text-decoration:none; color:var(--sage-deep)}
.crumbs a:hover{text-decoration:underline}

.split{display:grid; grid-template-columns:1.6fr .9fr; gap:clamp(1.6rem,4vw,3.2rem); align-items:start}
.sidebar{position:sticky; top:100px}
.sidebar .box{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.4rem}
.sidebar h3{font-size:1.1rem}
.sidebar ul{list-style:none; padding:0; margin:0}
.sidebar li a{display:block; padding:.45rem 0; font-size:.95rem; text-decoration:none; border-bottom:1px solid #F0ECF4}
.sidebar li a:hover{color:var(--sage-deep)}

/* checklist */
.ticks{list-style:none; padding:0; margin:0 0 1.4rem}
.ticks li{position:relative; padding-inline-start:1.7rem; margin-bottom:.6rem}
.ticks li::before{
  content:""; position:absolute; inset-inline-start:0; top:.62em; width:8px; height:8px;
  border-radius:50%; background:var(--sage);
}

/* contact */
.field{margin-bottom:1rem}
.field label{display:block; font-family:var(--util); font-size:.85rem; font-weight:500; margin-bottom:.35rem}
.field input,.field textarea,.field select{
  width:100%; padding:.8rem .9rem; border:1.5px solid var(--line); border-radius:10px;
  font-family:var(--body); font-size:1rem; background:#fff; color:var(--ink);
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--sage); outline:none}
.form-note{font-size:.83rem; color:var(--muted)}
.ok{background:#EDF2EE; border:1px solid var(--sage); color:var(--sage-deep); padding:1rem; border-radius:10px; font-weight:600}
.contact-item{display:flex; gap:.9rem; padding:.9rem 0; border-bottom:1px solid var(--line)}
.contact-item b{font-family:var(--util); font-size:.78rem; letter-spacing:.1em; color:var(--muted); display:block; font-weight:500}
.contact-item a{text-decoration:none; font-size:1.05rem}
.contact-item a:hover{color:var(--sage-deep)}

/* CTA band */
.band{background:linear-gradient(135deg,var(--plum),var(--ink)); color:#fff; border-radius:20px; padding:clamp(2rem,4vw,3rem); text-align:center}
.band h2{color:#fff}
.band p{color:#C3B9D3; max-width:52ch; margin-inline:auto}
.band .hero-cta{justify-content:center}

/* footer */
.site-footer{background:var(--ink); color:#B2A8C3; padding:3.4rem 0 1.6rem; font-size:.94rem}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; padding-bottom:2.2rem; border-bottom:1px solid rgba(255,255,255,.13)}
.site-footer h4{font-family:var(--util); font-size:.8rem; letter-spacing:.13em; color:#fff; margin:0 0 .9rem; font-weight:700}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.45rem}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:#fff}
.foot-bottom{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.4rem; font-size:.82rem; color:#8A7F9C}
.disclaimer{font-size:.82rem; color:#8A7F9C; max-width:70ch; margin-top:1.2rem}

/* mobile sticky call bar */
.callbar{display:none}

@media (max-width:980px){
  .hero-grid,.split,.g3,.g4{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .sidebar{position:static}
  .step{grid-template-columns:44px 1fr; gap:1rem}
  .step p{grid-column:2}
}
@media (max-width:860px){
  .burger{display:block}
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(86vw,340px); background:#fff; flex-direction:column;
    align-items:stretch; padding:5rem 1.2rem 2rem; gap:.2rem; transform:translateX(100%);
    transition:transform .28s ease; box-shadow:-20px 0 60px -30px rgba(0,0,0,.5); overflow-y:auto;
  }
  .nav.open{transform:translateX(0)}
  .nav a,.nav button{width:100%; text-align:start; padding:.75rem .6rem; font-size:1.02rem}
  .menu{position:static; display:none; width:100%; grid-template-columns:1fr; box-shadow:none; border:0; background:#F6F3F9; margin:.2rem 0}
  .has-menu.open .menu{display:grid}
  .nav .btn{justify-content:center; margin-top:.8rem}
  .topbar .wrap{justify-content:center; font-size:.78rem}
  body{padding-bottom:64px}
  .callbar{
    display:flex; position:fixed; bottom:0; inset-inline:0; z-index:70; background:#fff;
    border-top:1px solid var(--line); padding:.6rem .8rem; gap:.6rem;
  }
  .callbar a{flex:1; justify-content:center}
}

/* static-site additions */
a.chip{text-decoration:none}


/* ===== home slider (native scroll-snap; controls appear only when JS is ready) ===== */
.slider{position:relative; max-width:820px; margin-inline:auto}
.slider-viewport{
  direction:ltr;                 /* keeps scrollLeft math predictable inside an RTL page */
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  border-radius:20px; background:var(--ink);
  box-shadow:0 34px 64px -40px rgba(36,28,51,.8);
}
.slider-viewport::-webkit-scrollbar{display:none}
.slider-track{display:flex}
.slide{flex:0 0 100%; margin:0; position:relative; scroll-snap-align:center; scroll-snap-stop:always}
.slide img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:50% 38%}
.slide figcaption{
  position:absolute; inset-inline:0; bottom:0; direction:rtl; text-align:start;
  padding:3rem 1.3rem 1.05rem; color:#fff; font-family:var(--util); font-size:.9rem;
  background:linear-gradient(to top, rgba(24,18,34,.9) 12%, rgba(24,18,34,.45) 55%, transparent);
}
.slide figcaption b{display:block; font-family:var(--display); font-size:1.08rem; font-weight:700; margin-bottom:.15rem}

/* controls stay hidden until the script wires them up */
.slider-nav, .slider-dots{display:none}
.slider.is-ready .slider-nav{display:grid}
.slider.is-ready .slider-dots{display:flex}

.slider-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--ink); font-size:1.35rem; line-height:1;
  place-items:center; transition:background .2s, transform .2s;
  box-shadow:0 6px 18px -8px rgba(36,28,51,.7);
}
.slider-nav:hover{background:#fff; transform:translateY(-50%) scale(1.06)}
.slider-nav.prev{inset-inline-end:16px}
.slider-nav.next{inset-inline-start:16px}

.slider-dots{justify-content:center; gap:.5rem; margin-top:1.1rem}
.slider-dots button{
  width:9px; height:9px; padding:0; border-radius:50%; border:0; cursor:pointer;
  background:var(--line); transition:background .2s, width .2s;
}
.slider-dots button[aria-current="true"]{background:var(--sage-deep); width:26px; border-radius:99px}

.slider-hint{
  display:block; text-align:center; margin-top:.9rem;
  font-family:var(--util); font-size:.8rem; color:var(--muted);
}
.slider.is-ready .slider-hint{display:none}

@media (max-width:640px){
  .slider-nav{width:38px; height:38px; font-size:1.1rem}
  .slide figcaption{font-size:.86rem; padding:2.6rem 1.1rem 1rem}
  .slide figcaption b{font-size:1rem}
}