form {
display:inline
}
/* Hashdera theme — ported verbatim from the approved static slice (build/css/).
Source of truth for all visuals is that slice;
only asset URLs are rewritten:
../assets/ -> ../files/   (theme asset dir)
../fonts/  -> ../Fonts/   (theme webfont dir)
The SDK CSS bundler prefixes relative url(../../../design/default/css/) with ../../../design/<theme>/ when it
writes cache/css/<theme>/cache__*.css,so these stay relative. Do not absolutize. */
/* ---- tokens.css ---- */
@font-face { font-family:"Assistant";
font-weight:300;
font-display:swap;
src:url(../../../design/default/css/../Fonts/Assistant-Light.woff2) format(woff2)
}
@font-face { font-family:"Assistant";
font-weight:600;
font-display:swap;
src:url(../../../design/default/css/../Fonts/Assistant-SemiBold.woff2) format(woff2)
}
@font-face { font-family:"Assistant";
font-weight:700;
font-display:swap;
src:url(../../../design/default/css/../Fonts/Assistant-Bold.woff2) format(woff2)
}
:root{
--c-navy:#1f3865;
--c-gold:#f8ae40;
--c-tan:#cea763;
--c-cream:#fdfaf7;
--c-orange:#ea5b2b;
--c-blue:#03428e;
--c-ink:#111;
--font-body:"Assistant",system-ui,Arial,sans-serif;
--maxw:1826px;
/* content column;
tuned against comp in Task 2 (overlay-locked:nav logo,caption text and CTA right edges all land at x=2166 in the 2666px-wide comp) */
--gutter:clamp(20px,5vw,80px)
}
/* ---- main.css ---- */
*,*::before,*::after{box-sizing:border-box;
margin:0;
padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);
color:var(--c-ink);
background:var(--c-cream);
line-height:1.5;
overflow-x:clip}          /* clip,not hidden — sticky-safe (magma skill) */
img{max-width:100%;
height:auto;
display:block}
a{color:inherit;
text-decoration:none}
.wrap{max-width:var(--maxw);
margin-inline:auto;
padding-inline:var(--gutter)}
/* Fluid type:the comp is 2666px wide,so 1vw = 26.66px at comp width. Every
fixed comp px size below is clamp(MOBILE_MIN,(N/26.66)vw,Npx) -- at
exactly 2666px viewport the vw term resolves to Npx,so every
overlay-locked position from Tasks 1-8 is UNCHANGED at the comp reference
width;
below that it scales down fluidly with a readable floor instead of
clipping (there are no @media type overrides -- type is 100% clamp-fluid,
see the single layout-only @media block at the end of this file). */
.btn-cta{display:inline-flex;
align-items:center;
gap:.4em;
min-height:52px;
padding:14px 34px;
border-radius:6px;
background:var(--c-tan);
color:#fff;
font-weight:700;
font-size:clamp(18px,.75vw,20px);
border:0;
cursor:pointer;
overflow-wrap:anywhere}
/* Hidden state is gated behind the .js class (set by an inline head script) so
that if JS fails/disabled the content renders visible instead of blank. */
.js .reveal{opacity:0;
transform:translateY(24px);
transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;
transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;
transform:none;
transition:none}}
/* ---- s1 hero ---- */
/* flex column so the caption can sit centred in the navy field below the nav,
the way the comp places it (lead block vertically centred,not pinned under
the nav with dead space below) -- QA "the banner doesn't look like the design". */
/* min-height (not a hard aspect-ratio) so the navy field GROWS to contain the
caption when the type is large -- with a fixed aspect-ratio the enlarged
main-heading + subheading spilled past the hero's bottom edge onto the about
section (QA "the text exits the frame"). calc keeps the comp's 2560:1130
proportion as the *minimum* height on wide screens where the text is short. */
.hero{position:relative;
min-height:calc(100vw * 1130 / 2560);
background-color:var(--c-navy);
background-image:url(../../../design/default/css/../files/hero-bg.webp);
background-position:center;
background-size:cover;
background-repeat:no-repeat;
color:#fff;
display:flex;
flex-direction:column}
.nav{display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding-block:clamp(20px,2.81vw,75px);
position:relative}
.nav__home{display:flex;
align-items:center}
.nav__logo{height:clamp(50px,3.38vw,90px);
width:auto}
.nav__links{display:flex;
align-items:center;
gap:clamp(8px,.60vw,16px);
list-style:none;
font-size:clamp(16px,.75vw,20px);
font-weight:600;
overflow-wrap:anywhere}
/* The "|" between items is drawn here rather than typed into nav.php,so screen readers
read eight links instead of announcing a pipe between every one. `li + li` puts one
before every item except the first - which in RTL source order is the right-most. */
.nav__links li + li::before{content:"|";
margin-inline-end:clamp(8px,.60vw,16px);
color:rgba(255,255,255,.45);
font-weight:400}
.nav__links a{transition:color .2s ease}
.nav__links a:hover{color:var(--c-gold)}
.nav__toggle{display:none;
flex-direction:column;
justify-content:center;
gap:6px;
width:44px;
height:44px;
background:none;
border:0;
cursor:pointer;
padding:0}
.nav__toggle span{display:block;
width:100%;
height:3px;
background:#fff;
border-radius:2px}
/* margin-block:auto centres the caption vertically in the flex column (see .hero);
a small padding keeps it off the nav/hero edges at narrow widths where the
aspect-ratio box is short. */
.hero__caption{margin-block:auto;
padding-block:clamp(16px,2vw,40px);
text-align:start}
/* The lead is the hero statement,not body copy:the comp draws it ~55px at the
2666 canvas (measured line pitch 85px / lh ~1.5). The previous 34px cap made it
read as a small paragraph -- QA "the text is really small". max-width widened to
1180 so it wraps in ~5 lines like the comp instead of stacking into a tall column. */
/* The SDK rich-text field wraps [[opening]] in <div class="editor_holder">,so the
paragraphs are NOT direct children of .hero__rich -- the old `.hero__rich > p` rule
never matched and the hero text fell back to unstyled 16px (the actual cause of QA
"the text is really small"). Match both the wrapped (live/SDK) and the direct (static
slice) shapes. */
/* Confine the lead to a right-hand column (comp:it spans ~40% of the canvas,flush
right,clear of the O2 bubble on the left). vw-based so it scales -- a fixed px cap
alone let it run full-width and cross the bubble at laptop widths. */
.hero__rich > p,
.hero__rich .editor_holder > p{max-width:min(1180px,44vw);
font-size:clamp(21px,2.06vw,55px);
line-height:1.5;
font-weight:300;
margin-bottom:clamp(20px,1.5vw,40px);
overflow-wrap:anywhere}
/* The opener is the MAIN heading (QA "main heading -- larger and bold"),sitting
above the "ברגע שאנחנו" subheading (the default > p rule above,kept at its
current clamp(21,55) size). Bigger than the subheading + weight 700 + full
opacity so it reads as the dominant line. */
.hero__rich > p:first-child,
.hero__rich .editor_holder > p:first-child{font-size:clamp(26px,2.55vw,68px);
font-weight:700;
margin-bottom:clamp(16px,1.2vw,32px);
opacity:1;
line-height:1.35}
.hero__rich strong{font-weight:700}
.hero .btn-cta{font-size:clamp(18px,1.05vw,28px);
padding:clamp(14px,1.2vw,24px) clamp(34px,3vw,78px)}
.hero__lead{max-width:1180px;
font-size:clamp(21px,2.06vw,55px);
line-height:1.5;
font-weight:300;
margin-bottom:clamp(20px,1.5vw,40px);
overflow-wrap:anywhere}
.hero__lead strong{font-weight:700}
/* ---- the short photo-strip hero ----
Shared by /articles and /article. It lives here rather than in either page's own
stylesheet because css/<page>.css files cannot see each other,so the alternative is
two copies of the crop geometry that drift the first time the asset is re-cut. The
two comps' hero bands were pixel-compared:they differ ONLY in the rows where the
/articles title sits,so this is one component,not two similar ones.
Unlike the home and about heroes this is NOT a single baked image. The comp is a navy
field with the Jerusalem photo on the inline-start (right) half,dissolved into the
navy by a veil that is fully opaque out to comp x=1010 and fully clear by x=1900.
Flattening that into one asset would bake the nav and the title into it,so the photo
ships clean and the veil is painted here.
articles-hero.webp is pre-cropped to exactly the sub-rect of the source photo that
lands inside the comp's 2666x747 band,which is why plain `cover` reproduces the comp
placement. The gradient direction is physical (to right),not logical:the navy is on
the physical left whichever way the page's text runs. */
.hero--photo{aspect-ratio:2666/747;
background:
linear-gradient(to right,var(--c-navy) 0 37.88%,rgba(31,56,101,0) 71.27%),
var(--c-navy) url(../../../design/default/css/../files/articles-hero.webp) center/cover no-repeat}
@media (max-width:900px){
/* At phone width the 3.57 ratio collapses to ~105px,far too short for the nav plus a
title. Release it and let the content set the height.
Deliberately NOT display:flex:.hero--photo contains the <nav> and the caption as
siblings,so a row-direction flex container puts the title beside the logo instead
of under it. It stays a block,exactly as it is at desktop width.
The veil also goes heavier (.70 rather than clearing to 0) because at this width the
photo runs under the nav as well as the title,and both are white. */
.hero--photo{aspect-ratio:auto;
min-height:52vw;
background:
linear-gradient(to right,var(--c-navy) 0 8%,rgba(31,56,101,.70) 100%),
var(--c-navy) url(../../../design/default/css/../files/articles-hero.webp) center/cover no-repeat}
}
/* ---- s2 about ---- */
/* the photo is pulled out of flow (position:absolute,full-bleed on the
right/inline-start side) so the section's height is governed by flex
content -- keeping it in grid/flex flow made the row height ambiguous
(the photo's tall intrinsic ratio was inflating it). Text is centered
vertically in the resulting box via flex.
min-height (not a fixed aspect-ratio) reproduces the exact comp-locked
band height at the 2666px reference width (1092/2666 = 40.96vw) but lets
the box grow to fit the text at narrower widths instead of clipping it
under overflow:clip -- a fixed aspect-ratio shrinks the band faster than
the (viewport-independent,fixed-px-font) text content shrinks,which is
what caused the vertical half of this bug once the horizontal half below
is fixed. min-height is vw-based so it already scales fluidly with the
viewport;
the @media block below only resets it to 0 when the 2-col flex
layout is stacked to 1-col at <=900px (photo goes static/full-width). */
.about{position:relative;
display:flex;
align-items:center;
min-height:40.96vw;
background:var(--c-cream);
overflow:clip}
/* The comp dissolves the photo's inner (physical-left) edge into the cream rather
than cutting it with a hard vertical line -- QA "the transition from image to
background". A horizontal mask fades that edge to transparent so the cream shows
through;
the photo is pinned to the physical-right edge (inset-inline-start:0 under
RTL),so the fade runs `to left`. */
.about__photo{position:absolute;
inset-block:0;
inset-inline-start:0;
width:29.7%;
height:100%;
object-fit:cover;
object-position:center 15%;
display:block;
-webkit-mask-image:linear-gradient(to left,#000 74%,rgba(0,0,0,0) 99%);
mask-image:linear-gradient(to left,#000 74%,rgba(0,0,0,0) 99%)}
.about__text{position:relative;
/* mirrors .wrap's inline-end inset so the text column's outer (left) edge
lines up with the rest of the page's content edge,while the photo
(outside .wrap) is free to bleed to the true viewport edge on the right.
100vw (not 100%) keeps this correct regardless of the flex item's own
resolved width. */
padding-inline-end:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));
/* reserves space for the photo (39.6% width,matches .about__photo) plus
a proportional ~10.5%-of-width gap before the text -- %,not a
hardcoded px value pinned to the 2666px comp canvas,so it scales with
the viewport instead of consuming the entire width below ~2100px
(calc(39.6% + 10.5%) = 1336px at exactly 2666px,preserving the
overlay-locked position at the reference width) */
/* photo shrunk to 29.7% (QA "shrink the photo by at least 25%":39.6% * .75);
reserved space follows so the copy keeps its ~10.5% gap from the image. */
padding-inline-start:calc(29.7% + 10.5%)}
.about__title{color:var(--c-navy);
font-size:clamp(30px,3.64vw,97px);
font-weight:700;
line-height:1.07;
max-width:725px;
margin-bottom:52px;
position:relative;
overflow-wrap:anywhere}
.about__title::after{content:"";
display:block;
width:163px;
height:3px;
background:var(--c-tan);
margin-top:53px}
.about__body{color:var(--c-ink);
font-size:clamp(18px,1.84vw,49px);
line-height:1.51;
max-width:730px;
margin-bottom:51px;
overflow-wrap:anywhere}
.about .btn-cta{font-size:clamp(18px,.94vw,25px);
padding:20px clamp(20px,4.8vw,128px)}
/* ---- s3 services ---- */
/* height comes from padding-block + content,never a fixed aspect-ratio,
so the band grows to fit 1-3 line rows at any width instead of clipping
(same lesson as .about above). The molecular/leaf photo is a faint
(12% opacity) full-bleed background behind the content,not a hard crop. */
.svc{position:relative;
background:var(--c-cream);
padding-block:clamp(40px,3vw,80px);
overflow:clip}
.svc::before{content:"";
position:absolute;
inset:0;
background:url(../../../design/default/css/../files/services-bg.webp) center/cover no-repeat;
opacity:.12;
z-index:0}
.svc .wrap{position:relative;
z-index:1}
.svc__title{text-align:center;
color:var(--c-navy);
font-size:clamp(26px,3.11vw,83px);
font-weight:700;
position:relative;
padding-bottom:20px;
margin-top:20px;
margin-bottom:55px;
overflow-wrap:anywhere}
/* left/translateX(-50%) is a physical (direction-agnostic) centering trick --
it centers correctly regardless of the page's RTL dir,unlike pairing a
logical inset-inline-* offset with a transform (easy to get backwards). */
.title--underline::after{content:"";
position:absolute;
bottom:0;
inset-inline:0;
width:90px;
margin-inline:auto;
height:4px;
background:var(--c-gold);
border-radius:2px}
/* close to the full wrap width (matches the comp,where rows run nearly
edge-to-edge) but capped short of --maxw so line length stays readable
if the wrap is ever widened */
.svc__list{list-style:none;
display:flex;
flex-direction:column;
max-width:1750px;
margin-inline:auto}
.svc__row{display:flex;
align-items:center;
gap:32px;
padding:44px 0;
border-bottom:1px solid #e7ddcd;
font-size:clamp(20px,2.18vw,58px);
line-height:1.3;
color:var(--c-ink);
overflow-wrap:anywhere}
.svc__row:last-child{border-bottom:0}
.svc__row strong{color:var(--c-navy);
font-weight:700}
.svc__icon{flex:0 0 clamp(48px,4.43vw,118px);
width:clamp(48px,4.43vw,118px);
height:clamp(48px,4.43vw,118px)}
/* ---- s4 contact ---- */
/* height comes from padding-block + content only (same discipline as .about
and .svc above) -- never a fixed aspect-ratio,so the navy band grows to
fit the form at any width instead of clipping it. contact-bg.webp already
contains the faint leaf-line decoration baked in at the correct corners,
so it's applied as a plain cover background -- no extra absolute-positioned
decoration elements needed. */
.contact{position:relative;
background:var(--c-navy) url(../../../design/default/css/../files/contact-bg.webp) center/cover no-repeat;
color:#fff;
padding-block:clamp(40px,3vw,80px);
text-align:center;
overflow:clip}
.contact__title{font-size:clamp(26px,3.11vw,83px);
font-weight:700;
line-height:1;
position:relative;
padding-bottom:20px;
margin-bottom:65px;
overflow-wrap:anywhere}
.contact__sub{font-size:clamp(18px,1.88vw,50px);
font-weight:300;
line-height:1.4;
max-width:1150px;
margin:0 auto 45px;
opacity:.95;
overflow-wrap:anywhere}
.contact__form{max-width:1670px;
margin-inline:auto;
display:flex;
flex-direction:column;
gap:24px}
.contact__row{display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px}
/* min-width:0 overrides the <input> default intrinsic min-width (UA sizing
based on the size attribute,which scales with font-size) -- without it,
a 1fr grid track can't shrink below that intrinsic width and the row
overflows/clips at narrower viewports (the exact bug flagged from Task 3). */
.contact__row input{min-width:0}
/* phone + email carry dir="ltr" (so a typed number/address keeps LTR order);
without a
text-align that also drags their Hebrew placeholder and caret to the LEFT,while every
other field is flush right -- QA "the text in the contact form isn't aligned to the same
direction". Pin them flush right like the rest;
the LTR value still renders in reading
order,just right-aligned. */
.contact__form input[dir="ltr"]{text-align:right}
.contact__form input,.contact__form textarea{padding:16px 32px;
border:0;
border-radius:6px;
font:inherit;
font-size:clamp(18px,1.58vw,42px);
font-weight:300;
line-height:1;
color:var(--c-ink);
width:100%}
.contact__form textarea{resize:vertical;
min-height:290px;
line-height:1.3}
.contact__form .btn-cta{align-self:center;
margin-top:20px;
font-size:clamp(18px,1.2vw,32px);
padding:20px 60px}
/* honeypot:visually hidden but present in the DOM/tab order-adjacent (tabindex=-1
keeps it out of keyboard tab order);
inset-inline-start (not left) per the
project's logical-properties-only rule. */
.hp{position:absolute;
inset-inline-start:-9999px;
width:1px;
height:1px;
overflow:hidden}
/* ---- s5 testimonials + partners ---- */
/* height comes from padding-block + content only (same discipline as .svc/.contact
above) -- never a fixed aspect-ratio. Cream background,no bg image needed here. */
.tst{padding-block:clamp(40px,3vw,80px);
text-align:center;
background:var(--c-cream)}
.tst__title{color:var(--c-navy);
font-size:clamp(26px,3.11vw,83px);
margin-bottom:50px;
overflow-wrap:anywhere}
.carousel{display:flex;
align-items:center;
justify-content:center;
gap:40px;
max-width:1250px;
margin-inline:auto}
.carousel__nav{flex:0 0 auto;
border:2px solid var(--c-tan);
color:var(--c-tan);
background:none;
width:clamp(44px,2.85vw,76px);
height:clamp(44px,2.85vw,76px);
border-radius:50%;
font-size:clamp(20px,1.28vw,34px);
line-height:1;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center}
.carousel__track{flex:1 1 auto;
min-width:0}
.carousel__slide{display:none;
font-size:clamp(18px,1.43vw,38px);
color:var(--c-ink);
line-height:1.5;
overflow-wrap:anywhere}
.carousel__slide.is-active{display:block}
.tst__mark{width:58px;
height:44px;
margin-bottom:22px}
.carousel__slide cite{display:block;
margin-top:14px;
font-weight:700;
font-style:normal;
color:var(--c-navy)}
.carousel__dots{display:flex;
gap:14px;
justify-content:center;
margin-top:10px}
.carousel__dots button{width:16px;
height:16px;
border-radius:50%;
border:0;
padding:0;
background:#e7ddcd;
cursor:pointer}
.carousel__dots button[aria-current="true"]{background:var(--c-gold)}
.partners{list-style:none;
display:flex;
flex-wrap:nowrap;
align-items:center;
justify-content:center;
gap:0;
margin-top:clamp(60px,7.13vw,190px)}
.partners li{display:flex;
align-items:center;
justify-content:center;
padding-inline:44px;
flex:0 1 auto;
min-width:0}
.partners li:not(:first-child){border-inline-start:1px solid #ddd0b8}
.partners img{max-height:120px;
max-width:100%;
height:auto;
width:auto;
object-fit:contain}
/* ---- s6 pre-footer CTA ---- */
/* Comp:the shin-tree vector bleeds past the content column all the way to
the page's physical left edge (x=169 of a 2666px comp canvas -- outside
.wrap entirely),while the headline+button sit centered on the PAGE
center,not shifted right to make room for the tree in a flex row. Same
technique as .about__photo above:the tree is pulled out of flow
(position:absolute) and sized with a % width (~15%,matching its measured
comp footprint of 403/2666=15.1%) so it scales with viewport instead of a
hardcoded px offset. In RTL,physical-left is the inline-END edge,so it's
anchored with inset-inline-end:0 (mirrors .about__photo's
inset-inline-start:0 on the opposite,LTR-first,physical-right side).
The headline/button live in a plain .wrap so they page-center like every
other section;
.precta__body adds padding-inline-end (tree % width + a
gap,both in %) so text never overlaps the tree at any viewport width --
the same reserved-space trick as .about__text's padding-inline-start.
Section height is a min-height vw FLOOR (matches the tree's constant-vw
aspect-ratio height) plus padding-block + content,never a fixed
aspect-ratio -- so it can't clip the tree or wrapped text at any width. */
.precta{position:relative;
background:var(--c-navy);
color:#fff;
padding-block:clamp(32px,2.44vw,65px);
min-height:17vw;
overflow:clip}
/* The comp draws the tree ~10% of the page width with its roots resting on the band's
bottom edge (measured:band 17.2vw tall,tree 265px≈10% wide,bottom gap 1px),NOT a
15%-wide glyph centred on the band. At 15% + centred the roots ran taller than the band
and spilled onto the footer/button below it -- Miana "the tree rises onto the box below".
Bottom-anchored + narrower keeps it inside the navy field at every width (overflow:clip
is the belt-and-braces). */
.precta__tree{position:absolute;
inset-inline-end:0;
bottom:0;
top:auto;
transform:none;
width:12%;
height:auto;
pointer-events:none}
.precta__body{position:relative;
text-align:center;
/* reserves space for the tree (15% width) plus a proportional gap,so the
centered text column never collides with the tree -- %,not a
hardcoded px value,so it scales with the viewport. No extra max-width
here -- .wrap's own max-width:var(--maxw) already governs the box;
a
second,smaller max-width previously left over from the old flex-item
layout was over-shrinking the text (compounding with this padding) and
forcing extra line-wraps vs the comp. */
padding-inline-end:calc(15% + 5%)}
.precta__title{font-size:clamp(26px,3.11vw,83px);
font-weight:700;
line-height:1.3;
margin-bottom:35px;
overflow-wrap:anywhere}
.precta .btn-cta{font-size:clamp(18px,1.28vw,34px);
padding:22px 62px}
/* ---- footer ---- */
/* Reworked to match the comp (עמוד הבית.png,y~6550-7218) exactly per owner
decision:light-cream background (var(--c-cream)),no headline banner --
the "headline + CTA" pattern already lives one section up in s6 precta,
the comp does not repeat it here. Pixel-sampled from the comp:column
headings are var(--c-navy) (measured median rgb(31,56,101) = exact
#1f3865 token match),body/link text is near-black (measured rgb(0,0,0),
var(--c-ink) is the closest token),and the column divider is a light
neutral gray (measured rgb(217,216,215) at x=920/1746 of the 2666px
canvas),reproduced as rgba(17,17,17,.12) over the cream bg rather than a
new literal color. Column order/content,contact info,social icons,and
sub-footer copy are matched to the comp;
the comp's sub-footer band
measures ~1-6/255 lighter than the column area (essentially white vs
cream) which reads as PNG export noise at this magnitude,not a distinct
fill,so it is not reproduced as a second background color. Comp column
dividers sit at x=920 and x=1745 of the 2666px canvas,splitting the
~2666-80*2 content width into three near-equal thirds -- reproduced here
as a 3-up grid with a border-inline-start divider on cols 2 and 3 (same
RTL-divider technique as .partners above),not fixed px column widths.
auto-fit/minmax (not a hard breakpoint) lets the grid collapse to fewer
columns if the viewport ever gets narrower than 3 columns can hold;
the
@media block below forces a clean 1-col stack (with top-border dividers
instead of side ones) at <=900px rather than relying on auto-fit's
organic (and less predictable) reflow. */
.foot{background:var(--c-cream);
color:var(--c-ink);
padding-block:clamp(36px,2.63vw,70px) clamp(24px,1.5vw,40px)}
.foot__cols{display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:60px}
.foot__col{min-width:0}
.foot__col:not(:first-child){border-inline-start:1px solid rgba(17,17,17,.12);
padding-inline-start:40px}
.foot__col h3{color:var(--c-navy);
font-size:clamp(20px,1.13vw,30px);
margin-bottom:28px;
overflow-wrap:anywhere}
.foot__col a,.foot__col p{display:block;
color:var(--c-ink);
font-size:clamp(18px,.98vw,26px);
line-height:2;
overflow-wrap:anywhere}
.foot__col a:hover{color:var(--c-navy)}
.foot__social{display:flex;
gap:16px;
margin-top:16px}
.foot__social img{width:38px;
height:38px}
.foot__sub{text-align:center;
color:var(--c-ink);
opacity:.6;
font-size:clamp(14px,.83vw,22px);
margin-top:60px;
padding-top:30px;
overflow-wrap:anywhere}
/* PEOPLE signature:full-width credit bar at page bottom (delivery-baseline). Without
this the bare <p class="site-credit"> renders unstyled and detached. */
.site-credit{margin:0;
background:var(--c-navy);
color:#fff;
text-align:center;
font-size:13px;
line-height:1.4;
padding:12px 16px}
.site-credit a{color:var(--c-gold);
text-decoration:underline}
/* ---- responsive:layout-only breakpoints ----
Type is 100% fluid via clamp() above -- nothing here touches font-size.
Two thresholds,both layout-only:
1060px:the nav specifically. 8 Hebrew menu items + logo need more room
than the general 2-col content sections do (verified empirically -- the
horizontal nav starts wrapping mid-word around 1024-1060px even though
nothing else on the page is cramped yet there),so the nav swaps to a
toggle earlier than the rest of the layout reflows.
900px:everything else -- 2-col sections stack to 1 column,and the two
sections that use out-of-flow (position:absolute) art (about photo,
pre-footer tree) are de-emphasized/stacked so that art doesn't collide
with text once the reserved-space calc()s (tuned for wide viewports) no
longer apply. */
@media (max-width:1060px){
/* QA "move the menu bar to the right and centre the logo":centre the logo
(the only in-flow item once the links collapse) and pin the hamburger to
the inline-start edge -- which is the RIGHT side under RTL. */
.nav{justify-content:center}
.nav__toggle{display:flex;
position:absolute;
inset-inline-start:0;
top:50%;
transform:translateY(-50%)}
.nav__links{display:none;
position:absolute;
inset-inline:0;
top:100%;
flex-direction:column;
align-items:stretch;
gap:0;
background:var(--c-navy);
padding:10px var(--gutter) 20px;
z-index:20}
.nav__links.open{display:flex}
.nav__links li{padding-block:14px;
border-bottom:1px solid rgba(255,255,255,.14)}
.nav__links li:last-child{border-bottom:0}
/* Stacked menu:the row already has a border between items,so the pipe would just
be a stray character at the start of every line. */
.nav__links li + li::before{content:none}
}
@media (max-width:900px){
.hero__rich > p,
.hero__rich .editor_holder > p{max-width:none}
.about{display:block;
min-height:0}
/* full-width,stacked above the copy at phone width -- the inner-edge fade has no job
here (nothing sits beside it),so drop the mask to keep the photo crisp. */
.about__photo{position:static;
width:100%;
height:auto;
aspect-ratio:1127/1419;
-webkit-mask-image:none;
mask-image:none}
.about__text{padding-inline:0;
padding-block:40px 0}
.contact__row{grid-template-columns:1fr}
.partners{flex-wrap:wrap;
row-gap:24px}
.precta{min-height:0}
.precta__tree{position:static;
display:block;
width:140px;
margin:0 auto 24px;
transform:none}
.precta__body{padding-inline-end:0}
.foot__cols{grid-template-columns:1fr;
gap:40px}
.foot__col:not(:first-child){border-inline-start:0;
padding-inline-start:0;
padding-top:30px;
border-top:1px solid rgba(17,17,17,.12)}
}
/* phone:let the 4 partner logos wrap to 2x2 instead of shrink-to-fit so
each stays legible (the nowrap/shrink-to-fit rule above is tuned for
tablet+ widths where 4-across still has room to breathe). */
@media (max-width:600px){
.partners li{flex:0 1 50%;
padding-inline:20px}
.partners li:not(:first-child){border-inline-start:0}
}
.accessibility_menu{
position:fixed;
top:20px;
left:20px;
width:60px;
height:60px;
background:#1a73e8;
border-radius:50%;
box-shadow:0 4px 12px rgba(0,0,0,0.3);
overflow:visible;
color:white;
font-size:18px;
font-weight:bold;
z-index:10000;
text-align:center;
padding:0;
cursor:pointer;
display:block;
transition:transform 0.3s ease
}
.accessibility_menu:hover { transform:scale(1.05)
}
.accessibility_menu:focus{outline:none
}
.accessibility_menu_btn{
background:none;
border:0;
padding:0;
cursor:pointer;
width:100%;
height:100%;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center
}
.accessibility_menu_btn img { width:36px;
height:36px
}
.accessibility_menu_btn:focus,.a11y-action:focus{outline:3px solid #ffbf47;
outline-offset:3px
}
.a11y-action{display:flex;
align-items:center;
gap:12px;
background:none;
border:0;
width:100%;
text-align:right;
padding:10px 15px;
cursor:pointer;
border-radius:6px;
transition:background 0.2s
}
.a11y-action:hover { background:rgba(255,255,255,0.1)
}
.a11y-action span{font-size:16px;
font-weight:500
}
.accessibility_menu .arrw{ display:none
}
.accessibility_menu_title{
width:100%;
text-align:center;
font-size:20px;
color:white;
margin:15px 0;
padding-bottom:10px;
border-bottom:1px solid rgba(255,255,255,0.1);
display:block
}
.active .accessibility_menu_title{
margin:0 0 10px 0;
height:auto
}
.outer_holder{
position:absolute;
top:70px;
left:0;
right:auto;
background:#2d2d2d;
padding:15px;
width:300px;
display:none;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.4);
opacity:0;
transform:translateY(-10px);
transition:opacity 0.3s,transform 0.3s
}
.active.outer_holder{
display:block;
opacity:1;
transform:translateY(0)
}
.accessibility_menu .items_holder{
display:none;
float:none;
width:100%;
padding:0;
background:transparent;
margin:0
}
.accessibility_menu .items_holder .item{
float:none;
width:100%;
font-size:16px !important;
border-bottom:1px solid rgba(255,255,255,0.05);
margin:0;
padding:2px 0
}
.accessibility_menu .items_holder .item:last-child { border-bottom:none
}
.accessibility_menu .items_holder .item img{
float:none;
width:24px;
height:24px;
border:none;
padding:0;
filter:brightness(0) invert(1)
}
.accessibility_menu .items_holder .item span{
float:none;
margin:0;
font-size:16px !important;
color:#e0e0e0 !important;
background:transparent !important
}
.credit{
float:none;
display:block;
width:100%;
text-align:center;
font-size:12px;
color:#888;
margin-top:15px
}
/* Root-based text sizing classes */
html.a11y-text-lg { font-size:18px
}
html.a11y-text-xl { font-size:20px
}
html.a11y-text-base { font-size:16px
}
/* Readable Font */
body.a11y-readable * { font-family:Arial,Helvetica,sans-serif !important
}
/* Highlight Links */
body.a11y-links-highlight a { 
background:#ffeb3b !important;
color:#000 !important;
text-decoration:underline !important;
outline:2px solid #000 !important;
font-weight:bold !important
}
/* Big Cursor */
body.a11y-big-cursor,body.a11y-big-cursor * { 
cursor:url(../../../design/default/plugins/accessibility_plugin/css/data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg width=64 height=64 viewBox=0 0 24 24 fill=black stroke=white stroke-width=2%3E%3Cpath d=M7 2l12 11.2-5.8.5 3.3 7.3-2.2.9-3.2-7.4-4.4 4.6z/%3E%3C/svg%3E) 0 0,auto !important
}
/* Reading Guide */
#a11y-reading-guide {
position:fixed;
left:0;
width:100%;
height:20px;
background:rgba(255,255,0,0.2);
border-top:2px solid #ff0000;
border-bottom:2px solid #ff0000;
pointer-events:none;
z-index:2147483647;
display:none;
box-shadow:0 0 0 9999px rgba(0,0,0,0.5)
}
body.a11y-guide-on #a11y-reading-guide { display:block
}
/* High contrast theme (AA) */
body.a11y-contrast {
--a11y-bg:#000;
--a11y-fg:#fff;
--a11y-border:#fff;
--a11y-focus:#ffbf47;
/* high-visibility focus */
--a11y-link:#00afff
}
body.a11y-contrast,body.a11y-contrast * {
background-color:var(--a11y-bg) !important;
color:var(--a11y-fg) !important
}
body.a11y-contrast a { color:var(--a11y-link) !important;
text-decoration:underline
}
body.a11y-contrast .a11y-action,body.a11y-contrast button,body.a11y-contrast input,body.a11y-contrast select,body.a11y-contrast textarea {
border:2px solid var(--a11y-border) !important
}
body.a11y-contrast .accessibility_menu_btn:focus,body.a11y-contrast .a11y-action:focus,body.a11y-contrast .skip-to-content:focus {
outline:3px solid var(--a11y-focus) !important;
outline-offset:3px !important
}
.a11y-underline a { text-decoration:underline
}
/* Dark mode theme (AA compliant) */
body.a11y-dark {
--a11y-dark-bg:#1a1a1a;
--a11y-dark-fg:#e8e8e8;
--a11y-dark-link:#60b0ff;
--a11y-dark-border:#606060;
background-color:var(--a11y-dark-bg);
color:var(--a11y-dark-fg)
}
body.a11y-dark a { color:var(--a11y-dark-link)
}
body.a11y-dark input,body.a11y-dark textarea,body.a11y-dark select,body.a11y-dark button {
background-color:#2a2a2a;
color:var(--a11y-dark-fg);
border:1px solid var(--a11y-dark-border)
}
/* Skip to content link */
.skip-to-content{
position:absolute;
top:-1000px;
right:10px;
background:#fff;
color:#000;
padding:10px 14px;
border:2px solid #1a73e8;
z-index:2000
}
.skip-to-content:focus{ top:10px;
outline:3px solid #1a73e8
}
/* Live region offscreen styling */
.a11y-live-region{ position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(1px,1px,1px,1px);
white-space:nowrap
}
/* Error summary styles */
.a11y-error-summary { border:3px solid #ba1c1c;
padding:12px;
background:#fff3f3;
color:#222
}
.a11y-error-summary h2 { margin:0 0 8px;
font-size:18px
}
.a11y-error-summary ul { margin:0;
padding-inline-start:20px
}
/* Motion safeguards */
@media (prefers-reduced-motion:reduce) {
*,*::before,*::after { animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important
}
}
body.a11y-reduce-motion *,body.a11y-reduce-motion *::before,body.a11y-reduce-motion *::after {
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important
}
@media (max-width:767px){
.accessibility_menu {
width:58px;
height:59px;
bottom:75px;
top:auto
}
.accessibility_menu .accessibility_menu_btn {
width:58px;
height:59px
}
.accessibility_menu .items_holder {
margin:31px 0 0 0
}
}
.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
}