/* about.css - "אודות השדרה" page.
Auto-loaded by the SDK for ?contents=about only (css/<page>.css convention),so none
of this weighs on the home page.
Sliced from pages_png/אודות.png. Comp canvas is 2666px wide,identical to the home
comp,so the same fluid rule applies:a comp px N becomes clamp(MOBILE_MIN,(N/26.66)vw,Npx).
At >=2666px viewport the page is pixel-accurate to the comp;
below that it scales down
smoothly. Tokens,.wrap,.btn-cta and .title--underline all come from css.css - this
file only adds what is unique to this page. Asset URLs stay RELATIVE (../files/...)
because the SDK's bundler rewrites them when it writes cache/css/<theme>/cache__*.css.
Every size below was MEASURED off the comp,not eyeballed:font sizes come from the
ink-width ratio of a matching line of text against a trial render (robust,unlike
ink-height,which silently changes with whether thin ascenders survive antialiasing),
and vertical spacing from the ink-band positions of each line. */
/* ---- a1 hero ----
Same construction as the home hero:one full-bleed background image carrying both the
navy field and the photo (about-hero.webp is 2560x1127,and the comp's hero band is
2666x1173 - the same 2.27 ratio),with the nav and caption laid over it in flow. */
.hero--about{aspect-ratio:2560/1127;
background-image:url(../../../design/default/css/../files/about-hero.webp)}
/* The caption sits in the navy half,beside the dome. It is pushed there with
padding-inline-start rather than a max-width,because .hero__caption is also .wrap -
shrinking .wrap would fight its own margin-inline:auto and just re-centre the block.
Padding measured from the wrap's border box (420..2246 at comp width) to put the
caption's inline-start edge on comp x=1390,where the comp's title,body and button
all line up. Text stays start-aligned:flush right,ragged left. */
.hero--about .hero__caption{padding-inline-start:clamp(var(--gutter),32.11vw,856px);
padding-block:clamp(24px,4.73vw,126px) 0;
text-align:start}
.hero__title{color:#fff;
font-size:clamp(34px,4.95vw,132px);
font-weight:700;
line-height:1.1;
margin-block-end:clamp(6px,.45vw,12px)}
.hero--about .hero__lead{max-width:none;
font-weight:300;
font-size:clamp(21px,2.33vw,62px);
line-height:1.40}
.hero--about .btn-cta{margin-block-start:clamp(8px,.79vw,21px)}
/* Botanical line-art,bleeding off the inline-end (left) edge exactly as in the comp.
Decorative only:empty alt,and dropped entirely on narrow screens rather than
shrunk,since at phone width it has no layout job and just reads as a stray mark. */
.hero__deco{position:absolute;
inset-inline-end:0;
top:26%;
width:clamp(130px,16.95vw,452px);
height:auto;
pointer-events:none;
user-select:none}
/* ---- section titles ----
The comp's underline is 166px of muted tan,not the 90px of bright gold that css.css
ships. css.css is left alone on purpose:that rule also paints the home page's
.svc__title,and the home slice is approved and frozen. Re-measure the home comp
before touching the global.
position:relative is required here and is NOT on .title--underline in css.css - it
sits on each individual title class (.svc__title,.contact__title) instead. Without
it the ::after escapes to the nearest positioned ancestor and lands on top of the
text,which is exactly what the first trial render did.
The clear space below the title is measured per section and is genuinely different in
each (49 / 30 / 25px of padding),so these can't be collapsed into one rule. */
.intro__title,
.values__title,
.belief__title{position:relative}
.intro__title.title--underline{padding-block-end:clamp(18px,1.84vw,49px)}
.values__title.title--underline{padding-block-end:clamp(12px,1.13vw,30px)}
.belief__title.title--underline{padding-block-end:clamp(10px,.94vw,25px)}
.intro__title.title--underline::after,
.values__title.title--underline::after,
.belief__title.title--underline::after{width:clamp(60px,6.23vw,166px);
background:var(--c-tan)}
/* ---- a2 intro ---- */
.intro{background:var(--c-cream);
padding-block:clamp(44px,4.73vw,126px) clamp(58px,6.49vw,173px)}
.intro__title{text-align:center;
color:var(--c-navy);
font-size:clamp(30px,3.64vw,97px);
font-weight:700;
line-height:1}
.intro__body{max-width:1660px;
margin-inline:auto;
text-align:center;
color:var(--c-ink);
font-size:clamp(20px,2.18vw,58px);
line-height:1.29;
margin-block-start:clamp(12px,.90vw,24px);
overflow-wrap:anywhere}
/* ---- a3 belief ----
Another single full-bleed image:about-belief.webp is 2560x799 and the comp band is
2666x832 - both 3.204,so the photo's candle/plant composition on the inline-start
side and the tan field it fades into are baked into the asset. No overlay needed. */
.belief{background:#eadfd2 url(../../../design/default/css/../files/about-belief.webp) center/cover no-repeat;
aspect-ratio:2560/799;
display:flex;
align-items:center;
padding-block-end:clamp(0px,.56vw,15px)}
.belief .wrap{width:100%}
/* The text block is centred on the PAGE (comp:spans x 697-1970 of 2666,midpoint 1333
= exact page centre),not offset into the tan half. */
.belief__text{max-width:1370px;
margin-inline:auto}
.belief__title{text-align:center;
color:var(--c-navy);
font-size:clamp(26px,3.11vw,83px);
font-weight:700;
line-height:1;
margin-block-end:clamp(15px,1.24vw,33px)}
.belief__body{color:var(--c-ink);
font-size:clamp(21px,2.12vw,56px);
line-height:1.35;
text-align:start;
overflow-wrap:anywhere}
/* ---- a4 values ---- */
.values{background:var(--c-cream);
padding-block:clamp(36px,3.19vw,85px) clamp(42px,3.90vw,104px)}
.values__title{text-align:center;
color:var(--c-navy);
font-size:clamp(26px,3.11vw,83px);
font-weight:700;
line-height:1}
/* 3 columns;
the grid box is 1435px wide centred with a 58px gutter (comp:card text
columns start every 478px,midpoint of the middle card = 1333 = page centre). */
.values__grid{list-style:none;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:clamp(44px,6.15vw,164px) clamp(20px,2.18vw,58px);
max-width:1435px;
margin:clamp(36px,3.94vw,105px) auto 0}
.values__card{text-align:center}
/* Fixed height + contain + bottom keeps every card's title on one baseline. The six
icons have different natural aspects,so height:auto would stagger the row - which is
exactly what the first trial render did,and what the comp does not do. */
.values__icon{width:clamp(64px,7.46vw,199px);
height:clamp(70px,8.21vw,219px);
object-fit:contain;
object-position:center bottom;
margin-inline:auto}
.values__card-title{color:var(--c-navy);
font-size:clamp(22px,2.25vw,60px);
font-weight:700;
line-height:1;
margin-block:clamp(22px,2.33vw,62px) clamp(2px,.23vw,6px)}
.values__card-body{color:var(--c-ink);
font-size:clamp(20px,2.14vw,57px);
line-height:1.35;
overflow-wrap:anywhere}
/* ---- narrow screens ----
Kept deliberately small:the base above is fluid,so only genuine layout shifts and
the decoration drop belong here. */
@media (max-width:900px){
/* The hero's 2560/1127 ratio starves the caption of height on a phone,and the dome
baked into the asset would sit behind the text. Release the ratio,pin the image to
the block-start,and let the caption set the height below it. */
.hero--about{aspect-ratio:auto;
background-size:100% auto;
background-position:50% 0;
padding-block-end:clamp(32px,8vw,64px)}
.hero--about .hero__caption{padding-inline-start:var(--gutter);
padding-block-start:calc(100vw * 1127 / 2560)}
.hero__deco{display:none}
/* Same treatment for the belief band:image on top,copy beneath it. */
.belief{aspect-ratio:auto;
background-size:100% auto;
background-position:50% 0;
display:block;
padding-block:calc(100vw * 799 / 2560) clamp(32px,8vw,64px)}
.belief__body{text-align:center}
.values__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.values__grid{grid-template-columns:1fr}
}