/* ============================================================
 * components.css — nav, footer, hero, stats-strip, card, button, swatch-block
 * Load order: main.css -> components.css -> rtl.css
 * Logical properties only. Touch targets use min-block-size (logical).
 * Mobile-first; breakpoints at 768px and 1024px.
 * NOTE: This file owns ALL nav rules (desktop + mobile hamburger).
 *       Plan 02-05 does NOT modify this file.
 * ============================================================ */

/* ============================================================
 * 1. NAV — sticky top bar
 * ============================================================ */

.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--color-bg-alt);
  border-block-end: 1px solid var(--color-border);
  padding-block: var(--space-4);
}

.nav__row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* ----- Logo (DESIGN-04 reserved slot + CSS-rendered text wordmark) ----- */
.nav__logo {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--space-4);
  text-decoration: none;
  color: var(--color-primary);
}

/* Logo monogram image — M.L. mark cropped from the company letterhead */
.nav__logo-img {
  display: inline-flex;
  block-size: 52px;
  max-block-size: 56px;
  inline-size: auto;
}

.nav__logo-img img {
  display: block;
  block-size: 100%;
  inline-size: auto;
  object-fit: contain;
}

/* Wordmark text beside the monogram — single line "מבלטים בע״מ" in
   Bellefair. The "מ.ל." prefix is provided visually by the monogram. */
.nav__logo-text {
  color: var(--color-primary);
  font-family: 'Bellefair', 'Heebo', serif;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.01em;
  padding-block-end: 4px;
}

@media (min-width: 768px) {
  .nav__logo-img {
    block-size: 60px;
  }
  .nav__logo-text {
    font-size: 1.375rem;
  }
}

/* ----- Desktop nav links ----- */
.nav__links {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin-inline-start: auto;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-block: var(--space-2);
  padding-inline-start: var(--space-2);
  padding-inline-end: var(--space-2);
  color: var(--color-gray-700);
  font-weight: var(--font-weight-medium);
}

.nav__link:hover,
.nav__link:focus { color: var(--color-primary); }

/* Active page state — underline + primary color. Driven by aria-current="page"
   so screen readers also announce the current page. */
.nav__link--active,
.nav__link[aria-current="page"] {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  border-block-end: 2px solid var(--color-primary);
}

/* ----- Language switcher ----- */
.nav__lang-wrap {
  display: inline-flex;
  align-items: center;
  margin-inline-start: var(--space-6);
}

.nav__lang {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-block: var(--space-2);
  padding-inline-start: var(--space-3);
  padding-inline-end: var(--space-3);
  color: var(--color-gray-700);
  font-weight: var(--font-weight-medium);
}

.nav__lang:hover,
.nav__lang:focus { color: var(--color-primary); }

/* ----- Mobile hamburger toggle + dropdown panel ----- *
 * Mobile-first defaults (< 768px): hamburger visible, desktop links hidden,
 * panel collapsed. Panel opens via aria-expanded sibling selector (nav.js
 * flips aria-expanded; markup also toggles the `hidden` attribute).
 * Plan 02-05's nav.njk markup depends on these rules. */

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  font-size: 1.5rem;
  color: var(--color-gray-700);
  border-radius: var(--radius-sm);
  margin-inline-start: auto;
}

.nav__toggle:hover,
.nav__toggle:focus { color: var(--color-primary); }

/* Hidden by default on mobile via the [hidden] attribute on the markup;
 * nav.js removes that attribute to reveal it. Desktop rule below force-hides
 * regardless of the attribute state. */
.nav__panel {
  background: var(--color-bg-alt);
  border-block-start: 1px solid var(--color-border);
}

.nav__panel-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-4);
  padding-inline-start: var(--container-pad-inline);
  padding-inline-end: var(--container-pad-inline);
  list-style: none;
}

.nav__panel-links .nav__link,
.nav__panel-links .nav__lang {
  display: flex;
  align-items: center;
  min-block-size: 44px;
}

/* Mobile defaults: hide desktop link list + desktop lang switcher */
.nav__links { display: none; }
.nav__lang-wrap { display: none; }

/* Desktop layout: ≥768px — hide hamburger, show desktop links */
@media (min-width: 768px) {
  .nav__toggle { display: none; }
  /* Panel must never leak across breakpoints if hamburger was opened on mobile */
  .nav__panel { display: none !important; }
  .nav__links { display: flex; }
  .nav__lang-wrap { display: inline-flex; }
}

/* ============================================================
 * 2. FOOTER
 * ============================================================ */

.footer {
  background: var(--color-gray-100);
  padding-block: var(--space-7);
  border-block-start: 1px solid var(--color-border);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.footer__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__heading {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  /* Intentionally NOT uppercased — Hebrew has no case, transforming would break rendering. */
}

.footer__line {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.footer__link {
  color: var(--color-gray-700);
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

.footer__link:hover,
.footer__link:focus { text-decoration: underline; }

.footer__navlist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
}

.footer__lang {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--color-gray-700);
}

.footer__copyright {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  margin-block-start: var(--space-5);
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
 * 3. HERO
 * ============================================================ */

.hero {
  padding-block: var(--space-7);
  text-align: center;
}

.hero__heading {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.hero__slogan {
  font-size: var(--font-size-h2);
  color: var(--color-text-muted);
  margin-block-start: var(--space-4);
  margin-block-end: var(--space-4);
}

.hero__cta-row {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-block-start: var(--space-5);
}

@media (min-width: 768px) {
  .hero { padding-block: var(--space-9); }
}

/* ============================================================
 * 4. STATS STRIP
 * ============================================================ */

.stats-strip {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-5);
}

.stats-strip__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stats-strip__number {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-tight);
}

.stats-strip__label {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .stats-strip {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  /* Inline separator between items — logical property auto-flips for RTL */
  .stats-strip__item + .stats-strip__item {
    border-inline-start: 1px solid var(--color-border);
    padding-inline-start: var(--space-5);
    margin-inline-start: var(--space-5);
  }
}

/* ============================================================
 * 5. CARD + CARD GRID
 * ============================================================ */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding-block: var(--space-6);
  padding-inline-start: var(--space-6);
  padding-inline-end: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.card__heading {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.card__body {
  color: var(--color-text);
}

@media (min-width: 768px) {
  /* 4 cards in a clean 2×2 grid — equal widths, equal heights per row */
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
 * 6. BUTTON
 * ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding-block: var(--space-3);
  padding-inline-start: var(--space-6);
  padding-inline-end: var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover,
.btn--primary:focus { background: var(--color-primary-hover); }

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn--ghost:hover,
.btn--ghost:focus {
  background: var(--color-blue-100);
}

/* ============================================================
 * 7. SWATCH BLOCK — inline design alternates comparison
 *    (used in plan 02-06 skeleton bottom section)
 * ============================================================ */

.swatch-block {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding-block: var(--space-5);
  padding-inline-start: var(--space-5);
  padding-inline-end: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.swatch-block__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.swatch-block__palette {
  display: flex;
  gap: var(--space-2);
}

.swatch-block__swatch {
  display: inline-block;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.swatch-block__demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.swatch-block__demo-heading {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
}

.swatch-block__description {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.swatch-block-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .swatch-block-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
 * 8. PAGE PRIMITIVES — page-hero, section__heading, prose, media wrappers
 *    (Phase 3: shared by /he/{about,services,contact} pages)
 * ============================================================ */

.page-hero {
  padding-block: var(--space-7);
  text-align: center;
}

.page-hero__subheading {
  font-size: var(--font-size-h2);
  color: var(--color-text-muted);
  margin-block-start: var(--space-4);
  line-height: var(--line-height-base);
}

.section__heading {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
  margin-block-end: var(--space-5);
}

.prose {
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
  color: var(--color-text);
  max-inline-size: 70ch;
}

.prose + .prose { margin-block-start: var(--space-4); }

/* Modifier — strip the 70ch read-width cap so the paragraph spans the
   full container width. Use when a section's content should align with
   wide grids/cards beside or below it. */
.prose--wide { max-inline-size: none; }

/* Hero image wrapper (Home page hero) */
.hero__media {
  display: block;
  margin-block-end: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hero__media img {
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
  max-block-size: 420px;
}

/* Facility image (About page) */
.facility__media {
  display: block;
  margin-block-end: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.facility__media img {
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
  max-block-size: 360px;
}

/* ============================================================
 * 9. SPEC BLOCK — inline spec callouts (Home differentiator cards, Services capabilities)
 * ============================================================ */

.spec-block {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3);
  padding-inline-start: var(--space-4);
  padding-inline-end: var(--space-4);
  background: var(--color-blue-100);
  border-radius: var(--radius-md);
  font-size: var(--font-size-small);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  list-style: none;
}

.spec-block__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Dotted separator between spec-block items (auto-flips via logical property) */
.spec-block__item + .spec-block__item::before {
  content: "·";
  color: var(--color-blue-600);
  margin-inline-end: var(--space-2);
  font-weight: var(--font-weight-bold);
}

/* When a single .spec-block paragraph is used directly inside a card (Home differentiators),
 * the styling above still applies because the class IS the block. The .card__spec class is
 * a semantic alias on the same element. */
.card__spec {
  display: block;
  /* Push spec block to the bottom of the card so siblings in a row align. */
  margin-block-start: auto;
}

/* ============================================================
 * 10. CONTACT TEASER (Home page contact section)
 * ============================================================ */

.contact-teaser__phone {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  margin-block-end: var(--space-4);
}

/* Extra breathing room between the teaser body copy and the primary CTA. */
.contact-teaser__cta-row {
  margin-block-start: var(--space-5);
}

.contact-teaser__phone-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.contact-teaser__phone-link {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: 0; /* Hebrew is a connected script but phone is LTR digits — keep clean */
}

.contact-teaser__phone-link:hover,
.contact-teaser__phone-link:focus {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* ============================================================
 * 11. TIMELINE — About page founding history (year heading + body)
 *    Per D-11: vertical list, stacks on mobile, reads scannably.
 * ============================================================ */

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-inline-start: 48px;  /* room for rail + dots */
  list-style: none;
  margin-inline: 0;
}

/* The rail — vertical line connecting all milestones */
.timeline::before {
  content: '';
  position: absolute;
  inset-inline-start: 23px;
  inset-block-start: 12px;
  inset-block-end: 12px;
  inline-size: 3px;
  background: var(--color-primary);
  opacity: 0.35;
  border-radius: 2px;
}

.timeline__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-4);
  padding-inline-start: var(--space-5);
  padding-inline-end: var(--space-5);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* The dot — a station on the rail, beside each item */
.timeline__item::before {
  content: '';
  position: absolute;
  inset-inline-start: -32px;
  inset-block-start: var(--space-5);
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-bg);
  z-index: 1;
  transition: background var(--transition-base), transform var(--transition-base);
}

.timeline__item:hover::before {
  background: var(--color-accent);
  transform: scale(1.15);
}

.timeline__year {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-tight);
}

.timeline__body {
  color: var(--color-text);
  line-height: var(--line-height-base);
  max-inline-size: 65ch;
}

@media (min-width: 768px) {
  .timeline__item {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-5);
  }
  .timeline__year {
    flex: 0 0 auto;
    min-inline-size: 5rem;
  }
  .timeline__body { flex: 1 1 auto; }
}

/* ============================================================
 * 12. MANAGER GRID + MANAGER CARD — About page ABOUT-07
 *    Per D-07: 4-up desktop / 2x2 tablet / 1col mobile
 * ============================================================ */

.manager-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: var(--space-5);
}

.manager-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-5);
  padding-inline-start: var(--space-5);
  padding-inline-end: var(--space-5);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.manager-card__portrait {
  display: block;
  inline-size: 120px;
  block-size: 120px;
  margin-inline-start: auto;
  margin-inline-end: auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-blue-100);
}

.manager-card__portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.manager-card__name {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
}

.manager-card__role {
  font-size: var(--font-size-body);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.manager-card__tenure {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .manager-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .manager-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
 * 13. CERT BLOCK — About page certifications (ISO 9001 + SGS Swiss + extra)
 * ============================================================ */

.cert-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-5);
  padding-inline-start: var(--space-5);
  padding-inline-end: var(--space-5);
  background: var(--color-blue-100);
  border-radius: var(--radius-lg);
  border-inline-start: 4px solid var(--color-primary);
}

.cert-block__primary {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-tight);
}

.cert-block__secondary {
  font-size: var(--font-size-body);
  color: var(--color-gray-700);
  font-weight: var(--font-weight-medium);
}

.cert-block__extra {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* ============================================================
 * 14. CAPABILITY SECTION — Services page (milling / turning / assembly / qc)
 *    Each section has heading + optional image + narrative + inline spec block.
 * ============================================================ */

.capability-section .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.capability-section__media {
  display: block;
  margin-block-end: var(--space-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.capability-section__media img {
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
  max-block-size: 320px;
}

.capability-section__body {
  max-inline-size: 70ch;
}

@media (min-width: 1024px) {
  .capability-section .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
  .capability-section .section__heading {
    grid-column: 1 / -1;
  }
  .capability-section__media { margin-block-end: 0; }
  .capability-section .spec-block {
    grid-column: 1 / -1;
  }
}

/* ============================================================
 * 15. MATERIALS CHIP ROW — Services SVCS-05 (7 chips, 3 specialty)
 *    Flex with wrap so chips reflow on mobile.
 * ============================================================ */

.materials__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: var(--space-4);
}

.materials__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline-start: var(--space-4);
  padding-inline-end: var(--space-4);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px; /* pill */
  font-size: var(--font-size-body);
  color: var(--color-text);
}

.materials__chip--specialty {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
}

.materials__name { line-height: 1; }

/* Legend below the materials row — explains the highlighted style */
.materials__legend {
  margin-block-start: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.materials__label {
  display: inline-flex;
  align-items: center;
  padding-block: 2px;
  padding-inline-start: var(--space-2);
  padding-inline-end: var(--space-2);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

/* ============================================================
 * 16. TOLERANCE CALLOUT — Services SVCS-06
 * ============================================================ */

.tolerance-callout {
  display: inline-block;
  padding-block: var(--space-4);
  padding-inline-start: var(--space-6);
  padding-inline-end: var(--space-6);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  margin-block-end: var(--space-4);
}

/* ============================================================
 * 17. GALLERY GRID — Services SVCS-09 finished-parts gallery
 *    1col mobile → 2col tablet → 3col desktop (4th wraps cleanly)
 * ============================================================ */

.gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: var(--space-5);
}

.gallery__item {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-gray-100);
}

.gallery__item img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
 * 18. CONTACT GRID + FORM — Contact page CONT-01..CONT-08
 *    Mobile: form on top, info below.
 *    Desktop ≥1024px: form 60% / info 40% side-by-side per D-13.
 * ============================================================ */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-block-start: var(--space-5);
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-7);
    align-items: start;
  }
  /* Form removed — info aside centered/full-width when it's the only child. */
  .contact-grid--info-only {
    grid-template-columns: minmax(0, 640px);
    justify-content: center;
  }
}

/* --- Contact form --- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-6);
  padding-inline-start: var(--space-5);
  padding-inline-end: var(--space-5);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-form__label {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.contact-form__required {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  margin-inline-start: var(--space-1);
}

.contact-form__input,
.contact-form__textarea {
  inline-size: 100%;
  padding-block: var(--space-3);
  padding-inline-start: var(--space-3);
  padding-inline-end: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-body);
  font-family: inherit;
  line-height: var(--line-height-base);
}

.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  border-color: var(--color-primary);
}

.contact-form__textarea {
  resize: vertical;
  min-block-size: 8rem;
}

.contact-form__disabled-note {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  font-style: italic;
  padding-block: var(--space-3);
  padding-inline-start: var(--space-4);
  padding-inline-end: var(--space-4);
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  border-inline-start: 3px solid var(--color-gray-300);
}

.contact-form__submit {
  align-self: flex-start;
}

/* Disabled submit button — explicit visual state */
.contact-form__submit:disabled,
.contact-form__submit[disabled] {
  background: var(--color-gray-300);
  color: var(--color-gray-700);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Two-column layout for short fields on desktop (name+company, phone+email) */
@media (min-width: 768px) {
  .contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-4);
    row-gap: var(--space-4);
  }
  /* Heading + textarea + note + submit span both columns */
  .contact-form #contact-form-heading,
  .contact-form > h2,
  .contact-form > .contact-form__disabled-note,
  .contact-form > .contact-form__submit {
    grid-column: 1 / -1;
  }
  /* The 5th field (message) is a textarea — span both columns */
  .contact-form__field:has(.contact-form__textarea) {
    grid-column: 1 / -1;
  }
}

/* --- Contact info aside --- */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: var(--space-5);
  padding-inline-start: var(--space-5);
  padding-inline-end: var(--space-5);
  background: var(--color-blue-100);
  border-radius: var(--radius-lg);
}

.contact-info__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-info__heading {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-tight);
}

.contact-info__address {
  color: var(--color-text);
  line-height: var(--line-height-base);
}

.contact-info__pobox {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.contact-info__phone-link,
.contact-info__email-link {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
}

.contact-info__phone-link:hover,
.contact-info__phone-link:focus,
.contact-info__email-link:hover,
.contact-info__email-link:focus {
  text-decoration: underline;
  color: var(--color-primary-hover);
}

.contact-info__hours-todo {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ============================================================
 * 19. MAP STATIC + CTA LINKS — Contact page CONT-05
 *    Static map image + Waze + Google Maps deep-link buttons.
 * ============================================================ */

.map-static {
  padding-block: var(--space-7);
}

.map-static__image {
  display: block;
  margin-block-end: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.map-static__image img {
  inline-size: 100%;
  block-size: auto;
  object-fit: cover;
  max-block-size: 480px;
}

.cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding-inline-start: 0;
  justify-content: center;
}

.cta-links__btn {
  /* Inherits .btn + .btn--ghost token sizing; adds inline-axis flex behavior */
  flex: 0 1 auto;
}


/* ============================================================
 * 21. FACILITY-CERT — combined facility + certifications section
 *    Compact About page layout: image alongside text on desktop.
 * ============================================================ */

.facility-cert {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: stretch;
}

/* Picture container fills the grid cell; image fills the container.
   Text column dictates row height — image follows it via inset:0. */
.facility-cert__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-block-size: 220px; /* mobile floor so image stays visible when stacked */
}

.facility-cert__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.facility-cert__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.facility-cert__cert {
  margin-block-start: var(--space-3);
  padding-block: var(--space-4);
  padding-inline: var(--space-4);
  background: var(--color-bg-alt);
  border-inline-start: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.facility-cert__cert-heading {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-block-end: var(--space-2);
}

.facility-cert__cert-extra {
  margin-block-start: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* Full-width cert variant — sits below the text+image row */
.facility-cert__cert--full {
  margin-block-start: var(--space-6);
  padding-block: var(--space-5);
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .facility-cert:not(.facility-cert--stacked) {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: stretch;
  }
  /* Desktop: image floor lifted so it fills the taller text column cleanly */
  .facility-cert:not(.facility-cert--stacked) .facility-cert__media {
    min-block-size: 0;
  }
}

/* ============================================================
 * 22. CAPABILITIES GRID — Services page 2×2 capability cards
 *    Replaces 4 full-bleed capability sections (Tal El style).
 *    Mobile: 1 col. Tablet+: 2 col. Thumbnails much smaller
 *    than old capability-section images.
 * ============================================================ */

.capabilities-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: var(--space-5);
}

.capability-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.capability-card__media {
  display: block;
  background: var(--color-gray-100);
}

.capability-card__media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 380px;
  object-fit: cover;
}

.capability-card--no-media {
  /* Assembly + QC have no image — give body normal padding-block start */
}

.capability-card__body {
  padding-block: var(--space-5);
  padding-inline: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Fill the card so the spec block can pin to the bottom. */
  flex: 1;
}

.capability-card__body .spec-block {
  /* Push spec block to the bottom of the card body so siblings in a row align. */
  margin-block-start: auto;
}

.capability-card__heading {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-tight);
}

.capability-card__text {
  color: var(--color-text);
  line-height: var(--line-height-base);
}

@media (min-width: 768px) {
  .capabilities-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  .capability-card__media img {
    max-block-size: 340px;
  }
}

/* Accessibility-statement page */
.a11y-content h3 {
  margin-block-start: var(--space-6);
  margin-block-end: var(--space-3);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}
.a11y-content h3:first-child {
  margin-block-start: 0;
}
.a11y-content ul {
  padding-inline-start: var(--space-6);
  margin-block-end: var(--space-4);
}
.a11y-content li {
  margin-block-end: var(--space-2);
}
.a11y-coordinator {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-block: var(--space-5);
}
.a11y-coordinator h4 {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  margin-block-end: var(--space-3);
}
.a11y-coordinator__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.a11y-coordinator__list li {
  margin-block-end: var(--space-2);
}

/* Facility video block on the About page */
.facility-video {
  margin-block-start: var(--space-7);
}
.facility-video__heading {
  font-size: var(--font-size-h3);
  color: var(--color-primary);
  margin-block-end: var(--space-4);
  font-weight: var(--font-weight-bold);
}
.facility-video__player {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-lg);
  background: var(--color-gray-900);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ============================================================
 * 23. SERVICES MATERIALS + TOLERANCE — combined section
 *    Materials chip row alongside tolerance callout on desktop.
 * ============================================================ */

.services-materials-tolerance {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

.services-tolerance-aside {
  padding-block: var(--space-5);
  padding-inline: var(--space-5);
  background: var(--color-bg-alt);
  border-inline-start: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.services-tolerance-aside__heading {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-block-end: var(--space-3);
}

.services-tolerance-aside__body {
  margin-block-start: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-base);
}

/* Vertical stack of compact info cards — sits beside the materials column
   on the inline-end (visual left in RTL) at desktop. */
.services-info-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Compact card variant for the info-stack — smaller fonts, tighter padding */
.services-info-stack .services-tolerance-aside {
  padding-block: var(--space-4);
  padding-inline: var(--space-4);
}

.services-info-stack .services-tolerance-aside__heading {
  font-size: var(--font-size-body);
  margin-block-end: var(--space-2);
}

.services-info-stack .tolerance-callout {
  font-size: var(--font-size-h2);
  padding-block: var(--space-3);
  padding-inline-start: var(--space-4);
  padding-inline-end: var(--space-4);
  margin-block-end: 0;
}

@media (min-width: 1024px) {
  .services-materials-tolerance {
    grid-template-columns: 2fr 1fr;
  }
}

/* ============================================================
 * 24. HIGHLIGHT PANEL — emphasized content block
 *    Used for Home Vision and About Story sections per UAT.
 *    Full container width (no .prose width cap), white card on
 *    section--alt gray bg, primary-color accent on inline-start.
 * ============================================================ */

.highlight-panel {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding-block: var(--space-6);
  padding-inline: var(--space-6);
}

.highlight-panel__body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
  color: var(--color-text);
}

.highlight-panel__body + .highlight-panel__body {
  margin-block-start: var(--space-4);
}

/* Push timeline below the panel with a touch of breathing room */
.highlight-panel + .timeline {
  margin-block-start: var(--space-6);
}

/* Stacked facility variant — text+cert on top, image as a wide banner below.
   Single column at every viewport; image becomes a 16:9-ish banner. */
.facility-cert--stacked {
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.facility-cert__media--banner img {
  max-block-size: 420px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (min-width: 768px) {
  .facility-cert__media--banner img {
    max-block-size: 480px;
  }
}

/* What-we-do CTA — centered link beneath the home services teaser grid */
.what-we-do__cta {
  text-align: center;
  margin-block-start: var(--space-5);
}

/* ============================================================
 * 26. MODERNIZATION — hover lift, image zoom, scroll reveal
 *    Subtle motion that signals interactivity without distracting.
 *    All animations respect prefers-reduced-motion.
 * ============================================================ */

/* -- Card hover lift (applies to all card-shaped components + timeline) -- */
.card,
.capability-card,
.manager-card,
.gallery__item,
.timeline__item {
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  box-shadow: var(--shadow-card);
  will-change: transform;
}

.card:hover,
.capability-card:hover,
.manager-card:hover,
.gallery__item:hover,
.timeline__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* Timeline year picks up the accent on hover — adds a touch of warmth */
.timeline__item:hover .timeline__year {
  color: var(--color-accent);
}

/* -- Image zoom inside picture wrappers (cards + gallery + facility banner) -- */
.capability-card__media,
.gallery__item,
.facility-cert__media,
.hero__media {
  overflow: hidden;
}

.capability-card__media img,
.gallery__item img,
.facility-cert__media img,
.hero__media img {
  transition: transform var(--transition-slow);
}

.capability-card:hover .capability-card__media img,
.gallery__item:hover img {
  transform: scale(1.05);
}

/* -- Scroll-reveal — auto-applies to every .section EXCEPT heroes.
      Element starts hidden+offset; reveal.js adds .is-visible on intersection. -- */
.section:not(.hero):not(.page-hero) {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.section:not(.hero):not(.page-hero).is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -- Accent color: active nav underline + link hover -- */
.nav__link--active,
.nav__link[aria-current="page"] {
  color: var(--color-accent);
  border-block-end-color: var(--color-accent);
}

a:not(.btn):not(.nav__link):not(.nav__lang):not(.nav__logo):not(.footer__link):not(.footer__lang):hover {
  color: var(--color-accent);
}

/* -- Respect user motion preferences -- */
@media (prefers-reduced-motion: reduce) {
  .card,
  .capability-card,
  .manager-card,
  .gallery__item,
  .timeline__item,
  .capability-card__media img,
  .gallery__item img,
  .facility-cert__media img,
  .hero__media img,
  .section:not(.hero):not(.page-hero) {
    transition: none !important;
    transform: none !important;
  }
  .section:not(.hero):not(.page-hero) { opacity: 1; }
}

/* ============================================================
 * 27. IMMERSIVE HERO — full-bleed image + gradient overlay + white text
 *    Modern landing hero treatment. Image is decoration (behind content),
 *    content sits centered with high-contrast white type.
 * ============================================================ */

.hero--immersive {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-8);
  text-align: center;
}

.hero--immersive .hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}

.hero--immersive .hero__media img,
.hero--immersive .hero__media video,
.hero--immersive .hero__video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* Video specifically — pull back a little so more of the frame is visible.
   `contain` shows the full frame; the hero has a dark background that
   softens the letterbox effect on the sides/top-bottom.
   `brightness()` lifts the video without weakening the overlay that
   guarantees text contrast. */
.hero--immersive .hero__video {
  object-fit: contain;
  background: var(--color-blue-900);
  filter: brightness(1.2);
}

/* Layered gradient: darker at top + bottom edges, slightly lighter in the
   middle band where the headline sits. Improves text contrast over any
   focal point in the photo. */
.hero--immersive .hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(15, 23, 42, 0.78) 0%,
      rgba(15, 23, 42, 0.55) 45%,
      rgba(15, 23, 42, 0.72) 100%);
}

.hero--immersive .hero__content {
  position: relative;
  color: var(--color-white);
}

.hero--immersive .hero__heading {
  color: var(--color-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero--immersive .hero__slogan {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* Ghost button on dark hero — invert from gray border to white */
.hero--immersive .btn--ghost {
  border-color: var(--color-white);
  color: var(--color-white);
  background: transparent;
}

.hero--immersive .btn--ghost:hover,
.hero--immersive .btn--ghost:focus {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .hero--immersive {
    padding-block: var(--space-9);
  }
}

/* ============================================================
 * 28. ABOUT PAGE — banner-strip + brand-sidebar
 *    Static visual upgrades (no motion). Aside is for ≥1440px only.
 * ============================================================ */

/* Banner strip — full-bleed image between sections */
.banner-strip {
  inline-size: 100%;
  max-block-size: 240px;
  overflow: hidden;
  margin: 0;
}
.banner-strip picture { display: block; }
.banner-strip img {
  inline-size: 100%;
  block-size: 240px;
  object-fit: cover;
  display: block;
}
@media (min-width: 768px) {
  .banner-strip,
  .banner-strip img {
    max-block-size: 320px;
    block-size: 320px;
  }
}


/* 3-card grid variant — used for the home page pillar cards
   Mobile 1 col → tablet+ 3 cols (clean single row, no orphan) */
@media (min-width: 768px) {
  .card-grid--three { grid-template-columns: repeat(3, 1fr); }
}

/* Sub-heading inside a section — sits between the main h2 and a sub-group */
.section__subheading {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
  margin-block-start: var(--space-7);
  margin-block-end: var(--space-4);
}