/* ============================================================================
   Lemon Studio — section layouts

   THE VALUE LADDER. The site is MONOCHROME: only #000000 and #0A0A09 may
   be used as a background, anywhere. Sections alternate between the two.
   V2 order (differs from ../website/):
     hero          void   #000000  (photography sits on it)
     how-it-works  base   #0A0A09
     products      void   #000000
     cta           base   #0A0A09
     craft         void   #000000  (photography sits on it)
     gallery       base   #0A0A09
     closer        void   #000000  (photography sits on it)
     faq           base   #0A0A09
     footer        void   #000000
   Note: hero and how are both void. The hero is a full-bleed photograph,
   so there is no flat surface to compare against — the seam is the bottom
   edge of the image, not a colour step. Every other pair alternates.
   If you reorder sections, re-check this ladder — flatness is what made the
   old page look cheap.
   ========================================================================== */

/* ------------------------------------------------------------------ HERO -- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;          /* the block is centred in the viewport */
  background: var(--surface-void);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }

/* Protection. Type never sits on an unprotected photograph: a bottom-up
   scrim plus a side scrim on the reading edge (right, in RTL). */
/* The block sits in the MIDDLE of the frame now, not at an edge, so a side
   gradient alone cannot protect it — the far end of every line would drift
   onto bright photograph. The protection is a centred vignette sized to the
   block, with a softer side gradient behind it and a flat wash under both.
   If you move the block back to an edge, go back to a side gradient: a
   vignette over an edge-aligned block just dims the picture for nothing. */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 74% at 50% 48%,
      rgba(10,10,9,.86) 0%, rgba(10,10,9,.68) 45%, rgba(10,10,9,.22) 78%, rgba(10,10,9,0) 100%),
    linear-gradient(to left, rgba(10,10,9,.62) 0%, rgba(10,10,9,.30) 34%, rgba(10,10,9,0) 68%),
    linear-gradient(to top, rgba(10,10,9,.72) 0%, rgba(10,10,9,.18) 44%, rgba(10,10,9,0) 76%),
    rgba(0,0,0,.26);
}

.hero__inner {
  position: relative;
  width: 100%;
  padding: clamp(96px, 14vh, 150px) var(--gutter) clamp(84px, 12vh, 130px);
}
/* The block is CENTRED on the page rather than pinned to the reading edge —
   the text inside still starts at the right, as Hebrew should. The width is
   set by the longest headline line, so the wrap does not change. */
.hero__body { width: min(900px, 100%); margin-inline: auto; }

/* --- badge -------------------------------------------------------------- */
/* A pill above the headline. Hairline and lemon mark only — never a fill. */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border: 1px solid var(--rule-accent);
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-he-label);
  color: var(--text-body);
  margin-bottom: clamp(18px, 2.6vh, 28px);
}
.hero__badge .icon { width: 15px; height: 15px; color: var(--lemon-500); }

/* No ch cap: the 900px block is the measure, and a ch cap on top of it
   only ever forces an extra line. */
.hero h1 { max-width: none; }

/* --- ornament ----------------------------------------------------------- */
/* Rule · mark · rule, sitting under the headline. Purely decorative. */
.hero__ornament {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(320px, 62%);
  /* centred inside the block, the way the divider sits in the reference */
  margin: clamp(20px, 3vh, 30px) auto 0;
}
.hero__ornament-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to left, var(--rule-accent), transparent);
}
.hero__ornament-line:last-child { background: linear-gradient(to right, var(--rule-accent), transparent); }
.hero__ornament .icon { width: 17px; height: 17px; color: var(--lemon-500); }

.hero__sub {
  margin: clamp(18px, 2.6vh, 28px) 0 0;
  font-size: var(--fs-lead);
  color: var(--text-body);
  /* Wide enough that the lead lands on two lines instead of three with a
     two-word orphan on the last one. `pretty` keeps it that way if the copy
     changes length. */
  max-width: 58ch;
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: clamp(22px, 3.4vh, 36px);
}

/* --- figures ------------------------------------------------------------ */
/* Three numbers instead of a row of ticks: the figure carries the weight and
   the label underneath stays quiet. Latin digits are forced LTR so ranges
   like 10–14 do not flip. */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(26px, 4vw, 56px);
  margin-top: clamp(28px, 4.4vh, 48px);
}
/* A column flex box, not a plain block. The figures carry direction: ltr so
   that "100%" does not come out as "%100" in Hebrew — but that also flips
   what text-align: start means inside them, so the glyphs hugged the left
   while the Hebrew captions hugged the right. Flex alignment is resolved
   against the CONTAINER's direction, so flex-start here means "the reading
   edge" in both languages while the figure keeps its own LTR insides. */
.hero__stats li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero__stats strong {
  display: block;
  direction: ltr;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--lemon-500);
}
.hero__stats span {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.hero__scroll {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-faint);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: var(--fs-micro);
}
.hero__scroll .icon { width: 18px; height: 18px; }
@media (max-height: 700px), (max-width: 700px) { .hero__scroll { display: none; } }

/* ----------------------------------------------------------------- CRAFT -- */
/* V2: a full-bleed photograph with one paragraph over it.
   Layout at the bottom of this file under "CRAFT · V2 STORY". */

.craft { background: var(--surface-void); }

/* ------------------------------------------------------------------ HOW --- */

.how { background: var(--surface-base); }
.how .container { max-width: 1400px; }   /* wider rail = bigger step tiles */
.how h2 { text-align: center; font-size: clamp(32px, 4.6vw, 68px); letter-spacing: var(--tracking-display); }
.how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 26px);
  margin-top: clamp(40px, 6vh, 72px);
}
.how__after {
  margin-top: clamp(40px, 6vh, 64px);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
@media (max-width: 860px) {
  .how__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .steps-rail { display: none; }        /* the numeral badges carry it on mobile */
}

/* -------------------------------------------------------------- GALLERY --- */

.work { background: var(--surface-base); }
.work__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 5vh, 56px);
}
.work__head h2 { max-width: 20ch; }

/* --------------------------------------------------------------- CLOSER --- */

.closer {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-void);
  overflow: hidden;
}
.closer__media { position: absolute; inset: 0; }
.closer__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
/* The line sits low, on a bottom-up scrim — never across the face. */
.closer__inner {
  position: relative;
  width: 100%;
  min-height: inherit;
  display: flex; align-items: flex-end; justify-content: center;
  padding: var(--gutter) var(--gutter) clamp(44px, 10vh, 104px);
}
/* Two lines with different jobs: the claim, then the quieter line that
   explains it. Same shape as the product cards' hook-then-body. */
.closer__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.6vh, 20px);
}
.closer p {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  /* Was 56px at 18ch, sized for a six-word line. This sentence is three
     times that, so the cap goes up and the size comes down — any larger
     and it runs to four lines and covers the face in the photograph. */
  font-size: clamp(22px, 3.1vw, 42px);
  line-height: 1.2;
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
  max-width: 24ch;
  text-shadow: 0 2px 40px rgba(0,0,0,.6);
  text-wrap: balance;        /* two even lines, never a one-word orphan */
}
/* .closer p is (0,1,1) and would out-specify a bare .closer__sub (0,1,0),
   which is exactly how this line kept the display font on the first try. */
.closer .closer__sub {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--text-body);
  max-width: 48ch;
  text-wrap: balance;
}

/* ------------------------------------------------------------- PRODUCTS --- */

.products { background: var(--surface-void); }

/* ------------------------------------------------------------------ CTA --- */

.cta { background: var(--surface-base); }
.cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7);
  align-items: flex-end;
}
.cta h2 {
  font-size: var(--fs-display-2);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  max-width: 19ch;
  flex: 1 1 420px;
}
.cta__actions { margin-inline-start: auto; display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.cta__buttons { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.cta__reassure { font-size: var(--fs-sm); color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; }
.cta__reassure .icon { width: 16px; height: 16px; color: var(--lemon-500); }

/* ------------------------------------------------------------------ FAQ --- */

.faq { background: var(--surface-base); }
.faq__head { margin-bottom: clamp(28px, 4vh, 44px); }
.faq__wrap { max-width: var(--container-narrow); margin-inline: auto; }

/* --------------------------------------------------------------- FOOTER --- */

.footer { background: var(--surface-void); }

/* ------------------------------------------------------- small viewports -- */

@media (max-width: 700px) {
  .hero h1 { max-width: 14ch; }
  .hero__ornament { width: min(240px, 76%); }
  .hero__stats { gap: 20px 28px; }
  .hero__stats strong { font-size: 22px; }
  .cta__actions { margin-inline-start: 0; width: 100%; }
  .cta__buttons { width: 100%; }
  .cta__buttons .btn { flex: 1 1 100%; }
  .hero__actions .btn { flex: 1 1 100%; }        /* full-width, equal weight */
  .hero__badge { font-size: 11px; padding: 7px 13px; }

  .work__head { display: block; }
  .work__head .lead { margin-top: 16px; }

  .closer { min-height: 72svh; }
}

/* ------------------------------------------------- CRAFT · V2 STORY ------ */
/* One photograph, one paragraph. Built exactly like the hero and the closer:
   the picture fills the section, and the type sits on a gradient rather than
   on raw photograph. In RTL the reading edge is the RIGHT, so the text block
   and the side scrim both live there and the photograph is left clear on the
   left. Yellow marks three phrases and nothing else. */

/* `.section` adds vertical padding for flat sections; a full-bleed one owns
   its own spacing through .craft__inner, exactly like the hero. */
.craft {
  position: relative;
  min-height: 86svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: 0;
}

.craft__media { position: absolute; inset: 0; }
.craft__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 34% center;   /* keep the bench on the left, clear of the type */
}

/* Protection, same recipe as the hero: a side scrim on the reading edge and a
   soft bottom-up wash so the paragraph never sits on bare photograph. */
.craft__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to left, rgba(10,10,9,.95) 0%, rgba(10,10,9,.88) 28%, rgba(10,10,9,.45) 56%, rgba(10,10,9,0) 80%),
    linear-gradient(to top,  rgba(10,10,9,.55) 0%, rgba(10,10,9,0) 55%),
    /* a flat wash over the whole picture: whatever photo goes in here, the
       paragraph still wins, and the section stays as dark as its neighbours */
    rgba(0,0,0,.28);
}

.craft__inner {
  position: relative;
  width: 100%;
  padding: clamp(72px, 12vh, 140px) var(--gutter);
}
.craft__body {
  max-width: var(--container);
  margin-inline: auto;
}
.craft__body > * { max-width: 46ch; }

.craft h2 {
  font-size: clamp(32px, 4.6vw, 68px);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin-bottom: clamp(22px, 3.2vh, 34px);
}

.craft__story {
  margin: 0;
  color: var(--text-body);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.9;
  text-shadow: 0 2px 30px rgba(0,0,0,.55);
}

/* The highlight: lemon and a touch of weight. Yellow is a mark, not a fill,
   so there is no background here. */
.hl {
  color: var(--lemon-500);
  font-weight: var(--fw-regular);
}

@media (max-width: 900px) {
  /* On a narrow screen there is no room beside the subject, so the block moves
     to the foot of the picture and the scrim becomes a single bottom-up wash.
     It has to reach high enough to cover the whole paragraph — a short scrim
     leaves the first lines sitting on the lamp. */
  .craft { min-height: 82svh; align-items: flex-end; }
  .craft__media img { object-position: 46% center; }
  .craft__media::after {
    background:
      linear-gradient(to top, rgba(10,10,9,.97) 0%, rgba(10,10,9,.94) 46%, rgba(10,10,9,.62) 72%, rgba(10,10,9,0) 96%),
      rgba(0,0,0,.20);
  }
  .craft__inner { padding-block: clamp(36px, 6vh, 64px); }
  .craft__body > * { max-width: none; }
  .craft h2 { margin-bottom: clamp(16px, 2.4vh, 24px); }
  .craft__story { font-size: clamp(16px, 4vw, 18px); line-height: 1.8; }
}

/* ---------------------------------------------------------------------------
   LTR HERO

   Latin at a given point size runs far wider than Hebrew — same em, many more
   of them per sentence. The display scale and the 900px hero block were tuned
   against the Hebrew headline, and the English one spilled from two lines to
   four. Slightly smaller type in a slightly wider block puts it back to two
   without touching the Hebrew, which keeps its original size.
   ------------------------------------------------------------------------- */

[dir="ltr"] .hero__body { width: min(1040px, 100%); }
[dir="ltr"] .hero h1    { font-size: clamp(30px, 4.2vw, 56px); }

/* The third hero figure is an infinity sign. No self-hosted font carries
   U+221E, so a literal ∞ would have rendered in whatever system face the
   browser picked — a different shape and weight sitting beside Rubik's
   numerals. It is drawn instead, and sized to match them. */
.hero__stats-icon .icon {
  width: 1.15em;
  height: 1.15em;
  stroke-width: 2.6;
  display: block;
  margin-block: -.07em;      /* optical: the lemniscate sits lower than digits */
}