/* עמודי שירות (מנוף, הובלות קטנות, יחידת דיור). נשען על הטוקנים והקומפוננטות של style.css. */

/* ===== Hero ===== */
.sv-hero {
  color: #fff; padding-block: 48px 64px; overflow-x: clip;
  background:
    radial-gradient(900px 420px at 85% 10%, rgba(31,99,214,.24), transparent 60%),
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--charcoal);
}
.sv-hero-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .sv-hero-grid { grid-template-columns: 1.15fr .85fr; } }
.sv-hero-copy { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.sv-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: calc(14px * var(--fs, 1)); color: #aab4ba; }
.sv-crumbs a { color: #cfd8de; text-decoration: none; }
.sv-crumbs a:hover { color: #fff; text-decoration: underline; }
.sv-crumbs [aria-current] { color: #fff; font-weight: 700; }
.sv-kicker {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(143,182,255,.5); color: #cfe0ff;
  border-radius: 999px; padding: 5px 14px; font: 700 calc(14px * var(--fs, 1)) var(--font-display);
}
.sv-kicker svg { width: 20px; height: 20px; color: #8fb6ff; }
.sv-hero h1 { font-size: calc(clamp(36px, 5.6vw, 64px) * var(--fs, 1)); font-weight: 800; line-height: 1.05; }
.sv-lead { color: #d6dde1; font-size: calc(19px * var(--fs, 1)); line-height: 1.75; max-width: 34em; }
.sv-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.sv-hero-photo { margin: 0; border-radius: 26px 26px 26px 100px; overflow: hidden; aspect-ratio: 4 / 3.6; max-height: 520px; box-shadow: 0 30px 60px rgba(0,0,0,.45); min-width: 0; }
.sv-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 959px) { .sv-hero-photo { aspect-ratio: 16 / 10; border-radius: 22px 22px 22px 70px; } }
@media (prefers-reduced-motion: no-preference) {
  .sv-hero-copy > * { animation: rise .7s cubic-bezier(.2,.7,.2,1) backwards; }
  .sv-hero-copy > :nth-child(2) { animation-delay: .06s; }
  .sv-hero-copy > :nth-child(3) { animation-delay: .12s; }
  .sv-hero-copy > :nth-child(4) { animation-delay: .18s; }
  .sv-hero-copy > :nth-child(5) { animation-delay: .24s; }
  .sv-hero-photo { animation: rise .9s .15s cubic-bezier(.2,.7,.2,1) backwards; }
}

/* ===== When / what's included ===== */
.sv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sv-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; min-width: 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 20px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sv-list li:hover { box-shadow: 0 14px 30px rgba(20,24,27,.08); border-color: transparent; }
.js .sv-list li.reveal.in:hover { transform: translateY(-3px); }
.sv-tick { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; }
.sv-tick svg { width: 16px; height: 16px; }
.sv-list h3 { font-size: calc(19px * var(--fs, 1)); font-weight: 800; margin-bottom: 4px; }
.sv-list p { color: var(--muted); }

/* ===== Steps along a dashed road ===== */
.sv-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; position: relative; }
@media (min-width: 860px) {
  .sv-flow { grid-template-columns: repeat(3, 1fr); }
  .sv-flow::before {
    content: ""; position: absolute; top: 27px; right: 16%; left: 16%; height: 3px;
    background: repeating-linear-gradient(to left, var(--steel) 0 12px, transparent 12px 22px);
  }
}
.sv-flow li { position: relative; display: grid; gap: 8px; justify-items: start; background: var(--bg); border-radius: 20px; padding: 24px; border: 1px solid var(--line); min-width: 0; }
.sv-num { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--charcoal); color: #fff; font: 800 calc(22px * var(--fs, 1)) var(--font-display); transition: background-color .25s ease, transform .25s ease; }
.sv-flow li:hover .sv-num { background: var(--accent); transform: translateX(-4px); }
.sv-flow h3 { font-size: calc(20px * var(--fs, 1)); font-weight: 800; }
.sv-flow p { color: var(--muted); }

/* ===== Review ===== */
.sv-review { padding-block: 40px; }
.sv-quote { margin: 0 auto; max-width: 760px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.sv-quote .rv-stars { color: var(--star); letter-spacing: 3px; font-size: 20px; }
.sv-quote blockquote { margin: 0; font: 700 calc(clamp(22px, 2.6vw, 30px) * var(--fs, 1))/1.4 var(--font-display); }
.sv-quote figcaption { color: var(--muted); }
.sv-quote figcaption b { color: var(--ink); }

/* ===== Gallery ===== */
.sv-gallery { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.sv-gallery figure { margin: 0; position: relative; border-radius: 18px; overflow: hidden; min-width: 0; }
.sv-gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3.4; object-fit: cover; display: block; transition: transform .6s ease; }
.sv-gallery .g-link { display: block; cursor: zoom-in; }
.sv-gallery figure:hover img { transform: scale(1.05); }
.sv-gallery figcaption {
  position: absolute; inset: auto 10px 10px auto; background: rgba(20,24,27,.78); color: #fff;
  border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 13px; pointer-events: none;
}
@media (max-width: 640px) {
  .sv-gallery { grid-template-columns: 1fr 1fr; }
  .sv-gallery figure:first-child { grid-column: span 2; }
}

/* ===== Closing CTA + related services ===== */
.sv-end { background: var(--charcoal); color: #fff; }
.sv-end-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .sv-end-grid { grid-template-columns: 1.1fr .9fr; } }
.sv-end-cta { display: grid; gap: 14px; justify-items: start; }
.sv-end-cta p { color: #c9d0d4; font-size: calc(18px * var(--fs, 1)); }
.sv-related-title { font-size: calc(20px * var(--fs, 1)); margin-bottom: 12px; color: #fff; }
.sv-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sv-rel {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; text-decoration: none; font-weight: 700;
  transition: background-color .25s ease, border-color .25s ease;
}
.sv-rel:hover, .sv-rel:focus-visible { background: rgba(31,99,214,.25); border-color: var(--accent); }
.sv-rel-ico { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.1); display: grid; place-items: center; color: #8fb6ff; flex: none; }
.sv-rel-ico svg { width: 22px; height: 22px; }
.sv-rel-arrow { width: 18px; height: 18px; margin-inline-start: auto; transition: transform .25s ease; }
.sv-rel:hover .sv-rel-arrow { transform: translateX(-5px); }

.sv-hero, .sv-when, .sv-steps, .sv-gal, .sv-end { overflow-x: clip; }
html.a11y-contrast .sv-hero, html.a11y-contrast .sv-end { background: #000; }