/* ==========================================================================
   צימר פלוס · landing page stylesheet
   Design tokens, layout, sections, components, motion.
   Order: tokens → base → utilities → header → hero → kpi band → manifesto →
   edge (before/after) → cases reels → shift stats → services → trusted →
   founders → testimonials → faq → contact → footer → float → motion.
   ========================================================================== */

/* ---------- Self-hosted brand font: Tel Aviv Modernist (subset: Hebrew + Latin) ---------- */
@font-face{
  font-family:'Tel Aviv Modernist';
  src:url('../fonts/telaviv-modernist-regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Tel Aviv Modernist';
  src:url('../fonts/telaviv-modernist-bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --cream:#FAF3E0;
  --ink:#264653;
  --teal:#264653;
  --gold:#D4AF37;
  --gold-deep:#a17820;   /* large gold text on cream: 3.63:1 (was #b8902e = 2.68:1, failed 1.4.3) */
  --gold-hero:#ffe9b8;   /* gold text over the hero video scrim - measured on 12 real frames, worst 3.5:1 (was --gold at 1.0:1) */
  --gold-lit:#E8C14B;    /* round 20: the hero's gold words over the dark shade - --gold read darker there than the gold pill (= the pill's own hover gold) */
  --gold-text:#8a6a1d;   /* small gold text on cream/white: 4.5:1+ */
  --live-text:#1f7a6f;   /* small green text on cream/white: 4.6:1+ */
  --live:#2A9D8F;
  --white:#FFFFFF;
  --dark:#0f2028;
  --hair:rgba(38,70,83,0.15);
  --hair-strong:rgba(38,70,83,0.28);
  --shadow-sm:0 1px 2px rgba(26,26,26,0.04);
  --shadow-md:0 8px 24px rgba(26,26,26,0.08);
  --shadow-lg:0 20px 60px rgba(26,26,26,0.12);
  --max:1320px;
  --pad:clamp(20px,4vw,64px);
  --head:96px;
  --font-body:'Tel Aviv Modernist','Segoe UI',Arial,'Noto Sans Hebrew',sans-serif;
  --font-display:'Tel Aviv Modernist','Segoe UI',Arial,'Noto Sans Hebrew',sans-serif;
  --ease-out:cubic-bezier(.2,.7,.3,1);
}
@media(max-width:600px){:root{--head:72px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--head) + 8px);
  scroll-padding-bottom:96px;   /* the floating CTA is fixed at the bottom - keep focused controls clear of it */
}
body{
  font-family:var(--font-body);
  font-weight:400;
  font-synthesis:none;
  font-size:calc(17px * var(--fsk,1));
  line-height:1.75;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
strong{font-weight:700}
::selection{background:var(--teal);color:var(--cream)}

/* Keyboard focus: one consistent ring everywhere, mouse clicks stay clean */
:focus{outline:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.btn:focus-visible,.float-wa:focus-visible{outline-offset:4px}
.hero :focus-visible,.final-cta :focus-visible,.split-section :focus-visible,.fluid-card:focus-visible,.spk-card :focus-visible,.footer :focus-visible{outline-color:#f3dd8f}
/* (round 20: the header is cream at every scroll position, so its controls keep the dark ring above) */
/* a control focused before its section has revealed must still show its ring */
html.js .reveal:not(.visible):focus-within{opacity:1;transform:none}
main:focus{outline:none}
main:focus-visible{outline:3px solid var(--ink);outline-offset:-4px} /* the skip link must visibly land somewhere */

/* Skip link for keyboard / screen-reader users */
.skip-link{
  position:absolute;top:-100px;right:16px;z-index:200;
  background:var(--teal);color:var(--cream);
  padding:12px 18px;border-radius:999px;font-weight:700;
  transition:top .2s ease;
}
.skip-link:focus{top:12px}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Utilities ---------- */
.container{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);position:relative}
.section{padding:clamp(64px,10vw,128px) 0;position:relative} /* no scroll-margin: html's scroll-padding-top already clears the header (the two added up, and every menu link landed ~100px low) */
.section + .section{border-top:1px solid var(--hair)}
.h-display{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.1;
  letter-spacing:0;
  color:var(--ink);
}
.h-section{font-size:calc(clamp(34px,4.5vw,64px) * var(--fsk,1));max-width:900px}
.h-section--tight{font-size:calc(clamp(32px,4.2vw,56px) * var(--fsk,1));max-width:980px}
.h-bigger{font-size:1.5em;line-height:1.05} /* round 11/14: "צימר פלוס!" bigger in the logos heading */
@media(max-width:640px){#trusted-title{font-size:calc(clamp(26px,7.2vw,34px) * var(--fsk,1))}} /* keeps "מתחמים שבחרו לעבוד עם" on one line on phones */
.gold-strong{font-weight:700;color:var(--gold-text)} /* round 12: "צימר פלוס" in the Instagram lede - 4.56:1 on cream */
.mark-under{position:relative;display:inline-block}
.mark-svg{position:absolute;left:-3%;bottom:-0.18em;width:106%;height:0.36em;overflow:visible;pointer-events:none}
.mark-svg path{fill:none;stroke:var(--gold);stroke-width:3px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s ease .45s}
html.js .reveal.visible .mark-svg path,html.no-js .mark-svg path{stroke-dashoffset:0}
@media(max-width:640px){
  .edge-dash{display:none}
  .edge-sell{display:block;font-size:1.14em;margin-top:.08em}
}
/* round 19: a small gold line over a section title that names what the section is about
   ("תכירו את רון ואביעד", "יצירת תוכן וסרטוני AI") - the reviewer's "תת כותרת" */
.section-kicker{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;font-size:calc(clamp(15px,1.25vw,17px) * var(--fsk,1));line-height:1.3;
  letter-spacing:0.02em;color:var(--gold-text);margin:0 0 14px;
}
.section-kicker::before{content:"";flex:0 0 auto;width:28px;height:2px;border-radius:2px;background:var(--gold)}
/* round 22: centred on every screen (was <=900px only); the dash (28px + the 10px gap) hangs outside the
   centred group, so the TEXT sits on the page axis */
.section-kicker{justify-content:center}
.section-kicker::before{margin-inline-start:-38px}
.lede{max-width:680px;font-size:calc(18px * var(--fsk,1));line-height:1.7;color:#3a3a3a;margin-top:18px}
/* Emphasised words: gold gradient text. Padding keeps descenders un-clipped. */
.gold{
  color:var(--gold-deep);
}
/* Solid brand gold (same as the WhatsApp button in the hero) */
.gold-solid{color:var(--gold)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:14px 28px;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:calc(15px * var(--fsk,1));
  letter-spacing:0.01em;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
  cursor:pointer;
  text-align:center;
  white-space:nowrap;
}
.btn svg{flex:0 0 auto}
.btn-fill{background:var(--teal);color:var(--cream)}
.btn-fill:hover{background:var(--live-text)}
.btn-outline{background:transparent;color:var(--teal);border:1.5px solid var(--teal)}
.btn-outline:hover{background:var(--teal);color:var(--cream)}
.btn-gold{background:var(--gold);color:var(--teal)}
.btn-gold:hover{background:#e8c14b}

/* ---------- Header ---------- */
/* round 20 (Oren): cream from the first screen. The dark header over the dark-teal hero read as one
   block; now a solid cream bar (the colour of the page and of the legal pages' header) sits on top
   and the hero - and its video - starts clearly below it. Solid, not the old 86% + blur: over the
   hero that let the dark shade through as a muddy grey-cream. The look is the same at every scroll
   position; .scrolled (site.js, past 80px) only adds a soft shadow, so the bar still separates from
   cream sections scrolling under it. */
.header{
  position:fixed;top:0;right:0;left:0;z-index:100;
  background:var(--cream);
  border-bottom:1px solid var(--hair);
  transition:box-shadow .3s ease;
}
.header.scrolled{box-shadow:0 6px 16px -8px rgba(15,32,40,0.22)}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--head);
}
.header-logo{display:flex;align-items:center;gap:10px;border-radius:8px;flex-shrink:0}
.header-logo img{height:66px;width:auto;display:block;object-fit:contain}
@media(max-width:600px){.header-logo img{height:48px}}
.header-nav{display:flex;align-items:center;gap:28px}
.header-nav a{
  font-size:calc(14px * var(--fsk,1));font-weight:700;color:var(--ink);   /* 9.1:1 on the cream bar */
  transition:color .2s ease;position:relative;
  padding:6px 2px;border-radius:4px;white-space:nowrap;
}
.header-nav a:hover{color:var(--live-text)}   /* 4.66:1 */
.header-cta{display:flex;align-items:center;gap:12px}
.header-cta .btn{min-height:44px;padding:10px 20px;font-size:calc(14px * var(--fsk,1))}

/* Mobile menu button + drawer */
.menu-btn{
  display:none;
  width:44px;height:44px;border-radius:12px;
  align-items:center;justify-content:center;
  color:var(--ink);background:var(--white);   /* round 20: the light look at every scroll position (the bar is cream) */
  border:1px solid var(--hair-strong);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.menu-btn .ico-close{display:none}
.header.menu-open .menu-btn .ico-open{display:none}
.header.menu-open .menu-btn .ico-close{display:block}
.mobile-nav{
  display:none;
  position:fixed;top:var(--head);right:0;left:0;bottom:0;z-index:99;
  background:rgba(250,243,224,0.97);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  padding:24px var(--pad) 40px;
  flex-direction:column;gap:6px;
  overflow-y:auto;
}
.mobile-nav.open{display:flex}
.mobile-nav a{
  font-family:var(--font-display);font-weight:700;font-size:calc(26px * var(--fsk,1));
  padding:14px 6px;border-bottom:1px solid var(--hair);color:var(--ink);
}
.mobile-nav a:hover{color:var(--live-text)}
.mobile-nav .btn{margin-top:22px;align-self:flex-start;font-size:calc(16px * var(--fsk,1))}
.mobile-nav-note{margin-top:auto;padding-top:24px;font-size:calc(13px * var(--fsk,1));color:rgba(38,70,83,0.7)}
body.menu-open{overflow:hidden}
@media(max-width:900px){
  .header-nav,.header-cta{display:none}
  .menu-btn{display:inline-flex}
}
/* round 19 fix: with the accessibility menu's larger text the six links + the button no longer fit
   on one row below these widths (measured with a 15px scrollbar: x1.15 up to 925px, x1.3 up to 993px,
   x1.5 up to 1087px; ~20px slack added) - use the menu button instead of a two-line header.
   site.js closes the drawer whenever the menu button is hidden again. */
@media(max-width:945px){html.a11y-fs-1 .header-nav,html.a11y-fs-1 .header-cta{display:none} html.a11y-fs-1 .menu-btn{display:inline-flex}}
@media(max-width:1013px){html.a11y-fs-2 .header-nav,html.a11y-fs-2 .header-cta{display:none} html.a11y-fs-2 .menu-btn{display:inline-flex}}
@media(max-width:1107px){html.a11y-fs-3 .header-nav,html.a11y-fs-3 .header-cta{display:none} html.a11y-fs-3 .menu-btn{display:inline-flex}}

/* ---------- Hero (immersive video) ---------- */
/* round 17: the text sits on its own dark-teal backdrop and the video sits BELOW it,
   unscrimmed, its edges feathered into the backdrop. The backdrop darkens upward
   (text contrast) and settles into the video's own side colour #1c706e lower down. */
.hero{
  position:relative;
  overflow:hidden;
  min-height:min(100vh,940px);
  min-height:min(100dvh,940px);
  display:grid;grid-template-rows:auto 1fr;  /* text, then the video in what is left of the first screen */
  padding-top:calc(var(--head) + clamp(16px,1.6vw,24px));
  padding-bottom:88px;                     /* the fixed WhatsApp pill: 24px + 46px */
  background:#297571;                       /* round 18b/21: = the plate's far-field colour (round 21: the Hebrew-calendar video), so screens wider than the plate show no line */
  scroll-margin-top:0;
}
.hero > .container{position:relative;z-index:3;width:100%;grid-row:1}
/* round 18: the shade the text needs, tied to the text block so it follows the text and
   fades out a little below the lead - it never reaches the notebook */
.hero > .container::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:calc(-1 * (var(--head) + 40px));bottom:-34px;left:-100vw;right:-100vw;
  background:linear-gradient(180deg,rgba(9,28,34,0.8) 0%,rgba(9,28,34,0.66) 42%,rgba(9,28,34,0.42) 74%,rgba(9,28,34,0) 100%);
}
.hero-overlay{display:none}                /* nothing darkens the video any more */
.hero-video{
  grid-row:2;position:relative;z-index:1;min-height:0;
  justify-self:center;align-self:center;   /* round 18: shrink-wrap the video - the box IS the frame */
  margin-top:clamp(10px,1.4vh,18px);
  display:flex;align-items:center;justify-content:center;
}
/* round 18: the video's own backdrop, 3x the frame and centred on it (built from the frames) */
.hero-video::before{
  content:"";position:absolute;inset:-100%;z-index:-1;pointer-events:none;
  background:url('../hero/hero-plate-d-he-v5.webp') center/100% 100% no-repeat;
}
.hero-video video,.hero-video img{
  display:block;object-fit:cover;
  width:auto;height:auto;max-width:calc(100vw - 32px);   /* the element keeps the exact 16:9 frame (not %: its box shrink-wraps it) */
  /* first screen minus the text block (its bottom sits at ~375px from 1024px up) minus the WhatsApp pill */
  max-height:max(280px,calc(min(100vh,940px) - 356px - 88px));
  max-height:max(280px,calc(min(100dvh,940px) - 356px - 88px));
  /* narrow feathers: the plate behind already continues the frame; they only hide the
     loop's small frame-to-frame lighting drift */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 3.5%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 3.5%,#000 92%,transparent 100%);
  mask-composite:intersect;
}
/* short laptop windows (1366x625-687, 1280x600, 1536x714): the 280px floor made the hero taller than the
   screen - the sound toggle and "גללו למטה" fell below the fold and the fixed pill sat on the notebook.
   Here the video takes only what is left between the text block and the pill band, down to 150px.
   The same formula as above, so from 724px up nothing changes; landscape phones (<=520px) keep theirs. */
@media(min-width:768px) and (min-height:521px) and (max-height:730px){
  .hero-video video,.hero-video img{max-height:max(150px,calc(100vh - 444px));max-height:max(150px,calc(100dvh - 444px))}
}
@media(max-width:767px){
  /* 4:5 file: full width so the notebook (2%..98% of the frame) is never cut. Its top
     ~42% is empty teal made for text - pull the box up under the text by 52vw (of its
     125vw height) and fade that part out, so the notebook starts just under the lead. */
  /* On real phone heights (390x664 with the browser bars) a full-width notebook leaves no room
     for the sound toggle and the scroll cue, which then sat ON the notebook. So the box narrows
     just enough that notebook + a controls row + the fixed pill fit the first screen:
     text bottom ~ 99.5px + 43.6vw (measured 320-430px), notebook = lower 58.4% of a 1.25W box,
     lead margin 18px, controls row 44px, 10px air, pill 66px  ->  W = (100dvh - 237.5px - 43.6vw) / 0.73, capped at 100vw. */
  .hero{--hv-w:max(250px,min(100vw,calc((100vh - 237.5px - 43.6vw) / 0.73)));
        --hv-w:max(250px,min(100vw,calc((100dvh - 237.5px - 43.6vw) / 0.73)));
        padding-bottom:0;grid-template-rows:auto auto auto;align-content:start}
  .hero-video{align-self:start;justify-self:center;width:var(--hv-w);aspect-ratio:4/5;height:auto;
    margin-top:calc(0px - 0.52 * var(--hv-w))}   /* the lead's own 18px margin is the gap */
  .hero{background:#27726f}                /* the 4:5 plate's far-field colour */
  .hero-video::before{background-image:url('../hero/hero-plate-m-he-v5.webp')}
  .hero-video video,.hero-video img{width:100%;height:100%;max-height:none;max-width:none; /* the box is the frame here - no desktop caps */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 94%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 94%,transparent 100%);
    mask-composite:intersect}
  /* the sound toggle and (round 19) the "השירותים שלנו" button become a row UNDER the notebook:
     sound on the right, services on the left - where the scroll cue sat, and neither covers the animation */
  .hero > .hero-sound,.hero > .hero-services--phone{position:relative;grid-row:3;grid-column:1;align-self:center; /* same cell - no implicit second column */
    top:auto;bottom:auto;left:auto;right:auto;transform:none;margin:6px 16px 0}
  .hero > .hero-sound{justify-self:start}
  .hero > .hero-services--phone{justify-self:end}
  .hero > .hero-scroll{display:none}       /* round 19: the services button took its place and keeps its bouncing chevron */
}
/* round 16: visitors did not realise the page continues below the full-screen hero.
   Centred at the foot of the hero, above the fixed WhatsApp pill (desktop: 24px + 46px;
   phones: 16px + ~50px) and clear of the sound toggle on the right. */
.hero-scroll{
  position:absolute;left:50%;transform:translateX(-50%);z-index:4;
  bottom:calc(96px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:6px 12px;border-radius:14px;
  color:var(--cream);font-family:var(--font-body);font-weight:700;font-size:calc(13.5px * var(--fsk,1));line-height:1.2;
  text-shadow:0 1px 8px rgba(0,0,0,0.55);
  transition:opacity .35s ease;
}
.hero-scroll-icon{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--gold);color:var(--gold);background:rgba(15,32,40,0.45);
  box-shadow:0 0 6px 2px rgba(9,28,34,0.8);   /* round 21: the same tight rim as the services pill - the gold ring was 2.4-2.6:1 on the lighter backdrop */
  animation:heroScrollBob 1.8s ease-in-out infinite;
}
.hero-scroll:hover .hero-scroll-icon{background:rgba(15,32,40,0.7)}
.hero-scroll.is-hidden{opacity:0;pointer-events:none}
/* a keyboard user who Tabs onto the cue scrolls the page (the browser brings it into view), which hid it -
   the focused link faded out with its ring. Keep it visible while it has keyboard focus; it fades on blur. */
.hero-scroll.is-hidden:focus-visible{opacity:1;pointer-events:auto}
@keyframes heroScrollBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
html.no-motion .hero-scroll-icon{animation:none}
@media(prefers-reduced-motion:reduce){.hero-scroll-icon{animation:none}}
@media(min-width:768px){
  /* round 17: the notebook now sits in the middle of the first screen, so the cue moves to
     the bottom-left corner, mirroring the sound toggle on the right (phones: hidden since round 19) */
  .hero-scroll{left:var(--pad);transform:none;bottom:calc(18px + env(safe-area-inset-bottom,0px));flex-direction:row;gap:10px}
}
@media(max-height:520px){.hero-scroll{display:none}} /* landscape phones: no room below the text */
/* round 19: "השירותים שלנו" - a secondary pill that jumps to #services (the floating gold pill stays
   the main CTA: this one is outlined, never solid gold). Desktop/tablet: in the text block, on the
   lead's row, left of it and bottom-aligned with its last line - the text block keeps its height, so
   the notebook keeps its size. Phones: a second copy (.hero-services--phone, a direct child of .hero)
   takes the scroll cue's place in row 3 under the notebook and keeps the cue's bouncing chevron.
   Exactly one copy is displayed (and so in the accessibility tree) per breakpoint.
   Contrast on real frames: text 8.7:1+; outline #e8c14b (the pill's own hover gold) 5.4:1+ against the
   fill and, thanks to a tight dark rim, 3.2:1+ against the backdrop just outside it (without the rim
   the bright teal there gave 2.3-2.9:1). The rim is kept tight (6px) so on phones it stays off the
   notebook's box 6px above - a wider soft halo read as a smudge and darkened the video's edge. */
.hero-services{
  position:relative;z-index:4;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:9px 20px;border-radius:999px;
  border:1.5px solid #e8c14b;background:rgba(15,32,40,0.55);color:var(--cream);
  box-shadow:0 0 6px 3px rgba(9,28,34,0.88);   /* round 21: the new video's lighter teal - 1px more spread, a touch darker (phones 3.07:1+, was 2.5-2.7) */
  font-family:var(--font-body);font-weight:700;font-size:calc(15px * var(--fsk,1));line-height:1.2;white-space:nowrap;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .2s ease;
}
.hero-services:hover{background:rgba(15,32,40,0.82)}
.hero-services-icon{display:flex;flex:0 0 auto;color:#e8c14b;transition:transform .2s ease}
.hero-services:hover .hero-services-icon{transform:translateY(2px)}
.hero-services--phone{display:none}
@media(min-width:768px){
  /* the lead and the button share one row; the lead keeps its own width (max-content, max 640px)
     and the button wraps under it only if they cannot fit side by side (e.g. enlarged text) */
  .hero-lead-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-start;gap:14px 32px;margin-bottom:18px}
  .hero .hero-lead-row > .hero-sub{margin:0;flex:0 1 auto}   /* the row carries the lead's 18px; no auto margins in a flex row */
}
@media(min-width:768px) and (max-width:900px){.hero-lead-row{justify-content:center}} /* the hero text is centred up to 900px */
/* landscape phones / short windows with enlarged text: the text block reaches the fixed WhatsApp pill
   (bottom-centre), so the button moves to the row's far left, clear of it */
@media(min-width:768px) and (max-height:520px){
  html.a11y-fs-1 .hero-services--desk,html.a11y-fs-2 .hero-services--desk,html.a11y-fs-3 .hero-services--desk{margin-inline-start:auto}
}
@media(max-width:767px){
  .hero-services--desk{display:none}
  /* sized like the sound toggle beside it; ::before widens the touch target to 46px without growing the row */
  .hero > .hero-services--phone{display:inline-flex;min-height:38px;padding:7px 14px 7px 12px;gap:6px;font-size:calc(13px * var(--fsk,1))}
  .hero-services--phone::before{content:"";position:absolute;inset:-4px -2px}
  .hero-services--phone .hero-services-icon{animation:heroServicesBob 1.8s ease-in-out infinite}
  .hero-services--phone:hover .hero-services-icon{transform:none}
  /* enlarged text (x1.3 / x1.5): the two pills no longer fit one 320-360px row - services drops to a row of its own */
  html.a11y-fs-2 .hero > .hero-services--phone,html.a11y-fs-3 .hero > .hero-services--phone{grid-row:4;margin:10px 16px 14px} /* bottom: room for the focus ring (the hero clips) */
}
@keyframes heroServicesBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}} /* the cue's bob, scaled to fit inside the pill */
html.no-motion .hero-services-icon{animation:none!important;transition:none}
@media(prefers-reduced-motion:reduce){.hero-services-icon{animation:none!important;transition:none}}
/* the jump target (#services) takes focus: keep the keyboard ring inside the section, not clipped at the page edges */
#services:focus-visible{outline-offset:-4px}
/* focus-highlight mode: its yellow fill is meant for controls - on the whole section keep the loud red
   ring (inside the page edges and below the header) and the section's own look; the gold chevron
   would vanish on the yellow fill of the focused pill, so it turns black like the label */
html.a11y-focus #services:focus-visible{outline-offset:-6px!important;background:transparent!important;color:inherit!important}
html.a11y-focus .hero-services:focus-visible .hero-services-icon{color:#000}
html.a11y-contrast .hero-services{background:#000;border-color:#ffe98a;color:#fff}
html.a11y-contrast .hero-services-icon{color:#ffe98a}
html.a11y-links .hero-services{text-decoration:none!important}   /* a pill, like .btn / .float-wa - already reads as a control */
.hero-sound{
  position:absolute;right:var(--pad);bottom:18px;z-index:4;
  display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 14px;
  border-radius:999px;border:1px solid rgba(250,243,224,0.35);background:rgba(15,32,40,0.55);color:var(--cream);
  font-family:var(--font-body);font-weight:700;font-size:calc(13px * var(--fsk,1));cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.hero-sound:hover,.hero-sound:focus-visible{background:rgba(15,32,40,0.82);border-color:var(--gold)}
.hero-sound.is-on{border-color:var(--gold);color:var(--gold)}
.hero-sound .ico-on{display:none}
.hero-sound.is-on .ico-off{display:none}
.hero-sound.is-on .ico-on{display:block}
.hero-sound[hidden]{display:none}
@media(max-width:640px){.hero-sound{min-height:34px;font-size:calc(12.5px * var(--fsk,1));padding:7px 12px}} /* round 12/17: sizes only - on phones it sits in the row under the notebook */
.hero-content{max-width:920px;text-align:right;color:#fff} /* round 15: 920px so line 1 (17.14em) fits one line at 52px */
.hero-headline{
  color:#fff;
  font-size:calc(clamp(30px,5.2vw,52px) * var(--fsk,1)); /* round 15: line 1 is 17.14em; 5.2vw = one line from 641px up (content 92vw), 52px = 891px inside the 920px box */
  line-height:1.1;
  margin-bottom:24px;
  /* round 20 (Oren): no shadow - the shade behind the text block (.hero > .container::before) does the work.
     Lowest glyph pixel on 5 real frames, 320x568-1920x1080 (and 390x664 at text x1.15/x1.3/x1.5):
     white 8.09:1, "צימר פלוס" in --gold-lit 6.36:1 (large text, needs 3). With the old shadow it was 10.5 / 7.53. */
  text-shadow:none;
}
.hero-headline .line{display:block;font-weight:400}
.hero-headline .hero-brand{font-weight:700;color:var(--gold-lit)} /* round 15/16: Ron - "צימר פלוס" bold, in gold; round 20: the lighter --gold-lit */
.hero-lead-em{color:var(--gold-lit); /* round 19: the reviewer - emphasise "שיטת שיווק שעובדת." (same solid gold as the brand) */
  /* round 19 fix: the lead's 2nd line sits in the tail of the shade, over the plate's light teal - bare gold
     was 2.9-3.2:1 there, so this phrase keeps a tight dark rim (5px at most) plus the lead's own shadow.
     Round 20: the rim stays as in round 19 with the lighter --gold-lit - a 1px rim passed only under the glyph,
     while the visible background right next to it fell back to ~4.4:1. On 5 real frames: lowest glyph pixel
     5.97:1 on phones where it is normal text (320-390), 5.80+ at text x1.15-x1.5,
     6.98+ from 768px up; the visible 0-1px ring beside the glyph: median 7.2:1 on phones, 0-0.2% of pixels
     under 4.5 (the 1px rim: median 5.0, 28% under; round 19: 6.0, 3% under). */
  text-shadow:0 0 2px rgba(9,28,34,0.95),0 0 5px rgba(9,28,34,0.9),0 2px 16px rgba(0,0,0,0.45)}
.hero-headline .hero-line-2{font-size:.7em;margin-top:.28em} /* 16.12em x .7 = 11.28em - always narrower than line 1 */
/* rotating word in the headline (round 10): the slot keeps the width of the current word; JS swaps the text */
.rotator{display:inline-block;text-align:center;white-space:nowrap;vertical-align:baseline;transition:width .3s ease}
.rotator-word{display:inline-block;transition:opacity .28s ease,transform .28s ease}
.rotator-word.is-out{opacity:0;transform:translateY(-.35em)}
.rotator-word.is-in{opacity:0;transform:translateY(.35em);transition:none}
html.no-motion .rotator,html.no-motion .rotator-word{transition:none}
.hero-sub{
  font-family:var(--font-body);
  font-weight:400;
  font-size:calc(clamp(17px,1.7vw,21px) * var(--fsk,1));
  line-height:1.55;
  color:rgba(255,255,255,0.92);
  text-shadow:0 2px 16px rgba(0,0,0,0.45);
  max-width:640px;
  margin-bottom:36px;
}
.hero-sub--lead{
  font-size:calc(clamp(20px,2vw,26px) * var(--fsk,1));
  font-weight:700;
  line-height:1.45;
  color:#fff;
  margin-bottom:18px;
}
/* phones (round 15): the H1 is three controlled lines - brand / tagline / specialty - and nothing wraps.
   Measured em-widths (Tel Aviv): brand 4.68em bold (x1.25 = 5.85em), tagline 11.52em regular, specialty
   16.12em regular (x.7 = 11.28em); the tagline sets the size: (100vw - 2*20px) / (11.52em x 1.03).
   Lead lines unchanged: longest 18.413em bold. */
@media(max-width:640px){
  .hero-headline{font-size:calc(clamp(22px,calc(8.42vw - 3.37px),36px) * var(--fsk,1));line-height:1.14}
  .hero-headline .hero-brand,.hero-headline .hero-tag{display:block}
  .hero-headline .hero-dash{display:none}               /* the brand has its own line here */
  .hero-headline .hero-brand{font-size:1.25em;line-height:1.1;margin-bottom:.04em}
  .hero-sub{font-size:calc(clamp(14.5px,3.5vw,17px) * var(--fsk,1));line-height:1.5}
  .hero-sub--lead{font-size:calc(clamp(15px,calc(5.27vw - 2.1px),20px) * var(--fsk,1));line-height:1.45}
}
/* ---------- round 20 (Oren's notes, Ron's pick 28.9): the text block centred above the notebook from 768px up ----------
   (768-900 was already centred, but as a lead+pill group, which put the lead ~100px off the H1's axis). The lead sits
   in the middle column of a 3-column row and "השירותים שלנו" in the left column, beside its last line - under the lead
   the block would grow 58px and push the notebook down. minmax(0,1fr) keeps the side columns equal, so the lead stays
   on the axis even where the pill is wider than its column (768-820px: it runs a few px into the side padding).
   Enlarged text: lead and pill no longer fit side by side, so they stack, both on the axis. */
@media(min-width:768px){
  .hero .hero-content{text-align:center;margin-left:auto;margin-right:auto}
  .hero .hero-lead-row{justify-content:center}
  html:not(.a11y-fs-1):not(.a11y-fs-2):not(.a11y-fs-3) .hero .hero-lead-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end}
  html:not(.a11y-fs-1):not(.a11y-fs-2):not(.a11y-fs-3) .hero .hero-lead-row > .hero-sub{grid-column:2}
  html:not(.a11y-fs-1):not(.a11y-fs-2):not(.a11y-fs-3) .hero .hero-lead-row > .hero-services--desk{grid-column:3;justify-self:start}
  html[class*="a11y-fs-"] .hero .hero-lead-row{flex-direction:column;align-items:center}
}
@media(min-width:768px) and (max-width:900px){.hero .hero-lead-row{column-gap:20px}} /* narrower gap so the pill keeps ~12px from the screen edge at 768 */

/* ---------- KPI band (below the hero; replaced the client-names marquee in round 8) ---------- */
.kpi-band{
  background:var(--teal);color:var(--cream);
  border-top:1px solid var(--hair-strong);
  border-bottom:1px solid var(--hair-strong);
}
.kpis{
  --kpi-gap:clamp(32px,8vw,140px);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,auto);
  justify-content:center;gap:var(--kpi-gap);
  text-align:center;
}
/* round 20 (Oren): a taller band - the vertical room moved from the band into the three items (they
   stretch to one row height), so the dividers below can span the band. Was clamp(22px,3vw,34px):
   now +13px on phones, +24px from ~1024px up (35px at 320-390, 47px at 768, 58px at 1134+). */
.kpis > li{position:relative;padding:clamp(35px,calc(3.1vw + 23px),58px) 0}
/* two thin cream dividers, only right and left of the middle number: centred in the grid gap (so exactly
   midway between the items at any width, count-up or text size), 86% of the band's height, centred */
.kpis > li + li::before{
  content:"";position:absolute;top:7%;bottom:7%;width:1px;
  inset-inline-start:calc(var(--kpi-gap) / -2 - 0.5px);
  background:rgba(250,243,224,0.42);pointer-events:none;
}
.kpi-value{
  display:block;
  font-family:var(--font-body);font-weight:700;
  font-size:calc(clamp(30px,3.4vw,44px) * var(--fsk,1));line-height:1;
  color:var(--gold);letter-spacing:0;direction:ltr;
}
.kpi-label{display:block;font-size:calc(13px * var(--fsk,1));font-weight:400;color:rgba(250,243,224,0.82);margin:8px auto 0;max-width:170px;line-height:1.4}
@media(max-width:640px){
  .kpis{grid-template-columns:repeat(3,1fr);--kpi-gap:12px}
  .kpi-value{font-size:calc(26px * var(--fsk,1))}
  .kpi-label{font-size:calc(11.5px * var(--fsk,1));margin-top:6px;max-width:none}
}

/* ---------- Manifesto ---------- */
.manifesto{background:var(--cream)}
.manifesto-grid{
  display:grid;
  grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  gap:clamp(32px,5vw,64px);
  align-items:stretch;
  margin-top:8px;
}
.manifesto-content{display:flex;flex-direction:column;justify-content:center}
/* round 22: the heading spans the width above the body+photo grid, centred (it sat in the text column) */
.manifesto-head{max-width:1100px;margin:0 auto clamp(28px,4vw,48px);text-align:center}
.manifesto-head .manifesto-statement{margin-bottom:0}
.manifesto-statement{
  font-family:var(--font-display);
  font-weight:700;
  font-size:calc(clamp(32px,4.4vw,60px) * var(--fsk,1));
  line-height:1.12;
  letter-spacing:0;
  margin-bottom:28px;
  max-width:1100px;
}
.manifesto-body{
  font-size:calc(clamp(16px,1.4vw,19px) * var(--fsk,1));
  line-height:1.75;
  max-width:680px;
  color:#3a3a3a;
  padding-right:24px;
  border-right:2px solid var(--gold);
}
.manifesto-body p{margin-bottom:14px}
.manifesto-body p:last-child{margin-bottom:0}
.manifesto-body strong{color:var(--ink);font-weight:700}
.manifesto-media{display:flex;flex-direction:column;position:relative}
.manifesto-media::before{
  content:"";position:absolute;
  top:-14px;right:-14px;
  width:58%;height:42%;
  border:1.5px solid rgba(212,175,55,0.5);
  border-radius:20px;
  z-index:0;pointer-events:none;
}
.manifesto-photo{
  position:relative;z-index:1;margin:0;
  border-radius:20px;overflow:hidden;background:var(--teal);
  box-shadow:0 24px 56px rgba(38,70,83,0.16);
  aspect-ratio:4/5;
}
.manifesto-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease-out)}
@media(hover:hover){.manifesto-photo:hover img{transform:scale(1.03)}}
.duo{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  flex:1 1 auto;
}
.duo figure{
  margin:0;position:relative;
  border-radius:20px;overflow:hidden;background:var(--teal);
  box-shadow:0 24px 56px rgba(38,70,83,0.16);
  aspect-ratio:4/5;
}
.duo figure:nth-child(2){transform:translateY(28px)}
.duo img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .8s var(--ease-out)}
@media(hover:hover){.duo figure:hover img{transform:scale(1.03)}}
.duo figcaption{
  position:absolute;right:12px;bottom:12px;left:12px;
  display:flex;align-items:baseline;gap:8px;
  background:rgba(250,243,224,0.92);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:12px;padding:8px 12px;
  font-family:var(--font-display);font-weight:700;font-size:calc(16px * var(--fsk,1));color:var(--ink);
}
.duo figcaption small{font-family:var(--font-body);font-weight:700;font-size:calc(12px * var(--fsk,1));color:var(--live-text)}
.mduo-names{
  display:flex;justify-content:center;gap:clamp(14px,2vw,24px);
  margin-top:22px;text-align:center;position:relative;z-index:1;
}
.mduo-names > div{
  flex:1 1 0;max-width:280px;
  background:var(--teal);
  border:1px solid var(--teal);
  border-radius:16px;
  padding:16px 18px;
  box-shadow:0 12px 30px rgba(38,70,83,0.18);
}
.mduo-name{font-family:var(--font-display);font-weight:700;font-size:calc(19px * var(--fsk,1));color:var(--cream);display:block}
.mduo-role{
  display:block;margin-top:6px;
  font-size:calc(13px * var(--fsk,1));font-weight:700;line-height:1.5;
  color:var(--gold);
}
@media(max-width:900px){
  .manifesto-grid{grid-template-columns:1fr;gap:40px}
  .duo figure:nth-child(2){transform:translateY(18px)}
  .mduo-names{margin-top:36px}
}
@media(max-width:480px){
  .mduo-names{flex-direction:column;align-items:stretch}
  .mduo-names > div{max-width:none}
}

/* ---------- Edge: before / after comparison ---------- */
.edge-tabs{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:36px;
}
.edge-tab{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:8px 18px;border-radius:999px;
  font-weight:700;font-size:calc(15px * var(--fsk,1));color:var(--teal);
  background:var(--white);border:1.5px solid var(--hair-strong);
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.edge-tab:hover{border-color:var(--teal)}
.edge-tab[aria-selected="true"]{background:var(--teal);color:var(--cream);border-color:var(--teal)}
.edge-stage{margin-top:24px;display:grid;justify-content:center}
.edge-panel{display:none}
.edge-panel.active{display:block}
.compare{
  position:relative;
  width:min(100%,var(--cmp-w,900px));
  aspect-ratio:var(--cmp-ratio,16/10);
  max-height:min(78vh,760px);
  margin:0 auto;
  border-radius:20px;overflow:hidden;
  background:var(--dark);
  box-shadow:0 30px 80px rgba(0,0,0,0.28);
  user-select:none;-webkit-user-select:none;
  touch-action:pan-y pinch-zoom;
  --pos:50%;
}
.compare img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;user-select:none;-webkit-user-drag:none;
}
/* the BEFORE image is revealed on the right side of the handle (reading direction),
   the AFTER image on the left */
.compare .cmp-before{clip-path:inset(0 0 0 var(--pos))}
.compare .cmp-after{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-divider{
  position:absolute;top:0;bottom:0;left:var(--pos);
  width:4px;margin-left:-2px;background:#fff;
  box-shadow:0 0 0 2px rgba(15,32,40,0.95); /* dual-tone: 16.7:1 white-on-dark, so one edge always clears 3:1 over any photo */
  pointer-events:none;
}
.cmp-handle{
  position:absolute;top:50%;left:var(--pos);
  width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;
  background:var(--gold);color:var(--teal);
  border:3px solid #0f2028;                 /* gold on #0f2028 = 7.94:1 */
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px rgba(255,255,255,0.96),0 8px 28px rgba(0,0,0,0.35); /* white ring outside the dark one */
  pointer-events:none;
}
.cmp-range{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:ew-resize;margin:0;
  direction:ltr; /* value axis = left-to-right, same as --pos; the input is invisible */
  -webkit-appearance:none;appearance:none;background:transparent;
}
.cmp-range:focus-visible ~ .cmp-handle{outline:3px solid #f3dd8f;outline-offset:5px;box-shadow:0 0 0 3px rgba(255,255,255,0.96),0 0 0 11px rgba(15,32,40,0.9),0 8px 28px rgba(0,0,0,0.35)}
.cmp-label{
  position:absolute;top:18px;z-index:3;
  font-family:var(--font-body);font-weight:700;font-size:calc(clamp(12px,1.1vw,14px) * var(--fsk,1));line-height:1;
  letter-spacing:0.04em;
  padding:9px 14px;border-radius:999px;
  pointer-events:none;
}
.cmp-label--before{
  right:18px;color:#fff;background:rgba(15,32,40,0.5);
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(255,255,255,0.32);
}
.cmp-label--after{left:18px;color:#0f2028;background:var(--gold);border:1px solid rgba(15,32,40,0.5)} /* opaque so the photo cannot drift the ratio: 7.94:1 */
.cmp-caption{
  margin:18px auto 0;max-width:var(--cmp-w,900px);
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;justify-content:space-between;
  color:#3a3a3a;font-size:calc(15px * var(--fsk,1));
}
.cmp-caption strong{font-family:var(--font-display);font-weight:700;font-size:calc(18px * var(--fsk,1));color:var(--ink)}
.compare.portrait{--cmp-w:520px;--cmp-ratio:3/4}
.compare.landscape{--cmp-w:980px;--cmp-ratio:7/4}
.edge-hint{
  display:flex;align-items:center;gap:10px;justify-content:center;
  margin-top:20px;font-size:calc(15px * var(--fsk,1));font-weight:700;color:rgba(38,70,83,0.82);
}
.edge-hint + .edge-stage{margin-top:14px} /* round 19: the instruction sits above the picture, between the tabs and the slider */
.edge-hint svg{color:var(--gold)}
.edge-note{margin:22px auto 0;max-width:640px;text-align:center;font-size:calc(15.5px * var(--fsk,1));line-height:1.6;color:rgba(38,70,83,0.85);font-weight:700}
@media(max-width:640px){
  .compare{max-height:none;border-radius:16px}
  .compare.portrait{--cmp-w:100%;--cmp-ratio:3/4}
  .compare.landscape{--cmp-w:100%;--cmp-ratio:4/3}
  .cmp-handle{width:48px;height:48px;margin:-24px 0 0 -24px}
  .cmp-label{top:12px;padding:8px 12px}
  .cmp-label--before{right:12px}
  .cmp-label--after{left:12px}
  .edge-tab{flex:1 1 calc(50% - 5px);justify-content:center}
}

/* ---------- Manual "peek" carousels ([data-reels]): 04 case reels + 10 testimonials.
   One big 9:16 card with the neighbours peeking at both sides, round arrows over the peek at the
   card's own edges, and a sound pill inside the card. Never auto-advances. ---------- */
.reels{
  --reel-h:clamp(420px,76vh,760px); /* round 12: Ron - the reel should take more of the screen */
  --reel-cap:0px;                   /* name + venue strip above the video (testimonials only) */
  --reel-btn:44px;
  --reel-w:calc((var(--reel-h) - var(--reel-cap)) * 9 / 16);
  margin-top:48px;
  position:relative;
}
.reels--cap{--reel-cap:calc(54px * var(--fsk,1))}
.reels:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.reels-viewport{
  position:relative;
  width:100%;
  max-width:calc(var(--reel-w) * 1.49);   /* the extra 49% is the peek: ~15% of a neighbour on each side */
  height:var(--reel-h);
  margin:0 auto;
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y pinch-zoom;                      /* the page still scrolls vertically over the carousel */
  user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;              /* a long swipe on a phone must not raise the media menu */
}
.reels.is-dragging .reels-viewport{cursor:grabbing}
.reels-track{position:absolute;inset:0}
.reels-card{
  position:absolute;top:0;left:50%;
  width:var(--reel-w);height:100%;
  transform:translate3d(-50%,0,0) scale(0.9);
  display:flex;flex-direction:column;
  opacity:0.55;
  cursor:pointer;
  will-change:transform;
  transition:transform .45s var(--ease-out),opacity .45s var(--ease-out);
  -webkit-touch-callout:none;
}
.reels-card.is-active{opacity:1;cursor:default}
.reels.is-dragging .reels-card{transition:none}
/* the rounded video box; on a captioned card it is only the part below the caption */
.reels-media{
  position:relative;flex:1 1 auto;min-height:0;
  border-radius:22px;overflow:hidden;
  background:var(--teal);
  box-shadow:0 18px 44px rgba(0,0,0,0.22);
  transition:box-shadow .45s var(--ease-out);
}
.reels-card.is-active .reels-media{box-shadow:0 26px 60px rgba(0,0,0,0.3)}
.reels-media video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} /* the video never swallows a swipe */
/* recommender name + venue, above the video and part of the card, so it travels with it */
.reels-cap{
  flex:0 0 auto;height:var(--reel-cap);
  margin:0;padding:0 8px 10px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  text-align:center;
}
.reels-cap b{font-family:var(--font-display);font-weight:700;font-size:calc(17px * var(--fsk,1));line-height:1.2;color:var(--cream)}
.reels-cap span{font-size:calc(13px * var(--fsk,1));line-height:1.2;color:var(--gold)}
.reels--cap .reels-media{background:#000}
/* before the deferred script lays the track out: just the first reel, centred - never a stack of eight */
.reels:not(.is-ready) .reels-card{opacity:0}
.reels:not(.is-ready) .reels-card:first-child{opacity:1;transform:translate3d(-50%,0,0) scale(1);z-index:3}
/* arrows: 44px circles centred on the left / right edge of the active card, half over the peek.
   RTL: the next card slides in from the left, so "next" is the LEFT arrow. */
.reels-btn{
  position:absolute;z-index:5;
  top:calc(var(--reel-cap) + (var(--reel-h) - var(--reel-cap)) / 2 - var(--reel-btn) / 2);
  width:var(--reel-btn);height:var(--reel-btn);border-radius:50%;
  border:1px solid rgba(250,243,224,0.4);
  background:rgba(38,70,83,0.75);color:var(--cream);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.reels-next{left:calc(50% - var(--reel-w) / 2 - var(--reel-btn) / 2)}
.reels-prev{right:calc(50% - var(--reel-w) / 2 - var(--reel-btn) / 2)}
.reels-btn:hover,.reels-btn:focus-visible{background:var(--teal);border-color:var(--gold);color:#fff}
.reels-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* sound pill, inside the active card's bottom-right corner (clear of both arrows) */
.reels-sound{
  position:absolute;z-index:6;
  bottom:14px;right:calc(50% - var(--reel-w) / 2 + 12px);
  display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:8px 13px;
  border-radius:999px;border:1px solid rgba(250,243,224,0.35);background:rgba(15,32,40,0.62);color:var(--cream);
  font-family:var(--font-body);font-weight:700;font-size:calc(12.5px * var(--fsk,1));line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.reels-sound:hover,.reels-sound:focus-visible{background:rgba(15,32,40,0.85);border-color:var(--gold)}
.reels-sound.is-on{border-color:var(--gold);color:var(--gold)}
.reels-sound .ico-on{display:none}
.reels-sound.is-on .ico-off{display:none}
.reels-sound.is-on .ico-on{display:block}
.reels-sound[hidden]{display:none}
@media(max-width:760px){
  .reels{--reel-h:min(134vw,76vh)}   /* ~75vw wide on phones, ~12% peek each side */
  .reels--cap{--reel-cap:calc(46px * var(--fsk,1))}
  .reels-cap b{font-size:calc(16px * var(--fsk,1))}
  .reels-sound{bottom:12px;min-height:34px;font-size:calc(12px * var(--fsk,1));padding:7px 11px}
}
/* no JavaScript: a plain scrolling row of the same reels */
html.no-js .reels .reels-viewport{max-width:none;height:auto;overflow-x:auto;cursor:auto}
html.no-js .reels .reels-track{position:static;display:flex;gap:16px;height:var(--reel-h);padding:0 var(--pad)}
html.no-js .reels .reels-card{position:static;flex:0 0 var(--reel-w);height:100%;transform:none;opacity:1;cursor:auto}
html.no-js .reels .reels-btn,html.no-js .reels .reels-sound{display:none}
/* reduced motion: navigation still works, it just snaps instead of sliding */
@media(prefers-reduced-motion:reduce){.reels-card,.reels-media,.reels-btn,.reels-sound{transition:none}}
html.no-motion .reels-card,html.no-motion .reels-media,html.no-motion .reels-btn,html.no-motion .reels-sound{transition:none}

/* ---------- Shared stat typography (used inside the split cards) ---------- */
.stat-kicker{font-size:calc(13px * var(--fsk,1));font-weight:700;letter-spacing:0.06em;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.stat-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.stat-num{font-family:var(--font-body);font-weight:700;font-size:calc(clamp(52px,5.4vw,80px) * var(--fsk,1));line-height:1;letter-spacing:0;margin-bottom:18px;direction:ltr;text-align:right;width:fit-content}
.stat-label{font-size:calc(18.5px * var(--fsk,1));font-weight:400;line-height:1.55}
.stat-label strong{font-weight:700}
.stat-source{font-size:calc(13px * var(--fsk,1));letter-spacing:0.02em;margin-top:24px;padding-top:16px;border-top:1px solid currentColor}

/* ---------- 05 The shift: 3D split (one image splits into three cards that flip to reveal the numbers) ---------- */
.split-section{
  background:var(--dark);color:var(--cream);
  padding:0;border-top:0;
  /* scroll distance drives the animation; the stage stays pinned for the whole distance */
  height:320vh;
}
.split-sticky{
  position:sticky;top:0;height:100vh;height:100dvh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  padding:calc(var(--head) + 8px) 0 64px; /* round 19: 24px + the 40px the cue used to take down here - the cards stay where they were, above the floating button */
  /* round 19b: the cue between the intro and the cards gets its own room (--split-cue), taken off the
     cards' height - the headline and the cards' bottom edge stay exactly where they were */
  --split-cue:12px;
  --split-gap:calc(clamp(20px,3vh,40px) + var(--split-cue));
}
.split-head{text-align:center;max-width:980px;margin:0 auto;opacity:0;transform:translateY(16px);transition:none}
.split-title{color:#fff;margin:0 auto;font-size:calc(clamp(28px,3.6vw,52px) * var(--fsk,1))}
.split-title .gold{color:var(--gold)}
.split-lede{color:rgba(250,243,224,0.78);margin:14px auto 0;max-width:640px;font-size:calc(clamp(15px,1.3vw,18px) * var(--fsk,1))}
.split-stage{
  position:relative;
  width:min(92vw,1080px);aspect-ratio:12/5;max-height:calc(min(92vw,1080px) * 5 / 12 - var(--split-cue));
  margin:var(--split-gap) auto 0;
  perspective:1400px;perspective-origin:50% 50%;
  display:flex;gap:0;
  opacity:0;
}
.split-panel{
  position:relative;flex:1 1 0;min-width:0;height:100%;
  transform-style:preserve-3d;
  will-change:transform;
  border-radius:0;
}
.split-face{
  position:absolute;inset:0;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  border-radius:var(--split-r,0px);
}
.split-front{background:var(--teal)}
.split-front picture{position:absolute;inset:0}
.split-front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* round 19: a question on each photo, visible before the flip; the stat on the back answers it.
   It is part of the front face, so it turns away with the photo. The shade is local to the words
   (a solid core with a soft edge) - the photo itself is not darkened. No transform/filter here:
   a composited child could escape the face's backface-visibility.
   round 19b: tight edge (was a wide smoky halo that ran into the card's corner); the core covers the
   glyphs' full height and sits clear of the card edges. */
.split-cap{
  position:absolute;z-index:1;right:clamp(22px,2.3vw,32px);top:clamp(16px,1.8vw,24px);
  max-width:calc(100% - 44px);margin:0;
  font-family:var(--font-display);font-weight:700;font-size:calc(clamp(22px,2.4vw,36px) * var(--fsk,1));
  line-height:1.15;letter-spacing:0;color:#fff;text-align:right;white-space:nowrap;
  text-shadow:0 1px 2px rgba(6,16,21,0.6);
  pointer-events:none;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;   /* round 22b: Safari - see the JS: the caption is also hidden once the card is past edge-on */
}
.split-cap::before{
  content:"";position:absolute;z-index:-1;inset:-0.08em -0.36em;border-radius:999px;
  background:rgba(8,20,26,0.58);box-shadow:0 0 0.2em 0.04em rgba(8,20,26,0.5);
}
html.a11y-contrast .split-cap::before{background:rgba(0,0,0,0.82);box-shadow:0 0 0.2em 0.04em rgba(0,0,0,0.82)}
.split-back{
  transform:rotateY(180deg);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(18px,2.6vw,34px);
  text-align:right;
}
.split-back--cream{background:var(--cream);color:var(--ink)}
.split-back--gold{background:var(--gold);color:var(--ink)}
.split-back--dark{background:#173039;color:var(--cream);border:1px solid rgba(212,175,55,0.35)}
.split-back .stat-kicker{margin-bottom:12px;font-size:calc(clamp(15px,1.5vw,20px) * var(--fsk,1));letter-spacing:0.02em;justify-content:center} /* round 22: Ron - bigger card titles (was 11.5px), centred */
.split-back .stat-kicker::before{width:7px;height:7px}
.split-section .split-back{text-align:center}                                 /* round 22: all card text centred on every screen (was <=900px) */
.split-back .stat-num{text-align:center;margin-left:auto;margin-right:auto}   /* width:fit-content */
.split-back--cream .stat-kicker{color:var(--gold-text)}
.split-back--cream .stat-kicker::before{background:var(--gold-text)}
.split-back--gold .stat-kicker{color:var(--ink)}
.split-back--gold .stat-kicker::before{background:var(--ink)}
.split-back .stat-num{
  font-size:calc(clamp(40px,5vw,72px) * var(--fsk,1));margin-bottom:10px;
  background:none;color:inherit;-webkit-text-fill-color:currentColor;
}
.split-back--cream .stat-num{color:var(--ink);-webkit-text-fill-color:var(--ink)}
.split-back--gold .stat-num{color:var(--ink);-webkit-text-fill-color:var(--ink)}
.split-back--dark .stat-num{color:var(--gold);-webkit-text-fill-color:var(--gold)}
.split-back .stat-label{font-size:calc(clamp(13px,1.15vw,16px) * var(--fsk,1));line-height:1.5;margin:0;color:inherit}
.split-back--cream .stat-label strong,.split-back--gold .stat-label strong{color:var(--ink)}
/* round 20: the source lines are solid (opacity .7 gave 2.9:1 on gold, 4.1:1 on cream - now 9.1:1 on cream); the quiet
   look moves to the divider above them. On the turned card (3D, scaled .92) the 11px glyphs render softer - ink on gold
   measured 4.2:1 there - so the gold card's line takes the darker --dark (7.9:1). */
.split-back .stat-source{margin-top:14px;padding-top:10px;font-size:calc(11px * var(--fsk,1));color:inherit;border-top-color:rgba(38,70,83,0.35)}
.split-back--gold .stat-source{color:var(--dark)}
.split-back--dark .stat-source{opacity:0.8;border-top-color:rgba(250,243,224,0.35)}
/* round 19: the cue sits in the gap between the intro and the cards (order), taking no height of its
   own (the negative bottom margin cancels its box). At the bottom of the pinned stage it was under the
   floating WhatsApp button - fully on 390x664 / 360x640, half on 1440x900.
   round 19b: its ink is centred between the text above (whose ink ends ~8px above its box) and the
   photos: box top = gap/2 - 11px, ink centre = box top + 7px; top + 18px + bottom = 0. */
.split-stage{order:2}
.split-hint{
  order:1;text-align:center;font-size:calc(14.5px * var(--fsk,1));line-height:18px;letter-spacing:0.02em;color:rgba(250,243,224,0.72);
  margin:calc(var(--split-gap) / 2 - 11px) 0 calc(var(--split-gap) / -2 - 7px);
  transition:opacity .4s ease;
}
/* round 20: short laptop screens (1366x687, 1536x730, 1280x600...). The intro + cards were taller than the pinned
   screen and, centred, spilled out both ways: under the fixed header (the headline's first line was hidden for the
   whole pinned phase) and under the floating WhatsApp button / past the fold.
   Two empty spacers now do the centring: each starts at half the height and gives way first (the huge shrink factor),
   so while there is room they end up equal - exactly what justify-content:center gave (every screen 900px or taller is
   unchanged). When the room runs out the top one goes to 0 (the headline starts under the header), the bottom one
   keeps 32px (the cards stay 96px above the bottom: the button's top is 70px up and the side cards fan out ~14px below
   the stage) and the stage gives up height instead of spilling (min-height:0; the photos are object-fit:cover). */
@media(min-width:781px){
  .split-sticky{justify-content:flex-start}
  .split-sticky::before,.split-sticky::after{content:"";flex:0 100000 50%;min-height:0}
  .split-sticky::after{order:3;min-height:32px}
  .split-stage{min-height:0}
}
/* ...and the shorter the screen, the less the backs can hold: the intro line goes first, then the source lines on the
   backs - as on phones, which drop both in this layout. The static layout (motion off, larger text) keeps them. */
@media(min-width:781px) and (max-height:760px){
  html:not(.no-js):not(.no-motion) .split-section:not(.is-static) .split-lede{display:none}
  /* the headline's ink ends ~3px further above its box than the intro line's: the cue moves up 3px to stay centred
     between the text and the photos (still no height of its own: -14 + 18 - 4 = 0) */
  html:not(.no-js):not(.no-motion) .split-section:not(.is-static) .split-hint{margin-top:calc(var(--split-gap) / 2 - 14px);margin-bottom:calc(var(--split-gap) / -2 - 4px)}
}
@media(min-width:781px) and (max-height:680px){
  html:not(.no-js):not(.no-motion) .split-section:not(.is-static) .split-back .stat-source{display:none}
}
/* below 640px the backs also tighten their vertical padding and the number (1920x600 overflowed the dark card by 12px) */
@media(min-width:781px) and (max-height:640px){
  html:not(.no-js):not(.no-motion) .split-section:not(.is-static) .split-back{padding-top:min(clamp(18px,2.6vw,34px),3.4vh);padding-bottom:min(clamp(18px,2.6vw,34px),3.4vh)}
  html:not(.no-js):not(.no-motion) .split-section:not(.is-static) .split-back .stat-num{font-size:calc(min(clamp(40px,5vw,72px),9vh) * var(--fsk,1))}
}
/* static fallback: reduced motion, no JS, or the manual motion toggle */
html.no-js .split-section,html.no-motion .split-section,.split-section.is-static{height:auto;padding:clamp(64px,10vw,128px) 0}
html.no-js .split-sticky,html.no-motion .split-sticky,.split-section.is-static .split-sticky{position:static;height:auto;padding:0;overflow:visible}
html.no-js .split-head,html.no-motion .split-head,.split-section.is-static .split-head{opacity:1;transform:none}
html.no-js .split-stage,html.no-motion .split-stage,.split-section.is-static .split-stage{
  opacity:1;aspect-ratio:auto;max-height:none;perspective:none;gap:16px;margin-top:40px;width:min(92vw,1100px);transform:none!important;
}
html.no-js .split-panel,html.no-motion .split-panel,.split-section.is-static .split-panel{transform:none!important;min-height:300px}
html.no-js .split-front,html.no-motion .split-front,.split-section.is-static .split-front{display:none}
html.no-js .split-back,html.no-motion .split-back,.split-section.is-static .split-back{position:relative;transform:none;border-radius:20px}
html.no-js .split-hint,html.no-motion .split-hint,.split-section.is-static .split-hint{display:none}
html.no-js .split-sticky::before,html.no-motion .split-sticky::before,.split-section.is-static .split-sticky::before,
html.no-js .split-sticky::after,html.no-motion .split-sticky::after,.split-section.is-static .split-sticky::after{display:none}
@media(max-width:780px){
  .split-section{height:270vh}
  .split-sticky{--split-cue:8px}
  .split-stage{width:88vw;aspect-ratio:3/4;flex-direction:column;max-height:calc(62vh - var(--split-cue))}
  .split-front img{object-position:center 40%}
  .split-cap{font-size:calc(clamp(20px,6vw,25px) * var(--fsk,1));right:20px;top:14px;max-width:calc(100% - 40px)}
  .split-panel{width:100%}
  .split-back{transform:rotateX(180deg);padding:14px 18px;justify-content:center}
  .split-back .stat-num{font-size:calc(34px * var(--fsk,1));margin-bottom:4px}
  .split-back .stat-kicker{margin-bottom:4px;font-size:calc(13.5px * var(--fsk,1))}   /* round 22: the phone strips are short - 13.5px (was 11.5) */
  .split-back .stat-label{font-size:calc(13px * var(--fsk,1));line-height:1.4}
  .split-back .stat-source{display:none}
  .split-title{font-size:calc(clamp(26px,7vw,34px) * var(--fsk,1))}
  .split-lede{display:none}
  html.no-js .split-stage,html.no-motion .split-stage,.split-section.is-static .split-stage{max-height:none;flex-direction:column}
  html.no-js .split-panel,html.no-motion .split-panel,.split-section.is-static .split-panel{min-height:0;flex:0 0 auto;height:auto} /* round 16b: flex:1 1 0 in an unsized column gave each panel 0px - the three cards drew on top of each other (animations off / iOS Reduce Motion / no JS) */
  html.no-js .split-back,html.no-motion .split-back,.split-section.is-static .split-back{padding:22px}
  html.no-js .split-back .stat-source,html.no-motion .split-back .stat-source,.split-section.is-static .split-back .stat-source{display:block}
}

/* ---------- 08 Founders: two-card accordion (B&W portrait when closed, colour portrait beside the text when open) ---------- */
.spk-accordion{
  display:flex;gap:clamp(14px,2vw,22px);
  height:clamp(520px,60vw,660px);
  margin-top:56px;
}
.spk-card{
  position:relative;flex:1 1 0;min-width:0;height:100%;
  border-radius:24px;overflow:hidden;
  background:var(--teal);color:#fff;
  box-shadow:0 24px 56px rgba(38,70,83,0.18);
  cursor:pointer;outline-offset:4px;
  transition:flex-grow .85s cubic-bezier(.22,1,.36,1),transform .45s var(--ease-out),box-shadow .45s ease;
  will-change:flex-grow;
}
.spk-card.is-open{flex-grow:2.3;cursor:default}
@media(hover:hover){
  .spk-card:not(.is-open):hover{transform:translateY(-4px);box-shadow:0 34px 70px rgba(38,70,83,0.26)}
  .spk-card:not(.is-open):hover .spk-pic--bw img{transform:scale(1.04)}
}
/* photo zone: the whole card when closed, the left 62% when open (the text takes the right side) */
.spk-media{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;transition:right .85s cubic-bezier(.22,1,.36,1)}
.spk-card.is-open .spk-media{right:38%}
.spk-pic,.spk-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.spk-pic img{transition:transform .8s var(--ease-out)}
.spk-pic--bw img{filter:brightness(.94)}
.spk-pic--color{opacity:0;transition:opacity .7s ease}
.spk-card.is-open .spk-pic--color{opacity:1}
/* overlays: a bottom fade for the closed card, a side fade into the teal text panel for the open card */
.spk-grad{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(15,32,40,0.88) 0%,rgba(15,32,40,0.42) 32%,rgba(15,32,40,0) 60%);
  transition:opacity .5s ease;
}
.spk-side{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(to left,var(--teal) 0%,rgba(38,70,83,0.85) 12%,rgba(38,70,83,0) 48%);
  transition:opacity .6s ease;
}
.spk-card.is-open .spk-grad{opacity:0}
.spk-card.is-open .spk-side{opacity:1}
/* text */
.spk-info{
  position:absolute;right:0;left:0;bottom:0;z-index:2;
  padding:clamp(20px,3vw,32px);
  transition:opacity .4s ease;
}
.spk-card.is-open .spk-info{
  left:auto;top:0;width:44%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(22px,3vw,36px) clamp(22px,3vw,36px) clamp(26px,3.4vw,40px) 6px;
}
.spk-role{font-size:calc(12px * var(--fsk,1));letter-spacing:0.04em;color:var(--gold);font-weight:700;margin-bottom:8px}
.spk-name{font-family:var(--font-display);font-weight:700;font-size:calc(clamp(30px,3.4vw,46px) * var(--fsk,1));line-height:1.05;margin:0 0 10px;color:#fff}
.spk-toggle{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit;border-radius:6px}
.spk-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.spk-card.is-open .spk-toggle{cursor:default}
.spk-bio{font-size:calc(14.5px * var(--fsk,1));line-height:1.6;color:rgba(255,255,255,0.86);max-width:440px;margin:0}
.spk-wa{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;align-self:flex-start;max-width:100%;
  font-size:calc(clamp(11.5px,1.05vw,13px) * var(--fsk,1));font-weight:700;color:var(--gold);white-space:nowrap;
  border-bottom:1px solid rgba(212,175,55,0.5);padding-bottom:2px;
}
.spk-wa:hover{color:#f3dd8f;border-color:#f3dd8f}
.spk-card:not(.is-open) .spk-bio,.spk-card:not(.is-open) .spk-wa{display:none}
.spk-card:not(.is-open) .spk-name{font-size:calc(clamp(22px,2.4vw,32px) * var(--fsk,1))}
.spk-card:not(.is-open) .spk-role{font-size:calc(11px * var(--fsk,1))}
/* round 19: the details sit in .spk-more (bio + WhatsApp, the region each toggle's aria-controls
   names); on desktop it is laid out exactly like the two lines it wraps. The panel copy of the
   name (.spk-dname, aria-hidden) is for the phone layout only. */
.spk-more{display:flex;flex-direction:column}
.spk-card:not(.is-open) .spk-more,.spk-dname{display:none}
/* phones (round 19): Ron and Aviad side by side - two portrait cards (the selected one in colour
   inside a gold ring, the other in B&W) and, under them, the selected person's role, name, bio and
   WhatsApp link across the full width. Both cards sit in one grid row: each card's info panel is
   twice a column wide and starts at the right edge, so the two panels overlap exactly and the
   row is as tall as the longer one (switching never moves the page). The OPEN card's panel
   paints the teal box (so each person's text sits on its own background) and is stacked under
   the closed card's transparent panel, so the outgoing text stays visible while it fades out.
   The closed card's text is hidden (visibility), so only one set of details is in the
   accessibility tree. The name button covers its whole portrait. */
@media(max-width:780px){
  .spk-accordion{
    --spk-gap:12px;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--spk-gap);
    height:auto;max-width:520px;margin:36px auto 0;
  }
  .spk-accordion .spk-card,.spk-accordion .spk-card.is-open{
    position:relative;display:flex;flex-direction:column;flex:none;height:auto;min-width:0;
    border-radius:0;overflow:visible;background:none;box-shadow:none;transform:none!important;
    cursor:default;pointer-events:none;will-change:auto;transition:none;
  }
  /* portrait */
  .spk-accordion .spk-card .spk-media,.spk-accordion .spk-card.is-open .spk-media{
    position:relative;top:auto;right:auto;bottom:auto;left:auto;flex:none;
    aspect-ratio:4/5;height:auto;border-radius:18px;overflow:hidden;background:var(--teal);
    box-shadow:0 12px 28px rgba(38,70,83,0.16);pointer-events:auto;cursor:pointer;transition:none;
  }
  .spk-accordion .spk-card.is-open .spk-media{box-shadow:0 0 0 3px var(--gold),0 12px 28px rgba(38,70,83,0.2);cursor:default}
  /* a mouse in a narrow window: the desktop hover (card lift + shadow, photo zoom) would shade the
     card's square, mostly transparent box - here the cue is a deeper shadow on the portrait only */
  .spk-accordion .spk-card:not(.is-open):hover{box-shadow:none}
  .spk-accordion .spk-card:not(.is-open):hover .spk-pic--bw img{transform:none}
  .spk-accordion .spk-pic,.spk-accordion .spk-pic img{object-position:50% 18%}
  .spk-accordion .spk-pic img,.spk-accordion .spk-pic--color{transition:none}
  /* the dark band under the name (the photos end in a black T-shirt) is painted by the name button
     itself (below), so the text and its scrim are one box */
  .spk-accordion .spk-grad,.spk-accordion .spk-side{display:none}
  /* details panel */
  .spk-accordion .spk-card .spk-info,.spk-accordion .spk-card.is-open .spk-info{
    position:static;top:auto;right:auto;bottom:auto;left:auto;flex:1 0 auto;display:block;
    width:calc(200% + var(--spk-gap));margin-top:16px;padding:22px 20px 24px;
    border-radius:18px;text-align:center;pointer-events:none;transition:none;
    z-index:1;background:none;box-shadow:none;
  }
  /* z-index works on a static flex item (and keeps the name button's containing block = the card) */
  .spk-accordion .spk-card.is-open .spk-info{z-index:0;background:var(--teal);box-shadow:0 20px 44px rgba(38,70,83,0.16)}
  .spk-accordion .spk-card + .spk-card .spk-info{margin-right:calc(-100% - var(--spk-gap))}
  .spk-accordion .spk-card .spk-role{font-size:calc(12.5px * var(--fsk,1));margin-bottom:6px}
  .spk-accordion .spk-card .spk-more{display:block}
  .spk-accordion .spk-card .spk-dname{display:block;font-family:var(--font-display);font-weight:700;font-size:calc(30px * var(--fsk,1));line-height:1.1;color:#fff;margin-bottom:12px}
  .spk-accordion .spk-card .spk-bio{display:block;max-width:none;margin:0}
  .spk-accordion .spk-card .spk-wa{display:inline-flex;margin-top:16px}
  .spk-accordion .spk-card:not(.is-open) .spk-role,.spk-accordion .spk-card:not(.is-open) .spk-more{visibility:hidden;opacity:0}
  .spk-accordion .spk-card.is-open .spk-role,.spk-accordion .spk-card.is-open .spk-more{visibility:visible;opacity:1;pointer-events:auto}
  /* the name: a real button laid over its whole portrait (the tap target), label at the bottom */
  .spk-accordion .spk-card .spk-name,.spk-accordion .spk-card:not(.is-open) .spk-name,.spk-accordion .spk-card.is-open .spk-name{
    position:static;margin:0;font-size:calc(clamp(20px,6.2vw,26px) * var(--fsk,1));line-height:1.1;
  }
  .spk-accordion .spk-toggle{--spk-scrim:linear-gradient(to top,rgba(15,32,40,0.82) 0%,rgba(15,32,40,0.4) 22%,rgba(15,32,40,0) 42%)}
  .spk-accordion .spk-toggle,.spk-accordion .spk-card.is-open .spk-toggle{
    position:absolute;top:0;right:0;z-index:2;width:100%;aspect-ratio:4/5;
    display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
    padding:0 8px 14px;border-radius:18px;text-align:center;overflow-wrap:break-word;
    background:var(--spk-scrim);
    color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.45);pointer-events:auto;cursor:pointer;
  }
  .spk-accordion .spk-card.is-open .spk-toggle{cursor:default}
  .spk-accordion .spk-toggle:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
  /* the louder focus mode paints a yellow fill - it would cover the whole portrait */
  html.a11y-focus .spk-accordion .spk-toggle:focus-visible{background:var(--spk-scrim)!important;color:#fff!important}
  /* high contrast: a solid band under the names */
  html.a11y-contrast .spk-accordion .spk-toggle{--spk-scrim:linear-gradient(to top,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.75) 26%,rgba(0,0,0,0) 46%)}
  html.a11y-contrast .spk-accordion .spk-card.is-open .spk-media{box-shadow:0 0 0 3px #000}
}
@media(max-width:780px) and (hover:hover){
  .spk-accordion .spk-card:not(.is-open):hover .spk-media{box-shadow:0 18px 38px rgba(38,70,83,0.3)}
}
/* the switch: a short crossfade of the details and the colour / B&W portraits (motion allowed only) */
@media(max-width:780px) and (prefers-reduced-motion:no-preference){
  html:not(.no-motion) .spk-accordion .spk-card .spk-role,html:not(.no-motion) .spk-accordion .spk-card .spk-more{transition:opacity .15s ease,visibility 0s linear .15s}
  html:not(.no-motion) .spk-accordion .spk-card.is-open .spk-role,html:not(.no-motion) .spk-accordion .spk-card.is-open .spk-more{transition:opacity .25s ease .1s,visibility 0s}
  html:not(.no-motion) .spk-accordion .spk-card .spk-pic--color{transition:opacity .3s ease}
  html:not(.no-motion) .spk-accordion .spk-card .spk-media{transition:box-shadow .3s ease}
}
/* round L6: while text is enlarged the desktop accordion (fixed height, text anchored to the
   bottom) clipped the open card's name and role - above 780px it uses the old vertical layout
   (phones keep the side-by-side layout above, which holds x1.5) */
@media(min-width:781px){
  html[class*="a11y-fs-"] .spk-accordion{flex-direction:column;height:auto;gap:14px;max-width:520px;margin-left:auto;margin-right:auto}
  html[class*="a11y-fs-"] .spk-card,html[class*="a11y-fs-"] .spk-card.is-open{flex:none;height:auto;display:flex;flex-direction:column;transform:none!important;cursor:pointer}
  html[class*="a11y-fs-"] .spk-card.is-open{cursor:default}
  html[class*="a11y-fs-"] .spk-media,html[class*="a11y-fs-"] .spk-card.is-open .spk-media{position:relative;top:auto;bottom:auto;left:auto;right:auto;height:172px;transition:height .7s cubic-bezier(.22,1,.36,1)}
  html[class*="a11y-fs-"] .spk-card.is-open .spk-media{height:min(82vw,420px)}
  html[class*="a11y-fs-"] .spk-card:not(.is-open) .spk-pic,html[class*="a11y-fs-"] .spk-card:not(.is-open) .spk-pic img{object-position:50% 36%}
  html[class*="a11y-fs-"] .spk-card.is-open .spk-pic,html[class*="a11y-fs-"] .spk-card.is-open .spk-pic img{object-position:50% 20%}
  html[class*="a11y-fs-"] .spk-card:not(.is-open) .spk-grad{opacity:0}
  html[class*="a11y-fs-"] .spk-card:not(.is-open) .spk-side{opacity:1;background:linear-gradient(to left,var(--teal) 0%,rgba(38,70,83,0.92) 30%,rgba(38,70,83,0) 62%)}
  html[class*="a11y-fs-"] .spk-card.is-open .spk-side{display:none}
  html[class*="a11y-fs-"] .spk-card.is-open .spk-grad{opacity:1;background:linear-gradient(to top,rgba(38,70,83,0.55) 0%,rgba(38,70,83,0) 28%)}
  html[class*="a11y-fs-"] .spk-card:not(.is-open) .spk-info{position:absolute;right:0;left:auto;top:0;bottom:0;width:46%;display:flex;flex-direction:column;justify-content:center;padding:16px 18px}
  html[class*="a11y-fs-"] .spk-card.is-open .spk-info{position:static;width:auto;display:block;padding:18px 20px 22px}
  html[class*="a11y-fs-"] .spk-card.is-open .spk-name{font-size:calc(32px * var(--fsk,1))}
  html[class*="a11y-fs-"] .spk-card .spk-bio{max-width:none}
  html[class*="a11y-fs-"] .spk-card.is-open .spk-more{display:block}
}
html.no-motion .spk-card,html.no-motion .spk-media,html.no-motion .spk-pic,html.no-motion .spk-pic img,html.no-motion .spk-grad,html.no-motion .spk-side,html.no-motion .spk-info{transition:none}

/* ---------- Trusted by: client logos ---------- */
.trusted{background:var(--white)}
.logo-rows{margin-top:44px;display:grid;gap:14px}
.logo-row{
  overflow:hidden;direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logo-track{display:flex;gap:14px;width:max-content;animation:logoFlow 64s linear infinite}
.logo-row.reverse .logo-track{animation-direction:reverse;animation-duration:74s}
.logo-row:nth-child(3) .logo-track{animation-duration:69s}
.logo-row:nth-child(4) .logo-track{animation-duration:82s}
@media(hover:hover){.logo-row:hover .logo-track{animation-play-state:paused}}
@keyframes logoFlow{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.logo-tile{
  flex:0 0 auto;
  width:clamp(104px,10.6vw,132px);height:clamp(70px,7.2vw,88px); /* round 12: ~20% smaller, 4 rows */
  border-radius:14px;
  background:var(--cream);
  border:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;
  padding:10px 12px;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
@media(hover:hover){.logo-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--hair-strong)}}
.logo-tile img{width:100%;height:100%;object-fit:contain}
.trusted-note{
  margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center;
  font-size:calc(14px * var(--fsk,1));font-weight:700;color:rgba(38,70,83,0.75);
}
.trusted-note span{display:inline-flex;align-items:center;gap:8px}
.trusted-note span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ---------- 07 Services: vertical timeline (a gold line fills as you scroll; image on one side, text on the other) ---------- */
.tl{position:relative;list-style:none;margin:56px auto 0;padding:8px 0;max-width:1080px}
.tl::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--hair-strong);border-radius:2px}
.tl-line{position:absolute;top:0;left:50%;width:2px;margin-left:-1px;height:0;max-height:100%;background:var(--gold);border-radius:2px;transition:height .3s linear}
.tl-step{
  position:relative;display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;
  gap:0 clamp(12px,2.5vw,32px);padding:clamp(24px,3.5vw,44px) 0;
  opacity:0.28;transform:translateY(18px);
  transition:opacity .7s ease,transform .7s var(--ease-out);
}
.tl-step.is-on{opacity:1;transform:none}
.tl-media{grid-column:1;grid-row:1}
.tl-body{grid-column:3;grid-row:1}
.tl-step:nth-child(even) .tl-media{grid-column:3}
.tl-step:nth-child(even) .tl-body{grid-column:1}
.tl-node{
  grid-column:2;grid-row:1;justify-self:center;
  width:54px;height:54px;border-radius:50%;
  background:var(--cream);border:2px solid var(--hair-strong);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:calc(15px * var(--fsk,1));letter-spacing:0.06em;
  box-shadow:0 0 0 6px var(--cream);
  transition:background .45s ease,border-color .45s ease,color .45s ease,box-shadow .45s ease,transform .45s var(--ease-out);
}
.tl-step.is-on .tl-node{background:var(--gold);border-color:var(--gold);color:var(--teal);box-shadow:0 0 0 6px var(--cream),0 0 0 12px rgba(212,175,55,0.18);transform:scale(1.06)}
.tl-media{
  border-radius:22px;overflow:hidden;aspect-ratio:16/10;background:var(--teal);
  box-shadow:0 22px 50px rgba(38,70,83,0.16);
  transition:transform .6s var(--ease-out),box-shadow .6s ease;
}
.tl-media picture,.tl-media img{display:block;width:100%;height:100%;object-fit:cover}
.tl-step.is-on .tl-media{box-shadow:0 28px 60px rgba(38,70,83,0.22)}
@media(hover:hover){.tl-media:hover{transform:translateY(-4px)}}
.tl-body{padding:0 6px}
.tl-kicker{font-family:var(--font-display);font-weight:700;font-size:calc(12.5px * var(--fsk,1));letter-spacing:0.08em;color:var(--gold-text)}
.tl-title{font-family:var(--font-display);font-weight:700;font-size:calc(clamp(22px,2.3vw,30px) * var(--fsk,1));line-height:1.2;margin:8px 0 12px;color:var(--ink)}
.tl-desc{font-size:calc(16px * var(--fsk,1));line-height:1.7;color:#3a3a3a;margin:0;max-width:460px}
.tl-step:nth-child(odd) .tl-body{text-align:right}
.tl-step:nth-child(even) .tl-body{text-align:right}
@media(max-width:760px){
  .tl{margin-top:40px}
  .tl::before,.tl-line{left:23px;right:auto;margin-left:0}
  .tl-step,.tl-step:nth-child(even){grid-template-columns:1fr;gap:14px 0;padding:22px 0 26px 64px;transform:translateX(14px)}
  .tl-step.is-on{transform:none}
  .tl-media,.tl-step:nth-child(even) .tl-media,.tl-body,.tl-step:nth-child(even) .tl-body{grid-column:1}
  .tl-body{grid-row:1;padding:0}
  .tl-media{grid-row:2;aspect-ratio:4/3;transform:scale(.96);transition:transform .8s var(--ease-out),box-shadow .6s ease}
  .tl-step.is-on .tl-media{transform:none}
  .tl-node{position:absolute;left:0;right:auto;top:22px;width:48px;height:48px;font-size:calc(14px * var(--fsk,1));justify-self:auto;grid-column:auto;grid-row:auto}
  .tl-desc{max-width:none;font-size:calc(15px * var(--fsk,1))}
  .tl-title{margin-top:6px}
}
html.no-motion .tl-line,html.no-motion .tl-node,html.no-motion .tl-media,html.no-motion .tl-step{transition:none}
html.no-motion .tl-step{opacity:1;transform:none}

/* ---------- Dark showcase sections (05 Instagram ring, 10 testimonials) ---------- */
.ring-section,.testimonial-section{background:var(--dark);color:var(--cream);overflow:hidden}
.ring-section .h-section,.testimonial-section .h-section{color:#fff}
.ring-section .h-section .gold,.testimonial-section .h-section .gold{color:var(--gold)}
.ring-section .lede,.testimonial-section .lede{color:rgba(250,243,224,0.78)}

/* ---------- 3D ring carousel (cards on a rotating cylinder; used for the Instagram pages) ---------- */
.ring-stage{
  --ring-w:clamp(176px,18vw,236px);
  --ring-ratio:1.7778;
  --ring-h:calc(var(--ring-w) * var(--ring-ratio));
  --ring-persp:1200px;
  position:relative;margin-top:44px;
  height:calc(var(--ring-h) + 64px);
  touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;cursor:grab;
}
.ring-stage--ig{--ring-ratio:2.6811;--ring-w:clamp(150px,14vw,190px)}
.ring-stage.is-dragging{cursor:grabbing}
.ring-glow{
  position:absolute;left:50%;top:50%;width:min(80vw,760px);height:82%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(212,175,55,0.32),rgba(212,175,55,0.08) 55%,rgba(212,175,55,0));
  filter:blur(24px);
}
.ring-scene{position:absolute;inset:0;perspective:var(--ring-persp);perspective-origin:50% 46%}
.ring{
  position:absolute;left:50%;top:50%;width:var(--ring-w);height:var(--ring-h);
  margin:calc(var(--ring-h) / -2) 0 0 calc(var(--ring-w) / -2);
  transform-style:preserve-3d;will-change:transform;
}
.ring-card{
  position:absolute;inset:0;border-radius:22px;overflow:hidden;
  background:#000;color:#fff;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 26px 54px rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.12);
  transition:border-color .4s ease;
}
.ring-card.is-front{border-color:rgba(212,175,55,0.6)}
.ring-shade{position:absolute;inset:0;z-index:4;background:var(--dark);opacity:0;pointer-events:none}
.ring-card--img picture,.ring-card--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.ring-cap{
  position:absolute;right:0;left:0;bottom:0;z-index:3;padding:38px 16px 14px;color:#fff;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,0.78),rgba(0,0,0,0));
}
.ring-cap b{display:block;font-family:var(--font-display);font-size:calc(15px * var(--fsk,1));line-height:1.25}
.ring-cap span{display:block;font-size:calc(12.5px * var(--fsk,1));color:rgba(255,255,255,0.8)}
.ring-nav{display:flex;justify-content:center;gap:12px;margin-top:6px}
.ring-btn{
  width:46px;height:46px;border-radius:50%;
  border:1.5px solid rgba(250,243,224,0.45);background:transparent;color:var(--cream);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.ring-btn:hover,.ring-btn:focus-visible{background:var(--cream);color:var(--teal);border-color:var(--cream)}
.ring-note{margin-top:16px;text-align:center;font-size:calc(13px * var(--fsk,1));color:rgba(250,243,224,0.6)}
@media(max-width:720px){
  .ring-stage{--ring-w:min(176px,46vw);--ring-persp:900px;margin-top:32px}
  .ring-stage--ig{--ring-w:min(172px,42vw)}
  .ring-note{padding:0 var(--pad)}
}
/* no JavaScript: a plain scrolling row of the same cards */
html.no-js .ring-stage{height:auto;overflow-x:auto;cursor:auto}
html.no-js .ring-glow,html.no-js .ring-shade,html.no-js .ring-nav{display:none}
html.no-js .ring-scene{position:static;perspective:none}
html.no-js .ring{position:static;display:flex;gap:16px;width:auto;height:var(--ring-h);margin:0;padding:0 var(--pad);transform:none}
html.no-js .ring-card{position:relative;flex:0 0 var(--ring-w);transform:none}
html.no-motion .ring-card,html.no-motion .ring-btn{transition:none}

/* round 19: every Instagram card is a real button that opens the gallery (#igx, below). A drag never opens it
   (site.js cancels the click after any travel over 6px). The gold magnifier badge shows on the front card only. */
.ring-open{
  position:absolute;inset:0;z-index:5;display:block;width:100%;height:100%;
  padding:0;border:0;border-radius:inherit;background:transparent;color:var(--dark);
  cursor:zoom-in;-webkit-tap-highlight-color:transparent;
}
.ring-stage.is-dragging .ring-open{cursor:grabbing}
.ring-open:focus-visible{outline:3px solid #f3dd8f;outline-offset:-6px;border-radius:20px}
.ring-zoom{
  position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;   /* top-right: over Instagram's menu icon, clear of the avatar and the caption */
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:var(--gold);color:var(--dark);box-shadow:0 4px 14px rgba(0,0,0,0.45);
  opacity:0;transform:scale(0.8);transition:opacity .3s ease,transform .3s ease;
}
.ring-card.is-front .ring-zoom,.ring-open:focus-visible .ring-zoom{opacity:1;transform:none}
@media(max-width:720px){.ring-zoom{top:8px;right:8px;width:30px;height:30px}.ring-zoom svg{width:16px;height:16px}}   /* a 164px card on a phone */
html.no-js .ring-open{display:none}
@media(prefers-reduced-motion:reduce){.ring-zoom{transition:none;transform:none}}
html.no-motion .ring-zoom{transition:none;transform:none}
html.a11y-contrast .ring-zoom{background:#ffe98a;color:#000;box-shadow:0 0 0 2px #000}
/* the menu's loud focus mode paints a yellow background on the focused element - on a full-card button that would hide the page */
html.a11y-focus .ring-open:focus-visible{background:transparent!important;outline:4px solid #b3261e!important;outline-offset:-7px!important;box-shadow:inset 0 0 0 11px #fff8b0}

/* ---------- 06 Instagram gallery (round 19): a native modal <dialog> over the whole screen. The tall profile
   image scrolls inside a centred column - full width minus a 12px gutter on phones, 560px on desktop. ---------- */
.igx{
  position:fixed;inset:0;z-index:300;                    /* z-index only matters without showModal(); a modal dialog sits in the top layer */
  width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:#081116;color:var(--cream);overflow:hidden;
}
.igx:not([open]){display:none}   /* not only the browser's own <dialog> style: without native <dialog> a closed one would cover the site */
.igx[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;animation:igx-in .2s ease-out}
.igx::backdrop{background:rgba(8,17,22,0.6)}
@keyframes igx-in{from{opacity:0}to{opacity:1}}
.igx-head,.igx-nav,.igx-fig{width:min(560px,calc(100vw - 24px))}
.igx-head{display:flex;align-items:center;gap:12px;padding:max(10px,env(safe-area-inset-top)) 0 8px}
.igx-title{flex:1 1 auto;min-width:0;margin:0;line-height:1.3;text-align:right}
.igx-title b{display:block;font-family:var(--font-display);font-size:calc(18px * var(--fsk,1));color:#fff}
.igx-title span{display:block;font-size:calc(13.5px * var(--fsk,1));color:rgba(250,243,224,0.82)}
.igx-close{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(250,243,224,0.45);background:transparent;color:var(--cream);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.igx-close:hover,.igx-close:focus-visible{background:var(--cream);color:var(--teal);border-color:var(--cream)}
.igx-scroll{
  justify-self:stretch;min-height:0;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom;
  scrollbar-color:rgba(250,243,224,0.45) transparent;
  scrollbar-gutter:stable both-edges;                  /* a classic (Windows) scrollbar takes the same width on both sides: the image stays centred under the title */
}
.igx-fig{margin:0 auto;padding-bottom:12px;max-width:100%}   /* max-width: a narrow desktop window with a classic scrollbar */
.igx-fig picture,.igx-fig img{display:block;width:100%;height:auto}
.igx-fig img{border-radius:14px;background:#0b1014;transition:opacity .2s ease}
/* while the next page's file loads the image is hidden (never the previous client under the new name); the frame stays */
.igx-fig picture{border-radius:14px;background:rgba(250,243,224,0.07)}
.igx-fig.is-loading img{opacity:0;transition:none}
.igx-nav{display:flex;align-items:center;justify-content:center;gap:18px;padding:8px 0 max(10px,env(safe-area-inset-bottom))}
.igx-count{min-width:4.5em;text-align:center;font-size:calc(14px * var(--fsk,1));color:rgba(250,243,224,0.82);font-variant-numeric:tabular-nums}
.igx :focus-visible{outline-color:#f3dd8f}
.igx-scroll:focus-visible{outline-offset:-4px;border-radius:0}
@media(prefers-reduced-motion:reduce){.igx[open]{animation:none}.igx-fig img{transition:none}}
html.no-motion .igx[open],html.no-motion .igx-close,html.no-motion .igx-fig img{animation:none;transition:none}
/* the page behind stays put while the gallery is open (site.js pins <body> at the current scroll offset) */
html.igx-lock{overflow:hidden}   /* no scrollbar-gutter: the opaque dialog hides the reflow, a reserved gutter showed as a cream stripe */
html.igx-lock body{position:fixed;left:0;right:0;overflow:hidden}
html.a11y-contrast .igx{background:#000}
html.a11y-contrast .igx-title span,html.a11y-contrast .igx-count{color:#fff}
html.a11y-contrast .igx-close{border-color:#fff}

/* ---------- Section CTAs that jump to the lead form ---------- */
.section-cta{display:flex;justify-content:center;margin-top:40px}
.btn-lead svg{margin-right:2px}
@media(max-width:640px){.section-cta{margin-top:30px}.section-cta .btn{width:100%}}

/* ---------- 12 Contact: lead form (FormSubmit) ---------- */
.lead{
  position:relative;z-index:1;
  max-width:760px;margin:56px auto 0;text-align:right;
  background:rgba(250,243,224,0.06);border:1px solid rgba(250,243,224,0.16);
  border-radius:24px;padding:clamp(22px,3.4vw,38px);
}
.lead-head{margin-bottom:22px}
.lead-title{font-family:var(--font-display);font-weight:700;font-size:calc(clamp(22px,2.4vw,30px) * var(--fsk,1));line-height:1.2;color:#fff;margin:0 0 8px}
.lead-intro{margin:0;font-size:calc(15.5px * var(--fsk,1));line-height:1.6;color:rgba(250,243,224,0.8)}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.lead-grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.lead-grid--3{grid-template-columns:1fr 1fr}}
.lead-field{display:flex;flex-direction:column;gap:6px;font-size:calc(13.5px * var(--fsk,1));font-weight:700;color:rgba(250,243,224,0.88)}
.lead-field input,.lead-field select{
  width:100%;min-height:48px;padding:10px 14px;border-radius:12px;
  border:1px solid rgba(250,243,224,0.55);background:rgba(15,32,40,0.4);color:#fff;
  font-family:var(--font-body);font-weight:400;font-size:calc(15px * var(--fsk,1));
  transition:border-color .2s ease,background .2s ease;
}
.lead-field input::placeholder{color:rgba(250,243,224,0.7)} /* 5.95:1 on the input background */
.lead-field input:focus,.lead-field select:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold);background:rgba(15,32,40,0.55)}
.lead-field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(250,243,224,0.8) 50%),linear-gradient(135deg,rgba(250,243,224,0.8) 50%,transparent 50%);background-position:calc(14px + 5px) 50%,14px 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-left:34px}
.lead-field select option{color:var(--ink);background:#fff}
.lead-field.is-invalid input{border-color:#ffb4b4;border-width:2px;background:rgba(120,30,30,0.25)}
.lead-field .field-error{display:none;font-size:calc(12.5px * var(--fsk,1));font-weight:400;color:#ffc9c9;line-height:1.4}
.lead-field.is-invalid .field-error{display:block}
.lead-field.is-invalid > span::after{content:" ⚠";font-size:1.05em} /* shape, not just colour - survives greyscale */
.lead-req{font-weight:400;opacity:.85}
.lead-submit{margin-top:22px;width:100%}
.lead-status{margin:12px 0 0;font-size:calc(14px * var(--fsk,1));line-height:1.5;min-height:1.5em;color:#f3dd8f;text-align:center} /* 6.37:1 (was --gold = 4.09:1) */
.lead-status a{color:#fff;text-decoration:underline}
.lead-privacy{margin:10px 0 0;font-size:calc(12.5px * var(--fsk,1));color:rgba(250,243,224,0.85);text-align:center} /* 6.17:1 (was 0.6 = 3.96:1) */
.lead-honey{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0}
.lead-thanks{text-align:center;padding:26px 0 8px}
.lead-thanks strong{display:block;font-family:var(--font-display);font-size:calc(clamp(22px,2.4vw,30px) * var(--fsk,1));color:#fff;margin-bottom:8px}
.lead-thanks span{font-size:calc(15.5px * var(--fsk,1));color:rgba(250,243,224,0.85)}
.lead.is-sent .lead-head,.lead.is-sent .lead-grid,.lead.is-sent .lead-submit,.lead.is-sent .lead-privacy,.lead.is-sent .lead-status{display:none}
.lead.is-sending .lead-submit{opacity:0.7;pointer-events:none}
@media(max-width:620px){
  .lead{margin-top:44px;border-radius:20px}
  .lead-grid{grid-template-columns:1fr;gap:12px}
}

/* ---------- FAQ ---------- */
.ask-heading{
  font-family:var(--font-display);font-weight:700;
  font-size:calc(clamp(20px,2.2vw,28px) * var(--fsk,1));line-height:1.3;
  color:var(--ink);margin-bottom:18px;
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
}
.ask-heading strong{color:var(--live-text)}
.ask-heading-arrow{color:var(--gold);flex:0 0 auto;animation:askArrowBob 1.6s ease-in-out infinite}
@keyframes askArrowBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.ask-wrap{max-width:680px;margin:40px 0 48px 0}
.ask{
  position:relative;
  display:flex;align-items:center;gap:12px;
  background:var(--white);
  border:1.5px solid rgba(38,70,83,0.62); /* 3.51:1 on white, 3.17:1 on the cream page (1.4.11) */
  border-radius:16px;
  padding:8px 8px 8px 18px;
  box-shadow:0 8px 24px rgba(38,70,83,0.08);
  transition:border-color .3s ease,box-shadow .3s ease;
}
.ask:focus-within{
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(212,175,55,0.18),0 10px 32px rgba(212,175,55,0.22);
}
.ask-icon{
  width:42px;height:42px;flex:0 0 auto;
  border-radius:11px;
  background:linear-gradient(135deg,#D4AF37,#b8902a);
  color:var(--teal);
  display:flex;align-items:center;justify-content:center;
  animation:askPulse 2.6s ease-in-out infinite;
}
@keyframes askPulse{0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,0.45)}50%{box-shadow:0 0 0 10px rgba(212,175,55,0)}}
.ask-form{display:flex;flex:1 1 auto;min-width:0;align-items:center;gap:8px;margin:0} /* min-width:0 - without it the input cannot shrink and the page scrolls sideways at 320px */
.ask-input:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ask-input{
  flex:1 1 auto;min-width:0;
  background:transparent;border:none;
  font:600 calc(16px * var(--fsk,1))/1.4 var(--font-body);color:var(--ink);
  padding:8px 6px;direction:rtl;
}
.ask-input::placeholder{color:rgba(38,70,83,0.72);font-weight:400} /* 4.52:1 on white */
.ask-submit{
  flex:0 0 auto;
  width:42px;height:42px;border-radius:11px;
  background:var(--teal);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;
  transition:background .2s ease,transform .15s ease;
}
.ask-submit:hover{background:var(--live-text)}
.ask-submit:active{transform:scale(0.94)}
.ask-hint{font-size:calc(13px * var(--fsk,1));color:rgba(38,70,83,0.75);margin-top:10px;font-weight:400}
.faq-title{margin-top:48px}
.faq-list{margin-top:40px;border-top:1px solid var(--hair);max-width:900px}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-q{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 0;
  text-align:right;
  font-family:var(--font-display);font-weight:700;
  font-size:calc(clamp(17px,1.6vw,21px) * var(--fsk,1));
  color:var(--ink);
  transition:color .2s ease;
}
.faq-q:hover{color:var(--live-text)}
.faq-chevron{
  flex-shrink:0;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--hair-strong);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s ease,background .3s ease,color .3s ease,border-color .3s ease;
  color:var(--teal);
}
.faq-item.open .faq-chevron{
  transform:rotate(180deg);
  background:var(--teal);
  color:var(--cream);
  border-color:var(--teal);
}
/* height animation without measuring: grid-rows 0fr -> 1fr */
.faq-a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .4s ease;
}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s .4s}
.faq-item.open .faq-a > div{visibility:visible;transition-delay:0s}
.faq-a-inner{
  padding:0 0 26px 60px;
  font-size:calc(16px * var(--fsk,1));line-height:1.75;color:#3a3a3a;
  max-width:820px;
}
@media(max-width:640px){.faq-a-inner{padding-left:0}}

/* ---------- Final CTA ---------- */
.final-cta{
  background:var(--teal);
  color:var(--cream);
  padding:clamp(80px,12vw,160px) 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.final-cta::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 20%,rgba(212,175,55,0.08),transparent 50%),
    radial-gradient(circle at 80% 80%,rgba(42,157,143,0.12),transparent 50%);
  pointer-events:none;
}
.final-cta-headline{
  font-family:var(--font-display);font-weight:700;
  font-size:calc(clamp(40px,6vw,80px) * var(--fsk,1));
  line-height:1.06;letter-spacing:0;
  margin-bottom:24px;
}
.final-cta-sub{
  font-size:calc(clamp(17px,1.6vw,21px) * var(--fsk,1));
  line-height:1.55;max-width:680px;margin:0 auto 40px;
  color:rgba(250,243,224,0.85);
}
.final-cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:24px}
.final-cta-actions .btn-fill{background:var(--cream);color:var(--teal)}
.final-cta-actions .btn-fill:hover{background:var(--white)}
.final-cta-note{font-size:calc(13px * var(--fsk,1));letter-spacing:0.02em;color:rgba(250,243,224,0.7)}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:rgba(250,243,224,0.75);padding:40px 0 calc(96px + env(safe-area-inset-bottom,0px))} /* round 16b: the fixed pill (24px + 46px desktop, 16px + ~50px phones) covered the footer links at max scroll */
.footer-inner{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  font-size:calc(13px * var(--fsk,1));
}
.footer-inner a{color:rgba(250,243,224,0.9);transition:color .2s ease}
.footer-inner a:hover{color:var(--gold)}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}

/* Motion toggle (user-operable pause for all auto-playing motion, WCAG 2.2.2) */
.motion-toggle{
  display:inline-flex;align-items:center;gap:8px;
  font-size:calc(13px * var(--fsk,1));font-weight:700;color:rgba(250,243,224,0.9);
  border:1px solid rgba(250,243,224,0.3);border-radius:999px;
  padding:6px 12px;transition:border-color .2s ease,color .2s ease;
}
.motion-toggle:hover{border-color:var(--gold);color:var(--gold)}
.motion-toggle .ico-pause{display:block}
.motion-toggle .ico-play{display:none}
html.no-motion .motion-toggle .ico-pause{display:none}
html.no-motion .motion-toggle .ico-play{display:block}

/* ---------- Floating WhatsApp ---------- */
/* round 12: the floating pill IS the main CTA now (gold, "מתחילים לעבוד ללא התחייבות", WhatsApp badge, soft breathing glow) */
.float-wa{
  position:fixed;
  z-index:90;
  bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);   /* round 14: centred on desktop too */
  background:var(--gold);color:var(--teal);
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 18px 7px 8px;   /* round 13b: 46px tall with the 32px badge */
  border-radius:999px;
  font-weight:700;font-size:calc(14px * var(--fsk,1));
  box-shadow:0 10px 28px rgba(212,175,55,0.38);
  animation:float-breathe 3.4s ease-in-out infinite;
  transition:background .25s ease;
}
.float-wa:hover,.float-wa:focus-visible{background:#e8c14b;animation-play-state:paused;box-shadow:0 16px 40px rgba(212,175,55,0.6)}
@keyframes float-breathe{0%,100%{box-shadow:0 10px 28px rgba(212,175,55,0.38)}50%{box-shadow:0 16px 42px rgba(212,175,55,0.62)}}
html.no-motion .float-wa{animation:none}
.float-wa-ico{flex:0 0 auto;box-sizing:content-box;width:24px;height:24px;padding:4px;border-radius:50%;background:#25d366;color:#fff;display:block} /* round 13b: bold WhatsApp mark (ring + tail + handset) on the green disc, 32px */
@media(max-width:640px){
  .float-wa{left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));font-size:calc(13.5px * var(--fsk,1));padding:9px 16px 9px 10px;max-width:92vw;white-space:nowrap}
}

/* ---------- Canvas FX layer (selected sections only) ---------- */
section.fx-host{position:relative}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
section.fx-host > *:not(.fx-canvas){position:relative;z-index:1}

/* ---------- Line-mask reveal (manifesto + contact) ---------- */
.line-mask{display:block;overflow:hidden;padding-bottom:0.12em;margin-bottom:-0.12em}
.line-mask > .line-mask-inner{
  display:inline-block;
  transform:translateY(0);
  transition:transform 1.1s cubic-bezier(.2,.75,.25,1);
}
html.js .line-mask:not(.is-revealed) > .line-mask-inner{transform:translateY(115%)}
.line-mask-p{display:block;overflow:hidden;padding-bottom:0.12em}
.line-mask-p > .line-mask-inner{
  display:block;
  transform:translateY(0);
  transition:transform 1.1s cubic-bezier(.2,.75,.25,1);
}
html.js .line-mask-p:not(.is-revealed) > .line-mask-inner{transform:translateY(108%)}

/* ---------- Reveal on scroll ---------- */
html.js .reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s ease-out,transform .8s ease-out;
}
html.js .reveal.visible{opacity:1;transform:translateY(0)}
/* a hash target that has not revealed yet (#lead) is measured 22px low and then rises under the header - offset it */
html.js:not(.no-motion) .reveal:not(.visible){scroll-margin-top:22px}   /* no-motion drops the offset */

/* ---------- Reduced motion: honour the user's preference everywhere ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal,.reveal{opacity:1;transform:none;transition:none}
  .mark-svg path{stroke-dashoffset:0;transition:none}
  .line-mask > .line-mask-inner,.line-mask-p > .line-mask-inner{transform:translateY(0)!important;transition:none!important}
  .logo-track,.icon-float,.ask-icon,.ask-heading-arrow{animation:none!important}
  .spk-card,.spk-media,.spk-pic--color,.spk-pic img,.spk-grad,.spk-side,.duo img,.logo-tile,.compare,.tl-line,.tl-node,.tl-media,.ring-card,.lead-field input,.lead-field select,.tl-step{transition:none}
  .tl-step{opacity:1;transform:none}
  .logo-rows{gap:12px}
  .logo-row{-webkit-mask-image:none;mask-image:none}
  .logo-track{flex-wrap:wrap;width:100%;justify-content:center}
  .logo-track > .logo-tile[aria-hidden="true"]{display:none}
}

/* Same rules when the visitor switched motion off with the footer toggle */
html.no-motion{scroll-behavior:auto}
html.js.no-motion .reveal,html.no-motion .reveal{opacity:1;transform:none;transition:none}
html.no-motion .mark-svg path{stroke-dashoffset:0;transition:none}
html.no-motion .line-mask > .line-mask-inner,html.no-motion .line-mask-p > .line-mask-inner{transform:translateY(0)!important;transition:none!important}
html.no-motion .logo-track,html.no-motion .icon-float,html.no-motion .ask-icon,html.no-motion .ask-heading-arrow{animation:none!important}
html.no-motion .spk-card,html.no-motion .spk-pic img,html.no-motion .duo img,html.no-motion .logo-tile,html.no-motion .compare,html.no-motion .lead-field input,html.no-motion .lead-field select{transition:none}
html.no-motion .logo-rows{gap:12px}
html.no-motion .logo-row{-webkit-mask-image:none;mask-image:none}
html.no-motion .logo-track{flex-wrap:wrap;width:100%;justify-content:center}
html.no-motion .logo-track > .logo-tile[aria-hidden="true"]{display:none}

/* ==========================================================================
   Round 10 - <=900px: centre every visible text block inside <main> and <footer>.
   Header + mobile drawer untouched. Appended last, so equal-specificity
   overrides win by source order. Only alignment / auto-margins change
   (plus the manifesto bar and the FAQ answer indent, noted inline).
   ========================================================================== */
@media(max-width:900px){
  /* base: covers everything with no explicit alignment of its own */
  main,.footer{text-align:center}

  /* hero */
  .hero .hero-content{text-align:center;margin-left:auto;margin-right:auto}   /* was right; max-width:780 */
  .hero .hero-sub{margin-left:auto;margin-right:auto}                          /* max-width:640 */

  /* shared max-width blocks that otherwise hug the right edge */
  main .h-section,main .h-section--tight,main .lede{margin-left:auto;margin-right:auto}

  /* manifesto (flex item, max-width:680): drop the right-edge gold bar, it fights centred text */
  .manifesto .manifesto-body{margin-left:auto;margin-right:auto;padding-right:0;border-right:0}

  /* before / after */
  main .edge-tabs{justify-content:center}
  .edge-stage .cmp-caption{justify-content:center}                             /* was space-between */

  /* shift: split cards */
  .split-section .split-back{text-align:center}                                /* was right */
  .split-back .stat-kicker{justify-content:center}                             /* flex row with the gold dot */
  .split-back .stat-num{text-align:center;margin-left:auto;margin-right:auto}  /* was right; width:fit-content */

  /* services timeline */
  .tl-step:nth-child(odd) .tl-body,.tl-step:nth-child(even) .tl-body{text-align:center} /* were right (0,3,0) */
  .tl .tl-desc{margin-left:auto;margin-right:auto}                             /* max-width:460 at 761-900px */

  /* founders accordion */
  .spk-card .spk-info{text-align:center}
  .spk-card .spk-bio{margin-left:auto;margin-right:auto}                       /* max-width:440 at 781-900px */
  .spk-card .spk-wa{align-self:center}                                         /* was flex-start (column flex at 781-900px) */

  /* FAQ */
  main .ask-heading{justify-content:center}
  main .ask-wrap,main .faq-list{margin-left:auto;margin-right:auto}            /* .ask-wrap had margin:40px 0 48px 0 */
  .ask .ask-input{text-align:center}                                           /* form control - does not inherit */
  .faq-item .faq-q{text-align:center;justify-content:center}                   /* was right + space-between */
  .faq-a .faq-a-inner{margin-left:auto;margin-right:auto;padding-left:0}       /* the 60px indent only lined the answer up under the question */

  /* contact / lead form */
  .final-cta .lead{text-align:center}                                          /* was right */
  .lead .lead-field input,.lead .lead-field select{text-align:center}          /* controls do not inherit; also centres the dir="ltr" phone field */

  /* footer */
  .footer .footer-inner,.footer .footer-links{justify-content:center}          /* were space-between / start */
}
@media(max-width:760px){
  .lead-grid--3 .lead-field:last-child{grid-column:1/-1}                       /* 621-760px: no lone half-width third field */
}

/* round 22: centred headings wrap into balanced lines (no lone last word, e.g. "תקציב." on phones);
   browsers without text-wrap:balance simply wrap as before */
main .h-section,main .h-section--tight,.manifesto-statement,.split-title,.final-cta-headline{text-wrap:balance}
#cases-title .gold{display:inline-block;text-wrap:balance}   /* its own box, so the gold line balances too (phones: "יותר הזמנות / באותו תקציב.") */
/* ---------- round 22 (Ron 28.9): every section heading centred on desktop too ----------
   The heading block of each section - kicker, title, lede - plus the FAQ's ask line, box and list and
   the lead form's title. Body copy, cards, the services timeline and the founders cards keep their own
   alignment. (<=900px everything is centred by the block above.) */
@media(min-width:901px){
  main .h-section,main .h-section--tight{text-align:center;margin-left:auto;margin-right:auto}
  main .lede{text-align:center;margin-left:auto;margin-right:auto}
  main .edge-tabs{justify-content:center}
  main .ask-heading{justify-content:center}
  main .ask-wrap,main .faq-list{margin-left:auto;margin-right:auto}
  .final-cta .lead-head{text-align:center}
}

/* ---------- Glow ring (round 14): a light travelling around the border of the sound toggles and the WhatsApp buttons above the form ---------- */
@property --glow-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.glow-ring{isolation:isolate}          /* the sound toggles are already position:absolute - never override that */
.btn.glow-ring{position:relative}     /* the WhatsApp buttons above the form are static, they need a positioned box for ::after */
.glow-ring::after{
  content:"";position:absolute;inset:-3px;border-radius:inherit;padding:2px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--glow-a),rgba(212,175,55,0) 0deg,rgba(212,175,55,0) 230deg,rgba(255,232,150,0.95) 320deg,rgba(212,175,55,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  filter:drop-shadow(0 0 4px rgba(212,175,55,0.75));
  animation:glow-spin 2.4s linear infinite;
}
@keyframes glow-spin{from{--glow-a:0deg}to{--glow-a:360deg}}
@media(prefers-reduced-motion:reduce){.glow-ring::after{animation:none;background:conic-gradient(rgba(212,175,55,0.55) 0 100%)}}
html.no-motion .glow-ring::after{animation:none;background:conic-gradient(rgba(212,175,55,0.55) 0 100%)}


/* ---------- Accessibility menu (תפריט נגישות) ---------- */
/* First-party, no external script. The site itself is built to ת"י 5568 ברמת AA;
   this menu is an aid on top of that, not a replacement for it. */

.a11y-wrap{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:95;display:flex;flex-direction:row-reverse;align-items:center;gap:10px}
.a11y-btn{
  width:48px;height:52px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--teal);color:var(--gold);
  border:1px solid var(--gold);border-right:none;
  border-radius:14px 0 0 14px;
  box-shadow:0 6px 20px rgba(15,32,40,0.45);
  transition:background .2s ease,color .2s ease;
}
.a11y-btn:hover,.a11y-btn[aria-expanded="true"]{background:var(--gold);color:var(--teal)}
.a11y-panel{
  width:min(300px,calc(100vw - 76px));
  background:var(--white);color:var(--ink);
  border:1px solid var(--hair-strong);
  border-radius:16px;
  box-shadow:0 24px 60px rgba(15,32,40,0.28);
  padding:14px;
  max-height:min(84vh,620px);overflow-y:auto;
}
.a11y-panel[hidden]{display:none}
.a11y-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.a11y-panel-title{font-family:var(--font-display);font-weight:700;font-size:calc(17px * var(--fsk,1));line-height:1.2;margin:0;color:var(--ink)}
.a11y-close{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:calc(15px * var(--fsk,1));color:var(--ink)}
.a11y-close:hover{background:rgba(38,70,83,0.09)}
.a11y-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:46px;padding:8px 12px;margin-bottom:6px;
  border-radius:11px;border:1px solid rgba(38,70,83,0.35);
  background:var(--white);text-align:right;
  font-size:calc(14.5px * var(--fsk,1));font-weight:700;color:var(--ink);
}
.a11y-toggle:hover{background:rgba(38,70,83,0.06)}
.a11y-row-label{flex:1 1 auto}
.a11y-size{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.a11y-step{
  width:38px;height:34px;border-radius:9px;
  border:1px solid rgba(38,70,83,0.45);background:var(--white);
  font-weight:700;font-size:calc(14px * var(--fsk,1));color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.a11y-step:hover:not(:disabled){background:rgba(38,70,83,0.09)}
.a11y-step:disabled{opacity:.4;cursor:not-allowed}
.a11y-size-level{min-width:42px;text-align:center;font-size:calc(13px * var(--fsk,1));font-weight:700}
.a11y-switch{
  flex:0 0 auto;width:40px;height:22px;border-radius:999px;
  background:rgba(38,70,83,0.28);position:relative;transition:background .2s ease;
}
.a11y-switch::after{
  content:"";position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;
  background:var(--white);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s ease;
}
.a11y-toggle.is-on .a11y-switch{background:var(--live-text)}
.a11y-toggle.is-on .a11y-switch::after{transform:translateX(-18px)}
.a11y-reset{
  width:100%;min-height:42px;margin-top:4px;border-radius:11px;
  background:var(--teal);color:var(--cream);font-weight:700;font-size:calc(14.5px * var(--fsk,1));
}
.a11y-reset:hover{background:#1b3541}
.a11y-note{margin:10px 2px 0;font-size:calc(12px * var(--fsk,1));line-height:1.5;color:#3a3a3a}
.a11y-note a{text-decoration:underline}
/* round L6: above the fixed header everywhere, and never taller than the screen */
.a11y-wrap{z-index:101}
.a11y-panel{max-height:min(620px,calc(100vh - 24px));max-height:min(620px,calc(100svh - 24px))}
.a11y-btn:focus-visible{outline:3px solid #f3dd8f;outline-offset:3px;box-shadow:0 0 0 7px #0f2028}   /* two-tone: reads on light and dark */
@media(min-width:901px) and (max-width:1199px){
  /* the side padding is 4vw here - a 48px tab covered the first letters of right-aligned lines */
  .a11y-btn{width:36px}
  .a11y-btn svg{width:20px;height:20px}
}
@media(max-width:900px){
  /* phones and tablets: in the fixed header, beside the menu button (round L5/L6) - on the hero it
     sat on the notebook, and at the side it covered the start of right-aligned lines */
  .a11y-wrap{top:calc((var(--head) - 42px) / 2);bottom:auto;left:calc(var(--pad) + 54px);right:auto;transform:none;
    flex-direction:column-reverse;align-items:flex-end;gap:8px}   /* RTL: flex-end = left, so the button stays beside the menu button when the panel opens */
  .a11y-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--gold);
    box-shadow:none}   /* round 20: on the cream header the side tab's deep shadow read as a grey smudge */
  .a11y-panel{width:min(300px,calc(100vw - 90px));max-height:calc(100vh - var(--head) - 12px);max-height:calc(100svh - var(--head) - 12px)}   /* it opens under the header - landscape phones are short */
  /* the legal pages have no fixed header and no hamburger: the button sits in their header's
     corner and scrolls away with it instead of floating over the text */
  .legal-body .a11y-wrap{position:absolute;top:20px;left:var(--pad)}
  .legal-body .legal-header-inner{padding-left:calc(var(--pad) + 54px)}
}
@media(max-width:600px){.legal-body .a11y-wrap{top:15px}}
@media print{.a11y-wrap{display:none}}

/* ---------- Preference classes set by the menu ---------- */
/* Text size: every font-size in the site's CSS is written as <size> * var(--fsk,1), so a
   level only has to set --fsk - a 52px headline and a 13px label grow by the same factor,
   whatever state or breakpoint they are in. CSS only has to make room: nothing may clip,
   and single-line controls may wrap instead of pushing the page sideways on a phone. */
html.a11y-fs-1{--fsk:1.15}
html.a11y-fs-2{--fsk:1.3}
html.a11y-fs-3{--fsk:1.5}
html.a11y-fs-1 .btn,html.a11y-fs-2 .btn,html.a11y-fs-3 .btn,
html.a11y-fs-1 .spk-wa,html.a11y-fs-2 .spk-wa,html.a11y-fs-3 .spk-wa{white-space:normal;max-width:calc(100vw - 32px)}
/* left:50% caps a fixed element's shrink-to-fit width at 50vw - max-content lets the pill
   use the full max-width instead of wrapping into a tall blob */
html.a11y-fs-1 .float-wa,html.a11y-fs-2 .float-wa,html.a11y-fs-3 .float-wa{white-space:normal;width:max-content;max-width:calc(100vw - 32px)}
@media(max-width:640px){html.a11y-fs-2 .float-wa,html.a11y-fs-3 .float-wa{font-size:calc(13.5px * 1.2)}}  /* a two-line CTA covered ~14% of a 360px screen */
/* nothing may clip when the text grows */
html.a11y-fs-1 .spk-bio,html.a11y-fs-2 .spk-bio,html.a11y-fs-3 .spk-bio{height:auto;max-height:none;aspect-ratio:auto;overflow:visible}
/* the #shift split cards use their static layout while text is enlarged (site.js adds .is-static) */

/* Underline every link, so links are never signalled by colour alone. */
html.a11y-links a{text-decoration:underline!important;text-underline-offset:3px}
html.a11y-links .btn,html.a11y-links .float-wa{text-decoration:none!important}

/* A plain system face instead of the brand display font, with looser spacing. */
html.a11y-readable,html.a11y-readable body{
  --font-body:Arial,'Noto Sans Hebrew','Segoe UI',sans-serif;
  --font-display:Arial,'Noto Sans Hebrew','Segoe UI',sans-serif;
}
html.a11y-readable body{letter-spacing:.012em;line-height:1.9;word-spacing:.06em}
html.a11y-readable .h-display{letter-spacing:0;line-height:1.25}

/* A much louder focus ring for anyone who loses it. */
html.a11y-focus :focus-visible{outline:4px solid #b3261e!important;outline-offset:3px!important;background:#fff8b0!important;color:#000!important}

/* High contrast: real overrides, not a filter. Light surfaces go white-on-black
   text, dark surfaces go pure white, and every scrim over media is deepened so
   text on top of a photo or video keeps its ratio. */
html.a11y-contrast{
  --cream:#ffffff;
  --ink:#000000;
  --teal:#000000;
  --dark:#000000;
  --white:#ffffff;
  --gold-deep:#4a3700;
  --gold-text:#4a3700;
  --live-text:#004b44;
  --hair:rgba(0,0,0,0.55);
  --hair-strong:rgba(0,0,0,0.8);
}
html.a11y-contrast body{background:#fff;color:#000}
html.a11y-contrast .lede,html.a11y-contrast .kpi-label,html.a11y-contrast .a11y-note{color:#000}
/* round L5: the dark sections stay dark in high contrast (--teal/--dark map to #000), so their
   text must be white - the #000 above turned the KPI labels and three section intros black on
   black. Helper lines that were semi-transparent become solid. */
html.a11y-contrast .kpi-label,
html.a11y-contrast #instagram .lede,html.a11y-contrast #instagram .ring-note,
html.a11y-contrast #shift .lede,html.a11y-contrast #shift .split-hint,
html.a11y-contrast #testimonial .lede,
html.a11y-contrast #contact .final-cta-sub,html.a11y-contrast #contact .final-cta-note,
html.a11y-contrast .spk-card .spk-bio{color:#fff}
html.a11y-contrast .edge-note,html.a11y-contrast .edge-hint,html.a11y-contrast .ask-hint,
html.a11y-contrast .tl-desc,html.a11y-contrast .line-mask-p{color:#000}
/* hero: the headline sits on the video's own backdrop - make its shade near-solid and lift the gold */
html.a11y-contrast .hero-brand,html.a11y-contrast .hero-lead-em{color:#ffe98a}
html.a11y-contrast .hero > .container::before{background:linear-gradient(180deg,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.86) 72%,rgba(0,0,0,0) 100%)}
/* round 20: the header is a light surface now - white with black links (21:1) and a black rule; the logo's
   dark wordmark also reads again (it vanished on the old black bar) */
html.a11y-contrast .header{background:#fff!important;border-bottom:2px solid #000}
html.a11y-contrast .hero-content,html.a11y-contrast .hero-headline,
html.a11y-contrast .hero-sub,html.a11y-contrast .footer,html.a11y-contrast .footer a{color:#fff!important}
html.a11y-contrast .btn-gold{background:#ffe98a;color:#000;border:2px solid #000}
html.a11y-contrast .btn-fill{background:#000;color:#fff;border:2px solid #fff}
html.a11y-contrast .float-wa{background:#ffe98a;color:#000;border:2px solid #000}
html.a11y-contrast .lead{background:#000!important;border:2px solid #fff}
html.a11y-contrast .lead-title,html.a11y-contrast .lead-intro,html.a11y-contrast .lead-field,
html.a11y-contrast .lead-privacy,html.a11y-contrast .lead-privacy a,html.a11y-contrast .lead-status,
html.a11y-contrast .lead-thanks strong,html.a11y-contrast .lead-thanks span{color:#fff!important}
html.a11y-contrast .lead-field input{background:#000;color:#fff;border:2px solid #fff}
html.a11y-contrast .lead-field input::placeholder{color:#e8e8e8}
html.a11y-contrast .cmp-label{background:#000!important;color:#fff!important;border:1px solid #fff}
html.a11y-contrast .a11y-panel{border-color:#000;border-width:2px}
html.a11y-contrast .a11y-row,html.a11y-contrast .a11y-step{border-color:#000;border-width:2px}