/* ============================================================
   מתנאל ארצי - v2 (refined structure, light + green/teal)
   ============================================================ */

:root {
  /* Palette */
  --ink:        #0f1c26;
  --ink-2:      #2b3a47;
  --body:       #5a6773;
  --mute:       #8896a3;
  --line:       #e6ebef;
  --line-2:     #d2dae0;
  --paper:      #ffffff;
  --paper-2:    #f6f9fa;
  --paper-3:    #eef2f4;

  --green:      #4f9b87;
  --green-d:    #3a8472;
  --green-2:    #6fb5a1;
  --green-soft: #d6ebe4;
  --green-tint: #ecf6f2;
  --green-ink:  #1f4f43;

  --shadow-xs: 0 1px 2px rgba(15,28,38,.04);
  --shadow-sm: 0 2px 6px rgba(15,28,38,.05), 0 1px 2px rgba(15,28,38,.04);
  --shadow:    0 10px 30px rgba(15,28,38,.07), 0 2px 6px rgba(15,28,38,.04);
  --shadow-lg: 0 24px 60px rgba(15,28,38,.10), 0 8px 18px rgba(15,28,38,.05);

  /* Type */
  --f: "Heebo", "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Geometry */
  --maxw: 1240px;
  --gutter: clamp(1.1rem, 4vw, 3.5rem);
  --section-y: clamp(3rem, 7vw, 6.5rem);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --tap: 44px; /* min touch target */

  --ease: cubic-bezier(.2,.65,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --fast: 200ms;
  --med: 350ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--f);
  font-weight: 400;
  font-size: clamp(15px, .35vw + .85rem, 16.5px);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Utility: visually hidden but available to screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color var(--fast) var(--ease); }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; font-family: var(--f); }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; color: var(--ink); }
strong { color: var(--ink); font-weight: 700; }

::selection { background: var(--green); color: #fff; }

.skip-link {
  position: absolute; right: 1rem; top: -3rem;
  background: var(--green); color: #fff;
  padding: .55rem 1rem; border-radius: 8px;
  z-index: 1000; transition: top var(--fast) var(--ease);
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }

/* ─── Reveal ─── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .brand__logo { animation: none; transition: none; }
  .brand:hover .brand__logo, .brand:focus-visible .brand__logo { transform: none; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; right: 0; left: 0;
  z-index: 80;
  background: rgba(255,255,255,0);
  transition: background var(--med) var(--ease), box-shadow var(--med) var(--ease), border-color var(--med) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .85rem var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: inline-flex; align-items: center; gap: .65rem;
  color: var(--ink);
}
.brand__mark {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  background: var(--green);
  color: #fff;
  font-weight: 900;
  border-radius: 12px;
  font-size: 1rem;
  letter-spacing: .02em;
  box-shadow: 0 6px 14px rgba(79,155,135,.32);
}
.brand__logo {
  height: 88px;
  width: auto;
  display: block;
  transform: none;
  transform-origin: center;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.18));
  animation: logoSpinIn 1200ms var(--ease-out) 250ms backwards;
  transition: transform 750ms var(--ease-out);
}
.brand:hover .brand__logo,
.brand:focus-visible .brand__logo { transform: rotateY(360deg); }
/* new logo is dark artwork on transparent → flip to white over the dark hero + footer */
.nav:not(.is-scrolled) .brand__logo { filter: brightness(0) invert(1); }
.foot__brand .brand__logo { height: 124px; filter: brightness(0) invert(1); }

@keyframes logoSpinIn {
  0%   { opacity: 0; transform: perspective(700px) rotateY(-540deg) scale(.25); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: perspective(700px) rotateY(0deg) scale(1); }
}

.brand__logo--static { animation: none; }

.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-weight: 800; font-size: 1rem; color: var(--ink); }
.brand__role { font-size: .72rem; color: var(--mute); font-weight: 500; margin-top: .2rem; }

.nav.is-scrolled .brand__name { color: var(--ink); }

.nav:not(.is-scrolled) .brand__name,
.nav:not(.is-scrolled) .nav__links a { color: #fff; }
.nav:not(.is-scrolled) .brand__role { color: rgba(255,255,255,.7); }

.nav__links {
  justify-self: center;
  display: flex; align-items: center; gap: .25rem;
}
.nav__links a {
  color: var(--ink-2);
  font-weight: 500;
  font-size: .92rem;
  padding: .55rem .85rem;
  border-radius: 8px;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav.is-scrolled .nav__links a:hover { color: var(--green-d); background: var(--green-tint); }
.nav:not(.is-scrolled) .nav__links a:hover { color: var(--green-2); background: rgba(255,255,255,.08); }

.nav__cta { display: flex; align-items: center; gap: .55rem; }
.nav__phone {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--green);
  color: #fff !important;
  font-weight: 700;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  font-size: .9rem;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  box-shadow: 0 6px 16px rgba(79,155,135,.32);
}
.nav__phone svg { width: 16px; height: 16px; }
.nav__phone:hover { background: var(--green-d); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(79,155,135,.4); }

.hamburger {
  width: 42px; height: 42px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
}
.nav.is-scrolled .hamburger { background: var(--paper-3); border-color: transparent; }
.hamburger span {
  display: block; width: 21px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav.is-scrolled .hamburger span { background: var(--ink); }
.hamburger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-nav {
  position: absolute; right: 0; left: 0; top: 100%;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: .75rem var(--gutter) 1.25rem;
  gap: .25rem;
  box-shadow: var(--shadow);
  visibility: hidden;
  pointer-events: none;
}
.mobile-nav.is-open {
  visibility: visible;
  pointer-events: auto;
}
.mobile-nav a {
  padding: .9rem .5rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 500;
}
.mobile-nav a:last-child { border-bottom: 0; }

@media (max-width: 1024px) {
  .nav__links { display: none; }
  .hamburger { display: flex; }
  .nav__inner {
    grid-template-columns: 1fr auto;
    padding: .6rem var(--gutter);
    gap: .85rem;
  }
  .brand__role { display: none; }
  .brand__logo { height: 66px; }
  /* ── Mobile action buttons: phone (primary) + menu (secondary) ── */
  .nav__cta { gap: .5rem; }

  /* Phone - primary call-to-action: refined green circle with depth */
  .nav__phone {
    padding: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    justify-content: center;
    background: linear-gradient(140deg, var(--green-2), var(--green) 62%);
    box-shadow: 0 5px 16px rgba(79,155,135,.42), 0 1px 3px rgba(15,28,38,.16);
    transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  }
  .nav__phone span { display: none; }
  .nav__phone svg { width: 18px; height: 18px; }
  .nav__phone:active { transform: scale(.92); }

  /* Menu - secondary: frosted glass over the hero, clean white when scrolled */
  .hamburger {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.32);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
                box-shadow var(--fast) var(--ease), transform .2s var(--ease);
  }
  .hamburger:active { transform: scale(.92); }
  .hamburger span { width: 21px; border-radius: 2px; }
  .nav.is-scrolled .hamburger {
    background: #fff;
    border-color: var(--line-2);
    box-shadow: 0 3px 12px rgba(15,28,38,.09);
  }
  .nav.is-scrolled .hamburger span { background: var(--ink-2); }
}
@media (max-width: 520px) {
  .brand__mark { width: 38px; height: 38px; font-size: .88rem; border-radius: 10px; }
  .brand__name { font-size: .94rem; }
}

/* ============================================================
   HERO  (split: copy + stats card)
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(8rem, 14vw, 11rem) var(--gutter) clamp(4rem, 7vw, 6rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.8) brightness(.55);
}
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, rgba(15,28,38,.85) 0%, rgba(15,28,38,.55) 60%, rgba(15,28,38,.25) 100%),
    radial-gradient(ellipse at 10% 100%, rgba(79,155,135,.35), transparent 55%);
}

.hero__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

.hero__copy { color: #fff; }
@keyframes pulse {
  50% { box-shadow: 0 0 0 7px rgba(111,181,161,.08); }
}

.hero__title {
  margin-top: 1.5rem;
  color: #fff;
  font-size: clamp(2.3rem, 5.5vw, 4.4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.015em;
}
.hero__title .gold,
.gold { color: var(--green-2); }
.hero-rot { display: inline-block; min-width: 5.5ch; }
.hero-rot::after {
  content: ""; display: inline-block;
  width: 3px; height: 1em; vertical-align: -.12em;
  margin-inline-start: 3px;
  background: currentColor; border-radius: 2px;
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.hero__lede {
  margin-top: 1.5rem;
  max-width: 50ch;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  color: rgba(255,255,255,.82);
  line-height: 1.7;
}

.hero__cta {
  margin-top: 2.25rem;
  display: flex; flex-wrap: wrap; gap: .75rem;
}
.hero__sub {
  margin-top: .9rem;
  color: rgba(255,255,255,.6);
  font-size: .85rem;
  font-weight: 500;
}

/* Stats card on the right */
.hero__card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.hero-stat {
  padding: 1rem;
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;
}
.hero-stat__num {
  display: block;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
}
.hero-stat__num small { font-size: .55em; color: var(--green-2); font-weight: 800; margin-right: .1em; }
.hero-stat__lbl {
  display: block;
  margin-top: .65rem;
  font-size: .78rem;
  color: rgba(255,255,255,.75);
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 920px) {
  .hero__inner { grid-template-columns: 1fr; align-items: start; }
  .hero__card { max-width: 480px; }
}

/* ── Hero 3D project coverflow ── */
.hero__card--pcar {
  background: none; border: 0; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  display: block;
}
.pcar { position: relative; aspect-ratio: 1 / 0.85; perspective: 1150px; touch-action: pan-y; }
.pcar.is-drag .pcar__item { transition: none; }   /* follow the finger instantly while dragging */
.pcar__viewport { position: absolute; inset: 0; transform-style: preserve-3d; }
.pcar__item {
  position: absolute; top: 0; left: 50%;
  width: 60%; aspect-ratio: 4/5; margin-left: -30%;
  border-radius: 18px; overflow: hidden;
  background: #0c1822;
  box-shadow: 0 26px 55px rgba(0,0,0,.5);
  transition: transform .6s var(--ease-out), opacity .6s var(--ease-out);
  will-change: transform, opacity;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.pcar__item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.pcar__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,16,22,.92) 0%, rgba(8,16,22,.15) 55%, transparent 78%);
}
.pcar__badge {
  position: absolute; top: .85rem; inset-inline-end: .85rem; z-index: 2;
  font-size: .68rem; font-weight: 800; padding: .25rem .7rem; border-radius: 999px;
  background: rgba(15,28,38,.72); color: #fff; backdrop-filter: blur(4px);
}
.pcar__badge--live { background: var(--green); box-shadow: 0 4px 12px rgba(79,155,135,.4); }
.pcar__info { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 1.1rem 1.2rem; color: #fff; text-align: right; }
.pcar__num { display: block; font-size: 2.5rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.pcar__num small { font-size: .38em; font-weight: 700; color: var(--green-2); margin-inline-start: .35em; }
.pcar__name { display: block; margin-top: .35rem; font-size: .85rem; color: rgba(255,255,255,.85); font-weight: 600; }
.pcar__dots { position: absolute; bottom: 8px; inset-inline: 0; display: flex; justify-content: center; gap: .45rem; z-index: 4; }
.pcar__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); border: 0; padding: 0; cursor: pointer; transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.pcar__dot.is-active { background: var(--green-2); transform: scale(1.45); }
.pcar__total { margin-top: 1.3rem; text-align: center; color: rgba(255,255,255,.82); font-size: .85rem; font-weight: 600; }
.pcar__total strong { color: #fff; font-weight: 900; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 1.45rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
  transition: all var(--fast) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn--primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 10px 24px rgba(79,155,135,.4);
}
.btn--primary:hover { background: var(--green-d); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(79,155,135,.5); }
.btn--ghost {
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.btn--outline {
  background: #fff;
  color: var(--green-d);
  border: 1.5px solid var(--green);
}
.btn--outline:hover {
  background: var(--green);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(79,155,135,.32);
}

/* ============================================================
   COMMON
   ============================================================ */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--green-d);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.section-eyebrow .rule-sm,
.rule-sm {
  display: inline-block; width: 28px; height: 2px;
  background: var(--green); border-radius: 2px;
}
.section-title {
  margin-top: .65rem;
  font-size: clamp(1.85rem, 3.4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -.015em;
}
.section-title .gold { color: var(--green); }

/* ============================================================
   ABOUT (image left + text right with bullets)
   ============================================================ */
.about {
  padding: var(--section-y) var(--gutter);
  background: var(--paper);
}
.about__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  grid-template-areas: "visual head" "visual body";
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: 1.4rem;
  align-items: start;
}
.about__visual { grid-area: visual; align-self: center; }
.about__head   { grid-area: head; }
.about__txt    { grid-area: body; }
.about__head .section-eyebrow { margin-bottom: 1rem; display: inline-flex; }

.about__visual { position: relative; }
/* clean offset green panel behind the portrait (layered, architectural) */
.about__visual::before {
  content: "";
  position: absolute; z-index: 0;
  inset: 20px 20px -20px -20px;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--green-2) 0%, var(--green-d) 100%);
}
.about__photo {
  position: relative;
  z-index: 1;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-3);
  box-shadow: var(--shadow);
}
.about__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.about__visual:hover .about__photo img { transform: scale(1.04); }
.about__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(15,28,38,.55) 100%);
  pointer-events: none;
}
.about__tag {
  position: absolute; top: 1rem; right: 1rem;
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.96);
  color: var(--green-d);
  font-weight: 700;
  font-size: .78rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.about__tag svg { width: 14px; height: 14px; }

.about__signature {
  position: absolute;
  right: 1.25rem; bottom: 1.25rem;
  display: flex; flex-direction: column;
  color: #fff;
  z-index: 2;
}
.sign__name { font-weight: 800; font-size: 1.15rem; color: #fff; line-height: 1.2; }
.sign__title { font-size: .8rem; color: rgba(255,255,255,.85); margin-top: .2rem; }

.about__txt p { margin-top: 1.2rem; }

.about__bullets {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem 1.25rem;
}
.about__bullets li {
  display: flex; align-items: center; gap: .65rem;
  color: var(--ink-2);
  font-size: .94rem;
  font-weight: 500;
}
.about__bullets li i {
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  background: var(--green-tint);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.about__bullets li i::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 2px solid var(--green-d);
  border-bottom: 2px solid var(--green-d);
  transform: rotate(-45deg);
  margin-top: -2px;
}

@media (max-width: 900px) {
  /* mobile order: heading → portrait → body (portrait integrated mid-section) */
  .about__inner { display: flex; flex-direction: column; gap: 1.8rem; }
  .about__head { order: 1; }
  .about__visual { order: 2; max-width: 340px; margin: .3rem auto; width: 100%; }
  .about__visual::before { inset: 14px 14px -14px -14px; }
  .about__txt { order: 3; }
  .about__bullets { grid-template-columns: 1fr; }
}

/* ============================================================
   SERVICES (8-card grid like gm-civileng)
   ============================================================ */
.services {
  padding: var(--section-y) var(--gutter);
  background: var(--paper-2);
}
.services__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.services__head {
  text-align: center;
  margin-bottom: 3rem;
}
.services__head .section-eyebrow { justify-content: center; }
.services__sub {
  margin-top: 1rem;
  color: var(--body);
  max-width: 52ch;
  margin-inline: auto;
}

.services__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.srv {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--line);
  transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease), border-color var(--med) var(--ease);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.srv::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 3px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--med) var(--ease);
}
.srv:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--green-soft);
}
.srv:hover::before { transform: scaleX(1); }
.srv__icon {
  width: 60px; height: 60px;
  margin: 0 auto 1.15rem;
  display: grid; place-items: center;
  background: var(--green-tint);
  border-radius: 16px;
  color: var(--green-d);
  transition: background var(--med) var(--ease), color var(--med) var(--ease), transform var(--med) var(--ease);
}
.srv:hover .srv__icon { background: var(--green); color: #fff; transform: rotate(-4deg) scale(1.05); }
.srv__icon svg { width: 28px; height: 28px; }
.srv h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: .6rem;
}
.srv p {
  color: var(--body);
  font-size: .88rem;
  line-height: 1.6;
}

@media (max-width: 1040px) { .services__list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .services__list { grid-template-columns: repeat(2, 1fr); } }
/* mobile: stay at 2 columns - compact instead of full-width stretch */

/* ============================================================
   VALUES (3-up numbered)
   ============================================================ */
.values {
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
  background: var(--green-ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.values::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 90% 10%, rgba(79,155,135,.35), transparent 50%),
    radial-gradient(ellipse at 10% 90%, rgba(79,155,135,.20), transparent 50%);
  pointer-events: none;
}
.values__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.val {
  padding: 1.5rem 0;
  border-right: 1px solid rgba(255,255,255,.15);
  padding-right: 2rem;
}
.val:first-child { border-right: 0; padding-right: 0; }
.val__num {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  color: var(--green-2);
  letter-spacing: .15em;
  margin-bottom: .85rem;
}
.val h3 {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: .65rem;
}
.val p {
  color: rgba(255,255,255,.78);
  font-size: .95rem;
  line-height: 1.65;
}

@media (max-width: 820px) {
  .values__inner { grid-template-columns: 1fr; gap: 1rem; }
  .val { border-right: 0; padding-right: 0; padding: 1.25rem 0; border-bottom: 1px solid rgba(255,255,255,.15); }
  .val:last-child { border-bottom: 0; }
}

/* ============================================================
   PROJECTS (uniform card grid)
   ============================================================ */
.projects {
  padding: var(--section-y) var(--gutter);
  background: var(--paper);
}
.projects__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.projects__head { text-align: center; margin-bottom: 3rem; }
.projects__head .section-eyebrow { justify-content: center; }
.projects__sub {
  margin-top: 1rem;
  color: var(--body);
  max-width: 56ch;
  margin-inline: auto;
}

.projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.proj-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease), border-color var(--med) var(--ease);
  display: flex; flex-direction: column;
}
.proj-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--green-soft); }

.proj-card__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.proj-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.proj-card:hover .proj-card__media img { transform: scale(1.06); }

/* Inline image slider inside each project card */
.slider__track {
  display: flex;
  height: 100%;
  direction: ltr; /* slides ordered left-to-right; placement handled below */
  transition: transform .5s var(--ease-out);
}
.slider__track img { flex: 0 0 100%; }
.slider__nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  direction: ltr;            /* stop RTL bidi-mirroring of the ‹ › chevrons */
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.88);
  color: var(--ink);
  border-radius: 50%;
  font-size: 1.5rem; line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--med) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.proj-card__media:hover .slider__nav,
.slider__nav:focus-visible { opacity: 1; }
.slider__nav:hover { background: var(--green); color: #fff; }
.slider__nav--prev { right: .6rem; }
.slider__nav--next { left: .6rem; }
.slider__dots {
  position: absolute; bottom: .7rem; left: 0; right: 0;
  z-index: 3;
  display: flex; justify-content: center; gap: .4rem;
}
.slider__dot {
  width: 7px; height: 7px;
  padding: 0; border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  cursor: pointer;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.slider__dot.is-active { background: #fff; transform: scale(1.4); }
/* On touch devices there is no hover - keep the arrows visible */
/* mobile / touch: hide arrows (they covered the image) - swipe + dots instead */
@media (hover: none), (max-width: 760px) { .slider__nav { display: none; } }

.badge {
  position: absolute; top: 1rem; right: 1rem;
  font-size: .72rem;
  font-weight: 800;
  padding: .35rem .8rem;
  border-radius: 999px;
  letter-spacing: .04em;
}
.badge--live {
  background: var(--green);
  color: #fff;
  box-shadow: 0 6px 14px rgba(79,155,135,.32);
}
.badge--live::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  margin-left: .35rem; margin-right: -.15rem;
  animation: pulse 2s ease-in-out infinite;
}
.badge--done {
  background: rgba(15,28,38,.85);
  color: #fff;
}

.proj-card__body {
  padding: 1.35rem 1.4rem 1.6rem;
  display: flex; flex-direction: column;
}
.proj-num {
  font-size: .72rem;
  font-weight: 800;
  color: var(--green-d);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.proj-card__body h3 {
  margin-top: .35rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
}
.proj-loc {
  margin-top: .35rem;
  color: var(--mute);
  font-size: .9rem;
  display: flex; align-items: center; gap: .35rem;
}
.proj-loc::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); display: inline-block;
}
.proj-tags {
  margin-top: 1.15rem;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.proj-tags li {
  font-size: .72rem;
  font-weight: 600;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: var(--paper-3);
  color: var(--ink-2);
}
.proj-card--live .proj-tags li { background: var(--green-tint); color: var(--green-d); }

/* CTA card at the end of the grid */
.proj-card--cta {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-d) 100%);
  color: #fff;
  cursor: pointer;
  border: 0;
  position: relative;
  overflow: hidden;
}
.proj-card--cta::before {
  content: "";
  position: absolute;
  top: -40%; left: -40%;
  width: 180%; height: 180%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 50%);
  pointer-events: none;
}
.proj-card--cta:hover { transform: translateY(-4px); box-shadow: 0 24px 40px rgba(79,155,135,.42); border-color: transparent; }
.proj-card__cta-body {
  position: relative;
  padding: 2rem;
  display: flex; flex-direction: column;
  height: 100%;
  min-height: 280px;
  justify-content: center;
}
.proj-card--cta .proj-num { color: rgba(255,255,255,.8); }
.proj-card__cta-body h3 {
  margin-top: .35rem;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
}
.proj-card__cta-body p {
  margin-top: 1rem;
  color: rgba(255,255,255,.88);
  font-size: .95rem;
  line-height: 1.6;
}
.proj-card__cta-link {
  margin-top: 1.5rem;
  display: inline-flex; align-items: center; gap: .4rem;
  background: #fff;
  color: var(--green-d);
  font-weight: 800;
  font-size: .9rem;
  padding: .65rem 1.15rem;
  border-radius: 999px;
  align-self: flex-start;
  transition: transform var(--fast) var(--ease);
}
.proj-card__cta-link svg { width: 14px; height: 14px; transform: scaleX(-1); }
.proj-card--cta:hover .proj-card__cta-link { transform: translateX(-4px); }

@media (max-width: 900px) { .projects__grid { grid-template-columns: repeat(2, 1fr); } }
/* mobile: stay at 2 columns - compact cards instead of full-width stretch */

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  padding: var(--section-y) var(--gutter);
  background: var(--paper-2);
}
.faq__inner {
  max-width: 900px;
  margin: 0 auto;
}
.faq__head { text-align: center; margin-bottom: 2.5rem; }
.faq__head .section-eyebrow { justify-content: center; }
.faq__list {
  display: flex; flex-direction: column;
  gap: .65rem;
}
.faq__item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.faq__item[open] { border-color: var(--green-soft); box-shadow: var(--shadow-sm); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  font-weight: 700;
  color: var(--ink);
  font-size: 1rem;
  text-align: right;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q::after {
  content: "+";
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: var(--green-tint);
  color: var(--green-d);
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.faq__item[open] .faq__q::after {
  content: "−";
  background: var(--green); color: #fff;
}
.faq__a p {
  padding: 0 1.4rem 1.3rem;
  color: var(--body);
  margin: 0;
  line-height: 1.7;
}

/* ============================================================
   CONTACT (two-column: info + form)
   ============================================================ */
.contact {
  padding: var(--section-y) var(--gutter);
  background: var(--paper);
}
.contact__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.contact__intro .section-title { margin-top: .6rem; }
.contact__lede { margin-top: 1.25rem; color: var(--body); max-width: 50ch; }

.contact__list {
  margin-top: 2rem;
  display: flex; flex-direction: column;
  gap: 1.1rem;
}
.contact__list li {
  display: flex; align-items: center; gap: 1rem;
}
.contact__ico {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--green-tint);
  color: var(--green-d);
  border-radius: 14px;
  flex-shrink: 0;
}
.contact__ico svg { width: 22px; height: 22px; }
.contact__lbl {
  display: block;
  font-size: .78rem;
  color: var(--mute);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.contact__list a, .contact__list span:not(.contact__lbl) {
  display: block;
  font-weight: 700;
  color: var(--ink);
  font-size: 1.05rem;
  margin-top: .1rem;
}
.contact__list a:hover { color: var(--green-d); }
/* icon-as-link: keep the tile styling, don't inherit the text-link rules above */
.contact__list a.contact__ico {
  display: grid; place-items: center;
  margin: 0;
  font-size: inherit;
  color: var(--green-d);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.contact__list a.contact__ico:hover,
.contact__list a.contact__ico:focus-visible {
  background: var(--green-d);
  color: #fff;
  transform: translateY(-1px);
}

.form {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  gap: 1rem;
}
.form__head h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
}
.form__head p { color: var(--mute); font-size: .9rem; margin-top: .2rem; }

.form__field { display: flex; flex-direction: column; gap: .4rem; }
.form__field label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-2);
  display: flex; align-items: baseline; gap: .35rem;
}
.form__opt {
  font-size: .72rem;
  font-weight: 500;
  color: var(--mute);
}
.form__field input,
.form__field textarea {
  font: inherit;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: .85rem 1rem;
  color: var(--ink);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  width: 100%;
}
.form__field textarea { min-height: 110px; resize: vertical; }
.form__field input:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

.form button[type="submit"] {
  margin-top: .5rem;
  background: var(--green);
  color: #fff;
  border: 0;
  padding: 1rem 1.65rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  box-shadow: 0 10px 24px rgba(79,155,135,.36);
}
.form button[type="submit"]:hover { background: var(--green-d); transform: translateY(-2px); }
.form button[type="submit"] svg { width: 16px; height: 16px; }
.form__small {
  color: var(--mute);
  font-size: .8rem;
  text-align: center;
  margin: 0;
}

@media (max-width: 900px) {
  .contact__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  background: var(--ink);
  color: rgba(255,255,255,.7);
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) 0;
}
.foot__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.foot__brand .brand__mark { background: var(--green); }
.foot__brand .brand__name { color: #fff; }
.foot__brand .brand__role { color: rgba(255,255,255,.55); }
.foot__about { margin-top: 1rem; color: rgba(255,255,255,.62); font-size: .9rem; max-width: 38ch; line-height: 1.6; }

.foot__col { display: flex; flex-direction: column; gap: .55rem; }
.foot__h {
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  margin-bottom: .35rem;
  letter-spacing: .04em;
}
.foot__col a { color: rgba(255,255,255,.7); font-size: .92rem; }
.foot__col a:hover { color: var(--green-2); }
.foot__col span { font-size: .92rem; color: rgba(255,255,255,.55); }

.foot__bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.25rem 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
  color: rgba(255,255,255,.4);
  font-size: .82rem;
}
@media (max-width: 800px) { .foot__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .foot__inner { grid-template-columns: 1fr; } }

/* ============================================================
   FLOAT WHATSAPP
   ============================================================ */
.float-wa {
  position: fixed;
  bottom: 1.5rem; left: 1.5rem;
  z-index: 60;
  width: 56px; height: 56px;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(20px);
  box-shadow: 0 14px 30px rgba(79,155,135,.45);
  transition: all var(--med) var(--ease);
}
.float-wa svg { width: 28px; height: 28px; }
.float-wa.is-shown { opacity: 1; visibility: visible; transform: none; }
.float-wa:hover { background: var(--green-d); transform: scale(1.06); }

/* ============================================================
   PROCESS (5-step timeline)
   ============================================================ */
.process {
  padding: var(--section-y) var(--gutter);
  background: var(--paper);
}
.process__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.process__head {
  text-align: center;
  margin-bottom: 3rem;
}
.process__head .section-eyebrow { justify-content: center; }
.process__sub {
  margin-top: 1rem;
  color: var(--body);
  max-width: 56ch;
  margin-inline: auto;
}
.process__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  position: relative;
  counter-reset: step;
}
.process__list::before {
  content: "";
  position: absolute;
  top: 38px;
  right: 8%;
  left: 8%;
  height: 2px;
  background: linear-gradient(90deg, var(--green-soft) 0%, var(--green) 50%, var(--green-soft) 100%);
  z-index: 0;
}
.step {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column;
  align-items: stretch;
  text-align: center;
}
.step__num {
  width: 76px; height: 76px;
  margin: 0 auto 1.25rem;
  display: grid; place-items: center;
  background: #fff;
  color: var(--green-d);
  font-size: 1.5rem;
  font-weight: 900;
  border: 2px solid var(--green);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(79,155,135,.18);
  transition: background var(--med) var(--ease), color var(--med) var(--ease), transform var(--med) var(--ease);
}
.step:hover .step__num {
  background: var(--green);
  color: #fff;
  transform: scale(1.05);
}
.step__body {
  padding: 1.25rem 1rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  flex: 1;
  display: flex; flex-direction: column;
}
.step__body h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: .6rem;
}
.step__body p {
  color: var(--body);
  font-size: .88rem;
  line-height: 1.6;
  flex: 1;
}
.step__meta {
  display: inline-block;
  margin-top: 1rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--green-d);
  background: var(--green-tint);
  padding: .35rem .7rem;
  border-radius: 999px;
  letter-spacing: .04em;
  align-self: center;
}
.process__cta {
  margin-top: 3rem;
  text-align: center;
}

@media (max-width: 1024px) {
  .process__list { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .process__list::before { display: none; }
}

/* Mobile: horizontal scroll-snap carousel */
@media (max-width: 820px) {
  .process__list {
    display: flex;
    gap: .85rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--gutter);
    padding: .75rem var(--gutter) 1.25rem;
    margin: 0 calc(-1 * var(--gutter));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--green-soft) transparent;
  }
  .process__list::-webkit-scrollbar { height: 6px; }
  .process__list::-webkit-scrollbar-track { background: transparent; }
  .process__list::-webkit-scrollbar-thumb { background: var(--green-soft); border-radius: 999px; }
  .step {
    flex: 0 0 78%;
    max-width: 300px;
    scroll-snap-align: start;
  }
  .process__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: .25rem;
    color: var(--mute);
    font-size: .8rem;
    font-weight: 500;
  }
  .process__hint svg {
    width: 16px; height: 16px;
    animation: hintSlide 1.8s ease-in-out infinite;
  }
}
@keyframes hintSlide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-5px); }
}
.process__hint { display: none; }

/* ============================================================
   PROJECT FILTER
   ============================================================ */
.proj-filter {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem;
  margin-bottom: 1.75rem;
}
.proj-filter__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.1rem;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.proj-filter__btn:hover {
  border-color: var(--green);
  color: var(--green-d);
  background: var(--green-tint);
}
.proj-filter__btn.is-active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  box-shadow: 0 6px 14px rgba(79,155,135,.28);
}
.proj-filter__count {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px;
  padding: 0 .35rem;
  background: var(--paper-3);
  color: var(--mute);
  font-size: .72rem;
  font-weight: 800;
  border-radius: 999px;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.proj-filter__btn:hover .proj-filter__count {
  background: #fff; color: var(--green-d);
}
.proj-filter__btn.is-active .proj-filter__count {
  background: rgba(255,255,255,.22); color: #fff;
}
.proj-card.is-hidden { display: none; }

/* ============================================================
   TRUST MARKERS (about + footer)
   ============================================================ */
.trust {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.trust__item {
  display: flex; align-items: center; gap: .75rem;
}
.trust__ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--green-tint);
  color: var(--green-d);
  border-radius: 10px;
  flex-shrink: 0;
}
.trust__ico svg { width: 20px; height: 20px; }
.trust__lbl {
  display: block;
  font-size: .72rem;
  color: var(--mute);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.trust__val {
  display: block;
  font-size: .9rem;
  color: var(--ink);
  font-weight: 700;
  margin-top: .15rem;
}

.foot__trust {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.25rem 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
  font-size: .85rem;
  color: rgba(255,255,255,.75);
}
.foot__trust-item {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600;
}
.foot__trust-item svg { width: 16px; height: 16px; color: var(--green-2); }

.foot__legal { display: inline-flex; align-items: center; gap: .55rem; }
.foot__legal a { color: rgba(255,255,255,.62); }
.foot__legal a:hover { color: var(--green-2); }

@media (max-width: 760px) {
  .trust { grid-template-columns: 1fr; gap: 1rem; }
}

/* ============================================================
   MOBILE STICKY CTA BAR
   ============================================================ */
.mobile-cta {
  position: fixed;
  bottom: 0; right: 0; left: 0;
  z-index: 70;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(15,28,38,.08);
  display: none;
  padding: .55rem max(.75rem, env(safe-area-inset-right)) calc(.55rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
  gap: .5rem;
  transform: translateY(110%);
  transition: transform var(--med) var(--ease);
}
.mobile-cta.is-shown { transform: none; }
.mobile-cta__btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 50px;
  padding: .6rem .5rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: .88rem;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease);
}
.mobile-cta__btn svg { width: 18px; height: 18px; }
.mobile-cta__btn:active { transform: scale(.97); }
.mobile-cta__btn--call { background: var(--green); color: #fff; }
.mobile-cta__btn--call:hover { background: var(--green-d); }
.mobile-cta__btn--wa { background: var(--green-tint); color: var(--green-d); border: 1px solid var(--green-soft); }
.mobile-cta__btn--wa:hover { background: var(--green-soft); }
.mobile-cta__btn--form { background: var(--paper-3); color: var(--ink); border: 1px solid var(--line-2); }
.mobile-cta__btn--form:hover { background: var(--paper-2); border-color: var(--green); color: var(--green-d); }

@media (max-width: 820px) {
  .mobile-cta { display: flex; }
  /* hide desktop floating WhatsApp on mobile in favor of bottom bar */
  .float-wa { display: none; }
  /* reserve space at the bottom of the page so the bar doesn't cover content */
  body { padding-bottom: 76px; }
}

/* ============================================================
   STATIC PAGES (privacy, terms)
   ============================================================ */
.page {
  padding: clamp(7rem, 12vw, 9rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  background: var(--paper-2);
  min-height: 70vh;
}
.page__inner {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--shadow-sm);
}
.page__head {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
}
.page__title {
  margin-top: .65rem;
  font-size: clamp(1.85rem, 3.6vw, 2.5rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}
.page__meta {
  margin-top: .85rem;
  font-size: .82rem;
  color: var(--mute);
  font-weight: 500;
}
.page__body {
  color: var(--body);
  font-size: 1rem;
  line-height: 1.8;
}
.page__body h2 {
  margin-top: 2.25rem;
  margin-bottom: .75rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink);
}
.page__body h2:first-child { margin-top: 0; }
.page__body p { margin: 0 0 1rem; }
.page__body ul {
  margin: 0 0 1.25rem;
  padding-right: 0;
  list-style: none;
}
.page__body ul li {
  position: relative;
  padding-right: 1.5rem;
  margin-bottom: .55rem;
}
.page__body ul li::before {
  content: "";
  position: absolute;
  right: 0; top: .65em;
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
}
.page__body a {
  color: var(--green-d);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--green-soft);
  transition: text-decoration-color var(--fast) var(--ease);
}
.page__body a:hover { text-decoration-color: var(--green); }
.page__back {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.page__back a {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--green-d);
  font-weight: 700;
  text-decoration: none;
}
.page__back a:hover { color: var(--green); }

/* ============================================================
   ANIMATION SCRIPT - "building up" motion language
   ============================================================ */

@keyframes navDrop      { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes fadeUp       { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fadeUpSm     { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn       { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn      { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes kenBurns     { 0%, 100% { transform: scale(1) translate(0,0); } 50% { transform: scale(1.06) translate(-1.2%, -1%); } }
@keyframes shimmer      { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes shine        { 0% { transform: translateX(120%) skewX(-18deg); } 100% { transform: translateX(-220%) skewX(-18deg); } }
@keyframes stepPop      { 0% { opacity: 0; transform: scale(.55); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes breathe      { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes drawerDrop   { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* ── Hero entrance (page load, sequenced) ──────────────────── */
.hero__title,
.hero__lede,
.hero__cta,
.hero__sub,
.hero__card {
  opacity: 0;
  will-change: opacity, transform;
}
.hero__title  { animation: fadeUp   .8s var(--ease-out)  .55s forwards; }
.hero__lede   { animation: fadeUp   .7s var(--ease-out)  .85s forwards; }
.hero__cta    { animation: fadeUpSm .6s var(--ease-out) 1.10s forwards; }
.hero__sub    { animation: fadeIn   .5s var(--ease-out) 1.45s forwards; }
.hero__card   { animation: fadeUp   .8s var(--ease-out)  .95s forwards; }

.nav { animation: navDrop .55s var(--ease-out) .1s backwards; }

/* Subtle Ken-Burns on hero background */
.hero__media img { animation: kenBurns 22s ease-in-out infinite; }

/* ── Number counters: smooth entry, JS drives the value ──── */
.hero-stat__num { font-variant-numeric: tabular-nums; }

/* ── Section eyebrow rule: draws to full width on reveal ── */
.rule-sm { width: 0; transition: width .8s var(--ease-out) .15s; }
.reveal.is-visible .rule-sm { width: 28px; }

/* ── Section title `.gold` part subtle delayed color ───── */
.gold { transition: color .6s var(--ease-out); }

/* ── About photo: scales into place when revealed ──────── */
.about__visual .about__photo {
  transform: scale(.96);
  transition: transform .9s var(--ease-out), box-shadow var(--med) var(--ease);
}
.about__visual.is-visible .about__photo { transform: scale(1); }
.about__tag, .about__signature {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s var(--ease-out) .4s, transform .6s var(--ease-out) .4s;
}
.about__visual.is-visible .about__tag,
.about__visual.is-visible .about__signature {
  opacity: 1;
  transform: none;
}

/* ── Service icon: gentle pop on card reveal ──────────── */
.srv .srv__icon {
  transform: scale(.85);
  transition: transform .7s var(--ease-out) .2s, background var(--med) var(--ease), color var(--med) var(--ease);
}
.srv.is-visible .srv__icon { transform: scale(1); }

/* ── Process timeline: connector line draws right→left ── */
.process__list { position: relative; }
.process__list::before {
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform 1.4s var(--ease-out);
}
.process__list.is-drawn::before { transform: scaleX(1); }
/* Step circles pop in sequence (JS adds .is-popped per step) */
.step .step__num {
  opacity: 0;
  transform: scale(.55);
}
.step.is-popped .step__num { animation: stepPop .7s var(--ease-out) forwards; }
.step .step__body { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.step.is-popped .step__body { opacity: 1; transform: none; transition-delay: .35s; }

/* ── Project images: settle from slight zoom on reveal ── */
.proj-card .proj-card__media img {
  transform: scale(1.08);
  transition: transform 1.2s var(--ease-out);
}
.proj-card.is-visible .proj-card__media img { transform: scale(1); }
.proj-card.proj-card--cta .proj-card__cta-body > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.proj-card.proj-card--cta.is-visible .proj-card__cta-body > * { opacity: 1; transform: none; }
.proj-card.proj-card--cta.is-visible .proj-card__cta-body > *:nth-child(1) { transition-delay: .1s; }
.proj-card.proj-card--cta.is-visible .proj-card__cta-body > *:nth-child(2) { transition-delay: .2s; }
.proj-card.proj-card--cta.is-visible .proj-card__cta-body > *:nth-child(3) { transition-delay: .3s; }
.proj-card.proj-card--cta.is-visible .proj-card__cta-body > *:nth-child(4) { transition-delay: .4s; }

/* ── Trust items: tiny pop ─────────────────────────────── */
.trust__item {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.about__txt.is-visible .trust__item { opacity: 1; transform: none; }
.about__txt.is-visible .trust__item:nth-child(1) { transition-delay: .4s; }
.about__txt.is-visible .trust__item:nth-child(2) { transition-delay: .55s; }
.about__txt.is-visible .trust__item:nth-child(3) { transition-delay: .7s; }

/* ── Primary buttons: shine sweep on hover ─────────────── */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 40%; right: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(120%) skewX(-18deg);
  pointer-events: none;
  z-index: 0;
}
.btn--primary:hover::after { animation: shine .85s ease-out; }
.btn--primary > * { position: relative; z-index: 1; }

/* Nav phone button gets same treatment */
.nav__phone { position: relative; overflow: hidden; }
.nav__phone::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(120%) skewX(-18deg);
  pointer-events: none;
}
.nav__phone:hover::after { animation: shine .9s ease-out; }
.nav__phone > * { position: relative; z-index: 1; }

/* ── FAQ content: gentle fade when item opens ──────────── */
.faq__a p {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.faq__item[open] .faq__a p {
  opacity: 1;
  transform: none;
  transition-delay: .05s;
}

/* ── Mobile menu drawer ────────────────────────────────── */
.mobile-nav {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
}
.mobile-nav.is-open {
  opacity: 1;
  transform: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear 0s;
}
.mobile-nav a {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), background var(--fast) var(--ease);
}
.mobile-nav.is-open a { opacity: 1; transform: none; }
.mobile-nav.is-open a:nth-child(1) { transition-delay: .08s; }
.mobile-nav.is-open a:nth-child(2) { transition-delay: .12s; }
.mobile-nav.is-open a:nth-child(3) { transition-delay: .16s; }
.mobile-nav.is-open a:nth-child(4) { transition-delay: .20s; }
.mobile-nav.is-open a:nth-child(5) { transition-delay: .24s; }
.mobile-nav.is-open a:nth-child(6) { transition-delay: .28s; }
.mobile-nav a:hover { background: var(--green-tint); border-radius: 8px; padding-right: 1rem; }

/* ── Floating WhatsApp: subtle breathe loop ────────────── */
.float-wa.is-shown { animation: breathe 3.2s ease-in-out infinite; }
.float-wa.is-shown:hover { animation: none; }

/* ── Project filter: cards fade out/in on change ───────── */
.proj-card {
  transition:
    opacity .35s var(--ease-out),
    transform var(--med) var(--ease),
    box-shadow var(--med) var(--ease),
    border-color var(--med) var(--ease);
}
.proj-card.is-hidden {
  display: none;
  opacity: 0;
}

/* ── Section title micro-stagger (.gold delayed) ───────── */
.section-title .gold {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .6s var(--ease-out) .25s, transform .6s var(--ease-out) .25s, color var(--med) var(--ease);
}
.reveal.is-visible .section-title .gold {
  opacity: 1;
  transform: none;
}
/* Hero title gold piggybacks on the hero title's own animation */
.hero__title .gold { opacity: 1; transform: none; transition: none; }

/* ── Values strip background subtle pan ────────────────── */
.values::before {
  background-size: 200% 200%;
  animation: shimmer 14s ease-in-out infinite;
}

/* ── Form input focus polish ───────────────────────────── */
.form__field input,
.form__field textarea {
  transition: border-color var(--fast) var(--ease), box-shadow .25s var(--ease-out), transform var(--fast) var(--ease);
}
.form__field input:focus,
.form__field textarea:focus {
  transform: translateY(-1px);
}

/* ── Sticky mobile CTA: smoother spring-in ─────────────── */
.mobile-cta { transition: transform .45s cubic-bezier(.34,1.36,.64,1); }

/* ── Static page (privacy/terms) entry fade ────────────── */
.page__head, .page__body { animation: fadeUp .7s var(--ease-out) .15s backwards; }
.page__body { animation-delay: .3s; }

/* ── Reduced motion: kill all of the above ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero__title, .hero__lede, .hero__cta, .hero__sub, .hero__card,
  .nav, .hero__media img, .float-wa.is-shown,
  .btn--primary::after, .nav__phone::after,
  .values::before, .page__head, .page__body {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .process__list::before { transform: scaleX(1) !important; transition: none !important; }
  .step .step__num,
  .step .step__body,
  .trust__item,
  .about__visual .about__photo,
  .about__tag, .about__signature,
  .srv .srv__icon,
  .proj-card .proj-card__media img,
  .proj-card.proj-card--cta .proj-card__cta-body > *,
  .section-title .gold,
  .mobile-nav, .mobile-nav a,
  .rule-sm {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    width: 28px !important;
  }
}

/* ============================================================
   RESPONSIVE - final tuning
   ============================================================ */

/* ── Large desktop (1440px+) ── */
@media (min-width: 1440px) {
  :root { --maxw: 1320px; }
}

/* ── Tablet landscape & below (1024px) ── */
@media (max-width: 1024px) {
  .hero { padding-top: clamp(6.5rem, 12vw, 9rem); }
  .hero__inner { grid-template-columns: 1fr; align-items: start; gap: 2.5rem; }
  .hero__card { max-width: 520px; width: 100%; }
  .hero__title { max-width: 18ch; }
  .hero__lede { max-width: 60ch; }
}

/* ── Tablet portrait (820px) ── */
@media (max-width: 820px) {
  :root { --section-y: clamp(2.75rem, 8vw, 4.5rem); }

  .hero__card { grid-template-columns: 1fr 1fr; gap: .75rem; padding: 1.2rem; }
  .hero-stat { padding: .9rem .5rem; }

  .services__list { grid-template-columns: repeat(2, 1fr); gap: .85rem; }
  .srv { padding: 1.5rem 1.25rem; }

  .projects__grid { grid-template-columns: repeat(2, 1fr); }

  .foot__inner { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .foot__brand { grid-column: 1 / -1; }

  .contact__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact__list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
}

/* ── Mobile (640px) ── */
@media (max-width: 640px) {
  body { font-size: 15.5px; }

  /* Hero */
  .hero { padding: clamp(5.5rem, 18vw, 7rem) var(--gutter) clamp(2.5rem, 7vw, 4rem); min-height: auto; }
  .hero__title { font-size: clamp(2rem, 9vw, 2.8rem); }
  .hero__lede { font-size: 1rem; line-height: 1.65; }
  .hero__cta { gap: .6rem; }
  .hero__cta .btn { flex: 1; justify-content: center; min-width: 0; }
  .hero__card { padding: 1rem; gap: .65rem; }
  .hero-stat { padding: .85rem .4rem; }
  .hero-stat__num { font-size: 1.65rem; }
  .hero-stat__lbl { font-size: .72rem; margin-top: .45rem; }
  .hero__sub { text-align: center; }

  /* About */
  .about__bullets { grid-template-columns: 1fr; gap: .55rem; }
  .about__signature { right: 1rem; bottom: 1rem; }
  .sign__name { font-size: 1rem; }
  .sign__title { font-size: .75rem; }
  .about__tag { font-size: .72rem; padding: .35rem .7rem; }

  /* Services - compact 2-col mobile */
  .services__list { gap: .6rem; }
  .srv { padding: 1.15rem .85rem; min-height: auto; text-align: center; }
  .srv__icon { width: 46px; height: 46px; margin-bottom: .75rem; border-radius: 12px; }
  .srv__icon svg { width: 22px; height: 22px; }
  .srv h3 { font-size: .92rem; margin-bottom: .35rem; }
  .srv p { font-size: .78rem; line-height: 1.5; }

  /* Values */
  .values { padding: clamp(2.5rem, 7vw, 4rem) var(--gutter); }
  .val h3 { font-size: 1.2rem; }
  .val p { font-size: .9rem; }

  /* Projects - compact 2-col mobile */
  .projects__grid { gap: .65rem; }
  .proj-card__body { padding: .85rem .9rem 1.05rem; }
  .proj-card__body h3 { font-size: .92rem; margin-top: .25rem; line-height: 1.3; }
  .proj-loc { font-size: .76rem; margin-top: .25rem; }
  .proj-num { font-size: .62rem; }
  .proj-tags { margin-top: .7rem; gap: .25rem; }
  .proj-tags li { font-size: .62rem; padding: .2rem .5rem; }
  .badge { font-size: .62rem; padding: .25rem .55rem; top: .55rem; right: .55rem; }
  .badge--live::before { width: 5px; height: 5px; }
  .proj-card__cta-body { padding: 1.15rem .95rem; min-height: 0; }
  .proj-card__cta-body h3 { font-size: 1.3rem; }
  .proj-card__cta-body p { font-size: .76rem; margin-top: .5rem; line-height: 1.5; }
  .proj-card__cta-link { padding: .45rem .85rem; font-size: .76rem; margin-top: .9rem; }

  /* FAQ */
  .faq__q { padding: 1rem 1.15rem; font-size: .95rem; gap: .65rem; }
  .faq__q::after { width: 26px; height: 26px; font-size: 1.1rem; }
  .faq__a p { padding: 0 1.15rem 1.1rem; font-size: .92rem; }

  /* Contact */
  .form { padding: 1.5rem 1.25rem; }
  .form__head h3 { font-size: 1.15rem; }
  .contact__list { grid-template-columns: 1fr; gap: 1rem; }
  .contact__ico { width: 44px; height: 44px; }
  .contact__ico svg { width: 20px; height: 20px; }
  .contact__list a, .contact__list span:not(.contact__lbl) { font-size: 1rem; }

  /* Footer - clean mobile hierarchy */
  .foot { padding-top: 2.5rem; }
  .foot__inner {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1rem;
    padding-bottom: 1.75rem;
    text-align: right;
  }
  /* Brand: full width on top, centered with about text */
  .foot__brand {
    grid-column: 1 / -1;
    text-align: center;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .foot__brand .brand { justify-content: center; }
  .foot__about {
    margin: .85rem auto 0;
    max-width: 40ch;
    text-align: center;
  }
  /* Contact section: full width, with prominent action buttons */
  .foot__col:first-of-type {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .foot__col:first-of-type .foot__h { margin-bottom: .65rem; }
  .foot__col:first-of-type a[href^="tel:"] {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    background: var(--green);
    color: #fff;
    padding: .75rem 1.25rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 8px 18px rgba(79,155,135,.32);
    margin-bottom: .35rem;
  }
  .foot__col:first-of-type a[href^="tel:"]::before {
    content: "☎";
    font-size: 1.1em;
  }
  .foot__col:first-of-type a[href*="wa.me"] {
    display: inline-block;
    color: var(--green-2);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(111,181,161,.4);
    margin-top: .25rem;
  }
  .foot__col:first-of-type span:not(.foot__h) {
    display: block;
    margin-top: .25rem;
    font-size: .82rem;
  }
  /* Link sections: 2 cols side by side */
  .foot__col:nth-of-type(2),
  .foot__col:nth-of-type(3) {
    padding: 0 .25rem;
  }
  .foot__col:nth-of-type(2) .foot__h,
  .foot__col:nth-of-type(3) .foot__h {
    padding-bottom: .35rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .foot__col a { font-size: .88rem; padding: .15rem 0; }

  /* Trust strip on mobile */
  .foot__trust {
    padding: 1rem 0;
    gap: .5rem 1.25rem;
    font-size: .78rem;
  }
  .foot__trust-item svg { width: 14px; height: 14px; }

  /* Bottom row */
  .foot__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    font-size: .76rem;
    padding: 1rem 0 1.25rem;
  }

  /* Float WA */
  .float-wa { width: 52px; height: 52px; bottom: 1rem; left: 1rem; }
  .float-wa svg { width: 24px; height: 24px; }
}

/* ── Small phones (420px) ── */
@media (max-width: 420px) {
  .nav__phone span { display: none; }
  .nav__phone { width: 44px; height: 44px; padding: 0; }
  .nav__phone svg { width: 18px; height: 18px; }
  .hamburger { width: 44px; height: 44px; }

  .hero__cta .btn { padding: .85rem 1rem; font-size: .88rem; }
  .hero__card { grid-template-columns: 1fr 1fr; }
  .hero-stat__num { font-size: 1.5rem; }

  .section-title { font-size: clamp(1.55rem, 7vw, 1.95rem); }

  .about__photo { aspect-ratio: 4/4; }
}

/* ── Very small (360px) ── */
@media (max-width: 360px) {
  :root { --gutter: 1rem; }
  .hero__card { grid-template-columns: 1fr; }
  .hero-stat { display: flex; align-items: center; justify-content: space-between; text-align: right; padding: .75rem 1rem; }
  .hero-stat__num { font-size: 1.4rem; }
  .hero-stat__lbl { margin-top: 0; font-size: .78rem; }
}

/* ── Touch target safety net ── */
@media (hover: none) and (pointer: coarse) {
  .nav__phone, .btn, .faq__q, .form button[type="submit"],
  .nav__links a, .mobile-nav a, .foot__col a {
    min-height: var(--tap);
  }
  .hamburger { width: var(--tap); height: var(--tap); }
}

/* ── Reduced motion (already in :root section but reinforce) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-stat__num small,
  .badge--live::before { animation: none !important; }
}

/* ── Print ── */
@media print {
  .nav, .float-wa, .slider__nav, .slider__dots, .hero__media, .hero__veil, .hero__cta, .form button { display: none !important; }
  .hero { padding-top: 2rem; background: #fff; color: #000; min-height: auto; }
  .hero__title, .hero__copy, .hero-stat__num, .hero-stat__lbl { color: #000 !important; }
  .values { background: #fff; color: #000; }
  .val h3, .val p { color: #000; }
  body { background: #fff; }
  a { color: #000; text-decoration: underline; }
}

/* ============================================================
   NAGISHLI – keep the plugin's default look. Placement is handled
   in JS (bottom-left, lifting above the bottom CTA bar on scroll)
   because the plugin pins itself via an inline !important style
   that external CSS can't override. Here we only round the trigger.
   ============================================================ */
/* circle, not a square */
nagishli#NagishLiTag #NagishLiBar #NagishLiBarStrip:not(.open) {
  border-radius: 50% !important;
}



/* ============================================================
   ON-SITE BAND (full-width photo of מתנאל at work + quote)
   ============================================================ */
.band {
  display: grid;
  grid-template-columns: 1fr 1.35fr;   /* RTL: text right, image left */
  align-items: stretch;
  min-height: clamp(380px, 52vh, 560px);
}
.band__text {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #ffffff 0%, var(--green-tint) 100%);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
  border-inline-end: 4px solid var(--green);   /* accent edge toward the photo (RTL) */
}
.band__text::before {              /* faded editorial quote mark */
  content: "”";
  position: absolute; top: -2.2rem; inset-inline-start: 1.2rem;
  font-size: 11rem; line-height: 1; font-weight: 900;
  color: var(--green); opacity: .08; pointer-events: none;
}
.band__eyebrow {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--green-d);
  font-size: .78rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.band__quote, .band__by { position: relative; }
.band__quote {
  font-size: clamp(1.35rem, 2.4vw, 2.15rem);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ink);
  max-width: 24ch;
}
.band__by {
  margin-top: 1.2rem;
  font-weight: 600;
  font-size: .92rem;
  color: var(--mute);
}
.band__by::before {
  content: ""; display: inline-block;
  width: 26px; height: 2px; vertical-align: middle;
  background: var(--green); margin-inline-end: .6rem;
}
.band__media { position: relative; overflow: hidden; }
.band__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;   /* keep the people in frame */
  display: block;
}
@media (max-width: 760px) {
  .band { grid-template-columns: 1fr; }
  .band__media { min-height: 260px; order: -1; }   /* image on top */
  .band__text { padding: 2rem var(--gutter); }
}