/* Layout + components. All values reference tokens.css — rebrand never touches this file. */
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--clr-text);
  background: var(--clr-bg);
  transition: background var(--t-normal), color var(--t-normal);
}
h1, h2, h3, .logo, .site-footer__wordmark {
  font-family: var(--ff-title);
  font-weight: var(--fw-display, 500);
  line-height: 1.05;
  letter-spacing: -.02em;
}
h3 { font-weight: 600; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
section { padding: var(--pad) var(--gutter); }
strong { font-weight: 700; }

/* Placeholder blocks — replaced by real assets at rebrand */
.ph {
  display: grid; place-items: center;
  color: rgba(0 0 0 / .35); font-size: .8rem; letter-spacing: .05em;
  border-radius: var(--radius);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: .9rem var(--gutter);
  background: var(--clr-bg);
}
/* One header in every state (Nisso 2026-10-13: "simply a sticky header"): logo,
   nav and the meeting pill, fixed from the first pixel, a solid cream bar. Once
   the page has scrolled (main.js) it only gains a hairline, a shadow that takes
   no space; nothing in it appears, hides or moves, the open mobile menu
   included. */
html.is-scrolled .site-header {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--clr-text) 12%, transparent);
}
/* The PIXAIO wordmark is the vector logo (assets/pixaio-logo.svg, inlined so it
   takes currentColor): never set in a font, never stretched. Its viewBox is
   cropped to the letters, so the height is the letter height plus 8%. */
.logo { display: inline-flex; color: var(--clr-ink); }
.wordmark { display: block; height: 1.75rem; width: auto; aspect-ratio: 403 / 92; }
.site-nav { display: flex; gap: 1.8rem; margin-inline-start: auto; }
.site-nav a { font-size: 1rem; font-weight: 600; transition: opacity var(--t-fast); }
.site-nav a:hover { opacity: .6; }
/* The section the visitor is in (aria-current, U06): underlined, in the nav and the menu */
.site-nav a[aria-current], .mobile-menu nav a[aria-current] {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em;
}
.header-actions { display: flex; align-items: center; gap: .6rem; }
.pill {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--clr-beige); color: var(--clr-ink);
  border: 0; border-radius: var(--radius-full);
  padding: .8rem 1.4rem; font: 600 1rem var(--ff-body); letter-spacing: -.02em;
  cursor: pointer; transition: background var(--t-fast), opacity var(--t-fast);
}
.pill:hover { opacity: .85; }
.pill--cta { background: var(--clr-dark); color: var(--clr-on-dark); }
.pill--cta:hover { opacity: 1; background: var(--clr-dark-raised); }
.pill__icon { transition: transform var(--t-fast) var(--ease-out-expo); }
.pill--cta:hover .pill__icon, .office-card__contact:hover .pill__icon { transform: rotate(-14deg); }
.pill--dark { background: var(--clr-dark); color: var(--clr-on-dark); }
.pill--dark:hover { opacity: 1; background: var(--clr-dark-raised); }
.pill:focus-visible { outline: 2px solid var(--clr-ink); outline-offset: 3px; }
.pill__icon {
  display: inline-grid; place-items: center;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--clr-primary); color: var(--clr-on-dark); font-size: .9rem;
}
.circle-btn {
  width: 3rem; height: 3rem; border-radius: 50%; border: 0;
  background: var(--clr-glass); color: var(--clr-text);
  font: 600 .9rem var(--ff-body); cursor: pointer;
  display: inline-grid; place-items: center;
  transition: background var(--t-fast);
}
.hamburger { display: none; width: 2.75rem; height: 2.75rem; }
.hamburger svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hamburger[aria-expanded="true"] .hamburger__open, .hamburger:not([aria-expanded="true"]) .hamburger__close { display: none; }
/* hover only with a real pointer, and a shade of the stone, not the bar's cream:
   a tap leaves :hover stuck on touch screens and the circle would vanish */
@media (hover: hover) { .hamburger:hover { background: color-mix(in srgb, var(--clr-ink) 10%, var(--clr-beige)); } }
.hamburger:focus-visible { outline: 2px solid var(--clr-ink); outline-offset: 3px; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--clr-beige);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
}
.mobile-menu nav { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.mobile-menu a { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--ff-title); font-size: var(--fs-m); }
.mobile-menu__contact { margin-top: 1rem; }
.mobile-menu__contact a { font-family: var(--ff-body); font-size: var(--fs-body-lg); text-decoration: underline; text-underline-offset: .25em; }
.mobile-menu a:focus-visible { outline: 2px solid var(--clr-ink); outline-offset: 3px; }
/* Open: the panel lies under the unchanged header bar, whose pill stays the one
   meeting link; only the button's icon turns into a cross. */
html.menu-open, html.menu-open body { overflow: hidden; }

/* ---------- Hero ----------
   Approved 2026-10-07 (revision 6 of the hero-motion prototype): one centred
   column at every width: the headline, one supporting line (no pill since
   2026-10-13: the header's pill is the call to action), then the object (since 2026-10-11 the launch showcase, js/hero-motion.js)
   taking the rest of the first screen.
   Below the fixed header. One message since 2026-10-10: the headline is two
   phrases, „הופכים את העסק שלך” / „לחכם ורווחי יותר.”, one line each wherever
   they fit; the supporting sentence is two halves, one line each from tablet
   up and each balanced over two lines on a phone. Never shrunk to force fewer lines. */
.hero {
  --header-h: 5.25rem;       /* the fixed header: 3.4rem pill + .9rem padding each side */
  --hero-above: 28.25rem;    /* header + everything above the object (two-line headline, two-line support) */
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: var(--container-xl); margin-inline: auto;
  padding: calc(var(--header-h) + clamp(.25rem, 2vh, 1.75rem)) var(--gutter) clamp(2.5rem, 6vh, 4.5rem);
}
.hero__copy { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.hero__title { font-weight: inherit; }
.hero__title-main {
  display: block;
  font-weight: var(--fw-display);
  font-size: clamp(2.125rem, 2.4vw + 1.6rem, 4rem);
  line-height: 1.08; letter-spacing: -.03em;
}
.hero__phrase { display: block; text-wrap: balance; }
/* „הופכים את העסק שלכם” (plural since 2026-10-15) is 299px at 34px, one letter
   past the 280px a 320px phone leaves inside the gutter: below 360px the h1 alone
   takes .75rem of the gutter on each side, so the line stays whole and unshrunk. */
@media (width < 360px) { .hero__title { margin-inline: -.75rem; } }
.hero__title-sub {
  display: block; margin-top: .9rem; max-width: 40em; margin-inline: auto;
  font-family: var(--ff-body); font-size: var(--fs-body-lg); font-weight: 400;
  line-height: 1.4; letter-spacing: -.01em; color: var(--clr-muted-text);
  text-wrap: balance;
}
.hero__sub-part { display: block; text-wrap: balance; }

/* The object, since 2026-10-11: the launch showcase (js/hero-motion.js). One
   authentic client product with its client's logo at a time, in one fixed slot,
   and one fixed message under it. The product slot is as tall as the screen's
   remaining height allows, so the whole showcase and its message fit the first
   screen on desktop and tablet. */
.hero__stage {
  --prod-h: clamp(12rem, 100svh - 34rem, 21rem);
  --logo-row: 3.4rem;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: min(100%, 46rem);
  margin-top: clamp(1.5rem, 4vh, 2.75rem);
}
.hero__showcase { display: grid; width: min(100%, 36rem); }
/* All pairs share one grid cell. The outgoing pair fades out before the next
   fades in, so two clients are never drawn together. */
.hero__pair {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  opacity: 0; visibility: hidden; transform: translateY(.5rem) scale(.985);
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.hero__pair.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .7s ease .5s, transform 1.1s cubic-bezier(.2, .7, .2, 1) .5s, visibility 0s linear .5s;
}
.hero__product {
  display: block; width: 100%; height: var(--prod-h);
  object-fit: contain; object-position: 50% 100%;
}
/* The Arcaffe photograph has its own light backdrop: its box is the photo's own
   proportion (cropped at the sides where the slot is narrower) and its four
   edges dissolve into the page. */
.hero__pair[data-pair="arcaffe"] .hero__product {
  width: min(100%, var(--prod-h) * 970 / 520); object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
                      linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
              linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent);
  mask-composite: intersect;
}
.hero__client { display: block; width: auto; height: var(--logo-row); max-width: 100%; }
/* Optical sizes: the three marks read as one size. */
.hero__pair[data-pair="arcaffe"] .hero__client { height: 1.75rem; margin-block: calc((var(--logo-row) - 1.75rem) / 2); }
.hero__pair[data-pair="stybel"] .hero__client { height: 3.1rem; margin-block: calc((var(--logo-row) - 3.1rem) / 2); }

.hero__message {
  margin-top: clamp(1.25rem, 3vh, 2rem); max-width: 40em;
  font-family: var(--ff-body); font-size: 1.25rem; line-height: 1.45; letter-spacing: -.01em;
  color: var(--clr-ink);
}
.hero__message-part { display: block; text-wrap: balance; }
.hero__message-part:first-child { font-weight: 600; }

/* Pause / play: one small control at the logo row's far (physical left) edge,
   which the products and logos never reach. */
.hero__ctl {
  position: absolute; inset-inline-end: 0;
  top: calc(var(--prod-h) + 1.1rem + (var(--logo-row) - 2.25rem) / 2);
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; border: 1px solid var(--clr-muted); background: var(--clr-surface);
  color: var(--clr-ink); cursor: pointer;
}
.hero__ctl:hover { border-color: var(--clr-ink); }
.hero__ctl:focus-visible { outline: 2px solid var(--clr-ink); outline-offset: 3px; }
.hero__ctl .i-play { display: none; }
.hero__ctl[data-paused="true"] .i-play { display: inline; }
.hero__ctl[data-paused="true"] .i-pause { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__pair, .hero__pair.is-active { transition: none; transform: none; }
}

/* Phone: the same stack, the product centred at full width inside the page's
   margins; the message's second sentence balances over two lines. */
@media (max-width: 640px) {
  .hero { padding-top: calc(var(--header-h) + 1rem); padding-bottom: 2.5rem; }
  .hero__title-sub { margin-top: .8rem; font-size: 1.0625rem; line-height: 1.45; }
  .hero__stage { --prod-h: clamp(11rem, 100svh - 37rem, 14rem); --logo-row: 3rem; width: 100%; margin-top: 1.75rem; }
  .hero__showcase { width: 100%; }
  .hero__pair { gap: .9rem; }
  .hero__pair[data-pair="arcaffe"] .hero__client { height: 1.5rem; margin-block: calc((var(--logo-row) - 1.5rem) / 2); }
  .hero__pair[data-pair="stybel"] .hero__client { height: 2.75rem; margin-block: calc((var(--logo-row) - 2.75rem) / 2); }
  .hero__message { margin-top: 1.1rem; font-size: 1.0625rem; }
  .hero__ctl { top: calc(var(--prod-h) + .9rem + (var(--logo-row) - 2.25rem) / 2); }
}

/* ---------- Bullet lists (shared) ---------- */
.dots li { position: relative; padding-inline-start: 1.3rem; margin-bottom: .8rem; line-height: 1.5; }
.dots li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .55em;
  width: .45em; height: .45em; border-radius: 50%; background: var(--clr-primary);
}

/* ---------- Team ---------- */
.team { padding-inline: 0; padding-bottom: calc(var(--pad) * .5); }
.team__photo {
  position: relative; max-width: 46.5rem; aspect-ratio: 5/7;
  margin-inline: auto; border-radius: var(--radius);
}
.team__pill {
  position: absolute; top: 56%; inset-inline-end: -16rem;
  width: 20rem; justify-content: flex-start;
  border-radius: var(--radius-btn); padding: 1.1rem 1.5rem;
}
.marquee { overflow: hidden; margin-top: -6.5rem; position: relative; z-index: 2; }
.marquee__track {
  display: flex; gap: 1.5rem; width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.member {
  display: flex; align-items: center; gap: .9rem;
  background: color-mix(in srgb, var(--clr-glass) 50%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: var(--radius);
  padding: 16px 1.6rem 16px 16px; white-space: nowrap;
}
.member__avatar { width: 4.25rem; height: 4.25rem; border-radius: 50%; flex: none; }
.member__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--clr-status-open); flex: none; }
.member strong { display: block; font-size: 1rem; }
.member em { font-style: normal; color: var(--clr-muted-text); font-size: var(--fs-body-xs); }

/* ---------- Brief builder ---------- */
.brief { text-align: center; }
.brief__title { font-size: var(--fs-display); margin-bottom: calc(var(--pad) * .5); }
.brief__bar {
  display: flex; align-items: center; gap: 1rem;
  max-width: var(--container-md); margin-inline: auto;
  background: var(--clr-glass); border-radius: var(--radius-full);
  padding: .8rem 1rem .8rem 1.6rem;
}
.brief__label { font-size: var(--fs-body-lg); flex: none; white-space: nowrap; }
.brief__choice { font-size: var(--fs-body-lg); color: var(--clr-accent-text); min-width: 0; }
.brief__next { margin-inline-start: auto; background: var(--clr-dark); color: var(--clr-on-dark); flex: none; white-space: nowrap; }
.brief__next:disabled { opacity: .4; cursor: default; }
.services-grid {
  max-width: var(--container-xl); margin: calc(var(--pad) * .8) auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.6rem 3rem;
  text-align: start;
}
.services-grid button {
  width: 100%; min-height: 44px; padding: .35rem .5rem;
  display: flex; align-items: baseline; gap: .8rem;
  color: inherit; background: transparent; border: 2px solid transparent;
  border-radius: var(--radius-sm); cursor: pointer; text-align: start;
  -webkit-appearance: none; appearance: none;
  font-size: var(--fs-xs); font-family: var(--ff-body); font-weight: 500;
  transition: opacity var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.services-grid button:hover { opacity: .65; }
.services-grid button[aria-pressed="true"] { background: var(--clr-beige); border-color: var(--clr-primary); }
.services-grid button:focus-visible { outline: 3px solid var(--clr-primary); outline-offset: 3px; }
.services-grid__arrow { color: var(--clr-primary); font-size: 1.1rem; }
.services-grid__plus { margin-inline-start: auto; font-size: 1.4rem; font-weight: 400; }

/* ---------- Offices ---------- */
.offices {
  background: var(--clr-beige);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter);
  align-items: stretch;
}
.office-card {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.6rem;
  background: var(--clr-surface); border-radius: var(--radius); padding: 2.4rem;
}
.office-card__img { width: 11.5rem; aspect-ratio: 3/4; }
.office-card h3 { font-size: var(--fs-s); margin: 1rem 0 auto; }
.status-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--clr-glass); border-radius: var(--radius-full);
  padding: .45rem 1rem; font-size: var(--fs-body-xs); color: var(--clr-muted-text);
  width: fit-content;
}
.status-chip__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--clr-status-open); }
.status-chip.is-closed .status-chip__dot { background: var(--clr-status-closed); }
.office-card__hours { margin-top: 2.5rem; font-size: var(--fs-body-sm); }
.office-card__phone { font-size: var(--fs-body-sm); margin-top: .5rem; }
.office-card__phone span { color: var(--clr-primary); }
.office-card__contact { position: absolute; top: 2rem; inset-inline-end: 2rem; background: var(--clr-glass); }

/* ---------- Footer ---------- */
.site-footer { background: var(--clr-off-white); padding: var(--pad) var(--gutter) 2rem; }
.site-footer__cols {
  max-width: var(--container-xl); margin-inline: auto;
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem;
}
.site-footer__about { font-size: var(--fs-body-sm); line-height: 1.6; max-width: 18rem; }
.site-footer__cols nav { display: flex; flex-direction: column; gap: .7rem; }
.site-footer__cols h2 {
  font-family: var(--ff-title); font-weight: 500; color: var(--clr-muted-text);
  font-size: var(--fs-body); line-height: 1.25; margin-bottom: .4rem;
}
.site-footer__cols nav a { font-size: var(--fs-body-sm); }
.site-footer__cols nav a:hover { opacity: .6; }
/* the links stay on one line; the 1fr tracks give way. The footer has no pill
   of its own (2026-10-13): every page already ends on its CTA band. */
.site-footer__cols nav a { white-space: nowrap; }
.site-footer__brand { max-width: var(--container-xl); margin: 6rem auto 0; position: relative; }
.site-footer__mark { color: var(--clr-text); font-size: 2.6rem; }
.site-footer__social {
  position: absolute; top: 0; inset-inline-end: 0;
  display: flex; flex-direction: column; gap: .4rem; text-align: end;
  font-size: var(--fs-body-sm);
}
.site-footer__wordmark { font-size: var(--fs-display); line-height: .9; margin-top: 1rem; color: var(--clr-ink); }
.site-footer__wordmark .wordmark { height: .8em; }
.site-footer__copy { text-align: end; font-size: var(--fs-body-xs); color: var(--clr-muted-text); }

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(50px); transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo); }
  [data-reveal].is-in { opacity: 1; transform: none; }
}

/* Line-mask headline reveal: main.js wraps each rendered line of a
   [data-line-reveal] heading (never single letters — Hebrew) in a mask.
   The mask only clips paint, so the heading's layout is unchanged; the
   intact text stays in a visually hidden label for assistive tech. */
.line-mask { display: block; clip-path: inset(-.35em -.5em -.2em); }
.line-mask__inner { display: block; }
.line-mask__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .line-mask__inner {
    transform: translateY(140%);
    transition: transform .8s var(--ease-out-expo) calc(var(--i, 0) * 80ms);
  }
  [data-line-reveal].is-in .line-mask__inner { transform: none; }
}

/* ---------- Responsive ---------- */
/* Touch selector: tablets, touch screens and phones (every screen that is not
   a wide one with a fine pointer) get the need selector as bordered tiles. */
@media not all and (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .brief__bar { flex-wrap: wrap; border-radius: 1.75rem; row-gap: .4rem; }
  .brief__choice { flex: 1 1 12rem; min-width: 0; text-align: start; }
  .brief__next { min-height: 3rem; }
  .services-grid { grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 2.5rem; }
  .services-grid button {
    min-height: 3.5rem; padding: .85rem 1.1rem; align-items: center;
    background: var(--clr-surface); font-size: var(--fs-body-lg);
    border: 1px solid color-mix(in srgb, var(--clr-text) 16%, transparent);
    -webkit-tap-highlight-color: transparent;
  }
  .services-grid button { height: 100%; }
  .services-grid button:hover { opacity: 1; }
  .services-grid button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--clr-primary); }

}
@media (width <= 980px) {
  .site-nav { display: none; }
  .hamburger { display: inline-grid; }
  .header-actions { margin-inline-start: auto; }   /* the nav is hidden: pill and button go to the far end (physical left) */
  /* the pill stays, compact: as tall as the menu button, so the bar keeps its height */
  .header-actions .pill--cta { min-height: 2.75rem; padding-block: .35rem; padding-inline: 1rem .45rem; gap: .5rem; font-size: .9375rem; white-space: nowrap; }
  .header-actions .pill--cta .pill__icon { width: 1.6rem; height: 1.6rem; }
  .hero { --header-h: 4.55rem; }   /* 2.75rem menu button + .9rem padding each side */
  .offices { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (width <= 767px) {
  .wordmark { height: 1.3rem; }
  .team__pill { inset-inline-end: 1rem; width: auto; }
  .team__pill { inset-inline-end: 1rem; }
  .services-grid { grid-template-columns: 1fr; }
  .office-card { grid-template-columns: 1fr; }
  .office-card__contact { top: auto; bottom: 2rem; }
  .site-footer__cols { grid-template-columns: 1fr; }
  .site-footer__social { position: static; text-align: start; flex-direction: row; gap: 1.2rem; margin-top: 2rem; }
}

/* Phone footer (Nisso 2026-10-13: too long). One compact block instead of
   stacked columns: wordmark at a modest size, the sentence, the four nav links
   in one wrapped row, the two contact links in one row, then the legal links
   and the copyright on one small line. The column headings go; each nav keeps
   its aria-label, so the landmarks are still named. */
@media (width <= 620px) {
  .site-footer {
    padding: 2.5rem var(--gutter) 1rem;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  }
  .site-footer__cols, .site-footer__brand { display: contents; }
  .site-footer__cols h2 { display: none; }
  .site-footer__wordmark { order: 1; grid-column: 1 / -1; margin: 0; font-size: 2.25rem; line-height: 1; }
  .site-footer__about { order: 2; grid-column: 1 / -1; max-width: none; margin-top: .75rem; }
  .site-footer__cols nav { flex-direction: row; flex-wrap: wrap; column-gap: 1.5rem; row-gap: 0; grid-column: 1 / -1; }
  .site-footer__cols nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .site-footer__cols nav:nth-of-type(1) { order: 3; margin-top: .75rem; }
  .site-footer__cols nav:nth-of-type(2) { order: 4; column-gap: 1.25rem; }   /* both contact links on one row at 360 */
  .site-footer__cols nav:nth-of-type(3), .site-footer__copy {
    order: 5; margin-top: .75rem; padding-top: .25rem;
    border-top: 1px solid color-mix(in srgb, var(--clr-ink) 12%, transparent);
  }
  .site-footer__cols nav:nth-of-type(3) { grid-column: 1; column-gap: 1rem; }
  .site-footer__cols nav:nth-of-type(3) a { font-size: var(--fs-body-xs); }
  .site-footer__copy { order: 6; grid-column: 2; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; padding-inline-start: 1rem; white-space: nowrap; }
}

/* Hebrew pass additions */
.brief__lead {
  max-width: var(--container-md);
  margin: -1.6rem auto 2.4rem;
  font-size: var(--fs-body-lg);
  line-height: 1.6;
}

/* Footer: its own colour (Nisso 2026-10-13: separate it by colour), the site's
   charcoal, the black of the header pill and the hub cards' hover. Cream text,
   cream wordmark; headings and the copyright line in --clr-on-dark-muted
   (cream at 72%, about 8:1, tests/test_text_contrast.py). No terracotta text
   here. Links underline on hover and take a cream focus ring. */
.site-footer {
  background: var(--clr-dark); color: var(--clr-on-dark);
}
.site-footer__wordmark { color: var(--clr-on-dark); }
.site-footer__cols h2, .site-footer__copy { color: var(--clr-on-dark-muted); }
.site-footer__cols nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .25em; }
.site-footer a:focus-visible { outline: 2px solid var(--clr-on-dark); outline-offset: 3px; border-radius: 2px; }
@media (width <= 620px) {
  .site-footer__cols nav:nth-of-type(3), .site-footer__copy {
    border-top-color: color-mix(in srgb, var(--clr-on-dark) 18%, transparent);
  }
}

/* CTA band: the page's closing moment (2026-10-15, Nisso: the old two-column
   band left the heading and the pill at opposite edges of a wide screen with an
   empty middle and an orphan dot). One centred unit: heading, line, then the
   pill with the WhatsApp link beside it, on a stone card capped to the site's
   container and a text column capped to a reading measure. */
.cta-band-wrap { padding: calc(var(--pad) * .5) var(--gutter); }
.cta-band {
  max-width: var(--container-xl); margin-inline: auto;
  background: var(--clr-beige);
  border-radius: 16px;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.cta-band > * { max-width: 40rem; }
.cta-band h2 {
  font-size: var(--fs-m); font-weight: var(--fw-display);
  line-height: 1.2; text-wrap: balance;
}
.cta-band p {
  margin-top: 1rem;
  max-width: 34rem; font-size: var(--fs-body-sm); line-height: 1.55; text-wrap: pretty;
}
.cta-band__actions {
  margin-top: 2rem;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  column-gap: 1.75rem; row-gap: .25rem;
}
/* A secondary contact beside a meeting CTA (U08): a text link, never a pill */
.cta-alt {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-size: var(--fs-body-sm); text-decoration: underline; text-underline-offset: .25em;
}
.cta-alt:hover { text-decoration-thickness: 2px; }
.cta-alt:focus-visible { outline: 2px solid var(--clr-ink); outline-offset: 2px; border-radius: 2px; }
.brief__alt { margin-top: 1rem; }
/* phones: the pill and the link stack, centred, the pill first */
@media (width <= 620px) {
  .cta-band__actions { flex-direction: column; margin-top: 1.5rem; }
}

/* ---------- Reads: related-articles close (shared across inner pages) ----------
   One design for the blog surface everywhere: the homepage's .work-card. */
.reads { max-width: var(--container-xl); margin-inline: auto;
  padding: 0 var(--gutter) calc(var(--pad) * .5); }
.reads__head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 2rem; margin-bottom: 2.6rem; }
.reads__head h2 { font-size: var(--fs-l); font-weight: var(--fw-display); }
.reads__grid { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem; align-items: stretch; }
/* The homepage's article cards and covers (Nisso 2026-10-12); on these cream
   pages a hairline edges each card, where the homepage has a stone band. */
.reads .work-card { border: 1px solid color-mix(in srgb, var(--clr-text) 12%, transparent); }
.reads .work-card__body { flex: 1; }
@media (max-width: 700px) {
  .reads__head { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .reads__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- Article template (shared by all insight pages) ---------- */
.article-head { max-width: var(--container-md); margin-inline: auto; text-align: center;
  padding: calc(76px + var(--pad) * .35) var(--gutter) 0; }
.article-head .crumbs { display: block; width: fit-content; margin-inline: auto 0;
  font-size: var(--fs-body-xs); color: var(--clr-muted-text); letter-spacing: .05em;
  margin-bottom: 2.2rem; transition: opacity var(--t-fast); }
.article-head .crumbs:hover { opacity: .6; }
.article-head h1 { font-size: var(--fs-l); font-weight: var(--fw-display); line-height: 1.15; }
.article-head .meta { display: flex; justify-content: center; gap: 1.6rem; margin-top: 1.6rem;
  font-size: var(--fs-body-xs); color: var(--clr-muted-text); }
.article-hero { max-width: var(--container-lg); margin: calc(var(--pad) * .35) auto 0;
  padding-inline: var(--gutter); }
/* The hero is the article's own card cover from the insights index
   (tools/sync_article_covers.py): same colour and drawing, no category pill
   (the index card carries the topic). A 21:9 band on a wide screen, the card's 16:9
   on a phone; the drawing is sized by width, so it keeps its proportions. */
.article-hero .work-card__cover { aspect-ratio: 21/9; border-radius: 1.25rem; }
.article-hero .work-card__cover--cream { border: 1px solid color-mix(in srgb, var(--clr-text) 12%, transparent); }
.article-hero .work-card__cover svg { width: 50%; }
@media (max-width: 700px) {
  .article-hero .work-card__cover { aspect-ratio: 16/9; }
  .article-hero .work-card__cover svg { width: 74%; }
}
.article-body { max-width: 44rem; margin-inline: auto;
  padding: calc(var(--pad) * .4) var(--gutter) calc(var(--pad) * .5);
  font-size: var(--fs-body); line-height: 1.75; }
.article-body p + p { margin-top: 1.15rem; }
.article-body h2 { font-size: var(--fs-s); font-weight: var(--fw-display); line-height: 1.25;
  margin: 2.8rem 0 1.1rem; }
.article-body ul { margin: 1.15rem 0; list-style: none; }
.article-body ol { margin: 1.15rem 0; padding-inline-start: 1.4rem; }
.article-body ol li { margin-bottom: .8rem; line-height: 1.5; padding-inline-start: .3rem; }
.article-body blockquote { margin: 2.2rem 0; padding-inline-start: 1.6rem;
  border-inline-start: 3px solid var(--clr-primary);
  font-size: var(--fs-xs); font-weight: var(--fw-display); line-height: 1.45; }

/* ---------- Service pages (one template, tools/build_service_pages.py) ----------
   Hero: area number, h1, one line on why (.svc-hero__text), then .svc-flow:
   the service being done (.svc-scene, one <g data-beat> per step) over a row
   of the step labels. .svc-flow ships composed (data-state="static": no JS,
   reduced motion); service-flow.js clears it and marks each beat and step
   .is-on in turn. Inside a beat: .sk-fade settles in, .sk-draw (pathLength=1)
   draws, .sk-move slides from --from to its place, .sk-accent fades in last;
   --d delays a part within its beat. Only opacity, transforms and dash offsets
   change, so nothing reflows. */
.svc-hero { max-width: var(--container-xl); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: var(--gutter); align-items: center;
  padding: calc(76px + var(--pad) * .45) var(--gutter) calc(var(--pad) * .55); }
.svc-hero .back { grid-column: 1 / -1; display: block; width: fit-content; margin-inline-start: 0; text-align: start;
  font-size: var(--fs-body-xs); color: var(--clr-muted-text); letter-spacing: .05em;
  margin-bottom: 2.4rem; transition: opacity var(--t-fast); }
.svc-hero .back:hover { opacity: .6; }
.svc-hero__n { font-size: 1.5rem; font-weight: 600; color: var(--clr-primary); line-height: 1; }
.svc-hero h1 { margin-top: 1rem; font-size: var(--fs-xl); font-weight: var(--fw-display); line-height: 1.05; letter-spacing: -.03em; }
.svc-hero__why { max-width: 30rem; margin-top: 1.4rem; font-size: var(--fs-body-lg); line-height: 1.6; color: var(--clr-muted-text); text-wrap: balance; }

.svc-flow { --node: .75rem; margin: 0; }
.svc-scene { aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--clr-beige); overflow: hidden; }
.svc-scene svg { display: block; width: 100%; height: 100%; }
.sk-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.svc-flow:not([data-state="static"]) [data-beat]:not(.is-on) .sk-fade { opacity: 0; transform: translateY(8px); }
.svc-flow:not([data-state="static"]) [data-beat]:not(.is-on) .sk-draw { stroke-dashoffset: 1; }
.svc-flow:not([data-state="static"]) [data-beat]:not(.is-on) .sk-move { transform: translateY(var(--from, 0)); }
.svc-flow:not([data-state="static"]) [data-beat]:not(.is-on) .sk-accent { opacity: 0; }
.sk-grow { transform-box: fill-box; transform-origin: bottom; }
.svc-flow:not([data-state="static"]) [data-beat]:not(.is-on) .sk-grow { transform: scaleY(0); }

.svc-flow__steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; list-style: none; margin-top: 1.4rem; }
.svc-flow__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
/* the hairline from the previous step (to the right in rtl) to this one */
.svc-flow__step + .svc-flow__step::before,
.svc-flow__step + .svc-flow__step::after { content: ""; position: absolute; z-index: 0;
  top: calc(var(--node) / 2 - .5px); inset-inline-start: -50%; width: 100%; height: 1px; }
.svc-flow__step + .svc-flow__step::before { background: color-mix(in srgb, var(--clr-muted) 45%, transparent); }
.svc-flow__step + .svc-flow__step::after { background: var(--clr-ink); transform: scaleX(0); transform-origin: right; }
.svc-flow__node { position: relative; z-index: 1; width: var(--node); height: var(--node); border-radius: 50%;
  border: 1px solid var(--clr-muted); background: var(--clr-surface); }
.svc-flow__label { max-width: 9rem; text-align: center; font-size: var(--fs-body-sm); line-height: 1.35; color: var(--clr-muted-text); text-wrap: balance; }
.svc-flow__step.is-on::after, .svc-flow[data-state="static"] .svc-flow__step::after { transform: none; }
.svc-flow__step.is-on .svc-flow__node, .svc-flow[data-state="static"] .svc-flow__node {
  background: var(--clr-dark); border-color: var(--clr-dark); }
.svc-flow__step.is-on:last-child .svc-flow__node, .svc-flow[data-state="static"] .svc-flow__step:last-child .svc-flow__node {
  background: var(--clr-primary); border-color: var(--clr-primary); }
.svc-flow__step.is-on .svc-flow__label, .svc-flow[data-state="static"] .svc-flow__label { color: var(--clr-ink); }
@media (prefers-reduced-motion: no-preference) {
  .svc-flow:is([data-state="playing"], [data-state="paused"], [data-state="done"]) .sk-fade { transition: opacity .7s ease var(--d, 0s), transform .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
  .svc-flow:is([data-state="playing"], [data-state="paused"], [data-state="done"]) .sk-draw { transition: stroke-dashoffset .8s cubic-bezier(.65, 0, .35, 1) var(--d, 0s); }
  .svc-flow:is([data-state="playing"], [data-state="paused"], [data-state="done"]) .sk-move { transition: transform .9s cubic-bezier(.65, 0, .35, 1) var(--md, 1s); }
  .svc-flow:is([data-state="playing"], [data-state="paused"], [data-state="done"]) .sk-accent { transition: opacity .5s ease var(--d, 0s); }
  .svc-flow:is([data-state="playing"], [data-state="paused"], [data-state="done"]) .sk-grow { transition: transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
  .svc-flow:is([data-state="playing"], [data-state="paused"], [data-state="done"]) .svc-flow__step::after { transition: transform .6s cubic-bezier(.65, 0, .35, 1); }
  .svc-flow:is([data-state="playing"], [data-state="paused"], [data-state="done"]) .svc-flow__node,
  .svc-flow:is([data-state="playing"], [data-state="paused"], [data-state="done"]) .svc-flow__label { transition: background-color .4s ease, border-color .4s ease, color .4s ease; }
  .svc-flow:is([data-state="playing"], [data-state="paused"], [data-state="done"]) .svc-flow__step + .svc-flow__step .svc-flow__node,
  .svc-flow:is([data-state="playing"], [data-state="paused"], [data-state="done"]) .svc-flow__step + .svc-flow__step .svc-flow__label { transition-delay: .45s; }
}
@media (width <= 980px) {
  .svc-hero { grid-template-columns: 1fr; text-align: center; }
  .svc-hero__why { margin-inline: auto; }
  .svc-flow { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
}

/* Below the hero (Nisso 2026-10-12: deeper pages, a way on to the other
   services; r1, Nisso approved 2026-10-15, prototype in prototypes/service-pages/:
   no ruled lines): when it is needed, value, how it works, FAQ, other services,
   reads, CTA, on alternating stone and cream bands. Every card takes the other
   surface (--card-bg, set on .band), with no border. No motion below the hero. */
.svc-when, .svc-value, .svc-how, .svc-faq, .svc-more {
  padding-block: calc(var(--pad) * .7); padding-inline: max(var(--gutter), (100% - var(--container-xl)) / 2); }
:is(.svc-when, .svc-value, .svc-how, .svc-faq, .svc-more) h2 {
  font-size: var(--fs-l); font-weight: var(--fw-display); line-height: 1.1; margin-bottom: clamp(2rem, 4vw, 3.5rem);
  text-wrap: balance; }
/* When it is needed (Nisso 2026-10-14): heading beside the text, as the
   homepage statement; stacked at <=980px. */
.svc-when, .svc-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  column-gap: var(--gutter); align-items: start; }
.svc-when > *, .svc-faq > * { max-width: none; margin-inline: 0; }
.svc-when h2, .svc-faq h2 { margin-bottom: 0; }
@media (width <= 980px) {
  .svc-when, .svc-faq { grid-template-columns: 1fr; }
  .svc-when h2, .svc-faq h2 { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
}
.svc-when__text { max-width: 40rem; display: grid; gap: 1.1rem; }
.svc-when__text p { font-size: var(--fs-body-lg); line-height: 1.65; text-wrap: pretty; }
/* What the business gets: cards, a terracotta dot on each. */
.svc-value__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); list-style: none; }
.svc-value__item { padding: clamp(1.6rem, 2.4vw, 2.2rem); background: var(--card-bg); border-radius: var(--radius); }
.svc-value__item h3 { display: flex; align-items: baseline; gap: .75rem; font-size: var(--fs-body-lg); font-weight: 500; line-height: 1.3; }
.svc-value__item h3::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--clr-primary); transform: translateY(-.15em); }
.svc-value__item p { margin-top: .7rem; font-size: var(--fs-body); line-height: 1.6; }
@media (width <= 980px) { .svc-value__list { grid-template-columns: repeat(2, 1fr); } }
@media (width <= 640px) { .svc-value__list { grid-template-columns: 1fr; } }
/* How it works: the hero's steps on the shared step line (.jw, as the
   homepage's how-we-work), static in its final frame. */
.svc-how h2 { max-width: 28ch; margin-inline: auto; text-align: center; }
@media (width <= 640px) { .svc-how h2 { margin-inline: 0; text-align: start; } }
/* FAQ: each question its own card, native <details>, so it opens and closes without JS. */
.svc-faq__list { display: grid; gap: .75rem; max-width: 46rem; }
.svc-faq__item { background: var(--card-bg); border-radius: var(--radius); padding-inline: clamp(1.25rem, 2.4vw, 2rem); }
.svc-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.25rem; cursor: pointer; list-style: none; font-size: var(--fs-body-lg); font-weight: 500; line-height: 1.4; }
.svc-faq__item summary::-webkit-details-marker { display: none; }
.svc-faq__item summary:focus-visible { outline: 3px solid var(--clr-accent-text); outline-offset: 6px; border-radius: calc(var(--radius) * .5); }
.svc-faq__icon { position: relative; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--band-bg); }
.svc-faq__icon::before, .svc-faq__icon::after { content: ""; position: absolute; inset: 50% auto auto 50%;
  width: .8rem; height: 1.5px; margin: -.75px 0 0 -.4rem; background: currentColor; }
.svc-faq__icon::after { transform: rotate(90deg); }
.svc-faq__item[open] .svc-faq__icon::after { transform: none; }
.svc-faq__item p { max-width: 46rem; padding-block-end: 1.6rem; font-size: var(--fs-body); line-height: 1.65; color: var(--clr-muted-text); }
@media (prefers-reduced-motion: no-preference) { .svc-faq__icon::after { transition: transform .25s ease; } }
/* Other services: the hub's own .service-area cards (charcoal on hover and
   focus), five in a row on a wide screen, with room between them, no hairlines.
   The card rules are shared with the hub's grid (r1 there too, 2026-10-15). */
.svc-more__head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; }
.svc-more__all { font-size: var(--fs-body-sm); text-decoration: underline; text-underline-offset: .2em; }
:is(.service-areas__grid, .svc-more__grid) { display: grid; gap: clamp(.75rem, 1.2vw, 1rem); }
.svc-more__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.service-areas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:is(.service-areas__grid, .svc-more__grid) > .service-area { border-radius: var(--radius); background: var(--card-bg); }
.svc-more__grid > .service-area { padding: clamp(1.4rem, 2vw, 2rem); }
.svc-more__grid > .service-area h3 { margin-top: 1.4rem; font-size: var(--fs-xs); }
.svc-more__grid > .service-area .service-area__desc { font-size: var(--fs-body-sm); }
:is(.service-areas__grid, .svc-more__grid) > .service-area .service-area__go { border-color: transparent; background: var(--band-bg); }
.svc-more__grid > .service-area .service-area__go { inset-block-start: clamp(1rem, 1.6vw, 1.6rem); inset-inline-end: clamp(1rem, 1.6vw, 1.6rem); }
@media (hover: hover) {
  :is(.service-areas__grid, .svc-more__grid) > .service-area:hover,
  :is(.service-areas__grid, .svc-more__grid) > .service-area:hover .service-area__go { background: var(--clr-dark); border-color: transparent; }
}
:is(.service-areas__grid, .svc-more__grid) > .service-area:focus-visible,
:is(.service-areas__grid, .svc-more__grid) > .service-area:focus-visible .service-area__go { background: var(--clr-dark); border-color: transparent; }
@media (width <= 1180px) {
  :is(.service-areas__grid, .svc-more__grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-more__grid > .service-area:last-child { grid-column: 1 / -1; }
}
@media (width <= 620px) {
  :is(.service-areas__grid, .svc-more__grid) { grid-template-columns: 1fr; gap: .5rem; }
  .svc-more__grid > .service-area { padding: 1.2rem 1.25rem; }
  .svc-more__grid > .service-area h3 { margin-top: .5rem; }
  .svc-more__grid > .service-area .service-area__desc { display: none; }
  .svc-more__grid > .service-area .service-area__go { inset-block-start: 50%; translate: 0 -50%; }
}
.svc-more + .reads { padding-top: calc(var(--pad) * .7); }
@media (width <= 640px) {
  .svc-flow__label { font-size: var(--fs-body-xs); }
  .svc-scene { border-radius: calc(var(--radius) * .75); }
}

/* ---------- Ghost pill (the 404 page's way home) ---------- */
.pill--ghost { background: none; border: 1px solid var(--clr-muted); color: var(--clr-text); }
.pill--ghost:hover { border-color: var(--clr-text); }

/* ---------- Services hub: the six areas in depth (2026-10-12) ----------
   The homepage names the areas; this page says what each one delivers, when it
   fits, a client example and, where one exists, its article. Three columns on a
   wide screen, two on a tablet, one on a phone. */
/* U10 (usability audit 2026-10-13): the first screen was the headline alone,
   the first card 1111px down on a 900px desktop. The hero now takes its
   content's height and the areas' intro sits close under it, so the first
   row of cards starts inside the first screen. */
.services-hero {
  display: flex; align-items: flex-end;
  padding: calc(76px + clamp(2.5rem, 4.5vw, 4.5rem)) max(var(--gutter), (100% - var(--container-xl)) / 2) clamp(2.25rem, 3.5vw, 3.5rem);
}
.services-hero__inner { width: 100%; }
.services-hero h1 {
  max-width: 18ch; font-size: clamp(3.4rem, 5.4vw, 5.75rem); font-weight: var(--fw-display);
  line-height: .98; letter-spacing: -.045em;
}
.services-hero h1 span { color: var(--clr-accent-text); }
.services-hero__lead {
  max-width: 40rem; margin-top: clamp(1.25rem, 2.5vw, 2rem);
  font-size: var(--fs-body-lg); line-height: 1.65; color: var(--clr-muted-text);
}

.service-areas { padding-inline: max(var(--gutter), (100% - var(--container-xl)) / 2); padding-top: clamp(2.25rem, 3.5vw, 3.5rem); }
.service-areas__intro {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--gutter); align-items: end;
  margin-bottom: clamp(1.75rem, 3vw, 3rem);
}
.service-areas__intro h2 { max-width: 14ch; font-size: var(--fs-l); line-height: 1.05; }
.service-areas__intro > p:last-child { max-width: 34rem; font-size: var(--fs-body-lg); line-height: 1.65; }
/* The six cards: three across, with room between them and no hairlines (r1,
   Nisso 2026-10-15: „כרטיסים עם רווח כמו ב„שירותים נוספים””); the grid and
   card rules are the ones shared with .svc-more above. */
/* Each card is one link to its area's page (Nisso 2026-10-12): all six cream,
   charcoal with cream text on hover (pointer devices only, so a tap does not
   leave it stuck) and on keyboard focus. The number stays deep terracotta on
   cream and takes the lifted terracotta on charcoal (5.66:1). */
.service-area {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.6rem, 3.4vw, 3.2rem);
  background: var(--clr-surface); color: var(--clr-ink);
}
.service-area__n { font-size: var(--fs-body-xs); font-weight: 600; color: var(--clr-accent-text); }
.service-area h3 { margin: .9rem 0 .4rem; font-size: var(--fs-s); font-weight: 500; line-height: 1.2; }
.service-area__desc { margin-top: .2rem; max-width: 34rem; font-size: var(--fs-body); line-height: 1.6; }
.service-area__go {
  position: absolute; inset-block-start: clamp(1.6rem, 3.4vw, 3.2rem); inset-inline-end: clamp(1.6rem, 3.4vw, 3.2rem);
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--clr-muted); font-size: 1rem; line-height: 1;
}
.service-area:focus-visible { outline: 3px solid var(--clr-accent-on-dark); outline-offset: -7px; }
.service-area:focus-visible,
.service-area:focus-visible .service-area__go { background: var(--clr-dark); color: var(--clr-on-dark); border-color: var(--clr-on-dark-muted); }
.service-area:focus-visible .service-area__n { color: var(--clr-accent-on-dark); }
@media (hover: hover) {
  .service-area:hover,
  .service-area:hover .service-area__go { background: var(--clr-dark); color: var(--clr-on-dark); border-color: var(--clr-on-dark-muted); }
  .service-area:hover .service-area__n { color: var(--clr-accent-on-dark); }
}
@media (prefers-reduced-motion: no-preference) {
  .service-area, .service-area__go, .service-area__n {
    transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo),
      background-color .25s ease, color .25s ease, border-color .25s ease;
  }
}

@media (width <= 980px) {
  .service-areas__intro { grid-template-columns: 1fr; }
}
@media (width <= 620px) {
  .services-hero { padding-block-end: 2rem; }
  .services-hero h1 { font-size: clamp(3.15rem, 13.5vw, 4rem); }
  .services-hero__lead { margin-top: 1.5rem; }
}

/* ---------- Homepage below the hero: editorial rhythm (2026-10-11) ----------
   Each section is a band on its own surface from the palette: cream hero,
   stone statement, cream services, the one charcoal band (how we work), stone
   insights, cream need selector, then the stone footer. One heading, one short
   line and one compact visual per section. */
.band { --band-bg: var(--clr-bg); --card-bg: var(--clr-beige); background: var(--band-bg); }
.band--stone { --band-bg: var(--clr-beige); --card-bg: var(--clr-surface); }
.band--ink { background: var(--clr-dark); color: var(--clr-on-dark); }
:where(.band) > * { max-width: var(--container-xl); margin-inline: auto; }
.systems__list { list-style: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* 2 · Statement (Nisso approved r1, 2026-10-14): the heading and its one
   line, then a drawing of a sketch that becomes a working system. Copy and
   drawing side by side above 1180px (narrower, the chip labels would shrink
   below 13px), the copy at the start (the right in rtl), stacked below; the
   wide drawing down to 641px, the tall one on a phone. */
.statement {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
  padding-inline: max(var(--gutter), (100% - var(--container-xl)) / 2);
}
.statement > * { margin-inline: 0; }
.statement__title { font-size: min(var(--fs-l), 3.5rem); text-wrap: balance; }
.statement__lead {
  max-width: 34rem; margin-top: 1.6rem;
  font-size: var(--fs-body-lg); line-height: 1.6;
}
@media (width > 1180px) {
  .statement { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 7rem); }
}

/* A link inside running text is underlined, so it reads as a link */
.statement__lead a, .acc__lead a, .article-body a:not(.pill) { text-decoration: underline; text-underline-offset: .2em; }

/* The drawing ships in its final frame. statement.js sets data-state="ready"
   (every animation frozen at its first frame), then "playing" when the figure
   is on screen, then "done" (no animations: the final frame again). Three
   acts, all within 4.6s: hairlines sketch the screen (0-1.4s); it is built,
   fills settle, lines turn ink, bars grow, the number counts (1.7-2.9s); the
   six systems are wired in and a terracotta pulse runs into the screen
   (2.9-4.6s). Only opacity, transforms, strokes and dash offsets change. */
.st-scene { margin: 0; width: 100%; max-width: 44rem; }
.st-canvas { position: relative; width: 100%; }
.st-canvas--wide { --st-vw: 640; --st-vh: 440; }
.st-canvas--tall { --st-vw: 320; --st-vh: 524; display: none; max-width: 24rem; margin-inline: auto; }
.st-svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (width <= 640px) {
  .st-canvas--wide { display: none; }
  .st-canvas--tall { display: block; }
}

/* Final frame */
.st-svg text, .st-html-label, .st-status-pill { font-family: var(--ff-body); }
.st-html-label, .st-status-pill {
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: var(--width);
  height: var(--height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-ink);
  line-height: 1;
  white-space: nowrap;
  unicode-bidi: isolate;
}
.st-paper { fill: var(--clr-surface); }
.st-dark { fill: var(--clr-dark); }
.st-stone { fill: var(--clr-beige); }
.st-line, .st-draw, .st-wire, .st-pulse { fill: none; stroke-dasharray: 1; stroke-linecap: round; stroke-linejoin: round; }
.st-line { stroke: var(--clr-ink); stroke-width: 1; }
.st-text { stroke-width: 6; stroke-opacity: .45; }
.st-on-dark-bar { fill: none; stroke: var(--clr-on-dark); stroke-width: 6; stroke-linecap: round; stroke-opacity: .6; }
.st-meter { fill: none; stroke: var(--clr-ink); stroke-width: 10; stroke-linecap: round; stroke-opacity: .75; }
.st-ink-line { stroke: var(--clr-ink); stroke-width: 1.5; }
.st-num { fill: var(--clr-on-dark); font-size: 30px; font-weight: 300; text-anchor: end; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.st-bars rect { fill: var(--clr-ink); fill-opacity: .14; }
.st-bars rect:last-child { fill-opacity: .8; }
.st-grow { transform-box: fill-box; transform-origin: bottom; }
.st-wire { stroke: var(--clr-ink); stroke-width: 1; }
.st-pulse { stroke: var(--clr-primary); stroke-width: 2.5; stroke-dasharray: .22 1.3; opacity: 0; }
.st-chip rect { fill: var(--clr-surface); stroke: var(--clr-ink); stroke-width: 1; }
.st-canvas--wide .st-html-label { font-size: 17px; font-weight: 500; }
.st-canvas--tall .st-html-label { font-size: 15px; font-weight: 500; }
.st-accent { fill: var(--clr-primary); }
.st-status-pill {
  justify-content: center;
  padding-inline-start: 1.4em;
  padding-inline-end: .25em;
  font-size: 14px;
  font-weight: 500;
}
.st-status-pill::before {
  content: "";
  position: absolute;
  inset-inline-start: .55em;
  top: 50%;
  width: .55em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--clr-primary);
  transform: translateY(-50%);
}

/* The play: the same animations, frozen at their start while "ready" */
@media (prefers-reduced-motion: no-preference) {
  .st-scene:is([data-state="ready"], [data-state="playing"]) .st-line {
    animation: st-draw .8s cubic-bezier(.65, 0, .35, 1) var(--d, 0s) both, st-ink .6s ease var(--b, 1.6s) both; }
  .st-scene:is([data-state="ready"], [data-state="playing"]) .st-text {
    animation: st-draw .6s cubic-bezier(.65, 0, .35, 1) var(--d, 0s) both, st-thicken .6s ease var(--b, 1.75s) both; }
  .st-scene:is([data-state="ready"], [data-state="playing"]) :is(.st-draw, .st-wire) {
    animation: st-draw .7s cubic-bezier(.65, 0, .35, 1) var(--d, 0s) both; }
  .st-scene:is([data-state="ready"], [data-state="playing"]) .st-fill {
    animation: st-fade .6s ease var(--b, 1.7s) both; }
  .st-scene:is([data-state="ready"], [data-state="playing"]) .st-num {
    animation: st-fade .4s ease 1.85s both; }
  .st-scene:is([data-state="ready"], [data-state="playing"]) .st-grow {
    animation: st-grow .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
  .st-scene:is([data-state="ready"], [data-state="playing"]) .st-rise {
    animation: st-rise .5s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
  .st-scene:is([data-state="ready"], [data-state="playing"]) .st-pulse {
    animation: st-pulse .7s ease-in var(--d, 0s) both; }
  .st-scene:is([data-state="ready"], [data-state="playing"]) .st-pop {
    animation: st-fade .4s ease var(--d, 0s) both; }
  .st-scene[data-state="ready"] * { animation-play-state: paused !important; }
}
@keyframes st-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes st-ink { from { stroke: var(--clr-muted); } }
@keyframes st-thicken { from { stroke: var(--clr-muted); stroke-width: 1px; stroke-opacity: 1; } }
@keyframes st-fade { from { opacity: 0; } }
@keyframes st-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes st-grow { from { transform: scaleY(0); } }
@keyframes st-pulse {
  0% { stroke-dashoffset: .22; opacity: 1; }
  85% { opacity: 1; }
  100% { stroke-dashoffset: -1.05; opacity: 0; }
}

/* 3 · Services: a heading row and six compact editorial entries */
.systems__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem 3rem;
  margin-bottom: clamp(2.2rem, 4vw, 4rem);
}
.systems__head h2 { font-size: var(--fs-l); }
.systems__list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid color-mix(in srgb, var(--clr-text) 20%, transparent);
}
.systems__item {
  min-width: 0; display: flex;
  border-block-end: 1px solid color-mix(in srgb, var(--clr-text) 13%, transparent);
}
/* Each entry is one link to its area's page (U02), the whole cell: cream, and
   on hover (pointer devices only) or keyboard focus the charcoal of the hub's
   .service-area cards, the number in the lifted terracotta. */
.systems__link {
  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 1rem;
  padding: clamp(1.45rem, 2.5vw, 2.2rem) clamp(1rem, 2.2vw, 2rem);
}
.systems__go {
  margin-inline-start: auto; align-self: center; flex: none;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--clr-muted); font-size: 1rem; line-height: 1;
}
.systems__link:focus-visible { outline: 3px solid var(--clr-accent-on-dark); outline-offset: -7px; }
.systems__link:focus-visible, .systems__link:focus-visible .systems__go { background: var(--clr-dark); color: var(--clr-on-dark); border-color: var(--clr-on-dark-muted); }
.systems__link:focus-visible .systems__n { color: var(--clr-accent-on-dark); }
@media (hover: hover) {
  .systems__link:hover, .systems__link:hover .systems__go { background: var(--clr-dark); color: var(--clr-on-dark); border-color: var(--clr-on-dark-muted); }
  .systems__link:hover .systems__n { color: var(--clr-accent-on-dark); }
}
@media (prefers-reduced-motion: no-preference) {
  .systems__link, .systems__go, .systems__n { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
}
.systems__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.systems__item:nth-child(n + 4) { border-block-end: 0; }
.systems__item:not(:nth-child(3n + 1)) { border-inline-start: 1px solid color-mix(in srgb, var(--clr-text) 13%, transparent); }
.systems__n {
  flex: none; font-size: var(--fs-body-xs); font-weight: 600; line-height: 1; color: var(--clr-accent-text);
}
.systems__item h3 { min-width: 0; font-size: var(--fs-xs); font-weight: 500; line-height: 1.25; }

/* 4 · How we work (approved r2, Nisso 2026-10-15): four steps and the dot
   that walks with you. Each step is a centred unit: its node centred over its
   column, its number, h3 and line centred under it, so the hairline runs
   through four centred dots. Four equal columns above 980px; 2x2 from 641px,
   one hairline per row (01-02, 03-04); one column at <=640px, the hairline
   vertical at the start (right) edge. Columns have no gap and symmetric
   padding, so a node centre is always the column's centre and each step's
   stretch of hairline (from its centre, one column wide) ends exactly in the
   next node's centre, with no measuring.

   The drawing ships in its final frame (data-state="static"): every node lit,
   every stretch terracotta, the dot resting in node 04, every number in
   --clr-accent-on-dark. js/journey.js sets "ready" (unlit), then "playing"
   (the dot walks 01 -> 04, each step lighting as it arrives), then "done", the
   final frame with nothing running. The text is never hidden; only the
   nodes, the stretches, the dot and the numbers' colour change. Terracotta is
   decoration only; the numbers are 1.5rem (large text) in the lifted
   --clr-accent-on-dark.

   The one step line of the site (Nisso 2026-10-15: the service pages' line
   looked unfinished beside this one): the six service pages' „איך זה עובד”
   and the business brain's „מתחילים משאלה אחת” use the same markup with
   .jw--light, which changes only the colours a cream or stone band needs
   (the node's fill is the band, numbers in --clr-accent-text, the line under
   the text in --clr-muted-text). They carry no data-jw, so journey.js leaves
   them in the final frame: the walk plays on the homepage only. */
.journey__title {
  max-width: 22ch; margin-inline: auto; margin-bottom: clamp(2.5rem, 5vw, 5rem);
  font-size: var(--fs-l); text-wrap: balance; text-align: center;
}

.jw { position: relative; --node: 1.625rem; --c: calc(var(--node) / 2); --dot: .875rem; --line: 1px;
  --jw-surface: var(--clr-dark); --jw-rest: var(--clr-on-dark); --jw-n: var(--clr-accent-on-dark);
  --jw-muted: var(--clr-on-dark-muted); }
.jw--light { --jw-surface: var(--band-bg, var(--clr-bg)); --jw-rest: var(--clr-ink);
  --jw-n: var(--clr-accent-text); --jw-muted: var(--clr-muted-text); }
.jw-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.jw-step { position: relative; padding-inline: clamp(.75rem, 1.5vw, 1.75rem); text-align: center; }

/* the stretch of hairline from this node's centre to the next one's */
.jw-step:not(:last-child)::before,
.jw-step:not(:last-child)::after {
  content: ""; position: absolute; top: calc(var(--c) - var(--line) / 2); inset-inline-start: 50%;
  width: 100%; height: var(--line);
}
.jw-step:not(:last-child)::before { background: color-mix(in srgb, var(--jw-rest) 25%, transparent); }
.jw-step:not(:last-child)::after { background: var(--clr-primary); transform-origin: right center; }

.jw-node {
  position: relative; z-index: 1; display: block;
  width: var(--node); height: var(--node); margin: 0 auto 1.5rem; border-radius: 50%;
  background: var(--jw-surface); border: 1px solid var(--clr-primary);
}
.jw-node::before, .jw-node::after {
  content: ""; position: absolute; inset: 0; margin: auto; border-radius: 50%; background: var(--clr-primary);
}
.jw-node::before { width: .375rem; height: .375rem; }   /* the lit core */
.jw-node::after { width: var(--dot); height: var(--dot); opacity: 0; } /* the resting dot */
.jw-step:last-child .jw-node::after { opacity: 1; }

.jw-n {
  display: block; margin-bottom: .6rem;
  font-size: 1.5rem; font-weight: 300; line-height: 1; color: var(--jw-n);
}
.jw-step h3 { font-size: var(--fs-xs); font-weight: 500; line-height: 1.25; margin-bottom: .6rem; text-wrap: balance; }
.jw-step p { max-width: 17rem; margin-inline: auto; font-size: var(--fs-body); line-height: 1.5; color: var(--jw-muted); text-wrap: pretty; }

/* the walking dot: only drawn while playing; journey.js moves it */
.jw-dot {
  position: absolute; z-index: 2; top: 0; left: 0; display: none;
  width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--clr-primary);
  pointer-events: none;
}

/* tablet: 2x2, one hairline per row (01-02, 03-04) */
@media (641px <= width <= 980px) {
  .jw-steps { grid-template-columns: repeat(2, 1fr); row-gap: 3rem; }
  .jw-step { padding-inline: clamp(1rem, 3vw, 2rem); }
  .jw-step:nth-child(2n)::before, .jw-step:nth-child(2n)::after { content: none; }
  .jw-step p { max-width: 20rem; }
}

/* phone: one column, the hairline vertical through the node centres */
@media (width <= 640px) {
  .jw-steps { grid-template-columns: 1fr; }
  .jw-step {
    display: grid; grid-template-columns: var(--node) 1fr; column-gap: 1.1rem; align-items: start;
    padding: 0 0 2rem; text-align: start;
  }
  .jw-step:last-child { padding-bottom: 0; }
  .jw-step:not(:last-child)::before,
  .jw-step:not(:last-child)::after {
    top: var(--c); inset-inline-start: calc(var(--c) - var(--line) / 2);
    width: var(--line); height: 100%; transform-origin: center top;
  }
  .jw-node { grid-row: 1 / span 3; margin: 0; }
  .jw-n { grid-column: 2; line-height: var(--node); margin-bottom: .35rem; }
  .jw-step h3, .jw-step p { grid-column: 2; }
  .jw-step p { max-width: 34rem; margin-inline: 0; }
}

/* ready / playing: start unlit */
.jw:is([data-state="ready"], [data-state="playing"]) .jw-node { border-color: color-mix(in srgb, var(--jw-rest) 35%, transparent); }
.jw:is([data-state="ready"], [data-state="playing"]) .jw-node::before { transform: scale(0); }
.jw:is([data-state="ready"], [data-state="playing"]) .jw-node::after { opacity: 0; }
.jw:is([data-state="ready"], [data-state="playing"]) .jw-n { color: var(--jw-muted); }
.jw:is([data-state="ready"], [data-state="playing"]) .jw-step::after { transform: scaleX(0); }
@media (width <= 640px) {
  .jw:is([data-state="ready"], [data-state="playing"]) .jw-step::after { transform: scaleY(0); }
}

/* playing: each step lights at its --lit, each stretch fills from its --go */
.jw[data-state="playing"] .jw-dot { display: block; }
.jw[data-state="playing"] .jw-node { animation: jw-ring .35s var(--lit) ease-out both; }
.jw[data-state="playing"] .jw-node::before { animation: jw-core .35s var(--lit) cubic-bezier(.34, 1.56, .64, 1) both; }
.jw[data-state="playing"] .jw-n { animation: jw-n .35s var(--lit) ease-out both; }
.jw[data-state="playing"] .jw-step::after { animation: jw-x var(--walk) var(--go) cubic-bezier(.65, 0, .35, 1) both; }
@media (width <= 640px) {
  .jw[data-state="playing"] .jw-step::after { animation-name: jw-y; }
}
@keyframes jw-ring { from { border-color: color-mix(in srgb, var(--jw-rest) 35%, transparent); } to { border-color: var(--clr-primary); } }
@keyframes jw-core { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes jw-n { from { color: var(--jw-muted); } to { color: var(--jw-n); } }
@keyframes jw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes jw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* 5 · Insights: the three articles, one featured, each on a full-colour cover */
.work__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem;
  margin-bottom: clamp(2.2rem, 4vw, 4rem);
}
.work__title { font-size: var(--fs-xl); }
.work__all { flex: none; }
.work__grid { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: auto auto; gap: 1.5rem; }
/* The arrow sits at one fixed spot in every card, the bottom inline-end corner
   (Nisso 2026-10-15), whatever the title or excerpt; the body reserves that
   corner so no text runs under it. */
.work-card {
  --wc-pad-b: 1.7rem; --wc-pad-i: 1.7rem; --wc-go: 2.75rem;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--clr-surface); border-radius: 1.25rem;
}
.work-card--feature { grid-row: span 2; }
.work-card__cover { position: relative; display: grid; place-items: center; aspect-ratio: 16/9; overflow: hidden; }
.work-card--feature .work-card__cover { aspect-ratio: auto; flex: 1; min-height: 24rem; }
.work-card__cover--ink { background: var(--clr-dark); }
.work-card__cover--terra { background: var(--clr-primary); }
.work-card__cover--cream { background: var(--clr-surface); border-bottom: 1px solid color-mix(in srgb, var(--clr-text) 12%, transparent); }
.work-card__cover svg { width: 74%; height: auto; transition: transform .6s var(--ease-out-expo); }
.work-card--feature .work-card__cover svg { width: 86%; }
.work-card:hover .work-card__cover svg { transform: scale(1.04); }
.work-card__cat {
  position: absolute; top: 1.1rem; inset-inline-start: 1.1rem;
  background: var(--clr-surface); color: var(--clr-text); border-radius: var(--radius-full);
  padding: .35rem .85rem; font-size: var(--fs-body-xs); font-weight: 600;
}
.work-card__cover--cream .work-card__cat { background: var(--clr-beige); }
.work-card__body {
  min-height: calc(1.5rem + var(--wc-go) + var(--wc-pad-b));
  padding: 1.5rem var(--wc-pad-i) var(--wc-pad-b);
  padding-inline-end: calc(var(--wc-pad-i) + var(--wc-go) + 1.5rem);
}
.work-card h3 { font-size: var(--fs-body-lg); font-weight: 500; line-height: 1.3; }
.work-card--feature h3 { font-size: var(--fs-s); font-weight: 400; line-height: 1.2; }
.work-card__go {
  position: absolute; inset-block-end: var(--wc-pad-b); inset-inline-end: var(--wc-pad-i);
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--clr-muted); transition: background var(--t-fast), color var(--t-fast);
}
.work-card--feature .work-card__go, .work-card:hover .work-card__go { background: var(--clr-dark); color: var(--clr-on-dark); border-color: var(--clr-dark); }
.work-card:focus-visible { outline: 3px solid var(--clr-primary); outline-offset: 4px; }

/* 6 · Need selector: on a wide screen with a mouse, one centred row of chips */
.brief__title { font-size: var(--fs-xl); }
.services-grid--chips { margin: 0 auto 2.4rem; }
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .services-grid--chips {
    display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: .75rem;
  }
  .services-grid--chips button {
    width: 100%; align-items: center; gap: .6rem; padding: .85rem 1.4rem; min-height: 3.25rem;
    background: var(--clr-surface); border: 1px solid color-mix(in srgb, var(--clr-text) 16%, transparent);
    border-radius: var(--radius-full); font-size: var(--fs-body-lg);
  }
  .services-grid--chips button:hover { opacity: 1; border-color: var(--clr-text); }
  .services-grid--chips button[aria-pressed="true"] { background: var(--clr-dark); color: var(--clr-on-dark); border-color: var(--clr-dark); }
  .services-grid--chips .services-grid__plus { font-size: 1.15rem; color: var(--clr-accent-text); }
  .services-grid--chips button[aria-pressed="true"] .services-grid__plus { color: var(--clr-accent-on-dark); }
}

@media (width <= 980px) {
  .systems__list { grid-template-columns: repeat(2, 1fr); }
  .systems__item:nth-child(n) { border-block-end: 1px solid color-mix(in srgb, var(--clr-text) 13%, transparent); }
  .systems__item:nth-last-child(-n + 2) { border-block-end: 0; }
  .systems__item:nth-child(n) { border-inline-start: 0; }
  .systems__item:nth-child(even) { border-inline-start: 1px solid color-mix(in srgb, var(--clr-text) 13%, transparent); }
  .work__grid { grid-template-columns: 1fr 1fr; }
  .work-card--feature { grid-column: 1 / -1; grid-row: auto; }
  .work-card--feature .work-card__cover { min-height: 0; aspect-ratio: 16/9; }
}
@media (width <= 767px) {
  .systems__head, .work__head { flex-direction: column; align-items: flex-start; }
  .work__head > div { width: 100%; }
  .work__grid { grid-template-columns: 1fr; gap: 1rem; }
  .work-card { --wc-pad-b: 1.4rem; --wc-pad-i: 1.3rem; }
  .work-card__body { padding-block-start: 1.2rem; min-height: calc(1.2rem + var(--wc-go) + var(--wc-pad-b)); }
}
@media (width <= 640px) {
  .systems__list { grid-template-columns: 1fr; }
  .systems__item:nth-child(n) { border-inline-start: 0; border-block-end: 1px solid color-mix(in srgb, var(--clr-text) 13%, transparent); }
  .systems__item:last-child { border-block-end: 0; }
}

/* ---------- Touch targets (U11, usability audit 2026-10-13) ----------
   Small standalone links and controls get a hit area of at least 44x44px
   from a centred, invisible ::after, so neither their look nor the layout
   around them changes. Links inside running text are exempt (WCAG 2.5.8). */
.logo, .crumbs, .svc-hero .back, .svc-more__all { position: relative; }
.logo::after, .crumbs::after, .svc-hero .back::after, .svc-more__all::after,
.hero__ctl::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, 2.75rem); height: max(100%, 2.75rem);
}

/* Skip link (a11y pass 2026-10-13): the first Tab stop on every page, off screen
   until focused, then a charcoal pill above the sticky header. It moves focus
   to <main id="main" tabindex="-1">, which draws no ring of its own. */
.skip-link {
  position: fixed; inset-block-start: .6rem; inset-inline-start: .6rem; z-index: 1000;
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.2rem;
  border-radius: var(--radius-full); background: var(--clr-dark); color: var(--clr-on-dark);
  font-size: var(--fs-body-sm); font-weight: 600; text-decoration: none;
  translate: 0 calc(-100% - 1.5rem);
}
.skip-link:focus { translate: none; outline: 2px solid var(--clr-dark); outline-offset: 3px; }
main:focus { outline: none; }

/* ---------- Business brain, sections 2-4 (approved r1, Nisso 2026-10-15) ----------
   Prototype: prototypes/business-brain-capabilities/. No ruled lines below the flow.
   2 · What it does (.bb-caps): a stone band, three cream cards, each a small
   hairline drawing with one terracotta accent, a number, a heading and one or two
   sentences. The drawings ship in their final frame (data-state="static", kept
   without JS and under reduced motion); js/business-brain.js plays them once. */

.bb-caps { background: var(--clr-beige);
  padding: calc(var(--pad) * .7) max(var(--gutter), (100% - var(--container-xl)) / 2); }
.bb-caps__inner { max-width: var(--container-xl); margin-inline: auto; }
.bb-caps h2 { font-size: var(--fs-l); font-weight: var(--fw-display); line-height: 1.12;
  max-width: 22ch; margin-bottom: 3rem; text-wrap: balance; }

.bb-caps__grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem); }
.bb-cap { padding: clamp(1.6rem, 2.4vw, 2.4rem);
  background: var(--clr-surface); border-radius: var(--radius);
  display: grid; grid-template-rows: auto auto 1fr; align-content: start; }
.bb-cap__art { display: block; width: min(11rem, 100%); height: auto; overflow: visible;
  margin: 0 auto clamp(1.4rem, 2.4vw, 2.2rem); }
.bb-caps .bb-cap h3 { display: flex; align-items: baseline; gap: .7rem;
  font-size: var(--fs-xs); font-weight: 500; line-height: 1.25; margin-bottom: .8rem; }
.bb-caps .bb-cap h3 .bb-cap__n { font-size: var(--fs-body-xs); font-weight: 600;
  color: var(--clr-accent-text); font-variant-numeric: tabular-nums; }
.bb-caps .bb-cap p { font-size: var(--fs-body); line-height: 1.6; max-width: 34ch; }

/* tablet: one card per row, the drawing beside the text */
@media (width <= 980px) {
  .bb-caps__grid { grid-template-columns: 1fr; }
  .bb-caps .bb-cap { grid-template-columns: 10rem minmax(0, 1fr); grid-template-rows: auto 1fr;
    column-gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
  .bb-cap__art { grid-row: 1 / span 2; margin: .2rem 0 0; }
  .bb-caps .bb-cap p { max-width: 46ch; }
}
/* phone: the drawing back on top, smaller */
@media (width <= 640px) {
  .bb-caps h2 { margin-bottom: 2rem; }
  .bb-caps .bb-cap { grid-template-columns: 1fr; grid-template-rows: none; }
  .bb-cap__art { grid-row: auto; width: 8.5rem; margin: 0 auto 1.2rem; }
}

/* the drawing's parts */
.bb-cap__art * { vector-effect: non-scaling-stroke; }
.bb-paper { fill: var(--clr-surface); }
.bb-line { fill: none; stroke: var(--clr-muted); stroke-width: 1; }
.bb-paper.bb-line { fill: var(--clr-surface); }
.bb-ink { stroke: var(--clr-ink); stroke-width: 1.25; }
.bb-row { fill: none; stroke: var(--clr-ink); stroke-opacity: .45; stroke-width: 4; stroke-linecap: round; }
.bb-trend { fill: none; stroke: var(--clr-ink); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.bb-limit { fill: none; stroke: var(--clr-muted); stroke-width: 1; stroke-dasharray: 3 4; }
.bb-dot { fill: var(--clr-ink); }
.bb-accent { fill: var(--clr-primary); }
.bb-ring { fill: none; stroke: var(--clr-primary); stroke-width: 1; stroke-opacity: .55; }
.bb-check { fill: none; stroke: var(--clr-surface); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.bb-draw { stroke-dasharray: 1; }
.bb-pop, .bb-slide { transform-box: fill-box; transform-origin: center; }

/* one play: frozen at the first frame ('ready'), run once ('playing'), then
   the final frame with nothing running ('done'). The last part ends by 2.75s. */
@media (prefers-reduced-motion: no-preference) {
  [data-bb-caps]:is([data-state="ready"], [data-state="playing"]) .bb-draw {
    animation: bb-draw .8s cubic-bezier(.65, 0, .35, 1) calc(var(--cd, 0s) + var(--d, 0s)) both; }
  [data-bb-caps]:is([data-state="ready"], [data-state="playing"]) .bb-fade {
    animation: bb-fade .5s ease calc(var(--cd, 0s) + var(--d, 0s)) both; }
  [data-bb-caps]:is([data-state="ready"], [data-state="playing"]) .bb-pop {
    animation: bb-pop .45s cubic-bezier(.2, 1.4, .4, 1) calc(var(--cd, 0s) + var(--d, 0s)) both; }
  [data-bb-caps]:is([data-state="ready"], [data-state="playing"]) .bb-slide {
    animation: bb-slide .8s cubic-bezier(.65, 0, .35, 1) calc(var(--cd, 0s) + var(--d, 0s)) both; }
  [data-bb-caps][data-state="ready"] * { animation-play-state: paused !important; }
}
@keyframes bb-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bb-fade { from { opacity: 0; } }
@keyframes bb-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes bb-slide { from { transform: translateX(var(--fx, 0)); } }

/* ── 3 · How to start: four steps on the shared step line ────────────────
   The homepage's .jw, light variant, static in its final frame: the page
   already has one moving drawing (the capability cards). */
.bb-steps { padding: calc(var(--pad) * .7) max(var(--gutter), (100% - var(--container-xl)) / 2); }
.bb-steps h2 { font-size: var(--fs-l); font-weight: var(--fw-display); line-height: 1.12;
  max-width: 28ch; margin: 0 auto clamp(2.5rem, 4vw, 3.5rem); text-wrap: balance; text-align: center; }
@media (width <= 640px) { .bb-steps h2 { margin-inline: 0; text-align: start; } }

/* ── 4 · Honesty: two cream cards on a stone band ────────────────────────── */
.bb-truth { background: var(--clr-beige);
  padding: calc(var(--pad) * .7) max(var(--gutter), (100% - var(--container-xl)) / 2); }
.bb-truth__inner { max-width: var(--container-xl); margin-inline: auto; }
.bb-truth h2 { font-size: var(--fs-l); font-weight: var(--fw-display); line-height: 1.12;
  max-width: 22ch; margin-bottom: clamp(2rem, 3vw, 3rem); }
.bb-truth__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); }
.bb-truth__card { background: var(--clr-surface); border-radius: var(--radius);
  padding: clamp(1.6rem, 2.4vw, 2.4rem); }
.bb-truth__card h3 { display: flex; align-items: baseline; gap: .75rem;
  font-size: var(--fs-xs); font-weight: 500; line-height: 1.3; margin-bottom: .8rem; }
.bb-truth__card h3::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--clr-primary); transform: translateY(-.15em); }
.bb-truth__card p { font-size: var(--fs-body); line-height: 1.6; max-width: 44ch; }
@media (width <= 760px) { .bb-truth__grid { grid-template-columns: 1fr; } }