/* Director's cut. Scenes, not sections. Four transition families only: Reveal, Carry-over, Depth, K-mask.
   One gold thread: born in 02 → behind David → 45° jog into the conversation → the process route → gone → returns to close the frame.
   The full K appears twice (opening, David). Everywhere else: its angle, its fragments, its edges.
   Single committed brand look (navy / gold / blush / sand), deliberately not theme-switching. */
:root{
  --deep:#10141f; --navy:#1a1f2e; --navy-2:#222839; --navy-3:#2b3247;
  --gold:#ebc46b; --gold-deep:#c9a244; --gold-ink:#80621d;
  --blush:#f5e5de; --sand:#f7f0ea; --paper:#fffcfa; --line:#e8d8cf;
  --ink:#1a1f2e; --ink-2:#4a5062; --cream:#f5e5de; --cream-70:rgba(245,229,222,.72); --cream-50:rgba(245,229,222,.5); --cream-30:rgba(245,229,222,.3);
  --f:'Heebo',system-ui,'Segoe UI',Arial,sans-serif;
  --gut:clamp(20px,6vw,104px);
  --tight:clamp(48px,6vw,80px); --normal:clamp(80px,10vw,136px); --cine:clamp(128px,18vw,256px);
  --diag:clamp(48px,8vw,128px);
  --ease-out:cubic-bezier(.23,1,.32,1);      /* entrances, UI feedback */
  --ease-in-out:cubic-bezier(.77,0,.175,1);  /* on-screen movement */
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme:light;
}
*{box-sizing:border-box}
html{overflow-x:clip} /* no CSS smooth scrolling: it corrupts ScrollTrigger measurements on refresh; anchors are smoothed in JS */
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--f);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3,p,figure,blockquote,ol,ul{margin:0}
p,.ask,.st span,.lens .s{text-wrap:pretty}
ol,ul{padding:0;list-style:none}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:var(--gut);position:relative}
.skip{position:absolute;inset-inline-start:16px;top:-60px;background:var(--gold);color:var(--navy);padding:10px 16px;z-index:100;font-weight:700}
.skip:focus{top:12px}
.icon{width:20px;height:20px;flex:none}

/* No shared eyebrow. Each scene opens in its own way: a credit, a number, a quote, a station on the route, a rating, or nothing. */
.credit{font-size:15px;font-weight:400;letter-spacing:.04em;color:var(--cream-70)}
.credit b{font-weight:700;color:var(--cream)}
.num-intro{display:flex;align-items:baseline;gap:14px;font-size:17px;font-weight:300;color:var(--ink-2)}
.num-intro .n{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--gold-ink)}
.quote-intro{font-size:clamp(18px,1.6vw,22px);font-weight:300;color:var(--cream-70)}
.trust-q{font-size:clamp(44px,6.2vw,100px);line-height:.96;font-weight:800;letter-spacing:-.025em;max-width:13ch}
.micro{font-size:15px;font-weight:400;color:var(--ink-2);margin-inline-start:4px}
.h2{font-size:clamp(40px,5.6vw,84px);line-height:.98;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.h2 .lt{font-weight:250}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--ink-2);max-width:56ch}
.dark{background:var(--navy);color:var(--cream);position:relative;isolation:isolate}
.dark::after{content:"";position:absolute;inset:0;background:var(--noise);pointer-events:none;z-index:-1;opacity:.9}
.dark .lede{color:var(--cream-70)}
.deep{background:var(--deep)}

.cut{clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 30px;font:700 17px/1 var(--f);text-decoration:none;border:0;cursor:pointer;transition:background-color .25s ease,color .25s,box-shadow .25s}
.btn svg{transition:transform .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .btn:hover svg{transform:translateX(-5px)} }
.btn-gold{position:relative;overflow:hidden;background:var(--gold);color:var(--navy);box-shadow:inset 0 1px 0 rgba(255,250,235,.55),inset 0 -1px 0 rgba(120,90,30,.18)}
@media (hover:hover) and (pointer:fine){ .hero .btn-gold:hover{transform:translateY(-1.5px)} }
.anim.intro .hero .ctas .btn-gold::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 70%);transform:translateX(130%);animation:sheen .9s var(--ease-in-out) 1.1s 1 both}
@keyframes sheen{to{transform:translateX(-130%)}}
@media (hover:hover) and (pointer:fine){ .btn-gold:hover{background:#f2d48c} }
.btn-ghost{color:var(--cream);box-shadow:inset 0 0 0 1px var(--cream-30);padding:0 24px}
@media (hover:hover) and (pointer:fine){ .btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold)} }
.k-defs{position:absolute;width:0;height:0;overflow:hidden}

/* header */
.site-head{position:fixed;inset-inline:0;top:0;z-index:50;transition:background-color .4s,box-shadow .4s,height .4s;height:96px;display:flex;align-items:center}
.site-head .bar{display:flex;align-items:center;gap:40px;width:100%;max-width:1320px}
.logo img{height:40px;width:auto;transition:height .4s}
.nav{display:flex;gap:36px;margin-inline-start:auto;font-size:15px;font-weight:500}
.nav a{color:var(--cream-70);text-decoration:none;transition:color .2s}
@media (hover:hover) and (pointer:fine){ .nav a:hover{color:var(--gold)} }
.head-cta{min-height:44px;padding:0 20px;font-size:15px}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;color:var(--cream);cursor:pointer;margin-inline-start:auto}
.past-hero .site-head{background:rgba(16,20,31,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);height:72px;box-shadow:0 1px 0 rgba(245,229,222,.06)}
.past-hero .logo img{height:32px}
.mnav{position:fixed;inset:0;z-index:60;background:var(--deep);display:flex;flex-direction:column;justify-content:center;gap:28px;padding:40px var(--gut);font-size:30px;font-weight:700}
.mnav[hidden]{display:none}
.mnav a{color:var(--cream);text-decoration:none}
.mnav .close{position:absolute;top:16px;inset-inline-end:16px;display:flex}

/* ───────── 00 · opening : push in ───────── */
.hero{background:var(--deep);color:var(--cream);position:relative;isolation:isolate;overflow:hidden;min-height:max(740px,calc(100svh - 5vh));
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--diag)),0 100%);margin-bottom:calc(var(--diag) * -1);z-index:2}
.hero::after{content:"";position:absolute;inset:0;background:var(--noise);pointer-events:none;z-index:6;opacity:.8}
.hero-cam{position:absolute;inset:0;transform-origin:30% 70%}
.hero-k{position:absolute;z-index:1;left:-7vw;bottom:-6vh;height:116vh;min-height:860px;aspect-ratio:1;pointer-events:none}
.hero-k polygon{fill:url(#kfillDark)}
.hero-light{position:absolute;z-index:2;left:2vw;top:8vh;width:46vw;height:70vh;background:radial-gradient(closest-side,rgba(235,196,107,.12),rgba(235,196,107,.04) 55%,rgba(235,196,107,0));pointer-events:none}
.hero-fig{position:absolute;z-index:3;left:max(5vw,calc(50vw - 660px));bottom:0;height:min(88vh,880px);aspect-ratio:733/1100;transform-origin:50% 100%}
.hero-fig img{width:100%;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.hero-front{position:absolute;z-index:4;left:-7vw;bottom:-6vh;height:116vh;min-height:860px;aspect-ratio:1;pointer-events:none}
.hero-front polygon{fill:url(#kfillFront)}
.hero-copy{position:relative;z-index:5;width:min(820px,60%);display:flex;flex-direction:column;gap:28px}
.hero .wrap{position:static;min-height:max(760px,100svh);display:flex;flex-direction:column;justify-content:center;padding-top:120px;padding-bottom:calc(var(--diag) + 56px)}
.hero h1{display:flex;flex-direction:column;font-weight:800;letter-spacing:-.025em}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.04em}
.hero h1 .ln>span{display:block}
.hero .setup{font-size:clamp(17px,1.5vw,21px);font-weight:300;letter-spacing:0;color:var(--cream-50);margin-bottom:22px;line-height:1.4}
.hero .mid{font-size:clamp(34px,3.6vw,56px);font-weight:250;line-height:1.05;color:var(--cream)}
.hero .xl{font-size:clamp(60px,8.4vw,132px);line-height:.94}
.hero .xl.gold>span{color:var(--gold)}
.hero h1.two{gap:.12em}
.hero h1.two .ln{overflow:visible;padding-bottom:0;margin-bottom:0;font-size:clamp(34px,3.45vw,56px);line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
.hero h1.two .l1{font-weight:300;color:var(--cream)}
.hero h1.two .l2{font-weight:800;color:var(--gold)}
@media (min-width:901px){ .hero h1.two br{display:none} }
.hero .lede{color:var(--cream-70);max-width:40ch;font-size:clamp(17px,1.35vw,20px);margin-inline-start:9%}
.ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:13px;color:var(--cream-50)}

.star{color:var(--gold)}

/* ───────── 01 · situations : a loose map ───────── */
.situ{position:relative;z-index:1;padding-top:calc(var(--diag) + var(--tight));padding-bottom:calc(var(--tight) + 8vh)}
.leg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.leg polygon{fill:rgba(26,31,46,.035)}
.situ .wrap{z-index:1}
.proof{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;row-gap:10px;margin:0 0 clamp(40px,5vw,64px);padding:0;list-style:none;font-size:15px;line-height:1.5;color:var(--ink-2)}
.proof li{display:flex;align-items:center}
.proof li+li::before{content:"";width:1px;height:14px;background:var(--line);margin-inline:18px}
.proof a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold-deep);text-decoration-thickness:1px;text-underline-offset:5px}
.situ-head{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:64px}
.situ-head .t{display:flex;flex-direction:column;gap:18px}
.situ-head .aside{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:44ch}
.frames{transform-origin:50% 0}
/* ── the junction: the K in the logo is a map, gold plots between dark roads. Here the eight situations are the plots
      and the gaps between them are the K's slanted roads. Row two continues the same roads, so it sits one road-width over.
      The words stay upright; only the plot is slanted. Choosing one paints it gold, like the logo: "you are here". ── */
.field{--sk:12deg;--tan:.2126;--ph:250px;--gx:26px;--gy:24px;position:relative;display:flex;flex-direction:column;gap:var(--gy)}
.band{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gy) var(--gx);z-index:1}
.b1{left:calc((var(--ph) + var(--gy)) * var(--tan) / 2)}
.b2{left:calc((var(--ph) + var(--gy)) * var(--tan) / -2)}
.sit{position:relative;display:flex;flex-direction:column;min-height:var(--ph);padding:32px 36px 22px 30px;color:var(--ink);isolation:isolate;scroll-margin-top:140px}
.sit::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(calc(var(--sk) * -1));
  background:linear-gradient(225deg,var(--gold-deep) 0 11px,transparent 11px) top right/24px 24px no-repeat,var(--paper);
  box-shadow:0 1px 0 rgba(26,31,46,.05),0 22px 40px -32px rgba(26,31,46,.35);outline:2px solid transparent;outline-offset:5px;
  transition:background-size .3s var(--ease-out),background-color .25s ease,outline-color .25s ease}
:where(main,section,.sit)[tabindex="-1"]:focus{outline:none}
.sit-t{display:contents;font:inherit;color:inherit;text-align:inherit;letter-spacing:inherit}
.sit-h{margin:0;font:inherit}
.sit-d,.sit-in{display:flex;flex-direction:column;flex:1}
.sit .lab{display:block;font-size:13px;font-weight:700;color:var(--gold-ink);margin-bottom:6px}
.sit b{display:block;font-size:clamp(20px,1.55vw,23px);line-height:1.2;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
.sit .sub{display:block;margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.sit .go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:14px;align-self:flex-start;color:var(--gold-ink);font-size:15px;font-weight:700;text-decoration:none}
.sit .go svg{width:18px;height:18px;transition:transform .25s var(--ease-out)}
.sit .go::after{content:"";position:absolute;inset:0;z-index:2}
.sit .go:focus-visible{outline:none}
.sit:has(.go:focus-visible)::before{outline-color:var(--ink)}
/* pointing at a plot lights the roads around it */
@media (hover:hover) and (pointer:fine){
  .sit:hover::before{outline-color:var(--gold-deep);background-size:44px 44px,auto}
  .sit:hover .go svg{transform:translateX(-4px)}
}
/* you are here: the chosen plot turns gold (the same choice as in the form) */
.sit.on::before{background:linear-gradient(225deg,var(--ink) 0 11px,transparent 11px) top right/24px 24px no-repeat,linear-gradient(200deg,var(--gold),var(--gold-deep))}
.sit.on .lab,.sit.on .sub,.sit.on .go{color:var(--ink)}
.sit.on .sit-h::before{content:"אתם כאן" / "";position:absolute;top:-13px;right:34px;z-index:3;padding:3px 10px 4px;font-size:12px;font-weight:700;line-height:1.4;color:var(--gold);background:var(--ink);clip-path:polygon(0 0,100% 0,100% 100%,7px 100%,0 calc(100% - 7px))}
/* arriving from the menu: the plot is pointed out once */
.sit.ping::before{animation:sitPing 1.6s var(--ease-out) 1}
@keyframes sitPing{0%{outline-color:var(--gold-deep);outline-offset:16px}35%{outline-color:var(--gold-deep);outline-offset:5px}100%{outline-color:transparent;outline-offset:5px}}
/* the leg's gold tip, left behind when the world recedes: the questions break through under it */
.sit-shard{display:block;visibility:hidden;width:26px;height:26px;margin-top:clamp(56px,6vw,88px);margin-inline-start:calc(70% - 13px);background:var(--gold-deep);clip-path:polygon(0 0,100% 0,0 100%)}
/* narrower desktops: two plots per row, four rows; every row continues the roads of the one above */
@media (min-width:901px) and (max-width:1179px){
  .field{--sk:10deg;--tan:.1763;--ph:228px;--gx:24px;--gy:22px;--S:calc((var(--ph) + var(--gy)) * var(--tan))}
  .band{grid-template-columns:repeat(2,minmax(0,1fr));left:0}
  .b1 .sit:nth-child(-n+2){left:calc(var(--S) * 1.5)} .b1 .sit:nth-child(n+3){left:calc(var(--S) * .5)}
  .b2 .sit:nth-child(-n+2){left:calc(var(--S) * -.5)} .b2 .sit:nth-child(n+3){left:calc(var(--S) * -1.5)}
}

/* ───────── 02 · chaos → order : rack focus ───────── */
/* situations → chaos happens through the content: two thoughts leave the grid and the chaos is built around them */
.chaos{z-index:2}
.qc{display:block;width:auto;max-width:100%;will-change:transform}
.qc .q{transition:color .35s ease}
.qc.over-sand .q{color:var(--ink)}
.chaos-stage{min-height:100vh;display:flex;align-items:center;padding-block:var(--normal)}
.chaos-inner{display:flex;flex-direction:column;gap:clamp(48px,7vh,88px);width:100%}
.chaos-head{display:flex;flex-direction:column;gap:20px;max-width:900px}
.chaos-title{font-size:clamp(32px,3.6vw,56px);max-width:22ch}
@media (min-width:901px) and (max-height:820px){ .chaos-stage{padding-block:96px 48px} .chaos-inner{gap:clamp(28px,4.5vh,48px)} .chaos-title{font-size:clamp(30px,3vw,46px)} }
.chaos-title .lt{display:block}
.order{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:40px}
.order-line{position:absolute;top:0;right:0;left:0;height:2px;background:var(--gold);transform-origin:right center}
.order-dot{position:absolute;top:-6px;right:-7px;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(235,196,107,.16),0 0 40px 6px rgba(235,196,107,.4)}
.order-num{position:absolute;top:-34px;right:-4px;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--gold)}
.order-drop{position:absolute;top:0;left:33.333%;width:2px;margin-left:-1px;height:calc(var(--normal) + 320px);background:var(--gold);transform-origin:top;display:none}
.station{position:relative;display:flex;flex-direction:column;gap:14px;padding-inline:22px 24px}
.station .tk{position:absolute;top:-46px;right:-1px;width:2px;height:14px;background:var(--gold)}
.station .lab{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--gold)}
.q{display:block;width:auto;max-width:15em;white-space:normal;text-wrap:balance;font-size:clamp(22px,2.3vw,34px);font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--cream);will-change:transform}
.chaos-after{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.chaos-after .lede{grid-column:1/7}
.chaos-after .close{grid-column:9/13;font-size:clamp(18px,1.45vw,22px);line-height:1.35;font-weight:700;color:var(--cream)}

/* ───────── 03 + 04 · one light movement ───────── */
/* chaos → David happens through the thread: the order point becomes a line, a K fragment straddles the edge, then the person */
.human{position:relative;z-index:3;background:var(--blush)}
.k-frag{position:absolute;top:-84px;width:168px;height:168px;z-index:5;pointer-events:none;fill:url(#kfillGold);overflow:visible}
.thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.thread path{fill:none;stroke:var(--gold-deep);stroke-width:2;stroke-linejoin:miter}
.anim .thread .mseg{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease-out)}
.anim .thread .mseg.on{stroke-dashoffset:0}
.st05{position:absolute;z-index:2;display:flex;align-items:center;gap:14px;transform:translate(calc(-100% + 8px),-50%);font-size:17px;font-weight:300;color:var(--ink-2);white-space:nowrap}
.st05 i{width:16px;height:16px;border-radius:50%;background:var(--blush);box-shadow:inset 0 0 0 2px var(--gold-deep);flex:none}
.st05 .n{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--gold-ink)}
.about{padding-top:var(--cine)}
/* 03 · one quiet explanation: the bank's reach and the right point. The right point sits on the thread (desktop: a third in from the left, where the thread runs) */
.reach-wrap{position:absolute;top:calc(var(--cine) * .44);left:0;right:0;z-index:2;pointer-events:none}
.reach{margin:0}
.reach-track{position:relative;height:2px}
.reach-base{position:absolute;top:0;right:0;width:92%;height:1px;margin-top:.5px;background:rgba(26,31,46,.28);transform-origin:right center}
.reach-gold{position:absolute;top:0;right:0;width:66.667%;height:2px;background:var(--gold-deep);transform-origin:right center}
.reach-pt{position:absolute;top:1px;transform:translate(50%,-50%)}
.reach-pt i{display:block;width:14px;height:14px;border-radius:50%}
.pt-can{right:92%}
.pt-can i{background:var(--blush);box-shadow:inset 0 0 0 1.5px rgba(26,31,46,.45)}
.pt-right{right:66.667%}
.pt-right i{background:var(--gold-deep)}
.reach-pt b{position:absolute;bottom:22px;right:50%;transform:translateX(50%);white-space:nowrap;font-size:14px;font-weight:600;letter-spacing:.04em}
.pt-can b{color:var(--ink-2)}
.pt-right b{color:var(--gold-ink);right:auto;left:calc(50% + 12px);transform:none} /* beside the thread, never on it */
.reach-cap{margin-top:22px;font-size:15px;color:var(--ink-2)}
/* v46 · the signature: the line first runs all the way to what the bank allows, then settles back to the right point; what it gives up becomes visible room */
.reach-room{position:absolute;top:-5px;right:66.667%;width:25.333%;height:12px;background:repeating-linear-gradient(135deg,rgba(201,162,68,.28) 0 2px,transparent 2px 7px);border-inline:1px solid rgba(201,162,68,.5);transform-origin:left center}
.room-lab{position:absolute;top:16px;right:79.333%;transform:translateX(50%);white-space:nowrap;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--gold-ink)}
@media (min-width:901px){ /* desktop: this is the page's one big explanation, so it reads at a glance */
  .reach-gold{height:3px;margin-top:-.5px}
  .reach-pt i{width:18px;height:18px}
  .reach-pt b{font-size:18px;bottom:26px}
  .reach-room{height:16px;top:-7px}
  .room-lab{font-size:15px;top:22px}
  .reach-cap{margin-top:34px;font-size:22px;font-weight:600;color:var(--ink)}
}
.anim .reach .reach-base{transform:scaleX(0);transition:transform .7s var(--ease-out)}
.anim .reach .reach-gold{transform:scaleX(0);transition:transform .8s var(--ease-out) .6s}
.anim .reach .pt-can{opacity:0;transition:opacity .5s ease .45s}
.anim .reach .pt-right{opacity:0;transition:opacity .5s ease 1.2s}
.anim .reach .reach-cap{opacity:0;transition:opacity .6s ease 1.4s}
.anim .reach.on .reach-base,.anim .reach.on .reach-gold{transform:none}
.anim .reach.on .pt-can,.anim .reach.on .pt-right,.anim .reach.on .reach-cap{opacity:1}
.anim .reach.scrub *{transition:none}
.about-sticky>.wrap{width:100%}
.about-stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.about-fig{grid-column:8/13;grid-row:1;position:relative;height:min(78vh,700px);min-height:520px;transform-origin:50% 100%}
.about-fig .panel{position:absolute;inset:26% 3% 0 -7%;background:var(--navy);overflow:hidden;clip-path:polygon(0 0,calc(100% - 44px) 0,100% 44px,100% 100%,0 100%)}
.about-fig .panel .pl{position:absolute;inset:0;display:block}
/* desktop: one clear gold fragment beside David's shoulder (the K's 45° cut) and a smaller band low on the other side; both fully inside the frame, neither crossing his face */
/* desktop: a clean navy room. One gold slab stands behind David's shoulder (its top cut at the K's 45°); a quiet navy plane gives depth on the far side. Lots of empty navy. */
.about-fig .panel .pl-a{background:linear-gradient(200deg,#ebc46b 0%,#c9a244 60%,#a8842f 100%);clip-path:polygon(70% 24%,90% 4%,90% 100%,70% 100%)}
.about-fig .panel .pl-b{background:var(--navy-3);opacity:.7;clip-path:polygon(0 46%,20% 26%,20% 100%,0 100%)}
.about-fig .panel::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 85% 0%,rgba(255,236,190,.16),rgba(16,20,31,0) 55%),linear-gradient(180deg,rgba(16,20,31,0) 55%,rgba(16,20,31,.35));pointer-events:none}
.about-fig img{position:absolute;bottom:0;left:44%;transform:translateX(-50%);height:100%;width:auto;max-width:none;filter:drop-shadow(0 24px 40px rgba(16,20,31,.28))}
.edge-cap{position:absolute;top:calc(100% + 16px);right:3%;display:flex;gap:12px;align-items:baseline;font-size:15px;font-weight:300;color:var(--ink-2);white-space:nowrap}
.edge-cap span{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--gold-ink)}
.about-h{font-size:clamp(36px,4.3vw,66px)}
.about-copy{grid-column:1/8;grid-row:1;display:flex;flex-direction:column;gap:28px;padding-inline-end:4%}
.lens-index{display:none;gap:22px;font-size:12px;font-weight:600;letter-spacing:.08em;color:rgba(26,31,46,.35)}
.lens-index span{display:flex;align-items:center;gap:8px;transition:color .3s}
.lens-index span.on{color:var(--gold-ink)}
.lens-index span.seen{color:var(--ink)}
.lenses{position:relative;display:flex;flex-direction:column;gap:14px}
.lens{position:relative;background:var(--paper);padding:22px 28px 24px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);box-shadow:0 1px 0 var(--line)}
.lens:nth-child(2){margin-inline-start:40px}
.lens:nth-child(3){margin-inline-start:80px}
.lens .k{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--gold-ink);margin-bottom:6px}
.lens p{font-size:clamp(20px,1.7vw,25px);line-height:1.3;font-weight:700;letter-spacing:-.005em}
.lens .s{display:block;margin-top:8px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.lenses.live{height:230px;display:block}
.lenses.live .lens{position:absolute;inset-inline:0;top:84px;min-height:136px;margin:0;transform-origin:70% 30%;will-change:transform,opacity;box-shadow:0 28px 50px -30px rgba(26,31,46,.45),0 1px 0 var(--line)}
.lenses.live .lens p,.lenses.live .lens .s{opacity:var(--pt,1)}
.lenses.live~.bio{margin-top:-8px}
.bio{display:flex;flex-direction:column;gap:14px;padding-top:8px;margin-inline-start:7%}
.bio p{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:58ch}
.bio p b{color:var(--ink);font-weight:800}
.creds{display:flex;flex-wrap:wrap;gap:6px 0;font-size:14px;color:var(--ink-2)}
.creds i{font-style:normal;padding:0 10px;color:var(--gold-deep)}

/* conversation : locked camera */
.talk{position:relative;z-index:1;padding-top:calc(var(--normal) + 80px);padding-bottom:calc(var(--normal) + 40px)}
.talk-head{display:flex;flex-direction:column;gap:22px;margin-bottom:clamp(72px,9vw,128px);max-width:1100px}
.qa-list{position:relative;max-width:900px;padding-inline-start:48px}
/* two voices: the client's thoughts wander and press; David's answers stay on one calm axis, close to the thread */
.qa{position:relative;padding-bottom:clamp(56px,7vw,96px)}
.qa:last-child{padding-bottom:0}
.ask{position:relative;font-size:clamp(28px,3.1vw,48px);line-height:1.08;font-weight:700;letter-spacing:-.02em;max-width:19ch;margin-inline-start:var(--o,0)}

.ans{margin-top:22px;font-size:clamp(18px,1.4vw,20px);line-height:1.65;font-weight:300;color:var(--ink);max-width:40ch}
.note{margin-top:8px;font-size:12px;color:var(--gold-ink)}
.trust-line{margin:clamp(24px,4vw,56px) 0 clamp(80px,10vw,140px);margin-inline-start:12%;font-size:clamp(34px,4.4vw,68px);line-height:1.02;letter-spacing:-.02em;font-weight:800;max-width:22ch}
.trust-line .lt{display:block;font-weight:250;color:var(--ink-2)}

/* ───────── 05 · process : tracking shot ───────── */
/* conversation → process: 05 first, the route second, the environment third. The dark opens from the route's own point. */
.process{padding-top:calc(var(--tight) + 24px);padding-bottom:12vh;z-index:2;background:var(--blush)}
.process::after{display:none}
.process::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--deep);clip-path:circle(var(--iris,170%) at calc(50% + min(50%,660px) - var(--gut)) 0)}
.proc-lead{position:absolute;right:var(--gut);top:calc((var(--tight) + 24px) * -1 - 2px);width:2px;height:calc(var(--tight) + 26px);background:var(--gold-deep);margin-right:-1px}
.jn{position:relative}
.jn .stage{display:flex;flex-direction:column;gap:40px;padding-bottom:var(--normal)}
.p-label{margin-bottom:8px}
.cap{font-size:clamp(34px,4vw,60px);line-height:1;font-weight:800;letter-spacing:-.02em}
.cap .lt{font-weight:250;color:var(--cream-70)}
.outside{position:relative;display:flex;gap:0;justify-content:space-between;padding-top:34px;max-width:860px}
.outside::before{content:"";position:absolute;top:0;right:0;left:0;height:2px;background:var(--cream-30)}
.outside span{position:relative;font-size:clamp(20px,2vw,30px);font-weight:600;color:var(--cream-70)}
.outside span::before{content:"";position:absolute;top:-41px;right:0;width:14px;height:14px;border-radius:50%;background:var(--deep);box-shadow:inset 0 0 0 2px var(--cream-50)}
.route{position:relative}
.route>svg,.side-lab,.sign-halo{display:none}
.route .sts{display:flex;flex-direction:column;gap:30px;padding-inline-start:44px;position:relative}
.route .sts::before{content:"";position:absolute;top:8px;bottom:8px;right:7px;width:2px;background:var(--gold)}
.st{position:relative;display:flex;flex-direction:column;gap:6px;max-width:560px}
.st::before{content:"";position:absolute;top:10px;right:-44px;width:16px;height:16px;border-radius:50%;background:var(--deep);box-shadow:inset 0 0 0 2px var(--gold)}
.st b{font-size:clamp(24px,2.4vw,34px);line-height:1.05;font-weight:800;letter-spacing:-.01em}
.st span{font-size:17px;line-height:1.5;color:var(--cream-70)}
.st em{font-style:normal;font-size:13px;letter-spacing:.06em;color:var(--gold)}
.st.sig b{color:var(--gold)}
.core{font-size:clamp(40px,5.4vw,84px);line-height:.98;letter-spacing:-.02em;font-weight:800;max-width:19ch}
.core .lt{display:block;font-weight:250;color:var(--cream-70)}
.p-frame{font-size:clamp(17px,1.3vw,20px);line-height:1.55;font-weight:300;color:var(--cream-70);max-width:46ch}
.jn.live .p-frame{top:calc(clamp(100px,17vh,150px) + clamp(56px,4.8vw,80px));right:calc(var(--R) + 40px);width:min(620px,60vw);margin:0}
.life .lede span{display:block}
.sign-t{font-size:clamp(64px,10vw,160px);line-height:.9;font-weight:800;letter-spacing:-.03em}
.life{display:flex;flex-direction:column;gap:18px}
.life h3{font-size:clamp(40px,5.6vw,92px);line-height:.96;letter-spacing:-.02em;font-weight:800}
.life h3 .lt{display:block;font-weight:250;color:var(--cream-70)}
.marks{display:flex;flex-wrap:wrap;gap:12px 32px;font-size:14px;color:var(--cream-70)}
.marks span+span::before{content:"·";margin-inline-end:32px;color:var(--gold)}
.marks{gap:12px 0}
.entry{display:none}

/* live: one held stage, everything placed by the camera */
.jn.live{height:460vh}
.jn.live .stage{position:sticky;top:0;height:100vh;width:100vw;margin-inline-start:calc(50% - 50vw);overflow:hidden;display:block;padding:0}
.jn.live .stage>*{position:absolute}
.jn.live .p-label{top:118px;right:calc(var(--R) + 40px);margin:0}
.jn.live .cap,.jn.live .core,.jn.live .life{top:clamp(100px,17vh,150px);right:calc(var(--R) + 40px);width:min(900px,70vw)}
.jn.live .entry{display:block;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.entry path{fill:none;stroke:var(--gold);stroke-width:2}
.jn.live .outside{top:var(--cy);right:calc(var(--R) + 40px);width:min(860px,64vw);max-width:none;padding-top:30px}
.jn.live .outside::before{height:2px;background:var(--gold)}
.jn.live .outside span::before{box-shadow:inset 0 0 0 2px var(--gold)}
.jn.live .route{top:0;left:0;width:3200px;height:600px;transform-origin:0 0;will-change:transform}
.jn.live .route>svg{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route path{fill:none;stroke-width:2}
.route .main{stroke:var(--gold);transition:stroke-opacity .4s}
.route .done{stroke:var(--gold);stroke-width:3;display:none}
.route .tip{display:none}
.jn.live .route path{stroke-width:calc(2px * var(--sw,1))}
.jn.live .route circle{stroke-width:calc(2px * var(--sw,1))}
.jn.live .route .done{display:block;stroke-width:calc(3px * var(--sw,1))}
.jn.live .route.tracking .main{stroke-opacity:.35} /* the road ahead is quieter; the lit stretch is how far we have come */
.jn.live .route .tip{display:block;fill:var(--gold);stroke:none;opacity:0;transition:opacity .3s;filter:drop-shadow(0 0 8px rgba(235,196,107,.7))}
.jn.live .route.tracking .tip{opacity:1}
.route .after{stroke:var(--gold);stroke-dasharray:10 10;opacity:.8}
.route .side{stroke:var(--cream-30);transition:stroke .4s}
.route .side.lit{stroke:var(--gold)}
.route circle{fill:var(--deep);stroke:var(--gold);stroke-width:2}
.jn.live .route .sts{display:block;padding:0;position:static}
.jn.live .route .sts::before{display:none}
.jn.live .st{position:absolute;left:var(--x);top:330px;width:330px;transform:translateX(-100%);text-align:right;transition:opacity .4s}
.jn.live .st::before{display:none}
.jn.live .st em{display:none}
.jn.live .st b{font-size:42px;line-height:1}
.jn.live .st span{font-size:19px}
.jn.live .route.tracking .st{opacity:.32}
/* overview: from far away the titles stay readable (counter-scaled a little) and the small print waits for the close-up */
.jn.live .st b{transform:scale(var(--cs,1));transform-origin:100% 0}
.jn.live .st span,.jn.live .side-lab{transition:opacity .35s}
.jn.live .route.far .st span,.jn.live .route.far .side.down{opacity:0}
.jn.live .route.far .side-lab{visibility:hidden}
.mine-tag{display:inline-block;line-height:1.3;align-self:flex-start;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--deep);background:var(--gold);padding:3px 10px 4px;margin-bottom:4px;clip-path:polygon(0 0,100% 0,100% 100%,8px 100%,0 calc(100% - 8px))}
.offer.mine{box-shadow:inset 0 0 0 1.5px var(--gold)}
.offer .mine-tag{margin-bottom:14px}
.jn.live .route .side{transition:stroke .4s,opacity .35s}
.jn.live .route.far .st b{max-width:270px;margin-inline-start:auto} /* far: titles wrap instead of running into the next station */
.jn.live .route.tracking .st.on{opacity:1}
.jn.live .side-lab{display:block;position:absolute;font-size:17px;font-weight:600;letter-spacing:.06em;color:var(--cream-50);white-space:nowrap;transition:color .4s}
.jn.live .side-lab.lit{color:var(--gold)}
.jn.live .sign-halo{display:block;position:absolute;width:160px;height:160px;margin:-80px 0 0 -80px;border-radius:50%;background:radial-gradient(closest-side,rgba(235,196,107,.55),rgba(235,196,107,0));opacity:0}
.jn.live .sign-t{top:calc(var(--cy) - 230px);left:0;right:0;text-align:center}
.jn.live .life .marks{margin-top:10px}

/* the follow-up to "חתמתם": one compact editorial panel, not another big card. A short gold rule, one open 45° corner, and the action line closes the text */
.offer{position:relative;max-width:900px;margin:var(--normal) auto 0;display:flex;flex-direction:column;gap:10px;padding:40px 48px 30px;background:var(--navy);clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%)}
.offer::before{content:"";position:absolute;top:0;right:48px;width:44px;height:2px;background:var(--gold)}
.offer h3{font-size:clamp(26px,2.3vw,34px);line-height:1.1;font-weight:800}
.offer .tool{font-size:18px;font-weight:300;color:var(--gold);margin-bottom:6px}
.offer p{color:var(--cream-70);font-size:17px;line-height:1.6;max-width:62ch}
.offer .offer-more{margin-top:6px}
.offer .deeper{color:var(--cream);font-size:16px}
@media (hover:hover) and (pointer:fine){ .offer .deeper:hover{color:var(--gold)} }
.offer-act{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin-top:16px;padding-top:20px;box-shadow:0 -1px 0 rgba(245,229,222,.1)}
.offer .offer-act .free{margin:0;color:var(--cream);font-weight:700;font-size:17px}
.offer-act .btn{min-height:52px;color:var(--gold);box-shadow:inset 0 0 0 1px rgba(235,196,107,.55)}
@media (hover:hover) and (pointer:fine){ .offer-act .btn:hover{color:var(--navy);background:var(--gold);box-shadow:none} }

/* ───────── 06 · reviews : the camera settles ───────── */
.reviews{position:relative;z-index:3;background:var(--sand);margin-top:-12vh;padding-top:var(--normal);padding-bottom:var(--cine)}
.rv-head{display:flex;align-items:flex-end;gap:clamp(32px,6vw,96px);margin-bottom:80px}
.rv-head h2{font-size:clamp(30px,3.4vw,50px);line-height:1.05;font-weight:800;letter-spacing:-.015em;max-width:18ch}
.score{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-decoration:none;flex:none}
.score b{font-size:clamp(72px,8vw,120px);line-height:.85;font-weight:800;letter-spacing:-.03em}
.score .stars{font-size:15px;letter-spacing:.2em;color:var(--gold-deep)}
.score .cnt{font-size:14px;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--gold-deep);text-underline-offset:4px}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
.quote{display:flex;flex-direction:column;gap:18px}
.quote:nth-child(2){margin-top:72px}
.quote:nth-child(3){margin-top:24px;padding-inline-start:8%}
.quote .sit{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--gold-ink)}
.quote blockquote{font-size:clamp(20px,1.7vw,25px);line-height:1.45;font-weight:300}
.quote figcaption{font-size:14px;color:var(--ink-2)}
.quote figcaption b{color:var(--ink);font-weight:700}
.rv-thread{position:absolute;bottom:0;left:50%;width:2px;height:calc(var(--cine) * .72);background:linear-gradient(rgba(201,162,68,0),var(--gold-deep));transform-origin:top}

/* ───────── 07 · contact : final frame ───────── */
.contact{background:var(--deep);padding-top:var(--cine);padding-bottom:var(--normal)}
.contact .arrive{position:absolute;top:0;left:50%;width:2px;height:calc(var(--cine) + 1px);background:var(--gold);transform-origin:top}
.contact-head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;margin-bottom:64px}
.contact h2{font-size:clamp(42px,5.4vw,84px);line-height:.98;letter-spacing:-.02em;font-weight:250}
.contact h2 b{display:block;font-weight:800}
.frame{position:relative;max-width:820px;margin-inline:auto;padding:56px 60px 56px}
.frame svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.frame path{fill:none;stroke:var(--gold);stroke-width:2}
.contact .head-line{position:absolute;left:50%;width:2px;background:var(--gold);transform-origin:top}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.f{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:500;color:var(--cream-70)}
.f input{height:56px;padding:0 4px;font:400 19px var(--f);color:var(--cream);background:transparent;border:0;border-bottom:1px solid var(--cream-30);border-radius:0;transition:border-color .2s}
.f input::placeholder{color:rgba(245,229,222,.32)}
.f input:focus{outline:none;border-bottom-color:var(--gold)}
.err{min-height:18px;font-size:13px;color:#f3b39b}
.hp{position:absolute;top:0;inset-inline-start:0;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
.form-status{margin:12px 0 0;font-size:14px;line-height:1.6;color:#f3b39b}
.form-status:empty{display:none}
.btn[disabled]{cursor:progress;opacity:.75}
fieldset{border:0;padding:0;margin:28px 0 0}
legend{font-size:14px;font-weight:500;color:var(--cream-70);margin-bottom:14px;padding:0}
legend small{color:var(--cream-50);font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;font-size:15px;color:var(--cream-70);box-shadow:inset 0 0 0 1px var(--cream-30);cursor:pointer;transition:box-shadow .2s,color .2s,background-color .2s}
.chip input:checked+span{background:var(--gold);color:var(--navy);box-shadow:none;font-weight:600}
.chip input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.send{display:flex;align-items:center;gap:24px;margin-top:36px;flex-wrap:wrap}
.send .btn{min-width:180px}
.anim .frame .send .btn-gold::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 70%);transform:translateX(130%);transition:transform 1.1s var(--ease-out) .15s}
.anim .frame.closed .send .btn-gold::after{transform:translateX(-130%)} /* one sweep of light when the frame has closed */
.fine{font-size:13px;color:var(--cream-50);line-height:1.5}
/* consent: a native checkbox (keyboard, screen readers and zoom work as usual), never pre-checked */
.consent{margin-top:30px;display:flex;flex-direction:column;gap:12px}
.consent .fine{font-size:14px;color:var(--cream-70);max-width:62ch}
.check{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:4px 0}
.check input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--gold);cursor:pointer}
.check input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.check input[aria-invalid="true"]{outline:2px solid #f3b39b;outline-offset:3px}
.check label{font-size:15px;line-height:1.6;color:var(--cream);cursor:pointer}
.check label a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.consent+.send{margin-top:20px}
.fine a{color:var(--cream-70)}
.proto{color:var(--gold)}
.thanks[hidden]{display:none}
.thanks{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px 0}
.thanks h3{font-size:40px;font-weight:800}
.alt{text-align:center;margin-top:40px;font-size:16px;color:var(--cream-50)}
.alt b,.alt .tel{color:var(--cream);font-weight:600;text-decoration:none;white-space:nowrap}
.alt a{color:var(--gold)}

.foot{background:#0c1018;color:var(--cream-50);padding:48px 0 52px;font-size:14px}
.foot img{height:34px;width:auto;align-self:flex-start}
.foot a{color:var(--cream-70)}
.legal{font-size:13px;color:var(--cream-50)}

.capsule{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:calc(16px + env(safe-area-inset-left,0px));z-index:40;display:none;gap:8px;opacity:0;transform:translateY(16px);transition:opacity .25s var(--ease-out),transform .25s var(--ease-out);pointer-events:none}
.capsule a{width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--navy);color:var(--gold);box-shadow:0 10px 30px -10px rgba(0,0,0,.5),inset 0 0 0 1px rgba(235,196,107,.35);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.capsule a.call{background:var(--gold);color:var(--navy)}
.past-hero .capsule{opacity:1;transform:none;pointer-events:auto}
.at-contact .capsule,.cap-away .capsule{opacity:0;transform:translateY(16px);pointer-events:none}

/* entry choreography (CSS only, so the opening never waits for scripts) */
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes figIn{from{opacity:0;transform:scale(.97) translateY(14px)}to{opacity:1;transform:none}}
@keyframes shard{from{opacity:0}to{opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes inUp8{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes inUp12{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.anim.intro .hero .credit{animation:fadeIn .3s var(--ease-out) both}
.anim.intro .hero h1.two .l1>span{animation:inUp8 .4s var(--ease-out) both;animation-delay:80ms}
.anim.intro .hero h1.two .l2>span{animation:inUp12 .5s var(--ease-out) both;animation-delay:330ms}
.anim.intro .hero .lede,.anim.intro .hero .ctas{animation:fadeIn .3s ease both;animation-delay:150ms}
.anim.intro .hero-fig img{animation:figIn .9s var(--ease-out) both;transform-origin:50% 100%}
.anim.intro .hero-k polygon,.anim.intro .hero-front polygon{animation:shard 1.2s ease both;animation-delay:calc(var(--s) * 80ms)}


/* website layer: navigation, doors out of the story, a real footer */
.has-menu{position:relative}
.nav-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:500 15px var(--f);color:var(--cream-70);cursor:pointer}
.nav-btn[aria-expanded="true"]{color:var(--gold)}
@media (hover:hover) and (pointer:fine){ .nav-btn:hover{color:var(--gold)} }
.chev{width:12px;height:12px;transition:transform .25s}
.nav-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.svc-menu{position:absolute;top:calc(100% + 18px);right:-28px;width:500px;padding:26px 28px 22px;background:var(--deep);box-shadow:0 30px 60px -20px rgba(0,0,0,.6),inset 0 0 0 1px rgba(245,229,222,.08);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.has-menu:has(.nav-btn[aria-expanded="true"])::after{content:"";position:absolute;top:100%;right:-28px;width:500px;height:22px} /* hover bridge across the gap (outside the menu's clip-path, which would cut it off) */
.svc-menu:not([hidden]){display:block}
.svc-main{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
.svc-main a,.svc-main span{display:block;padding:9px 0;font-size:17px;font-weight:600;color:var(--cream);text-decoration:none}
.svc-main a::after,.m-svc a::after,.fsvc a::after{content:"\00a0←";font-weight:400;color:var(--gold)}
@media (hover:hover) and (pointer:fine){ .svc-main a:hover{color:var(--gold)} }
.deeper{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-deep);text-decoration-thickness:1px;text-underline-offset:6px;transition:color .2s,text-underline-offset .25s}
.deeper::after{content:"←";font-weight:400;transition:transform .3s}
@media (hover:hover) and (pointer:fine){ .deeper:hover{color:var(--gold-ink);text-underline-offset:9px} }
@media (hover:hover) and (pointer:fine){ .deeper:hover::after{transform:translateX(-4px)} }
.dark .deeper{color:var(--cream)}
@media (hover:hover) and (pointer:fine){ .dark .deeper:hover{color:var(--gold)} }
.bio .deeper{align-self:flex-start}
.life .deeper{margin-top:8px;align-self:flex-start}
.t-note{margin:-40px 0 clamp(64px,8vw,104px);margin-inline-start:12%;max-width:46ch;font-size:15px;line-height:1.6;color:var(--ink-2)}
.t-more{margin-top:clamp(40px,5vw,64px)}
.deeper-row{display:flex;flex-wrap:wrap;gap:12px 32px}
.rv-more{margin-top:64px}
.quote blockquote p+p{margin-top:.6em}
.rv-nav{display:none}
.toast{position:fixed;bottom:24px;left:50%;z-index:70;transform:translate(-50%,20px);margin:0;padding:12px 20px;background:var(--deep);color:var(--cream);font-size:14px;box-shadow:0 20px 40px -16px rgba(0,0,0,.5),inset 0 0 0 1px rgba(235,196,107,.3);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
.m-h{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--gold)}
.m-svc{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;margin-top:-14px}
.m-svc a,.m-svc span{font-size:17px;font-weight:500;color:var(--cream-70);padding:8px 0}
.m-main{display:flex;flex-direction:column;gap:14px}
.m-main a{font-size:28px;font-weight:700}
.m-contact{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;font-size:16px;font-weight:500}
.m-contact a{color:var(--cream-70)}
.m-contact .btn{color:var(--navy);flex:1 0 100%}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:44px;padding-bottom:30px}
.foot-id{display:flex;flex-direction:column;gap:11px;font-size:15px;line-height:1.55;color:var(--cream-70)}
.foot-id .tagline{margin-top:-6px;font-size:13px;letter-spacing:.08em;color:var(--gold);opacity:.75}
.foot-map{display:grid;grid-template-columns:repeat(3,auto);gap:24px clamp(36px,4.5vw,72px)}
.foot-map div{display:flex;flex-direction:column;gap:7px;font-size:15px;line-height:1.45}
/* services: eight entries in two columns of four */
.foot-map .fsvc{display:grid;grid-template-columns:repeat(2,auto);grid-template-rows:auto repeat(4,auto);grid-auto-flow:column;column-gap:clamp(24px,2.6vw,40px);row-gap:7px;align-content:start}
.fsvc .fh{grid-row:1;grid-column:1/-1}
.foot-map .fh{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--gold);margin-bottom:4px}
.foot-map a,.fsvc span{color:var(--cream-70);text-decoration:none}
@media (hover:hover) and (pointer:fine){ .foot-map a:hover{color:var(--gold)} }
.foot-legal{display:flex;flex-direction:column;gap:6px;padding-top:20px;line-height:1.55;box-shadow:0 -1px 0 rgba(245,229,222,.07);font-size:13px;color:var(--cream-50)}
.foot-legal .links a{color:var(--cream-70)}
.lic-row{display:flex;flex-wrap:wrap;gap:2px 0}
.lic-row span+span::before{content:"·";margin:0 10px;color:var(--cream-30)}
@media (max-width:900px){
  .foot{padding:40px 0 36px}
  .foot-top{flex-direction:column;gap:28px;padding-bottom:22px}
  .foot-map{grid-template-columns:1fr 1fr;gap:24px 20px;width:100%}
  .foot-map .fsvc{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:2px}
  .mnav{justify-content:flex-start;gap:26px;padding-top:84px;padding-bottom:0;overflow-y:auto}
  /* the close button never scrolls away; the call to action stays at the bottom edge, never buried */
  .mnav .close{position:fixed;z-index:2}
  .m-svc a,.m-svc span{padding:10px 0}
  .m-contact{position:sticky;bottom:0;z-index:1;margin:auto calc(var(--gut) * -1) 0;padding:14px var(--gut) calc(12px + env(safe-area-inset-bottom,0px));background:var(--deep);box-shadow:0 -1px 0 rgba(245,229,222,.08);gap:2px 22px}
  .m-contact a:not(.btn){padding:12px 0}
  .m-contact .btn{margin-bottom:4px}
}
@media (max-width:900px) and (max-height:720px){
  .mnav{gap:16px;padding-top:72px}
  .m-svc{margin-top:-8px}
  .m-svc a,.m-svc span{padding:8px 0}
  .m-main{gap:2px}
  .m-main a{font-size:22px;padding:5px 0}
}
@media (max-width:900px) and (max-height:500px) and (min-width:600px){
  .m-svc{grid-template-columns:repeat(4,max-content);gap:0 32px}
  .m-main{flex-direction:row;flex-wrap:wrap;gap:0 32px}
  .m-contact{flex-wrap:nowrap}
  .m-contact .btn{flex:0 0 auto;min-width:260px;margin:0}
}
@media (max-width:900px){
  body{font-size:17px}
  .nav,.head-cta{display:none}
  .menu-btn{display:flex}
  .site-head{height:72px}
  .logo img{height:32px}
  .capsule{display:flex}

  .hero{min-height:auto}
  .hero .wrap{min-height:0;padding-top:104px;padding-bottom:0;justify-content:flex-start}
  .hero-copy{width:100%;gap:22px}
  .hero .setup{margin-bottom:14px}
  .hero .mid{font-size:30px}
  .hero .xl{font-size:clamp(50px,14vw,72px)}
  .hero h1.two .ln{font-size:clamp(30px,8.6vw,40px);line-height:1.12;white-space:normal}
  .hero h1.two{gap:.18em}
  .hero-mfig{position:relative;height:min(56vh,520px);min-height:400px;margin-top:8px;margin-inline:calc(var(--gut) * -1)}
  .hero-k{left:auto;right:-40vw;bottom:-6%;height:auto;width:150vw;min-height:0}
  .hero-front{display:none}
  .hero-light{left:10%;top:auto;bottom:10%;width:90vw;height:50vh}
  .hero-fig{left:auto;right:50%;transform:translateX(50%);height:100%;bottom:0}
  .hero-copy .ctas .btn{flex:1 1 auto}

  .leg{display:none}
  .k-frag{width:120px;height:120px;top:-60px}
  .trust-line{margin-inline-start:0}
  .t-note{margin-inline-start:0;margin-top:-24px}
  .ask{max-width:none;margin-inline-start:calc(var(--o,0) * .3)}
  .edge-cap{display:none}
  .situ-head{display:flex;flex-direction:column;align-items:stretch;gap:16px;margin-bottom:clamp(52px,14vw,64px)}
  .frames{display:flex;flex-direction:column;gap:16px}
  /* phone: the junction becomes one road along the right edge with eight stops on it. Each stop is a disclosure
     (label + headline + a discreet +) that opens the sentence and "זה המצב שלי", one at a time; the open stop turns gold */
  .field{display:block;padding-inline-start:30px}
  .field::before{content:"";position:absolute;top:0;bottom:0;right:8px;width:2px;background:rgba(26,31,46,.14)}
  .band,.b1,.b2{display:block;left:0}
  .sit{display:block;min-height:0;padding:0;border-bottom:1px solid rgba(26,31,46,.09);scroll-margin-top:96px}
  .sit::before{display:none;transform:none;inset:0 -12px 0 -10px;background:linear-gradient(200deg,#f3dca6,var(--gold));box-shadow:none}
  .sit.open::before{display:block}
  .sit::after{content:"";position:absolute;top:22px;right:-29px;width:16px;height:16px;background:var(--gold-deep);clip-path:polygon(0 0,100% 0,100% 100%);transition:background-color .25s ease}
  .sit.open::after,.sit.on::after{background:var(--ink)}
  .sit.on .sit-h::before{content:none}
  .sit.on .lab::after{content:"\00a0· אתם כאן" / ""}
  .sit-t{display:block;position:relative;width:100%;min-height:64px;padding:14px 0;padding-inline-end:40px;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:start;letter-spacing:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sit-t:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .field.disc .sit-t::after{content:"";position:absolute;inset-inline-end:6px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--gold-ink),var(--gold-ink)) center/14px 1.5px no-repeat,linear-gradient(var(--gold-ink),var(--gold-ink)) center/1.5px 14px no-repeat;transition:transform .3s ease}
  .field.disc .sit.open .sit-t::after{transform:rotate(45deg)}
  .sit .lab{margin-bottom:3px}
  .sit.open .lab{color:var(--ink)}
  .sit b{font-size:18px;line-height:1.25}
  .sit-d,.sit-in{display:block;flex:none}
  .field.disc .sit-d{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .28s var(--ease-out),visibility 0s linear .28s}
  .field.disc .sit.open .sit-d{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .28s var(--ease-out),visibility 0s}
  .sit-in{min-height:0;overflow:hidden}
  .field.disc .sit-in{opacity:0;transition:opacity .2s ease}
  .field.disc .sit.open .sit-in{opacity:1;transition:opacity .26s ease .08s}
  .field.snap .sit-d,.field.snap .sit-in,.field.snap .sit::before,.field.snap .sit-t::after{transition:none!important}
  .sit .sub{margin-top:0;padding-inline-end:40px;color:var(--ink)}
  .sit .go{display:inline-flex;min-height:44px;margin:4px 0 10px;padding-top:0;color:var(--ink)}
  .sit .go::after{display:none}
  .sit .go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .sit-shard{margin-top:40px;margin-inline-start:calc(100% - 30px)}

  .chaos-stage{min-height:0}
  .order{grid-template-columns:1fr;gap:36px;padding-top:0;padding-inline-start:36px}
  .order-line{top:6px;bottom:0;right:6px;left:auto;width:2px;height:auto;transform-origin:top center}
  .order-dot{top:0;right:0}
  .station .tk{top:10px;right:-36px;width:14px;height:2px}
  .chaos-after{display:flex;flex-direction:column;align-items:stretch}

  .about{padding-top:32px}
  .reach-wrap{position:relative;top:auto;padding-top:96px}
  .reach-base{right:7px;width:calc(88% - 7px)}
  .reach-gold{right:7px;width:calc(50% - 7px)}
  .pt-can{right:88%}
  .pt-right{right:50%}
  .reach-room{right:50%;width:38%}
  .room-lab{right:69%;font-size:12px}
  .reach-pt b{font-size:13px}
  .reach-cap{margin-top:44px;font-size:14px} /* room for the 'room' label under the line */
  .proc-lead{right:calc(var(--gut) + 7px);height:calc(var(--tight) + 2px)} /* stops short of the first line of process text */
  .about-stage{display:flex;flex-direction:column;align-items:stretch;gap:36px}
  .about-copy{display:contents}
  .about-copy>.h2{order:1}
  .lens-run{order:3}
  .about-fig{height:auto;min-height:0;aspect-ratio:4/5;order:4;width:100%;max-width:440px;margin-inline:auto}
  /* phone: David is the composition. Navy, him almost full width, and one small gold corner cut at 45° as the only support */
  .about-fig .panel{inset:16% 0 0 0}
  .about-fig .panel .pl-a{background:linear-gradient(135deg,#ebc46b,#c9a244);clip-path:polygon(7% 7%,30% 7%,7% 30%)}
  .about-fig .panel .pl-b{display:none}
  .about-fig img{left:50%;height:100%}
  .bio{order:5;margin-inline-start:0}
  .lens:nth-child(2){margin-inline-start:20px}
  .lens:nth-child(3){margin-inline-start:40px}
  .talk{padding-top:var(--normal);padding-bottom:168px}
  .st05{left:var(--gut);right:calc(var(--gut) - 1px);top:auto;bottom:44px;transform:none;white-space:normal;align-items:center;gap:12px;font-size:16px;line-height:1.45}
  .st05 .t{flex:1;min-width:0}
  .qa-list{padding-inline-start:0}
  .ans,.note{margin-inline-start:16px}

  .offer{padding:30px 22px 22px;gap:8px}
  .offer::before{right:22px}
  .offer-act{flex-direction:column;align-items:stretch;gap:14px;margin-top:12px;padding-top:16px}
  .offer-act .btn{width:100%}

  .reviews{margin-top:-6vh}
  .rv-head{flex-direction:column;align-items:flex-start;gap:20px}
  /* reviews: one review at a time, the next one peeking; native swipe, no autoplay, no dots */
  .quotes{display:flex;flex-direction:row;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:calc(var(--gut) * -1);padding:6px var(--gut) 4px;scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .quotes::-webkit-scrollbar{display:none}
  .quotes:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px}
  .quote{flex:0 0 84%;scroll-snap-align:start;position:relative;padding-top:20px;box-shadow:0 -1px 0 rgba(26,31,46,.12)}
  .quote::before{content:"";position:absolute;top:-5px;right:0;width:9px;height:9px;background:var(--gold-deep);clip-path:polygon(0 0,100% 0,100% 100%)}
  .quote blockquote{font-size:18px;line-height:1.55}
  .rv-nav{display:flex;align-items:center;gap:14px;margin-top:22px}
  .rv-count{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--ink-2);font-variant-numeric:tabular-nums}
  .rv-count b{color:var(--gold-ink)}
  .rv-track{position:relative;flex:0 0 120px;height:2px;background:rgba(26,31,46,.12)}
  .rv-track i{position:absolute;inset:0;background:var(--gold-deep);transform-origin:right center;transform:scaleX(.3333);transition:transform .35s ease}
  .rv-more{margin-top:28px}
  .quote:nth-child(2),.quote:nth-child(3){margin-top:0;padding-inline-start:0}

  .frame{padding:44px 22px 40px}
  .fields{grid-template-columns:1fr}

  /* final mobile polish */
  .chaos-title{font-size:28px;line-height:1.08}
  .trust-line{font-size:28px;line-height:1.1}
  /* situations end closer to the chaos: ~60px including the gold remnant */
  .situ{padding-bottom:20px}
  .sit-shard{margin-top:18px}
  .chaos-stage{padding-top:56px}
  /* situations rows: one breath when a row first reaches the reading zone; the plus compresses, then turns; the open row carries a stronger gold line */
  .field.disc .sit.open .sit-t::after{animation:plusIn .32s ease 1}
  @keyframes plusIn{0%{transform:scale(1)}35%{transform:scale(.72)}100%{transform:rotate(45deg)}}
  .btn:active{transform:scale(.97);transition-duration:.06s}
  p,.sub,.ans,.st span,blockquote,.lens p,.q{text-wrap:pretty}
  .about-h .bk{display:block;text-wrap:balance}
  .core{font-size:clamp(32px,9.4vw,40px)}
  .chip{flex:1 1 auto;display:flex}
  .chip span{flex:1;justify-content:center;padding:0 14px}
  .alt{text-wrap:balance}
  .past-hero .site-head{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(16,20,31,.97)}
  .hero-fig img,.about-fig img{filter:none}
  .hero-mfig{height:min(56svh,520px)}
  .fine{font-size:14px}
  .situ-head .aside{text-wrap:pretty;transform:none;max-width:32ch;line-height:1.6;margin-top:2px} /* phone: part of the intro, not pushed down onto the list */
  .talk-head{margin-bottom:52px}
  .qa{padding-bottom:44px}
  .ans{margin-top:16px}
  .trust-line{margin:16px 0 64px}
  .t-note{margin-bottom:52px}
  .jn .stage{gap:32px}
  .outside span{font-size:16px}
  .deeper,.site-head .logo{position:relative}
  .deeper::before,.site-head .logo::before{content:"";position:absolute;inset:-9px -4px}
  .site-head .logo::before{inset:-6px -4px}
  .foot-map div{gap:2px}
  .foot-map a,.fsvc span{padding:6px 0}
  .fine a,.alt a{padding:12px 0}
  .foot-legal .links a{padding:8px 0}
  .lic-row{flex-direction:column}
  .lic-row span+span::before{display:none}
}
@media (min-width:901px){ .hero-mfig{display:contents} .lens-run:not(.mrun){display:contents} }
/* states added only by the phone choreography (also used on short, wide screens): global, so they never depend on the width breakpoint */
.lens-run.mrun{height:100vh;position:relative}
.lens-run.mrun .lenses{position:sticky;top:calc(46vh - 120px)}
.lenses.mlive{display:block}
.lenses.mlive .lens{position:absolute;inset-inline:0;top:0;margin:0;min-height:168px;padding:26px 26px 28px;will-change:transform,opacity;box-shadow:0 26px 44px -26px rgba(26,31,46,.5),0 1px 0 var(--line)}
.lenses.mlive .lens p{font-size:21px}
.lenses.mlive .lens .s{font-size:15.5px;opacity:var(--pt,1)}
.sts.mroute .st{transition:opacity .35s}
.sts.mroute .st:not(.on){opacity:.38}
.sts.mroute .st.cur b{color:var(--gold)}
.mpath .br{stroke:var(--gold);stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .6s ease-out}
.mpath .br.on{stroke-dashoffset:0}
.sts.mroute::before{display:none}
.sts.mroute .st:nth-child(3),.sts.mroute .st:nth-child(4),.sts.mroute .st:nth-child(7){margin-inline-start:26px}
.sts.mroute .st::before{transition:background-color .3s,box-shadow .3s}
.sts.mroute .st.on::before{background:var(--gold)}
.mpath{position:absolute;top:0;right:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.mpath path{fill:none;stroke:var(--gold);stroke-width:2}
.mpath .br{stroke:var(--cream-30)}
/* press feedback: short, no bounce. Applied to the control itself only where GSAP never writes a transform; situations press through their inner wrapper (the field itself is GSAP-driven) */
.btn{transition:background-color .25s ease,color .25s,box-shadow .25s,transform .12s ease}
.btn:active{transform:scale(.985)}
.capsule a{transition:transform .12s ease}
.capsule a:active{transform:scale(.95)}
.chip span{transition:box-shadow .2s,color .2s,background-color .2s,transform .12s ease}
.chip:active span{transform:scale(.97)}
/* never transform an ancestor of the stretched link (it would shrink the click area mid-press): desktop presses the words, phone presses the button or the link */
.sit:active .lab,.sit:active b,.sit:active .sub{transform:scale(.985)}
.sit .lab,.sit b{transition:transform .12s ease}
@media (max-width:900px){ .sit:active .lab,.sit:active b,.sit:active .sub{transform:none} .sit-t:active,.sit .go:active{transform:scale(.985)} .sit-t,.sit .go{transition:transform .12s ease,opacity .3s ease} }
/* mobile menu open: the page behind does not scroll */
html.menu-open,html.menu-open body{overflow:hidden}
.mnav{overscroll-behavior:contain}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ── iPhone / touch: native feel ── */
html{-webkit-text-size-adjust:100%}
a,button,label,summary{touch-action:manipulation}
.btn,.chip span,.nav-btn,.menu-btn,.sit-t,.capsule a{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* ── entrances: things appear, they don't teleport ── */
.svc-menu{transform-origin:top right;transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)}
.mnav{transition:opacity .2s var(--ease-out)}
.thanks{transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
@starting-style{
  .svc-menu{opacity:0;transform:translateY(-4px) scale(.98)}
  .mnav{opacity:0}
  .thanks{opacity:0;transform:translateY(8px)}
}
@media (max-width:900px){
  .proof{flex-direction:column;align-items:flex-start;row-gap:6px;font-size:14px}
  .proof li+li::before{display:none}
}

/* ── v33 · accessibility + the form's "you are here" ── */
.vh{-webkit-user-select:none;user-select:none;position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.f input:focus{box-shadow:0 2px 0 var(--gold)}
.chip.here span{position:relative}
.chip.here span::before{content:"";position:absolute;top:0;right:0;width:12px;height:12px;background:var(--navy);clip-path:polygon(0 0,100% 0,100% 100%)}
.chip-note{margin:12px 0 0;font-size:14px;color:var(--cream-70)}
legend small,.alt{color:var(--cream-70)}
.capsule{visibility:hidden;transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility 0s linear .25s}
.past-hero .capsule{visibility:visible;transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility 0s}
.at-contact .capsule,.cap-away .capsule{visibility:hidden;transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility 0s linear .25s}

/* ── v34 · reviews: the key line, whose situation it was, and the closest one first ── */
.quote mark{background:linear-gradient(transparent 60%,rgba(235,196,107,.5) 60%);color:inherit;font-weight:500;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em}
.quote figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.q-tag{display:none} /* the situation stays in data-v for matching; shown only as "מצב דומה לשלכם" on the matching review */
.q-tag{font-size:13px;font-weight:700;color:var(--gold-ink)}
.q-tag::before{content:"";display:inline-block;width:8px;height:8px;margin-inline-end:6px;background:var(--gold-deep);clip-path:polygon(0 0,100% 0,100% 100%)}
.q-src{color:var(--ink-2)}
.q-src::before{content:"·";margin-inline-end:10px;color:var(--ink-2)}
.quote.same figcaption::before{content:"מצב דומה לשלכם";order:-1;flex-basis:100%;font-size:12px;font-weight:700;color:var(--ink);letter-spacing:0}
@media (max-width:900px){
  /* the score becomes one line under the headline, so the first review is on screen with it */
  .rv-head{gap:14px;margin-bottom:28px}
  .rv-head h2{order:1}
  .score{order:2;flex-direction:row;align-items:center;gap:10px}
  .score b{font-size:26px;line-height:1;letter-spacing:-.01em}
  .score .stars{font-size:13px;letter-spacing:.12em}
  /* each review is a card in the junction's language: paper, gold corner, one 45° cut. Upright, so long reviews never cross an edge */
  .quotes{padding-top:10px;padding-bottom:10px}
  .quote{isolation:isolate;padding:26px 24px 30px;box-shadow:none}
  .quote::before{inset:0;top:0;right:0;width:auto;height:auto;z-index:-1;transform:none;
    clip-path:polygon(0 0,100% 0,100% 100%,22px 100%,0 calc(100% - 22px));
    background:linear-gradient(225deg,var(--gold-deep) 0 10px,transparent 10px) top right/22px 22px no-repeat,var(--paper)}
  .quote.same::before{background:linear-gradient(225deg,var(--ink) 0 10px,transparent 10px) top right/22px 22px no-repeat,linear-gradient(var(--gold-deep),var(--gold-deep)) top/100% 3px no-repeat,#fdf6e6}
  .quote blockquote{font-size:17.5px}
  .quote figcaption{margin-top:auto} /* names share one baseline across the cards */
  .q-src{display:none} /* the score link above already says these are Google reviews */
}

/* ── v35 · one quiet invitation after the questions ── */
.qa-more{margin-top:8px;margin-inline-start:48px;margin-bottom:40px;padding-top:20px;border-top:1px solid var(--line);max-width:920px}
.qa-more-h{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:4px 0;cursor:pointer;list-style:none;font-size:17px;font-weight:700;color:var(--ink)}
.qa-more-h::-webkit-details-marker{display:none}
.qa-more-h i{position:relative;flex:none;width:32px;height:32px;border:1.5px solid var(--gold-deep)}
.qa-more-h i::before,.qa-more-h i::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--gold-ink);transition:transform .3s var(--ease-out)}
.qa-more-h i::after{transform:rotate(90deg)}
.qa-more[open] .qa-more-h i::after{transform:rotate(0)}
.qa-more-h:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media (hover:hover) and (pointer:fine){ .qa-more-h:hover span{color:var(--gold-ink)} }
.qa-more[open] dl{margin-top:18px;animation:qaMoreIn .45s var(--ease-out)}
@keyframes qaMoreIn{from{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){ .qa-more[open] dl{animation:none} }
.qa-more dl{display:grid;grid-template-columns:1fr 1fr;gap:28px 48px;margin:0}
.qa-more dt{font-size:19px;font-weight:800;line-height:1.3;color:var(--ink)}
.qa-more dd{margin:6px 0 0;font-size:16.5px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
@media (max-width:900px){ .qa-more{margin-inline-start:0;margin-bottom:40px} .qa-more dl{grid-template-columns:1fr;gap:22px} .qa-more dt{font-size:18px} .qa-more dd{font-size:16px} }
.qa-next{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:8px;margin-inline-start:48px;padding-top:32px;border-top:1px solid var(--line);max-width:46ch}
.qa-next p{font-size:18px;line-height:1.6;color:var(--ink-2)}
.qa-next .qa-note{font-size:14px;color:var(--ink-2);margin-top:-6px}
.btn-line{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);padding:0 26px}
@media (hover:hover) and (pointer:fine){ .btn-line:hover{background:var(--ink);color:var(--cream)} }
.btn-line:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:900px){ .qa-next{margin-top:0;margin-inline-start:0} .qa-next .btn{width:100%} .qa-next p{font-size:17px} }

/* ── v38 · desktop: 01 → 02. The eight situations are the orderly part of the story; the next scene is the noise of offers.
      The next scene opens on "which offer is the best?", so the offers arrive first: a few sheets, a pile of them on one side and strays elsewhere,
      cut on the plots' slant, dropped across the dark edge. On scroll they sink into the dark at their own pace. The hidden shard keeps its place only on phones. ── */
.situ-edge{display:none}
@media (min-width:901px){
  .situ{--rise:clamp(72px,10vw,150px);padding-bottom:calc(var(--rise) + 64px)}
  .situ .sit-shard{height:0;margin:0}
  .situ::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:calc(var(--rise) + 1px);background:var(--noise),var(--navy);
    clip-path:polygon(0 100%,0% 62.0%,36% 50.0%,52% 53.0%,73% 31.0%,100% 45.0%,100% 100%);pointer-events:none;z-index:1}
  .situ-edge{display:block;position:absolute;left:0;right:0;bottom:-1px;height:calc(var(--rise) + 1px);pointer-events:none;z-index:1}
  .situ-edge i{position:absolute;left:var(--x);bottom:calc(var(--rise) * var(--y));width:var(--w);height:var(--h);opacity:var(--o,1);
    background:linear-gradient(var(--ink),var(--ink)) 22% 24%/46% 2px no-repeat,
      repeating-linear-gradient(to bottom,rgba(26,31,46,.16) 0 1.5px,transparent 1.5px 7px) 22% 44%/62% 34% no-repeat,var(--paper);
    transform:rotate(var(--r)) skewX(-12deg);box-shadow:0 14px 26px -12px rgba(8,10,18,.55);will-change:transform}
  .situ-edge i.g::after{content:"";position:absolute;top:0;right:0;width:9px;height:9px;background:var(--gold-deep);clip-path:polygon(0 0,100% 0,100% 100%)}
  .situ::after{z-index:0}
}
}