/* ===================== ERRA Landing — Kfar Yona West ===================== */ :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); --shell:#f5f5f5; --chart-bg:#f6f8fb; --chart-line:#dee3ed; --bar:#b8bfcc; --num-ink:#1a2133; --num-gray:#737a8c; --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. `clip`, not `hidden`: hidden makes these a scroll container, which silently breaks position:sticky inside the page (the x-factor map). */ html{scroll-behavior:smooth;background:var(--light);overflow-x:clip;} 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:clip; 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;} /* Most rows are authored right→left in Figma and match the mobile stacking order, so they just inherit dir=rtl. These few run left→right in the design and would be mirrored by it — force LTR flow, keeping the text inside each item RTL. */ .form-card__row,.xfactor__cols,.numbers__kpis,.chart__plot{direction:ltr;} .form-card__row input,.form-card__btn,.xfactor__text,.kpi,.bar-col{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 ===================== Two full-height columns: the aerial render (left in the Figma frame) and the navy copy panel (right). dir=rtl already puts the panel first, so the DOM order is panel -> media and no explicit column placement is needed. */ /* The Figma frame is 1920x1080, but a 1920-wide browser window is ~900px tall, so sizing the hero off width alone pushed the CTA below the fold. --u is one design px at the 1920x1080 canvas measured against whichever axis is tighter, so the whole panel scales down to fit a short viewport instead of overflowing it. */ .hero{--u:min(1vw,1.7778vh);--fold:100svh; display:grid;grid-template-columns:44.7fr 55.3fr;min-height:min(56.25vw,var(--fold)); background:var(--navy);color:#fff;} /* consent.js publishes the bar's height and flags while it is up; the bar is fixed to the bottom and would otherwise sit on top of the hero's CTA */ .has-cookie-bar .hero{--fold:calc(100svh - var(--cookie-bar-h,120px));} .hero__panel{ display:flex;flex-direction:column;align-items:flex-start;text-align:right; padding:clamp(24px,calc(2.8 * var(--u)),54px) clamp(20px,calc(3.2 * var(--u)),62px) clamp(24px,calc(2.9 * var(--u)),56px); } .hero__logo{height:clamp(20px,calc(1.67 * var(--u)),32px);width:auto; margin-bottom:clamp(12px,calc(1.25 * var(--u)),24px);} .hero__pill{background:#fff;color:var(--ink);border-radius:10px; padding:clamp(4px,calc(.42 * var(--u)),8px) clamp(14px,calc(1.25 * var(--u)),24px); font-size:clamp(15px,calc(1.5 * var(--u)),30px);line-height:1.6;} .hero__title{font-size:clamp(28px,calc(3.906 * var(--u)),75px);font-weight:400;line-height:1.2; letter-spacing:-.02em;margin:clamp(12px,calc(1.35 * var(--u)),26px) 0 0;} .hero__units{font-size:clamp(20px,calc(2.6 * var(--u)),50px);font-weight:700;line-height:1.2; letter-spacing:-.02em;margin:auto 0 0;padding-top:clamp(16px,calc(1.875 * var(--u)),36px);} /* desktop runs the two figures on one line ("1,500 דונם | 7,500 יחידות דיור"); the mobile frame splits them and drops the separator */ .hero__units .m-br{display:none;} .hero__price{font-size:clamp(15px,calc(1.5625 * var(--u)),30px);font-weight:700;line-height:1.33; letter-spacing:-.01em;margin:clamp(14px,calc(1.67 * var(--u)),32px) 0 0;} .hero__lead{font-size:clamp(13px,calc(1.04 * var(--u)),20px);font-weight:400;line-height:1.75; letter-spacing:-.01em;margin:clamp(8px,calc(.73 * var(--u)),14px) 0 0; max-width:min(calc(29.7 * var(--u)),100%);} .hero__cta{ display:inline-flex;align-items:center;gap:12px;justify-content:center; background:var(--blue);color:#fff;font-size:clamp(12px,calc(1.04 * var(--u)),20px); letter-spacing:-.4px;white-space:nowrap;max-width:100%;width:min(calc(26 * var(--u)),100%); padding:clamp(10px,calc(.78 * var(--u)),15px) clamp(16px,calc(1.25 * var(--u)),24px); border-radius:10px;margin-top:clamp(16px,calc(2.08 * var(--u)),40px); box-shadow:0 15px 35px rgba(0,0,0,.3);transition:transform .15s,box-shadow .15s; } .hero__cta:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.38);} .cta-arrow{width:11px;height:18px;flex:none;} /* the render is taken out of flow: left in it, the square image's own aspect ratio set the hero's height (1062px on a 1920-wide window) and pushed the CTA under the fold. Now the panel's content decides the height and the photo fills it. */ .hero__media{position:relative;overflow:hidden;background:var(--navy);} .hero__media picture{position:absolute;inset:0;display:block;} .hero__aerial{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;} /* render disclaimer, tucked into the bottom-right corner of the aerial (physical right, not the RTL inline end — that corner is the one against the navy panel) */ .hero__disclaimer{position:absolute;right:clamp(10px,calc(1 * var(--u)),20px); bottom:clamp(10px,calc(1 * var(--u)),20px);left:auto;margin:0; max-width:min(calc(30 * var(--u)),75%);text-align:right;color:#fff; font-size:clamp(9px,calc(.68 * var(--u)),13px);line-height:1.4; text-shadow:0 1px 4px rgba(0,0,0,.75);} /* mobile-only interview blocks (videos scattered between sections) */ .interview-block,.video-card--m-interview{display:none;} /* ===================== 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]{cursor:pointer;} .video-card[data-yt]::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{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;} .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;} .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[disabled]{filter:grayscale(.5);cursor:progress;} .form-card__btn img{width:11px;height:18px;flex:none;filter:brightness(0) invert(1);} .form-card__status{margin:18px 0 0;font-size:18px;font-weight:700;line-height:1.3;color:#1f7a1f;} .form-card__status.is-error{color:#c0392b;} /* ===================== 4. WHY ENTER ===================== */ /* pill above the title, both starting at the right (RTL start) */ .why__head{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:18px; text-align:right;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;} /* development stages: a status badge per row, joined by a short connector */ .timeline{list-style:none;margin:18px auto 0;padding:0;max-width:402px;} .timeline li{position:relative;margin-bottom:14px;} .timeline li+li{padding-top:33px;} /* connector between consecutive stages (Rectangle 104 in the Figma frame) */ .timeline li+li::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:2.5px;height:33px;background:var(--blue);} .timeline__badge{display:inline-block;background:var(--blue);color:#fff;font-weight:700; font-size:clamp(16px,1.17vw,22.5px);line-height:1.55;border-radius:2.5px;padding:2px 18px;margin-bottom:8px;} .timeline li p{font-size:clamp(16px,1.3vw,20px);color:var(--gray);margin:0;text-align:center;} /* plan on top, the two clippings side by side under it, the quote strip last — the gaps are the Figma ones as a share of the 982px-wide media column */ .xfactor__media{align-self:start;display:grid;gap:calc(14 / 982 * 100%);} .xfactor__media img{width:100%;height:auto;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.25);} .xf-news{display:grid;grid-template-columns:1fr 1fr;gap:calc(8 / 982 * 100%);direction:ltr;} /* ===================== 5b. THE NUMBERS ===================== */ .numbers{background:var(--chart-bg);} .numbers__head{text-align:right;} .numbers__title{font-size:clamp(32px,3.9vw,75px);font-weight:400;line-height:1.22;letter-spacing:-.02em; margin:18px 0 0;} .numbers__lead{font-size:clamp(16px,1.25vw,24px);line-height:1.5;letter-spacing:-.01em;color:var(--gray); margin:10px 0 clamp(32px,3.4vw,50px);} /* charts are two mirrored cards with the "lower entry = higher return" arrow between */ .numbers__charts{display:grid;grid-template-columns:minmax(0,604fr) minmax(0,150fr) minmax(0,604fr); gap:clamp(10px,1vw,20px);align-items:center;} .chart{margin:0;background:var(--light);border:1px solid var(--chart-line);border-radius:20px; padding:clamp(16px,1.2vw,22px);} .chart__title{font-size:clamp(13px,.94vw,18px);color:var(--num-ink);letter-spacing:-.01em; text-align:right;margin-bottom:clamp(14px,1.2vw,22px);} .chart__plot{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(6px,.6vw,12px); align-items:end;} .bar-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;} .bar-col__val{font-size:clamp(13px,.94vw,18px);color:var(--num-ink);letter-spacing:-.01em; line-height:1.5;margin-bottom:6px;white-space:nowrap;} .bar-col--erra .bar-col__val{color:var(--blue);} /* --h is the unitless Figma bar height in px on the 1920 canvas (190 = tallest); the multiplier is 1px at 1920 and shrinks with the viewport */ .bar{width:clamp(38px,3.2vw,62px);height:calc(var(--h) * clamp(.63px,.052vw,1px)); background:var(--bar);border-radius:6px;} .bar-col--erra .bar{background:var(--blue);} .bar-col__cap{font-size:clamp(11px,.73vw,14px);color:var(--num-gray);line-height:1.5;margin-top:10px; white-space:nowrap;} .numbers__arrow{display:flex;flex-direction:column;align-items:center;gap:8px;direction:rtl;} .numbers__arrow img{width:min(120px,100%);height:auto;} .numbers__arrow p{font-size:clamp(11px,.73vw,14px);line-height:1.4;color:var(--blue);text-align:center;margin:0;} .numbers__kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.5vw,30px); margin-top:clamp(28px,3vw,50px);} .kpi{background:var(--light);border:1px solid var(--chart-line);border-radius:16px; padding:clamp(14px,1.4vw,22px);text-align:center;} .kpi__num{display:block;font-size:clamp(18px,1.56vw,30px);color:var(--blue);line-height:1.3;} .kpi__label{display:block;font-size:clamp(12px,.83vw,16px);color:var(--num-gray);line-height:1.5;margin-top:6px;} .numbers__conclusion{background:var(--blue);color:#fff;border-radius:15px;text-align:center; font-size:clamp(15px,1.35vw,26px);line-height:1.45;letter-spacing:-.01em; padding:clamp(14px,1.1vw,22px) 20px;margin:clamp(24px,2.6vw,44px) auto 0;max-width:1000px;} /* ===================== 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;} /* Profit curve: the plotted line is an exported vector; the labels stay live text on top of it. Everything is sized in cqw against the chart box, so the whole drawing scales as one unit. */ .profit-chart{position:relative;container-type:inline-size;aspect-ratio:328/237; margin-top:auto;background:#fff;border-radius:12px;overflow:hidden;} .profit-chart__curve{position:absolute;inset:0;width:100%;height:100%;} /* the two-class selectors outrank `.safety__card p`, which would otherwise force the card's 20px body size onto every label here */ .profit-chart p{position:absolute;margin:0;transform:translateX(-50%);text-align:center;} .profit-chart .profit-chart__v{font-weight:700;color:var(--num-ink);font-size:3.35cqw;line-height:1.3;} .profit-chart .profit-chart__v--1{left:11.59%;top:57.8%;width:23.17%;} .profit-chart .profit-chart__v--2{left:43.9%;top:43.4%;width:24.39%;} .profit-chart .profit-chart__v--3{left:84.76%;top:8.9%;width:29.27%;color:var(--blue);font-size:4.27cqw;} .profit-chart .profit-chart__x{color:var(--num-gray);font-size:2.74cqw;line-height:1.35;top:86.5%;} .profit-chart .profit-chart__x--1{left:11.89%;width:26%;} .profit-chart .profit-chart__x--2{left:46.95%;width:30%;} .profit-chart .profit-chart__x--3{left:81.1%;width:30%;} .profit-chart .profit-chart__callout{ left:46.04%;top:59.07%;width:46.34%;height:19.41%;transform:none; display:flex;align-items:center;justify-content:center; background:#fff;border:.76cqw solid #d92929;border-radius:1.83cqw; font-weight:700;color:var(--num-ink);font-size:3.05cqw;line-height:1.25;padding:0 3%; } /* ===================== 7. ABOUT ===================== */ .about{text-align:center;background:var(--light);padding:0 0 0;} /* tinted band behind the intro + founders only; team and quote sit on white */ .about__shell{background:var(--shell);padding:clamp(48px,6vw,90px) 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;} /* Each portrait is a full-body cut-out masked by a rounded 200px square. The percentages are the Figma mask window expressed against the box, so the same crop holds at any box size. */ .founder__photo{position:relative;width:200px;height:200px;margin:0 auto 26px; border-radius:10px;overflow:hidden;background:#fff;} .founder__photo img{position:absolute;max-width:none; width:var(--iw);height:var(--ih);left:var(--ix);top:var(--iy);} .founder__photo--andrey{--iw:178.25%;--ih:175.75%;--ix:-36.75%;--iy:-21.5%;} .founder__photo--dani{--iw:118%;--ih:147.5%;--ix:-12.5%;--iy:-2.5%;} .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) ===================== */ .sticky-cta{ display:none;position:fixed;inset-inline:16px;bottom:16px;z-index:50; background:var(--blue);color:#fff;text-align:center;font-size:20px;font-weight:700; padding:16px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35); } /* ===================== 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));} } /* Two-column x-factor only: the text column runs much longer than the map, so the map rides along with the scroll instead of leaving a hole under itself. Sticky stops at the end of .xfactor__cols, keeping it inside the tinted section. `align-self:start` above is what keeps the grid item from stretching, without which sticky has no room to move. */ @media (min-width:1025px){ /* a stack taller than the window would stick with its bottom off-screen, so cap the column's width by the height available — 1.052 is its width/height ratio */ .xfactor__media{--xf-gap:32px; position:sticky;top:var(--xf-gap);margin-inline:auto; max-width:calc((100svh - 2 * var(--xf-gap)) * 1.052);} } @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: the aerial spans the full width with the logo, pill and title overlaid on its lower half; the copy and CTA sit on white below it. Lengths are vw fractions of the 1080px-wide Figma mobile frame (px/1080), so the whole block scales as one unit. ---------- */ .hero{display:block;position:relative;background:var(--light);color:var(--ink);} .hero__media{position:absolute;top:0;inset-inline:0;height:96.76vw;z-index:0;} .hero__aerial{width:100%;height:100%;object-fit:cover;} .hero__disclaimer{display:none;} /* scrim behind the title so it stays legible over the photo */ .hero::before{content:"";position:absolute;top:74.26vw;inset-inline:0;height:18.24vw;z-index:1; background:linear-gradient(to left,rgba(11,25,71,.85) 0%,rgba(11,25,71,.45) 61.26%,rgba(11,25,71,0) 82.39%);} .hero__panel{display:block;position:static;padding:96.76vw 5.56vw 0;text-align:right;} .hero__logo{position:absolute;top:5.19vw;right:5.65vw;width:12.4vw;height:auto;z-index:3;margin:0;} .hero__pill{position:absolute;top:65.28vw;right:0;z-index:3;width:36.67vw;height:6.48vw; display:flex;align-items:center;justify-content:center;border-radius:0; font-size:4.63vw;line-height:1;padding:0;} .hero__title{position:absolute;top:74.26vw;right:2.78vw;width:71.1vw;z-index:3;margin:0; color:#fff;font-size:7.41vw;line-height:9.17vw;letter-spacing:-.148vw;} .hero__units{color:var(--blue);font-size:6.48vw;line-height:6.48vw;letter-spacing:-.13vw; margin:1.3vw 0 0;padding:0;} .hero__units .hero__sep{display:none;} .hero__units .m-br{display:inline;} .hero__price{font-size:4.63vw;line-height:5.09vw;letter-spacing:-.046vw;margin:2.4vw 0 0;} .hero__lead{color:var(--gray);font-size:3.7vw;line-height:5.09vw;letter-spacing:-.037vw; max-width:none;margin:2.4vw 0 0;} .hero__cta{display:flex;width:88.9vw;height:20.37vw;white-space:normal;text-align:center; border-radius:1.85vw;font-size:4.63vw;line-height:6.02vw;letter-spacing:-.09vw; padding:0 4vw;margin:2.78vw 0 0;box-shadow:0 15px 35px rgba(0,0,0,.3);} /* ---------- interviews: scattered videos, not a grid ---------- */ .testimonials__kicker{display:none;} .video-grid{display:none;} .video-card--m-interview{display:block;} .interview-block{display:block;padding:clamp(40px,9vw,60px) 0;} /* mobile clips are framed taller than the desktop grid cards */ .video-card{aspect-ratio:960/1636;} /* ---------- single-column stacks; the DOM already follows the Figma mobile stacking order, so a plain column is all that is needed ---------- */ .why__grid,.safety__grid{display:flex;flex-direction:column;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;} /* stats stacked vertically (Figma order: 17 / אלפי / 100+) */ .stats__row{flex-direction:column;gap:26px;} /* x-factor: plan, then each clipping full width, one after another — side by side they scale to ~175px on a phone and the article text is unreadable */ .xfactor__media{max-width:none;gap:14px;} .xf-news{grid-template-columns:1fr;gap:14px;} /* 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;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%;} /* the Figma mobile frame insets every clip by 30/540 of the width */ .interview-block{padding:24px 0;} .interview-block .wrap, .testimonials .video-card--m-interview{width:min(100%,100vw - 11.12vw);margin-inline:auto;} /* ===================== 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;} /* 5b. NUMBERS: charts stack, the between-charts arrow is dropped (as in Figma) */ .numbers__charts{display:flex;flex-direction:column;gap:clamp(20px,5vw,30px);} .numbers__arrow{display:none;} .chart{border-radius:15.6px;border-width:.78px;} .chart__title{font-size:17px;} /* 48.2/540 of the frame width, so six bars keep their gaps on narrow phones */ .bar{width:8.93vw;max-width:48px;height:calc(var(--h) * .778px);border-radius:4.7px;} .bar-col__val{font-size:14px;} .bar-col--erra .bar-col__val{font-size:17px;} .bar-col__cap{font-size:11.7px;} .numbers__kpis{grid-template-columns:1fr;gap:clamp(14px,3.5vw,20px);} .kpi{border-radius:20px;border-width:1.26px;} .kpi__num{font-size:45px;} .kpi__label{font-size:19px;} .numbers__title{font-size:45px;line-height:1.12;letter-spacing:-1.6px;} .numbers__lead{font-size:20px;line-height:1.4;} .numbers__conclusion{font-size:20px;border-radius:15px;} /* 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;} .hero__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 is fixed at the bottom: keep it from covering the footer links */ .has-cookie-bar .site-footer{padding-bottom:clamp(140px,22vw,190px);} /* ===================== 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 while the bar is 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));} /* ===================== 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
, 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 .hero__cta,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 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 municipality and the government developer. Text only — we have no licence to reproduce either mark on this site. */ .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 12px!important;} .docs-promoters__list{list-style:none;padding:0;margin:0;} .docs-promoters__list li{ display:flex;align-items:center;gap:16px; margin:0 0 12px;font-size:18px;font-weight:700; } .docs-promoters__list li:last-child{margin-bottom:0;} /* the logo column is fixed so the second line's text starts under the first */ .docs-promoters__logo{flex:0 0 auto;width:126px;height:auto;} .docs-promoters__list li:last-child{padding-inline-start:142px;} .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;} .docs-group h3{font-size:clamp(19px,1.5vw,22px);font-weight:700;margin:28px 0 0;} /* 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;} /* a player we do not control (Google Drive): give it the same frame as a .video-card so the section still reads as one grid of clips */ .docs-embed{ position:relative;aspect-ratio:16/9;margin:20px 0 0; border-radius:14px;overflow:hidden;background:#000; } .docs-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} .docs-embed__title{font-size:18px!important;font-weight:700;line-height:1.4;margin:10px 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;} .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;} /* a 126px logo column next to text leaves ~200px for the line, which wraps to four. Stack instead and drop the alignment indent from the second line. */ .docs-promoters__list li{flex-direction:column;align-items:flex-start;gap:10px;font-size:17px;} .docs-promoters__list li:last-child{padding-inline-start: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 .doc-link__meta,html.a11y-dark .docs-facts li{border:1px solid #fff!important;}