/* rnshmuel.com v3 · shared styles for / and /he/ */
:root{
  --navy:#101C2E; --navy2:#16243A; --navy3:#0B1522;
  --paper:#FBFAF7; --cream:#F1EEE7;
  --ink:#101820; --ink2:#2B3544; --gray:#5A6472; --gray2:#8A96A8;
  --red:#C8342A; --line:#DDD8CC; --lineDark:rgba(255,255,255,.14);
  --lightblue:#B9C2CF; --lightblue2:#8FA0B8;
  --tlx:173px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Heebo',system-ui,'Segoe UI',Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1320px;margin:0 auto;padding:0 48px}
.g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.c1-6{grid-column:1/7}.c1-7{grid-column:1/8}.c1-8{grid-column:1/9}.c8-13{grid-column:8/13}.c7-13{grid-column:7/13}.c3-12{grid-column:3/12}
h1,h2,h3{line-height:1.05}
h2{font-size:clamp(36px,4.6vw,62px);font-weight:900;letter-spacing:-.035em;max-width:18ch;margin-top:22px}
h3{font-size:clamp(22px,2.2vw,30px);font-weight:900;letter-spacing:-.025em}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{letter-spacing:-.015em}
p{max-width:62ch}
.lead{font-size:clamp(18px,1.55vw,22px);line-height:1.55;color:var(--ink2)}
.on-navy .lead{color:var(--lightblue)}
.small{font-size:15px;color:var(--gray)}
.u{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.u:hover{color:var(--red)}
section{padding:120px 0;scroll-margin-top:72px}
.on-navy{background:var(--navy);color:#fff}
.on-cream{background:var(--cream)}
.skip{position:absolute;inset-inline-start:-999px;top:0;background:#fff;padding:8px}
.skip:focus{inset-inline-start:8px;top:8px;z-index:2000}

/* section number */
.no{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gray2);font-weight:500}
.no::before{content:"";width:36px;height:1px;background:currentColor;opacity:.6}
.no b{font-weight:700;color:var(--red)}
.on-navy .no{color:var(--lightblue2)}
[dir=rtl] .no{letter-spacing:.06em;text-transform:none}

/* nav */
nav{position:sticky;top:0;z-index:1000;background:rgba(16,28,46,.82);backdrop-filter:blur(12px);color:#fff}
nav.light{background:rgba(251,250,247,.9);color:var(--navy)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{text-decoration:none;font-weight:900;letter-spacing:-.02em;font-size:17px}
.links{display:flex;align-items:center;gap:30px}
.links a{text-decoration:none;font-size:14px;font-weight:500;opacity:.85}
.links a:hover{opacity:1;color:var(--red)}
.lang{font-size:13px;font-weight:700;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:4px 12px;opacity:1 !important;letter-spacing:.02em}
.lang:hover{border-color:var(--red)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:72px 0 0;min-height:min(calc(100vh - 64px),860px);display:flex;flex-direction:column;justify-content:space-between}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(60% 50% at 85% 10%,rgba(200,52,42,.16),transparent 70%),
  radial-gradient(50% 40% at 10% 90%,rgba(185,194,207,.10),transparent 70%)}
.hero .wrap{position:relative;width:100%}
.hero .face{position:absolute;inset-inline-end:48px;top:-8px;width:clamp(220px,22vw,320px);aspect-ratio:3/4;object-fit:cover;object-position:50% 12%;height:auto;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1);transform:rotate(2deg) scaleX(-1);z-index:1}
[dir=rtl] .hero .face{transform:rotate(-2deg) scaleX(-1)}
.hero h1{font-size:clamp(72px,13.5vw,210px);font-weight:900;letter-spacing:-.05em;line-height:.9;margin-inline-start:-.04em}
[dir=rtl] .hero h1{letter-spacing:-.02em;margin-inline-start:0;line-height:1.02}
.roles{margin-top:34px;display:flex;flex-wrap:wrap;gap:8px 0;font-size:clamp(18px,1.75vw,26px);color:#fff;font-weight:500;letter-spacing:-.01em;max-width:46ch}
[dir=rtl] .roles{letter-spacing:0}
.roles span+span::before{content:"·";margin:0 14px;color:var(--red);font-weight:900}
.nums{margin-top:88px;border-top:1px solid var(--lineDark)}
.nums .g{grid-template-columns:1.4fr 1fr 1fr 1fr}
.stat{padding:40px 0 44px;border-inline-start:1px solid var(--lineDark);padding-inline-start:24px}
.stat:first-child{border-inline-start:0;padding-inline-start:0}
.stat .n{font-size:clamp(30px,3.4vw,50px);font-weight:900;letter-spacing:-.04em;line-height:1;white-space:nowrap;color:#fff}
[dir=rtl] .stat .n{letter-spacing:-.01em}
.stat .n i{font-style:normal;color:var(--red);font-weight:400;margin:0 .1em}
.stat .l{font-size:15px;color:var(--lightblue);margin-top:12px;max-width:26ch;line-height:1.45}
.hint{margin-top:64px;display:flex;justify-content:flex-end;align-items:center;gap:12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--lightblue2)}
.hint::after{content:"";width:1px;height:40px;background:var(--red)}
[dir=rtl] .hint{letter-spacing:.08em;text-transform:none}

/* story · timeline */
.story{padding-top:96px}
.tl{margin-top:80px;position:relative}
.tl::before{content:"";position:absolute;top:8px;bottom:8px;inset-inline-start:var(--tlx);width:1px;background:var(--lineDark)}
.tl-item{display:grid;grid-template-columns:130px 40px minmax(0,1fr) 320px;column-gap:24px;padding:0 0 72px;align-items:start}
.tl-item:last-child{padding-bottom:0}
.tl-item .yr{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lightblue2);text-align:end;padding-top:9px;line-height:1.3}
[dir=rtl] .tl-item .yr{letter-spacing:0;text-transform:none}
.tl-item .dot{width:12px;height:12px;border-radius:50%;background:var(--red);margin:12px auto 0;box-shadow:0 0 0 5px var(--navy);position:relative;z-index:1}
.tl-item h3{color:#fff;font-size:clamp(22px,2.3vw,30px)}
.tl-item p{color:var(--lightblue);margin-top:14px;max-width:56ch}
.stack{position:relative;height:300px}
.stack img{position:absolute;width:62%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08)}
.stack img:nth-child(1){inset-inline-start:0;top:0;transform:rotate(-3deg)}
.stack img:nth-child(2){inset-inline-end:0;top:38px;transform:rotate(2.5deg);z-index:1}
[dir=rtl] .stack img:nth-child(1){transform:rotate(3deg)}
[dir=rtl] .stack img:nth-child(2){transform:rotate(-2.5deg)}

/* approach */
.approach h2{max-width:16ch}
.objs{list-style:none;display:grid;gap:14px;margin-top:8px}
.objs li{font-size:clamp(20px,2vw,27px);font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--navy);padding-inline-start:22px;border-inline-start:2px solid var(--red)}
.objs-note{margin-top:22px;color:var(--gray);font-size:15px}
.approach .prose{margin-top:64px;display:grid;gap:22px}
.steps{margin-top:72px;border-top:1px solid var(--line)}
.step{padding:36px 0 8px;grid-column:span 6}
.step:first-child{padding-inline-end:40px;border-inline-end:1px solid var(--line)}
.step:last-child{padding-inline-start:40px}
.step .k{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);font-weight:700}
[dir=rtl] .step .k{letter-spacing:.04em;text-transform:none}
.step h3{margin:14px 0;color:var(--navy)}
.step p{color:var(--ink2);font-size:17px}
.quote{margin-top:96px;font-size:clamp(26px,3vw,40px);font-weight:900;letter-spacing:-.03em;line-height:1.15;color:var(--navy);max-width:26ch}
[dir=rtl] .quote{letter-spacing:-.01em}
.quote::before{content:"";display:block;width:56px;height:3px;background:var(--red);margin-bottom:28px}
.quote-note{margin-top:22px;color:var(--gray);font-size:16px}

/* projects */
.proj .lead{margin-top:26px}
.rows{margin-top:80px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:64px 220px minmax(0,1fr);column-gap:24px;padding:48px 0;border-bottom:1px solid var(--line);align-items:start}
.row .idx{font-size:14px;font-weight:700;color:var(--red);letter-spacing:.1em;padding-top:8px}
.row .fact{font-size:13px;letter-spacing:.06em;color:var(--gray);padding-top:8px;line-height:1.5}
.row .fact b{display:block;font-size:22px;font-weight:900;color:var(--navy);letter-spacing:-.02em;line-height:1.1;margin-bottom:6px}
.row .role{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray2);font-weight:700}
[dir=rtl] .row .role{letter-spacing:.03em;text-transform:none}
.row h3{margin-top:8px;font-size:clamp(26px,2.6vw,36px);color:var(--navy)}
.row .body{display:grid;gap:16px;margin-top:16px}
.row .body p{color:var(--ink2)}
.row a.u{font-size:15px;font-weight:700;color:var(--navy);width:max-content}
.row .lk{display:flex;gap:28px;flex-wrap:wrap}

/* watch */
.feat{display:grid;grid-template-columns:2fr 1fr;gap:32px;margin-top:64px;align-items:end}
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px;margin-top:40px}
.vid{text-decoration:none;color:#fff;display:block}
.thumb{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:var(--navy2)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.thumb::after{content:"";position:absolute;inset:0;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.vids .thumb img{filter:saturate(.75)}
.vids .vid:hover .thumb img{filter:none}
.vids.two{grid-template-columns:repeat(2,1fr)}
.lg{position:absolute;top:8px;inset-inline-start:8px;background:rgba(11,21,34,.88);color:var(--lightblue);font-size:11px;font-weight:700;padding:3px 7px;border-radius:4px;letter-spacing:.08em;text-transform:uppercase}
.vid:hover .thumb img{transform:scale(1.03)}
.dur{position:absolute;bottom:8px;inset-inline-end:8px;background:rgba(11,21,34,.88);color:#fff;font-size:12px;font-weight:700;padding:3px 7px;border-radius:4px;letter-spacing:.03em;direction:ltr}
.vid .t{margin-top:12px;font-size:17px;font-weight:700;line-height:1.35}
.feat .vid .t{font-size:clamp(20px,2vw,26px);font-weight:900;letter-spacing:-.02em}
.vid .s{font-size:14px;color:var(--lightblue);margin-top:4px}
.feat-text{padding-bottom:6px}
.watch .all{margin-top:44px;display:flex;gap:30px;flex-wrap:wrap}
.watch .all a{color:#fff;font-weight:700;font-size:15px}

/* off stage */
.off-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px;align-items:start}
.off-grid figure{margin:0}
.off-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;filter:saturate(.8) contrast(.95)}
.off-grid figcaption{font-size:13px;color:var(--gray2);margin-top:10px;letter-spacing:.02em}
.off-list{list-style:none;margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.off-list.two{grid-template-columns:repeat(2,1fr);max-width:900px}
.off-list li{padding-top:20px;border-top:2px solid var(--navy);font-size:clamp(18px,1.6vw,22px);color:var(--ink2);line-height:1.4;font-weight:500}

/* contact + footer */
.contact{padding:120px 0 96px}
.contact .mail{display:inline-block;margin-top:26px;font-size:clamp(28px,4.4vw,60px);font-weight:900;letter-spacing:-.04em;line-height:1;color:#fff;text-decoration:none;word-break:break-all;direction:ltr}
.contact .mail:hover{color:var(--lightblue)}
.socials{margin-top:56px;padding-top:24px;border-top:1px solid var(--lineDark);display:flex;gap:36px;flex-wrap:wrap}
.socials a{color:#fff;text-decoration:none;font-size:15px;font-weight:500}
.socials a:hover{color:var(--red)}
footer{background:var(--navy3);color:var(--gray2);font-size:12.5px;padding:26px 0}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer .fl{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--gray2);text-decoration:none}
footer a:hover{color:#fff}

@media (max-width:900px){
  :root{--tlx:11px}
  .wrap{padding:0 22px}
  section{padding:80px 0}
  .g{grid-template-columns:1fr;column-gap:0}
  .g>*{grid-column:auto !important}
  .links{position:fixed;inset:64px 0 auto 0;background:var(--navy);flex-direction:column;align-items:flex-start;padding:18px 22px 26px;border-bottom:1px solid var(--lineDark);display:none;gap:18px}
  .links.open{display:flex}
  .burger{display:block}
  .hero{padding-top:44px;min-height:0}
  .hero .face{position:static;width:44%;max-width:190px;margin:0 0 22px;margin-inline-start:auto;transform:rotate(2deg) scaleX(-1)}
  .hero h1{font-size:clamp(64px,19vw,120px)}
  .roles{margin-top:26px;font-size:18px}
  .roles span+span::before{margin:0 9px}
  .nums{margin-top:56px}
  .nums .g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .stat{padding:24px 0 22px;border-inline-start:0;border-top:1px solid var(--lineDark)}
  .stat:nth-child(2n){padding-inline-start:20px;border-inline-start:1px solid var(--lineDark)}
  .stat:first-child,.stat:nth-child(2){border-top:0}
  .stat .n{font-size:26px;white-space:normal;line-height:1.1}
  .hint{display:none}
  .tl{margin-top:48px}
  .tl-item{grid-template-columns:24px minmax(0,1fr);column-gap:18px;padding-bottom:48px}
  .tl-item .yr{grid-column:2;grid-row:1;text-align:start;padding-top:0}
  .tl-item .dot{grid-column:1;grid-row:1/3;margin-top:5px}
  .tl-item .txt{grid-column:2;grid-row:2;margin-top:8px}
  .stack{grid-column:2;grid-row:3;height:250px;margin-top:22px;max-width:360px}
  .objs{margin-top:34px}
  .approach .prose{margin-top:44px}
  .steps{margin-top:48px}
  .step:first-child{padding-inline-end:0;border-inline-end:0;border-bottom:1px solid var(--line);padding-bottom:32px}
  .step:last-child{padding-inline-start:0}
  .quote{margin-top:56px}
  .rows{margin-top:48px}
  .row{grid-template-columns:40px minmax(0,1fr);padding:32px 0;row-gap:14px}
  .row .fact{grid-column:2;order:3;padding-top:0}
  .row .fact b{display:inline;font-size:15px;margin:0 6px 0 0}
  .row .main{grid-column:2}
  .feat{grid-template-columns:1fr;gap:0;margin-top:44px}
  .feat-text{font-size:15px;margin-top:14px;color:var(--lightblue)}
  .vids,.vids.two{grid-template-columns:1fr 1fr;gap:22px 14px;margin-top:22px}
  .vid .t{font-size:15px}
  .off-grid{grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
  .off-grid figure:last-child{grid-column:1/-1}
  .off-grid figure:last-child img{aspect-ratio:16/10;object-position:50% 30%}
  .off-list,.off-list.two{grid-template-columns:1fr;gap:16px;margin-top:44px}
  .contact{padding:80px 0 64px}
  .socials{gap:22px}
}