/* MG Stone Tec — shared stylesheet (AR/EN) */

:root {
  --bg: #121212;
  --bg-alt: #1a1a1a;
  --panel: #1e1e1e;
  --border: #2c2c2c;
  --text: #f2f0ec;
  --text-dim: #b8b3a8;
  --accent: #c9a227;
  --accent-dim: #8a701c;
  --max-w: 1140px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
}

body {
  line-height: 1.65;
  font-size: 16px;
}

body.lang-ar {
  font-family: 'Cairo', 'Tahoma', sans-serif;
  direction: rtl;
}

body.lang-en {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  direction: ltr;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
/* The gradient lives on header.site itself (which has no max-width) so it
   spans the full page width edge to edge — the inner .wrap divs only center
   the logo/nav/lang-switch content within that band. Both tiers share the
   one continuous light gradient, matching the Hebrew site and the reference
   site, where the nav links sit directly on the light backdrop too. */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(135deg, #f7f2e4, #e9dcb0);
  border-bottom: 1px solid var(--border);
}

header.site .top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(58,50,32,0.15);
}

header.site .nav-row {
  display: flex;
  align-items: center;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.brand span { color: var(--accent); }

.brand-logo-wrap {
  display: inline-flex;
  align-items: center;
}

.brand-logo {
  height: 46px;
  width: auto;
  display: block;
}

nav.main-nav {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

nav.main-nav a {
  font-size: 0.95rem;
  color: #1a1712;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  transition: color .15s, border-color .15s;
}

nav.main-nav a:hover,
nav.main-nav a.active {
  color: #000;
  border-color: var(--accent-dim, var(--accent));
}

.lang-switch {
  font-size: 0.85rem;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}

.lang-switch a { color: var(--text-dim); }
.lang-switch a.active { color: var(--accent); font-weight: 700; }
.lang-switch .sep { margin: 0 6px; opacity: .4; }

/* Sits on the light top-bar gradient now, so it needs dark text instead of
   the light-on-dark colors used elsewhere on the page. */
.top-bar .lang-switch {
  border-color: rgba(58,50,32,0.3);
}
.top-bar .lang-switch a { color: #3a3220; }
.top-bar .lang-switch a.active { color: #8a6a12; }

.mobile-toggle { display: none; }

/* Hero */
.hero {
  padding: 90px 0 70px;
  background:
    linear-gradient(180deg, rgba(18,18,18,0.35), rgba(18,18,18,0.95)),
    repeating-linear-gradient(135deg, #1c1c1c 0px, #1c1c1c 2px, #181818 2px, #181818 40px);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.hero .eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.hero h1 {
  font-size: 2.6rem;
  line-height: 1.25;
  margin: 0 0 20px;
  font-weight: 800;
}

.hero p.lead {
  color: var(--text-dim);
  font-size: 1.15rem;
  max-width: 700px;
  margin: 0 auto 34px;
}

.btn-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.98rem;
  transition: transform .15s, background .15s, color .15s;
}

.btn-primary {
  background: var(--accent);
  color: #161616;
}
.btn-primary:hover { background: #dab53a; transform: translateY(-1px); }

.btn-ghost {
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Sections */
section { padding: 72px 0; }
section.alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section-head .eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.section-head h2 { font-size: 1.9rem; margin: 0 0 14px; font-weight: 800; }
.section-head p { color: var(--text-dim); margin: 0; }

/* Grid of cards */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 24px;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--accent-dim); transform: translateY(-3px); }

.card .icon {
  width: 46px; height: 46px;
  margin-bottom: 18px;
  color: var(--accent);
}

.card h3 { margin: 0 0 10px; font-size: 1.1rem; font-weight: 700; }
.card .model { color: var(--accent); font-size: .8rem; font-weight: 700; letter-spacing: 1px; margin-bottom: 6px; text-transform: uppercase; }
.card p { color: var(--text-dim); margin: 0; font-size: 0.95rem; }

/* Partner brand block */
.brand-block { margin-bottom: 56px; }
.brand-block:last-child { margin-bottom: 0; }
.brand-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 18px;
  margin-bottom: 26px;
}
.brand-block-head h3 { margin: 0; font-size: 1.3rem; font-weight: 800; }
.brand-block-head .est { color: var(--accent); font-size: .85rem; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.brand-block-intro { color: var(--text-dim); max-width: 780px; margin: 0 0 26px; }
.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .brand-grid { grid-template-columns: 1fr; } }
.brand-grid .card { padding: 20px 18px; }
.brand-grid .card h3 { font-size: 1rem; }
.brand-grid .card p { font-size: .88rem; }

/* Card with a product photo behind a dark overlay */
.card-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--panel);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.card-photo .model,
.card-photo h3,
.card-photo p {
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 2px 10px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,1);
}
.card-photo p { color: rgba(242,240,236,0.95); }
.card-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, transparent 45%, rgba(10,10,10,.5) 100%);
  pointer-events: none;
}
.card-photo { position: relative; }
.card-photo > * { position: relative; z-index: 1; }

/* Two-column feature */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
}
.split h2 { font-size: 1.8rem; margin-top: 0; }
.split p { color: var(--text-dim); }
.split ul { padding: 0; margin: 22px 0 0; list-style: none; }
.split ul li {
  padding: 10px 0 10px 0;
  border-top: 1px solid var(--border);
  color: var(--text);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.split ul li:first-child { border-top: none; }
.split ul li .dot { color: var(--accent); font-weight: 900; }

.stat-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 36px;
}
.stat-box .num { font-size: 2.4rem; font-weight: 800; color: var(--accent); }
.stat-box .lbl { color: var(--text-dim); margin-top: 6px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* CTA band */
.cta-band {
  text-align: center;
  background: linear-gradient(135deg, #1d1a10, #171717);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-band h2 { font-size: 1.7rem; margin: 0 0 14px; }
.cta-band p { color: var(--text-dim); margin: 0 0 30px; }

/* Footer */
footer.site {
  padding: 44px 0;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.9rem;
}
footer.site .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
footer.site a { color: var(--text-dim); }
footer.site a:hover { color: var(--accent); }
footer.site .foot-links { display: flex; gap: 20px; flex-wrap: wrap; }

/* Page header (inner pages) */
.page-header {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  text-align: center;
}
.page-header .eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.page-header h1 { font-size: 2.1rem; margin: 0; font-weight: 800; }
.page-header p { color: var(--text-dim); margin: 14px auto 0; max-width: 640px; }

/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 26px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.contact-item .icon { width: 28px; height: 28px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.contact-item h3 { margin: 0 0 6px; font-size: 1rem; }
.contact-item p, .contact-item a { color: var(--text-dim); margin: 0; }
.contact-item a:hover { color: var(--accent); }

.map-note {
  margin-top: 24px;
  color: var(--text-dim);
  font-size: 0.9rem;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

/* Testimonials */
.testimonial-card { display: flex; flex-direction: column; }
.testimonial-card .quote {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 20px;
  flex-grow: 1;
}
.testimonial-card .quote::before { content: "\201C"; color: var(--accent); font-size: 1.6rem; font-weight: 800; }
.testimonial-name { font-weight: 700; font-size: 0.95rem; }
.testimonial-co { color: var(--accent); font-size: 0.82rem; margin-top: 2px; }

/* From-the-field photo gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-item {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center;
  background-color: var(--panel);
  transition: transform .15s, border-color .15s;
}
.gallery-item:hover { transform: translateY(-3px); border-color: var(--accent-dim); }

/* Card + PDF-download pairing */
.card-wrap { display: flex; flex-direction: column; gap: 10px; }
.pdf-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 700;
  transition: border-color .15s, color .15s;
}
.pdf-link:hover { border-color: var(--accent); color: var(--accent); }
.pdf-link svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Note badge */
.note-badge {
  display: inline-block;
  margin-top: 30px;
  padding: 14px 20px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.9rem;
}