/* ---- fonts.css ---- */
/* Self-hosted fonts (SIL Open Font License, from Google Fonts).
   Heebo stands in for Almoni DL AAA (licensed; cannot be self-hosted without a web licence).
   To use Almoni later: add its woff2 files here and put 'Almoni DL AAA' first in --font-display in tokens.css. */

@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/assistant-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/assistant-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300 800;
  font-display: optional; /* headings: no jump when the font arrives (no layout shift) */
  src: url('/assets/fonts/heebo-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300 800;
  font-display: optional; /* headings: no jump when the font arrives (no layout shift) */
  src: url('/assets/fonts/heebo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Round 5 (Oct 30 2026): Frank Ruhl Libre, a classic Hebrew serif that suits Shir's logo. Used ONLY in the Before & After section. */
@font-face {
  font-family: 'Frank Ruhl Libre';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/frank-ruhl-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Frank Ruhl Libre';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/frank-ruhl-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens.css ---- */
/* ==========================================================
   DESIGN TOKENS: the one place for colors, fonts, sizes.
   Change a value here and it changes across the whole site.
   ========================================================== */
:root {
  /* Shir's palette (from her current site theme) */
  --cream: #F5F1EB;      /* main background */
  --beige: #EAE2D6;      /* alternate background */
  --tan: #C69A7F;        /* soft accent */
  --brown: #8A6F5C;      /* main accent: buttons, links */
  --brown-dark: #5C4636; /* brown text + button hover (round 5, item 2: the darker brown #5C4636) */
  --logo-brown: #734021; /* the logo's own color */
  --ink: #141414;        /* text */
  --heading: #5C4636;    /* brown headings and brown text across the site (round 5, item 2: #5C4636) */
  --ink-soft: #5E5E5E;   /* secondary text */
  --white: #FFFFFF;
  --line: rgba(20, 20, 20, .12);

  /* Fonts. Headings: Almoni DL AAA is licensed, so Heebo stands in (see fonts.css). */
  --font-display: 'Almoni DL AAA', 'Heebo', 'Assistant', system-ui, sans-serif;
  --font-body: 'Assistant', 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Type scale: fluid sizes, small phone -> large desktop */
  --fs-hero: clamp(2.5rem, 1.4rem + 5.6vw, 6rem);
  --fs-h1: clamp(2.2rem, 1.3rem + 4.2vw, 4.75rem);
  --fs-h2: clamp(1.9rem, 1.2rem + 3vw, 3.75rem);
  --fs-h3: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  --fs-lead: clamp(1.15rem, 1.02rem + .6vw, 1.5rem);
  --fs-body: clamp(1.02rem, .98rem + .2vw, 1.125rem);
  --fs-small: .9rem;

  /* Spacing */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: clamp(4.5rem, 3rem + 7vw, 9.5rem); /* section padding */
  --gutter: clamp(1.25rem, .6rem + 3vw, 3rem);
  --max: 1240px;
  --max-text: 40rem;

  /* Shape and motion */
  --radius: 22px;
  --radius-sm: 12px;
  --pill: 999px;
  --shadow: 0 18px 50px -24px rgba(20, 20, 20, .35);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .9s;
  --header-h: 68px;
}

/* ---- base.css ---- */
/* ==========================================================
   BASE: reset, page defaults, typography. Hebrew, right-to-left.
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
p { margin: 0 0 var(--space-2); text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); }
.eyebrow { display: inline-block; font-size: var(--fs-small); letter-spacing: .08em; color: var(--brown); margin-bottom: var(--space-2); font-weight: 600; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 100; background: var(--ink); color: var(--cream); padding: .6rem 1rem; border-radius: var(--radius-sm); }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }
::selection { background: var(--tan); color: var(--ink); }

/* Small brown text on light backgrounds uses the darker brown so it passes WCAG AA contrast (4.5:1). */
.eyebrow, .link-arrow { color: var(--brown-dark); }
.section--dark .eyebrow { color: var(--tan); }
.link-arrow--light { color: var(--cream); }

/* Round 3, item 3: main headings in dark brown (like the Wix site). Light text stays on dark/brown/photo sections. */
h1, h2, h3, h4 { color: var(--heading); }
.section--dark :is(h1, h2, h3, h4), .section--brown :is(h1, h2, h3, h4), .svc-hero :is(h1, h2, h3), .svc-talk :is(h1, h2, h3), .site-footer :is(h1, h2, h3, h4), .page-dark main :is(h1, h2, h3, h4) { color: inherit; }

/* ---- layout.css ---- */
/* ==========================================================
   LAYOUT: page width, sections ("tiles"), simple grids.
   ========================================================== */
.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.narrow { max-width: var(--max-text); }
.center { text-align: center; margin-inline: auto; }
.section { padding-block: var(--space-6); }
.section--tight { padding-block: var(--space-5); }
.section--beige { background: var(--beige); }
.section--dark { background: var(--ink); color: var(--cream); }
.section--dark .lead { color: rgba(245, 241, 235, .75); }
.section--dark .eyebrow { color: var(--tan); }
.section-head { margin-bottom: var(--space-4); }
.section-head.center { max-width: 46rem; }
.grid-2 { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
.page-top { padding-top: calc(var(--header-h) + var(--space-5)); }
main { display: block; }

/* ---- components/buttons.css ---- */
/* Buttons: the filled pill (main action) and the text link with an arrow. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .75rem 1.6rem;
  border-radius: var(--pill); border: 1px solid transparent;
  background: var(--brown); color: var(--white);
  font-weight: 600; font-size: 1.05rem; text-decoration: none; cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease), color .25s;
}
.btn:hover { background: var(--brown-dark); transform: translateY(-1px); }
.btn--light { background: var(--cream); color: var(--ink); }
.btn--light:hover { background: var(--white); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: rgba(138, 111, 92, .1); }
.btn--wa { background: var(--heading); color: var(--cream); } /* round 4: brown like the rest of the site (was WhatsApp green) */
.btn--wa:hover { background: #4B382B; }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.link-arrow { color: var(--brown-dark); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .35em; min-height: 44px; }
.link-arrow::after { content: ""; width: 1.05em; height: 1.05em; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .25s var(--ease); } /* Oct 30 (Yaniv): same arrow as the service rows */
.link-arrow:hover::after { transform: translateX(-4px); }
.section--dark .link-arrow, .hero .link-arrow, .svc-hero .link-arrow { color: var(--cream); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
.center .actions, .actions.center { justify-content: center; }

.link-back { color: var(--brown); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .35em; min-height: 44px; }
.link-back::before { content: "›"; font-size: 1.3em; line-height: 1; }

/* ---- components/header.css ---- */
/* Sticky header with the logo, grouped menu, and the phone menu. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  background: rgba(245, 241, 235, .78);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); background: rgba(245, 241, 235, .9); }
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 34px; width: auto; }
.nav { display: none; }
.nav > ul { list-style: none; display: flex; align-items: center; gap: .25rem; }
.nav a, .nav button.nav-group { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; text-decoration: none; font-size: 1rem; background: none; border: 0; cursor: pointer; border-radius: var(--pill); }
.nav a:hover, .nav button.nav-group:hover { color: var(--brown); }
.nav a[aria-current="page"] { color: var(--brown); font-weight: 600; }
.nav .has-sub { position: relative; }
.nav button.nav-group::after { content: ""; width: .4em; height: .4em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); margin-inline-start: .55em; }
.sub {
  position: absolute; top: 100%; inset-inline-start: 0; min-width: 240px; list-style: none;
  background: var(--cream); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: .5rem;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s var(--ease);
}
.has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.is-open .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { display: flex; width: 100%; border-radius: 8px; padding: .4rem .8rem; }
.sub a:hover { background: var(--beige); }
.nav .nav-cta { background: var(--brown); color: var(--white); margin-inline-start: .5rem; padding: 0 1.2rem; }
.nav .nav-cta:hover { background: var(--brown-dark); color: var(--white); }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-inline-end: -10px; background: none; border: 0; cursor: pointer; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 22px; height: 1.5px; background: var(--ink); position: relative; transition: .3s var(--ease); }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; inset-inline: 0; }
.menu-toggle span::before { top: -7px; } .menu-toggle span::after { top: 7px; }
.menu-open .menu-toggle span { background: transparent; }
.menu-open .menu-toggle span::before { top: 0; transform: rotate(45deg); }
.menu-open .menu-toggle span::after { top: 0; transform: rotate(-45deg); }
/* phone menu panel */
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; background: var(--cream);
  padding: var(--space-3) var(--gutter) var(--space-5); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .3s var(--ease);
}
.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; }
.menu-open { overflow: hidden; }
.mobile-menu h2 { font-size: var(--fs-small); font-family: var(--font-body); color: var(--brown); letter-spacing: .08em; margin: var(--space-3) 0 .25rem; font-weight: 600; }
.mobile-menu ul { list-style: none; }
.mobile-menu a { display: flex; align-items: center; min-height: 46px; font-size: 1.35rem; font-family: var(--font-display); text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-menu .actions { margin-top: var(--space-4); }
.mobile-menu .actions .btn { flex: 1 1 100%; }
@media (min-width: 1040px) {
  .nav { display: block; }
  .menu-toggle, .mobile-menu { display: none; }
  .logo img { height: 38px; }
}
.nav .nav-cta[aria-current="page"] { color: var(--white); }

/* ---- Round 3 (Oct 29 2026): logo right, menu in the CENTER, social icons on the LEFT (like reut-manor.co.il) ---- */
.header-social { display: none; }
.social { display: flex; gap: .5rem; align-items: center; }
.social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--brown-dark); border: 1px solid rgba(138, 111, 92, .35); transition: background .2s, color .2s, border-color .2s; }
.social a:hover { background: var(--brown); border-color: var(--brown); color: var(--white); }
.social svg { width: 18px; height: 18px; }
.mobile-menu .contact-btns { margin-top: var(--space-4); }
.mobile-menu .social { margin-top: var(--space-3); justify-content: center; }
.mobile-menu .m-direct a { font-size: 1.35rem; }
.nav .has-sub .sub { inset-inline-start: 50%; transform: translate(50%, 6px); }
[dir="rtl"] .nav .has-sub .sub { transform: translate(50%, 6px); }
.nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub, .nav .has-sub.is-open .sub { transform: translate(50%, 0); }
@media (min-width: 1040px) {
  .site-header .container { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-header .logo { justify-self: start; }
  .header-social { display: block; justify-self: end; }
  .nav > ul { gap: .5rem; }
  .nav a, .nav button.nav-group { font-size: 1.05rem; font-weight: 500; position: relative; }
  .nav > ul > li > a::before, .nav button.nav-group::before { content: ""; position: absolute; inset-inline: .9rem; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .3s var(--ease); }
  .nav > ul > li > a:hover::before, .nav > ul > li > a[aria-current="page"]::before { transform: scaleX(1); }
}


/* Round 4 (Oct 29 2026): contact, WhatsApp and socials at the TOP of the phone menu, then the pages */
.mobile-menu__actions { padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.mobile-menu .mobile-menu__actions .contact-btns { margin-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.mobile-menu .mobile-menu__actions .contact-btns .btn { min-width: 0; width: 100%; font-family: var(--font-body); font-size: 1.05rem; border-bottom: 0; color: var(--cream); }
.mobile-menu .mobile-menu__actions .social { margin-top: var(--space-2); justify-content: center; }
.mobile-menu .mobile-menu__actions .social a { border-bottom: 0; font-size: 1rem; min-height: 44px; }
.mobile-menu .mobile-menu__actions + * h2:first-child, .mobile-menu .mobile-menu__actions + nav h2:first-of-type { margin-top: var(--space-3); }

/* ---- components/footer.css ---- */
/* Footer */
.site-footer { background: var(--beige); padding-block: var(--space-5) var(--space-3); font-size: .98rem; }
.footer-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h2 { font-family: var(--font-body); font-size: var(--fs-small); color: var(--brown-dark); letter-spacing: .08em; margin-bottom: var(--space-2); font-weight: 700; }
.site-footer ul { list-style: none; display: grid; gap: .2rem; }
.site-footer a { text-decoration: none; display: inline-flex; min-height: 36px; align-items: center; }
.site-footer a:hover { color: var(--brown); }
.footer-logo img { height: 40px; width: auto; margin-bottom: var(--space-2); }
.social { display: flex; gap: .5rem; margin-top: var(--space-2); }
.social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); justify-content: center; }
.social svg { width: 20px; height: 20px; }
.footer-bottom { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; color: var(--ink-soft); font-size: .9rem; }
.wa-fab {
  position: fixed; inset-block-end: max(16px, env(safe-area-inset-bottom)); inset-inline-end: 16px; z-index: 40; /* bottom-left in Hebrew, away from where text starts */
  width: 56px; height: 56px; border-radius: 50%; background: var(--heading); color: var(--cream); /* round 4: brown, was green */ display: grid; place-items: center;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.45); transition: transform .25s var(--ease);
}
.wa-fab:hover { transform: scale(1.06); }
.wa-fab svg { width: 28px; height: 28px; }

.section--beige .eyebrow { color: var(--brown-dark); } /* small brown text on beige needs the darker brown for contrast (WCAG AA) */

/* Round 4 (Oct 29 2026): on phones the footer is one centred stack (logo, text, socials, lists, legal) */
@media (max-width: 759px) {
  .site-footer .footer-grid { text-align: center; justify-items: center; }
  .site-footer .footer-logo { display: flex; justify-content: center; }
  .footer-logo img { margin-inline: auto; }
  .site-footer p { margin-inline: auto; max-width: 30ch; }
  .site-footer .social { justify-content: center; }
  .site-footer ul { justify-items: center; }
  .site-footer a { justify-content: center; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
}

/* Oct 30 (Yaniv): TikTok out of the footer on desktop; kept on mobile */
@media (min-width: 900px){ .site-footer .social__tt{display:none} }

/* ---- components/hero.css ---- */
/* ==========================================================
   Home hero: cinematic opening (src/blocks/hero.mjs + js/hero.js)
   1) the first photo opens from a framed card to full screen
   2) the headline rises line by line, the tagline sits on a frosted pill
   3) photos change with a slow zoom and a wipe; scrolling adds parallax
   Everything is still when the device asks for reduced motion.
   ========================================================== */
.hero { position: relative; height: 100svh; min-height: 560px; display: flex; align-items: flex-end; color: var(--cream); overflow: hidden; background: var(--ink); isolation: isolate; }
.hero__stage { position: absolute; inset: 0; overflow: hidden; transform: translate3d(0, calc(var(--sp, 0) * 16vh), 0); will-change: transform; }
.hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.hero__slide picture, .hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
.hero__slide.is-leaving { opacity: 1; visibility: visible; z-index: 1; }
/* scrim: bottom gradient + soft shade behind the words (right side in Hebrew) */
.hero__scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to top, rgba(20,20,20,.82) 0%, rgba(20,20,20,.5) 30%, rgba(20,20,20,.12) 58%, rgba(20,20,20,0) 72%),
    linear-gradient(to left, rgba(20,20,20,.5) 0%, rgba(20,20,20,.28) 35%, rgba(20,20,20,0) 62%),
    radial-gradient(120% 70% at 85% 100%, rgba(20,20,20,.4), rgba(20,20,20,0) 60%),
    linear-gradient(to bottom, rgba(20,20,20,.35), rgba(20,20,20,0) 22%); }
.hero__content { position: relative; z-index: 4; padding-block: var(--space-5) calc(clamp(3rem, 8vh, 6rem) + 56px);
  transform: translate3d(0, calc(var(--sp, 0) * -9vh), 0); opacity: calc(1 - var(--sp, 0) * 1.6); }
.hero__tag { display: inline-flex; align-items: center; gap: .7em; margin: 0 0 var(--space-3); padding: .55em 1.15em; border-radius: var(--pill);
  background: rgba(20,20,20,.5); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(245,241,235,.28); color: var(--cream); font-size: clamp(.9rem, .85rem + .25vw, 1.05rem); font-weight: 600; letter-spacing: .04em; line-height: 1.2;
  box-shadow: 0 8px 30px -12px rgba(0,0,0,.5); }
.hero__tag-sep { width: 5px; height: 5px; border-radius: 50%; background: var(--tan); flex: none; }
.hero__title { font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5.4rem); font-weight: 400; line-height: 1.05; letter-spacing: -.01em; max-width: 15ch; margin: 0 0 var(--space-2); text-shadow: 0 2px 30px rgba(0,0,0,.3); }
.hero__title .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .ln > span { display: inline-block; }
.hero__sub { font-size: var(--fs-lead); max-width: 34ch; color: rgba(245,241,235,.92); margin: 0; }
.hero__actions { margin-top: var(--space-3); }
.link-arrow--light { color: var(--cream); }
/* bottom bar: caption of the photo + progress dots + pause */
.hero__bar { position: absolute; z-index: 5; inset-inline: 0; bottom: clamp(1rem, 3vh, 2rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hero__caption { color: rgba(245,241,235,.85); font-size: .9rem; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.hero__caption:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
.hero__controls { display: flex; align-items: center; gap: .5rem; }
.hero__dots { display: flex; gap: .25rem; direction: ltr; flex-direction: row-reverse; }
.hero__dot { width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.hero__dot i { display: block; width: 32px; height: 3px; border-radius: 3px; background: rgba(245,241,235,.35); overflow: hidden; position: relative; }
.hero__dot i::after { content: ""; position: absolute; inset: 0; background: var(--cream); transform: scaleX(0); transform-origin: right; }
.hero__dot.is-active i::after { transform: scaleX(1); }
.hero__dot.is-active.run i::after { animation: hero-progress var(--interval, 6500ms) linear both; }
.hero.is-paused .hero__dot.is-active i::after { animation: none; transform: scaleX(1); }
.hero__pause { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(245,241,235,.4); background: rgba(20,20,20,.35); color: var(--cream); cursor: pointer; display: grid; place-items: center; }
.hero__pause:hover { background: rgba(20,20,20,.55); }
.i-pause { width: 10px; height: 12px; border-inline: 3px solid currentColor; box-sizing: border-box; }
.hero__pause[aria-pressed="true"] .i-pause { border: 0; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
@media (max-width: 640px) {
  .hero__scrim { background: linear-gradient(to top, rgba(20,20,20,.85) 0%, rgba(20,20,20,.55) 38%, rgba(20,20,20,.1) 65%, rgba(20,20,20,0) 78%), linear-gradient(to bottom, rgba(20,20,20,.35), rgba(20,20,20,0) 20%); }
  .hero__caption { display: none; }
  .hero__bar { justify-content: flex-start; }
  .hero__content { padding-bottom: calc(clamp(2rem, 6vh, 4rem) + 52px); }
  .hero__title { max-width: 13ch; font-size: clamp(2.15rem, 1.4rem + 3.6vw, 2.6rem); line-height: 1.08; }
  .hero__tag { font-size: .85rem; padding: .5em 1em; }
}

/* --- motion (only with JS and without reduced motion) --- */
.js .hero:not(.is-static) .hero__stage { clip-path: inset(10% 8% 16% 8% round 28px); transition: clip-path 1.9s cubic-bezier(.76, 0, .18, 1); }
.js .hero:not(.is-static) .hero__slide:first-child img { transform: scale(1.22); transition: transform 2.6s cubic-bezier(.22, .9, .25, 1); }
.js .hero.is-ready:not(.is-static) .hero__stage { clip-path: inset(0 0 0 0 round 0); }
.js .hero.is-ready:not(.is-static) .hero__slide:first-child img { transform: scale(1.06); }
.js .hero:not(.is-static) .hero__title .ln > span { transform: translate3d(0, 110%, 0); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.js .hero:not(.is-static) .hero__title .ln:nth-child(1) > span { transition-delay: .55s; }
.js .hero:not(.is-static) .hero__title .ln:nth-child(2) > span { transition-delay: .68s; }
.js .hero:not(.is-static) .hero__title .ln:nth-child(3) > span { transition-delay: .81s; }
.js .hero:not(.is-static) .hero__tag,
.js .hero:not(.is-static) .hero__sub,
.js .hero:not(.is-static) .hero__actions,
.js .hero:not(.is-static) .hero__bar { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .hero:not(.is-static) .hero__tag { transition-delay: .35s; }
.js .hero:not(.is-static) .hero__sub { transition-delay: 1.05s; }
.js .hero:not(.is-static) .hero__actions { transition-delay: 1.2s; }
.js .hero:not(.is-static) .hero__bar { transition-delay: 1.6s; }
.js .hero.is-ready:not(.is-static) .hero__title .ln > span,
.js .hero.is-ready:not(.is-static) .hero__tag,
.js .hero.is-ready:not(.is-static) .hero__sub,
.js .hero.is-ready:not(.is-static) .hero__actions,
.js .hero.is-ready:not(.is-static) .hero__bar { opacity: 1; transform: none; }
/* after the opening: each new photo wipes in from the right and zooms slowly (Ken Burns) */
.js .hero.cycled:not(.is-static) .hero__slide.is-active { animation: hero-wipe 1.5s cubic-bezier(.76, 0, .18, 1) both; }
.js .hero.is-playing:not(.is-static) .hero__slide.is-active img { animation: hero-kb 10s linear both; }
.js .hero.is-playing:not(.is-static) .hero__slide:nth-child(even).is-active img { animation-name: hero-kb2; }
.js .hero.cycled:not(.is-static) .hero__slide.is-leaving img { animation: hero-out 1.5s var(--ease) both; }
.js .hero.is-paused .hero__slide img { animation-play-state: paused !important; }
@keyframes hero-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes hero-kb { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-1.5%, -1%, 0); } }
@keyframes hero-kb2 { from { transform: scale(1.16) translate3d(1.5%, 0, 0); } to { transform: scale(1.05) translate3d(0, -1%, 0); } }
@keyframes hero-out { from { transform: scale(1.12); filter: brightness(1); } to { transform: scale(1.18); filter: brightness(.7); } }
@keyframes hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero__stage, .hero__content { transform: none !important; opacity: 1 !important; }
  .hero__slide img { animation: none !important; transform: none !important; }
}

/* Inner-page hero: big title on cream, optional wide photo under it */
.page-hero { padding-top: calc(var(--header-h) + var(--space-5)); padding-bottom: var(--space-4); }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { max-width: 38rem; }
.page-hero__image { margin-top: var(--space-4); border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 8; }
.page-hero__image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .page-hero__image { aspect-ratio: 4 / 4.4; } }

/* Statement tile: image grows as you scroll into it */
.statement { text-align: center; }
.statement h2 { max-width: 20ch; margin-inline: auto; }
.statement .lead { max-width: 36rem; margin-inline: auto; }
.grow { margin-top: var(--space-5); border-radius: var(--radius); overflow: hidden; transform: scale(var(--grow, .86)); transition: transform .1s linear; aspect-ratio: 16 / 9; will-change: transform; }
.grow img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .grow { aspect-ratio: 4 / 5; } }

/* ---- Round 3 (Oct 29 2026): logo-only hero ----
   2.1 less cropping on computers (gentler zoom), 2.2 lighter shade, 2.3 no captions, 2.4 logo instead of text, 2.5 small side buttons */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero--logo { align-items: center; justify-content: center; }
.hero--logo .hero__scrim { background: radial-gradient(ellipse 38% 42% at 50% 50%, rgba(20,20,20,.22), rgba(20,20,20,0) 70%), linear-gradient(to top, rgba(20,20,20,.38) 0%, rgba(20,20,20,0) 26%), linear-gradient(to bottom, rgba(20,20,20,.22), rgba(20,20,20,0) 18%); }
.hero__brand { position: relative; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.hero__logo { width: clamp(170px, 22vw, 300px); height: auto; filter: drop-shadow(0 4px 24px rgba(0,0,0,.28)); }
.js .hero--logo:not(.is-static) .hero__brand { opacity: 0; transform: translate3d(0, 18px, 0) scale(.96); transition: opacity 1.4s var(--ease) .9s, transform 1.6s var(--ease) .9s; }
.js .hero--logo.is-ready:not(.is-static) .hero__brand { opacity: 1; transform: none; }
.hero--logo .hero__bar { justify-content: space-between; }
.hero__cta { display: flex; gap: .5rem; flex-wrap: wrap; }
.hero-pill { display: inline-flex; align-items: center; gap: .4em; min-height: 40px; padding: .45rem 1.1rem; border-radius: var(--pill); font-size: .95rem; font-weight: 600; text-decoration: none; color: var(--ink); background: rgba(245, 241, 235, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s, transform .2s; }
.hero-pill:hover { background: var(--white); transform: translateY(-1px); }
.hero-pill--wa { background: rgba(20, 20, 20, .38); color: var(--white); border: 1px solid rgba(255,255,255,.45); }
.hero-pill--wa:hover { background: var(--heading); border-color: var(--heading); }
.hero-pill svg { width: 1.1em; height: 1.1em; }
/* gentler zoom = much less of the photo cut away on wide screens */
@keyframes hero-kb { from { transform: scale(1.02); } to { transform: scale(1.07) translate3d(-1%, -.5%, 0); } }
@keyframes hero-kb2 { from { transform: scale(1.07) translate3d(1%, 0, 0); } to { transform: scale(1.02); } }
.js .hero--logo.is-ready:not(.is-static) .hero__slide:first-child img { transform: scale(1.02); }
.hero--logo .hero__slide img { object-position: 50% 55%; }
@media (min-width: 1041px) and (min-aspect-ratio: 16/10) { .hero--logo { height: min(100svh, 66.7vw); } }
@media (max-width: 640px) {
  .hero--logo .hero__scrim { background: radial-gradient(ellipse 60% 34% at 50% 50%, rgba(20,20,20,.22), rgba(20,20,20,0) 70%), linear-gradient(to top, rgba(20,20,20,.45), rgba(20,20,20,0) 24%); }
  .hero--logo .hero__bar { justify-content: space-between; }
  .hero__logo { width: 168px; }
}

@media (max-width: 640px) {
  .hero--logo .hero__bar { bottom: 86px; align-items: flex-end; }
  .hero__cta { flex-direction: column; align-items: flex-start; }
  .hero-pill { min-height: 38px; padding: .4rem 1rem; font-size: .9rem; }
}


/* ===== Round 4 (Oct 29 2026, Yaniv): luminous photos, no buttons on the photo, bars low and centred ===== */
/* per-photo focus point from hero.json (pos = computers, posTall = phones) */
.hero--logo .hero__slide img { object-position: var(--pos, 50% 55%); filter: brightness(1.07) saturate(1.05) contrast(1.02); }
@media (max-width: 700px) { .hero--logo .hero__slide img { object-position: var(--pos-m, var(--pos, 50% 50%)); } }
/* a soft warm glow from the centre instead of the dark shade; only a whisper of shade at the very bottom so the bars read */
.hero--logo .hero__scrim { background:
    radial-gradient(ellipse 46% 44% at 50% 50%, rgba(255, 249, 240, .20), rgba(255, 249, 240, .06) 55%, rgba(255, 249, 240, 0) 75%),
    linear-gradient(to top, rgba(40, 30, 22, .22) 0%, rgba(40, 30, 22, 0) 16%); }
.hero--logo .hero__scrim::after { content: ""; position: absolute; inset: 0; background: rgba(255, 246, 232, .07); mix-blend-mode: screen; }
.hero__logo { filter: drop-shadow(0 2px 3px rgba(60, 44, 32, .28)) drop-shadow(0 6px 30px rgba(60, 44, 32, .38)); }
.hero--logo .hero__bar { inset-inline: 0; bottom: clamp(.6rem, 2.2vh, 1.4rem); justify-content: center; align-items: center; }
.hero--logo .hero__dots { justify-content: center; }
.hero__dot i { width: 36px; background: rgba(245, 241, 235, .45); box-shadow: 0 1px 4px rgba(40, 30, 22, .25); }
@media (max-width: 640px) {
  .hero--logo .hero__bar { bottom: 18px; justify-content: center; align-items: center; }
  .hero__dot { width: 36px; }
  .hero__dot i { width: 26px; }
}
/* the cream logo needs a little warmth behind it on bright photos: a soft, blurred halo only around the logo */
.hero--logo .hero__brand::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: clamp(300px, 34vw, 520px); aspect-ratio: 1.25; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(74, 54, 40, .40), rgba(74, 54, 40, .22) 50%, rgba(74, 54, 40, 0)); filter: blur(14px); pointer-events: none; }
@media (max-width: 640px) { .hero--logo .hero__brand::before { width: 300px; } }
/* bars on a small frosted pill so they read on light floors */
.hero--logo .hero__dots { padding: 0 .55rem; border-radius: 999px; background: rgba(60, 44, 32, .26); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero--logo .hero__dot { height: 30px; }
.hero__dot i { background: rgba(245, 241, 235, .5); }

/* ---- components/cards.css ---- */
/* Project cards, the horizontal projects carousel, service cards. */
.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 380px); gap: var(--space-2);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter); padding-bottom: var(--space-2);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
/* Arrows: centred under the slides with a progress line between them (round 2: they used to sit far at the side). */
.carousel__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-3) auto 0; padding-inline: var(--gutter); }
.carousel__progress { position: relative; width: clamp(120px, 22vw, 240px); height: 2px; border-radius: 2px; background: rgba(20,20,20,.14); overflow: hidden; }
.carousel__progress i { position: absolute; inset-block: 0; right: 0; width: var(--w, 20%); background: var(--brown); border-radius: 2px; transform: translateX(calc(var(--x, 0) * -1)); transition: transform .3s var(--ease), width .3s var(--ease); }
.round-btn.round-btn--line { width: 52px; height: 52px; background: transparent; border: 1.5px solid rgba(20,20,20,.28); color: var(--ink); font-size: 1.5rem; transition: background .2s, color .2s, border-color .2s; }
.round-btn.round-btn--line:hover:not(:disabled) { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.round-btn--line span { display: block; line-height: 1; transform: translateY(-1px); }
@media (min-width: 900px) { .carousel__track { grid-auto-columns: 360px; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); } }
.round-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(20,20,20,.08); cursor: pointer; display: grid; place-items: center; font-size: 1.4rem; line-height: 1; transition: background .2s; }
.round-btn:hover { background: rgba(20,20,20,.16); }
.round-btn:disabled { opacity: .3; cursor: default; }

.project-card { display: block; text-decoration: none; color: inherit; }
.project-card__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--beige); }
.project-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.project-card:hover .project-card__img img { transform: scale(1.04); }
.project-card h3 { margin: var(--space-2) 0 .1rem; font-size: 1.35rem; }
.project-card p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

.projects-grid { display: grid; gap: var(--space-4) var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .projects-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .projects-grid { grid-template-columns: repeat(3, 1fr); } }
.projects-grid .project-card:first-child { grid-column: 1 / -1; }
.projects-grid .project-card:first-child .project-card__img { aspect-ratio: 16 / 8; }
@media (max-width: 639px) { .projects-grid .project-card:first-child .project-card__img { aspect-ratio: 4 / 5; } }

.service-list { list-style: none; border-top: 1px solid var(--line); }
.service-row { border-bottom: 1px solid var(--line); }
.service-row a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding-block: var(--space-3); text-decoration: none; }
.service-row .num { font-family: var(--font-display); color: var(--tan); font-size: 1.1rem; width: 2.2rem; }
.service-row h3 { margin: 0; font-size: clamp(1.3rem, 1rem + 1.3vw, 2.1rem); transition: color .25s; }
.service-row p { margin: .2rem 0 0; color: var(--ink-soft); }
.service-row .go { font-size: 1.8rem; color: var(--brown); transition: transform .3s var(--ease); }
.service-row a:hover h3 { color: var(--brown); }
.service-row a:hover .go { transform: translateX(-6px); }

.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border-radius: var(--radius); overflow: hidden; }
@media (min-width: 900px) { .ig-grid { grid-template-columns: repeat(6, 1fr); } }
.ig-grid a { display: block; aspect-ratio: 1; overflow: hidden; }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .3s; }
.ig-grid a:hover img { transform: scale(1.05); opacity: .9; }

.about-tile { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 900px) { .about-tile { grid-template-columns: 5fr 6fr; gap: var(--space-5); } }
.about-tile__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.about-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.quote { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); line-height: 1.3; margin: 0 0 var(--space-3); }

/* Round 2: about section name, story column, side portrait */
.about-tile__name { font-size: var(--fs-h2); margin: 0 0 var(--space-2); }
.story p { font-size: 1.12rem; line-height: 1.75; max-width: 36rem; }
.story p + p { margin-top: var(--space-2); }
.story__big { font-family: var(--font-display); font-size: var(--fs-h3) !important; line-height: 1.35 !important; color: var(--brown); margin-block: var(--space-4) !important; }
.about-side { margin-top: var(--space-4); border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; max-width: 420px; }
.about-side img, .sticky-story__media picture, .about-tile__img picture { width: 100%; height: 100%; }
.about-side img { width: 100%; height: 100%; object-fit: cover; }
.sticky-story__media picture img, .about-tile__img picture img { width: 100%; height: 100%; object-fit: cover; }
.about-tile__img picture, .sticky-story__media picture { display: block; }

/* ---- components/project.css ---- */
/* Single project page: photo gallery + lightbox. */
.gallery { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 700px) { .gallery { grid-template-columns: 1fr 1fr; } .gallery .wide { grid-column: 1 / -1; } }
.gallery figure { margin: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--beige); }
.gallery button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery img { width: 100%; height: auto; transition: transform 1s var(--ease); }
.gallery button:hover img { transform: scale(1.02); }
.meta-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-2); list-style: none; }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .9rem; border-radius: var(--pill); background: var(--beige); font-size: .92rem; }
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(20,20,20,.94); display: none; align-items: center; justify-content: center; padding: 56px 12px; }
.lightbox.is-open { display: flex; }
.lightbox img { max-height: 100%; max-width: 100%; width: auto; border-radius: 6px; }
.lightbox .round-btn { position: absolute; background: rgba(245,241,235,.14); color: var(--cream); }
.lightbox .lb-close { top: 12px; inset-inline-end: 12px; }
.lightbox .lb-prev { inset-inline-start: 12px; top: 50%; }
.lightbox .lb-next { inset-inline-end: 12px; top: 50%; }
.next-project { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ---- components/slider.css ---- */
/* Before / after drag slider. */
.ba-grid { display: grid; gap: var(--space-4) var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 700px) { .ba-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ba-grid { grid-template-columns: repeat(3, 1fr); } }
.ba { margin: 0; }
.ba-slider {
  --pos: 50%;
  position: relative; aspect-ratio: 9 / 16; max-height: 82svh; margin-inline: auto;
  border-radius: var(--radius); overflow: hidden; background: var(--beige);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; direction: ltr;
}
.ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-slider .ba-before { clip-path: inset(0 0 0 var(--pos)); } /* 'before' sits on the right (Hebrew reads right to left) */
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--cream); pointer-events: none; }
.ba-handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--cream); color: var(--ink); display: grid; place-items: center; font-size: 1.1rem; letter-spacing: .1em; box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.ba-label { position: absolute; top: 14px; padding: .2rem .7rem; border-radius: var(--pill); background: rgba(20,20,20,.55); color: var(--cream); font-size: .85rem; pointer-events: none; }
.ba-label--before { right: 14px; } .ba-label--after { left: 14px; }
.ba-slider { cursor: ew-resize; }
/* The range input is for keyboard and screen readers only; mouse and touch are handled by slider.js on the whole photo. */
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; -webkit-appearance: none; appearance: none; pointer-events: none; }
.ba-slider:has(.ba-range:focus-visible) .ba-handle::after { outline: 3px solid var(--tan); outline-offset: 3px; }
.ba-slider.is-dragging .ba-handle::after { transform: translate(-50%, -50%) scale(1.08); }
.ba-handle::after { transition: transform .2s var(--ease); }
.ba figcaption { margin-top: var(--space-2); font-family: var(--font-display); font-size: 1.2rem; }
.section--dark .ba-slider { background: #222; }

/* ---- components/forms.css ---- */
/* Lead form (contact page + bottom of every service page). */
.lead-form { display: grid; gap: var(--space-2); }
@media (min-width: 640px) { .lead-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: .98rem; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 52px; padding: .8rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid rgba(20,20,20,.18); background: var(--white); font-size: 16px; /* 16px stops iPhone zoom */
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brown); box-shadow: 0 0 0 3px rgba(138,111,92,.18); }
.field input[type="tel"], .field input[type="email"] { direction: ltr; text-align: right; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: var(--ink-soft); }
.check input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--brown); flex: none; }
.form-status { min-height: 1.5em; font-weight: 600; }
.form-status.ok { color: #1f7a4d; } .form-status.err { color: #a43f05; }
.hp { position: absolute; inset-inline-start: -9999px; }
.form-card { background: var(--white); border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); box-shadow: var(--shadow); }
.section--dark .form-card { color: var(--ink); }
.contact-lines { list-style: none; display: grid; gap: .6rem; margin-top: var(--space-3); }
.contact-lines a { text-decoration: none; display: inline-flex; gap: .6rem; align-items: center; min-height: 44px; font-size: 1.1rem; }
.contact-lines svg { width: 22px; height: 22px; color: var(--brown); }

/* ---- components/service.css ---- */
/* Service sales pages. */
.svc-hero { position: relative; min-height: 88svh; display: flex; align-items: flex-end; color: var(--cream); overflow: hidden; background: var(--ink); }
.svc-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,20,20,.78), rgba(20,20,20,.25) 55%, rgba(20,20,20,.05)); }
.svc-hero .container { position: relative; z-index: 1; padding-bottom: clamp(3rem, 8vh, 5rem); }
.svc-hero .num { font-family: var(--font-display); color: var(--tan); font-size: 1.1rem; }
.svc-hero h1 { font-size: var(--fs-hero); font-weight: 400; max-width: 16ch; margin-top: .3rem; }
.svc-hero p { font-size: var(--fs-lead); max-width: 34ch; color: rgba(245,241,235,.9); }
.big-line { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.15; max-width: 22ch; margin-inline: auto; text-align: center; }
.big-line em { font-style: normal; color: var(--brown); }
.feel-list { list-style: none; display: grid; gap: var(--space-2); margin-top: var(--space-4); }
@media (min-width: 760px) { .feel-list { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } }
.feel-list li { background: var(--cream); border-radius: var(--radius); padding: var(--space-3); font-size: 1.15rem; line-height: 1.45; }
.section--beige .feel-list li { background: var(--cream); }
.feel-list li::before { content: ""; display: block; width: 28px; height: 2px; background: var(--brown); margin-bottom: var(--space-2); }
.fit-list { list-style: none; display: grid; gap: var(--space-2); }
.fit-list li { position: relative; padding-inline-start: 2rem; font-size: 1.1rem; }
.fit-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--brown); }
.sticky-story { display: grid; gap: var(--space-4); }
@media (min-width: 900px) {
  .sticky-story { grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
  .sticky-story__media { position: sticky; top: calc(var(--header-h) + 24px); }
}
.sticky-story__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.sticky-story__media img { width: 100%; height: 100%; object-fit: cover; }
.steps { list-style: none; counter-reset: s; display: grid; gap: var(--space-3); }
.steps li { counter-increment: s; border-top: 1px solid var(--line); padding-top: var(--space-2); }
.steps li::before { content: "0" counter(s); font-family: var(--font-display); color: var(--tan); display: block; font-size: 1rem; margin-bottom: .2rem; }
.steps h3 { margin-bottom: .3rem; }
.steps p { color: var(--ink-soft); margin: 0; }
.only-me { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-4); }
@media (min-width: 760px) { .only-me { grid-template-columns: repeat(2, 1fr); } }
.only-me li { border-top: 1px solid rgba(245,241,235,.25); padding-top: var(--space-2); font-size: 1.15rem; }
.other-services { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin-top: var(--space-3); justify-content: center; }
.other-services a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 1.1rem; border-radius: var(--pill); border: 1px solid var(--line); text-decoration: none; }
.other-services a:hover { border-color: var(--brown); color: var(--brown); }

/* ---- Round 3 (Oct 29 2026): service pages ---- */
.svc-hero__btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-3); }
.narrow-wide { max-width: 980px; margin-inline: auto; }
.svc-hook { font-family: var(--font-display); font-size: clamp(1.9rem, 1.2rem + 3vw, 3.6rem); line-height: 1.15; color: var(--heading); font-weight: 500; margin-bottom: var(--space-3); text-wrap: balance; }
.svc-promise { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 1.1vw, 1.85rem); line-height: 1.4; color: var(--ink); text-wrap: balance; }
.svc-promise em { font-style: normal; color: var(--brown); font-weight: 600; }
.svc-promise-sub { margin-top: var(--space-2); }
.svc-feel-intro { max-width: 46rem; margin: var(--space-1) auto 0; }
.svc-sub-h { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); color: var(--heading); margin-bottom: var(--space-3); }
/* feelings with small icons that come up one after another (items 4.4, 4.5) */
.feel-icons { list-style: none; display: grid; gap: var(--space-4); max-width: 1100px; margin: var(--space-4) auto 0; }
@media (min-width: 900px) { .feel-icons { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.feel-icons li { text-align: center; }
.feel-icons__ic { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--cream); color: var(--brown); margin-bottom: var(--space-2); box-shadow: 0 10px 30px -18px rgba(20,20,20,.4); }
.feel-icons__ic svg { width: 34px; height: 34px; }
.feel-icons p { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); max-width: 22rem; margin-inline: auto; }
.feel-icons strong { display: block; font-family: var(--font-display); font-size: 1.45em; color: var(--heading); font-weight: 600; margin-bottom: .2rem; }
.js .feel-icons li[data-reveal] .feel-icons__ic { transform: scale(.6) rotate(-12deg); opacity: 0; transition: transform .9s cubic-bezier(.34, 1.56, .64, 1) calc(var(--delay, 0s) + .15s), opacity .6s var(--ease) calc(var(--delay, 0s) + .15s); }
.js .feel-icons li.is-in .feel-icons__ic { transform: none; opacity: 1; }
.feel-icons li.is-in .feel-icons__ic svg { animation: ic-float 4s ease-in-out calc(var(--delay, 0s) + 1.2s) infinite; }
@keyframes ic-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* the work process as a path with arrows (item ד) */
.path-steps { list-style: none; position: relative; }
.path-steps li { position: relative; padding-inline-start: 3rem; padding-bottom: var(--space-4); }
.path-steps li::before { content: ""; position: absolute; inset-inline-start: .55rem; top: .35rem; width: 14px; height: 14px; border-radius: 50%; background: var(--brown); box-shadow: 0 0 0 5px rgba(138, 111, 92, .18); }
.path-steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: calc(.55rem + 6px); top: 1.6rem; bottom: .4rem; width: 2px; background: linear-gradient(var(--tan), var(--tan)) top / 2px 0 no-repeat; transition: background-size 1s var(--ease) calc(var(--delay, 0s) + .3s); }
.path-steps li.is-in:not(:last-child)::after { background-size: 2px 100%; }
.path-steps li:not(:last-child) h3::after { content: ""; position: absolute; inset-inline-start: calc(.55rem + 1px); bottom: -.1rem; width: 12px; height: 12px; border-inline-end: 2px solid var(--tan); border-bottom: 2px solid var(--tan); transform: rotate(45deg); opacity: 0; transition: opacity .4s var(--ease) calc(var(--delay, 0s) + 1.1s); }
.path-steps li.is-in:not(:last-child) h3::after { opacity: 1; animation: arrow-bob 2.2s ease-in-out calc(var(--delay, 0s) + 1.4s) infinite; }
@keyframes arrow-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
.path-steps h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); color: var(--brown-dark); margin-bottom: .3rem; }
.path-steps p { color: var(--ink-soft); margin: 0; }
/* contact block at the bottom (item ז) */
.svc-talk { background: var(--brown-dark); color: var(--cream); }
.svc-talk .eyebrow { color: var(--beige); }
.svc-talk__title { font-size: var(--fs-h2); color: var(--cream); margin-bottom: var(--space-2); }
.svc-talk .contact-btns .btn:not(.btn--wa) { background: var(--cream); color: var(--ink); }
.svc-talk__form { max-width: 760px; margin: var(--space-5) auto 0; text-align: start; color: var(--ink); }
.svc-talk__formtitle { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--heading); margin-bottom: var(--space-2); }
@media (prefers-reduced-motion: reduce) { .feel-icons li.is-in .feel-icons__ic svg, .path-steps li.is-in h3::after { animation: none; } }

/* ---- components/prose.css ---- */
/* Long text pages: privacy, terms, accessibility. */
.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-top: var(--space-4); }
.prose h3 { margin-top: var(--space-3); }
.prose ul, .prose ol { padding-inline-start: 1.4rem; margin-bottom: var(--space-2); }
.prose li { margin-bottom: .35rem; }
.notice { background: var(--beige); border-inline-start: 4px solid var(--brown); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.testimonial-slots { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .testimonial-slots { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .testimonial-slots { grid-template-columns: repeat(3, 1fr); } }
.slot { aspect-ratio: 9 / 16; max-height: 640px; border-radius: var(--radius); border: 2px dashed rgba(138,111,92,.45); background: rgba(234,226,214,.5); display: grid; place-items: center; text-align: center; padding: var(--space-3); color: var(--ink-soft); }
.slot img { width: 100%; height: 100%; object-fit: contain; }
.guide-cover { aspect-ratio: 3 / 4; border-radius: var(--radius); background: linear-gradient(160deg, var(--beige), var(--tan)); display: grid; place-items: center; text-align: center; padding: var(--space-4); box-shadow: var(--shadow); }
.guide-cover strong { font-family: var(--font-display); font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); letter-spacing: .06em; display: block; color: var(--ink); }

/* ---- components/reveal.css ---- */
/* Scroll reveal: elements with data-reveal fade and rise in when they enter the screen.
   js/main.js adds .is-in. Without JS, or with reduced motion, everything just shows. */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--delay, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero__media img, .scroll-cue::after { animation: none; }
  .grow { transform: none !important; }
}

/* ---- components/links.css ---- */
/* ==========================================================
   LINK-IN-BIO PAGE (/links/): phone-first, one column, big thumb buttons.
   Only used by src/pages/links.html (every selector starts with .lib or .page-links).
   ========================================================== */
.page-links { background: var(--cream); min-height: 100vh; min-height: 100svh; }
.page-links main { display: flex; justify-content: center; }
.lib { width: 100%; max-width: 30rem; padding: max(2.75rem, env(safe-area-inset-top)) 1.25rem max(2rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; text-align: center; }
.lib__head { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.75rem; }
.lib__photo { width: 124px; height: 124px; border-radius: 50%; overflow: hidden; background: var(--beige); box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px rgba(138, 111, 92, .35), 0 16px 34px -18px rgba(20, 20, 20, .45); margin-bottom: 1.1rem; }
.lib__photo picture, .lib__photo img { width: 100%; height: 100%; }
.lib__photo img { object-fit: cover; object-position: 50% 18%; transform: scale(1.4); transform-origin: 52% 22%; }
.lib__name { font-family: 'Heebo', var(--font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .15rem; color: var(--ink); }
.lib__role { font-size: .95rem; font-weight: 600; letter-spacing: .04em; color: var(--brown-dark); margin: 0 0 .7rem; }
.lib__line { font-size: 1.08rem; line-height: 1.5; color: var(--ink-soft); max-width: 21rem; margin: 0; text-wrap: balance; }
.lib__links { width: 100%; display: flex; flex-direction: column; gap: .75rem; }
.lib__btn { display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 64px; padding: .7rem 1rem; border-radius: 18px; background: var(--white); color: var(--ink); text-decoration: none; text-align: right; border: 1px solid rgba(138, 111, 92, .18); box-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 10px 24px -20px rgba(20, 20, 20, .4); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.lib__btn:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(20, 20, 20, .05), 0 14px 28px -18px rgba(20, 20, 20, .45); }
.lib__btn:active { transform: scale(.985); }
.lib__ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--beige); color: var(--brown-dark); }
.lib__ic svg { width: 22px; height: 22px; }
.lib__txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lib__label { font-family: 'Heebo', var(--font-display); font-size: 1.08rem; font-weight: 500; line-height: 1.25; }
.lib__sub { font-size: .86rem; color: var(--ink-soft); line-height: 1.3; }
.lib__go, .lib__chev { flex: none; width: 20px; height: 20px; color: var(--brown); }
.lib__chev { transition: transform .25s var(--ease); }
.lib__btn--wa { background: var(--brown); color: var(--cream); border-color: transparent; }
.lib__btn--wa .lib__ic { background: rgba(245, 241, 235, .16); color: var(--cream); }
.lib__btn--wa .lib__sub { color: rgba(245, 241, 235, .82); direction: ltr; unicode-bidi: isolate; text-align: right; }
.lib__btn--wa .lib__go { color: var(--cream); }
.lib__btn--wa:hover { background: var(--brown-dark); }
.lib__btn--soft { background: var(--beige); border-color: transparent; box-shadow: none; }
.lib__btn--soft .lib__ic { background: var(--cream); }
/* Services accordion (native <details>: keyboard and screen-reader friendly, works without JS) */
.lib__acc { width: 100%; }
.lib__acc > summary { list-style: none; }
.lib__acc > summary::-webkit-details-marker { display: none; }
.lib__acc[open] > summary { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.lib__acc[open] .lib__chev { transform: rotate(180deg); }
.lib__list { list-style: none; margin: .35rem 0 0; padding: .35rem; background: var(--white); border: 1px solid rgba(138, 111, 92, .18); border-radius: 6px 6px 18px 18px; }
.lib__acc[open] .lib__list { animation: lib-open .3s var(--ease); }
.lib__list li + li { border-top: 1px solid rgba(138, 111, 92, .14); }
.lib__list a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 52px; padding: .55rem .85rem; color: var(--ink); text-decoration: none; font-size: 1.02rem; border-radius: 12px; }
.lib__list a:hover, .lib__list a:focus-visible { background: var(--cream); }
.lib__list .lib__go { width: 18px; height: 18px; color: var(--tan); }
@keyframes lib-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lib__social { display: flex; gap: 1rem; justify-content: center; margin-top: 1.75rem; }
.lib__social a { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--brown-dark); background: transparent; border: 1px solid rgba(138, 111, 92, .3); transition: background-color .2s, color .2s; }
.lib__social a:hover { background: var(--brown); color: var(--cream); }
.lib__social svg { width: 22px; height: 22px; }
.lib__foot { margin-top: 1.5rem; font-size: .8rem; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .lib__btn, .lib__chev { transition: none; } .lib__acc[open] .lib__list { animation: none; } }

/* ---- components/home.css ---- */
/* ==========================================================
   Home page sections, round 3 (Oct 29 2026)
   ========================================================== */
/* big brown section headings ("פרויקטים נבחרים", "נעים להכיר", "איך אפשר לעבוד איתי"...) */
.h-display { font-size: var(--fs-h2); color: var(--heading); letter-spacing: -.01em; }
.section-head.center { text-align: center; margin-inline: auto; }
.home-projects .all-link { margin-top: var(--space-4); }
.center { text-align: center; }

/* project cards: the name sits INSIDE the photo, bottom-right (item 5.4) */
.project-card { position: relative; }
.project-card__img { position: relative; }
.project-card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,20,20,.55), rgba(20,20,20,0) 42%); pointer-events: none; border-radius: inherit; }
.project-card .project-card__name { position: absolute; inset-inline-start: 1.1rem; inset-block-end: 1rem; z-index: 2; margin: 0; color: var(--white); font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); font-weight: 600; text-shadow: 0 1px 12px rgba(0,0,0,.35); }

/* "נעים להכיר" (items 6.1, 6.2) */
.about-tile__hello { margin-bottom: var(--space-2); }
.about-tile__big { font-family: var(--font-display); font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.3; color: var(--ink); margin-bottom: var(--space-3); font-weight: 500; }
.about-tile .lead { margin-bottom: var(--space-2); }
.rotator { position: relative; width: 100%; height: 100%; }
.rotator__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.3s var(--ease); }
.rotator__slide img { transform: scale(1.06); transition: transform 6s linear; }
.rotator__slide.is-active { opacity: 1; z-index: 2; clip-path: inset(0 0 0 0); animation: rot-in 1.3s cubic-bezier(.76, 0, .18, 1) both; }
.rotator__slide.is-active img { transform: scale(1); }
.rotator__slide.is-leaving { opacity: 1; z-index: 1; }
.rotator__slide:first-child { position: relative; }
@keyframes rot-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .rotator__slide.is-active { animation: none; } }

/* Before & After on a brown background (items 8.1-8.4) */
.section--brown { background: var(--brown); color: var(--cream); }
.ba-home__title { font-size: var(--fs-h2); color: var(--cream); font-weight: 400; letter-spacing: .02em; margin-bottom: var(--space-4); }
.ba-home__slider { max-width: 420px; margin-inline: auto; }
.ba-home__hint { margin: var(--space-3) 0 var(--space-3); font-size: var(--fs-lead); color: rgba(245, 241, 235, .9); }

/* contact band (items 10.1-10.4) */
.contact-btns { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: var(--space-3); }
.contact-btns .btn { min-width: 9.5rem; }
.cta-band { background: var(--beige); }
.cta-band .lead { margin-top: var(--space-1); }

/* Instagram live feed slot (item 9.3) */
.ig-live { min-height: 200px; }

/* projects page: every project the same size (round 3, inner 1.3) */
.projects-grid .project-card:first-child { grid-column: auto; }
.projects-grid .project-card:first-child .project-card__img { aspect-ratio: 4 / 5; }

/* room guide page */
.guide-sub { display: block; font-size: .5em; line-height: 1.25; margin-top: .4rem; color: var(--ink); }
.guide-bonus { display: grid; gap: 1.1rem; max-width: 900px; margin-inline: auto; }
@media (min-width: 760px) { .guide-bonus { grid-template-columns: 1fr 1fr; } }
.guide-bonus > div { background: var(--beige); border-radius: var(--radius); padding: 1.5rem 1.6rem; }
.guide-bonus h3 { font-size: var(--fs-h3); }
.guide-note { max-width: 900px; margin: var(--space-4) auto 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.6rem; }
.guide-note ul { padding-inline-start: 1.2rem; color: var(--ink-soft); }


/* ===== Round 4 (Oct 29 2026): "נעים להכיר" photos open from the centre outward, like light ===== */
.rotator__slide.is-active { animation: rot-light 1.9s cubic-bezier(.45, .05, .25, 1) both; }
.rotator__slide.is-active img { transform: scale(1); }
.rotator__slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 250, 240, .75), rgba(255, 246, 232, .25) 38%, rgba(255, 246, 232, 0) 70%); }
.rotator__slide.is-active::after { animation: rot-glow 1.5s ease-out both; }
@keyframes rot-light {
  0% { clip-path: circle(0% at 50% 50%); filter: brightness(1.18); }
  60% { filter: brightness(1.05); }
  100% { clip-path: circle(75% at 50% 50%); filter: brightness(1); }
}
@keyframes rot-glow { 0% { opacity: .65; } 100% { opacity: 0; } }
/* the first time the photo scrolls into view it opens the same way */
/* (the circle is on the inner .rotator: a fully clipped element is never "seen" by the scroll observer) */
.js .about-tile__img[data-reveal] { transform: none; transition: opacity .9s ease; }
.js .about-tile__img[data-reveal] .rotator { clip-path: circle(0% at 50% 50%); filter: brightness(1.25); transition: clip-path 1.8s cubic-bezier(.22, .61, .36, 1), filter 2s ease; }
.js .about-tile__img[data-reveal].is-in .rotator { clip-path: circle(75% at 50% 50%); filter: none; }
/* the opening slide must not replay the circle on page load (the tile itself does that) */
.rotator:not(.cycled) .rotator__slide.is-active { animation: none; }
.rotator:not(.cycled) .rotator__slide.is-active::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .rotator__slide.is-active, .rotator__slide.is-active::after { animation: none; }
  .js .about-tile__img[data-reveal] .rotator { clip-path: none; filter: none; transition: none; }
}
html.a11y-still .about-tile__img[data-reveal] .rotator { clip-path: none !important; filter: none !important; }


/* ===== Round 4 (Oct 29 2026): about page "הדרך שלנו לבית שלכם" (was "איך זה עובד איתי"), refreshed layout ===== */
.about-way__grid { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 900px) { .about-way__grid { grid-template-columns: 5fr 6fr; gap: var(--space-5); } }
.about-way__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 30px 60px -40px rgba(94, 70, 54, .55); }
.about-way__media picture, .about-way__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about-way__title { margin-bottom: var(--space-2); }
.about-way__intro { font-family: var(--font-display); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem); line-height: 1.35; color: var(--ink); max-width: 34rem; margin-bottom: var(--space-3); }
.about-way__pillars { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 0 0 var(--space-4); padding: 0; }
.about-way__pillars li { background: var(--beige); border-radius: 16px; padding: 1rem 1rem 1.1rem; font-weight: 600; color: var(--heading); line-height: 1.3; font-size: 1.02rem; }
.about-way__num { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 300; color: var(--tan); margin-bottom: .35rem; letter-spacing: .02em; }
@media (max-width: 520px) { .about-way__pillars { grid-template-columns: 1fr; } .about-way__pillars li { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; } .about-way__num { margin: 0; font-size: 1.35rem; } }
.about-way__body .lead { max-width: 36rem; }
.about-way__quote { margin: var(--space-4) 0; padding: .25rem 1.4rem .25rem 0; border-inline-start: 3px solid var(--tan); }
.about-way__quote p { font-family: var(--font-display); font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2.1rem); line-height: 1.35; color: var(--heading); margin: 0; }

/* ---- components/svc-cards.css ---- */
/* Service cards: framed, clickable, with an arrow that moves (home items 7.3-7.5, services page 3.3-3.4). */
.i-arrow { width: 1.25em; height: 1.25em; flex: none; }
.svc-cards { list-style: none; display: grid; gap: .9rem; }
@media (min-width: 640px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .svc-cards { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }
.svc-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 112px; height: 100%; padding: 1.4rem 1.6rem; border-radius: var(--radius); background: var(--cream); border: 1px solid rgba(138, 111, 92, .28); text-decoration: none; color: var(--ink); box-shadow: 0 1px 0 rgba(20,20,20,.03); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.svc-card h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); color: var(--heading); margin: 0; line-height: 1.3; }
.svc-card__go { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--brown); color: var(--white); transition: transform .35s var(--ease), background .35s; }
.svc-card__go .i-arrow { animation: nudge 2.4s var(--ease) infinite; }
.svc-card:hover, .svc-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brown); }
.svc-card:hover .svc-card__go { background: var(--brown-dark); transform: translateX(-4px); }
@keyframes nudge { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(-5px); } }
@media (prefers-reduced-motion: reduce) { .svc-card__go .i-arrow { animation: none; } }
html.a11y-still .svc-card__go .i-arrow { animation: none; }

/* services page: dark page with photo cards */
body.page-dark { background: #1d1a17; color: var(--cream); }
body.page-dark main .page-hero h1 { color: var(--cream); }
body.page-dark main .page-hero .eyebrow { color: var(--tan); }
body.page-dark main .page-hero .lead { color: rgba(245, 241, 235, .78); }
body.page-dark .cta-band { background: #2a2420; color: var(--cream); }
body.page-dark .cta-band h2 { color: var(--cream); }
body.page-dark .cta-band .lead { color: rgba(245, 241, 235, .78); }
.svc-tiles { list-style: none; display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .svc-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .svc-tiles { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
.svc-tile { display: block; position: relative; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--cream); background: #2a2420; border: 1px solid rgba(245, 241, 235, .14); transition: transform .4s var(--ease), border-color .4s; }
.svc-tile__img { display: block; aspect-ratio: 4 / 3.3; overflow: hidden; }
.svc-tile__img picture, .svc-tile__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.svc-tile__body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem 1.3rem; }
.svc-tile h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); color: var(--cream); margin: 0; line-height: 1.3; }
.svc-tile .svc-card__go { background: var(--tan); color: #1d1a17; }
.svc-tile:hover, .svc-tile:focus-visible { transform: translateY(-4px); border-color: var(--tan); }
.svc-tile:hover img { transform: scale(1.05); }
.svc-tile:hover .svc-card__go { transform: translateX(-4px); background: var(--cream); }

body.page-dark .site-footer { color: var(--ink); }
body.page-dark .site-header { color: var(--ink); }

/* ---- components/testimonials.css ---- */
/* "אתן כותבות" - testimonial screenshots (round 3, item 10) */
.tm-shot { margin: 0; border-radius: 18px; overflow: hidden; background: var(--white); box-shadow: 0 14px 40px -22px rgba(20,20,20,.4); border: 1px solid var(--line); }
.tm-shot img { display: block; width: 100%; height: auto; }
.tm-strip { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem var(--gutter) 1.25rem; margin-inline: calc(var(--gutter) * -1); align-items: flex-start; scrollbar-width: thin; }
.tm-strip .tm-shot { flex: 0 0 min(78vw, 320px); scroll-snap-align: center; }
.tm-wall { columns: 1; column-gap: 1.25rem; }
.tm-wall > div { break-inside: avoid; margin-bottom: 1.25rem; }
@media (min-width: 640px) { .tm-wall { columns: 2; } }
@media (min-width: 1040px) { .tm-wall { columns: 3; } }


/* ===== Round 4 (Oct 29 2026): the home strip moves by itself, all testimonials, seamless loop ===== */
.tm-marquee { position: relative; overflow: hidden; margin-inline: calc(var(--gutter) * -1); padding-block: .5rem 1.5rem;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to left, transparent, #000 6%, #000 94%, transparent); }
.tm-marquee__track { display: flex; gap: 1rem; width: max-content; align-items: center; will-change: transform; }
.tm-marquee .tm-shot { flex: 0 0 auto; width: 290px; }
@media (max-width: 640px) { .tm-marquee .tm-shot { width: 240px; } .tm-marquee__track { gap: .75rem; } }
.js .tm-marquee.is-running .tm-marquee__track { animation: tm-move var(--tm-dur, 60s) linear infinite; }
.tm-marquee:hover .tm-marquee__track, .tm-marquee:focus-within .tm-marquee__track, .tm-marquee.is-held .tm-marquee__track { animation-play-state: paused; }
/* RTL: the row runs to the left, so it slides right by exactly one copy and starts again */
@keyframes tm-move { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--tm-shift, 50%), 0, 0); } }
/* still: no motion, scroll by hand, no duplicate copy */
.tm-marquee.is-static { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-inline: var(--gutter); }
.tm-marquee.is-static .tm-shot[aria-hidden="true"] { display: none; }
.tm-marquee.is-static .tm-shot { scroll-snap-align: center; }
@media (prefers-reduced-motion: reduce) { .tm-marquee__track { animation: none !important; } }

/* ---- components/a11y.css ---- */
/* Small accessibility button (round 3, item 12.2): bottom-right, away from the WhatsApp button; the × hides it. */
.a11y { position: fixed; z-index: 45; inset-inline-start: 12px; inset-block-end: max(16px, env(safe-area-inset-bottom)); }
.a11y.is-hidden { display: none; }
.a11y__btn { width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--brown-dark); color: var(--white); cursor: pointer; box-shadow: 0 8px 24px -10px rgba(0,0,0,.45); opacity: .88; transition: opacity .2s, transform .2s; }
.a11y__btn:hover, .a11y__btn:focus-visible { opacity: 1; transform: scale(1.05); }
.a11y__btn svg { width: 24px; height: 24px; }
.a11y__x { position: absolute; top: -8px; inset-inline-end: -8px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream); color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.a11y__panel { position: absolute; inset-block-end: 54px; inset-inline-start: 0; width: 220px; background: var(--cream); color: var(--ink); border-radius: 14px; box-shadow: var(--shadow); padding: .75rem; display: grid; gap: .35rem; }
.a11y__panel[hidden] { display: none; }
.a11y__title { font-weight: 700; margin: 0 0 .25rem; }
.a11y__panel button, .a11y__panel a { text-align: start; font: inherit; font-size: .95rem; padding: .5rem .7rem; border-radius: 8px; border: 1px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; text-decoration: none; }
.a11y__panel [aria-pressed="true"] { background: var(--brown); color: var(--white); border-color: var(--brown); }
html.a11y-contrast { filter: contrast(1.25); }
html.a11y-contrast body { background: #fff; }
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition: none !important; }

@media (max-width: 640px) { .a11y { inset-block-end: 88px; inset-inline-start: 10px; } .a11y__btn { width: 38px; height: 38px; } }
@media (max-width: 640px) { .a11y { inset-block-end: max(16px, env(safe-area-inset-bottom)); } }
.a11y__x { width: 24px; height: 24px; top: -14px; inset-inline-end: -14px; }
.a11y { margin-top: 14px; }

/* ---- components/round5.css ---- */
/* ==========================================================
   ROUND 5 (Oct 30 2026): Shir's fix list (33 items, approved by Yaniv on Oct 30).
   Everything for round 5 lives in this one file, after all the others, so it is easy to find and to undo.
   ========================================================== */

/* ---- item 2: brown text is the darker #5C4636 everywhere (tokens.css sets --heading / --brown-dark) ---- */
.eyebrow, .link-arrow, .link-back, .mobile-menu h2, .site-footer h2, .story__big, .big-line em, .svc-promise em,
.path-steps h3, .service-row .go, .contact-lines svg, .feel-icons__ic, .nav a[aria-current="page"], .nav a:hover,
.nav button.nav-group:hover, .other-services a:hover, .service-row a:hover h3, .lib__role { color: var(--heading); }

/* ---- item 1: WhatsApp instead of TikTok in the header; brown with a cream icon, like every WhatsApp button ---- */
.social a.social__wa { background: var(--heading); border-color: var(--heading); color: var(--cream); }
.social a.social__wa:hover { background: #4B382B; border-color: #4B382B; color: var(--cream); }

/* ---- item 3: over a full photo (home hero, service pages) the header is transparent and part of the photo;
        it gets its cream colour once the page scrolls ---- */
.logo__light { display: none; }
.site-header { transition: background-color .45s ease, border-color .45s ease, -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease; }
.site-header.over-hero:not(.is-scrolled),
body:has(> main > .hero:first-child, > main > .svc-hero:first-child) .site-header:not(.is-scrolled) {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
.site-header.over-hero:not(.is-scrolled)::before,
body:has(> main > .hero:first-child, > main > .svc-hero:first-child) .site-header:not(.is-scrolled)::before {
  content: ""; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(40, 29, 21, .45), rgba(40, 29, 21, .16) 55%, rgba(40, 29, 21, 0)); }
.site-header.over-hero:not(.is-scrolled) .logo__dark,
body:has(> main > .hero:first-child, > main > .svc-hero:first-child) .site-header:not(.is-scrolled) .logo__dark { display: none; }
.site-header.over-hero:not(.is-scrolled) .logo__light,
body:has(> main > .hero:first-child, > main > .svc-hero:first-child) .site-header:not(.is-scrolled) .logo__light { display: block; }
.site-header.over-hero:not(.is-scrolled) :is(.nav > ul > li > a, .nav button.nav-group),
body:has(> main > .hero:first-child, > main > .svc-hero:first-child) .site-header:not(.is-scrolled) :is(.nav > ul > li > a, .nav button.nav-group) {
  color: var(--cream); text-shadow: 0 1px 10px rgba(30, 20, 14, .35); }
.site-header.over-hero:not(.is-scrolled) .nav .nav-cta,
body:has(> main > .hero:first-child, > main > .svc-hero:first-child) .site-header:not(.is-scrolled) .nav .nav-cta { text-shadow: none; }
.site-header.over-hero:not(.is-scrolled) .social a:not(.social__wa),
body:has(> main > .hero:first-child, > main > .svc-hero:first-child) .site-header:not(.is-scrolled) .social a:not(.social__wa) {
  color: var(--cream); border-color: rgba(245, 241, 235, .55); }
.site-header.over-hero:not(.is-scrolled) .social a.social__wa,
body:has(> main > .hero:first-child, > main > .svc-hero:first-child) .site-header:not(.is-scrolled) .social a.social__wa { border-color: rgba(245, 241, 235, .55); }
.site-header.over-hero:not(.is-scrolled) .menu-toggle span, .site-header.over-hero:not(.is-scrolled) .menu-toggle span::before, .site-header.over-hero:not(.is-scrolled) .menu-toggle span::after,
body:has(> main > .hero:first-child, > main > .svc-hero:first-child) .site-header:not(.is-scrolled) :is(.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after) { background: var(--cream); }
/* the open phone menu always has the solid cream header */
.menu-open .site-header { background: var(--cream) !important; }
.menu-open .site-header::before { display: none; }
.menu-open .site-header .logo__dark { display: block !important; }
.menu-open .site-header .logo__light { display: none !important; }
.menu-open .site-header .menu-toggle span::before, .menu-open .site-header .menu-toggle span::after { background: var(--ink) !important; }
.menu-open .site-header .menu-toggle span { background: transparent !important; }

/* ---- item 4: home hero, a slow gentle crossfade between the photos (like noa-geva.co.il): no wipe, no zoom ---- */
.js .hero.cycled:not(.is-static) .hero__slide.is-active { animation: none; }
.hero--logo .hero__slide.is-active { transition: opacity 1.4s cubic-bezier(.42, 0, .3, 1); } /* Oct 30 14:58 (Yaniv): a new photo every 3s, slower 1.4s crossfade */
/* Oct 30 14:58 (Yaniv): slightly darker, more classic - only the brightest photos (3 arch-sofa, 4 vanity, 6 open living; 1 TV wall a touch) */
/* 15:02 (Yaniv): darker still - all photos a touch, the brightest most */
.hero--logo .hero__slide img { filter: brightness(.92) contrast(1.04); }
.hero--logo .hero__slide:nth-child(3) img, .hero--logo .hero__slide:nth-child(4) img, .hero--logo .hero__slide:nth-child(6) img { filter: brightness(.78) contrast(1.06); }
.hero--logo .hero__slide:nth-child(1) img { filter: brightness(.85) contrast(1.05); }
.js .hero.is-playing:not(.is-static) .hero__slide.is-active img,
.js .hero.is-playing:not(.is-static) .hero__slide:nth-child(even).is-active img,
.js .hero.cycled:not(.is-static) .hero__slide.is-leaving img { animation: none; }
.js .hero:not(.is-static) .hero__slide:first-child img { transform: scale(1.05); }
.js .hero--logo.is-ready:not(.is-static) .hero__slide:first-child img { transform: none; }
.hero--logo .hero__slide img { object-position: var(--pos, 50% 50%); }
@media (max-width: 700px) { .hero--logo .hero__slide img { object-position: var(--pos-m, 50% 50%); } }

/* ---- item 5: home "פרויקטים נבחרים": on computers all 9 projects at once, a 3 x 3 grid with the names (like /projects/) ---- */
@media (min-width: 900px) {
  .carousel--home .carousel__track { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto;
    gap: clamp(1rem, .5rem + 1.2vw, 1.75rem); overflow: visible; scroll-snap-type: none; width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding: 0; }
  .carousel--home .carousel__nav { display: none; }
  .carousel--home .project-card__img { aspect-ratio: 4 / 4.6; }
}

/* ---- item 6: home "נעים להכיר" photos: a clean, gentle crossfade, no circle, no glow, no zoom ---- */
.rotator__slide { transition: opacity 1s cubic-bezier(.42, 0, .3, 1); } /* round 5b: 1s crossfade every 3s, ~2s fully visible (was 1.8s / 4.5s) */
.rotator__slide img, .rotator__slide.is-active img { transform: none; transition: none; }
.rotator__slide.is-active, .rotator.cycled .rotator__slide.is-active { animation: none; clip-path: none; filter: none; }
.rotator__slide::after, .rotator__slide.is-active::after { display: none; animation: none; }
.js .about-tile__img[data-reveal] .rotator, .js .about-tile__img[data-reveal].is-in .rotator { clip-path: none; filter: none; transition: none; }

/* ---- item 8: Before & After: a classic serif that suits Shir's logo (Frank Ruhl Libre), less height on computers ---- */
.ba-home, .ba-home .ba-home__title, .ba-home .ba-home__hint { font-family: 'Frank Ruhl Libre', 'David Libre', 'Times New Roman', serif; }
.ba-home .ba-home__title { font-weight: 400; letter-spacing: .03em; line-height: 1.1; font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.9rem); margin-bottom: var(--space-3); }
.ba-home .ba-home__hint { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem); letter-spacing: .01em; margin: var(--space-2) 0 var(--space-3); }
.ba-home .btn { font-family: var(--font-body); }
@media (min-width: 900px) { .section.ba-home { padding-block: clamp(3rem, 1.5rem + 2.4vw, 4.75rem); } }

/* ---- item 9: contact form at the bottom of the home page ---- */
.home-contact__grid { display: grid; gap: var(--space-4); align-items: center; }
.home-contact__text { text-align: center; }
.home-contact__text .contact-btns { justify-content: center; }
.home-contact__formtitle { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
@media (min-width: 900px) {
  .home-contact__grid { grid-template-columns: 5fr 6fr; gap: var(--space-5); }
  .home-contact__text { text-align: right; }
  .home-contact__text .contact-btns { justify-content: flex-start; }
}

/* ---- item 10: About = one section, one text (styled after noa-geva.co.il / reut-manor.co.il) ---- */
.about-one__grid { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 900px) { .about-one__grid { grid-template-columns: 5fr 6fr; gap: clamp(3rem, 1rem + 5vw, 6.5rem); } }
.about-one__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 30px 60px -40px rgba(92, 70, 54, .55); }
.about-one__media picture, .about-one__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about-one__body { max-width: 37rem; }
.about-one__title { font-weight: 400; line-height: 1.15; margin-bottom: 0; }
.about-one__hello { display: block; font-size: clamp(2.3rem, 1.5rem + 3vw, 3.9rem); letter-spacing: -.01em; }
.about-one__name { display: block; margin-top: .55rem; font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); font-weight: 400; line-height: 1.35; color: var(--heading); letter-spacing: 0; }
.about-one__rule { display: block; width: 56px; height: 2px; background: var(--tan); margin: var(--space-3) 0; border-radius: 2px; }
.about-one__body p { font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem); line-height: 1.85; color: #3a3330; margin-bottom: 1.15rem; }
.about-one__body p.about-one__close { font-family: var(--font-display); font-size: clamp(1.18rem, 1.05rem + .5vw, 1.45rem); line-height: 1.6; color: var(--heading); font-weight: 500; margin-top: var(--space-3); }
.about-one .contact-btns { justify-content: flex-start; margin-top: var(--space-3); }
@media (max-width: 899px) { .about-one__media { max-width: 520px; width: 100%; margin-inline: auto; aspect-ratio: 4 / 4.6; } }

/* ---- item 31: testimonials page: the same moving strip as on the home page, a little bigger ---- */
.tm-marquee--page .tm-shot { width: 330px; }
@media (max-width: 640px) { .tm-marquee--page .tm-shot { width: 260px; } }
.tm-page { padding-bottom: var(--space-5); }

/* ---- item 33: contact page: brown #5C4636 with light text; the form card stands out ---- */
.contact-page { background: var(--heading); color: var(--cream); padding-bottom: var(--space-6); }
.contact-page h1 { color: var(--cream); }
.contact-page .eyebrow { color: var(--tan); }
.contact-page .lead { color: rgba(245, 241, 235, .85); }
.contact-page .contact-lines a { color: var(--cream); }
.contact-page .contact-lines svg { color: var(--tan); }
.contact-page__hours { margin-top: 1.5rem; color: rgba(245, 241, 235, .78); }
.contact-page__grid { display: grid; gap: var(--space-3) var(--space-5); grid-template-areas: "intro" "form" "more"; }
.contact-page__intro { grid-area: intro; }
.contact-page__form { grid-area: form; color: var(--ink); background: var(--cream); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); border: 1px solid rgba(245, 241, 235, .4); }
.contact-page__more { grid-area: more; }
.contact-page__formtitle { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-bottom: var(--space-3); color: var(--heading); }
.contact-page .btn--wa-onbrown { border: 1px solid rgba(245, 241, 235, .6); background: #4B382B; }
.contact-page .btn--wa-onbrown:hover { background: #3d2e23; }
.contact-page :focus-visible { outline-color: var(--cream); }
.contact-page__form :focus-visible { outline-color: var(--heading); }
@media (min-width: 900px) {
  .contact-page__grid { grid-template-columns: 5fr 6fr; grid-template-areas: "intro form" "more form"; align-items: start; }
  .contact-page__intro { align-self: end; }
}

/* WhatsApp buttons stay brown with cream text; on a brown section they get a thin cream outline so they still read */
:is(.svc-talk, .section--brown, .contact-page, .svc-hero) .btn--wa { border: 1px solid rgba(245, 241, 235, .6); }
.tm-marquee--page .tm-marquee__track { align-items: flex-start; }
.page-hero:has(+ .tm-page) { padding-bottom: var(--space-3); }

/* ---- components/round5b.css ---- */
/* ==========================================================
   ROUND 5b (Oct 30 2026): the home page presents Shir and the studio the way reut-manor.co.il and noa-geva.co.il
   do on their home pages: light, large statement type, a narrow reading measure, thin rules, lots of air.
   Everything for round 5b lives in this one file, after all the others, so it is easy to find and to undo.
   ========================================================== */

/* ---- opening statement under the hero, leading straight into the projects (Reut: "עיצוב פנים - מבתים יפים לבתים ייחודיים") ---- */
.home-intro { padding-bottom: var(--space-6); }
.home-intro__head { text-align: center; max-width: 54rem; margin-inline: auto; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.home-intro__head .eyebrow { display: block; margin-bottom: var(--space-3); }
.home-intro__statement { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.75rem, 1.15rem + 2.5vw, 3.15rem); line-height: 1.28; color: var(--heading); letter-spacing: -.01em; margin: 0 auto; max-width: 22ch; text-wrap: balance; }
.home-intro__sub { font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem); line-height: 1.75; color: #3a3330; max-width: 42rem; margin: var(--space-3) auto 0; text-wrap: pretty; }
.home-intro .all-link { margin-top: var(--space-4); }

/* ---- the studio / who I am (Noa: "סטודיו נועה גבע" beside her photo; Reut: "הפנים מאחורי העיצוב") ---- */
.home-studio__grid { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 900px) { .home-studio__grid { grid-template-columns: 5fr 6fr; gap: clamp(3rem, 1rem + 5vw, 6.5rem); } }
.home-studio__img { box-shadow: 0 30px 60px -40px rgba(92, 70, 54, .55); }
@media (max-width: 899px) { .home-studio__img { max-width: 520px; width: 100%; margin-inline: auto; aspect-ratio: 4 / 4.6; } }
.home-studio__body { max-width: 37rem; }
.home-studio__body .eyebrow { display: block; margin-bottom: var(--space-2); }
.home-studio__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.6rem); line-height: 1.1; color: var(--heading); letter-spacing: -.01em; margin: 0; }
.home-studio__role { display: block; margin-top: .6rem; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); font-weight: 400; line-height: 1.35; letter-spacing: 0; }
.home-studio__body p { font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem); line-height: 1.85; color: #3a3330; margin-bottom: 1.15rem; }
.home-studio__body p.home-studio__close { font-family: var(--font-display); font-size: clamp(1.15rem, 1.03rem + .45vw, 1.4rem); line-height: 1.6; color: var(--heading); font-weight: 500; margin-top: var(--space-3); }
.home-studio__more { margin-top: var(--space-2); }

/* ---- "שירותי הסטודיו" (Noa): an intro sentence, then each service with one line in Shir's words, thin rules, no boxes ---- */
.home-services__grid { display: grid; gap: var(--space-4); }
@media (min-width: 1040px) { .home-services__grid { grid-template-columns: 4fr 7fr; gap: clamp(3rem, 1rem + 5vw, 6rem); align-items: start; } .home-services__head { position: sticky; top: calc(var(--header-h) + 2rem); } }
.home-services__head .h-display { margin-bottom: var(--space-3); }
.home-services__head p { font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem); line-height: 1.8; color: #3a3330; max-width: 30rem; margin-bottom: var(--space-3); }
.svc-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(92, 70, 54, .22); }
.svc-rows > li { border-bottom: 1px solid rgba(92, 70, 54, .22); }
.svc-row { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem, .6rem + 1.5vw, 2rem); align-items: center; padding: clamp(1.35rem, 1rem + 1vw, 2rem) .25rem; text-decoration: none; color: var(--ink); transition: background-color .35s ease, padding .35s var(--ease); }
.svc-row__num { font-family: var(--font-display); font-weight: 300; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); color: var(--tan); min-width: 2ch; align-self: start; padding-top: .3rem; }
.svc-row h3 { font-family: var(--font-display); font-size: clamp(1.25rem, 1.08rem + .7vw, 1.65rem); font-weight: 500; color: var(--heading); margin: 0 0 .35rem; line-height: 1.3; }
.svc-row__line { display: block; font-size: clamp(1rem, .96rem + .2vw, 1.1rem); line-height: 1.7; color: var(--ink-soft); max-width: 40rem; }
.svc-row__go { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(92, 70, 54, .35); color: var(--heading); transition: background-color .35s, color .35s, transform .35s var(--ease), border-color .35s; }
.svc-row:hover, .svc-row:focus-visible { background: rgba(234, 226, 214, .55); }
.svc-row:hover .svc-row__go, .svc-row:focus-visible .svc-row__go { background: var(--brown); border-color: var(--brown); color: var(--white); transform: translateX(-4px); }
@media (max-width: 639px) { .svc-row { grid-template-columns: 1fr auto; } .svc-row__num { display: none; } .svc-row__go { width: 40px; height: 40px; } }

/* ---- closing invitation: phone and email beside the form (Reut: "עיצוב מתחיל בשיחה") ---- */
.home-contact__lines { display: flex; flex-wrap: wrap; gap: .4rem .9rem; justify-content: center; align-items: center; font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); margin: var(--space-2) 0 var(--space-3); color: var(--heading); }
.home-contact__lines a { color: var(--heading); text-decoration: none; border-bottom: 1px solid rgba(92, 70, 54, .3); }
.home-contact__lines a:hover { border-bottom-color: var(--heading); }
.home-contact__lines span { opacity: .45; }
@media (min-width: 900px) { .home-contact__lines { justify-content: flex-start; } }

/* ---- headings with a dash (Yaniv's voice notes, Oct 30): the dash comes at the end of the phrase and is tied to the last
        word (build.mjs), and headings wrap evenly instead of leaving one word alone on a line ---- */
h1, h2, h3 { text-wrap: balance; }

/* ---- brown accents (Yaniv, Oct 30 14:10; PDF item 2): on light backgrounds every brown accent that is a line, an icon, an
        arrow, a small label or a border is the dark brown #5C4636 (--heading). The lighter #8A6F5C / #C69A7F stay only as
        fills and backgrounds, and on the dark/brown sections (contact page, Before & After, photo heros), where they read better. ---- */
:focus-visible { outline-color: var(--heading); }
.site-footer a:hover { color: var(--heading); }
.social a { border-color: rgba(92, 70, 54, .45); }
.social a:hover { background: var(--heading); border-color: var(--heading); }
.carousel__progress i { background: var(--heading); }
.service-row .num, .steps li::before, .about-way__num { color: var(--heading); }
.feel-list li::before, .path-steps li::before { background: var(--heading); }
.path-steps li::before { box-shadow: 0 0 0 5px rgba(92, 70, 54, .16); }
.path-steps li:not(:last-child)::after { background: linear-gradient(var(--heading), var(--heading)) top / 2px 100% no-repeat; }
.path-steps li:not(:last-child) h3::after { border-color: var(--heading); }
.fit-list li::before { border-color: var(--heading); }
.other-services a:hover, .svc-card:hover, .svc-card:focus-visible { border-color: var(--heading); }
.svc-card { border-color: rgba(92, 70, 54, .3); }
.svc-card__go { background: var(--heading); }
.notice { border-inline-start-color: var(--heading); }
.slot { border-color: rgba(92, 70, 54, .45); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--heading); box-shadow: 0 0 0 3px rgba(92, 70, 54, .16); }
.check input { accent-color: var(--heading); }
.about-way__quote { border-inline-start-color: var(--heading); }
.about-one__rule { background: var(--heading); }
.svc-row__num { color: var(--heading); }
.svc-row__go { background: var(--heading); border-color: var(--heading); color: var(--cream); }
.svc-row:hover .svc-row__go, .svc-row:focus-visible .svc-row__go { background: #4B382B; border-color: #4B382B; color: var(--cream); }
.lib__go, .lib__chev, .lib__list .lib__go { color: var(--heading); }
.lib__btn, .lib__list { border-color: rgba(92, 70, 54, .22); }
.lib__list li + li { border-top-color: rgba(92, 70, 54, .16); }
.lib__social a { border-color: rgba(92, 70, 54, .4); }
.lib__social a:hover { background: var(--heading); }
.lib__photo { box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px rgba(92, 70, 54, .35); }
/* the dark places keep their light accents */
.contact-page :focus-visible, .section--brown :focus-visible, body.page-dark :focus-visible { outline-color: var(--cream); }
.contact-page__form :focus-visible { outline-color: var(--heading); }

/* ---- home hero (Yaniv, Oct 30 14:10): the first photo is simply there on load, no framed reveal and no zoom; then the
        crossfades run as usual (a new photo every 4 s with a 1.8 s soft crossfade: hero.json interval + round5.css) ---- */
.js .hero--logo:not(.is-static) .hero__stage, .js .hero--logo.is-ready:not(.is-static) .hero__stage { clip-path: none; transition: none; }
.js .hero--logo:not(.is-static) .hero__slide:first-child img, .js .hero--logo.is-ready:not(.is-static) .hero__slide:first-child img { transform: none; transition: none; }