/* אירנה · "גלוס": a dark burgundy lacquer surface, a "hand" of four almond-tipped finger photos,
   and one band of light that sweeps across them like the shine on fresh gel. Hairline Heebo
   headings, one colour, lots of room. Only transform + opacity move; reduced motion = no shine. */

:root {
  --bg: #1F1216;
  --surface: #2C1A20;
  --ink: #F7F3F4;
  --muted: #CDB9BE;
  --primary: #C3374F;
  --primary-ink: #FFFFFF;
  --primary-soft: #F2C6CF;
  --soft: #3A222A;
  --accent: #D3AAA0;
  --line: #5A3843;
  --focus: #F2C6CF;
  --light: #E4E6EB;
  --light-ink: #1F1216;
  --light-muted: #5C4A50;
  --radius: 28px;
  --brand-text: var(--primary-soft);
  --k-outline-ink: var(--ink);
  --k-outline-fill: var(--soft);
  --font-head: "Heebo Variable", "Heebo", system-ui, sans-serif;
  --h1: clamp(3.25rem, 2rem + 5.5vw, 6.5rem);
  --h2: clamp(2.125rem, 1.5rem + 2.8vw, 3.5rem);
  --shine: linear-gradient(105deg, transparent 20%, rgb(255 255 255 / .55) 50%, transparent 80%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  overflow-x: clip;
  background: radial-gradient(120% 60% at 85% 0%, #2C1A20 0%, transparent 60%) no-repeat, var(--bg);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.7;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, figure, blockquote, h1, h2, ul { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; padding: .6rem 1rem; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 500; }
.skip-link:focus { top: 12px; }
.wrap { max-width: 1072px; margin-inline: auto; padding-inline: 16px; }
body .k-btn { font-weight: 500; }
/* Cherry glass: the main button. Over burgundy it reads as #9F2F42 (white text 7.1:1). */
.k-btn--glass.is-cherry { background: rgb(195 55 79 / .78); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .k-btn--glass.is-cherry { background: #9F2F42; }
}
.k-link { font-weight: 500; }

/* ---------- The finger shape (almond tip, square base) with its fixed reflection ---------- */
.finger, .work__img {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 50% 50% 14px 14px / 34% 34% 14px 14px;
}
.finger img, .work__img img { width: 100%; height: 100%; object-fit: cover; }
.finger::after, .work__img::after {
  content: "";
  position: absolute;
  left: 24%;
  top: 12%;
  width: 6px;
  height: 38%;
  border-radius: 999px;
  background: #fff;
  opacity: .18;
  pointer-events: none;
}
/* The moving shine band (only shown when motion is welcome, see the end of the file) */
.finger::before, .work__img::before, .obsessed__word::before { content: none; }

/* ---------- Banner + header ---------- */
.demo-banner { padding: .5rem 16px; background: var(--surface); color: var(--ink); font-size: .875rem; line-height: 1.5; }
.site-header { position: sticky; top: 0; z-index: 30; transition: background-color 300ms ease; }
.site-header.is-scrolled { background: rgb(31 18 22 / .92); }
.site-header__inner { display: flex; align-items: center; gap: 24px; max-width: 1072px; height: 56px; margin-inline: auto; padding-inline: 16px; }
.brand { display: flex; align-items: baseline; gap: 10px; margin-inline-end: auto; text-decoration: none; }
.brand__name { font-size: 30px; font-weight: 200; letter-spacing: -.01em; line-height: 1; }
.brand__sub { color: var(--muted); font-size: .75rem; font-weight: 500; letter-spacing: .06em; }
.site-nav { display: none; }

/* ---------- Hero: gloss ---------- */
.hero { padding-block: 28px 72px; }
.hero__grid { display: grid; align-content: center; gap: 32px; min-height: calc(92svh - 56px); }
.eyebrow { color: var(--accent); font-size: .8125rem; font-weight: 500; letter-spacing: .06em; }
.hero__title { margin-top: 12px; font-size: var(--h1); font-weight: 200; line-height: 1; letter-spacing: -.02em; }
.hero__title span { display: block; }
.hero__lead { max-width: 30ch; margin-top: 18px; color: var(--muted); }
.hero__actions { display: grid; justify-items: start; gap: 10px; margin-top: 26px; }
.hero__actions .k-btn { justify-self: stretch; }
.hand { display: flex; align-items: flex-end; gap: 13px; height: 250px; }
.finger { flex: 0 0 76px; }
.finger--1 { height: 212px; }
.finger--2 { height: 238px; }
.finger--3 { height: 226px; }
.finger--4 { height: 184px; }
.finger--1 img { object-position: 36% 50%; }
.finger--2 img { object-position: 60% 45%; }
.finger--3 img { object-position: 47% 50%; }
.finger--4 img { object-position: 52% 55%; }
.spark { display: none; }

/* ---------- Four works: the one light area ---------- */
.works { --focus: var(--light-ink); padding-block: 64px; background: var(--light); color: var(--light-ink); }
.h2 { font-size: var(--h2); font-weight: 300; line-height: 1.1; }
.sub { margin-top: 8px; color: var(--light-muted); }
.works__list { display: grid; gap: 32px; margin-top: 32px; padding: 0; list-style: none; }
.work__img { border-radius: 50% 50% 22px 22px / 26% 26% 22px 22px; aspect-ratio: 4 / 5; }
.work--1 img { object-position: 55% 55%; }
.work--2 img { object-position: 55% 50%; }
.work--3 img { object-position: 45% 50%; }
.work--4 img { object-position: 50% 55%; }
.work__name { margin-top: 10px; font-size: .9375rem; font-weight: 500; }

/* ---------- What they write ---------- */
.words { padding-block: 96px; }
.words__grid { display: grid; gap: 40px; }
.obsessed__word { position: relative; display: inline-block; overflow: hidden; padding-inline: .08em; font-size: clamp(5rem, 2.5rem + 11vw, 11rem); font-weight: 100; line-height: .95; }
.obsessed figcaption { margin-top: 8px; color: var(--muted); font-size: .8125rem; font-weight: 500; letter-spacing: .06em; }
.big-quote { padding: 26px 22px; border-radius: var(--radius); background: var(--surface); }
.big-quote p { font-size: 1.375rem; font-weight: 300; line-height: 1.5; }
.big-quote mark { background: none; color: var(--primary-soft); font-weight: 400; }
blockquote footer { margin-top: 10px; color: var(--muted); font-size: .8125rem; font-weight: 500; letter-spacing: .06em; }
.shorts { display: grid; gap: 24px; }
.shorts blockquote { padding-top: 16px; border-top: 1px solid var(--line); }
.score { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: .9375rem; }
.score svg { width: 15px; height: 15px; color: var(--accent); }

/* ---------- Booking ---------- */
.book { padding-block: 24px 96px; }
.book__card { padding: 30px 22px; border-radius: var(--radius); background: var(--surface); }
.book__text { margin-top: 12px; color: var(--muted); }
.book__actions { display: grid; gap: 12px; margin-top: 24px; }

/* ---------- Where ---------- */
.where { padding-block: 0 96px; }
.where__grid { display: grid; gap: 20px; }
.where__addr { margin-top: 10px; font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem); font-weight: 200; line-height: 1.05; }
.where__links { display: grid; justify-items: start; }

/* ---------- Footer + dock ---------- */
.site-footer { padding: 28px 0 36px; background: #170D10; color: var(--muted); font-size: .9375rem; }
.site-footer p + p { margin-top: 6px; }
.site-footer a { display: inline-block; min-height: 24px; color: var(--ink); }
.dock {
  position: fixed;
  inset-inline: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 35;
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: rgb(44 26 32 / .9);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 16px 32px -16px #000;
}
.dock > * { flex: 1 1 0; }
.dock.is-hidden { visibility: hidden; opacity: 0; transform: translateY(calc(100% + 24px)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .dock { transition: transform 420ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease, visibility 0s; }
  .dock.is-hidden { transition: transform 420ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease, visibility 0s 420ms; }
}
@media (prefers-reduced-motion: reduce) { .dock.is-hidden { transform: none; } }
@media (max-width: 899px) { body { padding-bottom: 88px; } }
@media (min-width: 900px) { .dock { display: none; } }

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  .works__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book__actions { display: flex; flex-wrap: wrap; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  body { font-size: 1.1875rem; }
  .site-nav { display: flex; gap: 28px; }
  .site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; font-weight: 500; text-decoration: none; }
  .site-nav a:hover { color: var(--primary-soft); }

  .hero { padding-block: 40px 120px; }
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 18px; align-items: center; min-height: min(calc(100svh - 56px), 760px); }
  .hero__text { grid-column: 1 / 7; grid-row: 1; }
  .hero__title { font-size: 104px; }
  .hero__actions { display: flex; align-items: center; gap: 22px; }
  .hero__actions .k-btn--block { width: auto; }
  .hand { grid-column: 7 / 13; grid-row: 1; justify-content: center; gap: 18px; height: 400px; }
  .finger { flex-basis: 120px; }
  .finger--1 { height: 340px; }
  .finger--2 { height: 380px; }
  .finger--3 { height: 360px; }
  .finger--4 { height: 290px; }

  .works { padding-block: 120px; }
  .works__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-bottom: 64px; }
  .work--1 { margin-top: 40px; }
  .work--3 { margin-top: 20px; }
  .work--4 { margin-top: 64px; }

  .words { padding-block: 160px; }
  .words__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 18px; row-gap: 0; align-items: start; }
  .obsessed { grid-column: 1 / 9; grid-row: 1; }
  .big-quote { grid-column: 5 / 13; grid-row: 2; margin-top: -40px; padding: 36px 34px; }
  .big-quote p { font-size: 1.75rem; }
  .shorts { grid-column: 1 / 5; grid-row: 2; margin-top: 40px; }

  .book { padding-bottom: 160px; }
  .book__card { margin-inline-end: 25%; padding: 44px 40px; }

  .where { padding-bottom: 160px; }
  .where__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 18px; align-items: end; }
  .where__main { grid-column: 1 / 8; }
  .where__links { grid-column: 9 / 13; }
}

/* =====================================================================
   Motion. Hero: pure CSS from the first paint (H1 and buttons never move;
   only the fingers rise and one band of light crosses them, right to left).
   Below the fold: the shine runs after .is-in, and again on hover once done.
   Reduced motion: fingers in place, no moving shine, no sparkle.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .finger::before, .work__img::before, .obsessed__word::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 20%;
    z-index: 1;
    width: 60%;
    background: var(--shine);
    transform: translateX(140%);
    pointer-events: none;
  }
  .obsessed__word::before { width: 40%; transform: translateX(200%); }

  .finger { animation: rise 500ms var(--k-ease-out) both; }
  .finger--2 { animation-delay: 70ms; }
  .finger--3 { animation-delay: 140ms; }
  .finger--4 { animation-delay: 210ms; }
  .finger::before { animation: sweep 520ms var(--k-ease-inout) 700ms both; }
  .finger--2::before { animation-delay: 790ms; }
  .finger--3::before { animation-delay: 880ms; }
  .finger--4::before { animation-delay: 970ms; }
  .spark { display: block; position: absolute; top: 9%; left: 50%; z-index: 2; width: 12px; height: 12px; margin-left: -6px; animation: spark 300ms ease 1300ms both; }

  .k-motion .work.is-in .work__img::before { animation: sweep 520ms var(--k-ease-inout) 250ms both; }
  .k-motion .obsessed.is-in .obsessed__word::before { animation: sweep-word 900ms var(--k-ease-inout) 200ms both; }
  @media (hover: hover) and (pointer: fine) {
    .k-motion .work.is-done:hover .work__img::before { animation: sweep-again 520ms var(--k-ease-inout) both; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes sweep { from { transform: translateX(140%); } to { transform: translateX(-140%); } }
@keyframes sweep-again { from { transform: translateX(140%); } to { transform: translateX(-140%); } }
@keyframes sweep-word { from { transform: translateX(200%); } to { transform: translateX(-160%); } }
@keyframes spark {
  0% { transform: scale(0) rotate(0); }
  50% { transform: scale(1) rotate(22deg); }
  100% { transform: scale(0) rotate(45deg); }
}

/* ---------- Accessibility statement + 404 ---------- */
.page { max-width: 720px; margin: 32px auto; padding: 32px 22px; border-radius: var(--radius); background: var(--surface); }
.page h1 { font-size: var(--h2); font-weight: 200; line-height: 1.1; }
.page h2 { margin-top: 26px; font-size: 1.25rem; font-weight: 500; }
.page ul { padding-inline-start: 1.2em; }
.page p { margin-top: 10px; color: var(--muted); }
.page li { color: var(--muted); }
.page a { display: inline-block; min-height: 24px; color: var(--primary-soft); font-weight: 500; }
@media (max-width: 760px) { .page { margin: 16px; } }