/* ==========================================================================
   TOMER BARBERSHOP — demo site for Liad Web Design
   Editorial daylight. Flat ivory, hairline rules, one deep-petrol accent.
   Deliberately NOT the parent site's Liquid Glass: this is a different
   client's brand, and a portfolio demo has to prove range.
   ========================================================================== */

/* Fonts are shared with the parent site — no duplicate payload. */
@font-face{font-family:'Heebo';font-style:normal;font-weight:100 900;font-display:swap;src:url(../../../assets/fonts/heebo-hebrew.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}
@font-face{font-family:'Heebo';font-style:normal;font-weight:100 900;font-display:swap;src:url(../../../assets/fonts/heebo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(../../../assets/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- tokens ---------- */
:root{
  --ivory:#F4F1EA;
  --ivory-2:#EAE6DB;
  --paper:#FCFBF8;
  --ink:#111214;
  --ink-2:#3E3B36;          /* body — 9.4:1 on ivory */
  --ink-3:#6A655C;          /* captions — 5.2:1 on ivory */
  --rule:rgba(17,18,20,.16);
  --rule-2:rgba(17,18,20,.08);
  /* Deep petrol. Cool counterpoint to a uniformly warm room, and the one
     colour with a barbershop claim of its own — the barbicide jar. */
  --accent:#12595C;            /* action + measurement — 7.0:1 on ivory */
  --accent-deep:#0C4245;       /* pressed */
  --accent-lift:#6FC3C4;       /* accent on ink — 9.2:1 */
  --on-ink:#F4F1EA;
  --on-ink-2:rgba(244,241,234,.74);
  --on-ink-3:rgba(244,241,234,.52);

  --wrap:1380px;
  --gut:clamp(1.15rem,4.2vw,3.5rem);

  --t-hero:clamp(2.35rem,6.1vw,5.35rem);
  --t-h2:clamp(1.95rem,4.4vw,3.7rem);
  --t-h2s:clamp(1.6rem,3vw,2.4rem);
  --t-h3:clamp(1.12rem,1.7vw,1.42rem);
  --t-lede:clamp(1.06rem,1.5vw,1.34rem);
  --t-body:clamp(1rem,1.1vw,1.07rem);
  --t-sm:.9rem;
  --t-xs:.8125rem;
  --t-micro:.6875rem;

  --num:clamp(2.2rem,5.4vw,4.4rem);

  /* Radius. Interactive things and panels are rounded; PHOTOGRAPHS ARE NOT.
     Square media against soft controls is what keeps this editorial rather
     than app-like — the images stay printed to the page. */
  --r-btn:10px;
  --r-chip:8px;
  --r-panel:14px;
  --r-focus:4px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* scroll scalars — CSS default is the FINISHED value, see main.js */
  --dolly:1; --line:1; --mline:1;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink-2);
  font-family:'Heebo',system-ui,sans-serif;
  font-weight:420;
  font-size:var(--t-body);
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,video{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}

/* Bidi isolation for every numeric range, price and Latin token. */
.ltr{direction:ltr;unicode-bidi:isolate;}
.num{font-family:'JetBrains Mono',ui-monospace,monospace;font-feature-settings:"tnum";letter-spacing:-.02em;}
/* U+20AA is outside the mono subset, so an unqualified ₪ beside mono digits
   silently falls back and the pair reads as two different fonts. Set it in
   Heebo on purpose instead, the same rule the parent site uses for units. */
.cur{font-family:'Heebo',sans-serif;font-weight:inherit;letter-spacing:0;margin-inline-end:.06em;}

::selection{background:var(--accent);color:#fff;}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-focus);}
.on-ink :focus-visible,.plate :focus-visible{outline-color:var(--accent-lift);}

.skip{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--on-ink);padding:.8rem 1.2rem;font-size:var(--t-sm);
}
.skip:focus{inset-inline-start:0;}

/* ---------- type primitives ---------- */
.h1,.h2,.h3{color:var(--ink);font-weight:800;margin:0;text-wrap:balance;}
.h1{font-size:var(--t-hero);line-height:.98;letter-spacing:-.045em;}
.h2{font-size:var(--t-h2);line-height:1.04;letter-spacing:-.036em;}
.h2--s{font-size:var(--t-h2s);}
.h3{font-size:var(--t-h3);line-height:1.28;letter-spacing:-.02em;font-weight:700;}
.lede{font-size:var(--t-lede);line-height:1.52;color:var(--ink-2);max-width:52ch;margin:0;}
.body{max-width:60ch;margin:0;}
.body+.body{margin-top:1em;}
p{margin:0;}

.mark{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--t-micro);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0;
}
.mark::before{content:"";width:1.9rem;height:1px;background:var(--accent);}

.cap{font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.01em;}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);}
.sec{position:relative;padding-block:clamp(4.5rem,10vw,9rem);}
.sec--tight{padding-block:clamp(3rem,6vw,5rem);}
.rule{height:1px;background:var(--rule-2);border:0;margin:0;}

.sechead{display:grid;gap:clamp(1.1rem,2vw,1.7rem);margin-bottom:clamp(2.4rem,5vw,4.2rem);}
.sechead .h2{max-width:22ch;}

/* page progress as a hairline spine at the inline start — a measurement,
   so it earns the accent */
.spine{
  position:fixed;inset-block:0;inset-inline-start:0;width:2px;z-index:60;
  background:var(--rule-2);pointer-events:none;
}
.spine i{
  display:block;width:100%;height:100%;background:var(--accent);
  transform:scaleY(var(--line));transform-origin:top;
}
@media (max-width:900px){.spine{display:none;}}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  display:flex;align-items:center;gap:1.5rem;
  padding:1.05rem var(--gut);
  transition:background .35s var(--ease),border-color .35s var(--ease),padding .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:color-mix(in srgb,var(--ivory) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom-color:var(--rule-2);
  padding-block:.72rem;
}
.brand{display:flex;align-items:baseline;gap:.5rem;color:var(--ink);}
.brand b{font-size:1.18rem;font-weight:800;letter-spacing:-.03em;}
.brand span{
  font-size:var(--t-micro);font-weight:600;letter-spacing:.22em;
  color:var(--ink-3);text-transform:uppercase;
}
.nav__links{display:flex;gap:.35rem;margin-inline:auto;}
.nav__links a{
  padding:.5rem .8rem;font-size:var(--t-sm);font-weight:500;color:var(--ink-2);
  border-radius:var(--r-chip);transition:color .2s var(--ease);
}
.nav__links a:hover{color:var(--accent);}
.nav__end{display:flex;align-items:center;gap:.7rem;}

.btn{
  --bg:var(--ink);--fg:var(--ivory);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--bg);color:var(--fg);
  padding:.82rem 1.35rem;font-size:var(--t-sm);font-weight:600;letter-spacing:-.01em;
  border-radius:var(--r-btn);
  transition:transform .18s var(--ease),background .22s var(--ease);
  will-change:transform;
}
.btn:hover{background:var(--accent);}
.btn:active{transform:scale(.975);}
.btn--accent{--bg:var(--accent);}
.btn--accent:hover{background:var(--ink);}
.btn--lg{padding:1.05rem 1.75rem;font-size:1rem;}
.btn--ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1px var(--rule);}
.btn--ghost:hover{--fg:var(--ivory);background:var(--ink);box-shadow:none;}
.btn--on-ink{--bg:var(--ivory);--fg:var(--ink);}
.btn--on-ink:hover{background:var(--accent-lift);color:var(--ink);}
.btn svg{width:17px;height:17px;flex:none;}

.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;}
.burger i{display:block;width:19px;height:1.6px;background:var(--ink);position:relative;transition:transform .25s var(--ease);}
.burger i::before,.burger i::after{
  content:"";position:absolute;inset-inline:0;height:1.6px;background:var(--ink);
  transition:transform .25s var(--ease);
}
.burger i::before{top:-6px;}
.burger i::after{top:6px;}

.sheet{
  position:fixed;inset:0;z-index:110;background:var(--ivory);
  display:grid;align-content:center;gap:.35rem;padding:var(--gut);
  transform:translateY(-100%);transition:transform .45s var(--ease-out);
  visibility:hidden;
}
.sheet.is-open{transform:none;visibility:visible;}
/* `.sheet a` must not repaint the button inside it: it outranks `.btn`, and it
   was turning the menu's primary CTA into ink-on-petrol at 2.33:1. */
.sheet a:not(.btn){
  font-size:clamp(1.6rem,7vw,2.4rem);font-weight:800;color:var(--ink);
  letter-spacing:-.035em;padding-block:.35rem;border-bottom:1px solid var(--rule-2);
}
.sheet .btn{margin-top:1.6rem;justify-self:start;}
.sheet__x{
  position:absolute;inset-block-start:.6rem;inset-inline-end:calc(var(--gut) - .6rem);
  width:48px;height:48px;display:grid;place-items:center;
  font-size:2rem;line-height:1;color:var(--ink);border-radius:var(--r-btn);
}

@media (max-width:1040px){
  .nav__links{display:none;}
  .burger{display:flex;}
  .nav__end .btn{display:none;}
  .nav{justify-content:space-between;}
}

/* ---------- hero ---------- */
/* No overflow clip here: the hero must be free to grow taller than the
   viewport rather than crop its own headline. Only the media is clipped. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero__media video,.hero__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1 + .07 * (1 - var(--dolly))));
  transform-origin:50% 42%;
  will-change:transform;
}
/* Scrim runs from the inline-start (right, in RTL) so the headline lands on
   clean plaster. Physical direction is intentional: it is pinned to a photo. */
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to left,var(--ivory) 2%,color-mix(in srgb,var(--ivory) 84%,transparent) 27%,color-mix(in srgb,var(--ivory) 26%,transparent) 58%,transparent 84%),
    linear-gradient(to top,color-mix(in srgb,var(--ivory) 86%,transparent),transparent 38%);
}
.hero__in{
  position:relative;z-index:1;flex:1;
  display:grid;align-content:center;gap:clamp(1.1rem,2vw,1.6rem);
  padding-block:clamp(6rem,12vh,8.5rem) clamp(1.6rem,3vh,2.4rem);
  opacity:var(--dolly);
}
.hero .h1{max-width:20ch;}
.hero .h1 em{font-style:normal;color:var(--accent);}
.hero__lede{max-width:46ch;}
.hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:.4rem;}
.hero__note{font-size:var(--t-xs);color:var(--ink-3);max-width:26ch;}

.hero__bar{
  position:relative;z-index:1;
  border-top:1px solid var(--rule);
  padding-block:clamp(1rem,2vw,1.4rem);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
}
.hero__bar div{display:grid;gap:.2rem;}
.hero__bar b{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:clamp(1.25rem,2.4vw,1.9rem);font-weight:600;color:var(--ink);
  letter-spacing:-.03em;line-height:1;
}
.hero__bar b .u{font-family:'Heebo',sans-serif;font-size:.55em;font-weight:600;margin-inline-start:.15em;}
.hero__bar span{font-size:var(--t-xs);color:var(--ink-3);}
@media (max-width:720px){
  .hero__bar{grid-template-columns:1fr 1fr;gap:1.1rem 1rem;}
}

.cue{
  position:absolute;inset-block-end:calc(clamp(1rem,2vw,1.4rem) + 5.2rem);
  inset-inline-end:var(--gut);z-index:2;
  display:flex;align-items:center;gap:.5rem;
  font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.cue i{display:block;width:1px;height:2.4rem;background:var(--rule);position:relative;overflow:hidden;}
.cue i::after{
  content:"";position:absolute;inset-inline:0;height:60%;background:var(--accent);
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(240%)}}
@media (max-width:900px){.cue{display:none;}}

/* A directional scrim only works while there is width to run across. Below
   900px the photograph fills the column, so the hero re-stacks: image on top,
   type on near-solid ivory underneath. Legibility is not negotiable. */
@media (max-width:900px){
  .hero__media::after{
    background:linear-gradient(to top,
      var(--ivory) 46%,
      color-mix(in srgb,var(--ivory) 94%,transparent) 58%,
      color-mix(in srgb,var(--ivory) 62%,transparent) 74%,
      color-mix(in srgb,var(--ivory) 14%,transparent) 92%);
  }
  .hero__media video,.hero__media img{object-position:50% 20%;}
  /* Tuned against the measured fold: the credibility numerals have to sit
     fully above 100svh, not be bisected by it. */
  .hero__in{align-content:end;padding-block:30svh clamp(.9rem,2vh,1.4rem);gap:.9rem;}
  .hero .h1,.hero__lede{max-width:none;}
  .hero__bar{padding-block:.85rem;}
  .hero__bar b{font-size:clamp(1.15rem,5.6vw,1.55rem);}
}
@media (max-width:900px) and (prefers-reduced-transparency:reduce){
  .hero__media::after{background:linear-gradient(to top,var(--ivory) 52%,color-mix(in srgb,var(--ivory) 90%,transparent) 70%,transparent);}
}

/* ---------- problem ledger ---------- */
.ledger{display:grid;gap:0;border-top:1px solid var(--rule);}
.ledger li{
  display:grid;grid-template-columns:4.5rem 1fr;gap:clamp(1rem,3vw,2.4rem);
  padding-block:clamp(1.2rem,2.4vw,1.8rem);
  border-bottom:1px solid var(--rule-2);
  align-items:start;
}
.ledger .o{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--t-sm);font-weight:600;color:var(--accent);padding-top:.28em;
}
.ledger p{max-width:58ch;}
.ledger b{color:var(--ink);font-weight:700;}
.ledger li:last-child{border-bottom-color:var(--rule);}
.ledger li:last-child p b{color:var(--accent);}

.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;}
@media (max-width:900px){.two{grid-template-columns:1fr;}}

.band{position:relative;overflow:hidden;background:var(--ivory-2);}
.band img,.band video{width:100%;object-fit:cover;}
.band--strip{aspect-ratio:16/7;}
.band--strip img{height:100%;}

/* ---------- method ---------- */
.method{position:relative;}
/* The rail sits in its own gutter OUTSIDE the ledger, so it can never cut
   through the numerals it is measuring. */
.steps{display:grid;gap:0;position:relative;padding-inline-start:clamp(1.3rem,2.8vw,2.3rem);}
.steps::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;
  width:1px;background:var(--rule-2);
}
.steps::after{
  content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  width:1px;height:100%;background:var(--accent);
  transform:scaleY(var(--mline));transform-origin:top;
}
.step{
  display:grid;
  grid-template-columns:clamp(4.6rem,9.6vw,7.4rem) minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1.2rem,3vw,3rem);
  padding-block:clamp(2rem,4vw,3.4rem);
  border-bottom:1px solid var(--rule-2);
  align-items:start;
}
.step:first-child{border-top:1px solid var(--rule);}
.step:last-child{border-bottom-color:var(--rule);}
.step__n{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--num);font-weight:200;color:var(--ink);
  line-height:.82;letter-spacing:-.05em;
  position:relative;
}
.step__b{display:grid;gap:.7rem;}
.step__t{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem;}
.chip{
  display:inline-flex;align-items:center;gap:.3rem;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--t-xs);font-weight:500;color:var(--accent);
  padding:.16rem .5rem;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent);
  border-radius:var(--r-chip);
}
.chip .u{font-family:'Heebo',sans-serif;}
.step figure{margin:0;background:var(--ivory-2);overflow:hidden;}
.step figure img,.step figure video{width:100%;aspect-ratio:3/2;object-fit:cover;}
.step--tall figure img,.step--tall figure video{aspect-ratio:3/4;}
@media (max-width:900px){
  .step{grid-template-columns:clamp(3.4rem,13vw,4.6rem) minmax(0,1fr);}
  .step figure{grid-column:2;}
}

.total{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;
  margin-top:clamp(1.4rem,3vw,2.2rem);
}
.total b{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:600;color:var(--accent);letter-spacing:-.04em;
}
.total span{color:var(--ink-3);font-size:var(--t-sm);}

/* ---------- services menu with sticky preview ---------- */
.menu{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start;}
.menu__list{border-top:1px solid var(--rule);}
/* The row is the booking link, so it needs a real hover, a real focus ring and
   a 44px-plus hit area — not a decorative highlight. */
.svc{
  display:grid;
  grid-template-columns:clamp(4.2rem,8vw,5.9rem) minmax(0,1fr) auto auto;
  gap:clamp(.7rem,1.8vw,1.5rem);align-items:baseline;
  padding-block:clamp(1.15rem,2.2vw,1.6rem);
  padding-inline:clamp(.5rem,1.2vw,.9rem);
  margin-inline:calc(-1 * clamp(.5rem,1.2vw,.9rem));
  border-bottom:1px solid var(--rule-2);
  width:100%;text-align:start;color:inherit;
  border-radius:var(--r-chip);
  transition:background .25s var(--ease);
}
.svc:last-child{border-bottom-color:var(--rule);}
.svc:hover,.svc.is-on{background:color-mix(in srgb,var(--paper) 70%,transparent);}
/* A tap has to be legible on its own, because below 900px the sticky preview
   is gone and the wash alone is about 2% of luminance. */
.svc:active{background:color-mix(in srgb,var(--accent) 10%,transparent);}

.svc__id{display:grid;gap:.45rem;justify-items:start;align-self:start;padding-top:.1em;}
.svc__id .num{font-size:var(--t-xs);color:var(--accent);font-weight:600;font-style:normal;}
/* Large enough to actually be read. A diagram too small to decode is
   decoration, which is the one thing this system must not be. */
.svc__gl{
  width:100%;max-width:5.9rem;height:auto;color:var(--ink-3);
  transition:color .25s var(--ease);
}
.svc:hover .svc__gl,.svc.is-on .svc__gl,.svc:focus-visible .svc__gl{color:var(--ink);}

.svc__go{
  align-self:center;color:var(--ink-3);
  opacity:0;transform:translateX(.35rem);
  transition:opacity .25s var(--ease),transform .3s var(--ease),color .25s var(--ease);
}
.svc__go svg{width:18px;height:18px;display:block;}
.svc:hover .svc__go,.svc:focus-visible .svc__go{opacity:1;transform:none;color:var(--accent);}
/* Touch has no hover, so the affordance must simply be present. */
@media (hover:none){
  .svc__go{opacity:1;transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .svc__go{transition:opacity .01s;transform:none;}
}
.svc__b{display:grid;gap:.32rem;}
.svc__n{
  font-size:clamp(1.1rem,2vw,1.4rem);font-weight:700;color:var(--ink);
  letter-spacing:-.025em;line-height:1.2;
}
.svc__d{font-size:var(--t-sm);color:var(--ink-2);max-width:44ch;line-height:1.55;}
.svc__m{display:grid;gap:.18rem;justify-items:end;text-align:end;}
.svc__p{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:clamp(1rem,1.7vw,1.2rem);font-weight:600;color:var(--ink);letter-spacing:-.03em;
}
.svc.is-on .svc__p,.svc:hover .svc__p{color:var(--accent);}
.svc__t{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--t-xs);color:var(--ink-3);}
.svc__t .u{font-family:'Heebo',sans-serif;}

.menu__pv{position:sticky;top:6.5rem;}
.menu__stage{position:relative;aspect-ratio:3/4;background:var(--ivory-2);overflow:hidden;}
.menu__stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);
  transition:opacity .5s var(--ease),transform .7s var(--ease);
}
.menu__stage img.is-on{opacity:1;transform:none;}
.menu__cap{margin-top:.8rem;display:flex;justify-content:space-between;gap:1rem;}
@media (max-width:900px){
  .menu{grid-template-columns:1fr;}
  .menu__pv{display:none;}
}
@media (max-width:560px){
  /* The glyph stays — it is the row's only category-specific signal — but the
     ordinal and diagram sit side by side so the text column keeps its measure. */
  .svc{grid-template-columns:3.5rem minmax(0,1fr) auto auto;gap:.65rem;}
  .svc__gl{max-width:3.5rem;}
  .svc__go svg{width:15px;height:15px;}
}

/* ---------- the turn (payoff) ---------- */
.turn{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.turn figure{margin:0;background:var(--ivory-2);overflow:hidden;}
.turn video,.turn img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.turn blockquote{margin:0;display:grid;gap:1.3rem;}
.turn q{
  quotes:"„" "”";
  font-size:clamp(1.5rem,3.2vw,2.5rem);font-weight:700;color:var(--ink);
  line-height:1.16;letter-spacing:-.032em;display:block;
}
@media (max-width:900px){.turn{grid-template-columns:1fr;}}

/* ---------- results rail ---------- */
.rail{
  display:flex;gap:clamp(1rem,2vw,1.6rem);
  padding-inline:var(--gut);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;cursor:grab;
}
.rail::-webkit-scrollbar{display:none;}
.rail.is-drag{cursor:grabbing;}
.rail>li{flex:0 0 clamp(240px,29vw,380px);scroll-snap-align:center;list-style:none;}
.rail figure{margin:0;background:var(--ivory-2);overflow:hidden;}
.rail img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.rail figcaption{
  margin-top:.75rem;display:flex;justify-content:space-between;align-items:baseline;
  gap:.8rem;border-top:1px solid var(--rule-2);padding-top:.6rem;
}
.rail b{color:var(--ink);font-weight:700;font-size:var(--t-sm);}
.railctl{display:flex;align-items:center;gap:.5rem;}
.arw{
  width:44px;height:44px;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--rule);border-radius:50%;color:var(--ink);
  transition:background .22s var(--ease),color .22s var(--ease);
}
.arw:hover{background:var(--ink);color:var(--ivory);}
.arw svg{width:16px;height:16px;}

/* ---------- value reframe ---------- */
/* The hairline divider is a 1px grid gap showing the container through, so the
   radius has to clip the children — hence overflow:hidden, not just a corner. */
.value{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--rule);
  box-shadow:0 0 0 1px var(--rule);
  border-radius:var(--r-panel);overflow:hidden;
}
.value>div{background:var(--ivory);padding:clamp(1.4rem,3.4vw,2.6rem);display:grid;gap:.55rem;align-content:start;}
.value b{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:clamp(2rem,5vw,3.4rem);font-weight:300;color:var(--ink);letter-spacing:-.05em;line-height:1;
}
.value>div:last-child{background:var(--paper);}
.value>div:last-child b{color:var(--accent);font-weight:500;}
.value .k{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
.value .n{font-size:var(--t-sm);color:var(--ink-2);}
@media (max-width:640px){.value{grid-template-columns:1fr;}}

/* ---------- tomer ---------- */
.who{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.who figure{margin:0;background:var(--ivory-2);overflow:hidden;}
.who img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.who__b{display:grid;gap:clamp(1.4rem,3vw,2.2rem);}
.ticks{display:grid;gap:0;border-top:1px solid var(--rule);}
.ticks li{
  display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:baseline;
  padding-block:.8rem;border-bottom:1px solid var(--rule-2);font-size:var(--t-sm);
}
.ticks svg{width:15px;height:15px;color:var(--accent);flex:none;transform:translateY(2px);}
.admit{
  background:var(--paper);padding:clamp(1.3rem,3vw,2rem);
  box-shadow:inset 0 0 0 1px var(--rule-2);display:grid;gap:.9rem;
  border-radius:var(--r-panel);
}
.admit h3{margin:0;}
.admit ul{margin:0;padding:0;list-style:none;display:grid;gap:.7rem;}
.admit li{
  padding-inline-start:1.1rem;position:relative;font-size:var(--t-sm);line-height:1.6;
}
.admit li::before{
  content:"";position:absolute;inset-inline-start:0;top:.72em;
  width:.5rem;height:1px;background:var(--accent);
}
@media (max-width:900px){.who{grid-template-columns:1fr;}}

/* ---------- guarantee plate ---------- */
.plate{
  background:var(--accent);color:#fff;
  padding-block:clamp(3rem,7vw,5.5rem);
}
.plate .h2{color:#fff;}
.plate .lede,.plate .body{color:rgba(255,255,255,.9);}
.plate .mark{color:rgba(255,255,255,.82);}
.plate .mark::before{background:rgba(255,255,255,.6);}
.plate .seal{
  width:clamp(8.5rem,17vw,12rem);aspect-ratio:1;border-radius:50%;
  background:var(--ivory);color:var(--accent);
  display:grid;place-content:center;justify-items:center;text-align:center;gap:.35rem;
  padding:1.1rem;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  transform:rotate(-7deg);
}
/* The seal is a stamp, not a readout. Heebo draws ₪ well below cap height, so
   at display size it reads as a subscript beside a digit — the unit is spelled
   out in the line underneath instead, and the figure stands alone. */
.plate .seal b{
  font-family:'Heebo',sans-serif;
  font-size:clamp(2.6rem,5.2vw,3.7rem);font-weight:800;line-height:.9;letter-spacing:-.04em;
}
.plate .seal span{
  font-size:var(--t-xs);letter-spacing:.06em;font-weight:700;line-height:1.3;
  white-space:nowrap;
}

/* ---------- testimonials ---------- */
.words{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule-2);box-shadow:0 0 0 1px var(--rule-2);
  border-radius:var(--r-panel);overflow:hidden;
}
.words figure{margin:0;background:var(--ivory);padding:clamp(1.3rem,3vw,2.1rem);display:grid;gap:1.1rem;align-content:start;}
.words blockquote{margin:0;font-size:1.02rem;line-height:1.6;color:var(--ink-2);}
.words figcaption{display:grid;gap:.15rem;border-top:1px solid var(--rule-2);padding-top:.8rem;}
.words b{color:var(--ink);font-weight:700;font-size:var(--t-sm);}
.stars{display:flex;gap:.15rem;color:var(--accent);}
.stars svg{width:13px;height:13px;}
@media (max-width:900px){.words{grid-template-columns:1fr;}}

/* ---------- faq ---------- */
.acc{border-top:1px solid var(--rule);max-width:74ch;}
.acc__i{border-bottom:1px solid var(--rule-2);}
.acc__q{
  display:flex;width:100%;align-items:center;gap:1rem;justify-content:space-between;
  padding-block:clamp(1rem,2vw,1.35rem);text-align:start;
  font-size:clamp(1rem,1.5vw,1.14rem);font-weight:600;color:var(--ink);letter-spacing:-.02em;
}
.acc__q i{
  flex:none;width:16px;height:16px;position:relative;
}
.acc__q i::before,.acc__q i::after{
  content:"";position:absolute;background:var(--accent);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.acc__q i::before{inset-inline:0;top:7.5px;height:1.5px;}
.acc__q i::after{inset-block:0;inset-inline-start:7.5px;width:1.5px;}
.acc__i.is-open .acc__q i::after{transform:scaleY(0);opacity:0;}
.acc__a{overflow:hidden;height:0;}
.acc__a>div{padding-bottom:clamp(1rem,2vw,1.4rem);max-width:62ch;font-size:var(--t-sm);line-height:1.68;}

/* ---------- visit ---------- */
.visit{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start;}
.visit figure{margin:0;background:var(--ivory-2);overflow:hidden;}
.visit img,.visit video{width:100%;aspect-ratio:16/9;object-fit:cover;}
.hours{border-top:1px solid var(--rule);}
.hours div{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding-block:.7rem;border-bottom:1px solid var(--rule-2);font-size:var(--t-sm);
}
.hours span:first-child{color:var(--ink);font-weight:600;}
.hours .num{color:var(--ink-2);}
.hours div.is-shut span:last-child{color:var(--ink-3);}

/* Live open/closed, derived from the rows above. The dot is never the only
   carrier of meaning — the word beside it says which state this is. */
.hours__now{
  display:flex;align-items:center;gap:.5rem;
  padding-block:.7rem;border-bottom:1px solid var(--rule-2);
  font-size:var(--t-sm);font-weight:700;color:var(--ink);
}
.hours__now i{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--ink-3);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink-3) 20%,transparent);
}
.hours__now.is-open i{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);}
.hours__now.is-open span{color:var(--accent);}
.hours__now small{font-weight:420;color:var(--ink-3);margin-inline-start:.1rem;}
/* Today's row, so the status has something to point at. */
.hours div.is-today{background:color-mix(in srgb,var(--paper) 70%,transparent);}
.hours div.is-today span:first-child::after{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--accent);margin-inline-start:.45rem;vertical-align:.15em;
}
@media (max-width:900px){.visit{grid-template-columns:1fr;}}

/* ---------- final cta ---------- */
.end{position:relative;overflow:hidden;background:var(--ink);color:var(--on-ink);isolation:isolate;}
.end__media{position:absolute;inset:0;z-index:-1;}
.end__media video,.end__media img{width:100%;height:100%;object-fit:cover;opacity:.42;}
.end__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to left,color-mix(in srgb,var(--ink) 90%,transparent),color-mix(in srgb,var(--ink) 55%,transparent) 70%,transparent);
}
.end{padding-block:clamp(4.5rem,11vw,8.5rem);}
.end .h2{color:var(--on-ink);}
.end .lede{color:var(--on-ink-2);}
.end .mark{color:var(--accent-lift);}
.end .mark::before{background:var(--accent-lift);}
.end__act{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem;}
.end__note{margin-top:1.5rem;font-size:var(--t-xs);color:var(--on-ink-3);}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--on-ink-2);padding-block:clamp(2.4rem,5vw,3.6rem);border-top:1px solid rgba(244,241,234,.12);}
.foot__t{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:space-between;align-items:flex-start;}
.foot .brand b,.foot .brand{color:var(--on-ink);}
/* Footer navigation is thumb navigation on a phone: 24px tall rows sitting a
   few px apart are miss-prone one-handed, so each link carries a 44px box. */
.foot__n{display:flex;flex-wrap:wrap;gap:.2rem 1rem;font-size:var(--t-sm);margin-block:-.6rem;}
.foot__n a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.35rem;}
.foot__n a:hover{color:var(--accent-lift);}
.foot__b{
  margin-top:clamp(1.8rem,4vw,2.8rem);padding-top:1.2rem;
  border-top:1px solid rgba(244,241,234,.12);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:var(--t-xs);color:var(--on-ink-3);
}
.foot__b a{color:var(--on-ink-2);text-decoration:underline;text-underline-offset:3px;}
.foot__b a:hover{color:var(--accent-lift);}
.demo-note{
  background:rgba(244,241,234,.07);box-shadow:inset 0 0 0 1px rgba(244,241,234,.14);
  padding:.9rem 1.1rem;font-size:var(--t-xs);color:var(--on-ink-2);
  margin-top:1.6rem;max-width:78ch;border-radius:var(--r-panel);
}
.demo-note b{color:var(--on-ink);}

/* ---------- mobile action dock ----------
   Below 1040px the nav CTA is gone and the page runs ~16 screens, so intent
   built at the guarantee had nowhere to land. The dock appears once the hero
   CTA leaves and retires inside the closing section, so it never competes
   with a real button. Visibility, not aria-hidden, keeps it out of the tab
   order while hidden — a container with focusable children must never be
   aria-hidden. */
.dock{
  position:fixed;inset-inline:0;inset-block-end:0;z-index:95;
  display:none;gap:.6rem;align-items:center;
  padding:.7rem var(--gut);
  padding-block-end:calc(.7rem + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--ivory) 93%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  border-top:1px solid var(--rule);
  box-shadow:0 -12px 32px rgba(17,18,20,.13);
  transform:translateY(102%);visibility:hidden;
  transition:transform .55s var(--ease-out),visibility .55s;
}
@media (max-width:1040px){.dock{display:flex;}}
.dock.is-on{transform:none;visibility:visible;}
.dock .btn{flex:1;min-height:48px;}
.dock__tel{
  flex:none;width:48px;height:48px;display:grid;place-items:center;
  border-radius:var(--r-btn);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--rule);
  transition:background .22s var(--ease),color .22s var(--ease);
}
.dock__tel svg{width:20px;height:20px;}
.dock__tel:hover,.dock__tel:active{background:var(--ink);color:var(--ivory);}
@media (prefers-reduced-motion:reduce){.dock{transition:none;}}
@media (prefers-reduced-transparency:reduce){.dock{backdrop-filter:none;background:var(--ivory);}}

/* ---------- back-to-parent ribbon ---------- */
.ribbon{
  position:fixed;inset-block-end:1rem;inset-inline-end:1rem;z-index:120;
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--ink);color:var(--on-ink);
  padding:.6rem .95rem;font-size:var(--t-xs);font-weight:600;border-radius:var(--r-btn);
  white-space:nowrap;
  box-shadow:0 10px 28px rgba(17,18,20,.24);
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.ribbon:hover{background:var(--accent);}
.ribbon:active{transform:scale(.97);}
.ribbon svg{width:14px;height:14px;}
/* Below 1040px the thumb zone belongs to the dock, and a fixed link pointing at
   a different website is the wrong thing to keep permanently reachable. The
   footer already carries the same link, so this one simply stands down. */
@media (max-width:1040px){.ribbon{display:none;}}

/* ==========================================================================
   MOTION
   Defaults below are the FINISHED state. main.js adds .scenes to <html>
   only when scripting is live and motion is not reduced; .scenes supplies
   the start values. So with JS off, or reduced motion, the page is simply
   already arrived — no flash of a completed animation snapping backwards.
   ========================================================================== */
.scenes{--dolly:1;--line:0;--mline:0;}
.scenes .reveal{opacity:0;transform:translateY(18px);}
.scenes .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  transition-delay:var(--d,0s);
}
.scenes [data-split] .w{
  display:inline-block;opacity:0;transform:translateY(.5em) rotate(1.2deg);
}
.scenes [data-split].is-in .w{
  opacity:1;transform:none;
  transition:opacity .62s var(--ease-out),transform .72s var(--ease-out);
  transition-delay:calc(var(--i) * 32ms);
}
.scenes .band--strip img,.scenes .step figure img,.scenes .who img,.scenes .visit img{
  clip-path:inset(0 0 100% 0);
}
.scenes .band--strip.is-in img,.scenes .step figure.is-in img,
.scenes .who figure.is-in img,.scenes .visit figure.is-in img{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s var(--ease-out);
}
.scenes .plate .seal{transform:rotate(-24deg) scale(.72);opacity:0;}
.scenes .plate .seal.is-in{
  transform:rotate(-7deg) scale(1);opacity:1;
  transition:transform .9s cubic-bezier(.2,.9,.25,1.06),opacity .5s var(--ease);
}
.scenes .rule--draw{transform:scaleX(0);transform-origin:right;}
.scenes .rule--draw.is-in{transform:none;transition:transform 1.1s var(--ease-out);}

@media (prefers-reduced-motion:reduce){
  .cue i::after{animation:none;}
  .hero__media video,.hero__media img{transform:none;}
}

/* honour a stated preference for less transparency */
@media (prefers-reduced-transparency:reduce){
  .nav.is-stuck{backdrop-filter:none;background:var(--ivory);}
  .hero__media::after{background:linear-gradient(to left,var(--ivory) 12%,color-mix(in srgb,var(--ivory) 92%,transparent) 40%,color-mix(in srgb,var(--ivory) 55%,transparent) 70%,transparent);}
}
@media (prefers-contrast:more){
  :root{--ink-2:#26241F;--ink-3:#4A463F;--accent:#0C4245;--rule:rgba(17,18,20,.34);--rule-2:rgba(17,18,20,.2);}
}