/* ============================================================
Makor HOME REDESIGN LAYER (real photos + bird motif + layout variety)
Loaded AFTER main.css so it wins the cascade at equal specificity.
Niche-adapted "Efrat treatment": asymmetric hero, organic photo frames,
floating cards, full-bleed photo band, the Makor kite as recurring motif.
============================================================ */
/* ---------- Makor kite motif: the recurring decorative element ---------- */
.deco { position: absolute; pointer-events: none; user-select: none; z-index: 0; margin: 0; line-height: 0; }
img.deco { display: block; height: auto; }
.section, .hero, .webinars-section, .contact-section, .quoteband { position: relative; }
.section > .container,
.hero-redesign .hero-box,
.webinars-section .webinars-inner,
.contact-section > .container { position: relative; z-index: 1; }
/* ====================== HERO ====================== */
.hero-redesign {
overflow: hidden;
background:
radial-gradient(120% 95% at 86% 6%, #E9F0FA 0%, rgba(233,240,250,0) 58%),
linear-gradient(180deg, #FFFFFF 0%, #F3F7FC 100%);
}
.deco-hero { width: min(48vw, 640px); top: -5%; left: -7%; opacity: .055; transform: scaleX(-1) rotate(-7deg); }
.hero-redesign .hero-box {
display: grid;
grid-template-columns: 1.02fr 0.98fr;
align-items: center;
gap: clamp(28px, 4.5vw, 76px);
text-align: right;
padding-block: clamp(122px, 13vw, 170px) clamp(54px, 7vw, 92px);
}
.hero-redesign .hero-text { max-width: 660px; }
.hero-redesign .hero-kicker { justify-content: flex-start; }
.hero-redesign .hero-actions { justify-content: flex-start; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.hero-tag {
font-size: 13px; font-weight: 600; color: var(--navy-800);
background: rgba(10, 124, 134, .05); border: 1px solid rgba(10, 124, 134, .10);
padding: 7px 14px; border-radius: 999px;
}
.hero-visual { position: relative; }
.hero-img-frame {
position: relative; aspect-ratio: 4 / 5;
border-radius: 210px 210px 26px 26px; overflow: hidden;
box-shadow: 0 34px 72px -32px rgba(7, 94, 102, .48);
}
.hero-img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-img-frame::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(7, 94, 102, 0) 42%, rgba(7, 94, 102, .30) 100%);
}
.hero-stat-float {
position: absolute; bottom: 26px; inset-inline-start: -20px; z-index: 2;
background: #fff; border: 1px solid var(--line); border-radius: 16px;
padding: 15px 22px; box-shadow: 0 20px 44px -20px rgba(7, 94, 102, .42);
display: flex; align-items: center; gap: 14px;
}
.hero-stat-float .hsf-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--cream-100); color: var(--navy-800); display: grid; place-items: center; }
.hero-stat-float b { display: block; font-size: 30px; font-weight: 800; color: var(--navy-800); line-height: 1; }
.hero-stat-float span { font-size: 12.5px; color: var(--ink-500); }
/* ====================== ABOUT ====================== */
.intro-section .intro-video { background: #0E2A2E; }
.intro-section .intro-video .intro-video-bg {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(10, 124, 134, .26), rgba(2, 20, 38, .68)),
url("../img/meeting-room.jpg") center / cover no-repeat;
}
.intro-float-card {
position: absolute; bottom: -16px; inset-inline-start: -16px; z-index: 4;
background: #fff; border: 1px solid var(--line); border-radius: 14px;
padding: 13px 18px; display: flex; align-items: center; gap: 12px;
box-shadow: 0 20px 44px -20px rgba(7, 94, 102, .42);
}
.intro-float-card .afc-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--cream-100); color: var(--navy-800); display: grid; place-items: center; }
.intro-float-card b { display: block; font-size: 14px; color: var(--navy-900); }
.intro-float-card span { font-size: 12px; color: var(--ink-500); }
.deco-about { width: 200px; top: -34px; inset-inline-start: -26px; opacity: .05; transform: rotate(6deg); }
/* ====================== AUDIENCE (real photos) ====================== */
.audience-image[data-photo] { position: relative; overflow: hidden; }
.audience-image[data-photo] .audience-image-pattern { display: none; }
.audience-image[data-photo]::before {
content: ""; position: absolute; inset: 0;
background-image: var(--photo); background-size: cover;
background-position: var(--focus, center);
transition: transform .6s ease;
}
.audience-card:hover .audience-image[data-photo]::before { transform: scale(1.06); }
.audience-image[data-photo]::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(7, 94, 102, 0) 42%, rgba(7, 94, 102, .58) 100%);
}
.audience-image[data-photo] .audience-image-tag { position: relative; z-index: 2; }
/* ====================== GALLERY (real photos) ====================== */
.fieldgal-card[data-photo] .fieldgal-bg { background: #0E2A2E; }
.fieldgal-card[data-photo] .fieldgal-bg::before {
content: ""; position: absolute; inset: 0;
background-image: var(--photo); background-size: cover; background-position: center;
transition: transform .7s ease;
}
.fieldgal-card[data-photo]:hover .fieldgal-bg::before { transform: scale(1.07); }
.fieldgal-card[data-photo] .fieldgal-pattern,
.fieldgal-card[data-photo] .fieldgal-watermark { display: none; }
.fieldgal-card[data-photo] .fieldgal-bg::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(7, 94, 102, 0) 38%, rgba(7, 94, 102, .64) 100%);
}
.fieldgal-card[data-photo] .fieldgal-overlay { position: absolute; inset: auto 0 0 0; z-index: 2; }
/* ====================== SERVICES (photo per expanded row) ====================== */
.service-row-photo {
border-radius: 16px; overflow: hidden; min-height: 220px;
background-size: cover; background-position: center;
box-shadow: 0 18px 40px -22px rgba(7, 94, 102, .4);
}
@media (min-width: 880px) {
.service-row-has-photo .service-row-body-inner {
display: grid; grid-template-columns: 1.45fr 0.85fr; gap: 30px; align-items: start;
}
.service-row-photo { align-self: stretch; }
}
/* ====================== WEBINARS band (kite line-art corners) ====================== */
.deco-wr { width: 240px; top: 8%; inset-inline-end: -36px; opacity: .07; transform: scaleX(-1); }
.deco-wl { width: 190px; bottom: 6%; inset-inline-start: -30px; opacity: .055; }
/* ====================== NEW: full-bleed photo statement band ====================== */
.quoteband { overflow: hidden; isolation: isolate; }
.quoteband-bg {
position: absolute; inset: 0; z-index: 0;
background-image: var(--photo); background-size: cover; background-position: center 38%;
}
.quoteband-bg::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(105deg, rgba(2, 20, 38, .90) 0%, rgba(10, 124, 134, .78) 48%, rgba(10, 124, 134, .42) 100%);
}
.quoteband-inner {
position: relative; z-index: 1; text-align: right;
padding-block: clamp(72px, 9vw, 128px); max-width: 640px;
}
.quoteband .quoteband-eyebrow { color: rgba(255, 255, 255, .72); font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.quoteband h2 { color: #fff; font-weight: 800; font-size: clamp(28px, 4vw, 46px); line-height: 1.16; letter-spacing: -.01em; margin: 14px 0 14px; }
.quoteband p { color: rgba(255, 255, 255, .85); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; margin: 0 0 26px; max-width: 56ch; }
.deco-band { width: 300px; bottom: -40px; inset-inline-start: 6%; opacity: .08; transform: rotate(-4deg); }
/* ====================== CONTACT / TESTIMONIALS motif ====================== */
.deco-contact { width: 240px; top: 4%; inset-inline-start: -30px; opacity: .04; transform: scaleX(-1) rotate(-6deg); }
/* ====================== RESPONSIVE ====================== */
@media (max-width: 860px) {
.hero-redesign .hero-box { grid-template-columns: 1fr; gap: 40px; }
.hero-visual { order: 2; max-width: 460px; margin-inline: auto; width: 100%; }
.hero-img-frame { aspect-ratio: 4 / 3.4; border-radius: 150px 150px 22px 22px; }
.hero-stat-float { inset-inline-start: auto; inset-inline-end: 14px; bottom: 14px; }
.deco-hero { width: 70vw; opacity: .045; }
.service-row-photo { display: none; } /* keep mobile accordion compact */
.quoteband-inner { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.audience-image[data-photo]::before,
.fieldgal-card[data-photo] .fieldgal-bg::before { transition: none; }
}
/* ============================================================
HOME BEAUTIFICATION PASS v2 (Efrat-grade color rhythm)
- softer gallery overlays (kill the "blue stripe")
- WhyUs image cards (no icons)
- centered quote band with flanking Makor birds
- centered, living services background
- lighter audience photos, centered section heads
- alternating section background tints for color variety
============================================================ */
/* ---------- Centered section heads on the home page (Efrat rhythm) ---------- */
.home #why .section-head,
.home #services .section-head,
.home #audience .section-head,
.home #gallery .section-head,
.home #knowledge .section-head,
.home .qa-sec .section-head {
align-items: center;
text-align: center;
max-width: 760px;
margin-inline: auto;
}
/* ---------- Color rhythm: tint otherwise-blank sections ---------- */
.home #why { background: linear-gradient(180deg, #F7F9FC 0%, #EDF2F9 100%); }
.home #audience { background: #F4F7FB; }
/* ====================== GALLERY: soften overlays (fix blue stripe) ====================== */
.fieldgal-card[data-photo] .fieldgal-bg::after {
background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.50) 100%);
}
.fieldgal-card[data-photo] .fieldgal-overlay {
background: linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.30) 55%, transparent 86%);
}
/* ====================== WHYUS: image cards, no icons ====================== */
.why-card-img {
padding: 0;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 14px 34px -26px rgba(7, 94, 102, .35);
}
.why-card-img::before { display: none !important; }
.why-card-photo {
position: relative;
aspect-ratio: 16 / 11;
background-size: cover;
background-position: center;
}
.why-card-photo::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(7, 94, 102, 0) 52%, rgba(7, 94, 102, .42) 100%);
}
.why-card-img .why-num {
position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2;
margin: 0; width: 40px; height: 40px; border-radius: 11px;
background: rgba(255, 255, 255, .94); color: var(--navy-800);
display: grid; place-items: center;
font-family: var(--font-serif); font-size: 15px; font-weight: 700; letter-spacing: 0;
box-shadow: 0 8px 18px -8px rgba(7, 94, 102, .55);
}
.why-card-text { padding: 22px 22px 26px; }
.why-card-img h3 { margin-top: 0; }
.why-card-img:hover {
transform: translateY(-5px);
box-shadow: 0 26px 52px -26px rgba(7, 94, 102, .45);
border-color: var(--line-strong);
}
/* ====================== QUOTE BAND: centered + flanking birds ====================== */
.quoteband-quote .quoteband-bg { background-position: center 42%; }
.quoteband-quote .quoteband-bg::after {
background: linear-gradient(180deg, rgba(2, 18, 36, .88) 0%, rgba(4, 34, 78, .84) 100%);
}
.quoteband-quote .quoteband-inner {
text-align: center;
max-width: 780px;
margin-inline: auto;
padding-block: clamp(80px, 10vw, 140px);
}
.quoteband-quote .quoteband-eyebrow {
display: block;
color: var(--gold-400, #C9A24B);
letter-spacing: .22em;
}
.quoteband-quote {
margin: 20px auto 30px;
font-family: var(--font-serif);
font-weight: 500;
color: #fff;
font-size: clamp(23px, 3.1vw, 38px);
line-height: 1.36;
letter-spacing: -.005em;
text-wrap: balance;
}
.deco-flank {
width: clamp(138px, 17.25vw, 264px); /* +15% */
top: 50%; opacity: .15; z-index: 0;
}
.deco-flank-r { inset-inline-end: calc(1.5% + 30px); transform: translateY(-50%) scaleX(-1) rotate(-4deg); }
.deco-flank-l { inset-inline-start: calc(1.5% + 30px); transform: translateY(-50%) rotate(4deg); }
/* ====================== SERVICES: centered + living background ====================== */
.services-section, .svc-stage { overflow: hidden; background: #fff; } /* pure flat white */
.services-section::before, .svc-stage::before { display: none; } /* no mesh tint -> exact #fff match to the wave divider above = smooth transition */
.services-section > .container, .svc-stage > .container { position: relative; z-index: 1; }
@keyframes mhMeshDrift {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}
/* ====================== HERO: Ken Burns slideshow (zoom + crossfade) ====================== */
.hero-kb {
background: var(--navy-900) !important; /* image now comes from the slideshow layers */
}
.hero-stage {
position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.hero-frame {
position: absolute; inset: 0;
background-size: cover;
background-position: center bottom;
opacity: 0;
will-change: opacity, transform;
animation: mhHeroKB 21s linear infinite;
}
.hero-frame:nth-child(1) { animation-delay: 0s; }
.hero-frame:nth-child(2) { animation-delay: 7s; }
.hero-frame:nth-child(3) { animation-delay: 14s; }
@keyframes mhHeroKB {
/* Zoom travels its FULL range while the slide is visible (0% -> 35%),
then holds off-screen. Front-loading the scale makes the Ken Burns
motion clearly perceptible instead of crawling across the whole 21s loop. */
0% { opacity: 0; transform: scale(1.0); }
3% { opacity: 1; }
30% { opacity: 1; }
35% { opacity: 0; transform: scale(1.16); }
100% { opacity: 0; transform: scale(1.16); }
}
/* black overlay above the slides, below the text (main.css forces ::before to none) */
.hero-kb::before {
content: "" !important;
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(0,0,0,.56) 0%, rgba(0,0,0,.66) 52%, rgba(0,0,0,.80) 100%);
pointer-events: none;
}
.hero-kb .hero-box { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
.hero-frame { animation: none; transform: none; opacity: 0; }
.hero-frame:nth-child(1) { opacity: 1; }
}
/* ====================== QUOTE BAND: solid brand navy (Efrat style) ====================== */
.quoteband-quote { background: var(--navy-800); } /* #0A7C86 brand navy */
.quoteband-quote .quoteband-bg { display: none; }
/* ====================== WEBINARS: declutter (motif now lives in the quote band) ====================== */
.webinars-section::after { display: none !important; }
/* ====================== AUDIENCE: let the photos breathe ====================== */
.audience-image[data-photo]::after {
background: linear-gradient(180deg, rgba(7, 94, 102, 0) 46%, rgba(7, 94, 102, .48) 100%);
}
.audience-card-image { border-radius: 16px; overflow: hidden; box-shadow: 0 14px 34px -26px rgba(7, 94, 102, .35); transition: transform .3s ease, box-shadow .3s ease; }
.audience-card-image:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -26px rgba(7, 94, 102, .42); }
/* ====================== RESPONSIVE (v2) ====================== */
@media (max-width: 860px) {
.deco-flank { opacity: .08; width: 34vw; }
.why-card-photo { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
.services-section::before { animation: none; }
.why-card-img:hover, .audience-card-image:hover { transform: none; }
}
/* ============================================================
HOME REFINEMENTS v3
- WhyUs: bigger cards (2-up), bold titles, no number badge
- Quote band: large white opening quotation mark + visible gold CTA
============================================================ */
/* ---------- WhyUs: enlarge to a 2-up grid with bigger media + bold titles ---------- */
.home #why .benefit-wrap { grid-template-columns: repeat(2, 1fr); gap: 28px; }
.why-card-img .why-card-photo { aspect-ratio: 16 / 8.2; }
.why-card-img .why-card-text { padding: 30px 34px 34px; }
.why-card-img h3 {
font-weight: 700;
font-size: clamp(24px, 2.3vw, 30px);
margin-bottom: 14px;
}
.why-card-img p { font-size: clamp(16px, 1.4vw, 17.5px); line-height: 1.65; }
@media (max-width: 720px) {
.home #why .benefit-wrap { grid-template-columns: 1fr; }
}
/* ---------- Quote band: proper SVG quote-mark glyph (Efrat style), gold ---------- */
.quoteband-quote .quoteband-inner { text-align: center; }
.quoteband-quote-mark {
display: block; margin: 0 auto 22px;
width: clamp(46px, 5.4vw, 66px); height: auto;
}
.quoteband-quote em {
font-style: normal;
font-weight: 800;
color: #fff;
}
/* byline: line — קבוצת דיה — line, centered (Efrat style) */
.quoteband-byline {
display: flex; align-items: center; justify-content: center;
gap: 16px; margin: 26px auto 30px;
}
.quoteband-byline-line {
display: block; width: clamp(32px, 6vw, 64px); height: 1px;
background: rgba(255,255,255,.4);
}
.quoteband-byline-text {
font-size: 14px; font-weight: 600; letter-spacing: .04em;
color: rgba(255,255,255,.78);
}
/* ---------- Quote band CTA: clean WHITE pill on the dark teal band (makor-faithful) ---------- */
.quoteband-quote .quoteband-cta {
background: #FBFDFD !important;
border-color: transparent !important;
color: #075E66 !important;
box-shadow: 0 14px 30px -14px rgba(0,0,0,.45);
}
.quoteband-quote .quoteband-cta:hover {
background: #ffffff !important;
transform: translateY(-2px);
}
.quoteband-quote .quoteband-cta svg { color: #075E66 !important; }
/* ============================================================
ABOUT FEATURE BAND (fills the "empty" second section, simhaev style)
The method, made tangible: 4 photo-backed points under the about block
============================================================ */
.featgrid-wrap { margin-top: clamp(48px, 6vw, 76px); }
.featgrid-head {
display: flex; align-items: center; gap: 22px;
margin-bottom: clamp(26px, 3vw, 38px);
}
.featgrid-head .tilehead-line {
flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, rgba(10, 124, 134,.18), transparent);
}
.featgrid-head .tilehead-title {
margin: 0; flex: 0 0 auto;
font-family: var(--font-serif);
font-size: clamp(20px, 2.2vw, 27px);
font-weight: 700;
color: #0A7C86;
letter-spacing: -0.01em;
white-space: nowrap;
}
.featgrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(18px, 1.8vw, 26px);
}
.tile-card {
background: #fff;
border: 1px solid rgba(10, 124, 134,.08);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 16px 38px -28px rgba(7, 94, 102,.42);
transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease;
}
.tile-card:hover {
transform: translateY(-5px);
box-shadow: 0 28px 54px -28px rgba(7, 94, 102,.5);
}
.tile-media {
position: relative;
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center;
}
.tile-media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(7, 94, 102,.05) 0%, rgba(7, 94, 102,.42) 100%);
}
.tile-ic {
position: absolute; inset-inline-end: 12px; bottom: 12px; z-index: 1;
width: 40px; height: 40px; border-radius: 11px;
display: inline-flex; align-items: center; justify-content: center;
background: #FFB12E; color: #075E66;
box-shadow: 0 8px 18px -8px rgba(7, 94, 102,.55);
}
.tile-body { padding: 20px 22px 24px; }
.tile-title {
margin: 0 0 8px;
font-family: var(--font-serif);
font-size: clamp(18px, 1.7vw, 21px);
font-weight: 700;
color: #0A7C86;
letter-spacing: -0.01em;
}
.tile-text {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: var(--ink-500);
}
@media (max-width: 900px) {
.featgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.featgrid { grid-template-columns: 1fr; }
.featgrid-head .tilehead-title { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
.tile-card:hover { transform: none; }
}
/* ============================================================
KNOWLEDGE CAROUSEL (Efrat-style arrow slider with photo cards)
============================================================ */
.home #knowledge .kb-head.section-head {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
text-align: start;
max-width: none;
}
.kb-head .kb-head-text {
flex: 1 1 420px;
max-width: 720px;
display: flex;
flex-direction: column;
gap: 6px;
}
.kbslider-nav { display: flex; gap: 10px; flex: 0 0 auto; padding-bottom: 4px; }
.kbslider-arrow {
width: 48px; height: 48px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #0CA3AF 0%, #0A7C86 100%); color: #fff;
border: 1px solid #0CA3AF;
box-shadow: 0 10px 22px -12px rgba(10, 124, 134,.6);
cursor: pointer;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.kbslider-arrow:hover { background: linear-gradient(135deg, #0CA3AF 0%, #0CA3AF 100%); color: #fff; border-color: #0CA3AF; transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(10, 124, 134,.7); }
.kbslider-arrow.is-disabled { opacity: .32; pointer-events: none; }
.kbslider { overflow: hidden; margin: 0 calc(var(--container-x) * -1); padding: 0 var(--container-x); }
.kbslider-track {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 6px 2px 20px;
}
.kbslider-track::-webkit-scrollbar { display: none; }
.kbslider-track .kbcard {
flex: 0 0 calc((100% - 40px) / 3);
min-width: 300px;
scroll-snap-align: start;
padding: 0;
overflow: hidden;
}
.kbcard-photo-card { display: flex; flex-direction: column; }
.kbcard-photo {
position: relative;
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
}
.kbcard-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.kbcard-photo-card .kbcard-read {
display: inline-flex; align-items: center; gap: 6px;
margin-bottom: 10px; color: var(--ink-400);
}
.kbcard-photo-card .kbcard-title { margin-bottom: 10px; }
.kbcard-photo-card .kbcard-excerpt { margin-bottom: 18px; }
@media (max-width: 980px) {
.kbslider-track .kbcard { flex-basis: calc((100% - 20px) / 2); min-width: 280px; }
}
@media (max-width: 620px) {
.kbslider-track .kbcard { flex-basis: 86%; min-width: 0; }
.kb-head { align-items: flex-start; }
}
/* ============================================================
WHYUS -> Simhaev-style navy feature band (white line-icons + movement)
Replaces the old 2-up photo cards. 4 centered columns on a navy gradient,
each: large white icon (gentle float) + bold heading + light description,
staggered fade-in-up entrance + gold hover lift.
============================================================ */
.home #why.benefit-band {
position: relative;
overflow: hidden;
/* leans into the dark side of Makor's bird navy (#075E66), with only a faint
azure glow top-right for depth instead of the old bright Simhaev azure. */
padding-top: clamp(40px, 5vw, 68px);
background:
radial-gradient(125% 100% at 90% -10%, rgba(110,193,228,0.34) 0%, rgba(110,193,228,0) 44%),
linear-gradient(165deg, #1B4E86 0%, #0C376E 46%, #075E66 100%);
}
.home #why.benefit-band > .container { position: relative; z-index: 1; }
/* bottom wave divider, Elementor "Waves" preset, exactly like Simhaev's azure strip */
.home #why.benefit-band { padding-bottom: clamp(96px, 11vw, 150px); }
.band-wave {
position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2;
line-height: 0; pointer-events: none; direction: ltr;
}
.band-wave svg {
display: block; width: 100%; height: clamp(46px, 5vw, 74px);
transform: scaleY(-1); /* solid fill to the bottom edge, wave crests face up into the azure */
}
.band-wave .band-wave-fill { fill: #fff; } /* = services section bg below (now white) */
.home #why .benefit-wrap.benefit-grid {
grid-template-columns: repeat(4, 1fr);
gap: clamp(22px, 2.6vw, 44px);
margin-top: 10px;
}
.benefit {
display: flex; flex-direction: column; align-items: center;
text-align: center;
padding: 6px 8px;
}
/* BARE white icons (no box) exactly like Simhaev; movement is HOVER-ONLY */
.benefit .benefit-icon {
margin-bottom: 16px;
display: inline-flex; align-items: center; justify-content: center;
color: #fff;
transition: transform .4s cubic-bezier(.16,1,.3,1), color .3s ease;
}
.benefit .benefit-icon svg { width: 48px; height: 48px; }
/* custom per-icon hover motion (one by one), nothing moves at rest */
.benefit:nth-child(1):hover .benefit-icon { transform: translateY(-8px); color: #FFB12E; }
.benefit:nth-child(2):hover .benefit-icon { transform: translateY(-8px) scale(1.08); color: #FFB12E; }
.benefit:nth-child(3):hover .benefit-icon { transform: translateY(-8px) rotate(-6deg); color: #FFB12E; }
.benefit:nth-child(4):hover .benefit-icon { transform: translateY(-8px) scale(1.08); color: #FFB12E; }
.benefit-title {
margin: 0 0 8px;
font-family: inherit; /* Heebo sans, matching Simhaev */
font-size: clamp(20px, 1.9vw, 24px);
font-weight: 700; color: #fff;
letter-spacing: -0.01em; text-wrap: balance;
}
.benefit-text {
margin: 0; max-width: 26ch;
font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6;
color: rgba(255,255,255,.8);
}
@media (max-width: 900px) {
.home #why .benefit-wrap.benefit-grid { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
}
@media (max-width: 520px) {
.home #why .benefit-wrap.benefit-grid { grid-template-columns: 1fr; row-gap: 38px; }
}
@media (prefers-reduced-motion: reduce) {
.benefit:hover .benefit-icon { transform: none; }
}
/* ============================================================
HERO SHAPE DIVIDER (Elementor layered-tilt, like Simhaev)
============================================================ */
.hero-wave {
position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3;
width: 100%; line-height: 0; pointer-events: none; overflow: hidden;
}
/* Elementor "Tilt Opacity" preset, replicated 1:1 from Simhaev: three layered
paths at opacity 1 / 0.5 / 0.25, same fill, no flip (matches their render). */
.hero-wave svg {
display: block; width: 100%; height: clamp(40px, 4vw, 56px);
transform: rotate(180deg); /* Elementor flips bottom dividers 180deg -> solid fill sits at the bottom */
}
.hero-wave .hero-wave-fill { fill: #fff; } /* = About section bg (white); opacity layers give the soft tilt */
/* ============================================================
ABOUT: Simhaev second-section look (two offset images + text + button)
Text column and two-image column are EQUAL HEIGHT (grid stretch).
============================================================ */
.intro-inner.intro-duo {
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 4.5vw, 64px);
align-items: stretch; /* equal height: both columns match */
}
.intro-duo .intro-text {
max-width: 600px;
display: flex; flex-direction: column; justify-content: center;
}
.intro-duo .section-title { text-wrap: balance; }
.intro-points {
list-style: none; margin: 20px 0 26px; padding: 0;
display: flex; flex-direction: column; gap: 11px;
}
.intro-points li {
display: flex; align-items: center; gap: 11px;
font-size: 16px; color: var(--navy-900); font-weight: 600;
}
.intro-points li svg {
flex: 0 0 auto;
width: 26px; height: 26px;
padding: 5px;
border-radius: 50%;
background: linear-gradient(140deg, #FFC368 0%, #FFB12E 60%, #B6924A 100%);
color: #fff;
box-shadow: 0 4px 12px -4px rgba(255, 177, 46,.55);
}
.intro-cta { margin-top: 4px; align-self: flex-start; }
/* two-image composition, modeled 1:1 on Simhaev's second section:
back image = petal (one square corner, rest heavily rounded, gentle float),
front image = tall oval, offset diagonally and overlapping, azure blob behind.
Both ~0.78 portrait, same size, diagonal overlap. */
.intro-section { background: #fff; } /* second section is WHITE */
.duo {
position: relative;
min-height: 580px; /* floor; stretches taller to match text */
z-index: 0;
}
.duoimg-img {
position: absolute; z-index: 1;
width: 58%; aspect-ratio: 7 / 10; /* clearly portrait so the front reads as a vertical ELLIPSE */
background-size: cover; background-position: center;
box-shadow: 0 34px 70px -34px rgba(7, 94, 102,.45);
transition: transform .55s cubic-bezier(.16,1,.3,1); /* HOVER ONLY, no auto-motion */
}
.duoimg-img-1 {
top: 0; inset-inline-end: 0;
border-radius: 16px 50% 50% 50%; /* petal: one square corner, rest domed */
}
.duoimg-img-1:hover { transform: translateY(-8px); }
.duoimg-img-2 {
bottom: 0; inset-inline-start: 0; z-index: 2;
aspect-ratio: 7 / 9; /* fatter ellipse (0.778), exactly like Simhaev */
border-radius: 50%; /* vertical ellipse */
border: 10px solid #fff; /* thicker white separation border, like Simhaev */
}
.duoimg-img-2:hover { transform: scale(1.04) rotate(-1.5deg); }
.duoimg-accent {
position: absolute; z-index: 0;
top: -4%; inset-inline-end: -8%;
width: 62%; aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle at 50% 50%, rgba(110,193,228,.36), rgba(110,193,228,.09) 56%, transparent 72%);
}
.intro-duo .intro-float-card {
z-index: 3; inset-inline-start: 2%; bottom: 4%;
}
/* "השיטה שלנו, בארבע מילים": no icon chips on the photos */
.tile-ic { display: none !important; }
@media (max-width: 900px) {
.intro-inner.intro-duo { grid-template-columns: 1fr; gap: 40px; }
.duo { min-height: 480px; max-width: 500px; margin-inline: auto; width: 100%; }
}
@media (max-width: 420px) {
.duo { min-height: 400px; }
.duoimg-img { width: 62%; }
}
@media (prefers-reduced-motion: reduce) {
.duoimg-img-1:hover, .duoimg-img-2:hover { transform: none; }
}
/* ============================================================
PASS v3 — RTL icon placement, hero CTA, Efrat-grade footer
(appended last → wins at equal specificity)
============================================================ */
/* (icon stays in its natural RTL leading position inside buttons — no reorder) */
/* 2) Homepage hero — single, larger, wider primary CTA (WhatsApp button removed) */
.hero-actions .btn.hero-action-main {
font-size: clamp(16.5px, 1.5vw, 19px);
padding: 18px 50px;
min-width: 280px;
letter-spacing: 0.01em;
/* makor hero: turquoise pill with white text, matching the "מי אנחנו" button */
background: #0A7C86 !important;
border-color: transparent !important;
color: #ffffff !important;
box-shadow: 0 18px 40px -16px rgba(0,0,0,.55);
}
.hero-actions .btn.hero-action-main:hover { background: #075E66 !important; transform: translateY(-2px); box-shadow: 0 22px 48px -16px rgba(0,0,0,.62); }
@media (max-width: 560px) {
.hero-actions .btn.hero-action-main { min-width: 0; width: 100%; padding-inline: 28px; }
}
/* 3) Footer v2 — Efrat-grade: brand (right, leads) + 2 link cols + contact (left) */
.sitefoot .foot-grid {
grid-template-columns: 1.5fr 1fr 1fr 1.15fr;
gap: 44px;
align-items: start;
}
.sitefoot .foot-col h4 { color: var(--gold-400); }
.foot-contact .footci-list,
.foot-contact .footci-hours { list-style: none; margin: 0; padding: 0; }
.foot-contact .footci-list { display: flex; flex-direction: column; gap: 14px; }
.foot-contact .footci-item {
display: flex; align-items: center; gap: 11px; justify-content: flex-start;
color: var(--ink-300); font-size: 14.5px; line-height: 1.3; transition: color .2s;
}
.foot-contact .footci-item:hover:not(.footci-static) { color: var(--gold-400); }
.footci-static { cursor: default; }
.footci-ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--gold-400); flex-shrink: 0; }
.foot-contact .footci-hours li .footci-ic { width: 20px; height: 20px; }
.footci-text bdi { unicode-bidi: plaintext; }
.footci-sep { height: 1px; background: var(--line-on-navy); margin: 20px 0 16px; }
.foot-contact .footci-hours { display: flex; flex-direction: column; gap: 10px; }
.foot-contact .footci-hours li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-500); }
.foot-contact .footci-hours .footci-ic { color: rgba(255,255,255,0.38); }
.foot-brandcol .foot-tagline { max-width: 40ch; margin-bottom: 14px; }
.foot-note { font-size: 14.5px; font-weight: 700; color: #FFC368; margin: 0 0 18px; }
.sitefoot .foot-mark { display: block; height: 64px; width: auto; margin-bottom: 18px; }
@media (max-width: 960px) {
.sitefoot .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
.foot-brandcol { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 560px) {
.sitefoot .foot-grid { grid-template-columns: 1fr; }
}
/* MOBILE: fully centred footer — text + content. Nir 2026-06-07 */
@media (max-width: 760px) {
.sitefoot .foot-grid { grid-template-columns: 1fr; text-align: center; }
.sitefoot .foot-brand-row { justify-content: center !important; }
.sitefoot .foot-brandcol .foot-tagline { max-width: none; margin-inline: auto; }
.sitefoot .footer-socials { justify-content: center; }
.sitefoot .foot-contact .footci-list { align-items: center; }
.sitefoot .foot-contact .footci-hours { align-items: center; }
.sitefoot .footci-item,
.sitefoot .foot-contact .footci-hours li { justify-content: center; }
.sitefoot .foot-bar { flex-direction: column; gap: 12px; text-align: center; }
.sitefoot .foot-legal { justify-content: center; flex-wrap: wrap; }
}
/* ============================================================
SERVICES SHOWCASE (Nir 2026-06-07)
Replaces the flat accordion. Vertical tab rail (right) drives a
single rich panel (left): photo + description + feature checklist
+ CTA. No numbers, no 4 repetitive cards — fills the space.
============================================================ */
.svc-showcase {
display: grid;
grid-template-columns: 318px 1fr;
gap: clamp(24px, 3vw, 48px);
align-items: start;
max-width: 1180px;
margin: clamp(28px, 3.4vw, 46px) auto 0;
text-align: right;
}
/* selection stays in the right column; the service card is centred within
the remaining (left) column so it doesn't hug the tabs. Nir 2026-06-07 */
.svc-showcase .svc-panels {
justify-self: center;
width: 100%;
max-width: 560px;
}
.svc-tablist {
display: flex; flex-direction: column; gap: 12px;
position: sticky; top: 96px;
}
.svc-tab {
display: flex; align-items: center; gap: 14px;
width: 100%; text-align: right;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 15px 17px;
cursor: pointer;
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .3s ease;
}
.svc-tab:hover { border-color: var(--line-strong, rgba(10, 124, 134,.2)); transform: translateY(-2px); }
.svc-tab .svc-tab-icon {
flex: 0 0 auto;
width: 48px; height: 48px; border-radius: 13px;
display: grid; place-items: center;
background: linear-gradient(160deg, #EAF1FB, #F6F9FD);
color: var(--navy-800);
transition: background .3s ease, color .3s ease;
}
.svc-tab .svc-tab-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.svc-tab .svc-tab-title { font-weight: 700; font-size: 16.5px; color: var(--navy-900); letter-spacing: -.01em; line-height: 1.2; }
.svc-tab .svc-tab-sub { font-size: 12.5px; color: var(--ink-500); line-height: 1.35; }
.svc-tab .svc-tab-arrow {
flex: 0 0 auto; display: inline-flex; color: var(--ink-300);
opacity: 0; transform: translateX(6px);
transition: opacity .25s ease, transform .25s ease, color .25s ease;
}
.svc-tab.active {
background: linear-gradient(150deg, #0A7C86 0%, #075E66 100%);
border-color: transparent;
box-shadow: 0 20px 44px -22px rgba(7, 94, 102,.55);
transform: none;
}
.svc-tab.active .svc-tab-icon { background: rgba(255,255,255,.14); color: #fff; }
.svc-tab.active .svc-tab-title { color: #fff; }
.svc-tab.active .svc-tab-sub { color: rgba(255,255,255,.74); }
.svc-tab.active .svc-tab-arrow { opacity: 1; transform: none; color: #FFB12E; }
/* panels stacked in one grid cell -> smooth crossfade between services
(height stays stable, no layout jump, no instant swap) */
.svc-panels { display: grid; }
.svc-panel {
grid-area: 1 / 1;
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 30px 70px -38px rgba(7, 94, 102,.45);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity .42s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1), visibility .42s;
pointer-events: none;
}
.svc-panel.active {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
position: relative;
z-index: 1;
}
.svc-panel[hidden] { display: block; } /* visibility handled by .active, not the attr */
.svc-panel-media {
min-height: 232px;
background-size: cover; background-position: center;
position: relative;
}
.svc-panel-media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(7, 94, 102,0) 38%, rgba(7, 94, 102,.34) 100%);
}
.svc-panel-content { padding: clamp(26px, 2.6vw, 42px); }
.svc-panel-title {
margin: 0 0 12px; font-family: var(--font-serif);
font-size: clamp(24px, 2.4vw, 31px); font-weight: 700;
color: var(--navy-900); letter-spacing: -.01em;
}
.svc-panel-desc {
margin: 0 0 24px; font-size: clamp(15.5px, 1.4vw, 17px);
line-height: 1.7; color: var(--ink-600, #4A5567);
}
.svc-feature-grid {
list-style: none; margin: 0 0 28px; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px;
}
.svc-feature-grid li { display: flex; gap: 11px; align-items: flex-start; }
.svc-feature-check {
flex: 0 0 auto; margin-top: 1px;
width: 24px; height: 24px; border-radius: 8px;
display: grid; place-items: center;
background: rgba(255, 177, 46,.15); color: #FFB12E;
}
.svc-feature-text { display: flex; flex-direction: column; gap: 2px; }
.svc-feature-title { font-weight: 700; font-size: 15px; color: var(--navy-900); line-height: 1.3; }
.svc-feature-desc { font-size: 13.5px; line-height: 1.5; color: var(--ink-500); }
.svc-panel-cta { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 920px) {
.svc-showcase { grid-template-columns: 1fr; }
.svc-tablist { position: static; }
.svc-tab .svc-tab-arrow { display: none; }
.svc-feature-grid { grid-template-columns: 1fr; gap: 14px; }
}
/* ============================================================
FAQ + CONTACT side by side (Nir 2026-06-07)
FAQ pinned right, contact form on the left, one section — no
redundant scroll.
============================================================ */
.qa-contact .footci-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 3.4vw, 56px);
align-items: start;
}
.qa-contact .footci-faq .section-head,
.qa-contact .footci-form .contact-head {
text-align: right;
align-items: flex-start;
max-width: none;
margin-inline: 0;
}
.qa-contact .footci-faq .section-head { margin-bottom: 22px; }
.qa-contact .footci-form {
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
padding: clamp(24px, 2.6vw, 38px);
box-shadow: 0 24px 60px -34px rgba(7, 94, 102,.32);
}
.qa-contact .footci-form .contact-head { margin-bottom: 18px; }
@media (max-width: 920px) {
.qa-contact .footci-grid { grid-template-columns: 1fr; gap: 38px; }
}
/* Nir 2026-06-07: turn ONLY the small grayish-blue audience tint white.
Everything else (navy why-band, navy webinars, photo band) stays as it was. */
.home #audience { background: #fff; }
/* ============================================================
MOBILE OPTIMIZATION PASS — Nir 2026-06-07 (home + global)
============================================================ */
/* --- GLOBAL: kill the stray horizontal overflow (white strip on the side) --- */
html, body { overflow-x: hidden; max-width: 100%; }
#site-root { overflow-x: clip; }
/* --- HEADER: drop the consult button on mobile (hamburger stays) --- */
@media (max-width: 1024px) {
.topnav-cta .btn-primary { display: none; }
}
/* === ABOUT "מי אנחנו": photo right after the H2 on mobile; hide the float card === */
@media (max-width: 900px) {
.intro-inner.intro-duo { display: flex; flex-direction: column; gap: 22px; }
.intro-duo .intro-text { display: contents; }
.intro-duo .eyebrow { order: 1; }
.intro-duo .section-title { order: 2; }
.intro-duo .intro-visual { order: 3; margin: 4px 0 6px; }
.intro-duo .intro-lede { order: 4; }
.intro-duo .intro-detail { order: 5; }
.intro-duo .intro-points { order: 6; }
.intro-duo .intro-cta { order: 7; align-self: stretch; }
.intro-float-card { display: none !important; } /* hide the "אקדמיה פוגשת שטח" white card on mobile */
}
/* === "השיטה שלנו בארבע מילים": compact 2-up on mobile (kills the long scroll) === */
@media (max-width: 520px) {
.featgrid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
.tile-media { aspect-ratio: 16 / 11; }
.tile-body { padding: 14px 14px 16px; }
.tile-title { font-size: 15.5px; }
.tile-text { font-size: 12.5px; line-height: 1.5; }
.featgrid-head .tilehead-title { font-size: 19px; white-space: normal; }
}
/* === WEBINARS: videos right under the title + visible (gold) checkmarks === */
.webinars-features li svg { color: #FFB12E; }
@media (max-width: 1024px) {
.webinars-inner { display: flex; flex-direction: column; gap: 26px; align-items: stretch; }
.webinars-text { display: contents; }
.webinars-text .eyebrow.on-navy { order: 1; }
.webinars-text .section-title.on-navy { order: 2; }
.reels-grid { order: 3; }
.webinars-text .section-lede.on-navy { order: 4; }
.webinars-features { order: 5; }
.webinars-text .btn { order: 6; align-self: flex-start; }
}
/* the 3 reels collapse on mobile — turn them into a visible snap carousel
sitting right under the title (matches the gallery carousel). Nir 2026-06-07 */
@media (max-width: 760px) {
.reels-grid {
display: flex;
grid-template-columns: none;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin: 0 calc(var(--container-x) * -1);
padding: 2px var(--container-x) 8px;
}
.reels-grid::-webkit-scrollbar { display: none; }
.reels-grid .reel,
.reels-grid .reel:nth-child(2),
.reels-grid .reel:nth-child(3) {
flex: 0 0 66%;
scroll-snap-align: center;
aspect-ratio: 3 / 4;
transform: none;
display: block;
}
}
/* === GALLERY: horizontal snap carousel on mobile === */
@media (max-width: 760px) {
.fieldgal-grid {
display: flex;
grid-template-columns: none;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin: 0 calc(var(--container-x) * -1);
padding: 4px var(--container-x) 14px;
}
.fieldgal-grid::-webkit-scrollbar { display: none; }
.fieldgal-card {
flex: 0 0 80%;
scroll-snap-align: center;
aspect-ratio: 4 / 3;
min-height: 0;
height: auto;
grid-area: auto !important;
}
}
/* === QUOTE BAND birds: higher + smaller, pulled ~30px toward centre on mobile === */
@media (max-width: 760px) {
.deco-flank { top: 11%; width: 21vw; opacity: .14; }
.deco-flank-r { inset-inline-end: calc(3% + 30px); transform: scaleX(-1) rotate(-4deg); }
.deco-flank-l { inset-inline-start: calc(3% + 30px); transform: rotate(4deg); }
}
/* === SERVICES showcase: real connected accordion on mobile === */
@keyframes svcDrawerIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 920px) {
.svc-showcase { display: block; max-width: none; padding-inline-end: 0; margin-top: clamp(24px,4vw,36px); }
.svc-showcase .svc-panels { max-width: none; } /* reset the desktop centring cap */
/* tabs stack with a gap, BUT an open tab joins seamlessly to its drawer */
.svc-tablist { position: static; gap: 0; }
.svc-showcase .svc-tab { margin-bottom: 10px; border-radius: 16px; }
.svc-showcase .svc-tab.active {
margin-bottom: 0;
border-radius: 16px 16px 0 0; /* flatten the bottom → continues into the drawer */
box-shadow: 0 -2px 0 0 transparent;
}
.svc-panels { display: block; }
/* each panel is moved (by JS) to sit right under its tab = one accordion unit */
.svc-showcase .svc-panel {
position: static; visibility: visible; transform: none;
display: none; margin: 0 0 10px;
border-top: 0; /* shares the active tab's bottom edge */
border-radius: 0 0 16px 16px; /* rounded only at the bottom */
}
.svc-showcase .svc-panel.active {
display: block;
animation: svcDrawerIn .35s ease both; /* subtle fade/slide on open */
}
.svc-panel-media { aspect-ratio: 16 / 9; min-height: 0; border-radius: 0; }
.svc-tab .svc-tab-arrow { display: inline-flex; transition: transform .3s ease; }
.svc-tab.active .svc-tab-arrow { transform: rotate(-90deg); }
.svc-panel-cta { width: 100%; justify-content: center; white-space: normal; text-align: center; }
.svc-feature-grid { grid-template-columns: 1fr; gap: 14px; }
}
/* ============================================================
HOME FAQ — centered, full-width (form removed; lead capture
now lives in the single bottom CTA). Nir 2026-06-07
============================================================ */
.qa-section .section-head {
margin-inline: auto;
text-align: center;
align-items: center;
max-width: 700px;
}
.qa-section .section-head .eyebrow { justify-content: center; }
.qa-listb.qa-list {
max-width: 860px;
margin-inline: auto;
text-align: right;
}
/* ===== FAQ — elevated card accordion (Nir 2026-06-09: previous accordion felt low-grade) ===== */
.qa-section { background: var(--cream-50, #FBFDFD); }
.qa-section .qa-list {
border-top: 0;
max-width: 820px;
display: flex;
flex-direction: column;
gap: 14px;
}
.qa-section .qa-item {
position: relative;
border-bottom: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(7, 94, 102,.03);
transition: border-color .3s ease, box-shadow .3s ease;
}
.qa-section .qa-item::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0;
bottom: 0;
width: 3px;
background: #0A7C86;
transform: scaleY(0);
transform-origin: top;
transition: transform .35s ease;
}
.qa-section .qa-item:hover { border-color: var(--line-strong, #d6dded); }
.qa-section .qa-item.open {
border-color: rgba(10, 124, 134,.45);
box-shadow: 0 18px 44px -26px rgba(7, 94, 102,.32);
}
.qa-section .qa-item.open::before { transform: scaleY(1); }
.qa-section .qa-q {
padding: 22px 22px;
font-family: var(--font-sans);
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--navy-900);
}
.qa-section .qa-q:hover { color: #0A7C86; }
.qa-section .qa-item.open .qa-q { color: var(--navy-900); }
.qa-section .qa-toggle {
width: 34px;
height: 34px;
border: 1px solid rgba(10, 124, 134,.35);
background: rgba(10, 124, 134,.09);
color: #0A7C86;
}
.qa-section .qa-item.open .qa-toggle {
transform: rotate(45deg);
background: #0A7C86;
border-color: #0A7C86;
color: #fff;
}
.qa-section .qa-a p {
padding: 0 22px 24px;
font-size: 15.5px;
line-height: 1.72;
color: var(--ink-600, #4A5C5E);
}
/* ============================================================
HEADER NAV — larger menu text + matched CTA button. Nir 2026-06-07
============================================================ */
.navbar .topnav-links a { font-size: 16px; font-weight: 600; }
.navbar .topnav-cta .btn { font-size: 15.5px; padding: 11px 20px; }
/* ============================================================
LEGAL PAGES (privacy + accessibility) — readable prose.
Nir 2026-06-07
============================================================ */
.legal-section { padding-top: clamp(130px, 15vw, 200px); padding-bottom: clamp(56px, 7vw, 96px); }
.legal-container { max-width: 860px; }
.legal-head { margin-bottom: clamp(28px, 4vw, 48px); }
.legal-head .section-title { margin-top: 6px; }
.legal-updated { color: var(--ink-500); font-size: 14px; margin-top: 10px; }
.legal-body { text-align: right; color: var(--ink-700); }
.legal-body h2 {
font-size: clamp(19px, 2.2vw, 23px);
color: var(--navy-900);
font-weight: 700;
margin: clamp(28px, 3vw, 40px) 0 12px;
}
.legal-body p { line-height: 1.85; margin: 0 0 14px; font-size: 16px; }
.legal-body ul { margin: 0 0 16px; padding-inline-start: 22px; }
.legal-body li { line-height: 1.8; margin-bottom: 8px; font-size: 16px; }
.legal-body a { color: var(--navy-700); text-decoration: underline; }
.legal-body a:hover { color: var(--gold-700); }
/* ====================== HOME SERVICES — crossfade carousel (replaces image cards) ====================== */
.scarousel {
margin-top: clamp(38px, 5vw, 56px);
}
.scarousel-stage {
position: relative;
border-radius: clamp(18px, 2vw, 26px);
overflow: hidden;
box-shadow: var(--shadow-lg, 0 30px 70px -30px rgba(7, 94, 102,.35));
border: 1px solid var(--line);
background: var(--navy-900);
}
.scarousel-slides {
position: relative;
aspect-ratio: 16 / 9;
min-height: 440px;
}
.scarousel-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity .85s cubic-bezier(.4,0,.2,1), visibility .85s;
}
.scarousel-slide.active {
opacity: 1;
visibility: visible;
z-index: 2;
}
.scarousel-scene {
position: absolute;
inset: 0;
background-image: var(--scene);
background-size: cover;
background-position: center;
transform: scale(1.02);
transition: transform 1.4s ease;
}
.scarousel-slide.active .scarousel-scene { transform: scale(1); }
.scarousel-slide.active:hover .scarousel-scene { transform: scale(1.04); }
/* bright cream wash on the RIGHT (text side), fading to clear over the subject on the left */
.scarousel-slide::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
to left,
rgba(250,247,240,.98) 0%,
rgba(250,247,240,.92) 26%,
rgba(250,247,240,.55) 48%,
rgba(250,247,240,.12) 64%,
rgba(250,247,240,0) 76%
);
}
/* whole image is a link to the service page (text panel/CTA stay interactive) */
.scarousel-link {
position: absolute;
inset: 0;
z-index: 3;
display: block;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.scarousel-inner {
position: relative;
z-index: 4;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start; /* RTL -> right side */
padding: 0 clamp(34px, 6vw, 92px);
pointer-events: none; /* let clicks on the empty image area reach .scarousel-link */
}
.scarousel-info { pointer-events: auto; } /* text + CTA remain clickable/selectable */
.scarousel-info {
max-width: 470px;
text-align: right;
}
.scarousel-tag {
display: inline-block;
margin-bottom: 16px;
padding: 7px 18px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-align: center;
color: #FFF3DF;
background: var(--navy-800);
border: 1px solid rgba(255, 195, 104,.5);
border-radius: 999px;
box-shadow: 0 6px 18px -8px rgba(7, 94, 102,.45);
}
.scarousel-info h3 {
font-family: var(--font-sans);
font-weight: 800;
font-size: clamp(26px, 3.4vw, 38px);
line-height: 1.18;
letter-spacing: -0.012em;
color: var(--navy-900);
margin: 0 0 14px;
}
.scarousel-desc {
font-size: clamp(15px, 1.25vw, 17px);
line-height: 1.7;
color: var(--ink-600, #4A5C5E);
margin: 0 0 20px;
text-wrap: pretty;
}
/* light, airy checklist — gold check-circle + text, NO pill background (blends with the cream wash, stays compact) */
.scarousel-feats {
list-style: none;
margin: 0 0 24px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
justify-content: flex-start;
}
.scarousel-feats li {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 0;
font-size: 14px;
font-weight: 600;
color: var(--navy-800);
background: transparent;
border: 0;
}
.scarousel-feats li::before {
content: "\2713";
flex: 0 0 auto;
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(140deg, #FFC368 0%, #FFB12E 100%);
color: #fff;
font-size: 10.5px;
font-weight: 900;
box-shadow: 0 3px 9px -3px rgba(255, 177, 46,.5);
}
.scarousel-cta {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 13px 26px;
font-size: 15px;
font-weight: 700;
color: #fff;
background: var(--navy-800);
border-radius: 999px;
text-decoration: none;
transition: background .25s ease, gap .2s ease, transform .25s ease;
}
.scarousel-cta:hover {
background: var(--navy-900);
color: #fff;
gap: 14px;
transform: translateY(-1px);
}
/* nav arrows */
.scarousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 6;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
border-radius: 50%;
background: rgba(255,255,255,.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--navy-800);
cursor: pointer;
box-shadow: 0 8px 24px -10px rgba(7, 94, 102,.4);
transition: background .2s ease, transform .2s ease;
}
.scarousel-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.scarousel-nav.prev { right: 18px; }
.scarousel-nav.next { left: 18px; }
/* dots */
.scarousel-dots {
display: flex;
gap: 9px;
justify-content: center;
margin-top: 22px;
}
.scarousel-dot {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(7, 94, 102,.22);
cursor: pointer;
transition: width .3s ease, background .3s ease;
}
.scarousel-dot.active {
width: 30px;
background: var(--gold-600, #FFB12E);
}
@media (max-width: 860px) {
.scarousel-slides { aspect-ratio: auto; min-height: 0; height: 540px; }
.scarousel-scene { background-position: 28% center; } /* keep the subject (left) in frame */
.scarousel-slide::before {
/* richer dark base under the text/CTA so the bottom doesn't read washed-out (Nir 2026-06-10) */
background: linear-gradient(
to top,
rgba(2,16,42,.98) 0%,
rgba(2,16,42,.93) 40%,
rgba(2,16,42,.62) 66%,
rgba(2,16,42,.18) 86%,
rgba(2,16,42,0) 100%
);
}
.scarousel-inner { align-items: flex-end; padding: 0 26px 34px; }
.scarousel-info { max-width: none; }
.scarousel-tag {
color: #FFF3DF;
background: rgba(2,16,42,.6);
border-color: rgba(255, 195, 104,.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.scarousel-info h3 { color: #fff; }
.scarousel-desc { color: rgba(255,255,255,.86); }
.scarousel-feats li {
color: #fff;
background: transparent;
border: 0;
}
.scarousel-cta { background: var(--gold-600, #FFB12E); color: var(--navy-900); }
.scarousel-cta:hover { background: #FFC368; }
.scarousel-nav { display: none; }
.scarousel-dot { width: 10px; height: 10px; background: rgba(7, 94, 102,.28); }
.scarousel-dot.active { width: 32px; }
}
@media (max-width: 480px) {
.scarousel-slides { height: 500px; }
.scarousel-info h3 { font-size: 24px; }
}
/* white-background utility (Nir 2026-06-09: knowledge + testimonials sections white) */
.bg-white { background: #fff !important; }
/* ===== ABOUT — "ארבעה עקרונות" principles section (had ZERO css -> rendered unstyled/weird). Nir 2026-06-09 ===== */
.intro-principles {
padding-block: clamp(56px, 7vw, 96px);
background: #fff;
}
.intro-principles .section-head {
text-align: center;
align-items: center;
max-width: 680px;
margin: 0 auto clamp(36px, 4.5vw, 56px);
}
.intro-principles .section-head .eyebrow { justify-content: center; }
.principles-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(16px, 2vw, 26px);
max-width: 980px;
margin-inline: auto;
}
.principle-row {
background: var(--cream-50, #FBFDFD);
border: 1px solid var(--line);
border-radius: 18px;
padding: clamp(26px, 3vw, 38px);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.principle-row:hover {
transform: translateY(-4px);
box-shadow: 0 22px 48px -30px rgba(7, 94, 102,.35);
border-color: rgba(255, 177, 46,.4);
}
.principle-num {
display: inline-block;
font-family: var(--font-sans);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.1em;
color: #FFB12E;
margin-bottom: 14px;
}
.principle-title {
font-family: var(--font-sans);
font-weight: 800;
font-size: clamp(19px, 2vw, 23px);
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--navy-900);
margin: 0 0 10px;
}
.principle-desc {
font-size: 15px;
line-height: 1.7;
color: var(--ink-600, #4A5C5E);
margin: 0;
text-wrap: pretty;
}
@media (max-width: 720px) {
.principles-list { grid-template-columns: 1fr; }
}
/* CTA buttons: icon ALWAYS on the LEFT of the text (RTL). Nir 2026-06-09.
order:1 pushes the svg after the text in the flex flow -> left side in RTL,
whether the icon is the first or last child in the markup. */
.btn svg { order: 1; }
/* tighten the gap between the מאמרים (knowledge) and לקוחות ממליצים (testimonials) sections. Nir 2026-06-09 */
#knowledge.kb-section { padding-bottom: clamp(34px, 4vw, 56px); }
.testimonials-section { padding-top: clamp(34px, 4vw, 56px); }
/* ============= HOME AUDIENCE — fixed-scroll feature band (cosmetics cxadvx pattern, Makor tokens) ============= */
.forwho {
position: relative;
overflow: hidden;
padding: clamp(56px, 7vw, 100px) 0;
}
/* beat the legacy .home #audience{background:#fff} tint rule */
.home #audience.forwho { background: var(--navy-900); }
.forwho::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: var(--audbg);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.forwho__overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(2,16,42,.72) 0%, rgba(2,11,30,.85) 100%);
}
.forwho__inner { position: relative; z-index: 2; }
.forwho__head {
text-align: center;
max-width: 720px;
margin: 0 auto clamp(34px, 4vw, 54px);
}
.forwho__head .section-title { margin-top: 8px; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.forwho__head .section-lede { margin: 14px auto 0; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.forwho__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(14px, 1.4vw, 20px);
}
.forwho__step {
position: relative;
display: flex;
align-items: flex-start;
gap: clamp(10px, 1vw, 14px);
padding: clamp(22px, 2vw, 28px) clamp(16px, 1.5vw, 22px);
border-radius: 16px;
background: rgba(2,14,36,.5);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
border: 1px solid rgba(255, 177, 46,.32);
transition: transform .4s ease, border-color .4s ease;
}
.forwho__step:hover { transform: translateY(-5px); border-color: rgba(255, 195, 104,.62); }
.forwho__num {
flex: 0 0 auto;
font-family: var(--font-sans);
font-weight: 900;
font-size: clamp(1.9rem, 2.4vw, 2.5rem);
line-height: .92;
color: #FFB12E;
letter-spacing: -0.02em;
text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.forwho__txt { flex: 1 1 auto; min-width: 0; }
.forwho__txt h3 {
font-family: var(--font-sans);
color: #fff;
font-size: clamp(1rem, 1.2vw, 1.16rem);
font-weight: 800;
margin: 2px 0 8px;
letter-spacing: -0.005em;
line-height: 1.25;
}
.forwho__txt p {
color: rgba(255,255,255,.82);
line-height: 1.6;
margin: 0;
font-size: clamp(.86rem, .95vw, .95rem);
text-wrap: pretty;
}
@media (max-width: 980px) {
.forwho__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.forwho__grid { grid-template-columns: 1fr; }
.forwho::before { background-attachment: scroll; }
}
/* "אודות" button placed under service-page intro paragraphs — solid blue */
.intro-act,
.btn.btn-secondary.intro-act {
margin-top: 22px;
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #0CA3AF 0%, #0A7C86 100%) !important;
color: #fff !important;
border: 0 !important;
box-shadow: 0 12px 26px -12px rgba(10, 124, 134,.6) !important;
transition: transform .25s ease, box-shadow .25s ease, gap .2s ease, background .25s ease !important;
}
.intro-act:hover,
.btn.btn-secondary.intro-act:hover {
background: linear-gradient(135deg, #0CA3AF 0%, #0CA3AF 100%) !important;
color: #fff !important;
gap: 12px;
transform: translateY(-2px);
box-shadow: 0 16px 30px -12px rgba(10, 124, 134,.7) !important;
}
.intro-act svg { color: #fff !important; }
/* Home "לכל המאמרים והמדריכים" — solid blue, white text */
.kb-footer .btn,
.kb-footer .btn.btn-secondary {
background: linear-gradient(135deg, #0CA3AF 0%, #0A7C86 100%) !important;
color: #fff !important;
border: 0 !important;
box-shadow: 0 12px 26px -12px rgba(10, 124, 134,.6) !important;
transition: transform .25s ease, box-shadow .25s ease, gap .2s ease, background .25s ease !important;
}
.kb-footer .btn:hover,
.kb-footer .btn.btn-secondary:hover {
background: linear-gradient(135deg, #0CA3AF 0%, #0CA3AF 100%) !important;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 16px 30px -12px rgba(10, 124, 134,.7) !important;
}
.kb-footer .btn svg { color: #fff !important; }
/* ============================================================
MOBILE REFINEMENTS — v4.9.61 (live review, 2026-06-09)
Every rule below is mobile-only. Loaded last → wins.
============================================================ */
@keyframes mhMarquee { from { transform: translateX(0); } to { transform: translateX(50%); } }
@keyframes mhHeroFadeMobile { 0% { opacity: 0; } 3% { opacity: 1; } 30% { opacity: 1; } 35% { opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 768px) {
/* ---------- 1. Header: solid white, compact, smaller logo, cleaner burger ---------- */
.navbar { background: #fff !important; border-bottom: 1px solid var(--line) !important; box-shadow: 0 4px 18px -16px rgba(7, 94, 102,.32) !important; }
.topnav-inner { height: 68px !important; min-height: 68px !important; }
.brand-logo { height: 58px !important; }
.hero { padding-top: 68px !important; }
.drawer-btn { width: 42px; height: 42px; border: 0 !important; background: transparent !important; color: var(--navy-800); border-radius: 10px; }
.drawer-btn:active { background: rgba(10, 124, 134,.07) !important; }
.drawer-btn svg { width: 24px; height: 24px; }
/* ---------- 1. Hero: keep "קבוצת דיה" eyebrow, bigger headline, snug CTA (Nir 2026-06-10) ---------- */
.hero-kicker { font-size: 11.5px; padding: 6px 14px; margin-bottom: 18px; letter-spacing: .02em; }
.hero h1 { font-size: clamp(36px, 10.5vw, 50px) !important; line-height: 1.1 !important; margin-bottom: 16px; }
.hero p.lede { font-size: 15.5px !important; line-height: 1.5; margin-bottom: 26px; }
.hero-actions { margin-bottom: 24px; align-items: center !important; }
.hero-actions .btn.hero-action-main { width: auto !important; min-width: 0 !important; align-self: center !important; font-size: 15.5px !important; padding: 14px 26px !important; }
/* Ken Burns not suited to mobile → soft cross-fade only (no zoom/pan), recentred */
.hero-frame { background-position: center center !important; animation-name: mhHeroFadeMobile !important; }
/* ---------- 2. About "מי אנחנו": centre, bigger+closer eyebrow, unify paragraph colours, kill the compounding gaps (Nir 2026-06-10) ---------- */
.intro-inner.intro-duo { gap: 14px !important; }
.intro-duo .intro-text { text-align: center; align-items: center; max-width: none; }
.intro-duo .intro-text .eyebrow { justify-content: center; font-size: 14px; letter-spacing: .14em; margin: 0; }
.intro-duo .section-title { margin: -4px 0 0 !important; }
.intro-duo .intro-visual { margin: 6px 0 !important; }
.intro-duo .intro-lede,
.intro-duo .intro-detail {
text-align: center; margin: 0 !important; color: var(--ink-700) !important;
font-size: 16px; line-height: 1.65; font-weight: 500;
}
.intro-points { gap: 9px; margin: 4px 0 0 !important; }
.intro-points li {
justify-content: flex-start; text-align: right;
background: var(--cream-50, #FBFDFD); border: 1px solid var(--line);
border-radius: 12px; padding: 12px 14px; font-size: 14.5px; gap: 10px;
}
.intro-cta { align-self: center; margin: 4px 0 0 !important; }
/* ---------- 3. Services fade widget: compact single-line features w/ gold check-circle + subject-framed crop (Nir 2026-06-10) ---------- */
.scarousel-slides { height: 540px !important; }
/* portrait crop frames the SUBJECT (people sit on the LEFT of these 16:9 shots); nudged further inward so they're never clipped */
.scarousel-scene { background-position: 15% 24% !important; background-size: cover !important; }
/* one tight line per feature (glass boxes wrapped each to 2 lines = too tall); gold check-circle = premium but compact */
.scarousel-feats { flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 16px !important; }
.scarousel-feats li {
display: flex !important; align-items: center !important; gap: 10px !important;
padding: 0 !important; background: transparent !important; border: 0 !important;
font-size: 14px !important; font-weight: 600 !important; color: #fff !important; line-height: 1.25 !important;
}
.scarousel-feats li::before {
content: "\2713" !important; flex: 0 0 auto !important;
width: 21px !important; height: 21px !important; border-radius: 50% !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
background: linear-gradient(140deg, #FFC368 0%, #FFB12E 100%) !important;
color: #fff !important; font-size: 11px !important; font-weight: 900 !important;
box-shadow: 0 3px 10px -3px rgba(255, 177, 46,.55) !important;
}
.scarousel-cta { background: #fff !important; color: var(--navy-900) !important; box-shadow: 0 10px 26px -12px rgba(0,0,0,.55) !important; }
.scarousel-cta:hover { background: #F1F4F8 !important; color: var(--navy-900) !important; }
.scarousel-cta svg { color: var(--navy-900) !important; }
/* ---------- 4. Audience "לא לכולם": widen the description, less empty left space ---------- */
.forwho__head .section-lede { max-width: none; }
.forwho__step { padding: 18px 16px; gap: 12px; }
.forwho__num { font-size: 1.65rem; }
.forwho__txt p { font-size: .98rem; }
/* ---------- 5. Gallery (home) + Gallery page: auto infinite marquee ---------- */
.fieldgal-grid.is-marquee, .gp-grid.is-marquee {
display: flex !important; flex-wrap: nowrap !important; width: max-content;
grid-template-columns: none !important; grid-auto-rows: auto !important;
gap: 14px; overflow: visible !important; scroll-snap-type: none !important;
animation: mhMarquee 36s linear infinite; margin: 0 !important; padding: 4px 0 !important;
}
.fieldgal-grid.is-marquee { animation-duration: 32s; }
.fieldgal-grid.is-marquee .fieldgal-card {
flex: 0 0 74vw !important; max-width: 300px; width: 74vw; aspect-ratio: 4/3;
height: auto; min-height: 0; grid-area: auto !important; scroll-snap-align: none;
}
.gp-grid.is-marquee { animation-duration: 48s; }
.gp-grid.is-marquee .gp-tile { flex: 0 0 68vw !important; max-width: 290px; width: 68vw; aspect-ratio: 3/4; grid-area: auto !important; }
.fieldgal-grid.is-marquee:active, .gp-grid.is-marquee:active { animation-play-state: paused; }
/* the auto-marquee replaces the (browsable) filter grid on the gallery page */
.gp-filters { display: none !important; }
/* ---------- 6. Articles carousel: 1 per view, no arrows (JS auto-advances) ---------- */
.kbslider-nav { display: none !important; }
.kbslider-track { gap: 14px; }
.kbslider-track .kbcard { flex: 0 0 100% !important; min-width: 0 !important; scroll-snap-align: center; }
/* ---------- 7. Professional content (webinars): centre + tidy ---------- */
.webinars-inner { gap: 22px; }
.webinars-text .eyebrow.on-navy, .webinars-text .section-title.on-navy, .webinars-text .section-lede.on-navy { text-align: center; }
.webinars-text .eyebrow.on-navy { justify-content: center; }
.webinars-features { max-width: 440px; margin-inline: auto; }
.webinars-text .btn { align-self: center !important; margin-inline: auto; }
/* ---------- 8. Mobile drawer: see the drawer accordion block at the end of
this file — it runs to 1024px, the width where the burger takes over. ---------- */
/* ---------- contact page: form first, details below ---------- */
.cp-main-grid .cp-form { order: 1; }
.cp-main-grid .cp-info { order: 2; }
/* ---------- about page: raise the two Makor birds ~15px ---------- */
.intro-deco-band .deco-flank { margin-top: -15px; }
}
/* ============================================================
Service-page feature sections (standards / scope / method):
white sub-title on the dark photo band + a contact CTA at the
bottom of each section. Nir 2026-06-09.
============================================================ */
.svm-standards .section-lede,
.svc3-list .section-lede,
.svp-method__head .section-lede { color: #fff !important; }
.svc-feat-cta { display: flex; justify-content: center; margin-top: clamp(34px, 4vw, 52px); }
.svc-feat-cta .btn {
display: inline-flex; align-items: center; gap: 9px;
padding: 15px 34px; font-size: 16px; font-weight: 700;
background: #fff; color: var(--navy-900); border: 0; border-radius: 999px;
box-shadow: 0 16px 34px -16px rgba(0,0,0,.55);
transition: transform .25s ease, gap .2s ease, box-shadow .25s ease, background .25s ease;
}
.svc-feat-cta .btn:hover { background: #F1F4F8; color: var(--navy-900); gap: 13px; transform: translateY(-2px); }
.svc-feat-cta .btn svg { color: var(--navy-900) !important; }
/* ============================================================
Audience band "לא לכולם, וזה בכוונה": white CTA at the bottom
(fit-check -> contact, not "free consultation"). Nir 2026-06-10.
============================================================ */
.forwho__cta { display: flex; justify-content: center; margin-top: clamp(36px, 4.5vw, 56px); }
.forwho__cta .btn {
display: inline-flex; align-items: center; gap: 9px;
padding: 15px 34px; font-size: 16px; font-weight: 700;
background: #fff; color: var(--navy-900); border: 0; border-radius: 999px;
box-shadow: 0 16px 34px -16px rgba(0,0,0,.55);
transition: transform .25s ease, gap .2s ease, box-shadow .25s ease, background .25s ease;
}
.forwho__cta .btn:hover { background: #F1F4F8; color: var(--navy-900); gap: 13px; transform: translateY(-2px); box-shadow: 0 22px 44px -18px rgba(0,0,0,.6); }
.forwho__cta .btn svg { color: var(--navy-900) !important; }
@media (max-width: 768px) { .forwho__cta .btn { width: auto; padding: 14px 28px; font-size: 15.5px; } }
/* ============================================================
TRUST BAND (real Google rating) — Makor addition.
`.bg-navy` is not defined in the ported set, so give the band
its own dark teal gradient. `.on-navy` already whitens the text.
============================================================ */
/* Real Google reviews — modeled on the cosmetics "מה הלקוחות שלנו אומרים"
testimonial grid, recolored teal+sun. Light section, white cards. */
/* Reviews = WHITE, with a downward-pointing TRIANGLE shape divider at its
BOTTOM that dips into the grey gallery below (Elementor "triangle" preset,
100% wide x 50px). The divider strip is grey (matches the gallery); the
white SVG wedge points down into it — a downward arrow entering the next
section. */
.reviews-section {
background: #FFFFFF;
position: relative;
}
/* extra bottom room ONLY when the homepage wave-shape divider is present;
on service pages (no shape) padding stays symmetric via .section */
.reviews-section:has(.reviews-shape) {
padding-bottom: calc(35px + clamp(20px, 2.5vw, 32px));
}
.reviews-shape {
position: absolute; left: 0; bottom: -34px;
width: 100%; height: 35px;
background: #F1F4F5;
line-height: 0;
z-index: 2;
pointer-events: none;
}
.reviews-shape svg { display: block; width: 100%; height: 100%; }
.reviews-shape path { fill: #FFFFFF; }
/* Gallery = light-grey surface (the divider above flows into it). */
.fieldgal-section {
background: #F1F4F5;
position: relative;
padding-top: clamp(30px, 4vw, 52px);
}
/* extra breathing room above the gallery title (Nir 2026-06-22) */
.fieldgal-section .section-head { padding-top: 20px; }
.fieldgal-title-1line { text-wrap: nowrap; }
/* Gallery card labels: guarantee WHITE, readable text on the photo (strong
bottom scrim + white tag + white title with shadow). */
.fieldgal-card[data-photo] .fieldgal-overlay {
background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.50) 48%, rgba(0,0,0,0) 90%);
padding: 22px 22px 20px;
}
.fieldgal-card .fieldgal-tag {
background: rgba(255,255,255,.18) !important;
color: #FFFFFF !important;
border-color: rgba(255,255,255,.34) !important;
backdrop-filter: blur(4px);
}
.fieldgal-card .fieldgal-title {
color: #FFFFFF !important;
font-weight: 700;
text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
/* Tighten the gap between the knowledge/articles section and the FAQ. */
.kb-section { padding-bottom: clamp(34px, 4vw, 52px); }
.qa-section { padding-top: clamp(34px, 4vw, 52px); }
/* ===== Header: center the nav menu, and open the services dropdown leftward
(RTL). Phone removed from markup. ===== */
.topnav-inner { position: relative; }
.topnav-links {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
/* services dropdown: align its right edge to the trigger so it opens leftward
(physical values, immune to any inherited LTR direction). */
.topnav-drop { right: 0 !important; left: auto !important; text-align: right; }
@media (min-width: 768px) {
.fieldgal-title-1line { white-space: nowrap; }
}
@media (max-width: 767px) {
.fieldgal-title-1line { white-space: normal; text-wrap: balance; }
}
/* ===== Solar CTA — full-bleed Ken Burns photo band (Simhaev-style): one custom
three rooftop photos crossfading with a real Ken Burns zoom+pan behind a soft
black scrim, a static centered headline, supporting copy + single CTA. ===== */
.solarcta {
position: relative;
overflow: hidden;
isolation: isolate;
background: #0d0d0d; /* fallback under the photo */
}
.solarcta-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Three real Ken Burns frames: each both zooms AND pans, crossfading one to the
next on a 27s loop (9s visible per frame). Staggered animation-delay drives the
crossfade; transform keyframes give the zoom + pan. */
.solarcta-frame {
position: absolute; inset: 0;
background-size: cover; background-position: center center;
opacity: 0;
will-change: transform, opacity;
animation: solarFade 27s linear infinite;
}
.solarcta-frame--1 { animation-delay: 0s; }
.solarcta-frame--2 { animation-delay: 9s; }
.solarcta-frame--3 { animation-delay: 18s; }
/* The zoom+pan lives in a second animation on a pseudo-less wrapper via transform.
We run two animations per frame: opacity crossfade (solarFade) + motion (solarPan*). */
.solarcta-frame--1 { animation-name: solarFade, solarPan1; animation-duration: 27s, 27s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; }
.solarcta-frame--2 { animation-name: solarFade, solarPan2; animation-duration: 27s, 27s; animation-delay: 9s, 9s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; }
.solarcta-frame--3 { animation-name: solarFade, solarPan3; animation-duration: 27s, 27s; animation-delay: 18s, 18s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; }
/* opacity: visible for ~11s of the 27s cycle (40.7%), 1.5s crossfades on each side */
@keyframes solarFade {
0% { opacity: 0; }
4% { opacity: 1; }
33% { opacity: 1; }
40% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes solarPan1 { 0% { transform: scale(1.06) translate(0, 0); } 40% { transform: scale(1.16) translate(-2.2%, -1.6%); } 100% { transform: scale(1.16) translate(-2.2%, -1.6%); } }
@keyframes solarPan2 { 0% { transform: scale(1.06) translate(0, 0); } 40% { transform: scale(1.16) translate(2.2%, 1.4%); } 100% { transform: scale(1.16) translate(2.2%, 1.4%); } }
@keyframes solarPan3 { 0% { transform: scale(1.16) translate(1.8%, -1.4%); } 40% { transform: scale(1.06) translate(0, 0); } 100% { transform: scale(1.06) translate(0, 0); } }
.solarcta-scrim {
position: absolute; inset: 0;
/* black, less aggressive: readable but the photo still shows through */
background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.72) 100%);
}
.solarcta-inner {
position: relative; z-index: 1;
text-align: center;
padding-block: clamp(96px, 13vw, 184px);
max-width: 940px;
margin-inline: auto;
}
.solarcta-title {
margin: 0 auto; color: #fff; font-weight: 800;
font-size: clamp(28px, 3.8vw, 52px); line-height: 1.22;
letter-spacing: -0.018em; text-align: center; text-wrap: balance;
text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.solarcta-title br { display: block; }
.solarcta-text {
margin: 20px auto 0; color: rgba(255,255,255,.94);
font-size: clamp(16px, 1.5vw, 19px); line-height: 1.74; max-width: 62ch;
text-shadow: 0 1px 10px rgba(0,0,0,.30);
}
.solarcta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; justify-content: center; }
.solarcta-cta { background: #FFB12E !important; color: #5a3b00 !important; border: 1px solid #FFB12E !important; }
.solarcta-cta:hover { background: #FFC368 !important; border-color: #FFC368 !important; }
@media (prefers-reduced-motion: reduce) {
.solarcta-frame { animation: none; }
.solarcta-frame--1 { opacity: 1; transform: scale(1.04); }
.solarcta-frame--2, .solarcta-frame--3 { opacity: 0; }
}
@media (max-width: 820px) {
.solarcta-inner { padding-block: clamp(74px, 16vw, 116px); }
.solarcta-title { font-size: clamp(22px, 5.6vw, 32px); white-space: normal; text-wrap: balance; }
.solarcta-scrim { background: linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.72) 100%); }
}
.reviews-head { margin-bottom: 14px; }
.reviews-rating {
display: inline-flex; align-items: center; gap: 10px;
margin-top: 14px;
flex-wrap: wrap; justify-content: center;
}
.reviews-rating .rr-stars { display: inline-flex; gap: 3px; }
.reviews-rating .rr-stars svg { filter: drop-shadow(0 1px 2px rgba(20,80,86,.18)); }
.reviews-rating .rr-text { color: #2B6168; font-size: 15px; font-weight: 600; }
.reviews-rating .rr-text strong { color: #0A7C86; font-weight: 800; font-size: 17px; }
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 22px;
margin-top: 38px;
}
/* Authentic Google-review card (light mode), modeled on a real GMB review:
avatar initial + name/topic + Google "G" header, gold stars, clamped text
with a working "קרא עוד" toggle. */
.review-card {
display: flex; flex-direction: column;
background: #FFFFFF;
border: 1px solid #E4E7EB;
border-radius: 14px;
padding: 22px 22px 18px;
box-shadow: 0 1px 2px rgba(60,64,67,0.10), 0 1px 3px rgba(60,64,67,0.07);
transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.review-card:hover {
transform: translateY(-3px);
border-color: #D2D6DB;
box-shadow: 0 6px 16px -8px rgba(60,64,67,0.28);
}
.review-card .rc-head {
display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.review-card .rc-avatar {
flex: 0 0 auto;
width: 42px; height: 42px; border-radius: 50%;
background: var(--rc-c, #1A73E8); color: #fff;
display: grid; place-items: center;
font-family: var(--font-sans, inherit);
font-weight: 700; font-size: 19px; line-height: 1;
}
.review-card .rc-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.review-card .rc-name { color: #202124; font-weight: 700; font-size: 15px; line-height: 1.3; }
.review-card .rc-sub {
color: #5F6368; font-size: 12.5px; font-weight: 500; line-height: 1.35;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.review-card .rc-glogo { flex: 0 0 auto; width: 20px; height: 20px; margin-inline-start: auto; }
.review-card .rc-stars { display: flex; gap: 2px; margin-bottom: 10px; }
.review-card .rc-stars svg { display: block; }
.review-card .rc-text {
margin: 0; padding: 0; border: 0;
color: #3C4043; font-size: 14.5px; line-height: 1.72; font-weight: 400;
flex: 1 1 auto;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
}
.review-card.is-expanded .rc-text { -webkit-line-clamp: unset; overflow: visible; }
.review-card .rc-more {
align-self: flex-start;
margin-top: 8px; padding: 2px 0;
background: none; border: 0; cursor: pointer;
color: #1A73E8; font-size: 14px; font-weight: 600; font-family: inherit;
}
.review-card .rc-more:hover { text-decoration: underline; }
.review-card .rc-more[hidden] { display: none; }
.reviews-source {
text-align: center; margin-top: 30px;
color: #6E8B8E; font-size: 13.5px; font-weight: 600;
}
@media (max-width: 600px) {
.review-card { padding: 20px 18px 16px; }
}
/* ============================================================
EYEBROW PILL FIX (homepage only)
The base style.css `.eyebrow` paints a pill (background +
padding + border-radius). The makor port (home-base.css) only
re-declares color/font, so the pill leaks through on every
homepage eyebrow; combined with the forced white `.on-navy`
text it made the trust-band eyebrow read as an empty pill.
Makor eyebrows are a clean leading-line + text, no pill.
Scoped to `.home` so inner pages keep their base style.
============================================================ */
.home .eyebrow {
background: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
/* ============================================================
PASS 3.2 — makor-faithful corrections (Nir punch-list 2026-06-14)
============================================================ */
/* Button system: recolor mapped BOTH gold and navy to teal, so base
.btn-primary rendered teal-on-teal. Light-bg primary = teal + WHITE
text. Dark-bg primaries (hero, quoteband-cta) handled per-section = white pill. */
.btn-primary {
background: #0A7C86 !important;
color: #ffffff !important;
border-color: transparent !important;
}
.btn-primary:hover { background: #075E66 !important; }
.btn-primary svg { color: #ffffff !important; }
/* Hero h1: keep "לכל" on the same line as the underlined "דיירי הבניין";
sun accent word with a visible sun underline on the dark photo. */
.hero h1 .underline { display: inline-block; margin: 0; }
.hero h1 .accent { color: #FFB12E !important; }
.hero h1 .underline::after {
background: rgba(255, 177, 46, 0.55);
height: 9px; bottom: 2px; border-radius: 4px; inset-inline: 2%;
}
/* Header phone had ZERO css -> looked broken. Clean tel link. */
.navbar .topnav-phone {
display: inline-flex; align-items: center; gap: 7px;
color: var(--ink-900); font-weight: 700; font-size: 15px;
white-space: nowrap; text-decoration: none; padding: 8px 4px;
}
.navbar .topnav-phone:hover { color: #0A7C86; }
.navbar .topnav-phone svg { color: #0CA3AF; flex: none; }
.navbar .topnav-phone span { direction: ltr; unicode-bidi: plaintext; }
/* "מה שמייחד אותנו" feature images: drop the teal fog (the gold icon it
darkened is display:none anyway) -> clean, crisp photos. */
.tile-media::after { display: none !important; }
/* WhyUs band: was makor navy (#1B4E86/#0C376E) -> Makor teal gradient. */
.home #why.benefit-band {
background:
radial-gradient(125% 100% at 90% -10%, rgba(63,191,201,0.30) 0%, rgba(63,191,201,0) 46%),
linear-gradient(165deg, #0A7C86 0%, #086A72 50%, #075E66 100%) !important;
}
/* Eyebrow sat far from its heading (eyebrow margin + section-title margin
+ flex gap stacked ~38px). Zero the margins, keep a tight uniform gap. */
.home .section-head .eyebrow,
.home .kb-head-text .eyebrow { margin: 0 !important; }
.home .section-head .section-title,
.home .kb-head-text .section-title { margin-top: 0 !important; margin-bottom: 0 !important; }
.home .section-head { gap: 12px; }
.home .kb-head-text { gap: 12px; }
/* Knowledge lede drifted left -> force RTL right alignment. */
.home #knowledge .kb-head-text { text-align: right; }
.home #knowledge .kb-head-text .section-lede { margin-inline: 0 !important; max-width: 640px; }
/* ---- Footer: makor's navy footer washed out on Makor's lighter teal.
Deepen the teal + force brand/headings/muted text to readable light. ---- */
.footer.sitefoot { background: #064A50; color: #CFE4E5; }
.sitefoot .logo__name { color: #FFFFFF !important; }
.sitefoot .logo__tag { color: #9FD0D3 !important; }
.sitefoot .logo__mark { filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.sitefoot .foot-col h4 { color: #FFC368 !important; }
.sitefoot .foot-col a,
.sitefoot .footci-item { color: #DCEAEA !important; }
.sitefoot .foot-col a:hover,
.sitefoot .footci-item:hover:not(.footci-static) { color: #FFC368 !important; }
.sitefoot .foot-tagline { color: #C6DEDF !important; }
.sitefoot .foot-note { color: #FFC368 !important; }
.sitefoot .foot-contact .footci-hours li { color: #A9C6C7 !important; }
.sitefoot .foot-contact .footci-hours .footci-ic,
.sitefoot .footci-ic { color: #7FB9BC !important; }
.sitefoot .foot-bar { color: #93B9BB !important; }
.sitefoot .foot-bar a { color: #C6DEDF !important; }
.sitefoot .foot-bar a:hover { color: #fff !important; }
/* ============================================================
ABOUT PAGE ("מי אנחנו") — story layout, original classes.
Modeled on the Cosmetics Express About structure, teal+sun.
============================================================ */
.mab-hero {
background:
radial-gradient(120% 90% at 88% -10%, rgba(63,191,201,0.16) 0%, rgba(63,191,201,0) 52%),
#F4FAFA;
padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 7vw, 96px);
}
.mab-hero__inner {
display: grid;
grid-template-columns: 1.04fr 0.96fr;
align-items: center;
gap: clamp(32px, 5vw, 64px);
}
.mab-hero__text .eyebrow { margin-bottom: 14px; }
.mab-hero__text h1 { margin: 0 0 18px; }
.mab-hero__lead {
color: #38565A; font-size: 17px; line-height: 1.85; max-width: 56ch; margin: 0 0 26px;
}
.mab-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.mab-hero__trust {
display: flex; flex-wrap: wrap; gap: 14px 30px; list-style: none; margin: 0; padding: 22px 0 0;
border-top: 1px solid rgba(12,163,175,0.16);
}
.mab-hero__trust li { display: flex; flex-direction: column; gap: 2px; }
.mab-hero__trust strong { color: #0A7C86; font-size: 19px; font-weight: 800; line-height: 1.1; }
.mab-hero__trust span { color: #6E8B8E; font-size: 13px; font-weight: 600; }
.mab-hero__media { position: relative; }
.mab-hero__accent {
position: absolute; inset: auto -14px -16px auto; width: 64%; height: 78%;
border-radius: 26px; background: linear-gradient(150deg, rgba(12,163,175,0.18), rgba(255,177,46,0.16));
z-index: 0;
}
.mab-hero__frame {
position: relative; z-index: 1;
aspect-ratio: 4 / 3.2; border-radius: 22px;
background-size: cover; background-position: center;
box-shadow: 0 30px 60px -28px rgba(7,94,102,0.45);
}
.mab-hero__badge {
position: absolute; z-index: 2; inset-block-end: -18px; inset-inline-start: -18px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
width: 104px; height: 104px; border-radius: 20px; text-align: center;
background: linear-gradient(150deg, #0CA3AF, #075E66); color: #fff;
box-shadow: 0 18px 34px -16px rgba(7,94,102,0.6);
}
.mab-hero__badge strong { font-size: 28px; font-weight: 800; line-height: 1; }
.mab-hero__badge span { font-size: 12px; font-weight: 600; margin-top: 4px; opacity: .92; }
/* STORY rows */
.mab-story .container { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }
.mab-row {
display: grid; grid-template-columns: 0.92fr 1.08fr;
align-items: center; gap: clamp(28px, 4.5vw, 56px);
}
.mab-row--rev .mab-row__media { order: 2; }
.mab-row__media {
aspect-ratio: 4 / 3; border-radius: 20px; background-size: cover; background-position: center;
box-shadow: 0 22px 46px -26px rgba(7,94,102,0.42);
}
.mab-row__text .eyebrow { margin-bottom: 12px; }
.mab-row__text h2 { margin: 0 0 16px; }
.mab-row__text p { color: #38565A; font-size: 16.5px; line-height: 1.82; margin: 0 0 14px; max-width: 60ch; }
.mab-row__text p:last-child { margin-bottom: 0; }
/* VALUES — three-word promise */
.mab-values { background: #F4FAFA; }
.mab-values__head { text-align: center; margin-bottom: 40px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.mab-values__head .eyebrow { margin: 0; }
.mab-values__head h2 { margin: 0; }
.mab-vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.mab-vcard {
background: #fff; border: 1px solid rgba(12,163,175,0.14); border-radius: 18px;
padding: 34px 28px; text-align: center;
box-shadow: 0 16px 34px -24px rgba(7,94,102,0.40);
transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.mab-vcard:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -24px rgba(7,94,102,0.5); }
.mab-vcard__ic {
display: inline-flex; align-items: center; justify-content: center;
width: 62px; height: 62px; border-radius: 50%; margin-bottom: 18px;
background: linear-gradient(150deg, rgba(12,163,175,0.16), rgba(255,177,46,0.18)); color: #0A7C86;
}
.mab-vcard h3 { margin: 0 0 10px; font-size: 20px; }
.mab-vcard p { margin: 0; color: #4A6468; font-size: 15.5px; line-height: 1.7; }
/* CREDENTIALS band — real facts only */
.mab-creds {
background:
radial-gradient(120% 100% at 88% -10%, rgba(63,191,201,0.28) 0%, rgba(63,191,201,0) 48%),
linear-gradient(160deg, #0A7C86 0%, #086A72 52%, #075E66 100%);
padding: clamp(40px, 5vw, 60px) 0;
}
.mab-creds__stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
list-style: none; margin: 0 0 26px; padding: 0; text-align: center;
}
.mab-creds__stats li { display: flex; flex-direction: column; gap: 5px; padding: 4px 8px; }
.mab-creds__stats strong { color: #FFFFFF; font-size: clamp(22px, 3vw, 30px); font-weight: 800; line-height: 1.05; }
.mab-creds__stats span { color: #BFE0E2; font-size: 14px; font-weight: 600; }
.mab-creds__mfr {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.16); text-align: center;
}
.mab-creds__mfr-label { color: #BFE0E2; font-size: 14px; font-weight: 600; }
.mab-creds__mfr-list { color: #FFE7BF; font-size: clamp(16px, 2.2vw, 20px); font-weight: 700; letter-spacing: .01em; }
@media (max-width: 860px) {
.mab-hero__inner { grid-template-columns: 1fr; gap: 40px; }
.mab-hero__media { max-width: 460px; margin-inline: auto; width: 100%; }
.mab-row { grid-template-columns: 1fr; gap: 22px; }
.mab-row--rev .mab-row__media { order: 0; }
.mab-row__media { max-width: 560px; }
.mab-creds__stats { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
}
@media (max-width: 480px) {
.mab-hero__badge { width: 88px; height: 88px; inset-inline-start: -8px; }
.mab-hero__badge strong { font-size: 23px; }
.mab-vcard { padding: 28px 22px; }
}
/* ============================================================
PASS 4 — Nir punch-list 2026-06-22
============================================================ */
/* (a) Eyebrow->title gap was oversized in the intro (מי אנחנו) and the
audience band (למי זה מתאים). Those heads use .intro-text / .forwho__head,
NOT .section-head, so the earlier tight-rhythm fix never reached them. */
.home .intro-text .eyebrow,
.home .forwho__head .eyebrow { margin: 0 !important; }
.home .intro-text .section-title { margin: 7px 0 0 !important; }
.home .forwho__head .section-title { margin-top: 7px !important; }
/* (b) Intro title "חימום מים סולארי הוא מקצוע, לא תיקון חד פעמי" wrapped to
3 lines (squished) — give the title column more width and trim the font
ceiling so the hard
lands it on exactly 2 lines on desktop. */
@media (min-width: 992px) {
.intro-inner.intro-duo { grid-template-columns: 1.08fr 0.92fr; }
.intro-duo .intro-text { max-width: 700px; }
.intro-duo .section-title { font-size: clamp(34px, 3.6vw, 46px); text-wrap: balance; }
}
/* ===== PASS 5 — reviews carousel (GMB) + "talk to experts" CTA icon (2026-06-22) ===== */
.btn-talk{display:inline-flex;align-items:center;gap:.55em;}
.btn-talk .fa-arrow-left{font-size:.82em;line-height:1;transition:transform .25s cubic-bezier(.16,1,.3,1);}
.btn-talk:hover .fa-arrow-left{transform:translateX(-4px);}
/* reviews head — clean centered, fixes the old broken eyebrow */
.reviews-head{text-align:center;max-width:760px;margin:0 auto 22px;}
.reviews-kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#5F6368;background:#fff;border:1px solid #E4E7EB;border-radius:999px;padding:7px 16px;box-shadow:0 2px 8px rgba(8,40,50,.06);margin-bottom:14px;}
.reviews-kicker .rk-g{width:16px;height:16px;flex:0 0 auto;}
.reviews-head .section-title{margin:0 0 14px;}
.reviews-rating{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;}
.reviews-rating .rr-stars{display:inline-flex;gap:2px;line-height:0;}
.reviews-rating .rr-text{font-size:15px;color:#3c4043;}
.reviews-rating .rr-text strong{color:#0A7C86;font-weight:800;font-size:18px;}
/* Reviews intro paragraph (replaces the rating badge) */
.reviews-lede{max-width:640px;margin:12px auto 0;color:#4A6468;font-size:16.5px;line-height:1.75;text-wrap:pretty;}
/* Google-style rating badge (homepage + about + service pages) */
.grate{display:inline-flex;align-items:center;gap:14px;margin:18px auto 0;padding:11px 22px 11px 16px;background:#fff;border:1px solid rgba(12,163,175,.22);border-radius:16px;box-shadow:0 16px 36px -24px rgba(7,94,102,.5);}
.grate__g{width:30px;height:30px;flex:0 0 auto;line-height:0;}
.grate__g svg{width:100%;height:100%;display:block;}
.grate__score{font-family:var(--font-serif,Georgia,serif);font-weight:800;font-size:32px;line-height:1;color:#3F4D4F;letter-spacing:-.01em;}
.grate__meta{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
.grate__stars{display:inline-flex;gap:2px;line-height:0;}
.grate__stars svg{filter:drop-shadow(0 1px 2px rgba(20,80,86,.18));}
.grate__sub{font-size:13px;font-weight:600;color:#5F6368;letter-spacing:.1px;}
@media (max-width:480px){.grate{gap:11px;padding:10px 16px;}.grate__score{font-size:27px;}.grate__g{width:26px;height:26px;}}
/* carousel — arrows are flex SIBLINGS flanking the track, so they sit OUTSIDE
the cards (no overlap). One-at-a-time advance handled in JS. */
.mrev{display:flex;align-items:center;gap:14px;margin-top:8px;}
.mrev-track{flex:1 1 auto;min-width:0;display:flex;align-items:stretch;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 8px;-ms-overflow-style:none;scrollbar-width:none;}
.mrev-track::-webkit-scrollbar{display:none;}
.mrev .review-card{flex:0 0 86%;max-width:86%;scroll-snap-align:center;margin:0;height:auto;}
@media(min-width:640px){.mrev .review-card{flex-basis:calc((100% - 16px)/2);max-width:none;}}
@media(min-width:980px){.mrev .review-card{flex-basis:calc((100% - 32px)/3);scroll-snap-align:start;}}
/* round flank arrows — static flex items, outside the track */
.mrev-arrow{flex:0 0 auto;width:48px;height:48px;border-radius:999px;background:#fff;border:1px solid #E2E8F0;box-shadow:0 6px 18px rgba(8,40,50,.14);color:#0A7C86;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease,color .2s ease;}
.mrev-arrow:hover{transform:scale(1.08);box-shadow:0 10px 26px rgba(8,40,50,.2);color:#075E66;}
.mrev-arrow:active{transform:scale(.96);}
.mrev-arrow:disabled{opacity:.32;cursor:default;box-shadow:none;}
@media(max-width:560px){.mrev{gap:8px;}.mrev-arrow{width:40px;height:40px;font-size:15px;}}
.reviews-source{text-align:center;margin-top:18px;font-size:13px;color:#80868b;}
/* ============================================================
ABOUT PAGE ("מי אנחנו") — split hero (abh), then ONE light
section (abs): split intro + divider + three-word promise +
white icon cards. Services + reviews reuse the homepage
scarousel + mrev widgets (heads re-centered via abi-svc/abi-rev,
since the homepage centering rules are scoped to .home).
Black overlays only — never blue.
============================================================ */
/* Hero — full-bleed photo, dark scrim heavier on the right, text on the right, optically centered below the overlapping header */
.abh { position: relative; isolation: isolate; overflow: hidden; background: #0d0d0d; color: #fff; display: flex; align-items: center; min-height: clamp(560px, 80vh, 780px); padding: calc(var(--header-height, 90px) + 4.2rem) 0 4.2rem; }
.abh::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--abh-bg); background-size: cover; background-position: center 40%; transform: scale(1.04); }
.abh__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.46) 0%, rgba(0,0,0,.56) 52%, rgba(0,0,0,.66) 100%); }
.abh__inner { width: 100%; }
.abh__text { max-width: 820px; margin-inline: auto; text-align: center; }
.abh__kicker { display: inline-block; color: #FFD089; font-family: var(--font-sans); font-weight: 700; letter-spacing: .06em; font-size: clamp(13px, 1.2vw, 15px); margin-bottom: 16px; }
.abh__title { margin: 0; color: #fff; font-weight: 800; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.14; letter-spacing: -0.018em; text-wrap: balance; text-shadow: 0 2px 20px rgba(0,0,0,.40); }
.abh__lead { margin: 20px auto 0; max-width: 60ch; color: rgba(255,255,255,.93); font-size: clamp(16px, 1.6vw, 20px); line-height: 1.74; text-shadow: 0 1px 10px rgba(0,0,0,.34); }
.abh__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }
/* Story + Promise — one continuous WHITE section */
.abs { background: #fff; }
.abs__split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.4vw, 64px); align-items: stretch; }
.abs__text .section-title { margin-top: 8px; }
.abs__text p { color: #46595b; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.85; margin: 16px 0 0; }
/* photo column matches the text column height so both bottoms align -> divider sits evenly */
.abs__photo { border-radius: 20px; height: 100%; min-height: 320px; background-size: cover; background-position: center; box-shadow: 0 26px 56px -26px rgba(6,42,46,.50); }
/* Clean the leaked base-style eyebrow pill on this page (the strip is .home-scoped) */
.abs .eyebrow, .abw .eyebrow { background: none !important; padding: 0 !important; border-radius: 0 !important; }
.abs .eyebrow { color: #C28E2B !important; }
.abs .eyebrow::before { background: #C28E2B !important; opacity: 1 !important; }
.abw .eyebrow { color: #FFD089 !important; }
.abw .eyebrow::before { background: #FFD089 !important; opacity: 1 !important; }
/* Divider — short centered gold line fading at both ends + a small dot (CE style); EVEN rhythm above/below */
.abs__split { margin-bottom: 0; }
/* margin-top > margin-bottom compensates for the heading's line-leading so the VISUAL gap above and below the divider matches */
.abs__divider { position: relative; height: 2px; width: clamp(240px, 40%, 440px); margin: clamp(44px, 4.8vw, 60px) auto clamp(26px, 3vw, 40px); border-radius: 2px; background: linear-gradient(90deg, transparent 0%, rgba(212,168,87,.95) 26%, rgba(212,168,87,.95) 74%, transparent 100%); }
.abs__divider::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 9px; height: 9px; border-radius: 50%; background: #D4A857; box-shadow: 0 0 0 5px #fff; }
.abs__promise-head { text-align: center; max-width: none; margin: 0 auto clamp(38px, 4.2vw, 56px); }
.abs__promise-head .section-title { margin-top: 0; white-space: nowrap; }
.abs__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 26px); }
.abs__card { text-align: center; border-radius: 18px; background: #fff; border: 1px solid #e4edee; box-shadow: 0 16px 38px -24px rgba(6,42,46,.40); overflow: hidden; }
.abs__card-img { aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.abs__card-body { padding: clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px) clamp(24px, 2.6vw, 32px); }
.abs__card h3 { margin: 0 0 10px; color: #3F4D4F; font-weight: 800; font-size: clamp(20px, 2vw, 24px); }
.abs__card p { margin: 0; color: #526466; font-size: 15px; line-height: 1.72; }
/* Re-center the reused service head; tighten the gap into the reviews section */
.abi-svc .section-head { text-align: center; max-width: 780px; margin-inline: auto; }
.abi-svc { padding-bottom: clamp(28px, 3.6vw, 52px); }
.abi-rev { padding-top: clamp(18px, 2.4vw, 34px); }
.abi-rev .reviews-head { text-align: center; }
.abi-rev .reviews-rating { justify-content: center; }
/* "שש סיבות" — six advantages over a parallax photo + strong BLACK overlay (CE "למה אקספרס" style) */
.abw { position: relative; isolation: isolate; overflow: hidden; background: #0c2b2e; color: #fff; }
.abw::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--abw-bg); background-size: cover; background-position: center; background-attachment: fixed; }
.abw__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.72) 50%, rgba(0,0,0,.82) 100%); }
.abw__inner { padding-block: clamp(64px, 8vw, 112px); }
.abw__head { text-align: center; max-width: 760px; margin: 0 auto clamp(36px, 4.6vw, 58px); }
/* .section-lede has max-width:60ch + margin:0 -> in RTL it pins right; center it within the head */
.abw__head .section-lede { margin: 14px auto 0; }
.abw__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 28px); }
.abw__card { display: flex; gap: 16px; align-items: flex-start; padding: clamp(22px, 2.4vw, 30px); border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.abw__num { flex: 0 0 auto; min-width: 1.3em; font-family: var(--font-heading); font-weight: 800; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; color: #FFB12E; }
.abw__c-body h3 { margin: 0 0 8px; color: #fff; font-weight: 800; font-size: clamp(18px, 1.8vw, 21px); }
.abw__c-body p { margin: 0; color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.7; }
@media (max-width: 880px) { .abw__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .abw__grid { grid-template-columns: 1fr; } .abw::before { background-attachment: scroll; } }
@media (max-width: 860px) {
.abs__split { grid-template-columns: 1fr; gap: 28px; }
.abs__media { order: -1; }
.abs__photo { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
.abs__cards { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
.abs__promise-head .section-title { white-space: normal; }
}
@media (max-width: 600px) {
.abh { min-height: 520px; }
.abh__text { max-width: none; }
.abh__scrim { background: linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.60) 55%, rgba(0,0,0,.72) 100%); }
}
@media (prefers-reduced-motion: reduce) {
.abh::before { transform: none; }
}
/* Timed lead dialog */
.lead-pop {
position: fixed;
inset: 0;
z-index: 10050;
display: grid;
place-items: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: opacity .22s ease, visibility .22s ease;
}
.lead-pop[hidden] { display: none; }
.lead-pop.is-open { opacity: 1; visibility: visible; }
.lead-pop__backdrop { position: absolute; inset: 0; background: rgba(18, 48, 51, .58); backdrop-filter: blur(4px); }
.lead-pop__panel {
position: relative;
width: min(100%, 480px);
padding: clamp(28px, 5vw, 44px);
border-radius: 8px;
background: #fff;
box-shadow: 0 28px 80px rgba(18, 48, 51, .28);
color: #455f63;
text-align: center;
}
.lead-pop__close {
position: absolute;
inset-block-start: 14px;
inset-inline-end: 14px;
display: grid;
width: 40px;
height: 40px;
place-items: center;
border: 0;
border-radius: 50%;
background: #edf6f6;
color: #244448;
cursor: pointer;
}
.lead-pop__close:hover { background: #dceced; }
.lead-pop__eyebrow { display: block; margin-bottom: 10px; color: #08727b; font-size: 14px; font-weight: 800; }
.lead-pop h2 { margin: 0 0 12px; color: #263b3e; font-family: var(--font-serif); font-size: clamp(28px, 5vw, 38px); line-height: 1.18; }
.lead-pop__panel > p { max-width: 38ch; margin: 0 auto 24px; line-height: 1.7; }
.lead-pop__form [data-form-fields] { display: grid; gap: 12px; }
.lead-pop__form input,
.lead-pop__form textarea {
width: 100%;
min-height: 52px;
padding: 0 16px;
border: 1px solid #bfd7d9;
border-radius: 6px;
background: #fff;
color: #263b3e;
font: inherit;
direction: rtl;
text-align: right;
}
.lead-pop__form textarea {
min-height: 96px;
padding: 14px 16px;
resize: vertical;
line-height: 1.45;
}
.lead-pop__form input[type="tel"] {
direction: ltr;
text-align: right;
unicode-bidi: plaintext;
}
.lead-pop__form input:focus,
.lead-pop__form textarea:focus { outline: 3px solid rgba(10, 124, 134, .14); border-color: #0a7c86; }
.lead-pop__form .field.error input,
.lead-pop__form .field.error textarea { border-color: #b33b3b; }
.lead-pop__form .btn { width: 100%; justify-content: center; min-height: 52px; }
.lead-pop__honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.lead-pop .form-success { padding: 16px 0 4px; }
.lead-pop .form-success-icon { display: grid; width: 48px; height: 48px; place-items: center; margin: 0 auto 14px; border-radius: 50%; background: #e7f6ef; color: #18865a; }
.lead-pop .form-success h3 { margin: 0 0 8px; color: #263b3e; font-size: 25px; }
.lead-pop .form-success p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .lead-pop { transition: none; } }
/* ============================================================
SERVICES: 3 image category cards (replaces the homepage crossfade
carousel; the About page keeps its own .scarousel* widget, untouched).
NOTE: assets/css/custom.css ships an older "services-grid / .svccat"
component (no template references it today, so it is otherwise dead),
whose class names happen to collide with the ones used here, and which
loads BEFORE this file. The rules below neutralize its declarations
in place (border, media height/background, body flex-grow) and bump
selector specificity for .svccat__title/.svccat__desc so they are
not re-colored by its ".svccat__body h3 / p" rules, rather than
relying on cascade order alone.
============================================================ */
.svccats {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 900px) {
.svccats { grid-template-columns: repeat(3, 1fr); }
/* 3 equal cards in one balanced row (RTL: buildings first). The lead card keeps
its sun ring (defined below) for priority instead of spanning columns. */
}
.svccat {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
margin: 0;
min-height: 500px;
border: 0; /* neutralize custom.css .svccat's 1px border */
border-radius: var(--radius-lg);
--svc-ring: 0 0 0 0 transparent; /* .svccat--lead redefines this to a sun ring */
box-shadow: var(--svc-ring), var(--shadow-md);
background-color: var(--color-ink-soft); /* fallback if --img fails to load */
transition: transform var(--transition), box-shadow var(--transition);
}
/* Photo band: the TOP HALF of the card only.
Why not a full-card background: with `cover` on the whole card the painting box is tall and
narrow (roughly 380x800), while the source photos are landscape (~3:2). `cover` then scales to
the card's HEIGHT and crops the width down to about a third of the image, which is what made
the subject of every photo unrecognisable. Confining the photo to a ~380x330 band brings the
box aspect close to the source, so barely any width is cropped and the subject survives.
The bottom half is covered by the scrim anyway, so nothing is lost.
min-height guarantees the band always reaches past the scrim's solid edge (272px below), so a
short card can never show a strip of bare background between the photo and the text. */
.svccat::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
z-index: 0;
height: 50%;
min-height: 300px;
background-image: var(--img);
background-size: cover;
background-position: center;
pointer-events: none;
}
/* Scrim: transparent over the photo band at the top, opaque from there down behind the text.
The stops are in PIXELS, not percentages, so the solid edge lands at the same place on every
card no matter how tall the card grows - which is what keeps the tag pill and the icon row
aligned across the row (see .svccat__body). #143438 = --color-ink-soft. */
.svccat::after {
content: "";
position: absolute;
inset: 0;
z-index: 0; /* same layer as ::before but painted after it, so it sits over the photo;
both stay below .svccat__link (z-index 1) and .svccat__body (z-index 2) */
background-image: linear-gradient(to bottom,
rgba(20, 52, 56, 0) 0,
rgba(20, 52, 56, 0.06) 138px,
rgba(20, 52, 56, 0.34) 188px,
rgba(20, 52, 56, 0.72) 222px,
rgba(20, 52, 56, 0.94) 248px,
var(--color-ink-soft) 272px,
var(--color-ink-soft) 100%);
pointer-events: none;
}
.svccat:hover,
.svccat:focus-within {
transform: translateY(-6px);
box-shadow: var(--svc-ring), var(--shadow-lg);
}
.svccat--lead {
--svc-ring: 0 0 0 0 transparent; /* no permanent ring; buildings priority via RTL-first order */
}
/* Icon chip + title.
RTL / COLLISION FIX (client correction pass 2026-07-23): the chip used to be absolutely
positioned in the card's top corner with inset-inline-END, which in a dir="rtl" document
resolves to the LEFT edge - the card's leading visual sat opposite the Hebrew text, which
starts on the right. Absolute placement also overlapped the tag pill as soon as the text
stack grew. It is now the first item of an in-flow flex row, so in RTL it leads on the
RIGHT, ahead of the heading, and can never collide with the tag above it. */
.svccat__head {
display: flex;
align-items: center;
gap: var(--space-sm);
/* Reserve two title lines so a card whose title wraps does not push its "who" box below the
others'. 40px chip + 2 lines of clamp(1.2rem,1.6vw,1.5rem) at line-height 1.3. */
min-height: 62px;
margin-bottom: var(--space-sm);
}
/* Teal, not sun: the yellow chip read as a foreign element on this section, and a 48px circle
around a 26px glyph left the icon floating in too much empty background. Now a 40px rounded
square with a 24px glyph (same silhouette as .svc-subcard__num on the service pages). */
.svccat__icon {
flex: none;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 13px;
background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
color: var(--color-white);
box-shadow: 0 8px 18px -10px rgba(12, 163, 175, 0.9);
}
/* Body: white text stack under a FIXED photo window.
ALIGNMENT FIX (2026-07-23): the body used to be bottom-anchored (margin-block-start:auto), so
its top edge floated to wherever that card's own text happened to start. With three cards of
different text lengths the tag pills and icon rows landed at three different heights. A fixed
top offset instead of the auto anchor pins every card's tag + icon row to the same line; the
CTA is pushed back down to the bottom edge with its own auto margin, so the cards stay balanced
at both ends. (Nothing here is RTL-specific - it was a plain block-axis layout issue.) */
.svccat__body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
flex: 1; /* fill the rest of the card so the CTA's auto margin has room to work */
margin-block-start: 256px; /* photo window; the scrim above is ~96% opaque by here, so the tag
pill still reads while the photo stays clearly visible above it */
padding-block: var(--space-md) var(--space-lg);
padding-inline: var(--space-lg);
pointer-events: none; /* let clicks fall through to .svccat__link below */
}
.svccat__tag {
display: inline-block;
align-self: flex-start;
margin-bottom: var(--space-sm);
padding: 0.3em 0.9em;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.3);
color: var(--color-white);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
}
/* Compound selectors: guarantee these win over custom.css's higher-specificity
".svccat__body h3" / ".svccat__body p" (which would otherwise recolor
the title/description dark and break legibility over the photo). */
.svccat__body .svccat__title {
margin: 0; /* the .svccat__head row owns the spacing now */
font-family: var(--font-heading);
font-size: clamp(1.2rem, 1.6vw, 1.5rem);
font-weight: 700;
color: var(--color-white);
}
/* flex:1 - the description absorbs the slack in the card, so the "who" box, the feature list and
the CTA below it bottom-align and therefore sit on the SAME line across all three cards. Doing
it this way (rather than reserving a fixed number of description lines) survives the client
editing the copy from WP admin and survives every viewport width. */
.svccat__body .svccat__desc {
flex: 1;
margin: 0 0 var(--space-md);
color: rgba(255, 255, 255, 0.86);
font-size: 0.95rem;
line-height: 1.65;
}
/* Who the category is for. The label is a per-card heading on its own line - as an inline pill it
crowded the sentence next to it and wrapped badly once it grew to 4-5 words. The accent bar sits
on the inline START, i.e. the RIGHT edge in Hebrew. */
.svccat__who {
display: block;
margin: 0 0 var(--space-md);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-md);
border-inline-start: 3px solid var(--color-primary-light);
background: rgba(63, 191, 201, 0.13);
}
.svccat__who-lbl {
display: block;
margin-bottom: 3px;
color: var(--color-primary-light);
font-family: var(--font-heading);
font-size: 0.86rem;
font-weight: 700;
line-height: 1.45;
}
.svccat__who-txt {
display: block;
color: rgba(255, 255, 255, 0.86);
font-size: 0.86rem;
line-height: 1.6;
}
.svccat__feats {
display: flex;
flex-direction: column;
gap: var(--space-xs);
/* Guaranteed clearance above the CTA even when the text stack fills the card and the CTA's
auto margin collapses to zero. */
margin: 0 0 var(--space-lg);
padding: 0;
list-style: none;
}
/* align-items:flex-start (not center) so a bullet that wraps to two lines keeps its check mark
on the FIRST line instead of floating between them - matches .svc-subcard__list. */
.svccat__feats li {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
margin: 0;
color: rgba(255, 255, 255, 0.92);
font-size: 0.88rem;
line-height: 1.55;
}
.svccat__feats li svg { flex-shrink: 0; margin-block-start: 3px; color: var(--color-primary-light); }
/* A filled teal button, not bare text: as a transparent label it did not read as the card's
action. align-self keeps it hugging its own content instead of stretching the full width. */
.svccat__cta {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: var(--space-sm);
margin-block-start: auto; /* pin the CTA to the card's bottom edge on every card */
padding: 0.62em 1.25em;
border-radius: var(--radius-pill);
background: var(--color-primary);
color: var(--color-white);
font-weight: 700;
font-size: 0.92rem;
box-shadow: 0 10px 22px -14px rgba(12, 163, 175, 0.95);
transition: background var(--transition), transform var(--transition);
}
.svccat:hover .svccat__cta,
.svccat:focus-within .svccat__cta { background: var(--color-primary-dark); }
.svccat__cta svg { color: currentColor; }
/* Full-cover clickable overlay: the whole card navigates. .svccat__body/
__media paint above it (z-index) but stay pointer-events:none, so clicks
fall through to this link everywhere, including over the text. */
.svccat__link {
position: absolute;
inset: 0;
z-index: 1;
display: block; /* neutralize custom.css .svccat__link's inline-flex */
border-radius: inherit;
}
.svccat__link:focus-visible {
outline: 3px solid var(--color-primary-light);
outline-offset: -3px;
}
/* One photo window at every breakpoint: the scrim stops are absolute pixels, so keeping the body
offset constant is what guarantees the text always starts on the fully opaque part. */
@media (max-width: 480px) {
.svccat { min-height: 520px; }
}
@media (prefers-reduced-motion: reduce) {
.svccat { transition: box-shadow var(--transition); }
.svccat:hover,
.svccat:focus-within { transform: none; }
}
/* ============================================================
Burger drawer sits flush under the navbar.
The base rule pins the drawer at a hard-coded 76px top, which
no longer matches the header (68px on mobile, 116px above it),
so a strip of the page showed through under the bar on phones
and the first links hid behind it on tablets. --nav-h is now
the single source of truth for the header height: the navbar
and the drawer both read it, so they cannot drift apart again.
============================================================ */
:root { --nav-h: 116px; }
@media (max-width: 768px) { :root { --nav-h: 68px; } }
/* ============================================================
Header nav: one line, always, without shortening any label.
The centered menu is absolutely positioned at left:50% with no
width, so its shrink-to-fit width is capped at half the navbar
(~630px at 1280) while the row needs ~700px — the labels broke
onto two lines. max-content lifts that cap; nowrap keeps every
label intact.
============================================================ */
.topnav-links { width: max-content; }
.topnav-links a { white-space: nowrap; }
/* 1025-1320px: the menu is wide relative to the bar, so absolute
centering would run it into the logo or the CTA. In that band it
goes back into normal flex flow (space-between places it in the
middle anyway) and the spacing tightens. Below 1025px the burger
takes over. */
@media (max-width: 1320px) {
.topnav-inner { gap: 12px; }
.topnav-links {
position: static;
transform: none;
gap: 0;
}
.navbar .topnav-links a { font-size: 15px; padding: 10px 9px; }
}
/* ============================================================
Burger turns into an X while the drawer is open. Both glyphs
ship in the button and aria-expanded (set by home.js) picks
the visible one, so the state stays in one place and screen
readers get it too.
============================================================ */
.drawer-btn__ico { display: inline-flex; align-items: center; justify-content: center; }
.drawer-btn__ico--close { display: none; }
.drawer-btn[aria-expanded="true"] .drawer-btn__ico--menu { display: none; }
.drawer-btn[aria-expanded="true"] .drawer-btn__ico--close { display: inline-flex; }
/* ============================================================
Drawer accordion (services / solutions). These rules used to
sit in the 768px mobile block, but the burger already replaces
the nav at 1024px — so between 769 and 1024 the triggers fell
back to bare