/* ===================== ERRA Landing — Gedera ===================== */
:root{
  --blue:#254cc8;
  --navy:#0a2054;
  --ink:#1f1f1f;
  /* darkened from #837e80: that failed WCAG AA (3.9:1 on white); this is 4.9:1 */
  --gray:#6f6a6c;
  --card:#e7f0fe;
  --light:#fff;
  --tint:rgba(176,201,238,.6);
  --maxw:1680px;
}

*{box-sizing:border-box;}
/* lock horizontal axis: full-bleed bands use 100vw, so clip any overflow on
   BOTH html and body — otherwise iOS lets the page drift left/right */
html{scroll-behavior:smooth;background:var(--light);overflow-x:hidden;}
body{
  margin:0;
  font-family:'Arimo',Arial,sans-serif;
  color:var(--ink);
  background:var(--light);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}

/* fluid centered container; sections are full-bleed */
.wrap{width:min(var(--maxw), 100% - 80px);margin-inline:auto;}
.section{padding:clamp(48px,6vw,90px) 0;}

/* Horizontal rows are authored in Figma's left→right order; force LTR flow
   so dir=rtl doesn't mirror them. Text inside each item stays RTL. */
.video-grid,.stats__row,.why__grid,.safety__grid,.about__founders,
.form-card__row,.xfactor__cols{direction:ltr;}
.video-card,.stat,.why__item,.safety__card,.founder,
.form-card__row input,.form-card__btn,.xfactor__text{direction:rtl;}

/* shared pill */
.pill{display:inline-block;border-radius:10px;padding:9px 22px;font-size:clamp(16px,1.7vw,30px);line-height:1.3;white-space:nowrap;}
.pill--blue{background:var(--blue);color:#fff;}

/* ===================== 1. HERO ===================== */
.hero{position:relative;min-height:clamp(560px,54vw,1000px);overflow:hidden;color:#fff;background:#fff;}
.hero__bg{position:absolute;inset:0;z-index:0;background:url('assets/hero_desktop.png') center/cover no-repeat;}
/* the desktop banner already has the navy text panel baked in (right side),
   so only a light safety gradient remains for legibility when it crops */
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right, transparent 55%, rgba(10,32,84,.45) 100%);}
.hero__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;
  text-align:right;padding-top:clamp(28px,3.4vw,55px);padding-bottom:clamp(36px,3.5vw,60px);
  min-height:clamp(560px,54vw,1000px);}
/* desktop: wrappers are layout-transparent, mobile-only aerial hidden */
.hero__head,.hero__body,.hero__media{display:contents;}
.hero__aerial{display:none;}
/* mobile-only interview blocks (videos scattered between sections) */
.interview-block,.video-card--m-interview{display:none;}
/* mobile-only line break in the hero subtitle (מתחם 8 / המועדף לדיור / …) */
.hero__subtitle .m-br{display:none;}
/* mobile-only gov.il phone mockup inside the x-factor "אור ירוק" block */
.xfactor__phone{display:none;}
.hero__logo{height:clamp(24px,1.8vw,32px);margin-bottom:clamp(16px,1.6vw,26px);}
.hero__pill{background:#fff;color:var(--ink);border-radius:10px;padding:10px 26px;font-size:clamp(16px,1.7vw,30px);font-weight:400;}
/* smaller than the other section titles on purpose: the hero now carries the
   money line and the form, and everything has to fit one screen */
.hero__title{font-size:clamp(28px,3.4vw,60px);font-weight:400;line-height:1.12;letter-spacing:-.02em;margin:clamp(18px,1.6vw,28px) 0 0;max-width:min(760px,100%);}
.hero__subtitle{font-size:clamp(24px,2.9vw,50px);font-weight:700;line-height:1.2;letter-spacing:-.02em;margin:clamp(16px,1.5vw,26px) 0 0;max-width:min(920px,100%);}
.hero__units{font-size:clamp(18px,1.7vw,30px);font-weight:700;letter-spacing:-.01em;margin:clamp(18px,1.7vw,30px) 0 0;max-width:min(600px,100%);}
.hero__lead{font-size:clamp(15px,1.15vw,20px);font-weight:400;line-height:1.75;letter-spacing:-.01em;margin:14px 0 0;max-width:min(570px,100%);color:#fff;}
.hero__lead strong{font-weight:700;}
/* the money line: one number, read in a second - the same figure the ad banners
   run with. The rate is a chip rather than coloured text: brand blue straight on
   the photo would not hold contrast, white-on-blue does (8.6:1). */
.hero__value{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  font-size:clamp(19px,1.7vw,28px);font-weight:700;line-height:1.2;letter-spacing:-.02em;
  margin:clamp(14px,1.2vw,20px) 0 0;max-width:min(620px,100%);color:#fff;}
.hero__value strong{background:#fff;color:var(--blue);border-radius:8px;padding:4px 14px;
  font-size:1.3em;white-space:nowrap;}
.hero__value-note{font-size:clamp(12px,.85vw,14px);line-height:1.4;color:#e6ecf7;margin:8px 0 0;
  max-width:min(620px,100%);}
.cta-arrow{width:11px;height:18px;flex:none;}
/* the hero CTA is a real lead form. .form-card is sized for a full-width section,
   so the modifier resets that geometry and matches the copy column above it
   (same 570px as .hero__lead), 2x2 so it stays short enough not to grow the hero. */
.form-card--hero{
  width:100%;max-width:min(570px,100%);margin:clamp(16px,1.4vw,24px) 0 0;
  padding:clamp(14px,1.1vw,18px);border-radius:12px;text-align:right;
  box-shadow:0 15px 35px rgba(0,0,0,.3);
}
.form-card--hero .form-card__title{font-size:clamp(15px,1.05vw,17px);line-height:1.3;color:var(--ink);margin-bottom:12px;}
/* explicit RTL grid instead of the LTR-flip the other forms use: the DOM order
   (button, email, phone, name) is placed by name, so the visual order is
   שם / נייד on top and אימייל / send below. */
.form-card--hero .form-card__row{direction:rtl;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.form-card--hero .form-card__row input,
.form-card--hero .form-card__btn{max-width:none;width:100%;height:46px;font-size:17px;}
.form-card--hero .form-card__row input[name="name"]{grid-area:1/1;}
.form-card--hero .form-card__row input[name="phone"]{grid-area:1/2;}
.form-card--hero .form-card__row input[name="email"]{grid-area:2/1;}
.form-card--hero .form-card__btn{grid-area:2/2;}

/* ===================== 2. TESTIMONIALS ===================== */
.testimonials{text-align:center;}
.testimonials__kicker{font-size:clamp(20px,2.2vw,40px);letter-spacing:-.02em;margin:0;}
.testimonials__title{font-size:clamp(32px,4.4vw,80px);font-weight:400;line-height:1.06;letter-spacing:-.02em;margin:24px 0 clamp(36px,4vw,60px);}
.video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.1vw,18px);}
.video-card{position:relative;margin:0;border-radius:19px;overflow:hidden;aspect-ratio:407/608;background:#000;box-shadow:0 6px 24px rgba(0,0,0,.18);}
.video-card img{width:100%;height:100%;object-fit:cover;}
/* clickable review video: play-button overlay + injected iframe */
.video-card[data-yt],.video-card[data-drive]{cursor:pointer;}
.video-card[data-yt]::after,.video-card[data-drive]::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(54px,5vw,72px);height:clamp(54px,5vw,72px);border-radius:50%;
  background:rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/42% no-repeat;
  z-index:2;pointer-events:none;transition:background-color .15s;
}
.video-card[data-yt]:hover::after,.video-card[data-drive]:hover::after{background-color:rgba(0,0,0,.72);}
.video-card__iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;}
.video-card.is-playing::after{display:none;}
.video-card.is-playing figcaption{display:none;}
/* caption = the video's own quote + name (as shown on the YouTube clip) */
.video-card figcaption{position:absolute;inset-inline:0;bottom:0;display:flex;flex-direction:column;
  align-items:center;gap:8px;text-align:center;color:#fff;padding:44px 14px 16px;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
  background:linear-gradient(to top,rgba(0,0,0,.78) 18%,rgba(0,0,0,0));}
.video-card .quote{font-size:clamp(13px,1.15vw,17px);line-height:1.32;font-weight:400;}
.video-card .name{font-size:clamp(17px,1.6vw,24px);font-weight:700;}

/* ===================== 3. STATS ===================== */
.stats{text-align:center;padding:clamp(40px,5vw,70px) 0;}
.stats__lead{font-size:clamp(20px,1.7vw,30px);letter-spacing:-.02em;margin:0 0 24px;}
.stats__row{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(24px,3vw,48px);color:var(--blue);}
.stat{display:flex;flex-direction:column;align-items:center;text-align:center;}
.stat__num{font-size:clamp(44px,4.4vw,80px);font-weight:700;line-height:1;}
.stat__label{font-size:clamp(18px,1.7vw,30px);letter-spacing:-.02em;margin-top:8px;}

/* ===================== FORM ===================== */
.form-section{padding:30px 0;}
/* scroll-margin: the sticky CTA jumps here, and a form flush against the top
   edge of the viewport reads as cut off */
.form-card{width:min(var(--maxw),100% - 80px);margin-inline:auto;background:var(--light);border-radius:20px;padding:clamp(24px,3vw,40px);text-align:center;scroll-margin-block-start:24px;}
.form-card__title{font-size:clamp(20px,1.7vw,30px);line-height:1.16;margin:0 0 24px;}
.form-card__row{display:flex;gap:clamp(12px,1.2vw,20px);justify-content:center;flex-wrap:wrap;}
.form-card__row input{
  flex:1;min-width:200px;max-width:320px;height:56px;border:.5px solid var(--gray);
  background:#e0e0e0;border-radius:5px;padding:0 18px;font-size:20px;text-align:center;
  font-family:inherit;color:var(--ink);
}
/* darker than --gray: the field background is #e0e0e0, not white */
.form-card__row input::placeholder{color:#555;opacity:1;}
.form-card__btn{
  flex:1;min-width:200px;max-width:320px;height:56px;border:0;cursor:pointer;
  background:var(--blue);color:#fff;border-radius:5px;font-size:clamp(18px,1.6vw,25px);letter-spacing:-.5px;
  font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  transition:filter .15s;
}
.form-card__btn:hover{filter:brightness(1.08);}
.form-card__btn img{width:11px;height:18px;flex:none;filter:brightness(0) invert(1);}

/* ===================== 4. WHY ENTER ===================== */
.why__head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;margin-bottom:clamp(32px,4vw,50px);}
.why__title{font-size:clamp(32px,4.4vw,80px);font-weight:400;line-height:1.12;letter-spacing:-.02em;margin:0;}
.why__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,2.6vw,40px);}
.why__item{text-align:right;}
.why__icon{display:inline-block;width:auto;height:44px;margin-bottom:18px;}
.why__item h3{font-size:clamp(22px,2vw,30px);font-weight:700;letter-spacing:-.02em;margin:0 0 14px;}
.why__item p{font-size:clamp(16px,1.3vw,20px);line-height:1.38;letter-spacing:-.01em;color:var(--gray);margin:0;}
.why__item p strong{color:var(--gray);font-weight:700;}
.why__more{margin-top:14px!important;font-weight:700;color:var(--ink)!important;font-size:clamp(22px,2vw,30px)!important;}

/* ===================== 5. X FACTOR ===================== */
.xfactor{background:var(--tint);text-align:center;}
.xfactor__kicker{font-size:clamp(20px,1.8vw,30px);font-weight:700;margin:0;}
.xfactor__title{font-size:clamp(32px,4.4vw,80px);font-weight:400;line-height:1.12;letter-spacing:-.02em;margin:18px 0 clamp(36px,4vw,60px);}
.xfactor__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,844px);gap:clamp(28px,3vw,50px);align-items:start;}
.xfactor__text{text-align:center;}
.xfactor__block{margin-bottom:clamp(32px,3.4vw,46px);}
.xfactor__icon{display:block;width:auto;height:48px;margin:0 auto 14px;}
.xfactor__block h3{font-size:clamp(22px,2vw,30px);font-weight:700;letter-spacing:-.02em;margin:0 0 12px;}
.xfactor__block p{font-size:clamp(16px,1.3vw,20px);line-height:1.38;color:var(--ink);margin:0;}
.xfactor__block strong{font-weight:700;}
.timeline{list-style:none;margin:18px auto 0;padding:0;max-width:402px;}
.timeline li{margin-bottom:14px;}
.timeline__year{display:inline-block;background:var(--blue);color:#fff;font-weight:700;font-size:clamp(16px,1.4vw,22px);border-radius:3px;padding:3px 16px;margin-bottom:8px;}
.timeline li p{font-size:clamp(16px,1.3vw,20px);color:var(--gray);margin:0;text-align:center;}
.xfactor__media{display:grid;grid-template-columns:37fr 63fr;gap:clamp(8px,.8vw,13px);direction:ltr;align-content:start;}
.xfactor__img-a{grid-column:1;grid-row:1;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.xfactor__img-b{grid-column:2;grid-row:1;width:100%;height:auto;border:3.5px solid #fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.xfactor__img-c{grid-column:1 / -1;grid-row:2;width:100%;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.25);margin-top:3px;}

/* ===================== 6. SAFETY ===================== */
.safety__head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;text-align:right;}
.safety__title{font-size:clamp(28px,3vw,50px);font-weight:400;letter-spacing:-.02em;margin:0;}
.safety__lead{text-align:right;font-size:clamp(20px,1.7vw,30px);line-height:1.33;letter-spacing:-.02em;margin:22px 0 clamp(32px,3.4vw,50px);}
.safety__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2vw,30px);align-items:stretch;}
.safety__card{background:var(--card);border-radius:10px;padding:clamp(24px,2vw,34px) clamp(20px,1.8vw,26px);text-align:right;}
.safety__icon{width:auto;height:48px;margin-bottom:20px;}
.safety__card h3{font-size:clamp(22px,2vw,30px);font-weight:700;line-height:1.08;letter-spacing:-.01em;margin:0 0 16px;}
.safety__card p{font-size:clamp(16px,1.3vw,20px);line-height:1.38;letter-spacing:-.01em;margin:0;}
.safety__card--result{text-align:center;display:flex;flex-direction:column;}
.safety__profit-label{color:var(--blue);font-size:clamp(16px,1.3vw,20px);letter-spacing:-.01em;margin:0 0 14px;order:2;}
.safety__card--result h3{order:1;}
.safety__card--result img,
.profit-chart{order:3;width:100%;height:auto;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.25);margin-top:8px;background:#fff;}

/* ===================== 7. ABOUT ===================== */
.about{text-align:center;background:var(--light);padding-bottom:0;}
.about__kicker{font-size:clamp(20px,1.7vw,30px);font-weight:700;letter-spacing:-.01em;margin:0;}
.about__title{font-size:clamp(32px,4.4vw,80px);font-weight:400;line-height:1.12;letter-spacing:-.02em;margin:16px 0;}
.about__lead{font-size:clamp(20px,1.7vw,30px);line-height:1.16;letter-spacing:-.01em;color:var(--blue);max-width:962px;margin:0 auto clamp(40px,4vw,60px);}
.about__founders{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:962px;margin:0 auto;}
.founder h3{font-size:clamp(22px,2vw,30px);font-weight:700;letter-spacing:-.01em;margin:0 0 18px;}
.founder__photo{width:200px;height:200px;margin:0 auto 26px;border-radius:10px;overflow:hidden;
  background-color:#fff;background-repeat:no-repeat;}
.founder__photo--andrey{background-image:url('assets/andrey.png');background-size:cover;background-position:center;}
.founder__photo--dani{background-image:url('assets/dani.png');background-size:cover;background-position:center;}
.founder p{font-size:clamp(16px,1.3vw,20px);line-height:1.38;letter-spacing:-.01em;margin:0;}
.about__quote-wrap{padding-block:clamp(48px,6vw,80px);}
.about__quote{max-width:907px;margin:0 auto;font-style:italic;font-size:clamp(20px,1.9vw,30px);line-height:1.5;letter-spacing:-.02em;border:0;padding:0;}
.about__quote cite{display:block;font-style:normal;font-weight:700;font-size:20px;letter-spacing:-.02em;margin-top:18px;}
/* team = single white block: heading + text on top, photo flush below */
.about__team{position:relative;margin-top:clamp(48px,6vw,80px);background:#fff;padding:clamp(40px,5vw,60px) 0 0;}
.about__team-text{text-align:center;padding:0 clamp(20px,4vw,40px) clamp(28px,3.5vw,44px);}
.about__team-text h3{font-size:clamp(22px,2vw,30px);font-weight:700;letter-spacing:-.01em;margin:0 0 18px;}
.about__team-text p{font-size:clamp(16px,1.3vw,20px);line-height:1.38;letter-spacing:-.01em;color:var(--gray);max-width:690px;margin:0 auto;}
.about__team-bg{width:100%;object-fit:cover;}

/* ===================== 8. STEPS ===================== */
.steps{text-align:center;}
.steps__title{font-size:clamp(30px,3.4vw,60px);font-weight:400;letter-spacing:-.02em;margin:0 0 24px;}
.steps__lead{font-size:clamp(16px,1.3vw,20px);line-height:1.38;letter-spacing:-.01em;color:var(--gray);max-width:680px;margin:0 auto 24px;}
.steps__highlight{font-size:clamp(20px,1.7vw,30px);line-height:1.25;letter-spacing:-.02em;color:var(--blue);max-width:732px;margin:0 auto clamp(32px,4vw,50px);}
.steps__subtitle{font-size:clamp(22px,2vw,30px);font-weight:700;letter-spacing:-.02em;margin:0 0 40px;}
.steps__list{list-style:none;counter-reset:step;margin:0 auto;padding:0;max-width:908px;}
.steps__list li{margin-bottom:clamp(20px,2.2vw,30px);}
/* leading arrow between consecutive steps */
.steps__list li:not(:last-child)::after{
  content:"";display:block;width:15px;height:15px;margin:clamp(16px,1.8vw,24px) auto 0;
  border-right:3px solid var(--blue);border-bottom:3px solid var(--blue);
  transform:rotate(45deg);
}
.step__head{
  display:inline-block;background:var(--blue);color:#fff;font-weight:700;font-size:clamp(18px,1.6vw,25px);
  letter-spacing:-.5px;border-radius:5px;padding:7px 30px;width:min(540px,100%);
}
.steps__list li p{font-size:clamp(16px,1.3vw,20px);line-height:1.6;letter-spacing:-.02em;color:var(--gray);margin:12px 0 0;}
.steps__list li p strong{color:var(--gray);font-weight:700;}

/* ===================== 9. FINAL ===================== */
.final{text-align:center;padding-bottom:60px;}
.final__title{font-size:clamp(32px,4.4vw,80px);font-weight:400;line-height:1.12;letter-spacing:-.02em;max-width:1304px;margin:0 auto 28px;}
.final__sub{font-size:clamp(20px,1.7vw,30px);font-weight:700;letter-spacing:-.02em;color:var(--gray);margin:0 0 18px;}
.final__note{font-size:clamp(20px,1.7vw,30px);letter-spacing:-.02em;margin:0 0 40px;}
.final__note strong{font-weight:700;}
.final__legal{font-size:16px;line-height:1.25;letter-spacing:-.01em;color:var(--gray);max-width:1095px;margin:50px auto 0;}
.sig{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:30px;color:var(--ink);font-family:'Assistant',sans-serif;font-size:16px;}
.sig img{height:14px;}

/* ===================== STICKY CTA (mobile only) =====================
   Full-width bar under everything else that is fixed: z-index stays below the
   cookie bar (100) so consent is never the thing that gets covered, and the bar
   sits on top of it via --cookie-bar-h rather than behind it. Shown only on
   mobile - display:none here is lifted inside the 768px block. */
.sticky-cta{
  display:none;position:fixed;inset-inline:0;bottom:0;z-index:90;
  align-items:center;justify-content:center;gap:12px;
  background:var(--blue);color:#fff;text-align:center;font-size:20px;font-weight:700;
  padding:16px;box-shadow:0 -6px 20px rgba(0,0,0,.3);
}
.sticky-cta[hidden]{display:none;}
/* the arrow asset is black; same inversion the form button uses */
.sticky-cta img{filter:brightness(0) invert(1);}
.has-cookie-bar .sticky-cta{bottom:var(--cookie-bar-h,120px);}

/* ===================== RESPONSIVE BREAKPOINTS ===================== */
/* desktop: tighten the gap between the about quote and the "2026" steps title */
@media (min-width:769px){
  .about__quote-wrap{padding-bottom:24px;}
  .steps{padding-top:40px;}
}
@media (max-width:1200px){
  .video-grid,.why__grid,.safety__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:1024px){
  .xfactor__cols{grid-template-columns:1fr;}
  .xfactor__media{max-width:680px;margin-inline:auto;}
}

/* ===================== MOBILE (matches Figma mobile frame 1629:1904) ===================== */
@media (max-width:768px){
  .wrap{width:min(var(--maxw),100% - 36px);}
  .section{padding:clamp(40px,9vw,60px) 0;}

  /* ---------- HERO: one continuous aerial (navy baked into its top) with the
       logo/pill/title overlaid -> light body -> CTA. No separate navy block,
       so there is no seam between the navy header and the photo. ---------- */
  .hero{min-height:0;background:var(--light);overflow:visible;color:#fff;position:relative;}
  .hero__bg,.hero::before{display:none;}
  .hero__inner{display:block;width:100%;max-width:none;padding:0;min-height:0;}
  /* logo/pill/title float over the dark top of the aerial image */
  .hero__head{position:absolute;top:0;right:0;left:0;z-index:2;display:block;
    text-align:right;background:none;padding:20px 10px 0;}
  .hero__logo{display:block;height:auto;width:60px;margin:0 0 20px;}
  .hero__pill{display:inline-block;width:auto;margin:0 0 15px;font-size:18px;line-height:1.5;
    padding:5px 20px;border-radius:10px;}
  .hero__title{display:block;color:#fff;text-align:right;width:auto;max-width:none;
    font-size:29px;line-height:1.12;letter-spacing:-.02em;margin:0;}
  /* aerial scaled to 130% width (matches the live page) so its navy zone is tall
     enough for the overlaid heading; blue subtitle sits over its lower-right */
  .hero__media{display:block;position:relative;overflow:hidden;background:var(--light);}
  .hero__aerial{display:block;width:130%;max-width:130%;margin-inline:-15%;height:auto;}
  .hero__subtitle{position:absolute;right:10px;bottom:26px;left:auto;display:block;
    color:var(--blue);font-weight:700;text-align:right;width:auto;max-width:78%;
    font-size:25px;line-height:1.2;letter-spacing:-1px;margin:0;}
  /* 3-line subtitle on mobile: מתחם 8 / המועדף לדיור / בהכרזת הממשלה */
  .hero__subtitle .m-br{display:inline;}
  /* pull the body (units / lead / form) up snug against the image. z-index puts
     it over the aerial instead of under it: the media block is positioned, so a
     deeper overlap used to paint the image on top and swallow the units line
     whole. The strip it overlaps is plain white, so only empty space is eaten. */
  .hero__body{display:block;position:relative;z-index:1;text-align:right;
    background:var(--light);margin-top:-6px;padding:0 10px 20px;}
  /* the hero body is white on mobile, so the money line inverts: dark text with
     blue chips instead of white text with white chips */
  .hero__value{color:var(--ink);font-size:20px;line-height:1.2;max-width:none;margin:0 0 8px;}
  .hero__value strong{background:var(--blue);color:#fff;}
  .hero__value-note{color:var(--gray);font-size:12px;margin:0 0 14px;}
  .hero__units{display:block;color:var(--ink);text-align:right;width:auto;max-width:none;
    font-size:18px;font-weight:700;line-height:1.33;letter-spacing:-.3px;margin:0 0 18px;}
  .hero__lead{display:block;color:var(--gray);text-align:right;width:auto;max-width:none;
    font-size:16px;line-height:1.75;letter-spacing:-.2px;margin:0 0 24px;}
  /* hero form: centered card with even gutters (the hero body's own padding is
     only 10px, which left it hugging the screen edges). The mobile hero body is
     white, so the card takes the pale-blue tint to stay a distinct block. */
  .form-card--hero{width:calc(100% - 16px);max-width:420px;margin:6px auto 0;
    padding:18px 16px;border-radius:12px;text-align:center;
    background:var(--card);box-shadow:none;}
  .form-card--hero .form-card__title{font-size:18px;margin-bottom:14px;}
  /* back to a single column: two fields side by side are too cramped on a phone */
  .form-card--hero .form-card__row{display:flex;flex-direction:column-reverse;align-items:stretch;gap:14px;}
  .form-card--hero .form-card__row input,
  .form-card--hero .form-card__btn{height:54px;font-size:19px;}

  /* the sticky CTA only exists on mobile */
  .sticky-cta{display:flex;}

  /* ---------- interviews: scattered videos, not a grid ---------- */
  .testimonials__kicker{display:none;}
  .video-grid{display:none;}
  /* this card lives inside .testimonials .wrap (18px side gutters); pull it
     full-bleed with -18px so it spans edge-to-edge like the .interview-block
     videos below */
  .video-card--m-interview{display:block;margin:0 -18px;}
  .interview-block{display:block;padding:clamp(40px,9vw,60px) 0;}

  /* ---------- single-column stacks (Figma stacking order) ---------- */
  .why__grid,.safety__grid{display:flex;flex-direction:column-reverse;gap:clamp(28px,7vw,40px);}
  .why__item,.safety__card{text-align:right;}
  /* icons sit centered above the text on mobile */
  .why__icon,.safety__icon{display:block;margin-inline:auto;}

  /* why head: blue pill above the title, aligned to the right (RTL start) */
  .why__head{flex-direction:column-reverse;align-items:flex-start;text-align:right;}

  /* stats stacked vertically (Figma order: 17 / אלפי / 32%) */
  .stats__row{flex-direction:column-reverse;gap:26px;}

  /* x-factor: text then image collage (2-up top + full below) */
  .xfactor__media{max-width:none;}
  /* gov.il declaration phone mockup, centered under the "אור ירוק" copy */
  .xfactor__phone{display:block;width:min(264px,74%);margin:22px auto 0;}

  /* ---------- one uniform tint band for the whole section (like desktop):
       the section background already spans edge-to-edge, so no 100vw full-bleed
       hack is needed and no white side-stripes can appear on mobile ---------- */
  .xfactor__cols{padding-bottom:18px;}

  /* ---------- alignment matches the reference exactly: testimonials, WHY and
       SAFETY are right-aligned; STATS, X-FACTOR, ABOUT, STEPS and FINAL stay
       centered (their desktop default) ---------- */
  .testimonials{text-align:right;}
  .testimonials__title{text-align:right;}

  /* founders stacked, Figma order: דני then אנדריי */
  .about__founders{display:flex;flex-direction:column-reverse;gap:32px;}

  /* ---------- form: fields stacked, button at the bottom. flex:none resets the
       desktop `flex:1` (flex-basis:0) which otherwise collapses the field height
       to content size in the column layout — keeping the tall, full-size scale. ---------- */
  .form-card{width:min(var(--maxw),100% - 36px);}
  .form-card__row{flex-direction:column-reverse;align-items:stretch;gap:16px;}
  .form-card__row input,.form-card__btn{flex:0 0 auto;max-width:none;width:100%;height:58px;}
  .form-card__row input{font-size:20px;}
  .form-card__btn{font-size:20px;}

  /* steps: full-width pills */
  .step__head{width:100%;}

  /* ---------- interviews run flush / full-bleed (no card framing or shadow
       lines, which read as "technical dividers" between blocks) ---------- */
  .interview-block{padding:24px 0;}
  .interview-block .wrap{width:100%;}
  .interview-block .video-card,
  .video-card--m-interview{border-radius:0;box-shadow:none;}

  /* ===================== EXACT MOBILE TYPE SCALE (from live reference) ===================== */
  /* 2. TESTIMONIALS */
  .testimonials__title{font-size:45px;line-height:1.06;letter-spacing:-1.6px;margin:0 0 24px;}

  /* 3. STATS */
  .stats__lead{font-size:30px;line-height:1.33;letter-spacing:-.6px;}
  .stat__num{font-size:60px;line-height:.93;}
  .stat__label{font-size:25px;line-height:1.33;letter-spacing:-.6px;}

  /* FORM */
  .form-card__title{font-size:25px;line-height:1.2;}

  /* 4. WHY */
  .why__title{font-size:44px;line-height:1.12;letter-spacing:-1.6px;}
  .why__item h3{font-size:30px;line-height:1;letter-spacing:-.6px;}
  .why__item p{font-size:18px;line-height:1.37;letter-spacing:-.2px;}
  .why__more{font-size:30px!important;}

  /* 5. X-FACTOR */
  .xfactor__kicker{font-size:22px;}
  .xfactor__title{font-size:45px;line-height:1.12;letter-spacing:-1.6px;}
  .xfactor__block h3{font-size:20px;line-height:1.16;letter-spacing:-.6px;}
  .xfactor__block p{font-size:16px;line-height:1.37;}
  .timeline__year{font-size:22.5px;line-height:1.55;}
  .timeline li p{font-size:16px;line-height:1.37;}

  /* 6. SAFETY (pill, title and cards all start at the right / RTL start) */
  .safety .pill--blue{font-size:25px;}
  .safety__title{font-size:40px;line-height:1.3;letter-spacing:-1px;}
  .safety__lead{font-size:22px;line-height:1.33;letter-spacing:-.3px;}
  .safety__card h3{font-size:25px;line-height:1.08;letter-spacing:-.3px;}
  .safety__card p{font-size:20px;line-height:1.37;letter-spacing:-.2px;}
  .safety__card--result h3{font-size:30px;}
  .safety__profit-label{font-size:20px;line-height:2;}

  /* 7. ABOUT */
  .about__kicker{font-size:25px;line-height:1.66;letter-spacing:-.3px;}
  .about__title{font-size:40px;line-height:1.12;letter-spacing:-1.6px;}
  .about__lead{font-size:22px;line-height:1.16;letter-spacing:-.3px;}
  .founder h3{font-size:30px;line-height:1.66;letter-spacing:-.3px;}
  .founder p{font-size:20px;line-height:1.37;letter-spacing:-.2px;}
  .about__team-text h3{font-size:30px;line-height:1.33;letter-spacing:-.3px;}
  .about__team-text p{font-size:16px;line-height:1.37;letter-spacing:-.2px;}
  .about__quote{font-size:25px;line-height:1.5;letter-spacing:-.6px;}
  .about__quote cite{font-size:20px;line-height:1.5;}

  /* 8. STEPS */
  .steps__title{font-size:45px;line-height:1.08;letter-spacing:-1.2px;}
  .steps__lead{font-size:18px;line-height:1.37;letter-spacing:-.2px;}
  .steps__highlight{font-size:25px;line-height:1.25;letter-spacing:-.6px;}
  .steps__subtitle{font-size:22px;line-height:1.91;}
  .step__head{font-size:20px;line-height:1.4;letter-spacing:-.5px;}
  .steps__list li p{font-size:18px;line-height:1.62;}

  /* 9. FINAL */
  .final__title{font-size:45px;line-height:1.12;letter-spacing:-1.6px;}
  .final__sub{font-size:20px;line-height:1.2;}
  .final__note{font-size:20px;line-height:1.2;}
  .final__legal{font-size:16px;line-height:1.25;letter-spacing:-.32px;}
}

/* ===================== ACCESSIBILITY BASELINE (IS 5568 / WCAG 2.0 AA) ===================== */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip-link{
  position:fixed;top:-100px;inset-inline-start:16px;z-index:120;
  background:#fff;color:var(--blue);font-weight:700;font-size:18px;
  padding:12px 22px;border:2px solid var(--blue);border-radius:0 0 10px 10px;
  transition:top .15s;
}
.skip-link:focus{top:0;}

/* one visible focus ring everywhere; :focus-visible keeps it off mouse clicks */
:focus-visible{outline:3px solid #0a2054;outline-offset:2px;border-radius:2px;}
.sticky-cta:focus-visible,.form-card__btn:focus-visible,.video-card:focus-visible{
  outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px rgba(10,32,84,.9);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;}
}

/* ===================== FOOTER ===================== */
.site-footer{background:var(--navy);color:#fff;padding:32px 0;text-align:center;}
.site-footer__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px;}
.site-footer__nav a{font-size:18px;text-decoration:underline;color:#fff;}
.site-footer__nav a:hover{color:#cfe0ff;}
.site-footer__copy{font-size:16px;color:#cfd7e8;margin:20px 0 0;}
/* the cookie bar and the sticky CTA are fixed at the bottom: keep them from
   covering the footer links */
.has-cookie-bar .site-footer{padding-bottom:clamp(140px,22vw,190px);}
.has-sticky-cta .site-footer{padding-bottom:calc(32px + var(--sticky-cta-h,72px));}
.has-cookie-bar.has-sticky-cta .site-footer{padding-bottom:calc(clamp(140px,22vw,190px) + var(--sticky-cta-h,72px));}

/* ===================== LEGAL / DOC PAGES (accessibility statement) ===================== */
.doc{padding:clamp(40px,6vw,80px) 0;}
.doc .wrap{max-width:900px;}
.doc__back a{color:var(--blue);text-decoration:underline;font-size:18px;}
.doc h1{font-size:clamp(32px,3.4vw,50px);font-weight:700;letter-spacing:-.02em;margin:24px 0 28px;}
.doc h2{font-size:clamp(22px,2vw,30px);font-weight:700;letter-spacing:-.01em;margin:36px 0 14px;}
.doc p{font-size:18px;line-height:1.7;margin:0 0 16px;}
.doc ul{font-size:18px;line-height:1.7;padding-inline-start:22px;margin:0 0 16px;}
.doc li{margin-bottom:8px;}
.doc a{color:var(--blue);text-decoration:underline;}
.doc__contact{list-style:none;padding:0;}
.doc__updated{color:var(--gray);font-size:16px;margin-top:36px;}

/* ===================== COOKIE BAR ===================== */
.cookie-bar{
  position:fixed;inset-inline:0;bottom:0;z-index:100;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 28px;
  background:#0a2054;color:#fff;padding:16px clamp(16px,3vw,40px);
  box-shadow:0 -6px 24px rgba(0,0,0,.28);
}
.cookie-bar[hidden]{display:none;}
.cookie-bar__text{font-size:16px;line-height:1.45;margin:0;max-width:900px;text-align:right;}
.cookie-bar__text a{text-decoration:underline;color:#9BDEE3;}
.cookie-bar__actions{display:flex;gap:12px;flex:none;}
.cookie-bar__btn{
  min-width:120px;height:46px;border-radius:5px;cursor:pointer;
  font-family:inherit;font-size:18px;font-weight:700;padding:0 22px;
  transition:filter .15s;
}
.cookie-bar__btn:hover{filter:brightness(1.1);}
.cookie-bar__btn--accept{background:var(--blue);color:#fff;border:2px solid var(--blue);}
.cookie-bar__btn--reject{background:transparent;color:#fff;border:2px solid #fff;}
@media (max-width:768px){
  .cookie-bar{flex-direction:column;align-items:stretch;gap:14px;}
  .cookie-bar__text{text-align:right;font-size:15px;}
  .cookie-bar__actions{justify-content:stretch;}
  .cookie-bar__btn{flex:1;}
}

/* ===================== ACCESSIBILITY WIDGET ===================== */
.a11y-btn{
  position:fixed;inset-inline-start:16px;bottom:16px;z-index:110;
  width:56px;height:56px;border-radius:50%;border:2px solid #fff;cursor:pointer;
  background:var(--blue);color:#fff;padding:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .15s;
}
.a11y-btn:hover{transform:scale(1.06);}
.a11y-btn svg{width:100%;height:100%;fill:currentColor;}

.a11y-panel{
  position:fixed;inset-inline-start:16px;bottom:84px;z-index:111;
  width:min(320px,calc(100vw - 32px));max-height:min(78vh,620px);overflow-y:auto;
  background:#fff;color:var(--ink);border:2px solid var(--navy);border-radius:12px;
  padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.35);text-align:right;
}
.a11y-panel[hidden]{display:none;}
.a11y-panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.a11y-panel__head h2{font-size:22px;font-weight:700;margin:0;}
.a11y-close{
  width:34px;height:34px;flex:none;border:0;border-radius:6px;cursor:pointer;
  background:#eee;color:var(--ink);font-size:24px;line-height:1;font-family:inherit;
}
.a11y-close:hover{background:#ddd;}

.a11y-zoom{border:1px solid #d5d5d5;border-radius:8px;padding:10px 12px;margin-bottom:14px;}
.a11y-zoom__title{display:block;font-size:16px;font-weight:700;margin-bottom:8px;}
.a11y-zoom__ctrl{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.a11y-zoom__ctrl button{
  width:44px;height:40px;border:0;border-radius:6px;cursor:pointer;
  background:var(--blue);color:#fff;font-size:22px;font-family:inherit;
}
.a11y-zoom__ctrl button[disabled]{background:#b9b9b9;cursor:default;}
.a11y-zoom__val{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;}

.a11y-opts{display:grid;gap:8px;}
.a11y-opt{
  width:100%;min-height:44px;border:1px solid #cfcfcf;border-radius:8px;cursor:pointer;
  background:#f4f6fb;color:var(--ink);font-family:inherit;font-size:16px;
  padding:10px 14px;text-align:right;
}
.a11y-opt:hover{background:#e7f0fe;}
.a11y-opt[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:700;}

.a11y-reset{
  width:100%;min-height:44px;margin-top:12px;border:2px solid var(--navy);border-radius:8px;
  cursor:pointer;background:#fff;color:var(--navy);font-family:inherit;font-size:16px;font-weight:700;
}
.a11y-reset:hover{background:#eef2fa;}
.a11y-statement{display:block;margin-top:12px;text-align:center;font-size:16px;
  color:var(--blue);text-decoration:underline;}

/* keep the widget clear of the cookie bar and the sticky CTA while they are up */
.has-cookie-bar .a11y-btn{bottom:calc(16px + var(--cookie-bar-h,120px));}
.has-cookie-bar .a11y-panel{bottom:calc(84px + var(--cookie-bar-h,120px));}
.has-sticky-cta .a11y-btn{bottom:calc(16px + var(--sticky-cta-h,72px));}
.has-sticky-cta .a11y-panel{bottom:calc(84px + var(--sticky-cta-h,72px));}
.has-cookie-bar.has-sticky-cta .a11y-btn{bottom:calc(16px + var(--cookie-bar-h,120px) + var(--sticky-cta-h,72px));}
.has-cookie-bar.has-sticky-cta .a11y-panel{bottom:calc(84px + var(--cookie-bar-h,120px) + var(--sticky-cta-h,72px));}

/* ===================== ACCESSIBILITY MODES =====================
   Filters and zoom are scoped to `main, footer` on purpose: a CSS filter on an
   ancestor makes position:fixed descendants scroll with the page, which would
   break the widget button, its panel and the cookie bar. Those live outside
   <main>, so they stay unfiltered and keep working. */
html.a11y-invert main,html.a11y-invert footer{filter:invert(1) hue-rotate(180deg);}
html.a11y-invert img,html.a11y-invert iframe,html.a11y-invert video,
html.a11y-invert .hero__bg,html.a11y-invert .founder__photo{filter:invert(1) hue-rotate(180deg);}

html.a11y-grayscale main,html.a11y-grayscale footer{filter:grayscale(1);}

/* text-size steps: the type scale is authored in px/clamp(), which root font-size
   cannot scale — zoom reflows the layout instead of overflowing it */
html.a11y-zoom-1 main,html.a11y-zoom-1 footer{zoom:1.1;}
html.a11y-zoom-2 main,html.a11y-zoom-2 footer{zoom:1.2;}
html.a11y-zoom-3 main,html.a11y-zoom-3 footer{zoom:1.3;}

html.a11y-readable main,html.a11y-readable footer,
html.a11y-readable main *,html.a11y-readable footer *{
  font-family:Arial,'Helvetica Neue',Helvetica,sans-serif!important;font-style:normal!important;
  letter-spacing:normal!important;
}

html.a11y-spacing main,html.a11y-spacing footer,
html.a11y-spacing main *,html.a11y-spacing footer *{
  line-height:1.9!important;letter-spacing:.06em!important;word-spacing:.14em!important;
}

html.a11y-links main a,html.a11y-links footer a,
html.a11y-links main button,html.a11y-links footer button{
  text-decoration:underline!important;outline:2px solid #e62317!important;outline-offset:2px;
}

html.a11y-cursor,html.a11y-cursor *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6 1.2 3.2 6.6-2.7 1.3L10.4 14 5 18z' fill='%23000' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 4 2,auto!important;
}

html.a11y-no-anim *,html.a11y-no-anim *::before,html.a11y-no-anim *::after{
  animation:none!important;transition:none!important;scroll-behavior:auto!important;
}

/* high-contrast dark theme */
html.a11y-dark main,html.a11y-dark footer{background:#000!important;}
html.a11y-dark main *,html.a11y-dark footer *{
  background-color:transparent!important;color:#fff!important;
  text-shadow:none!important;box-shadow:none!important;
}
html.a11y-dark .section,html.a11y-dark .form-card,html.a11y-dark .safety__card,
html.a11y-dark .about__team,html.a11y-dark .hero{background:#000!important;}
html.a11y-dark .hero__bg{filter:brightness(.35);}
html.a11y-dark main a,html.a11y-dark footer a{color:#ff0!important;text-decoration:underline!important;}
html.a11y-dark .form-card__row input{background:#000!important;color:#fff!important;border:2px solid #fff!important;}
html.a11y-dark .form-card__row input::placeholder{color:#ddd!important;}
html.a11y-dark .form-card__btn,html.a11y-dark .step__head,
html.a11y-dark .timeline__year,html.a11y-dark .pill--blue{
  background:#000!important;color:#ff0!important;border:2px solid #ff0!important;
}
/* the chart's contrast comes from its own fills — keep it on white */
html.a11y-dark .profit-chart{background:#fff!important;}

/* ===================== DOCS PAGE (docs.html) =====================
   A reference sheet we send to clients who are already in conversation:
   no hero, no lead form, no animation. Built on top of the .doc kit above,
   so only the list/grid pieces are new here. */
.docs .wrap{max-width:1040px;}
.docs__sub{font-size:19px;max-width:70ch;}
/* .doc ul above indents lists by 22px for the legal pages. Every list here is
   a custom card layout, so kill the indent — otherwise the cards sit 22px
   inside the headings above them. Same specificity as .doc ul, declared later. */
.docs ul{padding-inline-start:0;}

/* the four numbers a client checks first, before opening anything */
.docs-facts{
  display:flex;flex-wrap:wrap;gap:10px 12px;
  list-style:none;padding:0;margin:24px 0 8px;font-size:16px;
}
.docs-facts li{
  display:flex;align-items:baseline;gap:8px;margin:0;
  background:var(--card);border-radius:10px;padding:8px 14px;
}
.docs-facts span{color:var(--gray);}
.docs-facts strong{font-weight:700;}

/* whose programme this is: the government developer and the planning body */
.docs-promoters{
  margin:32px 0 8px;padding:20px 24px;
  border:2px solid var(--card);border-radius:14px;background:#fbfcff;
}
.docs-promoters__caption{font-size:15px!important;color:var(--gray);margin:0 0 16px!important;}
.docs-promoters__list{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;
}
.docs-promoters__list li{display:flex;align-items:center;gap:16px;margin:0;}
.docs-promoters__list p{font-size:16px!important;line-height:1.5;margin:0!important;}
/* both marks share one column width so the two paragraphs start on one line */
.docs-promoters__logo{flex:0 0 auto;width:126px;height:auto;}
.docs-promoters__emblem{flex:0 0 auto;width:54px;height:auto;margin-inline:36px;}
.docs-promoters__note{
  font-size:14px!important;color:var(--gray);margin:16px 0 0!important;line-height:1.5;
}

.docs-group{margin-top:clamp(40px,5vw,64px);}
.docs-group__lead{color:var(--gray);max-width:70ch;}

/* draft-contract warning above the deal documents */
.docs-note{
  border-inline-start:5px solid #E62317;background:#fff5f4;
  border-radius:0 10px 10px 0;padding:14px 18px;font-size:17px!important;
}

/* one row per document. The whole row is the link: on a phone the entire
   card is the tap target, not just the title. */
.docs-list{list-style:none;padding:0;margin:20px 0 0;}
.docs-list li{margin-bottom:12px;}
.doc-link{
  display:flex;align-items:center;justify-content:space-between;gap:12px 20px;
  min-height:56px;padding:16px 20px;
  border:2px solid var(--card);border-radius:14px;background:#fff;
  text-decoration:none!important;color:inherit!important;
  transition:border-color .15s,background .15s;
}
.doc-link:hover{border-color:var(--blue);background:#f7faff;}
.doc-link__body{display:block;}
.doc-link__title{
  display:block;font-size:19px;font-weight:700;color:var(--blue);
  text-decoration:underline;line-height:1.35;
}
.doc-link__desc{display:block;margin-top:5px;font-size:16px;line-height:1.5;color:var(--ink);}
/* file weight matters: most of these get opened on mobile data */
.doc-link__meta{
  flex:0 0 auto;font-size:14px;color:var(--gray);white-space:nowrap;
  background:var(--card);border-radius:8px;padding:6px 10px;
}

/* explainer videos: landscape, title under the frame rather than over it,
   so the list reads like a table of contents */
.docs-videos{
  list-style:none;padding:0;margin:24px 0 0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;
}
.docs-videos li{margin:0;}
.video-card--wide{aspect-ratio:16/9;border-radius:14px;}
.docs-videos__title{font-size:18px!important;font-weight:700;line-height:1.4;margin:10px 0 0!important;}
.docs-more{margin-top:24px;font-size:18px;}

/* full recording of the VATMAL round table. It sits on Google Drive rather than
   YouTube, and Drive serves no public thumbnail — so the facade is a text
   poster instead of an <img>. The play button comes from .video-card[data-drive]. */
.video-card--drive{margin-top:24px;}
.video-card__poster{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;
  padding:clamp(48px,7vw,72px) 20px 20px;color:#fff;
  background:linear-gradient(160deg,#0a2054 0%,#254cc8 100%);
}
.video-card__poster b{display:block;font-size:clamp(16px,1.7vw,24px);line-height:1.3;font-weight:700;}
.video-card__poster span{font-size:clamp(13px,1.1vw,16px);color:#cfd9f2;}

/* credit line under the recording — same weight as .docs-promoters__note */
.video-credit{font-size:14px!important;color:var(--gray);line-height:1.5;margin:12px 0 0!important;}

/* chapter list. Drive's player cannot seek from a URL, so these are a reading
   index, not links — the time is stated and the viewer scrubs to it. */
.video-chapters{list-style:none;padding:0!important;margin:22px 0 0!important;font-size:17px!important;}
.video-chapters li{
  display:flex;align-items:baseline;gap:14px;
  margin:0;padding:11px 0;border-top:1px solid var(--card);
}
.video-chapters li:last-child{border-bottom:1px solid var(--card);}
.video-chapters__time{
  flex:0 0 auto;min-width:62px;font-weight:700;color:var(--blue);
  font-variant-numeric:tabular-nums;
}
.video-chapters__label{line-height:1.45;}
.video-chapters__note{font-size:14px!important;color:var(--gray);line-height:1.5;margin:12px 0 0!important;}

/* contact block: three big tap targets, no form */
.docs-contact__list{
  list-style:none;padding:0;margin:20px 0 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
.docs-contact__list li{margin:0;}
.docs-contact__list a{
  display:block;min-height:56px;padding:16px 20px;
  border:2px solid var(--blue);border-radius:14px;
  text-decoration:none!important;color:var(--ink)!important;
  transition:background .15s;
}
.docs-contact__list a:hover{background:#f7faff;}
.docs-contact__label{display:block;font-size:15px;color:var(--gray);}
.docs-contact__value{display:block;font-size:19px;font-weight:700;color:var(--blue);margin-top:4px;}

@media (max-width:768px){
  .docs__sub{font-size:18px;}
  /* Phone screens: keep the rows tight so a section fits in one or two
     screenfuls. The badge drops under the text (a row would squeeze the
     title to two words), but everything around it shrinks to compensate. */
  .doc-link{flex-direction:column;align-items:flex-start;gap:6px;padding:13px 15px;}
  .doc-link__title{font-size:17px;}
  .doc-link__desc{font-size:15px;line-height:1.45;margin-top:3px;}
  .doc-link__meta{font-size:13px;padding:4px 9px;}
  .docs-list li{margin-bottom:9px;}
  .docs-group{margin-top:36px;}
  .docs-group__lead{font-size:16px;}
  .docs-note{padding:12px 14px;font-size:16px!important;}
  .docs-videos{grid-template-columns:1fr;gap:20px;}
  .video-chapters{font-size:16px!important;}
  .video-chapters li{gap:10px;padding:10px 0;}
  .video-chapters__time{min-width:56px;}
  .docs-contact__list{grid-template-columns:1fr;}
  /* the landing hides .video-grid on mobile because it scatters the same
     interviews through the page as .video-card--m-interview blocks. This page
     has no such blocks, so the grid has to stay — just stack it. */
  .docs .video-grid{display:grid;grid-template-columns:1fr;gap:16px;}
  .docs-promoters{padding:16px 18px;}
  .docs-promoters__list{grid-template-columns:1fr;gap:20px;}
  /* a 126px logo column next to text leaves ~200px for the paragraph, which
     wraps to six lines. Stack instead and let the text use the full width. */
  .docs-promoters__list li{flex-direction:column;align-items:flex-start;gap:10px;}
  .docs-promoters__emblem{margin-inline:0;}
}

/* keep the doc rows readable once the a11y widget forces its own palette */
html.a11y-dark .doc-link,html.a11y-dark .docs-contact__list a,
html.a11y-dark .docs-promoters,html.a11y-dark .docs-note{border-color:#ff0!important;}
html.a11y-dark .video-chapters li{border-color:#ff0!important;}
html.a11y-dark .doc-link__meta,html.a11y-dark .docs-facts li{border:1px solid #fff!important;}