/* ==========================================================
   עמנואל פתרונות אינסטלציה — emanuelg.com
   Design system v3 · technical working surfaces, not boutique cream.
   Deliberately avoids the cream + serif + terracotta combination that
   generated sites default to. Every pair checked against WCAG AA.
   ========================================================== */

:root {
  --paper:          #f2f4f5;   /* cool working surface */
  --paper-2:        #e7eaec;   /* recessed panel */
  --card:           #ffffff;
  --line:           #d3d9dc;   /* hairline */
  --ink:            #0d1117;   /* text and dark bands */
  --ink-2:          #161c23;
  --muted:          #5a636b;   /* AA on paper, 5.62:1 */
  --muted-dark:     #9aa5ad;   /* muted on ink */
  --petrol:         #0e5560;   /* primary structural accent, 7.56:1 */
  --petrol-bright:  #2a8fa0;   /* accent on dark surfaces */
  --petrol-soft:    #dfeaec;   /* petrol wash */
  --rust:           #b5502a;   /* secondary, used sparingly, 4.61:1 */
  --rust-soft:      #f6e6df;
  --wa:             #25d366;
  --radius:         5px;
  --radius-lg:      8px;
  --shadow-sm:      0 1px 0 var(--line);
  --shadow-lg:      0 18px 40px -24px rgba(13, 17, 23, .45);
  /* Type. Rubik carries the reading, Heebo carries structure.
     IBM Plex Mono has NO Hebrew glyphs, so it is for figures and Latin only
     and Heebo sits behind it in the stack to catch any Hebrew character. */
  --f-display: "Heebo", "Rubik", system-ui, sans-serif;
  --f-body:    "Rubik", "Heebo", "Segoe UI", system-ui, sans-serif;
  --f-label:   "Heebo", "Rubik", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", "Heebo", ui-monospace, monospace;
  --bar-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  padding-bottom: var(--bar-h);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; }

.wrap { width: min(1160px, 92vw); margin-inline: auto; }
.wrap-narrow { width: min(760px, 92vw); margin-inline: auto; }
.mono { font-family: var(--f-mono); font-weight: 500; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; border-radius: 3px; }

.skip {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 300;
  background: var(--ink); color: #fff; padding: 10px 18px; font-weight: 700;
  border-radius: 0 0 var(--radius) var(--radius); transition: top .18s;
}
.skip:focus { top: 0; }

section[id], div[id] { scroll-margin-top: 84px; }

/* ---------- type scale ---------- */
h1, h2 { font-family: var(--f-display); line-height: 1.06; }
h1 { font-size: clamp(2.15rem, 6.2vw, 3.7rem); font-weight: 900; letter-spacing: -.032em; }
h2 { font-size: clamp(1.7rem, 4.2vw, 2.6rem); font-weight: 800; letter-spacing: -.026em; }
h3 { font-family: var(--f-body); font-weight: 700; line-height: 1.22; letter-spacing: -.012em;
     font-size: clamp(1.15rem, 2.2vw, 1.4rem); }

/* Hebrew has no upper case, so a label reads as a label through weight
   and tracking rather than through capitals. */
.kicker {
  font-family: var(--f-label); font-size: .78rem; font-weight: 800;
  letter-spacing: .055em; color: var(--petrol);
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
}
.kicker::before { content: ""; width: 20px; height: 2px; background: currentColor; flex: none; }
.lead { font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--muted); }

.section { padding-block: clamp(52px, 7vw, 92px); }
.section-head { max-width: 620px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 + p { margin-top: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 24px; border-radius: var(--radius); border: 1.5px solid transparent;
  font-weight: 700; font-size: 1rem; text-align: center;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn-wa { background: var(--wa); color: #06230f; box-shadow: 0 8px 22px -10px rgba(37, 211, 102, .7); }
.btn-wa:hover { background: #1fc25d; }
.btn-call { background: var(--ink); color: #fff; }
.btn-call:hover { background: #232a30; }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-block { width: 100%; }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(242, 244, 245, .92);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr-in { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; margin-inline-end: auto; }
.brand img { width: 40px; height: 40px; border-radius: var(--radius); object-fit: cover; flex: none; }
.brand b { font-family: var(--f-display); font-weight: 800; font-size: 1.06rem; line-height: 1.15; display: block; }
.brand span { font-size: .72rem; color: var(--muted); letter-spacing: .04em; display: block; }
.nav { display: none; gap: 22px; font-size: .95rem; }
.nav a { padding-block: 6px; border-bottom: 2px solid transparent; }
.nav a:hover { border-color: var(--petrol); }
.hdr-call {
  display: none; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem;
  border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 9px 16px; white-space: nowrap;
}
.hdr-call:hover { background: var(--ink); color: #fff; }
.burger {
  display: grid; place-content: center; gap: 5px; width: 46px; height: 46px;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
}
.burger i { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform .22s; }
.burger[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 68px 0 auto 0; z-index: 99;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: 8px 4vw 20px; display: grid;
  transform: translateY(-115%); transition: transform .26s ease; visibility: hidden;
}
.drawer.open { transform: none; visibility: visible; }
.drawer a { padding: 14px 4px; font-size: 1.06rem; border-bottom: 1px solid var(--line); }
.drawer a:last-child { border: 0; }

/* ---------- hero: the five-second answer ---------- */
.hero { padding-block: clamp(26px, 4vw, 56px) clamp(34px, 5vw, 64px); }
.hero-grid { display: grid; gap: clamp(24px, 4vw, 48px); }
.hero h1 { margin-bottom: 14px; }
.hero h1 em { font-style: normal; color: var(--petrol); }
.hero-sub { font-size: clamp(1rem, 1.7vw, 1.14rem); color: var(--muted); max-width: 44ch; }

.hero-trust {
  display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 20px;
}
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 7px 14px; font-size: .88rem; box-shadow: var(--shadow-sm);
}
.chip b { font-family: var(--f-mono); font-size: .98rem; }
.chip .star { color: #a1720c; }
a.chip:hover { border-color: var(--petrol); }

.hero-cta { display: grid; gap: 10px; margin-top: 22px; }
.hero-note { margin-top: 12px; font-size: .86rem; color: var(--muted); }

.hero-fig { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-fig img { width: 100%; height: clamp(240px, 46vw, 460px); object-fit: cover; }
.hero-fig figcaption {
  position: absolute; inset-inline: 10px; bottom: 10px;
  background: rgba(13, 17, 23, .82); color: #fff; backdrop-filter: blur(6px);
  border-radius: var(--radius); padding: 9px 14px; font-size: .82rem;
}

/* ---------- proof strip ---------- */
.proof { background: var(--ink); color: #fff; }
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; }
.proof-cell {
  padding: 22px 16px; text-align: center;
  border-inline-start: 1px solid rgba(255, 255, 255, .1);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.proof-cell:nth-child(-n+2) { border-top: 0; }
.proof-cell:nth-child(odd) { border-inline-start: 0; }
.proof-cell b { display: block; font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.5rem, 4.2vw, 2.1rem); line-height: 1.1; white-space: nowrap; }
.proof-cell span { display: block; font-size: .8rem; color: var(--muted-dark); margin-top: 5px; }
.proof-cell .star { color: #d9a441; }
a.proof-cell:hover { background: rgba(255, 255, 255, .05); }

/* ---------- stance: one responsible address ---------- */
.stance { background: var(--paper-2); }
.stance-grid { display: grid; gap: clamp(22px, 3vw, 40px); }
.stance blockquote {
  font-family: var(--f-display); font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(1.35rem, 3.2vw, 1.95rem); line-height: 1.3; border-inline-start: 3px solid var(--petrol); padding-inline-start: 20px;
}
.stance-points { display: grid; gap: 16px; }
.stance-points li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.stance-points b { display: block; margin-bottom: 2px; }
.stance-points p { font-size: .95rem; color: var(--muted); }
.stance-points .n {
  font-family: var(--f-mono); font-size: .78rem; color: var(--petrol);
  border: 1px solid var(--line); background: #fff; border-radius: 3px;
  padding: 3px 8px; margin-top: 3px;
}

/* ---------- services index (typographic, no cards) ---------- */
.svc-list { border-top: 1px solid var(--line); }
.svc {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center;
  padding: 20px 4px; border-bottom: 1px solid var(--line);
  transition: background .18s, padding-inline .18s;
}
.svc:hover { background: #fff; padding-inline: 12px; }
.svc h3 { grid-column: 1; }
.svc p { grid-column: 1; font-size: .95rem; color: var(--muted); max-width: 62ch; }
.svc-go {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-family: var(--f-label); font-weight: 800; font-size: .8rem; letter-spacing: .02em; color: var(--petrol);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.svc-go svg { transition: transform .18s; }
.svc:hover .svc-go svg { transform: translateX(-4px); }

/* ---------- case studies ---------- */
.cases { display: grid; gap: 18px; }
.case {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.case:hover { border-color: var(--ink); box-shadow: var(--shadow-lg); }
.case-imgs { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.case-imgs img { width: 100%; height: 190px; object-fit: cover; }
.case-imgs::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 50%;
  width: 2px; background: #fff;
}
.case-tag {
  position: absolute; top: 10px; font-family: var(--f-label); font-weight: 800; font-size: .7rem;
  letter-spacing: .04em; color: #fff; padding: 4px 10px; border-radius: 3px;
}
.case-tag.before { inset-inline-end: 10px; background: var(--petrol); }
.case-tag.after  { inset-inline-start: 10px; background: var(--rust); }
.case-body { padding: 18px 20px 20px; }
.case-body h3 { margin-bottom: 7px; }
.case-body p { font-size: .95rem; color: var(--muted); }
.case-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px;
  font-family: var(--f-label); font-weight: 500; font-size: .8rem; color: var(--muted);
}

/* ---------- areas ---------- */
.areas { background: var(--ink); color: #fff; }
.areas .lead { color: var(--muted-dark); }
.areas-grid { display: grid; gap: 10px; margin-top: 28px; }
.area {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius);
  transition: background .18s, border-color .18s;
}
.area:hover { background: rgba(255, 255, 255, .06); border-color: var(--petrol-bright); }
.area b { font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em; font-size: 1.13rem; }
.area span { font-size: .84rem; color: var(--muted-dark); }
.areas-rest { margin-top: 18px; font-size: .9rem; color: var(--muted-dark); }

/* ---------- reviews ---------- */
.rev-grid { display: grid; gap: 16px; }
.rev {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 22px 20px; display: flex; flex-direction: column;
}
.rev p { font-size: 1.04rem; }
.rev footer { margin-top: auto; padding-top: 16px; font-size: .84rem; color: var(--muted); }
.stars { color: #a1720c; letter-spacing: 1.5px; }
.rev-score {
  background: var(--ink); color: #fff; border-color: var(--ink);
  align-items: center; text-align: center; gap: 4px; justify-content: center;
}
.rev-score .big { font-family: var(--f-mono); font-size: 2.6rem; line-height: 1; }
.rev-score small { color: var(--muted-dark); font-size: .84rem; }
.rev-score .link { margin-top: 12px; font-weight: 700; color: var(--petrol-bright); font-size: .88rem; }

/* ---------- faq ---------- */
.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding-inline: 20px;
}
.faq details[open] { border-color: var(--petrol); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-block: 17px; font-weight: 700; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--f-mono); font-size: 1.3rem; color: var(--petrol); flex: none;
}
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding-bottom: 18px; color: var(--muted); }

/* ---------- CTA band ---------- */
.cta { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/plate-brass.jpg") center/cover;
  opacity: .16; filter: saturate(.7);
}
.cta .wrap { position: relative; }
.cta h2 { max-width: 22ch; }
.cta p { color: var(--muted-dark); margin-top: 12px; max-width: 46ch; }
.cta-actions { display: grid; gap: 10px; margin-top: 24px; max-width: 340px; }

/* ---------- footer ---------- */
.ftr { background: var(--paper-2); border-top: 1px solid var(--line); padding-block: 40px 22px; }
.ftr-grid { display: grid; gap: 28px; }
.ftr-brand { display: flex; gap: 12px; align-items: flex-start; }
.ftr-brand img { width: 38px; height: 38px; border-radius: var(--radius); }
.ftr-brand p { font-size: .88rem; color: var(--muted); margin-top: 4px; }
.ftr h4 { font-family: var(--f-label); font-weight: 800; font-size: .78rem; letter-spacing: .05em; color: var(--muted); margin-bottom: 12px; }
.ftr-col a { display: block; padding-block: 5px; font-size: .93rem; }
.ftr-col a:hover { color: var(--petrol); }
.ftr-nap { font-size: .93rem; }
.ftr-nap a { display: block; padding-block: 5px; }
.ftr-bot {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
  font-size: .8rem; color: var(--muted);
}

/* ---------- sticky mobile action bar ---------- */
.actionbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 120;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(242, 244, 245, .95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.actionbar .btn { min-height: 50px; font-size: .98rem; padding: 0 12px; }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.rv.in { opacity: 1; transform: none; }

/* ==========================================================
   breakpoints
   ========================================================== */
@media (min-width: 560px) {
  .hero-cta { grid-auto-flow: column; grid-auto-columns: max-content; }
  .cta-actions { grid-auto-flow: column; grid-auto-columns: max-content; max-width: none; }
  .proof-grid { grid-template-columns: repeat(4, 1fr); }
  .proof-cell { border-top: 0; }
  .proof-cell:nth-child(odd) { border-inline-start: 1px solid rgba(255, 255, 255, .1); }
  .proof-cell:first-child { border-inline-start: 0; }
  .cases { grid-template-columns: 1fr 1fr; }
  .rev-grid { grid-template-columns: 1fr 1fr; }
  .areas-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  :root { --bar-h: 0px; }
  body { padding-bottom: 0; }
  .actionbar { display: none; }
  .nav, .hdr-call { display: flex; }
  .burger, .drawer { display: none; }
  .hero-grid { grid-template-columns: 1.05fr .95fr; align-items: center; }
  .stance-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .areas-grid { grid-template-columns: repeat(4, 1fr); }
  .rev-grid { grid-template-columns: repeat(4, 1fr); }
  .cta .wrap { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
  .cta-actions { margin-top: 0; }
  .ftr-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

@media (max-width: 899px) {
  :root { --bar-h: 74px; }
}

@media (max-width: 559px) {
  .case-imgs img { height: 150px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
}

/* ==========================================================
   service / inner pages
   ========================================================== */
.crumbs {
  font-family: var(--f-label); font-weight: 500; font-size: .8rem; color: var(--muted);
  padding-block: 16px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.crumbs a:hover { color: var(--petrol); }
.crumbs span[aria-hidden] { opacity: .5; }

.page-hero { padding-block: clamp(20px, 3vw, 34px) clamp(30px, 4vw, 48px); }
.page-hero h1 { max-width: 22ch; margin-bottom: 14px; }
.page-hero .lead { max-width: 52ch; }
.page-hero .hero-cta { margin-top: 22px; }

.prose { max-width: 62ch; }
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 40px; }
.prose h3 { margin-top: 28px; font-family: var(--f-body); font-weight: 700; font-size: 1.06rem; }
.prose p { color: var(--muted); }
.prose strong { color: var(--ink); }
.prose ul { display: grid; gap: 10px; }
.prose ul li {
  position: relative; padding-inline-start: 17px; color: var(--muted);
}
.prose ul li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--petrol);
}
.prose ul li strong { color: var(--ink); }

.two-col { display: grid; gap: clamp(28px, 4vw, 56px); }

.pricebox {
  background: var(--card); border: 1px solid var(--line); border-inline-start: 3px solid var(--petrol);
  border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.pricebox h3 { font-family: var(--f-body); font-size: 1rem; margin-bottom: 10px; }
.pricebox dl { display: grid; gap: 10px; }
.pricebox div { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; font-size: .95rem; }
.pricebox dt { color: var(--muted); }
.pricebox dd { font-family: var(--f-label); font-weight: 700; white-space: nowrap; }
.pricebox p { font-size: .82rem; color: var(--muted); margin-top: 14px; }

.shots { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.shots figure { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.shots img { width: 100%; height: 200px; object-fit: cover; }
.shots figcaption { padding: 10px 12px; font-size: .82rem; color: var(--muted); }

.related { display: grid; gap: 10px; }
.related a {
  display: flex; justify-content: space-between; gap: 14px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 18px; font-weight: 600;
}
.related a:hover { border-color: var(--petrol); color: var(--petrol); }
.related a span { font-family: var(--f-label); font-weight: 800; font-size: .78rem; color: var(--petrol); }

@media (min-width: 900px) {
  .two-col { grid-template-columns: 1.5fr 1fr; align-items: start; }
  .shots img { height: 230px; }
}

/* how-you-get-a-price steps (replaces the price table) */
.steps { display: grid; gap: 13px; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; }
.steps li span {
  font-family: var(--f-mono); font-size: .72rem; color: var(--petrol);
  background: var(--petrol-soft); border-radius: 3px; padding: 3px 8px; margin-top: 2px;
}
.steps li p { font-size: .93rem; color: var(--muted); }

/* ==========================================================
   problem selector ("מה קרה?") — routes intent fast
   ========================================================== */
.triage { background: var(--paper-2); }
.triage-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.triage-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 16px; font-weight: 600; font-size: .97rem; min-height: 58px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.triage-item:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.triage-item:hover .ti { background: var(--ink); color: #fff; border-color: var(--ink); }
.triage-item span { font-family: var(--f-label); font-weight: 800; font-size: .78rem; color: var(--petrol); flex: none; }
.triage-note { margin-top: 16px; font-size: .88rem; color: var(--muted); }

/* two commercial paths */
.paths { display: grid; gap: 16px; }
.path {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column;
}
.path.urgent { border-inline-start: 3px solid var(--petrol); }
.path.planned { border-inline-start: 3px solid var(--rust); }
.path h3 { margin-bottom: 10px; }
.path p { color: var(--muted); font-size: .96rem; }
.path ul { display: grid; gap: 8px; margin-top: 14px; }
.path ul li { position: relative; padding-inline-start: 15px; font-size: .93rem; color: var(--muted); }
.path ul li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--petrol);
}
.path.planned ul li::before { background: var(--rust); }
.path .btn { margin-top: auto; align-self: start; }
.path-foot { margin-top: 18px; }

/* what to expect */
.expect { display: grid; gap: 2px; counter-reset: st; border-top: 1px solid var(--line); }
.expect li {
  counter-increment: st; display: grid; grid-template-columns: auto 1fr;
  gap: 14px; align-items: baseline; padding: 17px 4px; border-bottom: 1px solid var(--line);
}
.expect li::before {
  content: "0" counter(st); font-family: var(--f-mono); font-size: .8rem; color: var(--petrol);
}
.expect li b { font-weight: 700; }
.expect li p { color: var(--muted); font-size: .94rem; margin-top: 3px; }

/* credential callout (מז״ח) */
.cred {
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: clamp(24px, 3.5vw, 38px); position: relative; overflow: hidden;
}
.cred::before {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/plate-water.jpg") center/cover; opacity: .22;
}
.cred > * { position: relative; }
.cred h2 { max-width: 26ch; }
.cred p { color: var(--muted-dark); margin-top: 12px; max-width: 58ch; }
.cred .btn { margin-top: 20px; }
.cred-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  border: 1px solid var(--petrol-bright); color: var(--petrol-bright);
  border-radius: 3px; padding: 6px 14px; font-family: var(--f-label); font-weight: 800; font-size: .76rem;
  letter-spacing: .04em;
}

@media (min-width: 700px) { .triage-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .paths { grid-template-columns: 1fr 1fr; } }

/* named byline — the person behind the name */
.byline {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--muted); max-width: 46ch;
}
.byline strong { color: var(--ink); }

/* ==========================================================
   floating contact — always reachable, every page, every scroll
   Desktop: FAB pair. Mobile: the sticky bottom bar already covers it.
   ========================================================== */
.fab {
  position: fixed; inset-inline-start: 22px; bottom: 22px; z-index: 130;
  display: none; align-items: center; gap: 10px;
}
.fab a {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: var(--radius); font-weight: 700; box-shadow: 0 10px 28px -8px rgba(13, 17, 23, .45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.fab a:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(13, 17, 23, .5); }
.fab-wa {
  background: var(--wa); color: #06230f; padding: 14px 22px 14px 18px; font-size: 1rem;
}
.fab-call {
  background: var(--ink); color: #fff; width: 54px; height: 54px; justify-content: center; border-radius: var(--radius);
}
.fab svg { flex: none; }

/* one gentle attention pulse on the WhatsApp button, then it stops */
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 10px 28px -8px rgba(13, 17, 23, .45), 0 0 0 0 rgba(37, 211, 102, .5); }
  50%      { box-shadow: 0 10px 28px -8px rgba(13, 17, 23, .45), 0 0 0 14px rgba(37, 211, 102, 0); }
}
.fab-wa { animation: fabPulse 2.6s ease-out 1.5s 3; }

@media (min-width: 900px) { .fab { display: flex; } }
@media (prefers-reduced-motion: reduce) { .fab-wa { animation: none; } }

/* ==========================================================
   graphic layer — material texture, warmth and rhythm
   Every rule here is decorative only. Nothing shifts layout,
   nothing delays the CTAs, everything degrades to flat colour.
   ========================================================== */

/* soft warm wash behind the hero so the page does not open flat */
.hero { position: relative; }
.hero::before {
  content: ""; position: absolute; inset: -40px 0 auto 0; height: 130%;
  background-image:
    linear-gradient(to right, rgba(13, 17, 23, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13, 17, 23, .05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
  pointer-events: none; z-index: 0;
}
.hero > .wrap { position: relative; z-index: 1; }

/* thin material band used as a section transition */
.band {
  height: 78px; position: relative; overflow: hidden;
  border-block: 1px solid var(--line);
}
.band::before {
  content: ""; position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(.75) contrast(1.05);
  opacity: .5;
}
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--paper) 0%, transparent 22%, transparent 78%, var(--paper) 100%);
}
.band-copper::before  { background-image: url("/assets/plate-patina.jpg"); }
.band-water::before   { background-image: url("/assets/plate-water.jpg"); opacity: .38; }
.band-concrete::before{ background-image: url("/assets/plate-concrete.jpg"); }
.band-brass::before   { background-image: url("/assets/plate-brass.jpg"); }

/* tinted surface for the alternating sections, warmer than plain grey */
.section.tint { background: var(--paper-2); }
.section.tint-copper { background: var(--paper-2); border-block: 1px solid var(--line); }

/* kicker gets a warm chip treatment so section openings read as designed */
.kicker {
  display: inline-flex; padding: 0; margin-bottom: 16px;
  color: var(--petrol); background: none;
}
.kicker::before { width: 26px; height: 3px; }
.kicker.dark { color: var(--petrol); }
.areas .kicker { color: var(--petrol-bright); }

/* triage buttons: an icon makes the choice scannable under stress */
.triage-item .ti {
  width: 34px; height: 34px; flex: none; border-radius: var(--radius);
  background: transparent; color: var(--ink); border: 1px solid var(--line);
  display: grid; place-items: center; transition: background .18s, color .18s, border-color .18s;
}
.triage-item .ti svg { width: 19px; height: 19px; }
.triage-item b { flex: 1; font-weight: 600; }

/* service rows get a hairline marker so the list has rhythm */
.svc { position: relative; }
.svc::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 50%;
  width: 3px; height: 0; background: var(--petrol); border-radius: 2px;
  transform: translateY(-50%); transition: height .22s ease;
}
.svc:hover::before { height: 60%; }

/* proof band gets material depth instead of flat ink */
.proof { position: relative; overflow: hidden; }
.proof::before {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/plate-concrete.jpg") center/cover;
  opacity: .12; filter: grayscale(1);
}
.proof .wrap { position: relative; }

@media (prefers-reduced-motion: reduce) { .svc::before { transition: none; } }

/* ==========================================================
   BEFORE / AFTER — the strongest visual proof on the site
   ========================================================== */
.ba-wrap { background: var(--ink); position: relative; overflow: hidden; }
.ba-wrap::before {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/plate-water.jpg") center/cover; opacity: .16;
}
.ba-wrap .wrap { position: relative; }
.ba-wrap h2 { color: #fff; }
.ba-wrap .lead { color: var(--muted-dark); }
.ba-wrap .kicker { color: var(--petrol-bright); }

.ba {
  position: relative; width: min(900px, 100%); margin-inline: auto;
  aspect-ratio: 16 / 11; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.75);
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-before-wrap { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); will-change: clip-path; }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: rgba(255,255,255,.9); transform: translateX(-50%); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.ba-handle i {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 58px; height: 58px; border-radius: 50%; background: #fff;
  box-shadow: 0 8px 26px rgba(0,0,0,.45);
  display: grid; place-items: center; color: var(--ink); font-size: 1.1rem; font-weight: 700;
}
.ba-handle i::before { content: "‹ ›"; letter-spacing: -2px; }
.ba-tag {
  position: absolute; top: 14px; padding: 6px 14px; border-radius: 3px;
  font-size: .82rem; font-weight: 700; color: #fff; pointer-events: none;
  backdrop-filter: blur(4px);
}
.ba-tag.b { inset-inline-end: 14px; background: rgba(14,85,96,.92); }
.ba-tag.a { inset-inline-start: 14px; background: rgba(181,80,42,.92); }
.ba-hint {
  text-align: center; margin-top: 16px; color: var(--muted-dark); font-size: .88rem;
}

/* ==========================================================
   service rows get a real icon, so the list reads as designed
   ========================================================== */
.svc { grid-template-columns: auto 1fr auto; column-gap: 16px; }
.svc h3 { grid-column: 2; }
.svc p { grid-column: 2; }
.svc-go { grid-column: 3; }
.svc-ico {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  width: 46px; height: 46px; border-radius: var(--radius); flex: none;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.svc-ico svg { width: 24px; height: 24px; }
.svc:hover .svc-ico { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ==========================================================
   hero: a floating proof card gives the photo depth
   ========================================================== */
.hero-badge {
  position: absolute; inset-inline-start: -14px; bottom: 78px; z-index: 2;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px 18px; box-shadow: 0 20px 44px -18px rgba(13,17,23,.45);
  display: grid; gap: 2px; min-width: 168px;
}
.hero-badge b { font-family: var(--f-mono); font-size: 1.65rem; line-height: 1; }
.hero-badge .st { color: #a1720c; font-size: .82rem; letter-spacing: 1px; }
.hero-badge span { font-size: .78rem; color: var(--muted); }

@media (max-width: 560px) {
  .hero-badge { inset-inline-start: 8px; bottom: 64px; padding: 11px 14px; min-width: 0; }
  .hero-badge b { font-size: 1.3rem; }
  .ba { aspect-ratio: 4 / 5; }
  .ba-handle i { width: 48px; height: 48px; }
  .svc-ico { width: 40px; height: 40px; }
  .svc-ico svg { width: 21px; height: 21px; }
}