/* =================================================================
   Bata Group — core styles (design system + sections)
   RTL-first, logical properties. Pairs with responsive.css
   ================================================================= */

:root {
  --navy:   #0E2A47;
  --navy-2: #0a1f36;
  --accent:   #C8102E;   /* red accent */
  --accent-2: #A50D26;   /* red accent — darker (hover) */
  --ink:    #14181C;
  --muted:  #8A9099;
  --bg:     #FFFFFF;
  --bg-alt: #F4F5F7;
  --line:   #E2E4E8;
  --white:  #FFFFFF;

  --radius:   14px;
  --radius-sm:10px;
  --radius-lg:22px;

  --container: 1280px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(72px, 9vw, 132px);
  --header-h: 86px;

  --shadow-sm: 0 6px 20px rgba(14,42,71,.08);
  --shadow-md: 0 18px 50px rgba(14,42,71,.14);
  --ease: cubic-bezier(.22,.61,.36,1);

  --ff: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- typography helpers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
}
.eyebrow::before {            /* red accent mark */
  content: "";
  width: 24px; height: 2px;
  background: var(--accent);
  flex: none;
}
.eyebrow--light { color: rgba(255,255,255,.82); }

.display {
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin-block-end: clamp(32px, 4vw, 56px);
}
.display__line { display: block; }
.display__line--muted { color: var(--muted); font-weight: 500; }
/* small extra heading line (e.g. "ההיסטוריה שלנו לאורך השנים"): tiny + muted on desktop;
   bumped to a centered sub-heading on mobile (see responsive.css) */
.display__line--sub { font-size: clamp(15px, 1.4vw, 18px); font-weight: 600; color: var(--muted); letter-spacing: 0; margin-block-start: 12px; }
/* desktop: the small line lives in the heading (.display__line--sub above).
   On phones it moves under the photo instead — that copy is .about__hist-m, hidden here. */
.about__hist-m { display: none; }
.display::after {              /* red accent underline */
  content: "";
  display: block;
  width: 52px; height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-block-start: clamp(16px, 2vw, 24px);
  margin-inline-end: auto;    /* align to start (right in RTL) */
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: 15px;
  border: 0;
  border-radius: 999px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;
  white-space: nowrap;
}
.btn__icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  transition: transform .35s var(--ease), background .25s;
}
.btn .ico-arrow { width: 17px; height: 17px; }

.btn--pill {
  background: #fff;
  color: var(--ink);
  padding: 7px 7px 7px 22px;
  border: 1px solid var(--line);
}
.btn--lg { font-size: 16px; padding-block: 9px; }
.btn--solid { background: var(--accent); color: #fff; padding: 7px 7px 7px 24px; }
.btn--solid .btn__icon { background: rgba(255,255,255,.18); }
.btn--block { width: 100%; justify-content: space-between; padding-block: 12px; padding-inline-start: 26px; }
/* header CTA — text only (no arrow), symmetric pill */
.btn--text { padding: 9px 22px; gap: 0; }
/* hero CTA — ~30% longer + less rounded corners */
.btn--hero {
  font-size: 16px;
  border-radius: 14px;   /* "צרו קשר" CTA — corners ~15% rounder */
  padding-block: 13px;
  padding-inline-start: 48px;
  padding-inline-end: 16px;
  gap: 20px;
}
.btn--hero .btn__icon { border-radius: 8px; }

.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:hover .btn__icon { transform: translateX(-4px); }      /* RTL: arrow moves toward reading edge */
.btn--solid:hover { background: var(--accent-2); }
/* English (LTR) page: flip the arrow to point right, move it the other way on hover.
   Anchored to html[dir] (the PAGE language) — NOT a bare [dir="ltr"] — so a Contact Form 7
   form that forces dir="ltr" on itself can't flip the Hebrew page's "send" arrow.
   Hebrew page → arrow points ← ; English page → arrow points →. */
html[dir="ltr"] .btn .ico-arrow { transform: scaleX(-1); }
html[dir="ltr"] .btn:hover .btn__icon { transform: translateX(4px); }

/* shared phone chip / hero CTA border = same --line + radius */
.phone-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .25s, background .25s;
}
.phone-chip .ico { width: 16px; height: 16px; color: var(--navy); }
.phone-chip:hover { border-color: var(--navy); background: var(--bg-alt); }

/* ---------- header (slim, no nav menu) — overlays the hero, solidifies on scroll ---------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
}
/* Glass lives on ::before, NOT on the header itself. backdrop-filter on the header
   would make it the containing block for the fixed mobile-menu overlay (trapping it
   inside the header strip). Keeping it on the pseudo-element avoids that. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  border-block-end: 1px solid transparent;
  /* reference uses transition-all duration-500 (Tailwind ease) */
  transition: background .5s cubic-bezier(.4,0,.2,1), border-color .5s cubic-bezier(.4,0,.2,1), box-shadow .5s cubic-bezier(.4,0,.2,1), -webkit-backdrop-filter .5s cubic-bezier(.4,0,.2,1), backdrop-filter .5s cubic-bezier(.4,0,.2,1);
}
/* smooth color fade of header content to match the 500ms feel */
.site-header .brand__name,
.site-header .brand__name-light,
.site-header .brand__mark,
.site-header .phone-chip,
.site-header .phone-chip .ico { transition: color .5s cubic-bezier(.4,0,.2,1), border-color .5s cubic-bezier(.4,0,.2,1), box-shadow .5s cubic-bezier(.4,0,.2,1); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
}
.site-header__end { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }

/* language switch (HE / EN) */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.lang-switch a { color: inherit; opacity: .6; transition: opacity .2s, color .2s; }
.lang-switch a:hover { opacity: 1; }
.lang-switch a.is-active { opacity: 1; color: var(--accent); }
.lang-switch .sep { opacity: .35; }
.site-header .lang-switch { color: #fff; }
.site-header.is-solid.is-light .lang-switch { color: var(--ink); }

/* ---------- primary nav (anchor links) ---------- */
.site-nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.site-nav__panel { display: contents; }   /* desktop: links flow inline; mobile: becomes the slide-in panel */
.site-nav a {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  transition: color .35s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -6px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform .3s var(--ease);
}
.site-nav a:hover::after,
.site-nav a.is-active::after { transform: scaleX(1); }   /* underline on hover AND for the section in view */
.site-header.is-solid.is-light .site-nav a { color: var(--ink); }

/* hamburger toggle (shown on small screens) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 11px;
  background: transparent;
  border: 0;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: #fff; border-radius: 2px;
  transition: transform .3s var(--ease), opacity .25s, background .35s;
}
.site-header.is-solid.is-light .nav-toggle span { background: var(--ink); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* TOP state (over the hero photo): light content */
.site-header .brand__name { color: #fff; }
.site-header .brand__name-light { color: rgba(255,255,255,.6); }
.site-header .brand__mark { box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.site-header .phone-chip { color: #fff; border-color: rgba(255,255,255,.45); }
.site-header .phone-chip .ico { color: #fff; }
.site-header .phone-chip:hover { border-color: #fff; background: rgba(255,255,255,.14); }

/* SCROLLED over the HERO photo: DARK frosted glass, light content */
.site-header.is-solid::before {
  background: rgba(8, 14, 24, .42);   /* dark glass, photo shows through the blur */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-block-end-color: rgba(255, 255, 255, .10);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

/* SCROLLED past the hero (over light content): LIGHT frosted glass, dark content */
.site-header.is-solid.is-light::before {
  background: rgba(248, 246, 242, .7);
  border-block-end-color: transparent;
  box-shadow: 0 10px 15px -3px rgba(14,42,71,.05), 0 4px 6px -4px rgba(14,42,71,.05);
}
.site-header.is-solid.is-light .brand__name { color: var(--ink); }
.site-header.is-solid.is-light .brand__name-light { color: var(--muted); }
.site-header.is-solid.is-light .brand__mark { box-shadow: none; }
.site-header.is-solid.is-light .phone-chip { color: var(--ink); border-color: var(--line); }
.site-header.is-solid.is-light .phone-chip .ico { color: var(--navy); }
.site-header.is-solid.is-light .phone-chip:hover { border-color: var(--navy); background: var(--bg-alt); }
/* logo: full colour on the light (content) header; coloured mark + white lettering while the header is dark (over the hero) */
.site-header .brand__logo { background-image: url('../images/bata-logo-ondark.png'); }
.site-header.is-solid.is-light .brand__logo { background-image: url('../images/bata-logo.png'); }

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__logo {
  display: block;
  width: 100px; height: 38px;   /* logo ~2.65:1 ratio (−30%) */
  background: url('../images/bata-logo.png') center / contain no-repeat;
}
.brand--light .brand__logo { background-image: url('../images/bata-logo-ondark.png'); }   /* coloured mark + white text on the dark footer */
.brand__mark {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: 19px;
}
.brand__name { font-weight: 800; font-size: 21px; letter-spacing: -.02em; }
.brand__name-light { font-weight: 400; color: var(--muted); }
.brand--light .brand__name { color: #fff; }
.brand--light .brand__name-light { color: rgba(255,255,255,.55); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;        /* fills the whole first screen — no white strip below */
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  padding-block: clamp(96px, 13vh, 160px) 40px;
}
/* static full-bleed hero photo */
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center;
}
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(8,18,33,.62) 0%, rgba(8,18,33,.22) 38%, rgba(8,18,33,.55) 100%),
    linear-gradient(to left, rgba(8,18,33,.10), rgba(8,18,33,.45));
}
.hero__content { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hero__title {
  font-weight: 800;
  font-size: clamp(52px, 10vw, 132px);
  line-height: .98;
  letter-spacing: -.03em;
  margin-block: 16px 14px;
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
  /* Latin wordmark: flow LTR but stay right-anchored like the rest of the RTL content */
  direction: ltr;
  text-align: right;
  overflow-wrap: break-word;
  width: 100%;       /* constrain to container so it wraps instead of overflowing */
  min-width: 0;      /* defeat flex item min-width:auto */
}
[dir="ltr"] .hero__title { text-align: left; }   /* English (LTR) version */
.hero__lead {
  font-size: clamp(17px, 2.3vw, 26px);
  font-weight: 400;
  color: rgba(255,255,255,.9);
  max-width: 40ch;
  margin-block-end: clamp(26px, 3.5vw, 40px);
}
[dir="ltr"] .hero__lead { max-width: none; }   /* English lead stays on one line on desktop */
.hero .btn--pill { align-self: flex-start; }

.hero__footer {
  position: relative; z-index: 2;
  display: flex;
  align-items: flex-end;
}
.hero__caption {
  max-width: 42ch;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
}

/* ---------- generic section ---------- */
.section { padding-block: var(--section-y); scroll-margin-block-start: calc(var(--header-h) + 12px); }
.section--alt { background: var(--bg-alt); }
.callout { scroll-margin-block-start: calc(var(--header-h) + 12px); }

/* ---------- about ---------- */
.about__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;          /* media stretches to the text column height */
}
.about__media {                  /* single image filling the whole media area */
  display: block;
  height: 100%;
  min-height: 380px;
}
.about__img {
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.about__img img { width: 100%; height: 100%; object-fit: cover; }
.about__text p { color: #3b4148; margin-block-end: 16px; max-width: 60ch; }
.about__text p:first-child { font-size: clamp(17px, 1.7vw, 20px); color: var(--ink); font-weight: 500; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-block-start: clamp(26px, 3vw, 40px);
  padding-block-start: 28px;
  border-block-start: 1px solid var(--line);
}
.stats__item { display: flex; flex-direction: column; gap: 4px; }
.stats__num { font-size: clamp(26px, 3vw, 38px); font-weight: 800; color: var(--accent); letter-spacing: -.02em; line-height: 1; }
.stats__label { font-size: 13px; color: var(--muted); font-weight: 500; }

/* ---------- timeline ---------- */
.timeline__grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;   /* timeline (right) | vector art (left) */
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.timeline__art { display: flex; justify-content: center; }
.tl-art { width: 100%; max-width: 420px; height: auto; transform: translateX(-15%); }
[dir="ltr"] .tl-art { transform: translateX(10%); }   /* English: nudged 25% to the right */

.tl { position: relative; display: grid; gap: 4px; }
.tl::before {
  content: ""; position: absolute;
  inset-block: 14px;
  inset-inline-start: 27px;
  width: 2px;
  background: linear-gradient(var(--line), var(--line));
}
.tl__item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(18px, 2.5vw, 34px);
  padding-block: clamp(18px, 2.4vw, 30px);
}
.tl__node {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--accent);
  font-weight: 800;
  font-size: 16px;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), background .25s, color .25s;
}
/* node lights up for the step currently in view while scrolling (set by main.js), not on hover/tap */
.tl__item.is-current .tl__node { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-2px); }
.tl__title { font-size: clamp(18px, 2vw, 23px); font-weight: 700; margin-block-end: 8px; }
.tl__body p { color: #3b4148; max-width: 78ch; }

/* ---------- services cards ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 26px); }
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 40px);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .25s;
}
.card__icon {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border-radius: 16px;
  background: var(--navy);
  color: #fff;
  margin-block-end: 24px;
  box-shadow: 0 12px 24px rgba(14,42,71,.18);
  transition: transform .3s var(--ease);
}
.card__icon svg { width: 29px; height: 29px; }
.card__title { font-size: clamp(19px, 2vw, 24px); font-weight: 700; margin-block-end: 12px; }
.card__text { color: #3b4148; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.card:hover .card__icon { transform: translateY(-2px) scale(1.04); }

/* ---------- callout ---------- */
.callout {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding-block: clamp(90px, 12vw, 160px);
  overflow: hidden;
}
.callout__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,18,33,.72), rgba(8,18,33,.86));
}
.callout__content { position: relative; max-width: 760px; }
.callout__title { font-size: clamp(28px, 4vw, 50px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin-block: 16px 18px; }
.callout__text { font-size: clamp(16px, 1.8vw, 20px); color: rgba(255,255,255,.86); margin-block-end: clamp(28px, 3.4vw, 40px); }
.callout .btn--pill { background:#fff; }

/* ---------- values ---------- */
/* values — no cards: content on the background, separated by thin divider lines
   (the 1px grid gaps reveal the line-coloured container behind the cells) */
.values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
}
.value {
  display: flex;
  flex-direction: column;
  background: var(--bg-alt);     /* same as the section bg → sits "on the background" */
  padding: clamp(30px, 3.2vw, 48px);
  transition: background .3s var(--ease);
}
.value__idx { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .1em; margin-block-end: 14px; }
.value__title { font-size: clamp(18px, 1.9vw, 22px); font-weight: 700; margin-block-end: 8px; }
.value__text { color: #3b4148; font-size: 15px; }
.value:hover { background: #fff; }

/* ---------- contact ---------- */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
.contact__info .display { margin-block-end: 22px; }
.contact__lead { color: #3b4148; max-width: 46ch; margin-block-end: 30px; }
.contact__list { display: grid; gap: 2px; }
.contact__list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 14px;
  border-block-start: 1px solid var(--line);
}
.contact__list li:last-child { border-block-end: 1px solid var(--line); }
.contact__k { width: 64px; flex: none; font-size: 13px; color: var(--muted); font-weight: 600; }
.contact__v { font-weight: 600; font-size: 16px; }
a.contact__v:hover { color: var(--navy); text-decoration: underline; }

.contact__form-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
}
.cform { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; color: #4a5159; }
.field input, .field textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: #aab0b8; }
html[dir="rtl"] .contact__form-wrap .field input,
html[dir="rtl"] .contact__form-wrap .field textarea { text-align: right !important; direction: rtl; }   /* RTL (Hebrew): push text + placeholder to the right */
html[dir="ltr"] .contact__form-wrap .field input,
html[dir="ltr"] .contact__form-wrap .field textarea { text-align: left !important; direction: ltr; }     /* LTR (English): keep left — anchored to PAGE language so a CF7 dir="ltr" form can't flip Hebrew fields */
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(14,42,71,.10);
}
.cform .btn { margin-block-start: 28px; }   /* ~2× the gap between the button and the fields */

/* ---------- footer ---------- */
.site-footer { background: var(--navy-2); color: rgba(255,255,255,.8); padding-block: clamp(48px, 6vw, 72px) 0; }
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  padding-block-end: 32px;
}
.site-footer__tag { flex: 1; min-width: 220px; color: rgba(255,255,255,.6); font-size: 15px; }
.site-footer__contacts { display: flex; gap: 26px; font-weight: 600; }
.site-footer__contacts a:hover { color: #fff; }
.site-footer__bottom {
  border-block-start: 1px solid rgba(255,255,255,.12);
  padding-block: 22px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* =================================================================
   Bata Group — client revision (2026-06)
   1) Larger body copy (better proportion to the headings)
   2) Smaller hero title on desktop (the big "Bata …" wordmark was too large)
   3) Hebrew form: right-aligned fields (incl. email/tel) + swapped submit button
   (the "Send"-arrow direction fix lives in the buttons section above: html[dir])
   ================================================================= */

/* ---- 1) Type scale: lift body-copy sizes site-wide ---- */
body { font-size: 17px; }
.btn { font-size: 16px; }
.phone-chip { font-size: 15px; }
.site-nav a { font-size: 16px; }
.hero__caption { font-size: 15.5px; }
.about__text p:first-child { font-size: clamp(19px, 1.9vw, 22px); }
.stats__label { font-size: 14.5px; }
.value__text { font-size: 16.5px; }
.contact__lead { font-size: 17.5px; }
.contact__v { font-size: 17px; }
.contact__k { font-size: 14px; }
.field label { font-size: 14px; }
.field input, .field textarea,
.contact__form-wrap input, .contact__form-wrap textarea { font-size: 16.5px; }
.site-footer__tag { font-size: 16px; }
.site-footer__bottom { font-size: 14.5px; }

/* ---- 2) Hero title: smaller on desktop (was clamp(52px, 10vw, 132px) — too big).
        Mobile size is unchanged (set later in responsive.css). ---- */
.hero__title { font-size: clamp(46px, 7.5vw, 90px); }

/* ---- 3) Hebrew (RTL) contact form ----
   a) Right-align EVERY field — including email/tel/url, which browsers force to LTR by
      default — so placeholders like example@mail.com / 050-000-0000 sit on the right edge.
   b) Swap the submit button: "שליחה" on the LEFT, the arrow chip on the RIGHT (mirrors the
      English layout). English (html[dir="ltr"]) is untouched. */
html[dir="rtl"] .contact__form-wrap input,
html[dir="rtl"] .contact__form-wrap textarea,
html[dir="rtl"] .contact__form-wrap select { text-align: right !important; direction: rtl !important; }
html[dir="rtl"] .contact__form-wrap input::placeholder,
html[dir="rtl"] .contact__form-wrap textarea::placeholder { text-align: right !important; direction: rtl !important; }
html[dir="rtl"] .contact__form-wrap .btn--block .btn__icon { order: -1; }
html[dir="rtl"] .contact__form-wrap label { text-align: right !important; }   /* field labels (שם מלא / E-mail / טלפון / הודעה) sit on the right */

/* ---------- Contact Form 7 — make a CF7 form match the theme's built-in form ----------
   Field RTL alignment + labels are already handled by the html[dir="rtl"] rules above
   (anchored to the PAGE language, so it's robust whatever dir CF7 sets from the WP locale).
   Use the CF7 form template from the README (the one with .field wrappers + .btn button). */
.contact__form-wrap .wpcf7,
.contact__form-wrap .wpcf7-form { direction: inherit; }
.contact__form-wrap .wpcf7-form { display: grid; gap: 16px; }
.contact__form-wrap .wpcf7-form-control-wrap { display: block; }   /* CF7 wraps inputs in an inline span — block so width:100% applies */
.contact__form-wrap .wpcf7-form input,
.contact__form-wrap .wpcf7-form textarea { width: 100%; }
.contact__form-wrap .wpcf7-form .btn { margin-block-start: 28px; width: 100%; justify-content: center; }
.contact__form-wrap .wpcf7-spinner { display: none; }
.contact__form-wrap .wpcf7-form .btn__icon { display: flex; align-items: center; justify-content: center; }
.contact__form-wrap .wpcf7-form .ico-arrow { display: block; }
.contact__form-wrap .wpcf7-not-valid-tip { color: var(--accent); font-size: 12.5px; margin-block-start: 6px; }
.contact__form-wrap .wpcf7-response-output {
  margin: 16px 0 0; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14px; line-height: 1.5;
}
.contact__form-wrap .wpcf7-form.invalid .wpcf7-response-output,
.contact__form-wrap .wpcf7-form.unaccepted .wpcf7-response-output { border-color: var(--accent); color: var(--accent-2); }
.contact__form-wrap .wpcf7-form.sent .wpcf7-response-output { border-color: #1a7f37; color: #1a7f37; }