/* ==========================================================================
   Redix Digital V2: "יקום" (Universe)
   A world behind the page (v2.js draws it), and the page floating over it:
   very large, very light type, panes of dark glass, lines of light.

   Stacking, from the back:
     0  the sky and the ground  (canvas, fixed)
     2  the bird and the flock  (canvas, fixed, see-through)
     3  everything that is read or pressed
   The sections themselves take no z-index, so these four numbers all belong
   to the page as a whole.
   ========================================================================== */

.uni {
  --ink: #070b1a;
  --navy: var(--c-brand-navy);
  --cyan: var(--c-brand-cyan);
  --cyan-hi: var(--c-cyan-300);
  --text: var(--c-slate-050);
  --text-mid: var(--c-slate-200);
  --text-low: var(--c-slate-400);
  --title-thin: var(--cyan-hi);   /* the thin half of every title: the bright light blue of the logo, never grey */
  --line: rgba(194, 205, 232, 0.2);
  /* The margin of the page. On a very wide screen it grows, so what is read keeps to a column
     of 1680px in the middle and the world has the rest */
  --pad: max(clamp(20px, 5vw, 96px), calc((100vw - 1680px) / 2));
  --strip: 116px;   /* the height of the row of client logos, where it runs along the foot of the opening */
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* Long, small text gets a quieter sky behind it: the night, a little deeper */
  --veil: linear-gradient(180deg, rgba(7, 11, 26, 0) 0, rgba(7, 11, 26, 0.56) 150px, rgba(7, 11, 26, 0.56) calc(100% - 150px), rgba(7, 11, 26, 0) 100%);

  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--ink);
  caret-color: var(--cyan-hi);
  accent-color: var(--cyan);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html {
  scroll-padding-block: 96px 88px;   /* what the keyboard reaches stays clear of the bar and the two round buttons */
  background: #070b1a;
  color-scheme: dark;
  scrollbar-color: #2b3a70 #070b1a;
  -webkit-text-size-adjust: 100%;
}

.uni *,
.uni *::before,
.uni *::after { box-sizing: border-box; }

.uni ::selection {
  background: var(--cyan);
  color: var(--ink);
}

.sprite { position: absolute; }

/* Small text carries a little night round its letters. The world behind the page moves: the
   bird or the line of the horizon can pass behind any line, and the halo is then the ground the
   letters are read against. On a pane it is simply not seen. It is one small shadow, and large
   letters do without it (they read by their size, and a blur under letters that big is the
   dearest thing to draw on a page that scrolls); so does text on a pane, where it would not be
   seen, and text that is dark on a light fill. */
main,
.nav-links,
.foot-bottom { text-shadow: 0 0 5px rgba(7, 11, 26, 0.92); }

.pane-card,
.plan,
.card,
.hero-title,
.sec-title,
.creed-title,
.work-title,
.end-title,
.me-lead,
.facts b,
.plan-price b,
.pstep h3,
.site-name,
.vquote blockquote,
.btn,
.plan-cta,
.copy { text-shadow: none; }

.uni :focus-visible {
  outline: 3px solid var(--cyan-hi);
  outline-offset: 3px;
}

.uni [tabindex="-1"]:focus { outline: none; }

/* Read by a screen reader, not seen */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 700;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--cyan);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  transform: translate3d(0, -200%, 0);
}

.skip:focus { transform: none; }

/* A place in the page with nothing in it: the name another page of the site calls a section by
   (index.html#hero, #results, #testimonials) */
.anchor {
  position: absolute;
  top: 0;
}

/* --- The world ---------------------------------------------------------------- */

.gl {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.gl-sky { z-index: 0; }
.gl-fg { z-index: 2; }

/* The tree and the house on the way down (v2.js raises and lowers them). They are hidden
   wherever the sky is: without WebGL, in the accessibility menu's colour modes and in forced
   colours, through .gl. */
.gl-marks { z-index: 1; overflow: hidden; }

.mark {
  position: absolute;
  bottom: 0;
  height: auto;
  display: block;
  visibility: hidden;
  transform: translate3d(0, 62%, 0);
  transform-origin: 50% 100%;
  will-change: transform;
}

.mark--tree { right: -3vw; width: clamp(320px, 40vw, 820px); }
.mark--house { left: -3vw; width: clamp(320px, 36vw, 740px); }

@media (max-width: 819px) {
  .mark--tree,
  .mark--house { width: 92vw; }
}

/* Without WebGL: a still sky, and the brand's own birds */
.still-birds { display: none; }

.no-gl .gl { display: none; }

.no-gl .uni {
  background: linear-gradient(180deg, #070b1a 0%, #131b3a 46%, #202c59 62%, #14506a 66%, #0c1226 78%, #070b1a 100%) fixed;
}

.no-gl .still-birds {
  position: fixed;
  inset-inline-end: 9%;
  top: 24%;
  z-index: 0;
  display: block;
  width: clamp(180px, 28vw, 420px);
  height: auto;
}

/* --- Buttons and links -------------------------------------------------------------
   One family of corners for everything that is pressed (Roei, 2026-10-14: "ROUNDED ולא
   מעוגלים"): a button with words is a rounded rectangle, 14px at full size and 12px small, the
   same as the fields of the form; a button with only an icon is a 12px square; a choice in the
   form, 10px. Panes keep their 24 to 28px. Only the two buttons that float over the page
   (WhatsApp and the accessibility menu) and the faces of the clients stay round.

   What a button does under the pointer, or under the keyboard's focus, follows what it is:
   a filled button (the main action) lets a band of light pass over it once, from the side the
   line reads from, the way the light passes over the titles, and rises a pixel; an outlined
   button fills with light from the same side. Both are a picture moved by the compositor
   (transform only), so they cost nothing to draw. A press presses it in. Motion stopped: the
   light does not pass, and the fill simply appears. */

.uni {
  --r-btn: 14px;
  --r-btn-sm: 12px;
  --r-icon: 12px;
  --r-chip: 10px;
}

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 30px;
  border: 0;
  border-radius: var(--r-btn);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 220ms var(--ease-out-strong), background-color 180ms ease, box-shadow 220ms ease, color 180ms ease;
}

/* The band of light (filled buttons) and the fill of light (outlined ones): under the words */
.btn--fill::after,
.btn--line::before,
.plan-cta::before,
.copy::before,
.wa__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.btn--fill::after,
.plan--top .plan-cta::before,
.wa__cta::after {
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0.62) 50%, rgba(255, 255, 255, 0) 74%);
  transform: translate3d(120%, 0, 0);
  transition: none;
}

.btn--line::before,
.plan-cta::before,
.copy::before {
  background: rgba(125, 240, 244, 0.2);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 380ms var(--ease-out-strong);
}

/* A package's button fills with the cyan of the main action, poured in from the reading side;
   its words turn dark as the fill passes under them */
.plans .plan:not(.plan--top) .plan-cta::before { background: var(--c-cyan-400); }

.btn--fill { background: var(--cyan); color: var(--ink); }
.btn--line { background: rgba(7, 11, 26, 0.5); color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(242, 246, 255, 0.5); }   /* its own ground: in the opening it stands on the bright line of the horizon */
.btn--sm { min-height: 44px; padding: 0 20px; border-radius: var(--r-btn-sm); font-size: 0.9375rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--cyan-hi);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  transition: color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .btn--fill:hover { background: var(--c-cyan-400); box-shadow: 0 12px 28px -12px rgba(0, 196, 204, 0.75); transform: translate3d(0, -1px, 0); }
  .btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--text); }
  .text-link:hover { color: #fff; }

  .btn--fill:hover::after,
  .plan--top .plan-cta:hover::before,
  .wa__cta:hover::after { transform: translate3d(-120%, 0, 0); transition: transform 900ms cubic-bezier(0.3, 0.55, 0.25, 1); }

  .btn--line:hover::before,
  .plan-cta:hover::before,
  .copy:hover::before { transform: scaleX(1); }
}

/* The keyboard gets the same as the pointer */
.btn--fill:focus-visible::after,
.plan--top .plan-cta:focus-visible::before,
.wa__cta:focus-visible::after { transform: translate3d(-120%, 0, 0); transition: transform 900ms cubic-bezier(0.3, 0.55, 0.25, 1); }

.btn--line:focus-visible::before,
.plan-cta:focus-visible::before,
.copy:focus-visible::before { transform: scaleX(1); }

/* Pressed: in, whatever the pointer did before */
.btn:active,
.btn:hover:active { transform: scale(0.97); }

/* Inside the address bar a button stays in its place */
.pc-bar .btn--fill:hover { transform: none; }

/* --- Section titles: one sentence, two weights --------------------------------------- */

.sec-title {
  margin: 0;
  font-size: clamp(2.25rem, 5.4vw, 5.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.sec-title span {
  font-weight: 200;
  color: var(--title-thin);
}

.sec-sub {
  max-width: 34em;
  margin: clamp(14px, 2.4vh, 24px) 0 0;
  font-size: clamp(1.0625rem, 1.3vw, 1.3125rem);
  font-weight: 300;
  color: var(--text-mid);
  text-wrap: pretty;
}

/* --- Navigation -------------------------------------------------------------------
   The bar of a whole site: the logo, the pages in the middle, the phone and the call. Two of the
   pages open a menu, and both open in one pane of glass (.dd): going from one entry to the next,
   the pane does not close and open again, it moves and takes the size of the next menu, and the
   words slide the way the pointer went (assets/js/nav.js; Roei, 2026-10-15, after a menu he
   liked). Under 1100px the row gives way to one button, and the menu drops from the bar as a
   sheet: a native dialog, so the focus stays inside it and Escape closes it. */

.nav {
  --morph: 500ms;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
  height: 76px;
  padding-inline: var(--pad);
  transition: background-color 300ms ease;
}

/* Once the page has moved, the bar gets a ground of its own so it reads over anything: the
   night holds for the height of its words (the bird passes right behind them) and thins out
   only under them */
.is-scrolled .nav {
  background: linear-gradient(180deg, rgba(7, 11, 26, 0.94) 0, rgba(7, 11, 26, 0.88) 64%, rgba(7, 11, 26, 0) 100%);
}

/* The bar arrives with the page: the logo and the call drop a little, the pages only appear (a
   movement on the row would make it the frame of the pane, and the pane would open in the wrong
   place) */
@keyframes nav-drop { from { opacity: 0; transform: translate3d(0, -8px, 0); } }
@keyframes nav-show { from { opacity: 0; } }

html:not(.no-motion) .nav-logo { animation: nav-drop 900ms var(--ease-out-strong) 350ms backwards; }
html:not(.no-motion) .nav-links { animation: nav-show 900ms ease 450ms backwards; }
html:not(.no-motion) .nav-end { animation: nav-drop 900ms var(--ease-out-strong) 550ms backwards; }

.nav-logo {
  justify-self: start;
  display: flex;
  align-items: center;
  min-height: 44px;
}

.nav-logo img {
  display: block;
  width: auto;
  height: 30px;
}

.nav-links { justify-self: center; }

.nav-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links > ul {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.1vw, 36px);
}

.nav-links > ul > li > a,
.nav-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;   /* a short word is still a full target */
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-mid);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 250ms ease;
}

.nav-chev {
  flex: none;
  width: 9px;
  height: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 350ms var(--ease-out-strong);
}

.nav-trigger[aria-expanded="true"] { color: var(--text); }
.nav-trigger[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }

.nav-links > ul > li > a::after,
.nav-trigger::after {
  content: "";
  position: absolute;
  inset: auto 0 8px 0;
  height: 2px;
  background: var(--cyan-hi);
  transform: scaleX(0);
  transition: transform 260ms var(--ease-out-strong);
}

.nav-links :is([aria-current="true"], [aria-current="page"]) { color: var(--text); }
.nav-links :is([aria-current="true"], [aria-current="page"])::after { transform: none; }

/* The pane of the menus. nav.js gives it its place (--x) and size (--w, --h) from the menu that
   is open, under the start of its entry's word. */
.dd {
  --x: 0px;
  --w: 400px;
  --h: 300px;
  --s: 0.97;
  position: absolute;
  top: 70px;
  left: 0;
  width: var(--w);
  height: var(--h);
  overflow: hidden;
  border: 1px solid rgba(194, 205, 232, 0.16);
  border-radius: 20px;
  background: rgba(12, 18, 40, 0.84);
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.78), 0 2px 10px rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  text-shadow: none;
  opacity: 0;
  visibility: hidden;   /* closed, it is not drawn at all: a hidden pane of glass still cost frames */
  pointer-events: none;
  transform: translateX(var(--x)) scale(var(--s));
  transform-origin: 50% 0;
  transition: transform var(--morph) var(--ease-out-strong), width var(--morph) var(--ease-out-strong), height var(--morph) var(--ease-out-strong), opacity 300ms ease, visibility 0s linear 300ms;
}

.dd.is-open {
  --s: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--morph) var(--ease-out-strong), width var(--morph) var(--ease-out-strong), height var(--morph) var(--ease-out-strong), opacity 300ms ease, visibility 0s;
}

/* The first opening: in place at once, only growing in and lighting up */
.dd.is-instant { transition: opacity 300ms ease, transform var(--morph) var(--ease-out-strong), visibility 0s; }
.dd.is-instant.is-snap { transition: none; }

.dd-panel {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  filter: blur(8px);
  transform: translateX(0);
  transition: opacity 260ms ease, transform var(--morph) var(--ease-out-strong), filter 400ms ease, visibility 0s linear var(--morph);
}

.dd-panel[data-state="exit-left"] { transform: translateX(-56px); }
.dd-panel[data-state="exit-right"] { transform: translateX(56px); }

.dd-panel[data-state="active"] {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transform: translateX(0);
  transition: opacity 360ms ease 60ms, transform var(--morph) var(--ease-out-strong), filter 450ms ease 40ms, visibility 0s;
}

.dd-panel.is-snap { transition: none !important; }

/* Inside the pane the ring of the keyboard is drawn inwards: the pane's edge would cut it */
.uni .dd :focus-visible { outline-offset: -3px; }

/* The services: the list, and a picture of each beside it */
.dd-services {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  width: 680px;
  height: 372px;
}

.dd-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 8px;
  list-style: none;
}

.dd-list li {
  flex: 1;
  display: flex;
}

.dd-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  transition: background-color 300ms ease;
}

.dd-item.is-active { background: rgba(125, 240, 244, 0.08); }

.dd-item b {
  margin-bottom: 3px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
}

.dd-item span {
  font-size: 0.8125rem;
  line-height: 1.42;
  color: var(--text-mid);
}

.dd-media {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 70% at 50% 128%, rgba(0, 196, 204, 0.2) 0%, rgba(0, 196, 204, 0) 62%);
}

/* the drawing fades into the glass on the side of the list */
.dd-media::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 2;
  width: 56px;
  background: linear-gradient(to left, rgba(12, 18, 40, 0.5), rgba(12, 18, 40, 0));
  pointer-events: none;
}

/* the edge of the planet, low in the picture, as in the panes of the services */
.dd-media::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -64%;
  height: 82%;
  border-radius: 50%;
  border-top: 1px solid rgba(125, 240, 244, 0.3);
  box-shadow: 0 -22px 46px -24px rgba(0, 196, 204, 0.42);
  pointer-events: none;
}

/* --- The services in lines of light ----------------------------------------------------
   Each service tells itself in a few seconds, in the language of the AI pane of the services
   (glass, thin lines of light, points of light that run along them): a site builds itself and is
   pressed, an item flies into a cart, an answer goes on to mail, WhatsApp and the CRM, a light
   goes round a site in the air, a card is sent on, two people talk and set a day (Roei,
   2026-10-15: not pictures of the sites, something that moves a little, like that pane).
   One timeline of six seconds for all of them: each part arrives at its moment (t0 ... t72, in
   eighths of the loop), all stay, and all leave together before the next round. Only the drawing
   in view runs, and only while the menu is open; with the motion stopped each stands whole. */
.dd-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: blur(10px);
  transform: scale(1.04);
  transition: opacity 600ms ease, transform 900ms var(--ease-out-strong), filter 600ms ease;
}

.dd-art.is-active {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.dd-art :is(text) { font-family: inherit; text-shadow: none; }

.a-glass { fill: rgba(10, 16, 36, 0.86); stroke: rgba(125, 240, 244, 0.22); stroke-width: 1; }
.a-soft { fill: rgba(194, 205, 232, 0.14); }
.a-bright { fill: rgba(194, 205, 232, 0.34); }
.a-cyan { fill: var(--cyan-hi); }
.a-ink { fill: rgba(7, 11, 26, 0.55); }
.a-line { fill: none; stroke: rgba(125, 240, 244, 0.34); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.a-line.a-strong { stroke: rgba(125, 240, 244, 0.75); stroke-width: 2; }
.a-line.a-faint { stroke: rgba(125, 240, 244, 0.22); }
.a-icon { color: var(--cyan-hi); }
.a-tick { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.a-glow { fill: rgba(125, 240, 244, 0.1); stroke: var(--cyan-hi); stroke-width: 1.5; }
.a-num { font-size: 13px; font-weight: 800; fill: var(--ink); }
.a-label { font-size: 14px; font-weight: 700; fill: var(--text); }
.a-crm { font-size: 15px; font-weight: 800; letter-spacing: 0.06em; fill: var(--cyan-hi); }

/* the points of light: a dot that runs along its line once a round (as .flow-run), and the two
   that never stop, round the site and along its pulse */
.a-run,
.a-orbit,
.a-pulse {
  fill: none;
  stroke: #e6fdff;
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(125, 240, 244, 0.95));
}

.a-run { stroke-dasharray: 0.001 2; stroke-dashoffset: 0.001; opacity: 0; }
.a-orbit { stroke-dasharray: 0.001 0.999; stroke-width: 5; }
.a-pulse { stroke-dasharray: 0.07 0.93; stroke-width: 2.6; }

.a-cursor { fill: #e6fdff; opacity: 0; filter: drop-shadow(0 0 5px rgba(125, 240, 244, 0.95)); }
.a-click { fill: none; stroke: var(--cyan-hi); stroke-width: 2; opacity: 0; }

.a-in,
.a-click,
.a-press,
.a-beat {
  transform-box: fill-box;
  transform-origin: center;
}

.a-in { --from: translate3d(0, 6px, 0) scale(0.96); }
.a-in.a-build { --from: scaleX(0.3); transform-origin: right center; }
.a-in.a-pop { --from: scale(0); }

/* the moment each part arrives, in eighths of the round */
.t0 { --art: art-0; }
.t8 { --art: art-8; }
.t16 { --art: art-16; }
.t24 { --art: art-24; }
.t32 { --art: art-32; }
.t40 { --art: art-40; }
.t48 { --art: art-48; }
.t56 { --art: art-56; }
.t64 { --art: art-64; }
.t72 { --art: art-72; }
.r8 { --run: run-8; }
.r16 { --run: run-16; }
.r24 { --run: run-24; }
.r32 { --run: run-32; }
.r40 { --run: run-40; }
.r48 { --run: run-48; }

@keyframes art-0 { 0% { opacity: 0; transform: var(--from); } 6%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes art-8 { 0%, 8% { opacity: 0; transform: var(--from); } 14%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes art-16 { 0%, 16% { opacity: 0; transform: var(--from); } 22%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes art-24 { 0%, 24% { opacity: 0; transform: var(--from); } 30%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes art-32 { 0%, 32% { opacity: 0; transform: var(--from); } 38%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes art-40 { 0%, 40% { opacity: 0; transform: var(--from); } 46%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes art-48 { 0%, 48% { opacity: 0; transform: var(--from); } 54%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes art-56 { 0%, 56% { opacity: 0; transform: var(--from); } 62%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes art-64 { 0%, 64% { opacity: 0; transform: var(--from); } 70%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes art-72 { 0%, 72% { opacity: 0; transform: var(--from); } 78%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }

@keyframes run-8 { 0%, 8% { stroke-dashoffset: 0.001; opacity: 0; } 11%, 29% { opacity: 1; } 32%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes run-16 { 0%, 16% { stroke-dashoffset: 0.001; opacity: 0; } 19%, 37% { opacity: 1; } 40%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes run-24 { 0%, 24% { stroke-dashoffset: 0.001; opacity: 0; } 27%, 45% { opacity: 1; } 48%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes run-32 { 0%, 32% { stroke-dashoffset: 0.001; opacity: 0; } 35%, 53% { opacity: 1; } 56%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes run-40 { 0%, 40% { stroke-dashoffset: 0.001; opacity: 0; } 43%, 61% { opacity: 1; } 64%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes run-48 { 0%, 48% { stroke-dashoffset: 0.001; opacity: 0; } 51%, 69% { opacity: 1; } 72%, 100% { stroke-dashoffset: -1; opacity: 0; } }

/* the visitor's light comes up to the button of the site and presses it */
@keyframes art-cursor {
  0%, 46% { opacity: 0; transform: translate(206px, 330px); }
  50% { opacity: 1; transform: translate(206px, 330px); }
  62%, 84% { opacity: 1; transform: translate(296px, 197px); }
  90%, 100% { opacity: 0; transform: translate(296px, 197px); }
}
@keyframes art-click { 0%, 62% { opacity: 0; transform: scale(0.6); } 64% { opacity: 0.9; } 76%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes art-press { 0%, 4% { transform: none; } 7% { transform: scale(0.92); } 11%, 100% { transform: none; } }
@keyframes art-loop { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }
@keyframes art-beat { 0%, 100% { transform: none; } 50% { transform: scale(1.12); } }
@keyframes art-type { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

html:not(.no-motion) .dd-art .a-in { animation: var(--art) 6s var(--ease-out-strong) infinite both paused; }
html:not(.no-motion) .dd-art .a-run { animation: var(--run) 6s cubic-bezier(0.45, 0, 0.35, 1) infinite both paused; }
html:not(.no-motion) .dd-art .a-cursor { animation: art-cursor 6s cubic-bezier(0.45, 0, 0.25, 1) infinite both paused; }
html:not(.no-motion) .dd-art .a-click { animation: art-click 6s ease-out infinite both paused; }
html:not(.no-motion) .dd-art .a-press { animation: art-press 6s ease infinite both paused; }
html:not(.no-motion) .dd-art .a-orbit { animation: art-loop 8s linear infinite paused; }
html:not(.no-motion) .dd-art .a-pulse { animation: art-loop 2.8s linear infinite paused; }
html:not(.no-motion) .dd-art .a-beat { animation: art-beat 2.8s ease-in-out infinite paused; }
html:not(.no-motion) .dd-art .a-type { animation: art-type 1.2s ease-in-out infinite paused; }
html:not(.no-motion) .dd-art .a-type:nth-of-type(2) { animation-delay: 0.2s; }
html:not(.no-motion) .dd-art .a-type:nth-of-type(3) { animation-delay: 0.4s; }

html:not(.no-motion) .dd.is-open .dd-art.is-active :is(.a-in, .a-run, .a-cursor, .a-click, .a-press, .a-orbit, .a-pulse, .a-beat, .a-type) { animation-play-state: running; }

/* With the motion stopped: each drawing whole and still, its lights where they arrive */
html.no-motion .dd-art :is(.a-run, .a-cursor, .a-click) { opacity: 0; }

/* The work: two sites the studio built, and the way to all of them */
/* the width of the services: going from one to the other, the pane only changes its height */
.dd-work {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  width: 680px;
  height: 316px;
  padding: 8px;
}

.dd-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
}

.dd-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 900ms var(--ease-out-strong), filter 500ms ease;
}

.dd-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(7, 11, 26, 0.94) 0%, rgba(7, 11, 26, 0.45) 40%, rgba(7, 11, 26, 0) 64%);
}

.dd-card b {
  margin-bottom: 4px;
  font-size: 0.96875rem;
  font-weight: 700;
  line-height: 1.25;
}

.dd-card span {
  font-size: 0.8125rem;
  line-height: 1.42;
  color: var(--text-mid);
}

.dd-card:focus-visible img {
  filter: brightness(1.08);
  transform: scale(1.05);
}

/* the way to all the work: the site's outlined button, the whole width (the filled one is the
   call in the bar beside it) */
.dd-all {
  grid-column: 1 / -1;
  min-height: 46px;
}

.nav-end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
}

.nav-phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;   /* just above the menu button's width it broke after the first dash */
}

/* The same page in the other language (stage D, 2026-10-20): a small framed word beside the phone.
   On a screen without the row of pages it moves into the menu (.menu-foot). */
.nav-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--r-icon);
  box-shadow: inset 0 0 0 1px rgba(194, 205, 232, 0.36);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.nav-burger {
  position: relative;
  display: none;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--r-icon);
  background: rgba(7, 11, 26, 0.5);
  box-shadow: inset 0 0 0 1px rgba(194, 205, 232, 0.36);
  color: var(--text);
  cursor: pointer;
}

.nav-burger i {
  position: absolute;
  inset-inline: 14px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.nav-burger i:first-of-type { top: 19px; }
.nav-burger i:last-of-type { top: 27px; }

@media (hover: hover) and (pointer: fine) {
  .nav-links > ul > li > a:hover,
  .nav-trigger:hover { color: var(--text); }
  .dd-card:hover img { filter: brightness(1.08); transform: scale(1.05); }
  .nav-phone:hover { color: var(--cyan-hi); }
  .nav-lang:hover { color: var(--cyan-hi); box-shadow: inset 0 0 0 1px var(--cyan-hi); }
  .nav-burger:hover { box-shadow: inset 0 0 0 1px var(--cyan-hi); }
}

/* The menu on a small screen: a sheet of glass that drops from the bar. The dialog itself is the
   whole screen and clear; its bar stands where the site's bar is (the button that opened it
   becomes the one that closes it), the page behind it dims, and a tap beside the sheet closes it. */
.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: none;
  color: var(--text);
}

.menu[open] {
  display: flex;
  flex-direction: column;
}

.menu::backdrop {
  background: rgba(5, 8, 20, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 300ms ease;
}

.menu.is-in::backdrop { opacity: 1; }

.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The bar of the menu is the site's bar, to the pixel: the same height, the same sides and the same
   logo, so opening the menu changes nothing in it but the button (Roei, 2026-10-15: the logo
   jumped from one size to another). Its ground fades in and out with the sheet. */
.menu-bar {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding-inline: var(--pad);
}

.menu-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* the ground of the scrolled bar: the site's bar, dimmed behind it, does not show through */
  background: linear-gradient(180deg, rgba(7, 11, 26, 0.96) 0, rgba(7, 11, 26, 0.9) 70%, rgba(7, 11, 26, 0) 100%);
  opacity: 0;
  transition: opacity 300ms ease;
}

.menu.is-in .menu-bar::before { opacity: 1; }

.menu-logo {
  display: block;
  width: auto;
  height: 30px;
}

/* the cross arrives turning out of the two lines of the button it replaces */
.menu-close svg {
  transform: rotate(-90deg) scale(0.6);
  opacity: 0;
  transition: transform 450ms var(--ease-out-strong), opacity 250ms ease;
}

.menu.is-in .menu-close svg {
  transform: none;
  opacity: 1;
}

.menu-close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--r-icon);
  background: rgba(7, 11, 26, 0.5);
  box-shadow: inset 0 0 0 1px rgba(194, 205, 232, 0.36);
  color: var(--text);
  cursor: pointer;
}

.menu-close svg {
  width: 22px;
  height: 22px;
}

.menu-sheet {
  flex: 0 1 auto;
  min-height: 0;
  margin: -4px 12px max(12px, env(safe-area-inset-bottom));
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(194, 205, 232, 0.16);
  border-radius: 20px;
  background: rgba(12, 18, 40, 0.88);
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  opacity: 0;
  transform: translate3d(0, -6px, 0) scale(0.98);
  transform-origin: 50% 0;
  transition: opacity 300ms ease, transform 450ms var(--ease-out-strong);
}

.menu.is-in .menu-sheet {
  opacity: 1;
  transform: none;
}

.menu-main > li > a {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

/* The services: six tiles of the night's glass, each with its sign in a ring of light, two by two
   (Roei, 2026-10-15: they were a grey list; "more inviting"). They arrive one after another as
   the sheet opens, a short fall, the way the sheet itself arrives. */
.menu-sub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 2px 4px 10px;
}

.menu-sub a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 10px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(30, 42, 82, 0.72), rgba(12, 18, 40, 0.6));
  box-shadow: inset 0 0 0 1px rgba(194, 205, 232, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  text-decoration: none;
  transition: box-shadow 200ms ease, background-color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}

.ms-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: radial-gradient(circle at 50% 30%, rgba(103, 232, 249, 0.22), rgba(34, 211, 238, 0.06) 70%);
  box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.4), 0 0 16px -6px rgba(34, 211, 238, 0.7);
  color: var(--cyan-hi);
}

.ms-ic svg {
  width: 19px;
  height: 19px;
}

.menu-sub a:active { box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.6); transform: scale(0.98); }

.menu-sub li {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  transition: opacity 280ms ease, transform 420ms var(--ease-out-strong);
}

.menu.is-in .menu-sub li {
  opacity: 1;
  transform: none;
}

.menu.is-in .menu-sub li:nth-child(1) { transition-delay: 90ms; }
.menu.is-in .menu-sub li:nth-child(2) { transition-delay: 120ms; }
.menu.is-in .menu-sub li:nth-child(3) { transition-delay: 150ms; }
.menu.is-in .menu-sub li:nth-child(4) { transition-delay: 180ms; }
.menu.is-in .menu-sub li:nth-child(5) { transition-delay: 210ms; }
.menu.is-in .menu-sub li:nth-child(6) { transition-delay: 240ms; }

.no-motion .menu-sub li { transition: none; }
.no-motion .menu-close svg { transition: none; }

@media (max-width: 359px) {
  .menu-sub { grid-template-columns: minmax(0, 1fr); }
}

.menu-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
  margin-top: 6px;
  padding: 8px 12px 0;
  border-top: 1px solid var(--line);
}

.menu-foot a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.menu-foot svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cyan-hi);
}

@media (hover: hover) and (pointer: fine) {
  .menu-main > li > a:hover { background: rgba(125, 240, 244, 0.08); }
  .menu-sub a:hover { box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
  .menu-close:hover { box-shadow: inset 0 0 0 1px var(--cyan-hi); }
}

/* The page behind an open menu stays where it is */
body.is-locked { overflow: hidden; }

/* --- 1. The opening ----------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 110px var(--pad) clamp(70px, 12vh, 120px);
}

/* What the studio does, said outright, in front of everything. The bird keeps to the open side
   of the frame (v2.js), so nothing passes over these words. */
.hero-say {
  position: relative;
  z-index: 3;
  max-width: min(100%, 66vw);
}

/* The words are on the screen from the first frame, without waiting for a script (Roei,
   2026-10-22: no curtain, so the first screen is there as soon as the page loads). They rise
   into place as the page is drawn; the fade starts just above nothing, so the browser counts
   them as shown at once. */
html:not(.no-motion) .hero-say { animation: hero-rise 1100ms var(--ease-expo) both; }

@keyframes hero-rise {
  from { opacity: 0.01; transform: translate3d(0, 26px, 0); }
}

.hero-title {
  margin: 0;
  font-size: clamp(3rem, 7.2vw, 8.25rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
}

.hero-title span {
  display: block;
  white-space: nowrap;
  will-change: transform;
}

.hero-title span:first-child { font-weight: 200; color: var(--title-thin); }
.hero-title span:last-child { font-weight: 800; }

.hero-sub {
  max-width: 30em;
  margin: clamp(18px, 3.2vh, 34px) 0 clamp(20px, 3.4vh, 36px);
  font-size: clamp(1.0625rem, 1.45vw, 1.4375rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-mid);
  text-wrap: pretty;
  text-shadow: 0 1px 22px rgba(7, 11, 26, 0.7);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The line of the brand signs the frame, by the bird. It stands clear of the WhatsApp button
   in the corner. */
.hero-sign {
  position: absolute;
  z-index: 3;
  inset-inline-end: calc(var(--pad) + 76px);
  bottom: clamp(28px, 5vh, 56px);
  margin: 0;
  font-size: clamp(1.125rem, 1.9vw, 1.875rem);
  font-weight: 200;
  line-height: 1.2;
  transition: opacity 900ms ease 800ms;
}

html.js:not(.is-open) .hero-sign { opacity: 0; }

.hero-sign { color: var(--title-thin); }

/* --- Who already trusts the studio: a row of logos that runs ---------------------------
   One loop is two copies of the list (v2.js adds the second), moved by exactly half its own
   width, so the seam never shows. The space between logos is padding on each item, not a gap:
   a gap would leave the two halves unequal. The row stops under the pointer, on keyboard
   focus, from its button, and while it is away from the screen. */

.clients {
  --edge: max(var(--pad), 96px);   /* clear of the two round buttons in the corners */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: 0 var(--edge) clamp(20px, 4vh, 40px);
}

/* Over the row, the hairline that closes the opening. (A band of deeper night lay behind the
   logos too, against the bird crossing them; once the row left the foot of the opening it slid
   over the sky as a dark stripe, and Roei saw the light change in the middle of the screen as he
   scrolled, 2026-10-16. The bird keeps clear of the row and the flock dims there, so it went.) */
.clients::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0 var(--edge) auto;
  height: 1px;
  background: var(--line);
}

.marquee {
  position: relative;
  z-index: 3;
  min-width: 0;
  padding-block: clamp(20px, 3.6vh, 34px) clamp(8px, 1.6vh, 14px);
}

.marquee-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marquee-track li {
  flex: none;
  display: flex;
  align-items: center;
  padding-inline: clamp(16px, 2.5vw, 38px);
}

.marquee-track img {
  display: block;
  width: auto;
  height: var(--h, 32px);
  opacity: 0.82;
}

/* On a wide screen a fifth larger: about nine logos in the row at once instead of ten
   (Roei, 2026-10-16) */
@media (min-width: 900px) {
  .marquee-track img { height: calc(var(--h, 32px) * 1.22); }
}

@keyframes marquee-run {
  to { transform: translate3d(50%, 0, 0); }
}

/* One line from the first layout on, wherever the row is going to run (the boot script has
   said so before the page is drawn): the height of the row never changes under the reader */
html.js:not(.no-motion) .marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

html.js:not(.no-motion) .marquee-track {
  flex-wrap: nowrap;
  width: max-content;
}

html.js:not(.no-motion) .marquee.is-run .marquee-track { animation: marquee-run 84s linear infinite; }
/* Left to right (English) the row starts at the left edge and the copy that closes the loop
   stands to its right: it runs the other way, or the row slides off and leaves the strip empty */
@keyframes marquee-run-ltr {
  to { transform: translate3d(-50%, 0, 0); }
}
html.js[dir="ltr"]:not(.no-motion) .marquee.is-run .marquee-track { animation-name: marquee-run-ltr; }

html.js:not(.no-motion) .marquee:hover .marquee-track,
html.js:not(.no-motion) .marquee:focus-within .marquee-track,
html.js:not(.no-motion) .marquee.is-paused .marquee-track,
html.js:not(.no-motion) .marquee.is-offscreen .marquee-track { animation-play-state: paused; }

/* On a screen with room for it the row belongs to the opening: it runs along the foot of the
   first screen, and the line of the brand moves up to stand on it */
@media (min-width: 900px) and (min-height: 700px) {
  html.js:not(.no-motion) .hero { padding-bottom: calc(var(--strip) + 30px); }
  html.js:not(.no-motion) .hero-sign { bottom: calc(var(--strip) + 18px); }

  html.js:not(.no-motion) .clients {
    height: var(--strip);
    margin-top: calc(-1 * var(--strip));
    padding-block: 0;
  }

  html.js:not(.no-motion) .marquee { padding-block: 0; }
}


/* --- 2. What the studio believes -------------------------------------------------------
   One sentence, the size of the screen, in the two weights of the page: what a site is not,
   thin; what it is, heavy. Armed by v2.js, each word waits as an outline and fills with light
   as the page reaches it; the word that carries the sentence lights in the colour of the brand. */

.creed {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 14vh var(--pad) 8vh;
}

.creed-title {
  position: relative;
  z-index: 3;
  margin: 0;
  font-size: clamp(3.25rem, 10vw, 12rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.creed-line {
  display: block;
  font-weight: 200;
  white-space: nowrap;
}

.creed-line:nth-child(n + 3) { font-weight: 800; }

.creed .w {
  position: relative;
  display: inline-block;
  color: var(--text);
  transition: transform 800ms var(--ease-expo);
}

/* A word is two pictures of itself, one over the other (v2.js makes the second): lit, and as
   an outline. Lighting it is a cross-fade between them. Letters this size are dear to draw, and
   a fade of their colour would draw them again on every frame of it, in the middle of a scroll;
   a fade of two pictures draws nothing. */
.creed .w-on {
  display: inline-block;
  transition: opacity 520ms ease;
}

.creed .w-off {
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(194, 205, 232, 0.7);
  text-shadow: none;
  opacity: 0;
  transition: opacity 520ms ease;
  pointer-events: none;
  user-select: none;
}

.creed-line:nth-child(-n + 2) .w { color: var(--title-thin); }

.creed .w--key {
  color: var(--cyan-hi);
  text-shadow: 0 0 0.42em rgba(0, 196, 204, 0.55);
}

/* Unlit, a word is glass: only its outline. The outline is what is read until the light comes,
   so it is bright enough to read by (large text: 3:1 and more against the night). */
.creed.is-armed .w:not(.is-lit) { transform: translate3d(0, 0.07em, 0); }
.creed.is-armed .w:not(.is-lit) .w-on { opacity: 0; }
.creed.is-armed .w:not(.is-lit) .w-off { opacity: 1; }

/* --- 3. Who says so ----------------------------------------------------------------------
   The person and the numbers, with no pane around them (the deck of services below is made of
   panes). The photograph stands in a window with a rounded head, and the point of light that
   circles the bird circles it too. The sky behind the small type is a little deeper. */

.me {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(28px, 6vw, 110px);
  padding: 8vh var(--pad) 16vh;
  background: var(--veil);
}

.me-photo,
.me-side {
  position: relative;
  z-index: 3;
}

.me-photo {
  justify-self: center;
  width: min(100%, 420px);
  margin: 0;
}

/* The window. The photograph is a cut-out, so the window is its room: a night lit from behind
   the head, the way the sky of the page is lit from the horizon. */
.me-window {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 28px 28px;
  background:
    radial-gradient(62% 44% at 50% 30%, rgba(47, 224, 230, 0.34) 0, rgba(0, 196, 204, 0.12) 46%, rgba(0, 196, 204, 0) 74%),
    linear-gradient(180deg, #25346d 0%, #151d42 54%, #0a1024 100%);
  box-shadow: 0 0 0 1px rgba(125, 240, 244, 0.24), 0 50px 90px -40px rgba(0, 0, 0, 0.85);
}

/* The figure is a little wider than its window and runs out under its foot: the window frames
   him past the edges of the photograph, where the cut of the picture would show. A breath of
   room over the head. */
.me-window img {
  position: absolute;
  inset: 6% -5% 0;
  width: 110%;
  height: 94%;
  object-fit: cover;
  object-position: 50% 0;
  filter: drop-shadow(0 0 24px rgba(47, 224, 230, 0.2));   /* the light of the room on his edge: he is lit from behind, like everything on this page */
}

/* He stands in the room, not on it: the night of the window rises over his arms at the foot,
   and a line of its light lies along the frame */
.me-window::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(10, 16, 36, 0) 68%, rgba(10, 16, 36, 0.5) 88%, rgba(10, 16, 36, 0.86) 100%);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.16), inset 0 18px 40px -22px rgba(125, 240, 244, 0.5);
  pointer-events: none;
}

/* The circle the light goes round: a little wider than the head of the window, and behind it,
   so the light comes out on one side, passes over the top and goes in on the other */
.me-orbit {
  position: absolute;
  z-index: -1;
  inset: 0 -6.5% auto;
  aspect-ratio: 1;
  overflow: hidden;   /* what turns inside is a square: its corners must not widen the page */
  transform: translate3d(0, -5.75%, 0);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(194, 205, 232, 0.13);
}

.me-orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(125, 240, 244, 0) 0deg, rgba(125, 240, 244, 0) 210deg, rgba(125, 240, 244, 0.8) 346deg, #fff 358deg, rgba(125, 240, 244, 0) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

@keyframes orbit-turn {
  to { transform: rotate(1turn); }
}

html:not(.no-motion) .me-orbit::before { animation: orbit-turn 12s linear infinite; }
html:not(.no-motion) .is-offscreen .me-orbit::before { animation-play-state: paused; }

.me-photo figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 12px;
  margin-top: 18px;
}

.me-photo figcaption b {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.2;
}

.me-photo figcaption span { color: var(--text-mid); }

.me-lead {
  margin: 0;
  font-size: clamp(1.75rem, 3.6vw, 3.75rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.me-lead span {
  display: block;
  font-weight: 200;
  color: var(--title-thin);
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 56px);
  margin: clamp(24px, 5vh, 54px) 0 0;
  padding: 0;
  list-style: none;
}

.facts li {
  padding: clamp(14px, 2.4vh, 24px) 0;
  border-top: 1px solid var(--line);
}

.facts b {
  display: block;
  font-size: clamp(3rem, 5.4vw, 5.75rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.facts span {
  display: block;
  margin-top: 8px;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-mid);
}

/* A pane of glass (the form stands on one). No backdrop blur: a pane of blur this size, over a
   world that moves every frame, would be redrawn every frame. The glass is a deep tint, a lit
   edge and a shadow. */
.card {
  position: relative;
  z-index: 3;
  border-radius: 24px;
  background: linear-gradient(158deg, rgba(28, 40, 82, 0.88) 0%, rgba(13, 20, 44, 0.92) 62%, rgba(9, 14, 33, 0.94) 100%);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 44px 90px -44px rgba(0, 0, 0, 0.75);
}

/* --- 4. Services: a deck of three panes ------------------------------------------------------
   The deck of the main site, in this page's glass: each pane sticks where it lands (plain CSS,
   nothing is pinned), and v2.js makes the pane that is being covered lean back and dim. Short
   screens, and motion stopped in the accessibility menu, get a plain column. */

.services {
  position: relative;
  padding: 6vh var(--pad) 8vh;
  background: var(--veil);
}

.services .sec-title,
.services .sec-sub,
.deck {
  position: relative;
  z-index: 3;
}

.deck { margin-top: clamp(28px, 6vh, 64px); }

.deck-mark {
  display: block;
  height: 0;
}

/* The space between panes is an element of its own, never a margin: a sticky box's margin
   counts against its container and lets the lower panes go early. It also sets how far the
   page scrolls between one pane and the next. */
.deck-gap {
  display: block;
  height: 22px;
}

.deck-gap--tail { height: 0; }

.pane {
  --i: 0;
  position: relative;
}

.pane:nth-of-type(2) { --i: 1; }
.pane:nth-of-type(3) { --i: 2; }

@media (min-width: 980px) and (min-height: 700px) {
  html:not(.no-motion) .pane {
    position: sticky;
    top: calc(92px + var(--i) * 18px);
  }

  html:not(.no-motion) .deck-gap { height: 16vh; }
  html:not(.no-motion) .deck-gap--tail { height: 10vh; }   /* a beat of rest once the deck is complete */
  html:not(.no-motion) .pane-card { min-height: min(600px, calc(100vh - 92px - 36px - 30px)); }
}

/* Phones and tablets: the same deck for panes taller than the screen. v2.js arms it (.is-deck)
   and gives each pane its --stick: the pane scrolls until its bottom edge is in view, stays,
   and the next one climbs over it. Every line of every pane passes the reader first. */
@media (max-width: 979px) and (min-height: 600px) {
  .deck.is-deck .pane {
    position: sticky;
    top: var(--stick, 76px);
  }

  .deck.is-deck .deck-gap { height: 14vh; }
  .deck.is-deck .deck-gap--tail { height: 6vh; }
}

/* A pane is solid: whatever it covers must not show through */
.pane-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(24px, 4.4vw, 80px);
  padding: clamp(24px, 4.4vw, 72px);
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(120% 70% at 50% 128%, rgba(0, 196, 204, 0.2) 0%, rgba(0, 196, 204, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 26%),
    linear-gradient(158deg, #17224a 0%, #0c1330 58%, #080d22 100%);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.16), inset 0 1px 0 rgba(142, 234, 240, 0.22), 0 -22px 60px -34px rgba(0, 0, 0, 0.9);
}

/* The edge of the planet, low inside the pane: the world goes on behind the glass (Roei,
   2026-10-15: the panes should belong to the site's own world, not be generic boxes) */
.pane-card::before {
  content: "";
  position: absolute;
  left: -18%;
  right: -18%;
  bottom: -64%;
  height: 82%;
  border-radius: 50%;
  border-top: 1px solid rgba(125, 240, 244, 0.32);
  box-shadow: 0 -22px 46px -24px rgba(0, 196, 204, 0.42);
  pointer-events: none;
}

.pane-copy,
.pane-art { position: relative; }

/* the two ways on from a pane: a first talk about it, and the page of the service */
.pane-links { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0; }

/* The point of light that goes round the bird, going round the pane: once, as it arrives (and
   round the Gold package as it lands) */
@property --orbit {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.pane-card::after,
.plan--top::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--orbit), rgba(125, 240, 244, 0) 0deg, rgba(125, 240, 244, 0) 290deg, rgba(125, 240, 244, 0.75) 350deg, #fff 358deg, rgba(125, 240, 244, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}

@keyframes pane-orbit {
  0% { --orbit: 0deg; opacity: 0; }
  10% { opacity: 1; }
  82% { opacity: 1; }
  100% { --orbit: 360deg; opacity: 0; }
}

html:not(.no-motion) .deck.is-armed .pane.is-live .pane-card::after { animation: pane-orbit 2600ms cubic-bezier(0.45, 0, 0.25, 1) 350ms 1 both; }

/* The dimming of a covered pane (v2.js raises its opacity) */
.pane-shade {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #05081a;
  opacity: 0;
  pointer-events: none;
}

.pane-title {
  margin: 0;
  font-size: clamp(2.25rem, 5.2vw, 5.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
}

.pane-title span {
  font-weight: 200;
  color: var(--title-thin);
}

.pane-text {
  max-width: 24em;
  margin: clamp(14px, 2.6vh, 26px) 0 clamp(14px, 2.4vh, 24px);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  font-weight: 300;
  line-height: 1.42;
  text-wrap: pretty;
}

.pane-list {
  margin: 0 0 clamp(8px, 1.6vh, 16px);
  padding: 0;
  list-style: none;
}

.pane-list li {
  position: relative;
  padding: 9px 0;
  padding-inline-start: 20px;
  color: var(--text-mid);
}

/* the point sits beside the first line, whatever the line holds (a word in English among them) */
.pane-list li::before {
  content: "";
  position: absolute;
  top: calc(9px + 0.62em);
  inset-inline-start: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan-hi);
  box-shadow: 0 0 10px 1px rgba(125, 240, 244, 0.55);
  transform: translateY(-50%);
}

/* The drawing: the service, in lines of light */
.pane-art { min-width: 0; }

.art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.art .d,
.art .tick {
  fill: none;
  stroke: rgba(125, 240, 244, 0.78);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1100ms var(--ease-out-strong);
}

.art .cover { fill: #101836; }
.art .dot { fill: rgba(125, 240, 244, 0.78); }

.art .hot {
  fill: var(--cyan);
  transition: opacity 500ms ease 800ms;
}

.art .tick {
  stroke: var(--ink);
  stroke-width: 2.4;
  transition-delay: 1000ms;
}

.art .dot { transition: opacity 400ms ease 200ms; }

/* Each line starts a little after the one before it */
.art > :nth-child(n + 4) { transition-delay: 90ms; }
.art > :nth-child(n + 7) { transition-delay: 180ms; }
.art > :nth-child(n + 10) { transition-delay: 270ms; }
.art > :nth-child(n + 13) { transition-delay: 360ms; }
.art > :nth-child(n + 16) { transition-delay: 450ms; }
.art > :nth-child(n + 19) { transition-delay: 540ms; }
.art > .hot { transition-delay: 800ms; }
.art > .tick { transition-delay: 1000ms; }

/* Armed by v2.js: the drawing waits for its pane to arrive, then draws itself. Without the
   script it is simply complete. */
.deck.is-armed .pane:not(.is-live) .art .d,
.deck.is-armed .pane:not(.is-live) .art .tick { stroke-dashoffset: 1; }

.deck.is-armed .pane:not(.is-live) .art .hot,
.deck.is-armed .pane:not(.is-live) .art .dot { opacity: 0; }

/* --- The mockup: a laptop, and a phone standing at its outer corner --------------------
   A site the studio built, live: the home page's first service pane and every row of the
   portfolio page. The frames are drawn here, so they are sharp at any size and weigh nothing.
   Devices in the night (Roei chose it from a sketch, 2026-10-15, "פחות AI"): dark metal with a
   line of the world's cyan light on its edges, black glass round the screens, a slim address bar
   with its lock (no three points), a base with weight and its shadow on the ground, a thin metal
   phone with its buttons (no camera: the island covered the sites' logos), and each screen
   lighting the night round it in the colour of its own site (--glow, from the page). When the
   work arrives the lid opens and the screens come on, once (each page says when); motion stopped,
   everything is open and lit from the start. */
.mock {
  --glow: #7df0f4;
  --rim: rgba(125, 240, 244, 0.55);
  position: relative;
  isolation: isolate;
  margin: 0;
  padding-bottom: 7%;
}

.mock-laptop {
  position: relative;
  width: 86%;
  margin-inline-end: auto;
  perspective: 1700px;
  perspective-origin: 50% 10%;
}

/* The light of the screen: on the night behind the laptop, and on the ground in front of it */
.mock-laptop::before,
.mock-laptop::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  transition: opacity 700ms ease 700ms;
}

.mock-laptop::before {
  inset: -30% -24% -16%;
  background: radial-gradient(ellipse 50% 50% at 50% 45%, color-mix(in srgb, var(--glow) 55%, transparent) 0%, color-mix(in srgb, var(--glow) 32%, transparent) 55%, transparent 88%);
}

.mock-laptop::after {
  left: -12%;
  right: -12%;
  bottom: -16%;
  height: 28%;
  background: radial-gradient(ellipse 50% 50% at 50% 28%, color-mix(in srgb, var(--glow) 55%, transparent) 0%, color-mix(in srgb, var(--glow) 18%, transparent) 45%, transparent 76%);
}

/* The lid: a thin edge of metal, black glass inside it, the camera in the glass, and the
   world's light along its top */
.mock-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 10;
  padding: 1.7% 1.5% 1.4%;
  border: 2px solid transparent;
  border-radius: clamp(10px, 1.1vw, 18px) clamp(10px, 1.1vw, 18px) 4px 4px;
  background: linear-gradient(#050608, #050608) padding-box, linear-gradient(172deg, #b9c6df 0%, #5a637b 9%, #282d3a 42%, #171a22 78%, #3b4357 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 54px 90px -44px rgba(0, 0, 0, 0.95);
  transform-origin: 50% 100%;
  transition: transform 1150ms cubic-bezier(0.2, 0.75, 0.15, 1);
}

.mock-screen::before {
  content: "";
  position: absolute;
  top: max(2px, 0.6%);
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #44557a 0, #0b0e16 62%);
}

.mock-screen::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 7%;
  right: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rim) 28%, rgba(255, 255, 255, 0.9) 52%, var(--rim) 74%, transparent);
}

/* The top of the browser: the address in a pill with its lock (text only, no link) */
.mock-bar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: clamp(15px, 1.5vw, 24px);
  padding: 0 8px;
  border-radius: 2px 2px 0 0;
  background: #14161c;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  direction: ltr;
  transition: opacity 700ms ease 700ms;
}

.mock-host {
  display: flex;
  flex: 0 1 44%;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-width: 0;
  height: 66%;
  padding: 0 0.9em;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.075);
  color: rgba(226, 232, 245, 0.74);
  font-size: clamp(0.5rem, 0.72vw, 0.75rem);
  white-space: nowrap;
}

.mock-host::before {
  content: "";
  flex: none;
  width: 0.62em;
  height: 0.78em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 13'%3E%3Cpath d='M2.6 6V4a2.4 2.4 0 0 1 4.8 0v2' fill='none' stroke='%23c9d2e4' stroke-width='1.4'/%3E%3Crect x='1' y='6' width='8' height='6.6' rx='1.5' fill='%23c9d2e4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mock-view {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #fff;
  container-type: size;
}

.mock-view img {
  display: block;
  width: 100%;
  height: auto;
}

/* Glass: one soft reflection across every screen (::after); and the dark of a screen that is not
   on yet (::before) */
.mock-view::before,
.mock-view::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mock-view::before {
  z-index: 1;
  background: #020306;
  opacity: 0;
  transition: opacity 700ms ease 700ms;
}

.mock-view::after {
  z-index: 2;
  background: linear-gradient(117deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.035) 33%, rgba(255, 255, 255, 0) 33.2%);
}

/* The base: weight, a lit edge, the scoop for the thumb, and its shadow on the ground */
.mock-base {
  position: relative;
  height: clamp(10px, 1.25vw, 18px);
  margin: 0 -7.5%;
  border-radius: 3px 3px 16px 16px / 3px 3px 10px 10px;
  background: linear-gradient(180deg, #96a3bd 0, #4b5468 9%, #272b36 42%, #111319 100%);
  box-shadow: inset 0 1px 0 rgba(222, 232, 252, 0.7);
}

.mock-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 13%;
  height: 40%;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(180deg, #0b0d12, #262b37);
  transform: translateX(-50%);
}

.mock-base::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 2%;
  right: 2%;
  height: 260%;
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 55% at 50% 0, rgba(0, 0, 0, 0.85), transparent 72%);
  pointer-events: none;
}

/* The phone: a thin ring of metal, black glass, the buttons on its sides */
.mock-phone {
  position: absolute;
  bottom: 0;
  inset-inline-start: auto;
  inset-inline-end: 0;
  width: 23%;
  aspect-ratio: 9 / 19.5;
  border: 2px solid transparent;
  border-radius: clamp(14px, 1.9vw, 30px);
  background: linear-gradient(#050608, #050608) padding-box, linear-gradient(165deg, #c6d1e6 0%, #5e677d 13%, #2a2f3b 48%, #1a1d25 80%, #4a536c 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 38px 60px -24px rgba(0, 0, 0, 0.95);
}

.mock .mock-phone { transition: transform 950ms cubic-bezier(0.2, 0.75, 0.15, 1) 500ms, opacity 500ms ease 500ms; }

.mock-phone::before,
.mock-phone::after {
  content: "";
  position: absolute;
  width: 2px;
  background: #5a637b;
}

.mock-phone::before {
  left: -4px;
  top: 19%;
  height: 15%;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(180deg, #5a637b 0 42%, transparent 42% 58%, #5a637b 58% 100%);
}

.mock-phone::after {
  right: -4px;
  top: 27%;
  height: 10%;
  border-radius: 0 2px 2px 0;
}

/* The screen fills the phone inside its glass: no camera island and no dark strip at the top
   (Roei, 2026-10-15: the island covered the top of the sites, their logo and menu; a strip in
   its place was not what he meant either). */
.mock-phone .mock-view {
  position: absolute;
  inset: 2.4% 4.4%;
  border-radius: clamp(10px, 1.55vw, 25px);
}

/* Before the work arrives: the lid closed, the screens and their light off, the phone below its
   place. On the portfolio page until the row first comes into view (portfolio.js, .is-lit); in
   the first service pane whenever the pane is away (it fades out first, then the lid closes
   unseen). Motion stopped: never. */
:is(html.js:not(.no-motion) .case:not(.is-lit), html:not(.no-motion) .deck.is-armed .pane:not(.is-live)) .mock-screen { transform: rotateX(-80deg); transition: transform 0s 700ms; }
:is(html.js:not(.no-motion) .case:not(.is-lit), html:not(.no-motion) .deck.is-armed .pane:not(.is-live)) .mock-bar { opacity: 0; transition: opacity 0s 700ms; }
:is(html.js:not(.no-motion) .case:not(.is-lit), html:not(.no-motion) .deck.is-armed .pane:not(.is-live)) .mock-view::before { opacity: 1; transition: opacity 0s 700ms; }
:is(html.js:not(.no-motion) .case:not(.is-lit), html:not(.no-motion) .deck.is-armed .pane:not(.is-live)) .mock-laptop::before,
:is(html.js:not(.no-motion) .case:not(.is-lit), html:not(.no-motion) .deck.is-armed .pane:not(.is-live)) .mock-laptop::after { opacity: 0; transition: opacity 0s 700ms; }
:is(html.js:not(.no-motion) .case:not(.is-lit), html:not(.no-motion) .deck.is-armed .pane:not(.is-live)) .mock .mock-phone { transform: translate3d(0, 16%, 0); opacity: 0; transition: transform 0s 700ms, opacity 0s 700ms; }

/* The screens run down their site while the row is on the screen; the pointer over it holds it
   still to look. Motion stopped: the top of the site, still. */
@keyframes mock-pan {
  to { transform: translate3d(0, calc(-100% + 100cqh), 0); }
}

html:not(.no-motion) .mock-view img {
  animation: mock-pan 26s cubic-bezier(0.45, 0, 0.55, 1) 1.2s infinite alternate paused;
  will-change: transform;
}

html:not(.no-motion) .mock-phone .mock-view img { animation-duration: 21s; animation-delay: 3s; }


/* In the first service pane: it arrives with the pane, and runs while the pane is on the
   screen (v2.js marks a pane away from it) */
.pane-art--mock { align-self: center; }

.deck.is-armed .pane .mock { transition: opacity 700ms ease, transform 900ms var(--ease-out-strong); }
.deck.is-armed .pane:not(.is-live) .mock { opacity: 0; transform: translate3d(0, 26px, 0); }

html:not(.no-motion) .pane.is-live:not(.is-offscreen) .mock-view img { animation-play-state: running; }

@media (hover: hover) and (pointer: fine) {
  html:not(.no-motion) .pane .mock:hover .mock-view img { animation-play-state: paused; }
}

/* The second pane, online stores: two shops in two phones, one behind the other, and the moment
   a product goes into the cart. On a wide screen this pane is the other way round, so the three
   do not read as three copies. */
@media (min-width: 1001px) {
  .pane:nth-of-type(2) .pane-card { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); }
  .pane:nth-of-type(2) .pane-copy { order: 2; }
}

.pane-art--shop,
.pane-art--flow { align-self: center; }

.shop {
  position: relative;
  width: min(100%, 440px);
  margin-inline: auto;
  aspect-ratio: 1 / 1.04;
}

.shop .mock-phone {
  bottom: auto;
  width: 44%;
}

.shop-front { top: 3%; z-index: 2; inset-inline: auto 16%; }
.shop-back {
  top: 0;
  inset-inline: 16% auto;
  opacity: 0.6;
  transform: rotate(7deg) translate3d(0, 7%, 0);
}

html:not(.no-motion) .shop-back .mock-view img { animation-delay: 6s; }

.shop-toast {
  position: absolute;
  z-index: 3;
  bottom: 8%;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 18px 11px 14px;
  border-radius: 16px;
  background: rgba(10, 16, 36, 0.92);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.3), 0 22px 40px -18px rgba(0, 0, 0, 0.9);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
  text-shadow: none;
}

.shop-toast i {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cyan);
}

.shop-toast i::after {
  content: "";
  position: absolute;
  top: 44%;
  left: 50%;
  width: 6px;
  height: 11px;
  border: solid var(--ink);
  border-width: 0 2.4px 2.4px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.deck.is-armed .pane .shop-toast { transition: opacity 500ms ease 1300ms, transform 700ms var(--ease-out-strong) 1300ms; }
.deck.is-armed .pane:not(.is-live) .shop-toast { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.94); }
.deck.is-armed .pane .shop { transition: opacity 700ms ease, transform 900ms var(--ease-out-strong); }
.deck.is-armed .pane:not(.is-live) .shop { opacity: 0; transform: translate3d(0, 26px, 0); }

/* The third pane, AI and automations: a question and its answer, and the line of light that
   carries the answer on to the systems behind it. The point of light runs down the lines while
   the pane is on the screen; motion stopped, the lines simply stand there. */
.flow {
  width: min(100%, 480px);
  margin-inline: auto;
}

.flow-chat {
  display: grid;
  gap: 10px;
  padding: clamp(14px, 1.6vw, 20px);
  border-radius: 20px;
  background: rgba(7, 11, 26, 0.6);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.18);
}

.flow-q,
.flow-a {
  max-width: 84%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.9375rem;
  line-height: 1.45;
  text-shadow: none;
}

.flow-q {
  justify-self: start;
  border-start-start-radius: 4px;
  background: rgba(194, 205, 232, 0.13);
  color: var(--text);
}

.flow-a {
  justify-self: end;
  border-start-end-radius: 4px;
  background: var(--cyan-hi);
  color: var(--ink);
  font-weight: 600;
}

.flow-lines {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.flow-line,
.flow-run {
  fill: none;
  stroke-linecap: round;
}

.flow-line {
  stroke: rgba(125, 240, 244, 0.34);
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.flow-run {
  stroke: #e6fdff;
  stroke-width: 4;
  stroke-dasharray: 0.001 2;
  stroke-dashoffset: 0.001;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(125, 240, 244, 0.95));
}

@keyframes flow-run {
  0% { stroke-dashoffset: 0.001; opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}

html:not(.no-motion) .flow-run { animation: flow-run 2.8s cubic-bezier(0.45, 0, 0.35, 1) infinite paused; }
html:not(.no-motion) .flow-run:nth-of-type(5) { animation-delay: 0.5s; }
html:not(.no-motion) .flow-run:nth-of-type(6) { animation-delay: 1s; }
html:not(.no-motion) .pane.is-live:not(.is-offscreen) .flow-run { animation-play-state: running; }

.flow-nodes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-nodes li {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 14px;
  background: rgba(10, 16, 36, 0.86);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.22);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--text-mid);
  text-shadow: none;
}

.flow-nodes svg {
  width: 20px;
  height: 20px;
  fill: var(--cyan-hi);
}

.flow-nodes b {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--cyan-hi);
}

/* It arrives in order: the question, the answer, the lines, the systems */
.deck.is-armed .pane .flow-q,
.deck.is-armed .pane .flow-a,
.deck.is-armed .pane .flow-nodes li { transition: opacity 500ms ease, transform 700ms var(--ease-out-strong); }
.deck.is-armed .pane .flow-a { transition-delay: 600ms; }
.deck.is-armed .pane .flow-nodes li { transition-delay: 1400ms; }
.deck.is-armed .pane .flow-line { transition: stroke-dashoffset 900ms var(--ease-out-strong) 1000ms; }
.deck.is-armed .pane:not(.is-live) :is(.flow-q, .flow-a, .flow-nodes li) { opacity: 0; transform: translate3d(0, 12px, 0); }
.deck.is-armed .pane:not(.is-live) .flow-line { stroke-dashoffset: 1; }

.no-motion :is(.shop, .shop-toast, .flow-q, .flow-a, .flow-nodes li) { transition: none; }
.no-motion .flow-line { transition: none; }

/* The colour modes of the accessibility menu and the system's forced colours: plain outlines,
   still screens */
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.mock-screen, .mock-phone) { box-shadow: none; outline: 2px solid currentColor; outline-offset: -2px; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .mock-view img { animation: none !important; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.mock-laptop, .mock-base, .mock-view, .mock-screen, .mock-phone, .plan)::before,
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.mock-laptop, .mock-base, .mock-view, .mock-screen, .mock-phone, .plan)::after { display: none; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .flow-run { display: none; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.shop-toast, .flow-chat, .flow-nodes li, .flow-q, .flow-a) { box-shadow: none; outline: 2px solid currentColor; outline-offset: -2px; }

@media (forced-colors: active) {
  .mock-screen,
  .mock-phone { border: 1px solid CanvasText; }
  .mock-view img { animation: none !important; }
  :is(.mock-laptop, .mock-base, .mock-view, .mock-screen, .mock-phone, .plan)::before,
  :is(.mock-laptop, .mock-base, .mock-view, .mock-screen, .mock-phone, .plan)::after { display: none; }
  .flow-run { display: none; }
  .shop-toast,
  .flow-chat,
  .flow-nodes li { border: 1px solid CanvasText; }
}

/* --- 5. The route ---------------------------------------------------------------------------
   Without the script, or with reduced motion: a title and four numbered steps.
   With it (.proc-live): a stage that stays on screen while the page scrolls. A line of light is
   drawn across it, the bird flies on its head, and the four steps take turns. */

.process {
  position: relative;
  padding: 6vh var(--pad) 12vh;
}

.proc-stage {
  position: relative;
  z-index: 3;
}

.proc-title { font-size: clamp(2rem, 4.6vw, 4.75rem); }

.proc-svg,
.proc-dots { display: none; }

.proc-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 60px);
  margin: clamp(28px, 6vh, 64px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.pstep {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  counter-increment: step;
}

/* The steps are a real sequence, so they are numbered */
.pstep::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cyan-hi);
}

.pstep h3 {
  display: block;
  margin: 4px 0 10px;
  font-size: clamp(1.5rem, 2.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.pstep p {
  max-width: 30em;
  margin: 0;
  font-weight: 300;
  color: var(--text-mid);
  text-wrap: pretty;
}

.proc-note {
  max-width: 34em;
  margin: clamp(24px, 5vh, 48px) 0 0;
  font-weight: 600;
  text-wrap: pretty;
}

.proc-live .process {
  height: 330vh;
  padding: 0;
}

.proc-live .proc-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}

.proc-live .proc-title {
  position: absolute;
  inset-inline-start: var(--pad);
  top: clamp(88px, 14vh, 140px);
  max-width: min(60%, 13em);
}

.proc-live .proc-svg,
.proc-live .proc-dots {
  position: absolute;
  top: 28%;
  left: var(--pad);
  display: block;
  width: calc(100% - var(--pad) * 2);
  height: 40%;
}

.proc-svg { overflow: visible; }

.proc-svg path {
  fill: none;
  stroke-linecap: round;
}

.proc-rail {
  stroke: rgba(194, 205, 232, 0.3);
  stroke-width: 1.5;
  stroke-dasharray: 1 10;
}

/* The glow is a second, wider stroke: a blur filter here would be redrawn on every scroll frame */
.proc-glow {
  stroke: rgba(0, 196, 204, 0.2);
  stroke-width: 12;
}

.proc-draw {
  stroke: var(--cyan-hi);
  stroke-width: 2.5;
}

.proc-dots i {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 0 0 1.5px rgba(194, 205, 232, 0.7);
  transition: background-color 300ms ease, box-shadow 300ms ease, transform 420ms var(--ease-out-strong);
}

.proc-dots i.is-on {
  background: #e9fdff;
  box-shadow: 0 0 0 6px rgba(125, 240, 244, 0.24);
  transform: scale(1.15);
}

/* The thread from the point the line has just reached down to the words of its step, ending in an
   arrow over the step's number. v2.js lays it out in the pixels of the stage and draws it in.
   It is a trail of points of light in their own glow (#leadGlow), like the part of the route
   not yet reached, ending in a small solid arrow; the points come on one after another (a mask
   drawn along the path, #leadReveal). Roei chose it from four looks on 2026-10-16; before it, a
   hard dark strip under a line read as a black outline, and a glowing line did not please. */
.proc-lead { display: none; }

.proc-live .proc-lead {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.proc-lead path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.proc-lead-reveal {
  stroke: #fff;
  stroke-width: 16;
}

.proc-lead-line {
  stroke: #c9fbfd;
  stroke-width: 3.2;
  stroke-dasharray: 0 9;
}

.proc-lead .proc-lead-head {
  fill: #c9fbfd;
  stroke: #c9fbfd;
  stroke-width: 2.4;
}

/* The four steps share one place; only the step of the moment is there */
.proc-live .proc-steps {
  position: absolute;
  inset-inline-start: var(--pad);
  bottom: clamp(28px, 6vh, 64px);
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: min(44rem, calc(100% - var(--pad) * 2));
  margin: 0;
}

.proc-live .pstep {
  grid-area: 1 / 1;
  align-self: end;
  padding-top: 0;
  border-top: 0;
  transition: opacity 420ms ease 120ms, transform 640ms var(--ease-expo) 120ms, visibility 0s;
}

.proc-live .pstep.is-off {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 18px, 0);
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}

.proc-live .pstep h3 { font-size: clamp(2rem, 4.6vw, 4.75rem); line-height: 1.02; }
.proc-live .pstep p { font-size: clamp(1.0625rem, 1.35vw, 1.3125rem); }

.proc-live .proc-note {
  position: absolute;
  inset-inline-end: var(--pad);
  bottom: 100px;
  max-width: 17em;
  margin: 0;
  font-weight: 300;
  color: var(--text-mid);
}

/* --- 6. Work: windows onto the sites ----------------------------------------------------------
   Every project is a window that shows its whole page, at close to the size it was captured.
   By default the row is a strip that is swiped or scrolled sideways. On a wide screen v2.js
   holds the stage (.work-live) and the row travels past as the page scrolls. The window whose
   turn it is scrolls slowly down its own page. */

.work {
  --win: clamp(250px, 25vw, 380px);   /* the width of one window */
  --gap: clamp(18px, 2.6vw, 44px);
  position: relative;
  padding: 12vh 0;
  overflow-x: clip;   /* the row is wider than the page; it must not widen it */
  background: var(--veil);   /* the captions under the windows are read against the beams of light */
}

.work-stage {
  position: relative;
  z-index: 3;
}

.work-head { padding-inline: var(--pad); }

/* The way to the whole portfolio. While the stage is held (a wide screen) it stands on the other
   side of the line under the title, so it adds no height to the stage, which is measured to the
   screen; otherwise it is a line of its own under the title */
.work-head { position: relative; }
.work-all { margin: calc(-1 * clamp(10px, 2.6vh, 28px)) 0 clamp(12px, 2.4vh, 22px); }
.work-live .work-all {
  position: absolute;
  inset-inline-end: var(--pad);
  bottom: clamp(2px, 2.4vh, 12px);
  margin: 0;
}

.work-title {
  margin: 0;
  font-size: clamp(3.25rem, 9vw, 9.5rem);
  font-weight: 200;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--title-thin);
}

.work-sub {
  margin: 12px 0 clamp(22px, 4.6vh, 48px);
  font-size: clamp(1.0625rem, 1.3vw, 1.3125rem);
  font-weight: 300;
  color: var(--text);   /* full white: beams of light cross the sky right behind this line */
}

.sites {
  --view-h: clamp(300px, 52vh, 520px);
  position: relative;
  display: flex;
  gap: var(--gap);
  margin: 0;
  padding: 10px var(--pad) 26px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  scrollbar-width: thin;
}

.site {
  position: relative;
  flex: none;
  width: var(--win);
  scroll-snap-align: start;
}

.site-win {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--c-navy-850);
  box-shadow: 0 0 0 1px rgba(194, 205, 232, 0.24), 0 34px 70px -34px rgba(0, 0, 0, 0.85);
  transition: transform 620ms var(--ease-expo);
}

/* The top of a browser window: three points and the address */
.site-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 34px;
  padding: 0 14px;
  background: var(--c-navy-800);
  direction: ltr;
}

.site-dots {
  display: flex;
  flex: none;
  gap: 5px;
}

.site-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(194, 205, 232, 0.42);
}

.site-host {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding-inline-end: 31px;   /* the width of the points, so the address sits in the middle */
  font-size: 0.8125rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-low);
}

.site-view {
  height: var(--view-h);
  overflow: hidden;
}

.site-view img {
  display: block;
  width: 100%;
  height: auto;
}

.site-name {
  margin: 16px 0 2px;
  font-size: clamp(1.25rem, 1.7vw, 1.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.site-type {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-mid);
}

.site-name { transition: color 400ms ease; }

/* The last window: the door to the whole portfolio, a window like the others at the end of the
   row (Roei, 2026-10-15), so the row's travel ends on it and lights it. The whole window is the
   link. Inside it, the rest of the work goes by out of focus, behind night glass (the tops of
   the ten works the row does not show, one small picture that repeats: more-wall.webp, made in
   headless Chrome); the button of light stands sharp in the middle. A picture of the portfolio
   page itself was here first; stitched from screens, its sky repeated, and he asked for
   something else ("BLUR כהה על מה שרץ ושהפוקוס יהיה על הכפתור"). */
.site-more {
  display: block;
  color: inherit;
  text-decoration: none;
}

.site-more .site-win,
.site-more .site-view,
.site-more .site-name,
.site-more .site-type { display: block; }

.site-more .site-bar { display: flex; }

.more-view { position: relative; }

.more-wall { display: block; }

.more-wall img {
  display: block;
  width: 100%;
  height: auto;
}

/* The glass: darkest in the middle, under the button, and at the top and foot of the window */
.more-view::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(ellipse 66% 40% at 50% 50%, rgba(7, 11, 26, 0.9) 0%, rgba(7, 11, 26, 0.74) 62%, rgba(7, 11, 26, 0.6) 100%),
    linear-gradient(180deg, rgba(7, 11, 26, 0.45), rgba(7, 11, 26, 0) 24%, rgba(7, 11, 26, 0) 76%, rgba(7, 11, 26, 0.55));
  transition: opacity 400ms ease;
}

@keyframes more-drift {
  to { transform: translate3d(0, -50%, 0); }
}

html:not(.no-motion) .work.is-near .more-wall { animation: more-drift 36s linear infinite; }
html:not(.no-motion) .site-view .more-wall img { animation: none; }

/* Under the pointer the glass clears a little: a look at what is behind the door */
@media (hover: hover) and (pointer: fine) {
  .site-more:hover .more-view::after { opacity: 0.8; }
}

.more-go {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--r-btn, 14px);
  background: var(--cyan-hi);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: none;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.8), 0 0 28px -6px rgba(34, 211, 238, 0.7), 0 0 70px -10px rgba(125, 240, 244, 0.45);
  transform: translate(-50%, -50%);
  transition: background-color 250ms ease;
}

.more-go::after {
  content: "";
  width: 8px;
  height: 8px;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  .site-more:hover .more-go { background-color: #b9f6f9; }
}

.site-more:focus-visible { outline: none; }
.site-more:focus-visible .site-win { outline: 3px solid var(--cyan-hi); outline-offset: 4px; }

/* The page scrolls down its window and back, slowly. Only one window does it at a time, and
   none while the section is away from the screen (v2.js marks .is-near and .is-active). */
@keyframes site-pan {
  to { transform: translate3d(0, calc(-100% + var(--view-h)), 0); }
}

html:not(.no-motion) .site-view img { animation: site-pan 18s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate paused; }
html:not(.no-motion) .work.is-near .site.is-active .site-view img { animation-play-state: running; }

@media (hover: hover) and (pointer: fine) {
  html:not(.no-motion) .work.is-near .site:hover .site-view img { animation-play-state: running; }
}

.work-bar { display: none; }

/* The held stage */
/* One screen, and half the distance the row of nine windows has to travel (the first eight of
   the portfolio and the way to all of it). The height is here and not set by the script, so
   that it is right in the very first layout. */
.work-live .work {
  height: max(100vh, calc(100vh + 0.5 * (9 * var(--win) + 8 * var(--gap) + 2 * var(--pad) - 100vw)));
  padding: 0;
}

.work-live .work-stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  height: 100svh;
  padding-top: 76px;
}

.work-live .work-title { font-size: clamp(2.75rem, 6vw, 6rem); }
.work-live .work-sub { margin-bottom: clamp(12px, 2.4vh, 22px); }

.work-live .sites {
  --view-h: clamp(250px, 46vh, 520px);
  padding-block: 10px 20px;
  overflow: visible;
  scroll-snap-type: none;
  will-change: transform;
}

/* The windows wait a step back, in shade; the one whose turn it is comes forward, lit. The
   shade is a layer over the window, not a see-through window: the sky must not show through. */
.work-live .site-win {
  transform: scale(0.95);
  transform-origin: 50% 58%;
}

.work-live .site-win::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 11, 26, 0.6);
  pointer-events: none;
  transition: opacity 400ms ease;
}

/* The caption of a waiting window steps back in colour, not in opacity: it stays readable */
.work-live .site:not(.is-active) .site-name { color: var(--text-mid); }

.work-live .site.is-active .site-win { transform: none; }

/* The light round the window whose turn it is. It is a picture of its own behind the window,
   drawn once and faded in and out: a glow this wide, changed on the window itself, would be
   drawn again on every frame of the change, sixteen times along the row. */
.work-live .site::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(34px + var(--view-h));
  border-radius: 16px;
  box-shadow: 0 0 0 1.5px rgba(125, 240, 244, 0.85), 0 0 64px -8px rgba(0, 196, 204, 0.5);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.work-live .site.is-active::before { opacity: 1; }

.work-live .site.is-active .site-win::after { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  .work-live .site:hover .site-win::after { opacity: 0; }
  .work-live .site:hover .site-name { color: var(--text); }
}

/* How far along the row the page is */
.work-live .work-bar {
  display: block;
  height: 1px;
  margin: clamp(10px, 2.4vh, 26px) var(--pad) 0;
  background: var(--line);
}

.work-bar i {
  display: block;
  height: 100%;
  background: var(--cyan-hi);
  transform: scaleX(0);
  transform-origin: 100% 50%;   /* the page reads from the right */
}

/* --- 7. Clients: one voice at a time, each with a face ------------------------------------------
   Two reviews from Google and four testimonials of the site. By default the clients are tabs. On a screen tall enough v2.js holds the stage (.talk-live)
   and scrolling changes the voice. */

.voices {
  position: relative;
  padding: 10vh var(--pad) 12vh;
  background: var(--veil);
  text-align: center;
}

.v-stage {
  position: relative;
  z-index: 3;
}

.v-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  margin: clamp(10px, 2vh, 18px) 0 0;
  font-size: 1.0625rem;
  color: var(--text-mid);
}

.v-score b {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}

.v-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--cyan-hi);
}

.v-stars svg {
  width: 18px;
  height: 18px;
}

/* Every voice lies in the same place, so the page does not jump when the voice changes */
.vq {
  display: grid;
  max-width: 58rem;
  margin: clamp(22px, 5vh, 52px) auto 0;
}

.vquote {
  grid-area: 1 / 1;
  align-self: center;
  margin: 0;
  transition: opacity 460ms ease 140ms, transform 700ms var(--ease-expo) 140ms, visibility 0s;
}

.vquote[hidden] {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.vquote blockquote { margin: 0; }

.vquote blockquote p {
  margin: 0;
  font-weight: 300;
  line-height: 1.36;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.vquote blockquote p + p { margin-top: 0.55em; }

/* A review is shown whole, so the size of the type follows its length */
.vquote--s blockquote p { font-size: clamp(1.5rem, 2.7vw, 2.75rem); line-height: 1.26; }
.vquote--m blockquote p { font-size: clamp(1.25rem, 2vw, 2.0625rem); }
.vquote--l blockquote p { font-size: clamp(1.125rem, 1.56vw, 1.5625rem); }
.vquote--xl blockquote p { font-size: clamp(1.0625rem, 1.36vw, 1.375rem); line-height: 1.44; }

.vquote figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(16px, 3vh, 30px);
  text-align: start;
}

/* The face of the person speaking */
.v-face {
  display: block;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.v-who {
  display: grid;
  line-height: 1.3;
}

.v-who b { font-weight: 800; }

.v-who span {
  font-size: 0.9375rem;
  color: var(--text-mid);
}

/* The clients, as points on an arc of light. The one who is speaking steps forward. */
.varc {
  position: relative;
  width: min(100%, 60rem);
  height: clamp(112px, 14vw, 176px);
  margin: clamp(22px, 4.4vh, 46px) auto 0;
}

.varc-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.varc-line path {
  fill: none;
  stroke: rgba(125, 240, 244, 0.55);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.vtab {
  position: absolute;
  width: clamp(46px, 5.2vw, 72px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-navy-800);
  box-shadow: 0 0 0 1.5px rgba(194, 205, 232, 0.5);
  opacity: 0.7;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 420ms var(--ease-out-strong), box-shadow 260ms ease, opacity 260ms ease;
}

/* The page reads from the right, so the first client is at the right end of the arc */
.vtab:nth-of-type(1) { left: 91.67%; top: 67.3%; }
.vtab:nth-of-type(2) { left: 75%; top: 34.4%; }
.vtab:nth-of-type(3) { left: 58.33%; top: 17.9%; }
.vtab:nth-of-type(4) { left: 41.67%; top: 17.9%; }
.vtab:nth-of-type(5) { left: 25%; top: 34.4%; }
.vtab:nth-of-type(6) { left: 8.33%; top: 67.3%; }

.vtab .v-face {
  width: 100%;
  height: 100%;
}

.vtab.is-on {
  opacity: 1;
  box-shadow: 0 0 0 2.5px #e9fdff, 0 0 26px 5px rgba(0, 196, 204, 0.6);
  transform: translate(-50%, -50%) scale(1.34);
}

@media (hover: hover) and (pointer: fine) {
  .vtab:not(.is-on):hover { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.voices-more {
  align-self: center;
  margin-top: clamp(10px, 2.4vh, 22px);
}

/* The held stage */
.talk-live .voices {
  height: 320vh;
  padding: 0;
}

.talk-live .v-stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  height: 100svh;
  padding: 84px var(--pad) 22px;
}

.talk-live .vq { margin-top: clamp(14px, 3vh, 34px); }
.talk-live .varc { margin-top: clamp(14px, 3vh, 34px); }

/* --- 8. Hosting and maintenance -------------------------------------------------------------
   Three packages, each on a quiet pane of its own, so that the small type is read against the
   pane and not against the sky and the birds; the sky of the whole section is a little deeper. The package that
   carries more stands taller; in its list, what the package below it does not have is marked. */

.hosting {
  position: relative;
  padding: 12vh var(--pad) 14vh;
  background: var(--veil);
}

.hosting .sec-title,
.hosting .sec-sub,
.plans,
.fine {
  position: relative;
  z-index: 3;
}

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(16px, 2vw, 30px);
  margin: clamp(30px, 6vh, 64px) 0 0;
  padding: 0;
  list-style: none;
}

.plan {
  padding: clamp(20px, 2.4vw, 36px);
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(25, 36, 76, 0.9) 0%, rgba(12, 18, 40, 0.93) 60%, rgba(8, 12, 29, 0.95) 100%);
  box-shadow: inset 0 0 0 1px rgba(194, 205, 232, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 80px -44px rgba(0, 0, 0, 0.8);
}

.plan {
  display: flex;
  flex-direction: column;
}

.plan--top { box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 40px 80px -44px rgba(0, 0, 0, 0.8); }

/* The name is written in English, and still starts where the page starts */
.plan-name {
  margin: 0;
  font-size: clamp(1.5rem, 2.1vw, 2.125rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-align: right;
}

.plan-what {
  margin: 8px 0 0;
  line-height: 1.5;
  color: var(--text-mid);
  text-wrap: pretty;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: clamp(14px, 2.6vh, 26px) 0 clamp(14px, 2.6vh, 26px);
}

.plan-price b {
  font-size: clamp(3.75rem, 6.6vw, 7rem);
  font-weight: 200;
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--cyan-hi);
}

.plan-price span {
  font-size: 1rem;
  line-height: 1.3;
  color: var(--text-mid);
}

.plan-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-list { margin-bottom: 24px; }

.plan-list li {
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-mid);
}

/* What this package adds to the one below it. In the first package everything is its own. */
.plan:first-child .plan-list li,
.plan-list li.is-new { color: var(--text); }

.plan-list li.is-new::before {
  content: "+";
  margin-inline-end: 8px;
  font-weight: 800;
  color: var(--cyan-hi);
}

.plan-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 48px;
  margin-top: auto;
  padding: 0 30px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-btn-sm);
  box-shadow: inset 0 0 0 1.5px rgba(242, 246, 255, 0.5);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  transition: background-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 160ms var(--ease-out-strong);
}

.plan--top .plan-cta {
  background: var(--cyan);
  box-shadow: none;
  color: var(--ink);
}

.plan-cta:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .plan-cta:hover {
    box-shadow: none;
    color: var(--ink);
    transition: box-shadow 180ms ease, color 120ms ease 140ms;
  }

  .plan--top .plan-cta:hover { background: var(--c-cyan-400); }
}

/* The packages land, one after the other (v2.js, initPlans; Roei, 2026-10-16): out of the sky,
   a little smaller and see-through, onto their steps, with the smallest settle at the end. Where
   one touches down, a line of light runs out from its middle along its foot, like the horizon
   catching it. Then the lines with a "+" (what it adds to the package below) light up one after
   the other, and Gold is circled once by the point of light of the service panes. Without the
   script, with the motion stopped, or for packages already there, all of it simply stands. */
.plan { position: relative; }

.plan::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 12%;
  right: 12%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(125, 240, 244, 0), rgba(125, 240, 244, 0.85) 30%, #fff 50%, rgba(125, 240, 244, 0.85) 70%, rgba(125, 240, 244, 0));
  box-shadow: 0 0 18px 2px rgba(125, 240, 244, 0.45);
  opacity: 0;
  pointer-events: none;
}

html:not(.no-motion) .plans.is-armed .plan {
  transition: opacity 700ms ease, transform 1050ms cubic-bezier(0.2, 1.12, 0.35, 1);
}

html:not(.no-motion) .plans.is-armed .plan:not(.is-in) {
  opacity: 0;
  transform: translate3d(0, -56px, 0) scale(0.97);
}

@keyframes plan-touch {
  0% { opacity: 0; transform: scaleX(0.15); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scaleX(1.06); }
}

html:not(.no-motion) .plans.is-armed .plan.is-in::before { animation: plan-touch 1000ms cubic-bezier(0.2, 0.7, 0.2, 1) 560ms 1 both; }

/* what it adds, line by line, after it has landed */
html:not(.no-motion) .plans.is-armed .plan-list li.is-new { transition: color 500ms ease calc(1050ms + var(--k, 0) * 170ms); }

html:not(.no-motion) .plans.is-armed .plan-list li.is-new::before {
  display: inline-block;
  transition: opacity 400ms ease calc(1050ms + var(--k, 0) * 170ms), transform 600ms cubic-bezier(0.2, 1.6, 0.4, 1) calc(1050ms + var(--k, 0) * 170ms);
}

html:not(.no-motion) .plans.is-armed .plan:not(.is-in) .plan-list li.is-new { color: var(--text-mid); }
html:not(.no-motion) .plans.is-armed .plan:not(.is-in) .plan-list li.is-new::before { opacity: 0.15; transform: scale(0.4); }

@keyframes plan-plus {
  0%, 100% { text-shadow: 0 0 0 rgba(125, 240, 244, 0); }
  40% { text-shadow: 0 0 14px rgba(125, 240, 244, 0.95); }
}

html:not(.no-motion) .plans.is-armed .plan.is-in .plan-list li.is-new::before { animation: plan-plus 1100ms ease calc(1050ms + var(--k, 0) * 170ms) 1 both; }

/* Gold: the point of light goes round it once, when the lines of its own have lit */
html:not(.no-motion) .plans.is-armed .plan--top.is-in::after { animation: pane-orbit 2600ms cubic-bezier(0.45, 0, 0.25, 1) 1300ms 1 both; }

/* The line that offers help with the choice, and the small print, after the last one */
html:not(.no-motion) .plans.is-armed ~ :is(.plans-help, .fine) { transition: opacity 800ms ease; }
html:not(.no-motion) .plans.is-armed:not(.is-landed) ~ :is(.plans-help, .fine) { opacity: 0; }

.plans-help {
  position: relative;
  z-index: 3;
  margin: clamp(22px, 4vh, 36px) 0 0;
  font-size: 1.0625rem;
  color: var(--text-mid);
}

.plans-help .text-link { font-weight: 700; }

@media (max-width: 1000px) {
  html:not(.no-motion) .plans.is-armed .plan:not(.is-in) { transform: translate3d(0, -34px, 0) scale(0.98); }
}

/* Under the packages, the small print as small print: running text under a hairline, and the
   rest behind a small disclosure. Not a fourth pane. */
.fine {
  max-width: 64em;
  margin-top: clamp(24px, 4.4vh, 44px);
  padding-top: clamp(16px, 2.6vh, 24px);
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-mid);
  text-wrap: pretty;
}

.fine p { margin: 0; }
.fine p + p { margin-top: 6px; }

.fine b {
  font-weight: 700;
  color: var(--text);
}

.fine-more { margin-top: 2px; }

.fine-more summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 700;
  color: var(--cyan-hi);
  list-style: none;
  cursor: pointer;
}

.fine-more summary::-webkit-details-marker { display: none; }

/* A plus that turns into a cross when the rest is open */
.fine-more summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 2px 100% no-repeat;
  transition: transform 260ms var(--ease-out-strong);
}

.fine-more[open] summary::after { transform: rotate(45deg); }

@media (hover: hover) and (pointer: fine) {
  .fine-more summary:hover { color: #fff; }
}

/* --- 9. Digital business cards: a hand of three ------------------------------------------- */

.cards {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  padding: 10vh var(--pad) 14vh;
  background: var(--veil);
}

.cards-copy,
.fan {
  position: relative;
  z-index: 3;
}

.cards .sec-title { font-size: clamp(1.875rem, 3.5vw, 3.625rem); }
.cards .text-link { margin-top: clamp(10px, 2vh, 20px); }

.fan { height: clamp(330px, 40vw, 580px); }

/* Each card turns about a point below it, as cards do in a hand */
.fan-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: 90%;
  border-radius: clamp(16px, 1.9vw, 28px);
  box-shadow: 0 0 0 1px rgba(125, 240, 244, 0.18), 0 36px 60px -30px rgba(0, 0, 0, 0.85);
  transform-origin: 50% 125%;
  transition: transform 1000ms var(--ease-expo);
}

.fan-card--a { transform: translate(-50%, -50%) rotate(15deg); }
.fan-card--b { z-index: 1; transform: translate(-50%, -50%); }
.fan-card--c { transform: translate(-50%, -50%) rotate(-15deg); }

/* Closed until it is seen (v2.js marks it), then the hand opens */
html.is-open:not(.no-motion) .fan:not(.is-in) .fan-card { transform: translate(-50%, -46%) scale(0.94); }
html:not(.no-motion) .fan-card--a { transition-delay: 80ms; }
html:not(.no-motion) .fan-card--c { transition-delay: 160ms; }

@media (hover: hover) and (pointer: fine) {
  html:not(.no-motion) .cards:hover .fan.is-in .fan-card { transition-duration: 600ms; transition-delay: 0s; }
  html:not(.no-motion) .cards:hover .fan.is-in .fan-card--a { transform: translate(-50%, -50%) rotate(21deg); }
  html:not(.no-motion) .cards:hover .fan.is-in .fan-card--b { transform: translate(-50%, -53%); }
  html:not(.no-motion) .cards:hover .fan.is-in .fan-card--c { transform: translate(-50%, -50%) rotate(-21deg); }
}

/* --- 10. Guides and articles ------------------------------------------------------------------
   Reading of their own, apart from the questions: a title and a row of articles that slides,
   each a pane of the page's glass with the article's picture, title and opening lines, a whole
   link to its article (on the current site until the site has pages for them). Three to a wide
   screen, two and a bit to a tablet, one and a bit to a phone; round arrows at the sides while
   there are more than fit (v2.js). */

.reads {
  position: relative;
  padding: 12vh var(--pad) 2vh;
  background: var(--veil);
}

/* The title and the way to all the articles keep to the side the text reads from: the other
   side of the sky stays open for the bird */
.reads-head {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: start;
  gap: 6px;
}

.reads .sec-title { font-size: clamp(2rem, 3.7vw, 3.875rem); }

.reads-rail {
  --per: 3;
  --gap-r: 18px;
  position: relative;
  z-index: 3;
  margin: clamp(24px, 5vh, 44px) 0 0;
}

.reads-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap-r)) / var(--per));
  gap: var(--gap-r);
  margin: 0;
  padding: 4px 2px 28px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}

.reads-list::-webkit-scrollbar { display: none; }

.reads-item {
  display: flex;
  scroll-snap-align: start;
}

/* (positioned, so the words for a screen reader that v2.js adds to the link stay inside the row:
   placed by the rail, outside the row's scrolling, they widened the page on a phone)
   Its shadow stays short, inside the row's own margin: the row scrolls, so it cuts whatever
   falls outside it, and the long soft shadow of the other panes was cut into a dark box with a
   hard edge round the cards (Roei saw it on his phone, 2026-10-16). */
.read {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 12px 12px 24px;
  border-radius: 24px;
  background: linear-gradient(158deg, rgba(28, 40, 82, 0.88) 0%, rgba(13, 20, 44, 0.92) 62%, rgba(9, 14, 33, 0.94) 100%);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 24px -18px rgba(0, 0, 0, 0.7);
  color: var(--text);
  text-decoration: none;
  text-shadow: none;
  transition: box-shadow 200ms ease;
}

/* The article's own picture, with the badge of its kind on it once the articles have kinds */
.read-pic {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 15px;
  background: #0b1022;
}

.read-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out-strong);
}

.read-cat {
  position: absolute;
  bottom: 10px;
  inset-inline-end: 10px;
  padding: 5px 11px;
  border-radius: 9px;
  background: rgba(7, 11, 26, 0.82);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.38);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cyan-hi);
}

.read-cat[hidden] { display: none; }

.read-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 20px 10px 0;
}

/* The title in two lines at most, the opening in three */
.read-title,
.read-ex {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.read-title {
  -webkit-line-clamp: 2;
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
  font-weight: 800;
  line-height: 1.35;
}

.read-ex {
  -webkit-line-clamp: 3;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-mid);
}

/* The way in: the word and a round of light with an arrow that points on, to the left */
.read-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--cyan-hi);
}

.read-more i {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: background-color 250ms ease, color 250ms ease, transform 300ms var(--ease-out-strong);
}

.read-more i::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-35%, -50%) rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  .read:hover { box-shadow: inset 0 0 0 1px var(--cyan-hi), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 24px -18px rgba(0, 0, 0, 0.7); }
  .read:hover .read-pic img { transform: scale(1.045); }
  .read:hover .read-more i { background-color: var(--cyan-hi); color: var(--ink); transform: translate3d(-3px, 0, 0); }
}

.read:focus-visible { outline: 3px solid var(--cyan-hi); outline-offset: 3px; }

/* The arrows at the sides: rounds of night glass over the pictures, the one on the right going
   back to the start of the row, the one on the left on (the row reads from the right) */
.reads-nav {
  position: absolute;
  top: calc(16px + var(--pic-h, 120px) / 2);   /* the middle of the pictures (v2.js measures them) */
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(7, 11, 26, 0.78);
  box-shadow: inset 0 0 0 1.5px rgba(242, 246, 255, 0.55), 0 14px 30px -12px rgba(0, 0, 0, 0.8);
  color: var(--text);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 250ms ease, box-shadow 200ms ease, color 200ms ease;
}

.reads-nav[hidden] { display: none; }

.reads-nav::before {
  content: "";
  width: 10px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.reads-nav--back { inset-inline-start: -22px; }
.reads-nav--back::before { margin-inline-start: 4px; transform: rotate(-135deg); }
.reads-nav--on { inset-inline-end: -22px; }
.reads-nav--on::before { margin-inline-end: 4px; transform: rotate(45deg); }

.reads-nav:disabled { opacity: 0.35; cursor: default; }

@media (hover: hover) and (pointer: fine) {
  .reads-nav:not(:disabled):hover { box-shadow: inset 0 0 0 1.5px var(--cyan-hi), 0 14px 30px -12px rgba(0, 0, 0, 0.8); color: var(--cyan-hi); }
}

.reads-nav:focus-visible { outline: 3px solid var(--cyan-hi); outline-offset: 3px; }

/* Where the row runs past the screen it runs to the edges of the screen: the card that peeks in
   from the left was cut by a line in the air at the margin of the page (2026-10-16). The first
   card still starts at the margin, and a card stops there. */
@media (max-width: 1000px) {
  .reads-rail { --per: 2.15; }

  .reads-list {
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    scroll-padding-inline: var(--pad);
  }
}

@media (max-width: 640px) {
  .reads-rail { --per: 1.15; --gap-r: 14px; }
  .reads-nav { width: 44px; height: 44px; }
  .reads-nav--back { inset-inline-start: -8px; }
  .reads-nav--on { inset-inline-end: -8px; }
}

/* --- 11. Questions ------------------------------------------------------------------------------ */

.faq {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(24px, 5vw, 90px);
  padding: 12vh var(--pad) 12vh;
  background: var(--veil);
}

.faq-side {
  position: sticky;
  top: 108px;
  z-index: 3;
}

.faq-list {
  position: relative;
  z-index: 3;
}

.faq .sec-title { font-size: clamp(2rem, 3.7vw, 3.875rem); }

.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa[open] { border-top-color: rgba(125, 240, 244, 0.75); }

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 68px;
  padding: 14px 0;
  font-size: clamp(1.125rem, 1.5vw, 1.4375rem);
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.qa summary::-webkit-details-marker { display: none; }

.qa summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin: 0 6px 5px;
  border-right: 2px solid var(--cyan-hi);
  border-bottom: 2px solid var(--cyan-hi);
  transform: rotate(45deg);
  transition: transform 300ms var(--ease-out-strong);
}

.qa[open] summary::after { transform: translate3d(0, 5px, 0) rotate(225deg); }

.qa p {
  max-width: 40em;
  margin: 0;
  padding-bottom: 24px;
  font-weight: 300;
  color: var(--text-mid);
  text-wrap: pretty;
}

/* Where the browser can animate a height to "auto", the answer slides open */
@supports (interpolate-size: allow-keywords) {
  html:not(.no-motion) .qa { interpolate-size: allow-keywords; }

  html:not(.no-motion) .qa::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 420ms var(--ease-expo), content-visibility 420ms allow-discrete;
  }

  html:not(.no-motion) .qa[open]::details-content { block-size: auto; }
}

/* --- 12. The end: the form ------------------------------------------------------------------- */

.end {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: start;
  gap: clamp(24px, 5vw, 90px);
  padding: 16vh var(--pad) 12vh;
  background: var(--veil);   /* on a phone these lines cross the bright line of the horizon */
}

.end-copy {
  position: relative;
  z-index: 3;
}

.end-title {
  margin: 0;
  font-size: clamp(3.25rem, 8.6vw, 10rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
}

.end-title span { display: block; font-weight: 200; color: var(--title-thin); }
.end-title span:last-child { font-weight: 800; color: var(--text); }

.end-text {
  max-width: 32em;
  margin: clamp(22px, 4.4vh, 48px) 0 0;
  padding-top: clamp(16px, 3vh, 30px);
  border-top: 1px solid var(--line);
  font-size: clamp(1.0625rem, 1.3vw, 1.3125rem);
  font-weight: 300;
  color: var(--text-mid);
  text-wrap: pretty;
}

/* Three direct ways, for whoever would rather not fill in a form */
.reach {
  max-width: 34em;
  margin: clamp(22px, 4.4vh, 44px) 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.reach li {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
}

.reach a {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 16px;
  min-height: 60px;
  padding: 16px 0;
  color: var(--text);
  text-decoration: none;
  transition: color 160ms ease;
}

.reach a span {
  flex: none;
  width: 5em;
  font-size: 0.9375rem;
  color: var(--text-mid);
}

.reach a b {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 700;
}

.reach-ic { display: none; }

.copy {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-btn-sm);
  /* the fill of the fields beside it: the bird's way down to the footer passes behind this
     button, and its small word needs a ground of its own (2026-10-15) */
  background: rgba(7, 11, 26, 0.7);
  box-shadow: inset 0 0 0 1px rgba(194, 205, 232, 0.42);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-mid);
  cursor: pointer;
  transition: color 160ms ease, box-shadow 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .copy:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--cyan-hi); }
  .reach a:hover { color: var(--cyan-hi); }
}

.form {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 2.8vw, 40px);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field > label,
.field > legend {
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 700;
}

.field > label > span,
.field > legend > span { color: var(--cyan-hi); }

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: rgba(7, 11, 26, 0.62);
  box-shadow: inset 0 0 0 1px rgba(194, 205, 232, 0.36);
  font: inherit;
  font-size: 1.0625rem;
  color: var(--text);
  transition: box-shadow 160ms ease;
}

.field textarea {
  min-height: 132px;
  line-height: 1.5;
  resize: vertical;
}

.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%237df0f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 16px center;
}

.field option {
  background: var(--c-navy-850);
  color: var(--text);
}

.uni .field input:focus-visible,
.uni .field select:focus-visible,
.uni .field textarea:focus-visible {
  outline-offset: 0;
  box-shadow: inset 0 0 0 1px var(--cyan-hi);
}

.field.is-bad input,
.field.is-bad select,
.field.is-bad textarea { box-shadow: inset 0 0 0 1.5px var(--c-red-400); }

.field-hint {
  font-size: 0.875rem;
  color: var(--text-low);
}

.field-error {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-red-300);
}

.field-error:empty { display: none; }

/* The consent: a box to tick beside its words. The words are its label, so all of them tick it;
   the link to the policy inside them opens the policy and leaves the box as it was. */
.agree {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.field .agree input {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  min-height: 0;
  margin: 1px 0 0;
  padding: 0;
  border-radius: 7px;
  background: rgba(7, 11, 26, 0.62) no-repeat center / 14px 11px;
  box-shadow: inset 0 0 0 1.5px rgba(194, 205, 232, 0.55);
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.field .agree input:checked {
  background-color: var(--cyan);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' fill='none' stroke='%23070b1a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 5.8l3.6 3.4 7.4-7.7'/%3E%3C/svg%3E");
  box-shadow: none;
}

.uni .field .agree input:focus-visible { outline-offset: 3px; }

.field.is-bad .agree input { box-shadow: inset 0 0 0 1.5px var(--c-red-400); }

.agree label {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-mid);
  cursor: pointer;
}

.agree a { color: var(--text); }

@media (hover: hover) and (pointer: fine) {
  .field .agree input:not(:checked):hover { box-shadow: inset 0 0 0 1.5px var(--cyan-hi); }
}

.form-status {
  padding: 14px 16px;
  border-radius: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.form-status[hidden] { display: none; }

.form-status.is-ok {
  background: rgba(0, 196, 204, 0.16);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.55);
}

.form-status.is-err {
  background: rgba(255, 138, 138, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 138, 138, 0.55);
}

.form-status a { color: inherit; }

/* A field for bots only: not seen and out of the tab order. It is clipped in place, not moved
   far away: in a page that reads from the right, a box far to the left widens the page. */
.form-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.form-fine {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-low);
}

.form-fine a { color: var(--text-mid); }

/* --- The footer -----------------------------------------------------------------------------
   Above: the ways to reach the studio and a map of the page, on the night made solid. Below: the
   closing stage, open to the world. The name stands on the cloud sea in the same hairline as the
   giant words of the opening; v2.js raises it letter by letter as the page runs out. */

/* Clipped: letters this large, on a line this tight, reach past their line, and the turned
   reflection would otherwise add empty page under the footer */
.foot {
  position: relative;
  z-index: 3;
  overflow: clip;
  font-size: 0.9375rem;
  color: var(--text-mid);
}

.foot p { margin: 0; }

.foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The ground ends well under the last line: the bottom padding holds the whole fade, so nothing
   that is read ever stands on the part that thins out */
.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.62fr) minmax(0, 0.8fr) minmax(0, 0.66fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(26px, 3vw, 56px);
  padding: clamp(70px, 12vh, 120px) var(--pad) calc(130px + clamp(10px, 3vh, 34px));
  background: linear-gradient(180deg, rgba(7, 11, 26, 0) 0, rgba(7, 11, 26, 0.94) 100px, rgba(7, 11, 26, 0.94) calc(100% - 130px), rgba(7, 11, 26, 0) 100%);
}

.foot-logo {
  display: block;
  width: auto;
  height: 30px;
}

/* Bold half, light half: the grammar of the section titles. The logo, the sentence and the
   ways to follow the studio each have room of their own (Roei, 2026-10-14: more air here),
   on one rhythm: a little more space before the sentence than inside it, and more again
   before the round buttons, so the three read as three. (The two margins are written under
   .foot: its reset of every p and ul would otherwise win, as it did until now.) */
.foot-say {
  font-size: clamp(1.5rem, 2.5vw, 2.625rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.foot-say span {
  display: block;
  font-weight: 800;
  color: var(--text);
}

.foot-say span + span {
  margin-top: 0.12em;
  font-weight: 200;
  color: var(--title-thin);
}

.foot-social {
  display: flex;
  gap: 12px;
}

.foot .foot-say { margin-top: clamp(26px, 2.4vw, 36px); }
.foot .foot-social { margin-top: clamp(30px, 2.8vw, 42px); }

.foot-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-icon);
  box-shadow: inset 0 0 0 1px rgba(194, 205, 232, 0.32);
  color: var(--text-mid);
  transition: color 160ms ease, box-shadow 160ms ease;
}

.foot-social svg {
  width: 18px;
  height: 18px;
}

.foot-h {
  margin: 0 0 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-mid);
}

.foot-list a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: color 160ms ease, transform 260ms var(--ease-out-strong);
}

/* The number is the largest thing in its column: it is what most people came down here for */
.foot-phone {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 200;
  line-height: 1.1;
  color: var(--title-thin);
  text-decoration: none;
  transition: color 160ms ease;
}

.foot-reach { margin-bottom: 14px; }

.foot-reach a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: color 160ms ease;
}

.foot-reach svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cyan-hi);
}

@media (hover: hover) and (pointer: fine) {
  .foot-reach a:hover,
  .foot-phone:hover { color: var(--cyan-hi); }
  .foot-list a:hover { color: var(--cyan-hi); transform: translate3d(-5px, 0, 0); }
  .foot-social a:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--cyan-hi); }
}

/* The closing stage */
.foot-stage {
  --fs: clamp(5.5rem, 26vw, 25rem);
  position: relative;
  padding: 4vh 0 calc(var(--fs) * 0.42);   /* room under the name for its reflection */
  direction: ltr;
  text-align: center;
  pointer-events: none;
}

/* Cut at the baseline only: a letter below it is still under the clouds */
.foot-words { clip-path: inset(-40% -10% 0 -10%); }

.foot-word {
  font-size: var(--fs);
  font-weight: 200;
  line-height: 0.8;
  letter-spacing: 0;
  white-space: nowrap;
  user-select: none;
}

/* Per letter, so the light on each one rises with it */
.foot-word span {
  display: inline-block;
  color: #dff9fb;
  background: linear-gradient(180deg, #f2f6ff 12%, #9df1f5 56%, rgba(125, 240, 244, 0.34) 98%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The reflection: the same letters, turned over under the baseline and fading away. The fade
   is in the fill of the letters, not a mask. */
.foot-words--echo {
  position: absolute;
  inset-inline: 0;
  top: calc(4vh + var(--fs) * 0.8);
  transform: scaleY(-1);
}

.foot-words--echo .foot-word span {
  color: transparent;
  background: linear-gradient(0deg, rgba(125, 240, 244, 0.24), rgba(125, 240, 244, 0) 56%);
  -webkit-background-clip: text;
  background-clip: text;
}

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 28px;
  padding: 26px var(--pad) 92px;
  background: linear-gradient(180deg, rgba(7, 11, 26, 0), rgba(7, 11, 26, 0.92) 46%);
  font-size: 0.875rem;
}

.foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 22px;
}

.foot-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-mid);
  text-underline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .foot-legal a:hover { color: var(--cyan-hi); }
}

/* --- WhatsApp: the button of the main site, and its greeting -------------------------------
   The face stays WhatsApp green for instant recognition; the halo borrows the brand cyan so the
   button belongs to this site. The red "1" counts the greeting in the bubble (v2.js): never a
   badge on its own. WhatsApp stands on the right, where a Hebrew line begins; the
   accessibility menu (a11y.css) stands in the opposite corner. */

.wa {
  position: fixed;
  z-index: var(--z-float);
  inset-block-end: max(var(--space-5), env(safe-area-inset-bottom));
  right: max(var(--space-5), env(safe-area-inset-right));   /* the bottom right corner in both languages */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.fab {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--fab-size);
  block-size: var(--fab-size);
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 32% 26%, #5cf09b 0%, #25c860 34%, #12994a 72%, #0a7437 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -8px 14px rgba(0, 60, 25, 0.35),
    0 12px 30px rgba(18, 153, 74, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform var(--dur-base) var(--ease-back), box-shadow var(--dur-base) var(--ease-out);
}

.fab:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -8px 14px rgba(0, 60, 25, 0.35),
    0 18px 42px rgba(18, 153, 74, 0.55),
    0 0 36px rgba(37, 211, 102, 0.45);
}

.fab:active { transform: scale(0.96); }

/* White glyph with a dark contour, so it holds its edge on the light highlight at the top */
.fab__icon {
  position: relative;
  z-index: 1;
  inline-size: 30px;
  block-size: 30px;
  filter: drop-shadow(0 1px 1.5px rgba(0, 50, 20, 0.55));
}

.fab:hover .fab__icon { animation: fab-ring 0.7s var(--ease-out); }

/* Halo: a green-to-cyan comet circling the button, masked to a ring so it never tints the face */
.fab__halo {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(37, 211, 102, 0.95) 90deg, rgba(0, 196, 204, 0.95) 170deg, transparent 260deg);
  -webkit-mask: radial-gradient(closest-side, transparent 76%, #000 80%, #000 94%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 76%, #000 80%, #000 94%, transparent 100%);
  filter: blur(2.5px);
  opacity: 0.85;
  pointer-events: none;
  animation: fab-spin 4.5s linear infinite;
}

/* Two sonar rings, half a beat apart */
.fab::before,
.fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(37, 211, 102, 0.55);
  border-radius: 50%;
  pointer-events: none;
  animation: fab-sonar 3s var(--ease-out) infinite;
}

.fab::after { animation-delay: 1.5s; }

/* Notification badge: a fixed slot, so it never shifts anything */
.fab__badge {
  position: absolute;
  z-index: 2;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-inline-size: 22px;
  block-size: 22px;
  padding-inline: 6px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: linear-gradient(145deg, #ff6b61, #e0212e);
  box-shadow: 0 0 0 2px var(--ink-900), 0 4px 12px rgba(224, 33, 46, 0.55);
}

.fab__badge[hidden] { display: none; }

.fab__badge::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid rgba(255, 107, 97, 0.75);
  border-radius: inherit;
  animation: badge-ping 2.4s var(--ease-out) 1s infinite;
}

.wa.has-unread .fab__badge { animation: badge-pop 0.55s var(--ease-back) both; }

/* The "ding": the glyph rings twice as the message arrives */
.wa.has-unread .fab__icon { animation: fab-ring 0.8s var(--ease-out) 0.35s 2; }

@keyframes fab-spin {
  to { transform: rotate(1turn); }
}

@keyframes fab-sonar {
  0% { transform: scale(1); opacity: 0.8; }
  80%, 100% { transform: scale(1.75); opacity: 0; }
}

@keyframes fab-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(11deg); }
  60% { transform: rotate(-7deg); }
  80% { transform: rotate(3deg); }
}

@keyframes badge-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes badge-ping {
  0% { transform: scale(1); opacity: 0.9; }
  70%, 100% { transform: scale(1.9); opacity: 0; }
}

/* The greeting (also the button's tooltip, on hover and on keyboard focus). Out of the widget's
   flow, standing on the button: when it arrives nothing on the page moves. */
.wa__bubble {
  position: absolute;
  inset-block-end: calc(100% + var(--wa-gap, 16px));
  right: 0;
  inline-size: min(318px, calc(100vw - 2 * var(--space-5)));
  border: 1px solid rgba(37, 211, 102, 0.3);
  border-radius: 20px;
  border-end-start-radius: 6px;   /* the corner nearest the button */
  background: linear-gradient(165deg, rgba(26, 36, 71, 0.97), rgba(10, 16, 36, 0.97));
  box-shadow: var(--elev-3), 0 0 44px rgba(37, 211, 102, 0.12);
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  transform-origin: calc(100% - 30px) 100%;
  transition: opacity 0.28s var(--ease-out), transform 0.42s var(--ease-back);
}

.wa__bubble[hidden] { display: none; }

.wa.is-open .wa__bubble {
  opacity: 1;
  transform: none;
}

/* Tail pointing down at the button's centre */
.wa__bubble::after {
  content: "";
  position: absolute;
  bottom: -7px;
  right: 22px;
  inline-size: 14px;
  block-size: 14px;
  border-right: 1px solid rgba(37, 211, 102, 0.3);
  border-bottom: 1px solid rgba(37, 211, 102, 0.3);
  border-bottom-right-radius: 3px;
  background: rgb(10, 16, 36);
  transform: rotate(45deg);
}

.wa__msg {
  display: block;
  padding: 16px 18px;
  border-radius: inherit;
  color: var(--text);
  text-decoration: none;
}

.uni .wa__msg:focus-visible {
  outline: 2px solid var(--cyan-hi);
  outline-offset: -4px;
}

.wa__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline-end: 30px;   /* room for the close button */
}

.wa__avatar {
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface-hi);
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.55);
}

.wa__avatar img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.wa__who {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.wa__who b { font-size: 15px; }

.wa__who small {
  font-size: 12px;
  color: var(--text-mid);
}

.wa__text {
  display: block;
  margin-block-start: 12px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-mid);
}

.wa__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 40px;
  margin-block-start: 14px;
  padding: 8px 18px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-btn-sm);
  font-size: 0.9375rem;
  font-weight: 800;
  color: #062b13;
  background: linear-gradient(135deg, #5cf09b, #25d366);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
  transition: transform var(--dur-base) var(--ease-back);
}

.wa__cta svg {
  inline-size: 18px;
  block-size: 18px;
}

.wa__msg:hover .wa__cta { transform: translateY(-2px); }

.wa__close {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;   /* the end of the line: left in Hebrew, right in English, never on the photo */
  display: grid;
  place-items: center;
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--r-icon);
  background: none;
  color: var(--text-mid);
  cursor: pointer;
}

.wa__close::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.wa__close svg {
  position: relative;
  inline-size: 14px;
  block-size: 14px;
}

.wa__close:hover { color: var(--text); }
.wa__close:hover::before { background: rgba(255, 255, 255, 0.12); }

/* The name the accessibility menu gives its hidden label */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Light on the letters ----------------------------------------------------------------------
   The thin half of a title is light blue glass. Where the pointer is, it lights white: v2.js writes the
   place into --lx and --ly, and the light is a second fill of the letters, nothing more. When a
   title first comes into view a light passes over it once, the way the page reads. A soft
   lamp follows the pointer while it is over such letters, so the air around them lights too. */

@property --lx {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: -999px;
}

@property --ly {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

.lit {
  --lr: clamp(110px, 15vw, 240px);
  --base: linear-gradient(var(--title-thin), var(--title-thin));
  color: var(--title-thin);
  text-shadow: none;   /* a shadow on letters filled through their background is drawn over the fill: it turned them dark */
  background-image: radial-gradient(circle at var(--lx) var(--ly), #fff 0, rgba(157, 241, 245, 0.96) calc(var(--lr) * 0.3), rgba(125, 240, 244, 0) var(--lr)), var(--base);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Letters that are a hairline of light already keep their own fill under the pointer's light */
.lit--hair { --base: linear-gradient(180deg, #eafeff 0%, #9df1f5 44%, #5ee9ef 100%); }
/* The name in the footer rises out of the clouds: its letters thin out towards their foot */
#footStage .lit--hair { --base: linear-gradient(180deg, #f2f6ff 8%, #9df1f5 54%, rgba(125, 240, 244, 0.36) 98%); }

@keyframes lit-sweep {
  from { --lx: 118%; }
  to { --lx: calc(0% - var(--lr) - 24px); }
}

html:not(.no-motion) .lit.is-swept { animation: lit-sweep 1500ms cubic-bezier(0.3, 0, 0.2, 1) 1; }
/* until the page opens, the light waits */
html.js:not(.is-open):not(.no-motion) .lit.is-swept { animation-play-state: paused; }

/* The thin half of a section title is a box of its own, so the light is placed in one box even
   when the words run to a second line */
.sec-title span.lit { display: inline-block; }

.lamp {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  width: 440px;
  height: 440px;
  margin: -220px 0 0 -220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125, 240, 244, 0.2) 0, rgba(0, 196, 204, 0.08) 38%, rgba(0, 196, 204, 0) 68%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms ease;
  will-change: transform, opacity;
}

.lamp.is-on { opacity: 1; }

/* --- Arrivals ----------------------------------------------------------------------------------- */

.rv {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 640ms ease, transform 820ms var(--ease-expo);
}

.rv.is-in {
  opacity: 1;
  transform: none;
}

/* --- Smaller screens ------------------------------------------------------------------------------ */

/* Five columns get too narrow for the logo's sentence and the phone number: the brand takes a
   row of its own, and the three lists and the ways to reach the studio share the next one */
@media (max-width: 1199px) {
  .foot-top { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.2fr); }
  .foot-brand { grid-column: 1 / -1; }
}

/* A laptop: the language, the phone and the button need more than a third of the bar, so the
   bar's two sides take their own width and the pages stand in what is left, instead of the end
   reaching over them (the language over "FAQ" from 1100 to about 1290) */
@media (min-width: 1100px) and (max-width: 1299px) {
  .nav { grid-template-columns: auto minmax(0, 1fr) auto; }
}
/* In English the end is longer (the phone dialled from abroad, +972), so it reaches over the
   pages until about 1355: there the same holds a little further, with room to spare */
@media (min-width: 1300px) and (max-width: 1439px) {
  html[lang="en"] .nav { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* No room for the row of pages: one button, and the menu as a page of its own */
@media (max-width: 1099px) {
  .nav { grid-template-columns: auto 1fr; }

  .nav-links,
  .nav-phone,
  .nav-lang { display: none; }

  .nav-burger { display: block; }
}

@media (max-width: 1000px) {
  .me { grid-template-columns: minmax(0, 1fr); }
  .me-photo { width: min(100%, 300px); }

  /* A pane: the drawing first, small, then the words */
  .pane-card { grid-template-columns: minmax(0, 1fr); }

  .pane-art {
    order: -1;
    width: min(100%, 320px);
  }

  .pane-art--mock { width: min(100%, 520px); }
  .pane-art--shop { width: min(100%, 360px); }
  .pane-art--flow { width: min(100%, 440px); }
  .pane-card::before { bottom: -76%; }   /* the edge of the planet below the last line, not through it */
  .pane-art--mock .mock { padding-bottom: 0; }
  .pane-art--mock .mock-laptop { width: 100%; }
  .pane-art--mock .mock-phone { display: none; }

  /* The step of the moment takes the whole width here, clear of the two buttons in the
     corners; the closing note has no room left (the questions below say the same) */
  .proc-live .proc-steps { bottom: 92px; }
  .proc-live .proc-note { display: none; }

  .plans { grid-template-columns: minmax(0, 1fr); }

  .cards,
  .faq,
  .end { grid-template-columns: minmax(0, 1fr); }

  .faq-side { position: relative; top: auto; }

  /* The brand and the ways to reach the studio take a row each; the three lists share one */
  .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .foot-brand,
  .foot-talk { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
  .clients { --edge: var(--pad); }
}

@media (max-width: 767px) {
  .nav,
  .menu-bar { height: 64px; }
  .nav-logo img,
  .menu-logo { height: 24px; }
  .nav-end { gap: 10px; }
  .nav-cta { padding: 0 16px; }

  /* The two buttons stand above the buttons in the corners */
  .hero { padding-top: 84px; padding-bottom: 96px; }

  .hero-title { font-size: clamp(2.75rem, 13vw, 4.25rem); }
  .hero-title span { white-space: normal; }

  /* The line of the brand moves up under the bar, over the bird */
  .hero-sign {
    inset: 76px 0 auto 0;
    font-size: 1.125rem;
    font-weight: 300;
    text-align: center;
  }

  .hero-cta .btn { flex: 1 1 0; padding: 0 12px; }

  /* On a phone the logos keep the height they have on a wide screen, so they read at a glance */
  .marquee-track li { padding-inline: 20px; }

  .creed-line:nth-child(-n + 2),
  .me-lead span,
  .sec-title span,
  .work-title,
  .foot-say span + span,
  .end-title span:first-child { font-weight: 300; }

  .me { padding-bottom: 12vh; }

  .pane-card { border-radius: 22px; }
  .pane-art { width: min(74%, 260px); }
  .pane-art--mock,
  .pane-art--shop,
  .pane-art--flow { width: 100%; }

  /* A pane on a phone is tighter, so that each one nearly fits the screen (Roei, 2026-10-22:
     "ענקיות מדי"): less room round the words, the points of the list closer together, the two
     ways on one under the other, and the two shops a little smaller */
  .pane-card { gap: 16px; padding: 20px; }
  .pane-text { margin: 10px 0 12px; }
  .pane-list { margin-bottom: 6px; }
  .pane-list li { padding-block: 4px; }
  .pane-list li::before { top: calc(4px + 0.62em); }
  .pane-links .text-link { min-height: 36px; }
  .shop { width: min(100%, 250px); }

  .proc-steps { grid-template-columns: minmax(0, 1fr); }

  .proc-live .process { height: 300vh; }
  .proc-live .proc-title { top: 84px; max-width: 100%; }
  .proc-live .proc-svg,
  .proc-live .proc-dots { top: 27%; height: 36%; }

  /* One window nearly fills the screen; the next one shows at the edge */
  .work { --win: 76vw; }
  .sites { --view-h: 54vh; }

  .voices { padding-inline: 16px; }
  .vtab.is-on { transform: translate(-50%, -50%) scale(1.22); }
  .talk-live .v-stage { padding: 72px 16px 84px; }
  .talk-live .varc { height: 96px; }

  .fan { height: clamp(300px, 92vw, 420px); }
  .fan-card--a { transform: translate(-50%, -50%) rotate(12deg); }
  .fan-card--c { transform: translate(-50%, -50%) rotate(-12deg); }

  .form-row { grid-template-columns: minmax(0, 1fr); }

  /* The three direct ways, on a phone: three tiles side by side, each a sign in a ring of light
     and its name, the whole tile a button for the thumb (Roei, 2026-10-15: they were three rows
     of text). What they lead to stays in the link for a screen reader; the address of the mail
     stands under them with its copy button. */
  .reach {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: none;
    border-bottom: 0;
  }

  .reach li,
  .reach .reach-mail { display: contents; }

  .reach a {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 112px;
    padding: 16px 6px 14px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(30, 42, 82, 0.78), rgba(12, 18, 40, 0.72));
    box-shadow: inset 0 0 0 1px rgba(194, 205, 232, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px -22px rgba(0, 0, 0, 0.8);
    text-align: center;
    -webkit-tap-highlight-color: transparent;
  }

  .reach a:active { transform: scale(0.97); box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.6); }

  .reach-ic {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, rgba(103, 232, 249, 0.26), rgba(34, 211, 238, 0.06) 70%);
    box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.45), 0 0 26px -8px rgba(34, 211, 238, 0.8);
    color: var(--cyan-hi);
  }

  .reach-ic svg { width: 24px; height: 24px; }

  /* WhatsApp keeps its own green, as its button in the corner does */
  .reach-ic--wa {
    background: radial-gradient(circle at 50% 30%, rgba(92, 240, 155, 0.3), rgba(18, 153, 74, 0.08) 70%);
    box-shadow: inset 0 0 0 1px rgba(92, 240, 155, 0.5), 0 0 26px -8px rgba(37, 200, 96, 0.85);
    color: #5cf09b;
  }

  .reach a span {
    width: auto;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
  }

  .reach a b {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* under the tiles: the address itself, and the button that copies it */
  .reach .copy {
    grid-column: 1 / -1;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }

  .reach .copy::after {
    content: attr(data-copy);
    order: -1;
    direction: ltr;
    font-weight: 400;
    color: var(--text-mid);
  }

  /* Three lists side by side are too tight on a phone: the first two share a row, and the
     tools take the whole width under them, their three links in the same two columns */
  .foot-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 20px;
  }

  .foot-tools { grid-column: 1 / -1; }

  .foot-tools .foot-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }

  .foot-bottom { justify-content: center; text-align: center; }

  .wa { --wa-gap: 12px; }
  .wa__bubble { inline-size: min(300px, calc(100vw - 2 * var(--space-5))); }
}

/* A short, wide screen (a phone on its side): the line of the brand has no room over the
   words, and the two buttons of the opening step in from the two round buttons in the corners */
@media (max-height: 520px) {
  .hero-sign { display: none; }
  .hero-cta { padding-inline: 68px; }
}

/* The narrowest phones (320px): the bar tightens so the menu button stays on the screen */
@media (max-width: 359px) {
  .nav {
    gap: 8px;
    padding-inline: 14px;
  }

  .menu-bar { padding-inline: 14px; }

  .nav-logo img,
  .menu-logo { height: 21px; }
  .nav-end { gap: 8px; }

  .nav-cta {
    padding: 0 12px;
    font-size: 0.875rem;
  }

  /* Two columns of tools would break "בדיקת פרטיות לאתר" in two, so here they stand one under another */
  .foot-tools .foot-list { grid-template-columns: minmax(0, 1fr); }
}

/* A narrow or tall screen (the same test v2.js uses): the text takes the whole width, so the
   bird is given the top of the frame. The opening puts its words under it, and the two other
   chapters where it is fully present start lower. */
@media (max-width: 819px), (max-aspect-ratio: 21/20) {
  /* The words of the opening stand under the bird, not beside it */
  .hero { justify-content: flex-end; }
  .hero-say { max-width: 100%; }

  /* Down here they stand on the bright line of the horizon, so they get a deeper night of their
     own, behind them only (the bird is above) and gone before the section ends */
  .hero-say::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -64px calc(-1 * var(--pad)) -84px;
    background: linear-gradient(180deg, rgba(7, 11, 26, 0) 0, rgba(7, 11, 26, 0.6) 64px, rgba(7, 11, 26, 0.6) calc(100% - 70px), rgba(7, 11, 26, 0) 100%);
    pointer-events: none;
  }

  .creed {
    justify-content: flex-end;
    min-height: 0;
    padding-top: 44vh;
  }

  .creed-title { font-size: clamp(2.75rem, 12.4vw, 9rem); }

  .end { padding-top: 40vh; }
}

/* A phone: the sentence takes the whole width of the screen */
@media (max-width: 480px) {
  .creed-title { font-size: 14.2vw; }
}

/* --- Motion stopped, or kept gentle ------------------------------------------------------------------
   The accessibility menu decides (a11y.js sets .no-motion before the page is drawn: the
   visitor stopped the animations there, or the device asks for less motion and the visitor did
   not ask for all of it). The world is then drawn once per move of the page, the stages do not
   hold, nothing loops, and what would glide simply arrives. */


.no-motion :is(.read, .hero-say, .hero-sign, .lamp, .btn, .art .d, .art .tick, .art .hot, .art .dot, .site-win, .vquote, .vquote[hidden], .vtab, .plan-cta, .fan-card, .nav-chev, .dd-item, .dd-all, .menu-sheet, .menu::backdrop, .creed .w, .creed .w-on, .creed .w-off, .foot-list a, .fab, .wa__bubble, .wa__cta),
.no-motion :is(.btn--line, .plan-cta, .copy)::before,
.no-motion .qa summary::after,
.no-motion .fine-more summary::after,
.no-motion .nav-links > ul > li > a::after,
.no-motion .nav-trigger::after {
  transition-duration: 1ms;
  transition-delay: 0s;
}

/* The pane of the menus simply changes: no sliding, no growing, no blur */
.no-motion .nav { --morph: 1ms; }

.no-motion :is(.dd, .dd-panel, .dd-panel[data-state="active"], .dd-art, .dd-card img) {
  transition-duration: 1ms !important;
  transition-delay: 0s !important;
}

.no-motion :is(.dd-panel, .dd-art) { filter: none !important; }
.no-motion .dd-art { transform: none !important; }

/* No band of light passes over a button */
.no-motion :is(.btn--fill, .wa__cta)::after,
.no-motion .plan--top .plan-cta::before { display: none; }

/* Nothing waits to arrive */
.no-motion .rv {
  opacity: 1;
  transform: none;
  transition: none;
}

/* The row of logos stands still, whole, in as many lines as it needs */
.no-motion .marquee-track > [aria-hidden="true"] { display: none; }

.no-motion :is(.fab__halo, .fab__icon, .fab__badge),
.no-motion .fab::before,
.no-motion .fab::after,
.no-motion .fab__badge::after { animation: none; }

.no-motion .fab::before,
.no-motion .fab::after { opacity: 0; }

/* --- The colour modes of the accessibility menu -------------------------------------------------------
   a11y.css forces one flat palette on everything. Three things here would break under it:
   letters filled through their background (they would vanish), the drawn world behind the page
   (it would shine through), and white artwork on a white ground. */

html:is(.a11y-contrast, .a11y-negative, .a11y-light) body * { -webkit-text-fill-color: currentcolor !important; }

html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.gl, .still-birds, .lamp, .foot-words--echo, .me-orbit, .fab__halo, .pane-shade) { display: none !important; }

html:is(.a11y-contrast, .a11y-negative, .a11y-light) .marquee {
  -webkit-mask-image: none;
  mask-image: none;
}

html:is(.a11y-contrast, .a11y-negative, .a11y-light) .creed .w-off { display: none !important; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .creed .w-on { opacity: 1 !important; }

/* What was told apart by its glass or its fill is told apart by a line */
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.site-win, .pane-card, .plan, .card, .me-window, .vtab, .dd, .menu-sheet, .wa__bubble, .read) { outline: 1px solid currentColor; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.btn, .plan-cta, .nav-burger, .menu-close, .copy, .foot-social a, .agree input):not(:focus-visible) { outline: 2px solid currentColor; outline-offset: -2px; }
/* A field is drawn by an inner shadow, which the modes take away: the boxes to type in vanished
   (2026-10-19). Its own focus ring still wins. */
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .field :is(input:not([type=checkbox]), select, textarea):not(:focus-visible) { outline: 1px solid currentColor; outline-offset: -1px; }
/* The cyan focus ring is made for the night: on the light mode it all but disappears */
html.a11y-light .uni :focus-visible { outline-color: currentColor; }

/* The two lines of the menu button are drawn by their fill, and the modes paint every fill in the
   ground's colour: the button looked empty on a phone (Roei, 2026-10-15). In the modes they are
   drawn by a border, which the modes paint in the colour of the letters. */
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .nav-burger i { height: 0; border-top: 2px solid; }

html.a11y-light :is(.marquee-track img, .still-birds) { filter: invert(1) hue-rotate(180deg); }

/* The light of the buttons has no place in a flat palette */
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.btn--fill, .wa__cta)::after,
html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.btn--line, .plan-cta, .copy)::before { display: none !important; }

/* The WhatsApp button keeps its own green in every mode: it is recognised by it */
html:is(.a11y-contrast, .a11y-negative, .a11y-light) body .fab { background: #128c4b !important; color: #fff !important; }

/* --- The forced colours of the system (the contrast themes of Windows) -------------------------------
   The system replaces every colour and removes background images. Letters filled through their
   background would vanish and the drawn world has no place: the same care as the modes above,
   in the system's own colours. v2.js stops drawing the world too. */

@media (forced-colors: active) {
  .uni * {
    -webkit-text-fill-color: currentcolor !important;
    -webkit-text-stroke: 0 !important;
  }

  .gl,
  .still-birds,
  .lamp,
  .foot-words--echo,
  .me-orbit,
  .fab__halo,
  .pane-shade,
  .creed .w-off { display: none !important; }

  .creed .w-on { opacity: 1 !important; }

  :is(.btn--fill, .wa__cta)::after,
  :is(.btn--line, .plan-cta, .copy)::before { display: none !important; }

  .marquee {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* Surfaces made of a gradient lose it here and would be see-through: one lying over another
     (the deck, the bubble, the menus, the bar) must still cover what is under it */
  .pane-card,
  .plan,
  .card,
  .read,
  .site-win,
  .nav,
  .is-scrolled .nav,
  .dd,
  .menu-bar,
  .menu-sheet,
  .foot-top,
  .foot-bottom,
  .wa__bubble,
  .a11y__panel,
  .say { background-color: Canvas; }

  .site-win,
  .pane-card,
  .plan,
  .card,
  .read,
  .vtab,
  .dd,
  .menu-sheet,
  .wa__bubble,
  .btn,
  .plan-cta,
  .nav-burger,
  .menu-close,
  .copy,
  .fab,
  .foot-social a { border: 1px solid ButtonText; }
  .field :is(input:not([type=checkbox]), select, textarea) { border: 1px solid CanvasText; }
  .nav-burger i { forced-color-adjust: none; background: ButtonText; }

  /* the box to tick is the system's own here: a drawn tick would vanish in its colours */
  .field .agree input {
    -webkit-appearance: auto;
    appearance: auto;
    background: none;
  }
  .vtab.is-on { outline: 3px solid Highlight; }
  .dd-item.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
  .uni :focus-visible { outline: 3px solid Highlight; }
}

/* --- The English pages (stage D, 2026-10-20) --------------------------------------------
   The same pages read from the left. Most of the layout is written in the sides of the reading
   (inline start and end) and turns by itself; these are the parts drawn to one side on purpose.
   The world is shown mirrored, so the bird keeps to the open side of the words (v2.js mirrors
   what it reads from the page). WhatsApp stays on the right and the accessibility menu on the
   left, as on the Hebrew pages. */
html[dir="ltr"] .gl { transform: scaleX(-1); }
html[dir="ltr"] .no-gl .still-birds { transform: scaleX(-1); }

/* numbers and plan names set flush with the start of the reading */
html[dir="ltr"] .facts b,
html[dir="ltr"] .plan-name { text-align: left; }

/* arrows that point onwards point right */
html[dir="ltr"] .more-go::after { transform: rotate(-135deg); }
html[dir="ltr"] .read-more i::before { transform: translate(-65%, -50%) rotate(-135deg); }
html[dir="ltr"] .reads-nav--back::before { transform: rotate(45deg); }
html[dir="ltr"] .reads-nav--on::before { transform: rotate(-135deg); }

/* the faces of the clients: the first one at the left end of the arc */
html[dir="ltr"] .vtab:nth-of-type(1) { left: 8.33%; }
html[dir="ltr"] .vtab:nth-of-type(2) { left: 25%; }
html[dir="ltr"] .vtab:nth-of-type(3) { left: 41.67%; }
html[dir="ltr"] .vtab:nth-of-type(4) { left: 58.33%; }
html[dir="ltr"] .vtab:nth-of-type(5) { left: 75%; }
html[dir="ltr"] .vtab:nth-of-type(6) { left: 91.67%; }

/* the sentence at screen size: its English lines are longer than the Hebrew ones */
html[dir="ltr"] .creed-title { font-size: clamp(2.5rem, 7.2vw, 9rem); }
@media (max-width: 480px) {
  html[dir="ltr"] .creed-title { font-size: 8.4vw; }
}

/* the English label of the bar's button is longer: on a phone up to 400px wide the bar tightens a
   little earlier, as it does at 320px in Hebrew */
@media (max-width: 400px) {
  html[dir="ltr"] .nav { gap: 8px; padding-inline: 14px; }
  html[dir="ltr"] .nav-end { gap: 8px; }
  html[dir="ltr"] .nav-cta { padding: 0 12px; }
}

/* the reviews' title is longer in English: on two lines it leaves the bird its sky */
html[dir="ltr"] .v-head .sec-title span { display: block; }

/* --- The cookie banner (consent.js, Roei 2026-10-20) ---------------------------------------
   A glass card at the foot of the screen, over the floating buttons while it is open. Accept
   and reject are the same button, side by side: neither is the easy one. */
.consent {
  position: fixed;
  z-index: calc(var(--z-float) + 10);
  inset-inline: 0;
  inset-block-end: max(12px, env(safe-area-inset-bottom));
  inline-size: min(640px, calc(100vw - 24px));
  max-block-size: calc(100dvh - 24px);
  overflow-y: auto;
  margin-inline: auto;
  padding: 22px 24px 20px;
  border: 1px solid rgba(0, 196, 204, 0.32);
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(26, 36, 71, 0.98), rgba(10, 16, 36, 0.98));
  box-shadow: var(--elev-3), 0 0 44px rgba(0, 196, 204, 0.1);
  color: var(--text);
}

.consent[hidden] { display: none; }

html:not(.no-motion) .consent {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.28s var(--ease-out-strong), transform 0.42s var(--ease-out-strong);
}

html:not(.no-motion) .consent.is-in { opacity: 1; transform: none; }

.consent-title {
  margin: 0 0 6px;
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.3;
}

.consent-title:focus { outline: none; }
.consent-title:focus-visible { outline: 2px solid var(--cyan-hi); outline-offset: 4px; border-radius: 4px; }

.consent-text {
  margin: 0;
  font-size: 0.9875rem;
  line-height: 1.6;
  color: var(--text-mid);
}

.consent-text a { color: var(--cyan-hi); text-underline-offset: 3px; }

.consent-more {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.consent-more[hidden] { display: none; }

.consent-kind {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.consent-kind input {
  inline-size: 20px;
  block-size: 20px;
  margin: 2px 0 0;
  accent-color: var(--cyan);
}

.consent-kind label { display: grid; gap: 2px; font-size: 0.9375rem; line-height: 1.5; color: var(--text-mid); }
.consent-kind label b { color: var(--text); font-weight: 700; }

.consent-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.consent-btn.btn {
  min-height: 48px;
  padding: 8px 12px;
  font-size: 1rem;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}

@media (max-width: 420px) {
  .consent { padding: 18px 16px 16px; }
  .consent-actions { gap: 8px; }
}

/* Cookie settings in the footer: a button that reads as the links beside it (only with
   scripts, which it needs) */
.foot-consent {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text-mid);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

html:not(.js) .foot-consent { display: none; }

@media (hover: hover) and (pointer: fine) {
  .foot-consent:hover { color: var(--cyan-hi); }
}

/* While the banner is open the WhatsApp greeting stays out of its way (it waits to be said in
   v2.js / page.js; one already open is hidden until the banner closes) */
html.consent-open .wa__bubble { visibility: hidden; }