/* ═══════════════════════════════════════════════════════════════
   LEVIS VISION — SECTIONS
   Page-level composition. Components live in components.css.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ OFF-SCREEN RENDERING ═════════════════════════════════════
   Skip layout and paint for content that is not near the viewport.
   Applied only to sections whose height is stable and which never
   contain the column-based work grid — `content-visibility` there
   would fight the masonry's column balancing. `auto` on the
   intrinsic size lets the browser remember the real height after
   the first render, so the scrollbar does not jump.              */
.cta-band,
.footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

/* ═══ SCROLL REVEAL ════════════════════════════════════════════
   Elements start hidden and are revealed by IntersectionObserver.
   The no-JS fallback below makes everything visible if the script
   never runs, so content is never permanently invisible to a
   crawler or a reader with JS disabled.                          */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal[data-seen="true"] { opacity: 1; transform: none; }

html.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Stagger children — capped at 8 per the motion guidance */
.reveal-group > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal-group[data-seen="true"] > * { opacity: 1; transform: none; }
.reveal-group[data-seen="true"] > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-group[data-seen="true"] > *:nth-child(2) { transition-delay: 0.07s; }
.reveal-group[data-seen="true"] > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-group[data-seen="true"] > *:nth-child(4) { transition-delay: 0.21s; }
.reveal-group[data-seen="true"] > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-group[data-seen="true"] > *:nth-child(6) { transition-delay: 0.35s; }
.reveal-group[data-seen="true"] > *:nth-child(7) { transition-delay: 0.42s; }
.reveal-group[data-seen="true"] > *:nth-child(8) { transition-delay: 0.49s; }
html.no-js .reveal-group > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-group > * { opacity: 1; transform: none; transition: none; }
}

/* Mask reveal — a line of type wiped in from the reading edge */
.mask-line { display: block; overflow: hidden; }
.mask-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur-cine) var(--ease-out);
}
.reveal[data-seen="true"] .mask-line > span,
.mask-line[data-seen="true"] > span { transform: translateY(0); }
.mask-line:nth-child(2) > span { transition-delay: 0.10s; }
.mask-line:nth-child(3) > span { transition-delay: 0.20s; }
html.no-js .mask-line > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mask-line > span { transform: none; transition: none; }
}

/* ═══ HERO ═════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-block-size: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Background reel — muted, looping, poster-first. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
/* Fully desaturated by design: the hero is monochrome, which also
   guarantees no stray colour from a source frame ever appears. */
.hero-bg img,
.hero-bg video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.52);
}
/* The hero frame is a portrait close-up, so a wide viewport shows
   only a horizontal band of it. Measured against this crop the eyes
   sit at 38% of the image, the glasses at 48% and the mouth at 66%;
   anchoring at 47% lands the eyes just above the headline and the
   glasses just below it, instead of cutting the frame at the brow. */
.hero-bg img { object-position: 50% 47%; }

@media (max-width: 760px) {
  /* A portrait phone shows nearly the whole frame — centre is right. */
  .hero-bg img { object-position: 50% 50%; }
}
.hero-bg video { opacity: 0; transition: opacity var(--dur-cine) var(--ease-out); }
.hero-bg video[data-ready="true"] { opacity: 1; }

/* Ken Burns — a very slow drift so the still never reads as a
   frozen JPEG. 40s is long enough that no single motion is
   perceptible; the frame simply feels alive. */
.hero-kb img {
  animation: kenburns 40s var(--ease-soft) infinite alternate;
  /* Pushes in toward the face rather than the centre of the plate. */
  transform-origin: 50% 47%;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.10); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-kb img { animation: none; transform: scale(1.02); }
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(5, 6, 7, 0.72) 0%,
      rgba(5, 6, 7, 0.55) 45%,
      rgba(5, 6, 7, 0.95) 100%);
}

.hero-inner {
  position: relative;
  inline-size: 100%;
  max-inline-size: var(--max-w);
  margin-inline: auto;
  /* Top padding clears the fixed nav; the rest stays tight so the
     primary CTA is above the fold even on a 700px-tall laptop. */
  padding: clamp(5rem, 12vh, 8rem) var(--gutter) var(--sp-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.4vh, 1.75rem);
}

/* Over a photograph the muted grey loses too much contrast, so the
   hero's eyebrow and rules step up a level. */
.hero-inner .eyebrow { color: var(--fg-secondary); }
.hero-inner .eyebrow::before,
.hero-inner .eyebrow::after { background: var(--ink-200); opacity: 0.6; }

.hero-title {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
  max-inline-size: 18ch;
}
/* Second line drops to light weight — the logo's own contrast */
.hero-title .thin {
  font-weight: var(--w-light);
  color: var(--fg-secondary);
}

.hero-sub {
  font-size: var(--t-body-lg);
  font-weight: var(--w-light);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
  max-inline-size: 46ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

.hero-scroll {
  position: relative;
  padding-block-end: var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.hero-scroll-line {
  inline-size: 1px;
  block-size: 48px;
  background: linear-gradient(to bottom, var(--line-strong), transparent);
  position: relative;
  overflow: hidden;
}
.hero-scroll-line::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  block-size: 40%;
  background: var(--white);
  animation: scrollCue 2.4s var(--ease-soft) infinite;
}
@keyframes scrollCue {
  0%   { transform: translateY(-100%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(250%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-line::after { animation: none; opacity: 0.5; }
}

/* ═══ SECTION HEAD ═════════════════════════════════════════════ */
.head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-block-end: var(--sp-8);
}
.head-title {
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  letter-spacing: var(--track-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
}
.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

/* ═══ BRAND STATEMENT ══════════════════════════════════════════ */
.statement {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 3.1rem);
  font-weight: var(--w-light);
  line-height: 1.28;
  letter-spacing: var(--track-tight);
  text-wrap: balance;
  max-inline-size: 20ch;
}
.statement strong {
  font-weight: var(--w-black);
  display: inline;
}

.statement-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--sp-8) var(--sp-9);
  align-items: start;
}
@media (max-width: 900px) {
  .statement-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .statement { max-inline-size: none; }
}

/* ═══ WORK GRID ════════════════════════════════════════════════
   Column-count masonry. Mixed aspect ratios (9:16 → 16:9) sit
   together without gaps, and each card reserves its own space
   from --ratio so nothing shifts as posters decode.             */
.work-grid {
  column-count: 3;
  column-gap: var(--sp-4);
}
.work-grid > * {
  break-inside: avoid;
  margin-block-end: var(--sp-4);
  /* Safari needs this to stop cards splitting across columns */
  -webkit-column-break-inside: avoid;
  display: block;
}
@media (max-width: 1100px) { .work-grid { column-count: 2; } }
@media (max-width: 620px)  { .work-grid { column-count: 1; } }

/* Editorial reel on the homepage — asymmetric, larger */
.work-reel {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
}
.work-reel > * { grid-column: span 4; }
/* The offer card and the one beside it split the opening row, so the
   lead reads as a pair rather than a ragged edge. Spans are keyed off
   the card itself, not nth-child, so reordering work cannot leave a
   hole in the grid. */
.work-reel > .card-feature,
.work-reel > .card-feature + * { grid-column: span 6; }
/* No offer running: fall back to the editorial rhythm. */
.work-reel:not(:has(.card-feature)) > *:nth-child(1) { grid-column: span 7; }
.work-reel:not(:has(.card-feature)) > *:nth-child(2) { grid-column: span 5; }
@media (max-width: 1000px) {
  .work-reel > *,
  .work-reel > *:nth-child(n) { grid-column: span 6; }
}
@media (max-width: 620px) {
  .work-reel > *,
  .work-reel > *:nth-child(n) { grid-column: span 12; }
}

.work-count {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}


/* ═══ SERVICES ═════════════════════════════════════════════════ */
.svc-list { border-block-start: 1px solid var(--line-subtle); }

.svc-row {
  display: grid;
  /* Each row is its own grid, so the track sizes must be explicit —
     an `auto` price column would size to its own text and the
     columns would step in and out of line down the list. */
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.15fr) 11rem;
  gap: var(--sp-5);
  align-items: baseline;
  padding-block: var(--sp-6);
  border-block-end: 1px solid var(--line-subtle);
  position: relative;
  transition: padding-inline var(--dur-slow) var(--ease-out);
}
/* The hover plate bleeds into the page gutter, but never past it —
   a fixed 24px bleed overflows the document once the gutter drops
   to 20px on a narrow phone. */
.svc-row {
  --bleed: min(var(--sp-5), var(--gutter));
}
.svc-row::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline: calc(var(--bleed) * -1);
  background: var(--bg-raised);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.svc-row:hover::before { opacity: 1; }
.svc-row:hover { padding-inline: var(--bleed); }

.svc-num {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  color: var(--fg-faint);
}
.svc-name {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--w-black);
  letter-spacing: var(--track-tight);
  line-height: 1.15;
}
.svc-desc { color: var(--fg-muted); font-size: var(--t-sm); line-height: 1.75; }
.svc-price {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-secondary);
  /* "Pricing after consultation" is long; let it wrap inside its
     fixed track rather than forcing the track wider. */
  text-wrap: balance;
  line-height: 1.5;
  text-align: end;
}
.svc-price[data-consult="true"] { color: var(--fg-muted); }

@media (max-width: 900px) {
  .svc-row {
    grid-template-columns: 3.5rem 1fr;
    gap: var(--sp-3) var(--sp-4);
  }
  .svc-desc  { grid-column: 2; }
  .svc-price { grid-column: 2; text-align: start; margin-block-start: var(--sp-1); }
}

/* ═══ CURRENT OFFER ════════════════════════════════════════════ */
.promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: center;
  padding: var(--sp-6);
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
}
@media (max-width: 860px) {
  .promo { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-5); }
}

.promo-media {
  position: relative;
  inline-size: 100%;
  aspect-ratio: var(--ratio, 1);
  background: #000;
  overflow: hidden;
}
.promo-video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  background: #000;
  /* Matches the monochrome treatment the work cards use, so the
     offer never introduces a hue the palette does not allow. */
  filter: grayscale(1) contrast(1.04);
  transition: filter var(--dur-slow) var(--ease-out);
}
.promo-media:hover .promo-video { filter: grayscale(0) contrast(1); }

.promo-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }

.promo-title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  letter-spacing: var(--track-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

/* The deadline is the point of the block, so it is typeset as a
   statement rather than a footnote. */
.promo-price {
  display: inline-block;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-primary);
}

/* ═══ PRICING NOTE ═════════════════════════════════════════════ */
.price-note {
  margin-block-start: var(--sp-6);
  font-size: var(--t-sm);
  color: var(--fg-muted);
  max-inline-size: var(--measure);
}

/* ═══ PROCESS / STEPS ══════════════════════════════════════════ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }

.step {
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--line);
}
.step-num {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  color: var(--fg-faint);
  margin-block-end: var(--sp-4);
}
.step h3 {
  font-size: var(--t-h4);
  font-weight: var(--w-black);
  margin-block-end: var(--sp-2);
}
.step p { color: var(--fg-muted); font-size: var(--t-sm); line-height: 1.7; }

/* ═══ WHY / VALUE GRID ═════════════════════════════════════════ */
.value-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-subtle);
  border: 1px solid var(--line-subtle);
}
@media (max-width: 720px) { .value-grid { grid-template-columns: 1fr; } }

.value {
  background: var(--bg);
  padding: var(--sp-6);
  transition: background var(--dur-slow) var(--ease-out);
}
.value:hover { background: var(--bg-raised); }
.value h3 {
  font-size: var(--t-h4);
  font-weight: var(--w-black);
  margin-block-end: var(--sp-3);
}
.value p { color: var(--fg-muted); font-size: var(--t-sm); line-height: 1.75; }

/* ═══ PAGE HEAD (interior pages) ═══════════════════════════════ */
.page-head {
  padding-block: calc(var(--sp-10) + 3rem) var(--sp-8);
  border-block-end: 1px solid var(--line-subtle);
}
.page-title {
  font-size: var(--t-display);
  font-weight: var(--w-black);
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.page-sub {
  margin-block-start: var(--sp-5);
  font-size: var(--t-body-lg);
  font-weight: var(--w-light);
  color: var(--fg-secondary);
  max-inline-size: 52ch;
  line-height: var(--leading-relaxed);
}

/* ═══ CTA BAND ═════════════════════════════════════════════════ */
.cta-band {
  padding-block: var(--section-y-l);
  border-block-start: 1px solid var(--line-subtle);
  text-align: center;
}
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6.5vw, 5.5rem);
  font-weight: var(--w-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  text-wrap: balance;
  margin-block-end: var(--sp-6);
}

/* ═══ CONTACT ══════════════════════════════════════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.15fr);
  gap: var(--sp-9);
  align-items: start;
}
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* Compact direct channels — the form is the primary action, so
   phone and email sit quietly beneath it rather than competing
   for the same visual weight. */
.contact-mini {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
}
.contact-mini a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: var(--tap-min);
  font-size: var(--t-sm);
  color: var(--fg-muted);
  transition: color var(--dur-base) var(--ease-out);
}
.contact-mini a:hover { color: var(--fg-primary); }
.contact-mini svg {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
  opacity: 0.7;
}
.contact-mini a:hover svg { opacity: 1; }

.contact-direct { display: flex; flex-direction: column; gap: var(--sp-4); }

.contact-link {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--line-subtle);
  min-block-size: var(--tap-min);
  transition: padding-inline var(--dur-base) var(--ease-out);
}
.contact-link:hover { padding-inline-start: var(--sp-3); }
.contact-link svg { inline-size: 20px; block-size: 20px; flex: none; color: var(--fg-muted); }
.contact-link-label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.contact-link-value {
  font-size: var(--t-body-lg);
  font-weight: var(--w-light);
  color: var(--fg-primary);
}

/* ═══ LEGAL ════════════════════════════════════════════════════
   Long-form legal text lives in the markup in both languages
   rather than in the dictionary: both versions stay in the DOM so
   both are indexable, and the operative Hebrew wording is never
   reconstructed by script. Only one is shown at a time. */
.lang-block { display: none; }
html[lang="he"] .lang-block[lang="he"],
html[lang="en"] .lang-block[lang="en"] { display: block; }

.legal-body { max-inline-size: var(--measure); }
.legal-body h2 {
  font-size: var(--t-h4);
  font-weight: var(--w-black);
  margin-block: var(--sp-7) var(--sp-3);
}
.legal-body h2:first-child { margin-block-start: 0; }
.legal-body p,
.legal-body li { color: var(--fg-muted); line-height: var(--leading-body); }
/* The email link in the legal text is still a touch target. */
.legal-body a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  color: var(--fg-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-body ul { display: flex; flex-direction: column; gap: var(--sp-2); margin-block-start: var(--sp-3); }
.legal-body li { padding-inline-start: var(--sp-4); position: relative; }
.legal-body li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.7em;
  inline-size: 4px; block-size: 1px;
  background: var(--fg-faint);
}

/* ═══ 404 ══════════════════════════════════════════════════════ */
.nf {
  min-block-size: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--gutter);
}

/* ═══ PACKAGE PAGE ═════════════════════════════════════════════ */
.pkg-stage { max-inline-size: 760px; margin-inline: auto; }

.pkg-bonus {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
}
.pkg-bonus-title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--w-black);
  letter-spacing: var(--track-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

/* The package page reuses .value for the inclusion grid, where each
   cell leads with its number. */
.value .step-num { margin-block-end: var(--sp-3); }