/* ============================================================
   class-a-v2-demo5-preview — skin override on top of site.css
   Re-themes r6's home page with demo 5's visual language only:
   colors, fonts, radii, shadows, cards, buttons, section backgrounds.
   r6's content, structure, links and form markup are untouched.
   ============================================================ */

/* fonts: demo 5's own fonts.css (assets/d5/fonts.css: Assistant 400-800, Rubik 500/700, Suez One 400) is linked before this file */

:root{
  /* demo 5 palette, mapped onto r6's existing variable names */
  --ground:#F3ECDF;        /* paper */
  --sand:#E9DDC8;          /* paper-2, section tint */
  --sand-2:#D9C4A3;        /* kraft */
  --white:#FFFBF4;         /* sheet (cards, header, inputs) */
  --rule:rgba(14,30,74,.16);
  --rule-d:rgba(255,251,244,.2);
  --field:rgba(14,30,74,.45);
  --focus:#0E1E4A;
  --ink:#0E1E4A;           /* demo 5 ink (navy) replaces the teal-black */
  --ink-2:#38426A;
  --muted:#575B79;          /* round 3e: was #5E6280, 4.43 on sand; now 4.92 */
  --teal:#0E1E4A;          /* dark section bg -> same navy as ink, like demo 5 */
  --teal-2:#38426A;
  --on-teal:#FFFBF4;
  --on-teal-2:#C9CEE0;
  --orange:#4F5370;        /* non-button accent: muted ink, NOT red (red is reserved for buttons/CTA) */
  --orange-h:#464a6e;
  --orange-line:#9aa0c2;
  --orange-soft:#e7e3f0;
  --display:'Suez One','Heebo','Heebo Fallback',system-ui,sans-serif; /* headings only, as before */
  --r:14px;
  --shadow:4px 5px 0 rgba(14,30,74,.13);
}

/* paper texture, the way demo 5 does it */
body{position:relative}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- buttons: red is reserved for these ---- */
.btn{border-radius:12px;border:2px solid var(--ink);box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s,background .18s}
.btn:active{transform:translate(2px,3px);box-shadow:1px 1px 0 rgba(14,30,74,.15)}
.btn-go{background:#D63A40!important;border-color:#D63A40!important;color:#fff!important;box-shadow:4px 5px 0 rgba(14,30,74,.2)!important}
.btn-go:hover{background:#B92C33!important;border-color:#B92C33!important;transform:translateY(-1px)}
.btn-ghost{background:var(--white)!important;color:var(--ink)!important;box-shadow:var(--shadow)}
.btn-line{background:transparent;border-color:var(--white)}

/* ---- header ---- */
.hdr{background:rgba(243,236,223,.94)!important;border-bottom:1px solid var(--rule);backdrop-filter:saturate(1.2)}

/* ---- footer ---- */
.ftr{background:var(--ink)}

/* ---- cards: hard 2px ink border + hard offset shadow + 14px radius ---- */
.card,.photo-card,.lform,.qbody,a.card.linkcard,.v,.door,.gbadge,.logo-grid .lg{
  border-radius:var(--r)!important;
  box-shadow:var(--shadow)!important;
}
.card,a.card.linkcard,.v,.gbadge,.logo-grid .lg{
  border:2px solid var(--ink)!important;
  background:var(--white)!important;
}
.photo-card,.lform,.qbody{
  border:2px solid var(--ink)!important;
  background:var(--white)!important;
}
.v.big{background:var(--ink)!important;border-color:var(--ink)!important;box-shadow:var(--shadow)!important}
.v.big blockquote{color:var(--white)}
.v.big cite{color:var(--on-teal-2)}
.v.big cite b{color:var(--white)}
.door{background:var(--ink-2)!important;border:2px solid var(--ink-2)!important;box-shadow:var(--shadow)!important}
.stage .h-card .flow{box-shadow:var(--shadow)!important;border:2px solid var(--ink)}

/* ---- hero quiz chips / choice buttons: demo 5's chip look ---- */
.choice{
  border:2px solid var(--ink)!important;
  border-radius:12px!important;
  background:var(--white)!important;
  box-shadow:2px 3px 0 rgba(14,30,74,.1)!important;
}
.choice:hover{box-shadow:3px 5px 0 rgba(14,30,74,.14)!important;background:var(--white)!important;border-color:var(--ink)!important}
.choice[aria-pressed=true]{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--white)}
.choice[aria-pressed=true] .go{background:var(--white)!important;color:var(--ink)!important}
.chip span{border:1.5px solid var(--ink)!important;background:var(--white)!important;border-radius:10px!important;box-shadow:2px 3px 0 rgba(14,30,74,.1)}
.chip input:checked+span{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--white)!important}

/* ---- subject pills ---- */
.subj a{border:1.5px solid var(--ink)!important;border-radius:10px!important;background:var(--white)!important;box-shadow:2px 3px 0 rgba(14,30,74,.08)}
.subj a:hover,.subj a:focus-visible{border-color:var(--ink)!important;color:var(--ink)!important;background:var(--sand)!important;box-shadow:3px 4px 0 rgba(14,30,74,.12)}
.subj a:after,.subj a:hover:after,.subj a:focus-visible:after{color:var(--ink)!important}

/* ---- steps ("how it works") numbered circles ---- */
.steps .num{background:var(--white)!important;color:var(--ink)!important;border:2px solid var(--ink)!important;box-shadow:2px 3px 0 rgba(14,30,74,.12)}
.on-teal .steps .num{background:var(--ink)!important;color:var(--white)!important;border-color:var(--white)!important}

/* ---- stats strip numbers ---- */
.ledger b{color:var(--ink)!important}

/* ---- rotating hero word: accent, not red ---- */
.rot .w{color:var(--ink-2)!important}
.rot .w::after{background:var(--ink-2)!important}

/* ---- misc accents kept off red ---- */
.gbadge .stars{color:#C98A2A}
.crit em,.tags span,.pills span{background:var(--sand)!important;color:var(--ink-2)!important}
.logo-grid .has-case a{color:var(--ink-2)!important}

/* ---- nav dropdown sheets ---- */
.menu .sheet,.drop{background:var(--white)!important;border:1px solid var(--rule)!important;box-shadow:var(--shadow)!important;border-radius:var(--r)!important}

/* ---- noindex preview flag ---- */
.demo5-flag{background:var(--ink);color:#C9CEE0;font:500 12px/1 var(--text,inherit);text-align:center;padding:7px 10px;letter-spacing:.02em}

/* ============ round 2 (Yair 8.11.2026 11:08: "הכתב לא תואם, העיצוב של הלוחות"): demo 5's exact type and boards ============ */
:root{--display:'Suez One','Assistant',serif;--text:'Assistant',system-ui,sans-serif;--ui5:'Rubik','Assistant',sans-serif}
html{font-synthesis:none}  /* Suez One has one weight: never fake a bold (the "800" headings of r6 looked smeared) */
body{font-family:'Assistant',system-ui,sans-serif;font-size:17px;line-height:1.6;background:#F3ECDF;color:#0E1E4A}
@media (min-width:1024px){body{font-size:18px}}
h1,h2,h3,.q,.ftr h2,.f-brand b,.v blockquote,.big-q{font-family:'Suez One','Assistant',serif!important;font-weight:400!important;letter-spacing:-.005em}
h1{line-height:1.08}
h2{line-height:1.15}
.kick,.eyebrow,.crit em{font:600 14px/1.2 'Rubik','Assistant',sans-serif!important;color:#D63A40!important;letter-spacing:.01em}
.btn{font:700 17px/1 'Assistant',system-ui,sans-serif;min-height:52px;border-radius:12px}
.crumbs{font-family:'Rubik','Assistant',sans-serif;font-weight:500;font-size:14px}
/* header: demo 5's nav bar */
.hdr .nav a,.hdr .nav summary,.hdr .nvh{font:600 16.5px/1.2 'Assistant',system-ui,sans-serif}
.hdr .nvh:hover,.hdr .nav>a:hover{text-decoration:underline;text-decoration-color:#D63A40;text-decoration-thickness:2px;text-underline-offset:8px}
.hdr .talk{border:1.5px solid #0E1E4A;border-radius:99px;padding:7px 12px;color:#0E1E4A;font:600 15px 'Assistant',sans-serif}
/* boards / cards: demo 5's sheet (2px ink border, 14px radius, hard 4px 5px shadow) */
.card,a.card.linkcard,.photo-card,.qbody,.v{border-radius:14px!important}
/* sections: demo 5 paper + torn top edge on tinted sections */
.sec.sand,.sec.paper{position:relative}
.sec.sand::before{content:"";position:absolute;left:0;right:0;top:-11px;height:12px;background:inherit;
  clip-path:polygon(0 60%,4% 20%,9% 70%,15% 30%,22% 80%,28% 25%,35% 65%,41% 15%,48% 70%,55% 30%,61% 75%,68% 20%,74% 60%,81% 25%,87% 75%,93% 30%,100% 55%,100% 100%,0 100%)}
/* footer: demo 5's footer is warm paper, not navy (also ends the "two navy blocks in a row" at the bottom of the hubs) */
.ftr{background:#F3ECDF!important;color:#38426A!important;border-top:1px solid rgba(14,30,74,.14)}
.ftr a{color:#0E1E4A!important}
.ftr h2,.ftr .f-brand b{color:#D63A40!important;font-family:'Rubik','Assistant',sans-serif!important;font-weight:600!important;font-size:14px!important}
.ftr .fcol summary:after{color:#0E1E4A}
.ftr .pv,.ftr .fcol{border-color:rgba(14,30,74,.14)!important}
.ftr :focus-visible{outline-color:#D63A40}
.ftr .f-tag,.ftr .f-brand span{color:#5E6280!important}
/* partner logos: full colour everywhere */
.logo-grid img{filter:none!important;opacity:1!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* round 3 (Yair 8.11.2026 11:50): Yaela's smiling photo, less tight and in a smaller frame */
/* Yair 9.11.2026: both About portraits share one framing and one background (team-* files); no per-person override */
/* round 3: the tagline stays readable beside the logo on phones (two short lines under the logo) */
@media(max-width:420px){.hdr .brand small{display:block!important;white-space:normal!important;font-size:11px!important;line-height:1.15!important;max-width:86px;letter-spacing:0}}
@media(max-width:1440px) and (min-width:1241px){.hdr .talk.tel span{display:none}.hdr .talk.tel{padding:7px 10px}.hdr .wrap{gap:10px}}
/* round 3: a backdrop-filter on .hdr makes it the containing block of the fixed phone menu sheet (the sheet was clipped to the header); solid paper instead */
.hdr{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(243,236,223,.98)!important}

/* ---- videos (round 3b, 8.11.2026): a taped, tilted paper frame; 16:9 full width on phones, vertical capped at ~80vh ---- */
.vid{margin:0 auto;max-width:960px}
.vid__frame{position:relative;border:6px solid #FFFBF4;border-radius:18px;background:#0E1E4A;box-shadow:4px 5px 0 #0E1E4A;transform:rotate(-1deg)}
.vid--tilt-r .vid__frame{transform:rotate(1.2deg)}
.vid__v{display:block;width:100%;height:auto;border-radius:12px;background:#0E1E4A}
.vid--tall .vid__frame{width:min(100%,calc(min(80vh,680px) * 9 / 16));margin-inline:auto}
/* 8.11.2026 (Yair 14:10): the silent lesson loop stays small, a side note near "how it works", not a feature */
.vid--loop.vid--tall .vid__frame{width:min(100%,calc(min(62vh,520px) * 9 / 16))}
.vid__tape{position:absolute;top:-12px;right:22%;width:96px;height:26px;background:rgba(233,221,200,.9);transform:rotate(4deg);box-shadow:0 1px 0 rgba(0,0,0,.06);pointer-events:none}
.vid__cap{margin:16px 0 0;text-align:center;font-weight:700;font-size:15px;color:#0E1E4A}
.vid__play{display:none;position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;border:3px solid #FFFBF4;background:#D63A40;box-shadow:4px 5px 0 #0E1E4A;cursor:pointer;padding:0}
.vid__play i{display:block;width:0;height:0;margin:0 auto;transform:translateX(4px);border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent #FFFBF4}
[data-vid].is-ready .vid__play{display:block}
[data-vid].is-playing .vid__play{display:none}
.vid__play:focus-visible,.vid__toggle:focus-visible{outline:3px solid #D63A40;outline-offset:3px}
.vid__toggle{position:absolute;bottom:10px;left:10px;width:40px;height:40px;border-radius:50%;border:2px solid #0E1E4A;background:#FFFBF4;cursor:pointer;padding:0;display:none}
[data-vid].is-ready .vid__toggle{display:block}
.vid__toggle i{display:block;margin:auto;width:12px;height:14px;border-inline:4px solid #0E1E4A}
.vid__toggle[aria-pressed=true] i{width:0;height:0;border-inline:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #0E1E4A;transform:translateX(2px)}
.story__vid{margin-top:clamp(36px,5vw,64px)}
.vidsec{padding:clamp(24px,4vw,48px) 0}
@media (max-width:719px){.vid--wide .vid__frame{transform:rotate(-.6deg);border-width:4px}.vid__play{width:64px;height:64px}.vid__play i{border-width:12px 0 12px 20px}}
@media (prefers-reduced-motion:reduce){.vid__frame,.vid--tilt-r .vid__frame{transform:none}}


/* ================= round 3b item D (Yair 8.11.2026 12:25: "מצפה שתבין מעיצוב עמוד הבית מה הסטנדרט"): the home page's
   visual language on every inner template. Restyle only: no text, link, form or schema changes. ================= */
/* page hero: cut-paper shapes behind, a short red pencil stroke under the title (demo 3's mark, used once per page) */
.phero{position:relative;overflow:hidden;isolation:isolate}
.phero::before{content:"";position:absolute;z-index:-1;width:340px;height:255px;left:-150px;top:56%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cpath d='M18 40 L120 8 L236 22 L352 4 L392 92 L378 210 L300 292 L170 280 L60 296 L8 188 Z' fill='%23E9DDC8'/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(-8deg);opacity:.9;pointer-events:none}
.phero.plain::after,.post-head::after{content:"";position:absolute;z-index:-1;width:120px;height:120px;left:5%;top:34px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 6 C150 10 196 52 192 104 C188 158 146 194 96 192 C44 190 8 150 8 98 C8 48 50 2 100 6 Z' fill='%23D63A40'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.9;pointer-events:none}
.post-head{position:relative;overflow:hidden;isolation:isolate}
.phero h1::after,.post-head h1::after,.close .side h1::after{content:"";display:block;width:clamp(90px,14vw,150px);height:12px;margin-top:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C38 5 70 11 104 7.5S168 4.2 197 8' fill='none' stroke='%23D63A40' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
/* the hero side board (navy) sits on a tilted red plate, like the matcher card on the home page */
.p-field{position:relative}
@media (min-width:1061px){
  .phero:not(.plain){background:var(--ground)!important}
  .phero:not(.plain) .p-field{background:#0E1E4A!important;border-radius:18px;margin-block:40px;padding-inline:clamp(24px,3vw,44px);box-shadow:4px 5px 0 rgba(14,30,74,.2)}
  .phero:not(.plain) .p-field::before{content:"";position:absolute;inset:14px -8px -12px 10px;background:#D63A40;border-radius:18px;transform:rotate(-2.2deg);z-index:-1}
}
@media (max-width:1060px){.phero::before{width:220px;height:165px;left:-110px;top:auto;bottom:-40px}.phero.plain::after,.post-head::after{width:72px;height:72px;top:18px;left:-26px}}
/* photos: taped, tilted paper frames (demo 5) */
.collage img,.post-cover,.person img,.photo-card img{border:6px solid #FFFBF4!important;border-radius:16px!important;box-shadow:4px 5px 0 rgba(14,30,74,.18)!important;background:#FFFBF4}
.collage img:nth-child(odd){transform:rotate(-1.2deg)}.collage img:nth-child(even){transform:rotate(1deg)}
.post-cover{transform:rotate(-.6deg)}
.collage{position:relative}
.collage::before{content:"";position:absolute;z-index:2;top:-10px;right:26px;width:96px;height:26px;background:rgba(233,221,200,.9);transform:rotate(4deg);box-shadow:0 1px 0 rgba(0,0,0,.06);pointer-events:none}
.yaela-ph{box-shadow:0 0 0 4px #FFFBF4,4px 5px 0 4px rgba(14,30,74,.18)!important;transform:rotate(-2deg)}
.person{border:2px solid #0E1E4A;border-radius:16px;background:#FFFBF4;box-shadow:4px 5px 0 rgba(14,30,74,.13);overflow:hidden}
.person img{border-width:0 0 2px!important;border-radius:0!important;box-shadow:none!important;border-color:#0E1E4A!important}
/* numbers: the home page's navy proof band */
.ledger{background:#0E1E4A;color:#FFFBF4;border-radius:16px;padding:26px clamp(18px,3vw,34px);box-shadow:4px 5px 0 rgba(14,30,74,.2);gap:20px 0}
.ledger div+div{border-color:rgba(255,251,244,.18)!important}
.ledger b,.ledger b.num{font:400 clamp(34px,3.4vw,46px)/1 'Suez One','Assistant',serif!important;color:#fff!important}
.ledger span{color:#C9CEE0;font-size:15px;line-height:1.35}
/* quotes: the big red quote mark of the home story */
.voice,.v,.mq{position:relative}
.voice blockquote,.v blockquote{font-family:'Suez One','Assistant',serif!important;font-weight:400!important}
.voice::before{content:"״";position:absolute;top:-34px;right:10px;font:400 96px/1 'Suez One',serif;color:#D63A40;opacity:.9;pointer-events:none}
.v:not(.big)::before{content:"״";position:absolute;top:-4px;right:14px;font:400 72px/1 'Suez One',serif;color:#D63A40;opacity:.9;pointer-events:none}
.voice.inset{background:#FFFBF4!important;border:2px solid #0E1E4A;box-shadow:4px 5px 0 rgba(14,30,74,.13);padding-top:clamp(30px,3vw,40px)!important}
.v{padding-top:30px}
/* how it works: dashed red joins and a red first number, like the home steps */
.steps .num{font-family:'Rubik','Assistant',sans-serif!important;font-weight:700!important}
.steps li:first-child .num{background:#D63A40!important;border-color:#D63A40!important;color:#fff!important}
.steps li+li{border-inline-start:2px dashed rgba(214,58,64,.55)!important}
.on-teal .steps li+li{border-inline-start-color:rgba(255,251,244,.35)!important}
/* navy sections: the red cut-paper circle in the corner, like the home contact block */
.sec.on-teal,.sec.close{position:relative;overflow:hidden;isolation:isolate}
.sec.on-teal::after{content:"";position:absolute;z-index:-1;width:260px;height:260px;left:-110px;bottom:-130px;background:#D63A40;border-radius:43% 57% 61% 39% / 47% 41% 59% 53%;opacity:.95;pointer-events:none}
/* FAQ: paper sheets instead of plain rules */
.faq details{border:2px solid #0E1E4A!important;border-radius:12px;background:#FFFBF4;margin-bottom:10px;padding-inline:18px;box-shadow:2px 3px 0 rgba(14,30,74,.1)}
.faq details[open]{box-shadow:4px 5px 0 rgba(14,30,74,.13)}
.faq summary{min-height:58px}
/* related links and link cards: the sheet look with a lift on hover */
.rel a{border:2px solid #0E1E4A!important;background:#FFFBF4!important;box-shadow:2px 3px 0 rgba(14,30,74,.1);transition:transform .18s,box-shadow .18s}
.rel a b:after{color:#D63A40!important}
@media (hover:hover){.rel a:hover,a.card.linkcard:hover{transform:translateY(-3px);box-shadow:4px 7px 0 rgba(14,30,74,.16)!important}}
a.card.linkcard{transition:transform .18s,box-shadow .18s}
a.card.linkcard .more,.go-link{color:#D63A40!important}
/* text pages (legal, accessibility, articles): the text on a paper sheet, headings with a red tick */
.sec .prose:not(.post-body){background:#FFFBF4;border:2px solid #0E1E4A;border-radius:16px;box-shadow:4px 5px 0 rgba(14,30,74,.13);padding:clamp(22px,4vw,48px);max-width:820px}
.post-body{background:#FFFBF4;border:2px solid #0E1E4A;border-radius:16px;box-shadow:4px 5px 0 rgba(14,30,74,.13);padding:clamp(20px,4vw,48px)!important;margin-bottom:28px}
.prose h2{position:relative;padding-inline-start:18px}
.prose h2::before{content:"";position:absolute;right:0;top:.28em;bottom:.28em;width:5px;border-radius:3px;background:#D63A40}
[dir=ltr] .prose h2::before{right:auto;left:0}
.prose blockquote{margin:1.2em 0;padding:18px 22px;border-inline-start:5px solid #D63A40;background:#F3ECDF;border-radius:0 12px 12px 0;font-family:'Suez One','Assistant',serif}
.prose ul li::marker{color:#D63A40}
.post-cta{border:2px solid #0E1E4A;box-shadow:4px 5px 0 rgba(14,30,74,.2)}
/* article cards: the image as a small taped photo */
.post-card img{transition:transform .25s}
@media (hover:hover){.post-card:hover img{transform:scale(1.03) rotate(-.6deg)}}
/* 404 and other short pages: never a bare page */
.phero.plain .subj a{box-shadow:2px 3px 0 rgba(14,30,74,.1)}
@media (prefers-reduced-motion:reduce){.collage img,.post-cover,.yaela-ph{transform:none!important}}


/* ================= round 3c (Yair 8.11.2026 14:39: "הגרפיקה של הצורות שביקשתי שיזוזו כמעט ולא זזות, אין תמונה וחיים בשאר
   האתרים כפי שיש בעמוד הבית"): every inner page top gets the home hero's life. A real field photo in a taped, tilted paper
   frame (build/life.py), the home hero's cut-paper shapes moving clearly (tens of px, 6 to 9 s, each on its own phase, a
   little scroll parallax through --py), and the home page's scroll reveal on the body sections (site.js adds .rv).
   transform/translate/rotate/opacity only; all of it off under prefers-reduced-motion. ================= */
/* 9.11.2026 (Yair 12:31 "שיזוזו בחופשיות ולא תמיד סביב אותה נקודה או קו"): each hero shape wanders a free closed path through 6 waypoints
   spread over its area (translate plus a gentle turn, the small red one also breathes in scale), every shape on its own long cycle
   (17 to 43 s, prime-ish lengths so they never sync) and phase. Same amplitude as round 3c (tens of px), off under reduced motion. */
@keyframes lf-a{0%,100%{translate:0 0;rotate:0deg}12%{translate:-28px -41px;rotate:5deg}27%{translate:25px -37px;rotate:-4deg}43%{translate:56px 2px;rotate:7deg}57%{translate:20px 39px;rotate:-6deg}71%{translate:-34px 32px;rotate:3deg}86%{translate:-53px -9px;rotate:-3deg}}
@keyframes lf-b{0%,100%{translate:0 0;rotate:0deg}16%{translate:44px 11px;rotate:-7deg}31%{translate:23px -32px;rotate:5deg}47%{translate:-12px -17px;rotate:-9deg}62%{translate:-41px -36px;rotate:4deg}77%{translate:-32px 23px;rotate:-5deg}90%{translate:9px 36px;rotate:6deg}}
@keyframes lf-c{0%,100%{translate:0 0;rotate:0deg;scale:1}14%{translate:29px -16px;rotate:4deg;scale:1.1}30%{translate:12px -30px;rotate:-6deg;scale:0.92}45%{translate:-19px -21px;rotate:3deg;scale:1.14}59%{translate:-34px 4px;rotate:-8deg;scale:0.95}74%{translate:-14px 28px;rotate:6deg;scale:1.06}88%{translate:20px 20px;rotate:-2deg;scale:0.9}}
@keyframes lf-tilt{0%,100%{rotate:0deg;translate:0 0}50%{rotate:1.6deg;translate:0 -8px}}
.has-life,.top-life,.contact-first{position:relative;overflow:hidden;isolation:isolate}
.phero.has-life::before,.phero.has-life::after,.post-head.has-life::after,.top-life.on-teal::after,.contact-first::after{content:none!important}
.life{position:absolute;inset:0;z-index:-1;pointer-events:none}
.lf{position:absolute;display:block;height:auto;transform-origin:50% 50%}
.lf--a{width:420px;inset-inline-end:-150px;bottom:-150px;transform:translateY(calc(var(--py,0px) * .25)) rotate(-8deg)}
.lf--a path{fill:#C8D6E5}
.lf--b{width:190px;inset-inline-end:36%;top:-70px;transform:translateY(calc(var(--py,0px) * -.15))}
.lf--b path{fill:#D9C4A3}
.lf--c{width:74px;inset-inline-start:calc(58% - 52px);bottom:16%;transform:translateY(calc(var(--py,0px) * .4))}
.lf--c path{fill:#D63A40}
.post-head .lf--a{inset-inline-end:-200px;bottom:-120px}
.post-head .lf--b{inset-inline-end:4%;top:-60px}
.post-head .lf--c{inset-inline-start:6%;inset-inline-end:auto;top:40px;bottom:auto}
/* the taped photo (the home page's journey photo frame) with a red cut-paper blob behind its corner */
.p-snap{position:relative;margin:0;display:block;z-index:2}
.p-snap img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:7px solid #FFFBF4!important;border-radius:16px!important;box-shadow:4px 5px 0 rgba(14,30,74,.18)!important;background:#FFFBF4}
.p-snap__tape{position:absolute;z-index:3;top:-12px;inset-inline-start:26px;width:96px;height:26px;background:rgba(233,221,200,.9);transform:rotate(4deg);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.p-snap::before{content:"";position:absolute;z-index:-1;width:120px;height:120px;inset-inline-end:-34px;bottom:-30px;background:#D63A40;border-radius:43% 57% 61% 39% / 47% 41% 59% 53%;opacity:.95}
.p-photo{position:relative}
.p-photo img{border:7px solid #FFFBF4!important;border-radius:16px!important;box-shadow:4px 5px 0 rgba(14,30,74,.18)!important;background:#FFFBF4;rotate:-1.6deg}
.p-photo::before{content:"";position:absolute;z-index:3;top:calc(44px - 12px);inset-inline-end:40px;width:96px;height:26px;background:rgba(233,221,200,.9);transform:rotate(-4deg);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.phero.has-snap:not(.plain) .p-snap{rotate:-2.2deg}
.phero.plain.has-snap .p-snap,.top-life .p-snap,.contact-first .p-snap{rotate:2deg}
@media (min-width:1061px){
  .phero.has-snap:not(.plain) .wrap{grid-template-rows:auto 1fr}
  .phero.has-snap:not(.plain) .p-copy{grid-row:1 / span 2}
  .phero.has-snap:not(.plain) .p-snap{grid-column:2;grid-row:1;margin:30px 30% -70px 0;margin-inline:24% -14px;align-self:end}
  .phero.has-snap:not(.plain) .p-field{grid-column:2;grid-row:2;margin-top:0!important;padding-top:92px;align-self:start}
  .phero.plain.has-snap .wrap{grid-template-columns:minmax(0,1fr) minmax(280px,360px);column-gap:64px;align-items:center}
  .phero.plain.has-snap .lf--c,.top-life .lf--c,.contact-first .lf--c{display:none}
  .phero.plain.has-snap .p-snap{margin-block:34px}
  .about-top .wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:64px;align-items:center}
  .about-top .wrap>*{grid-column:1}
  .about-top .wrap>.p-snap{grid-column:2;grid-row:1 / span 8}
  .p-snap--side{max-width:360px;margin-top:26px}
}
@media (max-width:1060px){
  .phero.has-snap:not(.plain) .p-snap{width:86%;margin:4px auto -42px}
  .phero.has-snap:not(.plain) .p-field{padding-top:64px}
  .phero.plain.has-snap .p-snap,.top-life .p-snap,.contact-first .p-snap{width:78%;max-width:340px;margin:24px 0 30px;margin-inline-start:auto;margin-inline-end:6%}
  .p-snap--side{margin-top:18px!important}
  .p-snap::before{width:84px;height:84px;inset-inline-end:-22px;bottom:-22px}
  .lf--a{width:260px;inset-inline-end:-130px;bottom:auto;top:290px}
  .lf--b{width:120px;inset-inline-end:-34px;top:-36px}
  .lf--c{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .lf--a{animation:lf-a 31s ease-in-out -7s infinite;will-change:translate,rotate}
  .lf--b{animation:lf-b 19s ease-in-out -13s infinite;will-change:translate,rotate}
  .lf--c{animation:lf-c 26s ease-in-out -3s infinite;will-change:translate,scale}
  .p-snap::before{animation:lf-c 37s ease-in-out -20s infinite}
  .p-snap{animation:lf-tilt 8s ease-in-out -1.5s infinite}
  .sec.on-teal::after{animation:lf-b 43s ease-in-out -17s infinite}
  .js-rv .rv{opacity:0;translate:0 24px;transition:opacity .35s ease,translate .35s cubic-bezier(.2,.8,.2,1)}
  .js-rv .rv.in{opacity:1;translate:none}
}
@media (prefers-reduced-motion:reduce){.lf,.p-snap,.p-snap::before{animation:none!important}.rv{opacity:1!important;translate:none!important}}

@media (min-width:1241px){.hdr>.wrap{padding-inline:clamp(20px,2vw,30px)}}
@media (min-width:1241px) and (max-width:1365px){.hdr .talk:not(.tel)>span{display:none}.hdr .talk:not(.tel){padding-inline:10px}}
@media (min-width:1500px){.hdr>.wrap{max-width:1440px}}

/* pre-launch audit 8.11.2026 item 5: SMALL red text (under 24px, or under 18.66px bold) uses the darker red #b8282f, contrast at least 4.5 on paper #F3ECDF (5.28), tint #E9DDC8 (4.62) and white (6.02); #D63A40 stays for large headings, shapes and buttons. On the navy band a light red #FF9EA2 (8.3). */
.kick,.eyebrow,.crit em,.ftr h2,.ftr .f-brand b,.svc__n,a.card.linkcard .more,.go-link,.rel a b:after{color:#b8282f!important}
.on-teal .kick,.on-teal .eyebrow,.eyebrow.eyebrow--light{color:#FF9EA2!important}
.foot__map h2{color:#b8282f!important}


/* round 3e (Yair 8.11.2026 17:13, "לא רואים פה כלום"): cream cards inside the navy band (.on-teal) inherited the band's light text,
   so titles and body were near-white on cream. Cards in dark sections take ink #0E1E4A (15.6 on cream). Found site-wide by
   test/contrast_check.py: the dark stats board (.ledger) captions, the byline in the navy band, and muted notes on sand (4.43) */
.on-teal .card:not(.linkcard),.on-teal .card:not(.linkcard) h3,.on-teal .card:not(.linkcard) p,.on-teal .card:not(.linkcard) li{color:#0E1E4A!important}
.ledger div>span{color:#C9CEE0}
.on-teal .byline,.on-teal .byline p,.on-teal .byline b{color:#C9CEE0}

/* Yair 8.11.2026 18:59 (header slim-down): 5 menu items, a small round WhatsApp icon, one red CTA; the teacher pill left the header */
.hdr .talk.talk-ic{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;gap:0;border:1.5px solid #0E1E4A;border-radius:50%;background:#FFFBF4;justify-content:center}
.hdr .talk.talk-ic svg{color:#1d8f4f}
.hdr .talk.talk-ic:hover,.hdr .talk.talk-ic:focus-visible{border-color:#1d8f4f;background:#fff}
.drop a.drop-sub{grid-column:1/-1;margin-top:4px;border-top:1px solid var(--rule);border-radius:0 0 10px 10px}

/* audit round 2 (8.11.2026): decorative shapes clip inside their own inset layer, so no section reports a scroll width wider than
   the screen and none can be scrolled sideways by focus or scrolling (same shapes, places and motion as before) */
.life{overflow:hidden}
.sec.on-teal::after{content:none}
.sec-deco{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sec-deco::after{content:"";position:absolute;width:260px;height:260px;left:-110px;bottom:-130px;background:#D63A40;border-radius:43% 57% 61% 39% / 47% 41% 59% 53%;opacity:.95}
.top-life .sec-deco{display:none}
@media (prefers-reduced-motion:no-preference){.sec-deco::after{animation:lf-b 43s ease-in-out -17s infinite}}

/* Yair 8.11.2026 19:49 (header balance): the menu sits in the middle of the bar between the logo (right) and the
   WhatsApp + red CTA group (left), even gaps between the items, and the bar's content lines up with the page content
   below it at every width (no stretched bar on wide screens). Desktop only; the phone menu and tablet bar are unchanged. */
@media (min-width:1241px){
  .hdr>.wrap{max-width:var(--max);padding-inline:var(--gut);gap:12px}
  .hdr .brand{margin-inline-end:0;flex:none}
  .hdr .nav{flex:1 1 auto;justify-content:center;gap:clamp(10px,1.1vw,18px);margin-inline:clamp(16px,2vw,32px);min-width:0}
}
@media (min-width:1241px){.hdr .nav>a,.hdr .nav .nvh,.hdr .nav summary{color:var(--ink)}}

/* card balance (Yair 9.11.2026: "cards side by side, same height and the same number of lines, same line shape"): layout only, no word changes.
   Titles and labels on every card and step balance their lines (even line lengths); descriptions, quotes and bios wrap
   "pretty" (lines fill from the start, no one-word last line), so every text in a row reads long-then-short like its
   neighbours. site.js "equal line counts" re-wraps the shorter ones the same way.
   A lone or partial last row of a card grid sits centred under the row above, at the same card width. */
main :is(.card,.grid2>*,.grid3>*,.grid4>*,.posts>*,.tracks>*,.compare>*,.resp>*,.rel li,.steps li,.side,.p-field,.v,.person) :is(h2,h3,h4,b,strong,figcaption){text-wrap:pretty}
main :is(.card,.grid2>*,.grid3>*,.grid4>*,.posts>*,.tracks>*,.compare>*,.rel li,.steps li,.person,.people>*) :is(p,blockquote),main :is(blockquote,.lead,.sub2){text-wrap:pretty}
@media(min-width:1061px){
 .grid3{grid-template-columns:repeat(6,minmax(0,1fr))}
 .grid3>*{grid-column:span 2}
 .grid3>:nth-child(3n+1):nth-last-child(2){grid-column:2/span 2}
 .grid3>:nth-child(3n+1):last-child{grid-column:3/span 2}
 .posts{grid-template-columns:repeat(6,minmax(0,1fr))}
 .posts>*{grid-column:span 2}
 .posts>:nth-child(3n+1):nth-last-child(2){grid-column:2/span 2}
 .posts>:nth-child(3n+1):last-child{grid-column:3/span 2}
}
@media(min-width:761px){
 .grid2:not(.wrap){grid-template-columns:repeat(4,minmax(0,1fr))}
 .grid2:not(.wrap)>*{grid-column:span 2}
 .grid2:not(.wrap)>:nth-child(odd):last-child{grid-column:2/span 2}
}
@media(min-width:761px) and (max-width:1060px){
 .grid3,.grid4,.posts{grid-template-columns:repeat(4,minmax(0,1fr))}
 .grid3>*,.grid4>*,.posts>*{grid-column:span 2}
 .grid3>:nth-child(odd):last-child,.grid4>:nth-child(odd):last-child,.posts>:nth-child(odd):last-child{grid-column:2/span 2}
}
/* Google reviews carousel (Yair 9.11.2026): one review at a time in the quote card of the inner pages, all slides stacked in one
   grid cell so the card always has the tallest review's height; red stars and quote mark, ink frame, paper card. */
.grev{max-width:880px;margin-inline:auto}
.grev__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 18px;margin-bottom:22px;font:500 15px/1.4 'Rubik','Assistant',sans-serif}
.grev__all{color:#b8282f;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.grev__all:hover{color:#0E1E4A}
.grev__frame{position:relative;background:#FFFBF4;border:2px solid #0E1E4A;border-radius:16px;box-shadow:4px 5px 0 rgba(14,30,74,.13);padding:clamp(34px,3.4vw,44px) clamp(20px,3vw,40px) clamp(22px,2.4vw,30px)}
.grev__frame::before{content:"״";position:absolute;top:-34px;right:10px;font:400 96px/1 'Suez One',serif;color:#D63A40;opacity:.9;pointer-events:none}
.grev__track{display:grid;touch-action:pan-y}
.grev__slide{grid-area:1/1;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-width:0;visibility:hidden;opacity:0;transform:translateX(-14px);transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s}
.grev__slide.is-on{visibility:visible;opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease,visibility 0s}
.grev__slide blockquote{margin:0;font:400 clamp(18px,1.6vw,22px)/1.55 'Suez One','Assistant',serif;color:#0E1E4A;text-wrap:pretty;overflow-wrap:anywhere}
.grev__slide figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;font-size:16px;color:#0E1E4A;text-wrap:pretty}
.grev__who b{font-weight:700}
.grev__src{display:inline-flex;align-items:center;gap:6px;font:500 14px/1 'Rubik','Assistant',sans-serif;color:#0E1E4A}
.grev__g{flex:none}
.grev__stars{display:inline-flex;gap:1px;color:#D63A40}
.grev__nav{display:none;align-items:center;justify-content:center;gap:10px 14px;margin-top:20px;flex-wrap:wrap}
.grev.js .grev__nav{display:flex}
.grev__btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid #0E1E4A;background:#FFFBF4;color:#0E1E4A;cursor:pointer;padding:0}
.grev__btn:hover{background:#0E1E4A;color:#FFFBF4}
.grev__btn:focus-visible,.grev__dot:focus-visible,.grev__all:focus-visible{outline:3px solid #D63A40;outline-offset:3px}
.grev__pause{width:36px;height:36px;margin-inline-start:6px}
.grev__ico-pause{width:10px;height:12px;border-inline:3px solid currentColor;box-sizing:border-box}
.grev__pause[aria-pressed="true"] .grev__ico-pause{width:0;height:0;border:0;border-block:6px solid transparent;border-inline-end:10px solid currentColor;margin-inline-end:2px}
.grev__dots{display:flex;gap:2px;align-items:center}
.grev__dot{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.grev__dot::after{content:"";width:10px;height:10px;border-radius:50%;border:2px solid #0E1E4A;background:transparent;transition:background .2s,transform .2s}
.grev__dot[aria-current="true"]::after{background:#D63A40;border-color:#D63A40;transform:scale(1.15)}
@media (max-width:560px){.grev__frame{padding-inline:18px}.grev__slide figcaption{justify-content:flex-start}.grev__nav{gap:8px;flex-wrap:nowrap}.grev__btn{width:40px;height:40px}.grev__pause{width:32px;height:32px;margin-inline-start:0}.grev__dots{gap:0}.grev__dot{width:20px}}
@media (prefers-reduced-motion:reduce){.grev__slide,.grev__slide.is-on{transition:none;transform:none}}
/* About v2 (Yair 9.11.2026 14:19 "כן", site-design msg mmw98aqeofxrr7jb): smaller founder portraits beside the text, one responsibility
   line per card, the 3-step "how we match" block, the partner logos as a strip; tighter section spacing on About only */
.sec.ab2{padding-block:clamp(36px,4.4vw,60px)}
.people2{grid-template-columns:1fr 1fr!important;gap:18px;align-items:stretch;margin-top:clamp(18px,2.2vw,26px)}
.people2 .person.p2{display:grid;grid-template-columns:clamp(150px,13vw,188px) minmax(0,1fr);gap:clamp(16px,1.8vw,24px);align-items:start;padding:clamp(16px,1.7vw,22px)}
.people2 .p2-ph img{width:100%;aspect-ratio:1/1;height:auto;max-height:none;object-fit:cover;border:2px solid #0E1E4A!important;border-radius:12px!important;background:#F3ECDF}
.people2 .person-body{padding:0;gap:6px;align-content:start}
.people2 .person h3{font-size:clamp(24px,2vw,28px)}
.people2 .p2-resp{font:700 17px/1.4 'Assistant',system-ui,sans-serif;color:#0E1E4A!important;border-inline-start:4px solid #D63A40;padding-inline-start:10px;margin-block:4px 2px}
.people2 .p2-bio{font-size:16.5px;line-height:1.55;color:var(--ink-2)}
.p2-note{margin-top:18px;text-wrap:balance}
/* 9.11.2026: between 1061 and 1119px Yaela's bio ran 3 lines against Yair's 2 side by side; the cards stack one per row there, as below 1060 */
@media (max-width:1119px){.people2{grid-template-columns:1fr!important}}
.steps3{list-style:none;margin:clamp(18px,2.2vw,26px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:none}
.steps3 li{background:#FFFBF4;border:2px solid #0E1E4A;border-radius:16px;box-shadow:4px 5px 0 rgba(14,30,74,.13);padding:18px 20px;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:4px;align-content:start}
.steps3 .s3-n{grid-row:span 2}
.steps3 .s3-n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#D63A40;color:#fff;font:400 22px/1 'Suez One','Assistant',serif}
.steps3 h3{font-size:clamp(20px,1.7vw,23px);align-self:center}
.steps3 p{font-size:16.5px;line-height:1.5;color:var(--ink-2);max-width:25ch}
#numbers.sec.tight{padding-block:clamp(32px,4vw,52px)}
#numbers .ledger{margin-top:16px}
.lg2-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 28px;flex-wrap:wrap}
.lg2-head .btn{flex:none}
.logo-grid.lg-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.logo-grid.lg-strip .lg{flex:0 0 calc((100% - 6*12px)/7);height:84px}
.logo-grid.lg-strip img{max-width:80%;max-height:58px;width:auto}
@media (max-width:1060px){
  .people2{grid-template-columns:1fr!important}
  .logo-grid.lg-strip .lg{flex-basis:calc((100% - 4*12px)/5)}
}
@media (max-width:700px){
  .people2 .person.p2{grid-template-columns:1fr;gap:14px}
  .people2 .p2-ph img{width:120px}
  .steps3{grid-template-columns:1fr;gap:12px}
  .steps3 li{padding:16px 18px}
  .logo-grid.lg-strip{gap:10px}
  .logo-grid.lg-strip .lg{flex-basis:calc((100% - 2*10px)/3);height:76px}
  .lg2-head .btn{width:100%}
}