form {
display:inline
}
/* =========================================================
Oshi Oshi - Beit Shemesh
Mobile-first slice. Desktop overrides at @media (min-width:1024px).
========================================================= */
/* ---------- Tokens ---------- */
:root {
--c-red:#D0191D;
--c-black:#000;
--c-white:#FFFFFF;
--c-paper:#F5F2EC;
--c-ink:#111;
--c-muted:#555;
--c-dark:#000;
--ff-base:"Assistant",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--page-max:480px;
/* mobile content column width baseline */
--col-max:1256px;
/* desktop content column max (v3 row #1) */
--gutter:20px;
--fs-body:18px;
--fs-lead:20px;
--fs-h2:clamp(28px,5.4vw,56px);
--fs-h1:clamp(28px,6vw,64px);
--fs-callout:clamp(34px,7vw,72px);
--radius-pill:9999px;
--radius-card:18px;
--shadow-cta:0 16px 28px -10px rgba(0,0,0,.35);
--sb:0px;
/* scrollbar width var,set via JS */
}
/* ---------- Reset / base ---------- */
*,*::before,*::after { box-sizing:border-box
}
html,body { margin:0;
padding:0;
width:100%
}
html {
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
background:var(--c-dark);
/* any layout gap shows as dark,not white */
}
body {
direction:rtl;
font-family:var(--ff-base);
font-size:var(--fs-body);
line-height:1.55;
color:var(--c-ink);
background:var(--c-paper);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:clip;
/* stricter than hidden;
prevents bleed */
min-width:100%
}
img,svg { display:block;
max-width:100%;
height:auto
}
h1,h2,h3,p,ul { margin:0
}
ul { padding:0;
list-style:none
}
a { color:inherit;
text-decoration:none
}
button { font:inherit;
cursor:pointer
}
/* ---------- Container ---------- */
.container {
width:100%;
max-width:var(--page-max);
margin-inline:auto;
padding-inline:var(--gutter)
}
/* ---------- Section backgrounds (full-bleed) ---------- */
.section--red    { background:var(--c-red);
color:var(--c-white)
}
.section--paper  { background:var(--c-paper);
color:var(--c-ink)
}
.section--dark   { background:var(--c-dark);
color:var(--c-white)
}
/* Reusable title underline (meta-principle #10) */
.title-underline {
display:block;
width:144px;
height:8px;
margin:14px auto 0;
background-image:url(../../../design/default/css/../files/red-underline-title-decoration.webp);
background-repeat:repeat-x;
background-size:auto 100%
}
/* ===========================================================
S1 · Hero
=========================================================== */
.hero {
position:relative;
background:var(--c-dark);
color:var(--c-white)
}
.hero__brand {
display:flex;
justify-content:center;
align-items:center;
padding:34px 20px 18px;
background:var(--c-dark)
}
.hero__logo {
width:min(100%,356px);
height:auto
}
.hero__photo {
position:relative;
overflow:hidden;
aspect-ratio:1024 / 720
}
.hero__photo > img {
width:100%;
height:100%;
object-fit:cover;
object-position:50% 35%
}
.hero__photo::after {
content:"";
position:absolute;
inset:auto 0 0;
height:40%;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.92) 100%)
}
/* v4 #4:title in its own black caption band below the photo.
v5:caption holds the stamp at the top,lifted via negative margin
to straddle the seam between photo and band. */
.hero__caption {
background:var(--c-dark);
color:var(--c-white);
padding:0 24px 36px;
text-align:center
}
/* v5:clean transparent kosher stamp (307×182 natural,ratio ≈ 1.69:1)
sized at 130 wide on mobile → height ≈ 77. Margin-top -39 centers it
on the photo/caption seam (half on photo,half on band). */
.hero__stamp {
display:block;
width:154px;
height:auto;
margin:-46px auto 18px;
pointer-events:none;
position:relative;
z-index:3
}
.hero__title {
margin:0 auto;
max-width:28ch;
text-align:center;
font-size:var(--fs-h1);
font-weight:700;
line-height:1.15;
letter-spacing:-.01em
}
.hero__title .parens { color:var(--c-red)
}
.hero__lead {
max-width:30ch;
margin:24px auto 0;
font-size:clamp(18px,4.4vw,30px);
line-height:1.5;
color:rgba(255,255,255,.94)
}
.hero__lead strong {
font-weight:700;
color:var(--c-white)
}
/* ===========================================================
S3 · Value-prop
=========================================================== */
.valueprop {
position:relative;
text-align:center
}
.valueprop__title {
font-size:var(--fs-h2);
font-weight:700;
line-height:1.18;
letter-spacing:-.005em
}
.valueprop__title em {
font-style:normal;
position:relative;
display:inline-block
}
.valueprop__title em::after {
content:"";
position:absolute;
inset:auto 0 -8px 0;
height:6px;
background:var(--c-white);
border-radius:3px;
opacity:.8
}
.valueprop__roll {
position:absolute;
inset-inline-start:0;
/* RTL start = physical right */
height:auto;
transform-origin:top right;
filter:drop-shadow(0 14px 22px rgba(0,0,0,.4));
pointer-events:none
}
/* ===========================================================
S2b · Quick-contact - dual CTA (phone same-day + event planner) + platter strip
Mobile baseline:stacked (phone → carousel → event).
Desktop @media:2-col top + full strip below.
=========================================================== */
.quickcontact {
padding:48px 0 40px
}
.quickcontact__grid {
display:grid;
grid-template-columns:1fr;
gap:36px;
align-items:center
}
.quickcontact__block {
text-align:center
}
.quickcontact__title {
margin:0 auto 12px;
font-size:clamp(26px,6vw,36px);
font-weight:700;
color:var(--c-ink);
line-height:1.2;
max-width:18ch
}
.quickcontact__lead {
margin:0 0 8px;
font-size:var(--fs-body);
color:var(--c-ink)
}
.quickcontact__phone {
display:inline-block;
font-size:clamp(30px,7vw,40px);
font-weight:700;
color:var(--c-ink);
letter-spacing:.02em;
line-height:1;
white-space:nowrap
}
.quickcontact__beers {
display:block;
width:180px;
height:auto;
margin:16px auto 0
}
.quickcontact__body {
margin:0 auto 22px;
max-width:32ch;
font-size:var(--fs-body);
line-height:1.55;
color:var(--c-ink)
}
.quickcontact__btn {
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
min-height:56px;
padding:0 30px;
border-radius:var(--radius-pill);
background:var(--c-red);
color:var(--c-white);
font:700 19px/1 var(--ff-base);
box-shadow:var(--shadow-cta)
}
.quickcontact__btn-chevron {
font-size:22px;
line-height:1
}
.quickcontact__platters {
margin-block:8px 0
}
.quickcontact__platters .slider__slide {
flex:0 0 78%
}
/* ===========================================================
S4 · Problem panel - repeating texture bg + bottom-left bird + centered copy
=========================================================== */
.problem {
position:relative;
background-color:var(--c-white);
background-image:url(../../../design/default/css/../files/real-challenge-bg.webp);
background-repeat:repeat;
background-position:center top;
text-align:center;
overflow:visible
}
.problem__bird {
position:absolute;
bottom:0;
inset-inline-end:0;
/* RTL end = physical left */
width:180px;
height:auto;
opacity:.9;
pointer-events:none;
z-index:0
}
.problem .container {
position:relative;
z-index:1
}
.problem__title {
margin:0 auto 24px;
font-size:clamp(34px,8vw,56px);
font-weight:700;
line-height:1.08;
color:var(--c-ink)
}
.problem__body {
display:grid;
text-align:center;
line-height:1.44;
color:var(--c-ink)
}
.problem__body > p:not(.problem__callout) {
max-width:37ch;
margin-inline:auto;
text-align:center
}
.problem__callout {
grid-column:1 / -1;
text-align:center;
font-size:clamp(38px,8vw,72px);
font-weight:700;
color:var(--c-red);
margin:0;
line-height:1
}
.problem__bottom {
position:absolute;
inset-inline:0;
bottom:-28px;
display:block;
width:64px;
height:auto;
margin-inline:auto;
z-index:3;
pointer-events:none
}
/* ===========================================================
S5 · Bridge / dark section with slider + panorama
=========================================================== */
.bridge {
padding:64px 0 72px;
position:relative
}
.bridge__title {
display:grid;
gap:6px;
text-align:center;
font-size:var(--fs-h2);
font-weight:700;
line-height:1.18;
color:var(--c-white);
margin-bottom:40px
}
.bridge__title .bridge__sub {
display:block;
margin-top:16px;
font-size:var(--fs-lead);
font-weight:400;
line-height:1.5;
color:rgba(255,255,255,.85)
}
.bridge__panorama {
width:100%;
margin:34px 0 0;
border-radius:var(--radius-card)
}
.bridge__close {
max-width:42ch;
margin:8px auto 0;
font-size:clamp(24px,5vw,38px);
line-height:1.38;
text-align:center;
color:var(--c-white);
overflow-wrap:break-word
}
.bridge__close strong {
display:block;
margin-bottom:10px;
color:var(--c-red);
font-size:.84em
}
/* ===========================================================
Slider - used in S5,S7,S8
=========================================================== */
.slider {
position:relative;
margin-block:24px
}
.slider__track {
display:flex;
gap:14px;
padding-block:4px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scrollbar-width:none;
-ms-overflow-style:none
}
.slider__track::-webkit-scrollbar { display:none
}
.slider__slide {
flex:0 0 78%;
scroll-snap-align:center;
border-radius:var(--radius-card);
overflow:hidden;
background:#000
}
.slider__slide img {
width:100%;
aspect-ratio:1 / 1;
object-fit:cover
}
.slider__nav {
position:absolute;
top:50%;
transform:translateY(-50%);
width:36px;
height:36px;
border-radius:50%;
border:none;
background:rgba(255,255,255,.92);
color:var(--c-ink);
font-size:24px;
line-height:1;
display:grid;
place-items:center;
box-shadow:0 8px 18px rgba(0,0,0,.35);
z-index:2
}
.slider__nav--prev { inset-inline-start:4px
}
.slider__nav--next { inset-inline-end:4px
}
/* ===========================================================
S6 · Sub-headline band + 4-up feature cards
=========================================================== */
.features {
position:relative;
padding:80px 0 56px;
background-color:var(--c-white);
background-image:url(../../../design/default/css/../files/real-challenge-bg.webp);
background-repeat:repeat;
background-position:center top;
background-size:280px auto
}
.features__band {
direction:rtl;
position:absolute;
top:0;
inset-inline:0;
z-index:3;
overflow-x:hidden;
color:var(--c-white);
text-align:center;
font-weight:700;
font-size:clamp(18px,4vw,28px);
padding:0 12px;
line-height:1.45;
transform:translateY(-50%)
}
.features__band p {
display:inline-flex;
flex-direction:row;
/* explicit so RTL flips it correctly */
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:.35em;
margin:0 auto;
max-width:min(100%,1100px);
padding:18px 30px 22px;
background-image:url(../../../design/default/css/../files/title-pretty-bg-mobile.webp);
background-repeat:no-repeat;
background-position:center;
background-size:contain
}
.features__sep { opacity:.7;
padding-inline:.15em
}
.features__grid {
display:grid;
gap:28px;
padding-top:28px;
position:relative;
z-index:1
}
.feature {
text-align:center
}
.feature__icon {
height:64px;
width:auto;
margin:0 auto 14px;
display:block
}
.feature__title {
font-size:clamp(22px,5vw,32px);
font-weight:700;
color:var(--c-red);
margin-bottom:10px
}
.feature p {
font-size:var(--fs-body);
line-height:1.55;
color:var(--c-ink);
max-width:38ch;
margin:0 auto
}
/* ===========================================================
S7 + S8 · "אושי אושי באירועים / באירגונים" galleries
=========================================================== */
.gallery {
padding:56px 0;
text-align:center
}
#s8 {
padding-bottom:0
}
.gallery__title {
display:inline-flex;
align-items:baseline;
justify-content:center;
gap:.22em;
position:relative;
font-size:var(--fs-h2);
font-weight:700;
color:var(--c-white);
line-height:1.1;
margin-bottom:30px;
white-space:nowrap
}
.gallery__title span {
position:relative;
display:inline-block;
color:var(--c-red);
font-size:1em
}
.gallery__title span::after {
content:"";
position:absolute;
inset-inline:0;
bottom:-14px;
height:8px;
background:url(../../../design/default/css/../files/red-underline-title-decoration.webp) repeat-x center / auto 100%
}
/* ===========================================================
S9 · Form section (red bg)
=========================================================== */
.form {
padding:56px 0 64px;
text-align:center
}
.form__intro {
max-width:44ch;
margin:0 auto 18px;
font-size:clamp(19px,4.1vw,28px);
color:var(--c-white);
line-height:1.6
}
.form__cta {
max-width:24ch;
margin:0 auto 26px;
font-size:clamp(30px,6vw,44px);
font-weight:700;
color:var(--c-white);
line-height:1.2
}
.form__fields {
display:grid;
gap:14px
}
.field {
position:relative;
display:block
}
.field__label {
position:absolute;
width:1px;
height:1px;
margin:-1px;
padding:0;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap;
border:0
}
.field__input {
width:100%;
height:56px;
padding:0 22px;
border:0;
border-radius:var(--radius-pill);
background:var(--c-white);
color:var(--c-ink);
font:700 var(--fs-body)/1 var(--ff-base);
text-align:start;
appearance:none;
-webkit-appearance:none
}
.field__input::placeholder { color:var(--c-ink);
font-weight:700;
opacity:1
}
.field__input[type="date"] { font-weight:700
}
.field__input[type="tel"] {
text-align:right
}
.field__icon {
position:absolute;
top:50%;
transform:translateY(-50%);
inset-inline-end:18px;
/* RTL end = physical left */
width:18px;
height:18px;
color:var(--c-ink);
pointer-events:none
}
.field--select select.field__input,
.field--date  input.field__input {
padding-inline-end:42px;
/* leave room for the icon on the left side */
}
.field--date .flatpickr-input[readonly] {
cursor:pointer
}
.field__input--datepick {
font-size:18px;
font-weight:700
}
.flatpickr-calendar {
font-family:var(--ff-base);
direction:rtl;
border:0;
border-radius:20px;
background:#fffdfb;
color:var(--c-ink);
box-shadow:0 20px 40px rgba(0,0,0,.22)
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
display:none
}
.flatpickr-months,
.flatpickr-weekdays {
direction:rtl
}
.flatpickr-months .flatpickr-month {
background:var(--c-red);
color:var(--c-white);
fill:var(--c-white)
}
.flatpickr-current-month {
padding-top:10px;
font-size:18px
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
color:inherit;
font-weight:700
}
.flatpickr-monthDropdown-months,
.numInput.cur-year,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
font-size:18px
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
padding:10px 12px
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
width:18px;
height:18px;
stroke-width:2.25
}
.flatpickr-months .flatpickr-prev-month svg {
transform:rotate(180deg)
}
.flatpickr-months .flatpickr-next-month svg {
transform:rotate(180deg)
}
.flatpickr-weekday {
color:#5c1a1d;
font-weight:700;
font-size:13px
}
.flatpickr-rContainer,
.dayContainer {
background:#fffdfb
}
.flatpickr-days {
border:1px solid rgba(0,0,0,.08);
border-top:0
}
.flatpickr-day {
color:#2b2b2b;
font-size:15px;
font-weight:500
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
color:rgba(43,43,43,.28)
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
background:var(--c-red);
border-color:var(--c-red);
color:var(--c-white)
}
.flatpickr-day.today {
border-color:rgba(208,25,29,.7)
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
background:rgba(208,25,29,.14);
color:var(--c-red)
}
.form__submit {
margin-top:8px;
height:60px;
border:0;
border-radius:var(--radius-pill);
background:var(--c-black);
color:var(--c-white);
font:700 22px/1 var(--ff-base);
letter-spacing:-.005em;
box-shadow:var(--shadow-cta)
}
/* PEOPLE delivery baseline - marketing-consent row on every form */
.field--consent {
display:flex;
flex-direction:row;
align-items:flex-start;
gap:10px;
margin-top:8px;
padding:0;
font:400 14px/1.5 var(--ff-base);
color:rgba(255,255,255,.88)
}
.field--consent .field__check {
flex:0 0 auto;
width:18px;
height:18px;
margin-top:3px;
accent-color:var(--c-red)
}
.field--consent .field__check-label { flex:1
}
.field--consent a { color:var(--c-white);
text-decoration:underline
}
.form__success {
margin-top:16px;
padding:12px 16px;
background:#e8f5ec;
border:1px solid #4caf50;
border-radius:var(--radius-md,10px);
color:#1e4b25;
font:700 16px/1.4 var(--ff-base)
}
/* ===========================================================
S10 · Closing paragraph + crane sign-off
v4 #12:white bg (no texture),crane on physical-right (RTL start)
=========================================================== */
.closing {
padding:64px 0 56px;
background:var(--c-white)
}
.closing__body {
display:grid;
gap:22px;
font-size:19px;
line-height:1.72;
color:var(--c-ink);
text-align:center;
margin-bottom:32px
}
.closing__body p {
margin:0
}
.closing__body strong { font-weight:700
}
.closing__signoff {
position:relative;
text-align:center;
font-size:clamp(34px,7vw,52px);
font-weight:700;
color:var(--c-red);
line-height:1.1
}
.closing__crane {
display:block;
margin:18px auto 0;
width:220px;
height:auto
}
/* ===========================================================
S11 · Footer
=========================================================== */
.footer {
padding:38px 0 0;
background:var(--c-paper);
text-align:center
}
.footer__inner {
display:grid;
gap:24px;
align-items:center
}
.footer__brand {
display:grid;
gap:3px;
justify-items:center
}
.footer__brand p,
.footer__links {
margin:0
}
.footer__logo {
width:220px;
height:auto
}
.footer__branch {
font-size:15px;
font-weight:700;
color:var(--c-ink)
}
.footer__phone {
font-size:18px;
font-weight:700;
color:var(--c-ink);
line-height:1.25
}
.footer__social {
display:inline-flex;
gap:8px;
margin-top:2px
}
.footer__sx svg { width:30px;
height:30px
}
.footer__links {
display:grid;
gap:10px;
padding:0;
list-style:none;
font-size:16px;
line-height:1.45;
color:var(--c-ink)
}
.footer__links a {
overflow-wrap:anywhere;
text-decoration:none !important
}
.footer__links a:visited,
.footer__links a:hover,
.footer__links a:focus-visible {
text-decoration:none !important
}
.footer__credit {
margin-top:26px;
padding:10px 16px 12px;
background:var(--c-white);
font-size:12px;
color:var(--c-muted);
display:flex;
align-items:center;
justify-content:center;
gap:8px
}
.footer__credit img { height:13px;
width:auto;
display:inline-block
}
.site-credit {
margin:0;
padding:10px 16px 12px;
background:var(--c-white);
font-size:12px;
line-height:1.4;
color:var(--c-muted);
text-align:center
}
.site-credit a {
color:inherit;
text-decoration:none
}
/* ===========================================================
Floating CTA (IL convention #5)
=========================================================== */
.floating-cta {
position:fixed;
bottom:16px;
inset-inline-end:16px;
width:56px;
height:56px;
border-radius:50%;
display:grid;
place-items:center;
background:var(--c-red);
box-shadow:0 10px 22px rgba(0,0,0,.32);
z-index:60
}
.floating-cta svg { width:26px;
height:26px
}
/* ===========================================================
Explicit mobile overrides - isolate phone/tablet tuning
=========================================================== */
@media (max-width:1023px) {
.valueprop {
padding:44px 0 132px;
overflow:visible
}
.valueprop__title {
max-width:26ch;
margin-inline:auto;
line-height:1.22
}
.valueprop__roll {
top:auto;
bottom:-56px;
width:155px;
transform:rotate(-2deg);
z-index:4
}
.problem {
padding:74px 0 88px;
background-size:cover
}
.problem__bird {
display:none
}
.problem__title {
max-width:19ch;
margin:0 auto 20px;
line-height:1.12
}
.problem__body {
gap:18px;
font-size:clamp(20px,4vw,30px)
}
.problem__callout {
font-size:clamp(34px,7.6vw,64px);
line-height:1.04
}
.features {
background-size:cover
}
}
/* ===========================================================
Desktop overrides - single breakpoint at 1024px
=========================================================== */
@media (min-width:1024px) {
:root {
--page-max:1256px;
/* v3 row #1:content column max */
--gutter:32px;
--fs-body:19px;
--fs-lead:22px
}
/* .hero__brand { display:none
} */
/* Photo at its natural ratio so the stamp and title sit against the dark fade. */
.hero__photo { aspect-ratio:2560 / 1094
}
.hero__photo > img { object-position:50% 50%
}
.hero__stamp {
width:230px;
margin:-68px auto 22px
}
.hero__caption {
padding:0 32px 68px
}
.hero__title {
max-width:1168px;
margin-inline:auto;
padding:0
}
.hero__lead {
max-width:1120px;
margin-top:28px;
font-size:24px
}
/* S2 / S3 - tighten padding,lift type a bit */
.opener { padding:56px 0 64px
}
.valueprop { padding:56px 0 140px;
overflow:visible
}
/* v3 row #7 + v4 #6:S2+3 right-side decoration (crispy roll) 332×485,
stuck flush to viewport right edge */
.valueprop__roll {
top:auto;
bottom:-180px;
inset-inline-start:0;
/* RTL start = physical right viewport edge */
width:332px;
height:auto;
transform:rotate(-2deg);
transform-origin:top right;
z-index:5
}
/* S2b quick-contact - 2-col top (phone right RTL start / event left RTL end)
with vertical divider between,then 4-up platter strip below. */
.quickcontact { padding:72px 0 64px
}
.quickcontact__grid {
grid-template-columns:1fr 1fr;
grid-template-areas:
"phone event"
"platters platters";
column-gap:0;
row-gap:56px;
align-items:center;
max-width:1180px;
margin-inline:auto
}
.quickcontact__block--phone {
grid-area:phone;
padding-inline:40px;
border-inline-end:1px solid #d0191d;
/* RTL:inline-end = physical LEFT - divider between blocks */
}
.quickcontact__block--event {
grid-area:event;
padding-inline:40px
}
.quickcontact__platters {
grid-area:platters;
margin-top:8px;
width:100vw;
margin-inline:calc(50% - 50vw);
/* escape content column → full viewport (matches S4/S7/S8) */
}
.quickcontact__title { font-size:clamp(32px,3vw,44px);
max-width:16ch
}
.quickcontact__lead { font-size:22px;
margin-bottom:10px
}
.quickcontact__phone { font-size:clamp(36px,3.4vw,48px)
}
.quickcontact__beers { width:240px;
margin-top:18px
}
.quickcontact__body { font-size:clamp(19px,1.4vw,22px);
max-width:36ch
}
.quickcontact__btn { min-height:62px;
padding:0 40px;
font-size:21px
}
/* 4-up full-bleed strip - matches S4 products / S7+S8 galleries (5px gap,hard edges) */
.quickcontact__platters .slider__track {
overflow:visible;
gap:5px;
padding-inline:0;
justify-content:center
}
.quickcontact__platters .slider__slide {
flex:0 0 calc((100% - 15px) / 4);
/* 4 cards with 3×5px gaps */
border-radius:0;
aspect-ratio:1 / 1
}
.quickcontact__platters .slider__nav { display:none
}
/* S4 problem panel - centered copy over repeating pattern */
.problem { padding:76px 0 136px;
overflow:visible
}
.problem__body {
grid-template-columns:1fr;
gap:34px;
max-width:1320px;
margin-inline:auto;
align-items:center
}
.problem__callout {
grid-column:1 / -1;
margin:-4px 0
}
.problem__body > p:not(.problem__callout) {
max-width:42ch
}
.problem {
background-size:cover
}
.problem__title {
max-width:16ch;
margin-bottom:26px;
font-size:clamp(54px,4.9vw,78px)
}
.problem__body {
font-size:clamp(24px,2.15vw,31px);
line-height:1.46
}
/* Bottom-left crane decoration. */
.problem__bird {
display:block;
position:absolute;
bottom:0;
inset-inline-end:0;
width:277px
}
/* v3 row #10:Section 3+4 boundary decoration 96×79 */
.problem__bottom {
bottom:-40px;
width:92px
}
/* S5 bridge - title 825×295 (annotation row #11),
4-platter row 1915×479 full-bleed (annotation row #12),
panorama 1111×384 inside content column (annotation rows #13–14) */
.slider__track {
overflow:visible;
justify-content:center
}
.slider__slide { flex:0 0 22%
}
.slider__nav { display:none
}
.bridge { padding:96px 0 96px
}
.bridge__title { max-width:825px;
margin-inline:auto;
margin-bottom:32px
}
.bridge__close {
max-width:1180px;
margin-top:6px;
font-size:clamp(34px,3.1vw,58px);
line-height:1.32
}
.bridge__close strong {
margin-bottom:12px;
font-size:.72em
}
/* 4-platter row escapes content column → full viewport (v4 #11-13:5px gap) */
.bridge .slider[data-slider="products"] {
width:100vw;
margin-inline:calc(50% - 50vw)
}
.bridge .slider[data-slider="products"] .slider__track {
gap:5px;
padding-inline:0
}
.bridge .slider[data-slider="products"] .slider__slide {
flex:0 0 calc((100% - 15px) / 4);
/* 4 cards with 3×5px gaps */
border-radius:0;
aspect-ratio:1 / 1
}
/* Panorama:1111×384 inside content column. v4 #14:don't crop the image -
use object-fit:contain so its black background stays intact */
.bridge__panorama {
display:block;
margin:42px auto 0;
max-width:1111px;
width:100%;
height:auto;
aspect-ratio:auto;
object-fit:contain
}
/* S6 features - v4 reverts pill to full-bleed band (design shows full-viewport red strip) */
.features {
padding-top:112px;
background-size:cover
}
.features__band {
padding:0 24px;
font-size:clamp(22px,2.4vw,30px);
min-height:auto;
display:block
}
.features__band p {
max-width:min(100%,1470px);
padding:24px 54px 28px;
background-image:url(../../../design/default/css/../files/title-pretty-bg.webp);
background-size:contain
}
.features__grid {
grid-template-columns:1fr 1fr;
gap:56px 100px;
padding-top:40px;
padding-bottom:24px;
max-width:1243px;
margin-inline:auto
}
.feature__icon { height:78px
}
.feature p { max-width:36ch;
margin:0 auto
}
/* S7 + S8 galleries - FULL-BLEED on desktop (special-effect finesse,per project convention).
Title stays inside content column;
the slider escapes to 100vw. */
.gallery { padding:96px 0;
overflow:hidden
}
.gallery .container { max-width:var(--col-max)
}
.gallery .slider {
width:100vw;
margin-inline:calc(50% - 50vw)
}
.gallery .slider__track {
overflow:visible;
gap:5px;
/* v4 #11-13,#18,#20,#23-25 */
padding-inline:0
}
.gallery .slider__slide {
flex:0 0 calc((100% - 15px) / 4);
/* 4 cards with 3×5px gaps */
border-radius:0
}
.gallery .slider__nav { display:none
}
/* S9 form - horizontal single row */
.form { padding:56px 0 88px
}
.form__intro {
max-width:56ch;
font-size:24px;
margin-bottom:22px
}
.form__cta {
max-width:none;
margin-bottom:34px;
font-size:clamp(40px,4.2vw,58px)
}
.form__fields {
grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.08fr) minmax(0,1.08fr) auto;
grid-template-areas:
"name phone type date submit"
"consent consent consent consent consent"
"success success success success success";
gap:12px 16px;
align-items:start;
max-width:1180px;
margin-inline:auto
}
.form__fields > .field:nth-of-type(1) { grid-area:name
}
.form__fields > .field:nth-of-type(2) { grid-area:phone
}
.form__fields > .field:nth-of-type(3) { grid-area:type
}
.form__fields > .field:nth-of-type(4) { grid-area:date
}
.form__fields > .field--consent {
grid-area:consent;
justify-self:start;
max-width:min(520px,100%);
margin-top:12px;
font-size:13px;
line-height:1.45;
text-align:start
}
.field__input {
height:58px;
font-size:19px
}
.form__submit {
grid-area:submit;
height:58px;
padding:0 32px;
margin-top:0;
white-space:nowrap
}
.form__success {
grid-area:success;
margin-top:2px
}
/* S10 closing */
.closing { padding:82px 0 72px;
position:relative;
overflow:hidden
}
.closing .container {
max-width:1120px;
padding-inline:40px
}
.closing__body {
gap:24px;
font-size:21px;
max-width:780px;
margin-inline:auto;
text-align:center
}
.closing__signoff {
position:relative;
text-align:center;
font-size:clamp(48px,4.6vw,64px)
}
.closing__crane {
position:absolute;
right:max(24px,calc((100vw - 1120px) / 2));
left:auto;
bottom:-2px;
width:320px;
margin:0
}
/* S11 footer - v4 #29:space-between 3-col layout.
brand on RIGHT (RTL start),legal on LEFT (RTL end) */
.footer { padding:34px 0 0
}
.footer__inner {
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
max-width:1120px;
margin-inline:auto;
padding-bottom:34px;
text-align:inherit
}
.footer__brand {
flex:0 0 340px;
text-align:center
}
.footer__links,
.footer__links--legal,
.footer__links--services {
flex:0 0 250px;
font-size:19px;
line-height:1.6;
text-align:right
}
.footer__logo { width:330px
}
.footer__branch { font-size:18px
}
.footer__phone { font-size:21px
}
.footer__links { gap:14px
}
.footer__credit {
margin-top:0;
min-height:34px
}
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {
html { scroll-behavior:auto
}
*,*::before,*::after { animation:none !important;
transition:none !important
}
}
/* ===========================================================
Language switcher - minimal pill in the hero brand row
=========================================================== */
.hero__brand { position:relative
}
.lang-switch {
position:absolute;
top:16px;
inset-inline-end:16px;
padding:4px 12px;
border:1px solid rgba(255,255,255,.5);
border-radius:999px;
color:#fff;
font-size:14px;
text-decoration:none
}
.lang-switch:hover { background:rgba(255,255,255,.12)
}
.accessibility_menu{
position:fixed;
top:20px;
left:20px;
width:60px;
height:60px;
background:#1a73e8;
border-radius:50%;
box-shadow:0 4px 12px rgba(0,0,0,0.3);
overflow:visible;
color:white;
font-size:18px;
font-weight:bold;
z-index:10000;
text-align:center;
padding:0;
cursor:pointer;
display:block;
transition:transform 0.3s ease
}
.accessibility_menu:hover { transform:scale(1.05)
}
.accessibility_menu:focus{outline:none
}
.accessibility_menu_btn{
background:none;
border:0;
padding:0;
cursor:pointer;
width:100%;
height:100%;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center
}
.accessibility_menu_btn img { width:36px;
height:36px
}
.accessibility_menu_btn:focus,.a11y-action:focus{outline:3px solid #ffbf47;
outline-offset:3px
}
.a11y-action{display:flex;
align-items:center;
gap:12px;
background:none;
border:0;
width:100%;
text-align:right;
padding:10px 15px;
cursor:pointer;
border-radius:6px;
transition:background 0.2s
}
.a11y-action:hover { background:rgba(255,255,255,0.1)
}
.a11y-action span{font-size:16px;
font-weight:500
}
.accessibility_menu .arrw{ display:none
}
.accessibility_menu_title{
width:100%;
text-align:center;
font-size:20px;
color:white;
margin:15px 0;
padding-bottom:10px;
border-bottom:1px solid rgba(255,255,255,0.1);
display:block
}
.active .accessibility_menu_title{
margin:0 0 10px 0;
height:auto
}
.outer_holder{
position:absolute;
top:70px;
left:0;
right:auto;
background:#2d2d2d;
padding:15px;
width:300px;
display:none;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.4);
opacity:0;
transform:translateY(-10px);
transition:opacity 0.3s,transform 0.3s
}
.active.outer_holder{
display:block;
opacity:1;
transform:translateY(0)
}
.accessibility_menu .items_holder{
display:none;
float:none;
width:100%;
padding:0;
background:transparent;
margin:0
}
.accessibility_menu .items_holder .item{
float:none;
width:100%;
font-size:16px !important;
border-bottom:1px solid rgba(255,255,255,0.05);
margin:0;
padding:2px 0
}
.accessibility_menu .items_holder .item:last-child { border-bottom:none
}
.accessibility_menu .items_holder .item img{
float:none;
width:24px;
height:24px;
border:none;
padding:0;
filter:brightness(0) invert(1)
}
.accessibility_menu .items_holder .item span{
float:none;
margin:0;
font-size:16px !important;
color:#e0e0e0 !important;
background:transparent !important
}
.credit{
float:none;
display:block;
width:100%;
text-align:center;
font-size:12px;
color:#888;
margin-top:15px
}
/* Root-based text sizing classes */
html.a11y-text-lg { font-size:18px
}
html.a11y-text-xl { font-size:20px
}
html.a11y-text-base { font-size:16px
}
/* Readable Font */
body.a11y-readable * { font-family:Arial,Helvetica,sans-serif !important
}
/* Highlight Links */
body.a11y-links-highlight a { 
background:#ffeb3b !important;
color:#000 !important;
text-decoration:underline !important;
outline:2px solid #000 !important;
font-weight:bold !important
}
/* Big Cursor */
body.a11y-big-cursor,body.a11y-big-cursor * { 
cursor:url(../../../design/default/plugins/accessibility_plugin/css/data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg width=64 height=64 viewBox=0 0 24 24 fill=black stroke=white stroke-width=2%3E%3Cpath d=M7 2l12 11.2-5.8.5 3.3 7.3-2.2.9-3.2-7.4-4.4 4.6z/%3E%3C/svg%3E) 0 0,auto !important
}
/* Reading Guide */
#a11y-reading-guide {
position:fixed;
left:0;
width:100%;
height:20px;
background:rgba(255,255,0,0.2);
border-top:2px solid #ff0000;
border-bottom:2px solid #ff0000;
pointer-events:none;
z-index:2147483647;
display:none;
box-shadow:0 0 0 9999px rgba(0,0,0,0.5)
}
body.a11y-guide-on #a11y-reading-guide { display:block
}
/* High contrast theme (AA) */
body.a11y-contrast {
--a11y-bg:#000;
--a11y-fg:#fff;
--a11y-border:#fff;
--a11y-focus:#ffbf47;
/* high-visibility focus */
--a11y-link:#00afff
}
body.a11y-contrast,body.a11y-contrast * {
background-color:var(--a11y-bg) !important;
color:var(--a11y-fg) !important
}
body.a11y-contrast a { color:var(--a11y-link) !important;
text-decoration:underline
}
body.a11y-contrast .a11y-action,body.a11y-contrast button,body.a11y-contrast input,body.a11y-contrast select,body.a11y-contrast textarea {
border:2px solid var(--a11y-border) !important
}
body.a11y-contrast .accessibility_menu_btn:focus,body.a11y-contrast .a11y-action:focus,body.a11y-contrast .skip-to-content:focus {
outline:3px solid var(--a11y-focus) !important;
outline-offset:3px !important
}
.a11y-underline a { text-decoration:underline
}
/* Dark mode theme (AA compliant) */
body.a11y-dark {
--a11y-dark-bg:#1a1a1a;
--a11y-dark-fg:#e8e8e8;
--a11y-dark-link:#60b0ff;
--a11y-dark-border:#606060;
background-color:var(--a11y-dark-bg);
color:var(--a11y-dark-fg)
}
body.a11y-dark a { color:var(--a11y-dark-link)
}
body.a11y-dark input,body.a11y-dark textarea,body.a11y-dark select,body.a11y-dark button {
background-color:#2a2a2a;
color:var(--a11y-dark-fg);
border:1px solid var(--a11y-dark-border)
}
/* Skip to content link */
.skip-to-content{
position:absolute;
top:-1000px;
right:10px;
background:#fff;
color:#000;
padding:10px 14px;
border:2px solid #1a73e8;
z-index:2000
}
.skip-to-content:focus{ top:10px;
outline:3px solid #1a73e8
}
/* Live region offscreen styling */
.a11y-live-region{ position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(1px,1px,1px,1px);
white-space:nowrap
}
/* Error summary styles */
.a11y-error-summary { border:3px solid #ba1c1c;
padding:12px;
background:#fff3f3;
color:#222
}
.a11y-error-summary h2 { margin:0 0 8px;
font-size:18px
}
.a11y-error-summary ul { margin:0;
padding-inline-start:20px
}
/* Motion safeguards */
@media (prefers-reduced-motion:reduce) {
*,*::before,*::after { animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important
}
}
body.a11y-reduce-motion *,body.a11y-reduce-motion *::before,body.a11y-reduce-motion *::after {
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important
}
@media (max-width:767px){
.accessibility_menu {
width:58px;
height:59px;
bottom:75px;
top:auto
}
.accessibility_menu .accessibility_menu_btn {
width:58px;
height:59px
}
.accessibility_menu .items_holder {
margin:31px 0 0 0
}
}
.seoform span {
float:left;
width:100px
}
.seoform div input {
width:500px
}
.seoform div {
float:left;
width:100%;
margin-bottom:15px
}
/* css fixes */
ol {
position:relative;
right:20px
}
a{
outline:0
}
input[type="image"],
input[type="submit"],
input[type="button"],
button {
cursor:pointer
}
.ie a img {
border:0
}
.hidden {
position:absolute;
left:0;
top:-100000px
}
/*
* span {
display:inline-block
}
*/
/*
#lbuttons,
#lbuttons div,
#lbuttons a,
#lbuttons img,
.fxc #subtoolbar,
.fxc #admin_panel {
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
transform:2DValue(val) 3DValueSetToNull(0);
transform:2DValue(val);
-webkit-transform :translateZ(0);
-o-transform :translateZ(0);
-webkit-transform :translateZ(0);
transform :translateZ(0);
-webkit-transition:all 0.5s linear
}
.fxc #admin_pusher,
.fxc #sys_website {
-webkit-transition:all 0.5s linear
}
*/
body {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
min-width:100%;
min-height:100%;
padding:0;
margin:0
}
p {
padding:0;
margin:0
}
div.bs {
float:right
}