/* ==========================================================================
   MAKOR HATEVA — HOMEPAGE (front-page.php)
   Clean, optimized, anti-slop. Teal + sun. Efrat-craft structure.
   ========================================================================== */

/* Reveal-on-scroll: enhances already-visible content (safe without JS) */
.has-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.has-reveal [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .has-reveal [data-reveal] { opacity: 1; transform: none; transition: none; } }

.section-head { max-width: 720px; margin: 0 auto var(--space-2xl); text-align: center; }
.section-head h2 { margin-bottom: var(--space-sm); }
.section-head p { color: var(--color-text-light); margin-inline: auto; font-size: 1.08rem; }
.accent { color: var(--color-primary-dark); }

/* ==========================================================================
   HERO — full-bleed photo, restrained teal scrim, centered (Makor-style)
   ========================================================================== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,30,33,.30) 0%, rgba(8,30,33,.55) 55%, rgba(8,30,33,.78) 100%),
    linear-gradient(75deg, rgba(7,58,64,.55), rgba(7,58,64,0) 60%);
}
.hero__inner { position: relative; z-index: 2; text-align: center; max-width: 880px; margin: 0 auto; padding: 7rem 0 6rem; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
  color: #fff; font-family: var(--font-heading); font-weight: 500;
  font-size: .9rem; padding: .5rem 1.1rem; border-radius: var(--radius-pill);
  margin-bottom: 1.6rem;
}
.hero__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-sun); }
.hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1.3rem;
}
.hero h1 .u { position: relative; white-space: nowrap; color: #fff; }
.hero h1 .u::after {
  content: ''; position: absolute; right: 0; left: 0; bottom: .06em;
  height: .16em; background: var(--color-sun); border-radius: 3px; z-index: -1; opacity: .92;
}
.hero__sub { font-size: clamp(1.05rem, 2vw, 1.28rem); color: rgba(255,255,255,.92); max-width: 620px; margin: 0 auto 2.2rem; line-height: 1.65; }
.hero__actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.6rem; }
.hero .btn--ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); color: #fff; }
.hero .btn--ghost:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }
.hero__trust {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem 2rem;
  padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.18);
  max-width: 640px; margin: 0 auto;
}
.hero__trust-item { display: inline-flex; align-items: center; gap: .5rem; font-size: .98rem; color: rgba(255,255,255,.9); font-weight: 500; }
.hero__trust-item b { color: var(--color-sun); font-family: var(--font-heading); font-weight: 700; }
.hero__trust-item svg { width: 17px; height: 17px; color: var(--color-sun); }

/* ==========================================================================
   TRUST STRIP — authorized brands (clean text nameplates)
   ========================================================================== */
.brands { background: var(--color-white); border-bottom: 1px solid var(--color-border); padding: var(--space-xl) 0; }
.brands__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .9rem 2.4rem; }
.brands__label { font-size: .9rem; color: var(--color-text-light); font-weight: 500; }
.brands__list { display: flex; flex-wrap: wrap; gap: .8rem 2rem; align-items: center; }
.brands__list span { font-family: var(--font-heading); font-weight: 700; font-size: 1.18rem; color: var(--color-ink); opacity: .72; letter-spacing: -.01em; transition: opacity var(--transition); }
.brands__list span:hover { opacity: 1; }

/* ==========================================================================
   SERVICES — 3 numbered cards
   ========================================================================== */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.svc-card {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.svc-card__media { position: relative; height: 220px; overflow: hidden; background: var(--color-bg-alt); }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.svc-card:hover .svc-card__media img { transform: scale(1.05); }
.svc-card__num {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-family: var(--font-heading); font-weight: 700; font-size: .92rem; color: #fff;
  background: rgba(10,124,134,.78); backdrop-filter: blur(6px);
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.svc-card__body { padding: 1.6rem 1.6rem 1.8rem; flex: 1; display: flex; flex-direction: column; }
.svc-card__body h3 { color: var(--color-primary-dark); margin-bottom: .6rem; }
.svc-card__body p { font-size: .98rem; color: var(--color-text-light); flex: 1; margin-bottom: 1.1rem; }
.svc-card__link { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-heading); font-weight: 600; font-size: .96rem; color: var(--color-sun-dark); align-self: flex-start; transition: gap var(--transition); }
.svc-card__link:hover { gap: .8rem; color: var(--color-sun-dark); }

/* ==========================================================================
   HOW IT WORKS — 4 step sequence (numbers earned)
   ========================================================================== */
.how { background: var(--color-ink); color: rgba(255,255,255,.85); }
.how .section-head h2 { color: #fff; }
.how .section-head p { color: rgba(255,255,255,.7); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); counter-reset: step; }
.step { position: relative; padding-top: .5rem; }
.step__n {
  font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; color: var(--color-ink);
  width: 46px; height: 46px; border-radius: 50%; background: var(--color-sun);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem;
}
.step h3 { color: #fff; font-size: 1.2rem; margin-bottom: .5rem; }
.step p { color: rgba(255,255,255,.68); font-size: .96rem; }
.step:not(:last-child)::before {
  content: ''; position: absolute; top: 23px; left: -.75rem; width: calc(100% - 46px); height: 2px;
  background: linear-gradient(90deg, rgba(255,177,46,.5), rgba(255,177,46,0));
}

/* ==========================================================================
   ABOUT — framed image + floating card + creds
   ========================================================================== */
.about__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-4xl); align-items: center; }
.about__visual { position: relative; }
.about__frame { position: relative; z-index: 2; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-lg); }
.about__frame img { width: 100%; height: 100%; object-fit: cover; }
.about__backdrop { position: absolute; inset: auto -28px -28px auto; width: 70%; aspect-ratio: 1; background: var(--color-primary-wash); border-radius: var(--radius-xl); z-index: 1; }
.about__float {
  position: absolute; z-index: 3; bottom: 26px; left: -22px;
  background: #fff; border-radius: var(--radius-md); padding: .9rem 1.2rem;
  box-shadow: var(--shadow-md); display: flex; align-items: center; gap: .8rem;
}
.about__float .icon { width: 42px; height: 42px; border-radius: 50%; background: var(--color-sun-wash); color: var(--color-sun-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.about__float .icon svg { width: 22px; height: 22px; }
.about__float b { display: block; font-family: var(--font-heading); color: var(--color-ink); font-size: .98rem; }
.about__float span { font-size: .82rem; color: var(--color-text-light); }
.about__body p { color: var(--color-text); }
.about__creds { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 1.8rem; }
.cred { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.2rem 1rem; text-align: center; }
.cred b { display: block; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--color-primary-dark); line-height: 1; margin-bottom: .35rem; }
.cred span { font-size: .85rem; color: var(--color-text-light); }

/* ==========================================================================
   COMMERCIAL BAND — repair vs replace (teal)
   ========================================================================== */
.band { background: linear-gradient(120deg, var(--color-primary-darker), var(--color-primary-dark)); color: #fff; border-radius: var(--radius-xl); padding: var(--space-3xl); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-2xl); align-items: center; box-shadow: var(--shadow-lg); }
.band h2 { color: #fff; }
.band p { color: rgba(255,255,255,.86); }
.band .u { color: var(--color-sun); }
.band__actions { display: flex; flex-direction: column; gap: .8rem; }
.band__list { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.band__list li { display: flex; align-items: flex-start; gap: .65rem; padding: .35rem 0; color: rgba(255,255,255,.92); font-size: 1rem; }
.band__list svg { width: 22px; height: 22px; color: var(--color-sun); flex-shrink: 0; margin-top: 1px; }

/* ==========================================================================
   GALLERY — real field photos
   ========================================================================== */
.fieldgal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.fieldgal-grid figure { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1; margin: 0; background: var(--color-bg-alt); }
.fieldgal-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.fieldgal-grid figure:hover img { transform: scale(1.06); }
.fieldgal-grid figcaption { position: absolute; inset: auto 0 0 0; padding: .9rem .8rem .6rem; font-size: .82rem; color: #fff; background: linear-gradient(180deg, transparent, rgba(8,30,33,.8)); opacity: 0; transition: opacity var(--transition); }
.fieldgal-grid figure:hover figcaption { opacity: 1; }

/* ==========================================================================
   FAQ — clean accordion
   ========================================================================== */
.faq { max-width: 820px; margin: 0 auto; }
.qa-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); margin-bottom: .75rem; overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); }
.qa-item.is-open { border-color: var(--color-primary-light); box-shadow: var(--shadow-sm); }
.qa-item__q { width: 100%; text-align: right; background: none; border: none; cursor: pointer; padding: 1.15rem 1.3rem; font-family: var(--font-heading); font-weight: 600; font-size: 1.06rem; color: var(--color-ink); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.qa-item__q .chev { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-primary); transition: transform var(--transition); }
.qa-item.is-open .chev { transform: rotate(180deg); }
.qa-item__a { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.qa-item.is-open .qa-item__a { max-height: 420px; }
.qa-item__a p { padding: 0 1.3rem 1.25rem; color: var(--color-text-light); margin: 0; font-size: .98rem; }

/* ==========================================================================
   CONTACT — form -> webhook + details
   ========================================================================== */
.contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: start; }
.contact__details { display: flex; flex-direction: column; gap: 1rem; }
.contact__row { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.contact__row .icon { width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary-wash); color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact__row .icon svg { width: 21px; height: 21px; }
.contact__row b { display: block; color: var(--color-ink); font-family: var(--font-heading); }
.contact__row span, .contact__row a { font-size: .95rem; color: var(--color-text-light); }
.contact__form { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm); }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; font-size: .92rem; color: var(--color-ink); margin-bottom: .4rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: .85rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 1rem; color: var(--color-ink); background: var(--color-bg); transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(12,163,175,.15); }
.field textarea { resize: vertical; min-height: 96px; }
.contact__form .btn { width: 100%; }
.form-status { margin-top: .9rem; font-size: .95rem; text-align: center; }
.form-status.is-ok { color: var(--color-primary-dark); font-weight: 600; }
.form-status.is-err { color: #c0392b; font-weight: 600; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .step::before { display: none; }
  .about__inner, .band, .contact__inner { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .about__float { left: 12px; }
  .fieldgal-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .about__creds { grid-template-columns: 1fr 1fr; }
  .fieldgal-grid { grid-template-columns: repeat(2, 1fr); }
  .band { padding: var(--space-2xl) var(--space-lg); }
  .hero { min-height: 88vh; }
}

/* ==========================================================================
   SERVICE / INNER PAGE TEMPLATE  (spage-*)
   ========================================================================== */

/* Hero — full-bleed photo */
.spage-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: calc(var(--header-height) + 3rem) 0 3.4rem;
  display: flex;
  align-items: center;
  min-height: 460px;
}
.spage-hero__inner { max-width: 720px; }
.spage-hero__kicker {
  display: inline-flex; align-items: center;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 0.9rem; letter-spacing: 0.02em;
  color: #fff; background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  padding: 0.4rem 1rem; border-radius: var(--radius-pill);
  margin-bottom: var(--space-md); backdrop-filter: blur(4px);
}
.spage-hero h1 { color: #fff; margin-bottom: var(--space-md); text-shadow: 0 2px 18px rgba(0,0,0,.22); }
.spage-hero__lead { color: rgba(255,255,255,0.92); font-size: 1.16rem; line-height: 1.7; max-width: 60ch; margin-bottom: var(--space-lg); }
.spage-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-xl); }
.spage-hero__trust { list-style: none; display: flex; flex-wrap: wrap; gap: 1.6rem; padding: 0; margin: 0; }
.spage-hero__trust li { color: rgba(255,255,255,0.85); font-size: 0.96rem; margin: 0; }
.spage-hero__trust strong { color: var(--color-sun); font-family: var(--font-heading); }

/* Daya-style page hero (gallery / articles / contact): tall, vertically centered, right-aligned, breadcrumb */
.spage-hero--page {
  min-height: clamp(530px, 70vh, 770px);
  align-items: center;
  padding: calc(var(--header-height) + 2.3rem) 0 2.3rem;
  text-align: right;
}
/* fill the container to its full max-width (== gallery grid width) instead of shrinking to content,
   then right-align the inner inside it so the text edge lines up with the grid below (Daya pattern) */
.spage-hero--page > .container { width: 100%; }
.spage-hero--page .spage-hero__inner { max-width: 880px; margin-inline: 0; text-align: right; }
.spage-hero--page h1 { font-size: clamp(2.4rem, 5vw, 4.05rem); line-height: 1.08; letter-spacing: -0.01em; margin-bottom: var(--space-md); text-wrap: balance; }
.spage-hero--page .spage-hero__lead { font-size: clamp(1.06rem, 1.5vw, 1.31rem); line-height: 1.6; max-width: 56ch; margin-bottom: 0; }
@media (max-width: 760px) {
  .spage-hero--page { min-height: clamp(400px, 60vh, 520px); padding: calc(var(--header-height) + 1.5rem) 0 1.9rem; }
}
.spage-hero__crumb {
  display: flex; align-items: center;
  /* The row had no wrap policy. Flex items default to min-width:auto, so once the row ran out
     of width the items shrank to min-content and the LABELS broke mid-phrase ("דף הבית" split
     into "דף" / "הבית"). flex-wrap moves the break to BETWEEN crumbs instead. */
  flex-wrap: wrap;
  column-gap: 0.55rem; row-gap: 0.15rem;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 0.92rem; letter-spacing: 0.02em;
  margin-bottom: var(--space-md);
}
/* And no crumb may break inside itself, so a wrap can only happen at a separator. */
.spage-hero__crumb > * { white-space: nowrap; }
.spage-hero__crumb a { color: rgba(255,255,255,0.80); }
.spage-hero__crumb a:hover { color: #fff; }
.spage-hero__crumb span[aria-hidden] { color: rgba(255,255,255,0.45); }
.spage-hero__crumb .is-current { color: var(--color-sun); }

.btn--ghost-light { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.55); color: #fff; }
.btn--ghost-light:hover { background: #fff; border-color: #fff; color: var(--color-primary-dark); }

/* 2-column body: content + sticky card */
.spage-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-3xl); align-items: start; }
.spage-main { min-width: 0; }

/* Prose styling so migrated content never reads as a flat text dump */
.spage-prose > p:first-of-type { font-size: 1.18rem; line-height: 1.8; color: var(--color-ink); }
.spage-prose h2 { margin-top: var(--space-2xl); padding-top: var(--space-sm); }
.spage-prose h3 { margin-top: var(--space-xl); color: var(--color-primary-dark); }
.spage-prose ul { list-style: none; padding: 0; margin: var(--space-lg) 0; }
.spage-prose ul li {
  position: relative; padding-right: 2rem; margin-bottom: 0.7rem; line-height: 1.7;
}
.spage-prose ul li::before {
  content: ''; position: absolute; right: 0; top: 0.55em;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background-color: var(--color-primary-wash);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230A7C86' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.spage-prose img { border-radius: var(--radius-lg); margin: var(--space-lg) 0; box-shadow: var(--shadow-sm); }

/* Sticky contact card */
.spage-aside { position: sticky; top: calc(var(--header-height) + 16px); }
.spage-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.spage-card__media { aspect-ratio: 16/9; overflow: hidden; }
.spage-card__media img { width: 100%; height: 100%; object-fit: cover; }
.spage-card__body { padding: var(--space-lg); }
.spage-card__body h3 { margin-bottom: 0.3rem; }
.spage-card__body > p { color: var(--color-text-light); font-size: 0.96rem; margin-bottom: var(--space-md); }
.spage-card__btn { width: 100%; margin-bottom: var(--space-sm); }
.spage-card__btn svg { width: 18px; height: 18px; }
.spage-card__meta { list-style: none; padding: var(--space-md) 0 0; margin: var(--space-sm) 0 0; border-top: 1px solid var(--color-border); }
.spage-card__meta li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; color: var(--color-ink); margin-bottom: 0.4rem; }
.spage-card__meta span { color: var(--color-text-light); }

/* Why-us: image + features */
.spage-why__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-3xl); align-items: center; }
.spage-why__media { position: relative; }
.spage-why__media img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); aspect-ratio: 4/3; object-fit: cover; }
.spage-why__badge {
  position: absolute; bottom: -18px; right: -10px;
  background: var(--color-primary-dark); color: #fff;
  border-radius: var(--radius-lg); padding: 0.8rem 1.2rem;
  box-shadow: var(--shadow-md); text-align: center; line-height: 1.1;
}
.spage-why__badge strong { display: block; font-family: var(--font-heading); font-size: 1.7rem; font-weight: 800; }
.spage-why__badge span { font-size: 0.82rem; color: rgba(255,255,255,0.85); }
.spage-feats { list-style: none; padding: 0; margin: var(--space-lg) 0 0; display: grid; gap: var(--space-lg); }
.spage-feats li { display: flex; gap: var(--space-md); align-items: flex-start; margin: 0; }
.spage-feats__ic { flex: none; width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--color-primary-wash); color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; }
.spage-feats__ic svg { width: 22px; height: 22px; }
.spage-feats strong { display: block; font-family: var(--font-heading); color: var(--color-ink); font-size: 1.08rem; margin-bottom: 0.15rem; }
.spage-feats p { margin: 0; color: var(--color-text-light); font-size: 0.96rem; line-height: 1.6; }

/* Works / related heads */
.spage-works__head { text-align: center; margin-bottom: var(--space-2xl); }
.spage-works__head .eyebrow { margin-inline: auto; }
.spage-works__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.spage-works__grid figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.spage-works__grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform var(--transition); }
.spage-works__grid figure:hover img { transform: scale(1.05); }

/* Related service cards — image-led vertical cards */
.spage-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(20px, 2.4vw, 30px); max-width: 920px; margin-inline: auto; }
.spage-related__card { background: #fff; border: 1px solid var(--color-border); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; box-shadow: 0 16px 40px -30px rgba(7,94,102,.5); transition: transform var(--transition), box-shadow var(--transition); }
.spage-related__card:hover { transform: translateY(-5px); box-shadow: 0 28px 56px -28px rgba(7,94,102,.5); }
.spage-related__media { width: 100%; height: 196px; overflow: hidden; }
.spage-related__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.spage-related__card:hover .spage-related__media img { transform: scale(1.05); }
.spage-related__body { padding: clamp(20px, 2vw, 26px); display: flex; flex-direction: column; flex: 1; }
.spage-related__body h3 { font-family: var(--font-serif); font-weight: 800; font-size: 1.22rem; color: var(--color-ink); margin: 0 0 6px; }
.spage-related__body p { color: var(--color-text); font-size: 0.96rem; line-height: 1.6; margin: 0 0 16px; }
.spage-related__link { margin-top: auto; color: var(--color-primary-dark); font-weight: 700; font-family: var(--font-heading); font-size: 0.95rem; }

/* Gallery page grid */
.spage-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.spage-gallery-grid__item { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); position: relative; }
.spage-gallery-grid__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform var(--transition); }
.spage-gallery-grid__item:hover img { transform: scale(1.05); }
.spage-gallery-grid__item figcaption { position: absolute; inset-inline: 0; bottom: 0; background: linear-gradient(transparent, rgba(14,42,46,.82)); color: #fff; font-size: 0.86rem; padding: 1.4rem 0.9rem 0.7rem; }

/* Closing CTA band */
.spage-cta { background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary-darker)); color: #fff; padding: var(--space-3xl) 0; }
.spage-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); flex-wrap: wrap; }
.spage-cta__text h2 { color: #fff; margin-bottom: 0.3rem; }
.spage-cta__text p { color: rgba(255,255,255,0.9); margin: 0; max-width: 52ch; }
.spage-cta__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }

/* Responsive */
@media (max-width: 980px) {
  .spage-layout { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .spage-aside { position: static; max-width: 420px; }
  .spage-why__grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .spage-why__media { max-width: 480px; }
}
@media (max-width: 760px) {
  .spage-hero { min-height: 400px; padding-top: calc(var(--header-height) + 1.6rem); }
  .spage-works__grid { grid-template-columns: 1fr 1fr; }
  .spage-gallery-grid { grid-template-columns: 1fr 1fr; }
  .spage-related { grid-template-columns: 1fr; }
  .spage-cta__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .spage-works__grid, .spage-gallery-grid { grid-template-columns: 1fr; }
  .spage-related__media { width: 110px; }
}

/* =====================================================================
   SERVICE PAGE — editorial layout (promise / included / process / case)
   Teal = primary, sun = single accent (matches the logo). Used consistently.
   ===================================================================== */
/* hero tag pill (service pages) */
.spage-hero__tag { display:inline-block; padding:6px 15px; margin-bottom:14px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.32); border-radius:999px; font-family:var(--font-heading); font-weight:600; font-size:.82rem; letter-spacing:.04em; color:#fff; backdrop-filter:blur(6px); }

/* secondary (outline) button */
.btn--secondary { background:#fff; color:var(--color-primary-dark); border:1px solid rgba(12,163,175,.42); display:inline-flex; align-items:center; gap:.5em; }
.btn--secondary:hover { background:var(--color-primary-dark); color:#fff; border-color:var(--color-primary-dark); }
.btn--secondary .fa-arrow-left { font-size:.82em; transition:transform .25s cubic-bezier(.16,1,.3,1); }
.btn--secondary:hover .fa-arrow-left { transform:translateX(-4px); }

/* section heads */
.svc-head { max-width:680px; margin-bottom:clamp(26px,3vw,40px); }
.svc-head.center { margin-inline:auto; text-align:center; }
.svc-head h2 { font-family:var(--font-serif); font-weight:800; font-size:clamp(27px,3.3vw,40px); line-height:1.18; color:var(--color-ink); margin:0; }

/* page eyebrows — clean kicker (never the turquoise pill chip), matches the homepage */
.site-content .eyebrow { background:transparent; padding:0; border-radius:0; margin-bottom:14px; color:var(--color-primary-dark); font-family:var(--font-heading); font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px; }
.site-content .eyebrow::before { content:""; width:26px; height:1px; background:currentColor; opacity:.55; flex:0 0 auto; }
.site-content .eyebrow.on-dark { color:var(--color-sun); }
.site-content .svc-head.center .eyebrow, .site-content .svc-method__head .eyebrow { justify-content:center; }

/* INTRO — text + real photo (uniform width, image-led) */
.svc-intro { background:#fff; }
/* compound selector beats home-base .section{padding-block} which loads later */
.section.svc-intro { padding-bottom:clamp(8px,1.2vw,18px); }
.svc-intro__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,4.5vw,68px); align-items:center; }
.svc-intro__text h2 { font-family:var(--font-serif); font-weight:800; font-size:clamp(28px,3.4vw,42px); line-height:1.16; color:var(--color-ink); margin:0 0 18px; text-wrap:balance; }
.svc-intro__body { display:flex; flex-direction:column; gap:14px; }
.svc-intro__body p { font-size:17px; line-height:1.85; color:#46615F; margin:0; }
.svc-intro__proof { list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:13px; }
.svc-intro__proof li { display:flex; align-items:flex-start; gap:12px; font-size:15.5px; font-weight:600; color:var(--color-ink); line-height:1.45; }
.svc-intro__proof li svg { flex:0 0 auto; width:24px; height:24px; padding:5px; border-radius:50%; background:linear-gradient(140deg,#0CA3AF,#075E66); color:#fff; box-shadow:0 4px 12px -4px rgba(7,94,102,.55); margin-top:1px; }
.svc-intro__btn { margin-top:30px; }
/* INTRO photo collage — scattered tall photo + two stacked, gently offset (RTL: collage on the LEFT) */
.svc-intro__collage { display:grid; grid-template-columns:1.04fr 0.96fr; grid-template-rows:auto auto; gap:16px; }
.svc-intro__collage img { width:100%; height:100%; object-fit:cover; display:block; border-radius:18px; box-shadow:0 26px 52px -30px rgba(7,94,102,.55); }
.svc-intro__collage .c1 { grid-column:1; grid-row:1 / span 2; transform:translateY(-16px); }
.svc-intro__collage .c2 { grid-column:2; grid-row:1; aspect-ratio:4/3.5; }
.svc-intro__collage .c3 { grid-column:2; grid-row:2; aspect-ratio:4/3.5; transform:translateY(16px); }

/* INCLUDED — photo cards */
/* WHAT'S INCLUDED — image + scope list (single rich block) */
.svc-included { background:#fff; }
.section.svc-included { padding-top:clamp(8px,1.2vw,18px); }
.svc-incl__grid { display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(30px,4vw,64px); align-items:center; }
.svc-incl__media { position:relative; border-radius:22px; overflow:hidden; box-shadow:0 34px 70px -34px rgba(7,94,102,.55); }
.svc-incl__media img { display:block; width:100%; height:100%; aspect-ratio:4/4.2; object-fit:cover; }
.svc-incl__text .svc-head { margin-bottom:14px; }
.svc-incl__lead { font-size:clamp(1.02rem,1.3vw,1.16rem); line-height:1.8; color:var(--color-text); margin:0 0 clamp(20px,2.4vw,30px); }
.svc-incl__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(16px,1.8vw,22px); }
.svc-incl__item { display:flex; gap:16px; align-items:flex-start; }
.svc-incl__num, .svc-incl__ico { flex:0 0 auto; width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-weight:800; font-size:17px; color:#fff; background:linear-gradient(135deg,var(--color-primary),var(--color-primary-darker)); box-shadow:0 8px 18px -8px rgba(12,163,175,.6); }
.svc-incl__ico { font-size:19px; }
.svc-incl__copy h3 { font-family:var(--font-heading); font-weight:700; font-size:1.12rem; color:var(--color-ink); margin:5px 0 4px; }
.svc-incl__copy p { font-size:15px; line-height:1.7; color:#46615F; margin:0; }

/* TRUST BAND — identical look to the homepage "why" band, wave divider on TOP */
/* Same gradient as the homepage benefit-band: azure glow at the TOP, deep teal
   to the bottom (no bright blob at the bottom edge, so it sits cleanly above the
   dark method photo). */
.svc-band { position:relative; overflow:hidden;
  padding-top:clamp(66px,7.5vw,98px); padding-bottom:clamp(58px,6vw,82px);
  background:
    radial-gradient(125% 100% at 90% -10%, rgba(63,191,201,0.30) 0%, rgba(63,191,201,0) 46%),
    linear-gradient(165deg, #0A7C86 0%, #086A72 50%, #075E66 100%); }
.svc-band > .container { position:relative; z-index:2; }
.svc-band__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,2.6vw,44px); margin:0; }
/* thin top divider, identical mechanism to the cosmetics "pillars" band: native
   orientation, small height, fill = the white section above. */
.svc-band__shape { position:absolute; left:0; width:100%; overflow:hidden; line-height:0; direction:ltr; z-index:1; pointer-events:none; }
.svc-band__shape--top { top:-1px; }
.svc-band__shape svg { display:block; position:relative; left:50%; transform:translateX(-50%); width:calc(100% + 1.3px); height:clamp(22px,2.4vw,36px); }
.svc-band__shape .wsd-fill { fill:#fff; }

/* METHOD — full-bleed photo band + overlay + glass steps */
.svc-method { position:relative; overflow:hidden; padding-block:clamp(64px,7.5vw,104px); background:#0E1112; }
.svc-method::before { content:""; position:absolute; inset:0; z-index:0; background-image:var(--svc-method-bg); background-size:cover; background-position:center; background-attachment:fixed; }
.svc-method__overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.82) 100%); }
.svc-method__inner { position:relative; z-index:2; }
.svc-method__head { text-align:center; max-width:680px; margin:0 auto clamp(34px,4vw,52px); }
.svc-method__head h2 { font-family:var(--font-serif); font-weight:800; font-size:clamp(27px,3.1vw,40px); line-height:1.16; color:#fff; margin:0 0 12px; text-shadow:0 2px 16px rgba(0,0,0,.4); }
.svc-method__head p { font-size:16.5px; line-height:1.7; color:rgba(255,255,255,.84); margin:0; text-shadow:0 1px 10px rgba(0,0,0,.4); }
.svc-method .eyebrow.on-dark { color:rgba(255,255,255,.82); justify-content:center; }
.svc-method .eyebrow.on-dark::before { background:rgba(255,255,255,.5); }
.svc-method__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.4vw,20px); }
.svc-method__step { display:flex; flex-direction:column; gap:9px; padding:clamp(22px,2.2vw,30px) clamp(18px,1.6vw,24px); border-radius:16px; background:rgba(8,40,44,.5); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); border:1px solid rgba(255,177,46,.28); transition:transform .4s ease, border-color .4s ease; }
.svc-method__step:hover { transform:translateY(-5px); border-color:rgba(255,177,46,.55); }
.svc-method__step-head { display:flex; align-items:center; gap:14px; }
.svc-method__num { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; background:rgba(255,177,46,.14); border:1px solid rgba(255,177,46,.4); font-family:var(--font-serif); font-weight:800; font-size:19px; color:var(--color-sun); }
.svc-method__step h3 { font-family:var(--font-heading); color:#fff; font-size:clamp(18px,1.6vw,21px); font-weight:700; margin:0; line-height:1.2; }
.svc-method__step p { color:rgba(255,255,255,.8); line-height:1.6; margin:0; font-size:13.5px; }
.svc-method__cta { text-align:center; margin-top:clamp(30px,3.5vw,46px); }

/* DETAIL prose */
.svc-detail { background:linear-gradient(180deg,#eef7f8 0%,#f6fbfb 100%); padding-block:clamp(40px,4.4vw,60px); }

/* ── DEEP DETAIL: compact two-column — heading + intro + stacked feature cards
   on the RIGHT, one image on the LEFT that fills the full section height. ── */
.svc-deep { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(24px,2.8vw,44px); align-items:stretch; }
.svc-deep__main { min-width:0; }
.svc-deep__title { font-family:var(--font-serif); font-weight:800; font-size:clamp(22px,2.5vw,32px); line-height:1.18; color:var(--color-ink); margin:0 0 9px; text-align:right; }
.svc-deep__lead { margin:0 0 4px; font-size:clamp(1rem,1.05vw,1.08rem); line-height:1.6; color:var(--color-ink); text-align:right; }
.svc-deep__block { margin-top:clamp(16px,1.8vw,24px); }
.svc-deep__sub { font-family:var(--font-serif); font-weight:800; font-size:clamp(18px,1.85vw,22px); line-height:1.3; color:var(--color-primary-darker); margin:0 0 11px; text-align:right; padding-right:15px; position:relative; }
.svc-deep__sub::before { content:""; position:absolute; top:3px; right:0; width:5px; height:1.02em; border-radius:3px; background:linear-gradient(var(--color-primary),var(--color-primary-darker)); }

/* stacked horizontal feature cards: text right, number/icon box on the right edge */
.svc-deep__fcards { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.svc-deep__fcard { display:flex; align-items:stretch; background:#fff; border:1px solid rgba(7,94,102,.1); border-radius:12px; overflow:hidden; box-shadow:0 12px 28px -30px rgba(7,94,102,.5); transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease; }
.svc-deep__fcard:hover { transform:translateX(-3px); border-color:rgba(12,163,175,.4); box-shadow:0 18px 36px -30px rgba(7,94,102,.55); }
.svc-deep__fcard-c { flex:1 1 auto; padding:10px 18px; display:flex; flex-direction:column; justify-content:center; gap:1px; text-align:right; }
.svc-deep__fcard-t { font-family:var(--font-heading); font-weight:700; font-size:1.01rem; color:var(--color-primary-darker); margin:0; line-height:1.25; }
.svc-deep__fcard-d { margin:0; color:var(--color-text); line-height:1.48; font-size:14.5px; }
.svc-deep__fcard.is-plain { align-items:stretch; }
.svc-deep__fcard.is-plain .svc-deep__fcard-ic { font-size:17px; }
.svc-deep__fcard.is-plain .svc-deep__fcard-d { color:var(--color-ink); font-weight:500; }
.svc-deep__fcard-ic { flex:0 0 auto; width:50px; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,var(--color-primary),var(--color-primary-darker)); color:#fff; font-size:15px; }
.svc-deep__fcard-ic b { font-family:var(--font-heading); font-weight:800; font-size:19px; }

.svc-deep__note { margin:9px 0 0; color:#4A6468; font-size:14.5px; line-height:1.55; text-align:right; text-wrap:pretty; }
.svc-deep__cta { margin-top:clamp(14px,1.6vw,22px); }

/* left image column — fills the full height of the text column */
.svc-deep__media { align-self:stretch; position:relative; min-height:280px; border-radius:18px; overflow:hidden; box-shadow:0 24px 50px -34px rgba(7,94,102,.5); }
.svc-deep__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* CASE — quote/scenario card */
.svc-case { background:#fff; }
.svc-case__card { position:relative; max-width:880px; margin-inline:auto; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:clamp(34px,4.5vw,60px); box-shadow:0 26px 60px -36px rgba(7,94,102,.4); text-align:center; }
.svc-case__quotemark { position:absolute; top:2px; inset-inline-start:30px; font-family:var(--font-serif); font-size:120px; line-height:1; color:rgba(12,163,175,.12); pointer-events:none; }
.svc-case__tag { display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--color-primary-dark); margin-bottom:14px; position:relative; }
.svc-case__card h3 { font-family:var(--font-serif); font-weight:800; font-size:clamp(21px,2.4vw,30px); line-height:1.3; color:var(--color-ink); margin:0 0 16px; position:relative; }
.svc-case__card p { font-size:17px; line-height:1.75; color:#4A6468; margin:0 auto 22px; max-width:62ch; position:relative; }
.svc-case__proof { display:inline-flex; align-items:center; gap:9px; padding-top:18px; border-top:1px solid var(--color-border); font-size:14px; font-weight:600; color:var(--color-ink); }
.svc-case__proof svg { width:18px; height:18px; color:var(--color-sun); }

@media (max-width:980px){
  .svc-intro__grid{ grid-template-columns:1fr; gap:36px; }
  .svc-intro__collage{ max-width:540px; }
  .svc-incl__grid{ grid-template-columns:1fr; gap:32px; }
  .svc-incl__media img{ aspect-ratio:16/10; }
  .svc-method__grid{ grid-template-columns:repeat(2,1fr); }
  .svc-band__grid{ grid-template-columns:repeat(2,1fr); row-gap:42px; }
  .svc-deep{ grid-template-columns:1fr; gap:24px; }
  .svc-deep__media{ order:-1; aspect-ratio:16/10; min-height:0; max-width:560px; margin-inline:auto; width:100%; }
}
@media (max-width:680px){
  .svc-band__grid{ grid-template-columns:1fr; row-gap:34px; }
  .svc-method__grid{ grid-template-columns:1fr; }
  .svc-method::before{ background-attachment:scroll; }
  .svc-incl__item{ gap:13px; }
  .svc-deep__fcard-ic{ width:54px; }
  .svc-intro__collage .c1{ transform:none; }
  .svc-intro__collage .c3{ transform:none; }
}

/* ==========================================================================
   SUB-CATEGORY CARDS — spec 002 (solarsystem: each sub-category = photo + heading + text, 2×2)
   ========================================================================== */
.svc-included--cards { background:#fff; }
.svc-head--center { text-align:center; max-width:760px; margin:0 auto clamp(28px,3.4vw,46px); }
.svc-head--center h2 { margin-bottom:14px; }
.svc-head--center .svc-incl__lead { margin-inline:auto; }

.svc-subcards { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.4vw,30px); }

.svc-subcard {
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--color-border); border-radius:20px; overflow:hidden;
  box-shadow:0 18px 40px -26px rgba(7,94,102,.45);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.svc-subcard:hover, .svc-subcard:focus-within {
  transform:translateY(-4px);
  box-shadow:0 30px 60px -28px rgba(7,94,102,.55);
  border-color:var(--color-primary-light);
}
.svc-subcard__media { position:relative; aspect-ratio:16/10; overflow:hidden; }
.svc-subcard__media img { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.svc-subcard:hover .svc-subcard__media img { transform:scale(1.05); }
/* Number badge: inset-inline-START = the RIGHT edge in this RTL document, so it leads the card. */
.svc-subcard__num {
  position:absolute; top:14px; inset-inline-start:14px;
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:800; font-size:16px; color:#fff;
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-darker));
  box-shadow:0 8px 18px -8px rgba(12,163,175,.7);
}
.svc-subcard__body { padding:clamp(18px,2vw,26px); display:flex; flex-direction:column; gap:10px; }
/* Head row: service icon chip + heading. In RTL the flex row starts on the right, so the icon
   is the leading visual, ahead of the Hebrew heading (client correction pass 2026-07-23). */
/* min-height reserves two heading lines, so a card whose h3 wraps does not push its "who" box
   below the other card's in the same row. */
.svc-subcard__head { display:flex; align-items:center; gap:12px; min-height:56px; }
/* Teal, not sun, and tighter around the glyph (was a 44px sun chip around a 24px icon). */
.svc-subcard__ico {
  flex:none; width:40px; height:40px; border-radius:13px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary));
  color:#fff;
  box-shadow:0 8px 18px -10px rgba(12,163,175,.9);
}
.svc-subcard__body h3 { font-family:var(--font-heading); font-weight:700; font-size:1.2rem; color:var(--color-ink); margin:0; }
/* flex:1 on the lead paragraph - same trick as the homepage cards: it absorbs the slack so the
   "who" box, the includes list and the tags bottom-align across the two cards in each row. */
.svc-subcard__body > p:not(.svc-subcard__who) { flex:1; }
.svc-subcard__body p { font-size:15px; line-height:1.7; color:#46615F; margin:0; }
/* Who the area is for. The label is a per-card heading on its own line: as an inline pill it
   collided with the sentence beside it and wrapped awkwardly. Accent bar on the inline START
   (= the RIGHT edge in Hebrew). */
.svc-subcard__who {
  display:block;
  padding:11px 14px; border-radius:12px;
  border-inline-start:3px solid var(--color-primary);
  background:var(--color-primary-wash);
}
.svc-subcard__who-lbl {
  display:block; margin-bottom:3px;
  font-family:var(--font-heading); font-size:14px; font-weight:700; line-height:1.45;
  color:var(--color-primary-darker);
}
.svc-subcard__body .svc-subcard__who-txt {
  display:block; font-size:14px; line-height:1.6; color:#46615F;
}
/* What the area includes: scannable check list. */
.svc-subcard__list { list-style:none; display:flex; flex-direction:column; gap:8px; margin:2px 0 0; padding:0; }
.svc-subcard__list li { display:flex; align-items:flex-start; gap:9px; margin:0; font-size:14.5px; line-height:1.6; color:#46615F; }
.svc-subcard__list li svg { flex:none; margin-block-start:3px; color:var(--color-primary); }
.svc-subcard__tags { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 0; padding:0; }
.svc-subcard__tags li {
  font-size:12.5px; font-weight:600; color:var(--color-primary-dark);
  background:var(--color-primary-wash); border-radius:999px; padding:4px 11px; margin:0;
}
@media (max-width:760px){
  .svc-subcards { grid-template-columns:1fr; }
}
/* Callout box. The client's "בניינים משותפים" copy carries an explicit instruction to render one
   paragraph as a designed, eye-catching box at the second paragraph. That instruction is build
   direction, not page copy, so it becomes markup: the directive line is dropped and the paragraph
   it points at is wrapped in <aside class="svc-callout">. Tokens only (Art. III.1). */
.svc-callout {
  background: var(--color-sun-wash);
  border-inline-start: 4px solid var(--color-sun);
  border-radius: var(--radius-md);
  padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2.4vw, 1.6rem);
  margin: var(--space-lg) 0;
  box-shadow: var(--shadow-sm);
}
.svc-callout p {
  margin: 0;
  max-width: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.5;
  color: var(--color-heading);
}

/* Service-line parent with no body copy of its own (e.g. /private-construction/): show its
   sub-categories as cards instead of an empty page. */
.childgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 2vw, 26px); margin: 0; padding: 0; list-style: none; }
.childgrid li { margin: 0; }
.childgrid a {
  display: flex; flex-direction: column; gap: 0.5rem; height: 100%;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.childgrid a:hover, .childgrid a:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.childgrid h3 { margin: 0; font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--color-heading); }
.childgrid p { margin: 0; font-size: 0.97rem; color: var(--color-text); max-width: none; }
.childgrid .childgrid__more { margin-top: auto; color: var(--color-primary-dark); font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 0.4rem; }
@media (prefers-reduced-motion: reduce) { .childgrid a { transition: none; } .childgrid a:hover { transform: none; } }

/* Sub-category page: the client's verbatim article. Reading width and rhythm only, nothing added
   inside the copy itself. */
.svc-doc__body > h2 { margin-top: clamp(2rem, 3.4vw, 2.8rem); }
.svc-doc__body > h2:first-child { margin-top: 0; }
.svc-doc__body > h3 { margin-top: clamp(1.5rem, 2.6vw, 2rem); }
.svc-doc__body > p { max-width: none; }
.svc-doc__body > ul, .svc-doc__body > ol { padding-inline-start: 1.4rem; padding-inline-end: 0; margin-block: var(--space-md); }
.svc-doc__body > ul > li, .svc-doc__body > ol > li { margin-bottom: .55rem; }

/* Whole sub-category card is one link. */
.svc-subcard__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.svc-subcard__link:hover h3, .svc-subcard__link:focus-visible h3 { color: var(--color-primary-dark); }