:root {
  color-scheme: light;
  font-family: Arial, "Noto Sans Hebrew", sans-serif;
  color: #14243c;
  background: #eff2f6;
  line-height: 1.65;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { min-width: 280px; margin: 0; }

a { color: inherit; }

a:hover { color: #9b552c; }

button, input, textarea { font: inherit; }

:focus-visible {
  outline: 3px solid #a65322;
  outline-offset: 4px;
  border-radius: 4px;
}

[hidden] { display: none !important; }

.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem max(1.25rem, calc((100vw - 72rem) / 2));
  background: #fffdf8;
  border-bottom: 1px solid #e4d9c9;
  box-shadow: 0 3px 18px rgb(35 52 46 / 5%);
}

.brand {
  flex: none;
  color: #275142;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.03em;
  text-decoration: none;
}

nav[aria-label="ניווט ראשי"] {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.75rem);
  font-weight: 600;
}

nav a { text-decoration: none; }

.menu-group { position: relative; }

.menu-button {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 600;
  cursor: pointer;
}

.menu-button::after {
  content: "";
  width: .42rem;
  height: .42rem;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.12rem) rotate(45deg);
  transition: transform .2s ease;
}

.menu-button[aria-expanded="true"]::after { transform: translateY(.1rem) rotate(225deg); }

.menu-button:hover { color: #9b552c; }

.services-menu {
  position: absolute;
  inset-block-start: calc(100% + .6rem);
  inset-inline-start: 0;
  width: max-content;
  min-width: 15rem;
  max-width: min(21rem, calc(100vw - 2.5rem));
  margin: 0;
  padding: .45rem;
  list-style: none;
  background: #fffdf8;
  border: 1px solid #e4d9c9;
  border-radius: .9rem;
  box-shadow: 0 16px 40px rgb(35 52 46 / 15%);
}

.services-menu a {
  display: block;
  padding: .55rem .8rem;
  border-radius: .5rem;
}

.services-menu a:hover,
.services-menu a:focus-visible { background: #f5e9d9; }

main {
  width: min(100% - 2.5rem, 72rem);
  min-height: 55vh;
  margin: clamp(2rem, 5vw, 4.5rem) auto;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: #fffdf8;
  border: 1px solid #e8ddcd;
  border-radius: 1.5rem;
  box-shadow: 0 12px 40px rgb(35 52 46 / 6%);
}

h1 {
  max-width: 18ch;
  margin: 0 0 1rem;
  color: #275142;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.2;
  letter-spacing: -.035em;
}

main p { max-width: 65ch; font-size: clamp(1rem, 1.6vw, 1.2rem); }

main img { display: block; width: 100%; height: auto; border-radius: 1rem; }

main section + section { margin-block-start: 3.5rem; }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; }
.hero-photo { max-height: 29rem; object-fit: cover; object-position: 50% 57%; }
.eyebrow { color: #9b552c; font-weight: 700; }
.lead { font-size: 1.25rem; }
.section-title { margin: 0 0 1.5rem; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.3; color: #275142; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-card, .solution-card, .review { margin: 0; padding: 1.25rem; background: #f7f3ea; border: 1px solid #e4d9c9; border-radius: 1rem; }
.service-card h3, .solution-card h2 { font-size: 1.3rem; line-height: 1.35; margin: 1rem 0 .5rem; }
.service-card p, .solution-card p, .review p { font-size: 1.05rem; margin: .5rem 0; }
.service-card img { height: 12rem; object-fit: cover; object-position: 50% 57%; }
.solution-card img { height: 19rem; object-fit: contain; background: #eee8dc; }
.card-number { display: flex; align-items: center; height: 12rem; font-size: 4rem; font-weight: 700; color: #b79366; }
.contact-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-block: 1.5rem; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 3rem; min-width: 8.5rem; padding: .7rem 1.3rem; border-radius: .7rem; background: #275142; color: #fffdf8; font-weight: 700; text-decoration: none; }
.button:hover { background: #9b552c; color: #fffdf8; }
.contact-number { margin-block: 1.25rem 0; font-size: 1.5rem; font-weight: 700; }
.contact-number a { color: #275142; }
.contact-draft { max-width: 38rem; margin-block-start: 3.5rem; }
.contact-draft form { display: grid; gap: .9rem; }
.contact-draft label { font-weight: 700; }
.contact-draft textarea { width: 100%; min-height: 8rem; padding: .85rem; color: inherit; background: #fff; border: 1px solid #8c9e92; border-radius: .7rem; resize: vertical; }
.contact-draft .button { justify-self: start; border: 0; cursor: pointer; }
.lead-section { max-width: 40rem; margin-block: 2.5rem; padding: clamp(1rem, 3vw, 2rem); background: #eff5f7; border: 1px solid #d5dfe8; border-radius: 1rem; }
.lead-section form { display: grid; gap: .7rem; }
.lead-section label { font-weight: 700; }
.lead-section input, .lead-section textarea { width: 100%; min-width: 0; padding: .85rem; border: 1px solid #7a8b9c; border-radius: .6rem; background: #fff; color: #14243c; }
.lead-section textarea { resize: vertical; }
.lead-section .button { justify-self: start; border: 0; cursor: pointer; }
.lead-section .button:disabled { background: #536578; color: #fff; cursor: not-allowed; }
.lead-section .form-note { font-size: .9rem; line-height: 1.7; }
.form-status { min-height: 1.7em; margin: 0; }
.lead-honeypot { display: none; }
.contact-prompt { margin-block-start: 3rem; padding: 2rem; background: #efe4d2; border-radius: 1rem; }
.contact-prompt h2 { margin-top: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.photo-grid figure { margin: 0; }
.photo-grid img { height: 22rem; object-fit: contain; background: #eee8dc; }
figcaption { padding-block: .7rem; font-size: .95rem; }
blockquote { margin: 0; }
.review { display: flex; flex-direction: column; justify-content: space-between; }
.review figcaption { margin-top: 1rem; }
.text-section { margin-block-start: 2.5rem; }
.cable-list { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; }
.cable-list dt { font-weight: 700; }
.cable-list dd { margin: 0; }

footer {
  padding: 1.5rem max(1.25rem, calc((100vw - 72rem) / 2));
  color: #f7f3ea;
  background: #275142;
}

footer p { margin: 0; }
footer a:hover { color: #fffdf8; }
footer a:focus-visible { outline-color: #fffdf8; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-photo { height: 20rem; }
  .two-columns, .photo-grid { grid-template-columns: 1fr; }
  .contact-prompt { padding: 1.25rem; }
  .cable-list { grid-template-columns: 1fr; gap: .5rem; }
  .cable-list dd { margin-bottom: 1rem; }
  .site-header { align-items: flex-start; flex-direction: column; gap: .7rem; }

  nav[aria-label="ניווט ראשי"] {
    flex-wrap: wrap;
    gap: .5rem 1.1rem;
    width: 100%;
    font-size: .95rem;
  }

  .services-menu { max-width: min(21rem, calc(100vw - 2.5rem)); }

  main { width: min(100% - 1.5rem, 72rem); margin: 1rem auto 2rem; padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .menu-button::after { transition: none; }
}

/* Navy/teal design direction; shared across the seven Hebrew RTL pages. */
:root { color: #14243c; background: #eff2f6; }
a:hover { color: #006964; }
:focus-visible { outline-color: #008a7d; }
.site-header { align-items: center; justify-content: flex-start; flex-direction: row; gap: 1.5rem; padding: 1.1rem max(1.25rem, calc((100vw - 76rem) / 2)); background: #111f34; color: #fff; border-bottom: 1px solid #2e425a; }
.brand { display: flex; align-items: center; gap: .7rem; color: #fff; line-height: 1.3; }
.brand:hover { color: #fff; }
.brand-tagline { display: block; font-size: .75rem; font-weight: 400; color: #bfccd9; }
.brand-mark { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border: 2px solid #4ce3ce; border-radius: .8rem .8rem .8rem .2rem; }
.brand-mark::after { content: 'ד'; color: #4ce3ce; font-size: 1.8rem; }
.brand-mark::before { content: ''; position: absolute; width: .55rem; height: .55rem; border-top: 2px solid #4ce3ce; border-right: 2px solid #4ce3ce; transform: translateY(-.9rem) rotate(-45deg); }
nav[aria-label="ניווט ראשי"] { font-size: .95rem; gap: clamp(.7rem, 1.5vw, 1.4rem); }
.site-header nav > a:hover, .menu-button:hover { color: #4ce3ce; }
.site-header :focus-visible { outline-color: #4ce3ce; }
.header-phone { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.75rem; height: 2.75rem; margin-inline-start: auto; border: 1px solid #4ce3ce; border-radius: 50%; color: #fff; text-decoration: none; }
.header-phone svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.header-phone:hover { color: #4ce3ce; }
.navigation-toggle { display: none; color: #fff; background: transparent; border: 1px solid #5a718b; border-radius: .6rem; padding: .4rem .7rem; cursor: pointer; }
.navigation-icon::before { content: '☰'; margin-inline-end: .5rem; }
.services-menu { inset-block-start: 100%; background: #fff; color: #14243c; border-color: #dbe3eb; }
.services-menu a:hover, .services-menu a:focus-visible { background: #e1f5f1; color: #006964; }
.services-menu :focus-visible { outline-color: #006964; }
main { width: min(100% - 3rem, 76rem); background: #fff; border: 0; box-shadow: none; }
h1, .section-title { color: #14243c; }
.eyebrow { color: #006964; }
.home-page main { width: 100%; margin: 0; padding: 0; border-radius: 0; background: transparent; }
.home-page main > section:not(.hero), .home-page main > aside { width: min(100% - 3rem, 76rem); margin-inline: auto; }
.home-page main > section:not(.hero) { padding-block: 1.5rem; }
.hero { color: #fff; background: #111f34; padding: 4.5rem max(1.5rem, calc((100vw - 76rem) / 2)); border-bottom: 5px solid #00bfa6; overflow: hidden; }
.hero h1 { color: #fff; font-size: clamp(3.5rem, 6vw, 5.6rem); }
.hero .lead { color: #dbe6ec; }
.hero .eyebrow { color: #4ce3ce; }
.hero-photo { height: 29rem; object-fit: cover; object-position: center; }
.hero-visual { position: relative; }
.hero-detail { position: absolute; width: 38%; height: 10rem; bottom: -1.5rem; inset-inline-end: -1rem; object-fit: cover; border: 6px solid #111f34; box-shadow: 0 8px 30px #0004; }
.service-card, .solution-card, .review { background: #eff2f6; border-color: #dbe3eb; }
.service-card, .review { background: #fff; }
.home-gallery { margin-block: 3rem; }
.home-gallery .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-gallery .gallery-grid img { height: 20rem; }
@media (max-width: 1000px) { .home-gallery .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .home-gallery .gallery-grid { grid-template-columns: 1fr; } }
@media (min-width: 1200px) {
 #services .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
 #services .service-card { padding: 1rem; }
 #services .service-card img, #services .card-number { height: 10rem; }
}
.service-card h3 a, .section-title a { text-decoration: none; }
.solution-card img, .photo-grid img { background: #e1e7ed; }
.card-number { justify-content: center; background: linear-gradient(135deg, #14243c, #006964); border-radius: 1rem; color: #4ce3ce; }
.button { background: #006964; color: #fff; text-decoration: none; border-radius: 2rem; font-weight: 700; }
.button:hover { color: #fff; background: #004f4b; }
.hero .button { color: #111f34; background: #4ce3ce; }
.hero .button:hover { background: #9df4e8; }
.hero .button:focus-visible { outline-color: #fff; }
.contact-prompt { background: #e1f5f1; }
.review { border-top: 3px solid #006964; }
.cable-list { padding: 1.5rem; border-inline-start: 4px solid #006964; background: #eff2f6; border-radius: .5rem; }
.intercom-diagram { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 11rem; padding: 1.5rem; margin-block: 2rem; background: #111f34; color: #fff; border-radius: 1rem; }
.intercom-diagram span { padding: 1rem; border: 1px solid #4ce3ce; border-radius: .6rem; text-align: center; }
footer { background: #111f34; color: #dbe6ec; }
@media (min-width: 1200px) {
 .home-page #services .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .home-page .service-card { padding: 1rem; }
 .home-page .service-card img, .home-page .card-number { height: 10rem; }
}

/* Homepage refresh: quiet architectural background and clear contact paths. */
.home-page .hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 42rem; padding-block: 5rem; }
.hero-backdrop { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0; }
.hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to left, rgb(10 24 42 / 96%) 0%, rgb(10 24 42 / 88%) 32%, rgb(10 24 42 / 42%) 68%, rgb(10 24 42 / 12%)); }
.hero-copy { max-width: 40rem; }
.hero-copy h1 { font-size: clamp(3rem, 5.2vw, 4.8rem); line-height: 1.13; letter-spacing: -.035em; }
.hero-copy h1 span { color: #4ce3ce; }
.hero-copy .lead { max-width: 40ch; line-height: 1.8; }
.hero .button-outline { border: 2px solid #4ce3ce; background: #111f34; color: #fff; }
.hero .button-outline:hover { color: #111f34; background: #9df4e8; }
.hero-credit { position: absolute; bottom: .8rem; left: 1.5rem; color: #fff; background: rgb(10 24 42 / 80%); padding: .15rem .5rem; border-radius: .3rem; font-size: .75rem; }
.home-page #services { padding-block: 4rem 2rem; }
.home-page #services .service-card { display: flex; flex-direction: column; padding: 1.25rem; }
.home-page #services .service-card img { height: 14rem; }
.service-more { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; margin-block-start: auto; padding-block-start: 1rem; color: #006964; font-weight: 700; text-decoration: none; }
.service-more:hover { text-decoration: underline; }
.work-process { border-block: 1px solid #d5dfe8; }
.process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; list-style: none; padding: 0; margin: 2rem 0; }
.process-grid li { border-inline-start: 2px solid #008a7d; padding-inline-start: 1.5rem; }
.step-number { color: #006964; font-size: 2rem; font-weight: 700; }
.process-grid h3 { margin: .5rem 0; font-size: 1.3rem; }
.process-grid p { margin: 0; font-size: 1.05rem; }
.contact-dock { position: fixed; z-index: 5; bottom: 1.5rem; left: 1.5rem; display: flex; border-radius: 2rem; box-shadow: 0 4px 20px #0003; }
.contact-dock a { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.5rem; padding: .8rem 1.2rem; text-decoration: none; font-weight: 700; }
.contact-dock .dock-call { display: none; }
.dock-whatsapp { color: #fff; background: #006964; border: 1px solid #99e7d9; border-radius: 2rem; }
.dock-whatsapp:hover { color: #fff; background: #004f4b; }
.contact-dock svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
footer { padding-bottom: 6rem; }
@media (max-width: 700px) {
 .home-page .hero { min-height: 38rem; padding: 3rem 1.5rem 4rem; }
 .hero::before { background: linear-gradient(to left, rgb(10 24 42 / 94%), rgb(10 24 42 / 66%)); }
 .hero-backdrop { object-position: 35% center; }
 .hero-copy h1 { font-size: clamp(2.7rem, 10vw, 3.5rem); }
 .hero .contact-actions { gap: .65rem; }
 .hero .button { min-width: 7.5rem; }
 .process-grid { grid-template-columns: 1fr; gap: 1.5rem; }
 .contact-dock { right: 0; left: 0; bottom: 0; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); background: #111f34; }
 .contact-dock a { flex: 1; min-height: 3.5rem; border: 0; border-radius: 0; }
 .contact-dock .dock-call { display: flex; color: #fff; background: #111f34; }
 .dock-call:hover { background: #243b55; }
}
footer a:hover { color: #fff; }
@media (max-width: 1000px) {
 .site-header { flex-wrap: wrap; padding: 1rem 1.25rem; }
 .navigation-toggle { display: block; }
 .site-navigation { order: 4; }
 nav[aria-label="ניווט ראשי"] { width: 100%; align-items: stretch; flex-direction: column; gap: .3rem; }
 nav[aria-label="ניווט ראשי"] > a, .menu-button { padding: .65rem .5rem; }
 .header-phone { margin-inline-start: auto; }
 .services-menu { position: static; width: 100%; max-width: 100%; }
 .hero { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.5rem 3.5rem; }
 .hero-photo { height: 23rem; }
 .hero-detail { height: 8rem; inset-inline-end: 0; }
 .hero h1 { font-size: 3.3rem; }
 .two-columns, .photo-grid { grid-template-columns: 1fr; }
 .home-gallery .gallery-grid { grid-template-columns: 1fr; }
 main { width: calc(100% - 1.5rem); margin: 1rem auto 2rem; padding: 1.5rem; }
 .home-page main > section:not(.hero), .home-page main > aside { width: calc(100% - 2.5rem); }
 .intercom-diagram { flex-wrap: wrap; }
}