/* =================================================================
   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: 140px;

  --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(13px, 1.5vw, 16px);
  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; font-size: clamp(17px, 2.4vw, 28px); }
/* 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; light version over the dark hero / transparent header */
.site-header .brand__logo { background-image: url('../images/materials-logo-ondark.png'); }
.site-header.is-solid.is-light .brand__logo { background-image: url('../images/materials-logo.png'); }

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__logo {
  display: block;
  width: 176px; height: 121px;    /* Bata Materials logo ~1.46:1 — enlarged */
  background: url('../images/materials-logo.png') center / contain no-repeat;
}
.brand--light .brand__logo { background-image: url('../images/materials-logo-ondark.png'); }   /* light logo 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;
  transform: scale(1.05);   /* zoom hero photo +5% (clipped by .hero overflow:hidden) */
}
.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; }

/* =================================================================
   Bata Materials — site-specific additions
   1) Text wordmark brand (BATA MATERIALS) — no image logo
   2) Darker hero veil (bright marble photo needs more contrast)
   3) Catalog grid component (photo cards + icon cards)
   ================================================================= */

/* ---- 1) Brand text wordmark ---- */
/* Latin wordmark must flow LTR even inside the RTL header, or it renders "MATERIALS BATA". */
.brand { gap: 0; letter-spacing: .04em; direction: ltr; }
.brand__name { font-size: 21px; font-weight: 800; }
.brand__name-light { font-size: 21px; font-weight: 500; }

/* ---- 2) Hero veil — a touch darker so the white wordmark reads over the stone ---- */
.hero__veil {
  background:
    linear-gradient(180deg, rgba(8,18,33,.72) 0%, rgba(8,18,33,.42) 42%, rgba(8,18,33,.72) 100%),
    linear-gradient(to left, rgba(8,18,33,.20), rgba(8,18,33,.55));
}

/* ---- 3) Catalog ---- */
.catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
.cat {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: inherit;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .25s;
}
.cat:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.cat__media {
  position: relative;
  aspect-ratio: 100 / 64;
  overflow: hidden;
  background: var(--bg-alt);
}
.cat__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.cat:hover .cat__media img { transform: scale(1.05); }
/* icon variant — navy panel + centred line icon */
.cat--icon .cat__media {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 100%);
}
.cat--icon .cat__media::before {            /* faint red accent glow, top corner */
  content: "";
  position: absolute;
  inset-block-start: 0; inset-inline-end: 0;
  width: 110px; height: 110px;
  background: radial-gradient(130px 130px at 100% 0, rgba(200,16,46,.55), transparent 70%);
}
.cat--icon .cat__media svg { position: relative; width: 60px; height: 60px; color: rgba(255,255,255,.94); }
.cat__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  padding: clamp(22px, 2.4vw, 32px);
}
.cat__title { font-size: clamp(19px, 2vw, 24px); font-weight: 700; }
.cat__text { color: #3b4148; font-size: 16px; }
.cat__more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-block-start: auto;
  padding-block-start: 10px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent);
}
/* uneven last row: 4 items → one row of 4; trailing 2 → centred "house of cards" */
.catalog__grid--4 { grid-template-columns: repeat(4, 1fr); }
.catalog__grid--c2 { grid-template-columns: repeat(6, 1fr); }
.catalog__grid--c2 > .cat { grid-column: span 2; }
.catalog__grid--c2 > .cat:nth-last-child(2) { grid-column: 2 / span 2; }
.catalog__grid--c2 > .cat:nth-last-child(1) { grid-column: 4 / span 2; }
/* trailing single card centered (e.g. 7 cards → 3 + 3 + 1) */
.catalog__grid--c1 { grid-template-columns: repeat(6, 1fr); }
.catalog__grid--c1 > .cat { grid-column: span 2; }
.catalog__grid--c1 > .cat:nth-last-child(1) { grid-column: 3 / span 2; }

.cat__more svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.cat:hover .cat__more svg { transform: translateX(-5px); }                 /* RTL: arrow → reading edge */
html[dir="ltr"] .cat__more svg { transform: scaleX(-1); }                  /* LTR: point the other way */
html[dir="ltr"] .cat:hover .cat__more svg { transform: scaleX(-1) translateX(-5px); }

/* =================================================================
   Bata Materials — catalog (multi-page) components
   sub-page hero · breadcrumb · category intro · product gallery + lightbox
   ================================================================= */

/* ---- sub-page hero (category / product) ---- */
.subhero {
  position: relative;
  min-height: clamp(360px, 52vh, 520px);
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  padding-block: calc(var(--header-h) + 30px) clamp(30px, 5vw, 60px);
}
.subhero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.subhero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(8,18,33,.55) 0%, rgba(8,18,33,.30) 40%, rgba(8,18,33,.82) 100%),
    linear-gradient(to left, rgba(8,18,33,.15), rgba(8,18,33,.5));
}
.subhero__content { position: relative; z-index: 2; width: 100%; }
.subhero__title {
  font-weight: 800;
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-block: 12px 14px;
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
.subhero__lead { font-size: clamp(16px, 1.8vw, 20px); color: rgba(255,255,255,.9); max-width: 60ch; }

/* ---- breadcrumb ---- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.8); }
.crumbs a { color: rgba(255,255,255,.8); transition: color .2s; }
.crumbs a:hover { color: #fff; }
.crumbs .sep { opacity: .5; }
.crumbs .crumbs__cur { color: #fff; }
/* breadcrumb on a light section (product detail body) */
.crumbs--ink { color: var(--muted); }
.crumbs--ink a { color: var(--muted); }
.crumbs--ink a:hover { color: var(--navy); }
.crumbs--ink .crumbs__cur { color: var(--ink); }

/* ---- category intro row ---- */
.cat-intro { max-width: 70ch; color: #3b4148; font-size: clamp(17px, 1.7vw, 19px); margin-block-end: clamp(36px, 4vw, 56px); }

/* ---- product detail layout ---- */
.product__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}
.product__aside { position: sticky; top: calc(var(--header-h) + 20px); }
.product__aside .display { margin-block-end: 18px; }
.product__desc { color: #3b4148; margin-block-end: 22px; }
.product__desc p { margin-block-end: 14px; }
.product__specs { display: grid; gap: 2px; margin-block: 22px 26px; }
.product__specs li { display: flex; gap: 14px; padding-block: 12px; border-block-start: 1px solid var(--line); font-size: 15px; }
.product__specs li:last-child { border-block-end: 1px solid var(--line); }
.product__specs b { min-width: 120px; color: var(--muted); font-weight: 600; }

/* ---- gallery ---- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 1.2vw, 16px); }
.gallery--wide { grid-template-columns: repeat(3, 1fr); }
.gallery__item {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-alt);
  cursor: zoom-in;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,18,33,0) 60%, rgba(8,18,33,.18));
  opacity: 0; transition: opacity .3s;
}
.gallery__item:hover::after { opacity: 1; }

/* ---- lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(8, 12, 20, .9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lightbox.is-open { display: grid; }
/* size against the viewport (not %) so tall PDF-page images never overflow the screen */
.lightbox__img { max-width: 90vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox__btn {
  position: absolute;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  transition: background .2s;
}
.lightbox__btn:hover { background: rgba(255,255,255,.24); }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__close { inset-block-start: clamp(14px,3vw,28px); inset-inline-end: clamp(14px,3vw,28px); }
.lightbox__prev { inset-inline-end: clamp(10px,2vw,28px); inset-block-start: 50%; transform: translateY(-50%); }
.lightbox__next { inset-inline-start: clamp(10px,2vw,28px); inset-block-start: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; inset-block-end: clamp(14px,3vw,28px); inset-inline: 0; text-align: center; color: rgba(255,255,255,.75); font-size: 14px; font-weight: 600; direction: ltr; }

/* ---- nav dropdown (Catalog → categories) ---- */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd__toggle { display: inline-flex; align-items: center; gap: 6px; }
.nav-dd__caret { width: 14px; height: 14px; transition: transform .3s var(--ease); opacity: .8; }
.nav-dd:hover .nav-dd__caret, .nav-dd:focus-within .nav-dd__caret { transform: rotate(180deg); }
.nav-dd__menu {
  position: absolute;
  inset-block-start: calc(100% + 14px);
  inset-inline-end: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index: 60;
}
.nav-dd::after {            /* hover bridge so the menu doesn't close in the gap */
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  height: 16px;
}
.nav-dd:hover .nav-dd__menu, .nav-dd:focus-within .nav-dd__menu { opacity: 1; visibility: visible; transform: none; }
.nav-dd__menu a {
  color: var(--ink) !important;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 9px;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.nav-dd__menu a::after { display: none !important; }
.nav-dd__menu a:hover { background: var(--bg-alt); color: var(--navy) !important; }

/* ---- "What we do" — compact values-style grid (numbers + dividers, no card boxes) ---- */
/* Use explicit borders (not the gap+bg trick) so BOTH dividers render crisply —
   fractional column widths made the 1px vertical gap-line vanish on sub-pixels. */
.expertise__grid { grid-template-columns: repeat(2, 1fr); gap: 0; background: transparent; }
.expertise .value { background: transparent; }
.expertise .value:hover { background: var(--bg-alt); }
.expertise .value:nth-child(odd) { border-inline-end: 1px solid var(--line); }   /* vertical centre divider */
.expertise .value:nth-child(n+3) { border-block-start: 1px solid var(--line); }   /* horizontal divider between rows */

/* ---- PDF catalog view: single cover → opens the whole PDF on click ---- */
.pdf-view {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--bg-alt);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.pdf-view:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pdf-view img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  object-position: center;
  display: block;
}
.pdf-view::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,18,33,0) 55%, rgba(8,18,33,.5));
  pointer-events: none;
}
.pdf-view__badge {
  position: absolute;
  z-index: 2;                 /* sit ON TOP of the ::after gradient, not behind it */
  inset-block-end: 20px;
  inset-inline: 0;
  margin-inline: auto;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #fff;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: var(--shadow-md);
  transition: background .25s, transform .3s var(--ease);
}
.pdf-view:hover .pdf-view__badge { background: var(--accent-2); transform: translateY(-2px); }
.pdf-view__badge svg { width: 18px; height: 18px; }

/* ---- in-page PDF viewer (opens the catalog without leaving the page) ---- */
.pdfmodal { position: fixed; inset: 0; z-index: 210; display: none; background: rgba(8,12,20,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pdfmodal.is-open { display: block; }
.pdfmodal__inner { position: absolute; inset: clamp(12px, 3vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.pdfmodal__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #fff; }
.pdfmodal__title { font-size: clamp(15px, 1.6vw, 18px); font-weight: 700; }
.pdfmodal__actions { display: inline-flex; align-items: center; gap: 14px; }
.pdfmodal__tab { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.8); font-size: 14px; font-weight: 600; transition: color .2s; }
.pdfmodal__tab:hover { color: #fff; }
.pdfmodal__tab svg { width: 16px; height: 16px; }
.pdfmodal__close {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  transition: background .2s;
}
.pdfmodal__close:hover { background: rgba(255,255,255,.24); }
.pdfmodal__close svg { width: 20px; height: 20px; }
/* page-by-page viewer (PDF.js renders one page at a time onto the canvas) */
.pdfmodal__stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.pdfmodal__canvas { max-width: 100%; max-height: 100%; border-radius: 8px; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.pdfmodal__nav {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  /* dark/grey so the arrows stay visible on both light PDF pages and the dark backdrop */
  background: rgba(20,28,40,.62); border: 1px solid rgba(255,255,255,.35);
  color: #fff; transition: background .2s, opacity .2s;
}
.pdfmodal__nav:hover { background: rgba(20,28,40,.85); }
.pdfmodal__nav:disabled { opacity: .3; cursor: default; }
.pdfmodal__nav svg { width: 24px; height: 24px; }
.pdfmodal__prev { left: 8px; }
.pdfmodal__next { right: 8px; }
.pdfmodal__page { position: absolute; inset-block-end: 6px; inset-inline: 0; text-align: center; color: rgba(255,255,255,.82); font-size: 14px; font-weight: 600; direction: ltr; }
.pdfmodal__loading { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.8); font-size: 15px; font-weight: 600; }

/* ---- mobile catalog carousel arrows (homepage) — hidden on desktop ---- */
.catcar__nav { display: none; }
.catcar__btn {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  transition: background .2s, opacity .2s;
}
.catcar__btn:hover { background: var(--bg-alt); }
.catcar__btn:disabled { opacity: .3; }
.catcar__btn svg { width: 22px; height: 22px; }