/* ==========================================================
   Design tokens — based on uxuikit.com
   ========================================================== */
:root {
  /* Black and white only (user request): neutral grays with no blue tint; the only color on the page
     is the work itself (the wall screenshots) and the small green "available" dot */
  --bg: #050505;
  --hero-bg: #f3f3f3;  /* light hero (user request); the rest of the page stays dark */
  --ink: #0b0b0b;      /* text and buttons on light backgrounds */
  --card-bg: #0d0d0d;  /* solid card fill; light.css sets white */

  --surface: rgba(255, 255, 255, 0.05);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);

  --text: #f5f5f5;
  --text-muted: #b3b3b3;
  --text-dim: #8a8a8a;

  --accent: #f5f5f5;      /* focus rings and small details; no brand color any more */
  --accent-soft: #f5f5f5;

  --radius: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --container: 1480px;  /* same as the header row */
  --gutter: clamp(16px, 4vw, 64px);
  --section-y: clamp(96px, 12vw, 180px);
  --col-gap: clamp(24px, 3vw, 48px);
  /* Width of the side column in section heads; content below lines up with the heading */

  --font: "IBM Plex Sans Hebrew", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Type scale: every font size on the page comes from this list (about 12% below the old sizes) */
  --fs-display-max: 62px;                         /* hero headline, desktop */
  --fs-display: clamp(38px, 5vw, 62px);           /* hero headline, below 1024px */
  --fs-h2: clamp(34px, 4.6vw, 66px);              /* section headings, final CTA */
  --fs-xl: clamp(26px, 3.2vw, 44px);              /* big statement text: About, Statement */
  --fs-mega: clamp(42px, 7.6vw, 124px);           /* the Statement on how-test/en: the biggest type on the page */
  --fs-h3: clamp(24px, 2.4vw, 32px);              /* process step titles, prices */
  --fs-h4: clamp(18px, 1.5vw, 20px);              /* card, principle, fit and FAQ titles */
  --fs-lead: clamp(17px, 1.5vw, 21px);            /* hero subheading */
  --fs-body-lg: 17px;                             /* section intros, quotes, large buttons */
  --fs-body: 16px;                                /* body text, buttons */
  --fs-sm: 14px;                                  /* labels, meta, nav */
  --fs-xs: 13px;                                  /* fine print */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================
   Base
   ========================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-padding-top: 96px; }
/* Native smooth anchor scrolling only as a fallback; Lenis handles scrolling when it's active */
html:not(.lenis) { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
/* No long-press "save image" menu on iOS and no drag-out (user request; pairs with the right-click block in script.js) */
img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
.nowrap { white-space: nowrap; }

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  color: var(--bg);
  background: var(--accent);
  border-radius: 8px;
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================
   Shared components
   ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-sm { padding: 8px 16px; font-size: var(--fs-sm); }
.btn-lg { padding: 16px 32px; font-size: var(--fs-body-lg); }
.btn-primary {
  color: #0b0b0b;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 18px rgba(255, 255, 255, 0.35), 0 0 42px rgba(255, 255, 255, 0.12);
}
.btn-primary:hover {
  background: #f1f1f1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 24px rgba(255, 255, 255, 0.5), 0 0 56px rgba(255, 255, 255, 0.18);
}

.section { position: relative; padding-block: var(--section-y); }

/* Editorial section head: number in the side column, big heading beside it */
.section-head {
  padding-top: 24px;
  margin-bottom: clamp(56px, 7vw, 104px);
  border-top: 1px solid var(--border);
}
.section-head h2 {
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.section-sub { margin-top: 20px; max-width: 560px; font-size: var(--fs-body-lg); color: var(--text-muted); }


/* ==========================================================
   Header
   ========================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding-block: 20px;
  transition: background-color 0.3s, padding 0.3s, color 0.3s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hidden while scrolling down, back on scroll up (script.js) */
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-scrolled {
  padding-block: 12px;
  background: rgba(6, 6, 6, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
/* While the header sits over the light hero (JS adds .on-light): dark logo, links and button */
.site-header.on-light,
.site-header.on-light .logo { color: var(--ink); }
.site-header.on-light.is-scrolled { background: rgba(243, 243, 243, 0.82); border-bottom-color: rgba(11, 11, 11, 0.08); }
.site-header.on-light .btn-primary { color: #fff; background: var(--ink); box-shadow: none; }
.site-header.on-light .btn-primary:hover { background: #262626; box-shadow: none; }
.site-header.on-light .menu-toggle { background: rgba(11, 11, 11, 0.04); border-color: rgba(11, 11, 11, 0.12); }
.site-header.on-light .menu-toggle span { background: var(--ink); }

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  max-width: 1480px;
}

.logo { display: inline-flex; color: var(--text); justify-self: start; }
.logo svg { width: 31px; height: auto; }
.logo-sm svg { width: 24px; }

/* Nav: plain links, no fill; grouped with the CTA at the end of the row */
.main-nav { margin-inline-start: auto; }
.main-nav ul { display: flex; gap: clamp(20px, 2.2vw, 32px); }
.main-nav a {
  display: block;
  padding-block: 6px;
  font-size: var(--fs-sm);
  line-height: 1.2; /* 16.8px: one line = one roll step */
  font-weight: 400;
  white-space: nowrap;
}

/* Hover roll: each letter slides up one line (19.2px) and a copy rises in, staggered */
.roll { display: inline-flex; height: 1.2em; overflow: hidden; vertical-align: top; }
.roll-char {
  display: inline-flex;
  flex-direction: column;
  white-space: pre;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 18ms);
}
.roll-char > span { display: block; height: 1.2em; line-height: 1.2; }
.main-nav a:hover .roll-char,
.main-nav a:focus-visible .roll-char,
.btn-primary:hover .roll-char,
.btn-primary:focus-visible .roll-char { transform: translateY(-1.2em); }

.header-actions { display: flex; align-items: center; gap: 10px; }

/* Language switcher (HE / EN): a globe and the two codes, the current one in full ink. Inherits the header's
   text color, so it follows the header over the light hero and when scrolled */
.lang-switch { display: flex; align-items: center; gap: 2px; margin-inline-end: 6px; font-size: var(--fs-sm); line-height: 1; }
.lang-ic { width: 16px; height: 16px; margin-inline-end: 4px; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.7; }
.lang-switch a { padding: 6px 5px; color: inherit; text-decoration: none; letter-spacing: 0.04em; opacity: 0.6; transition: opacity 0.2s; }
.lang-switch a:hover { opacity: 1; }
.lang-switch a[aria-current] { font-weight: 700; opacity: 1; }
.lang-switch a:lang(he) { font-family: "IBM Plex Sans Hebrew", var(--font); letter-spacing: 0; } /* "עב" in the Hebrew font on the English page too */
.lang-switch a + a { position: relative; }
.lang-switch a + a::before { content: ""; position: absolute; inset-inline-start: -1px; top: 50%; width: 1px; height: 12px; background: currentColor; opacity: 0.35; transform: translateY(-50%); }

/* Theme toggle (sun / moon): a round icon button beside the language switcher, inheriting the header's color.
   The moon shows in the light theme (go dark), the sun in the dark one (go light) */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin-inline-end: 4px;
  color: inherit;
  background: none;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s, background-color 0.2s, border-color 0.2s;
}
.theme-toggle:hover { opacity: 1; border-color: color-mix(in srgb, currentColor 22%, transparent); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { display: none; }
.tone-dark .theme-toggle .i-sun { display: block; }
.tone-dark .theme-toggle .i-moon { display: none; }
/* a short cross-fade of colors while switching, then off again (script.js) */
.theme-switching *, .theme-switching *::before, .theme-switching *::after {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, fill 0.4s ease, stroke 0.4s ease !important;
}

/* ----- English page (en.html, dir="ltr"): its own font and undoing the right-to-left specifics ----- */
/* Geist (Google Fonts) for English; ?font= on en.html swaps in an alternative for comparison */
:root[lang="en"] { --font: "Geist", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
:root[lang="en"].font-inter-tight { --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
:root[lang="en"].font-instrument { --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
:root[lang="en"].font-manrope { --font: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
[dir="ltr"] .rotator-word { right: auto; left: 0; }
[dir="ltr"] .qt-next svg { transform: none; }      /* LTR: "previous" points left, "next" points right */
[dir="ltr"] .qt-prev svg { transform: scaleX(-1); }
[dir="ltr"] .p3-arrows .p3-arrow { transform: none; }
[dir="ltr"] .how3-art { scale: -1 1; }             /* the drawings read left to right (card 2's steps fill from the left) */
[lang="en"] .qt-item blockquote p::before { content: "\201C"; }
[lang="en"] .qt-item blockquote p::after { content: "\201D"; }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ==========================================================
   Hero
   ========================================================== */
.hero {
  position: relative;
  padding-block: clamp(150px, 15vw, 200px) clamp(48px, 6vw, 80px);
  /* Flat light hero; it ends with a clean edge into the dark page (a fade would leave a gray band) */
  color: var(--ink);
  background: var(--hero-bg);
  overflow: hidden;
}

/* Centered hero after the clonify.io reference: badge, headline, subheading, one button, then the wall */
.hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  padding: 7px 16px;
  font-size: var(--fs-sm);
  color: #3a3a3a;
  background: #fff;
  border: 1px solid rgba(11, 11, 11, 0.08);
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 10px rgba(11, 11, 11, 0.05);
}
.hero h1 {
  max-width: 100%;
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* 2 lines on tablets and desktop, 3 on phones (rotating word on its own line) */
.hero .br-phone { display: none; }
@media (min-width: 1024px) {
  .hero h1 { font-size: var(--fs-display-max); white-space: nowrap; }
}
.lead {
  max-width: 620px;
  margin-top: clamp(18px, 2vw, 26px);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: #3a3a3a;
}
.hero .btn { margin-top: clamp(32px, 3.2vw, 44px); }
/* On the light hero the main button is dark (white buttons stay everywhere else) */
.hero .btn-primary { color: #fff; background: var(--ink); box-shadow: 0 8px 24px rgba(11, 11, 11, 0.16); }
.hero .btn-primary:hover { background: #262626; box-shadow: 0 10px 28px rgba(11, 11, 11, 0.22); }

.dot { width: 7px; height: 7px; flex: none; border-radius: 50%; }
.dot-green { background: #1fb954; box-shadow: 0 0 6px rgba(31, 185, 84, 0.45); }

/* Rotating last word of the headline.
   Exit: letters slide up out of the line one after another (quick).
   Enter: once the old word is gone, new letters rise from below one after another. */
.rotator {
  position: relative;
  display: inline-block;
  /* A clipping window exactly one line tall, aligned with the rest of the line */
  vertical-align: bottom;
  height: 1.1em; /* must match the headline line-height */
  white-space: nowrap;
  overflow: hidden;
  /* Resize to the new word only after the old one has left */
  transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.45s;
}
/* The rotating words and letters are drawn from data-t, not written as text: the heading's words are
   in the .sr-only line once, so screen readers and search engines don't read them twice */
.rotator [data-t]::before { content: attr(data-t); }
.rotator-word { position: absolute; top: 0; right: 0; white-space: nowrap; }
.rotator-word.is-current { position: relative; }
.rotator .char {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateY(105%);
  will-change: transform;
}
.rotator-word.is-current .char {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease-out;
  transition-delay: calc(560ms + var(--i, 0) * 40ms);
}
.rotator-word.is-leaving .char {
  opacity: 0.5;
  transform: translateY(-105%);
  transition: transform 0.35s cubic-bezier(0.55, 0, 0.75, 0.3), opacity 0.35s ease-in;
  transition-delay: calc(var(--i, 0) * 25ms);
}
.rotator-word.no-anim .char { transition: none; }

/* Reel version (how-test.html, after the user's heading-animation.gif): the words sit on one vertical
   strip behind the same one-line window and the whole word moves as a block, one word per change.
   script.js animates the strip (pull back, move, overshoot, settle). The window keeps one width (the
   longest word) and each word is centered in it, so the word only ever moves up and down. */
.rotator-reel { transition: none; }
.reel-strip {
  position: absolute;
  top: 0;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform;
}
.rotator-reel .rotator-word { position: static; display: block; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================
   Work wall (hero): five columns rotated 14deg (as in the reference), each drifting up or down in a loop.
   JS repeats each column's tiles (--copies times in total) so the loop is seamless.
   ========================================================== */
.wall {
  /* Same proportions as the reference (1200 × 937); everything inside scales with its width */
  --col-w: 22cqw;
  --wall-gap: 2cqw;
  --copies: 4;
  position: relative;
  width: min(100%, 1200px);
  aspect-ratio: 1200 / 937;
  margin: clamp(40px, 5vw, 72px) auto 0;
  overflow: hidden;
  container-type: inline-size;
  direction: ltr;
  /* Blend into the background on every side: a side fade, plus a short top/bottom fade that
     catches the rotated column ends (each column also fades along its own length, below) */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}
/* Values from the reference's inspector: a flat rotate(14deg), no 3D */
.wall-plane {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  gap: var(--wall-gap);
  height: 100%; /* as in the reference, so the column fades sit inside the visible wall */
  transform: translateX(-50%) rotate(14deg);
}
/* Each column is a vertical ticker faded at both ends, as in the reference: 0 → 25% → 75% → 0 */
.wall-col {
  flex: none;
  width: var(--col-w);
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent 0%, #000 25%, #000 75%, transparent 100%);
  mask-image: linear-gradient(transparent 0%, #000 25%, #000 75%, transparent 100%);
}
.wall-col:nth-child(even) .wall-track { margin-top: calc(var(--col-w) * -0.45); } /* stagger the columns */
.wall-track {
  display: flex;
  flex-direction: column;
  gap: var(--wall-gap);
  /* 70s is only a fallback: script.js sets each column's duration from its height so all move at one speed */
  animation: wall-drift 70s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.wall-col:nth-child(even) .wall-track { animation-direction: reverse; }
@keyframes wall-drift {
  from { transform: translateY(0); }
  to { transform: translateY(calc((-100% - var(--wall-gap)) / var(--copies))); } /* one copy's height */
}

.shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(6px, 1cqw, 12px);
  border: 1px solid rgba(11, 11, 11, 0.08);
  background: #e6e6e6;
  box-shadow: 0 12px 32px rgba(11, 11, 11, 0.1);
}
.shot img,
.shot video { display: block; width: 100%; height: auto; }

/* ==========================================================
   About
   ========================================================== */
.about-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(32px, 8vw, 180px);
}
.about-photo {
  width: clamp(180px, 17vw, 260px);
  aspect-ratio: 20 / 21;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 8px;
}
.about-text { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(48px, 7vw, 120px); max-width: 900px; }

/* Scroll-filled statement: words start gray and turn white in reading order */
.fill-text {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}
.fill-text .w { color: rgba(255, 255, 255, 0.26); transition: color 0.3s ease; }
.fill-text .w.is-lit { color: var(--text); }

/* About, pinned blur reveal (how-test.html), after the user's reference. The final layout is plain flow:
   statement, then the framed photo, then the YouTube links. With JS (.ar-on) the stage is sticky inside a
   taller track, so it pins with the text in the middle of the screen while the words sharpen and the photo
   comes up to meet it (script.js). Without JS or with reduced motion: the plain layout. */
.ar { padding-block: clamp(96px, 10vw, 140px) var(--section-y); }
/* With JS: the text sits ~100px under the hero (user); .ar-inner is the scroll track (its height is set by
   script.js) and .ar-content the sticky stage; overflow: clip keeps the lowered photo from spilling out */
.ar.ar-on { padding-top: 0; overflow: clip; }
.ar.ar-on .ar-inner { padding-top: 100px; }
.ar.ar-on .ar-content { position: sticky; }
.ar-content { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ar-text {
  max-width: 30ch;
  font-size: clamp(32px, 5.2vw, 56px); /* 56px on desktop (user; 64px was too large); a one-off size outside the type scale */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
}
/* Each word starts blurred and faint; script.js switches it on (.is-on) when the scroll reaches it and the
   transition finishes the sharpening by itself, so it never stays half blurred (and reverses the same way) */
.ar-text .w {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transition: opacity 1.1s cubic-bezier(0.33, 1, 0.68, 1), filter 1.4s cubic-bezier(0.25, 1, 0.5, 1); /* slow and soft (user: "too snappy") */
  will-change: filter, opacity;
}
.ar-text .w.is-on { opacity: 1; filter: blur(0); }
.ar-lower { display: flex; flex-direction: column; align-items: center; margin-top: 32px; } /* 32px between the statement and the photo once they meet (user) */
/* The smaller paragraph (18px, user) in gray with the key phrases in full ink, then the CTA, then the YouTube links */
.ar-sub { max-width: 640px; margin-top: clamp(56px, 6vw, 80px); font-size: 18px; line-height: 1.6; color: var(--text-muted); }
.ar-sub strong { font-weight: 400; color: var(--text); }
.ar-cta { margin-top: 32px; }
.ar .yt { margin-top: 48px; }
.ar.ar-on .ar-lower { will-change: transform; }
/* YouTube channels under the About (2026-10-05, after the user's reference): a small label with the YouTube mark,
   then one full-width row per channel: the name large, the topic and language small, and a round arrow button.
   The whole row is the link; the button fills on hover. The red mark is a deliberate brand exception, like the green dot */
.ytl { align-self: stretch; margin-top: clamp(80px, 9vw, 128px); text-align: start; }
.ytl-label { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); }
:lang(en) .ytl-label { text-transform: uppercase; letter-spacing: 0.14em; }
.ytl-icon { flex: none; width: 42px; height: 30px; }
.ytl-icon rect { fill: #ff0033; }
.ytl-icon path { fill: #fff; }
.ytl-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.ytl-row {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding-block: clamp(20px, 2.6vw, 40px);
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.ytl-text { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; min-width: 0; }
.ytl-name { font-size: var(--fs-h2); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.ytl-meta { font-size: var(--fs-body-lg); color: var(--text-muted); white-space: nowrap; }
.ytl-go {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(52px, 6vw, 88px);
  aspect-ratio: 1;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.ytl-go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
[dir="rtl"] .ytl-go svg { scale: -1 1; } /* ↖ in Hebrew: "forward" points left */
.ytl-row:hover .ytl-go,
.ytl-row:focus-visible .ytl-go { color: var(--bg); background: var(--text); border-color: var(--text); }
.ytl-row:hover .ytl-go svg { transform: translate(2px, -2px); }
@media (max-width: 600px) {
  .ytl-text { flex-direction: column; align-items: flex-start; }
  .ytl-label { gap: 12px; }
  .ytl-icon { width: 34px; height: 24px; }
}
/* The large photo in a soft frame, like the reference */
.ar-photo {
  width: min(520px, 100%);
  margin: 0;
  padding: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 22px;
}
.ar-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 1333; object-fit: cover; border-radius: 14px; }
.ar .yt { align-items: center; }
.ar .yt-links { justify-content: center; }
section[hidden] { display: none !important; }

.yt { display: flex; flex-direction: column; gap: 12px; margin-top: clamp(-80px, -4vw, -20px); }
.yt-label { font-size: var(--fs-sm); color: var(--text-dim); }
.yt-links { display: flex; flex-wrap: wrap; gap: 10px; }
.yt-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  direction: ltr;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition: background-color 0.2s, border-color 0.2s;
}
.yt-link:hover { background: var(--surface); border-color: var(--border-strong); }
.yt-link svg { width: 20px; height: 20px; fill: currentColor; }

/* ==========================================================
   How I work: three cards after the user's reference (under review on how-test.html): title at the top,
   a line-art drawing in the middle, the description at the bottom. Each drawing tells its card's story
   and plays when the card comes into view (.art-on from script.js; replays on hover). Black and white only.
   ========================================================== */
.how3 {
  /* Black and white outlines only (user request): ink on the light page, white on the dark one */
  --art-line: color-mix(in srgb, var(--text) 32%, transparent);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.how3-card {
  display: flex;
  flex-direction: column;
  min-height: clamp(420px, 38vw, 540px);
  padding: clamp(22px, 2.2vw, 32px);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.how3-card h3 { order: -1; font-size: var(--fs-h4); } /* the drawing comes first in the markup; cards show the title above it */
.how3-card p { max-width: 36ch; font-size: var(--fs-body); color: var(--text-muted); }
.how3-card { transition: border-color 0.3s var(--ease); }
.how3-card:hover { border-color: var(--border-strong); }
.how3-art { display: block; flex: 1; width: 100%; max-width: 320px; min-height: 180px; margin: 24px auto; overflow: visible; }
.how3-art * { transform-box: fill-box; transform-origin: center; }
/* Line weights follow the logo (a bold ring and a straight bar): bold rings, straight lines, square ends */
.how3-art .ln { fill: none; stroke: var(--art-line); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* Outlines only (user request): the emphasized shapes are full-strength strokes instead of fills */
.how3-art :is(.fill, .done) { fill: none; stroke: var(--text); stroke-width: 4; vector-effect: non-scaling-stroke; }
/* 1. Path: the dashed "design" circle, one line drawn to the filled "live" circle */
.art-path .dash { stroke-dasharray: 5 6; }
.how3-art .draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s var(--ease) var(--d, 0.15s); }
.art-path .mid { transition: opacity 0.4s var(--ease) 0.55s; }
.how3-art .grow { transition: transform 0.8s var(--ease) var(--d, 0.95s), opacity 0.6s var(--ease) var(--d, 0.95s); }
/* 2. Steps: completed steps filled (softer), the current one full with a ring, the last one still open */
.art-steps .done { opacity: 0.5; }
.art-steps .hole { fill: var(--card-bg); } /* covers the connecting line inside the open steps */
.art-steps .done,
.art-steps .now { transition: transform 0.6s var(--ease), opacity 0.5s var(--ease); transition-delay: calc(0.15s + var(--i) * 0.3s); }
.art-steps .ring { stroke-dasharray: 4 5; transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); transition-delay: calc(0.15s + var(--i) * 0.3s); }
/* 3. Link: two equal single-line rings slide in and lock, woven over and under (a small break where one passes under) */
.art-link .gap { fill: none; stroke: var(--card-bg); stroke-width: 14; vector-effect: non-scaling-stroke; }
.art-link .slide { transition: transform 1.2s var(--ease) 0.15s; }
/* Fade the drawing as one layer: fading each ring and its redrawn arcs separately made the overlaps
   add up into bright spots at the start */
.art-link { transition: opacity 0.6s var(--ease) 0.15s; }
/* Before playing (script.js adds .art-on when the card is in view, and replays it on hover) */
.js .how3-card:not(.art-on) .draw { stroke-dashoffset: 1; }
.js .how3-card:not(.art-on) .mid { opacity: 0; }
.js .how3-card:not(.art-on) .grow { transform: scale(0.4); opacity: 0; }
.js .how3-card:not(.art-on) :is(.done, .now) { transform: scale(0.3); opacity: 0; }
.js .how3-card:not(.art-on) .ring { transform: scale(0.7); opacity: 0; }
.js .how3-card:not(.art-on) .slide { transform: translateX(var(--dx)); }
.js .how3-card:not(.art-on) .art-link { opacity: 0.25; }
.how3-card.art-reset .how3-art * { transition: none !important; }
/* Black cards (the user's pick; how-test.html?white shows the white ones): white text and drawings on the light page */
.how3-black .how3-card {
  --text: #f5f5f5;
  --text-muted: #b3b3b3;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.26);
  --card-bg: #0b0b0b;
  --art-line: color-mix(in srgb, var(--text) 32%, transparent);
  color: var(--text);
  background: var(--card-bg);
}
/* No cards (the default on how-test.html; ?how=cards shows the cards): the drawing on top,
   then the title, then the description, centered on the page */
.section-head-bare { padding-top: 0; border-top: 0; }
.how3-open { gap: clamp(40px, 5vw, 80px); }
.how3-open .how3-card {
  --card-bg: var(--bg); /* the weave gaps and open steps cut in the page color */
  min-height: 0;
  padding: 0;
  align-items: center;
  text-align: center;
  background: none;
  border: 0;
  border-radius: 0;
}
.how3-open .how3-card h3 { order: 0; }
.how3-open .how3-art { flex: none; min-height: 0; aspect-ratio: 300 / 240; max-width: 280px; margin: -24px auto 0; } /* the viewBox has ~50px of air around the shapes */
.how3-open .how3-card p { margin-top: 12px; }
/* Light outlined cards, styled like the pricing cards (.p3-card): page-colored fill, hairline border,
   25px radius; the drawing on top, then the title and description, start-aligned like the pricing text */
.how3-soft { gap: 32px; }
.how3-soft .how3-card {
  align-items: stretch;
  padding: 38px 36px 40px;
  text-align: start;
  border: 1px solid var(--p3-line, #e2e2e2);
  border-radius: 25px;
}
.how3-soft .how3-card h3 { font-size: 24px; line-height: 30px; letter-spacing: -0.01em; }
.how3-soft .how3-card p { max-width: none; margin-top: 12px; line-height: 24px; }
.how3-soft .how3-art { margin: -8px auto 8px; }
@media (max-width: 600px) { .how3-soft .how3-card { padding: 28px 24px 32px; } }

/* ==========================================================
   Testimonials
   ========================================================== */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }
.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.quote p { font-size: var(--fs-body-lg); line-height: 1.75; }
.quote figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: center;
}
.avatar {
  grid-row: span 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}
.avatar-ph {
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--text-dim);
  border: 1px dashed var(--border-strong);
}
.quote figcaption strong { font-size: var(--fs-body); font-weight: 700; }
.quote figcaption span:not(.avatar) { font-size: var(--fs-sm); color: var(--text-dim); }

/* Testimonials, one quote at a time (under review on how-test.html), after the user's reference: a large
   centered quote, the person and the arrows on one line below it. .qt-dark makes the section a black band. */
.qt-dark {
  --text: #f5f5f5;
  --text-muted: #b3b3b3;
  --text-dim: #8a8a8a;
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.24);
  color: var(--text);
  background: #0b0b0b;
}
.qt-inner { max-width: 880px; margin-inline: auto; }
.qt-stack { display: grid; }
.qt-item {
  grid-area: 1 / 1; /* all quotes share one cell: the tallest sets the height, so switching never moves the page */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 52px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0.5s;
}
.qt-item.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0.15s, 0.15s, 0s; }
.qt-item blockquote p {
  position: relative;
  font-size: var(--fs-h3);
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.qt-item blockquote p::before { /* hanging opening quote, outside the text column */
  content: '"';
  position: absolute;
  inset-inline-end: 100%;
  margin-inline-end: 0.12em;
}
.qt-item blockquote p::after { content: '"'; }
.qt-item figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline-end: 112px; /* room for the arrows on the same line */
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.qt-item figcaption strong { font-weight: 400; color: var(--text-dim); }
.qt-item .avatar { width: 40px; height: 40px; }
.qt-inner { position: relative; }
.qt-nav { position: absolute; inset-inline-end: 0; bottom: 0; display: flex; gap: 4px; height: 40px; align-items: center; }
.qt-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.qt-btn:hover { color: var(--text); background: var(--surface); }
.qt-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qt-next svg { transform: scaleX(-1); } /* RTL: "previous" points right, "next" points left */

/* ==========================================================
   Decorations (under review on how-test.html): the logo's shapes (a bold ring and a straight bar), large,
   faint and cropped by their container. At most one per section; they play once when they come into view.
   ========================================================== */
.deco { position: absolute; z-index: 0; pointer-events: none; color: var(--text); opacity: 0.13; }
.deco * { transform-box: fill-box; transform-origin: center; }
.cta-panel { position: relative; overflow: hidden; isolation: isolate; }
.cta-panel > :not(.deco, .cta-trail, .cta-fan) { position: relative; z-index: 1; }
/* Final CTA image trail (after the user's reference): wall screenshots follow the mouse and fade away.
   They sit under the text and are clipped by the panel. Touch screens and reduced motion get a still fan. */
.cta-trail { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cta-fan img {
  position: absolute;
  width: clamp(150px, 14vw, 210px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.cta-trail .ti { position: absolute; top: 0; left: 0; width: clamp(150px, 14vw, 210px); aspect-ratio: 4 / 3; will-change: transform; pointer-events: none; }
.cta-trail .ti img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; border-radius: 10px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4); will-change: transform, opacity; user-select: none; } /* 4:3, the size of the earlier versions (the upright 4:5 crop looked wrong to the user) */
.cta-fan { position: absolute; inset-inline-end: clamp(16px, 4vw, 64px); bottom: -24px; z-index: 0; width: 420px; height: 260px; pointer-events: none; }
.cta-fan img { bottom: calc(var(--k) * 26px); inset-inline-end: calc(var(--k) * 52px); transform: rotate(calc(-4deg + var(--k) * 2deg)); }
.cta-trail-on .cta-fan { display: none; } /* a mouse is present: the trail replaces the fan */
/* Full-width version (the default on how-test.html; ?cta=panel shows the panel): spans the page, centered, faint dot grid */
.contact-full { padding-bottom: 0; }
.contact-full > .container { max-width: none; padding-inline: 0; }
.contact-full .cta-panel {
  display: grid;
  place-items: center;
  align-content: center; /* keep the heading and the buttons together in the middle */
  min-height: 82vh; /* about 80-85% of the screen (user request) */
  text-align: center;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.09) 1px, transparent 1.5px) 0 0 / 28px 28px,
    radial-gradient(70% 60% at 50% 50%, #151515, #070707 75%);
}
.contact-full .cta-panel h2 { margin-inline: auto; }
.contact-full .cta-actions { justify-content: center; }
/* Testimonials: a positioning context for the section (the decorative rings were removed on 2026-10-06) */
.qt { position: relative; overflow: hidden; isolation: isolate; --deco-bg: var(--bg); }
.qt-dark { --deco-bg: #0b0b0b; }
.qt > .container { position: relative; z-index: 1; }

/* ==========================================================
   Statement: one big line between Testimonials and Process
   ========================================================== */
.statement { padding-block: calc(var(--section-y) * 0.6) 0; }
.statement-text {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.statement-text > span { display: block; } /* one sentence per line */
/* how-test.html: the Statement sits between How I work (which brings its own bottom space) and the black quote band */
.statement-gap { padding-block: 0 var(--section-y); }
.statement-text > span:first-child { color: var(--text-dim); }
/* how-test.html / en.html (2026-10-05): the Statement as a cinematic title card. User: "way bigger", then "100 view
   height, centered, with an animation", then "almost full width… bigger and cinematic". Each sentence is set in fixed
   lines (.ln) and script.js sizes it so its longest line spans ~98% of the container (capped by the screen height).
   With motion (.st-pin) the section is a 260vh track with a sticky full-screen stage and the two sentences share one
   frame: the first rises in and is struck out, then (40% through the pin) it falls back and fades while the second
   rises in line by line. Scrolling back reverses it. Without JS or with reduced motion: both sentences stacked */
.statement-xl { padding-block: 0; text-align: center; }
.st-stage { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; padding-block: 88px 48px; }
.st-pin .st-track { height: 260vh; }
.st-pin .st-stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.statement-xl .container { width: 100%; }
.statement-xl .statement-text { display: grid; justify-items: center; font-size: var(--fs-mega); line-height: 0.96; letter-spacing: -0.05em; }
:lang(he) .statement-xl .statement-text { line-height: 1.02; letter-spacing: -0.035em; }
.statement-xl .statement-text > span + span { margin-top: 0.3em; }
.st-pin .statement-xl .statement-text > span, .statement-xl.st-pin .statement-text > span { grid-area: 1 / 1; align-self: center; margin: 0; }
.statement-xl .ln { display: block; width: fit-content; margin-inline: auto; white-space: nowrap; }
@media (max-width: 600px) {
  /* phones: the lines wrap naturally at a fixed large size instead of being fitted */
  .statement-xl .statement-text { font-size: 15vw; }
  .statement-xl .ln { display: inline; white-space: normal; }
  .statement-xl .statement-text > span { text-wrap: balance; }
}
/* The strike: drawn over the letters in the full text color. Without the animation it is a plain line-through;
   with it (.st-ready), script.js wraps each word of the phrase and a bar on top of each word (running on through
   the following space) grows in turn, so the words read as one continuous stroke, even across a line break */
.st-strike { text-decoration: line-through var(--text) 0.085em; }
.st-ready .st-strike { text-decoration: none; }
.st-sw { position: relative; display: inline-block; } /* one box per word, so a bar never splits at a line break */
.st-sw::after {
  content: "";
  position: absolute;
  inset-inline: 0 calc(-1 * var(--gap, 0.26em) - 1px); /* 1px of overlap into the next word's bar: no hairline seam */
  top: 54%;
  height: 0.085em;
  background: var(--text);
  transform-origin: left center;
  transform: scaleX(var(--k, 1)); /* --k: how much of this word's bar is drawn, set from the scroll (script.js) */
}
:lang(he) .st-sw::after { top: 50%; }
[dir="rtl"] .st-sw::after { transform-origin: right center; }
.st-sw.st-eol::after, .st-sw:last-child::after { inset-inline-end: 0; }
/* second sentence: each word in its own mask (script.js), rising in by line */
.st-w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.06em 0.16em; margin-block: -0.06em -0.16em; }
.st-wi { display: inline-block; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: no-preference) {
  .st-ready .st-s1 { opacity: 0; transform: translateY(0.25em); transition: opacity 0.9s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
  .st-ready.st-on .st-s1 { opacity: 1; transform: none; }
  .st-ready.st-two .st-s1 { opacity: 0; transform: translateY(-0.1em) scale(0.92); transition: opacity 0.7s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1); }
  .st-ready:not(.st-two) .st-wi { transform: translateY(115%); }
}

/* ==========================================================
   Process — accordion list after the user's reference: number in the side column, title on the
   heading's line, what the step produces at the far end. One step is open at a time (JS);
   the rest stay dim with only their titles showing.
   ========================================================== */
.steps { border-top: 1px solid var(--border); }
.step { border-bottom: 1px solid var(--border); }
.step-h { font: inherit; }
.step-head {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  column-gap: var(--col-gap);
  align-items: baseline;
  width: 100%;
  padding-block: 26px;
  font: inherit;
  color: var(--text-dim);
  text-align: start;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.35s var(--ease);
}
.step-num { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.step-title { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.step-meta { font-size: var(--fs-sm); white-space: nowrap; }
.step.is-open .step-head,
.step-head:hover { color: var(--text); }

/* Height animates from 0 to the text's own height */
.step-panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.45s var(--ease), opacity 0.35s var(--ease);
}
.step-panel > div { overflow: hidden; }
.step-panel p {
  max-width: 560px;
  margin: -8px 0 0;
  margin-inline-start: calc(56px + var(--col-gap));
  padding-bottom: 30px;
  font-size: var(--fs-body);
  color: var(--text-muted);
}
.js .step:not(.is-open) .step-panel { grid-template-rows: 0fr; opacity: 0; }

/* ----- Process variant (how-test.html, 2026-10-04): stacking cards, text only, laid out after the user's
   reference: dark cards, a large two-line title (the second line dim), a row of small tags and a paragraph
   with an asterisk at the bottom. All cards stick at the same spot; as the next one slides over, the covered
   card rises by --peek (so its first title line stays visible above the new card), shrinks and darkens.
   Older cards sit a little higher and smaller behind it. script.js sets --d (how many cards cover this one,
   fractional) on Lenis's scroll; the pin itself is CSS sticky, so it never lags. Grid rows of 1fr give
   every card the height of the tallest. ----- */
.pc {
  --pc-bg: #1a1a1a;
  --pc-shade: #0b0b0b;
  --pc-text: #f5f5f5;
  --pc-muted: #b3b3b3;
  --pc-dim: #8a8a8a;
  --pc-line: rgba(255, 255, 255, 0.14);
}
.pc-list {
  --peek: 118px;    /* the covered card's visible strip: its padding + the first title line */
  --stick: calc(104px + var(--peek));
  display: grid;
  grid-auto-rows: 1fr;
  row-gap: 48px;
}
.pc-card {
  --d: 0;
  position: sticky;
  top: var(--stick);
  display: flex;
  flex-direction: column;
  min-height: clamp(420px, 52vh, 480px);
  padding: 40px 48px 44px;
  color: var(--pc-text);
  background: var(--pc-bg);
  border-radius: 24px;
  transform-origin: 50% 0;
  transform:
    translateY(calc(var(--peek) * -1 * min(var(--d), 1) - 14px * min(max(0, var(--d) - 1), 2)))
    scale(calc(1 - 0.045 * min(var(--d), 3)));
}
.pc-card::after { /* darkens the covered card */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pc-shade);
  opacity: calc(min(var(--d), 1) * 0.6);
  pointer-events: none;
}
.pc-title { font-size: var(--fs-h2); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.pc-title span { display: block; }
.pc-title-2 { color: var(--pc-dim); }
.pc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;
  padding: 40px 0 0;
  list-style: none;
}
.pc-tags li {
  padding: 4px 12px;
  font-size: var(--fs-xs);
  color: var(--pc-muted);
  border: 1px solid var(--pc-line);
  border-radius: 999px;
}
.pc-text { display: flex; gap: 12px; max-width: 620px; margin-top: 20px; font-size: var(--fs-body-lg); line-height: 1.6; color: var(--pc-muted); }
.pc-star { flex: none; width: 20px; height: 20px; margin-top: 0.25em; fill: none; stroke: var(--pc-text); stroke-width: 1.5; stroke-linecap: round; }
.pc-num,
.pc-tab,
.pc-out { display: none; } /* the folder version (.pc-folder) shows the tab and the deliverable */
/* Flat filled cards (default on how-test, 2026-10-04, after the user's second reference): square corners, a dark fill
   with a thin light border, the number set vertically at the top, then empty space, the title, the description
   and a hairline under it. The second title line, tags and asterisk belong to the rounded version (?pc=round).
   On wide screens the cards take the end column (near-square, like the reference) and the heading stays beside them */
.pc-flat {
  --pc-flat-bg: #0b0b0b;
  --pc-flat-line: rgba(255, 255, 255, 0.22);
}
.pc-flat .pc-card {
  min-height: clamp(460px, 58vh, 540px);
  padding: 36px 36px 48px;
  background: var(--pc-flat-bg);
  border: 1px solid var(--pc-flat-line);
  border-radius: 0;
}
.pc-flat .pc-card::after { inset: 0; background: var(--pc-flat-bg); opacity: calc(min(var(--d), 1) * 0.55); } /* fades the content, keeps the border */
.pc-flat .pc-num {
  display: block;
  align-self: flex-start; /* hugs the start edge: right in Hebrew, left in English */
  writing-mode: vertical-rl;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pc-flat .pc-title-2,
.pc-flat .pc-tags,
.pc-flat .pc-star { display: none; }
.pc-flat .pc-title { margin-top: auto; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; }
.pc-flat .pc-text {
  display: block;
  max-width: none;
  margin-top: 16px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--pc-flat-line);
}
@media (min-width: 1024px) {
  .pc-flat .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px); column-gap: clamp(48px, 6vw, 112px); align-items: start; }
  .pc-flat .section-head { position: sticky; top: 120px; margin-bottom: 0; }
}

@media (max-width: 960px) {
  .pc-list { --peek: 80px; --stick: calc(84px + var(--peek)); row-gap: 32px; }
  .pc-card { min-height: 0; padding: 28px 24px 30px; border-radius: 20px; }
  .pc-tags { padding-top: 32px; }
  .pc-text { font-size: var(--fs-body); }
  .pc-star { width: 18px; height: 18px; }
  .pc-flat .pc-card { min-height: 0; padding: 28px 24px 32px; }
  .pc-flat .pc-num { font-size: 32px; }
  .pc-flat .pc-title { margin-top: 64px; }
  .pc-flat .pc-text { padding-bottom: 24px; }
}

/* ==========================================================
   Packages
   ========================================================== */
/* Layout after the user's pricing reference (three cards, featured middle card, pill buttons),
   in the site's own dark palette */
.packages { isolation: isolate; --grid-line: #0b0b0b; }
/* Faint grid across the whole section, behind the cards. Solid line color (not low-alpha white),
   pinned to whole pixels (0 0, not centered) and faded with a page-colored overlay rather than
   mask-image: Chrome/Brave rounded the alpha + mask version down to almost nothing, Firefox didn't */
.packages::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, var(--bg), transparent 20%, transparent 80%, var(--bg)),
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px) 0 0 / 48px 48px;
}
.packages-head { max-width: 640px; margin: 0 auto clamp(48px, 6vw, 80px); text-align: center; }
.packages-head h2 {
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

/* Two main cards side by side; the Figma block, the "something else" line and the notes share their width */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: stretch; }
.plans, .plan-figma, .plans-other { max-width: 1120px; margin-inline: auto; }
.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 32px);
  background: #0d0d0d; /* solid, so the grid stays behind the cards */
  border: 1px solid var(--border);
  border-radius: 20px;
}
.plan h3 { font-size: var(--fs-h4); letter-spacing: -0.01em; }
.plan-for { margin-top: 12px; font-size: var(--fs-body); color: var(--text-muted); }
.plan-lead { margin-top: 24px; font-size: var(--fs-body); font-weight: 700; } /* "everything in the landing page, plus:" */
.plan-list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; margin-bottom: 40px; }
.plan-lead + .plan-list { margin-top: 16px; }
.plan-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-body); line-height: 1.45; }
.check {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.2em;
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plan-time { margin-top: auto; font-size: var(--fs-sm); color: var(--text-muted); } /* the extra room goes above it, so the timelines, prices and buttons line up */
.plan-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}
.plan-time + .plan-price { margin-top: 8px; }
.plan-price p { display: flex; align-items: baseline; gap: 8px; }
.plan-from { font-size: var(--fs-sm); color: var(--text-muted); }
.plan-price strong { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.02em; }
.plan-extra { margin-top: 6px; font-size: var(--fs-sm); color: var(--text-muted); } /* the price of each extra page, under the base price */
.btn.plan-btn { width: 100%; margin-top: 24px; padding-block: 16px; border-radius: var(--radius-pill); }
.plan-note { margin-top: 12px; font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }

.plan-featured {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 70%),
    linear-gradient(to bottom, #1c1c1c, #0f0f0f);
  border-color: var(--border-strong);
}

/* Figma block: full width, slimmer and lighter than the main cards (page-colored fill, smaller padding) */
.plan.plan-figma {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px 48px;
  margin-top: 20px;
  padding: clamp(20px, 2vw, 28px);
  background: var(--bg);
}
.plan-inline { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; }
.plan-inline li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-muted); }
.plan-figma-side { display: flex; flex-direction: column; align-items: flex-start; min-width: 240px; }
.plan-figma-price { display: flex; align-items: baseline; gap: 8px; }
.plan-figma-price strong { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.02em; }
.plan-figma .btn.plan-btn { margin-top: 16px; padding-block: 14px; }

/* "Something else": a line with a button, not a card */
.plans-other {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  margin-top: 40px;
  text-align: center;
}
.plans-other p { font-size: var(--fs-body-lg); color: var(--text-muted); }
.plans-other strong { color: var(--text); font-weight: 700; }
.plans-other .btn { padding: 12px 32px; border-radius: var(--radius-pill); } /* the pill shape of the package buttons */

.packages[hidden] { display: none; }

/* ----- Pricing variant (how-test.html): three tiers built from the user's Figma frame
   (rMqfXPlo6f5gOYq2SxGJMh, node 26:859). Sizes, spacing and colors are the frame's own values,
   so they are scoped here instead of using the site's type tokens. The frame's blue
   (badge, arrows) is ink, per the black-and-white rule; the label and the billing toggle were removed ----- */
.p3 {
  --p3-line: #e2e2e2;     /* card border (frame: #e2e2e0) */
  --p3-rule: #e9e9e9;     /* divider (frame: #e9e9e7) */
}
.p3::before { display: none; }
/* User's measurements (2026-10-03): cards 475px wide and 720px tall, names 24px, prices 40px semibold,
   all other text 16px, 54px buttons. The rest of the frame's spacing is scaled by the same ~1.33 */
.p3-wrap { max-width: calc(3 * 475px + 2 * 32px + 2 * var(--gutter)); }
/* Intro: start-aligned, offset like the frame (an 88px label + a 197px gap before the copy) */
.p3-head { padding-inline-start: 285px; margin-bottom: 64px; }
.p3-head h2 { font-size: 50px; font-weight: 700; line-height: 54px; letter-spacing: -0.02em; color: var(--text); }
.p3-head p { max-width: 440px; margin-top: 23px; font-size: 16px; line-height: 24px; color: var(--text-muted); }
.p3-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 475px)); justify-content: center; gap: 32px; align-items: stretch; }
.p3-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 720px;
  padding: 38px 36px 36px;
  background: var(--bg);
  border: 1px solid var(--p3-line);
  border-radius: 25px;
}
.p3-featured { background: #fff; border-color: #fff; }
.p3-badge {
  position: absolute;
  top: -1px;
  inset-inline-end: 34px;
  display: flex;
  align-items: center;
  height: 38px;
  padding-inline: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  border-radius: 3px 3px 12px 12px;
  box-shadow: 0 6px 11px rgba(0, 0, 0, 0.14);
}
.p3-card h3 { font-size: 24px; font-weight: 700; line-height: 30px; letter-spacing: -0.01em; color: var(--text); }
.p3-price { display: flex; align-items: center; gap: 8px; padding-top: 24px; }
.p3-price strong { font-size: 40px; font-weight: 700; line-height: 50px; letter-spacing: -0.02em; color: var(--text); }
.p3-price span { font-size: 16px; color: var(--text-muted); }
/* Two lines of room, so every button sits at the same height */
.p3-desc { min-height: 64px; padding-top: 16px; font-size: 16px; line-height: 24px; color: var(--text-muted); }

.p3-card .btn.p3-btn {
  width: 100%;
  height: 54px;
  margin-top: 29px;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  background: #fff;
  border: 0.6px solid #e8e8e8;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.p3-card .btn.p3-btn:hover { background: #fafafa; }
.p3-featured .btn.p3-btn { color: #fff; background: linear-gradient(to bottom, #222, #000); border-color: #242424; }
.p3-featured .btn.p3-btn:hover { background: linear-gradient(to bottom, #333, #111); }

/* Fixed row heights (24px facts, 22px items): Hebrew's taller default line box would add height per row */
.p3-facts { position: relative; display: flex; flex-direction: column; gap: 12px; padding-top: 37px; padding-bottom: 24px; }
.p3-facts::after { /* the reference's fine dashed divider */
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: repeating-linear-gradient(to left, #e2e2e2 0 3px, transparent 3px 6px);
}
.p3-facts li { display: flex; gap: 12px; align-items: center; min-height: 24px; font-size: 16px; line-height: 24px; color: var(--text); }
.p3-ic { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.p3-label { padding-top: 25px; font-size: 16px; line-height: 22px; color: var(--text); }
.p3-list { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.p3-list li { display: flex; gap: 11px; align-items: flex-start; min-height: 22px; font-size: 16px; line-height: 22px; color: var(--text); }
.p3-arrow {
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 2.5px; /* centers the icon on the first 22px line, also when an item wraps */
}
/* Plus icons by default (user: "try a version with plus icons"); ?icons=arrow brings back the reference's arrows */
.p3-arrow .i-arrow { display: none; }
.p3-arrows .p3-arrow .i-arrow { display: inline; }
.p3-arrows .p3-arrow .i-plus { display: none; }
.p3-arrows .p3-arrow { transform: scaleX(-1); } /* ↗ becomes ↖: "forward" in RTL */

/* ?plancta=bottom: the button moves under the list, level across the cards */
.p3-cta-bottom .btn.p3-btn { order: 1; margin-top: auto; }
.p3-cta-bottom .p3-list { margin-bottom: 28px; }

@media (max-width: 960px) {
  .p3-head { padding-inline-start: 0; margin-bottom: 40px; }
  .p3-head h2 { font-size: 40px; line-height: 44px; }
}
/* Below ~1180px three 16px-text cards get too narrow: stack them at their full 475px width */
@media (max-width: 1180px) {
  .p3-grid { grid-template-columns: minmax(0, 475px); gap: 24px; }
  .p3-card { min-height: 0; }
}
/* Phones: the tab and the full-width tier name were touching (user); the name drops below the tab */
@media (max-width: 600px) {
  .p3-featured { padding-top: 64px; }
}

/* ==========================================================
   Fit
   ========================================================== */
.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
}
.fit-col h3 { font-size: var(--fs-h4); font-weight: 700; margin-bottom: 12px; }
.fit-list li {
  position: relative;
  padding: 16px 0;
  padding-inline-start: 32px;
  font-size: var(--fs-body);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.fit-list li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 16px;
  font-weight: 700;
}
.fit-yes li::before { content: "✓"; color: var(--text); }
.fit-no li::before { content: "✕"; color: var(--text-dim); font-size: var(--fs-sm); }

/* ==========================================================
   FAQ
   ========================================================== */
.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 24px;
  font-size: var(--fs-h4);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--text-muted);
  transition: transform 0.45s var(--ease);
}
.faq-item[open]:not(.is-closing) summary::after { transform: rotate(45deg); } /* .is-closing (script.js) turns the × back at the start of the close */
.faq-item p { max-width: 720px; padding-bottom: 26px; font-size: var(--fs-body); color: var(--text-muted); }

/* ==========================================================
   Final CTA
   ========================================================== */
.contact { padding-top: 0; }
.cta-panel {
  padding: clamp(48px, 8vw, 120px) clamp(24px, 6vw, 96px);
  background: radial-gradient(90% 120% at 50% 0%, #1f1f1f, #0b0b0b 70%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 32px;
}
.cta-panel h2 {
  max-width: 22ch;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(32px, 4vw, 56px); }
.cta-mail {
  font-size: var(--fs-body);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--border-strong);
  transition: color 0.2s;
}
.cta-mail:hover { color: var(--text); }

/* ==========================================================
   Footer
   ========================================================== */
.site-footer { padding-block: 40px; border-top: 1px solid var(--border); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.footer-link { transition: color 0.2s; direction: ltr; }
.footer-link:hover { color: var(--text); }

/* ==========================================================
   Bottom blur: fixed, progressive (light at the top edge, strong at the bottom)
   ========================================================== */
.bottom-blur {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  height: clamp(90px, 14vh, 150px);
  pointer-events: none;
}
.bottom-blur i,
.bottom-blur::after {
  position: absolute;
  inset: 0;
}
.bottom-blur i { display: block; }
/* Each layer blurs a band of the strip; bands overlap so the blur ramps up smoothly */
.bottom-blur i:nth-child(1) { --b: 0.5px; --m: transparent 0%, #000 12.5%, #000 25%, transparent 37.5%; }
.bottom-blur i:nth-child(2) { --b: 1px;   --m: transparent 12.5%, #000 25%, #000 37.5%, transparent 50%; }
.bottom-blur i:nth-child(3) { --b: 2px;   --m: transparent 25%, #000 37.5%, #000 50%, transparent 62.5%; }
.bottom-blur i:nth-child(4) { --b: 4px;   --m: transparent 37.5%, #000 50%, #000 62.5%, transparent 75%; }
.bottom-blur i:nth-child(5) { --b: 8px;   --m: transparent 50%, #000 62.5%, #000 75%, transparent 87.5%; }
.bottom-blur i:nth-child(6) { --b: 16px;  --m: transparent 62.5%, #000 75%, #000 87.5%, transparent 100%; }
.bottom-blur i:nth-child(7) { --b: 32px;  --m: transparent 75%, #000 87.5%, #000 100%; }
.bottom-blur i {
  -webkit-backdrop-filter: blur(var(--b));
  backdrop-filter: blur(var(--b));
  -webkit-mask-image: linear-gradient(to bottom, var(--m));
  mask-image: linear-gradient(to bottom, var(--m));
}
/* A soft tint toward the page color adds depth */
.bottom-blur::after {
  content: "";
  background: linear-gradient(to bottom, transparent, rgba(3, 3, 3, 0.35));
  transition: opacity 0.3s;
}
.bottom-blur.on-light::after { opacity: 0; } /* no dark tint over the light hero */

/* ==========================================================
   Reveal on scroll (subtle)
   ========================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .pc-card { position: relative; top: auto; transform: none; }
  .pc-list { --stick: 0px; }
  .pc-card::after { display: none; }

}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 960px) {
  .plans { grid-template-columns: 1fr; max-width: 560px; }
  .plan.plan-figma { grid-template-columns: 1fr; max-width: 560px; gap: 20px; }
  .plan-figma-side { min-width: 0; }
  .plan-figma .btn.plan-btn { width: 100%; }
}

@media (max-width: 960px) {

  .header-actions { margin-inline-start: auto; }
  .header-actions .btn { display: none; } /* mobile: menu button only */
  .menu-toggle { display: inline-flex; }
  .main-nav {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline: var(--gutter);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.25s var(--ease), visibility 0.25s;
  }
  .main-nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .main-nav ul {
    flex-direction: column;
    padding: 10px;
    background: #111;
    border-radius: 20px;
  }
  .main-nav a { padding: 14px 18px; font-size: 18px; border-radius: 12px; color: var(--text); }

  .principles { grid-template-columns: repeat(2, 1fr); }
  .how3 { grid-template-columns: 1fr; max-width: 560px; }
  .how3-card { min-height: 0; }
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { width: 240px; }
  .about-text { order: -1; } /* stacked: text first, photo after it */
  .quotes { grid-template-columns: 1fr; gap: 48px; max-width: 680px; }
  .step-head { grid-template-columns: 40px 1fr auto; column-gap: 16px; padding-block: 22px; }
  .step-panel p { margin-inline-start: 56px; }
  .fit-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 600px) {
  .qt-item blockquote p::before { position: static; margin: 0; } /* no hanging quote at the screen edge */
  .cta-panel:not(.cta-trail-on) { padding-bottom: 200px; } /* phones: room for the fan under the text */
  .cta-fan { width: 300px; height: 170px; inset-inline-end: -24px; bottom: -36px; }
  .cta-fan img { width: 140px; }
  .cta-fan img { bottom: calc(var(--k) * 18px); inset-inline-end: calc(var(--k) * 36px); }
  .qt-item blockquote p { font-size: calc(var(--fs-h3) * 0.85); } /* 15% smaller on phones (user request) */
  .logo svg { width: 26px; }
  .principles { grid-template-columns: 1fr; }
  .step-head { grid-template-columns: 32px 1fr; row-gap: 4px; }
  .step-meta { grid-column: 2; }
  .step-panel p { margin-inline-start: 48px; }
  .about-photo { width: 100%; height: auto; aspect-ratio: 1000 / 1333; } /* phones: full width, the photo's own proportions */
  /* Tighter hero so the first gallery row peeks above the fold on phones */
  .hero { padding-top: 100px; }
  .hero .lead { margin-top: 14px; font-size: var(--fs-lead); }
  .hero .btn { width: 100%; margin-top: 22px; }
  .wall { --col-w: 42cqw; margin-top: 28px; } /* phones: bigger tiles, so 2–3 columns show instead of 5 */
  .hero .br-phone { display: inline; } /* phones: 3 lines, rotating word on its own line */
  .hero .br-wide { display: none; }
  .cta-actions { flex-direction: column; align-items: stretch; text-align: center; }
  .footer-inner { flex-direction: column; text-align: center; }
}

/* ==========================================================
   Consistency pass (how-test.html and en.html, body.v2; 2026-10-05, user: "everything consistent and on the same
   grid"). One section-head style, two corner radii, every block on the container's edges.
   ========================================================== */
.v2 {
  --r-lg: 24px; /* cards, panels, the portrait frame */
  --r-md: 12px; /* buttons, work tiles, trail images, menu links */
}
/* Section heads: the same thin rule, 66px heading, start-aligned, same space below, everywhere
   (How I work had no rule and Packages had its own 50px head offset 285px in) */
.v2 .p3-head { padding-inline-start: 0; margin-bottom: clamp(56px, 7vw, 104px); }
.v2 .p3-head h2 { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.02em; }
.v2 .p3-head p { max-width: 560px; margin-top: 20px; font-size: var(--fs-body-lg); line-height: inherit; }
/* Cards: one radius and one padding */
.v2 .how3-card,
.v2 .p3-card,
.v2 .pc-card,
.v2 .pc-flat .pc-card { border-radius: var(--r-lg); }
.v2 .how3-soft .how3-card,
.v2 .p3-card,
.v2 .pc-flat .pc-card { padding: 38px 36px 36px; }
.v2 .ar-photo { border-radius: var(--r-lg); }
.v2 .ar-photo img { border-radius: calc(var(--r-lg) - 10px); }
/* Parallax portrait (script.js): at rest the image is 26% larger than its window (room for the ±12% drift),
   and up to 50% larger while the frame comes in, so it zooms out as it arrives */
.ar-photo-clip { display: block; overflow: hidden; border-radius: calc(var(--r-lg) - 10px); }
.ar-photo.is-parallax img { border-radius: 0; transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1.26)); will-change: transform; }

/* Buttons and small surfaces */
.v2 .btn,
.v2 .btn-sm,
.v2 .p3-card .btn.p3-btn,
.v2 .plans-other .btn { border-radius: var(--r-md); }
.v2 .shot { border-radius: var(--r-md); }
.v2 .cta-trail .ti img { border-radius: var(--r-md); }
/* Grid: the pricing cards and the YouTube rows sit on the same edges as every other section */
.v2 .p3-wrap { max-width: var(--container); }
.v2 .p3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2 .ar-lower { align-self: stretch; }
@media (max-width: 1180px) {
  .v2 .p3-grid { grid-template-columns: minmax(0, 1fr); } /* stacked: full width, like the other stacked cards */
}
@media (max-width: 960px) {
  .v2 .main-nav ul { border-radius: var(--r-lg); }
  .v2 .main-nav a { border-radius: var(--r-md); }
}
@media (max-width: 600px) {
  .v2 .how3-soft .how3-card,
  .v2 .p3-card,
  .v2 .pc-flat .pc-card { padding: 28px 24px 32px; }
  .v2 .p3-featured { padding-top: 64px; }
}

/* ----- Process as folder tabs (default on how-test and en, 2026-10-05, after the user's reference: "cards turning
   to tabs in a folder"). Each card has a tab on its top edge, a quarter of the width, each one further along
   (01 at the start edge, the last step at the far end; 4 or 5 steps). Every card sticks at the same spot, so the next card covers the
   previous card's body but not its tab: the covered steps stay as a row of folder tabs above the current one.
   The tab grows out of the card with concave corners (radial-gradient fillets). Cards step from the lightest
   surface to the darkest shade, so the stack reads like a folder of differently colored dividers. Body: title and
   description at the top, the step's deliverable as a large "stat" at the bottom, and a huge faint step number
   on the end side (the reference's image slot). No rise, shrink or shade: the next card simply covers it. ----- */
.pc-folder .pc-list {
  --tab: 52px;
  --fil: 18px;      /* the concave corner where the tab meets the card */
  --stick: calc(88px + var(--tab));
  --n: 4;           /* the number of steps: each tab takes 1/n of the width */
  row-gap: var(--pc-gap, calc(var(--tab) + 48px)); /* script.js widens it so each card settles before the next shows */
  padding-top: var(--tab);
}
.pc-folder .pc-card {
  --f-bg: #fcfcfc;
  --f-text: #0b0b0b;
  --f-muted: #4a4a4a;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto 1fr auto;
  grid-template-areas: "title num" "text num" "list num" ". num" "out num";
  column-gap: 48px;
  min-height: clamp(440px, 60vh, 560px);
  padding: 44px 48px 44px;
  color: var(--f-text);
  background: var(--f-bg);
  border-radius: var(--r-lg, 24px);
  transform: none;
}
.pc-folder .pc-card:nth-child(1) { border-start-start-radius: 0; }
.pc-folder .pc-card:nth-child(2) { --f-bg: #dedede; }
.pc-folder .pc-card:nth-child(3) { --f-bg: #2a2a2a; --f-text: #f5f5f5; --f-muted: #b3b3b3; }
.pc-folder .pc-card:nth-child(4) { --f-bg: #1a1a1a; --f-text: #f5f5f5; --f-muted: #b3b3b3; } /* only when there are 5 steps */
.pc-folder .pc-card:last-child { --f-bg: #0b0b0b; --f-text: #f5f5f5; --f-muted: #b3b3b3; }
.pc-folder .pc-list:has(> .pc-card:nth-child(5)) { --n: 5; }
.pc-folder .pc-card::after { display: none; }
.pc-folder .pc-tab {
  --i: 0;
  position: absolute;
  bottom: 100%;
  inset-inline-start: calc(var(--i) * 100% / var(--n));
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% / var(--n) - var(--fil) - 4px);
  height: var(--tab);
  padding-inline: 24px;
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--f-text);
  background: var(--f-bg);
  border-radius: 16px 16px 0 0;
}
.pc-folder .pc-card:nth-child(2) .pc-tab { --i: 1; }
.pc-folder .pc-card:nth-child(3) .pc-tab { --i: 2; }
.pc-folder .pc-card:nth-child(4) .pc-tab { --i: 3; }
.pc-folder .pc-card:last-child .pc-tab { inset-inline-start: auto; inset-inline-end: 0; } /* flush with the end edge */
.pc-folder .pc-card:last-child { border-start-end-radius: 0; }
.pc-folder .pc-tab::before,
.pc-folder .pc-tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: var(--fil);
  height: var(--fil);
  pointer-events: none;
}
/* RTL: the start side is the right */
.pc-folder .pc-tab::before { right: calc(var(--fil) * -1); background: radial-gradient(circle at 100% 0, transparent calc(var(--fil) - 0.5px), var(--f-bg) var(--fil)); }
.pc-folder .pc-tab::after { left: calc(var(--fil) * -1); background: radial-gradient(circle at 0 0, transparent calc(var(--fil) - 0.5px), var(--f-bg) var(--fil)); }
[dir="ltr"] .pc-folder .pc-tab::before { right: auto; left: calc(var(--fil) * -1); background: radial-gradient(circle at 0 0, transparent calc(var(--fil) - 0.5px), var(--f-bg) var(--fil)); }
[dir="ltr"] .pc-folder .pc-tab::after { left: auto; right: calc(var(--fil) * -1); background: radial-gradient(circle at 100% 0, transparent calc(var(--fil) - 0.5px), var(--f-bg) var(--fil)); }
.pc-folder .pc-card:nth-child(1) .pc-tab::before,
.pc-folder .pc-card:last-child .pc-tab::after { display: none; } /* flush with the card's edge */
.pc-folder .pc-tab-l { color: var(--f-muted); }
[lang="en"] .pc-folder .pc-tab-l { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-xs); }
.pc-folder .pc-tab-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-folder .pc-title { grid-area: title; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.03em; }
.pc-folder .pc-title-2,
.pc-folder .pc-star { display: none; }
/* what the step covers: the tags become a two-column list with small plus marks */
.pc-folder .pc-tags {
  grid-area: list;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 32px;
  max-width: 560px;
  margin: 28px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--f-text) 14%, transparent);
}
.pc-folder .pc-tags li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-size: var(--fs-body);
  color: var(--f-text);
  border: 0;
  border-radius: 0;
}
.pc-folder .pc-tags li::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  opacity: 0.55;
}
.pc-folder .pc-text { grid-area: text; display: block; max-width: 560px; margin-top: 24px; color: var(--f-muted); }
.pc-folder .pc-out { grid-area: out; display: flex; flex-direction: column; gap: 10px; padding-top: 40px; }
.pc-folder .pc-out-v { font-size: var(--fs-h3); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.pc-folder .pc-out-l { font-size: var(--fs-sm); color: var(--f-muted); }
.pc-folder .pc-num {
  grid-area: num;
  display: block;
  align-self: end;
  margin-bottom: -0.1em;
  font-size: clamp(120px, 15vw, 230px);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  opacity: 0.1;
}
@media (max-width: 960px) {
  .pc-folder .pc-list { --tab: 44px; --fil: 12px; --stick: calc(72px + var(--tab)); row-gap: var(--pc-gap, calc(var(--tab) + 32px)); }
  .pc-folder .pc-card { min-height: 0; padding: 32px 28px 32px; column-gap: 24px; }
  .pc-folder .pc-tab { padding-inline: 16px; }
  .pc-folder .pc-num { font-size: 96px; }
}
@media (max-width: 600px) {
  .pc-folder .pc-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "text" "list" "." "out"; min-height: 380px; padding: 28px 24px 30px; }
  .pc-folder .pc-tab { justify-content: center; padding-inline: 8px; }
  .pc-folder .pc-tab-l, .pc-folder .pc-num { display: none; }
  .pc-folder .pc-text { margin-top: 16px; font-size: var(--fs-body); }
  .pc-folder .pc-out { padding-top: 32px; }
  .pc-folder .pc-tags { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 20px; padding-top: 20px; } /* one column: long tags wrapped in two */
  .pc-folder .pc-tags li { font-size: var(--fs-sm); }
}

/* ----- Full-screen menu (how-test and en, 2026-10-05, user: "on desktop and mobile the menu opens full screen
   with no scroll until you close it; the links fade in one by one, each after the previous one finishes").
   The menu button shows at every width; script.js moves the nav out of the header (the scrolled header's
   backdrop-filter would trap a fixed child inside it), locks the page scroll while it's open and numbers the
   links (--i) for the sequence. Without JS: the old inline links / phone dropdown. ----- */
html:has(body.v2) { scrollbar-gutter: stable; } /* no sideways jump when the scroll locks */
.js .v2 .header-actions { margin-inline-start: auto; }
.js .v2 .menu-toggle { display: inline-flex; }
.js body.v2 > .main-nav {
  position: fixed;
  inset: 0;
  z-index: 45; /* over the page and the bottom blur, under the header (logo, switchers, close button) */
  display: flex;
  align-items: center;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
  transform: none;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
}
.js body.v2 > .main-nav.is-open { visibility: visible; opacity: 1; transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.js body.v2 > .main-nav ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 112px var(--gutter) 64px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Links cascade in (user: the strict one-after-another 0.32s steps felt robotic, then "a bit more slowing
   down"): each rises 44px out of a soft blur with a long expo-out ease, 0.16s apart, so the next one starts as
   the previous settles. Closing (.is-closing, script.js) plays it in reverse: from the last link to the first,
   each fades up and out in 0.5s, 0.09s apart; then the overlay fades */
.js body.v2 > .main-nav li {
  opacity: 0;
  transform: translateY(44px);
  filter: blur(8px);
}
.js body.v2 > .main-nav.is-open li {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(0.15s + var(--i, 0) * 0.16s);
}
.js body.v2 > .main-nav.is-open.is-closing li {
  opacity: 0;
  transform: translateY(-24px);
  filter: blur(6px);
  transition:
    opacity 0.5s cubic-bezier(0.55, 0, 0.75, 0.2),
    transform 0.5s cubic-bezier(0.55, 0, 0.75, 0.2),
    filter 0.5s cubic-bezier(0.55, 0, 0.75, 0.2);
  transition-delay: calc(var(--r, 0) * 0.09s);
}
.js body.v2 > .main-nav li:not(.nav-cta) a {
  display: inline-block;
  padding: 2px 0;
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--text);
  border-radius: 0;
}
.js body.v2 > .main-nav .nav-cta { margin-top: 36px; }
.nav-cta { display: none; }
.js body.v2 > .main-nav .nav-cta { display: block; }
/* while it's open the header sits on the menu's own background: no glass, the page's text color */
html.menu-open .site-header,
html.menu-open .site-header.is-scrolled { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.menu-open .site-header,
html.menu-open .site-header .logo { color: var(--text); }
html.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .js body.v2 > .main-nav li { transform: none; filter: none; }
}

/* ----- Back to top (how-test and en, 2026-10-05, user). A small round button in the bottom end corner (left in
   Hebrew, right in English), shown only while scrolling up and only after ~2 screens, like the header coming
   back; hidden while the menu is open. It rides up above the footer as the footer comes in (--lift, script.js).
   44px tap target, the iPhone home-bar inset, a text label on hover (mouse only) ----- */
.to-top {
  --lift: 0px;
  position: fixed;
  inset-inline-end: clamp(16px, 2.2vw, 28px);
  bottom: calc(clamp(16px, 2.2vw, 28px) + env(safe-area-inset-bottom, 0px));
  z-index: 44; /* over the bottom blur, under the menu overlay and the header */
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--text);
  background: color-mix(in srgb, var(--card-bg) 86%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(12px - var(--lift))) scale(0.92);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.35s, background-color 0.2s, border-color 0.2s;
}
.to-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateY(calc(0px - var(--lift)));
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s, border-color 0.2s;
}
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.to-top:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .to-top:hover { color: var(--bg); background: var(--text); border-color: var(--text); }
  .to-top:hover svg { transform: translateY(-2px); }
  .to-top::after { /* the label beside it, toward the page */
    content: attr(data-label);
    position: absolute;
    inset-inline-end: calc(100% + 10px);
    top: 50%;
    padding: 6px 12px;
    font-size: var(--fs-sm);
    line-height: 1.2;
    white-space: nowrap;
    color: var(--bg);
    background: var(--text);
    border-radius: 999px;
    opacity: 0;
    transform: translate(0, -50%) translateX(var(--nudge, -6px));
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  [dir="rtl"] .to-top::after { --nudge: 6px; }
  .to-top:hover::after { opacity: 1; transform: translate(0, -50%); }
}
@media (max-width: 600px) {
  .to-top { width: 44px; height: 44px; }
}

/* ----- No section rules (2026-10-06, user): the thin line above every section head and above the footer is
   gone on how-test and en; spacing alone separates the sections. List dividers (FAQ, YouTube rows, process
   tags) stay: they belong to the content, not to the sections ----- */
.v2 .section-head { padding-top: 0; border-top: 0; }
.v2 .site-footer { border-top: 0; }

/* ----- Testimonials: five stars above each quote (2026-10-06, user), in the text color like the rest of the
   monochrome site; one accessible label for the row ----- */
/* the stars sit 20px above the quote (the item's flex gap is pulled back) and the person's line keeps to the
   bottom, so the stars don't float apart when a shorter quote shares the cell with a taller one */
.qt-item:has(> .qt-stars) { justify-content: flex-start; }
.qt-item:has(> .qt-stars) figcaption { margin-top: auto; }
.qt-stars { display: flex; gap: 4px; margin-bottom: calc(20px - clamp(32px, 4vw, 52px)); color: var(--text); }
.qt-stars svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 600px) {
  .qt-stars { margin-bottom: calc(14px - clamp(32px, 4vw, 52px)); }
  .qt-stars svg { width: 16px; height: 16px; }
}

/* ----- Testimonials on the grid (2026-10-06, user: "align the testimonial component to the heading and the rest
   of the grid"): the quote block starts at the container's start edge, like the heading above it, instead of
   being centered; it keeps its 880px reading width. The opening quote mark no longer hangs outside the text,
   so the stars, the quote and the person all line up with the heading ----- */
.v2 .qt-inner { margin-inline: 0; }
.v2 .qt-item blockquote p::before { position: static; margin: 0; }

/* ----- About: a short statement, bigger (2026-10-06, user picked my recommendation): only the first two
   sentences are revealed in the pin ("היי, אני אופיר. אני מעצב ובונה אתרים ב-Framer, ב-Webflow וב-Claude
   Code."), at display size; the rest of the story moved to the paragraph under the photo (.ar-sub) ----- */
.v2 .ar-text {
  max-width: 24ch; /* three balanced lines on desktop in both languages */
  font-size: clamp(34px, 6vw, 88px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
:lang(he) .v2 .ar-text, .v2:lang(he) .ar-text { letter-spacing: -0.015em; }

/* ----- Footer social links (2026-10-06, user: no "all rights reserved" / © line and no website address;
   Instagram, LinkedIn and YouTube as plain words). Muted text that turns to full ink on hover ----- */
.footer-social { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.footer-social a { color: var(--text-muted); transition: color 0.2s; }
.footer-social a:hover { color: var(--text); }
.footer-social a:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 2px; }

/* Name hover photo, in review at how-test.html?photo=hover and en.html?photo=hover (2026-10-06, user): the
   portrait leaves the About section; hovering the name in the statement shows it, at about its in-section size,
   following the cursor (script.js "About: photo on the name"). On touch screens a tap shows it centered. */
.photo-hover .ar-name {
  text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  cursor: default;
}
.name-photo {
  position: fixed; top: 0; left: 0; z-index: 46; pointer-events: none;
  width: min(520px, 38vw, calc((100svh - 32px) * 0.75 - 15px));
  margin: 0; padding: 10px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
  opacity: 0; visibility: hidden;
  transform: translate3d(var(--nx, 0px), var(--ny, 0px), 0) scale(0.88);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.35s;
  will-change: transform, opacity;
}
.name-photo.is-on {
  opacity: 1; visibility: visible;
  transform: translate3d(var(--nx, 0px), var(--ny, 0px), 0) scale(1);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
.name-photo.is-following { transition: opacity 0.35s ease, visibility 0s; } /* JS moves it every frame */
.name-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 1333; object-fit: cover; border-radius: calc(var(--r-lg) - 10px); }
@media (hover: none), (max-width: 600px) {
  .name-photo { width: min(420px, calc(100vw - 48px), calc((100svh - 48px) * 0.75 - 15px)); }
}
@media (prefers-reduced-motion: reduce) {
  .name-photo, .name-photo.is-on { transition: none; transform: translate3d(var(--nx, 0px), var(--ny, 0px), 0); }
}
/* ?photo=hover (2026-10-06, user): with the photo gone, the paragraph sits 24px under the statement, at ~22px
   (a one-off size between --fs-lead and --fs-h4; 19px on phones), with a wider measure for the bigger type */
.photo-hover .ar-lower { margin-top: 24px; }
.photo-hover .ar-sub { margin-top: 0; max-width: 760px; font-size: clamp(19px, 1.55vw, 22px); }
/* How I work cards 10% taller (2026-10-06, user): 40px more air around the drawing (414 → 454px at 1440, ~440 on phones) */
.v2 .how3-soft .how3-art { margin: 12px auto 28px; }
/* Card 1 "End to end", redrawn (2026-10-06, user: the horizontal version looked too much like card 2): one circle,
   half dashed (the design) and half full (the build) that draws itself in, joined at two small joints: one person,
   one whole, and the build follows the approved design's line exactly. RTL: the design half is on the right */
.art-path .joint { fill: var(--card-bg); }
.how3-art .fill.draw { transition: stroke-dashoffset 1.1s var(--ease) var(--d, 0.15s); }
/* Card 1 "End to end", a website this time (2026-10-06, user: "more obvious and less abstract"; the split circle
   stays at how-test.html?art1=circle): a browser window split down the middle, the design half dashed and the
   built half in full lines that draw themselves in (outline, then the bar, dots, heading, line and button), joined
   by the same two small joints. Same page on both sides: what you approved is what goes live */
.how3-art[hidden] { display: none; }
.art-site .dash { stroke-dasharray: 5 6; }
.art-site .ink { fill: none; stroke: var(--text); stroke-width: 2; vector-effect: non-scaling-stroke; }
.art-site circle.ink { fill: var(--text); stroke: none; }
.art-site .joint { fill: var(--card-bg); }
/* Card 1 "End to end", now a closed loop (2026-10-06; the browser window looked "off and unrelated" to the site's
   circles-and-lines language: kept at how-test.html?art1=site, the split circle at ?art1=circle): a dashed circle
   (the approved design) and a start ring at the top; a pen dot sets off from the ring and draws a full line exactly
   over the dashed one, all the way around, and comes back to where it started: from one end to the other, and the
   build follows the design's line. The pen is a group rotated about the circle's center (its invisible r62 circle
   sets the box), in step with the line's draw (same duration and ease). Counterclockwise, so it sets off leftwards
   in Hebrew; LTR mirrors it like the other drawings */
.art-loop .dash { stroke-dasharray: 5 6; }
.art-loop .joint { fill: var(--card-bg); }
.art-loop .fill.draw { transition: stroke-dashoffset 1.8s cubic-bezier(0.45, 0, 0.25, 1) var(--d); }
.art-loop .pen-dot { fill: var(--text); }
.art-loop .pen { transform: rotate(-360deg); transition: transform 1.8s cubic-bezier(0.45, 0, 0.25, 1) 0.45s, opacity 0.3s var(--ease) 0.3s; }
.js .how3-card:not(.art-on) .art-loop .pen { transform: rotate(0deg); opacity: 0; }
/* ---- How I work as a journey (how-test.html?how=journey, 2026-10-06, user) ----
   A pinned stage (sticky, one screen tall) inside a 360vh track. script.js turns the scroll position into the
   drawing's state (positions, sizes, opacities, the trace), so it plays at the reader's pace and reverses on the
   way back up. The text column swaps between the three principles with a short fade. */
.hj { --art-line: color-mix(in srgb, var(--text) 32%, transparent); }
.hj-track { position: relative; height: 360vh; }
.hj-stage {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(24px, 4vw, 64px);
}
.hj-text { align-self: center; }
.hj-count { font-size: var(--fs-sm); color: var(--text-dim); letter-spacing: 0.04em; }
.hj-count b { color: var(--text); font-weight: 700; }
.hj-bar { display: block; width: 120px; height: 2px; margin-top: 12px; background: var(--border); border-radius: 2px; overflow: hidden; }
.hj-bar i { display: block; height: 100%; background: var(--text); transform: scaleX(var(--p, 0)); transform-origin: right; }
[dir="ltr"] .hj-bar i { transform-origin: left; }
.hj-steps { display: grid; margin: clamp(28px, 4vh, 44px) 0 0; padding: 0; list-style: none; }
.hj-step {
  grid-area: 1 / 1; opacity: 0; transform: translateY(18px); filter: blur(6px);
  transition: opacity 0.5s var(--ease), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s var(--ease);
  pointer-events: none;
}
.hj-step.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; transition-delay: 0.12s; }
.hj-step h3 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.02em; }
.hj-step p { max-width: 40ch; margin-top: 16px; font-size: var(--fs-body-lg); color: var(--text-muted); }
.hj-art { display: block; width: 100%; height: auto; max-height: 70svh; overflow: visible; }
.hj-art * { vector-effect: non-scaling-stroke; }
.hj-ln { fill: none; stroke: var(--art-line); stroke-width: 2; }
.hj-dash, .hj-ring { stroke-dasharray: 5 6; }
.hj-hole, .hj-start { fill: var(--bg); }
.hj-ink { fill: none; stroke: var(--text); stroke-width: 4; }
.hj-art .hj-trace { stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: none; } /* non-scaling strokes break pathLength dashes; script.js sets its width to 4px on screen */
.hj-art .hj-glow { fill: none; stroke: var(--text); stroke-dasharray: 0.12 2; stroke-dashoffset: 0.12; stroke-linecap: round; opacity: 0; vector-effect: none; filter: blur(5px); }
.hj-gap { fill: none; stroke: var(--bg); stroke-width: 14; }
.hj-pen { fill: var(--text); }
.hj-done, .hj-ring, .hj-partner, .hj-proj, .hj-weave, .hj-row { opacity: 0; }
@media (max-width: 960px) {
  .hj-stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 8px; padding-top: 56px; }
  .hj-art { order: -1; max-height: 38svh; }
  .hj-steps { margin-top: 20px; }
}
/* Cinematic pass (2026-10-06, user: "more cinematic, more dramatic, more wow effect"): the section dims to a dark
   band (full-bleed, its opacity --hj-o from script.js), the text and drawing switch to the on-dark tokens, a soft
   spotlight sits behind the drawing, the pen glows, huge faint chapter numerals swap behind the titles, and the
   titles leave upwards as the next one rises in. */
.hj {
  --hj-band: var(--t-d0, #0b0b0b);
  --text: var(--t-on-dark, #f5f5f5);
  --text-muted: var(--t-on-dark-muted, #b3b3b3);
  --text-dim: var(--t-on-dark-dim, #8a8a8a);
  --border: rgba(var(--t-on-dark-rgb, 245, 245, 245), 0.16);
  --bg: var(--hj-band);
  --art-line: rgba(var(--t-on-dark-rgb, 245, 245, 245), 0.3);
  color: var(--text);
}
.tone-dark .hj { --hj-band: #05080c; }
.hj-band { position: absolute; inset: 0 calc(50% - 50vw); background: var(--hj-band); opacity: var(--hj-o, 0); pointer-events: none; }
.hj-stage { opacity: var(--hj-o, 0); }
.hj-stage::before {
  content: ""; position: absolute; inset: 0 calc(50% - 50vw); pointer-events: none;
  background:
    radial-gradient(ellipse 34% 46% at 30% 52%, rgba(var(--t-on-dark-rgb, 245, 245, 245), 0.075), transparent 72%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
}
[dir="ltr"] .hj-stage::before { transform: scaleX(-1); }
.hj-stage > * { position: relative; }
.hj-pen { filter: drop-shadow(0 0 6px var(--text)) drop-shadow(0 0 16px rgba(var(--t-on-dark-rgb, 245, 245, 245), 0.5)); }
.hj-pulse { opacity: 0; stroke: var(--text); stroke-width: 1.5; }
.hj-num {
  display: block; margin-bottom: -0.12em;
  font-size: clamp(88px, 13vw, 210px); font-weight: 700; line-height: 0.8; letter-spacing: -0.05em;
  color: rgba(var(--t-on-dark-rgb, 245, 245, 245), 0.09);
}
.hj-step { transform: translateY(48px); filter: blur(12px); transition: opacity 0.6s var(--ease), transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s var(--ease); }
.hj-step.is-past { transform: translateY(-40px); }
.hj-step:not(.is-on) { transition-delay: 0s; transition-duration: 0.45s, 0.6s, 0.45s; }
.hj-step.is-on { transition-delay: 0.15s; }
@media (max-width: 960px) {
  .hj-stage::before { background: radial-gradient(ellipse 70% 30% at 50% 34%, rgba(var(--t-on-dark-rgb, 245, 245, 245), 0.08), transparent 72%), radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.35) 100%); }
  .hj-num { font-size: 72px; }
}
.how3[hidden] { display: none; } /* ?how=journey hides the cards; .how3's own display beat the hidden attribute */
@media (max-width: 960px) {
  /* phones: keep the camera's close-ups and pulses inside the drawing's own box, with soft top and bottom edges,
     so nothing runs behind the text */
  .hj-art { overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
}
/* Lights down: the dark band is a full-screen layer (fixed) that fades in as the section arrives, dimming the whole
   screen (the section heading too), with the story's stage above it; it fades out again as the next section comes */
.hj-band { position: fixed; inset: 0; z-index: 30; }
.hj-stage { z-index: 31; }
/* Phones (2026-10-06, user: the journey "cuts on mobile at the top and bottom"): the drawing's box was only as tall
   as its 11:6 frame (~195px), so the close-up, the big rings and the pulses were cut at its edges. It now gets a
   taller box (the frame letterboxes inside it, and SVG draws into that extra space), with only a short soft fade at
   the very top and bottom */
@media (max-width: 960px) {
  .hj-art { height: min(46svh, 420px); max-height: none; -webkit-mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); }
  .hj-stage { padding-top: 48px; gap: 0; }
}
@media (max-width: 960px) and (max-height: 720px) {
  .hj-art { height: 40svh; }
  .hj-num { font-size: 56px; }
  .hj-step p { margin-top: 10px; font-size: var(--fs-body); }
  .hj-steps { margin-top: 12px; }
}
/* No "Let's talk" button in the header bar any more (2026-10-07, user): the full-screen menu's own button is the
   menu's way to book at every width now, sized like the phone one (it was the header's small 14px pill on desktop) */
@media (min-width: 961px) {
  .js body.v2 > .main-nav .nav-cta .btn { min-height: 52px; padding: 14px 28px; font-size: var(--fs-body-lg); }
}