form {
display:inline
}
/* Yalla Group — design tokens
*
* The comp is authored on a 1920px canvas. Every size below is expressed as
* clamp(mobile-floor,comp-px/19.2 vw,comp-px) so the page reproduces the comp
* exactly at 1920 and scales down fluidly,with no typography stepping in the
* media query (slicing principle #21).
*
* Mobile floors come from the RTL type table in the design-slicing skill:
* Hebrew letterforms have a lower x-height than Latin,so comp px scaled
* proportionally read cramped on a phone. The floors are deliberately higher
* than a naive scale-down.
*/
@font-face {
font-family:"Assistant";
src:url(../../../design/default/css/../Fonts/Assistant-Regular.woff2) format(woff2);
font-weight:400;
font-style:normal;
font-display:swap
}
@font-face {
font-family:"Assistant";
src:url(../../../design/default/css/../Fonts/Assistant-Bold.woff2) format(woff2);
font-weight:700;
font-style:normal;
font-display:swap
}
@font-face {
font-family:"IBM Plex Sans Hebrew";
src:url(../../../design/default/css/../Fonts/IBMPlexSansHebrew-Light.woff2) format(woff2);
font-weight:300;
font-style:normal;
font-display:swap
}
@font-face {
font-family:"IBM Plex Sans Hebrew";
src:url(../../../design/default/css/../Fonts/IBMPlexSansHebrew-Regular.woff2) format(woff2);
font-weight:400;
font-style:normal;
font-display:swap
}
:root {
/* ---- palette (every value read directly off the SVG fills) ---- */
--c-pink:#fb1585;
--c-pink-deep:#b6015d;
/* hero sub-headline face only */
--c-navy:#000b44;
--c-navy-alt:#01295b;
/* a real second navy,not a rounding artifact */
--c-yellow:#fcd809;
--c-cream:#fbf7f4;
--c-amber:#f7b916;
/* review stars */
--c-white:#fff;
--c-black:#000;
--c-grey:#6b6b6b;
/* review dates */
/* ---- layout ---- */
--col-max:1204px;
/* measured content column on the 1920 canvas */
--gutter:20px;
/* mobile side padding */
--sb:0px;
/* real scrollbar width,synced from JS (#14) */
/* ---- type families ---- */
--f-sans:"Assistant","Segoe UI",system-ui,sans-serif;
--f-plex:"IBM Plex Sans Hebrew","Assistant",system-ui,sans-serif;
/* ---- type scale:clamp(floor,comp-px/19.2 vw,comp-px) ---- */
--fs-hero-h1:clamp(38px,5.467vw,105px);
/* 104.97 */
--fs-hero-band:clamp(24px,3.528vw,68px);
/*  67.73 */
--fs-hero-sub:clamp(22px,3.167vw,61px);
/*  60.81 */
--fs-h2:clamp(28px,3.281vw,63px);
/*  63    */
--fs-pain:clamp(20px,2.552vw,49px);
/*  49    */
--fs-body:clamp(19px,2.083vw,40px);
/*  40    */
--fs-footer-h2:clamp(26px,2.151vw,41px);
/*  41.31 */
--fs-card:clamp(18px,1.881vw,36px);
/*  36.12 */
--fs-sticker:clamp(12px,1.719vw,33px);
/*  33.01 — 12px floor (was 13) so the
ringed mobile pills clear her face */
--fs-step:clamp(18px,1.667vw,32px);
/*  32    */
--fs-hours:clamp(19px,1.400vw,27px);
/*  26.88 */
--fs-credit:clamp(15px,1.354vw,26px);
/*  26    */
--fs-submit:clamp(19px,1.354vw,26px);
/*  26    */
--fs-submit-footer:clamp(19px,1.316vw,25px);
/*  25.27 */
--fs-field:clamp(16px,1.042vw,20px);
/*  20    */
--fs-review-name:clamp(15px,1.008vw,19px);
/*  19.36 */
--fs-review-body:clamp(14px,0.888vw,17px);
/*  17.04 */
/* ---- rhythm ---- */
--radius-card:12px;
--radius-pill:999px;
--shadow-card:0 4px 14px rgba(0,0,0,0.09);
--shadow-sticker:0 6px 18px rgba(0,0,0,0.16)
}
/* Yalla Group — layout and components.
*
* Mobile-first. The only breakpoints are @media (min-width:1024px) for layout
* shifts and @media (max-width:1023px) for decoration drops — all typography
* scales through the clamp() tokens,so nothing here restates a font-size
* (slicing principle #21).
*
* NOTE on the bleed/centering pair (principles #13/#14):those apply to
* mobile-only comps that pin a fixed column inside a full-viewport background.
* This comp is a real desktop design,so the page uses ordinary flow with
* `margin-inline:auto` and never computes layout from `100vw`. That sidesteps
* the scrollbar-gutter offset entirely rather than compensating for it.
*/
/* ============================================================ base */
*,*::before,*::after { box-sizing:border-box
}
html { -webkit-text-size-adjust:100%
}
body {
margin:0;
background:var(--c-cream);
color:var(--c-navy);
font-family:var(--f-sans);
line-height:1.25;
overflow-x:clip;
/* never `hidden` — that would kill any future sticky header */
}
img { display:block;
max-width:100%;
height:auto
}
ul,ol { margin:0;
padding:0;
list-style:none
}
/* MagmaSDK ships a legacy RTL indent hack in system/plugins/css/css/css.css:
*
*     ol { position:relative;
right:20px
}
*
* The CSS bundler appends that sheet AFTER the theme's own stylesheet,so a bare
* `ol` reset here would lose on document order despite equal specificity. Hence
* `html ol` (0,0,2) — it outranks the SDK's `ol` (0,0,1) wherever it lands.
*
* Without this,every <ol> on the page is shifted 20px off-centre. That is the
* numbered `.steps` list,whose four cards then sit 20px left of the section
* they are supposed to be centred in. Harmless in the standalone slice (these
* are already the initial values),load-bearing once served through the SDK.
*
* `.steps` re-declares position:relative at (0,1,0) and still wins,so the
* dotted `.steps::before` divider keeps its positioning context.
*/
html ol { position:static;
right:auto;
left:auto
}
h1,h2,h3,p { margin:0
}
em { font-style:normal
}
button { font:inherit;
color:inherit;
cursor:pointer
}
.sr-only {
position:absolute;
width:1px;
height:1px;
margin:-1px;
padding:0;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap
}
/* Honeypot. Bots fill every field they can parse;
humans never see this one.
The field stays out of the a11y tree via aria-hidden + tabindex="-1" on the
markup side,so clip-path hiding is safe here.
NOT `left:-9999px`. That idiom assumes an LTR document:in RTL it extends
the scrollable overflow 9999px to the *left*,moving the scroll origin and
exposing a huge empty gutter beside the page. Clipping in place has no
effect on layout or scroll extent in either direction. */
.hp {
position:absolute;
width:1px;
height:1px;
margin:-1px;
padding:0;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap
}
.is-pink { color:var(--c-pink)
}
/* The measured content column,1204px on the comp's 1920 canvas. */
.pain,.reviews,.recharge,.video,.lead,.process,.clients {
--inner:min(100% - (var(--gutter) * 2),var(--col-max))
}
/* ============================================================ 1. hero */
.hero {
position:relative;
isolation:isolate;
min-height:clamp(560px,155vw,720px);
overflow:hidden;
background:var(--c-navy)
}
.hero__bg {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
z-index:-1
}
/* `height:100%` would resolve to auto here — the hero sets only `min-height`,
so there is no definite height to take a percentage of,and every child's
`bottom:`/`top:` percentage would collapse to the top edge. Filling the box
with `inset:0` gives the absolute children a real containing block. */
.hero__inner { position:absolute;
inset:0
}
.hero__logo {
position:absolute;
top:4.8%;
right:71.8%;
width:8.33%;
/* 160px of 1920 — the universal 0.75 export scale */
min-width:96px;
height:auto
}
/* ---- pain stickers -------------------------------------------------------
Each sticker is a torn white paint stroke carrying a pink line icon. The
stroke is one shared asset stretched per label,so the rough edge scales
with the box instead of being clipped.
Positions are percentages of the hero box:they were placed against specific
features of the photograph,so they have to track it as the photo scales. */
/* MOBILE PLACEMENT IS NOT THE COMP'S.
The comp is a 1920-wide composition where five pills scatter around the
subject with room to spare. Reflowed into a centred wrap at phone width they
stack into two rows across the middle of the box and land squarely on her
forehead and eyes -- the photo's whole job is her expression,so that is a
real defect,not a rounding error.
Measured on the rendered page at 390px,her head occupies x 20-68% and
y 23-53% of the hero box. The pills are therefore placed AROUND that box
rather than reflowed into it:two flank the logo in the clear band above her
hair,two run down the right margin (background office blur,clear from
y 0-58%),one sits lower-left below her hand. The face box stays empty.
Desktop keeps the comp's own positions -- see the 1024px block. */
.hero__stickers { position:absolute;
inset:0;
display:block;
padding:0
}
.hero__sticker {
display:flex;
align-items:center;
gap:0.5em;
position:absolute;
width:max-content;
max-width:30%;
padding:6px 10px;
background:url(../../../design/default/css/../images/hero_stickers_bg.webp) center / 100% 100% no-repeat;
font-size:var(--fs-sticker);
font-weight:700;
line-height:0.905;
/* comp:29.86 / 33.01 */
color:var(--c-navy);
text-align:start;
white-space:nowrap;
/* Navy-tinted rather than black:the shadow reads as depth against the office
blur instead of as grime. drop-shadow (not box-shadow) because the artwork
is a torn paint stroke with real alpha -- the shadow follows the ragged
silhouette,which box-shadow would square off. */
filter:drop-shadow(0 2px 5px rgba(0,11,68,0.34))
}
.hero__sticker img { width:1.79em;
height:auto;
flex:0 0 auto
}  /* 2.1em less 15% */
/* Ring positions. `left`/`right` are used physically rather than logically:
these anchor to the photograph's composition,which does not flip with
direction,so a logical inset-inline would mirror them off the subject. */
/* Rhythm matters as much as clearance. Pinned at a shared top and a 2-3% inset
the five pills read as stuck to the frame edge -- a fallback,not a design.
So:no two share a `top`,the insets vary 3-5% so nothing lines up,and each
carries a small alternating tilt. The comp's pills are torn paper stuck on a
photo;
a few degrees of rotation is what sells that,and it costs nothing
because the face box stays empty either way.
Tilt and shadow are mobile-only -- the 1024px block resets both so the
desktop composition stays exactly as measured off the comp. */
.hero__sticker--3 { top:2.5%;
left:5%;
transform:rotate(-4deg)
}  /* left of logo,above her hair */
.hero__sticker--2 { top:6.5%;
right:4%;
transform:rotate( 3.5deg)
}  /* right of logo               */
.hero__sticker--1 { top:24%;
right:3%;
transform:rotate(-3deg)
}  /* right margin,beside her brow */
.hero__sticker--4 { top:36.5%;
right:5%;
transform:rotate( 4deg)
}  /* right margin,by her cheek  */
.hero__sticker--5 { top:47.5%;
left:3%;
transform:rotate(-5deg)
}  /* lower-left,below her hand  */
/* ---- headline lockup ----
All three brush bands centre on x=960 in the comp,so the lockup is one
centred column pinned to the bottom of the photo. */
.hero__lockup {
position:absolute;
bottom:2.6%;
left:50%;
transform:translateX(-50%);
width:100%;
display:flex;
flex-direction:column;
align-items:center;
text-align:center
}
/* The comp's longest line here is 855px inside a 912px brush — only 57px of
slack. Any horizontal padding wraps it,so the lines are nowrap and the
brush carries the breathing room in its own artwork. */
.hero__eyebrow {
display:flex;
flex-direction:column;
justify-content:center;
gap:0.05em;
width:94%;
padding:3.5% 4%;
background:url(../../../design/default/css/../images/hero_title1_bg.webp) center / 100% 100% no-repeat;
font-size:var(--fs-hero-band);
font-weight:700;
line-height:0.905;
/* comp:61.27 / 67.73 */
color:var(--c-navy-alt)
}
.hero__eyebrow em { color:var(--c-pink)
}
.hero__title {
display:flex;
align-items:center;
justify-content:center;
width:66%;
padding:2% 3%;
margin-top:-1.5%;
background:url(../../../design/default/css/../images/hero_subtitle_bg.webp) center / 100% 100% no-repeat;
font-size:var(--fs-hero-h1);
font-weight:700;
line-height:1;
color:var(--c-white)
}
/* Two-layer lockup,not a text-shadow:the comp holds the string twice,white
behind and #B6015D in front,offset a hard ~2px. A shadow would blur it. */
.hero__sub {
position:relative;
display:grid;
place-items:center;
width:47%;
padding:1.6% 3%;
margin-top:-2%;
white-space:nowrap;
background:url(../../../design/default/css/../images/hero_subsubtitle_bg.webp) center / 100% 100% no-repeat;
font-size:var(--fs-hero-sub);
font-weight:400;
line-height:1
}
.hero__sub-shadow,
.hero__sub-face { grid-area:1 / 1
}
.hero__sub-shadow { color:var(--c-white);
transform:translateY(-2px)
}
.hero__sub-face { color:var(--c-pink-deep)
}
/* ============================================================ 2. pain band */
/* Comp:band is 203 tall for 3 lines at 49/58.8 = 176.4,leaving 13px each
side. The band is deliberately tight — it reads as a stripe,not a section. */
.pain {
background:var(--c-yellow);
padding:clamp(12px,0.693vw,13px) var(--gutter)
}
.pain__copy {
width:var(--inner);
margin-inline:auto;
font-size:var(--fs-pain);
font-weight:700;
line-height:1.2;
/* comp:58.8 / 49 */
color:var(--c-navy);
text-align:center
}
/* ============================================================ 3. joy */
.joy { position:relative;
isolation:isolate
}
/* The two battery graphics flanking the swimmers are baked into this file —
they are not separate elements. */
.joy__bg { width:100%;
height:auto
}
/* Same correction as the hero,and worse here before it:`align-content:center`
parked all eight pills dead centre,which at 390px is exactly her face and
chest. Measured on the rendered page,her hair and face occupy x 24-59% /
y 13-49%,her torso x 33-66% below that,her arm the bottom-left corner,and
the cocktail x 70-93% from y 52%. The clear ground is the sky band along the
top and the two pool margins,so the eight pills go there:two up top,three
down each side,none over her. */
.joy__stickers { position:absolute;
inset:0;
display:block;
padding:0
}
.joy__sticker {
position:absolute;
display:flex;
align-items:center;
max-width:30%;
gap:0.47em;
padding:7px 11px;
border-radius:var(--radius-pill);
background:var(--c-white);
box-shadow:var(--shadow-sticker);
font-weight:700;
line-height:1.03;
color:var(--c-navy);
white-space:nowrap;
/* One size for all eight on mobile:the comp's 25->41px emphasis ladder is
unreadable once every step is squeezed into a 13-17px range. The ladder is
restored at desktop,where the differences actually read. */
font-size:clamp(11px,3vw,16px)
}
/* 1.9em,measured off four comp pills at four different type sizes (icon
diameter / font-size = 1.88,1.90,1.91,1.91). It is NOT the 0.75 export
rule — these discs are placed independently of their native export size. */
.joy__sticker img { width:1.9em;
height:auto;
flex:0 0 auto
}
/* Top band,then a column down each pool margin. Physical left/right for the
same reason as the hero:these track the photograph,not the text direction. */
.joy__sticker--praise   { top:2%;
left:3%
}
.joy__sticker--plan     { top:2%;
right:3%
}
.joy__sticker--concepts { top:15%;
left:1.5%
}
.joy__sticker--ceo      { top:15%;
right:2%
}
.joy__sticker--flying   { top:28%;
left:1.5%
}
.joy__sticker--calm     { top:28%;
right:2%
}
.joy__sticker--rate     { top:41%;
left:1.5%
}
.joy__sticker--full     { top:41%;
right:2%
}
/* ============================================================ 4. reviews */
/* Comp:cards sit at y2020 in a cream region opening at y1917 — 103px of air. */
.reviews { padding:clamp(32px,5.365vw,103px) var(--gutter) 0
}
.reviews__track {
display:grid;
grid-auto-flow:column;
grid-auto-columns:328px;
/* comp:328 wide on a 356.3 pitch */
gap:28px;
width:min(100% - (var(--gutter) * 2),1753px);
margin-inline:auto;
overflow-x:auto;
scroll-snap-type:x mandatory;
padding-bottom:8px;
scrollbar-width:thin
}
.review {
scroll-snap-align:start;
padding:18px;
border-radius:var(--radius-card);
background:var(--c-white);
box-shadow:var(--shadow-card)
}
/* row-reverse,because the head is the one place the card reads left-to-right:
the comp puts the avatar at the physical LEFT and the Google mark at the
physical RIGHT. Plain `row` in an RTL document mirrors both to the wrong
side. Reversing the flow beats reordering the DOM — the avatar belongs
before the name it labels. */
.review__head { display:flex;
flex-direction:row-reverse;
align-items:center;
gap:10px
}
.review__avatar {
display:grid;
place-items:center;
flex:0 0 auto;
width:46px;
height:46px;
/* comp:46x46,measured off the disc */
border-radius:50%;
background:#0081e8;
color:var(--c-white);
font-size:var(--fs-review-name);
font-weight:700
}
.review__meta { flex:1 1 auto;
min-width:0
}
.review__name { font-size:var(--fs-review-name);
font-weight:700;
color:var(--c-black)
}
.review__date { font-size:var(--fs-review-body);
color:var(--c-grey)
}
.review__google { flex:0 0 auto;
width:24px;
height:24px
}
.review__stars {
margin:12px 0 10px;
/* Comp:the five glyphs span 103px and stand 17px tall,centred on the card.
At --fs-review-name with 2px tracking they came out 87x10 and hard against
the trailing edge — half the height the comp gives them,so the rating read
as fine print instead of the card's loudest element. */
color:var(--c-amber);
font-size:clamp(15px,1.302vw,25px);
letter-spacing:0;
text-align:center
}
.review__body {
font-size:var(--fs-review-body);
line-height:1.2;
/* comp:20.45 / 17.04 */
color:var(--c-black);
text-align:center
}
/* ============================================================ 5. recharge */
/* Comp:100px between the review cards (end y2340) and the title (top y2440). */
.recharge {
padding:clamp(40px,5.208vw,100px) var(--gutter) 0;
text-align:center
}
.recharge__title,
.recharge__outro,
.recharge__body,
.features {
width:var(--inner);
margin-inline:auto
}
.recharge__title {
display:flex;
flex-direction:column;
gap:0.12em;
font-size:var(--fs-h2);
font-weight:700;
line-height:1.1;
color:var(--c-navy)
}
/* The pink stroke underlines "Human Recharge" in the TITLE — comp x540-967,
y2688-2697 — not the outro heading,where the decorative-anchor pass (#10)
first guessed it. Padding on an inline box does not grow the line box,so
the stroke drops into the existing 31px gap above the yellow marker instead
of pushing the video block 36px down the page. */
.recharge__title em {
color:var(--c-pink);
padding-bottom:0.42em;
background:url(../../../design/default/css/../images/section3_graphic_underline.webp) bottom center / 100% auto no-repeat
}
/* The yellow marker behind "האירוע שהופך לתוצאה!" is a delivered brush asset,
not a CSS rectangle — it has torn edges a background-color cannot make. */
.recharge__title-hl {
align-self:center;
/* Clears the pink underline on the "Human Recharge" line above. The marker
is a brush asset with its own bleed,so at the title's tight 0.12em gap it
covered the stroke rather than sitting under it. */
margin-top:0.22em;
padding:0.06em 0.5em;
background:url(../../../design/default/css/../images/section3_yellow_highlight_bg.webp) center / 100% 100% no-repeat;
color:var(--c-navy-alt)
}
.recharge__body {
margin-top:clamp(20px,3.125vw,60px);
/* comp:title y2760 -> body y2820 */
font-size:var(--fs-body);
font-weight:400;
line-height:1.35;
color:var(--c-navy)
}
.recharge__body strong { font-weight:700
}
/* ---- feature cards ---- */
.features {
display:grid;
gap:clamp(8px,0.63vw,12px);
margin-top:clamp(28px,3.4375vw,66px);
/* comp:body y3036 -> cards y3102 */
}
.feature {
display:flex;
align-items:center;
justify-content:center;
gap:clamp(8px,0.63vw,12px);
padding:clamp(10px,0.68vw,13px);
border:1px solid rgba(0,11,68,0.14);
border-radius:var(--radius-card);
background:var(--c-white);
text-align:start
}
.feature__icon { flex:0 0 auto;
width:clamp(42px,3.23vw,62px);
height:auto
}
.feature__text {
font-size:var(--fs-card);
font-weight:400;
line-height:1.2;
/* comp:3 lines in a 156 card at 13px padding */
color:var(--c-navy)
}
.feature__text strong { display:block;
font-weight:700
}
.recharge__outro {
margin-top:clamp(28px,3.385vw,65px);
/* comp:cards end y3257 -> outro ink y3350 = 93px */
font-size:var(--fs-h2);
font-weight:700;
color:var(--c-navy)
}
.recharge__outro em { color:var(--c-pink)
}
/* ============================================================ 6. video */
/* Comp:34px above the frame (outro y3400 -> video y3434) and 98px below
(video y4110 -> cream ends y4208). */
.video { padding:clamp(16px,1.77vw,34px) var(--gutter) clamp(40px,5.1vw,98px)
}
.video__frame {
position:relative;
width:var(--inner);
margin-inline:auto;
aspect-ratio:1204 / 678;
background:#000 center / cover no-repeat;
border-radius:4px;
overflow:hidden
}
.video__frame iframe { width:100%;
height:100%;
border:0;
display:block
}
.video__play {
position:absolute;
inset:0;
display:grid;
place-items:center;
width:100%;
height:100%;
border:0;
background:transparent
}
.video__play-triangle {
display:grid;
place-items:center;
width:clamp(64px,5.2vw,100px);
aspect-ratio:1;
border:3px solid var(--c-white);
border-radius:50%;
transition:transform 0.2s ease
}
.video__play-triangle::after {
content:"";
font-size:clamp(18px,1.5vw,28px);
border-style:solid;
border-width:0.55em 0.9em 0.55em 0;
/* physical,so RTL cannot flip it */
border-color:transparent var(--c-white) transparent transparent;
margin-inline-end:0.15em
}
.video__play:hover .video__play-triangle { transform:scale(1.07)
}
.video__frame.is-playing .video__play { display:none
}
/* ============================================================ 7. lead form */
.lead {
position:relative;
overflow:hidden;
padding:clamp(24px,2.6vw,50px) var(--gutter) clamp(20px,1.98vw,38px);
background:var(--c-navy);
text-align:center
}
/* Paper-plane flourish. Horizontal-rhythm decoration only — dropped on mobile
rather than shrunk (#20). */
.lead__plane {
position:absolute;
top:18%;
right:4%;
width:clamp(120px,15vw,289px);
height:auto;
pointer-events:none
}
.lead__title {
display:flex;
flex-direction:column;
width:var(--inner);
margin-inline:auto;
font-size:var(--fs-h2);
font-weight:700;
line-height:1.15;
color:var(--c-white)
}
/* The yellow underline is deliberately NOT centred on the column — in the comp
it sits at x512–835 while the column centres on 960,so it underscores only
the trailing words of this line. Anchored to the text,not the column. */
.lead__title-pop {
position:relative;
padding-bottom:0.22em;
color:var(--c-pink)
}
.lead__title-pop::after {
content:"";
position:absolute;
bottom:0;
left:21%;
width:clamp(160px,17.3vw,332px);
height:9px;
background:url(../../../design/default/css/../images/section4_yellow_underline.webp) center / 100% 100% no-repeat
}
.lead__form {
display:grid;
gap:10px;
/* comp:five 231px boxes,10px between */
width:var(--inner);
margin:clamp(22px,2.4vw,46px) auto 0;
/* comp:title y4416 -> form y4462 */
}
.lead__field input,
.lead__field select,
.lead__submit {
width:100%;
min-height:clamp(46px,2.4vw,46px);
padding:0 16px;
border:0;
border-radius:4px;
font-family:var(--f-sans);
font-size:var(--fs-field);
color:var(--c-navy)
}
.lead__field input,
.lead__field select { background:var(--c-white)
}
.lead__field input::placeholder { color:var(--c-navy);
opacity:1
}
/* A tel input is treated as LTR content,which parks the Hebrew placeholder on
the left while every neighbouring field reads from the right. Digits are
neutral-to-LTR and still type in the correct order under an RTL box. */
.lead__field input[type="tel"] { direction:rtl;
text-align:right
}
.lead__field--select { position:relative
}
.lead__field select {
/* "איזה Human Recharge" measures 180px;
a 1fr column leaves 177px once the
40px arrow gutter is taken,so the placeholder ran under the chevron.
Tightening the gutter to 32px restores 5px of slack. */
appearance:none;
padding-inline-end:32px;
background-image:url(../../../design/default/css/../images/section4_selectbox_arrow.webp);
background-repeat:no-repeat;
background-position:left 12px center;
background-size:14px auto
}
.lead__submit {
display:flex;
align-items:center;
justify-content:center;
/* The label needs 184px but a 1fr column leaves 164px,so it wrapped to two
lines and the button grew to double the height of the fields beside it.
Tighter padding,a smaller plane and 1px off the type buy the room back;
nowrap guarantees the row height even if a longer label ever lands here. */
gap:6px;
padding-inline:10px;
white-space:nowrap;
background:var(--c-yellow);
font-size:clamp(18px,1.302vw,25px);
font-weight:700;
transition:filter 0.15s ease
}
.lead__submit img { width:24px;
height:auto
}
.lead__submit:hover { filter:brightness(0.94)
}
.lead__consent {
display:flex;
align-items:center;
justify-content:center;
gap:9px;
cursor:pointer;
width:var(--inner);
margin:clamp(14px,1.72vw,33px) auto 0;
/* comp:form y4514 -> consent y4547 */
font-size:var(--fs-field);
color:var(--c-white)
}
.lead__consent input {
flex:0 0 auto;
width:17px;
height:17px;
margin:0;
accent-color:var(--c-yellow);
cursor:pointer
}
.lead__consent input.is-error { outline:2px solid var(--c-pink);
outline-offset:2px
}
.lead__status,
.footer__status {
margin-top:10px;
font-size:var(--fs-field);
color:var(--c-yellow)
}
/* Collapse entirely while empty. `min-height` here would open a permanent gap
the comp does not have,and `visibility:hidden` would still hold the row. */
.lead__status:empty,
.footer__status:empty { margin:0
}
.lead__field input.is-error,
.lead__field select.is-error,
.footer__form input.is-error { outline:2px solid var(--c-pink)
}
/* ============================================================ 8. gallery */
.gallery {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:clamp(4px,0.47vw,9px)
}
.gallery img { width:100%;
height:100%;
object-fit:cover
}
/* ============================================================ 9. process */
.process {
padding:clamp(40px,4.01vw,77px) var(--gutter) 0;
/* comp:cream y5341 -> title y5418 */
text-align:center
}
.process__title,
.steps {
width:var(--inner);
margin-inline:auto
}
.process__title {
font-size:var(--fs-h2);
font-weight:700;
color:var(--c-navy)
}
.process__title em { color:var(--c-pink)
}
.steps {
position:relative;
display:grid;
gap:clamp(32px,3.4vw,64px);
margin-top:clamp(32px,3.9vw,75px);
/* comp:title y5481 -> badge y5556 */
}
.step { display:grid;
justify-items:center
}
.step__badge {
display:grid;
place-items:center;
width:clamp(34px,2.5vw,48px);
aspect-ratio:1;
border-radius:50%;
background:var(--c-navy);
color:var(--c-white);
font-size:var(--fs-step);
font-weight:700
}
.step__icon {
width:clamp(72px,5.15vw,99px);
height:auto;
margin-top:clamp(10px,1vw,18px)
}
.step__title {
margin-top:clamp(10px,1vw,18px);
font-size:var(--fs-step);
font-weight:700;
color:var(--c-navy)
}
.step__body {
margin-top:0.25em;
font-size:var(--fs-step);
font-weight:400;
line-height:1.25;
color:var(--c-navy)
}
/* ============================================================ 10. clients */
.clients {
padding:clamp(24px,2.6vw,50px) var(--gutter) clamp(40px,6.5vw,125px);
text-align:center
}
.clients__title {
width:var(--inner);
margin-inline:auto;
font-size:var(--fs-h2);
font-weight:700;
color:var(--c-navy)
}
.clients__title em { color:var(--c-pink)
}
/* The comp's five logo cards span the content column exactly (x358–1561) and
the arrows sit OUTSIDE it. So the track owns the full column and the arrows
are pulled out of flow — otherwise they eat column width and the fifth card
is pushed into an overflow scroll it never has in the design. */
.clients__carousel {
position:relative;
width:var(--inner);
margin:clamp(24px,2.6vw,50px) auto 0
}
.clients__track {
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(150px,1fr);
gap:clamp(6px,0.63vw,12px);
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none
}
.clients__track::-webkit-scrollbar { display:none
}
.clients__track li { scroll-snap-align:start
}
.clients__track img {
width:100%;
height:auto;
border-radius:6px;
box-shadow:var(--shadow-card)
}
.clients__arrow {
position:absolute;
top:50%;
width:clamp(30px,2.2vw,42px);
aspect-ratio:1;
border:0;
border-radius:50%;
background:var(--c-navy);
transform:translateY(-50%)
}
/* Physical sides:the arrows flank the track on screen regardless of writing
direction,so `right`/`left` here are intentional,not a logical-property
oversight. */
.clients__arrow--prev { right:0
}
.clients__arrow--next { left:0
}
/* Chevron drawn from a rotated corner — no arrow asset was exported. */
.clients__arrow::before {
content:"";
position:absolute;
top:50%;
left:50%;
width:28%;
height:28%;
border-top:2px solid var(--c-white);
border-right:2px solid var(--c-white)
}
.clients__arrow--next::before { transform:translate(-50%,-50%) rotate(-135deg)
}
.clients__arrow--prev::before { transform:translate(-50%,-50%) rotate(45deg)
}
.clients__dots {
display:flex;
justify-content:center;
gap:8px;
margin-top:clamp(14px,1.4vw,26px)
}
.clients__dots button {
width:10px;
height:10px;
padding:0;
border:0;
border-radius:50%;
background:rgba(0,11,68,0.22)
}
.clients__dots button.is-active { background:var(--c-navy)
}
/* ============================================================ 11. footer */
.footer {
display:grid;
font-family:var(--f-plex)
}
.footer__contact {
padding:clamp(24px,1.51vw,29px) var(--gutter) clamp(36px,3.65vw,70px);
background:var(--c-pink);
color:var(--c-white);
text-align:center
}
.footer__title {
font-family:var(--f-sans);
font-size:var(--fs-footer-h2);
font-weight:700
}
.footer__form {
display:grid;
gap:10px;
max-width:420px;
margin:clamp(16px,1.6vw,30px) auto 0
}
.footer__form input {
width:100%;
min-height:46px;
padding:0 14px;
border:0;
border-radius:3px;
background:var(--c-white);
font-family:var(--f-plex);
font-size:var(--fs-field);
color:var(--c-navy-alt)
}
.footer__form input::placeholder { color:var(--c-navy-alt);
opacity:1
}
.footer__submit {
min-height:46px;
border:0;
border-radius:3px;
background:var(--c-navy);
color:var(--c-white);
font-family:var(--f-sans);
font-size:var(--fs-submit-footer);
font-weight:700;
transition:filter 0.15s ease
}
.footer__submit:hover { filter:brightness(1.25)
}
.footer__hours {
margin-top:clamp(14px,1.04vw,20px);
font-family:var(--f-sans);
font-size:var(--fs-hours);
line-height:1.3
}
.footer__hours strong { display:block;
font-weight:700
}
.footer__hours bdi { font-weight:400
}
.footer__social {
display:flex;
justify-content:center;
gap:clamp(14px,1.4vw,26px);
margin-top:clamp(10px,0.52vw,10px);
/* Icons are marks,not language:RTL would reverse them out of the comp's
Facebook / Instagram / TikTok / WhatsApp order. */
direction:ltr
}
.footer__social img { height:clamp(18px,1.1vw,21px);
width:auto
}
.footer__about {
display:grid;
gap:clamp(12px,1.04vw,20px);
padding:clamp(24px,1.82vw,35px) var(--gutter);
background:var(--c-navy);
color:var(--c-white);
text-align:center
}
.footer__logo {
width:clamp(120px,8.3vw,160px);
height:auto;
margin-inline:auto
}
.footer__links { display:grid;
gap:0.6em
}
.footer__links a {
color:var(--c-white);
font-size:var(--fs-field);
font-weight:300;
text-decoration:none
}
.footer__links a:hover { text-decoration:underline
}
.footer__copy {
display:grid;
gap:1em;
font-size:var(--fs-field);
font-weight:300;
line-height:1.45
}
.credit {
padding:14px var(--gutter);
background:var(--c-white);
color:var(--c-black);
font-size:var(--fs-credit);
text-align:center
}
/* The credit line is LTR English wrapped in an RTL document — without this the
heart and the People mark reorder around the words. */
.credit { direction:ltr
}
.credit__heart {
font-size:1.05em;
line-height:1;
vertical-align:-0.08em
}
/* TODO(operator):swap for the People wordmark once it is exported — the comp
sets this as a logo,not as type. See delta-manifest section B. */
.credit__mark { font-weight:700
}
/* ============================================================ desktop
Layout shifts and decoration drops only. No font-size lives in here —
every size is already fluid via clamp() in tokens.css (#21). */
@media (min-width:1024px) {
/* Comp lockup geometry:the three brush bands at their authored ratios,
each line on one row,centred on x=960. */
/* 920 confirmed against the comp's yellow pain band,which starts at y920.
(Do not re-derive this from a cumulative sum of scanned colour bands — that
scan drops runs under 25px,so the running total lands ~28px short and
makes the hero look too tall when it is correct.) */
.hero { aspect-ratio:1920 / 920;
min-height:0
}
/* Comp scatter. Positions are percentages of the 1920x920 photo — each
sticker was placed against a specific face or object,so they track the
photo as it scales. Below 1024 there is no room for this composition and
the base cluster layout takes over. */
.hero__stickers { position:absolute;
inset:0;
display:block;
padding:0
}
.hero__sticker { position:absolute;
left:auto;
max-width:none;
padding:1.1% 1.4%;
transform:none;
filter:none
}
.hero__sticker--1 { top:10.4%;
right:36.4%
}
.hero__sticker--2 { top:26.5%;
right:29.5%
}
.hero__sticker--3 { top:40.2%;
right:23.2%
}
.hero__sticker--4 { top:27.2%;
right:64.1%
}
.hero__sticker--5 { top:41.7%;
right:68.6%
}
.joy__stickers { position:absolute;
inset:0;
display:block;
padding:0
}
/* Padding measured off the comp,not chosen:pill height minus two lines of
type at line-height 1.03 gives 0.33-0.39em across five pills;
the icon's
inset from the pill's trailing edge gives 0.40-0.42em. The pills read as
tight lozenges,and 0.85em/1.1em inflated every one of them by ~1.4x. */
.joy__sticker { position:absolute;
left:auto;
max-width:none;
padding:0.35em 0.41em
}
/* Positions and sizes are read off the comp pill boxes,not estimated:
`right` is the pill's right edge as a share of 1920,`top` its offset into
the 793px-tall photo. Sizes are NOT uniform — they ladder 24.7 -> 41.1px
with the weight of the claim,and that variation carries the hierarchy. */
/* The pills do NOT hug their text. Every comp pill has the same 2.72:1 box
ratio (measured 2.63-2.76 across all eight),so they are one master lozenge
scaled by importance,with whatever slack the shorter labels leave sitting
at the leading edge. Letting flex hug the content made each pill as narrow
as its own text — up to 88px short — so the width is set explicitly and the
icon+text stay flex-start,which in RTL pins them to the trailing edge the
way the comp does. */
.joy__sticker--plan     { top:7.7%;
right:62.0%;
width:9.64%;
font-size:clamp(11px,1.288vw,25px)
}
.joy__sticker--praise   { top:9.6%;
right:36.1%;
width:10.57%;
font-size:clamp(12px,1.398vw,27px)
}
.joy__sticker--concepts { top:19.4%;
right:66.8%;
width:12.86%;
font-size:clamp(13px,1.727vw,33px)
}
.joy__sticker--ceo      { top:21.0%;
right:22.0%;
width:16.04%;
font-size:clamp(15px,2.138vw,41px)
}
.joy__sticker--calm     { top:35.5%;
right:62.6%;
width:10.57%;
font-size:clamp(12px,1.398vw,27px)
}
.joy__sticker--flying   { top:41.1%;
right:26.5%;
width:12.86%;
font-size:clamp(13px,1.727vw,33px)
}
.joy__sticker--full     { top:50.4%;
right:67.1%;
width:15.78%;
font-size:clamp(14px,2.111vw,40px)
}
.joy__sticker--rate     { top:58.9%;
right:20.8%;
width:15.37%;
font-size:clamp(14px,2.052vw,39px)
}
/* All three bands run wider than the comp's own box (912/601/408 of 1920).
The brush strokes are hand-torn:the last ~5% at each end is fray and
speckle,not solid paint. Type set to the comp's literal box width lands
in that fray and reads as spilling off the stroke,so each box is opened
up until the text sits on solid colour. The artwork scales with the box,
which keeps the stroke's own proportions intact. */
.hero__eyebrow {
width:51%;
/* comp box 47.5% */
aspect-ratio:912 / 188;
padding:0;
white-space:nowrap
}
.hero__title {
width:34%;
/* comp box 31.3% */
aspect-ratio:601 / 129;
padding:0;
margin-top:-0.6%
}
.hero__sub {
width:23%;
/* comp box 21.25% */
aspect-ratio:408 / 76;
padding:0;
margin-top:-0.78%;
/* comp:pink starts 15px before navy ends */
}
.features { grid-template-columns:repeat(3,1fr)
}
.gallery { grid-template-columns:repeat(4,1fr)
}
.lead__form { grid-template-columns:repeat(5,1fr)
}
.clients__track { grid-auto-columns:minmax(0,1fr)
}
/* Comp:arrow centres sit at x305 and x1615,~54px outside the 358–1561
column. Physical sides on purpose — the arrows flank the track visually. */
/* The comp puts the arrows in the gutter,outside the 1204 column. A flat
-3.9vw works at 1920 but exceeds the gutter as the viewport approaches the
column width — at 1280 the gutter is only 38px,so -49.9px pushed the page
10px wide. max() clamps the offset to the gutter that actually exists:
the arrow's outer edge lands flush with the viewport,never past it.
(100vw is the layout viewport here,i.e. scrollbar excluded — the same
box the overflow is measured against,so the comparison is exact.) */
.clients { --arrow-out:max(-3.9vw,calc((var(--col-max) - 100vw) / 2))
}
.clients__arrow--prev { right:var(--arrow-out)
}
.clients__arrow--next { left:var(--arrow-out)
}
.steps {
grid-template-columns:repeat(2,1fr);
column-gap:clamp(40px,4.2vw,80px)
}
/* The comp's dotted divider running down the centre gap. */
.steps::before {
content:"";
position:absolute;
top:4%;
bottom:4%;
left:50%;
width:2px;
background:repeating-linear-gradient(
var(--c-pink) 0 5px,
transparent 5px 11px
)
}
/* Footer panels:navy 1181 on the right,pink 739 on the left.
Under `dir="rtl"` grid column 1 is the RIGHTMOST,so the navy panel takes
column 1 and the pink panel column 2 — explicit placement rather than
relying on DOM order,which reads backwards from the comp. */
.footer { grid-template-columns:61.5% 38.5%
}
/* grid-row is required,not decorative:naming only the column lets
auto-placement push the second panel onto row 2 (the cursor has already
passed column 1),which lays the two panels out on a diagonal. */
.footer__about { grid-column:1;
grid-row:1
}
.footer__contact { grid-column:2;
grid-row:1
}
/* The navy panel is itself two columns in the comp:service links on the
left (x873–1073),logo + copy on the right (x1222–1562). Note the right
edge — 1562 is the page's own content column edge,so the footer copy
aligns to the same column as every section above it,NOT to the panel. */
.footer__about {
/* Measured:logo+copy column 340 wide (x1222–1562),links column 200
(x873–1073). `auto` on the first track lets the copy claim the whole
row and starves the links into one-word-per-line. */
grid-template-columns:clamp(190px,17.7vw,340px) minmax(0,1fr);
column-gap:clamp(24px,5.2vw,100px);
/* leaves the links column ~250,enough for the longest service line on one row */
padding-inline:clamp(24px,18.65vw,358px) clamp(24px,6.98vw,134px);
align-content:start;
justify-items:start;
text-align:start
}
.footer__logo  { grid-column:1;
grid-row:1;
margin-inline:0
}
.footer__copy  { grid-column:1;
grid-row:2
}
.footer__links { grid-column:2;
grid-row:1
}
}
/* Horizontal-rhythm decoration has no job in a narrow column — drop it rather
than shrink it into a "what is that tiny thing" artifact (#20). */
/* Genuinely mobile-only:dropping ornament,and re-centring a decoration that
is deliberately off-centre at desktop. Everything else is expressed in the
base layer (#21). */
@media (max-width:1023px) {
.lead__plane { display:none
}
.lead__title-pop::after { left:50%;
transform:translateX(-50%)
}
.hero__logo { top:4%;
right:50%;
width:26%;
transform:translateX(50%)
}
.joy__bg {
height:clamp(400px,105vw,560px);
object-fit:cover;
object-position:center
}
}
.seoform span {
float:left;
width:100px
}
.seoform div input {
width:500px
}
.seoform div {
float:left;
width:100%;
margin-bottom:15px
}
/* css fixes */
ol {
position:relative;
right:20px
}
a{
outline:0
}
input[type="image"],
input[type="submit"],
input[type="button"],
button {
cursor:pointer
}
.ie a img {
border:0
}
.hidden {
position:absolute;
left:0;
top:-100000px
}
/*
* span {
display:inline-block
}
*/
/*
#lbuttons,
#lbuttons div,
#lbuttons a,
#lbuttons img,
.fxc #subtoolbar,
.fxc #admin_panel {
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
transform:2DValue(val) 3DValueSetToNull(0);
transform:2DValue(val);
-webkit-transform :translateZ(0);
-o-transform :translateZ(0);
-webkit-transform :translateZ(0);
transform :translateZ(0);
-webkit-transition:all 0.5s linear
}
.fxc #admin_pusher,
.fxc #sys_website {
-webkit-transition:all 0.5s linear
}
*/
body {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
min-width:100%;
min-height:100%;
padding:0;
margin:0
}
p {
padding:0;
margin:0
}
div.bs {
float:right
}